@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-NET4YLRY.js

@@ -0,0 +1,107 @@
+"use client";
+
+// src/turn-status.tsx
+import { Button, cn, formatElapsed, useLocale } from "@elabs-ai/components-ui";
+import { ArrowDownIcon, SquareIcon } from "lucide-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TurnStatus = forwardRef(function TurnStatus2({
+  label,
+  elapsedMs,
+  tokens,
+  turn,
+  turnTotal,
+  status = "working",
+  onStop,
+  showScrollToBottom,
+  onScrollToBottom,
+  className,
+  ...props
+}, ref) {
+  const { t, formatNumber } = useLocale();
+  const isSettled = status === "settled";
+  const formattedElapsed = elapsedMs === void 0 ? void 0 : formatElapsed(elapsedMs);
+  const settledText = isSettled ? label ?? (formattedElapsed ? t("ai.turnStatus.completedIn", { elapsed: formattedElapsed }) : t("ai.turnStatus.completed")) : void 0;
+  const announced = isSettled ? settledText ?? "" : label ?? "";
+  const hasTokens = tokens?.input !== void 0 || tokens?.output !== void 0;
+  const hasTurn = turn !== void 0;
+  const visibleLabel = isSettled ? settledText : label;
+  const hasMeta = !isSettled && (formattedElapsed !== void 0 || hasTokens || hasTurn);
+  const showStop = !isSettled && Boolean(onStop);
+  const hasTrailing = hasMeta || showScrollToBottom || showStop;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex w-full items-center gap-3 text-body text-foreground", className),
+      "data-slot": "turn-status",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-2 shrink-0 rounded-full",
+              isSettled ? "bg-success" : "animate-pulse bg-primary motion-reduce:animate-none"
+            ),
+            "data-slot": "turn-status-indicator"
+          }
+        ),
+        visibleLabel ? /* @__PURE__ */ jsx("span", { className: "truncate", "data-slot": "turn-status-label", children: visibleLabel }) : null,
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "turn-status-live", role: "status", children: announced }),
+        hasTrailing ? /* @__PURE__ */ jsxs("div", { className: "ms-auto flex shrink-0 items-center gap-3", "data-slot": "turn-status-trailing", children: [
+          hasMeta ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3 text-meta text-muted-foreground tabular-nums",
+              "data-slot": "turn-status-meta",
+              children: [
+                formattedElapsed ? /* @__PURE__ */ jsx("span", { "data-slot": "turn-status-elapsed", children: formattedElapsed }) : null,
+                hasTokens ? /* @__PURE__ */ jsxs("span", { "data-slot": "turn-status-tokens", children: [
+                  formatNumber(tokens?.input ?? 0, { notation: "compact" }),
+                  "\u2191 ",
+                  formatNumber(tokens?.output ?? 0, { notation: "compact" }),
+                  "\u2193"
+                ] }) : null,
+                hasTurn ? /* @__PURE__ */ jsxs("span", { "data-slot": "turn-status-turn", children: [
+                  turn,
+                  turnTotal === void 0 ? "" : `/${turnTotal}`
+                ] }) : null
+              ]
+            }
+          ) : null,
+          showScrollToBottom ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": t("ai.turnStatus.scrollToBottom"),
+              "data-slot": "turn-status-scroll-to-bottom",
+              onClick: onScrollToBottom,
+              size: "icon-sm",
+              type: "button",
+              variant: "ghost",
+              children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
+            }
+          ) : null,
+          showStop ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": t("ai.promptInput.stop"),
+              "data-slot": "turn-status-stop",
+              onClick: onStop,
+              size: "icon-sm",
+              type: "button",
+              variant: "outline",
+              children: /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" })
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+
+export {
+  TurnStatus
+};
+//# sourceMappingURL=chunk-NET4YLRY.js.map

