forgebook 0.1.7 → 0.2.0

package/dist/src/frameOrigins.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Where a catalogue's frames run, and the two origins the shell and the frames talk on: the shell sends only to the
+ * frames' origin and listens only to it, a frame the same with the catalogue's.
+ *
+ * @remarks
+ * A story's frame runs on an origin of its own wherever one can be had, so what runs in it (the story's code, a value a
+ * shared link put in a prop) cannot read or act on the catalogue's page, the dev server's agent API or the files Vite
+ * serves. The dev server gives the frames a second port (`ports`); a static build gets a second host only when the
+ * configuration names it (`origins`); otherwise they share the catalogue's (`same-origin`).
+ *
+ * Each side works out the other's origin from the placement and its own address, never from a value in the address:
+ * a page that framed a story while naming itself the catalogue could otherwise send it values.
+ *
+ * @module
+ */
+/** Where the frames run, as the pages read it from the configuration's data. */
+export type FramesPlacement = {
+    /** On the catalogue's own origin. */
+    readonly kind: "same-origin";
+} | {
+    /** On another port of the same host: the dev server's second port. */
+    readonly kind: "ports";
+    /** The catalogue's port. */
+    readonly catalogue: number;
+    /** The frames' port. */
+    readonly frames: number;
+} | {
+    /** On origins the configuration names, as the browser reaches them. */
+    readonly kind: "origins";
+    /** The catalogue's origin (`https://catalogue.example.com`). */
+    readonly catalogue: string;
+    /** The frames' origin (`https://frames.example.com`). */
+    readonly frames: string;
+};
+/** The frames on the catalogue's own origin. */
+export declare const SAME_ORIGIN: FramesPlacement;
+/** The two origins of a catalogue's page and its frames. */
+export type PageOrigins = {
+    /** The catalogue page's origin. */
+    readonly catalogue: string;
+    /** The frames' origin. */
+    readonly frames: string;
+};
+/** What a page knows of its own address. */
+export type PageLocation = Pick<Location, "protocol" | "hostname" | "origin">;
+/**
+ * The two origins, seen from one of the pages.
+ *
+ * @param placement - where the frames run.
+ * @param location - the page's own address.
+ * @param side - which page asks: the catalogue's, or a frame.
+ */
+export declare const pageOrigins: (placement: FramesPlacement, location: PageLocation, side: "catalogue" | "frame") => PageOrigins;
+/**
+ * The frame page's address, for the catalogue's page: the page named relative to the catalogue's path, on the frames'
+ * origin, so a catalogue served under a sub-path (`/pr-12/`) finds its frames under the same one.
+ *
+ * @param framePage - the frame page, relative to the catalogue's (`frame.html`).
+ * @param framesOrigin - the frames' origin.
+ * @param pathname - the catalogue page's path (`/pr-12/`).
+ */
+export declare const framePageAddress: (framePage: string, framesOrigin: string, pathname: string) => string;

package/dist/src/frameOrigins.js

@@ -0,0 +1,49 @@
+/**
+ * Where a catalogue's frames run, and the two origins the shell and the frames talk on: the shell sends only to the
+ * frames' origin and listens only to it, a frame the same with the catalogue's.
+ *
+ * @remarks
+ * A story's frame runs on an origin of its own wherever one can be had, so what runs in it (the story's code, a value a
+ * shared link put in a prop) cannot read or act on the catalogue's page, the dev server's agent API or the files Vite
+ * serves. The dev server gives the frames a second port (`ports`); a static build gets a second host only when the
+ * configuration names it (`origins`); otherwise they share the catalogue's (`same-origin`).
+ *
+ * Each side works out the other's origin from the placement and its own address, never from a value in the address:
+ * a page that framed a story while naming itself the catalogue could otherwise send it values.
+ *
+ * @module
+ */
+/** The frames on the catalogue's own origin. */
+export const SAME_ORIGIN = { kind: "same-origin" };
+/**
+ * An origin on a host and a port: the default port left out, as a browser writes an origin.
+ *
+ * @param location - the page's address, whose scheme and host it keeps.
+ * @param port - the port.
+ */
+const originOnPort = (location, port) => new URL(`${location.protocol}//${location.hostname}:${port}`).origin;
+/**
+ * The two origins, seen from one of the pages.
+ *
+ * @param placement - where the frames run.
+ * @param location - the page's own address.
+ * @param side - which page asks: the catalogue's, or a frame.
+ */
+export const pageOrigins = (placement, location, side) => {
+    if (placement.kind === "origins")
+        return { catalogue: placement.catalogue, frames: placement.frames };
+    if (placement.kind === "same-origin")
+        return { catalogue: location.origin, frames: location.origin };
+    return side === "catalogue"
+        ? { catalogue: location.origin, frames: originOnPort(location, placement.frames) }
+        : { catalogue: originOnPort(location, placement.catalogue), frames: location.origin };
+};
+/**
+ * The frame page's address, for the catalogue's page: the page named relative to the catalogue's path, on the frames'
+ * origin, so a catalogue served under a sub-path (`/pr-12/`) finds its frames under the same one.
+ *
+ * @param framePage - the frame page, relative to the catalogue's (`frame.html`).
+ * @param framesOrigin - the frames' origin.
+ * @param pathname - the catalogue page's path (`/pr-12/`).
+ */
+export const framePageAddress = (framePage, framesOrigin, pathname) => new URL(framePage, `${framesOrigin}${pathname}`).href;

