@apliteni/apliteni-ui 0.77.0 → 0.78.0

package/guidelines/file-drop.md

@@ -0,0 +1,87 @@
+# File drop
+
+## Spend one row at rest
+
+<!-- rule: one-row -->
+
+**Rule:** At rest, a file drop is one row: the button that opens the picker and the accepted types beside it.
+
+**Why:** A tall box holds the page's best space open for a file that arrives once a month.
+
+**Do:** Put an Upload button and “PDF or CSV, up to 10 MB” on one line above the list they feed.
+
+**Don't:** Draw a tall dashed box with a glyph, an invitation and a button stacked inside it.
+
+**Except:** A page whose whole purpose is receiving one file may use the field-sized picker, which carries a label of its own.
+
+## Paint the target only while a file is over it
+
+<!-- rule: on-drag -->
+
+**Rule:** Show the drop target while a file is over the region that accepts it, and nowhere else.
+
+**Why:** A target drawn before there is a file to catch covers content the reader still needs.
+
+**Do:** Cover the panel that accepts the file the moment the file crosses it.
+
+**Don't:** Cover the whole window when one panel accepts the file.
+
+## Keep the file in the row it arrived in
+
+<!-- rule: in-the-row -->
+
+**Rule:** After the drop, the file's name, size and progress take the place the button was in, with remove on the name's line.
+
+**Why:** A row that changes in place keeps the page still while the file uploads.
+
+**Do:** Give the name a line with remove at its end, put the size under it, and run the progress track the full width below both.
+
+**Don't:** Push the list down with a progress card, or open a dialog over the page.
+
+## Fail in place
+
+<!-- rule: failure -->
+
+**Rule:** A refused file keeps its place, says what it did wrong under its name, and offers Retry beside Remove.
+
+**Why:** A row that drops the file sends the reader back to choosing one. The reason is the one string here that has to be read in full, so it gets a line rather than a share of one.
+
+**Do:** Keep the name on its line and say “Larger than 10 MB” under it, with Retry.
+
+**Don't:** Replace the row with “Upload failed”, losing both the file and the retry.
+
+## Offer a button, not only a drag
+
+<!-- rule: button-path -->
+
+**Rule:** Give the reader a button that opens the picker, and let dragging be the shortcut.
+
+**Why:** A keyboard cannot drag a file.
+
+**Do:** Make the Upload button the control, reachable by keyboard and showing the focus ring.
+
+**Don't:** Write “Drag a file here” with nothing to press.
+
+## State the limits once
+
+<!-- rule: limits-once -->
+
+**Rule:** Name the accepted types and the size limit once, beside the button, in the product's own words.
+
+**Why:** Repeated limits teach the reader to skip them.
+
+**Do:** Write “PDF or CSV, up to 10 MB” beside the button, and let a failure say what this file did wrong.
+
+**Don't:** Repeat the limits under the button, in a tooltip and again in the error.
+
+## Choose the row, the region or the dialog
+
+<!-- rule: which-shape -->
+
+**Rule:** Use a row where the file joins a list on the page, a region when one panel owns the file, and a dialog only when the upload needs answers of its own.
+
+**Why:** A dialog that asks nothing is one more thing to dismiss. The rule picks between three containers, so a drawing would show one of them and not the choice.
+
+**Do:** Take a statement into the row under the statements it joins, and a replacement logo into the panel that shows it.
+
+**Don't:** Open a dialog for one file that the row behind it could have taken.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.77.0",
+  "version": "0.78.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -493,6 +493,34 @@ places a decorative kit glyph with `icon` — the same glyph names `Button` and
 `onFileChange`. Use `accept` and `hint` to describe allowed file types and size.
 Your application must validate files before upload.
 
+## File drop
+
+`FileDrop` is the compact drop: one row with the button that opens the picker and
+the accepted types beside it, and a drop target painted only while a file is over
+the region. Use it where a file joins a list on the page; use `FileField` where a
+labelled, field-sized picker belongs. The guideline page states when to use a row,
+a region or a dialog.
+
+```tsx
+<FileDrop note="PDF or CSV, up to 10 MB" accept=".pdf,.csv"
+  file={upload} onFile={send} onRemove={clear} onRetry={send} />
+```
+
+Your application owns the upload and supplies the `file` it is holding: the
+name, the `size` already written for a reader, `progress` while it uploads, and
+the `error` when it failed. A file with no `status` is uploading, so a file
+handed over before the request starts never reads as uploaded. A status the row
+draws shows a mark and a word; where you give `progress` the track says it
+instead, and the word goes to the track's accessible name. The file reads as a
+stack: the name on top with the actions at its end, the size — or the failure
+message — under it, and the track the full width below. No tier takes a second
+line. The name truncates its stem and keeps its extension, with the whole name in
+a `title`, and nothing is hidden or moved at any width. `Remove` is the icon-only
+`x`, named by `removeLabel`; `Retry` keeps its word. Both appear only when you
+handle them. Children render above the row, inside the region the target covers;
+pass `dragging` to drive that target from a parent. `accept` filters the system
+picker only — validate type and size yourself.
+
 Use `Field` when an existing labelled control needs the kit frame. Spread its
 render-prop attributes onto one labelable control, and apply the existing control
 class and invalid styling as appropriate:

