forgebook 0.0.0-stage → 0.1.0

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * The panel's Interactions tab: the story's play function as it ran, whether it passed or where it failed, each step
+ * it named with `step`, and a button that runs it again on a fresh mount.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { PlayTrace } from "../playTrace.ts";
+/** The tab's props. */
+export type InteractionsTabProps = {
+    /** The play's trace. */
+    readonly trace: PlayTrace;
+    /** Runs the play again on a fresh mount. */
+    readonly onPlayAgain: () => void;
+};
+/**
+ * The tab's hint: the play's status.
+ *
+ * @param trace - the trace.
+ */
+export declare const interactionsHint: (trace: PlayTrace) => string;
+/**
+ * The Interactions tab.
+ *
+ * @param props - the trace and how to run the play again.
+ */
+export declare const InteractionsTab: ({ trace, onPlayAgain }: InteractionsTabProps) => ReactNode;
+//# sourceMappingURL=InteractionsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionsTab.d.ts","sourceRoot":"","sources":["../../../src/shell/InteractionsTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG7D,uBAAuB;AACvB,MAAM,MAAM,oBAAoB,GAAG;IACjC,wBAAwB;IACxB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC;CAClC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,SAAS,KAAG,MAA0C,CAAC;AAgB/F;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,wBAAwB,oBAAoB,KAAG,SAoC9E,CAAC"}

package/dist/src/shell/InteractionsTab.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { STRINGS } from "./strings.js";
+/**
+ * The tab's hint: the play's status.
+ *
+ * @param trace - the trace.
+ */
+export const interactionsHint = (trace) => STRINGS.playStatus[trace.status];
+/** A status with its time, as a line ends. */
+const StatusNote = ({ status, ms }) => (_jsxs("span", { className: "forgebook-play__status", "data-status": status, children: [STRINGS.playStatus[status], ms === undefined ? null : ` · ${STRINGS.playTime(ms)}`] }));
+/**
+ * The Interactions tab.
+ *
+ * @param props - the trace and how to run the play again.
+ */
+export const InteractionsTab = ({ trace, onPlayAgain }) => (_jsxs("div", { className: "forgebook-prop-group", "aria-live": "polite", children: [_jsxs("div", { className: "forgebook-calls__head", children: [_jsxs("h3", { className: "forgebook-prop-group__title", children: [STRINGS.playTitle, " ", _jsx(StatusNote, { status: trace.status, ms: trace.ms })] }), _jsx("button", { type: "button", className: "forgebook-button", disabled: trace.status === "running", onClick: onPlayAgain, children: STRINGS.playAgain })] }), trace.error === undefined ? null : (_jsx("p", { className: "forgebook-problems", role: "alert", children: trace.error })), trace.steps.length === 0 ? (_jsx("p", { className: "forgebook-prop__description", children: STRINGS.playNoSteps })) : (_jsx("ol", { className: "forgebook-play__steps", children: trace.steps.map((step, index) => (_jsxs("li", { className: "forgebook-play__step", "data-status": step.status, children: [_jsx("span", { className: "forgebook-play__label", children: step.label }), _jsx(StatusNote, { status: step.status, ms: step.ms }), step.error === undefined ? null : _jsx("p", { className: "forgebook-play__error", children: step.error })] }, index))) }))] }));
+//# sourceMappingURL=InteractionsTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionsTab.js","sourceRoot":"","sources":["../../../src/shell/InteractionsTab.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAUvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAgB,EAAU,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AAE/F,8CAA8C;AAC9C,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,EAAE,EAIH,EAAa,EAAE,CAAC,CACf,gBAAM,SAAS,EAAC,wBAAwB,iBAAc,MAAM,aACzD,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAC1B,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,IAClD,CACR,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAwB,EAAa,EAAE,CAAC,CAC1F,eAAK,SAAS,EAAC,sBAAsB,eAAW,QAAQ,aACtD,eAAK,SAAS,EAAC,uBAAuB,aACpC,cAAI,SAAS,EAAC,6BAA6B,aACxC,OAAO,CAAC,SAAS,OAAE,KAAC,UAAU,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,GAAI,IACnE,EACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,SAAS,EACpC,OAAO,EAAE,WAAW,YAEnB,OAAO,CAAC,SAAS,GACX,IACL,EACL,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,YAAG,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAC,OAAO,YAC3C,KAAK,CAAC,KAAK,GACV,CACL,EACA,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC1B,YAAG,SAAS,EAAC,6BAA6B,YAAE,OAAO,CAAC,WAAW,GAAK,CACrE,CAAC,CAAC,CAAC,CACF,aAAI,SAAS,EAAC,uBAAuB,YAClC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAGhC,cAAgB,SAAS,EAAC,sBAAsB,iBAAc,IAAI,CAAC,MAAM,aACvE,eAAM,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC3D,KAAC,UAAU,IAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,GAAI,EAC/C,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,KAAK,GAAK,KAHjF,KAAK,CAIT,CACN,CAAC,GACC,CACN,IACG,CACP,CAAC"}

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