package/dist/src/hotModules.d.ts

@@ -0,0 +1,48 @@
+/**
+ * How an edited module reaches the open pages of a dev server without a reload: the module accepts its own edit and
+ * hands its successor to the page, which swaps what it drew from the one before.
+ *
+ * @remarks
+ * A story file accepts its edit and asks, with a cancelable event, whether a frame draws its stories; the frame that
+ * does draws them anew in place, and the reader keeps what they did in the story (a typed field, an open menu). A file
+ * no frame draws hands its edit on to the files that import it: a story file that re-exports its stories draws them.
+ * A story file's docs, code and page modules hand their successor to the shell, which shows the new value. The frame's
+ * entry takes the edits of its previews and of what they import (a library's whole index, often): the frame draws its
+ * story anew with the new previews instead of the page reloading. The code each module runs is written by the plugin
+ * (`vite/hotSnippets.ts`); the events are read here, by the frame and the shell.
+ *
+ * @module
+ */
+/** The event a story file sends when it was edited, cancelled by the frame that draws its stories. */
+export declare const STORY_FILE_EVENT = "forgebook:story-file";
+/** The event a story file's docs, code or page module sends when it was renewed. */
+export declare const RENEWED_MODULE_EVENT = "forgebook:module-renewed";
+/**
+ * The event the frame's entry sends when a preview, or a module one imports, was edited: the previews that changed,
+ * by their place in the list, in a `CustomEvent` whose detail is `PreviewsRenewal`.
+ */
+export declare const PREVIEWS_EVENT = "forgebook:previews";
+/** The previews an edit renewed: each one's new module, or `undefined` for one it did not change. */
+export type PreviewsRenewal = {
+    /** The previews' modules, in the catalogue's order. */
+    readonly next: readonly unknown[];
+};
+/**
+ * The previews an event carries, when it is the previews' event.
+ *
+ * @param event - the event.
+ */
+export declare const previewsRenewalOf: (event: Event) => PreviewsRenewal | undefined;
+/** A module and the one that replaced it. */
+export type ModuleSuccession = {
+    /** What the module before gave: a story file's exports, or another module's default export. */
+    readonly previous: unknown;
+    /** What its successor gives. */
+    readonly next: unknown;
+};
+/**
+ * The module and its successor an event carries, when it is one of these events.
+ *
+ * @param event - the event.
+ */
+export declare const successionOf: (event: Event) => ModuleSuccession | undefined;

package/dist/src/hotModules.js

