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

package/dist/SelectList.js

@@ -4,18 +4,63 @@ import { isOptionGroup, itemOffsets } from "./select-model.js";
  * The listbox half of a select. Focus stays on the listbox, which names its active option with
  * aria-activedescendant, so options take pointer input only; the keyboard goes to the list.
  */
-export function SelectList({ id, listRef, items, selected, active, open, label, labelledBy, onActivate, onChoose, onKeyDown, }) {
-    const offsets = itemOffsets(items);
-    const option = (value, index) => (_jsx("div", { id: `${id}-option-${String(index)}`, "data-index": index, "data-value": value.value, role: "option", "aria-selected": index === selected, "aria-disabled": value.disabled ? true : undefined, className: index === active ? "mdbase-select-option is-active" : "mdbase-select-option", onPointerMove: () => {
-            if (!value.disabled && index !== active) {
-                onActivate(index);
-            }
-        }, onClick: () => onChoose(index), children: value.label }, value.value));
-    return (_jsx("div", { ref: listRef, id: `${id}-list`, className: "mdbase-select-list", popover: "manual", role: "listbox", tabIndex: -1, "aria-label": label, "aria-labelledby": labelledBy, "aria-activedescendant": open && active >= 0 ? `${id}-option-${String(active)}` : undefined, onKeyDown: onKeyDown, onClick: (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-        }, onDoubleClick: (event) => event.stopPropagation(), children: items.map((item, itemIndex) => {
-            const first = offsets[itemIndex] ?? 0;
-            return isOptionGroup(item) ? (_jsxs("div", { role: "group", "aria-label": item.label, children: [_jsx("div", { className: "mdbase-select-group", "aria-hidden": "true", children: item.label }), item.options.map((value, offset) => option(value, first + offset))] }, `group:${item.label}`)) : (option(item, first));
-        }) }));
+export function SelectList({
+  id,
+  listRef,
+  items,
+  selected,
+  active,
+  open,
+  label,
+  labelledBy,
+  onActivate,
+  onChoose,
+  onKeyDown
+}) {
+  const offsets = itemOffsets(items);
+  const option = (value, index) => _jsx("div", {
+    id: `${id}-option-${String(index)}`,
+    "data-index": index,
+    "data-value": value.value,
+    role: "option",
+    "aria-selected": index === selected,
+    "aria-disabled": value.disabled ? true : undefined,
+    className: index === active ? "mdbase-select-option is-active" : "mdbase-select-option",
+    onPointerMove: () => {
+      if (!value.disabled && index !== active) {
+        onActivate(index);
+      }
+    },
+    onClick: () => onChoose(index),
+    children: value.label
+  }, value.value);
+  return _jsx("div", {
+    ref: listRef,
+    id: `${id}-list`,
+    className: "mdbase-select-list",
+    popover: "manual",
+    role: "listbox",
+    tabIndex: -1,
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
+    "aria-activedescendant": open && active >= 0 ? `${id}-option-${String(active)}` : undefined,
+    onKeyDown: onKeyDown,
+    onClick: event => {
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    onDoubleClick: event => event.stopPropagation(),
+    children: items.map((item, itemIndex) => {
+      const first = offsets[itemIndex] ?? 0;
+      return isOptionGroup(item) ? _jsxs("div", {
+        role: "group",
+        "aria-label": item.label,
+        children: [_jsx("div", {
+          className: "mdbase-select-group",
+          "aria-hidden": "true",
+          children: item.label
+        }), item.options.map((value, offset) => option(value, first + offset))]
+      }, `group:${item.label}`) : option(item, first);
+    })
+  });
 }

package/dist/ThemeSelect.js

@@ -1,12 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 import { Select } from "./Select.js";
 import { themePreferences } from "./theme.js";
-const themeLabels = { system: "System", light: "Light", dark: "Dark" };
-const themeOptions = themePreferences.map((value) => ({ value, label: themeLabels[value] }));
+const themeLabels = {
+  get system() {
+    return _i18n._(
+    /** i18n */
+    {
+      id: "XAe57G",
+      message: "System",
+      context: "Color theme"
+    });
+  },
+  get light() {
+    return _i18n._(
+    /** i18n */
+    {
+      id: "EbTBqo",
+      message: "Light",
+      context: "Color theme"
+    });
+  },
+  get dark() {
+    return _i18n._(
+    /** i18n */
+    {
+      id: "FPIkyE",
+      message: "Dark",
+      context: "Color theme"
+    });
+  }
+};
+const themeOptions = () => themePreferences.map(value => ({
+  value,
+  label: themeLabels[value]
+}));
 /**
  * The one control for choosing System, Light or Dark. The app owns the preference (with
  * loadThemePreference and saveThemePreference) because commands and menus may change it too.
  */
-export function ThemeSelect({ value, onChange, className, label = "Color theme" }) {
-    return _jsx(Select, { "aria-label": label, className: className, value: value, options: themeOptions, onChange: onChange });
+export function ThemeSelect({
+  value,
+  onChange,
+  className,
+  label = _i18n._(
+  /** i18n */
+  {
+    id: "IspNTR",
+    message: "Color theme",
+    context: "Color theme"
+  })
+}) {
+  useLocaleRevision();
+  return _jsx(Select, {
+    "aria-label": label,
+    className: className,
+    value: value,
+    options: themeOptions(),
+    onChange: onChange
+  });
 }

package/dist/apps.d.ts

@@ -1,3 +1,4 @@
+import "./i18n.js";
 /**
  * The mdbase apps a collection can be opened in. Editor is the canonical app for a
  * collection; Reader and Writer serve particular workflows on the same records.

package/dist/apps.js

@@ -1,32 +1,54 @@
-export const mdbaseApps = [
+import { i18n as _i18n } from "@lingui/core";
+import "./i18n.js";
+export const mdbaseApps = [{
+  id: "editor",
+  name: "Editor",
+  get description() {
+    return _i18n._(
+    /** i18n */
     {
-        id: "editor",
-        name: "Editor",
-        description: "Browse and edit records",
-        url: "https://editor.mdbase.dev/"
-    },
+      id: "IseQAg",
+      message: "Browse and edit records"
+    });
+  },
+  url: "https://editor.mdbase.dev/"
+}, {
+  id: "reader",
+  name: "Reader",
+  get description() {
+    return _i18n._(
+    /** i18n */
     {
-        id: "reader",
-        name: "Reader",
-        description: "Read and annotate sources",
-        url: "https://reader.mdbase.dev/"
-    },
+      id: "kHiGeJ",
+      message: "Read and annotate sources"
+    });
+  },
+  url: "https://reader.mdbase.dev/"
+}, {
+  id: "writer",
+  name: "Writer",
+  get description() {
+    return _i18n._(
+    /** i18n */
     {
-        id: "writer",
-        name: "Writer",
-        description: "Write manuscripts that cite your sources",
-        url: "https://writer.mdbase.dev/"
-    }
-];
+      id: "wv1f8v",
+      message: "Write manuscripts that cite your sources"
+    });
+  },
+  url: "https://writer.mdbase.dev/"
+}];
 /**
  * Replaces app URLs for a lab or local build, for example from
  * `import.meta.env.VITE_MDBASE_WRITER_URL`. Unset entries keep production.
  */
 export function withAppUrls(urls, apps = mdbaseApps) {
-    return apps.map((app) => {
-        const url = urls[app.id];
-        return url ? { ...app, url } : app;
-    });
+  return apps.map(app => {
+    const url = urls[app.id];
+    return url ? {
+      ...app,
+      url
+    } : app;
+  });
 }
 /**
  * Parameters every mdbase app reads the same way: `collection` is the Connect SDK's
@@ -36,12 +58,11 @@ export function withAppUrls(urls, apps = mdbaseApps) {
 const sharedParameters = ["collection", "server"];
 /** A link that opens the current page's collection in another app. */
 export function mdbaseAppHref(appUrl, currentHref) {
-    const target = new URL(appUrl);
-    const current = new URL(currentHref);
-    for (const key of sharedParameters) {
-        const value = current.searchParams.get(key);
-        if (value)
-            target.searchParams.set(key, value);
-    }
-    return target.href;
+  const target = new URL(appUrl);
+  const current = new URL(currentHref);
+  for (const key of sharedParameters) {
+    const value = current.searchParams.get(key);
+    if (value) target.searchParams.set(key, value);
+  }
+  return target.href;
 }

