@mdbase-dev/ui 0.1.0-beta.125 → 0.1.0-beta.147

package/dist/screens.js

@@ -1,20 +1,289 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Wordmark } from "./brand.js";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { MdbaseMark, Wordmark } from "./brand.js";
+import { FLOCK_TIMING, flockFrame } from "./flock.js";
 /**
  * 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.
+ *
+ * With `entrance="flock"` it is the launch screen: a 42px mark that the flock flies onto
+ * from the edges of the screen, once per page, before it starts scanning. Pair it with
+ * `useLaunchEntrancePlaying()` so a fast open does not cut the entrance off.
  */
-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, 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" })] }) });
+export function OpeningScreen(props) {
+  useLocaleRevision();
+  if (props.entrance === "flock" && typeof props.app === "string") return _jsx(LaunchScreen, {
+    ...props,
+    app: props.app
+  });
+  const {
+    app,
+    title,
+    detail,
+    error,
+    onRetry
+  } = props;
+  const Container = props.layout === "panel" ? "div" : "main";
+  return _jsx(Container, {
+    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: [typeof app === "string" ? _jsx(Wordmark, {
+        app: app,
+        motion: "scan",
+        signal: error ? openingFailed : null
+      }) : _jsxs("span", {
+        className: "wordmark",
+        children: [_jsx("span", {
+          className: "wordmark-mark mdbase-motion-scan",
+          "aria-hidden": "true",
+          children: app.mark ?? _jsx(MdbaseMark, {
+            signal: error ? openingFailed : null
+          })
+        }), _jsx("span", {
+          className: "wordmark-label",
+          children: app.name
+        })]
+      }), _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: _i18n._(
+        /** i18n */
+        {
+          id: "KDw4GX",
+          message: "Try again"
+        })
+      })]
+    })
+  });
+}
+const openingFailed = {
+  kind: "error",
+  id: 1
+};
+function LaunchScreen({
+  app,
+  title,
+  detail,
+  error,
+  onRetry
+}) {
+  useLocaleRevision();
+  const markHost = useRef(null);
+  const {
+    flying,
+    canvas
+  } = useFlockEntrance(markHost);
+  return _jsxs("main", {
+    className: "mdbase-opening mdbase-opening-launch",
+    "data-loading-state": error ? "failed" : "opening",
+    "data-entrance": flying ? "flying" : "landed",
+    "aria-label": title,
+    "aria-busy": !error,
+    children: [_jsxs("div", {
+      className: "mdbase-opening-message",
+      role: error ? "alert" : "status",
+      children: [_jsx("span", {
+        ref: markHost,
+        className: "mdbase-opening-launch-mark",
+        children: _jsx(MdbaseMark, {
+          app: app === "editor" ? undefined : app,
+          motion: flying || error ? undefined : "scan",
+          signal: error ? openingFailed : null
+        })
+      }), _jsxs("div", {
+        className: "mdbase-opening-launch-text",
+        children: [_jsx("p", {
+          children: error ?? title
+        }), !error && detail && _jsx("small", {
+          children: detail
+        })]
+      }), error && onRetry && _jsx("button", {
+        type: "button",
+        className: "mdbase-button",
+        onClick: onRetry,
+        children: _i18n._(
+        /** i18n */
+        {
+          id: "KDw4GX",
+          message: "Try again"
+        })
+      })]
+    }), canvas]
+  });
 }
-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
  * and an error that say the same thing are said once; technical detail waits behind a
  * 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, 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 })] }) });
