@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/data/Markdown.cjs

@@ -25,6 +25,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
+const CodeBlock = require("./CodeBlock.cjs");
 let loadPromise = null;
 function loadStreamdown() {
   if (!loadPromise) {
@@ -35,6 +36,33 @@ function loadStreamdown() {
   }
   return loadPromise;
 }
+function nodeText(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join("");
+  if (react.isValidElement(node)) return nodeText(node.props.children);
+  return "";
+}
+function MarkdownCode({ className, children, ...rest }) {
+  var _a;
+  if (!("data-block" in rest)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("code", { className: utils.cn("rounded bg-muted px-1.5 py-0.5 font-mono text-sm", className), children });
+  }
+  const language = (_a = /language-([\w-]+)/.exec(className ?? "")) == null ? void 0 : _a[1];
+  const source = nodeText(children).replace(/\n$/, "");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CodeBlock.CodeBlock,
+    {
+      source,
+      language,
+      className: "not-prose my-4",
+      copyable: true,
+      downloadable: true,
+      themeToggle: true
+    }
+  );
+}
+const markdownComponents = { code: MarkdownCode };
 function Markdown({ text, className }) {
   const [Streamdown, setStreamdown] = react.useState(null);
   react.useEffect(() => {
@@ -49,7 +77,7 @@ function Markdown({ text, className }) {
   if (!Streamdown) {
     return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: utils.cn("whitespace-pre-wrap text-sm", className), children: text });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("prose prose-sm max-w-none dark:prose-invert", className), children: /* @__PURE__ */ jsxRuntime.jsx(Streamdown, { parseIncompleteMarkdown: true, children: text }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("prose prose-sm max-w-none dark:prose-invert", className), children: /* @__PURE__ */ jsxRuntime.jsx(Streamdown, { parseIncompleteMarkdown: true, components: markdownComponents, children: text }) });
 }
 exports.Markdown = Markdown;
 //# sourceMappingURL=Markdown.cjs.map

package/dist/data/Markdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.cjs","sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import { useEffect, useState, type ComponentType } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type MarkdownProps = {\n  /** Markdown source text. */\n  text: string;\n  /** Classes applied to the rendered markdown wrapper. */\n  className?: string;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string;\n  parseIncompleteMarkdown?: boolean;\n}>;\n\nlet loadPromise: Promise<StreamdownComponent | null> | null = null;\n\n// Streamdown is an optional peer dependency (like marked/shiki). It is loaded on\n// demand so the core library does not force it on consumers; while it loads (or\n// if it is absent) we fall back to preformatted text.\nfunction loadStreamdown(): Promise<StreamdownComponent | null> {\n  if (!loadPromise) {\n    loadPromise = import(\"streamdown\")\n      .then((m) => m.Streamdown as unknown as StreamdownComponent)\n      .catch((err) => {\n        console.warn(\"clicky-ui: streamdown not available; rendering markdown as plain text\", err);\n        return null;\n      });\n  }\n  return loadPromise;\n}\n\n/** Renders markdown with Streamdown, which is purpose-built for streaming LLM\n *  output (it gracefully handles incomplete markdown mid-stream). Falls back to\n *  preformatted text until Streamdown loads or when it is not installed. */\nexport function Markdown({ text, className }: MarkdownProps) {\n  const [Streamdown, setStreamdown] = useState<StreamdownComponent | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadStreamdown().then((comp) => {\n      if (!cancelled) setStreamdown(() => comp);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  if (!Streamdown) {\n    return <pre className={cn(\"whitespace-pre-wrap text-sm\", className)}>{text}</pre>;\n  }\n\n  return (\n    <div className={cn(\"prose prose-sm max-w-none dark:prose-invert\", className)}>\n      <Streamdown parseIncompleteMarkdown>{text}</Streamdown>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAI,cAA0D;AAK9D,SAAS,iBAAsD;AAC7D,MAAI,CAAC,aAAa;AAChB,kBAAc,OAAO,YAAY,EAC9B,KAAK,CAAC,MAAM,EAAE,UAA4C,EAC1D,MAAM,CAAC,QAAQ;AACd,cAAQ,KAAK,yEAAyE,GAAG;AACzF,aAAO;AAAA,IACT,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAKO,SAAS,SAAS,EAAE,MAAM,aAA4B;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAqC,IAAI;AAE7EC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,mBAAA,EAAiB,KAAK,CAAC,SAAS;AAC9B,UAAI,CAAC,UAAW,eAAc,MAAM,IAAI;AAAA,IAC1C,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,0CAAQ,OAAA,EAAI,WAAWC,MAAAA,GAAG,+BAA+B,SAAS,GAAI,UAAA,MAAK;AAAA,EAC7E;AAEA,SACEC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,MAAAA,GAAG,+CAA+C,SAAS,GACzE,UAAAC,2BAAAA,IAAC,YAAA,EAAW,yBAAuB,MAAE,UAAA,KAAA,CAAK,GAC5C;AAEJ;;"}
+{"version":3,"file":"Markdown.cjs","sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import { isValidElement, useEffect, useState, type ComponentType, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\n\nexport type MarkdownProps = {\n  /** Markdown source text. */\n  text: string;\n  /** Classes applied to the rendered markdown wrapper. */\n  className?: string;\n};\n\n// Streamdown routes a fenced code block to the `code` override with a `data-block`\n// marker (injected by its default `pre` handler); inline code arrives without it.\ntype MarkdownCodeProps = {\n  className?: string;\n  children?: ReactNode;\n  \"data-block\"?: string;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string;\n  parseIncompleteMarkdown?: boolean;\n  components?: { code?: ComponentType<MarkdownCodeProps> };\n}>;\n\nlet loadPromise: Promise<StreamdownComponent | null> | null = null;\n\n// Streamdown is an optional peer dependency (like marked/shiki). It is loaded on\n// demand so the core library does not force it on consumers; while it loads (or\n// if it is absent) we fall back to preformatted text.\nfunction loadStreamdown(): Promise<StreamdownComponent | null> {\n  if (!loadPromise) {\n    loadPromise = import(\"streamdown\")\n      .then((m) => m.Streamdown as unknown as StreamdownComponent)\n      .catch((err) => {\n        console.warn(\"clicky-ui: streamdown not available; rendering markdown as plain text\", err);\n        return null;\n      });\n  }\n  return loadPromise;\n}\n\nfunction nodeText(node: ReactNode): string {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(nodeText).join(\"\");\n  if (isValidElement(node)) return nodeText((node.props as { children?: ReactNode }).children);\n  return \"\";\n}\n\n// Render fenced code blocks with the library's theme-aware CodeBlock instead of\n// Streamdown's built-in block, whose Shiki `<pre>` keeps a light background that\n// clashes with the app theme (a white code body inside the dark block chrome).\n// Inline code keeps Streamdown's default inline styling.\nfunction MarkdownCode({ className, children, ...rest }: MarkdownCodeProps) {\n  if (!(\"data-block\" in rest)) {\n    return (\n      <code className={cn(\"rounded bg-muted px-1.5 py-0.5 font-mono text-sm\", className)}>\n        {children}\n      </code>\n    );\n  }\n  const language = /language-([\\w-]+)/.exec(className ?? \"\")?.[1];\n  const source = nodeText(children).replace(/\\n$/, \"\");\n  return (\n    <CodeBlock\n      source={source}\n      language={language}\n      className=\"not-prose my-4\"\n      copyable\n      downloadable\n      themeToggle\n    />\n  );\n}\n\nconst markdownComponents = { code: MarkdownCode };\n\n/** Renders markdown with Streamdown, which is purpose-built for streaming LLM\n *  output (it gracefully handles incomplete markdown mid-stream). Fenced code\n *  blocks render via the library CodeBlock. Falls back to preformatted text\n *  until Streamdown loads or when it is not installed. */\nexport function Markdown({ text, className }: MarkdownProps) {\n  const [Streamdown, setStreamdown] = useState<StreamdownComponent | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadStreamdown().then((comp) => {\n      if (!cancelled) setStreamdown(() => comp);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  if (!Streamdown) {\n    return <pre className={cn(\"whitespace-pre-wrap text-sm\", className)}>{text}</pre>;\n  }\n\n  return (\n    <div className={cn(\"prose prose-sm max-w-none dark:prose-invert\", className)}>\n      <Streamdown parseIncompleteMarkdown components={markdownComponents}>\n        {text}\n      </Streamdown>\n    </div>\n  );\n}\n"],"names":["isValidElement","cn","jsx","CodeBlock","useState","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAI,cAA0D;AAK9D,SAAS,iBAAsD;AAC7D,MAAI,CAAC,aAAa;AAChB,kBAAc,OAAO,YAAY,EAC9B,KAAK,CAAC,MAAM,EAAE,UAA4C,EAC1D,MAAM,CAAC,QAAQ;AACd,cAAQ,KAAK,yEAAyE,GAAG;AACzF,aAAO;AAAA,IACT,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEA,SAAS,SAAS,MAAyB;AACzC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,MAAI,OAAO,SAAS,SAAU,QAAO,OAAO,IAAI;AAChD,MAAI,MAAM,QAAQ,IAAI,EAAG,QAAO,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE;AAC1D,MAAIA,MAAAA,eAAe,IAAI,UAAU,SAAU,KAAK,MAAmC,QAAQ;AAC3F,SAAO;AACT;AAMA,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,QAA2B;;AACzE,MAAI,EAAE,gBAAgB,OAAO;AAC3B,0CACG,QAAA,EAAK,WAAWC,MAAAA,GAAG,oDAAoD,SAAS,GAC9E,UACH;AAAA,EAEJ;AACA,QAAM,YAAW,yBAAoB,KAAK,aAAa,EAAE,MAAxC,mBAA4C;AAC7D,QAAM,SAAS,SAAS,QAAQ,EAAE,QAAQ,OAAO,EAAE;AACnD,SACEC,2BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,UAAQ;AAAA,MACR,cAAY;AAAA,MACZ,aAAW;AAAA,IAAA;AAAA,EAAA;AAGjB;AAEA,MAAM,qBAAqB,EAAE,MAAM,aAAA;AAM5B,SAAS,SAAS,EAAE,MAAM,aAA4B;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAIC,MAAAA,SAAqC,IAAI;AAE7EC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,mBAAA,EAAiB,KAAK,CAAC,SAAS;AAC9B,UAAI,CAAC,UAAW,eAAc,MAAM,IAAI;AAAA,IAC1C,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,0CAAQ,OAAA,EAAI,WAAWJ,MAAAA,GAAG,+BAA+B,SAAS,GAAI,UAAA,MAAK;AAAA,EAC7E;AAEA,SACEC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,MAAAA,GAAG,+CAA+C,SAAS,GACzE,UAAAC,2BAAAA,IAAC,YAAA,EAAW,yBAAuB,MAAC,YAAY,oBAC7C,gBACH,GACF;AAEJ;;"}

package/dist/data/Markdown.d.ts

@@ -5,7 +5,8 @@ export type MarkdownProps = {
     className?: string;
 };
 /** Renders markdown with Streamdown, which is purpose-built for streaming LLM
- *  output (it gracefully handles incomplete markdown mid-stream). Falls back to
- *  preformatted text until Streamdown loads or when it is not installed. */
+ *  output (it gracefully handles incomplete markdown mid-stream). Fenced code
+ *  blocks render via the library CodeBlock. Falls back to preformatted text
+ *  until Streamdown loads or when it is not installed. */
 export declare function Markdown({ text, className }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Markdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/data/Markdown.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAyBF;;4EAE4E;AAC5E,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,aAAa,2CAsB1D"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/data/Markdown.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsEF;;;0DAG0D;AAC1D,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,aAAa,2CAwB1D"}

package/dist/data/Markdown.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, isValidElement } from "react";
 import { cn } from "../lib/utils.js";
