@flanksource/clicky-ui 0.2.2 → 0.2.4

package/dist/data/Icon.cjs

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const size = require("../lib/size.cjs");
+const useDensity = require("../hooks/use-density.cjs");
+const TONE_CLASSES = {
+  emerald: "text-emerald-700 ring-emerald-200/80",
+  amber: "text-amber-700 ring-amber-200/80",
+  rose: "text-rose-700 ring-rose-200/80",
+  slate: "text-slate-700 ring-slate-200/80",
+  sky: "text-sky-700 ring-sky-200/80",
+  violet: "text-violet-700 ring-violet-200/80",
+  neutral: "text-foreground ring-border"
+};
+const DEFAULT_PLAIN_ICON_SIZE = "1em";
+let fallbackIcon = null;
+function setFallbackIconProvider(component) {
+  fallbackIcon = component;
+}
+function renderImportedGlyph(ImportedIcon, glyphWidth, glyphHeight, rotate, flip, inline, glyphClassName, title) {
+  const transform = [
+    typeof rotate === "number" ? `rotate(${rotate}deg)` : typeof rotate === "string" ? rotate : "",
+    flip === "horizontal" || flip === "both" ? "scaleX(-1)" : "",
+    flip === "vertical" || flip === "both" ? "scaleY(-1)" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ImportedIcon,
+    {
+      ...glyphClassName ? { className: glyphClassName } : {},
+      ...glyphWidth != null ? { width: glyphWidth } : {},
+      ...glyphHeight != null ? { height: glyphHeight } : {},
+      ...inline != null ? { "aria-hidden": !title } : {},
+      ...title ? { title, role: "img" } : { "aria-hidden": true },
+      ...transform ? { style: { transform } } : {}
+    }
+  );
+}
+function renderRuntimeGlyph(name, glyphWidth, glyphHeight, glyphClassName, title) {
+  if (fallbackIcon) {
+    const Fallback = fallbackIcon;
+    const glyphSize = typeof glyphWidth === "number" ? glyphWidth : glyphHeight;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Fallback,
+      {
+        name,
+        ...glyphClassName ? { className: glyphClassName } : {},
+        ...glyphSize != null ? { size: glyphSize } : {},
+        ...title ? { alt: title } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils.cn(
+        "inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground",
+        glyphClassName
+      ),
+      title: title ?? name,
+      role: title ? "img" : void 0,
+      "aria-label": title,
+      "aria-hidden": title ? void 0 : true,
+      style: {
+        width: glyphWidth,
+        height: glyphHeight
+      },
+      children: "?"
+    }
+  );
+}
+function Icon({
+  icon: ImportedIcon,
+  name,
+  className,
+  width,
+  height,
+  rotate,
+  flip,
+  inline,
+  title,
+  style = "plain",
+  size: size$1,
+  tone = "neutral"
+}) {
+  const density = useDensity.useDensityValue();
+  const pxSize = size$1 != null ? size.resolveSize(size$1, density) : void 0;
+  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : void 0;
+  const defaultGlyphSize = style === "badge" ? glyphSize : pxSize ?? DEFAULT_PLAIN_ICON_SIZE;
+  const resolvedWidth = width ?? height ?? defaultGlyphSize;
+  const resolvedHeight = height ?? resolvedWidth;
+  const glyphClassName = utils.cn(
+    "inline-block shrink-0 align-[-0.125em]",
+    style === "plain" ? className : void 0
+  );
+  const glyphTitle = style === "plain" ? title : void 0;
+  const renderedIcon = ImportedIcon ? renderImportedGlyph(
+    ImportedIcon,
+    resolvedWidth,
+    resolvedHeight,
+    rotate,
+    flip,
+    inline,
+    glyphClassName,
+    glyphTitle
+  ) : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);
+  if (style === "plain") {
+    return renderedIcon;
+  }
+  const badgeStyle = pxSize != null ? { width: pxSize, height: pxSize } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      title,
+      "aria-label": title,
+      role: title ? "img" : void 0,
+      className: utils.cn(
+        "inline-flex items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-inset",
+        TONE_CLASSES[tone],
+        className
+      ),
+      style: badgeStyle,
+      children: renderedIcon
+    }
+  );
+}
+exports.Icon = Icon;
+exports.setFallbackIconProvider = setFallbackIconProvider;
+//# sourceMappingURL=Icon.cjs.map

