@flanksource/clicky-ui 0.3.21 → 0.3.23

package/dist/data/DataTableGroupingControls.cjs

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const select = require("../components/select.cjs");
+const utils = require("../lib/utils.cjs");
+const Icon = require("./Icon.cjs");
+const UiExpandAll = require("../icons/components/UiExpandAll.cjs");
+const UiCollapseAll = require("../icons/components/UiCollapseAll.cjs");
+function DataTableGroupingControls({
+  modes,
+  value,
+  hasGroups,
+  allExpanded,
+  allCollapsed,
+  onModeChange,
+  onExpandAll,
+  onCollapseAll
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex shrink-0 items-center gap-1",
+      role: "group",
+      "aria-label": "Grouping controls",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-44 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          select.Select,
+          {
+            "aria-label": "Group rows by",
+            value,
+            options: modes,
+            onChange: (event) => onModeChange(event.target.value)
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          GroupingButton,
+          {
+            label: "Expand all groups",
+            pressed: allExpanded,
+            disabled: !hasGroups,
+            onClick: onExpandAll,
+            icon: UiExpandAll.UiExpandAll
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          GroupingButton,
+          {
+            label: "Collapse all groups",
+            pressed: allCollapsed,
+            disabled: !hasGroups,
+            onClick: onCollapseAll,
+            icon: UiCollapseAll.UiCollapseAll
+          }
+        )
+      ]
+    }
+  );
+}
+function GroupingButton({
+  label,
+  pressed,
+  disabled,
+  onClick,
+  icon
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "aria-pressed": pressed,
+      disabled,
+      onClick,
+      className: utils.cn(
+        "inline-flex h-control-h w-control-h items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        pressed && "bg-accent text-accent-foreground"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, className: "text-sm" })
+    }
+  );
+}
+exports.DataTableGroupingControls = DataTableGroupingControls;
+//# sourceMappingURL=DataTableGroupingControls.cjs.map

package/dist/data/DataTableGroupingControls.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGroupingControls.cjs","sources":["../../src/data/DataTableGroupingControls.tsx"],"sourcesContent":["import { Select } from \"../components/select\";\nimport { UiCollapseAll, UiExpandAll } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\ntype GroupingControlMode = {\n  value: string;\n  label: string;\n};\n\nexport type DataTableGroupingControlsProps = {\n  modes: GroupingControlMode[];\n  value: string;\n  hasGroups: boolean;\n  allExpanded: boolean;\n  allCollapsed: boolean;\n  onModeChange: (value: string) => void;\n  onExpandAll: () => void;\n  onCollapseAll: () => void;\n};\n\nexport function DataTableGroupingControls({\n  modes,\n  value,\n  hasGroups,\n  allExpanded,\n  allCollapsed,\n  onModeChange,\n  onExpandAll,\n  onCollapseAll,\n}: DataTableGroupingControlsProps) {\n  return (\n    <div\n      className=\"flex shrink-0 items-center gap-1\"\n      role=\"group\"\n      aria-label=\"Grouping controls\"\n    >\n      <div className=\"w-44 shrink-0\">\n        <Select\n          aria-label=\"Group rows by\"\n          value={value}\n          options={modes}\n          onChange={(event) => onModeChange(event.target.value)}\n        />\n      </div>\n      <GroupingButton\n        label=\"Expand all groups\"\n        pressed={allExpanded}\n        disabled={!hasGroups}\n        onClick={onExpandAll}\n        icon={UiExpandAll}\n      />\n      <GroupingButton\n        label=\"Collapse all groups\"\n        pressed={allCollapsed}\n        disabled={!hasGroups}\n        onClick={onCollapseAll}\n        icon={UiCollapseAll}\n      />\n    </div>\n  );\n}\n\nfunction GroupingButton({\n  label,\n  pressed,\n  disabled,\n  onClick,\n  icon,\n}: {\n  label: string;\n  pressed: boolean;\n  disabled: boolean;\n  onClick: () => void;\n  icon: StaticIconComponent;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      aria-pressed={pressed}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        \"inline-flex h-control-h w-control-h items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        pressed && \"bg-accent text-accent-foreground\",\n      )}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n"],"names":["jsxs","jsx","Select","UiExpandAll","UiCollapseAll","cn","Icon"],"mappings":";;;;;;;;AAqBO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBACb,UAAAA,2BAAAA;AAAAA,UAACC,OAAAA;AAAAA,UAAA;AAAA,YACC,cAAW;AAAA,YACX;AAAA,YACA,SAAS;AAAA,YACT,UAAU,CAAC,UAAU,aAAa,MAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAAA,GAExD;AAAA,QACAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS;AAAA,YACT,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YACT,MAAME,YAAAA;AAAAA,UAAA;AAAA,QAAA;AAAA,QAERF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS;AAAA,YACT,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YACT,MAAMG,cAAAA;AAAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACEH,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,gBAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,WAAWI,MAAAA;AAAAA,QACT;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,MAGb,UAAAJ,2BAAAA,IAACK,KAAAA,MAAA,EAAK,MAAY,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG5C;;"}

package/dist/data/DataTableGroupingControls.d.ts