package/dist/chunk-NET4YLRY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/turn-status.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button, cn, formatElapsed, useLocale } from \"@elabs-ai/components-ui\";\nimport { ArrowDownIcon, SquareIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\n\nexport interface TurnStatusTokens {\n  input?: number;\n  output?: number;\n}\n\nexport interface TurnStatusProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * What the turn is doing right now, e.g. `\"Working…\"`, `\"Editing files…\"`.\n   * Caller-supplied and rendered verbatim — `TurnStatus` never invents this\n   * text, so it carries no default and needs no translation key of its own.\n   */\n  label?: string;\n  /** Elapsed time in the current turn, in milliseconds. Rendered via `formatElapsed`. */\n  elapsedMs?: number;\n  /** Token counts for the turn so far. */\n  tokens?: TurnStatusTokens;\n  /** 1-based index of the current turn. */\n  turn?: number;\n  /** Total number of turns, when known. */\n  turnTotal?: number;\n  /**\n   * `\"working\"` (default) renders the live stats + stop control and keeps\n   * announcing `label` changes. `\"settled\"` renders the completed-turn line\n   * instead and stops announcing (the elapsed/tokens/turn stats and the stop\n   * control are hidden — the turn is over).\n   */\n  status?: \"working\" | \"settled\";\n  /** Renders a focusable stop button, reachable by keyboard, while `status=\"working\"`. */\n  onStop?: () => void;\n  /** Renders a \"scroll to bottom\" affordance. */\n  showScrollToBottom?: boolean;\n  onScrollToBottom?: () => void;\n}\n\n/**\n * TurnStatus — the in-turn footer: a working/settled label, elapsed time,\n * token counts, turn progress, and a stop affordance, all in one place (#105).\n *\n * Exactly ONE `role=\"status\" aria-live=\"polite\"` region is rendered — a\n * visually-hidden node that announces `label` while working and the\n * completed-turn line once `status=\"settled\"`. The ticking elapsed time and\n * token/turn counts are plain (non-live) visible text: they update every\n * render without re-announcing on every tick, which would flood assistive\n * tech (see `.claude/rules/loading-states.md`). This mirrors `Persona`'s\n * visible-content/`sr-only`-announcement split.\n */\nexport const TurnStatus = forwardRef<HTMLDivElement, TurnStatusProps>(function TurnStatus(\n  {\n    label,\n    elapsedMs,\n    tokens,\n    turn,\n    turnTotal,\n    status = \"working\",\n    onStop,\n    showScrollToBottom,\n    onScrollToBottom,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { t, formatNumber } = useLocale();\n  const isSettled = status === \"settled\";\n  const formattedElapsed = elapsedMs === undefined ? undefined : formatElapsed(elapsedMs);\n\n  const settledText = isSettled\n    ? (label ??\n      (formattedElapsed\n        ? t(\"ai.turnStatus.completedIn\", { elapsed: formattedElapsed })\n        : t(\"ai.turnStatus.completed\")))\n    : undefined;\n\n  /** The one thing this component ever announces: `label`, or the settled line. */\n  const announced = isSettled ? (settledText ?? \"\") : (label ?? \"\");\n\n  const hasTokens = tokens?.input !== undefined || tokens?.output !== undefined;\n  const hasTurn = turn !== undefined;\n  const visibleLabel = isSettled ? settledText : label;\n  const hasMeta = !isSettled && (formattedElapsed !== undefined || hasTokens || hasTurn);\n  const showStop = !isSettled && Boolean(onStop);\n  const hasTrailing = hasMeta || showScrollToBottom || showStop;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex w-full items-center gap-3 text-body text-foreground\", className)}\n      data-slot=\"turn-status\"\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"size-2 shrink-0 rounded-full\",\n          isSettled ? \"bg-success\" : \"animate-pulse bg-primary motion-reduce:animate-none\",\n        )}\n        data-slot=\"turn-status-indicator\"\n      />\n\n      {visibleLabel ? (\n        <span className=\"truncate\" data-slot=\"turn-status-label\">\n          {visibleLabel}\n        </span>\n      ) : null}\n\n      {/* The single live region — see the component doc comment above. */}\n      <span aria-live=\"polite\" className=\"sr-only\" data-slot=\"turn-status-live\" role=\"status\">\n        {announced}\n      </span>\n\n      {hasTrailing ? (\n        <div className=\"ms-auto flex shrink-0 items-center gap-3\" data-slot=\"turn-status-trailing\">\n          {hasMeta ? (\n            <div\n              className=\"flex items-center gap-3 text-meta text-muted-foreground tabular-nums\"\n              data-slot=\"turn-status-meta\"\n            >\n              {formattedElapsed ? (\n                <span data-slot=\"turn-status-elapsed\">{formattedElapsed}</span>\n              ) : null}\n              {hasTokens ? (\n                <span data-slot=\"turn-status-tokens\">\n                  {formatNumber(tokens?.input ?? 0, { notation: \"compact\" })}\n                  {\"↑ \"}\n                  {formatNumber(tokens?.output ?? 0, { notation: \"compact\" })}\n                  {\"↓\"}\n                </span>\n              ) : null}\n              {hasTurn ? (\n                <span data-slot=\"turn-status-turn\">\n                  {turn}\n                  {turnTotal === undefined ? \"\" : `/${turnTotal}`}\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n\n          {showScrollToBottom ? (\n            <Button\n              aria-label={t(\"ai.turnStatus.scrollToBottom\")}\n              data-slot=\"turn-status-scroll-to-bottom\"\n              onClick={onScrollToBottom}\n              size=\"icon-sm\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <ArrowDownIcon className=\"size-4\" />\n            </Button>\n          ) : null}\n\n          {showStop ? (\n            <Button\n              aria-label={t(\"ai.promptInput.stop\")}\n              data-slot=\"turn-status-stop\"\n              onClick={onStop}\n              size=\"icon-sm\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <SquareIcon className=\"size-4\" />\n            </Button>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,QAAQ,IAAI,eAAe,iBAAiB;AACrD,SAAS,eAAe,kBAAkB;AAE1C,SAAS,kBAAkB;AA4FrB,cA+BU,YA/BV;AA5CC,IAAM,aAAa,WAA4C,SAASA,YAC7E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,GAAG,aAAa,IAAI,UAAU;AACtC,QAAM,YAAY,WAAW;AAC7B,QAAM,mBAAmB,cAAc,SAAY,SAAY,cAAc,SAAS;AAEtF,QAAM,cAAc,YACf,UACA,mBACG,EAAE,6BAA6B,EAAE,SAAS,iBAAiB,CAAC,IAC5D,EAAE,yBAAyB,KAC/B;AAGJ,QAAM,YAAY,YAAa,eAAe,KAAO,SAAS;AAE9D,QAAM,YAAY,QAAQ,UAAU,UAAa,QAAQ,WAAW;AACpE,QAAM,UAAU,SAAS;AACzB,QAAM,eAAe,YAAY,cAAc;AAC/C,QAAM,UAAU,CAAC,cAAc,qBAAqB,UAAa,aAAa;AAC9E,QAAM,WAAW,CAAC,aAAa,QAAQ,MAAM;AAC7C,QAAM,cAAc,WAAW,sBAAsB;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,4DAA4D,SAAS;AAAA,MACnF,aAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,YAAY,eAAe;AAAA,YAC7B;AAAA,YACA,aAAU;AAAA;AAAA,QACZ;AAAA,QAEC,eACC,oBAAC,UAAK,WAAU,YAAW,aAAU,qBAClC,wBACH,IACE;AAAA,QAGJ,oBAAC,UAAK,aAAU,UAAS,WAAU,WAAU,aAAU,oBAAmB,MAAK,UAC5E,qBACH;AAAA,QAEC,cACC,qBAAC,SAAI,WAAU,4CAA2C,aAAU,wBACjE;AAAA,oBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,aAAU;AAAA,cAET;AAAA,mCACC,oBAAC,UAAK,aAAU,uBAAuB,4BAAiB,IACtD;AAAA,gBACH,YACC,qBAAC,UAAK,aAAU,sBACb;AAAA,+BAAa,QAAQ,SAAS,GAAG,EAAE,UAAU,UAAU,CAAC;AAAA,kBACxD;AAAA,kBACA,aAAa,QAAQ,UAAU,GAAG,EAAE,UAAU,UAAU,CAAC;AAAA,kBACzD;AAAA,mBACH,IACE;AAAA,gBACH,UACC,qBAAC,UAAK,aAAU,oBACb;AAAA;AAAA,kBACA,cAAc,SAAY,KAAK,IAAI,SAAS;AAAA,mBAC/C,IACE;AAAA;AAAA;AAAA,UACN,IACE;AAAA,UAEH,qBACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAY,EAAE,8BAA8B;AAAA,cAC5C,aAAU;AAAA,cACV,SAAS;AAAA,cACT,MAAK;AAAA,cACL,MAAK;AAAA,cACL,SAAQ;AAAA,cAER,8BAAC,iBAAc,WAAU,UAAS;AAAA;AAAA,UACpC,IACE;AAAA,UAEH,WACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAY,EAAE,qBAAqB;AAAA,cACnC,aAAU;AAAA,cACV,SAAS;AAAA,cACT,MAAK;AAAA,cACL,MAAK;AAAA,cACL,SAAQ;AAAA,cAER,8BAAC,cAAW,WAAU,UAAS;AAAA;AAAA,UACjC,IACE;AAAA,WACN,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["TurnStatus"]}

