@flamingo-stack/openframe-frontend-core 0.0.747 → 0.0.749

package/dist/{tickets-board-4MT6ZB4F.cjs → tickets-board-BNW4AYFL.cjs}

@@ -10,10 +10,10 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkHNLI4OU5cjs = require('./chunk-HNLI4OU5.cjs');
+var _chunkC6LPOYDMcjs = require('./chunk-C6LPOYDM.cjs');
 require('./chunk-LU7TD6QS.cjs');
-require('./chunk-PSIKUDUV.cjs');
-require('./chunk-B27QEHYR.cjs');
+require('./chunk-LVO7FALW.cjs');
+require('./chunk-P6F6PHVK.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
 require('./chunk-KHPX3KU4.cjs');
@@ -1818,13 +1818,14 @@ require('./chunk-ASMNNSUQ.cjs');
 require('./chunk-KTPR66EE.cjs');
 require('./chunk-DGFDBPO7.cjs');
 require('./chunk-HOTM4UM6.cjs');
-require('./chunk-L2RMTGOK.cjs');
+require('./chunk-MGF3FUKD.cjs');
 require('./chunk-Z74QE57T.cjs');
 require('./chunk-XZJCBIYR.cjs');
 require('./chunk-2QMBXGMQ.cjs');
 require('./chunk-V45KLJQP.cjs');
 require('./chunk-3LU4UFPS.cjs');
-require('./chunk-5M5C6UV4.cjs');
+require('./chunk-RB6BSE3O.cjs');
+require('./chunk-2YXOD2KL.cjs');
 require('./chunk-3ATAYP36.cjs');
 
 // src/components/product-demo/screens/tickets-board.tsx
@@ -1839,7 +1840,7 @@ function buildTicketsBoardFixture(cast) {
   const dana = assignee(cast.person("dana"));
   const alex = assignee(cast.person("alex"));
   return [
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
       ticket("tk-1051", "Printer offline at the front desk", "ACTIVE", {
         ticketNumber: "1051",
         agent: "fae",
@@ -1857,7 +1858,7 @@ function buildTicketsBoardFixture(cast) {
         tags: ["onboarding"]
       })
     ]),
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
       ticket("tk-1049", "Acrobat Pro for Maya", "TECH_REQUIRED", {
         ticketNumber: "1049",
         agent: "fae",
@@ -1881,7 +1882,7 @@ function buildTicketsBoardFixture(cast) {
         escalatedByUser: true
       })
     ]),
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
       ticket("tk-1046", "Replace the conference room display", "ON_HOLD", {
         ticketNumber: "1046",
         organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.acme.name,
@@ -1890,7 +1891,7 @@ function buildTicketsBoardFixture(cast) {
         activity: { kind: "waiting-external" }
       })
     ]),
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, 
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, 
       "RESOLVED",
       [
         ticket("tk-1048", "Slow laptop", "RESOLVED", {
@@ -1926,7 +1927,7 @@ function TicketsBoardScreen({ compact = false }) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const board = _react.useMemo.call(void 0, () => buildTicketsBoardFixture(cast), [cast]);
   const columns = compact ? board.filter((column) => column.id !== "ON_HOLD") : board;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHNLI4OU5cjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC6LPOYDMcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
 }
 
 

package/dist/utils/index.cjs

@@ -6,21 +6,18 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var libphonenumberJs = require('libphonenumber-js');
 var lucideReact = require('lucide-react');
+var hastUtilRaw = require('hast-util-raw');
 var hastUtilToText = require('hast-util-to-text');
-var rehypeRaw = require('rehype-raw');
-var remark = require('remark');
-var remarkBreaks = require('remark-breaks');
-var remarkGfm = require('remark-gfm');
-var remarkRehype = require('remark-rehype');
+var mdastUtilFromMarkdown = require('mdast-util-from-markdown');
+var mdastUtilGfm = require('mdast-util-gfm');
+var mdastUtilNewlineToBreak = require('mdast-util-newline-to-break');
+var mdastUtilToHast = require('mdast-util-to-hast');
+var micromarkExtensionGfm = require('micromark-extension-gfm');
 var unistUtilVisit = require('unist-util-visit');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var rehypeRaw__default = /*#__PURE__*/_interopDefault(rehypeRaw);
-var remarkBreaks__default = /*#__PURE__*/_interopDefault(remarkBreaks);
-var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
-var remarkRehype__default = /*#__PURE__*/_interopDefault(remarkRehype);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -82622,9 +82619,9 @@ function createLocalStorageAdapter(options) {
       const storage = getStorage(backend);
       if (!storage) return null;
       try {
-        const raw = storage.getItem(resolveKey());
-        if (!raw) return null;
-        const parsed = JSON.parse(raw);
+        const raw2 = storage.getItem(resolveKey());
+        if (!raw2) return null;
+        const parsed = JSON.parse(raw2);
         if (options.validate && !options.validate(parsed)) return null;
         return parsed;
       } catch (err) {
@@ -83809,10 +83806,10 @@ async function readLeadingDecisionFrame(response) {
           throw new Error("readLeadingDecisionFrame: text-body sentinel arrived before leading frame");
         }
         if (nullIdx !== -1) {
-          const raw = buffer.slice(0, nullIdx);
+          const raw2 = buffer.slice(0, nullIdx);
           let parsed;
           try {
-            parsed = JSON.parse(raw);
+            parsed = JSON.parse(raw2);
           } catch (err) {
             throw new Error(`readLeadingDecisionFrame: leading JSON parse failed: ${err.message}`);
           }
@@ -83915,11 +83912,11 @@ function buildAutoContinuationDirective(toolName, opts = {}) {
 }
 
 // src/components/chat/utils/flatten-assistant-content.ts
-function flattenAssistantContent(raw) {
-  if (typeof raw === "string") return raw;
-  if (!Array.isArray(raw)) return "";
+function flattenAssistantContent(raw2) {
+  if (typeof raw2 === "string") return raw2;
+  if (!Array.isArray(raw2)) return "";
   const parts = [];
-  for (const seg of raw) {
+  for (const seg of raw2) {
     if (seg && typeof seg === "object" && seg.type === "text") {
       const t = seg.text;
       if (typeof t === "string" && t.length > 0) parts.push(t);
@@ -83933,8 +83930,8 @@ var SCROLL_ANCHOR = { TOP: "top", BOTTOM: "bottom" };
 
 // src/components/chat/utils/scroll-anchor.ts
 var SCROLL_ANCHOR_WIRE_KEY = "scrollAnchor";
-function parseScrollAnchor(raw) {
-  return raw === SCROLL_ANCHOR.TOP || raw === SCROLL_ANCHOR.BOTTOM ? raw : null;
+function parseScrollAnchor(raw2) {
+  return raw2 === SCROLL_ANCHOR.TOP || raw2 === SCROLL_ANCHOR.BOTTOM ? raw2 : null;
 }
 
 // src/components/chat/utils/slash-dispatch-utils.ts
@@ -83943,10 +83940,10 @@ var WIRE_ID_REGEX = /^[A-Za-z0-9._:/-]+$/;
 var WIRE_TABLE_ID_MAX = 60;
 var WIRE_ID_MAX = 200;
 var WIRE_QUERY_MAX = 2e3;
-function parseWireCommandOverride(raw) {
-  if (!raw || typeof raw !== "object") return null;
+function parseWireCommandOverride(raw2) {
+  if (!raw2 || typeof raw2 !== "object") return null;
   const out = {};
-  const r = raw;
+  const r = raw2;
   if (r.entityIdFilter && typeof r.entityIdFilter === "object") {
     const f = r.entityIdFilter;
     if (typeof f.tableId === "string" && f.tableId.length > 0 && f.tableId.length <= WIRE_TABLE_ID_MAX && WIRE_TABLE_ID_REGEX.test(f.tableId) && typeof f.id === "string" && f.id.length > 0 && f.id.length <= WIRE_ID_MAX && WIRE_ID_REGEX.test(f.id)) {
@@ -84277,8 +84274,8 @@ function scrollElementIntoView(target, options = {}) {
   };
   const computeTarget = () => {
     const offset = Math.max(headerOffset, declaredScrollMarginTop(target));
-    const raw = container ? container.scrollTop + (target.getBoundingClientRect().top - container.getBoundingClientRect().top) - offset : target.getBoundingClientRect().top + window.scrollY - offset;
-    const adjusted = adjustTargetY ? adjustTargetY(raw) : raw;
+    const raw2 = container ? container.scrollTop + (target.getBoundingClientRect().top - container.getBoundingClientRect().top) - offset : target.getBoundingClientRect().top + window.scrollY - offset;
+    const adjusted = adjustTargetY ? adjustTargetY(raw2) : raw2;
     const maxScroll = container ? Math.max(0, container.scrollHeight - container.clientHeight) : Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
     return Math.min(Math.max(0, adjusted), maxScroll);
   };
@@ -84421,14 +84418,14 @@ function scanHeadings(content, options = {}) {
     }
     if (includeRawHtml && line.indexOf("<") !== -1) {
       RAW_HEADING_RE.lastIndex = 0;
-      let raw;
+      let raw2;
       let matched = false;
-      while ((raw = RAW_HEADING_RE.exec(line)) !== null) {
+      while ((raw2 = RAW_HEADING_RE.exec(line)) !== null) {
         matched = true;
         out.push({
           line: i + 1,
-          level: Number(raw[1]),
-          text: raw[2].replace(/<[^>]*>/g, "").trim()
+          level: Number(raw2[1]),
+          text: raw2[2].replace(/<[^>]*>/g, "").trim()
         });
       }
       if (matched) {
@@ -84466,8 +84463,8 @@ function createHeadingIdDeduper() {
 }
 
 // src/utils/anchor-id.ts
-function normalizeAnchorId(raw) {
-  return slugifyHeadingText(raw).replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+function normalizeAnchorId(raw2) {
+  return slugifyHeadingText(raw2).replace(/-+/g, "-").replace(/^-+|-+$/g, "");
 }
 var HEADING_SELECTOR = "h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]";
 var DUPLICATE_SUFFIX_RE = /^(.+)-(\d+)$/;
@@ -85077,9 +85074,9 @@ function sanitizeRescueValues(values) {
   if (!values || typeof values !== "object") return out;
   for (const key of FORM_RESCUE_VALUE_FIELDS) {
     if (isExcludedRescueField(key)) continue;
-    const raw = values[key];
-    if (typeof raw !== "string") continue;
-    const trimmed = raw.trim().slice(0, FORM_RESCUE_MAX_VALUE_CHARS);
+    const raw2 = values[key];
+    if (typeof raw2 !== "string") continue;
+    const trimmed = raw2.trim().slice(0, FORM_RESCUE_MAX_VALUE_CHARS);
     if (trimmed) out[key] = trimmed;
   }
   return out;
@@ -85367,11 +85364,15 @@ function formatMarkdownLink({ text, url, rel }) {
 function stripInlineMarkdown(s) {
   return s.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/`([^`]+)`/g, "$1");
 }
-var toHtmlTree = remark.remark().use(remarkGfm__default.default).use(remarkBreaks__default.default).use(remarkRehype__default.default, { allowDangerousHtml: true }).use(rehypeRaw__default.default);
 var NOT_PROSE = /* @__PURE__ */ new Set(["pre", "img"]);
 var TABLE_SECTIONS = /* @__PURE__ */ new Set(["thead", "tbody", "tfoot"]);
+function htmlTree(markdown) {
+  const mdast = mdastUtilFromMarkdown.fromMarkdown(markdown, { extensions: [micromarkExtensionGfm.gfm()], mdastExtensions: [mdastUtilGfm.gfmFromMarkdown()] });
+  mdastUtilNewlineToBreak.newlineToBreak(mdast);
+  return hastUtilRaw.raw(mdastUtilToHast.toHast(mdast, { allowDangerousHtml: true }));
+}
 function proseTree(markdown) {
-  const tree = toHtmlTree.runSync(toHtmlTree.parse(markdown));
+  const tree = htmlTree(markdown);
   unistUtilVisit.visit(tree, "element", (node, index, parent) => {
     if (NOT_PROSE.has(node.tagName) && parent && index !== void 0) {
       parent.children.splice(index, 1);
@@ -85676,12 +85677,12 @@ async function fileContentKey(file) {
 }
 
 // src/utils/search-params.ts
-function positiveInt(raw, fallback, { min = 1, max } = {}) {
+function positiveInt(raw2, fallback, { min = 1, max } = {}) {
   const capped = (v) => max == null ? v : Math.min(v, max);
-  if (raw === null || raw === void 0 || raw === "") {
+  if (raw2 === null || raw2 === void 0 || raw2 === "") {
     return typeof fallback === "number" ? capped(fallback) : fallback;
   }
-  const n = Math.trunc(Number(raw));
+  const n = Math.trunc(Number(raw2));
   if (!Number.isFinite(n) || n < min) {
     return typeof fallback === "number" ? capped(fallback) : fallback;
   }
@@ -85709,32 +85710,32 @@ function firstParamValue(input, key) {
 }
 function allParamValues(input, key) {
   if (!input) return [];
-  const raw = input instanceof URLSearchParams ? input.getAll(key) : input[key];
-  const list = Array.isArray(raw) ? raw : raw === void 0 ? [] : [raw];
+  const raw2 = input instanceof URLSearchParams ? input.getAll(key) : input[key];
+  const list = Array.isArray(raw2) ? raw2 : raw2 === void 0 ? [] : [raw2];
   if (list.length === 1 && list[0]?.includes(",")) return list[0].split(",").filter(Boolean);
   return list.filter((v) => v !== void 0 && v !== "");
 }
-function coerceScalar(raw, config) {
-  if (raw === void 0 || raw === "") return void 0;
+function coerceScalar(raw2, config) {
+  if (raw2 === void 0 || raw2 === "") return void 0;
   switch (config.type) {
     case "int": {
       const int = config;
-      return positiveInt(raw, int.default, { min: int.min, max: int.max });
+      return positiveInt(raw2, int.default, { min: int.min, max: int.max });
     }
     case "number": {
-      const n = Number(raw);
+      const n = Number(raw2);
       return Number.isFinite(n) ? n : void 0;
     }
     case "boolean":
-      return raw === "true" || raw === "1";
+      return raw2 === "true" || raw2 === "1";
     case "object":
       try {
-        return JSON.parse(raw);
+        return JSON.parse(raw2);
       } catch {
         return void 0;
       }
     default:
-      return raw;
+      return raw2;
   }
 }
 function parseSchemaParams(schema, input, options) {

package/dist/utils/markdown-to-plain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-to-plain.d.ts","sourceRoot":"","sources":["../../src/utils/markdown-to-plain.ts"],"names":[],"mappings":"AAwBA,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;gFAEgF;AAChF,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAMrD;AAyCD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B,GAAG,MAAM,CAmBlG"}
+{"version":3,"file":"markdown-to-plain.d.ts","sourceRoot":"","sources":["../../src/utils/markdown-to-plain.ts"],"names":[],"mappings":"AAiCA,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;gFAEgF;AAChF,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAMrD;AAyCD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B,GAAG,MAAM,CAmBlG"}

package/dist/utils/markdown-to-plain.js

@@ -1,18 +1,23 @@
+import { raw } from "hast-util-raw";
 import { toText } from "hast-util-to-text";
-import rehypeRaw from "rehype-raw";
-import { remark } from "remark";
-import remarkBreaks from "remark-breaks";
-import remarkGfm from "remark-gfm";
-import remarkRehype from "remark-rehype";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { gfmFromMarkdown } from "mdast-util-gfm";
+import { newlineToBreak } from "mdast-util-newline-to-break";
+import { toHast } from "mdast-util-to-hast";
+import { gfm } from "micromark-extension-gfm";
 import { SKIP, visit } from "unist-util-visit";
 function stripInlineMarkdown(s) {
   return s.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/`([^`]+)`/g, "$1");
 }
-const toHtmlTree = remark().use(remarkGfm).use(remarkBreaks).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw);
 const NOT_PROSE = /* @__PURE__ */ new Set(["pre", "img"]);
 const TABLE_SECTIONS = /* @__PURE__ */ new Set(["thead", "tbody", "tfoot"]);
+function htmlTree(markdown) {
+  const mdast = fromMarkdown(markdown, { extensions: [gfm()], mdastExtensions: [gfmFromMarkdown()] });
+  newlineToBreak(mdast);
+  return raw(toHast(mdast, { allowDangerousHtml: true }));
+}
 function proseTree(markdown) {
-  const tree = toHtmlTree.runSync(toHtmlTree.parse(markdown));
+  const tree = htmlTree(markdown);
   visit(tree, "element", (node, index, parent) => {
     if (NOT_PROSE.has(node.tagName) && parent && index !== void 0) {
       parent.children.splice(index, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.747",
+  "version": "0.0.749",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [
@@ -480,10 +480,16 @@
     "framer-motion": "^12.23.12",
     "globals": "^16.4.0",
     "graphql": "^16.12.0",
+    "hast-util-raw": "^9.1.0",
     "hast-util-to-text": "^4.0.2",
     "libphonenumber-js": "^1.12.40",
     "lucide-react": "^0.454.0",
+    "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-newline-to-break": "^2.0.0",
+    "mdast-util-to-hast": "^13.2.1",
     "mermaid": "^11.14.0",
+    "micromark-extension-gfm": "^3.0.0",
     "nats.ws": "^1.30.3",
     "next-themes": "^0.2.1",
     "prettier-plugin-tailwindcss": "^0.8.1",
@@ -505,7 +511,6 @@
     "remark": "^15.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "remark-rehype": "^11.1.2",
     "sonner": "^1.2.4",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",

package/src/components/categories-cart.tsx

@@ -3,6 +3,7 @@
 import { ChevronRight } from 'lucide-react';
 import Link from '../embed-shims/next-link';
 import type { RealCategoryCardProps } from '../types/category';
+import { UnifiedSkeleton } from './loading/unified-skeleton';
 import { VendorIcon } from './vendor-icon';
 
 // Component that receives vendor and subcategory data as props
@@ -26,10 +27,7 @@ export function CategoriesCart({
             {isLoading
               ? // Skeleton loading for vendor icons
                 Array.from({ length: 20 }).map((_, index) => (
-                  <div
-                    key={index}
-                    className="h-8 w-8 flex-shrink-0 animate-pulse rounded bg-ods-border md:h-10 md:w-10"
-                  />
+                  <UnifiedSkeleton key={index} className="h-8 w-8 flex-shrink-0 rounded md:h-10 md:w-10" />
                 ))
               : vendors && vendors.length > 0
                 ? vendors.map(vendor => (

package/src/components/chat/chat-container.tsx

@@ -3,8 +3,8 @@ import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated';
 import { PlusCircleIcon } from '../icons-v2-generated/signs-and-symbols/plus-circle-icon';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
-import { Skeleton } from '../ui/skeleton';
 import { SquareAvatar as Avatar } from '../ui/square-avatar';
 import { TicketStatusTag, resolveStatusTagProps } from '../ui/ticket-status-tag';
 import { MspOrganizationCard } from './msp-organization-card';
@@ -111,12 +111,12 @@ const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
               <div className="flex items-center gap-3">
                 {/* 64px round avatar placeholder — matches the `w-16 h-16`
                     rounded-full avatar / userIcon block below. */}
-                <Skeleton className="h-16 w-16 shrink-0 rounded-full" />
+                <UnifiedSkeleton className="h-16 w-16 shrink-0 rounded-full" />
                 <div className="flex flex-col gap-1">
                   {/* Name line — sized to the `text-h3` name. */}
-                  <Skeleton className="h-6 w-40" />
+                  <UnifiedSkeleton className="h-6 w-40" />
                   {/* Server line — sized to the `text-h4` secondary row. */}
-                  <Skeleton className="h-4 w-28" />
+                  <UnifiedSkeleton className="h-4 w-28" />
                 </div>
               </div>
             ) : (

package/src/components/chat/chat-context-picker.tsx

@@ -29,6 +29,7 @@ import { SearchIcon } from '../icons-v2-generated/interface/search-icon';
 import { Upload02Icon } from '../icons-v2-generated/interface/upload-02-icon';
 import { PlusIcon } from '../icons-v2-generated/signs-and-symbols/plus-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { LoadingRegion } from '../loading/loading-region';
 import {
   CONTEXT_BACK_CLASS,
   CONTEXT_STATE_CLASS,
@@ -384,9 +385,9 @@ export function ChatContextPicker({
               >
                 <Suspense
                   fallback={
-                    <div className="max-h-[340px] overflow-hidden">
+                    <LoadingRegion label="Loading items" className="max-h-[340px] overflow-hidden">
                       <ContextItemsSkeleton count={ITEMS_SKELETON_ROWS} />
-                    </div>
+                    </LoadingRegion>
                   }
                 >
                   {config.renderItems({

package/src/components/chat/chat-message-row.tsx

@@ -22,6 +22,7 @@
 import { useState, type ReactNode } from 'react';
 import Image from '../../embed-shims/next-image';
 import { personInitials } from '../../utils/format';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { useProxiedImageUrl } from './hooks/use-proxied-image-url';
 
 export interface ChatMessageRowProps {
@@ -104,20 +105,18 @@ export function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer
  * name/time/body line-heights so the loading→loaded swap does not reflow.
  */
 export function ChatMessageRowSkeleton() {
-  // Bars use `bg-ods-border` (NOT `bg-ods-skeleton` — that token resolves to
-  // transparent in this build, leaving the box visually empty).
   return (
     <div className="flex w-full min-w-0 gap-2 md:gap-3">
-      <div className="h-8 w-8 flex-shrink-0 animate-pulse rounded-lg bg-ods-border md:h-10 md:w-10" />
+      <UnifiedSkeleton className="h-8 w-8 flex-shrink-0 rounded-lg md:h-10 md:w-10" />
       <div className="min-w-0 flex-1">
         {/* Header row — name + time bars, same mb-1 + gap-2 as the real header. */}
         <div className="mb-1 flex items-center gap-2">
-          <div className="h-[15px] w-24 animate-pulse rounded bg-ods-border md:h-[20px] md:w-32" />
-          <div className="h-[12px] w-12 animate-pulse rounded bg-ods-border md:h-[16px] md:w-16" />
+          <UnifiedSkeleton className="h-[15px] w-24 rounded md:h-[20px] md:w-32" />
+          <UnifiedSkeleton className="h-[12px] w-12 rounded md:h-[16px] md:w-16" />
         </div>
         {/* Two body lines — match the 12/14px body line-height. */}
-        <div className="h-[14px] w-full animate-pulse rounded bg-ods-border md:h-[18px]" />
-        <div className="mt-1 h-[14px] w-3/4 animate-pulse rounded bg-ods-border md:h-[18px]" />
+        <UnifiedSkeleton className="h-[14px] w-full rounded md:h-[18px]" />
+        <UnifiedSkeleton className="mt-1 h-[14px] w-3/4 rounded md:h-[18px]" />
       </div>
     </div>
   );

package/src/components/chat/chat-message-skeleton.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { cn } from '../../utils/cn';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 interface ChatMessageSkeletonProps {
   className?: string;
@@ -40,15 +42,15 @@ export function ChatMessageSkeleton({
             `bg-ods-border` so the placeholders are actually visible (a tinted
             low-alpha fill reads as blank on the dark surface). */}
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          {showAvatar && !isUser && <div className="h-8 w-8 flex-shrink-0 animate-pulse rounded-full bg-ods-border" />}
-          <div className="h-5 w-32 animate-pulse rounded bg-ods-border" />
-          <div className="ml-auto h-4 w-14 animate-pulse rounded bg-ods-border" />
+          {showAvatar && !isUser && <UnifiedSkeleton className="h-8 w-8 flex-shrink-0 rounded-full" />}
+          <UnifiedSkeleton className="h-5 w-32 rounded" />
+          <UnifiedSkeleton className="ml-auto h-4 w-14 rounded" />
         </div>
 
         {/* Body lines — percentage widths so they reflow on panel resize. */}
         <div className="flex flex-col gap-2 pt-[var(--spacing-system-xxs)]">
           {Array.from({ length: lines }, (_, i) => (
-            <div key={i} className={cn('h-4 animate-pulse rounded bg-ods-border', bodyLineWidth(i, lines))} />
+            <UnifiedSkeleton key={i} className={cn('h-4 rounded', bodyLineWidth(i, lines))} />
           ))}
         </div>
       </div>
@@ -57,6 +59,8 @@ export function ChatMessageSkeleton({
 }
 
 interface ChatMessageListSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   className?: string;
   messageCount?: number;
   showAvatars?: boolean;
@@ -85,6 +89,7 @@ interface ChatMessageListSkeletonProps {
 }
 
 export function ChatMessageListSkeleton({
+  region = true,
   className,
   messageCount = 6,
   showAvatars = true,
@@ -99,7 +104,7 @@ export function ChatMessageListSkeleton({
   }));
 
   return (
-    <div className="relative flex min-h-0 flex-1 flex-col">
+    <LoadingRegion label="Loading messages" announce={region} className="relative flex min-h-0 flex-1 flex-col">
       <div
         className={cn(
           'flex h-full w-full flex-1 flex-col',
@@ -131,6 +136,6 @@ export function ChatMessageListSkeleton({
           ))}
         </div>
       </div>
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/chat/chat-sidebar-skeleton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn';
 import { ChatPlusIcon } from '../icons-v2-generated';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
 
 interface DialogListItemSkeletonProps {
@@ -25,14 +26,14 @@ const DialogListItemSkeleton = forwardRef<HTMLDivElement, DialogListItemSkeleton
         <div className="flex flex-1 flex-col items-start justify-center gap-1">
           <div className="flex w-full items-center">
             {/* Title skeleton */}
-            <div className="h-6 w-full max-w-[200px] animate-pulse rounded bg-ods-border" />
+            <UnifiedSkeleton className="h-6 w-full max-w-[200px] rounded" />
           </div>
           {/* Timestamp skeleton */}
-          <div className="h-4 w-32 animate-pulse rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-32 rounded" />
         </div>
 
         {/* Right side chevron skeleton */}
-        <div className="size-6 shrink-0 animate-pulse rounded bg-ods-border" />
+        <UnifiedSkeleton className="size-6 shrink-0 rounded" />
       </div>
     );
   },

package/src/components/chat/chat-top-navigation.tsx

@@ -3,7 +3,7 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { Settings01Icon, SidebarIcon } from '../icons-v2-generated';
-import { Skeleton } from '../ui/skeleton';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { SquareAvatar } from '../ui/square-avatar';
 
 export interface ChatTopNavigationProps extends HTMLAttributes<HTMLElement> {
@@ -72,10 +72,10 @@ const ChatTopNavigation = forwardRef<HTMLElement, ChatTopNavigationProps>(
         <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)]">
           {isLoading ? (
             <>
-              <Skeleton className="size-10 shrink-0 rounded-full" />
+              <UnifiedSkeleton className="size-10 shrink-0 rounded-full" />
               <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-                <Skeleton className="h-5 w-24" />
-                <Skeleton className="h-4 w-32" />
+                <UnifiedSkeleton className="h-5 w-24" />
+                <UnifiedSkeleton className="h-4 w-32" />
               </div>
             </>
           ) : (

package/src/components/chat/context-items-list.tsx

@@ -14,7 +14,8 @@
 import { Component, type ReactNode, type UIEvent, useCallback } from 'react';
 import { cn } from '../../utils/cn';
 import { CheckFillIcon } from '../icons-v2-generated/signs-and-symbols/check-fill-icon';
-import { Skeleton } from '../ui/skeleton';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import type { ChatContextItem } from './types/context-item.types';
 
 const itemKey = (i: { type: string; id: string }) => `${i.type}:${i.id}`;
@@ -86,7 +87,7 @@ export function ContextItemsSkeleton({ count }: { count: number }) {
           key={`ctx-skeleton-${i}`}
           className="flex items-center border-b border-ods-border bg-ods-bg py-3 pl-4 pr-2 last:border-b-0"
         >
-          <Skeleton className="h-5 w-1/2" />
+          <UnifiedSkeleton className="h-5 w-1/2" />
         </div>
       ))}
     </>
@@ -164,7 +165,12 @@ export function ContextItemsList({
           />
         );
       })}
-      {loadingMore && <ContextItemsSkeleton count={3} />}
+      {loadingMore && (
+        // `contents`: the rows stay the list's own rows; the region only adds the one announcement.
+        <LoadingRegion label="Loading more items" className="contents">
+          <ContextItemsSkeleton count={3} />
+        </LoadingRegion>
+      )}
     </div>
   );
 }