@apliteni/apliteni-ui 0.77.0 → 0.79.0

package/react/dist/index.js

@@ -1445,20 +1445,490 @@ function Denied({
   ] });
 }
 
-// src/Dropdown.tsx
+// src/DatePicker.tsx
 import {
-  Fragment as Fragment4,
   useCallback as useCallback2,
   useEffect as useEffect6,
-  useId as useId8,
+  useMemo as useMemo3,
   useRef as useRef10,
   useState as useState6
 } from "react";
-import { icon as icon3, dropdownMatch, dropdownFiltering } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var cx5 = (...a) => a.filter(Boolean).join(" ");
+var pad = (n) => String(n).padStart(2, "0");
+var DAY_MS = 864e5;
+var EN_DASH = "\u2013";
+var MONTH_RE = /^(\d{4})-(\d{2})$/;
+var DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+var PHONE_MAX = 560;
+function usePhone() {
+  const [phone, setPhone] = useState6(false);
+  useEffect6(() => {
+    const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX}px)`);
+    if (!query) return;
+    const read = () => setPhone(query.matches);
+    read();
+    query.addEventListener("change", read);
+    return () => query.removeEventListener("change", read);
+  }, []);
+  return phone;
+}
+function monthIndexOf(period) {
+  const m = MONTH_RE.exec(period);
+  if (!m) return null;
+  const month = +m[2];
+  return month >= 1 && month <= 12 ? +m[1] * 12 + month - 1 : null;
+}
+function dayIndexOf(period) {
+  const m = DAY_RE.exec(period);
+  if (!m) return null;
+  const [y, mo, d] = [+m[1], +m[2], +m[3]];
+  const at = Date.UTC(y, mo - 1, d);
+  const back = new Date(at);
+  if (back.getUTCFullYear() !== y || back.getUTCMonth() !== mo - 1 || back.getUTCDate() !== d) return null;
+  return Math.round(at / DAY_MS);
+}
+function toIndex(period, grain, edge = "start") {
+  if (!period) return null;
+  if (grain === "month") {
+    const month2 = monthIndexOf(period);
+    if (month2 != null) return month2;
+    const day2 = dayIndexOf(period);
+    return day2 == null ? null : monthOf(day2);
+  }
+  const day = dayIndexOf(period);
+  if (day != null) return day;
+  const month = monthIndexOf(period);
+  if (month == null) return null;
+  return edge === "start" ? firstDayOf(month) : firstDayOf(month + 1) - 1;
+}
+function fromIndex(index, grain) {
+  if (grain === "month") return `${pad4(Math.floor(index / 12))}-${pad(index % 12 + 1)}`;
+  const at = new Date(index * DAY_MS);
+  return `${pad4(at.getUTCFullYear())}-${pad(at.getUTCMonth() + 1)}-${pad(at.getUTCDate())}`;
+}
+var pad4 = (n) => String(n).padStart(4, "0");
+var monthOf = (dayIndex) => {
+  const at = new Date(dayIndex * DAY_MS);
+  return at.getUTCFullYear() * 12 + at.getUTCMonth();
+};
+var firstDayOf = (monthIndex) => Math.round(Date.UTC(Math.floor(monthIndex / 12), monthIndex % 12, 1) / DAY_MS);
+var daysInMonth = (monthIndex) => firstDayOf(monthIndex + 1) - firstDayOf(monthIndex);
+function stepMonths(dayIndex, by) {
+  const at = new Date(dayIndex * DAY_MS);
+  const target = monthOf(dayIndex) + by;
+  const day = Math.min(at.getUTCDate(), daysInMonth(target));
+  return firstDayOf(target) + day - 1;
+}
+function evenMonthLabels(format) {
+  const raw = Array.from({ length: 12 }, (_, m) => format.format(new Date(Date.UTC(2e3, m, 1))));
+  const bare = raw.map((n) => n.replace(/\.$/, ""));
+  const chars = bare.map((n) => Array.from(n));
+  const cut = chars.map((c) => c.slice(0, Math.min(...chars.map((o) => o.length))).join(""));
+  const even = bare.every((n) => /^\p{L}+$/u.test(n)) && new Set(cut).size === 12;
+  return even ? cut : raw;
+}
+var clamp = (index, lo, hi) => Math.min(hi ?? index, Math.max(lo ?? index, index));
+function DatePicker({
+  mode = "month",
+  value,
+  defaultValue = null,
+  onChange,
+  range,
+  defaultRange,
+  onRangeChange,
+  min,
+  max,
+  disabledPeriods,
+  presets,
+  placeholder,
+  ariaLabel,
+  id,
+  disabled = false,
+  align = "start",
+  locale = "en-GB",
+  weekStartsOn = 1,
+  today,
+  sheet,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange
+}) {
+  const grain = mode === "day" || mode === "day-range" ? "day" : "month";
+  const picksRange = mode === "range" || mode === "day-range";
+  const phone = usePhone();
+  const asSheet = sheet ?? phone;
+  const root = useRef10(null);
+  const trigger = useRef10(null);
+  const grid = useRef10(null);
+  const [selfOpen, setSelfOpen] = useState6(defaultOpen);
+  const open = openProp ?? selfOpen;
+  const [selfValue, setSelfValue] = useState6(defaultValue);
+  const picked = value !== void 0 ? value : selfValue;
+  const [selfRange, setSelfRange] = useState6(defaultRange ?? { start: null, end: null });
+  const span = range !== void 0 ? range : selfRange;
+  const names = useMemo3(() => ({
+    month: new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" }),
+    monthShort: new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" }),
+    monthYear: new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }),
+    monthYearShort: new Intl.DateTimeFormat(locale, { month: "short", year: "numeric", timeZone: "UTC" }),
+    day: new Intl.DateTimeFormat(locale, { day: "numeric", month: "long", year: "numeric", timeZone: "UTC" }),
+    dayShort: new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" }),
+    weekday: new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" }),
+    weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" })
+  }), [locale]);
+  const monthLabels = useMemo3(() => evenMonthLabels(names.monthShort), [names]);
+  const at = useCallback2((index) => new Date(
+    grain === "month" ? Date.UTC(Math.floor(index / 12), index % 12, 1) : index * DAY_MS
+  ), [grain]);
+  const lo = toIndex(min, grain, "start");
+  const hi = toIndex(max, grain, "end");
+  const blocked = useMemo3(() => (disabledPeriods ?? []).flatMap((period) => {
+    const from = toIndex(period, grain, "start");
+    const to = toIndex(period, grain, "end");
+    return from == null || to == null ? [] : [[from, to]];
+  }), [disabledPeriods, grain]);
+  const outOfBounds = (index) => lo != null && index < lo || hi != null && index > hi;
+  const isBlocked = (index) => outOfBounds(index) || blocked.some(([from, to]) => index >= from && index <= to);
+  const todayIndex = useMemo3(() => {
+    const given = toIndex(today, "day");
+    const now = given ?? Math.floor(Date.now() / DAY_MS);
+    return grain === "month" ? monthOf(now) : now;
+  }, [today, grain]);
+  const anchor = toIndex(picked, grain) ?? toIndex(picksRange ? span.start ?? span.end : null, grain) ?? todayIndex;
+  const [cursor, setCursor] = useState6(() => clamp(anchor, lo, hi));
+  const land = useRef10(false);
+  const setOpen = useCallback2((next) => {
+    if (openProp === void 0) setSelfOpen(next);
+    onOpenChange?.(next);
+  }, [openProp, onOpenChange]);
+  const close = useRef10(setOpen);
+  useIsoLayoutEffect(() => {
+    close.current = setOpen;
+  });
+  useEffect6(() => {
+    if (open) setCursor(clamp(anchor, lo, hi));
+  }, [open]);
+  useEffect6(() => {
+    if (!open || asSheet) return;
+    const doc = root.current?.ownerDocument ?? document;
+    const onClick = (e) => {
+      if (!root.current?.contains(e.target)) close.current(false);
+    };
+    const onKey2 = (e) => {
+      if (e.key !== "Escape") return;
+      close.current(false);
+      trigger.current?.focus();
+    };
+    doc.addEventListener("click", onClick);
+    doc.addEventListener("keydown", onKey2);
+    return () => {
+      doc.removeEventListener("click", onClick);
+      doc.removeEventListener("keydown", onKey2);
+    };
+  }, [open]);
+  useIsoLayoutEffect(() => {
+    if (!open || !land.current) return;
+    land.current = false;
+    grid.current?.querySelector('[data-dp-cell][tabindex="0"]')?.focus();
+  });
+  const columns = grain === "month" ? 3 : 7;
+  const page = grain === "month" ? Math.floor(cursor / 12) : monthOf(cursor);
+  const caption = grain === "month" ? String(page) : names.monthYear.format(at(firstDayOf(page)));
+  const periodName = useCallback2((index) => grain === "month" ? names.monthYear.format(at(index)) : `${names.weekday.format(at(index))} ${names.day.format(at(index))}`, [grain, names, at]);
+  const count = grain === "month" ? 12 : daysInMonth(page);
+  const first = grain === "month" ? page * 12 : firstDayOf(page);
+  const last = first + count - 1;
+  const cells = useMemo3(() => Array.from({ length: count }, (_, i) => {
+    const index = first + i;
+    const period = fromIndex(index, grain);
+    return {
+      period,
+      index,
+      label: grain === "month" ? monthLabels[index % 12] : String(new Date(index * DAY_MS).getUTCDate()),
+      name: periodName(index),
+      disabled: isBlocked(index)
+    };
+  }), [grain, first, count, monthLabels, at, periodName, lo, hi, blocked]);
+  const lead = grain === "day" ? (new Date(firstDayOf(page) * DAY_MS).getUTCDay() - weekStartsOn + 7) % 7 : 0;
+  const rows = [];
+  const slots = [...Array(lead).fill(null), ...cells];
+  while (slots.length % columns !== 0) slots.push(null);
+  for (let i = 0; i < slots.length; i += columns) rows.push(slots.slice(i, i + columns));
+  const weekdays = grain === "day" ? Array.from({ length: 7 }, (_, i) => {
+    const sample = at(3 + (weekStartsOn + i) % 7);
+    return { short: names.weekdayShort.format(sample), long: names.weekday.format(sample) };
+  }) : [];
+  const startIndex = toIndex(span.start, grain);
+  const endIndex = toIndex(span.end, grain);
+  const edges = startIndex != null && endIndex != null ? [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)] : [startIndex ?? endIndex, startIndex ?? endIndex];
+  const isEdge = (index) => index === edges[0] || index === edges[1];
+  const inSpan = (index) => edges[0] != null && edges[1] != null && index > edges[0] && index < edges[1];
+  const showsSpan = (cell) => inSpan(cell.index) && !cell.disabled;
+  const isPicked = (index) => picksRange ? isEdge(index) : index === toIndex(picked, grain);
+  function pick(cell) {
+    if (cell.disabled) return;
+    setCursor(cell.index);
+    if (picksRange) {
+      const half = startIndex != null && endIndex == null;
+      const next = half ? cell.index < startIndex ? { start: cell.period, end: span.start } : { start: span.start, end: cell.period } : { start: cell.period, end: null };
+      if (range === void 0) setSelfRange(next);
+      onRangeChange?.(next);
+      if (next.end == null) return;
+    } else {
+      if (value === void 0) setSelfValue(cell.period);
+      onChange?.(cell.period);
+    }
+    dismiss();
+  }
+  function dismiss() {
+    setOpen(false);
+    if (!asSheet) trigger.current?.focus();
+  }
+  function allowed(preset) {
+    const a = toIndex(preset.range.start, grain, "start");
+    const b = toIndex(preset.range.end, grain, "end");
+    if (a == null || b == null) return null;
+    const [from, to] = a <= b ? [a, b] : [b, a];
+    if (hi != null && from > hi || lo != null && to < lo) return null;
+    const ends = [clamp(from, lo, hi), clamp(to, lo, hi)];
+    if (ends.some(isBlocked)) return null;
+    return { start: fromIndex(ends[0], grain), end: fromIndex(ends[1], grain) };
+  }
+  function applyPreset(next) {
+    if (range === void 0) setSelfRange(next);
+    onRangeChange?.(next);
+    const start = toIndex(next.start, grain, "start");
+    if (start != null) setCursor(start);
+    dismiss();
+  }
+  function step(by) {
+    setCursor((now) => clamp(now + by, lo, hi));
+  }
+  function stepPage(by) {
+    setCursor((now) => clamp(grain === "month" ? now + 12 * by : stepMonths(now, by), lo, hi));
+  }
+  function onGridKeyDown(e) {
+    const rowStart = cursor - (cursor - (first - lead)) % columns;
+    const moves = {
+      ArrowLeft: () => step(-1),
+      ArrowRight: () => step(1),
+      ArrowUp: () => step(-columns),
+      ArrowDown: () => step(columns),
+      Home: () => setCursor(clamp(Math.max(rowStart, first), lo, hi)),
+      End: () => setCursor(clamp(Math.min(rowStart + columns - 1, last), lo, hi)),
+      PageUp: () => stepPage(-1),
+      PageDown: () => stepPage(1)
+    };
+    const move = moves[e.key];
+    if (move) {
+      e.preventDefault();
+      land.current = true;
+      move();
+      return;
+    }
+    if (e.key === "Escape" && !asSheet) {
+      e.preventDefault();
+      e.stopPropagation();
+      dismiss();
+    }
+  }
+  const shown = useMemo3(() => {
+    if (picksRange) {
+      const text2 = (period) => {
+        const index2 = toIndex(period, grain);
+        if (index2 == null) return null;
+        return grain === "month" ? names.monthYearShort.format(at(index2)) : names.dayShort.format(at(index2));
+      };
+      const from = text2(span.start);
+      const to = text2(span.end);
+      if (from && to) return `${from} ${EN_DASH} ${to}`;
+      if (from) return `From ${from}`;
+      if (to) return `Until ${to}`;
+      return null;
+    }
+    const index = toIndex(picked, grain);
+    if (index == null) return null;
+    return grain === "month" ? names.monthYear.format(at(index)) : names.day.format(at(index));
+  }, [picksRange, grain, span.start, span.end, picked, names, at]);
+  const empty = placeholder ?? (picksRange ? grain === "month" ? "Select a period" : "Select dates" : grain === "month" ? "Select a month" : "Select a date");
+  const name = ariaLabel || empty;
+  const pageName = (which) => grain === "month" ? String(which) : names.monthYear.format(at(firstDayOf(which)));
+  const stepBack = `${grain === "month" ? "Previous year" : "Previous month"}, ${pageName(page - 1)}`;
+  const stepOn = `${grain === "month" ? "Next year" : "Next month"}, ${pageName(page + 1)}`;
+  function state(cell) {
+    const parts = [cell.name];
+    if (cell.index === todayIndex) parts.push(grain === "month" ? "this month" : "today");
+    if (picksRange) {
+      if (cell.index === edges[0] && cell.index === edges[1]) parts.push("selected");
+      else if (cell.index === edges[0]) parts.push("range start");
+      else if (cell.index === edges[1]) parts.push("range end");
+      else if (inSpan(cell.index)) parts.push("in range");
+    } else if (isPicked(cell.index)) {
+      parts.push("selected");
+    }
+    return parts.join(", ");
+  }
+  const noneBefore = lo != null && first <= lo;
+  const noneAfter = hi != null && last >= hi;
+  const calendar = /* @__PURE__ */ jsxs15("div", { className: cx5("ui-datepicker__body", asSheet && "is-sheet"), children: [
+    picksRange && presets?.length ? /* @__PURE__ */ jsx19("div", { className: "ui-datepicker__presets", role: "group", "aria-label": "Period shortcuts", children: presets.map((preset) => {
+      const within = allowed(preset);
+      return /* @__PURE__ */ jsx19(
+        "button",
+        {
+          type: "button",
+          className: "ui-btn ui-btn--ghost ui-btn--xs ui-datepicker__preset",
+          disabled: within == null,
+          onClick: () => within && applyPreset(within),
+          children: preset.label
+        },
+        preset.label
+      );
+    }) }) : null,
+    /* @__PURE__ */ jsxs15("div", { className: "ui-datepicker__calendar", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "ui-datepicker__head", children: [
+        /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            className: "ui-btn ui-btn--ghost ui-btn--xs ui-btn--icon ui-datepicker__step",
+            "aria-label": stepBack,
+            disabled: noneBefore,
+            onClick: () => stepPage(-1),
+            children: /* @__PURE__ */ jsx19(Icon, { name: "chevronLeft" })
+          }
+        ),
+        /* @__PURE__ */ jsx19("span", { className: "ui-datepicker__caption", "aria-live": "polite", children: caption }),
+        /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            className: "ui-btn ui-btn--ghost ui-btn--xs ui-btn--icon ui-datepicker__step",
+            "aria-label": stepOn,
+            disabled: noneAfter,
+            onClick: () => stepPage(1),
+            children: /* @__PURE__ */ jsx19(Icon, { name: "chevronRight" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs15(
+        "div",
+        {
+          className: cx5("ui-datepicker__grid", grain === "day" && "is-days"),
+          role: "grid",
+          "aria-label": caption,
+          ref: grid,
+          onKeyDown: onGridKeyDown,
+          children: [
+            weekdays.length > 0 && /* @__PURE__ */ jsx19("div", { className: "ui-datepicker__row", role: "row", children: weekdays.map((weekday) => /* @__PURE__ */ jsx19(
+              "span",
+              {
+                className: "ui-datepicker__weekday",
+                role: "columnheader",
+                "aria-label": weekday.long,
+                children: weekday.short
+              },
+              weekday.long
+            )) }),
+            rows.map((cellsInRow, r) => /* @__PURE__ */ jsx19("div", { className: "ui-datepicker__row", role: "row", children: cellsInRow.map((cell, c) => cell ? /* @__PURE__ */ jsx19(
+              "span",
+              {
+                className: "ui-datepicker__cell",
+                role: "gridcell",
+                "aria-selected": isPicked(cell.index),
+                children: /* @__PURE__ */ jsx19(
+                  "button",
+                  {
+                    type: "button",
+                    "data-dp-cell": "",
+                    "data-value": cell.period,
+                    className: cx5(
+                      "ui-datepicker__opt",
+                      "ui-focusable",
+                      isPicked(cell.index) && "is-selected",
+                      showsSpan(cell) && "is-inside",
+                      cell.index === todayIndex && "is-today",
+                      cell.disabled && "is-disabled"
+                    ),
+                    tabIndex: cell.index === cursor ? 0 : -1,
+                    "aria-disabled": cell.disabled || void 0,
+                    "aria-label": state(cell),
+                    onClick: () => pick(cell),
+                    onFocus: () => setCursor(cell.index),
+                    children: /* @__PURE__ */ jsx19("span", { className: "ui-datepicker__num", children: cell.label })
+                  }
+                )
+              },
+              cell.period
+            ) : /* @__PURE__ */ jsx19("span", { className: "ui-datepicker__cell is-empty", role: "gridcell" }, `e${r}-${c}`)) }, `r${r}`))
+          ]
+        }
+      )
+    ] })
+  ] });
+  return (
+    // `open` on the root whichever form the panel takes, so the trigger's
+    // chevron flips for the sheet as it does for the popover. The panel rules
+    // it also switches on have no panel to find while the sheet is up.
+    /* @__PURE__ */ jsxs15("div", { className: cx5("ui-dropdown", "ui-datepicker", open && "open"), id, ref: root, children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          type: "button",
+          className: "ui-dropdown__trigger ui-datepicker__trigger",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": ariaLabel || (shown ? void 0 : name),
+          disabled,
+          ref: trigger,
+          onClick: (e) => {
+            e.stopPropagation();
+            setOpen(!open);
+          },
+          children: [
+            /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__value", children: shown ?? empty }),
+            /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+          ]
+        }
+      ),
+      asSheet ? (
+        // A sheet is the kit's drawer, not a wide popover: the scrim, the close
+        // control, the focus trap, the inert page behind it and the restored
+        // focus all come from <Drawer>, because changing the FORM of the panel
+        // without taking the sheet's affordances left a phone reader with no
+        // visible way out and a Tab that walked into the live page behind it.
+        // why: guidelines/drawer.md
+        /* @__PURE__ */ jsx19(Drawer, { open, side: "bottom", size: "md", title: name, onClose: () => setOpen(false), children: calendar })
+      ) : /* @__PURE__ */ jsx19(
+        "div",
+        {
+          className: cx5("ui-dropdown__panel", "ui-datepicker__panel", align === "end" && "is-end"),
+          role: "dialog",
+          "aria-label": name,
+          inert: !open,
+          onClick: (e) => e.stopPropagation(),
+          children: calendar
+        }
+      )
+    ] })
+  );
+}
+
+// src/Dropdown.tsx
+import {
+  Fragment as Fragment4,
+  useCallback as useCallback3,
+  useEffect as useEffect7,
+  useId as useId8,
+  useRef as useRef11,
+  useState as useState7
+} from "react";
+import { icon as icon3, dropdownMatch, dropdownFiltering } from "@apliteni/apliteni-ui";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var cx6 = (...a) => a.filter(Boolean).join(" ");
 var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
-var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx19(
+var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx20(
   "span",
   {
     className,
@@ -1471,7 +1941,7 @@ function RowBadge({ badge }) {
   const given = typeof badge === "string" ? "" : badge.tone || "";
   let tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
   if (!given && tone === "neutral" && /^(?:off|unset|disabled|archive|archived)$/i.test(text2)) tone = "state";
-  return /* @__PURE__ */ jsx19("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
+  return /* @__PURE__ */ jsx20("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
 }
 var keyOf = (it) => it.value != null ? `v:${it.value}` : `l:${it.label}`;
 var itemsIn = (panel) => Array.from(panel?.querySelectorAll("[data-dd-item]") ?? []).filter((el) => el.getAttribute("aria-disabled") !== "true" && !el.hidden);
@@ -1507,24 +1977,24 @@ function Dropdown({
   onSelect,
   row
 }) {
-  const [selfOpen, setSelfOpen] = useState6(defaultOpen);
+  const [selfOpen, setSelfOpen] = useState7(defaultOpen);
   const open = openProp ?? selfOpen;
-  const [pick, setPick] = useState6(null);
-  const [query, setQuery] = useState6(() => search && search !== true ? search.query || "" : "");
-  const [activeKey, setActiveKey] = useState6(null);
-  const root = useRef10(null);
-  const panel = useRef10(null);
-  const trigger = useRef10(null);
-  const field = useRef10(null);
-  const landOn = useRef10(null);
-  const at = useRef10("");
+  const [pick, setPick] = useState7(null);
+  const [query, setQuery] = useState7(() => search && search !== true ? search.query || "" : "");
+  const [activeKey, setActiveKey] = useState7(null);
+  const root = useRef11(null);
+  const panel = useRef11(null);
+  const trigger = useRef11(null);
+  const field = useRef11(null);
+  const landOn = useRef11(null);
+  const at = useRef11("");
   const auto = useId8().replace(/:/g, "");
   const uid = id ?? auto;
-  const setOpen = useCallback2((next) => {
+  const setOpen = useCallback3((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef10(setOpen);
+  const close = useRef11(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
@@ -1538,7 +2008,7 @@ function Dropdown({
   const given = rows.find((it) => it.selected);
   const givenKey = given ? keyOf(given) : null;
   const pickedKey = pick && pick.against === givenKey ? pick.key : null;
-  useEffect6(() => {
+  useEffect7(() => {
     if (pick && pick.against !== givenKey) setPick(null);
   }, [givenKey, pick]);
   const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
@@ -1552,7 +2022,7 @@ function Dropdown({
   const rowIds = /* @__PURE__ */ new Map();
   rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
   const listId = `${uid}-list`;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const mine = () => close.current(false);
     for (const other of [...openNow]) other();
@@ -1561,7 +2031,7 @@ function Dropdown({
       openNow.delete(mine);
     };
   }, [open]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -1686,13 +2156,13 @@ function Dropdown({
   };
   function renderRow(entry, key) {
     if (!isRow(entry)) {
-      return /* @__PURE__ */ jsx19("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
+      return /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
     }
     const disabled = !!entry.disabled;
     const selected = selectedOf(entry);
     const asLink = !!entry.href && !disabled && !asOption;
     const props = {
-      className: cx5(
+      className: cx6(
         "ui-dropdown__item",
         selected && "is-selected",
         disabled && "is-disabled",
@@ -1708,23 +2178,23 @@ function Dropdown({
       ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
       ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
       onClick: (e) => choose(entry, e),
-      children: /* @__PURE__ */ jsxs15(Fragment5, { children: [
-        entry.icon && /* @__PURE__ */ jsx19(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
-        /* @__PURE__ */ jsxs15("span", { className: "ui-dropdown__main", children: [
-          /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__label", children: entry.label }),
-          entry.description && /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__desc", children: entry.description })
+      children: /* @__PURE__ */ jsxs16(Fragment5, { children: [
+        entry.icon && /* @__PURE__ */ jsx20(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
+        /* @__PURE__ */ jsxs16("span", { className: "ui-dropdown__main", children: [
+          /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__label", children: entry.label }),
+          entry.description && /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__desc", children: entry.description })
         ] }),
-        entry.badge ? /* @__PURE__ */ jsx19(RowBadge, { badge: entry.badge }) : null,
-        asOption && /* @__PURE__ */ jsx19(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
+        entry.badge ? /* @__PURE__ */ jsx20(RowBadge, { badge: entry.badge }) : null,
+        asOption && /* @__PURE__ */ jsx20(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx19(Fragment4, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx20(Fragment4, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
-    return /* @__PURE__ */ jsx19(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx20(Tag, { ...props }, key);
   }
   const body = sections?.length ? sections.map((section, si) => {
     const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         className: "ui-dropdown__section",
@@ -1732,7 +2202,7 @@ function Dropdown({
         "aria-label": section.label || void 0,
         hidden: gone || void 0,
         children: [
-          section.label && /* @__PURE__ */ jsx19("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
+          section.label && /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
           (section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
         ]
       },
@@ -1740,16 +2210,16 @@ function Dropdown({
     );
   }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
   const cap = scroll && scroll !== true ? { maxHeight: typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
-  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
-    /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__none-hint", children: sx.hint })
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs16(Fragment5, { children: [
+    /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
+    /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__none-hint", children: sx.hint })
   ] }) : null;
-  return /* @__PURE__ */ jsxs15("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16("div", { className: cx6("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
+    /* @__PURE__ */ jsxs16(
       "button",
       {
         type: "button",
-        className: cx5("ui-dropdown__trigger", triggerClass),
+        className: cx6("ui-dropdown__trigger", triggerClass),
         "data-dropdown-trigger": "",
         "aria-haspopup": sx ? "dialog" : listRole,
         "aria-expanded": open,
@@ -1760,18 +2230,18 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs15(Fragment5, { children: [
-            label && /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__pre", children: label }),
-            /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs16(Fragment5, { children: [
+            label && /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__pre", children: label }),
+            /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
           ] }),
-          chevron && /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+          chevron && /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16(
       "div",
       {
-        className: cx5(
+        className: cx6(
           "ui-dropdown__panel",
           align === "end" && "is-end",
           direction === "up" && "is-up",
@@ -1788,10 +2258,10 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
-            /* @__PURE__ */ jsxs15("div", { className: "ui-dropdown__search", children: [
-              /* @__PURE__ */ jsx19(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
-              /* @__PURE__ */ jsx19(
+          sx ? /* @__PURE__ */ jsxs16(Fragment5, { children: [
+            /* @__PURE__ */ jsxs16("div", { className: "ui-dropdown__search", children: [
+              /* @__PURE__ */ jsx20(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
+              /* @__PURE__ */ jsx20(
                 "input",
                 {
                   className: "ui-dropdown__search-input",
@@ -1815,8 +2285,8 @@ function Dropdown({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx19("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
+            /* @__PURE__ */ jsx20(
               "div",
               {
                 className: "ui-dropdown__none",
@@ -1841,7 +2311,7 @@ function strip(o) {
 }
 
 // src/BackLink.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var BARE = "Back";
 var SCRIPTED = /^javascript:/i;
 var LEADING = /^[\u0000-\u0020]+/;
@@ -1860,7 +2330,7 @@ function BackLink({
   const name = text(label).replace(SAID, "");
   const bare = !name || name.toLowerCase() === BARE.toLowerCase();
   const Tag = as ?? "a";
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     Tag,
     {
       className: ["ui-back", className].filter(Boolean).join(" "),
@@ -1868,8 +2338,8 @@ function BackLink({
       "aria-label": bare ? void 0 : `${BARE} to ${name}`,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx20(Icon, { name: "chevronLeft" }),
-        /* @__PURE__ */ jsx20("span", { className: "ui-back__label", children: bare ? BARE : name })
+        /* @__PURE__ */ jsx21(Icon, { name: "chevronLeft" }),
+        /* @__PURE__ */ jsx21("span", { className: "ui-back__label", children: bare ? BARE : name })
       ]
     }
   );
@@ -1877,41 +2347,41 @@ function BackLink({
 
 // src/TableValues.tsx
 import { formatNumericValue, formatDeltaValue } from "@apliteni/apliteni-ui";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function NumericValue(props) {
   const value = formatNumericValue(props);
-  return /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsxs17("span", { className: "ui-value", "aria-label": value.missing, children: [
+  return /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsxs18("span", { className: "ui-value", "aria-label": value.missing, children: [
     value.text,
-    value.unit && /* @__PURE__ */ jsx21("span", { className: "ui-value__unit", children: value.unit })
+    value.unit && /* @__PURE__ */ jsx22("span", { className: "ui-value__unit", children: value.unit })
   ] }) });
 }
 function DeltaValue(props) {
   const value = formatDeltaValue(props);
-  return /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21("span", { className: value.className, "aria-describedby": value.basisId || void 0, children: value.text }) });
+  return /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsx22("span", { className: value.className, "aria-describedby": value.basisId || void 0, children: value.text }) });
 }
 function RowIdentity({ symbol, name, logo, href }) {
   const Tag = href ? "a" : "span";
-  return /* @__PURE__ */ jsxs17(Tag, { className: "ui-identity", href, children: [
-    /* @__PURE__ */ jsxs17("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx21("span", { children: symbol.slice(0, 1) }),
-      logo && /* @__PURE__ */ jsx21("img", { src: logo, alt: "", onLoad: (e) => {
+  return /* @__PURE__ */ jsxs18(Tag, { className: "ui-identity", href, children: [
+    /* @__PURE__ */ jsxs18("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx22("span", { children: symbol.slice(0, 1) }),
+      logo && /* @__PURE__ */ jsx22("img", { src: logo, alt: "", onLoad: (e) => {
         e.currentTarget.hidden = false;
       }, onError: (e) => {
         e.currentTarget.hidden = true;
       } })
     ] }),
-    /* @__PURE__ */ jsx21("span", { className: "ui-identity__symbol", children: symbol }),
-    /* @__PURE__ */ jsx21("span", { className: "ui-identity__name", children: name })
+    /* @__PURE__ */ jsx22("span", { className: "ui-identity__symbol", children: symbol }),
+    /* @__PURE__ */ jsx22("span", { className: "ui-identity__name", children: name })
   ] });
 }
 
 // src/Segmented.tsx
 import { segmentedNextIndex } from "@apliteni/apliteni-ui";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Segmented({ options, value, onChange, label, appearance = "pill", disabled = false }) {
   const enabled = options.filter((o) => !o.disabled);
   const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
-  return /* @__PURE__ */ jsx22("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx23(
     "button",
     {
       type: "button",
@@ -1937,13 +2407,13 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 }
 
 // src/FilterBar.tsx
-import { useRef as useRef11, useState as useState7 } from "react";
+import { useRef as useRef12, useState as useState8 } from "react";
 import { filterChipText, filterChipName, filterChipUnset } from "@apliteni/apliteni-ui";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } 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 bar = useRef12(null);
+  const focused = useRef12(null);
+  const [opened, setOpened] = useState8({});
   const blocked = disabled || busy;
   useIsoLayoutEffect(() => {
     const stale = Object.keys(opened).filter((id) => !filters.some((filter) => filter.id === id && filter.open === opened[id].against));
@@ -1956,7 +2426,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
     focused.current = null;
     (target || bar.current)?.focus();
   });
-  return /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsxs19(
     "fieldset",
     {
       ref: bar,
@@ -1969,8 +2439,8 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
         if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focused.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx23("legend", { className: "ui-filter-bar__legend", children: label }),
-        filters.map((filter, index) => /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx24("legend", { className: "ui-filter-bar__legend", children: label }),
+        filters.map((filter, index) => /* @__PURE__ */ jsxs19(
           "fieldset",
           {
             className: "ui-filter-bar__chip",
@@ -1980,14 +2450,14 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
               focused.current = { id: filter.id, index };
             },
             children: [
-              /* @__PURE__ */ jsx23("legend", { className: "ui-filter-bar__legend", children: filter.label }),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24("legend", { className: "ui-filter-bar__legend", children: filter.label }),
+              /* @__PURE__ */ jsx24(
                 Dropdown,
                 {
                   items: filter.items,
                   variant: "select",
                   ariaLabel: filterChipName(filter),
-                  triggerContent: /* @__PURE__ */ jsx23("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
+                  triggerContent: /* @__PURE__ */ jsx24("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
                   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) => {
@@ -1995,7 +2465,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
                   }
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   type: "button",
@@ -2012,9 +2482,9 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
           },
           filter.id
         )),
-        /* @__PURE__ */ jsx23("span", { "data-filter-clear": "", onFocus: () => {
+        /* @__PURE__ */ jsx24("span", { "data-filter-clear": "", onFocus: () => {
           focused.current = { id: null, index: 0 };
-        }, children: /* @__PURE__ */ jsx23(Button, { size: "sm", variant: "ghost", disabled: !filters.length, onClick: () => {
+        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", variant: "ghost", disabled: !filters.length, onClick: () => {
           if (!blocked) onClear();
         }, children: clearLabel }) })
       ]
@@ -2023,37 +2493,37 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
 }
 
 // src/KeyValueList.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function detail({ value, redacted }) {
-  if (redacted) return /* @__PURE__ */ jsxs19("span", { className: "ui-kv__hidden", children: [
-    /* @__PURE__ */ jsx24(Icon, { name: "eyeOff" }),
+  if (redacted) return /* @__PURE__ */ jsxs20("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx25(Icon, { name: "eyeOff" }),
     "Hidden"
   ] });
   if (value == null) return "\u2014";
   return typeof value === "boolean" ? String(value) : value;
 }
 function KeyValueList({ rows, columns = 1, className, ...rest }) {
-  return /* @__PURE__ */ jsx24("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs19("div", { className: "ui-drawer__row", children: [
-    /* @__PURE__ */ jsx24("dt", { children: row.label }),
-    /* @__PURE__ */ jsx24("dd", { children: detail(row) })
+  return /* @__PURE__ */ jsx25("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs20("div", { className: "ui-drawer__row", children: [
+    /* @__PURE__ */ jsx25("dt", { children: row.label }),
+    /* @__PURE__ */ jsx25("dd", { children: detail(row) })
   ] }, index)) });
 }
 function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs19("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
-    title != null && /* @__PURE__ */ jsx24(Heading, { className: "ui-drawer__section-title", children: title }),
+  return /* @__PURE__ */ jsxs20("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+    title != null && /* @__PURE__ */ jsx25(Heading, { className: "ui-drawer__section-title", children: title }),
     children
   ] });
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect7, useRef as useRef12, useState as useState8 } from "react";
-import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef13, useState as useState9 } from "react";
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
-  const [status, setStatus] = useState8("idle");
-  const request = useRef12(0);
-  const timer = useRef12(void 0);
-  useEffect7(() => {
+  const [status, setStatus] = useState9("idle");
+  const request = useRef13(0);
+  const timer = useRef13(void 0);
+  useEffect8(() => {
     setStatus("idle");
     return () => {
       request.current++;
@@ -2073,11 +2543,11 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
       if (current === request.current) setStatus("failed");
     }
   }
-  return /* @__PURE__ */ jsxs20("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "ui-snippet__bar", children: [
-      /* @__PURE__ */ jsx25("span", { children: label }),
-      copy && /* @__PURE__ */ jsxs20(Fragment6, { children: [
-        /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs21("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "ui-snippet__bar", children: [
+      /* @__PURE__ */ jsx26("span", { children: label }),
+      copy && /* @__PURE__ */ jsxs21(Fragment6, { children: [
+        /* @__PURE__ */ jsx26(
           "button",
           {
             type: "button",
@@ -2085,31 +2555,31 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
             "aria-label": copyLabel,
             title: copyLabel,
             onClick: handleCopy,
-            children: /* @__PURE__ */ jsx25(Icon, { name: status === "idle" ? "copy" : "check" })
+            children: /* @__PURE__ */ jsx26(Icon, { name: status === "idle" ? "copy" : "check" })
           }
         ),
-        /* @__PURE__ */ jsx25("span", { className: "ui-sr ui-snippet__status", role: "status", "aria-live": "polite", children: status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "" })
+        /* @__PURE__ */ jsx26("span", { className: "ui-sr ui-snippet__status", role: "status", "aria-live": "polite", children: status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx25("pre", { children: children ?? code })
+    /* @__PURE__ */ jsx26("pre", { children: children ?? code })
   ] });
 }
 
 // src/Tabs.tsx
-import { useEffect as useEffect8, useId as useId9, useRef as useRef13 } from "react";
+import { useEffect as useEffect9, useId as useId9, useRef as useRef14 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId9();
-  const previous = useRef13(value);
-  const activePanel = useRef13(null);
-  const buttons = useRef13([]);
-  useEffect8(() => {
+  const previous = useRef14(value);
+  const activePanel = useRef14(null);
+  const buttons = useRef14([]);
+  useEffect9(() => {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
-  return /* @__PURE__ */ jsxs21("div", { className: "ui-tabs", children: [
-    /* @__PURE__ */ jsx26("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22("div", { className: "ui-tabs", children: [
+    /* @__PURE__ */ jsx27("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs22(
       "button",
       {
         type: "button",
@@ -2147,7 +2617,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs21(Fragment7, { children: [
+          item.count != null && /* @__PURE__ */ jsxs22(Fragment7, { children: [
             " ",
             item.count
           ] })
@@ -2155,7 +2625,7 @@ function Tabs({ items, value, onChange, label }) {
       },
       item.value
     )) }),
-    /* @__PURE__ */ jsx26("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx27(
       "div",
       {
         className: "ui-tabs__panel",
@@ -2173,14 +2643,14 @@ function Tabs({ items, value, onChange, label }) {
 }
 
 // src/Timeline.tsx
-import { useEffect as useEffect9, useRef as useRef14 } from "react";
+import { useEffect as useEffect10, useRef as useRef15 } from "react";
 import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } 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)));
-  const rows = useRef14(/* @__PURE__ */ new Map());
-  useEffect9(() => {
+  const previousIds = useRef15(new Set(events.map((event) => event.id)));
+  const rows = useRef15(/* @__PURE__ */ new Map());
+  useEffect10(() => {
     if (previousIds.current.size > 0 && !prefersReducedMotion()) {
       for (const event of events) {
         if (previousIds.current.has(event.id)) continue;
@@ -2192,7 +2662,7 @@ function Timeline({ events, className, ...rest }) {
     }
     previousIds.current = new Set(events.map((event) => event.id));
   }, [events]);
-  return /* @__PURE__ */ jsx27("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__ */ jsxs22(
+  return /* @__PURE__ */ jsx28("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__ */ jsxs23(
     "li",
     {
       className: "ui-timeline__event",
@@ -2201,20 +2671,20 @@ function Timeline({ events, className, ...rest }) {
         else rows.current.delete(event.id);
       },
       children: [
-        /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", className: [
+        /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", className: [
           "ui-timeline__marker",
           event.kind && "ui-timeline__marker--kind",
           event.kind === "reversal" && "ui-timeline__marker--reversal"
-        ].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */ jsx27(Icon, { name: kindIcons[event.kind] }) }),
-        /* @__PURE__ */ jsxs22("div", { className: "ui-timeline__head", children: [
-          /* @__PURE__ */ jsx27("span", { className: "ui-timeline__actor", children: event.actor }),
-          /* @__PURE__ */ jsx27("time", { dateTime: event.dateTime, children: event.timestamp }),
-          index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx27("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
+        ].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */ jsx28(Icon, { name: kindIcons[event.kind] }) }),
+        /* @__PURE__ */ jsxs23("div", { className: "ui-timeline__head", children: [
+          /* @__PURE__ */ jsx28("span", { className: "ui-timeline__actor", children: event.actor }),
+          /* @__PURE__ */ jsx28("time", { dateTime: event.dateTime, children: event.timestamp }),
+          index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx28("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
         ] }),
-        /* @__PURE__ */ jsx27("p", { className: "ui-timeline__description", children: event.description }),
-        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs22("div", { className: "ui-timeline__meta", children: [
-          event.meta != null && /* @__PURE__ */ jsx27("span", { children: event.meta }),
-          event.undo && /* @__PURE__ */ jsx27(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" })
+        /* @__PURE__ */ jsx28("p", { className: "ui-timeline__description", children: event.description }),
+        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs23("div", { className: "ui-timeline__meta", children: [
+          event.meta != null && /* @__PURE__ */ jsx28("span", { children: event.meta }),
+          event.undo && /* @__PURE__ */ jsx28(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" })
         ] })
       ]
     },
@@ -2223,20 +2693,20 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect10, useId as useId10, useRef as useRef15, useState as useState9 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect11, useId as useId10, useRef as useRef16, useState as useState10 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } 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__ */ jsxs23("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsxs23("label", { className: "ui-field__label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "ui-field", children: [
+    /* @__PURE__ */ jsxs24("label", { className: "ui-field__label", htmlFor: id, children: [
       label,
-      required && /* @__PURE__ */ jsx28("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx29("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
     children,
-    error && /* @__PURE__ */ jsx28(
+    error && /* @__PURE__ */ jsx29(
       "div",
       {
         id: `${id}-error`,
@@ -2245,7 +2715,7 @@ function Frame({ id, label, hint, error, required, children }) {
         dangerouslySetInnerHTML: { __html: icon4("alert") + esc(error) }
       }
     ),
-    hint && /* @__PURE__ */ jsx28("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
+    hint && /* @__PURE__ */ jsx29("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
   ] });
 }
 function wiring(id, hint, error) {
@@ -2254,13 +2724,13 @@ function wiring(id, hint, error) {
 function Field({ id: suppliedId, label, hint, error, required, children }) {
   const generatedId = useId10();
   const id = suppliedId ?? generatedId;
-  return /* @__PURE__ */ jsx28(Frame, { ...{ id, label, hint, error, required }, children: children({ ...wiring(id, hint, error), required }) });
+  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: children({ ...wiring(id, hint, error), required }) });
 }
 var TextField = forwardRef6(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
   const id = useId10();
   const hasUnit = type === "number" && !!unit;
   const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
-  const control = /* @__PURE__ */ jsx28(
+  const control = /* @__PURE__ */ jsx29(
     "input",
     {
       ref,
@@ -2273,19 +2743,19 @@ var TextField = forwardRef6(function TextField2({ label, hint, error, required,
       className: `ui-input${error ? " is-invalid" : ""} ${className}`
     }
   );
-  const unitSpan = hasUnit ? /* @__PURE__ */ jsx28("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit }) : null;
-  return /* @__PURE__ */ jsx28(Frame, { ...{ id, label, hint, error, required }, children: glyph ? /* @__PURE__ */ jsxs23("div", { className: `ui-input-group${hasUnit ? " ui-field-number" : ""}`, children: [
-    /* @__PURE__ */ jsx28("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon4(glyph) } }),
+  const unitSpan = hasUnit ? /* @__PURE__ */ jsx29("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit }) : null;
+  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: glyph ? /* @__PURE__ */ jsxs24("div", { className: `ui-input-group${hasUnit ? " ui-field-number" : ""}`, children: [
+    /* @__PURE__ */ jsx29("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon4(glyph) } }),
     control,
     unitSpan
-  ] }) : hasUnit ? /* @__PURE__ */ jsxs23("div", { className: "ui-field-number", children: [
+  ] }) : hasUnit ? /* @__PURE__ */ jsxs24("div", { className: "ui-field-number", children: [
     control,
     unitSpan
   ] }) : control });
 });
 function TextArea({ label, hint, error, required, className = "", ...props }) {
   const id = useId10();
-  return /* @__PURE__ */ jsx28(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx29(
     "textarea",
     {
       rows: 4,
@@ -2298,7 +2768,7 @@ function TextArea({ label, hint, error, required, className = "", ...props }) {
 }
 function SelectField({ label, hint, error, required, className = "", children, ...props }) {
   const id = useId10();
-  return /* @__PURE__ */ jsx28(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx29(
     "select",
     {
       ...props,
@@ -2311,10 +2781,10 @@ 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] = useState9(null);
-  const [dragging, setDragging] = useState9(false);
-  useEffect10(() => {
+  const input = useRef16(null);
+  const [file, setFile] = useState10(null);
+  const [dragging, setDragging] = useState10(false);
+  useEffect11(() => {
     const form = input.current?.form;
     const reset = () => {
       setFile(null);
@@ -2327,7 +2797,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
     setFile(next);
     onFileChange?.(next);
   };
-  return /* @__PURE__ */ jsx28(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs24(
     "div",
     {
       className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
@@ -2348,12 +2818,12 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
         update(transfer.files[0]);
       },
       children: [
-        /* @__PURE__ */ jsx28("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx28(Icon, { name: "upload" }) }),
-        /* @__PURE__ */ jsx28("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
-        /* @__PURE__ */ jsx28("div", { children: "or choose one from your device" }),
-        /* @__PURE__ */ jsxs23("span", { className: "ui-file__choose", children: [
-          /* @__PURE__ */ jsx28("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__ */ jsx28(
+        /* @__PURE__ */ jsx29("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx29(Icon, { name: "upload" }) }),
+        /* @__PURE__ */ jsx29("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
+        /* @__PURE__ */ jsx29("div", { children: "or choose one from your device" }),
+        /* @__PURE__ */ jsxs24("span", { className: "ui-file__choose", children: [
+          /* @__PURE__ */ jsx29("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__ */ jsx29(
             "input",
             {
               ...props,
@@ -2372,14 +2842,165 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
   ) });
 }
 
+// src/FileDrop.tsx
+import { useRef as useRef17, useState as useState11 } from "react";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+var MARKS = {
+  uploading: "clock",
+  done: "circleCheck",
+  error: "circleAlert"
+};
+var WORDS = {
+  uploading: "Uploading",
+  done: "Uploaded",
+  error: "Upload failed"
+};
+var splitName = (name) => {
+  const cut = name.lastIndexOf(".");
+  return cut > 0 ? [name.slice(0, cut), name.slice(cut)] : [name, ""];
+};
+var carriesFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
+var cx7 = (...a) => a.filter(Boolean).join(" ");
+function FileDrop({
+  label = "Upload",
+  note,
+  accept,
+  dropLabel = "Drop to upload",
+  removeLabel = "Remove file",
+  retryLabel = "Retry",
+  file,
+  dragging,
+  disabled,
+  onFile,
+  onRemove,
+  onRetry,
+  children,
+  className
+}) {
+  const input = useRef17(null);
+  const [over, setOver] = useState11(false);
+  const status = file?.status ?? "uploading";
+  const word = status === "error" ? file?.error ?? WORDS.error : file?.state ?? WORDS[status];
+  const [stem, ext] = splitName(file?.name ?? "");
+  const hasBar = status === "uploading" && file?.progress !== void 0;
+  const showWord = !hasBar;
+  const showSize = Boolean(file?.size) && status !== "error";
+  const showTarget = (dragging ?? over) && !disabled;
+  const take = (chosen) => {
+    if (chosen && !disabled) onFile?.(chosen);
+  };
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      className: cx7("ui-drop", disabled && "is-disabled", className),
+      onDragOver: (event) => {
+        if (disabled || !carriesFiles(event)) return;
+        event.preventDefault();
+        setOver(true);
+      },
+      onDragLeave: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOver(false);
+      },
+      onDrop: (event) => {
+        if (disabled || !carriesFiles(event)) return;
+        event.preventDefault();
+        setOver(false);
+        take(event.dataTransfer.files[0]);
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsxs25("div", { className: "ui-drop__row", children: [
+          file ? /* @__PURE__ */ jsxs25("div", { className: cx7("ui-drop__file", status === "error" && "ui-drop__file--failed"), children: [
+            /* @__PURE__ */ jsxs25("div", { className: "ui-drop__line", children: [
+              /* @__PURE__ */ jsxs25("span", { className: "ui-drop__name", title: file.name, children: [
+                /* @__PURE__ */ jsx30("span", { className: "ui-drop__stem", children: stem }),
+                /* @__PURE__ */ jsx30("span", { className: "ui-drop__ext", children: ext })
+              ] }),
+              (onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs25("span", { className: "ui-drop__actions", children: [
+                status === "error" && onRetry && /* @__PURE__ */ jsx30(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
+                onRemove && /* @__PURE__ */ jsx30(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    icon: "x",
+                    iconOnly: true,
+                    "aria-label": removeLabel,
+                    onClick: onRemove,
+                    disabled
+                  }
+                )
+              ] })
+            ] }),
+            (showSize || showWord) && /* @__PURE__ */ jsxs25(
+              "div",
+              {
+                className: cx7("ui-drop__facts", status === "error" && "ui-drop__error"),
+                role: status === "error" ? "alert" : void 0,
+                children: [
+                  showSize && /* @__PURE__ */ jsx30("span", { className: "ui-drop__size", children: file.size }),
+                  showWord && /* @__PURE__ */ jsxs25("span", { className: "ui-drop__state", children: [
+                    /* @__PURE__ */ jsx30(Icon, { name: MARKS[status] }),
+                    /* @__PURE__ */ jsx30("span", { className: "ui-drop__word", title: word, children: word })
+                  ] })
+                ]
+              }
+            ),
+            hasBar && /* @__PURE__ */ jsx30(
+              "span",
+              {
+                className: "ui-drop__bar",
+                role: "progressbar",
+                "aria-label": `${word} ${file.name}`,
+                "aria-valuenow": file.progress,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                children: /* @__PURE__ */ jsx30("span", { style: { width: `${file.progress}%` } })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs25(Fragment8, { children: [
+            /* @__PURE__ */ jsx30(
+              Button,
+              {
+                size: "sm",
+                icon: "upload",
+                disabled,
+                onClick: () => input.current?.click(),
+                children: label
+              }
+            ),
+            note && /* @__PURE__ */ jsx30("p", { className: "ui-drop__note", children: note })
+          ] }),
+          /* @__PURE__ */ jsx30(
+            "input",
+            {
+              ref: input,
+              type: "file",
+              accept,
+              disabled,
+              hidden: true,
+              tabIndex: -1,
+              onChange: (event) => {
+                take(event.currentTarget.files?.[0]);
+                event.currentTarget.value = "";
+              }
+            }
+          )
+        ] }),
+        showTarget && /* @__PURE__ */ jsx30("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
+      ]
+    }
+  );
+}
+
 // src/SearchField.tsx
 import { forwardRef as forwardRef7 } from "react";
 import { icon as icon5 } from "@apliteni/apliteni-ui";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs24("div", { className: "ui-input-group", children: [
-    /* @__PURE__ */ jsx29("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon5("search") } }),
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs26("div", { className: "ui-input-group", children: [
+    /* @__PURE__ */ jsx31("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon5("search") } }),
+    /* @__PURE__ */ jsx31(
       "input",
       {
         ref,
@@ -2393,9 +3014,9 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 });
 
 // src/Toast.tsx
-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 { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var Context = createContext2(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -2404,21 +3025,21 @@ function useToast() {
   return push;
 }
 function Notice({ notice, remove }) {
-  const root = useRef16(null);
-  const [leaving2, setLeaving] = useState10(false);
-  const dismissed = useRef16(false);
-  const remaining = useRef16(5e3);
-  const [hovered, setHovered] = useState10(false);
-  const [focused, setFocused] = useState10(false);
+  const root = useRef18(null);
+  const [leaving2, setLeaving] = useState12(false);
+  const dismissed = useRef18(false);
+  const remaining = useRef18(5e3);
+  const [hovered, setHovered] = useState12(false);
+  const [focused, setFocused] = useState12(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
-  const dismiss = useCallback3(() => {
+  const dismiss = useCallback4(() => {
     if (dismissed.current) return;
     dismissed.current = true;
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
     else setLeaving(true);
   }, [remove]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (leaving2) {
       const element = root.current;
       const finish = (event) => {
@@ -2432,7 +3053,7 @@ function Notice({ notice, remove }) {
       };
     }
   }, [leaving2, remove]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (leaving2 || notice.action || paused) return;
     const started = Date.now();
     const timer = setTimeout(dismiss, remaining.current);
@@ -2441,7 +3062,7 @@ function Notice({ notice, remove }) {
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
   }, [dismiss, leaving2, notice.action, paused]);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: root,
@@ -2455,12 +3076,12 @@ function Notice({ notice, remove }) {
         if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
       },
       children: [
-        /* @__PURE__ */ jsx30("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx30(Icon, { name: glyphs[tone] }) }),
-        /* @__PURE__ */ jsxs25("div", { className: "ui-toast__body", children: [
-          /* @__PURE__ */ jsx30("div", { className: "ui-toast__title", children: notice.title }),
-          notice.text && /* @__PURE__ */ jsx30("div", { className: "ui-toast__text", children: notice.text })
+        /* @__PURE__ */ jsx32("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx32(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs27("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx32("div", { className: "ui-toast__title", children: notice.title }),
+          notice.text && /* @__PURE__ */ jsx32("div", { className: "ui-toast__text", children: notice.text })
         ] }),
-        notice.action && /* @__PURE__ */ jsx30(
+        notice.action && /* @__PURE__ */ jsx32(
           "button",
           {
             type: "button",
@@ -2475,8 +3096,8 @@ function Notice({ notice, remove }) {
             children: notice.action.label
           }
         ),
-        /* @__PURE__ */ jsx30("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx30(Icon, { name: "x" }) }),
-        !notice.action && /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx32(Icon, { name: "x" }) }),
+        !notice.action && /* @__PURE__ */ jsx32(
           "span",
           {
             className: "ui-toast__timer is-running",
@@ -2509,41 +3130,41 @@ function usePublishedReach(stack2, count) {
   }, [stack2, count]);
 }
 function Toast({ children }) {
-  const [entries, setEntries] = useState10([]);
-  const nextId = useRef16(0);
-  const stack2 = useRef16(null);
-  const push = useCallback3((notice) => {
+  const [entries, setEntries] = useState12([]);
+  const nextId = useRef18(0);
+  const stack2 = useRef18(null);
+  const push = useCallback4((notice) => {
     const id = nextId.current++;
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
   usePublishedReach(stack2, entries.length);
-  return /* @__PURE__ */ jsxs25(Context.Provider, { value: push, children: [
+  return /* @__PURE__ */ jsxs27(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx30("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx30(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx32("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx32(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect13, useId as useId12, useState as useState12 } from "react";
+import { useEffect as useEffect14, useId as useId12, useState as useState14 } from "react";
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect12, useId as useId11, useState as useState11 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId11, useState as useState13 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId11();
   const group = !sub && !!item.items?.length;
   const childActive = group && item.items.some((child) => child.id === active);
-  const [expanded, setExpanded] = useState11();
+  const [expanded, setExpanded] = useState13();
   const open = expanded ?? item.defaultOpen ?? childActive;
-  const [entering, setEntering] = useState11(false);
-  useEffect12(() => {
+  const [entering, setEntering] = useState13(false);
+  useEffect13(() => {
     if (!entering) return;
     const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
     return () => clearTimeout(timer);
@@ -2560,15 +3181,15 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs26(Fragment8, { children: [
-    (item.leading ?? item.icon) && /* @__PURE__ */ jsx31("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx31(Icon, { name: item.icon }) }),
-    /* @__PURE__ */ jsx31("span", { className: "ui-nav__label", children: item.label }),
-    count != null && count !== "" && /* @__PURE__ */ jsx31("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
-    group && /* @__PURE__ */ jsx31("span", { className: "ui-nav__caret", "aria-hidden": "true" })
+  const children = /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    (item.leading ?? item.icon) && /* @__PURE__ */ jsx33("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx33(Icon, { name: item.icon }) }),
+    /* @__PURE__ */ jsx33("span", { className: "ui-nav__label", children: item.label }),
+    count != null && count !== "" && /* @__PURE__ */ jsx33("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
+    group && /* @__PURE__ */ jsx33("span", { className: "ui-nav__caret", "aria-hidden": "true" })
   ] });
   const common = { className, "aria-label": name, title: collapsed ? name : void 0, children };
-  if (group) return /* @__PURE__ */ jsxs26("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
-    /* @__PURE__ */ jsx31(
+  if (group) return /* @__PURE__ */ jsxs28("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
+    /* @__PURE__ */ jsx33(
       "button",
       {
         ...common,
@@ -2582,22 +3203,22 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx31("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx31(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
+    /* @__PURE__ */ jsx33("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx33(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
   ] });
-  if (item.disabled) return /* @__PURE__ */ jsx31("li", { children: /* @__PURE__ */ jsx31("span", { ...common, role: "link", "aria-disabled": "true" }) });
+  if (item.disabled) return /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsx33("span", { ...common, role: "link", "aria-disabled": "true" }) });
   const props = {
     ...common,
     href: item.href ?? `#${item.id}`,
     target: item.target,
     "aria-current": isActive ? activeIs === "section" ? "true" : "page" : void 0
   };
