@parity/product-lab 0.0.1-placeholder → 0.1.1

package/entrypoints/panel/src/client/builder-blocks.d.ts

@@ -0,0 +1,26 @@
+import type { BuilderBlock, BuilderEdit, PaletteBlock } from "@parity/product-lab/domain";
+import type { ScenarioCheck } from "@parity/product-lab/domain";
+import { type StepState } from "./gherkin-view.js";
+import { type Keyword, type Phase } from "./builder-view.js";
+export interface BlocksHost {
+    root: HTMLElement;
+    find(pattern: string): PaletteBlock | undefined;
+    /** The runtime's check of the shown scenario; `fresh` is false while local edits wait for it. */
+    check(): {
+        scenario: ScenarioCheck | undefined;
+        fresh: boolean;
+    };
+    selected: Set<number>;
+    edit(change: BuilderEdit): void;
+    setKeyword(at: number, keyword: Keyword): void;
+    onSelection(): void;
+}
+export declare function createBlocks(host: BlocksHost): {
+    blockItem: (block: BuilderBlock, index: number, count: number, written: {
+        keyword: Keyword;
+        phase: Phase;
+    }, state: StepState | undefined, outOfOrder?: boolean) => HTMLLIElement;
+    starters: (blocks: readonly PaletteBlock[]) => HTMLDivElement;
+    closeMenu: () => void;
+    menuOpen: () => HTMLElement | undefined;
+};

package/entrypoints/panel/src/client/builder-blocks.js

