gridsmith-ui 0.23.0 → 0.25.0

package/dist/chat.js

@@ -1,9 +1,10 @@
-import { Divider, CodeBlock, Link } from './chunk-EYMGLK4M.js';
-import './chunk-SBTBMAIU.js';
-import './chunk-CXMV7SXJ.js';
+import { Divider, CodeBlock, Link } from './chunk-QGSCF7PN.js';
+import './chunk-FHMCAOAH.js';
+import './chunk-MD2EFMES.js';
 import './chunk-7Q46JXSK.js';
+import './chunk-HYMXAIXN.js';
+import './chunk-HP7WUZPK.js';
 import './chunk-WH2FUFAC.js';
-import './chunk-4LDYR7QP.js';
 import { cn } from './chunk-M2QRNBDQ.js';
 import { memo, Children, isValidElement } from 'react';
 import Markdown from 'react-markdown';

package/dist/chat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../showcase/src/components/MarkdownContent.tsx"],"names":[],"mappings":"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","file":"chat.js","sourcesContent":["import { memo, Children, isValidElement, type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport Markdown, { type Components } from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport { Link } from \"./Link\";\nimport { Divider } from \"./Divider\";\n\nexport interface MarkdownContentProps {\n  /** The markdown source — a model's reply, an API's description. Raw HTML in it is never rendered. */\n  children: string;\n  /** Show a caret at the end of the last block while the source is still arriving. Pass a message's status === \"streaming\" from ChatMessageList's renderContent. */\n  streaming?: boolean;\n  className?: string;\n}\n\nconst isExternal = (href: string) => /^(https?:)?\\/\\//i.test(href);\n\n/** Pull the code string and language out of the single <code> child react-markdown gives a <pre>. */\nfunction codeFromPre(children: ReactNode): { code: string; language?: string } {\n  const only = Children.toArray(children).find(isValidElement) as ReactElement<{ className?: string; children?: ReactNode }> | undefined;\n  const cls = only?.props.className ?? \"\";\n  const language = /language-([\\w+-]+)/.exec(cls)?.[1];\n  const raw = only ? only.props.children : children;\n  const code = Children.toArray(raw)\n    .map((c) => (typeof c === \"string\" || typeof c === \"number\" ? String(c) : \"\"))\n    .join(\"\")\n    .replace(/\\n$/, \"\");\n  return { code, language };\n}\n\ntype P<T extends keyof React.JSX.IntrinsicElements> = ComponentProps<T> & { node?: unknown };\n\nconst components: Components = {\n  p: ({ node: _n, ...props }: P<\"p\">) => <p {...props} />,\n  a: ({ node: _n, href = \"#\", children, ...props }: P<\"a\">) => (\n    <Link\n      href={href}\n      underline=\"always\"\n      {...(isExternal(href) ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Link>\n  ),\n  pre: ({ node: _n, children }: P<\"pre\">) => {\n    const { code, language } = codeFromPre(children);\n    return <CodeBlock code={code} language={language} />;\n  },\n  code: ({ node: _n, className, children, ...props }: P<\"code\">) => (\n    <code\n      className={cn(\n        \"rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)] px-ds-1 py-[1px] font-[family-name:var(--ds-font-mono)] text-[0.9em]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </code>\n  ),\n  ul: ({ node: _n, ...props }: P<\"ul\">) => <ul className=\"list-disc space-y-ds-1 pl-ds-5\" {...props} />,\n  ol: ({ node: _n, ...props }: P<\"ol\">) => <ol className=\"list-decimal space-y-ds-1 pl-ds-5\" {...props} />,\n  li: ({ node: _n, ...props }: P<\"li\">) => <li {...props} />,\n  h1: ({ node: _n, ...props }: P<\"h1\">) => <h3 className=\"text-base font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h2: ({ node: _n, ...props }: P<\"h2\">) => <h3 className=\"text-base font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h3: ({ node: _n, ...props }: P<\"h3\">) => <h4 className=\"text-sm font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h4: ({ node: _n, ...props }: P<\"h4\">) => <h4 className=\"text-sm font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h5: ({ node: _n, ...props }: P<\"h5\">) => <h5 className=\"text-sm font-medium text-[var(--ds-text-primary)]\" {...props} />,\n  h6: ({ node: _n, ...props }: P<\"h6\">) => <h6 className=\"text-sm font-medium text-[var(--ds-text-secondary)]\" {...props} />,\n  blockquote: ({ node: _n, ...props }: P<\"blockquote\">) => (\n    <blockquote\n      className=\"border-l-[length:calc(var(--ds-border-width)*2)] border-[var(--ds-border-default)] pl-ds-3 text-[var(--ds-text-secondary)]\"\n      {...props}\n    />\n  ),\n  hr: () => <Divider />,\n  strong: ({ node: _n, ...props }: P<\"strong\">) => <strong className=\"font-semibold\" {...props} />,\n  // Wide content scrolls inside its own container; the page never scrolls sideways.\n  table: ({ node: _n, ...props }: P<\"table\">) => (\n    <div className=\"overflow-x-auto rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\">\n      <table className=\"w-full border-collapse text-sm\" {...props} />\n    </div>\n  ),\n  thead: ({ node: _n, ...props }: P<\"thead\">) => <thead className=\"bg-[var(--ds-bg-muted)]\" {...props} />,\n  th: ({ node: _n, ...props }: P<\"th\">) => (\n    <th className=\"px-ds-3 py-ds-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--ds-text-secondary)]\" {...props} />\n  ),\n  td: ({ node: _n, ...props }: P<\"td\">) => (\n    <td className=\"border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] px-ds-3 py-ds-2 align-top\" {...props} />\n  ),\n  img: ({ node: _n, alt = \"\", ...props }: P<\"img\">) => <img alt={alt} className=\"max-w-full rounded-[var(--ds-radius-md)]\" {...props} />,\n};\n\n/**\n * Renders markdown (GitHub flavour: tables, task lists, strikethrough) with\n * Gridsmith primitives: fenced code becomes CodeBlock, links become Link,\n * a rule becomes Divider, everything else is token-styled markup. Raw HTML is\n * not rendered — the source is untrusted by default. Memoised: an unchanged\n * message never re-parses; a streaming message re-parses only its own string.\n *\n * Lives on the `gridsmith-ui/chat` entry point (react-markdown and remark-gfm\n * are optional peers), so apps without a chat never load a markdown parser.\n */\n// The caret is a pseudo-element on the last block, so it sits at the end of the\n// last line of text instead of on a line of its own below a block element.\nconst STREAMING_CARET = cn(\n  \"[&>:last-child]:after:content-['▍'] [&>:last-child]:after:ml-ds-0.5\",\n  \"[&>:last-child]:after:text-[var(--ds-accent-primary)] [&>:last-child]:after:animate-pulse\",\n);\n\nconst Memoised = memo(function MarkdownContentInner({ children, streaming, className }: MarkdownContentProps) {\n  return (\n    <div\n      className={cn(\"space-y-ds-4 text-sm leading-relaxed text-[var(--ds-text-primary)]\", streaming && STREAMING_CARET, className)}\n      data-markdown=\"\"\n      data-streaming={streaming || undefined}\n    >\n      <Markdown remarkPlugins={[remarkGfm]} components={components} skipHtml>\n        {children}\n      </Markdown>\n    </div>\n  );\n});\n\n// A plain function export so the registry extractor (which reads `export function`)\n// documents it; the memo above still skips re-parsing unchanged sources.\nexport function MarkdownContent(props: MarkdownContentProps) {\n  return <Memoised {...props} />;\n}\n"]}
+{"version":3,"sources":["../../../showcase/src/components/MarkdownContent.tsx"],"names":[],"mappings":"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","file":"chat.js","sourcesContent":["import { memo, Children, isValidElement, type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport Markdown, { type Components } from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport { Link } from \"./Link\";\nimport { Divider } from \"./Divider\";\n\nexport interface MarkdownContentProps {\n  /** The markdown source — a model's reply, an API's description. Raw HTML in it is never rendered. */\n  children: string;\n  /** Show a caret at the end of the last block while the source is still arriving. Pass a message's status === \"streaming\" from ChatMessageList's renderContent. */\n  streaming?: boolean;\n  className?: string;\n}\n\nconst isExternal = (href: string) => /^(https?:)?\\/\\//i.test(href);\n\n/** Pull the code string and language out of the single <code> child react-markdown gives a <pre>. */\nfunction codeFromPre(children: ReactNode): { code: string; language?: string } {\n  const only = Children.toArray(children).find(isValidElement) as ReactElement<{ className?: string; children?: ReactNode }> | undefined;\n  const cls = only?.props.className ?? \"\";\n  const language = /language-([\\w+-]+)/.exec(cls)?.[1];\n  const raw = only ? only.props.children : children;\n  const code = Children.toArray(raw)\n    .map((c) => (typeof c === \"string\" || typeof c === \"number\" ? String(c) : \"\"))\n    .join(\"\")\n    .replace(/\\n$/, \"\");\n  return { code, language };\n}\n\ntype P<T extends keyof React.JSX.IntrinsicElements> = ComponentProps<T> & { node?: unknown };\n\nconst components: Components = {\n  p: ({ node: _n, ...props }: P<\"p\">) => <p {...props} />,\n  a: ({ node: _n, href = \"#\", children, ...props }: P<\"a\">) => (\n    <Link\n      href={href}\n      underline=\"always\"\n      {...(isExternal(href) ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Link>\n  ),\n  pre: ({ node: _n, children }: P<\"pre\">) => {\n    const { code, language } = codeFromPre(children);\n    return <CodeBlock code={code} language={language} />;\n  },\n  code: ({ node: _n, className, children, ...props }: P<\"code\">) => (\n    <code\n      className={cn(\n        \"rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)] px-ds-1 py-[1px] font-[family-name:var(--ds-font-mono)] text-[0.9em]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </code>\n  ),\n  ul: ({ node: _n, ...props }: P<\"ul\">) => <ul className=\"list-disc space-y-ds-1 pl-ds-5\" {...props} />,\n  ol: ({ node: _n, ...props }: P<\"ol\">) => <ol className=\"list-decimal space-y-ds-1 pl-ds-5\" {...props} />,\n  li: ({ node: _n, ...props }: P<\"li\">) => <li {...props} />,\n  h1: ({ node: _n, ...props }: P<\"h1\">) => <h3 className=\"text-base font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h2: ({ node: _n, ...props }: P<\"h2\">) => <h3 className=\"text-base font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h3: ({ node: _n, ...props }: P<\"h3\">) => <h4 className=\"text-sm font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h4: ({ node: _n, ...props }: P<\"h4\">) => <h4 className=\"text-sm font-semibold text-[var(--ds-text-primary)]\" {...props} />,\n  h5: ({ node: _n, ...props }: P<\"h5\">) => <h5 className=\"text-sm font-medium text-[var(--ds-text-primary)]\" {...props} />,\n  h6: ({ node: _n, ...props }: P<\"h6\">) => <h6 className=\"text-sm font-medium text-[var(--ds-text-secondary)]\" {...props} />,\n  blockquote: ({ node: _n, ...props }: P<\"blockquote\">) => (\n    <blockquote\n      className=\"border-l-[length:calc(var(--ds-border-width)*2)] border-[var(--ds-border-default)] pl-ds-3 text-[var(--ds-text-secondary)]\"\n      {...props}\n    />\n  ),\n  hr: () => <Divider />,\n  strong: ({ node: _n, ...props }: P<\"strong\">) => <strong className=\"font-semibold\" {...props} />,\n  // Wide content scrolls inside its own container; the page never scrolls sideways.\n  table: ({ node: _n, ...props }: P<\"table\">) => (\n    <div className=\"overflow-x-auto rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\">\n      <table className=\"w-full border-collapse text-sm\" {...props} />\n    </div>\n  ),\n  thead: ({ node: _n, ...props }: P<\"thead\">) => <thead className=\"bg-[var(--ds-bg-muted)]\" {...props} />,\n  th: ({ node: _n, ...props }: P<\"th\">) => (\n    <th className=\"px-ds-3 py-ds-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--ds-text-secondary)]\" {...props} />\n  ),\n  td: ({ node: _n, ...props }: P<\"td\">) => (\n    <td className=\"border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] px-ds-3 py-ds-2 align-top\" {...props} />\n  ),\n  img: ({ node: _n, alt = \"\", ...props }: P<\"img\">) => <img alt={alt} className=\"max-w-full rounded-[var(--ds-radius-md)]\" {...props} />,\n};\n\n/**\n * Renders markdown (GitHub flavour: tables, task lists, strikethrough) with\n * Gridsmith primitives: fenced code becomes CodeBlock, links become Link,\n * a rule becomes Divider, everything else is token-styled markup. Raw HTML is\n * not rendered — the source is untrusted by default. Memoised: an unchanged\n * message never re-parses; a streaming message re-parses only its own string.\n *\n * Lives on the `gridsmith-ui/chat` entry point (react-markdown and remark-gfm\n * are optional peers), so apps without a chat never load a markdown parser.\n */\n// The caret is a pseudo-element on the last block, so it sits at the end of the\n// last line of text instead of on a line of its own below a block element.\nconst STREAMING_CARET = cn(\n  \"[&>:last-child]:after:content-['▍'] [&>:last-child]:after:ml-ds-0.5\",\n  \"[&>:last-child]:after:text-[var(--ds-accent-primary)] [&>:last-child]:after:animate-pulse\",\n);\n\nconst Memoised = memo(function MarkdownContentInner({ children, streaming, className }: MarkdownContentProps) {\n  return (\n    <div\n      className={cn(\"space-y-ds-4 text-sm leading-relaxed text-[var(--ds-text-primary)]\", streaming && STREAMING_CARET, className)}\n      data-markdown=\"\"\n      data-streaming={streaming || undefined}\n    >\n      <Markdown remarkPlugins={[remarkGfm]} components={components} skipHtml>\n        {children}\n      </Markdown>\n    </div>\n  );\n});\n\n// A plain function export so the registry extractor (which reads `export function`)\n// documents it; the memo above still skips re-parsing unchanged sources.\nexport function MarkdownContent(props: MarkdownContentProps) {\n  return <Memoised {...props} />;\n}\n"]}

