Background Editor

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { Button } from "@/components/ui/button"
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger,
9} from "@/components/ui/popover"
10import { cn } from "@/lib/utils"
11import {
12  defaultBackground,
13  formatBackground,
14  parseBackground,
15} from "./background-editor.helpers"
16import type { BackgroundString, BgLayer } from "./background-editor.types"
17import { BackgroundPreview } from "./background-preview"
18import { LayerStack } from "./layer-stack"
19 
20// Re-export the public sub-components + their prop types so consumers (and the
21// barrel) can import them from `./background-editor`.
22export type { BackgroundPreviewProps } from "./background-preview"
23export { BackgroundPreview } from "./background-preview"
24export type { LayerCardProps } from "./layer-card"
25export { LayerCard } from "./layer-card"
26export type { LayerStackProps } from "./layer-stack"
27export { LayerStack } from "./layer-stack"
28export type { MiniSelectProps } from "./mini-select"
29export { MiniSelect } from "./mini-select"
30export type { PositionPadProps } from "./position-pad"
31export { PositionPad } from "./position-pad"
32 
33// ---------------------------------------------------------------------------
34// Props
35// ---------------------------------------------------------------------------
36 
37export interface BackgroundEditorPanelProps {
38  value: BackgroundString | (string & {})
39  onChange: (value: BackgroundString) => void
40  className?: string
41  "aria-label"?: string
42}
43 
44export interface BackgroundEditorProps extends BackgroundEditorPanelProps {}
45 
46// ---------------------------------------------------------------------------
47// color re-homing — the index-aware invariant, kept true under reorder
48// ---------------------------------------------------------------------------
49 
50/**
51 * Keep the `<color>` on the FINAL layer no matter how the stack is reordered.
52 * A reorder swaps whole layer objects, so a color that was on the last layer
53 * would otherwise travel with its object into a non-final slot and be dropped
54 * by `formatBackground` (which only emits a color on the last layer). This
55 * collects any color found anywhere in the stack and re-homes it onto the last
56 * layer, stripping it from every other — so the invariant survives a reorder.
57 */
58function migrateColorToFinal(layers: BgLayer[]): BgLayer[] {
59  if (layers.length === 0) return layers
60  // The last non-empty color wins (mirrors CSS: only the final layer's color
61// … truncated