@@ -0,0 +1,346 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { stepText } from "./gherkin-view.js";
+import { avatar, button, chip, codeBlock, dataTable, h, icon, iconButton } from "./ui.js";
+import { firstClause, literalNodes, nextActorName, PHASE_LABEL, sentenceNodes, TABLE_LIMIT, TABLE_PREVIEW } from "./builder-view.js";
+const KEYWORDS = ["Given", "When", "Then", "And", "But"];
+const STATUS_ICON = { passed: "check", failed: "close", running: "clock", paused: "pause", skipped: "minus" };
+export function createBlocks(host) {
+    const scopeOf = (index) => {
+        const { scenario } = host.check();
+        return scenario?.scopes[index] ?? { actors: scenario?.actors ?? [], outputs: [] };
+    };
+    function field(block, about, spec, scope, at, inner, onChange) {
+        const value = block.values[spec.index] ?? "";
+        const label = h("label", { class: "builder-field", "data-kind": spec.kind, title: spec.label });
+        const names = about?.introduces?.parameter === spec.index;
+        const choices = names ? undefined : spec.kind === "actor" ? [...scope.actors] : spec.options ? [...spec.options] : undefined;
+        let input;
+        if (choices) {
+            input = document.createElement("select");
+            for (const choice of choices.includes(value) || !value ? choices : [...choices, value])
+                input.append(new Option(choice, choice));
+            input.value = value;
+        }
+        else {
+            input = document.createElement("input");
+            input.type = spec.kind === "count" ? "number" : "text";
+            if (spec.min !== undefined)
+                input.min = String(spec.min);
+            if (spec.max !== undefined)
+                input.max = String(spec.max);
+            input.value = value;
+            input.size = Math.max(3, Math.min(40, value.length + 1));
+            input.placeholder = names ? "name" : spec.label.toLowerCase();
+            if (!names && spec.references && scope.outputs.length) {
+                const list = h("datalist", { id: `builder-outputs-${at}-${inner ?? "x"}-${spec.index}` }, ...scope.outputs.map((output) => new Option(output, output)));
+                input.setAttribute("list", list.id);
+                label.title = `${spec.label}, or an earlier step's output: ${scope.outputs.join(", ")}`;
+                label.append(list);
+            }
+        }
+        input.className = "builder-input";
+        input.dataset.field = String(spec.index);
+        input.setAttribute("aria-label", `${about?.title ?? block.pattern}: ${names ? "New actor's name" : spec.label}`);
+        input.onchange = () => onChange(input.value.trim());
+        if (spec.kind === "actor") {
+            const tone = Math.max(0, scope.actors.indexOf(value));
+            label.dataset.tone = String((names ? scope.actors.length : tone) % 6);
+            if (names) {
+                label.dataset.names = "true";
+                label.title = "A new actor: type a name nobody in the scenario has";
+                if (scope.actors.includes(value))
+                    duplicate(label, input, value);
+            }
+            label.append(avatar(value || "?", names ? scope.actors.length : tone, "sm"));
+        }
+        label.append(input);
+        return label;
+    }
+    function duplicate(holder, input, name) {
+        holder.classList.add("is-invalid");
+        holder.title = `${name} is already in the cast`;
+        input.setAttribute("aria-invalid", "true");
+    }
+    const expanded = new Set();
+    function rowLimit(key, rows, redraw) {
+        if (rows <= TABLE_LIMIT)
+            return { shown: rows };
+        const open = expanded.has(key);
+        const toggle = button(open ? "Show fewer rows" : `Show all ${rows} rows`, { variant: "ghost", size: "sm", icon: open ? "up" : "down", onClick: () => { if (open)
+                expanded.delete(key);
+            else
+                expanded.add(key); redraw(); } });
+        toggle.classList.add("builder-rows-toggle");
+        return { shown: open ? rows : TABLE_PREVIEW, toggle };
+    }
+    function lockedTable(table, label, key) {
+        const box = h("div", { class: "builder-locked-table" });
+        const draw = () => {
+            const { shown, toggle } = rowLimit(key, table.length - 1, draw);
+            box.replaceChildren(dataTable(table.slice(0, shown + 1).map((cells) => [...cells]), { label }), ...(toggle ? [toggle] : []));
+        };
+        draw();
+        return box;
+    }
+    function tableEditor(block, about, scope, key, onChange) {
+        const table = (block.table ?? []).map((row) => [...row]);
+        const update = (next) => {
+            table.splice(0, table.length, ...next);
+            onChange(table.map(row => [...row]));
+        };
+        const columns = about?.table?.columns ?? [];
+        const names = about?.introduces?.column;
+        const namesAt = names ? table[0]?.indexOf(names) ?? -1 : -1;
+        const node = h("div", { class: "builder-table-editor" });
+        const draw = () => {
+            const grid = h("table", { class: "ui-table builder-table", "aria-label": `Table of: ${about?.title ?? block.pattern}` });
+            const head = grid.createTHead(), body = grid.createTBody();
+            const canRemove = table.length > 2;
+            const { shown, toggle } = rowLimit(key, table.length - 1, draw);
+            const seen = new Set();
+            for (const [rowIndex, cells] of table.slice(0, shown + 1).entries()) {
+                const tr = rowIndex === 0 ? head.insertRow() : body.insertRow();
+                for (const [columnIndex, cell] of cells.entries()) {
+                    if (rowIndex === 0) {
+                        tr.append(h("th", { scope: "col" }, cell));
+                        continue;
+                    }
+                    const name = table[0][columnIndex] ?? "";
+                    const column = columns.find((item) => item.name === name);
+                    const naming = columnIndex === namesAt;
+                    const choices = naming ? undefined : column?.kind === "actor" ? [...scope.actors] : column?.values ? [...column.values] : undefined;
+                    const input = choices ? document.createElement("select") : document.createElement("input");
+                    if (choices && input instanceof HTMLSelectElement)
+                        for (const choice of choices.includes(cell) || !cell ? choices : [...choices, cell])
+                            input.append(new Option(choice, choice));
+                    input.value = cell;
+                    input.className = "builder-cell";
+                    input.setAttribute("aria-label", `${name} ${rowIndex}`);
+                    if (naming && input instanceof HTMLInputElement)
+                        input.placeholder = "name";
+                    input.onchange = () => {
+                        const currentColumn = table[0].indexOf(block.table[0][columnIndex]);
+                        if (currentColumn < 0 || !table[rowIndex])
+                            return;
+                        table[rowIndex][currentColumn] = input.value.trim();
+                        update(table.map(row => [...row]));
+                    };
+                    const td = h("td", { "data-label": name });
+                    if (column?.kind === "actor")
+                        td.dataset.tone = String(Math.max(0, naming ? rowIndex - 1 + scope.actors.length : scope.actors.indexOf(cell)) % 6);
+                    if (naming && (seen.has(cell) || scope.actors.includes(cell)))
+                        duplicate(td, input, cell);
+                    if (naming)
+                        seen.add(cell);
+                    td.append(input);
+                    tr.append(td);
+                }
+                if (rowIndex === 0 && canRemove)
+                    tr.append(h("td", { class: "builder-row-tools", "aria-hidden": "true" }));
+                if (rowIndex > 0 && canRemove)
+                    tr.append(h("td", { class: "builder-row-tools" }, iconButton("close", `Remove row ${rowIndex}`, { size: "sm", onClick: () => update(table.filter((_, index) => index !== rowIndex)) })));
+            }
+            const wrap = h("div", { class: `ui-table-wrap builder-table-wrap${(table[0]?.length ?? 0) > 4 ? " is-wide" : ""}`, "data-columns": String(table[0]?.length ?? 0) }, grid);
+            const actions = h("div", { class: "builder-table-actions" });
+            if (toggle)
+                actions.append(toggle);
+            if (about?.table?.rows !== "one")
+                actions.append(button("Add row", { icon: "plus", variant: "ghost", size: "sm", onClick: () => update([...table, newRow()]) }));
+            const optional = columns.filter(column => column.optional);
+            if (optional.length)
+                actions.append(columnChooser(optional));
+            node.replaceChildren(...(table[0]?.length ? [wrap] : []), ...(actions.childElementCount ? [actions] : []));
+        };
+        const newRow = () => (table[0] ?? []).map((_, index) => (index === namesAt ? nextActorName([...scope.actors, ...table.slice(1).map((cells) => cells[index] ?? "")]) : table.at(-1)?.[index] ?? ""));
+        const columnChooser = (optional) => {
+            const choices = h("details", { class: "builder-columns builder-popover", "data-key": `columns-${key}` }, h("summary", { class: "ui-button ui-button--ghost ui-button--sm" }, icon("table", 14), h("span", {}, "Columns")));
+            const list = h("div", { class: "builder-popover-body", role: "dialog", "aria-label": "Optional columns" });
+            for (const column of optional) {
+                const input = h("input", { type: "checkbox", "aria-label": `Include column ${column.name}` });
+                input.checked = table[0]?.includes(column.name) ?? false;
+                input.onchange = () => {
+                    const index = table[0]?.indexOf(column.name) ?? -1;
+                    if (!input.checked && index >= 0)
+                        update(table.map(row => row.filter((_, at) => at !== index)));
+                    else if (input.checked && index < 0) {
+                        const value = column.values?.[0] ?? (column.kind === "actor" ? scope.actors[0] ?? "" : column.kind === "integer" ? "0" : column.kind === "boolean" ? "false" : "");
+                        const rows = table.length ? table : [[], []];
+                        update(rows.map((row, at) => [...row, at === 0 ? column.name : value]));
+                    }
+                };
+                list.append(h("label", { class: "builder-switch" }, input, column.name));
+            }
+            choices.append(list);
+            return choices;
+        };
+        draw();
+        return node;
+    }
+    function atom(block, at, inner, scope) {
+        const about = host.find(block.pattern);
+        const box = h("span", { class: "builder-atom gk-text" });
+        let cursor = 0;
+        let parameter = 0;
+        for (const match of block.pattern.matchAll(/\{([^}]*)\}/g)) {
+            box.append(...literalNodes(block.pattern.slice(cursor, match.index)));
+            const spec = about?.fields.find((candidate) => candidate.index === parameter);
+            if (spec) {
+                box.append(field(block, about, spec, scope, at, inner, (value) => {
+                    const values = [...block.values];
+                    values[spec.index] = value;
+                    host.edit({ op: "values", at, ...(inner !== undefined ? { inner } : {}), values });
+                }));
+            }
+            else
+                box.append(h("span", { class: "gk-value" }, block.values[parameter] ?? match[0]));
+            parameter += 1;
+            cursor = match.index + match[0].length;
+        }
+        box.append(...literalNodes(block.pattern.slice(cursor)));
+        return box;
+    }
+    let menu;
+    function closeMenu() { menu?.remove(); menu = undefined; }
+    function keywordMenu(anchor, at, current, phase) {
+        if (menu) {
+            const same = menu.dataset.at === String(at);
+            closeMenu();
+            if (same)
+                return;
+        }
+        menu = h("div", { class: "builder-menu", role: "menu", "aria-label": `Keyword of block ${at + 1}`, "data-at": String(at) });
+        for (const keyword of KEYWORDS) {
+            const own = keyword === "Given" ? "given" : keyword === "When" ? "when" : keyword === "Then" ? "then" : undefined;
+            const item = h("button", { type: "button", role: "menuitemradio", "aria-checked": String(keyword === current), class: "builder-menu-item" }, h("span", { class: "gk-keyword", "data-phase": own ?? phase }, keyword), h("span", {}, own ? PHASE_LABEL[own] : "Continues the step before"), keyword === current ? icon("check", 14) : null);
+            item.onclick = () => { closeMenu(); if (keyword !== current)
+                host.setKeyword(at, keyword); };
+            menu.append(item);
+        }
+        const box = anchor.getBoundingClientRect();
+        menu.style.left = `${Math.round(box.left)}px`;
+        host.root.append(menu);
+        const height = menu.getBoundingClientRect().height;
+        const room = (host.root.getBoundingClientRect().bottom || window.innerHeight) - box.bottom;
+        menu.style.top = `${Math.round(room < height + 12 ? box.top - height - 4 : box.bottom + 4)}px`;
+        menu.querySelector("button")?.focus();
+    }
+    function keywordChip(at, keyword, phase, editable) {
+        const label = keyword === "*" ? "•" : keyword;
+        if (!editable)
+            return h("span", { class: "gk-keyword", "data-phase": phase, title: PHASE_LABEL[phase] }, label);
+        const node = h("button", { type: "button", class: "gk-keyword builder-keyword", "data-phase": phase, title: `${PHASE_LABEL[phase]}: change the keyword`, "aria-haspopup": "menu", "aria-label": `Keyword of block ${at + 1}: ${keyword}` }, label);
+        node.onclick = (event) => { event.stopPropagation(); keywordMenu(node, at, keyword, phase); };
+        return node;
+    }
+    function toggle(name, label, checked, onChange) {
+        const input = h("input", { type: "checkbox", "aria-label": label, class: "builder-toggle-input" });
+        input.checked = checked;
+        input.onchange = () => onChange(input.checked);
+        return h("label", { class: `builder-toggle${checked ? " is-on" : ""}`, title: label }, input, icon(name, 14));
+    }
+    function toolbar(block, index, count) {
+        const n = index + 1;
+        const pick = h("input", { type: "checkbox", class: "builder-pick", "aria-label": `Select block ${n}`, title: "Select to repeat or run together" });
+        pick.checked = host.selected.has(index);
+        pick.onchange = () => { if (pick.checked)
+            host.selected.add(index);
+        else
+            host.selected.delete(index); host.onSelection(); };
+        const tools = h("div", { class: "builder-block-tools", role: "toolbar", "aria-label": `Block ${n}` }, iconButton("up", `Move block ${n} up`, { size: "sm", disabled: index === 0, onClick: () => host.edit({ op: "move", from: index, to: index - 1 }) }), iconButton("down", `Move block ${n} down`, { size: "sm", disabled: index >= count - 1, onClick: () => host.edit({ op: "move", from: index, to: index + 1 }) }), block.kind === "sentence" ? iconButton("copy", `Duplicate block ${n}`, { size: "sm", onClick: () => host.edit({ op: "add", pattern: block.pattern, at: index + 1, values: block.values, ...(block.table ? { table: block.table } : {}) }) }) : null, toggle("flag", `Checkpoint after block ${n}`, !!block.checkpoint, (on) => host.edit({ op: "checkpoint", at: index, on })), iconButton("trash", `Remove block ${n}`, { size: "sm", onClick: () => host.edit({ op: "remove", at: index }) }));
+        return { pick, tools };
+    }
+    function groupHead(block, index) {
+        const head = h("div", { class: "builder-group-head" });
+        if (block.kind === "repeat") {
+            const countInput = h("input", { type: "number", min: "1", class: "builder-input", "aria-label": `Repeat count of block ${index + 1}` });
+            countInput.value = String(block.count);
+            countInput.onchange = () => host.edit({ op: "count", at: index, count: Number(countInput.value) });
+            head.append(icon("repeat", 14), h("span", {}, "Repeat"), h("label", { class: "builder-field", "data-kind": "count" }, countInput), h("span", {}, "times"));
+        }
+        else {
+            head.append(icon("layers", 14), h("span", {}, block.form === "inline" ? "At the same time" : "Run together"));
+            const slots = host.check().scenario?.schedules[index] ?? [];
+            if (slots.length)
+                head.append(h("span", { class: "builder-schedule" }, ` · ${slots.map((slot) => `${slot.inner + 1}: ${slot.waitsFor.length ? `after ${slot.waitsFor.map((other) => other + 1).join(", ")}` : "starts with the group"}`).join(" · ")}`));
+        }
+        head.append(button("Ungroup", { variant: "ghost", size: "sm", onClick: () => host.edit({ op: "ungroup", at: index }) }));
+        return head;
+    }
+    function blockItem(block, index, count, written, state, outOfOrder = false) {
+        const scope = scopeOf(index);
+        const item = h("li", { class: "gk-step builder-block", "data-kind": block.kind, "data-index": String(index), "data-phase": written.phase, "data-status": state?.status ?? "idle" });
+        const statusIcon = STATUS_ICON[state?.status ?? "pending"];
+        item.append(h("span", { class: "gk-rail", "aria-hidden": "true" }, statusIcon ? icon(statusIcon, 12) : h("span", { class: "gk-rail-dot" })));
+        const body = h("div", { class: "gk-step-body builder-block-body" });
+        const card = h("div", { class: "builder-card" });
+        const { pick, tools } = toolbar(block, index, count);
+        const sentence = h("div", { class: "gk-sentence builder-sentence" }, keywordChip(index, written.keyword, written.phase, block.kind !== "text"));
+        card.append(sentence, tools);
+        item.append(pick);
+        if (outOfOrder)
+            card.append(h("div", { class: "builder-order-hint", title: "Context steps usually come first. This one runs where it is, after the steps above." }, icon("info", 12), h("span", {}, "Context after an action")));
+        if (block.kind === "sentence") {
+            sentence.append(atom(block, index, undefined, scope));
+            const about = host.find(block.pattern);
+            if (about && !about.available)
+                sentence.append(chip("unavailable", { tone: "warning", title: about.reason }));
+            if (about?.table)
+                card.append(tableEditor(block, about, scope, String(index), (table) => host.edit({ op: "table", at: index, table })));
+        }
+        else if (block.kind === "text") {
+            item.dataset.locked = "true";
+            const { scenario } = host.check();
+            const custom = !!scenario?.custom?.includes(index);
+            const notes = (scenario?.issues ?? []).filter((issue) => issue.block === index).map((issue) => issue.message);
+            sentence.append(stepText(block.text, { actors: scenario?.actors ?? [] }), custom
+                ? chip("Custom", { icon: "code", title: "Defined in code in this lab's step files; runs as written, can't be edited here" })
+                : h("span", { class: "builder-lock", title: [`Runs as written: ${firstClause(block.reason)}.`, ...notes].join("\n") }, icon("lock", 12)));
+            if (custom)
+                item.dataset.custom = "true";
+            if (block.table?.length)
+                card.append(lockedTable(block.table, `Data for: ${block.text}`, `locked-${index}`));
+            if (block.docString !== undefined)
+                card.append(codeBlock(block.docString, { label: "Steps run together" }));
+        }
+        else {
+            sentence.append(groupHead(block, index));
+            const inner = h("ol", { class: "builder-group-body", "data-kind": block.kind });
+            block.body.forEach((part, position) => {
+                const about = host.find(part.pattern);
+                const line = h("li", { class: "builder-inner" }, h("div", { class: "gk-sentence" }, h("span", { class: "builder-inner-index" }, String(position + 1)), atom(part, index, position, scope)));
+                if (about?.table)
+                    line.append(tableEditor(part, about, scope, `${index}-${position}`, (table) => host.edit({ op: "table", at: index, inner: position, table })));
+                inner.append(line);
+            });
+            card.append(inner);
+        }
+        const { scenario, fresh } = host.check();
+        const issues = fresh && block.kind !== "text" ? (scenario?.issues ?? []).filter((issue) => issue.block === index) : [];
+        if (issues.length) {
+            item.dataset.issues = issues.map((issue) => issue.severity).join(" ");
+            card.append(h("ul", { class: "builder-block-issues" }, ...issues.map((issue) => h("li", { "data-severity": issue.severity }, icon(issue.severity === "error" ? "failed" : "warning", 14), h("span", {}, `${issue.inner !== undefined ? `${issue.inner + 1}: ` : ""}${issue.message}`)))));
+        }
+        body.append(card);
+        if (state?.detail)
+            body.append(h("div", { class: `gk-detail gk-detail--${state.status}` }, state.detail));
+        if (state?.duration)
+            sentence.append(h("span", { class: "gk-duration" }, state.duration));
+        if (block.checkpoint)
+            body.append(h("div", { class: "gk-marker is-checkpoint" }, icon("flag", 12), h("span", {}, "Checkpoint: pause here to inspect")));
+        item.append(body);
+        return item;
+    }
+    function starters(blocks) {
+        const available = blocks.filter((block) => block.available);
+        const first = (phase) => available.find((block) => block.class === phase && (phase === "given" || block.group !== "lab")) ?? available.find((block) => block.class === phase);
+        const picks = ["given", "when", "then"].map(first).filter((block) => !!block);
+        return h("div", { class: "builder-starters" }, ...picks.map((block) => {
+            const keyword = block.class.charAt(0).toUpperCase() + block.class.slice(1);
+            const node = h("button", { type: "button", class: "builder-starter", title: block.title }, h("span", { class: "gk-keyword", "data-phase": block.class }, keyword), h("span", { class: "builder-step-text" }, ...sentenceNodes(block)), icon("plus", 14));
+            node.onclick = () => host.edit({ op: "add", pattern: block.pattern });
+            return node;
+        }));
+    }
+    return { blockItem, starters, closeMenu, menuOpen: () => menu };
+}

