Oleg Isonen
2c9fd16689
## Description Project Settings starts with an empty response-header rule list. Users can add valid HTTP response headers for all paths (`/*`) or an Authentication-style route such as `/private/*`, and remove any configured rule. The Headers and Authentication views share the accessible rule-list form. The header form suggests standard response-header names and common values for the selected header, while accepting custom names and values. `Set-Cookie` is not suggested because a rule can store only one value per header and would replace existing cookies. `X-Powered-By`, `X-Content-Type-Options`, and `Strict-Transport-Security` are dispatcher-owned and cannot be configured. Users may configure `Content-Security-Policy`, `X-Frame-Options`, and `Referrer-Policy`; when absent, the dispatcher supplies their defaults. The SDK validates header names, values, routes, duplicates, and size limits. The CLI emits only configured rules. Customization requires Pro for custom-domain publishing, while unchanged defaults and staging remain available on Free plans. The server checks the saved production snapshot against the project owner's plan. Companion Cloud worker PR: https://github.com/webstudio-is/webstudio-saas/pull/664. Deploy its dispatcher support before exposing these settings in the Builder. Other hosts need an adapter that applies the generated rules; Webstudio Cloud dispatcher defaults do not apply automatically elsewhere. Static exports do not apply headers automatically. ## Validation - SDK, CLI, Builder browser, publish-warning, and production-build tests pass. - Builder, SDK, and CLI typechecks and lint pass. - The companion Cloud worker tests, typecheck, and lint pass. Replaces https://github.com/webstudio-is/webstudio/pull/6428 to use `headers.staging`. Closes https://github.com/webstudio-is/webstudio/issues/4748
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.