@apliteni/apliteni-ui 0.132.0 → 0.133.0

package/guidelines/file-drop.md

@@ -6,13 +6,13 @@
 
 **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.
+**Why:** A tall box holds the page's best space 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.
+**Except:** A page that exists to receive one file may use the field-sized picker, which has its own label. An empty page may show a dashed drop area until the first file arrives. See #458 for this exception.
 
 ## Paint the target only while a file is over it
 
@@ -26,15 +26,17 @@
 
 **Don't:** Cover the whole window when one panel accepts the file.
 
+**Except:** A page that takes files anywhere may cover the whole page, slightly transparent and blurred over a table. See #458 for this exception.
+
 ## 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.
+**Why:** A row that changes in place keeps the page still during the upload.
 
-**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.
+**Do:** Put remove at the end of the name's line, the size under it, and the progress track below both.
 
 **Don't:** Push the list down with a progress card, or open a dialog over the page.
 
@@ -44,7 +46,7 @@
 
 **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.
+**Why:** A row that drops the file sends the reader back to choosing one.
 
 **Do:** Keep the name on its line and say “Larger than 10 MB” under it, with Retry.
 
@@ -80,8 +82,8 @@
 
 **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.
+**Why:** A dialog that asks nothing is one more thing to dismiss. A drawing would show one container, 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.
+**Do:** Take a statement into the row under the statements it joins.
 
 **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.132.0",
