@snowcone-app/canvas 0.23.0 → 0.27.0

package/dist/{custom-icons-BW6hqmkL.js.map → custom-icons-CcLMyybv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"custom-icons-BW6hqmkL.js","sources":["../src/vendor/ui/primitives/input.tsx","../src/vendor/ui/primitives/label.tsx","../src/vendor/ui/primitives/tabs.tsx","../src/vendor/ui/primitives/text-field.tsx","../src/components/ui/custom-icons.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../lib/utils';\nimport { useSurface } from './surface';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /** Whether the input is in an invalid state */\n  isInvalid?: boolean;\n  /** Content to display at the start of the input */\n  startContent?: React.ReactNode;\n  /** Content to display at the end of the input */\n  endContent?: React.ReactNode;\n  /**\n   * Visual variant - auto-detected from Surface context, or can be set explicitly\n   * - `default`: Standard field styling for forms (bg-field)\n   * - `filled`: Field on elevated surface (bg-field-on-surface)\n   * - `subtle`: Blends with buttons/tabs in toolbars (bg-default)\n   */\n  variant?: 'default' | 'filled' | 'subtle';\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      isInvalid,\n      startContent,\n      endContent,\n      disabled,\n      readOnly,\n      required,\n      variant,\n      ...props\n    },\n    ref\n  ) => {\n    // Auto-detect variant from Surface context\n    const surface = useSurface();\n    const isOnSurface = surface.variant === 'default' || surface.variant === 'secondary';\n    const effectiveVariant = variant ?? (isOnSurface ? 'filled' : 'default');\n\n    const inputElement = (\n      <input\n        type={type}\n        className={cn(\n          'sc:flex sc:h-10 sc:w-full sc:rounded-input sc:px-2.5 sc:py-1.5 sc:text-sm sc:appearance-none',\n          'sc:text-foreground sc:border-none',\n          'sc:file:border-0 sc:file:bg-transparent sc:file:text-sm sc:file:font-medium sc:file:text-foreground',\n          'sc:placeholder:text-foreground/50',\n          'sc:transition-shadow sc:duration-200 sc:ease-out sc:focus-visible:outline-none sc:focus:ring-2 sc:focus:ring-focus sc:focus:ring-offset-1 sc:focus:ring-offset-background',\n          'sc:disabled:cursor-not-allowed sc:disabled:opacity-50',\n          // Variant styles - semantic: field on page vs field on surface vs toolbar\n          effectiveVariant === 'default' && 'sc:bg-field sc:shadow-soft sc:dark:shadow-none',\n          effectiveVariant === 'filled' && 'sc:bg-[var(--color-field-on-surface)]',\n          effectiveVariant === 'subtle' && 'sc:bg-default sc:dark:bg-[var(--color-default-on-surface)]',\n          isInvalid && 'sc:ring-2 sc:ring-danger sc:focus-visible:ring-danger',\n          startContent && 'sc:pl-10',\n          endContent && 'sc:pr-10',\n          className\n        )}\n        ref={ref}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        aria-invalid={isInvalid}\n        {...props}\n      />\n    );\n\n    if (startContent || endContent) {\n      return (\n        <div className=\"sc:relative\">\n          {startContent && (\n            <div className=\"sc:absolute sc:left-3 sc:top-1/2 sc:-translate-y-1/2 sc:text-foreground sc:opacity-40\">{startContent}</div>\n          )}\n          {inputElement}\n          {endContent && (\n            <div className=\"sc:absolute sc:right-3 sc:top-1/2 sc:-translate-y-1/2 sc:text-foreground sc:opacity-40\">{endContent}</div>\n          )}\n        </div>\n      );\n    }\n\n    return inputElement;\n  }\n);\nInput.displayName = 'Input';\n\nexport { Input };\n","'use client';\n\nimport * as React from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../lib/utils';\n\nconst labelVariants = cva(\n  'sc:block sc:text-sm sc:leading-none sc:text-foreground sc:peer-disabled:cursor-not-allowed sc:peer-disabled:opacity-70 sc:font-label'\n);\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n","\"use client\";\n\n'use client';\n\nimport * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cn } from '../lib/utils';\nimport { useSurface } from './surface';\n\ninterface TabsProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'onValueChange'> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst TabsRoot = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>(\n  ({ value, onValueChange, ...props }, ref) => (\n    <TabsPrimitive.Root ref={ref} value={value} onValueChange={onValueChange} {...props} />\n  )\n);\nTabsRoot.displayName = 'Tabs';\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, children, ...props }, ref) => {\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({\n    opacity: 0,\n  });\n\n  // Update indicator position when active tab changes\n  React.useEffect(() => {\n    const listElement = listRef.current;\n    if (!listElement) return;\n\n    const updateIndicator = () => {\n      const activeTab = listElement.querySelector('[data-state=\"active\"]') as HTMLElement;\n      if (activeTab) {\n        const listRect = listElement.getBoundingClientRect();\n        const tabRect = activeTab.getBoundingClientRect();\n\n        setIndicatorStyle({\n          width: tabRect.width,\n          height: tabRect.height,\n          left: tabRect.left - listRect.left,\n          opacity: 1,\n        });\n      }\n    };\n\n    // Initial position\n    updateIndicator();\n\n    // Use MutationObserver to detect when active tab changes\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'data-state') {\n          updateIndicator();\n          break;\n        }\n      }\n    });\n\n    // Observe all trigger elements for data-state changes\n    const triggers = listElement.querySelectorAll('[role=\"tab\"]');\n    triggers.forEach((trigger) => {\n      observer.observe(trigger, { attributes: true, attributeFilter: ['data-state'] });\n    });\n\n    // Also update on resize\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(listElement);\n\n    return () => {\n      observer.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [children]);\n\n  return (\n    <TabsPrimitive.List\n      ref={(node) => {\n        // Handle both refs\n        (listRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      }}\n      className={cn(\n        'sc:relative sc:inline-flex sc:h-10 sc:items-center sc:justify-center sc:rounded-full sc:px-1 sc:text-muted-foreground',\n        // Consistent bg-default matches Button secondary variant for toolbar harmony\n        'sc:bg-default sc:dark:bg-[var(--color-default-on-surface)]',\n        className\n      )}\n      {...props}\n    >\n      {/* Animated sliding indicator. In dark mode the previous `bg-muted`\n          value resolved to the same color as `bg-default` on the container,\n          so the active tab was invisible without relying purely on\n          shadow-md. `bg-popover` lands ~0.08 lightness above `bg-default`\n          in dark mode for a clearly visible elevation. */}\n      <span\n        className=\"sc:absolute sc:top-1/2 sc:-translate-y-1/2 sc:rounded-full sc:bg-surface sc:dark:bg-popover sc:shadow-md sc:transition-[left,width,opacity]\"\n        style={{\n          ...indicatorStyle,\n          transitionDuration: '350ms',\n          transitionTimingFunction: 'cubic-bezier(0.22, 1, 0.36, 1)',\n        }}\n        aria-hidden=\"true\"\n      />\n      {children}\n    </TabsPrimitive.List>\n  );\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\ninterface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'value'> {\n  // HeroUI uses 'id' for tab identification, Radix uses 'value'\n  // At least one must be provided\n  id?: string;\n  value?: string;\n}\n\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n  ({ className, id, value, ...props }, ref) => {\n    const { variant: surfaceVariant } = useSurface();\n    const isOnSurface = surfaceVariant === 'default' || surfaceVariant === 'secondary';\n\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        value={id ?? value ?? ''}\n        className={cn(\n          'sc:relative sc:z-10 sc:inline-flex sc:h-8 sc:items-center sc:justify-center sc:gap-2 sc:whitespace-nowrap sc:rounded-full sc:px-4 sc:text-sm sc:font-label',\n          'sc:transition-[color,opacity]',\n          'sc:focus-visible:outline-none sc:focus-visible:ring-2 sc:focus-visible:ring-focus sc:focus-visible:ring-offset-2',\n          'sc:disabled:pointer-events-none sc:disabled:opacity-50',\n          'sc:data-[state=active]:text-foreground sc:data-[state=active]:opacity-100',\n          // Inactive tabs use element opacity (not color opacity) to avoid SVG path overlap issues\n          isOnSurface\n            ? 'sc:data-[state=inactive]:text-foreground sc:data-[state=inactive]:opacity-30 sc:data-[state=inactive]:hover:opacity-50'\n            : 'sc:data-[state=inactive]:text-foreground sc:data-[state=inactive]:opacity-50 sc:data-[state=inactive]:hover:opacity-70',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\ninterface TabsContentProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'value'> {\n  // HeroUI uses 'id' for panel identification, Radix uses 'value'\n  // At least one must be provided\n  id?: string;\n  value?: string;\n}\n\nconst TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(\n  ({ className, id, value, ...props }, ref) => (\n    <TabsPrimitive.Content\n      ref={ref}\n      value={id ?? value ?? ''}\n      className={cn(\n        'sc:mt-2 sc:ring-offset-background sc:focus-visible:outline-none sc:focus-visible:ring-2 sc:focus-visible:ring-focus sc:focus-visible:ring-offset-2',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\n// HeroUI ListContainer - wrapper for the tabs list (passthrough div)\nconst TabsListContainer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />\n);\nTabsListContainer.displayName = 'TabsListContainer';\n\n// HeroUI Tab - alias for TabsTrigger\nconst TabsTab = TabsTrigger;\n\n// HeroUI Panel - alias for TabsContent\nconst TabsPanel = TabsContent;\n\n// HeroUI Indicator - now rendered automatically by TabsList, this is a no-op\nconst TabsIndicator = () => null;\n\n// Create compound component with all aliases\nconst TabsBase = TabsRoot;\n\n// HeroUI-compatible compound component\nconst Tabs = Object.assign(TabsBase, {\n  List: TabsList,\n  ListContainer: TabsListContainer,\n  Tab: TabsTab,\n  Trigger: TabsTrigger,\n  Panel: TabsPanel,\n  Content: TabsContent,\n  Indicator: TabsIndicator,\n});\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, TabsRoot };\n","'use client';\n\nimport * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TextFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Accessible label for the input.\n   * If not provided via children, use aria-label on the div.\n   */\n  'aria-label'?: string;\n  /**\n   * Error state - applies error styling to children inputs\n   */\n  isInvalid?: boolean;\n  /**\n   * Disabled state - disables all children inputs\n   */\n  disabled?: boolean;\n  /**\n   * Required state - marks all children inputs as required\n   */\n  required?: boolean;\n}\n\n/**\n * TextField - A wrapper component that groups Label and Input together.\n *\n * Groups Label and Input with a convenient wrapper that can propagate\n * disabled, required, and invalid states to child inputs.\n *\n * @example\n * ```tsx\n * <TextField>\n *   <Label>Email</Label>\n *   <Input type=\"email\" placeholder=\"Enter email...\" />\n * </TextField>\n * ```\n */\nconst TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(\n  ({ className, children, isInvalid, disabled, required, ...props }, ref) => {\n    // Clone children to pass through state props to Input/Textarea children\n    const enhancedChildren = React.Children.map(children, (child) => {\n      if (!React.isValidElement(child)) return child;\n\n      // Get the display name or type name to check if it's an input component\n      const childType = child.type;\n      const displayName =\n        typeof childType === 'function'\n          ? (childType as React.ComponentType).displayName || childType.name\n          : typeof childType === 'string'\n            ? childType\n            : '';\n\n      // Check if this is an input-like element that should receive state props\n      const isInputElement =\n        displayName === 'Input' ||\n        displayName === 'Textarea' ||\n        displayName === 'TextArea' ||\n        displayName === 'input' ||\n        displayName === 'textarea';\n\n      if (isInputElement) {\n        const childProps = child.props as Record<string, unknown>;\n        return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n          isInvalid: (childProps.isInvalid as boolean) ?? isInvalid,\n          disabled: (childProps.disabled as boolean) ?? disabled,\n          required: (childProps.required as boolean) ?? required,\n        });\n      }\n\n      return child;\n    });\n\n    return (\n      <div ref={ref} className={cn('sc:flex sc:flex-col sc:gap-1.5', className)} {...props}>\n        {enhancedChildren}\n      </div>\n    );\n  }\n);\nTextField.displayName = 'TextField';\n\nexport { TextField };\n","/**\n * Custom Icons - Centered versions of icons from various sets\n *\n * These are copies of icons with adjusted viewBox to center properly.\n * Use these instead of the original iconify versions for consistent alignment.\n */\n\nimport React from 'react';\nimport { cn } from '../../lib/utils';\n\ninterface IconProps {\n  className?: string;\n  size?: number | string;\n}\n\n/**\n * Rotate Left icon (lucide-style stroked version)\n */\nexport const RotateLeftIcon: React.FC<IconProps> = ({ className, size = 24 }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    width={size}\n    height={size}\n    className={cn('sc:inline-block iconify', className)}\n  >\n    <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" />\n    <path d=\"M3 3v5h5\" />\n  </svg>\n);\n\n/**\n * Rotate Right icon (lucide-style stroked version)\n */\nexport const RotateRightIcon: React.FC<IconProps> = ({ className, size = 24 }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    width={size}\n    height={size}\n    className={cn('sc:inline-block iconify', className)}\n  >\n    <path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n    <path d=\"M21 3v5h-5\" />\n  </svg>\n);\n\n/**\n * Sparkles icon (based on gravity-ui:sparkles)\n * Two sparkle shapes - main 4-point star and smaller accent\n */\nexport const SparklesIcon: React.FC<IconProps> = ({ className, size = 24 }) => (\n  <svg\n    viewBox=\"0 0 28 28\"\n    fill=\"currentColor\"\n    width={size}\n    height={size}\n    className={cn('sc:inline-block', className)}\n  >\n    <path d=\"M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m-3.273-6.873l-2.22-.72s-.085-.038-.085-.108a.14.14 0 0 1 .084-.115L6.8 10.16a5.34 5.34 0 0 0 3.32-3.375l.721-2.219s.043-.084.114-.084s.113.084.113.084l.723 2.223a5.32 5.32 0 0 0 3.377 3.372l2.27.735a.13.13 0 0 1 .078.11a.15.15 0 0 1-.083.113l-2.225.722a5.32 5.32 0 0 0-3.374 3.374l-.715 2.2a.11.11 0 0 1-.115.093c-.104 0-.118-.075-.118-.075l-.723-2.22a5.32 5.32 0 0 0-3.376-3.385m13.017 12.954A1.2 1.2 0 0 0 20.5 25a1.2 1.2 0 0 0 .692-.216a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582m-1.371-4.194l-.27-.088l.283-.096a3.12 3.12 0 0 0 1.943-1.974l.088-.27l.089.272a3.11 3.11 0 0 0 1.974 1.975l.293.1l-.271.087a3.12 3.12 0 0 0-1.974 1.977l-.088.27l-.088-.272a3.12 3.12 0 0 0-1.98-1.98\" />\n  </svg>\n);\n\n// Map of icon names to components for easy lookup\nexport const CustomIcons = {\n  'rotate-left': RotateLeftIcon,\n  'rotate-right': RotateRightIcon,\n  'sparkles': SparklesIcon,\n} as const;\n\nexport type CustomIconName = keyof typeof CustomIcons;\n"],"names":["Input","React","className","type","isInvalid","startContent","endContent","disabled","readOnly","required","variant","props","ref","surface","useSurface","isOnSurface","effectiveVariant","inputElement","jsx","cn","jsxs","labelVariants","cva","Label","LabelPrimitive","TabsRoot","value","onValueChange","TabsPrimitive","TabsList","children","listRef","indicatorStyle","setIndicatorStyle","listElement","updateIndicator","activeTab","listRect","tabRect","observer","mutations","mutation","trigger","resizeObserver","node","TabsTrigger","id","surfaceVariant","TabsContent","TabsListContainer","TabsTab","TabsPanel","TabsIndicator","TabsBase","Tabs","TextField","enhancedChildren","child","childType","displayName","childProps","RotateLeftIcon","size","SparklesIcon"],"mappings":"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"}
+{"version":3,"file":"custom-icons-CcLMyybv.js","sources":["../src/vendor/ui/primitives/input.tsx","../src/vendor/ui/primitives/label.tsx","../src/vendor/ui/primitives/tabs.tsx","../src/vendor/ui/primitives/text-field.tsx","../src/components/ui/custom-icons.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../lib/utils';\nimport { useSurface } from './surface';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /** Whether the input is in an invalid state */\n  isInvalid?: boolean;\n  /** Content to display at the start of the input */\n  startContent?: React.ReactNode;\n  /** Content to display at the end of the input */\n  endContent?: React.ReactNode;\n  /**\n   * Visual variant - auto-detected from Surface context, or can be set explicitly\n   * - `default`: Standard field styling for forms (bg-field)\n   * - `filled`: Field on elevated surface (bg-field-on-surface)\n   * - `subtle`: Blends with buttons/tabs in toolbars (bg-default)\n   */\n  variant?: 'default' | 'filled' | 'subtle';\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      isInvalid,\n      startContent,\n      endContent,\n      disabled,\n      readOnly,\n      required,\n      variant,\n      ...props\n    },\n    ref\n  ) => {\n    // Auto-detect variant from Surface context\n    const surface = useSurface();\n    const isOnSurface = surface.variant === 'default' || surface.variant === 'secondary';\n    const effectiveVariant = variant ?? (isOnSurface ? 'filled' : 'default');\n\n    const inputElement = (\n      <input\n        type={type}\n        className={cn(\n          'sc:flex sc:h-10 sc:w-full sc:rounded-input sc:px-2.5 sc:py-1.5 sc:text-sm sc:appearance-none',\n          'sc:text-foreground sc:border-none',\n          'sc:file:border-0 sc:file:bg-transparent sc:file:text-sm sc:file:font-medium sc:file:text-foreground',\n          'sc:placeholder:text-foreground/50',\n          'sc:transition-shadow sc:duration-200 sc:ease-out sc:focus-visible:outline-none sc:focus:ring-2 sc:focus:ring-focus sc:focus:ring-offset-1 sc:focus:ring-offset-background',\n          'sc:disabled:cursor-not-allowed sc:disabled:opacity-50',\n          // Variant styles - semantic: field on page vs field on surface vs toolbar\n          effectiveVariant === 'default' && 'sc:bg-field sc:shadow-soft sc:dark:shadow-none',\n          effectiveVariant === 'filled' && 'sc:bg-[var(--color-field-on-surface)]',\n          effectiveVariant === 'subtle' && 'sc:bg-default sc:dark:bg-[var(--color-default-on-surface)]',\n          isInvalid && 'sc:ring-2 sc:ring-danger sc:focus-visible:ring-danger',\n          startContent && 'sc:pl-10',\n          endContent && 'sc:pr-10',\n          className\n        )}\n        ref={ref}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        aria-invalid={isInvalid}\n        {...props}\n      />\n    );\n\n    if (startContent || endContent) {\n      return (\n        <div className=\"sc:relative\">\n          {startContent && (\n            <div className=\"sc:absolute sc:left-3 sc:top-1/2 sc:-translate-y-1/2 sc:text-foreground sc:opacity-40\">{startContent}</div>\n          )}\n          {inputElement}\n          {endContent && (\n            <div className=\"sc:absolute sc:right-3 sc:top-1/2 sc:-translate-y-1/2 sc:text-foreground sc:opacity-40\">{endContent}</div>\n          )}\n        </div>\n      );\n    }\n\n    return inputElement;\n  }\n);\nInput.displayName = 'Input';\n\nexport { Input };\n","'use client';\n\nimport * as React from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../lib/utils';\n\nconst labelVariants = cva(\n  'sc:block sc:text-sm sc:leading-none sc:text-foreground sc:peer-disabled:cursor-not-allowed sc:peer-disabled:opacity-70 sc:font-label'\n);\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n","\"use client\";\n\n'use client';\n\nimport * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cn } from '../lib/utils';\nimport { useSurface } from './surface';\n\ninterface TabsProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'onValueChange'> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst TabsRoot = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>(\n  ({ value, onValueChange, ...props }, ref) => (\n    <TabsPrimitive.Root ref={ref} value={value} onValueChange={onValueChange} {...props} />\n  )\n);\nTabsRoot.displayName = 'Tabs';\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, children, ...props }, ref) => {\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({\n    opacity: 0,\n  });\n\n  // Update indicator position when active tab changes\n  React.useEffect(() => {\n    const listElement = listRef.current;\n    if (!listElement) return;\n\n    const updateIndicator = () => {\n      const activeTab = listElement.querySelector('[data-state=\"active\"]') as HTMLElement;\n      if (activeTab) {\n        const listRect = listElement.getBoundingClientRect();\n        const tabRect = activeTab.getBoundingClientRect();\n\n        setIndicatorStyle({\n          width: tabRect.width,\n          height: tabRect.height,\n          left: tabRect.left - listRect.left,\n          opacity: 1,\n        });\n      }\n    };\n\n    // Initial position\n    updateIndicator();\n\n    // Use MutationObserver to detect when active tab changes\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'data-state') {\n          updateIndicator();\n          break;\n        }\n      }\n    });\n\n    // Observe all trigger elements for data-state changes\n    const triggers = listElement.querySelectorAll('[role=\"tab\"]');\n    triggers.forEach((trigger) => {\n      observer.observe(trigger, { attributes: true, attributeFilter: ['data-state'] });\n    });\n\n    // Also update on resize\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(listElement);\n\n    return () => {\n      observer.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [children]);\n\n  return (\n    <TabsPrimitive.List\n      ref={(node) => {\n        // Handle both refs\n        (listRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      }}\n      className={cn(\n        'sc:relative sc:inline-flex sc:h-10 sc:items-center sc:justify-center sc:rounded-full sc:px-1 sc:text-muted-foreground',\n        // Consistent bg-default matches Button secondary variant for toolbar harmony\n        'sc:bg-default sc:dark:bg-[var(--color-default-on-surface)]',\n        className\n      )}\n      {...props}\n    >\n      {/* Animated sliding indicator. In dark mode the previous `bg-muted`\n          value resolved to the same color as `bg-default` on the container,\n          so the active tab was invisible without relying purely on\n          shadow-md. `bg-popover` lands ~0.08 lightness above `bg-default`\n          in dark mode for a clearly visible elevation. */}\n      <span\n        className=\"sc:absolute sc:top-1/2 sc:-translate-y-1/2 sc:rounded-full sc:bg-surface sc:dark:bg-popover sc:shadow-md sc:transition-[left,width,opacity]\"\n        style={{\n          ...indicatorStyle,\n          transitionDuration: '350ms',\n          transitionTimingFunction: 'cubic-bezier(0.22, 1, 0.36, 1)',\n        }}\n        aria-hidden=\"true\"\n      />\n      {children}\n    </TabsPrimitive.List>\n  );\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\ninterface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'value'> {\n  // HeroUI uses 'id' for tab identification, Radix uses 'value'\n  // At least one must be provided\n  id?: string;\n  value?: string;\n}\n\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n  ({ className, id, value, ...props }, ref) => {\n    const { variant: surfaceVariant } = useSurface();\n    const isOnSurface = surfaceVariant === 'default' || surfaceVariant === 'secondary';\n\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        value={id ?? value ?? ''}\n        className={cn(\n          'sc:relative sc:z-10 sc:inline-flex sc:h-8 sc:items-center sc:justify-center sc:gap-2 sc:whitespace-nowrap sc:rounded-full sc:px-4 sc:text-sm sc:font-label',\n          'sc:transition-[color,opacity]',\n          'sc:focus-visible:outline-none sc:focus-visible:ring-2 sc:focus-visible:ring-focus sc:focus-visible:ring-offset-2',\n          'sc:disabled:pointer-events-none sc:disabled:opacity-50',\n          'sc:data-[state=active]:text-foreground sc:data-[state=active]:opacity-100',\n          // Inactive tabs use element opacity (not color opacity) to avoid SVG path overlap issues\n          isOnSurface\n            ? 'sc:data-[state=inactive]:text-foreground sc:data-[state=inactive]:opacity-30 sc:data-[state=inactive]:hover:opacity-50'\n            : 'sc:data-[state=inactive]:text-foreground sc:data-[state=inactive]:opacity-50 sc:data-[state=inactive]:hover:opacity-70',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\ninterface TabsContentProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'value'> {\n  // HeroUI uses 'id' for panel identification, Radix uses 'value'\n  // At least one must be provided\n  id?: string;\n  value?: string;\n}\n\nconst TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(\n  ({ className, id, value, ...props }, ref) => (\n    <TabsPrimitive.Content\n      ref={ref}\n      value={id ?? value ?? ''}\n      className={cn(\n        'sc:mt-2 sc:ring-offset-background sc:focus-visible:outline-none sc:focus-visible:ring-2 sc:focus-visible:ring-focus sc:focus-visible:ring-offset-2',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\n// HeroUI ListContainer - wrapper for the tabs list (passthrough div)\nconst TabsListContainer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />\n);\nTabsListContainer.displayName = 'TabsListContainer';\n\n// HeroUI Tab - alias for TabsTrigger\nconst TabsTab = TabsTrigger;\n\n// HeroUI Panel - alias for TabsContent\nconst TabsPanel = TabsContent;\n\n// HeroUI Indicator - now rendered automatically by TabsList, this is a no-op\nconst TabsIndicator = () => null;\n\n// Create compound component with all aliases\nconst TabsBase = TabsRoot;\n\n// HeroUI-compatible compound component\nconst Tabs = Object.assign(TabsBase, {\n  List: TabsList,\n  ListContainer: TabsListContainer,\n  Tab: TabsTab,\n  Trigger: TabsTrigger,\n  Panel: TabsPanel,\n  Content: TabsContent,\n  Indicator: TabsIndicator,\n});\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, TabsRoot };\n","'use client';\n\nimport * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TextFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Accessible label for the input.\n   * If not provided via children, use aria-label on the div.\n   */\n  'aria-label'?: string;\n  /**\n   * Error state - applies error styling to children inputs\n   */\n  isInvalid?: boolean;\n  /**\n   * Disabled state - disables all children inputs\n   */\n  disabled?: boolean;\n  /**\n   * Required state - marks all children inputs as required\n   */\n  required?: boolean;\n}\n\n/**\n * TextField - A wrapper component that groups Label and Input together.\n *\n * Groups Label and Input with a convenient wrapper that can propagate\n * disabled, required, and invalid states to child inputs.\n *\n * @example\n * ```tsx\n * <TextField>\n *   <Label>Email</Label>\n *   <Input type=\"email\" placeholder=\"Enter email...\" />\n * </TextField>\n * ```\n */\nconst TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(\n  ({ className, children, isInvalid, disabled, required, ...props }, ref) => {\n    // Clone children to pass through state props to Input/Textarea children\n    const enhancedChildren = React.Children.map(children, (child) => {\n      if (!React.isValidElement(child)) return child;\n\n      // Get the display name or type name to check if it's an input component\n      const childType = child.type;\n      const displayName =\n        typeof childType === 'function'\n          ? (childType as React.ComponentType).displayName || childType.name\n          : typeof childType === 'string'\n            ? childType\n            : '';\n\n      // Check if this is an input-like element that should receive state props\n      const isInputElement =\n        displayName === 'Input' ||\n        displayName === 'Textarea' ||\n        displayName === 'TextArea' ||\n        displayName === 'input' ||\n        displayName === 'textarea';\n\n      if (isInputElement) {\n        const childProps = child.props as Record<string, unknown>;\n        return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n          isInvalid: (childProps.isInvalid as boolean) ?? isInvalid,\n          disabled: (childProps.disabled as boolean) ?? disabled,\n          required: (childProps.required as boolean) ?? required,\n        });\n      }\n\n      return child;\n    });\n\n    return (\n      <div ref={ref} className={cn('sc:flex sc:flex-col sc:gap-1.5', className)} {...props}>\n        {enhancedChildren}\n      </div>\n    );\n  }\n);\nTextField.displayName = 'TextField';\n\nexport { TextField };\n","/**\n * Custom Icons - Centered versions of icons from various sets\n *\n * These are copies of icons with adjusted viewBox to center properly.\n * Use these instead of the original iconify versions for consistent alignment.\n */\n\nimport React from 'react';\nimport { cn } from '../../lib/utils';\n\ninterface IconProps {\n  className?: string;\n  size?: number | string;\n}\n\n/**\n * Rotate Left icon (lucide-style stroked version)\n */\nexport const RotateLeftIcon: React.FC<IconProps> = ({ className, size = 24 }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    width={size}\n    height={size}\n    className={cn('sc:inline-block iconify', className)}\n  >\n    <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" />\n    <path d=\"M3 3v5h5\" />\n  </svg>\n);\n\n/**\n * Rotate Right icon (lucide-style stroked version)\n */\nexport const RotateRightIcon: React.FC<IconProps> = ({ className, size = 24 }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    width={size}\n    height={size}\n    className={cn('sc:inline-block iconify', className)}\n  >\n    <path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n    <path d=\"M21 3v5h-5\" />\n  </svg>\n);\n\n/**\n * Sparkles icon (based on gravity-ui:sparkles)\n * Two sparkle shapes - main 4-point star and smaller accent\n */\nexport const SparklesIcon: React.FC<IconProps> = ({ className, size = 24 }) => (\n  <svg\n    viewBox=\"0 0 28 28\"\n    fill=\"currentColor\"\n    width={size}\n    height={size}\n    className={cn('sc:inline-block', className)}\n  >\n    <path d=\"M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m-3.273-6.873l-2.22-.72s-.085-.038-.085-.108a.14.14 0 0 1 .084-.115L6.8 10.16a5.34 5.34 0 0 0 3.32-3.375l.721-2.219s.043-.084.114-.084s.113.084.113.084l.723 2.223a5.32 5.32 0 0 0 3.377 3.372l2.27.735a.13.13 0 0 1 .078.11a.15.15 0 0 1-.083.113l-2.225.722a5.32 5.32 0 0 0-3.374 3.374l-.715 2.2a.11.11 0 0 1-.115.093c-.104 0-.118-.075-.118-.075l-.723-2.22a5.32 5.32 0 0 0-3.376-3.385m13.017 12.954A1.2 1.2 0 0 0 20.5 25a1.2 1.2 0 0 0 .692-.216a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582m-1.371-4.194l-.27-.088l.283-.096a3.12 3.12 0 0 0 1.943-1.974l.088-.27l.089.272a3.11 3.11 0 0 0 1.974 1.975l.293.1l-.271.087a3.12 3.12 0 0 0-1.974 1.977l-.088.27l-.088-.272a3.12 3.12 0 0 0-1.98-1.98\" />\n  </svg>\n);\n\n// Map of icon names to components for easy lookup\nexport const CustomIcons = {\n  'rotate-left': RotateLeftIcon,\n  'rotate-right': RotateRightIcon,\n  'sparkles': SparklesIcon,\n} as const;\n\nexport type CustomIconName = keyof typeof CustomIcons;\n"],"names":["Input","React","className","type","isInvalid","startContent","endContent","disabled","readOnly","required","variant","props","ref","surface","useSurface","isOnSurface","effectiveVariant","inputElement","jsx","cn","jsxs","labelVariants","cva","Label","LabelPrimitive","TabsRoot","value","onValueChange","TabsPrimitive","TabsList","children","listRef","indicatorStyle","setIndicatorStyle","listElement","updateIndicator","activeTab","listRect","tabRect","observer","mutations","mutation","trigger","resizeObserver","node","TabsTrigger","id","surfaceVariant","TabsContent","TabsListContainer","TabsTab","TabsPanel","TabsIndicator","TabsBase","Tabs","TextField","enhancedChildren","child","childType","displayName","childProps","RotateLeftIcon","size","SparklesIcon"],"mappings":"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"}

