From 568c2bb53ecfe3a5325d9eebbbf4d91b44c58357 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Maurugeon?= <maurugeon.flx@gmail.com>
Date: Wed, 30 Sep 2026 13:05:35 +0200
Subject: [PATCH] =?UTF-8?q?Menu=20d'=C3=A9tats,=20h=C3=A9ritage,=20composa?=
 =?UTF-8?q?nts=20avec=20dossiers,=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 electron/componentFile.ts              |  68 ++++-
 electron/main.ts                       |   9 +
 electron/preload.ts                    |   1 +
 electron/variablesFile.ts              | 110 ++++++++
 package.json                           |   5 +
 shared/ipc-payloads.ts                 |   2 +
 shared/ipc-results.ts                  |   5 +
 shared/preload-api.ts                  |   1 +
 src/App.tsx                            |  77 +++++-
 src/appBridge.ts                       |   7 +-
 src/componentName.ts                   |  25 ++
 src/extractAssets.ts                   | 358 +++++++++++++++++++++++++
 src/panels/PaletteDialogs.tsx          |  82 +++++-
 src/panels/PalettePanel.tsx            |  13 +-
 src/panels/PreviewPane.tsx             |   4 +-
 src/panels/PreviewToolbar.tsx          |  30 ++-
 src/panels/StylePanel.tsx              |   2 +
 src/panels/VariablesPanel.tsx          |  38 ++-
 src/panels/variableEdits.ts            |   4 +
 src/style-panel/EmbedEditor.tsx        |  70 ++++-
 src/style-panel/ProvenanceList.tsx     |   4 +-
 src/style-panel/StateSelect.tsx        |  86 ++++++
 src/style-panel/VariableConnect.tsx    |  67 ++++-
 src/style-panel/embed-editor.css       |  47 ++++
 src/style-panel/lib/cascade.ts         |  64 ++++-
 src/style-panel/lib/class-input.ts     |  37 +++
 src/style-panel/lib/host.ts            |   5 +
 src/style-panel/lib/native-styles.ts   |  11 +-
 src/style-panel/lib/resolved.ts        |  88 +++++-
 src/style-panel/lib/selectors.ts       |   4 +-
 src/style-panel/lib/states.ts          | 120 +++++++++
 src/style-panel/lib/webflow.ts         |   5 +-
 src/styles.css                         |  11 +
 test/class-inheritance.js              | 109 ++++++++
 test/class-input.js                    |  43 +++
 test/component-nested.js               | 146 ++++++++++
 test/contracts/ipc-payloads.test.ts    |   1 +
 test/contracts/main-boundaries.test.ts |   2 +-
 test/extract-assets.js                 | 125 +++++++++
 test/state-select.js                   | 121 +++++++++
 40 files changed, 1949 insertions(+), 58 deletions(-)
 create mode 100644 electron/variablesFile.ts
 create mode 100644 src/extractAssets.ts
 create mode 100644 src/style-panel/StateSelect.tsx
 create mode 100644 src/style-panel/lib/class-input.ts
 create mode 100644 src/style-panel/lib/states.ts
 create mode 100644 test/class-inheritance.js
 create mode 100644 test/class-input.js
 create mode 100644 test/component-nested.js
 create mode 100644 test/extract-assets.js
 create mode 100644 test/state-select.js

diff --git a/electron/componentFile.ts b/electron/componentFile.ts
index 21efde86..1d02a382 100644
--- a/electron/componentFile.ts
+++ b/electron/componentFile.ts
@@ -24,6 +24,60 @@ const toPosix = (p: string): string => p.split(path.sep).join('/');
 // `<card />` renders a literal <card> and the component never appears.
 const VALID_NAME = /^[A-Z][A-Za-z0-9]*$/;
 