+  "version": "0.133.0",
 
   "workspaces": [
     "react"

package/react/dist/index.css

@@ -847,6 +847,43 @@
 .ui-drop.is-disabled .ui-drop__name {
   color: var(--disabled-ink);
 }
+.ui-drop--area {
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+.ui-drop--area.is-dragging {
+  border-color: var(--accent);
+}
+@media (max-width: 560px) {
+  .ui-drop--area {
+    padding: var(--space-3);
+  }
+}
+.ui-drop--page {
+  position: fixed;
+  inset: calc(var(--ui-app-band, 0px) + var(--ui-app-top, 0px) + var(--space-4)) var(--space-4) var(--space-4);
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: var(--bg);
+}
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .ui-drop--page {
+    background: color-mix(in srgb, var(--bg) 80%, transparent);
+    -webkit-backdrop-filter: blur(var(--space-2));
+    backdrop-filter: blur(var(--space-2));
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ui-drop--page {
+    background: var(--bg);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 
 /* src/Toast.css */
 .rx-toast-stack {
@@ -907,6 +944,9 @@
     gap: var(--space-1);
     padding-inline: var(--space-2);
   }
+  .ui-react-app .ui-app__bar:not(:has(> .ui-app__menu:first-child)) {
+    padding-inline-start: var(--space-4);
+  }
   .ui-react-app .ui-app__bar-gap {
     display: none;
   }

package/react/dist/index.d.ts

@@ -759,6 +759,12 @@ type FileDropProps = {
     label?: string;
     /** The accepted types and the size limit, stated once beside the button. */
     note?: string;
+    /** Makes the drop an empty page's area: a dashed box around a first-run block with this title,
+     *  the note and the button. The block stands in for the row and `children`, and the page
+     *  leaves the area when the first file arrives, so it never shows a file in hand. */
+    title?: string;
+    /** Lets the picker take several files. */
+    multiple?: boolean;
     /** Filters the system picker only; the consumer still validates the file. */
     accept?: string;
     /** The words on the drop target. */
@@ -771,14 +777,17 @@ type FileDropProps = {
     /** Drives the target from a parent that owns the drag region. */
     dragging?: boolean;
     disabled?: boolean;
+    /** The first file chosen or dropped. */
     onFile?: (file: File) => void;
+    /** Every file chosen or dropped, together. A consumer may pass both props. */
+    onFiles?: (files: 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;
+declare function FileDrop({ label, note, title, multiple, accept, dropLabel, removeLabel, retryLabel, file, dragging, disabled, onFile, onFiles, 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

package/react/dist/index.js

@@ -219,8 +219,7 @@ var Button = forwardRef3(function Button2({
 // src/primitives/Badge.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function Badge({ variant = "neutral", children }) {
-  const cls = ["ui-badge", variant !== "neutral" && `ui-badge--${variant}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx5("span", { className: cls, children });
+  return /* @__PURE__ */ jsx5("span", { className: `ui-badge ui-badge--${variant}`, children });
 }
 
 // src/primitives/Avatar.tsx
@@ -3313,7 +3312,31 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 
 // src/FileDrop.tsx
 import { useRef as useRef17, useState as useState12 } from "react";
-import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+
+// src/EmptyState.tsx
+import { icon as kitIcon2, illo } from "@apliteni/apliteni-ui";
+import { jsx as jsx31, jsxs as jsxs26 } 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" },
+  "not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
+  "not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
+};
+function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actions }) {
+  const preset = cases[variant];
+  const heading = title ?? preset.title;
+  const guidance = sub ?? preset.sub;
+  const glyph = icon8 ?? preset.icon;
+  return /* @__PURE__ */ jsxs26("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx31("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx31("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx31("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx31("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx31("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx31("div", { className: "ui-empty__actions", children: actions })
+  ] });
+}
+
+// src/FileDrop.tsx
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
   done: "circleCheck",
@@ -3333,6 +3356,8 @@ var cx7 = (...a) => a.filter(Boolean).join(" ");
 function FileDrop({
   label = "Upload",
   note,
+  title,
+  multiple,
   accept,
   dropLabel = "Drop to upload",
   removeLabel = "Remove",
@@ -3341,6 +3366,7 @@ function FileDrop({
   dragging,
   disabled,
   onFile,
+  onFiles,
   onRemove,
   onRetry,
   children,
@@ -3356,118 +3382,155 @@ function FileDrop({
   const showSize = Boolean(file?.size) && status !== "error";
   const showTarget = (dragging ?? over) && !disabled;
   const take = (chosen) => {
-    if (chosen && !disabled) onFile?.(chosen);
+    if (!chosen.length || disabled) return;
+    onFile?.(chosen[0]);
+    onFiles?.(chosen);
+  };
+  const pick = () => {
+    if (!disabled) input.current?.click();
+  };
+  const picker = /* @__PURE__ */ jsx32(
+    "input",
+    {
+      ref: input,
+      type: "file",
+      accept,
+      multiple,
+      disabled,
+      hidden: true,
+      tabIndex: -1,
+      onClick: (event) => event.stopPropagation(),
+      onChange: (event) => {
+        take(Array.from(event.currentTarget.files ?? []));
+        event.currentTarget.value = "";
+      }
+    }
+  );
+  const drag = {
+    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(Array.from(event.dataTransfer.files));
+    }
   };
-  return /* @__PURE__ */ jsxs26(
+  if (title !== void 0) return /* @__PURE__ */ jsxs27(
     "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]);
-      },
+      className: cx7("ui-drop", "ui-drop--area", showTarget && "is-dragging", disabled && "is-disabled", className),
+      onClick: pick,
+      ...drag,
       children: [
-        children,
-        /* @__PURE__ */ jsxs26("div", { className: "ui-drop__row", children: [
-          file ? /* @__PURE__ */ jsxs26("div", { className: cx7("ui-drop__file", status === "error" && "ui-drop__file--failed"), children: [
-            /* @__PURE__ */ jsxs26("div", { className: "ui-drop__line", children: [
-              /* @__PURE__ */ jsxs26("span", { className: "ui-drop__name", title: file.name, children: [
-                /* @__PURE__ */ jsx31("span", { className: "ui-drop__stem", children: stem }),
-                /* @__PURE__ */ jsx31("span", { className: "ui-drop__ext", children: ext })
-              ] }),
-              (onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs26("span", { className: "ui-drop__actions", children: [
-                status === "error" && onRetry && /* @__PURE__ */ jsx31(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
-                onRemove && /* @__PURE__ */ jsx31(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    onClick: onRemove,
-                    disabled,
-                    children: removeLabel
-                  }
-                )
-              ] })
-            ] }),
-            (showSize || showWord) && /* @__PURE__ */ jsxs26(
-              "div",
-              {
-                className: cx7("ui-drop__facts", status === "error" && "ui-drop__error"),
-                role: status === "error" ? "alert" : void 0,
-                children: [
-                  showSize && /* @__PURE__ */ jsx31("span", { className: "ui-drop__size", children: file.size }),
-                  showWord && /* @__PURE__ */ jsxs26("span", { className: "ui-drop__state", children: [
-                    /* @__PURE__ */ jsx31(Icon, { name: MARKS[status] }),
-                    /* @__PURE__ */ jsx31("span", { className: "ui-drop__word", title: word, children: word })
-                  ] })
-                ]
-              }
-            ),
-            hasBar && /* @__PURE__ */ jsx31(
-              "span",
-              {
-                className: "ui-drop__bar",
-                role: "progressbar",
-                "aria-label": `${word} ${file.name}`,
-                "aria-valuenow": file.progress,
-                "aria-valuemin": 0,
-                "aria-valuemax": 100,
-                children: /* @__PURE__ */ jsx31("span", { style: { width: `${file.progress}%` } })
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs26(Fragment10, { children: [
-            /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
+          EmptyState,
+          {
+            icon: "upload",
+            title,
+            sub: note ?? "",
+            actions: /* @__PURE__ */ jsx32(
               Button,
               {
+                variant: "primary",
                 size: "sm",
                 icon: "upload",
                 disabled,
-                onClick: () => input.current?.click(),
+                onClick: (event) => {
+                  event.stopPropagation();
+                  pick();
+                },
                 children: label
               }
-            ),
-            note && /* @__PURE__ */ jsx31("p", { className: "ui-drop__note", children: note })
-          ] }),
-          /* @__PURE__ */ jsx31(
-            "input",
-            {
-              ref: input,
-              type: "file",
-              accept,
-              disabled,
-              hidden: true,
-              tabIndex: -1,
-              onChange: (event) => {
-                take(event.currentTarget.files?.[0]);
-                event.currentTarget.value = "";
-              }
-            }
-          )
-        ] }),
-        showTarget && /* @__PURE__ */ jsx31("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
+            )
+          }
+        ),
+        picker
       ]
     }
   );
+  return /* @__PURE__ */ jsxs27("div", { className: cx7("ui-drop", disabled && "is-disabled", className), ...drag, children: [
+    children,
+    /* @__PURE__ */ jsxs27("div", { className: "ui-drop__row", children: [
+      file ? /* @__PURE__ */ jsxs27("div", { className: cx7("ui-drop__file", status === "error" && "ui-drop__file--failed"), children: [
+        /* @__PURE__ */ jsxs27("div", { className: "ui-drop__line", children: [
+          /* @__PURE__ */ jsxs27("span", { className: "ui-drop__name", title: file.name, children: [
+            /* @__PURE__ */ jsx32("span", { className: "ui-drop__stem", children: stem }),
+            /* @__PURE__ */ jsx32("span", { className: "ui-drop__ext", children: ext })
+          ] }),
+          (onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs27("span", { className: "ui-drop__actions", children: [
+            status === "error" && onRetry && /* @__PURE__ */ jsx32(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
+            onRemove && /* @__PURE__ */ jsx32(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: onRemove,
+                disabled,
+                children: removeLabel
+              }
+            )
+          ] })
+        ] }),
+        (showSize || showWord) && /* @__PURE__ */ jsxs27(
+          "div",
+          {
+            className: cx7("ui-drop__facts", status === "error" && "ui-drop__error"),
+            role: status === "error" ? "alert" : void 0,
+            children: [
+              showSize && /* @__PURE__ */ jsx32("span", { className: "ui-drop__size", children: file.size }),
+              showWord && /* @__PURE__ */ jsxs27("span", { className: "ui-drop__state", children: [
+                /* @__PURE__ */ jsx32(Icon, { name: MARKS[status] }),
+                /* @__PURE__ */ jsx32("span", { className: "ui-drop__word", title: word, children: word })
+              ] })
+            ]
+          }
+        ),
+        hasBar && /* @__PURE__ */ jsx32(
+          "span",
+          {
+            className: "ui-drop__bar",
+            role: "progressbar",
+            "aria-label": `${word} ${file.name}`,
+            "aria-valuenow": file.progress,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            children: /* @__PURE__ */ jsx32("span", { style: { width: `${file.progress}%` } })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs27(Fragment10, { children: [
+        /* @__PURE__ */ jsx32(
+          Button,
+          {
+            size: "sm",
+            icon: "upload",
+            disabled,
+            onClick: pick,
+            children: label
+          }
+        ),
+        note && /* @__PURE__ */ jsx32("p", { className: "ui-drop__note", children: note })
+      ] }),
+      picker
+    ] }),
+    showTarget && /* @__PURE__ */ jsx32("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
+  ] });
 }
 
 // src/SearchField.tsx
 import { forwardRef as forwardRef7 } from "react";
 import { icon as icon6 } from "@apliteni/apliteni-ui";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs27("div", { className: "ui-input-group", children: [
-    /* @__PURE__ */ jsx32("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon6("search") } }),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs28("div", { className: "ui-input-group", children: [
+    /* @__PURE__ */ jsx33("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon6("search") } }),
+    /* @__PURE__ */ jsx33(
       "input",
       {
         ref,
@@ -3483,7 +3546,7 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 // src/Toast.tsx
 import { createContext as createContext3, useCallback as useCallback6, useContext as useContext3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState13 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var Context = createContext3(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -3531,7 +3594,7 @@ function Notice({ notice, remove }) {
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
   }, [dismiss, leaving2, paused, timed]);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ref: root,
@@ -3545,12 +3608,12 @@ function Notice({ notice, remove }) {
         if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
       },
       children: [
-        /* @__PURE__ */ jsx33("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx33(Icon, { name: glyphs[tone] }) }),
-        /* @__PURE__ */ jsxs28("div", { className: "ui-toast__body", children: [
-          /* @__PURE__ */ jsx33("div", { className: "ui-toast__title", children: notice.title }),
-          !notice.compact && notice.text && /* @__PURE__ */ jsx33("div", { className: "ui-toast__text", children: notice.text })
+        /* @__PURE__ */ jsx34("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx34(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs29("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx34("div", { className: "ui-toast__title", children: notice.title }),
+          !notice.compact && notice.text && /* @__PURE__ */ jsx34("div", { className: "ui-toast__text", children: notice.text })
         ] }),
-        notice.action && /* @__PURE__ */ jsx33(
+        notice.action && /* @__PURE__ */ jsx34(
           "button",
           {
             type: "button",
@@ -3565,8 +3628,8 @@ function Notice({ notice, remove }) {
             children: notice.action.label
           }
         ),
-        notice.dismissible !== false && /* @__PURE__ */ jsx33("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx33(Icon, { name: "x" }) }),
-        timed && /* @__PURE__ */ jsx33(
+        notice.dismissible !== false && /* @__PURE__ */ jsx34("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx34(Icon, { name: "x" }) }),
+        timed && /* @__PURE__ */ jsx34(
           "span",
           {
             className: "ui-toast__timer is-running",
@@ -3608,10 +3671,10 @@ function Toast({ children }) {
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
   usePublishedReach(stack2, entries.length);
-  return /* @__PURE__ */ jsxs28(Context.Provider, { value: push, children: [
+  return /* @__PURE__ */ jsxs29(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx33("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx33(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx34("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx34(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });
@@ -3624,7 +3687,7 @@ import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
 // src/SidebarNav.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId11, useState as useState14 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId11();
@@ -3650,15 +3713,15 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs29(Fragment11, { children: [
-    (item.leading ?? item.icon) && /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx34(Icon, { name: item.icon }) }),
-    /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: item.label }),
-    count != null && count !== "" && /* @__PURE__ */ jsx34("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
-    group && /* @__PURE__ */ jsx34("span", { className: "ui-nav__caret", "aria-hidden": "true" })
+  const children = /* @__PURE__ */ jsxs30(Fragment11, { children: [
+    (item.leading ?? item.icon) && /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx35(Icon, { name: item.icon }) }),
+    /* @__PURE__ */ jsx35("span", { className: "ui-nav__label", children: item.label }),
+    count != null && count !== "" && /* @__PURE__ */ jsx35("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
+    group && /* @__PURE__ */ jsx35("span", { className: "ui-nav__caret", "aria-hidden": "true" })
   ] });
   const common = { className, "aria-label": name, title: collapsed ? name : void 0, children };
-  if (group) return /* @__PURE__ */ jsxs29("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
-    /* @__PURE__ */ jsx34(
+  if (group) return /* @__PURE__ */ jsxs30("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
+    /* @__PURE__ */ jsx35(
       "button",
       {
         ...common,
@@ -3672,22 +3735,22 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx34("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx34(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
+    /* @__PURE__ */ jsx35("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx35(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
   ] });
-  if (item.disabled) return /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsx34("span", { ...common, role: "link", "aria-disabled": "true" }) });
+  if (item.disabled) return /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35("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__ */ jsx34("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx34("a", { ...props }) });
+  return /* @__PURE__ */ jsx35("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx35("a", { ...props }) });
 }
 function Section({ section, ...props }) {
   const uid = useId11();
-  return /* @__PURE__ */ jsxs29("div", { className: "ui-nav__section", children: [
-    section.label && /* @__PURE__ */ jsx34("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
-    /* @__PURE__ */ jsx34("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx34(Row, { item, ...props }, item.id)) })
+  return /* @__PURE__ */ jsxs30("div", { className: "ui-nav__section", children: [
+    section.label && /* @__PURE__ */ jsx35("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
+    /* @__PURE__ */ jsx35("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx35(Row, { item, ...props }, item.id)) })
   ] });
 }
 var SidebarNav = forwardRef8(function SidebarNav2({
@@ -3702,8 +3765,8 @@ var SidebarNav = forwardRef8(function SidebarNav2({
   "aria-label": label = "Sidebar",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsxs29("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__ */ jsx34(
+  return /* @__PURE__ */ jsxs30("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__ */ jsx35(
       Section,
       {
         section,
@@ -3714,14 +3777,14 @@ var SidebarNav = forwardRef8(function SidebarNav2({
       },
       index
     )),
-    footer && /* @__PURE__ */ jsx34("div", { className: "ui-nav__foot", children: footer })
+    footer && /* @__PURE__ */ jsx35("div", { className: "ui-nav__foot", children: footer })
   ] });
 });
 
 // src/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
 import { themeIcon } from "@apliteni/apliteni-ui";
-import { jsx as jsx35, jsxs as jsxs30 } 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')})()`;
@@ -3779,10 +3842,10 @@ function ThemeToggle({ labelled = false }) {
     }
     window.dispatchEvent(new Event(CHOICE_EVENT));
   };
-  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: themeIcon(theme) } }) });
-  return labelled ? /* @__PURE__ */ jsxs30("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: themeIcon(theme) } }) });
+  return labelled ? /* @__PURE__ */ jsxs31("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs30("span", { children: [
+    /* @__PURE__ */ jsxs31("span", { children: [
       label,
       " theme"
     ] })
@@ -3790,7 +3853,7 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/AppShell.tsx
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -3855,7 +3918,7 @@ function AppShell({
     } catch {
     }
   };
-  const sidebar = (label) => /* @__PURE__ */ jsx36(
+  const sidebar = (label) => /* @__PURE__ */ jsx37(
     SidebarNav,
     {
       "aria-label": label,
@@ -3867,33 +3930,33 @@ function AppShell({
         const linkProps = { ...props, onClick: (event) => {
           if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMenu(false);
         } };
-        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx36("a", { ...linkProps });
+        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx37("a", { ...linkProps });
       }
     }
   );
   const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
   const navigable = sections.length > 1 || Boolean(back);
-  const lockup = /* @__PURE__ */ jsxs31("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-    brand ?? /* @__PURE__ */ jsx36("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-    /* @__PURE__ */ jsx36("span", { children: word })
+  const lockup = /* @__PURE__ */ jsxs32("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+    brand ?? /* @__PURE__ */ jsx37("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+    /* @__PURE__ */ jsx37("span", { children: word })
   ] });
-  return /* @__PURE__ */ jsxs31("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    navigable && /* @__PURE__ */ jsxs31("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
-      /* @__PURE__ */ jsx36("div", { className: "ui-app__head", children: lockup }),
+  return /* @__PURE__ */ jsxs32("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    navigable && /* @__PURE__ */ jsxs32("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
+      /* @__PURE__ */ jsx37("div", { className: "ui-app__head", children: lockup }),
       sidebar("Sections"),
-      /* @__PURE__ */ jsx36("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx36("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs31("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx36("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs31("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx36("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-          /* @__PURE__ */ jsx36("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
-          /* @__PURE__ */ jsx36("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
+      /* @__PURE__ */ jsx37("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx37("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs32("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx37("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs32("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx37("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx37("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
+          /* @__PURE__ */ jsx37("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
         ] }) }),
-        /* @__PURE__ */ jsx36("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx37("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs31("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs31("header", { className: "ui-app__bar", children: [
-        navigable && /* @__PURE__ */ jsxs31(Fragment12, { children: [
-          /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsxs32("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs32("header", { className: "ui-app__bar", children: [
+        navigable && /* @__PURE__ */ jsxs32(Fragment12, { children: [
+          /* @__PURE__ */ jsx37(
             Button,
             {
               ref: menuButton,
@@ -3907,19 +3970,19 @@ function AppShell({
               onClick: () => setMenu(true)
             }
           ),
-          /* @__PURE__ */ jsx36("a", { className: "ui-app__brand ui-app__brand--band", href: brandHref, "aria-label": word, children: brand ?? /* @__PURE__ */ jsx36("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(`${uid}-band`, 24) } }) })
+          /* @__PURE__ */ jsx37("a", { className: "ui-app__brand ui-app__brand--band", href: brandHref, "aria-label": word, children: brand ?? /* @__PURE__ */ jsx37("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(`${uid}-band`, 24) } }) })
         ] }),
         !navigable && lockup,
-        /* @__PURE__ */ jsxs31("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
-          /* @__PURE__ */ jsx36("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx36(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx36("span", { className: "ui-app__search-txt", children: searchLabel }),
-          /* @__PURE__ */ jsx36("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
-          /* @__PURE__ */ jsx36("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
+        /* @__PURE__ */ jsxs32("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx37("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx37(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx37("span", { className: "ui-app__search-txt", children: searchLabel }),
+          /* @__PURE__ */ jsx37("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
+          /* @__PURE__ */ jsx37("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx36("span", { className: "ui-app__bar-gap" }),
-        bandControl && /* @__PURE__ */ jsx36("span", { className: "ui-react-app__band-control", children: bandControl }),
-        /* @__PURE__ */ jsx36(ThemeToggle, {}),
-        /* @__PURE__ */ jsx36("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37("span", { className: "ui-app__bar-gap" }),
+        bandControl && /* @__PURE__ */ jsx37("span", { className: "ui-react-app__band-control", children: bandControl }),
+        /* @__PURE__ */ jsx37(ThemeToggle, {}),
+        /* @__PURE__ */ jsx37("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx37(
           Dropdown,
           {
             variant: "menu",
@@ -3928,48 +3991,26 @@ function AppShell({
             ariaLabel: `Signed in as ${account.name}, ${account.email}`,
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
-            triggerContent: /* @__PURE__ */ jsx36("span", { className: "ui-app__av", "aria-hidden": "true", children: /* @__PURE__ */ jsx36(Avatar, { personKey: account.email || account.name, name: account.name, size: 32 }) }),
-            header: /* @__PURE__ */ jsxs31("div", { className: "ui-dropdown__head", children: [
-              /* @__PURE__ */ jsx36("b", { children: account.name }),
-              /* @__PURE__ */ jsx36("span", { children: account.email })
+            triggerContent: /* @__PURE__ */ jsx37("span", { className: "ui-app__av", "aria-hidden": "true", children: /* @__PURE__ */ jsx37(Avatar, { personKey: account.email || account.name, name: account.name, size: 32 }) }),
+            header: /* @__PURE__ */ jsxs32("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx37("b", { children: account.name }),
+              /* @__PURE__ */ jsx37("span", { children: account.email })
             ] }),
             items: [{ label: "Sign out", icon: "logout", danger: true }],
             onSelect: onSignOut
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs31("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
-        back && /* @__PURE__ */ jsx36(BackLink, { ...back }),
-        /* @__PURE__ */ jsx36("h1", { children: title }),
-        lede && /* @__PURE__ */ jsx36("p", { className: "ui-app__sub", children: lede }),
-        actions && /* @__PURE__ */ jsx36("div", { className: "ui-react-app__actions", children: actions }),
-        /* @__PURE__ */ jsx36("div", { className: "ui-app__body", children })
+      /* @__PURE__ */ jsxs32("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx37(BackLink, { ...back }),
+        /* @__PURE__ */ jsx37("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx37("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx37("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx37("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    navigable && /* @__PURE__ */ jsx36(Drawer, { open: menu, onClose: () => setMenu(false), title: word, side: "left", size: "sm", children: /* @__PURE__ */ jsx36("div", { className: "ui-react-app__menu", children: sidebar("Menu sections") }) }),
-    /* @__PURE__ */ jsx36(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 jsx37, jsxs as jsxs32 } 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" },
-  "not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
-  "not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
-};
-function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actions }) {
-  const preset = cases[variant];
-  const heading = title ?? preset.title;
-  const guidance = sub ?? preset.sub;
-  const glyph = icon8 ?? preset.icon;
-  return /* @__PURE__ */ jsxs32("div", { className: "ui-empty", children: [
-    art ? typeof art === "string" ? /* @__PURE__ */ jsx37("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx37("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx37("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
-    heading && /* @__PURE__ */ jsx37("div", { className: "ui-empty__title", children: heading }),
-    guidance && /* @__PURE__ */ jsx37("div", { className: "ui-empty__sub", children: guidance }),
-    actions && /* @__PURE__ */ jsx37("div", { className: "ui-empty__actions", children: actions })
+    navigable && /* @__PURE__ */ jsx37(Drawer, { open: menu, onClose: () => setMenu(false), title: word, side: "left", size: "sm", children: /* @__PURE__ */ jsx37("div", { className: "ui-react-app__menu", children: sidebar("Menu sections") }) }),
+    /* @__PURE__ */ jsx37(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
   ] });
 }
 

package/src/components/index.js

@@ -48,9 +48,11 @@ export function button({
 }
 
 // ---- Badge / Pill --------------------------------------------------------
+// Neutral is written out rather than left implied: a status column reading its tone off the
+// class list found nothing on two of four rows, and the tone a chip is in is not a default
+// the markup should have to know. The base class carries the same fill either way. #459
 export function badge(label, variant = 'neutral') {
-  const v = variant === 'neutral' ? '' : `ui-badge--${variant}`;
-  return `<span class="${esc(cx('ui-badge', v))}">${esc(label)}</span>`;
+  return `<span class="${esc(cx('ui-badge', `ui-badge--${variant}`))}">${esc(label)}</span>`;
 }
 export function pill(label, variant) {
   return `<span class="${esc(cx('ui-pill', variant && `ui-pill--${variant}`))}">${esc(label)}</span>`;

package/src/styles/card.css

@@ -93,6 +93,10 @@
   /* Title to description: the step, not the 5px it was. why: docs/foundations.md#spacing-and-rhythm */
   margin: 0 0 var(--space-2);
 }
+/* The title of a card that supports its neighbour, such as a document beside the
+   data read from it. The size, weight and rank stay the card title's.
+   why: docs/foundations.md#text-ink */
+.ui-card__title--muted { /* muted-ink: chrome — a supporting card ranks below its neighbour; the title is also the card's accessible name */ color: var(--muted); }
 .ui-card__sub {
   color: var(--text);
   font-size: var(--text-base);

package/src/styles/file-drop.css

@@ -81,3 +81,42 @@
 
 .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); }
+
+/* The empty page's drop area: the whole region is the target, drawn as a dashed
+   box around the first-run block. A file over it turns the edge to the accent,
+   the screen's one accent line, the way .ui-drop__target draws its own. */
+.ui-drop--area { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-4); }
+.ui-drop--area.is-dragging { border-color: var(--accent); }
+@media (max-width: 560px) { .ui-drop--area { padding: var(--space-3); } }
+
+/* The whole page as a target, drawn only while a file is dragged over the page. It is the
+   empty page's drop area made large: the same dashed accent edge and radius, holding the upload
+   glyph, a line that says to drop the files and the accepted types, laid over the page content below
+   the topbar. Its ground is the page ground, slightly transparent and blurred, so the table shows
+   through softly and no row stays sharp under the words. Where the engine cannot blur the backdrop,
+   or the reader asks for less transparency, the ground is solid. The layer takes no pointer events,
+   so the drop lands on what is under it. */
+.ui-drop--page {
+  position: fixed;
+  inset: calc(var(--ui-app-band, 0px) + var(--ui-app-top, 0px) + var(--space-4)) var(--space-4) var(--space-4);
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: var(--bg); /* code-bg: inherit — the layer holds no focus target and takes no pointer. */
+}
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .ui-drop--page {
+    background: color-mix(in srgb, var(--bg) 80%, transparent); /* code-bg: inherit — the layer holds no focus target and takes no pointer. */
+    -webkit-backdrop-filter: blur(var(--space-2));
+    backdrop-filter: blur(var(--space-2));
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ui-drop--page {
+    background: var(--bg); /* code-bg: inherit — the layer holds no focus target and takes no pointer. */
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/styles/layout.css

@@ -332,7 +332,7 @@
    the three heights below are for. Level, not one continuous stroke: the rail insets
    its own rule, and in light that half is 1.009:1 on the rail's ground.
    why: docs/components.md#the-second-layout */
-.ui-app { --ui-app-band: 52px; }
+.ui-app--topbar { --ui-app-band: 52px; }
 .ui-app__well { display: flex; flex-direction: column; min-width: 0; }
 .ui-app__bar {
   display: flex;
@@ -516,15 +516,17 @@
 @media (max-width: 720px) {
   /* A column, not a grid: the band sticks to the top of the shell, and a sticky grid
      item sticks only inside its own row. */
-  .ui-app { display: flex; flex-direction: column; }
+  .ui-app { display: flex; flex-direction: column; --ui-app-band: 52px; }
   .ui-app > .ui-app__rail { display: none; }
   .ui-app__well { flex: 1 1 auto; }
   .ui-app > .ui-app__main { flex: 1 1 auto; }
   .ui-app > .ui-app__bar--phone { display: flex; }
   .ui-btn.ui-app__menu { display: inline-flex; }
   .ui-app__brand--band { display: flex; }
-  /* The menu control stands at the band's start with the band's inset beside it. */
-  .ui-app__bar { padding-inline: var(--space-2) var(--space-4); }
+  /* The first visible item lines up with the page. A leading menu uses the smaller
+     inset to keep its phone position in both shells. */
+  .ui-app__bar { padding-inline: var(--space-4); }
+  .ui-app__bar:has(> .ui-app__menu:first-child) { padding-inline-start: var(--space-2); }
   /* The drawer paints itself and sits out of the flow, so its wrapper takes no height. */
   .ui-app__drawer { display: block; }
   /* The rail's rows are the drawer's rows: the column fills the panel, and the foot