package/dist/chunk-NIG67CFM.js

@@ -0,0 +1,329 @@
+"use client";
+
+// src/jsx-preview.tsx
+import { Skeleton } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { AlertCircle } from "lucide-react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import JsxParser from "react-jsx-parser";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var JSXPreviewContext = createContext(null);
+var JSX_PREVIEW_BLACKLISTED_TAGS = [
+  "script",
+  "style",
+  "iframe",
+  "form",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base"
+];
+var useJSXPreview = () => {
+  const context = useContext(JSXPreviewContext);
+  if (!context) {
+    throw new Error("JSXPreview components must be used within JSXPreview");
+  }
+  return context;
+};
+var TAG_NAME_START = /[a-zA-Z]/;
+var TAG_NAME_CHAR = /[a-zA-Z0-9]/;
+function findNextJsxTag(code, fromIndex) {
+  const len = code.length;
+  let i = fromIndex;
+  while (i < len) {
+    if (code[i] !== "<") {
+      i++;
+      continue;
+    }
+    let j = i + 1;
+    const closing = code[j] === "/";
+    if (closing) j++;
+    const nameStart = j;
+    if (!TAG_NAME_START.test(code[nameStart] ?? "")) {
+      i++;
+      continue;
+    }
+    j++;
+    while (j < len && TAG_NAME_CHAR.test(code[j] ?? "")) {
+      j++;
+    }
+    const tagName = code.slice(nameStart, j);
+    let depth = 0;
+    let quote = null;
+    let k = j;
+    let closedAt = -1;
+    let selfClosing = false;
+    while (k < len) {
+      const ch = code[k];
+      if (quote) {
+        if (ch === quote) quote = null;
+        k++;
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        quote = ch;
+        k++;
+        continue;
+      }
+      if (ch === "{") {
+        depth++;
+        k++;
+        continue;
+      }
+      if (ch === "}") {
+        depth = Math.max(0, depth - 1);
+        k++;
+        continue;
+      }
+      if (depth === 0 && ch === ">") {
+        let p = k - 1;
+        while (p > j && code[p] === " ") p--;
+        selfClosing = code[p] === "/";
+        closedAt = k + 1;
+        break;
+      }
+      k++;
+    }
+    if (closedAt === -1) {
+      return null;
+    }
+    return {
+      endIndex: closedAt,
+      tagName,
+      type: closing ? "closing" : selfClosing ? "self-closing" : "opening"
+    };
+  }
+  return null;
+}
+var stripIncompleteTag = (text) => {
+  const lastOpen = text.lastIndexOf("<");
+  if (lastOpen === -1) {
+    return text;
+  }
+  const afterOpen = text.slice(lastOpen);
+  if (!afterOpen.includes(">")) {
+    return text.slice(0, lastOpen);
+  }
+  return text;
+};
+var completeJsxTag = (code) => {
+  const stack = [];
+  let position = 0;
+  while (position < code.length) {
+    const match = findNextJsxTag(code, position);
+    if (!match) {
+      break;
+    }
+    if (match.type === "opening") {
+      stack.push(match.tagName);
+    } else if (match.type === "closing") {
+      stack.pop();
+    }
+    position = match.endIndex;
+  }
+  return code.slice(0, position) + stripIncompleteTag(code.slice(position)) + [...stack].reverse().map((tag) => `</${tag}>`).join("");
+};
+var STREAM_RECOMPUTE_THROTTLE_MS = 80;
+function useCompletedJsx(jsx2, isStreaming) {
+  const cacheRef = useRef({ jsx: jsx2, result: completeJsxTag(jsx2), time: 0 });
+  return useMemo(() => {
+    const cache = cacheRef.current;
+    if (jsx2 === cache.jsx) return cache.result;
+    const now = Date.now();
+    if (isStreaming && now - cache.time < STREAM_RECOMPUTE_THROTTLE_MS) {
+      return cache.result;
+    }
+    const result = completeJsxTag(jsx2);
+    cacheRef.current = { jsx: jsx2, result, time: now };
+    return result;
+  }, [jsx2, isStreaming]);
+}
+var JSXPreview = memo(
+  ({
+    jsx: jsx2,
+    isStreaming = false,
+    loading = false,
+    components,
+    bindings,
+    onError,
+    className,
+    children,
+    ...props
+  }) => {
+    const [prevJsx, setPrevJsx] = useState(jsx2);
+    const [error, setError] = useState(null);
+    const [hasRendered, setHasRendered] = useState(false);
+    if (jsx2 !== prevJsx) {
+      setPrevJsx(jsx2);
+      setError(null);
+    }
+    const completed = useCompletedJsx(jsx2, isStreaming);
+    const isIncomplete = jsx2.trim() !== "" && completed !== jsx2;
+    const processedJsx = useMemo(() => {
+      if (loading) return "";
+      return isStreaming || isIncomplete ? completed : jsx2;
+    }, [jsx2, isStreaming, loading, isIncomplete, completed]);
+    const status = useMemo(() => {
+      if (loading) return "pending";
+      if (jsx2.trim() === "") return hasRendered ? "ready" : "idle";
+      if (isStreaming || isIncomplete) return "pending";
+      return error != null ? "error" : "ready";
+    }, [jsx2, isStreaming, loading, isIncomplete, error, hasRendered]);
+    const contextValue = useMemo(
+      () => ({
+        bindings,
+        components,
+        error,
+        hasRendered,
+        isStreaming,
+        jsx: jsx2,
+        loading,
+        onErrorProp: onError,
+        processedJsx,
+        setError,
+        setHasRendered,
+        status
+      }),
+      [
+        bindings,
+        components,
+        error,
+        hasRendered,
+        isStreaming,
+        jsx2,
+        loading,
+        onError,
+        processedJsx,
+        status
+      ]
+    );
+    return /* @__PURE__ */ jsx(JSXPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), ...props, children }) });
+  }
+);
+JSXPreview.displayName = "JSXPreview";
+var JSXPreviewContent = memo(({ className, ...props }) => {
+  const { processedJsx, status, components, bindings, setError, setHasRendered, onErrorProp } = useJSXPreview();
+  const lastGoodJsxRef = useRef("");
+  const [erroredJsx, setErroredJsx] = useState(null);
+  const pendingErrorRef = useRef(null);
+  const prevProcessedRef = useRef(processedJsx);
+  if (prevProcessedRef.current !== processedJsx) {
+    prevProcessedRef.current = processedJsx;
+    if (erroredJsx !== null) setErroredJsx(null);
+  }
+  const hadError = erroredJsx === processedJsx;
+  const handleError = useCallback(
+    (error) => {
+      pendingErrorRef.current = { error, jsx: processedJsx };
+    },
+    [processedJsx]
+  );
+  useEffect(() => {
+    const failed = pendingErrorRef.current?.jsx === processedJsx;
+    if (failed) {
+      const { error } = pendingErrorRef.current;
+      pendingErrorRef.current = null;
+      if (erroredJsx !== processedJsx) setErroredJsx(processedJsx);
+      if (status !== "pending") {
+        setError(error);
+        onErrorProp?.(error);
+      }
+    } else if (erroredJsx !== processedJsx && processedJsx.trim() !== "") {
+      lastGoodJsxRef.current = processedJsx;
+      setHasRendered(true);
+    }
+  }, [processedJsx, status, erroredJsx, setError, setHasRendered, onErrorProp]);
+  if (status !== "ready" && status !== "pending") {
+    return null;
+  }
+  const displayJsx = hadError ? lastGoodJsxRef.current : processedJsx;
+  return /* @__PURE__ */ jsx("div", { className: cn("jsx-preview-content", className), ...props, children: /* @__PURE__ */ jsx(
+    JsxParser,
+    {
+      allowUnknownElements: false,
+      bindings,
+      blacklistedTags: JSX_PREVIEW_BLACKLISTED_TAGS,
+      components,
+      jsx: displayJsx,
+      onError: handleError,
+      renderInWrapper: false
+    }
+  ) });
+});
+JSXPreviewContent.displayName = "JSXPreviewContent";
+var JSXPreviewSkeleton = memo(
+  ({ className, children, ...props }) => {
+    const { status, hasRendered } = useJSXPreview();
+    const show = !hasRendered && status === "pending";
+    const [announce, setAnnounce] = useState(false);
+    useEffect(() => setAnnounce(show), [show]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(show ? "space-y-2" : "sr-only", className),
+        role: "status",
+        "aria-live": "polite",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: announce ? "Loading preview\u2026" : "" }),
+          show ? children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-16" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-16" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-16" })
+            ] })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+JSXPreviewSkeleton.displayName = "JSXPreviewSkeleton";
+var renderChildren = (children, error) => {
+  if (typeof children === "function") {
+    return children(error);
+  }
+  return children;
+};
+var JSXPreviewError = memo(({ className, children, ...props }) => {
+  const { status, error } = useJSXPreview();
+  if (status !== "error" || !error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 rounded-md bg-destructive/10 p-3 text-body text-destructive-text",
+        className
+      ),
+      role: "alert",
+      ...props,
+      children: children ? renderChildren(children, error) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: error.message })
+      ] })
+    }
+  );
+});
+JSXPreviewError.displayName = "JSXPreviewError";
+
+export {
+  useJSXPreview,
+  JSXPreview,
+  JSXPreviewContent,
+  JSXPreviewSkeleton,
+  JSXPreviewError
+};
+//# sourceMappingURL=chunk-NIG67CFM.js.map