package/dist/brand.js

@@ -1,63 +1,134 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 /** Indeterminate waits. Each repeats until the motion is removed. */
-export const mdbaseMarkLoops = [
-    "orbit",
-    "scan",
-    "bounce",
-    "stream",
-    "sort",
-    "hop"
-];
+export const mdbaseMarkLoops = ["orbit", "scan", "bounce", "stream", "sort", "hop"];
 /** Played once when the mark appears; the mark then rests. */
-export const mdbaseMarkEntrances = [
-    "keys-first",
-    "drop",
-    "assemble"
-];
+export const mdbaseMarkEntrances = ["keys-first", "drop", "assemble"];
 export const mdbaseMarkMotions = [...mdbaseMarkLoops, ...mdbaseMarkEntrances];
 /** Long enough for each entrance in `motion.css` to finish. */
 const ENTRANCE_MS = 1300;
 export function mdbaseMarkMotionClass(motion) {
-    return motion ? ` mdbase-motion-${motion}` : "";
+  return motion ? ` mdbase-motion-${motion}` : "";
 }
 function isEntrance(motion) {
-    return mdbaseMarkEntrances.includes(motion ?? "");
+  return mdbaseMarkEntrances.includes(motion ?? "");
 }
 export const MDBASE_MARK_VIEW_BOX = "18 18 84 84";
