gridsmith-ui 0.22.0 → 0.24.0

package/dist/Breadcrumbs-CGS8GKl-.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { IconName } from './icons.js';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: IconName;
+}
+type BreadcrumbsVariant = "inline" | "contained" | "pill";
+type BreadcrumbsSeparator = "slash" | "chevron" | "dot" | "arrow";
+type BreadcrumbsSize = "sm" | "md";
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    separator?: BreadcrumbsSeparator;
+    variant?: BreadcrumbsVariant;
+    /** Visual treatment of individual breadcrumb items — independent of layout variant. */
+    itemVariant?: "default" | "pill";
+    size?: BreadcrumbsSize;
+    showIcons?: boolean;
+    maxItems?: number;
+    /** Full-bleed: contained background extends edge-to-edge, breaking out of parent padding. Text stays aligned with sibling content. */
+    bleed?: boolean;
+    /** Max-width for bleed content alignment. Defaults to --ds-bp-xl. */
+    contentMaxWidth?: string;
+    className?: string;
+    container?: Element | DocumentFragment;
+    /** The landmark's name. Default "Breadcrumb"; a second trail on the page names itself (SplitView's path: "Path"). */
+    "aria-label"?: string;
+}
+declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
+
+export { type BreadcrumbItem as B, Breadcrumbs as a, type BreadcrumbsSeparator as b, type BreadcrumbsSize as c, type BreadcrumbsVariant as d };

package/dist/chat.js

@@ -1,4 +1,4 @@
-import { Divider, CodeBlock, Link } from './chunk-EYMGLK4M.js';
+import { Divider, CodeBlock, Link } from './chunk-SVP2IG4S.js';
 import './chunk-SBTBMAIU.js';
 import './chunk-CXMV7SXJ.js';
 import './chunk-7Q46JXSK.js';

package/dist/chunk-2PWGJ4PK.js