package/dist/chunk-NIG67CFM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/jsx-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport { Skeleton } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { AlertCircle } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { TProps as JsxParserProps } from \"react-jsx-parser\";\nimport JsxParser from \"react-jsx-parser\";\n\n/**\n * The readiness of the preview, derived from the input (see loading-states.md):\n * - `idle`    — nothing requested yet (empty input, never rendered). Renders nothing.\n * - `pending` — not-ready: `loading`, `isStreaming`, OR syntactically incomplete\n *               input (a half-arrived tag). Builds up best-effort; the error slot\n *               is suppressed; the skeleton shows until the first successful paint.\n * - `ready`   — settled, parseable input is rendering.\n * - `error`   — settled AND genuinely invalid input (the only state that surfaces\n *               `JSXPreviewError`).\n */\nexport type JSXPreviewStatus = \"idle\" | \"pending\" | \"ready\" | \"error\";\n\ninterface JSXPreviewContextValue {\n  jsx: string;\n  processedJsx: string;\n  isStreaming: boolean;\n  loading: boolean;\n  status: JSXPreviewStatus;\n  hasRendered: boolean;\n  error: Error | null;\n  setError: (error: Error | null) => void;\n  setHasRendered: (value: boolean) => void;\n  components: JsxParserProps[\"components\"];\n  bindings: JsxParserProps[\"bindings\"];\n  onErrorProp?: (error: Error) => void;\n}\n\nconst JSXPreviewContext = createContext<JSXPreviewContextValue | null>(null);\n\n/**\n * HTML elements that must never render from agent/model-authored JSX: script\n * execution, style/link/meta/base injection, and embeddable third-party\n * surfaces (iframe/object/embed) or a form that could post data out. Merged\n * with `react-jsx-parser`'s own default (`script`) via `blacklistedTags`.\n */\nconst JSX_PREVIEW_BLACKLISTED_TAGS = [\n  \"script\",\n  \"style\",\n  \"iframe\",\n  \"form\",\n  \"object\",\n  \"embed\",\n  \"link\",\n  \"meta\",\n  \"base\",\n];\n\nexport const useJSXPreview = () => {\n  const context = useContext(JSXPreviewContext);\n  if (!context) {\n    throw new Error(\"JSXPreview components must be used within JSXPreview\");\n  }\n  return context;\n};\n\nconst TAG_NAME_START = /[a-zA-Z]/;\nconst TAG_NAME_CHAR = /[a-zA-Z0-9]/;\n\ninterface JsxTagMatch {\n  tagName: string;\n  type: \"opening\" | \"closing\" | \"self-closing\";\n  endIndex: number;\n}\n\n/**\n * Finds the next complete JSX tag at or after `fromIndex`, tracking brace\n * depth and quoted strings so a `>` inside an attribute expression (e.g.\n * `onClick={() => foo()}`) is never mistaken for the tag's own closing\n * bracket (the previous plain regex did exactly that). Walks the ORIGINAL\n * string by absolute index — no per-iteration substring slicing — so one\n * pass over the whole input is linear.\n */\nfunction findNextJsxTag(code: string, fromIndex: number): JsxTagMatch | null {\n  const len = code.length;\n  let i = fromIndex;\n\n  while (i < len) {\n    if (code[i] !== \"<\") {\n      i++;\n      continue;\n    }\n\n    let j = i + 1;\n    const closing = code[j] === \"/\";\n    if (closing) j++;\n\n    const nameStart = j;\n    if (!TAG_NAME_START.test(code[nameStart] ?? \"\")) {\n      i++;\n      continue;\n    }\n    j++;\n    while (j < len && TAG_NAME_CHAR.test(code[j] ?? \"\")) {\n      j++;\n    }\n    const tagName = code.slice(nameStart, j);\n\n    let depth = 0;\n    let quote: string | null = null;\n    let k = j;\n    let closedAt = -1;\n    let selfClosing = false;\n\n    while (k < len) {\n      const ch = code[k];\n      if (quote) {\n        if (ch === quote) quote = null;\n        k++;\n        continue;\n      }\n      if (ch === '\"' || ch === \"'\") {\n        quote = ch;\n        k++;\n        continue;\n      }\n      if (ch === \"{\") {\n        depth++;\n        k++;\n        continue;\n      }\n      if (ch === \"}\") {\n        depth = Math.max(0, depth - 1);\n        k++;\n        continue;\n      }\n      if (depth === 0 && ch === \">\") {\n        let p = k - 1;\n        while (p > j && code[p] === \" \") p--;\n        selfClosing = code[p] === \"/\";\n        closedAt = k + 1;\n        break;\n      }\n      k++;\n    }\n\n    // No closing '>' yet for this tag at this depth — it is incomplete, not\n    // a match; the caller treats everything from here on as trailing text.\n    if (closedAt === -1) {\n      return null;\n    }\n\n    return {\n      endIndex: closedAt,\n      tagName,\n      type: closing ? \"closing\" : selfClosing ? \"self-closing\" : \"opening\",\n    };\n  }\n\n  return null;\n}\n\nconst stripIncompleteTag = (text: string) => {\n  // Find the last '<' that isn't part of a complete tag\n  const lastOpen = text.lastIndexOf(\"<\");\n  if (lastOpen === -1) {\n    return text;\n  }\n\n  const afterOpen = text.slice(lastOpen);\n  // If there's no closing '>' after the last '<', it's an incomplete tag\n  if (!afterOpen.includes(\">\")) {\n    return text.slice(0, lastOpen);\n  }\n\n  return text;\n};\n\nconst completeJsxTag = (code: string) => {\n  const stack: string[] = [];\n  let position = 0;\n\n  while (position < code.length) {\n    const match = findNextJsxTag(code, position);\n    if (!match) {\n      // No more complete tags ahead; everything past `position` is trailing\n      // text (possibly a mid-typed tag), handled by stripIncompleteTag below.\n      break;\n    }\n\n    if (match.type === \"opening\") {\n      stack.push(match.tagName);\n    } else if (match.type === \"closing\") {\n      stack.pop();\n    }\n\n    position = match.endIndex;\n  }\n\n  return (\n    code.slice(0, position) +\n    stripIncompleteTag(code.slice(position)) +\n    [...stack]\n      .reverse()\n      .map((tag) => `</${tag}>`)\n      .join(\"\")\n  );\n};\n\n/** How often `completeJsxTag` may re-run while content is still streaming in. */\nconst STREAM_RECOMPUTE_THROTTLE_MS = 80;\n\n/**\n * Tag-balances `jsx` like `completeJsxTag`, but while `isStreaming` is true it\n * skips a fresh (expensive, whole-string) recompute more often than once per\n * `STREAM_RECOMPUTE_THROTTLE_MS` — otherwise every incoming token re-scans the\n * entire accumulated string from scratch. Settled input (`isStreaming` false)\n * always recomputes immediately so the final render is exact.\n */\nfunction useCompletedJsx(jsx: string, isStreaming: boolean): string {\n  const cacheRef = useRef({ jsx, result: completeJsxTag(jsx), time: 0 });\n\n  return useMemo(() => {\n    const cache = cacheRef.current;\n    if (jsx === cache.jsx) return cache.result;\n\n    const now = Date.now();\n    if (isStreaming && now - cache.time < STREAM_RECOMPUTE_THROTTLE_MS) {\n      return cache.result;\n    }\n\n    const result = completeJsxTag(jsx);\n    cacheRef.current = { jsx, result, time: now };\n    return result;\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- cacheRef is a stable ref, not reactive state\n  }, [jsx, isStreaming]);\n}\n\nexport type JSXPreviewProps = ComponentProps<\"div\"> & {\n  jsx: string;\n  /** Content is arriving incrementally — build up, suppress transient errors. */\n  isStreaming?: boolean;\n  /**\n   * No renderable content yet (fetch-then-show). Forces the `pending` state so\n   * `JSXPreviewSkeleton` shows until `jsx` arrives. Orthogonal to `isStreaming`.\n   */\n  loading?: boolean;\n  components?: JsxParserProps[\"components\"];\n  bindings?: JsxParserProps[\"bindings\"];\n  onError?: (error: Error) => void;\n};\n\nexport const JSXPreview = memo(\n  ({\n    jsx,\n    isStreaming = false,\n    loading = false,\n    components,\n    bindings,\n    onError,\n    className,\n    children,\n    ...props\n  }: JSXPreviewProps) => {\n    const [prevJsx, setPrevJsx] = useState(jsx);\n    const [error, setError] = useState<Error | null>(null);\n    const [hasRendered, setHasRendered] = useState(false);\n\n    // Clear the terminal error when jsx changes (derived state pattern)\n    if (jsx !== prevJsx) {\n      setPrevJsx(jsx);\n      setError(null);\n    }\n\n    // The tag-balanced best-effort of the current input. When it differs from the\n    // raw jsx, the input ends mid-tag → it is INCOMPLETE (still streaming / being\n    // typed), not invalid. This is the timer-free \"not-ready\" signal. Throttled\n    // while streaming so every incoming token doesn't re-scan the whole string.\n    const completed = useCompletedJsx(jsx, isStreaming);\n    const isIncomplete = jsx.trim() !== \"\" && completed !== jsx;\n\n    const processedJsx = useMemo(() => {\n      if (loading) return \"\";\n      return isStreaming || isIncomplete ? completed : jsx;\n    }, [jsx, isStreaming, loading, isIncomplete, completed]);\n\n    const status = useMemo<JSXPreviewStatus>(() => {\n      if (loading) return \"pending\";\n      if (jsx.trim() === \"\") return hasRendered ? \"ready\" : \"idle\";\n      if (isStreaming || isIncomplete) return \"pending\";\n      return error != null ? \"error\" : \"ready\";\n    }, [jsx, isStreaming, loading, isIncomplete, error, hasRendered]);\n\n    const contextValue = useMemo(\n      () => ({\n        bindings,\n        components,\n        error,\n        hasRendered,\n        isStreaming,\n        jsx,\n        loading,\n        onErrorProp: onError,\n        processedJsx,\n        setError,\n        setHasRendered,\n        status,\n      }),\n      [\n        bindings,\n        components,\n        error,\n        hasRendered,\n        isStreaming,\n        jsx,\n        loading,\n        onError,\n        processedJsx,\n        status,\n      ],\n    );\n\n    return (\n      <JSXPreviewContext.Provider value={contextValue}>\n        <div className={cn(\"relative\", className)} {...props}>\n          {children}\n        </div>\n      </JSXPreviewContext.Provider>\n    );\n  },\n);\n\nJSXPreview.displayName = \"JSXPreview\";\n\nexport type JSXPreviewContentProps = Omit<ComponentProps<\"div\">, \"children\">;\n\nexport const JSXPreviewContent = memo(({ className, ...props }: JSXPreviewContentProps) => {\n  const { processedJsx, status, components, bindings, setError, setHasRendered, onErrorProp } =\n    useJSXPreview();\n  const lastGoodJsxRef = useRef(\"\");\n  // `erroredJsx` is committed in an effect (never during render). The parser\n  // reports errors synchronously DURING its own render, so `handleError` only\n  // stashes a ref — committing state there would be a setState-in-render.\n  const [erroredJsx, setErroredJsx] = useState<string | null>(null);\n  const pendingErrorRef = useRef<{ jsx: string; error: Error } | null>(null);\n\n  // Reset the per-input error flag synchronously when the content changes.\n  const prevProcessedRef = useRef(processedJsx);\n  if (prevProcessedRef.current !== processedJsx) {\n    prevProcessedRef.current = processedJsx;\n    if (erroredJsx !== null) setErroredJsx(null);\n  }\n  const hadError = erroredJsx === processedJsx;\n\n  const handleError = useCallback(\n    (error: Error) => {\n      pendingErrorRef.current = { error, jsx: processedJsx };\n    },\n    [processedJsx],\n  );\n\n  // After commit, reconcile the parse outcome. A fresh error becomes terminal\n  // (surfaces `JSXPreviewError`) ONLY when settled — for a `pending` input it is\n  // held silently (build-up keeps going behind the last good render). A clean\n  // render records the last-good JSX and marks the first paint.\n  useEffect(() => {\n    const failed = pendingErrorRef.current?.jsx === processedJsx;\n    if (failed) {\n      const { error } = pendingErrorRef.current!;\n      pendingErrorRef.current = null;\n      if (erroredJsx !== processedJsx) setErroredJsx(processedJsx);\n      if (status !== \"pending\") {\n        setError(error);\n        onErrorProp?.(error);\n      }\n    } else if (erroredJsx !== processedJsx && processedJsx.trim() !== \"\") {\n      lastGoodJsxRef.current = processedJsx;\n      setHasRendered(true);\n    }\n  }, [processedJsx, status, erroredJsx, setError, setHasRendered, onErrorProp]);\n\n  // The error slot and the skeleton own the \"error\" / nothing-yet states.\n  if (status !== \"ready\" && status !== \"pending\") {\n    return null;\n  }\n\n  // While pending, a failed parse falls back to the last good render (which may\n  // be empty on first paint — the skeleton covers that).\n  const displayJsx = hadError ? lastGoodJsxRef.current : processedJsx;\n\n  return (\n    <div className={cn(\"jsx-preview-content\", className)} {...props}>\n      <JsxParser\n        allowUnknownElements={false}\n        bindings={bindings}\n        blacklistedTags={JSX_PREVIEW_BLACKLISTED_TAGS}\n        components={components}\n        jsx={displayJsx}\n        onError={handleError}\n        renderInWrapper={false}\n      />\n    </div>\n  );\n});\n\nJSXPreviewContent.displayName = \"JSXPreviewContent\";\n\nexport type JSXPreviewSkeletonProps = ComponentProps<\"div\">;\n\n/**\n * The not-ready placeholder (loading-states.md §slot anatomy). Renders a\n * layout-shaped `Skeleton` while the preview is `pending` and nothing has\n * painted yet — so a streaming/incomplete surface BUILDS UP behind a skeleton\n * instead of flashing the error box. Pass `children` to override the shape.\n */\nexport const JSXPreviewSkeleton = memo(\n  ({ className, children, ...props }: JSXPreviewSkeletonProps) => {\n    const { status, hasRendered } = useJSXPreview();\n\n    // Show only before the first successful paint; once content builds up, the\n    // partial render is its own affordance (no skeleton-over-content).\n    const show = !hasRendered && status === \"pending\";\n\n    // The live region must exist in the DOM BEFORE its text appears, or NVDA\n    // skips the announcement (ARIA22). So the wrapper is ALWAYS rendered (it\n    // collapses to `sr-only` when idle) and the label is set one tick later via\n    // an effect — guaranteeing an empty region precedes the \"Loading…\" text.\n    const [announce, setAnnounce] = useState(false);\n    useEffect(() => setAnnounce(show), [show]);\n\n    return (\n      <div\n        className={cn(show ? \"space-y-2\" : \"sr-only\", className)}\n        role=\"status\"\n        aria-live=\"polite\"\n        {...props}\n      >\n        <span className=\"sr-only\">{announce ? \"Loading preview…\" : \"\"}</span>\n        {show\n          ? (children ?? (\n              <>\n                <Skeleton className=\"h-20 w-full\" />\n                <div className=\"grid grid-cols-3 gap-2\">\n                  <Skeleton className=\"h-16\" />\n                  <Skeleton className=\"h-16\" />\n                  <Skeleton className=\"h-16\" />\n                </div>\n              </>\n            ))\n          : null}\n      </div>\n    );\n  },\n);\n\nJSXPreviewSkeleton.displayName = \"JSXPreviewSkeleton\";\n\nexport type JSXPreviewErrorProps = ComponentProps<\"div\"> & {\n  children?: ReactNode | ((error: Error) => ReactNode);\n};\n\nconst renderChildren = (\n  children: ReactNode | ((error: Error) => ReactNode),\n  error: Error,\n): ReactNode => {\n  if (typeof children === \"function\") {\n    return children(error);\n  }\n  return children;\n};\n\nexport const JSXPreviewError = memo(({ className, children, ...props }: JSXPreviewErrorProps) => {\n  const { status, error } = useJSXPreview();\n\n  // Terminal failures only — never while loading / streaming / incomplete.\n  if (status !== \"error\" || !error) {\n    return null;\n  }\n\n  return (\n    <div\n      // The status wash is the separation gesture (#194, research 08 §B.1):\n      // `bg-destructive/10` + the destructive ink/icon already mark the region,\n      // and the alpha-wash survives high decoration (token-inequality escape from the\n      // drawn-not-filled rule), so the old `border border-destructive/50` was\n      // redundant on every theme — dropped. Text + icon use `text-destructive-text`\n      // (the on-surface destructive ink ramp) — raw `text-destructive` fails AA on\n      // the wash (3.86:1) and goes near-white in dark; the *-text token is\n      // AA-guaranteed and keeps the destructive cue in every theme.\n      className={cn(\n        \"flex items-center gap-2 rounded-md bg-destructive/10 p-3 text-body text-destructive-text\",\n        className,\n      )}\n      role=\"alert\"\n      {...props}\n    >\n      {children ? (\n        renderChildren(children, error)\n      ) : (\n        <>\n          <AlertCircle className=\"size-4 shrink-0\" />\n          <span>{error.message}</span>\n        </>\n      )}\n    </div>\n  );\n});\n\nJSXPreviewError.displayName = \"JSXPreviewError\";\n"],"mappings":"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","names":["jsx"]}