@@ -0,0 +1,17 @@
+type GroupingControlMode = {
+    value: string;
+    label: string;
+};
+export type DataTableGroupingControlsProps = {
+    modes: GroupingControlMode[];
+    value: string;
+    hasGroups: boolean;
+    allExpanded: boolean;
+    allCollapsed: boolean;
+    onModeChange: (value: string) => void;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+};
+export declare function DataTableGroupingControls({ modes, value, hasGroups, allExpanded, allCollapsed, onModeChange, onExpandAll, onCollapseAll, }: DataTableGroupingControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DataTableGroupingControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGroupingControls.d.ts","sourceRoot":"","sources":["../../src/data/DataTableGroupingControls.tsx"],"names":[],"mappings":"AAKA,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACd,EAAE,8BAA8B,2CA+BhC"}

package/dist/data/DataTableGroupingControls.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Select } from "../components/select.js";
+import { cn } from "../lib/utils.js";
+import { Icon } from "./Icon.js";
+import { UiExpandAll } from "../icons/components/UiExpandAll.js";
+import { UiCollapseAll } from "../icons/components/UiCollapseAll.js";
+function DataTableGroupingControls({
+  modes,
+  value,
+  hasGroups,
+  allExpanded,
+  allCollapsed,
+  onModeChange,
+  onExpandAll,
+  onCollapseAll
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex shrink-0 items-center gap-1",
+      role: "group",
+      "aria-label": "Grouping controls",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-44 shrink-0", children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            "aria-label": "Group rows by",
+            value,
+            options: modes,
+            onChange: (event) => onModeChange(event.target.value)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          GroupingButton,
+          {
+            label: "Expand all groups",
+            pressed: allExpanded,
+            disabled: !hasGroups,
+            onClick: onExpandAll,
+            icon: UiExpandAll
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GroupingButton,
+          {
+            label: "Collapse all groups",
+            pressed: allCollapsed,
+            disabled: !hasGroups,
+            onClick: onCollapseAll,
+            icon: UiCollapseAll
+          }
+        )
+      ]
+    }
+  );
+}
+function GroupingButton({
+  label,
+  pressed,
+  disabled,
+  onClick,
+  icon
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "aria-pressed": pressed,
+      disabled,
+      onClick,
+      className: cn(
+        "inline-flex h-control-h w-control-h items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        pressed && "bg-accent text-accent-foreground"
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { icon, className: "text-sm" })
+    }
+  );
+}
+export {
+  DataTableGroupingControls
+};
+//# sourceMappingURL=DataTableGroupingControls.js.map

package/dist/data/DataTableGroupingControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGroupingControls.js","sources":["../../src/data/DataTableGroupingControls.tsx"],"sourcesContent":["import { Select } from \"../components/select\";\nimport { UiCollapseAll, UiExpandAll } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\ntype GroupingControlMode = {\n  value: string;\n  label: string;\n};\n\nexport type DataTableGroupingControlsProps = {\n  modes: GroupingControlMode[];\n  value: string;\n  hasGroups: boolean;\n  allExpanded: boolean;\n  allCollapsed: boolean;\n  onModeChange: (value: string) => void;\n  onExpandAll: () => void;\n  onCollapseAll: () => void;\n};\n\nexport function DataTableGroupingControls({\n  modes,\n  value,\n  hasGroups,\n  allExpanded,\n  allCollapsed,\n  onModeChange,\n  onExpandAll,\n  onCollapseAll,\n}: DataTableGroupingControlsProps) {\n  return (\n    <div\n      className=\"flex shrink-0 items-center gap-1\"\n      role=\"group\"\n      aria-label=\"Grouping controls\"\n    >\n      <div className=\"w-44 shrink-0\">\n        <Select\n          aria-label=\"Group rows by\"\n          value={value}\n          options={modes}\n          onChange={(event) => onModeChange(event.target.value)}\n        />\n      </div>\n      <GroupingButton\n        label=\"Expand all groups\"\n        pressed={allExpanded}\n        disabled={!hasGroups}\n        onClick={onExpandAll}\n        icon={UiExpandAll}\n      />\n      <GroupingButton\n        label=\"Collapse all groups\"\n        pressed={allCollapsed}\n        disabled={!hasGroups}\n        onClick={onCollapseAll}\n        icon={UiCollapseAll}\n      />\n    </div>\n  );\n}\n\nfunction GroupingButton({\n  label,\n  pressed,\n  disabled,\n  onClick,\n  icon,\n}: {\n  label: string;\n  pressed: boolean;\n  disabled: boolean;\n  onClick: () => void;\n  icon: StaticIconComponent;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      aria-pressed={pressed}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        \"inline-flex h-control-h w-control-h items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        pressed && \"bg-accent text-accent-foreground\",\n      )}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAqBO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAW;AAAA,YACX;AAAA,YACA,SAAS;AAAA,YACT,UAAU,CAAC,UAAU,aAAa,MAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAAA,GAExD;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS;AAAA,YACT,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YACT,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAER;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS;AAAA,YACT,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YACT,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,gBAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,MAGb,UAAA,oBAAC,MAAA,EAAK,MAAY,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG5C;"}

