Oleg Isonen
5d34b77fac
Collection authors and editors get clearer field help, direct entry navigation, and actionable validation instead of warnings that point at the wrong place. Closes #6360 ## Implementation - [x] Keep resettable help open after a click while the label remains hovered - [x] Stop repeating the property label inside resettable help - [x] Store JSON Schema field descriptions and show them in entry forms - [x] Add an optional dynamic collection entry page for explicit canvas navigation - [x] Rename entry file actions to **Edit file** - [x] Add **Open on canvas** to entry menus and Entry settings - [x] Put the entry filename in the Entry settings title - [x] Make collection validation banners explain the problem and open the first affected entry - [x] Remove false output-only `UNOBSERVED_FIELD` warnings while keeping filter and sort diagnostics - [x] Encourage useful field descriptions in general MCP collection guidance - [x] Update Content Engine documentation - [x] Confirm no database migration is required - [x] Regenerate the affected asset-query runtime fixture - [ ] Visually review the affected Storybook states in light and dark themes - [ ] Run the complete local agent evaluation suite - [x] Run broader package and Builder checks - [x] Complete final diff review ## Technical notes - `entryPageId` lives in `collection.json` under `x-webstudio`; no database schema changes are needed. - Entry creation still leaves the current canvas unchanged. Canvas navigation only happens after the user selects **Open on canvas**. - An entry page must contain exactly one URL parameter. The entry filename supplies that parameter, so the page can identify the selected entry. - Output projection fields are schemaless and may be produced after reference resolution, so catalog absence is no longer reported there. Filter and sort fields still report catalog diagnostics. - The structured-query runtime change affects the generated `webstudio-features` fixture, which is regenerated in this PR. ## Verification - 561 Content Engine tests - 2,413 Project Build tests - 253 Design System tests - 1,794 Builder tests - 67 focused Builder regression tests after the final navigation change - 11 ResettableLabel browser tests - 128 focused MCP tests - Builder, Content Engine, Design System, and Project Build typechecks - Repository lint and package-boundary checks - Generated documentation checks - Full workspace fixture build with `pnpm -r fixtures:build` - Formatting and diff checks - New regression tests were demonstrated failing before their fixes and passing afterward ## Documentation impact - [x] Updated the Content Engine guide for field descriptions, dynamic entry pages, actionable validation, **Edit file**, and **Open on canvas** - [x] Updated MCP guidance so collection fields include editor-facing descriptions
Webstudio design system
This package implements Webstudio's internal design system. It follows the public Craft specification, which defines the universal contract for reusable Webstudio projects and design systems.
Craft and this package have different responsibilities:
- Craft defines the architecture: theme variables, semantic variables, composite Tokens, Local styles, naming, states, accessibility, extensions, and conformance.
- This package implements that architecture for Webstudio: it chooses the color seeds and scheme profiles, derives theme and semantic colors, and consumes those semantics in composite component styles.
The implementation defines each color seed once. A shared light or dark profile
transforms six theme colors into a deliberately small semantic vocabulary. Full
UI documents load @webstudio-is/design-system/global.css once at their root;
components then compose its semantics without injecting global CSS.
Component-owned custom properties stay locally typed instead of entering the
color manifest. These implementation choices are not requirements for other
Craft projects.
The global entry contains only document-wide behavior required by every full design-system UI: font faces, root theme and semantic color variables, base document defaults, and browser-native treatments such as text selection. Component styles remain with their component, while route layout, scroll locking, and feature integrations remain application-owned. The Builder canvas intentionally does not load this entry because it hosts authored user documents.
See Color tokens for the CSS source format, validation, type-only generation workflow, and naming rules.
Tests
Vitest runs pure calculations and server-rendering assertions in Node. Name
tests that require DOM layout, browser APIs, or component interaction
*.browser.test.ts or *.browser.test.tsx; Vitest Browser Mode runs those in
Chromium through Playwright.
pnpm --filter @webstudio-is/design-system test
Do not use jsdom for design-system tests. Keep pure logic in regular test files and use Browser Mode whenever browser behavior is part of the contract.