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

package/css/screens.css

@@ -17,6 +17,12 @@
   text-align: center;
 }
 
+.mdbase-opening .wordmark-mark > .mdbase-mark {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .mdbase-opening-message p,
 .mdbase-opening-message small {
   display: block;
@@ -25,38 +31,74 @@
 
 .mdbase-opening-message p {
   max-width: 44ch;
-  font-size: 13px;
+  font-size: var(--font-size-ui);
 }
 
 .mdbase-opening-message small {
   margin-top: 4px;
   color: var(--color-text-muted);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-opening[data-loading-state="failed"] .mdbase-opening-message p {
   color: var(--color-danger);
 }
 
+/* The launch screen: the mark the flock flies onto, then the quiet line. */
+.mdbase-opening-launch-mark {
+  display: block;
+  width: 42px;
+  height: 42px;
+  margin-bottom: var(--space-2);
+}
+
+.mdbase-opening-launch-mark .mdbase-mark {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* While the flock flies, the canvas draws the mark; the real one takes over when it lands. */
+.mdbase-opening-launch[data-entrance="flying"] .mdbase-opening-launch-mark {
+  visibility: hidden;
+}
+
+.mdbase-opening-launch-text {
+  transition: opacity var(--motion-slow) var(--ease-out);
+}
+
+.mdbase-opening-launch[data-entrance="flying"] .mdbase-opening-launch-text {
+  opacity: 0;
+}
+
+.mdbase-opening-flock {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+
 /* Before a collection is open. */
 .mdbase-connect-screen {
   min-height: 100%;
   display: grid;
   place-items: center;
-  padding: 32px;
+  /* The extra bottom padding lifts short content slightly above centre; tall
+   * content just grows downward, so the top never clips (no negative margin). */
+  padding: 32px 32px calc(32px + 8vh);
   background: var(--color-canvas);
 }
 
 .mdbase-connect-screen section {
   width: min(100%, 520px);
-  margin-top: -4vh;
 }
 
 .mdbase-connect-screen h1 {
   margin: 44px 0 22px;
   color: var(--color-text);
-  font-size: 48px;
-  font-weight: 700;
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-semibold);
   line-height: 0.98;
   letter-spacing: -0.045em;
 }
@@ -65,14 +107,14 @@
   max-width: 34ch;
   margin: 0;
   color: var(--color-text-soft);
-  font-size: 17px;
+  font-size: var(--font-size-prose);
   line-height: 1.55;
 }
 
 .mdbase-connect-status {
   margin: 14px 0 0;
   color: var(--color-text-muted);
-  font-size: 13px;
+  font-size: var(--font-size-ui);
 }
 
 /* The one strong action on the screen. */
@@ -88,10 +130,10 @@
   color: var(--color-text);
   background: var(--color-surface);
   font: inherit;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--font-size-ui);
+  font-weight: var(--font-weight-semibold);
   cursor: pointer;
-  transition: border-color var(--motion-quick) ease, background var(--motion-quick) ease;
+  transition: border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-connect-action:hover:not(:disabled) {
@@ -113,28 +155,28 @@
   max-width: 47ch;
   margin: 18px 0 0;
   color: var(--color-text-muted);
-  font-size: 12px;
+  font-size: var(--font-size-caption);
   line-height: 1.55;
 }
 
 .mdbase-connect-error {
   margin: 18px 0 0;
   color: var(--color-danger);
-  font-size: 13px;
+  font-size: var(--font-size-ui);
   line-height: 1.45;
 }
 
 .mdbase-connect-detail {
   margin-top: 10px;
   color: var(--color-text-muted);
-  font-size: 12px;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-connect-detail code {
   display: block;
   margin-top: 6px;
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   overflow-wrap: anywhere;
 }
 
@@ -150,6 +192,6 @@
 
   .mdbase-connect-screen h1 {
     margin-top: 48px;
-    font-size: 43px;
+    font-size: var(--font-size-title);
   }
 }

package/css/tokens.css

@@ -44,16 +44,56 @@
   --app-editor: #005c88;
   --app-reader: #a4467f;
   --app-writer: #d55e00;
-  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sans: "Atkinson Hyperlegible Next Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  /* Motion: popovers and small entrances are quick and ease out; a settled
-     confirmation holds, then fades away (see controls.css). */
+  /* Six steps: captions, UI chrome, section titles, prose, headings, document titles. */
+  --font-size-caption: 12px;
+  --font-size-ui: 13px;
+  --font-size-section: 15px;
+  --font-size-prose: 17px;
+  --font-size-heading: 24px;
+  --font-size-title: 34px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --elevation-low: 0 4px 12px var(--color-shadow);
+  --elevation-high: 0 12px 32px var(--color-shadow);
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  /* Transitions share durations and easing; settled confirmations hold then fade. */
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-fast: 120ms;
   --motion-quick: 150ms;
   --motion-base: 180ms;
+  --motion-slow: 240ms;
+  --motion-spin: 700ms;
+  --motion-pulse: 1.1s;
   --motion-settle: 2.4s;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 0ms;
+    --motion-quick: 0ms;
+    --motion-base: 0ms;
+    --motion-slow: 0ms;
+    --motion-spin: 0ms;
+    --motion-pulse: 0ms;
+  }
+}
+
 :root[data-theme="dark"] {
   color-scheme: dark;
   --color-canvas: oklch(17.5% 0.012 255);

package/dist/AppSwitcher.js

@@ -1,4 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 import { useId, useRef, useState } from "react";
 import { mdbaseAppHref, withAppUrls } from "./apps.js";
 import { MdbaseAppMark, Wordmark } from "./brand.js";
@@ -13,39 +15,191 @@ let entrancePlayed = false;
  * Its mark shows the page's activity (see `mark-activity`): progress, then a held loop,
  * then `motion`. Without a `motion` it plays `keys-first` the first time it appears.
  */
-export function AppSwitcher({ current, urls = {}, motion }) {
-    const menuId = useId();
-    const triggerRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [entrance] = useState(() => {
-        if (motion || entrancePlayed || typeof window === "undefined")
-            return undefined;
-        entrancePlayed = true;
-        return "keys-first";
-    });
-    const activity = useMdbaseMarkActivity();
-    const close = (refocus) => {
-        setOpen(false);
-        if (refocus)
-            triggerRef.current?.focus();
-    };
-    return _jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", className: "mdbase-app-switcher", "aria-label": `mdbase ${current}: open this collection in another app`, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : undefined, title: "Open in another mdbase app", onClick: () => (open ? close(false) : setOpen(true)), onKeyDown: (event) => {
-                    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-                        event.preventDefault();
-                        setOpen(true);
-                    }
-                }, children: [_jsx(Wordmark, { app: current, motion: activity.busy ?? motion ?? entrance, signal: activity.signal, progress: activity.progress }), _jsx("svg", { className: "mdbase-app-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) })] }), open ? _jsx(AppMenu, { id: menuId, apps: withAppUrls(urls), current: current, triggerRef: triggerRef, onClose: close }) : null] });
+export function AppSwitcher({
+  current,
+  urls = {},
+  motion
+}) {
+  useLocaleRevision();
+  const menuId = useId();
+  const triggerRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [entrance] = useState(() => {
+    if (motion || entrancePlayed || typeof window === "undefined") return undefined;
+    entrancePlayed = true;
+    return "keys-first";
+  });
+  const activity = useMdbaseMarkActivity();
+  const close = refocus => {
+    setOpen(false);
+    if (refocus) triggerRef.current?.focus();
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsxs("button", {
+      ref: triggerRef,
+      type: "button",
+      className: "mdbase-app-switcher",
+      "aria-label": _i18n._(
+      /** i18n */
+      {
+        id: "54P3Y1",
+        message: "mdbase {current}: open this collection in another app",
+        values: {
+          current: current
+        }
+      }),
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? menuId : undefined,
+      title: _i18n._(
+      /** i18n */
+      {
+        id: "38fGkV",
+        message: "Open in another mdbase app"
+      }),
+      onClick: () => open ? close(false) : setOpen(true),
+      onKeyDown: event => {
+        if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+          event.preventDefault();
+          setOpen(true);
+        }
+      },
+      children: [_jsx(Wordmark, {
+        app: current,
+        motion: activity.busy ?? motion ?? entrance,
+        signal: activity.signal,
+        progress: activity.progress
+      }), _jsx("svg", {
+        className: "mdbase-app-switcher-chevron",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: _jsx("path", {
+          d: "m7 10 5 5 5-5"
+        })
+      })]
+    }), open ? _jsx(AppMenu, {
+      id: menuId,
+      apps: withAppUrls(urls),
+      current: current,
+      triggerRef: triggerRef,
+      onClose: close
+    }) : null]
+  });
 }
