forgebook 0.1.8 → 0.3.0

package/dist/src/deviceView.d.ts

@@ -0,0 +1,172 @@
+/**
+ * Which device frame a story is shown in: the models' ids, the default a catalogue and a story set
+ * (`parameters.device`), and the view's own choice, kept in the address (`device`, `orientation`).
+ *
+ * @remarks
+ * Only the ids live here, not the models' sizes and drawings (`devices.ts`, `deviceDrawing.ts`): this module is read
+ * on the shell's first load and by the address's parser, and a catalogue that never shows a frame should not load
+ * them. The view's `auto` follows the story's default, so a link without `device` shows each story as its author
+ * meant; `off` and a model id are the person's choice, which wins. Pure.
+ *
+ * @module
+ */
+import type { DeviceOrientation, StoryDeviceSetting } from "@forgebook/story-format/csf";
+/** What a device is: a phone, or a tablet. */
+export type DeviceKind = "phone" | "tablet";
+/**
+ * Every model as the menu lists it, in its order: phones first, then tablets, the generic phone last of the phones;
+ * its sizes and drawing are `devices.ts`'. The one list of the ids, so the address, the index and the menu agree.
+ */
+export declare const DEVICE_ENTRIES: readonly [{
+    readonly id: "iphone-16";
+    readonly name: "iPhone 16";
+    readonly kind: "phone";
+}, {
+    readonly id: "iphone-16-pro-max";
+    readonly name: "iPhone 16 Pro Max";
+    readonly kind: "phone";
+}, {
+    readonly id: "iphone-16e";
+    readonly name: "iPhone 16e";
+    readonly kind: "phone";
+}, {
+    readonly id: "pixel-9";
+    readonly name: "Pixel 9";
+    readonly kind: "phone";
+}, {
+    readonly id: "galaxy-s24";
+    readonly name: "Galaxy S24";
+    readonly kind: "phone";
+}, {
+    readonly id: "phone";
+    readonly name: "Generic phone";
+    readonly kind: "phone";
+}, {
+    readonly id: "ipad-mini";
+    readonly name: "iPad mini";
+    readonly kind: "tablet";
+}, {
+    readonly id: "ipad-pro-13";
+    readonly name: "iPad Pro 13″";
+    readonly kind: "tablet";
+}];
+/** A device model's id. */
+export type DeviceId = (typeof DEVICE_ENTRIES)[number]["id"];
+/** A model as the menu lists it: its id, its name (the generic phone's is the shell's text) and its kind. */
+export type DeviceEntry = {
+    /** Its id. */
+    readonly id: DeviceId;
+    /** Its name; the generic phone's is the shell's text (`deviceGeneric`). */
+    readonly name: string;
+    /** A phone or a tablet, the menu's groups. */
+    readonly kind: DeviceKind;
+};
+/** The models' ids, in the menu's order. */
+export declare const DEVICE_IDS: readonly DeviceId[];
+/**
+ * The address's parameter of the view's device. Forgebook's own parameters have plain names (`width`, `zoom`), but
+ * `device` and `orientation` are names a catalogue may well give its own switches, so these two take Forgebook's name
+ * before them: a catalogue's `device` switch keeps its parameter. A dot, not a colon, so the address shows it as is.
+ */
+export declare const DEVICE_PARAMETER = "forgebook.device";
+/** The address's parameter of how the device is held, under Forgebook's name as `DEVICE_PARAMETER` is. */
+export declare const ORIENTATION_PARAMETER = "forgebook.orientation";
+/** The model shown when nothing names one: a generic phone, so no brand is the catalogue's default. */
+export declare const DEFAULT_DEVICE: DeviceId;
+/** How a device is held, in the menu's order. */
+export declare const DEVICE_ORIENTATIONS: readonly DeviceOrientation[];
+/**
+ * Whether a text is a device model's id.
+ *
+ * @param value - the text.
+ */
+export declare const isDeviceId: (value: unknown) => value is DeviceId;
+/**
+ * Whether a text is an orientation.
+ *
+ * @param value - the text.
+ */
+export declare const isDeviceOrientation: (value: unknown) => value is DeviceOrientation;
+/**
+ * The view's device: `auto` follows the story's default, `off` shows no frame whatever the story says, a model's id
+ * shows that model.
+ */
+export type DeviceChoice = "auto" | "off" | DeviceId;
+/** The view's orientation: `auto` follows the story's default. */
+export type OrientationChoice = "auto" | DeviceOrientation;
+/** A default with every field filled: the catalogue's, or a story's over it. */
+export type DeviceDefault = {
+    /** Whether the story starts in the frame. */
+    readonly isFramed: boolean;
+    /** The model the frame shows, and the one the toggle turns on. */
+    readonly model: DeviceId;
+    /** How the device is held. */
+    readonly orientation: DeviceOrientation;
+    /** Whether a story shown in the device is touched with a simulated finger, as a phone is. */
+    readonly isTouch: boolean;
+    /** Whether the story draws edge to edge, told the safe areas, instead of sitting inside them. */
+    readonly isEdgeToEdge: boolean;
+};
+/** The default when no one sets one: no frame, the generic phone upright, touched once framed. */
+export declare const NO_DEVICE: DeviceDefault;
+/** The device a story is shown in: a model, held one way. */
+export type ShownDevice = {
+    /** The model. */
+    readonly model: DeviceId;
+    /** How it is held. */
+    readonly orientation: DeviceOrientation;
+};
+/** The device a story is shown in, and whether it is touched there. */
+export type StoryDevice = ShownDevice & {
+    /** Whether the story is touched with a simulated finger, unless the reader turns it off. */
+    readonly isTouch: boolean;
+    /** Whether the story draws edge to edge, told the safe areas. */
+    readonly isEdgeToEdge: boolean;
+};
+/**
+ * Why a device setting cannot be used, or none: a model no one has, an orientation that is none.
+ *
+ * @param setting - the setting, as a catalogue or a story writes it.
+ */
+export declare const deviceSettingProblem: (setting: {
+    readonly model?: string;
+    readonly orientation?: string;
+}) => string | undefined;
+/**
+ * A default with a setting over it: each field the setting gives replaces the default's, one it cannot use is left
+ * out (the index and the configuration report it).
+ *
+ * @param base - the default underneath: the catalogue's, or `NO_DEVICE`.
+ * @param setting - the setting over it: a story's, its own over its meta's; none leaves the default.
+ */
+export declare const deviceDefaultOf: (base: DeviceDefault, setting: StoryDeviceSetting | undefined) => DeviceDefault;
+/**
+ * The default of a page of several stories (a component's): the first story framed by default, so the toggle reads
+ * on while any is framed and turning it off shows them all without one; the catalogue's when none is.
+ *
+ * @param base - the catalogue's default.
+ * @param settings - the stories' settings, in the page's order.
+ */
+export declare const pageDeviceDefault: (base: DeviceDefault, settings: readonly (StoryDeviceSetting | undefined)[]) => DeviceDefault;
+/** The view's part about the device. */
+export type DeviceView = {
+    /** The device. */
+    readonly device: DeviceChoice;
+    /** How it is held. */
+    readonly orientation: OrientationChoice;
+};
+/**
+ * The device a story is shown in, or none: the view's choice, the story's default where the view leaves it.
+ *
+ * @param view - the view's device and orientation.
+ * @param story - the story's default (the catalogue's under its own).
+ */
+export declare const shownDevice: (view: DeviceView, story: DeviceDefault) => StoryDevice | undefined;
+/**
+ * The view with the frame turned on or off: the address keeps only what differs from the story's default.
+ *
+ * @param view - the view.
+ * @param story - the story's default.
+ * @param isOn - whether the frame is to be shown.
+ */
+export declare const withFrame: <View extends DeviceView>(view: View, story: DeviceDefault, isOn: boolean) => View;