@@ -0,0 +1,53 @@
+/**
+ * How an edited module reaches the open pages of a dev server without a reload: the module accepts its own edit and
+ * hands its successor to the page, which swaps what it drew from the one before.
+ *
+ * @remarks
+ * A story file accepts its edit and asks, with a cancelable event, whether a frame draws its stories; the frame that
+ * does draws them anew in place, and the reader keeps what they did in the story (a typed field, an open menu). A file
+ * no frame draws hands its edit on to the files that import it: a story file that re-exports its stories draws them.
+ * A story file's docs, code and page modules hand their successor to the shell, which shows the new value. The frame's
+ * entry takes the edits of its previews and of what they import (a library's whole index, often): the frame draws its
+ * story anew with the new previews instead of the page reloading. The code each module runs is written by the plugin
+ * (`vite/hotSnippets.ts`); the events are read here, by the frame and the shell.
+ *
+ * @module
+ */
+/** The event a story file sends when it was edited, cancelled by the frame that draws its stories. */
+export const STORY_FILE_EVENT = "forgebook:story-file";
+/** The event a story file's docs, code or page module sends when it was renewed. */
+export const RENEWED_MODULE_EVENT = "forgebook:module-renewed";
+/**
+ * The event the frame's entry sends when a preview, or a module one imports, was edited: the previews that changed,
+ * by their place in the list, in a `CustomEvent` whose detail is `PreviewsRenewal`.
+ */
+export const PREVIEWS_EVENT = "forgebook:previews";
+/**
+ * The previews an event carries, when it is the previews' event.
+ *
+ * @param event - the event.
+ */
+export const previewsRenewalOf = (event) => {
+    if (!(event instanceof CustomEvent))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null || !("next" in detail) || !Array.isArray(detail.next))
+        return undefined;
+    const next = detail.next;
+    return { next };
+};
+/**
+ * The module and its successor an event carries, when it is one of these events.
+ *
+ * @param event - the event.
+ */
+export const successionOf = (event) => {
+    if (!(event instanceof CustomEvent))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null)
+        return undefined;
+    if (!("previous" in detail) || !("next" in detail))
+        return undefined;
+    return { previous: detail.previous, next: detail.next };
+};

package/dist/src/jsxCode.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The JSX of a story drawn from its args: the component with the values the story and the props panel set, as a
+ * developer would write it, for the Code card. The code writer of every framework written in JSX (React, Preact,
+ * Solid): each one's `./code` module hands it to the shell.
+ *
+ * @remarks
+ * A text is an attribute in quotes (in braces when it holds a quote), a number or `null` in braces, `true` the bare
+ * name, `false` in braces, a named value by its name (`icon={IconFolder}`), a list as an array literal
+ * (`options={["weekly", "monthly"]}`); `children` goes between the tags. Only the values that cross from the frame are
+ * known (texts, numbers, booleans, `null`, lists of texts and numbers, named values): a function or an element the
+ * story passes is left out. Pure.
+ *
+ * @module
+ */
+import type { StoryCodeWriter } from "./frame/renderer.ts";
+/**
+ * A component's JSX with these args.
+ *
+ * @param component - the component's name (`IconTile`).
+ * @param args - the values, in the order they are written.
+ */
+export declare const jsxCode: StoryCodeWriter;

package/dist/src/jsxCode.js

@@ -0,0 +1,36 @@
+import { isNamedArg } from "./messages.js";
+/** One attribute as JSX writes it. */
+const attribute = (name, value) => {
+    if (value === true)
+        return name;
+    if (typeof value === "string")
+        return value.includes('"') ? `${name}={${JSON.stringify(value)}}` : `${name}="${value}"`;
+    // a named value is written by its name, as the source's module exports it (`icon={IconFolder}`)
+    if (isNamedArg(value))
+        return `${name}={${value.named}}`;
+    // a multiple choice's values, as the source writes a list
+    if (Array.isArray(value))
+        return `${name}={[${value.map((item) => JSON.stringify(item)).join(", ")}]}`;
+    return `${name}={${String(value)}}`;
+};
+/** The longest line the attributes stay on one line for, in characters. */
+const ONE_LINE = 80;
+/**
+ * A component's JSX with these args.
+ *
+ * @param component - the component's name (`IconTile`).
+ * @param args - the values, in the order they are written.
+ */
+export const jsxCode = (component, args) => {
+    const { children, ...rest } = args;
+    const attributes = Object.entries(rest).map(([name, value]) => attribute(name, value));
+    const inner = children === undefined || children === null || children === false ? undefined : String(children);
+    const oneLine = [component, ...attributes].join(" ");
+    const isOneLine = oneLine.length + 2 <= ONE_LINE;
+    const opening = isOneLine
+        ? `<${oneLine}`
+        : `<${component}\n${attributes.map((text) => `  ${text}`).join("\n")}\n`;
+    if (inner === undefined)
+        return `${opening}${isOneLine ? " " : ""}/>`;
+    return `${opening}>${inner}</${component}>`;
+};

