@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/image-viewer.js

@@ -0,0 +1,411 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { ChevronLeft, ChevronRight, Copy, Download, ImageOff, Minus, Plus } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useFormatters, useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { KitMotion } from "../lib/kit-motion.js";
+import { spring } from "../lib/motion.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { useLatest } from "../lib/use-latest.js";
+import { Button, IconButton } from "./button.js";
+import { DialogBackdrop, DialogCloseButton } from "./dialog.js";
+import { DrawnCheck } from "./drawn-check.js";
+import { Spinner } from "./spinner.js";
+import { Tooltip } from "./tooltip.js";
+/** How far the viewer zooms in: eight screen pixels to an image pixel. */
+const MAX_SCALE = 8;
+/** One step of the zoom buttons and keys. */
+const STEP = 1.25;
+/** How much one pixel of wheel travel zooms (a trackpad pinch arrives as a ctrl+wheel). */
+const WHEEL_ZOOM = 0.002;
+const FIT = { zoom: "fit", x: 0, y: 0 };
+/** Save's name for an image without one: its type's extension, read from inline data. */
+function fallbackName(src) {
+    const type = /^data:image\/([a-z0-9.+-]+)[;,]/iu.exec(src)?.[1]?.toLowerCase();
+    const extension = type === undefined ? "png" : type === "jpeg" ? "jpg" : type.replace(/\+xml$/u, "");
+    return `image.${extension}`;
+}
+/** The image as a PNG, the type every clipboard takes, drawn from the picture already on screen. */
+function pngOf(img) {
+    const canvas = document.createElement("canvas");
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    canvas.getContext("2d")?.drawImage(img, 0, 0);
+    return new Promise((resolve, reject) => canvas.toBlob((blob) => (blob === null ? reject(new Error("no image data")) : resolve(blob)), "image/png"));
+}
+/** Another site's image: a link to it can't download, it navigates. */
+const isRemote = (src) => /^https?:/iu.test(src);
+function save(src, name) {
+    const link = document.createElement("a");
+    link.href = src;
+    link.download = name ?? fallbackName(src);
+    link.click();
+}
+const NO_PICTURE = { kind: "failed" };
+/** The image's picture, loading it when it has only `load`; undefined while it does. */
+function usePicture(image) {
+    const [loaded, setLoaded] = useState();
+    useEffect(() => {
+        if (image === undefined || image.src !== undefined || image.load === undefined)
+            return undefined;
+        let live = true;
+        const { key, load } = image;
+        const get = async () => {
+            let picture = NO_PICTURE;
+            try {
+                const src = await load();
+                if (src !== undefined)
+                    picture = { kind: "ready", src };
+            }
+            catch {
+                // It couldn't be had: the viewer says so.
+            }
+            if (live)
+                setLoaded({ key, picture });
+        };
+        void get();
+        return () => {
+            live = false;
+        };
+    }, [image]);
+    if (image === undefined)
+        return undefined;
+    if (image.src !== undefined)
+        return { kind: "ready", src: image.src };
+    if (image.load === undefined)
+        return NO_PICTURE;
+    return loaded?.key === image.key ? loaded.picture : undefined;
+}
+/** Keeps the image over the window: centred along an axis where it's smaller, edge to edge where larger. */
+const limit = (value, max) => Math.min(max, Math.max(-max, value));
+function clamp(view, scale, natural, stage) {
+    const room = (image, window) => Math.max(0, (image * scale - window) / 2);
+    return {
+        ...view,
+        x: limit(view.x, room(natural.width, stage.width)),
+        y: limit(view.y, room(natural.height, stage.height)),
+    };
+}
+function useSize(element) {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useLayoutEffect(() => {
+        if (element === null)
+            return undefined;
+        const observer = new ResizeObserver(([entry]) => {
+            if (entry !== undefined)
+                setSize({ width: entry.contentRect.width, height: entry.contentRect.height });
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element]);
+    return size;
+}
+/** Copy: the image as a PNG on the clipboard, and how it went on the button itself. */
+function CopyImageButton({ image, disabled, }) {
+    const t = useUiStrings().imageViewer;
+    const [copied, setCopied] = useState();
+    useEffect(() => {
+        if (copied === undefined)
+            return undefined;
+        const timer = setTimeout(() => setCopied(undefined), COPY_FEEDBACK_MS);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    const copy = () => {
+        const img = image.current;
+        if (img === null)
+            return;
+        // The item takes the promise, so the write keeps the click's permission while the PNG is drawn.
+        navigator.clipboard
+            .write([new ClipboardItem({ "image/png": pngOf(img) })])
+            .then(() => setCopied("copied"))
+            .catch(() => setCopied("failed"));
+    };
+    const label = copied === "copied" ? t.copied : t.copy;
+    return (_jsxs(_Fragment, { children: [copied === "failed" && (_jsx("span", { role: "alert", className: "shrink-0 px-1 text-xs text-danger-fg", children: t.copyFailed })), _jsx(Tooltip, { content: label, children: _jsxs(IconButton, { "aria-label": label, size: "sm", disabled: disabled, onClick: copy, children: [_jsx(KitMotion, { children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(m.span, { initial: { opacity: 0, scale: 0.6 }, animate: { opacity: 1, scale: 1, transition: spring.snappy }, exit: { opacity: 0, scale: 0.6, transition: { duration: 0.08 } }, className: "grid place-items-center", children: copied === "copied" ? _jsx(DrawnCheck, { className: "text-fg" }) : _jsx(Copy, {}) }, copied === "copied" ? "check" : "copy") }) }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied === "copied" ? t.copied : "" })] }) })] }));
+}
+/** The stage's picture: the image (placed by `style`), on its way, or why there is none. */
+function StagePicture({ picture, alt, imgRef, onSize, onError, style, }) {
+    const t = useUiStrings().imageViewer;
+    if (picture === undefined)
+        return (_jsx("span", { role: "status", "aria-label": t.loading, className: "absolute inset-0 grid place-items-center", children: _jsx(Spinner, { size: "md", className: "text-fg-muted" }) }));
+    if (picture.kind === "failed")
+        return (_jsxs("p", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 text-sm text-fg-muted", children: [_jsx(ImageOff, { "aria-hidden": true, className: "size-6 text-fg-subtle" }), t.failed] }));
+    return (_jsx("img", { ref: imgRef, src: picture.src, alt: alt, draggable: false, onLoad: (event) => onSize({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight }), onError: onError, style: style, className: "absolute start-1/2 top-1/2 max-w-none origin-center" }, picture.src));
+}
+/** Previous and next, on the stage's sides: in reading order, so mirrored in a right-to-left language. */
+function StepButtons({ rtl, onStep }) {
+    const t = useUiStrings().imageViewer;
+    const Previous = rtl ? ChevronRight : ChevronLeft;
+    const Next = rtl ? ChevronLeft : ChevronRight;
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": t.previous, "aria-keyshortcuts": rtl ? "ArrowRight" : "ArrowLeft", variant: "secondary", onClick: () => onStep(-1), className: "absolute start-3 top-1/2 -translate-y-1/2", children: _jsx(Previous, {}) }), _jsx(IconButton, { "aria-label": t.next, "aria-keyshortcuts": rtl ? "ArrowLeft" : "ArrowRight", variant: "secondary", onClick: () => onStep(1), className: "absolute end-3 top-1/2 -translate-y-1/2", children: _jsx(Next, {}) })] }));
+}
+/** How long Copy shows how it went before it's Copy again. */
+const COPY_FEEDBACK_MS = 1600;
+/**
+ * An image full size over the page: the whole image in the window at first, then zoom (the wheel, a
+ * pinch, + and −, a double click) and drag to look around; ← and → step through the other images in
+ * reading order (so in a right-to-left language → goes back), Esc closes. Copy puts it on the
+ * clipboard as a PNG and says so on the button; Save downloads it. Zoom and panning move the picture
+ * by `transform` only.
+ */
+export function ImageViewer({ images, index, onIndexChange, onClose, returnFocus }) {
+    const container = usePortalContainer();
+    const t = useUiStrings().imageViewer;
+    const formatters = useFormatters();
+    const rtl = useDirection() === "rtl";
+    const titleId = useId();
+    const image = images[index];
+    // The stage mounts with the dialog's portal, after this component: a state, so its effects follow it.
+    const [stageElement, setStageElement] = useState(null);
+    const imgRef = useRef(null);
+    const stage = useSize(stageElement);
+    const [natural, setNatural] = useState(undefined);
+    const [failed, setFailed] = useState(false);
+    const [view, setView] = useState(FIT);
+    const [dragging, setDragging] = useState(false);
+    const picture = usePicture(image);
+    const src = picture?.kind === "ready" ? picture.src : undefined;
+    // Another image: its own size, from the whole of it again.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: resets on a new image, which `src` names
+    useEffect(() => {
+        setNatural(undefined);
+        setFailed(false);
+        setView(FIT);
+    }, [src]);
+    const fitScale = natural === undefined || stage.width === 0
+        ? 1
+        : Math.min(1, stage.width / natural.width, stage.height / natural.height);
+    const scale = view.zoom === "fit" ? fitScale : view.zoom;
+    const minScale = Math.min(fitScale, 1);
+    /** Zooms to `next`, keeping the point `at` (from the stage's centre) where it is. */
+    const zoomTo = useCallback((next, at = { x: 0, y: 0 }) => {
+        if (natural === undefined)
+            return;
+        setView((current) => {
+            const from = current.zoom === "fit" ? fitScale : current.zoom;
+            const to = Math.min(MAX_SCALE, Math.max(minScale, next));
+            const ratio = to / from;
+            const moved = {
+                zoom: to,
+                x: at.x - (at.x - current.x) * ratio,
+                y: at.y - (at.y - current.y) * ratio,
+            };
+            return to === fitScale ? FIT : clamp(moved, to, natural, stage);
+        });
+    }, [natural, fitScale, minScale, stage]);
+    const toggle = () => (view.zoom === "fit" ? zoomTo(1) : setView(FIT));
+    const go = useCallback((step) => {
+        if (images.length < 2)
+            return;
+        onIndexChange((index + step + images.length) % images.length);
+    }, [images.length, index, onIndexChange]);
+    /** The viewer's keys, wherever the focus is in it: ← → step through the images, + − 0 zoom. */
+    const onKeyDown = (event) => {
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        const keys = {
+            ArrowLeft: () => go(rtl ? 1 : -1),
+            ArrowRight: () => go(rtl ? -1 : 1),
+            "+": () => zoomTo(scale * STEP),
+            "=": () => zoomTo(scale * STEP),
+            "-": () => zoomTo(scale / STEP),
+            "0": () => setView(FIT),
+        };
+        const action = keys[event.key];
+        if (action === undefined)
+            return;
+        event.preventDefault();
+        action();
+    };
+    const pannable = natural !== undefined && scale > fitScale;
+    // The stage's own listeners read the newest view through this, so they're added once per stage.
+    const live = useRef({ natural, scale, fitScale, pannable, stage, zoomTo });
+    useLayoutEffect(() => {
+        live.current = { natural, scale, fitScale, pannable, stage, zoomTo };
+    });
+    // Native listeners: a wheel that zooms must cancel the page's scroll (React's wheel is passive),
+    // and WebKit's trackpad pinch arrives as gesture events, not ctrl+wheel.
+    useEffect(() => {
+        if (stageElement === null)
+            return undefined;
+        const element = stageElement;
+        const centre = (event) => {
+            const box = element.getBoundingClientRect();
+            return { x: event.clientX - box.left - box.width / 2, y: event.clientY - box.top - box.height / 2 };
+        };
+        const pan = (dx, dy) => {
+            const { natural: size, scale: now, stage: room } = live.current;
+            if (size === undefined)
+                return;
+            setView((current) => clamp({ ...current, x: current.x + dx, y: current.y + dy }, now, size, room));
+        };
+        const onWheel = (event) => {
+            const { natural: size, scale: now, pannable: canPan, zoomTo: zoom } = live.current;
+            if (size === undefined)
+                return;
+            event.preventDefault();
+            if (event.ctrlKey || !canPan)
+                zoom(now * Math.exp(-event.deltaY * WHEEL_ZOOM), centre(event));
+            else
+                pan(-event.deltaX, -event.deltaY);
+        };
+        let drag;
+        const onDown = (event) => {
+            if (!live.current.pannable || event.button !== 0)
+                return;
+            element.setPointerCapture(event.pointerId);
+            drag = { id: event.pointerId, x: event.clientX, y: event.clientY };
+            setDragging(true);
+        };
+        const onMove = (event) => {
+            if (drag === undefined || drag.id !== event.pointerId)
+                return;
+            pan(event.clientX - drag.x, event.clientY - drag.y);
+            drag.x = event.clientX;
+            drag.y = event.clientY;
+        };
+        const onUp = () => {
+            drag = undefined;
+            setDragging(false);
+        };
+        const onDouble = (event) => {
+            const { scale: now, fitScale: whole, zoomTo: zoom } = live.current;
+            if (now > whole)
+                setView(FIT);
+            else
+                zoom(1, centre(event));
+        };
+        let pinchFrom = 1;
+        const onGestureStart = (event) => {
+            event.preventDefault();
+            pinchFrom = live.current.scale;
+        };
+        const onGesture = (event) => {
+            event.preventDefault();
+            const factor = Reflect.get(event, "scale");
+            if (typeof factor === "number")
+                live.current.zoomTo(pinchFrom * factor);
+        };
+        element.addEventListener("wheel", onWheel, { passive: false });
+        element.addEventListener("pointerdown", onDown);
+        element.addEventListener("pointermove", onMove);
+        element.addEventListener("pointerup", onUp);
+        element.addEventListener("pointercancel", onUp);
+        element.addEventListener("dblclick", onDouble);
+        element.addEventListener("gesturestart", onGestureStart);
+        element.addEventListener("gesturechange", onGesture);
+        return () => {
+            element.removeEventListener("wheel", onWheel);
+            element.removeEventListener("pointerdown", onDown);
+            element.removeEventListener("pointermove", onMove);
+            element.removeEventListener("pointerup", onUp);
+            element.removeEventListener("pointercancel", onUp);
+            element.removeEventListener("dblclick", onDouble);
+            element.removeEventListener("gesturestart", onGestureStart);
+            element.removeEventListener("gesturechange", onGesture);
+        };
+    }, [stageElement]);
+    if (image === undefined)
+        return null;
+    const broken = failed || picture?.kind === "failed";
+    const alt = image.alt === "" ? t.untitled : image.alt;
+    const percent = formatters.percent(Math.round(scale * 100));
+    const zoomLabel = view.zoom === "fit" ? t.actualSize : t.fit;
+    return (_jsx(BaseDialog.Root, { open: true, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, children: _jsxs(BaseDialog.Portal, { container: container, children: [_jsx(DialogBackdrop, {}), _jsxs(BaseDialog.Popup, { "data-slot": "image-viewer", "aria-labelledby": titleId, 
+                    // Before the controls inside: a focused button's own arrow handling must not take them.
+                    onKeyDownCapture: onKeyDown, 
+                    // Back to the thumbnail that opened it, while it's on screen; else wherever the page puts it.
+                    finalFocus: () => {
+                        const opener = returnFocus?.();
+                        return opener?.isConnected === true ? opener : true;
+                    }, className: cn("fixed inset-3 z-(--z-overlay) flex flex-col overflow-hidden rounded-2xl border border-border-subtle bg-surface-overlay text-fg outline-none sm:inset-6", "[box-shadow:var(--shadow-xl),var(--shadow-inset-edge)]", "transition-[opacity,scale] duration-(--duration-base) ease-(--ease-out)", "data-starting-style:scale-[0.98] data-starting-style:opacity-0", "data-ending-style:opacity-0 data-ending-style:duration-(--duration-fast)", "motion-reduce:data-starting-style:scale-100"), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1 border-b border-border-subtle py-2 ps-4 pe-2", children: [_jsx(BaseDialog.Title, { id: titleId, className: "min-w-0 flex-1 truncate text-sm font-medium text-fg", title: alt, children: alt }), images.length > 1 && (_jsx("span", { "aria-live": "polite", className: "shrink-0 px-2 text-xs text-fg-subtle tabular", children: t.position({ index: index + 1, total: images.length }) })), _jsx(Tooltip, { content: t.zoomOut, children: _jsx(IconButton, { "aria-label": t.zoomOut, "aria-keyshortcuts": "-", size: "sm", disabled: natural === undefined || scale <= minScale, onClick: () => zoomTo(scale / STEP), children: _jsx(Minus, {}) }) }), _jsx(Tooltip, { content: zoomLabel, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `${zoomLabel} (${percent})`, "aria-keyshortcuts": view.zoom === "fit" ? undefined : "0", disabled: natural === undefined, onClick: toggle, className: "min-w-14 tabular", children: percent }) }), _jsx(Tooltip, { content: t.zoomIn, children: _jsx(IconButton, { "aria-label": t.zoomIn, "aria-keyshortcuts": "+", size: "sm", disabled: natural === undefined || scale >= MAX_SCALE, onClick: () => zoomTo(scale * STEP), children: _jsx(Plus, {}) }) }), _jsx("span", { "aria-hidden": true, className: "mx-1 h-4 w-px bg-border-subtle" }), _jsx(CopyImageButton, { image: imgRef, disabled: natural === undefined }), _jsx(Tooltip, { content: t.save, children: _jsx(IconButton, { "aria-label": t.save, size: "sm", disabled: broken || src === undefined || isRemote(src), onClick: () => src !== undefined && save(src, image.name), children: _jsx(Download, {}) }) }), _jsx(DialogCloseButton, { className: "static" })] }), _jsxs("div", { ref: setStageElement, "data-slot": "image-viewer-stage", className: cn("relative min-h-0 flex-1 touch-none overflow-hidden bg-bg-subtle select-none", pannable && (dragging ? "cursor-grabbing" : "cursor-grab")), children: [_jsx(StagePicture, { picture: broken ? NO_PICTURE : src === undefined ? undefined : { kind: "ready", src }, alt: alt, imgRef: imgRef, onSize: setNatural, onError: () => setFailed(true), style: natural === undefined
+                                        ? { opacity: 0 }
+                                        : {
+                                            width: natural.width,
+                                            height: natural.height,
+                                            marginInlineStart: -natural.width / 2,
+                                            marginTop: -natural.height / 2,
+                                            transform: `translate(${view.x}px, ${view.y}px) scale(${scale})`,
+                                        } }), images.length > 1 && _jsx(StepButtons, { rtl: rtl, onStep: go })] })] })] }) }));
+}
+const GalleryContext = createContext(undefined);
+const GroupContext = createContext(undefined);
+/** The registered images of `group` on screen, in reading order (when the host can't list them). */
+function onScreen(entries, group) {
+    return [...entries.values()]
+        .filter((entry) => entry.group === group && entry.element() !== null)
+        .toSorted((a, b) => {
+        const first = a.element();
+        const second = b.element();
+        if (first === null || second === null)
+            return 0;
+        return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    });
+}
+/**
+ * Where images open together: a thumbnail's click opens the viewer on it, and ← → step through the
+ * other images of its group (`ImageGroup`, a turn), in reading order. Without one, an image opens on
+ * its own.
+ */
+export function ImageGallery({ imagesOf, children }) {
+    const entries = useRef(new Map());
+    const listed = useLatest(imagesOf);
+    const [showing, setShowing] = useState();
+    const gallery = useMemo(() => ({
+        register: (id, entry) => {
+            entries.current.set(id, entry);
+            return () => {
+                entries.current.delete(id);
+            };
+        },
+        open: (id) => {
+            const chosen = entries.current.get(id);
+            if (chosen === undefined)
+                return;
+            const all = chosen.group === undefined ? undefined : listed.current?.(chosen.group);
+            const at = all?.findIndex((image) => image.key === chosen.image.key) ?? -1;
+            if (all !== undefined && at >= 0) {
+                setShowing({ images: all, index: at, opener: chosen.element });
+                return;
+            }
+            const together = onScreen(entries.current, chosen.group);
+            const index = Math.max(0, together.indexOf(chosen));
+            setShowing({ images: together.map((entry) => entry.image), index, opener: chosen.element });
+        },
+    }), []);
+    return (_jsxs(GalleryContext, { value: gallery, children: [children, showing !== undefined && (_jsx(ImageViewer, { images: showing.images, index: showing.index, onIndexChange: (index) => setShowing({ ...showing, index }), onClose: () => setShowing(undefined), returnFocus: showing.opener }))] }));
+}
+/** The images below open together in the gallery (a turn's). */
+export function ImageGroup({ id, children }) {
+    return _jsx(GroupContext, { value: id, children: children });
+}
+/**
+ * An image that opens in the viewer: in the gallery around it with its group, else on its own.
+ * `element` is what puts it in reading order and gets the focus back. Returns the open action and,
+ * without a gallery, the viewer to render.
+ */
+export function useViewerImage(image, element) {
+    const gallery = use(GalleryContext);
+    const group = use(GroupContext);
+    const id = useId();
+    const [alone, setAlone] = useState(false);
+    useEffect(() => {
+        if (gallery === undefined || image === undefined)
+            return undefined;
+        return gallery.register(id, { image, group, element: () => element.current });
+    }, [gallery, image, group, id, element]);
+    if (gallery !== undefined)
+        return { open: () => gallery.open(id), viewer: null };
+    return {
+        open: () => setAlone(true),
+        viewer: alone && image !== undefined ? (_jsx(ImageViewer, { images: [image], index: 0, onIndexChange: () => undefined, onClose: () => setAlone(false), returnFocus: () => element.current })) : null,
+    };
+}

