forgebook 0.1.8 → 0.2.0

package/dist/src/shell/dockTabs.d.ts

@@ -1,17 +1,22 @@
 /**
  * The tabs a story's panel shows: Props, Events and Parts and styling from its component's docs, Code from its file,
- * Accessibility always; a tab the story has nothing for is left out. A story about logic opens on its hook's Signature
- * and shows no tab of args (`logicTabs`).
+ * the plugins', Accessibility always; a tab the story has nothing for is left out. A story about logic opens on its hook's
+ * Signature and shows no tab of args (`logicTabs`).
+ *
+ * @remarks
+ * The dock draws only the chosen tab's content, and most stories open on Props: the other tabs' modules (Events,
+ * Interactions, Parts and styling, Code, Accessibility) load the first time each is chosen (`lazyModule.tsx`), and a
+ * plugin's the first time it is shown, so a first load fetches none of them. What the row of tabs shows of them (a hint, whether there is one) is in `tabSummaries`.
  *
  * @module
  */
 import type { StoryControlsSetting, StoryFileCode } from "@forgebook/story-format/source";
 import { type PanelArgTypes } from "../argTypes.ts";
-import type { ComponentDocs } from "../componentDocs.ts";
+import { type ComponentDocs } from "../componentDocs.ts";
 import type { ArgValue, PanelArgs } from "../messages.ts";
 import type { NamedValues } from "../namedValues.ts";
 import type { PlayTrace } from "../playTrace.ts";
-import { type CheckState } from "./A11yTab.tsx";
+import type { CheckState } from "./A11yTab.tsx";
 import type { DockTab } from "./Dock.tsx";
 import { type TextArgNote } from "./PropsTab.tsx";
 import type { EventCall } from "./useFrameMessages.ts";