package/entrypoints/panel/src/client/builder-chrome.d.ts

@@ -0,0 +1,27 @@
+import type { BuilderLoadView, BuilderPaletteView } from "@parity/product-lab/ports/driving";
+import type { PaletteBlock, ValueTone } from "@parity/product-lab/domain";
+export declare const STEP_DRAG_TYPE = "application/x-product-lab-step";
+/** The picker's face: `folder › file.feature › Scenario name` (Draft for a new document); the whole path as its tooltip. */
+export declare function renderDocumentButton(summary: HTMLElement, loaded: BuilderLoadView | undefined, name: string): void;
+/** Every scenario the lab lists (from the feature library's list once it has loaded), else one entry per file. */
+export declare function documentEntries(files: readonly string[]): {
+    path: string;
+    name: string | undefined;
+}[];
+/** The picker's popover: a sticky search, then the scenarios under their folder; a shared title shows its file. */
+export declare function renderDocumentList(list: HTMLElement, files: readonly string[], current: {
+    path?: string;
+    name?: string;
+}, open: (path: string, name: string | undefined) => void, query?: string): void;
+/**
+ * What the builder cannot keep, as one quiet line: "Read-only · runs as written" with the reasons behind Details
+ * when saving is off; "3 custom steps · run as written" when the only locked steps are custom steps (`custom`: the
+ * texts of the blocks a custom step() runs, as `Keyword text`).
+ */
+export declare function renderLossy(box: HTMLElement, loaded: BuilderLoadView | undefined, custom: ReadonlySet<string>): void;
+/** The feature's Background, read only at the top of the canvas: one line with its step count, the viewer's steps inside. */
+export declare function renderBackground(box: HTMLElement, loaded: BuilderLoadView | undefined, find: (pattern: string) => PaletteBlock | undefined, actors: readonly string[], valueTones?: Readonly<Record<string, ValueTone>>): void;
+/** The Gherkin as it saves, highlighted; empty says why (no steps yet, or a step that cannot be written). */
+export declare function renderSource(preview: HTMLElement, text: string | undefined, hasBlocks: boolean): void;
+/** The step library: Context, Action and Outcome in their phase colours, each integration a small header inside. */
+export declare function renderLibrary(container: HTMLElement, palette: BuilderPaletteView, search: string, add: (pattern: string) => void, dragging: (on: boolean) => void): void;

