@wildo-ai/presets-components 1.1.3 → 1.1.5

package/dist/esm/components/data-display/formatters/display-field-string.js

@@ -7,25 +7,42 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Supports different display modes: text, truncate, multiline, markdown, color, link, email, badge, copy, secret
  */
 import * as React from "react";
-import { useI18n, useIconRegistry, StandardIconReference, IconSize, Text, Badge } from "@wildo-ai/saas-frontend-lib";
+import { useI18n, useIconRegistry, StandardIconReference, IconSize, Text, Badge, Identifier, useContextualDisplayParams } from "@wildo-ai/saas-frontend-lib";
 import { FrontendComponentType } from "@wildo-ai/presets-components-models";
 import { getStringUI, getStringFormat, StringDisplayMode } from "@wildo-ai/zod-decorators";
 import { MarkdownContent } from "../markdown-content.js";
+/**
+ * Split a string into user-perceived characters.
+ *
+ * `Intl.Segmenter` is the only thing that gets this right — code units split surrogate pairs, and
+ * code points still split a flag, a ZWJ sequence, a skin-tone modifier and a combining accent. The
+ * fallback to code points is for a runtime without it; it is strictly better than code units and
+ * cannot produce a lone surrogate, which is the failure that actually shows on screen.
+ */
+const GRAPHEME_SEGMENTER = typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function'
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+function splitIntoGraphemes(value) {
+    if (!GRAPHEME_SEGMENTER)
+        return Array.from(value);
+    return Array.from(GRAPHEME_SEGMENTER.segment(value), part => part.segment);
+}
 /**
  * DisplayFieldString component
  *
  * Renders a string value according to the string UI decorator
  */
 function DisplayFieldString({ schema, value, className, }) {
-    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FORM_FIELD });
+    const { tComponent, isReady } = useI18n({ component: [FrontendComponentType.LOW_LEVEL_FORM_FIELD, FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING] });
     const { renderIcon } = useIconRegistry();
     const [copied, setCopied] = React.useState(false);
     const stringUI = getStringUI(schema);
     const stringFormat = getStringFormat(schema);
     // SECRET fields mask by default; `initiallyRevealed` (set by `.isEphemeral()`)
     // shows the value on first paint for one-time reveals. The eye toggle still works.