@@ -47,6 +52,8 @@ export type DockTabsInput = {
     readonly namedValues: NamedValues | undefined;
     /** The props the story gives a text by its key, by name. */
     readonly textArgs: Readonly<Record<string, TextArgNote>>;
+    /** The prop groups the component's meta lists first, in order (`parameters.propGroups`); empty when none. */
+    readonly propGroups: readonly string[];
     /** The story's calls, newest first. */
     readonly calls: readonly EventCall[];
     /** Clears the calls. */
@@ -59,6 +66,8 @@ export type DockTabsInput = {
     readonly check: CheckState;
     /** Runs it; none when it cannot run. */
     readonly onCheck: (() => void) | undefined;
+    /** The plugins' tabs the story has something for. */
+    readonly pluginTabs: readonly DockTab[];
 };
 /**
  * The tabs of a story's panel, in order.
@@ -66,4 +75,3 @@ export type DockTabsInput = {
  * @param input - the docs, the code, the values, the calls, the check and their setters.
  */
 export declare const dockTabs: (input: DockTabsInput) => DockTab[];
-//# sourceMappingURL=dockTabs.d.ts.map

package/dist/src/shell/dockTabs.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { panelProps } from "../argTypes.js";
-import { A11yTab, a11yHint } from "./A11yTab.js";
-import { CodeTab } from "./CodeTab.js";
-import { EventsTab } from "./EventsTab.js";
-import { InteractionsTab, interactionsHint } from "./InteractionsTab.js";
-import { PartsTab, styleHooks } from "./PartsTab.js";
+import { codeNameOf } from "../componentDocs.js";
+import { lazyModule } from "./lazyModule.js";
+import { LazyTab } from "./lazyTab.js";
 import { PropsTab } from "./PropsTab.js";
 import { SignatureReference } from "./SignatureReference.js";
 import { STRINGS } from "./strings.js";
+import { a11yHint, interactionsHint, styleHooks } from "./tabSummaries.js";
+/** The Events tab, its module, loaded when the tab is first chosen. */
+const EVENTS_TAB = lazyModule(() => import("./EventsTab.js").then((module) => module.EventsTab));
+/** The Interactions tab, its module, loaded when the tab is first chosen. */
+const INTERACTIONS_TAB = lazyModule(() => import("./InteractionsTab.js").then((module) => module.InteractionsTab));
+/** The Parts and styling tab, its module, loaded when the tab is first chosen. */
+const PARTS_TAB = lazyModule(() => import("./PartsTab.js").then((module) => module.PartsTab));
+/** The Code tab, its module, loaded when the tab is first chosen. */
+const CODE_TAB = lazyModule(() => import("./CodeTab.js").then((module) => module.CodeTab));
+/** The Accessibility tab, its module, loaded when the tab is first chosen. */
+const A11Y_TAB = lazyModule(() => import("./A11yTab.js").then((module) => module.A11yTab));
 /** A message in place of a tab's content: the docs or the code are loading or could not be read. */
 const notice = (text, isProblem) => (_jsx("p", { className: isProblem ? "forgebook-problems" : "forgebook-tab-note", role: isProblem ? "alert" : undefined, children: text }));
 /**
@@ -21,7 +30,7 @@ const propsTab = (input, props) => props.some((prop) => prop.kind !== "event")
         {
             id: "props",
             label: STRINGS.tabs.props,
-            content: (_jsx(PropsTab, { props: props, values: input.values, controls: input.controls, onValueChange: input.onValueChange, onReset: input.onReset, worstCase: input.worstCase, namedValues: input.namedValues, textArgs: input.textArgs }))
+            content: (_jsx(PropsTab, { props: props, values: input.values, controls: input.controls, onValueChange: input.onValueChange, onReset: input.onReset, worstCase: input.worstCase, namedValues: input.namedValues, textArgs: input.textArgs, componentGroups: input.propGroups }))
         }
     ]
     : [];
@@ -42,19 +51,19 @@ const eventsOf = (props, actions) => {
     ];
 };
 /**
- * The Events tab, when the story has an event or an action.
+ * The Events tab, when the story has an event or an action, or made a call a framework reports (a router's `push`).
  *
  * @param input - what the tabs are built from.
  * @param events - the events and actions.
  */
-const eventsTab = (input, events) => events.length === 0
+const eventsTab = (input, events) => events.length === 0 && input.calls.length === 0
     ? []
     : [
         {
             id: "events",
             label: STRINGS.tabs.events,
             hint: input.calls.length === 0 ? undefined : String(input.calls.length),
-            content: _jsx(EventsTab, { events: events, calls: input.calls, onClearCalls: input.onClearCalls })
+            content: (_jsx(LazyTab, { module: EVENTS_TAB, tabProps: { events, calls: input.calls, onClearCalls: input.onClearCalls } }))
         }
     ];
 /** The tabs read from the component's docs: Props, Events, Parts and styling. */
@@ -72,10 +81,13 @@ const docsTabs = (input) => {
     const docsTab = input.isLogic
         ? { id: "signature", label: STRINGS.tabs.signature }
         : { id: "props", label: STRINGS.tabs.props };
+    // the play's trace comes from the frame, not from the docs: a first read of a project's docs can take seconds, and a
+    // play that finished meanwhile is shown without waiting for them, or when they fail
+    const played = input.trace === undefined ? [] : [interactionsTab(input.trace, input.onPlayAgain)];
     if (docs.status === "loading")
-        return [{ ...docsTab, content: notice(STRINGS.docsLoading, false) }];
+        return [{ ...docsTab, content: notice(STRINGS.docsLoading, false) }, ...played];
     if (docs.status === "error") {
-        return [{ ...docsTab, content: notice(`${STRINGS.docsError}: ${docs.message}`, true) }];
+        return [{ ...docsTab, content: notice(`${STRINGS.docsError}: ${docs.message}`, true) }, ...played];
     }
     const component = docs.value;
     const events = eventsOf(component.props, input.actions);
@@ -91,7 +103,7 @@ const docsTabs = (input) => {
             id: "parts",
             label: STRINGS.tabs.parts,
             hint: component.parts.length === 0 ? undefined : STRINGS.partCount(component.parts.length),
-            content: _jsx(PartsTab, { docs: component })
+            content: _jsx(LazyTab, { module: PARTS_TAB, tabProps: { docs: component } })
         });
     }
     return tabs;
