@sybilion/uilib 1.3.15 → 1.3.17

package/dist/esm/components/ui/Chat/Chat.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Chat_root__IWt99{background-color:var(--background);display:flex;flex-direction:column;height:100%;min-height:0}.Chat_header__ZjwP-{align-items:center;display:flex;flex-shrink:0;min-height:64px;padding:var(--p-2) var(--p-6) 0}.Chat_isEmpty__b4ViB{padding-bottom:170px}";
+var css_248z = ".Chat_root__IWt99{background-color:var(--background);display:flex;flex-direction:column;height:100%;min-height:0}.Chat_header__ZjwP-{align-items:center;display:flex;flex-shrink:0;min-height:64px;padding:var(--p-2) var(--p-6) 0;padding-right:var(--p-12)}.Chat_isEmpty__b4ViB{padding-bottom:170px}";
 var S = {"root":"Chat_root__IWt99","header":"Chat_header__ZjwP-","isEmpty":"Chat_isEmpty__b4ViB"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { shouldRenderAutolinkPill, AutolinkUrl } from '../../InteractiveContent/AutolinkUrl.js';
 import logger from '../../../../lib/logger.js';
 import S from './ChatMessage.styl.js';
+import S$1 from '../../InteractiveContent/InteractiveContent.styl.js';
 
 const injectHeaders = (content) => {
     // Match #, ##, ###, or #### headers at start of line
@@ -320,7 +322,7 @@ const injectMarkdownLink = (content) => {
     const { target, rel } = linkTargetRelForHref(href, undefined);
     const label = matches[1];
     return {
-        elem: (jsx("a", { href: href, target: target, rel: rel, children: runFormattingPipeline(label, linkLabelInjectors) })),
+        elem: shouldRenderAutolinkPill(label, href) ? (jsx(AutolinkUrl, { href: href, display: label, target: target, rel: rel })) : (jsx("a", { href: href, target: target, rel: rel, className: S$1.textLink, children: runFormattingPipeline(label, linkLabelInjectors) })),
         index: matches.index,
         length: matches[0].length,
     };
@@ -366,7 +368,7 @@ const injectAutolinkUrl = (content) => {
     }
     const { target, rel } = linkTargetRelForHref(c.href, undefined);
     return {
-        elem: (jsx("a", { href: c.href, target: target, rel: rel, children: c.display })),
+        elem: (jsx(AutolinkUrl, { href: c.href, display: c.display, target: target, rel: rel })),
         index: c.index,
         length: c.length,
     };
@@ -393,8 +395,9 @@ const injectAnchor = (content) => {
         return null;
     }
     const { target, rel } = linkTargetRelForHref(href, targetRaw || undefined);
+    const innerTrimmed = inner.trim();
     return {
-        elem: (jsx("a", { href: href, target: target, rel: rel, children: runFormattingPipeline(inner, linkLabelInjectors) })),
+        elem: shouldRenderAutolinkPill(innerTrimmed, href) ? (jsx(AutolinkUrl, { href: href, display: innerTrimmed, target: target, rel: rel })) : (jsx("a", { href: href, target: target, rel: rel, className: S$1.textLink, children: runFormattingPipeline(inner, linkLabelInjectors) })),
         index: matches.index,
         length: matches[0].length,
     };

package/dist/esm/components/ui/Chat/ChatMessage/AgentMessageContent.js

@@ -2,10 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { Button } from '../../Button/Button.js';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
+import { Presentation } from 'lucide-react';
+import '../../InteractiveContent/InteractiveContent.styl.js';
 import { parseDatasetAppToken } from '../../../../utils/datasetApplicationLink.js';
 import { Scroll } from '@homecode/ui';
 import { PaperPlaneRightIcon } from '@phosphor-icons/react';
-import { Presentation } from 'lucide-react';
 import { convertMarkdownTableToHTML } from './AgentMessageContent.helpers.js';
 import { ChatDatasetApplicationLink } from './ChatDatasetApplicationLink.js';
 import S from './ChatMessage.styl.js';

package/dist/esm/components/ui/Chat/ChatMessage/ChatMessage.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
+import 'lucide-react';
+import '../../InteractiveContent/InteractiveContent.styl.js';
 import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments.js';

package/dist/esm/components/ui/Chat/ChatMessage/ChatMessage.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-6)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content}.ChatMessage_role-user__u4JPV{align-items:flex-end}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-slate-100);border-radius:var(--p-4);border-bottom-right-radius:0;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-gray-800)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);font-size:var(--text-xs);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
+var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-6)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;min-width:0;overflow-wrap:anywhere;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content;word-break:break-word}.ChatMessage_role-user__u4JPV{align-items:flex-end;max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-slate-100);border-radius:var(--p-4);border-bottom-right-radius:0;box-sizing:border-box;overflow:hidden;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-gray-800)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);font-size:var(--text-xs);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
 var S = {"root":"ChatMessage_root__6rnsF","text":"ChatMessage_text__Y1XNR","role-user":"ChatMessage_role-user__u4JPV","userColumn":"ChatMessage_userColumn__cQM6-","role-system":"ChatMessage_role-system__g13OP","role-assistant":"ChatMessage_role-assistant__wketE","bullet":"ChatMessage_bullet__6vAhq","scrollHorizontal":"ChatMessage_scrollHorizontal__Rms9n","datasetAppLink":"ChatMessage_datasetAppLink__Pxy-T","datasetAppLinkLabel":"ChatMessage_datasetAppLinkLabel__PMU7e","quickReplyWrap":"ChatMessage_quickReplyWrap__1UFyD","downloadButtons":"ChatMessage_downloadButtons__RygM-","downloadCard":"ChatMessage_downloadCard__NsNRa","downloadCardIcon":"ChatMessage_downloadCardIcon__jkxDJ","downloadCardContent":"ChatMessage_downloadCardContent__PTPwz","downloadCardTitle":"ChatMessage_downloadCardTitle__K1wqr","downloadCardSubtitle":"ChatMessage_downloadCardSubtitle__fVeF2"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.js

@@ -1,10 +1,10 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useState, useCallback, useEffect } from 'react';
 import { useIsTouchDevice } from '../../../hooks/useIsTouchDevice.js';
 import S from './InteractionOverlay.styl.js';
 