@@ -0,0 +1,45 @@
+import { createContext, createElement, useContext, useLayoutEffect } from 'react';
+
+// ../../showcase/src/lib/page-actions.ts
+var PageActionsCtx = createContext(null);
+var CardSurfaceCtx = createContext(false);
+var SplitPaneCtx = createContext(false);
+var TableCardCtx = createContext(false);
+var SplitListFramerCtx = createContext(null);
+function useReportToList(kind) {
+  const report = useContext(SplitListFramerCtx);
+  useLayoutEffect(() => {
+    if (!report) return;
+    report(kind, true);
+    return () => report(kind, false);
+  }, [report, kind]);
+}
+function useFramesItself() {
+  useReportToList("framed");
+}
+function useScrollsInside() {
+  useReportToList("scrolls");
+}
+function SurfaceBoundary({ children, pane = false, framer = null }) {
+  return createElement(
+    CardSurfaceCtx,
+    { value: false },
+    createElement(
+      SplitPaneCtx,
+      { value: pane },
+      createElement(
+        TableCardCtx,
+        { value: false },
+        createElement(
+          PageActionsCtx,
+          { value: null },
+          createElement(SplitListFramerCtx, { value: framer }, children)
+        )
+      )
+    )
+  );
+}
+
+export { CardSurfaceCtx, PageActionsCtx, SplitPaneCtx, SurfaceBoundary, TableCardCtx, useFramesItself, useScrollsInside };
+//# sourceMappingURL=chunk-2PWGJ4PK.js.map
+//# sourceMappingURL=chunk-2PWGJ4PK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/page-actions.ts","../../../showcase/src/lib/surface-context.ts"],"names":["createContext"],"mappings":";;;AAwBO,IAAM,cAAA,GAAiB,cAAsC,IAAI;AClBjE,IAAM,cAAA,GAAiBA,cAAc,KAAK;AAS1C,IAAM,YAAA,GAAeA,cAA6B,KAAK;AAOvD,IAAM,YAAA,GAAeA,cAAc,KAAK;AAWxC,IAAM,kBAAA,GAAqBA,cAAsC,IAAI,CAAA;AAE5E,SAAS,gBAAgB,IAAA,EAA4B;AACnD,EAAA,MAAM,MAAA,GAAS,WAAW,kBAAkB,CAAA;AAC5C,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,EAAQ;AACb,IAAA,MAAA,CAAO,MAAM,IAAI,CAAA;AACjB,IAAA,OAAO,MAAM,MAAA,CAAO,IAAA,EAAM,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,MAAA,EAAQ,IAAI,CAAC,CAAA;AACnB;AAGO,SAAS,eAAA,GAAkB;AAChC,EAAA,eAAA,CAAgB,QAAQ,CAAA;AAC1B;AAGO,SAAS,gBAAA,GAAmB;AACjC,EAAA,eAAA,CAAgB,SAAS,CAAA;AAC3B;AASO,SAAS,gBAAgB,EAAE,QAAA,EAAU,OAAO,KAAA,EAAO,MAAA,GAAS,MAAK,EAAmF;AAGzJ,EAAA,OAAO,aAAA;AAAA,IAAc,cAAA;AAAA,IAAgB,EAAE,OAAO,KAAA,EAAM;AAAA,IAClD,aAAA;AAAA,MAAc,YAAA;AAAA,MAAc,EAAE,OAAO,IAAA,EAAK;AAAA,MACxC,aAAA;AAAA,QAAc,YAAA;AAAA,QAAc,EAAE,OAAO,KAAA,EAAM;AAAA,QACzC,aAAA;AAAA,UAAc,cAAA;AAAA,UAAgB,EAAE,OAAO,IAAA,EAAK;AAAA,UAC1C,cAAc,kBAAA,EAAoB,EAAE,KAAA,EAAO,MAAA,IAAU,QAAQ;AAAA;AAAC;AAAC;AAAC,GAAC;AAC3E","file":"chunk-2PWGJ4PK.js","sourcesContent":["import { createContext } from \"react\";\nimport type { ControlSize } from \"../components/Button\";\n\n/**\n * Sprint 25.16 A4 (R28-7): the slot in a page's own PageHeader for its actions (PageActions). PageContainer provides it,\n * its header draws it while a page asks, and the page's PageActions render into it. The review of 1 October:\n * - content that starts afresh (an overlay's body, a SplitView's pane: SurfaceBoundary) has no slot, so a header there\n *   (a message's own header, a drawer's) never takes the page's actions;\n * - the page's header is the first slot in the page, so a second header that comes and goes hands nothing on;\n * - a container with no header of its own (a page that wraps itself in one under an area layout) passes its page's\n *   actions to the container around it;\n * - the actions take the header's control size (a minimal or snapping header draws its own actions small).\n */\nexport interface PageActionsSlot {\n  /** A page below asks for the slot: a PageActions is drawn. */\n  wanted: boolean;\n  /** Where the actions go: the slot of the page's header, at the size its controls are drawn. */\n  target: { el: HTMLElement; size: ControlSize | null } | null;\n  /** A header's slot, while drawn, with its controls' size; returns its release. */\n  register: (el: HTMLElement, size: ControlSize | null) => () => void;\n  /** A PageActions asks for the slot while drawn; returns its release. */\n  add: () => () => void;\n}\n\nexport const PageActionsCtx = createContext<PageActionsSlot | null>(null);\n","import { createContext, createElement, useContext, useLayoutEffect, type ReactNode } from \"react\";\nimport { PageActionsCtx } from \"./page-actions\";\n\n/**\n * True inside a Card's surface. A StackedList reads it to inset its rows to the card's header (px-ds-5).\n */\nexport const CardSurfaceCtx = createContext(false);\n\n/**\n * The SplitView pane content sits in (\"list\", \"detail\", \"aside\"), false outside one. A StackedList reads it to take its\n * inset from the pane (Sprint 25.4 C-5): rows keep their padding so the selection rail sits at the pane's edge and never\n * touches content. A pane header (SectionHeading variant=\"pane\") in the detail insets at the page's gutter, as the item's\n * path above it does, and in the list at its rows' inset (the owner's review of 1 October).\n */\nexport type SplitPaneKind = false | \"list\" | \"detail\" | \"aside\";\nexport const SplitPaneCtx = createContext<SplitPaneKind>(false);\n\n/**\n * True inside a Table or DataGrid card (the phone layout below mobileBreakpoint). An EntityCell reads it to keep\n * the avatar beside the text and align to the value column (Sprint 25.4, round 7: the stacked cell made the card\n * three lines taller than it needed to be).\n */\nexport const TableCardCtx = createContext(false);\n\n/**\n * Sprint 25.14 A44: what a SplitView's list pane holds, as its content reports it while mounted. \"framed\": content that\n * draws its own frame or cards (a KanbanBoard, a CardGrid, a Table, a DataGrid). \"scrolls\": content with no frame of its\n * own that scrolls inside the pane (a StackedList, a Gantt, a VirtualizedList), which the view's hairline frames. The\n * view drops its frame and surface when the pane holds framed content and nothing that scrolls (P32: no frame around\n * what frames itself; a hairline around what scrolls inside). Here, not in SplitView, so a board or a card grid never\n * imports the resizable panels. Null outside a list pane: overlays and the view's other panes reset it (SurfaceBoundary).\n */\nexport type SplitListReport = (kind: \"framed\" | \"scrolls\", present: boolean) => void;\nexport const SplitListFramerCtx = createContext<SplitListReport | null>(null);\n\nfunction useReportToList(kind: \"framed\" | \"scrolls\") {\n  const report = useContext(SplitListFramerCtx);\n  useLayoutEffect(() => {\n    if (!report) return;\n    report(kind, true);\n    return () => report(kind, false);\n  }, [report, kind]);\n}\n\n/** Tell a SplitView whose list pane this sits in that it draws its own frame or cards (A44). */\nexport function useFramesItself() {\n  useReportToList(\"framed\");\n}\n\n/** Tell a SplitView whose list pane this sits in that it scrolls inside the pane with no frame of its own (A44). */\nexport function useScrollsInside() {\n  useReportToList(\"scrolls\");\n}\n\n/**\n * Where content starts afresh: an overlay's body, an opened table row's panel, a SplitView's pane. What a Card, a pane\n * or a table card told the content around it stops here (the review of 30 September: a StackedList in a Drawer opened\n * from a Card took the card's inset, and one in a Dialog declared in a list pane the pane's, so neither lined up with\n * the overlay's gutter), and so does the page's actions slot. A pane passes `pane` (which pane its content is in) and\n * the list pane its `framer`.\n */\nexport function SurfaceBoundary({ children, pane = false, framer = null }: { children: ReactNode; pane?: SplitPaneKind; framer?: SplitListReport | null }) {\n  // the page's actions belong to the page's own header (Sprint 25.16's review): a header in a pane or an overlay never\n  // takes them, and PageActions there renders nothing\n  return createElement(CardSurfaceCtx, { value: false },\n    createElement(SplitPaneCtx, { value: pane },\n      createElement(TableCardCtx, { value: false },\n        createElement(PageActionsCtx, { value: null },\n          createElement(SplitListFramerCtx, { value: framer }, children)))));\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-3BRQRKDO.js

