@apliteni/apliteni-ui 0.76.1 → 0.78.0

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,