forgebook 0.0.0-stage → 0.1.2

package/dist/src/shell/StageTools.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MEASURE_TOOLS } from "../viewState.js";
+import { useCatalogue } from "./catalogueContext.js";
+import { Icon } from "./icons.js";
+import { STRINGS } from "./strings.js";
+/** Each tool's icon. */
+const TOOL_ICONS = {
+    outline: "outline",
+    grid: "grid",
+    measure: "ruler"
+};
+/**
+ * The zoom and the tools, floating at the stage's lower end corner: they change how the story is looked at, not what
+ * it gets, so they sit on the stage rather than in the toolbar.
+ *
+ * @param props - the zoom, the tools and their setters.
+ */
+export const StageTools = ({ zoom, onZoomChange, tools, onToolsChange }) => {
+    const { zooms } = useCatalogue();
+    const step = zooms.indexOf(zoom);
+    const zoomOut = zooms[step - 1];
+    const zoomIn = zooms[step + 1];
+    return (_jsxs("div", { className: "forgebook-stage-tools", role: "toolbar", "aria-label": STRINGS.stageTools, children: [_jsxs("div", { className: "forgebook-stage-tools__group", children: [_jsx("button", { type: "button", className: "forgebook-stage-tools__button", "aria-label": STRINGS.zoomOut, title: STRINGS.zoomOut, disabled: zoomOut === undefined, onClick: () => {
+                            if (zoomOut !== undefined)
+                                onZoomChange(zoomOut);
+                        }, children: _jsx(Icon, { name: "minus", size: 14 }) }), _jsx("button", { type: "button", className: "forgebook-stage-tools__zoom", "aria-label": `${STRINGS.zoom} ${zoom}%: ${STRINGS.zoomReset}`, title: STRINGS.zoomReset, disabled: zoom === 100, onClick: () => onZoomChange(100), children: `${zoom}%` }), _jsx("button", { type: "button", className: "forgebook-stage-tools__button", "aria-label": STRINGS.zoomIn, title: STRINGS.zoomIn, disabled: zoomIn === undefined, onClick: () => {
+                            if (zoomIn !== undefined)
+                                onZoomChange(zoomIn);
+                        }, children: _jsx(Icon, { name: "plus", size: 14 }) })] }), _jsx("span", { className: "forgebook-stage-tools__divider" }), _jsx("div", { className: "forgebook-stage-tools__group", children: MEASURE_TOOLS.map((tool) => {
+                    const isOn = tools.includes(tool);
+                    return (_jsx("button", { type: "button", className: "forgebook-stage-tools__button", "aria-pressed": isOn, title: STRINGS.tools[tool], "aria-label": STRINGS.tools[tool], onClick: () => onToolsChange(MEASURE_TOOLS.filter((known) => (known === tool ? !isOn : tools.includes(known)))), children: _jsx(Icon, { name: TOOL_ICONS[tool], size: 14 }) }, tool));
+                }) })] }));
+};
+//# sourceMappingURL=StageTools.js.map

package/dist/src/shell/StageTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageTools.js","sourceRoot":"","sources":["../../../src/shell/StageTools.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+/**
+ * The room a story's frame gets on the stage, as a browser's device mode: the stage's whole width or a fixed one,
+ * centred, with a handle on each side; the width it has is reported to the toolbar's field. On a story's page a
+ * handle at its foot sets its height too (note 142): the story's own (its content, at least the height it declares) or a dragged one, which is the window the story's overlays are placed in.
+ *
+ * @remarks
+ * Dragging either handle widens or narrows the story on both sides at once, so it stays centred; a double click on a
+ * handle gives the story the whole stage again. A handle keeps the pointer while it drags, so the frame under it
+ * cannot take the moves; the arrow keys move it too (10 px, 50 px with Shift). The width reaches the address only when
+ * a drag ends or the toolbar's field is committed, so a drag is one entry in the address, not hundreds. A story wider than the
+ * stage scrolls sideways. The foot handle works the same way downwards (one side, so the height follows the pointer
+ * one for one), its arrow keys are up and down, and a double click gives the story its own height back.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import { type StageHeight, type StageWidth, type Zoom } from "../viewState.ts";
+/** The viewport's props. */
+export type StageViewportProps = {
+    /** The story's width. */
+    readonly width: StageWidth;
+    /** Called with the width a handle, the keyboard or the field set; none shows no handles (the component's page). */
+    readonly onWidthChange?: ((width: StageWidth) => void) | undefined;
+    /** The story's zoom, in percent: it scales the drawing, the story keeps its width. */
+    readonly zoom?: Zoom;
+    /** Called with the width the story really has (a drag's, or the stage's while it fills it), for the toolbar. */
+    readonly onShownWidthChange?: ((width: number | undefined) => void) | undefined;
+    /** The colour the story's page has (its source's, for the view), which the room waits on; the surface's otherwise. */
+    readonly background?: string | undefined;
+    /** The story's height: its own by default. */
+    readonly height?: StageHeight;
+    /** Called with the height the foot handle or its keys set; none shows no foot handle (the component's page). */
+    readonly onHeightChange?: ((height: StageHeight) => void) | undefined;
+    /**
+     * The frame, or a function that draws it at the height set by the foot handle (a drag's while it lasts), in the
+     * story's own CSS px; `undefined` lets the frame take the story's own.
+     */
+    readonly children: ReactNode | ((height: number | undefined) => ReactNode);
+};
+/**
+ * The room of a story's frame.
+ *
+ * @param props - the width, its setter and the frame.
+ */
+export declare const StageViewport: ({ width, onWidthChange, zoom, onShownWidthChange, background, height, onHeightChange, children }: StageViewportProps) => ReactNode;
+//# sourceMappingURL=StageViewport.d.ts.map