@@ -0,0 +1,72 @@
+import { useRef, useState, useCallback } from 'react';
+
+// ../../showcase/src/lib/use-scroll-edges.ts
+var EDGE_FADE = 24;
+var NONE = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };
+var same = (a, b) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;
+function useScrollEdges(options = {}) {
+  const { enabled = true, fade = EDGE_FADE, noFade } = options;
+  const elRef = useRef(null);
+  const observer = useRef(null);
+  const borders = useRef({ x: 0, y: 0 });
+  const [state, setState] = useState(NONE);
+  const measure = useCallback(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const next = {
+      left: el.scrollLeft > 1,
+      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
+      vertical: el.scrollHeight > el.clientHeight + 1,
+      gutterRight: Math.max(0, el.offsetWidth - el.clientWidth - borders.current.x),
+      gutterBottom: Math.max(0, el.offsetHeight - el.clientHeight - borders.current.y)
+    };
+    setState((prev) => same(prev, next) ? prev : next);
+  }, []);
+  const ref = useCallback((el) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    elRef.current = el;
+    if (!el || !enabled) return;
+    const style = getComputedStyle(el);
+    const px = (v) => parseFloat(v) || 0;
+    borders.current = { x: px(style.borderLeftWidth) + px(style.borderRightWidth), y: px(style.borderTopWidth) + px(style.borderBottomWidth) };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const o = new ResizeObserver(measure);
+    o.observe(el);
+    for (const child of Array.from(el.children)) o.observe(child);
+    observer.current = o;
+  }, [enabled, measure]);
+  const fadeLeft = state.left && !noFade?.left;
+  const fadeRight = state.right && !noFade?.right;
+  const shown = enabled && (fadeLeft || fadeRight);
+  const { gutterRight: gr, gutterBottom: gb } = state;
+  const fadeLayer = `linear-gradient(to right, ${fadeLeft ? `transparent 0, black ${fade}px` : "black 0"}, ${fadeRight ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
+  const gutters = [gb > 0 && { size: `100% ${gb}px`, position: "0 100%" }, gr > 0 && { size: `${gr}px 100%`, position: "100% 0" }].filter(Boolean);
+  const mask = shown ? {
+    image: [fadeLayer, ...gutters.map(() => "linear-gradient(black, black)")].join(", "),
+    size: ["100% 100%", ...gutters.map((g) => g.size)].join(", "),
+    position: ["0 0", ...gutters.map((g) => g.position)].join(", ")
+  } : void 0;
+  return {
+    /** The scroller's ref (a callback). */
+    ref,
+    /** The scroller itself, for code that moves it. */
+    elRef,
+    measure,
+    /** Content hides past a side edge: the scroller moves sideways, and its edges fade (but those in `noFade`). */
+    overflowing: enabled && (state.left || state.right),
+    /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */
+    scrollable: enabled && (state.left || state.right || state.vertical),
+    edges: { left: state.left, right: state.right },
+    /** For the scroller: `data-fade` names the faded edges ("left", "right" or "left right"), the style masks them. */
+    fadeProps: {
+      "data-fade": shown ? [fadeLeft && "left", fadeRight && "right"].filter(Boolean).join(" ") : void 0,
+      style: mask ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" } : void 0
+    }
+  };
+}
+
+export { EDGE_FADE, useScrollEdges };
+//# sourceMappingURL=chunk-3BRQRKDO.js.map
+//# sourceMappingURL=chunk-3BRQRKDO.js.map

package/dist/chunk-3BRQRKDO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/use-scroll-edges.ts"],"names":[],"mappings":"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","file":"chunk-3BRQRKDO.js","sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\n/** Which edges of a horizontal scroller have content past them. */\nexport interface ScrollEdges { left: boolean; right: boolean }\n\n/** The width of an edge fade, in px (Sprint 25.4 chunk 5's, on the Tabs strip). */\nexport const EDGE_FADE = 24;\n\n/** What a measure reads: the edges with more, whether it scrolls up and down, and the room its scrollbars take. */\ninterface ScrollState extends ScrollEdges { vertical: boolean; gutterRight: number; gutterBottom: number }\n\nconst NONE: ScrollState = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };\nconst same = (a: ScrollState, b: ScrollState) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;\n\n/**\n * A horizontal scroller's edge fades — one mechanism for the Tabs strip (Sprint 25.4 chunk 5) and the Table's scroll\n * area (Sprint 25.10 T2, round 25's R25-2: a four-column table in half a row scrolled sideways, and on a Mac, where the\n * scrollbar hides until you scroll, nothing showed there was more). It reports which edges hide content and masks the\n * scroller on those edges only: none at either end, none when everything fits. A mask fades what is under it, so it\n * follows whatever surface the scroller sits on, and it takes no clicks. Scrollbars that take room (Windows, Linux, a\n * Mac set to always show them) stay whole: the mask leaves their gutters opaque and the fade ends where they start\n * (Sprint 25.10 review). Measured on scroll (pass `measure` as onScroll) and whenever the scroller or its content\n * changes size. Left to right only, as the library is.\n */\nexport function useScrollEdges<T extends HTMLElement = HTMLDivElement>(options: { enabled?: boolean; fade?: number; noFade?: { left?: boolean; right?: boolean } } = {}) {\n  // `noFade`: an edge that shows what it hides some other way, as a table's pinned columns do with a shadow at their inner\n  // edge (Sprint 25.13 A35); the other edge still fades (the review of 30 September: one pinned column dropped both)\n  const { enabled = true, fade = EDGE_FADE, noFade } = options;\n  const elRef = useRef<T | null>(null);\n  const observer = useRef<ResizeObserver | null>(null);\n  // the scroller's own borders, read once when it attaches: what offsetWidth counts beyond clientWidth and a scrollbar\n  const borders = useRef({ x: 0, y: 0 });\n  const [state, setState] = useState<ScrollState>(NONE);\n  const measure = useCallback(() => {\n    const el = elRef.current;\n    if (!el) return;\n    const next: ScrollState = {\n      left: el.scrollLeft > 1,\n      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,\n      vertical: el.scrollHeight > el.clientHeight + 1,\n      gutterRight: Math.max(0, el.offsetWidth - el.clientWidth - borders.current.x),\n      gutterBottom: Math.max(0, el.offsetHeight - el.clientHeight - borders.current.y),\n    };\n    setState((prev) => (same(prev, next) ? prev : next));\n  }, []);\n  // A callback ref, so the observer follows the element (a Table's scroll area mounts only on desktop, and again after\n  // a switch from cards) and nothing re-renders when it attaches: state changes only when what it measures does.\n  const ref = useCallback((el: T | null) => {\n    observer.current?.disconnect();\n    observer.current = null;\n    elRef.current = el;\n    if (!el || !enabled) return;\n    const style = getComputedStyle(el);\n    const px = (v: string) => parseFloat(v) || 0;\n    borders.current = { x: px(style.borderLeftWidth) + px(style.borderRightWidth), y: px(style.borderTopWidth) + px(style.borderBottomWidth) };\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    // the content too: a table's rows arriving widen it without the scroller changing size\n    const o = new ResizeObserver(measure);\n    o.observe(el);\n    for (const child of Array.from(el.children)) o.observe(child);\n    observer.current = o;\n  }, [enabled, measure]);\n  const fadeLeft = state.left && !noFade?.left;\n  const fadeRight = state.right && !noFade?.right;\n  const shown = enabled && (fadeLeft || fadeRight);\n  const { gutterRight: gr, gutterBottom: gb } = state;\n  const fadeLayer = `linear-gradient(to right, ${fadeLeft ? `transparent 0, black ${fade}px` : \"black 0\"}, ${fadeRight ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : \"black 100%\"})`;\n  // an opaque layer over each scrollbar gutter; mask layers add up, so a scrollbar shows whole over the fade\n  const gutters = [gb > 0 && { size: `100% ${gb}px`, position: \"0 100%\" }, gr > 0 && { size: `${gr}px 100%`, position: \"100% 0\" }].filter(Boolean) as Array<{ size: string; position: string }>;\n  const mask = shown\n    ? {\n        image: [fadeLayer, ...gutters.map(() => \"linear-gradient(black, black)\")].join(\", \"),\n        size: [\"100% 100%\", ...gutters.map((g) => g.size)].join(\", \"),\n        position: [\"0 0\", ...gutters.map((g) => g.position)].join(\", \"),\n      }\n    : undefined;\n  return {\n    /** The scroller's ref (a callback). */\n    ref,\n    /** The scroller itself, for code that moves it. */\n    elRef,\n    measure,\n    /** Content hides past a side edge: the scroller moves sideways, and its edges fade (but those in `noFade`). */\n    overflowing: enabled && (state.left || state.right),\n    /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */\n    scrollable: enabled && (state.left || state.right || state.vertical),\n    edges: { left: state.left, right: state.right } as ScrollEdges,\n    /** For the scroller: `data-fade` names the faded edges (\"left\", \"right\" or \"left right\"), the style masks them. */\n    fadeProps: {\n      \"data-fade\": shown ? [fadeLeft && \"left\", fadeRight && \"right\"].filter(Boolean).join(\" \") : undefined,\n      style: mask\n        ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: \"no-repeat\", WebkitMaskRepeat: \"no-repeat\" }\n        : undefined,\n    },\n  };\n}\n"]}