-function AppMenu({ id, apps, current, triggerRef, onClose }) {
-    const menuRef = useRef(null);
-    useMenuPopover(menuRef, triggerRef, onClose, { width: 320, focus: 'a[role="menuitem"]' });
-    const heading = new URL(location.href).searchParams.has("collection") ? "Open this collection in" : "mdbase apps";
-    return _jsxs("div", { ref: menuRef, id: id, className: "mdbase-menu", popover: "manual", role: "menu", "aria-label": heading, tabIndex: -1, onKeyDown: (event) => moveMenuFocus(event, menuRef.current), children: [_jsx("div", { className: "mdbase-menu-heading", role: "presentation", children: heading }), _jsx("div", { className: "mdbase-menu-list", children: apps.map((app) => _jsx(AppItem, { app: app, current: app.id === current, onOpen: () => onClose(false) }, app.id)) }), _jsx("p", { className: "mdbase-menu-note", children: "Opens in a new tab" })] });
+function AppMenu({
+  id,
+  apps,
+  current,
+  triggerRef,
+  onClose
+}) {
+  useLocaleRevision();
+  const menuRef = useRef(null);
+  useMenuPopover(menuRef, triggerRef, onClose, {
+    width: 320,
+    focus: 'a[role="menuitem"]'
+  });
+  const heading = new URL(location.href).searchParams.has("collection") ? _i18n._(
+  /** i18n */
+  {
+    id: "xxbaLR",
+    message: "Open this collection in"
+  }) : _i18n._(
+  /** i18n */
+  {
+    id: "vDwCOr",
+    message: "mdbase apps"
+  });
+  return _jsxs("div", {
+    ref: menuRef,
+    id: id,
+    className: "mdbase-menu",
+    popover: "manual",
+    role: "menu",
+    "aria-label": heading,
+    tabIndex: -1,
+    onKeyDown: event => moveMenuFocus(event, menuRef.current),
+    children: [_jsx("div", {
+      className: "mdbase-menu-heading",
+      role: "presentation",
+      children: heading
+    }), _jsx("div", {
+      className: "mdbase-menu-list",
+      children: apps.map(app => _jsx(AppItem, {
+        app: app,
+        current: app.id === current,
+        onOpen: () => onClose(false)
+      }, app.id))
+    }), _jsx("p", {
+      className: "mdbase-menu-note",
+      children: _i18n._(
+      /** i18n */
+      {
+        id: "XDzAnp",
+        message: "Opens in a new tab"
+      })
+    })]
+  });
 }
-function AppItem({ app, current, onOpen }) {
-    const copy = _jsxs(_Fragment, { children: [_jsx(MdbaseAppMark, { app: app.id, className: "mdbase-app-menu-mark" }), _jsxs("span", { className: "mdbase-menu-copy", children: [_jsx("strong", { children: app.name }), _jsx("small", { children: app.description })] })] });
-    if (current) {
-        return _jsxs("div", { className: "mdbase-menu-item is-current", role: "menuitem", "aria-current": "page", "aria-disabled": "true", tabIndex: -1, children: [copy, _jsx("span", { className: "mdbase-app-menu-current", children: "Current" })] });
-    }
-    return _jsxs("a", { className: "mdbase-menu-item", role: "menuitem", href: mdbaseAppHref(app.url, location.href), target: "_blank", rel: "noopener", onClick: onOpen, children: [copy, _jsx("svg", { className: "mdbase-app-menu-external", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10 5.5H5.5v13h13V14M13.5 5.5h5v5M18.5 5.5 11 13" }) }), _jsx("span", { className: "mdbase-visually-hidden", children: " (opens in a new tab)" })] });
+function AppItem({
+  app,
+  current,
+  onOpen
+}) {
+  useLocaleRevision();
+  const copy = _jsxs(_Fragment, {
+    children: [_jsx(MdbaseAppMark, {
+      app: app.id,
+      className: "mdbase-app-menu-mark"
+    }), _jsxs("span", {
+      className: "mdbase-menu-copy",
+      children: [_jsx("strong", {
+        children: app.name
+      }), _jsx("small", {
+        children: app.description
+      })]
+    })]
+  });
+  if (current) {
+    return _jsxs("div", {
+      className: "mdbase-menu-item is-current",
+      role: "menuitem",
+      "aria-current": "page",
+      "aria-disabled": "true",
+      tabIndex: -1,
+      children: [copy, _jsx("span", {
+        className: "mdbase-app-menu-current",
+        children: _i18n._(
+        /** i18n */
+        {
+          id: "Hp1l6f",
+          message: "Current"
+        })
+      })]
+    });
+  }
+  return _jsxs("a", {
+    className: "mdbase-menu-item",
+    role: "menuitem",
+    href: mdbaseAppHref(app.url, location.href),
+    target: "_blank",
+    rel: "noopener",
+    onClick: onOpen,
+    children: [copy, _jsx("svg", {
+      className: "mdbase-app-menu-external",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: _jsx("path", {
+        d: "M10 5.5H5.5v13h13V14M13.5 5.5h5v5M18.5 5.5 11 13"
+      })
+    }), _jsxs("span", {
+      className: "mdbase-visually-hidden",
+      children: ["  ", _i18n._(
+      /** i18n */
+      {
+        id: "75iTY6",
+        message: "(opens in a new tab)"
+      })]
+    })]
+  });
 }

package/dist/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import type { InputHTMLAttributes, JSX, ReactNode } from "react";
+type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "className" | "children">;
+/** A native checkbox and its text in one label: the row is the 44px target,
+ * the box keeps its own size. */
+export declare function Checkbox({ children, ...input }: InputAttributes & {
+    readonly children: ReactNode;
+}): JSX.Element;
+/** Related checkboxes under a legend, without the browser's fieldset outline. */
+export declare function CheckboxGroup({ legend, disabled, children }: {
+    readonly legend: ReactNode;
+    readonly disabled?: boolean | undefined;
+    readonly children: ReactNode;
+}): JSX.Element;
+export {};

package/dist/Checkbox.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A native checkbox and its text in one label: the row is the 44px target,
+ * the box keeps its own size. */
+export function Checkbox({
+  children,
+  ...input
+}) {
+  return _jsxs("label", {
+    className: "mdbase-check",
+    children: [_jsx("input", {
+      ...input,
+      type: "checkbox",
+      className: "mdbase-checkbox"
+    }), _jsx("span", {
+      children: children
+    })]
+  });
+}
+/** Related checkboxes under a legend, without the browser's fieldset outline. */
+export function CheckboxGroup({
+  legend,
+  disabled,
+  children
+}) {
+  return _jsxs("fieldset", {
+    className: "mdbase-check-group",
+    disabled: disabled,
+    children: [_jsx("legend", {
+      children: legend
+    }), children]
+  });
+}

package/dist/CommandPalette.d.ts

@@ -3,7 +3,7 @@ export interface Command {
     readonly id: string;
     readonly label: string;
     readonly detail?: string | undefined;
-    /** Commands show under their group's heading, in the order the groups first appear. */
+    /** Stable group ID; headings follow first appearance and may be presented by groupLabel. */
     readonly group: string;
     readonly keywords?: string | undefined;
     /** For example "mod+shift+f"; see shortcutLabel. */
@@ -27,11 +27,13 @@ export declare function matchingCommands(commands: readonly Command[], query: st
  * Find or run anything: every mdbase app opens it with Mod+K. Typing filters commands; the
  * arrows move, Enter runs, Shift+Enter runs a command's alternate, Escape closes.
  */
-export declare function CommandPalette({ open, commands, onClose, label, placeholder, showAll }: {
+export declare function CommandPalette({ open, commands, onClose, label, placeholder, showAll, groupLabel }: {
     readonly open: boolean;
     readonly commands: readonly Command[];
     readonly onClose: () => void;
     readonly label?: string | undefined;
     readonly placeholder?: string | undefined;
     readonly showAll?: readonly string[] | undefined;
+    /** Presentation only: translate headings without changing group or showAll IDs. */
+    readonly groupLabel?: ((group: string) => string) | undefined;
 }): JSX.Element | null;