@krizaka/ui 3.46.0 → 3.49.0

package/dist/drop-overlay.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/** True while the drag carries files (not text or a link): the only drag that should raise the overlay. */
+declare function dragHasFiles(transfer: {
+    types?: readonly string[] | DOMStringList;
+} | null | undefined): boolean;
+/** One accepted kind: a MIME type (`application/pdf`), a family (`image/*`) or an extension (`.pdf`). */
+type AcceptRule = string;
+interface DropSplit<F> {
+    accepted: F[];
+    rejected: F[];
+}
+/** Splits dropped files by `accept` (no rule: everything is accepted). */
+declare function splitDropped<F extends Pick<File, "name" | "type">>(files: readonly F[], accept?: readonly AcceptRule[]): DropSplit<F>;
+
+type DropOverlayProps = Omit<React.ComponentProps<"div">, "children" | "onDrop"> & {
+    /** What the overlay says (“Drop to check”) — passed translated. */
+    label: string;
+    /** One line under it (“PDF or text”). */
+    hint?: string;
+    /** The files dropped: the accepted ones, then the ones `accept` refused. */
+    onFiles: (accepted: File[], rejected: File[]) => void;
+    /** What is accepted: MIME types, families (`image/*`) or extensions (`.pdf`). */
+    accept?: readonly AcceptRule[];
+    /** Turns the window back into a plain page (while a modal is open, signed out). */
+    disabled?: boolean;
+};
+/** Drag a file anywhere on the page: a full-window overlay accepts it. */
+declare function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...props }: DropOverlayProps): React.JSX.Element | null;
+
+export { type AcceptRule, DropOverlay, type DropOverlayProps, type DropSplit, dragHasFiles, splitDropped };

package/dist/drop-overlay.js

@@ -0,0 +1,86 @@
+import {
+  cn
+} from "./chunk-S6NYGOJT.js";
+
+// src/drop-overlay/drop-overlay.tsx
+import * as React from "react";
+
+// src/drop-overlay/files.ts
+function dragHasFiles(transfer) {
+  return Array.from(transfer?.types ?? []).includes("Files");
+}
+function matches(file, rule) {
+  const wanted = rule.trim().toLowerCase();
+  if (wanted.startsWith(".")) return file.name.toLowerCase().endsWith(wanted);
+  if (wanted.endsWith("/*")) return file.type.toLowerCase().startsWith(wanted.slice(0, -1));
+  return file.type.toLowerCase() === wanted;
+}
+function splitDropped(files, accept) {
+  if (!accept || accept.length === 0) return { accepted: [...files], rejected: [] };
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) (accept.some((rule) => matches(file, rule)) ? accepted : rejected).push(file);
+  return { accepted, rejected };
+}
+
+// src/drop-overlay/drop-overlay.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...props }) {
+  const [active, setActive] = React.useState(false);
+  const depth = React.useRef(0);
+  const latest = React.useRef({ onFiles, accept });
+  React.useEffect(() => {
+    latest.current = { onFiles, accept };
+  });
+  React.useEffect(() => {
+    if (disabled) return;
+    const reset = () => {
+      depth.current = 0;
+      setActive(false);
+    };
+    const carrying = (event) => dragHasFiles(event.dataTransfer);
+    const enter = (event) => {
+      if (!carrying(event)) return;
+      depth.current += 1;
+      setActive(true);
+    };
+    const over = (event) => {
+      if (carrying(event)) event.preventDefault();
+    };
+    const leave = (event) => {
+      if (!carrying(event)) return;
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) setActive(false);
+    };
+    const drop = (event) => {
+      if (!carrying(event)) return;
+      event.preventDefault();
+      const files = Array.from(event.dataTransfer?.files ?? []);
+      reset();
+      const { accepted, rejected } = splitDropped(files, latest.current.accept);
+      latest.current.onFiles(accepted, rejected);
+    };
+    window.addEventListener("dragenter", enter);
+    window.addEventListener("dragover", over);
+    window.addEventListener("dragleave", leave);
+    window.addEventListener("drop", drop);
+    return () => {
+      window.removeEventListener("dragenter", enter);
+      window.removeEventListener("dragover", over);
+      window.removeEventListener("dragleave", leave);
+      window.removeEventListener("drop", drop);
+      reset();
+    };
+  }, [disabled]);
+  if (!active) return null;
+  return /* @__PURE__ */ jsx("div", { role: "status", "data-state": "open", className: cn("kz-drop-overlay", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "kz-drop-overlay-card", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-fg", children: label }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "text-sm text-fg-secondary", children: hint }) : null
+  ] }) });
+}
+export {
+  DropOverlay,
+  dragHasFiles,
+  splitDropped
+};
+//# sourceMappingURL=drop-overlay.js.map

