@mdbase-dev/ui 0.1.0-beta.123 → 0.1.0-beta.124

package/dist/mark-activity.js

@@ -0,0 +1,121 @@
+import { useEffect, useRef, useSyncExternalStore } from "react";
+/** Matches the signal animations in `motion.css`. */
+const SIGNAL_MS = { saved: 900, error: 1500 };
+/** Several notices often report the same save; one reaction is enough. */
+const REPEAT_MS = 400;
+const IDLE = { signal: null, progress: null, busy: null };
+let snapshot = IDLE;
+let signal = null;
+let signalAt = 0;
+let signalTimer;
+let nextId = 1;
+const tasks = new Map();
+const holds = [];
+const listeners = new Set();
+function publish() {
+    const progress = tasks.size
+        ? [...tasks.values()].reduce((sum, fraction) => sum + fraction, 0) / tasks.size
+        : null;
+    snapshot = { signal, progress, busy: holds.at(-1)?.loop ?? null };
+    for (const listener of listeners)
+        listener();
+}
+function clamp(fraction) {
+    return Number.isFinite(fraction) ? Math.min(1, Math.max(0, fraction)) : 0;
+}
+/** Plays a one-shot reaction on the mark. A fresh error is never covered by a save. */
+export function signalMdbaseMark(kind) {
+    const now = Date.now();
+    if (signal && now - signalAt < REPEAT_MS && (signal.kind === kind || signal.kind === "error"))
+        return;
+    signal = { kind, id: nextId++ };
+    signalAt = now;
+    clearTimeout(signalTimer);
+    signalTimer = setTimeout(() => {
+        signal = null;
+        publish();
+    }, SIGNAL_MS[kind]);
+    publish();
+}
+/** Shows an operation's known progress on the mark until it finishes, fails or is cancelled. */
+export function trackMdbaseMarkProgress(initial = 0) {
+    const id = nextId++;
+    tasks.set(id, clamp(initial));
+    publish();
+    const end = (kind) => {
+        if (!tasks.delete(id))
+            return;
+        publish();
+        if (kind)
+            signalMdbaseMark(kind);
+    };
+    return {
+        update(fraction) {
+            if (!tasks.has(id))
+                return;
+            tasks.set(id, clamp(fraction));
+            publish();
+        },
+        finish: () => end("saved"),
+        fail: () => end("error"),
+        cancel: () => end()
+    };
+}
+/** Loops the mark until the returned release is called. Releasing twice is harmless. */
+export function holdMdbaseMarkBusy(loop) {
+    const id = nextId++;
+    holds.push({ id, loop });
+    publish();
+    return () => {
+        const index = holds.findIndex((hold) => hold.id === id);
+        if (index < 0)
+            return;
+        holds.splice(index, 1);
+        publish();
+    };
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+export function getMdbaseMarkActivity() {
+    return snapshot;
+}
+export function useMdbaseMarkActivity() {
+    return useSyncExternalStore(subscribe, getMdbaseMarkActivity, () => IDLE);
+}
+/**
+ * Shows `fraction` on the mark while it is a number. Becoming null or unmounting ends the
+ * operation quietly; call `signalMdbaseMark` separately if the end deserves a reaction.
+ */
+export function useMdbaseMarkProgress(fraction) {
+    const handle = useRef(null);
+    const tracking = typeof fraction === "number";
+    useEffect(() => {
+        if (!tracking)
+            return;
+        const progress = trackMdbaseMarkProgress();
+        handle.current = progress;
+        return () => {
+            progress.cancel();
+            handle.current = null;
+        };
+    }, [tracking]);
+    useEffect(() => {
+        if (typeof fraction === "number")
+            handle.current?.update(fraction);
+    }, [fraction]);
+}
+/** Loops the mark while `loop` is set. */
+export function useMdbaseMarkBusy(loop) {
+    useEffect(() => (loop ? holdMdbaseMarkBusy(loop) : undefined), [loop]);
+}
+/** For tests: forget every signal, operation and hold. */
+export function resetMdbaseMarkActivity() {
+    clearTimeout(signalTimer);
+    signal = null;
+    signalAt = 0;
+    tasks.clear();
+    holds.length = 0;
+    publish();
+}

package/dist/screens.d.ts

@@ -1,8 +1,9 @@
 import type { JSX, ReactNode } from "react";
 import type { MdbaseAppId } from "./apps.js";
 /**
- * What an app shows while it opens a collection: its wordmark, held still, and a quiet line
- * saying what it is waiting for. A failure keeps the same place and offers a retry.
+ * What an app shows while it opens a collection: its wordmark, scanning, and a quiet line
+ * saying what it is waiting for. A failure keeps the same place, shakes the mark once and
+ * offers a retry.
  */
 export declare function OpeningScreen({ app, title, detail, error, onRetry }: {
     readonly app: MdbaseAppId;

package/dist/screens.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Wordmark } from "./brand.js";
 /**
- * What an app shows while it opens a collection: its wordmark, held still, and a quiet line
- * saying what it is waiting for. A failure keeps the same place and offers a retry.
+ * What an app shows while it opens a collection: its wordmark, scanning, and a quiet line
+ * saying what it is waiting for. A failure keeps the same place, shakes the mark once and
+ * offers a retry.
  */
 export function OpeningScreen({ app, title, detail, error, onRetry }) {
-    return _jsx("main", { className: "mdbase-opening", "data-loading-state": error ? "failed" : "opening", "aria-label": title, "aria-busy": !error, children: _jsxs("div", { className: "mdbase-opening-message", role: error ? "alert" : "status", children: [_jsx(Wordmark, { app: app }), _jsxs("div", { children: [_jsx("p", { children: error ?? title }), !error && detail && _jsx("small", { children: detail })] }), error && onRetry && _jsx("button", { type: "button", className: "mdbase-button", onClick: onRetry, children: "Try again" })] }) });
+    return _jsx("main", { className: "mdbase-opening", "data-loading-state": error ? "failed" : "opening", "aria-label": title, "aria-busy": !error, children: _jsxs("div", { className: "mdbase-opening-message", role: error ? "alert" : "status", children: [_jsx(Wordmark, { app: app, motion: "scan", signal: error ? openingFailed : null }), _jsxs("div", { children: [_jsx("p", { children: error ?? title }), !error && detail && _jsx("small", { children: detail })] }), error && onRetry && _jsx("button", { type: "button", className: "mdbase-button", onClick: onRetry, children: "Try again" })] }) });
 }
+const openingFailed = { kind: "error", id: 1 };
 /**
  * The screen before a collection is open: the app's wordmark, a headline, what the app will
  * do, what went wrong if anything, and then the actions (children) for connecting. A status
@@ -14,5 +16,5 @@ export function OpeningScreen({ app, title, detail, error, onRetry }) {
  * disclosure.
  */
 export function ConnectLayout({ app, title, lead, status, error, detail, footnote, children }) {
-    return _jsx("main", { className: "mdbase-connect-screen", children: _jsxs("section", { children: [_jsx(Wordmark, { app: app }), _jsx("h1", { children: title }), lead && _jsx("p", { className: "mdbase-connect-lead", children: lead }), status && status !== error && _jsx("p", { className: "mdbase-connect-status", role: "status", children: status }), error && _jsx("p", { className: "mdbase-connect-error", role: "alert", children: error }), detail && _jsxs("details", { className: "mdbase-connect-detail", children: [_jsx("summary", { children: "Details" }), _jsx("code", { children: detail })] }), children, footnote && _jsx("p", { className: "mdbase-connect-footnote", children: footnote })] }) });
+    return _jsx("main", { className: "mdbase-connect-screen", children: _jsxs("section", { children: [_jsx(Wordmark, { app: app, motion: "assemble" }), _jsx("h1", { children: title }), lead && _jsx("p", { className: "mdbase-connect-lead", children: lead }), status && status !== error && _jsx("p", { className: "mdbase-connect-status", role: "status", children: status }), error && _jsx("p", { className: "mdbase-connect-error", role: "alert", children: error }), detail && _jsxs("details", { className: "mdbase-connect-detail", children: [_jsx("summary", { children: "Details" }), _jsx("code", { children: detail })] }), children, footnote && _jsx("p", { className: "mdbase-connect-footnote", children: footnote })] }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdbase-dev/ui",
-  "version": "0.1.0-beta.123",
+  "version": "0.1.0-beta.124",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -34,10 +34,18 @@
       "types": "./dist/CommandPalette.d.ts",
       "import": "./dist/CommandPalette.js"
     },
+    "./feedback": {
+      "types": "./dist/Feedback.d.ts",
+      "import": "./dist/Feedback.js"
+    },
     "./dialog": {
       "types": "./dist/Dialog.d.ts",
       "import": "./dist/Dialog.js"
     },
+    "./mark-activity": {
+      "types": "./dist/mark-activity.d.ts",
+      "import": "./dist/mark-activity.js"
+    },
     "./permission-selection": {
       "types": "./dist/permission-selection.d.ts",
       "import": "./dist/permission-selection.js"
@@ -73,6 +81,7 @@
     "./brand.css": "./css/brand.css",
     "./controls.css": "./css/controls.css",
     "./fonts.css": "./css/fonts.css",
+    "./feedback.css": "./css/feedback.css",
     "./motion.css": "./css/motion.css",
     "./palette.css": "./css/palette.css",
     "./screens.css": "./css/screens.css",