2026-02-28 19:41:34 +00:00
|
|
|
@import 'tailwindcss';
|
2026-03-01 08:03:51 +00:00
|
|
|
@import 'tw-animate-css';
|
2026-02-28 05:45:37 +00:00
|
|
|
|
2026-03-01 14:15:08 +00:00
|
|
|
@utility scrollbar-none {
|
|
|
|
|
-ms-overflow-style: none;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-04 06:35:30 +00:00
|
|
|
@utility scrollbar-thin {
|
|
|
|
|
scrollbar-width: thin;
|
|
|
|
|
scrollbar-color: var(--color-border) transparent;
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
height: 6px;
|
|
|
|
|
}
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
|
background: var(--color-border);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: var(--color-muted);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-02-27 21:54:38 +00:00
|
|
|
@theme {
|
|
|
|
|
--color-panel: #2a2a2a;
|
2026-07-10 15:16:21 +00:00
|
|
|
--color-panel-secondary: #242424;
|
2026-07-20 13:09:04 +00:00
|
|
|
--color-panel-field: #383838;
|
|
|
|
|
--color-panel-field-hover: #404040;
|
2026-07-18 04:24:50 +00:00
|
|
|
--color-panel-focus: #3b82f6;
|
|
|
|
|
--color-panel-selected: #2f6fdd;
|
|
|
|
|
--color-panel-selected-muted: #3d4450;
|
2026-02-27 21:54:38 +00:00
|
|
|
--color-canvas: #1e1e1e;
|
|
|
|
|
--color-border: #3a3a3a;
|
|
|
|
|
--color-hover: #353535;
|
|
|
|
|
--color-accent: #3b82f6;
|
2026-07-18 04:24:50 +00:00
|
|
|
--color-surface: #f0f0f0;
|
2026-02-27 21:54:38 +00:00
|
|
|
--color-muted: #888888;
|
|
|
|
|
--color-input: #1e1e1e;
|
2026-03-16 11:13:36 +00:00
|
|
|
--color-component: #9747ff;
|
2026-04-30 13:18:43 +00:00
|
|
|
--color-warning-bg: rgb(245 158 11 / 0.1);
|
|
|
|
|
--color-warning-border: rgb(245 158 11 / 0.3);
|
|
|
|
|
--color-warning-text: #fde68a;
|
|
|
|
|
--color-warning-action: #fcd34d;
|
2026-04-30 13:26:17 +00:00
|
|
|
--color-success: #4ade80;
|
2026-07-17 21:23:38 +00:00
|
|
|
--color-error: #f87171;
|
feat(code): add live JSX and HTML/CSS editing (#525)
* feat(code): isolate Design JSX execution
- Transform JSX with the existing Sucrase dependency and execute it in a disposable opaque-origin iframe worker
- Block ambient network capabilities and enforce source, timeout, output, depth, and element limits
- Validate that only bounded plain structured data returns to the application
* feat(code): add editable Design JSX
- Add a lazy CodeMirror editor with JSX syntax support, completion, diagnostics, and bounded scrolling
- Convert validated sandbox output into trusted Design JSX helpers before rendering
- Apply or insert JSX as one undoable graph transaction while preserving dirty drafts
* feat(code): localize JSX editor actions
- Add translated-message fallbacks for editing, applying, inserting, and draft state
- Document the editable JSX workflow in the unreleased changelog
* fix(code): satisfy typed sandbox validation
- Keep the sandbox document terminator literal and preserve optional selection handling under type-aware lint
* test(code): resolve sandbox probes through app aliases
* fix(code): bound sandbox results before cloning
- Enforce string, array, object, depth, element, and byte limits inside the disposable worker
- Retain host-side validation as a second structured-data boundary
* fix(code): keep JSX and HTML editing modes separate
- Switch generated Tailwind output back to OpenPencil JSX before editing
- Close the JSX editor when opening HTML/CSS import and avoid stacking both editors
* feat(code): support authored Design JSX programs
- Allow local constants, function components, arrays, conditionals, fragments, and multiple roots
- Preserve replacement positions for multiple selected roots and reject mixed-parent or locked selections
- Cover multi-root undo, redo, and all-or-nothing rollback
* feat(code): add explicit JSX view mode
- Let authors leave CodeMirror without applying a draft
- Keep the editable surface and HTML/CSS importer mutually exclusive
* feat(code): diagnose unknown JSX vocabulary
- Warn on OpenPencil elements and properties that are absent from the canonical schema
- Surface diagnostics inline through CodeMirror lint markers
* test(code): accept WebKit isolation diagnostics
- Cover the sandbox architecture against Playwright WebKit
- Accept engine-specific wording while preserving the same unavailable-window assertion
* refactor(code): consolidate Design JSX vocabulary
- Drive renderer warnings, completion, and diagnostics from one supported-property schema
- Recognize locally declared components and add focused schema and transform tests
- Replace CodeMirror basicSetup with an explicit feature set and remove the umbrella package
* fix(code): support Design JSX variable helpers
* refactor(code): unify JSX sandbox validation
* fix(code): account for complete sandbox output
* fix(code): preserve locked JSX descendants
* fix(code): preserve JSX sibling order
* fix(code): recompute JSX parent layouts
* feat(code): add live code previews
* test(code): centralize graph assertions
* fix(code): harden live preview sessions
* docs: describe live code editing
* fix(code): update editor accessibility labels
* fix(code): use theme-aware error colors
* fix(dev): stop Vite disconnect error loops
* fix(code): clarify live preview status
* fix(ui): avoid tooltip attribute warnings
* test(code): assert semantic preview status
* refactor(code): remove obsolete editor messages
* fix(code): harden preview concurrency and isolation
* fix(code): cancel stale reset previews
2026-08-15 06:48:42 +00:00
|
|
|
--color-error-bg: rgb(248 113 113 / 0.1);
|
|
|
|
|
--color-error-border: rgb(248 113 113 / 0.4);
|
2026-04-30 13:26:17 +00:00
|
|
|
--color-success-bg: #16a34a;
|
|
|
|
|
--color-success-bg-hover: #15803d;
|
|
|
|
|
--color-code-tag: #7dd3fc;
|
|
|
|
|
--color-code-attribute: #c4b5fd;
|
|
|
|
|
--color-code-string: #86efac;
|
|
|
|
|
--color-code-number: #fca5a5;
|
|
|
|
|
--color-code-punctuation: #888888;
|
|
|
|
|
--color-checkerboard: #3a3a3a;
|
|
|
|
|
--color-checkerboard-muted: #4a4a4a;
|
2026-04-30 14:50:20 +00:00
|
|
|
--color-ruler-bg: rgb(36, 36, 36);
|
|
|
|
|
--color-ruler-tick: rgb(102, 102, 102);
|
|
|
|
|
--color-ruler-text: rgb(140, 140, 140);
|
|
|
|
|
--color-ruler-label: rgb(255, 255, 255);
|
2026-02-27 21:54:38 +00:00
|
|
|
}
|
|
|
|
|
|
2026-04-30 12:52:59 +00:00
|
|
|
html[data-theme='light'] {
|
|
|
|
|
--color-panel: #ffffff;
|
2026-07-10 15:16:21 +00:00
|
|
|
--color-panel-secondary: #f7f8fa;
|
2026-07-20 13:09:04 +00:00
|
|
|
--color-panel-field: #f0f1f3;
|
|
|
|
|
--color-panel-field-hover: #e4e7ea;
|
2026-07-10 15:16:21 +00:00
|
|
|
--color-panel-focus: #2563eb;
|
2026-07-18 04:24:50 +00:00
|
|
|
--color-panel-selected: #2563eb;
|
2026-07-10 15:16:21 +00:00
|
|
|
--color-panel-selected-muted: #e5e7eb;
|
2026-04-30 12:52:59 +00:00
|
|
|
--color-canvas: #f3f4f6;
|
|
|
|
|
--color-border: #d8dce3;
|
|
|
|
|
--color-hover: #eef1f5;
|
|
|
|
|
--color-accent: #2563eb;
|
2026-07-18 04:24:50 +00:00
|
|
|
--color-surface: #1f2328;
|
2026-04-30 12:52:59 +00:00
|
|
|
--color-muted: #6b7280;
|
|
|
|
|
--color-input: #ffffff;
|
|
|
|
|
--color-component: #7c3aed;
|
2026-04-30 13:18:43 +00:00
|
|
|
--color-warning-bg: rgb(245 158 11 / 0.14);
|
|
|
|
|
--color-warning-border: rgb(245 158 11 / 0.32);
|
|
|
|
|
--color-warning-text: #92400e;
|
|
|
|
|
--color-warning-action: #78350f;
|
2026-04-30 13:26:17 +00:00
|
|
|
--color-success: #15803d;
|
2026-07-17 21:23:38 +00:00
|
|
|
--color-error: #b91c1c;
|
feat(code): add live JSX and HTML/CSS editing (#525)
* feat(code): isolate Design JSX execution
- Transform JSX with the existing Sucrase dependency and execute it in a disposable opaque-origin iframe worker
- Block ambient network capabilities and enforce source, timeout, output, depth, and element limits
- Validate that only bounded plain structured data returns to the application
* feat(code): add editable Design JSX
- Add a lazy CodeMirror editor with JSX syntax support, completion, diagnostics, and bounded scrolling
- Convert validated sandbox output into trusted Design JSX helpers before rendering
- Apply or insert JSX as one undoable graph transaction while preserving dirty drafts
* feat(code): localize JSX editor actions
- Add translated-message fallbacks for editing, applying, inserting, and draft state
- Document the editable JSX workflow in the unreleased changelog
* fix(code): satisfy typed sandbox validation
- Keep the sandbox document terminator literal and preserve optional selection handling under type-aware lint
* test(code): resolve sandbox probes through app aliases
* fix(code): bound sandbox results before cloning
- Enforce string, array, object, depth, element, and byte limits inside the disposable worker
- Retain host-side validation as a second structured-data boundary
* fix(code): keep JSX and HTML editing modes separate
- Switch generated Tailwind output back to OpenPencil JSX before editing
- Close the JSX editor when opening HTML/CSS import and avoid stacking both editors
* feat(code): support authored Design JSX programs
- Allow local constants, function components, arrays, conditionals, fragments, and multiple roots
- Preserve replacement positions for multiple selected roots and reject mixed-parent or locked selections
- Cover multi-root undo, redo, and all-or-nothing rollback
* feat(code): add explicit JSX view mode
- Let authors leave CodeMirror without applying a draft
- Keep the editable surface and HTML/CSS importer mutually exclusive
* feat(code): diagnose unknown JSX vocabulary
- Warn on OpenPencil elements and properties that are absent from the canonical schema
- Surface diagnostics inline through CodeMirror lint markers
* test(code): accept WebKit isolation diagnostics
- Cover the sandbox architecture against Playwright WebKit
- Accept engine-specific wording while preserving the same unavailable-window assertion
* refactor(code): consolidate Design JSX vocabulary
- Drive renderer warnings, completion, and diagnostics from one supported-property schema
- Recognize locally declared components and add focused schema and transform tests
- Replace CodeMirror basicSetup with an explicit feature set and remove the umbrella package
* fix(code): support Design JSX variable helpers
* refactor(code): unify JSX sandbox validation
* fix(code): account for complete sandbox output
* fix(code): preserve locked JSX descendants
* fix(code): preserve JSX sibling order
* fix(code): recompute JSX parent layouts
* feat(code): add live code previews
* test(code): centralize graph assertions
* fix(code): harden live preview sessions
* docs: describe live code editing
* fix(code): update editor accessibility labels
* fix(code): use theme-aware error colors
* fix(dev): stop Vite disconnect error loops
* fix(code): clarify live preview status
* fix(ui): avoid tooltip attribute warnings
* test(code): assert semantic preview status
* refactor(code): remove obsolete editor messages
* fix(code): harden preview concurrency and isolation
* fix(code): cancel stale reset previews
2026-08-15 06:48:42 +00:00
|
|
|
--color-error-bg: rgb(185 28 28 / 0.08);
|
|
|
|
|
--color-error-border: rgb(185 28 28 / 0.28);
|
2026-04-30 13:26:17 +00:00
|
|
|
--color-success-bg: #16a34a;
|
|
|
|
|
--color-success-bg-hover: #15803d;
|
|
|
|
|
--color-code-tag: #0369a1;
|
|
|
|
|
--color-code-attribute: #6d28d9;
|
|
|
|
|
--color-code-string: #15803d;
|
|
|
|
|
--color-code-number: #b91c1c;
|
|
|
|
|
--color-code-punctuation: #64748b;
|
|
|
|
|
--color-checkerboard: #d1d5db;
|
|
|
|
|
--color-checkerboard-muted: #e5e7eb;
|
2026-07-18 05:07:20 +00:00
|
|
|
--color-ruler-bg: rgb(250, 250, 251);
|
|
|
|
|
--color-ruler-tick: rgb(163, 171, 182);
|
|
|
|
|
--color-ruler-text: rgb(90, 99, 112);
|
2026-04-30 14:50:20 +00:00
|
|
|
--color-ruler-label: rgb(255, 255, 255);
|
2026-04-30 12:52:59 +00:00
|
|
|
}
|
|
|
|
|
|
2026-02-27 21:54:38 +00:00
|
|
|
html,
|
|
|
|
|
body,
|
|
|
|
|
#app {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
2026-02-28 19:41:34 +00:00
|
|
|
font-family:
|
|
|
|
|
Inter,
|
|
|
|
|
system-ui,
|
|
|
|
|
-apple-system,
|
|
|
|
|
sans-serif;
|
2026-02-27 21:54:38 +00:00
|
|
|
font-size: 13px;
|
|
|
|
|
color: var(--color-surface);
|
|
|
|
|
background: var(--color-canvas);
|
|
|
|
|
user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
}
|
2026-02-28 19:39:33 +00:00
|
|
|
|
2026-02-28 19:41:34 +00:00
|
|
|
input[type='number'] {
|
2026-02-28 19:39:33 +00:00
|
|
|
appearance: textfield;
|
|
|
|
|
-moz-appearance: textfield;
|
|
|
|
|
}
|
|
|
|
|
|
2026-02-28 19:41:34 +00:00
|
|
|
input[type='number']::-webkit-inner-spin-button,
|
|
|
|
|
input[type='number']::-webkit-outer-spin-button {
|
2026-02-28 19:39:33 +00:00
|
|
|
display: none;
|
|
|
|
|
}
|