package/dist/data/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","sources":["../../src/data/Icon.tsx"],"sourcesContent":["import type { CSSProperties, ComponentType, ElementType } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type IconStyle = \"plain\" | \"badge\";\n\nexport type IconTone = \"emerald\" | \"amber\" | \"rose\" | \"slate\" | \"sky\" | \"violet\" | \"neutral\";\n\nexport type StaticIconComponent = ElementType;\n\ntype CommonIconProps = {\n  /** Classes applied to the glyph or badge wrapper. */\n  className?: string;\n  /** Explicit glyph width. */\n  width?: string | number;\n  /** Explicit glyph height. */\n  height?: string | number;\n  /** CSS rotate value or degrees. */\n  rotate?: string | number;\n  /** Flip direction for imported glyphs. */\n  flip?: string;\n  /** Forward inline rendering semantics to imported glyphs. */\n  inline?: boolean;\n  /** Accessible title for the glyph. */\n  title?: string;\n  /**\n   * Presentation style. `plain` (default) renders the icon inline.\n   * `badge` wraps the icon in a circular chip (white background, ring, shadow)\n   * sized by `size` — use in stage/approval cells so the chip scales with a\n   * neighbouring avatar.\n   */\n  style?: IconStyle;\n  /**\n   * Named size token (xxs..xxl). Drives the badge diameter and glyph. The\n   * glyph is always ~50% of the badge diameter so it scales consistently\n   * across sizes. For `style=\"plain\"` it sets width/height when neither is\n   * provided.\n   */\n  size?: SizeToken;\n  /** Semantic color for `style=\"badge\"`. Ignored for plain icons. */\n  tone?: IconTone;\n};\n\nexport type IconProps = CommonIconProps &\n  (\n    | {\n        /** Imported static icon component. */\n        icon: StaticIconComponent;\n        name?: never;\n      }\n    | {\n        /** Runtime icon name resolved by the fallback provider. */\n        name: string;\n        icon?: never;\n      }\n  );\n\nconst TONE_CLASSES: Record<IconTone, string> = {\n  emerald: \"text-emerald-700 ring-emerald-200/80\",\n  amber: \"text-amber-700 ring-amber-200/80\",\n  rose: \"text-rose-700 ring-rose-200/80\",\n  slate: \"text-slate-700 ring-slate-200/80\",\n  sky: \"text-sky-700 ring-sky-200/80\",\n  violet: \"text-violet-700 ring-violet-200/80\",\n  neutral: \"text-foreground ring-border\",\n};\n\nconst DEFAULT_PLAIN_ICON_SIZE = \"1em\";\n\n/**\n * Optional secondary icon provider for user-supplied runtime names.\n * Built-in/default icons should pass an imported component via `icon`.\n */\nexport type FallbackIconProps = {\n  /** Runtime icon name to resolve. */\n  name?: string;\n  /** Classes applied by Icon. */\n  className?: string;\n  /** Requested glyph size. */\n  size?: string | number;\n  /** Accessible label. */\n  alt?: string;\n};\n\ntype FallbackIconComponent = ComponentType<FallbackIconProps>;\n\nlet fallbackIcon: FallbackIconComponent | null = null;\n\n/**\n * Register a secondary glyph provider. Pass the flanksource Icon/ResourceIcon\n * (or any compatible component) to resolve user-supplied runtime names.\n */\nexport function setFallbackIconProvider(component: FallbackIconComponent | null): void {\n  fallbackIcon = component;\n}\n\nfunction renderImportedGlyph(\n  ImportedIcon: StaticIconComponent,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  rotate: string | number | undefined,\n  flip: string | undefined,\n  inline: boolean | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const transform = [\n    typeof rotate === \"number\" ? `rotate(${rotate}deg)` : typeof rotate === \"string\" ? rotate : \"\",\n    flip === \"horizontal\" || flip === \"both\" ? \"scaleX(-1)\" : \"\",\n    flip === \"vertical\" || flip === \"both\" ? \"scaleY(-1)\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <ImportedIcon\n      {...(glyphClassName ? { className: glyphClassName } : {})}\n      {...(glyphWidth != null ? { width: glyphWidth } : {})}\n      {...(glyphHeight != null ? { height: glyphHeight } : {})}\n      {...(inline != null ? { \"aria-hidden\": !title } : {})}\n      {...(title ? { title, role: \"img\" } : { \"aria-hidden\": true })}\n      {...(transform ? { style: { transform } } : {})}\n    />\n  );\n}\n\nfunction renderRuntimeGlyph(\n  name: string,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  if (fallbackIcon) {\n    const Fallback = fallbackIcon;\n    const glyphSize = typeof glyphWidth === \"number\" ? glyphWidth : glyphHeight;\n    return (\n      <Fallback\n        name={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphSize != null ? { size: glyphSize } : {})}\n        {...(title ? { alt: title } : {})}\n      />\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground\",\n        glyphClassName,\n      )}\n      title={title ?? name}\n      role={title ? \"img\" : undefined}\n      aria-label={title}\n      aria-hidden={title ? undefined : true}\n      style={{\n        width: glyphWidth,\n        height: glyphHeight,\n      }}\n    >\n      ?\n    </span>\n  );\n}\n\nexport function Icon({\n  icon: ImportedIcon,\n  name,\n  className,\n  width,\n  height,\n  rotate,\n  flip,\n  inline,\n  title,\n  style = \"plain\",\n  size,\n  tone = \"neutral\",\n}: IconProps) {\n  const density = useDensityValue();\n  const pxSize = size != null ? resolveSize(size, density) : undefined;\n  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : undefined;\n  const defaultGlyphSize = style === \"badge\" ? glyphSize : (pxSize ?? DEFAULT_PLAIN_ICON_SIZE);\n  const resolvedWidth = width ?? height ?? defaultGlyphSize;\n  const resolvedHeight = height ?? resolvedWidth;\n\n  const glyphClassName = cn(\n    \"inline-block shrink-0 align-[-0.125em]\",\n    style === \"plain\" ? className : undefined,\n  );\n  const glyphTitle = style === \"plain\" ? title : undefined;\n\n  const renderedIcon = ImportedIcon\n    ? renderImportedGlyph(\n        ImportedIcon,\n        resolvedWidth,\n        resolvedHeight,\n        rotate,\n        flip,\n        inline,\n        glyphClassName,\n        glyphTitle,\n      )\n    : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);\n\n  if (style === \"plain\") {\n    return renderedIcon;\n  }\n\n  const badgeStyle: CSSProperties | undefined =\n    pxSize != null ? { width: pxSize, height: pxSize } : undefined;\n\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      role={title ? \"img\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-inset\",\n        TONE_CLASSES[tone],\n        className,\n      )}\n      style={badgeStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n"],"names":["jsx","cn","size","useDensityValue","resolveSize"],"mappings":"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"}

package/dist/data/Icon.d.ts