package/dist/chunk-2YSEME33.js

@@ -0,0 +1,118 @@
+import { createContext, useContext, useState, useLayoutEffect } from 'react';
+
+// ../../showcase/src/lib/use-fill-height.ts
+function useFillHeight(ref, enabled = true) {
+  const insideFill = useContext(FillContext);
+  const active = enabled && !insideFill;
+  const [height, setHeight] = useState(null);
+  useLayoutEffect(() => {
+    const main = ref.current?.closest("main[data-shell-main]");
+    if (!active || !main || typeof ResizeObserver === "undefined") {
+      setHeight(null);
+      return;
+    }
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const el = ref.current;
+      setHeight(el && main.contains(el) ? fillHeight(el, main) : null);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    measure();
+    const ro = new ResizeObserver(schedule);
+    const watch = (box) => {
+      ro.observe(box);
+      for (const child of Array.from(box.children)) ro.observe(child);
+    };
+    const page = main.querySelector("[data-shell-content]");
+    watch(main);
+    if (page) watch(page);
+    const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+      for (const record of records) record.addedNodes.forEach((node) => {
+        if (node instanceof Element) ro.observe(node);
+      });
+      schedule();
+    });
+    mo?.observe(main, { childList: true });
+    if (page) mo?.observe(page, { childList: true });
+    return () => {
+      ro.disconnect();
+      mo?.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [ref, active]);
+  return active ? height : null;
+}
+var FillContext = createContext(false);
+var MIN_FILL = 240;
+var ROW_MAX = 56;
+function fillHeight(el, main) {
+  const page = el.closest("[data-shell-content]") ?? main;
+  if (!leadsPage(el, page) || !isLastContent(el, page) || hasOwnHeight(el) || !followsContent(el, main)) return null;
+  const mainBox = main.getBoundingClientRect();
+  const top = el.getBoundingClientRect().top - mainBox.top - main.clientTop + main.scrollTop;
+  const height = Math.floor(main.clientHeight - top - spaceBelow(el, main));
+  return height >= MIN_FILL ? height : null;
+}
+function takesRoom(box) {
+  const style = getComputedStyle(box);
+  if (style.display === "none" || style.position === "absolute" || style.position === "fixed") return false;
+  const rect = box.getBoundingClientRect();
+  return rect.height > 0 && rect.width > 0;
+}
+var CHROME = '[role="alert"], [role="status"], [role="tablist"], [role="toolbar"], [role="search"]';
+var isChrome = (box) => box.matches(CHROME) || box.children.length > 0 && Array.from(box.children).every((child) => !takesRoom(child) || child.matches(CHROME));
+function leadsPage(el, page) {
+  for (let node = el; node && node !== page; node = node.parentElement) {
+    for (let prev = node.previousElementSibling; prev; prev = prev.previousElementSibling) {
+      if (!takesRoom(prev)) continue;
+      if (prev.matches('[data-gs="page-header"]') || prev.querySelector('[data-gs="page-header"], h1')) continue;
+      if (isChrome(prev)) continue;
+      if (prev.getBoundingClientRect().height > ROW_MAX) return false;
+    }
+  }
+  return true;
+}
+function isLastContent(el, page) {
+  for (let node = el; node && node !== page; node = node.parentElement) {
+    for (let next = node.nextElementSibling; next; next = next.nextElementSibling) {
+      if (takesRoom(next)) return false;
+    }
+  }
+  return true;
+}
+function hasOwnHeight(el) {
+  const inline = el.style.height;
+  el.style.height = "";
+  const own = el.offsetHeight;
+  el.style.height = "auto";
+  const natural = el.offsetHeight;
+  el.style.height = inline;
+  return Math.abs(own - natural) > 1;
+}
+function followsContent(el, main) {
+  let top = el;
+  while (top.parentElement && top.parentElement !== main) top = top.parentElement;
+  const before = top.offsetHeight;
+  const inline = el.style.height;
+  el.style.height = `${el.offsetHeight + main.clientHeight}px`;
+  const grows = top.offsetHeight > before;
+  el.style.height = inline;
+  return grows;
+}
+function spaceBelow(el, main) {
+  const px = (value) => parseFloat(value) || 0;
+  let space = px(getComputedStyle(main).paddingBottom);
+  for (let node = el; node && node !== main; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    space += px(style.marginBottom);
+    if (node !== el) space += px(style.paddingBottom) + px(style.borderBottomWidth);
+  }
+  return space;
+}
+
+export { FillContext, useFillHeight };
+//# sourceMappingURL=chunk-2YSEME33.js.map
+//# sourceMappingURL=chunk-2YSEME33.js.map