package/dist/src/deviceView.js

@@ -0,0 +1,111 @@
+/**
+ * Every model as the menu lists it, in its order: phones first, then tablets, the generic phone last of the phones;
+ * its sizes and drawing are `devices.ts`'. The one list of the ids, so the address, the index and the menu agree.
+ */
+// biome-ignore lint/nursery/useExplicitType: the ids' type is this list's own (`DeviceId`); a written one would repeat every id
+export const DEVICE_ENTRIES = [
+    { id: "iphone-16", name: "iPhone 16", kind: "phone" },
+    { id: "iphone-16-pro-max", name: "iPhone 16 Pro Max", kind: "phone" },
+    { id: "iphone-16e", name: "iPhone 16e", kind: "phone" },
+    { id: "pixel-9", name: "Pixel 9", kind: "phone" },
+    { id: "galaxy-s24", name: "Galaxy S24", kind: "phone" },
+    { id: "phone", name: "Generic phone", kind: "phone" },
+    { id: "ipad-mini", name: "iPad mini", kind: "tablet" },
+    { id: "ipad-pro-13", name: "iPad Pro 13″", kind: "tablet" }
+];
+/** The models' ids, in the menu's order. */
+export const DEVICE_IDS = DEVICE_ENTRIES.map((entry) => entry.id);
+/**
+ * The address's parameter of the view's device. Forgebook's own parameters have plain names (`width`, `zoom`), but
+ * `device` and `orientation` are names a catalogue may well give its own switches, so these two take Forgebook's name
+ * before them: a catalogue's `device` switch keeps its parameter. A dot, not a colon, so the address shows it as is.
+ */
+export const DEVICE_PARAMETER = "forgebook.device";
+/** The address's parameter of how the device is held, under Forgebook's name as `DEVICE_PARAMETER` is. */
+export const ORIENTATION_PARAMETER = "forgebook.orientation";
+/** The model shown when nothing names one: a generic phone, so no brand is the catalogue's default. */
+export const DEFAULT_DEVICE = "phone";
+/** How a device is held, in the menu's order. */
+export const DEVICE_ORIENTATIONS = ["portrait", "landscape"];
+/**
+ * Whether a text is a device model's id.
+ *
+ * @param value - the text.
+ */
+export const isDeviceId = (value) => DEVICE_IDS.some((id) => id === value);
+/**
+ * Whether a text is an orientation.
+ *
+ * @param value - the text.
+ */
+export const isDeviceOrientation = (value) => DEVICE_ORIENTATIONS.some((orientation) => orientation === value);
+/** The default when no one sets one: no frame, the generic phone upright, touched once framed. */
+export const NO_DEVICE = {
+    isFramed: false,
+    model: DEFAULT_DEVICE,
+    orientation: "portrait",
+    isTouch: true,
+    isEdgeToEdge: false
+};
+/**
+ * Why a device setting cannot be used, or none: a model no one has, an orientation that is none.
+ *
+ * @param setting - the setting, as a catalogue or a story writes it.
+ */
+export const deviceSettingProblem = (setting) => {
+    if (setting.model !== undefined && !isDeviceId(setting.model))
+        return `"${setting.model}" is no device model; the models are ${DEVICE_IDS.join(", ")}`;
+    if (setting.orientation !== undefined && !isDeviceOrientation(setting.orientation))
+        return `"${setting.orientation}" is no orientation; write portrait or landscape`;
+    return undefined;
+};
+/**
+ * A default with a setting over it: each field the setting gives replaces the default's, one it cannot use is left
+ * out (the index and the configuration report it).
+ *
+ * @param base - the default underneath: the catalogue's, or `NO_DEVICE`.
+ * @param setting - the setting over it: a story's, its own over its meta's; none leaves the default.
+ */
+export const deviceDefaultOf = (base, setting) => ({
+    isFramed: setting?.frame ?? base.isFramed,
+    model: isDeviceId(setting?.model) ? setting.model : base.model,
+    orientation: isDeviceOrientation(setting?.orientation) ? setting.orientation : base.orientation,
+    isTouch: setting?.touch ?? base.isTouch,
+    isEdgeToEdge: setting?.edgeToEdge ?? base.isEdgeToEdge
+});
+/**
+ * The default of a page of several stories (a component's): the first story framed by default, so the toggle reads
+ * on while any is framed and turning it off shows them all without one; the catalogue's when none is.
+ *
+ * @param base - the catalogue's default.
+ * @param settings - the stories' settings, in the page's order.
+ */
+export const pageDeviceDefault = (base, settings) => settings.map((setting) => deviceDefaultOf(base, setting)).find((each) => each.isFramed) ?? base;
+/**
+ * The device a story is shown in, or none: the view's choice, the story's default where the view leaves it.
+ *
+ * @param view - the view's device and orientation.
+ * @param story - the story's default (the catalogue's under its own).
+ */
+export const shownDevice = (view, story) => {
+    if (view.device === "off" || (view.device === "auto" && !story.isFramed))
+        return undefined;
+    return {
+        model: view.device === "auto" ? story.model : view.device,
+        orientation: view.orientation === "auto" ? story.orientation : view.orientation,
+        isTouch: story.isTouch,
+        isEdgeToEdge: story.isEdgeToEdge
+    };
+};
+/**
+ * The view with the frame turned on or off: the address keeps only what differs from the story's default.
+ *
+ * @param view - the view.
+ * @param story - the story's default.
+ * @param isOn - whether the frame is to be shown.
+ */
+export const withFrame = (view, story, isOn) => {
+    if (isOn)
+        return { ...view, device: story.isFramed ? "auto" : story.model };
+    return { ...view, device: story.isFramed ? "off" : "auto" };
+};

