@objectifthunes/whiteboard 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -20,10 +20,70 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Alert: () => Alert,
+  AssetCardSkeleton: () => AssetCardSkeleton,
+  AssetTitle: () => AssetTitle,
+  AvatarSkeleton: () => AvatarSkeleton,
+  Button: () => Button,
+  ButtonRow: () => ButtonRow,
+  ButtonSkeleton: () => ButtonSkeleton,
+  CanvasSkeleton: () => CanvasSkeleton,
+  Chip: () => Chip,
+  ChipSkeleton: () => ChipSkeleton,
+  ChoiceCard: () => ChoiceCard,
+  ChoiceGroup: () => ChoiceGroup,
+  ChoiceGroupSkeleton: () => ChoiceGroupSkeleton,
   ConfirmDialog: () => ConfirmDialog,
+  CoordGrid: () => CoordGrid,
+  CoordInput: () => CoordInput,
+  EmptyState: () => EmptyState,
+  Field: () => Field,
   FloatingPanel: () => FloatingPanel,
+  GeneratingOverlay: () => GeneratingOverlay,
+  IconButtonSkeleton: () => IconButtonSkeleton,
+  IconText: () => IconText,
+  ImageThumb: () => ImageThumb,
+  Inline: () => Inline,
+  Input: () => Input,
+  InputSkeleton: () => InputSkeleton,
+  ItemCard: () => ItemCard,
+  ItemList: () => ItemList,
+  Label: () => Label,
+  LineSkeleton: () => LineSkeleton,
+  List: () => List,
+  LoadingState: () => LoadingState,
   Minimap: () => Minimap,
+  MutedText: () => MutedText,
+  PageCard: () => PageCard,
+  PageShell: () => PageShell,
+  PageTitle: () => PageTitle,
+  PanelCloseButton: () => PanelCloseButton,
   PanelErrorBoundary: () => PanelErrorBoundary,
+  PanelFormSkeleton: () => PanelFormSkeleton,
+  PanelSection: () => PanelSection,
+  PanelTitle: () => PanelTitle,
+  PickerCard: () => PickerCard,
+  PickerGrid: () => PickerGrid,
+  PickerGridSkeleton: () => PickerGridSkeleton,
+  Pill: () => Pill,
+  SectionDescription: () => SectionDescription,
+  SectionTitle: () => SectionTitle,
+  Select: () => Select,
+  SelectSkeleton: () => SelectSkeleton,
+  Skeleton: () => Skeleton,
+  SplitLayout: () => SplitLayout,
+  Stack: () => Stack,
+  StoryCardSkeleton: () => StoryCardSkeleton,
+  StoryTitle: () => StoryTitle,
+  TagRow: () => TagRow,
+  Textarea: () => Textarea,
+  TextareaSkeleton: () => TextareaSkeleton,
+  ThemeToggle: () => ThemeToggle,
+  ThumbSkeleton: () => ThumbSkeleton,
+  TitleRow: () => TitleRow,
+  TitleSkeleton: () => TitleSkeleton,
+  UserCardSkeleton: () => UserCardSkeleton,
+  UserListSkeleton: () => UserListSkeleton,
   WHITEBOARD_GRID: () => WHITEBOARD_GRID,
   WhiteboardShell: () => WhiteboardShell,
   ZoomBar: () => ZoomBar,
@@ -119,6 +179,22 @@ function X({ size, ...props }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
   ] });
 }
+function Moon({ size, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
+}
+function Sun({ size, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 12h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
+  ] });
+}
 
 // src/store.ts
 var import_zustand = require("zustand");
