@glimstone/core 4.1.0 → 4.1.2

package/README.md

@@ -22,6 +22,10 @@ npm install @glimstone/core
   select's list model, the Info tile's version links and update check, the
   README button's classes, where a bubble goes, a dialog's keys and the toast
   queue.
+- What a text field and its row share: `textFieldClass` and `fieldWidthClass`
+  say how a field looks and how wide it is, `pressRowControl` does what a click
+  on a row's label does, `treeRows` and `treeStep` hold a tree's rows and keys, and
+  `tableCellClass` says what a table's cell wears.
 - What windows and menus share: `windowFoot` adds the way out, `stackWindow`
   gives Escape and Tab to the window in front, and `menu.ts` holds the menu
   model with `tidyMenu`, `menuRowView`, `placeMenu`, `menuMove`,

package/dist/button.d.ts

@@ -18,6 +18,8 @@ export type ButtonTone = "accent" | "neutral" | "subtle" | "ok" | "danger" | "wa
  *           ordinary reactive button, because it grows on hover.
  */
 export type ButtonVariant = "default" | "chip" | "icon";
+/** `key` is the second height, for the button a surface exists for (rule 19). */
+export type ButtonSize = "normal" | "key";
 export interface ButtonInput {
     /** The current mode of the "buttons" label axis. */
     mode: LabelMode;
@@ -29,6 +31,9 @@ export interface ButtonInput {
     variant: ButtonVariant;
     disabled: boolean;
     keepLabel: boolean;
+    /** Its glyph alone in a square in every label mode, where the words have no room. */
+    compact?: boolean;
+    size?: ButtonSize;
     title?: string;
     hueIndex?: number;
     stage?: WidthStage;

package/dist/button.js

@@ -27,10 +27,11 @@ const TONE_CLASS = {
 };
 export function buttonView(b) {
     const chip = b.variant === "chip";
-    const iconOnly = b.variant === "icon";
+    const compact = !!b.compact && b.hasGlyph;
+    const iconOnly = b.variant === "icon" || compact;
     // A glyphless button shows its text in both hiding modes, and keepLabel
     // keeps the glyph beside the text when there is one.
-    const effective = chip
+    const effective = chip || compact
         ? "glyph"
         : b.keepLabel
             ? b.hasGlyph
@@ -73,7 +74,7 @@ export function buttonView(b) {
     return {
         showGlyph: effective !== "text" && b.hasGlyph,
         labelClass: showText ? "glim-btn-label" : reactive ? "glim-label-reactive" : "glim-sr-only",
-        className: `glim-btn ${stage} ${chip ? "" : TONE_CLASS[b.tone]}${hueOn ? " glim-hue" : ""}${reactive ? " glim-reactive" : ""}`,
+        className: `glim-btn ${stage} ${chip ? "" : TONE_CLASS[b.tone]}${b.size === "key" ? " glim-btn-key" : ""}${hueOn ? " glim-hue" : ""}${reactive ? " glim-reactive" : ""}`,
         style: Object.keys(style).length ? style : undefined,
         tip: reactive && !b.disabled ? undefined : tip,
         // The surface tones carry rule 40's tint; a button with its own palette

package/dist/field.d.ts

@@ -0,0 +1,21 @@
+/**
+ * How wide a field is. `fill` takes its column. `short` holds a port or a time,
+ * `medium` a word, `wide` a line of text, and `grow` takes what its row has left.
+ */
+export type FieldWidth = "fill" | "short" | "medium" | "wide" | "grow";
+/** The class of a width, for a text field or any wrapper that carries one. */
+export declare function fieldWidthClass(width?: FieldWidth): string;
+/** The classes of a text field or a text area. */
+export declare function textFieldClass({ width, mono, area }: {
+    width?: FieldWidth;
+    mono?: boolean;
+    area?: boolean;
+}): string;
+/** Below this width a PathField's button shows its glyph alone and leaves the room to the path. */
+export declare const PATH_ROOM_PX = 320;
+/**
+ * What a click on a row's label does, as a real label would: a field takes the
+ * focus and a switch flips. A selector stays as it is, since no one segment is
+ * the row's.
+ */
+export declare function pressRowControl(row: HTMLElement): void;

package/dist/field.js

@@ -0,0 +1,26 @@
+// The text field and the row a control stands in ("A dropdown or a one-line
+// field stands beside its label", rule 35).
+/** The class of a width, for a text field or any wrapper that carries one. */
+export function fieldWidthClass(width = "fill") {
+    return width === "fill" ? "" : `glim-field--${width}`;
+}
+/** The classes of a text field or a text area. */
+export function textFieldClass({ width, mono, area }) {
+    return ["glim-input", area && "glim-input--area", mono && "glim-input--mono", fieldWidthClass(width)].filter(Boolean).join(" ");
+}
+/** Below this width a PathField's button shows its glyph alone and leaves the room to the path. */
+export const PATH_ROOM_PX = 320;
+const FIELD = 'input:not([type="hidden"]), textarea';
+const PRESSABLE = '[role="switch"], [role="checkbox"], .glim-select-trigger';
+/**
+ * What a click on a row's label does, as a real label would: a field takes the
+ * focus and a switch flips. A selector stays as it is, since no one segment is
+ * the row's.
+ */
+export function pressRowControl(row) {
+    const control = row.querySelector(`${FIELD}, ${PRESSABLE}`);
+    if (control?.matches(FIELD))
+        control.focus();
+    else
+        control?.click();
+}

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from "./controls.ts";
 export * from "./dialog.ts";
 export * from "./disco.ts";
 export * from "./discoLoop.ts";
+export * from "./field.ts";
 export * from "./flagEmoji.ts";
 export * from "./infoTile.ts";
 export * from "./inputModality.ts";
@@ -31,7 +32,9 @@ export * from "./selectScroll.ts";
 export * from "./sidebarRow.ts";
 export * from "./storage.ts";
 export * from "./tipBubble.ts";
+export * from "./table.ts";
 export * from "./toastEngine.ts";
 export * from "./tooltip.ts";
+export * from "./tree.ts";
 export * from "./version.ts";
 export * from "./window.ts";

package/dist/index.js

@@ -10,6 +10,7 @@ export * from "./controls.js";
 export * from "./dialog.js";
 export * from "./disco.js";
 export * from "./discoLoop.js";
+export * from "./field.js";
 export * from "./flagEmoji.js";
 export * from "./infoTile.js";
 export * from "./inputModality.js";
@@ -31,7 +32,9 @@ export * from "./selectScroll.js";
 export * from "./sidebarRow.js";
 export * from "./storage.js";
 export * from "./tipBubble.js";
+export * from "./table.js";
 export * from "./toastEngine.js";
 export * from "./tooltip.js";
+export * from "./tree.js";
 export * from "./version.js";
 export * from "./window.js";

package/dist/marks.d.ts

@@ -65,6 +65,12 @@ export declare const MARKS: {
         size: number;
         body: string;
     };
+    /** `IconFolderOpen`: a PathField's button. */
+    folderOpen: {
+        viewBox: string;
+        size: number;
+        body: string;
+    };
     /** The small cross that dismisses a toast. */
     dismiss: {
         viewBox: string;

package/dist/marks.js

@@ -72,6 +72,12 @@ export const MARKS = {
         size: 16,
         body: '<path d="M20.926 7.074a3.67 3.67 0 0 1 1.074 2.593v8.666a3.667 3.667 0 0 1 -3.667 3.667h-8.666a3.667 3.667 0 0 1 -3.667 -3.667v-8.666q 0 -.053 .005 -.102a3.66 3.66 0 0 1 3.662 -3.565h8.666c.973 0 1.905 .386 2.593 1.074" /><path d="M17.374 3.514a1 1 0 1 1 -1.748 .972c-.221 -.398 -.342 -.486 -.626 -.486h-10c-.548 0 -1 .452 -1 1v9.998c0 .36 .194 .692 .507 .87a1 1 0 1 1 -.99 1.738a3 3 0 0 1 -1.517 -2.606v-10c0 -1.652 1.348 -3 3 -3h10c1.094 0 1.828 .533 2.374 1.514" />',
     },
+    /** `IconFolderOpen`: a PathField's button. */
+    folderOpen: {
+        viewBox: "0 -31.981 575.963 575.963",
+        size: 16,
+        body: '<path d="M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z"/>',
+    },
     /** The small cross that dismisses a toast. */
     dismiss: {
         viewBox: "0 0 16 16",

package/dist/media.d.ts

@@ -2,6 +2,8 @@
 export declare const DESKTOP_QUERY = "(min-width: 48rem)";
 /** At least this wide, the column of tiles shows words; below it glyphs alone. */
 export declare const WIDE_QUERY = "(min-width: 64rem)";
+/** The query for a window narrower than this many pixels. */
+export declare function narrowerThan(px: number): string;
 export declare function mediaMatches(query: string): boolean;
 /** Calls `fn` whenever the query flips, and returns the unsubscribe. */
 export declare function subscribeMedia(query: string, fn: () => void): () => void;

package/dist/media.js

@@ -4,6 +4,10 @@
 export const DESKTOP_QUERY = "(min-width: 48rem)";
 /** At least this wide, the column of tiles shows words; below it glyphs alone. */
 export const WIDE_QUERY = "(min-width: 64rem)";
+/** The query for a window narrower than this many pixels. */
+export function narrowerThan(px) {
+    return `(max-width: ${px - 0.02}px)`;
+}
 export function mediaMatches(query) {
     return typeof matchMedia === "function" && matchMedia(query).matches;
 }

package/dist/menu.d.ts

@@ -16,6 +16,8 @@ export interface MenuItem<G> {
     radio?: boolean;
     /** Entries that open beside this row. */
     sub?: MenuEntry<G>[];
+    /** The id of the menu `sub` opens, for a caller or a script that looks for it. */
+    subId?: string;
     onSelect?: () => void;
 }
 export interface MenuHead<G> {

package/dist/selectModel.d.ts

@@ -38,6 +38,23 @@ export declare function selectRootClass(width: SelectWidth): string;
 /** The trigger's classes. `wrap` lets a long value run onto a second line, for one whose end says as much as its start, such as a path. */
 export declare function selectTriggerClass(size: SelectSize, wrap: boolean): string;
 export declare function selectContentClass(glyphs: boolean): string;
+/**
+ * Which rows an open list draws. `menu` takes a context menu's, so an app with
+ * both shows one kind of menu row.
+ */
+export type SelectRows = "list" | "menu";
+export interface SelectRowParts {
+    content: string;
+    item: string;
+    /** The glyph's room, or null where no row of a list has one. A menu row keeps it always. */
+    glyph: string | null;
+    label: string;
+    check: string;
+    caret: string;
+    heading: string;
+}
+/** The classes of an open list and its rows. */
+export declare function selectRowParts(rows: SelectRows, glyphs: boolean): SelectRowParts;
 /** A field defaults to `fill`, the smaller sizes to `steady`. */
 export declare function defaultWidth(size: SelectSize): SelectWidth;
 export declare const SELECT_POSITIONING: {

package/dist/selectModel.js

@@ -24,6 +24,29 @@ export function selectTriggerClass(size, wrap) {
 export function selectContentClass(glyphs) {
     return `glim-select-content glim-fade${glyphs ? " glim-select-content--glyphs" : ""}`;
 }
+/** The classes of an open list and its rows. */
+export function selectRowParts(rows, glyphs) {
+    const content = selectContentClass(glyphs);
+    return rows === "menu"
+        ? {
+            content: `${content} glim-select-content--menu`,
+            item: "glim-menu-item",
+            glyph: "glim-menu-glyph",
+            label: "glim-menu-label",
+            check: "glim-menu-end glim-menu-tick",
+            caret: "glim-menu-end glim-menu-caret",
+            heading: "glim-menu-head",
+        }
+        : {
+            content,
+            item: "glim-select-item",
+            glyph: glyphs ? "glim-select-glyph" : null,
+            label: "glim-select-label",
+            check: "glim-select-check",
+            caret: "glim-select-caret",
+            heading: "glim-select-heading",
+        };
+}
 /** A field defaults to `fill`, the smaller sizes to `steady`. */
 export function defaultWidth(size) {
     return size === "field" ? "fill" : "steady";

package/dist/selector.d.ts

@@ -34,7 +34,7 @@ export declare const MAX_PINNED_WIDTH = 352;
  */
 export declare function pinnedWidth(widest: number, count: number, room: number, gap: number): number;
 /** The id of a tab in a strip that switches `panelId`; the panel names itself after it. */
-export declare function selectorTabId(panelId: string, itemId: string): string;
+export declare function selectorTabId(panelId: string, itemId: string | number): string;
 /**
  * The label axis a selector follows. The page-level strips are tabs, the
  * smaller ones stand in form rows beside buttons, and the column of tiles
@@ -56,7 +56,7 @@ export declare function nextFocusIndex(key: SelectorNavKey, current: number, cou
  */
 export declare function rovedIndex(disabled: boolean[], activeIndex: number): number;
 /** The value of a "many" selector once `id` is toggled, in the items' order. */
-export declare function toggleSelection(value: readonly string[], id: string, order: readonly string[]): string[];
+export declare function toggleSelection<V>(value: readonly V[], id: V, order: readonly V[]): V[];
 /**
  * Moves the focus for a key press inside `track` and returns the segment it
  * landed on, or null when the key is not one the strip answers. Disabled

package/dist/sidebarRow.d.ts

@@ -9,6 +9,10 @@ export interface SidebarRowInput {
     hueIndex?: number;
     /** The figure on the row; nothing shows at zero. */
     count?: number;
+    /** Something stands beside the link in the row, so it is never centred. */
+    framed?: boolean;
+    /** A tree's row: stepped in by its level, with a smaller glyph and gap. */
+    depth?: number;
 }
 export interface SidebarRowView {
     className: string;

package/dist/sidebarRow.js

@@ -15,14 +15,19 @@ export function sidebarRowView(r) {
     const showLabel = !hidesLabel(mode);
     const reactive = mode === "reactive";
     const hued = r.hueIndex !== undefined;
+    const tree = r.depth !== undefined;
+    // A tree's depth and a slot's control mean nothing in the middle of the row.
+    const centred = !showLabel && !r.framed && !tree;
     const style = {
         ...(hued ? hueVars(r.hueIndex) : {}),
+        ...(tree ? { "--nav-depth": String(r.depth) } : {}),
         ...(reactive ? { "--reactive-chars": String(labelWidth(r.label)) } : {}),
     };
     return {
         className: [
             "glim-nav-row",
-            !showLabel && "glim-nav-row--centred",
+            centred && "glim-nav-row--centred",
+            tree && "glim-nav-row--tree",
             reactive && "glim-reactive",
             hued && "glim-hue glim-hue-icon",
             r.active && "glim-active",

package/dist/table.d.ts

@@ -0,0 +1,12 @@
+export interface TableColumn {
+    /** Which field of a row the column shows. */
+    key: string;
+    /** The column's heading. A table with no heading at all draws no header row. */
+    label?: string;
+    /** Sets the column at the end, in figures that line up (rule 7). */
+    end?: boolean;
+    /** `muted` for a quiet column, `accent` for what changes. */
+    tone?: "muted" | "accent";
+}
+/** The classes of a cell. */
+export declare function tableCellClass(column: TableColumn): string;

package/dist/table.js

@@ -0,0 +1,5 @@
+// What a table is handed, and the classes its cells wear.
+/** The classes of a cell. */
+export function tableCellClass(column) {
+    return [column.end && "glim-table-end glim-num", column.tone && `glim-table-${column.tone}`].filter(Boolean).join(" ");
+}

package/dist/toastEngine.d.ts

@@ -5,10 +5,16 @@ export declare const TOAST_DURATION_MS = 4000;
  *  viewport. Without a cap, a held Enter key grows the stack off-screen, where
  *  its cards still block clicks on the page. */
 export declare const MAX_VISIBLE_TOASTS = 4;
+/** A button on a toast, such as Undo. A press runs it and dismisses the toast. */
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
 export interface ToastEntry {
     id: string;
     message: string;
     severity: ToastSeverity;
+    action?: ToastAction;
     /** What is left of the duration, authoritative only while paused
      *  (expiresAt === null). */
     remainingMs: number;
@@ -26,6 +32,7 @@ export declare function addToast(list: ToastEntry[], toast: {
     id: string;
     message: string;
     severity: ToastSeverity;
+    action?: ToastAction;
 }, now: number, durationMs?: number, maxVisible?: number): ToastEntry[];
 /** Removes one toast and leaves the others alone. Unknown ids are ignored. */
 export declare function removeToast(list: ToastEntry[], id: string): ToastEntry[];
@@ -54,6 +61,11 @@ export declare function applyEngagement(prev: Readonly<ToastEngagement>, kind: T
     next: ToastEngagement;
     engaged: boolean;
 };
+/**
+ * A message cut after each slash, for a <wbr> between the parts, so a path breaks
+ * at a folder rather than inside a name.
+ */
+export declare function softBreaks(message: string): string[];
 /** Quiet mode filters by severity: it hides routine successes, never warnings
  *  or failures. */
 export declare function shouldShowToast(severity: ToastSeverity, quiet: boolean): boolean;

package/dist/toastEngine.js

@@ -24,6 +24,7 @@ export function addToast(list, toast, now, durationMs = TOAST_DURATION_MS, maxVi
         id: toast.id,
         message: toast.message,
         severity: toast.severity,
+        action: toast.action,
         remainingMs: durationMs,
         expiresAt: now + durationMs,
     };
@@ -76,6 +77,13 @@ export function applyEngagement(prev, kind, active) {
     const next = { ...prev, [kind]: active };
     return { next, engaged: next.hover || next.focus };
 }
+/**
+ * A message cut after each slash, for a <wbr> between the parts, so a path breaks
+ * at a folder rather than inside a name.
+ */
+export function softBreaks(message) {
+    return message.split(/(?<=[/\\])/);
+}
 /** Quiet mode filters by severity: it hides routine successes, never warnings
  *  or failures. */
 export function shouldShowToast(severity, quiet) {

package/dist/tree.d.ts

@@ -0,0 +1,38 @@
+export interface TreeNode<G = unknown> {
+    /** Unique in the tree, such as a path. */
+    id: string;
+    label: string;
+    /** Whether the row can open. Its children are asked for the first time it does. */
+    hasChildren?: boolean;
+    glyph?: G;
+    /** Takes the glyph's place while the row is open. */
+    openGlyph?: G;
+    /** Attributes for the row, such as a data hook. */
+    attrs?: Record<string, string>;
+}
+export interface TreeRow<G = unknown> {
+    node: TreeNode<G>;
+    /** From 1, as aria-level counts. */
+    level: number;
+    position: number;
+    siblings: number;
+    parent: string | null;
+    open: boolean;
+}
+/** The rows on show, top to bottom. The top level's children are filed under null. */
+export declare function treeRows<G>(children: ReadonlyMap<string | null, readonly TreeNode<G>[]>, open: readonly string[]): TreeRow<G>[];
+export type TreeStep = {
+    focus: string;
+} | {
+    open: string;
+} | {
+    close: string;
+};
+/**
+ * What a key does on the row at `at`, or null when the tree does not answer it.
+ * Right and left swap under a right-to-left page. A letter goes to the next row
+ * starting with it, wrapping at the end.
+ */
+export declare function treeStep<G>(rows: readonly TreeRow<G>[], at: number, key: string, rtl?: boolean): TreeStep | null;
+/** Puts the focus on a row. */
+export declare function focusTreeRow(tree: HTMLElement, id: string): void;

package/dist/tree.js

@@ -0,0 +1,57 @@
+// The model behind Tree: which rows are on show and what a key does there. The
+// frameworks hold the children and draw the rows; the glyph type is theirs.
+/** The rows on show, top to bottom. The top level's children are filed under null. */
+export function treeRows(children, open) {
+    const rows = [];
+    const walk = (parent, level) => {
+        const nodes = children.get(parent) ?? [];
+        nodes.forEach((node, i) => {
+            const isOpen = !!node.hasChildren && open.includes(node.id);
+            rows.push({ node, level, position: i + 1, siblings: nodes.length, parent, open: isOpen });
+            if (isOpen)
+                walk(node.id, level + 1);
+        });
+    };
+    walk(null, 1);
+    return rows;
+}
+/**
+ * What a key does on the row at `at`, or null when the tree does not answer it.
+ * Right and left swap under a right-to-left page. A letter goes to the next row
+ * starting with it, wrapping at the end.
+ */
+export function treeStep(rows, at, key, rtl = false) {
+    const row = rows[at];
+    const focus = (target) => (target ? { focus: target.node.id } : null);
+    switch (key) {
+        case "ArrowDown":
+            return focus(rows[at + 1]);
+        case "ArrowUp":
+            return focus(rows[at - 1]);
+        case "Home":
+            return focus(rows[0]);
+        case "End":
+            return focus(rows[rows.length - 1]);
+        case "ArrowRight":
+        case "ArrowLeft": {
+            const inward = key === (rtl ? "ArrowLeft" : "ArrowRight");
+            if (inward) {
+                if (!row.node.hasChildren)
+                    return null;
+                return row.open ? focus(rows[at + 1]?.parent === row.node.id ? rows[at + 1] : undefined) : { open: row.node.id };
+            }
+            if (row.open)
+                return { close: row.node.id };
+            return row.parent === null ? null : { focus: row.parent };
+        }
+    }
+    if (key.length !== 1 || key === " ")
+        return null;
+    const letter = key.toLowerCase();
+    const after = [...rows.slice(at + 1), ...rows.slice(0, at)];
+    return focus(after.find((r) => r.node.label.toLowerCase().startsWith(letter)));
+}
+/** Puts the focus on a row. */
+export function focusTreeRow(tree, id) {
+    tree.querySelector(`[data-tree-id="${CSS.escape(id)}"]`)?.focus();
+}

package/dist/version.d.ts

@@ -2,4 +2,4 @@
  * The version every GlimStone package carries, so an app's Version card names
  * the one it runs. All packages share it and move together.
  */
-export declare const GLIMSTONE_VERSION = "4.1.0";
+export declare const GLIMSTONE_VERSION = "4.1.2";

package/dist/version.js

@@ -2,4 +2,4 @@
  * The version every GlimStone package carries, so an app's Version card names
  * the one it runs. All packages share it and move together.
  */
-export const GLIMSTONE_VERSION = "4.1.0";
+export const GLIMSTONE_VERSION = "4.1.2";

package/glyph-map.md

@@ -384,11 +384,11 @@ FireSquire wears seven glyphs on the buttons of its pre-reboot check and on the
 
 <br>
 
-## CastleCommander
+## CannonCommander
 
-CastleCommander's new interface draws every glyph from the assortment. The rows below are the meanings that came into it with the file manager, and the others follow once its screens are built.
+CannonCommander's new interface draws every glyph from the assortment. The rows below are the meanings that came into it with the file manager, and the others follow once its screens are built.
 
-| Meaning | GlimStone | CastleCommander |
+| Meaning | GlimStone | CannonCommander |
 | --- | --- | --- |
 | Reset one row of a colour card to its defaults | `IconResetArrow` | `IconResetArrow`, standard |
 | Give through PayPal | `IconPayPal` | `IconPayPal`, standard |
@@ -416,7 +416,7 @@ CastleCommander's new interface draws every glyph from the assortment. The rows
 
 - **ArrowLoop:** `scripts/gen_glyphs.py` writes the app's glyphs, and the Look settings glyphs come from it, for the web and, through `scripts/gen_glyph_data.py`, for the phone. `web/src/lib/glyphName.ts` maps a translation key to a glyph name, and a key it does not know keeps its text.
 - **BombVault:** `scripts/gen_glyphs.py` writes `web/src/components/glyphs.tsx` and `navGlyphs.tsx` from a copy of `glyphs.json` at 16px; the phone app shows the web launcher and uses the same files. `glyphFor.tsx` maps a translation key to a glyph when a button passes none; a button that passes one wins.
-- **CastleCommander:** the frontend maps a file's kind to a glyph name through `prototype/src/formats.json` and draws the entry from `glyphs.json` through `@glimstone/vue`.
+- **CannonCommander:** the frontend maps a file's kind to a glyph name through `prototype/src/formats.json` and draws the entry from `glyphs.json` through `@glimstone/vue`.
 - **FireSquire:** `firesquire-glyphs.js` beside its scripts holds a copy of every entry it draws, the square viewBox and the drawing, and names the GlimStone release it came from. `plugin/test/glyphs.test.js` checks that every glyph a button asks for is in the copy.
 - **KnightLoader:** `web/scripts/gen-glyphs.mjs` writes `web/src/lib/glyphs.tsx` at 22px with the ink at three quarters of the box; the Android app has no SVG and shows tinted bitmaps rendered from the same list into `mobile/assets/`. Every call site passes its glyph; Settings page glyphs are mapped in `pages/settings/pageIcons.tsx`. The browser extension copies the eye and a few others in `extension/src/`.
 - **ShipLog:** `include/glyphs.php` holds a copy of every entry it draws. `shiplog.page` uses them on the settings page, and `shiplog.Docker.page` hands four of them to `scripts/docker.js` for the changelog window.