diff --git a/docs/component-properties.md b/docs/component-properties.md
index 49127ffd..24e5a22f 100644
--- a/docs/component-properties.md
+++ b/docs/component-properties.md
@@ -27,8 +27,18 @@ arrays, tuples, records, callbacks, and common built-in types. The braces button
 switches to a plain input for custom types such as `typeof theme` or imported
 aliases. Switching modes preserves the current type and union options; hovering
 a menu choice never changes the prop. Unsupported types open in input mode.
-Imported or composite `Props` contracts remain read-only until their editable
-fields are declared locally; clicking a prop never opens the full source editor.
+Common fields in composite `Props` contracts stay editable when their declaration
+is local and shared by the public and runtime types. Variant-dependent fields show
+their conditions and explain why source editing is needed. Imported, generic, and
+ambiguous declarations remain restricted. Add and reorder operations on composite
+contracts still require source editing. Declaration locations appear in an information
+tooltip, not as runtime binding chips. Clicking a prop never opens the full source editor.
+Renames also update indexed and picked references to local contract types.
+
+Property rows show names and type icons. Type and default choices use the shared
+custom dropdown, with matching expression toggles. Long option lists scroll after
+six rows, with Add item outside the scrolling region. Property settings close on
+outside clicks, including clicks in the canvas, and remain dismissible when read-only.
 
 The panel listens for external changes to the open component and automatically
 loads the latest properties. Stacki's own writes are filtered by the project
diff --git a/electron/componentPreview.ts b/electron/componentPreview.ts
index d2526992..e0409706 100644
--- a/electron/componentPreview.ts
+++ b/electron/componentPreview.ts
@@ -198,6 +198,12 @@ if (selected) {
           return isFinite(l) ? { l: l, t: t, w: r - l, h: b - t } : null;
         }
         var scheduled = false;
+        var lastStatus = '';
+        function reportStatus(status) {
+          if (status === lastStatus) return;
+          lastStatus = status;
+          window.parent.postMessage({ type: 'avb:component-preview', status: status }, '*');
+        }
         function fit() {
           scheduled = false;
           stage.style.transform = 'none';
@@ -205,6 +211,8 @@ if (selected) {
           var box = bbox(stage);
           if (!box || box.w < 1 || box.h < 1) {
             document.body.classList.add('avb-is-empty');
+            stage.style.visibility = 'hidden';
+            reportStatus('empty');
             return;
           }
           document.body.classList.remove('avb-is-empty');
@@ -216,6 +224,7 @@ if (selected) {
           stage.style.transform =
             'translate(' + tx + 'px,' + ty + 'px) scale(' + s + ')';
           stage.style.visibility = 'visible';
+          reportStatus('ready');
         }
         function refit() {
           if (scheduled) return;
diff --git a/electron/componentProperties.ts b/electron/componentProperties.ts
index d2972cdb..37d25f99 100644
--- a/electron/componentProperties.ts
+++ b/electron/componentProperties.ts
@@ -6,11 +6,16 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { assert } from '../shared/assert';
 import { PROPERTY_LIMITS } from '../shared/component-properties';
-import type { ComponentProperties, PropertyChange } from '../shared/component-properties';
+import type {
+  ComponentProperties,
+  PropertyChange,
+  PropertyOptionRename,
+} from '../shared/component-properties';
 import { err, ok, type Result } from '../shared/result';
+import { literalOptions } from '../shared/property-options';
 import { sameFilesystemPath } from './platform';
 import { editPropertyDefinition, readComponentProperties } from './propertyDefinitions';
-import { renameComponentReferences } from './propertyRename';
+import { renameComponentOptionValues, renameComponentReferences } from './propertyRename';
 
 interface PropertyLocation {
   readonly projectPath: string;
@@ -100,37 +105,43 @@ function planPropertyChanges(
   if (change.kind === 'remove') {
     return planPropertyRemoval(request, first, change.name);
   }
-  if (
-    change.kind !== 'save' ||
-    !change.originalName ||
-    change.originalName === change.property.name
-  ) {
+  const propertyRename = propertyRenameForChange(change);
+  const optionRenames = change.kind === 'save' ? change.optionRenames ?? [] : [];
+  if (!propertyRename && optionRenames.length === 0) {
     return ok([first]);
   }
+  if (change.kind !== 'save' || !change.originalName) {
+    return err({
+      code: 'option',
+      message: 'Only an existing property can rename options.',
+    });
+  }
+  const valid = validateOptionRenames(request.source, source, change, optionRenames);
+  if (!valid.ok) {
+    return valid;
+  }
   const consumers = readPropertyConsumers(request);
   if (!consumers.ok) {
     return consumers;
   }
-  const rename = { from: change.originalName, to: change.property.name };
   const changes: FileChange[] = [];
   for (const consumer of consumers.value) {
     const { file, names } = consumer;
     const own = sameFilesystemPath(file, request.file);
     const original = own ? source : consumer.source;
-    const result = renameComponentReferences(
-      original,
-      names,
-      rename,
-      own ? 'definition' : 'consumer'
-    );
-    if (!result.ok) {
+    const changed = planConsumerChange(original, names, change, propertyRename, optionRenames, own);
+    if (!changed.ok) {
       return err({
-        code: result.error.code,
-        message: `${path.relative(request.projectPath, file)}: ${result.error.message}`,
+        code: changed.error.code,
+        message: `${path.relative(request.projectPath, file)}: ${changed.error.message}`,
       });
     }
-    if (own || result.value !== original) {
-      changes.push({ file, before: own ? request.source : original, after: result.value });
+    if (own || changed.value !== original) {
+      changes.push({
+        file,
+        before: own ? request.source : original,
+        after: changed.value,
+      });
     }
   }
   assert(
@@ -140,6 +151,68 @@ function planPropertyChanges(
   return ok(changes);
 }
 
+function propertyRenameForChange(
+  change: PropertyChange
+): { readonly from: string; readonly to: string } | undefined {
+  if (change.kind !== 'save' || !change.originalName) {
+    return undefined;
+  }
+  return change.originalName === change.property.name
+    ? undefined
+    : { from: change.originalName, to: change.property.name };
+}
+
+function planConsumerChange(
+  source: string,
+  names: ReadonlySet<string>,
+  change: Extract<PropertyChange, { readonly kind: 'save' }>,
+  propertyRename: { readonly from: string; readonly to: string } | undefined,
+  optionRenames: readonly PropertyOptionRename[],
+  own: boolean
+): Result<string> {
+  const renamed = propertyRename
+    ? renameComponentReferences(source, names, propertyRename, own ? 'definition' : 'consumer')
+    : ok(source);
+  if (!renamed.ok || optionRenames.length === 0) {
+    return renamed;
+  }
+  return renameComponentOptionValues(renamed.value, names, change.property.name, optionRenames);
+}
+
+function validateOptionRenames(
+  beforeSource: string,
+  afterSource: string,
+  change: Extract<PropertyChange, { readonly kind: 'save' }>,
+  renames: readonly PropertyOptionRename[]
+): Result<void> {
+  if (renames.length === 0) {
+    return ok(undefined);
+  }
+  const before = readComponentProperties(beforeSource).properties.find(
+    (property) => property.name === change.originalName
+  );
+  const after = readComponentProperties(afterSource).properties.find(
+    (property) => property.name === change.property.name
+  );
+  const beforeOptions = before ? literalOptions(before.type) : undefined;
+  const afterOptions = after ? literalOptions(after.type) : undefined;
+  if (!beforeOptions || !afterOptions) {
+    return err({
+      code: 'option',
+      message: 'Option renames require an editable literal union.',
+    });
+  }
+  for (const rename of renames) {
+    if (!beforeOptions.includes(rename.from) || !afterOptions.includes(rename.to)) {
+      return err({
+        code: 'option',
+        message: 'An option rename does not match the saved union.',
+      });
+    }
+  }
+  return ok(undefined);
+}
+
 function commitPropertyChanges(
   changes: readonly FileChange[],
   noteWrite: (file: string, source: string) => void
@@ -196,7 +269,10 @@ function rollbackPropertyChanges(
       message: `Save failed and recovery failed for: ${failed.join(', ')}. ${String(reason)}`,
     });
   }
-  return err({ code: 'filesystem', message: `Save failed; changes restored. ${String(reason)}` });
+  return err({
+    code: 'filesystem',
+    message: `Save failed; changes restored. ${String(reason)}`,
+  });
 }
 
 function planPropertyRemoval(
diff --git a/electron/main.ts b/electron/main.ts
index 97d4cc37..69bb019e 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -3000,19 +3000,25 @@ function writeChunks(model: ParserPageModel) {
 // Page IPC
 // ---------------------------------------------------------------------------
 
+function parsePageSource(pagePath: string, source: string): IpcResults['page:read'] {
+  if (isMarkdownPage(pagePath)) {
+    return { ...parseMarkdownPage(source, { mdx: isMdx(pagePath) }), source };
+  }
+  const parsed = parsePage(source, { locs: true });
+  if (parsed.editable) {resolveChunks(parsed.model, pagePath, { locs: true });}
+  return { ...parsed, source };
+}
+
 ipcMain.handle('page:read', async (_e, pagePath) => {
   const source = readSource(pagePath);
   // Markdown builds the same tree from a different syntax, so everything
   // downstream — navigator, props, text editing, undo — is unchanged. Only
   // the writer has to know which one it is; model.format carries that.
-  if (isMarkdownPage(pagePath)) {
-    return { ...parseMarkdownPage(source, { mdx: isMdx(pagePath) }), source };
-  }
-  const parsed = parsePage(source);
-  if (parsed.editable) {
-    resolveChunks(parsed.model, pagePath);
-  }
-  return { ...parsed, source };
+  return parsePageSource(pagePath, source);
+});
+
+ipcMain.handle('page:parse', async (_e, { pagePath, source }) => {
+  return parsePageSource(pagePath, source);
 });
 
 // Astro's dev server serves a page's <style> block ONE EDIT BEHIND: after the file
@@ -3059,18 +3065,20 @@ function writePageText(pagePath: string, text: string) {
 }
 
 ipcMain.handle('page:write', async (_e, { pagePath, model }) => {
+  let source: string;
   if (isMarkdownPage(pagePath)) {
-    writePageText(pagePath, serializeMarkdownPage(parseMarkdownModel(model)));
-    return { ok: true as const };
+    source = serializeMarkdownPage(parseMarkdownModel(model));
+  } else {
+    source = serializePage(model);
+    writeChunks(parseSerializePage(model));
   }
-  writePageText(pagePath, serializePage(model));
-  writeChunks(parseSerializePage(model));
-  return { ok: true as const };
+  writePageText(pagePath, source);
+  return { ok: true as const, ...parsePageSource(pagePath, source) };
 });
 
 ipcMain.handle('page:writeRaw', async (_e, { pagePath, source }) => {
   writePageText(pagePath, source);
-  return { ok: true as const };
+  return { ok: true as const, ...parsePageSource(pagePath, source) };
 });
 
 ipcMain.handle('page:create', async (_e, { projectPath, name, layout }) => {
diff --git a/electron/morphClient.ts b/electron/morphClient.ts
index 93b8f46b..11c3f7c8 100644
--- a/electron/morphClient.ts
+++ b/electron/morphClient.ts
@@ -404,6 +404,14 @@ function patchAttrs(live: Element, prev: Element, next: Element): void {
 }
 
 function patchNode(live: Node, prev: Node, next: Node): void {
+  // An unchanged server subtree has no patch to contribute. Client code is
+  // free to reorder, remove, or clone anything inside it, so descending into
+  // that live subtree is both wasted work and actively unsafe: a slider or nav
+  // can no longer resemble its server rendering even though the edit happened
+  // somewhere else on the page.
+  if (prev.isEqualNode(next)) {
+    return;
+  }
   if (live.nodeType === 3 || live.nodeType === 8) {
     // Only when the server changed it, and only if the live copy still says
     // what the server last said — client code that rewrote this text keeps it.
@@ -786,4 +794,4 @@ window.addEventListener('message', (e: MessageEvent) => {
 // update is the module's entry; scriptSignature is not referenced internally
 // but is part of the tested surface — test/morph.js slices it out of this
 // source, so deleting it would delete coverage of the script-diff decision.
-export { update, scriptSignature };
\ No newline at end of file
+export { update, scriptSignature };
diff --git a/electron/preload.ts b/electron/preload.ts
index 4f1c1f9b..53815424 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -1998,6 +1998,7 @@ contextBridge.exposeInMainWorld('avb', {
 
   // Pages
   readPage: invoke('page:read'),
+  parsePageSource: invoke('page:parse'),
   writePage: invoke('page:write'),
   writePageRaw: invoke('page:writeRaw'),
   createPage: invoke('page:create'),
diff --git a/electron/propertyContracts.ts b/electron/propertyContracts.ts
new file mode 100644
index 00000000..bf08f9fd
--- /dev/null
+++ b/electron/propertyContracts.ts
@@ -0,0 +1,392 @@
+import ts from 'typescript';
+import { assert } from '../shared/assert';
+import { PROPERTY_LIMITS } from '../shared/component-properties';
+import type { PropertyEditing } from '../shared/component-properties';
+import { isAstroProps, propertyKey, syntaxNodes } from './propertySyntax';
+import type { PropertySyntax } from './propertySyntax';
+
+type Declaration = ts.TypeAliasDeclaration | ts.InterfaceDeclaration;
+interface Usage {
+  readonly member: ts.PropertySignature;
+  readonly conditional: boolean;
+}
+interface Work {
+  readonly node: ts.Node;
+  readonly conditional: boolean;
+  readonly path: readonly string[];
+}
+interface Branch {
+  readonly condition: string;
+  readonly fields: ReadonlyMap<string, ts.PropertySignature>;
+}
+interface Contract {
+  readonly members: ReadonlyMap<string, readonly Usage[]>;
+  readonly names: ReadonlySet<string>;
+  readonly branches: readonly (readonly Branch[])[];
+  readonly complete: boolean;
+  readonly inheritedAttributes: boolean;
+}
+export interface PropertyContracts {
+  readonly names: ReadonlySet<string>;
+  readonly editable: ReadonlyMap<string, ts.PropertySignature>;
+  readonly editing: (name: string) => PropertyEditing;
+  readonly conditions: (name: string) => readonly string[];
+}
+
+// A common member must be the same declaration in both the public contract and
+// the runtime assertion. Editing it then preserves every variant and runtime type.
+export function readPropertyContracts(document: PropertySyntax): PropertyContracts {
+  const declarations = new Map<string, Declaration>();
+  for (const statement of document.syntax.statements) {
+    if (ts.isTypeAliasDeclaration(statement) || ts.isInterfaceDeclaration(statement)) {
+      if (declarations.has(statement.name.text)) {
+        return unavailableContracts('Duplicate type declarations require editing in source.');
+      }
+      declarations.set(statement.name.text, statement);
+    }
+  }
+  const assertions = syntaxNodes(document.syntax)
+    .filter(ts.isAsExpression)
+    .filter((node) => isAstroProps(node.expression));
+  const attributes = htmlAttributeImports(document.syntax);
+  const imports = importedTypeNames(document.syntax);
+  const publicContract = readContract(declarations.get('Props'), declarations, attributes, imports);
+  const runtimeContracts = assertions.map((node) =>
+    readContract(node.type, declarations, attributes, imports)
+  );
+  const contracts = [publicContract, ...runtimeContracts];
+  const editable = new Map<string, ts.PropertySignature>();
+  const reasons = new Map<string, string>();
+  for (const [name, usages] of publicContract.members) {
+    const member = usages[0]?.member;
+    assert(member !== undefined, 'Contract field has a declaration');
+    const reason = commonMemberRestriction(name, publicContract, runtimeContracts);
+    if (reason) {
+      reasons.set(name, reason);
+    } else {
+      editable.set(name, member);
+    }
+  }
+  assert(editable.size <= PROPERTY_LIMITS.fieldsMax, 'Editable contract fields are bounded');
+  return {
+    names: new Set(
+      contracts.flatMap((contract) => [...contract.names])
+    ),
+    editable,
+    editing: (name) =>
+      editable.has(name)
+        ? { kind: 'editable' }
+        : inheritedAttributeCanOverride(name, contracts)
+        ? {
+            kind: 'override',
+            reason: 'This HTML attribute will be declared locally when you save it.',
+          }
+        : {
+            kind: 'restricted',
+            reason:
+              reasons.get(name) ??
+              'This prop is inherited or imported. Edit its declaration in source.',
+          },
+    conditions: (name) => contractConditions(publicContract, name),
+  };
+}
+
+function unavailableContracts(reason: string): PropertyContracts {
+  return {
+    names: new Set(),
+    editable: new Map(),
+    editing: () => ({ kind: 'restricted', reason }),
+    conditions: () => [],
+  };
+}
+
+function inheritedAttributeCanOverride(name: string, contracts: readonly Contract[]): boolean {
+  const publicContract = contracts[0];
+  if (!publicContract?.inheritedAttributes) {
+    return false;
+  }
+  return contracts.every(
+    (contract) => contract.inheritedAttributes && !contract.members.has(name)
+  );
+}
+
+function commonMemberRestriction(
+  name: string,
+  contract: Contract,
+  runtimeContracts: readonly Contract[]
+): string | undefined {
+  const usages = contract.members.get(name) ?? [];
+  if (usages.some((usage) => usage.conditional)) {
+    return 'This prop has variant rules. Edit its declaration in source to preserve those rules.';
+  }
+  if (new Set(usages.map((usage) => usage.member)).size !== 1) {
+    return 'This prop combines multiple declarations. Edit those declarations in source.';
+  }
+  if (!contract.complete) {
+    return 'This prop depends on a shared or computed type that must be edited in source.';
+  }
+  const member = usages[0]?.member;
+  for (const runtime of runtimeContracts) {
+    const matches = runtime.members.get(name) ?? [];
+    if (
+      !runtime.complete ||
+      matches.length === 0 ||
+      matches.some((match) => match.member !== member || match.conditional)
+    ) {
+      return 'This prop has a separate runtime type. Edit both declarations together in source.';
+    }
+  }
+  return undefined;
+}
+
+function readContract(
+  root: ts.Node | undefined,
+  declarations: ReadonlyMap<string, Declaration>,
+  attributes: ReadonlySet<string>,
+  imports: ReadonlySet<string>
+): Contract {
+  const work: Work[] = root ? [{ node: root, conditional: false, path: [] }] : [];
+  const members = new Map<string, readonly Usage[]>();
+  const names = new Set<string>();
+  const branches: (readonly Branch[])[] = [];
+  let complete = root !== undefined;
+  let inheritedAttributes = false;
+  for (let count = 0; count < PROPERTY_LIMITS.nodesMax && work.length > 0; count++) {
+    const item = work.pop();
+    assert(item !== undefined, 'Contract traversal has a work item');
+    inheritedAttributes ||= isInheritedAstroAttributes(item.node, declarations, attributes);
+    if (ts.isPropertySignature(item.node)) {
+      const name = propertyKey(item.node.name);
+      if (name) {
+        const usages = members.get(name) ?? [];
+        assert(usages.length < PROPERTY_LIMITS.fieldsMax, 'Contract field usages are bounded');
+        members.set(name, [...usages, { member: item.node, conditional: item.conditional }]);
+      }
+    } else {
+      if (ts.isTypeAliasDeclaration(item.node) || ts.isInterfaceDeclaration(item.node)) {
+        names.add(item.node.name.text);
+      }
+      if (ts.isUnionTypeNode(item.node)) {
+        branches.push(unionBranches(item.node));
+      }
+      const children = contractChildren(item, declarations, attributes, imports);
+      if (children === undefined) {
+        complete = false;
+      } else {
+        work.push(...children);
+      }
+    }
+    assert(work.length <= PROPERTY_LIMITS.nodesMax, 'Contract traversal queue is bounded');
+  }
+  assert(work.length === 0, 'Contract traversal completes within its budget');
+  assert(members.size <= PROPERTY_LIMITS.fieldsMax, 'Contract field count is bounded');
+  return { members, names, branches, complete, inheritedAttributes };
+}
+
+function isInheritedAstroAttributes(
+  node: ts.Node,
+  declarations: ReadonlyMap<string, Declaration>,
+  attributes: ReadonlySet<string>
+): boolean {
+  if (!ts.isTypeReferenceNode(node) && !ts.isExpressionWithTypeArguments(node)) {
+    return false;
+  }
+  const name = ts.isTypeReferenceNode(node) ? node.typeName.getText() : node.expression.getText();
+  return attributes.has(name) && !declarations.has(name);
+}
+
+function contractChildren(
+  item: Work,
+  declarations: ReadonlyMap<string, Declaration>,
+  attributes: ReadonlySet<string>,
+  imports: ReadonlySet<string>
+): readonly Work[] | undefined {
+  const { node } = item;
+  if (ts.isTypeAliasDeclaration(node) || ts.isInterfaceDeclaration(node)) {
+    if (node.typeParameters || item.path.includes(node.name.text) || item.path.length >= 64) {
+      return undefined;
+    }
+    if (node.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)) {
+      return undefined;
+    }
+    const next = { ...item, path: [...item.path, node.name.text] };
+    if (ts.isTypeAliasDeclaration(node)) {
+      return [{ ...next, node: node.type }];
+    }
+    return [
+      ...node.members.map((member) => ({ ...next, node: member })),
+      ...(node.heritageClauses ?? [])
+        .flatMap((clause) => clause.types)
+        .map((type) => ({ ...next, node: type })),
+    ];
+  }
+  if (ts.isTypeLiteralNode(node)) {
+    return node.members.map((member) => ({ ...item, node: member }));
+  }
+  if (ts.isUnionTypeNode(node) || ts.isIntersectionTypeNode(node)) {
+    return node.types.map((type) => ({
+      ...item,
+      node: type,
+      conditional: item.conditional || ts.isUnionTypeNode(node),
+    }));
+  }
+  if (ts.isParenthesizedTypeNode(node)) {
+    return [{ ...item, node: node.type }];
+  }
+  if (ts.isTypeReferenceNode(node) || ts.isExpressionWithTypeArguments(node)) {
+    const name = ts.isTypeReferenceNode(node) ? node.typeName.getText() : node.expression.getText();
+    // DOM attributes are inherited, but locally authored members remain editable.
+    if (attributes.has(name) && !declarations.has(name)) {
+      return [];
+    }
+    // Omit only narrows known Astro attributes, so it cannot hide another local declaration.
+    if (
+      ts.isTypeReferenceNode(node) &&
+      isOmittedAstroAttributes(node, declarations, attributes, imports)
+    ) {
+      return [];
+    }
+    const declaration = declarations.get(name);
+    return declaration && !node.typeArguments ? [{ ...item, node: declaration }] : undefined;
+  }
+  return undefined;
+}
+
+function isOmittedAstroAttributes(
+  node: ts.TypeReferenceNode,
+  declarations: ReadonlyMap<string, Declaration>,
+  attributes: ReadonlySet<string>,
+  imports: ReadonlySet<string>
+): boolean {
+  if (node.typeName.getText() !== 'Omit') {
+    return false;
+  }
+  if (declarations.has('Omit')) {
+    return false;
+  }
+  if (imports.has('Omit')) {
+    return false;
+  }
+  const argumentsList = node.typeArguments;
+  if (argumentsList?.length !== 2) {
+    return false;
+  }
+  const inherited = argumentsList[0];
+  if (!inherited || !ts.isTypeReferenceNode(inherited)) {
+    return false;
+  }
+  const inheritedName = inherited.typeName.getText();
+  if (!attributes.has(inheritedName)) {
+    return false;
+  }
+  return !declarations.has(inheritedName);
+}
+
+function htmlAttributeImports(syntax: ts.SourceFile): ReadonlySet<string> {
+  const names = new Set<string>();
+  for (const statement of syntax.statements) {
+    if (ts.isImportDeclaration(statement) && ts.isStringLiteral(statement.moduleSpecifier)) {
+      const bindings = statement.importClause?.namedBindings;
+      if (
+        statement.moduleSpecifier.text === 'astro/types' &&
+        bindings &&
+        ts.isNamedImports(bindings)
+      ) {
+        for (const specifier of bindings.elements) {
+          if ((specifier.propertyName ?? specifier.name).text === 'HTMLAttributes') {
+            names.add(specifier.name.text);
+          }
+        }
+      }
+    }
+  }
+  return names;
+}
+
+function importedTypeNames(syntax: ts.SourceFile): ReadonlySet<string> {
+  const names = new Set<string>();
+  for (const statement of syntax.statements) {
+    if (ts.isImportDeclaration(statement)) {
+      const clause = statement.importClause;
+      if (clause?.name) {
+        names.add(clause.name.text);
+      }
+      const bindings = clause?.namedBindings;
+      if (bindings && ts.isNamespaceImport(bindings)) {
+        names.add(bindings.name.text);
+      } else if (bindings) {
+        for (const specifier of bindings.elements) {
+          names.add(specifier.name.text);
+        }
+      }
+    }
+  }
+  return names;
+}
+
+function unionBranches(node: ts.UnionTypeNode): readonly Branch[] {
+  const fields = node.types.map(branchFields);
+  const discriminator = [...(fields[0]?.keys() ?? [])].find((name) =>
+    fields.every((branch) => literalBranchValue(branch.get(name)?.type) !== undefined)
+  );
+  return fields.map((branch, index) => ({
+    fields: branch,
+    condition: discriminator
+      ? `${discriminator} = ${literalBranchValue(branch.get(discriminator)?.type)}`
+      : `Variant branch ${index + 1}`,
+  }));
+}
+
+function branchFields(root: ts.TypeNode): ReadonlyMap<string, ts.PropertySignature> {
+  const work = [root];
+  const fields = new Map<string, ts.PropertySignature>();
+  for (let count = 0; count < PROPERTY_LIMITS.nodesMax && work.length; count++) {
+    const node = work.pop();
+    assert(node !== undefined, 'Variant branch work item exists');
+    if (ts.isTypeLiteralNode(node)) {
+      for (const member of node.members) {
+        if (ts.isPropertySignature(member)) {
+          const name = propertyKey(member.name);
+          if (name) {
+            fields.set(name, member);
+          }
+        }
+      }
+    } else if (ts.isIntersectionTypeNode(node)) {
+      work.push(...node.types);
+    } else if (ts.isParenthesizedTypeNode(node)) {
+      work.push(node.type);
+    }
+  }
+  assert(work.length === 0, 'Variant branch traversal is bounded');
+  return fields;
+}
+
+function literalBranchValue(type: ts.TypeNode | undefined): string | undefined {
+  if (!type) {
+    return undefined;
+  }
+  const types = ts.isUnionTypeNode(type) ? type.types : [type];
+  return types.every((value) => ts.isLiteralTypeNode(value)) ? type.getText() : undefined;
+}
+
+function contractConditions(contract: Contract, name: string): readonly string[] {
+  const common = contract.members.get(name)?.find((usage) => !usage.conditional)?.member;
+  const conditions = contract.branches
+    .filter((branches) => branches.some((branch) => branch.fields.has(name)))
+    .flatMap((branches) =>
+      branches.map((branch) => {
+        const member = branch.fields.get(name) ?? common;
+        const state = member
+          ? member.type?.kind === ts.SyntaxKind.NeverKeyword
+            ? 'not allowed'
+            : member.questionToken
+            ? 'optional'
+            : 'required'
+          : 'not declared';
+        return `${branch.condition}: ${state}`;
+      })
+    );
+  assert(conditions.length <= PROPERTY_LIMITS.fieldsMax, 'Property variant conditions are bounded');
+  return conditions;
+}
diff --git a/electron/propertyDefinitions.ts b/electron/propertyDefinitions.ts
index 3e8428f4..c59a47e1 100644
--- a/electron/propertyDefinitions.ts
+++ b/electron/propertyDefinitions.ts
@@ -1,3 +1,8 @@
+import { readPropertyOrigins } from './propertyOrigins';
+import { readPropertyContracts } from './propertyContracts';
+import type { PropertyContracts } from './propertyContracts';
+import type { PropertyOrigins } from './propertyOrigins';
+import type { SchemaField } from './astroParser.types';
 import { createPropertyTypeReader } from './propertyTypes';
 import { bindComponentDefault } from './propertyRename';
 import ts from 'typescript';
@@ -6,6 +11,7 @@ import type {
   ComponentProperties,
   ComponentProperty,
   PropertyChange,
+  PropertyEditing,
 } from '../shared/component-properties';
 import { PROPERTY_LIMITS } from '../shared/component-properties';
 import { err, ok, type Result } from '../shared/result';
@@ -35,18 +41,32 @@ interface Definitions {
 
 export function readComponentProperties(source: string): ComponentProperties {
   const definitions = readDefinitions(source);
+  const origins = readPropertyOrigins(definitions.document);
+  const fields = readDefinitionFields(definitions);
+  const contracts = readPropertyContracts(definitions.document);
+  return {
+    source,
+    properties: [...fields.values()].map((property) =>
+      sourcedProperty(property, definitions, origins, contracts)
+    ),
+    frontmatter: definitions.document.frontmatter,
+    advanced: definitions.advanced,
+  };
+}
+
+function readDefinitionFields(definitions: Definitions): ReadonlyMap<string, ComponentProperty> {
   const fields = new Map<string, ComponentProperty>();
   const names = new Set([
     ...definitions.members.map((member) => propertyKey(member.name)),
     ...definitions.bindings.map((binding) => propertyKey(binding.propertyName ?? binding.name)),
   ]);
-  for (const field of parsePropSchema(source)) {
+  for (const field of parsePropSchema(definitions.document.source)) {
     if (!definitions.advanced && !names.has(field.name)) {
       continue;
     }
     fields.set(field.name, {
       name: field.name,
-      type: field.type || 'unknown',
+      type: schemaPropertyType(field),
       required: !field.optional,
       readonly: false,
       defaultValue: '',
@@ -86,14 +106,81 @@ export function readComponentProperties(source: string): ComponentProperties {
   }
   assert(fields.size <= PROPERTY_LIMITS.fieldsMax, 'Component field count is bounded');
   assert(new Set(fields.keys()).size === fields.size, 'Component property names are unique');
+  return fields;
+}
+
+function schemaPropertyType(field: SchemaField): string {
+  if (field.type === 'enum' && field.options?.length) {
+    return field.options
+      .map((value) => (field.numeric ? value : JSON.stringify(value)))
+      .join(' | ');
+  }
+  return ['enum', 'other', 'code', 'attrs', 'slot', 'style'].includes(field.type)
+    ? 'unknown'
+    : field.type || 'unknown';
+}
+
+function sourcedProperty(
+  property: ComponentProperty,
+  definitions: Definitions,
+  origins: PropertyOrigins,
+  contracts: PropertyContracts
+): ComponentProperty {
+  const binding = definitions.bindings.find(
+    (item) => propertyKey(item.propertyName ?? item.name) === property.name
+  );
+  const types = (origins.members.get(property.name) ?? [])
+    .flatMap((member) => (member.type ? [definitions.readType(member.type)] : []))
+    .filter((type) => type !== 'never');
+  const member = contracts.editable.get(property.name);
   return {
-    source,
-    properties: [...fields.values()],
-    frontmatter: definitions.document.frontmatter,
-    advanced: definitions.advanced,
+    ...property,
+    ...(member
+      ? {
+          required: member.questionToken === undefined,
+          readonly:
+            member.modifiers?.some((item) => item.kind === ts.SyntaxKind.ReadonlyKeyword) ?? false,
+          description: readDescription(member, definitions.document.frontmatter),
+        }
+      : {}),
+    type: definitions.advanced && types.length ? [...new Set(types)].join(' | ') : property.type,
+    origin: origins.origin(property.name, binding),
+    editing: definitions.advanced
+      ? contractEditing(definitions, contracts, property.name)
+      : {
+          kind: 'editable',
+        },
+    conditions: contracts.conditions(property.name),
   };
 }
 
+function contractEditing(
+  definitions: Definitions,
+  contracts: PropertyContracts,
+  name: string
+): PropertyEditing {
+  if (
+    definitions.patterns.length > 1 ||
+    definitions.bindings.some((binding) => !ts.isIdentifier(binding.name))
+  ) {
+    return {
+      kind: 'restricted',
+      reason: 'This prop uses complex destructuring. Edit it in source.',
+    };
+  }
+  if (!/^[A-Za-z_$][\w$]*$/.test(name)) {
+    return { kind: 'restricted', reason: 'This prop uses a quoted name. Edit it in source.' };
+  }
+  const editing = contracts.editing(name);
+  if (editing.kind === 'override' && !definitions.container) {
+    return {
+      kind: 'restricted',
+      reason: 'This inherited prop has no unambiguous local declaration to update.',
+    };
+  }
+  return editing;
+}
+
 export function editPropertyDefinition(source: string, change: PropertyChange): Result<string> {
   const definitions = readDefinitions(source);
   if (change.kind === 'source') {
@@ -104,39 +191,70 @@ export function editPropertyDefinition(source: string, change: PropertyChange):
     return ok(replaceFrontmatter(definitions.document, change.frontmatter.replace(/\s*$/, '\n')));
   }
   if (definitions.advanced) {
-    return err({
-      code: 'advanced',
-      message:
-        'This contract uses imported, generic, or composite props. ' +
-        'Declare editable fields in Props.',
-    });
+    return editCommonDefinition(definitions, change);
   }
   if (change.kind === 'order') {
     return reorderDefinitions(definitions, change.names);
   }
+  if (change.kind === 'options') {
+    return saveDefinitionOptions(definitions, change.name, change.type);
+  }
   if (change.kind === 'remove') {
     return removeDefinition(definitions, change.name);
   }
   return saveDefinition(definitions, change.originalName, change.property);
 }
 
+function editCommonDefinition(
+  definitions: Definitions,
+  change: Exclude<PropertyChange, { readonly kind: 'source' }>
+): Result<string> {
+  if (change.kind === 'order' || (change.kind === 'save' && !change.originalName)) {
+    return err({
+      code: 'advanced',
+      message: 'Add or reorder declarations in this combined type in source.',
+    });
+  }
+  const name = change.kind === 'save' ? change.originalName : change.name;
+  // Renderer permissions are descriptive only; every write rechecks the current source.
+  const contracts = readPropertyContracts(definitions.document);
+  const access = contractEditing(definitions, contracts, name);
+  if (access.kind === 'restricted') {
+    return err({ code: 'restricted', message: access.reason });
+  }
+  if (access.kind === 'override') {
+    if (change.kind === 'remove') {
+      return err({ code: 'inherited', message: 'Inherited HTML attributes cannot be deleted.' });
+    }
+    if (change.kind === 'save' && change.property.name !== name) {
+      return err({ code: 'inherited', message: 'Inherited HTML attributes cannot be renamed.' });
+    }
+    return change.kind === 'options'
+      ? saveDefinitionOptions(definitions, name, change.type)
+      : saveDefinition(definitions, name, change.property);
+  }
+  const member = contracts.editable.get(name);
+  assert(member !== undefined, 'An editable common property has a declaration');
+  assert(propertyKey(member.name) === name, 'The edit targets the requested declaration');
+  const common = { ...definitions, members: [member] };
+  if (change.kind === 'remove') {
+    return removeDefinition(common, name);
+  }
+  if (change.kind === 'options') {
+    return saveDefinitionOptions(common, name, change.type);
+  }
+  return saveDefinition(common, name, change.property);
+}
+
 function readDefinitions(source: string): Definitions {
   const document = readPropertySyntax(source);
-  const declarations = document.syntax.statements.filter((statement) => {
-    if (ts.isInterfaceDeclaration(statement) || ts.isTypeAliasDeclaration(statement)) {
-      return statement.name.text === 'Props';
-    }
-    return false;
-  });
+  const declarations = document.syntax.statements.filter(
+    (statement): statement is ts.InterfaceDeclaration | ts.TypeAliasDeclaration =>
+      (ts.isInterfaceDeclaration(statement) || ts.isTypeAliasDeclaration(statement)) &&
+      statement.name.text === 'Props'
+  );
   const declaration = declarations[0];
-  const container =
-    declaration && ts.isInterfaceDeclaration(declaration)
-      ? declaration
-      : declaration &&
-        ts.isTypeAliasDeclaration(declaration) &&
-        ts.isTypeLiteralNode(declaration.type)
-      ? declaration.type
-      : undefined;
+  const container = definitionContainer(declaration);
   const members = container?.members.filter(ts.isPropertySignature) ?? [];
   const patterns = syntaxNodes(document.syntax)
     .filter(ts.isVariableDeclaration)
@@ -161,7 +279,9 @@ function readDefinitions(source: string): Definitions {
     (declaration !== undefined &&
       ts.isTypeAliasDeclaration(declaration) &&
       declaration.typeParameters !== undefined) ||
-    (declaration !== undefined && container === undefined) ||
+    (declaration !== undefined &&
+      ts.isTypeAliasDeclaration(declaration) &&
+      !ts.isTypeLiteralNode(declaration.type)) ||
     (container !== undefined && container.members.length !== members.length) ||
     (container !== undefined &&
       ts.isInterfaceDeclaration(container) &&
@@ -180,6 +300,22 @@ function readDefinitions(source: string): Definitions {
   };
 }
 
+function definitionContainer(
+  declaration: ts.InterfaceDeclaration | ts.TypeAliasDeclaration | undefined
+): ts.InterfaceDeclaration | ts.TypeLiteralNode | undefined {
+  if (!declaration || ts.isInterfaceDeclaration(declaration)) {
+    return declaration;
+  }
+  if (ts.isTypeLiteralNode(declaration.type)) {
+    return declaration.type;
+  }
+  if (!ts.isIntersectionTypeNode(declaration.type)) {
+    return undefined;
+  }
+  const literals = declaration.type.types.filter(ts.isTypeLiteralNode);
+  return literals.length === 1 ? literals[0] : undefined;
+}
+
 function readDescription(member: ts.PropertySignature, source: string): string {
   const leading = source.slice(member.getFullStart(), member.getStart());
   const match = /\/\*\*([\s\S]*?)\*\//.exec(leading);
@@ -264,6 +400,22 @@ function saveDefinition(
   return ok(output);
 }
 
+function saveDefinitionOptions(
+  definitions: Definitions,
+  name: string,
+  type: string
+): Result<string> {
+  const property = readComponentProperties(definitions.document.source).properties.find(
+    (field) => field.name === name
+  );
+  if (!property) {
+    return err({ code: 'missing', message: 'This property no longer exists. Reload the panel.' });
+  }
+  assert(property.name === name, 'Option reorder targets the requested property');
+  assert(type.length <= PROPERTY_LIMITS.textCharsMax, 'Option type is bounded');
+  return saveDefinition(definitions, name, { ...property, type });
+}
+
 function renderSavedDefinition(
   definitions: Definitions,
   member: ts.PropertySignature,
diff --git a/electron/propertyOrigins.ts b/electron/propertyOrigins.ts
new file mode 100644
index 00000000..af22b90d
--- /dev/null
+++ b/electron/propertyOrigins.ts
@@ -0,0 +1,162 @@
+import ts from 'typescript';
+import { assert } from '../shared/assert';
+import { PROPERTY_LIMITS } from '../shared/component-properties';
+import type { PropertyOrigin, PropertySource } from '../shared/component-properties';
+import { propertyKey, syntaxNodes } from './propertySyntax';
+import type { PropertySyntax } from './propertySyntax';
+
+type Declaration = ts.InterfaceDeclaration | ts.TypeAliasDeclaration;
+interface Work {
+  readonly node: ts.Node;
+  readonly owner: string;
+}
+export interface PropertyOrigins {
+  readonly members: ReadonlyMap<string, readonly ts.PropertySignature[]>;
+  readonly origin: (name: string, binding: ts.BindingElement | undefined) => PropertyOrigin;
+}
+
+// Trace only the prop contract graph: similarly named fields in unrelated objects are not sources.
+// Props is authoritative; a widened Astro.props assertion supplies missing fields only.
+export function readPropertyOrigins(document: PropertySyntax): PropertyOrigins {
+  const declarations = new Map<string, Declaration>();
+  for (const statement of document.syntax.statements) {
+    if (ts.isInterfaceDeclaration(statement) || ts.isTypeAliasDeclaration(statement)) {
+      declarations.set(statement.name.text, statement);
+    }
+  }
+  const roots = [
+    'Props',
+    ...syntaxNodes(document.syntax)
+      .filter(ts.isAsExpression)
+      .filter((node) => node.expression.getText() === 'Astro.props')
+      .map((node) => node.type.getText()),
+  ];
+  const members = new Map<string, readonly ts.PropertySignature[]>();
+  const sources = new Map<string, readonly PropertySource[]>();
+  assert(roots.length <= PROPERTY_LIMITS.nodesMax, 'Property origin roots are bounded');
+  for (const root of new Set(roots)) {
+    const found = readOriginMembers(declarations.get(root), declarations);
+    for (const [name, entries] of found) {
+      if (!members.has(name)) {
+        members.set(
+          name,
+          entries.map((entry) => entry.member)
+        );
+        sources.set(
+          name,
+          entries.map((entry) =>
+            originSource(
+              document,
+              entry.member,
+              `${entry.owner}.${name}`,
+              entry.member.type?.getText() ?? 'unknown'
+            )
+          )
+        );
+      }
+    }
+  }
+  assert(members.size <= PROPERTY_LIMITS.fieldsMax, 'Property origin fields are bounded');
+  return {
+    members,
+    origin: (name, binding) => ({
+      declarations: sources.get(name) ?? [],
+      ...(binding?.initializer
+        ? {
+            defaultValue: originSource(
+              document,
+              binding,
+              `Astro.props.${name}`,
+              binding.initializer.getText()
+            ),
+          }
+        : {}),
+    }),
+  };
+}
+
+interface OriginMember {
+  readonly member: ts.PropertySignature;
+  readonly owner: string;
+}
+function readOriginMembers(
+  root: Declaration | undefined,
+  declarations: ReadonlyMap<string, Declaration>
+): ReadonlyMap<string, readonly OriginMember[]> {
+  const work: Work[] = root ? [{ node: root, owner: root.name.text }] : [];
+  const seen = new Set<ts.Node>();
+  const members = new Map<string, readonly OriginMember[]>();
+  for (let count = 0; count < PROPERTY_LIMITS.nodesMax && work.length > 0; count++) {
+    const item = work.pop();
+    assert(item !== undefined, 'A property origin work item exists');
+    if (seen.has(item.node)) {
+      continue;
+    }
+    seen.add(item.node);
+    if (ts.isPropertySignature(item.node)) {
+      const name = propertyKey(item.node.name);
+      if (name) {
+        const previous = members.get(name) ?? [];
+        assert(previous.length < PROPERTY_LIMITS.fieldsMax, 'Property source count is bounded');
+        members.set(name, [...previous, { member: item.node, owner: item.owner }]);
+      }
+    } else {
+      work.push(...originChildren(item, declarations).reverse());
+      assert(work.length <= PROPERTY_LIMITS.nodesMax, 'Property origin queue is bounded');
+    }
+  }
+  assert(work.length === 0, 'Property origin traversal completes within bounds');
+  return members;
+}
+
+function originChildren(item: Work, declarations: ReadonlyMap<string, Declaration>): Work[] {
+  const { node, owner } = item;
+  if (ts.isTypeAliasDeclaration(node)) {
+    return [{ node: node.type, owner: node.name.text }];
+  }
+  if (ts.isInterfaceDeclaration(node)) {
+    return [
+      ...node.members.map((member) => ({ node: member, owner: node.name.text })),
+      ...(node.heritageClauses ?? [])
+        .flatMap((clause) => clause.types)
+        .flatMap((type) => originReference(type.expression.getText(), declarations)),
+    ];
+  }
+  if (ts.isTypeLiteralNode(node)) {
+    return node.members.map((member) => ({ node: member, owner }));
+  }
+  if (ts.isUnionTypeNode(node) || ts.isIntersectionTypeNode(node)) {
+    return node.types.map((type) => ({ node: type, owner }));
+  }
+  if (ts.isParenthesizedTypeNode(node)) {
+    return [{ node: node.type, owner }];
+  }
+  if (ts.isTypeReferenceNode(node)) {
+    // Generic transformations can rename or omit fields; do not invent per-field provenance.
+    return node.typeArguments ? [] : originReference(node.typeName.getText(), declarations);
+  }
+  return [];
+}
+
+function originReference(name: string, declarations: ReadonlyMap<string, Declaration>): Work[] {
+  const declaration = declarations.get(name);
+  return declaration ? [{ node: declaration, owner: name }] : [];
+}
+
+function originSource(
+  document: PropertySyntax,
+  node: ts.Node,
+  label: string,
+  expression: string
+): PropertySource {
+  const offset = node.getStart(document.syntax);
+  assert(offset >= 0, 'Property source offset is nonnegative');
+  assert(offset <= document.frontmatter.length, 'Property source offset is inside frontmatter');
+  return {
+    label,
+    expression,
+    line:
+      document.syntax.getLineAndCharacterOfPosition(offset).line +
+      document.source.slice(0, document.start).split('\n').length,
+  };
+}
diff --git a/electron/propertyRename.ts b/electron/propertyRename.ts
index 490ba910..1f15e09e 100644
--- a/electron/propertyRename.ts
+++ b/electron/propertyRename.ts
@@ -3,8 +3,10 @@
 import { parse } from '@astrojs/compiler/sync';
 import type { Node, AttributeNode } from '@astrojs/compiler/types';
 import ts from 'typescript';
+import { readPropertyContracts } from './propertyContracts';
 import { assert } from '../shared/assert';
 import { PROPERTY_LIMITS } from '../shared/component-properties';
+import type { PropertyOptionRename } from '../shared/component-properties';
 import { err, ok, type Result } from '../shared/result';
 import {
   applySourceEdits,
@@ -20,8 +22,23 @@ export interface PropertyRename {
   readonly to: string;
 }
 
+type OptionScalar =
+  | { readonly kind: 'string'; readonly value: string }
+  | { readonly kind: 'number'; readonly value: number }
+  | { readonly kind: 'boolean'; readonly value: boolean };
+interface ParsedOptionRename {
+  readonly from: OptionScalar;
+  readonly to: OptionScalar;
+  readonly replacement: string;
+}
+
 type PropertyReferenceEdit =
-  | { readonly kind: 'rename'; readonly from: string; readonly to: string }
+  | {
+      readonly kind: 'rename';
+      readonly from: string;
+      readonly to: string;
+      readonly typeNames: ReadonlySet<string>;
+    }
   | {
       readonly kind: 'default';
       readonly from: string;
@@ -36,7 +53,291 @@ export function renameComponentReferences(
   rename: PropertyRename,
   owner: 'definition' | 'consumer'
 ): Result<string> {
-  return editComponentReferences(source, names, { kind: 'rename', ...rename }, owner);
+  const typeNames =
+    owner === 'definition'
+      ? readPropertyContracts(readPropertySyntax(source)).names
+      : new Set<string>();
+  return editComponentReferences(
+    source,
+    names,
+    { kind: 'rename', ...rename, typeNames: new Set(['Props', ...typeNames]) },
+    owner
+  );
+}
+
+export function renameComponentOptionValues(
+  source: string,
+  names: ReadonlySet<string>,
+  propertyName: string,
+  renames: readonly PropertyOptionRename[]
+): Result<string> {
+  const parsed = parseOptionRenames(renames);
+  if (!parsed.ok) {
+    return parsed;
+  }
+  const root = parseAstroRenameSource(source);
+  if (!root.ok) {
+    return root;
+  }
+  const edits: SourceEdit[] = [];
+  const pending: Node[] = [root.value];
+  for (let index = 0; index < pending.length; index += 1) {
+    assert(pending.length <= PROPERTY_LIMITS.nodesMax, 'Astro option rename node budget');
+    const node = pending[index];
+    assert(node !== undefined, 'Queued Astro option node exists');
+    const result = renameNodeOptions(source, node, names, propertyName, parsed.value);
+    if (!result.ok) {
+      return result;
+    }
+    edits.push(...result.value);
+    if ('children' in node) {
+      if (node.type === 'element' && ['script', 'style'].includes(node.name)) {
+        continue;
+      }
+      pending.push(...node.children);
+    }
+  }
+  return ok(applySourceEdits(source, edits));
+}
+
+function parseAstroRenameSource(source: string): Result<Node> {
+  try {
+    const result = parse(source, { position: true });
+    const diagnostic = result.diagnostics.find((entry) => entry.severity === 1);
+    return diagnostic ? err({ code: 'syntax', message: diagnostic.text }) : ok(result.ast);
+  } catch (error: unknown) {
+    return err({ code: 'syntax', message: String(error) });
+  }
+}
+
+function parseOptionRenames(
+  renames: readonly PropertyOptionRename[]
+): Result<readonly ParsedOptionRename[]> {
+  assert(renames.length <= PROPERTY_LIMITS.fieldsMax, 'Option rename count is bounded');
+  const parsed: ParsedOptionRename[] = [];
+  const sources = new Set<string>();
+  for (const rename of renames) {
+    const from = optionScalar(rename.from);
+    const to = optionScalar(rename.to);
+    if (!from || !to) {
+      return err({
+        code: 'option',
+        message: 'Option renames require literal values.',
+      });
+    }
+    const key = optionScalarKey(from);
+    if (sources.has(key)) {
+      return err({
+        code: 'option',
+        message: 'An option value is renamed more than once.',
+      });
+    }
+    sources.add(key);
+    parsed.push({ from, to, replacement: rename.to });
+  }
+  return ok(parsed);
+}
+
+function renameNodeOptions(
+  source: string,
+  node: Node,
+  names: ReadonlySet<string>,
+  propertyName: string,
+  renames: readonly ParsedOptionRename[]
+): Result<readonly SourceEdit[]> {
+  if (!('attributes' in node) || node.type !== 'component' || !names.has(node.name)) {
+    return ok([]);
+  }
+  const edits: SourceEdit[] = [];
+  for (const attribute of node.attributes) {
+    const result = renameOptionAttribute(source, attribute, propertyName, renames);
+    if (!result.ok) {
+      return result;
+    }
+    edits.push(...result.value);
+  }
+  return ok(edits);
+}
+
+function renameOptionAttribute(
+  source: string,
+  attribute: AttributeNode,
+  propertyName: string,
+  renames: readonly ParsedOptionRename[]
+): Result<readonly SourceEdit[]> {
+  const start = offset(source, attribute);
+  if (attribute.kind === 'spread') {
+    return renameOptionSpread(source, attribute, propertyName, renames, start);
+  }
+  if (attribute.name !== propertyName) {
+    return ok([]);
+  }
+  if (attribute.kind === 'quoted') {
+    return renameQuotedOption(source, attribute, renames, start);
+  }
+  if (attribute.kind !== 'expression' && attribute.kind !== 'template-literal') {
+    return ok([]);
+  }
+  const position = source.indexOf(attribute.value, start + attribute.name.length);
+  if (position < 0) {
+    return positionError();
+  }
+  return ok(renameOptionExpression(attribute.value, position, renames));
+}
+
+function renameQuotedOption(
+  source: string,
+  attribute: AttributeNode,
+  renames: readonly ParsedOptionRename[],
+  start: number
+): Result<readonly SourceEdit[]> {
+  const rename = renames.find(
+    (entry) => entry.from.kind === 'string' && entry.from.value === attribute.value
+  );
+  if (!rename) {
+    return ok([]);
+  }
+  const raw = attribute.raw;
+  if (raw === undefined) {
+    return positionError();
+  }
+  const position = source.indexOf(raw, start + attribute.name.length);
+  if (position < 0) {
+    return positionError();
+  }
+  const text =
+    rename.to.kind === 'string' ? JSON.stringify(rename.to.value) : `{${rename.replacement}}`;
+  return ok([{ start: position, end: position + raw.length, text }]);
+}
+
+function renameOptionSpread(
+  source: string,
+  attribute: AttributeNode,
+  propertyName: string,
+  renames: readonly ParsedOptionRename[],
+  position: number
+): Result<readonly SourceEdit[]> {
+  const prefix = 'const spread = (';
+  const syntax = ts.createSourceFile(
+    'spread.ts',
+    prefix + attribute.name + ');',
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS
+  );
+  const object = syntaxNodes(syntax).find(ts.isObjectLiteralExpression);
+  if (!object || optionSpreadIsDynamic(object)) {
+    return err({
+      code: 'spread',
+      message:
+        'An instance uses a dynamic prop spread. ' +
+        'Make its props explicit before renaming this option.',
+    });
+  }
+  const start = source.indexOf(attribute.name, Math.max(0, position - attribute.name.length - 4));
+  if (start < 0 || start > position + attribute.name.length + 4) {
+    return positionError();
+  }
+  const edits: SourceEdit[] = [];
+  for (const property of object.properties) {
+    if (!ts.isPropertyAssignment(property) || propertyKey(property.name) !== propertyName) {
+      continue;
+    }
+    edits.push(...renameOptionExpressionNode(property.initializer, start - prefix.length, renames));
+  }
+  return ok(edits);
+}
+
+function optionSpreadIsDynamic(object: ts.ObjectLiteralExpression): boolean {
+  return object.properties.some(
+    (property) =>
+      ts.isSpreadAssignment(property) ||
+      (property.name !== undefined && ts.isComputedPropertyName(property.name))
+  );
+}
+
+function renameOptionExpression(
+  expression: string,
+  start: number,
+  renames: readonly ParsedOptionRename[]
+): readonly SourceEdit[] {
+  const prefix = 'const value = (';
+  const syntax = ts.createSourceFile(
+    'option.ts',
+    prefix + expression + ');',
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX
+  );
+  const declaration = syntaxNodes(syntax).find(ts.isVariableDeclaration);
+  const initializer = declaration?.initializer;
+  assert(initializer !== undefined, 'Option expression has an initializer');
+  const value = ts.isParenthesizedExpression(initializer) ? initializer.expression : initializer;
+  return renameOptionExpressionNode(value, start - prefix.length, renames);
+}
+
+function renameOptionExpressionNode(
+  expression: ts.Expression,
+  start: number,
+  renames: readonly ParsedOptionRename[]
+): readonly SourceEdit[] {
+  const edits: SourceEdit[] = [];
+  for (const node of syntaxNodes(expression)) {
+    if (ts.isNumericLiteral(node) && ts.isPrefixUnaryExpression(node.parent)) {
+      continue;
+    }
+    const scalar = optionScalarNode(node);
+    const rename = scalar
+      ? renames.find((entry) => optionScalarKey(entry.from) === optionScalarKey(scalar))
+      : undefined;
+    if (rename) {
+      edits.push({
+        start: start + node.getStart(),
+        end: start + node.end,
+        text: rename.replacement,
+      });
+    }
+  }
+  return edits;
+}
+
+function optionScalar(expression: string): OptionScalar | undefined {
+  const prefix = 'const value = (';
+  const syntax = ts.createSourceFile(
+    'literal.ts',
+    prefix + expression + ');',
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS
+  );
+  const declaration = syntaxNodes(syntax).find(ts.isVariableDeclaration);
+  const initializer = declaration?.initializer;
+  if (!initializer || !ts.isParenthesizedExpression(initializer)) {
+    return undefined;
+  }
+  return optionScalarNode(initializer.expression);
+}
+
+function optionScalarNode(node: ts.Node): OptionScalar | undefined {
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+    return { kind: 'string', value: node.text };
+  }
+  if (ts.isNumericLiteral(node)) {
+    const value = Number(node.text);
+    return Number.isFinite(value) ? { kind: 'number', value } : undefined;
+  }
+  if (ts.isPrefixUnaryExpression(node) && node.operator === ts.SyntaxKind.MinusToken) {
+    const value = ts.isNumericLiteral(node.operand) ? -Number(node.operand.text) : Number.NaN;
+    return Number.isFinite(value) ? { kind: 'number', value } : undefined;
+  }
+  if (node.kind === ts.SyntaxKind.TrueKeyword || node.kind === ts.SyntaxKind.FalseKeyword) {
+    return { kind: 'boolean', value: node.kind === ts.SyntaxKind.TrueKeyword };
+  }
+  return undefined;
+}
+
+function optionScalarKey(value: OptionScalar): string {
+  return `${value.kind}:${String(value.value)}`;
 }
 
 export function bindComponentDefault(
@@ -98,6 +399,38 @@ function editComponentReferences(
     }
     edits.push(...result.value);
   }
+  const nodes = editAstroNodes(source, root, names, rename, owner);
+  if (!nodes.ok) {
+    return nodes;
+  }
+  edits.push(...nodes.value);
+  if (rename.kind === 'default' && edits.length > 0) {
+    if (edits.some((edit) => edit.start < rename.declarationEnd)) {
+      return err({
+        code: 'default-order',
+        message:
+          'A prop read precedes its default. ' +
+          'Move the Astro.props binding before that read in source.',
+      });
+    }
+    // A unique alias prevents a template loop variable from shadowing the defaulted prop.
+    edits.push({
+      start: rename.declarationEnd,
+      end: rename.declarationEnd,
+      text: `\nconst ${rename.binding} = ${rename.local};`,
+    });
+  }
+  return ok(applySourceEdits(source, edits));
+}
+
+function editAstroNodes(
+  source: string,
+  root: Node,
+  names: ReadonlySet<string>,
+  rename: PropertyReferenceEdit,
+  owner: 'definition' | 'consumer'
+): Result<readonly SourceEdit[]> {
+  const edits: SourceEdit[] = [];
   const pending: { readonly node: Node; readonly expression: boolean }[] = [
     { node: root, expression: false },
   ];
@@ -115,27 +448,14 @@ function editComponentReferences(
         continue;
       }
       for (const child of entry.node.children) {
-        pending.push({ node: child, expression: entry.node.type === 'expression' });
+        pending.push({
+          node: child,
+          expression: entry.node.type === 'expression',
+        });
       }
     }
   }
-  if (rename.kind === 'default' && edits.length > 0) {
-    if (edits.some((edit) => edit.start < rename.declarationEnd)) {
-      return err({
-        code: 'default-order',
-        message:
-          'A prop read precedes its default. ' +
-          'Move the Astro.props binding before that read in source.',
-      });
-    }
-    // A unique alias prevents a template loop variable from shadowing the defaulted prop.
-    edits.push({
-      start: rename.declarationEnd,
-      end: rename.declarationEnd,
-      text: `\nconst ${rename.binding} = ${rename.local};`,
-    });
-  }
-  return ok(applySourceEdits(source, edits));
+  return ok(edits);
 }
 
 function renameNode(
@@ -154,7 +474,10 @@ function renameNode(
       rename.kind === 'rename' &&
       node.attributes.some((attribute) => attribute.name === rename.to)
     ) {
-      return err({ code: 'collision', message: `An instance already passes ${rename.to}.` });
+      return err({
+        code: 'collision',
+        message: `An instance already passes ${rename.to}.`,
+      });
     }
     for (const attribute of node.attributes) {
       if (target && rename.kind === 'rename') {
@@ -240,27 +563,8 @@ function renameSpread(
   position: number
 ): Result<readonly SourceEdit[]> {
   const prefix = 'const spread = (';
-  const syntax = ts.createSourceFile(
-    'spread.ts',
-    prefix + attribute.name + ');',
-    ts.ScriptTarget.Latest,
-    true,
-    ts.ScriptKind.TS
-  );
-  const object = syntaxNodes(syntax).find(ts.isObjectLiteralExpression);
-  const variable = syntaxNodes(syntax).find(ts.isVariableDeclaration);
-  const expression = variable?.initializer;
-  if (
-    !object ||
-    !expression ||
-    !ts.isParenthesizedExpression(expression) ||
-    expression.expression !== object ||
-    object.properties.some(
-      (property) =>
-        ts.isSpreadAssignment(property) ||
-        (property.name !== undefined && ts.isComputedPropertyName(property.name))
-    )
-  ) {
+  const object = literalSpreadObject(attribute.name, prefix);
+  if (!object) {
     return err({
       code: 'spread',
       message:
@@ -273,7 +577,10 @@ function renameSpread(
     return positionError();
   }
   if (object.properties.some((property) => propertyKey(property.name) === rename.to)) {
-    return err({ code: 'collision', message: `A spread already contains ${rename.to}.` });
+    return err({
+      code: 'collision',
+      message: `A spread already contains ${rename.to}.`,
+    });
   }
   const edits: SourceEdit[] = [];
   for (const property of object.properties) {
@@ -294,6 +601,29 @@ function renameSpread(
   return ok(edits);
 }
 
+function literalSpreadObject(
+  expression: string,
+  prefix: string
+): ts.ObjectLiteralExpression | undefined {
+  const syntax = ts.createSourceFile(
+    'spread.ts',
+    prefix + expression + ');',
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS
+  );
+  const nodes = syntaxNodes(syntax);
+  const object = nodes.find(ts.isObjectLiteralExpression);
+  const initializer = nodes.find(ts.isVariableDeclaration)?.initializer;
+  if (!object || !initializer || !ts.isParenthesizedExpression(initializer)) {
+    return undefined;
+  }
+  if (initializer.expression !== object || optionSpreadIsDynamic(object)) {
+    return undefined;
+  }
+  return object;
+}
+
 function renameAstroAccess(
   source: string,
   start: number,
@@ -309,7 +639,7 @@ function renameAstroAccess(
   const edits: SourceEdit[] = [];
   for (const node of syntaxNodes(syntax)) {
     if (rename.kind === 'rename') {
-      const typeEdit = renameIndexedPropType(node, start, rename);
+      const typeEdit = renameIndexedPropType(node, start, rename, rename.typeNames);
       if (typeEdit) {
         edits.push(typeEdit);
       }
@@ -360,7 +690,11 @@ function astroReferenceEdit(
   change: PropertyReferenceEdit
 ): SourceEdit {
   if (change.kind === 'default') {
-    return { start: start + access.getStart(), end: start + access.end, text: change.binding };
+    return {
+      start: start + access.getStart(),
+      end: start + access.end,
+      text: change.binding,
+    };
   }
   return {
     start: start + key.getStart(),
@@ -382,7 +716,8 @@ function defaultBindingName(source: string): string {
 function renameIndexedPropType(
   node: ts.Node,
   start: number,
-  rename: PropertyRename
+  rename: PropertyRename,
+  typeNames: ReadonlySet<string>
 ): SourceEdit | undefined {
   if (
     !ts.isLiteralTypeNode(node) ||
@@ -398,11 +733,11 @@ function renameIndexedPropType(
   const indexed =
     ts.isIndexedAccessTypeNode(parent) &&
     ts.isTypeReferenceNode(parent.objectType) &&
-    parent.objectType.typeName.getText() === 'Props';
+    typeNames.has(parent.objectType.typeName.getText());
   const picked =
     ts.isTypeReferenceNode(parent) &&
     ['Pick', 'Omit'].includes(parent.typeName.getText()) &&
-    parent.typeArguments?.[0]?.getText() === 'Props';
+    typeNames.has(parent.typeArguments?.[0]?.getText() ?? '');
   if (!indexed && !picked) {
     return undefined;
   }
diff --git a/package-lock.json b/package-lock.json
index fece4b5a..a48b7d92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "stacki",
-  "version": "0.1.30",
+  "version": "0.1.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "stacki",
-      "version": "0.1.30",
+      "version": "0.1.33",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -23,6 +23,10 @@
         "@codemirror/view": "^6.43.7",
         "@lezer/highlight": "^1.2.3",
         "@lezer/javascript": "^1.5.4",
+        "@shikijs/core": "^4.4.3",
+        "@shikijs/engine-javascript": "^4.4.3",
+        "@shikijs/langs": "^4.4.3",
+        "@shikijs/themes": "^4.4.3",
         "@uiw/react-codemirror": "^4.25.11",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/xterm": "^6.0.0",
@@ -2848,6 +2852,93 @@
         "win32"
       ]
     },
+    "node_modules/@shikijs/core": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.4.3.tgz",
+      "integrity": "sha512-QCR4q2ZO/ILJEuwiBMel4wdcTDb1JGwfjKTxPDF6x8ixOaluPrVqIn06C99AcRPhmYlBR56d/Fb+GN58GzExpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/primitive": "4.4.3",
+        "@shikijs/types": "4.4.3",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.5",
+        "hast-util-to-html": "^9.0.5"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.4.3.tgz",
+      "integrity": "sha512-FbOjFJp9VLdo1Wevs10BBtVxiTWwNLqZh5Gkhjgda/ioL15YOgeSl9n+6XMa3qRlPQzfhFNe641SrynFHYG0nQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.4.3",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "oniguruma-to-es": "^4.3.6"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.4.3.tgz",
+      "integrity": "sha512-ePic0yfAJGOF83D5wBHK/00EjK65oahBYxFk5epgq33WRv7X9UuxLEV8PtR0szC0z8dl7INIpIodB99JRFlR+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.4.3"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/primitive": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.4.3.tgz",
+      "integrity": "sha512-m0wBeLDQDeIxRdUmrCPdQqfuUamDwRL5isCfYbguKD6NiaKpVbsv+3J81DyIKgNW5h4WAIIr8T4EkgQrBBxvaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.4.3",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.4.3.tgz",
+      "integrity": "sha512-w8UHjeUnIR965KMWJHUPXOc2mNJUnK3vpVLYLvw5IYU2mnTTJ89E24OrJDBNiJDQ0qzb0tc4l7mrIXx5cFeIyw==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.4.3"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.4.3.tgz",
+      "integrity": "sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "license": "MIT"
+    },
     "node_modules/@sindresorhus/is": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -2987,6 +3078,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz",
+      "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -3011,6 +3111,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -3078,6 +3187,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/verror": {
       "version": "1.10.11",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.11.tgz",
@@ -3396,6 +3511,12 @@
         "react-dom": ">=17.0.0"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.4.0.tgz",
+      "integrity": "sha512-1mEZtMKPM09vDmQt5y7YvmN2+DFTP7Tg0EWXdic8/C6VRnpb33e4ghisCIE3WZjsE2N8mf+QV1Zqh7ZFYLWInQ==",
+      "license": "ISC"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -4301,6 +4422,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4331,6 +4462,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -4514,6 +4665,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
@@ -4945,6 +5106,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -4963,6 +5133,19 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dir-compare": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-4.2.0.tgz",
@@ -6511,6 +6694,42 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -6574,6 +6793,16 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -7398,6 +7627,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.27.1",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
@@ -7405,6 +7655,95 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/mime": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
@@ -7868,6 +8207,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz",
+      "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==",
+      "license": "MIT"
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz",
+      "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==",
+      "license": "MIT",
+      "dependencies": {
+        "oniguruma-parser": "^0.12.2",
+        "regex": "^6.1.0",
+        "regex-recursion": "^6.0.2"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -8217,6 +8573,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
@@ -8368,6 +8734,30 @@
         "node": ">=10"
       }
     },
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "license": "MIT"
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -8843,6 +9233,16 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
@@ -8915,6 +9315,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -9199,6 +9613,16 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/truncate-utf8-bytes": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
@@ -9312,6 +9736,74 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -9392,6 +9884,34 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
@@ -9804,6 +10324,16 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 8e8b1146..555fa95a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stacki",
   "productName": "Stacki",
-  "version": "0.1.30",
+  "version": "0.1.33",
   "description": "Stacki — a visual builder for Astro projects — pages, layouts, components, props, live preview, and GitHub publishing.",
   "main": "dist/electron/main.js",
   "author": "Timothy Ricks <hello@timothyricks.com>",
@@ -170,11 +170,12 @@
     "test:docdefaults": "node test/doc-defaults.js",
     "test:querycache": "node test/query-cache.js",
     "test:codeeditorlifecycle": "node test/code-editor-lifecycle.js",
+    "test:codepanel": "node test/code-panel-model.js",
     "test:buildersigning": "node --test test/builder-signing.test.js",
     "test:vitemodules": "node --experimental-vm-modules --test test/vite-modules.test.ts",
     "performance:report": "npm run build:runtime && node dist/scripts/performance-report.js",
     "integration:dev": "node test/integration/dev-lifecycle.js",
-    "build:clean": "node --experimental-transform-types scripts/clean-build.ts",
+    "build:clean": "node --disable-warning=ExperimentalWarning --experimental-transform-types scripts/clean-build.mts",
     "build:renderer-runtime": "npm run build:morph && npm run build:preload && npm run build:assets",
     "build:morph": "tsc -p electron/tsconfig.morph.json",
     "build:preload": "tsc -p electron/tsconfig.preload.json",
@@ -202,6 +203,10 @@
     "@codemirror/view": "^6.43.7",
     "@lezer/highlight": "^1.2.3",
     "@lezer/javascript": "^1.5.4",
+    "@shikijs/core": "^4.4.3",
+    "@shikijs/engine-javascript": "^4.4.3",
+    "@shikijs/langs": "^4.4.3",
+    "@shikijs/themes": "^4.4.3",
     "@uiw/react-codemirror": "^4.25.11",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
diff --git a/scripts/clean-build.ts b/scripts/clean-build.mts
similarity index 100%
rename from scripts/clean-build.ts
rename to scripts/clean-build.mts
diff --git a/scripts/run-tests.ts b/scripts/run-tests.ts
index 716172ca..6c0358d5 100644
--- a/scripts/run-tests.ts
+++ b/scripts/run-tests.ts
@@ -59,7 +59,11 @@ const staticGates: readonly GateCommand[] = [
   [
     'build:clean',
     node,
-    ['--experimental-transform-types', path.join(root, 'scripts', 'clean-build.ts')],
+    [
+      '--disable-warning=ExperimentalWarning',
+      '--experimental-transform-types',
+      path.join(root, 'scripts', 'clean-build.mts'),
+    ],
   ],
   ['build:contracts', node, [typeScript, '-p', path.join('shared', 'tsconfig.json')]],
   ['build:electron', node, [typeScript, '-p', path.join('electron', 'tsconfig.json')]],
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
index 9daabc89..52c52591 100644
--- a/scripts/tsconfig.json
+++ b/scripts/tsconfig.json
@@ -19,5 +19,5 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true
   },
-  "include": ["*.ts"]
+  "include": ["*.ts", "*.mts"]
 }
diff --git a/shared/component-properties.ts b/shared/component-properties.ts
index 31e2b775..5203c2e8 100644
--- a/shared/component-properties.ts
+++ b/shared/component-properties.ts
@@ -1,5 +1,5 @@
 // Source text is the revision token: edits cannot overwrite a newer disk revision.
-import { boolean, list, object, text } from './boundary';
+import { boolean, count, list, object, optional, text } from './boundary';
 import { LIMITS } from './limits';
 import { toRecord } from './record';
 import type { Result } from './result';
@@ -21,6 +21,22 @@ export interface ComponentProperty {
   readonly readonly: boolean;
   readonly defaultValue: string;
   readonly description: string;
+  readonly origin?: PropertyOrigin;
+  readonly editing?: PropertyEditing;
+  readonly conditions?: readonly string[];
+}
+export type PropertyEditing =
+  | { readonly kind: 'editable' }
+  | { readonly kind: 'override'; readonly reason: string }
+  | { readonly kind: 'restricted'; readonly reason: string };
+export interface PropertySource {
+  readonly label: string;
+  readonly expression: string;
+  readonly line: number;
+}
+export interface PropertyOrigin {
+  readonly declarations: readonly PropertySource[];
+  readonly defaultValue?: PropertySource;
 }
 export interface ComponentProperties {
   readonly source: string;
@@ -28,10 +44,20 @@ export interface ComponentProperties {
   readonly frontmatter: string;
   readonly advanced: boolean;
 }
+export interface PropertyOptionRename {
+  readonly from: string;
+  readonly to: string;
+}
 export type PropertyChange =
-  | { readonly kind: 'save'; readonly originalName: string; readonly property: ComponentProperty }
+  | {
+      readonly kind: 'save';
+      readonly originalName: string;
+      readonly property: ComponentProperty;
+      readonly optionRenames?: readonly PropertyOptionRename[];
+    }
   | { readonly kind: 'remove'; readonly name: string }
   | { readonly kind: 'order'; readonly names: readonly string[] }
+  | { readonly kind: 'options'; readonly name: string; readonly type: string }
   | { readonly kind: 'source'; readonly frontmatter: string };
 
 export function propertyText(input: unknown): string {
@@ -66,8 +92,47 @@ export function parseComponentProperty(input: unknown): ComponentProperty {
     readonly: boolean,
     defaultValue: propertyText,
     description: propertyText,
+    origin: optional(parsePropertyOrigin),
+    editing: optional(parsePropertyEditing),
+    conditions: optional((value) => propertyList(value, propertyText)),
   })(input);
 }
+
+function parsePropertyEditing(input: unknown): PropertyEditing {
+  const value = toRecord(input);
+  if (value?.['kind'] === 'editable') {
+    return { kind: 'editable' };
+  }
+  if (value?.['kind'] === 'override' || value?.['kind'] === 'restricted') {
+    const reason = propertyText(value['reason']);
+    if (reason.trim()) {
+      return { kind: value['kind'], reason };
+    }
+  }
+  throw new Error('Invalid property editing permission');
+}
+
+function parsePropertyOrigin(input: unknown): PropertyOrigin {
+  return object({
+    declarations: (value) => propertyList(value, parsePropertySource),
+    defaultValue: optional(parsePropertySource),
+  })(input);
+}
+
+function parsePropertySource(input: unknown): PropertySource {
+  const source = object({
+    label: propertyText,
+    expression: propertyText,
+    line: count,
+  })(input);
+  if (!source.label.trim()) {
+    throw new Error('Property source label must be nonempty');
+  }
+  if (source.line < 1 || source.line > PROPERTY_LIMITS.sourceCharsMax) {
+    throw new Error('Property source line is out of bounds');
+  }
+  return source;
+}
 export function propertyList<T>(input: unknown, parse: (input: unknown) => T): readonly T[] {
   const values = list(parse)(input);
   if (values.length > PROPERTY_LIMITS.fieldsMax) {
@@ -78,21 +143,52 @@ export function propertyList<T>(input: unknown, parse: (input: unknown) => T): r
 export function parsePropertyChange(input: unknown): PropertyChange {
   const value = toRecord(input);
   switch (value?.['kind']) {
-    case 'save':
-      return {
+    case 'save': {
+      const saved = {
         kind: 'save',
-        ...object({ originalName: propertyText, property: parseEditableProperty })(input),
-      };
+        ...object({
+          originalName: propertyText,
+          property: parseEditableProperty,
+        })(input),
+      } as const;
+      const optionRenames = optional((item) => propertyList(item, parsePropertyOptionRename))(
+        value['optionRenames']
+      );
+      return optionRenames === undefined ? saved : { ...saved, optionRenames };
+    }
     case 'remove':
       return { kind: 'remove', name: propertyName(value['name']) };
     case 'order':
-      return { kind: 'order', names: propertyList(value['names'], propertyName) };
+      return {
+        kind: 'order',
+        names: propertyList(value['names'], propertyName),
+      };
+    case 'options':
+      return {
+        kind: 'options',
+        name: propertyName(value['name']),
+        type: propertyText(value['type']),
+      };
     case 'source':
-      return { kind: 'source', frontmatter: propertySource(value['frontmatter']) };
+      return {
+        kind: 'source',
+        frontmatter: propertySource(value['frontmatter']),
+      };
     default:
       throw new Error('Unknown component property change');
   }
 }
+
+function parsePropertyOptionRename(input: unknown): PropertyOptionRename {
+  const rename = object({ from: propertyText, to: propertyText })(input);
+  if (!rename.from.trim() || !rename.to.trim()) {
+    throw new Error('Property option rename values must be nonempty');
+  }
+  if (rename.from === rename.to) {
+    throw new Error('Property option rename must change the value');
+  }
+  return rename;
+}
 export function parseComponentProperties(input: unknown): ComponentProperties {
   return object({
     source: propertySource,
diff --git a/shared/ipc-payloads.ts b/shared/ipc-payloads.ts
index 75d8b160..2d4baa7e 100644
--- a/shared/ipc-payloads.ts
+++ b/shared/ipc-payloads.ts
@@ -180,6 +180,7 @@ export const IPC_PAYLOADS = {
     projectPath: maybePath,
   }),
   'page:move': object({ ...project, from: pathText, to: pathText }),
+  'page:parse': object({ pagePath: pathText, source: text }),
   'page:read': pathText,
   'page:rebaseImport': object({ fromPagePath: maybePath, toPagePath: maybePath, spec: text }),
   'page:write': object({ pagePath: pathText, model: (input: unknown) => input }),
diff --git a/shared/ipc-results.ts b/shared/ipc-results.ts
index e461e64a..ef8aed2d 100644
--- a/shared/ipc-results.ts
+++ b/shared/ipc-results.ts
@@ -4,6 +4,16 @@ import type { Result } from './result';
 // Main's typed registrar checks every handler against this inventory.
 import type { Data } from './boundary';
 
+export type WirePageRead =
+  | { readonly source: string; readonly editable: true; readonly model: WireMarkdownModel }
+  | { readonly source: string; readonly editable: true; readonly model: WireParserPageModel }
+  | {
+      readonly source: string;
+      readonly editable: false;
+      readonly reason: string;
+      readonly bail: null | WireParseBail;
+    };
+
 export interface IpcResults {
   readonly 'component:properties': Result<ComponentProperties>;
   readonly 'component:editProperties': Result<ComponentProperties>;
@@ -402,32 +412,13 @@ export interface IpcResults {
   readonly 'page:move': {
     readonly newPath: string;
   };
-  readonly 'page:read':
-    | {
-        readonly source: string;
-        readonly editable: true;
-        readonly model: WireMarkdownModel;
-      }
-    | {
-        readonly source: string;
-        readonly editable: true;
-        readonly model: WireParserPageModel;
-      }
-    | {
-        readonly source: string;
-        readonly editable: false;
-        readonly reason: string;
-        readonly bail: null | WireParseBail;
-      };
+  readonly 'page:parse': WirePageRead;
+  readonly 'page:read': WirePageRead;
   readonly 'page:rebaseImport': {
     readonly path: string;
   };
-  readonly 'page:write': {
-    readonly ok: true;
-  };
-  readonly 'page:writeRaw': {
-    readonly ok: true;
-  };
+  readonly 'page:write': { readonly ok: true } & WirePageRead;
+  readonly 'page:writeRaw': { readonly ok: true } & WirePageRead;
   readonly 'pagefolder:create': {
     readonly ok: true;
   };
diff --git a/shared/limits.ts b/shared/limits.ts
index ffdffab7..4ffb8ad9 100644
--- a/shared/limits.ts
+++ b/shared/limits.ts
@@ -32,4 +32,6 @@ export const LIMITS = {
   saveDrainMax: 256,
   /** Length of one IPC payload string field. */
   ipcFieldCharsMax: 10_000_000,
+  /** TextMate highlighting is synchronous CPU work after grammar startup. */
+  syntaxHighlightCharsMax: 1_000_000,
 } as const satisfies Record<string, number>;
diff --git a/shared/page-node.ts b/shared/page-node.ts
index 747f73c1..824fef65 100644
--- a/shared/page-node.ts
+++ b/shared/page-node.ts
@@ -116,6 +116,11 @@ export interface MarkdownNodeMetadata {
   readonly mdEsm?: boolean;
 }
 
+export interface SourceNodeMetadata {
+  readonly start?: number;
+  readonly end?: number;
+}
+
 export type PageNode = (
   | PairedNode
   | RawNode
@@ -125,7 +130,7 @@ export type PageNode = (
   | CondNode
   | BranchNode
   | ChunkGroupNode
-) & MarkdownNodeMetadata;
+) & MarkdownNodeMetadata & SourceNodeMetadata;
 
 export type PageNodeList = readonly PageNode[] & { readonly mdTrailingBlanks?: number };
 
@@ -494,7 +499,28 @@ export function parsePageNode(
     fail(where, `exceeds ${LIMITS.treeNodesMax} nodes`);
   }
   const record = asRecord(input, where);
-  return { ...parseByKind(record, where, depth, context), ...markdownExtras(record, where) };
+  return {
+    ...parseByKind(record, where, depth, context),
+    ...markdownExtras(record, where),
+    ...sourceNodeMetadata(record, where),
+  };
+}
+
+function sourceNodeMetadata(
+  record: Record<string, unknown>,
+  where: string,
+): SourceNodeMetadata {
+  const start = record['start'];
+  const end = record['end'];
+  if (start === undefined && end === undefined) {return {};}
+  if (!Number.isSafeInteger(start) || !Number.isSafeInteger(end)) {
+    fail(where, 'source range: expected safe integer offsets');
+  }
+  if (Number(start) < 0) {fail(where, 'source range: start must be nonnegative');}
+  if (Number(end) < Number(start)) {
+    fail(where, 'source range: end must not precede start');
+  }
+  return { start: Number(start), end: Number(end) };
 }
 
 /** Parse a whole tree (a page model's nodes array). */
diff --git a/shared/preload-api.ts b/shared/preload-api.ts
index 27ce61e1..8b0dfd6b 100644
--- a/shared/preload-api.ts
+++ b/shared/preload-api.ts
@@ -61,6 +61,7 @@ interface InvokeChannels {
   readonly removeRecent: 'recents:remove';
   readonly refreshThumb: 'recents:refreshThumb';
   readonly readPage: 'page:read';
+  readonly parsePageSource: 'page:parse';
   readonly writePage: 'page:write';
   readonly writePageRaw: 'page:writeRaw';
   readonly createPage: 'page:create';
diff --git a/shared/property-options.ts b/shared/property-options.ts
new file mode 100644
index 00000000..db422e72
--- /dev/null
+++ b/shared/property-options.ts
@@ -0,0 +1,20 @@
+import { PROPERTY_LIMITS } from './component-properties';
+
+// Only literal unions expose option controls. Complex unions remain in the type editor.
+export function literalOptions(type: string): readonly string[] | undefined {
+  const tokens = type.match(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|-?\d+(?:\.\d+)?|true|false/g);
+  if (!tokens || tokens.length < 1 || tokens.length > PROPERTY_LIMITS.fieldsMax) {
+    return undefined;
+  }
+  const remaining = type.replace(
+    /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|-?\d+(?:\.\d+)?|true|false/g,
+    ''
+  );
+  if (!/^\s*(?:\|\s*)*$/.test(remaining)) {
+    return undefined;
+  }
+  if ((remaining.match(/\|/g)?.length ?? 0) !== tokens.length - 1) {
+    return undefined;
+  }
+  return tokens;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 17feb24c..07c1a1b3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,7 +17,7 @@ import { setSoundEnabled } from './ui/sound.js';
 import { createPreviewWatch } from './previewRecovery.js';
 import { tellCanvas } from './canvasQuery.js';
 import { renameAttr } from './attrOrder.js';
-import { readPage, readSymbol, scanProject } from './bridge';
+import { parsePageSource as parseSourcePage, readPage, readSymbol, scanProject } from './bridge';
 import { checkoutGitBranch, readGitInfo } from './gitChipBridge';
 import { LIMITS } from '../shared/limits';
 import { assert } from '../shared/assert';
@@ -99,6 +99,7 @@ import type { InsertItem } from './ui/InsertSearch';
 import { toRecord } from '../shared/record';
 import { projectRelativePath } from './projectPath.js';
 import { currentDesktopPlatform, shortcutLabel } from './shortcutLabel.js';
+import { sourceNodeAtOffset } from './codePanelModel.js'
 import {
   cloneEditorModel,
   findEditorNodeById as findNodeById,
@@ -193,6 +194,7 @@ const CmsView = lazyPanel(() => import('./panels/CmsView'));
 const ContentView = lazyPanel(() => import('./panels/ContentView'));
 const VariablesPanel = lazyPanel(() => import('./panels/VariablesPanel'));
 const VariablesView = lazyPanel(() => import('./panels/VariablesView'));
+const CodePanel = lazyPanel(() => import('./panels/CodePanel'))
 
 let idCounter = 1000;
 const newId = () => nodeId(`c${idCounter++}`);
@@ -326,6 +328,31 @@ function outermostNode(nodes: readonly PageNode[] | null | undefined): PageNode
   return list.find((n) => n.kind === 'element' || n.kind === 'component') || list[0] || null;
 }
 
+interface OpenFileOptions {
+  readonly nextStack: SetStateAction<readonly OpenFile[]>;
+  readonly selectionPath: string | null;
+}
+
+// Returning from a component should land on the instance that opened it. The
+// path is stored with the child stack entry because node ids can change when
+// the parent file is parsed again during the return trip.
+function openFileSelection(
+  entry: OpenFile,
+  result: EditorPageState,
+  selectionPath: string | null,
+): PageNode | null {
+  if (!result.editable) {return null;}
+  if (selectionPath) {
+    const localPath = selectionPath.split('|').at(-1);
+    assert(localPath !== undefined, 'A stored component path must have a local path');
+    const selected = nodeAtPath(result.model.nodes, localPath.split('.').map(Number));
+    if (selected) {return selected;}
+  }
+  return entry.kind === 'component'
+    ? openingSelection(result.model.nodes)
+    : outermostNode(result.model.nodes);
+}
+
 function collectUsedNames(model: PageModel): Set<string> {
   const used = new Set<string>();
   const walk = (list: readonly PageNode[]): void => {
@@ -508,7 +535,8 @@ export default function App() {
   // path -> the classes that node rendered with, for labelling rows whose
   // class is an expression the source can't resolve.
   const [nodeClasses, setNodeClasses] = useState<
-    Readonly<Record<string, readonly string[]>> | null
+    Readonly<Record<string, readonly string[]>
+  > | null
   >(null);
   const [devUrl, setDevUrl] = useState<string | null>(null);
   const [trailingSlash, setTrailingSlash] = useState<TrailingSlash>('ignore');
@@ -546,7 +574,7 @@ export default function App() {
   const componentPropertiesOpen = currentPage?.kind === 'component';
   useEffect(() => {
     if (!componentPropertiesOpen) {
-      setLeftTab((tab) => tab === 'properties' ? 'navigator' : tab);
+      setLeftTab((tab) => ( tab === 'properties' ? 'navigator' : tab));
     }
   }, [componentPropertiesOpen]);
   const [cmsRel, setCmsRel] = useState<string | null>(null);
@@ -565,6 +593,7 @@ export default function App() {
   const livePathRef = useRef<string | null>(null);
   const [termOpen, setTermOpen] = useState(false); // bottom terminal dock
   const [codeWin, setCodeWin] = useState<CodeWindowState | null>(null);
+  const codeEditVersionRef = useRef(0)
   const openCodeWindowRef = useRef<(() => boolean) | null>(null);
   const selectionKeysRef = useRef<readonly string[]>([]);
   const [fileText, setFileText] = useState(''); // loaded text for kind:'file'
@@ -905,14 +934,28 @@ export default function App() {
       readCurrent: () => pageStateRef.current,
       write: async (pagePath, state) => {
         if (state.editable) {
-          await writeProjectPage(pagePath, state.model);
-        } else {
-          await writeProjectPageRaw(pagePath, state.source);
+          const written = await writeProjectPage(pagePath, state.model);
+          return written ? toEditorPageState(written) : undefined;
         }
+        const written = await writeProjectPageRaw(pagePath, state.source);
+        return written ? toEditorPageState(written) : undefined;
+      },
+      markSaved: (saved, written) => {
+        if (pageStateRef.current.pageState !== saved) {
+          return;
+        }
+        if (written?.editable && saved.editable) {
+          const selected = selectedIdRef.current;
+          const trail = selected ? pathOfNode(saved.model.nodes, selected) : null;
+          const next = trail ? nodeAtPath(written.model.nodes, trail) : null;
+          if (selected === 'frontmatter') {
+            setSelectedId('frontmatter');
+          } else {
+            setSelectedId(next?.id ?? null);
+          }
+        }
+        setPageState(written ? { ...written, dirty: false } : { ...saved, dirty: false });
       },
-      markSaved: (saved) => setPageState((state) =>
-        state === saved ? { ...state, dirty: false } : state
-      ),
     });
   }
   const fileSaver = fileSaverRef.current;
@@ -965,7 +1008,8 @@ export default function App() {
   // `currentPage` is simply whatever is being edited, so saving, undo, the
   // navigator, and the props panel all follow without special cases.
   const openFile = useCallback(
-    async (entry: OpenFile, nextStack: SetStateAction<readonly OpenFile[]> | undefined) => {
+    async (entry: OpenFile, options: OpenFileOptions) => {
+      codeEditVersionRef.current += 1
       const request = ++pageLoadRef.current;
       try {
         await flushSave();
@@ -1006,15 +1050,11 @@ export default function App() {
       // Publish path, model and stack together. Clearing the model first would
       // unmount the inspector and resize the whole preview during every drill.
       pageStateRef.current = { currentPage: entry, pageState: nextState };
-      if (nextStack) {setEditStack(nextStack);}
+      setEditStack(options.nextStack);
       setCurrentPage(entry);
       setPageState(nextState);
       setHoverNodeId(null);
-      const start = result.editable
-        ? entry.kind === 'component'
-          ? openingSelection(result.model.nodes)
-          : outermostNode(result.model.nodes)
-        : null;
+      const start = openFileSelection(entry, result, options.selectionPath);
       setSelectedId(start?.id ?? null);
       dropPageHistory(); // page snapshots don't apply to another page; commands stay
     },
@@ -1030,7 +1070,7 @@ export default function App() {
     async (page: ScanResult['pages'][number]) => {
       // Opening a page from the switcher leaves any component drill-down.
       const entry: OpenFile = { ...page, kind: 'page' };
-      await openFile(entry, [entry]);
+      await openFile(entry, { nextStack: [entry], selectionPath: null });
     },
     [openFile]
   );
@@ -1067,8 +1107,8 @@ export default function App() {
       if (m) {route = m[1] || '/';}
       if (!route.startsWith('/')) {route = '/' + route;}
       route = route.replace(/\?.*$|#.*$/, '');
-      const norm = (value: string): string =>
-        value !== '/' ? value.replace(/\/$/, '') : value;
+      const norm = (value: string): string => (
+        value !== '/' ? value.replace(/\/$/, '') : value);
       const page = (scan.pages || []).find((p) => norm(p.route) === norm(route));
       if (page) {
         selectPage(page);
@@ -1106,7 +1146,7 @@ export default function App() {
       const next = result.pages[0] || null;
       if (next) {
         const entry: OpenFile = { ...next, kind: 'page' };
-        await openFile(entry, [entry]);
+        await openFile(entry, { nextStack: [entry], selectionPath: null });
       } else {
         setEditStack([]);
         setCurrentPage(null);
@@ -1208,9 +1248,13 @@ export default function App() {
         focusWhole,
         hostKey: hostPath ?? null,
       };
-      await openFile(entry, (s) =>
-        s.some((e) => e.path === comp.path) ? s : [...s, entry]
-      );
+      await openFile(entry, {
+        nextStack: (stackBeforeOpen) =>
+          stackBeforeOpen.some((openEntry) => openEntry.path === comp.path)
+            ? stackBeforeOpen
+            : [...stackBeforeOpen, entry],
+        selectionPath: null,
+      });
     },
     [scan.components, scan.layouts, openFile, showToast]
   );
@@ -1219,10 +1263,15 @@ export default function App() {
   const closeComponent = useCallback(async () => {
     const stack = editStackRef.current;
     if (stack.length < 2) {return;}
+    const closing = stack.at(-1);
+    assert(closing, 'Component stack must contain the component being closed');
     const next = stack.slice(0, -1);
     const parent = next.at(-1);
     assert(parent, 'Component stack must retain its parent');
-    await openFile(parent, next);
+    await openFile(parent, {
+      nextStack: next,
+      selectionPath: closing.hostKey ?? null,
+    });
   }, [openFile]);
 
   // ----------------------------------------------------------------
@@ -1363,6 +1412,7 @@ export default function App() {
   }, []);
 
   const applySnapshot = useCallback((entry: PageSnapshot) => {
+    codeEditVersionRef.current += 1
     setPageState((s) => {
       if (!s) {return s;}
       if (entry.kind === 'model') {
@@ -1465,6 +1515,7 @@ export default function App() {
       coalesceKey: string | null = null,
     ) => {
       if (propertySave.saving.current) { return; }
+      codeEditVersionRef.current += 1
       pushHistory(coalesceKey);
       setPageState((s) => {
         if (!s || !s.editable) {return s;}
@@ -1479,6 +1530,7 @@ export default function App() {
   const setRawSource = useCallback(
     (source: string) => {
       if (propertySave.saving.current) { return; }
+      codeEditVersionRef.current += 1
       pushHistory('raw-source');
       setPageState((s) => (s ? { ...s, source, dirty: true } : s));
       scheduleSave();
@@ -1486,6 +1538,42 @@ export default function App() {
     [scheduleSave, pushHistory, propertySave.saving]
   );
 
+  const changeCodeSource = useCallback(
+    async (source: string, position: number) => {
+      const open = pageStateRef.current.currentPage;
+      if (!open || open.kind === 'route') {
+        return;
+      }
+      const version = codeEditVersionRef.current + 1;
+      codeEditVersionRef.current = version;
+      try {
+        const parsed = toEditorPageState(await parseSourcePage(open.path, source));
+        if (version !== codeEditVersionRef.current) {
+          return;
+        }
+        if (pageStateRef.current.currentPage?.path !== open.path) {
+          return;
+        }
+        pushHistory('code-source');
+        if (parsed.editable) {
+          const inFrontmatter =
+            parsed.model.bodyStart !== undefined && position < parsed.model.bodyStart;
+          const selected = sourceNodeAtOffset(parsed.model.nodes, position);
+          setSelectedId(inFrontmatter ? 'frontmatter' : selected?.id ?? null);
+        } else {
+          setSelectedId(null);
+        }
+        setPageState({ ...parsed, dirty: true });
+        scheduleSave('live');
+      } catch (error: unknown) {
+        if (version === codeEditVersionRef.current) {
+          showToast(`Couldn’t update code: ${cleanError(error)}`, 'error');
+        }
+      }
+    },
+    [pushHistory, scheduleSave, showToast],
+  );
+
   // ----------------------------------------------------------------
   // External file changes → refresh panels
   // ----------------------------------------------------------------
@@ -1551,11 +1639,12 @@ export default function App() {
       if (selId && selId !== 'layout' && selId !== 'frontmatter') {
         if (state?.editable && result.editable) {
           const trail = pathOfNode(state.model.nodes, selId);
-          nextSelected = trail ? (nodeAtPath(result.model.nodes, trail)?.id ?? null) : null;
+          nextSelected = trail ?nodeAtPath(result.model.nodes, trail)?.id ?? null : null;
         } else {
           nextSelected = null;
         }
       }
+      codeEditVersionRef.current += 1
       setPageState(result);
       setSelectedId(nextSelected);
     });
@@ -1789,7 +1878,9 @@ export default function App() {
         const removed = stripLostBindings(node, lost);
         if (removed) {
           showToast(
-            `Removed ${removed} binding${removed === 1 ? '' : 's'} that referenced ${lost.join(', ')}.`,
+            `Removed ${removed} binding${removed === 1 ? '' : 's'} that referenced ${lost.join(
+              ', '
+            )}.`,
             'info'
           );
         }
@@ -1843,7 +1934,8 @@ export default function App() {
         const names = droppedRef.current;
         droppedRef.current = null;
         showToast(
-          `Also removed ${names.map((n) => `\`${n}\``).join(', ')} from the frontmatter — nothing was reading ${names.length === 1 ? 'it' : 'them'} any more.`,
+          `Also removed ${names
+            .map((n) => `\`${n}\``).join(', ')} from the frontmatter — nothing was reading ${names.length === 1 ? 'it' : 'them'} any more.`,
           'info'
         );
       }
@@ -1864,7 +1956,9 @@ export default function App() {
     const clone = structuredClone(node);
     const walk = (n: EditorNode): void => {
       n.id = newId();
-      if (Array.isArray(n.children)) {n.children.forEach(walk);}
+      if (Array.isArray(n.children)) {
+        n.children.forEach(walk);
+      }
     };
     walk(clone);
     return clone;
@@ -1873,9 +1967,13 @@ export default function App() {
   const copyNode = useCallback(
     (nodeId: string) => {
       const state = pageStateRef.current.pageState;
-      if (!state?.editable) {return;}
+      if (!state?.editable) {
+        return;
+      }
       const node = findNodeById(state.model.nodes, nodeId);
-      if (!node) {return;}
+      if (!node) {
+        return;
+      }
       nodeClipboardRef.current = {
         node: structuredClone(node),
         // The loop variables this subtree may reference; pasting somewhere
@@ -1886,7 +1984,10 @@ export default function App() {
         // into another page it names nothing at all. Taken now rather than at
         // paste time, because by then this page may not even be open.
         frontmatter: state.model.extraFrontmatter || '',
-        imports: (state.model.imports || []).map((i) => ({ name: i.name, path: i.path })),
+        imports: (state.model.imports || []).map((i) => ({
+          name: i.name,
+          path: i.path,
+        })),
         pagePath: pageStateRef.current.currentPage?.path || null,
       };
       showToast(`Copied ${node.name || 'text'}`, 'success');
@@ -1897,17 +1998,26 @@ export default function App() {
   const duplicateNode = useCallback(
     (nodeId: string) => {
       const state = pageStateRef.current.pageState;
-      if (!state?.editable) {return;}
+      if (!state?.editable) {
+        return;
+      }
       const src = findNodeById(state.model.nodes, nodeId);
-      if (!src) {return;}
+      if (!src) {
+        return;
+      }
       if (src.kind === 'chunk-group' || src.chunkFile) {
-        showToast('Chunk sections are defined in the page frontmatter and cannot be duplicated here.', 'error');
+        showToast(
+          'Chunk sections are defined in the page frontmatter and cannot be duplicated here.',
+          'error'
+        );
         return;
       }
       const clone = cloneWithNewIds(src);
       mutateModel((model) => {
         const found = findParentList(model, nodeId);
-        if (!found) {return model;}
+        if (!found) {
+          return model;
+        }
         found.list.splice(found.index + 1, 0, clone);
         return model;
       }, true);
@@ -1923,7 +2033,9 @@ export default function App() {
   const pasteNode = useCallback(async () => {
     const clip = nodeClipboardRef.current;
     const state = pageStateRef.current.pageState;
-    if (!clip || !state?.editable) {return;}
+    if (!clip || !state?.editable) {
+      return;
+    }
 
     // Everything the subtree reads: the components it renders and every name in
     // the code hanging off it — `options={jobs}`, a loop's `posts.map`, a
@@ -1935,13 +2047,19 @@ export default function App() {
     const missing = [...names].filter((nm) => !knows(nm));
     // A component this project has is imported from where it actually lives,
     // whatever the page it was copied from called it.
-    const resolved: { readonly name: string; readonly paths: Awaited<ReturnType<typeof findImportPath>> }[] = [];
+    const resolved: {
+      readonly name: string;
+      readonly paths: Awaited<ReturnType<typeof findImportPath>>;
+    }[] = [];
     const byScan = new Set<string>();
     for (const nm of missing) {
       const target = insertables.find((c) => c.name === nm);
       if (target) {
         byScan.add(nm);
-        resolved.push({ name: nm, paths: await resolveImportPath(target.path) });
+        resolved.push({
+          name: nm,
+          paths: await resolveImportPath(target.path),
+        });
       }
     }
 
@@ -1962,17 +2080,25 @@ export default function App() {
           ? await rebaseProjectImport(
               clip.pagePath,
               pageStateRef.current.currentPage?.path ?? null,
-              imp.path,
+              imp.path
             )
           : { path: imp.path };
-      carriedImports.push({ name: imp.name, path: rebased.path || imp.path, quote: "'" });
+      carriedImports.push({
+        name: imp.name,
+        path: rebased.path || imp.path,
+        quote: "'",
+      });
     }
 
     const clone = cloneWithNewIds(clip.node);
     const selId = selectedIdRef.current;
     const acceptsChildren = (n: EditorNode): boolean => {
-      if (n.id === 'layout') {return true;}
-      if (n.kind === 'element') {return !VOID_TAGS.has(String(n.name).toLowerCase());}
+      if (n.id === 'layout') {
+        return true;
+      }
+      if (n.kind === 'element') {
+        return !VOID_TAGS.has(String(n.name).toLowerCase());
+      }
       if (n.kind === 'component') {
         return (insertables.find((c) => c.name === n.name)?.slots || []).includes('default');
       }
@@ -1989,7 +2115,9 @@ export default function App() {
         }
       }
       for (const imp of carriedImports) {
-        if (!model.imports.some((i) => i.name === imp.name)) {model.imports.push(imp);}
+        if (!model.imports.some((i) => i.name === imp.name)) {
+          model.imports.push(imp);
+        }
       }
       if (carried.statements.length) {
         model.extraFrontmatter = withStatements(model.extraFrontmatter, carried.statements);
@@ -1997,7 +2125,9 @@ export default function App() {
       if (selId) {
         const sel = findNodeById(model.nodes, selId);
         if (sel && acceptsChildren(sel)) {
-          if (!Array.isArray(sel.children)) {sel.children = [];}
+          if (!Array.isArray(sel.children)) {
+            sel.children = [];
+          }
           sel.children.push(clone);
           return model;
         }
@@ -2014,7 +2144,9 @@ export default function App() {
     // Pasted outside the loop it was copied from? Its bindings would throw.
     mutateModel((model) => {
       const landed = findNodeById(model.nodes, clone.id);
-      if (!landed) {return model;}
+      if (!landed) {
+        return model;
+      }
       const inScope = loopVarsAt(model.nodes, clone.id);
       const lost = (clip.vars || []).filter((v) => !inScope.includes(v));
       const removed = stripLostBindings(landed, lost);
@@ -2027,7 +2159,10 @@ export default function App() {
       return model;
     }, true);
     setSelectedId(clone.id);
-    const brought = [...carriedImports.map((i) => i.name), ...carried.statements.map((s) => s.name)];
+    const brought = [
+      ...carriedImports.map((i) => i.name),
+      ...carried.statements.map((s) => s.name),
+    ];
     if (brought.length) {
       showToast(
         `Brought ${brought.map((n) => `\`${n}\``).join(', ')} across from the page it was copied from.`,
@@ -3414,7 +3549,7 @@ export default function App() {
 
   // The frontmatter as one editable code block (imports + everything else,
   // matching how the file is serialized).
-  const frontmatterCode = useMemo(() => model ? writeFrontmatter(model) : '', [model]);
+  const frontmatterCode = useMemo(() => ( model ? writeFrontmatter(model) : ''), [model]);
 
   // One entry of a collection, asked for when someone opens it in the picker.
   // The ref is what stops a row that has no answer from asking again forever.
@@ -3456,7 +3591,8 @@ export default function App() {
     return name;
   };
 
-  const selectedNode: EditorNode | { readonly id: 'frontmatter'; readonly kind: 'frontmatter'; readonly value: string } | null =
+  const selectedNode:
+    | EditorNode | { readonly id: 'frontmatter'; readonly kind: 'frontmatter'; readonly value: string } | null =
     model && selectedId
       ? selectedId === 'frontmatter'
         ? { id: 'frontmatter', kind: 'frontmatter', value: frontmatterCode }
@@ -3530,22 +3666,36 @@ export default function App() {
       // Read back out of the frontmatter text, not a cached field: editing
       // that text by hand has to move the picker too.
       const m = (model?.extraFrontmatter || '').match(/^[ \t]*layout[ \t]*:[ \t]*(.+?)[ \t]*$/m);
-      const base = m?.[1]?.replace(/^['"]|['"]$/g, '').split('/').pop()?.replace(/\.astro$/i, '');
+      const base = m?.[1]?.replace(/^['"]|['"]$/g, '')
+        .split('/')
+        .pop()
+        ?.replace(/\.astro$/i, '');
       return base && scan.layouts.some((l) => l.name === base) ? base : '';
     }
-    if (!layoutNode) {return '';}
-    if (!model) {return '';}
+    if (!layoutNode) {
+      return '';
+    }
+    if (!model) {
+      return '';
+    }
     const imp = (model.imports || []).find((i) => i.name === layoutNode.name);
-    const base = imp?.path.split('/').pop()?.replace(/\.astro$/i, '');
-    if (base && scan.layouts.some((l) => l.name === base)) {return base;}
+    const base = imp?.path
+      .split('/')
+      .pop()
+      ?.replace(/\.astro$/i, '');
+    if (base && scan.layouts.some((l) => l.name === base)) {
+      return base;
+    }
     return layoutNode.name ?? '';
   })();
   // A component whose Props extends HTMLAttributes<"tag"> also accepts that
   // element's built-in attributes — merge them in after its own props.
   const schemaFor = (
-    entry: ScanComponent | AstroAsset | undefined | null,
+    entry: ScanComponent | AstroAsset | undefined | null
   ): readonly FieldDefinition[] => {
-    if (!entry) {return [];}
+    if (!entry) {
+      return [];
+    }
     const own = entry.schema || [];
     const ownNames = new Set(own.map((f) => f.name));
     const extendsTag = 'extendsTag' in entry ? entry.extendsTag : undefined;
@@ -3576,21 +3726,25 @@ export default function App() {
       : [{ name: 'class', type: 'string', optional: true }, ...fields];
 
   const selectedSchema: readonly FieldDefinition[] = (() => {
-    if (!selectedNode) {return [];}
+    if (!selectedNode) {
+      return [];
+    }
     if (selectedId === 'layout') {
       return schemaFor(scan.layouts.find((layout) => layout.name === currentLayoutName));
     }
     if (selectedNode.kind === 'element') {
       return withClassField(getElementSchema(selectedNode.name));
     }
-    if (selectedNode.kind !== 'component') {return [];}
+    if (selectedNode.kind !== 'component') {
+      return [];
+    }
     if (selectedNode.dynamicTag) {
       return withClassField([]);
     }
     return schemaFor(
       selectedNode.astroAsset
         ? astroAssetDef(selectedNode.name)
-        : insertables.find((component) => component.name === selectedNode.name),
+        : insertables.find((component) => component.name === selectedNode.name)
     );
   })();
 
@@ -3630,20 +3784,30 @@ export default function App() {
   // field showing `{heading}` could not say what heading was. The instance
   // says: it is in the file this one was opened from, at the focused path, and
   // the page's own scope is what its expressions come to.
-  const [instanceProps, setInstanceProps] = useState<Readonly<Record<string, unknown>> | null>(null);
+  const [instanceProps, setInstanceProps] = useState<Readonly<Record<string, unknown>> | null>(
+    null
+  );
   const focusOf = currentPage?.kind === 'component' ? currentPage.focusPath : null;
   const hostFile = editStack.length > 1 ? editStack[0] : null;
   useEffect(() => {
-    if (!focusOf || !hostFile?.path) { setInstanceProps(null); return undefined }
+    if (!focusOf || !hostFile?.path) {
+      setInstanceProps(null);
+      return undefined;
+    }
     let dropped = false;
     void (async () => {
       try {
         const read = toEditorPageState(await readPage(hostFile.path));
-        if (dropped || !read.editable) {return;}
+        if (dropped || !read.editable) {
+          return;
+        }
         const hostModel = read.model;
         const trail = (String(focusOf).split('|').pop() ?? '').split('.').map(Number);
         const instance = nodeAtPath(hostModel.nodes, trail);
-        if (!instance) { setInstanceProps(null); return }
+        if (!instance) {
+          setInstanceProps(null);
+          return;
+        }
         // The scope at the instance: the file's frontmatter, and the loops
         // around it — `project` inside `projects.map(…)` is what its props are
         // written against.
@@ -3652,22 +3816,33 @@ export default function App() {
           resolveInstanceProps(instance, {
             frontmatter: hostModel.extraFrontmatter || '',
             imports: hostModel.imports || [],
-            ancestorHeads: chain.slice(0, -1).filter((n) => n.kind === 'map').map((n) => n.head),
+            ancestorHeads: chain
+              .slice(0, -1)
+              .filter((n) => n.kind === 'map')
+              .map((n) => n.head),
             collectionSamples,
             collections,
           })
         );
       } catch {
-        if (!dropped) {setInstanceProps(null);}
+        if (!dropped) {
+          setInstanceProps(null);
+        }
       }
     })();
-    return () => { dropped = true };
+    return () => {
+      dropped = true;
+    };
   }, [focusOf, hostFile?.path, collectionSamples, collections, scan]);
 
   // Link settings (href fields): pages to link to and the ids on this page
   // that anchor links can target.
   const linkContext = useMemo(
-    () => ({ pages: scan.pages, sectionIds: tree.sectionIds, projectPath: project?.path ?? '' }),
+    () => ({
+      pages: scan.pages,
+      sectionIds: tree.sectionIds,
+      projectPath: project?.path ?? '',
+    }),
     [scan.pages, tree, project?.path]
   );
 
@@ -3676,7 +3851,9 @@ export default function App() {
   // dynamic `<Tag>`. The page reports what each node rendered with, so the
   // breadcrumb and the canvas chip can say the same thing the navigator does.
   const liveLabel = (n: EditorNode, fromSource: string): string => {
-    if (fromSource && fromSource !== n.name) {return fromSource;}
+    if (fromSource && fromSource !== n.name) {
+      return fromSource;
+    }
     const live = liveClassesById?.get(n.id);
     return live?.[0] ?? fromSource;
   };
@@ -3690,20 +3867,32 @@ export default function App() {
     const out: TagOption[] = [];
     const seen = new Set<string>();
     const add = (name: string, kind: string): void => {
-      if (!name || seen.has(name)) {return;}
+      if (!name || seen.has(name)) {
+        return;
+      }
       seen.add(name);
       out.push({ name, kind });
     };
-    for (const t of HTML_TAGS) {add(t, 'element');}
-    for (const c of insertables) {add(c.name, c.isLayout ? 'layout' : 'component');}
-    for (const a of ASTRO_ASSETS) {add(a.name, 'astroAsset');}
-    for (const i of model?.imports || []) {add(i.name, 'component');}
+    for (const t of HTML_TAGS) {
+      add(t, 'element');
+    }
+    for (const c of insertables) {
+      add(c.name, c.isLayout ? 'layout' : 'component');
+    }
+    for (const a of ASTRO_ASSETS) {
+      add(a.name, 'astroAsset');
+    }
+    for (const i of model?.imports || []) {
+      add(i.name, 'component');
+    }
     return out;
   }, [insertables, model]);
 
   // Breadcrumb trail for the canvas toolbar: page → ancestors → selection.
   const crumbLabel = (n: EditorNode): string => {
-    if (n.id === 'layout') {return currentLayoutName || n.name || 'layout';}
+    if (n.id === 'layout') {
+      return currentLayoutName || n.name || 'layout';
+    }
     switch (n.kind) {
       case 'text':
         return 'text';
@@ -3730,7 +3919,9 @@ export default function App() {
       case 'chunk-group':
         // `<Tag>` from `const Tag = tag` renders a real element and its name
         // is a variable, so the class it rendered with names it better.
-        if (n.dynamicTag) {return liveLabel(n, elementLabel(n));}
+        if (n.dynamicTag) {
+          return liveLabel(n, elementLabel(n));
+        }
         return n.name || n.kind;
     }
   };
@@ -3744,21 +3935,27 @@ export default function App() {
   const codeWinValue = !codeWin
     ? null
     : isFileWin
-      ? fileText
-      : codeWin.targetId === 'frontmatter'
-        ? model
-          ? frontmatterCode
-          : null
-        : codeWinNode?.kind === 'raw'
-          ? codeWinNode.inner
-          : null;
+    ? fileText
+    : codeWin.targetId === 'frontmatter'
+    ? model
+      ? frontmatterCode
+      : null
+    : codeWinNode?.kind === 'raw'
+    ? codeWinNode.inner
+    : null;
 
   // Returns whether the selection actually has a code editor, so the Enter
   // shortcut below knows whether it handled the key.
   const openCodeWindow = () => {
-    if (!selectedNode) {return false;}
+    if (!selectedNode) {
+      return false;
+    }
     if (selectedNode.kind === 'frontmatter') {
-      setCodeWin({ targetId: 'frontmatter', title: 'Frontmatter', language: 'javascript' });
+      setCodeWin({
+        targetId: 'frontmatter',
+        title: 'Frontmatter',
+        language: 'javascript',
+      });
       return true;
     }
     if (selectedNode.kind === 'raw') {
@@ -3778,7 +3975,9 @@ export default function App() {
   const openAssetFile = useCallback(
     async ({ rel, name }: { readonly rel: string; readonly name: string }) => {
       const projectPath = projectRef.current?.path;
-      if (!projectPath) {return;}
+      if (!projectPath) {
+        return;
+      }
       try {
         const text = await readProjectAsset(projectPath, rel);
         setFileText(text);
@@ -3802,12 +4001,18 @@ export default function App() {
   const openSymbolFile = useCallback(
     async (name: string) => {
       const projectPath = projectRef.current?.path;
-      if (!projectPath) {return false;}
+      if (!projectPath) {
+        return false;
+      }
       const imp = findImportOf(frontmatterCode, name);
-      if (!imp) {return false;}
+      if (!imp) {
+        return false;
+      }
       const stack = editStackRef.current;
       const fromFile = stack[stack.length - 1]?.path || currentPage?.path;
-      if (!fromFile) {return false;}
+      if (!fromFile) {
+        return false;
+      }
       try {
         const r = await readSymbol(projectPath, fromFile, imp.spec, name);
         if (!r?.ok) {
@@ -3841,13 +4046,19 @@ export default function App() {
   const setAssetFileText = useCallback(
     (text: string) => {
       setFileText(text);
-      if (!codeWin || codeWin.kind !== 'file') {return;}
+      if (!codeWin || codeWin.kind !== 'file') {
+        return;
+      }
       const { rel, area } = codeWin;
-      if (!rel) {return;}
+      if (!rel) {
+        return;
+      }
       // Source files live anywhere in the project; assets are rooted in public/.
       const projectPath = projectRef.current?.path;
       const saver = fileSaverRef.current;
-      if (!projectPath || !saver) {return;}
+      if (!projectPath || !saver) {
+        return;
+      }
       saver.schedule(`${projectPath}|${area || 'public'}|${rel}`, () =>
         writeProjectFile(area ?? 'public', projectPath, rel, text)
       );
@@ -3857,7 +4068,9 @@ export default function App() {
 
   // Close the window if its target disappears (page switch, node deleted).
   useEffect(() => {
-    if (codeWin && !isFileWin && codeWinValue === null) {setCodeWin(null);}
+    if (codeWin && !isFileWin && codeWinValue === null) {
+      setCodeWin(null);
+    }
   }, [codeWin, isFileWin, codeWinValue]);
 
   const editedRel =
@@ -3865,7 +4078,7 @@ export default function App() {
       ? projectRelativePath(
           project.path,
           editStack[editStack.length - 1]?.path ?? '',
-          window.avb.platform,
+          window.avb.platform
         )
       : null;
 
@@ -3881,17 +4094,20 @@ export default function App() {
 
   // The file being edited, relative to src/ — how the CMS addresses a page's
   // own data (`pages/index.astro#rotatingWords`).
+  const openEditableFile =
+    editStack[editStack.length - 1] ?? (currentPage?.kind === 'route' ? undefined : currentPage);
   const openFileSrcRel = (() => {
-    const p = editStack[editStack.length - 1]?.path || currentPage?.path;
-    if (!p || !project?.path) {return null;}
+    const p = openEditableFile?.path;
+    if (!p || !project?.path) {
+      return null;
+    }
     const rel = projectRelativePath(project.path, p, window.avb.platform);
     return rel.startsWith('src/') ? rel.slice(4) : rel;
   })();
 
   // A marker path may arrive namespaced (src/…/Card.astro|0.1). The index trail
   // after the pipe is what addresses a node in the open file's tree.
-  const trailOf = (path: string): number[] =>
-    (path.split('|').pop() ?? '').split('.').map(Number);
+  const trailOf = (path: string): number[] => (path.split('|').pop() ?? '').split('.').map(Number);
   // An edit renumbers paths, so a report from before it describes nodes that
   // have since moved. Drop it and show nothing until the page has re-rendered
   // and said so again — a marker on the wrong row is worse than none.
@@ -3906,7 +4122,12 @@ export default function App() {
   const [spacingHover, setSpacingHover] = useState<SpacingHover | null>(null);
 
   const crumbs: PreviewCrumb[] = [];
-  if (currentPage) {crumbs.push({ id: null, label: currentPage.name.replace(/\.(astro|md)$/i, '') });}
+  if (currentPage) {
+    crumbs.push({
+      id: null,
+      label: currentPage.name.replace(/\.(astro|md)$/i, ''),
+    });
+  }
   if (model && selectedId === 'frontmatter') {
     crumbs.push({ id: 'frontmatter', label: 'Frontmatter' });
   } else if (model && selectedId) {
@@ -3935,13 +4156,17 @@ export default function App() {
   // including nodes inside a component that never evaluated its slot, whose
   // markers were never emitted at all.
   const emptyNodeIds = React.useMemo(() => {
-    if (!renderedPaths || !model) {return null;}
+    if (!renderedPaths || !model) {
+      return null;
+    }
     const prefix = editedRel ? `${editedRel}|` : '';
     const live = new Set<string>();
     for (const p of renderedPaths) {
       const local = prefix && p.startsWith(prefix) ? p.slice(prefix.length) : p;
       const parts = local.split('.');
-      for (let i = parts.length; i > 0; i--) {live.add(parts.slice(0, i).join('.'));}
+      for (let i = parts.length; i > 0; i--) {
+        live.add(parts.slice(0, i).join('.'));
+      }
     }
     // Only kinds where "renders nothing" is a fact about the page. A comment,
     // the frontmatter row or a doctype line never renders and saying so on
@@ -3961,11 +4186,19 @@ export default function App() {
     // there carries one. The page therefore says nothing about those nodes,
     // which is not the same as saying they rendered nothing: `unmarked` keeps
     // a link sitting in a sentence from being reported as invisible.
-    const walk = (list: readonly EditorNode[], trail: readonly number[], unmarked: boolean): void => {
+    const walk = (
+      list: readonly EditorNode[],
+      trail: readonly number[],
+      unmarked: boolean
+    ): void => {
       list.forEach((n, i) => {
         const t = [...trail, i];
-        if (!unmarked && answers(n) && !live.has(t.join('.'))) {ids.add(n.id);}
-        if (Array.isArray(n.children)) {walk(n.children, t, unmarked || isInlineRun(n.children));}
+        if (!unmarked && answers(n) && !live.has(t.join('.'))) {
+          ids.add(n.id);
+        }
+        if (Array.isArray(n.children)) {
+          walk(n.children, t, unmarked || isInlineRun(n.children));
+        }
       });
     };
     walk(model.nodes, [], false);
@@ -3976,7 +4209,9 @@ export default function App() {
   // knowing anything about index paths.
   const stateIds = React.useMemo(() => {
     const empty = { hidden: new Set<string>(), inert: new Set<string>() };
-    if (!nodeStates || !model) {return empty;}
+    if (!nodeStates || !model) {
+      return empty;
+    }
     const prefix = editedRel ? `${editedRel}|` : '';
     const local = (path: string): string =>
       prefix && path.startsWith(prefix) ? path.slice(prefix.length) : path;
@@ -3984,7 +4219,9 @@ export default function App() {
       const set = new Set<string>();
       for (const p of paths || []) {
         const id = tree.byPath.get(local(p))?.id;
-        if (id) {set.add(id);}
+        if (id) {
+          set.add(id);
+        }
       }
       return set;
     };
@@ -3992,9 +4229,13 @@ export default function App() {
   }, [nodeStates, model, editedRel, tree]);
 
   const pathFor = (id: string | null): string | null => {
-    if (!model || !id) {return null;}
+    if (!model || !id) {
+      return null;
+    }
     const path = tree.path(id);
-    if (path === null) {return null;}
+    if (path === null) {
+      return null;
+    }
     return editedRel ? `${editedRel}|${path}` : path;
   };
   // The right panel stays on whichever tab the user picked, whatever gets
@@ -4012,9 +4253,7 @@ export default function App() {
   // stack, so it's read from the stack rather than parsed out of the key.
   // Through a ref because the menu handler is bound long before this is in scope.
   const relOf = (abs: string | undefined): string | null =>
-    abs && project?.path
-      ? projectRelativePath(project.path, abs, window.avb.platform)
-      : null;
+    abs && project?.path ? projectRelativePath(project.path, abs, window.avb.platform) : null;
   const openRel = relOf(currentPage?.path);
   const leafPath = selectedId ? tree.path(selectedId) : null;
   selectionKeysRef.current = !openRel
@@ -4030,8 +4269,8 @@ export default function App() {
         selectedId === 'frontmatter'
           ? `${openRel}#frontmatter`
           : leafPath !== null
-            ? `${openRel}#${leafPath}`
-            : `${openRel}#`,
+          ? `${openRel}#${leafPath}`
+          : `${openRel}#`,
       ];
 
   // Position the Style/Settings highlight: on tab change, when the panel first
@@ -4043,27 +4282,32 @@ export default function App() {
     };
     measure();
     const strip = rightTabRefs.current[rightTab]?.parentElement;
-    if (!strip || typeof ResizeObserver === 'undefined') {return;}
+    if (!strip || typeof ResizeObserver === 'undefined') {
+      return;
+    }
     const ro = new ResizeObserver(measure);
     ro.observe(strip);
     return () => ro.disconnect();
   }, [rightTab, pageState?.editable]);
 
   const overlayInfo = (p: string): OverlayInfo | null => {
-    if (!model || !p) {return null;}
+    if (!model || !p) {
+      return null;
+    }
     const n = nodeAtPath(model.nodes, trailOf(p));
-    if (!n) {return null;}
+    if (!n) {
+      return null;
+    }
     const label = n.id === 'layout' ? currentLayoutName || n.name || 'layout' : crumbLabel(n);
     // Fragments group inline content rather than referring to another component.
     // Their outlines use ordinary element styling, as dynamic tags already do.
-    const kind =
-      isFragmentNode(n)
-        ? 'element'
-        : n.kind === 'component' && !n.dynamicTag
-          ? 'component'
-          : n.kind === 'map' || n.kind === 'cond' || n.kind === 'branch'
-            ? 'map'
-            : 'element';
+    const kind = isFragmentNode(n)
+      ? 'element'
+      : n.kind === 'component' && !n.dynamicTag
+      ? 'component'
+      : n.kind === 'map' || n.kind === 'cond' || n.kind === 'branch'
+      ? 'map'
+      : 'element';
     // The tag drives the overlay's icon, so it matches the Navigator row.
     const tag = n.kind === 'element' || n.kind === 'raw' ? n.name : null;
     return {
@@ -4134,8 +4378,7 @@ export default function App() {
     // A component's frontmatter is not the page's, so the page's entry is not
     // its data. What it does have is the instance it was opened from, whose
     // props are its Astro.props — the values it is rendering with right now.
-    propsSample:
-      currentPage?.kind === 'component' ? instanceProps : dynamicEntry?.props || null,
+    propsSample: currentPage?.kind === 'component' ? instanceProps : dynamicEntry?.props || null,
     propsSchema: schemaFor(editedEntry),
     collectionSamples,
     collections,
@@ -4156,9 +4399,7 @@ export default function App() {
             count: dynamicPaths.length,
             label: dynamicEntry?.label || '',
             onStep: (dir: number) =>
-              setDynamicIndex(
-                (i) => (i + dir + dynamicPaths.length) % dynamicPaths.length
-              ),
+              setDynamicIndex((i) => (i + dir + dynamicPaths.length) % dynamicPaths.length),
           }
         : null,
   };
@@ -4183,7 +4424,9 @@ export default function App() {
   return (
     <div className="app">
       {propertySave.phase === 'saving' && (
-        <div className="property-saving-overlay" role="status">Saving component properties…</div>
+        <div className="property-saving-overlay" role="status">
+          Saving component properties…
+        </div>
       )}
       <div className="titlebar">
         <button
@@ -4202,11 +4445,7 @@ export default function App() {
         </button>
         <span className="spacer" />
         {editStack.length > 1 ? (
-          <button
-            className="page-switch-btn comp-back"
-            title="Back (Esc)"
-            onClick={closeComponent}
-          >
+          <button className="page-switch-btn comp-back" title="Back (Esc)" onClick={closeComponent}>
             <ChevronLeftIcon size={13} />
             <span className="comp-back-sep" />
             <ElementComponentIcon size={13} />
@@ -4217,7 +4456,9 @@ export default function App() {
         )}
         <div className="url-group">
           <span
-            className={`status-dot ${devStatus === 'on' ? 'on' : devStatus === 'starting' ? 'starting' : 'off'}`}
+            className={`status-dot ${
+              devStatus === 'on' ? 'on' : devStatus === 'starting' ? 'starting' : 'off'
+            }`}
             title={`Dev server: ${devStatus}`}
           />
           <button
@@ -4235,7 +4476,9 @@ export default function App() {
             className="url"
             spellCheck={false}
             value={urlDraft ?? liveUrl ?? ''}
-            placeholder={devStatus === 'starting' ? 'Starting Astro dev server…' : 'Preview offline'}
+            placeholder={
+              devStatus === 'starting' ? 'Starting Astro dev server…' : 'Preview offline'
+            }
             readOnly={!liveUrl}
             onFocus={(e) => e.currentTarget.select()}
             onChange={(e) => setUrlDraft(e.target.value)}
@@ -4246,7 +4489,9 @@ export default function App() {
                 e.currentTarget.blur();
                 return;
               }
-              if (e.key !== 'Enter') {return;}
+              if (e.key !== 'Enter') {
+                return;
+              }
               e.currentTarget.blur();
               goToUrl(e.currentTarget.value);
             }}
@@ -4272,7 +4517,7 @@ export default function App() {
             title={`${termOpen ? 'Hide' : 'Show'} terminal (${shortcutLabel(
               'J',
               'primary',
-              currentDesktopPlatform(),
+              currentDesktopPlatform()
             )})`}
             onClick={() => setTermOpen((v) => !v)}
           >
@@ -4283,7 +4528,9 @@ export default function App() {
             title="Open in browser"
             disabled={!liveUrl}
             onClick={() => {
-              if (liveUrl) {void openExternalURL(liveUrl);}
+              if (liveUrl) {
+                void openExternalURL(liveUrl);
+              }
             }}
           >
             <ExternalIcon size={14} />
@@ -4298,8 +4545,8 @@ export default function App() {
               previewRef
                 ? 'Back to now (Esc)'
                 : inPreview
-                  ? 'Exit preview (Esc)'
-                  : 'Preview the site'
+                ? 'Exit preview (Esc)'
+                : 'Preview the site'
             }
             disabled={!devUrl}
             onClick={() =>
@@ -4325,7 +4572,7 @@ export default function App() {
         />
 
         {leftTab && (
-          <div className="panel left">
+          <div className={`panel left ${leftTab === 'code' ? 'code-panel-shell' : ''}`}>
             {leftTab === 'properties' && currentPage?.kind === 'component' && (
               <ComponentPropertiesPanel
                 key={currentPage.path}
@@ -4395,14 +4642,25 @@ export default function App() {
                 onCreateComponent={createComponentFromSelection}
                 onUsage={componentUsage}
                 pageInstances={pageInstancesOf}
-                onSelectInstance={(id) => { setLeftTab('navigator'); setSelectedId(id) }}
+                onSelectInstance={(id) => {
+                  setLeftTab('navigator');
+                  setSelectedId(id);
+                }}
                 onOpenUsage={(entry) => {
                   // A page is opened as a page; a component or layout is drilled
                   // into, the same as opening one from the canvas.
                   const page = scan.pages.find((p) => p.path === entry.path);
-                  if (page) { void selectPage(page); return }
-                  const name = entry.rel.split('/').pop()?.replace(/\.astro$/, '');
-                  if (name) {void openComponent(name, null, 0, entry.path);}
+                  if (page) {
+                    void selectPage(page);
+                    return;
+                  }
+                  const name = entry.rel
+                    .split('/')
+                    .pop()
+                    ?.replace(/\.astro$/, '');
+                  if (name) {
+                    void openComponent(name, null, 0, entry.path);
+                  }
                 }}
               />
             )}
@@ -4423,11 +4681,15 @@ export default function App() {
                 onSelect={(r) => {
                   setCmsRel(r);
                   setCmsSettings(false);
-                  if (r) {setContentName(null);}
+                  if (r) {
+                    setContentName(null);
+                  }
                   // Closing a collection leaves nothing selected anywhere, so
                   // the right-hand panels show their empty state rather than
                   // the node that happened to be picked before.
-                  if (!r) {setSelectedId(null);}
+                  if (!r) {
+                    setSelectedId(null);
+                  }
                 }}
                 onOpenSettings={(r) => {
                   setCmsRel(r);
@@ -4439,6 +4701,21 @@ export default function App() {
             {leftTab === 'variables' && (
               <VariablesPanel project={project} selected={varsGroup} onSelect={setVarsGroup} />
             )}
+            {leftTab === 'code' && currentPage && currentPage.kind !== 'route' && pageState && (
+              <CodePanel
+                source={pageState.source}
+                relativePath={openRel ?? currentPage.name}
+                model={model}
+                selectedId={selectedId}
+                onChange={(source, position) => {
+                  void changeCodeSource(source, position);
+                }}
+                onSelect={setSelectedId}
+                onOpenComponent={(name, id) => {
+                  void openComponent(name, pathFor(id));
+                }}
+              />
+            )}
             {leftTab === 'history' && (
               <HistoryPanel
                 project={project}
@@ -4449,8 +4726,11 @@ export default function App() {
                   // show it on, so the row says where it is and does nothing —
                   // better than opening an empty editor onto a stylesheet.
                   const page = scan.pages.find((p) => p.path.endsWith(f.path));
-                  if (page) {selectPage(page);}
-                  else {showToast(`${f.path} isn’t a page — nothing to open on the canvas.`, 'info');}
+                  if (page) {
+                    selectPage(page);
+                  } else {
+                    showToast(`${f.path} isn’t a page — nothing to open on the canvas.`, 'info');
+                  }
                 }}
                 onPreviewCommit={previewCommit}
                 onExitPreview={exitCommitPreview}
@@ -4465,7 +4745,9 @@ export default function App() {
                     return;
                   }
                   try {
-                    if (!commit.hash) {throw new Error('History commit has no hash');}
+                    if (!commit.hash) {
+                      throw new Error('History commit has no hash');
+                    }
                     const r = await restoreProjectFile(project.path, commit.hash, file.path);
                     if (r.missing) {
                       showToast(r.message ?? 'That version no longer contains the file.', 'error');
@@ -4493,7 +4775,9 @@ export default function App() {
                   }
                   setBusy('Going back…');
                   try {
-                    if (!commit.hash) {throw new Error('History commit has no hash');}
+                    if (!commit.hash) {
+                      throw new Error('History commit has no hash');
+                    }
                     const r = await restoreProjectVersion(project.path, commit.hash);
                     await refreshGit();
                     await reloadFromDisk();
@@ -4514,13 +4798,21 @@ export default function App() {
                   // could not carry the work across. Parking is what the chip's
                   // dialog offers after that, not a thing done pre-emptively.
                   try {
-                    const result = await checkoutGitBranch(project.path, b, { kind: 'switch' });
-                    if (!result.ok) {throw new Error(result.error);}
+                    const result = await checkoutGitBranch(project.path, b, {
+                      kind: 'switch',
+                    });
+                    if (!result.ok) {
+                      throw new Error(result.error);
+                    }
                     const r = result.value;
                     if (!r.ok) {
                       showToast(
-                        `${repository?.branch ?? 'This branch'} and ${b} have different versions of ` +
-                          `${r.files[0] || 'a file'} you have unsaved work in — switch from the branch button to decide what to do with it.`,
+                        `${
+                          repository?.branch ?? 'This branch'
+                        } and ${b} have different versions of ` +
+                          `${
+                            r.files[0] || 'a file'
+                          } you have unsaved work in — switch from the branch button to decide what to do with it.`,
                         'error'
                       );
                       return;
@@ -4555,7 +4847,11 @@ export default function App() {
                     onConflict: (r) =>
                       showToast(
                         `${r.from} and ${r.branch} both changed ` +
-                          `${r.files.length === 1 ? r.files[0]?.path ?? 'a file' : `${r.files.length} files`}. ` +
+                          `${
+                            r.files.length === 1
+                              ? r.files[0]?.path ?? 'a file'
+                              : `${r.files.length} files`
+                          }. ` +
                           'Open the branch button to choose which versions to keep.',
                         'info'
                       ),
@@ -4616,10 +4912,14 @@ export default function App() {
               // opposite things: a click the open file doesn't own, and a click
               // on something inside it the canvas couldn't name.
               const reveal = (node: EditorNode | null) => {
-                if (!node) {return;}
+                if (!node) {
+                  return;
+                }
                 setSelectedId(node.id);
-                // Selecting from the canvas jumps to the node in the tree.
-                setLeftTab('navigator');
+                // Code and canvas are two views of the same selection. Keep
+                // code open when it is already in use; every other panel gives
+                // way to the navigator so the selected row is visible.
+                setLeftTab((tab) => (tab === 'code' ? tab : 'navigator'));
                 setRevealTick((t) => t + 1);
               };
               const { kind } = canvasClickAction({
@@ -4629,8 +4929,14 @@ export default function App() {
                 scope: editedRel ? `${editedRel}|` : '',
               });
               if (kind === 'nothing') {return;}
-              if (kind === 'close') { closeComponent(); return; }
-              if (kind === 'layout') { reveal(model && findNodeById(model.nodes, 'layout')); return; }
+              if (kind === 'close') {
+                closeComponent();
+                return;
+              }
+              if (kind === 'layout') {
+                reveal(model && findNodeById(model.nodes, 'layout'));
+                return;
+              }
               reveal(model && p ? nodeAtPath(model.nodes, trailOf(p)) : null);
             }}
             onSelectedClasses={receiveClasses}
@@ -4643,11 +4949,15 @@ export default function App() {
               // footer) — that markup belongs to the layout, so open the layout,
               // matching what a single click there selects.
               if (!p) {
-                if (layoutNode?.name) {openComponent(layoutNode.name, pathFor('layout'));}
+                if (layoutNode?.name) {
+                  openComponent(layoutNode.name, pathFor('layout'));
+                }
                 return;
               }
               const n = model && nodeAtPath(model.nodes, trailOf(p));
-              if (!n) {return;}
+              if (!n) {
+                return;
+              }
               // Astro built-ins have no project component file to open.
               if (n.kind === 'component' && !n.astroAsset && n.name !== 'Fragment') {
                 openComponent(n.name, p, occ);
@@ -4741,10 +5051,12 @@ export default function App() {
           <div className="panel right">
             <div className="right-tabs">
               {rightTabInd && <span className="right-tabs-indicator" style={rightTabInd} />}
-              {([
-                { id: 'style', label: 'Style' },
-                { id: 'settings', label: 'Settings' },
-              ] as const).map((t) => (
+              {(
+                [
+                  { id: 'style', label: 'Style' },
+                  { id: 'settings', label: 'Settings' },
+                ] as const
+              ).map((t) => (
                 <button
                   key={t.id}
                   ref={(el) => (rightTabRefs.current[t.id] = el)}
@@ -4776,97 +5088,112 @@ export default function App() {
                 onSelectNode={setSelectedId}
                 onRecordUndo={pushCommand}
                 onAddClass={(name) => {
-                  if (selectedId) {addClassToNode(selectedId, name);}
+                  if (selectedId) {
+                    addClassToNode(selectedId, name);
+                  }
                 }}
                 onSpacingHover={setSpacingHover}
                 pathOf={pathFor}
                 renderedClasses={selectedClasses}
                 projectClasses={projectClasses}
                 historyTick={historyTick}
-                openFilePath={editStack[editStack.length - 1]?.path || currentPage?.path || null}
+                openFilePath={openEditableFile?.path ?? null}
+                openFileKind={openEditableFile?.kind ?? null}
               />
             )}
             <div style={{ display: rightTab === 'settings' ? 'contents' : 'none' }}>
-            <PropsPanel
-              node={selectedNode}
-              focusClass={classFocus}
-              focusContent={contentFocus}
-              isLayout={selectedId === 'layout'}
-              layouts={scan.layouts}
-              currentLayoutName={currentLayoutName}
-              onChangeLayout={changeLayout}
-              schema={selectedSchema}
-              slotOptions={slotOptions}
-              // Whether this component takes default slot content — the same
-              // test used to decide what an insert or paste can go inside.
-              takesSlotText={
-                selectedNode?.kind === 'component' &&
-                (insertables.find((c) => c.name === selectedNode.name)?.slots || []).includes(
-                  'default'
-                )
-              }
-              loopContext={loopContext}
-              bindContext={bindContext}
-              linkContext={linkContext}
-              projectClasses={projectClasses}
-              allowAttrs={
-                selectedNode?.kind === 'element' ||
-                // A dynamic tag renders a real element, so it takes attributes
-                // even though it has no component file behind it.
-                (selectedNode !== null &&
-                  selectedNode.kind !== 'frontmatter' &&
-                  !!selectedNode.dynamicTag) ||
-                (selectedNode?.kind === 'component' &&
-                  !!insertables.find((c) => c.name === selectedNode.name)?.hasRest)
-              }
-              comment={noteText(commentAbove(model, selectedId)?.value)}
-              onSetComment={(text) => {
-                if (selectedId) {setComment(selectedId, text);}
-              }}
-              onSetProp={(propName, value, immediate) => {
-                if (selectedId) {setProp(selectedId, propName, value, immediate);}
-              }}
-              onSetProps={(nodeId, patch) => setProps(nodeId, patch)}
-              onSetAssetProp={(nodeId, propName, picked) =>
-                setAssetProp(nodeId, propName, picked)
-              }
-              onRenameProp={(oldName, newName) => {
-                if (selectedId) {renameProp(selectedId, oldName, newName);}
-              }}
-              // A capital is a component name; anything else is a tag. The
-              // component path answers whether the name resolves, so the
-              // field can put the old value back when it doesn't.
-              onChangeTag={(tag) =>
-                selectedId
-                  ? /^[A-Z]/.test(tag)
-                    ? changeNodeKind(selectedId, tag)
-                    : changeElementTag(selectedId, tag)
-                  : undefined
-              }
-              tagOptions={tagOptions}
-              onSetText={(value, renames) =>
-                selectedId === 'frontmatter'
-                  ? setFrontmatter(value)
-                  : selectedId
+              <PropsPanel
+                node={selectedNode}
+                focusClass={classFocus}
+                focusContent={contentFocus}
+                isLayout={selectedId === 'layout'}
+                layouts={scan.layouts}
+                currentLayoutName={currentLayoutName}
+                onChangeLayout={changeLayout}
+                schema={selectedSchema}
+                slotOptions={slotOptions}
+                // Whether this component takes default slot content — the same
+                // test used to decide what an insert or paste can go inside.
+                takesSlotText={
+                  selectedNode?.kind === 'component' &&
+                  (insertables.find((c) => c.name === selectedNode.name)?.slots || []).includes(
+                    'default'
+                  )
+                }
+                loopContext={loopContext}
+                bindContext={bindContext}
+                linkContext={linkContext}
+                projectClasses={projectClasses}
+                allowAttrs={
+                  selectedNode?.kind === 'element' ||
+                  // A dynamic tag renders a real element, so it takes attributes
+                  // even though it has no component file behind it.
+                  (selectedNode !== null &&
+                    selectedNode.kind !== 'frontmatter' &&
+                    !!selectedNode.dynamicTag) ||
+                  (selectedNode?.kind === 'component' &&
+                    !!insertables.find((c) => c.name === selectedNode.name)?.hasRest)
+                }
+                comment={noteText(commentAbove(model, selectedId)?.value)}
+                onSetComment={(text) => {
+                  if (selectedId) {
+                    setComment(selectedId, text);
+                  }
+                }}
+                onSetProp={(propName, value, immediate) => {
+                  if (selectedId) {
+                    setProp(selectedId, propName, value, immediate);
+                  }
+                }}
+                onSetProps={(nodeId, patch) => setProps(nodeId, patch)}
+                onSetAssetProp={(nodeId, propName, picked) =>
+                  setAssetProp(nodeId, propName, picked)
+                }
+                onRenameProp={(oldName, newName) => {
+                  if (selectedId) {
+                    renameProp(selectedId, oldName, newName);
+                  }
+                }}
+                // A capital is a component name; anything else is a tag. The
+                // component path answers whether the name resolves, so the
+                // field can put the old value back when it doesn't.
+                onChangeTag={(tag) =>
+                  selectedId
+                    ? /^[A-Z]/.test(tag)
+                      ? changeNodeKind(selectedId, tag)
+                      : changeElementTag(selectedId, tag)
+                    : undefined
+                }
+                tagOptions={tagOptions}
+                onSetText={(value, renames) =>
+                  selectedId === 'frontmatter'
+                    ? setFrontmatter(value)
+                    : selectedId
                     ? setNodeText(selectedId, value, renames)
                     : undefined
-              }
-              onSetContent={(value) => {
-                if (selectedId) {setNodeContent(selectedId, value);}
-              }}
-              onSetInline={(kids) => {
-                if (selectedId) {setNodeInline(selectedId, kids);}
-              }}
-              onOpenCode={openCodeWindow}
-              onSetFrontmatter={setExtraFrontmatter}
-              frontmatterSource={frontmatterCode}
-              onOpenSymbol={openSymbolFile}
-              onToggleElse={(want) => {
-                if (selectedId) {toggleElseBranch(selectedId, want);}
-              }}
-              projectPath={project.path}
-              filePath={editStack[editStack.length - 1]?.path || currentPage?.path || null}
-            />
+                }
+                onSetContent={(value) => {
+                  if (selectedId) {
+                    setNodeContent(selectedId, value);
+                  }
+                }}
+                onSetInline={(kids) => {
+                  if (selectedId) {
+                    setNodeInline(selectedId, kids);
+                  }
+                }}
+                onOpenCode={openCodeWindow}
+                onSetFrontmatter={setExtraFrontmatter}
+                frontmatterSource={frontmatterCode}
+                onOpenSymbol={openSymbolFile}
+                onToggleElse={(want) => {
+                  if (selectedId) {
+                    toggleElseBranch(selectedId, want);
+                  }
+                }}
+                projectPath={project.path}
+                filePath={editStack[editStack.length - 1]?.path || currentPage?.path || null}
+              />
             </div>
           </div>
         )}
@@ -4876,11 +5203,7 @@ export default function App() {
           by the panels. Always mounted but inert until opened: it spawns no
           shell until then, and once open it hides rather than unmounting, so
           toggling it doesn't discard the scrollback — see TerminalDock. */}
-      <TerminalDock
-        projectPath={project.path}
-        open={termOpen}
-        onClose={() => setTermOpen(false)}
-      />
+      <TerminalDock projectPath={project.path} open={termOpen} onClose={() => setTermOpen(false)} />
 
       {codeWin && codeWinValue !== null && (
         <CodeWindow
@@ -4893,10 +5216,10 @@ export default function App() {
             isFileWin
               ? setAssetFileText(value)
               : codeWin.targetId === 'frontmatter'
-                ? setFrontmatter(value)
-                : codeWin.targetId
-                  ? setNodeText(codeWin.targetId, value)
-                  : undefined
+              ? setFrontmatter(value)
+              : codeWin.targetId
+              ? setNodeText(codeWin.targetId, value)
+              : undefined
           }
           onClose={() => setCodeWin(null)}
         />
@@ -4918,11 +5241,7 @@ export default function App() {
   );
 }
 
-function insertIntoModel(
-  model: EditorModel,
-  node: EditorNode,
-  target: InsertTarget | null,
-): void {
+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;
     model.nodes.splice(index, 0, node);
@@ -4933,7 +5252,9 @@ function insertIntoModel(
     model.nodes.push(node);
     return;
   }
-  if (!Array.isArray(parent.children)) {parent.children = [];}
+  if (!Array.isArray(parent.children)) {
+    parent.children = [];
+  }
   const index = Math.min(target.index, parent.children.length);
   parent.children.splice(index, 0, node);
 }
diff --git a/src/appBridge.ts b/src/appBridge.ts
index 88fdc613..6cb9366d 100644
--- a/src/appBridge.ts
+++ b/src/appBridge.ts
@@ -20,6 +20,7 @@ import {
 } from '../shared/boundary';
 import { parseIpcPayload } from '../shared/ipc-payloads';
 import { parseOkResult } from '../shared/ipc';
+import { parsePageReadResult, type ParsePageResult } from '../shared/page-node';
 
 export interface PageChangeEvent {
   readonly external: boolean;
@@ -105,14 +106,32 @@ export function watchProject(projectPath: string): Promise<boolean> {
   return window.avb.watchProject(payload).then((input) => boolean(record(input)['ok']));
 }
 
-export function writeProjectPage(pagePath: string, model: unknown): Promise<void> {
+export function writeProjectPage(
+  pagePath: string,
+  model: unknown,
+): Promise<(ParsePageResult & { readonly source: string }) | undefined> {
   const payload = parseIpcPayload('page:write', { pagePath, model });
-  return window.avb.writePage(payload).then((input) => void parseOkResult(input));
+  return window.avb.writePage(payload).then(parseWrittenPage);
 }
 
-export function writeProjectPageRaw(pagePath: string, source: string): Promise<void> {
+export function writeProjectPageRaw(
+  pagePath: string,
+  source: string,
+): Promise<(ParsePageResult & { readonly source: string }) | undefined> {
   const payload = parseIpcPayload('page:writeRaw', { pagePath, source });
-  return window.avb.writePageRaw(payload).then((input) => void parseOkResult(input));
+  return window.avb.writePageRaw(payload).then(parseWrittenPage);
+}
+
+function parseWrittenPage(
+  input: unknown,
+): (ParsePageResult & { readonly source: string }) | undefined {
+  parseOkResult(input);
+  if (typeof input !== 'object' || input === null || !('source' in input)) {
+    // Older development bridges only acknowledge the write. The production
+    // bridge returns the parsed file so source ranges stay current.
+    return undefined;
+  }
+  return parsePageReadResult(input);
 }
 
 export function closeProject(nextProjectPath: string | null): Promise<void> {
diff --git a/src/appTypes.ts b/src/appTypes.ts
index 6e32f177..6b1deebb 100644
--- a/src/appTypes.ts
+++ b/src/appTypes.ts
@@ -98,6 +98,7 @@ export type LeftTab =
   | 'assets'
   | 'cms'
   | 'variables'
+  | 'code'
   | 'history'
   | null;
 export type RightTab = 'style' | 'settings';
diff --git a/src/bridge.ts b/src/bridge.ts
index 378a6e75..cbbac6c9 100644
--- a/src/bridge.ts
+++ b/src/bridge.ts
@@ -37,6 +37,14 @@ export async function readPage(path: string): Promise<ParsePageResult & { readon
   return parsePageReadResult(result);
 }
 
+export async function parsePageSource(
+  path: string,
+  source: string,
+): Promise<ParsePageResult & { readonly source: string }> {
+  const result = await window.avb.parsePageSource({ pagePath: toFilePath(path), source });
+  return parsePageReadResult(result);
+}
+
 export async function readText(projectPath: string, rel: string): Promise<string> {
   const result = await window.avb.readSourceText({ projectPath: toProjectPath(projectPath), rel });
   return parseTextResult(result).text;
diff --git a/src/codePanelModel.ts b/src/codePanelModel.ts
new file mode 100644
index 00000000..7519f9a6
--- /dev/null
+++ b/src/codePanelModel.ts
@@ -0,0 +1,149 @@
+import { LIMITS } from '../shared/limits';
+import type { EditorModel, EditorNode } from './appTypes';
+
+export interface SourceRange {
+  readonly from: number;
+  readonly to: number;
+}
+
+export interface ComponentSourceRange extends SourceRange {
+  readonly id: string;
+  readonly name: string;
+}
+
+export function sourceRangeForSelection(
+  model: EditorModel | null,
+  selectedId: string | null,
+  sourceLength: number
+): SourceRange | null {
+  if (!model || !selectedId) {
+    return null;
+  }
+  if (selectedId === 'frontmatter') {
+    const end = model.bodyStart;
+    return typeof end === 'number' && end > 0 && end <= sourceLength ? { from: 0, to: end } : null;
+  }
+  const node = sourceNodeById(model.nodes, selectedId);
+  return node ? sourceRangeForNode(node, sourceLength) : null;
+}
+
+export function sourceNodeAtOffset(
+  nodes: readonly EditorNode[],
+  offset: number
+): EditorNode | null {
+  if (!Number.isSafeInteger(offset) || offset < 0) {
+    return null;
+  }
+  const pending = [...nodes];
+  let best: EditorNode | null = null;
+  let bestWidth = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < pending.length; index += 1) {
+    if (index >= LIMITS.treeNodesMax) {
+      throw new Error('Code source lookup exceeds the node limit');
+    }
+    const node = pending[index];
+    if (!node) {
+      continue;
+    }
+    const start = node.start;
+    const end = node.end;
+    if (typeof start === 'number' && typeof end === 'number') {
+      const contains = start <= offset && offset <= end;
+      const width = end - start;
+      if (contains && width <= bestWidth) {
+        best = node;
+        bestWidth = width;
+      }
+    }
+    if (Array.isArray(node.children)) {
+      pending.push(...node.children);
+    }
+  }
+  return best;
+}
+
+export function componentSourceRanges(
+  nodes: readonly EditorNode[],
+  source: string
+): readonly ComponentSourceRange[] {
+  const ranges: ComponentSourceRange[] = [];
+  const pending = [...nodes];
+  for (let index = 0; index < pending.length; index += 1) {
+    if (index >= LIMITS.treeNodesMax) {
+      throw new Error('Code component lookup exceeds the node limit');
+    }
+    const node = pending[index];
+    if (!node) {
+      continue;
+    }
+    if (
+      node.kind === 'component' &&
+      !node.dynamicTag &&
+      !node.astroAsset &&
+      node.name !== 'Fragment' &&
+      typeof node.start === 'number'
+    ) {
+      const from = node.start + 1;
+      const to = from + node.name.length;
+      if (source.slice(from, to) === node.name) {
+        ranges.push({ id: node.id, name: node.name, from, to });
+      }
+    }
+    if (Array.isArray(node.children)) {
+      pending.push(...node.children);
+    }
+  }
+  return ranges;
+}
+
+export function sourceLineLabel(source: string, range: SourceRange | null): string | null {
+  if (!range) {
+    return null;
+  }
+  const startLine = sourceLineAt(source, range.from);
+  const endLine = sourceLineAt(source, Math.max(range.from, range.to - 1));
+  return startLine === endLine ? `L${startLine}` : `L${startLine}–${endLine}`;
+}
+
+function sourceNodeById(nodes: readonly EditorNode[], id: string): EditorNode | null {
+  const pending = [...nodes];
+  for (let index = 0; index < pending.length; index += 1) {
+    if (index >= LIMITS.treeNodesMax) {
+      throw new Error('Code selection lookup exceeds the node limit');
+    }
+    const node = pending[index];
+    if (!node) {
+      continue;
+    }
+    if (node.id === id) {
+      return node;
+    }
+    if (Array.isArray(node.children)) {
+      pending.push(...node.children);
+    }
+  }
+  return null;
+}
+
+function sourceRangeForNode(node: EditorNode, sourceLength: number): SourceRange | null {
+  const start = node.start;
+  const end = node.end;
+  if (typeof start !== 'number' || typeof end !== 'number') {
+    return null;
+  }
+  if (start < 0 || end < start || end > sourceLength) {
+    return null;
+  }
+  return { from: start, to: end };
+}
+
+function sourceLineAt(source: string, offset: number): number {
+  const end = Math.min(Math.max(offset, 0), source.length);
+  let line = 1;
+  for (let index = 0; index < end; index += 1) {
+    if (source.charAt(index) === '\n') {
+      line += 1;
+    }
+  }
+  return line;
+}
diff --git a/src/dataSuggest.ts b/src/dataSuggest.ts
index 48c2f24e..74dcafc7 100644
--- a/src/dataSuggest.ts
+++ b/src/dataSuggest.ts
@@ -908,6 +908,16 @@ export interface ScopeChip {
   readonly path: string;
 }
 
+const TYPE_OPERATORS = new Set(['as', 'satisfies']);
+
+function isTypeSyntaxIdentifier(source: string, from: number, root: string): boolean {
+  if (TYPE_OPERATORS.has(root)) {
+    return true;
+  }
+  const before = source.slice(0, from).trimEnd();
+  return /(?:^|[^\w$])(?:as|satisfies)$/.test(before);
+}
+
 /**
  * The names an expression NAMES, as ranges, so a field can draw them as chips.
  *
@@ -970,7 +980,8 @@ export function scopeChips(text: unknown, names: Iterable<string> | Set<string>
     // Not a property of something else — the `data` in `post.data` is part of
     // that chip, not one of its own.
     const before = src.slice(0, i).trimEnd();
-    if (!before.endsWith('.') && inScope.has(path.split('.')[0] ?? '')) {
+    const root = path.split('.')[0] ?? '';
+    if (!before.endsWith('.') && inScope.has(root) && !isTypeSyntaxIdentifier(src, i, root)) {
       out.push({ from: i, to: end, path });
     }
     i = j;
diff --git a/src/pagePersistence.ts b/src/pagePersistence.ts
index 7d8d1134..4f0624e9 100644
--- a/src/pagePersistence.ts
+++ b/src/pagePersistence.ts
@@ -15,19 +15,22 @@ interface CurrentSnapshot<State extends PageStateHandle> {
   readonly pageState?: State | null;
 }
 
-interface PageSaverDeps<State extends PageStateHandle> {
+interface PageSaverDeps<State extends PageStateHandle, Acknowledgement> {
   readonly readCurrent: () => CurrentSnapshot<State>;
-  readonly write: (path: string, pageState: State) => Promise<void>;
-  readonly markSaved: (pageState: State) => void;
+  readonly write: (path: string, pageState: State) => Promise<Acknowledgement>;
+  readonly markSaved: (
+    pageState: State,
+    acknowledgement: Acknowledgement | undefined,
+  ) => void;
 }
 
-export function createPageSaver<State extends PageStateHandle>({
+export function createPageSaver<State extends PageStateHandle, Acknowledgement>({
   readCurrent,
   write,
   markSaved,
-}: PageSaverDeps<State>): () => Promise<void> {
+}: PageSaverDeps<State, Acknowledgement>): () => Promise<void> {
   let pending: Promise<void> = Promise.resolve();
-  const saved = new WeakSet<State>();
+  const saved = new WeakMap<State, Acknowledgement>();
   const flush = async (): Promise<void> => {
     const path = readCurrent().currentPage?.path;
     if (!path) {
@@ -46,10 +49,10 @@ export function createPageSaver<State extends PageStateHandle>({
         return;
       }
       if (!saved.has(pageState)) {
-        await write(path, pageState);
-        saved.add(pageState);
+        const acknowledgement = await write(path, pageState);
+        saved.set(pageState, acknowledgement);
       }
-      markSaved(pageState);
+      markSaved(pageState, saved.get(pageState));
       if (readCurrent().pageState === pageState) {
         return;
       }
diff --git a/src/paletteModel.ts b/src/paletteModel.ts
index 52e968ee..ec01aa8f 100644
--- a/src/paletteModel.ts
+++ b/src/paletteModel.ts
@@ -13,6 +13,26 @@ export type ComponentUsageResult =
   | { readonly kind: 'error'; readonly message: string }
   | { readonly kind: 'ready'; readonly files: readonly ComponentUsageFile[] };
 
+export interface ComponentPreviewMessage {
+  readonly status: 'empty' | 'ready';
+}
+
+export function parseComponentPreviewMessage(input: unknown): ComponentPreviewMessage | undefined {
+  if (typeof input !== 'object' || input === null) {
+    return undefined;
+  }
+  if (!('type' in input) || input.type !== 'avb:component-preview') {
+    return undefined;
+  }
+  if (!('status' in input)) {
+    return undefined;
+  }
+  if (input.status === 'empty' || input.status === 'ready') {
+    return { status: input.status };
+  }
+  return undefined;
+}
+
 export function parseComponentUsage(input: unknown): ComponentUsageResult {
   const value = record(input);
   const error = optional(text)(value['error']);
diff --git a/src/panels/CanvasView.tsx b/src/panels/CanvasView.tsx
index 6e779809..9b29889a 100644
--- a/src/panels/CanvasView.tsx
+++ b/src/panels/CanvasView.tsx
@@ -9,6 +9,7 @@ const BREAKPOINTS = [
 const GAP_PX = 120;
 const PAGE_HEIGHT_PX_MAX = 30_000;
 const PAGE_HEIGHT_PX_MIN = 200;
+const PAGE_HEIGHT_VIEWPORTS_MAX = 1.25;
 const ZOOM_MIN = 0.05;
 const ZOOM_MAX = 4;
 type BreakpointKey = (typeof BREAKPOINTS)[number]['key'];
@@ -118,10 +119,17 @@ function useCanvasPointer(
 function layoutFrames(heights: Partial<Record<BreakpointKey, number>>) {
   let x = 0;
   return BREAKPOINTS.map((breakpoint) => {
+    // The overview cannot know the eventual browser viewport, and stretching
+    // its iframe can make vh-based pages report their own new frame height.
+    // One and a quarter screens preserve context while tightly bounding that loop.
+    const heightMax = Math.min(
+      PAGE_HEIGHT_PX_MAX,
+      breakpoint.viewportHeight * PAGE_HEIGHT_VIEWPORTS_MAX,
+    );
     const height = clamp(
       heights[breakpoint.key] ?? breakpoint.viewportHeight,
       PAGE_HEIGHT_PX_MIN,
-      PAGE_HEIGHT_PX_MAX,
+      heightMax,
     );
     const frame = { ...breakpoint, x, height };
     x += breakpoint.width + GAP_PX;
diff --git a/src/panels/CodePanel.tsx b/src/panels/CodePanel.tsx
new file mode 100644
index 00000000..d07ea403
--- /dev/null
+++ b/src/panels/CodePanel.tsx
@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import type { EditorModel } from '../appTypes';
+import {
+  componentSourceRanges,
+  sourceLineLabel,
+  sourceNodeAtOffset,
+  sourceRangeForSelection,
+} from '../codePanelModel';
+import CodeEditor from '../ui/CodeEditor.jsx';
+import { CodeIcon } from '../ui/Icons.jsx';
+
+interface CodePanelProps {
+  readonly source: string;
+  readonly relativePath: string;
+  readonly model: EditorModel | null;
+  readonly selectedId: string | null;
+  readonly onChange: (source: string, position: number) => void;
+  readonly onSelect: (id: string) => void;
+  readonly onOpenComponent: (name: string, id: string) => void;
+}
+
+export default function CodePanel(props: CodePanelProps) {
+  const { source, relativePath, model, selectedId, onChange, onSelect, onOpenComponent } = props;
+  const activeRange = useMemo(
+    () => sourceRangeForSelection(model, selectedId, source.length),
+    [model, selectedId, source.length]
+  );
+  const components = useMemo(
+    () => componentSourceRanges(model?.nodes ?? [], source),
+    [model, source]
+  );
+  const lineLabel = sourceLineLabel(source, activeRange);
+  return (
+    <section className="code-panel">
+      <header className="code-panel-header">
+        <span className="code-panel-title">
+          <CodeIcon size={14} />
+          Code
+        </span>
+        <span className="code-panel-path" title={relativePath}>
+          {relativePath}
+        </span>
+        {lineLabel && <span className="code-panel-lines">{lineLabel}</span>}
+      </header>
+      <div className="code-panel-editor">
+        <CodeEditor
+          language="astro"
+          value={source}
+          activeRange={activeRange}
+          componentRanges={components}
+          onChange={onChange}
+          onPositionChange={(position) => {
+            if (model?.bodyStart !== undefined && position < model.bodyStart) {
+              onSelect('frontmatter');
+              return;
+            }
+            const node = sourceNodeAtOffset(model?.nodes ?? [], position);
+            if (node !== null) {
+              onSelect(node.id);
+            }
+          }}
+          onOpenComponent={onOpenComponent}
+        />
+      </div>
+    </section>
+  );
+}
diff --git a/src/panels/ComponentPropertiesPanel.tsx b/src/panels/ComponentPropertiesPanel.tsx
index 813132ca..6c9edd9d 100644
--- a/src/panels/ComponentPropertiesPanel.tsx
+++ b/src/panels/ComponentPropertiesPanel.tsx
@@ -7,7 +7,9 @@ import type {
   PropertyChange,
 } from '../../shared/component-properties';
 import useListReorder from '../ui/useListReorder';
-import { TrashIcon } from '../ui/Icons';
+import { literalOptions } from '../propertyOptions';
+import ListFieldRow from '../ui/ListFieldRow';
+import { ComponentPropertiesIcon, FieldNumberIcon, FieldSwitchIcon } from '../ui/Icons';
 import { PropertyGrip, movePropertyItem } from './PropertyReorder';
 import { PropertiesIcon } from '../ui/PropertiesIcon';
 import { PropertyEditor } from './PropertyEditor';
@@ -69,7 +71,9 @@ function PropertyPanelContent({ data, busy, save }: PropertyContentProps) {
         <button
           className="property-add"
           aria-label="Add property"
-          title="Add property"
+          title={
+            data.advanced ? 'Add declarations to this combined type in source' : 'Add property'
+          }
           disabled={data.advanced || busy}
           onClick={() =>
             setSelection({
@@ -95,12 +99,6 @@ function PropertyPanelContent({ data, busy, save }: PropertyContentProps) {
             />
           </>
         )}
-        {data.advanced && (
-          <p className="property-help">
-            This component imports or combines its prop contract. Declare fields in Props to edit
-            them.
-          </p>
-        )}
         <PropertySelectionEditor
           selection={selection}
           data={data}
@@ -130,13 +128,17 @@ function PropertySelectionEditor({
           key={selection.originalName}
           property={selection.value}
           originalName={selection.originalName}
-          disabled={busy || data.advanced}
+          frontmatter={data.frontmatter}
+          access={
+            busy ? 'saving' : propertyIsEditable(selection.value, data) ? 'editable' : 'readonly'
+          }
           onClose={onClose}
           onSave={async (change) => {
             if (await save(change)) {
               onClose();
             }
           }}
+          onCommit={save}
         />
       )}
     </>
@@ -159,61 +161,67 @@ function PropertyList({ data, busy, onSelect, onChange }: PropertyListProps) {
   };
   const reorder = useListReorder({ count: data.properties.length, onMove: move, disabled });
   return (
-    <div className="property-list">
+    <div className="property-list list-field">
       {data.properties.length === 0 && (
         <p className="property-help">
           No properties yet. Add a property to define what each instance can customize.
         </p>
       )}
       {data.properties.map((property, index) => (
-        <div
-          className={`property-row ${reorder.rowClass(index)}`}
+        <ListFieldRow
           key={property.name}
-          {...reorder.rowProps(index)}
+          className={`property-row ${reorder.rowClass(index)}`}
+          rowProps={reorder.rowProps(index)}
+          triggerClassName="property-row-main"
+          icon={<PropertyTypeIcon type={property.type} />}
+          grip={
+            <PropertyGrip
+              label={property.name}
+              index={index}
+              count={data.properties.length}
+              disabled={disabled}
+              onMove={move}
+            />
+          }
+          disabled={busy}
+          removeDisabled={busy || !propertyIsRemovable(property, data)}
+          removeLabel={`Delete ${property.name}`}
+          onOpen={() => onSelect(property)}
+          onRemove={() => void onChange({ kind: 'remove', name: property.name })}
         >
-          <PropertyGrip
-            label={property.name}
-            index={index}
-            count={data.properties.length}
-            disabled={disabled}
-            onMove={move}
-          />
-          <button className="property-row-main" disabled={busy} onClick={() => onSelect(property)}>
-            <span className="property-type-icon" aria-hidden="true">
-              {property.type.includes('|')
-                ? '◇'
-                : property.type === 'boolean'
-                ? '◉'
-                : property.type === 'number'
-                ? '#'
-                : property.type === 'string'
-                ? 'T'
-                : '{}'}
+          {property.name}
+          {property.required && (
+            <span title="Required" className="property-required">
+              {' '}
+              *
             </span>
-            <span className="property-row-label">
-              <span>
-                {property.name}
-                {property.required && (
-                  <span title="Required" className="property-required">
-                    {' '}
-                    *
-                  </span>
-                )}
-              </span>
-              <small>{property.type}</small>
-            </span>
-          </button>
-          <button
-            className="property-remove"
-            aria-label={`Delete ${property.name}`}
-            title="Delete property"
-            disabled={disabled}
-            onClick={() => void onChange({ kind: 'remove', name: property.name })}
-          >
-            <TrashIcon size={12} />
-          </button>
-        </div>
+          )}
+        </ListFieldRow>
       ))}
     </div>
   );
 }
+
+function PropertyTypeIcon({ type }: { readonly type: string }) {
+  if (literalOptions(type)) {
+    return <ComponentPropertiesIcon size={14} />;
+  }
+  switch (type) {
+    case 'boolean':
+      return <FieldSwitchIcon size={14} />;
+    case 'number':
+      return <FieldNumberIcon size={14} />;
+    case 'string':
+      return 'T';
+    default:
+      return '{}';
+  }
+}
+
+function propertyIsEditable(property: ComponentProperty, data: ComponentProperties): boolean {
+  return property.editing ? property.editing.kind !== 'restricted' : !data.advanced;
+}
+
+function propertyIsRemovable(property: ComponentProperty, data: ComponentProperties): boolean {
+  return property.editing ? property.editing.kind === 'editable' : !data.advanced;
+}
diff --git a/src/panels/ListField.tsx b/src/panels/ListField.tsx
index 8f142326..e943ec71 100644
--- a/src/panels/ListField.tsx
+++ b/src/panels/ListField.tsx
@@ -2,7 +2,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import type { Item } from '../arrayValue';
 import { assert } from '../../shared/assert';
 import { LIMITS } from '../../shared/limits';
-import { DragIcon, PlusIcon, TrashIcon, CloseIcon } from '../ui/Icons.jsx';
+import { PlusIcon, CloseIcon } from '../ui/Icons.jsx';
+import ListFieldRow from '../ui/ListFieldRow';
 import { arrayItems, arrayText, blankLike, itemLabel, moveItem } from '../arrayValue.js';
 
 // A prop that takes a list, edited as a list.
@@ -176,9 +177,13 @@ export default function ListField(props: ListFieldProps) {
   return (
     <div className="list-field" onDragOver={(event) => event.preventDefault()} onDrop={state.drop}>
       {state.items.length === 0 && note ? <div className="list-field-empty">{note}</div> : null}
-      {state.items.map((item, index) => (
-        <ListRow key={index} item={item} index={index} state={state} />
-      ))}
+      {state.items.length > 0 && (
+        <div className="list-field-items" onScroll={() => closeListRowEditor(state)}>
+          {state.items.map((item, index) => (
+            <ListRow key={index} item={item} index={index} state={state} />
+          ))}
+        </div>
+      )}
       <button
         type="button"
         className="list-field-add"
@@ -335,51 +340,38 @@ function ListRow({
   const gap = drag.kind === 'dragging' ? drag.gap : null;
   const open = editor.kind === 'existing' && editor.index === index;
   return (
-    <div
-      className={`list-field-row ${dragging === index ? 'is-dragging' : ''} ${
-        gap === index ? 'is-before' : ''
-      } ${gap === index + 1 ? 'is-after' : ''} ${open ? 'is-open' : ''}`}
-      draggable={!state.disabled}
-      onDragStart={(event) => startListDrag(event, state, index)}
-      onDragEnd={() => setDrag({ kind: 'idle' })}
-      onDragOver={(event) => {
-        if (drag.kind === 'idle') {
-          return;
-        }
-        event.preventDefault();
-        const box = event.currentTarget.getBoundingClientRect();
-        const gap = event.clientY - box.top < box.height / 2 ? index : index + 1;
-        setDrag({ ...drag, gap });
-      }}
-      onDrop={(event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        drop();
+    <ListFieldRow
+      className={`${dragging === index ? 'is-dragging' : ''} ${gap === index ? 'is-before' : ''} ${
+        gap === index + 1 ? 'is-after' : ''
+      } ${open ? 'is-open' : ''}`}
+      rowProps={{
+        draggable: !state.disabled,
+        onDragStart: (event) => startListDrag(event, state, index),
+        onDragEnd: () => setDrag({ kind: 'idle' }),
+        onDragOver: (event) => {
+          if (drag.kind === 'idle') {
+            return;
+          }
+          event.preventDefault();
+          const box = event.currentTarget.getBoundingClientRect();
+          const gap = event.clientY - box.top < box.height / 2 ? index : index + 1;
+          setDrag({ ...drag, gap });
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          drop();
+        },
       }}
+      expanded={open}
+      disabled={state.disabled}
+      removeDisabled={state.disabled || state.items.length <= state.itemsMin}
+      removeLabel={`Remove ${itemLabel(item) || 'item'}`}
+      onOpen={(event) => toggleListRow(event, state, index, item)}
+      onRemove={() => remove(index)}
     >
-      <span className="list-field-grip" aria-hidden="true">
-        <DragIcon size={12} />
-      </span>
-      <button
-        type="button"
-        className="list-field-text"
-        aria-expanded={open}
-        disabled={state.disabled}
-        onClick={(event) => toggleListRow(event, state, index, item)}
-      >
-        {itemLabel(item) || <span className="list-field-blank">Empty</span>}
-      </button>
-      <button
-        type="button"
-        className="ghost list-field-remove"
-        title="Remove"
-        aria-label={`Remove ${itemLabel(item) || 'item'}`}
-        disabled={state.disabled || state.items.length <= state.itemsMin}
-        onClick={() => remove(index)}
-      >
-        <TrashIcon size={12} />
-      </button>
-    </div>
+      {itemLabel(item) || <span className="list-field-blank">Empty</span>}
+    </ListFieldRow>
   );
 }
 
@@ -438,13 +430,7 @@ function ListEditor({ state }: { readonly state: ListState }) {
               }
             )
           }
-          onClose={() => {
-            write(items, {
-              immediate: true,
-              change: { kind: 'edit', index: editor.index },
-            });
-            setEditor({ kind: 'closed' });
-          }}
+          onClose={() => closeListRowEditor(state)}
         />
       );
     }
@@ -466,3 +452,14 @@ function ListEditor({ state }: { readonly state: ListState }) {
     }
   }
 }
+
+function closeListRowEditor(state: ListState): void {
+  if (state.editor.kind === 'existing') {
+    // Commit before dismissing so scrolling cannot leave a popup detached from its row.
+    state.write(state.items, {
+      immediate: true,
+      change: { kind: 'edit', index: state.editor.index },
+    });
+    state.setEditor({ kind: 'closed' });
+  }
+}
diff --git a/src/panels/PalettePanel.tsx b/src/panels/PalettePanel.tsx
index 7e426735..0e28d9bb 100644
--- a/src/panels/PalettePanel.tsx
+++ b/src/panels/PalettePanel.tsx
@@ -9,6 +9,7 @@ import { rankInsertItems } from '../insertRank';
 import {
   componentPreviewURL,
   groupPaletteComponents,
+  parseComponentPreviewMessage,
   parseComponentUsage,
   prettyComponentName,
 } from '../paletteModel';
@@ -380,14 +381,53 @@ function PalettePopups({
         />
       )}
       {preview && props.devUrl && (
-        <div className="comp-preview" style={{ left: preview.left, top: preview.top }}>
-          <div className="comp-preview-title">{prettyComponentName(preview.component.name)}</div>
-          <iframe
-            src={componentPreviewURL(props.devUrl, preview.component, props.trailingSlash)}
-            title={`${preview.component.name} preview`}
-          />
-        </div>
+        <ComponentPreviewPopup
+          key={preview.component.path}
+          preview={preview}
+          devURL={props.devUrl}
+          trailingSlash={props.trailingSlash}
+        />
       )}
     </>
   );
 }
+
+function ComponentPreviewPopup({
+  preview,
+  devURL,
+  trailingSlash,
+}: {
+  readonly preview: NonNullable<ReturnType<typeof useComponentPreview>['value']>;
+  readonly devURL: string;
+  readonly trailingSlash: TrailingSlash;
+}) {
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const receive = (event: MessageEvent<unknown>): void => {
+      if (event.source !== frameRef.current?.contentWindow) {
+        return;
+      }
+      const message = parseComponentPreviewMessage(event.data);
+      if (message) {
+        setReady(message.status === 'ready');
+      }
+    };
+    window.addEventListener('message', receive);
+    return () => window.removeEventListener('message', receive);
+  }, []);
+  return (
+    <div
+      className="comp-preview"
+      style={{ left: preview.left, top: preview.top, visibility: ready ? 'visible' : 'hidden' }}
+      aria-hidden={!ready}
+    >
+      <div className="comp-preview-title">{prettyComponentName(preview.component.name)}</div>
+      <iframe
+        ref={frameRef}
+        src={componentPreviewURL(devURL, preview.component, trailingSlash)}
+        title={`${preview.component.name} preview`}
+      />
+    </div>
+  );
+}
diff --git a/src/panels/PreviewPane.tsx b/src/panels/PreviewPane.tsx
index 0a0c1a7f..808c0022 100644
--- a/src/panels/PreviewPane.tsx
+++ b/src/panels/PreviewPane.tsx
@@ -8,6 +8,8 @@ import { DevOffline } from './DevOffline';
 import { PreviewOverlays } from './PreviewOverlays';
 import { PreviewToolbar, deviceForWidth, deviceWidth } from './PreviewToolbar';
 import { usePreviewRuntime } from './previewRuntime';
+import { PREVIEW_WIDTH_LIMITS, previewViewport } from './previewViewport';
+import './previewViewport.css';
 
 export { deviceForWidth } from './PreviewToolbar';
 
@@ -60,6 +62,16 @@ export default function PreviewPane(props: PreviewPaneProps) {
         {...(props.onCrumb === undefined ? {} : { onCrumb: props.onCrumb })}
         activeDevice={sizing.activeDevice}
         onDevice={props.onDevice}
+        {...(props.device === 'canvas'
+          ? {}
+          : {
+              sizing: {
+                width: sizing.viewport.width,
+                scale: sizing.viewport.scale,
+                onWidth: sizing.setWidth,
+                onFit: () => props.onDevice('desktop'),
+              },
+            })}
       />
       <div className="preview-frame-wrap" ref={sizing.wrapRef}>
         <PreviewContent props={props} url={url} runtime={runtime} sizing={sizing} />
@@ -107,7 +119,12 @@ function DesignPreview({
     <div
       ref={sizing.frameRef}
       className={`frame-sized ${width ? '' : 'full'} ${sizing.resizing ? 'resizing' : ''}`}
-      style={frameStyle(width, sizing.wrapWidth, sizing.customHeight)}
+      style={{
+        width: sizing.viewport.width,
+        height: sizing.viewport.height,
+        bottom: 'auto',
+        transform: `translateX(-50%) scale(${sizing.viewport.scale})`,
+      }}
     >
       <div className="frame-clip">
         <iframe
@@ -179,11 +196,11 @@ function usePreviewSizing(device: PreviewDevice, onDevice: (device: PreviewDevic
   const startDrag = usePointerDrag();
   const wrapRef = useRef<HTMLDivElement>(null);
   const frameRef = useRef<HTMLDivElement>(null);
-  const [wrapWidth, setWrapWidth] = useState<number | null>(null);
+  const [available, setAvailable] = useState({ width: 0, height: 0 });
   const [customWidth, setCustomWidth] = useState<number | null>(null);
   const [customHeight, setCustomHeight] = useState<number | null>(null);
   const [resizing, setResizing] = useState(false);
-  useMeasuredWidth(wrapRef, setWrapWidth);
+  useMeasuredSize(wrapRef, setAvailable);
   useDeviceShortcuts(onDevice);
   useEffect(() => {
     if (device !== 'custom') {
@@ -194,8 +211,12 @@ function usePreviewSizing(device: PreviewDevice, onDevice: (device: PreviewDevic
     }
   }, [device]);
   const width = customWidth ?? deviceWidth(device);
-  const shownWidth = Math.min(width ?? Infinity, wrapWidth ?? Infinity);
-  const activeDevice = device === 'canvas' ? 'canvas' : (deviceForWidth(shownWidth) ?? device);
+  const viewport = previewViewport(width, available, customHeight);
+  const activeDevice = device === 'canvas' ? 'canvas' : deviceForWidth(viewport.width) ?? device;
+  const setWidth = (next: number): void => {
+    setCustomWidth(next);
+    onDevice('custom');
+  };
   const startResize = useResizeHandler({
     wrapRef,
     frameRef,
@@ -204,11 +225,14 @@ function usePreviewSizing(device: PreviewDevice, onDevice: (device: PreviewDevic
     setCustomWidth,
     setCustomHeight,
     setResizing,
+    scale: viewport.scale,
   });
   return {
     wrapRef,
     frameRef,
-    wrapWidth,
+    wrapWidth: available.width,
+    viewport,
+    setWidth,
     customHeight,
     resizing,
     width,
@@ -217,21 +241,22 @@ function usePreviewSizing(device: PreviewDevice, onDevice: (device: PreviewDevic
   };
 }
 
-function useMeasuredWidth(
+function useMeasuredSize(
   ref: React.RefObject<HTMLDivElement>,
-  setWidth: React.Dispatch<React.SetStateAction<number | null>>,
+  setSize: React.Dispatch<React.SetStateAction<{ width: number; height: number }>>,
 ): void {
   useLayoutEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
     }
-    const measure = (): void => setWidth(element.clientWidth);
+    const measure = (): void =>
+      setSize({ width: element.clientWidth, height: element.clientHeight });
     measure();
     const observer = new ResizeObserver(measure);
     observer.observe(element);
     return () => observer.disconnect();
-  }, [ref, setWidth]);
+  }, [ref, setSize]);
 }
 
 function useDeviceShortcuts(onDevice: (device: PreviewDevice) => void): void {
@@ -275,6 +300,7 @@ function deviceFromKey(key: string): PreviewDevice | undefined {
 }
 
 interface ResizeContext {
+  readonly scale: number;
   readonly wrapRef: React.RefObject<HTMLDivElement>;
   readonly frameRef: React.RefObject<HTMLDivElement>;
   readonly startDrag: ReturnType<typeof usePointerDrag>;
@@ -329,28 +355,17 @@ function resizeFrame(
   context: ResizeContext,
 ): void {
   if (edge === 's') {
-    const height = Math.round(start.height + event.clientY - start.y);
-    context.setCustomHeight(clamp(height, 160, Math.max(160, wrap.clientHeight - 32)));
+    const height = Math.round(start.height + (event.clientY - start.y) / context.scale);
+    const maximum = Math.max(160, (wrap.clientHeight - 32) / context.scale);
+    context.setCustomHeight(clamp(height, 160, maximum));
     return;
   }
   const direction = edge === 'e' ? 2 : -2;
-  const width = Math.round(start.width + direction * (event.clientX - start.x));
-  context.setCustomWidth(clamp(width, 280, Math.max(280, wrap.clientWidth - 24)));
+  const width = Math.round(start.width + (direction * (event.clientX - start.x)) / context.scale);
+  context.setCustomWidth(clamp(width, PREVIEW_WIDTH_LIMITS.minimum, PREVIEW_WIDTH_LIMITS.maximum));
   context.onDevice('custom');
 }
 
-function frameStyle(
-  width: number | null | undefined,
-  wrapWidth: number | null,
-  customHeight: number | null,
-): React.CSSProperties {
-  return {
-    width: width ?? wrapWidth ?? '100%',
-    maxWidth: width ? 'calc(100% - 24px)' : '100%',
-    ...(customHeight === null ? {} : { height: customHeight, bottom: 'auto' }),
-  };
-}
-
 function clamp(value: number, minimum: number, maximum: number): number {
   return Math.min(Math.max(value, minimum), maximum);
 }
diff --git a/src/panels/PreviewSizeControls.tsx b/src/panels/PreviewSizeControls.tsx
new file mode 100644
index 00000000..963b42ba
--- /dev/null
+++ b/src/panels/PreviewSizeControls.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { PREVIEW_WIDTH_LIMITS, parsePreviewWidth } from './previewViewport';
+
+export interface PreviewSizeControlsProps {
+  readonly width: number;
+  readonly scale: number;
+  readonly onWidth: (width: number) => void;
+  readonly onFit: () => void;
+}
+
+export function PreviewSizeControls({ width, scale, onWidth, onFit }: PreviewSizeControlsProps) {
+  const [draft, setDraft] = useState(String(Math.round(width)));
+  useEffect(() => setDraft(String(Math.round(width))), [width]);
+  const commit = (): void => {
+    const value = parsePreviewWidth(draft);
+    if (value !== undefined) {
+      onWidth(value);
+    } else {
+      setDraft(String(Math.round(width)));
+    }
+  };
+  return (
+    <div className="preview-size-controls">
+      <label className="preview-width-field" title="Canvas width in pixels">
+        <input
+          type="text"
+          inputMode="numeric"
+          aria-label="Canvas width"
+          maxLength={4}
+          value={draft}
+          onChange={(event) => setDraft(event.currentTarget.value)}
+          onFocus={(event) => event.currentTarget.select()}
+          onBlur={commit}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.currentTarget.blur();
+            } else if (event.key === 'Escape') {
+              setDraft(String(Math.round(width)));
+            }
+          }}
+          aria-description={`Enter ${PREVIEW_WIDTH_LIMITS.minimum}–${PREVIEW_WIDTH_LIMITS.maximum}px`}
+        />
+        <span>px</span>
+      </label>
+      <output aria-label="Canvas scale" title="Preview scaled to fit the available space">
+        {Math.round(scale * 100)}%
+      </output>
+      <button type="button" title="Reset canvas to available width" onClick={onFit}>
+        Fit
+      </button>
+    </div>
+  );
+}
diff --git a/src/panels/PreviewToolbar.tsx b/src/panels/PreviewToolbar.tsx
index 6ca7ab5d..144a5ca0 100644
--- a/src/panels/PreviewToolbar.tsx
+++ b/src/panels/PreviewToolbar.tsx
@@ -1,6 +1,8 @@
 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 { PreviewSizeControls } from './PreviewSizeControls';
+import type { PreviewSizeControlsProps } from './PreviewSizeControls';
 
 export type PreviewDevice = 'desktop' | 'tablet' | 'phone' | 'canvas' | 'custom';
 type FixedDevice = Exclude<PreviewDevice, 'custom'>;
@@ -53,11 +55,13 @@ export function PreviewToolbar({
   onCrumb,
   activeDevice,
   onDevice,
+  sizing,
 }: {
   readonly crumbs: readonly PreviewCrumb[];
   readonly onCrumb?: (id: string | null) => void;
   readonly activeDevice: PreviewDevice;
   readonly onDevice: (device: PreviewDevice) => void;
+  readonly sizing?: PreviewSizeControlsProps;
 }) {
   const shownCrumbs = useFoldedCrumbs(crumbs);
   const buttonRefs = useRef<Partial<Record<FixedDevice, HTMLButtonElement | null>>>({});
@@ -92,6 +96,7 @@ export function PreviewToolbar({
           </button>
         ))}
       </div>
+      {sizing && <PreviewSizeControls {...sizing} />}
     </div>
   );
 }
diff --git a/src/panels/PropertyDeclarationInfo.tsx b/src/panels/PropertyDeclarationInfo.tsx
new file mode 100644
index 00000000..438feffd
--- /dev/null
+++ b/src/panels/PropertyDeclarationInfo.tsx
@@ -0,0 +1,43 @@
+import type { ComponentProperty } from '../../shared/component-properties';
+import { HelpCircleIcon } from '../ui/Icons';
+
+// Declaration locations are metadata, not runtime value bindings.
+export function PropertyDeclarationInfo({ property }: { readonly property: ComponentProperty }) {
+  const origin = property.origin;
+  const sources = origin?.declarations ?? [];
+  const details = sources.map(
+    (source) => `${source.label} (line ${source.line}): ${source.expression}`
+  );
+  if (origin?.defaultValue) {
+    details.push(`Default (line ${origin.defaultValue.line}): ${origin.defaultValue.expression}`);
+  }
+  if (details.length === 0) {
+    return null;
+  }
+  return (
+    <button
+      type="button"
+      className="property-declaration-info"
+      aria-label="Declaration details"
+      title={details.join('\n')}
+    >
+      <HelpCircleIcon size={12} />
+    </button>
+  );
+}
+
+export function PropertyConditions({ property }: { readonly property: ComponentProperty }) {
+  if (!property.conditions?.length) {
+    return null;
+  }
+  return (
+    <div className="property-conditions">
+      <strong>Variant rules</strong>
+      <ul>
+        {property.conditions.map((condition, index) => (
+          <li key={index}>{condition}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/panels/PropertyDefault.tsx b/src/panels/PropertyDefault.tsx
index d4707040..7da4eb0a 100644
--- a/src/panels/PropertyDefault.tsx
+++ b/src/panels/PropertyDefault.tsx
@@ -2,56 +2,55 @@ import { useState } from 'react';
 import type { ComponentProperty } from '../../shared/component-properties';
 import { PROPERTY_LIMITS } from '../../shared/component-properties';
 import { literalOptions } from '../propertyOptions';
+import Dropdown from '../ui/Dropdown';
+import { BracesIcon } from '../ui/Icons';
+import { ExpressionBindingField } from './propBindings';
 
 interface DefaultProps {
   readonly property: ComponentProperty;
+  readonly frontmatter: string;
   readonly onChange: (value: string) => void;
 }
-export function PropertyDefault({ property, onChange }: DefaultProps) {
+export function PropertyDefault({ property, frontmatter, onChange }: DefaultProps) {
   const simple =
     ['string', 'number', 'boolean'].includes(property.type) ||
     literalOptions(property.type) !== undefined;
   const [mode, setMode] = useState<'value' | 'expression'>(
     simple && isLiteralDefault(property) ? 'value' : 'expression'
   );
+  const expression = mode === 'expression';
+  const action = expression ? 'Use the default value control' : 'Write a default expression';
   return (
-    <div className="property-default">
+    <div className="property-default" role="group" aria-label="Default value">
       <div className="property-default-title">
         <span>Default value</span>
         {simple && (
           <button
-            className="ghost"
-            title="Toggle expression editor"
+            type="button"
+            className={`prop-expr-toggle${expression ? ' on' : ''}`}
+            title={action}
+            aria-label={action}
+            aria-pressed={expression}
             onClick={() => setMode((current) => (current === 'value' ? 'expression' : 'value'))}
           >
-            {mode === 'value' ? '{ }' : 'Value'}
+            <BracesIcon size={12} />
           </button>
         )}
       </div>
       {mode === 'value' && simple ? (
-        <DefaultControl property={property} onChange={onChange} />
+        <DefaultControl property={property} frontmatter={frontmatter} onChange={onChange} />
       ) : (
-        <textarea
-          aria-label="Default expression"
-          className="property-code"
+        <ExpressionBindingField
           value={property.defaultValue}
-          spellCheck={false}
-          rows={2}
-          maxLength={PROPERTY_LIMITS.textCharsMax}
+          bindCtx={{ frontmatter }}
           placeholder={'"Hello", 42, true, [], {…}'}
-          onChange={(event) => onChange(event.target.value)}
+          onChange={(value) => {
+            if (value.length <= PROPERTY_LIMITS.textCharsMax) {
+              onChange(value);
+            }
+          }}
         />
       )}
-      <div className="property-default-title">
-        <small className="property-help">
-          {property.defaultValue
-            ? 'Used when a value is omitted or undefined.'
-            : 'No default value.'}
-        </small>
-        <button className="ghost" disabled={!property.defaultValue} onClick={() => onChange('')}>
-          Clear
-        </button>
-      </div>
     </div>
   );
 }
@@ -60,18 +59,20 @@ function DefaultControl({ property, onChange }: DefaultProps) {
   if (options || property.type === 'boolean') {
     const choices = [...new Set(options ?? ['true', 'false'])];
     return (
-      <select
-        aria-label="Default option"
+      <Dropdown
         value={defaultChoice(choices, property.defaultValue)}
-        onChange={(event) => onChange(event.target.value)}
-      >
-        <option value="">No default</option>
-        {choices.map((choice) => (
-          <option key={choice} value={choice}>
-            {propertyDefaultText(choice) ?? choice}
-          </option>
-        ))}
-      </select>
+        options={[
+          { value: '', label: 'No default' },
+          ...choices.map((choice) => ({
+            value: choice,
+            label: propertyDefaultText(choice) ?? choice,
+          })),
+        ]}
+        onChange={onChange}
+        livePreview={false}
+        searchable
+        searchPlaceholder="Search defaults…"
+      />
     );
   }
   if (property.type === 'number') {
diff --git a/src/panels/PropertyEditor.tsx b/src/panels/PropertyEditor.tsx
index aacdbba7..f4d4fe55 100644
--- a/src/panels/PropertyEditor.tsx
+++ b/src/panels/PropertyEditor.tsx
@@ -1,25 +1,83 @@
+import PropertyReadOnlyFields from './PropertyReadOnlyFields';
+import { PropertyConditions, PropertyDeclarationInfo } from './PropertyDeclarationInfo';
 import { TrashIcon } from '../ui/Icons';
 import { PropertyOptions } from './PropertyOptions';
-import type { OptionRename } from './PropertyOptions';
+import type { PropertyOptionChange } from './PropertyOptions';
 import { PropertyType } from './PropertyType';
 import { PropertyDefault, propertyDefaultText } from './PropertyDefault';
-export { literalOptions } from '../propertyOptions';
-import { useState } from 'react';
-import type { ComponentProperty, PropertyChange } from '../../shared/component-properties';
+import { literalOptions } from '../propertyOptions';
+export { literalOptions };
+import { useRef, useState } from 'react';
+import useDismiss from '../ui/useDismiss';
+import { assert } from '../../shared/assert';
+import type {
+  ComponentProperty,
+  PropertyChange,
+  PropertyOptionRename,
+} from '../../shared/component-properties';
 import { PROPERTY_LIMITS } from '../../shared/component-properties';
 
 interface PropertyEditorProps {
   readonly property: ComponentProperty;
   readonly originalName: string;
-  readonly disabled: boolean;
+  readonly frontmatter: string;
+  readonly access: 'editable' | 'readonly' | 'saving';
   readonly onClose: () => void;
   readonly onSave: (change: PropertyChange) => Promise<void>;
+  readonly onCommit: (change: PropertyChange) => Promise<boolean>;
 }
 export function PropertyEditor(props: PropertyEditorProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  useDismiss(editorRef, props.access !== 'saving', props.onClose);
+  const draft = usePropertyEditorDraft(props);
+  return (
+    <div className="property-editor" ref={editorRef}>
+      <header>
+        <div className="property-editor-title">
+          <strong>{props.originalName ? 'Property settings' : 'New property'}</strong>
+          <PropertyDeclarationInfo property={props.property} />
+        </div>
+        <button
+          aria-label="Close property settings"
+          disabled={props.access === 'saving'}
+          onClick={props.onClose}
+        >
+          ×
+        </button>
+      </header>
+      <PropertyConditions property={props.property} />
+      {props.property.editing?.kind === 'override' && (
+        <p className="property-help">{props.property.editing.reason}</p>
+      )}
+      {props.access === 'readonly' ? (
+        <PropertyReadOnlyFields property={draft.property} />
+      ) : (
+        <PropertyEditorFields
+          property={draft.property}
+          originalName={props.originalName}
+          frontmatter={props.frontmatter}
+          access={props.access}
+          onSave={props.onSave}
+          update={draft.update}
+          error={draft.error}
+          submit={draft.submit}
+          changeOptions={draft.changeOptions}
+        />
+      )}
+    </div>
+  );
+}
+
+function usePropertyEditorDraft(props: PropertyEditorProps) {
   const [property, setProperty] = useState(props.property);
+  const [optionRenames, setOptionRenames] = useState<readonly PropertyOptionRename[]>([]);
   const [error, setError] = useState('');
   const update = <Key extends keyof ComponentProperty>(key: Key, value: ComponentProperty[Key]) => {
     setProperty((previous) => ({ ...previous, [key]: value }));
+    if (key === 'type') {
+      // Free-form type edits have no reliable old-to-new option identity.
+      setOptionRenames([]);
+    }
     setError('');
   };
   const submit = (): void => {
@@ -27,69 +85,128 @@ export function PropertyEditor(props: PropertyEditorProps) {
       setError('Use a name such as title, imageUrl, or isVisible.');
       return;
     }
-    void props.onSave({ kind: 'save', originalName: props.originalName, property });
+    const change: PropertyChange =
+      optionRenames.length > 0
+        ? {
+            kind: 'save',
+            originalName: props.originalName,
+            property,
+            optionRenames,
+          }
+        : { kind: 'save', originalName: props.originalName, property };
+    void props.onSave(change);
   };
-  return (
-    <div className="property-editor">
-      <header>
-        <strong>{props.originalName ? 'Property settings' : 'New property'}</strong>
-        <button
-          aria-label="Close property settings"
-          disabled={props.disabled}
-          onClick={props.onClose}
-        >
-          ×
-        </button>
-      </header>
-      <fieldset disabled={props.disabled}>
-        <PropertyIdentity property={property} originalName={props.originalName} update={update} />
-        <PropertyType type={property.type} onChange={(type) => update('type', type)} />
-        <PropertyOptions
-          type={property.type}
-          disabled={props.disabled}
-          onChange={(type, rename) =>
-            setProperty((previous) => changePropertyOptions(previous, type, rename))
+  const changeOptions = (change: PropertyOptionChange): void => {
+    const previous = property;
+    const next = changePropertyOptions(
+      previous,
+      change.type,
+      change.kind === 'draft' ? change.rename : undefined
+    );
+    const nextRenames = changePropertyOptionRenames(optionRenames, change);
+    setProperty(next);
+    setOptionRenames(nextRenames);
+    setError('');
+    if (change.kind === 'reorder' && props.originalName && nextRenames.length === 0) {
+      void props
+        .onCommit({
+          kind: 'options',
+          name: props.originalName,
+          type: change.type,
+        })
+        .then((saved) => {
+          if (!saved) {
+            setProperty((current) =>
+              current.type === change.type ? { ...current, type: previous.type } : current
+            );
           }
+        });
+    }
+  };
+  return { property, error, update, submit, changeOptions };
+}
+
+interface PropertyEditorFieldsProps extends PropertyControls {
+  readonly originalName: string;
+  readonly frontmatter: string;
+  readonly access: 'editable' | 'saving';
+  readonly onSave: PropertyEditorProps['onSave'];
+  readonly error: string;
+  readonly submit: () => void;
+  readonly changeOptions: (change: PropertyOptionChange) => void;
+}
+function PropertyEditorFields({
+  property,
+  originalName,
+  frontmatter,
+  access,
+  onSave,
+  update,
+  error,
+  submit,
+  changeOptions,
+}: PropertyEditorFieldsProps) {
+  const inherited = property.editing?.kind === 'override';
+  return (
+    <fieldset disabled={access === 'saving'}>
+      <PropertyIdentity
+        property={property}
+        originalName={originalName}
+        inherited={inherited}
+        update={update}
+      />
+      <PropertyType type={property.type} onChange={(type) => update('type', type)} />
+      <PropertyOptions
+        type={property.type}
+        disabled={access === 'saving'}
+        onChange={changeOptions}
+      />
+      <PropertyFlags property={property} update={update} />
+      <PropertyDefault
+        key={property.type}
+        property={property}
+        frontmatter={frontmatter}
+        onChange={(value) => update('defaultValue', value)}
+      />
+      <label>
+        Tooltip
+        <textarea
+          value={property.description}
+          rows={5}
+          maxLength={PROPERTY_LIMITS.textCharsMax}
+          placeholder="Describe how to use this property…"
+          onChange={(event) => update('description', event.target.value)}
         />
-        <PropertyFlags property={property} update={update} />
-        <PropertyDefault
-          key={property.type}
-          property={property}
-          onChange={(value) => update('defaultValue', value)}
-        />
-        <label>
-          Tooltip
-          <textarea
-            value={property.description}
-            rows={3}
-            maxLength={PROPERTY_LIMITS.textCharsMax}
-            placeholder="Describe how to use this property…"
-            onChange={(event) => update('description', event.target.value)}
-          />
-        </label>
-        {error && (
-          <p role="alert" className="property-error">
-            {error}
-          </p>
-        )}
-        <PropertyActions originalName={props.originalName} onSave={props.onSave} submit={submit} />
-      </fieldset>
-    </div>
+      </label>
+      {error && (
+        <p role="alert" className="property-error">
+          {error}
+        </p>
+      )}
+      <PropertyActions
+        originalName={originalName}
+        removable={!inherited}
+        onSave={onSave}
+        submit={submit}
+      />
+    </fieldset>
   );
 }
 
 function PropertyActions({
   originalName,
+  removable,
   onSave,
   submit,
 }: {
   readonly originalName: string;
+  readonly removable: boolean;
   readonly onSave: PropertyEditorProps['onSave'];
   readonly submit: () => void;
 }) {
   return (
     <div className="property-actions">
-      {originalName && (
+      {originalName && removable && (
         <button
           className="danger"
           aria-label={`Delete ${originalName}`}
@@ -116,9 +233,11 @@ interface PropertyControls {
 function PropertyIdentity({
   property,
   originalName,
+  inherited,
   update,
 }: PropertyControls & {
   readonly originalName: string;
+  readonly inherited: boolean;
 }) {
   return (
     <>
@@ -127,7 +246,8 @@ function PropertyIdentity({
         <input
           value={property.name}
           maxLength={PROPERTY_LIMITS.nameCharsMax}
-          autoFocus
+          autoFocus={!inherited}
+          disabled={inherited}
           onChange={(event) => update('name', event.target.value)}
         />
       </label>
@@ -165,7 +285,7 @@ function PropertyFlags({ property, update }: PropertyControls) {
 function changePropertyOptions(
   property: ComponentProperty,
   type: string,
-  rename?: OptionRename
+  rename?: PropertyOptionRename
 ): ComponentProperty {
   if (rename && property.defaultValue.trim()) {
     const current = propertyDefaultText(property.defaultValue);
@@ -178,3 +298,24 @@ function changePropertyOptions(
   }
   return { ...property, type };
 }
+
+function changePropertyOptionRenames(
+  current: readonly PropertyOptionRename[],
+  change: PropertyOptionChange
+): readonly PropertyOptionRename[] {
+  const options = literalOptions(change.type);
+  assert(options !== undefined, 'Edited property options remain a literal union');
+  const retained = current.filter((rename) => options.includes(rename.to));
+  const rename = change.kind === 'draft' ? change.rename : undefined;
+  if (!rename) {
+    return retained;
+  }
+  const previous = retained.find((item) => item.to === rename.from);
+  const from = previous?.from ?? rename.from;
+  const withoutPrevious = retained.filter((rename) => rename !== previous);
+  if (from === rename.to) {
+    return withoutPrevious;
+  }
+  assert(withoutPrevious.length < PROPERTY_LIMITS.fieldsMax, 'Option rename count is bounded');
+  return [...withoutPrevious, { from, to: rename.to }];
+}
diff --git a/src/panels/PropertyOptions.tsx b/src/panels/PropertyOptions.tsx
index d26e4140..d6f3f813 100644
--- a/src/panels/PropertyOptions.tsx
+++ b/src/panels/PropertyOptions.tsx
@@ -1,19 +1,23 @@
 import { useRef } from 'react';
 import { assert } from '../../shared/assert';
 import { PROPERTY_LIMITS } from '../../shared/component-properties';
+import type { PropertyOptionRename } from '../../shared/component-properties';
 import { arrayItems, arrayText, moveItem } from '../arrayValue';
 import { literalOptions } from '../propertyOptions';
 import ListField from './ListField';
 import type { ListFieldChange } from './ListField';
 
-export interface OptionRename {
-  readonly from: string;
-  readonly to: string;
-}
+export type PropertyOptionChange =
+  | {
+      readonly kind: 'draft';
+      readonly type: string;
+      readonly rename: PropertyOptionRename | undefined;
+    }
+  | { readonly kind: 'reorder'; readonly type: string };
 interface PropertyOptionsProps {
   readonly type: string;
   readonly disabled: boolean;
-  readonly onChange: (type: string, rename?: OptionRename) => void;
+  readonly onChange: (change: PropertyOptionChange) => void;
 }
 
 export function PropertyOptions({ type, disabled, onChange }: PropertyOptionsProps) {
@@ -37,7 +41,12 @@ export function PropertyOptions({ type, disabled, onChange }: PropertyOptionsPro
     if (immediate) {
       scalarKind.current = undefined;
     }
-    onChange(next.options.join(' | '), next.rename);
+    const nextType = next.options.join(' | ');
+    onChange(
+      change.kind === 'move'
+        ? { kind: 'reorder', type: nextType }
+        : { kind: 'draft', type: nextType, rename: next.rename }
+    );
   };
   return (
     <div className="property-options props-field">
@@ -64,7 +73,10 @@ function changePropertyOptionList(
   value: string,
   change: ListFieldChange,
   scalarKind: 'text' | 'literal'
-): { readonly options: readonly string[]; readonly rename?: OptionRename } {
+): {
+  readonly options: readonly string[];
+  readonly rename?: PropertyOptionRename;
+} {
   assert(options.length <= PROPERTY_LIMITS.fieldsMax, 'Option count is bounded');
   switch (change.kind) {
     case 'move':
diff --git a/src/panels/PropertyReadOnlyFields.tsx b/src/panels/PropertyReadOnlyFields.tsx
new file mode 100644
index 00000000..98090839
--- /dev/null
+++ b/src/panels/PropertyReadOnlyFields.tsx
@@ -0,0 +1,46 @@
+import type { ComponentProperty } from '../../shared/component-properties';
+
+export default function PropertyReadOnlyFields({
+  property,
+}: {
+  readonly property: ComponentProperty;
+}) {
+  const reason =
+    property.editing?.kind === 'restricted'
+      ? property.editing.reason
+      : 'Edit this prop’s declaration in source.';
+  return (
+    <div className="property-readonly-fields">
+      <p className="property-help">{reason}</p>
+      <ReadOnlyField label="Name" value={property.name} />
+      <ReadOnlyField label="Type expression" value={property.type} />
+      <div className="property-flags">
+        <label>
+          <input type="checkbox" checked={property.required} disabled />
+          Required
+        </label>
+        <label>
+          <input type="checkbox" checked={property.readonly} disabled />
+          Readonly
+        </label>
+      </div>
+      <ReadOnlyField label="Default value" value={property.defaultValue} />
+      <ReadOnlyField label="Tooltip" value={property.description} />
+    </div>
+  );
+}
+
+function ReadOnlyField({ label, value }: { readonly label: string; readonly value: string }) {
+  return (
+    <label>
+      {label}
+      <textarea
+        readOnly
+        value={value}
+        rows={label === 'Tooltip' ? 3 : 1}
+        aria-label={label}
+        placeholder="Not specified"
+      />
+    </label>
+  );
+}
diff --git a/src/panels/PropertyReorder.tsx b/src/panels/PropertyReorder.tsx
index 53e347cc..21a5ddde 100644
--- a/src/panels/PropertyReorder.tsx
+++ b/src/panels/PropertyReorder.tsx
@@ -42,7 +42,7 @@ export function PropertyGrip({
   return (
     <button
       type="button"
-      className="property-grip"
+      className="list-field-grip"
       data-drag-through
       aria-label={`Reorder ${label}`}
       title="Drag to reorder (or use arrow keys)"
diff --git a/src/panels/PropertyType.tsx b/src/panels/PropertyType.tsx
index db3a8d2d..ab379608 100644
--- a/src/panels/PropertyType.tsx
+++ b/src/panels/PropertyType.tsx
@@ -3,30 +3,77 @@ import { PROPERTY_LIMITS } from '../../shared/component-properties';
 import { literalOptions } from '../propertyOptions';
 import Dropdown from '../ui/Dropdown';
 import type { DropdownOption } from '../ui/Dropdown';
-import { BracesIcon } from '../ui/Icons';
+import {
+  BracesIcon,
+  CalendarIcon,
+  CloseIcon,
+  CodeIcon,
+  ComponentPropertiesIcon,
+  ElementListDefaultIcon,
+  ElementSlotIcon,
+  FieldNumberIcon,
+  FieldSwitchIcon,
+  HelpCircleIcon,
+  HistoryIcon,
+  MoreIcon,
+  PointerEventsNoneIcon,
+  SparkleIcon,
+  TagIcon,
+  TextIcon,
+} from '../ui/Icons';
 
 const UNION_TYPE = '"Option 1" | "Option 2"';
 // These are authored type expressions, not types used to bypass the app's own checking.
 const TYPE_CHOICES: readonly DropdownOption<string>[] = [
-  { value: 'string', label: 'string', hint: 'Text / link' },
-  { value: 'number', label: 'number' },
-  { value: 'boolean', label: 'boolean', hint: 'Switch' },
-  { value: UNION_TYPE, label: 'Options (union)', hint: 'Literal choices' },
-  { value: 'readonly string[]', label: 'Array', hint: 'readonly string[]' },
-  { value: 'readonly [string, number]', label: 'Tuple', hint: 'readonly [string, number]' },
-  { value: 'Record<string, unknown>', label: 'Record', hint: 'Object / attributes' },
-  { value: 'object', label: 'object' },
-  { value: '(value: string) => void', label: 'Function', hint: 'Callback' },
-  { value: 'Date', label: 'Date' },
-  { value: 'Promise<string>', label: 'Promise', hint: 'Promise<string>' },
-  { value: 'bigint', label: 'bigint' },
-  { value: 'symbol', label: 'symbol' },
-  { value: 'null', label: 'null' },
-  { value: 'undefined', label: 'undefined' },
-  { value: 'unknown', label: 'unknown' },
-  { value: 'never', label: 'never' },
-  { value: 'void', label: 'void' },
-  { value: 'any', label: 'any', hint: 'Unchecked value' },
+  { value: 'string', label: 'string', hint: 'Text / link', icon: <TextIcon size={14} /> },
+  { value: 'number', label: 'number', icon: <FieldNumberIcon size={14} /> },
+  { value: 'boolean', label: 'boolean', hint: 'Switch', icon: <FieldSwitchIcon size={14} /> },
+  {
+    value: UNION_TYPE,
+    label: 'Options (union)',
+    hint: 'Literal choices',
+    icon: <ComponentPropertiesIcon size={14} />,
+  },
+  {
+    value: 'readonly string[]',
+    label: 'Array',
+    hint: 'readonly string[]',
+    icon: <ElementListDefaultIcon size={14} />,
+  },
+  {
+    value: 'readonly [string, number]',
+    label: 'Tuple',
+    hint: 'readonly [string, number]',
+    icon: <ElementListDefaultIcon size={14} />,
+  },
+  {
+    value: 'Record<string, unknown>',
+    label: 'Record',
+    hint: 'Object / attributes',
+    icon: <BracesIcon size={14} />,
+  },
+  { value: 'object', label: 'object', icon: <BracesIcon size={14} /> },
+  {
+    value: '(value: string) => void',
+    label: 'Function',
+    hint: 'Callback',
+    icon: <CodeIcon size={14} />,
+  },
+  { value: 'Date', label: 'Date', icon: <CalendarIcon size={14} /> },
+  {
+    value: 'Promise<string>',
+    label: 'Promise',
+    hint: 'Promise<string>',
+    icon: <HistoryIcon size={14} />,
+  },
+  { value: 'bigint', label: 'bigint', icon: <FieldNumberIcon size={14} /> },
+  { value: 'symbol', label: 'symbol', icon: <TagIcon size={14} /> },
+  { value: 'null', label: 'null', icon: <CloseIcon size={14} /> },
+  { value: 'undefined', label: 'undefined', icon: <MoreIcon size={14} /> },
+  { value: 'unknown', label: 'unknown', icon: <HelpCircleIcon size={14} /> },
+  { value: 'never', label: 'never', icon: <PointerEventsNoneIcon size={14} /> },
+  { value: 'void', label: 'void', icon: <ElementSlotIcon size={14} /> },
+  { value: 'any', label: 'any', hint: 'Unchecked value', icon: <SparkleIcon size={14} /> },
 ];
 
 export function PropertyType({
@@ -89,5 +136,13 @@ function propertyTypeChoices(type: string): readonly DropdownOption<string>[] {
   );
   return choices.some((option) => option.value === type)
     ? choices
-    : [{ value: type, label: type || 'Choose a type', hint: 'Custom type' }, ...choices];
+    : [
+        {
+          value: type,
+          label: type || 'Choose a type',
+          hint: 'Custom type',
+          icon: <CodeIcon size={14} />,
+        },
+        ...choices,
+      ];
 }
diff --git a/src/panels/StylePanel.tsx b/src/panels/StylePanel.tsx
index 288a9d11..3c79334f 100644
--- a/src/panels/StylePanel.tsx
+++ b/src/panels/StylePanel.tsx
@@ -25,6 +25,7 @@ interface StylePanelProps {
   readonly projectClasses?: readonly string[] | undefined;
   readonly historyTick?: number;
   readonly openFilePath?: string | null;
+  readonly openFileKind?: HostState['openFileKind'];
 }
 
 type StyleFiles = HostState['files'];
@@ -103,6 +104,7 @@ function hostState(
     files,
     astroFiles,
     openFilePath: props.openFilePath ?? null,
+    openFileKind: props.openFileKind ?? null,
     writeStyleNode: props.onWriteStyleNode ?? null,
     selectNode: props.onSelectNode ?? null,
     recordUndo: props.onRecordUndo ?? null,
diff --git a/src/panels/componentProperties.css b/src/panels/componentProperties.css
index 9f4e5294..12bffaa4 100644
--- a/src/panels/componentProperties.css
+++ b/src/panels/componentProperties.css
@@ -33,111 +33,14 @@
   background: var(--component-green-soft);
   overflow-wrap: anywhere;
 }
-.property-list {
-  border: 1px solid var(--border-strong);
-  border-radius: 6px;
-}
-.property-row {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-.property-row + .property-row {
-  border-top: 1px solid var(--border);
-}
-.property-row:first-child {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-.property-row:last-child {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-.property-row:hover {
-  background: var(--bg-active);
-}
-/* Keep the row highlight continuous, with separate feedback for the delete action. */
-.component-properties .property-row > button:where(:not(.property-remove)):hover:not(:disabled) {
-  background: transparent;
-}
-.property-row-main {
-  flex: 1;
-  justify-content: flex-start;
-  text-align: left;
-  background: transparent;
-  min-width: 0;
-  padding: 10px 7px;
-  gap: 8px;
-}
-.property-type-icon {
-  color: var(--text-dim);
-  width: 18px;
-  flex-shrink: 0;
-  text-align: center;
-}
-.property-row-label {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-.property-row-label > span {
-  overflow-wrap: anywhere;
-}
-.property-row-label small {
-  color: var(--text-dim);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 .property-required {
   color: var(--collection-purple);
 }
-.component-properties .property-grip,
-.component-properties .property-remove {
-  flex-shrink: 0;
-  width: 24px;
-  min-width: 24px;
-  padding: 3px;
-  align-self: stretch;
-  color: var(--text-dim);
-  background: transparent;
-}
-.component-properties .property-grip {
-  cursor: grab;
-  touch-action: none;
-}
-.component-properties .property-grip:active {
-  cursor: grabbing;
-}
-.component-properties .property-remove {
-  width: 32px;
-  min-width: 32px;
-  min-height: 32px;
-  margin: 4px;
-  border-radius: 4px;
-}
-.property-grip svg,
-.property-remove svg {
-  opacity: 0;
-}
-.property-row:hover svg,
-.property-row:focus-within svg {
-  opacity: 1;
-}
-.property-row.is-dragging {
-  background: var(--bg-panel-2);
-  opacity: 0.65;
-}
 .property-row.drop-before {
-  box-shadow: inset 0 2px 0 var(--accent);
+  box-shadow: inset 0 1px 0 var(--accent);
 }
 .property-row.drop-after {
-  box-shadow: inset 0 -2px 0 var(--accent);
-}
-.component-properties .property-remove:hover:not(:disabled),
-.component-properties .property-remove:focus-visible:not(:disabled) {
-  color: var(--red);
-  background: var(--bg-active);
+  box-shadow: inset 0 -1px 0 var(--accent);
 }
 .property-help {
   color: var(--text-dim);
@@ -185,6 +88,30 @@
 .property-editor textarea {
   resize: vertical;
 }
+.property-readonly-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.property-editor-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.property-editor header .property-declaration-info {
+  padding: 2px;
+  color: var(--text-dim);
+  cursor: help;
+}
+.property-conditions {
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.5;
+}
+.property-conditions ul {
+  margin: 6px 0 0;
+  padding-left: 16px;
+}
 .property-editor .property-code {
   font-family: var(--mono);
   line-height: 1.5;
@@ -209,17 +136,11 @@
   gap: 6px;
   color: var(--text-dim);
 }
-.property-default-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.property-default-title small {
-  padding-top: 4px;
-}
-.property-default-title > span {
-  margin-bottom: 6px;
-  color: var(--text-dim);
+.property-options .list-field-items {
+  /* Keep six rows visible while leaving the add button outside the scrolling region. */
+  max-height: min(180px, 30vh);
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
 }
 .property-actions {
   display: flex;
@@ -254,19 +175,31 @@
   background: transparent;
   color: var(--text-dim);
 }
-.property-type {
+.property-type,
+.property-default {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-.property-type-heading {
+.property-type-heading,
+.property-default-title {
   display: flex;
   align-items: center;
   color: var(--text-dim);
 }
-.property-type:hover .prop-expr-toggle:not(.on) {
+.property-type:hover .prop-expr-toggle:not(.on),
+.property-default:hover .prop-expr-toggle:not(.on) {
   color: var(--text-dim);
 }
-.property-type .dd-trigger {
+.property-type .dd-trigger,
+.property-default .dd-trigger {
+  width: 100%;
+}
+.property-expression-binding {
+  display: flex;
   width: 100%;
 }
+.property-expression-binding > .expr-input {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/src/panels/previewViewport.css b/src/panels/previewViewport.css
new file mode 100644
index 00000000..8bc4c0a1
--- /dev/null
+++ b/src/panels/previewViewport.css
@@ -0,0 +1,48 @@
+/* Keep viewport controls with the preview so global input styles cannot expand them. */
+.preview-toolbar .device-btns { flex-shrink: 0; }
+.preview-toolbar .preview-size-controls {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 8px;
+  padding: 2px 4px 2px 8px;
+  border-radius: 8px;
+  background: var(--bg-input);
+  color: var(--text-dim);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.preview-size-controls .preview-width-field {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 3px;
+}
+.preview-width-field input {
+  width: 42px;
+  min-width: 0;
+  flex: 0 0 42px;
+  padding: 3px 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: right;
+}
+.preview-width-field input:focus-visible { outline: 1px solid var(--accent); }
+.preview-size-controls output {
+  min-width: 38px;
+  padding-left: 8px;
+  border-left: 1px solid var(--border);
+  text-align: center;
+}
+.preview-size-controls button { padding: 3px 6px; background: transparent; font-size: inherit; }
+
+/* The iframe and overlays share a top-aligned scale; width must change atomically
+   with that scale so the page never animates through the wrong breakpoint. */
+.preview-frame-wrap > .frame-sized {
+  transform-origin: top center;
+  transition-property: top, bottom, border-radius;
+}
diff --git a/src/panels/previewViewport.ts b/src/panels/previewViewport.ts
new file mode 100644
index 00000000..3d4c8924
--- /dev/null
+++ b/src/panels/previewViewport.ts
@@ -0,0 +1,31 @@
+import { assert } from '../../shared/assert';
+
+export const PREVIEW_WIDTH_LIMITS = { minimum: 280, maximum: 7_680 } as const;
+
+export function parsePreviewWidth(input: string): number | undefined {
+  if (!/^\d{3,4}$/.test(input.trim())) {
+    return undefined;
+  }
+  const width = Number(input);
+  if (width < PREVIEW_WIDTH_LIMITS.minimum || width > PREVIEW_WIDTH_LIMITS.maximum) {
+    return undefined;
+  }
+  return width;
+}
+
+export function previewViewport(
+  width: number | null | undefined,
+  available: { readonly width: number; readonly height: number },
+  height: number | null,
+) {
+  assert(Number.isFinite(available.width), 'Preview container width must be finite');
+  assert(Number.isFinite(available.height), 'Preview container height must be finite');
+  const fixed = width !== null && width !== undefined;
+  const viewportWidth = fixed ? width : Math.max(1, available.width);
+  assert(viewportWidth > 0, 'Preview width must be positive');
+  const scale = fixed ? Math.min(1, Math.max(1, available.width - 24) / viewportWidth) : 1;
+  // Scale the frame and its overlays together, retaining the requested CSS viewport
+  // so media queries and viewport units use the simulated screen size.
+  const viewportHeight = height ?? Math.max(1, available.height - (fixed ? 32 : 0)) / scale;
+  return { width: viewportWidth, height: viewportHeight, scale };
+}
diff --git a/src/panels/propAttributes.tsx b/src/panels/propAttributes.tsx
index 0014bad8..41095ab9 100644
--- a/src/panels/propAttributes.tsx
+++ b/src/panels/propAttributes.tsx
@@ -11,7 +11,7 @@ import StyleEditor, { collapseDeclarations } from '../ui/StyleEditor';
 import AssetField from '../ui/AssetField';
 import { looksLikeAssetPath, mediaKindFor } from '../ui/AssetThumb';
 import { BindField, BindHandle, FieldDataPicker, ValueCodeEditor } from './propBindings';
-import { BracesIcon, PlusIcon, TrashIcon, ElementImageIcon } from '../ui/Icons';
+import { BracesIcon, PlusIcon, TrashIcon, ElementImageIcon, MaximizeIcon } from '../ui/Icons';
 
 interface AttributeNode {
   readonly id: string;
@@ -48,6 +48,7 @@ interface AttrEditorProps extends ContextProps {
   readonly pos: FieldPosition;
   readonly name: string;
   readonly value: string;
+  readonly syntax: 'pair' | 'spread';
   readonly isNew: boolean;
   readonly dataCtx?: SourceContext | null | undefined;
   readonly onCommitName: (name: string) => void;
@@ -66,6 +67,9 @@ interface ObjectAttrsFieldProps extends ContextProps {
 const decodeAttr = (v: Attr | null | undefined) =>
   v == null || v.type === 'bare' ? '' : v.type === 'expr' ? `{${v.value}}` : String(v.value);
 
+const attributeDisplayName = (name: string, value: Attr | undefined): string =>
+  value?.type === 'spread' ? `{...${value.value}}` : name;
+
 const encodeAttr = (text: string): Attr => {
   if (text === '') {
     return { type: 'bare' };
@@ -97,30 +101,38 @@ export function AttributesSection(props: AttributesSectionProps) {
 
       {names.length > 0 && (
         <div className="attrs-list">
-          {names.map((name) => (
-            <div
-              key={name}
-              className={`attr-row ${editor?.attr === name ? 'editing' : ''}`}
-              onClick={() => openEditor(name)}
-            >
-              <span className="attr-name">{name}</span>
-              <span className="attr-eq">=</span>
-              <span className="attr-value">{decodeAttr(node.props?.[name])}</span>
-              <button
-                className="row-action"
-                title="Delete attribute"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (editor?.attr === name) {
-                    setEditor(null);
-                  }
-                  onSetProp(name, undefined, true);
-                }}
+          {names.map((name) => {
+            const value = node.props?.[name];
+            const syntax = value?.type === 'spread' ? 'spread' : 'pair';
+            return (
+              <div
+                key={name}
+                className={`attr-row ${syntax} ${editor?.attr === name ? 'editing' : ''}`}
+                onClick={() => openEditor(name)}
               >
-                <TrashIcon size={12} />
-              </button>
-            </div>
-          ))}
+                <span className="attr-name">{attributeDisplayName(name, value)}</span>
+                {syntax === 'pair' && (
+                  <>
+                    <span className="attr-eq">=</span>
+                    <span className="attr-value">{decodeAttr(value)}</span>
+                  </>
+                )}
+                <button
+                  className="row-action"
+                  title="Delete attribute"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (editor?.attr === name) {
+                      setEditor(null);
+                    }
+                    onSetProp(name, undefined, true);
+                  }}
+                >
+                  <TrashIcon size={12} />
+                </button>
+              </div>
+            );
+          })}
         </div>
       )}
 
@@ -153,6 +165,8 @@ function AttributesSectionPopup({ state }: { readonly state: AttributesState })
   if (!editor) {
     return null;
   }
+  const value = editor.attr ? node.props?.[editor.attr] : undefined;
+  const syntax = value?.type === 'spread' ? 'spread' : 'pair';
   return (
     <AttrEditor
       key={editor.attr ?? '__new'}
@@ -160,8 +174,9 @@ function AttributesSectionPopup({ state }: { readonly state: AttributesState })
       projectPath={projectPath ?? null}
       bindCtx={bindCtx}
       dataCtx={bindCtx}
-      name={editor.attr ?? ''}
-      value={editor.attr ? decodeAttr(node.props?.[editor.attr]) : ''}
+      name={attributeDisplayName(editor.attr ?? '', value)}
+      value={syntax === 'pair' ? decodeAttr(value) : ''}
+      syntax={syntax}
       isNew={editor.attr === null}
       onCommitName={(newName) => {
         const clean = newName.trim();
@@ -252,7 +267,7 @@ export function parseAttrPaste(text: string): readonly AttributePair[] {
 
 function AttrEditor(props: AttrEditorProps) {
   const state = useAttrEditor(props);
-  const { ref, pos, isStyleValue, assetMode, setAssetMode } = state;
+  const { ref, pos, syntax, isStyleValue, assetMode, setAssetMode } = state;
 
   return (
     <div
@@ -264,24 +279,26 @@ function AttrEditor(props: AttrEditorProps) {
       {/* The field sits beside its label like the name row, whichever kind it
           is; `top` just stops the label and toggle from centring against a
           tall field. */}
-      <div className={`attr-editor-row ${isStyleValue || assetMode ? 'top' : ''}`}>
-        <span>Value</span>
-        <AttributeValue state={state} />
-        <AttributePopups state={state} />
-        <button
-          className={`attr-asset-toggle ${assetMode ? 'on' : ''}`}
-          title={assetMode ? 'Edit as a plain value' : 'Choose a file from public/'}
-          onClick={() => setAssetMode((v) => !v)}
-        >
-          <ElementImageIcon size={12} />
-        </button>
-      </div>
+      {syntax === 'pair' && (
+        <div className={`attr-editor-row ${isStyleValue || assetMode ? 'top' : ''}`}>
+          <span>Value</span>
+          <AttributeValue state={state} />
+          <AttributePopups state={state} />
+          <button
+            className={`attr-asset-toggle ${assetMode ? 'on' : ''}`}
+            title={assetMode ? 'Edit as a plain value' : 'Choose a file from public/'}
+            onClick={() => setAssetMode((v) => !v)}
+          >
+            <ElementImageIcon size={12} />
+          </button>
+        </div>
+      )}
     </div>
   );
 }
 
 function useAttrEditor(props: AttrEditorProps) {
-  const { name, value, isNew, bindCtx, onCommitName, onClose } = props;
+  const { name, value, syntax, isNew, bindCtx, onCommitName, onClose } = props;
   const [draftName, setDraftName] = useState(name);
   const [draftValue, setDraftValue] = useState(value);
   const ref = useRef<HTMLDivElement | null>(null);
@@ -320,7 +337,11 @@ function useAttrEditor(props: AttrEditorProps) {
   }, []);
   const focusValue = !isNew && !mounted.current;
 
-  const commitName = () => onCommitName(draftName);
+  const commitName = () => {
+    if (syntax === 'pair') {
+      onCommitName(draftName);
+    }
+  };
 
   useAttrEditorDismiss(ref, onClose);
   return {
@@ -366,17 +387,29 @@ function useAttrEditorDismiss(ref: RefObject<HTMLElement>, onClose: () => void)
   }, [onClose, ref]);
 }
 function AttributeName({ state }: { readonly state: AttributeState }) {
-  const { isNew, draftName, setDraftName, setDraftValue, onCommitPair, onCommitMany, commitName } =
-    state;
+  const {
+    syntax,
+    isNew,
+    draftName,
+    setDraftName,
+    setDraftValue,
+    onCommitPair,
+    onCommitMany,
+    commitName,
+  } = state;
   return (
     <div className="attr-editor-row">
       <span>Name</span>
       <input
         autoFocus={isNew}
         value={draftName}
+        readOnly={syntax === 'spread'}
         placeholder="data-attribute"
         spellCheck={false}
         onPaste={(e) => {
+          if (syntax === 'spread') {
+            return;
+          }
           const text = e.clipboardData.getData('text');
           // Only when it actually looks like markup — a plain name paste
           // must keep behaving like a paste into a text box.
@@ -462,74 +495,80 @@ function AttributeBinding({ state }: { readonly state: AttributeState }) {
     insertAt,
     setInsertAt,
     ref,
-    bigAt,
     setBigAt,
   } = state;
+  const valueRef = useRef<HTMLDivElement | null>(null);
   return (
-    <div
-      className="attr-value-field"
-      // Captured: what's inside is CodeMirror (or a contenteditable), and both
-      // would take the key first. `=` is a character a JS value can want —
-      // typing `a === b` inline is the trade — but the box this opens is where
-      // an expression that needs one is worth writing anyway.
-      onKeyDownCapture={(e) => {
-        if (e.key !== '=' || e.metaKey || e.ctrlKey || e.altKey || bigAt) {
-          return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        // Kept on screen: the field sits deep in a right-hand panel, so a box
-        // wider than it and anchored to its left edge runs off the window.
-        const r = e.currentTarget.getBoundingClientRect();
-        const width = Math.min(Math.max(r.width, 320), window.innerWidth - 16);
-        setBigAt({
-          left: Math.max(8, Math.min(r.left, window.innerWidth - width - 8)),
-          top: Math.max(8, Math.min(r.top, window.innerHeight - 320)),
-          width,
-        });
-      }}
-    >
-      <BindField
-        // An empty attribute is `{type:'bare'}`, which as a VALUE reads as no
-        // value at all rather than an empty one — the field would show the word
-        // "undefined". Empty text is an empty string here; encodeAttr still
-        // stores it as bare on the way out.
-        value={draftValue === '' ? { type: 'string', value: '' } : encodeAttr(draftValue)}
-        placeholder="Type, or insert data"
-        bindCtx={bindCtx}
-        dataCtx={dataCtx}
-        apiRef={bindApiRef}
-        onChange={(next) => {
-          const text = decodeAttr(next);
-          setDraftValue(text);
-          onChangeValue(text);
-        }}
-      />
-      {/* The dot belongs to the FIELD, and lives inside its box: hanging it off
-              the row put it above the row's own edge, so hovering it left the row —
-              which hid it, which put the pointer back on the row, which showed it
-              again. A dot that flickers under the pointer. */}
-      <BindHandle
-        active={!!insertAt}
-        onOpen={(host) => {
-          if (insertAt) {
-            setInsertAt(null);
-            return;
-          }
-          const r = (host || ref.current)?.getBoundingClientRect();
-          if (!r) {
-            return;
+    <>
+      <div ref={valueRef} className="attr-value-field">
+        <BindField
+          // An empty attribute is `{type:'bare'}`, which as a VALUE reads as no
+          // value at all rather than an empty one — the field would show the word
+          // "undefined". Empty text is an empty string here; encodeAttr still
+          // stores it as bare on the way out.
+          value={draftValue === '' ? { type: 'string', value: '' } : encodeAttr(draftValue)}
+          placeholder="Type, or insert data"
+          bindCtx={bindCtx}
+          dataCtx={dataCtx}
+          wrapCode
+          apiRef={bindApiRef}
+          onChange={(next) => {
+            const text = decodeAttr(next);
+            setDraftValue(text);
+            onChangeValue(text);
+          }}
+        />
+        {/* The dot belongs to the FIELD, and lives inside its box: hanging it off
+                the row put it above the row's own edge, so hovering it left the row —
+                which hid it, which put the pointer back on the row, which showed it
+                again. A dot that flickers under the pointer. */}
+        <BindHandle
+          active={!!insertAt}
+          onOpen={(host) => {
+            if (insertAt) {
+              setInsertAt(null);
+              return;
+            }
+            const r = (host || ref.current)?.getBoundingClientRect();
+            if (!r) {
+              return;
+            }
+            setInsertAt({
+              left: r.left,
+              top: Math.min(r.bottom + 4, Math.max(60, window.innerHeight - 340)),
+              width: Math.max(r.width, 240),
+            });
+          }}
+        />
+      </div>
+      <button
+        type="button"
+        className="attr-expand-toggle"
+        title="Expand value"
+        aria-label="Expand value"
+        onClick={() => {
+          const host = valueRef.current;
+          if (host) {
+            setBigAt(expandedAttributeEditorPosition(host));
           }
-          setInsertAt({
-            left: r.left,
-            top: Math.min(r.bottom + 4, Math.max(60, window.innerHeight - 340)),
-            width: Math.max(r.width, 240),
-          });
         }}
-      />
-    </div>
+      >
+        <MaximizeIcon size={12} />
+      </button>
+    </>
   );
 }
+
+function expandedAttributeEditorPosition(host: HTMLElement): FieldPosition {
+  const rectangle = host.getBoundingClientRect();
+  const viewportWidth = Math.max(window.innerWidth, 32);
+  const width = Math.min(Math.max(rectangle.width, 760), viewportWidth - 16);
+  return {
+    left: Math.max(8, Math.min(rectangle.left, viewportWidth - width - 8)),
+    top: Math.max(8, Math.min(rectangle.top, window.innerHeight - 320)),
+    width,
+  };
+}
 function AttributePopups({ state }: { readonly state: AttributeState }) {
   const {
     bigAt,
@@ -734,6 +773,7 @@ function ObjectAttrsFieldPopup({ state }: { readonly state: ObjectAttributesStat
       dataCtx={bindCtx}
       name={editor.index != null ? (entries[editor.index]?.key ?? '') : ''}
       value={editor.index != null ? decodeRaw(entries[editor.index]?.raw ?? '') : ''}
+      syntax="pair"
       isNew={editor.index == null}
       onCommitName={(newName) => {
         const clean = newName.trim();
diff --git a/src/panels/propBindings.tsx b/src/panels/propBindings.tsx
index 9369e3a6..056238ad 100644
--- a/src/panels/propBindings.tsx
+++ b/src/panels/propBindings.tsx
@@ -72,6 +72,11 @@ interface ConditionFieldProps extends BindingContextProps {
   readonly chipsOf: ChipsOf;
   readonly onSetText: (value: string) => void;
 }
+interface ExpressionBindingFieldProps extends BindingContextProps {
+  readonly value: string;
+  readonly placeholder?: string;
+  readonly onChange: (value: string) => void;
+}
 interface BindHandleProps {
   readonly active: boolean;
   readonly onOpen: (host: Element | null) => void;
@@ -88,6 +93,7 @@ interface BindFieldProps extends BindingContextProps {
   readonly value?: Attr | null | undefined;
   readonly field?: FieldDefinition;
   readonly placeholder?: string | undefined;
+  readonly wrapCode?: boolean;
   readonly apiRef?: MutableRefObject<InsertAPI | null>;
   readonly onChange: ValueChange;
 }
@@ -260,6 +266,70 @@ export function ConditionField({ test, scope, chipsOf, bindCtx, onSetText }: Con
   );
 }
 
+export function ExpressionBindingField({
+  value,
+  placeholder,
+  bindCtx,
+  onChange,
+}: ExpressionBindingFieldProps) {
+  const [pick, setPick] = useState<ChipPick | null>(null);
+  const apiRef = useRef<ExprInputAPI | null>(null);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const scope = scopeCompletions(bindCtx || {});
+  const scopeNames = new Set(scope.map((item) => item.label.split('.')[0] ?? ''));
+  const chipsOf = (text: string) => scopeChips(text, scopeNames);
+  const open = (chip: TemplateHole | null): void => {
+    const rectangle = wrapRef.current?.getBoundingClientRect();
+    if (!rectangle) {
+      return;
+    }
+    setPick({
+      chip,
+      pos: {
+        left: rectangle.left,
+        top: Math.min(rectangle.bottom + 4, Math.max(60, window.innerHeight - 340)),
+        width: Math.max(rectangle.width, 240),
+      },
+    });
+  };
+  return (
+    <>
+      <div className="property-expression-binding attr-value-field" ref={wrapRef}>
+        <ExprInput
+          value={value}
+          syncValue={value}
+          {...definedFields({ placeholder })}
+          multiline
+          wrap={false}
+          completions={scope}
+          apiRef={apiRef}
+          chipsOf={chipsOf}
+          onChipClick={open}
+          onChange={onChange}
+        />
+        <BindHandle active={!!pick} onOpen={() => (pick ? setPick(null) : open(null))} />
+      </div>
+      {pick ? (
+        <FieldDataPicker
+          pos={pick.pos}
+          bindCtx={bindCtx}
+          current={pick.chip?.path ?? null}
+          onPick={(path) => {
+            const chip = pick.chip;
+            setPick(null);
+            if (chip) {
+              apiRef.current?.replaceRange(chip.from, chip.to, path);
+            } else {
+              apiRef.current?.insert(path);
+            }
+          }}
+          onClose={() => setPick(null)}
+        />
+      ) : null}
+    </>
+  );
+}
+
 export function BindHandle({ active, onOpen }: BindHandleProps) {
   return (
     <button
@@ -638,6 +708,7 @@ function BindFieldView({ state }: { readonly state: BindingViewState }) {
     expr,
     exprApiRef,
     codeChips,
+    wrapCode,
   } = state;
   const list = <BindFieldMenu state={state} />;
   const srcEditor = <BindFieldSource state={state} />;
@@ -684,9 +755,9 @@ function BindFieldView({ state }: { readonly state: BindingViewState }) {
         // look like one.
         chipsOf={codeChips}
         onChipClick={(hit) => open(hit)}
-        // Code keeps its shape: wrapping an array across the panel's width throws
-        // away the indentation that says what belongs to what. It scrolls instead.
-        wrap={false}
+        // Expanded editors keep authored line structure. Compact inline callers
+        // can opt into wrapping so the whole value remains readable in the panel.
+        wrap={wrapCode ?? false}
         onChange={(v) => onChange({ type: 'expr', value: v })}
         onCommit={(v) => v !== expr && onChange({ type: 'expr', value: v }, true)}
       />
diff --git a/src/propertyOptions.ts b/src/propertyOptions.ts
index 2a9e3147..3f5aade2 100644
--- a/src/propertyOptions.ts
+++ b/src/propertyOptions.ts
@@ -1,20 +1 @@
-import { PROPERTY_LIMITS } from '../shared/component-properties';
-
-// Only literal unions expose option controls. Complex unions remain in the type editor.
-export function literalOptions(type: string): readonly string[] | undefined {
-  const tokens = type.match(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|-?\d+(?:\.\d+)?|true|false/g);
-  if (!tokens || tokens.length < 1 || tokens.length > PROPERTY_LIMITS.fieldsMax) {
-    return undefined;
-  }
-  const remaining = type.replace(
-    /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|-?\d+(?:\.\d+)?|true|false/g,
-    ''
-  );
-  if (!/^\s*(?:\|\s*)*$/.test(remaining)) {
-    return undefined;
-  }
-  if ((remaining.match(/\|/g)?.length ?? 0) !== tokens.length - 1) {
-    return undefined;
-  }
-  return tokens;
-}
+export { literalOptions } from '../shared/property-options';
diff --git a/src/style-panel/EmbedEditor.tsx b/src/style-panel/EmbedEditor.tsx
index debc6040..9056b5bf 100644
--- a/src/style-panel/EmbedEditor.tsx
+++ b/src/style-panel/EmbedEditor.tsx
@@ -30,7 +30,9 @@ import FlexChildSection from './FlexChildSection'
 import EffectsSection from './EffectsSection'
 import ProvenanceList, { ProvenanceEmbedNav } from './ProvenanceList'
 import VariableConnect, { useSharedVars } from './VariableConnect'
-import { computeRuleModel, type RuleModel } from './lib/cascade'
+import { computeRuleModel, type MatchedRule, type RuleModel } from './lib/cascade'
+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 { 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'
@@ -59,7 +61,13 @@ import {
   replaceRuleCss,
   splitRuleSelectorAt,
 } from './lib/css'
-import { canonicalCompound, compareSpecificity, parseSelectorList, type MatchTarget } from './lib/selectors'
+import {
+  canonicalCompound,
+  compareSpecificity,
+  parseSelectorList,
+  selectorDependsOnAncestor,
+  type MatchTarget,
+} from './lib/selectors'
 import { findNode, getHost, onHostChange, propText } from './lib/host'
 import {
   applyNativePropertyAt,
@@ -608,17 +616,57 @@ function AddPropertyRow({ busy, onAdd }: { busy: boolean; onAdd: (prop: string,
 
 // ─────────────────────────── Section block ───────────────────────────
 
+type SectionToggleRequest = {
+  readonly id: string
+  readonly ids: readonly string[]
+  readonly next: 'open' | 'closed'
+  readonly scope: 'one' | 'all'
+}
+
+function useSectionVisibility(): readonly [
+  ReadonlySet<string>,
+  (request: SectionToggleRequest) => void,
+] {
+  const [closed, setClosed] = useState<ReadonlySet<string>>(() => new Set(['flex-child']))
+  const toggle = useCallback((request: SectionToggleRequest) => {
+    setClosed((previous) => {
+      if (request.scope === 'all') {
+        return request.next === 'open' ? new Set() : new Set(request.ids)
+      }
+      const next = new Set(previous)
+      if (request.next === 'open') {
+        next.delete(request.id)
+      } else {
+        next.add(request.id)
+      }
+      return next
+    })
+  }, [])
+  return [closed, toggle]
+}
+
 // A collapsible section header (Webflow's chevron + label) wrapping a group of
-// controls. Open by default; collapse state is local to the block.
-function SectionBlock({ label, headerAction, defaultOpen = true, mark = null, children }: { label: string; headerAction?: ReactNode; defaultOpen?: boolean; mark?: 'own' | 'other' | null; children: ReactNode }) {
-  const [open, setOpen] = useState(defaultOpen)
-  const toggle = () => setOpen((value) => !value)
+// controls. Visibility is owned by the card so Shift-click can apply one
+// header's next state to every section without a document-wide event channel.
+function SectionBlock({ label, headerAction, open, mark = null, onToggle, children }: {
+  readonly label: string
+  readonly headerAction?: ReactNode
+  readonly open: boolean
+  readonly mark?: 'own' | 'other' | null
+  readonly onToggle: (event: ReactMouseEvent<HTMLButtonElement>) => void
+  readonly children: ReactNode
+}) {
   return (
     <div className={`embed-editor_section-block ${open ? '' : 'is-collapsed'}`}>
       {/* A row (not one big button) so an optional action can sit next to the chevron
           without nesting a button inside a button. */}
       <div className="embed-editor_section-header">
-        <button type="button" className="embed-editor_section-toggle" aria-expanded={open} onClick={toggle}>
+        <button
+          type="button"
+          className="embed-editor_section-toggle"
+          aria-expanded={open}
+          onClick={onToggle}
+        >
           <span className="embed-editor_section-title">{label}</span>
         </button>
         {headerAction}
@@ -641,10 +689,17 @@ function SectionBlock({ label, headerAction, defaultOpen = true, mark = null, ch
           className="embed-editor_section-chevron-btn"
           aria-expanded={open}
           aria-label={`${open ? 'Collapse' : 'Expand'} ${label}`}
-          onClick={toggle}
+          onClick={onToggle}
         >
           <svg className="embed-editor_section-chevron" viewBox="0 0 16 16" aria-hidden="true">
-            <path d="M4.2 6.2 8 10l3.8-3.8" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path
+              d="M4.2 6.2 8 10l3.8-3.8"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
           </svg>
         </button>
       </div>
@@ -1226,15 +1281,37 @@ const SUGGESTION_KIND_LABEL: Record<SelectorSuggestion['kind'], string> = {
   tag: 'tag', class: 'class', attribute: 'attribute', 'attribute-value': 'attribute', combo: 'combo',
 }
 
-// A selector that says nothing about *this* element — `:target`, `:focus-visible`,
-// `*`, `::selection`, `body > *`. They match almost everything on the page, so a
-// project with a couple of them tacks them onto every element's chip list and
-// buries the selectors that actually describe what's selected. Kept behind a
-// toggle instead. A class, id or attribute anywhere in the selector (including
-// inside `:is(...)`) makes it specific enough to show.
+// A selector made only from tags, universal selectors, and pseudos describes a
+// project-wide group rather than this element's identity. A class, id, or attribute
+// anywhere in the selector (including inside `:is(...)`) makes it specific.
 function isGlobalSelector(text: string): boolean {
-  if (/[.#[]/.test(text)) {return false}
-  return canonicalCompound(text).tokens.length === 0
+  return !/[.#[]/.test(text)
+}
+
+type ClassifiedSelector = {
+  readonly selector: MatchedSelector
+  readonly global: boolean
+  readonly inherited: boolean
+}
+
+function classifySelector(selector: MatchedSelector): ClassifiedSelector {
+  const inherited = selectorDependsOnAncestor(selector.text)
+  return {
+    selector,
+    // Parent-qualified selectors have the more useful category when the two
+    // definitions overlap, so each reveal control owns a disjoint list.
+    global: !inherited && isGlobalSelector(selector.text),
+    inherited,
+  }
+}
+
+function selectorAccessibleLabel(entry: ClassifiedSelector, label: string): string {
+  const categories: string[] = []
+  if (entry.global) {categories.push('global')}
+  if (entry.inherited) {categories.push('inherited')}
+  if (entry.selector.fromComponent) {categories.push('component')}
+  if (categories.length === 0) {return label}
+  return `${label}, ${categories.join(' and ')} selector`
 }
 
 // The selector picker: a chip per selector that styles the element (its own
@@ -1244,7 +1321,7 @@ function isGlobalSelector(text: string): boolean {
 // input offers an autocomplete list of the element's targetable selectors:
 // ↑/↓ move, Enter applies the highlighted one (or the typed text), Tab fills it
 // into the input to keep typing.
-export function SelectorPicker({ selectors, suggestions, activeSelector, activePicked, busy, loading, onSelect, onDeselect, onAdd }: {
+type SelectorPickerProps = {
   selectors: MatchedSelector[]
   suggestions: SelectorSuggestion[]
   activeSelector: string
@@ -1257,12 +1334,27 @@ export function SelectorPicker({ selectors, suggestions, activeSelector, activeP
   onSelect: (selector: string) => void
   onDeselect: () => void
   onAdd: (selector: string) => void
-}) {
+  onVisibleSelectorsChange?: (selectors: readonly string[]) => void
+}
+
+export function SelectorPicker({
+  selectors,
+  suggestions,
+  activeSelector,
+  activePicked,
+  busy,
+  loading,
+  onSelect,
+  onDeselect,
+  onAdd,
+  onVisibleSelectorsChange,
+}: SelectorPickerProps) {
   const [draft, setDraft] = useState('')
   const [open, setOpen] = useState(false)
   const [highlight, setHighlight] = useState(-1)
   const [inputOpen, setInputOpen] = useState(false)
   const [showGlobals, setShowGlobals] = useState(false)
+  const [showInherited, setShowInherited] = useState(false)
   const listRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const wantFocus = useRef(false)
@@ -1275,22 +1367,28 @@ export function SelectorPicker({ selectors, suggestions, activeSelector, activeP
   // as just the black well (with its min-height) rather than an add-selector field.
   const showInput = inputOpen
 
-  // Global selectors are folded away behind a count chip. The one exception is a
-  // global the user PICKED — it has to stay on screen for the panel below it to
-  // make sense. A global that is merely the current default target stays hidden,
-  // so the checkbox means what it says.
-  const globals = useMemo(() => selectors.filter((sel) => isGlobalSelector(sel.text)), [selectors])
+  // Broad selectors are folded away behind category toggles. A selector the user
+  // picked stays visible so the editor below always has an understandable target.
+  const classified = useMemo(() => selectors.map(classifySelector), [selectors])
+  const globals = useMemo(() => classified.filter((entry) => entry.global), [classified])
+  const inherited = useMemo(() => classified.filter((entry) => entry.inherited), [classified])
   const shownSelectors = useMemo(
     () =>
-      showGlobals
-        ? selectors
-        : selectors.filter(
-            (sel) =>
-              !isGlobalSelector(sel.text) ||
-              (activePicked && selectorsMatch(sel.text, activeSelector)),
-          ),
-    [selectors, showGlobals, activeSelector, activePicked],
+      classified.filter((entry) => {
+        const picked = activePicked && selectorsMatch(entry.selector.text, activeSelector)
+        const globalVisible = !entry.global || showGlobals
+        const inheritedVisible = !entry.inherited || showInherited
+        return picked || (globalVisible && inheritedVisible)
+      }),
+    [classified, showGlobals, showInherited, activeSelector, activePicked],
+  )
+  const visibleSelectorTexts = useMemo(
+    () => shownSelectors.map((entry) => entry.selector.text),
+    [shownSelectors],
   )
+  useEffect(() => {
+    onVisibleSelectorsChange?.(visibleSelectorTexts)
+  }, [onVisibleSelectorsChange, visibleSelectorTexts])
 
   const projectClasses = useProjectClasses()
   const q = draft.trim().toLowerCase()
@@ -1399,21 +1497,40 @@ export function SelectorPicker({ selectors, suggestions, activeSelector, activeP
         ) : null}
         {shownSelectors.length ? (
           <div className="embed-editor_selector-chips">
-            {shownSelectors.map((sel) => {
+            {shownSelectors.map((entry) => {
+              const sel = entry.selector
               const active = selectorsMatch(sel.text, activeSelector)
               const dimmed = sel.inContext === false
               // Nested rules show their nesting (`.hero { .title }`); selection/matching
               // still uses the resolved selector (sel.text).
               const label = sel.display ?? sel.text
+              const className = [
+                'embed-editor_selector-chip',
+                active && 'is-active',
+                sel.pending && 'is-pending',
+                sel.fromComponent && 'is-component',
+                entry.global && 'is-global',
+                entry.inherited && 'is-inherited',
+                dimmed && 'is-dimmed',
+              ].filter(Boolean).join(' ')
+              const title = active
+                ? `${label} — click to deselect`
+                : dimmed
+                  ? `${label} — styled in another query`
+                  : sel.pending
+                    ? `${label} — no styles yet`
+                    : label
               return (
                 <button
                   key={sel.key}
                   type="button"
-                  className={`embed-editor_selector-chip ${active ? 'is-active' : ''} ${sel.pending ? 'is-pending' : ''} ${dimmed ? 'is-dimmed' : ''}`}
+                  className={className}
                   disabled={busy}
+                  aria-pressed={active}
+                  aria-label={selectorAccessibleLabel(entry, label)}
                   // Click the active chip again to deselect (show all winners read-only).
                   onClick={() => (active ? onDeselect() : onSelect(sel.text))}
-                  title={active ? `${label} — click to deselect` : dimmed ? `${label} — styled in another query` : sel.pending ? `${label} — no styles yet` : label}
+                  title={title}
                 >
                   {label}
                 </button>
@@ -1481,8 +1598,8 @@ export function SelectorPicker({ selectors, suggestions, activeSelector, activeP
         under it down a row, so the panel rearranged itself under the pointer just as
         it became usable. With nothing to reveal it sits inert instead. */}
     <label
-      className={`embed-editor_check embed-editor_globals-check ${globals.length ? '' : 'is-empty'}`}
-      title="Selectors like :target, :focus-visible and * match nearly every element on the page"
+      className={`embed-editor_check embed-editor_selector-filter ${globals.length ? '' : 'is-empty'}`}
+      title="Tags, universal selectors, and broad states can match many elements"
     >
       <input
         type="checkbox"
@@ -1492,6 +1609,18 @@ export function SelectorPicker({ selectors, suggestions, activeSelector, activeP
       />
       <span>Show global selectors ({globals.length})</span>
     </label>
+    <label
+      className={`embed-editor_check embed-editor_selector-filter ${inherited.length ? '' : 'is-empty'}`}
+      title="Selectors that apply because this element is inside a matching parent or ancestor"
+    >
+      <input
+        type="checkbox"
+        checked={showInherited && inherited.length > 0}
+        disabled={busy || !inherited.length}
+        onChange={(event) => setShowInherited(event.target.checked)}
+      />
+      <span>Show inherited styles ({inherited.length})</span>
+    </label>
     </>
   )
 }
@@ -1737,10 +1866,261 @@ function EditQueryForm({ query, uses, sourceLabel, suggestions, onRename, onCanc
   )
 }
 
+function cssRuleMatchesSelector(matched: MatchedRule, selector: string): boolean {
+  if (selectorsMatch(matched.rule.selectorText, selector)) {return true}
+  return matched.matchedSelectors.some((entry) => selectorsMatch(entry.text, selector))
+}
+
+function cssRuleMatchesVisibleSelector(
+  matched: MatchedRule,
+  visibleSelectors: readonly string[],
+): boolean {
+  return visibleSelectors.some((selector) => cssRuleMatchesSelector(matched, selector))
+}
+
+function cssSelectorLine(
+  line: string,
+  lineFrom: number,
+  matchedRanges: readonly CssRuleRange[],
+): ReactNode {
+  const segments: ReactNode[] = []
+  let cursor = 0
+  for (const range of matchedRanges) {
+    const from = Math.max(0, range.from - lineFrom)
+    const to = Math.min(line.length, range.to - lineFrom)
+    if (to <= from) {continue}
+    if (from > cursor) {
+      segments.push(
+        <span key={`plain:${cursor}`} className="embed-editor_css-code-selector-unmatched">
+          {line.slice(cursor, from)}
+        </span>,
+      )
+    }
+    segments.push(
+      <span key={`matched:${from}`} className="embed-editor_css-code-selector">
+        {line.slice(from, to)}
+      </span>,
+    )
+    cursor = to
+  }
+  if (cursor < line.length) {
+    segments.push(
+      <span key={`plain:${cursor}`} className="embed-editor_css-code-selector-unmatched">
+        {line.slice(cursor)}
+      </span>,
+    )
+  }
+  return segments
+}
+
+function cssCodeLine(
+  line: string,
+  lineFrom: number,
+  selectorList: boolean,
+  matchedRanges: readonly CssRuleRange[],
+): ReactNode {
+  if (selectorList) {return cssSelectorLine(line, lineFrom, matchedRanges)}
+  const declaration = line.match(/^(\s*)([-\w]+)(:\s*)(.*?)(;?)$/)
+  if (declaration) {
+    const [, spacing = '', property = '', colon = '', value = '', semicolon = ''] = declaration
+    return (
+      <>
+        {spacing}<span className="embed-editor_css-code-property">{property}</span>
+        <span className="embed-editor_css-code-punctuation">{colon}</span>
+        {cssTokens(value).map((token, index) => (
+          <span key={`${index}:${token.kind}`} className={`cx-${token.kind}`}>{token.text}</span>
+        ))}
+        <span className="embed-editor_css-code-punctuation">{semicolon}</span>
+      </>
+    )
+  }
+  const brace = line.lastIndexOf('{')
+  if (brace >= 0) {
+    const selectorClass = line.trimStart().startsWith('@')
+      ? 'embed-editor_css-code-context'
+      : 'embed-editor_css-code-selector'
+    return (
+      <>
+        <span className={selectorClass}>{line.slice(0, brace)}</span>
+        <span className="embed-editor_css-code-punctuation">{'{'}</span>
+      </>
+    )
+  }
+  return <span className="embed-editor_css-code-punctuation">{line || ' '}</span>
+}
+
+function CssCodePreview({ view, ariaLabel }: { view: CssRuleView; ariaLabel: string }) {
+  let offset = 0
+  return (
+    <pre className="embed-editor_css-code-preview" aria-label={ariaLabel} tabIndex={0}>
+      {view.code.split('\n').map((line, index) => {
+        const from = offset
+        const to = from + line.length
+        offset = to + 1
+        const overridden = view.highlights.some((range) => range.from < to && range.to > from)
+        const selectorList = view.selectorLists.some(
+          (range) => range.from < to && range.to > from,
+        )
+        const matchedRanges = view.selectors.filter(
+          (range) => range.from < to && range.to > from,
+        )
+        return (
+          <span
+            key={`${index}:${line}`}
+            className={`embed-editor_css-code-line ${overridden ? 'is-overridden' : ''}`}
+          >
+            {cssCodeLine(line, from, selectorList, matchedRanges)}
+          </span>
+        )
+      })}
+    </pre>
+  )
+}
+
+function EditableCssRule({ rule, busy, onSave }: {
+  readonly rule: ParsedRule
+  readonly busy: boolean
+  readonly onSave: (rule: ParsedRule, css: string) => void
+}) {
+  const sourceCss = rule.node.toString()
+  const [draft, setDraft] = useState(sourceCss)
+  const attemptedDraftRef = useRef<string | null>(null)
+  const previousSourceRef = useRef(sourceCss)
+
+  // External style-panel edits replace a clean draft, while text currently being
+  // authored stays untouched. After our own autosave, draft already equals sourceCss.
+  useEffect(() => {
+    setDraft((current) => current === previousSourceRef.current ? sourceCss : current)
+    previousSourceRef.current = sourceCss
+  }, [sourceCss])
+
+  // A short pause is the commit boundary. Busy saves serialize naturally: if a
+  // newer draft arrives during one write, busy clearing schedules that latest text.
+  useEffect(() => {
+    if (draft === sourceCss) {attemptedDraftRef.current = null; return}
+    if (busy) {return}
+    if (draft === attemptedDraftRef.current) {return}
+    const timer = window.setTimeout(() => {
+      attemptedDraftRef.current = draft
+      onSave(rule, draft)
+    }, 300)
+    return () => window.clearTimeout(timer)
+  }, [busy, draft, onSave, rule, sourceCss])
+
+  return (
+    <CodeEditor
+      value={draft}
+      language="css"
+      ariaLabel={`Editable CSS for ${rule.selectorText}; changes save automatically`}
+      minHeight="100px"
+      onChange={setDraft}
+      className="embed-editor_css-code-editor"
+    />
+  )
+}
+
+type CssCodeSectionProps = {
+  readonly model: RuleModel
+  readonly activeSelector: string
+  readonly visibleSelectors: readonly string[]
+  readonly editableRule: ParsedRule | null
+  readonly busy: boolean
+  readonly open: boolean
+  readonly onToggle: () => void
+  readonly onSave: (rule: ParsedRule, css: string) => void
+}
+
+function CssCodeHeader({ open, sourceLabel, onToggle }: {
+  readonly open: boolean
+  readonly sourceLabel: string
+  readonly onToggle: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className="embed-editor_css-code-header embed-editor_css-code-toggle"
+      aria-expanded={open}
+      aria-label={`${open ? 'Collapse' : 'Expand'} CSS Code`}
+      onClick={onToggle}
+    >
+      <span className="embed-editor_css-code-title">CSS Code</span>
+      {sourceLabel ? (
+        <span className="embed-editor_css-code-source" title={sourceLabel}>{sourceLabel}</span>
+      ) : null}
+      <span className="embed-editor_css-code-chevron" aria-hidden="true">
+        <svg className="embed-editor_section-chevron" viewBox="0 0 16 16" aria-hidden="true">
+          <path
+            d="M4.2 6.2 8 10l3.8-3.8"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}
+
+function CssCodeSection({
+  model,
+  activeSelector,
+  visibleSelectors,
+  editableRule,
+  busy,
+  open,
+  onToggle,
+  onSave,
+}: CssCodeSectionProps) {
+  const rules = useMemo(() => {
+    const visible = [...model.base, ...model.conditional]
+      .filter((rule) => cssRuleMatchesVisibleSelector(rule, visibleSelectors))
+    if (!activeSelector) {return visible}
+    return visible.filter((rule) => cssRuleMatchesSelector(rule, activeSelector))
+  }, [model, activeSelector, visibleSelectors])
+  const view = useMemo(() => buildCssRuleView(rules), [rules])
+  const sources = useMemo(
+    () => [...new Set(rules.map((entry) => entry.rule.embedLabel))],
+    [rules],
+  )
+  const sourceLabel = activeSelector
+    ? (editableRule?.embedLabel ?? sources.join(', '))
+    : ''
+
+  return (
+    <section className={`embed-editor_css-code ${open ? 'is-open' : 'is-collapsed'}`}>
+      <CssCodeHeader open={open} sourceLabel={sourceLabel} onToggle={onToggle} />
+      {open ? (
+        <div className="embed-editor_css-code-body">
+          {activeSelector && editableRule ? (
+            <EditableCssRule
+              key={editableRule.ruleId}
+              rule={editableRule}
+              busy={busy}
+              onSave={onSave}
+            />
+          ) : view.code ? (
+            <CssCodePreview
+              view={view}
+              ariaLabel="CSS matching this element"
+            />
+          ) : (
+            <p className="embed-editor_css-code-empty">No matching CSS rules.</p>
+          )}
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
 function StyleCard({
   snapshot,
   selectedNames,
   activePicked,
+  cssCodeOpen,
+  onToggleCssCode,
+  model,
   onSelectNames,
   resolved,
   contexts,
@@ -1771,14 +2151,15 @@ function StyleCard({
   liveSetProp,
   onSelectSelector,
   onAdd,
-  rawOpen,
-  onToggleRaw,
-  onSaveRaw,
+  onSaveCssRule,
 }: {
   snapshot: ElementSnapshot | undefined
   selectedNames: string[]
   selectedSelector: string
   activePicked: boolean
+  cssCodeOpen: boolean
+  onToggleCssCode: () => void
+  model: RuleModel
   onSelectNames: (names: string[]) => void
   resolved: ResolvedStyle
   contexts: StyleContext[]
@@ -1815,9 +2196,7 @@ function StyleCard({
   liveSetProp: (prop: string, value: string | null, important: boolean) => void
   onSelectSelector: (selector: string, prop?: string) => void
   onAdd: (prop: string, value: string, important: boolean) => void
-  rawOpen: boolean
-  onToggleRaw: () => void
-  onSaveRaw: (rule: ParsedRule, css: string) => void
+  onSaveCssRule: (rule: ParsedRule, css: string) => void
   onRemoveRule: (rule: ParsedRule) => void
 }) {
   const selectedRule = resolved.selectedRule
@@ -1839,11 +2218,20 @@ function StyleCard({
   }, [])
   const closeProvenance = useCallback(() => setProvenance(null), [])
   const suppressProvenanceReopen = useCallback((prop: string) => { suppressProvenance.current = prop }, [])
-  const [rawDraft, setRawDraft] = useState('')
+  const [visibleSelectors, setVisibleSelectors] = useState<readonly string[]>([])
+  const rememberVisibleSelectors = useCallback((next: readonly string[]) => {
+    setVisibleSelectors((previous) => {
+      const same = next.length === previous.length
+        && next.every((selector, index) => selector === previous[index])
+      return same ? previous : [...next]
+    })
+  }, [])
 
   // Always show Layout + Size so the panel is consistent across elements, not
   // only those that already set a property in that section.
   const groups = groupProps([...resolved.props.keys()], ['flex-child', 'layout', 'position', 'spacing', 'size', 'typography', 'backgrounds', 'borders', 'effects', 'other'])
+  const sectionIds = groups.map((group) => group.def.id)
+  const [closedSectionIds, toggleSection] = useSectionVisibility()
   const read = (prop: string) => resolved.props.get(prop)
 
 
@@ -1929,6 +2317,7 @@ function StyleCard({
         onSelect={onSelectActive}
         onDeselect={onDeselect}
         onAdd={onAddSelector}
+        onVisibleSelectorsChange={rememberVisibleSelectors}
       />
       {/* 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
@@ -1976,28 +2365,32 @@ function StyleCard({
       </div>
       {sourceNote ? <p className="embed-editor_source-note">{sourceNote}</p> : null}
 
-      {rawOpen && selectedRule ? (
-        <div className="embed-editor_rule-edit">
-          <CodeEditor
-            value={rawDraft}
-            language="css"
-            ariaLabel={`CSS for ${selectedRule.selectorText}`}
-            minHeight="90px"
-            onChange={setRawDraft}
-            className="embed-editor_rule-code"
-          />
-          <div className="embed-editor_rule-actions">
-            <button className="u-button is-ghost is-small" type="button" onClick={onToggleRaw} disabled={busy}>Cancel</button>
-            <button className="u-button is-primary is-small" type="button" onClick={() => onSaveRaw(selectedRule, rawDraft)} disabled={busy}>Save rule</button>
-          </div>
-        </div>
-      ) : (
-        <div className="embed-editor_decls">
+      <CssCodeSection
+        model={model}
+        activeSelector={activeSelector}
+        visibleSelectors={visibleSelectors}
+        editableRule={selectedRule}
+        busy={busy}
+        open={cssCodeOpen}
+        onToggle={onToggleCssCode}
+        onSave={onSaveCssRule}
+      />
+
+      <div className="embed-editor_decls">
           {groups.map((group) => (
             <SectionBlock
               key={group.def.id}
               label={group.def.label}
-              defaultOpen={group.def.id !== 'flex-child'}
+              open={!closedSectionIds.has(group.def.id)}
+              onToggle={(event) => {
+                const open = !closedSectionIds.has(group.def.id)
+                toggleSection({
+                  id: group.def.id,
+                  ids: sectionIds,
+                  next: open ? 'closed' : 'open',
+                  scope: event.shiftKey ? 'all' : 'one',
+                })
+              }}
               // A dot whenever anything in the section reaches the element, and
               // blue once the picked selector is one of the things setting it —
               // `source === 'selected'` is the same test every property label in
@@ -2111,8 +2504,7 @@ function StyleCard({
               })()}
             </SectionBlock>
           ))}
-        </div>
-      )}
+      </div>
 
       <div className="embed-editor_rule-foot">
         <AddPropertyRow busy={busy} onAdd={onAdd} />
@@ -2241,7 +2633,15 @@ function styledSelectorsFor(
     const existing = byKey.get(key)
     if (existing) { if (inContext) {existing.inContext = true;} continue }
     const specificity: Specificity = [0, ns.classDepth, 0]
-    byKey.set(key, { text: ns.text, specificity, state: ns.state, simple: true, key, inContext })
+    byKey.set(key, {
+      text: ns.text,
+      specificity,
+      state: ns.state,
+      simple: true,
+      key,
+      inContext,
+      fromComponent: false,
+    })
   }
   return [...byKey.values()].sort(
     (a, b) => compareSpecificity(a.specificity, b.specificity) || a.text.localeCompare(b.text),
@@ -2433,7 +2833,9 @@ export default function EmbedEditor() {
   const [, setRefreshing] = useState(false)
   // True between showing page-level rules and the component embeds finishing.
   const [scanningMore, setScanningMore] = useState(false)
-  const [rawRuleId, setRawRuleId] = useState<string | null>(null)
+  // Starts closed for each panel session, then stays as the user left it while
+  // element changes rebuild the card beneath this persistent editor state.
+  const [cssCodeOpen, setCssCodeOpen] = useState(false)
   // The tokens (tag / classes / attrs) chosen in the header ClassPicker, defaulted
   // to the element's classes and re-defaulted when the selected element changes.
   const [selectedTokens, setSelectedTokens] = useState<string[]>([])
@@ -2923,7 +3325,6 @@ export default function EmbedEditor() {
       }, opts.force)
       if (seq !== seqRef.current) {return}
       await applyResolve(element, content, seq)
-      setRawRuleId(null)
     } catch (error) {
       if (seq !== seqRef.current) {return}
       setPhase('ready')
@@ -3239,11 +3640,10 @@ export default function EmbedEditor() {
   const onRemoveRule = useCallback((rule: ParsedRule) => {
     void applyEdit(rule, () => removeRule(splitForEdit(rule).rule))
   }, [applyEdit, splitForEdit])
-  const onSaveRaw = useCallback((rule: ParsedRule, css: string) => {
+  const onSaveCssRule = useCallback((rule: ParsedRule, css: string) => {
     void applyEdit(rule, () => {
       const result = replaceRuleCss(rule, css)
       if (!result.ok) { setSaveError(`Invalid CSS: ${result.error}`); return false }
-      setRawRuleId(null)
       return true
     })
   }, [applyEdit])
@@ -3259,10 +3659,6 @@ export default function EmbedEditor() {
     })
   }, [docByKey])
 
-  const toggleRaw = useCallback((ruleId: string) => {
-    setRawRuleId((cur) => (cur === ruleId ? null : ruleId))
-  }, [])
-
   // Keep the resolved view at module scope so the next mount starts from it (see
   // persistedView). Written as it changes rather than on unmount, which React skips
   // when the whole tree goes.
@@ -3880,7 +4276,16 @@ export default function EmbedEditor() {
       const canon = canonicalCompound(activeSelector)
       const own = canon.simple && canon.tokens.every((tok) => ownTokens.has(tok))
       if (!own || selectedSelectorText != null) {
-        list.push({ text: activeSelector, specificity: [0, 0, 0], state: stateForSelector(activeSelector), simple: canon.simple, key: `active:${activeSelector}`, pending: true, inContext: true })
+        list.push({
+          text: activeSelector,
+          specificity: [0, 0, 0],
+          state: stateForSelector(activeSelector),
+          simple: canon.simple,
+          key: `active:${activeSelector}`,
+          pending: true,
+          inContext: true,
+          fromComponent: false,
+        })
       }
     }
     // Order for readability: tag → base class + pseudos → applied combo chain + pseudos
@@ -4518,6 +4923,9 @@ export default function EmbedEditor() {
               selectedNames={selectedTokens}
               selectedSelector={activeSelector}
               activePicked={selectedSelectorText != null}
+              cssCodeOpen={cssCodeOpen}
+              onToggleCssCode={() => setCssCodeOpen((open) => !open)}
+              model={model ?? EMPTY_RULE_MODEL}
               onSelectNames={selectTokens}
               resolved={resolved ?? EMPTY_RESOLVED}
               contexts={styleContexts}
@@ -4551,9 +4959,7 @@ export default function EmbedEditor() {
               liveSetProp={liveSetProp}
               onSelectSelector={onSelectSelector}
               onAdd={setProp}
-              rawOpen={selectedRule != null && rawRuleId === selectedRule.ruleId}
-              onToggleRaw={() => selectedRule && toggleRaw(selectedRule.ruleId)}
-              onSaveRaw={onSaveRaw}
+              onSaveCssRule={onSaveCssRule}
               onRemoveRule={onRemoveRule}
             />
           </div>
diff --git a/src/style-panel/embed-editor.css b/src/style-panel/embed-editor.css
index d54df6b3..fe4eedad 100644
--- a/src/style-panel/embed-editor.css
+++ b/src/style-panel/embed-editor.css
@@ -390,6 +390,9 @@
 .embed-editor_section-block.is-collapsed .embed-editor_section-chevron {
   transform: rotate(-90deg);
 }
+.embed-editor_css-code.is-collapsed .embed-editor_section-chevron {
+  transform: rotate(-90deg);
+}
 
 .embed-editor_section-body {
   display: flex;
@@ -2927,23 +2930,133 @@ textarea.embed-editor_value-input.is-expanded {
   cursor: not-allowed;
 }
 
-/* ── Raw rule editor ── */
+/* ── Matching CSS code ── */
 
-.embed-editor_rule-edit {
+.embed-editor_css-code {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
-}
-
-.embed-editor_rule-code {
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-page);
+  gap: var(--space-4);
+  border-top: var(--border-width-thin) solid var(--color-border-default);
 }
-
-.embed-editor_rule-actions {
+.embed-editor_css-code-header {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
   gap: var(--space-3);
+  width: 100%;
+  min-width: 0;
+  padding-top: var(--space-5);
+}
+.embed-editor_css-code-toggle {
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.embed-editor_css-code-toggle:hover:not(:disabled),
+.embed-editor_css-code-toggle:focus-visible:not(:disabled) {
+  background: transparent;
+}
+.embed-editor_css-code-toggle:focus-visible {
+  outline: var(--border-width-default) solid var(--color-border-focus);
+  outline-offset: var(--border-width-default);
+}
+.embed-editor_css-code-title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+.embed-editor_css-code-source {
+  margin-left: auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+.embed-editor_css-code-chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+.embed-editor_css-code-header:hover .embed-editor_section-chevron {
+  color: var(--color-text-secondary);
+}
+.embed-editor_css-code-body {
+  padding: 0 0 var(--space-4);
+}
+.code-editor.embed-editor_css-code-editor {
+  /* The app-wide fallback editor adds 10px around every `.code-editor`.
+     This embedded surface already owns its spacing, so that padding made its
+     rounded box narrower than full-width controls such as the spacing model. */
+  padding: 0;
+}
+.embed-editor_css-code-editor .cm-scroller {
+  max-height: min(36vh, 360px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+.embed-editor_css-code-editor .cm-content {
+  min-height: 100px;
+  max-height: none;
+}
+.embed-editor_css-code-preview {
+  width: 100%;
+  min-height: 100px;
+  max-height: min(36vh, 360px);
+  margin: 0;
+  padding: var(--space-5);
+  border: 0;
+  border-radius: var(--radius-xl);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  tab-size: 2;
+}
+.embed-editor_css-code-preview:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+.embed-editor_css-code-line {
+  display: block;
+  min-height: 1lh;
+}
+.embed-editor_css-code-selector,
+.embed-editor_css-code-context {
+  color: var(--color-info);
+}
+.embed-editor_css-code-selector-unmatched {
+  color: var(--color-text-tertiary);
+}
+.embed-editor_css-code-property {
+  color: var(--color-text-primary);
+}
+.embed-editor_css-code-punctuation {
+  color: var(--color-text-secondary);
+}
+.embed-editor_css-code-line.is-overridden {
+  color: var(--color-text-tertiary);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+.embed-editor_css-code-empty {
+  margin: 0;
+  padding: var(--space-5);
+  border-radius: var(--radius-xl);
+  background: var(--color-bg-surface);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
 }
 
 /* ── Empty / errors ── */
@@ -3266,7 +3379,7 @@ textarea.embed-editor_value-input.is-expanded {
   animation: embed-editor-spin 0.7s linear infinite;
 }
 /* Nothing to reveal (or not counted yet): the row holds its place, quietly. */
-.embed-editor_globals-check.is-empty {
+.embed-editor_selector-filter.is-empty {
   opacity: 0.45;
   cursor: default;
 }
@@ -3307,6 +3420,38 @@ textarea.embed-editor_value-input.is-expanded {
 .embed-editor_selector-chip.is-active:hover:not(:disabled) {
   background: var(--color-class-tag-bg);
 }
+.embed-editor_selector-chip.is-component:not(.is-pending) {
+  background: var(--color-component-tag-bg);
+  color: var(--color-component-tag);
+}
+.embed-editor_selector-chip.is-component:not(.is-active):hover:not(:disabled) {
+  background: var(--color-component-tag-bg-hover);
+  color: var(--color-component-tag);
+}
+.embed-editor_selector-chip.is-component.is-active {
+  background: var(--color-component-tag-bg-active);
+  color: #fff;
+}
+.embed-editor_selector-chip.is-component.is-active:hover:not(:disabled) {
+  background: var(--color-component-tag-bg-active);
+}
+/* Global and ancestor-dependent selectors are supporting context, not styles
+   attached directly to the selected element. Neutral grey takes precedence over
+   source provenance (including component green), with distinct hover/active steps. */
+.embed-editor_selector-chip:is(.is-global, .is-inherited):not(.is-pending) {
+  background: var(--color-selector-context-bg);
+  color: var(--color-text-primary);
+}
+.embed-editor_selector-chip:is(.is-global, .is-inherited):not(.is-active):hover:not(:disabled) {
+  background: var(--color-selector-context-bg-hover);
+}
+.embed-editor_selector-chip:is(.is-global, .is-inherited).is-active {
+  background: var(--color-selector-context-bg-active);
+  color: #fff;
+}
+.embed-editor_selector-chip:is(.is-global, .is-inherited).is-active:hover:not(:disabled) {
+  background: var(--color-selector-context-bg-active);
+}
 .embed-editor_selector-chip.is-active.is-pending:hover:not(:disabled) {
   background: transparent;
 }
@@ -4623,7 +4768,7 @@ textarea.embed-editor_value-input.is-expanded {
 /* Reveals the selectors that match nearly every element (:target,
    :focus-visible, *) — off by default so the list reads as what's actually on
    this element. Sits under the well, not in it: it isn't a selector to pick. */
-.embed-editor_globals-check {
+.embed-editor_selector-filter {
   margin-top: calc(var(--space-1) * -1);
   user-select: none;
 }
diff --git a/src/style-panel/lib/css-rule-view.ts b/src/style-panel/lib/css-rule-view.ts
new file mode 100644
index 00000000..6878d7d9
--- /dev/null
+++ b/src/style-panel/lib/css-rule-view.ts
@@ -0,0 +1,128 @@
+// Read-only CSS assembled from the rules that match the selected element.
+// Keeping formatting here makes the cascade view deterministic and testable without
+// mounting CodeMirror or the complete style panel.
+
+import type { MatchedRule } from './cascade'
+import { compareSpecificity, selectorListMembers } from './selectors'
+import type { Specificity } from './types'
+
+export type CssRuleHighlight = {
+  readonly from: number
+  readonly to: number
+  readonly className: string
+}
+
+export type CssRuleRange = {
+  readonly from: number
+  readonly to: number
+}
+
+export type CssRuleView = {
+  readonly code: string
+  readonly highlights: readonly CssRuleHighlight[]
+  readonly selectorLists: readonly CssRuleRange[]
+  readonly selectors: readonly CssRuleRange[]
+}
+
+type RankedRule = {
+  readonly matched: MatchedRule
+  readonly specificity: Specificity
+}
+
+type RuleCode = CssRuleView
+
+const OVERRIDDEN_CLASS = 'embed-editor_css-code-overridden'
+
+function strongestSpecificity(matched: MatchedRule): Specificity {
+  let strongest: Specificity = [0, 0, 0]
+  for (const selector of matched.matchedSelectors) {
+    if (compareSpecificity(selector.specificity, strongest) > 0) {
+      strongest = selector.specificity
+    }
+  }
+  return strongest
+}
+
+function indent(depth: number): string {
+  return '  '.repeat(depth)
+}
+
+function formatRule(matched: MatchedRule): RuleCode {
+  const parts: string[] = []
+  const highlights: CssRuleHighlight[] = []
+  const selectorLists: CssRuleRange[] = []
+  const selectors: CssRuleRange[] = []
+  let length = 0
+  const append = (text: string) => {parts.push(text); length += text.length}
+  let depth = 0
+
+  for (const context of matched.rule.atContext) {
+    append(`${indent(depth)}${context} {\n`)
+    depth += 1
+  }
+  const selectorIndent = indent(depth)
+  const selectorFrom = length + selectorIndent.length
+  append(`${selectorIndent}${matched.rule.selectorText} {\n`)
+  selectorLists.push({ from: selectorFrom, to: selectorFrom + matched.rule.selectorText.length })
+  const matchedTexts = new Set(matched.matchedSelectors.map((selector) => selector.text))
+  for (const member of selectorListMembers(matched.rule.selectorText)) {
+    if (!matchedTexts.has(member.text)) {continue}
+    selectors.push({ from: selectorFrom + member.from, to: selectorFrom + member.to })
+  }
+  if (selectors.length === 0 && matched.matchedSelectors.length > 0) {
+    selectors.push({ from: selectorFrom, to: selectorFrom + matched.rule.selectorText.length })
+  }
+  for (const declaration of matched.rule.declarations) {
+    const line = `${indent(depth + 1)}${declaration.prop}: ${declaration.value}`
+      + `${declaration.important ? ' !important' : ''};`
+    const from = length
+    append(`${line}\n`)
+    if (matched.declStatus[declaration.declId]?.winning === false) {
+      highlights.push({ from, to: from + line.length, className: OVERRIDDEN_CLASS })
+    }
+  }
+  append(`${indent(depth)}}`)
+  while (depth > 0) {
+    depth -= 1
+    append(`\n${indent(depth)}}`)
+  }
+  return { code: parts.join(''), highlights, selectorLists, selectors }
+}
+
+/** Format matching rules strongest-first, preserving source order as a tiebreaker. */
+export function buildCssRuleView(rules: readonly MatchedRule[]): CssRuleView {
+  const ranked: RankedRule[] = rules.map((matched) => ({
+    matched,
+    specificity: strongestSpecificity(matched),
+  }))
+  ranked.sort((first, second) =>
+    compareSpecificity(second.specificity, first.specificity)
+      || second.matched.rule.order - first.matched.rule.order,
+  )
+
+  const parts: string[] = []
+  const highlights: CssRuleHighlight[] = []
+  const selectorLists: CssRuleRange[] = []
+  const selectors: CssRuleRange[] = []
+  let offset = 0
+  for (const entry of ranked) {
+    const rule = formatRule(entry.matched)
+    if (parts.length > 0) {parts.push('\n\n'); offset += 2}
+    parts.push(rule.code)
+    for (const highlight of rule.highlights) {
+      highlights.push({
+        from: highlight.from + offset,
+        to: highlight.to + offset,
+        className: highlight.className,
+      })
+    }
+    for (const selector of rule.selectors) {
+      selectors.push({ from: selector.from + offset, to: selector.to + offset })
+    }
+    for (const selectorList of rule.selectorLists) {
+      selectorLists.push({ from: selectorList.from + offset, to: selectorList.to + offset })
+    }
+    offset += rule.code.length
+  }
+  return { code: parts.join(''), highlights, selectorLists, selectors }
+}
diff --git a/src/style-panel/lib/css.ts b/src/style-panel/lib/css.ts
index db8f30a8..12ec5e58 100644
--- a/src/style-panel/lib/css.ts
+++ b/src/style-panel/lib/css.ts
@@ -8,7 +8,7 @@
 
 import postcss, { type Root, type Rule, type AtRule, type ChildNode, type Declaration } from 'postcss'
 import type { ParsedDeclaration, ParsedRule, StyleRegion } from './types'
-import { parseSelectorList } from './selectors'
+import { parseSelectorList, selectorListMembers } from './selectors'
 import { selectorKey } from './resolved'
 
 // A direct child rule of `container` whose selector is the SAME target as `selector`
@@ -124,24 +124,7 @@ type WalkContext = {
 
 /** Split a selector list on top-level commas (ignoring commas inside `()`/`[]`). */
 function splitTopLevelCommas(text: string): string[] {
-  const parts: string[] = []
-  let paren = 0
-  let bracket = 0
-  let start = 0
-  for (let i = 0; i < text.length; i += 1) {
-    const c = text[i]
-    if (c === '(') {paren += 1}
-    else if (c === ')') {paren = Math.max(0, paren - 1)}
-    else if (c === '[') {bracket += 1}
-    else if (c === ']') {bracket = Math.max(0, bracket - 1)}
-    else if (c === ',' && paren === 0 && bracket === 0) {
-      parts.push(text.slice(start, i).trim())
-      start = i + 1
-    }
-  }
-  const last = text.slice(start).trim()
-  if (last) {parts.push(last)}
-  return parts.filter(Boolean)
+  return selectorListMembers(text).map((member) => member.text)
 }
 
 /** Combine one parent selector with one nested selector per CSS nesting rules:
diff --git a/src/style-panel/lib/host.ts b/src/style-panel/lib/host.ts
index 856d96ce..44bbcba8 100644
--- a/src/style-panel/lib/host.ts
+++ b/src/style-panel/lib/host.ts
@@ -41,6 +41,9 @@ export type HostState = {
   /** Absolute path of the file being edited — its own <style> blocks come from
    *  the model, so it must not also be read off disk. */
   openFilePath: string | null
+  /** Whether the open editable file is a page or a component. Style nodes have
+   *  the same model shape in both, so their provenance must be carried separately. */
+  openFileKind: 'page' | 'component' | null
   /**
    * Bumped by the app whenever undo or redo runs. The panel reads its rules
    * from files and from the page model, and an undo rewrites both behind its
@@ -106,6 +109,7 @@ const state: HostState = {
   files: [],
   astroFiles: [],
   openFilePath: null,
+  openFileKind: null,
   renderedClasses: [],
   projectClasses: [],
   writeStyleNode: null,
diff --git a/src/style-panel/lib/resolved.ts b/src/style-panel/lib/resolved.ts
index 0d5fafad..0517b102 100644
--- a/src/style-panel/lib/resolved.ts
+++ b/src/style-panel/lib/resolved.ts
@@ -209,6 +209,8 @@ export type MatchedSelector = {
   state: StateKey
   /** True for a lone tag/class/attr compound (chip-composable / native-eligible). */
   simple: boolean
+  /** True when at least one matching rule comes from a component's style tag. */
+  fromComponent: boolean
   /** Normalized identity key (also used to dedupe + compare). */
   key: string
   /** Set for the active selector when no rule exists for it yet (a freshly picked /
@@ -228,6 +230,32 @@ export type MatchedSelector = {
   queryDisplay?: string
 }
 
+type MatchedSelectorCandidate = Omit<MatchedSelector, 'key' | 'order'>
+
+function listMatchedSelectorsCandidate(input: {
+  readonly rule: ParsedRule
+  readonly text: string
+  readonly specificity: Specificity
+  readonly state: StateKey
+  readonly simple: boolean
+  readonly inContext: boolean
+}): MatchedSelectorCandidate {
+  return {
+    text: input.text,
+    specificity: input.specificity,
+    state: input.state,
+    simple: input.simple,
+    inContext: input.inContext,
+    fromComponent: input.rule.fromComponent,
+    ...(input.rule.nestedDisplay === undefined
+      ? {}
+      : { display: input.rule.nestedDisplay }),
+    ...(input.rule.queryDisplay === undefined
+      ? {}
+      : { queryDisplay: input.rule.queryDisplay }),
+  }
+}
+
 const normalizeSelectorText = (text: string) =>
   text.replace(/\s*([>+~])\s*/g, ' $1 ').replace(/\s+/g, ' ').trim()
 
@@ -265,29 +293,24 @@ export function listMatchedSelectors(model: RuleModel, context: ContextKey): Mat
   const all = [...model.base, ...model.conditional]
   const byKey = new Map<string, MatchedSelector>()
   let order = 0 // source-order rank, assigned on first appearance
-  const addChip = (text: string, simple: boolean, state: StateKey, specificity: Specificity, inContext: boolean, display?: string, queryDisplay?: string) => {
-    const key = selectorKey(text)
+  const addChip = (chip: MatchedSelectorCandidate) => {
+    const key = selectorKey(chip.text)
     const existing = byKey.get(key)
     if (existing) {
       // A selector styled in several contexts is one chip. When a later match lives in
       // the viewed context, adopt its in-context flag AND its query display so the `@`
       // marker attaches even though an out-of-query rule (iterated first) created it.
-      if (inContext) {
+      if (chip.inContext) {
         existing.inContext = true
-        if (queryDisplay) {existing.queryDisplay = queryDisplay}
+        if (chip.queryDisplay) {existing.queryDisplay = chip.queryDisplay}
       }
+      if (chip.fromComponent) {existing.fromComponent = true}
       return
     }
     byKey.set(key, {
-      text,
-      specificity,
-      state,
-      simple,
+      ...chip,
       key,
-      inContext,
       order: order++,
-      ...(display === undefined ? {} : { display }),
-      ...(queryDisplay === undefined ? {} : { queryDisplay }),
     })
   }
 
@@ -307,16 +330,36 @@ export function listMatchedSelectors(model: RuleModel, context: ContextKey): Mat
       // A lone universal (`*`) matches everything — too generic to be a useful chip on
       // its own. Skip it UNLESS it's part of a more specific selector (a combinator,
       // a state, or a pseudo-element makes it non-bare, so it isn't caught here).
-      if (canon.universal && canon.oneCompound && canon.tokens.length === 0 && !canon.pseudoElement && canon.pseudoClasses.length === 0) {continue}
+      if (
+        canon.universal &&
+        canon.oneCompound &&
+        canon.tokens.length === 0 &&
+        !canon.pseudoElement &&
+        canon.pseudoClasses.length === 0
+      ) {continue}
       if (canon.splittable) {
-        addChip(sel.text, canon.simple, stateOf(canon.pseudoClasses), sel.specificity, inContext, matched.rule.nestedDisplay, matched.rule.queryDisplay)
+        addChip(listMatchedSelectorsCandidate({
+          rule: matched.rule,
+          text: sel.text,
+          simple: canon.simple,
+          state: stateOf(canon.pseudoClasses),
+          specificity: sel.specificity,
+          inContext,
+        }))
       } else if (!complexSpec || compareSpecificity(sel.specificity, complexSpec) > 0) {
         complexSpec = sel.specificity
       }
     }
     if (complexSpec) {
       const canon = canonicalCompound(matched.rule.selectorText)
-      addChip(matched.rule.selectorText, false, stateOf(canon.pseudoClasses), complexSpec, inContext, matched.rule.nestedDisplay, matched.rule.queryDisplay)
+      addChip(listMatchedSelectorsCandidate({
+        rule: matched.rule,
+        text: matched.rule.selectorText,
+        simple: false,
+        state: stateOf(canon.pseudoClasses),
+        specificity: complexSpec,
+        inContext,
+      }))
     }
   }
   return [...byKey.values()].sort(
diff --git a/src/style-panel/lib/selectors.ts b/src/style-panel/lib/selectors.ts
index af144631..464b65f6 100644
--- a/src/style-panel/lib/selectors.ts
+++ b/src/style-panel/lib/selectors.ts
@@ -94,6 +94,52 @@ export function parseSelectorList(selectorText: string): SelectorInfo[] {
   }))
 }
 
+export type SelectorListMember = {
+  readonly text: string
+  readonly from: number
+  readonly to: number
+}
+
+/** Locate top-level selector-list members without splitting commas in functions,
+ *  attributes, or quoted attribute values. Offsets refer to the original text. */
+export function selectorListMembers(selectorText: string): readonly SelectorListMember[] {
+  const members: SelectorListMember[] = []
+  let bracketDepth = 0
+  let parenthesisDepth = 0
+  let quote: '"' | "'" | null = null
+  let escaped = false
+  let start = 0
+  const append = (end: number) => {
+    const raw = selectorText.slice(start, end)
+    const leadingLength = raw.length - raw.trimStart().length
+    const text = raw.trim()
+    if (text.length === 0) {return}
+    const from = start + leadingLength
+    members.push({ text, from, to: from + text.length })
+  }
+
+  for (let index = 0; index < selectorText.length; index += 1) {
+    const character = selectorText[index] ?? ''
+    if (quote) {
+      if (escaped) {escaped = false; continue}
+      if (character === '\\') {escaped = true; continue}
+      if (character === quote) {quote = null}
+      continue
+    }
+    if (character === '"' || character === "'") {quote = character; continue}
+    if (character === '(') {parenthesisDepth += 1; continue}
+    if (character === ')') {parenthesisDepth = Math.max(0, parenthesisDepth - 1); continue}
+    if (character === '[') {bracketDepth += 1; continue}
+    if (character === ']') {bracketDepth = Math.max(0, bracketDepth - 1); continue}
+    if (character === ',' && parenthesisDepth === 0 && bracketDepth === 0) {
+      append(index)
+      start = index + 1
+    }
+  }
+  append(selectorText.length)
+  return members
+}
+
 /**
  * A single selector's subject compound projected into the element-token namespace
  * (`tag:div` / `class:a` / `attr:data-x`), matching snapshotTokens. `simple` is
@@ -158,6 +204,14 @@ export function canonicalCompound(selectorText: string): CanonicalCompound {
   return { simple, oneCompound, tokens, pseudoClasses, pseudoElement, splittable, universal: subject.universal }
 }
 
+/** True when the selector's subject is qualified by a parent or ancestor. */
+export function selectorDependsOnAncestor(selectorText: string): boolean {
+  const selectors = compileSelectorList(selectorText)
+  return selectors.some((selector) =>
+    selector.combinators.some((combinator) => combinator === ' ' || combinator === '>'),
+  )
+}
+
 /** Normalize a pseudo-element to its `::name` form (handles legacy `:before`), or ''. */
 export function normalizePseudoElement(pe: string | null | undefined): string {
   if (!pe) {return ''}
diff --git a/src/style-panel/lib/webflow.ts b/src/style-panel/lib/webflow.ts
index 8ea3e0c4..0e4adf54 100644
--- a/src/style-panel/lib/webflow.ts
+++ b/src/style-panel/lib/webflow.ts
@@ -238,6 +238,9 @@ function styleSources(): EmbedSource[] {
   const host = getHost()
   const out: EmbedSource[] = []
   let order = 0
+  const openComponentName = host.openFileKind === 'component'
+    ? host.openFilePath?.split(/[\\/]/).pop()?.replace(/\.[^.]+$/, '') ?? null
+    : null
 
   for (const f of host.files) {
     out.push({
@@ -279,8 +282,8 @@ function styleSources(): EmbedSource[] {
       key: `node:${n.id}`,
       label: isGlobal ? '<style is:global>' : '<style>',
       classNames: [],
-      fromComponent: false,
-      componentName: null,
+      fromComponent: host.openFileKind === 'component',
+      componentName: openComponentName,
       order: order++,
       element: n.id,
       origin: { kind: 'node', nodeId: n.id },
diff --git a/src/style-panel/tokens.css b/src/style-panel/tokens.css
index 3ce01af7..bae07d7f 100644
--- a/src/style-panel/tokens.css
+++ b/src/style-panel/tokens.css
@@ -94,6 +94,10 @@
   --color-component-tag:        #79e09c;
   --color-component-tag-bg:     rgba(37, 157, 77, 0.25);
   --color-component-tag-bg-hover: rgba(37, 157, 77, 0.40);
+  --color-component-tag-bg-active: #16783c;
+  --color-selector-context-bg:        var(--color-bg-surface);
+  --color-selector-context-bg-hover:  var(--color-bg-surface-raised);
+  --color-selector-context-bg-active: var(--color-bg-surface-high);
   /* Provenance label — a property set through another selector (Embed Editor). */
   --color-prop-orange:          #ffbc86;
   --color-prop-orange-bg:       rgba(223, 100, 12, 0.20);
diff --git a/src/styles.css b/src/styles.css
index d348888e..02fa6301 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -608,6 +608,13 @@ html[data-platform='win32'] .titlebar { padding-right: 148px; }
 .attr-row + .attr-row { border-top: 1px solid var(--border); }
 .attr-row:hover, .attr-row.editing { background: var(--bg-hover); }
 .attr-row .attr-name { color: var(--text-dim); flex-shrink: 0; }
+.attr-row.spread .attr-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .attr-row .attr-eq { color: var(--text-faint); flex-shrink: 0; }
 .attr-row .attr-value {
   color: var(--text);
@@ -698,12 +705,28 @@ html[data-platform='win32'] .titlebar { padding-right: 148px; }
 .list-field-row.is-after { box-shadow: inset 0 -1px 0 0 var(--accent); }
 .list-field-grip {
   display: flex;
+  padding: 0;
+  border: 0;
+  background: none;
   color: var(--text-faint);
   opacity: 0;
   cursor: grab;
   flex-shrink: 0;
+  touch-action: none;
+}
+.list-field-row:hover .list-field-grip,
+.list-field-row:focus-within .list-field-grip { opacity: 1; }
+.list-field-row .list-field-grip:hover { background: none; }
+.list-field-grip:active { cursor: grabbing; }
+.list-field-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  margin-right: 8px;
+  vertical-align: middle;
+  color: var(--text-dim);
 }
-.list-field-row:hover .list-field-grip { opacity: 1; }
 /* A button, so `justify-content: center` and the filled background come with
    it from the base rule — neither of which a row of text wants. The row draws
    its own hover; a second one inside it reads as a control inside a control. */
@@ -756,7 +779,8 @@ html[data-platform='win32'] .titlebar { padding-right: 148px; }
   border-radius: 4px;
   flex-shrink: 0;
 }
-.list-field-row:hover .list-field-remove { opacity: 1; }
+.list-field-row:hover .list-field-remove,
+.list-field-row:focus-within .list-field-remove { opacity: 1; }
 .list-field-remove:hover { color: var(--red); background: var(--bg-active); }
 /* A button, so it arrives centred from the base rule — which reads as a
    caption under the list rather than the next row of it. It is the row after
@@ -872,10 +896,12 @@ html[data-platform='win32'] .titlebar { padding-right: 148px; }
 .attr-editor-row:has(.cm-editor) > span {
   padding-top: 6px;
 }
-.attr-editor-row > .attr-asset-toggle { align-self: flex-start; }
+.attr-editor-row > .attr-asset-toggle,
+.attr-editor-row > .attr-expand-toggle { align-self: flex-start; }
 
-/* Always present, never in the way: switches the value to the file picker. */
-.attr-asset-toggle {
+/* Compact actions beside the value: expand its code or switch it to a file. */
+.attr-asset-toggle,
+.attr-expand-toggle {
   flex-shrink: 0;
   width: 22px;
   height: 26px;
@@ -884,7 +910,8 @@ html[data-platform='win32'] .titlebar { padding-right: 148px; }
   color: var(--text-faint);
   border-radius: 6px;
 }
-.attr-asset-toggle:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
+.attr-asset-toggle:hover:not(:disabled),
+.attr-expand-toggle:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
 .attr-asset-toggle.on { color: var(--accent); }
 
 .style-editor {
@@ -1482,8 +1509,70 @@ html[data-platform='win32'] .titlebar { padding-right: 148px; }
   min-height: 0;
 }
 .panel.left { width: 260px; flex-shrink: 0; }
+.panel.left.code-panel-shell {
+  width: clamp(360px, 34vw, 620px);
+  background: #111111;
+}
 .panel.right { width: 322px; flex-shrink: 0; border-right: none; border-left: 1px solid var(--border); }
 
+.code-panel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+}
+.code-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 10px 0 12px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-dim);
+  user-select: none;
+}
+.code-panel-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 600;
+}
+.code-panel-path {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  color: var(--text-faint);
+  font-family: var(--mono);
+  font-size: 10.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.code-panel-lines {
+  flex-shrink: 0;
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: var(--bg-active);
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 10px;
+}
+.code-panel-editor,
+.code-panel-editor .cm-host,
+.code-panel-editor .cm-editor { height: 100%; min-height: 0; }
+.code-panel-editor { flex: 1; overflow: hidden; }
+.code-panel-editor .cm-scroller { overflow: auto; }
+.code-panel-editor .cm-code-muted { opacity: 0.24; }
+.code-panel-editor .cm-component-link { transition: color 0.1s ease; }
+.code-panel-editor .cm-meta-held .cm-component-link:hover {
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .panel-section { display: flex; flex-direction: column; min-height: 0; }
 .panel-section + .panel-section { border-top: 1px solid var(--border); }
 .panel-section.grow { flex: 1; }
diff --git a/src/ui/CodeEditor.tsx b/src/ui/CodeEditor.tsx
index ec313aad..3c897396 100644
--- a/src/ui/CodeEditor.tsx
+++ b/src/ui/CodeEditor.tsx
@@ -1,15 +1,18 @@
 import React, { useEffect, useRef } from 'react';
-import { EditorView, basicSetup } from 'codemirror';
+import { basicSetup, EditorView } from 'codemirror';
 import type { MutableRefObject } from 'react';
 import type { LanguageSupport } from '@codemirror/language';
 import { assert } from '../../shared/assert';
-import { Annotation, EditorState, Transaction } from '@codemirror/state';
+import { Annotation, EditorState, StateEffect, StateField, Transaction } from '@codemirror/state';
+import { Decoration } from '@codemirror/view';
 import { css } from '@codemirror/lang-css';
 import { javascript } from '@codemirror/lang-javascript';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { html } from '@codemirror/lang-html';
 import { syntaxHighlighting, HighlightStyle, LanguageDescription } from '@codemirror/language';
 import { search } from '@codemirror/search';
 import { tags as t } from '@lezer/highlight';
+import { astroHighlight } from './astroHighlight';
 
 // CodeMirror 6 wrapper themed to match the app. Controlled-ish: `value` in,
 // `onChange(text)` out; external value changes replace the doc only when
@@ -65,7 +68,10 @@ export const appTheme = EditorView.theme(
       color: 'var(--text-faint)',
       border: 'none',
     },
-    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--text-dim)' },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent',
+      color: 'var(--text-dim)',
+    },
     '.cm-matchingBracket': {
       backgroundColor: 'rgba(0, 153, 255, 0.2)',
       outline: 'none',
@@ -75,9 +81,11 @@ export const appTheme = EditorView.theme(
       border: '1px solid var(--border-strong)',
       borderRadius: '6px',
     },
-    '.cm-tooltip-autocomplete ul li[aria-selected]': { backgroundColor: 'var(--accent)' },
+    '.cm-tooltip-autocomplete ul li[aria-selected]': {
+      backgroundColor: 'var(--accent)',
+    },
   },
-  { dark: true },
+  { dark: true }
 );
 
 export const appHighlight = syntaxHighlighting(
@@ -88,12 +96,22 @@ export const appHighlight = syntaxHighlighting(
       { tag: [t.className, t.tagName], color: '#ffcb6b' },
       { tag: [t.string, t.special(t.string)], color: '#c3e88d' },
       { tag: [t.number, t.unit, t.bool, t.null, t.atom], color: '#f78c6c' },
-      { tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#82aaff' },
+      {
+        tag: [t.function(t.variableName), t.function(t.propertyName)],
+        color: '#82aaff',
+      },
       { tag: [t.variableName, t.definition(t.variableName)], color: '#e0e0e0' },
-      { tag: [t.comment, t.blockComment, t.lineComment], color: '#616161', fontStyle: 'italic' },
+      {
+        tag: [t.comment, t.blockComment, t.lineComment],
+        color: '#616161',
+        fontStyle: 'italic',
+      },
       { tag: [t.operator, t.punctuation, t.separator], color: '#89ddff' },
       { tag: [t.labelName, t.attributeName], color: '#80cbc4' },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#f78c6c' },
+      {
+        tag: [t.color, t.constant(t.name), t.standard(t.name)],
+        color: '#f78c6c',
+      },
       // Markdown: the structure of a document rather than of code. Headings
       // lead, code and links pick up the colours their kind already has
       // elsewhere in this theme, and the marks (#, *, `) stay quiet.
@@ -106,23 +124,55 @@ export const appHighlight = syntaxHighlighting(
       { tag: [t.list], color: '#89ddff' },
       { tag: [t.processingInstruction], color: '#616161' },
     ],
-    { themeType: 'dark' },
-  ),
+    { themeType: 'dark' }
+  )
 );
 
 export interface CodeEditorProps {
   readonly value?: string | null | undefined;
   readonly language?: string | undefined;
-  readonly onChange?: ((text: string) => void) | undefined;
+  readonly onChange?: ((text: string, position: number) => void) | undefined;
   readonly revealLine?: number | null | undefined;
+  readonly activeRange?: CodeEditorRange | null | undefined;
+  readonly componentRanges?: readonly CodeEditorComponentRange[] | undefined;
+  readonly onPositionChange?: ((position: number) => void) | undefined;
+  readonly onOpenComponent?: ((name: string, id: string) => void) | undefined;
+}
+
+export interface CodeEditorRange {
+  readonly from: number;
+  readonly to: number;
+}
+
+export interface CodeEditorComponentRange extends CodeEditorRange {
+  readonly id: string;
+  readonly name: string;
+}
+
+interface CodeDecorations {
+  readonly active: CodeEditorRange | null;
+  readonly components: readonly CodeEditorComponentRange[];
 }
 
-export default function CodeEditor({ value, language, onChange, revealLine }: CodeEditorProps) {
+const codeDecorations = StateEffect.define<CodeDecorations>();
+const codeDecorationField = StateField.define({
+  create: () => Decoration.none,
+  update: (decorations, transaction) => {
+    const changed = transaction.effects.find((effect) => effect.is(codeDecorations));
+    return changed
+      ? codeEditorDecorations(transaction.state.doc.length, changed.value)
+      : decorations.map(transaction.changes);
+  },
+  provide: (field) => EditorView.decorations.from(field),
+});
+
+export default function CodeEditor(props: CodeEditorProps) {
+  const { value, language, revealLine, activeRange, componentRanges } = props;
   const hostRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
   // These values change without replacing the editor, preserving history and selection.
-  const latest = useRef({ value, onChange });
-  latest.current = { value, onChange };
+  const latest = useRef(props);
+  latest.current = props;
   useEffect(() => {
     const parent = hostRef.current;
     assert(parent !== null, 'CodeEditor: mounted host exists');
@@ -149,6 +199,7 @@ export default function CodeEditor({ value, language, onChange, revealLine }: Co
       });
     }
   }, [value]);
+  useCodeDecorations(viewRef, activeRange, componentRanges);
   useEffect(() => {
     const view = viewRef.current;
     if (!view || !revealLine) {
@@ -165,12 +216,36 @@ export default function CodeEditor({ value, language, onChange, revealLine }: Co
   return <div ref={hostRef} className="cm-host" />;
 }
 
+function useCodeDecorations(
+  viewRef: MutableRefObject<EditorView | null>,
+  activeRange: CodeEditorRange | null | undefined,
+  componentRanges: readonly CodeEditorComponentRange[] | undefined
+): void {
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) {
+      return;
+    }
+    view.dispatch({
+      effects: codeDecorations.of({
+        active: activeRange ?? null,
+        components: componentRanges ?? [],
+      }),
+    });
+    if (activeRange) {
+      view.dispatch({
+        effects: EditorView.scrollIntoView(activeRange.from, { y: 'nearest' }),
+      });
+    }
+  }, [activeRange, componentRanges, viewRef]);
+}
+
 function codeEditorCreate(
   parent: HTMLDivElement,
   language: string | undefined,
-  latest: MutableRefObject<Pick<CodeEditorProps, 'value' | 'onChange'>>,
+  latest: MutableRefObject<CodeEditorProps>
 ): EditorView {
-  return new EditorView({
+  const view = new EditorView({
     parent,
     state: EditorState.create({
       doc: latest.current.value ?? '',
@@ -180,20 +255,103 @@ function codeEditorCreate(
         search({ top: true }),
         codeEditorLanguage(language),
         appTheme,
-        appHighlight,
+        language === 'astro' ? astroHighlight : appHighlight,
+        codeDecorationField,
+        codeEditorInteractions(latest),
         EditorView.updateListener.of((update) => {
           if (update.docChanged) {
             if (!update.transactions.some((transaction) => transaction.annotation(externalValue))) {
-              latest.current.onChange?.(update.state.doc.toString());
+              latest.current.onChange?.(
+                update.state.doc.toString(),
+                update.state.selection.main.head
+              );
             }
           }
         }),
       ],
     }),
   });
+  view.dispatch({
+    effects: codeDecorations.of({
+      active: latest.current.activeRange ?? null,
+      components: latest.current.componentRanges ?? [],
+    }),
+  });
+  return view;
+}
+
+function codeEditorInteractions(latest: MutableRefObject<CodeEditorProps>) {
+  return EditorView.domEventHandlers({
+    click: (event, view) => codeEditorClick(event, view, latest),
+    keydown: (event, view) => codeEditorModifier(event.metaKey, view),
+    keyup: (event, view) => codeEditorModifier(event.metaKey, view),
+    mousemove: (event, view) => codeEditorModifier(event.metaKey, view),
+    blur: (_event, view) => codeEditorModifier(false, view),
+  });
+}
+
+function codeEditorClick(
+  event: MouseEvent,
+  view: EditorView,
+  latest: MutableRefObject<CodeEditorProps>
+): boolean {
+  const position = view.posAtCoords({ x: event.clientX, y: event.clientY });
+  if (position === null) {
+    return false;
+  }
+  const component = latest.current.componentRanges?.find(
+    (range) => range.from <= position && position <= range.to
+  );
+  if (event.metaKey && component) {
+    event.preventDefault();
+    latest.current.onOpenComponent?.(component.name, component.id);
+    return true;
+  }
+  latest.current.onPositionChange?.(position);
+  return false;
+}
+
+function codeEditorModifier(active: boolean, view: EditorView): false {
+  view.dom.classList.toggle('cm-meta-held', active);
+  return false;
+}
+
+function codeEditorDecorations(length: number, state: CodeDecorations) {
+  const ranges = [];
+  const active = codeEditorRangeWithin(state.active, length);
+  if (active) {
+    if (active.from > 0) {
+      ranges.push(Decoration.mark({ class: 'cm-code-muted' }).range(0, active.from));
+    }
+    if (active.to < length) {
+      ranges.push(Decoration.mark({ class: 'cm-code-muted' }).range(active.to, length));
+    }
+  }
+  for (const component of state.components) {
+    const range = codeEditorRangeWithin(component, length);
+    if (range && range.from < range.to) {
+      ranges.push(Decoration.mark({ class: 'cm-component-link' }).range(range.from, range.to));
+    }
+  }
+  return Decoration.set(ranges, true);
+}
+
+function codeEditorRangeWithin(
+  range: CodeEditorRange | null,
+  length: number
+): CodeEditorRange | null {
+  if (!range || range.from < 0 || range.to < range.from || range.to > length) {
+    return null;
+  }
+  return range;
 }
 
 function codeEditorLanguage(language: string | undefined): LanguageSupport {
+  if (language === 'astro') {
+    // HTML supplies structural editing while the official Astro TextMate
+    // grammar supplies the colors, including embedded expressions and scripts.
+    return html();
+  }
   if (language === 'css') {
     return css();
   }
@@ -202,7 +360,11 @@ function codeEditorLanguage(language: string | undefined): LanguageSupport {
     return markdown({
       base: markdownLanguage,
       codeLanguages: [
-        LanguageDescription.of({ name: 'css', extensions: ['css'], load: async () => css() }),
+        LanguageDescription.of({
+          name: 'css',
+          extensions: ['css'],
+          load: async () => css(),
+        }),
         LanguageDescription.of({
           name: 'javascript',
           alias: ['js', 'jsx', 'ts', 'tsx', 'typescript'],
diff --git a/src/ui/LeftRail.tsx b/src/ui/LeftRail.tsx
index 4d72f1f1..a663835e 100644
--- a/src/ui/LeftRail.tsx
+++ b/src/ui/LeftRail.tsx
@@ -8,6 +8,7 @@ import {
   AssetManagerIcon,
   CmsIcon,
   VariableIcon,
+  CodeIcon,
   HistoryIcon,
 } from './Icons.jsx';
 
@@ -19,6 +20,7 @@ const TABS = [
   { id: 'assets', title: 'Assets', shortcut: 'J', Icon: AssetManagerIcon },
   { id: 'cms', title: 'CMS', shortcut: '⌥C', Icon: CmsIcon },
   { id: 'variables', title: 'Variables', shortcut: '⌥V', Icon: VariableIcon },
+  { id: 'code', title: 'Code', shortcut: 'C', Icon: CodeIcon },
   { id: 'history', title: 'History', shortcut: '⌥H', Icon: HistoryIcon },
 ] as const;
 export type RailTab = (typeof TABS)[number]['id'];
@@ -132,6 +134,8 @@ function useRailKeys(onSelect: (tab: RailTab) => void, componentOpen: boolean):
         id = 'properties';
       } else if (k === 'j' && !e.shiftKey) {
         id = 'assets';
+      } else if (k === 'c' && !e.shiftKey) {
+        id = 'code';
       }
       if (id) {
         e.preventDefault();
diff --git a/src/ui/ListFieldRow.tsx b/src/ui/ListFieldRow.tsx
new file mode 100644
index 00000000..136f89b2
--- /dev/null
+++ b/src/ui/ListFieldRow.tsx
@@ -0,0 +1,54 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode, Ref } from 'react';
+import { DragIcon, TrashIcon } from './Icons';
+
+interface ListFieldRowProps {
+  readonly children: ReactNode;
+  readonly icon?: ReactNode;
+  readonly grip?: ReactNode;
+  readonly className?: string;
+  readonly triggerClassName?: string;
+  readonly rowProps?: HTMLAttributes<HTMLDivElement> & { readonly ref?: Ref<HTMLDivElement> };
+  readonly expanded?: boolean;
+  readonly disabled: boolean;
+  readonly removeDisabled: boolean;
+  readonly removeLabel: string;
+  readonly onOpen: MouseEventHandler<HTMLButtonElement>;
+  readonly onRemove: () => void;
+}
+
+// Property definitions and option values share one row so their sizing cannot drift apart.
+export default function ListFieldRow(props: ListFieldRowProps) {
+  return (
+    <div {...props.rowProps} className={`list-field-row ${props.className ?? ''}`}>
+      {props.grip ?? (
+        <span className="list-field-grip" aria-hidden="true">
+          <DragIcon size={12} />
+        </span>
+      )}
+      <button
+        type="button"
+        className={`list-field-text ${props.triggerClassName ?? ''}`}
+        aria-expanded={props.expanded}
+        disabled={props.disabled}
+        onClick={props.onOpen}
+      >
+        {props.icon && (
+          <span className="list-field-icon" aria-hidden="true">
+            {props.icon}
+          </span>
+        )}
+        {props.children}
+      </button>
+      <button
+        type="button"
+        className="ghost list-field-remove"
+        title="Remove"
+        aria-label={props.removeLabel}
+        disabled={props.removeDisabled}
+        onClick={props.onRemove}
+      >
+        <TrashIcon size={12} />
+      </button>
+    </div>
+  );
+}
diff --git a/src/ui/astroHighlight.ts b/src/ui/astroHighlight.ts
new file mode 100644
index 00000000..3a436d78
--- /dev/null
+++ b/src/ui/astroHighlight.ts
@@ -0,0 +1,209 @@
+// Astro's official editor support is a TextMate grammar with embedded TSX,
+// TypeScript, CSS and JSON grammars. Shiki is the small adapter that runs that
+// grammar in the browser; a hand-written approximation would drift from the
+// Astro VS Code extension whenever Astro adds syntax.
+
+import { StateEffect, StateField, type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  type DecorationSet,
+  type ViewUpdate,
+} from '@codemirror/view';
+import { LIMITS } from '../../shared/limits';
+
+const highlightDelayMs = 60;
+const fontItalic = 1;
+const fontBold = 2;
+const fontUnderline = 4;
+const fontStrikethrough = 8;
+const colorPattern = /^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/i;
+const mutedColorReplacements = {
+  '#0db9d7': '#7FA6B8',
+  '#41a6b5': '#7FA6B8',
+  '#449dab': '#789AAA',
+  '#61bdf2': '#86AFC5',
+  '#6d91de': '#8799BE',
+  '#73daca': '#83ADB3',
+  '#7aa2f7': '#879DC4',
+  '#7dcfff': '#8CB3C8',
+  '#89ddff': '#91B5C6',
+  '#914c54': '#927386',
+  '#9abdf5': '#94AAC8',
+  '#9d7cd8': '#A18EBE',
+  '#9ece6a': '#C09B78',
+  '#b267e6': '#A586BE',
+  '#b4f9f8': '#A6C0C5',
+  '#ba3c97': '#AE789F',
+  '#bb9af7': '#AA94C0',
+  '#db4b4b': '#B17E9B',
+  '#de5971': '#B4829B',
+  '#e0af68': '#C19D73',
+  '#f7768e': '#BF8AA3',
+  '#fc7b7b': '#BF8AA3',
+  '#ff5370': '#BF8AA3',
+  '#ff9e64': '#C99470',
+  '#ffdb69': '#C3A477',
+} as const;
+
+const replaceAstroHighlight = StateEffect.define<DecorationSet>();
+const astroHighlightField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update: (decorations, transaction) => {
+    const replacement = transaction.effects.find((effect) => effect.is(replaceAstroHighlight));
+    return replacement ? replacement.value : decorations.map(transaction.changes);
+  },
+  provide: (field) => EditorView.decorations.from(field),
+});
+
+type AstroHighlighter = Awaited<ReturnType<typeof createAstroHighlighter>>;
+let highlighterPromise: Promise<AstroHighlighter> | undefined;
+
+export const astroHighlight: Extension = [
+  astroHighlightField,
+  EditorView.baseTheme({
+    '.cm-astro-token, .cm-astro-token *': {
+      color: 'var(--astro-token-color) !important',
+    },
+  }),
+  ViewPlugin.fromClass(
+    class {
+      private revision = 0;
+      private timer: ReturnType<typeof setTimeout> | undefined;
+
+      constructor(private readonly view: EditorView) {
+        this.schedule();
+      }
+
+      update(update: ViewUpdate): void {
+        if (update.docChanged) {
+          this.schedule();
+        }
+      }
+
+      destroy(): void {
+        this.revision += 1;
+        clearTimeout(this.timer);
+      }
+
+      private schedule(): void {
+        this.revision += 1;
+        const revision = this.revision;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          void highlightAstro(this.view, revision, () => this.revision).catch((error: unknown) => {
+            // Highlighting is presentation, so a grammar failure must not
+            // take editing down with it. Keep the plain structural parser.
+            console.error('Astro syntax highlighting failed', error);
+          });
+        }, highlightDelayMs);
+      }
+    }
+  ),
+];
+
+async function highlightAstro(
+  view: EditorView,
+  revision: number,
+  currentRevision: () => number
+): Promise<void> {
+  const source = view.state.doc.toString();
+  if (source.length > LIMITS.syntaxHighlightCharsMax) {
+    replaceHighlight(view, Decoration.none, revision, currentRevision, source);
+    return;
+  }
+  const instance = await astroHighlighter();
+  const lines = instance.codeToTokensBase(source, {
+    lang: 'astro',
+    theme: 'tokyo-night',
+    colorReplacements: mutedColorReplacements,
+  });
+  const ranges = lines.flatMap((line) =>
+    line.flatMap((token) => {
+      const to = token.offset + token.content.length;
+      const style = astroTokenStyle(token);
+      if (token.content.length === 0 || style.length === 0) {
+        return [];
+      }
+      if (token.offset < 0 || to > source.length) {
+        throw new Error('Astro highlighter returned a token outside the document');
+      }
+      return [
+        Decoration.mark({
+          class: 'cm-astro-token',
+          attributes: { style },
+        }).range(token.offset, to),
+      ];
+    })
+  );
+  replaceHighlight(view, Decoration.set(ranges, true), revision, currentRevision, source);
+}
+
+function replaceHighlight(
+  view: EditorView,
+  decorations: DecorationSet,
+  revision: number,
+  currentRevision: () => number,
+  source: string
+): void {
+  if (revision !== currentRevision()) {
+    return;
+  }
+  if (view.state.doc.toString() !== source) {
+    return;
+  }
+  view.dispatch({ effects: replaceAstroHighlight.of(decorations) });
+}
+
+function astroTokenStyle(token: {
+  readonly color?: string | undefined;
+  readonly fontStyle?: number | undefined;
+}): string {
+  const styles: string[] = [];
+  if (token.color && colorPattern.test(token.color)) {
+    styles.push(`--astro-token-color:${token.color};color:${token.color}`);
+  }
+  const fontStyle = token.fontStyle ?? 0;
+  if ((fontStyle & fontItalic) !== 0) {
+    styles.push('font-style:italic');
+  }
+  if ((fontStyle & fontBold) !== 0) {
+    styles.push('font-weight:700');
+  }
+  const lines = [];
+  if ((fontStyle & fontUnderline) !== 0) {
+    lines.push('underline');
+  }
+  if ((fontStyle & fontStrikethrough) !== 0) {
+    lines.push('line-through');
+  }
+  if (lines.length > 0) {
+    styles.push(`text-decoration:${lines.join(' ')}`);
+  }
+  return styles.join(';');
+}
+
+function astroHighlighter(): Promise<AstroHighlighter> {
+  if (highlighterPromise) {
+    return highlighterPromise;
+  }
+  highlighterPromise = createAstroHighlighter();
+  return highlighterPromise;
+}
+
+async function createAstroHighlighter() {
+  // Dynamic imports keep the grammar and regex compiler out of the initial
+  // application bundle. They are paid for only when an Astro editor opens.
+  const [core, engine, language, theme] = await Promise.all([
+    import('@shikijs/core'),
+    import('@shikijs/engine-javascript'),
+    import('@shikijs/langs/astro'),
+    import('@shikijs/themes/tokyo-night'),
+  ]);
+  return core.createHighlighterCore({
+    langs: [language.default],
+    themes: [theme.default],
+    engine: engine.createJavaScriptRegexEngine(),
+  });
+}
diff --git a/src/variablesBridge.ts b/src/variablesBridge.ts
index cda9d950..7e6bd2cd 100644
--- a/src/variablesBridge.ts
+++ b/src/variablesBridge.ts
@@ -60,6 +60,7 @@ export interface VariablesSnapshot {
   readonly values: Readonly<Record<string, string>>;
 }
 export const VARIABLES_LIMITS = { entriesMax: 100_000, fileCharsMax: 1_048_576 } as const;
+const PRIVATE_VARIABLE_PREFIX = '--_';
 
 export function parseCSSVariables(input: unknown): Result<VariablesSnapshot, string> {
   const source = record(input);
@@ -85,7 +86,67 @@ export async function readCSSVariables(
     return { ok: false, error: error instanceof Error ? error.message : String(error) };
   }
   // Invalid wire shapes indicate a contract bug, so parsing stays outside the I/O catch.
-  return parseCSSVariables(response);
+  const result = parseCSSVariables(response);
+  return result.ok ? { ok: true, value: variablesForPanel(result.value) } : result;
+}
+
+// A leading underscore marks a private implementation token. The values map stays
+// complete because visible variables may resolve through private variables even though
+// the private declarations themselves do not belong in the panel.
+function variablesForPanel(snapshot: VariablesSnapshot): VariablesSnapshot {
+  const files = snapshot.files.map(variableFileForPanel);
+  return { files, values: snapshot.values };
+}
+
+function variableFileForPanel(file: VariableFile): VariableFile {
+  if (file.error !== undefined) {
+    return file;
+  }
+  const groups = file.groups
+    .map((group) => ({
+      ...group,
+      blocks: group.blocks
+        .map(variableBlockForPanel)
+        .filter((block): block is VariableBlock => block !== undefined),
+    }))
+    .filter((group) => variableGroupCount(group) > 0);
+  const count = groups.reduce((total, group) => total + variableGroupCount(group), 0);
+  return { ...file, groups, count };
+}
+
+function variableGroupCount(group: VariableGroup): number {
+  return group.blocks.reduce(
+    (blockTotal, block) =>
+      blockTotal +
+      block.rows.reduce(
+        (rowTotal, row) => rowTotal + row.cells.filter((cell) => cell !== null).length,
+        0,
+      ),
+    0,
+  );
+}
+
+function variableBlockForPanel(block: VariableBlock): VariableBlock | undefined {
+  const rows = block.rows
+    .map(variableRowForPanel)
+    .filter((row): row is VariableRow => row !== undefined);
+  if (block.rows.length > 0 && rows.length === 0) {
+    return undefined;
+  }
+  if (block.kind === 'matrix') {
+    return { ...block, rows };
+  }
+  return { ...block, rows };
+}
+
+function variableRowForPanel(row: VariableRow): VariableRow | undefined {
+  const cells = row.cells.map((cell) =>
+    cell?.name.startsWith(PRIVATE_VARIABLE_PREFIX) ? null : cell,
+  );
+  if (!cells.some((cell) => cell !== null)) {
+    return undefined;
+  }
+  return { ...row, cells };
 }
 
 // One budget covers all nested collections, so separate small arrays cannot evade the cap.
diff --git a/test/code-editor-lifecycle.js b/test/code-editor-lifecycle.js
index 86d07934..7ff9cda4 100644
--- a/test/code-editor-lifecycle.js
+++ b/test/code-editor-lifecycle.js
@@ -2,16 +2,42 @@ const assert = require('node:assert/strict');
 const path = require('node:path');
 
 (async () => {
-  const outfile = path.join(__dirname, '../node_modules/.stacki-test/code-editor-lifecycle.bundle.js');
+  const outfile = path.join(
+    __dirname,
+    '../node_modules/.stacki-test/code-editor-lifecycle.bundle.js'
+  );
   await require('esbuild').build({
-    stdin: { contents: `export { default as CodeEditor } from './src/ui/CodeEditor.jsx'; export { EditorView } from '@codemirror/view';`, resolveDir: path.join(__dirname, '..'), loader: 'jsx' },
-    outfile, bundle: true, platform: 'node', format: 'cjs', jsx: 'automatic',
-    external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'], logLevel: 'silent',
+    stdin: {
+      contents: `export { default as CodeEditor } from './src/ui/CodeEditor.jsx'; export { EditorView } from '@codemirror/view';`,
+      resolveDir: path.join(__dirname, '..'),
+      loader: 'jsx',
+    },
+    outfile,
+    bundle: true,
+    platform: 'node',
+    format: 'cjs',
+    jsx: 'automatic',
+    external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
+    logLevel: 'silent',
   });
   const { JSDOM } = require('jsdom');
-  const dom = new JSDOM('<!doctype html><div id="root"></div>', { pretendToBeVisual: true });
-  for (const name of ['window', 'Window', 'document', 'navigator', 'HTMLElement', 'Element', 'Node', 'MutationObserver']) {
-    Object.defineProperty(global, name, { value: name === 'window' ? dom.window : dom.window[name], configurable: true });
+  const dom = new JSDOM('<!doctype html><div id="root"></div>', {
+    pretendToBeVisual: true,
+  });
+  for (const name of [
+    'window',
+    'Window',
+    'document',
+    'navigator',
+    'HTMLElement',
+    'Element',
+    'Node',
+    'MutationObserver',
+  ]) {
+    Object.defineProperty(global, name, {
+      value: name === 'window' ? dom.window : dom.window[name],
+      configurable: true,
+    });
   }
   global.getComputedStyle = dom.window.getComputedStyle;
   global.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
@@ -20,35 +46,117 @@ const path = require('node:path');
   const errors = [];
   dom.window.addEventListener('error', (event) => errors.push(event.error));
   dom.window.Range.prototype.getClientRects = () => [];
-  dom.window.Range.prototype.getBoundingClientRect = () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 });
+  dom.window.Range.prototype.getBoundingClientRect = () => ({
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: 0,
+    height: 0,
+  });
   const React = require('react');
   const { createRoot } = require('react-dom/client');
   const { CodeEditor, EditorView } = require(outfile);
   const root = createRoot(document.getElementById('root'));
   const changes = [];
-  const render = async (value, revealLine = 2) => {
-    await React.act(async () => root.render(React.createElement(CodeEditor, {
-      value, revealLine, language: 'javascript', onChange: (text) => changes.push(text),
-    })));
+  const positions = [];
+  const components = [];
+  const render = async (value, revealLine = 2, ranges = true, language = 'javascript') => {
+    await React.act(async () =>
+      root.render(
+        React.createElement(CodeEditor, {
+          value,
+          revealLine,
+          language,
+          onChange: (text) => changes.push(text),
+          activeRange: ranges ? { from: 4, to: 7 } : null,
+          componentRanges: ranges ? [{ from: 0, to: 3, id: 'one', name: 'One' }] : [],
+          onPositionChange: (position) => positions.push(position),
+          onOpenComponent: (name, id) => components.push({ name, id }),
+        })
+      )
+    );
   };
   try {
     await render('one\ntwo\nthree');
     const view = EditorView.findFromDOM(document.querySelector('.cm-editor'));
     assert.equal(view.state.selection.main.head, 4, 'initial reveal goes to the requested line');
-    await React.act(async () => view.dispatch({ selection: { anchor: view.state.doc.length }, changes: { from: view.state.doc.length, insert: '!' } }));
+    assert.ok(
+      document.querySelector('.cm-code-muted'),
+      'code outside the selected range is dimmed'
+    );
+    assert.ok(document.querySelector('.cm-component-link'), 'component names receive link marks');
+    view.posAtCoords = () => 1;
+    document
+      .querySelector('.cm-content')
+      .dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, metaKey: true }));
+    assert.deepEqual(components, [{ name: 'One', id: 'one' }], 'Command-click opens a component');
+    document
+      .querySelector('.cm-content')
+      .dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+    assert.deepEqual(positions, [1], 'ordinary code clicks report the source position');
+    await React.act(async () =>
+      view.dispatch({
+        selection: { anchor: view.state.doc.length },
+        changes: { from: view.state.doc.length, insert: '!' },
+      })
+    );
     assert.deepEqual(changes, ['one\ntwo\nthree!'], 'user edits emit exactly once');
     const caret = view.state.selection.main.head;
     await render('one\ntwo\nthree!');
-    assert.equal(view.state.selection.main.head, caret, 'controlled typing does not jump back to the revealed line');
+    assert.equal(
+      view.state.selection.main.head,
+      caret,
+      'controlled typing does not jump back to the revealed line'
+    );
     await render('external\nupdated\nsource');
     assert.equal(view.state.doc.toString(), 'external\nupdated\nsource');
     assert.equal(changes.length, 1, 'external reloads and app undo do not echo a new edit');
     await render('external\nupdated\nsource', 3);
-    assert.equal(view.state.selection.main.head, view.state.doc.line(3).from, 'a new reveal request still moves the caret');
+    assert.equal(
+      view.state.selection.main.head,
+      view.state.doc.line(3).from,
+      'a new reveal request still moves the caret'
+    );
+    const astroSource = '<Heading tag="h1" maxWidth={17}>Find hope.</Heading>';
+    await render(astroSource, null, false, 'astro');
+    await React.act(() => new Promise((resolve) => setTimeout(resolve, 500)));
+    const astroTokens = [...document.querySelectorAll('.cm-astro-token')];
+    const punctuation = astroTokens.find((token) => token.textContent === '<');
+    const component = astroTokens.find((token) => token.textContent === 'Heading');
+    const attribute = astroTokens.find((token) => token.textContent === 'maxWidth');
+    const number = astroTokens.find((token) => token.textContent === '17');
+    assert.ok(punctuation, 'the Astro grammar recognizes tag punctuation');
+    assert.ok(component, 'the Astro grammar recognizes a component tag');
+    assert.ok(attribute, 'the Astro grammar recognizes an attribute');
+    assert.ok(number, 'the Astro grammar recognizes a number inside an expression');
+    assert.match(
+      component.getAttribute('style'),
+      /rgb\(127, 166, 184\)/,
+      'components use muted blue'
+    );
+    assert.match(
+      attribute.getAttribute('style'),
+      /rgb\(170, 148, 192\)/,
+      'attributes use muted purple'
+    );
+    assert.match(
+      number.getAttribute('style'),
+      /rgb\(201, 148, 112\)/,
+      'numbers use muted orange'
+    );
+    assert.match(
+      punctuation.getAttribute('style'),
+      /rgb\(174, 120, 159\)/,
+      'tag punctuation uses muted pink'
+    );
     assert.deepEqual(errors, [], 'the editor reports no asynchronous errors');
   } finally {
     await React.act(async () => root.unmount());
     dom.window.close();
   }
-  console.log('code-editor-lifecycle: passed [user edits, external reloads, caret, reveal]');
-})().catch((error) => { console.error(error); process.exitCode = 1; });
+  console.log('code-editor-lifecycle: passed [edits, reloads, caret, reveal, Astro grammar]');
+})().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/test/code-panel-model.js b/test/code-panel-model.js
new file mode 100644
index 00000000..51953a1a
--- /dev/null
+++ b/test/code-panel-model.js
@@ -0,0 +1,77 @@
+// Goal: keep code, navigator, and canvas selection on one source-range model.
+// Methodology: parse a real Astro file with offsets, then exercise selection,
+// component links, nested hit-testing, frontmatter, and invalid-range edges.
+
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const esbuild = require('esbuild');
+const { parsePage } = require('../dist/electron/astroParser.js');
+
+const output = path.join(__dirname, '../node_modules/.stacki-test/code-panel-model.cjs');
+
+(async () => {
+  await esbuild.build({
+    entryPoints: [path.join(__dirname, '../src/codePanelModel.ts')],
+    outfile: output,
+    bundle: true,
+    platform: 'node',
+    format: 'cjs',
+    logLevel: 'silent',
+  });
+  const modelTools = require(output);
+  const source = [
+    '---',
+    "import Card from '../components/Card.astro';",
+    '---',
+    '<section>',
+    '  <Card>',
+    '    <h2>Hello</h2>',
+    '  </Card>',
+    '  <p>After</p>',
+    '</section>',
+    '',
+  ].join('\n');
+  const parsed = parsePage(source, { locs: true });
+  assert.equal(parsed.editable, true);
+  const model = parsed.model;
+  const section = model.nodes[0];
+  const card = section.children[0];
+  const heading = card.children[0];
+
+  assert.deepEqual(
+    modelTools.sourceRangeForSelection(model, card.id, source.length),
+    { from: card.start, to: card.end },
+    'navigator selection resolves to the exact source span',
+  );
+  assert.deepEqual(
+    modelTools.sourceRangeForSelection(model, 'frontmatter', source.length),
+    { from: 0, to: model.bodyStart },
+    'frontmatter participates in the same selection model',
+  );
+  assert.equal(
+    modelTools.sourceNodeAtOffset(model.nodes, source.indexOf('<h2') + 1).id,
+    heading.id,
+    'the narrowest nested node wins code hit-testing',
+  );
+  assert.deepEqual(modelTools.componentSourceRanges(model.nodes, source), [
+    {
+      id: card.id,
+      name: 'Card',
+      from: source.indexOf('<Card') + 1,
+      to: source.indexOf('<Card') + 5,
+    },
+  ]);
+  assert.equal(
+    modelTools.sourceLineLabel(source, { from: card.start, to: card.end }),
+    'L5–7',
+  );
+  assert.equal(
+    modelTools.sourceRangeForSelection(model, card.id, card.end - 1),
+    null,
+    'stale ranges never escape the current document',
+  );
+  console.log('code-panel-model: passed [selection, links, nesting, bounds]');
+})().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/test/component-hover-preview.test.js b/test/component-hover-preview.test.js
index 1fae2580..4eb4d96e 100644
--- a/test/component-hover-preview.test.js
+++ b/test/component-hover-preview.test.js
@@ -110,6 +110,9 @@ test('generated Astro route keeps its default slot and loads the selected source
   assert.match(template, /src\/layouts\/\*\*\/\*\.astro/);
   assert.match(template, /<C \{\.\.\.props\}>/);
   assert.match(template, /<C \{\.\.\.props\}>\{name\}<\/C>/);
+  assert.match(template, /avb:component-preview/);
+  assert.match(template, /reportStatus\('empty'\)/);
+  assert.match(template, /reportStatus\('ready'\)/);
   assert.doesNotMatch(template, /__STACKI_PREVIEW_/);
   assert.doesNotMatch(template, /require\(|componentPreview\.js|node:/,
     'edge-rendered pages cannot import the app CommonJS or Node helpers');
diff --git a/test/component-preview.test.js b/test/component-preview.test.js
index f8f2b77e..fe76d726 100644
--- a/test/component-preview.test.js
+++ b/test/component-preview.test.js
@@ -25,9 +25,8 @@ test('component navigation keeps the real iframe and inspector mounted while loa
         // Keep both preview components real: a mocked pane cannot reveal frame
         // replacement, navigation, or an inspector vanishing beside the frame.
         if (
-          ['PreviewPane', 'CanvasView', 'DevOffline', 'PreviewOverlays', 'PreviewToolbar'].includes(
-            name,
-          )
+          ['PreviewPane', 'CanvasView', 'DevOffline', 'PreviewOverlays', 'PreviewToolbar',
+            'PreviewSizeControls'].includes(name)
         ) {
           return;
         }
@@ -152,6 +151,11 @@ test('component navigation keeps the real iframe and inspector mounted while loa
     assert.equal(writes.at(-1).pagePath, card.path);
     assert.equal(writes.at(-1).model.nodes[0].props.title.value, 'card edit during return');
     assert.equal(outgoing.filter((message) => message.type === 'avb:track').at(-1).scope, '');
+    assert.equal(
+      __componentPanels.PropsPanel.node.name,
+      'Card',
+      'closing a component selects the instance that opened it',
+    );
 
     const failedRead = hold(card.path);
     await openCard();
@@ -219,7 +223,11 @@ test('component navigation keeps the real iframe and inspector mounted while loa
       assert.equal(track.focus, '0.0', `${fixture.label}: the original page instance retains focus`);
       await back();
       unchanged();
-      assert.equal(__componentPanels.PropsPanel.node.name, 'main', `${fixture.label}: the page still opens on its outermost node`);
+      assert.equal(
+        __componentPanels.PropsPanel.node.name,
+        'Card',
+        `${fixture.label}: closing selects the component instance`,
+      );
     }
     for (const fixture of [
       { source: '---\nconst render = true;\n---\n{render && (<>Text only</>)}', kind: 'cond' },
@@ -236,7 +244,7 @@ test('component navigation keeps the real iframe and inspector mounted while loa
       assert.deepEqual(track.paths, fixture.kind ? ['src/components/Card.astro|0', '0.0'] : ['0.0']);
       await back();
       unchanged();
-      assert.equal(__componentPanels.PropsPanel.node.name, 'main');
+      assert.equal(__componentPanels.PropsPanel.node.name, 'Card');
     }
   } finally {
     await act(async () => root.unmount());
diff --git a/test/component-properties-panel.test.js b/test/component-properties-panel.test.js
index ecf4273a..2321c93a 100644
--- a/test/component-properties-panel.test.js
+++ b/test/component-properties-panel.test.js
@@ -35,12 +35,26 @@ test('component properties lifecycle and controls', async () => {
     loader: { '.css': 'empty' },
     logLevel: 'silent',
   });
-  const dom = new JSDOM('<!doctype html><div id="root"></div>', { pretendToBeVisual: true });
-  for (const key of ['window', 'document', 'navigator', 'HTMLElement', 'Element', 'Node']) {
+  const dom = new JSDOM('<!doctype html><div id="root"></div>', {
+    pretendToBeVisual: true,
+  });
+  for (const key of [
+    'window',
+    'document',
+    'navigator',
+    'HTMLElement',
+    'Element',
+    'Node',
+    'MutationObserver',
+    'Window',
+    'DOMRect',
+  ]) {
     global[key] = key === 'window' ? dom.window : dom.window[key];
   }
   global.IS_REACT_ACT_ENVIRONMENT = true;
   window.HTMLElement.prototype.scrollIntoView = () => {};
+  window.Range.prototype.getBoundingClientRect = () => new window.DOMRect();
+  window.Range.prototype.getClientRects = () => [];
   const React = require('react');
   const { act } = React;
   const { createRoot } = require('react-dom/client');
@@ -139,6 +153,16 @@ test('component properties lifecycle and controls', async () => {
     editComponentProperties: async (request) => {
       edits.push(request);
       order.push('write');
+      if (request.change.kind === 'options') {
+        data = {
+          ...data,
+          source: `${data.source}\noptions:${request.change.type}`,
+          properties: data.properties.map((field) =>
+            field.name === request.change.name ? { ...field, type: request.change.type } : field
+          ),
+        };
+        return { ok: true, value: data };
+      }
       if (applyDefinition) {
         data = applyDefinition(data.source, request.change);
         return { ok: true, value: data };
@@ -220,8 +244,14 @@ test('component properties lifecycle and controls', async () => {
     const target = rows[Math.min(gap, rows.length - 1)];
     const fire = async (element, type, clientY) =>
       act(async () => {
-        const event = new window.MouseEvent(type, { bubbles: true, cancelable: true, clientY });
-        Object.defineProperty(event, 'dataTransfer', { value: { setData: () => {} } });
+        const event = new window.MouseEvent(type, {
+          bubbles: true,
+          cancelable: true,
+          clientY,
+        });
+        Object.defineProperty(event, 'dataTransfer', {
+          value: { setData: () => {} },
+        });
         element.dispatchEvent(event);
       });
     await fire(rows[from], 'dragstart', from * 40);
@@ -229,7 +259,10 @@ test('component properties lifecycle and controls', async () => {
     await fire(target, 'drop', gap * 40);
   };
   await drag('[aria-label="Reorder title"]', '.property-row', 0, 2);
-  assert.deepEqual(edits[0].change, { kind: 'order', names: ['variant', 'title'] });
+  assert.deepEqual(edits[0].change, {
+    kind: 'order',
+    names: ['variant', 'title'],
+  });
   assert.deepEqual(order.slice(-5), ['saving', 'flush', 'write', 'refresh', 'idle']);
   await act(async () => document.querySelector('[aria-label="Add property"]').click());
   assert.match(document.body.textContent, /New property/);
@@ -262,8 +295,18 @@ test('component properties lifecycle and controls', async () => {
   await dragOptions(0, 2);
   assert.equal(optionValues()[0], 'Outline');
   assert.equal(optionValues()[1], 'Solid');
+  assert.deepEqual(edits.at(-1).change, {
+    kind: 'options',
+    name: 'variant',
+    type: '"Outline" | "Solid"',
+  });
   await dragOptions(1, 0);
   assert.equal(optionValues()[0], 'Solid');
+  assert.deepEqual(edits.at(-1).change, {
+    kind: 'options',
+    name: 'variant',
+    type: '"Solid" | "Outline"',
+  });
   await act(async () => document.querySelector('.property-options .list-field-remove').click());
   assert.equal(optionValues()[0], 'Outline');
   assert.equal(document.querySelector('.property-options .list-field-remove').disabled, true);
@@ -333,7 +376,10 @@ test('component properties lifecycle and controls', async () => {
   assert.equal(reads, readsBeforeSave + 1);
   assert.match(document.querySelector('.property-list').textContent, /afterSave/);
   // A deletion/read failure recovers when a later external edit restores it.
-  readProperties = async () => ({ ok: false, error: { code: 'missing', message: 'File missing' } });
+  readProperties = async () => ({
+    ok: false,
+    error: { code: 'missing', message: 'File missing' },
+  });
   await notify();
   assert.match(document.body.textContent, /File missing/);
   readProperties = async () => ({ ok: true, value: data });
@@ -392,15 +438,38 @@ const { gap = 'small', other = 'large', ...rest } = Astro.props;
       Object.getOwnPropertyDescriptor(prototype, 'value').set.call(element, value);
       element.dispatchEvent(new window.Event('input', { bubbles: true }));
     });
+  const pressDown = async (element) =>
+    act(async () => element.dispatchEvent(new window.MouseEvent('mousedown', { bubbles: true })));
   assert.equal(document.querySelector('.property-options input'), null);
   await act(async () => document.querySelector('.property-options .list-field-text').click());
   const firstOption = document.querySelector('.list-item-field input');
   assert.equal(document.activeElement, firstOption);
   assert.equal(firstOption.selectionStart, 0);
   assert.equal(firstOption.selectionEnd, 'small'.length);
+  await pressDown(firstOption);
+  assert.ok(document.querySelector('.property-editor'));
   await setValue(firstOption, 'compact');
   await act(async () => document.querySelector('.list-item-editor [title="Close"]').click());
-  assert.equal(document.querySelector('[aria-label="Default option"]').value, '"compact"');
+  const defaultLabel = () => document.querySelector('.property-default .dd-label').textContent;
+  assert.equal(document.querySelector('.property-default select'), null);
+  assert.equal(defaultLabel(), 'compact');
+  await act(async () => document.querySelector('.property-default .dd-trigger').click());
+  await setValue(document.querySelector('.dd-search'), 'medium');
+  assert.equal(document.querySelectorAll('.dd-option').length, 1);
+  await pressDown(document.querySelector('.dd-option'));
+  assert.ok(document.querySelector('.property-editor'));
+  await act(async () =>
+    document
+      .querySelector('.dd-option')
+      .dispatchEvent(new window.MouseEvent('mouseover', { bubbles: true }))
+  );
+  assert.equal(defaultLabel(), 'compact');
+  await act(async () => document.querySelector('.dd-option').click());
+  assert.equal(defaultLabel(), 'medium');
+  await act(async () => document.querySelector('.property-default .dd-trigger').click());
+  await setValue(document.querySelector('.dd-search'), 'compact');
+  await act(async () => document.querySelector('.dd-option').click());
+  assert.equal(defaultLabel(), 'compact');
   await dragOptions(2, 0);
   assert.equal(optionValues()[0], 'large');
   await setValue(document.querySelector('.property-editor label input'), 'spacing');
@@ -419,6 +488,7 @@ const { gap = 'small', other = 'large', ...rest } = Astro.props;
   assert.equal(editedGap.description, 'Choose space between items.');
   assert.equal(editedGap.type, `'large' | "compact" | 'medium'`);
   assert.equal(editedGap.defaultValue, '"compact"');
+  assert.deepEqual(edits.at(-1).change.optionRenames, [{ from: "'small'", to: '"compact"' }]);
   assert.match(data.source, /other\?: ContainerGap/);
   assert.match(data.source, /Props extends HTMLAttributes<'section'>/);
   assert.match(data.source, /type ContainerGap = 'small' \| 'medium' \| 'large'/);
@@ -476,6 +546,42 @@ const { gap = 'small', other = 'large', ...rest } = Astro.props;
     document.querySelector('input[aria-label="Type expression"]').value,
     'typeof designTheme'
   );
+  // A default that names another frontmatter value is shown as a binding. Its
+  // chip opens the same scoped picker used by prop values and can be repointed.
+  const boundDefault = `---
+const fallback = 'h3';
+interface Props {
+  tag?: string;
+  variant?: string;
+}
+const { tag = 'h2', variant = tag } = Astro.props;
+---
+<h1>{variant}</h1>`;
+  data = readComponentProperties(boundDefault);
+  await notify();
+  await act(async () =>
+    [...document.querySelectorAll('.property-row-main')]
+      .find((button) => button.textContent.includes('variant'))
+      .click()
+  );
+  const defaultChip = document.querySelector('.property-default .cm-chip');
+  assert.equal(defaultChip.textContent, 'tag');
+  assert.equal(document.querySelector('.property-default textarea'), null);
+  await pressDown(defaultChip);
+  assert.equal(document.querySelector('.bind-menu .dp-row.selected .dp-key').textContent, 'tag');
+  await act(async () =>
+    [...document.querySelectorAll('.bind-menu .dp-row')]
+      .find((row) => row.title.startsWith('fallback'))
+      .click()
+  );
+  assert.equal(document.querySelector('.property-default .cm-content').textContent, 'fallback');
+  await act(async () =>
+    [...document.querySelectorAll('button')]
+      .find((button) => button.textContent === 'Save property')
+      .click()
+  );
+  assert.equal(data.properties.find((field) => field.name === 'variant').defaultValue, 'fallback');
+  assert.match(data.source, /variant = fallback/);
   // The shared editor handles add/edit/remove and drag while the adapter keeps
   // boolean/number literals distinct from strings with the same visible label.
   data = {
@@ -524,16 +630,123 @@ const { gap = 'small', other = 'large', ...rest } = Astro.props;
   await act(async () => document.querySelectorAll('.property-options .list-field-text')[1].click());
   await setValue(document.querySelector('.list-item-field input'), 'false');
   await key('Escape', {}, document.querySelector('.list-item-field input'));
-  assert.equal(document.querySelector('[aria-label="Default option"]').value, 'false');
+  assert.equal(defaultLabel(), 'false');
   assert.equal(document.querySelector('.list-item-editor'), null);
+  // Settings use the shared dismissal behavior for app chrome and canvas clicks.
+  // Nested option popovers and dropdowns above remain inside the settings editor.
+  const editsBeforeDismiss = edits.length;
+  await pressDown(document.querySelector('.property-component'));
+  assert.equal(document.querySelector('.property-editor') === null, true);
+  assert.equal(edits.length, editsBeforeDismiss);
+  await act(async () => document.querySelector('.property-row-main').click());
+  await act(async () =>
+    window.dispatchEvent(
+      new window.MessageEvent('message', {
+        data: { type: 'avb:click-node', path: '0' },
+      })
+    )
+  );
+  assert.equal(document.querySelector('.property-editor') === null, true);
+  assert.equal(edits.length, editsBeforeDismiss);
   // Unsupported contracts still open property settings rather than raw source.
-  data = { ...data, source: 'unsupported contract', advanced: true };
+  data = {
+    ...data,
+    source: 'unsupported contract',
+    advanced: true,
+    properties: data.properties.map((field) => ({
+      ...field,
+      origin: {
+        declarations: [{ label: `Tag.${field.name}`, expression: field.type, line: 3 }],
+        defaultValue: {
+          label: `Astro.props.${field.name}`,
+          expression: field.defaultValue,
+          line: 6,
+        },
+      },
+    })),
+  };
   await notify();
   await act(async () => document.querySelector('.property-row-main').click());
   assert.match(document.body.textContent, /Property settings/);
   assert.equal(document.querySelector('[aria-label="Component TypeScript source"]'), null);
-  assert.equal(document.querySelector('.property-options .list-field-row').draggable, false);
-  assert.equal(document.querySelector('.property-options .list-field-add').disabled, true);
+  assert.equal(document.querySelector('.property-readonly-fields textarea').readOnly, true);
+  assert.equal(document.querySelector('.property-source-tag'), null);
+  assert.match(document.querySelector('.property-declaration-info').title, /Tag\./);
+  assert.match(document.querySelector('.property-declaration-info').title, /line 3/);
+  assert.equal(document.querySelector('[aria-label="Close property settings"]').disabled, false);
+  await pressDown(document.querySelector('.property-declaration-info'));
+  assert.ok(document.querySelector('.property-editor'));
+  await act(async () => document.querySelector('[aria-label="Close property settings"]').click());
+  assert.equal(document.querySelector('.property-editor'), null);
+  await act(async () => document.querySelector('.property-row-main').click());
+  await pressDown(document.querySelector('.property-component'));
+  assert.equal(document.querySelector('.property-editor'), null);
+  assert.equal(edits.length, editsBeforeDismiss);
+  // Common fields in a combined contract use normal editing; only affected props are restricted.
+  data = {
+    ...data,
+    source: 'combined contract',
+    properties: [
+      {
+        ...property,
+        name: 'eyebrow',
+        editing: { kind: 'editable' },
+        conditions: [],
+      },
+      {
+        ...property,
+        name: 'image',
+        editing: {
+          kind: 'restricted',
+          reason: 'This prop has variant rules. Edit its declaration in source.',
+        },
+        conditions: ['variant = "default": not allowed', 'variant = "cover": optional'],
+      },
+    ],
+  };
+  await notify();
+  assert.equal(document.querySelector('[aria-label="Delete eyebrow"]').disabled, false);
+  assert.equal(document.querySelector('[aria-label="Delete image"]').disabled, true);
+  await act(async () => document.querySelector('.property-row-main').click());
+  assert.equal(document.querySelector('.property-editor fieldset').disabled, false);
+  assert.equal(document.querySelector('.property-readonly-fields'), null);
+  assert.equal(document.querySelector('.property-editor label input').value, 'eyebrow');
+  assert.doesNotMatch(document.body.textContent, /This view is read-only/);
+  await act(async () => document.querySelector('[aria-label="Close property settings"]').click());
+  await act(async () => document.querySelectorAll('.property-row-main')[1].click());
+  assert.match(document.querySelector('.property-conditions').textContent, /default.*not allowed/);
+  assert.match(document.querySelector('.property-readonly-fields').textContent, /variant rules/);
+  assert.equal(document.querySelector('.property-editor fieldset'), null);
+  // Inherited Astro attributes can be overridden locally without exposing a
+  // rename or delete that would leave the inherited contract in place.
+  data = {
+    ...data,
+    source: 'inherited attribute',
+    properties: [
+      {
+        ...property,
+        name: 'class',
+        type: 'unknown',
+        editing: {
+          kind: 'override',
+          reason: 'This HTML attribute will be declared locally when you save it.',
+        },
+      },
+    ],
+  };
+  await notify();
+  assert.equal(document.querySelector('[aria-label="Delete class"]').disabled, true);
+  await act(async () => document.querySelector('.property-row-main').click());
+  assert.equal(document.querySelector('.property-editor fieldset').disabled, false);
+  assert.equal(document.querySelector('.property-readonly-fields'), null);
+  assert.equal(document.querySelector('.property-editor label input').disabled, true);
+  assert.equal(
+    document.querySelector('textarea[placeholder="Describe how to use this property…"]').readOnly,
+    false
+  );
+  assert.match(document.querySelector('.property-editor').textContent, /declared locally/);
+  assert.equal(document.querySelector('.property-actions .danger'), null);
+  await act(async () => document.querySelector('[aria-label="Close property settings"]').click());
   let completeRead;
   readProperties = () =>
     new Promise((resolve) => {
diff --git a/test/component-properties.test.js b/test/component-properties.test.js
index 2a7684db..3d08cd16 100644
--- a/test/component-properties.test.js
+++ b/test/component-properties.test.js
@@ -10,7 +10,10 @@ const {
   readComponentProperties,
   editPropertyDefinition,
 } = require('../dist/electron/propertyDefinitions');
-const { renameComponentReferences } = require('../dist/electron/propertyRename');
+const {
+  renameComponentOptionValues,
+  renameComponentReferences,
+} = require('../dist/electron/propertyRename');
 const {
   loadComponentProperties,
   updateComponentProperties,
@@ -108,7 +111,12 @@ test('adds fields to components with and without a Props type or frontmatter', (
       editPropertyDefinition(original, {
         kind: 'save',
         originalName: '',
-        property: { ...property, name: 'count', type: 'number', defaultValue: '3' },
+        property: {
+          ...property,
+          name: 'count',
+          type: 'number',
+          defaultValue: '3',
+        },
       })
     );
     const fields = readComponentProperties(output).properties;
@@ -122,7 +130,10 @@ test('adds fields to components with and without a Props type or frontmatter', (
 
 test('reorders fields and literal options while preserving their docs and defaults', () => {
   const output = value(
-    editPropertyDefinition(source, { kind: 'order', names: ['image', 'variant', 'title'] })
+    editPropertyDefinition(source, {
+      kind: 'order',
+      names: ['image', 'variant', 'title'],
+    })
   );
   assert.deepEqual(
     readComponentProperties(output).properties.map((field) => field.name),
@@ -131,17 +142,13 @@ test('reorders fields and literal options while preserving their docs and defaul
   assert.match(output, /Title shown above the card/);
   const reordered = value(
     editPropertyDefinition(source, {
-      kind: 'save',
-      originalName: 'variant',
-      property: {
-        ...property,
-        name: 'variant',
-        type: "'outline' | 'solid'",
-        defaultValue: "'solid'",
-      },
+      kind: 'options',
+      name: 'variant',
+      type: "'outline' | 'solid'",
     })
   );
-  assert.match(reordered, /variant\?: 'outline' \| 'solid'/);
+  assert.match(reordered, /readonly variant: 'outline' \| 'solid'/);
+  assert.match(reordered, /variant = 'solid'/);
   assert.equal(
     editPropertyDefinition(source, { kind: 'order', names: ['title', 'title'] }).ok,
     false
@@ -236,10 +243,40 @@ test('rename handles expressions, shorthand, literal spreads, comments and UTF-8
   );
 });
 
+test('option rename updates static values on only the resolved component prop', () => {
+  const original =
+    '<!-- <Card variant="solid"/> -->😀 ' +
+    '<Card variant="solid" other="solid" />' +
+    '<Card variant={ready ? "solid" : "outline"} />' +
+    '<Card {...{variant: `solid`, other: "solid"}} />' +
+    '<Other variant="solid" />';
+  const output = value(
+    renameComponentOptionValues(original, new Set(['Card']), 'variant', [
+      { from: "'solid'", to: "'filled'" },
+    ])
+  );
+  assert.match(output, /<!-- <Card variant="solid"\/> -->/);
+  assert.match(output, /😀 <Card variant="filled" other="solid"/);
+  assert.match(output, /ready \? 'filled' : "outline"/);
+  assert.match(output, /variant: 'filled', other: "solid"/);
+  assert.match(output, /<Other variant="solid"/);
+  assert.equal(
+    renameComponentOptionValues('<Card {...props} />', new Set(['Card']), 'variant', [
+      { from: "'solid'", to: "'filled'" },
+    ]).ok,
+    false
+  );
+});
+
 test('project-wide rename follows import aliases and does not touch unrelated components', () => {
   project(({ root, component, page }) => {
     const result = updateComponentProperties(
-      { projectPath: root, file: component, source, change: save({ name: 'heading' }) },
+      {
+        projectPath: root,
+        file: component,
+        source,
+        change: save({ name: 'heading' }),
+      },
       () => {}
     );
     assert.equal(value(result).properties[0].name, 'heading');
@@ -250,6 +287,94 @@ test('project-wide rename follows import aliases and does not touch unrelated co
   });
 });
 
+test('project-wide option rename updates every static instance value and the default', () => {
+  project(({ root, component, page }) => {
+    fs.writeFileSync(
+      page,
+      `---\nimport Alias from '../components/Card.astro';\n` +
+        `import Other from '../components/Other.astro';\nconst ready = true;\n---\n` +
+        `<Alias variant="solid"/><Alias variant={ready ? 'solid' : 'outline'}/>` +
+        `<Other variant="solid"/>`
+    );
+    const variant = readComponentProperties(source).properties.find(
+      (field) => field.name === 'variant'
+    );
+    const result = updateComponentProperties(
+      {
+        projectPath: root,
+        file: component,
+        source,
+        change: {
+          kind: 'save',
+          originalName: 'variant',
+          property: {
+            ...variant,
+            type: "'filled' | 'outline'",
+            defaultValue: "'filled'",
+          },
+          optionRenames: [{ from: "'solid'", to: "'filled'" }],
+        },
+      },
+      () => {}
+    );
+    assert.equal(
+      value(result).properties.find((field) => field.name === 'variant').type,
+      "'filled' | 'outline'"
+    );
+    assert.match(fs.readFileSync(component, 'utf8'), /variant = 'filled'/);
+    const content = fs.readFileSync(page, 'utf8');
+    assert.match(content, /<Alias variant="filled"/);
+    assert.match(content, /ready \? 'filled' : 'outline'/);
+    assert.match(content, /<Other variant="solid"/);
+  });
+});
+
+test('failed option rename writes restore the component and its instances', () => {
+  project(({ root, component, page }) => {
+    const beforePage =
+      `---\nimport Alias from '../components/Card.astro';\n---\n` + `<Alias variant="solid"/>`;
+    fs.writeFileSync(page, beforePage);
+    const variant = readComponentProperties(source).properties.find(
+      (field) => field.name === 'variant'
+    );
+    const write = fs.writeFileSync;
+    let writes = 0;
+    fs.writeFileSync = (...argumentsList) => {
+      writes += 1;
+      if (writes === 2) {
+        throw new Error('Simulated option write failure');
+      }
+      return write(...argumentsList);
+    };
+    try {
+      const result = updateComponentProperties(
+        {
+          projectPath: root,
+          file: component,
+          source,
+          change: {
+            kind: 'save',
+            originalName: 'variant',
+            property: {
+              ...variant,
+              type: "'filled' | 'outline'",
+              defaultValue: "'filled'",
+            },
+            optionRenames: [{ from: "'solid'", to: "'filled'" }],
+          },
+        },
+        () => {}
+      );
+      assert.equal(result.ok, false);
+      assert.match(result.error.message, /restored/);
+      assert.equal(fs.readFileSync(component, 'utf8'), source);
+      assert.equal(fs.readFileSync(page, 'utf8'), beforePage);
+    } finally {
+      fs.writeFileSync = write;
+    }
+  });
+});
+
 test('source conflicts and unresolved spreads leave every project file untouched', () => {
   project(({ root, component, page }) => {
     const before = fs.readFileSync(page, 'utf8');
@@ -284,7 +409,12 @@ test('failed writes restore all files already written', () => {
     };
     try {
       const result = updateComponentProperties(
-        { projectPath: root, file: component, source, change: save({ name: 'heading' }) },
+        {
+          projectPath: root,
+          file: component,
+          source,
+          change: save({ name: 'heading' }),
+        },
         () => {}
       );
       assert.equal(result.ok, false);
@@ -297,22 +427,428 @@ test('failed writes restore all files already written', () => {
   });
 });
 
+test('composite props trace their own declarations and literal defaults', () => {
+  const composite = `---
+type Unrelated = { element: number };
+type Tag = { /** Render tag. */ element?: "button" } | { element: "link" };
+type Props = { render?: boolean } & Tag;
+type AllProps = { element?: "button" | "link"; extra?: string };
+const { element = "button", render = true, extra } = Astro.props as AllProps;
+---
+<div />`;
+  const data = readComponentProperties(composite);
+  assert.equal(data.advanced, true);
+  const element = data.properties.find((field) => field.name === 'element');
+  assert.equal(element.type, '"button" | "link"');
+  assert.equal(element.defaultValue, '"button"');
+  assert.deepEqual(element.origin.declarations, [
+    { label: 'Tag.element', expression: '"button"', line: 3 },
+    { label: 'Tag.element', expression: '"link"', line: 3 },
+  ]);
+  assert.deepEqual(element.origin.defaultValue, {
+    label: 'Astro.props.element',
+    expression: '"button"',
+    line: 6,
+  });
+  assert.equal(
+    data.properties.find((field) => field.name === 'extra').origin.declarations[0].label,
+    'AllProps.extra'
+  );
+  assert.deepEqual(parseComponentProperties(data), data);
+});
+
+test('source tracing terminates cycles and avoids inventing generic or imported sources', () => {
+  for (const declaration of [
+    'type Props = Props & { title?: string };',
+    'type Base = { title?: number }; type Props = Omit<Base, "title">;',
+    'import type { Props } from "./shared";',
+  ]) {
+    const data = readComponentProperties(
+      `---\n${declaration}\n` + 'const { title = "Hello" } = Astro.props;\n---\n<div />'
+    );
+    const title = data.properties.find((field) => field.name === 'title');
+    assert.equal(title.origin.declarations.length, declaration.startsWith('type Props') ? 1 : 0);
+    assert.equal(title.origin.defaultValue.expression, '"Hello"');
+  }
+});
+
+test('source metadata rejects malformed and oversized inputs at the contract boundary', () => {
+  const data = readComponentProperties(source);
+  const origin = data.properties[0].origin;
+  for (const invalid of [
+    null,
+    {},
+    { declarations: {} },
+    {
+      declarations: Array(PROPERTY_LIMITS.fieldsMax + 1).fill(origin.declarations[0]),
+    },
+    ...[0, -1, 1.5, '2', PROPERTY_LIMITS.sourceCharsMax + 1].map((line) => ({
+      declarations: [{ label: 'Props.title', expression: 'string', line }],
+    })),
+    { declarations: [{ label: '', expression: 'string', line: 1 }] },
+    { declarations: [{ label: 'Props.title', expression: false, line: 1 }] },
+    { declarations: [], defaultValue: { label: 'Astro.props.title', line: 1 } },
+  ]) {
+    assert.throws(() =>
+      parseComponentProperties({
+        ...data,
+        properties: [{ ...data.properties[0], origin: invalid }],
+      })
+    );
+  }
+});
+
+const compositeCard = `---
+import type { HTMLAttributes } from 'astro/types';
+type Theme = "inherit" | "light" | "dark";
+type Base = HTMLAttributes<"div"> & {
+  /** Small text above the heading. */
+  eyebrow?: string;
+  theme?: Theme;
+  variant?: "default" | "cover" | "stacked";
+  unused?: string;
+};
+type Props = Base & (
+  | { variant?: "default"; image?: never }
+  | { variant: "cover"; image?: string }
+  | { variant: "stacked"; image?: string; theme?: never }
+);
+type AllProps = Base & { image?: string };
+type Caption = Base["eyebrow"];
+type RuntimeCaption = AllProps["eyebrow"];
+type Selected = Pick<Base, "eyebrow">;
+type Other = { eyebrow: number };
+type OtherCaption = Other["eyebrow"];
+const { eyebrow, theme = "inherit", variant = "default", image, ...rest } = Astro.props as AllProps;
+---
+<div>{eyebrow} {Astro.props.eyebrow}</div>`;
+
+test('common props remain editable while variant restrictions stay specific to each prop', () => {
+  const data = readComponentProperties(compositeCard);
+  assert.equal(data.advanced, true);
+  const eyebrow = data.properties.find((field) => field.name === 'eyebrow');
+  assert.deepEqual(eyebrow.editing, { kind: 'editable' });
+  assert.equal(eyebrow.description, 'Small text above the heading.');
+  assert.deepEqual(eyebrow.conditions, []);
+  const image = data.properties.find((field) => field.name === 'image');
+  assert.equal(image.editing.kind, 'restricted');
+  assert.deepEqual(image.conditions, [
+    'variant = "default": not allowed',
+    'variant = "cover": optional',
+    'variant = "stacked": optional',
+  ]);
+  const theme = data.properties.find((field) => field.name === 'theme');
+  assert.equal(theme.editing.kind, 'restricted');
+  assert.equal(theme.conditions.at(-1), 'variant = "stacked": not allowed');
+  assert.equal(
+    editPropertyDefinition(compositeCard, {
+      kind: 'save',
+      originalName: 'image',
+      property: { ...image, editing: { kind: 'editable' } },
+    }).ok,
+    false
+  );
+  assert.deepEqual(parseComponentProperties(data), data);
+});
+
+test('common declaration edits preserve variants, runtime assertions and unrelated types', () => {
+  const eyebrow = readComponentProperties(compositeCard).properties.find(
+    (p) => p.name === 'eyebrow'
+  );
+  const changed = value(
+    editPropertyDefinition(compositeCard, {
+      kind: 'save',
+      originalName: 'eyebrow',
+      property: {
+        ...eyebrow,
+        type: '"Small" | "Large"',
+        defaultValue: '"Small"',
+        required: true,
+        readonly: true,
+        description: 'New tooltip',
+      },
+    })
+  );
+  assert.match(changed, /readonly eyebrow: "Small" \| "Large"/);
+  assert.match(changed, /eyebrow = "Small"/);
+  assert.match(changed, /New tooltip/);
+  const variants = (text) => text.slice(text.indexOf('type Props'), text.indexOf('type AllProps'));
+  assert.equal(variants(changed), variants(compositeCard));
+  assert.match(changed, /Astro.props as AllProps/);
+  assert.match(changed, /type Other = \{ eyebrow: number \}/);
+  const reread = readComponentProperties(changed).properties.find((p) => p.name === 'eyebrow');
+  assert.equal(reread.required, true);
+  assert.equal(reread.readonly, true);
+  assert.equal(reread.description, 'New tooltip');
+  assert.equal(reread.editing.kind, 'editable');
+  const removed = value(editPropertyDefinition(compositeCard, { kind: 'remove', name: 'unused' }));
+  assert.doesNotMatch(removed, /unused\?:/);
+  assert.equal(variants(removed), variants(compositeCard));
+});
+
+test('renaming a common prop updates its instances, runtime binding and related type references', () => {
+  project(({ root, component, page }) => {
+    fs.writeFileSync(component, compositeCard);
+    fs.writeFileSync(
+      page,
+      '---\nimport Card from "../components/Card.astro";\n---\n' +
+        '<Card eyebrow="Hello"/><Card eyebrow="Again"/>'
+    );
+    const eyebrow = readComponentProperties(compositeCard).properties.find(
+      (p) => p.name === 'eyebrow'
+    );
+    const updated = value(
+      updateComponentProperties(
+        {
+          projectPath: root,
+          file: component,
+          source: compositeCard,
+          change: {
+            kind: 'save',
+            originalName: 'eyebrow',
+            property: { ...eyebrow, name: 'kicker' },
+          },
+        },
+        () => {}
+      )
+    );
+    assert.equal(updated.properties.find((p) => p.name === 'kicker').editing.kind, 'editable');
+    const after = fs.readFileSync(component, 'utf8');
+    assert.match(after, /kicker: eyebrow/);
+    assert.match(after, /Astro.props.kicker/);
+    assert.match(after, /Base\["kicker"\]/);
+    assert.match(after, /AllProps\["kicker"\]/);
+    assert.match(after, /Pick<Base, "kicker">/);
+    assert.match(after, /Other\["eyebrow"\]/);
+    assert.match(after, /\{eyebrow\}/);
+    assert.equal(fs.readFileSync(page, 'utf8').match(/kicker=/g).length, 2);
+  });
+});
+
+test('ambiguous common declarations remain restricted without flattening their contracts', () => {
+  for (const declaration of [
+    'type Props = { eyebrow?: string } & { eyebrow?: "narrow" };',
+    'type Props = Base; type Base = Props & { eyebrow?: string };',
+    'type Base<T> = { eyebrow?: T }; type Props = Base<string>;',
+    'export type Base = { eyebrow?: string }; type Props = Base;',
+    'import type { Shared } from "./shared"; type Props = Shared & { eyebrow?: string };',
+    'import type { HTMLAttributes } from "./shared"; ' +
+      'type Props = HTMLAttributes & { eyebrow?: string };',
+    'import type { Omit } from "./shared"; ' +
+      'import type { HTMLAttributes } from "astro/types"; ' +
+      'type Props = Omit<HTMLAttributes<"div">, "eyebrow"> & { eyebrow?: string };',
+    'type Props = { eyebrow?: string }; type AllProps = { eyebrow?: string };',
+  ]) {
+    const assertion = declaration.includes('type AllProps') ? ' as AllProps' : '';
+    const source = `---\n${declaration}\nconst { eyebrow } = Astro.props${assertion};\n---\n`;
+    const eyebrow = readComponentProperties(source).properties.find((p) => p.name === 'eyebrow');
+    assert.equal(eyebrow.editing.kind, 'restricted', declaration);
+    assert.equal(
+      editPropertyDefinition(source, {
+        kind: 'save',
+        originalName: 'eyebrow',
+        property: { ...eyebrow, description: 'Changed' },
+      }).ok,
+      false
+    );
+  }
+});
+
+test('common props support aliased Astro attribute imports without changing their aliases', () => {
+  const source = compositeCard
+    .replace('import type { HTMLAttributes }', 'import type { HTMLAttributes as Attributes }')
+    .replace('HTMLAttributes<"div">', 'Attributes<"div">');
+  const eyebrow = readComponentProperties(source).properties.find(
+    (field) => field.name === 'eyebrow'
+  );
+  assert.equal(eyebrow.editing.kind, 'editable');
+  const output = value(
+    editPropertyDefinition(source, {
+      kind: 'save',
+      originalName: 'eyebrow',
+      property: { ...eyebrow, description: 'Changed' },
+    })
+  );
+  assert.match(output, /type Base = Attributes<"div">/);
+  assert.match(output, /Changed/);
+});
+
+test('inherited Astro attributes can be declared locally and edited', () => {
+  const source = `---
+import type { HTMLAttributes } from "astro/types";
+type Props = HTMLAttributes<"div"> & {
+  render?: boolean;
+};
+const { render = true, class: className, ...rest } = Astro.props;
+---
+<div class={className} {...rest} />`;
+  const inherited = readComponentProperties(source).properties.find(
+    (field) => field.name === 'class'
+  );
+  assert.equal(inherited.editing.kind, 'override');
+  const output = value(
+    editPropertyDefinition(source, {
+      kind: 'save',
+      originalName: 'class',
+      property: {
+        ...inherited,
+        type: 'string',
+        required: true,
+        readonly: true,
+        defaultValue: '"eyebrow"',
+        description: 'Classes for the outer element.',
+      },
+    })
+  );
+  assert.match(output, /readonly class: string/);
+  assert.match(output, /Classes for the outer element\./);
+  assert.match(output, /class: className = "eyebrow"/);
+  const reread = readComponentProperties(output).properties.find(
+    (field) => field.name === 'class'
+  );
+  assert.equal(reread.editing.kind, 'editable');
+  assert.equal(reread.defaultValue, '"eyebrow"');
+  assert.equal(
+    editPropertyDefinition(source, {
+      kind: 'save',
+      originalName: 'class',
+      property: { ...inherited, name: 'className' },
+    }).ok,
+    false
+  );
+  assert.equal(editPropertyDefinition(source, { kind: 'remove', name: 'class' }).ok, false);
+});
+
+test('props remain editable through omitted Astro attribute inheritance', () => {
+  const source = `---
+import type { HTMLAttributes } from "astro/types";
+type Base = Omit<HTMLAttributes<"img">, "src" | "width"> & {
+  /** Original image tooltip. */
+  src: ImageMetadata | string;
+  width?: number;
+};
+type Props = Base & (
+  | { variant?: "default" }
+  | { variant: "cover" }
+);
+type AllProps = Base & { variant?: "default" | "cover" };
+const { src, width, variant = "default", ...rest } = Astro.props as AllProps;
+---
+<img {src} {width} {...rest} />`;
+  const imageSource = readComponentProperties(source).properties.find(
+    (field) => field.name === 'src'
+  );
+  assert.deepEqual(imageSource.editing, { kind: 'editable' });
+  const output = value(
+    editPropertyDefinition(source, {
+      kind: 'save',
+      originalName: 'src',
+      property: {
+        ...imageSource,
+        type: 'ImageMetadata | string | URL',
+        required: false,
+        readonly: true,
+        defaultValue: '"/placeholder.png"',
+        description: 'Updated image tooltip.',
+      },
+    })
+  );
+  assert.match(output, /readonly src\?: ImageMetadata \| string \| URL/);
+  assert.match(output, /src = "\/placeholder\.png"/);
+  assert.match(output, /Updated image tooltip\./);
+  assert.equal(
+    readComponentProperties(output).properties.find((field) => field.name === 'src').editing.kind,
+    'editable'
+  );
+});
+
+test('property permissions and conditions are validated at the boundary', () => {
+  const data = readComponentProperties(compositeCard);
+  const field = data.properties[0];
+  for (const editing of [
+    null,
+    {},
+    { kind: 'override' },
+    { kind: 'override', reason: '' },
+    { kind: 'override', reason: false },
+    { kind: 'restricted' },
+    { kind: 'restricted', reason: '' },
+    { kind: 'restricted', reason: false },
+    { kind: 'other' },
+  ]) {
+    assert.throws(() => parseComponentProperties({ ...data, properties: [{ ...field, editing }] }));
+  }
+  for (const conditions of [
+    'bad',
+    [42],
+    Array(PROPERTY_LIMITS.fieldsMax + 1).fill('rule'),
+    ['x'.repeat(PROPERTY_LIMITS.textCharsMax + 1)],
+  ]) {
+    assert.throws(() =>
+      parseComponentProperties({
+        ...data,
+        properties: [{ ...field, conditions }],
+      })
+    );
+  }
+});
+
 test('contracts reject malformed payloads and enforce resource bounds', () => {
   assert.deepEqual(
     parseComponentProperties(readComponentProperties(source)),
     readComponentProperties(source)
   );
   assert.deepEqual(parsePropertyChange(save()), save());
+  assert.deepEqual(
+    parsePropertyChange({
+      ...save(),
+      optionRenames: [{ from: "'solid'", to: "'filled'" }],
+    }),
+    { ...save(), optionRenames: [{ from: "'solid'", to: "'filled'" }] }
+  );
+  assert.deepEqual(
+    parsePropertyChange({
+      kind: 'options',
+      name: 'variant',
+      type: "'outline' | 'solid'",
+    }),
+    { kind: 'options', name: 'variant', type: "'outline' | 'solid'" }
+  );
   for (const input of [
     null,
     {},
     { kind: 'save', originalName: 'title', property: {} },
     { kind: 'order', names: [42] },
+    { kind: 'options', name: 'bad name', type: 'string' },
+    { kind: 'options', name: 'variant', type: 42 },
     { kind: 'remove', name: 'bad name' },
-    { kind: 'source', frontmatter: 'x'.repeat(PROPERTY_LIMITS.sourceCharsMax + 1) },
-    { kind: 'save', originalName: '', property: { ...property, required: 'yes' } },
-    { kind: 'save', originalName: '', property: { ...property, type: 'x'.repeat(32769) } },
-    { kind: 'order', names: Array(PROPERTY_LIMITS.fieldsMax + 1).fill('title') },
+    {
+      kind: 'source',
+      frontmatter: 'x'.repeat(PROPERTY_LIMITS.sourceCharsMax + 1),
+    },
+    {
+      kind: 'save',
+      originalName: '',
+      property: { ...property, required: 'yes' },
+    },
+    {
+      kind: 'save',
+      originalName: '',
+      property: { ...property, type: 'x'.repeat(32769) },
+    },
+    { ...save(), optionRenames: [{ from: '', to: "'filled'" }] },
+    { ...save(), optionRenames: [{ from: "'solid'", to: "'solid'" }] },
+    {
+      ...save(),
+      optionRenames: Array(PROPERTY_LIMITS.fieldsMax + 1).fill({
+        from: '1',
+        to: '2',
+      }),
+    },
+    {
+      kind: 'order',
+      names: Array(PROPERTY_LIMITS.fieldsMax + 1).fill('title'),
+    },
   ]) {
     assert.throws(() => parsePropertyChange(input));
   }
@@ -320,7 +856,10 @@ test('contracts reject malformed payloads and enforce resource bounds', () => {
   assert.throws(() => applySourceEdits('abc', [{ start: 1, end: 4, text: '' }]), /never overlap/);
   project(({ root }) =>
     assert.equal(
-      loadComponentProperties({ projectPath: root, file: path.join(root, 'missing.astro') }).ok,
+      loadComponentProperties({
+        projectPath: root,
+        file: path.join(root, 'missing.astro'),
+      }).ok,
       false
     )
   );
@@ -431,7 +970,12 @@ test('renames resolve tsconfig aliases and MDX instances', () => {
       'import Feature from "@/components/Card.astro";\n\n# Hello\n\n' + '<Feature title="Story" />'
     );
     const result = updateComponentProperties(
-      { projectPath: root, file: component, source, change: save({ name: 'heading' }) },
+      {
+        projectPath: root,
+        file: component,
+        source,
+        change: save({ name: 'heading' }),
+      },
       () => {}
     );
     value(result);
@@ -449,7 +993,12 @@ test('re-exports, runtime aliases, and dynamic imports cannot cause partial rena
       fs.writeFileSync(path.join(root, 'src/index.ts'), contents);
       const before = fs.readFileSync(page, 'utf8');
       const result = updateComponentProperties(
-        { projectPath: root, file: component, source, change: save({ name: 'heading' }) },
+        {
+          projectPath: root,
+          file: component,
+          source,
+          change: save({ name: 'heading' }),
+        },
         () => {}
       );
       assert.equal(result.ok, false);
@@ -571,7 +1120,12 @@ test('renaming a local prop on inherited Props updates website instances', () =>
     fs.writeFileSync(component, input);
     value(
       updateComponentProperties(
-        { projectPath: root, file: component, source: input, change: save({ name: 'heading' }) },
+        {
+          projectPath: root,
+          file: component,
+          source: input,
+          change: save({ name: 'heading' }),
+        },
         () => {}
       )
     );
diff --git a/test/contracts/main-boundaries.test.ts b/test/contracts/main-boundaries.test.ts
index d5281f24..066a0eab 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, 113);
+  assert.equal(harness.handlers.size, 114);
   assert.equal(terminalChannels.length, 4);
   assert.deepEqual(
     [...Object.keys(IPC_PAYLOADS)].sort(),
@@ -71,11 +71,24 @@ test('malformed writes fail before altering disk; valid writes still work', asyn
   );
   await assert.rejects(harness.invoke('page:write', { pagePath: file, model: { nodes: false } }));
   assert.equal(fs.readFileSync(file, 'utf8'), '<h1>Before</h1>\n');
-  await harness.invoke('page:writeRaw', { pagePath: file, source: '<h1>After</h1>\n' });
+  const written = toRecord(
+    await harness.invoke('page:writeRaw', { pagePath: file, source: '<h1>After</h1>\n' }),
+  );
   assert.equal(fs.readFileSync(file, 'utf8'), '<h1>After</h1>\n');
+  assert.equal(written?.['source'], '<h1>After</h1>\n');
   const result = toRecord(await harness.invoke('page:read', file));
   assert.equal(result?.['editable'], true);
   assert.equal(result?.['source'], '<h1>After</h1>\n');
+  const parsed = toRecord(
+    await harness.invoke('page:parse', { pagePath: file, source: '<main>Draft</main>\n' }),
+  );
+  assert.equal(parsed?.['editable'], true);
+  assert.equal(parsed?.['source'], '<main>Draft</main>\n');
+  assert.equal(
+    fs.readFileSync(file, 'utf8'),
+    '<h1>After</h1>\n',
+    'parsing a code draft has no disk side effect',
+  );
 });
 
 test('Markdown boundary preserves source metadata and rejects corrupted fields', () => {
diff --git a/test/contracts/page-node.test.ts b/test/contracts/page-node.test.ts
index c5c8585c..97bed309 100644
--- a/test/contracts/page-node.test.ts
+++ b/test/contracts/page-node.test.ts
@@ -29,7 +29,7 @@ const element = (id: string, name: string, children: readonly unknown[] | null):
 
 test('every kind round-trips through the parser', () => {
   const good: readonly unknown[] = [
-    { kind: 'text', id: 'n1', value: 'hello' },
+    { kind: 'text', id: 'n1', value: 'hello', start: 4, end: 9 },
     { kind: 'expr', id: 'n2', value: '{count}' },
     { kind: 'raw-line', id: 'n3', value: '<hr>' },
     { kind: 'comment', id: 'n4', value: 'note', jsx: true },
@@ -110,6 +110,14 @@ test('negative space: every wrong shape fails with a pinned message', () => {
     () => parsePageNode({ kind: 'map', id: 'n1', head: 'x.map((i) => (', children: [], bare: 'yes' }),
     /bare: expected boolean/,
   );
+  assert.throws(
+    () => parsePageNode({ kind: 'text', id: 'n1', value: 'x', start: 4 }),
+    /source range: expected safe integer offsets/,
+  );
+  assert.throws(
+    () => parsePageNode({ kind: 'text', id: 'n1', value: 'x', start: 4, end: 3 }),
+    /source range: end must not precede start/,
+  );
 });
 
 test('bounds: depth and node count fail at LIMITS, not at stack depth', () => {
diff --git a/test/css-code.js b/test/css-code.js
index 6364ec91..1bc7f31a 100644
--- a/test/css-code.js
+++ b/test/css-code.js
@@ -29,14 +29,29 @@ const same = (what, got, want) =>
   fs.mkdirSync(buildDir, { recursive: true });
   const bundlePath = path.join(buildDir, 'css-code.bundle.js');
   await esbuild.build({
-    entryPoints: [path.join(__dirname, '..', 'src', 'style-panel', 'lib', 'css-code.ts')],
+    stdin: {
+      contents: `
+        export * from './css-code'
+        export * from './css-rule-view'
+      `,
+      resolveDir: path.join(__dirname, '..', 'src', 'style-panel', 'lib'),
+      loader: 'ts',
+    },
     outfile: bundlePath,
     bundle: true,
     format: 'cjs',
     platform: 'node',
     logLevel: 'silent',
   });
-  const { cssTokens, highlightCss, stepNumberAt, stepSize, caretOffset, setCaretOffset } = require(bundlePath);
+  const {
+    buildCssRuleView,
+    cssTokens,
+    highlightCss,
+    stepNumberAt,
+    stepSize,
+    caretOffset,
+    setCaretOffset,
+  } = require(bundlePath);
 
   // --- colouring ------------------------------------------------------------
   //
@@ -71,6 +86,77 @@ const same = (what, got, want) =>
   same('custom property', cssTokens('--space-1').map((t) => t.kind), ['prop']);
   check('markup escapes', !highlightCss('a < b & c').includes('<b'), highlightCss('a < b & c'));
 
+  // --- matched-rule view ----------------------------------------------------
+  const matchedRule = ({
+    selector,
+    specificity,
+    order,
+    value,
+    winning,
+    atContext = [],
+    matchedSelector = selector,
+  }) => ({
+    rule: {
+      ruleId: selector,
+      selectorText: selector,
+      order,
+      embedLabel: 'src/styles/base.css',
+      atContext,
+      declarations: [{ declId: `${selector}:color`, prop: 'color', value, important: false }],
+    },
+    matchedSelectors: [{ text: matchedSelector, specificity }],
+    declStatus: {
+      [`${selector}:color`]: {
+        winning,
+        overriddenBy: winning ? null : '.specific',
+      },
+    },
+  });
+  const ruleView = buildCssRuleView([
+    matchedRule({ selector: '.general', specificity: [0, 1, 0], order: 0, value: 'red', winning: false }),
+    matchedRule({ selector: '.specific', specificity: [0, 2, 0], order: 1, value: 'blue', winning: true }),
+  ]);
+  check('the most specific selector is shown first', ruleView.code.startsWith('.specific {'));
+  check('every matching selector remains in the code view', ruleView.code.includes('.general {'));
+  const struckText = ruleView.highlights.map((range) => ruleView.code.slice(range.from, range.to));
+  same('overridden declarations are highlighted for strikethrough', struckText, ['  color: red;']);
+
+  const headingGroup = 'p,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6';
+  const headingView = buildCssRuleView([
+    matchedRule({
+      selector: headingGroup,
+      specificity: [0, 0, 1],
+      order: 2,
+      value: 'break-word',
+      winning: true,
+      matchedSelector: 'h1',
+    }),
+  ]);
+  same(
+    'only the matching member of a multiline selector is highlighted',
+    headingView.selectors.map((range) => headingView.code.slice(range.from, range.to)),
+    ['h1']
+  );
+  same(
+    'the complete multiline selector stays identifiable for neutral syntax',
+    headingView.selectorLists.map((range) => headingView.code.slice(range.from, range.to)),
+    [headingGroup]
+  );
+
+  const queryView = buildCssRuleView([
+    matchedRule({
+      selector: '.card',
+      specificity: [0, 1, 0],
+      order: 2,
+      value: 'green',
+      winning: true,
+      atContext: ['@media (width > 40rem)'],
+    }),
+  ]);
+  check('query context is preserved around its rule',
+    queryView.code === '@media (width > 40rem) {\n  .card {\n    color: green;\n  }\n}'
+  );
+
   // --- stepping -------------------------------------------------------------
   same('alt is a tenth', stepSize({ altKey: true }), 0.1);
   same('shift is ten', stepSize({ shiftKey: true }), 10);
diff --git a/test/lazy-panels.test.js b/test/lazy-panels.test.js
index 6d785ac1..7c520426 100644
--- a/test/lazy-panels.test.js
+++ b/test/lazy-panels.test.js
@@ -9,15 +9,26 @@ const fs = require('node:fs');
 const path = require('node:path');
 const esbuild = require('esbuild');
 const { JSDOM } = require('jsdom');
-const { parsePage } = require('../dist/electron/astroParser.js');
+const { parsePage, serializePage } = require('../dist/electron/astroParser.js');
 
 const PANEL_PATHS = [
-  './panels/PropsPanel', './panels/StylePanel', './ui/CodeWindow',
-  './panels/CmsPanel', './panels/CmsView', './panels/ContentView',
-  './panels/VariablesPanel', './panels/VariablesView',
+  './panels/PropsPanel',
+  './panels/StylePanel',
+  './ui/CodeWindow',
+  './panels/CmsPanel',
+  './panels/CmsView',
+  './panels/ContentView',
+  './panels/VariablesPanel',
+  './panels/VariablesView',
+  './panels/CodePanel',
 ];
 const REAL_PREVIEW = new Set([
-  'PreviewPane', 'CanvasView', 'DevOffline', 'PreviewOverlays', 'PreviewToolbar',
+  'PreviewPane',
+  'CanvasView',
+  'DevOffline',
+  'PreviewOverlays',
+  'PreviewToolbar',
+  'PreviewSizeControls',
 ]);
 const settle = () => new Promise((resolve) => setTimeout(resolve, 10));
 
@@ -32,11 +43,15 @@ test('all optional editors load without hiding the app or replacing its preview'
   const { createRoot } = require('react-dom/client');
   const App = require(bundle).default;
   const root = createRoot(document.getElementById('root'));
-  const act = (action) => React.act(async () => { await action(); await settle(); });
+  const act = (action) =>
+    React.act(async () => {
+      await action();
+      await settle();
+    });
   try {
-    await act(() => root.render(
-      React.createElement(React.Suspense, { fallback: null }, React.createElement(App)),
-    ));
+    await act(() =>
+      root.render(React.createElement(React.Suspense, { fallback: null }, React.createElement(App)))
+    );
     await act(() => __lazyPanels.WelcomeScreen.onOpen('/project'));
     const stable = captureEditor();
     const context = { act, gates, stable };
@@ -47,6 +62,7 @@ test('all optional editors load without hiding the app or replacing its preview'
     await releasePanel(context, 'PropsPanel');
     await checkVariables(context);
     await checkCMS(context);
+    await checkCodePanel(context);
     await checkCodeWindow(context);
     assert.equal(gates.requested.size, PANEL_PATHS.length, 'Every lazy editor was exercised');
   } finally {
@@ -61,14 +77,66 @@ async function checkVariables(context) {
   await context.act(() => railButton(5).click());
   assertPending(context, 'VariablesPanel');
   await releasePanel(context, 'VariablesPanel');
-  await context.act(() => __lazyPanels.VariablesPanel.onSelect({
-    file: 'src/styles/tokens.css', index: 0,
-  }));
+  await context.act(() =>
+    __lazyPanels.VariablesPanel.onSelect({
+      file: 'src/styles/tokens.css',
+      index: 0,
+    })
+  );
   assertPending(context, 'VariablesView');
   await releasePanel(context, 'VariablesView');
   assert.equal(__lazyPanels.VariablesView.selected.file, 'src/styles/tokens.css');
 }
 
+async function checkCodePanel(context) {
+  await context.act(() => railButton(6).click());
+  assertPending(context, 'CodePanel');
+  await releasePanel(context, 'CodePanel');
+  assert.equal(__lazyPanels.CodePanel.relativePath, 'src/pages/index.astro');
+  assert.match(__lazyPanels.CodePanel.source, /<main>Content<\/main>/);
+  await context.act(() => {
+    const frame = document.querySelector('.frame-clip iframe');
+    assert.ok(frame, 'The preview frame is available for a canvas click');
+    window.dispatchEvent(
+      new window.MessageEvent('message', {
+        data: {
+          type: 'avb:click-node',
+          path: '0',
+          occurrence: 0,
+          outside: false,
+        },
+        source: frame.contentWindow,
+      })
+    );
+  });
+  assert.ok(
+    document.querySelector('[data-test-panel="CodePanel"]'),
+    'canvas selection keeps the code panel open'
+  );
+  const changed = __lazyPanels.CodePanel.source.replace(
+    '<main>Content</main>',
+    '<main><h1>Changed</h1></main>'
+  );
+  await context.act(async () => {
+    await __lazyPanels.CodePanel.onChange(changed, changed.indexOf('<h1>') + 2);
+  });
+  assert.equal(__lazyPanels.PropsPanel.node.name, 'h1', 'code selection reaches the inspector');
+  assert.equal(
+    document.querySelector('.property-saving-overlay'),
+    null,
+    'visual edits are enabled'
+  );
+  await context.act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+  await context.act(() => __lazyPanels.PropsPanel.onSetContent('Visual edit'));
+  await context.act(() => new Promise((resolve) => setTimeout(resolve, 350)));
+  assert.match(
+    __lazyPanels.CodePanel.source,
+    /<h1>Visual edit<\/h1>/,
+    'visual edits serialize back into the code panel'
+  );
+  context.stable();
+}
+
 async function checkCMS(context) {
   await context.act(() => railButton(4).click());
   assertPending(context, 'CmsPanel');
@@ -143,7 +211,7 @@ function createImportGates() {
       const name = path.basename(modulePath);
       assert.equal(requested.has(name), false, `${name} should request its module once`);
       requested.add(name);
-      // Eight fixed entries bound the queue, and release owns its only mutation.
+      // Nine fixed entries bound the queue, and release owns its only mutation.
       return new Promise((resolve) => pending.set(name, () => resolve(load())));
     },
     release(name) {
@@ -168,25 +236,30 @@ async function buildApp() {
     external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
     loader: { '.css': 'empty', '.svg': 'empty', '.png': 'empty' },
     logLevel: 'silent',
-    plugins: [{ name: 'deferred-panel-imports', setup(build) {
-      build.onLoad({ filter: /\/src\/App\.tsx$/ }, ({ path: filename }) => {
-        const source = fs.readFileSync(filename, 'utf8');
-        const contents = PANEL_PATHS.reduce((code, name) => {
-          const expression = `import('${name}')`;
-          assert.ok(code.includes(expression), `${name} remains a real lazy import`);
-          const deferredImport = `globalThis.__loadTestPanel('${name}', () => ${expression})`;
-          return code.replace(expression, deferredImport);
-        }, source);
-        return { contents, loader: 'tsx' };
-      });
-      build.onLoad({ filter: /\/src\/(?:panels\/[^/]+|ui\/CodeWindow)\.tsx$/ }, (args) => {
-        const name = path.basename(args.path, '.tsx');
-        if (REAL_PREVIEW.has(name)) {
-          return undefined;
-        }
-        return { contents: panelStub(name), loader: 'tsx' };
-      });
-    } }],
+    plugins: [
+      {
+        name: 'deferred-panel-imports',
+        setup(build) {
+          build.onLoad({ filter: /\/src\/App\.tsx$/ }, ({ path: filename }) => {
+            const source = fs.readFileSync(filename, 'utf8');
+            const contents = PANEL_PATHS.reduce((code, name) => {
+              const expression = `import('${name}')`;
+              assert.ok(code.includes(expression), `${name} remains a real lazy import`);
+              const deferredImport = `globalThis.__loadTestPanel('${name}', () => ${expression})`;
+              return code.replace(expression, deferredImport);
+            }, source);
+            return { contents, loader: 'tsx' };
+          });
+          build.onLoad({ filter: /\/src\/(?:panels\/[^/]+|ui\/CodeWindow)\.tsx$/ }, (args) => {
+            const name = path.basename(args.path, '.tsx');
+            if (REAL_PREVIEW.has(name)) {
+              return undefined;
+            }
+            return { contents: panelStub(name), loader: 'tsx' };
+          });
+        },
+      },
+    ],
   });
   return bundle;
 }
@@ -204,11 +277,17 @@ function panelStub(name) {
 
 function installDOM() {
   const dom = new JSDOM('<!doctype html><div id="root"></div>', {
-    url: 'http://localhost/', pretendToBeVisual: true,
+    url: 'http://localhost/',
+    pretendToBeVisual: true,
   });
   global.window = dom.window;
   const browserGlobals = [
-    'document', 'navigator', 'HTMLElement', 'Element', 'Node', 'MutationObserver',
+    'document',
+    'navigator',
+    'HTMLElement',
+    'Element',
+    'Node',
+    'MutationObserver',
   ];
   for (const name of browserGlobals) {
     global[name] = dom.window[name];
@@ -216,25 +295,47 @@ function installDOM() {
   global.getComputedStyle = dom.window.getComputedStyle;
   global.requestAnimationFrame = (callback) => setTimeout(callback, 0);
   global.cancelAnimationFrame = clearTimeout;
-  global.ResizeObserver = class { observe() {} disconnect() {} };
+  global.ResizeObserver = class {
+    observe() {}
+    disconnect() {}
+  };
   dom.window.ResizeObserver = global.ResizeObserver;
   dom.window.matchMedia = () => ({
-    matches: false, addEventListener() {}, removeEventListener() {},
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
   });
   global.IS_REACT_ACT_ENVIRONMENT = true;
   return dom;
 }
 
 function createBridge() {
-  const page = { name: 'index.astro', path: '/project/src/pages/index.astro', route: '/' };
+  const page = {
+    name: 'index.astro',
+    path: '/project/src/pages/index.astro',
+    route: '/',
+  };
   const source = '---\nconst title = "Home";\n---\n<main>Content</main>';
   const bridge = {
     pendingProject: async () => null,
-    scanProject: async () => ({ pages: [page], pageFolders: [], components: [], layouts: [] }),
+    scanProject: async () => ({
+      pages: [page],
+      pageFolders: [],
+      components: [],
+      layouts: [],
+    }),
     hasNodeModules: async () => true,
     startDevServer: async () => ({ url: 'http://localhost:4321' }),
     listProjectClasses: async () => [],
-    readPage: async () => ({ ...parsePage(source), source }),
+    readPage: async () => ({ ...parsePage(source, { locs: true }), source }),
+    parsePageSource: async ({ source: next }) => ({
+      ...parsePage(next, { locs: true }),
+      source: next,
+    }),
+    writePage: async ({ model }) => {
+      const next = serializePage(model);
+      return { ok: true, ...parsePage(next, { locs: true }), source: next };
+    },
     gitInfo: async () => ({ isRepo: false }),
     onCssChanged: () => () => {},
   };
diff --git a/test/morph.js b/test/morph.js
index 42c0f57b..714afc9d 100644
--- a/test/morph.js
+++ b/test/morph.js
@@ -186,6 +186,34 @@ const LIVE_TABS = (labels, active) =>
   check('the node is still patched', live.querySelector('p').textContent === 'b', live.innerHTML);
 }
 
+// A slider, nav, or tab script can replace an entire subtree after the server
+// renders it. If the old and new server trees agree on that subtree, there is
+// no edit to apply inside it and therefore no reason to line up its live
+// descendants. Only the changed sibling should be visited.
+{
+  const server = (text) =>
+    '<div class="runtime"><div class="item">One</div><div class="item">Two</div></div>' +
+    `<h1>${text}</h1>`;
+  const prev = tree(server('Before'));
+  const next = tree(server('After'));
+  const live = tree(
+    '<div class="runtime"><div class="client-clone">Client state</div></div>' +
+      '<h1>Before</h1>'
+  );
+  const threw = patch(live, prev, next);
+  check('an unchanged runtime-owned subtree does not force a reload', threw === null, threw);
+  check(
+    'the text beside that subtree is still patched inline',
+    live.querySelector('h1').textContent === 'After',
+    live.innerHTML
+  );
+  check(
+    'the runtime-owned subtree remains untouched',
+    live.querySelector('.client-clone').textContent === 'Client state',
+    live.innerHTML
+  );
+}
+
 // An id is still taken at its word, ahead of any class.
 {
   const prev = tree('<div id="keep" class="a">x</div>');
diff --git a/test/palette-model.test.js b/test/palette-model.test.js
index 3329ef56..08f4d432 100644
--- a/test/palette-model.test.js
+++ b/test/palette-model.test.js
@@ -24,6 +24,24 @@ test('preview URLs respect the project slash policy and preserve encoded file id
   }
 });
 
+test('component preview messages accept only known status updates', () => {
+  for (const status of ['empty', 'ready']) {
+    assert.deepEqual(
+      model.parseComponentPreviewMessage({ type: 'avb:component-preview', status }),
+      { status },
+    );
+  }
+  for (const value of [
+    null,
+    {},
+    { type: 'other', status: 'ready' },
+    { type: 'avb:component-preview' },
+    { type: 'avb:component-preview', status: 'unknown' },
+  ]) {
+    assert.equal(model.parseComponentPreviewMessage(value), undefined);
+  }
+});
+
 test('component usage parser preserves success and operating-error variants', () => {
   assert.deepEqual(model.parseComponentUsage({ files: [file], total: 2 }), {
     kind: 'ready',
diff --git a/test/palette-preview.test.js b/test/palette-preview.test.js
index 4d098812..92cefccf 100644
--- a/test/palette-preview.test.js
+++ b/test/palette-preview.test.js
@@ -1,6 +1,6 @@
 // Goal: palette hover previews identify the exact component file and cancel
 // obsolete hover requests. Methodology: mount the real palette, dispatch pointer
-// entry/exit events, and inspect the resulting iframe across duplicate names.
+// entry/exit events, inspect iframe identity, and apply validated ready/empty statuses.
 
 const test = require('node:test');
 const assert = require('node:assert/strict');
@@ -51,7 +51,17 @@ test('hover preview targets exact files and cancels obsolete delayed opens', asy
       createFrom: { kind: 'unavailable', reason: 'Select an element.' },
     })));
     await checkCancelledHover(context);
-    await checkPreviewTarget(context, 'Interactive', 'src/components/Interactive/AccordionItem.astro');
+    const interactiveFrame = await checkPreviewTarget(
+      context,
+      'Interactive',
+      'src/components/Interactive/AccordionItem.astro',
+    );
+    await sendPreviewStatus(context, interactiveFrame, 'empty');
+    assert.equal(
+      document.querySelector('.comp-preview').style.visibility,
+      'hidden',
+      'An empty component has no preview box',
+    );
     await checkPreviewTarget(context, 'Marketing', 'src/components/Marketing/AccordionItem.astro');
     await checkPreviewTarget(context, 'layouts', 'src/layouts/Base.astro');
     await React.act(async () => {
@@ -89,8 +99,33 @@ async function checkPreviewTarget(context, folder, componentPath) {
   assert.equal(url.origin, 'http://localhost:4321');
   assert.equal(url.pathname, '/__avb/preview/');
   assert.equal(url.searchParams.get('c'), name);
-  assert.equal(url.searchParams.get('p'), componentPath, 'Duplicate basenames retain file identity');
+  assert.equal(
+    url.searchParams.get('p'),
+    componentPath,
+    'Duplicate basenames retain file identity',
+  );
   assert.equal(iframe.title, `${name} preview`);
+  const preview = document.querySelector('.comp-preview');
+  assert.equal(preview.style.visibility, 'hidden', 'The box waits for rendered preview content');
+  await context.act(async () => {
+    window.dispatchEvent(new context.dom.window.MessageEvent('message', {
+      source: iframe.contentWindow,
+      data: { type: 'avb:component-preview', status: 'unknown' },
+    }));
+  });
+  assert.equal(preview.style.visibility, 'hidden', 'Malformed preview status is ignored');
+  await sendPreviewStatus(context, iframe, 'ready');
+  assert.equal(preview.style.visibility, 'visible', 'Rendered content reveals the preview box');
+  return iframe;
+}
+
+async function sendPreviewStatus(context, iframe, status) {
+  await context.act(async () => {
+    window.dispatchEvent(new context.dom.window.MessageEvent('message', {
+      source: iframe.contentWindow,
+      data: { type: 'avb:component-preview', status },
+    }));
+  });
 }
 
 async function pointerEvent({ dom, act }, item, type) {
diff --git a/test/preview-lifecycle.test.js b/test/preview-lifecycle.test.js
index 28798d19..93838e56 100644
--- a/test/preview-lifecycle.test.js
+++ b/test/preview-lifecycle.test.js
@@ -162,9 +162,12 @@ test('preview owns only mounted frames and cleans canceled/unmounted drags', asy
   await send(canvasFrame, { type: 'avb:page-height', height: Infinity });
   assert.equal(document.querySelector('.canvas-frame').style.height, '900px');
   await send(canvasFrame, { type: 'avb:page-height', height: 80000 });
-  assert.equal(document.querySelector('.canvas-frame').style.height, '30000px');
+  assert.equal(document.querySelector('.canvas-frame').style.height, '1125px');
   await send(oldFrame, { type: 'avb:page-height', height: 1000 });
-  assert.equal(document.querySelector('.canvas-frame').style.height, '30000px');
+  assert.equal(document.querySelector('.canvas-frame').style.height, '1125px');
+  const phoneFrame = document.querySelectorAll('iframe')[2].contentWindow;
+  await send(phoneFrame, { type: 'avb:page-height', height: 80000 });
+  assert.equal(document.querySelectorAll('.canvas-frame')[2].style.height, '1015px');
   await render({ refreshKey: 1 });
   assert.equal(document.querySelector('.canvas-frame').style.height, '900px');
   await act(async () => { pointer(document.querySelector('.canvas-view'), 'pointerdown'); await settle(); });
@@ -191,3 +194,80 @@ test('preview owns only mounted frames and cleans canceled/unmounted drags', asy
   assert.deepEqual([767, 768, 1023, 1024, NaN, 0].map(deviceForWidth), ['phone', 'tablet', 'tablet', 'desktop', null, null]);
   dom.window.close();
 });
+
+test('custom widths preserve layout size, scale to fit, and reset with device controls', async () => {
+  const dom = installHoverDOM();
+  const React = require('react');
+  const { createRoot } = require('react-dom/client');
+  const { Simulate } = require('react-dom/test-utils');
+  const { PreviewPane } = require(path.join(dir, 'preview.js'));
+  const observers = [];
+  let containerWidth = 1_024;
+  global.ResizeObserver = class {
+    constructor(callback) { observers.push(callback); }
+    observe() {}
+    disconnect() {}
+  };
+  Object.defineProperties(dom.window.HTMLElement.prototype, {
+    clientWidth: { configurable: true, get: () => containerWidth },
+    clientHeight: { configurable: true, get: () => 700 },
+  });
+  const root = createRoot(document.getElementById('root'));
+  const act = (action) => React.act(async () => { await action(); await settle(); });
+  function Preview() {
+    const [device, onDevice] = React.useState('desktop');
+    return React.createElement(PreviewPane, { ...hoverPreviewProps(), device, onDevice });
+  }
+  const widthInput = () => document.querySelector('[aria-label="Canvas width"]');
+  const setWidth = async (value) => {
+    await act(() => {
+      widthInput().value = value;
+      Simulate.change(widthInput());
+    });
+    await act(() => Simulate.blur(widthInput()));
+  };
+  try {
+    await act(() => root.render(React.createElement(Preview)));
+    const frame = document.querySelector('iframe');
+    await setWidth('2000');
+    const sized = document.querySelector('.frame-sized');
+    assert.equal(sized.style.width, '2000px');
+    assert.equal(sized.style.height, '1336px');
+    assert.match(sized.style.transform, /scale\(0\.5\)/);
+    assert.equal(document.querySelector('[aria-label="Canvas scale"]').textContent, '50%');
+    assert.equal(document.querySelector('.device-btns button.on').title, 'Desktop — 1');
+    assert.equal(document.querySelector('iframe'), frame, 'Changing width retains the loaded page');
+    containerWidth = 824;
+    await act(() => observers.forEach((callback) => callback()));
+    assert.equal(sized.style.width, '2000px', 'Panel resize preserves the requested viewport');
+    assert.match(sized.style.transform, /scale\(0\.4\)/);
+    for (const invalid of ['', '279', '7681', 'NaN', 'Infinity', '-100', '2e3', '400.5']) {
+      await setWidth(invalid);
+      assert.equal(sized.style.width, '2000px');
+      assert.equal(widthInput().value, '2000');
+    }
+    Object.defineProperties(sized, {
+      offsetWidth: { get: () => Number.parseFloat(sized.style.width) },
+      offsetHeight: { get: () => Number.parseFloat(sized.style.height) },
+    });
+    await act(() => document.querySelector('.rz-e').dispatchEvent(
+      new window.MouseEvent('pointerdown', { bubbles: true, button: 0, clientX: 800 }),
+    ));
+    await act(() => window.dispatchEvent(
+      new window.MouseEvent('pointerup', { bubbles: true, button: 0, clientX: 880 }),
+    ));
+    assert.equal(sized.style.width, '2400px', 'Dragging accounts for scale without capping at the panel');
+    await act(() => document.querySelector('[title="Phone (375px) — 3"]').click());
+    assert.equal(sized.style.width, '375px');
+    assert.match(sized.style.transform, /scale\(1\)/);
+    await setWidth('7680');
+    assert.equal(sized.style.width, '7680px');
+    await act(() => document.querySelector('[title="Reset canvas to available width"]').click());
+    assert.equal(sized.style.width, '824px');
+    assert.equal(sized.style.height, '700px');
+    assert.equal(document.querySelector('iframe'), frame);
+  } finally {
+    await act(() => root.unmount());
+    dom.window.close();
+  }
+});
diff --git a/test/prop-attributes.js b/test/prop-attributes.js
index f0c2a3e2..e1010866 100644
--- a/test/prop-attributes.js
+++ b/test/prop-attributes.js
@@ -1,5 +1,6 @@
-// Exercise attribute literal parsing and real paste events. The object field must
-// handle both paste callback paths, preserve existing rows, and reject size bounds.
+// Exercise attribute literal parsing, real paste events, and expanded value editing.
+// The object field must preserve rows and reject bounds; the value editor must open
+// from a press and provide enough width to read a JavaScript expression.
 const assert = require('node:assert/strict');
 const path = require('node:path');
 const fs = require('node:fs');
@@ -38,9 +39,13 @@ dom.window.Range.prototype.getClientRects = () => [];
 const React = require('react');
 const { createRoot } = require('react-dom/client');
 const { act } = React;
-const { ObjectAttrsField, parseObjectLiteral, serializeObjectLiteral, parseAttrPaste } = require(
-  output,
-);
+const {
+  AttributesSection,
+  ObjectAttrsField,
+  parseObjectLiteral,
+  serializeObjectLiteral,
+  parseAttrPaste,
+} = require(output);
 assert.deepEqual(parseAttrPaste('id="hero" tabindex={2} disabled'), [
   { name: 'id', value: 'hero' },
   { name: 'tabindex', value: '{2}' },
@@ -128,6 +133,59 @@ const paste = async (text) => {
   const before = writes;
   await paste(`id="${'x'.repeat(8193)}"`);
   assert.equal(writes, before);
+  await act(async () =>
+    root.render(
+      React.createElement(AttributesSection, {
+        node: {
+          id: 'section',
+          props: {
+            'class:list': { type: 'expr', value: '["icon", variant]' },
+            '...rest': { type: 'spread', value: 'rest' },
+          },
+        },
+        names: ['class:list', '...rest'],
+        bindCtx: { frontmatter: 'const variant = "medium";' },
+        onSetProp: () => {},
+        onRenameProp: () => {},
+      }),
+    ),
+  );
+  await act(async () =>
+    document
+      .querySelector('.attr-row')
+      .dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })),
+  );
+  const valueField = document.querySelector('.attr-value-field');
+  assert.ok(valueField);
+  valueField.getBoundingClientRect = () => new dom.window.DOMRect(600, 300, 280, 40);
+  await act(async () =>
+    valueField.dispatchEvent(
+      new dom.window.MouseEvent('pointerdown', { bubbles: true, cancelable: true }),
+    ),
+  );
+  assert.equal(document.querySelector('.attr-editor.var-src'), null);
+  assert.ok(valueField.querySelector('.cm-lineWrapping'));
+  await act(async () =>
+    document
+      .querySelector('button[title="Expand value"]')
+      .dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })),
+  );
+  const expanded = document.querySelector('.attr-editor.var-src');
+  assert.ok(expanded);
+  assert.equal(expanded.style.width, '760px');
+  const spreadRow = document.querySelectorAll('.attr-row')[1];
+  assert.equal(spreadRow.querySelector('.attr-name').textContent, '{...rest}');
+  assert.equal(spreadRow.querySelector('.attr-eq'), null);
+  assert.equal(spreadRow.querySelector('.attr-value'), null);
+  await act(async () =>
+    spreadRow.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })),
+  );
+  const spreadEditor = document.querySelector('.attr-editor');
+  const spreadName = spreadEditor.querySelector('input');
+  assert.equal(spreadName.value, '{...rest}');
+  assert.equal(spreadName.readOnly, true);
+  assert.equal(spreadEditor.querySelectorAll('.attr-editor-row').length, 1);
+  assert.doesNotMatch(spreadEditor.textContent, /Value/);
   await act(async () => root.unmount());
   dom.window.close();
   console.log(
diff --git a/test/scope-completions.js b/test/scope-completions.js
index 43924487..4962530f 100644
--- a/test/scope-completions.js
+++ b/test/scope-completions.js
@@ -103,6 +103,15 @@ const year = new Date().getFullYear();`;
     chipped('content === "content"').length === 1,
     JSON.stringify(chipped('content === "content"'))
   );
+  const typedNames = new Set(['src', 'as', 'string']);
+  const typedChips = scopeChips('src as string', typedNames).map((chip) =>
+    'src as string'.slice(chip.from, chip.to)
+  );
+  check(
+    'a TypeScript assertion chips only its runtime value',
+    typedChips.join(',') === 'src',
+    JSON.stringify(typedChips)
+  );
   check('nothing in scope, nothing chipped', scopeChips('render && content', new Set()).length === 0);
 
   if (failures.length) {
diff --git a/test/section-dot.js b/test/section-dot.js
index e5955c7f..b40017d9 100644
--- a/test/section-dot.js
+++ b/test/section-dot.js
@@ -123,6 +123,14 @@ const check = (what, condition, detail) => {
     );
   const dotOn = (label) => !!sectionNamed(label)?.querySelector('.embed-editor_section-dot');
   const collapsed = (label) => !!sectionNamed(label)?.classList.contains('is-collapsed');
+  const collapsedLabels = () => [...panel.querySelectorAll('.embed-editor_section-block')]
+    .filter((section) => section.classList.contains('is-collapsed'))
+    .map((section) => section.querySelector('.embed-editor_section-title')?.textContent?.trim());
+  const clickSection = async ({ label, shiftKey = false }) => {
+    const button = sectionNamed(label)?.querySelector('.embed-editor_section-toggle');
+    button?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, shiftKey }));
+    await wait(120);
+  };
 
   const dotOf = (label) => {
     const dot = sectionNamed(label)?.querySelector('.embed-editor_section-dot');
@@ -134,6 +142,35 @@ const check = (what, condition, detail) => {
   check('the panel mounts with its sections', !!sectionNamed('Flex/Grid Child'), [...panel.querySelectorAll('.embed-editor_section-title')].map((t) => t.textContent).join(' | '));
   check('and Flex/Grid Child starts collapsed', collapsed('Flex/Grid Child'), 'it is open, so the collapsed case is not being tested');
 
+  // Shift applies the clicked section's next state to every peer. An open
+  // section therefore closes all; any closed section then opens all. A plain
+  // click still changes only its own section.
+  await clickSection({ label: 'Spacing', shiftKey: true });
+  check(
+    'Shift-clicking an open header closes every section',
+    collapsedLabels().length === panel.querySelectorAll('.embed-editor_section-block').length,
+    collapsedLabels().join(' | ')
+  );
+  await clickSection({ label: 'Size', shiftKey: true });
+  check(
+    'Shift-clicking a closed header opens every section',
+    collapsedLabels().length === 0,
+    collapsedLabels().join(' | ')
+  );
+  await clickSection({ label: 'Size' });
+  check(
+    'a plain click still changes only one section',
+    collapsedLabels().join(' | ') === 'Size',
+    collapsedLabels().join(' | ')
+  );
+  await clickSection({ label: 'Size' });
+  await clickSection({ label: 'Flex/Grid Child' });
+  check(
+    'the initial mixed state can still be restored',
+    collapsedLabels().join(' | ') === 'Flex/Grid Child',
+    collapsedLabels().join(' | ')
+  );
+
   // `.card { order: 3 }` — the picked selector is one of the things styling this
   // section, so the dot is blue.
   check('a section your own selector styles is blue', dotOf('Flex/Grid Child') === 'blue', dotOf('Flex/Grid Child'));
diff --git a/test/selector-well.js b/test/selector-well.js
index 78d74ab8..b311f6cc 100644
--- a/test/selector-well.js
+++ b/test/selector-well.js
@@ -7,7 +7,8 @@
 // scan takes, so the panel confidently gave the wrong answer and then quietly
 // changed it. These check that the wait shows as a wait: a spinner while the scan
 // is running and there is nothing to show yet, and nothing extra once there is
-// (or once the scan is done and the answer really is none).
+// (or once the scan is done and the answer really is none). It also verifies
+// that component-authored selector provenance reaches the chip's visual class.
 //
 // In two halves, because the first version of this only had the first one and the
 // spinner still never appeared in the app: the well rendered it correctly, and was
@@ -24,6 +25,30 @@ const check = (what, condition, detail) => {
   if (!condition) {failures.push(`  ${what}${detail ? `\n    ${detail}` : ''}`);}
 };
 
+const channelLuminance = (value) => {
+  const channel = value / 255;
+  return channel <= 0.04045
+    ? channel / 12.92
+    : ((channel + 0.055) / 1.055) ** 2.4;
+};
+const colorLuminance = (hex) => {
+  const channels = hex.match(/[0-9a-f]{2}/gi)?.map((value) => Number.parseInt(value, 16));
+  if (!channels || channels.length !== 3) {return null;}
+  return (
+    0.2126 * channelLuminance(channels[0]) +
+    0.7152 * channelLuminance(channels[1]) +
+    0.0722 * channelLuminance(channels[2])
+  );
+};
+const contrastRatio = (first, second) => {
+  const firstLuminance = colorLuminance(first);
+  const secondLuminance = colorLuminance(second);
+  if (firstLuminance == null || secondLuminance == null) {return null;}
+  const lighter = Math.max(firstLuminance, secondLuminance);
+  const darker = Math.min(firstLuminance, secondLuminance);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+
 (async () => {
   const esbuild = require('esbuild');
   const buildDir = path.join(__dirname, '..', 'node_modules', '.stacki-test');
@@ -31,7 +56,11 @@ const check = (what, condition, detail) => {
   const bundlePath = path.join(buildDir, 'selector-well.bundle.js');
   await esbuild.build({
     stdin: {
-      contents: `export { SelectorPicker } from './EmbedEditor'`,
+      contents: `
+        export { SelectorPicker } from './EmbedEditor'
+        export { listMatchedSelectors } from './lib/resolved'
+        export { selectorDependsOnAncestor } from './lib/selectors'
+      `,
       resolveDir: path.join(__dirname, '..', 'src', 'style-panel'),
       loader: 'tsx',
     },
@@ -48,23 +77,37 @@ const check = (what, condition, detail) => {
   const { JSDOM } = require('jsdom');
   const dom = new JSDOM('<!doctype html><div id="root"></div>', { pretendToBeVisual: true });
   global.window = dom.window;
+  global.Window = dom.window.Window;
   global.document = dom.window.document;
   global.navigator = dom.window.navigator;
+  global.HTMLElement = dom.window.HTMLElement;
+  global.Element = dom.window.Element;
+  global.Node = dom.window.Node;
+  global.getComputedStyle = dom.window.getComputedStyle;
   global.IS_REACT_ACT_ENVIRONMENT = true;
   dom.window.ResizeObserver = class { observe() {} unobserve() {} disconnect() {} };
   global.ResizeObserver = dom.window.ResizeObserver;
   global.MutationObserver = dom.window.MutationObserver;
   global.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
   global.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  dom.window.Range.prototype.getClientRects = () => [];
+  dom.window.Range.prototype.getBoundingClientRect = () => ({
+    bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0,
+    toJSON: () => ({}),
+  });
 
   const React = require('react');
   const { createRoot } = require('react-dom/client');
   const { act } = require('react');
-  const { SelectorPicker } = require(bundlePath);
+  const {
+    SelectorPicker,
+    listMatchedSelectors,
+    selectorDependsOnAncestor,
+  } = require(bundlePath);
 
   const CHIPS = [
-    { key: 'a', text: 'html.theme-dark' },
-    { key: 'b', text: '.theme-dark' },
+    { key: 'a', text: 'html.theme-dark', fromComponent: true },
+    { key: 'b', text: '.theme-dark', fromComponent: false },
   ];
   const reactRoot = createRoot(document.getElementById('root'));
   const show = async (props) =>
@@ -100,6 +143,158 @@ const check = (what, condition, detail) => {
 
   await show({ loading: false, selectors: CHIPS });
   check('and a finished one with selectors shows them', spinner() == null && chips() === 2, `${chips()} chips`);
+  const renderedChips = [...document.querySelectorAll('.embed-editor_selector-chip')];
+  check(
+    'a component selector receives the green component class',
+    renderedChips[0]?.classList.contains('is-component') === true,
+    renderedChips[0]?.className
+  );
+  check(
+    'a non-component selector keeps the standard class treatment',
+    renderedChips[1]?.classList.contains('is-component') === false,
+    renderedChips[1]?.className
+  );
+  check(
+    'component provenance is included in the accessible name',
+    renderedChips[0]?.getAttribute('aria-label') ===
+      'html.theme-dark, component selector',
+    renderedChips[0]?.getAttribute('aria-label')
+  );
+  check(
+    'an inactive selector exposes its unpressed state',
+    renderedChips[0]?.getAttribute('aria-pressed') === 'false'
+  );
+  await show({ loading: false, selectors: CHIPS, activeSelector: 'html.theme-dark' });
+  check(
+    'the selected selector exposes its pressed state',
+    document.querySelector('.embed-editor_selector-chip')?.getAttribute('aria-pressed') === 'true'
+  );
+  let defaultDeselections = 0;
+  let defaultSelections = 0;
+  await show({
+    loading: false,
+    selectors: CHIPS,
+    activeSelector: 'html.theme-dark',
+    onDeselect: () => {defaultDeselections += 1;},
+    onSelect: () => {defaultSelections += 1;},
+  });
+  await act(async () => document.querySelector('.embed-editor_selector-chip')?.click());
+  check(
+    'the initially active selector deselects on its first click',
+    defaultDeselections === 1 && defaultSelections === 0,
+    `${defaultDeselections} deselections, ${defaultSelections} selections`
+  );
+
+  check(
+    'an ancestor selector is classified as inherited',
+    selectorDependsOnAncestor('.layout > .heading') === true
+  );
+  check(
+    'a sibling condition inside :has does not become inherited',
+    selectorDependsOnAncestor('.heading:has(+ .text)') === false
+  );
+  check(
+    'a sibling selector is not described as a parent relationship',
+    selectorDependsOnAncestor('.eyebrow + .heading') === false
+  );
+
+  const CATEGORY_CHIPS = [
+    { key: 'direct', text: '.heading:has(+ .text)', fromComponent: true },
+    { key: 'tag', text: 'h1', fromComponent: false },
+    { key: 'state', text: ':focus-visible', fromComponent: false },
+    { key: 'parent', text: '.hero .heading', fromComponent: true },
+  ];
+  let visibleSelectors = [];
+  await show({
+    loading: false,
+    selectors: CATEGORY_CHIPS,
+    onVisibleSelectorsChange: (selectors) => {visibleSelectors = [...selectors];},
+  });
+  check('global selectors are hidden initially', chips() === 1, `${chips()} chips`);
+  check(
+    'the picker reports only selectors visible with both filters closed',
+    visibleSelectors.join('|') === '.heading:has(+ .text)',
+    visibleSelectors.join('|')
+  );
+  const filterLabel = (name) =>
+    [...document.querySelectorAll('.embed-editor_selector-filter')]
+      .find((label) => label.textContent.includes(name));
+  check(
+    'tag and broad-state selectors are counted as global',
+    filterLabel('global')?.textContent.includes('(2)') === true,
+    filterLabel('global')?.textContent
+  );
+  check(
+    'parent-qualified selectors are counted as inherited',
+    filterLabel('inherited')?.textContent.includes('(1)') === true,
+    filterLabel('inherited')?.textContent
+  );
+
+  await act(async () => filterLabel('global')?.querySelector('input')?.click());
+  const globalChips = [...document.querySelectorAll('.embed-editor_selector-chip')];
+  check('revealing globals adds both grey chips', globalChips.length === 3);
+  check(
+    'the visible-selector report follows the global checkbox',
+    visibleSelectors.includes('h1') && visibleSelectors.includes(':focus-visible'),
+    visibleSelectors.join('|')
+  );
+  check(
+    'a tag selector receives the global grey class',
+    globalChips.find((chip) => chip.textContent === 'h1')?.classList.contains('is-global') === true
+  );
+  check(
+    'a global selector is named for assistive technology',
+    globalChips.find((chip) => chip.textContent === 'h1')?.getAttribute('aria-label') ===
+      'h1, global selector'
+  );
+
+  await act(async () => filterLabel('global')?.querySelector('input')?.click());
+  await act(async () => filterLabel('inherited')?.querySelector('input')?.click());
+  const inheritedChip = [...document.querySelectorAll('.embed-editor_selector-chip')]
+    .find((chip) => chip.textContent === '.hero .heading');
+  check(
+    'an ancestor-qualified selector receives the inherited grey class',
+    inheritedChip?.classList.contains('is-inherited') === true,
+    inheritedChip?.className
+  );
+  check(
+    'grey category naming preserves component provenance',
+    inheritedChip?.getAttribute('aria-label') ===
+      '.hero .heading, inherited and component selector',
+    inheritedChip?.getAttribute('aria-label')
+  );
+
+  // The same selector may be authored globally and inside a component. The chip is
+  // deduplicated, but it remains component-colored if any matching source is one.
+  const matchedRule = (text, fromComponent, order) => ({
+    rule: {
+      declarations: [{ prop: 'color' }],
+      selectorText: text,
+      atContext: [],
+      fromComponent,
+    },
+    matchedSelectors: [{ text, specificity: [0, 1, 0], pseudoElement: null }],
+    order,
+  });
+  const listed = listMatchedSelectors(
+    {
+      base: [
+        matchedRule('.shared', false, 0),
+        matchedRule('.shared', true, 1),
+        matchedRule('.global', false, 2),
+      ],
+      conditional: [],
+    },
+    ''
+  );
+  check(
+    'component provenance survives selector deduplication',
+    listed.find((selector) => selector.text === '.shared')?.fromComponent === true
+  );
+  check(
+    'ordinary stylesheet provenance remains ordinary',
+    listed.find((selector) => selector.text === '.global')?.fromComponent === false
+  );
 
   // A global selector (`:target`, `*`) is folded away unless asked for — the well
   // then has nothing in it, and the scan is over, so it must not spin forever.
@@ -121,6 +316,7 @@ const check = (what, condition, detail) => {
         export { default as EmbedEditor } from './EmbedEditor'
         export { setHost } from './lib/host'
         export { setCanvasFrame } from '../canvasQuery.js'
+        export { EditorView } from '@codemirror/view'
       `,
       resolveDir: path.join(__dirname, '..', 'src', 'style-panel'),
       loader: 'tsx',
@@ -137,15 +333,20 @@ const check = (what, condition, detail) => {
 
   const READ_MS = 250;
   const SHEET = { rel: 'src/styles/main.css', name: 'main.css', path: '/p/src/styles/main.css', size: 10 };
+  let styleWriteCount = 0;
+  let writtenCss = '';
   dom.window.avb = {
     listStyleFiles: async () => ({ files: [] }),
     listAstroStyleFiles: async () => ({ files: [] }),
     listAssets: async () => ({ entries: [] }),
     readStyleFile: () =>
-      new Promise((r) => dom.window.setTimeout(() => r({ css: 'section { margin: 0 } .card { color: red }' }), READ_MS)),
+      new Promise((r) => dom.window.setTimeout(() => r({
+        css: 'section { margin: 0 } div { display: block } .card { color: red }',
+      }), READ_MS)),
+    writeStyleFile: async ({ css }) => {styleWriteCount += 1; writtenCss = css;},
   };
 
-  const { EmbedEditor, setHost, setCanvasFrame } = require(panelBundle);
+  const { EditorView, EmbedEditor, setHost, setCanvasFrame } = require(panelBundle);
   // A classless element, so the well holds only what the stylesheets earn — an
   // element's own class gets a chip either way, which would hide the empty case.
   const NODES = [
@@ -175,6 +376,11 @@ const check = (what, condition, detail) => {
 
   await wait(200);
   check('the panel mounts', panel.querySelector('.embed-editor_selector-well') != null);
+  const cssCodeToggle = () => panel.querySelector('.embed-editor_css-code-toggle');
+  check(
+    'the CSS Code section starts closed',
+    cssCodeToggle()?.getAttribute('aria-expanded') === 'false'
+  );
   check('a project with no stylesheets to read settles empty', panelChips().length === 0, `${panelChips().length} chips`);
   check('and does not pretend to be waiting', panelSpinner() == null);
 
@@ -185,9 +391,43 @@ const check = (what, condition, detail) => {
   check('with nothing in it yet', panelChips().length === 0, `${panelChips().length} chips`);
 
   await wait(READ_MS + 400); // still far inside the 4s refresh throttle it used to wait out
-  check('the rule in the late stylesheet reaches the well', panelChips().length === 1, panelChips().map((c) => c.textContent).join(','));
-  check('as the selector that stylesheet holds', panelChips()[0]?.textContent === 'section', panelChips()[0]?.textContent);
-  check('and the spinner goes with it', panelSpinner() == null);
+  check(
+    'the global rule is counted after the stylesheet lands',
+    panel.querySelector('.embed-editor_selector-filter')?.textContent.includes('(1)') === true
+  );
+  check('the global rule stays folded initially', panelChips().length === 0);
+  check('and the spinner goes with the completed scan', panelSpinner() == null);
+
+  panel.querySelector('.embed-editor_selector-filter input')?.click();
+  await wait(30);
+  check(
+    'revealing globals shows the stylesheet selector',
+    panelChips()[0]?.textContent === 'section',
+    panelChips()[0]?.textContent
+  );
+  panelChips()[0]?.click();
+  await wait(30);
+  panelChips()[0]?.click();
+  await wait(30);
+  check(
+    'a picked selector names the file its CSS comes from',
+    panel.querySelector('.embed-editor_css-code-source')?.textContent === 'src/styles/main.css',
+    panel.querySelector('.embed-editor_css-code-source')?.textContent
+  );
+  cssCodeToggle()?.click();
+  await wait(30);
+  check(
+    'the CSS Code section opens on request',
+    cssCodeToggle()?.getAttribute('aria-expanded') === 'true'
+  );
+  panel.querySelector('.embed-editor_css-code-source')?.click();
+  await wait(30);
+  check(
+    'clicking the filename closes the whole CSS Code disclosure',
+    cssCodeToggle()?.getAttribute('aria-expanded') === 'false'
+  );
+  cssCodeToggle()?.click();
+  await wait(30);
 
   // --- and on the next element, with the stylesheets already read -----------
   //
@@ -198,12 +438,95 @@ const check = (what, condition, detail) => {
   setCanvasFrame({ postMessage() {} });
   setHost({ selectedId: 'n2' }); // same nodes — only the selection moves, as in the app
   await wait(120);
+  check(
+    'the CSS Code disclosure stays open when the element changes',
+    cssCodeToggle()?.getAttribute('aria-expanded') === 'true'
+  );
   check('picking another element empties the well', panelChips().length === 0, `${panelChips().length} chips`);
   check('and it spins while the canvas is asked', panelSpinner() != null);
 
   await wait(2000);
-  check('the well fills once the answer (or its absence) lands', panelChips().length === 1, panelChips().map((c) => c.textContent).join(','));
+  check('the well fills once the answer (or its absence) lands', panelChips().length === 2, panelChips().map((c) => c.textContent).join(','));
   check('and stops spinning', panelSpinner() == null);
+  const codeText = () => (
+    panel.querySelector('.embed-editor_css-code-editor .cm-content')?.textContent ||
+    panel.querySelector('.embed-editor_css-code-preview')?.textContent ||
+    ''
+  );
+  check(
+    'the initially selected core class filters the CSS view',
+    codeText().includes('.card {') && !codeText().includes('div {'),
+    codeText()
+  );
+  check(
+    'the initially selected core class opens an editable CSS box',
+    panel.querySelector('.embed-editor_css-code-editor .cm-editor') != null
+  );
+  panelChips().find((chip) => chip.textContent === '.card')?.click();
+  await wait(30);
+  check(
+    'one click deselects the initially active core class',
+    codeText().includes('.card {') && codeText().includes('div {'),
+    codeText()
+  );
+  panelChips().find((chip) => chip.textContent === '.card')?.click();
+  await wait(30);
+  const editorElement = panel.querySelector('.embed-editor_css-code-editor .cm-editor');
+  check('an individually selected selector has an editable CSS box', editorElement != null);
+  if (editorElement) {
+    const editor = EditorView.findFromDOM(editorElement);
+    const nextCss = '.card { color: blue }';
+    editor.dispatch({
+      changes: { from: 0, to: editor.state.doc.length, insert: nextCss },
+      selection: { anchor: nextCss.length },
+    });
+    await wait(450);
+    check(
+      'typing in the CSS box automatically writes the selected rule',
+      writtenCss.includes('.card { color: blue }')
+    );
+    const currentEditorElement = panel.querySelector('.embed-editor_css-code-editor .cm-editor');
+    check(
+      'autosave does not remount the editor or move its caret',
+      currentEditorElement === editorElement &&
+        editor.state.selection.main.head === editor.state.doc.length,
+      `same element: ${currentEditorElement === editorElement}; ` +
+        `caret: ${editor.state.selection.main.head}; length: ${editor.state.doc.length}`
+    );
+    check(
+      'the autosaving editor has no manual Save CSS button',
+      !panel.textContent.includes('Save CSS')
+    );
+    check(
+      'the style panel refreshes from the edited CSS',
+      panel.querySelector('[data-prop="color"]')?.value === 'blue',
+      panel.querySelector('[data-prop="color"]')?.value
+    );
+    editor.dispatch({
+      changes: { from: 0, to: editor.state.doc.length, insert: '.card { color:' },
+    });
+    await wait(700);
+    check(
+      'an invalid intermediate draft is not written or retried',
+      styleWriteCount === 1,
+      `${styleWriteCount} stylesheet writes`
+    );
+  }
+
+  panelChips().find((chip) => chip.textContent === '.card')?.click();
+  await wait(30);
+  check(
+    'deselecting shows code for every currently visible selector',
+    codeText().includes('.card {') && codeText().includes('div {'),
+    codeText()
+  );
+  panel.querySelector('.embed-editor_selector-filter input')?.click();
+  await wait(30);
+  check(
+    'hiding global selectors also removes their code',
+    codeText().includes('.card {') && !codeText().includes('div {'),
+    codeText()
+  );
 
   // --- the well doesn't rearrange itself when the scan lands ------------------
   //
@@ -218,6 +541,46 @@ const check = (what, condition, detail) => {
     );
     const chipHeight = /--embed-editor_chip-h:/.test(css);
     check('a chip row has one stated height', chipHeight);
+    const codeBody = css.slice(css.indexOf('.embed-editor_css-code-body {'));
+    const codeBodyRule = codeBody.slice(0, codeBody.indexOf('}'));
+    check(
+      'the CSS box uses the full section width',
+      /padding:\s*0 0 var\(--space-4\)/.test(codeBodyRule) &&
+        /\.code-editor\.embed-editor_css-code-editor\s*\{[^}]*padding:\s*0;/s.test(css),
+      `${codeBodyRule}\n${css.match(/\.code-editor\.embed-editor_css-code-editor\s*\{[^}]*\}/s)?.[0]}`
+    );
+    const codePreview = css.slice(css.indexOf('.embed-editor_css-code-preview {'));
+    const codePreviewRule = codePreview.slice(0, codePreview.indexOf('}'));
+    check(
+      'the CSS preview has a tight independently scrollable height',
+      /max-height: min\(36vh, 360px\)/.test(codePreviewRule) &&
+        /overflow-y: auto/.test(codePreviewRule),
+      codePreviewRule
+    );
+    const componentChip = css.slice(css.indexOf('.embed-editor_selector-chip.is-component'));
+    check(
+      'the component chip class uses the component green tokens',
+      /--color-component-tag-bg/.test(componentChip.slice(0, 800)) &&
+        /--color-component-tag\)/.test(componentChip.slice(0, 800)),
+      componentChip.slice(0, 800)
+    );
+    check(
+      'component hover and selected states use different brightness tokens',
+      /--color-component-tag-bg-hover/.test(componentChip.slice(0, 800)) &&
+        /--color-component-tag-bg-active/.test(componentChip.slice(0, 800)),
+      componentChip.slice(0, 800)
+    );
+    const tokens = fs.readFileSync(
+      path.join(__dirname, '..', 'src', 'style-panel', 'tokens.css'),
+      'utf8'
+    );
+    const activeGreen = tokens.match(/--color-component-tag-bg-active:\s*(#[0-9a-f]{6})/i)?.[1];
+    const activeContrast = activeGreen ? contrastRatio('#ffffff', activeGreen) : null;
+    check(
+      'selected component text meets WCAG AA contrast',
+      activeContrast != null && activeContrast >= 4.5,
+      activeContrast == null ? String(activeGreen) : `${activeContrast.toFixed(2)}:1`
+    );
     const loading = css.slice(css.indexOf('.embed-editor_selector-loading {'));
     check(
       'the spinner row is exactly that tall',
@@ -228,7 +591,7 @@ const check = (what, condition, detail) => {
       path.join(__dirname, '..', 'src', 'style-panel', 'EmbedEditor.tsx'),
       'utf8'
     );
-    const check_ = src.slice(src.indexOf('embed-editor_globals-check'));
+    const check_ = src.slice(src.indexOf('embed-editor_selector-filter'));
     check(
       'the globals checkbox is not conditional on having any',
       !/\{globals\.length \? \(/.test(src),
@@ -238,6 +601,16 @@ const check = (what, condition, detail) => {
       'it disables itself instead when there are none',
       /disabled=\{busy \|\| !globals\.length\}/.test(check_)
     );
+    const contextualChip = css.slice(
+      css.indexOf('.embed-editor_selector-chip:is(.is-global, .is-inherited)')
+    );
+    check(
+      'global and inherited chips use the neutral grey ramp',
+      /--color-selector-context-bg/.test(contextualChip.slice(0, 1000)) &&
+        /--color-selector-context-bg-hover/.test(contextualChip.slice(0, 1000)) &&
+        /--color-selector-context-bg-active/.test(contextualChip.slice(0, 1000)),
+      contextualChip.slice(0, 1000)
+    );
   }
 
   if (failures.length) {
diff --git a/test/style-target.js b/test/style-target.js
index 4aa51b51..20236d1c 100644
--- a/test/style-target.js
+++ b/test/style-target.js
@@ -11,6 +11,8 @@
 // to target the very element the panel was calling `html.theme-dark`, and the
 // class selectors sitting in the same rule matched perfectly well — so the
 // styles looked half-read rather than unread, which is a hard thing to spot.
+// It also checks that a style node keeps the page/component identity of its open
+// file, because the model shape alone cannot distinguish those two sources.
 
 const fs = require('fs');
 const path = require('path');
@@ -32,7 +34,7 @@ const check = (what, condition, detail) => {
     // own directory so its imports resolve the way they do in the app.
     stdin: {
       contents: `
-        export { resolveTarget } from './lib/webflow'
+        export { resolveTarget, scanPage } from './lib/webflow'
         export { setHost, onHostChange, getHost } from './lib/host'
         export { matchSelectorList } from './lib/selectors'
         export { defaultSelectorTokens, tokensToSelector } from './lib/element-tokens'
@@ -53,10 +55,46 @@ const check = (what, condition, detail) => {
   global.document = dom.window.document;
   dom.window.avb = {};
 
-  const { resolveTarget, setHost, onHostChange, getHost, matchSelectorList, defaultSelectorTokens, tokensToSelector } =
-    require(bundlePath);
+  const {
+    resolveTarget,
+    scanPage,
+    setHost,
+    onHostChange,
+    getHost,
+    matchSelectorList,
+    defaultSelectorTokens,
+    tokensToSelector,
+  } = require(bundlePath);
   setHost({ nodes: [], projectPath: '/project', files: [], astroFiles: [] });
 
+  {
+    const styleNode = {
+      id: 'styles',
+      kind: 'raw',
+      name: 'style',
+      inner: '.card { color: green }',
+    };
+    setHost({
+      nodes: [styleNode],
+      openFilePath: '/project/src/components/Card.astro',
+      openFileKind: 'component',
+    });
+    const componentSource = (await scanPage()).pageEmbeds[0];
+    check(
+      'a style tag in an open component is component-authored',
+      componentSource?.fromComponent === true
+    );
+    check('and carries the component name', componentSource?.componentName === 'Card');
+
+    setHost({ openFilePath: '/project/src/pages/index.astro', openFileKind: 'page' });
+    const pageSource = (await scanPage()).pageEmbeds[0];
+    check(
+      'the same style shape in a page stays page-authored',
+      pageSource?.fromComponent === false
+    );
+    setHost({ nodes: [], openFilePath: null, openFileKind: null });
+  }
+
   // A layout: a component call in the source, `<html class="theme-dark">` on
   // the page. Nothing in the model says "html".
   // Props carry {type, value} in the model, the way the parser writes them.
diff --git a/test/vars-panel.js b/test/vars-panel.js
index 3616c6d0..bb40c1bb 100644
--- a/test/vars-panel.js
+++ b/test/vars-panel.js
@@ -25,12 +25,19 @@ const settle = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms));
   fs.mkdirSync(path.join(dir, 'src', 'styles'), { recursive: true });
   fs.writeFileSync(
     path.join(dir, 'src', 'styles', 'tokens.css'),
-    ':root {\n  --blue: #0af;\n  --ink: #111;\n}\n\n.light { --bg: white; }\n.dark { --bg: black; }\n'
+    ':root {\n  --blue: #0af;\n  --ink: #111;\n  --_private: #f0f;\n}\n\n' +
+      '.light { --bg: white; }\n.dark { --bg: black; }\n' +
+      '.private { --_only: hidden; }\n'
+  );
+  fs.writeFileSync(
+    path.join(dir, 'src', 'styles', 'other.css'),
+    '.card { --lift: 2px; --shade: 4px; --_private: 8px; }\n'
   );
-  fs.writeFileSync(path.join(dir, 'src', 'styles', 'other.css'), '.card { --lift: 2px; --shade: 4px; }\n');
   // One rule, so one group: there is no inside to show.
-  fs.writeFileSync(path.join(dir, 'src', 'styles', 'motion.css'), ':root { --ease: linear; --duration: 200ms; }\n');
-
+  fs.writeFileSync(
+    path.join(dir, 'src', 'styles', 'motion.css'),
+    ':root { --ease: linear; --duration: 200ms; --_private: 1; }\n'
+  );
   const esbuild = require('esbuild');
   const buildDir = path.join(__dirname, '..', 'node_modules', '.stacki-test');
   fs.mkdirSync(buildDir, { recursive: true });
@@ -89,7 +96,7 @@ const settle = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms));
   await render();
   check('stylesheets are listed', names().join('|') === 'motion.css|other.css|tokens.css', names().join('|'));
   check(
-    'with what each one holds',
+    'with counts that omit private variables',
     all('.cms-collection-count').map((n) => n.textContent).join('|') === '2 variables|2 variables|4 variables',
     all('.cms-collection-count').map((n) => n.textContent).join('|')
   );
@@ -123,14 +130,18 @@ const settle = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms));
   check('opening a stylesheet selects its first group', !!selected, JSON.stringify(selected));
   check('which is the first one', selected?.index === 0 && selected.file.endsWith('tokens.css'), JSON.stringify(selected));
 
-  check('and the groups inside are listed', names().join('|') === ':root|Light', names().join('|'));
+  check(
+    'and groups without visible variables are omitted',
+    names().join('|') === ':root|Light',
+    names().join('|')
+  );
   check(
     'the open one is marked',
     all('.cms-collection.on').length === 1 && all('.cms-collection.on')[0].textContent.includes(':root'),
     all('.cms-collection').map((n) => n.className).join('|')
   );
   check(
-    'a group of modes says how many',
+    'groups also omit private variables from their counts',
     all('.cms-collection-count').map((n) => n.textContent).join('|') === '2 variables|2 modes',
     all('.cms-collection-count').map((n) => n.textContent).join('|')
   );
diff --git a/test/vars-view.js b/test/vars-view.js
index ce48ea65..953f9d6e 100644
--- a/test/vars-view.js
+++ b/test/vars-view.js
@@ -25,6 +25,8 @@ const STYLESHEET = `/* =========================================================
    ========================================================================== */
 
 :root {
+  --_panel-private: #ff00ff;
+
   /* Curves */
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-linear: linear;
@@ -172,6 +174,11 @@ const STYLESHEET = `/* =========================================================
   // --- the :root group: a comment section and a family table ----------------
   await show(0);
   check('the sheet renders', !!find('.vars-table'), container.innerHTML.slice(0, 200));
+  check(
+    'private variables are absent from the sheet',
+    !rowNames().some((name) => name.includes('_panel-private')),
+    rowNames().join('|'),
+  );
   check('a comment becomes a heading', texts('.vars-section').includes('Swatches'), texts('.vars-section').join());
   check('swatch names are rows', rowNames().includes('light-100'), rowNames().join('|'));
   check('a colour gets a swatch', all('.u-color-swatch').length >= 3, `${all('.u-color-swatch').length}`);