Move typography scale controls into Typography Studio

[jackgranatowski]

Motivation

• Consolidate typography editing into a focused Studio UI with panels for headings, body text, fonts, scale and advanced options so users can tune the full type system in one place.
• Surface the fluid type/display generators inside the Studio where users can preview and apply changes in-context rather than in the general Domain panel.
• Provide per-heading and grouped text/font controls to mirror curated tooling and make token editing more discoverable.

Description

• Added a new panel structure in TypographyStudio.svelte with panels Headings, Text, Fonts, Scale and Advanced, including grouped token lists for body, prose, wrap, line-height, measure, font stacks, features and advanced outputs, and heading-level toggles (All, H1–H6).
• Moved the type and display scale generator into the Studio Scale panel by using <ScaleGenerator kinds={['type','display']} /> only inside the Studio.
• Updated the Studio preview to show the full heading hierarchy and conditional text/code previews for the new panels, and added studio-level controls via StudioControls and ScaleGenerator as appropriate.
• Prevented the typography scale generator from rendering in the broader domain UI by changing the generator visibility condition in DomainPanel.svelte to skip typography when the visual studio is in use (generators.length > 0 && !(usesVisualStudio && domain.id === 'typography')).
• Updated component tests in configurator/tests-components/studios.test.js to reflect the new Studio panel labels and added a longer timeout for the mounting smoke checks.

Testing

• Ran the project's test suite with npm --prefix configurator test -- --run. All unit and component tests completed successfully (component smoke tests and unit tests passed).
• Verified the updated component smoke tests exercise the new TypographyStudio panels and heading scope UI and that the ScaleGenerator is no longer rendered outside the Studio.
• Manual review of modified files: configurator/src/components/editors/TypographyStudio.svelte, configurator/src/components/DomainPanel.svelte, and configurator/tests-components/studios.test.js completed without regressions in tests.

---

Codex Task

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 28 minutes and 51 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 349eccc2-0454-4eed-affd-4f545b2abf5f

📥 Commits

Reviewing files that changed from the base of the PR and between f391ec2 and ec70ea0.

📒 Files selected for processing (3)

• configurator/src/components/DomainPanel.svelte
• configurator/src/components/editors/TypographyStudio.svelte
• configurator/tests-components/studios.test.js

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/add-typography-panels-to-typography-studio

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[qodo-code-review]

PR Summary by Qodo

Move typography scale controls into Typography Studio
✨ Enhancement 🧪 Tests 🕐 40+ Minutes

Description

• Restructure Typography Studio into focused panels for headings, text, fonts, scale, and advanced
 controls.
• Render the type/display ScaleGenerator only inside the Studio Scale panel.
• Prevent duplicate typography generators in DomainPanel and update studio smoke tests.

Diagram

graph TD
  DP["DomainPanel.svelte"] --> G{"Show generators?"} -->|"yes"| SG["ScaleGenerator.svelte"]
  G -->|"no (Typography + Visual Studio)"| NR["Skip render"]
  TS["TypographyStudio.svelte"] -->|"Scale panel"| SG -->|"writes"| OV["overrides store"]
  TS --> SC["StudioControls.svelte"]
  TS --> RSG["resolveStudioGroups()"]
  TS --> OV

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Keep panel definitions in studioSchema.js (schema-driven panels)

• ➕ Avoids duplicating panel metadata in the component
• ➕ Makes panel structure reusable and easier to unit test independently
• ➕ Keeps TypographyStudio.svelte focused on rendering/interaction only
• ➖ Harder to express the new heading-scope logic and special-case Scale panel rendering purely via schema
• ➖ May require schema extensions (e.g., per-panel custom renderers) that add complexity

2. Make ScaleGenerator a normal StudioControls group (no special-case panel)

• ➕ More uniform rendering model (everything is a group)
• ➕ Could reduce conditional UI branches in TypographyStudio
• ➖ ScaleGenerator is not a token list, so it would require awkward adapter APIs
• ➖ Blurs the distinction between generator workflows and direct token editing

3. Keep DomainPanel generator but hide when Studio is active via routing/state (instead of per-domain check)

