@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/client/view-builder.css

@@ -0,0 +1,372 @@
+/* The scenario builder (builder.ts). Tokens and components only (tokens.css, components.css, gherkin.css): the canvas is
+   the Gherkin viewer's timeline with every value editable in place. */
+
+/* The one full-frame lab view. */
+#command-center[data-section="builder"] > .drawer-pane { padding: 0; min-height: 0; overflow: hidden; }
+#builder { position: relative; height: 100%; margin: 0; padding: 0; border: 0; color: var(--ink); font-size: var(--text-md); }
+#builder[open]:not([hidden]) { display: flex; flex-direction: column; }
+#builder[open]::details-content { display: flex; flex-direction: column; flex: 1; height: 100%; min-height: 0; }
+#builder > summary { display: none; }
+
+/* The older element rules (shell.css) do not reach inside the builder. */
+:where(#builder) li { display: block; gap: normal; margin: 0; font-size: inherit; color: inherit; }
+:where(#builder) p, :where(#builder) details, :where(#builder) ol, :where(#builder) ul { margin: 0; }
+details:where(#builder) button, :where(#builder) details button { margin-top: 0; }
+:where(#builder) summary { color: inherit; font-size: inherit; }
+.builder-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* The search field is the design system's, not the older plain input look (frame.css). */
+#builder .ui-search-input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+
+/* Top bar: the document, New scenario; Source, Save, Pause after each step and Run on the right. */
+.builder-topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); flex-shrink: 0; min-height: 60px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); }
+.builder-topbar-spacer { flex: 1 1 var(--space-2); }
+.builder-document { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: min(640px, 52vw); height: 32px; padding: 0 12px 0 13px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: var(--weight-medium) var(--text-sm) / 1 var(--font-ui); cursor: pointer; list-style: none; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
+.builder-document::-webkit-details-marker { display: none; }
+.builder-document:hover { border-color: var(--line-strong); }
+.builder-document > .ui-icon:first-child { color: var(--accent); }
+.builder-document > .ui-icon:last-child { color: var(--tertiary); margin-left: 2px; }
+.builder-crumb { white-space: nowrap; }
+.builder-crumb.is-muted { color: var(--secondary); font-weight: var(--weight-regular); }
+.builder-crumb.is-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.builder-crumb-sep { color: var(--tertiary); }
+.builder-document-options { flex: 0 1 auto; min-width: 160px; max-width: 640px; }
+.builder-document-options > .builder-document { max-width: 100%; }
+.builder-topbar > :not(.builder-document-options) { flex-shrink: 0; }
+#builder[data-running] .builder-pause { display: none; }
+.builder-document-options[open] > .builder-document { border-color: var(--accent-line); box-shadow: var(--focus-ring); }
+.builder-run-state:empty { display: none; }
+.builder-source-button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
+.builder-save { display: inline-flex; align-items: center; }
+/* Save and its options are one split pill (buttons are pills: components.css). */
+#builder .builder-save > #builder-save { padding-left: 14px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.builder-save-options { display: flex; }
+#builder .builder-save-options > summary { width: 32px; margin-left: -1px; padding-right: 2px; border-radius: 0 var(--radius-control) var(--radius-control) 0; list-style: none; }
+.builder-save-options > summary::-webkit-details-marker { display: none; }
+#builder-run { min-width: 76px; }
+
+/* Popovers from a summary: the document list, Save options, Add actors, table columns. */
+.builder-popover { position: relative; }
+.builder-popover > summary { list-style: none; }
+.builder-popover > summary::-webkit-details-marker { display: none; }
+.builder-popover-body { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 260px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-lg); animation: ui-rise var(--duration) var(--ease); }
+.builder-save-options > .builder-popover-body { left: auto; right: 0; width: 320px; }
+.builder-document-list { width: min(540px, calc(100vw - 48px)); max-height: min(560px, 64vh); padding: 0; gap: 0; overflow: hidden; }
+.builder-document-search { position: sticky; top: 0; z-index: 1; padding: var(--space-2); background: var(--surface); }
+.builder-document-search .ui-search { width: 100%; height: 36px; }
+.builder-document-rows { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; padding: 4px var(--space-2) var(--space-2); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
+.builder-document-folder { padding: 10px 8px 4px; color: var(--tertiary); font: var(--weight-strong) var(--text-2xs) / 1.3 var(--font-ui); letter-spacing: 0.04em; }
+.builder-document-rows .ui-row { gap: 10px; min-height: 44px; padding: 6px 8px; }
+.builder-document-rows .ui-row-title { font-size: var(--text-sm); }
+.builder-document-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--secondary); }
+.builder-document-rows .ui-row.is-selected .builder-document-icon { background: var(--surface); color: var(--accent); }
+.builder-document-list > .ui-empty { padding: var(--space-6) var(--space-4); }
+.builder-form-field { display: flex; flex-direction: column; gap: 6px; color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
+#builder .builder-form-field input { width: 100%; min-height: 32px; font-size: var(--text-sm); }
+
+/* A switch (Pause after each step, Replace the existing file, table columns). */
+.builder-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; }
+#builder .builder-switch input { position: relative; flex-shrink: 0; width: 28px; height: 16px; margin: 0; border-radius: var(--radius-pill); background: var(--line-strong); appearance: none; cursor: pointer; transition: background var(--duration-fast) var(--ease); }
+#builder .builder-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease); }
+#builder .builder-switch input:checked { background: var(--accent); }
+#builder .builder-switch input:checked::before { transform: translateX(12px); }
+#builder .builder-switch input:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+.builder-switch:has(input:checked) { color: var(--ink); }
+
+/* Three columns: the step library, the canvas, the Gherkin source (a drawer below 1300px). */
+.builder-workspace-main { position: relative; display: grid; grid-template-columns: 264px minmax(0, 1fr); flex: 1; min-height: 0; }
+.builder-library { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); }
+.builder-library-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.builder-library-search { padding: var(--space-3) var(--space-3) var(--space-2); }
+#builder-library-toggle { display: none; }
+#builder-palette { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 var(--space-2) var(--space-6); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
+.builder-group + .builder-group { margin-top: var(--space-2); }
+/* One colour per role (the phase tokens), the same words as the canvas: Context, Action, Outcome. */
+.builder-role { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; padding: var(--space-3) 8px 6px; color: var(--phase-given); }
+.builder-role[data-phase="when"] { color: var(--phase-when); }
+.builder-role[data-phase="then"] { color: var(--phase-then); }
+.builder-role::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: currentColor; }
+.builder-role h3 { margin: 0; color: inherit; font: var(--weight-strong) var(--text-2xs) / 1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
+.builder-role-keyword { color: var(--tertiary); font-size: var(--text-2xs); }
+.builder-role .ui-count { margin-left: auto; }
+.builder-integration { padding: 6px 8px 2px; color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-medium); text-transform: capitalize; }
+.builder-group + .builder-group { margin-top: var(--space-4); }
+#builder .builder-step { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; width: 100%; min-height: 34px; padding: 7px 8px; border: 0; border-radius: var(--radius-row); background: transparent; color: var(--ink); font: var(--weight-regular) var(--text-sm) / 1.45 var(--font-ui); text-align: left; white-space: normal; cursor: grab; transition: background var(--duration-fast) var(--ease); }
+#builder .builder-step:hover:not(:disabled), #builder .builder-step:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
+#builder .builder-step:active { cursor: grabbing; }
+.builder-step-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
+.builder-step-text { overflow-wrap: anywhere; }
+.builder-step-sub { color: var(--tertiary); font-size: var(--text-2xs); }
+#builder .builder-step-add { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); color: var(--accent-ink); background: var(--accent); opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
+#builder .builder-step-add svg { width: 13px; height: 13px; }
+#builder .builder-step:hover .builder-step-add, #builder .builder-step:focus-visible .builder-step-add { opacity: 1; }
+#builder .builder-step[data-available="false"] { opacity: 0.55; }
+/* A parameter slot: a neutral dashed chip with a human label; actor tones are for real actor names only. */
+.builder-slot { display: inline-block; padding: 0 7px; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); color: var(--secondary); font-size: 0.92em; line-height: 1.45; }
+#builder .builder-step-where { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 20px; color: var(--tertiary); }
+#builder .builder-step-where svg { width: 13px; height: 13px; }
+
+.builder-canvas { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; background: var(--canvas); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
+.builder-canvas-inner { display: flex; flex-direction: column; gap: var(--space-4); max-width: 900px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); }
+.builder-source { display: none; }
+#builder[data-source="open"] .builder-source { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--line); background: var(--surface); }
+@media (min-width: 1300px) {
+  #builder[data-source="open"] .builder-workspace-main { grid-template-columns: 264px minmax(0, 1fr) minmax(340px, 30%); }
+}
+@media (max-width: 1299px) {
+  #builder[data-source="open"] .builder-source { position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; width: min(460px, 88%); box-shadow: var(--shadow-lg); animation: ui-slide-in var(--duration-slow) var(--ease); }
+}
+@media (max-width: 1099px) {
+  .builder-workspace-main { grid-template-columns: 224px minmax(0, 1fr); }
+  .builder-canvas-inner { padding: var(--space-5) var(--space-4) var(--space-8); }
+}
+
+/* The scenario's title, its actors and who plays them. */
+.builder-title { display: flex; flex-direction: column; gap: var(--space-2); }
+#builder-name { display: block; width: 100%; min-height: 0; margin: 0 0 0 -6px; padding: 2px 6px; border: 0; border-radius: var(--radius-row); background: transparent; color: var(--ink); font: var(--weight-strong) var(--text-2xl) / 1.3 var(--font-display); letter-spacing: -0.01em; resize: none; overflow: hidden; field-sizing: content; box-shadow: none; transition: background var(--duration-fast) var(--ease); }
+#builder-name:hover { box-shadow: inset 0 0 0 1px var(--line); }
+#builder-name:focus { outline: 0; background: var(--surface); box-shadow: var(--focus-ring); }
+.builder-cast { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 26px; }
+.builder-cast-actors { display: contents; }
+.builder-cast-actor { display: inline-flex; align-items: center; font-size: var(--text-sm); }
+.builder-cast-actor .ui-avatar--sm { width: 18px; height: 18px; margin-right: 5px; font-size: 9px; border-radius: 50%; }
+.builder-cast-none { color: var(--tertiary); font-size: var(--text-sm); }
+.builder-tools > summary { color: var(--secondary); }
+.builder-tools > .builder-popover-body { width: 280px; }
+#builder-bindings:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; }
+#builder-bindings > p { display: none; }
+#builder-bindings .binding-host { display: inline-flex; }
+#builder-bindings .binding-host-note { flex-basis: 100%; color: var(--tertiary); font-size: var(--text-xs); }
+#builder-bindings .field { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 3px 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--secondary); font-size: var(--text-xs); }
+#builder-bindings select { display: inline-block; width: auto; min-height: 24px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--text-xs); }
+
+/* Messages and banners. */
+#builder-message:empty { display: none; }
+#builder-message { align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: var(--text-xs); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
+#builder-message[data-error="true"] { background: var(--danger-soft); color: var(--danger); }
+.builder-issues[hidden] { display: none; }
+.builder-issues ul { margin: 4px 0 0; padding-left: 16px; list-style: disc; color: var(--ink); }
+.builder-issues li { display: list-item; font-size: var(--text-xs); }
+#builder-lossy[hidden] { display: none; }
+/* A file the builder cannot keep whole: one quiet line, the reasons behind Details. */
+.builder-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--secondary); font-size: var(--text-xs); }
+.builder-readonly > .ui-icon { color: var(--tertiary); }
+.builder-readonly-label { font-weight: var(--weight-medium); }
+.builder-why-disclosure { border-top: 0; }
+.builder-why-disclosure[open] { flex: 1 1 100%; }
+.builder-why-disclosure > summary { min-height: 22px; padding: 0; color: var(--secondary); font-size: var(--text-xs); }
+.builder-why-disclosure > summary > span:first-of-type { flex: 0 1 auto; }
+.builder-why-disclosure .ui-disclosure-body { padding: 4px 0 2px; }
+.builder-why { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; color: var(--ink); }
+.builder-why li { display: flex; gap: 10px; font-size: var(--text-xs); line-height: 1.5; }
+.builder-why-line { flex-shrink: 0; min-width: 52px; color: var(--secondary); font-variant-numeric: tabular-nums; }
+
+/* Selection: Repeat or Run together over the selected blocks. */
+.builder-selection { position: sticky; z-index: 8; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--accent-line); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-md); animation: ui-rise var(--duration) var(--ease); }
+.builder-selection[hidden], .builder-selection .ui-button[hidden] { display: none; }
+.builder-selection-count { margin-right: auto; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-strong); }
+.builder-repeat-count { display: inline-flex; align-items: center; gap: 4px; color: var(--secondary); font-size: var(--text-xs); }
+#builder #builder-count { width: 56px; min-height: 26px; padding: 0 6px; font-size: var(--text-xs); }
+
+/* The canvas: the viewer's rail, one card per block. */
+#builder-blocks { position: relative; padding: 0; }
+#builder-blocks[hidden] { display: none; }
+#builder .builder-block { position: relative; padding: 5px 0; }
+#builder .builder-block::before { top: 0; }
+#builder-blocks > .builder-block:first-of-type::before { top: 27px; }
+#builder-blocks > .builder-block:last-of-type::before { bottom: calc(100% - 27px); }
+.builder-block > .gk-rail { margin-top: 12px; transition: opacity var(--duration-fast) var(--ease); }
+.builder-phase { margin-top: 14px; color: var(--phase-given); }
+.builder-phase[data-phase="when"] { color: var(--phase-when); }
+.builder-phase[data-phase="then"] { color: var(--phase-then); }
+.builder-phase-gap { height: 10px; }
+.builder-block[data-phase="given"] .gk-rail-dot { border-color: color-mix(in srgb, var(--phase-given) 55%, var(--line)); }
+.builder-order-hint { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--tertiary); font-size: var(--text-2xs); }
+/* The Background, read only above the scenario's own steps. */
+.builder-background[hidden] { display: none; }
+.builder-background > .builder-phase { margin: 0 0 6px 30px; }
+.builder-background-steps { margin-left: 30px; }
+.builder-background-steps > summary .builder-lock { height: 20px; }
+.builder-background-steps .gk-steps { padding-bottom: 8px; }
+/* The section header already says Context; the list does not repeat it. */
+.builder-background-steps .gk-steps > .gk-phase:first-child[data-phase="given"] { display: none; }
+/* A duplicate name in an actors table or a new-actor field. */
+#builder .is-invalid .builder-cell, #builder .builder-field.is-invalid .builder-input { color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
+#builder .builder-field[data-names] .builder-input { background: var(--surface); }
+.builder-actor-error { margin: 0; color: var(--danger); font-size: var(--text-xs); }
+.builder-actor-error[hidden] { display: none; }
+.builder-card { position: relative; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); box-shadow: none; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
+.builder-block:hover > .builder-block-body > .builder-card, .builder-block:focus-within > .builder-block-body > .builder-card { border-color: var(--line-strong); }
+.builder-block[data-issues~="error"] > .builder-block-body > .builder-card { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
+.builder-block[data-status="running"] { background: transparent; }
+.builder-block[data-status="running"] > .builder-block-body > .builder-card { border-color: var(--accent-line); box-shadow: var(--focus-ring); }
+.builder-block[data-status="failed"] > .builder-block-body > .builder-card { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
+.builder-block[data-locked] > .builder-block-body > .builder-card { border-style: dashed; background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: none; }
+.builder-block.is-drop-before::after, .builder-block.is-drop-after::after { content: ""; position: absolute; z-index: 5; left: 30px; right: 0; height: 2px; border-radius: 2px; background: var(--accent); }
+.builder-block.is-drop-before::after { top: -1px; }
+.builder-block.is-drop-after::after { bottom: -1px; }
+#builder[data-dragging] .builder-canvas-inner { cursor: copy; }
+
+.builder-sentence { position: relative; align-items: flex-start; min-height: 26px; line-height: 26px; }
+.builder-sentence > .gk-keyword { margin-top: 3px; }
+.builder-atom { line-height: 26px; }
+#builder .builder-keyword { height: 20px; min-height: 20px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); font: var(--weight-strong) var(--text-2xs) / 1 var(--font-ui); letter-spacing: 0.02em; cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease); }
+#builder .builder-keyword[data-phase="given"] { color: var(--phase-given); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
+#builder .builder-keyword[data-phase="when"] { color: var(--phase-when); background: var(--phase-when-soft); }
+#builder .builder-keyword[data-phase="then"] { color: var(--phase-then); background: var(--phase-then-soft); }
+#builder .builder-keyword:hover, #builder .builder-keyword:focus-visible { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
+
+/* Selecting a block: the rail dot becomes a checkbox on hover. */
+#builder .builder-pick { position: absolute; z-index: 3; top: 20px; left: 2.5px; width: 15px; height: 15px; margin: 0; opacity: 0; cursor: pointer; transition: opacity var(--duration-fast) var(--ease); }
+.builder-block:hover > .builder-pick, #builder.has-selection .builder-pick, #builder .builder-pick:focus-visible { opacity: 1; }
+.builder-block[data-status="idle"]:hover > .gk-rail, #builder.has-selection .builder-block[data-status="idle"] > .gk-rail { opacity: 0; }
+
+/* The hover toolbar: move, duplicate, checkpoint, delete. */
+.builder-block-tools { position: absolute; z-index: 6; top: -18px; right: 8px; display: flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-md); line-height: 1; opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
+.builder-block:hover .builder-block-tools, .builder-block:focus-within .builder-block-tools { opacity: 1; }
+.builder-group-body .builder-block-tools { display: none; }
+#builder .builder-block-tools .ui-icon-button { width: 26px; min-height: 26px; }
+#builder .builder-block-tools svg { width: 14px; height: 14px; }
+.builder-toggle { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); color: var(--secondary); cursor: pointer; transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
+.builder-toggle:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
+.builder-toggle.is-on { background: var(--accent-soft); color: var(--accent); }
+#builder .builder-toggle-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.builder-toggle:has(.builder-toggle-input:focus-visible) { box-shadow: var(--focus-ring); }
+
+/* Values as editable chips; actors in their roster tone. */
+#builder .builder-field { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 1px; vertical-align: top; line-height: 1; }
+#builder .builder-input { height: 24px; min-height: 24px; min-width: 3ch; max-width: 100%; margin: 1px 0; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: var(--weight-medium) var(--text-sm) / 1 var(--font-ui); field-sizing: content; transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
+#builder .builder-input::placeholder { color: var(--tertiary); font-weight: var(--weight-regular); }
+#builder .builder-input:hover { border-color: var(--line-strong); }
+#builder .builder-input:focus { background: var(--surface); border-color: var(--accent-line); box-shadow: var(--focus-ring); }
+#builder select.builder-input { padding: 0 4px 0 7px; cursor: pointer; }
+#builder input[type="number"].builder-input { width: 7ch; field-sizing: fixed; }
+#builder .builder-field[data-kind="actor"] { gap: 0; height: 24px; margin: 1px 1px; padding: 0 0 0 3px; border-radius: var(--radius-sm); background: var(--tone-0-soft); color: var(--tone-0); }
+#builder .builder-field[data-kind="actor"] .ui-avatar--sm { width: 18px; height: 18px; border-radius: 50%; font-size: 9px; }
+#builder .builder-field[data-kind="actor"] select.builder-input { margin: 0; border-color: transparent; background: transparent; color: inherit; font-weight: var(--weight-strong); }
+#builder .builder-field[data-kind="actor"] select.builder-input:focus { box-shadow: var(--focus-ring); }
+#builder .builder-field[data-kind="actor"][data-tone="1"] { background: var(--tone-1-soft); color: var(--tone-1); }
+#builder .builder-field[data-kind="actor"][data-tone="2"] { background: var(--tone-2-soft); color: var(--tone-2); }
+#builder .builder-field[data-kind="actor"][data-tone="3"] { background: var(--tone-3-soft); color: var(--tone-3); }
+#builder .builder-field[data-kind="actor"][data-tone="4"] { background: var(--tone-4-soft); color: var(--tone-4); }
+#builder .builder-field[data-kind="actor"][data-tone="5"] { background: var(--tone-5-soft); color: var(--tone-5); }
+.builder-lock { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 26px; color: var(--tertiary); }
+
+/* Tables: the ui table, each cell editable; add a row or a column on hover. */
+.builder-table-editor { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); }
+.builder-card > .ui-table-wrap { margin-top: var(--space-2); }
+#builder .builder-table td { padding: 0; }
+#builder .builder-table td.builder-row-tools { width: 32px; padding: 0 2px; text-align: center; vertical-align: middle; }
+#builder .builder-table td[data-tone] .builder-cell { font-weight: var(--weight-medium); }
+#builder .builder-cell { display: block; width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: var(--text-xs); box-shadow: none; }
+#builder .builder-cell:hover { box-shadow: inset 0 0 0 1px var(--line); }
+#builder .builder-cell:focus { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
+#builder .builder-row-tools .ui-icon-button { opacity: 0; }
+#builder .builder-table tr:hover .builder-row-tools .ui-icon-button, #builder .builder-row-tools .ui-icon-button:focus-visible { opacity: 1; }
+.builder-table-actions { display: flex; align-items: center; gap: 2px; margin-left: -6px; }
+#builder .builder-table-actions .ui-button { color: var(--tertiary); }
+#builder .builder-table-actions .ui-button:hover:not(:disabled) { color: var(--ink); }
+#builder .builder-table thead td { border-top: 0; background: transparent; border-bottom: 1px solid var(--line); }
+.builder-columns > .builder-popover-body { gap: 8px; min-width: 200px; }
+#builder .builder-table-wrap.is-wide td { padding: 0; }
+
+/* Repeat and Run together: the viewer's markers as a bracket around their blocks. */
+.builder-group-head { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 26px; padding: 0 4px 0 10px; border-radius: var(--radius-pill); background: var(--info-soft); color: var(--info); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.3; }
+.builder-block[data-kind="together"] .builder-group-head { background: var(--accent-soft); color: var(--accent); }
+.builder-group-head .builder-field .builder-input { height: 20px; min-height: 20px; background: var(--surface); }
+.builder-schedule { color: var(--secondary); font-weight: var(--weight-regular); }
+.builder-group-head .ui-button { min-height: 20px; height: 20px; padding: 0 6px; color: inherit; }
+.builder-group-body { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px 6px; padding: 2px 0 2px 14px; border-left: 2px solid color-mix(in srgb, var(--info) 35%, transparent); list-style: none; }
+.builder-group-body[data-kind="together"] { border-left-color: color-mix(in srgb, var(--accent) 35%, transparent); }
+.builder-inner .gk-sentence { line-height: 26px; }
+.builder-inner-index { display: inline-grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--line); color: var(--secondary); font-size: var(--text-2xs); font-weight: var(--weight-strong); line-height: 1; }
+
+/* Issues on a block, checkpoints after it, live detail. */
+.builder-block-issues { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 0; list-style: none; }
+.builder-block-issues li { display: flex; align-items: flex-start; gap: 6px; font-size: var(--text-xs); line-height: 1.45; color: var(--danger); }
+.builder-block-issues li[data-severity="warning"] { color: var(--warning); }
+.builder-block-issues .ui-icon { margin-top: 1px; }
+#builder .builder-block-body > .gk-marker { margin: 2px 0 0; }
+#builder .builder-block-body > .gk-detail { margin-top: 2px; }
+
+/* Empty scenario and the Add a step affordance after the last block. */
+#builder-empty .ui-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); background: var(--surface); }
+.builder-starters { display: flex; flex-direction: column; gap: 6px; width: min(440px, 100%); }
+#builder .builder-starter { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); color: var(--ink); font: var(--weight-regular) var(--text-sm) / 1.4 var(--font-ui); text-align: left; white-space: normal; }
+#builder .builder-starter:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-soft); }
+#builder .builder-starter > .ui-icon:last-child { margin-left: auto; color: var(--accent); }
+.builder-add-more { padding-left: 26px; }
+#builder-outcome[hidden] { display: none; }
+
+/* The keyword menu. */
+.builder-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 230px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-lg); animation: ui-rise var(--duration) var(--ease); }
+#builder .builder-menu-item { justify-content: flex-start; gap: 10px; width: 100%; min-height: 34px; padding: 0 8px; border: 0; background: transparent; color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-regular); }
+#builder .builder-menu-item:hover:not(:disabled), #builder .builder-menu-item:focus-visible { background: var(--accent-soft); color: var(--ink); }
+#builder .builder-menu-item > .ui-icon:last-child { margin-left: auto; color: var(--accent); }
+.builder-menu-item .gk-keyword { min-width: 48px; }
+
+/* The Gherkin source: coloured keywords, tags, strings and tables; wrapped, never sideways. */
+.builder-source-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 48px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
+.builder-source-actions { display: flex; gap: 2px; }
+#builder-preview { flex: 1; min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0; padding: var(--space-4); overflow: auto; background: var(--surface); color: var(--ink); font: var(--text-xs) / 1.75 var(--font-mono); white-space: pre; tab-size: 2; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
+#builder-preview[data-empty]::before { color: var(--tertiary); font-family: var(--font-ui); }
+#builder-preview[data-empty="blocks"]::before { content: "Add a step to see the Gherkin it saves as."; }
+#builder-preview[data-empty="error"]::before { content: "Fix the highlighted steps to see the Gherkin."; }
+.src-head { color: var(--ink); font-weight: var(--weight-strong); }
+.src-keyword { font-weight: var(--weight-strong); }
+.src-keyword[data-phase="given"] { color: var(--phase-given); }
+.src-keyword[data-phase="when"] { color: var(--phase-when); }
+.src-keyword[data-phase="then"] { color: var(--phase-then); }
+.src-tag { color: var(--accent); }
+.src-comment { color: var(--tertiary); font-style: italic; }
+.src-pipe { color: var(--tertiary); }
+.src-string { color: var(--info); }
+.src-param { color: var(--warning); }
+
+/* Narrow: the library folds away above the canvas; everything stacks. */
+@media (max-width: 759px) {
+  .builder-topbar { flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
+  .builder-document-options { flex: 1 1 100%; }
+  .builder-document { max-width: 100%; }
+  .builder-workspace-main { display: block; overflow-x: hidden; overflow-y: auto; }
+  .builder-library { border-right: 0; border-bottom: 1px solid var(--line); }
+  #builder-library-toggle { display: flex; justify-content: flex-start; width: calc(100% - var(--space-6)); margin: var(--space-3); }
+  #builder-library:not([data-expanded="true"]) #builder-library-content { display: none; }
+  #builder-palette { max-height: 50vh; }
+  .builder-canvas { overflow: visible; }
+  .builder-canvas-inner { padding: var(--space-4) var(--space-3) var(--space-6); }
+  #builder[data-source="open"] .builder-source { position: static; width: auto; max-height: 60vh; border-left: 0; border-top: 1px solid var(--line); box-shadow: none; }
+  #builder-name { font-size: var(--text-xl); }
+  .builder-block-tools { top: -14px; right: 0; }
+}
+
+/* Tables stay tables on the canvas: wide ones get a compact density; long ones fold (builder-blocks.ts). */
+.builder-card .ui-table-wrap.is-wide .ui-table { font-size: var(--text-xs); }
+.builder-card .ui-table-wrap.is-wide th { padding: 6px 7px; white-space: normal; }
+.builder-card .ui-table-wrap.is-wide td { padding: 5px 7px; }
+#builder .builder-card .ui-table-wrap.is-wide td:has(.builder-cell) { padding: 0; }
+#builder .builder-card .ui-table-wrap.is-wide .builder-cell { height: 28px; min-height: 28px; padding: 0 7px; font-size: var(--text-xs); }
+.builder-locked-table { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); }
+#builder .builder-rows-toggle { align-self: flex-start; color: var(--secondary); }
+/* The ui table's cards start below 560px of container; in a card they wait until 480px, and pair label and value. */
+@container (min-width: 480px) {
+  .builder-card .ui-table-wrap.is-wide .ui-table { display: table; border: 1px solid var(--line); background: var(--surface); }
+  .builder-card .ui-table-wrap.is-wide thead { display: table-header-group; }
+  .builder-card .ui-table-wrap.is-wide tbody { display: table-row-group; }
+  .builder-card .ui-table-wrap.is-wide tr { display: table-row; padding: 0; border: 0; }
+  .builder-card .ui-table-wrap.is-wide td { display: table-cell; border-top: 1px solid var(--line); }
+  .builder-card .ui-table-wrap.is-wide tbody tr:first-child td { border-top: 0; }
+  .builder-card .ui-table-wrap.is-wide td::before { display: none; }
+  .builder-card .ui-table-wrap.is-wide td:first-child { color: inherit; font-weight: inherit; }
+}
+@container (max-width: 479px) {
+  .builder-card .ui-table-wrap.is-wide tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .builder-card .ui-table-wrap.is-wide td.builder-row-tools { position: absolute; top: 6px; right: 6px; width: auto; }
+  .builder-card .ui-table-wrap.is-wide tr { position: relative; }
+}
+/* Headers wrap between words, never inside one; a cell breaks a word only when it cannot fit. A table that still
+   does not fit scrolls inside its own frame, never the canvas. */
+.builder-card .ui-table-wrap.is-wide th { overflow-wrap: normal; hyphens: manual; }
+.builder-card .ui-table-wrap.is-wide td { overflow-wrap: break-word; }
+.builder-card .ui-table-wrap.is-wide { overflow-x: auto; scrollbar-width: thin; }
+.builder-card .ui-table-wrap[data-columns="9"] td, .builder-card .ui-table-wrap[data-columns="10"] td, .builder-card .ui-table-wrap[data-columns="11"] td, .builder-card .ui-table-wrap[data-columns="12"] td { padding: 5px 5px; }

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