package/dist/components/inline-edit.d.ts

@@ -0,0 +1,22 @@
+import { type InputProps } from "./input.js";
+export interface InlineEditProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "onValueChange" | "onKeyDown" | "onBlur" | "onFocus" | "onClick" | "autoFocus" | "aria-label" | "leading" | "trailing"> {
+    /** The text the field opens with, selected. */
+    readonly initial: string;
+    /** The field's name for assistive technology ("Document title"). */
+    readonly "aria-label": string;
+    /** Enter, or focus leaving the field: the text as typed. The caller trims it or refuses an empty one. */
+    readonly onCommit: (value: string) => void;
+    /** Escape: the edit is dropped. */
+    readonly onCancel: () => void;
+}
+/**
+ * Renames something where its name is shown: a sidebar row, a page title, a tab. The caller mounts
+ * the field when the edit starts; it opens focused with its text selected, and the first of Enter,
+ * Escape or focus leaving it ends the edit. Enter and leaving commit, Escape cancels. While an input
+ * method composes (Chinese, Japanese, Korean…), Enter and Escape are its own and end nothing.
+ *
+ * Plain keys stay in the field, so a tab strip's arrow keys or a pane's Escape don't act while the
+ * name is being typed; shortcuts with ⌘, Ctrl or Alt still reach the app. A click in the field stays
+ * there too, so the row or tab around it doesn't take it.
+ */
+export declare function InlineEdit({ initial, onCommit, onCancel, size, ...props }: InlineEditProps): import("react").JSX.Element;

