@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef, MouseEvent } from \"react\";\n\nimport { Spinner } from \"@/components/spinner\";\nimport { disabledStyles, focusRing, iconSlot } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n  cn(\n    \"inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap select-none\",\n    \"transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n    focusRing,\n    disabledStyles,\n    iconSlot,\n  ),\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-accent active:bg-border\",\n        outline:\n          \"border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary\",\n        ghost:\n          \"text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        sm: \"h-8 gap-1.5 rounded-md px-3 text-sm\",\n        md: \"h-9 gap-2 rounded-md px-4 text-sm\",\n        lg: \"h-10 gap-2 rounded-lg px-5 text-base\",\n        icon: \"size-9 rounded-md\",\n        \"icon-sm\": \"size-8 rounded-md\",\n      },\n    },\n    compoundVariants: [\n      // A link has no box, so box padding and height would only misalign it.\n      { variant: \"link\", size: \"sm\", className: \"h-auto px-0\" },\n      { variant: \"link\", size: \"md\", className: \"h-auto px-0\" },\n      { variant: \"link\", size: \"lg\", className: \"h-auto px-0\" },\n    ],\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ComponentPropsWithRef<\"button\">, VariantProps<typeof buttonVariants> {\n  /**\n   * Renders the child element as the button instead of a `<button>`, keeping\n   * every style and behaviour. Use it for links that should look like buttons.\n   */\n  asChild?: boolean;\n  /**\n   * Shows a spinner and suppresses activation.\n   *\n   * Unlike `disabled`, a loading button stays focusable: taking focus away from\n   * the control a user just activated strands their keyboard position, and the\n   * state is transient by definition. Activation is blocked via `aria-disabled`\n   * plus a guarded click handler.\n   */\n  loading?: boolean;\n}\n\n/** Triggers an action or event. */\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  loading = false,\n  disabled,\n  onClick,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    if (loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    onClick?.(event);\n  }\n\n  return (\n    <Comp\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled}\n      aria-disabled={loading || undefined}\n      aria-busy={loading || undefined}\n      data-loading={loading || undefined}\n      onClick={handleClick}\n      {...props}\n    >\n      {loading ? <Spinner size={size === \"lg\" ? \"lg\" : \"sm\"} /> : null}\n      {/* Slottable marks which child Slot should merge into when asChild is set.\n          Without it, adding the spinner would give Slot two children and break\n          every `asChild` button the moment it started loading. */}\n      <Slot.Slottable>{children}</Slot.Slottable>\n    </Comp>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;AAUA,MAAM,iBAAiB,IACrB,GACE,8FACA,4HACA,WACA,gBACA,QACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WAAW;GACX,SACE;GACF,OACE;GACF,aACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;EACb;CACF;CACA,kBAAkB;EAEhB;GAAE,SAAS;GAAQ,MAAM;GAAM,WAAW;EAAc;EACxD;GAAE,SAAS;GAAQ,MAAM;GAAM,WAAW;EAAc;EACxD;GAAE,SAAS;GAAQ,MAAM;GAAM,WAAW;EAAc;CAC1D;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;AAqBA,SAAgB,OAAO,EACrB,WACA,SACA,MACA,UAAU,OACV,UAAU,OACV,UACA,SACA,UACA,GAAG,SACW;CACd,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,SAAS,YAAY,OAAsC;EACzD,IAAI,SAAS;GACX,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB;EACF;EACA,UAAU,KAAK;CACjB;CAEA,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAChD;EACV,iBAAe,WAAW,KAAA;EAC1B,aAAW,WAAW,KAAA;EACtB,gBAAc,WAAW,KAAA;EACzB,SAAS;EACT,GAAI;EAPN,UAAA,CASG,UAAU,oBAAC,SAAD,EAAS,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,IAAI,MAI5D,oBAAC,KAAK,WAAN,EAAiB,SAAyB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI SmoothButton (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef, MouseEvent } from \"react\";\n\nimport { Spinner } from \"@/components/spinner\";\nimport { disabledStyles, focusRing, iconSlot } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n  cn(\n    \"inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap select-none\",\n    \"transition-[background-color,border-color,color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n    focusRing,\n    disabledStyles,\n    iconSlot,\n  ),\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-accent active:bg-border\",\n        outline:\n          \"border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary\",\n        ghost:\n          \"text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        /** A tint of the primary colour. Quieter than primary, warmer than ghost. */\n        soft: cn(\n          \"bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-primary\",\n          \"hover:bg-[color-mix(in_oklab,var(--color-primary)_18%,transparent)]\",\n          \"active:bg-[color-mix(in_oklab,var(--color-primary)_24%,transparent)]\",\n        ),\n        /**\n         * SmoothUI's \"candy\": primary running into its hover shade, with a\n         * hairline highlight along the top edge. Every stop is a token, so it\n         * follows the theme and the monochrome preset.\n         */\n        gradient: cn(\n          \"bg-linear-to-b from-primary to-primary-hover text-primary-foreground\",\n          \"shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-primary-foreground)_25%,transparent),0_1px_2px_color-mix(in_oklab,var(--color-foreground)_20%,transparent)]\",\n          \"hover:from-primary-hover hover:to-primary-hover\",\n          \"active:from-primary-active active:to-primary-active\",\n        ),\n      },\n      size: {\n        sm: \"h-8 gap-1.5 rounded-md px-3 text-sm\",\n        md: \"h-9 gap-2 rounded-md px-4 text-sm\",\n        lg: \"h-10 gap-2 rounded-lg px-5 text-base\",\n        icon: \"size-9 rounded-md\",\n        \"icon-sm\": \"size-8 rounded-md\",\n      },\n      /**\n       * Corner treatment, independent of size. Declared after `size` so its\n       * radius wins the merge. `default` keeps each size's own radius.\n       */\n      shape: {\n        default: \"\",\n        pill: \"rounded-full\",\n        square: \"rounded-none\",\n      },\n      /**\n       * Press feedback. `scale` shrinks the button to 97% while it is held —\n       * a transform, so nothing around it moves, and it only exists when the\n       * reader has not asked for reduced motion. `none` opts out.\n       */\n      press: {\n        scale: \"\",\n        none: \"\",\n      },\n    },\n    compoundVariants: [\n      // A link has no box, so box padding and height would only misalign it.\n      { variant: \"link\", size: \"sm\", className: \"h-auto px-0\" },\n      { variant: \"link\", size: \"md\", className: \"h-auto px-0\" },\n      { variant: \"link\", size: \"lg\", className: \"h-auto px-0\" },\n      // Text does not press; a link that shrinks under the finger reads as a\n      // rendering glitch rather than feedback.\n      {\n        press: \"scale\",\n        variant: [\n          \"primary\",\n          \"secondary\",\n          \"outline\",\n          \"ghost\",\n          \"destructive\",\n          \"soft\",\n          \"gradient\",\n        ],\n        className: \"motion-safe:active:scale-[0.97]\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n      shape: \"default\",\n      press: \"scale\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ComponentPropsWithRef<\"button\">, VariantProps<typeof buttonVariants> {\n  /**\n   * Renders the child element as the button instead of a `<button>`, keeping\n   * every style and behaviour. Use it for links that should look like buttons.\n   */\n  asChild?: boolean;\n  /**\n   * Shows a spinner and suppresses activation.\n   *\n   * Unlike `disabled`, a loading button stays focusable: taking focus away from\n   * the control a user just activated strands their keyboard position, and the\n   * state is transient by definition. Activation is blocked via `aria-disabled`\n   * plus a guarded click handler.\n   */\n  loading?: boolean;\n}\n\n/** Triggers an action or event. */\nexport function Button({\n  className,\n  variant,\n  size,\n  shape,\n  press,\n  asChild = false,\n  loading = false,\n  disabled,\n  onClick,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    if (loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    onClick?.(event);\n  }\n\n  return (\n    <Comp\n      className={cn(buttonVariants({ variant, size, shape, press }), className)}\n      disabled={disabled}\n      aria-disabled={loading || undefined}\n      aria-busy={loading || undefined}\n      data-loading={loading || undefined}\n      onClick={handleClick}\n      {...props}\n    >\n      {loading ? <Spinner size={size === \"lg\" ? \"lg\" : \"sm\"} /> : null}\n      {/* Slottable marks which child Slot should merge into when asChild is set.\n          Without it, adding the spinner would give Slot two children and break\n          every `asChild` button the moment it started loading. */}\n      <Slot.Slottable>{children}</Slot.Slottable>\n    </Comp>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB,IACrB,GACE,8FACA,kIACA,WACA,gBACA,QACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WAAW;GACX,SACE;GACF,OACE;GACF,aACE;GACF,MAAM;;GAEN,MAAM,GACJ,8EACA,uEACA,sEACF;;;;;;GAMA,UAAU,GACR,wEACA,oKACA,mDACA,qDACF;EACF;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;EACb;;;;;EAKA,OAAO;GACL,SAAS;GACT,MAAM;GACN,QAAQ;EACV;;;;;;EAMA,OAAO;GACL,OAAO;GACP,MAAM;EACR;CACF;CACA,kBAAkB;EAEhB;GAAE,SAAS;GAAQ,MAAM;GAAM,WAAW;EAAc;EACxD;GAAE,SAAS;GAAQ,MAAM;GAAM,WAAW;EAAc;EACxD;GAAE,SAAS;GAAQ,MAAM;GAAM,WAAW;EAAc;EAGxD;GACE,OAAO;GACP,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;EACP,OAAO;CACT;AACF,CACF;;AAqBA,SAAgB,OAAO,EACrB,WACA,SACA,MACA,OACA,OACA,UAAU,OACV,UAAU,OACV,UACA,SACA,UACA,GAAG,SACW;CACd,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,SAAS,YAAY,OAAsC;EACzD,IAAI,SAAS;GACX,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB;EACF;EACA,UAAU,KAAK;CACjB;CAEA,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAM,CAAC,GAAG,SAAS;EAC9D;EACV,iBAAe,WAAW,KAAA;EAC1B,aAAW,WAAW,KAAA;EACtB,gBAAc,WAAW,KAAA;EACzB,SAAS;EACT,GAAI;EAPN,UAAA,CASG,UAAU,oBAAC,SAAD,EAAS,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,IAAI,MAI5D,oBAAC,KAAK,WAAN,EAAiB,SAAyB,CAAA,CACtC;;AAEV"}