package/dist/drop-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/drop-overlay/drop-overlay.tsx","../src/drop-overlay/files.ts"],"sourcesContent":["// Client (window listeners). The whole window is the drop target: while files are dragged over the page a full-window overlay\n// says so, and the dropped files go to `onFiles` (accepted, rejected). No dashed box in the page; the product keeps a real\n// file input behind its primary action for the keyboard and for phones. Motion: motion.css (« DROP OVERLAY »).\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type AcceptRule, dragHasFiles, splitDropped } from \"./files\";\n\nexport type DropOverlayProps = Omit<React.ComponentProps<\"div\">, \"children\" | \"onDrop\"> & {\n  /** What the overlay says (“Drop to check”) — passed translated. */\n  label: string;\n  /** One line under it (“PDF or text”). */\n  hint?: string;\n  /** The files dropped: the accepted ones, then the ones `accept` refused. */\n  onFiles: (accepted: File[], rejected: File[]) => void;\n  /** What is accepted: MIME types, families (`image/*`) or extensions (`.pdf`). */\n  accept?: readonly AcceptRule[];\n  /** Turns the window back into a plain page (while a modal is open, signed out). */\n  disabled?: boolean;\n};\n\n/** Drag a file anywhere on the page: a full-window overlay accepts it. */\nexport function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...props }: DropOverlayProps) {\n  const [active, setActive] = React.useState(false);\n  const depth = React.useRef(0);\n  const latest = React.useRef({ onFiles, accept });\n  React.useEffect(() => {\n    latest.current = { onFiles, accept };\n  });\n\n  React.useEffect(() => {\n    if (disabled) return;\n    const reset = () => {\n      depth.current = 0;\n      setActive(false);\n    };\n    const carrying = (event: Event) => dragHasFiles((event as DragEvent).dataTransfer);\n    const enter = (event: Event) => {\n      if (!carrying(event)) return;\n      depth.current += 1;\n      setActive(true);\n    };\n    const over = (event: Event) => {\n      if (carrying(event)) event.preventDefault();\n    };\n    const leave = (event: Event) => {\n      if (!carrying(event)) return;\n      depth.current = Math.max(0, depth.current - 1);\n      if (depth.current === 0) setActive(false);\n    };\n    const drop = (event: Event) => {\n      if (!carrying(event)) return;\n      event.preventDefault();\n      const files = Array.from((event as DragEvent).dataTransfer?.files ?? []);\n      reset();\n      const { accepted, rejected } = splitDropped(files, latest.current.accept);\n      latest.current.onFiles(accepted, rejected);\n    };\n    window.addEventListener(\"dragenter\", enter);\n    window.addEventListener(\"dragover\", over);\n    window.addEventListener(\"dragleave\", leave);\n    window.addEventListener(\"drop\", drop);\n    return () => {\n      window.removeEventListener(\"dragenter\", enter);\n      window.removeEventListener(\"dragover\", over);\n      window.removeEventListener(\"dragleave\", leave);\n      window.removeEventListener(\"drop\", drop);\n      reset();\n    };\n  }, [disabled]);\n\n  if (!active) return null;\n  return (\n    <div role=\"status\" data-state=\"open\" className={cn(\"kz-drop-overlay\", className)} {...props}>\n      <div className=\"kz-drop-overlay-card\">\n        <span className=\"text-lg font-semibold text-fg\">{label}</span>\n        {hint ? <span className=\"text-sm text-fg-secondary\">{hint}</span> : null}\n      </div>\n    </div>\n  );\n}\n","// Headless: what a drag carries and which of the dropped files a product accepts.\n\n/** True while the drag carries files (not text or a link): the only drag that should raise the overlay. */\nexport function dragHasFiles(transfer: { types?: readonly string[] | DOMStringList } | null | undefined): boolean {\n  return Array.from(transfer?.types ?? []).includes(\"Files\");\n}\n\n/** One accepted kind: a MIME type (`application/pdf`), a family (`image/*`) or an extension (`.pdf`). */\nexport type AcceptRule = string;\n\nfunction matches(file: Pick<File, \"name\" | \"type\">, rule: AcceptRule): boolean {\n  const wanted = rule.trim().toLowerCase();\n  if (wanted.startsWith(\".\")) return file.name.toLowerCase().endsWith(wanted);\n  if (wanted.endsWith(\"/*\")) return file.type.toLowerCase().startsWith(wanted.slice(0, -1));\n  return file.type.toLowerCase() === wanted;\n}\n\nexport interface DropSplit<F> {\n  accepted: F[];\n  rejected: F[];\n}\n\n/** Splits dropped files by `accept` (no rule: everything is accepted). */\nexport function splitDropped<F extends Pick<File, \"name\" | \"type\">>(files: readonly F[], accept?: readonly AcceptRule[]): DropSplit<F> {\n  if (!accept || accept.length === 0) return { accepted: [...files], rejected: [] };\n  const accepted: F[] = [];\n  const rejected: F[] = [];\n  for (const file of files) (accept.some((rule) => matches(file, rule)) ? accepted : rejected).push(file);\n  return { accepted, rejected };\n}\n"],"mappings":"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","names":[]}