@@ -0,0 +1,24 @@
+/**
+ * The matrix's axes in the story's bar: the prop the rows take their values from, and the columns' when there are
+ * two. None draws the story alone.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import type { PropDocs } from "../componentDocs.ts";
+/** The picker's props. */
+export type MatrixPickerProps = {
+    /** The props that can make an axis. */
+    readonly props: readonly PropDocs[];
+    /** The chosen axes' names: the rows', then the columns'. */
+    readonly axes: readonly string[];
+    /** Called with the chosen axes; empty draws the story alone. */
+    readonly onAxesChange: (axes: readonly string[]) => void;
+};
+/**
+ * The matrix's axes.
+ *
+ * @param props - the props that can make an axis, the chosen ones and the setter.
+ */
+export declare const MatrixPicker: ({ props, axes, onAxesChange }: MatrixPickerProps) => ReactNode;
+//# sourceMappingURL=MatrixPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixPicker.d.ts","sourceRoot":"","sources":["../../../src/shell/MatrixPicker.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAoB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGpD,0BAA0B;AAC1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IACpC,4DAA4D;IAC5D,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,gEAAgE;IAChE,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,+BAA+B,iBAAiB,KAAG,SAkD/E,CAAC"}

package/dist/src/shell/MatrixPicker.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The matrix's axes in the story's bar: the prop the rows take their values from, and the columns' when there are
+ * two. None draws the story alone.
+ *
+ * @module
+ */
+import { useId } from "react";
+import { STRINGS } from "./strings.js";
+/**
+ * The matrix's axes.
+ *
+ * @param props - the props that can make an axis, the chosen ones and the setter.
+ */
+export const MatrixPicker = ({ props, axes, onAxesChange }) => {
+    const rowsId = useId();
+    const columnsId = useId();
+    const [rows = "", columns = ""] = axes;
+    return (_jsxs("div", { className: "forgebook-matrix-picker", children: [_jsx("label", { htmlFor: rowsId, className: "forgebook-popover__label", children: STRINGS.matrix }), _jsxs("select", { id: rowsId, className: "forgebook-select", "data-set": rows === "" ? undefined : "", value: rows, onChange: (event) => {
+                    const next = event.currentTarget.value;
+                    onAxesChange(next === "" ? [] : [next, ...(columns === "" || columns === next ? [] : [columns])]);
+                }, children: [_jsx("option", { value: "", children: STRINGS.matrixNone }), props.map((prop) => (_jsx("option", { value: prop.name, children: prop.name }, prop.name)))] }), _jsx("span", { "aria-hidden": "true", children: "\u00D7" }), _jsxs("select", { id: columnsId, className: "forgebook-select", "aria-label": STRINGS.matrixColumns, "data-set": columns === "" ? undefined : "", value: columns, disabled: rows === "", onChange: (event) => {
+                    const next = event.currentTarget.value;
+                    onAxesChange(next === "" ? [rows] : [rows, next]);
+                }, children: [_jsx("option", { value: "", children: STRINGS.matrixNone }), props
+                        .filter((prop) => prop.name !== rows)
+                        .map((prop) => (_jsx("option", { value: prop.name, children: prop.name }, prop.name)))] })] }));
+};
+//# sourceMappingURL=MatrixPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixPicker.js","sourceRoot":"","sources":["../../../src/shell/MatrixPicker.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,EAAoC,KAAK,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAYvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAqB,EAAa,EAAE;IAC1F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,gBAAO,OAAO,EAAE,MAAM,EAAE,SAAS,EAAC,0BAA0B,YACzD,OAAO,CAAC,MAAM,GACT,EACR,kBACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,kBAAkB,cAClB,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EACtC,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,KAAqC,EAAQ,EAAE;oBACxD,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;oBACvC,YAAY,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpG,CAAC,aAED,iBAAQ,KAAK,EAAC,EAAE,YAAE,OAAO,CAAC,UAAU,GAAU,EAC7C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAAwB,KAAK,EAAE,IAAI,CAAC,IAAI,YACrC,IAAI,CAAC,IAAI,IADC,IAAI,CAAC,IAAI,CAEb,CACV,CAAC,IACK,EACT,8BAAkB,MAAM,uBAAS,EACjC,kBACE,EAAE,EAAE,SAAS,EACb,SAAS,EAAC,kBAAkB,gBAChB,OAAO,CAAC,aAAa,cACvB,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EACzC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,IAAI,KAAK,EAAE,EACrB,QAAQ,EAAE,CAAC,KAAqC,EAAQ,EAAE;oBACxD,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;oBACvC,YAAY,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;gBACpD,CAAC,aAED,iBAAQ,KAAK,EAAC,EAAE,YAAE,OAAO,CAAC,UAAU,GAAU,EAC7C,KAAK;yBACH,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;yBACpC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACb,iBAAwB,KAAK,EAAE,IAAI,CAAC,IAAI,YACrC,IAAI,CAAC,IAAI,IADC,IAAI,CAAC,IAAI,CAEb,CACV,CAAC,IACG,IACL,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,17 @@
+/**
+ * HTML a package wrote as Markdown, rendered by the catalogue's plugin at build time: a component's documentation
+ * file, a source's introduction on the home.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+/**
+ * The package's HTML, as trusted as its stories' code: it comes from the package's own files, read at build time.
+ *
+ * @param props - the element's class and the HTML.
+ */
+export declare const PackageHtml: ({ className, html }: {
+    readonly className: string;
+    readonly html: string;
+}) => ReactNode;
+//# sourceMappingURL=PackageHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PackageHtml.d.ts","sourceRoot":"","sources":["../../../src/shell/PackageHtml.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,qBAGzB;IACD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB,KAAG,SAKH,CAAC"}