@@ -1,15 +1,22 @@
-import { ComponentType } from 'react';
+import { ComponentType, ElementType } from 'react';
 import { SizeToken } from '../lib/size';
 export type IconStyle = "plain" | "badge";
 export type IconTone = "emerald" | "amber" | "rose" | "slate" | "sky" | "violet" | "neutral";
-export type IconProps = {
-    name: string;
+export type StaticIconComponent = ElementType;
+type CommonIconProps = {
+    /** Classes applied to the glyph or badge wrapper. */
     className?: string;
+    /** Explicit glyph width. */
     width?: string | number;
+    /** Explicit glyph height. */
     height?: string | number;
+    /** CSS rotate value or degrees. */
     rotate?: string | number;
+    /** Flip direction for imported glyphs. */
     flip?: string;
+    /** Forward inline rendering semantics to imported glyphs. */
     inline?: boolean;
+    /** Accessible title for the glyph. */
     title?: string;
     /**
      * Presentation style. `plain` (default) renders the icon inline.
@@ -28,26 +35,35 @@ export type IconProps = {
     /** Semantic color for `style="badge"`. Ignored for plain icons. */
     tone?: IconTone;
 };
+export type IconProps = CommonIconProps & ({
+    /** Imported static icon component. */
+    icon: StaticIconComponent;
+    name?: never;
+} | {
+    /** Runtime icon name resolved by the fallback provider. */
+    name: string;
+    icon?: never;
+});
 /**
- * Optional secondary icon provider. Consumers can plug in a component
- * (e.g. `Icon` from `@flanksource/icons/icon`) to supply glyphs that the
- * iconify registry doesn't know about (brand logos, k8s resource icons,
- * etc.). Clicky-ui never imports the package directly so consumers that
- * don't need it avoid the dependency entirely.
+ * Optional secondary icon provider for user-supplied runtime names.
+ * Built-in/default icons should pass an imported component via `icon`.
  */
 export type FallbackIconProps = {
+    /** Runtime icon name to resolve. */
     name?: string;
+    /** Classes applied by Icon. */
     className?: string;
+    /** Requested glyph size. */
     size?: string | number;
+    /** Accessible label. */
     alt?: string;
 };
 type FallbackIconComponent = ComponentType<FallbackIconProps>;
 /**
- * Register a secondary glyph provider. Pass the flanksource Icon (or any
- * compatible component) to resolve names that `@iconify/react` hasn't
- * loaded. Call this once at app bootstrap.
+ * Register a secondary glyph provider. Pass the flanksource Icon/ResourceIcon
+ * (or any compatible component) to resolve user-supplied runtime names.
  */
 export declare function setFallbackIconProvider(component: FallbackIconComponent | null): void;
-export declare function Icon({ name, className, width, height, rotate, flip, inline, title, style, size, tone, }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ icon: ImportedIcon, name, className, width, height, rotate, flip, inline, title, style, size, tone, }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Icon.d.ts.map

package/dist/data/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/data/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7F,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAYF;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,qBAAqB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAI9D;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,IAAI,CAErF;AA6DD,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAe,EACf,IAAI,EACJ,IAAgB,GACjB,EAAE,SAAS,2CA2CX"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/data/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7F,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAE9C,KAAK,eAAe,GAAG;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,eAAe,GACrC,CACI;IACE,sCAAsC;IACtC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GACD;IACE,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CACJ,CAAC;AAcJ;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,qBAAqB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAI9D;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,IAAI,CAErF;AAwED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAe,EACf,IAAI,EACJ,IAAgB,GACjB,EAAE,SAAS,2CAiDX"}

package/dist/data/Icon.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { iconLoaded, Icon as Icon$1 } from "@iconify/react";
 import { cn } from "../lib/utils.js";
 import { resolveSize } from "../lib/size.js";
 import { useDensityValue } from "../hooks/use-density.js";
@@ -12,26 +11,30 @@ const TONE_CLASSES = {
   violet: "text-violet-700 ring-violet-200/80",
   neutral: "text-foreground ring-border"
 };
+const DEFAULT_PLAIN_ICON_SIZE = "1em";
 let fallbackIcon = null;
 function setFallbackIconProvider(component) {
   fallbackIcon = component;
 }
