mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-09 14:03:33 +09:00
Oleg Isonen
d9e3394c18
Closes #6470 Closes #4806 Closes #4392 Closes #4804 Closes #4616 Closes #4863 Closes #4912 Ref #1798 Advanced styles now uses a CSS block editor in the panel and a centered editor. Local declarations are editable. Cascaded or inherited, preset, and global declarations are grouped below them and are read-only. The editor suggests properties and values, highlights search matches, shows source details and color swatches, and previews valid local edits on the canvas. Keyframe CSS declarations use the reusable local block editor. The old Add styles field, property-row editor, declaration menu actions, and Navigator CSS Preview are removed. ### Delivery checklist - [x] Edit and validate local CSS declarations, including shorthand display and likely typo hints - [x] Show other style sources with source colors, tooltips, and read-only protection - [x] Add search navigation, color swatches, and the centered editor shortcut - [x] Reuse the block editor for animation keyframes and preserve transform controls - [x] Preserve uploaded background layers when editing gradients or reordering layers - [x] Remove superseded editor and Navigator UI - [x] Review and update the Style panel and Navigator guides - [x] Remove the outdated CSS Preview sentence from the Builder anatomy guide - [x] Rename the stale Code view test title to match the Advanced editor - [x] Regenerate fixtures and keep the Vercel build manifest through regeneration - [x] Resolve review threads and verify required CI ### Implementation notes Styles remain stored as individual properties; equivalent shorthand text is reconstructed for editing. Unknown property names become CSS variables unless they resemble a known property, in which case the editor warns and skips the typo. Editing is limited to the selected local style block; read-only source groups remain visible for reference. Existing uploaded image and hidden background layers are retained when neighboring layers change. No schema migration is needed. The Vercel manifest setting lives in the React Router template, so fixture regeneration produces a clean worktree. The shared template also generates the setting for the Docker fixture. ### Verification On commit `7fb44d358`, both fixture checks, `check-size`, the main workflow, all ten end-to-end shards, and the label-approved visual comparison passed. The fixture regeneration, Vercel build, Builder typecheck, focused lint, and formatting checks passed locally before the final documentation and test-title cleanup; `git diff --check` passed afterward. No local tests were run for the final cleanup, which changes no behavior.
181 lines
7.1 KiB
JSON
181 lines
7.1 KiB
JSON
{
|
|
"name": "@webstudio-is/builder",
|
|
"version": "0.0.0",
|
|
"private": true,
|
|
"description": "Webstudio Builder UI as a service",
|
|
"type": "module",
|
|
"scripts": {
|
|
"prebuild": "pnpm --filter=@webstudio-is/http-client... build && which remix",
|
|
"build": "remix vite:build",
|
|
"css-to-ws": "tsx --conditions=webstudio ../../packages/css-data/bin/css-to-ws.ts",
|
|
"build:webflow-presets": "pnpm css-to-ws ./app/shared/copy-paste/plugin-webflow/style-presets.css ./app/shared/copy-paste/plugin-webflow/__generated__/style-presets.ts",
|
|
"build:tailwind-preflight": "tsx --conditions=webstudio ./app/shared/tailwind/preflight-bin.ts && oxfmt ./app/shared/tailwind/__generated__/preflight.ts",
|
|
"generate-server-only-api-metadata": "tsx --conditions=webstudio --tsconfig tsconfig.json --import ../../scripts/register-react-global.ts ./scripts/generate-server-only-api-metadata.ts && (cd ../../packages/protocol && oxfmt src/builder-api/__generated__/server-only-router-operation-metadata.ts)",
|
|
"start": "remix-serve build/server/index.js",
|
|
"backend": "bash ./backend/run.sh",
|
|
"dev": "remix vite:dev",
|
|
"dev:local": "bash ./dev/run-local.sh",
|
|
"dev:auth": "DEBUG=ws:* remix vite:dev",
|
|
"e2e:ci": "node --env-file=.env --env-file-if-exists=.env.development --conditions=webstudio ./node_modules/@playwright/test/cli.js test --config=playwright.config.ts",
|
|
"e2e": "bash ./e2e/run.sh run",
|
|
"e2e:dev:backend": "bash ./e2e/run.sh dev-backend",
|
|
"e2e:dev": "bash ./e2e/run.sh dev",
|
|
"e2e:schema-cache": "bash ./e2e/run.sh schema-cache",
|
|
"e2e:supabase-migrations": "bash ./e2e/run.sh supabase-migrations",
|
|
"e2e:ci:shard": "bash ./e2e/run.sh ci-shard",
|
|
"typecheck": "tsc --noEmit --emitDeclarationOnly false",
|
|
"test": "vitest run",
|
|
"test:browser": "vitest run --project '*-browser-*'"
|
|
},
|
|
"dependencies": {
|
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
|
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
"@bomb.sh/args": "^0.3.1",
|
|
"@codemirror/autocomplete": "^6.18.6",
|
|
"@codemirror/commands": "^6.8.0",
|
|
"@codemirror/lang-css": "^6.3.1",
|
|
"@codemirror/lang-html": "^6.4.9",
|
|
"@codemirror/lang-javascript": "^6.2.3",
|
|
"@codemirror/lang-markdown": "^6.3.2",
|
|
"@codemirror/language": "^6.11.0",
|
|
"@codemirror/language-data": "^6.5.2",
|
|
"@codemirror/lint": "^6.8.5",
|
|
"@codemirror/search": "6.5.11",
|
|
"@codemirror/state": "^6.5.2",
|
|
"@codemirror/view": "^6.36.4",
|
|
"@emotion/hash": "^0.9.2",
|
|
"@floating-ui/dom": "^1.6.13",
|
|
"@lexical/headless": "^0.21.0",
|
|
"@lexical/link": "^0.21.0",
|
|
"@lexical/react": "^0.21.0",
|
|
"@lexical/selection": "^0.21.0",
|
|
"@lexical/utils": "^0.21.0",
|
|
"@lezer/common": "^1.2.3",
|
|
"@lezer/css": "^1.1.11",
|
|
"@lezer/highlight": "^1.2.1",
|
|
"@nanostores/react": "^0.8.0",
|
|
"@nkzw/use-relative-time": "^1.1.0",
|
|
"@radix-ui/react-select": "^2.2.2",
|
|
"@radix-ui/react-tooltip": "^1.2.4",
|
|
"@react-aria/interactions": "^3.23.0",
|
|
"@react-aria/utils": "^3.27.0",
|
|
"@remix-run/express": "^2.16.5",
|
|
"@remix-run/node": "^2.16.5",
|
|
"@remix-run/react": "^2.16.5",
|
|
"@remix-run/serve": "^2.16.5",
|
|
"@remix-run/server-runtime": "^2.16.5",
|
|
"@trpc/client": "^10.45.2",
|
|
"@trpc/server": "^10.45.2",
|
|
"@tsndr/cloudflare-worker-jwt": "^2.5.3",
|
|
"@tus/file-store": "^2.1.0",
|
|
"@tus/s3-store": "^2.0.4",
|
|
"@tus/server": "^2.4.1",
|
|
"@unocss/core": "66.6.8",
|
|
"@vercel/remix": "2.15.3",
|
|
"@webstudio-is/asset-uploader": "workspace:*",
|
|
"@webstudio-is/authorization-token": "workspace:*",
|
|
"@webstudio-is/content-engine": "workspace:*",
|
|
"@webstudio-is/css-data": "workspace:*",
|
|
"@webstudio-is/css-engine": "workspace:*",
|
|
"@webstudio-is/dashboard": "workspace:*",
|
|
"@webstudio-is/design-system": "workspace:*",
|
|
"@webstudio-is/domain": "workspace:*",
|
|
"@webstudio-is/expression": "workspace:*",
|
|
"@webstudio-is/feature-flags": "workspace:*",
|
|
"@webstudio-is/fonts": "workspace:*",
|
|
"@webstudio-is/html-data": "workspace:*",
|
|
"@webstudio-is/http-client": "workspace:*",
|
|
"@webstudio-is/icons": "workspace:*",
|
|
"@webstudio-is/image": "workspace:*",
|
|
"@webstudio-is/plans": "workspace:*",
|
|
"@webstudio-is/postgrest": "workspace:*",
|
|
"@webstudio-is/project": "workspace:*",
|
|
"@webstudio-is/project-build": "workspace:*",
|
|
"@webstudio-is/project-migrations": "workspace:*",
|
|
"@webstudio-is/protocol": "workspace:*",
|
|
"@webstudio-is/query-builder": "workspace:*",
|
|
"@webstudio-is/query-builder-react": "workspace:*",
|
|
"@webstudio-is/react-sdk": "workspace:*",
|
|
"@webstudio-is/sdk": "workspace:*",
|
|
"@webstudio-is/sdk-components-animation": "workspace:*",
|
|
"@webstudio-is/sdk-components-react": "workspace:*",
|
|
"@webstudio-is/sdk-components-react-radix": "workspace:*",
|
|
"@webstudio-is/sdk-components-registry": "workspace:*",
|
|
"@webstudio-is/sync-client": "workspace:*",
|
|
"@webstudio-is/template": "workspace:*",
|
|
"@webstudio-is/trpc-interface": "workspace:*",
|
|
"@webstudio-is/wsauth": "workspace:*",
|
|
"args-tokenizer": "^0.3.0",
|
|
"bcp-47": "^2.1.0",
|
|
"change-case": "^5.4.4",
|
|
"colorjs.io": "^0.6.1",
|
|
"cookie": "^1.0.1",
|
|
"css-tree": "^3.2.1",
|
|
"debug": "^4.3.7",
|
|
"downshift": "^6.1.7",
|
|
"entrijs": "^0.0.11",
|
|
"express": "^4.21.1",
|
|
"fast-deep-equal": "^3.1.3",
|
|
"fastest-levenshtein": "^1.0.16",
|
|
"immer": "^10.1.1",
|
|
"immerhin": "^0.10.0",
|
|
"isbot": "^5.1.25",
|
|
"lexical": "^0.21.0",
|
|
"match-sorter": "^8.0.0",
|
|
"micromark": "^4.0.2",
|
|
"micromark-extension-gfm": "^3.0.0",
|
|
"nanoevents": "^9.1.0",
|
|
"nanoid": "^5.1.5",
|
|
"nanostores": "^0.11.3",
|
|
"picocolors": "^1.1.1",
|
|
"pretty-bytes": "^6.1.1",
|
|
"range-parser": "^1.2.1",
|
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
"react-error-boundary": "^5.0.0",
|
|
"remix-auth": "^3.7.0",
|
|
"remix-auth-form": "^1.5.0",
|
|
"remix-auth-github": "^1.7.0",
|
|
"remix-auth-google": "^2.0.0",
|
|
"remix-auth-oauth2": "^2.3.0",
|
|
"shallow-equal": "^3.1.0",
|
|
"slugify": "^1.6.6",
|
|
"strip-indent": "^4.0.0",
|
|
"tiny-invariant": "^1.3.3",
|
|
"title-case": "^4.3.2",
|
|
"undici": "^7.29.0",
|
|
"urlpattern-polyfill": "^10.1.0",
|
|
"use-debounce": "^10.0.4",
|
|
"valid-filename": "^4.0.0",
|
|
"warn-once": "^0.1.1",
|
|
"zod": "^4.4.3",
|
|
"zod-validation-error": "^5.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@playwright/test": "1.50.1",
|
|
"@remix-run/dev": "^2.16.5",
|
|
"@types/debug": "^4.1.12",
|
|
"@types/dom-navigation": "^1.0.5",
|
|
"@types/express": "^4.17.21",
|
|
"@types/range-parser": "^1.2.7",
|
|
"@types/react": "^18.2.70",
|
|
"@types/react-dom": "^18.2.25",
|
|
"@unocss/preset-wind4": "^66.6.8",
|
|
"@vitest/browser": "3.1.1",
|
|
"@vitest/coverage-v8": "3.1.1",
|
|
"@webstudio-is/tsconfig": "workspace:*",
|
|
"css.escape": "^1.5.1",
|
|
"fast-glob": "^3.3.2",
|
|
"msw": "^2.13.2",
|
|
"playwright": "1.50.1",
|
|
"react-router-dom": "^6.30.0",
|
|
"react-test-renderer": "18.3.0-canary-14898b6a9-20240318",
|
|
"type-fest": "^4.37.0",
|
|
"typescript": "7.0.2",
|
|
"vite": "^6.3.4",
|
|
"vitest": "3.1.1"
|
|
},
|
|
"sideEffects": false,
|
|
"license": "AGPL-3.0-or-later"
|
|
}
|