package/dist/src/shell/StageViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageViewport.d.ts","sourceRoot":"","sources":["../../../src/shell/StageViewport.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAIL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,IAAI,EACV,MAAM,iBAAiB,CAAC;AAIzB,4BAA4B;AAC5B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,yBAAyB;IACzB,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,mHAAmH;IACnH,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,sFAAsF;IACtF,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IACrB,gHAAgH;IAChH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChF,sHAAsH;IACtH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,8CAA8C;IAC9C,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IAC9B,gHAAgH;IAChH,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtE;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC;CAC5E,CAAC;AA8GF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,kGAS3B,kBAAkB,KAAG,SAkJvB,CAAC"}

package/dist/src/shell/StageViewport.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The room a story's frame gets on the stage, as a browser's device mode: the stage's whole width or a fixed one,
+ * centred, with a handle on each side; the width it has is reported to the toolbar's field. On a story's page a
+ * handle at its foot sets its height too (note 142): the story's own (its content, at least the height it declares) or a dragged one, which is the window the story's overlays are placed in.
+ *
+ * @remarks
+ * Dragging either handle widens or narrows the story on both sides at once, so it stays centred; a double click on a
+ * handle gives the story the whole stage again. A handle keeps the pointer while it drags, so the frame under it
+ * cannot take the moves; the arrow keys move it too (10 px, 50 px with Shift). The width reaches the address only when
+ * a drag ends or the toolbar's field is committed, so a drag is one entry in the address, not hundreds. A story wider than the
+ * stage scrolls sideways. The foot handle works the same way downwards (one side, so the height follows the pointer
+ * one for one), its arrow keys are up and down, and a double click gives the story its own height back.
+ *
+ * @module
+ */
+import { useEffect, useRef, useState } from "react";
+import { clampedHeight, clampedWidth, STAGE_HEIGHT_RANGE } from "../viewState.js";
+import { useCatalogue } from "./catalogueContext.js";
+import { STRINGS } from "./strings.js";
+/** A handle's width, in CSS px: the stage's `$space-4`. */
+const HANDLE_WIDTH = 16;
+/** How much one arrow key changes the width, in CSS px: without and with Shift. */
+const KEY_STEP = { normal: 10, large: 50 };
+/** A height, as the foot handle's readout writes it. */
+const heightLabel = (height) => `${height} px`;
+/** The height set on the stage, in CSS px; none at the story's own. */
+const chosenHeightOf = (height) => (height === "auto" ? undefined : height);
+/** The column of the story and its foot handle: the canvas's room for Fill, its content's otherwise. */
+const columnStyle = (layoutWidth) => layoutWidth === undefined ? { flex: 1, minWidth: 0 } : undefined;
+/** The frame, drawn at the height set on the stage when it is drawn by a function. */
+const drawnFrame = (children, height) => typeof children === "function" ? children(height) : children;
+/**
+ * The handle at the story's foot (note 142): a drag or the up and down keys set the story's height from the one it
+ * has, a double click gives it its own back; it shows the height set.
+ *
+ * @param props - the zoom, the heights and their setters.
+ */
+const FootHandle = ({ scale, roomHeight, fixedHeight, currentHeight, onDrag, onHeightChange }) => {
+    if (onHeightChange === undefined)
+        return null;
+    const startDrag = (event) => {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const startY = event.clientY;
+        // from the height the story has now: its own (at least the declared one) or the one set before
+        const startHeight = currentHeight();
+        const heightAt = (clientY) => clampedHeight(startHeight + (clientY - startY) / scale);
+        const move = (moveEvent) => onDrag(heightAt(moveEvent.clientY));
+        const end = (endEvent) => {
+            handle.removeEventListener("pointermove", move);
+            handle.removeEventListener("pointerup", end);
+            handle.removeEventListener("pointercancel", end);
+            onDrag(undefined);
+            if (endEvent.clientY !== startY)
+                onHeightChange(heightAt(endEvent.clientY));
+        };
+        handle.addEventListener("pointermove", move);
+        handle.addEventListener("pointerup", end);
+        handle.addEventListener("pointercancel", end);
+    };
+    const resizeWithKeys = (event) => {
+        const step = event.shiftKey ? KEY_STEP.large : KEY_STEP.normal;
+        if (event.key === "ArrowDown")
+            onHeightChange(clampedHeight(currentHeight() + step));
+        else if (event.key === "ArrowUp")
+            onHeightChange(clampedHeight(currentHeight() - step));
+        else
+            return;
+        event.preventDefault();
+    };
+    return (_jsx("div", { className: "forgebook-viewport__foot", role: "separator", "aria-orientation": "horizontal", "aria-label": STRINGS.heightHandle, "aria-valuemin": STAGE_HEIGHT_RANGE.min, "aria-valuemax": STAGE_HEIGHT_RANGE.max, "aria-valuenow": fixedHeight ?? roomHeight, title: STRINGS.heightHandleHint, tabIndex: 0, onPointerDown: startDrag, onKeyDown: resizeWithKeys, onDoubleClick: () => onHeightChange("auto"), children: fixedHeight === undefined ? null : (_jsx("span", { className: "forgebook-viewport__foot-label", children: heightLabel(fixedHeight) })) }));
+};
+/**
+ * The room of a story's frame.
+ *
+ * @param props - the width, its setter and the frame.
+ */
+export const StageViewport = ({ width, onWidthChange, zoom = 100, onShownWidthChange, background, height = "auto", onHeightChange, children }) => {
+    const { widthRange } = useCatalogue();
+    const roomRef = useRef(null);
+    const canvasRef = useRef(null);
+    const scale = zoom / 100;
+    // the room the story gets for "fill", in the story's own px: the canvas's width, unzoomed
+    const [canvasWidth, setCanvasWidth] = useState(undefined);
+    // the story's height in its own px, for the zoomed box around it
+    const [roomHeight, setRoomHeight] = useState(undefined);
+    // the width while a drag is under way; the address gets it when the drag ends
+    const [dragWidth, setDragWidth] = useState(undefined);
+    // the width the story really has: the stage's own for "fill"
+    const [shownWidth, setShownWidth] = useState(undefined);
+    // the height while the foot handle drags; the address gets it when the drag ends
+    const [dragHeight, setDragHeight] = useState(undefined);
+    // offsetWidth and offsetHeight are the story's own px: a zoom's transform does not change them
+    useEffect(() => {
+        const room = roomRef.current;
+        const canvas = canvasRef.current;
+        if (room === null || canvas === null)
+            return;
+        const observer = new ResizeObserver(() => {
+            setShownWidth(room.offsetWidth);
+            setRoomHeight(room.offsetHeight);
+            setCanvasWidth(canvas.clientWidth);
+        });
+        observer.observe(room);
+        observer.observe(canvas);
+        return () => observer.disconnect();
+    }, []);
+    // the toolbar's width field shows the width the story has, a drag's included; none once the stage goes
+    const reportedWidth = dragWidth ?? shownWidth;
+    useEffect(() => onShownWidthChange?.(reportedWidth), [onShownWidthChange, reportedWidth]);
+    useEffect(() => () => onShownWidthChange?.(undefined), [onShownWidthChange]);
+    const currentWidth = () => roomRef.current?.offsetWidth ?? widthRange.min;
+    const startDrag = (side, event) => {
+        if (onWidthChange === undefined || event.button !== 0)
+            return;
+        event.preventDefault();
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const startX = event.clientX;
+        const startWidth = currentWidth();
+        // centred: a handle moved by x changes the width by twice x, in the story's own px
+        const widthAt = (clientX) => clampedWidth(startWidth + (2 * (side === "end" ? clientX - startX : startX - clientX)) / scale, widthRange);
+        const move = (moveEvent) => setDragWidth(widthAt(moveEvent.clientX));
+        const end = (endEvent) => {
+            handle.removeEventListener("pointermove", move);
+            handle.removeEventListener("pointerup", end);
+            handle.removeEventListener("pointercancel", end);
+            setDragWidth(undefined);
+            if (endEvent.clientX !== startX)
+                onWidthChange(widthAt(endEvent.clientX));
+        };
+        handle.addEventListener("pointermove", move);
+        handle.addEventListener("pointerup", end);
+        handle.addEventListener("pointercancel", end);
+    };
+    const resizeWithKeys = (side, event) => {
+        if (onWidthChange === undefined)
+            return;
+        const step = event.shiftKey ? KEY_STEP.large : KEY_STEP.normal;
+        const outward = side === "end" ? "ArrowRight" : "ArrowLeft";
+        const inward = side === "end" ? "ArrowLeft" : "ArrowRight";
+        if (event.key === outward)
+            onWidthChange(clampedWidth(currentWidth() + step, widthRange));
+        else if (event.key === inward)
+            onWidthChange(clampedWidth(currentWidth() - step, widthRange));
+        else
+            return;
+        event.preventDefault();
+    };
+    const fixedHeight = dragHeight ?? chosenHeightOf(height);
+    const fixedWidth = dragWidth ?? (width === "fill" ? undefined : width);
+    // "fill" takes the canvas, less the two handles, in the story's own px
+    const handlesWidth = onWidthChange === undefined ? 0 : 2 * HANDLE_WIDTH;
+    const layoutWidth = fixedWidth ?? (canvasWidth === undefined ? undefined : Math.max(0, canvasWidth - handlesWidth) / scale);
+    const handle = (side) => onWidthChange === undefined ? null : (_jsx("div", { className: "forgebook-viewport__handle", "data-side": side, role: "separator", "aria-orientation": "vertical", "aria-label": STRINGS.widthHandle, "aria-valuemin": widthRange.min, "aria-valuemax": widthRange.max, "aria-valuenow": dragWidth ?? shownWidth, title: STRINGS.widthHandleHint, tabIndex: 0, onPointerDown: (event) => startDrag(side, event), onKeyDown: (event) => resizeWithKeys(side, event), onDoubleClick: () => onWidthChange("fill") }));
+    const currentHeight = () => roomRef.current?.offsetHeight ?? STAGE_HEIGHT_RANGE.min;
+    const isDragging = [dragWidth, dragHeight].some((dragged) => dragged !== undefined);
+    return (_jsx("div", { className: "forgebook-viewport", children: _jsxs("div", { ref: canvasRef, className: "forgebook-viewport__canvas", children: [handle("start"), _jsxs("div", { className: "forgebook-viewport__column", style: columnStyle(layoutWidth), children: [_jsx("div", { className: "forgebook-viewport__zoom", style: layoutWidth === undefined
+                                ? undefined
+                                : {
+                                    width: layoutWidth * scale,
+                                    height: roomHeight === undefined ? undefined : roomHeight * scale
+                                }, children: _jsx("div", { ref: roomRef, className: "forgebook-viewport__room", "data-dragging": isDragging ? "" : undefined, style: {
+                                    width: layoutWidth,
+                                    transform: scale === 1 ? undefined : `scale(${scale})`,
+                                    backgroundColor: background
+                                }, children: drawnFrame(children, fixedHeight) }) }), _jsx(FootHandle, { scale: scale, roomHeight: roomHeight, fixedHeight: fixedHeight, currentHeight: currentHeight, onDrag: setDragHeight, onHeightChange: onHeightChange })] }), handle("end")] }) }));
+};
+//# sourceMappingURL=StageViewport.js.map