package/react/dist/index.css

@@ -82,6 +82,14 @@
   .ui-table__act .ui-btn + .ui-btn {
     margin-inline-start: var(--tap-gap) !important;
   }
+  .ui-drop__row {
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-drop__actions {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
   .ui-table__act {
     --tap-clear-x: var(--tap-gap);
     --tap-clear-y: 0px;
@@ -498,6 +506,129 @@
   cursor: not-allowed;
 }
 
+/* ../src/styles/file-drop.css */
+.ui-drop {
+  position: relative;
+}
+.ui-drop > * + .ui-drop__row {
+  margin-top: var(--space-3);
+}
+.ui-drop__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-height: var(--space-8);
+  gap: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.ui-drop__note {
+  margin: 0;
+}
+.ui-drop__file {
+  display: grid;
+  flex: 1 1 auto;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.ui-drop__line {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.ui-drop__name {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: var(--space-10);
+  color: var(--strong);
+  font-weight: var(--weight-medium);
+}
+.ui-drop__stem {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-drop__ext {
+  flex: none;
+}
+.ui-drop__facts {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.ui-drop__size {
+  flex: none;
+  white-space: nowrap;
+}
+.ui-drop__word {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.ui-drop__state {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.ui-drop__state svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  stroke-width: 2.4;
+}
+.ui-drop__error {
+  color: var(--pink);
+}
+.ui-drop__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+}
+.ui-drop__bar {
+  display: block;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-2);
+  overflow: hidden;
+}
+.ui-drop__bar span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+}
+.ui-drop__target {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3);
+  border: 1px dashed var(--accent);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  color: var(--strong);
+  font-size: var(--text-sm);
+  text-align: center;
+}
+.ui-drop.is-disabled .ui-drop__row {
+  color: var(--disabled-ink);
+}
+.ui-drop.is-disabled .ui-drop__name {
+  color: var(--disabled-ink);
+}
+
 /* src/Toast.css */
 .rx-toast-stack {
   position: fixed;

package/react/dist/index.d.ts

@@ -607,6 +607,47 @@ type FileFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>,
 };
 declare function FileField({ label, hint, error, required, disabled, onFileChange, className, ...props }: FileFieldProps): react.JSX.Element;
 
+type FileDropStatus = 'uploading' | 'done' | 'error';
+/** The file the consumer is uploading. */
+type FileDropFile = {
+    name: string;
+    /** Already written for a reader; the kit picks no unit. */
+    size?: string;
+    /** Left out, the file is uploading: the kit never reports a success nobody claimed. */
+    status?: FileDropStatus;
+    /** 0 to 100. Left out, the word stands without a bar. */
+    progress?: number;
+    /** What this file did wrong, when the status is an error. */
+    error?: string;
+    /** Replaces the word the status carries. */
+    state?: string;
+};
+type FileDropProps = {
+    /** The button that opens the picker. */
+    label?: string;
+    /** The accepted types and the size limit, stated once beside the button. */
+    note?: string;
+    /** Filters the system picker only; the consumer still validates the file. */
+    accept?: string;
+    /** The words on the drop target. */
+    dropLabel?: string;
+    /** Names the icon-only remove button; it carries no visible word. */
+    removeLabel?: string;
+    retryLabel?: string;
+    /** The file the consumer is holding. Left out, the row is at rest. */
+    file?: FileDropFile | null;
+    /** Drives the target from a parent that owns the drag region. */
+    dragging?: boolean;
+    disabled?: boolean;
+    onFile?: (file: File) => void;
+    onRemove?: () => void;
+    onRetry?: () => void;
+    /** What the region accepts the file for; the target covers it while dragging. */
+    children?: ReactNode;
+    className?: string;
+};
+declare function FileDrop({ label, note, accept, dropLabel, removeLabel, retryLabel, file, dragging, disabled, onFile, onRemove, onRetry, children, className, }: FileDropProps): react.JSX.Element;
+
 type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-label'> & {
     /** The control's name. A toolbar search box shows no label, so this is the
         only name it has. */
@@ -827,4 +868,4 @@ declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.Detail
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -2372,14 +2372,165 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
   ) });
 }
 