package/entrypoints/panel/src/client/builder-chrome.js

@@ -0,0 +1,144 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { stepsList } from "./gherkin-view.js";
+import { disclosure, empty, h, icon, plural, row, searchField } from "./ui.js";
+import { labQueryAll } from "./lab-document.js";
+import { blockKeywords, blockText, highlightGherkin, PHASE_KEYWORD, PHASE_LABEL, paletteSections, plainLine, sentenceNodes, splitPath, whereIcon } from "./builder-view.js";
+export const STEP_DRAG_TYPE = "application/x-product-lab-step";
+export function renderDocumentButton(summary, loaded, name) {
+    const parts = [icon(loaded ? "file" : "build", 15)];
+    const crumbs = [];
+    const crumb = (text, className = "builder-crumb") => { parts.push(h("span", { class: className }, text), h("span", { class: "builder-crumb-sep" }, "›")); crumbs.push(text); };
+    if (loaded) {
+        const { folder, file } = splitPath(loaded.path);
+        if (folder)
+            crumb(folder, "builder-crumb is-muted");
+        crumb(file);
+    }
+    else
+        crumb("Draft", "builder-crumb is-muted");
+    parts.push(h("span", { class: "builder-crumb is-name" }, name), icon("down", 14));
+    crumbs.push(name);
+    summary.replaceChildren(...parts);
+    summary.title = `${crumbs.join(" › ")}. Open another scenario`;
+}
+export function documentEntries(files) {
+    const names = new Map();
+    for (const option of labQueryAll("#feature-scenario option[data-scenario]")) {
+        try {
+            const { path, name } = JSON.parse(option.dataset.scenario);
+            names.set(path, [...(names.get(path) ?? []), name]);
+        }
+        catch {  }
+    }
+    return files.flatMap((path) => (names.get(path)?.length ? names.get(path).map((name) => ({ path, name })) : [{ path, name: undefined }]));
+}
+export function renderDocumentList(list, files, current, open, query = "") {
+    const all = documentEntries(files);
+    const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+    const entries = all.filter((entry) => words.every((word) => `${entry.path} ${entry.name ?? ""}`.toLowerCase().includes(word)));
+    const titles = new Map();
+    for (const entry of all)
+        titles.set(entry.name ?? entry.path, (titles.get(entry.name ?? entry.path) ?? 0) + 1);
+    const rows = h("div", { class: "builder-document-rows", role: "listbox", "aria-label": "Scenarios" });
+    let folder;
+    for (const entry of entries) {
+        const place = splitPath(entry.path);
+        if (place.folder !== folder) {
+            folder = place.folder;
+            rows.append(h("div", { class: "builder-document-folder", role: "presentation" }, place.folder || "features"));
+        }
+        const title = entry.name ?? place.file;
+        const node = row({
+            leading: h("span", { class: "builder-document-icon" }, icon("file", 16)),
+            title,
+            ...(entry.name && (titles.get(entry.name) ?? 0) > 1 ? { subtitle: place.file } : {}),
+            selected: current.path === entry.path && (!entry.name || entry.name === current.name),
+            onSelect: () => open(entry.path, entry.name),
+            label: `${title} (${entry.path.replace(/^features\//, "")})`,
+        });
+        node.dataset.path = entry.path;
+        node.title = entry.path.replace(/^features\//, "");
+        if (entry.name)
+            node.dataset.name = entry.name;
+        rows.append(node);
+    }
+    const search = searchField("Find a feature or scenario", (value) => renderDocumentList(list, files, current, open, value), query);
+    const input = search.querySelector("input");
+    input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            list.querySelector(".ui-row")?.click();
+        }
+    });
+    list.replaceChildren(h("div", { class: "builder-document-search" }, search), entries.length ? rows : empty({ icon: "search", title: "No scenarios match", body: "Try another word." }));
+    input.focus();
+    if (query)
+        input.setSelectionRange(query.length, query.length);
+}
+export function renderLossy(box, loaded, custom) {
+    const all = loaded?.notRepresentable ?? [];
+    const structure = loaded && !loaded.lossless ? all.filter((item) => item.scope === "structure") : [];
+    const locked = all.filter((item) => item.scope === "step" && !custom.has(item.text));
+    const customCount = all.filter((item) => item.scope === "step" && custom.has(item.text)).length;
+    box.hidden = !loaded || (!structure.length && !locked.length && !customCount);
+    if (box.hidden || !loaded) {
+        box.replaceChildren();
+        return;
+    }
+    box.dataset.lossless = String(loaded.lossless);
+    const counts = [...(customCount ? [plural(customCount, "custom step")] : []), ...(locked.length ? [plural(locked.length, "locked step")] : [])];
+    const label = structure.length ? ["Read-only", ...counts, "runs as written"].join(" · ") : [...counts, "run as written"].join(" · ");
+    const why = [...structure, ...locked].sort((a, b) => a.line - b.line);
+    box.replaceChildren(h("div", { class: "builder-readonly" }, icon("lock", 14), h("span", { class: "builder-readonly-label" }, label), why.length ? disclosure("Details", [h("ul", { class: "builder-why" }, ...why.map((item) => h("li", {}, h("span", { class: "builder-why-line" }, `Line ${item.line}`), h("span", {}, plainLine(item)))))], { class: "builder-why-disclosure" }) : null));
+}
+export function renderBackground(box, loaded, find, actors, valueTones) {
+    const blocks = loaded?.background?.blocks ?? [];
+    box.hidden = !blocks.length;
+    if (!blocks.length) {
+        box.replaceChildren();
+        return;
+    }
+    const written = blockKeywords(blocks, find);
+    const steps = blocks.map((block, index) => ({ keyword: written[index].keyword, text: blockText(block, find), ...(block.kind === "sentence" || block.kind === "text" ? (block.table ? { table: block.table.map((cells) => [...cells]) } : {}) : {}) }));
+    const summary = h("summary", {}, icon("right", 12), h("span", { class: "gk-keyword", "data-phase": "background" }, "Background"), h("span", {}, loaded?.background?.name || "From Background"), h("span", { class: "builder-lock", title: "Read only: the builder does not edit or save a Background" }, icon("lock", 12)), h("span", { class: "gk-examples-count" }, plural(blocks.length, "step")));
+    box.replaceChildren(h("div", { class: "gk-phase builder-phase", "data-phase": "given" }, PHASE_LABEL.given), h("details", { class: "gk-background builder-background-steps" }, summary, stepsList(steps, { actors, valueTones })));
+}
+export function renderSource(preview, text, hasBlocks) {
+    const written = text ?? "";
+    if (preview.textContent !== written || (written && !preview.childElementCount))
+        preview.replaceChildren(highlightGherkin(written));
+    if (written)
+        delete preview.dataset.empty;
+    else
+        preview.dataset.empty = hasBlocks ? "error" : "blocks";
+}
+function libraryRow(block, shared, add, dragging) {
+    const where = whereIcon(block);
+    const node = h("button", {
+        type: "button", class: "builder-step", "data-pattern": block.pattern, "data-available": String(block.available), "data-phase": block.class, draggable: "true",
+        title: block.available ? `${block.title}: click or drag onto the scenario` : `Unavailable here: ${block.reason ?? ""}`,
+    }, h("span", { class: "builder-step-body" }, h("span", { class: "builder-step-text" }, ...sentenceNodes(block)), shared ? h("span", { class: "builder-step-sub" }, block.title) : null), where ? h("span", { class: "builder-step-where", title: where.label, "aria-label": where.label }, icon(where.icon, 13)) : null, h("span", { class: "builder-step-add", "aria-hidden": "true" }, icon("plus", 14)));
+    node.onclick = () => add(block.pattern);
+    node.ondragstart = (event) => {
+        event.dataTransfer?.setData(STEP_DRAG_TYPE, block.pattern);
+        event.dataTransfer?.setData("text/plain", block.pattern);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = "copy";
+        dragging(true);
+    };
+    node.ondragend = () => dragging(false);
+    return node;
+}
+export function renderLibrary(container, palette, search, add, dragging) {
+    const titles = new Map();
+    for (const block of palette.blocks)
+        titles.set(block.title, (titles.get(block.title) ?? 0) + 1);
+    const sections = paletteSections(palette, search);
+    container.replaceChildren(...(sections.length
+        ? sections.map(({ phase, count, groups }) => h("section", { class: "builder-group", "data-phase": phase }, h("div", { class: "builder-role", "data-phase": phase }, h("h3", {}, PHASE_LABEL[phase]), h("span", { class: "builder-role-keyword" }, PHASE_KEYWORD[phase]), h("span", { class: "ui-count" }, String(count))), ...groups.flatMap(({ group, blocks }) => [
+            h("div", { class: "builder-integration" }, group === "lab" ? "Framework" : group),
+            ...blocks.map((block) => libraryRow(block, (titles.get(block.title) ?? 0) > 1, add, dragging)),
+        ])))
+        : [empty({ icon: "search", title: "No steps match", body: "Try another word, or clear the search." })]));
+}