package/dist/src/shell/StageViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageViewport.js","sourceRoot":"","sources":["../../../src/shell/StageViewport.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+/**
+ * A story's code, as the panel's Code tab and the component page show it: its `render` as written, coloured by the
+ * plugin, or, for a story drawn from its args, the component in the framework's code with the values of the moment.
+ *
+ * @module
+ */
+import type { StoryFileCode } from "@forgebook/story-format/source";
+import type { ReactNode } from "react";
+import type { StoryCodeWriter } from "../frame/renderer.ts";
+import type { PanelArgs } from "../messages.ts";
+/** Which story's code, and the values its JSX is drawn from when it has no `render`. */
+export type StoryCodeSource = {
+    /** The story file's code. */
+    readonly code: StoryFileCode;
+    /** The story's export name. */
+    readonly exportName: string;
+    /** The component's name, for the code of a story drawn from its args. */
+    readonly componentName: string;
+    /** The values of the moment: the story's args, with the panel's over them on the story page. */
+    readonly args: PanelArgs;
+};
+/**
+ * The story's code as text, as copied.
+ *
+ * @param source - the file's code, the story, the component's name and the args.
+ * @param write - the framework's code writer, for a story drawn from its args.
+ */
+export declare const storyCodeText: ({ code, exportName, componentName, args }: StoryCodeSource, write: StoryCodeWriter) => string;
+/**
+ * The story's code, coloured.
+ *
+ * @param props - the file's code, the story, the component's name and the args.
+ */
+export declare const StoryCodeBlock: (source: StoryCodeSource) => ReactNode;
+//# sourceMappingURL=StoryCodeBlock.d.ts.map