package/dist/data/HighlightedTokens.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+function HighlightedTokens({
+  tokens,
+  content
+}) {
+  if (!tokens || tokens.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenStyle(token), children: token.content }, index)) });
+}
+function tokenStyle(token) {
+  const style = {};
+  if (token.color) style.color = token.color;
+  const fontStyle = token.fontStyle ?? 0;
+  if (fontStyle & 1) style.fontStyle = "italic";
+  if (fontStyle & 2) style.fontWeight = 700;
+  if (fontStyle & 4) style.textDecorationLine = "underline";
+  return style;
+}
+exports.HighlightedTokens = HighlightedTokens;
+//# sourceMappingURL=HighlightedTokens.cjs.map

package/dist/data/HighlightedTokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightedTokens.cjs","sources":["../../src/data/HighlightedTokens.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport type { HighlightedLine, HighlightedToken } from \"./code-highlight\";\n\n// HighlightedTokens paints one `highlightToLines` line as themed spans, falling\n// back to the raw text when tokenization was unavailable (unsupported language,\n// highlighter failure, or the tokens simply not loaded yet). Shared by every\n// surface that paints its own gutter — CodeDiff's diff rows and the stack-frame\n// source window — none of which can embed Shiki's own `<pre>` because their line\n// numbers are not a contiguous 1..N run.\nexport function HighlightedTokens({\n  tokens,\n  content,\n}: {\n  tokens: HighlightedLine | undefined;\n  content: string;\n}) {\n  if (!tokens || tokens.length === 0) return <>{content}</>;\n  return (\n    <>\n      {tokens.map((token, index) => (\n        <span key={index} style={tokenStyle(token)}>\n          {token.content}\n        </span>\n      ))}\n    </>\n  );\n}\n\n// Shiki's `fontStyle` is a bitmask: 1=italic, 2=bold, 4=underline.\nfunction tokenStyle(token: HighlightedToken): CSSProperties {\n  const style: CSSProperties = {};\n  if (token.color) style.color = token.color;\n  const fontStyle = token.fontStyle ?? 0;\n  if (fontStyle & 1) style.fontStyle = \"italic\";\n  if (fontStyle & 2) style.fontWeight = 700;\n  if (fontStyle & 4) style.textDecorationLine = \"underline\";\n  return style;\n}\n"],"names":["jsx"],"mappings":";;;AASO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAGG;AACD,MAAI,CAAC,UAAU,OAAO,WAAW,EAAG,8DAAU,UAAA,SAAQ;AACtD,+DAEK,UAAA,OAAO,IAAI,CAAC,OAAO,UAClBA,+BAAC,QAAA,EAAiB,OAAO,WAAW,KAAK,GACtC,UAAA,MAAM,QAAA,GADE,KAEX,CACD,GACH;AAEJ;AAGA,SAAS,WAAW,OAAwC;AAC1D,QAAM,QAAuB,CAAA;AAC7B,MAAI,MAAM,MAAO,OAAM,QAAQ,MAAM;AACrC,QAAM,YAAY,MAAM,aAAa;AACrC,MAAI,YAAY,EAAG,OAAM,YAAY;AACrC,MAAI,YAAY,EAAG,OAAM,aAAa;AACtC,MAAI,YAAY,EAAG,OAAM,qBAAqB;AAC9C,SAAO;AACT;;"}

package/dist/data/HighlightedTokens.d.ts

@@ -0,0 +1,6 @@
+import { HighlightedLine } from './code-highlight';
+export declare function HighlightedTokens({ tokens, content, }: {
+    tokens: HighlightedLine | undefined;
+    content: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HighlightedTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightedTokens.d.ts","sourceRoot":"","sources":["../../src/data/HighlightedTokens.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,kBAAkB,CAAC;AAQ1E,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,OAAO,GACR,EAAE;IACD,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;CACjB,2CAWA"}

package/dist/data/HighlightedTokens.js

@@ -0,0 +1,21 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+function HighlightedTokens({
+  tokens,
+  content
+}) {
+  if (!tokens || tokens.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: content });
+  return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ jsx("span", { style: tokenStyle(token), children: token.content }, index)) });
+}
+function tokenStyle(token) {
+  const style = {};
+  if (token.color) style.color = token.color;
+  const fontStyle = token.fontStyle ?? 0;
+  if (fontStyle & 1) style.fontStyle = "italic";
+  if (fontStyle & 2) style.fontWeight = 700;
+  if (fontStyle & 4) style.textDecorationLine = "underline";
+  return style;
+}
+export {
+  HighlightedTokens
+};
+//# sourceMappingURL=HighlightedTokens.js.map