package/dist/components/canvas-toolbar/canvas-toolbar.d.ts

@@ -0,0 +1,62 @@
+import { Toolbar } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/canvas-toolbar/canvas-toolbar.d.ts
+interface CanvasTool {
+  type?: "tool";
+  value: string;
+  /** Accessible name, and the tooltip text. */
+  label: string;
+  /** Decorative glyph; hidden from assistive technology. */
+  icon: ReactNode;
+  /** A single key that picks the tool, e.g. "v". Case-insensitive. */
+  shortcut?: string;
+  disabled?: boolean;
+}
+interface CanvasToolSeparator {
+  type: "separator";
+}
+interface CanvasToolSlot {
+  type: "slot";
+  /** Names the group of tools, e.g. "Shapes". */
+  label: string;
+  tools: CanvasTool[];
+  /** The tool the slot shows before one is picked. Defaults to the first. */
+  defaultTool?: string;
+  /** Name of the flyout button. Defaults to `More ${label}` in lower case. */
+  moreLabel?: string;
+}
+type CanvasToolbarItem = CanvasTool | CanvasToolSeparator | CanvasToolSlot;
+/** The pane surface shared by the rail and the flyout. */
+declare const canvasToolbarVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Side = "top" | "right" | "bottom" | "left";
+interface CanvasToolbarProps extends Omit<ComponentPropsWithRef<typeof Toolbar.Root>, "children" | "defaultValue">, VariantProps<typeof canvasToolbarVariants> {
+  /** Tools, dividers and swappable slots, in order. */
+  tools: CanvasToolbarItem[];
+  /** The active tool (controlled). */
+  value?: string;
+  /** The initially active tool. Defaults to the first tool. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Radius of the rail and flyout in px; tools use `corner - 4`. */
+  corner?: number;
+  /** Show each tool's name (and shortcut) in a tooltip. */
+  tooltips?: boolean;
+  /**
+   * Listen for shortcuts on the whole document, not only while focus is in the
+   * toolbar. Keys typed into inputs, textareas and contenteditable are ignored.
+   */
+  globalShortcuts?: boolean;
+  /** Which side the flyout and tooltips open on. Defaults to top (or the inline end when vertical). */
+  side?: Side;
+  /** Extra classes for the flyout panel. */
+  flyoutClassName?: string;
+}
+/** A Figma-style tool rail with a swappable shape slot and single-key shortcuts. */
+declare function CanvasToolbar({ className, style, tools, value: valueProp, defaultValue, onValueChange, corner, tooltips, globalShortcuts, side: sideProp, flyoutClassName, tone, stroke, orientation, dir, onKeyDown, ...props }: CanvasToolbarProps): import("react").JSX.Element;
+//#endregion
+export { CanvasTool, CanvasToolSeparator, CanvasToolSlot, CanvasToolbar, CanvasToolbarItem, CanvasToolbarProps, canvasToolbarVariants };
+//# sourceMappingURL=canvas-toolbar.d.ts.map