package/dist/src/shell/StoryCodeBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryCodeBlock.d.ts","sourceRoot":"","sources":["../../../src/shell/StoryCodeBlock.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,wFAAwF;AACxF,MAAM,MAAM,eAAe,GAAG;IAC5B,6BAA6B;IAC7B,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,gGAAgG;IAChG,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,2CAA2C,eAAe,EAC1D,OAAO,eAAe,KACrB,MAA8D,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,eAAe,KAAG,SAmBxD,CAAC"}

package/dist/src/shell/StoryCodeBlock.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Code } from "./Code.js";
+import { useCodeWriter } from "./codeWriter.js";
+/**
+ * The story's code as text, as copied.
+ *
+ * @param source - the file's code, the story, the component's name and the args.
+ * @param write - the framework's code writer, for a story drawn from its args.
+ */
+export const storyCodeText = ({ code, exportName, componentName, args }, write) => code[exportName]?.text ?? write(componentName, args);
+/**
+ * The story's code, coloured.
+ *
+ * @param props - the file's code, the story, the component's name and the args.
+ */
+export const StoryCodeBlock = (source) => {
+    const write = useCodeWriter();
+    const render = source.code[source.exportName];
+    if (render !== undefined) {
+        // biome-ignore lint/style/useNamingConvention: React's own name for markup set as HTML
+        const markup = { __html: render.html };
+        return (_jsx("pre", { className: "forgebook-code-block", children: _jsx("code", { className: "forgebook-code", dangerouslySetInnerHTML: markup }) }));
+    }
+    // the attributes' names are names, not types: only the component's name is coloured as one
+    return (_jsx("pre", { className: "forgebook-code-block", children: _jsx(Code, { text: storyCodeText(source, write), names: Object.keys(source.args) }) }));
+};
+//# sourceMappingURL=StoryCodeBlock.js.map

