Types

Copytype Layer = {
  id: string
  name: string
  type: string
  value: string
  cssVars?: CSSVars
  meta?: Record<string, unknown>
  isLocked?: boolean
}

Copyimport { type Layer } from "@shadcn/designer"
 
const textLayer: Layer = {
  id: "layer-1",
  name: "My Text",
  type: "text",
  value: "Hello World",
  cssVars: {
    "--font-size": "24px",
    "--color": "#000000"
  }
}

Copyconst imageLayer: Layer = {
  id: "layer-2",
  name: "Hero Image",
  type: "image",
  value: "/images/hero.jpg",
  meta: {
    alt: "Hero section background",
    uploadedAt: new Date().toISOString(),
    fileSize: 1024000
  },
  isLocked: true
}

Copyfunction LayerComponent({ layer }: { layer: Layer }) {
  const displayName = layer.isLocked ? `🔒 ${layer.name}` : layer.name
  
  return (
    <div className="layer-item">
      <h3>{displayName}</h3>
      <span className="layer-type">{layer.type}</span>
      {layer.meta?.description && (
        <p>{layer.meta.description as string}</p>
      )}
    </div>
  )
}

Copytype LayerWithStyles = Layer & {
  style: CSSProperties
  contentStyle: CSSProperties
}

Copyimport { type LayerWithStyles } from "@shadcn/designer"
 
function RenderLayer({ layer }: { layer: LayerWithStyles }) {
  return (
    <div style={layer.style} className="layer">
      <div style={layer.contentStyle} className="layer-content">
        {layer.value}
      </div>
    </div>
  )
}

Copytype LayerType = {
  type: string
  name: string
  defaultValues: Omit<Layer, "id" | "type">
  render: (layer: LayerWithStyles) => React.ReactNode
  icon?: ReactNode
  keybinding?: Keybinding
}

Copyimport { type LayerType } from "@shadcn/designer"
import { TextIcon } from "lucide-react"
 
const textLayerType: LayerType = {
  type: "text",
  name: "Text",
  icon: TextIcon, // Can be a React component
  defaultValues: {
    name: "Text",
    value: "Enter text...",
    cssVars: {
      "--font-size": "16px",
      "--color": "#000000"
    }
  },
  render: (layer) => (
    <div style={layer.style}>
      <span style={layer.contentStyle}>{layer.value}</span>
    </div>
  ),
  keybinding: {
    key: "t",
    label: "T",
    labelMac: "T",
    description: "Add text layer",
    group: "layer"
  }
}
 
// You can also use strings (including emojis)
const blobLayerType: LayerType = {
  type: "blob",
  name: "Blob",
  icon: "🍡", // Can be a string or emoji
  defaultValues: {
    name: "Blob",
    value: "",
  },
  render: (layer) => <div>Blob content</div>
}
 
// Or JSX elements
const customLayerType: LayerType = {
  type: "custom",
  name: "Custom",
  icon: <span className="text-blue-500">★</span>, // Can be JSX
  defaultValues: {
    name: "Custom",
    value: "",
  },
  render: (layer) => <div>Custom content</div>
}

Copytype Keybinding = {
  key: string
  label: string
  labelMac: string
  description: string
  group: string
}

Copyimport { type Keybinding } from "@shadcn/designer"
 
const duplicateKeybinding: Keybinding = {
  key: "cmd+d",
  label: "Ctrl+D",
  labelMac: "⌘D",
  description: "Duplicate selected layers",
  group: "layer"
}

Copytype CSSVars = Record<string, string>

Copyimport { type CSSVars } from "@shadcn/designer"
 
const layerStyles: CSSVars = {
  "--width": "200px",
  "--height": "100px",
  "--background": "#f0f0f0",
  "--border-radius": "8px",
  "--font-size": "16px",
  "--color": "#333333"
}

Copytype FrameSize = {
  width: number
  height: number
  unit?: Unit
}

Copyimport { type FrameSize } from "@shadcn/designer"
 
const frameSize: FrameSize = {
  width: 1920,
  height: 1080,
  unit: "px"
}
 
// Print dimensions (8.5" x 11")
const printFrame: FrameSize = {
  width: 8.5,
  height: 11,
  unit: "in"
}

Copytype Unit = "px" | "mm" | "in" | "cm" | "pt"

Copyimport { type Unit } from "@shadcn/designer"
 
const currentUnit: Unit = "px"
 
// Unit conversion utilities are also available
import { convertUnit, toPixels, fromPixels } from "@shadcn/designer"
 
// Convert 25.4mm to pixels at 96 DPI
const pixels = toPixels(25.4, "mm", 96) // 96px
 
// Convert 100px to inches at 96 DPI
const inches = fromPixels(100, "in", 96) // ~1.04in