-function renderGlyph(name, glyphWidth, glyphHeight, rotate, flip, inline, glyphClassName, title) {
-  if (iconLoaded(name)) {
-    return /* @__PURE__ */ jsx(
-      Icon$1,
-      {
-        icon: name,
-        ...glyphClassName ? { className: glyphClassName } : {},
-        ...glyphWidth != null ? { width: glyphWidth } : {},
-        ...glyphHeight != null ? { height: glyphHeight } : {},
-        ...typeof rotate === "number" ? { rotate } : {},
-        ...flip != null ? { flip } : {},
-        ...inline != null ? { inline } : {},
-        ...title ? { title } : {}
-      }
-    );
-  }
+function renderImportedGlyph(ImportedIcon, glyphWidth, glyphHeight, rotate, flip, inline, glyphClassName, title) {
+  const transform = [
+    typeof rotate === "number" ? `rotate(${rotate}deg)` : typeof rotate === "string" ? rotate : "",
+    flip === "horizontal" || flip === "both" ? "scaleX(-1)" : "",
+    flip === "vertical" || flip === "both" ? "scaleY(-1)" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    ImportedIcon,
+    {
+      ...glyphClassName ? { className: glyphClassName } : {},
+      ...glyphWidth != null ? { width: glyphWidth } : {},
+      ...glyphHeight != null ? { height: glyphHeight } : {},
+      ...inline != null ? { "aria-hidden": !title } : {},
+      ...title ? { title, role: "img" } : { "aria-hidden": true },
+      ...transform ? { style: { transform } } : {}
+    }
+  );
+}
+function renderRuntimeGlyph(name, glyphWidth, glyphHeight, glyphClassName, title) {
   if (fallbackIcon) {
     const Fallback = fallbackIcon;
     const glyphSize = typeof glyphWidth === "number" ? glyphWidth : glyphHeight;
@@ -45,20 +48,27 @@ function renderGlyph(name, glyphWidth, glyphHeight, rotate, flip, inline, glyphC
       }
     );
   }
-  const iconifyProps = {
-    icon: name,
-    className: glyphClassName,
-    "aria-hidden": title ? void 0 : true
-  };
-  if (glyphWidth != null) iconifyProps.width = glyphWidth;
-  if (glyphHeight != null) iconifyProps.height = glyphHeight;
-  if (rotate != null) iconifyProps.rotate = rotate;
-  if (flip != null) iconifyProps.flip = flip;
-  if (inline != null) iconifyProps.inline = inline;
-  if (title != null) iconifyProps.title = title;
-  return /* @__PURE__ */ jsx("iconify-icon", { ...iconifyProps });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground",
+        glyphClassName
+      ),
+      title: title ?? name,
+      role: title ? "img" : void 0,
+      "aria-label": title,
+      "aria-hidden": title ? void 0 : true,
+      style: {
+        width: glyphWidth,
+        height: glyphHeight
+      },
+      children: "?"
+    }
+  );
 }
 function Icon({
+  icon: ImportedIcon,
   name,
   className,
   width,
@@ -74,12 +84,16 @@ function Icon({
   const density = useDensityValue();
   const pxSize = size != null ? resolveSize(size, density) : void 0;
   const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : void 0;
-  const resolvedWidth = width ?? (style === "badge" ? glyphSize : pxSize);
-  const resolvedHeight = height ?? (style === "badge" ? glyphSize : pxSize);
-  const glyphClassName = cn("shrink-0", style === "plain" ? className : void 0);
+  const defaultGlyphSize = style === "badge" ? glyphSize : pxSize ?? DEFAULT_PLAIN_ICON_SIZE;
+  const resolvedWidth = width ?? height ?? defaultGlyphSize;
+  const resolvedHeight = height ?? resolvedWidth;
+  const glyphClassName = cn(
+    "inline-block shrink-0 align-[-0.125em]",
+    style === "plain" ? className : void 0
+  );
   const glyphTitle = style === "plain" ? title : void 0;
-  const icon = renderGlyph(
-    name,
+  const renderedIcon = ImportedIcon ? renderImportedGlyph(
+    ImportedIcon,
     resolvedWidth,
     resolvedHeight,
     rotate,
@@ -87,9 +101,9 @@ function Icon({
     inline,
     glyphClassName,
     glyphTitle
-  );
+  ) : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);
   if (style === "plain") {
-    return icon;
+    return renderedIcon;
   }
   const badgeStyle = pxSize != null ? { width: pxSize, height: pxSize } : void 0;
   return /* @__PURE__ */ jsx(
@@ -104,7 +118,7 @@ function Icon({
         className
       ),
       style: badgeStyle,
-      children: icon
+      children: renderedIcon
     }
   );
 }

package/dist/data/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../src/data/Icon.tsx"],"sourcesContent":["import type { CSSProperties, ComponentType } from \"react\";\nimport { Icon as IconifyReactIcon, iconLoaded } from \"@iconify/react\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n// Type augmentation (no runtime side-effects) — include via tsconfig.\n// @see ./iconify-icon.d.ts\n\nexport type IconStyle = \"plain\" | \"badge\";\n\nexport type IconTone = \"emerald\" | \"amber\" | \"rose\" | \"slate\" | \"sky\" | \"violet\" | \"neutral\";\n\nexport type IconProps = {\n  name: string;\n  className?: string;\n  width?: string | number;\n  height?: string | number;\n  rotate?: string | number;\n  flip?: string;\n  inline?: boolean;\n  title?: string;\n  /**\n   * Presentation style. `plain` (default) renders the icon inline.\n   * `badge` wraps the icon in a circular chip (white background, ring, shadow)\n   * sized by `size` — use in stage/approval cells so the chip scales with a\n   * neighbouring avatar.\n   */\n  style?: IconStyle;\n  /**\n   * Named size token (xxs..xxl). Drives the badge diameter and glyph. The\n   * glyph is always ~50% of the badge diameter so it scales consistently\n   * across sizes. For `style=\"plain\"` it sets width/height when neither is\n   * provided.\n   */\n  size?: SizeToken;\n  /** Semantic color for `style=\"badge\"`. Ignored for plain icons. */\n  tone?: IconTone;\n};\n\nconst TONE_CLASSES: Record<IconTone, string> = {\n  emerald: \"text-emerald-700 ring-emerald-200/80\",\n  amber: \"text-amber-700 ring-amber-200/80\",\n  rose: \"text-rose-700 ring-rose-200/80\",\n  slate: \"text-slate-700 ring-slate-200/80\",\n  sky: \"text-sky-700 ring-sky-200/80\",\n  violet: \"text-violet-700 ring-violet-200/80\",\n  neutral: \"text-foreground ring-border\",\n};\n\n/**\n * Optional secondary icon provider. Consumers can plug in a component\n * (e.g. `Icon` from `@flanksource/icons/icon`) to supply glyphs that the\n * iconify registry doesn't know about (brand logos, k8s resource icons,\n * etc.). Clicky-ui never imports the package directly so consumers that\n * don't need it avoid the dependency entirely.\n */\nexport type FallbackIconProps = {\n  name?: string;\n  className?: string;\n  size?: string | number;\n  alt?: string;\n};\n\ntype FallbackIconComponent = ComponentType<FallbackIconProps>;\n\nlet fallbackIcon: FallbackIconComponent | null = null;\n\n/**\n * Register a secondary glyph provider. Pass the flanksource Icon (or any\n * compatible component) to resolve names that `@iconify/react` hasn't\n * loaded. Call this once at app bootstrap.\n */\nexport function setFallbackIconProvider(component: FallbackIconComponent | null): void {\n  fallbackIcon = component;\n}\n\nfunction renderGlyph(\n  name: string,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  rotate: string | number | undefined,\n  flip: string | undefined,\n  inline: boolean | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  // 1. @iconify/react — build-time lookup via consumer-registered collections.\n  //    Only used when the icon is already in the registry so we never trigger\n  //    a network fetch during SSR.\n  if (iconLoaded(name)) {\n    return (\n      <IconifyReactIcon\n        icon={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphWidth != null ? { width: glyphWidth } : {})}\n        {...(glyphHeight != null ? { height: glyphHeight } : {})}\n        {...(typeof rotate === \"number\" ? { rotate } : {})}\n        {...(flip != null ? { flip } : {})}\n        {...(inline != null ? { inline } : {})}\n        {...(title ? { title } : {})}\n      />\n    );\n  }\n\n  // 2. Consumer-supplied fallback (e.g. @flanksource/icons/icon) — for\n  //    brand/platform glyphs not carried by iconify collections.\n  if (fallbackIcon) {\n    const Fallback = fallbackIcon;\n    const glyphSize = typeof glyphWidth === \"number\" ? glyphWidth : glyphHeight;\n    return (\n      <Fallback\n        name={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphSize != null ? { size: glyphSize } : {})}\n        {...(title ? { alt: title } : {})}\n      />\n    );\n  }\n\n  // 3. <iconify-icon> web component — runtime fallback. Requires the script\n  //    to be loaded on the host page.\n  const iconifyProps: Record<string, unknown> = {\n    icon: name,\n    className: glyphClassName,\n    \"aria-hidden\": title ? undefined : true,\n  };\n  if (glyphWidth != null) iconifyProps.width = glyphWidth;\n  if (glyphHeight != null) iconifyProps.height = glyphHeight;\n  if (rotate != null) iconifyProps.rotate = rotate;\n  if (flip != null) iconifyProps.flip = flip;\n  if (inline != null) iconifyProps.inline = inline;\n  if (title != null) iconifyProps.title = title;\n  return <iconify-icon {...iconifyProps} />;\n}\n\nexport function Icon({\n  name,\n  className,\n  width,\n  height,\n  rotate,\n  flip,\n  inline,\n  title,\n  style = \"plain\",\n  size,\n  tone = \"neutral\",\n}: IconProps) {\n  const density = useDensityValue();\n  const pxSize = size != null ? resolveSize(size, density) : undefined;\n  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : undefined;\n  const resolvedWidth = width ?? (style === \"badge\" ? glyphSize : pxSize);\n  const resolvedHeight = height ?? (style === \"badge\" ? glyphSize : pxSize);\n\n  const glyphClassName = cn(\"shrink-0\", style === \"plain\" ? className : undefined);\n  const glyphTitle = style === \"plain\" ? title : undefined;\n\n  const icon = renderGlyph(\n    name,\n    resolvedWidth,\n    resolvedHeight,\n    rotate,\n    flip,\n    inline,\n    glyphClassName,\n    glyphTitle,\n  );\n\n  if (style === \"plain\") {\n    return icon;\n  }\n\n  const badgeStyle: CSSProperties | undefined =\n    pxSize != null ? { width: pxSize, height: pxSize } : undefined;\n\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      role={title ? \"img\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-inset\",\n        TONE_CLASSES[tone],\n        className,\n      )}\n      style={badgeStyle}\n    >\n      {icon}\n    </span>\n  );\n}\n"],"names":["IconifyReactIcon"],"mappings":"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"}
+{"version":3,"file":"Icon.js","sources":["../../src/data/Icon.tsx"],"sourcesContent":["import type { CSSProperties, ComponentType, ElementType } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type IconStyle = \"plain\" | \"badge\";\n\nexport type IconTone = \"emerald\" | \"amber\" | \"rose\" | \"slate\" | \"sky\" | \"violet\" | \"neutral\";\n\nexport type StaticIconComponent = ElementType;\n\ntype CommonIconProps = {\n  /** Classes applied to the glyph or badge wrapper. */\n  className?: string;\n  /** Explicit glyph width. */\n  width?: string | number;\n  /** Explicit glyph height. */\n  height?: string | number;\n  /** CSS rotate value or degrees. */\n  rotate?: string | number;\n  /** Flip direction for imported glyphs. */\n  flip?: string;\n  /** Forward inline rendering semantics to imported glyphs. */\n  inline?: boolean;\n  /** Accessible title for the glyph. */\n  title?: string;\n  /**\n   * Presentation style. `plain` (default) renders the icon inline.\n   * `badge` wraps the icon in a circular chip (white background, ring, shadow)\n   * sized by `size` — use in stage/approval cells so the chip scales with a\n   * neighbouring avatar.\n   */\n  style?: IconStyle;\n  /**\n   * Named size token (xxs..xxl). Drives the badge diameter and glyph. The\n   * glyph is always ~50% of the badge diameter so it scales consistently\n   * across sizes. For `style=\"plain\"` it sets width/height when neither is\n   * provided.\n   */\n  size?: SizeToken;\n  /** Semantic color for `style=\"badge\"`. Ignored for plain icons. */\n  tone?: IconTone;\n};\n\nexport type IconProps = CommonIconProps &\n  (\n    | {\n        /** Imported static icon component. */\n        icon: StaticIconComponent;\n        name?: never;\n      }\n    | {\n        /** Runtime icon name resolved by the fallback provider. */\n        name: string;\n        icon?: never;\n      }\n  );\n\nconst TONE_CLASSES: Record<IconTone, string> = {\n  emerald: \"text-emerald-700 ring-emerald-200/80\",\n  amber: \"text-amber-700 ring-amber-200/80\",\n  rose: \"text-rose-700 ring-rose-200/80\",\n  slate: \"text-slate-700 ring-slate-200/80\",\n  sky: \"text-sky-700 ring-sky-200/80\",\n  violet: \"text-violet-700 ring-violet-200/80\",\n  neutral: \"text-foreground ring-border\",\n};\n\nconst DEFAULT_PLAIN_ICON_SIZE = \"1em\";\n\n/**\n * Optional secondary icon provider for user-supplied runtime names.\n * Built-in/default icons should pass an imported component via `icon`.\n */\nexport type FallbackIconProps = {\n  /** Runtime icon name to resolve. */\n  name?: string;\n  /** Classes applied by Icon. */\n  className?: string;\n  /** Requested glyph size. */\n  size?: string | number;\n  /** Accessible label. */\n  alt?: string;\n};\n\ntype FallbackIconComponent = ComponentType<FallbackIconProps>;\n\nlet fallbackIcon: FallbackIconComponent | null = null;\n\n/**\n * Register a secondary glyph provider. Pass the flanksource Icon/ResourceIcon\n * (or any compatible component) to resolve user-supplied runtime names.\n */\nexport function setFallbackIconProvider(component: FallbackIconComponent | null): void {\n  fallbackIcon = component;\n}\n\nfunction renderImportedGlyph(\n  ImportedIcon: StaticIconComponent,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  rotate: string | number | undefined,\n  flip: string | undefined,\n  inline: boolean | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const transform = [\n    typeof rotate === \"number\" ? `rotate(${rotate}deg)` : typeof rotate === \"string\" ? rotate : \"\",\n    flip === \"horizontal\" || flip === \"both\" ? \"scaleX(-1)\" : \"\",\n    flip === \"vertical\" || flip === \"both\" ? \"scaleY(-1)\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <ImportedIcon\n      {...(glyphClassName ? { className: glyphClassName } : {})}\n      {...(glyphWidth != null ? { width: glyphWidth } : {})}\n      {...(glyphHeight != null ? { height: glyphHeight } : {})}\n      {...(inline != null ? { \"aria-hidden\": !title } : {})}\n      {...(title ? { title, role: \"img\" } : { \"aria-hidden\": true })}\n      {...(transform ? { style: { transform } } : {})}\n    />\n  );\n}\n\nfunction renderRuntimeGlyph(\n  name: string,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  if (fallbackIcon) {\n    const Fallback = fallbackIcon;\n    const glyphSize = typeof glyphWidth === \"number\" ? glyphWidth : glyphHeight;\n    return (\n      <Fallback\n        name={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphSize != null ? { size: glyphSize } : {})}\n        {...(title ? { alt: title } : {})}\n      />\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground\",\n        glyphClassName,\n      )}\n      title={title ?? name}\n      role={title ? \"img\" : undefined}\n      aria-label={title}\n      aria-hidden={title ? undefined : true}\n      style={{\n        width: glyphWidth,\n        height: glyphHeight,\n      }}\n    >\n      ?\n    </span>\n  );\n}\n\nexport function Icon({\n  icon: ImportedIcon,\n  name,\n  className,\n  width,\n  height,\n  rotate,\n  flip,\n  inline,\n  title,\n  style = \"plain\",\n  size,\n  tone = \"neutral\",\n}: IconProps) {\n  const density = useDensityValue();\n  const pxSize = size != null ? resolveSize(size, density) : undefined;\n  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : undefined;\n  const defaultGlyphSize = style === \"badge\" ? glyphSize : (pxSize ?? DEFAULT_PLAIN_ICON_SIZE);\n  const resolvedWidth = width ?? height ?? defaultGlyphSize;\n  const resolvedHeight = height ?? resolvedWidth;\n\n  const glyphClassName = cn(\n    \"inline-block shrink-0 align-[-0.125em]\",\n    style === \"plain\" ? className : undefined,\n  );\n  const glyphTitle = style === \"plain\" ? title : undefined;\n\n  const renderedIcon = ImportedIcon\n    ? renderImportedGlyph(\n        ImportedIcon,\n        resolvedWidth,\n        resolvedHeight,\n        rotate,\n        flip,\n        inline,\n        glyphClassName,\n        glyphTitle,\n      )\n    : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);\n\n  if (style === \"plain\") {\n    return renderedIcon;\n  }\n\n  const badgeStyle: CSSProperties | undefined =\n    pxSize != null ? { width: pxSize, height: pxSize } : undefined;\n\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      role={title ? \"img\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-inset\",\n        TONE_CLASSES[tone],\n        className,\n      )}\n      style={badgeStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/JsonView.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }) {
+  const [open, setOpen] = react.useState(depth < defaultOpenDepth);
+  if (data === null || data === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground italic", children: "null" });
+  }
+  if (typeof data === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-700 dark:text-green-400", children: [
+      '"',
+      data,
+      '"'
+    ] });
+  }
+  if (typeof data === "number" || typeof data === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-700 dark:text-blue-400", children: String(data) });
+  }
+  if (typeof data !== "object") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: String(data) });
+  }
+  const isArray = Array.isArray(data);
+  const entries = isArray ? data.map((v, i) => [i, v]) : Object.entries(data);
+  const [openB, closeB] = isArray ? ["[", "]"] : ["{", "}"];
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+      openB,
+      closeB
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-mono", style: { paddingLeft: depth > 0 ? "12px" : "0" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "cursor-pointer hover:bg-accent rounded px-0.5 select-none",
+        onClick: () => setOpen(!open),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs mr-1", children: open ? "▼" : "▶" }),
+          name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-400", children: name }),
+          name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: ": " }),
+          !open && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+            openB,
+            " ",
+            entries.length,
+            " ",
+            isArray ? "items" : "keys",
+            " ",
+            closeB
+          ] }),
+          open && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: openB })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      entries.map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 border-l border-border ml-1", children: typeof val === "object" && val !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+        JsonView,
+        {
+          data: val,
+          name: String(key),
+          depth: depth + 1,
+          defaultOpenDepth
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-400", children: isArray ? "" : String(key) }),
+        !isArray && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: ": " }),
+        /* @__PURE__ */ jsxRuntime.jsx(JsonView, { data: val, depth: depth + 1, defaultOpenDepth })
+      ] }) }, key)),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: closeB })
+    ] })
+  ] });
+}
+exports.JsonView = JsonView;
+//# sourceMappingURL=JsonView.cjs.map