-export const mdbaseMarkInkRects = [
-    { x: 22, y: 22, width: 20, height: 10 },
-    { x: 50, y: 22, width: 20, height: 10 },
-    { x: 78, y: 22, width: 20, height: 10 },
-    { x: 22, y: 44, width: 12, height: 10 },
-    { x: 22, y: 66, width: 28, height: 10 },
-    { x: 58, y: 66, width: 40, height: 10 },
-    { x: 22, y: 88, width: 20, height: 10 },
-    { x: 50, y: 88, width: 20, height: 10 },
-    { x: 78, y: 88, width: 20, height: 10 }
-];
+export const mdbaseMarkInkRects = [{
+  x: 22,
+  y: 22,
+  width: 20,
+  height: 10
+}, {
+  x: 50,
+  y: 22,
+  width: 20,
+  height: 10
+}, {
+  x: 78,
+  y: 22,
+  width: 20,
+  height: 10
+}, {
+  x: 22,
+  y: 44,
+  width: 12,
+  height: 10
+}, {
+  x: 22,
+  y: 66,
+  width: 28,
+  height: 10
+}, {
+  x: 58,
+  y: 66,
+  width: 40,
+  height: 10
+}, {
+  x: 22,
+  y: 88,
+  width: 20,
+  height: 10
+}, {
+  x: 50,
+  y: 88,
+  width: 20,
+  height: 10
+}, {
+  x: 78,
+  y: 88,
+  width: 20,
+  height: 10
+}];
 export const mdbaseMarkAccentRect = {
-    x: 42,
-    y: 44,
-    width: 56,
-    height: 10
+  x: 42,
+  y: 44,
+  width: 56,
+  height: 10
 };
 const lineYs = [22, 44, 66, 88];
 const orbitXs = [-34, -6, 22, 50, 78, 106];
 function classes(...names) {
-    return names.filter(Boolean).join(" ");
+  return names.filter(Boolean).join(" ");
 }
 /** How much of each line is filled when `progress` of the whole is done, in reading order. */
 export function mdbaseMarkLineFill(progress) {
-    const clamped = Math.min(1, Math.max(0, progress));
-    return lineYs.map((_, line) => Math.min(1, Math.max(0, clamped * lineYs.length - line)));
+  const clamped = Math.min(1, Math.max(0, progress));
+  return lineYs.map((_, line) => Math.min(1, Math.max(0, clamped * lineYs.length - line)));
 }