-function InteractionOverlay({ className, children, }) {
+function InteractionOverlay({ className, children, message = 'Touch to interact', }) {
     const isTouchDevice = useIsTouchDevice();
     const [isVisible, setIsVisible] = useState(true);
     const handleClick = useCallback(() => {
@@ -29,7 +29,7 @@ function InteractionOverlay({ className, children, }) {
     if (!isTouchDevice) {
         return jsx(Fragment, { children: children });
     }
-    return (jsx("div", { className: cn(S.root, !isVisible && S.hidden, className), onClick: handleClick, children: children }));
+    return (jsxs("div", { className: cn(S.root, !isVisible && S.hidden, className), children: [children, jsx("button", { type: "button", className: S.overlay, onClick: handleClick, "aria-label": message, children: jsx("span", { className: S.message, children: message }) })] }));
 }
 
 export { InteractionOverlay };

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".InteractionOverlay_root__9FV58{inset:0;opacity:.7;pointer-events:auto;position:relative;transition:opacity .2s ease-out}.InteractionOverlay_root__9FV58:after{content:\"\";height:100%;inset:0;position:absolute;touch-action:manipulation;width:100%;z-index:4}.InteractionOverlay_root__9FV58.InteractionOverlay_hidden__NRlgG{opacity:1;pointer-events:none}";
-var S = {"root":"InteractionOverlay_root__9FV58","hidden":"InteractionOverlay_hidden__NRlgG"};
+var css_248z = ".InteractionOverlay_root__9FV58{position:relative}.InteractionOverlay_overlay__Nwawr{background:transparent;border:none;box-shadow:inset 0 0 80px 40px var(--overlay-background-color);cursor:pointer;inset:0;margin:0;padding:0;position:absolute;touch-action:manipulation;transition:box-shadow .2s ease-out;z-index:4}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr{box-shadow:inset 0 0 0 0 var(--overlay-background-color);pointer-events:none}.InteractionOverlay_message__oCuPR{backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--overlay-background-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);border-radius:9999px;box-shadow:0 0 24px 10px var(--overlay-background-color),0 0 0 1px color-mix(in srgb,var(--overlay-background-color) 40%,transparent);color:var(--foreground);font-size:.875rem;font-weight:500;left:50%;line-height:1.25;padding:var(--p-3) var(--p-5);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.2s ease-out;transition-property:transform,opacity;white-space:nowrap;z-index:1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_message__oCuPR{opacity:0;transform:translate(-50%,-50%) scale(.3)}:root{--overlay-background-color:var(--page-color)}";
+var S = {"root":"InteractionOverlay_root__9FV58","overlay":"InteractionOverlay_overlay__Nwawr","hidden":"InteractionOverlay_hidden__NRlgG","message":"InteractionOverlay_message__oCuPR"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/InteractiveContent/AutolinkUrl.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LinkIcon } from 'lucide-react';
+import S from './InteractiveContent.styl.js';
+
+function displayUrlForAutolink(display) {
+    if (display.startsWith('https://'))
+        return display.slice(8);
+    if (display.startsWith('http://'))
+        return display.slice(7);
+    return display;
+}
+function shouldRenderAutolinkPill(label, href) {
+    const normalizedLabel = label.trim();
+    const normalizedHref = href.trim();
+    if (!normalizedLabel || !normalizedHref)
+        return false;
+    const labelAsHref = normalizeWwwToHttps(normalizedLabel);
+    if (labelAsHref === normalizedHref)
+        return true;
+    return (/^https?:\/\//i.test(normalizedLabel) ||
+        /^www\./i.test(normalizedLabel) ||
+        normalizedLabel === displayUrlForAutolink(normalizedHref));
+}
+const normalizeWwwToHttps = (raw) => {
+    const t = raw.trim();
+    if (/^www\./i.test(t))
+        return `https://${t}`;
+    return t;
+};
+function AutolinkUrl({ href, display, target, rel }) {
+    return (jsxs("a", { href: href, target: target, rel: rel, className: S.autolinkUrl, children: [jsx(LinkIcon, { size: 12, "aria-hidden": true, className: S.autolinkUrlIcon }), jsx("span", { className: S.autolinkUrlLabel, title: displayUrlForAutolink(display), children: displayUrlForAutolink(display) })] }));
+}
+
+export { AutolinkUrl, S as autolinkStyles, displayUrlForAutolink, shouldRenderAutolinkPill };

package/dist/esm/components/ui/InteractiveContent/InteractiveContent.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".InteractiveContent_root__FHnlY strong{font-weight:600}.InteractiveContent_root__FHnlY em{font-style:italic}.InteractiveContent_root__FHnlY a{color:var(--sb-green-600);text-decoration:underline;text-underline-offset:2px}.InteractiveContent_root__FHnlY a:hover{color:var(--sb-green-700)}.dark .InteractiveContent_root__FHnlY a{color:var(--sb-green-400)}.dark .InteractiveContent_root__FHnlY a:hover{color:var(--sb-green-300)}";
-var S = {"root":"InteractiveContent_root__FHnlY"};
+var css_248z = ".InteractiveContent_root__FHnlY{box-sizing:border-box;display:inline-block;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.InteractiveContent_root__FHnlY strong{font-weight:600}.InteractiveContent_root__FHnlY em{font-style:italic}.InteractiveContent_textLink__Ubh4i{color:var(--sb-green-600);text-decoration:underline;text-underline-offset:2px}.InteractiveContent_textLink__Ubh4i:hover{color:var(--sb-green-700)}.dark .InteractiveContent_textLink__Ubh4i{color:var(--sb-green-400)}.dark .InteractiveContent_textLink__Ubh4i:hover{color:var(--sb-green-300)}.InteractiveContent_autolinkUrl__W0tQH{align-items:center;border-radius:var(--p-2);box-sizing:border-box;color:var(--link-color);display:inline-flex;font-size:var(--text-xs);gap:6px;line-height:1.4;margin:0 1px;max-width:100%;padding:2px 8px 2px 6px;position:relative;text-decoration:none;vertical-align:middle}.InteractiveContent_autolinkUrl__W0tQH:before{background-color:var(--link-color);border-radius:inherit;content:\"\";display:inline-block;height:100%;left:0;opacity:.1;position:absolute;top:0;width:100%}.InteractiveContent_autolinkUrl__W0tQH:hover:before{opacity:.2}.InteractiveContent_autolinkUrlIcon__QoqlQ{flex-shrink:0}.InteractiveContent_autolinkUrlLabel__CcJOG{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+var S = {"root":"InteractiveContent_root__FHnlY","textLink":"InteractiveContent_textLink__Ubh4i","autolinkUrl":"InteractiveContent_autolinkUrl__W0tQH","autolinkUrlIcon":"InteractiveContent_autolinkUrlIcon__QoqlQ","autolinkUrlLabel":"InteractiveContent_autolinkUrlLabel__CcJOG"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Logo/Logo.js

@@ -1,15 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import S from './Logo.styl.js';
+import LogoMarkSvg from './logo.svg.js';
 
-/**
- * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
- * to `public/logo.svg` (Sybilion app template README documents postinstall copies).
- * Same path as the favicon `<link href>`.
- */
-const SYBILION_STANDALONE_LOGO_PUBLIC_URL = '/logo.svg';
 function Logo({ showText = true, size = 'md', className, ...props }) {
-    return (jsxs("div", { className: cn(S.root, S[size], className), ...props, children: [jsx("img", { src: SYBILION_STANDALONE_LOGO_PUBLIC_URL, alt: showText ? '' : 'Sybilion', className: S.icon, ...(showText ? { 'aria-hidden': true } : {}) }), showText && jsx("span", { className: S.text, children: "Sybilion" })] }));
+    return (jsxs("div", { className: cn(S.root, S[size], className), ...props, children: [jsx(LogoMarkSvg, { className: S.icon, ...(showText
+                    ? { 'aria-hidden': true }
+                    : { 'aria-label': 'Sybilion', role: 'img' }) }), showText && jsx("span", { className: S.text, children: "Sybilion" })] }));
 }
 
-export { Logo, SYBILION_STANDALONE_LOGO_PUBLIC_URL };
+export { Logo, LogoMarkSvg as LogoMark };

package/dist/esm/components/ui/Logo/logo.svg.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgLogo = function SvgLogo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "#C259FF",
+    d: "M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z",
+    style: {
+      strokeWidth: 0.13252
+    }
+  }));
+};
+var LogoMarkSvg = SvgLogo;
+
+export { LogoMarkSvg as default };