package/dist/components/inline-edit.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { isComposing } from "../lib/keys.js";
+import { Input } from "./input.js";
+/**
+ * Renames something where its name is shown: a sidebar row, a page title, a tab. The caller mounts
+ * the field when the edit starts; it opens focused with its text selected, and the first of Enter,
+ * Escape or focus leaving it ends the edit. Enter and leaving commit, Escape cancels. While an input
+ * method composes (Chinese, Japanese, Korean…), Enter and Escape are its own and end nothing.
+ *
+ * Plain keys stay in the field, so a tab strip's arrow keys or a pane's Escape don't act while the
+ * name is being typed; shortcuts with ⌘, Ctrl or Alt still reach the app. A click in the field stays
+ * there too, so the row or tab around it doesn't take it.
+ */
+export function InlineEdit({ initial, onCommit, onCancel, size = "sm", ...props }) {
+    const ref = useRef(null);
+    const [value, setValue] = useState(initial);
+    // One outcome per edit: the Enter that commits also unmounts the field, and the blur that follows
+    // must not commit a second time (or after Escape).
+    const ended = useRef(false);
+    const end = (commit) => {
+        if (ended.current)
+            return;
+        ended.current = true;
+        if (commit)
+            onCommit(value);
+        else
+            onCancel();
+    };
+    useEffect(() => {
+        ref.current?.focus();
+        ref.current?.select();
+    }, []);
+    const onKeyDown = (event) => {
+        if (!(event.metaKey || event.ctrlKey || event.altKey))
+            event.stopPropagation();
+        if (isComposing(event))
+            return;
+        if (event.key === "Enter") {
+            event.preventDefault();
+            end(true);
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            end(false);
+        }
+    };
+    return (_jsx(Input, { ref: ref, size: size, value: value, onValueChange: (next) => setValue(next), onKeyDown: onKeyDown, onBlur: () => end(true), onClick: (event) => event.stopPropagation(), ...props }));
+}