+// src/FileDrop.tsx
+import { useRef as useRef16, useState as useState10 } from "react";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs24 } 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 cx6 = (...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 = useRef16(null);
+  const [over, setOver] = useState10(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__ */ jsxs24(
+    "div",
+    {
+      className: cx6("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__ */ jsxs24("div", { className: "ui-drop__row", children: [
+          file ? /* @__PURE__ */ jsxs24("div", { className: cx6("ui-drop__file", status === "error" && "ui-drop__file--failed"), children: [
+            /* @__PURE__ */ jsxs24("div", { className: "ui-drop__line", children: [
+              /* @__PURE__ */ jsxs24("span", { className: "ui-drop__name", title: file.name, children: [
+                /* @__PURE__ */ jsx29("span", { className: "ui-drop__stem", children: stem }),
+                /* @__PURE__ */ jsx29("span", { className: "ui-drop__ext", children: ext })
+              ] }),
+              (onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs24("span", { className: "ui-drop__actions", children: [
+                status === "error" && onRetry && /* @__PURE__ */ jsx29(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
+                onRemove && /* @__PURE__ */ jsx29(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    icon: "x",
+                    iconOnly: true,
+                    "aria-label": removeLabel,
+                    onClick: onRemove,
+                    disabled
+                  }
+                )
+              ] })
+            ] }),
+            (showSize || showWord) && /* @__PURE__ */ jsxs24(
+              "div",
+              {
+                className: cx6("ui-drop__facts", status === "error" && "ui-drop__error"),
+                role: status === "error" ? "alert" : void 0,
+                children: [
+                  showSize && /* @__PURE__ */ jsx29("span", { className: "ui-drop__size", children: file.size }),
+                  showWord && /* @__PURE__ */ jsxs24("span", { className: "ui-drop__state", children: [
+                    /* @__PURE__ */ jsx29(Icon, { name: MARKS[status] }),
+                    /* @__PURE__ */ jsx29("span", { className: "ui-drop__word", title: word, children: word })
+                  ] })
+                ]
+              }
+            ),
+            hasBar && /* @__PURE__ */ jsx29(
+              "span",
+              {
+                className: "ui-drop__bar",
+                role: "progressbar",
+                "aria-label": `${word} ${file.name}`,
+                "aria-valuenow": file.progress,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                children: /* @__PURE__ */ jsx29("span", { style: { width: `${file.progress}%` } })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs24(Fragment8, { children: [
+            /* @__PURE__ */ jsx29(
+              Button,
+              {
+                size: "sm",
+                icon: "upload",
+                disabled,
+                onClick: () => input.current?.click(),
+                children: label
+              }
+            ),
+            note && /* @__PURE__ */ jsx29("p", { className: "ui-drop__note", children: note })
+          ] }),
+          /* @__PURE__ */ jsx29(
+            "input",
+            {
+              ref: input,
+              type: "file",
+              accept,
+              disabled,
+              hidden: true,
+              tabIndex: -1,
+              onChange: (event) => {
+                take(event.currentTarget.files?.[0]);
+                event.currentTarget.value = "";
+              }
+            }
+          )
+        ] }),
+        showTarget && /* @__PURE__ */ jsx29("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 jsx30, jsxs as jsxs25 } 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__ */ jsxs25("div", { className: "ui-input-group", children: [
+    /* @__PURE__ */ jsx30("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon5("search") } }),
+    /* @__PURE__ */ jsx30(
       "input",
       {
         ref,
@@ -2393,9 +2544,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 useCallback3, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect4, useRef as useRef17, useState as useState11 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var Context = createContext2(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -2404,12 +2555,12 @@ 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 = useRef17(null);
+  const [leaving2, setLeaving] = useState11(false);
+  const dismissed = useRef17(false);
+  const remaining = useRef17(5e3);
+  const [hovered, setHovered] = useState11(false);
+  const [focused, setFocused] = useState11(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
   const dismiss = useCallback3(() => {
@@ -2441,7 +2592,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__ */ jsxs26(
     "div",
     {
       ref: root,
@@ -2455,12 +2606,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__ */ jsx31("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx31(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs26("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx31("div", { className: "ui-toast__title", children: notice.title }),
+          notice.text && /* @__PURE__ */ jsx31("div", { className: "ui-toast__text", children: notice.text })
         ] }),
-        notice.action && /* @__PURE__ */ jsx30(
+        notice.action && /* @__PURE__ */ jsx31(
           "button",
           {
             type: "button",
@@ -2475,8 +2626,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__ */ jsx31("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx31(Icon, { name: "x" }) }),
+        !notice.action && /* @__PURE__ */ jsx31(
           "span",
           {
             className: "ui-toast__timer is-running",
@@ -2509,40 +2660,40 @@ function usePublishedReach(stack2, count) {
   }, [stack2, count]);
 }
 function Toast({ children }) {
-  const [entries, setEntries] = useState10([]);
-  const nextId = useRef16(0);
-  const stack2 = useRef16(null);
+  const [entries, setEntries] = useState11([]);
+  const nextId = useRef17(0);
+  const stack2 = useRef17(null);
   const push = useCallback3((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__ */ jsxs26(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__ */ jsx31("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx31(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 useEffect13, useId as useId12, useState as useState13 } 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 useEffect12, useId as useId11, useState as useState12 } 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 jsx32, jsxs as jsxs27 } 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] = useState12();
   const open = expanded ?? item.defaultOpen ?? childActive;
-  const [entering, setEntering] = useState11(false);
+  const [entering, setEntering] = useState12(false);
   useEffect12(() => {
     if (!entering) return;
     const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
@@ -2560,15 +2711,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__ */ jsxs27(Fragment9, { children: [
+    (item.leading ?? item.icon) && /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx32(Icon, { name: item.icon }) }),
+    /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: item.label }),
+    count != null && count !== "" && /* @__PURE__ */ jsx32("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
+    group && /* @__PURE__ */ jsx32("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__ */ jsxs27("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
+    /* @__PURE__ */ jsx32(
       "button",
       {
         ...common,
@@ -2582,22 +2733,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__ */ jsx32("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx32(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__ */ jsx32("li", { children: /* @__PURE__ */ jsx32("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__ */ jsx32("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx32("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__ */ jsxs27("div", { className: "ui-nav__section", children: [
+    section.label && /* @__PURE__ */ jsx32("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
+    /* @__PURE__ */ jsx32("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx32(Row, { item, ...props }, item.id)) })
   ] });
 }
 var SidebarNav = forwardRef8(function SidebarNav2({
@@ -2612,8 +2763,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__ */ jsxs27("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__ */ jsx32(
       Section,
       {
         section,
@@ -2624,12 +2775,12 @@ var SidebarNav = forwardRef8(function SidebarNav2({
       },
       index
     )),
-    footer && /* @__PURE__ */ jsx31("div", { className: "ui-nav__foot", children: footer })
+    footer && /* @__PURE__ */ jsx32("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 jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -2651,10 +2802,10 @@ 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] = useState13(defaultCollapsed);
+  const [search, setSearch] = useState13(false);
+  const [more, setMore] = useState13(false);
+  const [theme, setTheme] = useState13("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(() => {
@@ -2702,15 +2853,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__ */ jsxs28(Fragment10, { children: [
+        /* @__PURE__ */ jsx33("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx33(Icon, { name: section.icon }) }),
+        /* @__PURE__ */ jsx33("span", { className: "ui-nav__label", children: section.label }),
+        section.count != null && /* @__PURE__ */ jsx33("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__ */ jsx33("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx33("a", { ...linkProps }) }, section.href);
   });
-  const sidebar = (items, label) => /* @__PURE__ */ jsx32(
+  const sidebar = (items, label) => /* @__PURE__ */ jsx33(
     SidebarNav,
     {
       "aria-label": label,
@@ -2722,7 +2873,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__ */ jsx33("a", { ...linkProps });
       }
     }
   );
@@ -2730,33 +2881,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__ */ jsxs28("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    /* @__PURE__ */ jsxs28("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx33("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs28("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+        brand ?? /* @__PURE__ */ jsx33("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+        /* @__PURE__ */ jsx33("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__ */ jsx33("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx33("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs28("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx33("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs28("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx33("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx33("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
+          /* @__PURE__ */ jsx33("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
         ] }) }),
-        /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx33("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__ */ jsxs28("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs28("header", { className: "ui-app__bar", children: [
+        /* @__PURE__ */ jsxs28("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx33("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx33(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx33("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
+          /* @__PURE__ */ jsx33("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx32("span", { className: "ui-app__bar-gap" }),
+        /* @__PURE__ */ jsx33("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__ */ jsx33("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx33("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
+        /* @__PURE__ */ jsx33("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx33(
           Dropdown,
           {
             variant: "menu",
@@ -2765,27 +2916,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__ */ jsx33("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
+            header: /* @__PURE__ */ jsxs28("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx33("b", { children: account.name }),
+              /* @__PURE__ */ jsx33("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__ */ jsxs28("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx33(BackLink, { ...back }),
+        /* @__PURE__ */ jsx33("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx33("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx33("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx33("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__ */ jsx33("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs28("ul", { className: "ui-nav__list", children: [
       links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsxs27(
+      remaining.length > 0 && /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsxs28(
         "button",
         {
           type: "button",
@@ -2794,20 +2945,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__ */ jsx33("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx33(Icon, { name: "moreHorizontal" }) }),
+            /* @__PURE__ */ jsx33("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__ */ jsx33(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
+    /* @__PURE__ */ jsx33(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 jsx34, jsxs as jsxs29 } 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 +2970,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__ */ jsxs29("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx34("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx34("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx34("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx34("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx34("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx34("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 jsx35, jsxs as jsxs30 } 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 +3039,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__ */ jsx35("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx35("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon6(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
+  return labelled ? /* @__PURE__ */ jsxs30("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs29("span", { children: [
+    /* @__PURE__ */ jsxs30("span", { children: [
       label,
       " theme"
     ] })
@@ -2899,11 +3050,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 useEffect14, useRef as useRef18, useState as useState14 } from "react";
+import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "svg",
     {
       ...rest,
@@ -2915,18 +3066,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__ */ jsx36("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx36("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__ */ jsxs31("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx36("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx36(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
+    /* @__PURE__ */ jsx36("div", { className: "ui-success__title", children: title }),
+    sub && /* @__PURE__ */ jsx36("div", { className: "ui-success__sub", children: sub })
   ] });
 });
 var pieces = [
@@ -2946,8 +3097,8 @@ var pieces = [
   [80, 0.36, -20, "c", 1.05]
 ];
 function Countdown({ seconds, label = "Redirecting", onDone }) {
-  const [remaining, setRemaining] = useState13(seconds);
-  const callback = useRef17(onDone);
+  const [remaining, setRemaining] = useState14(seconds);
+  const callback = useRef18(onDone);
   useEffect14(() => {
     callback.current = onDone;
   }, [onDone]);
@@ -2963,12 +3114,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__ */ jsxs31("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
+    /* @__PURE__ */ jsx36("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs31("span", { className: "ui-sx__count-text", children: [
       label,
       " in ",
-      /* @__PURE__ */ jsx35("b", { "data-sx-num": "", children: remaining }),
+      /* @__PURE__ */ jsx36("b", { "data-sx-num": "", children: remaining }),
       "s"
     ] })
   ] });
@@ -2995,7 +3146,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__ */ jsxs31(
     "div",
     {
       role: "status",
@@ -3004,16 +3155,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__ */ jsx36("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
+          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx36("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__ */ jsxs31("div", { className: "ui-sx__inner", children: [
+          /* @__PURE__ */ jsx36("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx36(SuccessCheck, { variant: mark }) }),
+          /* @__PURE__ */ jsxs31("div", { className: "ui-sx__content", children: [
+            /* @__PURE__ */ jsx36(Heading, { className: "ui-sx__title", children: title }),
+            body && /* @__PURE__ */ jsx36("p", { className: "ui-sx__body", children: body }),
+            hasActions && /* @__PURE__ */ jsx36("div", { className: "ui-sx__actions", children: actions }),
+            countdown && /* @__PURE__ */ jsx36(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
           ] })
         ] })
       ]
@@ -3044,6 +3195,7 @@ export {
   Dropdown,
   EmptyState,
   Field,
+  FileDrop,
   FileField,
   FilterBar,
   Icon,

package/src/index.css

@@ -24,6 +24,7 @@
 @import "./styles/segmented.css";
 @import "./styles/tabs.css";
 @import "./styles/input.css";
+@import "./styles/file-drop.css";
 @import "./styles/dropdown.css";
 @import "./styles/tooltip.css";
 @import "./styles/nav.css";

package/src/inline.js

@@ -38,6 +38,7 @@ export const styles = {
   segmented: read('styles/segmented.css'),
   tabs: read('styles/tabs.css'),
   input: read('styles/input.css'),
+  fileDrop: read('styles/file-drop.css'),
   dropdown: read('styles/dropdown.css'),
   tooltip: read('styles/tooltip.css'),
   nav: read('styles/nav.css'),
@@ -73,6 +74,7 @@ export const cssText = [
   styles.segmented,
   styles.tabs,
   styles.input,
+  styles.fileDrop,
   styles.dropdown,
   styles.tooltip,
   styles.nav,

package/src/styles/file-drop.css

@@ -0,0 +1,83 @@
+/* File drop — .ui-drop. One row at rest; the field-sized box stays with .ui-file.
+ * why: docs/specification.md#react-file-drop */
+.ui-drop { position: relative; }
+
+/* What the region accepts the file for, above the control. */
+.ui-drop > * + .ui-drop__row { margin-top: var(--space-3); }
+
+.ui-drop__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* One height at rest, whichever control is in it: the picker button carries a
+     glyph and a note beside it does not. */
+  min-height: var(--space-8);
+  gap: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.ui-drop__note { margin: 0; }
+
+/* The file in hand is a stack, not a line: the name owns the top tier, what the
+   page has a rule about sits under it, and the track runs the width below both.
+   One line asked to carry all three truncates the name to nothing at 320. */
+.ui-drop__file { display: grid; flex: 1 1 auto; gap: var(--space-2); min-width: 0; }
+
+/* The name tier. Never wraps: the actions stay on the name's line at every
+   width, and the name gives way to them by truncating. */
+.ui-drop__line { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); min-width: 0; }
+
+/* The extension is the half that says what kind of file this is, so the stem
+   gives way and the tail never does — `frankfurt-settlement-state….pdf`, the
+   way Finder, Drive and Dropbox cut a name. */
+.ui-drop__name { display: flex; flex: 1 1 auto; min-width: var(--space-10); color: var(--strong); font-weight: var(--weight-medium); }
+.ui-drop__stem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-drop__ext { flex: none; }
+
+/* The facts tier: the size while it uploads, the message when it fails. Never
+   wraps either — a second tier of text here would be a third tier on the row. */
+.ui-drop__facts { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); min-width: 0; }
+.ui-drop__size { flex: none; white-space: nowrap; }
+.ui-drop__word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
+
+/* A status the track does not already draw is a circled mark and a word,
+   because colour alone is not a status. */
+.ui-drop__state { display: inline-flex; flex: 0 1 auto; align-items: center; gap: var(--space-2); min-width: 0; }
+.ui-drop__state svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
+.ui-drop__error { color: var(--pink); }
+
+/* Closes the name's line on the edge the content ends on, in every state. */
+.ui-drop__actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin-left: auto; }
+
+/* The width of the row it reports on, so 40% reads as 40% rather than as a dash.
+   The ground is the kit's token for sunken tracks; --surface-3 was invisible. */
+.ui-drop__bar {
+  display: block;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-2); /* ring-gap: inherit — a progress track holds no focus target. */
+  overflow: hidden;
+}
+.ui-drop__bar span { display: block; height: 100%; background: var(--accent); }
+
+/* Covers the region rather than joining it, so the row keeps its place. */
+.ui-drop__target {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3);
+  border: 1px dashed var(--accent);
+  border-radius: var(--radius-md);
+  background: var(--surface); /* ring-gap: inherit — the target is painted while a file is over the region and holds no focus target. */
+  color: var(--strong);
+  font-size: var(--text-sm);
+  text-align: center;
+}
+
+.ui-drop.is-disabled .ui-drop__row { /* muted-ink: state — the drop accepts nothing */ color: var(--disabled-ink); }
+.ui-drop.is-disabled .ui-drop__name { /* muted-ink: state — the drop accepts nothing */ color: var(--disabled-ink); }

package/src/styles/tap-zone.css

@@ -128,6 +128,15 @@
      mark's zone 9px inside `Revoke`. Nothing down, because a dense table's
      rows share an edge and its padding is not clearance to spend. */
   .ui-table__act .ui-btn + .ui-btn { margin-inline-start: var(--tap-gap) !important; }
+
+  /* A file drop's pair opens both ways: the row's own floor leaves clearance
+     under a button shorter than the target, and the panel's padding is below. */
+  .ui-drop__row { --tap-clear-y: var(--tap-gap); }
+  .ui-drop__actions {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
   .ui-table__act { --tap-clear-x: var(--tap-gap); --tap-clear-y: 0px; }
 
   /* Down only, like the nine rows below: a toast is a full row at this width,