package/dist/components/canvas-toolbar/canvas-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-toolbar.d.ts","names":[],"sources":["../../../src/components/canvas-toolbar/canvas-toolbar.tsx"],"mappings":";;;;UA6CiB;EACf;EACA;;EAEA;;EAEA,MAAM;;EAEN;EACA;;UAGe;EACf;;UAGe;EACf;;EAEA;EACA,OAAO;;EAEP;;EAEA;;KAGU,oBAAoB,aAAa,sBAAsB;;cAe7D,wBAAqB;;;6CAczB;KAkBG;UAEY,2BAEb,KAAK,6BAA6B,QAAiB,qCACnD,oBAAoB;;EAEtB,OAAO;;EAEP;;EAEA;EACA,iBAAiB;;EAEjB;;EAEA;;;;;EAKA;;EAEA,OAAO;;EAEP;;;iBAgCc,gBACd,WACA,OACA,OACA,OAAO,WACP,cACA,eACA,QACA,UACA,iBACA,MAAM,UACN,iBACA,MACA,QACA,aACA,KACA,cACG,SACF,qCAAkB,IAAA"}

package/dist/components/canvas-toolbar/canvas-toolbar.js

@@ -0,0 +1,256 @@
+"use client";
+import { focusRing, focusRingInset, mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Tooltip as Tooltip$1, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { DropdownMenu as DropdownMenu$1, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { DropdownMenu, Toolbar } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, useEffect, useRef, useState } from "react";
+//#region src/components/canvas-toolbar/canvas-toolbar.tsx
+const PREFIX = "dowel-canvas-toolbar";
+const STYLES = `
+[data-slot=canvas-toolbar-tool]::before,[data-slot=canvas-toolbar-option]::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;scale:.72;pointer-events:none;transition:opacity calc(140ms * var(--motion-scale)) linear,scale calc(300ms * var(--motion-scale)) cubic-bezier(.3,1.42,.4,1)}
+[data-slot=canvas-toolbar-tool][data-state=on]::before,[data-slot=canvas-toolbar-option][data-state=checked]::before{opacity:.07;scale:1}
+@keyframes ${PREFIX}-flyout{0%{opacity:0;transform:translate(var(--${PREFIX}-fx,0),var(--${PREFIX}-fy,9px)) scale(.965)}55%{opacity:1}100%{opacity:1;transform:none}}
+[data-slot=canvas-toolbar-flyout][data-state=open]{animation:${PREFIX}-flyout calc(300ms * var(--motion-scale)) cubic-bezier(.22,1.14,.36,1)}
+[data-slot=canvas-toolbar-flyout][data-side=bottom]{--${PREFIX}-fy:-9px}
+[data-slot=canvas-toolbar-flyout][data-side=left]{--${PREFIX}-fx:9px;--${PREFIX}-fy:0}
+[data-slot=canvas-toolbar-flyout][data-side=right]{--${PREFIX}-fx:-9px;--${PREFIX}-fy:0}
+`;
+/** The pane surface shared by the rail and the flyout. */
+const canvasToolbarVariants = cva("", {
+	variants: {
+		/** `default` is the card surface; `inverted` swaps it for the ink colour. */
+		tone: {
+			default: "bg-card text-foreground",
+			inverted: "bg-foreground text-background"
+		},
+		/** A 1px inset hairline around the surface. */
+		stroke: {
+			true: "ring-1 ring-border ring-inset",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		tone: "default",
+		stroke: false
+	}
+});
+/** A tool: a 38px square whose fill and icon follow data-state. */
+const toolClass = cn("group/tool relative grid size-9.5 shrink-0 place-items-center rounded-[var(--canvas-toolbar-tool-r)]", "transition-[background-color] duration-[var(--duration-instant)]", "hover:bg-current/5 data-[highlighted]:bg-current/5 data-[state=checked]:bg-transparent data-[state=on]:bg-transparent", "disabled:pointer-events-none disabled:opacity-40");
+const iconClass = cn("grid place-items-center opacity-45 transition-[opacity,scale] duration-[var(--duration-instant)] ease-[var(--ease-out-quint)]", "group-hover/tool:opacity-80 group-active/tool:scale-92 group-data-[highlighted]/tool:opacity-80", "group-data-[state=checked]/tool:scale-105 group-data-[state=checked]/tool:opacity-100", "group-data-[state=on]/tool:scale-105 group-data-[state=on]/tool:opacity-100", "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.25");
+function isSlot(item) {
+	return item.type === "slot";
+}
+function firstTool(tools) {
+	for (const item of tools) {
+		if (item.type === "separator") continue;
+		return isSlot(item) ? item.defaultTool ?? item.tools[0]?.value : item.value;
+	}
+}
+const EDITABLE = "input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role^=\"menu\"]";
+/** Warns, in development only, when the toolbar has no accessible name. */
+function useNameWarning(label, labelledBy) {
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || label || labelledBy) return;
+		console.warn("[CanvasToolbar] Pass aria-label or aria-labelledby to name the toolbar.");
+	}, [label, labelledBy]);
+}
+/** A Figma-style tool rail with a swappable shape slot and single-key shortcuts. */
+function CanvasToolbar({ className, style, tools, value: valueProp, defaultValue, onValueChange, corner = 14, tooltips = true, globalShortcuts = false, side: sideProp, flyoutClassName, tone, stroke, orientation = "horizontal", dir, onKeyDown, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(() => defaultValue ?? firstTool(tools));
+	const value = valueProp ?? uncontrolled;
+	const [picks, setPicks] = useState({});
+	const [openSlot, setOpenSlot] = useState(null);
+	const slotTools = useRef(/* @__PURE__ */ new Map());
+	const picked = useRef(false);
+	useNameWarning(props["aria-label"], props["aria-labelledby"]);
+	const side = sideProp ?? (orientation === "vertical" ? dir === "rtl" ? "left" : "right" : "top");
+	const surface = canvasToolbarVariants({
+		tone,
+		stroke
+	});
+	const select = (next, slot) => {
+		if (slot !== void 0) setPicks((current) => ({
+			...current,
+			[slot]: next
+		}));
+		if (next === value) return;
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	};
+	const shortcuts = /* @__PURE__ */ new Map();
+	tools.forEach((item, index) => {
+		const add = (tool, slot) => {
+			if (tool.shortcut) shortcuts.set(tool.shortcut.toLowerCase(), {
+				tool,
+				slot
+			});
+		};
+		if (isSlot(item)) item.tools.forEach((tool) => add(tool, index));
+		else if (item.type !== "separator") add(item);
+	});
+	const handleShortcut = (event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.target instanceof Element && event.target.closest(EDITABLE)) return;
+		const hit = shortcuts.get(event.key.toLowerCase());
+		if (!hit || hit.tool.disabled) return;
+		event.preventDefault();
+		select(hit.tool.value, hit.slot);
+	};
+	const shortcutRef = useRef(handleShortcut);
+	useEffect(() => {
+		shortcutRef.current = handleShortcut;
+	});
+	useEffect(() => {
+		if (!globalShortcuts) return;
+		const listener = (event) => shortcutRef.current(event);
+		document.addEventListener("keydown", listener);
+		return () => document.removeEventListener("keydown", listener);
+	}, [globalShortcuts]);
+	const renderTool = (tool, slot) => {
+		const pressed = tool.value === value;
+		const button = /* @__PURE__ */ jsx(Toolbar.Button, {
+			ref: slot === void 0 ? void 0 : (node) => {
+				slotTools.current.set(slot, node);
+			},
+			"data-slot": "canvas-toolbar-tool",
+			"data-state": pressed ? "on" : "off",
+			"aria-label": tool.label,
+			"aria-pressed": pressed,
+			"aria-keyshortcuts": tool.shortcut,
+			disabled: tool.disabled,
+			className: cn(toolClass, focusRing),
+			onClick: () => select(tool.value, slot),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "canvas-toolbar-icon",
+				"aria-hidden": "true",
+				className: iconClass,
+				children: tool.icon
+			})
+		});
+		if (!tooltips) return button;
+		return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: button
+		}), /* @__PURE__ */ jsxs(TooltipContent, {
+			side,
+			children: [tool.label, tool.shortcut ? /* @__PURE__ */ jsx("kbd", {
+				className: "ms-2 font-sans uppercase opacity-60",
+				children: tool.shortcut
+			}) : null]
+		})] });
+	};
+	const flyoutKeys = (event) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		const panel = event.currentTarget;
+		const items = [...panel.querySelectorAll("[role=\"menuitemradio\"]:not([data-disabled])")];
+		const rtl = panel.getAttribute("dir") === "rtl" || getComputedStyle(panel).direction === "rtl";
+		const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+		const from = items.indexOf(document.activeElement);
+		event.preventDefault();
+		items[(from + step + items.length) % items.length]?.focus();
+	};
+	const renderSlot = (slot, index) => {
+		const shown = slot.tools.find((tool) => tool.value === value) ?? slot.tools.find((tool) => tool.value === (picks[index] ?? slot.defaultTool)) ?? slot.tools[0];
+		if (!shown) return null;
+		const open = openSlot === index;
+		const more = slot.moreLabel ?? `More ${slot.label.toLowerCase()}`;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"aria-label": slot.label,
+			"data-slot": "canvas-toolbar-slot",
+			"data-state": shown.value === value ? "on" : "off",
+			className: "relative shrink-0",
+			children: [renderTool(shown, index), /* @__PURE__ */ jsxs(DropdownMenu$1, {
+				dir,
+				open,
+				onOpenChange: (next) => setOpenSlot(next ? index : null),
+				children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Toolbar.Button, {
+						"data-slot": "canvas-toolbar-notch",
+						"aria-label": more,
+						className: cn("absolute end-0.75 bottom-0.75 grid size-2.25 place-items-center rounded-xs", "opacity-40 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[cubic-bezier(.28,1.3,.36,1)]", "hover:opacity-90 data-[state=open]:scale-130 data-[state=open]:opacity-90", focusRingInset),
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 5 5",
+							"aria-hidden": "true",
+							className: cn("size-1.25 fill-current", mirrorForDirection),
+							children: /* @__PURE__ */ jsx("path", { d: "M5 0v5H0z" })
+						})
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					"data-slot": "canvas-toolbar-flyout",
+					side,
+					align: "center",
+					sideOffset: 14,
+					onKeyDown: flyoutKeys,
+					onCloseAutoFocus: (event) => {
+						if (!picked.current) return;
+						picked.current = false;
+						event.preventDefault();
+						slotTools.current.get(index)?.focus();
+					},
+					className: cn("flex min-w-0 gap-0.5 rounded-[var(--canvas-toolbar-r)] border-0 p-1.5 shadow-md", "data-[state=open]:[&>*]:animate-none", surface, flyoutClassName),
+					style: {
+						"--canvas-toolbar-r": `${String(corner)}px`,
+						"--canvas-toolbar-tool-r": `${String(Math.max(corner - 4, 0))}px`
+					},
+					children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+						value: shown.value,
+						className: cn("flex gap-0.5", side === "left" || side === "right" ? "flex-col" : ""),
+						onValueChange: (next) => {
+							picked.current = true;
+							select(next, index);
+						},
+						children: slot.tools.map((tool) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, {
+							value: tool.value,
+							disabled: tool.disabled,
+							"aria-label": tool.label,
+							"data-slot": "canvas-toolbar-option",
+							className: cn(toolClass, "outline-none", focusRingInset),
+							children: /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: iconClass,
+								children: tool.icon
+							})
+						}, tool.value))
+					})
+				})]
+			})]
+		}, `slot-${String(index)}`);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsx(Toolbar.Root, {
+		"data-slot": "canvas-toolbar",
+		orientation,
+		dir,
+		className: cn("inline-flex items-center gap-0.5 p-1.5 shadow-sm data-[orientation=vertical]:flex-col", surface, className),
+		style: {
+			borderRadius: corner,
+			"--canvas-toolbar-tool-r": `${String(Math.max(corner - 4, 0))}px`,
+			...style
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			handleShortcut(event);
+		},
+		...props,
+		children: tools.map((item, index) => {
+			if (item.type === "separator") return /* @__PURE__ */ jsx(Toolbar.Separator, {
+				"data-slot": "canvas-toolbar-separator",
+				className: cn("shrink-0 bg-current/12", "data-[orientation=vertical]:mx-1.25 data-[orientation=vertical]:h-5 data-[orientation=vertical]:w-px", "data-[orientation=horizontal]:my-1.25 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-5")
+			}, `separator-${String(index)}`);
+			if (isSlot(item)) return renderSlot(item, index);
+			return /* @__PURE__ */ jsx(Fragment$1, { children: renderTool(item) }, item.value);
+		})
+	})] });
+}
+//#endregion
+export { CanvasToolbar, canvasToolbarVariants };
+
+//# sourceMappingURL=canvas-toolbar.js.map

