@objectifthunes/whiteboard 0.1.1 → 0.2.0

package/dist/index.js

@@ -79,6 +79,22 @@ function X({ size, ...props }) {
     /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
   ] });
 }
+function Moon({ size, ...props }) {
+  return /* @__PURE__ */ jsx("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
+}
+function Sun({ size, ...props }) {
+  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2v2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 20v2" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
+    /* @__PURE__ */ jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 12h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 12h2" }),
+    /* @__PURE__ */ jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
+    /* @__PURE__ */ jsx("path", { d: "m19.07 4.93-1.41 1.41" })
+  ] });
+}
 
 // src/store.ts
 import { create } from "zustand";
@@ -878,11 +894,644 @@ function useWhiteboardLayout({
 function cn(...args) {
   return args.filter(Boolean).join(" ");
 }
+
+// src/Alert.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var toneClasses = {
+  error: "status-error",
+  muted: "text-sm text-muted",
+  info: "ui-alert ui-alert--info",
+  success: "ui-alert ui-alert--success"
+};
+function Alert({ tone = "info", className, ...props }) {
+  return /* @__PURE__ */ jsx8("p", { className: cn(toneClasses[tone], className), ...props });
+}
+
+// src/Button.tsx
+import { forwardRef } from "react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var variantClasses = {
+  primary: "",
+  secondary: "secondary-btn",
+  danger: "danger-btn"
+};
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  fullWidth = false,
+  iconOnly = false,
+  loading = false,
+  disabled,
+  className,
+  children,
+  loadingText,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      ref,
+      className: cn(variantClasses[variant], fullWidth && "full-width-btn", iconOnly && "icon-only-btn", className),
+      disabled: disabled || loading,
+      ...props,
+      children: loading ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(Loader2, { size: 14, className: "icon-spin" }),
+        loadingText || children
+      ] }) : children
+    }
+  );
+});
+
+// src/ButtonRow.tsx
+import { createElement } from "react";
+function ButtonRow({ as = "div", className, ...props }) {
+  return createElement(as, {
+    className: cn("button-row", className),
+    ...props
+  });
+}
+
+// src/Chip.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Chip({ className, ...props }) {
+  return /* @__PURE__ */ jsx10("span", { className: cn("chip", className), ...props });
+}
+
+// src/ChoiceCard.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ChoiceCard({ active = false, className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    "button",
+    {
+      type: "button",
+      className: cn("choice-card", className),
+      "data-active": active,
+      ...props
+    }
+  );
+}
+
+// src/List.tsx
+import { createElement as createElement2 } from "react";
+function List({ as = "ul", reset = true, className, ...props }) {
+  return createElement2(as, {
+    className: cn(reset && "list-reset", className),
+    ...props
+  });
+}
+
+// src/Skeleton.tsx
+import { createElement as createElement3 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var radiusClasses = {
+  sm: "",
+  md: "skeleton--md",
+  pill: "skeleton--pill"
+};
+function Skeleton({ as = "div", radius = "sm", className, ...props }) {
+  return createElement3(as, {
+    className: cn("skeleton", radiusClasses[radius], className),
+    "aria-hidden": true,
+    ...props
+  });
+}
+function InputSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-input", className), ...rest });
+}
+function ButtonSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-btn", className), ...rest });
+}
+function IconButtonSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-icon-btn", className), ...rest });
+}
+function SelectSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-select", className), ...rest });
+}
+function TextareaSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-textarea", className), ...rest });
+}
+function ThumbSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-thumb", className), ...rest });
+}
+function ChipSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { radius: "pill", className: cn("skeleton-chip", className), ...rest });
+}
+function TitleSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-title", className), ...rest });
+}
+function LineSkeleton({ short = false, className, ...props }) {
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-line", short && "skeleton-line--short", className), ...props });
+}
+function AvatarSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { radius: "pill", className: cn("skeleton-avatar", className), ...rest });
+}
+function CanvasSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx12(Skeleton, { className: cn("skeleton-canvas", className), ...rest });
+}
+
+// src/ChoiceGroup.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChoiceGroup({
+  options,
+  value,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsx13(List, { className: cn("choice-list", className), children: options.map((option) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
+    ChoiceCard,
+    {
+      active: value === option.value,
+      onClick: () => onChange(option.value),
+      disabled: option.disabled,
+      "data-has-description": option.description ? "true" : "false",
+      children: option.description ? /* @__PURE__ */ jsxs9("span", { className: "choice-card__row", children: [
+        /* @__PURE__ */ jsx13("span", { className: "choice-card__label", children: option.label }),
+        /* @__PURE__ */ jsx13("span", { className: "choice-card__description", children: option.description })
+      ] }) : /* @__PURE__ */ jsx13("span", { className: "choice-card__label", children: option.label })
+    }
+  ) }, option.value)) });
+}
+function ChoiceGroupSkeleton({ count = 4, className, withDescription = false }) {
+  return /* @__PURE__ */ jsx13(List, { className: cn("choice-list", className), "aria-hidden": true, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsxs9("div", { className: "choice-card", children: [
+    /* @__PURE__ */ jsx13(TitleSkeleton, { className: cn("skeleton-title--sm", !withDescription && "skeleton-choice-label") }),
+    withDescription ? /* @__PURE__ */ jsx13(LineSkeleton, { short: true }) : null
+  ] }) }, `choice-skeleton-${i}`)) });
+}
+
+// src/CoordGrid.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function CoordGrid({ className, ...props }) {
+  return /* @__PURE__ */ jsx14("div", { className: cn("coord-grid", className), ...props });
+}
+function CoordInput({ axis, className, ...props }) {
+  return /* @__PURE__ */ jsxs10("label", { className: cn("coord-input", className), children: [
+    axis,
+    " ",
+    /* @__PURE__ */ jsx14("input", { type: "number", step: "0.01", ...props })
+  ] });
+}
+
+// src/Stack.tsx
+import { createElement as createElement4 } from "react";
+function Stack({
+  as,
+  size = "md",
+  className,
+  ...props
+}) {
+  return createElement4(as ?? "div", {
+    className: cn(size === "sm" ? "panel-stack-sm" : "panel-stack", className),
+    ...props
+  });
+}
+
+// src/Typography.tsx
+import { createElement as createElement5 } from "react";
+var mutedSizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: ""
+};
+function AssetTitle({ as = "p", clamp = false, className, ...props }) {
+  return createElement5(as, {
+    className: cn("asset-title", clamp && "asset-title--clamp", className),
+    ...props
+  });
+}
+function StoryTitle({ as = "h3", className, ...props }) {
+  return createElement5(as, {
+    className: cn("story-title", className),
+    ...props
+  });
+}
+function MutedText({ as = "p", size = "sm", className, ...props }) {
+  return createElement5(as, {
+    className: cn(mutedSizeClasses[size], "text-muted", className),
+    ...props
+  });
+}
+function PageTitle({ as = "h1", className, ...props }) {
+  return createElement5(as, {
+    className: cn("page-title", className),
+    ...props
+  });
+}
+function SectionTitle({ as = "span", className, ...props }) {
+  return createElement5(as, {
+    className: cn("widget-section__title", className),
+    ...props
+  });
+}
+function SectionDescription({ as = "p", className, ...props }) {
+  return createElement5(as, {
+    className: cn("widget-section__description", className),
+    ...props
+  });
+}
+
+// src/EmptyState.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function EmptyState({ title, description, action }) {
+  return /* @__PURE__ */ jsxs11(Stack, { size: "sm", children: [
+    /* @__PURE__ */ jsx15(AssetTitle, { children: title }),
+    description ? /* @__PURE__ */ jsx15(MutedText, { children: description }) : null,
+    action
+  ] });
+}
+
+// src/Field.tsx
+import { createElement as createElement6 } from "react";
+
+// src/Label.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("label", { className: cn("widget-label", className), ...props });
+}
+
+// src/Field.tsx
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function Field({
+  as,
+  label,
+  htmlFor,
+  hint,
+  error,
+  layout = "stack",
+  className,
+  children,
+  ...props
+}) {
+  return createElement6(
+    as ?? "div",
+    {
+      className: cn(layout === "control" ? "widget-control" : "panel-stack-sm", className),
+      ...props
+    },
+    /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      label ? /* @__PURE__ */ jsx17(Label, { htmlFor, children: label }) : null,
+      children,
+      hint ? /* @__PURE__ */ jsx17(MutedText, { size: "xs", children: hint }) : null,
+      error ? /* @__PURE__ */ jsx17("p", { className: "field-error", children: error }) : null
+    ] })
+  );
+}
+
+// src/GeneratingOverlay.tsx
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function GeneratingOverlay({ isGenerating, children, message }) {
+  return /* @__PURE__ */ jsxs13("div", { className: "generating-overlay-wrap", children: [
+    children,
+    isGenerating && /* @__PURE__ */ jsxs13("div", { className: "generating-overlay", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx18(Loader2, { size: 20, className: "icon-spin" }),
+      /* @__PURE__ */ jsx18("span", { children: message ?? "Generating, please wait\u2026" })
+    ] })
+  ] });
+}
+
+// src/IconText.tsx
+import { createElement as createElement7 } from "react";
+import { Fragment as Fragment5, jsxs as jsxs14 } from "react/jsx-runtime";
+function IconText({ as = "span", icon, className, children, ...props }) {
+  return createElement7(
+    as,
+    {
+      className: cn("inline-row", className),
+      ...props
+    },
+    /* @__PURE__ */ jsxs14(Fragment5, { children: [
+      icon,
+      children
+    ] })
+  );
+}
+
+// src/ImageThumb.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function ImageThumb({
+  src,
+  alt,
+  placeholder = "No image",
+  size = "md",
+  fit = "contain",
+  onImageError,
+  className,
+  ...props
+}) {
+  const [failedSrc, setFailedSrc] = useState2(null);
+  const failed = Boolean(src && failedSrc === src);
+  const classes = cn("image-thumb", `image-thumb--${size}`, `image-thumb--fit-${fit}`, className);
+  return /* @__PURE__ */ jsx19("div", { className: classes, ...props, children: src && !failed ? /* @__PURE__ */ jsx19(
+    "img",
+    {
+      src,
+      alt,
+      className: "image-thumb__img",
+      style: { objectFit: fit, objectPosition: "center" },
+      onError: () => {
+        setFailedSrc(src);
+        onImageError?.();
+      }
+    }
+  ) : /* @__PURE__ */ jsx19("span", { className: "image-thumb__placeholder", children: placeholder }) });
+}
+
+// src/Inline.tsx
+import { createElement as createElement8 } from "react";
+function Inline({
+  as,
+  justify = "start",
+  className,
+  ...props
+}) {
+  return createElement8(as ?? "div", {
+    className: cn(justify === "between" ? "space-between" : "inline-row", className),
+    ...props
+  });
+}
+
+// src/Input.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Input = forwardRef2(function Input2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx20("input", { ref, className: cn(className), ...props });
+});
+
+// src/ItemCard.tsx
+import { createElement as createElement9 } from "react";
+function ItemCard({ as = "div", className, ...props }) {
+  return createElement9(as, {
+    className: cn("item-card", className),
+    ...props
+  });
+}
+
+// src/ItemList.tsx
+import { createElement as createElement10 } from "react";
+function ItemList({ as = "div", className, ...props }) {
+  return createElement10(as, {
+    className: cn("item-list", className),
+    ...props
+  });
+}
+
+// src/LoadingState.tsx
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function LoadingState({ label = "Loading...", className }) {
+  return /* @__PURE__ */ jsxs15("span", { className: cn("status-inline", className), children: [
+    /* @__PURE__ */ jsx21(Loader2, { size: 14, className: "icon-spin" }),
+    label
+  ] });
+}
+
+// src/PageLayout.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function PageShell({ children }) {
+  return /* @__PURE__ */ jsx22("main", { className: "page-shell", children });
+}
+function PageCard({ children }) {
+  return /* @__PURE__ */ jsx22("div", { className: "page-card", children });
+}
+
+// src/PanelCloseButton.tsx
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+function PanelCloseButton({ onClick, label = "Close" }) {
+  return /* @__PURE__ */ jsxs16(Button, { variant: "secondary", className: "panel-close-btn", onClick, children: [
+    /* @__PURE__ */ jsx23(X, { size: 14 }),
+    label
+  ] });
+}
+
+// src/PanelSection.tsx
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+function PanelSection({ heading, description, actions, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs17("section", { className: cn("widget-section", className), ...props, children: [
+    heading || actions ? /* @__PURE__ */ jsxs17("header", { className: actions ? "title-row" : void 0, children: [
+      heading ? /* @__PURE__ */ jsx24(SectionTitle, { children: heading }) : null,
+      actions
+    ] }) : null,
+    description ? /* @__PURE__ */ jsx24(SectionDescription, { children: description }) : null,
+    children
+  ] });
+}
+
+// src/PanelTitle.tsx
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+function PanelTitle({ icon: Icon, label }) {
+  return /* @__PURE__ */ jsxs18("span", { className: "panel-title-with-icon", children: [
+    /* @__PURE__ */ jsx25(Icon, { size: 13, className: "panel-title-icon" }),
+    /* @__PURE__ */ jsx25("span", { children: label })
+  ] });
+}
+
+// src/PickerCard.tsx
+import { createElement as createElement11 } from "react";
+function PickerCard({ as = "button", className, ...props }) {
+  return createElement11(as, {
+    className: cn("picker-card", className),
+    ...props
+  });
+}
+
+// src/PickerGrid.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var variantClasses2 = {
+  elements: "picker-grid--elements",
+  characters: "picker-grid--characters",
+  library: "picker-grid--library"
+};
+function PickerGrid({ variant, className, ...props }) {
+  return /* @__PURE__ */ jsx26(List, { className: cn("picker-grid", variantClasses2[variant], className), ...props });
+}
+
+// src/Pill.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var toneClasses2 = {
+  default: "",
+  success: "success",
+  warning: "warning",
+  danger: "danger"
+};
+function Pill({ tone = "default", className, ...props }) {
+  return /* @__PURE__ */ jsx27("span", { className: cn("pill", toneClasses2[tone], className), ...props });
+}
+
+// src/Select.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var Select = forwardRef3(function Select2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx28("select", { ref, className: cn(className), ...props });
+});
+
+// src/SplitLayout.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var variantClasses3 = {
+  element: "split-layout--element",
+  character: "split-layout--character",
+  user: "split-layout--user"
+};
+function SplitLayout({ variant, className, ...props }) {
+  return /* @__PURE__ */ jsx29("div", { className: cn("split-layout", variantClasses3[variant], className), ...props });
+}
+
+// src/TagRow.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function TagRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx30("div", { className: cn("tag-row", className), ...props });
+}
+
+// src/Textarea.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Textarea = forwardRef4(function Textarea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx31("textarea", { ref, className: cn(className), ...props });
+});
+
+// src/ThemeToggle.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+function ThemeToggle({ className, theme = "light", onToggle, lightIcon, darkIcon }) {
+  return /* @__PURE__ */ jsx32("button", { className, onClick: onToggle, title: `Switch to ${theme === "light" ? "dark" : "light"} mode`, "aria-label": "Toggle theme", children: theme === "light" ? darkIcon ?? /* @__PURE__ */ jsx32(Moon, {}) : lightIcon ?? /* @__PURE__ */ jsx32(Sun, {}) });
+}
+
+// src/TitleRow.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+function TitleRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx33("div", { className: cn("title-row", className), ...props });
+}
+
+// src/WidgetSkeletons.tsx
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+function PanelFormSkeleton({ inputs = 1, showButton = true, className, ...props }) {
+  return /* @__PURE__ */ jsxs19(Stack, { className, ...props, children: [
+    Array.from({ length: inputs }).map((_, i) => /* @__PURE__ */ jsx34(InputSkeleton, {}, `panel-form-input-${i}`)),
+    showButton && /* @__PURE__ */ jsx34(ButtonSkeleton, {})
+  ] });
+}
+function StoryCardSkeleton() {
+  return /* @__PURE__ */ jsxs19("article", { className: "story-card", children: [
+    /* @__PURE__ */ jsx34("div", { className: "story-cover", children: /* @__PURE__ */ jsx34("div", { className: "story-cover__placeholder story-cover__placeholder--skeleton" }) }),
+    /* @__PURE__ */ jsx34("div", { className: "story-card__overlay story-card__overlay--skeleton", children: /* @__PURE__ */ jsxs19("div", { className: "story-card__overlay-text", children: [
+      /* @__PURE__ */ jsxs19(Inline, { as: "header", children: [
+        /* @__PURE__ */ jsx34(ChipSkeleton, {}),
+        /* @__PURE__ */ jsx34(ChipSkeleton, {})
+      ] }),
+      /* @__PURE__ */ jsx34(TitleSkeleton, {}),
+      /* @__PURE__ */ jsx34(LineSkeleton, { short: true })
+    ] }) })
+  ] });
+}
+function UserCardSkeleton() {
+  return /* @__PURE__ */ jsx34(ItemCard, { as: "li", children: /* @__PURE__ */ jsxs19(SplitLayout, { variant: "user", children: [
+    /* @__PURE__ */ jsx34(AvatarSkeleton, {}),
+    /* @__PURE__ */ jsxs19(Stack, { size: "sm", children: [
+      /* @__PURE__ */ jsx34(TitleSkeleton, {}),
+      /* @__PURE__ */ jsx34(LineSkeleton, { short: true })
+    ] }),
+    /* @__PURE__ */ jsxs19(Stack, { size: "sm", children: [
+      /* @__PURE__ */ jsx34(ChipSkeleton, {}),
+      /* @__PURE__ */ jsx34(SelectSkeleton, {})
+    ] })
+  ] }) });
+}
+function UserListSkeleton({ count = 3 }) {
+  return /* @__PURE__ */ jsx34(ItemList, { as: "ul", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx34(UserCardSkeleton, {}, `user-skeleton-${i}`)) });
+}
+function AssetCardSkeleton() {
+  return /* @__PURE__ */ jsxs19(ItemCard, { as: "li", children: [
+    /* @__PURE__ */ jsxs19(Stack, { size: "sm", children: [
+      /* @__PURE__ */ jsx34(ThumbSkeleton, { className: "asset-thumb" }),
+      /* @__PURE__ */ jsx34(TitleSkeleton, {}),
+      /* @__PURE__ */ jsxs19(TagRow, { children: [
+        /* @__PURE__ */ jsx34(ChipSkeleton, {}),
+        /* @__PURE__ */ jsx34(ChipSkeleton, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs19(ButtonRow, { children: [
+      /* @__PURE__ */ jsx34(ButtonSkeleton, {}),
+      /* @__PURE__ */ jsx34(ButtonSkeleton, {})
+    ] })
+  ] });
+}
+function PickerGridSkeleton({ count = 8, gridClass }) {
+  return /* @__PURE__ */ jsx34(List, { className: cn("picker-grid", gridClass), children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsx34(PickerCard, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ jsxs19(Stack, { size: "sm", children: [
+    /* @__PURE__ */ jsx34(ThumbSkeleton, { className: "asset-thumb" }),
+    /* @__PURE__ */ jsx34(LineSkeleton, { short: true })
+  ] }) }) }, `picker-skeleton-${i}`)) });
+}
 export {
+  Alert,
+  AssetCardSkeleton,
+  AssetTitle,
+  AvatarSkeleton,
+  Button,
+  ButtonRow,
+  ButtonSkeleton,
+  CanvasSkeleton,
+  Chip,
+  ChipSkeleton,
+  ChoiceCard,
+  ChoiceGroup,
+  ChoiceGroupSkeleton,
   ConfirmDialog,
+  CoordGrid,
+  CoordInput,
+  EmptyState,
+  Field,
   FloatingPanel,
+  GeneratingOverlay,
+  IconButtonSkeleton,
+  IconText,
+  ImageThumb,
+  Inline,
+  Input,
+  InputSkeleton,
+  ItemCard,
+  ItemList,
+  Label,
+  LineSkeleton,
+  List,
+  LoadingState,
   Minimap,
+  MutedText,
+  PageCard,
+  PageShell,
+  PageTitle,
+  PanelCloseButton,
   PanelErrorBoundary,
+  PanelFormSkeleton,
+  PanelSection,
+  PanelTitle,
+  PickerCard,
+  PickerGrid,
+  PickerGridSkeleton,
+  Pill,
+  SectionDescription,
+  SectionTitle,
+  Select,
+  SelectSkeleton,
+  Skeleton,
+  SplitLayout,
+  Stack,
+  StoryCardSkeleton,
+  StoryTitle,
+  TagRow,
+  Textarea,
+  TextareaSkeleton,
+  ThemeToggle,
+  ThumbSkeleton,
+  TitleRow,
+  TitleSkeleton,
+  UserCardSkeleton,
+  UserListSkeleton,
   WHITEBOARD_GRID,
   WhiteboardShell,
   ZoomBar,