• ➕ Centralizes the “Studio owns editing” rule in one place
• ➕ Could generalize better as more studios take over domains
• ➖ Requires broader refactor of DomainPanel responsibilities/state flow
• ➖ Higher risk and larger scope than needed for this change

Recommendation: The PR’s approach (explicitly mounting ScaleGenerator only in TypographyStudio and adding a narrow DomainPanel guard) is the right scope and keeps ownership clear. If the panel taxonomy is expected to evolve, consider a follow-up to move PANELS/group definitions back into studioSchema.js once the required schema hooks for heading scopes and non-token panels are clear.

Files changed (3) +78 / -25

Enhancement (1) +74 / -21

TypographyStudio.svelteAdd panelized Typography Studio UI and embed the ScaleGenerator +74/-21

Add panelized Typography Studio UI and embed the ScaleGenerator

• Replaces the previous schema-driven typography panels with explicit panels (Headings/Text/Fonts/Scale/Advanced) and curated token groupings. Adds heading-level scoping (All, H1–H6), expands the specimen to show the full heading hierarchy, and renders ScaleGenerator only for the Scale panel while other panels use StudioControls.

configurator/src/components/editors/TypographyStudio.svelte

Bug fix (1) +1 / -1

DomainPanel.svelteHide typography generators when the visual studio is active +1/-1

Hide typography generators when the visual studio is active

• Tightens the derived hasGenerators condition so scale generators do not render for the typography domain when usesVisualStudio is enabled. This prevents the typography scale generator from appearing both in DomainPanel and in TypographyStudio.

configurator/src/components/DomainPanel.svelte

Tests (1) +3 / -3

studios.test.jsUpdate studio smoke tests for new Typography Studio panels +3/-3

Update studio smoke tests for new Typography Studio panels

• Adjusts expected Typography Studio tab labels and descriptive copy assertions to match the new panel structure. Increases the async mounting smoke-test timeout to reduce flakiness during studio render checks.

configurator/tests-components/studios.test.js

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 5 rules

1. Preview not token-driven 🐞 Bug ≡ Correctness

Description

TypographyStudio exposes controls for tokenized heading/body sizing (e.g. --sf-h1-size,
--sf-body-font-size, --sf-body-line-height) but the specimen preview hard-codes font
sizes/line-heights (clamp()/px and constants), so changes to those tokens won’t be reflected in the
preview. This undermines the new Studio panels’ ability to validate typography changes in-context.

Code

configurator/src/components/editors/TypographyStudio.svelte[R114-123]

+  h1,h2,h3,h4,h5,h6,p { margin: 0; }
  h1 { font-size: calc(clamp(42px, 7vw, 74px) * var(--type-scale, 1)); line-height: .95; text-wrap: var(--sf-heading-text-wrap, balance); letter-spacing: var(--sf-h1-letter-spacing, -.02em); }
  h2 { font-size: calc(clamp(32px, 5vw, 54px) * var(--type-scale, 1)); line-height: 1; text-wrap: var(--sf-heading-text-wrap, balance); }
  h3 { font-size: calc(clamp(24px, 3.5vw, 38px) * var(--type-scale, 1)); margin-top: 8px; }
  h4 { font-size: calc(clamp(19px, 2.6vw, 28px) * var(--type-scale, 1)); margin-top: 8px; }
+  h5 { font-size: calc(clamp(16px, 2vw, 22px) * var(--type-scale, 1)); margin-top: 8px; }
+  h6 { font-size: calc(clamp(13px, 1.6vw, 18px) * var(--type-scale, 1)); margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }
  code { display: block; margin-top: 8px; font-size: 18px; }
  p { margin-top: 12px; color: var(--sf-color-text--muted); font-size: 16px; line-height: var(--sf-leading-normal, 1.5); max-width: 68ch; text-wrap: var(--sf-body-text-wrap, pretty); }
  .mini-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

Relevance

⭐⭐⭐ High

Repo emphasizes previews reflecting live token overrides; DomainPreview/specimen work is explicitly
token-driven in PRs #371 and #385.

PR-#371
PR-#385

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

TypographyStudio’s panels now surface size/leading/etc tokens, but its specimen CSS overrides sizes
with fixed clamp()/px values; HeadingEditor demonstrates the intended token-driven specimen approach
where the preview responds to --sf-h*-* tokens.