package/dist/src/shell/StoryCodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryCodeBlock.js","sourceRoot":"","sources":["../../../src/shell/StoryCodeBlock.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAchD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAmB,EAC1D,KAAsB,EACd,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,IAAI,KAAK,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;AAElE;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAuB,EAAa,EAAE;IACnE,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9C,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,uFAAuF;QACvF,MAAM,MAAM,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC;QACvC,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YAEnC,eAAM,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,MAAM,GAAI,GAChE,CACP,CAAC;IACJ,CAAC;IACD,2FAA2F;IAC3F,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YACnC,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAI,GACzE,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,26 @@
+/**
+ * The picker of a component's stories in its pages' header: All (the component's page), then every story, under its
+ * group, in one select, so the header keeps one line however many stories the component has.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import { type TreeComponent, type TreeStory } from "../storyTree.ts";
+/** The picker's props. */
+export type StoryPickerProps = {
+    /** The component. */
+    readonly component: TreeComponent;
+    /** The shown story's id; none on the component's page. */
+    readonly currentStoryId: string | undefined;
+    /** Opens the component's page. */
+    readonly onOpenComponent: () => void;
+    /** Opens a story's page. */
+    readonly onOpenStory: (story: TreeStory) => void;
+};
+/**
+ * The picker of a component's stories.
+ *
+ * @param props - the component, the shown story and how to open a page.
+ */
+export declare const StoryPicker: ({ component, currentStoryId, onOpenComponent, onOpenStory }: StoryPickerProps) => ReactNode;
+//# sourceMappingURL=StoryPicker.d.ts.map

package/dist/src/shell/StoryPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryPicker.d.ts","sourceRoot":"","sources":["../../../src/shell/StoryPicker.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAoB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAkB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAIrF,0BAA0B;AAC1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,kCAAkC;IAClC,QAAQ,CAAC,eAAe,EAAE,MAAM,IAAI,CAAC;IACrC,4BAA4B;IAC5B,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAClD,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,6DAKzB,gBAAgB,KAAG,SA2CrB,CAAC"}

