@flanksource/clicky-ui 0.3.55 → 0.3.56

package/dist/data/Gauge.cjs

@@ -40,7 +40,7 @@ function Gauge({ label, value, max = 100, tone = "neutral", suffix = "%", icon,
 	});
 	const showHeader = icon || showLabel || meta;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_utils.cn("flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3", className),
+		className: require_utils.cn("flex min-h-28 w-[15.5rem] max-w-full shrink-0 flex-col rounded-lg border border-border bg-card p-3", className),
 		title: !showLabel ? labelText : void 0,
 		"aria-label": !showLabel ? labelText : void 0,
 		children: [

package/dist/data/Gauge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.cjs","names":["cn","Icon","isValidElement"],"sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type GaugeVariant = \"default\" | \"cell\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: GaugeVariant;\n  /** Show the text label. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  variant = \"default\",\n  showLabel = true,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  const labelText =\n    typeof label === \"string\" || typeof label === \"number\" ? String(label) : undefined;\n  const valueNode = (\n    <span className={cn(\"font-semibold tabular-nums\", toneClass[tone])}>\n      {displayValue}\n      {suffix ? <span className=\"ml-0.5 text-[0.85em] opacity-60\">{suffix}</span> : null}\n    </span>\n  );\n\n  if (variant === \"cell\") {\n    return (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        title={labelText}\n        aria-label={!showLabel ? labelText : undefined}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? (\n          <span className=\"min-w-0 truncate text-muted-foreground\">{label}</span>\n        ) : null}\n        {valueNode}\n        {meta ? <span className=\"shrink-0 truncate text-muted-foreground\">{meta}</span> : null}\n      </span>\n    );\n  }\n\n  const showHeader = icon || showLabel || meta;\n\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n      title={!showLabel ? labelText : undefined}\n      aria-label={!showLabel ? labelText : undefined}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon ? <GaugeIcon icon={icon} /> : null}\n            {showLabel ? <span className=\"truncate\">{label}</span> : null}\n          </span>\n          {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n        </div>\n      ) : null}\n      <span\n        className={cn(\n          showHeader && \"mt-2\",\n          \"text-2xl font-semibold tabular-nums tracking-tight\",\n          toneClass[tone],\n        )}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"mappings":";;;;;AAuBA,IAAM,YAAuC;CAC3C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR;AAEA,SAAgB,MAAM,EACpB,OACA,OACA,MAAM,KACN,OAAO,WACP,SAAS,KACT,MACA,UACA,MACA,UAAU,WACV,YAAY,MACZ,aACa;CACb,MAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;CACxD,MAAM,eAAe,QAAQ,MAAM,QAAQ;CAC3C,MAAM,YACJ,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,OAAO,KAAK,IAAI,KAAA;CAC3E,MAAM,YACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAWA,cAAAA,GAAG,8BAA8B,UAAU,KAAK;EAAjE,UAAA,CACG,cACA,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAmC,UAAA;EAAa,CAAA,IAAI,IAC1E;;CAGR,IAAI,YAAY,QACd,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,WAAWA,cAAAA,GACT,mFACA,SACF;EACA,OAAO;EACP,cAAY,CAAC,YAAY,YAAY,KAAA;EANvC,UAAA;GAQG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD,EAAiB,KAAO,CAAA,IAAI;GACnC,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA0C,UAAA;GAAY,CAAA,IACpE;GACH;GACA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA2C,UAAA;GAAW,CAAA,IAAI;EAC9E;;CAIV,MAAM,aAAa,QAAQ,aAAa;CAExC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAWA,cAAAA,GACT,2FACA,SACF;EACA,OAAO,CAAC,YAAY,YAAY,KAAA;EAChC,cAAY,CAAC,YAAY,YAAY,KAAA;EANvC,UAAA;GAQG,aACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD,EAAiB,KAAO,CAAA,IAAI,MACnC,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAAY,UAAA;KAAY,CAAA,IAAI,IACrD;IACL,CAAA,GAAA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAAqB,UAAA;IAAW,CAAA,IAAI,IACzD;GACH,CAAA,IAAA;GACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IACE,WAAWA,cAAAA,GACT,cAAc,QACd,sDACA,UAAU,KACZ;IALF,UAAA,CAOG,cACA,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAa,CAAA,IAAI,IACpE;;GACL,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA+C,UAAA;GAAe,CAAA,IAC5E;EACD;;AAET;AAEA,SAAS,UAAU,EAAE,QAA4D;CAC/E,IAAI,OAAO,SAAS,UAClB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;EAAM,MAAM;EAAM,OAAO;EAAI,QAAQ;EAAI,WAAU;CAAyB,CAAA;CAErF,KAAA,GAAIC,MAAAA,eAAAA,CAAe,IAAI,GACrB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA;CAIV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,aAAAA,MAAD;EACQ;EACN,OAAO;EACP,QAAQ;EACR,WAAU;CACX,CAAA;AAEL"}
+{"version":3,"file":"Gauge.cjs","names":["cn","Icon","isValidElement"],"sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type GaugeVariant = \"default\" | \"cell\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: GaugeVariant;\n  /** Show the text label. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  variant = \"default\",\n  showLabel = true,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  const labelText =\n    typeof label === \"string\" || typeof label === \"number\" ? String(label) : undefined;\n  const valueNode = (\n    <span className={cn(\"font-semibold tabular-nums\", toneClass[tone])}>\n      {displayValue}\n      {suffix ? <span className=\"ml-0.5 text-[0.85em] opacity-60\">{suffix}</span> : null}\n    </span>\n  );\n\n  if (variant === \"cell\") {\n    return (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        title={labelText}\n        aria-label={!showLabel ? labelText : undefined}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? (\n          <span className=\"min-w-0 truncate text-muted-foreground\">{label}</span>\n        ) : null}\n        {valueNode}\n        {meta ? <span className=\"shrink-0 truncate text-muted-foreground\">{meta}</span> : null}\n      </span>\n    );\n  }\n\n  const showHeader = icon || showLabel || meta;\n\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] max-w-full shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n      title={!showLabel ? labelText : undefined}\n      aria-label={!showLabel ? labelText : undefined}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon ? <GaugeIcon icon={icon} /> : null}\n            {showLabel ? <span className=\"truncate\">{label}</span> : null}\n          </span>\n          {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n        </div>\n      ) : null}\n      <span\n        className={cn(\n          showHeader && \"mt-2\",\n          \"text-2xl font-semibold tabular-nums tracking-tight\",\n          toneClass[tone],\n        )}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/data/Gauge.js

@@ -40,7 +40,7 @@ function Gauge({ label, value, max = 100, tone = "neutral", suffix = "%", icon,
 	});
 	const showHeader = icon || showLabel || meta;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3", className),
+		className: cn("flex min-h-28 w-[15.5rem] max-w-full shrink-0 flex-col rounded-lg border border-border bg-card p-3", className),
 		title: !showLabel ? labelText : void 0,
 		"aria-label": !showLabel ? labelText : void 0,
 		children: [

package/dist/data/Gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.js","names":[],"sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type GaugeVariant = \"default\" | \"cell\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: GaugeVariant;\n  /** Show the text label. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  variant = \"default\",\n  showLabel = true,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  const labelText =\n    typeof label === \"string\" || typeof label === \"number\" ? String(label) : undefined;\n  const valueNode = (\n    <span className={cn(\"font-semibold tabular-nums\", toneClass[tone])}>\n      {displayValue}\n      {suffix ? <span className=\"ml-0.5 text-[0.85em] opacity-60\">{suffix}</span> : null}\n    </span>\n  );\n\n  if (variant === \"cell\") {\n    return (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        title={labelText}\n        aria-label={!showLabel ? labelText : undefined}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? (\n          <span className=\"min-w-0 truncate text-muted-foreground\">{label}</span>\n        ) : null}\n        {valueNode}\n        {meta ? <span className=\"shrink-0 truncate text-muted-foreground\">{meta}</span> : null}\n      </span>\n    );\n  }\n\n  const showHeader = icon || showLabel || meta;\n\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n      title={!showLabel ? labelText : undefined}\n      aria-label={!showLabel ? labelText : undefined}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon ? <GaugeIcon icon={icon} /> : null}\n            {showLabel ? <span className=\"truncate\">{label}</span> : null}\n          </span>\n          {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n        </div>\n      ) : null}\n      <span\n        className={cn(\n          showHeader && \"mt-2\",\n          \"text-2xl font-semibold tabular-nums tracking-tight\",\n          toneClass[tone],\n        )}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"mappings":";;;;;AAuBA,IAAM,YAAuC;CAC3C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR;AAEA,SAAgB,MAAM,EACpB,OACA,OACA,MAAM,KACN,OAAO,WACP,SAAS,KACT,MACA,UACA,MACA,UAAU,WACV,YAAY,MACZ,aACa;CACb,MAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;CACxD,MAAM,eAAe,QAAQ,MAAM,QAAQ;CAC3C,MAAM,YACJ,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,OAAO,KAAK,IAAI,KAAA;CAC3E,MAAM,YACJ,qBAAC,QAAD;EAAM,WAAW,GAAG,8BAA8B,UAAU,KAAK;EAAjE,UAAA,CACG,cACA,SAAS,oBAAC,QAAD;GAAM,WAAU;GAAmC,UAAA;EAAa,CAAA,IAAI,IAC1E;;CAGR,IAAI,YAAY,QACd,OACE,qBAAC,QAAD;EACE,WAAW,GACT,mFACA,SACF;EACA,OAAO;EACP,cAAY,CAAC,YAAY,YAAY,KAAA;EANvC,UAAA;GAQG,OAAO,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAAI;GACnC,YACC,oBAAC,QAAD;IAAM,WAAU;IAA0C,UAAA;GAAY,CAAA,IACpE;GACH;GACA,OAAO,oBAAC,QAAD;IAAM,WAAU;IAA2C,UAAA;GAAW,CAAA,IAAI;EAC9E;;CAIV,MAAM,aAAa,QAAQ,aAAa;CAExC,OACE,qBAAC,OAAD;EACE,WAAW,GACT,2FACA,SACF;EACA,OAAO,CAAC,YAAY,YAAY,KAAA;EAChC,cAAY,CAAC,YAAY,YAAY,KAAA;EANvC,UAAA;GAQG,aACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,OAAO,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAAI,MACnC,YAAY,oBAAC,QAAD;MAAM,WAAU;MAAY,UAAA;KAAY,CAAA,IAAI,IACrD;IACL,CAAA,GAAA,OAAO,oBAAC,QAAD;KAAM,WAAU;KAAqB,UAAA;IAAW,CAAA,IAAI,IACzD;GACH,CAAA,IAAA;GACJ,qBAAC,QAAD;IACE,WAAW,GACT,cAAc,QACd,sDACA,UAAU,KACZ;IALF,UAAA,CAOG,cACA,SAAS,oBAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAa,CAAA,IAAI,IACpE;;GACL,WACC,oBAAC,QAAD;IAAM,WAAU;IAA+C,UAAA;GAAe,CAAA,IAC5E;EACD;;AAET;AAEA,SAAS,UAAU,EAAE,QAA4D;CAC/E,IAAI,OAAO,SAAS,UAClB,OAAO,oBAAC,MAAD;EAAM,MAAM;EAAM,OAAO;EAAI,QAAQ;EAAI,WAAU;CAAyB,CAAA;CAErF,IAAI,eAAe,IAAI,GACrB,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EACQ;EACN,OAAO;EACP,QAAQ;EACR,WAAU;CACX,CAAA;AAEL"}
+{"version":3,"file":"Gauge.js","names":[],"sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type GaugeVariant = \"default\" | \"cell\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: GaugeVariant;\n  /** Show the text label. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  variant = \"default\",\n  showLabel = true,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  const labelText =\n    typeof label === \"string\" || typeof label === \"number\" ? String(label) : undefined;\n  const valueNode = (\n    <span className={cn(\"font-semibold tabular-nums\", toneClass[tone])}>\n      {displayValue}\n      {suffix ? <span className=\"ml-0.5 text-[0.85em] opacity-60\">{suffix}</span> : null}\n    </span>\n  );\n\n  if (variant === \"cell\") {\n    return (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        title={labelText}\n        aria-label={!showLabel ? labelText : undefined}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? (\n          <span className=\"min-w-0 truncate text-muted-foreground\">{label}</span>\n        ) : null}\n        {valueNode}\n        {meta ? <span className=\"shrink-0 truncate text-muted-foreground\">{meta}</span> : null}\n      </span>\n    );\n  }\n\n  const showHeader = icon || showLabel || meta;\n\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] max-w-full shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n      title={!showLabel ? labelText : undefined}\n      aria-label={!showLabel ? labelText : undefined}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon ? <GaugeIcon icon={icon} /> : null}\n            {showLabel ? <span className=\"truncate\">{label}</span> : null}\n          </span>\n          {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n        </div>\n      ) : null}\n      <span\n        className={cn(\n          showHeader && \"mt-2\",\n          \"text-2xl font-semibold tabular-nums tracking-tight\",\n          toneClass[tone],\n        )}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"mappings":";;;;;AAuBA,IAAM,YAAuC;CAC3C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR;AAEA,SAAgB,MAAM,EACpB,OACA,OACA,MAAM,KACN,OAAO,WACP,SAAS,KACT,MACA,UACA,MACA,UAAU,WACV,YAAY,MACZ,aACa;CACb,MAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;CACxD,MAAM,eAAe,QAAQ,MAAM,QAAQ;CAC3C,MAAM,YACJ,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,OAAO,KAAK,IAAI,KAAA;CAC3E,MAAM,YACJ,qBAAC,QAAD;EAAM,WAAW,GAAG,8BAA8B,UAAU,KAAK;EAAjE,UAAA,CACG,cACA,SAAS,oBAAC,QAAD;GAAM,WAAU;GAAmC,UAAA;EAAa,CAAA,IAAI,IAC1E;;CAGR,IAAI,YAAY,QACd,OACE,qBAAC,QAAD;EACE,WAAW,GACT,mFACA,SACF;EACA,OAAO;EACP,cAAY,CAAC,YAAY,YAAY,KAAA;EANvC,UAAA;GAQG,OAAO,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAAI;GACnC,YACC,oBAAC,QAAD;IAAM,WAAU;IAA0C,UAAA;GAAY,CAAA,IACpE;GACH;GACA,OAAO,oBAAC,QAAD;IAAM,WAAU;IAA2C,UAAA;GAAW,CAAA,IAAI;EAC9E;;CAIV,MAAM,aAAa,QAAQ,aAAa;CAExC,OACE,qBAAC,OAAD;EACE,WAAW,GACT,sGACA,SACF;EACA,OAAO,CAAC,YAAY,YAAY,KAAA;EAChC,cAAY,CAAC,YAAY,YAAY,KAAA;EANvC,UAAA;GAQG,aACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,OAAO,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAAI,MACnC,YAAY,oBAAC,QAAD;MAAM,WAAU;MAAY,UAAA;KAAY,CAAA,IAAI,IACrD;IACL,CAAA,GAAA,OAAO,oBAAC,QAAD;KAAM,WAAU;KAAqB,UAAA;IAAW,CAAA,IAAI,IACzD;GACH,CAAA,IAAA;GACJ,qBAAC,QAAD;IACE,WAAW,GACT,cAAc,QACd,sDACA,UAAU,KACZ;IALF,UAAA,CAOG,cACA,SAAS,oBAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAa,CAAA,IAAI,IACpE;;GACL,WACC,oBAAC,QAAD;IAAM,WAAU;IAA+C,UAAA;GAAe,CAAA,IAC5E;EACD;;AAET;AAEA,SAAS,UAAU,EAAE,QAA4D;CAC/E,IAAI,OAAO,SAAS,UAClB,OAAO,oBAAC,MAAD;EAAM,MAAM;EAAM,OAAO;EAAI,QAAQ;EAAI,WAAU;CAAyB,CAAA;CAErF,IAAI,eAAe,IAAI,GACrB,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EACQ;EACN,OAAO;EACP,QAAQ;EACR,WAAU;CACX,CAAA;AAEL"}

package/dist/data/HighlightedTokens.cjs

@@ -1,21 +1,13 @@
+const require_token_style = require("./token-style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/data/HighlightedTokens.tsx
 function HighlightedTokens({ tokens, content }) {
 	if (!tokens || tokens.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: content });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		style: tokenStyle(token),
+		style: require_token_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

@@ -1 +1 @@
-{"version":3,"file":"HighlightedTokens.cjs","names":["_Fragment"],"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"],"mappings":";;AASA,SAAgB,kBAAkB,EAChC,QACA,WAIC;CACD,IAAI,CAAC,UAAU,OAAO,WAAW,GAAG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAAA,kBAAAA,UAAA,EAAA,UAAG,QAAU,CAAA;CACxD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAAA,kBAAAA,UAAA,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAkB,OAAO,WAAW,KAAK;EACtC,UAAA,MAAM;CACH,GAFK,KAEL,CACP,EACD,CAAA;AAEN;AAGA,SAAS,WAAW,OAAwC;CAC1D,MAAM,QAAuB,CAAC;CAC9B,IAAI,MAAM,OAAO,MAAM,QAAQ,MAAM;CACrC,MAAM,YAAY,MAAM,aAAa;CACrC,IAAI,YAAY,GAAG,MAAM,YAAY;CACrC,IAAI,YAAY,GAAG,MAAM,aAAa;CACtC,IAAI,YAAY,GAAG,MAAM,qBAAqB;CAC9C,OAAO;AACT"}
+{"version":3,"file":"HighlightedTokens.cjs","names":["_Fragment","tokenStyle"],"sources":["../../src/data/HighlightedTokens.tsx"],"sourcesContent":["import { tokenStyle } from \"./token-style\";\nimport type { HighlightedLine } 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"],"mappings":";;;AASA,SAAgB,kBAAkB,EAChC,QACA,WAIC;CACD,IAAI,CAAC,UAAU,OAAO,WAAW,GAAG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAAA,kBAAAA,UAAA,EAAA,UAAG,QAAU,CAAA;CACxD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAAA,kBAAAA,UAAA,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAkB,OAAOC,oBAAAA,WAAW,KAAK;EACtC,UAAA,MAAM;CACH,GAFK,KAEL,CACP,EACD,CAAA;AAEN"}

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

@@ -1 +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,+BAWA"}
+{"version":3,"file":"HighlightedTokens.d.ts","sourceRoot":"","sources":["../../src/data/HighlightedTokens.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAQxD,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,OAAO,GACR,EAAE;IACD,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;CACjB,+BAWA"}

package/dist/data/HighlightedTokens.js

@@ -1,3 +1,4 @@
+import { tokenStyle } from "./token-style.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 // src/data/HighlightedTokens.tsx
 function HighlightedTokens({ tokens, content }) {
@@ -7,15 +8,6 @@ function HighlightedTokens({ tokens, content }) {
 		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

@@ -1 +1 @@
-{"version":3,"file":"HighlightedTokens.js","names":["_Fragment"],"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"],"mappings":";;AASA,SAAgB,kBAAkB,EAChC,QACA,WAIC;CACD,IAAI,CAAC,UAAU,OAAO,WAAW,GAAG,OAAO,oBAAAA,UAAA,EAAA,UAAG,QAAU,CAAA;CACxD,OACE,oBAAAA,UAAA,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,oBAAC,QAAD;EAAkB,OAAO,WAAW,KAAK;EACtC,UAAA,MAAM;CACH,GAFK,KAEL,CACP,EACD,CAAA;AAEN;AAGA,SAAS,WAAW,OAAwC;CAC1D,MAAM,QAAuB,CAAC;CAC9B,IAAI,MAAM,OAAO,MAAM,QAAQ,MAAM;CACrC,MAAM,YAAY,MAAM,aAAa;CACrC,IAAI,YAAY,GAAG,MAAM,YAAY;CACrC,IAAI,YAAY,GAAG,MAAM,aAAa;CACtC,IAAI,YAAY,GAAG,MAAM,qBAAqB;CAC9C,OAAO;AACT"}
+{"version":3,"file":"HighlightedTokens.js","names":["_Fragment"],"sources":["../../src/data/HighlightedTokens.tsx"],"sourcesContent":["import { tokenStyle } from \"./token-style\";\nimport type { HighlightedLine } 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"],"mappings":";;;AASA,SAAgB,kBAAkB,EAChC,QACA,WAIC;CACD,IAAI,CAAC,UAAU,OAAO,WAAW,GAAG,OAAO,oBAAAA,UAAA,EAAA,UAAG,QAAU,CAAA;CACxD,OACE,oBAAAA,UAAA,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,oBAAC,QAAD;EAAkB,OAAO,WAAW,KAAK;EACtC,UAAA,MAAM;CACH,GAFK,KAEL,CACP,EACD,CAAA;AAEN"}

package/dist/data/Markdown.cjs

@@ -3,6 +3,7 @@ const require_Callout = require("./Callout.cjs");
 const require_ConfirmDialog = require("../overlay/ConfirmDialog.cjs");
 const require_router = require("../rpc/router.cjs");
 const require_CodeBlock = require("./CodeBlock.cjs");
+const require_markdown_source_blocks = require("./markdown-source-blocks.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/data/Markdown.tsx
@@ -24,7 +25,10 @@ function MarkdownHeading({ as: Tag, className, children, node: _node, ...props }
 }
 var loadPromise = null;
 function loadStreamdown() {
-	if (!loadPromise) loadPromise = import("streamdown").then((m) => m.Streamdown).catch((err) => {
+	if (!loadPromise) loadPromise = import("streamdown").then((m) => ({
+		Streamdown: m.Streamdown,
+		defaultRehypePlugins: m.defaultRehypePlugins
+	})).catch((err) => {
 		console.warn("clicky-ui: streamdown not available; rendering markdown as plain text", err);
 		return null;
 	});
@@ -44,7 +48,7 @@ function MarkdownCode({ className, children, ...rest }) {
 	});
 	const language = /language-([\w-]+)/.exec(className ?? "")?.[1];
 	const source = nodeText(children).replace(/\n$/, "");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock, {
+	const block = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock, {
 		source,
 		language,
 		className: "not-prose my-4",
@@ -52,23 +56,37 @@ function MarkdownCode({ className, children, ...rest }) {
 		downloadable: true,
 		themeToggle: true
 	});
+	const anchors = require_markdown_source_blocks.sourceAttributes(rest);
+	return Object.keys(anchors).length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...anchors,
+		children: block
+	}) : block;
 }
-function MarkdownList({ className, children }) {
+function MarkdownPre({ children, ...props }) {
+	return (0, react.isValidElement)(children) ? (0, react.cloneElement)(children, {
+		"data-block": "true",
+		...require_markdown_source_blocks.sourceAttributes(props)
+	}) : children;
+}
+function MarkdownList({ className, children, ...props }) {
 	const isTaskList = className?.includes("contains-task-list");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 		className: require_utils.cn("whitespace-normal", isTaskList ? "list-none pl-0" : "list-disc pl-6", className),
+		...require_markdown_source_blocks.sourceAttributes(props),
 		children
 	});
 }
-function MarkdownOrderedList({ className, children }) {
+function MarkdownOrderedList({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 		className: require_utils.cn("list-decimal whitespace-normal pl-6", className),
+		...require_markdown_source_blocks.sourceAttributes(props),
 		children
 	});
 }
-function MarkdownTable({ className, children }) {
+function MarkdownTable({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "not-prose my-4 max-w-full overflow-x-auto rounded-md border border-border",
+		...require_markdown_source_blocks.sourceAttributes(props),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
 			className: require_utils.cn("w-max min-w-full table-auto text-left text-sm", className),
 			children
@@ -173,6 +191,7 @@ var markdownComponents = {
 		...props
 	}),
 	a: MarkdownLink,
+	pre: MarkdownPre,
 	code: MarkdownCode,
 	ul: MarkdownList,
 	ol: MarkdownOrderedList,
@@ -213,24 +232,32 @@ var CALLOUT_ALLOWED_TAGS = { calloutbox: [
 *  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. */
-function Markdown({ text, className, callouts = false }) {
-	const [Streamdown, setStreamdown] = (0, react.useState)(null);
+function Markdown({ text, className, callouts = false, sourceBlocks = false }) {
+	if (sourceBlocks && callouts) throw new Error("Markdown: sourceBlocks and callouts cannot be combined; callouts replaces the sanitiser schema that sourceBlocks keeps");
+	const [streamdown, setStreamdown] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
 		let cancelled = false;
-		loadStreamdown().then((comp) => {
-			if (!cancelled) setStreamdown(() => comp);
+		loadStreamdown().then((loaded) => {
+			if (!cancelled) setStreamdown(loaded);
 		});
 		return () => {
 			cancelled = true;
 		};
 	}, []);
-	if (!Streamdown) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+	const sourceRehypePlugins = (0, react.useMemo)(() => streamdown ? [...Object.values(streamdown.defaultRehypePlugins), require_markdown_source_blocks.rehypeSourceBlocks] : void 0, [streamdown]);
+	if (!streamdown) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
 		className: require_utils.cn("whitespace-pre-wrap text-sm", className),
 		children: text
 	});
+	const { Streamdown } = streamdown;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_utils.cn("prose prose-sm max-w-none dark:prose-invert", className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Streamdown, {
+		children: sourceBlocks ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Streamdown, {
+			mode: "static",
+			components: markdownComponents,
+			rehypePlugins: sourceRehypePlugins,
+			children: text
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Streamdown, {
 			parseIncompleteMarkdown: true,
 			components: callouts ? calloutComponents : markdownComponents,
 			allowedTags: callouts ? CALLOUT_ALLOWED_TAGS : void 0,

package/dist/data/Markdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.cjs","names":["cn","isValidElement","CodeBlock","useRouter","useState","_Fragment","ConfirmDialog","Callout"],"sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import {\n  isValidElement,\n  useEffect,\n  useState,\n  type ComponentType,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { ConfirmDialog } from \"../overlay/ConfirmDialog\";\nimport { useRouter } from \"../rpc/router\";\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 MarkdownHeadingTag = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\ntype MarkdownHeadingProps = HTMLAttributes<HTMLHeadingElement> & { node?: unknown };\n\nconst headingClasses: Record<MarkdownHeadingTag, string> = {\n  h1: \"mt-4 mb-2 text-lg font-semibold\",\n  h2: \"mt-3 mb-1.5 text-base font-semibold\",\n  h3: \"mt-3 mb-1 text-sm font-semibold\",\n  h4: \"mt-2 mb-1 text-sm font-semibold\",\n  h5: \"mt-2 mb-1 text-sm font-medium\",\n  h6: \"mt-2 mb-1 text-sm font-medium\",\n};\n\nfunction MarkdownHeading({\n  as: Tag,\n  className,\n  children,\n  node: _node,\n  ...props\n}: MarkdownHeadingProps & { as: MarkdownHeadingTag }) {\n  return (\n    <Tag\n      className={cn(headingClasses[Tag], className)}\n      data-streamdown={`heading-${Tag.slice(1)}`}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\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    h1?: ComponentType<MarkdownHeadingProps>;\n    h2?: ComponentType<MarkdownHeadingProps>;\n    h3?: ComponentType<MarkdownHeadingProps>;\n    h4?: ComponentType<MarkdownHeadingProps>;\n    h5?: ComponentType<MarkdownHeadingProps>;\n    h6?: ComponentType<MarkdownHeadingProps>;\n    a?: ComponentType<MarkdownLinkProps>;\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\ntype MarkdownLinkProps = MarkdownElementProps & { href?: string; title?: string };\n\n// Streamdown renders every link as a button behind an \"Open external link?\"\n// prompt that always opens a new tab, so an in-app link such as `/connections`\n// left the app. Root-relative links route through the host's RouterAdapter and\n// hash links scroll in place; only external links keep the confirm prompt.\nfunction MarkdownLink({ href, title, className, children }: MarkdownLinkProps) {\n  const { renderLink } = useRouter();\n  const [confirming, setConfirming] = useState(false);\n  const linkClass = cn(\"wrap-anywhere font-medium text-primary underline\", className);\n\n  if (!href) return <span className={className}>{children}</span>;\n  if (href.startsWith(\"#\")) {\n    return (\n      <a href={href} title={title} className={linkClass}>\n        {children}\n      </a>\n    );\n  }\n  if (href.startsWith(\"/\") && !href.startsWith(\"//\")) {\n    return renderLink({ to: href, className: linkClass, children, ...(title ? { title } : {}) });\n  }\n  return (\n    <>\n      <a\n        href={href}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={linkClass}\n        onClick={(event) => {\n          event.preventDefault();\n          setConfirming(true);\n        }}\n      >\n        {children}\n      </a>\n      <ConfirmDialog\n        open={confirming}\n        title=\"Open external link?\"\n        message={<code className=\"break-all font-mono text-sm\">{href}</code>}\n        confirmLabel=\"Open link\"\n        onCancel={() => setConfirming(false)}\n        onConfirm={() => {\n          setConfirming(false);\n          window.open(href, \"_blank\", \"noopener,noreferrer\");\n        }}\n      />\n    </>\n  );\n}\n\nconst markdownComponents = {\n  h1: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h1\" {...props} />,\n  h2: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h2\" {...props} />,\n  h3: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h3\" {...props} />,\n  h4: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h4\" {...props} />,\n  h5: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h5\" {...props} />,\n  h6: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h6\" {...props} />,\n  a: MarkdownLink,\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"],"mappings":"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"}
+{"version":3,"file":"Markdown.cjs","names":["cn","isValidElement","CodeBlock","sourceAttributes","cloneElement","useRouter","useState","_Fragment","ConfirmDialog","Callout","useMemo","rehypeSourceBlocks"],"sources":["../../src/data/Markdown.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useState,\n  type ComponentType,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { ConfirmDialog } from \"../overlay/ConfirmDialog\";\nimport { useRouter } from \"../rpc/router\";\nimport { Callout, type CalloutProps } from \"./Callout\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport { rehypeSourceBlocks, sourceAttributes, type SourceAttributes } from \"./markdown-source-blocks\";\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   * Stamp each top-level block with `data-source-start` / `data-source-end`, the\n   * 1-based line range of `text` it renders, so a host can anchor annotations\n   * to source lines. The document renders as one static block (no streaming),\n   * which keeps the line numbers absolute; Streamdown's default sanitising\n   * stays in place. Cannot be combined with `callouts`.\n   */\n  sourceBlocks?: 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 = SourceAttributes & {\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. `data-source-*` is the one\n// pair of extra attributes forwarded, so `sourceBlocks` anchors survive.\ntype MarkdownElementProps = SourceAttributes & {\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  node?: unknown;\n};\n\ntype MarkdownHeadingTag = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\ntype MarkdownHeadingProps = HTMLAttributes<HTMLHeadingElement> & { node?: unknown };\n\nconst headingClasses: Record<MarkdownHeadingTag, string> = {\n  h1: \"mt-4 mb-2 text-lg font-semibold\",\n  h2: \"mt-3 mb-1.5 text-base font-semibold\",\n  h3: \"mt-3 mb-1 text-sm font-semibold\",\n  h4: \"mt-2 mb-1 text-sm font-semibold\",\n  h5: \"mt-2 mb-1 text-sm font-medium\",\n  h6: \"mt-2 mb-1 text-sm font-medium\",\n};\n\nfunction MarkdownHeading({\n  as: Tag,\n  className,\n  children,\n  node: _node,\n  ...props\n}: MarkdownHeadingProps & { as: MarkdownHeadingTag }) {\n  return (\n    <Tag\n      className={cn(headingClasses[Tag], className)}\n      data-streamdown={`heading-${Tag.slice(1)}`}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n}\n\ntype StreamdownComponent = ComponentType<{\n  children: string;\n  className?: string | undefined;\n  parseIncompleteMarkdown?: boolean | undefined;\n  // \"static\" parses the whole document as one block instead of streaming it in\n  // blocks, so hast positions are relative to the document.\n  mode?: \"static\" | \"streaming\" | undefined;\n  rehypePlugins?: readonly unknown[] | 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    pre?: ComponentType<{ children?: ReactNode; node?: unknown } & SourceAttributes>;\n    p?: ComponentType<MarkdownElementProps>;\n    blockquote?: ComponentType<MarkdownElementProps>;\n    hr?: ComponentType<MarkdownElementProps>;\n    h1?: ComponentType<MarkdownHeadingProps>;\n    h2?: ComponentType<MarkdownHeadingProps>;\n    h3?: ComponentType<MarkdownHeadingProps>;\n    h4?: ComponentType<MarkdownHeadingProps>;\n    h5?: ComponentType<MarkdownHeadingProps>;\n    h6?: ComponentType<MarkdownHeadingProps>;\n    a?: ComponentType<MarkdownLinkProps>;\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\ntype StreamdownModule = {\n  Streamdown: StreamdownComponent;\n  /** Streamdown's own raw -> sanitize -> harden rehype chain, in that order. */\n  defaultRehypePlugins: Record<string, unknown>;\n};\n\nlet loadPromise: Promise<StreamdownModule | 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<StreamdownModule | null> {\n  if (!loadPromise) {\n    loadPromise = import(\"streamdown\")\n      .then((m) => ({\n        Streamdown: m.Streamdown as unknown as StreamdownComponent,\n        defaultRehypePlugins: m.defaultRehypePlugins,\n      }))\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  const block = (\n    <CodeBlock\n      source={source}\n      language={language}\n      className=\"not-prose my-4\"\n      copyable\n      downloadable\n      themeToggle\n    />\n  );\n  const anchors = sourceAttributes(rest);\n  return Object.keys(anchors).length > 0 ? <div {...anchors}>{block}</div> : block;\n}\n\n// Streamdown's default `pre` unwraps to its `code` child, marking it as a block.\n// The source range is stamped on the `pre`, so it is carried over to that child.\nfunction MarkdownPre({ children, ...props }: { children?: ReactNode; node?: unknown } & SourceAttributes) {\n  return isValidElement(children)\n    ? cloneElement(children as ReactElement<Record<string, unknown>>, {\n        \"data-block\": \"true\",\n        ...sourceAttributes(props),\n      })\n    : children;\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, ...props }: 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      {...sourceAttributes(props)}\n    >\n      {children}\n    </ul>\n  );\n}\n\nfunction MarkdownOrderedList({ className, children, ...props }: MarkdownElementProps) {\n  return (\n    <ol className={cn(\"list-decimal whitespace-normal pl-6\", className)} {...sourceAttributes(props)}>\n      {children}\n    </ol>\n  );\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, ...props }: MarkdownElementProps) {\n  return (\n    <div\n      className=\"not-prose my-4 max-w-full overflow-x-auto rounded-md border border-border\"\n      {...sourceAttributes(props)}\n    >\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\ntype MarkdownLinkProps = MarkdownElementProps & { href?: string; title?: string };\n\n// Streamdown renders every link as a button behind an \"Open external link?\"\n// prompt that always opens a new tab, so an in-app link such as `/connections`\n// left the app. Root-relative links route through the host's RouterAdapter and\n// hash links scroll in place; only external links keep the confirm prompt.\nfunction MarkdownLink({ href, title, className, children }: MarkdownLinkProps) {\n  const { renderLink } = useRouter();\n  const [confirming, setConfirming] = useState(false);\n  const linkClass = cn(\"wrap-anywhere font-medium text-primary underline\", className);\n\n  if (!href) return <span className={className}>{children}</span>;\n  if (href.startsWith(\"#\")) {\n    return (\n      <a href={href} title={title} className={linkClass}>\n        {children}\n      </a>\n    );\n  }\n  if (href.startsWith(\"/\") && !href.startsWith(\"//\")) {\n    return renderLink({ to: href, className: linkClass, children, ...(title ? { title } : {}) });\n  }\n  return (\n    <>\n      <a\n        href={href}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={linkClass}\n        onClick={(event) => {\n          event.preventDefault();\n          setConfirming(true);\n        }}\n      >\n        {children}\n      </a>\n      <ConfirmDialog\n        open={confirming}\n        title=\"Open external link?\"\n        message={<code className=\"break-all font-mono text-sm\">{href}</code>}\n        confirmLabel=\"Open link\"\n        onCancel={() => setConfirming(false)}\n        onConfirm={() => {\n          setConfirming(false);\n          window.open(href, \"_blank\", \"noopener,noreferrer\");\n        }}\n      />\n    </>\n  );\n}\n\nconst markdownComponents = {\n  h1: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h1\" {...props} />,\n  h2: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h2\" {...props} />,\n  h3: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h3\" {...props} />,\n  h4: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h4\" {...props} />,\n  h5: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h5\" {...props} />,\n  h6: (props: MarkdownHeadingProps) => <MarkdownHeading as=\"h6\" {...props} />,\n  a: MarkdownLink,\n  pre: MarkdownPre,\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, sourceBlocks = false }: MarkdownProps) {\n  if (sourceBlocks && callouts) {\n    throw new Error(\n      \"Markdown: sourceBlocks and callouts cannot be combined; callouts replaces the sanitiser schema that sourceBlocks keeps\",\n    );\n  }\n  const [streamdown, setStreamdown] = useState<StreamdownModule | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadStreamdown().then((loaded) => {\n      if (!cancelled) setStreamdown(loaded);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  // Streamdown's own chain (raw, sanitize, harden) followed by the stamping\n  // plugin. Appending, rather than replacing, keeps the document sanitised, and\n  // running last lets the attributes survive the sanitiser.\n  const sourceRehypePlugins = useMemo(\n    () => (streamdown ? [...Object.values(streamdown.defaultRehypePlugins), rehypeSourceBlocks] : undefined),\n    [streamdown],\n  );\n\n  if (!streamdown) {\n    return <pre className={cn(\"whitespace-pre-wrap text-sm\", className)}>{text}</pre>;\n  }\n  const { Streamdown } = streamdown;\n\n  return (\n    <div className={cn(\"prose prose-sm max-w-none dark:prose-invert\", className)}>\n      {sourceBlocks ? (\n        <Streamdown mode=\"static\" components={markdownComponents} rehypePlugins={sourceRehypePlugins}>\n          {text}\n        </Streamdown>\n      ) : (\n        <Streamdown\n          parseIncompleteMarkdown\n          components={callouts ? calloutComponents : markdownComponents}\n          allowedTags={callouts ? CALLOUT_ALLOWED_TAGS : undefined}\n        >\n          {text}\n        </Streamdown>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/data/Markdown.d.ts

@@ -12,11 +12,19 @@ export type MarkdownProps = {
      * turn on wherever callouts are wanted.
      */
     callouts?: boolean | undefined;
+    /**
+     * Stamp each top-level block with `data-source-start` / `data-source-end`, the
+     * 1-based line range of `text` it renders, so a host can anchor annotations
+     * to source lines. The document renders as one static block (no streaming),
+     * which keeps the line numbers absolute; Streamdown's default sanitising
+     * stays in place. Cannot be combined with `callouts`.
+     */
+    sourceBlocks?: 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, callouts }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ text, className, callouts, sourceBlocks }: MarkdownProps): import("react").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":"AAeA,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;AAmSF;;;;oDAIoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAgB,EAAE,EAAE,aAAa,+BA4B5E"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/data/Markdown.tsx"],"names":[],"mappings":"AAmBA,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;IAC/B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACpC,CAAC;AA2UF;;;;oDAIoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAgB,EAAE,YAAoB,EAAE,EAAE,aAAa,+BAgDlG"}

package/dist/data/Markdown.js

@@ -3,7 +3,8 @@ import { Callout } from "./Callout.js";
 import { ConfirmDialog } from "../overlay/ConfirmDialog.js";
 import { useRouter } from "../rpc/router.js";
 import { CodeBlock } from "./CodeBlock.js";
-import { isValidElement, useEffect, useState } from "react";
+import { rehypeSourceBlocks, sourceAttributes } from "./markdown-source-blocks.js";
+import { cloneElement, isValidElement, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/data/Markdown.tsx
 var headingClasses = {
@@ -24,7 +25,10 @@ function MarkdownHeading({ as: Tag, className, children, node: _node, ...props }
 }
 var loadPromise = null;
 function loadStreamdown() {
-	if (!loadPromise) loadPromise = import("streamdown").then((m) => m.Streamdown).catch((err) => {
+	if (!loadPromise) loadPromise = import("streamdown").then((m) => ({
+		Streamdown: m.Streamdown,
+		defaultRehypePlugins: m.defaultRehypePlugins
+	})).catch((err) => {
 		console.warn("clicky-ui: streamdown not available; rendering markdown as plain text", err);
 		return null;
 	});
@@ -44,7 +48,7 @@ function MarkdownCode({ className, children, ...rest }) {
 	});
 	const language = /language-([\w-]+)/.exec(className ?? "")?.[1];
 	const source = nodeText(children).replace(/\n$/, "");
-	return /* @__PURE__ */ jsx(CodeBlock, {
+	const block = /* @__PURE__ */ jsx(CodeBlock, {
 		source,
 		language,
 		className: "not-prose my-4",
@@ -52,23 +56,37 @@ function MarkdownCode({ className, children, ...rest }) {
 		downloadable: true,
 		themeToggle: true
 	});
+	const anchors = sourceAttributes(rest);
+	return Object.keys(anchors).length > 0 ? /* @__PURE__ */ jsx("div", {
+		...anchors,
+		children: block
+	}) : block;
 }
-function MarkdownList({ className, children }) {
+function MarkdownPre({ children, ...props }) {
+	return isValidElement(children) ? cloneElement(children, {
+		"data-block": "true",
+		...sourceAttributes(props)
+	}) : children;
+}
+function MarkdownList({ className, children, ...props }) {
 	const isTaskList = className?.includes("contains-task-list");
 	return /* @__PURE__ */ jsx("ul", {
 		className: cn("whitespace-normal", isTaskList ? "list-none pl-0" : "list-disc pl-6", className),
+		...sourceAttributes(props),
 		children
 	});
 }
-function MarkdownOrderedList({ className, children }) {
+function MarkdownOrderedList({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {
 		className: cn("list-decimal whitespace-normal pl-6", className),
+		...sourceAttributes(props),
 		children
 	});
 }
-function MarkdownTable({ className, children }) {
+function MarkdownTable({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "not-prose my-4 max-w-full overflow-x-auto rounded-md border border-border",
+		...sourceAttributes(props),
 		children: /* @__PURE__ */ jsx("table", {
 			className: cn("w-max min-w-full table-auto text-left text-sm", className),
 			children
@@ -173,6 +191,7 @@ var markdownComponents = {
 		...props
 	}),
 	a: MarkdownLink,
+	pre: MarkdownPre,
 	code: MarkdownCode,
 	ul: MarkdownList,
 	ol: MarkdownOrderedList,
@@ -213,24 +232,32 @@ var CALLOUT_ALLOWED_TAGS = { calloutbox: [
 *  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. */
-function Markdown({ text, className, callouts = false }) {
-	const [Streamdown, setStreamdown] = useState(null);
+function Markdown({ text, className, callouts = false, sourceBlocks = false }) {
+	if (sourceBlocks && callouts) throw new Error("Markdown: sourceBlocks and callouts cannot be combined; callouts replaces the sanitiser schema that sourceBlocks keeps");
+	const [streamdown, setStreamdown] = useState(null);
 	useEffect(() => {
 		let cancelled = false;
-		loadStreamdown().then((comp) => {
-			if (!cancelled) setStreamdown(() => comp);
+		loadStreamdown().then((loaded) => {
+			if (!cancelled) setStreamdown(loaded);
 		});
 		return () => {
 			cancelled = true;
 		};
 	}, []);
-	if (!Streamdown) return /* @__PURE__ */ jsx("pre", {
+	const sourceRehypePlugins = useMemo(() => streamdown ? [...Object.values(streamdown.defaultRehypePlugins), rehypeSourceBlocks] : void 0, [streamdown]);
+	if (!streamdown) return /* @__PURE__ */ jsx("pre", {
 		className: cn("whitespace-pre-wrap text-sm", className),
 		children: text
 	});
+	const { Streamdown } = streamdown;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("prose prose-sm max-w-none dark:prose-invert", className),
-		children: /* @__PURE__ */ jsx(Streamdown, {
+		children: sourceBlocks ? /* @__PURE__ */ jsx(Streamdown, {
+			mode: "static",
+			components: markdownComponents,
+			rehypePlugins: sourceRehypePlugins,
+			children: text
+		}) : /* @__PURE__ */ jsx(Streamdown, {
 			parseIncompleteMarkdown: true,
 			components: callouts ? calloutComponents : markdownComponents,
 			allowedTags: callouts ? CALLOUT_ALLOWED_TAGS : void 0,