+import { CodeBlock } from "./CodeBlock.js";
 let loadPromise = null;
 function loadStreamdown() {
   if (!loadPromise) {
@@ -11,6 +12,33 @@ function loadStreamdown() {
   }
   return loadPromise;
 }
+function nodeText(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join("");
+  if (isValidElement(node)) return nodeText(node.props.children);
+  return "";
+}
+function MarkdownCode({ className, children, ...rest }) {
+  var _a;
+  if (!("data-block" in rest)) {
+    return /* @__PURE__ */ jsx("code", { className: cn("rounded bg-muted px-1.5 py-0.5 font-mono text-sm", className), children });
+  }
+  const language = (_a = /language-([\w-]+)/.exec(className ?? "")) == null ? void 0 : _a[1];
+  const source = nodeText(children).replace(/\n$/, "");
+  return /* @__PURE__ */ jsx(
+    CodeBlock,
+    {
+      source,
+      language,
+      className: "not-prose my-4",
+      copyable: true,
+      downloadable: true,
+      themeToggle: true
+    }
+  );
+}
+const markdownComponents = { code: MarkdownCode };
 function Markdown({ text, className }) {
   const [Streamdown, setStreamdown] = useState(null);
   useEffect(() => {
@@ -25,7 +53,7 @@ function Markdown({ text, className }) {
   if (!Streamdown) {
     return /* @__PURE__ */ jsx("pre", { className: cn("whitespace-pre-wrap text-sm", className), children: text });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("prose prose-sm max-w-none dark:prose-invert", className), children: /* @__PURE__ */ jsx(Streamdown, { parseIncompleteMarkdown: true, children: text }) });
+  return /* @__PURE__ */ jsx("div", { className: cn("prose prose-sm max-w-none dark:prose-invert", className), children: /* @__PURE__ */ jsx(Streamdown, { parseIncompleteMarkdown: true, components: markdownComponents, children: text }) });
 }
 export {
   Markdown

package/dist/data/Markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.js","sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import { useEffect, useState, type ComponentType } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type MarkdownProps = {\n  /** Markdown source text. */\n  text: string;\n  /** Classes applied to the rendered markdown wrapper. */\n  className?: string;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string;\n  parseIncompleteMarkdown?: boolean;\n}>;\n\nlet loadPromise: Promise<StreamdownComponent | null> | null = null;\n\n// Streamdown is an optional peer dependency (like marked/shiki). It is loaded on\n// demand so the core library does not force it on consumers; while it loads (or\n// if it is absent) we fall back to preformatted text.\nfunction loadStreamdown(): Promise<StreamdownComponent | null> {\n  if (!loadPromise) {\n    loadPromise = import(\"streamdown\")\n      .then((m) => m.Streamdown as unknown as StreamdownComponent)\n      .catch((err) => {\n        console.warn(\"clicky-ui: streamdown not available; rendering markdown as plain text\", err);\n        return null;\n      });\n  }\n  return loadPromise;\n}\n\n/** Renders markdown with Streamdown, which is purpose-built for streaming LLM\n *  output (it gracefully handles incomplete markdown mid-stream). Falls back to\n *  preformatted text until Streamdown loads or when it is not installed. */\nexport function Markdown({ text, className }: MarkdownProps) {\n  const [Streamdown, setStreamdown] = useState<StreamdownComponent | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadStreamdown().then((comp) => {\n      if (!cancelled) setStreamdown(() => comp);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  if (!Streamdown) {\n    return <pre className={cn(\"whitespace-pre-wrap text-sm\", className)}>{text}</pre>;\n  }\n\n  return (\n    <div className={cn(\"prose prose-sm max-w-none dark:prose-invert\", className)}>\n      <Streamdown parseIncompleteMarkdown>{text}</Streamdown>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAgBA,IAAI,cAA0D;AAK9D,SAAS,iBAAsD;AAC7D,MAAI,CAAC,aAAa;AAChB,kBAAc,OAAO,YAAY,EAC9B,KAAK,CAAC,MAAM,EAAE,UAA4C,EAC1D,MAAM,CAAC,QAAQ;AACd,cAAQ,KAAK,yEAAyE,GAAG;AACzF,aAAO;AAAA,IACT,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAKO,SAAS,SAAS,EAAE,MAAM,aAA4B;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqC,IAAI;AAE7E,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,mBAAA,EAAiB,KAAK,CAAC,SAAS;AAC9B,UAAI,CAAC,UAAW,eAAc,MAAM,IAAI;AAAA,IAC1C,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,+BAAQ,OAAA,EAAI,WAAW,GAAG,+BAA+B,SAAS,GAAI,UAAA,MAAK;AAAA,EAC7E;AAEA,SACE,oBAAC,OAAA,EAAI,WAAW,GAAG,+CAA+C,SAAS,GACzE,UAAA,oBAAC,YAAA,EAAW,yBAAuB,MAAE,UAAA,KAAA,CAAK,GAC5C;AAEJ;"}
+{"version":3,"file":"Markdown.js","sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import { isValidElement, useEffect, useState, type ComponentType, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\n\nexport type MarkdownProps = {\n  /** Markdown source text. */\n  text: string;\n  /** Classes applied to the rendered markdown wrapper. */\n  className?: string;\n};\n\n// Streamdown routes a fenced code block to the `code` override with a `data-block`\n// marker (injected by its default `pre` handler); inline code arrives without it.\ntype MarkdownCodeProps = {\n  className?: string;\n  children?: ReactNode;\n  \"data-block\"?: string;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string;\n  parseIncompleteMarkdown?: boolean;\n  components?: { code?: ComponentType<MarkdownCodeProps> };\n}>;\n\nlet loadPromise: Promise<StreamdownComponent | null> | null = null;\n\n// Streamdown is an optional peer dependency (like marked/shiki). It is loaded on\n// demand so the core library does not force it on consumers; while it loads (or\n// if it is absent) we fall back to preformatted text.\nfunction loadStreamdown(): Promise<StreamdownComponent | null> {\n  if (!loadPromise) {\n    loadPromise = import(\"streamdown\")\n      .then((m) => m.Streamdown as unknown as StreamdownComponent)\n      .catch((err) => {\n        console.warn(\"clicky-ui: streamdown not available; rendering markdown as plain text\", err);\n        return null;\n      });\n  }\n  return loadPromise;\n}\n\nfunction nodeText(node: ReactNode): string {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(nodeText).join(\"\");\n  if (isValidElement(node)) return nodeText((node.props as { children?: ReactNode }).children);\n  return \"\";\n}\n\n// Render fenced code blocks with the library's theme-aware CodeBlock instead of\n// Streamdown's built-in block, whose Shiki `<pre>` keeps a light background that\n// clashes with the app theme (a white code body inside the dark block chrome).\n// Inline code keeps Streamdown's default inline styling.\nfunction MarkdownCode({ className, children, ...rest }: MarkdownCodeProps) {\n  if (!(\"data-block\" in rest)) {\n    return (\n      <code className={cn(\"rounded bg-muted px-1.5 py-0.5 font-mono text-sm\", className)}>\n        {children}\n      </code>\n    );\n  }\n  const language = /language-([\\w-]+)/.exec(className ?? \"\")?.[1];\n  const source = nodeText(children).replace(/\\n$/, \"\");\n  return (\n    <CodeBlock\n      source={source}\n      language={language}\n      className=\"not-prose my-4\"\n      copyable\n      downloadable\n      themeToggle\n    />\n  );\n}\n\nconst markdownComponents = { code: MarkdownCode };\n\n/** Renders markdown with Streamdown, which is purpose-built for streaming LLM\n *  output (it gracefully handles incomplete markdown mid-stream). Fenced code\n *  blocks render via the library CodeBlock. Falls back to preformatted text\n *  until Streamdown loads or when it is not installed. */\nexport function Markdown({ text, className }: MarkdownProps) {\n  const [Streamdown, setStreamdown] = useState<StreamdownComponent | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadStreamdown().then((comp) => {\n      if (!cancelled) setStreamdown(() => comp);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  if (!Streamdown) {\n    return <pre className={cn(\"whitespace-pre-wrap text-sm\", className)}>{text}</pre>;\n  }\n\n  return (\n    <div className={cn(\"prose prose-sm max-w-none dark:prose-invert\", className)}>\n      <Streamdown parseIncompleteMarkdown components={markdownComponents}>\n        {text}\n      </Streamdown>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AA0BA,IAAI,cAA0D;AAK9D,SAAS,iBAAsD;AAC7D,MAAI,CAAC,aAAa;AAChB,kBAAc,OAAO,YAAY,EAC9B,KAAK,CAAC,MAAM,EAAE,UAA4C,EAC1D,MAAM,CAAC,QAAQ;AACd,cAAQ,KAAK,yEAAyE,GAAG;AACzF,aAAO;AAAA,IACT,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEA,SAAS,SAAS,MAAyB;AACzC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,MAAI,OAAO,SAAS,SAAU,QAAO,OAAO,IAAI;AAChD,MAAI,MAAM,QAAQ,IAAI,EAAG,QAAO,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE;AAC1D,MAAI,eAAe,IAAI,UAAU,SAAU,KAAK,MAAmC,QAAQ;AAC3F,SAAO;AACT;AAMA,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,QAA2B;;AACzE,MAAI,EAAE,gBAAgB,OAAO;AAC3B,+BACG,QAAA,EAAK,WAAW,GAAG,oDAAoD,SAAS,GAC9E,UACH;AAAA,EAEJ;AACA,QAAM,YAAW,yBAAoB,KAAK,aAAa,EAAE,MAAxC,mBAA4C;AAC7D,QAAM,SAAS,SAAS,QAAQ,EAAE,QAAQ,OAAO,EAAE;AACnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,UAAQ;AAAA,MACR,cAAY;AAAA,MACZ,aAAW;AAAA,IAAA;AAAA,EAAA;AAGjB;AAEA,MAAM,qBAAqB,EAAE,MAAM,aAAA;AAM5B,SAAS,SAAS,EAAE,MAAM,aAA4B;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqC,IAAI;AAE7E,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,mBAAA,EAAiB,KAAK,CAAC,SAAS;AAC9B,UAAI,CAAC,UAAW,eAAc,MAAM,IAAI;AAAA,IAC1C,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,+BAAQ,OAAA,EAAI,WAAW,GAAG,+BAA+B,SAAS,GAAI,UAAA,MAAK;AAAA,EAC7E;AAEA,SACE,oBAAC,OAAA,EAAI,WAAW,GAAG,+CAA+C,SAAS,GACzE,UAAA,oBAAC,YAAA,EAAW,yBAAuB,MAAC,YAAY,oBAC7C,gBACH,GACF;AAEJ;"}

package/dist/data/Properties.cjs

@@ -1,21 +1,41 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const IconButton = require("../components/IconButton.cjs");
 const utils = require("../lib/utils.cjs");
+const DropdownMenu = require("../overlay/DropdownMenu.cjs");
 const Icon = require("./Icon.cjs");
 const propertiesUtils = require("./properties-utils.cjs");
+const UiRows = require("../icons/components/UiRows.cjs");
+const UiListFlat = require("../icons/components/UiListFlat.cjs");
+const UiListDashes = require("../icons/components/UiListDashes.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
+const UiDotsVertical = require("../icons/components/UiDotsVertical.cjs");
+const PROPERTIES_DENSITY_STORAGE_PREFIX = "clicky-ui-properties";
+const PROPERTIES_DENSITY_OPTIONS = [
+  { value: "compact", label: "Compact", icon: UiRows.UiRows },
+  { value: "comfortable", label: "Comfortable", icon: UiListFlat.UiListFlat },
+  { value: "spacious", label: "Spacious", icon: UiListDashes.UiListDashes }
+];
 const DENSITY_CLASSES = {
+  spacious: {
+    row: "px-density-4 py-density-3",
+    label: "text-sm font-medium text-muted-foreground",
+    value: "text-base text-foreground",
+    gridTemplateColumns: "minmax(12rem, 20rem) minmax(0, 1fr)"
+  },
   comfortable: {
     row: "px-density-3 py-density-2",
     label: "text-xs font-medium text-muted-foreground",
     value: "text-sm text-foreground",
-    gridCols: "grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]"
+    gridTemplateColumns: "minmax(7rem, 12rem) minmax(0, 1fr)"
   },
   compact: {
     row: "px-density-2 py-density-1.5",
     label: "font-mono text-[11px] text-muted-foreground",
     value: "text-xs text-foreground",
-    gridCols: "grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]"
+    gridTemplateColumns: "minmax(8rem, 14rem) minmax(0, 1fr)"
   }
 };
 function Properties({
@@ -27,62 +47,162 @@ function Properties({
   suffixActions,
   className,
   rowClassName,
+  gridTemplateColumns,
   labelClassName,
   valueClassName,
   density = "comfortable",
+  keyRef,
+  showDensityMenu = true,
   emptyMessage = "No properties"
 }) {
+  const [densityOverride, setDensityOverride] = react.useState();
+  react.useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);
   const visible = items.filter((item) => !item.hidden);
   if (visible.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: emptyMessage });
   }
-  const styles = DENSITY_CLASSES[density];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const activeDensity = densityOverride ?? density;
+  const styles = DENSITY_CLASSES[activeDensity];
+  const updateDensity = (next) => {
+    setDensityOverride(next);
+    writeStoredDensity(keyRef, next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "dl",
     {
       className: utils.cn(
         "divide-y divide-border rounded-md border border-border bg-muted/20",
         className
       ),
-      children: visible.map((item) => {
-        const iconName = typeof labelIcon === "function" ? labelIcon(item.key, item.value, item) : labelIcon;
-        const renderedLabel = renderLabel ? renderLabel(item.key, item.value, item) : propertiesUtils.formatPropertyLabel(item.key);
-        const ariaLabel = typeof renderedLabel === "string" ? renderedLabel : item.key;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: utils.cn("grid min-w-0 gap-density-3", styles.gridCols, styles.row, rowClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "dt",
-                {
-                  "aria-label": ariaLabel,
-                  className: utils.cn("min-w-0 truncate", styles.label, labelClassName),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-density-1", children: [
-                      iconName ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconName, className: "text-xs shrink-0" }) : null,
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: renderedLabel })
-                    ] }),
-                    item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-[10px] font-normal text-muted-foreground/80", children: item.subtitle }) : null
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("dd", { className: utils.cn("min-w-0 space-y-density-1", valueClassName), children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("min-w-0 max-w-full", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
-                ] }),
-                item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
-              ] })
-            ]
-          },
-          item.key
-        );
-      })
+      children: [
+        showDensityMenu ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end px-density-2 py-density-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "sr-only", children: "Properties display options" }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesDensityMenu, { density: activeDensity, onChange: updateDensity }) })
+        ] }) : null,
+        visible.map((item) => {
+          const iconName = typeof labelIcon === "function" ? labelIcon(item.key, item.value, item) : labelIcon;
+          const renderedLabel = renderLabel ? renderLabel(item.key, item.value, item) : propertiesUtils.formatPropertyLabel(item.key);
+          const ariaLabel = typeof renderedLabel === "string" ? renderedLabel : item.key;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: utils.cn("grid min-w-0 gap-density-3", styles.row, rowClassName),
+              style: { gridTemplateColumns: gridTemplateColumns ?? styles.gridTemplateColumns },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "dt",
+                  {
+                    "aria-label": ariaLabel,
+                    className: utils.cn("min-w-0 truncate", styles.label, labelClassName),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-density-1", children: [
+                        iconName ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconName, className: "text-xs shrink-0" }) : null,
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: renderedLabel })
+                      ] }),
+                      item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-[10px] font-normal text-muted-foreground/80", children: item.subtitle }) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("dd", { className: utils.cn("min-w-0 space-y-density-1", valueClassName), children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("min-w-0 max-w-full flex-1", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
+                  ] }),
+                  item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
+                ] })
+              ]
+            },
+            item.key
+          );
+        })
+      ]
+    }
+  );
+}
+function PropertiesDensityMenu({
+  density,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "right",
+      menuLabel: "Properties options",
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.IconButton,
+        {
+          icon: UiDotsVertical.UiDotsVertical,
+          label: "Properties options",
+          className: "h-6 w-6"
+        }
+      ),
+      children: (closeMenu) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-44 py-1 text-popover-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 text-xs font-medium text-muted-foreground", children: "Density" }),
+        PROPERTIES_DENSITY_OPTIONS.map((option) => {
+          const active = density === option.value;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": active,
+              className: densityMenuItemClassName(active),
+              onClick: () => {
+                onChange(option.value);
+                closeMenu();
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon.Icon,
+                  {
+                    icon: option.icon,
+                    className: "text-sm text-muted-foreground"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+                active ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+              ]
+            },
+            option.value
+          );
+        })
+      ] })
     }
   );
 }