package/dist/src/devices.d.ts

@@ -0,0 +1,115 @@
+/**
+ * The device models a story can be shown in: each one's viewport in CSS px, its screen's corner radius, its safe
+ * areas held either way, and the cut its camera makes in the screen.
+ *
+ * @remarks
+ * The sizes are the CSS viewports the devices' browsers report (a full-screen web app's: the status bar included),
+ * the safe areas what `env(safe-area-inset-*)` gives a page that covers the screen. Apple publishes its numbers;
+ * Android's vary with the system's settings, so theirs are the stock system's status bar and gesture bar. Loaded only
+ * where a frame is drawn (the shell's frame, `forgebook shot`) and by the Node side that checks a model's id. Pure.
+ *
+ * @module
+ */
+import type { DeviceOrientation } from "@forgebook/story-format/csf";
+import { type DeviceEntry, type DeviceId } from "./deviceView.ts";
+/** Lengths on each side, in CSS px. */
+export type Insets = {
+    /** At the top. */
+    readonly top: number;
+    /** At the right. */
+    readonly right: number;
+    /** At the bottom. */
+    readonly bottom: number;
+    /** At the left. */
+    readonly left: number;
+};
+/** The system a device runs, which draws its status bar and its home indicator its own way. */
+export type DevicePlatform = "ios" | "android";
+/**
+ * The cut a front camera makes in the screen, upright: an island (a pill floating under the top edge), a notch (cut
+ * from the top edge), or a hole (a round punch under the top edge). Lengths in CSS px.
+ */
+export type DeviceCutout = {
+    /** A pill floating under the top edge. */
+    readonly kind: "island";
+    /** Its width. */
+    readonly width: number;
+    /** Its height. */
+    readonly height: number;
+    /** How far under the top edge it floats. */
+    readonly top: number;
+} | {
+    /** A cut from the top edge, its lower corners rounded. */
+    readonly kind: "notch";
+    /** Its width. */
+    readonly width: number;
+    /** Its height. */
+    readonly height: number;
+} | {
+    /** A round punch under the top edge. */
+    readonly kind: "hole";
+    /** Its diameter. */
+    readonly diameter: number;
+    /** How far under the top edge it sits. */
+    readonly top: number;
+};
+/** A device model: its entry in the menu, and its hardware. */
+export type DeviceModel = DeviceEntry & {
+    /** Its system. */
+    readonly platform: DevicePlatform;
+    /** Its viewport's width upright, in CSS px. */
+    readonly width: number;
+    /** Its viewport's height upright, in CSS px. */
+    readonly height: number;
+    /** Its screen's corner radius, in CSS px; 0 for square corners. */
+    readonly radius: number;
+    /** Its safe areas, upright and on its side (its top to the left). */
+    readonly safeArea: Readonly<Record<DeviceOrientation, Insets>>;
+    /** The cut its front camera makes in the screen; none when the camera sits in the bezel. */
+    readonly cutout?: DeviceCutout;
+};
+/** Every model, in the menu's order. */
+export declare const DEVICE_MODELS: readonly DeviceModel[];
+/**
+ * A model by its id.
+ *
+ * @param id - the model's id.
+ */
+export declare const deviceModel: (id: DeviceId) => DeviceModel;
+/** A model's screen, held one way: what the story gets. */
+export type DeviceScreen = {
+    /** The viewport's width, in CSS px. */
+    readonly width: number;
+    /** The viewport's height, in CSS px. */
+    readonly height: number;
+    /** The safe areas, in CSS px. */
+    readonly safeArea: Insets;
+};
+/**
+ * A model's screen, held one way: on its side, its width and height swap.
+ *
+ * @param model - the model.
+ * @param orientation - how it is held.
+ */
+export declare const deviceScreen: (model: DeviceModel, orientation: DeviceOrientation) => DeviceScreen;
+/** The part of a device's screen a story is drawn in, and the safe areas it is told. */
+export type StoryArea = {
+    /** Its width: the story's viewport, in CSS px. */
+    readonly width: number;
+    /** Its height, in CSS px. */
+    readonly height: number;
+    /** The room around it on the screen, which the status bar, the camera's cut and the home indicator take. */
+    readonly around: Insets;
+    /** The safe areas the story is told: the screen's for a story drawn edge to edge, none for one inside them. */
+    readonly safeArea: Insets;
+};
+/**
+ * The part of a device's screen a story is drawn in: inside the safe areas, as a page in a phone's browser or an app
+ * that respects them is, so nothing the device draws covers it; or the whole screen for a story drawn edge to edge,
+ * told the safe areas to pad itself with.
+ *
+ * @param model - the model.
+ * @param orientation - how it is held.
+ * @param isEdgeToEdge - whether the story draws edge to edge.
+ */
+export declare const storyArea: (model: DeviceModel, orientation: DeviceOrientation, isEdgeToEdge: boolean) => StoryArea;