-    const [revealed, setRevealed] = React.useState(stringUI?.display?.initiallyRevealed ?? false);
-    let displayMode = stringUI?.display?.displayMode ?? StringDisplayMode.TEXT;
+    const stringDisplayParams = useContextualDisplayParams(stringUI);
+    const [revealed, setRevealed] = React.useState(stringDisplayParams?.initiallyRevealed ?? false);
+    let displayMode = stringDisplayParams?.displayMode ?? StringDisplayMode.TEXT;
     if (!stringUI && stringFormat) {
         if (stringFormat === 'email')
             displayMode = StringDisplayMode.EMAIL;
@@ -50,13 +67,71 @@ function DisplayFieldString({ schema, value, className, }) {
         switch (displayMode) {
             case StringDisplayMode.TEXT:
                 return _jsx(Text, { children: value });
-            case StringDisplayMode.TRUNCATE:
-                return (_jsx(Text, { className: "min-w-0 truncate", children: value }));
+            case StringDisplayMode.TRUNCATE: {
+                // TWO AXES, BOTH LIVE, AND THEY ARE NOT THE SAME QUESTION.
+                //
+                // The `truncate` class below is a WIDTH cap: it clips to whatever the container can
+                // show, so it is responsive and never cuts a value that fits. `truncateLength` is a
+                // CHARACTER cap — its declaration says "Max characters before truncation" — so it is a
+                // statement about the VALUE and holds at any width. Applying both gives the shorter of
+                // the two, which is what an author asking for either one expects.
+                //
+                // The `ch`-based width ceiling considered as an alternative was rejected: a `ch` is the
+                // advance of "0", so against a proportional font `truncateLength: 48` would show
+                // anywhere from roughly thirty to eighty characters. That makes a parameter documented
+                // as a character count mean something it does not say, which is the kind of near-miss
+                // semantics the framework refuses.
+                //
+                // The ellipsis is ADDITIONAL to the budget: `truncateLength: 48` yields 48 characters
+                // of the value plus the mark that more exists, which is how a "max characters" cap
+                // reads everywhere else. `trimEnd` so a cut landing mid-space does not render "abc …".
+                //
+                // A CHARACTER IS A GRAPHEME, not a UTF-16 code unit, and the difference is not academic.
+                // `value.slice(0, n)` cuts between the two halves of a surrogate pair, so a string of emoji
+                // rendered at `truncateLength: 3` came out as `👍�…` — a literal replacement glyph. It also
+                // counted `"🎉🎉🎉"` as six characters, which made this parameter mean something other than
+                // what its own declaration says, for exactly the reason the `ch`-based alternative was
+                // rejected. `Intl.Segmenter` counts and cuts what a reader would call a character: an emoji
+                // with a skin-tone modifier, a family joined by ZWJ, a flag's two regional indicators, and a
+                // letter with its combining accent are each one.
+                const maximumCharacters = stringDisplayParams?.truncateLength;
+                const graphemes = typeof maximumCharacters === 'number' && maximumCharacters > 0
+                    ? splitIntoGraphemes(value)
+                    : null;
+                const clipsAtCharacterCount = graphemes !== null && typeof maximumCharacters === 'number' && graphemes.length > maximumCharacters;
+                if (!clipsAtCharacterCount) {
+                    return (_jsx(Text, { className: "min-w-0 truncate", children: value }));
+                }
+                // `title` carries the full value, and it is not decoration: a character cap REMOVES the
+                // remainder from the DOM, where a CSS clip only hides it, so without this there is nothing
+                // left holding the rest of the string.
+                //
+                // Be precise about what it does and does not restore, because an earlier version of this
+                // comment overclaimed and a review caught it. `title` is an ATTRIBUTE, so browser
+                // find-in-page — which searches rendered text — does NOT match the hidden remainder, and a
+                // screen reader's treatment of `title` on a `<p>` is inconsistent and never keyboard
+                // reachable. It is the strongest affordance available on this element, not an equivalent of
+                // leaving the text in place.
+                //
+                // On a surface whose policy sets `tooltipOnTruncate`, `Text` routes its children into a
+                // styled tooltip when the element OVERFLOWS. A character-capped string usually no longer
+                // overflows, so that tooltip stops opening and the native `title` is what remains. The full
+                // value stays reachable either way; the polish of which tooltip shows it does not survive
+                // the cap, and an author choosing `truncateLength` on such a surface is choosing that.
+                return (_jsx(Text, { className: "min-w-0 truncate", title: value, children: `${(graphemes ?? []).slice(0, maximumCharacters).join('').trimEnd()}…` }));
+            }
             case StringDisplayMode.MULTILINE:
                 return (_jsx(Text, { className: "whitespace-pre-wrap", children: value }));
             case StringDisplayMode.IDENTIFIER:
                 // A machine ref/slug: verbatim and greppable, styled to recede behind the prose.
-                return _jsx(Text, { className: "font-mono text-xs text-muted-foreground break-all", children: value });
+                //
+                // Through the `Identifier` element rather than a class string, and that is the whole point of
+                // that element existing: this treatment used to live ONLY here, inside a switch nothing
+                // outside the field pipeline can call, so every surface that builds its own rows spelled the
+                // same classes by hand and drifted. One resolved component is what lets a hand-built row and
+                // a field render the same ref the same way — and makes the treatment themeable, which a
+                // class string in a switch never was.
+                return _jsx(Identifier, { children: value });
             case StringDisplayMode.MARKDOWN:
                 // Rich long-form content (descriptions, notes): full markdown body
                 // themed through the typography recipes. See markdown-content.tsx for

package/dist/esm/components/data-display/formatters/display-field-string.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-field-string.js","sourceRoot":"","sources":["../../../../../../src/components/data-display/formatters/display-field-string.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\n/**\n * DisplayFieldString Component\n *\n * Displays a string value based on the string UI decorator.\n * Supports different display modes: text, truncate, multiline, markdown, color, link, email, badge, copy, secret\n */\n\nimport * as React from \"react\"\n\nimport { cn, useI18n, useIconRegistry, StandardIconReference, IconSize, Text, Badge } from \"@wildo-ai/saas-frontend-lib\"\nimport { FrontendComponentType } from \"@wildo-ai/presets-components-models\"\nimport { getStringUI, getStringFormat, StringDisplayMode } from \"@wildo-ai/zod-decorators\"\nimport type { DisplayFieldStringProps } from '@wildo-ai/saas-frontend-lib'\n\nimport { MarkdownContent } from \"../markdown-content\"\n\n/**\n * DisplayFieldString component\n *\n * Renders a string value according to the string UI decorator\n */\nfunction DisplayFieldString({\n  schema,\n  value,\n  className,\n}: DisplayFieldStringProps): React.JSX.Element | null {\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FORM_FIELD })\n  const { renderIcon } = useIconRegistry()\n  const [copied, setCopied] = React.useState(false)\n\n  const stringUI = getStringUI(schema)\n  const stringFormat = getStringFormat(schema)\n\n  // SECRET fields mask by default; `initiallyRevealed` (set by `.isEphemeral()`)\n  // shows the value on first paint for one-time reveals. The eye toggle still works.\n  const [revealed, setRevealed] = React.useState(stringUI?.display?.initiallyRevealed ?? false)\n\n  let displayMode = stringUI?.display?.displayMode ?? StringDisplayMode.TEXT\n  if (!stringUI && stringFormat) {\n    if (stringFormat === 'email') displayMode = StringDisplayMode.EMAIL\n    else if (stringFormat === 'url') displayMode = StringDisplayMode.LINK\n  }\n\n  // Copy to clipboard handler\n  const handleCopy = async () => {\n    if (value) {\n      await navigator.clipboard.writeText(value)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    }\n  }\n\n  // Render the value content\n  const renderValue = () => {\n    // Handle null/undefined\n    if (value === null || value === undefined || value === '') {\n      return <><Text className=\"text-muted-foreground italic\" aria-hidden=\"true\">—</Text><span className=\"sr-only\">{tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue')}</span></>\n    }\n\n    // Render based on display mode\n    switch (displayMode) {\n      case StringDisplayMode.TEXT:\n        return <Text>{value}</Text>\n\n      case StringDisplayMode.TRUNCATE:\n        return (\n          <Text className=\"min-w-0 truncate\">\n            {value}\n          </Text>\n        )\n\n      case StringDisplayMode.MULTILINE:\n        return (\n          <Text className=\"whitespace-pre-wrap\">\n            {value}\n          </Text>\n        )\n\n      case StringDisplayMode.IDENTIFIER:\n        // A machine ref/slug: verbatim and greppable, styled to recede behind the prose.\n        return <Text className=\"font-mono text-xs text-muted-foreground break-all\">{value}</Text>\n\n      case StringDisplayMode.MARKDOWN:\n        // Rich long-form content (descriptions, notes): full markdown body\n        // themed through the typography recipes. See markdown-content.tsx for\n        // the embedded heading-demotion rationale.\n        return <MarkdownContent value={value} />\n\n\n      case StringDisplayMode.COLOR:\n        return (\n          <div className=\"flex items-center gap-element\">\n            <div\n              className=\"h-5 w-5 rounded border border-border\"\n              style={{ backgroundColor: value }}\n              aria-hidden=\"true\"\n            />\n            <Text className=\"font-mono text-sm\">{value}</Text>\n          </div>\n        )\n\n      case StringDisplayMode.LINK:\n        return (\n          <a\n            href={value}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        )\n\n      case StringDisplayMode.EMAIL:\n        return (\n          <a\n            href={`mailto:${value}`}\n            className=\"text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        )\n\n      case StringDisplayMode.BADGE:\n        return <Badge variant=\"secondary\">{value}</Badge>\n\n      case StringDisplayMode.COPY:\n        return (\n          <div className=\"flex items-center gap-element\">\n            <Text className=\"font-mono text-sm\">{value}</Text>\n            <button\n              type=\"button\"\n              onClick={handleCopy}\n              className=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={copied ? tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copied') : tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copyToClipboard')}\n            >\n              <span aria-hidden=\"true\">\n                {copied\n                  ? renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })\n                  : renderIcon(StandardIconReference.COPY, { size: IconSize.SM })\n                }\n              </span>\n            </button>\n          </div>\n        )\n\n      case StringDisplayMode.SECRET:\n        return (\n          <div className=\"flex items-center gap-element\">\n            <Text className=\"font-mono text-sm select-all\" aria-live=\"polite\">\n              {revealed ? value : '••••••••••••••••'}\n            </Text>\n            <button\n              type=\"button\"\n              onClick={() => setRevealed(prev => !prev)}\n              className=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={revealed ? tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'hideValue') : tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'revealValue')}\n            >\n              <span aria-hidden=\"true\">\n                {revealed\n                  ? renderIcon(StandardIconReference.EYE_OFF, { size: IconSize.SM })\n                  : renderIcon(StandardIconReference.EYE, { size: IconSize.SM })\n                }\n              </span>\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleCopy}\n              className=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={copied ? tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copied') : tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copyToClipboard')}\n            >\n              <span aria-hidden=\"true\">\n                {copied\n                  ? renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })\n                  : renderIcon(StandardIconReference.COPY, { size: IconSize.SM })\n                }\n              </span>\n            </button>\n          </div>\n        )\n\n      default:\n        return <Text>{value}</Text>\n    }\n  }\n\n  if (!isReady) return null\n  // Label/description rendering is handled by the parent DisplayField (FIELD-01)\n  return <div className={className}>{renderValue()}</div>\n}\n\n;(DisplayFieldString as typeof DisplayFieldString & { displayName: string }).displayName = \"DisplayFieldString\"\n\nexport { DisplayFieldString }\n"]}
+{"version":3,"file":"display-field-string.js","sourceRoot":"","sources":["../../../../../../src/components/data-display/formatters/display-field-string.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\n/**\n * DisplayFieldString Component\n *\n * Displays a string value based on the string UI decorator.\n * Supports different display modes: text, truncate, multiline, markdown, color, link, email, badge, copy, secret\n */\n\nimport * as React from \"react\"\n\nimport { cn, useI18n, useIconRegistry, StandardIconReference, IconSize, Text, Badge, Identifier, useContextualDisplayParams} from \"@wildo-ai/saas-frontend-lib\"\nimport { FrontendComponentType } from \"@wildo-ai/presets-components-models\"\nimport { getStringUI, getStringFormat, StringDisplayMode } from \"@wildo-ai/zod-decorators\"\nimport type { DisplayFieldStringProps } from '@wildo-ai/saas-frontend-lib'\n\nimport { MarkdownContent } from \"../markdown-content\"\n\n/**\n * Split a string into user-perceived characters.\n *\n * `Intl.Segmenter` is the only thing that gets this right — code units split surrogate pairs, and\n * code points still split a flag, a ZWJ sequence, a skin-tone modifier and a combining accent. The\n * fallback to code points is for a runtime without it; it is strictly better than code units and\n * cannot produce a lone surrogate, which is the failure that actually shows on screen.\n */\nconst GRAPHEME_SEGMENTER =\n  typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function'\n    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })\n    : null\n\nfunction splitIntoGraphemes(value: string): string[] {\n  if (!GRAPHEME_SEGMENTER) return Array.from(value)\n  return Array.from(GRAPHEME_SEGMENTER.segment(value), part => part.segment)\n}\n\n/**\n * DisplayFieldString component\n *\n * Renders a string value according to the string UI decorator\n */\nfunction DisplayFieldString({\n  schema,\n  value,\n  className,\n}: DisplayFieldStringProps): React.JSX.Element | null {\n  const { tComponent, isReady } = useI18n({ component: [FrontendComponentType.LOW_LEVEL_FORM_FIELD, FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING] })\n  const { renderIcon } = useIconRegistry()\n  const [copied, setCopied] = React.useState(false)\n\n  const stringUI = getStringUI(schema)\n  const stringFormat = getStringFormat(schema)\n\n  // SECRET fields mask by default; `initiallyRevealed` (set by `.isEphemeral()`)\n  // shows the value on first paint for one-time reveals. The eye toggle still works.\n  const stringDisplayParams = useContextualDisplayParams(stringUI)\n  const [revealed, setRevealed] = React.useState(stringDisplayParams?.initiallyRevealed ?? false)\n\n  let displayMode = stringDisplayParams?.displayMode ?? StringDisplayMode.TEXT\n  if (!stringUI && stringFormat) {\n    if (stringFormat === 'email') displayMode = StringDisplayMode.EMAIL\n    else if (stringFormat === 'url') displayMode = StringDisplayMode.LINK\n  }\n\n  // Copy to clipboard handler\n  const handleCopy = async () => {\n    if (value) {\n      await navigator.clipboard.writeText(value)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    }\n  }\n\n  // Render the value content\n  const renderValue = () => {\n    // Handle null/undefined\n    if (value === null || value === undefined || value === '') {\n      return <><Text className=\"text-muted-foreground italic\" aria-hidden=\"true\">—</Text><span className=\"sr-only\">{tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue')}</span></>\n    }\n\n    // Render based on display mode\n    switch (displayMode) {\n      case StringDisplayMode.TEXT:\n        return <Text>{value}</Text>\n\n      case StringDisplayMode.TRUNCATE: {\n        // TWO AXES, BOTH LIVE, AND THEY ARE NOT THE SAME QUESTION.\n        //\n        // The `truncate` class below is a WIDTH cap: it clips to whatever the container can\n        // show, so it is responsive and never cuts a value that fits. `truncateLength` is a\n        // CHARACTER cap — its declaration says \"Max characters before truncation\" — so it is a\n        // statement about the VALUE and holds at any width. Applying both gives the shorter of\n        // the two, which is what an author asking for either one expects.\n        //\n        // The `ch`-based width ceiling considered as an alternative was rejected: a `ch` is the\n        // advance of \"0\", so against a proportional font `truncateLength: 48` would show\n        // anywhere from roughly thirty to eighty characters. That makes a parameter documented\n        // as a character count mean something it does not say, which is the kind of near-miss\n        // semantics the framework refuses.\n        //\n        // The ellipsis is ADDITIONAL to the budget: `truncateLength: 48` yields 48 characters\n        // of the value plus the mark that more exists, which is how a \"max characters\" cap\n        // reads everywhere else. `trimEnd` so a cut landing mid-space does not render \"abc …\".\n        //\n        // A CHARACTER IS A GRAPHEME, not a UTF-16 code unit, and the difference is not academic.\n        // `value.slice(0, n)` cuts between the two halves of a surrogate pair, so a string of emoji\n        // rendered at `truncateLength: 3` came out as `👍�…` — a literal replacement glyph. It also\n        // counted `\"🎉🎉🎉\"` as six characters, which made this parameter mean something other than\n        // what its own declaration says, for exactly the reason the `ch`-based alternative was\n        // rejected. `Intl.Segmenter` counts and cuts what a reader would call a character: an emoji\n        // with a skin-tone modifier, a family joined by ZWJ, a flag's two regional indicators, and a\n        // letter with its combining accent are each one.\n        const maximumCharacters = stringDisplayParams?.truncateLength\n        const graphemes = typeof maximumCharacters === 'number' && maximumCharacters > 0\n          ? splitIntoGraphemes(value)\n          : null\n        const clipsAtCharacterCount =\n          graphemes !== null && typeof maximumCharacters === 'number' && graphemes.length > maximumCharacters\n\n        if (!clipsAtCharacterCount) {\n          return (\n            <Text className=\"min-w-0 truncate\">\n              {value}\n            </Text>\n          )\n        }\n\n        // `title` carries the full value, and it is not decoration: a character cap REMOVES the\n        // remainder from the DOM, where a CSS clip only hides it, so without this there is nothing\n        // left holding the rest of the string.\n        //\n        // Be precise about what it does and does not restore, because an earlier version of this\n        // comment overclaimed and a review caught it. `title` is an ATTRIBUTE, so browser\n        // find-in-page — which searches rendered text — does NOT match the hidden remainder, and a\n        // screen reader's treatment of `title` on a `<p>` is inconsistent and never keyboard\n        // reachable. It is the strongest affordance available on this element, not an equivalent of\n        // leaving the text in place.\n        //\n        // On a surface whose policy sets `tooltipOnTruncate`, `Text` routes its children into a\n        // styled tooltip when the element OVERFLOWS. A character-capped string usually no longer\n        // overflows, so that tooltip stops opening and the native `title` is what remains. The full\n        // value stays reachable either way; the polish of which tooltip shows it does not survive\n        // the cap, and an author choosing `truncateLength` on such a surface is choosing that.\n        return (\n          <Text className=\"min-w-0 truncate\" title={value}>\n            {`${(graphemes ?? []).slice(0, maximumCharacters).join('').trimEnd()}…`}\n          </Text>\n        )\n      }\n\n      case StringDisplayMode.MULTILINE:\n        return (\n          <Text className=\"whitespace-pre-wrap\">\n            {value}\n          </Text>\n        )\n\n      case StringDisplayMode.IDENTIFIER:\n        // A machine ref/slug: verbatim and greppable, styled to recede behind the prose.\n        //\n        // Through the `Identifier` element rather than a class string, and that is the whole point of\n        // that element existing: this treatment used to live ONLY here, inside a switch nothing\n        // outside the field pipeline can call, so every surface that builds its own rows spelled the\n        // same classes by hand and drifted. One resolved component is what lets a hand-built row and\n        // a field render the same ref the same way — and makes the treatment themeable, which a\n        // class string in a switch never was.\n        return <Identifier>{value}</Identifier>\n\n      case StringDisplayMode.MARKDOWN:\n        // Rich long-form content (descriptions, notes): full markdown body\n        // themed through the typography recipes. See markdown-content.tsx for\n        // the embedded heading-demotion rationale.\n        return <MarkdownContent value={value} />\n\n\n      case StringDisplayMode.COLOR:\n        return (\n          <div className=\"flex items-center gap-element\">\n            <div\n              className=\"h-5 w-5 rounded border border-border\"\n              style={{ backgroundColor: value }}\n              aria-hidden=\"true\"\n            />\n            <Text className=\"font-mono text-sm\">{value}</Text>\n          </div>\n        )\n\n      case StringDisplayMode.LINK:\n        return (\n          <a\n            href={value}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        )\n\n      case StringDisplayMode.EMAIL:\n        return (\n          <a\n            href={`mailto:${value}`}\n            className=\"text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        )\n\n      case StringDisplayMode.BADGE:\n        return <Badge variant=\"secondary\">{value}</Badge>\n\n      case StringDisplayMode.COPY:\n        return (\n          <div className=\"flex items-center gap-element\">\n            <Text className=\"font-mono text-sm\">{value}</Text>\n            <button\n              type=\"button\"\n              onClick={handleCopy}\n              className=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={copied ? tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copied') : tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copyToClipboard')}\n            >\n              <span aria-hidden=\"true\">\n                {copied\n                  ? renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })\n                  : renderIcon(StandardIconReference.COPY, { size: IconSize.SM })\n                }\n              </span>\n            </button>\n          </div>\n        )\n\n      case StringDisplayMode.SECRET:\n        return (\n          <div className=\"flex items-center gap-element\">\n            <Text className=\"font-mono text-sm select-all\" aria-live=\"polite\">\n              {revealed ? value : '••••••••••••••••'}\n            </Text>\n            <button\n              type=\"button\"\n              onClick={() => setRevealed(prev => !prev)}\n              className=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={revealed ? tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'hideValue') : tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'revealValue')}\n            >\n              <span aria-hidden=\"true\">\n                {revealed\n                  ? renderIcon(StandardIconReference.EYE_OFF, { size: IconSize.SM })\n                  : renderIcon(StandardIconReference.EYE, { size: IconSize.SM })\n                }\n              </span>\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleCopy}\n              className=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={copied ? tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copied') : tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_STRING, 'copyToClipboard')}\n            >\n              <span aria-hidden=\"true\">\n                {copied\n                  ? renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })\n                  : renderIcon(StandardIconReference.COPY, { size: IconSize.SM })\n                }\n              </span>\n            </button>\n          </div>\n        )\n\n      default:\n        return <Text>{value}</Text>\n    }\n  }\n\n  if (!isReady) return null\n  // Label/description rendering is handled by the parent DisplayField (FIELD-01)\n  return <div className={className}>{renderValue()}</div>\n}\n\n;(DisplayFieldString as typeof DisplayFieldString & { displayName: string }).displayName = \"DisplayFieldString\"\n\nexport { DisplayFieldString }\n"]}

package/dist/esm/components/data-display/formatters/display-field-string.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-field-string.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-string.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"display-field-string.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/data-display/formatters/display-field-string.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/data-display/formatters/display-field-time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-field-time.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-time.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAGxE,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAgBlD;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"display-field-time.d.ts","sourceRoot":"","sources":["../../../../../../src/components/data-display/formatters/display-field-time.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAGxE,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAgBlD;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-time.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-field-time.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-time.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,8BAA8B,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"display-field-time.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/data-display/formatters/display-field-time.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,8BAA8B,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/data-display/identifier.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { IdentifierProps } from "@wildo-ai/saas-frontend-lib";
+/**
+ * DEFAULT preset for `LOW_LEVEL_IDENTIFIER`: the design-system `Text` in a monospaced face, as a
+ * `<span>` so it composes inline beside the prose it addresses.
+ *
+ * `Text` owns the size and colour — this preset adds only what makes an identifier an identifier:
+ * the monospaced face, and `min-w-0 break-all` so a long unbroken ref wraps instead of pushing its
+ * row sideways. The caller's `className` is merged LAST, so a surface can still override.
+ *
+ * Deliberately NOT the `TypographyVariant.CODE` recipe: that one is an inline CODE SPAN
+ * (`bg-muted rounded px-1 py-0.5`), which is a chip behind the value. An identifier is the value
+ * itself, sitting in a row — a grey pill behind every ref on a board is a different design.
+ */
+export declare function Identifier({ size, variant, className, children, }: IdentifierProps): React.JSX.Element;
+export declare namespace Identifier {
+    var displayName: string;
+}
+//# sourceMappingURL=identifier.d.ts.map

package/dist/esm/components/data-display/identifier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"identifier.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/identifier.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAElE;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAkB,EAClB,OAA2B,EAC3B,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMrC;yBAXe,UAAU"}