package/dist/src/languages.d.ts

@@ -12,4 +12,3 @@ import type { StoryLanguage } from "@forgebook/story-format/source";
  * @param id - the view's language id; empty for the stories' own text.
  */
 export declare const shownLanguage: (languages: readonly StoryLanguage[], id: string) => StoryLanguage | undefined;
-//# sourceMappingURL=languages.d.ts.map

package/dist/src/languages.js

@@ -5,4 +5,3 @@
  * @param id - the view's language id; empty for the stories' own text.
  */
 export const shownLanguage = (languages, id) => languages.find((language) => language.id === id);
-//# sourceMappingURL=languages.js.map

package/dist/src/liveErrors.d.ts

@@ -54,4 +54,3 @@ export declare const isLiveErrorReport: (value: unknown) => value is LiveErrorRe
  * @param limit - how many it keeps; a hundred by default.
  */
 export declare const createLiveErrors: (limit?: number) => LiveErrors;
-//# sourceMappingURL=liveErrors.d.ts.map

package/dist/src/liveErrors.js

@@ -49,4 +49,3 @@ export const createLiveErrors = (limit = 100) => {
         last: () => last
     };
 };
-//# sourceMappingURL=liveErrors.js.map

package/dist/src/matrix.d.ts

@@ -53,4 +53,3 @@ export declare const matrixOf: (props: readonly PropDocs[], names: readonly stri
  * @param value - the message's matrix.
  */
 export declare const isMatrix: (value: unknown) => value is Matrix;
-//# sourceMappingURL=matrix.d.ts.map

package/dist/src/matrix.js

@@ -58,4 +58,3 @@ export const isMatrix = (value) => {
     const record = { ...value };
     return isAxis(record["rows"]) && (record["columns"] === undefined || isAxis(record["columns"]));
 };
-//# sourceMappingURL=matrix.js.map

package/dist/src/messages.d.ts

@@ -3,7 +3,8 @@
  *
  * @remarks
  * The frame tells the shell what the loaded story can do (Replay, a story clock, its args), how tall it is (the shell sizes the frame
- * to it, so a story never scrolls inside a box), every call of an event, or why it failed. The shell asks the frame to
+ * to it, so a story never scrolls inside a box), every call of an event, the args the story changed itself, or why it
+ * failed. The shell asks the frame to
  * replay, sends the props panel's values, names the events to record, and runs, holds, speeds up or restarts the
  * story clock. Every message is checked on arrival
  * (`isFrameMessage`, `isShellMessage`): a page may receive messages from anything it embeds or is embedded in.
@@ -15,6 +16,7 @@ import { type Violation } from "./a11y.ts";
 import { type PanelArgTypes } from "./argTypes.ts";
 import { type Matrix } from "./matrix.ts";
 import { type PlayTrace } from "./playTrace.ts";
+import type { JsonValue } from "./plugin.ts";
 import { type ClockState } from "./storyClock.ts";
 import { type FixedView } from "./storyGlobals.ts";
 import { type LiveView, type MeasureTool } from "./viewState.ts";
