Types

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

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

Copytype LayerType = {
  type: LayerTypeName
  name: string
  defaultValues: DistributiveOmit<Layer, "id" | "type">
  render: (layer: LayerWithStyles) => React.ReactNode
  icon?: ReactNode
  keybinding?: Keybinding
  unstable_transformerProps?: (context: {
    layer: Layer
    context: TransformerContext
  }) => Partial<TransformerConfig>
}

Copytype TypedLayerType<
  K extends string = string,
  V = unknown,
  M extends Record<string, unknown> = Record<string, unknown>,
> = {
  type: K
  name: string
  icon?: ReactNode
  defaultValues: {
    name: string
    value: V
    cssVars?: CSSVars
    meta?: M
    isLocked?: boolean
  }
  render: (layer: LayerWithStylesFor<K, V, M>) => React.ReactNode
  keybinding?: Keybinding
  unstable_transformerProps?: (context: { layer: LayerFor<K, V, M>; context: TransformerContext }) => Partial<TransformerConfig>
}

Copy// Empty by default.
interface DesignerLayerTypes {}

Copydeclare module "@shadcn/designer" {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  interface DesignerLayerTypes extends InferLayerTypes<typeof layerTypes> {}
}

Copytype LayerTypeName = keyof DesignerLayerTypes extends never
  ? string
  : Extract<keyof DesignerLayerTypes, string>

Copytype LayerByType<TType extends string> = Extract<
  Layer,
  { type: TType }
> extends never
  ? LayerFor<TType, unknown>
  : Extract<Layer, { type: TType }>

Copyfunction isShapeLayer(layer: Layer): layer is LayerByType<"shape"> {
  return layer.type === "shape"
}

Copytype LayerValue<TType extends string> = LayerByType<TType>["value"]

Copytype LayerMeta<TType extends string> = LayerByType<TType>["meta"]

Copytype InferLayerTypes<
  T extends readonly { type: string; defaultValues: { value: unknown } }[],
> = {
  [E in T[number] as E["type"]]: E["defaultValues"] extends { meta?: infer M }
    ? [M] extends [undefined]
      ? { value: E["defaultValues"]["value"] }
      : { value: E["defaultValues"]["value"]; meta: NonNullable<M> }
    : { value: E["defaultValues"]["value"] }
}

Copyconst layerTypes = [
  createLayerType({ type: "text", name: "Text", defaultValues: { name: "Text", value: "Hello" }, render: () => null }),
  createLayerType({ type: "card", name: "Card", defaultValues: { name: "Card", value: "", meta: { author: "" } }, render: () => null }),
]
 
// InferLayerTypes<typeof layerTypes> = {
//   text: { value: string };
//   card: { value: string; meta: { author: string } }
// }

Copytype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never

Copyimport { createLayerType } from "@shadcn/designer"
 
const textLayer = createLayerType({
  type: "text",
  name: "Text",
  defaultValues: { name: "Text", value: "Hello" },
  render: (layer) => <span>{layer.value}</span>, // layer.value is string.
})

Copy// Empty by default.
interface DesignerKeybindings {}

Copydeclare module "@shadcn/designer" {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  interface DesignerKeybindings extends InferKeybindings<typeof keybindings> {}
}

Copytype KeybindingName = keyof DesignerKeybindings extends never
  ? BuiltinKeybindingName | AddLayerKeybindingName
  : BuiltinKeybindingName | AddLayerKeybindingName | Extract<keyof DesignerKeybindings, string>

Copytype InferKeybindings<T extends Record<string, unknown>> = {
  [K in keyof T]: true
}

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

Copytype LayersActionName =
  | "DUPLICATE_LAYER"
  | "DELETE_LAYER"
  | "SHOW_HIDE_LAYER"
  | "BRING_TO_FRONT"
  | "SEND_TO_BACK"
  | "LOCK_UNLOCK_LAYER"
  | "GROUP_LAYERS"
  | "UNGROUP_LAYERS"

Copytype DesignerActionName =
  | "ZOOM_IN"
  | "ZOOM_OUT"
  | "ZOOM_RESET"
  | "ZOOM_100"
  | "ZOOM_FIT"
  | "REDRAW"
  | "UNSELECT_ALL"
  | "HISTORY_UNDO"
  | "HISTORY_REDO"

Copytype CSSVars = Record<string, string>

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

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