package/dist/motion.css

@@ -768,3 +768,30 @@ svg[data-kz-icon="ExternalIcon"] {
 @media (prefers-reduced-motion: reduce) {
   ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
 }
+
+/* ── DROP OVERLAY ───────────────────────────────────────────────────────────────────────────────────────────────────
+   <DropOverlay> (@krizaka/ui/drop-overlay): while files are dragged over the window, a full-window veil and one centred
+   card arrive over the motion tokens. It never takes the pointer (the window keeps receiving the drop). Reduced motion:
+   it appears at once. */
+.kz-drop-overlay {
+  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none;
+  background: color-mix(in srgb, var(--kz-surface-0) 78%, transparent); backdrop-filter: blur(6px);
+  animation: kz-drop-in var(--kz-motion-duration-base) var(--kz-motion-ease-out) both;
+}
+.kz-drop-overlay-card {
+  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 2rem 2.5rem; text-align: center;
+  border: 2px solid var(--kz-accent); border-radius: 1rem; background: var(--kz-surface-1);
+  animation: kz-drop-card var(--kz-motion-duration-base) var(--kz-motion-ease-out) both;
+}
+@keyframes kz-drop-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes kz-drop-card { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .kz-drop-overlay, .kz-drop-overlay-card { animation: none; } }
+
+/* ── WORKING (upload queue, task tray) ──────────────────────────────────────────────────────────────────────────────
+   What is working moves, nothing else (.kz-working): a row's progress fill shimmers (text never animates: contrast stays AA). The tray rises in.
+   Reduced motion: no shimmer, no rise. */
+.kz-working { background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--kz-fg) 22%, transparent) 50%, transparent 70%); background-size: 200% 100%; background-repeat: no-repeat; animation: kz-shimmer 1.6s linear infinite; }
+@keyframes kz-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+.kz-tray { animation: kz-tray-in var(--kz-motion-duration-base) var(--kz-motion-ease-out) both; }
+@keyframes kz-tray-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .kz-working, .kz-tray { animation: none; background-image: none; } }

package/dist/nav-bar.d.ts

@@ -2,7 +2,7 @@ import * as tailwind_variants from 'tailwind-variants';
 import { NavigationMenu } from 'radix-ui';
 import * as React from 'react';
 import { LanguageSwitchProps } from './language-switch.js';