package/dist/src/shell/PackageHtml.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The package's HTML, as trusted as its stories' code: it comes from the package's own files, read at build time.
+ *
+ * @param props - the element's class and the HTML.
+ */
+export const PackageHtml = ({ className, html }) => {
+    // biome-ignore lint/style/useNamingConvention: React's own name for markup set as HTML
+    const markup = { __html: html };
+    // biome-ignore lint/security/noDangerouslySetInnerHtml: the package's own Markdown, rendered by the plugin
+    return _jsx("div", { className: className, dangerouslySetInnerHTML: markup });
+};
+//# sourceMappingURL=PackageHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PackageHtml.js","sourceRoot":"","sources":["../../../src/shell/PackageHtml.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,IAAI,EAIL,EAAa,EAAE;IACd,uFAAuF;IACvF,MAAM,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAChC,2GAA2G;IAC3G,OAAO,cAAK,SAAS,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,GAAI,CAAC;AACxE,CAAC,CAAC"}

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

@@ -0,0 +1,23 @@
+/**
+ * The panel's Parts and styling tab: the keys of `classNames`, `styles` and `refs`, the `data-*` hooks of the
+ * modifiers, and the test ids of the parts (D-64).
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { ComponentDocs } from "../componentDocs.ts";
+/**
+ * The `data-*` hooks of a component's modifiers.
+ *
+ * @param docs - the component's docs.
+ */
+export declare const styleHooks: (docs: ComponentDocs) => string[];
+/**
+ * The Parts and styling tab.
+ *
+ * @param props - the component's docs.
+ */
+export declare const PartsTab: ({ docs }: {
+    readonly docs: ComponentDocs;
+}) => ReactNode;
+//# sourceMappingURL=PartsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PartsTab.d.ts","sourceRoot":"","sources":["../../../src/shell/PartsTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOzD;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,aAAa,KAAG,MAAM,EAGsB,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,UAAU;IAAE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAA;CAAE,KAAG,SA0BrE,CAAC"}