+export function ConnectLayout({
+  app,
+  title,
+  lead,
+  status,
+  error,
+  detail,
+  footnote,
+  children
+}) {
+  useLocaleRevision();
+  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: _i18n._(
+          /** i18n */
+          {
+            id: "URmyfc",
+            message: "Details"
+          })
+        }), _jsx("code", {
+          children: detail
+        })]
+      }), children, footnote && _jsx("p", {
+        className: "mdbase-connect-footnote",
+        children: footnote
+      })]
+    })
+  });
+}
+let state = "idle";
+let startedAt = 0;
+let fallback;
+const listeners = new Set();
+function publish(next) {
+  if (state === next) return;
+  state = next;
+  for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+/** Starts the entrance, or returns when the running one started; null once it is over. */
+function beginLaunchEntrance() {
+  if (state === "done") return null;
+  if (state === "idle") {
+    startedAt = performance.now();
+    publish("playing");
+    // Frames stop in a background tab; the entrance must still end so the app is never held.
+    fallback = setTimeout(finishLaunchEntrance, (FLOCK_TIMING.end + 0.5) * 1000);
+  }
+  return startedAt;
+}
+function finishLaunchEntrance() {
+  clearTimeout(fallback);
+  publish("done");
+}
+/** Whether the launch entrance can play here: a real browser, motion allowed, page in view. */
+function launchEntranceEligible() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches && !document.hidden;
+}
+/**
+ * True while the launch entrance is flying. An app that opens quickly keeps its
+ * opening screen until this is false, so the entrance is never cut off mid-flight;
+ * it lasts at most two seconds.
+ */
+export function useLaunchEntrancePlaying() {
+  return useSyncExternalStore(subscribe, () => state === "playing", () => false);
+}
+/**
+ * Flies the flock onto the mark inside `target` and reports whether it is still flying.
+ * While it flies, the caller hides its real mark; the last frame is drawn from the same
+ * rectangles, so the hand-over is seamless.
+ */
+function useFlockEntrance(target) {
+  const [eligible] = useState(() => state !== "done" && launchEntranceEligible());
+  const launch = useSyncExternalStore(subscribe, () => state, () => "idle");
+  const canvasRef = useRef(null);
+  const flying = eligible && launch !== "done";
+  useEffect(() => {
+    if (!eligible) {
+      // Nothing played here, and nothing should play later out of context.
+      if (state === "idle") publish("done");
+      return;
+    }
+    const started = beginLaunchEntrance();
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (started === null || !canvas || !context) return finishLaunchEntrance();
+    let frame = 0;
+    const draw = () => {
+      const t = (performance.now() - started) / 1000;
+      const mark = target.current?.querySelector("svg");
+      if (t >= FLOCK_TIMING.end || !mark) return finishLaunchEntrance();
+      const box = mark.getBoundingClientRect();
+      const ratio = Math.min(2, window.devicePixelRatio || 1);
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      if (canvas.width !== Math.round(width * ratio) || canvas.height !== Math.round(height * ratio)) {
+        canvas.width = Math.round(width * ratio);
+        canvas.height = Math.round(height * ratio);
+      }
+      // The mark's own colours, so app marks keep their inverted palette.
+      const ink = getComputedStyle(mark.querySelector(".mdbase-mark-ink") ?? mark).fill;
+      const accent = getComputedStyle(mark.querySelector(".mdbase-mark-accent") ?? mark).fill;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      context.clearRect(0, 0, width, height);
+      const {
+        birds,
+        bars
+      } = flockFrame({
+        width,
+        height,
+        markLeft: box.left,
+        markTop: box.top,
+        markSize: Math.min(box.width, box.height)
+      }, t);
+      for (const rect of [...birds, ...bars]) {
+        context.fillStyle = rect.accent ? accent : ink;
+        context.fillRect(rect.x, rect.y, rect.width, rect.height);
+      }
+      frame = requestAnimationFrame(draw);
+    };
+    frame = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(frame);
+  }, [eligible, target]);
+  return {
+    flying,
+    canvas: flying ? _jsx("canvas", {
+      ref: canvasRef,
+      className: "mdbase-opening-flock",
+      "aria-hidden": "true"
+    }) : null
+  };
 }

package/dist/select-model.js