@@ -0,0 +1,3 @@
+import type { ShellContext } from "./shell-kit.js";
+import type { ToolsView } from "./view-tools.js";
+export declare function createCharactersView(ctx: ShellContext, tools: ToolsView): void;

package/entrypoints/panel/src/client/view-characters.js

@@ -0,0 +1,20 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { chip, empty, h, icon } from "./ui.js";
+export function createCharactersView(ctx, tools) {
+    const root = h("section", { id: "characters-page", class: "characters-page", "aria-label": "Characters" });
+    ctx.pane("characters").append(root);
+    const draw = (catalog, error) => {
+        if (!catalog)
+            return void root.replaceChildren(error ? h("div", { class: "tools-error", role: "alert" }, icon("circle-alert", 16), error) : h("p", { class: "tools-loading" }, "Reading the lab's characters…"));
+        root.replaceChildren(h("p", { class: "tools-lede" }, "A character is a setup written once in your lab and used in any scenario, as “Grace is a writer with a published note”."), ...(catalog.characters.length ? catalog.characters.map(character) : [empty({ icon: "user-round", title: "This lab declares no characters", body: "Declare one in lab.config.ts, then write “Nia is <its name>” in any scenario." })]), h("div", { class: "characters-hint" }, h("p", {}, "Add one in ", h("code", {}, "lab.config.ts"), ":"), h("pre", { class: "tool-gherkin" }, 'characters: {\n  "a person with no funds": {\n    steps: ["{actor} is a new actor with no funds"] } }')));
+    };
+    tools.onCatalog(draw);
+    draw(tools.catalog());
+}
+function character(item) {
+    const uses = item.uses.length;
+    return h("article", { class: "character", "data-character": item.name }, h("header", { class: "character-head" }, h("span", { class: "character-icon" }, icon("user-round", 16)), h("h3", {}, item.name), chip(uses ? `used ${uses === 1 ? "once" : `${uses} times`}` : "not used yet", { tone: uses ? "neutral" : "warning" })), item.description ? h("p", { class: "character-description" }, item.description) : null, h("p", { class: "character-sentence" }, "Written as ", h("code", {}, item.sentence)), h("h4", {}, "Its steps"), h("pre", { class: "tool-gherkin" }, ...item.steps.map((step) => h("span", { class: "tool-gherkin-line" }, step))), h("h4", {}, "Used in"), uses
+        ? h("ul", { class: "character-uses" }, ...item.uses.map((use) => h("li", {}, icon("file-text", 14), h("span", {}, `${use.actor}, in “${use.scenario}”`, h("small", {}, `${use.file}:${use.line}`)))))
+        : h("p", { class: "character-none" }, "No scenario uses it yet."), item.prepared.length ? h("h4", {}, "Ready in a saved state") : null, ...item.prepared.map((ready) => h("p", { class: "character-prepared" }, icon("database", 14), `“${ready.fixture}” holds ${ready.identities.join(" and ")} ready. A scenario starting from it uses them and skips the steps.`)));
+}