package/dist/src/shell/PartsTab.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code } from "./Code.js";
+import { STRINGS } from "./strings.js";
+/** The props that carry a component's modifiers, each mirrored by a `data-*` styling hook. */
+const MODIFIERS = ["variant", "size", "tone", "shape", "width", "orientation"];
+/**
+ * The `data-*` hooks of a component's modifiers.
+ *
+ * @param docs - the component's docs.
+ */
+export const styleHooks = (docs) => docs.props
+    .filter((prop) => prop.kind === "choice" && MODIFIERS.includes(prop.name))
+    .map((prop) => `data-${prop.name}="${(prop.choices ?? []).join(" | ")}"`);
+/**
+ * The Parts and styling tab.
+ *
+ * @param props - the component's docs.
+ */
+export const PartsTab = ({ docs }) => {
+    const hooks = styleHooks(docs);
+    return (_jsxs("div", { className: "forgebook-tab-columns", children: [docs.parts.length === 0 ? null : (_jsxs("div", { className: "forgebook-prop-group", children: [_jsx("h3", { className: "forgebook-prop-group__title", children: STRINGS.partsList }), _jsxs("p", { className: "forgebook-prop__description", children: [_jsx("code", { children: "classNames" }), ", ", _jsx("code", { children: "styles" }), ", ", _jsx("code", { children: "refs" }), ": ", docs.parts.join(", ")] }), _jsx("h3", { className: "forgebook-prop-group__title", children: STRINGS.testIds }), _jsx("p", { className: "forgebook-prop__description", children: docs.parts.map((part) => `<testId>__${part}`).join(", ") })] })), hooks.length === 0 ? null : (_jsxs("div", { className: "forgebook-prop-group", children: [_jsx("h3", { className: "forgebook-prop-group__title", children: STRINGS.styleHooks }), hooks.map((hook) => (_jsx(Code, { text: hook, names: [] }, hook)))] }))] }));
+};
+//# sourceMappingURL=PartsTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PartsTab.js","sourceRoot":"","sources":["../../../src/shell/PartsTab.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,8FAA8F;AAC9F,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAmB,EAAY,EAAE,CAC1D,IAAI,CAAC,KAAK;KACP,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACzE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAE9E;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAoC,EAAa,EAAE;IAChF,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/B,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACnC,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,eAAK,SAAS,EAAC,sBAAsB,aACnC,aAAI,SAAS,EAAC,6BAA6B,YAAE,OAAO,CAAC,SAAS,GAAM,EACpE,aAAG,SAAS,EAAC,6BAA6B,aACxC,wCAAuB,QAAE,oCAAmB,QAAE,kCAAiB,QAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IACrF,EACJ,aAAI,SAAS,EAAC,6BAA6B,YAAE,OAAO,CAAC,OAAO,GAAM,EAClE,YAAG,SAAS,EAAC,6BAA6B,YACvC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GACvD,IACA,CACP,EACA,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,eAAK,SAAS,EAAC,sBAAsB,aACnC,aAAI,SAAS,EAAC,6BAA6B,YAAE,OAAO,CAAC,UAAU,GAAM,EACpE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,IAAI,IAAY,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,IAA3B,IAAI,CAA2B,CAC3C,CAAC,IACE,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,31 @@
+/**
+ * The fields of the props panel that set a value from a list or a number: a choice (buttons, a list, checkboxes, a
+ * list of several), a number, a range and a date, as the prop's type or its `argTypes` say.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { PanelProp } from "../argTypes.ts";
+import { type ArgValue } from "../messages.ts";
+/** Called with a changed value; `undefined` removes the panel's value. */
+export type OnValueChange = (name: string, value: ArgValue | undefined) => void;
+/** A value as a text field shows it: texts and numbers as they are, anything else empty. */
+export declare const textOf: (value: ArgValue | undefined) => string;
+/**
+ * A choice's control: buttons side by side for `radio` or a few short values, a list for `select` or otherwise, and
+ * a multiple choice for `check` and `multi-select`.
+ */
+export declare const ChoiceControl: ({ prop, value, descriptionId, onValueChange }: {
+    readonly prop: PanelProp;
+    readonly value: ArgValue | undefined;
+    readonly descriptionId: string;
+    readonly onValueChange: OnValueChange;
+}) => ReactNode;
+/** A field for a number, a range or a date, as its `argTypes` say; a date's value is ms since the Unix epoch. */
+export declare const NumberField: ({ prop, value, descriptionId, onValueChange }: {
+    readonly prop: PanelProp;
+    readonly value: ArgValue | undefined;
+    readonly descriptionId: string;
+    readonly onValueChange: OnValueChange;
+}) => ReactNode;
+//# sourceMappingURL=PropFields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropFields.d.ts","sourceRoot":"","sources":["../../../src/shell/PropFields.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,KAAK,QAAQ,EAAgB,MAAM,gBAAgB,CAAC;AAI7D,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC;AAEhF,4FAA4F;AAC5F,eAAO,MAAM,MAAM,GAAI,OAAO,QAAQ,GAAG,SAAS,KAAG,MACwB,CAAC;AAwF9E;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,+CAK3B;IACD,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC;CACvC,KAAG,SAgDH,CAAC;AAEF,iHAAiH;AACjH,eAAO,MAAM,WAAW,GAAI,+CAKzB;IACD,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC;CACvC,KAAG,SA8CH,CAAC"}