package/dist/esm/components/data-display/identifier.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextSize, TextVariant } from "@wildo-ai/presets-components-models";
+import { cn, Text } from "@wildo-ai/saas-frontend-lib";
+/**
+ * DEFAULT preset for `LOW_LEVEL_IDENTIFIER`: the design-system `Text` in a monospaced face, as a
+ * `<span>` so it composes inline beside the prose it addresses.
+ *
+ * `Text` owns the size and colour — this preset adds only what makes an identifier an identifier:
+ * the monospaced face, and `min-w-0 break-all` so a long unbroken ref wraps instead of pushing its
+ * row sideways. The caller's `className` is merged LAST, so a surface can still override.
+ *
+ * Deliberately NOT the `TypographyVariant.CODE` recipe: that one is an inline CODE SPAN
+ * (`bg-muted rounded px-1 py-0.5`), which is a chip behind the value. An identifier is the value
+ * itself, sitting in a row — a grey pill behind every ref on a board is a different design.
+ */
+export function Identifier({ size = TextSize.XS, variant = TextVariant.MUTED, className, children, }) {
+    return (_jsx(Text, { as: "span", size: size, variant: variant, className: cn("min-w-0 break-all font-mono", className), children: children }));
+}
+Identifier.displayName = "Identifier";
+//# sourceMappingURL=identifier.js.map