package/dist/data/JsonView.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonView.cjs","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  /** JSON-like value to render. */\n  data: unknown;\n  /** Optional property name displayed before nested object/array values. */\n  name?: string;\n  /** Current nesting depth; callers usually leave this unset. */\n  depth?: number;\n  /** Depth that starts expanded by default. */\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length} {isArray ? \"items\" : \"keys\"} {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","jsx","jsxs","Fragment"],"mappings":"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"}

package/dist/data/JsonView.d.ts

@@ -1,7 +1,11 @@
 export type JsonViewProps = {
+    /** JSON-like value to render. */
     data: unknown;
+    /** Optional property name displayed before nested object/array values. */
     name?: string;
+    /** Current nesting depth; callers usually leave this unset. */
     depth?: number;
+    /** Depth that starts expanded by default. */
     defaultOpenDepth?: number;
 };
 export declare function JsonView({ data, name, depth, defaultOpenDepth }: JsonViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/data/JsonView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonView.d.ts","sourceRoot":"","sources":["../../src/data/JsonView.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAS,EAAE,gBAAoB,EAAE,EAAE,aAAa,2CA6EtF"}
+{"version":3,"file":"JsonView.d.ts","sourceRoot":"","sources":["../../src/data/JsonView.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IAC1B,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAS,EAAE,gBAAoB,EAAE,EAAE,aAAa,2CA6EtF"}

package/dist/data/JsonView.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonView.js","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  data: unknown;\n  name?: string;\n  depth?: number;\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length} {isArray ? \"items\" : \"keys\"} {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AASO,SAAS,SAAS,EAAE,MAAM,MAAM,QAAQ,GAAG,mBAAmB,KAAoB;AACvF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,QAAQ,gBAAgB;AAEzD,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO,oBAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,QAAI;AAAA,EAC5D;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,qBAAC,QAAA,EAAK,WAAU,sCAAqC,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAK;AAAA,IAAA,GAAC;AAAA,EACtE;AAEA,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,WAAW;AACzD,+BAAQ,QAAA,EAAK,WAAU,oCAAoC,UAAA,OAAO,IAAI,GAAE;AAAA,EAC1E;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,+BAAQ,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAO,IAAI,GAAE;AAAA,EAC/D;AAEA,QAAM,UAAU,MAAM,QAAQ,IAAI;AAClC,QAAM,UAA6C,UAC9C,KAAmB,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IACxC,OAAO,QAAQ,IAA+B;AAClD,QAAM,CAAC,OAAO,MAAM,IAAI,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;AAExD,MAAI,QAAQ,WAAW,GAAG;AACxB,WACE,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACH;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,qBAAoB,OAAO,EAAE,aAAa,QAAQ,IAAI,SAAS,IAAA,GAC5E,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,QAAQ,CAAC,IAAI;AAAA,QAE5B,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,sCAAsC,UAAA,OAAO,MAAM,KAAI;AAAA,UACtE,QAAQ,oBAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA,MAAK;AAAA,UACrE,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,MAAE;AAAA,UAClD,CAAC,QACA,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,QAAQ;AAAA,YAAO;AAAA,YAAE,UAAU,UAAU;AAAA,YAAO;AAAA,YAAE;AAAA,UAAA,GACzD;AAAA,UAED,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzD,QACC,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MACrB,oBAAC,OAAA,EAAc,WAAU,oCACtB,UAAA,OAAO,QAAQ,YAAY,QAAQ,OAClC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM,OAAO,GAAG;AAAA,UAChB,OAAO,QAAQ;AAAA,UACf;AAAA,QAAA;AAAA,MAAA,yBAGD,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAU,wCACb,oBAAU,KAAK,OAAO,GAAG,GAC5B;AAAA,QACC,CAAC,WAAW,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,MAAE;AAAA,4BACtD,UAAA,EAAS,MAAM,KAAK,OAAO,QAAQ,GAAG,iBAAA,CAAoC;AAAA,MAAA,GAC7E,EAAA,GAfM,GAiBV,CACD;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAA,CAAO;AAAA,IAAA,EAAA,CAClD;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"JsonView.js","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  /** JSON-like value to render. */\n  data: unknown;\n  /** Optional property name displayed before nested object/array values. */\n  name?: string;\n  /** Current nesting depth; callers usually leave this unset. */\n  depth?: number;\n  /** Depth that starts expanded by default. */\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length} {isArray ? \"items\" : \"keys\"} {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAaO,SAAS,SAAS,EAAE,MAAM,MAAM,QAAQ,GAAG,mBAAmB,KAAoB;AACvF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,QAAQ,gBAAgB;AAEzD,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO,oBAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,QAAI;AAAA,EAC5D;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,qBAAC,QAAA,EAAK,WAAU,sCAAqC,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAK;AAAA,IAAA,GAAC;AAAA,EACtE;AAEA,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,WAAW;AACzD,+BAAQ,QAAA,EAAK,WAAU,oCAAoC,UAAA,OAAO,IAAI,GAAE;AAAA,EAC1E;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,+BAAQ,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAO,IAAI,GAAE;AAAA,EAC/D;AAEA,QAAM,UAAU,MAAM,QAAQ,IAAI;AAClC,QAAM,UAA6C,UAC9C,KAAmB,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IACxC,OAAO,QAAQ,IAA+B;AAClD,QAAM,CAAC,OAAO,MAAM,IAAI,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;AAExD,MAAI,QAAQ,WAAW,GAAG;AACxB,WACE,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACH;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,qBAAoB,OAAO,EAAE,aAAa,QAAQ,IAAI,SAAS,IAAA,GAC5E,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,QAAQ,CAAC,IAAI;AAAA,QAE5B,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,sCAAsC,UAAA,OAAO,MAAM,KAAI;AAAA,UACtE,QAAQ,oBAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA,MAAK;AAAA,UACrE,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,MAAE;AAAA,UAClD,CAAC,QACA,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,QAAQ;AAAA,YAAO;AAAA,YAAE,UAAU,UAAU;AAAA,YAAO;AAAA,YAAE;AAAA,UAAA,GACzD;AAAA,UAED,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzD,QACC,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MACrB,oBAAC,OAAA,EAAc,WAAU,oCACtB,UAAA,OAAO,QAAQ,YAAY,QAAQ,OAClC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM,OAAO,GAAG;AAAA,UAChB,OAAO,QAAQ;AAAA,UACf;AAAA,QAAA;AAAA,MAAA,yBAGD,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAU,wCACb,oBAAU,KAAK,OAAO,GAAG,GAC5B;AAAA,QACC,CAAC,WAAW,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,MAAE;AAAA,4BACtD,UAAA,EAAS,MAAM,KAAK,OAAO,QAAQ,GAAG,iBAAA,CAAoC;AAAA,MAAA,GAC7E,EAAA,GAfM,GAiBV,CACD;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAA,CAAO;AAAA,IAAA,EAAA,CAClD;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/data/KeyValueList.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+function KeyValueList({
+  items,
+  className,
+  rowClassName,
+  labelClassName,
+  valueClassName,
+  emptyMessage = "No details"
+}) {
+  const visible = items.filter((item) => !item.hidden);
+  if (visible.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: utils.cn("divide-y divide-border rounded-md border border-border", className), children: visible.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "grid grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)] gap-density-3 px-density-3 py-density-2",
+        rowClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: utils.cn("text-xs font-medium text-muted-foreground", labelClassName), children: item.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils.cn("min-w-0 text-sm text-foreground", valueClassName), children: item.value })
+      ]
+    },
+    item.key
+  )) });
+}
+exports.KeyValueList = KeyValueList;
+//# sourceMappingURL=KeyValueList.cjs.map