package/dist/src/shell/PropFields.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isChoiceList } from "../messages.js";
+import { Segmented } from "./Segmented.js";
+import { STRINGS } from "./strings.js";
+/** A value as a text field shows it: texts and numbers as they are, anything else empty. */
+export const textOf = (value) => typeof value === "string" || typeof value === "number" ? String(value) : "";
+/** A value as a choice holds it: a text or a number, otherwise none. */
+const choiceOf = (value) => typeof value === "string" || typeof value === "number" ? value : undefined;
+/** A choice's value as the panel shows it: its `argTypes` label, or the value. */
+const choiceLabel = (prop, choice) => prop.labels?.[String(choice)] ?? String(choice);
+/** A number of ms since the Unix epoch as a `datetime-local` field holds it, in the browser's time zone. */
+const dateFieldOf = (value) => {
+    if (typeof value !== "number")
+        return "";
+    const date = new Date(value);
+    const local = new Date(value - date.getTimezoneOffset() * 60_000);
+    return local.toISOString().slice(0, 16);
+};
+/** The value of the choice that leaves a prop to the story: no choice of a component is an empty text. */
+const UNSET = "";
+/** The most choices shown as buttons, and the longest label; past either, a list. */
+const FEW_CHOICES = { count: 4, length: 10 };
+/** Whether a choice's values fit side by side as buttons. */
+const isFewChoices = (choices) => choices.length <= FEW_CHOICES.count &&
+    choices.every((choice) => choice !== UNSET && String(choice).length <= FEW_CHOICES.length);
+/** A choice of several values: checkboxes (`check`) or a list that takes several (`multi-select`). */
+const MultiChoiceControl = ({ prop, value, descriptionId, onValueChange }) => {
+    const choices = prop.choices ?? [];
+    const chosen = isChoiceList(value) ? value : [];
+    // the values keep the order of the options, whatever order they were picked in
+    const change = (next) => onValueChange(prop.name, choices.filter((choice) => next.includes(choice)));
+    if (prop.control === "multi-select") {
+        return (_jsx("select", { multiple: true, "aria-label": prop.label ?? prop.name, "aria-describedby": descriptionId, value: chosen.map(String), onChange: (event) => {
+                const picked = [...event.target.selectedOptions].map((option) => option.value);
+                change(choices.filter((choice) => picked.includes(String(choice))));
+            }, children: choices.map((choice) => (_jsx("option", { value: String(choice), children: choiceLabel(prop, choice) }, String(choice)))) }));
+    }
+    return (_jsxs("fieldset", { className: "forgebook-prop__checks", "aria-describedby": descriptionId, children: [_jsx("legend", { className: "forgebook-visually-hidden", children: prop.label ?? prop.name }), choices.map((choice) => (_jsxs("label", { className: "forgebook-toggle", children: [_jsx("input", { type: "checkbox", checked: chosen.includes(choice), onChange: (event) => change(event.target.checked ? [...chosen, choice] : chosen.filter((other) => other !== choice)) }), choiceLabel(prop, choice)] }, String(choice))))] }));
+};
+/**
+ * A choice's control: buttons side by side for `radio` or a few short values, a list for `select` or otherwise, and
+ * a multiple choice for `check` and `multi-select`.
+ */
+export const ChoiceControl = ({ prop, value, descriptionId, onValueChange }) => {
+    if (prop.control === "check" || prop.control === "multi-select") {
+        return (_jsx(MultiChoiceControl, { prop: prop, value: value, descriptionId: descriptionId, onValueChange: onValueChange }));
+    }
+    const choices = prop.choices ?? [];
+    const unsetLabel = prop.defaultValue === undefined ? STRINGS.unset : STRINGS.unsetDefault(prop.defaultValue);
+    const isButtons = prop.control === "radio" || (prop.control === undefined && isFewChoices(choices));
+    if (isButtons) {
+        return (_jsx(Segmented, { label: prop.label ?? prop.name, options: [
+                { value: UNSET, label: unsetLabel },
+                ...choices.map((choice) => ({ value: choice, label: choiceLabel(prop, choice) }))
+            ], value: choiceOf(value) ?? UNSET, onValueChange: (chosen) => onValueChange(prop.name, chosen === UNSET ? undefined : chosen) }));
+    }
+    return (_jsxs("select", { "aria-label": prop.label ?? prop.name, "aria-describedby": descriptionId, value: textOf(value), onChange: (event) => {
+            const chosen = choices.find((choice) => String(choice) === event.target.value);
+            onValueChange(prop.name, chosen);
+        }, children: [_jsx("option", { value: "", children: unsetLabel }), choices.map((choice) => (_jsx("option", { value: String(choice), children: choiceLabel(prop, choice) }, String(choice))))] }));
+};
+/** A field for a number, a range or a date, as its `argTypes` say; a date's value is ms since the Unix epoch. */
+export const NumberField = ({ prop, value, descriptionId, onValueChange }) => {
+    const label = prop.label ?? prop.name;
+    if (prop.control === "date") {
+        return (_jsx("input", { type: "datetime-local", "aria-label": label, "aria-describedby": descriptionId, value: dateFieldOf(value), onChange: (event) => {
+                const time = event.target.valueAsNumber;
+                // the field's own value is in UTC: read back in the browser's time zone, as it was shown
+                const local = Number.isNaN(time) ? undefined : time + new Date(time).getTimezoneOffset() * 60_000;
+                onValueChange(prop.name, local);
+            } }));
+    }
+    const bounds = {
+        ...(prop.min === undefined ? {} : { min: prop.min }),
+        ...(prop.max === undefined ? {} : { max: prop.max }),
+        ...(prop.step === undefined ? {} : { step: prop.step })
+    };
+    const change = (text) => onValueChange(prop.name, text === "" ? undefined : Number(text));
+    return (_jsxs(_Fragment, { children: [prop.control === "range" ? (_jsx("input", { type: "range", "aria-label": label, "aria-describedby": descriptionId, ...bounds, value: typeof value === "number" ? value : (prop.min ?? 0), onChange: (event) => change(event.target.value) })) : null, _jsx("input", { type: "number", "aria-label": prop.control === "range" ? STRINGS.rangeValue(label) : label, "aria-describedby": descriptionId, ...bounds, value: textOf(value), onChange: (event) => change(event.target.value) })] }));
+};
+//# sourceMappingURL=PropFields.js.map

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

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

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