-  return /* @__PURE__ */ jsx31("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx31("a", { ...props }) });
+  return /* @__PURE__ */ jsx33("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx33("a", { ...props }) });
 }
 function Section({ section, ...props }) {
   const uid = useId11();
-  return /* @__PURE__ */ jsxs26("div", { className: "ui-nav__section", children: [
-    section.label && /* @__PURE__ */ jsx31("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
-    /* @__PURE__ */ jsx31("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx31(Row, { item, ...props }, item.id)) })
+  return /* @__PURE__ */ jsxs28("div", { className: "ui-nav__section", children: [
+    section.label && /* @__PURE__ */ jsx33("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
+    /* @__PURE__ */ jsx33("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx33(Row, { item, ...props }, item.id)) })
   ] });
 }
 var SidebarNav = forwardRef8(function SidebarNav2({
@@ -2612,8 +3233,8 @@ var SidebarNav = forwardRef8(function SidebarNav2({
   "aria-label": label = "Sidebar",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsxs26("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
-    (sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs28("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
+    (sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx33(
       Section,
       {
         section,
@@ -2624,12 +3245,12 @@ var SidebarNav = forwardRef8(function SidebarNav2({
       },
       index
     )),
-    footer && /* @__PURE__ */ jsx31("div", { className: "ui-nav__foot", children: footer })
+    footer && /* @__PURE__ */ jsx33("div", { className: "ui-nav__foot", children: footer })
   ] });
 });
 
 // src/AppShell.tsx
-import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -2651,20 +3272,20 @@ function AppShell({
   renderLink
 }) {
   const uid = useId12();
-  const [collapsed, setCollapsed] = useState12(defaultCollapsed);
-  const [search, setSearch] = useState12(false);
-  const [more, setMore] = useState12(false);
-  const [theme, setTheme] = useState12("dark");
+  const [collapsed, setCollapsed] = useState14(defaultCollapsed);
+  const [search, setSearch] = useState14(false);
+  const [more, setMore] = useState14(false);
+  const [theme, setTheme] = useState14("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];
-  useEffect13(() => {
+  useEffect14(() => {
     setCollapsed(railCollapsed() ?? defaultCollapsed);
   }, [defaultCollapsed]);
-  useEffect13(() => {
+  useEffect14(() => {
     setMore(false);
     setSearch(false);
   }, [pathname]);
-  useEffect13(() => {
+  useEffect14(() => {
     const root = document.documentElement;
     const sync2 = () => setTheme(root.getAttribute("data-theme") === "light" ? "light" : "dark");
     sync2();
@@ -2672,7 +3293,7 @@ function AppShell({
     observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
     return () => observer.disconnect();
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
       const target = event.target;
@@ -2702,15 +3323,15 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs27(Fragment9, { children: [
-        /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx32(Icon, { name: section.icon }) }),
-        /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: section.label }),
-        section.count != null && /* @__PURE__ */ jsx32("span", { className: "ui-nav__badge is-neutral", children: section.count })
+      children: /* @__PURE__ */ jsxs29(Fragment10, { children: [
+        /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx34(Icon, { name: section.icon }) }),
+        /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: section.label }),
+        section.count != null && /* @__PURE__ */ jsx34("span", { className: "ui-nav__badge is-neutral", children: section.count })
       ] })
     };
-    return /* @__PURE__ */ jsx32("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx32("a", { ...linkProps }) }, section.href);
+    return /* @__PURE__ */ jsx34("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx34("a", { ...linkProps }) }, section.href);
   });
-  const sidebar = (items, label) => /* @__PURE__ */ jsx32(
+  const sidebar = (items, label) => /* @__PURE__ */ jsx34(
     SidebarNav,
     {
       "aria-label": label,
@@ -2722,7 +3343,7 @@ function AppShell({
         const linkProps = { ...props, onClick: (event) => {
           if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
         } };
-        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx32("a", { ...linkProps });
+        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx34("a", { ...linkProps });
       }
     }
   );
@@ -2730,33 +3351,33 @@ 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__ */ jsxs27("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    /* @__PURE__ */ jsxs27("div", { className: "ui-app__rail", children: [
-      /* @__PURE__ */ jsx32("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs27("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-        brand ?? /* @__PURE__ */ jsx32("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-        /* @__PURE__ */ jsx32("span", { children: word })
+  return /* @__PURE__ */ jsxs29("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx34("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs29("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+        brand ?? /* @__PURE__ */ jsx34("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+        /* @__PURE__ */ jsx34("span", { children: word })
       ] }) }),
       sidebar(sections, "Sections"),
-      /* @__PURE__ */ jsx32("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx32("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs27("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs27("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx32("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-          /* @__PURE__ */ jsx32("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
-          /* @__PURE__ */ jsx32("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
+      /* @__PURE__ */ jsx34("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx34("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs29("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx34("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx34("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
+          /* @__PURE__ */ jsx34("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
         ] }) }),
-        /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs27("header", { className: "ui-app__bar", children: [
-        /* @__PURE__ */ jsxs27("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
-          /* @__PURE__ */ jsx32("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx32(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx32("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
-          /* @__PURE__ */ jsx32("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
+    /* @__PURE__ */ jsxs29("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs29("header", { className: "ui-app__bar", children: [
+        /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx34(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
+          /* @__PURE__ */ jsx34("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx32("span", { className: "ui-app__bar-gap" }),
+        /* @__PURE__ */ jsx34("span", { className: "ui-app__bar-gap" }),
         bandControl,
-        /* @__PURE__ */ jsx32("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx32("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
-        /* @__PURE__ */ jsx32("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx34("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
+        /* @__PURE__ */ jsx34("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx34(
           Dropdown,
           {
             variant: "menu",
@@ -2765,27 +3386,27 @@ function AppShell({
             ariaLabel: `Signed in as ${account.name}, ${account.email}`,
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
-            triggerContent: /* @__PURE__ */ jsx32("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
-            header: /* @__PURE__ */ jsxs27("div", { className: "ui-dropdown__head", children: [
-              /* @__PURE__ */ jsx32("b", { children: account.name }),
-              /* @__PURE__ */ jsx32("span", { children: account.email })
+            triggerContent: /* @__PURE__ */ jsx34("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
+            header: /* @__PURE__ */ jsxs29("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx34("b", { children: account.name }),
+              /* @__PURE__ */ jsx34("span", { children: account.email })
             ] }),
             items: [{ label: "Sign out", icon: "logout", danger: true }],
             onSelect: onSignOut
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs27("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
-        back && /* @__PURE__ */ jsx32(BackLink, { ...back }),
-        /* @__PURE__ */ jsx32("h1", { children: title }),
-        lede && /* @__PURE__ */ jsx32("p", { className: "ui-app__sub", children: lede }),
-        actions && /* @__PURE__ */ jsx32("div", { className: "ui-react-app__actions", children: actions }),
-        /* @__PURE__ */ jsx32("div", { className: "ui-app__body", children })
+      /* @__PURE__ */ jsxs29("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx34(BackLink, { ...back }),
+        /* @__PURE__ */ jsx34("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx34("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx34("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx34("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    /* @__PURE__ */ jsx32("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs27("ul", { className: "ui-nav__list", children: [
+    /* @__PURE__ */ jsx34("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs29("ul", { className: "ui-nav__list", children: [
       links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsxs27(
+      remaining.length > 0 && /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsxs29(
         "button",
         {
           type: "button",
@@ -2794,20 +3415,20 @@ function AppShell({
           "aria-expanded": more,
           onClick: () => setMore(true),
           children: [
-            /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx32(Icon, { name: "moreHorizontal" }) }),
-            /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: "More" })
+            /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx34(Icon, { name: "moreHorizontal" }) }),
+            /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: "More" })
           ]
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx32(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
-    /* @__PURE__ */ jsx32(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
+    /* @__PURE__ */ jsx34(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
+    /* @__PURE__ */ jsx34(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
   ] });
 }
 
 // src/EmptyState.tsx
 import { icon as kitIcon2, illo } from "@apliteni/apliteni-ui";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs30 } 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" },
@@ -2819,18 +3440,18 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon7, art, actio
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
   const glyph = icon7 ?? preset.icon;
-  return /* @__PURE__ */ jsxs28("div", { className: "ui-empty", children: [
-    art ? typeof art === "string" ? /* @__PURE__ */ jsx33("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx33("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx33("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
-    heading && /* @__PURE__ */ jsx33("div", { className: "ui-empty__title", children: heading }),
-    guidance && /* @__PURE__ */ jsx33("div", { className: "ui-empty__sub", children: guidance }),
-    actions && /* @__PURE__ */ jsx33("div", { className: "ui-empty__actions", children: actions })
+  return /* @__PURE__ */ jsxs30("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx35("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx35("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx35("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx35("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx35("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx35("div", { className: "ui-empty__actions", children: actions })
   ] });
 }
 
 // src/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
 import { icon as icon6 } from "@apliteni/apliteni-ui";
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs31 } 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')})()`;
@@ -2888,10 +3509,10 @@ function ThemeToggle({ labelled = false }) {
     }
     window.dispatchEvent(new Event(CHOICE_EVENT));
   };
-  const button = /* @__PURE__ */ jsx34("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx34("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon6(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
-  return labelled ? /* @__PURE__ */ jsxs29("span", { className: "ui-theme-toggle", children: [
+  const button = /* @__PURE__ */ jsx36("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx36("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon6(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
+  return labelled ? /* @__PURE__ */ jsxs31("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs29("span", { children: [
+    /* @__PURE__ */ jsxs31("span", { children: [
       label,
       " theme"
     ] })
@@ -2899,11 +3520,11 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/Success.tsx
-import { forwardRef as forwardRef9, useEffect as useEffect14, useRef as useRef17, useState as useState13 } from "react";
-import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef19, useState as useState15 } from "react";
+import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "svg",
     {
       ...rest,
@@ -2915,18 +3536,18 @@ var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", classN
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        circled && /* @__PURE__ */ jsx35("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-        /* @__PURE__ */ jsx35("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
+        circled && /* @__PURE__ */ jsx37("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx37("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
       ]
     }
   );
 });
 var SuccessPanel = forwardRef9(function SuccessPanel2({ title = "Done", sub, check = "line", className, ...rest }, ref) {
   const circled = check === "circled";
-  return /* @__PURE__ */ jsxs30("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx35("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx35(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
-    /* @__PURE__ */ jsx35("div", { className: "ui-success__title", children: title }),
-    sub && /* @__PURE__ */ jsx35("div", { className: "ui-success__sub", children: sub })
+  return /* @__PURE__ */ jsxs32("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx37("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx37(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
+    /* @__PURE__ */ jsx37("div", { className: "ui-success__title", children: title }),
+    sub && /* @__PURE__ */ jsx37("div", { className: "ui-success__sub", children: sub })
   ] });
 });
 var pieces = [
@@ -2946,12 +3567,12 @@ var pieces = [
   [80, 0.36, -20, "c", 1.05]
 ];
 function Countdown({ seconds, label = "Redirecting", onDone }) {
-  const [remaining, setRemaining] = useState13(seconds);
-  const callback = useRef17(onDone);
-  useEffect14(() => {
+  const [remaining, setRemaining] = useState15(seconds);
+  const callback = useRef19(onDone);
+  useEffect15(() => {
     callback.current = onDone;
   }, [onDone]);
-  useEffect14(() => {
+  useEffect15(() => {
     let count = seconds;
     const timer = setInterval(() => {
       count -= 1;
@@ -2963,12 +3584,12 @@ function Countdown({ seconds, label = "Redirecting", onDone }) {
     }, 1e3);
     return () => clearInterval(timer);
   }, [seconds]);
-  return /* @__PURE__ */ jsxs30("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
-    /* @__PURE__ */ jsx35("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs30("span", { className: "ui-sx__count-text", children: [
+  return /* @__PURE__ */ jsxs32("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
+    /* @__PURE__ */ jsx37("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs32("span", { className: "ui-sx__count-text", children: [
       label,
       " in ",
-      /* @__PURE__ */ jsx35("b", { "data-sx-num": "", children: remaining }),
+      /* @__PURE__ */ jsx37("b", { "data-sx-num": "", children: remaining }),
       "s"
     ] })
   ] });
@@ -2995,7 +3616,7 @@ var Success = forwardRef9(function Success2({
   const seconds = countdown?.seconds;
   const duration = seconds != null && Number.isFinite(seconds) && seconds >= 1 ? Math.floor(seconds) : 5;
   const mark = check === "circled" ? "circled" : "line";
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       role: "status",
@@ -3004,16 +3625,16 @@ var Success = forwardRef9(function Success2({
       ref,
       className: ["ui-sx", `ui-sx--${layout}`, `ui-sx--check-${mark}`, confetti && "ui-sx--confetti", className].filter(Boolean).join(" "),
       children: [
-        confetti && /* @__PURE__ */ jsx35("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
-          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx35("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
+        confetti && /* @__PURE__ */ jsx37("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
+          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx37("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
         ) }),
-        /* @__PURE__ */ jsxs30("div", { className: "ui-sx__inner", children: [
-          /* @__PURE__ */ jsx35("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx35(SuccessCheck, { variant: mark }) }),
-          /* @__PURE__ */ jsxs30("div", { className: "ui-sx__content", children: [
-            /* @__PURE__ */ jsx35(Heading, { className: "ui-sx__title", children: title }),
-            body && /* @__PURE__ */ jsx35("p", { className: "ui-sx__body", children: body }),
-            hasActions && /* @__PURE__ */ jsx35("div", { className: "ui-sx__actions", children: actions }),
-            countdown && /* @__PURE__ */ jsx35(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
+        /* @__PURE__ */ jsxs32("div", { className: "ui-sx__inner", children: [
+          /* @__PURE__ */ jsx37("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx37(SuccessCheck, { variant: mark }) }),
+          /* @__PURE__ */ jsxs32("div", { className: "ui-sx__content", children: [
+            /* @__PURE__ */ jsx37(Heading, { className: "ui-sx__title", children: title }),
+            body && /* @__PURE__ */ jsx37("p", { className: "ui-sx__body", children: body }),
+            hasActions && /* @__PURE__ */ jsx37("div", { className: "ui-sx__actions", children: actions }),
+            countdown && /* @__PURE__ */ jsx37(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
           ] })
         ] })
       ]
@@ -3037,6 +3658,7 @@ export {
   Confirm,
   DEFAULT_PAGE_SIZE3 as DEFAULT_PAGE_SIZE,
   DataTable,
+  DatePicker,
   DeltaValue,
   Denied,
   Drawer,
@@ -3044,6 +3666,7 @@ export {
   Dropdown,
   EmptyState,
   Field,
+  FileDrop,
   FileField,
   FilterBar,
   Icon,