@@ -122,14 +134,19 @@ const interactionsTab = (trace, onPlayAgain) => ({
     id: "play",
     label: STRINGS.tabs.play,
     hint: interactionsHint(trace),
-    content: _jsx(InteractionsTab, { trace: trace, onPlayAgain: onPlayAgain })
+    content: _jsx(LazyTab, { module: INTERACTIONS_TAB, tabProps: { trace, onPlayAgain } })
 });
-/** The Code tab, when the story file's code is loaded or failed to load. */
+/** The Code tab, when the story file has code: loading, loaded, or failed to load. */
 const codeTabs = (input) => {
     const { code, docs } = input;
     // without the file's code, a story with a render would show the JSX of its args, which is not what it draws
-    if (code.status === "loading" || code.status === "none")
+    if (code.status === "none")
         return [];
+    // the code's place while it loads: a story without props opens on the first tab, and without this one the first
+    // would be the next (a plugin's), opened and its module loaded, before the code arrives and takes its place
+    if (code.status === "loading") {
+        return [{ id: "code", label: STRINGS.tabs.code, content: notice(STRINGS.codeLoading, false) }];
+    }
     if (code.status === "error") {
         return [
             { id: "code", label: STRINGS.tabs.code, content: notice(`${STRINGS.codeError}: ${code.message}`, true) }
@@ -139,7 +156,12 @@ const codeTabs = (input) => {
         {
             id: "code",
             label: STRINGS.tabs.code,
-            content: (_jsx(CodeTab, { code: code.value, exportName: input.exportName, componentName: docs.status === "ready" ? docs.value.name : input.componentName, args: input.values }))
+            content: (_jsx(LazyTab, { module: CODE_TAB, tabProps: {
+                    code: code.value,
+                    exportName: input.exportName,
+                    componentName: docs.status === "ready" ? codeNameOf(docs.value) : input.componentName,
+                    args: input.values
+                } }))
         }
     ];
 };
@@ -151,11 +173,11 @@ const codeTabs = (input) => {
 export const dockTabs = (input) => [
     ...docsTabs(input),
     ...codeTabs(input),
+    ...input.pluginTabs,
     {
         id: "a11y",
         label: STRINGS.tabs.a11y,
         hint: a11yHint(input.check),
-        content: _jsx(A11yTab, { check: input.check, onCheck: input.onCheck })
+        content: _jsx(LazyTab, { module: A11Y_TAB, tabProps: { check: input.check, onCheck: input.onCheck } })
     }
 ];
-//# sourceMappingURL=dockTabs.js.map

package/dist/src/shell/embed.css

@@ -0,0 +1,74 @@
+@layer catalogue {
+  .forgebook-embed {
+    min-height: 100vh;
+    background: var(--forgebook-surface);
+  }
+  .forgebook-embed__story {
+    max-width: 100%;
+    margin-inline: auto;
+  }
+  .forgebook-embed__message {
+    margin: 0;
+    padding: 1rem;
+    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-embed__message[data-failed] {
+    color: var(--forgebook-danger-text);
+  }
+  .forgebook-embed__detail {
+    margin: 0.25rem 0 0;
+    color: var(--forgebook-text-secondary);
+    overflow-wrap: anywhere;
+  }
+  .forgebook-popover--embed {
+    box-sizing: border-box;
+    width: min(26rem, 100vw - 1.5rem);
+    max-height: calc(100vh - 1.5rem);
+    overflow-y: auto;
+    white-space: normal;
+  }
+  .forgebook-embed-panel__hint {
+    margin: 0;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-embed-panel__hint[data-warning] {
+    color: var(--forgebook-danger-text);
+  }
+  .forgebook-embed-field {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.25rem 0.5rem;
+    align-items: center;
+  }
+  .forgebook-embed-field__label {
+    grid-column: 1/-1;
+    font: 500 0.75rem/1.3 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-embed-field__value {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: 0.375rem 0.5rem;
+    border: 0;
+    border-radius: var(--forgebook-radius-control);
+    font: 400 0.6875rem/1.6 var(--forgebook-font-mono);
+    color: var(--forgebook-text);
+    background: var(--forgebook-fill-quiet);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-field);
+  }
+  .forgebook-embed-field__value:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-embed-panel__follow {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    font: 500 0.75rem/1.3 var(--forgebook-font-sans);
+    color: var(--forgebook-text);
+  }
+}

package/dist/src/shell/filesCode.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The code of a component whose stories come from several files, as one loader: the Code cards of its page read each
+ * story's code by its export, whichever file it is in.
+ *
+ * @remarks
+ * The loader of a component in one file is the source's own, unchanged. One in several files is made once per list of
+ * files and kept, since the page loads the code again whenever its loader changes.
+ *
+ * @module
+ */
+/** A source's loaders of its files' code, by file. */
+type CodeLoaders = Readonly<Record<string, () => Promise<unknown>>>;
+/**
+ * One loader for the code of several files: each file's code, a story's export found in the first file that has it.
+ *
+ * @param loaders - the source's loaders of its files' code.
+ * @param files - the component's files, its first file first.
+ * @returns the loader; `undefined` when no file has one.
+ */
+export declare const filesCodeLoader: (loaders: CodeLoaders, files: readonly string[]) => (() => Promise<unknown>) | undefined;
+export {};

package/dist/src/shell/filesCode.js

@@ -0,0 +1,37 @@
+/**
+ * The code of a component whose stories come from several files, as one loader: the Code cards of its page read each
+ * story's code by its export, whichever file it is in.
+ *
+ * @remarks
+ * The loader of a component in one file is the source's own, unchanged. One in several files is made once per list of
+ * files and kept, since the page loads the code again whenever its loader changes.
+ *
+ * @module
+ */
+/** The loaders made so far, by the source's loaders, then by the files joined. */
+const MADE = new WeakMap();
+/**
+ * One loader for the code of several files: each file's code, a story's export found in the first file that has it.
+ *
+ * @param loaders - the source's loaders of its files' code.
+ * @param files - the component's files, its first file first.
+ * @returns the loader; `undefined` when no file has one.
+ */
+export const filesCodeLoader = (loaders, files) => {
+    const own = files.flatMap((file) => {
+        const load = loaders[file];
+        return load === undefined ? [] : [load];
+    });
+    if (own.length <= 1)
+        return own[0];
+    const made = MADE.get(loaders) ?? new Map();
+    MADE.set(loaders, made);
+    const key = files.join("\n");
+    const known = made.get(key);
+    if (known !== undefined)
+        return known;
+    // the last file is assigned first, so a story of an earlier file wins; an `error` of any file stays and is shown
+    const load = () => Promise.all(own.map((each) => each())).then((codes) => Object.assign({}, ...codes.reverse()));
+    made.set(key, load);
+    return load;
+};

package/dist/src/shell/forgebookMark.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Forgebook's own mark: an open book whose two pages rise into a flame, in an ember gradient. The sidebar shows it for
+ * a catalogue without a logo of its own, and the page's icon uses it then (`mountShell.tsx`).
+ *
+ * @remarks
+ * One SVG text, drawn as an image (a data address), so its gradients never clash with ids in the page and the
+ * sidebar and the icon cannot drift apart. `assets/forgebook-logo.svg` at the repository's root is the same drawing,
+ * for the READMEs.
+ *
+ * @module
+ */
+/** The mark's SVG, on a 64 × 64 grid. */
+export declare const FORGEBOOK_MARK_SVG: string;
+/** The mark as an image's address. */
+export declare const FORGEBOOK_MARK_URL: string;

package/dist/src/shell/forgebookMark.js

@@ -0,0 +1,28 @@
+/**
+ * Forgebook's own mark: an open book whose two pages rise into a flame, in an ember gradient. The sidebar shows it for
+ * a catalogue without a logo of its own, and the page's icon uses it then (`mountShell.tsx`).
+ *
+ * @remarks
+ * One SVG text, drawn as an image (a data address), so its gradients never clash with ids in the page and the
+ * sidebar and the icon cannot drift apart. `assets/forgebook-logo.svg` at the repository's root is the same drawing,
+ * for the READMEs.
+ *
+ * @module
+ */
+/** The mark's SVG, on a 64 × 64 grid. */
+export const FORGEBOOK_MARK_SVG = [
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">',
+    "<defs>",
+    '<linearGradient id="ember" x1="0" y1="1" x2="0.6" y2="0">',
+    '<stop offset="0" stop-color="#E0115F"/><stop offset="0.5" stop-color="#FF5A1F"/><stop offset="1" stop-color="#FFB020"/>',
+    "</linearGradient>",
+    '<linearGradient id="ember-dark" x1="0" y1="1" x2="0.6" y2="0">',
+    '<stop offset="0" stop-color="#B00E4C"/><stop offset="1" stop-color="#F0441A"/>',
+    "</linearGradient>",
+    "</defs>",
+    '<path d="M30.5 56C16 53 8 41 13 27C15.5 20 20 15 23 8C24.5 20 28 25 30.5 31Z" fill="url(#ember-dark)"/>',
+    '<path d="M33.5 56C48 53 57 40 51 25C48.5 18 44 13 42 4C39.5 18 36 24 33.5 31Z" fill="url(#ember)"/>',
+    "</svg>"
+].join("");
+/** The mark as an image's address. */
+export const FORGEBOOK_MARK_URL = `data:image/svg+xml,${encodeURIComponent(FORGEBOOK_MARK_SVG)}`;

package/dist/src/shell/framesOrigin.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Sets the frames' origin, before the shell renders.
+ *
+ * @param origin - the frames' origin (`http://localhost:5174`).
+ */
+export declare const setFramesOrigin: (origin: string) => void;
+/** The frames' origin: the catalogue's own until `mountShell` sets it. */
+export declare const framesOrigin: () => string;
+/**
+ * Whether a message comes from the frames' origin.
+ *
+ * @param event - the message's event.
+ */
+export declare const isFromFrames: (event: MessageEvent) => boolean;
+/** What a story's frame element is given, wherever the shell draws one. */
+export type StoryFrameAttributes = {
+    /** The browser features it may use. */
+    readonly allow: string;
+    /** Its sandbox; none on the catalogue's own origin. */
+    readonly sandbox: string | undefined;
+};
+/** The attributes of a story's frame element: the features it is delegated, and its sandbox off the catalogue's origin. */
+export declare const storyFrameAttributes: () => StoryFrameAttributes;

package/dist/src/shell/framesOrigin.js

@@ -0,0 +1,69 @@
+/**
+ * The shell's side of the messages with the stories' frames: the frames' origin, the only one the shell sends to and
+ * listens to, and what each frame element the shell draws is allowed (the stage's, a page's, the design comparison's).
+ *
+ * @remarks
+ * A page holds one shell, and its frames run on one origin for the page's life, so the origin is a fact of the page,
+ * set once by `mountShell` before anything renders, as the page's address is. A message from anywhere else is not a
+ * frame's, and a message sent with the frames' origin never reaches a document that is not one of them.
+ *
+ * @module
+ */
+/** The frames' origin, once `mountShell` set it. */
+let pageFramesOrigin;
+/**
+ * Sets the frames' origin, before the shell renders.
+ *
+ * @param origin - the frames' origin (`http://localhost:5174`).
+ */
+export const setFramesOrigin = (origin) => {
+    pageFramesOrigin = origin;
+};
+/** The frames' origin: the catalogue's own until `mountShell` sets it. */
+export const framesOrigin = () => pageFramesOrigin ?? window.location.origin;
+/**
+ * Whether a message comes from the frames' origin.
+ *
+ * @param event - the message's event.
+ */
+export const isFromFrames = (event) => event.origin === framesOrigin();
+/**
+ * The browser features a story may use, delegated to its frame. A frame on the catalogue's own origin had each of them;
+ * on an origin of its own it gets only those its element allows (a copy button, a video's full screen, a scanner's
+ * camera).
+ */
+const FRAME_PERMISSIONS = [
+    "clipboard-read",
+    "clipboard-write",
+    "fullscreen",
+    "camera",
+    "microphone",
+    "geolocation",
+    "display-capture",
+    "autoplay",
+    "picture-in-picture",
+    "encrypted-media",
+    "screen-wake-lock"
+].join("; ");
+/**
+ * What a story's frame may do, as a sandbox: everything a page does but navigate the catalogue's tab, which a story's
+ * link could otherwise send to any address. The frames keep their own origin (`allow-same-origin`): it is not the
+ * catalogue's, so the pair gives the story nothing of the catalogue's. Frames on the catalogue's own origin get none:
+ * there the pair would let a story lift its own sandbox, and browsers warn of it.
+ */
+const FRAME_SANDBOX = [
+    "allow-scripts",
+    "allow-same-origin",
+    "allow-forms",
+    "allow-modals",
+    "allow-popups",
+    "allow-popups-to-escape-sandbox",
+    "allow-downloads",
+    "allow-pointer-lock",
+    "allow-presentation"
+].join(" ");
+/** The attributes of a story's frame element: the features it is delegated, and its sandbox off the catalogue's origin. */
+export const storyFrameAttributes = () => ({
+    allow: FRAME_PERMISSIONS,
+    sandbox: framesOrigin() === window.location.origin ? undefined : FRAME_SANDBOX
+});

package/dist/src/shell/icons.d.ts

@@ -25,8 +25,11 @@ declare const PATHS: {
     readonly ruler: "M2 10.5 10.5 2l3.5 3.5L5.5 14zM5 8l1.5 1.5M7 6l1 1M9 4l1.5 1.5";
     readonly sidebar: "M2 3h12v10H2zM6 3v10";
     readonly close: "M4 4l8 8M12 4l-8 8";
+    readonly embed: "M5.5 4.5 2 8l3.5 3.5M10.5 4.5 14 8l-3.5 3.5";
     readonly external: "M9 2.5h4.5V7M13.5 2.5 8 8M11.5 9.5v4h-9v-9h4";
     readonly width: "M2 4v8M14 4v8M4.5 8h7M6 6.5 4.5 8 6 9.5M10 6.5l1.5 1.5-1.5 1.5";
+    readonly turn: "M2.5 9.5h7a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1ZM12 12.5a2.5 2.5 0 0 0 2.5-2.5V8.5M13.5 10l1-1.5 1 1.5";
+    readonly device: "M5.5 1.5h5a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1ZM7.25 3.5h1.5";
     readonly plus: "M8 3.5v9M3.5 8h9";
     readonly minus: "M3.5 8h9";
     readonly hash: "M6 2.5 5 13.5M11 2.5l-1 11M3 6h10.5M2.5 10H13";
@@ -52,4 +55,3 @@ export declare const Icon: ({ name, size }: {
     readonly size?: number;
 }) => ReactNode;
 export {};
-//# sourceMappingURL=icons.d.ts.map

package/dist/src/shell/icons.js

@@ -20,8 +20,11 @@ const PATHS = {
     ruler: "M2 10.5 10.5 2l3.5 3.5L5.5 14zM5 8l1.5 1.5M7 6l1 1M9 4l1.5 1.5",
     sidebar: "M2 3h12v10H2zM6 3v10",
     close: "M4 4l8 8M12 4l-8 8",
+    embed: "M5.5 4.5 2 8l3.5 3.5M10.5 4.5 14 8l-3.5 3.5",
     external: "M9 2.5h4.5V7M13.5 2.5 8 8M11.5 9.5v4h-9v-9h4",
     width: "M2 4v8M14 4v8M4.5 8h7M6 6.5 4.5 8 6 9.5M10 6.5l1.5 1.5-1.5 1.5",
+    turn: "M2.5 9.5h7a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1ZM12 12.5a2.5 2.5 0 0 0 2.5-2.5V8.5M13.5 10l1-1.5 1 1.5",
+    device: "M5.5 1.5h5a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1ZM7.25 3.5h1.5",
     plus: "M8 3.5v9M3.5 8h9",
     minus: "M3.5 8h9",
     hash: "M6 2.5 5 13.5M11 2.5l-1 11M3 6h10.5M2.5 10H13",
@@ -41,4 +44,3 @@ const PATHS = {
  * @param props - the icon and its size in px.
  */
 export const Icon = ({ name, size = 16 }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: PATHS[name] }) }));
-//# sourceMappingURL=icons.js.map

package/dist/src/shell/keyboard.d.ts

@@ -33,4 +33,3 @@ export declare const storyStep: (event: Pick<KeyboardEvent, "key" | "metaKey" |
  * @param firstOfPage - on a component's page, the id of its first story.
  */
 export declare const steppedStory: (ids: readonly string[], currentId: string | undefined, step: StoryStep, firstOfPage: string | undefined) => string | undefined;
-//# sourceMappingURL=keyboard.d.ts.map

package/dist/src/shell/keyboard.js

@@ -51,4 +51,3 @@ export const steppedStory = (ids, currentId, step, firstOfPage) => {
     const index = ids.indexOf(currentId);
     return index === -1 ? undefined : ids[index + step];
 };
-//# sourceMappingURL=keyboard.js.map

package/dist/src/shell/laterStrings.d.ts

@@ -0,0 +1,91 @@
+/** The later parts' texts, as shown: Forgebook's, with the catalogue's replacements. */
+export declare const LATER_STRINGS: {
+    audienceError: string;
+    controlKey: (control: string, key: string | undefined) => string;
+    changeKey: string;
+    pressAKey: string;
+    namedViews: string;
+    saveView: string;
+    viewName: string;
+    removeView: (name: string) => string;
+    resetView: string;
+    viewInAddress: string;
+    pinControl: (label: string) => string;
+    hideControl: (label: string) => string;
+    showControl: (label: string) => string;
+    moveControl: (label: string) => string;
+    moveControlHint: string;
+    controlMoved: (label: string, position: number, count: number) => string;
+    pinnedNoRoom: string;
+    resetToolbar: string;
+    wrapToolbar: string;
+    hiddenControls: (count: number, pinned: number) => string;
+    toolbarInBrowser: string;
+    compareCell: (labels: readonly string[]) => string;
+    embedHint: string;
+    embedLink: string;
+    embedCode: string;
+    embedFollow: string;
+    embedFollowHint: string;
+    embedLocal: string;
+    embedCopyFailed: string;
+    embedNoStory: string;
+    embedUnknownStory: (id: string) => string;
+    pluginLoading: string;
+    pluginError: string;
+    playTitle: string;
+    playTime: (ms: number) => string;
+    playAgain: string;
+    playNoSteps: string;
+    codeFromArgs: string;
+    codeRender: string;
+    copy: string;
+    a11yCheck: string;
+    a11yRunning: string;
+    a11yNone: string;
+    a11yError: string;
+    a11yNotInCompare: string;
+    clockLabel: string;
+    clockPause: string;
+    clockResume: string;
+    clockRestart: string;
+    clockSpeed: string;
+    clockRate: (rate: number) => string;
+    apiReference: string;
+    apiProp: string;
+    apiEvent: string;
+    apiSignature: string;
+    apiDefault: string;
+    apiMember: string;
+    memberCount: (count: number) => string;
+    membersOf: (type: string) => string;
+    showCode: string;
+    hideCode: string;
+    openStory: string;
+    usedIn: string;
+    usedInThrough: string;
+    usedInMore: (count: number) => string;
+    usedInStories: (count: number) => string;
+    openStoryNamed: (name: string) => string;
+    touch: string;
+    touchNamed: (name: string) => string;
+    fillPage: string;
+    fillPageNamed: (name: string) => string;
+    backToPlace: string;
+    backToPlaceNamed: (name: string) => string;
+    examples: string;
+    pageError: string;
+    droppedArgs: string;
+    droppedArgReasons: {
+        undeclared: string;
+        type: string;
+    };
+    removeDroppedArgs: string;
+    events: string;
+    calls: string;
+    noCalls: string;
+    clearCalls: string;
+    partsList: string;
+    styleHooks: string;
+    testIds: string;
+};