package/dist/esm/components/data-display/identifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"identifier.js","sourceRoot":"","sources":["../../../../../src/components/data-display/identifier.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAGtD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,OAAO,GAAG,WAAW,CAAC,KAAK,EAC3B,SAAS,EACT,QAAQ,GACQ;IAChB,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,YAClG,QAAQ,GACJ,CACR,CAAA;AACH,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { TextSize, TextVariant } from \"@wildo-ai/presets-components-models\"\nimport { cn, Text } from \"@wildo-ai/saas-frontend-lib\"\nimport type { IdentifierProps } from \"@wildo-ai/saas-frontend-lib\"\n\n/**\n * DEFAULT preset for `LOW_LEVEL_IDENTIFIER`: the design-system `Text` in a monospaced face, as a\n * `<span>` so it composes inline beside the prose it addresses.\n *\n * `Text` owns the size and colour — this preset adds only what makes an identifier an identifier:\n * the monospaced face, and `min-w-0 break-all` so a long unbroken ref wraps instead of pushing its\n * row sideways. The caller's `className` is merged LAST, so a surface can still override.\n *\n * Deliberately NOT the `TypographyVariant.CODE` recipe: that one is an inline CODE SPAN\n * (`bg-muted rounded px-1 py-0.5`), which is a chip behind the value. An identifier is the value\n * itself, sitting in a row — a grey pill behind every ref on a board is a different design.\n */\nexport function Identifier({\n  size = TextSize.XS,\n  variant = TextVariant.MUTED,\n  className,\n  children,\n}: IdentifierProps): React.JSX.Element {\n  return (\n    <Text as=\"span\" size={size} variant={variant} className={cn(\"min-w-0 break-all font-mono\", className)}>\n      {children}\n    </Text>\n  )\n}\n\nIdentifier.displayName = \"Identifier\"\n"]}

package/dist/esm/components/data-display/kbd.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { KbdProps } from "@wildo-ai/saas-frontend-lib";
+/**
+ * DEFAULT preset for `LOW_LEVEL_KBD`: a real `<kbd>` element, in the monospaced face, on the INSET
+ * surface with a hairline border — a key cap, drawn once for every surface that tells a person what
+ * to press.
+ *
+ * INSET rather than SUNKEN or MUTED: the three sites this replaced disagreed on the ground, and an
+ * inset surface is the one whose meaning is "a control sunk into what it sits on", which is what a
+ * key cap depicts. The size is fixed at the XS text scale and never scales with its host: a cap
+ * beside a heading and a cap beside a caption are the same key.
+ */
+export declare function Kbd({ className, children }: KbdProps): React.JSX.Element;
+export declare namespace Kbd {
+    var displayName: string;
+}
+//# sourceMappingURL=kbd.d.ts.map

package/dist/esm/components/data-display/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAE3D;;;;;;;;;GASG;AACH,wBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAYxE;yBAZe,GAAG"}

package/dist/esm/components/data-display/kbd.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@wildo-ai/saas-frontend-lib";
+/**
+ * DEFAULT preset for `LOW_LEVEL_KBD`: a real `<kbd>` element, in the monospaced face, on the INSET
+ * surface with a hairline border — a key cap, drawn once for every surface that tells a person what
+ * to press.
+ *
+ * INSET rather than SUNKEN or MUTED: the three sites this replaced disagreed on the ground, and an
+ * inset surface is the one whose meaning is "a control sunk into what it sits on", which is what a
+ * key cap depicts. The size is fixed at the XS text scale and never scales with its host: a cap
+ * beside a heading and a cap beside a caption are the same key.
+ */
+export function Kbd({ className, children }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn("inline-flex shrink-0 select-none items-center justify-center rounded border border-border bg-surface-inset px-1.5 py-0.5 font-mono text-xs font-medium leading-none text-surface-inset-foreground", className), children: children }));
+}
+Kbd.displayName = "Kbd";
+//# sourceMappingURL=kbd.js.map

package/dist/esm/components/data-display/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sourceRoot":"","sources":["../../../../../src/components/data-display/kbd.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AAGhD;;;;;;;;;GASG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAY;IACnD,OAAO,CACL,2BACY,KAAK,EACf,SAAS,EAAE,EAAE,CACX,mMAAmM,EACnM,SAAS,CACV,YAEA,QAAQ,GACL,CACP,CAAA;AACH,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@wildo-ai/saas-frontend-lib\"\nimport type { KbdProps } from \"@wildo-ai/saas-frontend-lib\"\n\n/**\n * DEFAULT preset for `LOW_LEVEL_KBD`: a real `<kbd>` element, in the monospaced face, on the INSET\n * surface with a hairline border — a key cap, drawn once for every surface that tells a person what\n * to press.\n *\n * INSET rather than SUNKEN or MUTED: the three sites this replaced disagreed on the ground, and an\n * inset surface is the one whose meaning is \"a control sunk into what it sits on\", which is what a\n * key cap depicts. The size is fixed at the XS text scale and never scales with its host: a cap\n * beside a heading and a cap beside a caption are the same key.\n */\nexport function Kbd({ className, children }: KbdProps): React.JSX.Element {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"inline-flex shrink-0 select-none items-center justify-center rounded border border-border bg-surface-inset px-1.5 py-0.5 font-mono text-xs font-medium leading-none text-surface-inset-foreground\",\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  )\n}\n\nKbd.displayName = \"Kbd\"\n"]}

package/dist/esm/components/data-display/markdown-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-content.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/markdown-content.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,oBAAoB;IACnC,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,iBAAS,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6FtF;AAID,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"markdown-content.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/markdown-content.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,oBAAoB;IACnC,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,iBAAS,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6FtF;AAID,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/esm/components/data-display/markdown-stream-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-stream-runtime.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/markdown-stream-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEjD,sGAAsG;AACtG,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC,CAAA;AAEpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,eAAO,MAAM,sBAAsB,EAAE,wBAQjC,CAAA;AAEJ;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAE1E"}
+{"version":3,"file":"markdown-stream-runtime.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/markdown-stream-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEjD,sGAAsG;AACtG,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC,CAAA;AAEpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,eAAO,MAAM,sBAAsB,EAAE,wBAQjC,CAAA;AAEJ;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAE1E"}

package/dist/esm/components/data-display/markdown-stream.lazy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-stream.lazy.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/markdown-stream.lazy.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAqDzE;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAyB,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAc9G"}
+{"version":3,"file":"markdown-stream.lazy.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/markdown-stream.lazy.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAwEzE;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAyB,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgB9G"}

package/dist/esm/components/data-display/markdown-stream.lazy.js

@@ -37,7 +37,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `pnpm check:lazy-boundaries`.
  */
 import * as React from "react";