package/dist/data/KeyValueList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueList.cjs","sources":["../../src/data/KeyValueList.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type KeyValueListItem = {\n  key: string;\n  label: ReactNode;\n  value: ReactNode;\n  hidden?: boolean;\n};\n\nexport type KeyValueListProps = {\n  items: KeyValueListItem[];\n  className?: string;\n  rowClassName?: string;\n  labelClassName?: string;\n  valueClassName?: string;\n  emptyMessage?: ReactNode;\n};\n\nexport function KeyValueList({\n  items,\n  className,\n  rowClassName,\n  labelClassName,\n  valueClassName,\n  emptyMessage = \"No details\",\n}: KeyValueListProps) {\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  return (\n    <dl className={cn(\"divide-y divide-border rounded-md border border-border\", className)}>\n      {visible.map((item) => (\n        <div\n          key={item.key}\n          className={cn(\n            \"grid grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)] gap-density-3 px-density-3 py-density-2\",\n            rowClassName,\n          )}\n        >\n          <dt className={cn(\"text-xs font-medium text-muted-foreground\", labelClassName)}>\n            {item.label}\n          </dt>\n          <dd className={cn(\"min-w-0 text-sm text-foreground\", valueClassName)}>{item.value}</dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n"],"names":["jsx","cn","jsxs"],"mappings":";;;;AAmBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAAsB;AACpB,QAAM,UAAU,MAAM,OAAO,CAAC,SAAS,CAAC,KAAK,MAAM;AAEnD,MAAI,QAAQ,WAAW,GAAG;AACxB,WAAOA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iCAAiC,UAAA,cAAa;AAAA,EACtE;AAEA,SACEA,2BAAAA,IAAC,MAAA,EAAG,WAAWC,MAAAA,GAAG,0DAA0D,SAAS,GAClF,UAAA,QAAQ,IAAI,CAAC,SACZC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAWD,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,IAAC,QAAG,WAAWC,SAAG,6CAA6C,cAAc,GAC1E,eAAK,OACR;AAAA,QACAD,+BAAC,QAAG,WAAWC,MAAAA,GAAG,mCAAmC,cAAc,GAAI,eAAK,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAT7E,KAAK;AAAA,EAAA,CAWb,GACH;AAEJ;;"}