package/dist/chunk-2YSEME33.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/use-fill-height.ts"],"names":[],"mappings":"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","file":"chunk-2YSEME33.js","sourcesContent":["import { createContext, useContext, useLayoutEffect, useState, type RefObject } from \"react\";\n\n/**\n * Sprint 25.16 A42 (P31): a page led by a chart, a board or a split view fills the height under its header, and its\n * content scrolls inside it; the page doesn't. SplitView (frame=\"page\"), Gantt and KanbanBoard use this one mechanism.\n *\n * The element takes the rest of the shell's <main> height (main's height less what sits above it and the padding below\n * it) when all of these hold:\n * - it leads the page: above it there is only the page's header, its chrome (notices, tabs, a toolbar, a search or\n *   filters row, however tall) and short rows, so a board in a dashboard's last card keeps its own height;\n * - it is the page's last content: nothing after it, up to <main>, takes room, so nothing below it is cut off (the\n *   shell's footer is not the page's: it sits below the fold, as it does under a SplitView frame=\"fill\");\n * - its height follows its content: neither its own class nor a box around it gives it one (a fixed height, a flex\n *   column that already gives it the rest), and given more, the page grows;\n * - the rest is tall enough to use (a phone on its side keeps the natural height, and the page scrolls).\n * Outside the shell's <main> (AppShell marks it), or inside a view that fills (a Gantt in a SplitView's pane), it keeps\n * its own height. Returns the height in pixels, or null for the natural height.\n */\nexport function useFillHeight(ref: RefObject<HTMLElement | null>, enabled = true): number | null {\n  const insideFill = useContext(FillContext);\n  const active = enabled && !insideFill;\n  const [height, setHeight] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const main = ref.current?.closest<HTMLElement>(\"main[data-shell-main]\");\n    if (!active || !main || typeof ResizeObserver === \"undefined\") {\n      setHeight(null);\n      return;\n    }\n    let frame = 0;\n    // the element is read on each measure: a view that changes its layout (stacked or side by side) changes its root\n    const measure = () => {\n      frame = 0;\n      const el = ref.current;\n      setHeight(el && main.contains(el) ? fillHeight(el, main) : null);\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(measure);\n    };\n    measure();\n    // main's height (the window, a phone's toolbar), and what sits above or after the element at the page's top level (a\n    // header's actions wrapping, a banner or a note arriving): the boxes there now, and any that arrive\n    const ro = new ResizeObserver(schedule);\n    const watch = (box: Element) => {\n      ro.observe(box);\n      for (const child of Array.from(box.children)) ro.observe(child);\n    };\n    const page = main.querySelector<HTMLElement>(\"[data-shell-content]\");\n    watch(main);\n    if (page) watch(page);\n    const mo = typeof MutationObserver === \"undefined\" ? null : new MutationObserver((records) => {\n      for (const record of records) record.addedNodes.forEach((node) => { if (node instanceof Element) ro.observe(node); });\n      schedule();\n    });\n    mo?.observe(main, { childList: true });\n    if (page) mo?.observe(page, { childList: true });\n    return () => {\n      ro.disconnect();\n      mo?.disconnect();\n      if (frame) cancelAnimationFrame(frame);\n    };\n  }, [ref, active]);\n  return active ? height : null;\n}\n\n/** Content inside a view that fills: it takes the view's height (h-full), never the page's. */\nexport const FillContext = createContext(false);\n\n/** Below this the rest of the screen is too short to scroll inside (about six rows of a chart). */\nconst MIN_FILL = 240;\n/** A row that may sit between the header and the view: tabs, a toolbar, a filters row (PageContainer's ROW_MAX). */\nconst ROW_MAX = 56;\n\nfunction fillHeight(el: HTMLElement, main: HTMLElement): number | null {\n  // the page's own content: the shell's wrapper above its footer, else main\n  const page = el.closest<HTMLElement>(\"[data-shell-content]\") ?? main;\n  if (!leadsPage(el, page) || !isLastContent(el, page) || hasOwnHeight(el) || !followsContent(el, main)) return null;\n  const mainBox = main.getBoundingClientRect();\n  const top = el.getBoundingClientRect().top - mainBox.top - main.clientTop + main.scrollTop;\n  const height = Math.floor(main.clientHeight - top - spaceBelow(el, main));\n  return height >= MIN_FILL ? height : null;\n}\n\n/** Whether a box takes room on the page: an overlay, a portal's anchor, a hidden or an empty node doesn't. */\nfunction takesRoom(box: Element): boolean {\n  const style = getComputedStyle(box);\n  if (style.display === \"none\" || style.position === \"absolute\" || style.position === \"fixed\") return false;\n  const rect = box.getBoundingClientRect();\n  return rect.height > 0 && rect.width > 0;\n}\n\n/**\n * The page's chrome, at any height: a notice (an Alert, a banner that wraps to two lines on a phone), tabs, a toolbar, a\n * search or filters row (the review of 1 October: a two-line banner turned the fill off). Content of the page's own (a\n * row of stats, cards, text) is not chrome.\n */\nconst CHROME = '[role=\"alert\"], [role=\"status\"], [role=\"tablist\"], [role=\"toolbar\"], [role=\"search\"]';\nconst isChrome = (box: Element) =>\n  box.matches(CHROME) || (box.children.length > 0 && Array.from(box.children).every((child) => !takesRoom(child) || child.matches(CHROME)));\n\n/** Above the element, up to the page's root: only the page's header (its title), its chrome, and rows no taller than ROW_MAX. */\nfunction leadsPage(el: HTMLElement, page: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node && node !== page; node = node.parentElement) {\n    for (let prev = node.previousElementSibling; prev; prev = prev.previousElementSibling) {\n      if (!takesRoom(prev)) continue;\n      if (prev.matches('[data-gs=\"page-header\"]') || prev.querySelector('[data-gs=\"page-header\"], h1')) continue;\n      if (isChrome(prev)) continue;\n      if (prev.getBoundingClientRect().height > ROW_MAX) return false;\n    }\n  }\n  return true;\n}\n\n/** Nothing after the element, up to the page's root, takes room. */\nfunction isLastContent(el: HTMLElement, page: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node && node !== page; node = node.parentElement) {\n    for (let next = node.nextElementSibling; next; next = next.nextElementSibling) {\n      if (takesRoom(next)) return false;\n    }\n  }\n  return true;\n}\n\n/**\n * The element's own CSS gives it a height that isn't its content's: a fixed height of its own (`h-[420px]`), or `h-full`\n * that resolves against a box which already has one. It keeps it. Read with the fill's own height set aside.\n */\nfunction hasOwnHeight(el: HTMLElement): boolean {\n  const inline = el.style.height;\n  el.style.height = \"\";\n  const own = el.offsetHeight;\n  el.style.height = \"auto\";\n  const natural = el.offsetHeight;\n  el.style.height = inline;\n  return Math.abs(own - natural) > 1;\n}\n\n/**\n * Given more height, does the page grow? Probed once: the element is made a screen taller and main's top-level box\n * measured. A box of fixed height around it, or a flex column that already gives it its height, absorbs it.\n */\nfunction followsContent(el: HTMLElement, main: HTMLElement): boolean {\n  let top: HTMLElement = el;\n  while (top.parentElement && top.parentElement !== main) top = top.parentElement;\n  const before = top.offsetHeight;\n  const inline = el.style.height;\n  el.style.height = `${el.offsetHeight + main.clientHeight}px`;\n  const grows = top.offsetHeight > before;\n  el.style.height = inline;\n  return grows;\n}\n\n/** The padding, borders and margins under the element, up to main's own padding: they stay below it. */\nfunction spaceBelow(el: HTMLElement, main: HTMLElement): number {\n  const px = (value: string) => parseFloat(value) || 0;\n  let space = px(getComputedStyle(main).paddingBottom);\n  for (let node: HTMLElement | null = el; node && node !== main; node = node.parentElement) {\n    const style = getComputedStyle(node);\n    space += px(style.marginBottom);\n    if (node !== el) space += px(style.paddingBottom) + px(style.borderBottomWidth);\n  }\n  return space;\n}\n"]}