package/dist/src/devices.js

@@ -0,0 +1,135 @@
+import { DEVICE_ENTRIES } from "./deviceView.js";
+/** Every model, by id. */
+const HARDWARE = {
+    "iphone-16": {
+        platform: "ios",
+        width: 393,
+        height: 852,
+        radius: 55,
+        safeArea: {
+            portrait: { top: 59, right: 0, bottom: 34, left: 0 },
+            landscape: { top: 0, right: 59, bottom: 21, left: 59 }
+        },
+        cutout: { kind: "island", width: 125, height: 37, top: 11 }
+    },
+    "iphone-16-pro-max": {
+        platform: "ios",
+        width: 440,
+        height: 956,
+        radius: 62,
+        safeArea: {
+            portrait: { top: 62, right: 0, bottom: 34, left: 0 },
+            landscape: { top: 0, right: 62, bottom: 21, left: 62 }
+        },
+        cutout: { kind: "island", width: 125, height: 37, top: 14 }
+    },
+    "iphone-16e": {
+        platform: "ios",
+        width: 390,
+        height: 844,
+        radius: 47,
+        safeArea: {
+            portrait: { top: 47, right: 0, bottom: 34, left: 0 },
+            landscape: { top: 0, right: 47, bottom: 21, left: 47 }
+        },
+        cutout: { kind: "notch", width: 162, height: 33 }
+    },
+    "pixel-9": {
+        platform: "android",
+        width: 412,
+        height: 923,
+        radius: 44,
+        safeArea: {
+            portrait: { top: 48, right: 0, bottom: 24, left: 0 },
+            landscape: { top: 24, right: 0, bottom: 16, left: 48 }
+        },
+        cutout: { kind: "hole", diameter: 24, top: 12 }
+    },
+    "galaxy-s24": {
+        platform: "android",
+        width: 360,
+        height: 780,
+        radius: 32,
+        safeArea: {
+            portrait: { top: 36, right: 0, bottom: 24, left: 0 },
+            landscape: { top: 24, right: 0, bottom: 16, left: 36 }
+        },
+        cutout: { kind: "hole", diameter: 20, top: 9 }
+    },
+    phone: {
+        platform: "android",
+        width: 360,
+        height: 800,
+        radius: 28,
+        safeArea: {
+            portrait: { top: 32, right: 0, bottom: 24, left: 0 },
+            landscape: { top: 24, right: 0, bottom: 16, left: 0 }
+        }
+    },
+    "ipad-mini": {
+        platform: "ios",
+        width: 744,
+        height: 1133,
+        radius: 22,
+        safeArea: {
+            portrait: { top: 24, right: 0, bottom: 20, left: 0 },
+            landscape: { top: 24, right: 0, bottom: 20, left: 0 }
+        }
+    },
+    "ipad-pro-13": {
+        platform: "ios",
+        width: 1032,
+        height: 1376,
+        radius: 30,
+        safeArea: {
+            portrait: { top: 24, right: 0, bottom: 20, left: 0 },
+            landscape: { top: 24, right: 0, bottom: 20, left: 0 }
+        }
+    }
+};
+/** Every model, in the menu's order. */
+export const DEVICE_MODELS = DEVICE_ENTRIES.map((entry) => ({
+    ...entry,
+    ...HARDWARE[entry.id]
+}));
+/**
+ * A model by its id.
+ *
+ * @param id - the model's id.
+ */
+export const deviceModel = (id) => {
+    const entry = DEVICE_ENTRIES.find((each) => each.id === id) ?? { id, name: id, kind: "phone" };
+    return { ...entry, ...HARDWARE[id] };
+};
+/**
+ * A model's screen, held one way: on its side, its width and height swap.
+ *
+ * @param model - the model.
+ * @param orientation - how it is held.
+ */
+export const deviceScreen = (model, orientation) => orientation === "portrait"
+    ? { width: model.width, height: model.height, safeArea: model.safeArea.portrait }
+    : { width: model.height, height: model.width, safeArea: model.safeArea.landscape };
+/** No room on any side. */
+const NO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+/**
+ * The part of a device's screen a story is drawn in: inside the safe areas, as a page in a phone's browser or an app
+ * that respects them is, so nothing the device draws covers it; or the whole screen for a story drawn edge to edge,
+ * told the safe areas to pad itself with.
+ *
+ * @param model - the model.
+ * @param orientation - how it is held.
+ * @param isEdgeToEdge - whether the story draws edge to edge.
+ */
+export const storyArea = (model, orientation, isEdgeToEdge) => {
+    const screen = deviceScreen(model, orientation);
+    if (isEdgeToEdge)
+        return { width: screen.width, height: screen.height, around: NO_INSETS, safeArea: screen.safeArea };
+    const { top, right, bottom, left } = screen.safeArea;
+    return {
+        width: screen.width - left - right,
+        height: screen.height - top - bottom,
+        around: screen.safeArea,
+        safeArea: NO_INSETS
+    };
+};