-import { S as SiteId, F as FamilyLabels } from './sites-inztN_Bv.js';
+import { S as SiteId, F as FamilyLabels } from './sites-DlR8jicc.js';
 
 declare const navBar: tailwind_variants.TVReturnType<{
     floating: {

package/dist/nav-bar.js

@@ -7,7 +7,7 @@ import {
   GitHubGlyph,
   familyLabels,
   sitesByGroup
-} from "./chunk-P4TTKYC4.js";
+} from "./chunk-4LYKBSOG.js";
 import {
   useSlidingIndicator
 } from "./chunk-4QN5YJ3D.js";

package/dist/settings-layout.d.ts

@@ -1,6 +1,28 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
+/** Where an inline save is: nothing to say, in flight, done (for a moment), or failed. */
+declare const SaveStatus: {
+    readonly Idle: "idle";
+    readonly Saving: "saving";
+    readonly Saved: "saved";
+    readonly Error: "error";
+};
+type SaveStatus = (typeof SaveStatus)[keyof typeof SaveStatus];
+/** How long « Saved » stays before the section goes quiet again. */
+declare const SAVED_VISIBLE_MS = 4000;
+interface SaveTracker {
+    status: SaveStatus;
+    /** The failure of the last try, for the message beside the button. */
+    error: unknown;
+    /** Runs a save: `saving`, then `saved` (back to `idle` after a moment) or `error`. Never rejects. */
+    track: (save: () => Promise<unknown>) => Promise<boolean>;
+    /** Clears the status (the form was edited again, or the save was undone). */
+    reset: () => void;
+}
+/** The status of one section's save. Feed it to `SettingsSection`'s `save.status`. */
+declare function useSaveStatus(): SaveTracker;
+
 declare const settingsLayout: tailwind_variants.TVReturnType<{
     variant: {
         card: {};
@@ -21,6 +43,18 @@ declare const settingsLayout: tailwind_variants.TVReturnType<{
     nav: string;
     navList: string;
     navLink: string;
+    sidebar: string;
+    sidebarList: string;
+    group: string;
+    groupLabel: string;
+    groupLink: string;
+    groupItems: string;
+    menu: string;
+    menuSummary: string;
+    menuChevron: string;
+    menuPanel: string;
+    navBadge: string;
+    header: string;
     content: string;
     section: string;
     sectionHead: string;
@@ -54,6 +88,18 @@ declare const settingsLayout: tailwind_variants.TVReturnType<{
     nav: string;
     navList: string;
     navLink: string;
+    sidebar: string;
+    sidebarList: string;
+    group: string;
+    groupLabel: string;
+    groupLink: string;
+    groupItems: string;
+    menu: string;
+    menuSummary: string;
+    menuChevron: string;
+    menuPanel: string;
+    navBadge: string;
+    header: string;
     content: string;
     section: string;
     sectionHead: string;
@@ -87,6 +133,18 @@ declare const settingsLayout: tailwind_variants.TVReturnType<{
     nav: string;
     navList: string;
     navLink: string;
+    sidebar: string;
+    sidebarList: string;
+    group: string;
+    groupLabel: string;
+    groupLink: string;
+    groupItems: string;
+    menu: string;
+    menuSummary: string;
+    menuChevron: string;
+    menuPanel: string;
+    navBadge: string;
+    header: string;
     content: string;
     section: string;
     sectionHead: string;
@@ -112,14 +170,27 @@ interface SettingsNavItem {
     icon?: React.ReactNode;
     /** The section shown now: `aria-current`. */
     current?: boolean;
+    /** A small count or status after the label (`3`, `New`). */
+    badge?: React.ReactNode;
+}
+interface SettingsNavGroup {
+    /** Its id. */
+    id: string;
+    /** The group's title (`Library`, `Money`). */
+    label: string;
+    items: readonly SettingsNavItem[];
 }
+/** Past this many sections a phone gets one menu instead of a strip of chips (« never more than about 5 items in a horizontal tab bar »). */
+declare const SETTINGS_CHIPS_MAX = 5;
 type SettingsLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
     /** The screen's title (`Settings`). */
     title?: React.ReactNode;
     /** One sentence under it. */
     description?: React.ReactNode;
-    /** The sections. */
-    nav: readonly SettingsNavItem[];
+    /** What the screen is about, above the sections: who the account is, with their actions. Replaces `title` and `description`. */
+    header?: React.ReactNode;
+    /** The sections, alone or in titled groups. */
+    nav: readonly SettingsNavItem[] | readonly SettingsNavGroup[];
     /** The navigation's accessible name (`Settings sections`). */
     navLabel: string;
     /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */
@@ -132,9 +203,42 @@ type SettingsLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
     /** The current section's forms (`SettingsSection`). */
     children: React.ReactNode;
 };
-/** A settings screen: sections on the left (chips on a phone), forms on the right. */
-declare function SettingsLayout({ title, description, nav, navLabel, linkAs: Link, variant, className, children, ...props }: SettingsLayoutProps): React.JSX.Element;
+/** A settings screen: sections on the left (chips on a phone, one menu past five), forms on the right. */
+declare function SettingsLayout({ title, description, header, nav, navLabel, linkAs: Link, variant, className, children, ...props }: SettingsLayoutProps): React.JSX.Element;
+interface SectionSaveLabels {
+    /** “Save”. */
+    save: string;
+    /** “Saving…”. */
+    saving: string;
+    /** “Saved”. */
+    saved: string;
+    /** What failed, one sentence (“Could not save. Try again.”). */
+    error: string;
+    /** “Undo” — only shown after a save, when `onUndo` is given. */
+    undo: string;
+    /** “Discard changes” — only shown while dirty, when `onDiscard` is given. */
+    discard: string;
+}
+/** The one save of a section: its dirty state, its status, its words. */
+interface SectionSave {
+    /** Whether a field differs from what is saved: the save is enabled only then. */
+    dirty: boolean;
+    /** Where the save is (`useSaveStatus().status`). */
+    status: SaveStatus;
+    /** Saves the section (the form's submit, Enter included). */
+    onSave: () => void;
+    /** Puts the previous values back after a save, optimistic update included. */
+    onUndo?: () => void;
+    /** Throws the edits away while dirty. */
+    onDiscard?: () => void;
+    labels: SectionSaveLabels;
+}
 type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /**
+     * One save for the whole section: the section becomes a form, the foot shows the Save (enabled while dirty), the
+     * result in a live region (saved, or the error as an alert) and an undo after a save. Replaces `footer`.
+     */
+    save?: SectionSave;
     /** The section's title: it names the region (and is its anchor's target when `id` is set). */
     title: React.ReactNode;
     /** What these settings change, in one sentence. */
@@ -146,11 +250,11 @@ type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title"> & {
      * @default "card"
      */
     variant?: "card" | "flat";
-    /** The fields (or, flat, the `SettingsRow`s). */
-    children: React.ReactNode;
+    /** The fields (or, flat, the `SettingsRow`s). A section of a title, a sentence and a foot action has none. */
+    children?: React.ReactNode;
 };
 /** A group of settings: a titled card with its fields and its own save, or flat rows under a title. */
-declare function SettingsSection({ title, description, footer, variant, id, className, children, ...props }: SettingsSectionProps): React.JSX.Element;
+declare function SettingsSection({ title, description, footer, save, variant, id, className, children, ...props }: SettingsSectionProps): React.JSX.Element;
 type SettingsRowProps = Omit<React.ComponentProps<"div">, "title"> & {
     /** What the setting is (`Username`). */
     label: React.ReactNode;
@@ -164,4 +268,4 @@ type SettingsRowProps = Omit<React.ComponentProps<"div">, "title"> & {
 /** One setting: its label and help on the left, its control or value on the right. Put rows in a flat `SettingsSection`. */
 declare function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps): React.JSX.Element;
 
-export { SettingsLayout, type SettingsLayoutProps, type SettingsNavItem, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, settingsLayout };
+export { SAVED_VISIBLE_MS, SETTINGS_CHIPS_MAX, SaveStatus, type SaveTracker, SettingsLayout, type SettingsLayoutProps, type SettingsNavGroup, type SettingsNavItem, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, settingsLayout, useSaveStatus };