package/dist/esm/index.js

@@ -47,6 +47,7 @@ export { Image } from './components/ui/Image/Image.js';
 export { ImageWithFallback } from './components/ui/ImageWithFallback/ImageWithFallback.js';
 export { Input } from './components/ui/Input/Input.js';
 export { InteractiveContent } from './components/ui/InteractiveContent/InteractiveContent.js';
+export { AutolinkUrl, displayUrlForAutolink } from './components/ui/InteractiveContent/AutolinkUrl.js';
 export { Label } from './components/ui/Label/Label.js';
 export { LabeledInput } from './components/ui/LabeledInput/LabeledInput.js';
 export { AltKeyProvider } from './components/ui/LabelWithId/AltKeyProvider.js';
@@ -118,3 +119,4 @@ export { ChartTooltipContent } from './components/ui/Chart/components/ChartToolt
 export { ChartLegendContent } from './components/ui/Chart/components/ChartLegendContent.js';
 export { BaseChartWrapper } from './components/ui/Chart/components/BaseChartWrapper.js';
 export { default as DialogStyles } from './components/ui/Dialog/Dialog.styl.js';
+export { default as LogoMark } from './components/ui/Logo/logo.svg.js';

package/dist/esm/types/src/components/ui/InteractionOverlay/InteractionOverlay.d.ts