package/entrypoints/panel/src/client/builder-view.d.ts

@@ -0,0 +1,86 @@
+import type { BuilderBlock, BuilderEdit, BuilderScenario, PaletteBlock, SentenceBlock } from "@parity/product-lab/domain";
+import type { BuilderPaletteView, FeatureRunRecord } from "@parity/product-lab/ports/driving";
+import type { StepState } from "./gherkin-view.js";
+import { type IconName } from "./ui.js";
+export type Keyword = "Given" | "When" | "Then" | "And" | "But" | "*";
+export type Phase = "given" | "when" | "then";
+/** One wording and one colour (the phase tokens) for a step's role, in the library and on the canvas. */
+export declare const PHASE_LABEL: Record<Phase, string>;
+export declare const PHASES: readonly Phase[];
+export declare const PHASE_KEYWORD: Record<Phase, Keyword>;
+/** Where an action happens, as a small muted icon with a tooltip (checks and framework steps show none). */
+export declare function whereIcon(block: Pick<PaletteBlock, "via" | "group" | "kind">): {
+    icon: IconName;
+    label: string;
+} | undefined;
+/** The names a new actor gets, in order (the domain's ACTOR_ROSTER; builder.test checks they agree). */
+export declare const ACTOR_ROSTER: readonly string[];
+/** The first roster name not in `taken`, then Actor1, Actor2, … (the domain's nextActorName). */
+export declare function nextActorName(taken: readonly string[]): string;
+/** A table longer than this shows its first TABLE_PREVIEW rows and a Show all toggle. */
+export declare const TABLE_LIMIT = 12;
+export declare const TABLE_PREVIEW = 8;
+/** `ui`, `chain`, `check`, or the framework's `lab`. */
+export declare function badge(block: Pick<PaletteBlock, "via" | "group" | "kind">): string;
+/** Palette blocks matching a search by role (Context, Action, Outcome), each with its integrations in palette order. */
+export declare function paletteSections(palette: BuilderPaletteView, search: string): {
+    phase: Phase;
+    count: number;
+    groups: {
+        group: string;
+        blocks: PaletteBlock[];
+    }[];
+}[];
+/** A parameter slot's human label: "someone" for an actor, else the field's own label. */
+export declare function slotLabel(field: {
+    kind: string;
+    label: string;
+} | undefined, fallback: string): string;
+/** Palette blocks matching a search, grouped in palette order. */
+export declare function paletteGroups(palette: BuilderPaletteView, search: string): {
+    group: string;
+    blocks: PaletteBlock[];
+}[];
+/** The first clause of a description, without parenthesised internals (ids, owners). */
+export declare function firstClause(text: string): string;
+/** A line of a loaded file the builder cannot keep, in plain words, from the line itself. */
+export declare function plainLine(item: {
+    line: number;
+    text: string;
+    reason: string;
+    scope: "step" | "structure";
+}): string;
+/** "features/notebook/lifecycle/lifecycle.feature" → folder "notebook/lifecycle", file "lifecycle.feature". */
+export declare function splitPath(path: string): {
+    folder: string;
+    file: string;
+};
+/** Quoted strings in a literal as value chips. */
+export declare function literalNodes(value: string): (Node | string)[];
+/** A pattern with its parameters as placeholder chips (`actor`, `text`, `count`, …). */
+export declare function sentenceNodes(block: PaletteBlock): (Node | string)[];
+/** The keyword and phase each block is written with: its own keyword, else its class's, And when the class repeats. */
+export declare function blockKeywords(blocks: readonly BuilderBlock[], find: (pattern: string) => PaletteBlock | undefined): {
+    keyword: Keyword;
+    phase: Phase;
+}[];
+/** Live state per block from a builder run: steps tick through on the canvas itself. */
+export declare function blockStates(run: FeatureRunRecord | undefined, steps: readonly {
+    block: number;
+}[], count: number): (StepState | undefined)[];
+/** A palette block with the defaults the runtime would give it (what an optimistic Add shows until it answers). */
+export declare function guessBlock(about: PaletteBlock, actors: readonly string[]): SentenceBlock;
+/**
+ * The edit applied locally, for the view only; undefined when only the runtime can say (actors, or an edit that
+ * does not fit). The runtime's builder applies the same edit to the confirmed document and its answer replaces this.
+ */
+export declare function localEdit(scenario: BuilderScenario, edit: BuilderEdit, find: (pattern: string) => PaletteBlock | undefined, actors: readonly string[]): BuilderScenario | undefined;
+/** Edits that set a value: a later one on the same target replaces an earlier one still waiting. */
+export declare function sameTarget(a: BuilderEdit, b: BuilderEdit): boolean;
+/** The written feature with its keywords, tags, comments, strings and table pipes drawn in; the text is unchanged. */
+export declare function highlightGherkin(text: string): DocumentFragment;
+/**
+ * A sentence block's step text as the writer writes it (`SentencePattern.render`): its values in the pattern, `{string}`
+ * values quoted, a plural after a number following it ("1 note", "2 notes"), other optional text left out.
+ */
+export declare function blockText(block: BuilderBlock, find: (pattern: string) => PaletteBlock | undefined): string;