+// A folder is a path made of plain words, so it can never point outside
+// src/components ("..", absolute paths and drive letters have no place in it),
+// and it is bounded: nobody's component tree is deeper than this.
+const FOLDER_SEGMENT = /^[A-Za-z0-9][A-Za-z0-9_-]*$/;
+const FOLDER_DEPTH_MAX = 5;
+
+function folderSegments(folder: string | undefined): readonly string[] {
+  const segments = String(folder || '')
+    .split(/[\\/]+/)
+    .map((segment) => segment.trim())
+    .filter(Boolean);
+  if (segments.length > FOLDER_DEPTH_MAX) {
+    throw new Error(`Folders can be at most ${FOLDER_DEPTH_MAX} levels deep.`);
+  }
+  for (const segment of segments) {
+    if (!FOLDER_SEGMENT.test(segment)) {
+      throw new Error(`"${segment}" can't be a folder name — use letters, digits, - or _.`);
+    }
+  }
+  return segments;
+}
+
+// The component tree is walked whole because the name is also the import and the
+// tag: two `Eyebrow` files in different folders would be two things called the
+// same. Bounded, so a symlink loop or a huge tree cannot run away.
+const CLASH_SCAN_ENTRIES_MAX = 20000;
+
+function findNameClash(componentsDir: string, name: string): string | null {
+  const wanted = `${name.toLowerCase()}.astro`;
+  const pending = [componentsDir];
+  let seen = 0;
+  while (pending.length > 0 && seen < CLASH_SCAN_ENTRIES_MAX) {
+    const dir = pending.pop();
+    if (dir === undefined) {
+      break;
+    }
+    let entries: fs.Dirent[];
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      continue;
+    }
+    for (const entry of entries) {
+      seen += 1;
+      if (entry.isDirectory()) {
+        pending.push(path.join(dir, entry.name));
+      } else if (entry.name.toLowerCase() === wanted) {
+        return path.basename(entry.name, '.astro');
+      }
+    }
+  }
+  return null;
+}
+
 interface ComponentImport {
   readonly name?: string;
   readonly path?: string;
@@ -33,6 +87,8 @@ interface ComponentFileArgs {
   readonly projectPath: string;
   readonly pagePath: string;
   readonly name: string;
+  /** Sub-folders under src/components, e.g. `heading` or `sections/hero`. */
+  readonly folder?: string;
   readonly nodes: readonly unknown[];
   readonly imports?: readonly ComponentImport[];
   readonly props?: readonly unknown[];
@@ -47,6 +103,7 @@ function componentFile({
   projectPath,
   pagePath,
   name,
+  folder = '',
   nodes,
   imports = [],
   props = [],
@@ -59,14 +116,13 @@ function componentFile({
   }
 
   const componentsDir = path.join(projectPath, 'src', 'components');
-  const target = path.join(componentsDir, `${name}.astro`);
+  const targetDir = path.join(componentsDir, ...folderSegments(folder));
+  const target = path.join(targetDir, `${name}.astro`);
   // Case-insensitively: on a Mac, Card.astro and card.astro are the same file,
   // and writing the second silently replaces the first.
-  const clash = fs.existsSync(componentsDir)
-    ? fs.readdirSync(componentsDir).find((f) => f.toLowerCase() === `${name.toLowerCase()}.astro`)
-    : null;
+  const clash = fs.existsSync(componentsDir) ? findNameClash(componentsDir, name) : null;
   if (clash) {
-    throw new Error(`There's already a component called ${path.basename(clash, '.astro')}.`);
+    throw new Error(`There's already a component called ${clash}.`);
   }
 
   // Which of the page's imports this piece actually uses. Matched against the
@@ -87,7 +143,7 @@ function componentFile({
     if (!spec.startsWith('.')) {
       return { ...imp };
     }
-    const rel = toPosix(path.relative(componentsDir, path.resolve(pageDir, spec)));
+    const rel = toPosix(path.relative(targetDir, path.resolve(pageDir, spec)));
     return { ...imp, path: rel.startsWith('.') ? rel : './' + rel };
   });
 
diff --git a/electron/main.ts b/electron/main.ts
index 69bb019e..70eaade2 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -109,6 +109,7 @@ import * as starterModule from './starter';
 const { createStarter } = starterModule;
 import * as windowBoundsModule from './windowBounds';
 const { openingBounds } = windowBoundsModule;
+import { createVariablesFile } from './variablesFile';
 import * as componentFileModule from './componentFile';
 const { componentFile } = componentFileModule;
 import * as componentUsageModule from './componentUsage';
@@ -2736,6 +2737,14 @@ ipcMain.handle('css:addVariables', async (_e, { projectPath, adds }) => {
   return last;
 });
 
+// The first stylesheet of variables, for a project that has none — written and
+// imported, so what the panel then edits is what the page ships.
+ipcMain.handle('css:createVariablesFile', async (_e, projectPath) => {
+  const created = createVariablesFile(String(projectPath), (file) => markSelfWrite(file));
+  send('css:changed', {});
+  return { ok: true, ...created };
+});
+
 // A row dragged to a new place: the declaration moves inside its rule, which is
 // where the order actually lives.
 ipcMain.handle('css:moveVariables', async (_e, { projectPath, moves }) => {
diff --git a/electron/preload.ts b/electron/preload.ts
index 53815424..37773b88 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -1960,6 +1960,7 @@ contextBridge.exposeInMainWorld('avb', {
   setCssVariable: invoke('css:setVariable'),
   moveCssVariables: invoke('css:moveVariables'),
   addCssVariables: invoke('css:addVariables'),
+  createVariablesFile: invoke('css:createVariablesFile'),
   renameCssVariables: invoke('css:renameVariables'),
   setCssSectionTitle: invoke('css:setSectionTitle'),
   removeCssSection: invoke('css:removeSection'),
diff --git a/electron/variablesFile.ts b/electron/variablesFile.ts
new file mode 100644
index 00000000..5af89277
--- /dev/null
+++ b/electron/variablesFile.ts
@@ -0,0 +1,110 @@
+// A stylesheet for a project's variables, when it has none.
+//
+// The Variables panel reads custom properties out of the project's CSS, so a
+// project with no stylesheet had nothing to show and nowhere to add to — the only
+// way in was to make a base.css by hand. This makes the first one: a file with a
+// `:root` block to start from, and the import that makes Astro actually ship it.
+// A stylesheet nobody imports is a file, not a style: the variables would be
+// editable in the panel and absent from the page.
+
+import fs from 'fs';
+import path from 'path';
+
+export const VARIABLES_REL = 'src/styles/variables.css';
+
+// Three variables in three families, so the panel has groups to show straight
+// away and the naming pattern it groups by (`--color-…`, `--space-…`) is on
+// display for whoever adds the fourth.
+export const VARIABLES_STARTER = `:root {
+  --color-primary: #2563eb;
+  --color-text: #111111;
+  --space-m: 1rem;
+}
+`;
+
+const FENCE = /^---[ \t]*$/m;
+
+/**
+ * `source` with `import '<spec>';` added to its frontmatter — after the imports
+ * already there, or in a frontmatter made for the purpose. Unchanged when the
+ * file already mentions the stylesheet.
+ */
+export function withStylesheetImport(source: string, spec: string): string {
+  if (source.includes(spec)) {
+    return source;
+  }
+  const eol = source.includes('\r\n') ? '\r\n' : '\n';
+  const text = source.replace(/\r\n/g, '\n');
+  const statement = `import '${spec}';`;
+  if (!/^---[ \t]*\n/.test(text)) {
+    return `---\n${statement}\n---\n${text}`.replace(/\n/g, eol);
+  }
+  const afterOpen = text.indexOf('\n') + 1;
+  const close = text.slice(afterOpen).search(FENCE);
+  if (close === -1) {
+    return source; // an unterminated frontmatter is not ours to guess at
+  }
+  const head = text.slice(afterOpen, afterOpen + close);
+  const lines = head.split('\n');
+  let last = -1;
+  lines.forEach((line, index) => {
+    if (/^\s*import\b[^]*?['"];?\s*$/.test(line)) {
+      last = index;
+    }
+  });
+  lines.splice(last + 1, 0, statement);
+  const next = text.slice(0, afterOpen) + lines.join('\n') + text.slice(afterOpen + close);
+  return next.replace(/\n/g, eol);
+}
+
+/** Layouts at the top of src/layouts, or the index page when there are none. */
+function importHosts(projectPath: string): string[] {
+  const layouts = path.join(projectPath, 'src', 'layouts');
+  const found = fs.existsSync(layouts)
+    ? fs
+        .readdirSync(layouts, { withFileTypes: true })
+        .filter((entry) => entry.isFile() && entry.name.endsWith('.astro'))
+        .map((entry) => path.join(layouts, entry.name))
+        .sort()
+    : [];
+  if (found.length > 0) {
+    return found;
+  }
+  const index = path.join(projectPath, 'src', 'pages', 'index.astro');
+  return fs.existsSync(index) ? [index] : [];
+}
+
+export interface VariablesFileResult {
+  readonly rel: string;
+  readonly imported: readonly string[];
+}
+
+/**
+ * Writes the starter stylesheet (appending a `:root` block if the file is already
+ * there without one) and imports it. `onWrite` is told about every file touched, so
+ * the caller can mark its own writes and not mistake them for outside edits.
+ */
+export function createVariablesFile(
+  projectPath: string,
+  onWrite: (file: string) => void,
+): VariablesFileResult {
+  const file = path.join(projectPath, ...VARIABLES_REL.split('/'));
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  const existing = fs.existsSync(file) ? fs.readFileSync(file, 'utf8') : '';
+  if (!/:root\b/.test(existing)) {
+    onWrite(file);
+    fs.writeFileSync(file, existing ? `${existing.trimEnd()}\n\n${VARIABLES_STARTER}` : VARIABLES_STARTER, 'utf8');
+  }
+  const imported: string[] = [];
+  for (const host of importHosts(projectPath)) {
+    const spec = path.relative(path.dirname(host), file).split(path.sep).join('/');
+    const before = fs.readFileSync(host, 'utf8');
+    const after = withStylesheetImport(before, spec.startsWith('.') ? spec : `./${spec}`);
+    if (after !== before) {
+      onWrite(host);
+      fs.writeFileSync(host, after, 'utf8');
+      imported.push(path.relative(projectPath, host).split(path.sep).join('/'));
+    }
+  }
+  return { rel: VARIABLES_REL, imported };
+}
diff --git a/package.json b/package.json
index f8d2b526..32e7374b 100644
--- a/package.json
+++ b/package.json
@@ -150,6 +150,11 @@
     "test:commentmarkers": "node test/comment-markers.js",
     "test:selectorslive": "node test/selectors-live.js",
     "test:selectorwell": "node test/selector-well.js",
+    "test:stateselect": "node test/state-select.js",
+    "test:componentnested": "node test/component-nested.js",
+    "test:extractassets": "node test/extract-assets.js",
+    "test:classinput": "node test/class-input.js",
+    "test:classinheritance": "node test/class-inheritance.js",
     "test:popuplayers": "node test/popup-layers.js",
     "test:scopecompletions": "node test/scope-completions.js",
     "test:querylist": "node test/query-list.js",
diff --git a/shared/ipc-payloads.ts b/shared/ipc-payloads.ts
index 2d4baa7e..031fe8f1 100644
--- a/shared/ipc-payloads.ts
+++ b/shared/ipc-payloads.ts
@@ -89,6 +89,7 @@ export const IPC_PAYLOADS = {
   'cms:write': object({ ...relative, data }),
   'component:create': object({
     ...named,
+    folder: optional(text),
     pagePath: pathText,
     nodes: list(data),
     imports: optional(list(object({ name: optional(text), path: optional(text) }))),
@@ -114,6 +115,7 @@ export const IPC_PAYLOADS = {
     before: cssTarget,
     at: optional(count),
   }),
+  'css:createVariablesFile': pathText,
   'css:addVariables': object({
     ...project,
     adds: optional(
diff --git a/shared/ipc-results.ts b/shared/ipc-results.ts
index ef8aed2d..e096d9d6 100644
--- a/shared/ipc-results.ts
+++ b/shared/ipc-results.ts
@@ -180,6 +180,11 @@ export interface IpcResults {
     readonly stale?: boolean;
     readonly title?: string;
   };
+  readonly 'css:createVariablesFile': {
+    readonly ok: true;
+    readonly rel: string;
+    readonly imported: ReadonlyArray<string>;
+  };
   readonly 'css:addVariables': {
     readonly ok: boolean;
     readonly error?: string;
diff --git a/shared/preload-api.ts b/shared/preload-api.ts
index 8b0dfd6b..996d236e 100644
--- a/shared/preload-api.ts
+++ b/shared/preload-api.ts
@@ -43,6 +43,7 @@ interface InvokeChannels {
   readonly setCssVariable: 'css:setVariable';
   readonly moveCssVariables: 'css:moveVariables';
   readonly addCssVariables: 'css:addVariables';
+  readonly createVariablesFile: 'css:createVariablesFile';
   readonly renameCssVariables: 'css:renameVariables';
   readonly setCssSectionTitle: 'css:setSectionTitle';
   readonly removeCssSection: 'css:removeSection';
diff --git a/src/App.tsx b/src/App.tsx
index b1816b07..fe74f789 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -60,6 +60,7 @@ import { hasClass, namesIn, withClass } from './classAttr.js';
 import { toComponentName } from './componentName.js';
 import { resolveInstanceProps } from './instanceProps.js';
 import { propsForExtraction } from './extractProps.js';
+import { planAssets } from './extractAssets';
 import TerminalDock from './panels/TerminalDock';
 import { cleanError, stripAnsi } from './cleanError.js';
 import { elementLabel } from './classNames.js';
@@ -1780,8 +1781,8 @@ export default function App() {
   // edit to two files, and the component file is written first: a page that
   // imports a file that isn't there yet is a broken page, however briefly.
   const createComponentFromSelection = useCallback(
-    async (name: string, options: { readonly withProps?: boolean } = {}) => {
-      const { withProps = true } = options;
+    async (name: string, options: { readonly withProps?: boolean; readonly folder?: string } = {}) => {
+      const { withProps = true, folder = '' } = options;
       const page = pageStateRef.current.currentPage;
       const state = pageStateRef.current.pageState;
       const model = state?.editable ? state.model : null;
@@ -1789,13 +1790,18 @@ export default function App() {
       const projectPath = projectRef.current?.path;
       if (!page?.path || !model || !node || !projectPath) {return;}
       const props = withProps ? propsNeededFor(model, node) : [];
+      // The page's own styles and scripts about this piece go with it, so the page
+      // is left holding the chain of components and nothing else.
+      const assets = planAssets(model.nodes, node.id, newId);
       let created;
       try {
         created = await createProjectComponent({
           projectPath,
           pagePath: page.path,
           name,
+          folder,
           nodes: node,
+          assets: assets.moved,
           imports: model.imports || [],
           props,
         });
@@ -1821,6 +1827,13 @@ export default function App() {
           props: Object.fromEntries(props.map((p) => [p, { type: 'expr', value: p }])),
           children: null,
         };
+        for (const edit of assets.edits) {
+          const holder = findParentList(m, edit.id);
+          const block = holder ? holder.list[holder.index] : null;
+          if (!holder || !block) {continue;}
+          if (edit.inner === null) {holder.list.splice(holder.index, 1);}
+          else {block.inner = edit.inner;}
+        }
         return m;
       }, true);
       setSelectedId(id);
@@ -1829,12 +1842,18 @@ export default function App() {
       // — an expression naming something that isn't a value the page holds, or
       // props turned off. The person who just moved it knows what it needs.
       const stranded = usesPageScope(node) && !props.length;
+      const moved = assets.moved.length
+        ? ` Moved ${assets.moved.length} style/script block${assets.moved.length === 1 ? '' : 's'} with it.`
+        : '';
+      const held = assets.held
+        ? ` ${assets.held} selector${assets.held === 1 ? ' was' : 's were'} kept on the page because their class is used elsewhere too.`
+        : '';
       showToast(
         stranded
-          ? `Created ${created.rel} — it reads page data, so it will need props.`
+          ? `Created ${created.rel} — it reads page data, so it will need props.${moved}${held}`
           : props.length
-            ? `Created ${created.rel} with ${props.length} prop${props.length === 1 ? '' : 's'}.`
-            : `Created ${created.rel}`
+            ? `Created ${created.rel} with ${props.length} prop${props.length === 1 ? '' : 's'}.${moved}${held}`
+            : `Created ${created.rel}.${moved}${held}`
       );
     },
     [mutateModel, propsNeededFor, rescan, showToast]
@@ -2896,6 +2915,31 @@ export default function App() {
   // plain `class`, a `class:list`, a template literal (see classAttr.js). An
   // element whose class is some other expression is code we would have to
   // understand to extend, so that one is said out loud rather than dropped.
+  // Rules for a class need a stylesheet to live in. A page with no `<style>` block
+  // (and a project with no stylesheet the panel can write to) has nowhere to put
+  // the first one, so the first edit asks for one: an unhashed `<style is:global>`
+  // at the end of the page — unhashed because the panel edits plain selectors, and
+  // Astro's scoped styles would rename them out from under it. The id is handed
+  // back at once so the panel can wait for that block to show up in the model.
+  const ensureStyleNode = useCallback((): string | null => {
+    const state = pageStateRef.current.pageState;
+    if (!state?.editable) {return null;}
+    const existing = findStyleNode(state.model.nodes);
+    if (existing) {return existing.id;}
+    const id = newId();
+    mutateModel((model) => {
+      model.nodes.push({
+        id,
+        kind: 'raw',
+        name: 'style',
+        props: { 'is:global': { type: 'bare' } },
+        inner: '\n',
+      });
+      return model;
+    }, true);
+    return id;
+  }, [mutateModel]);
+
   const addClassToNode = useCallback(
     (nodeId: string, className: string) => {
       const clean = String(className || '').trim();
@@ -4924,6 +4968,17 @@ export default function App() {
             focusWhole={focusWhole}
             device={device}
             onDevice={setDevice}
+            createComponent={{
+              enabled: createFrom.kind === 'ready',
+              title:
+                createFrom.kind === 'ready'
+                  ? `Create component from ${createFrom.label} (⇧⌘A)`
+                  : createFrom.reason,
+              onClick: () => {
+                setLeftTab('components');
+                setCreateRequest((n) => n + 1);
+              },
+            }}
             onSelectPath={(p, info) => {
               // What the click MEANT — see canvasClick.js. The canvas answers
               // with a path or with null, and null has two causes that want
@@ -5105,6 +5160,7 @@ export default function App() {
                 }}
                 onSelectNode={setSelectedId}
                 onRecordUndo={pushCommand}
+                onEnsureStyleNode={ensureStyleNode}
                 onAddClass={(name) => {
                   if (selectedId) {
                     addClassToNode(selectedId, name);
@@ -5259,6 +5315,17 @@ export default function App() {
   );
 }
 
+function findStyleNode(nodes: readonly EditorNode[]): EditorNode | null {
+  for (const node of nodes) {
+    if (node.kind === 'raw' && node.name === 'style') {return node;}
+    if (Array.isArray(node.children)) {
+      const inner = findStyleNode(node.children);
+      if (inner) {return inner;}
+    }
+  }
+  return null;
+}
+
 function insertIntoModel(model: EditorModel, node: EditorNode, target: InsertTarget | null): void {
   if (!target || target.parentId == null) {
     const index = target ? Math.min(target.index, model.nodes.length) : model.nodes.length;
diff --git a/src/appBridge.ts b/src/appBridge.ts
index 6cb9366d..b50a0fee 100644
--- a/src/appBridge.ts
+++ b/src/appBridge.ts
@@ -44,7 +44,11 @@ interface CreateComponentInput {
   readonly projectPath: string;
   readonly pagePath: string;
   readonly name: string;
+  /** Folder under src/components ('' = the root), created when missing. */
+  readonly folder?: string;
   readonly nodes: unknown;
+  /** `<style>`/`<script>` blocks that travel with the markup. */
+  readonly assets?: readonly unknown[];
   readonly imports: readonly { readonly name?: string; readonly path?: string }[];
   readonly props: readonly string[];
 }
@@ -322,7 +326,8 @@ export function createProjectComponent(
     projectPath: input.projectPath,
     pagePath: input.pagePath,
     name: input.name,
-    nodes: [data(input.nodes)],
+    ...(input.folder ? { folder: input.folder } : {}),
+    nodes: [data(input.nodes), ...(input.assets ?? []).map(data)],
     imports: input.imports,
     props: input.props.map(data),
   });
diff --git a/src/componentName.ts b/src/componentName.ts
index cf241973..0bb93f6f 100644
--- a/src/componentName.ts
+++ b/src/componentName.ts
@@ -68,3 +68,28 @@ export function componentNameError(input: unknown, taken: readonly string[] = []
   }
   return null;
 }
+
+// Where a component lives under src/components. The folder is a path of plain
+// words — the same shape the main process accepts — so the dialog can say what is
+// wrong while it is typed instead of the write failing afterwards.
+const FOLDER_SEGMENT = /^[A-Za-z0-9][A-Za-z0-9_-]*$/;
+const FOLDER_DEPTH_MAX = 5;
+
+/** What was typed as a folder, cleaned up: `Heading / Hero section` → `Heading/Hero-section`. */
+export function toFolderPath(input: unknown): string {
+  return String(input ?? '')
+    .split(/[\/]+/)
+    .map((segment) => segment.trim().replace(/\s+/g, '-'))
+    .filter(Boolean)
+    .join('/');
+}
+
+/** Why this folder can't be used, or null when it can. '' is fine: the root. */
+export function folderError(folder: string): string | null {
+  const segments = folder.split('/').filter(Boolean);
+  if (segments.length > FOLDER_DEPTH_MAX) {
+    return `At most ${FOLDER_DEPTH_MAX} levels deep.`;
+  }
+  const bad = segments.find((segment) => !FOLDER_SEGMENT.test(segment));
+  return bad ? `"${bad}" can't be a folder name — use letters, digits, - or _.` : null;
+}
diff --git a/src/extractAssets.ts b/src/extractAssets.ts
new file mode 100644
index 00000000..c6f1534c
--- /dev/null
+++ b/src/extractAssets.ts
@@ -0,0 +1,358 @@
+// The CSS and JS that travel with an extracted component.
+//
+// Making a component out of a piece of a page moves its markup. The styles and the
+// script that piece depends on live in the page's own `<style>` and `<script>`
+// blocks, and left there they would be the one thing still in index.astro that
+// belongs to the component. So they move too: after extraction the page holds the
+// chain of components and nothing else.
+//
+// "Belongs to the component" is decided by class names, because that is what CSS
+// and query-selector scripts address elements by:
+//
+//   a rule moves when every class it mentions is used inside the piece and NOT
+//   anywhere else on the page. A class used both inside and out cannot move
+//   without breaking the outside use, so its rules stay and are counted, for the
+//   caller to say so.
+//
+// Rules that mention no class (`h1 { … }`, `:root { --x }`, `body`) are page-wide
+// by nature and stay. Selector lists are split: `.a, .b` with only `.a` movable
+// moves `.a` and leaves `.b`.
+
+import postcss from 'postcss';
+import type { AtRule, Container, Root, Rule } from 'postcss';
+
+import type { Attr } from '../shared/page-node';
+import { namesIn } from './classAttr';
+
+/** Classes and ids an element tree uses, from static attributes only. */
+export interface Tokens {
+  readonly classes: ReadonlySet<string>;
+  readonly ids: ReadonlySet<string>;
+}
+
+export interface SplitStyles {
+  /** CSS that moves into the component ('' when nothing does). */
+  readonly moved: string;
+  /** What the page keeps. */
+  readonly kept: string;
+  /** Selectors held back because they use a class the page uses elsewhere too. */
+  readonly held: number;
+}
+
+export interface SplitScript {
+  readonly moves: boolean;
+}
+
+/** The part of a page-model node this module reads. */
+export interface TreeNode {
+  readonly id: string;
+  readonly kind?: string | undefined;
+  readonly name?: string | undefined;
+  readonly inner?: string | undefined;
+  readonly props?: Readonly<Record<string, Attr>> | undefined;
+  readonly children?: readonly TreeNode[] | null | undefined;
+}
+
+// Deeper than any page; bounds the walk so a malformed tree cannot recurse forever.
+const TREE_DEPTH_MAX = 200;
+
+/**
+ * The classes and ids used by `nodes` and everything under them. With `skipId`,
+ * the subtree rooted at that node is left out — that is "the rest of the page".
+ */
+export function tokensOf(nodes: readonly TreeNode[], skipId?: string): Tokens {
+  const classes = new Set<string>();
+  const ids = new Set<string>();
+  const walk = (list: readonly TreeNode[], depth: number): void => {
+    if (depth > TREE_DEPTH_MAX) {
+      throw new Error('Page tree is too deep to scan.');
+    }
+    for (const node of list) {
+      if (node.id === skipId) {
+        continue;
+      }
+      for (const key of ['class', 'class:list']) {
+        namesIn(node.props?.[key]).forEach((name) => classes.add(name));
+      }
+      const id = node.props?.['id'];
+      if (id && id.type === 'string' && id.value.trim()) {
+        ids.add(id.value.trim());
+      }
+      walk(node.children ?? [], depth + 1);
+    }
+  };
+  walk(nodes, 0);
+  return { classes, ids };
+}
+
+// A generous bound: a stylesheet block with more selectors than this is not one
+// a person wrote by hand, and the walk stays finite on anything else.
+const SELECTORS_MAX = 20000;
+
+const CLASS_TOKEN = /\.(-?[_a-zA-Z][\w-]*)/g;
+
+/** The class names a selector mentions, ignoring strings and attribute brackets. */
+export function classesInSelector(selector: string): readonly string[] {
+  const bare = selector.replace(/\[[^\]]*\]/g, '').replace(/(["'])(?:\\.|(?!\1).)*\1/g, '');
+  return [...bare.matchAll(CLASS_TOKEN)].map((match) => match[1] ?? '').filter(Boolean);
+}
+
+/** The classes movable with the piece: used inside it, never outside it. */
+export function movableClasses(inside: Tokens, outside: Tokens): ReadonlySet<string> {
+  return new Set([...inside.classes].filter((name) => !outside.classes.has(name)));
+}
+
+type Verdict = 'moves' | 'stays' | 'held';
+
+function verdictFor(
+  selector: string,
+  inside: Tokens,
+  movable: ReadonlySet<string>,
+): Verdict {
+  const classes = classesInSelector(selector);
+  if (classes.length === 0) {
+    return 'stays';
+  }
+  if (classes.every((name) => movable.has(name))) {
+    return 'moves';
+  }
+  // Every class belongs to the piece, but some are also used outside it.
+  return classes.every((name) => inside.classes.has(name)) ? 'held' : 'stays';
+}
+
+class Splitter {
+  held = 0;
+  private seen = 0;
+
+  constructor(
+    private readonly inside: Tokens,
+    private readonly movable: ReadonlySet<string>,
+  ) {}
+
+  // Moves what belongs out of `source` into `target`, both containers of the same
+  // kind (root, or the shell of a media query).
+  split(source: Container, target: Container): void {
+    for (const child of [...(source.nodes ?? [])]) {
+      if (child.type === 'rule') {
+        this.splitRule(child, target);
+      } else if (child.type === 'atrule' && this.isConditional(child)) {
+        this.splitConditional(child, target);
+      }
+    }
+  }
+
+  private isConditional(atRule: AtRule): boolean {
+    return /^(media|supports|container|layer)$/i.test(atRule.name) && Boolean(atRule.nodes);
+  }
+
+  private splitRule(rule: Rule, target: Container): void {
+    const moving: string[] = [];
+    const staying: string[] = [];
+    for (const selector of rule.selectors) {
+      this.seen += 1;
+      if (this.seen > SELECTORS_MAX) {
+        throw new Error('Too many selectors to split safely.');
+      }
+      const verdict = verdictFor(selector, this.inside, this.movable);
+      if (verdict === 'moves') {
+        moving.push(selector);
+      } else {
+        staying.push(selector);
+        if (verdict === 'held') {
+          this.held += 1;
+        }
+      }
+    }
+    if (moving.length === 0) {
+      return;
+    }
+    const clone = rule.clone();
+    clone.selectors = moving;
+    clone.raws.before = '\n\n';
+    target.append(clone);
+    if (staying.length === 0) {
+      rule.remove();
+    } else {
+      rule.selectors = staying;
+    }
+  }
+
+  private splitConditional(atRule: AtRule, target: Container): void {
+    const shell = atRule.clone({ nodes: [] });
+    shell.raws.before = '\n\n';
+    this.split(atRule, shell);
+    if ((shell.nodes ?? []).length > 0) {
+      target.append(shell);
+    }
+    if ((atRule.nodes ?? []).length === 0) {
+      atRule.remove();
+    }
+  }
+}
+
+function animationNames(root: Container): Set<string> {
+  const names = new Set<string>();
+  root.walkDecls(/^(-webkit-)?animation(-name)?$/i, (decl) => {
+    for (const word of decl.value.split(/[\s,]+/)) {
+      if (/^-?[_a-zA-Z][\w-]*$/.test(word)) {
+        names.add(word);
+      }
+    }
+  });
+  return names;
+}
+
+// A keyframes block goes with the rules that run it, unless something staying
+// behind runs it too.
+function carryKeyframes(page: Root, moved: Root): void {
+  const usedByMoved = animationNames(moved);
+  const usedByPage = animationNames(page);
+  for (const node of [...page.nodes]) {
+    if (node.type !== 'atrule' || !/keyframes$/i.test(node.name)) {
+      continue;
+    }
+    const name = node.params.trim();
+    if (usedByMoved.has(name) && !usedByPage.has(name)) {
+      const clone = node.clone();
+      clone.raws.before = '\n\n';
+      moved.append(clone);
+      node.remove();
+    }
+  }
+}
+
+function tidy(root: Root): string {
+  const css = root.toString().trim();
+  return css ? `${css}\n` : '';
+}
+
+/**
+ * Splits one `<style>` block's CSS into what moves with the piece and what stays.
+ * Unparseable CSS is left entirely where it is: moving half of something the
+ * parser could not read is how styles get lost.
+ */
+export function splitStyles(css: string, inside: Tokens, outside: Tokens): SplitStyles {
+  let page: Root;
+  try {
+    page = postcss.parse(css);
+  } catch {
+    return { moved: '', kept: css, held: 0 };
+  }
+  const moved = postcss.root();
+  const splitter = new Splitter(inside, movableClasses(inside, outside));
+  splitter.split(page, moved);
+  carryKeyframes(page, moved);
+  const movedText = tidy(moved);
+  return {
+    moved: movedText,
+    kept: movedText ? tidy(page) : css,
+    held: splitter.held,
+  };
+}
+
+/**
+ * Whether a `<script>` block is about the piece: it names one of its movable
+ * classes or ids, and names nothing the rest of the page uses. A script that
+ * reaches both is the page's to keep — copying it would run it twice.
+ */
+export function scriptBelongsTo(script: string, inside: Tokens, outside: Tokens): SplitScript {
+  const mentions = (name: string): boolean =>
+    new RegExp(`(^|[^\\w-])${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\w-]|$)`).test(script);
+  const names = [...inside.classes, ...inside.ids].filter(
+    (name) => !outside.classes.has(name) && !outside.ids.has(name),
+  );
+  const touchesInside = names.some(mentions);
+  const touchesOutside = [...outside.classes, ...outside.ids].some(mentions);
+  return { moves: touchesInside && !touchesOutside };
+}
+
+/** A `<style>` or `<script>` block as the page model holds it. */
+export interface RawBlock {
+  readonly id: string;
+  readonly kind: 'raw';
+  readonly name: string;
+  readonly props: Readonly<Record<string, Attr>>;
+  readonly inner: string;
+}
+
+export interface AssetPlan {
+  /** New blocks for the component file, in order (styles, then scripts). */
+  readonly moved: readonly RawBlock[];
+  /** What each page block becomes: its remaining text, or null to delete it. */
+  readonly edits: ReadonlyArray<{ readonly id: string; readonly inner: string | null }>;
+  /** Selectors kept on the page because their class is used elsewhere too. */
+  readonly held: number;
+}
+
+const BLOCKS_MAX = 200;
+
+function rawBlocksOutside(nodes: readonly TreeNode[], pieceId: string): TreeNode[] {
+  const found: TreeNode[] = [];
+  const walk = (list: readonly TreeNode[], depth: number): void => {
+    if (depth > TREE_DEPTH_MAX || found.length > BLOCKS_MAX) {
+      throw new Error('Page tree is too large to scan.');
+    }
+    for (const node of list) {
+      if (node.id === pieceId) {
+        continue;
+      }
+      if (node.kind === 'raw' && (node.name === 'style' || node.name === 'script')) {
+        found.push(node);
+      }
+      walk(node.children ?? [], depth + 1);
+    }
+  };
+  walk(nodes, 0);
+  return found;
+}
+
+/**
+ * What to take out of the page's `<style>`/`<script>` blocks when `pieceId` becomes
+ * a component. `makeId` names the new blocks; the plan is data, so the caller
+ * applies it inside its own model edit and the component file gets `moved`.
+ * Only blocks without a `src` are touched — an external script is not ours.
+ */
+export function planAssets(
+  nodes: readonly TreeNode[],
+  pieceId: string,
+  makeId: () => string,
+): AssetPlan {
+  const piece = findTreeNode(nodes, pieceId);
+  const inside = tokensOf(piece ? [piece] : []);
+  const outside = tokensOf(nodes, pieceId);
+  const styles: RawBlock[] = [];
+  const scripts: RawBlock[] = [];
+  const edits: Array<{ id: string; inner: string | null }> = [];
+  let held = 0;
+  for (const block of rawBlocksOutside(nodes, pieceId)) {
+    const inner = block.inner ?? '';
+    const props = block.props ?? {};
+    if (block.name === 'style') {
+      const split = splitStyles(inner, inside, outside);
+      held += split.held;
+      if (split.moved) {
+        styles.push({ id: makeId(), kind: 'raw', name: 'style', props, inner: `\n${split.moved}` });
+        edits.push({ id: block.id, inner: split.kept.trim() ? `\n${split.kept.trim()}\n` : null });
+      }
+    } else if (!props['src'] && scriptBelongsTo(inner, inside, outside).moves) {
+      scripts.push({ id: makeId(), kind: 'raw', name: 'script', props, inner });
+      edits.push({ id: block.id, inner: null });
+    }
+  }
+  return { moved: [...styles, ...scripts], edits, held };
+}
+
+function findTreeNode(nodes: readonly TreeNode[], id: string): TreeNode | null {
+  const pending = [...nodes];
+  for (let step = 0; step < 100000 && pending.length > 0; step += 1) {
+    const node = pending.pop();
+    if (node === undefined) {
+      break;
+    }
+    if (node.id === id) {
+      return node;
+    }
+    pending.push(...(node.children ?? []));
+  }
+  return null;
+}
diff --git a/src/panels/PaletteDialogs.tsx b/src/panels/PaletteDialogs.tsx
index 2ac738bb..ad627148 100644
--- a/src/panels/PaletteDialogs.tsx
+++ b/src/panels/PaletteDialogs.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import type { ComponentUsageFile } from '../paletteModel';
-import { componentNameError, toComponentName } from '../componentName';
+import { componentNameError, folderError, toComponentName, toFolderPath } from '../componentName';
 import { prettyComponentName, usageFileLabel } from '../paletteModel';
 import { CloseIcon, ElementComponentIcon, FileIcon, LayoutIcon } from '../ui/Icons';
 
@@ -37,13 +37,19 @@ export type UsagePopup =
 interface CreateComponentModalProps {
   readonly source: Extract<ComponentCreationSource, { readonly kind: 'ready' }>;
   readonly taken: readonly string[];
+  /** Folders that already hold components, offered as suggestions. */
+  readonly folders: readonly string[];
   readonly onClose: () => void;
-  readonly onCreate: (name: string, options: { readonly withProps: boolean }) => void;
+  readonly onCreate: (
+    name: string,
+    options: { readonly withProps: boolean; readonly folder: string },
+  ) => void;
 }
 
 export function CreateComponentModal(props: CreateComponentModalProps) {
   const [text, setText] = useState(props.source.name);
   const [withProps, setWithProps] = useState(true);
+  const [folderText, setFolderText] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     inputRef.current?.focus();
@@ -52,9 +58,11 @@ export function CreateComponentModal(props: CreateComponentModalProps) {
   const name = toComponentName(text);
   const error = componentNameError(text, props.taken);
   const shown = text.trim() ? error : null;
+  const folder = toFolderPath(folderText);
+  const problem = error ?? folderError(folder);
   const submit = (): void => {
-    if (!error) {
-      props.onCreate(name, { withProps });
+    if (!problem) {
+      props.onCreate(name, { withProps, folder });
     }
   };
   return (
@@ -75,15 +83,24 @@ export function CreateComponentModal(props: CreateComponentModalProps) {
             setText={setText}
             name={name}
             error={shown}
+            folder={folder}
             source={props.source}
             submit={submit}
             onClose={props.onClose}
           />
+          <FolderField
+            text={folderText}
+            setText={setFolderText}
+            folders={props.folders}
+            error={folderError(folder)}
+            submit={submit}
+            onClose={props.onClose}
+          />
           <PropsOffer names={props.source.props} checked={withProps} onChange={setWithProps} />
         </div>
         <div className="modal-footer">
           <button onClick={props.onClose}>Cancel</button>
-          <button className="primary" disabled={Boolean(error)} onClick={submit}>
+          <button className="primary" disabled={Boolean(problem)} onClick={submit}>
             Create
           </button>
         </div>
@@ -98,6 +115,7 @@ function ComponentNameField({
   setText,
   name,
   error,
+  folder,
   source,
   submit,
   onClose,
@@ -107,6 +125,7 @@ function ComponentNameField({
   readonly setText: React.Dispatch<React.SetStateAction<string>>;
   readonly name: string;
   readonly error: string | null;
+  readonly folder: string;
   readonly source: Extract<ComponentCreationSource, { readonly kind: 'ready' }>;
   readonly submit: () => void;
   readonly onClose: () => void;
@@ -133,13 +152,64 @@ function ComponentNameField({
       ) : (
         <div className="hint-text">
           {source.label} becomes <code>&lt;{name || 'Name'} /&gt;</code>, saved as{' '}
-          <code>src/components/{name || 'Name'}.astro</code>
+          <code>
+            src/components/{folder ? `${folder}/` : ''}
+            {name || 'Name'}.astro
+          </code>
         </div>
       )}
     </div>
   );
 }
 
+// The folder is optional and created on the way: the first component makes
+// src/components itself, and `heading` or `sections/hero` make theirs.
+function FolderField({
+  text,
+  setText,
+  folders,
+  error,
+  submit,
+  onClose,
+}: {
+  readonly text: string;
+  readonly setText: React.Dispatch<React.SetStateAction<string>>;
+  readonly folders: readonly string[];
+  readonly error: string | null;
+  readonly submit: () => void;
+  readonly onClose: () => void;
+}) {
+  return (
+    <div>
+      <label>Folder (optional)</label>
+      <input
+        value={text}
+        spellCheck={false}
+        list="component-folders"
+        placeholder="heading, or sections/hero"
+        onChange={(event) => setText(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            submit();
+          } else if (event.key === 'Escape') {
+            onClose();
+          }
+        }}
+      />
+      <datalist id="component-folders">
+        {folders.map((folder) => (
+          <option key={folder} value={folder} />
+        ))}
+      </datalist>
+      {error ? (
+        <div className="error-text">{error}</div>
+      ) : (
+        <div className="hint-text">Created if it doesn’t exist yet.</div>
+      )}
+    </div>
+  );
+}
+
 function PropsOffer({
   names,
   checked,
diff --git a/src/panels/PalettePanel.tsx b/src/panels/PalettePanel.tsx
index 0e28d9bb..e884247b 100644
--- a/src/panels/PalettePanel.tsx
+++ b/src/panels/PalettePanel.tsx
@@ -27,7 +27,10 @@ interface PalettePanelProps {
   readonly trailingSlash: TrailingSlash;
   readonly onInsert: (name: string) => void;
   readonly onDragBegin?: () => void;
-  readonly onCreateComponent: (name: string, options: { readonly withProps: boolean }) => void;
+  readonly onCreateComponent: (
+    name: string,
+    options: { readonly withProps: boolean; readonly folder: string },
+  ) => void;
   readonly onUsage?: (component: ScanComponent) => Promise<unknown>;
   readonly onOpenUsage?: (file: ComponentUsageFile) => void;
   readonly pageInstances?: (name: string) => readonly { readonly id: string }[];
@@ -357,6 +360,14 @@ function PalettePopups({
         <CreateComponentModal
           source={source}
           taken={props.components.map((component) => component.name)}
+          folders={[
+            ...new Set(
+              props.components
+                .filter((component) => !component.isLayout)
+                .map((component) => component.folder)
+                .filter(Boolean),
+            ),
+          ].sort()}
           onClose={() => setCreating(false)}
           onCreate={(name, options) => {
             setCreating(false);
diff --git a/src/panels/PreviewPane.tsx b/src/panels/PreviewPane.tsx
index 808c0022..0fc3b807 100644
--- a/src/panels/PreviewPane.tsx
+++ b/src/panels/PreviewPane.tsx
@@ -3,7 +3,7 @@ import { usePointerDrag } from '../ui/usePointerDrag';
 import CanvasView from './CanvasView';
 import type { DevDiagnosis } from './DevOffline';
 import type { OverlayInfo, SpacingHover } from './PreviewOverlays';
-import type { PreviewCrumb, PreviewDevice } from './PreviewToolbar';
+import type { CreateComponentAction, PreviewCrumb, PreviewDevice } from './PreviewToolbar';
 import { DevOffline } from './DevOffline';
 import { PreviewOverlays } from './PreviewOverlays';
 import { PreviewToolbar, deviceForWidth, deviceWidth } from './PreviewToolbar';
@@ -43,6 +43,7 @@ interface PreviewPaneProps {
   readonly focusWhole?: boolean;
   readonly device: PreviewDevice;
   readonly onDevice: (device: PreviewDevice) => void;
+  readonly createComponent?: CreateComponentAction;
 }
 
 export default function PreviewPane(props: PreviewPaneProps) {
@@ -62,6 +63,7 @@ export default function PreviewPane(props: PreviewPaneProps) {
         {...(props.onCrumb === undefined ? {} : { onCrumb: props.onCrumb })}
         activeDevice={sizing.activeDevice}
         onDevice={props.onDevice}
+        {...(props.createComponent === undefined ? {} : { createComponent: props.createComponent })}
         {...(props.device === 'canvas'
           ? {}
           : {
diff --git a/src/panels/PreviewToolbar.tsx b/src/panels/PreviewToolbar.tsx
index 144a5ca0..72c149aa 100644
--- a/src/panels/PreviewToolbar.tsx
+++ b/src/panels/PreviewToolbar.tsx
@@ -1,6 +1,13 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { IconProps } from '../ui/Icons';
-import { CanvasIcon, ChevronRightIcon, DesktopIcon, PhoneIcon, TabletIcon } from '../ui/Icons';
+import {
+  CanvasIcon,
+  ChevronRightIcon,
+  ComponentPlusIcon,
+  DesktopIcon,
+  PhoneIcon,
+  TabletIcon,
+} from '../ui/Icons';
 import { PreviewSizeControls } from './PreviewSizeControls';
 import type { PreviewSizeControlsProps } from './PreviewSizeControls';
 
@@ -50,18 +57,28 @@ export function deviceWidth(device: PreviewDevice): number | null | undefined {
   return DEVICES.find((entry) => entry.key === device)?.width;
 }
 
+/** The cube button: make a component out of the selected element. */
+export interface CreateComponentAction {
+  readonly enabled: boolean;
+  /** What it does when it can, or why it can't. */
+  readonly title: string;
+  readonly onClick: () => void;
+}
+
 export function PreviewToolbar({
   crumbs,
   onCrumb,
   activeDevice,
   onDevice,
   sizing,
+  createComponent,
 }: {
   readonly crumbs: readonly PreviewCrumb[];
   readonly onCrumb?: (id: string | null) => void;
   readonly activeDevice: PreviewDevice;
   readonly onDevice: (device: PreviewDevice) => void;
   readonly sizing?: PreviewSizeControlsProps;
+  readonly createComponent?: CreateComponentAction;
 }) {
   const shownCrumbs = useFoldedCrumbs(crumbs);
   const buttonRefs = useRef<Partial<Record<FixedDevice, HTMLButtonElement | null>>>({});
@@ -97,6 +114,17 @@ export function PreviewToolbar({
         ))}
       </div>
       {sizing && <PreviewSizeControls {...sizing} />}
+      {createComponent && (
+        <button
+          className="toolbar-create-component"
+          title={createComponent.title}
+          aria-label="Create component"
+          disabled={!createComponent.enabled}
+          onClick={createComponent.onClick}
+        >
+          <ComponentPlusIcon size={15} />
+        </button>
+      )}
     </div>
   );
 }
diff --git a/src/panels/StylePanel.tsx b/src/panels/StylePanel.tsx
index 3c79334f..d2e47b51 100644
--- a/src/panels/StylePanel.tsx
+++ b/src/panels/StylePanel.tsx
@@ -20,6 +20,7 @@ interface StylePanelProps {
   readonly onSelectNode?: HostState['selectNode'] | undefined;
   readonly onRecordUndo?: HostState['recordUndo'] | undefined;
   readonly onAddClass?: HostState['addClass'] | undefined;
+  readonly onEnsureStyleNode?: HostState['ensureStyleNode'] | undefined;
   readonly onSpacingHover?: HostState['onSpacingHover'] | undefined;
   readonly renderedClasses?: readonly string[] | undefined;
   readonly projectClasses?: readonly string[] | undefined;
@@ -109,6 +110,7 @@ function hostState(
     selectNode: props.onSelectNode ?? null,
     recordUndo: props.onRecordUndo ?? null,
     addClass: props.onAddClass ?? null,
+    ensureStyleNode: props.onEnsureStyleNode ?? null,
     onSpacingHover: props.onSpacingHover ?? null,
     renderedClasses: [...(props.renderedClasses ?? [])],
     projectClasses: [...(props.projectClasses ?? [])],
diff --git a/src/panels/VariablesPanel.tsx b/src/panels/VariablesPanel.tsx
index 89f02875..ae136a75 100644
--- a/src/panels/VariablesPanel.tsx
+++ b/src/panels/VariablesPanel.tsx
@@ -7,6 +7,7 @@ import type {
   VariablesSnapshot,
 } from '../variablesBridge';
 import { readCSSVariables } from '../variablesBridge';
+import { variableEdit } from './variableEdits';
 import { ChevronLeftIcon, ChevronRightIcon, VariableIcon, FileIcon } from '../ui/Icons';
 
 export interface VariablesPanelProps {
@@ -77,16 +78,43 @@ export default function VariablesPanel(props: VariablesPanelProps) {
             />
           ))}
         {error && <div className="cms-error">{error}</div>}
-        {!files.length && !error && (
-          <div className="props-empty">
-            No CSS custom properties found in this project&rsquo;s stylesheets.
-          </div>
-        )}
+        {!files.length && !error && <CreateVariablesFile projectPath={project.path} />}
       </div>
     </div>
   );
 }
 
+// A project with no variables has no stylesheet to add them to. One click makes
+// src/styles/variables.css and imports it, so there is somewhere to start.
+function CreateVariablesFile({ projectPath }: { readonly projectPath: string }) {
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState<string | null>(null);
+  const create = (): void => {
+    setBusy(true);
+    setFailure(null);
+    void variableEdit('createVariablesFile', projectPath).then((result) => {
+      setBusy(false);
+      if (!result.ok) {
+        setFailure(result.error || 'Couldn’t create the variables file.');
+      }
+    });
+  };
+  return (
+    <div className="props-empty">
+      No CSS custom properties found in this project&rsquo;s stylesheets.
+      <div style={{ marginTop: 10 }}>
+        <button className="primary" disabled={busy} onClick={create}>
+          Create variables file
+        </button>
+      </div>
+      <div className="hint-text" style={{ marginTop: 6 }}>
+        Adds <code>src/styles/variables.css</code> and imports it in your layout.
+      </div>
+      {failure && <div className="cms-error">{failure}</div>}
+    </div>
+  );
+}
+
 function useVariableFiles(projectPath: string) {
   const [result, setResult] = useState<Result<VariablesSnapshot, string>>({
     ok: true,
diff --git a/src/panels/variableEdits.ts b/src/panels/variableEdits.ts
index 2318502b..8a79f9c9 100644
--- a/src/panels/variableEdits.ts
+++ b/src/panels/variableEdits.ts
@@ -25,6 +25,10 @@ const edits = {
     const payload = parseIpcPayload('css:moveVariables', input);
     return () => window.avb.moveCssVariables(payload);
   },
+  createVariablesFile(input: unknown) {
+    const payload = parseIpcPayload('css:createVariablesFile', input);
+    return () => window.avb.createVariablesFile(payload);
+  },
   addCssVariables(input: unknown) {
     const payload = parseIpcPayload('css:addVariables', input);
     return () => window.avb.addCssVariables(payload);
diff --git a/src/style-panel/EmbedEditor.tsx b/src/style-panel/EmbedEditor.tsx
index 9056b5bf..e5044b39 100644
--- a/src/style-panel/EmbedEditor.tsx
+++ b/src/style-panel/EmbedEditor.tsx
@@ -35,6 +35,8 @@ import { cssTokens } from './lib/css-code'
 import { buildCssRuleView, type CssRuleRange, type CssRuleView } from './lib/css-rule-view'
 import { groupProps } from './lib/sections'
 import { defaultSelectorTokens, selectorToClassTokens, snapshotTokens, tokensToSelector } from './lib/element-tokens'
+import StateSelect from './StateSelect'
+import { HTML_TAG_NAMES, isTagSelector, selectorFromTyped } from './lib/class-input'
 import { resolveStyle, indexContexts, contextKeyOf, listMatchedSelectors, selectorKey, selectorsMatch, stateForSelector, STATES, type ContextInfo, type ContextKey, type MatchedSelector, type ResolvedProp, type ResolvedStyle, type SourceKey, type StateKey, type StyleContext } from './lib/resolved'
 import { breakpointTier, buildStyleContexts, mediaParamsForBreakpoint, nativeContribsFor, nativeHasValues, nativeSelectorChips, optionsFor, selectedNativeIndexFor, type NativeStyleOptions } from './lib/native-styles'
 import type { AtRule, Declaration } from 'postcss'
@@ -68,7 +70,7 @@ import {
   selectorDependsOnAncestor,
   type MatchTarget,
 } from './lib/selectors'
-import { findNode, getHost, onHostChange, propText } from './lib/host'
+import { findNode, getHost, onHostChange, propText, walkNodes } from './lib/host'
 import {
   applyNativePropertyAt,
   applyNativeToNewBaseClass,
@@ -826,7 +828,9 @@ function ResolvedRow({ prop, resolved, busy, setProp, clearProp, liveSetProp, on
           type="button"
           className="embed-editor_prop-label embed-editor_prop-orange"
           disabled={busy}
-          title={`Set by ${resolved.winner.selectorText} — click to see all selectors`}
+          title={resolved.winner.inheritedDepth === undefined
+            ? `Set by ${resolved.winner.selectorText} — click to see all selectors`
+            : `Inherited from ${resolved.winner.selectorText} — click to see all selectors`}
           onClick={(event) => onProvenance(prop, event.currentTarget.getBoundingClientRect())}
         >
           {prop}
@@ -1407,6 +1411,13 @@ export function SelectorPicker({
     if (!q) {return own}
     const taken = new Set(own.map((s) => s.selector))
     const extra: SelectorSuggestion[] = []
+    // Every HTML tag that starts with what was typed: `h2` is "all h2 elements",
+    // whatever element is selected — the way Webflow offers a tag as a selector.
+    for (const tag of HTML_TAG_NAMES) {
+      if (!tag.startsWith(q) || taken.has(tag) || chipKeys.has(selectorKey(tag))) {continue}
+      taken.add(tag)
+      extra.push({ selector: tag, kind: 'tag' })
+    }
     for (const cls of projectClasses) {
       const selector = `.${cls}`
       if (taken.has(selector) || chipKeys.has(selectorKey(selector))) {continue}
@@ -1509,6 +1520,7 @@ export function SelectorPicker({
                 active && 'is-active',
                 sel.pending && 'is-pending',
                 sel.fromComponent && 'is-component',
+                isTagSelector(sel.text) && 'is-tag',
                 entry.global && 'is-global',
                 entry.inherited && 'is-inherited',
                 dimmed && 'is-dimmed',
@@ -1544,7 +1556,7 @@ export function SelectorPicker({
               ref={inputRef}
               className="u-input embed-editor_selector-add"
               value={draft}
-              placeholder="Add a selector (e.g. .card:hover)"
+              placeholder="Add a class (e.g. u-section) or selector"
               spellCheck={false}
               disabled={busy}
               role="combobox"
@@ -1577,7 +1589,7 @@ export function SelectorPicker({
                     type="button"
                     role="option"
                     aria-selected={i === highlight}
-                    className={`embed-editor_suggest-item ${i === highlight ? 'is-active' : ''}`}
+                    className={`embed-editor_suggest-item ${s.kind === 'tag' ? 'is-tag' : ''} ${i === highlight ? 'is-active' : ''}`}
                     // Keep the input focused so its blur doesn't close the list before the click.
                     onMouseDown={(event) => event.preventDefault()}
                     onMouseMove={() => setHighlight(i)}
@@ -2319,6 +2331,14 @@ function StyleCard({
         onAdd={onAddSelector}
         onVisibleSelectorsChange={rememberVisibleSelectors}
       />
+      {/* Webflow's state dropdown: the same class in another state (Hover, Pressed,
+          ::before, …). It edits the selector the chips above show. */}
+      <StateSelect
+        selectors={selectors}
+        activeSelector={activeSelector}
+        busy={busy}
+        onSelect={onSelectActive}
+      />
       {/* Where edits go, as a compact text link: the Webflow class style or a
           specific embed (page embeds listed in cascade order). Sits under the
           selector input, mirroring the reference layout. */}
@@ -2530,13 +2550,20 @@ type Content = {
   partial?: boolean
 }
 
+// How long an edit waits for a freshly added <style> block to reach the panel.
+const STYLE_BLOCK_WAIT_MS = 5000
+
 // Re-read every embed no more than this often when just switching selection.
 const BG_REFRESH_THROTTLE_MS = 4000
 
 /** Which stylesheets the host is offering, as a comparable string. */
 function sheetSignature(): string {
   const host = getHost()
-  return [...host.files, ...host.astroFiles].map((f) => f.path).join('|')
+  const styleNodes: string[] = []
+  walkNodes(host.nodes, (node) => {
+    if (node.kind === 'raw' && node.name === 'style') {styleNodes.push(node.id)}
+  })
+  return [...host.files, ...host.astroFiles].map((f) => f.path).concat(styleNodes).join('|')
 }
 // How often to poll the Designer for out-of-app edits (classes / attributes /
 // native styles). The API has no change events, so we re-read on this cadence and
@@ -3862,7 +3889,9 @@ export default function EmbedEditor() {
   // `.hero { @container (width < 50em) }`: resolve to the deepest selector + its query
   // context and select it there. A plain selector (no braces) is used as-is.
   const addTypedSelector = useCallback((input: string) => {
-    const trimmed = input.trim()
+    // A bare word is a class, the way Webflow's field reads it (`u-section` →
+    // `.u-section`); tags and real selectors stay as typed.
+    const trimmed = selectorFromTyped(input)
     if (!trimmed) {return}
     if (trimmed.includes('{')) {
       const parsed = parseNestedInput(trimmed)
@@ -4500,6 +4529,7 @@ export default function EmbedEditor() {
   // Writes target the picked selector's rule in the current context/state, and
   // create that rule on the first edit when it doesn't exist yet.
   const selectedRule = resolved?.selectedRule ?? null
+  const awaitingStyleRef = useRef<{ prop: string; value: string; important: boolean; selectorOverride: string | undefined } | null>(null)
   const createSelectedRule = (prop: string, value: string, important: boolean, selectorOverride?: string) => {
     // A Webflow-breakpoint context with no equivalent embed query yet writes into a
     // synthesized @media block; otherwise the embed's base or existing query block.
@@ -4522,7 +4552,25 @@ export default function EmbedEditor() {
     const region = anchor && doc && anchor.embedKey === doc.source.key
       ? doc.regions[anchor.regionIndex]
       : doc?.regions[0]
-    if (!doc || !region) { setStatus('No embed here to write to — add an HTML embed first.'); return }
+    if (!doc || !region) {
+      // Nowhere to write yet: ask the page for a <style> block and hold this edit
+      // until it appears in the model (see the retry effect below).
+      const ensure = getHost().ensureStyleNode
+      if (ensure && !awaitingStyleRef.current && ensure()) {
+        awaitingStyleRef.current = { prop, value, important, selectorOverride }
+        setStatus('Adding a <style> block to this page…')
+        // A page that cannot take one (nothing editable) would wait forever.
+        window.setTimeout(() => {
+          if (awaitingStyleRef.current) {
+            awaitingStyleRef.current = null
+            setStatus('Couldn’t add a <style> block to this page.')
+          }
+        }, STYLE_BLOCK_WAIT_MS)
+        return
+      }
+      setStatus('No stylesheet here to write to — open a page or add a <style> block first.')
+      return
+    }
     const fullSelector = selectorOverride ?? activeSelector
     void (async () => {
       setBusyBoth(true)
@@ -4565,6 +4613,14 @@ export default function EmbedEditor() {
       }
     })()
   }
+  // The edit that asked for a <style> block runs again once a stylesheet exists to
+  // take it — the same edit, so nothing the user typed is lost.
+  useEffect(() => {
+    const held = awaitingStyleRef.current
+    if (!held || docByKey.size === 0) {return}
+    awaitingStyleRef.current = null
+    createSelectedRule(held.prop, held.value, held.important, held.selectorOverride)
+  })
   // Add a just-typed query to the embed IMMEDIATELY as an empty block, so it persists and
   // reads back as a real context without waiting for the first property. `ctxKey` (wrap)
   // scaffolds a top-level `@query {}`; `path` (nest) scaffolds `selector { @query {} }`.
diff --git a/src/style-panel/ProvenanceList.tsx b/src/style-panel/ProvenanceList.tsx
index 2c68baa9..a588d3f0 100644
--- a/src/style-panel/ProvenanceList.tsx
+++ b/src/style-panel/ProvenanceList.tsx
@@ -43,7 +43,9 @@ export default function ProvenanceList({ contributors, prop, onSelect }: {
       {contributors.map((c, index) => {
         const cls = `embed-editor_provenance-item ${index === activeIdx ? 'is-active' : ''}`
         const embedName = c.embedKey && nav ? nav.labelFor(c.embedKey) : null
-        const origin = c.origin === 'native'
+        const origin = c.inheritedDepth !== undefined
+          ? <span className="embed-editor_provenance-origin" title="Handed down by an ancestor">Inherited</span>
+          : c.origin === 'native'
           ? <span className="embed-editor_provenance-origin">Webflow</span>
           : c.embedKey && nav && embedName
             ? (
diff --git a/src/style-panel/StateSelect.tsx b/src/style-panel/StateSelect.tsx
new file mode 100644
index 00000000..cf2727e8
--- /dev/null
+++ b/src/style-panel/StateSelect.tsx
@@ -0,0 +1,86 @@
+import { useMemo } from 'react'
+import Select, { type SelectOption } from './components/Select'
+import { selectorKey, type MatchedSelector } from './lib/resolved'
+import {
+  STATE_DEFINITIONS,
+  STATE_GROUP_LABEL,
+  splitState,
+  stateDefinition,
+  withState,
+  type StateGroup,
+} from './lib/states'
+
+// Webflow's state dropdown: the class stays put, the state changes. Choosing
+// Hover on `.card` targets `.card:hover`; None goes back to `.card`. Every choice
+// is just another selector handed to the same `onSelect` a chip click uses, so the
+// panel below reads and writes it exactly as it would a typed `.card:hover`.
+
+type StateSelectProps = {
+  readonly selectors: readonly MatchedSelector[]
+  readonly activeSelector: string
+  readonly busy: boolean
+  readonly onSelect: (selector: string) => void
+}
+
+const GROUP_ORDER: readonly StateGroup[] = ['interaction', 'form', 'position', 'element']
+const NONE = ''
+
+// The states that already carry styles for this base, so the list can mark them
+// the way Webflow dots a state that has changes.
+function styledSuffixes(selectors: readonly MatchedSelector[], base: string): ReadonlySet<string> {
+  const baseKey = selectorKey(base)
+  const styled = new Set<string>()
+  for (const chip of selectors) {
+    const split = splitState(chip.text)
+    if (split.suffix !== NONE && selectorKey(split.base) === baseKey) {
+      styled.add(split.suffix)
+    }
+  }
+  return styled
+}
+
+function stateOptions(styled: ReadonlySet<string>): SelectOption<string>[] {
+  const options: SelectOption<string>[] = [{ value: NONE, label: 'None' }]
+  for (const group of GROUP_ORDER) {
+    options.push({ value: `heading:${group}`, label: STATE_GROUP_LABEL[group], heading: true })
+    for (const definition of STATE_DEFINITIONS) {
+      if (definition.group === group) {
+        options.push({
+          value: definition.suffix,
+          label: definition.label,
+          indent: true,
+          marked: styled.has(definition.suffix),
+        })
+      }
+    }
+  }
+  return options
+}
+
+export default function StateSelect({
+  selectors,
+  activeSelector,
+  busy,
+  onSelect,
+}: StateSelectProps) {
+  const { base, suffix } = splitState(activeSelector)
+  const styled = useMemo(() => styledSuffixes(selectors, base), [selectors, base])
+  const options = useMemo(() => stateOptions(styled), [styled])
+  // A trailing state the list does not know (`:where(...)`, a vendor pseudo) is
+  // left to the chips: showing None for it would make picking None a lie.
+  const known = suffix === NONE || stateDefinition(suffix) !== undefined
+  const value = known ? suffix : NONE
+  return (
+    <div className="embed-editor_state-row">
+      <span className="embed-editor_state-label">State</span>
+      <Select
+        value={value}
+        options={options}
+        ariaLabel="Selector state"
+        className="embed-editor_state-select"
+        disabled={busy || !base}
+        onChange={(next) => onSelect(withState(base, next))}
+      />
+    </div>
+  )
+}
diff --git a/src/style-panel/VariableConnect.tsx b/src/style-panel/VariableConnect.tsx
index b99a25c1..b6ab2f3b 100644
--- a/src/style-panel/VariableConnect.tsx
+++ b/src/style-panel/VariableConnect.tsx
@@ -2,6 +2,8 @@ import { cloneElement, isValidElement, useEffect, useLayoutEffect, useRef, useSt
 import type { CSSProperties, MutableRefObject, ReactElement, ReactNode, Ref } from 'react'
 import { createPortal, flushSync } from 'react-dom'
 import { streamProjectVariables, type ProjectVariable } from './lib/webflow'
+import { getHost } from './lib/host'
+import { variableEdit } from '../panels/variableEdits'
 import { panelBox, panelSpan } from './lib/panel-box'
 import { caretOffset, highlightCss, setCaretOffset, stepNumberAt, stepSize } from './lib/css-code'
 import CustomValue, { doesNotFit } from '../ui/CustomValueEditor.jsx'
@@ -132,6 +134,34 @@ function varTypeAllowed(prop: string | undefined, type: string): boolean {
   return type !== 'Color' && type !== 'FontFamily'
 }
 
+// The empty picker. With a search typed it is just "nothing matches"; with none, the
+// project has no variables at all, and the way out is the one in the Variables panel:
+// a stylesheet made for them. The list re-reads by itself when that file lands.
+function NoVariables({ searching }: { searching: boolean }) {
+  const [busy, setBusy] = useState(false)
+  const [failure, setFailure] = useState<string | null>(null)
+  if (searching) {return <p className="embed-editor_varpicker-empty">No variables match.</p>}
+  const create = () => {
+    const projectPath = getHost().projectPath
+    if (!projectPath) {return}
+    setBusy(true)
+    setFailure(null)
+    void variableEdit('createVariablesFile', projectPath).then((result) => {
+      setBusy(false)
+      if (!result.ok) {setFailure(result.error || 'Couldn’t create the variables file.')}
+    })
+  }
+  return (
+    <div className="embed-editor_varpicker-empty">
+      <p>This project has no variables yet.</p>
+      <button type="button" className="embed-editor_varpicker-create" disabled={busy} onClick={create}>
+        Create variables file
+      </button>
+      {failure ? <p>{failure}</p> : null}
+    </div>
+  )
+}
+
 // Nest variables Collection → Group → variable (a group may be empty for a variable
 // that isn't in a folder). Input is pre-sorted, so map insertion order is stable.
 type VarCollection = { collection: string; groups: Array<{ group: string; items: ProjectVariable[] }> }
@@ -157,17 +187,46 @@ function byCollection(vars: ProjectVariable[]): VarCollection[] {
 let sharedVars: ProjectVariable[] = []
 let sharedDone = false
 let sharedLoading = false
+// The stylesheets changed since the list was read (a variable added, a file created):
+// what is held is out of date and is read again the next time it is asked for. Without
+// this the list was read once per session, so a project that had no variables when it
+// was first read said "No variables found" for good, however many were added after.
+let sharedStale = false
+let watchingCss = false
 const sharedListeners = new Set<() => void>()
+function watchCssChanges() {
+  if (watchingCss || typeof window.avb?.onCssChanged !== 'function') {return}
+  watchingCss = true
+  window.avb.onCssChanged(() => {
+    sharedStale = true
+    // Someone is looking at the list: read it again now rather than on their next click.
+    if (sharedListeners.size > 0) {ensureSharedVars()}
+  })
+}
 function ensureSharedVars() {
-  if (sharedDone || sharedLoading) {return}
+  watchCssChanges()
+  if (sharedLoading || (sharedDone && !sharedStale)) {return}
   sharedLoading = true
+  sharedStale = false
   const seen = new Set<string>()
+  const fresh: ProjectVariable[] = []
   void streamProjectVariables((v) => {
     if (seen.has(v.binding)) {return}
     seen.add(v.binding)
-    sharedVars = [...sharedVars, v]
+    fresh.push(v)
+    // Show progress, but never blank a list that was fine a moment ago.
+    if (!sharedDone) {
+      sharedVars = [...fresh]
+      sharedListeners.forEach((fn) => fn())
+    }
+  }, () => false).then(() => {
+    sharedVars = fresh
+    sharedDone = true
+    sharedLoading = false
     sharedListeners.forEach((fn) => fn())
-  }, () => false).then(() => { sharedDone = true; sharedLoading = false; sharedListeners.forEach((fn) => fn()) })
+    // Changed again while reading: go round once more.
+    if (sharedStale) {ensureSharedVars()}
+  })
 }
 export function useSharedVars(active: boolean): { vars: ProjectVariable[]; loading: boolean } {
   const [, force] = useState(0)
@@ -365,7 +424,7 @@ export function VariablePicker({ anchor, vars, loading, prop, selectedBinding, o
         {loading && !vars.length ? (
           <p className="embed-editor_varpicker-empty">Loading variables…</p>
         ) : !filtered.length ? (
-          <p className="embed-editor_varpicker-empty">No variables found.</p>
+          <NoVariables searching={!!query} />
         ) : (
           byCollection(filtered).map(({ collection, groups }) => {
             // A search always expands (so matches aren't hidden behind a collapsed head).
diff --git a/src/style-panel/embed-editor.css b/src/style-panel/embed-editor.css
index fe4eedad..b4368198 100644
--- a/src/style-panel/embed-editor.css
+++ b/src/style-panel/embed-editor.css
@@ -4858,3 +4858,50 @@ textarea.embed-editor_value-input.is-expanded {
   color: var(--color-text-tertiary);
   text-transform: uppercase; /* DEG / % — Webflow shows the unit uppercase */
 }
+
+/* State dropdown (None / Hover / Pressed / ::before …) under the selector well. */
+.embed-editor_state-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.embed-editor_state-label {
+  flex: none;
+  color: var(--text-secondary, inherit);
+  font-size: 12px;
+}
+
+.embed-editor_state-select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* A tag selector (`h2`, `p`) is pink, the way Webflow marks "all <h2>" as a target
+   of its own, apart from the blue classes. */
+.embed-editor_selector-chip.is-tag {
+  --color-class-tag-bg: #c2418a;
+}
+.embed-editor_suggest-item.is-tag .embed-editor_suggest-sel,
+.embed-editor_suggest-item.is-tag .embed-editor_suggest-kind {
+  color: #ee6fb5;
+}
+.embed-editor_suggest-item.is-tag.is-active { background: #c2418a; }
+.embed-editor_suggest-item.is-tag.is-active .embed-editor_suggest-sel,
+.embed-editor_suggest-item.is-tag.is-active .embed-editor_suggest-kind { color: #fff; }
+
+/* Focusing a field is as good as hovering it for finding the variable dot. */
+.embed-editor_varconnect:focus-within .embed-editor_varconnect-dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.embed-editor_varpicker-create {
+  margin-top: 6px;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm, 6px);
+  background: #7c5cff;
+  color: #fff;
+}
+.embed-editor_varpicker-create:disabled { opacity: 0.6; }
diff --git a/src/style-panel/lib/cascade.ts b/src/style-panel/lib/cascade.ts
index 5a747230..95cb4a10 100644
--- a/src/style-panel/lib/cascade.ts
+++ b/src/style-panel/lib/cascade.ts
@@ -9,6 +9,7 @@
 // declarations are flagged `overriddenBy` so you still see what actually applies.
 
 import { canonicalCompound, compareSpecificity, matchSelectorList, type MatchTarget } from './selectors'
+import { isViewStatePseudoClass } from './states'
 import type { ParsedRule, SelectorInfo, Specificity } from './types'
 
 export type RuleKind = 'base' | 'pseudo-class' | 'pseudo-element' | 'at-rule'
@@ -18,9 +19,8 @@ export type RuleKind = 'base' | 'pseudo-class' | 'pseudo-element' | 'at-rule'
 // a pseudo-element. Structural pseudos (`:first-child`, `:nth-child`, `:not`) and
 // pseudos on an ANCESTOR (`.u-section:first-child .u-heading`) keep it base — the
 // subject is still styled at rest — so they must NOT push it into the pseudo bucket.
-const VIEW_STATES = new Set([':hover', ':focus', ':active'])
 function subjectHasState(text: string): boolean {
-  return canonicalCompound(text).pseudoClasses.some((pseudo) => VIEW_STATES.has(pseudo))
+  return canonicalCompound(text).pseudoClasses.some((pseudo) => isViewStatePseudoClass(pseudo))
 }
 
 export type DeclStatus = {
@@ -41,12 +41,50 @@ export type MatchedRule = {
   declStatus: Record<string, DeclStatus>
 }
 
+/**
+ * The properties an element takes from its parent when no rule sets them on the
+ * element itself (CSS "inherited properties"). A `<p>` in a `.section` that sets
+ * `color` is that colour until something targets the `<p>` — and anything that
+ * does, however weak (`p`), beats what came down from the parent.
+ *
+ * Custom properties inherit too, but they are read through `var()`, where the
+ * panel already shows where the value is defined, so they are left out here.
+ */
+export const INHERITED_PROPERTIES: ReadonlySet<string> = new Set([
+  'accent-color', 'border-collapse', 'border-spacing', 'caption-side', 'caret-color',
+  'color', 'cursor', 'direction', 'empty-cells', 'fill', 'font', 'font-family',
+  'font-feature-settings', 'font-kerning', 'font-optical-sizing', 'font-size',
+  'font-stretch', 'font-style', 'font-variant', 'font-variation-settings', 'font-weight',
+  'hyphens', 'letter-spacing', 'line-height', 'list-style', 'list-style-image',
+  'list-style-position', 'list-style-type', 'orphans', 'overflow-wrap', 'pointer-events',
+  'quotes', 'stroke', 'tab-size', 'text-align', 'text-align-last', 'text-indent',
+  'text-justify', 'text-shadow', 'text-transform', 'text-underline-offset',
+  'text-underline-position', 'text-wrap', 'visibility', 'white-space', 'widows',
+  'word-break', 'word-spacing', 'writing-mode',
+])
+
+/** The rules that reach one ancestor, `depth` generations above the element. */
+export type InheritedLevel = {
+  readonly depth: number
+  readonly rules: readonly MatchedRule[]
+}
+
 export type RuleModel = {
   base: MatchedRule[]
   conditional: MatchedRule[]
   matchedRuleCount: number
+  /**
+   * What the element's ancestors are styled with, nearest first, restricted to
+   * rules that set an inherited property. Absent when no ancestor is styled that
+   * way (or none is known).
+   */
+  inherited?: readonly InheritedLevel[]
 }
 
+// Deeper than any real page; the walk stops at the root long before this. The
+// cap only exists so a corrupted parent chain (a cycle) cannot loop forever.
+const MAX_INHERITANCE_DEPTH = 64
+
 type Hit = {
   rule: ParsedRule
   matchedSelectors: SelectorInfo[]
@@ -84,6 +122,28 @@ function strongestOf(selectors: SelectorInfo[]): { selector: SelectorInfo; speci
 }
 
 export async function computeRuleModel(rules: ParsedRule[], target: MatchTarget): Promise<RuleModel> {
+  const model = await computeRuleModelAt(rules, target)
+  const inherited = await computeInheritedLevels(rules, target)
+  return inherited.length ? { ...model, inherited } : model
+}
+
+// The same matching, run once per ancestor against only the rules that could hand
+// something down. The element's own rules are matched first and separately, so
+// this never delays the answer the panel needs to paint.
+async function computeInheritedLevels(rules: ParsedRule[], target: MatchTarget): Promise<InheritedLevel[]> {
+  const carriers = rules.filter((rule) => rule.declarations.some((decl) => INHERITED_PROPERTIES.has(decl.prop)))
+  if (!carriers.length) {return []}
+  const levels: InheritedLevel[] = []
+  let key = target.view.parentKey(target.rootKey)
+  for (let depth = 1; key != null && depth <= MAX_INHERITANCE_DEPTH; depth += 1) {
+    const model = await computeRuleModelAt(carriers, { rootKey: key, view: target.view })
+    if (model.matchedRuleCount > 0) {levels.push({ depth, rules: [...model.base, ...model.conditional] })}
+    key = target.view.parentKey(key)
+  }
+  return levels
+}
+
+async function computeRuleModelAt(rules: ParsedRule[], target: MatchTarget): Promise<RuleModel> {
   const hits: Hit[] = []
 
   for (const rule of rules) {
diff --git a/src/style-panel/lib/class-input.ts b/src/style-panel/lib/class-input.ts
new file mode 100644
index 00000000..41a72e2c
--- /dev/null
+++ b/src/style-panel/lib/class-input.ts
@@ -0,0 +1,37 @@
+// What a name typed into the selector box means.
+//
+// In Webflow the field is a class field: type `hero` and you get `.hero`. Here the
+// same box also takes real selectors (`.card:hover`, `ul > li`), so a bare word is
+// ambiguous — `section` is the tag, `u-section` is a class nobody wrote a dot in
+// front of. The rule: a bare word is a class unless it is an HTML tag. Anything
+// with a dot, colon, bracket, combinator or space is already a selector and is
+// left exactly as typed.
+
+const HTML_TAGS: ReadonlySet<string> = new Set([
+  'a', 'abbr', 'address', 'article', 'aside', 'audio', 'b', 'blockquote', 'body', 'br', 'button',
+  'canvas', 'caption', 'code', 'dd', 'details', 'div', 'dl', 'dt', 'em', 'fieldset',
+  'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header',
+  'hr', 'html', 'i', 'iframe', 'img', 'input', 'label', 'legend', 'li', 'main', 'mark', 'nav',
+  'ol', 'optgroup', 'option', 'p', 'picture', 'pre', 'section', 'select', 'small', 'span',
+  'strong', 'sub', 'summary', 'sup', 'svg', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th',
+  'thead', 'time', 'tr', 'u', 'ul', 'video',
+])
+
+/** Every HTML tag the selector box offers, in alphabetical order. */
+export const HTML_TAG_NAMES: readonly string[] = [...HTML_TAGS].sort()
+
+/** Whether `text` is nothing but an HTML tag name — `h2`, `section`. */
+export function isTagSelector(text: string): boolean {
+  return HTML_TAGS.has(text.trim().toLowerCase()) && /^[A-Za-z][A-Za-z0-9]*$/.test(text.trim())
+}
+
+const BARE_WORD = /^[A-Za-z_][\w-]*$/
+
+/** The selector to use for what was typed: a bare non-tag word becomes a class. */
+export function selectorFromTyped(input: string): string {
+  const text = input.trim()
+  if (BARE_WORD.test(text) && !HTML_TAGS.has(text.toLowerCase())) {
+    return `.${text}`
+  }
+  return text
+}
diff --git a/src/style-panel/lib/host.ts b/src/style-panel/lib/host.ts
index 44bbcba8..0eeb9de5 100644
--- a/src/style-panel/lib/host.ts
+++ b/src/style-panel/lib/host.ts
@@ -75,6 +75,10 @@ export type HostState = {
    *  box should land it on the element, the way a class field would — a rule
    *  for a class the element doesn't carry would never apply. */
   addClass: ((className: string) => void) | null
+  /** Give the open page a `<style is:global>` block to write rules into, when it
+   *  has none, and return the id of the block (new or existing). Null when no
+   *  editable page is open. */
+  ensureStyleNode: (() => string | null) | null
   /** What the spacing box is pointing at, for the canvas to draw over the
    *  selected element: hovering `padding-top` lights the strip of the page that
    *  padding-top holds open. Null when the pointer leaves it. */
@@ -116,6 +120,7 @@ const state: HostState = {
   selectNode: null,
   recordUndo: null,
   addClass: null,
+  ensureStyleNode: null,
   onSpacingHover: null,
 }
 
diff --git a/src/style-panel/lib/native-styles.ts b/src/style-panel/lib/native-styles.ts
index 21fdc640..60673118 100644
--- a/src/style-panel/lib/native-styles.ts
+++ b/src/style-panel/lib/native-styles.ts
@@ -42,11 +42,8 @@ function isBreakpointId(value: string): value is BreakpointId {
 // sees them, and one that does not is not asked to scroll past them.
 
 // The panel's interaction state → Webflow pseudo (null = base / noPseudo).
-const PSEUDO_FOR_STATE: Record<StateKey, string | null> = {
-  '': null,
-  ':hover': 'hover',
-  ':focus': 'focus',
-  ':active': 'active',
+function pseudoForState(state: StateKey): string | null {
+  return state === '' ? null : state.slice(1)
 }
 
 export const breakpointLabel = (id: BreakpointId): string =>
@@ -98,7 +95,7 @@ export function breakpointForAtContext(atContext: string): BreakpointId | null {
 export function readOptionsFor(breakpoint: BreakpointId, state: StateKey): NativeStyleOptions | undefined {
   const options: NativeStyleOptions = {}
   if (breakpoint !== 'main') {options.breakpoint = breakpoint}
-  const pseudo = PSEUDO_FOR_STATE[state]
+  const pseudo = pseudoForState(state)
   if (pseudo) {options.pseudo = pseudo}
   return Object.keys(options).length ? options : undefined
 }
@@ -112,7 +109,7 @@ export function readOptionsFor(breakpoint: BreakpointId, state: StateKey): Nativ
 export function optionsFor(context: StyleContext, state: StateKey): NativeStyleOptions | undefined {
   const options: NativeStyleOptions = {}
   if (context.breakpoint && context.breakpoint !== 'main') {options.breakpoint = context.breakpoint}
-  const pseudo = PSEUDO_FOR_STATE[state]
+  const pseudo = pseudoForState(state)
   if (pseudo) {options.pseudo = pseudo}
   return Object.keys(options).length ? options : undefined
 }
diff --git a/src/style-panel/lib/resolved.ts b/src/style-panel/lib/resolved.ts
index 0517b102..75b07333 100644
--- a/src/style-panel/lib/resolved.ts
+++ b/src/style-panel/lib/resolved.ts
@@ -5,13 +5,14 @@
 // (orange), which selectors contribute, and which one wins. Pure + synchronous
 // so switching selector/context/state just re-derives — no re-scan.
 
-import { compareCascade } from './cascade'
-import type { RuleModel } from './cascade'
+import { compareCascade, INHERITED_PROPERTIES } from './cascade'
+import type { MatchedRule, RuleModel } from './cascade'
 import { canonicalCompound, compareSpecificity, normalizePseudoElement } from './selectors'
+import { isViewStatePseudoClass, VIEW_STATE_PSEUDO_CLASSES, type ViewStatePseudoClass } from './states'
 import type { BreakpointId, ParsedRule, Specificity } from './types'
 
 export type ContextKey = string // '' = Base; else the joined atContext
-export type StateKey = '' | ':hover' | ':focus' | ':active'
+export type StateKey = '' | ViewStatePseudoClass
 
 /** Which layer an edit targets: the embed CSS or the native Webflow class style. */
 export type SourceKey = 'embed' | 'native'
@@ -51,11 +52,10 @@ export type NativeContribution = {
   atState: boolean
 }
 
-export const STATES: readonly StateKey[] = ['', ':hover', ':focus', ':active']
-const INTERACTION_STATES = new Set<string>([':hover', ':focus', ':active'])
+export const STATES: readonly StateKey[] = ['', ...VIEW_STATE_PSEUDO_CLASSES]
 
 function isStateKey(value: string): value is Exclude<StateKey, ''> {
-  return INTERACTION_STATES.has(value)
+  return isViewStatePseudoClass(value)
 }
 
 // Native class styles are ordered before any embed rule so embed CSS (injected
@@ -111,6 +111,9 @@ export type Contributor = {
   winning: boolean
   /** True when the selector can't be a token chip (combinator / :is / :has / …). */
   complexOnly: boolean
+  /** Set when the value is handed down by an ancestor `depth` generations up, not
+   *  set on the element: it loses to every rule that targets the element itself. */
+  inheritedDepth?: number
 }
 
 export type ResolvedProp = {
@@ -367,6 +370,71 @@ export function listMatchedSelectors(model: RuleModel, context: ContextKey): Mat
   )
 }
 
+// Whether a rule in `ruleCtx` reaches a view of `context`: the context's own rules,
+// plus the base and enclosing-query rules it builds on.
+function reachesContext(ruleCtx: ContextKey, context: ContextKey): boolean {
+  return ruleCtx === context || ruleCtx === '' || context.startsWith(`${ruleCtx} › `)
+}
+
+// One contributor per inherited property: the value from the NEAREST ancestor that
+// sets it, since that is the one the element actually inherits. An ancestor's own
+// states and pseudo-elements never reach a child, so only its resting selectors count.
+function foldInherited(model: RuleModel, context: ContextKey, byProp: Map<string, Contributor[]>): void {
+  const taken = new Set<string>()
+  for (const level of model.inherited ?? []) {
+    const atLevel = new Map<string, Contributor>()
+    for (const matched of level.rules) {
+      if (!reachesContext(contextKeyOf(matched.rule), context)) {continue}
+      const best = strongestRestingSelector(matched)
+      if (!best) {continue}
+      for (const decl of matched.rule.declarations) {
+        if (!INHERITED_PROPERTIES.has(decl.prop) || taken.has(decl.prop)) {continue}
+        const candidate: Contributor = {
+          selectorText: best.text,
+          value: decl.value,
+          important: decl.important,
+          specificity: best.specificity,
+          order: matched.rule.order,
+          ruleId: matched.rule.ruleId,
+          origin: 'embed',
+          embedKey: matched.rule.embedKey,
+          embedLabel: matched.rule.embedLabel,
+          fromComponent: matched.rule.fromComponent,
+          isSelected: false,
+          winning: false,
+          complexOnly: !best.simple,
+          inheritedDepth: level.depth,
+        }
+        const current = atLevel.get(decl.prop)
+        if (!current || compareCascade(candidate, current, candidate.order, current.order) < 0) {
+          atLevel.set(decl.prop, candidate)
+        }
+      }
+    }
+    atLevel.forEach((contributor, prop) => {
+      taken.add(prop)
+      const list = byProp.get(prop) ?? []
+      list.push(contributor)
+      byProp.set(prop, list)
+    })
+  }
+}
+
+function strongestRestingSelector(
+  matched: MatchedRule,
+): { text: string; specificity: Specificity; simple: boolean } | null {
+  let best: { text: string; specificity: Specificity; simple: boolean } | null = null
+  for (const sel of matched.matchedSelectors) {
+    if (sel.pseudoElement != null) {continue}
+    const canon = canonicalCompound(sel.text)
+    if (stateOf(canon.pseudoClasses) !== '') {continue}
+    if (!best || compareSpecificity(sel.specificity, best.specificity) > 0) {
+      best = { text: sel.text, specificity: sel.specificity, simple: canon.simple }
+    }
+  }
+  return best
+}
+
 export function resolveStyle(
   model: RuleModel,
   context: ContextKey,
@@ -468,6 +536,8 @@ export function resolveStyle(
     })
   }
 
+  foldInherited(model, context, byProp)
+
   // Fold native Webflow class-style values in as extra contributors. They carry a
   // class-chain specificity (combos outrank the base class) and sort before embed
   // rules on a cascade tie (embed CSS is injected after Webflow's stylesheet).
@@ -498,7 +568,11 @@ export function resolveStyle(
 
   const props = new Map<string, ResolvedProp>()
   byProp.forEach((list, prop) => {
-    list.sort((a, b) => compareCascade(a, b, a.order, b.order))
+    // A value handed down by an ancestor loses to any rule on the element itself,
+    // whatever its specificity or !important — inheritance is the weakest input.
+    list.sort((a, b) =>
+      Number(a.inheritedDepth !== undefined) - Number(b.inheritedDepth !== undefined) ||
+      compareCascade(a, b, a.order, b.order))
     const winner = list[0]
     if (winner === undefined) {
       throw new Error(`Resolved style invariant failed: ${prop} has no contributors`)
diff --git a/src/style-panel/lib/selectors.ts b/src/style-panel/lib/selectors.ts
index 464b65f6..57c5ed08 100644
--- a/src/style-panel/lib/selectors.ts
+++ b/src/style-panel/lib/selectors.ts
@@ -8,6 +8,7 @@
 // It's async because element snapshots are read (and cached) on demand.
 
 import selectorParser from 'postcss-selector-parser'
+import { isViewStatePseudoClass } from './states'
 import type { ElementSnapshot, SelectorInfo, Specificity } from './types'
 
 type Combinator = ' ' | '>' | '+' | '~'
@@ -173,7 +174,6 @@ export type CanonicalCompound = {
 // combo). Any other pseudo-class — structural (:nth-child, :first-child, :nth-of-type,
 // …) or an unsupported state — must keep the compound COMPLEX so its full text is
 // preserved (embed-editable) instead of collapsing to the bare class.
-const STATE_PSEUDO_CLASSES = new Set([':hover', ':focus', ':active'])
 
 export function canonicalCompound(selectorText: string): CanonicalCompound {
   const sel = compileSelectorList(selectorText)[0]
@@ -187,7 +187,7 @@ export function canonicalCompound(selectorText: string): CanonicalCompound {
     subject.negations.length === 0 && subject.requireAny.length === 0 && subject.hasGroups.length === 0
   // Only bare state pseudos keep a compound "simple"; a structural pseudo (:nth-child …)
   // isn't a Webflow class state, so it must read as complex to keep its full text.
-  const stateOnly = pseudoClasses.every((p) => STATE_PSEUDO_CLASSES.has(p))
+  const stateOnly = pseudoClasses.every((p) => isViewStatePseudoClass(p))
   const simple = oneCompound && !pseudoElement && !subject.universal && subject.id == null && noFunctionalPseudo && stateOnly
   // Like `simple`, but a pseudo-element is allowed (it's the whole point of splitting
   // `.a::before`). A bare universal (`::before`) is never splittable — it's hidden.
diff --git a/src/style-panel/lib/states.ts b/src/style-panel/lib/states.ts
new file mode 100644
index 00000000..8d47132a
--- /dev/null
+++ b/src/style-panel/lib/states.ts
@@ -0,0 +1,120 @@
+// The states a selector can be styled in, and the arithmetic around them.
+//
+// Webflow gives a class one dropdown — None, Hover, Pressed, Focused, … — and the
+// class stays the same while the state changes: "Hover" on `.card` is the
+// selector `.card:hover`, nothing more. This module is that dropdown's model,
+// kept free of React so it can be tested and so the CSS matching code (which
+// must agree on what counts as a state) can share the same list.
+//
+// A state is a suffix appended to the selector: a pseudo-class (`:hover`) that
+// describes a moment of the element, or a pseudo-element (`::before`) that styles
+// a box the element generates. Structural pseudo-classes with an argument
+// (`:nth-child(odd)`) are listed too, but only as suffixes: the panel treats the
+// resulting selector as a complex one, which keeps its full text.
+
+export type StateGroup = 'interaction' | 'form' | 'position' | 'element'
+
+export type StateDefinition = {
+  /** The CSS suffix appended to the selector, e.g. `:hover` or `::before`. */
+  readonly suffix: string
+  readonly label: string
+  readonly group: StateGroup
+}
+
+export const STATE_GROUP_LABEL: Readonly<Record<StateGroup, string>> = {
+  interaction: 'Interaction',
+  form: 'Form',
+  position: 'Position',
+  element: 'Pseudo-elements',
+}
+
+export const STATE_DEFINITIONS: readonly StateDefinition[] = [
+  { suffix: ':hover', label: 'Hover', group: 'interaction' },
+  { suffix: ':active', label: 'Pressed (active)', group: 'interaction' },
+  { suffix: ':focus', label: 'Focused', group: 'interaction' },
+  { suffix: ':focus-visible', label: 'Focus visible', group: 'interaction' },
+  { suffix: ':focus-within', label: 'Focus within', group: 'interaction' },
+  { suffix: ':visited', label: 'Visited', group: 'interaction' },
+  { suffix: ':checked', label: 'Checked', group: 'form' },
+  { suffix: ':disabled', label: 'Disabled', group: 'form' },
+  { suffix: ':required', label: 'Required', group: 'form' },
+  { suffix: ':optional', label: 'Optional', group: 'form' },
+  { suffix: ':empty', label: 'Empty', group: 'form' },
+  { suffix: ':first-child', label: 'First item', group: 'position' },
+  { suffix: ':last-child', label: 'Last item', group: 'position' },
+  { suffix: ':nth-child(odd)', label: 'Odd items', group: 'position' },
+  { suffix: ':nth-child(even)', label: 'Even items', group: 'position' },
+  { suffix: '::before', label: 'Before', group: 'element' },
+  { suffix: '::after', label: 'After', group: 'element' },
+  { suffix: '::placeholder', label: 'Placeholder', group: 'element' },
+  { suffix: '::selection', label: 'Selection', group: 'element' },
+  { suffix: '::marker', label: 'Marker', group: 'element' },
+  { suffix: '::first-line', label: 'First line', group: 'element' },
+  { suffix: '::first-letter', label: 'First letter', group: 'element' },
+]
+
+/**
+ * The pseudo-classes the panel treats as a VIEW STATE: viewing one shows its own
+ * rules on top of the resting ones, and a rule carrying it is not part of the
+ * resting view. Only dynamic and form states qualify. Position pseudo-classes are
+ * decided by where the element sits in the tree, not by a moment, so the matcher
+ * already resolves them statically and they stay part of the resting view.
+ */
+export const VIEW_STATE_PSEUDO_CLASSES = [
+  ':hover',
+  ':active',
+  ':focus',
+  ':focus-visible',
+  ':focus-within',
+  ':visited',
+  ':checked',
+  ':disabled',
+  ':required',
+  ':optional',
+] as const
+
+export type ViewStatePseudoClass = (typeof VIEW_STATE_PSEUDO_CLASSES)[number]
+
+const VIEW_STATE_SET: ReadonlySet<string> = new Set(VIEW_STATE_PSEUDO_CLASSES)
+
+export function isViewStatePseudoClass(value: string): value is ViewStatePseudoClass {
+  return VIEW_STATE_SET.has(value)
+}
+
+// Longest suffix first, so `:focus-visible` is never read as `:focus`.
+const SUFFIXES_LONGEST_FIRST: readonly string[] = STATE_DEFINITIONS.map(
+  (definition) => definition.suffix,
+).sort((left, right) => right.length - left.length)
+
+export type StateSplit = {
+  /** The selector without its trailing state, e.g. `.card`. */
+  readonly base: string
+  /** The trailing state suffix, or '' when the selector is at rest. */
+  readonly suffix: string
+}
+
+/**
+ * Splits a selector into what it selects and the state it selects it in.
+ * Only one trailing state is peeled off: `.a:hover` is (`.a`, `:hover`), and
+ * `.a:hover:focus` is (`.a:hover`, `:focus`) — the last thing written is the
+ * one the dropdown shows and replaces.
+ */
+export function splitState(selector: string): StateSplit {
+  const text = selector.trim()
+  for (const suffix of SUFFIXES_LONGEST_FIRST) {
+    if (text.length > suffix.length && text.endsWith(suffix)) {
+      return { base: text.slice(0, text.length - suffix.length), suffix }
+    }
+  }
+  return { base: text, suffix: '' }
+}
+
+/** The selector for `base` in the state `suffix` ('' → at rest). */
+export function withState(base: string, suffix: string): string {
+  return `${base.trim()}${suffix}`
+}
+
+/** The definition for a suffix, or undefined for '' and for anything unlisted. */
+export function stateDefinition(suffix: string): StateDefinition | undefined {
+  return STATE_DEFINITIONS.find((definition) => definition.suffix === suffix)
+}
diff --git a/src/style-panel/lib/webflow.ts b/src/style-panel/lib/webflow.ts
index 0e4adf54..f6f4e11b 100644
--- a/src/style-panel/lib/webflow.ts
+++ b/src/style-panel/lib/webflow.ts
@@ -280,7 +280,10 @@ function styleSources(): EmbedSource[] {
     const isGlobal = !!n.props?.['is:global']
     out.push({
       key: `node:${n.id}`,
-      label: isGlobal ? '<style is:global>' : '<style>',
+      // In a component file the block is that component's stylesheet: name it
+      // for the component, the way the person thinks of it ("HeroSection"), not
+      // for the tag it happens to be written with.
+      label: openComponentName ?? (isGlobal ? '<style is:global>' : '<style>'),
       classNames: [],
       fromComponent: host.openFileKind === 'component',
       componentName: openComponentName,
diff --git a/src/styles.css b/src/styles.css
index 02fa6301..60c5609b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5793,3 +5793,14 @@ textarea::selection {
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
 }
 .term-scroll-btn:hover:not(:disabled) { background: var(--bg-active); color: var(--text); }
+
+/* The cube at the toolbar's right edge: make a component of the selection. */
+.toolbar-create-component {
+  margin-left: 8px;
+  padding: 5px 7px;
+  border-radius: 8px;
+  background: var(--bg-input);
+  color: var(--text-faint);
+}
+.toolbar-create-component:hover:not(:disabled) { color: var(--text); }
+.toolbar-create-component:disabled { opacity: 0.4; cursor: default; }
diff --git a/test/class-inheritance.js b/test/class-inheritance.js
new file mode 100644
index 00000000..6bb5b16c
--- /dev/null
+++ b/test/class-inheritance.js
@@ -0,0 +1,109 @@
+// A class beats a tag beats what the parent hands down — the Webflow order.
+//
+//   node test/class-inheritance.js
+//
+// In Webflow a paragraph inside a styled section is that section's colour until
+// something targets the paragraph, and once it is given a class `.text`, the
+// class's colour is the one that counts — over the tag rule and over the parent.
+// This mounts real CSS on a small tree (`.section > .box > p.text`) and asks the
+// resolved model what the paragraph ends up with, for the three cases:
+//
+//   1. nothing targets the <p>: the nearest ancestor's inheritable value shows,
+//      flagged as inherited, and a non-inheritable one (padding) never does;
+//   2. a tag rule `p { color }` targets it: that beats the parent, however
+//      specific the parent's selector, and even against the parent's !important;
+//   3. the class rule `.text { color }` targets it: that beats the tag rule.
+// Also that an ancestor's :hover never leaks into the child's resting view.
+
+const fs = require('fs');
+const path = require('path');
+
+const failures = [];
+let checked = 0;
+const check = (what, condition, detail) => {
+  checked++;
+  if (!condition) {failures.push(`  ${what}${detail ? `\n    ${detail}` : ''}`);}
+};
+
+(async () => {
+  const esbuild = require('esbuild');
+  const buildDir = path.join(__dirname, '..', 'node_modules', '.stacki-test');
+  fs.mkdirSync(buildDir, { recursive: true });
+  const bundlePath = path.join(buildDir, 'class-inheritance.bundle.js');
+  await esbuild.build({
+    stdin: {
+      contents: `
+        import postcss from 'postcss'
+        import { computeRuleModel } from './lib/cascade'
+        import { resolveStyle } from './lib/resolved'
+        import { collectRules } from './lib/css'
+        export { computeRuleModel, resolveStyle, collectRules, postcss }
+      `,
+      resolveDir: path.join(__dirname, '..', 'src', 'style-panel'),
+      loader: 'ts',
+    },
+    outfile: bundlePath,
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    loader: { '.css': 'empty' },
+    logLevel: 'silent',
+  });
+  const m = require(bundlePath);
+
+  const rulesFor = (css) => m.collectRules(
+    { start: 0, end: css.length, css, root: m.postcss.parse(css), openTag: '<style>' },
+    { embedKey: 'e', embedLabel: 'e', fromComponent: false, componentName: null, regionIndex: 0, idSeed: 'e', order: { n: 0 } },
+  );
+
+  // section(0) > box(1) > p(2)
+  const nodes = {
+    section: { tag: 'div', classes: ['section'], parent: null, children: ['box'] },
+    box: { tag: 'div', classes: ['box'], parent: 'section', children: ['p'] },
+    p: { tag: 'p', classes: ['text'], parent: 'box', children: [] },
+  };
+  const view = {
+    truncated: false,
+    parentKey: (key) => nodes[key].parent,
+    childKeys: (key) => nodes[key].children,
+    snapshot: async (key) => ({ tag: nodes[key].tag, webflowType: '', id: null, classes: nodes[key].classes, classList: nodes[key].classes, attributes: {} }),
+  };
+
+  const resolve = async (css) => {
+    const model = await m.computeRuleModel(rulesFor(css), { rootKey: 'p', view });
+    return m.resolveStyle(model, '', '.text');
+  };
+
+  // 1. Nothing on the paragraph.
+  let r = await resolve('.section { color: red; padding: 10px } .box { font-size: 20px }');
+  check('parent colour reaches the paragraph', r.props.get('color')?.winner.value === 'red');
+  check('and reads as inherited', r.props.get('color')?.winner.inheritedDepth === 2);
+  check('nearest ancestor wins for its property', r.props.get('font-size')?.winner.inheritedDepth === 1);
+  check('it is not the selected selector\'s value', r.props.get('color')?.source === 'other');
+  check('padding does not inherit', !r.props.has('padding'));
+
+  r = await resolve('.section { color: red } .box { color: green }');
+  check('the nearer ancestor beats the farther one', r.props.get('color')?.winner.value === 'green');
+
+  // 2. A tag rule beats the parent.
+  r = await resolve('#x, .section { color: red !important } p { color: blue }');
+  check('tag rule beats a parent\'s !important', r.props.get('color')?.winner.value === 'blue', r.props.get('color')?.winner.value);
+  check('and is not inherited', r.props.get('color')?.winner.inheritedDepth === undefined);
+
+  // 3. The class beats the tag.
+  r = await resolve('.section { color: red } p { color: blue } .text { color: hotpink }');
+  check('class rule beats tag rule', r.props.get('color')?.winner.value === 'hotpink', r.props.get('color')?.winner.value);
+  check('the class is the selected selector', r.props.get('color')?.source === 'selected');
+  const list = r.props.get('color')?.contributors.map((c) => c.value).join(',');
+  check('cascade order is class, tag, parent', list === 'hotpink,blue,red', list);
+
+  // Ancestor states stay with the ancestor.
+  r = await resolve('.section:hover { color: red } .box::before { color: blue }');
+  check('ancestor :hover does not leak', !r.props.has('color'), [...r.props.keys()].join(','));
+
+  if (failures.length) {
+    console.error(`class-inheritance: ${failures.length} of ${checked} failed\n${failures.join('\n')}`);
+    process.exit(1);
+  }
+  console.log(`class-inheritance: ${checked} checks passed`);
+})();
diff --git a/test/class-input.js b/test/class-input.js
new file mode 100644
index 00000000..671bc292
--- /dev/null
+++ b/test/class-input.js
@@ -0,0 +1,43 @@
+// What a name typed in the selector box means.
+//
+//   node test/class-input.js
+//
+// Webflow's field is a class field: `hero` is `.hero`. This box also takes real
+// selectors, so only a bare word that is not an HTML tag is promoted to a class;
+// `section` stays the tag, and anything with a dot, colon, combinator or bracket is
+// left exactly as typed.
+
+const fs = require('fs');
+const path = require('path');
+
+(async () => {
+  const esbuild = require('esbuild');
+  const buildDir = path.join(__dirname, '..', 'node_modules', '.stacki-test');
+  fs.mkdirSync(buildDir, { recursive: true });
+  const out = path.join(buildDir, 'class-input.bundle.js');
+  await esbuild.build({
+    entryPoints: [path.join(__dirname, '..', 'src', 'style-panel', 'lib', 'class-input.ts')],
+    outfile: out, bundle: true, format: 'cjs', platform: 'node', logLevel: 'silent',
+  });
+  const { selectorFromTyped, isTagSelector, HTML_TAG_NAMES } = require(out);
+  const cases = [
+    ['u-section', '.u-section'], ['  hero ', '.hero'], ['card_wrap', '.card_wrap'],
+    ['section', 'section'], ['DIV', 'DIV'], ['p', 'p'],
+    ['.card', '.card'], ['.card:hover', '.card:hover'], ['ul > li', 'ul > li'],
+    ['a[href]', 'a[href]'], ['#main', '#main'], ['', ''],
+  ];
+  const failures = cases.filter(([input, want]) => selectorFromTyped(input) !== want)
+    .map(([input, want]) => `  ${JSON.stringify(input)} → ${JSON.stringify(selectorFromTyped(input))}, wanted ${JSON.stringify(want)}`);
+  const tags = [['h2', true], ['P', true], ['section', true], ['.h2', false], ['hero', false], ['h2:hover', false], ['ul li', false]];
+  for (const [input, want] of tags) {
+    if (isTagSelector(input) !== want) {failures.push(`  isTagSelector(${JSON.stringify(input)}) should be ${want}`);}
+  }
+  for (const tag of ['h1', 'h2', 'p', 'a', 'section', 'li']) {
+    if (!HTML_TAG_NAMES.includes(tag)) {failures.push(`  ${tag} is missing from the tag list`);}
+  }
+  if (failures.length) {
+    console.error(`class-input: ${failures.length} of ${cases.length} failed\n${failures.join('\n')}`);
+    process.exit(1);
+  }
+  console.log(`class-input: ${cases.length + tags.length + 6} checks passed`);
+})();
diff --git a/test/component-nested.js b/test/component-nested.js
new file mode 100644
index 00000000..a7e51f93
--- /dev/null
+++ b/test/component-nested.js
@@ -0,0 +1,146 @@
+// Components in folders, and the stylesheet for a project's variables.
+//
+//   node test/component-nested.js      (needs `npm run build:runtime` first)
+//
+// A component's folder is a path of plain words under src/components, made on the
+// way — the first component creates src/components itself. Its name is also an
+// import and a tag, so it must be unique across the whole tree, not just its own
+// folder. Imports it carries are re-aimed from where the file now sits.
+//
+// The variables file is the other half: a project with no stylesheet gets
+// src/styles/variables.css and the import that makes Astro ship it, once, in the
+// frontmatter next to the imports already there, without disturbing line endings.
+
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const failures = [];
+let checked = 0;
+const check = (what, condition, detail) => {
+  checked++;
+  if (!condition) {failures.push(`  ${what}${detail ? `\n    ${detail}` : ''}`);}
+};
+const throws = (what, fn, pattern) => {
+  try {
+    fn();
+    check(what, false, 'did not throw');
+  } catch (error) {
+    check(what, pattern.test(String(error.message)), error.message);
+  }
+};
+
+const dist = (name) => require(path.join(__dirname, '..', 'dist', 'electron', name));
+const { componentFile } = dist('componentFile.js');
+const { withStylesheetImport, createVariablesFile } = dist('variablesFile.js');
+
+const project = fs.mkdtempSync(path.join(os.tmpdir(), 'stacki-nested-'));
+const pagePath = path.join(project, 'src', 'pages', 'index.astro');
+fs.mkdirSync(path.dirname(pagePath), { recursive: true });
+const node = {
+  id: 'a',
+  kind: 'element',
+  name: 'span',
+  props: { class: { type: 'string', value: 'eyebrow' } },
+  children: [{ id: 'b', kind: 'text', value: 'Hi' }],
+};
+const imports = [{ name: 'Icon', path: '../components/Icon.astro' }];
+const withIcon = {
+  ...node,
+  children: [{ id: 'c', kind: 'component', name: 'Icon', props: {}, children: null }],
+};
+const make = (extra) => componentFile({ projectPath: project, pagePath, name: 'Eyebrow', nodes: [node], ...extra });
+
+// Folders.
+check('no folder: the root', make({}).rel === 'src/components/Eyebrow.astro', make({}).rel);
+check('one folder', make({ folder: 'heading' }).rel === 'src/components/heading/Eyebrow.astro');
+check(
+  'folders inside folders',
+  make({ folder: 'sections/hero' }).rel === 'src/components/sections/hero/Eyebrow.astro',
+);
+check('computing the file writes nothing', !fs.existsSync(path.join(project, 'src', 'components')));
+
+// Imports are re-aimed from the new depth.
+const moved = make({ folder: 'heading', nodes: [withIcon], imports });
+check('a relative import is re-aimed from the folder', /\.\.\/Icon\.astro/.test(moved.text), moved.text);
+
+// Folder safety.
+for (const bad of ['..', '../x', 'a/../b', 'C:\\x', 'a b!', 'a/b/c/d/e/f']) {
+  throws(`folder "${bad}" is refused`, () => make({ folder: bad }), /folder|deep|name/i);
+}
+
+// A leading slash is not an escape: it is read as a folder under src/components.
+check('a leading slash stays inside', make({ folder: '/abs' }).rel === 'src/components/abs/Eyebrow.astro');
+
+// Unique across the tree.
+fs.mkdirSync(path.join(project, 'src', 'components', 'heading'), { recursive: true });
+fs.writeFileSync(path.join(project, 'src', 'components', 'heading', 'Eyebrow.astro'), '<span />');
+throws('same name, other folder, is a clash', () => make({ folder: 'cards' }), /already a component called Eyebrow/);
+throws('and whatever the case', () => make({ name: 'EYEBROW', folder: 'cards' }), /already a component/);
+
+// Stylesheet import.
+const page = "---\nimport Base from '../layouts/Base.astro';\nconst a = 1;\n---\n<h1 />\n";
+const once = withStylesheetImport(page, '../styles/variables.css');
+check(
+  'import lands after the existing imports',
+  once.split('\n').slice(0, 4).join('|') ===
+    "---|import Base from '../layouts/Base.astro';|import '../styles/variables.css';|const a = 1;",
+  once,
+);
+check('idempotent', withStylesheetImport(once, '../styles/variables.css') === once);
+check(
+  'no frontmatter: one is made',
+  withStylesheetImport('<h1 />\n', './v.css') === "---\nimport './v.css';\n---\n<h1 />\n",
+);
+check(
+  'CRLF files stay CRLF',
+  !/[^\r]\n/.test(withStylesheetImport(page.replace(/\n/g, '\r\n'), '../v.css')),
+);
+check('an unterminated frontmatter is left alone', withStylesheetImport('---\nconst a', './v.css') === '---\nconst a');
+
+// The file, on a project with a layout.
+const app = fs.mkdtempSync(path.join(os.tmpdir(), 'stacki-vars-'));
+fs.mkdirSync(path.join(app, 'src', 'layouts'), { recursive: true });
+const layout = path.join(app, 'src', 'layouts', 'Base.astro');
+fs.writeFileSync(layout, "---\nimport Nav from '../components/Nav.astro';\n---\n<slot />\n");
+const touched = [];
+const made = createVariablesFile(app, (file) => touched.push(path.basename(file)));
+const cssPath = path.join(app, 'src', 'styles', 'variables.css');
+const css = fs.readFileSync(cssPath, 'utf8');
+check('the file has a :root with variables', /:root \{[^}]*--color-primary/.test(css), css);
+check('the layout imports it', fs.readFileSync(layout, 'utf8').includes("import '../styles/variables.css';"));
+check('it says which files it imported into', made.imported.join() === 'src/layouts/Base.astro', made.imported.join());
+check('both writes were announced', touched.includes('variables.css') && touched.includes('Base.astro'), touched.join());
+const again = createVariablesFile(app, () => {});
+check('a second run changes nothing', again.imported.length === 0 && fs.readFileSync(cssPath, 'utf8') === css);
+
+// No layout: the index page.
+const bare = fs.mkdtempSync(path.join(os.tmpdir(), 'stacki-bare-'));
+fs.mkdirSync(path.join(bare, 'src', 'pages'), { recursive: true });
+const indexPath = path.join(bare, 'src', 'pages', 'index.astro');
+fs.writeFileSync(indexPath, '<h1>Hi</h1>\n');
+const viaIndex = createVariablesFile(bare, () => {});
+check(
+  'without a layout the index page imports it',
+  viaIndex.imported.join() === 'src/pages/index.astro' &&
+    fs.readFileSync(indexPath, 'utf8').includes("import '../styles/variables.css'"),
+);
+
+// An existing file without :root is added to, not replaced.
+const partial = fs.mkdtempSync(path.join(os.tmpdir(), 'stacki-partial-'));
+fs.mkdirSync(path.join(partial, 'src', 'styles'), { recursive: true });
+const partialCss = path.join(partial, 'src', 'styles', 'variables.css');
+fs.writeFileSync(partialCss, '.x { color: red; }\n');
+createVariablesFile(partial, () => {});
+const kept = fs.readFileSync(partialCss, 'utf8');
+check('existing css is kept and :root appended', kept.includes('.x { color: red; }') && kept.includes(':root'), kept);
+
+for (const dir of [project, app, bare, partial]) {
+  fs.rmSync(dir, { recursive: true, force: true });
+}
+
+if (failures.length) {
+  console.error(`component-nested: ${failures.length} of ${checked} failed\n${failures.join('\n')}`);
+  process.exit(1);
+}
+console.log(`component-nested: ${checked} checks passed`);
diff --git a/test/contracts/ipc-payloads.test.ts b/test/contracts/ipc-payloads.test.ts
index 73a7c6d5..2db68667 100644
--- a/test/contracts/ipc-payloads.test.ts
+++ b/test/contracts/ipc-payloads.test.ts
@@ -25,6 +25,7 @@ const noPayload = new Set([
   'dev:stop',
 ]);
 const pathPayload = new Set([
+  'css:createVariablesFile',
   'project:close',
   'recents:add',
   'recents:remove',
diff --git a/test/contracts/main-boundaries.test.ts b/test/contracts/main-boundaries.test.ts
index 066a0eab..0b31281e 100644
--- a/test/contracts/main-boundaries.test.ts
+++ b/test/contracts/main-boundaries.test.ts
@@ -47,7 +47,7 @@ test('the complete channel inventory matches real main and terminal registration
   const terminalChannels = [...terminal.matchAll(/ipcMain\.handle\(['"]([^'"]+)['"]/g)].map(
     (match) => match[1],
   );
-  assert.equal(harness.handlers.size, 114);
+  assert.equal(harness.handlers.size, 115);
   assert.equal(terminalChannels.length, 4);
   assert.deepEqual(
     [...Object.keys(IPC_PAYLOADS)].sort(),
diff --git a/test/extract-assets.js b/test/extract-assets.js
new file mode 100644
index 00000000..611de2c7
--- /dev/null
+++ b/test/extract-assets.js
@@ -0,0 +1,125 @@
+// The CSS and JS that leave the page with an extracted component.
+//
+//   node test/extract-assets.js
+//
+// After "make a component", index.astro should hold the chain of components and
+// nothing else. A rule moves when every class it names is used inside the piece
+// and nowhere else on the page; a class used both inside and out keeps its rules
+// (moving them would break the outside use) and is counted so the app can say so.
+// Tag-only and :root rules are page-wide and stay. Selector lists are split,
+// media queries travel with the rules inside them, and keyframes follow the
+// animation that runs them — unless something staying behind runs it too.
+
+const fs = require('fs');
+const path = require('path');
+
+const failures = [];
+let checked = 0;
+const check = (what, condition, detail) => {
+  checked++;
+  if (!condition) {failures.push(`  ${what}${detail ? `\n    ${detail}` : ''}`);}
+};
+
+(async () => {
+  const esbuild = require('esbuild');
+  const buildDir = path.join(__dirname, '..', 'node_modules', '.stacki-test');
+  fs.mkdirSync(buildDir, { recursive: true });
+  const out = path.join(buildDir, 'extract-assets.bundle.js');
+  await esbuild.build({
+    entryPoints: [path.join(__dirname, '..', 'src', 'extractAssets.ts')],
+    outfile: out, bundle: true, format: 'cjs', platform: 'node', logLevel: 'silent',
+  });
+  const m = require(out);
+
+  const el = (id, classes, children = [], extra = {}) => ({
+    id,
+    props: { class: { type: 'string', value: classes }, ...extra },
+    children,
+  });
+  const page = [
+    el('section', 'hero', [
+      el('eyebrow', 'eyebrow eyebrow--dot', [], {}),
+      el('title', 'hero_title'),
+      el('badge', 'badge', [], { id: { type: 'string', value: 'promo' } }),
+    ]),
+    el('footer', 'footer', [el('foot-badge', 'badge')]),
+  ];
+  const inside = m.tokensOf([page[0].children[0]]);
+  const outside = m.tokensOf(page, 'eyebrow');
+
+  check('inside classes are read', inside.classes.has('eyebrow') && inside.classes.has('eyebrow--dot'));
+  check('outside excludes the piece', !outside.classes.has('eyebrow') && outside.classes.has('hero'));
+
+  const css = `
+:root { --c: red; }
+h1 { margin: 0; }
+.eyebrow { color: red; }
+.eyebrow--dot::before, .hero_title { content: ""; }
+.hero .eyebrow { margin: 1px; }
+@media (min-width: 800px) { .eyebrow { color: blue; } .hero { gap: 1px; } }
+.hero { display: grid; }
+.eyebrow { animation: blink 1s; }
+@keyframes blink { to { opacity: 0; } }
+`;
+  const r = m.splitStyles(css, inside, outside);
+  check('own rule moves', /\.eyebrow \{[^}]*color: red/.test(r.moved), r.moved);
+  check('selector list is split: modifier moves', /\.eyebrow--dot::before/.test(r.moved) && !/\.eyebrow--dot::before[^{]*hero_title/.test(r.moved), r.moved);
+  check('…and the foreign selector stays', /\.hero_title \{/.test(r.kept), r.kept);
+  check('rule using an outside class stays', /\.hero \.eyebrow/.test(r.kept) && !/\.hero \.eyebrow/.test(r.moved));
+  check('media query travels with its rule', /@media \(min-width: 800px\) \{[^}]*\.eyebrow/.test(r.moved), r.moved);
+  check('…and leaves the page\'s rule in the query', /@media[^{]*\{[^}]*\.hero \{ gap/.test(r.kept.replace(/\s+/g, ' ')) || /\.hero[^}]*gap: 1px/.test(r.kept), r.kept);
+  check('tag and :root rules stay', /:root/.test(r.kept) && /h1 \{/.test(r.kept) && !/:root|h1/.test(r.moved));
+  check('keyframes follow their animation', /@keyframes blink/.test(r.moved) && !/@keyframes/.test(r.kept), r.moved);
+  check('the page rule for .hero is untouched', /\.hero \{ display: grid; \}|\.hero \{\s*display: grid/.test(r.kept), r.kept);
+
+  // A class used inside and outside is held, not moved.
+  const shared = m.splitStyles('.badge { color: green; }', m.tokensOf([page[0].children[2]]), m.tokensOf(page, 'badge'));
+  check('shared class is held back', shared.moved === '' && shared.held === 1, JSON.stringify(shared));
+  check('…and the page keeps its css verbatim', shared.kept === '.badge { color: green; }');
+
+  // Keyframes still needed by the page stay.
+  const both = m.splitStyles('.eyebrow{animation:k 1s}.hero{animation:k 2s}@keyframes k{to{opacity:0}}', inside, outside);
+  check('keyframes used by staying rules stay', /@keyframes k/.test(both.kept) && !/@keyframes/.test(both.moved), JSON.stringify(both));
+
+  // Broken CSS is left alone.
+  const broken = m.splitStyles('.eyebrow { color: red', inside, outside);
+  check('unparseable css stays put', broken.moved === '' && broken.kept === '.eyebrow { color: red');
+
+  // Scripts.
+  const s1 = m.scriptBelongsTo("document.querySelector('.eyebrow').focus()", inside, outside);
+  check('script about the piece moves', s1.moves);
+  const s2 = m.scriptBelongsTo("document.querySelector('.eyebrow'); document.querySelector('.hero')", inside, outside);
+  check('script that also touches the page stays', !s2.moves);
+  const s3 = m.scriptBelongsTo("console.log('hi')", inside, outside);
+  check('unrelated script stays', !s3.moves);
+  const s4 = m.scriptBelongsTo("document.querySelector('.eyebrow--dot')", inside, outside);
+  check('modifier class is not confused with its base', s4.moves);
+  const s5 = m.scriptBelongsTo("querySelector('.eyebrowx')", inside, outside);
+  check('a longer name is not a match', !s5.moves);
+
+  // The whole plan, on a page model.
+  const raw = (id, name, inner, props = {}) => ({ id, kind: 'raw', name, props, inner });
+  const tree = [
+    ...page,
+    raw('st', 'style', '.eyebrow { color: red; } .hero { display: grid; }', { 'is:global': { type: 'bare' } }),
+    raw('sc', 'script', "document.querySelector('.eyebrow')"),
+    raw('ext', 'script', '', { src: { type: 'string', value: '/x.js' } }),
+    raw('only', 'style', '.eyebrow { top: 0; }'),
+  ];
+  let counter = 0;
+  const plan = m.planAssets(tree, 'eyebrow', () => `new${counter++}`);
+  check('two style blocks and a script move', plan.moved.length === 3, JSON.stringify(plan.moved.map((b) => b.name)));
+  check('styles come before scripts', plan.moved.map((b) => b.name).join() === 'style,style,script');
+  check('the block keeps its attributes', plan.moved[0].props['is:global']?.type === 'bare');
+  const stEdit = plan.edits.find((e) => e.id === 'st');
+  check('the page block keeps what did not move', /\.hero \{ display: grid; \}/.test(stEdit.inner) && !/eyebrow/.test(stEdit.inner), JSON.stringify(stEdit));
+  check('an emptied block is deleted', plan.edits.find((e) => e.id === 'only').inner === null);
+  check('the moved script leaves the page', plan.edits.find((e) => e.id === 'sc').inner === null);
+  check('an external script is never touched', !plan.edits.some((e) => e.id === 'ext'));
+
+  if (failures.length) {
+    console.error(`extract-assets: ${failures.length} of ${checked} failed\n${failures.join('\n')}`);
+    process.exit(1);
+  }
+  console.log(`extract-assets: ${checked} checks passed`);
+})();
diff --git a/test/state-select.js b/test/state-select.js
new file mode 100644
index 00000000..3530f00f
--- /dev/null
+++ b/test/state-select.js
@@ -0,0 +1,121 @@
+// The state dropdown: one class, many states — the Webflow way.
+//
+//   node test/state-select.js
+//
+// "Hover" on `.card` is the selector `.card:hover`; None is `.card` again. Three
+// things have to hold for that to feel like Webflow rather than like typing CSS:
+//
+//   1. the state arithmetic (split a selector into base + state, put it back) is
+//      lossless, and never confuses `:focus-visible` with `:focus`;
+//   2. the panel's matcher agrees on what a state IS — every dropdown state that
+//      is dynamic reads as a view state of a still-simple selector, pseudo-elements
+//      stay a separate target, and position pseudo-classes stay part of the rest view;
+//   3. the dropdown itself offers every state, marks the ones that already carry
+//      styles, and hands the recomposed selector to the panel when one is chosen.
+
+const fs = require('fs');
+const path = require('path');
+
+const failures = [];
+let checked = 0;
+const check = (what, condition, detail) => {
+  checked++;
+  if (!condition) {failures.push(`  ${what}${detail ? `\n    ${detail}` : ''}`);}
+};
+
+(async () => {
+  const esbuild = require('esbuild');
+  const buildDir = path.join(__dirname, '..', 'node_modules', '.stacki-test');
+  fs.mkdirSync(buildDir, { recursive: true });
+  const bundlePath = path.join(buildDir, 'state-select.bundle.js');
+  await esbuild.build({
+    stdin: {
+      contents: `
+        export * from './lib/states'
+        export { stateForSelector, selectorKey } from './lib/resolved'
+        export { canonicalCompound } from './lib/selectors'
+        export { default as StateSelect } from './StateSelect'
+      `,
+      resolveDir: path.join(__dirname, '..', 'src', 'style-panel'),
+      loader: 'tsx',
+    },
+    outfile: bundlePath,
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    jsx: 'automatic',
+    external: ['react', 'react-dom', 'react/jsx-runtime', 'react-dom/client'],
+    loader: { '.css': 'empty' },
+    logLevel: 'silent',
+  });
+
+  const { JSDOM } = require('jsdom');
+  const dom = new JSDOM('<!doctype html><div id="root"></div>', { pretendToBeVisual: true });
+  global.window = dom.window;
+  global.document = dom.window.document;
+  global.navigator = dom.window.navigator;
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+  dom.window.ResizeObserver = class { observe() {} unobserve() {} disconnect() {} };
+  global.ResizeObserver = dom.window.ResizeObserver;
+  global.HTMLElement = dom.window.HTMLElement;
+
+  const React = require('react');
+  const { createRoot } = require('react-dom/client');
+  const { act } = require('react');
+  const m = require(bundlePath);
+
+  // 1. Arithmetic.
+  for (const def of m.STATE_DEFINITIONS) {
+    const split = m.splitState(`.card${def.suffix}`);
+    check(`splitState reads ${def.suffix}`, split.base === '.card' && split.suffix === def.suffix, JSON.stringify(split));
+    check(`withState restores ${def.suffix}`, m.withState(split.base, split.suffix) === `.card${def.suffix}`);
+  }
+  check('rest selector has no suffix', m.splitState('.card').suffix === '');
+  check('focus-visible is not focus', m.splitState('a.btn:focus-visible').suffix === ':focus-visible');
+  check('a bare state is not split into nothing', m.splitState(':hover').base === ':hover');
+  check('complex selector keeps its ancestors', m.splitState('.nav .link:hover').base === '.nav .link');
+  check('None recomposes to the base', m.withState('.card', '') === '.card');
+
+  // 2. The matcher agrees.
+  for (const suffix of m.VIEW_STATE_PSEUDO_CLASSES) {
+    const canon = m.canonicalCompound(`.card${suffix}`);
+    check(`${suffix} keeps a class simple`, canon.simple, JSON.stringify(canon));
+    check(`${suffix} is a view state`, m.stateForSelector(`.card${suffix}`) === suffix);
+    check(`${suffix} is its own chip`, m.selectorKey(`.card${suffix}`) !== m.selectorKey('.card'));
+  }
+  check('pseudo-element is not a state', m.stateForSelector('.card::before') === '');
+  check('pseudo-element is its own target', m.canonicalCompound('.card::before').pseudoElement === '::before');
+  check('position pseudo stays in the rest view', m.stateForSelector('.card:first-child') === '');
+
+  // 3. The dropdown.
+  const chips = [{ text: '.card:hover' }, { text: '.card::before' }, { text: '.other:focus' }];
+  const chosen = [];
+  const host = document.getElementById('root');
+  const root = createRoot(host);
+  await act(async () => {
+    root.render(React.createElement(m.StateSelect, {
+      selectors: chips, activeSelector: '.card', busy: false, onSelect: (s) => chosen.push(s),
+    }));
+  });
+  const trigger = host.querySelector('button');
+  check('dropdown renders a trigger', !!trigger);
+  check('rest shows None', /None/.test(trigger?.textContent ?? ''), trigger?.textContent);
+  await act(async () => { trigger.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })); });
+  const text = document.body.textContent;
+  for (const def of m.STATE_DEFINITIONS) {
+    check(`list offers ${def.label}`, text.includes(def.label));
+  }
+  const option = [...document.querySelectorAll('[role="option"]')].find((el) => /^Hover/.test(el.textContent));
+  check('Hover option exists', !!option);
+  if (option) {
+    await act(async () => { option.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })); });
+  }
+  check('choosing Hover selects .card:hover', chosen[0] === '.card:hover', JSON.stringify(chosen));
+  await act(async () => { root.unmount(); });
+
+  if (failures.length) {
+    console.error(`state-select: ${failures.length} of ${checked} failed\n${failures.join('\n')}`);
+    process.exit(1);
+  }
+  console.log(`state-select: ${checked} checks passed`);
+})();