-import { Skeleton, cn, useUI } from "@wildo-ai/saas-frontend-lib";
+import { LazyDoorErrorBoundary, Skeleton, cn, useUI } from "@wildo-ai/saas-frontend-lib";
 import { TypographyVariant, UIBehavior } from "@wildo-ai/presets-components-models";
 /**
  * What a ```` ```mermaid ```` fence renders as, now that diagram rendering is switched off.
@@ -60,6 +60,17 @@ function MermaidSourceFallback({ chart }) {
     const code = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.CODE);
     return (_jsx("pre", { className: cn("my-4 overflow-x-auto rounded-md border bg-muted/50 p-card-sm text-sm", code.base), "data-streamdown": "mermaid-source", children: _jsx("code", { children: chart }) }));
 }
+/**
+ * What markdown degrades TO when the rendering pipeline never arrives (#963): the SOURCE, in the same
+ * code block the mermaid fallback uses. Markdown is readable as text — headings, lists and links keep
+ * their meaning unrendered — so the source is the most useful thing left to show, and it is the
+ * person's own content rather than a word the door would have to invent.
+ */
+function MarkdownSourceFallback({ children }) {
+    const { getRecipe } = useUI();
+    const code = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.CODE);
+    return (_jsx("pre", { className: cn("my-4 overflow-x-auto rounded-md border border-dashed bg-muted/50 p-card-sm text-sm whitespace-pre-wrap", code.base), "data-lazy-door": "unavailable", children: _jsx("code", { children: typeof children === "string" ? children : "" }) }));
+}
 /**
  * Default `mermaid` options handed to `streamdown`.
  *
@@ -87,6 +98,6 @@ const LazyStreamdown = React.lazy(() => import("./markdown-stream-runtime.js").t
  * `MermaidSourceFallback` above; passing `mermaid` explicitly overrides it.
  */
 export function MarkdownStream({ mermaid = MERMAID_OPTIONS, ...props }) {
-    return (_jsx(React.Suspense, { fallback: _jsxs("div", { className: "space-y-2", "aria-busy": "true", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-11/12" }), _jsx(Skeleton, { className: "h-4 w-4/6" })] }), children: _jsx(LazyStreamdown, { mermaid: mermaid, ...props }) }));
+    return (_jsx(LazyDoorErrorBoundary, { doorName: "MarkdownStream", fallback: _jsx(MarkdownSourceFallback, { children: props.children }), children: _jsx(React.Suspense, { fallback: _jsxs("div", { className: "space-y-2", "aria-busy": "true", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-11/12" }), _jsx(Skeleton, { className: "h-4 w-4/6" })] }), children: _jsx(LazyStreamdown, { mermaid: mermaid, ...props }) }) }));
 }
 //# sourceMappingURL=markdown-stream.lazy.js.map

package/dist/esm/components/data-display/markdown-stream.lazy.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-stream.lazy.js","sourceRoot":"","sources":["../../../../../src/components/data-display/markdown-stream.lazy.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAMnF;;;;;;;;;;;;;;;GAeG;AACH,SAAS,qBAAqB,CAAC,EAAE,KAAK,EAAuD;IAC3F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACrE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,sEAAsE,EAAE,IAAI,CAAC,IAAI,CAAC,qBAChF,gBAAgB,YAEhC,yBAAO,KAAK,GAAQ,GAChB,CACP,CAAA;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,eAAe,GAAgD,EAAE,cAAc,EAAE,qBAAqB,EAAE,CAAA;AAE9G;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CACrC,MAAM,CAAC,2BAA2B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAClG,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,GAAG,eAAe,EAAE,GAAG,KAAK,EAAuB;IACzF,OAAO,CACL,KAAC,KAAK,CAAC,QAAQ,IACb,QAAQ,EACN,eAAK,SAAS,EAAC,WAAW,eAAW,MAAM,aACzC,KAAC,QAAQ,IAAC,SAAS,EAAC,YAAY,GAAG,EACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,GAAG,EACpC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,IAC9B,YAGR,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,GAChC,CAClB,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\n/**\n * The ONLY door onto the markdown-rendering pipeline (`streamdown` + `katex` + `marked` + the\n * `micromark`/`mdast`/`parse5` stack).\n *\n * Lazy-boundary wrapper (`*.lazy.tsx` convention — `graph.lazy` / `ChartView.lazy` /\n * `pdf-viewer.lazy` precedent). It owns the single `React.lazy(() => import('./markdown-stream-runtime'))`\n * split point and the Suspense fallback, and re-exports the props type via `import type` so callers\n * stay fully typed with NO runtime edge onto the pipeline.\n *\n * ## What it keeps out of the eager graph, and what that measured\n *\n * `streamdown` was statically imported by three preset components — `data-display/markdown-content`,\n * `ai-elements/trace/reasoning` and `ai-elements/chat/message` — and all three are registered\n * eagerly by `registration/register-default-presets.ts`. Preset registration runs at application\n * bootstrap, so the whole markdown pipeline was in the first-load set of every generated\n * application whether or not it ever renders markdown. Measured on `examples/wonder-crm`\n * (production `vite build`, eager set = the assets `dist/index.html` itself references): **210 kB\n * gzipped**, against a 1,674 kB gzipped first load.\n *\n * See `markdown-stream-runtime.ts` for the per-payload breakdown and for why one runtime module is\n * used rather than three per-leaf split points.\n *\n * ## Suspense fallback\n *\n * Markdown always occupies flow layout, so the fallback reserves height with a three-line\n * `Skeleton` block rather than collapsing to zero and reflowing the surface underneath. Only the\n * FIRST markdown block on a surface realistically suspends: the chunk is resident for every later\n * one, so this is a one-time cost at the moment the user opens a markdown-bearing surface.\n *\n * ## The rule\n *\n * Everything except this wrapper (and tests) must render markdown through `MarkdownStream`. A\n * static import of `./markdown-stream-runtime`, or of `streamdown` itself, from the eager graph\n * silently merges the whole pipeline back into the entry chunk — enforced by\n * `pnpm check:lazy-boundaries`.\n */\n\nimport * as React from \"react\"\nimport { Skeleton, cn, useUI } from \"@wildo-ai/saas-frontend-lib\"\nimport { TypographyVariant, UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport type { Streamdown } from \"streamdown\"\n\n/** Props of the underlying renderer, forwarded verbatim. */\nexport type MarkdownStreamProps = React.ComponentProps<typeof Streamdown>\n\n/**\n * What a ```` ```mermaid ```` fence renders as, now that diagram rendering is switched off.\n *\n * Wildo does not render mermaid diagrams: the applications alias the `mermaid` specifier onto\n * `~wildo-presets/mermaid-stub`, which removes ~430 kB gzipped across 21 chunks from the built\n * output (see that module for the measurement and for what it deliberately does NOT save). The stub\n * rejects, `streamdown` catches, and hands the failure to this component.\n *\n * Rendering the SOURCE is the point. `streamdown`'s own fallback is a red error panel with a\n * `Show Code` disclosure, which reads as a malfunction; a diagram nobody chose to render is not a\n * malfunction, and the source is the most useful thing left to show. The block is styled through the\n * CODE typography recipe so it matches every other code surface in the active theme.\n *\n * It is passed as a DEFAULT below rather than hardcoded, so an application that keeps the real\n * `mermaid` (by dropping the alias) is unaffected — the error this renders simply never occurs.\n */\nfunction MermaidSourceFallback({ chart }: { chart: string; error: string; retry: () => void }): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const code = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.CODE)\n  return (\n    <pre\n      className={cn(\"my-4 overflow-x-auto rounded-md border bg-muted/50 p-card-sm text-sm\", code.base)}\n      data-streamdown=\"mermaid-source\"\n    >\n      <code>{chart}</code>\n    </pre>\n  )\n}\n\n/**\n * Default `mermaid` options handed to `streamdown`.\n *\n * Module-level constant, never an inline object literal: `streamdown` memoizes its context value on\n * this prop's identity, so a fresh object per render would invalidate that memo on every keystroke\n * of a streaming response.\n */\nconst MERMAID_OPTIONS: NonNullable<MarkdownStreamProps[\"mermaid\"]> = { errorComponent: MermaidSourceFallback }\n\n/**\n * Resolves to `MarkdownStreamRuntime`, NOT to `Streamdown` itself.\n *\n * That indirection is what applies the reordered rehype chain (`raw → sanitize → harden → katex`)\n * that makes LaTeX render at all — see `DEFAULT_REHYPE_PLUGINS` in the runtime module for the defect\n * and the security reasoning. It cannot be applied here: the plugin list is derived from\n * `streamdown`'s own exports, and naming them from this file would put the whole 210 kB pipeline back\n * into the eager graph, which is the one thing this wrapper exists to prevent.\n */\nconst LazyStreamdown = React.lazy(() =>\n  import(\"./markdown-stream-runtime\").then((module) => ({ default: module.MarkdownStreamRuntime })),\n)\n\n/**\n * Renders markdown, resolving the pipeline on first render.\n *\n * A drop-in replacement for `<Streamdown …>`: every prop is forwarded unchanged, so call sites keep\n * their `components` overrides, their `parseIncompleteMarkdown` streaming flag and their class\n * names exactly as before. The one prop that gains a DEFAULT is `mermaid` — see\n * `MermaidSourceFallback` above; passing `mermaid` explicitly overrides it.\n */\nexport function MarkdownStream({ mermaid = MERMAID_OPTIONS, ...props }: MarkdownStreamProps): React.JSX.Element {\n  return (\n    <React.Suspense\n      fallback={\n        <div className=\"space-y-2\" aria-busy=\"true\">\n          <Skeleton className=\"h-4 w-full\" />\n          <Skeleton className=\"h-4 w-11/12\" />\n          <Skeleton className=\"h-4 w-4/6\" />\n        </div>\n      }\n    >\n      <LazyStreamdown mermaid={mermaid} {...props} />\n    </React.Suspense>\n  )\n}\n"]}
+{"version":3,"file":"markdown-stream.lazy.js","sourceRoot":"","sources":["../../../../../src/components/data-display/markdown-stream.lazy.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AACxF,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAMnF;;;;;;;;;;;;;;;GAeG;AACH,SAAS,qBAAqB,CAAC,EAAE,KAAK,EAAuD;IAC3F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACrE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,sEAAsE,EAAE,IAAI,CAAC,IAAI,CAAC,qBAChF,gBAAgB,YAEhC,yBAAO,KAAK,GAAQ,GAChB,CACP,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,SAAS,sBAAsB,CAAC,EAAE,QAAQ,EAAiD;IACzF,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACrE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,wGAAwG,EAAE,IAAI,CAAC,IAAI,CAAC,oBACnH,aAAa,YAE5B,yBAAO,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAQ,GACvD,CACP,CAAA;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,eAAe,GAAgD,EAAE,cAAc,EAAE,qBAAqB,EAAE,CAAA;AAE9G;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CACrC,MAAM,CAAC,2BAA2B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAClG,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,GAAG,eAAe,EAAE,GAAG,KAAK,EAAuB;IACzF,OAAO,CACL,KAAC,qBAAqB,IAAC,QAAQ,EAAC,gBAAgB,EAAC,QAAQ,EAAE,KAAC,sBAAsB,cAAE,KAAK,CAAC,QAAQ,GAA0B,YAC1H,KAAC,KAAK,CAAC,QAAQ,IACb,QAAQ,EACN,eAAK,SAAS,EAAC,WAAW,eAAW,MAAM,aACzC,KAAC,QAAQ,IAAC,SAAS,EAAC,YAAY,GAAG,EACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,GAAG,EACpC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,IAC9B,YAGR,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,GAChC,GACK,CACzB,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\n/**\n * The ONLY door onto the markdown-rendering pipeline (`streamdown` + `katex` + `marked` + the\n * `micromark`/`mdast`/`parse5` stack).\n *\n * Lazy-boundary wrapper (`*.lazy.tsx` convention — `graph.lazy` / `ChartView.lazy` /\n * `pdf-viewer.lazy` precedent). It owns the single `React.lazy(() => import('./markdown-stream-runtime'))`\n * split point and the Suspense fallback, and re-exports the props type via `import type` so callers\n * stay fully typed with NO runtime edge onto the pipeline.\n *\n * ## What it keeps out of the eager graph, and what that measured\n *\n * `streamdown` was statically imported by three preset components — `data-display/markdown-content`,\n * `ai-elements/trace/reasoning` and `ai-elements/chat/message` — and all three are registered\n * eagerly by `registration/register-default-presets.ts`. Preset registration runs at application\n * bootstrap, so the whole markdown pipeline was in the first-load set of every generated\n * application whether or not it ever renders markdown. Measured on `examples/wonder-crm`\n * (production `vite build`, eager set = the assets `dist/index.html` itself references): **210 kB\n * gzipped**, against a 1,674 kB gzipped first load.\n *\n * See `markdown-stream-runtime.ts` for the per-payload breakdown and for why one runtime module is\n * used rather than three per-leaf split points.\n *\n * ## Suspense fallback\n *\n * Markdown always occupies flow layout, so the fallback reserves height with a three-line\n * `Skeleton` block rather than collapsing to zero and reflowing the surface underneath. Only the\n * FIRST markdown block on a surface realistically suspends: the chunk is resident for every later\n * one, so this is a one-time cost at the moment the user opens a markdown-bearing surface.\n *\n * ## The rule\n *\n * Everything except this wrapper (and tests) must render markdown through `MarkdownStream`. A\n * static import of `./markdown-stream-runtime`, or of `streamdown` itself, from the eager graph\n * silently merges the whole pipeline back into the entry chunk — enforced by\n * `pnpm check:lazy-boundaries`.\n */\n\nimport * as React from \"react\"\nimport { LazyDoorErrorBoundary, Skeleton, cn, useUI } from \"@wildo-ai/saas-frontend-lib\"\nimport { TypographyVariant, UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport type { Streamdown } from \"streamdown\"\n\n/** Props of the underlying renderer, forwarded verbatim. */\nexport type MarkdownStreamProps = React.ComponentProps<typeof Streamdown>\n\n/**\n * What a ```` ```mermaid ```` fence renders as, now that diagram rendering is switched off.\n *\n * Wildo does not render mermaid diagrams: the applications alias the `mermaid` specifier onto\n * `~wildo-presets/mermaid-stub`, which removes ~430 kB gzipped across 21 chunks from the built\n * output (see that module for the measurement and for what it deliberately does NOT save). The stub\n * rejects, `streamdown` catches, and hands the failure to this component.\n *\n * Rendering the SOURCE is the point. `streamdown`'s own fallback is a red error panel with a\n * `Show Code` disclosure, which reads as a malfunction; a diagram nobody chose to render is not a\n * malfunction, and the source is the most useful thing left to show. The block is styled through the\n * CODE typography recipe so it matches every other code surface in the active theme.\n *\n * It is passed as a DEFAULT below rather than hardcoded, so an application that keeps the real\n * `mermaid` (by dropping the alias) is unaffected — the error this renders simply never occurs.\n */\nfunction MermaidSourceFallback({ chart }: { chart: string; error: string; retry: () => void }): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const code = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.CODE)\n  return (\n    <pre\n      className={cn(\"my-4 overflow-x-auto rounded-md border bg-muted/50 p-card-sm text-sm\", code.base)}\n      data-streamdown=\"mermaid-source\"\n    >\n      <code>{chart}</code>\n    </pre>\n  )\n}\n\n/**\n * What markdown degrades TO when the rendering pipeline never arrives (#963): the SOURCE, in the same\n * code block the mermaid fallback uses. Markdown is readable as text — headings, lists and links keep\n * their meaning unrendered — so the source is the most useful thing left to show, and it is the\n * person's own content rather than a word the door would have to invent.\n */\nfunction MarkdownSourceFallback({ children }: { children: MarkdownStreamProps[\"children\"] }): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const code = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.CODE)\n  return (\n    <pre\n      className={cn(\"my-4 overflow-x-auto rounded-md border border-dashed bg-muted/50 p-card-sm text-sm whitespace-pre-wrap\", code.base)}\n      data-lazy-door=\"unavailable\"\n    >\n      <code>{typeof children === \"string\" ? children : \"\"}</code>\n    </pre>\n  )\n}\n\n/**\n * Default `mermaid` options handed to `streamdown`.\n *\n * Module-level constant, never an inline object literal: `streamdown` memoizes its context value on\n * this prop's identity, so a fresh object per render would invalidate that memo on every keystroke\n * of a streaming response.\n */\nconst MERMAID_OPTIONS: NonNullable<MarkdownStreamProps[\"mermaid\"]> = { errorComponent: MermaidSourceFallback }\n\n/**\n * Resolves to `MarkdownStreamRuntime`, NOT to `Streamdown` itself.\n *\n * That indirection is what applies the reordered rehype chain (`raw → sanitize → harden → katex`)\n * that makes LaTeX render at all — see `DEFAULT_REHYPE_PLUGINS` in the runtime module for the defect\n * and the security reasoning. It cannot be applied here: the plugin list is derived from\n * `streamdown`'s own exports, and naming them from this file would put the whole 210 kB pipeline back\n * into the eager graph, which is the one thing this wrapper exists to prevent.\n */\nconst LazyStreamdown = React.lazy(() =>\n  import(\"./markdown-stream-runtime\").then((module) => ({ default: module.MarkdownStreamRuntime })),\n)\n\n/**\n * Renders markdown, resolving the pipeline on first render.\n *\n * A drop-in replacement for `<Streamdown …>`: every prop is forwarded unchanged, so call sites keep\n * their `components` overrides, their `parseIncompleteMarkdown` streaming flag and their class\n * names exactly as before. The one prop that gains a DEFAULT is `mermaid` — see\n * `MermaidSourceFallback` above; passing `mermaid` explicitly overrides it.\n */\nexport function MarkdownStream({ mermaid = MERMAID_OPTIONS, ...props }: MarkdownStreamProps): React.JSX.Element {\n  return (\n    <LazyDoorErrorBoundary doorName=\"MarkdownStream\" fallback={<MarkdownSourceFallback>{props.children}</MarkdownSourceFallback>}>\n      <React.Suspense\n        fallback={\n          <div className=\"space-y-2\" aria-busy=\"true\">\n            <Skeleton className=\"h-4 w-full\" />\n            <Skeleton className=\"h-4 w-11/12\" />\n            <Skeleton className=\"h-4 w-4/6\" />\n          </div>\n        }\n      >\n        <LazyStreamdown mermaid={mermaid} {...props} />\n      </React.Suspense>\n    </LazyDoorErrorBoundary>\n  )\n}\n"]}

package/dist/esm/components/data-display/notification-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/notification-indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,0BAA0B,EAAyB,MAAM,6BAA6B,CAAA;AA2BpG,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAa,EACb,KAAK,EACL,SAAS,GACV,EAAE,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA0BvD"}
+{"version":3,"file":"notification-indicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/notification-indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAA;AAkB7E,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAa,EACb,KAAK,EACL,SAAS,GACV,EAAE,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA0BvD"}

package/dist/esm/components/data-display/notification-indicator.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { IndicatorVariant, UIBehavior } from "@wildo-ai/presets-components-models";
+import { UIBehavior } from "@wildo-ai/presets-components-models";
 import { NotificationBadgeDisplayMode } from "@wildo-ai/saas-models";
-import { cn, useUI, Badge, formatBadgeCount } from "@wildo-ai/saas-frontend-lib";
+import { cn, useUI, Badge, formatBadgeCount, indicatorBadgeVariant } from "@wildo-ai/saas-frontend-lib";
 /**
  * DEFAULT preset for `LOW_LEVEL_NOTIFICATION_INDICATOR` (R4). Composes the
  * design-system `Badge`:
@@ -15,14 +15,6 @@ import { cn, useUI, Badge, formatBadgeCount } from "@wildo-ai/saas-frontend-lib"
  * a reduced-motion-safe default). The DEFINITION decides whether/when to pulse;
  * the theme decides how it looks.
  */
-/** IndicatorVariant (definition tone) → Badge public variant. */
-const TONE_TO_VARIANT = {
-    [IndicatorVariant.NEUTRAL]: "default",
-    [IndicatorVariant.INFO]: "info",
-    [IndicatorVariant.SUCCESS]: "success",
-    [IndicatorVariant.WARNING]: "warning",
-    [IndicatorVariant.ERROR]: "destructive",
-};
 /** Framework fallback when a theme's INDICATOR recipe declares no `motion.attention`. */
 const DEFAULT_ATTENTION = "animate-pulse motion-reduce:animate-none";
 export function NotificationIndicator({ mode, tone, count, pulse = false, label, className, }) {
@@ -31,7 +23,7 @@ export function NotificationIndicator({ mode, tone, count, pulse = false, label,
     if (mode === NotificationBadgeDisplayMode.NONE || count <= 0) {
         return null;
     }
-    const variant = TONE_TO_VARIANT[tone];
+    const variant = indicatorBadgeVariant(tone);
     const attention = pulse
         ? (getRecipe(UIBehavior.INDICATOR, tone).motion.attention ?? DEFAULT_ATTENTION)
         : undefined;

package/dist/esm/components/data-display/notification-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-indicator.js","sourceRoot":"","sources":["../../../../../src/components/data-display/notification-indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAClF,OAAO,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAGhF;;;;;;;;;;;GAWG;AAEH,iEAAiE;AACjE,MAAM,eAAe,GAAoD;IACvE,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,SAAS;IACrC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM;IAC/B,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,SAAS;IACrC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,SAAS;IACrC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,aAAa;CACxC,CAAA;AAED,yFAAyF;AACzF,MAAM,iBAAiB,GAAG,0CAA0C,CAAA;AAEpE,MAAM,UAAU,qBAAqB,CAAC,EACpC,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,KAAK,EACb,KAAK,EACL,SAAS,GACkB;IAC3B,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAE7B,4EAA4E;IAC5E,IAAI,IAAI,KAAK,4BAA4B,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IACrC,MAAM,SAAS,GAAG,KAAK;QACrB,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,IAAI,iBAAiB,CAAC;QAC/E,CAAC,CAAC,SAAS,CAAA;IAEb,IAAI,IAAI,KAAK,4BAA4B,CAAC,GAAG,EAAE,CAAC;QAC9C,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,EAAE,SAAS,CAAC,YACxG,eAAM,SAAS,EAAC,SAAS,YAAE,KAAK,GAAQ,GAClC,CACT,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,eAAY,QAAQ,gBAAa,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,YAC/F,gBAAgB,CAAC,KAAK,CAAC,GAClB,CACT,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { IndicatorVariant, UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport { NotificationBadgeDisplayMode } from \"@wildo-ai/saas-models\"\nimport { cn, useUI, Badge, formatBadgeCount } from \"@wildo-ai/saas-frontend-lib\"\nimport type { NotificationIndicatorProps, BadgeVariants_Variant } from \"@wildo-ai/saas-frontend-lib\"\n\n/**\n * DEFAULT preset for `LOW_LEVEL_NOTIFICATION_INDICATOR` (R4). Composes the\n * design-system `Badge`:\n * - `NONE`, or a non-positive count → renders nothing (a dot means \"≥ 1\").\n * - `DOT` → a color signal dot (the enum-icon fallback pattern), label in `sr-only`.\n * - `COUNT` → the truncated number, announced via `aria-live`.\n *\n * Pulse is THEME-OWNED: when `pulse` is true we append the active theme's\n * `INDICATOR` recipe `motion.attention` (a theme may customize it; falls back to\n * a reduced-motion-safe default). The DEFINITION decides whether/when to pulse;\n * the theme decides how it looks.\n */\n\n/** IndicatorVariant (definition tone) → Badge public variant. */\nconst TONE_TO_VARIANT: Record<IndicatorVariant, BadgeVariants_Variant> = {\n  [IndicatorVariant.NEUTRAL]: \"default\",\n  [IndicatorVariant.INFO]: \"info\",\n  [IndicatorVariant.SUCCESS]: \"success\",\n  [IndicatorVariant.WARNING]: \"warning\",\n  [IndicatorVariant.ERROR]: \"destructive\",\n}\n\n/** Framework fallback when a theme's INDICATOR recipe declares no `motion.attention`. */\nconst DEFAULT_ATTENTION = \"animate-pulse motion-reduce:animate-none\"\n\nexport function NotificationIndicator({\n  mode,\n  tone,\n  count,\n  pulse = false,\n  label,\n  className,\n}: NotificationIndicatorProps): React.JSX.Element | null {\n  const { getRecipe } = useUI()\n\n  // A dot/count only makes sense for a positive count; NONE is always silent.\n  if (mode === NotificationBadgeDisplayMode.NONE || count <= 0) {\n    return null\n  }\n\n  const variant = TONE_TO_VARIANT[tone]\n  const attention = pulse\n    ? (getRecipe(UIBehavior.INDICATOR, tone).motion.attention ?? DEFAULT_ATTENTION)\n    : undefined\n\n  if (mode === NotificationBadgeDisplayMode.DOT) {\n    return (\n      <Badge variant={variant} title={label} className={cn(\"h-2.5 w-2.5 rounded-full p-0\", attention, className)}>\n        <span className=\"sr-only\">{label}</span>\n      </Badge>\n    )\n  }\n\n  return (\n    <Badge variant={variant} aria-live=\"polite\" aria-label={label} className={cn(attention, className)}>\n      {formatBadgeCount(count)}\n    </Badge>\n  )\n}\n"]}
+{"version":3,"file":"notification-indicator.js","sourceRoot":"","sources":["../../../../../src/components/data-display/notification-indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAChE,OAAO,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAGvG;;;;;;;;;;;GAWG;AAEH,yFAAyF;AACzF,MAAM,iBAAiB,GAAG,0CAA0C,CAAA;AAEpE,MAAM,UAAU,qBAAqB,CAAC,EACpC,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,KAAK,EACb,KAAK,EACL,SAAS,GACkB;IAC3B,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAE7B,4EAA4E;IAC5E,IAAI,IAAI,KAAK,4BAA4B,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,OAAO,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;IAC3C,MAAM,SAAS,GAAG,KAAK;QACrB,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,IAAI,iBAAiB,CAAC;QAC/E,CAAC,CAAC,SAAS,CAAA;IAEb,IAAI,IAAI,KAAK,4BAA4B,CAAC,GAAG,EAAE,CAAC;QAC9C,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,EAAE,SAAS,CAAC,YACxG,eAAM,SAAS,EAAC,SAAS,YAAE,KAAK,GAAQ,GAClC,CACT,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,eAAY,QAAQ,gBAAa,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,YAC/F,gBAAgB,CAAC,KAAK,CAAC,GAClB,CACT,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport { NotificationBadgeDisplayMode } from \"@wildo-ai/saas-models\"\nimport { cn, useUI, Badge, formatBadgeCount, indicatorBadgeVariant } from \"@wildo-ai/saas-frontend-lib\"\nimport type { NotificationIndicatorProps } from \"@wildo-ai/saas-frontend-lib\"\n\n/**\n * DEFAULT preset for `LOW_LEVEL_NOTIFICATION_INDICATOR` (R4). Composes the\n * design-system `Badge`:\n * - `NONE`, or a non-positive count → renders nothing (a dot means \"≥ 1\").\n * - `DOT` → a color signal dot (the enum-icon fallback pattern), label in `sr-only`.\n * - `COUNT` → the truncated number, announced via `aria-live`.\n *\n * Pulse is THEME-OWNED: when `pulse` is true we append the active theme's\n * `INDICATOR` recipe `motion.attention` (a theme may customize it; falls back to\n * a reduced-motion-safe default). The DEFINITION decides whether/when to pulse;\n * the theme decides how it looks.\n */\n\n/** Framework fallback when a theme's INDICATOR recipe declares no `motion.attention`. */\nconst DEFAULT_ATTENTION = \"animate-pulse motion-reduce:animate-none\"\n\nexport function NotificationIndicator({\n  mode,\n  tone,\n  count,\n  pulse = false,\n  label,\n  className,\n}: NotificationIndicatorProps): React.JSX.Element | null {\n  const { getRecipe } = useUI()\n\n  // A dot/count only makes sense for a positive count; NONE is always silent.\n  if (mode === NotificationBadgeDisplayMode.NONE || count <= 0) {\n    return null\n  }\n\n  const variant = indicatorBadgeVariant(tone)\n  const attention = pulse\n    ? (getRecipe(UIBehavior.INDICATOR, tone).motion.attention ?? DEFAULT_ATTENTION)\n    : undefined\n\n  if (mode === NotificationBadgeDisplayMode.DOT) {\n    return (\n      <Badge variant={variant} title={label} className={cn(\"h-2.5 w-2.5 rounded-full p-0\", attention, className)}>\n        <span className=\"sr-only\">{label}</span>\n      </Badge>\n    )\n  }\n\n  return (\n    <Badge variant={variant} aria-live=\"polite\" aria-label={label} className={cn(attention, className)}>\n      {formatBadgeCount(count)}\n    </Badge>\n  )\n}\n"]}

package/dist/esm/components/data-display/notification-indicator.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-indicator.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/notification-indicator.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAO/H,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"notification-indicator.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/notification-indicator.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAO/H,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/data-display/pdf-viewer/pdf-viewer-worker.d.ts

@@ -0,0 +1,63 @@
+/**
+ * The PDF.js worker SEAM (issue #962) — how a host decides where the viewer's Web Worker comes from.
+ *
+ * `pdf-viewer.tsx` parses on a Web Worker and installs ONE port for the whole module
+ * (`GlobalWorkerOptions.workerPort`). By default that port is built by the Vite path in
+ * `pdf-viewer-worker.vite.ts`, which is what the generated application runs. Two consumers this
+ * framework also produces cannot use that default:
+ *
+ *  - a NON-VITE bundler (the Docusaurus technical documentation is webpack) does not understand the
+ *    `?worker` asset suffix, so it must supply the worker itself;
+ *  - an application whose ASSETS ARE SERVED FROM ANOTHER ORIGIN (the opt-in CDN publish) gets a
+ *    cross-origin worker URL, which `new Worker(url)` refuses outright.
+ *
+ * Both register a factory here BEFORE the viewer's chunk loads (any time before the first document
+ * renders — the port is installed lazily on first use). The factory takes precedence over the Vite
+ * default, and the default's module is then never imported, which is what keeps the `?worker` import
+ * out of a non-Vite bundler's graph.
+ *
+ * This module is deliberately LIGHT: no `pdfjs-dist`, no worker, nothing heavy. It lives outside the
+ * lazy boundary so a host can call it from its bootstrap.
+ *
+ * ## The cross-origin case, and its CSP consequence
+ *
+ * A browser only constructs a Worker from a SAME-ORIGIN script URL. When the bundle (and so the worker
+ * file) is served from a CDN, the answer is a same-origin `blob:` shim whose single statement is
+ * `import "<cdn worker url>"` — `createSameOriginModuleWorker` builds exactly that, and
+ * `createModuleWorkerForUrl` picks it only when the URL's origin differs from the page's. The shim needs
+ * the policy to admit it: `worker-src` (falling back through `child-src` to `script-src`) must include
+ * `blob:`, and `script-src` must already admit the CDN origin for the import inside the shim to load —
+ * which a CDN publish's policy does, since every script comes from there. The `SAAS_APP` CSP baseline
+ * sets no `worker-src`; a CDN deployment adds `worker-src 'self' blob:` (the documentation product's
+ * baseline already carries that pair for its own reasons).
+ *
+ * Under Vite the worker URL is obtained with the `?worker&url` suffix on `pdfjs-dist/build/pdf.worker.min.mjs`,
+ * which names the BUILT worker file; under webpack, `new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url)`
+ * resolves through the bundler (it is Vite that does not resolve a bare specifier there — recorded in
+ * `pdf-viewer-worker.vite.ts`).
+ */
+/** Builds the Worker that PDF.js will parse on. Called at most once per page lifetime. */
+export type PdfViewerWorkerFactory = () => Worker;
+/**
+ * Register how the PDF viewer's worker is built, replacing the Vite default. Pass `null` to return
+ * to the default. Must run before the first document renders: the port is installed once, on first
+ * use, and a factory registered after that is not consulted (the viewer says so in its log).
+ */
+export declare function configurePdfViewerWorker(factory: PdfViewerWorkerFactory | null): void;
+/** The registered factory, or `null` when the Vite default applies. */
+export declare function resolveConfiguredPdfViewerWorkerFactory(): PdfViewerWorkerFactory | null;
+/**
+ * A same-origin MODULE worker for a worker script served from another origin: a `blob:` script whose
+ * only statement imports the real one. The blob URL is kept for the page's lifetime — a module
+ * worker fetches its script asynchronously, and revoking the URL before that fetch completes would
+ * hand the worker a dead URL (which reads as "the worker never answered", the same silent shape as
+ * a classic-vs-module mismatch).
+ */
+export declare function createSameOriginModuleWorker(workerScriptUrl: string): Worker;
+/**
+ * A module worker for `workerScriptUrl`: constructed directly when the script is same-origin with the
+ * page, through the `blob:` shim when it is not. `pageOrigin` defaults to the page's own; a host that
+ * knows better (a test, a non-browser runtime) passes it.
+ */
+export declare function createModuleWorkerForUrl(workerScriptUrl: string, pageOrigin?: string | null): Worker;
+//# sourceMappingURL=pdf-viewer-worker.d.ts.map

package/dist/esm/components/data-display/pdf-viewer/pdf-viewer-worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdf-viewer-worker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/data-display/pdf-viewer/pdf-viewer-worker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,0FAA0F;AAC1F,MAAM,MAAM,sBAAsB,GAAG,MAAM,MAAM,CAAA;AAIjD;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,sBAAsB,GAAG,IAAI,GAAG,IAAI,CAErF;AAED,uEAAuE;AACvE,wBAAgB,uCAAuC,IAAI,sBAAsB,GAAG,IAAI,CAEvF;AAED;;;;;;GAMG;AACH,wBAAgB,4BAA4B,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,eAAe,EAAE,MAAM,EAAE,UAAU,GAAE,MAAM,GAAG,IAA0C,GAAG,MAAM,CAMzI"}