@ai-matrx/rich-content 0.0.0 → 0.2.2

package/dist/kinds/react/loading/kind-loading-components.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The hardcoded kind loading-component library (zero fetch delay). Each
+ * accepts the early-key contract (kind-loading.types.ts) and renders a small,
+ * enterprise-grade shimmer/skeleton while a kind instance streams in and its
+ * schema/component cold-fetch resolves.
+ *
+ * Rules: semantic tokens for structure, Lucide only, no emojis, no heavy
+ * deps — every loader is a handful of divs. Each loader carries ONE accent
+ * tone (Arman, 2026-08-24: "everything has a little touch of color so things
+ * feel and look alive — not overdoing it"): a tinted icon chip, a tinted
+ * spinner, and a faint wash; bodies may tint ONE element class. Selection
+ * lives in kind-loading-registry.ts (`kind_definition.metadata.loading_component`).
+ */
+import React from "react";
+import type { KindLoadingProps } from "./kind-loading.types.js";
+type IconComponent = React.ComponentType<{
+    className?: string;
+}>;
+/** Icon-hint slugs an emitter may send via the early `icon` key. */
+export declare const ICON_HINTS: Record<string, IconComponent>;
+export declare const CardLoading: React.FC<KindLoadingProps>;
+export declare const ListLoading: React.FC<KindLoadingProps>;
+export declare const TableLoading: React.FC<KindLoadingProps>;
+export declare const TimelineLoading: React.FC<KindLoadingProps>;
+export declare const ChartLoading: React.FC<KindLoadingProps>;
+export declare const DeckLoading: React.FC<KindLoadingProps>;
+export declare const FormLoading: React.FC<KindLoadingProps>;
+export declare const MediaLoading: React.FC<KindLoadingProps>;
+export declare const StatGridLoading: React.FC<KindLoadingProps>;
+export declare const DocumentLoading: React.FC<KindLoadingProps>;
+/** flashcard_set — one big card face, with the deck's pager beneath it. */
+export declare const FlashcardsLoading: React.FC<KindLoadingProps>;
+/** quiz_set — a question, then its answer choices, then the next question. */
+export declare const QuizLoading: React.FC<KindLoadingProps>;
+/** study_notes — an overview paragraph, then headed sections with key points. */
+export declare const NotesLoading: React.FC<KindLoadingProps>;
+export declare const DiagramLoading: React.FC<KindLoadingProps>;
+export declare const ChatLoading: React.FC<KindLoadingProps>;
+export declare const GalleryLoading: React.FC<KindLoadingProps>;
+export declare const KanbanLoading: React.FC<KindLoadingProps>;
+export declare const TreeLoading: React.FC<KindLoadingProps>;
+export declare const CodeLoading: React.FC<KindLoadingProps>;
+export declare const MapLoading: React.FC<KindLoadingProps>;
+export declare const ProgressLoading: React.FC<KindLoadingProps>;
+export declare const MinimalLoading: React.FC<KindLoadingProps>;
+/** The generic default — the early-key-aware successor of the old skeleton. */
+export declare const GenericLoading: React.FC<KindLoadingProps>;
+export {};

package/dist/kinds/react/loading/kind-loading-components.js

@@ -0,0 +1,447 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
+import React from "react";
+import {
+  BarChart3,
+  Code2,
+  FileText,
+  GalleryHorizontalEnd,
+  GitBranch,
+  Image as ImageIcon,
+  CircleHelp,
+  Dot,
+  Kanban,
+  Layers,
+  LayoutGrid,
+  ListChecks,
+  Loader2,
+  NotebookPen,
+  Map as MapIcon,
+  MessagesSquare,
+  Network,
+  Presentation,
+  Shapes,
+  Table as TableIcon,
+  TextCursorInput,
+  TimerReset,
+  TrendingUp
+} from "lucide-react";
+const ICON_HINTS = {
+  card: LayoutGrid,
+  list: ListChecks,
+  table: TableIcon,
+  timeline: TimerReset,
+  chart: BarChart3,
+  deck: Presentation,
+  form: TextCursorInput,
+  media: ImageIcon,
+  stats: TrendingUp,
+  document: FileText,
+  diagram: Network,
+  chat: MessagesSquare,
+  gallery: GalleryHorizontalEnd,
+  kanban: Kanban,
+  tree: GitBranch,
+  code: Code2,
+  map: MapIcon,
+  shapes: Shapes
+};
+const TONES = {
+  violet: {
+    chip: "bg-violet-500/10",
+    icon: "text-violet-600 dark:text-violet-400",
+    spin: "text-violet-500",
+    wash: "bg-gradient-to-br from-violet-500/[0.05] via-card/50 to-card/50"
+  },
+  sky: {
+    chip: "bg-sky-500/10",
+    icon: "text-sky-600 dark:text-sky-400",
+    spin: "text-sky-500",
+    wash: "bg-gradient-to-br from-sky-500/[0.05] via-card/50 to-card/50"
+  },
+  indigo: {
+    chip: "bg-indigo-500/10",
+    icon: "text-indigo-600 dark:text-indigo-400",
+    spin: "text-indigo-500",
+    wash: "bg-gradient-to-br from-indigo-500/[0.05] via-card/50 to-card/50"
+  },
+  amber: {
+    chip: "bg-amber-500/10",
+    icon: "text-amber-600 dark:text-amber-400",
+    spin: "text-amber-500",
+    wash: "bg-gradient-to-br from-amber-500/[0.05] via-card/50 to-card/50"
+  },
+  emerald: {
+    chip: "bg-emerald-500/10",
+    icon: "text-emerald-600 dark:text-emerald-400",
+    spin: "text-emerald-500",
+    wash: "bg-gradient-to-br from-emerald-500/[0.05] via-card/50 to-card/50"
+  },
+  fuchsia: {
+    chip: "bg-fuchsia-500/10",
+    icon: "text-fuchsia-600 dark:text-fuchsia-400",
+    spin: "text-fuchsia-500",
+    wash: "bg-gradient-to-br from-fuchsia-500/[0.05] via-card/50 to-card/50"
+  },
+  blue: {
+    chip: "bg-blue-500/10",
+    icon: "text-blue-600 dark:text-blue-400",
+    spin: "text-blue-500",
+    wash: "bg-gradient-to-br from-blue-500/[0.05] via-card/50 to-card/50"
+  },
+  teal: {
+    chip: "bg-teal-500/10",
+    icon: "text-teal-600 dark:text-teal-400",
+    spin: "text-teal-500",
+    wash: "bg-gradient-to-br from-teal-500/[0.05] via-card/50 to-card/50"
+  },
+  cyan: {
+    chip: "bg-cyan-500/10",
+    icon: "text-cyan-600 dark:text-cyan-400",
+    spin: "text-cyan-500",
+    wash: "bg-gradient-to-br from-cyan-500/[0.05] via-card/50 to-card/50"
+  },
+  pink: {
+    chip: "bg-pink-500/10",
+    icon: "text-pink-600 dark:text-pink-400",
+    spin: "text-pink-500",
+    wash: "bg-gradient-to-br from-pink-500/[0.05] via-card/50 to-card/50"
+  },
+  orange: {
+    chip: "bg-orange-500/10",
+    icon: "text-orange-600 dark:text-orange-400",
+    spin: "text-orange-500",
+    wash: "bg-gradient-to-br from-orange-500/[0.05] via-card/50 to-card/50"
+  },
+  lime: {
+    chip: "bg-lime-500/10",
+    icon: "text-lime-600 dark:text-lime-500",
+    spin: "text-lime-500",
+    wash: "bg-gradient-to-br from-lime-500/[0.05] via-card/50 to-card/50"
+  },
+  rose: {
+    chip: "bg-rose-500/10",
+    icon: "text-rose-600 dark:text-rose-400",
+    spin: "text-rose-500",
+    wash: "bg-gradient-to-br from-rose-500/[0.05] via-card/50 to-card/50"
+  }
+};
+function clampCount(count, fallback, max = 8) {
+  if (count === void 0) return fallback;
+  return Math.max(1, Math.min(max, Math.round(count)));
+}
+const PhaseContext = React.createContext("arriving");
+function useReserved() {
+  return React.useContext(PhaseContext) === "reserved";
+}
+function pulse(p) {
+  return p.phase === "reserved" ? "" : "animate-pulse";
+}
+const Sk = ({ className }) => {
+  const reserved = useReserved();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `rounded ${reserved ? "bg-muted/60" : "animate-pulse bg-muted"} ${className ?? ""}`
+    }
+  );
+};
+const Reveal = ({
+  text,
+  className
+}) => /* @__PURE__ */ jsx("span", { className: `animate-[fade-in_0.6s_ease-out] ${className ?? ""}`, children: text }, text);
+const Shell = ({
+  kind,
+  phase = "arriving",
+  chrome = "full",
+  title,
+  description,
+  loadingMessage,
+  loadingSubtext,
+  icon,
+  defaultIcon,
+  tone = "violet",
+  children
+}) => {
+  const Icon = icon && ICON_HINTS[icon] || defaultIcon;
+  const t = TONES[tone];
+  const reserved = phase === "reserved";
+  if (chrome === "bare") {
+    return /* @__PURE__ */ jsx(PhaseContext.Provider, { value: phase, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-kind-loading": kind ?? "unknown",
+        "data-kind-loading-phase": phase,
+        className: reserved ? "animate-[kind-slot-breathe_3.2s_ease-in-out_infinite]" : void 0,
+        children
+      }
+    ) });
+  }
+  const heading = title ?? loadingMessage;
+  const sub = title ? loadingMessage ?? description : description ?? loadingSubtext;
+  return /* @__PURE__ */ jsx(PhaseContext.Provider, { value: phase, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `my-3 rounded-lg border p-4 ${// A placeholder reads as a reserved SLOT, not as a live region: a
+      // dashed edge says "something belongs here" the way an empty frame
+      // does, and it becomes solid the moment content starts arriving.
+      reserved ? "border-dashed border-border/70 bg-card/40" : `border-border ${t.wash}`}`,
+      "aria-busy": reserved ? void 0 : "true",
+      role: "status",
+      "data-kind-loading": kind ?? "unknown",
+      "data-kind-loading-phase": phase,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${t.chip} ${// Alive, but calm — one slow breath rather than a pulse. This is
+              // the podcast placeholder's proven move: a single gently moving
+              // element, everything else still.
+              reserved ? "animate-[kind-slot-breathe_3.2s_ease-in-out_infinite]" : ""}`,
+              children: /* @__PURE__ */ jsx(Icon, { className: `h-4 w-4 ${t.icon}` })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-h-5 items-center gap-2", children: [
+              heading ? /* @__PURE__ */ jsx(
+                Reveal,
+                {
+                  text: heading,
+                  className: `truncate text-sm font-medium ${reserved ? "text-muted-foreground" : "text-foreground"}`
+                }
+              ) : reserved ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-muted-foreground", children: kind ? formatKindLabel(kind) : "Coming up" }) : /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-40" }),
+              reserved ? null : /* @__PURE__ */ jsx(Loader2, { className: `h-3 w-3 shrink-0 animate-spin ${t.spin}` })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 min-h-4 truncate text-xs text-muted-foreground", children: reserved ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70", children: "Coming up" }) : sub ? /* @__PURE__ */ jsx(Reveal, { text: sub }) : null }),
+            loadingSubtext && !reserved && sub !== loadingSubtext ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground/70", children: /* @__PURE__ */ jsx(Reveal, { text: loadingSubtext }) }) : null
+          ] })
+        ] }),
+        children
+      ]
+    }
+  ) });
+};
+function formatKindLabel(kind) {
+  return humanizeIdentifier(kind) || kind;
+}
+const CardLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: LayoutGrid, tone: "violet", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-3 w-2/3" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-3 w-1/2" }),
+  /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-5 w-16 rounded-full bg-violet-500/15" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-5 w-20 rounded-full" })
+  ] })
+] }) });
+const ListLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: ListChecks, tone: "sky", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: clampCount(p.count, 4) }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-3.5 rounded-sm bg-sky-500/20" }),
+  /* @__PURE__ */ jsx(Sk, { className: `h-3 ${i % 2 ? "w-1/2" : "w-2/3"}` })
+] }, i)) }) });
+const TableLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: TableIcon, tone: "indigo", children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border/60", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex gap-px bg-indigo-500/10 p-2", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Sk, { className: "h-3 flex-1 bg-indigo-500/20" }, i)) }),
+  Array.from({ length: clampCount(p.count, 3, 6) }).map((_, r) => /* @__PURE__ */ jsx("div", { className: "flex gap-px border-t border-border/40 p-2", children: [0, 1, 2, 3].map((c) => /* @__PURE__ */ jsx(Sk, { className: "h-2.5 flex-1" }, c)) }, r))
+] }) });
+const TimelineLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: TimerReset, tone: "amber", children: /* @__PURE__ */ jsx("div", { className: "space-y-3 pl-1", children: Array.from({ length: clampCount(p.count, 4, 6) }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-2.5 rounded-full bg-amber-500/40" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 h-6 w-px bg-amber-500/25" })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-1/3" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-2/3" })
+  ] })
+] }, i)) }) });
+const ChartLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: BarChart3, tone: "emerald", children: /* @__PURE__ */ jsx("div", { className: "flex h-24 items-end gap-2 px-1", children: [40, 70, 55, 90, 62, 78, 45].map((h, i) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: `flex-1 rounded-t ${pulse(p)} ${i % 2 ? "bg-emerald-500/20" : "bg-emerald-500/30"}`,
+    style: { height: `${h}%` }
+  },
+  i
+)) }) });
+const DeckLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: Presentation, tone: "fuchsia", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+  /* @__PURE__ */ jsxs("div", { className: "aspect-video flex-[3] space-y-2 rounded-md border border-fuchsia-500/25 bg-fuchsia-500/[0.04] p-3", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-1/2 bg-fuchsia-500/20" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-3/4" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-2/3" })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Sk, { className: "aspect-video w-full rounded-md" }, i)) })
+] }) });
+const FormLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: TextCursorInput, tone: "cyan", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: clampCount(p.count, 3, 5) }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-24 bg-cyan-500/20" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-8 w-full rounded-md" })
+] }, i)) }) });
+const MediaLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: ImageIcon, tone: "pink", children: /* @__PURE__ */ jsx("div", { className: "flex aspect-video w-full items-center justify-center rounded-md bg-gradient-to-br from-pink-500/10 via-muted/60 to-muted/60", children: /* @__PURE__ */ jsx(ImageIcon, { className: `h-6 w-6 ${pulse(p)} text-pink-500/50` }) }) });
+const StatGridLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: TrendingUp, tone: "lime", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: Array.from({ length: clampCount(p.count, 4, 8) }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 rounded-md border border-border/60 p-3", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-14" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-5 w-10 bg-lime-500/25" })
+] }, i)) }) });
+const DocumentLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: FileText, tone: "orange", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-1/3 bg-orange-500/20" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-full" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-11/12" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-4/5" }),
+  /* @__PURE__ */ jsx(Sk, { className: "mt-3 h-3.5 w-1/4 bg-orange-500/20" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-full" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-3/4" })
+] }) });
+const FlashcardsLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: Layers, tone: "violet", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex aspect-[16/9] w-full flex-col items-center justify-center gap-2 rounded-lg border border-violet-500/25 bg-violet-500/[0.04] p-4", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-2/5" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-3/5" })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1.5", children: Array.from({ length: clampCount(p.count, 5, 8) }).map((_, i) => /* @__PURE__ */ jsx(
+    Sk,
+    {
+      className: `h-1.5 w-1.5 rounded-full ${i === 0 ? "bg-violet-500/50" : ""}`
+    },
+    i
+  )) })
+] }) });
+const QuizLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: CircleHelp, tone: "blue", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Array.from({ length: clampCount(p.count, 2, 4) }).map((_, q) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "mt-0.5 h-4 w-4 shrink-0 rounded-full bg-blue-500/25" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-3/4" })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "space-y-1.5 pl-6", children: [0, 1, 2, 3].map((o) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-3 shrink-0 rounded-full bg-blue-500/15" }),
+    /* @__PURE__ */ jsx(Sk, { className: `h-2.5 ${["w-2/3", "w-1/2", "w-3/5", "w-5/12"][o]}` })
+  ] }, o)) })
+] }, q)) }) });
+const NotesLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: NotebookPen, tone: "teal", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+  /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-full" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-11/12" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-3/4" })
+  ] }),
+  Array.from({ length: clampCount(p.count, 2, 4) }).map((_, section) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-1/3 bg-teal-500/20" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-full" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 pl-4", children: [0, 1, 2].map((point) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Sk, { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-teal-500/40" }),
+      /* @__PURE__ */ jsx(Sk, { className: `h-2.5 ${["w-3/4", "w-2/3", "w-4/5"][point]}` })
+    ] }, point)) })
+  ] }, section))
+] }) });
+const DiagramLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: Network, tone: "indigo", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-2", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-8 w-28 rounded-md bg-indigo-500/15" }),
+  /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-indigo-500/30" }),
+  /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-8 w-24 rounded-md" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-8 w-24 rounded-md" })
+  ] })
+] }) });
+const ChatLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: MessagesSquare, tone: "sky", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx(Sk, { className: "h-8 w-1/2 rounded-lg rounded-bl-sm" }) }),
+  /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Sk, { className: "h-8 w-2/5 rounded-lg rounded-br-sm bg-sky-500/15" }) }),
+  /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx(Sk, { className: "h-8 w-3/5 rounded-lg rounded-bl-sm" }) })
+] }) });
+const GalleryLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: GalleryHorizontalEnd, tone: "pink", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: clampCount(p.count, 6, 9) }).map((_, i) => /* @__PURE__ */ jsx(
+  Sk,
+  {
+    className: `aspect-square w-full rounded-md ${i === 0 ? "bg-pink-500/15" : ""}`
+  },
+  i
+)) }) });
+const KanbanLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: Kanban, tone: "amber", children: /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [0, 1, 2].map((col) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `flex-1 space-y-2 rounded-md p-2 ${col === 0 ? "bg-amber-500/10" : "bg-muted/40"}`,
+    children: [
+      /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-16" }),
+      /* @__PURE__ */ jsx(Sk, { className: "h-10 w-full rounded-md" }),
+      col !== 2 ? /* @__PURE__ */ jsx(Sk, { className: "h-10 w-full rounded-md" }) : null
+    ]
+  },
+  col
+)) }) });
+const TreeLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: GitBranch, tone: "emerald", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-3.5 rounded-sm bg-emerald-500/25" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-1/3" })
+  ] }),
+  [0, 1].map((i) => /* @__PURE__ */ jsxs("div", { className: "ml-5 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-3.5 rounded-sm bg-emerald-500/15" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-2/5" })
+  ] }, i)),
+  /* @__PURE__ */ jsxs("div", { className: "ml-10 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-3.5 w-3.5 rounded-sm" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-3 w-1/4" })
+  ] })
+] }) });
+const CodeLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: Code2, tone: "cyan", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 rounded-md bg-muted/40 p-3 font-mono", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-1/3 bg-cyan-500/25" }),
+  /* @__PURE__ */ jsx(Sk, { className: "ml-4 h-2.5 w-1/2" }),
+  /* @__PURE__ */ jsx(Sk, { className: "ml-4 h-2.5 w-2/5 bg-fuchsia-500/15" }),
+  /* @__PURE__ */ jsx(Sk, { className: "ml-8 h-2.5 w-1/3" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-1/6 bg-cyan-500/25" })
+] }) });
+const MapLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: MapIcon, tone: "emerald", children: /* @__PURE__ */ jsxs("div", { className: "relative flex aspect-[2/1] w-full items-center justify-center overflow-hidden rounded-md bg-gradient-to-br from-emerald-500/10 via-muted/50 to-muted/50", children: [
+  /* @__PURE__ */ jsx(MapIcon, { className: `h-6 w-6 ${pulse(p)} text-emerald-500/50` }),
+  /* @__PURE__ */ jsx(Sk, { className: "absolute left-1/4 top-1/3 h-2.5 w-2.5 rounded-full bg-rose-500/50" }),
+  /* @__PURE__ */ jsx(Sk, { className: "absolute right-1/3 top-1/2 h-2.5 w-2.5 rounded-full bg-rose-500/40" }),
+  /* @__PURE__ */ jsx(Sk, { className: "absolute bottom-1/4 left-1/2 h-2.5 w-2.5 rounded-full bg-rose-500/30" })
+] }) });
+const ProgressLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: TrendingUp, tone: "blue", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: clampCount(p.count, 3, 5) }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-24" }),
+    /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-8" })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `h-full rounded-full bg-blue-500/40 ${pulse(p)}`,
+      style: { width: `${[62, 38, 80, 25, 55][i % 5]}%` }
+    }
+  ) })
+] }, i)) }) });
+const MinimalLoading = (p) => {
+  const reserved = p.phase === "reserved";
+  const label = p.title ?? p.loadingMessage;
+  return /* @__PURE__ */ jsx(PhaseContext.Provider, { value: p.phase ?? "arriving", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `my-2 inline-flex items-center gap-2 rounded-md border px-3 py-1.5 ${reserved ? "border-dashed border-border/70 bg-card/40" : "border-border bg-card/50"}`,
+      "aria-busy": reserved ? void 0 : "true",
+      role: "status",
+      "data-kind-loading": p.kind ?? "unknown",
+      "data-kind-loading-phase": p.phase ?? "arriving",
+      children: [
+        reserved ? /* @__PURE__ */ jsx(Dot, { className: "h-3 w-3 animate-[kind-slot-breathe_3.2s_ease-in-out_infinite] text-violet-500/70" }) : /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-violet-500" }),
+        label ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: label }) : reserved ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Coming up" }) : /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-28" })
+      ]
+    }
+  ) });
+};
+const GenericLoading = (p) => /* @__PURE__ */ jsx(Shell, { ...p, defaultIcon: Shapes, tone: "violet", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-2/3" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-1/2 bg-violet-500/10" }),
+  /* @__PURE__ */ jsx(Sk, { className: "h-2.5 w-5/6" })
+] }) });
+export {
+  CardLoading,
+  ChartLoading,
+  ChatLoading,
+  CodeLoading,
+  DeckLoading,
+  DiagramLoading,
+  DocumentLoading,
+  FlashcardsLoading,
+  FormLoading,
+  GalleryLoading,
+  GenericLoading,
+  ICON_HINTS,
+  KanbanLoading,
+  ListLoading,
+  MapLoading,
+  MediaLoading,
+  MinimalLoading,
+  NotesLoading,
+  ProgressLoading,
+  QuizLoading,
+  StatGridLoading,
+  TableLoading,
+  TimelineLoading,
+  TreeLoading
+};

package/dist/kinds/react/loading/kind-loading-registry.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The kind loading-component registry — slug → hardcoded loader.
+ *
+ * Selection: `kind_definition.metadata.loading_component` names one of these
+ * slugs; missing/unknown slugs resolve to the `generic` skeleton. The studio
+ * / creator agent sets the slug at authoring time; this module only READS it.
+ *
+ * The library is intentionally hardcoded (zero fetch delay — it must render
+ * the instant a cloud kind is identified, before any DB answer) and light.
+ * Growing it = add the component in kind-loading-components.tsx + one row
+ * here + document the slug in SHAPE_SYSTEM.md.
+ */
+import type React from "react";
+import type { KindLoadingProps } from "./kind-loading.types.js";
+export { DEFAULT_KIND_LOADING_SLUG, KIND_LOADING_SLUGS } from "./kind-loading-slugs.js";
+export declare const KIND_LOADING_COMPONENTS: Readonly<Record<string, React.ComponentType<KindLoadingProps>>>;
+/**
+ * Resolve a loading component: the kind's declared slug, else the generic
+ * default. Never null — the loading layer must always have something to show.
+ */
+export declare function resolveKindLoadingComponent(slug: string | null | undefined): React.ComponentType<KindLoadingProps>;

package/dist/kinds/react/loading/kind-loading-registry.js

@@ -0,0 +1,62 @@
+"use client";
+import {
+  CardLoading,
+  ChartLoading,
+  ChatLoading,
+  CodeLoading,
+  DeckLoading,
+  DiagramLoading,
+  DocumentLoading,
+  FlashcardsLoading,
+  FormLoading,
+  GalleryLoading,
+  GenericLoading,
+  KanbanLoading,
+  ListLoading,
+  MapLoading,
+  MediaLoading,
+  MinimalLoading,
+  NotesLoading,
+  ProgressLoading,
+  QuizLoading,
+  StatGridLoading,
+  TableLoading,
+  TimelineLoading,
+  TreeLoading
+} from "./kind-loading-components.js";
+import { DEFAULT_KIND_LOADING_SLUG, KIND_LOADING_SLUGS } from "./kind-loading-slugs.js";
+const KIND_LOADING_COMPONENTS_EXACT = {
+  card: CardLoading,
+  list: ListLoading,
+  table: TableLoading,
+  timeline: TimelineLoading,
+  chart: ChartLoading,
+  deck: DeckLoading,
+  flashcards: FlashcardsLoading,
+  quiz: QuizLoading,
+  notes: NotesLoading,
+  form: FormLoading,
+  media: MediaLoading,
+  "stat-grid": StatGridLoading,
+  document: DocumentLoading,
+  diagram: DiagramLoading,
+  chat: ChatLoading,
+  gallery: GalleryLoading,
+  kanban: KanbanLoading,
+  tree: TreeLoading,
+  code: CodeLoading,
+  map: MapLoading,
+  progress: ProgressLoading,
+  minimal: MinimalLoading,
+  generic: GenericLoading
+};
+const KIND_LOADING_COMPONENTS = KIND_LOADING_COMPONENTS_EXACT;
+function resolveKindLoadingComponent(slug) {
+  return (slug ? KIND_LOADING_COMPONENTS[slug] : void 0) ?? GenericLoading;
+}
+export {
+  DEFAULT_KIND_LOADING_SLUG,
+  KIND_LOADING_COMPONENTS,
+  KIND_LOADING_SLUGS,
+  resolveKindLoadingComponent
+};

package/dist/kinds/react/loading/kind-loading-slugs.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The kind loading-component LIBRARY SLUGS — the pure half of the loading
+ * registry, importable anywhere (shape doctor, CLI, server) without pulling
+ * React or the components themselves.
+ *
+ * ONE SOURCE OF TRUTH: `kind-loading-registry.ts` types its component map as
+ * `Record<KindLoadingSlug, …>`, so a slug added here without a component (or
+ * vice versa) is a compile error, never silent drift.
+ *
+ * A `kind_definition.metadata.loading_component` (or a compiled definition's
+ * `loadingComponent`) naming a slug NOT in this list silently falls back to
+ * the `generic` skeleton at runtime — that is the defect the shape doctor's
+ * `loading` column screams about (`unknown-loading-component`).
+ */
+export declare const KIND_LOADING_SLUGS: readonly ["card", "list", "table", "timeline", "chart", "deck", "flashcards", "quiz", "notes", "form", "media", "stat-grid", "document", "diagram", "chat", "gallery", "kanban", "tree", "code", "map", "progress", "minimal", "generic"];
+export type KindLoadingSlug = (typeof KIND_LOADING_SLUGS)[number];
+export declare const DEFAULT_KIND_LOADING_SLUG: "generic";
+export declare function isKnownKindLoadingSlug(slug: string): slug is KindLoadingSlug;

package/dist/kinds/react/loading/kind-loading-slugs.js

@@ -0,0 +1,34 @@
+const KIND_LOADING_SLUGS = [
+  "card",
+  "list",
+  "table",
+  "timeline",
+  "chart",
+  "deck",
+  "flashcards",
+  "quiz",
+  "notes",
+  "form",
+  "media",
+  "stat-grid",
+  "document",
+  "diagram",
+  "chat",
+  "gallery",
+  "kanban",
+  "tree",
+  "code",
+  "map",
+  "progress",
+  "minimal",
+  "generic"
+];
+const DEFAULT_KIND_LOADING_SLUG = "generic";
+function isKnownKindLoadingSlug(slug) {
+  return KIND_LOADING_SLUGS.includes(slug);
+}
+export {
+  DEFAULT_KIND_LOADING_SLUG,
+  KIND_LOADING_SLUGS,
+  isKnownKindLoadingSlug
+};