package/dist/{chunk-2RV23OBK.js → chunk-6XAU44U4.js}

@@ -1,5 +1,6 @@
 import { ControlSizeContext, triggerType, Button, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS } from './chunk-7TOJ4G7S.js';
-import { useReportedChange, useOptionalFormContext, usePopupFocus, focusAfterRemoval, usePressMarks, focusInitial, FormChangeCtx } from './chunk-RT7RYGC3.js';
+import { useReportedChange, useOptionalFormContext, FormChangeCtx } from './chunk-XVB55M3N.js';
+import { usePopupFocus, focusAfterRemoval, usePressMarks, focusInitial } from './chunk-JXANCXK6.js';
 import { useTextOverflow, Tooltip, usePosition } from './chunk-CXMV7SXJ.js';
 import { Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
@@ -9,6 +10,15 @@ import { createContext, useContext, useRef, useCallback, useEffect, useId, useSt
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
+// ../../showcase/src/lib/control-looks.ts
+var CHECK_FILL = "bg-[var(--ds-check-bg)] [background-image:var(--ds-check-gradient,var(--ds-gradient))]";
+var SWITCH_TRACK_ON = "bg-[var(--ds-check-bg)] border-transparent";
+var SWITCH_TRACK_OFF = "bg-[var(--ds-switch-off-fill,var(--ds-bg-muted))] border-[var(--ds-switch-off-edge,var(--ds-border-default))]";
+var SWITCH_KNOB_ON = "bg-[var(--ds-bg-surface)] supports-[color:oklch(from_red_l_c_h)]:bg-[oklch(from_var(--ds-bg-surface)_l_c_h_/_max(alpha,min(1,alpha*1000)))]";
+var SWITCH_KNOB_OFF = "bg-[var(--ds-switch-off-knob,var(--ds-bg-surface))]";
+var SWITCH_KNOB_MOTION = "transition-[transform,background-color] duration-[var(--ds-transition-speed)]";
+var FilterRowContext = createContext(false);
+var FILTER_FIELD_WIDTH = "w-[280px] max-w-full";
 var UNCONTROLLED = /* @__PURE__ */ Symbol("uncontrolled");
 var valueOf = (e) => {
   const t = e.target;
@@ -28,6 +38,7 @@ var INPUT_TEXT = {
 function Input({ className, size: sizeProp, error = false, prefix, suffix, ...props }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
+  const width = useContext(FilterRowContext) ? FILTER_FIELD_WIDTH : "w-full";
   const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
   const borderColor = error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]";
   const hoverBorder = !error && !props.disabled && !props.readOnly ? "hover:border-[var(--ds-input-border-hover)]" : "";
@@ -36,7 +47,8 @@ function Input({ className, size: sizeProp, error = false, prefix, suffix, ...pr
       "div",
       {
         className: cn(
-          "flex items-center w-full",
+          "flex items-center",
+          width,
           INPUT_HEIGHT[size],
           "bg-[var(--ds-input-bg)]",
           "border-[length:var(--ds-border-width)]",
@@ -78,7 +90,8 @@ function Input({ className, size: sizeProp, error = false, prefix, suffix, ...pr
     {
       "aria-invalid": error || void 0,
       className: cn(
-        "flex w-full",
+        "flex",
+        width,
         INPUT_TEXT[size],
         INPUT_HEIGHT[size],
         "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
@@ -185,8 +198,9 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
         "transition-colors duration-[var(--ds-transition-speed)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         disabled ? "cursor-not-allowed" : "cursor-pointer",
-        checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
-        error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
+        // Sprint 25.14 A20: on, the checked colour, as a checkbox's; off, the outline in the edge colour (lib/control-looks.ts)
+        checked ? SWITCH_TRACK_ON : SWITCH_TRACK_OFF,
+        error && "border-[var(--ds-status-error)]"
       ),
       style: { width: dims.w, height: dims.h },
       children: /* @__PURE__ */ jsx(
@@ -194,10 +208,11 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
         {
           className: cn(
             "pointer-events-none inline-block shrink-0",
-            "bg-[var(--ds-bg-surface)]",
+            // on: the surface made opaque; off: the edge colour, beside the outline
+            checked ? SWITCH_KNOB_ON : SWITCH_KNOB_OFF,
             "border-[length:var(--ds-border-width)] border-transparent",
             "rounded-[var(--ds-radius-full)]",
-            "transition-transform"
+            SWITCH_KNOB_MOTION
           ),
           style: {
             width: dims.thumb,
@@ -1344,6 +1359,6 @@ function useWholeListCheck(component, length, pager) {
   }, [component, length, total]);
 }
 
-export { AddAnotherRowCtx, Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, pagerPart, useField, useFieldControl, usePagination, useWholeListCheck, warnOnce };
-//# sourceMappingURL=chunk-2RV23OBK.js.map
-//# sourceMappingURL=chunk-2RV23OBK.js.map
+export { AddAnotherRowCtx, CHECK_FILL, Dropdown, Field, FilterRowContext, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, SWITCH_KNOB_MOTION, SWITCH_KNOB_OFF, SWITCH_KNOB_ON, SWITCH_TRACK_OFF, SWITCH_TRACK_ON, Textarea, Toggle, pagerPart, useField, useFieldControl, usePagination, useWholeListCheck, warnOnce };
+//# sourceMappingURL=chunk-6XAU44U4.js.map
+//# sourceMappingURL=chunk-6XAU44U4.js.map