package/dist/components/canvas-toolbar/canvas-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-toolbar.js","names":["ToolbarPrimitive","Tooltip","DropdownMenu","MenuPrimitive","Fragment"],"sources":["../../../src/components/canvas-toolbar/canvas-toolbar.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Canvas toolbar (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { DropdownMenu as MenuPrimitive, Toolbar as ToolbarPrimitive } from \"radix-ui\";\nimport {\n  Fragment,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuTrigger,\n} from \"@/components/dropdown-menu\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/tooltip\";\nimport { focusRing, focusRingInset, mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A Figma-style tool rail: one tool is active across the whole rail, a shape\n * slot swaps its tool from a flyout, and single-key shortcuts pick tools.\n *\n * Semantics. Radix Toolbar gives role=\"toolbar\", roving tabindex, arrow keys\n * (RTL-aware), Home/End and wrap-around. Its ToggleGroup type=\"single\" would\n * render role=\"radiogroup\" with role=\"radio\" items, which cannot also hold\n * the slot's \"More shapes\" menu button and the divider, so every tool is a\n * Toolbar.Button with aria-pressed instead: a set of toggle buttons of which\n * exactly one is pressed. The flyout is Dowel's DropdownMenu (Radix): the\n * notch has aria-haspopup=\"menu\" and aria-expanded, shapes are\n * menuitemradio, Escape closes and returns focus to the notch, and picking a\n * shape returns focus to the slot's tool.\n *\n * Motion is CSS. The active fill pops from scale .72 with a springy curve,\n * the icon rises to 1.05 and presses to .92, and the flyout rises in. All of\n * it is decoration and stops under reduced motion.\n */\n\nexport interface CanvasTool {\n  type?: \"tool\";\n  value: string;\n  /** Accessible name, and the tooltip text. */\n  label: string;\n  /** Decorative glyph; hidden from assistive technology. */\n  icon: ReactNode;\n  /** A single key that picks the tool, e.g. \"v\". Case-insensitive. */\n  shortcut?: string;\n  disabled?: boolean;\n}\n\nexport interface CanvasToolSeparator {\n  type: \"separator\";\n}\n\nexport interface CanvasToolSlot {\n  type: \"slot\";\n  /** Names the group of tools, e.g. \"Shapes\". */\n  label: string;\n  tools: CanvasTool[];\n  /** The tool the slot shows before one is picked. Defaults to the first. */\n  defaultTool?: string;\n  /** Name of the flyout button. Defaults to `More ${label}` in lower case. */\n  moreLabel?: string;\n}\n\nexport type CanvasToolbarItem = CanvasTool | CanvasToolSeparator | CanvasToolSlot;\n\nconst PREFIX = \"dowel-canvas-toolbar\";\n\nconst STYLES = `\n[data-slot=canvas-toolbar-tool]::before,[data-slot=canvas-toolbar-option]::before{content:\"\";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;scale:.72;pointer-events:none;transition:opacity calc(140ms * var(--motion-scale)) linear,scale calc(300ms * var(--motion-scale)) cubic-bezier(.3,1.42,.4,1)}\n[data-slot=canvas-toolbar-tool][data-state=on]::before,[data-slot=canvas-toolbar-option][data-state=checked]::before{opacity:.07;scale:1}\n@keyframes ${PREFIX}-flyout{0%{opacity:0;transform:translate(var(--${PREFIX}-fx,0),var(--${PREFIX}-fy,9px)) scale(.965)}55%{opacity:1}100%{opacity:1;transform:none}}\n[data-slot=canvas-toolbar-flyout][data-state=open]{animation:${PREFIX}-flyout calc(300ms * var(--motion-scale)) cubic-bezier(.22,1.14,.36,1)}\n[data-slot=canvas-toolbar-flyout][data-side=bottom]{--${PREFIX}-fy:-9px}\n[data-slot=canvas-toolbar-flyout][data-side=left]{--${PREFIX}-fx:9px;--${PREFIX}-fy:0}\n[data-slot=canvas-toolbar-flyout][data-side=right]{--${PREFIX}-fx:-9px;--${PREFIX}-fy:0}\n`;\n\n/** The pane surface shared by the rail and the flyout. */\nconst canvasToolbarVariants = cva(\"\", {\n  variants: {\n    /** `default` is the card surface; `inverted` swaps it for the ink colour. */\n    tone: {\n      default: \"bg-card text-foreground\",\n      inverted: \"bg-foreground text-background\",\n    },\n    /** A 1px inset hairline around the surface. */\n    stroke: {\n      true: \"ring-1 ring-border ring-inset\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { tone: \"default\", stroke: false },\n});\n\n/** A tool: a 38px square whose fill and icon follow data-state. */\nconst toolClass = cn(\n  \"group/tool relative grid size-9.5 shrink-0 place-items-center rounded-[var(--canvas-toolbar-tool-r)]\",\n  \"transition-[background-color] duration-[var(--duration-instant)]\",\n  \"hover:bg-current/5 data-[highlighted]:bg-current/5 data-[state=checked]:bg-transparent data-[state=on]:bg-transparent\",\n  \"disabled:pointer-events-none disabled:opacity-40\",\n);\n\nconst iconClass = cn(\n  \"grid place-items-center opacity-45 transition-[opacity,scale] duration-[var(--duration-instant)] ease-[var(--ease-out-quint)]\",\n  \"group-hover/tool:opacity-80 group-active/tool:scale-92 group-data-[highlighted]/tool:opacity-80\",\n  \"group-data-[state=checked]/tool:scale-105 group-data-[state=checked]/tool:opacity-100\",\n  \"group-data-[state=on]/tool:scale-105 group-data-[state=on]/tool:opacity-100\",\n  \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.25\",\n);\n\ntype Side = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport interface CanvasToolbarProps\n  extends\n    Omit<ComponentPropsWithRef<typeof ToolbarPrimitive.Root>, \"children\" | \"defaultValue\">,\n    VariantProps<typeof canvasToolbarVariants> {\n  /** Tools, dividers and swappable slots, in order. */\n  tools: CanvasToolbarItem[];\n  /** The active tool (controlled). */\n  value?: string;\n  /** The initially active tool. Defaults to the first tool. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Radius of the rail and flyout in px; tools use `corner - 4`. */\n  corner?: number;\n  /** Show each tool's name (and shortcut) in a tooltip. */\n  tooltips?: boolean;\n  /**\n   * Listen for shortcuts on the whole document, not only while focus is in the\n   * toolbar. Keys typed into inputs, textareas and contenteditable are ignored.\n   */\n  globalShortcuts?: boolean;\n  /** Which side the flyout and tooltips open on. Defaults to top (or the inline end when vertical). */\n  side?: Side;\n  /** Extra classes for the flyout panel. */\n  flyoutClassName?: string;\n}\n\ninterface Shortcut {\n  tool: CanvasTool;\n  slot?: number;\n}\n\nfunction isSlot(item: CanvasToolbarItem): item is CanvasToolSlot {\n  return item.type === \"slot\";\n}\n\nfunction firstTool(tools: CanvasToolbarItem[]): string | undefined {\n  for (const item of tools) {\n    if (item.type === \"separator\") continue;\n    return isSlot(item) ? (item.defaultTool ?? item.tools[0]?.value) : item.value;\n  }\n  return undefined;\n}\n\nconst EDITABLE =\n  'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role^=\"menu\"]';\n\n/** Warns, in development only, when the toolbar has no accessible name. */\nfunction useNameWarning(label?: string, labelledBy?: string) {\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\" || label || labelledBy) return;\n    console.warn(\"[CanvasToolbar] Pass aria-label or aria-labelledby to name the toolbar.\");\n  }, [label, labelledBy]);\n}\n\n/** A Figma-style tool rail with a swappable shape slot and single-key shortcuts. */\nexport function CanvasToolbar({\n  className,\n  style,\n  tools,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  corner = 14,\n  tooltips = true,\n  globalShortcuts = false,\n  side: sideProp,\n  flyoutClassName,\n  tone,\n  stroke,\n  orientation = \"horizontal\",\n  dir,\n  onKeyDown,\n  ...props\n}: CanvasToolbarProps) {\n  const [uncontrolled, setUncontrolled] = useState(() => defaultValue ?? firstTool(tools));\n  const value = valueProp ?? uncontrolled;\n  const [picks, setPicks] = useState<Record<number, string>>({});\n  const [openSlot, setOpenSlot] = useState<number | null>(null);\n  const slotTools = useRef(new Map<number, HTMLButtonElement | null>());\n  const picked = useRef(false);\n\n  useNameWarning(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n  const side: Side =\n    sideProp ?? (orientation === \"vertical\" ? (dir === \"rtl\" ? \"left\" : \"right\") : \"top\");\n  const surface = canvasToolbarVariants({ tone, stroke });\n\n  const select = (next: string, slot?: number) => {\n    if (slot !== undefined) setPicks((current) => ({ ...current, [slot]: next }));\n    if (next === value) return;\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n  };\n\n  const shortcuts = new Map<string, Shortcut>();\n  tools.forEach((item, index) => {\n    const add = (tool: CanvasTool, slot?: number) => {\n      if (tool.shortcut) shortcuts.set(tool.shortcut.toLowerCase(), { tool, slot });\n    };\n    if (isSlot(item)) item.tools.forEach((tool) => add(tool, index));\n    else if (item.type !== \"separator\") add(item);\n  });\n\n  const handleShortcut = (\n    event: { key: string; target: EventTarget | null } & ModifierKeys,\n  ) => {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    if (event.target instanceof Element && event.target.closest(EDITABLE)) return;\n    const hit = shortcuts.get(event.key.toLowerCase());\n    if (!hit || hit.tool.disabled) return;\n    event.preventDefault();\n    select(hit.tool.value, hit.slot);\n  };\n\n  const shortcutRef = useRef(handleShortcut);\n  useEffect(() => {\n    shortcutRef.current = handleShortcut;\n  });\n  useEffect(() => {\n    if (!globalShortcuts) return;\n    const listener = (event: globalThis.KeyboardEvent) => shortcutRef.current(event);\n    document.addEventListener(\"keydown\", listener);\n    return () => document.removeEventListener(\"keydown\", listener);\n  }, [globalShortcuts]);\n\n  const renderTool = (tool: CanvasTool, slot?: number) => {\n    const pressed = tool.value === value;\n    const button = (\n      <ToolbarPrimitive.Button\n        ref={\n          slot === undefined\n            ? undefined\n            : (node: HTMLButtonElement | null) => {\n                slotTools.current.set(slot, node);\n              }\n        }\n        data-slot=\"canvas-toolbar-tool\"\n        data-state={pressed ? \"on\" : \"off\"}\n        aria-label={tool.label}\n        aria-pressed={pressed}\n        aria-keyshortcuts={tool.shortcut}\n        disabled={tool.disabled}\n        className={cn(toolClass, focusRing)}\n        onClick={() => select(tool.value, slot)}\n      >\n        <span data-slot=\"canvas-toolbar-icon\" aria-hidden=\"true\" className={iconClass}>\n          {tool.icon}\n        </span>\n      </ToolbarPrimitive.Button>\n    );\n    if (!tooltips) return button;\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side={side}>\n          {tool.label}\n          {tool.shortcut ? (\n            <kbd className=\"ms-2 font-sans uppercase opacity-60\">{tool.shortcut}</kbd>\n          ) : null}\n        </TooltipContent>\n      </Tooltip>\n    );\n  };\n\n  const flyoutKeys = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") return;\n    const panel = event.currentTarget;\n    const items = [\n      ...panel.querySelectorAll<HTMLElement>('[role=\"menuitemradio\"]:not([data-disabled])'),\n    ];\n    const rtl =\n      panel.getAttribute(\"dir\") === \"rtl\" || getComputedStyle(panel).direction === \"rtl\";\n    const step = (event.key === \"ArrowRight\") !== rtl ? 1 : -1;\n    const from = items.indexOf(document.activeElement as HTMLElement);\n    event.preventDefault();\n    items[(from + step + items.length) % items.length]?.focus();\n  };\n\n  const renderSlot = (slot: CanvasToolSlot, index: number) => {\n    const shown =\n      slot.tools.find((tool) => tool.value === value) ??\n      slot.tools.find((tool) => tool.value === (picks[index] ?? slot.defaultTool)) ??\n      slot.tools[0];\n    if (!shown) return null;\n    const open = openSlot === index;\n    const more = slot.moreLabel ?? `More ${slot.label.toLowerCase()}`;\n    return (\n      <div\n        key={`slot-${String(index)}`}\n        role=\"group\"\n        aria-label={slot.label}\n        data-slot=\"canvas-toolbar-slot\"\n        data-state={shown.value === value ? \"on\" : \"off\"}\n        className=\"relative shrink-0\"\n      >\n        {renderTool(shown, index)}\n        <DropdownMenu\n          dir={dir}\n          open={open}\n          onOpenChange={(next) => setOpenSlot(next ? index : null)}\n        >\n          <DropdownMenuTrigger asChild>\n            <ToolbarPrimitive.Button\n              data-slot=\"canvas-toolbar-notch\"\n              aria-label={more}\n              className={cn(\n                \"absolute end-0.75 bottom-0.75 grid size-2.25 place-items-center rounded-xs\",\n                \"opacity-40 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[cubic-bezier(.28,1.3,.36,1)]\",\n                \"hover:opacity-90 data-[state=open]:scale-130 data-[state=open]:opacity-90\",\n                focusRingInset,\n              )}\n            >\n              <svg\n                viewBox=\"0 0 5 5\"\n                aria-hidden=\"true\"\n                className={cn(\"size-1.25 fill-current\", mirrorForDirection)}\n              >\n                <path d=\"M5 0v5H0z\" />\n              </svg>\n            </ToolbarPrimitive.Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            data-slot=\"canvas-toolbar-flyout\"\n            side={side}\n            align=\"center\"\n            sideOffset={14}\n            onKeyDown={flyoutKeys}\n            onCloseAutoFocus={(event) => {\n              if (!picked.current) return;\n              picked.current = false;\n              event.preventDefault();\n              slotTools.current.get(index)?.focus();\n            }}\n            className={cn(\n              \"flex min-w-0 gap-0.5 rounded-[var(--canvas-toolbar-r)] border-0 p-1.5 shadow-md\",\n              \"data-[state=open]:[&>*]:animate-none\",\n              surface,\n              flyoutClassName,\n            )}\n            style={\n              {\n                \"--canvas-toolbar-r\": `${String(corner)}px`,\n                \"--canvas-toolbar-tool-r\": `${String(Math.max(corner - 4, 0))}px`,\n              } as CSSProperties\n            }\n          >\n            <DropdownMenuRadioGroup\n              value={shown.value}\n              className={cn(\n                \"flex gap-0.5\",\n                side === \"left\" || side === \"right\" ? \"flex-col\" : \"\",\n              )}\n              onValueChange={(next) => {\n                picked.current = true;\n                select(next, index);\n              }}\n            >\n              {slot.tools.map((tool) => (\n                <MenuPrimitive.RadioItem\n                  key={tool.value}\n                  value={tool.value}\n                  disabled={tool.disabled}\n                  aria-label={tool.label}\n                  data-slot=\"canvas-toolbar-option\"\n                  className={cn(toolClass, \"outline-none\", focusRingInset)}\n                >\n                  <span aria-hidden=\"true\" className={iconClass}>\n                    {tool.icon}\n                  </span>\n                </MenuPrimitive.RadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    );\n  };\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <ToolbarPrimitive.Root\n        data-slot=\"canvas-toolbar\"\n        orientation={orientation}\n        dir={dir}\n        className={cn(\n          \"inline-flex items-center gap-0.5 p-1.5 shadow-sm data-[orientation=vertical]:flex-col\",\n          surface,\n          className,\n        )}\n        style={\n          {\n            borderRadius: corner,\n            \"--canvas-toolbar-tool-r\": `${String(Math.max(corner - 4, 0))}px`,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          handleShortcut(event);\n        }}\n        {...props}\n      >\n        {tools.map((item, index) => {\n          if (item.type === \"separator\") {\n            return (\n              <ToolbarPrimitive.Separator\n                key={`separator-${String(index)}`}\n                data-slot=\"canvas-toolbar-separator\"\n                className={cn(\n                  \"shrink-0 bg-current/12\",\n                  \"data-[orientation=vertical]:mx-1.25 data-[orientation=vertical]:h-5 data-[orientation=vertical]:w-px\",\n                  \"data-[orientation=horizontal]:my-1.25 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-5\",\n                )}\n              />\n            );\n          }\n          if (isSlot(item)) return renderSlot(item, index);\n          return <Fragment key={item.value}>{renderTool(item)}</Fragment>;\n        })}\n      </ToolbarPrimitive.Root>\n    </>\n  );\n}\n\ninterface ModifierKeys {\n  altKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  defaultPrevented: boolean;\n  preventDefault: () => void;\n}\n\nexport { canvasToolbarVariants };\n"],"mappings":"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"}