configurator/src/components/editors/TypographyStudio.svelte[17-34]
configurator/src/components/editors/TypographyStudio.svelte[68-82]
configurator/src/components/editors/TypographyStudio.svelte[114-123]
configurator/src/components/HeadingEditor.svelte[203-213]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
TypographyStudio’s specimen preview uses hard-coded CSS for heading/body sizes and line-heights, but the StudioControls now edit those values via tokens. As a result, users can change tokens like `--sf-h1-size` / `--sf-body-font-size` and not see the specimen update, which contradicts the Studio’s purpose.

### Issue Context
There is already an established pattern for token-driven specimens in `HeadingEditor.svelte` (it uses `var(--sf-h1-size)` etc.). TypographyStudio should follow that pattern (or remove its overriding styles) so the specimen reflects edited tokens.

### Fix Focus Areas
- configurator/src/components/editors/TypographyStudio.svelte[68-82]
- configurator/src/components/editors/TypographyStudio.svelte[114-123]
- configurator/src/components/editors/TypographyStudio.svelte[17-34]

### Implementation notes
- Update TypographyStudio specimen CSS to use the actual tokens for font-size/font-weight/line-height/letter-spacing/max-width (e.g. `font-size: var(--sf-h1-size); line-height: var(--sf-h1-line-height); ...`).
- Likewise, update the paragraph/code specimen to use `--sf-body-font-size`, `--sf-body-line-height`, and `--sf-code-font-size` (as appropriate), instead of fixed `16px/18px`.
- Consider removing the custom `--type-scale` multiplication if it conflicts with the framework’s own derived sizing tokens, or ensure it matches the token model.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Dead typography schema export 🐞 Bug ⚙ Maintainability

Description

TypographyStudio now defines its panel schema inline, but studioSchema.js still exports
TYPOGRAPHY_PANELS (now unused), creating duplicated sources of truth and increasing drift risk for
future token/panel updates.

Code

configurator/src/components/editors/TypographyStudio.svelte[R2-15]

  import { overrides } from '../../lib/store.svelte.js';
-  import { TYPOGRAPHY_PANELS, resolveStudioGroups } from '../../lib/studioSchema.js';
+  import { resolveStudioGroups } from '../../lib/studioSchema.js';
+  import ScaleGenerator from '../ScaleGenerator.svelte';
  import StudioFrame from './StudioFrame.svelte';
  import StudioControls from './StudioControls.svelte';