package/dist/components/input.d.ts

@@ -0,0 +1,155 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+/**
+ * The shared "field chrome" for every text-entry surface (Input, Textarea, Select trigger,
+ * Combobox): quiet surface, hairline border, firmer border on hover. Each consumer adds its own
+ * focus selector with `border-border-strong ring-3` — the halo colour (focus blue, or danger when
+ * invalid) is preset here. Invalid follows Base UI's `data-invalid` (inside <Field>) or
+ * `aria-invalid`.
+ */
+export declare const fieldChrome: string;
+declare const inputStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+    /**
+     * `wash`: a resting field on chrome (a sidebar's search): ink over whatever is beneath and no
+     * border until it has focus, when it takes the field's surface. Paper's own surface reads yellow
+     * over light vibrancy.
+     */
+    appearance: {
+        field: {};
+        wash: {
+            root: string;
+        };
+        /**
+         * `bare`: text you edit in place, inside a heading or a card (a task's title): no chrome at rest
+         * and the surrounding type (size, weight, line height), a wash on hover and focus, and the focus
+         * halo. Touch screens still get at least 16 px, so iOS doesn't zoom.
+         */
+        bare: {
+            root: string[];
+            input: string;
+        };
+    };
+}, {
+    root: string[];
+    input: string[];
+    adornment: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+    /**
+     * `wash`: a resting field on chrome (a sidebar's search): ink over whatever is beneath and no
+     * border until it has focus, when it takes the field's surface. Paper's own surface reads yellow
+     * over light vibrancy.
+     */
+    appearance: {
+        field: {};
+        wash: {
+            root: string;
+        };
+        /**
+         * `bare`: text you edit in place, inside a heading or a card (a task's title): no chrome at rest
+         * and the surrounding type (size, weight, line height), a wash on hover and focus, and the focus
+         * halo. Touch screens still get at least 16 px, so iOS doesn't zoom.
+         */
+        bare: {
+            root: string[];
+            input: string;
+        };
+    };
+}, {
+    root: string[];
+    input: string[];
+    adornment: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+    /**
+     * `wash`: a resting field on chrome (a sidebar's search): ink over whatever is beneath and no
+     * border until it has focus, when it takes the field's surface. Paper's own surface reads yellow
+     * over light vibrancy.
+     */
+    appearance: {
+        field: {};
+        wash: {
+            root: string;
+        };
+        /**
+         * `bare`: text you edit in place, inside a heading or a card (a task's title): no chrome at rest
+         * and the surrounding type (size, weight, line height), a wash on hover and focus, and the focus
+         * halo. Touch screens still get at least 16 px, so iOS doesn't zoom.
+         */
+        bare: {
+            root: string[];
+            input: string;
+        };
+    };
+}, {
+    root: string[];
+    input: string[];
+    adornment: string;
+}>>;
+type InputVariants = VariantProps<typeof inputStyles>;
+export interface InputProps extends Omit<ComponentProps<typeof BaseInput>, "size" | "className">, InputVariants {
+    /** Icon, Kbd or IconButton rendered before the text. */
+    leading?: ReactNode;
+    /** Icon, Kbd, unit or IconButton rendered after the text. */
+    trailing?: ReactNode;
+    /** Marks the input invalid outside of a <Field> (inside one, Field drives it). */
+    invalid?: boolean;
+    /** Classes for the outer frame (width, margins…). */
+    className?: string | undefined;
+    /** Classes for the inner `<input>` element. */
+    inputClassName?: ComponentProps<typeof BaseInput>["className"];
+}
+export declare function Input({ size, appearance, leading, trailing, invalid, className, inputClassName, ...props }: InputProps): import("react").JSX.Element;
+export interface SearchInputProps extends Omit<InputProps, "type" | "leading" | "aria-label"> {
+    /** What it searches ("Search models"): its name for assistive technology, and its placeholder unless one is given. */
+    readonly label: string;
+    /**
+     * Empties a controlled field: while it has text, a clear button takes `trailing`'s place and Escape
+     * clears it.
+     */
+    readonly onClear?: () => void;
+}
+/** A search field: the search glyph before the text, no autocomplete or spellcheck. */
+export declare function SearchInput({ label, placeholder, onClear, trailing, onKeyDown, ...props }: SearchInputProps): import("react").JSX.Element;
+export {};