@@ -1,6 +1,7 @@
 interface InteractionOverlayProps {
     className?: string;
     children?: React.ReactNode;
+    message?: string;
 }
-export declare function InteractionOverlay({ className, children, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function InteractionOverlay({ className, children, message, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/ui/InteractiveContent/AutolinkUrl.d.ts

@@ -0,0 +1,11 @@
+import S from './InteractiveContent.styl';
+type AutolinkUrlProps = {
+    href: string;
+    display: string;
+    target?: string;
+    rel?: string;
+};
+export declare function displayUrlForAutolink(display: string): string;
+export declare function shouldRenderAutolinkPill(label: string, href: string): boolean;
+export declare function AutolinkUrl({ href, display, target, rel }: AutolinkUrlProps): import("react/jsx-runtime").JSX.Element;
+export { S as autolinkStyles };

package/dist/esm/types/src/components/ui/InteractiveContent/index.d.ts

@@ -1 +1,2 @@
 export { InteractiveContent } from './InteractiveContent';
+export { AutolinkUrl, displayUrlForAutolink } from './AutolinkUrl';

package/dist/esm/types/src/components/ui/Logo/Logo.d.ts

@@ -1,7 +1,9 @@
 import type { LogoProps } from './Logo.types';
+import LogoMarkSvg from './logo.svg';
+export { LogoMarkSvg as LogoMark };
 /**
- * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
- * to `public/logo.svg` (Sybilion app template README documents postinstall copies).
+ * Public URL for standalone apps. Copy `@sybilion/uilib/logo.svg` (Logo component asset)
+ * to `public/logo.svg` (app template README documents postinstall copies).
  * Same path as the favicon `<link href>`.
  */
 export declare const SYBILION_STANDALONE_LOGO_PUBLIC_URL: "/logo.svg";

package/dist/esm/types/src/components/ui/Logo/index.d.ts

@@ -1,2 +1,2 @@
-export { Logo } from './Logo';
+export { Logo, LogoMark } from './Logo';
 export type { LogoProps, LogoSize } from './Logo.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.15",
+  "version": "1.3.17",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -35,7 +35,7 @@
       "default": "./dist/esm/hooks/index.js"
     },
     "./src/*": "./src/*",
-    "./logo.svg": "./src/assets/logo.svg"
+    "./logo.svg": "./src/components/ui/Logo/logo.svg"
   },
   "files": [
     "assets",
@@ -52,6 +52,7 @@
     "tests:watch": "jest --watch",
     "ts": "tsc --noEmit",
     "dev": "NODE_OPTIONS='--loader ts-node/esm' NODE_ENV=development webpack-dev-server --mode=development --config ./src/docs/config/webpack.config.js --progress",
+    "prebuild": "cp src/components/ui/Logo/logo.svg assets/logo.svg",
     "build": "rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript",
     "build:watch": "yarn build --watch",
     "build:compress": "COMPRESS=true yarn build",

package/src/components/ui/Chat/Chat.styl

@@ -12,6 +12,7 @@
   align-items center
   min-height 64px
   padding var(--p-2) var(--p-6) 0
+  padding-right var(--p-12) // to not overlap with ChatSheet close button
 
 .isEmpty
   padding-bottom 170px // goes under prompt

package/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
 
+import {
+  AutolinkUrl,
+  autolinkStyles,
+  shouldRenderAutolinkPill,
+} from '#uilib/components/ui/InteractiveContent/AutolinkUrl';
 import logger from '#uilib/lib/logger';
 
 import S from './ChatMessage.styl';
@@ -397,8 +402,15 @@ const injectMarkdownLink: Injector = (content: string) => {
   const label = matches[1];
 
   return {
-    elem: (
-      <a href={href} target={target} rel={rel}>
+    elem: shouldRenderAutolinkPill(label, href) ? (
+      <AutolinkUrl href={href} display={label} target={target} rel={rel} />
+    ) : (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className={autolinkStyles.textLink}
+      >
         {runFormattingPipeline(label, linkLabelInjectors)}
       </a>
     ),
@@ -459,9 +471,12 @@ const injectAutolinkUrl: Injector = (content: string) => {
 
   return {
     elem: (
-      <a href={c.href} target={target} rel={rel}>
-        {c.display}
-      </a>
+      <AutolinkUrl
+        href={c.href}
+        display={c.display}
+        target={target}
+        rel={rel}
+      />
     ),
     index: c.index,
     length: c.length,
@@ -500,10 +515,23 @@ const injectAnchor: Injector = (content: string) => {
   }
 
   const { target, rel } = linkTargetRelForHref(href, targetRaw || undefined);
+  const innerTrimmed = inner.trim();
 
   return {
-    elem: (
-      <a href={href} target={target} rel={rel}>
+    elem: shouldRenderAutolinkPill(innerTrimmed, href) ? (
+      <AutolinkUrl
+        href={href}
+        display={innerTrimmed}
+        target={target}
+        rel={rel}
+      />
+    ) : (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className={autolinkStyles.textLink}
+      >
         {runFormattingPipeline(inner, linkLabelInjectors)}
       </a>
     ),

package/src/components/ui/Chat/ChatMessage/ChatMessage.styl

@@ -8,13 +8,18 @@
 
 .text
   max-width 100%
+  min-width 0
   font-size var(--text-sm)
   color var(--text-secondary)
   width fit-content
   user-select text
+  overflow-wrap anywhere
+  word-break break-word
 
 .role-user
   align-items flex-end
+  max-width 100%
+  min-width 0
 
   .userColumn
     display flex
@@ -22,6 +27,7 @@
     align-items flex-end
     gap var(--p-2)
     max-width 100%
+    min-width 0
 
   .text
     padding var(--p-3) var(--p-4)
@@ -31,6 +37,8 @@
     border-bottom-right-radius 0
 
     white-space pre-wrap
+    overflow hidden
+    box-sizing border-box
 
     :global(.dark) &
       background-color var(--sb-gray-800)

package/src/components/ui/InteractionOverlay/InteractionOverlay.styl

@@ -1,19 +1,50 @@
 .root
   position relative
-  inset 0
-  opacity 0.7
-  transition opacity 200ms ease-out
-  pointer-events auto
 
-  &::after
-    content ''
-    position absolute
-    inset 0
-    width 100%
-    height 100%
-    z-index 4
-    touch-action manipulation
+.overlay
+  position absolute
+  inset 0
+  z-index 4
+  border none
+  padding 0
+  margin 0
+  cursor pointer
+  touch-action manipulation
+  background transparent
+  box-shadow inset 0 0 80px 40px var(--overlay-background-color)
+  transition box-shadow 200ms ease-out
 
-  &.hidden
-    opacity 1
+  .hidden &
+    box-shadow inset 0 0 0 0 var(--overlay-background-color)
     pointer-events none
+
+.message
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  pointer-events none
+  z-index 1
+  font-size 0.875rem
+  font-weight 500
+  line-height 1.25
+  color var(--foreground)
+  white-space nowrap
+  padding var(--p-3) var(--p-5)
+  border-radius 9999px
+  border 1px solid unquote('color-mix(in srgb, var(--foreground) 14%, transparent)')
+  background-color unquote('color-mix(in srgb, var(--overlay-background-color) 20%, transparent)')
+  backdrop-filter blur(10px)
+  box-shadow \
+    0 0 24px 10px var(--overlay-background-color), \
+    0 0 0 1px unquote('color-mix(in srgb, var(--overlay-background-color) 40%, transparent)')
+  transition 200ms ease-out
+  transition-property transform, opacity
+
+  .hidden &
+    transform translate(-50%, -50%) scale(.3)
+    opacity 0
+
+
+:global(:root)
+  --overlay-background-color var(--page-color)

package/src/components/ui/InteractionOverlay/InteractionOverlay.styl.d.ts

@@ -2,6 +2,8 @@
 // Please do not change this file!
 interface CssExports {
   'hidden': string;
+  'message': string;
+  'overlay': string;
   'root': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/InteractionOverlay/InteractionOverlay.tsx

@@ -8,11 +8,13 @@ import S from './InteractionOverlay.styl';
 interface InteractionOverlayProps {
   className?: string;
   children?: React.ReactNode;
+  message?: string;
 }
 
 export function InteractionOverlay({
   className,
   children,
+  message = 'Touch to interact',
 }: InteractionOverlayProps) {
   const isTouchDevice = useIsTouchDevice();
   const [isVisible, setIsVisible] = useState(true);
@@ -45,11 +47,16 @@ export function InteractionOverlay({
   }
 
   return (
-    <div
-      className={cn(S.root, !isVisible && S.hidden, className)}
-      onClick={handleClick}
-    >
+    <div className={cn(S.root, !isVisible && S.hidden, className)}>
       {children}
+      <button
+        type="button"
+        className={S.overlay}
+        onClick={handleClick}
+        aria-label={message}
+      >
+        <span className={S.message}>{message}</span>
+      </button>
     </div>
   );
 }

package/src/components/ui/InteractiveContent/AutolinkUrl.tsx

@@ -0,0 +1,53 @@
+import { LinkIcon } from 'lucide-react';
+
+import S from './InteractiveContent.styl';
+
+type AutolinkUrlProps = {
+  href: string;
+  display: string;
+  target?: string;
+  rel?: string;
+};
+
+export function displayUrlForAutolink(display: string): string {
+  if (display.startsWith('https://')) return display.slice(8);
+  if (display.startsWith('http://')) return display.slice(7);
+  return display;
+}
+
+export function shouldRenderAutolinkPill(label: string, href: string): boolean {
+  const normalizedLabel = label.trim();
+  const normalizedHref = href.trim();
+  if (!normalizedLabel || !normalizedHref) return false;
+
+  const labelAsHref = normalizeWwwToHttps(normalizedLabel);
+  if (labelAsHref === normalizedHref) return true;
+
+  return (
+    /^https?:\/\//i.test(normalizedLabel) ||
+    /^www\./i.test(normalizedLabel) ||
+    normalizedLabel === displayUrlForAutolink(normalizedHref)
+  );
+}
+
+const normalizeWwwToHttps = (raw: string): string => {
+  const t = raw.trim();
+  if (/^www\./i.test(t)) return `https://${t}`;
+  return t;
+};
+
+export function AutolinkUrl({ href, display, target, rel }: AutolinkUrlProps) {
+  return (
+    <a href={href} target={target} rel={rel} className={S.autolinkUrl}>
+      <LinkIcon size={12} aria-hidden className={S.autolinkUrlIcon} />
+      <span
+        className={S.autolinkUrlLabel}
+        title={displayUrlForAutolink(display)}
+      >
+        {displayUrlForAutolink(display)}
+      </span>
+    </a>
+  );
+}
+
+export { S as autolinkStyles };

package/src/components/ui/InteractiveContent/InteractiveContent.styl

@@ -1,20 +1,71 @@
 .root
+  display inline-block
+  max-width 100%
+  min-width 0
+  box-sizing border-box
+  overflow-wrap anywhere
+  word-break break-word
+
   strong
     font-weight 600
 
   em
     font-style italic
 
-  a
-    color var(--sb-green-600)
-    text-decoration underline
-    text-underline-offset 2px
+.textLink
+  color var(--sb-green-600)
+  text-decoration underline
+  text-underline-offset 2px
+
+  &:hover
+    color var(--sb-green-700)
+
+  :global(.dark) &
+    color var(--sb-green-400)
 
     &:hover
-      color var(--sb-green-700)
+      color var(--sb-green-300)
+
+.autolinkUrl
+  position relative
+  display inline-flex
+  align-items center
+  gap 6px
+
+  max-width 100%
+  box-sizing border-box
+  vertical-align middle
+
+  padding 2px 8px 2px 6px
+  margin 0 1px
+
+  border-radius var(--p-2)
+
+  color var(--link-color)
+  font-size var(--text-xs)
+  line-height 1.4
+  text-decoration none
+
+  &::before
+    position absolute
+    top 0
+    left 0
+    content ''
+    display inline-block
+    width 100%
+    height 100%
+    background-color var(--link-color)
+    border-radius inherit
+    opacity .1
+
+  &:hover::before
+    opacity .2
 
-    :global(.dark) &
-      color var(--sb-green-400)
+.autolinkUrlIcon
+  flex-shrink 0
 
-      &:hover
-        color var(--sb-green-300)
+.autolinkUrlLabel
+  min-width 0
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap

package/src/components/ui/InteractiveContent/InteractiveContent.styl.d.ts

@@ -1,7 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'autolinkUrl': string;
+  'autolinkUrlIcon': string;
+  'autolinkUrlLabel': string;
   'root': string;
+  'textLink': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/ui/InteractiveContent/index.ts

@@ -1 +1,2 @@
 export { InteractiveContent } from './InteractiveContent';
+export { AutolinkUrl, displayUrlForAutolink } from './AutolinkUrl';

package/src/components/ui/Logo/Logo.tsx

@@ -2,10 +2,13 @@ import cn from 'classnames';
 
 import S from './Logo.styl';
 import type { LogoProps } from './Logo.types';
+import LogoMarkSvg from './logo.svg';
+
+export { LogoMarkSvg as LogoMark };
 
 /**
- * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
- * to `public/logo.svg` (Sybilion app template README documents postinstall copies).
+ * Public URL for standalone apps. Copy `@sybilion/uilib/logo.svg` (Logo component asset)
+ * to `public/logo.svg` (app template README documents postinstall copies).
  * Same path as the favicon `<link href>`.
  */
 export const SYBILION_STANDALONE_LOGO_PUBLIC_URL = '/logo.svg' as const;
@@ -18,11 +21,11 @@ export function Logo({
 }: LogoProps) {
   return (
     <div className={cn(S.root, S[size], className)} {...props}>
-      <img
-        src={SYBILION_STANDALONE_LOGO_PUBLIC_URL}
-        alt={showText ? '' : 'Sybilion'}
+      <LogoMarkSvg
         className={S.icon}
-        {...(showText ? { 'aria-hidden': true } : {})}
+        {...(showText
+          ? { 'aria-hidden': true }
+          : { 'aria-label': 'Sybilion', role: 'img' })}
       />
       {showText && <span className={S.text}>Sybilion</span>}
     </div>

package/src/components/ui/Logo/index.ts

@@ -1,5 +1,5 @@
 // Export main component
-export { Logo } from './Logo';
+export { Logo, LogoMark } from './Logo';
 
 // Export types that external components might need
 export type { LogoProps, LogoSize } from './Logo.types';

package/src/{assets → components/ui/Logo}/logo.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-	<path fill="#59f0ff" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
+	<path fill="#C259FF" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
 </svg>

package/src/docs/DocsShell.tsx

@@ -1,6 +1,7 @@
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
+import { LogoMark } from '#uilib/components/ui/Logo';
 import { AppShell, AppShellMainContent } from '#uilib/components/ui/Page';
 import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
 import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
@@ -8,7 +9,6 @@ import { SybilionAppHeader } from '#uilib/components/widgets/SybilionAppHeader';
 import { ThemeToggle } from '#uilib/docs/App/ThemeToggle';
 import { DocsSidebar } from '#uilib/docs/components/DocsSidebar/DocsSidebar';
 
-import LogoSvg from '../../assets/logo.svg';
 import S from './DocsShell.styl';
 
 export function DocsShell() {
@@ -24,7 +24,7 @@ export function DocsShell() {
           header={<AppHeaderHost />}
           footer={
             <PageFooter
-              logo={<LogoSvg />}
+              logo={<LogoMark />}
               versionLink="/releases"
               versionLabel="1.0.0-docs"
             />

package/src/docs/config/webpack.config.js

@@ -20,7 +20,7 @@ const FaviconWebpackPlugin = require('favicons-webpack-plugin');
 const pkg = require('../../../package.json');
 
 const themeStyl = pathResolve(paths.src, 'theme.styl');
-const logoSvgPath = pathResolve(paths.assets, 'logo.svg');
+const logoSvgPath = pathResolve(paths.src, 'components/ui/Logo/logo.svg');
 
 /** GitHub Pages project sites live at /<repo>/; set PUBLIC_PATH=/repo-name/ for production deploy. */
 function normalizePublicPath(raw) {
@@ -211,6 +211,11 @@ export default (env, argv) => {
             to: paths.build,
             noErrorOnMissing: true,
           },
+          {
+            from: logoSvgPath,
+            to: `${paths.assets}/logo.svg`,
+            noErrorOnMissing: true,
+          },
         ],
       }),
 

package/src/docs/pages/InteractiveContentPage.tsx

@@ -4,7 +4,8 @@ import { PageContentSection } from '#uilib/components/ui/Page';
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-const SAMPLE = 'Use **bold** and *italic* in formatted text.';
+const SAMPLE =
+  'Use **bold** and *italic* in formatted text. See https://www.theguardian.com/business/ng-interactive/2026/may/14/us-stock-market-war-inflation-tariffs-trump for context.';
 
 export default function InteractiveContentPage() {
   return (