@hex-core/components 1.6.0 → 1.8.0

package/dist/deck.js

@@ -0,0 +1,231 @@
+"use client";
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Flashcard({
+  front,
+  back,
+  defaultFlipped = false,
+  flipped: flippedProp,
+  onFlipChange,
+  width = 360,
+  height = 240,
+  flipDurationMs = 500,
+  className,
+  ...rest
+}) {
+  const [internalFlipped, setInternalFlipped] = React2.useState(defaultFlipped);
+  const isControlled = flippedProp !== void 0;
+  const flipped = isControlled ? flippedProp : internalFlipped;
+  const toggle = React2.useCallback(() => {
+    const next = !flipped;
+    if (!isControlled) setInternalFlipped(next);
+    onFlipChange?.(next);
+  }, [flipped, isControlled, onFlipChange]);
+  const handleKey = React2.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    [toggle]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-flashcard": true,
+      "data-flipped": flipped,
+      role: "button",
+      tabIndex: 0,
+      "aria-pressed": flipped,
+      "aria-label": flipped ? "Flashcard, back side. Activate to flip to front." : "Flashcard, front side. Activate to reveal back.",
+      onClick: toggle,
+      onKeyDown: handleKey,
+      className: cn(
+        "relative inline-block cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      style: {
+        width,
+        height,
+        perspective: 1e3
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-hex-flashcard-inner": true,
+          className: "relative h-full w-full transition-transform",
+          style: {
+            transformStyle: "preserve-3d",
+            transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
+            transitionDuration: `${flipDurationMs}ms`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hex-flashcard-face": true,
+                "data-side": "front",
+                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
+                style: {
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden"
+                },
+                children: front
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hex-flashcard-face": true,
+                "data-side": "back",
+                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
+                style: {
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden",
+                  transform: "rotateY(180deg)"
+                },
+                children: back
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function shuffleArray(arr) {
+  const out = arr.slice();
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+function Deck({
+  cards,
+  shuffle = false,
+  ratingSlot,
+  onCardChange,
+  cardWidth = 360,
+  cardHeight = 240,
+  className,
+  ...rest
+}) {
+  const order = React2.useMemo(() => shuffle ? shuffleArray(cards) : cards.slice(), [cards, shuffle]);
+  const [index, setIndex] = React2.useState(0);
+  const [flipped, setFlipped] = React2.useState(false);
+  const onCardChangeRef = React2.useRef(onCardChange);
+  onCardChangeRef.current = onCardChange;
+  React2.useEffect(() => {
+    setIndex(0);
+    setFlipped(false);
+  }, [order]);
+  const total = order.length;
+  const currentCard = order[index];
+  const goPrev = React2.useCallback(() => {
+    if (index === 0) return;
+    const next = index - 1;
+    setIndex(next);
+    setFlipped(false);
+    const card = order[next];
+    if (card) onCardChangeRef.current?.(next, card);
+  }, [index, order]);
+  const goNext = React2.useCallback(() => {
+    if (index >= total - 1) return;
+    const next = index + 1;
+    setIndex(next);
+    setFlipped(false);
+    const card = order[next];
+    if (card) onCardChangeRef.current?.(next, card);
+  }, [index, order, total]);
+  if (total === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        "data-hex-deck": true,
+        "data-empty": "true",
+        className: cn("rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", className),
+        children: "No cards in this deck."
+      }
+    );
+  }
+  const progressPercent = total > 0 ? (index + 1) / total * 100 : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-hex-deck": true,
+      "data-index": index,
+      "data-total": total,
+      className: cn("inline-flex flex-col items-center gap-4", className),
+      children: [
+        currentCard ? /* @__PURE__ */ jsx(
+          Flashcard,
+          {
+            front: currentCard.front,
+            back: currentCard.back,
+            flipped,
+            onFlipChange: setFlipped,
+            width: cardWidth,
+            height: cardHeight
+          },
+          currentCard.id
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { "data-hex-deck-controls": true, className: "flex w-full items-center gap-3", style: { width: cardWidth }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-hex-deck-prev": true,
+              disabled: index === 0,
+              onClick: goPrev,
+              "aria-label": `Previous card. Currently ${index + 1} of ${total}.`,
+              className: "inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: "Prev"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { "data-hex-deck-progress": true, className: "flex-1", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary transition-all",
+                style: { width: `${progressPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-center text-xs text-muted-foreground", children: [
+              index + 1,
+              " / ",
+              total
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-hex-deck-next": true,
+              disabled: index >= total - 1,
+              onClick: goNext,
+              "aria-label": `Next card. Currently ${index + 1} of ${total}.`,
+              className: "inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: "Next"
+            }
+          )
+        ] }),
+        ratingSlot && currentCard ? /* @__PURE__ */ jsx("div", { "data-hex-deck-rating-slot": true, className: "w-full", style: { width: cardWidth }, children: ratingSlot(currentCard) }) : null
+      ]
+    }
+  );
+}
+
+export { Deck };
+//# sourceMappingURL=deck.js.map
+//# sourceMappingURL=deck.js.map

package/dist/deck.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/artifacts/flashcard/flashcard.tsx","../src/artifacts/deck/deck.tsx"],"names":["React","jsx","jsxs"],"mappings":"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","file":"deck.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * Flashcard — front/back card with a 3D flip animation. Click, Enter, or\n * Space to flip. Pure CSS 3D transform, no animation peer required.\n *\n * Headless on content: pass any ReactNode for `front` and `back`. Pair\n * with Deck (artifacts/deck) for shuffle / next / prev / progress, or\n * with SpacedRepetition (artifacts/spaced-repetition) for confidence\n * rating after each reveal.\n *\n * @example\n * <Flashcard\n *   front={<>What is the capital of France?</>}\n *   back={<>Paris</>}\n * />\n *\n * <Flashcard\n *   flipped={isFlipped}\n *   onFlipChange={setFlipped}\n *   front={term}\n *   back={definition}\n * />\n */\nexport interface FlashcardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Content of the front face. */\n\tfront: React.ReactNode;\n\t/** Content of the back face. */\n\tback: React.ReactNode;\n\t/** Uncontrolled initial flipped state. Default false. */\n\tdefaultFlipped?: boolean;\n\t/** Controlled flipped state. */\n\tflipped?: boolean;\n\t/** Fired with the new flipped value when the user toggles. */\n\tonFlipChange?: (flipped: boolean) => void;\n\t/** Pixel width. Default 360. */\n\twidth?: number;\n\t/** Pixel height. Default 240. */\n\theight?: number;\n\t/** Flip animation duration in ms. Default 500. Set to 0 to disable the animation entirely. */\n\tflipDurationMs?: number;\n}\n\nfunction Flashcard({\n\tfront,\n\tback,\n\tdefaultFlipped = false,\n\tflipped: flippedProp,\n\tonFlipChange,\n\twidth = 360,\n\theight = 240,\n\tflipDurationMs = 500,\n\tclassName,\n\t...rest\n}: FlashcardProps) {\n\tconst [internalFlipped, setInternalFlipped] = React.useState(defaultFlipped);\n\tconst isControlled = flippedProp !== undefined;\n\tconst flipped = isControlled ? flippedProp : internalFlipped;\n\n\tconst toggle = React.useCallback(() => {\n\t\tconst next = !flipped;\n\t\tif (!isControlled) setInternalFlipped(next);\n\t\tonFlipChange?.(next);\n\t}, [flipped, isControlled, onFlipChange]);\n\n\tconst handleKey = React.useCallback(\n\t\t(e: React.KeyboardEvent) => {\n\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\te.preventDefault();\n\t\t\t\ttoggle();\n\t\t\t}\n\t\t},\n\t\t[toggle],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tdata-hex-flashcard\n\t\t\tdata-flipped={flipped}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\taria-pressed={flipped}\n\t\t\taria-label={flipped ? \"Flashcard, back side. Activate to flip to front.\" : \"Flashcard, front side. Activate to reveal back.\"}\n\t\t\tonClick={toggle}\n\t\t\tonKeyDown={handleKey}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative inline-block cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t\tperspective: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tdata-hex-flashcard-inner\n\t\t\t\tclassName=\"relative h-full w-full transition-transform\"\n\t\t\t\tstyle={{\n\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t\ttransform: flipped ? \"rotateY(180deg)\" : \"rotateY(0deg)\",\n\t\t\t\t\ttransitionDuration: `${flipDurationMs}ms`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-hex-flashcard-face\n\t\t\t\t\tdata-side=\"front\"\n\t\t\t\t\tclassName=\"absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackfaceVisibility: \"hidden\",\n\t\t\t\t\t\tWebkitBackfaceVisibility: \"hidden\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{front}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tdata-hex-flashcard-face\n\t\t\t\t\tdata-side=\"back\"\n\t\t\t\t\tclassName=\"absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackfaceVisibility: \"hidden\",\n\t\t\t\t\t\tWebkitBackfaceVisibility: \"hidden\",\n\t\t\t\t\t\ttransform: \"rotateY(180deg)\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{back}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport { Flashcard };\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport { Flashcard } from \"../flashcard/flashcard.js\";\n\n/**\n * Deck — a paged sequence of flashcards with optional shuffle, prev/next\n * navigation, a progress bar, and a slot for per-card SRS rating.\n * Composes [Flashcard] internally; consumers don't render Flashcard\n * themselves when they're inside a Deck.\n *\n * @example\n * <Deck\n *   cards={[\n *     { id: \"1\", front: \"Term 1\", back: \"Definition 1\" },\n *     { id: \"2\", front: \"Term 2\", back: \"Definition 2\" },\n *   ]}\n *   shuffle\n *   ratingSlot={(card) => (\n *     <SpacedRepetition cardId={card.id} onRate={(rating) => save(rating, card.id)} />\n *   )}\n * />\n */\nexport type DeckCard = {\n\tid: string;\n\tfront: React.ReactNode;\n\tback: React.ReactNode;\n};\n\nexport interface DeckProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Cards in order. */\n\tcards: DeckCard[];\n\t/** Initial shuffle. Default false (preserves order). */\n\tshuffle?: boolean;\n\t/** Optional render slot below the card; passed the current card. Useful for SpacedRepetition. */\n\tratingSlot?: (card: DeckCard) => React.ReactNode;\n\t/** Fired whenever the active card changes (after shuffle / prev / next). */\n\tonCardChange?: (index: number, card: DeckCard) => void;\n\t/** Pixel width of the inner Flashcard. Default 360. */\n\tcardWidth?: number;\n\t/** Pixel height of the inner Flashcard. Default 240. */\n\tcardHeight?: number;\n}\n\nfunction shuffleArray<T>(arr: T[]): T[] {\n\t// Fisher-Yates. Cheap and deterministic-shape (just non-deterministic\n\t// order on each call). Consumers wanting reproducibility wire their own\n\t// pre-shuffled array and pass `shuffle={false}`.\n\tconst out = arr.slice();\n\tfor (let i = out.length - 1; i > 0; i--) {\n\t\tconst j = Math.floor(Math.random() * (i + 1));\n\t\t[out[i], out[j]] = [out[j], out[i]];\n\t}\n\treturn out;\n}\n\nfunction Deck({\n\tcards,\n\tshuffle = false,\n\tratingSlot,\n\tonCardChange,\n\tcardWidth = 360,\n\tcardHeight = 240,\n\tclassName,\n\t...rest\n}: DeckProps) {\n\t// Order is recomputed only when `cards` identity OR `shuffle` flips —\n\t// not on every prev/next, so the user never gets re-shuffled mid-session.\n\tconst order = React.useMemo(() => (shuffle ? shuffleArray(cards) : cards.slice()), [cards, shuffle]);\n\tconst [index, setIndex] = React.useState(0);\n\tconst [flipped, setFlipped] = React.useState(false);\n\tconst onCardChangeRef = React.useRef(onCardChange);\n\tonCardChangeRef.current = onCardChange;\n\n\t// Reset to the first card when the order changes (cards swap, shuffle toggles).\n\tReact.useEffect(() => {\n\t\tsetIndex(0);\n\t\tsetFlipped(false);\n\t}, [order]);\n\n\tconst total = order.length;\n\tconst currentCard = order[index];\n\n\tconst goPrev = React.useCallback(() => {\n\t\tif (index === 0) return;\n\t\tconst next = index - 1;\n\t\tsetIndex(next);\n\t\tsetFlipped(false);\n\t\tconst card = order[next];\n\t\tif (card) onCardChangeRef.current?.(next, card);\n\t}, [index, order]);\n\n\tconst goNext = React.useCallback(() => {\n\t\tif (index >= total - 1) return;\n\t\tconst next = index + 1;\n\t\tsetIndex(next);\n\t\tsetFlipped(false);\n\t\tconst card = order[next];\n\t\tif (card) onCardChangeRef.current?.(next, card);\n\t}, [index, order, total]);\n\n\tif (total === 0) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tdata-hex-deck\n\t\t\t\tdata-empty=\"true\"\n\t\t\t\tclassName={cn(\"rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground\", className)}\n\t\t\t>\n\t\t\t\tNo cards in this deck.\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst progressPercent = total > 0 ? ((index + 1) / total) * 100 : 0;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tdata-hex-deck\n\t\t\tdata-index={index}\n\t\t\tdata-total={total}\n\t\t\tclassName={cn(\"inline-flex flex-col items-center gap-4\", className)}\n\t\t>\n\t\t\t{currentCard ? (\n\t\t\t\t<Flashcard\n\t\t\t\t\tkey={currentCard.id}\n\t\t\t\t\tfront={currentCard.front}\n\t\t\t\t\tback={currentCard.back}\n\t\t\t\t\tflipped={flipped}\n\t\t\t\t\tonFlipChange={setFlipped}\n\t\t\t\t\twidth={cardWidth}\n\t\t\t\t\theight={cardHeight}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t<div data-hex-deck-controls className=\"flex w-full items-center gap-3\" style={{ width: cardWidth }}>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-hex-deck-prev\n\t\t\t\t\tdisabled={index === 0}\n\t\t\t\t\tonClick={goPrev}\n\t\t\t\t\taria-label={`Previous card. Currently ${index + 1} of ${total}.`}\n\t\t\t\t\tclassName=\"inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n\t\t\t\t>\n\t\t\t\t\tPrev\n\t\t\t\t</button>\n\t\t\t\t<div data-hex-deck-progress className=\"flex-1\" aria-hidden=\"true\">\n\t\t\t\t\t<div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"h-full bg-primary transition-all\"\n\t\t\t\t\t\t\tstyle={{ width: `${progressPercent}%` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"mt-1 text-center text-xs text-muted-foreground\">\n\t\t\t\t\t\t{index + 1} / {total}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-hex-deck-next\n\t\t\t\t\tdisabled={index >= total - 1}\n\t\t\t\t\tonClick={goNext}\n\t\t\t\t\taria-label={`Next card. Currently ${index + 1} of ${total}.`}\n\t\t\t\t\tclassName=\"inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n\t\t\t\t>\n\t\t\t\t\tNext\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t{ratingSlot && currentCard ? (\n\t\t\t\t<div data-hex-deck-rating-slot className=\"w-full\" style={{ width: cardWidth }}>\n\t\t\t\t\t{ratingSlot(currentCard)}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nexport { Deck };\n"]}

package/dist/dendrogram.d.ts

@@ -0,0 +1,3 @@
+export { DendrogramNode_alias_1 as DendrogramNode } from './_tsup-dts-rollup.js';
+export { DendrogramProps_alias_1 as DendrogramProps } from './_tsup-dts-rollup.js';
+export { Dendrogram_alias_1 as Dendrogram } from './_tsup-dts-rollup.js';

package/dist/dendrogram.js

@@ -0,0 +1,162 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Dendrogram({
+  root,
+  orientation = "horizontal",
+  linkShape = "step",
+  width = 600,
+  height = 400,
+  onLeafClick,
+  className,
+  ...rest
+}) {
+  const [d3h, setD3h] = React.useState(null);
+  React.useEffect(() => {
+    let cancelled = false;
+    void import('d3-hierarchy').then((mod) => {
+      if (!cancelled) setD3h(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  if (!d3h) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-dendrogram-loading": true,
+        "aria-busy": "true",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width, height }
+      }
+    );
+  }
+  const { nodes, links } = layout(d3h, root, orientation, width, height);
+  const leafCount = nodes.filter((n) => n.isLeaf).length;
+  const desc = `Dendrogram with ${leafCount} leaves, rooted at "${root.label}"`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-dendrogram": true,
+      "data-orientation": orientation,
+      "data-link-shape": linkShape,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Dendrogram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-dendrogram-links": true, children: links.map((l) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: linkPath(l, orientation, linkShape),
+            fill: "none",
+            stroke: "hsl(var(--muted-foreground))",
+            strokeOpacity: 0.8,
+            strokeWidth: 1
+          },
+          l.id
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-dendrogram-nodes": true, children: nodes.map((n) => /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-hex-dendrogram-node": true,
+            "data-leaf": n.isLeaf ? "true" : "false",
+            "data-depth": n.depth,
+            transform: `translate(${n.x},${n.y})`,
+            style: n.isLeaf && onLeafClick ? { cursor: "pointer" } : void 0,
+            onClick: n.isLeaf && onLeafClick ? () => onLeafClick(n.node) : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  r: n.isLeaf ? 3 : 2,
+                  fill: n.isLeaf ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))"
+                }
+              ),
+              n.isLeaf ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: orientation === "horizontal" ? 6 : 0,
+                  y: orientation === "horizontal" ? 4 : 14,
+                  textAnchor: orientation === "horizontal" ? "start" : "middle",
+                  fontSize: 11,
+                  fill: "hsl(var(--foreground))",
+                  style: { paintOrder: "stroke" },
+                  stroke: "hsl(var(--background))",
+                  strokeWidth: 3,
+                  strokeLinejoin: "round",
+                  children: n.node.label
+                }
+              ) : null
+            ]
+          },
+          n.node.id
+        )) })
+      ]
+    }
+  );
+}
+function layout(d3h, root, orientation, width, height) {
+  const hierarchy = d3h.hierarchy(root);
+  const clusterFn = d3h.cluster();
+  if (orientation === "horizontal") {
+    clusterFn.size([height - 32, width - 120]);
+  } else {
+    clusterFn.size([width - 32, height - 64]);
+  }
+  const layoutRoot = clusterFn(hierarchy);
+  const nodes = [];
+  layoutRoot.each((d) => {
+    const isLeaf = !d.children || d.children.length === 0;
+    if (orientation === "horizontal") {
+      nodes.push({ node: d.data, x: d.y + 16, y: d.x + 16, depth: d.depth, isLeaf });
+    } else {
+      nodes.push({ node: d.data, x: d.x + 16, y: d.y + 16, depth: d.depth, isLeaf });
+    }
+  });
+  const links = layoutRoot.links().map((link, i) => {
+    if (orientation === "horizontal") {
+      return {
+        source: { x: link.source.y + 16, y: link.source.x + 16 },
+        target: { x: link.target.y + 16, y: link.target.x + 16 },
+        id: `l-${i}`
+      };
+    }
+    return {
+      source: { x: link.source.x + 16, y: link.source.y + 16 },
+      target: { x: link.target.x + 16, y: link.target.y + 16 },
+      id: `l-${i}`
+    };
+  });
+  return { nodes, links };
+}
+function linkPath(link, orientation, linkShape) {
+  const { source: s, target: t } = link;
+  if (linkShape === "step") {
+    if (orientation === "horizontal") {
+      return `M${s.x},${s.y} H${t.x} V${t.y}`;
+    }
+    return `M${s.x},${s.y} V${t.y} H${t.x}`;
+  }
+  if (orientation === "horizontal") {
+    const mx = (s.x + t.x) / 2;
+    return `M${s.x},${s.y} C${mx},${s.y} ${mx},${t.y} ${t.x},${t.y}`;
+  }
+  const my = (s.y + t.y) / 2;
+  return `M${s.x},${s.y} C${s.x},${my} ${t.x},${my} ${t.x},${t.y}`;
+}
+
+export { Dendrogram };
+//# sourceMappingURL=dendrogram.js.map
+//# sourceMappingURL=dendrogram.js.map

package/dist/dendrogram.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/artifacts/dendrogram/dendrogram.tsx"],"names":[],"mappings":"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","file":"dendrogram.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * Clustering tree where every leaf sits at the same depth, regardless of\n * branch length — the visual signature of taxonomies, phylogenetic trees,\n * and hierarchical-clustering output. Backed by d3-hierarchy's `cluster`\n * layout (distinct from `tree`, which packs leaves variably).\n *\n * Heavy peer: requires `d3-hierarchy` (~3 KB gzip).\n *\n * @example\n * <Dendrogram\n *   root={{\n *     id: \"root\", label: \"Animals\",\n *     children: [\n *       { id: \"mammals\", label: \"Mammals\", children: [\n *         { id: \"cat\", label: \"Cat\" },\n *         { id: \"dog\", label: \"Dog\" },\n *       ]},\n *       { id: \"birds\", label: \"Birds\", children: [{ id: \"robin\", label: \"Robin\" }] },\n *     ],\n *   }}\n * />\n */\nexport type DendrogramNode = {\n\tid: string;\n\tlabel: string;\n\tchildren?: DendrogramNode[];\n};\n\nexport interface DendrogramProps extends Omit<React.SVGAttributes<SVGSVGElement>, \"children\"> {\n\t/** Root of the hierarchy. */\n\troot: DendrogramNode;\n\t/** \"horizontal\" runs root-to-leaves left→right; \"vertical\" runs top→bottom. Default \"horizontal\". */\n\torientation?: \"horizontal\" | \"vertical\";\n\t/** \"step\" draws right-angle elbow links (taxonomy aesthetic); \"diagonal\" uses smooth Bezier. Default \"step\". */\n\tlinkShape?: \"step\" | \"diagonal\";\n\t/** Pixel width of the rendered SVG. Default 600. */\n\twidth?: number;\n\t/** Pixel height of the rendered SVG. Default 400. */\n\theight?: number;\n\t/** Fired when a leaf is clicked. */\n\tonLeafClick?: (node: DendrogramNode) => void;\n}\n\ninterface LaidOutNode {\n\tnode: DendrogramNode;\n\tx: number;\n\ty: number;\n\tdepth: number;\n\tisLeaf: boolean;\n}\n\ninterface LaidOutLink {\n\tsource: { x: number; y: number };\n\ttarget: { x: number; y: number };\n\tid: string;\n}\n\ntype D3HierarchyMod = typeof import(\"d3-hierarchy\");\n\nfunction Dendrogram({\n\troot,\n\torientation = \"horizontal\",\n\tlinkShape = \"step\",\n\twidth = 600,\n\theight = 400,\n\tonLeafClick,\n\tclassName,\n\t...rest\n}: DendrogramProps) {\n\tconst [d3h, setD3h] = React.useState<D3HierarchyMod | null>(null);\n\n\tReact.useEffect(() => {\n\t\tlet cancelled = false;\n\t\tvoid import(\"d3-hierarchy\").then((mod) => {\n\t\t\tif (!cancelled) setD3h(mod);\n\t\t});\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, []);\n\n\tif (!d3h) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-hex-dendrogram-loading\n\t\t\t\taria-busy=\"true\"\n\t\t\t\tclassName={cn(\"inline-block bg-muted/20\", className)}\n\t\t\t\tstyle={{ width, height }}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst { nodes, links } = layout(d3h, root, orientation, width, height);\n\tconst leafCount = nodes.filter((n) => n.isLeaf).length;\n\tconst desc = `Dendrogram with ${leafCount} leaves, rooted at \"${root.label}\"`;\n\n\treturn (\n\t\t<svg\n\t\t\t{...rest}\n\t\t\tdata-hex-dendrogram\n\t\t\tdata-orientation={orientation}\n\t\t\tdata-link-shape={linkShape}\n\t\t\trole=\"img\"\n\t\t\twidth={width}\n\t\t\theight={height}\n\t\t\tviewBox={`0 0 ${width} ${height}`}\n\t\t\tclassName={cn(\"block\", className)}\n\t\t>\n\t\t\t<title>Dendrogram</title>\n\t\t\t<desc>{desc}</desc>\n\t\t\t<g data-hex-dendrogram-links>\n\t\t\t\t{links.map((l) => (\n\t\t\t\t\t<path\n\t\t\t\t\t\tkey={l.id}\n\t\t\t\t\t\td={linkPath(l, orientation, linkShape)}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"hsl(var(--muted-foreground))\"\n\t\t\t\t\t\tstrokeOpacity={0.8}\n\t\t\t\t\t\tstrokeWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</g>\n\t\t\t<g data-hex-dendrogram-nodes>\n\t\t\t\t{nodes.map((n) => (\n\t\t\t\t\t<g\n\t\t\t\t\t\tkey={n.node.id}\n\t\t\t\t\t\tdata-hex-dendrogram-node\n\t\t\t\t\t\tdata-leaf={n.isLeaf ? \"true\" : \"false\"}\n\t\t\t\t\t\tdata-depth={n.depth}\n\t\t\t\t\t\ttransform={`translate(${n.x},${n.y})`}\n\t\t\t\t\t\tstyle={n.isLeaf && onLeafClick ? { cursor: \"pointer\" } : undefined}\n\t\t\t\t\t\tonClick={n.isLeaf && onLeafClick ? () => onLeafClick(n.node) : undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\tr={n.isLeaf ? 3 : 2}\n\t\t\t\t\t\t\tfill={n.isLeaf ? \"hsl(var(--primary))\" : \"hsl(var(--muted-foreground))\"}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{n.isLeaf ? (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\tx={orientation === \"horizontal\" ? 6 : 0}\n\t\t\t\t\t\t\t\ty={orientation === \"horizontal\" ? 4 : 14}\n\t\t\t\t\t\t\t\ttextAnchor={orientation === \"horizontal\" ? \"start\" : \"middle\"}\n\t\t\t\t\t\t\t\tfontSize={11}\n\t\t\t\t\t\t\t\tfill=\"hsl(var(--foreground))\"\n\t\t\t\t\t\t\t\tstyle={{ paintOrder: \"stroke\" }}\n\t\t\t\t\t\t\t\tstroke=\"hsl(var(--background))\"\n\t\t\t\t\t\t\t\tstrokeWidth={3}\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{n.node.label}\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</g>\n\t\t\t\t))}\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction layout(\n\td3h: D3HierarchyMod,\n\troot: DendrogramNode,\n\torientation: \"horizontal\" | \"vertical\",\n\twidth: number,\n\theight: number,\n): { nodes: LaidOutNode[]; links: LaidOutLink[] } {\n\tconst hierarchy = d3h.hierarchy<DendrogramNode>(root);\n\tconst clusterFn = d3h.cluster<DendrogramNode>();\n\tif (orientation === \"horizontal\") {\n\t\tclusterFn.size([height - 32, width - 120]);\n\t} else {\n\t\tclusterFn.size([width - 32, height - 64]);\n\t}\n\t// cluster(hierarchy) returns HierarchyPointNode<T> with typed x/y.\n\tconst layoutRoot = clusterFn(hierarchy);\n\n\tconst nodes: LaidOutNode[] = [];\n\tlayoutRoot.each((d) => {\n\t\tconst isLeaf = !d.children || d.children.length === 0;\n\t\tif (orientation === \"horizontal\") {\n\t\t\tnodes.push({ node: d.data, x: d.y + 16, y: d.x + 16, depth: d.depth, isLeaf });\n\t\t} else {\n\t\t\tnodes.push({ node: d.data, x: d.x + 16, y: d.y + 16, depth: d.depth, isLeaf });\n\t\t}\n\t});\n\n\tconst links: LaidOutLink[] = layoutRoot.links().map((link, i) => {\n\t\tif (orientation === \"horizontal\") {\n\t\t\treturn {\n\t\t\t\tsource: { x: link.source.y + 16, y: link.source.x + 16 },\n\t\t\t\ttarget: { x: link.target.y + 16, y: link.target.x + 16 },\n\t\t\t\tid: `l-${i}`,\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\tsource: { x: link.source.x + 16, y: link.source.y + 16 },\n\t\t\ttarget: { x: link.target.x + 16, y: link.target.y + 16 },\n\t\t\tid: `l-${i}`,\n\t\t};\n\t});\n\n\treturn { nodes, links };\n}\n\nfunction linkPath(\n\tlink: LaidOutLink,\n\torientation: \"horizontal\" | \"vertical\",\n\tlinkShape: \"step\" | \"diagonal\",\n): string {\n\tconst { source: s, target: t } = link;\n\tif (linkShape === \"step\") {\n\t\tif (orientation === \"horizontal\") {\n\t\t\treturn `M${s.x},${s.y} H${t.x} V${t.y}`;\n\t\t}\n\t\treturn `M${s.x},${s.y} V${t.y} H${t.x}`;\n\t}\n\tif (orientation === \"horizontal\") {\n\t\tconst mx = (s.x + t.x) / 2;\n\t\treturn `M${s.x},${s.y} C${mx},${s.y} ${mx},${t.y} ${t.x},${t.y}`;\n\t}\n\tconst my = (s.y + t.y) / 2;\n\treturn `M${s.x},${s.y} C${s.x},${my} ${t.x},${my} ${t.x},${t.y}`;\n}\n\nexport { Dendrogram };\n"]}

package/dist/diagram.d.ts

@@ -0,0 +1,2 @@
+export { DiagramProps_alias_1 as DiagramProps } from './_tsup-dts-rollup.js';
+export { Diagram_alias_1 as Diagram } from './_tsup-dts-rollup.js';

package/dist/diagram.js

@@ -0,0 +1,70 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Diagram({ children: source, theme = "default", id, onError, className, ...rest }) {
+  const [svg, setSvg] = React.useState("");
+  const [error, setError] = React.useState(null);
+  const onErrorRef = React.useRef(onError);
+  onErrorRef.current = onError;
+  const reactId = React.useId();
+  const stableId = id ?? `hex-diagram-${reactId.replace(/:/g, "-")}`;
+  React.useEffect(() => {
+    let cancelled = false;
+    setError(null);
+    void (async () => {
+      try {
+        const { default: mermaid } = await import('mermaid');
+        if (cancelled) return;
+        mermaid.initialize({ startOnLoad: false, theme, securityLevel: "strict" });
+        const { svg: rendered } = await mermaid.render(stableId, source);
+        if (!cancelled) setSvg(rendered);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        if (cancelled) return;
+        setError(message);
+        onErrorRef.current?.(message);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [source, theme, stableId]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        "data-hex-diagram-error": true,
+        role: "alert",
+        className: cn(
+          "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Diagram failed to render" }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-1 whitespace-pre-wrap text-xs opacity-80", children: error })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-diagram": true,
+      "data-theme": theme,
+      className: cn("overflow-auto rounded-md border bg-background p-3", className),
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+
+export { Diagram };
+//# sourceMappingURL=diagram.js.map
+//# sourceMappingURL=diagram.js.map

package/dist/diagram.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/ai/diagram/diagram.tsx"],"names":[],"mappings":";;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACyBA,SAAS,OAAA,CAAQ,EAAE,QAAA,EAAU,MAAA,EAAQ,KAAA,GAAQ,SAAA,EAAW,EAAA,EAAI,OAAA,EAAS,SAAA,EAAW,GAAG,IAAA,EAAK,EAAiB;AACxG,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAU,eAAiB,EAAE,CAAA;AAC/C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAU,eAAwB,IAAI,CAAA;AAC5D,EAAA,MAAM,UAAA,GAAmB,aAAO,OAAO,CAAA;AACvC,EAAA,UAAA,CAAW,OAAA,GAAU,OAAA;AAMrB,EAAA,MAAM,UAAgB,KAAA,CAAA,KAAA,EAAM;AAC5B,EAAA,MAAM,WAAW,EAAA,IAAM,CAAA,YAAA,EAAe,QAAQ,OAAA,CAAQ,IAAA,EAAM,GAAG,CAAC,CAAA,CAAA;AAEhE,EAAM,gBAAU,MAAM;AACrB,IAAA,IAAI,SAAA,GAAY,KAAA;AAChB,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,KAAA,CAAM,YAAY;AACjB,MAAA,IAAI;AACH,QAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,MAAM,OAAO,SAAS,CAAA;AACnD,QAAA,IAAI,SAAA,EAAW;AACf,QAAA,OAAA,CAAQ,WAAW,EAAE,WAAA,EAAa,OAAO,KAAA,EAAO,aAAA,EAAe,UAAU,CAAA;AACzE,QAAA,MAAM,EAAE,KAAK,QAAA,EAAS,GAAI,MAAM,OAAA,CAAQ,MAAA,CAAO,UAAU,MAAM,CAAA;AAC/D,QAAA,IAAI,CAAC,SAAA,EAAW,MAAA,CAAO,QAAQ,CAAA;AAAA,MAChC,SAAS,GAAA,EAAK;AACb,QAAA,MAAM,UAAU,GAAA,YAAe,KAAA,GAAQ,GAAA,CAAI,OAAA,GAAU,OAAO,GAAG,CAAA;AAC/D,QAAA,IAAI,SAAA,EAAW;AACf,QAAA,QAAA,CAAS,OAAO,CAAA;AAChB,QAAA,UAAA,CAAW,UAAU,OAAO,CAAA;AAAA,MAC7B;AAAA,IACD,CAAA,GAAG;AACH,IAAA,OAAO,MAAM;AACZ,MAAA,SAAA,GAAY,IAAA;AAAA,IACb,CAAA;AAAA,EACD,CAAA,EAAG,CAAC,MAAA,EAAQ,KAAA,EAAO,QAAQ,CAAC,CAAA;AAE5B,EAAA,IAAI,KAAA,EAAO;AACV,IAAA,uBACC,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,wBAAA,EAAsB,IAAA;AAAA,QACtB,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACV,uFAAA;AAAA,UACA;AAAA,SACD;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAc,QAAA,EAAA,0BAAA,EAAwB,CAAA;AAAA,0BACrD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EAA+C,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KACrE;AAAA,EAEF;AAEA,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,kBAAA,EAAgB,IAAA;AAAA,MAChB,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAK5E,uBAAA,EAAyB,EAAE,MAAA,EAAQ,GAAA;AAAI;AAAA,GACxC;AAEF","file":"diagram.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * Render a Mermaid diagram from a source string. Useful for AI agent\n * outputs that emit flowcharts / sequence diagrams / class diagrams in\n * Markdown — pipe the code-fence body straight in.\n *\n * Heavy peer: requires `mermaid` (~700 KB gzip). The hex-core CLI's `add`\n * flow prompts before installing — this is the largest engine in the\n * AI Elements set, so the consumer should opt in deliberately.\n *\n * @example\n * <Diagram>{`flowchart LR\\n  A --> B\\n  B --> C`}</Diagram>\n *\n * <Diagram theme=\"dark\" id=\"agent-flow\">{mermaidSource}</Diagram>\n */\nexport interface DiagramProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"onError\"> {\n\t/** Mermaid source string. */\n\tchildren: string;\n\t/** Light or dark mermaid theme. Default \"default\" (light). */\n\ttheme?: \"default\" | \"dark\" | \"forest\" | \"neutral\";\n\t/** Stable ID for the rendered SVG. Required when multiple diagrams share a page; auto-generated when omitted. */\n\tid?: string;\n\t/** Called on parse/render failure with the engine's message. */\n\tonError?: (message: string) => void;\n}\n\n/**\n * Renders a Mermaid diagram from source.\n * @param props - Source string + theme + lifecycle callbacks\n * @returns A div containing the rendered SVG\n */\nfunction Diagram({ children: source, theme = \"default\", id, onError, className, ...rest }: DiagramProps) {\n\tconst [svg, setSvg] = React.useState<string>(\"\");\n\tconst [error, setError] = React.useState<string | null>(null);\n\tconst onErrorRef = React.useRef(onError);\n\tonErrorRef.current = onError;\n\n\t// useId is stable across SSR/hydration AND unique per component instance,\n\t// avoiding the module-singleton counter bug where two diagrams in\n\t// streamed AI output collide on mermaid's internal cache key. Mermaid\n\t// rejects \":\" in IDs (React's useId emits \":r0:\"-style) so strip it.\n\tconst reactId = React.useId();\n\tconst stableId = id ?? `hex-diagram-${reactId.replace(/:/g, \"-\")}`;\n\n\tReact.useEffect(() => {\n\t\tlet cancelled = false;\n\t\tsetError(null);\n\t\tvoid (async () => {\n\t\t\ttry {\n\t\t\t\tconst { default: mermaid } = await import(\"mermaid\");\n\t\t\t\tif (cancelled) return;\n\t\t\t\tmermaid.initialize({ startOnLoad: false, theme, securityLevel: \"strict\" });\n\t\t\t\tconst { svg: rendered } = await mermaid.render(stableId, source);\n\t\t\t\tif (!cancelled) setSvg(rendered);\n\t\t\t} catch (err) {\n\t\t\t\tconst message = err instanceof Error ? err.message : String(err);\n\t\t\t\tif (cancelled) return;\n\t\t\t\tsetError(message);\n\t\t\t\tonErrorRef.current?.(message);\n\t\t\t}\n\t\t})();\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [source, theme, stableId]);\n\n\tif (error) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tdata-hex-diagram-error\n\t\t\t\trole=\"alert\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div className=\"font-medium\">Diagram failed to render</div>\n\t\t\t\t<pre className=\"mt-1 whitespace-pre-wrap text-xs opacity-80\">{error}</pre>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tdata-hex-diagram\n\t\t\tdata-theme={theme}\n\t\t\tclassName={cn(\"overflow-auto rounded-md border bg-background p-3\", className)}\n\t\t\t// dangerouslySetInnerHTML: mermaid sanitizes its own SVG output via\n\t\t\t// securityLevel=\"strict\" (no foreignObject, no script tags). Source\n\t\t\t// strings still come from the consumer — never from untrusted user\n\t\t\t// input without their own validation upstream.\n\t\t\tdangerouslySetInnerHTML={{ __html: svg }}\n\t\t/>\n\t);\n}\n\nexport { Diagram };\n"]}

package/dist/flashcard.d.ts

@@ -0,0 +1,2 @@
+export { FlashcardProps_alias_1 as FlashcardProps } from './_tsup-dts-rollup.js';
+export { Flashcard_alias_1 as Flashcard } from './_tsup-dts-rollup.js';