@akira-io/ui 1.0.0 → 1.1.1

package/dist/chunk-YOVY3KT6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/tour/gate.ts","../src/blocks/tour/types.ts","../src/blocks/tour/tour.tsx"],"names":[],"mappings":"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","file":"chunk-YOVY3KT6.js","sourcesContent":["import type {\n    TourBreakpoint,\n    TourDefinition,\n    TourStep,\n} from '@/blocks/tour/types';\n\nexport function stepsForBreakpoint(\n    steps: TourStep[],\n    breakpoint: TourBreakpoint,\n): TourStep[] {\n    return steps.filter(\n        (step) => !step.breakpoints || step.breakpoints.includes(breakpoint),\n    );\n}\n\nexport function resolveSteps(\n    steps: TourStep[],\n    isPresent: (target: string) => boolean,\n): TourStep[] {\n    return steps.filter((step) => isPresent(step.target));\n}\n\nexport function shouldStartTour(input: {\n    definition: TourDefinition;\n    seen: Record<string, number>;\n    resolvedStepCount: number;\n    force?: boolean;\n}): boolean {\n    if (input.resolvedStepCount === 0) {\n        return false;\n    }\n\n    if (input.force) {\n        return true;\n    }\n\n    return input.definition.version > (input.seen[input.definition.id] ?? 0);\n}\n","export type TourBreakpoint = 'mobile' | 'desktop';\n\nexport type TourOutcome = 'completed' | 'skipped' | 'dismissed';\n\nexport interface TourStep {\n    target: string;\n    title: string;\n    description: string;\n    breakpoints?: TourBreakpoint[];\n}\n\nexport interface TourDefinition {\n    id: string;\n    version: number;\n    steps: TourStep[];\n}\n\nexport interface TourProgress {\n    tour: string;\n    version: number;\n    lastStep: number;\n    outcome: TourOutcome;\n}\n\nexport interface TourLabels {\n    next: string;\n    previous: string;\n    done: string;\n    progress: string;\n}\n\nexport const DEFAULT_TOUR_LABELS: TourLabels = {\n    next: 'Next',\n    previous: 'Previous',\n    done: 'Done',\n    progress: '{{current}} of {{total}}',\n};\n","import { driver, type Driver } from 'driver.js';\nimport {\n    createContext,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    type PropsWithChildren,\n    type ReactElement,\n} from 'react';\n\nimport 'driver.js/dist/driver.css';\n\nimport { shouldStartTour, stepsForBreakpoint } from '@/blocks/tour/gate';\nimport {\n    DEFAULT_TOUR_LABELS,\n    type TourBreakpoint,\n    type TourDefinition,\n    type TourLabels,\n    type TourOutcome,\n    type TourProgress,\n} from '@/blocks/tour/types';\nimport { useUiLabels } from '@/locales/context';\n\ninterface TourControllerValue {\n    startTour: (\n        definition: TourDefinition,\n        options?: { force?: boolean },\n    ) => void;\n}\n\nconst TourContext = createContext<TourControllerValue | null>(null);\n\nconst MOBILE_BREAKPOINT = 768;\n\nconst WAIT_FOR_TARGET = 4000;\n\nfunction currentBreakpoint(): TourBreakpoint {\n    return window.innerWidth < MOBILE_BREAKPOINT ? 'mobile' : 'desktop';\n}\n\nfunction outcomeOf(instance: Driver, highlighted: boolean): TourOutcome {\n    if (!highlighted) {\n        return 'dismissed';\n    }\n\n    return instance.hasNextStep() ? 'skipped' : 'completed';\n}\n\nexport function TourProvider({\n    children,\n    seen,\n    onProgress,\n    labels,\n}: PropsWithChildren<{\n    seen: Record<string, number>;\n    onProgress: (progress: TourProgress) => void;\n    labels?: Partial<TourLabels>;\n}>): ReactElement {\n    const seenRef = useRef(seen);\n    seenRef.current = seen;\n\n    const onProgressRef = useRef(onProgress);\n    onProgressRef.current = onProgress;\n\n    const driverRef = useRef<Driver | null>(null);\n    const activeRef = useRef<{\n        definition: TourDefinition;\n        lastStep: number;\n        highlighted: boolean;\n    } | null>(null);\n\n    const { next, previous, done, progress } = useUiLabels(\n        'tour',\n        DEFAULT_TOUR_LABELS,\n        labels,\n    );\n\n    const report = useCallback((outcome: TourOutcome): void => {\n        const active = activeRef.current;\n\n        if (!active) {\n            return;\n        }\n\n        activeRef.current = null;\n\n        onProgressRef.current({\n            tour: active.definition.id,\n            version: active.definition.version,\n            lastStep: active.lastStep,\n            outcome,\n        });\n    }, []);\n\n    const startTour = useCallback(\n        (definition: TourDefinition, options?: { force?: boolean }): void => {\n            const alreadyRunning =\n                activeRef.current?.definition.id === definition.id;\n\n            if (alreadyRunning && !options?.force) {\n                return;\n            }\n\n            const steps = stepsForBreakpoint(\n                definition.steps,\n                currentBreakpoint(),\n            );\n\n            const allowed = shouldStartTour({\n                definition,\n                seen: seenRef.current,\n                resolvedStepCount: steps.length,\n                force: options?.force,\n            });\n\n            if (!allowed) {\n                return;\n            }\n\n            driverRef.current?.destroy();\n            activeRef.current = { definition, lastStep: 0, highlighted: false };\n\n            const instance = driver({\n                showProgress: true,\n                progressText: progress,\n                nextBtnText: next,\n                prevBtnText: previous,\n                doneBtnText: done,\n                popoverClass: 'akira-tour',\n                waitForElement: WAIT_FOR_TARGET,\n                skipMissingElement: true,\n                steps: steps.map((step) => ({\n                    element: step.target,\n                    popover: {\n                        title: step.title,\n                        description: step.description,\n                    },\n                })),\n                onHighlightStarted: () => {\n                    if (activeRef.current) {\n                        activeRef.current.lastStep =\n                            instance.getActiveIndex() ?? 0;\n                        activeRef.current.highlighted = true;\n                    }\n                },\n                onDestroyStarted: () => {\n                    report(\n                        outcomeOf(\n                            instance,\n                            activeRef.current?.highlighted ?? false,\n                        ),\n                    );\n                    instance.destroy();\n                },\n            });\n\n            driverRef.current = instance;\n            instance.drive();\n        },\n        [report, next, previous, done, progress],\n    );\n\n    useEffect(\n        () => () => {\n            report('dismissed');\n            driverRef.current?.destroy();\n            driverRef.current = null;\n        },\n        [report],\n    );\n\n    const value = useMemo(() => ({ startTour }), [startTour]);\n\n    return (\n        <TourContext.Provider value={value}>{children}</TourContext.Provider>\n    );\n}\n\nexport function useTourController(): TourControllerValue {\n    const context = useContext(TourContext);\n\n    if (!context) {\n        throw new Error(\n            'useTourController must be used inside a TourProvider.',\n        );\n    }\n\n    return context;\n}\n\nexport function useTour(\n    definition: TourDefinition,\n    options?: { enabled?: boolean },\n): { restart: () => void } {\n    const { startTour } = useTourController();\n    const enabled = options?.enabled ?? true;\n\n    const definitionRef = useRef(definition);\n    definitionRef.current = definition;\n\n    useEffect(() => {\n        if (!enabled) {\n            return;\n        }\n\n        const frame = window.requestAnimationFrame(() =>\n            startTour(definitionRef.current),\n        );\n\n        return () => window.cancelAnimationFrame(frame);\n    }, [definition.id, definition.version, enabled, startTour]);\n\n    return { restart: () => startTour(definitionRef.current, { force: true }) };\n}\n"]}