+function densityMenuItemClassName(active) {
+  return utils.cn(
+    "flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm",
+    "hover:bg-accent focus:bg-accent focus:outline-none",
+    active && "bg-accent/60"
+  );
+}
+function readStoredDensity(keyRef) {
+  const storageKey = propertiesDensityStorageKey(keyRef);
+  if (!storageKey || typeof window === "undefined") return void 0;
+  try {
+    const value = window.localStorage.getItem(storageKey);
+    return isPropertiesDensity(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStoredDensity(keyRef, density) {
+  const storageKey = propertiesDensityStorageKey(keyRef);
+  if (!storageKey || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(storageKey, density);
+  } catch {
+  }
+}
+function propertiesDensityStorageKey(keyRef) {
+  const normalized = keyRef == null ? void 0 : keyRef.trim();
+  return normalized ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density` : void 0;
+}
+function isPropertiesDensity(value) {
+  return value === "compact" || value === "comfortable" || value === "spacious";
+}
 function ActionList({
   actions,
   item,

package/dist/data/Properties.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.cjs","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables an expandable child area below the row value. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridCols: string }\n> = {\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridCols: \"grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridCols: \"grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\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  const styles = DENSITY_CLASSES[density];\n\n  return (\n    <dl\n      className={cn(\n        \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n        className,\n      )}\n    >\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <div\n            key={item.key}\n            className={cn(\"grid min-w-0 gap-density-3\", styles.gridCols, styles.row, rowClassName)}\n          >\n            <dt\n              aria-label={ariaLabel}\n              className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n            >\n              <div className=\"flex min-w-0 items-center gap-density-1\">\n                {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n                <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n              </div>\n              {item.subtitle ? (\n                <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                  {item.subtitle}\n                </div>\n              ) : null}\n            </dt>\n            <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n              <div className=\"flex min-w-0 items-start gap-density-1\">\n                <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n                <div className={cn(\"min-w-0 max-w-full\", styles.value)}>\n                  {renderValue\n                    ? renderValue(item.key, item.value, item)\n                    : defaultRenderValue(item.value)}\n                </div>\n                <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n              </div>\n              {item.expandable && item.expanded && item.renderChildren\n                ? item.renderChildren()\n                : null}\n            </dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":["jsx","cn","formatPropertyLabel","jsxs","Icon"],"mappings":"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"}
+{"version":3,"file":"Properties.cjs","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables an expandable child area below the row value. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(12rem, 20rem) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(7rem, 12rem) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(8rem, 14rem) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\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  const activeDensity = densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n        className,\n      )}\n    >\n      {showDensityMenu ? (\n        <div className=\"flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu density={activeDensity} onChange={updateDensity} />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <div\n            key={item.key}\n            className={cn(\"grid min-w-0 gap-density-3\", styles.row, rowClassName)}\n            style={{ gridTemplateColumns: gridTemplateColumns ?? styles.gridTemplateColumns }}\n          >\n            <dt\n              aria-label={ariaLabel}\n              className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n            >\n              <div className=\"flex min-w-0 items-center gap-density-1\">\n                {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n                <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n              </div>\n              {item.subtitle ? (\n                <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                  {item.subtitle}\n                </div>\n              ) : null}\n            </dt>\n            <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n              <div className=\"flex min-w-0 items-start gap-density-1\">\n                <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n                <div className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}>\n                  {renderValue\n                    ? renderValue(item.key, item.value, item)\n                    : defaultRenderValue(item.value)}\n                </div>\n                <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n              </div>\n              {item.expandable && item.expanded && item.renderChildren\n                ? item.renderChildren()\n                : null}\n            </dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":["UiRows","UiListFlat","UiListDashes","useState","useEffect","jsx","jsxs","cn","formatPropertyLabel","Icon","DropdownMenu","IconButton","UiDotsVertical","UiCheck"],"mappings":"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"}

package/dist/data/Properties.d.ts

@@ -32,7 +32,7 @@ export type PropertiesItem<V = unknown> = {
     /** Child content rendered when the row is expanded. */
     renderChildren?: () => ReactNode;
 };
-export type PropertiesDensity = "comfortable" | "compact";
+export type PropertiesDensity = "comfortable" | "compact" | "spacious";
 export type PropertiesProps<V = unknown> = {
     /** Property rows to render. Hidden items are filtered out. */
     items: PropertiesItem<V>[];
@@ -50,14 +50,20 @@ export type PropertiesProps<V = unknown> = {
     className?: string;
     /** Classes applied to each row. */
     rowClassName?: string;
+    /** CSS grid columns applied to each row. Defaults to the selected density preset. */
+    gridTemplateColumns?: string;
     /** Classes applied to each label cell. */
     labelClassName?: string;
     /** Classes applied to each value cell. */
     valueClassName?: string;
     /** Row density preset. */
     density?: PropertiesDensity;
+    /** Stable reference used to persist this instance's density preference. */
+    keyRef?: string;
+    /** Show the display-options menu. */
+    showDensityMenu?: boolean;
     /** Empty-state content when no rows are visible. */
     emptyMessage?: ReactNode;
 };
-export declare function Properties<V = unknown>({ items, renderLabel, renderValue, labelIcon, prefixActions, suffixActions, className, rowClassName, labelClassName, valueClassName, density, emptyMessage, }: PropertiesProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare function Properties<V = unknown>({ items, renderLabel, renderValue, labelIcon, prefixActions, suffixActions, className, rowClassName, gridTemplateColumns, labelClassName, valueClassName, density, keyRef, showDensityMenu, emptyMessage, }: PropertiesProps<V>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Properties.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Properties.d.ts","sourceRoot":"","sources":["../../src/data/Properties.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC1C,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,+CAA+C;IAC/C,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACnC,wDAAwD;IACxD,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;IAClE,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;IACtE,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;IACvE,6CAA6C;IAC7C,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI;IACxC,2DAA2D;IAC3D,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,KAAK,EAAE,CAAC,CAAC;IACT,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,SAAS,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,OAAO,IAAI;IACzC,8DAA8D;IAC9D,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAC5E,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAC5E,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;IAC9F,yCAAyC;IACzC,aAAa,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,wCAAwC;IACxC,aAAa,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,oDAAoD;IACpD,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAoBF,wBAAgB,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,EACtC,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,aAAa,EACb,SAAS,EACT,YAAY,EACZ,cAAc,EACd,cAAc,EACd,OAAuB,EACvB,YAA8B,GAC/B,EAAE,eAAe,CAAC,CAAC,CAAC,2CA8DpB"}
+{"version":3,"file":"Properties.d.ts","sourceRoot":"","sources":["../../src/data/Properties.tsx"],"names":[],"mappings":"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"}