package/dist/src/shell/StoryPicker.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The picker of a component's stories in its pages' header: All (the component's page), then every story, under its
+ * group, in one select, so the header keeps one line however many stories the component has.
+ *
+ * @module
+ */
+import { useId } from "react";
+import { groupLabel } from "../catalogue.js";
+import { groupedStories } from "../storyTree.js";
+import { useCatalogue } from "./catalogueContext.js";
+import { STRINGS } from "./strings.js";
+/** The value of the option that opens the component's page: no story id is empty. */
+const ALL = "";
+/**
+ * The picker of a component's stories.
+ *
+ * @param props - the component, the shown story and how to open a page.
+ */
+export const StoryPicker = ({ component, currentStoryId, onOpenComponent, onOpenStory }) => {
+    const id = useId();
+    const { storyGroups } = useCatalogue();
+    const sections = groupedStories(component.stories, storyGroups.map((group) => group.id));
+    return (_jsxs("div", { className: "forgebook-picker", children: [_jsx("label", { className: "forgebook-popover__label", htmlFor: id, children: STRINGS.storiesNav }), _jsxs("select", { id: id, className: "forgebook-select forgebook-picker__select", value: currentStoryId ?? ALL, onChange: (event) => {
+                    const chosen = component.stories.find((story) => story.id === event.currentTarget.value);
+                    if (chosen === undefined)
+                        onOpenComponent();
+                    else
+                        onOpenStory(chosen);
+                }, children: [_jsx("option", { value: ALL, children: STRINGS.allStories(component.stories.length) }), sections.map((section) => section.group === undefined ? (section.stories.map((story) => (_jsx("option", { value: story.id, children: story.name }, story.id)))) : (_jsx("optgroup", { label: groupLabel(storyGroups, section.group), children: section.stories.map((story) => (_jsx("option", { value: story.id, children: story.name }, story.id))) }, section.group)))] })] }));
+};
+//# sourceMappingURL=StoryPicker.js.map

package/dist/src/shell/StoryPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryPicker.js","sourceRoot":"","sources":["../../../src/shell/StoryPicker.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,EAAoC,KAAK,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAsC,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAcvC,qFAAqF;AACrF,MAAM,GAAG,GAAG,EAAE,CAAC;AAEf;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACM,EAAa,EAAE;IAChC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,EAAE,WAAW,EAAE,GAAG,YAAY,EAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,cAAc,CAC7B,SAAS,CAAC,OAAO,EACjB,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CACrC,CAAC;IACF,OAAO,CACL,eAAK,SAAS,EAAC,kBAAkB,aAC/B,gBAAO,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,EAAE,YACpD,OAAO,CAAC,UAAU,GACb,EACR,kBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,cAAc,IAAI,GAAG,EAC5B,QAAQ,EAAE,CAAC,KAAqC,EAAQ,EAAE;oBACxD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzF,IAAI,MAAM,KAAK,SAAS;wBAAE,eAAe,EAAE,CAAC;;wBACvC,WAAW,CAAC,MAAM,CAAC,CAAC;gBAC3B,CAAC,aAED,iBAAQ,KAAK,EAAE,GAAG,YAAG,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,GAAU,EAC1E,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CACxB,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5B,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC7B,iBAAuB,KAAK,EAAE,KAAK,CAAC,EAAE,YACnC,KAAK,CAAC,IAAI,IADA,KAAK,CAAC,EAAE,CAEZ,CACV,CAAC,CACH,CAAC,CAAC,CAAC,CACF,mBAA8B,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,YACxE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9B,iBAAuB,KAAK,EAAE,KAAK,CAAC,EAAE,YACnC,KAAK,CAAC,IAAI,IADA,KAAK,CAAC,EAAE,CAEZ,CACV,CAAC,IALW,OAAO,CAAC,KAAK,CAMjB,CACZ,CACF,IACM,IACL,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,40 @@
+/**
+ * The catalogue's toolbar: the colour scheme and the contrast switches, the View menu (every other declared switch,
+ * the background, the style sheets, the text size), the stage's width, the panel, and Compare; every value kept in the
+ * address.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import { type FixedView } from "../storyGlobals.ts";
+import { type ViewState } from "../viewState.ts";
+/** The toolbar's props. */
+export type ToolbarProps = {
+    /** The view. */
+    readonly view: ViewState;
+    /** Called with the changed view. */
+    readonly onViewChange: (view: ViewState) => void;
+    /** Whether a story's page is shown: the props panel and Compare belong to it, not to a component's page. */
+    readonly isStoryPage?: boolean;
+    /** Shows the hidden sidebar; none while it is shown. */
+    readonly onShowSidebar?: (() => void) | undefined;
+    /** The width the shown story really has, in CSS px, for the width field; none on a component's page. */
+    readonly shownWidth?: number | undefined;
+    /** What the shown story fixes of the view: shown, and not changeable here; nothing by default. */
+    readonly fixed?: FixedView;
+};
+/**
+ * The button that shows the hidden sidebar, at the toolbar's start; the home's bar holds only it.
+ *
+ * @param props - what showing the sidebar does.
+ */
+export declare const ShowSidebarButton: ({ onShowSidebar }: {
+    readonly onShowSidebar: () => void;
+}) => ReactNode;
+/**
+ * The toolbar.
+ *
+ * @param props - the view, its setter, the page shown and the story's width.
+ */
+export declare const Toolbar: ({ view: ownView, onViewChange: onOwnViewChange, isStoryPage, onShowSidebar, shownWidth, fixed }: ToolbarProps) => ReactNode;
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/src/shell/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/shell/Toolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAoB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,KAAK,SAAS,EAAsC,MAAM,oBAAoB,CAAC;AAExF,OAAO,EASL,KAAK,SAAS,EACf,MAAM,iBAAiB,CAAC;AAUzB,2BAA2B;AAC3B,MAAM,MAAM,YAAY,GAAG;IACzB,gBAAgB;IAChB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACjD,4GAA4G;IAC5G,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClD,wGAAwG;IACxG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,kGAAkG;IAClG,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AA+RF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,mBAAmB;IAAE,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAA;CAAE,KAAG,SAU7F,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,iGAOrB,YAAY,KAAG,SA0DjB,CAAC"}

package/dist/src/shell/Toolbar.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The catalogue's toolbar: the colour scheme and the contrast switches, the View menu (every other declared switch,
+ * the background, the style sheets, the text size), the stage's width, the panel, and Compare; every value kept in the
+ * address.
+ *
+ * @module
+ */
+import { useId } from "react";
+import { NOT_FIXED, withFixed, withOwnFixed } from "../storyGlobals.js";
+import { switchControl, switchWithRole } from "../switches.js";
+import { DEFAULT_VIEW, hasViewChanges, isComparing, isMenuSwitch, PLAIN_BACKDROP, SHEETS_CHOICES } from "../viewState.js";
+import { useCatalogue } from "./catalogueContext.js";
+import { Icon } from "./icons.js";
+import { SchemeSwitches } from "./SchemeSwitches.js";
+import { Segmented } from "./Segmented.js";
+import { STRINGS } from "./strings.js";
+import { switchValueIn, withSwitch } from "./switchView.js";
+import { usePopover } from "./usePopover.js";
+import { WidthField } from "./WidthField.js";
+/**
+ * One switch's row in the View menu: segments, or a list for many values.
+ *
+ * @param props - the switch, the view and its setter.
+ */
+const SwitchRow = ({ each, view, onViewChange, isFixed }) => {
+    const listId = useId();
+    const isCompared = view.compare.includes(each.id) || isFixed;
+    if (switchControl(each) === "list") {
+        return (_jsxs("div", { className: "forgebook-popover__row", children: [_jsx("label", { className: "forgebook-popover__label", htmlFor: listId, children: each.label }), _jsx("select", { id: listId, className: "forgebook-select", value: switchValueIn(view, each), disabled: isCompared, title: isFixed ? STRINGS.setByStory : undefined, onChange: (event) => onViewChange(withSwitch(view, each, event.currentTarget.value)), children: each.values.map((value) => (_jsx("option", { value: value.value, children: value.label }, value.value))) })] }));
+    }
+    return (_jsxs("div", { className: "forgebook-popover__row", children: [_jsx("span", { className: "forgebook-popover__label", children: each.label }), _jsx(Segmented, { label: each.label, options: each.values.map((value) => ({ value: value.value, label: value.label })), value: switchValueIn(view, each), isDisabled: isCompared, disabledNote: isFixed ? STRINGS.setByStory : undefined, onValueChange: (value) => onViewChange(withSwitch(view, each, value)) })] }));
+};
+/**
+ * The View menu: every declared switch the toolbar does not show itself, the background, the style sheets and the
+ * text size, with a dot on its button when one is changed. The background is a list: its six names are too long for
+ * a row of segments.
+ *
+ * @param props - the view and its setter.
+ */
+const ViewMenu = ({ view, onViewChange, fixed = NOT_FIXED, hasOwnChanges }) => {
+    const { isOpen, setIsOpen, buttonRef, panelRef, panelId } = usePopover();
+    const catalogue = useCatalogue();
+    const { switches } = catalogue;
+    const backdropId = useId();
+    const menuSwitches = switches.filter(isMenuSwitch);
+    return (_jsxs("div", { className: "forgebook-view-menu", children: [_jsxs("button", { ref: buttonRef, type: "button", className: "forgebook-button", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => setIsOpen(!isOpen), children: [_jsx(Icon, { name: "sliders", size: 14 }), STRINGS.view, hasOwnChanges ? (_jsx("span", { className: "forgebook-dot", role: "img", "aria-label": STRINGS.viewChanged })) : null, _jsx(Icon, { name: "chevronDown", size: 12 })] }), isOpen ? (_jsxs("div", { ref: panelRef, id: panelId, className: "forgebook-popover", role: "dialog", "aria-label": STRINGS.view, children: [menuSwitches.map((each) => (_jsx(SwitchRow, { each: each, view: view, onViewChange: onViewChange, isFixed: fixed.switches[each.id] !== undefined }, each.id))), _jsxs("div", { className: "forgebook-popover__row", children: [_jsx("label", { className: "forgebook-popover__label", htmlFor: backdropId, children: STRINGS.backdrop }), _jsxs("select", { id: backdropId, className: "forgebook-select", value: view.backdrop, disabled: fixed.backdrop !== undefined, title: fixed.backdrop === undefined ? undefined : STRINGS.setByStory, onChange: (event) => onViewChange({ ...view, backdrop: event.currentTarget.value }), children: [_jsx("option", { value: PLAIN_BACKDROP, children: STRINGS.backdropPlain }), catalogue.backdrops.map((backdrop) => (_jsx("option", { value: backdrop.id, children: backdrop.label }, backdrop.id)))] })] }), _jsxs("div", { className: "forgebook-popover__row", children: [_jsx("span", { className: "forgebook-popover__label", children: STRINGS.sheets }), _jsx(Segmented, { label: STRINGS.sheets, options: SHEETS_CHOICES.map((sheets) => ({
+                                    value: sheets,
+                                    label: STRINGS.sheetChoices[sheets]
+                                })), value: view.sheets, isDisabled: view.compare.includes("sheets"), onValueChange: (sheets) => onViewChange({ ...view, sheets }) })] }), _jsxs("div", { className: "forgebook-popover__row", children: [_jsx("span", { className: "forgebook-popover__label", children: STRINGS.text }), _jsx(Segmented, { label: STRINGS.text, options: catalogue.textSizes.map((text) => ({ value: text, label: STRINGS.textScale(text) })), value: view.text, isDisabled: view.compare.includes("text"), onValueChange: (text) => onViewChange({ ...view, text }) })] }), _jsxs("div", { className: "forgebook-popover__foot", children: [_jsx("button", { type: "button", className: "forgebook-text-button", onClick: () => onViewChange({
+                                    ...view,
+                                    switches: {
+                                        ...view.switches,
+                                        ...Object.fromEntries(menuSwitches.map((each) => [each.id, each.default]))
+                                    },
+                                    backdrop: DEFAULT_VIEW.backdrop,
+                                    sheets: DEFAULT_VIEW.sheets,
+                                    text: DEFAULT_VIEW.text
+                                }), children: STRINGS.resetView }), _jsx("span", { className: "forgebook-popover__note", children: STRINGS.viewInAddress })] })] })) : null] }));
+};
+/**
+ * The Compare menu's choices: Off, the colour scheme at both contrasts when the catalogue has both, each switch of
+ * the View menu, the text sizes and the style sheets.
+ *
+ * @param switches - the catalogue's switches.
+ */
+const compareChoices = (switches) => {
+    const scheme = switchWithRole(switches, "colorScheme");
+    const contrast = switchWithRole(switches, "contrast");
+    const schemes = scheme === undefined
+        ? []
+        : [
+            contrast === undefined
+                ? { axes: [scheme.id], label: scheme.label }
+                : { axes: [scheme.id, contrast.id], label: STRINGS.compareOf([scheme.label, contrast.label]) }
+        ];
+    return [
+        { axes: [], label: STRINGS.compareOff },
+        ...schemes,
+        ...switches.filter(isMenuSwitch).map((each) => ({ axes: [each.id], label: each.label })),
+        { axes: ["text"], label: STRINGS.compareText },
+        { axes: ["sheets"], label: STRINGS.compareSheets }
+    ];
+};
+/**
+ * The Compare menu: what the stage sets side by side, or nothing; its button is pressed while the stage compares.
+ *
+ * @param props - the view, its setter, and whether the page compares at all.
+ */
+const CompareMenu = ({ view, onViewChange, isDisabled, fixed = NOT_FIXED }) => {
+    const { isOpen, setIsOpen, buttonRef, panelRef, panelId } = usePopover();
+    const switches = useCatalogue().switches;
+    const name = useId();
+    return (_jsxs("div", { className: "forgebook-view-menu", children: [_jsxs("button", { ref: buttonRef, type: "button", className: "forgebook-button", title: STRINGS.compare, "aria-pressed": isComparing(view), "aria-expanded": isOpen, "aria-controls": panelId, disabled: isDisabled, onClick: () => setIsOpen(!isOpen), children: [_jsx(Icon, { name: "compare", size: 14 }), _jsx("span", { className: "forgebook-button__label", children: STRINGS.compare }), _jsx(Icon, { name: "chevronDown", size: 12 })] }), isOpen ? (_jsx("div", { ref: panelRef, id: panelId, className: "forgebook-popover forgebook-popover--end", role: "dialog", "aria-label": STRINGS.compare, children: _jsxs("fieldset", { className: "forgebook-choices", children: [_jsx("legend", { className: "forgebook-visually-hidden", children: STRINGS.compare }), compareChoices(switches).map((choice) => (_jsxs("label", { className: "forgebook-choice", children: [_jsx("input", { type: "radio", name: name, 
+                                    // a switch the story fixes would draw the same story in every cell
+                                    disabled: choice.axes.some((axis) => fixed.switches[axis] !== undefined), checked: view.compare.join(",") === choice.axes.join(","), onChange: () => {
+                                        onViewChange({ ...view, compare: choice.axes });
+                                        setIsOpen(false);
+                                    } }), choice.label] }, choice.axes.join(","))))] }) })) : null] }));
+};
+/**
+ * The button that shows the hidden sidebar, at the toolbar's start; the home's bar holds only it.
+ *
+ * @param props - what showing the sidebar does.
+ */
+export const ShowSidebarButton = ({ onShowSidebar }) => (_jsx("button", { type: "button", className: "forgebook-icon-button", title: STRINGS.showSidebar, "aria-label": STRINGS.showSidebar, onClick: onShowSidebar, children: _jsx(Icon, { name: "sidebar", size: 14 }) }));
+/**
+ * The toolbar.
+ *
+ * @param props - the view, its setter, the page shown and the story's width.
+ */
+export const Toolbar = ({ view: ownView, onViewChange: onOwnViewChange, isStoryPage = true, onShowSidebar, shownWidth, fixed = NOT_FIXED }) => {
+    const { widths, switches } = useCatalogue();
+    // the story's fixed values are shown, and a change of anything else keeps the user's own in the address
+    const view = withFixed(ownView, fixed);
+    const onViewChange = (changed) => onOwnViewChange(withOwnFixed(changed, ownView, fixed));
+    return (_jsxs("div", { className: "forgebook-toolbar", children: [onShowSidebar === undefined ? null : _jsx(ShowSidebarButton, { onShowSidebar: onShowSidebar }), _jsx(SchemeSwitches, { view: view, onViewChange: onViewChange, isStoryPage: isStoryPage, fixed: fixed }), _jsx("span", { className: "forgebook-toolbar__divider" }), _jsx(ViewMenu, { view: view, onViewChange: onViewChange, fixed: fixed, hasOwnChanges: hasViewChanges(ownView, switches) }), _jsx("span", { className: "forgebook-toolbar__divider" }), _jsxs("div", { className: "forgebook-toolbar__width", children: [_jsx("span", { className: "forgebook-toolbar__icon", title: STRINGS.width, children: _jsx(Icon, { name: "width", size: 14 }) }), _jsx(Segmented, { label: STRINGS.width, isDisabled: (isStoryPage && isComparing(view)) || fixed.width !== undefined, disabledNote: fixed.width === undefined ? undefined : STRINGS.setByStory, options: [
+                            { value: "fill", label: STRINGS.widthFill },
+                            ...widths.map((preset) => ({
+                                value: preset.width,
+                                label: preset.label ?? STRINGS.widthPx(preset.width)
+                            }))
+                        ], value: view.width, onValueChange: (width) => onViewChange({ ...view, width }), after: _jsx(WidthField, { width: view.width, shownWidth: shownWidth, onWidthChange: (width) => onViewChange({ ...view, width }) }) })] }), _jsx("span", { className: "forgebook-toolbar__spacer" }), _jsxs("button", { type: "button", className: "forgebook-button", title: STRINGS.panel, "aria-pressed": view.isPanelOpen, disabled: !isStoryPage, onClick: () => onViewChange({ ...view, isPanelOpen: !view.isPanelOpen }), children: [_jsx(Icon, { name: "panel", size: 14 }), _jsx("span", { className: "forgebook-button__label", children: STRINGS.panel })] }), _jsx(CompareMenu, { view: view, onViewChange: onViewChange, isDisabled: !isStoryPage, fixed: fixed })] }));
+};
+//# sourceMappingURL=Toolbar.js.map