package/dist/chunk-NMVNNO3L.js

@@ -0,0 +1,10 @@
+"use client";
+
+// src/_flow-lazy.ts
+import { lazy } from "react";
+var lazyFlowPart = (pick) => lazy(() => import("./_flow-boundary.js").then((m) => ({ default: pick(m) })));
+
+export {
+  lazyFlowPart
+};
+//# sourceMappingURL=chunk-NMVNNO3L.js.map

package/dist/chunk-NMVNNO3L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_flow-lazy.ts"],"sourcesContent":["/**\n * The one dynamic-import seam every React-Flow-backed component in\n * `@elabs-ai/components-ai` goes through.\n *\n * `@xyflow/react` declares no `sideEffects`, so a static import from any of the\n * six public modules (`canvas`, `controls`, `edge`, `node`, `panel`, `toolbar`)\n * put the whole engine into the entry chunk of every consumer. They all reach it\n * through **one** boundary module — `_flow-boundary.tsx` — rather than six, so\n * the engine lands in exactly one chunk: six boundaries would mean six chunks\n * each pulling the same engine, and a `<Node>` rendered inside an already-loaded\n * `<Canvas>` would fetch a second copy.\n *\n * Because every part resolves from the same specifier, the parts _inside_ a\n * canvas resolve from the module cache the canvas already populated.\n *\n * This module is deliberately NOT itself a lazy boundary (it carries no such\n * docblock tag, and `pnpm heavy-deps:check` would fail the six static imports\n * below if it did): it holds no engine import of its own, only the `import()`\n * call, so the public modules may import it statically. See ADR 0019.\n */\nimport { lazy } from \"react\";\nimport type { ComponentType, LazyExoticComponent } from \"react\";\n\ntype FlowBoundaryModule = typeof import(\"./_flow-boundary\");\n\n/**\n * Wrap one implementation from the React Flow boundary in a `lazy()` component.\n *\n * @param pick Selects the implementation from the boundary module.\n */\nexport const lazyFlowPart = <P>(\n  pick: (module: FlowBoundaryModule) => ComponentType<P>,\n): LazyExoticComponent<ComponentType<P>> =>\n  lazy(() => import(\"./_flow-boundary\").then((m) => ({ default: pick(m) })));\n"],"mappings":";;;AAoBA,SAAS,YAAY;AAUd,IAAM,eAAe,CAC1B,SAEA,KAAK,MAAM,OAAO,qBAAkB,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,KAAK,CAAC,EAAE,EAAE,CAAC;","names":[]}

package/dist/chunk-NP7VID4K.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-NP7VID4K.js.map

package/dist/chunk-NP7VID4K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}