@@ -0,0 +1,45 @@
+/**
+ * The panel's Props tab: the props the story lets the panel set, grouped by control (choices, text and numbers,
+ * toggles), each with its description and default, then the props it cannot set. A story of fixed examples sets none:
+ * the tab says so and lists every prop for reading (D-64). The props come with the story's `argTypes` laid over them
+ * (`argTypes.ts`): a control they name (a list, buttons, checkboxes, a range, a colour, a date) wins over the one
+ * the prop's type gives.
+ *
+ * @module
+ */
+import type { StoryControlsSetting } from "@forgebook/story-format/source";
+import { type ReactNode } from "react";
+import type { PanelProp } from "../argTypes.ts";
+import { type ArgValue, type PanelArgs } from "../messages.ts";
+import type { NamedValues } from "../namedValues.ts";
+/** A prop the story gives a text by its key (`storyText("key")`): the key, and whether the panel wrote over it. */
+export type TextArgNote = {
+    /** The text's key. */
+    readonly key: string;
+    /** Whether the panel holds a value of its own for the prop. */
+    readonly isChanged: boolean;
+};
+/** The tab's props. */
+export type PropsTabProps = {
+    /** The props, from the component's types with the story's `argTypes` laid over them. */
+    readonly props: readonly PanelProp[];
+    /** The values shown: the story's args with the panel's changes. */
+    readonly values: PanelArgs;
+    /** The props the story lets the panel set. */
+    readonly controls: StoryControlsSetting;
+    /** Called with a changed value; `undefined` removes the panel's value. */
+    readonly onValueChange: (name: string, value: ArgValue | undefined) => void;
+    /** Removes every value the panel set. */
+    readonly onReset: () => void;
+    /** The values the source offers by name for a type the panel cannot write (`IconComponent`); none by default. */
+    readonly namedValues?: NamedValues | undefined;
+    /** The props the story gives a text by its key, by name; none by default. */
+    readonly textArgs?: Readonly<Record<string, TextArgNote>>;
+};
+/**
+ * The Props tab.
+ *
+ * @param props - the props, the values, which props the story lets the panel set, and the setters.
+ */
+export declare const PropsTab: ({ props, values, controls, onValueChange, onReset, namedValues, textArgs }: PropsTabProps) => ReactNode;
+//# sourceMappingURL=PropsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropsTab.d.ts","sourceRoot":"","sources":["../../../src/shell/PropsTab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAoB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,KAAK,QAAQ,EAAc,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,mHAAmH;AACnH,MAAM,MAAM,WAAW,GAAG;IACxB,sBAAsB;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,uBAAuB;AACvB,MAAM,MAAM,aAAa,GAAG;IAC1B,wFAAwF;IACxF,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IACrC,mEAAmE;IACnE,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,CAAC;IACxC,0EAA0E;IAC1E,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yCAAyC;IACzC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,iHAAiH;IACjH,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/C,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;CAC3D,CAAC;AAqNF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,4EAQtB,aAAa,KAAG,SA6ElB,CAAC"}

