@apliteni/apliteni-ui 0.58.2 → 0.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.58.2",
+  "version": "0.59.0",
   "workspaces": [
     "react"
   ],
@@ -18,9 +18,17 @@
     "access": "public"
   },
   "exports": {
-    ".": "./src/index.js",
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
     "./guidelines/*": "./guidelines/*",
-    "./motion": "./src/motion.js",
+    "./motion": {
+      "types": "./src/motion.d.ts",
+      "import": "./src/motion.js",
+      "default": "./src/motion.js"
+    },
     "./inline": "./src/inline.js",
     "./css": "./src/index.css",
     "./tokens": "./src/tokens/tokens.css",

package/react/dist/index.d.ts

@@ -465,7 +465,7 @@ type FilterBarProps = {
     onClear: () => void;
     onChange: (id: string, value: string | undefined) => void;
 };
-declare function FilterBar(props: FilterBarProps): react.JSX.Element;
+declare function FilterBar({ filters, label, clearLabel, disabled, busy, onRemove, onClear, onChange }: FilterBarProps): react.JSX.Element;
 
 type KeyValueRow = {
     label: string;

package/react/dist/index.js

@@ -1796,13 +1796,18 @@ function BackLink({
 }
 
 // src/TableValues.tsx
-import { numericValue, deltaValue } from "@apliteni/apliteni-ui";
+import { formatNumericValue, formatDeltaValue } from "@apliteni/apliteni-ui";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function NumericValue(props) {
-  return /* @__PURE__ */ jsx17("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
+  const value = formatNumericValue(props);
+  return /* @__PURE__ */ jsx17("span", { children: /* @__PURE__ */ jsxs15("span", { className: "ui-value", "aria-label": value.missing, children: [
+    value.text,
+    value.unit && /* @__PURE__ */ jsx17("span", { className: "ui-value__unit", children: value.unit })
+  ] }) });
 }
 function DeltaValue(props) {
-  return /* @__PURE__ */ jsx17("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
+  const value = formatDeltaValue(props);
+  return /* @__PURE__ */ jsx17("span", { children: /* @__PURE__ */ jsx17("span", { className: value.className, "aria-describedby": value.basisId || void 0, children: value.text }) });
 }
 function RowIdentity({ symbol, name, logo, href }) {
   const Tag = href ? "a" : "span";
@@ -1852,44 +1857,95 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 }
 
 // src/FilterBar.tsx
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef11 } from "react";
-import { filterBar, initFilterBar } from "@apliteni/apliteni-ui";
-import { jsx as jsx19 } from "react/jsx-runtime";
-function FilterBar(props) {
-  const host = useRef11(null);
-  const latest = useRef11(props);
-  latest.current = props;
-  const controller = useRef11(null);
-  const initial = useRef11({ __html: filterBar(props) });
-  useLayoutEffect4(() => {
-    const el = host.current;
-    controller.current = initFilterBar(el, latest.current);
-    const remove = (e) => latest.current.onRemove(e.detail.id);
-    const clear = () => latest.current.onClear();
-    const change = (e) => {
-      const { id, value } = e.detail;
-      latest.current.onChange(id, value);
-    };
-    el.addEventListener("ui-filter-remove", remove);
-    el.addEventListener("ui-filter-clear", clear);
-    el.addEventListener("ui-filter-change", change);
-    return () => {
-      controller.current?.destroy();
-      el.removeEventListener("ui-filter-remove", remove);
-      el.removeEventListener("ui-filter-clear", clear);
-      el.removeEventListener("ui-filter-change", change);
-    };
-  }, []);
-  useLayoutEffect4(() => {
-    controller.current?.update(props);
-  }, [props.filters, props.label, props.clearLabel, props.disabled, props.busy]);
-  return /* @__PURE__ */ jsx19("div", { ref: host, dangerouslySetInnerHTML: initial.current });
+import { useRef as useRef11, useState as useState7 } from "react";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters", disabled = false, busy = false, onRemove, onClear, onChange }) {
+  const bar = useRef11(null);
+  const focused = useRef11(null);
+  const [opened, setOpened] = useState7({});
+  const blocked = disabled || busy;
+  useIsoLayoutEffect(() => {
+    const stale = Object.keys(opened).filter((id) => !filters.some((filter) => filter.id === id && filter.open === opened[id].against));
+    if (stale.length) setOpened((previous) => Object.fromEntries(Object.entries(previous).filter(([id]) => !stale.includes(id))));
+    const prior = focused.current;
+    if (!prior || prior.id === null && filters.length > 0 || filters.some((f) => f.id === prior.id)) return;
+    const chips = Array.from(bar.current?.querySelectorAll("[data-filter-id]") ?? []);
+    const next = chips.slice(prior.index).find((chip) => !chip.disabled) || chips.slice(0, prior.index).reverse().find((chip) => !chip.disabled);
+    const target = !blocked && next?.querySelector("[data-dropdown-trigger]");
+    focused.current = null;
+    (target || bar.current)?.focus();
+  });
+  return /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsxs16(
+    "fieldset",
+    {
+      ref: bar,
+      className: "ui-filter-bar",
+      "data-filter-bar": "",
+      disabled: blocked,
+      "aria-busy": busy || void 0,
+      tabIndex: -1,
+      onBlur: (event) => {
+        if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focused.current = null;
+      },
+      children: [
+        /* @__PURE__ */ jsx19("legend", { className: "ui-filter-bar__legend", children: label }),
+        filters.map((filter, index) => /* @__PURE__ */ jsxs16(
+          "fieldset",
+          {
+            className: "ui-filter-bar__chip",
+            "data-filter-id": filter.id,
+            disabled: filter.disabled,
+            onFocus: () => {
+              focused.current = { id: filter.id, index };
+            },
+            children: [
+              /* @__PURE__ */ jsx19("legend", { className: "ui-filter-bar__legend", children: filter.label }),
+              /* @__PURE__ */ jsx19(
+                Dropdown,
+                {
+                  label: filter.label,
+                  value: filter.value,
+                  items: filter.items,
+                  variant: "select",
+                  ariaLabel: `${filter.label}: ${filter.value}`,
+                  open: !blocked && !filter.disabled && (opened[filter.id] && opened[filter.id].against === filter.open ? opened[filter.id].open : !!filter.open),
+                  onOpenChange: (open) => setOpened((previous) => ({ ...previous, [filter.id]: { open, against: filter.open } })),
+                  onSelect: (value) => {
+                    if (!blocked && !filter.disabled) onChange(filter.id, value == null ? void 0 : String(value));
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx19(
+                "button",
+                {
+                  type: "button",
+                  className: "ui-filter-bar__remove",
+                  "data-filter-remove": "",
+                  "aria-label": `Remove ${filter.label} filter`,
+                  onClick: () => {
+                    if (!blocked && !filter.disabled) onRemove(filter.id);
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          },
+          filter.id
+        )),
+        /* @__PURE__ */ jsx19("span", { "data-filter-clear": "", onFocus: () => {
+          focused.current = { id: null, index: 0 };
+        }, children: /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "ghost", disabled: !filters.length, onClick: () => {
+          if (!blocked) onClear();
+        }, children: clearLabel }) })
+      ]
+    }
+  ) });
 }
 
 // src/KeyValueList.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function detail({ value, redacted }) {
-  if (redacted) return /* @__PURE__ */ jsxs16("span", { className: "ui-kv__hidden", children: [
+  if (redacted) return /* @__PURE__ */ jsxs17("span", { className: "ui-kv__hidden", children: [
     /* @__PURE__ */ jsx20(Icon, { name: "eyeOff" }),
     "Hidden"
   ] });
@@ -1897,24 +1953,24 @@ function detail({ value, redacted }) {
   return typeof value === "boolean" ? String(value) : value;
 }
 function KeyValueList({ rows, columns = 1, className, ...rest }) {
-  return /* @__PURE__ */ jsx20("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs16("div", { className: "ui-drawer__row", children: [
+  return /* @__PURE__ */ jsx20("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs17("div", { className: "ui-drawer__row", children: [
     /* @__PURE__ */ jsx20("dt", { children: row.label }),
     /* @__PURE__ */ jsx20("dd", { children: detail(row) })
   ] }, index)) });
 }
 function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs16("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs17("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
     title != null && /* @__PURE__ */ jsx20(Heading, { className: "ui-drawer__section-title", children: title }),
     children
   ] });
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect7, useRef as useRef12, useState as useState7 } from "react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef12, useState as useState8 } from "react";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy" }) {
-  const [status, setStatus] = useState7("idle");
+  const [status, setStatus] = useState8("idle");
   const request = useRef12(0);
   const timer = useRef12(void 0);
   useEffect7(() => {
@@ -1937,10 +1993,10 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
       if (current === request.current) setStatus("failed");
     }
   }
-  return /* @__PURE__ */ jsxs17("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "ui-snippet__bar", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "ui-snippet__bar", children: [
       /* @__PURE__ */ jsx21("span", { children: label }),
-      /* @__PURE__ */ jsxs17("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
+      /* @__PURE__ */ jsxs18("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
         /* @__PURE__ */ jsx21(Icon, { name: status === "copied" ? "check" : "copy" }),
         status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : copyLabel
       ] })
@@ -1952,7 +2008,7 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
 // src/Tabs.tsx
 import { useEffect as useEffect8, useId as useId9, useRef as useRef13 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId9();
   const previous = useRef13(value);
@@ -1962,8 +2018,8 @@ function Tabs({ items, value, onChange, label }) {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
-  return /* @__PURE__ */ jsxs18("div", { className: "ui-tabs", children: [
-    /* @__PURE__ */ jsx22("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19("div", { className: "ui-tabs", children: [
+    /* @__PURE__ */ jsx22("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs19(
       "button",
       {
         type: "button",
@@ -2001,7 +2057,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          item.count != null && /* @__PURE__ */ jsxs19(Fragment6, { children: [
             " ",
             item.count
           ] })
@@ -2029,7 +2085,7 @@ function Tabs({ items, value, onChange, label }) {
 // src/Timeline.tsx
 import { useEffect as useEffect9, useRef as useRef14 } from "react";
 import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
 function Timeline({ events, className, ...rest }) {
   const previousIds = useRef14(new Set(events.map((event) => event.id)));
@@ -2046,7 +2102,7 @@ function Timeline({ events, className, ...rest }) {
     }
     previousIds.current = new Set(events.map((event) => event.id));
   }, [events]);
-  return /* @__PURE__ */ jsx23("ol", { ...rest, role: "list", className: ["ui-timeline", events.some((event) => event.kind) && "ui-timeline--kinds", className].filter(Boolean).join(" "), children: events.map((event, index) => /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx23("ol", { ...rest, role: "list", className: ["ui-timeline", events.some((event) => event.kind) && "ui-timeline--kinds", className].filter(Boolean).join(" "), children: events.map((event, index) => /* @__PURE__ */ jsxs20(
     "li",
     {
       className: "ui-timeline__event",
@@ -2060,13 +2116,13 @@ function Timeline({ events, className, ...rest }) {
           event.kind && "ui-timeline__marker--kind",
           event.kind === "reversal" && "ui-timeline__marker--reversal"
         ].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */ jsx23(Icon, { name: kindIcons[event.kind] }) }),
-        /* @__PURE__ */ jsxs19("div", { className: "ui-timeline__head", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "ui-timeline__head", children: [
           /* @__PURE__ */ jsx23("span", { className: "ui-timeline__actor", children: event.actor }),
           /* @__PURE__ */ jsx23("time", { dateTime: event.dateTime, children: event.timestamp }),
           index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx23("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
         ] }),
         /* @__PURE__ */ jsx23("p", { className: "ui-timeline__description", children: event.description }),
-        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs19("div", { className: "ui-timeline__meta", children: [
+        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs20("div", { className: "ui-timeline__meta", children: [
           event.meta != null && /* @__PURE__ */ jsx23("span", { children: event.meta }),
           event.undo && /* @__PURE__ */ jsx23(Button, { variant: "ghost", size: "xs", className: "ui-btn ui-btn--ghost ui-btn--xs ui-timeline__undo", "aria-label": event.undo.label, onClick: event.undo.onUndo, children: "Undo" })
         ] })
@@ -2077,15 +2133,15 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { useEffect as useEffect10, useId as useId10, useRef as useRef15, useState as useState8 } from "react";
+import { useEffect as useEffect10, useId as useId10, useRef as useRef15, useState as useState9 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function messages(id, hint, error) {
   return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
 }
 function Frame({ id, label, hint, error, required, children }) {
-  return /* @__PURE__ */ jsxs20("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsxs20("label", { className: "ui-field__label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "ui-field", children: [
+    /* @__PURE__ */ jsxs21("label", { className: "ui-field__label", htmlFor: id, children: [
       label,
       required && /* @__PURE__ */ jsx24("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
@@ -2121,7 +2177,7 @@ function TextField({ label, hint, error, required, type = "text", unit, classNam
       className: `ui-input${error ? " is-invalid" : ""} ${className}`
     }
   );
-  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs20("div", { className: "ui-field-number", children: [
+  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs21("div", { className: "ui-field-number", children: [
     control,
     /* @__PURE__ */ jsx24("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit })
   ] }) : control });
@@ -2155,8 +2211,8 @@ function SelectField({ label, hint, error, required, className = "", children, .
 function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
   const id = useId10();
   const input = useRef15(null);
-  const [file, setFile] = useState8(null);
-  const [dragging, setDragging] = useState8(false);
+  const [file, setFile] = useState9(null);
+  const [dragging, setDragging] = useState9(false);
   useEffect10(() => {
     const form = input.current?.form;
     const reset = () => {
@@ -2170,7 +2226,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
     setFile(next);
     onFileChange?.(next);
   };
-  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs21(
     "div",
     {
       className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
@@ -2194,7 +2250,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
         /* @__PURE__ */ jsx24("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx24(Icon, { name: "upload" }) }),
         /* @__PURE__ */ jsx24("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
         /* @__PURE__ */ jsx24("div", { children: "or choose one from your device" }),
-        /* @__PURE__ */ jsxs20("span", { className: "ui-file__choose", children: [
+        /* @__PURE__ */ jsxs21("span", { className: "ui-file__choose", children: [
           /* @__PURE__ */ jsx24("span", { className: "ui-btn ui-btn--secondary ui-btn--sm", "aria-hidden": "true", "aria-disabled": disabled || void 0, children: file ? "Replace file" : "Choose file" }),
           /* @__PURE__ */ jsx24(
             "input",
@@ -2216,9 +2272,9 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect5, useRef as useRef16, useState as useState9 } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect4, useRef as useRef16, useState as useState10 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var Context = createContext2(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -2228,11 +2284,11 @@ function useToast() {
 }
 function Notice({ notice, remove }) {
   const root = useRef16(null);
-  const [leaving2, setLeaving] = useState9(false);
+  const [leaving2, setLeaving] = useState10(false);
   const dismissed = useRef16(false);
   const remaining = useRef16(5e3);
-  const [hovered, setHovered] = useState9(false);
-  const [focused, setFocused] = useState9(false);
+  const [hovered, setHovered] = useState10(false);
+  const [focused, setFocused] = useState10(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
   const dismiss = useCallback3(() => {
@@ -2264,7 +2320,7 @@ function Notice({ notice, remove }) {
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
   }, [dismiss, leaving2, notice.action, paused]);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       ref: root,
@@ -2279,7 +2335,7 @@ function Notice({ notice, remove }) {
       },
       children: [
         /* @__PURE__ */ jsx25("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx25(Icon, { name: glyphs[tone] }) }),
-        /* @__PURE__ */ jsxs21("div", { className: "ui-toast__body", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "ui-toast__body", children: [
           /* @__PURE__ */ jsx25("div", { className: "ui-toast__title", children: notice.title }),
           notice.text && /* @__PURE__ */ jsx25("div", { className: "ui-toast__text", children: notice.text })
         ] }),
@@ -2313,7 +2369,7 @@ function Notice({ notice, remove }) {
 }
 var REACH = "--rx-toast-stack";
 function usePublishedReach(stack2, count) {
-  useLayoutEffect5(() => {
+  useLayoutEffect4(() => {
     const element = stack2.current;
     const view = element?.ownerDocument.defaultView;
     const root = element?.ownerDocument.documentElement;
@@ -2332,7 +2388,7 @@ function usePublishedReach(stack2, count) {
   }, [stack2, count]);
 }
 function Toast({ children }) {
-  const [entries, setEntries] = useState9([]);
+  const [entries, setEntries] = useState10([]);
   const nextId = useRef16(0);
   const stack2 = useRef16(null);
   const push = useCallback3((notice) => {
@@ -2341,7 +2397,7 @@ function Toast({ children }) {
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
   usePublishedReach(stack2, entries.length);
-  return /* @__PURE__ */ jsxs21(Context.Provider, { value: push, children: [
+  return /* @__PURE__ */ jsxs22(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
       /* @__PURE__ */ jsx25("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx25(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
@@ -2351,9 +2407,9 @@ function Toast({ children }) {
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect12, useId as useId11, useState as useState10 } from "react";
+import { useEffect as useEffect12, useId as useId11, useState as useState11 } from "react";
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -2375,10 +2431,10 @@ function AppShell({
   renderLink
 }) {
   const uid = useId11();
-  const [collapsed, setCollapsed] = useState10(defaultCollapsed);
-  const [search, setSearch] = useState10(false);
-  const [more, setMore] = useState10(false);
-  const [theme, setTheme] = useState10("dark");
+  const [collapsed, setCollapsed] = useState11(defaultCollapsed);
+  const [search, setSearch] = useState11(false);
+  const [more, setMore] = useState11(false);
+  const [theme, setTheme] = useState11("dark");
   const current = path(pathname);
   const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
   useEffect12(() => {
@@ -2424,7 +2480,7 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs22(Fragment7, { children: [
+      children: /* @__PURE__ */ jsxs23(Fragment7, { children: [
         /* @__PURE__ */ jsx26("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx26(Icon, { name: section.icon }) }),
         /* @__PURE__ */ jsx26("span", { className: "ui-nav__label", children: section.label }),
         section.count != null && /* @__PURE__ */ jsx26("span", { className: "ui-nav__badge", children: section.count })
@@ -2436,24 +2492,24 @@ function AppShell({
   const visible = sections.length > 4 ? sections.slice(0, 3) : sections;
   const remaining = sections.slice(visible.length);
   const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
-  return /* @__PURE__ */ jsxs22("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    /* @__PURE__ */ jsxs22("div", { className: "ui-app__rail", children: [
-      /* @__PURE__ */ jsx26("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs22("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+  return /* @__PURE__ */ jsxs23("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    /* @__PURE__ */ jsxs23("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx26("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs23("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
         brand ?? /* @__PURE__ */ jsx26("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
         /* @__PURE__ */ jsx26("span", { children: word })
       ] }) }),
       /* @__PURE__ */ jsx26("nav", { className: "ui-nav ui-nav--side", "aria-label": "Sections", children: /* @__PURE__ */ jsx26("ul", { className: "ui-nav__list", children: links(sections) }) }),
-      /* @__PURE__ */ jsx26("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx26("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs22("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx26("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs22("svg", { className: "ui-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx26("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx26("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs23("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx26("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs23("svg", { className: "ui-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx26("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
           /* @__PURE__ */ jsx26("path", { className: "ui-app__fold-seam", d: "M9 3v18" })
         ] }) }),
         /* @__PURE__ */ jsx26("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs22("header", { className: "ui-app__bar", children: [
-        /* @__PURE__ */ jsxs22("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+    /* @__PURE__ */ jsxs23("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs23("header", { className: "ui-app__bar", children: [
+        /* @__PURE__ */ jsxs23("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
           /* @__PURE__ */ jsx26("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx26(Icon, { name: "search" }) }),
           /* @__PURE__ */ jsx26("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
           /* @__PURE__ */ jsx26("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
@@ -2471,7 +2527,7 @@ function AppShell({
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
             triggerContent: /* @__PURE__ */ jsx26("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
-            header: /* @__PURE__ */ jsxs22("div", { className: "ui-dropdown__head", children: [
+            header: /* @__PURE__ */ jsxs23("div", { className: "ui-dropdown__head", children: [
               /* @__PURE__ */ jsx26("b", { children: account.name }),
               /* @__PURE__ */ jsx26("span", { children: account.email })
             ] }),
@@ -2480,7 +2536,7 @@ function AppShell({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs22("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+      /* @__PURE__ */ jsxs23("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
         back && /* @__PURE__ */ jsx26(BackLink, { ...back }),
         /* @__PURE__ */ jsx26("h1", { children: title }),
         lede && /* @__PURE__ */ jsx26("p", { className: "ui-app__sub", children: lede }),
@@ -2488,9 +2544,9 @@ function AppShell({
         /* @__PURE__ */ jsx26("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    /* @__PURE__ */ jsx26("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs22("ul", { className: "ui-nav__list", children: [
+    /* @__PURE__ */ jsx26("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs23("ul", { className: "ui-nav__list", children: [
       links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsxs22(
+      remaining.length > 0 && /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsxs23(
         "button",
         {
           type: "button",
@@ -2512,7 +2568,7 @@ function AppShell({
 
 // src/EmptyState.tsx
 import { icon as kitIcon2, illo } from "@apliteni/apliteni-ui";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var cases = {
   "first-run": { title: "Nothing needs you yet", sub: "New items will appear here when they need your attention.", icon: "check" },
   "no-matches": { title: "No results in this view", sub: "Try another search or clear your filters.", icon: "search" },
@@ -2524,7 +2580,7 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon6, art, actio
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
   const glyph = icon6 ?? preset.icon;
-  return /* @__PURE__ */ jsxs23("div", { className: "ui-empty", children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "ui-empty", children: [
     art ? typeof art === "string" ? /* @__PURE__ */ jsx27("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx27("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx27("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
     heading && /* @__PURE__ */ jsx27("div", { className: "ui-empty__title", children: heading }),
     guidance && /* @__PURE__ */ jsx27("div", { className: "ui-empty__sub", children: guidance }),
@@ -2535,7 +2591,7 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon6, art, actio
 // src/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
 import { icon as icon5 } from "@apliteni/apliteni-ui";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var STORAGE_KEY = "apliteni-strategy-theme";
 var CHOICE_EVENT = "apliteni-theme-choice";
 var THEME_INIT_SCRIPT = `(()=>{let t;try{t=localStorage.getItem('apliteni-strategy-theme')}catch{}document.documentElement.setAttribute('data-theme',t==='dark'||t==='light'?t:window.matchMedia?.('(prefers-color-scheme: light)').matches?'light':'dark')})()`;
@@ -2594,9 +2650,9 @@ function ThemeToggle({ labelled = false }) {
     window.dispatchEvent(new Event(CHOICE_EVENT));
   };
   const button = /* @__PURE__ */ jsx28("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx28("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon5(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
-  return labelled ? /* @__PURE__ */ jsxs24("span", { className: "ui-theme-toggle", children: [
+  return labelled ? /* @__PURE__ */ jsxs25("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs24("span", { children: [
+    /* @__PURE__ */ jsxs25("span", { children: [
       label,
       " theme"
     ] })

package/src/components/command-palette.js

@@ -1,3 +1,5 @@
+import { SCORE, scoreCommand, rankCommands, rankGroups, paletteHotkey, norm } from '../logic/command-palette.js';
+export { SCORE, scoreCommand, rankCommands, rankGroups, paletteHotkey } from '../logic/command-palette.js';
 // Command palette — one overlay, a text box and a ranked list of things to run
 // or go to.
 //
@@ -16,134 +18,6 @@ const cx = (...a) => a.filter(Boolean).join(' ');
 let _uid = 0;
 const nextId = (p = 'cmdk') => `${p}-${++_uid}`;
 
-/**
- * How a match is worth more than another match.
- *
- * Six ways a query can meet an item, scored so that the whole beats the part
- * and the name beats the note. The numbers are a ladder and not a measurement —
- * what matters is the order, which is why src/components/command-palette.test.js
- * asserts the ORDER of the results rather than any of these values.
- *
- * cmdk's command-score is the other published answer: one continuous score
- * built out of SCORE_CONTINUE_MATCH 1, SCORE_SPACE_WORD_JUMP 0.9,
- * SCORE_NON_SPACE_WORD_JUMP 0.8 and SCORE_CHARACTER_JUMP 0.17. It ranks
- * beautifully and cannot be explained to a reader who asks why their item is
- * third. A ladder can: the kit's palettes hold tens of items, not thousands.
- */
-export const SCORE = {
-  exact: 100,
-  prefix: 90,
-  wordStart: 80,
-  contains: 70,
-  keyword: 60,
-  description: 40,
-  subsequence: 20,
-};
-
-const norm = (s) => String(s == null ? '' : s).toLowerCase().replace(/\s+/g, ' ').trim();
-
-// Every character of `q`, in order, somewhere in `s` — "nc" finding "New
-// campaign". The weakest match the kit accepts, and the only one that can pair
-// a two-letter query with a twenty-letter label.
-function subsequence(s, q) {
-  let at = 0;
-  for (const ch of q) {
-    at = s.indexOf(ch, at);
-    if (at === -1) return false;
-    at += 1;
-  }
-  return true;
-}
-
-// A word here starts after a space or one of the separators a product name uses,
-// so "camp" reaches the second word of "New campaign" and the "utm" in
-// "url-utm_source".
-const wordStarts = (s) => s.split(/[\s/\-_.:,]+/).filter(Boolean);
-
-function scoreField({ label, description, keywords }, q) {
-  const name = norm(label);
-  if (!name && !description && !(keywords || []).length) return 0;
-  if (name === q) return SCORE.exact;
-  if (name.startsWith(q)) return SCORE.prefix;
-  if (wordStarts(name).some((w) => w.startsWith(q))) return SCORE.wordStart;
-  if (name.includes(q)) return SCORE.contains;
-  for (const k of keywords || []) {
-    const key = norm(k);
-    if (key === q || key.startsWith(q)) return SCORE.keyword;
-  }
-  if (norm(description).includes(q)) return SCORE.description;
-  if (subsequence(name, q)) return SCORE.subsequence;
-  return 0;
-}
-
-/**
- * What one item is worth against one query. 0 means it is not a result.
- *
- * An empty query scores everything the same, so a palette nobody has typed into
- * shows what the caller passed, in the caller's order — which is where a
- * product puts the four things somebody actually does here.
- *
- * A query with a space in it has to match as a whole OR token by token, every
- * token landing somewhere: "new camp" reaches "New campaign" as a whole, and
- * "camp new" reaches it one token at a time. The weakest token decides, because
- * a result is only as good as the part of the query it answers worst.
- */
-export function scoreCommand(item, query) {
-  const q = norm(query);
-  if (!q) return 1;
-  const whole = scoreField(item, q);
-  const tokens = q.split(' ');
-  if (tokens.length < 2) return whole;
-  let weakest = Infinity;
-  for (const t of tokens) {
-    const s = scoreField(item, t);
-    if (!s) { weakest = 0; break; }
-    weakest = Math.min(weakest, s);
-  }
-  return Math.max(whole, weakest === Infinity ? 0 : weakest);
-}
-
-/**
- * The items that answer `query`, best first.
- *
- * Ties keep the caller's order — that is the whole of the kit's ordering
- * opinion, and it is what lets a product put its four most-used commands at the
- * top of the list it passes and have them stay there.
- */
-export function rankCommands(items, query) {
-  return (items || [])
-    .map((item, i) => ({ item, i, score: scoreCommand(item, query) }))
-    .filter((r) => r.score > 0)
-    .sort((a, b) => b.score - a.score || a.i - b.i)
-    .map((r) => r.item);
-}
-
-/**
- * The groups that answer `query`, best group first, each holding its own ranked
- * rows and nothing that scored zero.
- *
- * A group is carried by its best row, and the caller's order breaks the tie at
- * both levels — so a palette nobody has typed into is exactly the list that was
- * passed in. cmdk ranks groups the same way; the tie-break is the kit's, and it
- * is what keeps a heading from moving under a reader who has typed nothing.
- */
-export function rankGroups(groups, query) {
-  return (groups || [])
-    .map((g, i) => {
-      const items = rankCommands(g.items || [], query);
-      const best = items.length ? scoreCommand(items[0], query) : 0;
-      return { group: { ...g, items }, i, best };
-    })
-    .filter((g) => g.group.items.length > 0)
-    .sort((a, b) => b.best - a.best || a.i - b.i)
-    .map((g) => g.group);
-}
-
-/** The label for the key that opens it, on the platform the caller is on. */
-export function paletteHotkey(platform = typeof navigator === 'undefined' ? '' : navigator.platform) {
-  return /mac|iphone|ipad|ipod/i.test(String(platform || '')) ? '⌘K' : 'Ctrl K';
-}
-
 // The three fields a query is matched against, written onto the row so the
 // wiring can re-rank what is already rendered without being handed the data a
 // second time. Three attributes and not one blob: the ranking weighs a name

package/src/components/dropdown.js

@@ -1,3 +1,5 @@
+import { dropdownMatch, dropdownFiltering } from '../logic/dropdown.js';
+export { dropdownMatch, dropdownFiltering } from '../logic/dropdown.js';
 // Dropdown — the kit's one popover-list primitive. A trigger opens a panel of
 // item rows; two flavours share the same panel and the same open/close JS:
 //
@@ -79,22 +81,6 @@ function ddBody({ items, sections }, listbox, sx) {
 // why: docs/specification.md#a-dropdown-with-a-search-field
 // NFD takes the mark off é or ö; ł, ø, đ and the rest are letters of their own
 // with nothing to take off, so they are mapped by hand.
-const FOLD = { ł: 'l', ø: 'o', đ: 'd', ð: 'd', ß: 'ss', æ: 'ae', œ: 'oe', ı: 'i', þ: 'th' };
-const fold = (s) => String(s == null ? '' : s).normalize('NFD').replace(/\p{M}/gu, '').toLowerCase()
-  .replace(/[łøđðßæœıþ]/g, (c) => FOLD[c]);
-
-/**
- * Is this query narrowing anything? A query of spaces, or of marks with no letter
- * under them, is not — it leaves every row showing, and the separators with them.
- *
- * Public because a second implementation of this dropdown cannot write its own: the
- * React <Dropdown> asks these two, the way <CommandPalette> asks rankGroups(), so a
- * list a server rendered and the same list after a keystroke hide the same rows.
- */
-export const dropdownFiltering = (query) => fold(query).trim() !== '';
-
-/** Does `label` match `query`? A substring, anywhere, ignoring case and accents. */
-export const dropdownMatch = (label, query) => fold(label).includes(fold(query).trim());
 const ddIsRow = (it) => it && it !== '---' && !it.separator;
 
 let _ddSeq = 0;

package/src/components/index.js

@@ -1,3 +1,5 @@
+import { calloutIcons } from '../logic/callout.js';
+export { calloutIcons } from '../logic/callout.js';
 // apliteni-ui component factories — each returns an HTML string, matching the
 // viz/ server-render idiom so the portal can adopt them with no framework.
 import { icon } from '../assets/icons.js';
@@ -218,7 +220,7 @@ export function switchToggle({ checked = false, disabled = false, name, label =
 }
 
 // ---- Callout / toast / success ------------------------------------------
-export const calloutIcons = { info: 'info', success: 'check', warn: 'alert', danger: 'alert', neutral: 'info' };
+
 
 export function callout({ variant, icon: ic = calloutIcons[variant] || 'info', body, actions } = {}) {
   return `<div class="${esc(cx('ui-callout', variant && variant !== 'neutral' && `ui-callout--${variant}`))}"><span class="ui-callout__icon">${icon(ic)}</span><div class="ui-callout__body">${body}${actions != null ? `<div class="ui-toolbar ui-callout__actions">${actions}</div>` : ''}</div></div>`;

package/src/components/pagination.js

@@ -1,3 +1,5 @@
+import { PAGE_SIZES, DEFAULT_PAGE_SIZE } from '../logic/pagination.js';
+export { PAGE_SIZES, DEFAULT_PAGE_SIZE } from '../logic/pagination.js';
 // Pagination — the strip under a table or a list, as an HTML string.
 //
 // It renders a page the CALLER computed. Rows never come in here: `page`,
@@ -15,8 +17,7 @@ import { safeUrl } from '../html.js';
 // AG Grid defaults to 100, and the finance portal's two data-heavy surfaces
 // already page at 100. A 250 step was in the first draft of this component and
 // no surveyed kit offers one, so it went rather than being invented.
-export const PAGE_SIZES = [25, 50, 100];
-export const DEFAULT_PAGE_SIZE = 100;
+
 
 // The classes button({ variant: 'ghost', size: 'sm' }) emits, written out because
 // button() takes no extra class and every control here needs one of its own for

package/src/components/segmented.js

@@ -1,12 +1,5 @@
-export function segmentedNextIndex(key, index, length) {
-  if (!length) return null;
-  if (key === 'ArrowRight' || key === 'ArrowDown') return (index + 1) % length;
-  if (key === 'ArrowLeft' || key === 'ArrowUp') return (index - 1 + length) % length;
-  if (key === 'Home') return 0;
-  if (key === 'End') return length - 1;
-  return null;
-}
-
+import { segmentedNextIndex } from '../logic/segmented.js';
+export { segmentedNextIndex } from '../logic/segmented.js';
 export function initSegmented(root = document) {
   const cleanups = [];
   root.querySelectorAll('[data-seg]').forEach(group => {

package/src/components/table-values.js

@@ -1,14 +1,14 @@
+import { formatNumericValue, formatDeltaValue } from '../logic/table-values.js';
 import { esc } from './index.js';
 import { safeUrl } from '../html.js';
-export function numericValue({ value, unit = '', missing = 'Not available' } = {}) {
-  if (value == null || value === '') return `<span class="ui-value" aria-label="${esc(missing)}">—</span>`;
-  return `<span class="ui-value">${esc(value)}${unit ? `<span class="ui-value__unit">${esc(unit)}</span>` : ''}</span>`;
+export function numericValue(options = {}) {
+  const value = formatNumericValue(options);
+  return `<span class="ui-value"${value.missing !== undefined ? ` aria-label="${esc(value.missing)}"` : ''}>${esc(value.text)}${value.unit ? `<span class="ui-value__unit">${esc(value.unit)}</span>` : ''}</span>`;
 }
 
-export function deltaValue({ value, tone = 'neutral', basisId, missing = 'No earlier figure' } = {}) {
-  const present = value != null && value !== '';
-  const judged = present && ['success', 'danger'].includes(tone) && !/^[+−-]?0+(?:[.,]0+)?(?:[^\d.,].*)?$/.test(String(value).replace(/\s/g, ''));
-  return `<span class="ui-delta${judged ? ` ui-delta--${tone}` : ''}"${basisId ? ` aria-describedby="${esc(basisId)}"` : ''}>${esc(present ? value : missing)}</span>`;
+export function deltaValue(options = {}) {
+  const value = formatDeltaValue(options);
+  return `<span class="${value.className}"${value.basisId ? ` aria-describedby="${esc(value.basisId)}"` : ''}>${esc(value.text)}</span>`;
 }
 
 export function rowIdentity({ symbol = '', name = '', logo, href } = {}) {

package/src/index.d.ts

@@ -0,0 +1,128 @@
+export declare function esc(value: unknown): string;
+export declare function field(opts?: Record<string, unknown>): string;
+export declare function input(opts?: Record<string, unknown>): string;
+export declare function textarea(opts?: Record<string, unknown>): string;
+export declare function select(opts?: Record<string, unknown>): string;
+export declare function numericValue(opts?: Record<string, unknown>): string;
+export declare function deltaValue(opts?: Record<string, unknown>): string;
+export declare function filterBar(opts?: Record<string, unknown>): string;
+export declare function initFilterBar(host: Element, opts?: Record<string, unknown>): { update: (opts: Record<string, unknown>) => void; destroy: () => void };
+export declare function segmentedNextIndex(key: string, index: number, length: number): number | null;
+export declare function icon(name: string, className?: string): string;
+export declare function snippet(opts?: Record<string, unknown>): string;
+export declare function button(opts?: Record<string, unknown>): string;
+export declare function badge(label: string, variant?: string): string;
+export declare const calloutIcons: Record<'neutral' | 'info' | 'success' | 'warn' | 'danger', string>;
+export declare function callout(opts?: Record<string, unknown>): string;
+export declare function card(opts?: Record<string, unknown>): string;
+export declare function pagination(opts?: Record<string, unknown>): string;
+export declare function drawerSection(opts?: Record<string, unknown>): string;
+export declare function drawer(opts?: Record<string, unknown>): string;
+export declare function dropdown(opts?: Record<string, unknown>): string;
+export declare function wireDropdown(root?: Document | Element): void;
+/** The kit's own match, asked rather than re-implemented by <Dropdown>. */
+export declare function dropdownMatch(label: unknown, query: unknown): boolean;
+export declare function dropdownFiltering(query: unknown): boolean;
+export declare function backLink(opts?: Record<string, unknown>): string;
+export declare function statBand(opts?: Record<string, unknown>): string;
+export declare function commandPalette(opts?: Record<string, unknown>): string;
+export declare function rankGroups<G>(groups: readonly G[], query: string): G[];
+export declare function rankCommands<I>(items: readonly I[], query: string): I[];
+export declare function scoreCommand(item: Record<string, unknown>, query: string): number;
+export declare function paletteHotkey(platform?: string): string;
+export declare const PAGE_SIZES: number[];
+export declare const DEFAULT_PAGE_SIZE: number;
+export type NumericValueOptions = { value?: string | number | null; unit?: string; missing?: string };
+export type DeltaValueOptions = { value?: string | null; tone?: 'success' | 'danger' | 'neutral'; basisId?: string; missing?: string };
+export declare function formatNumericValue(options?: NumericValueOptions): { text: string; unit: string; missing: string | undefined };
+export declare function formatDeltaValue(options?: DeltaValueOptions): { text: string; className: string; basisId: string | undefined };
+export declare const SCORE: Record<'exact' | 'prefix' | 'wordStart' | 'contains' | 'keyword' | 'description' | 'subsequence', number>;
+export declare const iconNames: string[];
+export declare const iconCategories: { name: string; names: string[] }[];
+export declare const iconOnlyAllowed: Record<string, string>;
+export declare const iconMeanings: Record<string, string>;
+export declare const sun: string;
+export declare const moon: string;
+export declare function prism(prefix?: string, size?: number): string;
+export declare function seedling(prefix?: string, size?: number): string;
+export declare function brand(options?: { p?: string; word?: string; size?: number; href?: string }): string;
+export declare function illo(name: string): string;
+export * from './motion.js';
+export declare const illoNames: string[];
+
+// Vanilla factories accept their existing option bags and return HTML.
+export declare function accentPicker(opts?: Record<string, unknown>): string;
+export declare function accountMenu(opts?: Record<string, unknown>): string;
+export declare function accountShell(opts?: Record<string, unknown>): string;
+export declare function appShell(opts?: Record<string, unknown>): string;
+export declare function breadcrumbs(opts?: Record<string, unknown>): string;
+export declare function busyRegion(opts?: Record<string, unknown>): string;
+export declare function checkbox(opts?: Record<string, unknown>): string;
+export declare function confirm(opts?: Record<string, unknown>): string;
+export declare function deniedState(opts?: Record<string, unknown>): string;
+export declare function emptyState(opts?: Record<string, unknown>): string;
+export declare function feedbackWidget(opts?: Record<string, unknown>): string;
+export declare function footer(opts?: Record<string, unknown>): string;
+export declare function nav(opts?: Record<string, unknown>): string;
+export declare function navTabs(opts?: Record<string, unknown>): string;
+export declare function rowIdentity(opts?: Record<string, unknown>): string;
+export declare function segmented(opts?: Record<string, unknown>): string;
+export declare function sidebarNav(opts?: Record<string, unknown>): string;
+export declare function skeleton(opts?: Record<string, unknown>): string;
+export declare function skeletonTable(opts?: Record<string, unknown>): string;
+export declare function success(opts?: Record<string, unknown>): string;
+export declare function successPanel(opts?: Record<string, unknown>): string;
+export declare function switchToggle(opts?: Record<string, unknown>): string;
+export declare function tabs(opts?: Record<string, unknown>): string;
+export declare function toast(opts?: Record<string, unknown>): string;
+export declare function tooltip(opts?: Record<string, unknown>): string;
+export declare function topbar(opts?: Record<string, unknown>): string;
+export declare function commandPaletteList(groups?: readonly Record<string, unknown>[], opts?: { uid?: string; from?: number }): string;
+export declare function deckTextSwitch(active?: string): string;
+export declare function hlShell(raw: string): string;
+export declare function pill(label: string, variant?: string): string;
+export declare function statusDot(live?: boolean): string;
+export declare function successCheck(): string;
+export declare function themeIcon(theme: string): string;
+export declare function themeName(theme: string): string;
+export declare function themeToggle(theme?: string): string;
+export declare function versionSwitcher(versions?: { label: string; meta?: string; badge?: string }[], activeIdx?: number): string;
+
+export declare const ACCENTS: string[];
+export declare const ACCOUNT_NAV: { id: string; icon: string; label: string }[];
+export declare const RAIL_COOKIE: 'apliteni-ui-rail';
+export declare const STAT_TONES: string[];
+export declare const STAT_VARIANTS: string[];
+
+export declare function applyAccent(name: string, root?: HTMLElement): void;
+export declare function applyTheme(theme: string, root?: HTMLElement): void;
+export declare function railCollapsed(cookies?: string): boolean | null;
+export declare function closeCommandPalette(root: Element | null): void;
+export declare function closeConfirm(root: Element | null): void;
+export declare function closeDrawer(root: Element | null): void;
+export declare function openCommandPalette(root: Element | null, returnFocusTo?: HTMLElement | null): void;
+export declare function openConfirm(root: Element | null, returnFocusTo?: HTMLElement | null): void;
+export declare function openDrawer(root: Element | null, returnFocusTo?: HTMLElement | null): void;
+export declare function setPaletteResults(root: HTMLElement, groups: readonly Record<string, unknown>[]): void;
+export declare function hideTooltip(host: HTMLElement): void;
+export declare function showTooltip(host: HTMLElement, mark: Element): void;
+export declare function initRowIdentity(root?: Document | Element): void;
+export declare function initSegmented(root?: Document | Element): () => void;
+export declare function initTabs(root?: Document | Element): void;
+export declare function wireCommandPalette(root?: Document | Element): void;
+export declare function wireConfirm(root?: Document | Element): void;
+export declare function wireDrawer(root?: Document | Element): void;
+export declare function wireFeedback(opts?: Record<string, unknown>): void;
+export declare function wireNav(root?: Document | Element): void;
+export declare function wireShell(root?: Document | Element, opts?: { persist?: boolean }): void;
+export declare function wireTooltip(root?: Document | Element): void;
+export declare function wireTopbar(root?: Document | Element): void;
+export declare function wireSuccess(root: Element, opts?: { onDone?: () => void }): () => void;
+export declare function wirePagination(root?: Document | Element | string | null, opts?: { onPage?: (page: number) => void; onPageSize?: (size: number) => void }): () => void;
+export declare function nearestSection(node: Node | null, root?: Element | null): Element | null;
+export declare function dismissToast(element: HTMLElement): void;
+export declare function wireToastStack(container: Element | string | null): Element | null;
+export declare function pushToast(container: Element | string | null, opts?: Record<string, unknown>): Element | null;
+export declare function setBusy(root: Element | string | null, opts?: { busy?: boolean; message?: string; body?: string }): Element | null;
+export declare function setButtonBusy(element: HTMLElement, opts?: { busy?: boolean }): void;
+export declare function setPagerStatus(root: Element | string | null, text: string): Element | null;

package/src/index.js

@@ -26,3 +26,10 @@ export { setButtonBusy } from './components/button-busy.js';
 export * from './components/table-values.js';
 export * from './components/segmented.js';
 export * from './components/filter-bar.js';
+
+export { dropdownMatch, dropdownFiltering } from './logic/dropdown.js';
+export { SCORE, rankGroups, rankCommands, scoreCommand, paletteHotkey } from './logic/command-palette.js';
+export { segmentedNextIndex } from './logic/segmented.js';
+export { PAGE_SIZES, DEFAULT_PAGE_SIZE } from './logic/pagination.js';
+export { calloutIcons } from './logic/callout.js';
+export { formatNumericValue, formatDeltaValue } from './logic/table-values.js';

package/src/logic/callout.js

@@ -0,0 +1 @@
+export const calloutIcons = { info: 'info', success: 'check', warn: 'alert', danger: 'alert', neutral: 'info' };

package/src/logic/command-palette.js

@@ -0,0 +1,127 @@
+/**
+ * How a match is worth more than another match.
+ *
+ * Six ways a query can meet an item, scored so that the whole beats the part
+ * and the name beats the note. The numbers are a ladder and not a measurement —
+ * what matters is the order, which is why src/components/command-palette.test.js
+ * asserts the ORDER of the results rather than any of these values.
+ *
+ * cmdk's command-score is the other published answer: one continuous score
+ * built out of SCORE_CONTINUE_MATCH 1, SCORE_SPACE_WORD_JUMP 0.9,
+ * SCORE_NON_SPACE_WORD_JUMP 0.8 and SCORE_CHARACTER_JUMP 0.17. It ranks
+ * beautifully and cannot be explained to a reader who asks why their item is
+ * third. A ladder can: the kit's palettes hold tens of items, not thousands.
+ */
+export const SCORE = {
+  exact: 100,
+  prefix: 90,
+  wordStart: 80,
+  contains: 70,
+  keyword: 60,
+  description: 40,
+  subsequence: 20,
+};
+
+export const norm = (s) => String(s == null ? '' : s).toLowerCase().replace(/\s+/g, ' ').trim();
+
+// Every character of `q`, in order, somewhere in `s` — "nc" finding "New
+// campaign". The weakest match the kit accepts, and the only one that can pair
+// a two-letter query with a twenty-letter label.
+function subsequence(s, q) {
+  let at = 0;
+  for (const ch of q) {
+    at = s.indexOf(ch, at);
+    if (at === -1) return false;
+    at += 1;
+  }
+  return true;
+}
+
+// A word here starts after a space or one of the separators a product name uses,
+// so "camp" reaches the second word of "New campaign" and the "utm" in
+// "url-utm_source".
+const wordStarts = (s) => s.split(/[\s/\-_.:,]+/).filter(Boolean);
+
+function scoreField({ label, description, keywords }, q) {
+  const name = norm(label);
+  if (!name && !description && !(keywords || []).length) return 0;
+  if (name === q) return SCORE.exact;
+  if (name.startsWith(q)) return SCORE.prefix;
+  if (wordStarts(name).some((w) => w.startsWith(q))) return SCORE.wordStart;
+  if (name.includes(q)) return SCORE.contains;
+  for (const k of keywords || []) {
+    const key = norm(k);
+    if (key === q || key.startsWith(q)) return SCORE.keyword;
+  }
+  if (norm(description).includes(q)) return SCORE.description;
+  if (subsequence(name, q)) return SCORE.subsequence;
+  return 0;
+}
+
+/**
+ * What one item is worth against one query. 0 means it is not a result.
+ *
+ * An empty query scores everything the same, so a palette nobody has typed into
+ * shows what the caller passed, in the caller's order — which is where a
+ * product puts the four things somebody actually does here.
+ *
+ * A query with a space in it has to match as a whole OR token by token, every
+ * token landing somewhere: "new camp" reaches "New campaign" as a whole, and
+ * "camp new" reaches it one token at a time. The weakest token decides, because
+ * a result is only as good as the part of the query it answers worst.
+ */
+export function scoreCommand(item, query) {
+  const q = norm(query);
+  if (!q) return 1;
+  const whole = scoreField(item, q);
+  const tokens = q.split(' ');
+  if (tokens.length < 2) return whole;
+  let weakest = Infinity;
+  for (const t of tokens) {
+    const s = scoreField(item, t);
+    if (!s) { weakest = 0; break; }
+    weakest = Math.min(weakest, s);
+  }
+  return Math.max(whole, weakest === Infinity ? 0 : weakest);
+}
+
+/**
+ * The items that answer `query`, best first.
+ *
+ * Ties keep the caller's order — that is the whole of the kit's ordering
+ * opinion, and it is what lets a product put its four most-used commands at the
+ * top of the list it passes and have them stay there.
+ */
+export function rankCommands(items, query) {
+  return (items || [])
+    .map((item, i) => ({ item, i, score: scoreCommand(item, query) }))
+    .filter((r) => r.score > 0)
+    .sort((a, b) => b.score - a.score || a.i - b.i)
+    .map((r) => r.item);
+}
+
+/**
+ * The groups that answer `query`, best group first, each holding its own ranked
+ * rows and nothing that scored zero.
+ *
+ * A group is carried by its best row, and the caller's order breaks the tie at
+ * both levels — so a palette nobody has typed into is exactly the list that was
+ * passed in. cmdk ranks groups the same way; the tie-break is the kit's, and it
+ * is what keeps a heading from moving under a reader who has typed nothing.
+ */
+export function rankGroups(groups, query) {
+  return (groups || [])
+    .map((g, i) => {
+      const items = rankCommands(g.items || [], query);
+      const best = items.length ? scoreCommand(items[0], query) : 0;
+      return { group: { ...g, items }, i, best };
+    })
+    .filter((g) => g.group.items.length > 0)
+    .sort((a, b) => b.best - a.best || a.i - b.i)
+    .map((g) => g.group);
+}
+
+/** The label for the key that opens it, on the platform the caller is on. */
+export function paletteHotkey(platform = typeof navigator === 'undefined' ? '' : navigator.platform) {
+  return /mac|iphone|ipad|ipod/i.test(String(platform || '')) ? '⌘K' : 'Ctrl K';
+}

package/src/logic/dropdown.js

@@ -0,0 +1,16 @@
+const FOLD = { ł: 'l', ø: 'o', đ: 'd', ð: 'd', ß: 'ss', æ: 'ae', œ: 'oe', ı: 'i', þ: 'th' };
+const fold = (s) => String(s == null ? '' : s).normalize('NFD').replace(/\p{M}/gu, '').toLowerCase()
+  .replace(/[łøđðßæœıþ]/g, (c) => FOLD[c]);
+
+/**
+ * Is this query narrowing anything? A query of spaces, or of marks with no letter
+ * under them, is not — it leaves every row showing, and the separators with them.
+ *
+ * Public because a second implementation of this dropdown cannot write its own: the
+ * React <Dropdown> asks these two, the way <CommandPalette> asks rankGroups(), so a
+ * list a server rendered and the same list after a keystroke hide the same rows.
+ */
+export const dropdownFiltering = (query) => fold(query).trim() !== '';
+
+/** Does `label` match `query`? A substring, anywhere, ignoring case and accents. */
+export const dropdownMatch = (label, query) => fold(label).includes(fold(query).trim());

package/src/logic/pagination.js

@@ -0,0 +1,2 @@
+export const PAGE_SIZES = [25, 50, 100];
+export const DEFAULT_PAGE_SIZE = 100;

package/src/logic/segmented.js

@@ -0,0 +1,8 @@
+export function segmentedNextIndex(key, index, length) {
+  if (!length) return null;
+  if (key === 'ArrowRight' || key === 'ArrowDown') return (index + 1) % length;
+  if (key === 'ArrowLeft' || key === 'ArrowUp') return (index - 1 + length) % length;
+  if (key === 'Home') return 0;
+  if (key === 'End') return length - 1;
+  return null;
+}

package/src/logic/table-values.js

@@ -0,0 +1,10 @@
+export function formatNumericValue({ value, unit = '', missing = 'Not available' } = {}) {
+  const present = value != null && value !== '';
+  return { text: present ? String(value) : '—', unit: present ? unit : '', missing: present ? undefined : missing };
+}
+
+export function formatDeltaValue({ value, tone = 'neutral', basisId, missing = 'No earlier figure' } = {}) {
+  const present = value != null && value !== '';
+  const judged = present && ['success', 'danger'].includes(tone) && !/^[+−-]?0+(?:[.,]0+)?(?:[^\d.,].*)?$/.test(String(value).replace(/\s/g, ''));
+  return { text: String(present ? value : missing), className: `ui-delta${judged ? ` ui-delta--${tone}` : ''}`, basisId };
+}

package/src/motion.d.ts

@@ -0,0 +1,6 @@
+export declare function prefersReducedMotion(): boolean;
+export declare function staggerDelay(index: number, stepMs?: number): number;
+export declare function initReveal(root?: Document | Element): IntersectionObserver | undefined;
+export declare const ENTRANCE_FALLBACK_MS: number;
+export declare function playEntrance(element: Element | null, className?: string): void;
+export declare function replay(element: HTMLElement | null): void;