package/dist/code.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { S as SlotNameProps } from './types-cmBL8zOc.js';
+export { C as CodeBlock, a as CodeBlockLabels, b as CodeBlockProps, J as JsonViewer, c as JsonViewerLabels, d as JsonViewerProps, e as codeBlockLabels, j as jsonViewerLabels } from './json-viewer-BARA2RCW.js';
+import '@tanstack/react-table';
+import 'lucide-react';
+
+declare function Code({ className, slotName, ...props }: React.ComponentProps<'code'> & SlotNameProps): React.JSX.Element;
+
+export { Code };

package/dist/code.js

@@ -0,0 +1,650 @@
+import { CopyButton } from './chunk-2WIIRDHT.js';
+import { useUiLabels } from './chunk-5AJFQ6C4.js';
+import { cn, compactRadius, controlFill, elevatedSurface, nestedSurfaceReset, Button, focusRing } from './chunk-ODYCBCKS.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React2 from 'react';
+import { FileCode, ChevronRight } from 'lucide-react';
+
+function Code({
+  className,
+  slotName = "code",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: cn(
+        compactRadius,
+        controlFill,
+        "px-1.5 py-0.5 font-mono font-medium text-[0.875em] text-foreground",
+        className
+      ),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function CodeBlockHeader({
+  filename,
+  language,
+  code,
+  copyLabel,
+  copiedLabel,
+  slotName = "code-block-header"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "gap-2 px-4 py-2 flex items-center border-b border-border",
+      "data-slot": slotName,
+      children: [
+        /* @__PURE__ */ jsx(FileCode, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "code-block-filename",
+            className: "text-sm font-medium truncate text-foreground",
+            children: filename
+          }
+        ),
+        language !== void 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "code-block-language",
+            className: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
+            children: language
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            value: code,
+            copyLabel,
+            copiedLabel,
+            className: "ml-auto text-muted-foreground"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/lib/shiki.ts
+var LIGHT_THEME = "github-light";
+var DARK_THEME = "github-dark";
+var pending = null;
+function loadCodeToHtml() {
+  pending ??= import('shiki').then((module) => module.codeToHtml).catch(() => null);
+  return pending;
+}
+async function highlightCode(code, language) {
+  const codeToHtml = await loadCodeToHtml();
+  if (!codeToHtml) {
+    return null;
+  }
+  try {
+    return await codeToHtml(code, {
+      lang: language,
+      themes: { light: LIGHT_THEME, dark: DARK_THEME },
+      defaultColor: false
+    });
+  } catch {
+    return null;
+  }
+}
+
+// src/hooks/use-highlighted-code.ts
+function useHighlightedCode(code, language, html) {
+  const [highlighted, setHighlighted] = React2.useState(
+    html ?? null
+  );
+  React2.useEffect(() => {
+    if (html !== void 0) {
+      setHighlighted(html);
+      return;
+    }
+    if (language === void 0) {
+      setHighlighted(null);
+      return;
+    }
+    let active = true;
+    highlightCode(code, language).then((result) => {
+      if (active) {
+        setHighlighted(result);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [code, language, html]);
+  return highlighted;
+}
+
+// src/lib/code-lines.ts
+var LINE_OPEN = '<span class="line">';
+var SPAN_CLOSE = "</span>";
+function splitSourceLines(code) {
+  return code.replace(/\n$/, "").split("\n");
+}
+function parseLineRanges(spec) {
+  const lines = /* @__PURE__ */ new Set();
+  if (spec === void 0) {
+    return lines;
+  }
+  if (Array.isArray(spec)) {
+    for (const line of spec) {
+      lines.add(line);
+    }
+    return lines;
+  }
+  for (const part of spec.split(",")) {
+    const [from, to] = part.split("-").map((bound) => Number.parseInt(bound.trim(), 10));
+    if (Number.isNaN(from)) {
+      continue;
+    }
+    const last = to === void 0 || Number.isNaN(to) ? from : to;
+    for (let line = from; line <= last; line += 1) {
+      lines.add(line);
+    }
+  }
+  return lines;
+}
+function closingSpan(html, from) {
+  let depth = 0;
+  let cursor = from;
+  while (cursor < html.length) {
+    const open = html.indexOf("<span", cursor);
+    const close = html.indexOf(SPAN_CLOSE, cursor);
+    if (close === -1) {
+      return -1;
+    }
+    if (open !== -1 && open < close) {
+      depth += 1;
+      cursor = open + 5;
+      continue;
+    }
+    if (depth === 0) {
+      return close;
+    }
+    depth -= 1;
+    cursor = close + SPAN_CLOSE.length;
+  }
+  return -1;
+}
+function splitHighlightedLines(html) {
+  const lines = [];
+  let cursor = html.indexOf(LINE_OPEN);
+  while (cursor !== -1) {
+    const start = cursor + LINE_OPEN.length;
+    const end = closingSpan(html, start);
+    if (end === -1) {
+      return null;
+    }
+    lines.push(html.slice(start, end));
+    cursor = html.indexOf(LINE_OPEN, end);
+  }
+  return lines.length > 0 ? lines : null;
+}
+var codeBlockLabels = {
+  copyLabel: "Copy",
+  copiedLabel: "Copied",
+  expandLabel: "Expand",
+  collapseLabel: "Collapse"
+};
+function CodeBlock({
+  code,
+  language,
+  html,
+  filename,
+  lineNumbers = false,
+  highlightLines,
+  maxHeight,
+  copyLabel,
+  copiedLabel,
+  expandLabel,
+  collapseLabel,
+  className,
+  slotName = "code-block",
+  ...props
+}) {
+  const labels = useUiLabels("codeBlock", codeBlockLabels, {
+    copyLabel,
+    copiedLabel,
+    expandLabel,
+    collapseLabel
+  });
+  const highlighted = useHighlightedCode(code, language, html);
+  const lines = React2.useMemo(() => splitSourceLines(code), [code]);
+  const markup = React2.useMemo(
+    () => highlighted === null ? null : splitHighlightedLines(highlighted),
+    [highlighted]
+  );
+  const emphasised = React2.useMemo(
+    () => parseLineRanges(highlightLines),
+    [highlightLines]
+  );
+  const bodyRef = React2.useRef(null);
+  const [expanded, setExpanded] = React2.useState(false);
+  const [clipped, setClipped] = React2.useState(false);
+  React2.useEffect(() => {
+    const body = bodyRef.current;
+    if (!body || maxHeight === void 0 || expanded) {
+      return;
+    }
+    setClipped(body.scrollHeight > body.clientHeight + 1);
+  }, [maxHeight, expanded, lines, markup]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        elevatedSurface,
+        nestedSurfaceReset,
+        "relative overflow-hidden bg-card",
+        className
+      ),
+      ...props,
+      "data-slot": slotName,
+      children: [
+        filename === void 0 ? /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            value: code,
+            copyLabel: labels.copyLabel,
+            copiedLabel: labels.copiedLabel,
+            className: "top-2 right-2 absolute z-10 text-muted-foreground"
+          }
+        ) : /* @__PURE__ */ jsx(
+          CodeBlockHeader,
+          {
+            filename,
+            language,
+            code,
+            copyLabel: labels.copyLabel,
+            copiedLabel: labels.copiedLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: bodyRef,
+            "data-slot": "code-block-body",
+            style: { maxHeight: expanded ? void 0 : maxHeight },
+            className: "py-4 font-mono text-sm leading-6 overflow-auto rounded-[inherit]",
+            children: /* @__PURE__ */ jsx("pre", { className: "w-max min-w-full", children: /* @__PURE__ */ jsx("code", { "data-slot": "code-block-code", children: lines.map((line, index) => /* @__PURE__ */ jsx(
+              CodeBlockLine,
+              {
+                number: index + 1,
+                line,
+                markup: markup?.[index],
+                lineNumbers,
+                emphasised: emphasised.has(index + 1)
+              },
+              index
+            )) }) })
+          }
+        ),
+        clipped && /* @__PURE__ */ jsx(
+          CodeBlockExpander,
+          {
+            expanded,
+            expandLabel: labels.expandLabel,
+            collapseLabel: labels.collapseLabel,
+            onToggle: () => setExpanded((open) => !open)
+          }
+        )
+      ]
+    }
+  );
+}
+function CodeBlockLine({
+  number,
+  line,
+  markup,
+  lineNumbers,
+  emphasised,
+  slotName = "code-block-line"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-highlighted": emphasised ? "" : void 0,
+      className: cn(
+        "min-h-6 px-4 grid w-full data-highlighted:bg-accent",
+        lineNumbers ? "grid-cols-[2.5rem_1fr]" : "grid-cols-1"
+      ),
+      "data-slot": slotName,
+      children: [
+        lineNumbers && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "code-block-gutter",
+            "aria-hidden": "true",
+            className: "pr-4 text-right text-muted-foreground select-none",
+            children: number
+          }
+        ),
+        markup === void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "code-block-source", children: line }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "code-block-source",
+            dangerouslySetInnerHTML: { __html: markup }
+          }
+        )
+      ]
+    }
+  );
+}
+function CodeBlockExpander({
+  expanded,
+  expandLabel,
+  collapseLabel,
+  onToggle,
+  slotName = "code-block-expander"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "inset-x-0 bottom-0 pt-10 pb-2 absolute flex justify-center",
+      "data-slot": slotName,
+      children: [
+        !expanded && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "inset-0 pointer-events-none absolute bg-gradient-to-t from-card to-transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "sm",
+            onClick: onToggle,
+            children: expanded ? collapseLabel : expandLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/lib/json-value.ts
+var CIRCULAR_MARKER = "[Circular]";
+function jsonKind(value) {
+  if (value === null) {
+    return "null";
+  }
+  if (Array.isArray(value)) {
+    return "array";
+  }
+  switch (typeof value) {
+    case "string":
+      return "string";
+    case "number":
+      return Number.isFinite(value) ? "number" : "unsupported";
+    case "boolean":
+      return "boolean";
+    case "object":
+      return "object";
+    default:
+      return "unsupported";
+  }
+}
+function isBranch(kind) {
+  return kind === "object" || kind === "array";
+}
+function entriesOf(value) {
+  if (Array.isArray(value)) {
+    return value.map((item, index) => [String(index), item]);
+  }
+  if (value !== null && typeof value === "object") {
+    return Object.entries(value);
+  }
+  return [];
+}
+function serialisable(value, ancestors) {
+  if (typeof value === "bigint") {
+    return value.toString();
+  }
+  if (value === null || typeof value !== "object") {
+    return value;
+  }
+  if (ancestors.includes(value)) {
+    return CIRCULAR_MARKER;
+  }
+  const trail = [...ancestors, value];
+  if (Array.isArray(value)) {
+    return value.map((item) => serialisable(item, trail));
+  }
+  return Object.fromEntries(
+    Object.entries(value).map(([key, item]) => [
+      key,
+      serialisable(item, trail)
+    ])
+  );
+}
+function stringifyJson(value) {
+  return JSON.stringify(serialisable(value, []), null, 2) ?? "null";
+}
+var LEAF_CLASS = {
+  string: "text-success",
+  number: "text-primary",
+  boolean: "text-destructive",
+  null: "text-muted-foreground",
+  object: "text-foreground",
+  array: "text-foreground",
+  unsupported: "text-muted-foreground italic"
+};
+var BRACKETS = {
+  object: ["{", "}"],
+  array: ["[", "]"]
+};
+function leafText(value, kind) {
+  if (kind === "string") {
+    return `"${String(value)}"`;
+  }
+  if (kind === "null") {
+    return "null";
+  }
+  return String(value);
+}
+function JsonKey({
+  name,
+  slotName = "json-viewer-key"
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", "data-slot": slotName, children: [
+    name,
+    ":"
+  ] });
+}
+function JsonNode({
+  name,
+  value,
+  depth,
+  initialDepth,
+  ancestors,
+  labels,
+  slotName = "json-viewer-node"
+}) {
+  const kind = jsonKind(value);
+  const branch = isBranch(kind);
+  const circular = branch && ancestors.includes(value);
+  const [open, setOpen] = React2.useState(depth < initialDepth);
+  const entries = React2.useMemo(
+    () => branch && !circular ? entriesOf(value) : [],
+    [branch, circular, value]
+  );
+  const trail = React2.useMemo(
+    () => branch ? [...ancestors, value] : ancestors,
+    [branch, ancestors, value]
+  );
+  if (!branch || circular) {
+    return /* @__PURE__ */ jsxs("div", { className: "gap-2 py-0.5 pl-5 flex", "data-slot": slotName, children: [
+      name !== void 0 && /* @__PURE__ */ jsx(JsonKey, { name }),
+      circular ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "json-viewer-circular",
+          className: "text-muted-foreground italic",
+          children: labels.circularLabel
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "json-viewer-value",
+          className: cn("break-all", LEAF_CLASS[kind]),
+          children: leafText(value, kind)
+        }
+      )
+    ] });
+  }
+  const [opening, closing] = BRACKETS[kind === "array" ? "array" : "object"];
+  return /* @__PURE__ */ jsxs("div", { "data-slot": slotName, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "json-viewer-toggle",
+        "aria-expanded": open,
+        "aria-label": open ? labels.collapseLabel : labels.expandLabel,
+        onClick: () => setOpen((current) => !current),
+        className: cn(
+          "gap-2 rounded-xl py-0.5 flex w-full cursor-pointer items-center text-left hover:bg-accent",
+          focusRing
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-3.5 shrink-0 text-muted-foreground transition-transform",
+                open && "rotate-90"
+              )
+            }
+          ),
+          name !== void 0 && /* @__PURE__ */ jsx(JsonKey, { name }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: opening }),
+          !open && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "json-viewer-summary",
+                className: "text-xs font-medium text-muted-foreground",
+                children: labels.entriesLabel(entries.length)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: closing })
+          ] })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "ml-1.5 pl-3 border-l border-border", children: [
+      entries.map(([key, item]) => /* @__PURE__ */ jsx(
+        JsonNode,
+        {
+          name: key,
+          value: item,
+          depth: depth + 1,
+          initialDepth,
+          ancestors: trail,
+          labels
+        },
+        key
+      )),
+      /* @__PURE__ */ jsx("div", { className: "pl-5 text-muted-foreground", children: closing })
+    ] })
+  ] });
+}
+var jsonViewerLabels = {
+  copyLabel: "Copy",
+  copiedLabel: "Copied",
+  expandLabel: "Expand",
+  collapseLabel: "Collapse",
+  circularLabel: "Circular reference",
+  entriesLabel: (count) => `${count} ${count === 1 ? "entry" : "entries"}`
+};
+function JsonViewer({
+  value,
+  initialDepth = 1,
+  maxHeight,
+  copyLabel,
+  copiedLabel,
+  expandLabel,
+  collapseLabel,
+  circularLabel,
+  entriesLabel,
+  className,
+  slotName = "json-viewer",
+  ...props
+}) {
+  const text = useUiLabels("jsonViewer", jsonViewerLabels, {
+    copyLabel,
+    copiedLabel,
+    expandLabel,
+    collapseLabel,
+    circularLabel,
+    entriesLabel
+  });
+  const labels = React2.useMemo(
+    () => ({
+      expandLabel: text.expandLabel,
+      collapseLabel: text.collapseLabel,
+      circularLabel: text.circularLabel,
+      entriesLabel: text.entriesLabel
+    }),
+    [
+      text.expandLabel,
+      text.collapseLabel,
+      text.circularLabel,
+      text.entriesLabel
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        elevatedSurface,
+        nestedSurfaceReset,
+        "relative overflow-hidden bg-card",
+        className
+      ),
+      ...props,
+      "data-slot": slotName,
+      children: [
+        /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            value: stringifyJson(value),
+            copyLabel: text.copyLabel,
+            copiedLabel: text.copiedLabel,
+            className: "top-2 right-2 absolute z-10 text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "json-viewer-body",
+            style: { maxHeight },
+            className: "p-4 pr-12 font-mono text-sm leading-6 overflow-auto rounded-[inherit]",
+            children: /* @__PURE__ */ jsx(
+              JsonNode,
+              {
+                value,
+                depth: 0,
+                initialDepth,
+                ancestors: [],
+                labels
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Code, CodeBlock, JsonViewer, codeBlockLabels, jsonViewerLabels };
+//# sourceMappingURL=code.js.map
+//# sourceMappingURL=code.js.map