package/dist/components/canvas-toolbar/index.d.ts

@@ -0,0 +1,2 @@
+import { CanvasTool, CanvasToolSeparator, CanvasToolSlot, CanvasToolbar, CanvasToolbarItem, CanvasToolbarProps, canvasToolbarVariants } from "./canvas-toolbar.js";
+export { type CanvasTool, type CanvasToolSeparator, type CanvasToolSlot, CanvasToolbar, type CanvasToolbarItem, type CanvasToolbarProps, canvasToolbarVariants };

package/dist/components/canvas-toolbar/index.js

@@ -0,0 +1,2 @@
+import { CanvasToolbar, canvasToolbarVariants } from "./canvas-toolbar.js";
+export { CanvasToolbar, canvasToolbarVariants };

package/dist/components/canvas-toolbar/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/canvas-toolbar/meta.ts
+const meta = defineMeta({
+	name: "canvas-toolbar",
+	title: "Canvas Toolbar",
+	description: "A Figma-style tool rail: one active tool with a springy fill, a shape slot that swaps its tool from a flyout, and single-key shortcuts.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: ["dropdown-menu", "tooltip"],
+	files: ["canvas-toolbar.tsx"],
+	a11y: "Built on Radix Toolbar: role=\"toolbar\" (name it with aria-label; it warns in development when unnamed) with one tab stop, arrow keys that follow the reading direction, Home/End and wrap-around. Tools are toggle buttons named by their label, with aria-pressed on the single active tool and aria-keyshortcuts when a shortcut is set; a tooltip repeats the name and key. The slot is a named group; its notch is a menu button (aria-haspopup=\"menu\", aria-expanded) opening Dowel's DropdownMenu, where shapes are menuitemradio items reachable with Left/Right as well as Up/Down. Escape closes the flyout and returns focus to the notch; picking a shape returns focus to the slot's tool. Shortcuts work while focus is in the toolbar, or on the whole document with globalShortcuts, and are ignored in inputs, textareas, contenteditable and open menus. The fill pop and the flyout entrance are decoration and stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/canvas-toolbar/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/canvas-toolbar/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"canvas-toolbar\",\n  title: \"Canvas Toolbar\",\n  description:\n    \"A Figma-style tool rail: one active tool with a springy fill, a shape slot that swaps its tool from a flyout, and single-key shortcuts.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [\"dropdown-menu\", \"tooltip\"],\n  files: [\"canvas-toolbar.tsx\"],\n  a11y:\n    'Built on Radix Toolbar: role=\"toolbar\" (name it with aria-label; it warns in development when unnamed) with one tab stop, ' +\n    \"arrow keys that follow the reading direction, Home/End and wrap-around. Tools are toggle buttons named by their label, \" +\n    \"with aria-pressed on the single active tool and aria-keyshortcuts when a shortcut is set; a tooltip repeats the name and key. \" +\n    'The slot is a named group; its notch is a menu button (aria-haspopup=\"menu\", aria-expanded) opening Dowel\\'s DropdownMenu, ' +\n    \"where shapes are menuitemradio items reachable with Left/Right as well as Up/Down. Escape closes the flyout and returns focus \" +\n    \"to the notch; picking a shape returns focus to the slot's tool. Shortcuts work while focus is in the toolbar, or on the whole \" +\n    \"document with globalShortcuts, and are ignored in inputs, textareas, contenteditable and open menus. The fill pop and the \" +\n    \"flyout entrance are decoration and stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC,iBAAiB,SAAS;CACjD,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAQJ,CAAC"}

package/dist/components/card-spread/card-spread-layouts.d.ts

@@ -0,0 +1,46 @@
+//#region src/components/card-spread/card-spread-layouts.d.ts
+declare const CARD_SPREAD_LAYOUTS: readonly ["arc", "long-arc", "linear", "corner", "stamp", "cascade", "scatter", "wheel"];
+type CardSpreadLayout = (typeof CARD_SPREAD_LAYOUTS)[number];
+interface CardSpreadPose {
+  x: number;
+  y: number;
+  rotate: number;
+  scale: number;
+  z: number;
+}
+/**
+ * The three knobs amicro's adjustable Stamp Arc exposes, generalised to every
+ * layout. Each layout reads the ones that mean something to it.
+ */
+interface CardSpreadTuning {
+  /** Rotation between neighbouring cards, in degrees. */
+  arc?: number;
+  /** Horizontal distance between neighbouring cards, as a percentage of card width. */
+  gap?: number;
+  /**
+   * Vertical travel, as a percentage of card height. For the curved layouts it
+   * is the curvature: a card `d` steps from the centre drops `offset × d²`.
+   * For `cascade` it is the rise per card.
+   */
+  offset?: number;
+}
+interface CardSpreadOrigin {
+  /** Horizontal offset of the transform origin from the card's centre, in % of its width. */
+  x: number;
+  /** Vertical transform origin, in % of the card's height from its top edge. */
+  y: number;
+}
+/** The tuning a layout uses when none is given. */
+declare function getCardSpreadDefaults(layout: CardSpreadLayout): Required<CardSpreadTuning>;
+/** Where a layout's cards pivot. */
+declare function getCardSpreadOrigin(layout: CardSpreadLayout): CardSpreadOrigin;
+/**
+ * The pose of card `index` of `count`, open or closed.
+ *
+ * Undefined tuning values fall back to the layout's defaults, so a consumer
+ * can adjust one knob without restating the others.
+ */
+declare function getCardSpreadPose(layout: CardSpreadLayout, index: number, count: number, open: boolean, tuning?: CardSpreadTuning): CardSpreadPose;
+//#endregion
+export { CARD_SPREAD_LAYOUTS, CardSpreadLayout, CardSpreadOrigin, CardSpreadPose, CardSpreadTuning, getCardSpreadDefaults, getCardSpreadOrigin, getCardSpreadPose };
+//# sourceMappingURL=card-spread-layouts.d.ts.map

package/dist/components/card-spread/card-spread-layouts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-spread-layouts.d.ts","names":[],"sources":["../../../src/components/card-spread/card-spread-layouts.ts"],"mappings":";cAoBa;KAWD,2BAA2B;UAEtB;EACf;EACA;EACA;EACA;EACA;;;;;;UAOe;;EAEf;;EAEA;;;;;;EAMA;;UAGe;;EAEf;;EAEA;;;iBAkJc,sBAAsB,QAAQ,mBAAmB,SAAS;;iBAK1D,oBAAoB,QAAQ,mBAAmB;;;;;;;iBAU/C,kBACd,QAAQ,kBACR,eACA,eACA,eACA,SAAQ,mBACP"}