package/dist/{chunk-6PL7FXYH.js → chunk-3CUKJ4VP.js}

@@ -1,10 +1,12 @@
-import { PreferencesContext, Button } from './chunk-7TOJ4G7S.js';
+import { PreferencesContext, Button } from './chunk-HZIP4EJI.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
-import { FormChangeCtx, useOverlayLayer, useReturnFocus, useFocusTrap, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-RT7RYGC3.js';
-import { SurfaceBoundary } from './chunk-CKWITUSH.js';
-import { useTextOverflow, Tooltip } from './chunk-CXMV7SXJ.js';
+import { FormChangeCtx } from './chunk-XVB55M3N.js';
+import { SurfaceBoundary } from './chunk-QM4SJKWV.js';
+import { usePopupFocus, useOverlayLayer, useReturnFocus, useFocusTrap, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-JXANCXK6.js';
+import { useTextOverflow, Tooltip } from './chunk-MD2EFMES.js';
+import { Icon } from './chunk-HYMXAIXN.js';
+import { usePosition } from './chunk-HP7WUZPK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
-import { Icon } from './chunk-4LDYR7QP.js';
 import { cn, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY } from './chunk-M2QRNBDQ.js';
 import { createContext, version, forwardRef, useState, useCallback, useRef, useEffect, isValidElement, useContext, useMemo, useId, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
@@ -564,9 +566,11 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
               "aria-labelledby": title ? titleId : labelledBy,
               style: sheet ? {
                 containerType: "inline-size",
+                "--ds-form-max": "none",
                 height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
               } : {
                 containerType: "inline-size",
+                "--ds-form-max": "none",
                 width: isHorizontal ? effectiveWidth : void 0,
                 maxWidth: isHorizontal ? "100%" : void 0,
                 height: isMobile ? "100%" : void 0,
@@ -728,6 +732,7 @@ var AppShell = forwardRef(function AppShell2({
   preferences,
   currentPath,
   homePath = "/",
+  navigate,
   focus,
   drawerWidth = "520px"
 }, ref) {
@@ -755,6 +760,16 @@ var AppShell = forwardRef(function AppShell2({
       setUnsavedCount((n) => n - 1);
     };
   }, []);
+  const [leftCount, setLeftCount] = useState(0);
+  const markFlowLeft = useCallback(() => {
+    setLeftCount((n) => n + 1);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      setLeftCount((n) => n - 1);
+    };
+  }, []);
   const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
   const [shellEl, setShellEl] = useState(null);
   const [chrome, setChrome] = useState({});
@@ -791,12 +806,17 @@ var AppShell = forwardRef(function AppShell2({
   return /* @__PURE__ */ jsx(PreferencesContext, { value: preferences ?? null, children: /* @__PURE__ */ jsx(DrawerWidthCtx, { value: drawerWidth, children: /* @__PURE__ */ jsx(
     AppShellContext,
     {
-      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome, hasLauncher, launcherCorner, hasFooter, focus: focus ?? null, hasUnsavedChanges: unsavedCount > 0, addUnsavedChanges, drawerWidth },
+      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome, hasLauncher, launcherCorner, hasFooter, focus: focus ?? null, hasUnsavedChanges: unsavedCount > 0, addUnsavedChanges, drawerWidth, navigate: navigate ?? null, flowLeft: leftCount > 0, markFlowLeft },
       children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
         setShellEl(el);
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
-      }, className: cn("relative h-screen flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden", className), children: [
+      }, className: cn(
+        // Sprint 25.16 A42: the dynamic viewport where the browser has it, so nothing hides under a phone browser's
+        // toolbar (100vh is the height with the toolbar hidden)
+        "relative h-screen supports-[height:100dvh]:h-dvh flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden",
+        className
+      ), children: [
         skipLink && /* @__PURE__ */ jsx(SkipLink, { href: `#${mainId}` }),
         layout === "sidebar-header" && navbar,
         layout === "multi-column" && navbar,
@@ -811,6 +831,7 @@ var AppShell = forwardRef(function AppShell2({
               {
                 ref: mainRef,
                 id: mainId,
+                "data-shell-main": "",
                 tabIndex: -1,
                 className: cn(
                   "flex-1 min-h-0 focus:outline-none",
@@ -819,7 +840,7 @@ var AppShell = forwardRef(function AppShell2({
                 ),
                 style: { containerType: "inline-size" },
                 children: scrollable ? footer ? /* @__PURE__ */ jsxs("div", { className: "min-h-full flex flex-col", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", "data-shell-content": "", children }),
                   footer
                 ] }) : children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
               }
@@ -847,6 +868,295 @@ var AppShell = forwardRef(function AppShell2({
     }
   ) }) });
 });
+function useCrumbFollow() {
+  const navigate = useAppShell()?.navigate ?? null;
+  return useCallback((e, item) => {
+    if (item.href && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
+    if (item.onClick) {
+      e.preventDefault();
+      item.onClick();
+      return;
+    }
+    if (!item.href) {
+      e.preventDefault();
+      return;
+    }
+    if (!navigate || e.defaultPrevented || !onThisSite(item.href)) return;
+    e.preventDefault();
+    navigate(item.href);
+  }, [navigate]);
+}
+function onThisSite(href) {
+  if (typeof window === "undefined") return false;
+  try {
+    return new URL(href, window.location.href).origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+var crumbGoes = (item) => !!(item.href || item.onClick);
+function SeparatorIcon({ type, size }) {
+  const iconSize = size === "sm" ? 10 : 12;
+  if (type === "chevron") return /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: iconSize });
+  if (type === "arrow") return /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: iconSize });
+  if (type === "dot") return /* @__PURE__ */ jsx("span", { children: "\xB7" });
+  return /* @__PURE__ */ jsx("span", { children: "/" });
+}
+var Breadcrumbs = forwardRef(function Breadcrumbs2({
+  items,
+  separator = "chevron",
+  variant = "inline",
+  itemVariant,
+  size = "md",
+  showIcons = false,
+  maxItems,
+  bleed = false,
+  contentMaxWidth,
+  className,
+  container,
+  "aria-label": label = "Breadcrumb"
+}, ref) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const follow = useCrumbFollow();
+  const [activeIdx, setActiveIdx] = useState(0);
+  const ellipsisBtnRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const closeDropdown = useCallback(() => setDropdownOpen(false), []);
+  const { isTop, returnFocus } = usePopupFocus(dropdownOpen, { trigger: ellipsisBtnRef, panel: dropdownRef, close: closeDropdown, tabExits: "any" });
+  const pos = usePosition(ellipsisBtnRef, dropdownRef, dropdownOpen, { side: "bottom", align: "start", offset: 4, flip: true });
+  const effectiveMaxItems = maxItems ? Math.max(maxItems, 2) : void 0;
+  const shouldCollapse = effectiveMaxItems && items.length > effectiveMaxItems;
+  const collapsedItems = shouldCollapse ? items.slice(1, -(effectiveMaxItems - 1)) : [];
+  const visibleItems = shouldCollapse ? [...items.slice(0, 1), null, ...items.slice(-(effectiveMaxItems - 1))] : items;
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (ellipsisBtnRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setDropdownOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [dropdownOpen, isTop, returnFocus]);
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const id = requestAnimationFrame(() => dropdownRef.current?.querySelector(`[data-index="${activeIdx}"]`)?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [dropdownOpen, activeIdx]);
+  function onMenuKeyDown(e) {
+    const last = collapsedItems.length - 1;
+    const next = e.key === "ArrowDown" ? activeIdx >= last ? 0 : activeIdx + 1 : e.key === "ArrowUp" ? activeIdx <= 0 ? last : activeIdx - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : null;
+    if (next === null) return;
+    e.preventDefault();
+    setActiveIdx(next);
+  }
+  const textClass = size === "sm" ? "text-xs" : "text-sm";
+  const gapClass = size === "sm" ? "gap-ds-1" : "gap-ds-1.5";
+  const iconSize = size === "sm" ? 12 : 14;
+  const isContainedBleed = variant === "contained" && bleed;
+  const wrapperClasses = cn(
+    variant === "contained" && !bleed && cn(
+      "bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-md)]",
+      size === "sm" ? "py-ds-1 px-ds-2" : "py-ds-1.5 px-ds-3"
+    ),
+    !isContainedBleed && className
+  );
+  function renderItem(item, _index, isLast) {
+    const isPill = itemVariant === "pill" || variant === "pill" && !itemVariant;
+    const insideContained = variant === "contained";
+    const pillClasses = isPill ? cn(
+      "rounded-[var(--ds-radius-full)]",
+      insideContained ? "bg-[var(--ds-bg-surface)]" : "bg-[var(--ds-bg-muted)]",
+      size === "sm" ? "px-ds-2 py-[2px]" : "px-ds-2.5 py-ds-0.5"
+    ) : "";
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      showIcons && item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, className: "shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+    ] });
+    if (!crumbGoes(item)) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: cn(
+            "flex items-center",
+            isLast ? "font-medium text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)]",
+            gapClass,
+            pillClasses
+          ),
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href ?? "#",
+        onClick: (e) => follow(e, item),
+        className: cn(
+          "text-[var(--ds-text-secondary)] flex items-center",
+          "hover:text-[var(--ds-text-primary)]",
+          "transition-colors duration-[var(--ds-transition-speed)]",
+          gapClass,
+          pillClasses
+        ),
+        children: content
+      }
+    );
+  }
+  const listContent = /* @__PURE__ */ jsx("ol", { className: cn("flex items-center flex-wrap", gapClass, textClass), children: visibleItems.map((item, i) => {
+    if (item === null) {
+      return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center", gapClass), children: [
+        i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--ds-text-secondary)] select-none flex items-center", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator, size }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ref: ellipsisBtnRef,
+            onClick: () => {
+              if (!dropdownOpen) setActiveIdx(0);
+              setDropdownOpen(!dropdownOpen);
+            },
+            "aria-label": "Show hidden breadcrumbs",
+            "aria-expanded": dropdownOpen,
+            "aria-haspopup": "menu",
+            className: cn(
+              "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
+              "transition-colors duration-[var(--ds-transition-speed)] cursor-pointer",
+              "flex items-center",
+              (itemVariant === "pill" || variant === "pill" && !itemVariant) && cn(
+                "rounded-[var(--ds-radius-full)]",
+                variant === "contained" ? "bg-[var(--ds-bg-surface)]" : "bg-[var(--ds-bg-muted)]",
+                size === "sm" ? "px-ds-2 py-[2px]" : "px-ds-2.5 py-ds-0.5"
+              )
+            ),
+            children: "\xB7\xB7\xB7"
+          }
+        )
+      ] }, "__ellipsis");
+    }
+    const isLast = i === visibleItems.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center", gapClass), children: [
+      i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--ds-text-secondary)] select-none flex items-center", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator, size }) }),
+      renderItem(item, i, isLast)
+    ] }, i);
+  }) });
+  const dropdown = dropdownOpen && collapsedItems.length > 0 && createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dropdownRef,
+        role: "menu",
+        "aria-label": "Hidden breadcrumbs",
+        onKeyDown: onMenuKeyDown,
+        className: cn(
+          "fixed z-[var(--ds-z-popover)] min-w-[160px] max-h-60 overflow-auto",
+          "bg-[var(--ds-bg-surface-elevated)]",
+          "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
+          "py-ds-1"
+        ),
+        style: { top: pos.top, left: pos.left },
+        children: collapsedItems.map((ci, idx) => {
+          const itemClass = cn(
+            "flex items-center w-full text-left text-sm cursor-pointer",
+            "px-ds-3 py-ds-1.5 transition-colors",
+            "text-[var(--ds-text-secondary)]",
+            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
+            "focus-visible:outline-none focus-visible:bg-[var(--ds-bg-muted)] focus-visible:text-[var(--ds-text-primary)] focus-visible:shadow-[inset_var(--ds-shadow-focus)]",
+            gapClass
+          );
+          const label2 = /* @__PURE__ */ jsxs(Fragment, { children: [
+            showIcons && ci.icon && /* @__PURE__ */ jsx(Icon, { name: ci.icon, size: iconSize, className: "shrink-0" }),
+            ci.label
+          ] });
+          return ci.href && !ci.onClick ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              "data-index": idx,
+              role: "menuitem",
+              href: ci.href,
+              tabIndex: idx === activeIdx ? 0 : -1,
+              className: itemClass,
+              onClick: (e) => {
+                setDropdownOpen(false);
+                follow(e, ci);
+              },
+              onKeyDown: (e) => {
+                if (e.key === " ") {
+                  e.preventDefault();
+                  e.currentTarget.click();
+                }
+              },
+              children: label2
+            },
+            idx
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-index": idx,
+              role: "menuitem",
+              tabIndex: idx === activeIdx ? 0 : -1,
+              "aria-disabled": !crumbGoes(ci) || void 0,
+              className: itemClass,
+              onClick: () => {
+                if (!ci.onClick) return;
+                setDropdownOpen(false);
+                ci.onClick();
+              },
+              children: label2
+            },
+            idx
+          );
+        })
+      }
+    ),
+    container ?? document.body
+  );
+  if (isContainedBleed) {
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": label,
+        className: cn(
+          "w-full bg-[var(--ds-bg-muted)]",
+          // Hairline under the band: it sits within ~1.2:1 of both canvas and a tinted header, so the edge needs a line.
+          "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("w-full mx-auto px-ds-6", size === "sm" ? "py-ds-1" : "py-ds-1.5"),
+              style: { maxWidth: contentMaxWidth ?? "var(--ds-bp-xl)" },
+              children: listContent
+            }
+          ),
+          dropdown
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": label, className: wrapperClasses, children: [
+    listContent,
+    dropdown
+  ] });
+});
 function useCompact(ref, breakpoint, band = 0) {
   const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
   const width = useElementWidth(ref);
@@ -874,6 +1184,6 @@ function useElementWidth(ref) {
   return width;
 }
 
-export { AppShell, DiscardConfirm, Drawer, DrawerFooterCtx, DrawerPanel, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBelow, useCloseSettle, useCompact, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
-//# sourceMappingURL=chunk-6PL7FXYH.js.map
-//# sourceMappingURL=chunk-6PL7FXYH.js.map
+export { AppShell, Breadcrumbs, DiscardConfirm, Drawer, DrawerFooterCtx, DrawerPanel, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, crumbGoes, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBelow, useCloseSettle, useCompact, useCrumbFollow, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
+//# sourceMappingURL=chunk-3CUKJ4VP.js.map
+//# sourceMappingURL=chunk-3CUKJ4VP.js.map