package/dist/src/shell/PropsTab.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { isNamedArg } from "../messages.js";
+import { ChoiceControl, NumberField, textOf } from "./PropFields.js";
+import { STRINGS } from "./strings.js";
+/** A colour prop: named so by its `argTypes`, or by the name convention (`color`, `accentColor`). */
+const isColorProp = (prop) => prop.control === "color" ||
+    (prop.control === undefined &&
+        prop.kind === "text" &&
+        (prop.name === "color" || prop.name.endsWith("Color")));
+/** A CSS colour as the colour picker takes it (`#rrggbb`), or black when the value is not one. */
+const pickerColor = (value) => typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value) ? value : "#000000";
+/** No prop named by a text key. */
+const NO_TEXT_ARGS = {};
+/** A prop's name, whether it is required, and its type (whole in the tooltip when it is cut). */
+const PropHead = ({ prop }) => (_jsxs("div", { className: "forgebook-prop__head", children: [_jsxs("code", { className: "forgebook-prop__name", children: [prop.label ?? prop.name, prop.isRequired ? (_jsx("span", { className: "forgebook-prop__required", title: STRINGS.required, children: "*" })) : null] }), _jsx("code", { className: "forgebook-prop__type", title: prop.type, children: prop.type })] }));
+/** A prop's description and default, under its control. */
+const PropNote = ({ id, prop }) => prop.description === "" && prop.defaultValue === undefined ? null : (_jsxs("p", { id: id, className: "forgebook-prop__description", children: [prop.description, prop.defaultValue === undefined ? null : (_jsxs(_Fragment, { children: [prop.description === "" ? null : " ", STRINGS.defaultIs, " ", _jsx("code", { children: prop.defaultValue })] }))] }));
+/**
+ * Where a prop's text comes from, under its field: the key of the story's text, and a way back to it once the panel
+ * wrote over it.
+ *
+ * @param props - the note, the prop's name and the value setter.
+ */
+const TextArgLine = ({ note, name, onValueChange }) => (_jsxs("p", { className: "forgebook-prop__text-arg", children: [STRINGS.fromTexts, " ", _jsx("code", { children: note.key }), note.isChanged ? (_jsx("button", { type: "button", className: "forgebook-text-button", onClick: () => onValueChange(name, undefined), children: STRINGS.backToText })) : null] }));
+/** One adjustable prop with its control. */
+const PropControl = ({ prop, value, named, textArg, onValueChange }) => {
+    // the description is shown under the control and named by it, so the control's name is the prop alone
+    const descriptionId = useId();
+    const label = prop.label ?? prop.name;
+    if (named !== undefined) {
+        return (_jsxs("div", { className: "forgebook-prop", children: [_jsx(PropHead, { prop: prop }), _jsxs("select", { "aria-label": label, "aria-describedby": descriptionId, value: isNamedArg(value) ? value.named : "", onChange: (event) => {
+                        const chosen = event.target.value;
+                        onValueChange(prop.name, chosen === "" ? undefined : { of: prop.type, named: chosen });
+                    }, children: [_jsx("option", { value: "", children: STRINGS.unset }), Object.keys(named).map((name) => (_jsx("option", { value: name, children: name }, name)))] }), _jsx(PropNote, { id: descriptionId, prop: prop })] }));
+    }
+    if (prop.kind === "choice") {
+        return (_jsxs("div", { className: "forgebook-prop", children: [_jsx(PropHead, { prop: prop }), _jsx(ChoiceControl, { prop: prop, value: value, descriptionId: descriptionId, onValueChange: onValueChange }), _jsx(PropNote, { id: descriptionId, prop: prop })] }));
+    }
+    if (prop.kind === "number") {
+        return (_jsxs("div", { className: "forgebook-prop", children: [_jsx(PropHead, { prop: prop }), _jsx("div", { className: "forgebook-prop__field", children: _jsx(NumberField, { prop: prop, value: value, descriptionId: descriptionId, onValueChange: onValueChange }) }), _jsx(PropNote, { id: descriptionId, prop: prop })] }));
+    }
+    return (_jsxs("div", { className: "forgebook-prop", children: [_jsx(PropHead, { prop: prop }), _jsxs("div", { className: "forgebook-prop__field", children: [_jsx("input", { type: "text", "aria-label": label, "aria-describedby": descriptionId, value: textOf(value), onChange: (event) => {
+                            const text = event.target.value;
+                            onValueChange(prop.name, text === "" ? undefined : text);
+                        } }), isColorProp(prop) ? (_jsx("input", { type: "color", className: "forgebook-prop__color", "aria-label": STRINGS.pickColor(label), value: pickerColor(value), onChange: (event) => onValueChange(prop.name, event.target.value) })) : null] }), textArg === undefined ? null : (_jsx(TextArgLine, { note: textArg, name: prop.name, onValueChange: onValueChange })), _jsx(PropNote, { id: descriptionId, prop: prop })] }));
+};
+/** A toggle: its name in a compact checkbox, its description as the tooltip and for screen readers. */
+const Toggle = ({ prop, value, onValueChange }) => {
+    const descriptionId = useId();
+    return (_jsxs("label", { className: "forgebook-toggle", title: prop.description, children: [_jsx("input", { type: "checkbox", checked: value === true, "aria-describedby": descriptionId, onChange: (event) => onValueChange(prop.name, event.target.checked) }), _jsx("code", { children: prop.label ?? prop.name }), _jsx("span", { id: descriptionId, className: "forgebook-visually-hidden", children: prop.description })] }));
+};
+/**
+ * The Props tab.
+ *
+ * @param props - the props, the values, which props the story lets the panel set, and the setters.
+ */
+export const PropsTab = ({ props, values, controls, onValueChange, onReset, namedValues = {}, textArgs = NO_TEXT_ARGS }) => {
+    // a prop of a type the source names values for is chosen among them, a node that takes a text is set as one; any
+    // other `other` prop cannot be set from the panel
+    const isNamed = (prop) => prop.kind === "other" && prop.control === undefined && namedValues[prop.type] !== undefined;
+    const isSettable = (prop) => (prop.kind !== "other" || prop.canTakeText === true || isNamed(prop)) &&
+        prop.kind !== "event" &&
+        (controls === "all" || controls.includes(prop.name));
+    const settable = props.filter(isSettable);
+    const groups = [
+        {
+            title: STRINGS.propGroups.choice,
+            props: settable.filter((prop) => prop.kind === "choice" || isNamed(prop))
+        },
+        {
+            title: STRINGS.propGroups.text,
+            props: settable.filter((prop) => ["text", "number", "other"].includes(prop.kind) && !isNamed(prop))
+        }
+    ].filter((group) => group.props.length > 0);
+    const toggles = settable.filter((prop) => prop.kind === "toggle");
+    const others = props.filter((prop) => prop.kind !== "event" && !isSettable(prop));
+    const hasControls = controls === "all" || controls.length > 0;
+    return (_jsxs("div", { className: "forgebook-tab-props", children: [hasControls ? null : _jsx("p", { className: "forgebook-tab-note", children: STRINGS.fixedExamples }), groups.map((group) => (_jsxs("div", { className: "forgebook-prop-group", children: [_jsx("h3", { className: "forgebook-prop-group__title", children: group.title }), _jsx("div", { className: "forgebook-prop-grid", children: group.props.map((prop) => (_jsx(PropControl, { prop: prop, value: values[prop.name], named: isNamed(prop) ? namedValues[prop.type] : undefined, textArg: textArgs[prop.name], onValueChange: onValueChange }, prop.name))) })] }, group.title))), toggles.length === 0 ? null : (_jsxs("div", { className: "forgebook-prop-group", children: [_jsx("h3", { className: "forgebook-prop-group__title", children: STRINGS.propGroups.toggle }), _jsx("div", { className: "forgebook-toggles", children: toggles.map((prop) => (_jsx(Toggle, { prop: prop, value: values[prop.name], onValueChange: onValueChange }, prop.name))) })] })), others.length === 0 ? null : (_jsxs("div", { className: "forgebook-prop-group", children: [_jsx("h3", { className: "forgebook-prop-group__title", children: hasControls ? STRINGS.otherProps : STRINGS.allProps }), _jsx("div", { className: "forgebook-prop-grid", children: others.map((prop) => (_jsxs("div", { className: "forgebook-prop", children: [_jsx(PropHead, { prop: prop }), _jsx("p", { className: "forgebook-prop__description", children: prop.description })] }, prop.name))) })] })), hasControls ? (_jsx("div", { className: "forgebook-tab-foot", children: _jsx("button", { type: "button", className: "forgebook-text-button", onClick: onReset, children: STRINGS.resetArgs }) })) : null] }));
+};
+//# sourceMappingURL=PropsTab.js.map

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * The colour scheme and contrast switches at the toolbar's start, off while the compare view sets them or the story
+ * fixes them.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { FixedView } from "../storyGlobals.ts";
+import type { ViewState } from "../viewState.ts";
+/**
+ * The colour scheme switch and the contrast switch, at the toolbar's start: the scheme as segments with icons, a
+ * two-value contrast as a toggle (a longer one as segments).
+ *
+ * @param props - the view, its setter, and whether a story's page is shown (the compare view sets them there).
+ */
+export declare const SchemeSwitches: ({ view, onViewChange, isStoryPage, fixed }: {
+    /** The view shown. */
+    readonly view: ViewState;
+    /** Called with the changed view. */
+    readonly onViewChange: (view: ViewState) => void;
+    readonly isStoryPage: boolean;
+    readonly fixed: FixedView;
+}) => ReactNode;
+//# sourceMappingURL=SchemeSwitches.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SchemeSwitches.d.ts","sourceRoot":"","sources":["../../../src/shell/SchemeSwitches.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAcjD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4CAK5B;IACD,sBAAsB;IACtB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;CAC3B,KAAG,SAiDH,CAAC"}

