@imfusion/web-ui 0.11.1-dev.42.ge966e634 → 0.11.1-dev.45.gf7b49f57

package/CHANGELOG.md

@@ -7,6 +7,13 @@
 - `Progress` is a new bar for the completion of a running task, adapted from Base UI. `size` runs from `xs` (a 2px hairline) to
   `lg`, `layout` is `stacked` or `inline`, `value={null}` sweeps while the amount is unknown, and the fill turns positive at the
   maximum. [Progress](src/components/progress/progress.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `FileDropZone` is a new zone that collects files or whole folders by drop or through its `Trigger` buttons, in sizes `sm`,
+  `md` and `lg`. It reports accepted and rejected files through `onFilesAdded`, scans folders recursively, and reads the
+  result out to screen readers. `FileDropZone.Upload` composes the zone with a file list, a skipped-files note, per-file and
+  overall `Progress`, and an upload button; the app owns the items and the upload, and `onRetry` adds a Retry button to
+  failed rows. A single-file zone shows its file with `FileDropZone.File` and `FileDropZone.Remove`, and the glyph changes to a
+  page.
+  [FileDropZone](src/components/file-drop-zone/file-drop-zone.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `TabNav` is a new row of links to routes with a bar under the current one, in the underline look of `Tabs`. `TabNav.Item`
   renders an `<a>`, takes a router link as `render`, and sets `aria-current="page"` from `current`.
   [TabNav](src/components/tab-nav/tab-nav.stories.tsx#InAProjectHeader) — Nikolaus Brunner <brunner@imfusion.com>
@@ -112,6 +119,7 @@
 - `npm run dev` starts Storybook on the next free port again while another checkout's Storybook runs. — Nikolaus Brunner
   <brunner@imfusion.com>
 - A Storybook sidebar row's status icon stays in place on hover. — Nikolaus Brunner <brunner@imfusion.com>
+- `npm run ci:status` lists queued and running builds beside finished ones. — Nikolaus Brunner <brunner@imfusion.com>
 - Components — Nikolaus Brunner <brunner@imfusion.com>
   - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
   - A `Popover.Trigger` rendered as another component keeps that component's styles, so `render={<Button />}` looks like a Button.

package/dist/{code-BXlEW54h.js → code-BX1Humcy.js}

@@ -5,8 +5,8 @@ import { a, i as o, n as s, o as c, s as l } from "./scroll-area-CUo1NBaW.js";
 import { cx as u } from "class-variance-authority";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { useCallback as m, useEffect as h, useRef as g, useState as _ } from "react";
-import { mergeProps as v } from "@base-ui/react/merge-props";
-import { useRender as y } from "@base-ui/react/use-render";
+import { useRender as v } from "@base-ui/react/use-render";
+import { mergeProps as y } from "@base-ui/react/merge-props";
 //#region src/hooks/use-clipboard.ts
 function b({ timeout: e = 1500 } = {}) {
 	let [t, n] = _(!1), r = g(void 0);
@@ -35,11 +35,11 @@ var x = {
 });
 function C({ copyable: e = !1, children: i, render: a, ...o }) {
 	let { copied: s, copy: c } = b(), l = g(null), u = s ? r : t;
-	return y({
+	return v({
 		defaultTagName: "code",
 		render: a,
 		props: {
-			...v(o, {
+			...y(o, {
 				className: x.inline,
 				children: /* @__PURE__ */ p(d, { children: [
 					/* @__PURE__ */ f("span", {
@@ -72,11 +72,11 @@ function w({ kind: e = "external", ...t }) {
 		target: "_blank",
 		rel: "noreferrer"
 	} : {};
-	return y({
+	return v({
 		defaultTagName: "a",
 		render: t.render,
 		props: {
-			...v(n, t, {
+			...y(n, t, {
 				className: u(x.inline, x.inlineLink, t.className),
 				children: t.children
 			}),

package/dist/components/file-drop-zone/collect-files.d.ts

@@ -0,0 +1,56 @@
+export interface FileDropZoneItem {
+    file: File;
+    /** Folder-relative path with the root folder's name first (`"scans/s1.nii.gz"`), or the file name for a loose file. */
+    path: string;
+}
+export interface CollectResult {
+    accepted: FileDropZoneItem[];
+    rejected: FileDropZoneItem[];
+}
+interface CollectOptions {
+    accept?: string[];
+    directory: boolean;
+    multiple: boolean;
+}
+/** The part of a `FileSystemEntry` the walk reads. */
+export interface EntryLike {
+    readonly isFile: boolean;
+    readonly isDirectory: boolean;
+    readonly name: string;
+    readonly fullPath: string;
+}
+/** What the synchronous part of a `drop` handler can read; the drag data store is gone after the first `await`. */
+interface DropSource {
+    entry: EntryLike | null;
+    file: File | null;
+}
+/** The part of a `DataTransfer` that `snapshotDrop` reads. */
+interface DropData {
+    items: ArrayLike<{
+        kind: string;
+        webkitGetAsEntry: () => EntryLike | null;
+        getAsFile: () => File | null;
+    }>;
+    files: ArrayLike<File>;
+}
+export type DragState = "idle" | "accepting" | "rejecting";
+export declare function matchesAccept(file: File, accept?: string[]): boolean;
+/**
+ * A drag shows each item's MIME type but never its name, so only a type that is known to come from other extensions
+ * than the accepted ones is judged `"rejecting"`. A type missing from the table, an empty one, or an empty item list
+ * (Safari lists no items during a drag) stays `"accepting"`.
+ */
+export declare function classifyDrag(items: ArrayLike<{
+    kind: string;
+    type: string;
+}>, accept?: string[]): DragState;
+/** Reads every `webkitGetAsEntry()` and `getAsFile()` of a drop. Call it synchronously inside the `drop` handler. */
+export declare function snapshotDrop(dataTransfer: DropData): DropSource[];
+export declare function collectFromDrop(sources: DropSource[], options: CollectOptions): Promise<CollectResult>;
+/** Files from a picker. A folder pick carries `webkitRelativePath`, which includes the chosen folder's name. */
+export declare function collectFromFileList(files: File[], options: CollectOptions & {
+    fromFolder: boolean;
+}): CollectResult;
+/** Names the accepted types for copy: `[".png", ".jpg", ".jpeg", ".webp"]` becomes "PNG, JPEG or WebP". Empty without a list. */
+export declare function describeAccept(accept?: string[]): string;
+export {};

package/dist/components/file-drop-zone/file-drop-zone-context.d.ts

@@ -0,0 +1,15 @@
+export type FileDropZoneSize = "sm" | "md" | "lg";
+interface FileDropZoneContextValue {
+    size: FileDropZoneSize;
+    disabled: boolean;
+    directory: boolean;
+    /** Whether a `FileDropZone.File` is mounted. */
+    filled: boolean;
+    openPicker: (mode: "files" | "folder") => void;
+    setFilled: (filled: boolean) => void;
+    registerTitle: (id: string | null) => void;
+    registerDescription: (id: string | null) => void;
+}
+/** What `FileDropZone.Root` hands to its parts; a part outside a Root reads the inert defaults. */
+export declare const FileDropZoneContext: import('react').Context<FileDropZoneContextValue>;
+export {};

package/dist/components/file-drop-zone/file-drop-zone.d.ts

@@ -0,0 +1,185 @@
+import { VariantProps } from 'class-variance-authority';
+import { Button } from '../button';
+import { Icon, IconComponent } from '../icon';
+import { IconButton } from '../icon-button';
+import { DragState, FileDropZoneItem } from './collect-files';
+declare const root: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {
+    /** Accepted file types: extensions (`".nii.gz"`), MIME types (`"image/png"`) or wildcards (`"image/*"`). Any file when empty. */
+    accept?: string[];
+    /** Whether more than one file can be added at once. With `false`, only the first accepted file is kept. */
+    multiple?: boolean;
+    /** Whether folders can be dropped or picked. They are scanned recursively. Needs `multiple`. */
+    directory?: boolean;
+    /** Blocks dropping and picking; the Triggers follow. */
+    disabled?: boolean;
+    /** Marks the zone as holding a problem. The message belongs in `Field.Error` or a `Callout`. */
+    invalid?: boolean;
+    /** Called once per drop or pick with the files that match `accept` and those that do not. */
+    onFilesAdded?: (accepted: FileDropZoneItem[], rejected: FileDropZoneItem[]) => void;
+    /**
+     * Called when a drag over the zone starts, changes or ends. `"rejecting"` is reported only for a dragged type the
+     * browser exposes and `accept` cannot produce; names and counts are unknown until the drop.
+     */
+    onDragStateChange?: (state: DragState) => void;
+    /** Words for the screen reader status after each drop or pick. Return `""` to stay silent. */
+    formatStatus?: (accepted: number, rejected: number) => string;
+};
+/**
+ * FileDropZone.Root — a group that collects files and folders by drop or by its Triggers and reports them through
+ * `onFilesAdded`. The Triggers are the keyboard and screen reader path; dropping is an enhancement.
+ */
+export declare function Root({ accept, multiple, directory, size, disabled, invalid, onFilesAdded, onDragStateChange, formatStatus, children, className, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onDragEnter, onDragOver, onDragLeave, onDrop, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** FileDropZone.Title — names the group. */
+export declare function Title(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare namespace Title {
+    var displayName: string;
+}
+/** FileDropZone.Description — describes the group, such as the accepted file types. */
+export declare function Description(props: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+export declare namespace Description {
+    var displayName: string;
+}
+/** FileDropZone.Actions — the row of Triggers. */
+export declare function Actions(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare namespace Actions {
+    var displayName: string;
+}
+type FileProps = React.ComponentProps<"div"> & {
+    /** The single file the zone holds. Its name shows middle-truncated, with the last 12 characters kept, and its size in mono. */
+    file: globalThis.File;
+};
+/**
+ * FileDropZone.File — the file a single-file zone holds, in place of `Title` and `Description`. It names the group,
+ * describes it with the size, and sets `data-filled` on the Root while mounted. Long names truncate in the middle so the
+ * extension stays readable; the full name is the `title`.
+ */
+export declare function File({ file, className, ...props }: FileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace File {
+    var displayName: string;
+}
+type IconButtonProps = React.ComponentProps<typeof IconButton>;
+type RemoveProps = Omit<IconButtonProps, "glyph" | "label"> & {
+    /** Accessible name of the button. Defaults to "Remove file". */
+    label?: string;
+    /** Defaults to `"ghost"` in an `sm` zone and `"outline"` otherwise. */
+    variant?: IconButtonProps["variant"];
+    /** Defaults to `"md"` in an `lg` zone and `"sm"` otherwise. */
+    size?: IconButtonProps["size"];
+    /** Defaults to the zone's `disabled`. */
+    disabled?: IconButtonProps["disabled"];
+};
+/** FileDropZone.Remove — an icon button that empties a filled zone. It carries no behavior of its own: `onClick` clears the consumer's state. */
+export declare function Remove({ label, variant, size, disabled, ...props }: RemoveProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Remove {
+    var displayName: string;
+}
+type GlyphProps = Omit<React.ComponentProps<typeof Icon>, "glyph"> & {
+    /** Icon component imported from `@imfusion/web-ui/icons`. Defaults to `UploadSquare`, or `Page` while a File is mounted. */
+    glyph?: IconComponent;
+};
+/** FileDropZone.Glyph — the large icon of the `lg` zone: the upload icon, or a page while a `FileDropZone.File` is mounted. It renders nothing in `sm` and `md`. */
+export declare function Glyph({ glyph, size, ...props }: GlyphProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Glyph {
+    var displayName: string;
+}
+type ButtonProps = React.ComponentProps<typeof Button>;
+type TriggerProps = ButtonProps & {
+    /** `"files"` opens the file picker, `"folder"` the folder picker. A folder Trigger needs `directory` on the Root. */
+    mode?: "files" | "folder";
+    /** Defaults to `"ghost"` in an `sm` zone and `"outline"` otherwise. */
+    variant?: ButtonProps["variant"];
+    /** Defaults to `"md"` in an `lg` zone and `"sm"` otherwise. */
+    size?: ButtonProps["size"];
+    /** Defaults to the zone's `disabled`. */
+    disabled?: ButtonProps["disabled"];
+};
+/** FileDropZone.Trigger — a Button that opens the picker. */
+export declare function Trigger({ mode, variant, size, disabled, onClick, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Trigger {
+    var displayName: string;
+}
+export interface FileDropZoneUploadItem {
+    /** Identifies the row in `onRemove`. */
+    id: string;
+    file: globalThis.File;
+    /** Shown instead of the file name, such as a folder-relative path. */
+    path?: string;
+    /** `"queued"` and `"error"` rows list the file with a Remove button; `"uploading"` and `"done"` rows show a progress bar. */
+    status: "queued" | "uploading" | "done" | "error";
+    /** From 0 to 100 while `"uploading"`; `null` while the amount is unknown. */
+    progress?: number | null;
+}
+interface UploadLabels {
+    chooseFiles: string;
+    chooseFolder: string;
+    /** Text of the upload button, from the number of queued items. */
+    upload: (queued: number) => string;
+    /** Text beside "Start over" once the upload has finished, from the number of items done and failed. */
+    uploaded: (done: number, failed: number) => string;
+    overall: string;
+    startOver: string;
+    uploading: string;
+    done: string;
+    failed: string;
+    waiting: string;
+    /** Accessible name of the file list. */
+    files: string;
+    dropToAdd: string;
+    cantAdd: string;
+    releaseToAdd: (multiple: boolean) => string;
+    /** Hint while a drag the zone cannot accept is over it, from the named accepted types ("" without `accept`). */
+    addTypes: (types: string) => string;
+    remove: (name: string) => string;
+    retry: string;
+    /** Accessible name of a row's Retry button. */
+    retryName: (name: string) => string;
+    /** The note under the zone. `types` is set only when every skipped file failed the `accept` check. */
+    skipped: (info: {
+        count: number;
+        paths: string[];
+        types: string;
+    }) => string;
+    /** Screen reader announcement when the upload starts. */
+    uploadingStatus: (count: number) => string;
+}
+type UploadProps = Omit<RootProps, "children" | "directory" | "title" | "onReset"> & {
+    /** The files to list, in order. The app owns this list and each item's `status` and `progress`. */
+    items: FileDropZoneUploadItem[];
+    /** Called with the `id` of the row whose Remove button was pressed. */
+    onRemove: (id: string) => void;
+    /** Called when the upload button is pressed. The app starts the upload and moves the queued items to `"uploading"`. */
+    onUpload: () => void;
+    /**
+     * Called with the `id` of a failed row whose Retry button was pressed. The app sends the file again and moves the row
+     * back to `"uploading"`. Failed rows show Retry only when this is set.
+     */
+    onRetry?: (id: string) => void;
+    /** Called by "Start over" once every item is done or failed. The button shows only when this is set. */
+    onReset?: () => void;
+    /** Heading of the card around the zone and the list. */
+    heading?: React.ReactNode;
+    /** Title of the zone. Defaults to "Drop files or a folder", or "Drop a file" without `multiple`. */
+    title?: React.ReactNode;
+    /** Text under the zone title. Defaults to the accepted types, such as "PNG, JPEG or WebP", and a note that folders are scanned. */
+    description?: React.ReactNode;
+    /** Whether the zone takes whole folders, with a "Choose folder" button. Needs `multiple`. */
+    folders?: boolean;
+    /** Replaces any of the English texts: the button texts, the drag copy, the row states, the skipped note, the finished text. */
+    labels?: Partial<UploadLabels>;
+};
+/**
+ * FileDropZone.Upload — the upload sequence in one piece: a zone, the list of collected files to check and remove, a
+ * `Progress` per row and overall once the upload runs, and the upload button. It is controlled and uploads nothing: the app
+ * keeps `items`, performs the upload, and reports each item's `status` and `progress`. Other props go to the zone.
+ */
+export declare function Upload({ items, onRemove, onUpload, onRetry, onReset, heading, title, description, folders, labels, size, multiple, accept, disabled, onFilesAdded, onDragStateChange, ...zoneProps }: UploadProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Upload {
+    var displayName: string;
+}
+export {};

package/dist/components/file-drop-zone/file-drop-zone.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const fileDropZoneMeta: ComponentMeta;

package/dist/components/file-drop-zone/format-bytes.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Formats a size such as "3.1 MB", in the unit that suits `scale` (the size itself by default). `digits` sets the decimals;
+ * by default one below ten units and none above. Bytes have none.
+ */
+export declare function formatBytes(bytes: number, scale?: number, digits?: number): string;

package/dist/components/file-drop-zone/index.d.ts

@@ -0,0 +1,4 @@
+export * as FileDropZone from './file-drop-zone';
+export type { FileDropZoneItem } from './collect-files';
+export type { FileDropZoneUploadItem } from './file-drop-zone';
+export { fileDropZoneMeta } from './file-drop-zone.meta';

package/dist/components/logo/logo.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const logo: (props?: ({
-    size?: "sm" | "md" | "lg" | "hero" | "xl" | "xs" | "fit" | null | undefined;
+    size?: "sm" | "md" | "lg" | "hero" | "xs" | "xl" | "fit" | null | undefined;
     variant?: "inherit" | "main" | "support" | "minor" | "brand" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.ComponentProps<"span">, "children"> & VariantProps<typeof logo> & {

package/dist/components/toast/toast.d.ts

@@ -5,7 +5,7 @@ declare const toastViewport: (props?: ({
     width?: "default" | "content" | "wide" | "compact" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const toastRoot: (props?: ({
-    variant?: "warning" | "info" | "neutral" | "success" | "error" | null | undefined;
+    variant?: "warning" | "info" | "error" | "neutral" | "success" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Toast.useToastManager — reads the queue and the add/close/update/promise

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { ColorSchemeToggle, colorSchemeToggleMeta } from './components/color-sch
 export { Combobox, comboboxMeta } from './components/combobox';
 export { Field, fieldMeta } from './components/field';
 export { Fieldset, fieldsetMeta } from './components/fieldset';
+export { FileDropZone, fileDropZoneMeta } from './components/file-drop-zone';
+export type { FileDropZoneItem, FileDropZoneUploadItem } from './components/file-drop-zone';
 export { Input, inputMeta } from './components/input';
 export { NumberField, numberFieldMeta } from './components/number-field';
 export { Select, selectMeta } from './components/select';