@@ -918,12 +994,645 @@ function useWhiteboardLayout({
 function cn(...args) {
   return args.filter(Boolean).join(" ");
 }
+
+// src/Alert.tsx
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn(toneClasses[tone], className), ...props });
+}
+
+// src/Button.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var variantClasses = {
+  primary: "",
+  secondary: "secondary-btn",
+  danger: "danger-btn"
+};
+var Button = (0, import_react8.forwardRef)(function Button2({
+  variant = "primary",
+  fullWidth = false,
+  iconOnly = false,
+  loading = false,
+  disabled,
+  className,
+  children,
+  loadingText,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      ref,
+      className: cn(variantClasses[variant], fullWidth && "full-width-btn", iconOnly && "icon-only-btn", className),
+      disabled: disabled || loading,
+      ...props,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loader2, { size: 14, className: "icon-spin" }),
+        loadingText || children
+      ] }) : children
+    }
+  );
+});
+
+// src/ButtonRow.tsx
+var import_react9 = require("react");
+function ButtonRow({ as = "div", className, ...props }) {
+  return (0, import_react9.createElement)(as, {
+    className: cn("button-row", className),
+    ...props
+  });
+}
+
+// src/Chip.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Chip({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("chip", className), ...props });
+}
+
+// src/ChoiceCard.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ChoiceCard({ active = false, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "button",
+    {
+      type: "button",
+      className: cn("choice-card", className),
+      "data-active": active,
+      ...props
+    }
+  );
+}
+
+// src/List.tsx
+var import_react10 = require("react");
+function List({ as = "ul", reset = true, className, ...props }) {
+  return (0, import_react10.createElement)(as, {
+    className: cn(reset && "list-reset", className),
+    ...props
+  });
+}
+
+// src/Skeleton.tsx
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var radiusClasses = {
+  sm: "",
+  md: "skeleton--md",
+  pill: "skeleton--pill"
+};
+function Skeleton({ as = "div", radius = "sm", className, ...props }) {
+  return (0, import_react11.createElement)(as, {
+    className: cn("skeleton", radiusClasses[radius], className),
+    "aria-hidden": true,
+    ...props
+  });
+}
+function InputSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-input", className), ...rest });
+}
+function ButtonSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-btn", className), ...rest });
+}
+function IconButtonSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-icon-btn", className), ...rest });
+}
+function SelectSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-select", className), ...rest });
+}
+function TextareaSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-textarea", className), ...rest });
+}
+function ThumbSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-thumb", className), ...rest });
+}
+function ChipSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { radius: "pill", className: cn("skeleton-chip", className), ...rest });
+}
+function TitleSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-title", className), ...rest });
+}
+function LineSkeleton({ short = false, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-line", short && "skeleton-line--short", className), ...props });
+}
+function AvatarSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { radius: "pill", className: cn("skeleton-avatar", className), ...rest });
+}
+function CanvasSkeleton(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-canvas", className), ...rest });
+}
+
+// src/ChoiceGroup.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ChoiceGroup({
+  options,
+  value,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(List, { className: cn("choice-list", className), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ChoiceCard,
+    {
+      active: value === option.value,
+      onClick: () => onChange(option.value),
+      disabled: option.disabled,
+      "data-has-description": option.description ? "true" : "false",
+      children: option.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "choice-card__row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "choice-card__label", children: option.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "choice-card__description", children: option.description })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "choice-card__label", children: option.label })
+    }
+  ) }, option.value)) });
+}
+function ChoiceGroupSkeleton({ count = 4, className, withDescription = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(List, { className: cn("choice-list", className), "aria-hidden": true, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "choice-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TitleSkeleton, { className: cn("skeleton-title--sm", !withDescription && "skeleton-choice-label") }),
+    withDescription ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LineSkeleton, { short: true }) : null
+  ] }) }, `choice-skeleton-${i}`)) });
+}
+
+// src/CoordGrid.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function CoordGrid({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("coord-grid", className), ...props });
+}
+function CoordInput({ axis, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: cn("coord-input", className), children: [
+    axis,
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "number", step: "0.01", ...props })
+  ] });
+}
+
+// src/Stack.tsx
+var import_react12 = require("react");
+function Stack({
+  as,
+  size = "md",
+  className,
+  ...props
+}) {
+  return (0, import_react12.createElement)(as ?? "div", {
+    className: cn(size === "sm" ? "panel-stack-sm" : "panel-stack", className),
+    ...props
+  });
+}
+
+// src/Typography.tsx
+var import_react13 = require("react");
+var mutedSizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: ""
+};
+function AssetTitle({ as = "p", clamp = false, className, ...props }) {
+  return (0, import_react13.createElement)(as, {
+    className: cn("asset-title", clamp && "asset-title--clamp", className),
+    ...props
+  });
+}
+function StoryTitle({ as = "h3", className, ...props }) {
+  return (0, import_react13.createElement)(as, {
+    className: cn("story-title", className),
+    ...props
+  });
+}
+function MutedText({ as = "p", size = "sm", className, ...props }) {
+  return (0, import_react13.createElement)(as, {
+    className: cn(mutedSizeClasses[size], "text-muted", className),
+    ...props
+  });
+}
+function PageTitle({ as = "h1", className, ...props }) {
+  return (0, import_react13.createElement)(as, {
+    className: cn("page-title", className),
+    ...props
+  });
+}
+function SectionTitle({ as = "span", className, ...props }) {
+  return (0, import_react13.createElement)(as, {
+    className: cn("widget-section__title", className),
+    ...props
+  });
+}
+function SectionDescription({ as = "p", className, ...props }) {
+  return (0, import_react13.createElement)(as, {
+    className: cn("widget-section__description", className),
+    ...props
+  });
+}
+
+// src/EmptyState.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function EmptyState({ title, description, action }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Stack, { size: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AssetTitle, { children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MutedText, { children: description }) : null,
+    action
+  ] });
+}
+
+// src/Field.tsx
+var import_react14 = require("react");
+
+// src/Label.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: cn("widget-label", className), ...props });
+}
+
+// src/Field.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Field({
+  as,
+  label,
+  htmlFor,
+  hint,
+  error,
+  layout = "stack",
+  className,
+  children,
+  ...props
+}) {
+  return (0, import_react14.createElement)(
+    as ?? "div",
+    {
+      className: cn(layout === "control" ? "widget-control" : "panel-stack-sm", className),
+      ...props
+    },
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor, children: label }) : null,
+      children,
+      hint ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MutedText, { size: "xs", children: hint }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "field-error", children: error }) : null
+    ] })
+  );
+}
+
+// src/GeneratingOverlay.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function GeneratingOverlay({ isGenerating, children, message }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "generating-overlay-wrap", children: [
+    children,
+    isGenerating && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "generating-overlay", "aria-live": "polite", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loader2, { size: 20, className: "icon-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: message ?? "Generating, please wait\u2026" })
+    ] })
+  ] });
+}
+
+// src/IconText.tsx
+var import_react15 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function IconText({ as = "span", icon, className, children, ...props }) {
+  return (0, import_react15.createElement)(
+    as,
+    {
+      className: cn("inline-row", className),
+      ...props
+    },
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      icon,
+      children
+    ] })
+  );
+}
+
+// src/ImageThumb.tsx
+var import_react16 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ImageThumb({
+  src,
+  alt,
+  placeholder = "No image",
+  size = "md",
+  fit = "contain",
+  onImageError,
+  className,
+  ...props
+}) {
+  const [failedSrc, setFailedSrc] = (0, import_react16.useState)(null);
+  const failed = Boolean(src && failedSrc === src);
+  const classes = cn("image-thumb", `image-thumb--${size}`, `image-thumb--fit-${fit}`, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: classes, ...props, children: src && !failed ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "img",
+    {
+      src,
+      alt,
+      className: "image-thumb__img",
+      style: { objectFit: fit, objectPosition: "center" },
+      onError: () => {
+        setFailedSrc(src);
+        onImageError?.();
+      }
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "image-thumb__placeholder", children: placeholder }) });
+}
+
+// src/Inline.tsx
+var import_react17 = require("react");
+function Inline({
+  as,
+  justify = "start",
+  className,
+  ...props
+}) {
+  return (0, import_react17.createElement)(as ?? "div", {
+    className: cn(justify === "between" ? "space-between" : "inline-row", className),
+    ...props
+  });
+}
+
+// src/Input.tsx
+var import_react18 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Input = (0, import_react18.forwardRef)(function Input2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ref, className: cn(className), ...props });
+});
+
+// src/ItemCard.tsx
+var import_react19 = require("react");
+function ItemCard({ as = "div", className, ...props }) {
+  return (0, import_react19.createElement)(as, {
+    className: cn("item-card", className),
+    ...props
+  });
+}
+
+// src/ItemList.tsx
+var import_react20 = require("react");
+function ItemList({ as = "div", className, ...props }) {
+  return (0, import_react20.createElement)(as, {
+    className: cn("item-list", className),
+    ...props
+  });
+}
+
+// src/LoadingState.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function LoadingState({ label = "Loading...", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: cn("status-inline", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader2, { size: 14, className: "icon-spin" }),
+    label
+  ] });
+}
+
+// src/PageLayout.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function PageShell({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("main", { className: "page-shell", children });
+}
+function PageCard({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "page-card", children });
+}
+
+// src/PanelCloseButton.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function PanelCloseButton({ onClick, label = "Close" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Button, { variant: "secondary", className: "panel-close-btn", onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(X, { size: 14 }),
+    label
+  ] });
+}
+
+// src/PanelSection.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function PanelSection({ heading, description, actions, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: cn("widget-section", className), ...props, children: [
+    heading || actions ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: actions ? "title-row" : void 0, children: [
+      heading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionTitle, { children: heading }) : null,
+      actions
+    ] }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionDescription, { children: description }) : null,
+    children
+  ] });
+}
+
+// src/PanelTitle.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function PanelTitle({ icon: Icon, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "panel-title-with-icon", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { size: 13, className: "panel-title-icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: label })
+  ] });
+}
+
+// src/PickerCard.tsx
+var import_react21 = require("react");
+function PickerCard({ as = "button", className, ...props }) {
+  return (0, import_react21.createElement)(as, {
+    className: cn("picker-card", className),
+    ...props
+  });
+}
+
+// src/PickerGrid.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var variantClasses2 = {
+  elements: "picker-grid--elements",
+  characters: "picker-grid--characters",
+  library: "picker-grid--library"
+};
+function PickerGrid({ variant, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(List, { className: cn("picker-grid", variantClasses2[variant], className), ...props });
+}
+
+// src/Pill.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var toneClasses2 = {
+  default: "",
+  success: "success",
+  warning: "warning",
+  danger: "danger"
+};
+function Pill({ tone = "default", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cn("pill", toneClasses2[tone], className), ...props });
+}
+
+// src/Select.tsx
+var import_react22 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Select = (0, import_react22.forwardRef)(function Select2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("select", { ref, className: cn(className), ...props });
+});
+
+// src/SplitLayout.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var variantClasses3 = {
+  element: "split-layout--element",
+  character: "split-layout--character",
+  user: "split-layout--user"
+};
+function SplitLayout({ variant, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("split-layout", variantClasses3[variant], className), ...props });
+}
+
+// src/TagRow.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function TagRow({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("tag-row", className), ...props });
+}
+
+// src/Textarea.tsx
+var import_react23 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Textarea = (0, import_react23.forwardRef)(function Textarea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("textarea", { ref, className: cn(className), ...props });
+});
+
+// src/ThemeToggle.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function ThemeToggle({ className, theme = "light", onToggle, lightIcon, darkIcon }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { className, onClick: onToggle, title: `Switch to ${theme === "light" ? "dark" : "light"} mode`, "aria-label": "Toggle theme", children: theme === "light" ? darkIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Moon, {}) : lightIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Sun, {}) });
+}
+
+// src/TitleRow.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function TitleRow({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("title-row", className), ...props });
+}
+
+// src/WidgetSkeletons.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function PanelFormSkeleton({ inputs = 1, showButton = true, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { className, ...props, children: [
+    Array.from({ length: inputs }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(InputSkeleton, {}, `panel-form-input-${i}`)),
+    showButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ButtonSkeleton, {})
+  ] });
+}
+function StoryCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("article", { className: "story-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "story-cover", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "story-cover__placeholder story-cover__placeholder--skeleton" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "story-card__overlay story-card__overlay--skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "story-card__overlay-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Inline, { as: "header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TitleSkeleton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LineSkeleton, { short: true })
+    ] }) })
+  ] });
+}
+function UserCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemCard, { as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SplitLayout, { variant: "user", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AvatarSkeleton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TitleSkeleton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LineSkeleton, { short: true })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectSkeleton, {})
+    ] })
+  ] }) });
+}
+function UserListSkeleton({ count = 3 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemList, { as: "ul", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UserCardSkeleton, {}, `user-skeleton-${i}`)) });
+}
+function AssetCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ItemCard, { as: "li", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ThumbSkeleton, { className: "asset-thumb" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TitleSkeleton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(TagRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ButtonRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ButtonSkeleton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ButtonSkeleton, {})
+    ] })
+  ] });
+}
+function PickerGridSkeleton({ count = 8, gridClass }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(List, { className: cn("picker-grid", gridClass), children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PickerCard, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ThumbSkeleton, { className: "asset-thumb" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LineSkeleton, { short: true })
+  ] }) }) }, `picker-skeleton-${i}`)) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  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,