@opengeni/react 7.4.0 → 7.5.0-canary.36919050519001

package/dist/chunk-YBXQDQFX.js

@@ -0,0 +1,1772 @@
+import {
+  ArtifactBadge,
+  ArtifactButton,
+  ArtifactLabelsProvider,
+  ArtifactSelect,
+  useArtifactLabels
+} from "./chunk-5CVXZA3Y.js";
+import {
+  useOpenGeniLinkResolver
+} from "./chunk-XCHWDJ22.js";
+import {
+  PublishedHtmlArtifactFrame,
+  loadSiteSnapshot
+} from "./chunk-SCOTPE2I.js";
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
+
+// src/components/artifacts/chat-interactive-block.tsx
+import { useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+
+// src/components/artifacts/artifact-sandbox.tsx
+import {
+  ArrowLeftIcon,
+  Globe2Icon,
+  Maximize2Icon,
+  PlugZapIcon,
+  RefreshCwIcon,
+  SparklesIcon
+} from "lucide-react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ArtifactSandbox(props) {
+  const labels = useArtifactLabels();
+  const [reloadKey, setReloadKey] = useState(0);
+  const [focused, setFocused] = useState(false);
+  const frameRef = useRef(null);
+  const modalRef = useRef(false);
+  useLayoutEffect(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+    if (focused) {
+      frame.close();
+      frame.showModal();
+      modalRef.current = true;
+    } else if (modalRef.current) {
+      frame.close();
+      frame.show();
+      modalRef.current = false;
+    }
+  }, [focused]);
+  const reload = () => {
+    setReloadKey((value) => value + 1);
+  };
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref: frameRef,
+      open: true,
+      "aria-label": props.title,
+      onCancel: (event) => {
+        event.preventDefault();
+        setFocused(false);
+      },
+      className: cn(
+        "og-root static m-0 w-full max-h-none max-w-none overflow-hidden rounded-2xl border border-border/80 bg-white p-0 text-left shadow-sm",
+        props.className,
+        props.fill && "flex min-h-0 flex-col",
+        focused && "fixed inset-0 z-50 flex h-dvh w-dvw flex-col rounded-none border-0 bg-surface shadow-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border/80 bg-surface/95 px-3 sm:px-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+            focused ? /* @__PURE__ */ jsxs(
+              ArtifactButton,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 shrink-0 px-2",
+                onClick: () => setFocused(false),
+                children: [
+                  /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "mr-2 size-3.5" }),
+                  labels.back
+                ]
+              }
+            ) : null,
+            !focused && props.showTitle !== false ? /* @__PURE__ */ jsx("span", { className: "grid size-6 shrink-0 place-items-center rounded-md bg-surface-2 text-fg-muted", children: /* @__PURE__ */ jsx(Globe2Icon, { className: "size-3.5" }) }) : null,
+            props.showTitle !== false && /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-semibold text-fg", children: props.title }),
+            props.headerControls,
+            props.versionLabel ? /* @__PURE__ */ jsx(ArtifactBadge, { className: "hidden h-5 rounded-md border-border/80 px-1.5 text-2xs font-normal text-fg-muted sm:inline-flex", children: props.versionLabel }) : null,
+            props.connectedToolCount ? /* @__PURE__ */ jsxs(
+              ArtifactBadge,
+              {
+                className: "hidden h-5 max-w-40 gap-1 rounded-md border-border/80 px-1.5 text-2xs font-normal text-fg-muted sm:inline-flex",
+                title: labels.toolsAvailable(props.connectedToolCount),
+                children: [
+                  /* @__PURE__ */ jsx(PlugZapIcon, { className: "size-3" }),
+                  labels.toolCount(props.connectedToolCount)
+                ]
+              }
+            ) : null,
+            props.sourceFileCount ? /* @__PURE__ */ jsx("span", { className: "hidden text-2xs text-fg-subtle xl:inline", children: labels.sourceFileCount(props.sourceFileCount) }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            focused && props.onEdit ? /* @__PURE__ */ jsxs(
+              ArtifactButton,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 px-2",
+                disabled: props.editDisabled,
+                onClick: props.onEdit,
+                children: [
+                  /* @__PURE__ */ jsx(SparklesIcon, { className: "mr-2 size-3.5" }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.editWithAgent }),
+                  /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: labels.editShort })
+                ]
+              }
+            ) : null,
+            props.showLiveStatus !== false && /* @__PURE__ */ jsxs("span", { className: "mr-1 hidden items-center gap-1.5 text-2xs font-medium text-fg-muted sm:inline-flex", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-status-success ring-4 ring-status-success/10" }),
+              labels.live
+            ] }),
+            /* @__PURE__ */ jsx(
+              ArtifactButton,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "size-8 rounded-md text-fg-muted hover:text-fg",
+                "aria-label": labels.reloadSite,
+                onClick: reload,
+                children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3.5" })
+              }
+            ),
+            !focused ? /* @__PURE__ */ jsx(
+              ArtifactButton,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "size-8 rounded-md text-fg-muted hover:text-fg",
+                "aria-label": labels.openFullScreen,
+                onClick: () => setFocused(true),
+                children: /* @__PURE__ */ jsx(Maximize2Icon, { className: "size-3.5" })
+              }
+            ) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          PublishedHtmlArtifactFrame,
+          {
+            title: props.title,
+            html: props.html,
+            autoHeight: Boolean(props.autoHeight && !focused),
+            ...props.theme ? { theme: props.theme } : {},
+            ...!focused && props.height ? { style: { height: props.height } } : {},
+            ...props.toolBridge ? { toolBridge: props.toolBridge } : {},
+            className: cn(
+              "block h-[clamp(30rem,62vh,48rem)] w-full border-0 bg-white",
+              props.fill && "h-0 min-h-0 flex-1",
+              focused && "min-h-0 flex-1"
+            )
+          },
+          reloadKey
+        )
+      ]
+    }
+  );
+}
+
+// src/components/artifacts/deferred-chat-media.tsx
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function DeferredChatMedia({
+  children,
+  height,
+  label,
+  actionLabel
+}) {
+  const host = useRef2(null);
+  const [active, setActive] = useState2(false);
+  useEffect(() => {
+    const node = host.current;
+    if (active || !node) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setActive(true);
+      return;
+    }
+    let disposed = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (disposed || !entries.some((entry) => entry.isIntersecting)) return;
+        setActive(true);
+        observer.disconnect();
+      },
+      {
+        root: node.closest("[data-og-timeline-scroller]"),
+        rootMargin: "200px 0px"
+      }
+    );
+    observer.observe(node);
+    return () => {
+      disposed = true;
+      observer.disconnect();
+    };
+  }, [active]);
+  return /* @__PURE__ */ jsx2("div", { ref: host, "data-chat-media": active ? "active" : "deferred", children: active ? children : /* @__PURE__ */ jsx2("div", { className: "flex w-full items-center justify-center", style: { height }, children: /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      className: "rounded-md px-3 py-2 text-sm text-fg-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-ring",
+      onClick: () => setActive(true),
+      children: actionLabel ?? `Load ${label ?? "media"}`
+    }
+  ) }) });
+}
+
+// src/components/artifacts/visualization-assets.gen.ts
+var VISUALIZATION_CSS = `/* Adapted from Codex visualize 1.0.32; shared with the OpenGeni visualization skill. */
+:root {
+  color-scheme: light dark;
+  background-color: var(
+    --background,
+    var(--color-background-primary, light-dark(rgb(255 255 255), rgb(24 24 24)))
+  ) !important;
+
+  /* Agent-facing contract; keep in sync with SKILL.md. */
+  --background: var(
+    --color-background-primary,
+    light-dark(rgb(255 255 255), rgb(24 24 24))
+  );
+  --foreground: var(
+    --color-text-primary,
+    light-dark(rgb(26 28 31), rgb(255 255 255))
+  );
+  --card: color-mix(in oklab, var(--foreground) 5%, var(--background));
+  --card-foreground: var(
+    --color-text-primary,
+    light-dark(rgb(26 28 31), rgb(255 255 255))
+  );
+  --popover: var(
+    --color-background-secondary,
+    light-dark(rgb(255 255 255), rgb(45 45 45))
+  );
+  --popover-foreground: var(
+    --color-text-primary,
+    light-dark(rgb(26 28 31), rgb(255 255 255))
+  );
+  --primary: var(
+    --color-text-info,
+    light-dark(rgb(51 156 255), rgb(131 195 255))
+  );
+  --primary-foreground: var(
+    --color-text-inverse,
+    light-dark(rgb(255 255 255), rgb(13 13 13))
+  );
+  --secondary: var(
+    --color-background-secondary,
+    light-dark(rgb(255 255 255 / 96%), rgb(54 54 54 / 96%))
+  );
+  --secondary-foreground: var(
+    --color-text-primary,
+    light-dark(rgb(26 28 31), rgb(255 255 255))
+  );
+  --muted: color-mix(in srgb, var(--foreground) 10%, transparent);
+  --muted-foreground: var(
+    --color-text-secondary,
+    light-dark(rgb(26 28 31 / 49.4%), rgb(255 255 255 / 49.8%))
+  );
+  --accent: var(
+    --color-background-info,
+    light-dark(rgb(229 242 255), rgb(13 39 63))
+  );
+  --accent-foreground: var(
+    --color-text-info,
+    light-dark(rgb(51 156 255), rgb(131 195 255))
+  );
+  --destructive: var(
+    --color-text-warning,
+    light-dark(rgb(226 85 7), rgb(255 133 73))
+  );
+  --border: var(
+    --color-border-secondary,
+    light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))
+  );
+  --input: var(
+    --color-border-primary,
+    light-dark(
+      rgb(26 28 31 / 11.8%),
+      color-mix(in oklab, rgb(0 0 0) 10%, transparent)
+    )
+  );
+  --ring: var(
+    --color-ring-primary,
+    light-dark(rgb(51 156 255), rgb(131 195 255 / 76%))
+  );
+  --font-size-base: var(--font-text-md-size, 14px);
+  --blue: light-dark(rgb(51 156 255), rgb(51 156 255));
+  --orange: light-dark(rgb(226 85 7), rgb(251 106 34));
+  --green: light-dark(rgb(0 162 64), rgb(64 201 119));
+  --red: light-dark(rgb(224 46 42), rgb(255 103 100));
+  --purple: light-dark(rgb(146 79 247), rgb(173 123 249));
+  --yellow: light-dark(rgb(255 195 0), rgb(255 210 64));
+  --viz-series-1: var(--primary);
+  --viz-series-2: light-dark(rgb(243 136 59), rgb(245 154 86));
+  --viz-series-3: light-dark(rgb(93 201 119), rgb(116 213 139));
+  --viz-series-4: light-dark(rgb(235 119 177), rgb(240 143 192));
+  --viz-series-5: light-dark(rgb(155 121 236), rgb(170 145 239));
+  --viz-series-6: light-dark(rgb(58 185 177), rgb(90 203 194));
+
+  /* Internal implementation variables; not part of the agent contract. */
+  --font-sans: -apple-system, system-ui, "Segoe UI", sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+  --font-size-normal: max(11px, var(--font-size-base));
+  --font-size-tooltip: calc(var(--font-size-base) - 1px);
+  --font-size-small: max(11px, calc(var(--font-size-base) - 2px));
+  --font-size-h1: calc(var(--font-size-normal) * 1.7142857143);
+  --font-size-h2: calc(var(--font-size-normal) * 1.4285714286);
+  --font-size-h3: calc(var(--font-size-normal) * 1.2857142857);
+  --font-weight-normal: 430;
+  --font-weight-medium: 500;
+  --icon-size: 16px;
+  --line-height-normal: calc(var(--font-size-normal) * 1.5);
+  --line-height-tooltip: calc(var(--font-size-tooltip) * 1.4285714286);
+  --line-height-small: calc(var(--font-size-small) + 4px);
+  --corner-shape: round;
+  --radius: var(--border-radius-lg, 10px);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-2xl: calc(var(--radius) * 1.6);
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);
+  --checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M 12.8961 3.64101C13.1297 3.41418 13.4984 3.37523 13.7779 3.56581C14.0571 3.75635 14.1554 4.11331 14.0299 4.41347L13.9615 4.53847L7.71151 13.7045C7.59411 13.8767 7.4063 13.9877 7.19881 14.0072C6.99136 14.0267 6.78564 13.9533 6.63826 13.806L2.88826 10.056L2.79842 9.9457C2.6192 9.67407 2.64927 9.30496 2.88826 9.06581C3.12738 8.82669 3.49647 8.79676 3.76815 8.97597L3.8785 9.06581L7.03084 12.2182L12.8053 3.74941L12.8961 3.64101Z'/%3E%3C/svg%3E");
+
+  /* Legacy aliases; not part of the current agent contract. */
+  --viz-bg: transparent;
+  --viz-panel: var(--card);
+  --viz-border: var(--border);
+  --viz-text: var(--foreground);
+  --viz-muted: var(--muted-foreground);
+  --viz-accent: var(--primary);
+  --viz-accent-text: var(--primary-foreground);
+  --viz-accent-bg: var(--accent);
+  --viz-font-size: var(--font-size-base);
+  --viz-warning: var(--destructive);
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html > body {
+  /* Preserve MCP aliases for older inline renderers without creating :root cycles. */
+  --color-background-primary: var(
+    --background,
+    light-dark(rgb(255 255 255), rgb(24 24 24))
+  );
+  --color-text-primary: var(
+    --foreground,
+    light-dark(rgb(26 28 31), rgb(255 255 255))
+  );
+  --color-border-secondary: var(
+    --border,
+    light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))
+  );
+
+  margin: 0;
+  padding: var(--visualize-paint-gutter, 16px);
+  color: var(--foreground);
+  background: transparent !important;
+  font-family: var(--font-sans) !important;
+  font-size: var(--font-size-normal);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+}
+
+a {
+  color: color-mix(in srgb, var(--viz-accent) 80%, var(--viz-text) 20%);
+  cursor: pointer;
+  font-weight: var(--font-weight-medium, 500);
+  text-decoration: none;
+  text-underline-offset: 2px;
+}
+
+a:is(:hover, :focus-visible) {
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  text-decoration-thickness: 0.5px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin-block: 0;
+}
+
+h1 {
+  font-size: var(--font-size-h1);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.25;
+}
+
+h2 {
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.25;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.3;
+}
+
+b,
+strong,
+th {
+  font-weight: var(--font-weight-medium);
+}
+
+code:not(pre code) {
+  display: inline;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  corner-shape: var(--corner-shape);
+  background: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+  overflow-wrap: anywhere;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  word-break: break-word;
+}
+
+.table-responsive {
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--foreground);
+  font: inherit;
+  text-align: start;
+}
+
+.table :is(th, td) {
+  padding-block: 10px;
+  padding-inline: 0 24px;
+  overflow-wrap: anywhere;
+  border-bottom: 1px solid var(--border);
+  text-align: start;
+  vertical-align: top;
+}
+
+.table-responsive > .table :is(th, td) {
+  overflow-wrap: break-word;
+}
+
+.table :is(th, td):last-child {
+  padding-inline-end: 0;
+}
+
+.table :is(caption, thead th) {
+  font-weight: 600;
+}
+
+.table thead th {
+  padding-block: 8px;
+  border-bottom-color: color-mix(in srgb, var(--foreground) 16%, transparent);
+}
+
+.table tbody tr:last-child :is(th, td) {
+  border-bottom: 0;
+}
+
+.table.table-sm :is(th, td) {
+  padding-block: 6px;
+}
+
+.table.table-sm :is(th, td):not(:last-child) {
+  padding-inline-end: 16px;
+}
+
+.table :is(.text-end, [align="right"]) {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.table :is(.text-center, [align="center"]) {
+  text-align: center;
+}
+
+.table .text-nowrap {
+  white-space: nowrap;
+}
+
+#widget {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  padding: 0;
+  background: transparent !important;
+}
+
+.card {
+  min-width: 0;
+  padding: 12px;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  border-radius: var(--radius-2xl);
+  corner-shape: var(--corner-shape);
+  color: var(--card-foreground);
+  background: var(--card);
+}
+
+#widget > :not(.card, .progress) {
+  width: 100% !important;
+  max-width: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.tooltip {
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  left: 0;
+  width: max-content;
+  max-width: min(
+    20rem,
+    var(--tooltip-available-width, calc(100vw - 10px)),
+    calc(100vw - 10px)
+  );
+  max-height: min(
+    var(--tooltip-available-height, calc(100vh - 10px)),
+    calc(100vh - 10px)
+  );
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  corner-shape: var(--corner-shape);
+  color: var(--popover-foreground);
+  background: var(--popover);
+  box-shadow: none;
+  font-size: var(--font-size-tooltip);
+  line-height: var(--line-height-tooltip);
+  overflow-wrap: break-word;
+  white-space: normal;
+  pointer-events: none;
+  user-select: none;
+}
+
+.viz-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(max(180px, 24%), 1fr));
+  gap: 10px;
+}
+
+.viz-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.viz-stat-value {
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.25;
+}
+
+.viz-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+hr {
+  width: 100%;
+  height: 1px;
+  margin-block: 6px;
+  border: 0;
+  background: var(--border);
+}
+
+.nav {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 4px;
+}
+
+.progress {
+  display: flex;
+  height: 8px;
+  margin-block: calc((var(--line-height-normal, 1.5em) - 8px) / 2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--muted);
+}
+
+.progress-bar:only-child {
+  border-radius: var(--radius-full);
+}
+
+.progress-bar {
+  height: 100%;
+  flex-shrink: 0;
+  border: 0;
+  background: var(--viz-series-1);
+}
+
+.viz-badge {
+  padding: 3px 8px;
+  border-radius: var(--radius-full);
+  color: var(--accent-foreground);
+  background: var(--accent);
+  font-weight: var(--font-weight-medium);
+}
+
+small,
+.text-small,
+.viz-badge {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+}
+
+.text-muted {
+  color: var(--muted-foreground);
+}
+
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.viz-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.viz-controls > .form-label {
+  display: grid;
+  min-width: min(100%, 260px);
+  flex: 1 1 280px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 2px 12px;
+  margin-bottom: 0;
+}
+
+.viz-controls > .form-label > :is(.form-control, .form-range, .form-select) {
+  grid-column: 1 / -1;
+}
+
+.btn,
+.nav-link,
+.form-check-input,
+.form-control,
+.form-range,
+.form-select {
+  font: inherit;
+}
+
+.btn,
+.nav-link {
+  appearance: button;
+  display: inline-flex;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  min-height: 28px;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0 8px;
+  -webkit-app-region: no-drag;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-lg);
+  corner-shape: var(--corner-shape);
+  color: var(--secondary-foreground);
+  background: var(--secondary);
+  cursor: var(--cursor-interaction, pointer);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+.btn:is(.btn-block, .viz-tile) {
+  inline-size: 100%;
+}
+
+.btn.viz-tile {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+a.btn {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn:not(:disabled):hover,
+.nav-link:not(:disabled):not([aria-disabled="true"]):hover {
+  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
+}
+
+.btn-primary {
+  border-color: transparent;
+  color: var(--primary-foreground);
+  background: var(--foreground);
+  background-clip: padding-box;
+}
+
+.btn-primary .text-muted {
+  color: color-mix(in srgb, var(--primary-foreground) 50%, transparent);
+}
+
+.btn-primary:not(:disabled):hover {
+  background: color-mix(in srgb, var(--foreground) 80%, transparent);
+  background-clip: padding-box;
+}
+
+.btn-ghost {
+  border-color: transparent;
+  color: var(--muted-foreground);
+  background: transparent;
+}
+
+.btn-ghost:not(:disabled):hover {
+  color: var(--foreground);
+  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
+}
+
+.nav-pills .nav-link {
+  min-width: 0;
+  border-color: transparent;
+  color: var(--muted-foreground);
+  background: transparent;
+}
+
+.nav-justified .nav-link {
+  flex: 1 1 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.nav-pills .nav-link.active {
+  color: var(--foreground);
+  background: var(--muted);
+}
+
+.btn:disabled,
+.nav-link:disabled,
+.nav-link[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+[data-lucide] {
+  stroke-width: 1.6;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--foreground);
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  min-height: 28px;
+  padding: 0 8px;
+  outline: none;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-lg);
+  corner-shape: var(--corner-shape);
+  color: var(--foreground);
+  background: var(--secondary);
+}
+
+.form-control::placeholder {
+  color: var(--muted-foreground);
+}
+
+.form-control[type="file"] {
+  padding: 0;
+  overflow: hidden;
+  cursor: var(--cursor-interaction, pointer);
+}
+
+.form-control[type="file"]::file-selector-button {
+  min-height: 26px;
+  margin-right: 8px;
+  padding: 0 8px;
+  border: 0;
+  border-right: 1px solid var(--input);
+  color: var(--secondary-foreground);
+  background: var(--secondary);
+  cursor: inherit;
+  font: inherit;
+}
+
+.form-control[type="file"]:not(:disabled):hover::file-selector-button {
+  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
+}
+
+.form-control-color[type="color"] {
+  width: 40px;
+  height: 28px;
+  padding: 3px;
+  cursor: var(--cursor-interaction, pointer);
+}
+
+.form-control-color[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.form-control-color[type="color"]::-webkit-color-swatch {
+  border: 0;
+  border-radius: calc(var(--radius-lg) - 4px);
+  corner-shape: var(--corner-shape);
+}
+
+textarea.form-control {
+  height: auto;
+  min-height: 72px;
+  padding: 8px 10px;
+  resize: vertical;
+}
+
+.form-control:focus-visible {
+  border-color: var(--ring);
+  box-shadow: inset 0 0 0 1px var(--ring);
+}
+
+.form-control:disabled,
+.form-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.form-select {
+  appearance: none;
+  display: block;
+  width: 100%;
+  min-height: 28px;
+  margin: 0;
+  padding: 0 32px 0 8px;
+  outline: none;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-lg);
+  corner-shape: var(--corner-shape);
+  color: var(--foreground);
+  background-color: var(--secondary);
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
+    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
+  background-position:
+    calc(100% - 14px) 50%,
+    calc(100% - 10px) 50%;
+  background-repeat: no-repeat;
+  background-size: 4px 4px;
+  cursor: var(--cursor-interaction, default);
+}
+
+.form-select:not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
+}
+
+.form-select:focus-visible {
+  border-color: var(--ring);
+  box-shadow: inset 0 0 0 1px var(--ring);
+}
+
+.form-check {
+  display: flex;
+  min-height: 20px;
+  align-items: center;
+  gap: 6px;
+}
+
+.form-check-input {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  margin: 0;
+  border: 1px solid var(--input);
+  color: var(--primary-foreground);
+  background-color: transparent;
+  cursor: var(--cursor-interaction, default);
+  transition:
+    background-color 150ms,
+    border-color 150ms,
+    box-shadow 150ms;
+}
+
+.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
+  border-color: var(--input);
+  border-radius: var(--radius-sm);
+  corner-shape: var(--corner-shape);
+  background-color: var(--secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+.form-check:not(.form-switch)
+  .form-check-input:not(:disabled):not(:checked):hover {
+  background-color: var(--card);
+}
+
+.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+.form-check:not(.form-switch)
+  .form-check-input[type="checkbox"]:checked::before {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--primary-foreground);
+  content: "";
+  mask: var(--checkmark-image) center / 12px 12px no-repeat;
+}
+
+.form-check-input[type="radio"] {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+}
+
+.form-check-input[type="radio"]:checked {
+  border: 2px solid var(--primary);
+  background:
+    radial-gradient(circle, var(--primary-foreground) 0 2.5px, transparent 3px),
+    var(--primary);
+}
+
+.form-check:not(.form-switch) .form-check-input:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.form-check:not(.form-switch) .form-check-input:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.form-check:not(.form-switch) .form-check-input:disabled + .form-check-label {
+  cursor: not-allowed;
+}
+
+.form-switch .form-check-input:disabled,
+.form-switch .form-check-input:disabled + .form-check-label {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.form-check-label {
+  color: var(--foreground);
+  cursor: var(--cursor-interaction, default);
+}
+
+.form-switch .form-check-input {
+  position: relative;
+  width: 32px;
+  height: 20px;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--muted);
+  box-shadow: none;
+  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.form-switch .form-check-input::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1px solid light-dark(var(--primary-foreground), var(--foreground));
+  border-radius: var(--radius-full);
+  background: light-dark(var(--primary-foreground), var(--foreground));
+  box-shadow: var(--shadow-sm);
+  content: "";
+  transform: translate(2px, -50%);
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.form-switch .form-check-input:checked {
+  background: var(--primary);
+}
+
+.form-switch .form-check-input:checked::before {
+  transform: translate(14px, -50%);
+}
+
+.form-switch .form-check-input:focus-visible {
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
+.form-range {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 28px;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  border: 0;
+  accent-color: var(--primary);
+  background: linear-gradient(
+      color-mix(in srgb, var(--foreground) 7%, transparent),
+      color-mix(in srgb, var(--foreground) 7%, transparent)
+    )
+    center / 100% 2px no-repeat;
+}
+
+.form-range::-webkit-slider-runnable-track {
+  height: 28px;
+  background: transparent;
+}
+
+.form-range::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  margin-top: 4px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: light-dark(var(--primary-foreground), var(--foreground));
+}
+
+.form-range:focus-visible::-webkit-slider-thumb {
+  border-color: var(--ring);
+  box-shadow: inset 0 0 0 1px var(--ring);
+}
+
+.form-range::-moz-range-track {
+  height: 28px;
+  background: transparent;
+}
+
+.form-range::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: light-dark(var(--primary-foreground), var(--foreground));
+}
+
+.form-range:focus-visible::-moz-range-thumb {
+  border-color: var(--ring);
+  box-shadow: inset 0 0 0 1px var(--ring);
+}
+
+.form-range:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.btn:not(.btn-primary, .viz-tile):is(
+  [aria-pressed="true"],
+  [aria-selected="true"],
+  .is-selected
+) {
+  border-color: var(--primary);
+  color: var(--primary-foreground);
+  background: var(--primary);
+}
+
+.btn.viz-tile:is([aria-pressed="true"], [aria-selected="true"], .is-selected) {
+  border-color: var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
+}
+
+.btn:focus-visible,
+.nav-link:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+@media (pointer: coarse) {
+  .btn,
+  .nav-link,
+  .form-control,
+  .form-select {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  /* Keep small-screen WebKit from zooming when a text field receives focus. */
+  .form-control,
+  .form-select {
+    font-size: max(16px, var(--font-size-normal));
+  }
+
+  .form-control[type="file"]::file-selector-button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .form-control-color[type="color"] {
+    width: 44px;
+    height: 44px;
+  }
+
+  .form-control:is(
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="time"],
+    [type="week"]
+  ) {
+    min-width: 0;
+    max-width: 100%;
+    padding-block: 8px;
+  }
+
+  .form-check {
+    min-height: 44px;
+    padding-inline: 15px;
+  }
+
+  .form-check-input {
+    position: relative;
+  }
+
+  .form-check-input::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 44px;
+    height: 44px;
+    content: "";
+    transform: translate(-50%, -50%);
+  }
+
+  .form-check-label {
+    display: inline-flex;
+    min-width: 44px;
+    min-height: 44px;
+    align-items: center;
+  }
+
+  .form-range {
+    height: 44px;
+    touch-action: pan-y;
+  }
+
+  .form-range::-webkit-slider-runnable-track {
+    height: 44px;
+  }
+
+  .form-range::-moz-range-track {
+    height: 44px;
+  }
+
+  .form-range::-webkit-slider-thumb {
+    margin-top: 12px;
+  }
+}
+
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+#widget > svg {
+  width: 100%;
+}
+
+/* Model-authored chart rules can otherwise stretch icons after these styles load. */
+svg.lucide {
+  display: block;
+  width: var(--icon-size) !important;
+  height: var(--icon-size) !important;
+  flex: none;
+  margin: 0 !important;
+  stroke-width: 1.6;
+}
+
+.text-warning,
+.text-destructive {
+  color: var(--destructive);
+}
+`;
+var VISUALIZATION_HELPERS = `
+<script src="https://unpkg.com/@floating-ui/core@1.7.3/dist/floating-ui.core.umd.min.js"></script>
+<script src="https://unpkg.com/@floating-ui/dom@1.7.4/dist/floating-ui.dom.umd.min.js"></script>
+<script>
+  (() => {
+    if (window.FloatingUIDOM == null) {
+      return;
+    }
+    const { autoUpdate, computePosition, flip, offset, shift, size } = window.FloatingUIDOM;
+    const tooltipPlacements = new Set(["top", "right", "bottom", "left"]);
+    const tooltipId = \`codex-visualization-tooltip-\${
+      window.crypto?.randomUUID?.() ?? Date.now().toString(36)
+    }\`;
+    const tooltipGap = 5;
+    const hoverDelay = 700;
+    const skipDelay = 300;
+    let activeTrigger = null;
+    let pendingTrigger = null;
+    let tooltip = null;
+    let openTimeout = null;
+    let autoUpdateCleanup = null;
+    let positionRequest = 0;
+    let skipDelayUntil = 0;
+    let lastPointerWasTouch = false;
+    let pinnedByTouch = false;
+
+    const getTrigger = (target) =>
+      target?.nodeType === Node.ELEMENT_NODE ? target.closest("[data-tooltip]") : null;
+    const containsTarget = (trigger, target) =>
+      target?.nodeType != null && trigger.contains(target);
+    const getContent = (trigger) => trigger.getAttribute("data-tooltip")?.trim() ?? "";
+    const getPlacement = (trigger) => {
+      const placement = trigger.getAttribute("data-tooltip-placement");
+      return tooltipPlacements.has(placement) ? placement : "top";
+    };
+    const getTooltip = () => {
+      if (tooltip == null) {
+        tooltip = document.createElement("div");
+        tooltip.id = tooltipId;
+        tooltip.className = "tooltip";
+        tooltip.setAttribute("role", "tooltip");
+      }
+      return tooltip;
+    };
+    const setDescribedBy = (trigger, described) => {
+      const ids = new Set(
+        (trigger.getAttribute("aria-describedby") ?? "").split(/\\s+/).filter(Boolean),
+      );
+      if (described) {
+        ids.add(tooltipId);
+      } else {
+        ids.delete(tooltipId);
+      }
+      if (ids.size === 0) {
+        trigger.removeAttribute("aria-describedby");
+      } else {
+        trigger.setAttribute("aria-describedby", [...ids].join(" "));
+      }
+    };
+    const clearOpenTimeout = () => {
+      if (openTimeout != null) {
+        window.clearTimeout(openTimeout);
+        openTimeout = null;
+      }
+      pendingTrigger = null;
+    };
+    const closeTooltip = (activateSkipDelay = true) => {
+      clearOpenTimeout();
+      pinnedByTouch = false;
+      positionRequest += 1;
+      autoUpdateCleanup?.();
+      autoUpdateCleanup = null;
+      if (activeTrigger == null) {
+        return;
+      }
+      setDescribedBy(activeTrigger, false);
+      activeTrigger = null;
+      tooltip?.remove();
+      if (activateSkipDelay) {
+        skipDelayUntil = Date.now() + skipDelay;
+      }
+    };
+    const updatePosition = (trigger, floating) => {
+      const request = ++positionRequest;
+      void computePosition(trigger, floating, {
+        middleware: [
+          offset(tooltipGap),
+          flip({ padding: tooltipGap }),
+          shift({ padding: tooltipGap }),
+          size({
+            padding: tooltipGap,
+            apply({ availableHeight, availableWidth, elements }) {
+              elements.floating.style.setProperty(
+                "--tooltip-available-width",
+                \`\${Math.max(0, availableWidth)}px\`,
+              );
+              elements.floating.style.setProperty(
+                "--tooltip-available-height",
+                \`\${Math.max(0, availableHeight)}px\`,
+              );
+            },
+          }),
+        ],
+        placement: getPlacement(trigger),
+        strategy: "fixed",
+      })
+        .then(({ x, y }) => {
+          if (activeTrigger !== trigger || request !== positionRequest) {
+            return;
+          }
+          const scale = window.devicePixelRatio || 1;
+          floating.style.transform = \`translate(\${Math.round(x * scale) / scale}px, \${Math.round(y * scale) / scale}px)\`;
+          floating.style.visibility = "visible";
+        })
+        .catch(() => {
+          if (activeTrigger === trigger && request === positionRequest) {
+            closeTooltip(false);
+          }
+        });
+    };
+    const openTooltip = (trigger) => {
+      const content = getContent(trigger);
+      if (!trigger.isConnected || content.length === 0) {
+        return;
+      }
+      clearOpenTimeout();
+      if (activeTrigger === trigger) {
+        return;
+      }
+      closeTooltip();
+      const floating = getTooltip();
+      floating.textContent = content;
+      floating.style.visibility = "hidden";
+      floating.style.transform = "translate(0, 0)";
+      document.body.appendChild(floating);
+      activeTrigger = trigger;
+      setDescribedBy(trigger, true);
+      autoUpdateCleanup = autoUpdate(trigger, floating, () => {
+        updatePosition(trigger, floating);
+      });
+    };
+    const requestOpen = (trigger, immediate = false) => {
+      if (
+        getContent(trigger).length === 0 ||
+        activeTrigger === trigger ||
+        pendingTrigger === trigger
+      ) {
+        return;
+      }
+      clearOpenTimeout();
+      pendingTrigger = trigger;
+      const delay =
+        immediate || activeTrigger != null || Date.now() < skipDelayUntil ? 0 : hoverDelay;
+      if (delay === 0) {
+        openTooltip(trigger);
+        return;
+      }
+      openTimeout = window.setTimeout(() => {
+        openTimeout = null;
+        pendingTrigger = null;
+        openTooltip(trigger);
+      }, delay);
+    };
+    const handlePointerOpen = (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      const trigger = getTrigger(event.target);
+      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {
+        return;
+      }
+      requestOpen(trigger);
+    };
+    const handlePointer = (event) => {
+      lastPointerWasTouch = event.type === "pointerdown" && event.pointerType === "touch";
+    };
+    const handleTouchClick = (event) => {
+      const isTouch = event.pointerType === "touch" || lastPointerWasTouch;
+      lastPointerWasTouch = false;
+      if (!isTouch || event.detail === 0) {
+        return;
+      }
+      const trigger = getTrigger(event.target);
+      if (
+        trigger == null ||
+        !trigger.isConnected ||
+        getContent(trigger).length === 0 ||
+        (pinnedByTouch && activeTrigger === trigger)
+      ) {
+        if (pinnedByTouch) {
+          closeTooltip();
+        }
+        return;
+      }
+      openTooltip(trigger);
+      pinnedByTouch = activeTrigger === trigger;
+      window.setTimeout(() => {
+        if (activeTrigger === trigger && !trigger.isConnected) {
+          closeTooltip(false);
+        }
+      }, 0);
+    };
+    const handleLeave = (event) => {
+      if (pinnedByTouch) {
+        return;
+      }
+      const trigger = getTrigger(event.target);
+      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {
+        return;
+      }
+      if (activeTrigger === trigger || pendingTrigger === trigger) {
+        closeTooltip();
+      }
+    };
+    const handleFocusIn = (event) => {
+      const trigger = getTrigger(event.target);
+      if (trigger?.matches(":focus-visible")) {
+        requestOpen(trigger, true);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        closeTooltip();
+      }
+    };
+    const handleContextMenu = (event) => {
+      lastPointerWasTouch = false;
+      const trigger = getTrigger(event.target);
+      if (activeTrigger === trigger || pendingTrigger === trigger) {
+        closeTooltip();
+      }
+    };
+    const destroy = () => {
+      closeTooltip(false);
+      lastPointerWasTouch = false;
+      document.removeEventListener("pointerover", handlePointerOpen);
+      document.removeEventListener("pointerdown", handlePointer);
+      document.removeEventListener("pointercancel", handlePointer);
+      document.removeEventListener("click", handleTouchClick);
+      document.removeEventListener("pointerout", handleLeave);
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("focusout", handleLeave);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("contextmenu", handleContextMenu);
+      tooltip = null;
+    };
+
+    document.addEventListener("pointerover", handlePointerOpen);
+    document.addEventListener("pointerdown", handlePointer);
+    document.addEventListener("pointercancel", handlePointer);
+    document.addEventListener("click", handleTouchClick);
+    document.addEventListener("pointerout", handleLeave);
+    document.addEventListener("focusin", handleFocusIn);
+    document.addEventListener("focusout", handleLeave);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("contextmenu", handleContextMenu);
+    window.addEventListener("pagehide", destroy, { once: true });
+  })();
+</script>
+<script id="codex-visualization-tabs">
+  (() => {
+    const selector = '.nav[role="tablist"] [role="tab"]';
+    const disabled = ':disabled,[aria-disabled="true"]';
+    const selectTab = (selected) => {
+      const panelId = selected.getAttribute("aria-controls");
+      for (const tab of selected.closest('[role="tablist"]').querySelectorAll('[role="tab"]')) {
+        const active = tab === selected;
+        tab.classList.toggle("active", active);
+        tab.setAttribute("aria-selected", String(active));
+        const id = tab.getAttribute("aria-controls");
+        const panel = id && document.getElementById(id);
+        if (panel != null) {
+          panel.hidden = id !== panelId;
+          if (!panel.hidden && selected.id) {
+            panel.setAttribute("aria-labelledby", selected.id);
+          }
+        }
+      }
+    };
+    const interact = (event) => {
+      const tab = event.target?.closest?.(selector);
+      if (event.defaultPrevented || tab == null || tab.matches(disabled)) {
+        return;
+      }
+      if (event.type === "click") {
+        selectTab(tab);
+        return;
+      }
+      const tabs = Array.from(
+        tab.closest('[role="tablist"]').querySelectorAll('[role="tab"]'),
+      ).filter((candidate) => !candidate.matches(disabled));
+      const current = tabs.indexOf(tab);
+      let next;
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        next = (current + 1) % tabs.length;
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        next = (current + tabs.length - 1) % tabs.length;
+      } else if (event.key === "Home") {
+        next = 0;
+      } else if (event.key === "End") {
+        next = tabs.length - 1;
+      } else {
+        return;
+      }
+      event.preventDefault();
+      tabs[next].focus();
+      selectTab(tabs[next]);
+    };
+
+    for (const list of document.querySelectorAll('.nav[role="tablist"]')) {
+      const selected =
+        list.querySelector('[role="tab"][aria-selected="true"]') ??
+        list.querySelector('[role="tab"].active') ??
+        list.querySelector('[role="tab"]');
+      if (selected != null) {
+        selectTab(selected);
+      }
+    }
+    document.addEventListener("click", interact);
+    document.addEventListener("keydown", interact);
+    window.addEventListener(
+      "pagehide",
+      () => {
+        document.removeEventListener("click", interact);
+        document.removeEventListener("keydown", interact);
+      },
+      { once: true },
+    );
+  })();
+</script>
+<script
+  id="codex-visualization-lucide"
+  async
+  src="https://unpkg.com/lucide@1.17.0/dist/umd/lucide.js"
+></script>
+<script>
+  (() => {
+    const initialize = () => {
+      globalThis.lucide?.createIcons({ attrs: { width: 16, height: 16 } });
+    };
+    if (globalThis.lucide != null) {
+      initialize();
+      return;
+    }
+    document
+      .getElementById("codex-visualization-lucide")
+      ?.addEventListener("load", initialize, { once: true });
+  })();
+</script>
+`;
+
+// src/components/artifacts/inline-html-document.ts
+function inlineHtmlDocument(fragment) {
+  return '<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>' + VISUALIZATION_CSS + "</style><style>html,body{margin:0;min-height:0}body{padding:16px;box-sizing:border-box}</style></head><body>" + fragment + VISUALIZATION_HELPERS + `<script>
+(()=>{
+  window.addEventListener('message',event=>{
+    if(event.source!==parent||event.data?.type!=='opengeni.preview.theme')return;
+    if(event.data.theme==='light'||event.data.theme==='dark')document.documentElement.style.colorScheme=event.data.theme;
+    previous=0;resize();
+  });
+  let previous=0;
+  const resize=()=>{const height=Math.ceil(document.body.getBoundingClientRect().height);if(height!==previous){previous=height;parent.postMessage({type:'opengeni.preview.height',height},'*')}};
+  new ResizeObserver(resize).observe(document.body);resize();
+})();
+</script></body></html>`;
+}
+
+// src/components/artifacts/chat-interactive-block.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var INLINE_PREVIEW_HEIGHT = 360;
+var SITE_PREVIEW_HEIGHT = 400;
+var PREVIEW_CHROME_HEIGHT = 50;
+function ChatInteractiveBlock({ labels, ...props }) {
+  return /* @__PURE__ */ jsx3(ArtifactLabelsProvider, { labels, children: /* @__PURE__ */ jsx3(InteractiveBlock, { ...props }) });
+}
+function InteractiveBlock(props) {
+  const labels = useArtifactLabels();
+  const height = (props.kind === "html" ? INLINE_PREVIEW_HEIGHT : SITE_PREVIEW_HEIGHT) + PREVIEW_CHROME_HEIGHT;
+  return /* @__PURE__ */ jsx3(
+    DeferredChatMedia,
+    {
+      height,
+      actionLabel: props.kind === "html" ? labels.loadPreview : labels.loadSitePreview,
+      children: /* @__PURE__ */ jsx3("div", { style: { height }, children: /* @__PURE__ */ jsx3(LoadedChatInteractiveBlock, { ...props }) })
+    },
+    `${props.workspaceId}:${props.kind}:${props.kind === "site" ? props.content : "inline"}`
+  );
+}
+function LoadedChatInteractiveBlock(props) {
+  const labels = useArtifactLabels();
+  if (props.kind === "html") return /* @__PURE__ */ jsx3(InlineHtml, { ...props });
+  try {
+    const value = JSON.parse(props.content);
+    if (!value || typeof value.siteId !== "string" || !/^[0-9a-f-]{36}$/i.test(value.siteId) || value.versionId !== void 0 && (typeof value.versionId !== "string" || !/^[0-9a-f-]{36}$/i.test(value.versionId)))
+      throw new Error("Invalid Site reference");
+    return /* @__PURE__ */ jsx3(
+      SiteEmbed,
+      {
+        ...props,
+        siteId: value.siteId,
+        initialVersionId: value.versionId
+      },
+      `${props.workspaceId}:${value.siteId}:${value.versionId ?? "current"}`
+    );
+  } catch {
+    return /* @__PURE__ */ jsx3("p", { role: "alert", children: labels.siteReferenceInvalid });
+  }
+}
+function InlineHtml({ content, toolBridge, theme }) {
+  const labels = useArtifactLabels();
+  const html = useMemo(() => inlineHtmlDocument(content), [content]);
+  const bridge = useMemo(() => toolBridge?.(), [toolBridge]);
+  return /* @__PURE__ */ jsx3(
+    ArtifactSandbox,
+    {
+      title: labels.preview,
+      showTitle: false,
+      showLiveStatus: false,
+      html,
+      toolBridge: bridge,
+      height: INLINE_PREVIEW_HEIGHT,
+      className: "h-full",
+      fill: true,
+      theme
+    }
+  );
+}
+function SiteEmbed(props) {
+  const [versionId, setVersionId] = useState3(props.initialVersionId);
+  return /* @__PURE__ */ jsx3(
+    SiteEmbedContent,
+    {
+      ...props,
+      versionId,
+      onVersionChange: setVersionId
+    },
+    versionId ?? "current"
+  );
+}
+function SiteEmbedContent({
+  workspaceId,
+  client,
+  toolBridge,
+  theme,
+  siteId,
+  versionId,
+  onVersionChange
+}) {
+  const [loaded, setLoaded] = useState3(null);
+  const snapshot = loaded?.client === client ? loaded.snapshot : null;
+  const [error, setError] = useState3(false);
+  const [retry, setRetry] = useState3(0);
+  useEffect2(() => {
+    const abort = new AbortController();
+    setError(false);
+    setLoaded(null);
+    void loadSiteSnapshot(client, workspaceId, siteId, {
+      signal: abort.signal,
+      ...versionId ? { versionId } : {}
+    }).then((value) => {
+      if (!abort.signal.aborted) setLoaded({ client, snapshot: value });
+    }).catch(() => {
+      if (!abort.signal.aborted) setError(true);
+    });
+    return () => abort.abort();
+  }, [client, workspaceId, siteId, versionId, retry]);
+  const content = snapshot?.content;
+  const bridge = useMemo(
+    () => content ? toolBridge?.({
+      artifactId: siteId,
+      siteVersionId: content.versionId,
+      requestedTools: content.requestedTools
+    }) : void 0,
+    [toolBridge, siteId, content]
+  );
+  const open = useOpenGeniLinkResolver()?.({ kind: "site", artifactId: siteId, workspaceId });
+  const labels = useArtifactLabels();
+  if (error)
+    return /* @__PURE__ */ jsxs2("p", { role: "alert", children: [
+      labels.siteLoadFailed,
+      " ",
+      /* @__PURE__ */ jsx3(ArtifactButton, { size: "sm", onClick: () => setRetry((v) => v + 1), children: labels.retry })
+    ] });
+  if (!snapshot) return /* @__PURE__ */ jsx3("p", { role: "status", children: labels.loadingSite });
+  if (!content) return /* @__PURE__ */ jsx3("p", { children: labels.siteUnpublished });
+  return /* @__PURE__ */ jsx3(
+    ArtifactSandbox,
+    {
+      title: snapshot.detail.artifact.title,
+      html: content.html,
+      toolBridge: bridge,
+      height: SITE_PREVIEW_HEIGHT,
+      className: "h-full",
+      fill: true,
+      theme,
+      headerControls: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        snapshot.detail.versions.length > 1 || !snapshot.detail.versions.some((v) => v.id === content.versionId) ? /* @__PURE__ */ jsxs2(
+          ArtifactSelect,
+          {
+            "aria-label": labels.siteVersion,
+            className: "bg-transparent text-xs",
+            value: content.versionId,
+            onChange: (e) => onVersionChange(e.target.value),
+            children: [
+              !snapshot.detail.versions.some((v) => v.id === content.versionId) && /* @__PURE__ */ jsx3("option", { value: content.versionId, children: labels.savedVersion }),
+              snapshot.detail.versions.map((v) => /* @__PURE__ */ jsx3("option", { value: v.id, children: labels.version(v.revision) }, v.id))
+            ]
+          }
+        ) : null,
+        open?.href ? /* @__PURE__ */ jsx3(
+          "a",
+          {
+            className: "shrink-0 whitespace-nowrap text-xs underline",
+            href: open.href,
+            "data-og-open-site": "",
+            children: labels.openSite
+          }
+        ) : open?.open ? /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "shrink-0 cursor-pointer whitespace-nowrap text-xs underline",
+            "data-og-open-site": "",
+            onClick: () => void Promise.resolve().then(open.open).catch(() => void 0),
+            children: labels.openSite
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+
+export {
+  ArtifactSandbox,
+  DeferredChatMedia,
+  inlineHtmlDocument,
+  ChatInteractiveBlock
+};
+//# sourceMappingURL=chunk-YBXQDQFX.js.map