@@ -57,6 +59,18 @@ export type FrameMessage = {
     readonly actions: readonly string[];
     /** What the story fixes of the view (its `globals`, Storybook's backgrounds and viewport). */
     readonly fixed: FixedView;
+    /** The names of the story's parameters, which decide the plugins' tabs. */
+    readonly parameters: readonly string[];
+} | {
+    /**
+     * The story changed its own args (Storybook's `useArgs`): the panel takes these values, as if the reader had set
+     * them. All of them, the story's change applied, so the last of two changes in a row holds both.
+     */
+    readonly type: "forgebook:story-args";
+    /** The story's id. */
+    readonly storyId: string;
+    /** The panel's values after the change, those the panel can show: another value is the frame's alone. */
+    readonly args: PanelArgs;
 } | {
     /** The story's height changed. */
     readonly type: "forgebook:size";
@@ -110,6 +124,19 @@ export type FrameMessage = {
     readonly storyId: string;
     /** How many elements spill out of their parents. */
     readonly count: number;
+} | {
+    /** A plugin's frame module told its tab about the story. */
+    readonly type: "forgebook:plugin";
+    /** The story's id. */
+    readonly storyId: string;
+    /** The plugin's id. */
+    readonly plugin: string;
+    /** What its tabs receive. */
+    readonly value: JsonValue;
+    /** A short note beside a tab's name; none shows nothing. */
+    readonly hint: string | null;
+    /** The tab the note is for; none for the plugin's first. */
+    readonly tab: string | null;
 };
 /** From the shell to a frame. */
 export type ShellMessage = {
@@ -212,4 +239,3 @@ export declare const panelArgsParam: (args: PanelArgs) => string;
  * @param param - the `args` parameter.
  */
 export declare const parsePanelArgsParam: (param: string | null) => PanelArgs;
-//# sourceMappingURL=messages.d.ts.map

package/dist/src/messages.js

@@ -3,7 +3,8 @@
  *
  * @remarks
  * The frame tells the shell what the loaded story can do (Replay, a story clock, its args), how tall it is (the shell sizes the frame
- * to it, so a story never scrolls inside a box), every call of an event, or why it failed. The shell asks the frame to
+ * to it, so a story never scrolls inside a box), every call of an event, the args the story changed itself, or why it
+ * failed. The shell asks the frame to
  * replay, sends the props panel's values, names the events to record, and runs, holds, speeds up or restarts the
  * story clock. Every message is checked on arrival
  * (`isFrameMessage`, `isShellMessage`): a page may receive messages from anything it embeds or is embedded in.
@@ -53,6 +54,19 @@ const isStringList = (value) => Array.isArray(value) && value.every((item) => ty
 const isControlsSetting = (value) => value === "all" || isStringList(value);
 /** Whether a value is the text keys of a story's args: names to keys. */
 const isTextKeys = (value) => isRecord(value) && Object.values(value).every((key) => typeof key === "string");
+/** Whether a value stays what it is as JSON. */
+const isJsonValue = (value) => {
+    if (value === null || typeof value === "string" || typeof value === "boolean")
+        return true;
+    if (typeof value === "number")
+        return Number.isFinite(value);
+    if (Array.isArray(value))
+        return value.every(isJsonValue);
+    // a date or a map crosses between the documents as it is, and would not be what a tab reads as JSON
+    return (isRecord(value) &&
+        Object.getPrototypeOf(value) === Object.prototype &&
+        Object.values(value).every(isJsonValue));
+};
 /**
  * Whether a received message is one a frame sends.
  *
@@ -70,7 +84,10 @@ export const isFrameMessage = (value) => {
                 isPanelArgTypes(value["argTypes"]) &&
                 isControlsSetting(value["controls"]) &&
                 isStringList(value["actions"]) &&
-                isFixedView(value["fixed"]));
+                isFixedView(value["fixed"]) &&
+                isStringList(value["parameters"]));
+        case "forgebook:story-args":
+            return isPanelArgs(value["args"]);
         case "forgebook:size":
             return typeof value["height"] === "number";
         case "forgebook:spills":
@@ -87,6 +104,11 @@ export const isFrameMessage = (value) => {
             return isPlayTrace(value["trace"]);
         case "forgebook:checked":
             return Array.isArray(value["violations"]) && value["violations"].every(isViolation);
+        case "forgebook:plugin":
+            return (typeof value["plugin"] === "string" &&
+                isJsonValue(value["value"]) &&
+                (value["hint"] === null || typeof value["hint"] === "string") &&
+                (value["tab"] === null || typeof value["tab"] === "string"));
         default:
             return false;
     }
@@ -194,4 +216,3 @@ export const parsePanelArgsParam = (param) => {
         return {};
     }
 };
-//# sourceMappingURL=messages.js.map

package/dist/src/namedValues.d.ts

@@ -12,6 +12,17 @@ import type { StorySource } from "@forgebook/story-format/source";
 import { type NamedArg, type PanelArgs } from "./messages.ts";
 /** A source's named values: by the type as the props write it, then by name. */
 export type NamedValues = NonNullable<StorySource["namedValues"]>;
+/**
+ * The value a named value stands for, from the source's own entries only: a name the panel sent, or an address wrote,
+ * never reaches a value through an object's prototype, so `{ of: "constructor", named: "constructor" }` is not
+ * `Function`.
+ *
+ * @param namedValues - the source's named values.
+ * @param of - the type the value is offered for.
+ * @param named - the value's name.
+ * @returns the value; none when the source does not name it.
+ */
+export declare const namedValueOf: (namedValues: NamedValues, of: string, named: string) => unknown;
 /**
  * The name of a value among the named ones, when it is one of them.
  *
@@ -35,4 +46,3 @@ export declare const panelArgsOf: (args: Readonly<Record<string, unknown>>, name
  * @param namedValues - the source's named values; none by default.
  */
 export declare const storyArgsOf: (args: PanelArgs, namedValues?: NamedValues) => Readonly<Record<string, unknown>>;
-//# sourceMappingURL=namedValues.d.ts.map

package/dist/src/namedValues.js

@@ -1,4 +1,28 @@
 import { isChoiceList, isNamedArg } from "./messages.js";
+/**
+ * Whether a record holds a key itself, not through its prototype: `{}`'s `constructor` is `Object`, whose own
+ * `constructor` is `Function`.
+ *
+ * @param record - the record.
+ * @param key - the key.
+ */
+const hasOwn = (record, key) => Object.hasOwn(record, key);
+/**
+ * The value a named value stands for, from the source's own entries only: a name the panel sent, or an address wrote,
+ * never reaches a value through an object's prototype, so `{ of: "constructor", named: "constructor" }` is not
+ * `Function`.
+ *
+ * @param namedValues - the source's named values.
+ * @param of - the type the value is offered for.
+ * @param named - the value's name.
+ * @returns the value; none when the source does not name it.
+ */
+export const namedValueOf = (namedValues, of, named) => {
+    if (!hasOwn(namedValues, of))
+        return undefined;
+    const values = namedValues[of];
+    return values !== undefined && hasOwn(values, named) ? values[named] : undefined;
+};
 /**
  * The name of a value among the named ones, when it is one of them.
  *
@@ -42,7 +66,6 @@ export const panelArgsOf = (args, namedValues = {}) => Object.fromEntries(Object
 export const storyArgsOf = (args, namedValues = {}) => Object.fromEntries(Object.entries(args).flatMap(([name, value]) => {
     if (!isNamedArg(value))
         return [[name, value]];
-    const known = namedValues[value.of]?.[value.named];
+    const known = namedValueOf(namedValues, value.of, value.named);
     return known === undefined ? [] : [[name, known]];
 }));
-//# sourceMappingURL=namedValues.js.map

package/dist/src/namedViews.d.ts

@@ -1,17 +1,6 @@
-/**
- * Named views: the View menu's values saved under a name ("Dark, Italian, 360") and picked again. A reader's, kept in
- * their browser, and the catalogue's own (`views` in its configuration), offered to the whole team.
- *
- * @remarks
- * A named view holds values, never an arrangement: the switches, the background, the style sheets, the text size and
- * the width. Picking one sets them as choosing each would, so the address carries the values; a name never goes in the
- * address, since another reader may not have it. Pure: views in, views out.
- *
- * @module
- */
 import { type ViewCatalogue, type ViewState } from "./viewState.ts";
 /** The values a named view holds: the View menu's. */
-export type ViewValues = Pick<ViewState, "switches" | "backdrop" | "sheets" | "text" | "width">;
+export type ViewValues = Pick<ViewState, "switches" | "backdrop" | "sheets" | "text" | "width" | "device" | "orientation">;
 /** A view saved under a name. */
 export type NamedView = {
     /** Its name, as the reader or the catalogue wrote it. */
@@ -86,4 +75,3 @@ export declare const isSameView: (first: ViewValues, second: ViewValues, switche
  * @param catalogue - the catalogue's switches and lists.
  */
 export declare const checkedView: (view: ViewState, catalogue: ViewCatalogue) => ViewState;
-//# sourceMappingURL=namedViews.d.ts.map

package/dist/src/namedViews.js

@@ -3,12 +3,13 @@
  * their browser, and the catalogue's own (`views` in its configuration), offered to the whole team.
  *
  * @remarks
- * A named view holds values, never an arrangement: the switches, the background, the style sheets, the text size and
- * the width. Picking one sets them as choosing each would, so the address carries the values; a name never goes in the
+ * A named view holds values, never an arrangement: the switches, the background, the style sheets, the text size, the
+ * width and the device. Picking one sets them as choosing each would, so the address carries the values; a name never goes in the
  * address, since another reader may not have it. Pure: views in, views out.
  *
  * @module
  */
+import { isDeviceId, isDeviceOrientation } from "./deviceView.js";
 import { parseView, viewParams } from "./viewState.js";
 /**
  * The values of a view that a named view holds.
@@ -20,7 +21,9 @@ export const viewValues = (view) => ({
     backdrop: view.backdrop,
     sheets: view.sheets,
     text: view.text,
-    width: view.width
+    width: view.width,
+    device: view.device,
+    orientation: view.orientation
 });
 /**
  * The view with a named view's values set.
@@ -54,7 +57,7 @@ export const withSavedView = (views, saved) => {
 export const withoutView = (views, name) => views.filter((each) => each.name !== name);
 /** Whether a value is a plain object. */
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-/** Whether a value is a named view's values, as this module stores them. */
+/** Whether a value is a named view's values, as this module stores them; the device may be missing. */
 const isViewValues = (value) => isRecord(value) &&
     isRecord(value["switches"]) &&
     Object.values(value["switches"]).every((each) => typeof each === "string") &&
@@ -77,7 +80,26 @@ export const readNamedViews = (stored) => {
     catch {
         return [];
     }
-    return (Array.isArray(parsed) ? parsed : []).filter((each) => isRecord(each) && typeof each["name"] === "string" && isViewValues(each["values"]));
+    // a view saved before views held the device has none: it follows the story's
+    return (Array.isArray(parsed) ? parsed : []).flatMap((each) => {
+        if (!isRecord(each) || typeof each["name"] !== "string")
+            return [];
+        const values = each["values"];
+        const device = isRecord(values) ? values["device"] : undefined;
+        const orientation = isRecord(values) ? values["orientation"] : undefined;
+        if (!isViewValues(values))
+            return [];
+        return [
+            {
+                name: each["name"],
+                values: {
+                    ...values,
+                    device: device === "off" || isDeviceId(device) ? device : "auto",
+                    orientation: isDeviceOrientation(orientation) ? orientation : "auto"
+                }
+            }
+        ];
+    });
 };
 /**
  * The text the reader's views are stored as; empty for none.
@@ -96,7 +118,9 @@ export const isSameView = (first, second, switches) => switches.every((each) =>
     first.backdrop === second.backdrop &&
     first.sheets === second.sheets &&
     first.text === second.text &&
-    first.width === second.width;
+    first.width === second.width &&
+    first.device === second.device &&
+    first.orientation === second.orientation;
 /**
  * A view with a named view's values read back as an address is: what the catalogue no longer offers (a background, a
  * text size, a control it turned off) falls back to its default, so a view saved before the catalogue changed never
@@ -109,4 +133,3 @@ export const checkedView = (view, catalogue) => ({
     ...view,
     ...viewValues(parseView(viewParams(view, catalogue.switches).toString(), catalogue))
 });
-//# sourceMappingURL=namedViews.js.map

package/dist/src/packedText.d.ts

@@ -0,0 +1,21 @@
+/**
+ * What a build keeps gzipped, unpacked in the page when it is asked for: what a static catalogue weighs most and reads
+ * least (axe's script, "Used in"). A build names such files `.bin`, since `.gz` makes some hosts send them with
+ * `Content-Encoding: gzip`, which the browser would unpack before the page does.
+ *
+ * @module
+ */
+/**
+ * A gzipped script, at an address a script element can load: a blob URL, which its loader revokes once it ran.
+ *
+ * @param address - the file's address.
+ * @throws when it cannot be fetched.
+ */
+export declare const unpackedScript: (address: string) => Promise<string>;
+/**
+ * A gzipped JSON document, parsed.
+ *
+ * @param address - the file's address.
+ * @throws when it cannot be fetched, or is not JSON.
+ */
+export declare const packedJson: (address: string) => Promise<unknown>;