package/dist/data/HighlightedTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightedTokens.js","sources":["../../src/data/HighlightedTokens.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport type { HighlightedLine, HighlightedToken } from \"./code-highlight\";\n\n// HighlightedTokens paints one `highlightToLines` line as themed spans, falling\n// back to the raw text when tokenization was unavailable (unsupported language,\n// highlighter failure, or the tokens simply not loaded yet). Shared by every\n// surface that paints its own gutter — CodeDiff's diff rows and the stack-frame\n// source window — none of which can embed Shiki's own `<pre>` because their line\n// numbers are not a contiguous 1..N run.\nexport function HighlightedTokens({\n  tokens,\n  content,\n}: {\n  tokens: HighlightedLine | undefined;\n  content: string;\n}) {\n  if (!tokens || tokens.length === 0) return <>{content}</>;\n  return (\n    <>\n      {tokens.map((token, index) => (\n        <span key={index} style={tokenStyle(token)}>\n          {token.content}\n        </span>\n      ))}\n    </>\n  );\n}\n\n// Shiki's `fontStyle` is a bitmask: 1=italic, 2=bold, 4=underline.\nfunction tokenStyle(token: HighlightedToken): CSSProperties {\n  const style: CSSProperties = {};\n  if (token.color) style.color = token.color;\n  const fontStyle = token.fontStyle ?? 0;\n  if (fontStyle & 1) style.fontStyle = \"italic\";\n  if (fontStyle & 2) style.fontWeight = 700;\n  if (fontStyle & 4) style.textDecorationLine = \"underline\";\n  return style;\n}\n"],"names":[],"mappings":";AASO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAGG;AACD,MAAI,CAAC,UAAU,OAAO,WAAW,EAAG,wCAAU,UAAA,SAAQ;AACtD,yCAEK,UAAA,OAAO,IAAI,CAAC,OAAO,UAClB,oBAAC,QAAA,EAAiB,OAAO,WAAW,KAAK,GACtC,UAAA,MAAM,QAAA,GADE,KAEX,CACD,GACH;AAEJ;AAGA,SAAS,WAAW,OAAwC;AAC1D,QAAM,QAAuB,CAAA;AAC7B,MAAI,MAAM,MAAO,OAAM,QAAQ,MAAM;AACrC,QAAM,YAAY,MAAM,aAAa;AACrC,MAAI,YAAY,EAAG,OAAM,YAAY;AACrC,MAAI,YAAY,EAAG,OAAM,aAAa;AACtC,MAAI,YAAY,EAAG,OAAM,qBAAqB;AAC9C,SAAO;AACT;"}

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 Callout = require("./Callout.cjs");
 const CodeBlock = require("./CodeBlock.cjs");
 let loadPromise = null;
 function loadStreamdown() {
@@ -107,7 +108,27 @@ const markdownComponents = {
   th: MarkdownTableHeaderCell,
   td: MarkdownTableCell
 };
-function Markdown({ text, className }) {
+function MarkdownCallout({ badge, children, className, emphasis, icon, label, source, title, variant }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Callout.Callout,
+    {
+      badge,
+      className,
+      emphasis,
+      icon,
+      label,
+      source,
+      title,
+      variant,
+      children
+    }
+  );
+}
+const calloutComponents = { ...markdownComponents, calloutbox: MarkdownCallout };
+const CALLOUT_ALLOWED_TAGS = {
+  calloutbox: ["variant", "label", "badge", "source", "icon", "emphasis", "title"]
+};
+function Markdown({ text, className, callouts = false }) {
   const [Streamdown, setStreamdown] = react.useState(null);
   react.useEffect(() => {
     let cancelled = false;
@@ -121,7 +142,15 @@ 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, components: markdownComponents, 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: callouts ? calloutComponents : markdownComponents,
+      allowedTags: callouts ? CALLOUT_ALLOWED_TAGS : void 0,
+      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 {\n  isValidElement,\n  useEffect,\n  useState,\n  type ComponentType,\n  type CSSProperties,\n  type ReactNode,\n} 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\n// Every override also receives the source `node`, which is not a DOM attribute —\n// each one drops it rather than spreading it onto the element. `style` carries\n// the per-column alignment GFM puts on table cells.\ntype MarkdownElementProps = {\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  node?: unknown;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string;\n  parseIncompleteMarkdown?: boolean;\n  components?: {\n    code?: ComponentType<MarkdownCodeProps>;\n    ul?: ComponentType<MarkdownElementProps>;\n    ol?: ComponentType<MarkdownElementProps>;\n    table?: ComponentType<MarkdownElementProps>;\n    thead?: ComponentType<MarkdownElementProps>;\n    tbody?: ComponentType<MarkdownElementProps>;\n    th?: ComponentType<MarkdownElementProps>;\n    td?: ComponentType<MarkdownElementProps>;\n  };\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\n// Streamdown indents nested lists with `[li_&]:pl-6`, an arbitrary-variant class\n// that only compiles if the consumer's Tailwind happens to scan streamdown's\n// dist — otherwise every level renders flush left. Own the list styling here so\n// the marker and the indent ship from this library's own source. Markers sit\n// outside the padding so each level steps in cleanly. Task lists drop both: the\n// checkbox is the marker.\nfunction MarkdownList({ className, children }: MarkdownElementProps) {\n  const isTaskList = className?.includes(\"contains-task-list\");\n  return (\n    <ul\n      className={cn(\"whitespace-normal\", isTaskList ? \"list-none pl-0\" : \"list-disc pl-6\", className)}\n    >\n      {children}\n    </ul>\n  );\n}\n\nfunction MarkdownOrderedList({ className, children }: MarkdownElementProps) {\n  return <ol className={cn(\"list-decimal whitespace-normal pl-6\", className)}>{children}</ol>;\n}\n\n// Streamdown wraps tables in a `bg-sidebar` card with its own copy/download/\n// fullscreen chrome — a dark navy box around a light table under this library's\n// tokens — and puts the header shading behind `bg-muted/80`, an opacity-modifier\n// class the consumer's Tailwind never sees. Own the whole table instead, styled\n// like DataTable: a bordered scroll container so wide tables scroll rather than\n// overflow the page.\nfunction MarkdownTable({ className, children }: MarkdownElementProps) {\n  return (\n    <div className=\"not-prose my-4 max-w-full overflow-x-auto rounded-md border border-border\">\n      <table className={cn(\"w-max min-w-full table-auto text-left text-sm\", className)}>\n        {children}\n      </table>\n    </div>\n  );\n}\n\nfunction MarkdownTableHead({ className, children }: MarkdownElementProps) {\n  return <thead className={cn(\"border-b border-border bg-muted\", className)}>{children}</thead>;\n}\n\nfunction MarkdownTableBody({ className, children }: MarkdownElementProps) {\n  return <tbody className={cn(\"divide-y divide-border\", className)}>{children}</tbody>;\n}\n\n// `style` holds the column alignment from the delimiter row, so it must survive.\nfunction MarkdownTableHeaderCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <th\n      className={cn(\"whitespace-nowrap px-density-3 py-density-2 font-semibold\", className)}\n      style={style}\n    >\n      {children}\n    </th>\n  );\n}\n\nfunction MarkdownTableCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <td className={cn(\"px-density-3 py-density-2 align-top\", className)} style={style}>\n      {children}\n    </td>\n  );\n}\n\nconst markdownComponents = {\n  code: MarkdownCode,\n  ul: MarkdownList,\n  ol: MarkdownOrderedList,\n  table: MarkdownTable,\n  thead: MarkdownTableHead,\n  tbody: MarkdownTableBody,\n  th: MarkdownTableHeaderCell,\n  td: MarkdownTableCell,\n};\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, and lists and tables are styled\n *  here rather than by Streamdown. Falls back to preformatted text until\n *  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":"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"}
+{"version":3,"file":"Markdown.cjs","sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import {\n  isValidElement,\n  useEffect,\n  useState,\n  type ComponentType,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Callout, type CalloutProps } from \"./Callout\";\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   * Render `<CalloutBox …>` authored inline in the markdown as a\n   * {@link Callout}.\n   *\n   * Off by default. It admits exactly one extra tag with exactly the callout's\n   * own attributes — no other markup in `text` becomes live — so it is safe to\n   * turn on wherever callouts are wanted.\n   */\n  callouts?: boolean | undefined;\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\n// Every override also receives the source `node`, which is not a DOM attribute —\n// each one drops it rather than spreading it onto the element. `style` carries\n// the per-column alignment GFM puts on table cells.\ntype MarkdownElementProps = {\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  node?: unknown;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string | undefined;\n  parseIncompleteMarkdown?: boolean | undefined;\n  // Tag name -> the attribute names it may carry. Streamdown drops every other\n  // raw tag, so this is an allowlist rather than raw-HTML passthrough.\n  allowedTags?: Record<string, string[]> | undefined;\n  components?: {\n    code?: ComponentType<MarkdownCodeProps>;\n    ul?: ComponentType<MarkdownElementProps>;\n    ol?: ComponentType<MarkdownElementProps>;\n    table?: ComponentType<MarkdownElementProps>;\n    thead?: ComponentType<MarkdownElementProps>;\n    tbody?: ComponentType<MarkdownElementProps>;\n    th?: ComponentType<MarkdownElementProps>;\n    td?: ComponentType<MarkdownElementProps>;\n    // Streamdown lowercases every tag name, so an authored `<CalloutBox>`\n    // arrives here as `calloutbox`.\n    calloutbox?: ComponentType<CalloutProps & { node?: unknown }>;\n  };\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\n// Streamdown indents nested lists with `[li_&]:pl-6`, an arbitrary-variant class\n// that only compiles if the consumer's Tailwind happens to scan streamdown's\n// dist — otherwise every level renders flush left. Own the list styling here so\n// the marker and the indent ship from this library's own source. Markers sit\n// outside the padding so each level steps in cleanly. Task lists drop both: the\n// checkbox is the marker.\nfunction MarkdownList({ className, children }: MarkdownElementProps) {\n  const isTaskList = className?.includes(\"contains-task-list\");\n  return (\n    <ul\n      className={cn(\"whitespace-normal\", isTaskList ? \"list-none pl-0\" : \"list-disc pl-6\", className)}\n    >\n      {children}\n    </ul>\n  );\n}\n\nfunction MarkdownOrderedList({ className, children }: MarkdownElementProps) {\n  return <ol className={cn(\"list-decimal whitespace-normal pl-6\", className)}>{children}</ol>;\n}\n\n// Streamdown wraps tables in a `bg-sidebar` card with its own copy/download/\n// fullscreen chrome — a dark navy box around a light table under this library's\n// tokens — and puts the header shading behind `bg-muted/80`, an opacity-modifier\n// class the consumer's Tailwind never sees. Own the whole table instead, styled\n// like DataTable: a bordered scroll container so wide tables scroll rather than\n// overflow the page.\nfunction MarkdownTable({ className, children }: MarkdownElementProps) {\n  return (\n    <div className=\"not-prose my-4 max-w-full overflow-x-auto rounded-md border border-border\">\n      <table className={cn(\"w-max min-w-full table-auto text-left text-sm\", className)}>\n        {children}\n      </table>\n    </div>\n  );\n}\n\nfunction MarkdownTableHead({ className, children }: MarkdownElementProps) {\n  return <thead className={cn(\"border-b border-border bg-muted\", className)}>{children}</thead>;\n}\n\nfunction MarkdownTableBody({ className, children }: MarkdownElementProps) {\n  return <tbody className={cn(\"divide-y divide-border\", className)}>{children}</tbody>;\n}\n\n// `style` holds the column alignment from the delimiter row, so it must survive.\nfunction MarkdownTableHeaderCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <th\n      className={cn(\"whitespace-nowrap px-density-3 py-density-2 font-semibold\", className)}\n      style={style}\n    >\n      {children}\n    </th>\n  );\n}\n\nfunction MarkdownTableCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <td className={cn(\"px-density-3 py-density-2 align-top\", className)} style={style}>\n      {children}\n    </td>\n  );\n}\n\nconst markdownComponents = {\n  code: MarkdownCode,\n  ul: MarkdownList,\n  ol: MarkdownOrderedList,\n  table: MarkdownTable,\n  thead: MarkdownTableHead,\n  tbody: MarkdownTableBody,\n  th: MarkdownTableHeaderCell,\n  td: MarkdownTableCell,\n};\n\n// The tag arrives lowercased with every attribute as a string, and carries the\n// source hast node too — listing the props drops that rather than spreading it\n// onto the element.\nfunction MarkdownCallout({ badge, children, className, emphasis, icon, label, source, title, variant }: CalloutProps) {\n  return (\n    <Callout\n      badge={badge}\n      className={className}\n      emphasis={emphasis}\n      icon={icon}\n      label={label}\n      source={source}\n      title={title}\n      variant={variant}\n    >\n      {children}\n    </Callout>\n  );\n}\n\nconst calloutComponents = { ...markdownComponents, calloutbox: MarkdownCallout };\n\nconst CALLOUT_ALLOWED_TAGS = {\n  calloutbox: [\"variant\", \"label\", \"badge\", \"source\", \"icon\", \"emphasis\", \"title\"],\n};\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, and lists and tables are styled\n *  here rather than by Streamdown. Falls back to preformatted text until\n *  Streamdown loads or when it is not installed. */\nexport function Markdown({ text, className, callouts = false }: 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\n        parseIncompleteMarkdown\n        components={callouts ? calloutComponents : markdownComponents}\n        allowedTags={callouts ? CALLOUT_ALLOWED_TAGS : undefined}\n      >\n        {text}\n      </Streamdown>\n    </div>\n  );\n}\n"],"names":["isValidElement","cn","jsx","CodeBlock","Callout","useState","useEffect"],"mappings":"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"}

package/dist/data/Markdown.d.ts

@@ -3,11 +3,20 @@ export type MarkdownProps = {
     text: string;
     /** Classes applied to the rendered markdown wrapper. */
     className?: string;
+    /**
+     * Render `<CalloutBox …>` authored inline in the markdown as a
+     * {@link Callout}.
+     *
+     * Off by default. It admits exactly one extra tag with exactly the callout's
+     * own attributes — no other markup in `text` becomes live — so it is safe to
+     * turn on wherever callouts are wanted.
+     */
+    callouts?: boolean | undefined;
 };
 /** Renders markdown with Streamdown, which is purpose-built for streaming LLM
  *  output (it gracefully handles incomplete markdown mid-stream). Fenced code
  *  blocks render via the library CodeBlock, and lists and tables are styled
  *  here rather than by Streamdown. 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;
+export declare function Markdown({ text, className, callouts }: 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":"AAWA,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmKF;;;;oDAIoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,aAAa,2CAwB1D"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/data/Markdown.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAmMF;;;;oDAIoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAgB,EAAE,EAAE,aAAa,2CA4B5E"}

package/dist/data/Markdown.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect, isValidElement } from "react";
 import { cn } from "../lib/utils.js";
+import { Callout } from "./Callout.js";
 import { CodeBlock } from "./CodeBlock.js";
 let loadPromise = null;
 function loadStreamdown() {
@@ -83,7 +84,27 @@ const markdownComponents = {
   th: MarkdownTableHeaderCell,
   td: MarkdownTableCell
 };
-function Markdown({ text, className }) {
+function MarkdownCallout({ badge, children, className, emphasis, icon, label, source, title, variant }) {
+  return /* @__PURE__ */ jsx(
+    Callout,
+    {
+      badge,
+      className,
+      emphasis,
+      icon,
+      label,
+      source,
+      title,
+      variant,
+      children
+    }
+  );
+}
+const calloutComponents = { ...markdownComponents, calloutbox: MarkdownCallout };
+const CALLOUT_ALLOWED_TAGS = {
+  calloutbox: ["variant", "label", "badge", "source", "icon", "emphasis", "title"]
+};
+function Markdown({ text, className, callouts = false }) {
   const [Streamdown, setStreamdown] = useState(null);
   useEffect(() => {
     let cancelled = false;
@@ -97,7 +118,15 @@ 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, components: markdownComponents, 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: callouts ? calloutComponents : markdownComponents,
+      allowedTags: callouts ? CALLOUT_ALLOWED_TAGS : void 0,
+      children: text
+    }
+  ) });
 }
 export {
   Markdown

package/dist/data/Markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.js","sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import {\n  isValidElement,\n  useEffect,\n  useState,\n  type ComponentType,\n  type CSSProperties,\n  type ReactNode,\n} 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\n// Every override also receives the source `node`, which is not a DOM attribute —\n// each one drops it rather than spreading it onto the element. `style` carries\n// the per-column alignment GFM puts on table cells.\ntype MarkdownElementProps = {\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  node?: unknown;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string;\n  parseIncompleteMarkdown?: boolean;\n  components?: {\n    code?: ComponentType<MarkdownCodeProps>;\n    ul?: ComponentType<MarkdownElementProps>;\n    ol?: ComponentType<MarkdownElementProps>;\n    table?: ComponentType<MarkdownElementProps>;\n    thead?: ComponentType<MarkdownElementProps>;\n    tbody?: ComponentType<MarkdownElementProps>;\n    th?: ComponentType<MarkdownElementProps>;\n    td?: ComponentType<MarkdownElementProps>;\n  };\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\n// Streamdown indents nested lists with `[li_&]:pl-6`, an arbitrary-variant class\n// that only compiles if the consumer's Tailwind happens to scan streamdown's\n// dist — otherwise every level renders flush left. Own the list styling here so\n// the marker and the indent ship from this library's own source. Markers sit\n// outside the padding so each level steps in cleanly. Task lists drop both: the\n// checkbox is the marker.\nfunction MarkdownList({ className, children }: MarkdownElementProps) {\n  const isTaskList = className?.includes(\"contains-task-list\");\n  return (\n    <ul\n      className={cn(\"whitespace-normal\", isTaskList ? \"list-none pl-0\" : \"list-disc pl-6\", className)}\n    >\n      {children}\n    </ul>\n  );\n}\n\nfunction MarkdownOrderedList({ className, children }: MarkdownElementProps) {\n  return <ol className={cn(\"list-decimal whitespace-normal pl-6\", className)}>{children}</ol>;\n}\n\n// Streamdown wraps tables in a `bg-sidebar` card with its own copy/download/\n// fullscreen chrome — a dark navy box around a light table under this library's\n// tokens — and puts the header shading behind `bg-muted/80`, an opacity-modifier\n// class the consumer's Tailwind never sees. Own the whole table instead, styled\n// like DataTable: a bordered scroll container so wide tables scroll rather than\n// overflow the page.\nfunction MarkdownTable({ className, children }: MarkdownElementProps) {\n  return (\n    <div className=\"not-prose my-4 max-w-full overflow-x-auto rounded-md border border-border\">\n      <table className={cn(\"w-max min-w-full table-auto text-left text-sm\", className)}>\n        {children}\n      </table>\n    </div>\n  );\n}\n\nfunction MarkdownTableHead({ className, children }: MarkdownElementProps) {\n  return <thead className={cn(\"border-b border-border bg-muted\", className)}>{children}</thead>;\n}\n\nfunction MarkdownTableBody({ className, children }: MarkdownElementProps) {\n  return <tbody className={cn(\"divide-y divide-border\", className)}>{children}</tbody>;\n}\n\n// `style` holds the column alignment from the delimiter row, so it must survive.\nfunction MarkdownTableHeaderCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <th\n      className={cn(\"whitespace-nowrap px-density-3 py-density-2 font-semibold\", className)}\n      style={style}\n    >\n      {children}\n    </th>\n  );\n}\n\nfunction MarkdownTableCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <td className={cn(\"px-density-3 py-density-2 align-top\", className)} style={style}>\n      {children}\n    </td>\n  );\n}\n\nconst markdownComponents = {\n  code: MarkdownCode,\n  ul: MarkdownList,\n  ol: MarkdownOrderedList,\n  table: MarkdownTable,\n  thead: MarkdownTableHead,\n  tbody: MarkdownTableBody,\n  th: MarkdownTableHeaderCell,\n  td: MarkdownTableCell,\n};\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, and lists and tables are styled\n *  here rather than by Streamdown. Falls back to preformatted text until\n *  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":"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"}
+{"version":3,"file":"Markdown.js","sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import {\n  isValidElement,\n  useEffect,\n  useState,\n  type ComponentType,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Callout, type CalloutProps } from \"./Callout\";\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   * Render `<CalloutBox …>` authored inline in the markdown as a\n   * {@link Callout}.\n   *\n   * Off by default. It admits exactly one extra tag with exactly the callout's\n   * own attributes — no other markup in `text` becomes live — so it is safe to\n   * turn on wherever callouts are wanted.\n   */\n  callouts?: boolean | undefined;\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\n// Every override also receives the source `node`, which is not a DOM attribute —\n// each one drops it rather than spreading it onto the element. `style` carries\n// the per-column alignment GFM puts on table cells.\ntype MarkdownElementProps = {\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  node?: unknown;\n};\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string | undefined;\n  parseIncompleteMarkdown?: boolean | undefined;\n  // Tag name -> the attribute names it may carry. Streamdown drops every other\n  // raw tag, so this is an allowlist rather than raw-HTML passthrough.\n  allowedTags?: Record<string, string[]> | undefined;\n  components?: {\n    code?: ComponentType<MarkdownCodeProps>;\n    ul?: ComponentType<MarkdownElementProps>;\n    ol?: ComponentType<MarkdownElementProps>;\n    table?: ComponentType<MarkdownElementProps>;\n    thead?: ComponentType<MarkdownElementProps>;\n    tbody?: ComponentType<MarkdownElementProps>;\n    th?: ComponentType<MarkdownElementProps>;\n    td?: ComponentType<MarkdownElementProps>;\n    // Streamdown lowercases every tag name, so an authored `<CalloutBox>`\n    // arrives here as `calloutbox`.\n    calloutbox?: ComponentType<CalloutProps & { node?: unknown }>;\n  };\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\n// Streamdown indents nested lists with `[li_&]:pl-6`, an arbitrary-variant class\n// that only compiles if the consumer's Tailwind happens to scan streamdown's\n// dist — otherwise every level renders flush left. Own the list styling here so\n// the marker and the indent ship from this library's own source. Markers sit\n// outside the padding so each level steps in cleanly. Task lists drop both: the\n// checkbox is the marker.\nfunction MarkdownList({ className, children }: MarkdownElementProps) {\n  const isTaskList = className?.includes(\"contains-task-list\");\n  return (\n    <ul\n      className={cn(\"whitespace-normal\", isTaskList ? \"list-none pl-0\" : \"list-disc pl-6\", className)}\n    >\n      {children}\n    </ul>\n  );\n}\n\nfunction MarkdownOrderedList({ className, children }: MarkdownElementProps) {\n  return <ol className={cn(\"list-decimal whitespace-normal pl-6\", className)}>{children}</ol>;\n}\n\n// Streamdown wraps tables in a `bg-sidebar` card with its own copy/download/\n// fullscreen chrome — a dark navy box around a light table under this library's\n// tokens — and puts the header shading behind `bg-muted/80`, an opacity-modifier\n// class the consumer's Tailwind never sees. Own the whole table instead, styled\n// like DataTable: a bordered scroll container so wide tables scroll rather than\n// overflow the page.\nfunction MarkdownTable({ className, children }: MarkdownElementProps) {\n  return (\n    <div className=\"not-prose my-4 max-w-full overflow-x-auto rounded-md border border-border\">\n      <table className={cn(\"w-max min-w-full table-auto text-left text-sm\", className)}>\n        {children}\n      </table>\n    </div>\n  );\n}\n\nfunction MarkdownTableHead({ className, children }: MarkdownElementProps) {\n  return <thead className={cn(\"border-b border-border bg-muted\", className)}>{children}</thead>;\n}\n\nfunction MarkdownTableBody({ className, children }: MarkdownElementProps) {\n  return <tbody className={cn(\"divide-y divide-border\", className)}>{children}</tbody>;\n}\n\n// `style` holds the column alignment from the delimiter row, so it must survive.\nfunction MarkdownTableHeaderCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <th\n      className={cn(\"whitespace-nowrap px-density-3 py-density-2 font-semibold\", className)}\n      style={style}\n    >\n      {children}\n    </th>\n  );\n}\n\nfunction MarkdownTableCell({ className, style, children }: MarkdownElementProps) {\n  return (\n    <td className={cn(\"px-density-3 py-density-2 align-top\", className)} style={style}>\n      {children}\n    </td>\n  );\n}\n\nconst markdownComponents = {\n  code: MarkdownCode,\n  ul: MarkdownList,\n  ol: MarkdownOrderedList,\n  table: MarkdownTable,\n  thead: MarkdownTableHead,\n  tbody: MarkdownTableBody,\n  th: MarkdownTableHeaderCell,\n  td: MarkdownTableCell,\n};\n\n// The tag arrives lowercased with every attribute as a string, and carries the\n// source hast node too — listing the props drops that rather than spreading it\n// onto the element.\nfunction MarkdownCallout({ badge, children, className, emphasis, icon, label, source, title, variant }: CalloutProps) {\n  return (\n    <Callout\n      badge={badge}\n      className={className}\n      emphasis={emphasis}\n      icon={icon}\n      label={label}\n      source={source}\n      title={title}\n      variant={variant}\n    >\n      {children}\n    </Callout>\n  );\n}\n\nconst calloutComponents = { ...markdownComponents, calloutbox: MarkdownCallout };\n\nconst CALLOUT_ALLOWED_TAGS = {\n  calloutbox: [\"variant\", \"label\", \"badge\", \"source\", \"icon\", \"emphasis\", \"title\"],\n};\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, and lists and tables are styled\n *  here rather than by Streamdown. Falls back to preformatted text until\n *  Streamdown loads or when it is not installed. */\nexport function Markdown({ text, className, callouts = false }: 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\n        parseIncompleteMarkdown\n        components={callouts ? calloutComponents : markdownComponents}\n        allowedTags={callouts ? CALLOUT_ALLOWED_TAGS : undefined}\n      >\n        {text}\n      </Streamdown>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/MarkdownEditor.cjs

@@ -233,7 +233,7 @@ function MarkdownEditor({
             spellCheck: true,
             onChange: (event) => updateMarkdown(event.currentTarget.value),
             className: utils.cn(
-              "block w-full resize-y border-0 bg-transparent px-density-3 py-density-3 font-mono text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60",
+              "block w-full resize-y border-0 bg-transparent px-density-3 py-density-3 font-mono text-sm leading-6 text-foreground outline-none placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-60",
               editorClassName
             ),
             style: contentStyle