package/dist/design/design-builder.d.ts

@@ -178,13 +178,20 @@ type InferKind<N extends string, TText extends string, TImage extends string> =
  * docs; never block the dynamic case).
  */
 export declare class DesignBuilder<out TText extends string = string, out TImage extends string = string, out TColor extends string = string> {
-    private readonly artboard;
+    /** The CURRENT authoring artboard — anchor math and new elements target it.
+     *  Reassigned by {@link DesignBuilder.artboard}; the initially-active
+     *  placement stays {@link activeName}. */
+    private current;
+    /** The placement that is active when the design mounts — always the FIRST
+     *  artboard (or the saved state's active one), never moved by `.artboard()`. */
+    private readonly activeName;
     private readonly els;
     /** Declared color roles, name → normalized uppercase `#RRGGBB`. */
     private readonly colorRoles;
     private idCounter;
-    /** Every artboard of a multi-page state (fromState `{ artboards: 'all' }`);
-     *  unset for single-artboard builders. */
+    /** Every artboard of a multi-artboard design — set by `fromState({ artboards:
+     *  'all' })` or the first `.artboard()` call; unset for single-artboard
+     *  builders. */
     private allArtboards?;
     constructor(artboard: DesignArtboard);
     /**
@@ -208,6 +215,37 @@ export declare class DesignBuilder<out TText extends string = string, out TImage
         activeArtboard: string;
     }, options?: FromStateOptions): DesignBuilder;
     private nextId;
+    /** A wire-shape snapshot of an authoring artboard, applying the same
+     *  background-export rule everywhere (a design background is part of the
+     *  design — exports and server renders paint it). */
+    private static snapshotArtboard;
+    /**
+     * Open a NEW artboard (placement) and make it the authoring context: layer
+     * calls after this target the new artboard — anchor math uses its
+     * dimensions, and the elements carry its membership tag (the public
+     * `artboard` field, PR #482). The FIRST artboard (from `design({ name })`)
+     * remains the initially-active placement when the design mounts; switch at
+     * runtime with `usePlacements()` / `<Editor.Placements/>` (ADR-0088).
+     *
+     * `label` must be the product's placement label (case-sensitive) — the same
+     * artboard-name-is-placement-label rule as `design({ name })`.
+     *
+     * ```ts
+     * const seed = design({ name: 'Front', width: 1480, height: 2328 })
+     *   .text('YOUR NAME', { anchor: 'top', name: 'headline' })
+     *   .artboard('Back', { width: 1480, height: 2328 })
+     *   .text('EST. 2026', { anchor: 'center', name: 'backline' });
+     * ```
+     *
+     * @throws EditorError `E_DUPLICATE_ARTBOARD` — the design already has an
+     *   artboard with this label.
+     */
+    artboard(label: string, dims: {
+        width: number;
+        height: number;
+        backgroundColor?: string | ColorToken;
+        role?: ArtboardRole;
+    }): this;
     /** Full-bleed background image (fills the whole artboard). Cover-fit (no
      *  distortion) when `aspectRatio` is supplied. Inserted at the bottom of the
      *  stack regardless of call order. The default layer name `'Background'`

package/dist/design/product-config.d.ts

@@ -23,6 +23,16 @@ export interface ProductRenderConfig {
     };
     /** Every editable (non-color) placement label — placement pickers. */
     placementLabels: string[];
+    /** Geometry of EVERY renderable image placement, in catalog order — seed a
+     *  multi-placement design mechanically (ADR-0088):
+     *  `config.placements.reduce((d, p) => d.artboard(p.label, p), …)`. The
+     *  entry matching `placement` is the same object shape. */
+    placements: Array<{
+        label: string;
+        width: number;
+        height: number;
+        aspectRatio: number;
+    }>;
     /** First mockup scene that photographs the rendered variant — the default
      *  `<Editor.Preview mockupId>`. */
     primaryMockupId: string;

package/dist/{design-builder-2VUjfmdt.js → design-builder-cZY958Rw.js}

@@ -1,5 +1,5 @@
-import { g as l } from "./editorErrors-B2mb1sVN.js";
-const k = 1;
+import { g as l } from "./editorErrors-BhrZ_nwj.js";
+const x = 1;
 function d(e) {
   return typeof e == "number" && Number.isFinite(e) ? Math.round(e * 100) / 100 : e;
 }
@@ -18,10 +18,10 @@ function O(e) {
   const t = (n = e.artboards) != null && n.length ? e.artboards : [{ name: "Front", width: 800, height: 800 }], r = t.map(() => []);
   for (const i of e.elements || []) {
     const o = i == null ? void 0 : i.artboard, s = typeof o == "string" ? t.findIndex((a) => (a.name || "Front") === o) : -1;
-    r[s >= 0 ? s : 0].push(C(i));
+    r[s >= 0 ? s : 0].push(A(i));
   }
   return {
-    schemaVersion: k,
+    schemaVersion: x,
     artboards: t.map((i, o) => ({
       id: `artboard-${o + 1}`,
       name: i.name || "Front",
@@ -41,7 +41,7 @@ function O(e) {
     }))
   };
 }
-function C(e) {
+function A(e) {
   const t = e.type || e.transformType;
   if (t === "image")
     return N(e);
@@ -67,41 +67,41 @@ function N(e) {
   return !r && (t.cropX !== 0 || t.cropY !== 0 || t.cropWidth !== 1 || t.cropHeight !== 1) && (a.cropX = t.cropX, a.cropY = t.cropY, a.cropWidth = t.cropWidth, a.cropHeight = t.cropHeight, a.needsCropPixelConversion = !0), t.flipHorizontal && (a.flipHorizontal = t.flipHorizontal), t.flipVertical && (a.flipVertical = t.flipVertical), t.borderRadius && (a.borderRadius = t.borderRadius), e.opacity !== void 0 && (a.opacity = e.opacity), e.distressEffect && (a.distressEffect = e.distressEffect), ((c = e.masks) == null ? void 0 : c.length) > 0 && (a.masks = e.masks), e.blendMode && (a.blendMode = e.blendMode), e.knockoutParts && (a.knockoutParts = e.knockoutParts), e.stroke && (a.stroke = e.stroke), b(a);
 }
 const p = "center", y = Symbol.for("snowcone.canvas.layerToken");
-function $(e) {
+function z(e) {
   return typeof e == "object" && e !== null && e[y] === !0 && typeof e.name == "string" && (e.kind === "text" || e.kind === "image");
 }
-function E(e, t) {
+function C(e, t) {
   return Object.freeze({ kind: e, name: t, [y]: !0 });
 }
 const w = Symbol.for("snowcone.canvas.colorToken");
-function T(e) {
+function E(e) {
   return typeof e == "object" && e !== null && e[w] === !0 && typeof e.name == "string" && typeof e.value == "string";
 }
-function A(e, t) {
+function T(e, t) {
   return Object.freeze({ name: e, value: t, [w]: !0 });
 }
 function S(e) {
   let t = e.trim().toUpperCase();
   return /^#[0-9A-F]{3}$/.test(t) && (t = "#" + t[1] + t[1] + t[2] + t[2] + t[3] + t[3]), /^#[0-9A-F]{6}$/.test(t) ? t : null;
 }
-function f(e) {
-  return T(e) ? e.value : e;
+function m(e) {
+  return E(e) ? e.value : e;
 }
-function u(e) {
+function g(e) {
   const t = e.transformType;
   return t === "image" ? "image" : t === "shape" || t === "group" || t === "path" ? null : "text";
 }
-function _(e) {
+function v(e) {
   return e === "top-left" || e === "left" || e === "bottom-left" ? "left" : e === "top-right" || e === "right" || e === "bottom-right" ? "right" : "center";
 }
-function v(e) {
+function _(e) {
   return e === "top-left" || e === "top" || e === "top-right" ? "top" : e === "bottom-left" || e === "bottom" || e === "bottom-right" ? "bottom" : "middle";
 }
-function m(e, t, r, n, i, o) {
-  const s = _(e), a = v(e), h = s === "left" ? t / 2 + o : s === "right" ? n - t / 2 - o : n / 2, c = a === "top" ? r / 2 + o : a === "bottom" ? i - r / 2 - o : i / 2;
+function u(e, t, r, n, i, o) {
+  const s = v(e), a = _(e), h = s === "left" ? t / 2 + o : s === "right" ? n - t / 2 - o : n / 2, c = a === "top" ? r / 2 + o : a === "bottom" ? i - r / 2 - o : i / 2;
   return { x: h, y: c };
 }
-function H(e, t, r) {
+function $(e, t, r) {
   const n = t / r;
   if (e >= n) {
     const s = r * e, a = t / s;
@@ -124,7 +124,7 @@ function H(e, t, r) {
     cropHeight: o
   };
 }
-class g {
+class f {
   constructor(t) {
     if (this.els = [], this.colorRoles = /* @__PURE__ */ new Map(), this.idCounter = 0, !(t.width > 0) || !(t.height > 0))
       throw new Error("design(): artboard width and height must be positive numbers");
@@ -145,13 +145,13 @@ class g {
         );
       this.colorRoles.set(r, i);
     }
-    this.artboard = {
+    this.current = {
       name: t.name || "Front",
       width: t.width,
       height: t.height,
-      backgroundColor: f(t.backgroundColor),
+      backgroundColor: m(t.backgroundColor),
       role: t.role
-    };
+    }, this.activeName = this.current.name;
   }
   /**
    * Seed a builder from a previously saved canvas state — the editor shape
@@ -172,7 +172,7 @@ class g {
     const n = t.artboards.find((o) => o.name === t.activeArtboard) ?? t.artboards[0];
     if (!n)
       throw new Error("DesignBuilder.fromState(): state has no artboards");
-    const i = new g({
+    const i = new f({
       name: n.name,
       width: n.width,
       height: n.height,
@@ -192,11 +192,66 @@ class g {
   nextId(t) {
     return `${t}-${++this.idCounter}`;
   }
+  /** A wire-shape snapshot of an authoring artboard, applying the same
+   *  background-export rule everywhere (a design background is part of the
+   *  design — exports and server renders paint it). */
+  static snapshotArtboard(t) {
+    return {
+      name: t.name,
+      width: t.width,
+      height: t.height,
+      ...t.backgroundColor ? {
+        backgroundColor: t.backgroundColor,
+        exportBackground: t.backgroundColor !== "transparent"
+      } : {},
+      ...t.role ? { role: t.role } : {}
+    };
+  }
+  /**
+   * Open a NEW artboard (placement) and make it the authoring context: layer
+   * calls after this target the new artboard — anchor math uses its
+   * dimensions, and the elements carry its membership tag (the public
+   * `artboard` field, PR #482). The FIRST artboard (from `design({ name })`)
+   * remains the initially-active placement when the design mounts; switch at
+   * runtime with `usePlacements()` / `<Editor.Placements/>` (ADR-0088).
+   *
+   * `label` must be the product's placement label (case-sensitive) — the same
+   * artboard-name-is-placement-label rule as `design({ name })`.
+   *
+   * ```ts
+   * const seed = design({ name: 'Front', width: 1480, height: 2328 })
+   *   .text('YOUR NAME', { anchor: 'top', name: 'headline' })
+   *   .artboard('Back', { width: 1480, height: 2328 })
+   *   .text('EST. 2026', { anchor: 'center', name: 'backline' });
+   * ```
+   *
+   * @throws EditorError `E_DUPLICATE_ARTBOARD` — the design already has an
+   *   artboard with this label.
+   */
+  artboard(t, r) {
+    if (!(r.width > 0) || !(r.height > 0))
+      throw new Error("design().artboard(): width and height must be positive numbers");
+    if (this.allArtboards || (this.allArtboards = [f.snapshotArtboard(this.current)]), this.allArtboards.some((n) => n.name === t))
+      throw new l(
+        "E_DUPLICATE_ARTBOARD",
+        `the design already has an artboard "${t}" — artboard names are placement labels and must be unique. Existing: ${JSON.stringify(this.allArtboards.map((n) => n.name))}.`,
+        { artboardName: t, validNames: this.allArtboards.map((n) => n.name), docSlug: "embed-mode" }
+      );
+    for (const n of this.els)
+      n.artboard || (n.artboard = this.current.name);
+    return this.current = {
+      name: t,
+      width: r.width,
+      height: r.height,
+      backgroundColor: m(r.backgroundColor),
+      role: r.role
+    }, this.allArtboards.push(f.snapshotArtboard(this.current)), this;
+  }
   background(t, r = {}) {
-    const { width: n, height: i } = this.artboard;
+    const { width: n, height: i } = this.current;
     let o;
     if (r.aspectRatio && r.aspectRatio > 0) {
-      const a = H(r.aspectRatio, n, i);
+      const a = $(r.aspectRatio, n, i);
       o = {
         type: "image",
         width: a.width,
@@ -237,7 +292,7 @@ class g {
     return this.els.unshift(s), this;
   }
   image(t, r = {}) {
-    const { width: n, height: i } = this.artboard, o = r.width ?? Math.round(n / 3), s = r.height ?? (r.aspectRatio ? Math.round(o / r.aspectRatio) : o), { x: a, y: h } = m(r.anchor ?? p, o, s, n, i, r.padding ?? 0), c = {
+    const { width: n, height: i } = this.current, o = r.width ?? Math.round(n / 3), s = r.height ?? (r.aspectRatio ? Math.round(o / r.aspectRatio) : o), { x: a, y: h } = u(r.anchor ?? p, o, s, n, i, r.padding ?? 0), c = {
       id: this.nextId("img"),
       transformType: "image",
       x: a,
@@ -263,7 +318,7 @@ class g {
     return this.els.push(c), this;
   }
   text(t, r = {}) {
-    const { width: n, height: i } = this.artboard, o = r.fontSize ?? Math.round(this.artboard.height / 12), { x: s, y: a } = m(r.anchor ?? "top", 0, o, n, i, r.padding ?? Math.round(i / 20)), h = {
+    const { width: n, height: i } = this.current, o = r.fontSize ?? Math.round(this.current.height / 12), { x: s, y: a } = u(r.anchor ?? "top", 0, o, n, i, r.padding ?? Math.round(i / 20)), h = {
       id: this.nextId("text"),
       transformType: "custom",
       x: s,
@@ -272,7 +327,7 @@ class g {
       text: t,
       fontSize: o,
       fontFamily: r.fontFamily ?? "Anton",
-      color: f(r.color) ?? "#ffffff",
+      color: m(r.color) ?? "#ffffff",
       textAlign: r.textAlign ?? "center",
       bold: r.bold ?? !1,
       italic: r.italic ?? !1,
@@ -304,14 +359,14 @@ class g {
         { layerName: t, validNames: [...i, ...o], textNames: i, imageNames: o, docSlug: "embed-mode" }
       );
     }
-    const n = u(r);
+    const n = g(r);
     if (!n)
       throw new l(
         "E_LAYER_WRONG_KIND",
         `layer "${t}" is a ${r.transformType} element — only text and image layers are bindable. Bindable layers: ${JSON.stringify([...this.layerNamesOfKind("text"), ...this.layerNamesOfKind("image")])}.`,
         { layerName: t, actualType: r.transformType, docSlug: "embed-mode" }
       );
-    return E(n, t);
+    return C(n, t);
   }
   /**
    * Mint a {@link ColorToken} for a declared color role. Compile time: `name`
@@ -334,24 +389,24 @@ class g {
         `no color role "${t}" in this design. Declared roles: ${JSON.stringify([...this.colorRoles.keys()])}. Declare roles up front — design({ …, colors: { ${t}: '#FF2D8A' } }).`,
         { roleName: t, validNames: [...this.colorRoles.keys()], docSlug: "embed-mode" }
       );
-    return A(t, r);
+    return T(t, r);
   }
   /** Names of bindable layers of one kind, in stack order. @internal */
   layerNamesOfKind(t) {
-    return this.els.filter((r) => u(r) === t).map((r) => r.name).filter((r) => !!r);
+    return this.els.filter((r) => g(r) === t).map((r) => r.name).filter((r) => !!r);
   }
   /** An anchored vector shape. */
   shape(t, r = {}) {
-    const { width: n, height: i } = this.artboard, o = r.size ?? Math.round(n / 6), s = typeof o == "number" ? o : o.width, a = typeof o == "number" ? o : o.height, { x: h, y: c } = m(r.anchor ?? p, s, a, n, i, r.padding ?? 0), R = {
+    const { width: n, height: i } = this.current, o = r.size ?? Math.round(n / 6), s = typeof o == "number" ? o : o.width, a = typeof o == "number" ? o : o.height, { x: h, y: c } = u(r.anchor ?? p, s, a, n, i, r.padding ?? 0), R = {
       type: "shape",
       shapeType: t,
       width: s,
       height: a,
-      fillColor: f(r.fill) ?? "#000000",
+      fillColor: m(r.fill) ?? "#000000",
       fillOpacity: r.opacity ?? 1,
       ...r.points !== void 0 ? { points: r.points } : {},
       ...r.sides !== void 0 ? { sides: r.sides } : {}
-    }, x = {
+    }, k = {
       id: this.nextId("shape"),
       transformType: "shape",
       x: h,
@@ -360,7 +415,7 @@ class g {
       transformData: R,
       ...r.name ? { name: r.name } : {}
     };
-    return this.els.push(x), this;
+    return this.els.push(k), this;
   }
   /** The composed elements, in render order (background first). Editor shape. */
   get elements() {
@@ -372,30 +427,23 @@ class g {
    *  page (artboard `role`s and element membership tags included). */
   toJSON() {
     return this.allArtboards ? {
-      // Elements added via builder methods after fromState are untagged —
-      // they belong to the builder's (active) artboard; stamp them so the
-      // multi-artboard state groups them correctly.
+      // Elements added via builder methods since the last context switch are
+      // untagged — they belong to the CURRENT authoring artboard; stamp them
+      // so the multi-artboard state groups them correctly.
       elements: this.els.map(
-        (t) => t.artboard ? { ...t } : { ...t, artboard: this.artboard.name }
+        (t) => t.artboard ? { ...t } : { ...t, artboard: this.current.name }
       ),
       artboards: this.allArtboards.map((t) => ({ ...t })),
-      activeArtboard: this.artboard.name
+      // The initially-active placement (first artboard / saved state's
+      // active) — NOT the last `.artboard()` authoring context.
+      activeArtboard: this.activeName
     } : {
       elements: this.elements,
-      artboards: [{
-        name: this.artboard.name,
-        width: this.artboard.width,
-        height: this.artboard.height,
-        // A background set on a design is part of the design: flag it
-        // renderable so exports and server renders paint it, matching the
-        // editor (the export worker skips it without `exportBackground`).
-        ...this.artboard.backgroundColor ? {
-          backgroundColor: this.artboard.backgroundColor,
-          exportBackground: this.artboard.backgroundColor !== "transparent"
-        } : {},
-        ...this.artboard.role ? { role: this.artboard.role } : {}
-      }],
-      activeArtboard: this.artboard.name
+      // A background set on a design is part of the design: flag it renderable
+      // so exports and server renders paint it, matching the editor (the
+      // export worker skips it without `exportBackground`) — see snapshotArtboard.
+      artboards: [f.snapshotArtboard(this.current)],
+      activeArtboard: this.current.name
     };
   }
   /** Server-render payload for `RenderSession.renderState(placement, …)`.
@@ -405,18 +453,18 @@ class g {
   }
 }
 function L(e) {
-  return new g(e);
+  return new f(e);
 }
 function F(e) {
-  return u(e);
+  return g(e);
 }
 export {
-  k as C,
-  g as D,
-  T as a,
+  x as C,
+  f as D,
+  E as a,
   L as d,
-  $ as i,
+  z as i,
   F as l,
   O as s
 };
-//# sourceMappingURL=design-builder-2VUjfmdt.js.map
+//# sourceMappingURL=design-builder-cZY958Rw.js.map