-function Segment({ rect, index, accent = false }) {
-    return _jsx("rect", { className: `mdbase-mark-segment mdbase-mark-segment-${index} ${accent ? "mdbase-mark-accent" : "mdbase-mark-ink"}`, ...rect });
+function Segment({
+  rect,
+  index,
+  accent = false
+}) {
+  return _jsx("rect", {
+    className: `mdbase-mark-segment mdbase-mark-segment-${index} ${accent ? "mdbase-mark-accent" : "mdbase-mark-ink"}`,
+    ...rect
+  });
 }
-function Lines({ clipRows }) {
-    const rows = _jsxs(_Fragment, { children: [_jsxs("g", { className: "mdbase-mark-row mdbase-mark-row-top", children: [_jsx(Segment, { rect: mdbaseMarkInkRects[3], index: 4 }), _jsx(Segment, { rect: mdbaseMarkAccentRect, index: 5, accent: true })] }), _jsxs("g", { className: "mdbase-mark-row mdbase-mark-row-bottom", children: [_jsx(Segment, { rect: mdbaseMarkInkRects[4], index: 6 }), _jsx(Segment, { rect: mdbaseMarkInkRects[5], index: 7 })] })] });
-    return _jsxs(_Fragment, { children: [_jsx("g", { className: "mdbase-mark-fence mdbase-mark-fence-top", children: mdbaseMarkInkRects.slice(0, 3).map((rect, index) => _jsx(Segment, { rect: rect, index: index + 1 }, `${rect.x}-${rect.y}`)) }), clipRows ? _jsx("g", { clipPath: `url(#${clipRows})`, children: rows }) : rows, _jsx("g", { className: "mdbase-mark-fence mdbase-mark-fence-bottom", children: mdbaseMarkInkRects.slice(6).map((rect, index) => _jsx(Segment, { rect: rect, index: index + 8 }, `${rect.x}-${rect.y}`)) })] });
+function Lines({
+  clipRows
+}) {
+  const rows = _jsxs(_Fragment, {
+    children: [_jsxs("g", {
+      className: "mdbase-mark-row mdbase-mark-row-top",
+      children: [_jsx(Segment, {
+        rect: mdbaseMarkInkRects[3],
+        index: 4
+      }), _jsx(Segment, {
+        rect: mdbaseMarkAccentRect,
+        index: 5,
+        accent: true
+      })]
+    }), _jsxs("g", {
+      className: "mdbase-mark-row mdbase-mark-row-bottom",
+      children: [_jsx(Segment, {
+        rect: mdbaseMarkInkRects[4],
+        index: 6
+      }), _jsx(Segment, {
+        rect: mdbaseMarkInkRects[5],
+        index: 7
+      })]
+    })]
+  });
+  return _jsxs(_Fragment, {
+    children: [_jsx("g", {
+      className: "mdbase-mark-fence mdbase-mark-fence-top",
+      children: mdbaseMarkInkRects.slice(0, 3).map((rect, index) => _jsx(Segment, {
+        rect: rect,
+        index: index + 1
+      }, `${rect.x}-${rect.y}`))
+    }), clipRows ? _jsx("g", {
+      clipPath: `url(#${clipRows})`,
+      children: rows
+    }) : rows, _jsx("g", {
+      className: "mdbase-mark-fence mdbase-mark-fence-bottom",
+      children: mdbaseMarkInkRects.slice(6).map((rect, index) => _jsx(Segment, {
+        rect: rect,
+        index: index + 8
+      }, `${rect.x}-${rect.y}`))
+    })]
+  });
 }
 /**
  * The Frontmatter mark. Without `app` it is the platform's own; with `app` it is
@@ -67,41 +138,153 @@ function Lines({ clipRows }) {
  * whatever else is running, and `progress` (0 to 1) fills the lines in reading
  * order over a faint copy of the mark. Animations live in `motion.css`.
  */
-export function MdbaseMark({ app, motion, signal, progress, className }) {
-    const uid = useId().replaceAll(":", "");
-    // An entrance plays once per mark. Dropping its class afterwards stops it replaying when a signal
-    // remounts the lines, and remembering it stops a replay when a loop or progress hands back to it.
-    const [entering, setEntering] = useState(isEntrance(motion));
-    const played = useRef(undefined);
-    useEffect(() => {
-        if (!isEntrance(motion) || played.current === motion)
-            return setEntering(false);
-        setEntering(true);
-        const timer = setTimeout(() => {
-            played.current = motion;
-            setEntering(false);
-        }, ENTRANCE_MS);
-        return () => clearTimeout(timer);
-    }, [motion]);
-    const showsProgress = typeof progress === "number" && Number.isFinite(progress);
-    const active = signal ? undefined
-        : showsProgress ? undefined
-            : isEntrance(motion) ? (entering ? motion : undefined)
-                : motion;
-    const lines = _jsx(Lines, { clipRows: active === "stream" ? `mdbase-rows-${uid}` : undefined });
-    return _jsxs("svg", { className: classes("mdbase-mark", app && "mdbase-app-mark", app && `is-${app}`, className, active && `mdbase-motion-${active}`, signal && `mdbase-signal-${signal.kind}`, showsProgress && "mdbase-mark-progress", !active && !signal && !showsProgress && "mdbase-mark-at-rest"), viewBox: MDBASE_MARK_VIEW_BOX, "aria-hidden": "true", focusable: "false", children: [active === "stream" && _jsx("defs", { children: _jsx("clipPath", { id: `mdbase-rows-${uid}`, children: _jsx("rect", { x: "22", y: "40", width: "76", height: "40" }) }) }), active === "orbit" && _jsxs("defs", { children: [_jsx("clipPath", { id: `mdbase-fence-top-${uid}`, children: _jsx("rect", { x: "22", y: "22", width: "76", height: "10" }) }), _jsx("clipPath", { id: `mdbase-fence-bottom-${uid}`, children: _jsx("rect", { x: "22", y: "88", width: "76", height: "10" }) })] }), showsProgress
-                ? _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: `mdbase-progress-${uid}`, children: mdbaseMarkLineFill(progress).map((fill, line) => _jsx("rect", { className: "mdbase-mark-progress-fill", x: "22", y: lineYs[line] - 1, height: "12", style: { width: `${(76 * fill).toFixed(2)}px` } }, line)) }) }), _jsx("g", { className: "mdbase-mark-progress-ghost", children: _jsx(Lines, {}) }), _jsx("g", { clipPath: `url(#mdbase-progress-${uid})`, children: _jsx(Lines, {}) })] })
-                // Keyed by the signal so the same reaction can restart without replaying an entrance.
-                : _jsx("g", { className: "mdbase-mark-lines", children: lines }, signal?.id ?? 0), active === "orbit" && _jsxs(_Fragment, { children: [_jsx("g", { clipPath: `url(#mdbase-fence-top-${uid})`, children: _jsx("g", { className: "mdbase-mark-track mdbase-mark-track-top", children: orbitXs.map((x) => _jsx("rect", { x: x, y: "22", width: "20", height: "10" }, x)) }) }), _jsx("g", { clipPath: `url(#mdbase-fence-bottom-${uid})`, children: _jsx("g", { className: "mdbase-mark-track mdbase-mark-track-bottom", children: orbitXs.map((x) => _jsx("rect", { x: x, y: "88", width: "20", height: "10" }, x)) }) })] })] });
+export function MdbaseMark({
+  app,
+  motion,
+  signal,
+  progress,
+  className
+}) {
+  const uid = useId().replaceAll(":", "");
+  // An entrance plays once per mark. Dropping its class afterwards stops it replaying when a signal
+  // remounts the lines, and remembering it stops a replay when a loop or progress hands back to it.
+  const [entering, setEntering] = useState(isEntrance(motion));
+  const played = useRef(undefined);
+  useEffect(() => {
+    if (!isEntrance(motion) || played.current === motion) return setEntering(false);
+    setEntering(true);
+    const timer = setTimeout(() => {
+      played.current = motion;
+      setEntering(false);
+    }, ENTRANCE_MS);
+    return () => clearTimeout(timer);
+  }, [motion]);
+  const showsProgress = typeof progress === "number" && Number.isFinite(progress);
+  const active = signal ? undefined : showsProgress ? undefined : isEntrance(motion) ? entering ? motion : undefined : motion;
+  const lines = _jsx(Lines, {
+    clipRows: active === "stream" ? `mdbase-rows-${uid}` : undefined
+  });
+  return _jsxs("svg", {
+    className: classes("mdbase-mark", app && "mdbase-app-mark", app && `is-${app}`, className, active && `mdbase-motion-${active}`, signal && `mdbase-signal-${signal.kind}`, showsProgress && "mdbase-mark-progress", !active && !signal && !showsProgress && "mdbase-mark-at-rest"),
+    viewBox: MDBASE_MARK_VIEW_BOX,
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [active === "stream" && _jsx("defs", {
+      children: _jsx("clipPath", {
+        id: `mdbase-rows-${uid}`,
+        children: _jsx("rect", {
+          x: "22",
+          y: "40",
+          width: "76",
+          height: "40"
+        })
+      })
+    }), active === "orbit" && _jsxs("defs", {
+      children: [_jsx("clipPath", {
+        id: `mdbase-fence-top-${uid}`,
+        children: _jsx("rect", {
+          x: "22",
+          y: "22",
+          width: "76",
+          height: "10"
+        })
+      }), _jsx("clipPath", {
+        id: `mdbase-fence-bottom-${uid}`,
+        children: _jsx("rect", {
+          x: "22",
+          y: "88",
+          width: "76",
+          height: "10"
+        })
+      })]
+    }), showsProgress ? _jsxs(_Fragment, {
+      children: [_jsx("defs", {
+        children: _jsx("clipPath", {
+          id: `mdbase-progress-${uid}`,
+          children: mdbaseMarkLineFill(progress).map((fill, line) => _jsx("rect", {
+            className: "mdbase-mark-progress-fill",
+            x: "22",
+            y: lineYs[line] - 1,
+            height: "12",
+            style: {
+              width: `${(76 * fill).toFixed(2)}px`
+            }
+          }, line))
+        })
+      }), _jsx("g", {
+        className: "mdbase-mark-progress-ghost",
+        children: _jsx(Lines, {})
+      }), _jsx("g", {
+        clipPath: `url(#mdbase-progress-${uid})`,
+        children: _jsx(Lines, {})
+      })]
+    })
+    // Keyed by the signal so the same reaction can restart without replaying an entrance.
+    : _jsx("g", {
+      className: "mdbase-mark-lines",
+      children: lines
+    }, signal?.id ?? 0), active === "orbit" && _jsxs(_Fragment, {
+      children: [_jsx("g", {
+        clipPath: `url(#mdbase-fence-top-${uid})`,
+        children: _jsx("g", {
+          className: "mdbase-mark-track mdbase-mark-track-top",
+          children: orbitXs.map(x => _jsx("rect", {
+            x: x,
+            y: "22",
+            width: "20",
+            height: "10"
+          }, x))
+        })
+      }), _jsx("g", {
+        clipPath: `url(#mdbase-fence-bottom-${uid})`,
+        children: _jsx("g", {
+          className: "mdbase-mark-track mdbase-mark-track-bottom",
+          children: orbitXs.map(x => _jsx("rect", {
+            x: x,
+            y: "88",
+            width: "20",
+            height: "10"
+          }, x))
+        })
+      })]
+    })]
+  });
 }
 /** An app's mark. Kept for callers that only ever draw an app's still mark. */