package/dist/src/shell/SchemeSwitches.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { switchWithRole } from "../switches.js";
+import { useCatalogue } from "./catalogueContext.js";
+import { Icon } from "./icons.js";
+import { Segmented } from "./Segmented.js";
+import { STRINGS } from "./strings.js";
+import { switchValueIn, withSwitch } from "./switchView.js";
+/** The icon of each scheme a colour scheme switch's values draw in. */
+const SCHEME_ICONS = {
+    light: "sun",
+    dark: "moon",
+    system: "monitor"
+};
+/**
+ * The colour scheme switch and the contrast switch, at the toolbar's start: the scheme as segments with icons, a
+ * two-value contrast as a toggle (a longer one as segments).
+ *
+ * @param props - the view, its setter, and whether a story's page is shown (the compare view sets them there).
+ */
+export const SchemeSwitches = ({ view, onViewChange, isStoryPage, fixed }) => {
+    const switches = useCatalogue().switches;
+    const scheme = switchWithRole(switches, "colorScheme");
+    const contrast = switchWithRole(switches, "contrast");
+    const isFixed = (each) => fixed.switches[each.id] !== undefined;
+    const isCompared = (each) => (isStoryPage && view.compare.includes(each.id)) || isFixed(each);
+    const more = contrast?.values.find((value) => value.isMore === true);
+    const standard = contrast?.values.find((value) => value.isMore !== true);
+    if (scheme === undefined && contrast === undefined)
+        return null;
+    return (_jsxs("div", { className: "forgebook-toolbar__group", children: [scheme === undefined ? null : (_jsx(Segmented, { label: scheme.label, isDisabled: isCompared(scheme), disabledNote: isFixed(scheme) ? STRINGS.setByStory : undefined, options: scheme.values.map((value) => ({
+                    value: value.value,
+                    label: value.label,
+                    icon: SCHEME_ICONS[value.scheme ?? "light"]
+                })), value: switchValueIn(view, scheme), onValueChange: (value) => onViewChange(withSwitch(view, scheme, value)) })), contrast === undefined || more === undefined || standard === undefined ? null : (_jsxs("button", { type: "button", className: "forgebook-button", title: isFixed(contrast) ? STRINGS.setByStory : contrast.label, "aria-pressed": switchValueIn(view, contrast) === more.value, disabled: isCompared(contrast), onClick: () => onViewChange(withSwitch(view, contrast, switchValueIn(view, contrast) === more.value ? standard.value : more.value)), children: [_jsx(Icon, { name: "contrast", size: 14 }), _jsx("span", { className: "forgebook-button__label", children: contrast.label })] }))] }));
+};
+//# sourceMappingURL=SchemeSwitches.js.map