@@ -1,53 +1,59 @@
 export function isOptionGroup(item) {
-    return "options" in item;
+  return "options" in item;
 }
 /** Options in display order, each remembering its group. */
 export function flattenOptions(items) {
-    return items.flatMap((item) => isOptionGroup(item) ? item.options.map((option) => ({ ...option, group: item.label })) : [item]);
+  return items.flatMap(item => isOptionGroup(item) ? item.options.map(option => ({
+    ...option,
+    group: item.label
+  })) : [item]);
 }
 /** The next enabled option from `from` in `direction`, stopping at the ends like a native list. */
 export function stepOption(options, from, direction) {
-    for (let index = from + direction; index >= 0 && index < options.length; index += direction) {
-        if (!options[index]?.disabled) {
-            return index;
-        }
+  for (let index = from + direction; index >= 0 && index < options.length; index += direction) {
+    if (!options[index]?.disabled) {
+      return index;
     }
-    return from;
+  }
+  return from;
 }
 /** The first (or last) enabled option, or -1 when every option is disabled. */
 export function edgeOption(options, edge) {
-    const start = edge === "first" ? -1 : options.length;
-    const found = stepOption(options, start, edge === "first" ? 1 : -1);
-    return found === start ? -1 : found;
+  const start = edge === "first" ? -1 : options.length;
+  const found = stepOption(options, start, edge === "first" ? 1 : -1);
+  return found === start ? -1 : found;
 }
 /**
  * Type-to-select: the next enabled option whose label starts with what was typed. Typing one
  * letter repeatedly cycles through the options that start with it, as a native select does.
  */
 export function typeaheadOption(options, typed, from) {
-    const query = typed.toLocaleLowerCase();
-    const prefix = /^(.)\1+$/su.test(query) ? query.slice(0, 1) : query;
-    const offset = prefix.length === 1 ? 1 : 0;
-    for (let step = 0; step < options.length; step += 1) {
-        const index = (from + offset + step + options.length) % options.length;
-        const option = options[index];
-        if (option && !option.disabled && option.label.toLocaleLowerCase().startsWith(prefix)) {
-            return index;
-        }
+  const query = typed.toLocaleLowerCase();
+  const prefix = /^(.)\1+$/su.test(query) ? query.slice(0, 1) : query;
+  const offset = prefix.length === 1 ? 1 : 0;
+  for (let step = 0; step < options.length; step += 1) {
+    const index = (from + offset + step + options.length) % options.length;
+    const option = options[index];
+    if (option && !option.disabled && option.label.toLocaleLowerCase().startsWith(prefix)) {
+      return index;
     }
-    return -1;
+  }
+  return -1;
 }
 /** Where each item's options start in the flattened list, so groups can render in place. */
 export function itemOffsets(items) {
-    const offsets = [];
-    let next = 0;
-    for (const item of items) {
-        offsets.push(next);
-        next += isOptionGroup(item) ? item.options.length : 1;
-    }
-    return offsets;
+  const offsets = [];
+  let next = 0;
+  for (const item of items) {
+    offsets.push(next);
+    next += isOptionGroup(item) ? item.options.length : 1;
+  }
+  return offsets;
 }
 /** Appends a typed key, starting over after a pause, as native selects do. */
 export function extendTypeahead(buffer, key, at) {
-    return { text: at - buffer.at > 600 ? key : buffer.text + key, at };
+  return {
+    text: at - buffer.at > 600 ? key : buffer.text + key,
+    at
+  };
 }

package/dist/text-diff.d.ts

@@ -1,3 +1,4 @@
+import "./i18n.js";
 export type DiffKind = "same" | "local" | "remote" | "omitted";
 export interface DiffLine {
     kind: DiffKind;

package/dist/text-diff.js

@@ -1,89 +1,121 @@
+import { i18n as _i18n } from "@lingui/core";
+import "./i18n.js";
 const MAX_MATRIX_LINES = 240;
 const MAX_VISIBLE_CHANGES = 80;
 const CONTEXT_LINES = 3;
 export function compareLines(localText, remoteText) {
-    const local = localText.split("\n");
-    const remote = remoteText.split("\n");
-    const compared = local.length <= MAX_MATRIX_LINES && remote.length <= MAX_MATRIX_LINES
-        ? lcsDiff(local, remote)
-        : boundedDiff(local, remote);
-    return compactDiff(compared);
+  const local = localText.split("\n");
+  const remote = remoteText.split("\n");
+  const compared = local.length <= MAX_MATRIX_LINES && remote.length <= MAX_MATRIX_LINES ? lcsDiff(local, remote) : boundedDiff(local, remote);
+  return compactDiff(compared);
 }
 function lcsDiff(local, remote) {
-    const lengths = Array.from({ length: local.length + 1 }, () => new Uint16Array(remote.length + 1));
-    for (let localIndex = local.length - 1; localIndex >= 0; localIndex -= 1) {
-        for (let remoteIndex = remote.length - 1; remoteIndex >= 0; remoteIndex -= 1) {
-            lengths[localIndex][remoteIndex] = local[localIndex] === remote[remoteIndex]
-                ? lengths[localIndex + 1][remoteIndex + 1] + 1
-                : Math.max(lengths[localIndex + 1][remoteIndex], lengths[localIndex][remoteIndex + 1]);
-        }
+  const lengths = Array.from({
+    length: local.length + 1
+  }, () => new Uint16Array(remote.length + 1));
+  for (let localIndex = local.length - 1; localIndex >= 0; localIndex -= 1) {
+    for (let remoteIndex = remote.length - 1; remoteIndex >= 0; remoteIndex -= 1) {
+      lengths[localIndex][remoteIndex] = local[localIndex] === remote[remoteIndex] ? lengths[localIndex + 1][remoteIndex + 1] + 1 : Math.max(lengths[localIndex + 1][remoteIndex], lengths[localIndex][remoteIndex + 1]);
     }
-    const lines = [];
-    let localIndex = 0;
-    let remoteIndex = 0;
-    while (localIndex < local.length || remoteIndex < remote.length) {
-        if (localIndex < local.length && remoteIndex < remote.length && local[localIndex] === remote[remoteIndex]) {
-            lines.push({ kind: "same", text: local[localIndex], localLine: localIndex + 1, remoteLine: remoteIndex + 1 });
-            localIndex += 1;
-            remoteIndex += 1;
-        }
-        else if (remoteIndex >= remote.length || (localIndex < local.length && lengths[localIndex + 1][remoteIndex] >= lengths[localIndex][remoteIndex + 1])) {
-            lines.push({ kind: "local", text: local[localIndex], localLine: localIndex + 1 });
-            localIndex += 1;
-        }
-        else {
-            lines.push({ kind: "remote", text: remote[remoteIndex], remoteLine: remoteIndex + 1 });
-            remoteIndex += 1;
-        }
+  }
+  const lines = [];
+  let localIndex = 0;
+  let remoteIndex = 0;
+  while (localIndex < local.length || remoteIndex < remote.length) {
+    if (localIndex < local.length && remoteIndex < remote.length && local[localIndex] === remote[remoteIndex]) {
+      lines.push({
+        kind: "same",
+        text: local[localIndex],
+        localLine: localIndex + 1,
+        remoteLine: remoteIndex + 1
+      });
+      localIndex += 1;
+      remoteIndex += 1;
+    } else if (remoteIndex >= remote.length || localIndex < local.length && lengths[localIndex + 1][remoteIndex] >= lengths[localIndex][remoteIndex + 1]) {
+      lines.push({
+        kind: "local",
+        text: local[localIndex],
+        localLine: localIndex + 1
+      });
+      localIndex += 1;
+    } else {
+      lines.push({
+        kind: "remote",
+        text: remote[remoteIndex],
+        remoteLine: remoteIndex + 1
+      });
+      remoteIndex += 1;
     }
-    return lines;
+  }
+  return lines;
 }
 function boundedDiff(local, remote) {
-    let prefix = 0;
-    while (prefix < local.length && prefix < remote.length && local[prefix] === remote[prefix])
-        prefix += 1;
-    let suffix = 0;
-    while (suffix < local.length - prefix
-        && suffix < remote.length - prefix
-        && local[local.length - suffix - 1] === remote[remote.length - suffix - 1])
-        suffix += 1;
-    return [
-        ...local.slice(0, prefix).map((text, index) => ({ kind: "same", text, localLine: index + 1, remoteLine: index + 1 })),
-        ...local.slice(prefix, local.length - suffix).map((text, index) => ({ kind: "local", text, localLine: prefix + index + 1 })),
-        ...remote.slice(prefix, remote.length - suffix).map((text, index) => ({ kind: "remote", text, remoteLine: prefix + index + 1 })),
-        ...local.slice(local.length - suffix).map((text, index) => ({
-            kind: "same",
-            text,
-            localLine: local.length - suffix + index + 1,
-            remoteLine: remote.length - suffix + index + 1
-        }))
-    ];
+  let prefix = 0;
+  while (prefix < local.length && prefix < remote.length && local[prefix] === remote[prefix]) prefix += 1;
+  let suffix = 0;
+  while (suffix < local.length - prefix && suffix < remote.length - prefix && local[local.length - suffix - 1] === remote[remote.length - suffix - 1]) suffix += 1;
+  return [...local.slice(0, prefix).map((text, index) => ({
+    kind: "same",
+    text,
+    localLine: index + 1,
+    remoteLine: index + 1
+  })), ...local.slice(prefix, local.length - suffix).map((text, index) => ({
+    kind: "local",
+    text,
+    localLine: prefix + index + 1
+  })), ...remote.slice(prefix, remote.length - suffix).map((text, index) => ({
+    kind: "remote",
+    text,
+    remoteLine: prefix + index + 1
+  })), ...local.slice(local.length - suffix).map((text, index) => ({
+    kind: "same",
+    text,
+    localLine: local.length - suffix + index + 1,
+    remoteLine: remote.length - suffix + index + 1
+  }))];
 }
 function compactDiff(lines) {
-    const changes = lines.reduce((count, line) => count + (line.kind === "same" ? 0 : 1), 0);
-    if (changes === 0)
-        return [];
-    const visible = [];
-    let shownChanges = 0;
-    for (let index = 0; index < lines.length; index += 1) {
-        const line = lines[index];
-        if (line.kind !== "same") {
-            if (shownChanges >= MAX_VISIBLE_CHANGES) {
-                visible.push({ kind: "omitted", text: `${changes - shownChanges} more changed lines` });
-                break;
+  const changes = lines.reduce((count, line) => count + (line.kind === "same" ? 0 : 1), 0);
+  if (changes === 0) return [];
+  const visible = [];
+  let shownChanges = 0;
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    if (line.kind !== "same") {
+      if (shownChanges >= MAX_VISIBLE_CHANGES) {
+        visible.push({
+          kind: "omitted",
+          text: _i18n._(
+          /** i18n */
+          {
+            id: "ZZ4v5y",
+            message: "{0, plural, one {# more changed line} other {# more changed lines}}",
+            values: {
+              0: changes - shownChanges
             }
-            visible.push(line);
-            shownChanges += 1;
-            continue;
-        }
-        const previousChange = lines.slice(Math.max(0, index - CONTEXT_LINES), index).some((candidate) => candidate.kind !== "same");
-        const nextChange = lines.slice(index + 1, index + CONTEXT_LINES + 1).some((candidate) => candidate.kind !== "same");
-        if (previousChange || nextChange) {
-            visible.push(line);
-        }
-        else if (visible.at(-1)?.kind !== "omitted") {
-            visible.push({ kind: "omitted", text: "Unchanged lines" });
-        }
+          })
+        });
+        break;
+      }
+      visible.push(line);
+      shownChanges += 1;
+      continue;
     }
-    return visible;
+    const previousChange = lines.slice(Math.max(0, index - CONTEXT_LINES), index).some(candidate => candidate.kind !== "same");
+    const nextChange = lines.slice(index + 1, index + CONTEXT_LINES + 1).some(candidate => candidate.kind !== "same");
+    if (previousChange || nextChange) {
+      visible.push(line);
+    } else if (visible.at(-1)?.kind !== "omitted") {
+      visible.push({
+        kind: "omitted",
+        text: _i18n._(
+        /** i18n */
+        {
+          id: "_CVuTO",
+          message: "Unchanged lines"
+        })
+      });
+    }
+  }
+  return visible;
 }