-export function MdbaseAppMark({ app, className }) {
-    return _jsx(MdbaseMark, { app: app, className: className });
+export function MdbaseAppMark({
+  app,
+  className
+}) {
+  return _jsx(MdbaseMark, {
+    app: app,
+    className: className
+  });
 }
 /**
  * `mdbase` followed by the product's quieter name. Editor carries the platform mark
  * as the canonical app; Reader and Writer carry their app marks.
  */
-export function Wordmark({ app, motion, signal, progress }) {
-    return _jsxs("span", { className: "wordmark", children: [_jsx(MdbaseMark, { app: app === "editor" ? undefined : app, motion: motion, signal: signal, progress: progress, className: "wordmark-mark" }), _jsxs("span", { className: "wordmark-label", children: [_jsx("span", { children: "mdbase" }), _jsx("strong", { children: app })] })] });
+export function Wordmark({
+  app,
+  motion,
+  signal,
+  progress
+}) {
+  return _jsxs("span", {
+    className: "wordmark",
+    children: [_jsx(MdbaseMark, {
+      app: app === "editor" ? undefined : app,
+      motion: motion,
+      signal: signal,
+      progress: progress,
+      className: "wordmark-mark"
+    }), _jsxs("span", {
+      className: "wordmark-label",
+      children: [_jsx("span", {
+        children: "mdbase"
+      }), _jsx("strong", {
+        children: app
+      })]
+    })]
+  });
 }