package/dist/src/docAnchors.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The anchors of a page's headings and of a component's props: the fragment an address carries, and where it points in
+ * the page. Apart from the docs pages' other helpers, so the search, which names an anchor for each result, loads these
+ * few lines and not the pages' code.
+ *
+ * @module
+ */
+/**
+ * A heading's element id.
+ *
+ * @param anchor - its anchor, as the address's fragment writes it.
+ */
+export declare const headingElementId: (anchor: string) => string;
+/**
+ * A prop's anchor, the fragment of its component page's address.
+ *
+ * @param name - the prop's name.
+ * @param part - the part it belongs to; none for the component's own.
+ */
+export declare const propAnchor: (name: string, part?: string) => string;
+/**
+ * Where an anchor points in a page: a prop's row, which says its name in `data-prop` (`part.name` for a part's), or a
+ * heading, by its element id.
+ *
+ * @param anchor - the anchor.
+ */
+export declare const anchorSelector: (anchor: string) => string;

package/dist/src/docAnchors.js

@@ -0,0 +1,33 @@
+/**
+ * The anchors of a page's headings and of a component's props: the fragment an address carries, and where it points in
+ * the page. Apart from the docs pages' other helpers, so the search, which names an anchor for each result, loads these
+ * few lines and not the pages' code.
+ *
+ * @module
+ */
+/** What every heading's element id starts with. */
+const HEADING_ID_PREFIX = "doc-";
+/**
+ * A heading's element id.
+ *
+ * @param anchor - its anchor, as the address's fragment writes it.
+ */
+export const headingElementId = (anchor) => `${HEADING_ID_PREFIX}${anchor}`;
+/** What every prop's anchor starts with: a heading's anchor never holds a dot, so the two cannot meet. */
+const PROP_ANCHOR = "prop.";
+/**
+ * A prop's anchor, the fragment of its component page's address.
+ *
+ * @param name - the prop's name.
+ * @param part - the part it belongs to; none for the component's own.
+ */
+export const propAnchor = (name, part) => `${PROP_ANCHOR}${part === undefined ? "" : `${part}.`}${name}`;
+/**
+ * Where an anchor points in a page: a prop's row, which says its name in `data-prop` (`part.name` for a part's), or a
+ * heading, by its element id.
+ *
+ * @param anchor - the anchor.
+ */
+export const anchorSelector = (anchor) => anchor.startsWith(PROP_ANCHOR)
+    ? `[data-prop="${CSS.escape(anchor.slice(PROP_ANCHOR.length))}"]`
+    : `[id="${CSS.escape(headingElementId(anchor))}"]`;