package/entrypoints/panel/src/client/view-config.css

@@ -0,0 +1,23 @@
+/* The Config view (view-config.ts): one card per group, one row per value: its label and where it came from, the value,
+   its key and why, the line that changes it (copyable), the other values it takes, greyed. Text wraps, never cut. */
+.config-view { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; }
+.config-groups { display: flex; flex-direction: column; gap: var(--space-3); }
+.config-intro { margin: 0; color: var(--secondary); font-size: var(--text-sm); line-height: 1.45; }
+.config-group { display: flex; flex-direction: column; gap: 0; }
+.config-row { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) 0; border-top: 1px solid var(--line); min-width: 0; }
+.config-row:first-of-type { border-top: 0; }
+.config-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
+.config-label { color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-strong); }
+.config-value { margin: 0; color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
+.config-from, .config-options { margin: 0; color: var(--secondary); font-size: var(--text-xs); line-height: 1.45; overflow-wrap: anywhere; }
+.config-from code, .config-options code { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
+/* The line that changes it wraps between tokens only. */
+.config-change code { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: break-word; word-break: normal; }
+.config-options { opacity: 0.7; }
+.config-options code + code::before { content: ", "; font-family: var(--font-ui); }
+.config-change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--secondary); font-size: var(--text-xs); }
+.config-change code { padding: 2px 6px; border-radius: var(--radius-control); background: var(--soft); color: var(--ink); }
+/* Off or unset (a host turned off, an unset variable, no modes): greyed, never hidden, with the line that turns it on. */
+.config-row.is-off { opacity: 0.62; }
+.config-row.is-off:hover, .config-row.is-off:focus-within { opacity: 0.9; }
+.config-row-head .config-label { flex: 1 1 auto; min-width: 0; }

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