-  let active = $state('Overview');
-  const panel = $derived(TYPOGRAPHY_PANELS.find((p) => p.id === active) ?? TYPOGRAPHY_PANELS[0]);
-  const groups = $derived(resolveStudioGroups([{ title: panel.label, hint: panel.description, tokens: panel.tokens }]));
+  const HEADING_LEVELS = ['All', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+  const PANELS = [
+    { id: 'Headings', label: 'Headings', description: 'Framework-style controls for h1–h6 aliases, rhythm, tracking and wrapping.' },
+    { id: 'Text', label: 'Text', description: 'Body copy, prose rhythm, text wrapping, line-height and reading measure.' },
+    { id: 'Fonts', label: 'Fonts', description: 'Font stacks for body, headings and mono, plus OpenType feature and variation settings.' },
+    { id: 'Scale', label: 'Scale', description: 'Generate the fluid type and display ramps directly inside Typography Studio.' },
+    { id: 'Advanced', label: 'Advanced', description: 'Fine tune weights, display line heights, numeric variants and size-specific outputs.' },
+  ];

Relevance

⭐⭐⭐ High

Team regularly accepts cleanup removing unused code (e.g., unused import/selector removals in PRs
#315, #402).

PR-#315
PR-#402

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

TypographyStudio removed use of TYPOGRAPHY_PANELS and now defines PANELS locally, while
studioSchema.js still defines/exports TYPOGRAPHY_PANELS with no remaining in-repo references.

configurator/src/components/editors/TypographyStudio.svelte[2-15]
configurator/src/lib/studioSchema.js[3-34]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`TYPOGRAPHY_PANELS` remains exported from `studioSchema.js`, but TypographyStudio no longer imports/uses it and instead defines `PANELS`/token groups inline. This duplication invites drift.

### Issue Context
A repo-wide search shows `TYPOGRAPHY_PANELS` is only referenced in `studioSchema.js` after this change.

### Fix Focus Areas
- configurator/src/components/editors/TypographyStudio.svelte[2-15]
- configurator/src/lib/studioSchema.js[3-34]

### Implementation options
- Option A (cleanup): remove `TYPOGRAPHY_PANELS` export if it’s no longer used anywhere.
- Option B (preferred centralization): move the new Typography Studio panel/group definitions into `studioSchema.js` and import them into TypographyStudio, keeping a single source of truth.
- If you must keep it for backward compatibility, add a comment/deprecation note explaining why it remains and what should use it.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[qodo-code-review]

CI Feedback 🧐

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: Configurator tests

Failed stage: Run npm run test:e2e [❌]

Failed test name: tests-e2e/generator.spec.js:14:1 › type generator writes engine scalars only

Failure summary: The action failed because Playwright E2E tests exited with code 1 after 4 Chromium test failures (unit tests passed; svelte-check reported only warnings). - tests-e2e/generator.spec.js:14:1 (type generator writes engine scalars only) timed out (30s) at tests-e2e/generator.spec.js:18:94 while waiting to find and interact with the enabled select for Ratio (mobile): - locator('.gen').first().locator('.ctl').filter({ hasText: 'Ratio (mobile)' }).locator('select:not([disabled])').selectOption('1.125') - tests-e2e/generator.spec.js:27:1 (display tab: ratio selects are read-only (shared with type)) failed assertion at tests-e2e/generator.spec.js:31:53 because locator('.gen').nth(1).locator('select[disabled]') matched 0 elements (expected 2) within 5s, suggesting the expected disabled selects were not rendered or selectors/UI changed. - tests-e2e/generator.spec.js:35:1 (viewport range is shared: space sets it, type seeds it, reset clears it) failed at tests-e2e/generator.spec.js:45:84 because the input for Viewport max was not found, causing toHaveValue('100') to time out, indicating missing/renamed control or the page not in the expected state. - tests-e2e/undo-redo.spec.js:9:1 (5-step mixed chain unwinds and replays exactly) timed out (30s) at tests-e2e/undo-redo.spec.js:26:94 on the same Ratio (mobile) select interaction as above, implying the typography generator UI element is absent/disabled/unreachable in CI.

Relevant error logs: 1: ##[group]Runner Image Provisioner 2: Hosted Compute Agent ... 1096: type: 'test' 1097: ... 1098: 1..3 1099: ok 28 - bestContrastVsBW 1100: --- 1101: duration_ms: 0.990977 1102: type: 'suite' 1103: ... 1104: # Subtest: wcagLevel 1105: # Subtest: classifies known thresholds 1106: ok 1 - classifies known thresholds 1107: --- 1108: duration_ms: 0.29745 1109: type: 'test' 1110: ... 1111: # Subtest: non-finite ratios fail 1112: ok 2 - non-finite ratios fail 1113: --- ... 3965: ok 7 - storage key is versioned 3966: --- 3967: duration_ms: 0.312929 3968: type: 'test' 3969: ... 3970: 1..7 3971: ok 88 - sanitiseUiState 3972: --- 3973: duration_ms: 4.832425 3974: type: 'suite' 3975: ... 3976: 1..88 3977: # tests 525 3978: # suites 88 3979: # pass 525 3980: # fail 0 3981: # cancelled 0 ... 4022: Loading svelte-check in workspace: /home/runner/work/SLASHED/SLASHED/configurator 4023: Getting Svelte diagnostics... 4024: /home/runner/work/SLASHED/SLASHED/configurator/�[32msrc/components/ControlSection.svelte�[39m:3:48 4025: �[33mWarn�[39m: This reference only captures the initial value of `defaultOpen`. Did you mean to reference it inside a derived instead? 4026: https://svelte.dev/e/state_referenced_locally (svelte) 4027: �[36m let { title, hint = '', modifiedCount = 0, defaultOpen = true, children } = $props(); 4028: let open = $state(window.innerWidth >= 768 ? �[35mdefaultOpen�[36m : false); 4029: </script>�[39m 4030: /home/runner/work/SLASHED/SLASHED/configurator/�[32msrc/components/DomainPanel.svelte�[39m:196:9 4031: �[33mWarn�[39m: `<svelte:component>` is deprecated in runes mode — components are dynamic by default 4032: https://svelte.dev/e/svelte_component_deprecated (svelte) 4033: �[36m {#if Studio} 4034: �[35m<svelte:component this={Studio} />�[36m 4035: {/if}�[39m 4036: ==================================== 4037: �[33msvelte-check found 0 errors and 2 warnings in 2 files 4038: �[39m ... 5331: �[1A�[2K[3/101] [chromium] › tests-e2e/a11y.spec.js:46:1 › every button exposes an accessible name 5332: �[1A�[2K[4/101] [chromium] › tests-e2e/a11y.spec.js:59:1 › segmented controls expose aria-pressed; info buttons aria-expanded 5333: �[1A�[2K[5/101] [chromium] › tests-e2e/a11y.spec.js:75:1 › search filters the catalogue and shows an empty state for no match 5334: �[1A�[2K[6/101] [chromium] › tests-e2e/axe.spec.js:32:3 › no structural a11y violations on the main routes (dark) 5335: �[1A�[2K[7/101] [chromium] › tests-e2e/axe.spec.js:32:3 › no structural a11y violations on the main routes (light) 5336: �[1A�[2K[8/101] [chromium] › tests-e2e/dogfood.spec.js:26:1 › chrome aliases are sourced from framework tokens 5337: �[1A�[2K[9/101] [chromium] › tests-e2e/dogfood.spec.js:39:1 › overrides restyle the preview stage but never the chrome 5338: �[1A�[2K[10/101] [chromium] › tests-e2e/dogfood.spec.js:57:1 › chrome theme toggle flips the framework [data-theme] and repaints 5339: �[1A�[2K[11/101] [chromium] › tests-e2e/domain-preview.spec.js:32:1 › preview hub follows every sidebar domain, including tool domains 5340: �[1A�[2K[12/101] [chromium] › tests-e2e/domain-preview.spec.js:44:1 › Layout panel renders proportional ContainerBars instead of the old inline preview card 5341: �[1A�[2K[13/101] [chromium] › tests-e2e/domain-preview.spec.js:62:1 › the preview hub reflects a live override 5342: �[1A�[2K[14/101] [chromium] › tests-e2e/generator.spec.js:14:1 › type generator writes engine scalars only 5343: �[1A�[2K[15/101] (retries) [chromium] › tests-e2e/generator.spec.js:14:1 › type generator writes engine scalars only (retry #1) 5344: �[1A�[2K 1) [chromium] › tests-e2e/generator.spec.js:14:1 › type generator writes engine scalars only ───── 5345: �[31mTest timeout of 30000ms exceeded.�[39m 5346: Error: locator.selectOption: Test timeout of 30000ms exceeded. 5347: Call log: 5348: �[2m - waiting for locator('.gen').first().locator('.ctl').filter({ hasText: 'Ratio (mobile)' }).locator('select:not([disabled])')�[22m 5349: 16 | await sideItem(page, 'Typography').click(); 5350: 17 | const gen = page.locator('.gen').first(); 5351: > 18 | await gen.locator('.ctl', { hasText: 'Ratio (mobile)' }).locator('select:not([disabled])').selectOption('1.125'); 5352: | ^ 5353: 19 | await APPLY(gen).click(); 5354: 20 | const map = await readOverrides(page); 5355: 21 | expect(map['--sf-text-ratio-min']).toBe('1.125'); 5356: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/generator.spec.js:18:94 5357: Error Context: test-results/generator-type-generator-writes-engine-scalars-only-chromium/error-context.md 5358: Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── 5359: �[31mTest timeout of 30000ms exceeded.�[39m 5360: Error: locator.selectOption: Test timeout of 30000ms exceeded. 5361: Call log: 5362: �[2m - waiting for locator('.gen').first().locator('.ctl').filter({ hasText: 'Ratio (mobile)' }).locator('select:not([disabled])')�[22m 5363: 16 | await sideItem(page, 'Typography').click(); 5364: 17 | const gen = page.locator('.gen').first(); 5365: > 18 | await gen.locator('.ctl', { hasText: 'Ratio (mobile)' }).locator('select:not([disabled])').selectOption('1.125'); 5366: | ^ 5367: 19 | await APPLY(gen).click(); 5368: 20 | const map = await readOverrides(page); 5369: 21 | expect(map['--sf-text-ratio-min']).toBe('1.125'); 5370: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/generator.spec.js:18:94 5371: Error Context: test-results/generator-type-generator-writes-engine-scalars-only-chromium-retry1/error-context.md 5372: �[1A�[2K[16/101] [chromium] › tests-e2e/generator.spec.js:27:1 › display tab: ratio selects are read-only (shared with type) 5373: �[1A�[2K[17/101] (retries) [chromium] › tests-e2e/generator.spec.js:27:1 › display tab: ratio selects are read-only (shared with type) (retry #1) 5374: �[1A�[2K 2) [chromium] › tests-e2e/generator.spec.js:27:1 › display tab: ratio selects are read-only (shared with type) 5375: Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveCount�[2m(�[22m�[32mexpected�[39m�[2m)�[22m failed 5376: Locator: locator('.gen').nth(1).locator('select[disabled]') ... 5378: Received: �[31m0�[39m 5379: Timeout: 5000ms 5380: Call log: 5381: �[2m - Expect "toHaveCount" with timeout 5000ms�[22m 5382: �[2m - waiting for locator('.gen').nth(1).locator('select[disabled]')�[22m 5383: �[2m 14 × locator resolved to 0 elements�[22m 5384: �[2m - unexpected value "0"�[22m 5385: 29 | await sideItem(page, 'Typography').click(); 5386: 30 | const display = page.locator('.gen').nth(1); 5387: > 31 | await expect(display.locator('select[disabled]')).toHaveCount(2); 5388: | ^ 5389: 32 | await expect(display.locator('.gen__hint').first()).toContainText('reuses the type ratios'); 5390: 33 | }); 5391: 34 | 5392: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/generator.spec.js:31:53 5393: Error Context: test-results/generator-display-tab-rati-18399-read-only-shared-with-type--chromium/error-context.md 5394: Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── 5395: Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveCount�[2m(�[22m�[32mexpected�[39m�[2m)�[22m failed 5396: Locator: locator('.gen').nth(1).locator('select[disabled]') ... 5398: Received: �[31m0�[39m 5399: Timeout: 5000ms 5400: Call log: 5401: �[2m - Expect "toHaveCount" with timeout 5000ms�[22m 5402: �[2m - waiting for locator('.gen').nth(1).locator('select[disabled]')�[22m 5403: �[2m 14 × locator resolved to 0 elements�[22m 5404: �[2m - unexpected value "0"�[22m 5405: 29 | await sideItem(page, 'Typography').click(); 5406: 30 | const display = page.locator('.gen').nth(1); 5407: > 31 | await expect(display.locator('select[disabled]')).toHaveCount(2); 5408: | ^ 5409: 32 | await expect(display.locator('.gen__hint').first()).toContainText('reuses the type ratios'); 5410: 33 | }); 5411: 34 | 5412: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/generator.spec.js:31:53 5413: Error Context: test-results/generator-display-tab-rati-18399-read-only-shared-with-type--chromium-retry1/error-context.md 5414: �[1A�[2K[18/101] [chromium] › tests-e2e/generator.spec.js:35:1 › viewport range is shared: space sets it, type seeds it, reset clears it 5415: �[1A�[2K[19/101] (retries) [chromium] › tests-e2e/generator.spec.js:35:1 › viewport range is shared: space sets it, type seeds it, reset clears it (retry #1) 5416: �[1A�[2K 3) [chromium] › tests-e2e/generator.spec.js:35:1 › viewport range is shared: space sets it, type seeds it, reset clears it 5417: Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveValue�[2m(�[22m�[32mexpected�[39m�[2m)�[22m failed 5418: Locator: locator('.gen').first().locator('.ctl').filter({ hasText: 'Viewport max' }).locator('input') 5419: Expected: �[32m"100"�[39m 5420: Timeout: 5000ms 5421: Error: element(s) not found 5422: Call log: 5423: �[2m - Expect "toHaveValue" with timeout 5000ms�[22m 5424: �[2m - waiting for locator('.gen').first().locator('.ctl').filter({ hasText: 'Viewport max' }).locator('input')�[22m 5425: 43 | await sideItem(page, 'Typography').click(); 5426: 44 | const type = page.locator('.gen').first(); 5427: > 45 | await expect(type.locator('.ctl', { hasText: 'Viewport max' }).locator('input')).toHaveValue('100'); 5428: | ^ 5429: 46 | // Re-applying with the seeded (unchanged) viewport must not clear it. 5430: 47 | await APPLY(type).click(); 5431: 48 | expect((await readOverrides(page))['--sf-fluid-max-vw']).toBe('100'); 5432: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/generator.spec.js:45:84 5433: Error Context: test-results/generator-viewport-range-i-746bf-pe-seeds-it-reset-clears-it-chromium/error-context.md 5434: Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── 5435: Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveValue�[2m(�[22m�[32mexpected�[39m�[2m)�[22m failed 5436: Locator: locator('.gen').first().locator('.ctl').filter({ hasText: 'Viewport max' }).locator('input') 5437: Expected: �[32m"100"�[39m 5438: Timeout: 5000ms 5439: Error: element(s) not found 5440: Call log: 5441: �[2m - Expect "toHaveValue" with timeout 5000ms�[22m 5442: �[2m - waiting for locator('.gen').first().locator('.ctl').filter({ hasText: 'Viewport max' }).locator('input')�[22m 5443: 43 | await sideItem(page, 'Typography').click(); 5444: 44 | const type = page.locator('.gen').first(); 5445: > 45 | await expect(type.locator('.ctl', { hasText: 'Viewport max' }).locator('input')).toHaveValue('100'); 5446: | ^ 5447: 46 | // Re-applying with the seeded (unchanged) viewport must not clear it. 5448: 47 | await APPLY(type).click(); 5449: 48 | expect((await readOverrides(page))['--sf-fluid-max-vw']).toBe('100'); 5450: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/generator.spec.js:45:84 5451: Error Context: test-results/generator-viewport-range-i-746bf-pe-seeds-it-reset-clears-it-chromium-retry1/error-context.md 5452: �[1A�[2K[20/101] [chromium] › tests-e2e/generator.spec.js:56:1 › "Reset" returns the ramp to framework defaults ... 5471: �[1A�[2K[39/101] [chromium] › tests-e2e/preview.spec.js:84:1 › preview is live: editing a brand color repaints the sample button 5472: �[1A�[2K[40/101] [chromium] › tests-e2e/share.spec.js:16:1 › editing a token writes the config into the URL fragment 5473: �[1A�[2K[41/101] [chromium] › tests-e2e/share.spec.js:25:1 › opening a shared URL on a clean slate restores the overrides 5474: �[1A�[2K[42/101] [chromium] › tests-e2e/share.spec.js:41:1 › the Share button copies a link with the config fragment 5475: �[1A�[2K[43/101] [chromium] › tests-e2e/shell.spec.js:16:1 › lands on the Overview with the setup checklist 5476: �[1A�[2K[44/101] [chromium] › tests-e2e/shell.spec.js:29:1 › every destination renders console-clean at 3 widths 5477: �[1A�[2K[45/101] [chromium] › tests-e2e/shell.spec.js:39:1 › every category panel leads with Settings, with All variables collapsed below 5478: �[1A�[2K[46/101] [chromium] › tests-e2e/shell.spec.js:53:1 › a domain with no curated Settings shows the catalogue inline 5479: �[1A�[2K[47/101] [chromium] › tests-e2e/shell.spec.js:61:1 › [ and ] cycle Overview + every domain with wrap-around 5480: �[1A�[2K[48/101] [chromium] › tests-e2e/shell.spec.js:74:1 › domain and output format persist across reload (validated restore) 5481: �[1A�[2K[49/101] [chromium] › tests-e2e/shell.spec.js:87:1 › a legacy persisted mode field is ignored on restore 5482: �[1A�[2K[50/101] [chromium] › tests-e2e/undo-redo.spec.js:9:1 › 5-step mixed chain unwinds and replays exactly 5483: �[1A�[2K[51/101] (retries) [chromium] › tests-e2e/undo-redo.spec.js:9:1 › 5-step mixed chain unwinds and replays exactly (retry #1) 5484: �[1A�[2K 4) [chromium] › tests-e2e/undo-redo.spec.js:9:1 › 5-step mixed chain unwinds and replays exactly ─ 5485: �[31mTest timeout of 30000ms exceeded.�[39m 5486: Error: locator.selectOption: Test timeout of 30000ms exceeded. 5487: Call log: 5488: �[2m - waiting for locator('.gen').first().locator('.ctl').filter({ hasText: 'Ratio (mobile)' }).locator('select:not([disabled])')�[22m 5489: 24 | await sideItem(page, 'Typography').click(); 5490: 25 | const gen = page.locator('.gen').first(); 5491: > 26 | await gen.locator('.ctl', { hasText: 'Ratio (mobile)' }).locator('select:not([disabled])').selectOption('1.414'); 5492: | ^ 5493: 27 | await gen.locator('button', { hasText: /Apply scale/ }).first().click(); 5494: 28 | snapshots.push(stableSnapshot(await readOverrides(page))); 5495: 29 | 5496: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/undo-redo.spec.js:26:94 5497: Error Context: test-results/undo-redo-5-step-mixed-chain-unwinds-and-replays-exactly-chromium/error-context.md 5498: Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── 5499: �[31mTest timeout of 30000ms exceeded.�[39m 5500: Error: locator.selectOption: Test timeout of 30000ms exceeded. 5501: Call log: 5502: �[2m - waiting for locator('.gen').first().locator('.ctl').filter({ hasText: 'Ratio (mobile)' }).locator('select:not([disabled])')�[22m 5503: 24 | await sideItem(page, 'Typography').click(); 5504: 25 | const gen = page.locator('.gen').first(); 5505: > 26 | await gen.locator('.ctl', { hasText: 'Ratio (mobile)' }).locator('select:not([disabled])').selectOption('1.414'); 5506: | ^ 5507: 27 | await gen.locator('button', { hasText: /Apply scale/ }).first().click(); 5508: 28 | snapshots.push(stableSnapshot(await readOverrides(page))); 5509: 29 | 5510: at /home/runner/work/SLASHED/SLASHED/configurator/tests-e2e/undo-redo.spec.js:26:94 5511: Error Context: test-results/undo-redo-5-step-mixed-chain-unwinds-and-replays-exactly-chromium-retry1/error-context.md 5512: �[1A�[2K[52/101] [chromium] › tests-e2e/undo-redo.spec.js:54:1 › overrides persist across reload ... 5551: �[1A�[2K[91/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Borders @ 1280px 5552: �[1A�[2K[92/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Borders @ 768px 5553: �[1A�[2K[93/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Borders @ 390px 5554: �[1A�[2K[94/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Shadows @ 1280px 5555: �[1A�[2K[95/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Shadows @ 768px 5556: �[1A�[2K[96/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Shadows @ 390px 5557: �[1A�[2K[97/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Motion @ 1280px 5558: �[1A�[2K[98/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Motion @ 768px 5559: �[1A�[2K[99/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Motion @ 390px 5560: �[1A�[2K[100/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Effects @ 1280px 5561: �[1A�[2K[101/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Effects @ 768px 5562: �[1A�[2K[102/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Effects @ 390px 5563: �[1A�[2K[103/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Misc @ 1280px 5564: �[1A�[2K[104/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Misc @ 768px 5565: �[1A�[2K[105/101] [screenshots] › tests-e2e/screenshots.spec.js:20:7 › Studio screenshot QA › Misc @ 390px 5566: �[1A�[2K 4 failed 5567: [chromium] › tests-e2e/generator.spec.js:14:1 › type generator writes engine scalars only ────── 5568: [chromium] › tests-e2e/generator.spec.js:27:1 › display tab: ratio selects are read-only (shared with type) 5569: [chromium] › tests-e2e/generator.spec.js:35:1 › viewport range is shared: space sets it, type seeds it, reset clears it 5570: [chromium] › tests-e2e/undo-redo.spec.js:9:1 › 5-step mixed chain unwinds and replays exactly ── 5571: 2 skipped 5572: 95 passed (4.7m) 5573: ##[error]Process completed with exit code 1. 5574: Post job cleanup.