@@ -0,0 +1,6 @@
+import type { ResolvedLabConfig } from "@parity/product-lab/ports/driving";
+import type { LabView, ShellContext } from "./shell-kit.js";
+/** `stopped`: what the view draws while no environment runs (backlog 194): the declared registry's config, or none. */
+export declare function createConfigView(context: ShellContext): LabView & {
+    stopped(config: ResolvedLabConfig | undefined): void;
+};

package/entrypoints/panel/src/client/view-config.js

@@ -0,0 +1,41 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { CONFIG_GROUPS, CONFIG_SOURCE_WORDS, configEntryOff, configGroupOf, configValueText } from "@parity/product-lab/domain/lab/resolved-config";
+import { card, chip, codeTokens, copyText, empty, h, patchChildren, searchField } from "./ui.js";
+const SOURCE_TONE = { yours: "accent", default: "neutral", detected: "info", advanced: "warning", machine: "neutral" };
+function row(entry) {
+    const words = CONFIG_SOURCE_WORDS[entry.source];
+    const value = configValueText(entry.value);
+    const from = [entry.why, entry.at].filter(Boolean).join(" · ");
+    const off = configEntryOff(entry);
+    const unset = entry.set === false;
+    return h("div", { class: `config-row${off ? " is-off" : ""}`, "data-key": entry.key, "data-source": entry.source, ...(off ? { "data-off": unset ? "unset" : "off", title: `${entry.label}: ${unset ? "not set here" : "off"}${entry.why ? ` (${entry.why})` : ""}.${entry.change ? ` ${unset ? "Set it" : "Add to lab.config.ts"}: ${entry.change}` : ""}` } : {}) }, h("div", { class: "config-row-head" }, h("strong", { class: "config-label" }, entry.label), entry.set === undefined ? null : chip(unset ? "not set" : "set", { tone: unset ? "warning" : "neutral", title: unset ? "A variable it names is not set in the process that loaded the lab" : "Every variable it names is set here (never shown)" }), chip(words.label, { tone: SOURCE_TONE[entry.source], title: words.title })), h("p", { class: "config-value", title: value }, value), h("p", { class: "config-from" }, h("code", {}, entry.key), from ? ` · ${from}` : ""), entry.change ? h("div", { class: "config-change" }, h("span", {}, unset ? "Set it:" : off ? "Turn it on:" : "Change it:"), h("code", {}, ...codeTokens(entry.change)), copyText(entry.change, "Copy the line")) : null, entry.options?.length ? h("p", { class: "config-options", title: "The other values this takes" }, "Also: ", ...entry.options.map((option) => h("code", {}, option))) : null);
+}
+export function createConfigView(context) {
+    const pane = context.pane("config");
+    let query = "";
+    let drawn = false;
+    let last;
+    const search = searchField("Find a value, key or source", (value) => { query = value.trim().toLowerCase(); if (drawn)
+        draw(last); });
+    search.id = "config-search";
+    const body = h("div", { class: "config-groups" });
+    pane.append(h("section", { class: "config-view", id: "config-view" }, search, body));
+    const shows = (entry) => !query || [entry.key, entry.label, entry.source, configValueText(entry.value, 400), entry.why ?? ""].some((text) => text.toLowerCase().includes(query));
+    function draw(config) {
+        drawn = true;
+        last = config;
+        if (!config) {
+            patchChildren(body, [empty({ icon: "code", title: "No config to show", body: "This lab's loader gives no resolved config. product-lab config says the same from a terminal." })]);
+            return;
+        }
+        const groups = CONFIG_GROUPS.map((group) => ({ group, entries: config.entries.filter((entry) => configGroupOf(entry.key) === group.id && shows(entry)) })).filter((item) => item.entries.length);
+        patchChildren(body, [
+            h("p", { class: "config-intro" }, config.shape === "definition"
+                ? "An older defineLab({ apps, environments }): every value is written in lab.config.ts."
+                : "Every value the lab runs with: yours (written in lab.config.ts), the lab's default, or detected from your app; and the line that changes it."),
+            ...(groups.length ? groups.map(({ group, entries }) => Object.assign(card({ title: group.title, class: "config-group", body: entries.map(row) }), { id: `config-group-${group.id}` })) : [empty({ icon: "search", title: "Nothing matches", body: `No value, key or source contains “${query}”.` })]),
+        ]);
+    }
+    return { render: (value) => draw(value.registry?.config), stopped: draw };
+}