From 4e1f9e87038387750e15b5f7930a95d4f8bbbe53 Mon Sep 17 00:00:00 2001
From: DavidBabinec <hello@davidbabinec.com>
Date: Sat, 25 Jul 2026 19:46:42 +0200
Subject: [PATCH] fix(import): scale large CSS catalogue imports

---
 docs/e2e/README.md                            |   7 +
 docs/features/agent.md                        |   7 +-
 docs/features/html-import.md                  |   2 +-
 docs/features/publisher.md                    |  12 +
 docs/features/site-import.md                  |  24 +-
 docs/reference/css-class-registry.md          |   8 +-
 scripts/lib/largeBodyDevProxy.ts              | 116 +++++++++
 src/__tests__/agent/executor.test.ts          |  42 ++--
 .../canvas/classStyleInjectorMedia.test.tsx   |  15 +-
 src/__tests__/devWorkflow.test.ts             |   2 +
 .../mutateAllPagesAndSite.test.ts             |  33 +++
 .../editor-store/styleRuleSlice.test.ts       |  24 ++
 src/__tests__/largeBodyDevProxy.test.ts       |  50 ++++
 .../page-tree/cssSelectorClasses.test.ts      |  80 ++++++
 .../panels/useClassPickerSuggestions.test.ts  |  39 ++-
 .../publisher/classStyleInjector.test.ts      |  53 ++++
 src/__tests__/siteImport/applyImport.test.ts  |  51 +++-
 src/__tests__/siteImport/conflicts.test.ts    |  24 ++
 .../siteImport/cssToStyleRules.test.ts        |  41 ++-
 .../pages/site/canvas/ClassStyleInjector.tsx  |  22 +-
 .../PropertiesPanel/selectorPickerModel.ts    |  46 ++--
 .../useClassPickerSuggestions.ts              |  15 +-
 .../pages/site/store/slices/site/helpers.ts   |  43 +++-
 .../site/store/slices/site/importLinking.ts   |  37 ++-
 .../site/store/slices/site/nodeActions.ts     |  22 +-
 src/admin/pages/site/store/styleRuleRename.ts |   7 +-
 src/core/page-tree/classNames.ts              |   5 +-
 src/core/page-tree/cssSelectorClasses.ts      | 224 +++++++++++++++++
 src/core/page-tree/index.ts                   |   7 +
 src/core/page-tree/styleRule.ts               |  17 +-
 src/core/publisher/cssCollector.ts            |  59 +----
 src/core/publisher/index.ts                   |   6 +
 src/core/publisher/styleRuleTreeShake.ts      | 133 ++++++++++
 src/core/siteImport/buildPlan.ts              | 112 ++++++---
 src/core/siteImport/classCascades.ts          |  23 +-
 src/core/siteImport/conflicts.ts              |  36 ++-
 src/core/siteImport/cssToStyleRules.ts        | 234 +++++++++---------
 src/core/siteImport/fontFaceParser.ts         |  75 ++++++
 vite.config.ts                                |  31 +++
 39 files changed, 1436 insertions(+), 348 deletions(-)
 create mode 100644 scripts/lib/largeBodyDevProxy.ts
 create mode 100644 src/__tests__/largeBodyDevProxy.test.ts
 create mode 100644 src/__tests__/page-tree/cssSelectorClasses.test.ts
 create mode 100644 src/core/page-tree/cssSelectorClasses.ts
 create mode 100644 src/core/publisher/styleRuleTreeShake.ts
 create mode 100644 src/core/siteImport/fontFaceParser.ts

diff --git a/docs/e2e/README.md b/docs/e2e/README.md
index 61e00fba6..21c512ca0 100644
--- a/docs/e2e/README.md
+++ b/docs/e2e/README.md
@@ -57,6 +57,13 @@ so publishing never reloads the admin app mid-test. The Vite dev proxy follows
 the configured CMS `PORT`, keeping the Playwright admin UI pointed at the
 disposable CMS instead of any regular dev server on port 3001.
 
+When Vite itself runs on Bun, its Node-compatible native proxy can stop
+draining multi-megabyte request bodies after socket backpressure fills both
+sides. `largeBodyDevProxyPlugin` intercepts only known-length CMS API bodies of
+at least 1 MiB, buffers them with the same 128 MiB ceiling as `Bun.serve`, and
+forwards them with an explicit `Content-Length`. Small requests, non-CMS
+traffic, and streaming AI responses remain on Vite's native proxy.
+
 For debugging against a server you started yourself, set
 `E2E_REUSE_SERVER=1` and override `E2E_ADMIN_BASE_URL` /
 `E2E_PUBLIC_BASE_URL` as needed. Do not use reuse mode for CI or for
diff --git a/docs/features/agent.md b/docs/features/agent.md
index 9be3a8fef..da13641c4 100644
--- a/docs/features/agent.md
+++ b/docs/features/agent.md
@@ -13,7 +13,7 @@ The agent runs on a provider-agnostic AI runtime (`server/ai/`) that can drive a
 ## TL;DR
 
 - **Structure via HTML.** `site_insert_html` and `site_replace_node_html` accept semantic HTML strings; the browser executor calls `importHtml` (the same pipeline as the paste-HTML UI) to convert them into first-class, editable `PageNode`s.
-- **Styling via CSS.** The agent emits CSS the same way a human pastes it: a `<style>` block and/or `class=` attributes inside the `site_insert_html`/`site_replace_node_html` payload, or the standalone `site_apply_css` tool. The importer (`cssToStyleRules`) classifies every selector — a bare `.foo {}` rule becomes a reusable Selectors-panel class bound to `class="foo"`; any other selector (`.hero a`, `a:hover`, `nav > li`) becomes an ambient rule; `style=` attributes land on the node's inline styles. There is no structured `classes` parameter — the agent never hand-builds classes node-by-node at insert time. `site_apply_css` is the single tool for CSS on its own, with explicit merge, replace, rule-delete, and property-removal operations; exact selector identity and `!important` priority survive the round trip.
+- **Styling via CSS.** The agent emits CSS the same way a human pastes it: a `<style>` block and/or `class=` attributes inside the `site_insert_html`/`site_replace_node_html` payload, or the standalone `site_apply_css` tool. The importer (`cssToStyleRules`) classifies every selector — class-bearing selectors become reusable Selectors-panel classes while preserving the full selector and decoded class token; class-free selectors (`a:hover`, `nav > li`) become ambient rules; `style=` attributes land on the node's inline styles. There is no structured `classes` parameter — the agent never hand-builds classes node-by-node at insert time. `site_apply_css` is the single tool for CSS on its own, with explicit merge, replace, rule-delete, and property-removal operations; exact selector identity and `!important` priority survive the round trip.
 - **Site scope: 35 tools total.** 6 server-side catalog read tools (resolved server-side from the posted snapshot / DB) + 29 browser-bridged tools.
 - **Content scope: 15 tools total.** 7 server-side content/catalog/media/user read tools + 8 browser-bridged document mutation/navigation tools.
 - **Two-endpoint bridge.** `POST /admin/api/ai/chat/:scope` opens an NDJSON stream. When the model calls a browser-bridged tool, the server emits `toolRequest`; the browser executor reads or mutates the live workspace and POSTs the `AiToolOutput` result to `POST /admin/api/ai/tool-result`.
@@ -397,7 +397,8 @@ All 29 tools carry `execution: 'browser'` in their `AiTool` definition. The serv
 Styling rides on the `html` payload — there is no separate `classes` parameter. The executor runs `importHtml(html)`, which harvests any `<style>` block's CSS, then hands it to `cssToStyleRules`. That classifier routes each selector:
 
 - a bare `.foo {}` rule → a reusable Selectors-panel **class**, bound to every `class="foo"` node in the fragment;
-- any other selector (`.hero a`, `a:hover`, `nav > li`, `@media …`) → an **ambient** rule (media queries fold into the matching breakpoint's `contextStyles`);
+- class-bearing selectors (`.hero a`, `.group:hover .group-hover\:block`) → a **class** rule whose decoded binding name is the rightmost class token and whose full selector is preserved;
+- class-free selectors (`a:hover`, `nav > li`) → an **ambient** rule (media queries fold into the matching breakpoint's `contextStyles`);
 - supported stylesheet-level rules such as `@keyframes` → ambient raw CSS rules emitted by the publisher;
 - inline `style="…"` attributes → the node's inline styles.
 
@@ -578,7 +579,7 @@ Drivers that support explicit prompt-cache controls (Anthropic) apply `cache_con
 **Static prefix key rules** (full text lives in `server/ai/tools/site/systemPrompt.ts`):
 - **Design system first.** Establish or reuse tokens before/while building (`site_set_color_tokens`, `site_set_type_scale`, `site_set_spacing_scale`, `site_set_font_tokens`), then reference them in CSS (`var(--<slug>)`, `var(--text-l)`, `var(--space-m)`, `var(--<font-var>)`) instead of raw hex/px/font-family. The dynamic suffix's `Tokens —` line shows what already exists; `(none …)` means no design system yet.
 - Structure as HTML (`site_insert_html` / `site_replace_node_html`); style with CSS in the same payload — a `<style>` block and/or `class=` attributes referencing the design tokens. The importer classifies selectors, so the agent never hand-builds classes at insert time.
-- `<style>` blocks inside imported HTML are parsed: a bare `.foo {}` rule becomes a Selectors-panel class bound to `class="foo"`; any other selector (`.hero a`, `a:hover`, `@media …`) becomes an ambient rule, and supported `@keyframes` publish as raw keyframes CSS. `style=` attributes land on the node's inline styles. These are applied — not stripped.
+- `<style>` blocks inside imported HTML are parsed: class-bearing selectors become Selectors-panel classes while preserving complex selector text, class-free selectors (`a:hover`) become ambient rules, and supported `@keyframes` publish as raw keyframes CSS. `style=` attributes land on the node's inline styles. These are applied — not stripped.
 - CSS-only edits use an explicit `site_apply_css` operation: merge for additive patches, remove-properties for stale declarations, replace only with the selector's complete desired CSS, and delete for whole exact rules. Read the document first before destructive operations; grouped and ungrouped selectors are different identities.
 - One `site_insert_html` call per logical section (nav, hero, pricing, footer = 4–6 calls); smaller chunks recover better if one fails.
 - Per-breakpoint variation: `@media` queries — in the `<style>` block of an insert or inside `site_apply_css` — with min/max-width queries that line up with the breakpoint widths in the dynamic suffix. Never invent ids like `"mobile"` or `"desktop"`.
diff --git a/docs/features/html-import.md b/docs/features/html-import.md
index 0398ed83d..d064dffa1 100644
--- a/docs/features/html-import.md
+++ b/docs/features/html-import.md
@@ -216,7 +216,7 @@ The result: imported markup renders its `class` attribute, the classes show up i
 The importer preserves CSS across two layers, both gated by `isEmittableProperty`:
 
 - **Inline `style="…"`** → the node's `inlineStyles` bag (per-node `style=""` layer). Full declarations, not just backgrounds.
-- **`<style>` blocks** → parsed by the consumer (`cssToStyleRules`) into registry `StyleRule`s shown in the Selectors panel. A `.foo {}` rule binds to nodes carrying `class="foo"`; ambient selectors (`body`, `a:hover`, `.a .b`) register globally. First-wins on name/selector collisions with existing rules.
+- **`<style>` blocks** → parsed by the consumer (`cssToStyleRules`) into registry `StyleRule`s shown in the Selectors panel. A `.foo {}` rule binds to nodes carrying `class="foo"`; complex class-bearing selectors preserve their selector and expose a decoded picker class (for example `.group:hover .group-hover\:block` exposes `group-hover:block`); class-free selectors (`body`, `a:hover`) register as ambient. First-wins on name/selector collisions with existing rules.
 - **Class names without a matching `<style>` rule** still survive — `insertImportedNodes` auto-creates a bare (style-less) class for the name (see [Class linking](#class-linking-name--id)), styleable afterwards in the editor or by the agent.
 
 `importHtml` itself stays CSS-agnostic: it returns raw `styleCss` and the consumer (which has the site's breakpoints and may import `@core/siteImport`) does the parsing. This avoids an `htmlImport → siteImport` import cycle and lets `@media` fold into the site's real breakpoints.
diff --git a/docs/features/publisher.md b/docs/features/publisher.md
index 1e6359039..29fcbac01 100644
--- a/docs/features/publisher.md
+++ b/docs/features/publisher.md
@@ -206,6 +206,18 @@ style-<hash>.css       = collectClassCSS(site)                     ← user-defi
 userStyles-<hash>.css  = collectUserStylesheetCss(site, page)      ← author stylesheets, scoped to this page
 ```
 
+`styleRuleTreeShake.ts` computes the site-wide used class-id set once across
+page and Visual Component trees. A class rule emits only when its id is used
+and every known class dependency in its preserved selector is used. Ambient
+selector fragments emit when at least one selector-list alternative has all of
+its known class dependencies in use; class-free selectors and supported raw
+blocks stay conservative. The editor canvas calls the same selector and
+memoizes the filtered registry by immutable registry identity + used-id
+signature, so large imported utility catalogs do not become large iframe
+stylesheets. A full precompiled Tailwind catalog can therefore remain
+picker-addressable while the `style` bundle contains only selected utilities
+plus global preflight.
+
 Media-library background images are optimized in the same publish pass as
 `<img srcset>`. `mediaPrefetch.ts` collects `/uploads/...` URLs from
 image/media module props, node `inlineStyles.backgroundImage`, and StyleRule
diff --git a/docs/features/site-import.md b/docs/features/site-import.md
index ed2fd090d..f6f28c9d8 100644
--- a/docs/features/site-import.md
+++ b/docs/features/site-import.md
@@ -213,8 +213,9 @@ interface ImportScript {
 
 | Source rule | Stored as |
 |---|---|
-| `.foo { … }` (single class) | `StyleRule{ kind:'class', name:'foo', selector:'.foo' }` |
-| `h1`, `body`, `a:hover`, `.hero .title` | `StyleRule{ kind:'ambient', selector: verbatim }` |
+| `.foo { … }` | `StyleRule{ kind:'class', name:'foo', selector:'.foo' }` |
+| `.hero .title`, `.group:hover .group-hover\:block` | One bindable class rule per selector-list alternative. The rightmost decoded class is `name`; the full selector is preserved. Selector dependency classes (`hero`, `group`) receive bare picker entries when they have no rule of their own. |
+| `h1`, `body`, `a:hover` | `StyleRule{ kind:'ambient', selector: verbatim }` |
 | `@media ... { … }` | Merged into a matching viewport context's `contextStyles` when it matches a configured media query (or an older/default max-width threshold); otherwise preserved as a reusable media condition |
 | Unconditional local `@import "file.css"` | Followed recursively from the linked stylesheet; the imported file keeps its own source path so relative `url(...)` assets resolve correctly |
 | Trusted Google CSS2 `@import` | Parsed into `ImportGoogleFont` install requests and committed as self-hosted installed font entries |
@@ -249,7 +250,24 @@ Resolutions apply in `applyCrossSheetClassResolutions` (via `applyConflictResolu
 
 After all renames, `normalizeBindableClassRules` enforces the registry's unique-class-name invariant: per final name, the FIRST class-kind rule (in cascade source order) stays bindable; every later same-name class fragment becomes an ambient rule with the same selector — its declarations keep their cascade position, so within-cascade overrides (`base.css .btn` + `page.css .btn`) still compose like real CSS.
 
-Separately, two groups of single-class rules are converted to `kind:'ambient'` at plan time (`preserveGloballyMatchedClassRules`): classes that no imported node actually uses, and the shared Bootstrap-like utility names above. Static templates often create or toggle unused classes from JavaScript (`.mt-cursor`, `.is-open`, `.show`, etc.); leaving those as editable class rules would let publisher class tree-shaking drop them because no imported node owns their `classIds`. Shared utilities are ambient for a different reason: nodes keep the plain class token, while every source rule for that token remains publishable in cascade order.
+All imported class-bearing selectors remain picker-addressable, whether or not
+the imported HTML currently uses them. This is what makes a large utility
+catalogue (including a full precompiled Tailwind build) useful after import:
+escaped names such as `hover:bg-blue-700` are decoded for the class picker while
+their original selectors remain intact.
+
+Publishing and the canvas use the same dependency-aware tree-shaker. A
+class-kind rule emits only when its registry id is assigned and every known
+class dependency in its selector is in use; repeated fragments demoted to
+ambient rules emit only when their known selector dependencies are in use.
+Class-free ambient selectors and supported raw blocks such as `@keyframes`
+remain conservative and global. This retains framework cascades such as `.row`
+plus `.row > *` without shipping thousands of unused utilities.
+
+Runtime code that constructs class names dynamically cannot be inferred from a
+static page tree. Those classes must be assigned in the editor (including to a
+hidden structural node) or the stylesheet should use `mode:'file'`, which is
+the explicit non-tree-shaken escape hatch for runtime-owned CSS.
 
 The escape hatch for "this sheet's resets/styles must not leak into other pages at all" is no longer a generated scope class — it is keeping that sheet as a file (`mode: 'file'`), page-scoped via runtime config.
 
diff --git a/docs/reference/css-class-registry.md b/docs/reference/css-class-registry.md
index 3905931bb..00b9363f1 100644
--- a/docs/reference/css-class-registry.md
+++ b/docs/reference/css-class-registry.md
@@ -4,8 +4,8 @@ The site's style rule registry — `Record<string, StyleRule>` stored on the sit
 
 Three forms of rules:
 
-1. **Author-facing class rules** (`kind: 'class'`) — the user picks a name (`hero-button`, `card-meta`) and the editor applies them via `node.classIds`. Selector is `.<name>`.
-2. **Ambient rules** (`kind: 'ambient'`) — attach by CSS selector matching, not by node assignment (e.g. `h1`, `.hero .title`, `a:hover`). The publisher emits the rule but never writes to `class=` attributes. Supported stylesheet-level imports such as `@keyframes` are stored as ambient rules with `rawCss`.
+1. **Author-facing class rules** (`kind: 'class'`) — the user picks a name (`hero-button`, `card-meta`) and the editor applies it via `node.classIds`. User-created selectors are `.<name>`; imported utility rules can retain complex selectors such as `.group:hover .group-hover\:block` while exposing the decoded binding name `group-hover:block`.
+2. **Ambient rules** (`kind: 'ambient'`) — attach by CSS selector matching, not by node assignment (e.g. `h1`, `a:hover`). The publisher emits the rule but never writes it to `class=` attributes. Supported stylesheet-level imports such as `@keyframes` are stored as ambient rules with `rawCss`.
 3. **Scoped classes** — generated class-kind rules owned by a single node (for "set this property only on this element"). The scope object pins the rule to its node.
 
 ---
@@ -16,7 +16,7 @@ Three forms of rules:
 - Source-of-truth schema: `StyleRuleSchema` in `src/core/page-tree/styleRule.ts`.
 - Compiled to CSS by `classCss.ts` in the publisher; collected via `collectClassCSS(site)`.
 - Each node references class-kind rules by id (`node.classIds: string[]`). Later ids in the array win in cascade order.
-- Selector UI surfaces display the rule's CSS selector (`styleRuleSelector(rule)`): class-kind rules appear as `.<name>`, ambient rules appear as their verbatim `selector` text.
+- Selector UI surfaces display the rule's CSS selector (`styleRuleSelector(rule)`): canonical classes appear as `.<name>`, imported class rules retain their verbatim selector, and ambient rules also use their verbatim `selector` text.
 - Rule **name** is the class token for class-kind rules. For ambient rules, `selector` is the source of truth; user edits keep `name` aligned to the selector so old class-name-only UI paths cannot add an extra dot.
 - Rule **id** is the stable internal identifier (`<nanoid>`).
 - Scoped rules (`scope: { type: 'node', nodeId, role: 'module-style' }`) are pinned to one node.
@@ -75,7 +75,7 @@ Class-kind rule **name** is the public class token. It is stored without the lea
 - No leading, trailing, or embedded ASCII whitespace
 - No control characters
 
-The selector itself is produced by `classKindSelector(name)`, which escapes the token for CSS when needed. Ambient rule **name** mirrors the ambient selector after user edits so older class-name-only surfaces cannot accidentally render an extra leading dot.
+New class selectors are produced by `classKindSelector(name)`, which escapes the token for CSS when needed. Imported class-bearing selectors preserve their original escaped selector; renaming rewrites the decoded class token in place. Ambient rule **name** mirrors the ambient selector after user edits so older class-name-only surfaces cannot accidentally render an extra leading dot.
 
 Rule **id** is internal (a nanoid). Refs from nodes (`classIds`) and from internal data structures use the id, not the name. This means renaming a rule doesn't break anything that references it.
 
diff --git a/scripts/lib/largeBodyDevProxy.ts b/scripts/lib/largeBodyDevProxy.ts
new file mode 100644
index 000000000..292aad7cd
--- /dev/null
+++ b/scripts/lib/largeBodyDevProxy.ts
@@ -0,0 +1,116 @@
+import type { IncomingHttpHeaders, IncomingMessage, ServerResponse } from 'node:http'
+
+/**
+ * Vite's Node-compatible proxy can stop draining large browser request bodies
+ * when Vite itself is running on Bun. Once both socket buffers fill, neither
+ * side makes progress. Buffering only the large requests gives Bun's fetch
+ * client a known Content-Length and avoids that backpressure deadlock while
+ * leaving ordinary requests and streaming AI responses on Vite's native proxy.
+ */
+export const LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES = 1024 * 1024
+export const MAX_DEV_PROXY_BODY_BYTES = 128 * 1024 * 1024
+
+const LARGE_BODY_PROXY_PREFIXES = ['/admin/api/cms/'] as const
+const HOP_BY_HOP_HEADERS = new Set([
+  'connection',
+  'content-length',
+  'host',
+  'transfer-encoding',
+])
+
+interface ProxyRequestLike {
+  method?: string
+  url?: string
+  headers: IncomingHttpHeaders
+}
+
+export class DevProxyBodyTooLargeError extends Error {
+  readonly maxBytes: number
+
+  constructor(maxBytes: number) {
+    super(`Development proxy request body exceeds ${maxBytes} bytes`)
+    this.name = 'DevProxyBodyTooLargeError'
+    this.maxBytes = maxBytes
+  }
+}
+
+function declaredBodyBytes(headers: IncomingHttpHeaders): number | null {
+  const raw = headers['content-length']
+  const value = Array.isArray(raw) ? raw[0] : raw
+  if (!value) return null
+  const parsed = Number(value)
+  return Number.isSafeInteger(parsed) && parsed >= 0 ? parsed : null
+}
+
+export function shouldBufferLargeDevProxyRequest(req: ProxyRequestLike): boolean {
+  if (req.method === 'GET' || req.method === 'HEAD') return false
+  const pathname = new URL(req.url ?? '/', 'http://localhost').pathname
+  if (!LARGE_BODY_PROXY_PREFIXES.some((prefix) => pathname.startsWith(prefix))) return false
+  const bodyBytes = declaredBodyBytes(req.headers)
+  return bodyBytes !== null && bodyBytes >= LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES
+}
+
+async function readBoundedRequestBody(req: IncomingMessage): Promise<Buffer> {
+  const declaredBytes = declaredBodyBytes(req.headers)
+  if (declaredBytes !== null && declaredBytes > MAX_DEV_PROXY_BODY_BYTES) {
+    throw new DevProxyBodyTooLargeError(MAX_DEV_PROXY_BODY_BYTES)
+  }
+
+  const chunks: Buffer[] = []
+  let receivedBytes = 0
+  for await (const chunk of req) {
+    const bytes = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)
+    receivedBytes += bytes.byteLength
+    if (receivedBytes > MAX_DEV_PROXY_BODY_BYTES) {
+      throw new DevProxyBodyTooLargeError(MAX_DEV_PROXY_BODY_BYTES)
+    }
+    chunks.push(bytes)
+  }
+  return Buffer.concat(chunks, receivedBytes)
+}
+
+function forwardedRequestHeaders(headers: IncomingHttpHeaders, bodyBytes: number): Headers {
+  const forwarded = new Headers()
+  for (const [name, rawValue] of Object.entries(headers)) {
+    if (HOP_BY_HOP_HEADERS.has(name.toLowerCase()) || rawValue === undefined) continue
+    forwarded.set(name, Array.isArray(rawValue) ? rawValue.join(', ') : rawValue)
+  }
+  forwarded.set('content-length', String(bodyBytes))
+  return forwarded
+}
+
+async function sendBufferedResponse(upstream: Response, res: ServerResponse): Promise<void> {
+  const body = Buffer.from(await upstream.arrayBuffer())
+  const headers: Record<string, string> = {}
+  upstream.headers.forEach((value, name) => {
+    if (HOP_BY_HOP_HEADERS.has(name.toLowerCase())) return
+    headers[name] = value
+  })
+  headers['content-length'] = String(body.byteLength)
+  res.writeHead(upstream.status, headers)
+  res.end(body)
+}
+
+export async function proxyLargeDevRequest(
+  req: IncomingMessage,
+  res: ServerResponse,
+  targetOrigin: string,
+): Promise<void> {
+  try {
+    const body = await readBoundedRequestBody(req)
+    const upstream = await fetch(new URL(req.url ?? '/', targetOrigin), {
+      method: req.method,
+      headers: forwardedRequestHeaders(req.headers, body.byteLength),
+      body: Uint8Array.from(body),
+      redirect: 'manual',
+    })
+    await sendBufferedResponse(upstream, res)
+  } catch (err) {
+    if (err instanceof DevProxyBodyTooLargeError) {
+      res.writeHead(413, { 'content-type': 'application/json' })
+      res.end(JSON.stringify({ error: err.message }))
+      return
+    }
+    throw err
+  }
+}
diff --git a/src/__tests__/agent/executor.test.ts b/src/__tests__/agent/executor.test.ts
index 32494c578..3e08a07d5 100644
--- a/src/__tests__/agent/executor.test.ts
+++ b/src/__tests__/agent/executor.test.ts
@@ -178,7 +178,7 @@ describe('executeAgentTool — insertHtml', () => {
     expect(classNamesForClassIds(site.styleRules, sectionNode.classIds)).toContain('hero-section')
   })
 
-  it('a descendant selector in a <style> block becomes an ambient rule (not a malformed class)', async () => {
+  it('a descendant selector in a <style> block binds through its top-level class', async () => {
     const { rootId } = freshStore()
     const result = await executeAgentTool('site_insert_html', {
       parentId: rootId,
@@ -189,13 +189,15 @@ describe('executeAgentTool — insertHtml', () => {
     expectNodeIds(result)
 
     const site = useEditorStore.getState().site!
-    // The whitespace selector must NOT have been forced through createClass
-    // (which rejects whitespace) — it round-trips as an ambient rule instead.
-    const ambient = Object.values(site.styleRules).find(
-      (c) => c.kind === 'ambient' && c.selector === '.hero-nav a',
+    // The complete selector remains intact, but the top-level class makes the
+    // rule assignable and lets the publisher drop it when hero-nav is unused.
+    const heroNav = Object.values(site.styleRules).find(
+      (c) => c.kind === 'class' && c.name === 'hero-nav' && c.selector === '.hero-nav a',
     )
-    expect(ambient).toBeDefined()
-    expect(ambient!.styles.color).toBe('tomato')
+    expect(heroNav).toBeDefined()
+    expect(heroNav!.styles.color).toBe('tomato')
+    const navNode = site.pages[0].nodes[expectNodeIds(result)[0]]
+    expect(navNode.classIds).toContain(heroNav!.id)
   })
 
   it('bare class= attribute (no <style> declaration) auto-creates a registry class and links it', async () => {
@@ -305,7 +307,7 @@ describe('executeAgentTool — insertHtml', () => {
 // ---------------------------------------------------------------------------
 
 describe('executeAgentTool — style-only payloads', () => {
-  it('insertHtml registers an ambient rule from a <style>-only payload (no nodes added)', async () => {
+  it('insertHtml registers an assignable class rule from a <style>-only payload (no nodes added)', async () => {
     const { rootId } = freshStore()
     const rootChildrenBefore = useEditorStore.getState().site!.pages[0].nodes[rootId].children.length
 
@@ -315,16 +317,16 @@ describe('executeAgentTool — style-only payloads', () => {
     })
 
     // Previously this returned "HTML contained no importable elements" and threw
-    // the ambient CSS away. Now it succeeds and upserts the rule.
+    // the CSS away. Now it succeeds and makes the binding class picker-visible.
     const data = expectToolData<{ cssRulesCreated: number; cssRulesUpdated: number }>(result)
     expect(data.cssRulesCreated + data.cssRulesUpdated).toBeGreaterThan(0)
 
     const site = useEditorStore.getState().site!
-    const ambient = Object.values(site.styleRules).find(
-      (c) => c.kind === 'ambient' && c.selector === '.hero a:hover',
+    const hero = Object.values(site.styleRules).find(
+      (c) => c.kind === 'class' && c.name === 'hero' && c.selector === '.hero a:hover',
     )
-    expect(ambient).toBeDefined()
-    expect(ambient!.styles.color).toBe('tomato')
+    expect(hero).toBeDefined()
+    expect(hero!.styles.color).toBe('tomato')
 
     // No element nodes were added under the parent.
     expect(site.pages[0].nodes[rootId].children).toHaveLength(rootChildrenBefore)
@@ -1050,18 +1052,20 @@ describe('executeAgentTool — applyCss', () => {
     expect(cards[0].styles.fontSize).toBe('20px') // added
   })
 
-  it('creates an ambient rule from a descendant selector', async () => {
+  it('creates an assignable class rule from a descendant selector', async () => {
     freshStore()
     await executeAgentTool('site_apply_css', {
       operation: 'merge',
       css: '.hero a { color: tomato; }',
     })
-    const ambient = findRule((c) => c.kind === 'ambient' && c.selector === '.hero a')!
-    expect(ambient).toBeDefined()
-    expect(ambient.styles.color).toBe('tomato')
+    const hero = findRule(
+      (c) => c.kind === 'class' && c.name === 'hero' && c.selector === '.hero a',
+    )!
+    expect(hero).toBeDefined()
+    expect(hero.styles.color).toBe('tomato')
   })
 
-  it('EDITS an existing ambient descendant/pseudo rule — the case updateClassStyles could not express', async () => {
+  it('edits an existing class-bound descendant/pseudo rule without duplicating it', async () => {
     freshStore()
     await executeAgentTool('site_apply_css', {
       operation: 'merge',
@@ -1075,7 +1079,7 @@ describe('executeAgentTool — applyCss', () => {
     expect(data.cssRulesUpdated).toBe(1)
 
     const matches = Object.values(useEditorStore.getState().site!.styleRules).filter(
-      (c) => c.kind === 'ambient' && c.selector === '.hero a:hover',
+      (c) => c.kind === 'class' && c.name === 'hero' && c.selector === '.hero a:hover',
     )
     expect(matches).toHaveLength(1) // upserted, not piled up as a duplicate
     expect(matches[0].styles.color).toBe('var(--primary)')
diff --git a/src/__tests__/canvas/classStyleInjectorMedia.test.tsx b/src/__tests__/canvas/classStyleInjectorMedia.test.tsx
index f905dfd54..5481a031d 100644
--- a/src/__tests__/canvas/classStyleInjectorMedia.test.tsx
+++ b/src/__tests__/canvas/classStyleInjectorMedia.test.tsx
@@ -93,14 +93,15 @@ describe('ClassStyleInjector media backgrounds', () => {
     render(<ClassStyleInjector targetDocument={document} />)
 
     await act(async () => {
-      useEditorStore.setState({
-        site: {
-          ...makeSite({ pages: [] }),
-          breakpoints: DEFAULT_BREAKPOINTS,
-          styleRules: {
-            'hero-bg': makeBackgroundClass(),
-          },
+      const site = makeSite({
+        breakpoints: DEFAULT_BREAKPOINTS,
+        styleRules: {
+          'hero-bg': makeBackgroundClass(),
         },
+      })
+      site.pages[0].nodes[site.pages[0].rootNodeId].classIds = ['hero-bg']
+      useEditorStore.setState({
+        site,
       } as Parameters<typeof useEditorStore.setState>[0])
     })
 
diff --git a/src/__tests__/devWorkflow.test.ts b/src/__tests__/devWorkflow.test.ts
index d054a1969..9e5c94094 100644
--- a/src/__tests__/devWorkflow.test.ts
+++ b/src/__tests__/devWorkflow.test.ts
@@ -89,6 +89,8 @@ describe('development workflow', () => {
     expect(viteConfig).toContain("const CMS_DEV_SERVER_ORIGIN = `http://localhost:${process.env.PORT ?? '3001'}`")
     expect(viteConfig).toContain('target: CMS_DEV_SERVER_ORIGIN')
     expect(viteConfig).toContain('changeOrigin: true')
+    expect(viteConfig).toContain('largeBodyDevProxyPlugin()')
+    expect(viteConfig).toContain('shouldBufferLargeDevProxyRequest(req)')
   })
 
   it('Vite forwards public page routes to the CMS server instead of the admin SPA', () => {
diff --git a/src/__tests__/editor-store/mutateAllPagesAndSite.test.ts b/src/__tests__/editor-store/mutateAllPagesAndSite.test.ts
index ae1a47e46..376739305 100644
--- a/src/__tests__/editor-store/mutateAllPagesAndSite.test.ts
+++ b/src/__tests__/editor-store/mutateAllPagesAndSite.test.ts
@@ -21,6 +21,7 @@
 import { beforeEach, describe, expect, it } from 'bun:test'
 import { useEditorStore } from '@site/store/store'
 import type { ImportFragment } from '@core/htmlImport'
+import type { NewStyleRule } from '@core/siteImport'
 import { makePage, makeSite, makeNode } from '../fixtures'
 import '@modules/base/index'
 
@@ -523,3 +524,35 @@ describe('insertImportedNodes regression — linking refactor', () => {
     expect(insertedNode.classIds[0]).toBe(heroRule!.id)
   })
 })
+
+// ---------------------------------------------------------------------------
+// 8. Scalability — one order scan per bulk import
+// ---------------------------------------------------------------------------
+
+describe('mutateAllPagesAndSite — large selector batches', () => {
+  it('commits 10,000 style rules within the regression budget', () => {
+    useEditorStore.getState().createSite('Large import')
+    const rules: NewStyleRule[] = Array.from({ length: 10_000 }, (_, index) => ({
+      name: `utility-${index}`,
+      kind: 'class',
+      selector: `.utility-${index}`,
+      order: index,
+      styles: { color: `rgb(${index % 255} 0 0)` },
+      contextStyles: {},
+    }))
+
+    const startedAt = performance.now()
+    useEditorStore.getState().mutateAllPagesAndSite((_site, helpers) => {
+      for (const rule of rules) helpers.addStyleRule(rule)
+      return true
+    })
+    const elapsedMs = performance.now() - startedAt
+    const committed = Object.values(useEditorStore.getState().site!.styleRules)
+
+    expect(committed).toHaveLength(10_000)
+    expect(new Set(committed.map((rule) => rule.order)).size).toBe(10_000)
+    // The former per-rule max-order scan took ~17s at 10k and grew O(N²).
+    // Five seconds leaves broad CI headroom while guarding that regression.
+    expect(elapsedMs).toBeLessThan(5_000)
+  }, 15_000)
+})
diff --git a/src/__tests__/editor-store/styleRuleSlice.test.ts b/src/__tests__/editor-store/styleRuleSlice.test.ts
index c18d877f6..9a8d36834 100644
--- a/src/__tests__/editor-store/styleRuleSlice.test.ts
+++ b/src/__tests__/editor-store/styleRuleSlice.test.ts
@@ -14,6 +14,7 @@
 import { describe, it, expect, beforeEach } from 'bun:test'
 import { useEditorStore } from '@site/store/store'
 import type { NewStyleRule } from '@core/siteImport'
+import { classKindSelector } from '@core/page-tree'
 
 // ---------------------------------------------------------------------------
 // Test helpers
@@ -344,6 +345,29 @@ describe('styleRuleSlice.renameClass', () => {
     expect(useEditorStore.getState().site!.styleRules[cls.id].selector).toBe('.button')
   })
 
+  it('renames the binding token inside a preserved imported selector', () => {
+    setupSite()
+    const cls = getStore().createClass('group-hover:block')
+    useEditorStore.setState((state) => ({
+      site: {
+        ...state.site!,
+        styleRules: {
+          ...state.site!.styleRules,
+          [cls.id]: {
+            ...state.site!.styleRules[cls.id],
+            selector: `.group:hover ${classKindSelector('group-hover:block')}`,
+          },
+        },
+      },
+    }))
+
+    getStore().renameClass(cls.id, 'group-focus:block')
+
+    expect(useEditorStore.getState().site!.styleRules[cls.id].selector).toBe(
+      `.group:hover ${classKindSelector('group-focus:block')}`,
+    )
+  })
+
   it('allows renaming to the same name (no-op, no throw)', () => {
     setupSite()
     const cls = getStore().createClass('btn')
diff --git a/src/__tests__/largeBodyDevProxy.test.ts b/src/__tests__/largeBodyDevProxy.test.ts
new file mode 100644
index 000000000..28b01f6c1
--- /dev/null
+++ b/src/__tests__/largeBodyDevProxy.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'bun:test'
+import {
+  LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES,
+  MAX_DEV_PROXY_BODY_BYTES,
+  shouldBufferLargeDevProxyRequest,
+} from '../../scripts/lib/largeBodyDevProxy'
+
+function request(input: {
+  method?: string
+  url?: string
+  contentLength?: number
+}) {
+  return {
+    method: input.method ?? 'PUT',
+    url: input.url ?? '/admin/api/cms/site-document',
+    headers: input.contentLength === undefined
+      ? {}
+      : { 'content-length': String(input.contentLength) },
+  }
+}
+
+describe('large-body development proxy routing', () => {
+  it('buffers large CMS request bodies before forwarding them from Bun-hosted Vite', () => {
+    expect(shouldBufferLargeDevProxyRequest(request({
+      contentLength: LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES,
+    }))).toBe(true)
+    expect(shouldBufferLargeDevProxyRequest(request({
+      contentLength: MAX_DEV_PROXY_BODY_BYTES,
+    }))).toBe(true)
+  })
+
+  it('leaves small, read-only, and unrelated traffic on Vite native handling', () => {
+    expect(shouldBufferLargeDevProxyRequest(request({
+      contentLength: LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES - 1,
+    }))).toBe(false)
+    expect(shouldBufferLargeDevProxyRequest(request({
+      method: 'GET',
+      contentLength: LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES,
+    }))).toBe(false)
+    expect(shouldBufferLargeDevProxyRequest(request({
+      url: '/src/main.tsx',
+      contentLength: LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES,
+    }))).toBe(false)
+    expect(shouldBufferLargeDevProxyRequest(request({
+      url: '/admin/api/ai/chat/site',
+      contentLength: LARGE_DEV_PROXY_BODY_THRESHOLD_BYTES,
+    }))).toBe(false)
+    expect(shouldBufferLargeDevProxyRequest(request({}))).toBe(false)
+  })
+})
diff --git a/src/__tests__/page-tree/cssSelectorClasses.test.ts b/src/__tests__/page-tree/cssSelectorClasses.test.ts
new file mode 100644
index 000000000..53388470f
--- /dev/null
+++ b/src/__tests__/page-tree/cssSelectorClasses.test.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'bun:test'
+import {
+  extractCssSelectorClasses,
+  replaceCssSelectorClassName,
+  selectorBindingClassName,
+  splitCssSelectorList,
+} from '@core/page-tree'
+
+describe('CSS selector class tokens', () => {
+  it('decodes escaped Tailwind class names', () => {
+    expect(extractCssSelectorClasses('.hover\\:bg-blue-700:hover')).toEqual([
+      {
+        name: 'hover:bg-blue-700',
+        start: 0,
+        end: 19,
+        functionalDepth: 0,
+      },
+    ])
+    expect(extractCssSelectorClasses('.\\32xl\\:grid')).toEqual([
+      {
+        name: '2xl:grid',
+        start: 0,
+        end: 12,
+        functionalDepth: 0,
+      },
+    ])
+  })
+
+  it('finds dependency and subject classes without reading attribute values', () => {
+    expect(
+      extractCssSelectorClasses(
+        '.group:hover .group-hover\\:block[data-file=".ignored"]',
+      ).map((token) => token.name),
+    ).toEqual(['group', 'group-hover:block'])
+  })
+
+  it('uses the rightmost class as the binding subject', () => {
+    expect(selectorBindingClassName('.group:hover .group-hover\\:block')).toBe(
+      'group-hover:block',
+    )
+    expect(
+      selectorBindingClassName('.space-x-4 > :not([hidden]) ~ :not([hidden])'),
+    ).toBe('space-x-4')
+    expect(selectorBindingClassName('h1 > span')).toBeNull()
+  })
+
+  it('does not mistake classes inside functional pseudos for the styled subject', () => {
+    expect(selectorBindingClassName('.button:not(.disabled)')).toBe('button')
+    expect(selectorBindingClassName('.card:has(.badge)')).toBe('card')
+    expect(selectorBindingClassName(':is(.notice, .warning)')).toBeNull()
+    expect(
+      extractCssSelectorClasses('.button:not(.disabled)').map((token) => ({
+        name: token.name,
+        depth: token.functionalDepth,
+      })),
+    ).toEqual([
+      { name: 'button', depth: 0 },
+      { name: 'disabled', depth: 1 },
+    ])
+  })
+
+  it('splits only top-level selector-list commas', () => {
+    expect(splitCssSelectorList('.a:is(.b, .c), [data-label="x,y"] .d')).toEqual([
+      '.a:is(.b, .c)',
+      '[data-label="x,y"] .d',
+    ])
+  })
+
+  it('renames decoded class tokens without touching prefixes or attribute values', () => {
+    expect(
+      replaceCssSelectorClassName(
+        '.hover\\:bg-blue:hover .hover\\:bg-blue-x[data-x=".hover:bg-blue"]',
+        'hover:bg-blue',
+        'focus\\:bg-red',
+      ),
+    ).toBe(
+      '.focus\\:bg-red:hover .hover\\:bg-blue-x[data-x=".hover:bg-blue"]',
+    )
+  })
+})
diff --git a/src/__tests__/panels/useClassPickerSuggestions.test.ts b/src/__tests__/panels/useClassPickerSuggestions.test.ts
index f367d8d68..132634876 100644
--- a/src/__tests__/panels/useClassPickerSuggestions.test.ts
+++ b/src/__tests__/panels/useClassPickerSuggestions.test.ts
@@ -12,7 +12,10 @@
  * tooltip priority order.
  */
 import { describe, expect, it } from 'bun:test'
-import { useClassPickerSuggestions } from '@site/panels/PropertiesPanel/useClassPickerSuggestions'
+import {
+  CLASS_PICKER_RESULT_LIMIT,
+  useClassPickerSuggestions,
+} from '@site/panels/PropertiesPanel/useClassPickerSuggestions'
 import { classKindSelector, type StyleRule } from '@core/page-tree'
 import type { SelectorSuggestionItem } from '@site/panels/PropertiesPanel/selectorPickerModel'
 
@@ -124,6 +127,23 @@ describe('useClassPickerSuggestions — empty query', () => {
     expect(result.flatNavIds).toEqual([...result.recentIds, ...result.frequentIds])
   })
 
+  it('bounds mounted rows for a full utility registry', () => {
+    const allClasses = Array.from({ length: 40_000 }, (_, index) =>
+      makeClass(`utility-${index}`),
+    )
+    const result = useClassPickerSuggestions({
+      allClasses,
+      assignedIds: [],
+      query: '',
+      highlightedIndex: -1,
+      readUsage: NO_USAGE,
+    })
+
+    expect(result.candidates).toHaveLength(40_000)
+    expect(result.remainingCandidates).toHaveLength(CLASS_PICKER_RESULT_LIMIT)
+    expect(result.flatNavIds).toHaveLength(CLASS_PICKER_RESULT_LIMIT)
+  })
+
 })
 
 // ---------------------------------------------------------------------------
@@ -164,6 +184,23 @@ describe('useClassPickerSuggestions — typed query', () => {
     expect(result.submitTooltip).toBe('Add class “.header”')
   })
 
+  it('finds an exact utility beyond the mounted result window', () => {
+    const allClasses = Array.from({ length: 10_000 }, (_, index) =>
+      makeClass(`utility-${index}`),
+    )
+    const result = useClassPickerSuggestions({
+      allClasses,
+      assignedIds: [],
+      query: 'utility-9999',
+      highlightedIndex: -1,
+      readUsage: NO_USAGE,
+    })
+
+    expect(result.filteredSuggestions.length).toBeLessThanOrEqual(CLASS_PICKER_RESULT_LIMIT)
+    expect(result.exactMatchedClass?.name).toBe('utility-9999')
+    expect(result.hasSubmittableQuery).toBe(true)
+  })
+
   it('flags an exact match that is already assigned as non-submittable', () => {
     const cls = makeClass('header')
     const result = useClassPickerSuggestions({
diff --git a/src/__tests__/publisher/classStyleInjector.test.ts b/src/__tests__/publisher/classStyleInjector.test.ts
index a33efc0af..40c44d602 100644
--- a/src/__tests__/publisher/classStyleInjector.test.ts
+++ b/src/__tests__/publisher/classStyleInjector.test.ts
@@ -758,6 +758,59 @@ describe('collectClassCSS', () => {
     expect(css).not.toContain('.unused')
   })
 
+  it('emits a complex utility variant only when its selector dependencies are used', () => {
+    const group = makeClass('group', {})
+    const variant: StyleRule = {
+      ...makeClass('variant', { display: 'block' }, {}, 'group-hover:block'),
+      selector: '.group:hover .group-hover\\:block',
+    }
+    const withDependency = makeSite(
+      { group, variant },
+      { parent: ['group'], child: ['variant'] },
+    )
+    const withoutDependency = makeSite(
+      { group, variant },
+      { child: ['variant'] },
+    )
+
+    expect(collectClassCSS(withDependency)).toContain(
+      '.group:hover .group-hover\\:block',
+    )
+    expect(collectClassCSS(withoutDependency)).not.toContain('group-hover')
+  })
+
+  it('tree-shakes ambient fragments by known class dependencies', () => {
+    const used = makeClass('used', {})
+    const unused = makeClass('unused', {})
+    const usedFragment: StyleRule = {
+      ...makeClass('used-fragment', { color: 'green' }),
+      name: '.used:hover',
+      kind: 'ambient',
+      selector: '.used:hover',
+    }
+    const unusedFragment: StyleRule = {
+      ...makeClass('unused-fragment', { color: 'red' }),
+      name: '.unused:hover',
+      kind: 'ambient',
+      selector: '.unused:hover',
+    }
+    const body: StyleRule = {
+      ...makeClass('body-rule', { margin: '0' }),
+      name: 'body',
+      kind: 'ambient',
+      selector: 'body',
+    }
+    const site = makeSite(
+      { used, unused, usedFragment, unusedFragment, body },
+      { child: ['used'] },
+    )
+
+    const css = collectClassCSS(site)
+    expect(css).toContain('.used:hover')
+    expect(css).not.toContain('.unused:hover')
+    expect(css).toContain('body {')
+  })
+
   it('emits CSS for all used classes across all nodes', () => {
     const site = makeSite(
       {
diff --git a/src/__tests__/siteImport/applyImport.test.ts b/src/__tests__/siteImport/applyImport.test.ts
index 0b74cf5ad..6b0541057 100644
--- a/src/__tests__/siteImport/applyImport.test.ts
+++ b/src/__tests__/siteImport/applyImport.test.ts
@@ -332,7 +332,7 @@ describe('buildImportPlan — structure', () => {
     ])
   })
 
-  it('keeps script-created CSS classes publishable as ambient rules when no imported node uses them', () => {
+  it('keeps unused CSS classes picker-addressable for explicit assignment', () => {
     const html = `<!doctype html><html><head><link rel="stylesheet" href="style.css"></head><body>
       <div class="used-class">Visible content</div>
     </body></html>`
@@ -346,11 +346,32 @@ describe('buildImportPlan — structure', () => {
     })
 
     expect(p.styleRules.find((rule) => rule.selector === '.used-class')?.kind).toBe('class')
-    expect(p.styleRules.find((rule) => rule.selector === '.runtime-created')?.kind).toBe('ambient')
+    expect(p.styleRules.find((rule) => rule.selector === '.runtime-created')?.kind).toBe('class')
     expect(p.conflicts.rules.some((conflict) => conflict.desiredName === 'runtime-created')).toBe(false)
   })
 
-  it('preserves Bootstrap utility fragments as ambient rules even when nodes use them', () => {
+  it('adds picker entries for complex-selector dependency classes', () => {
+    const html = `<!doctype html><html><head><link rel="stylesheet" href="style.css"></head><body>
+      <div>Tailwind catalogue</div>
+    </body></html>`
+    const css = `.group:hover .group-hover\\:block { display: block; }`
+    const p = buildImportPlan({
+      fileMap: makeSinglePageFileMap(html, css),
+      currentSite,
+    })
+
+    expect(p.styleRules.find((rule) => rule.name === 'group-hover:block')).toMatchObject({
+      kind: 'class',
+      selector: '.group:hover .group-hover\\:block',
+    })
+    expect(p.styleRules.find((rule) => rule.name === 'group')).toMatchObject({
+      kind: 'class',
+      selector: '.group',
+      styles: {},
+    })
+  })
+
+  it('keeps one bindable Bootstrap utility and preserves its cascade fragments', () => {
     const html = `<!doctype html><html><head>
       <link rel="stylesheet" href="css/bootstrap.css">
       <link rel="stylesheet" href="css/main.css">
@@ -381,15 +402,23 @@ describe('buildImportPlan — structure', () => {
       currentSite,
     })
 
-    const rowRules = p.styleRules.filter((rule) => rule.selector === '.row')
+    const resolved = applyConflictResolutions(
+      p,
+      p.conflicts.pages,
+      p.conflicts.rules,
+      p.conflicts.tokens,
+      p.conflicts.crossSheetClasses,
+    )
+    const rowRules = resolved.styleRules.filter((rule) => rule.selector === '.row')
     expect(rowRules).toHaveLength(2)
-    expect(rowRules.every((rule) => rule.kind === 'ambient')).toBe(true)
-    expect(p.styleRules.find((rule) => rule.selector === '.row > *')?.kind).toBe('ambient')
-    expect(p.styleRules.find((rule) => rule.selector === '.col-xl-3')?.kind).toBe('ambient')
-    expect(p.styleRules.find((rule) => rule.selector === '.align-items-stretch')?.kind).toBe('ambient')
-    expect(p.styleRules.find((rule) => rule.selector === '.custom-row')?.kind).toBe('class')
-
-    const rowNode = Object.values(p.pages[0].nodeFragment.nodes).find((node) =>
+    expect(rowRules.filter((rule) => rule.kind === 'class')).toHaveLength(1)
+    expect(rowRules.filter((rule) => rule.kind === 'ambient')).toHaveLength(1)
+    expect(resolved.styleRules.find((rule) => rule.selector === '.row > *')?.kind).toBe('ambient')
+    expect(resolved.styleRules.find((rule) => rule.selector === '.col-xl-3')?.kind).toBe('class')
+    expect(resolved.styleRules.find((rule) => rule.selector === '.align-items-stretch')?.kind).toBe('class')
+    expect(resolved.styleRules.find((rule) => rule.selector === '.custom-row')?.kind).toBe('class')
+
+    const rowNode = Object.values(resolved.pages[0].nodeFragment.nodes).find((node) =>
       node.classIds?.includes('row'),
     )
     expect(rowNode?.classIds).toEqual(['row', 'align-items-stretch', 'custom-row'])
diff --git a/src/__tests__/siteImport/conflicts.test.ts b/src/__tests__/siteImport/conflicts.test.ts
index a6d19e238..be4f5511d 100644
--- a/src/__tests__/siteImport/conflicts.test.ts
+++ b/src/__tests__/siteImport/conflicts.test.ts
@@ -285,6 +285,30 @@ describe('applyConflictResolutions', () => {
     expect(result.styleRules[2].selector).toBe('.card .btn-2')
   })
 
+  it('auto-rename preserves an escaped imported variant selector', () => {
+    const variant: NewStyleRule = {
+      ...makeClassRule('group-hover:block'),
+      selector: '.group:hover .group-hover\\:block',
+    }
+    const plan = makePlan([], [variant])
+    const res: RuleConflict = {
+      source: '',
+      desiredName: 'group-hover:block',
+      existingRuleId: 'preexisting-variant',
+      defaultResolution: {
+        action: 'auto-rename',
+        resolvedName: 'group-hover:block-2',
+      },
+    }
+
+    const result = applyConflictResolutions(plan, [], [res])
+
+    expect(result.styleRules[0]).toMatchObject({
+      name: 'group-hover:block-2',
+      selector: '.group:hover .group-hover\\:block-2',
+    })
+  })
+
   it('skip rule: node classIds keep the original name (binds to pre-existing rule)', () => {
     const page: PagePlan = {
       source: 'index.html',
diff --git a/src/__tests__/siteImport/cssToStyleRules.test.ts b/src/__tests__/siteImport/cssToStyleRules.test.ts
index c692b1526..4aec0b3b7 100644
--- a/src/__tests__/siteImport/cssToStyleRules.test.ts
+++ b/src/__tests__/siteImport/cssToStyleRules.test.ts
@@ -60,9 +60,10 @@ describe('cssToStyleRules — selector classification', () => {
     expect(rules[0].kind).toBe('ambient')
   })
 
-  it('.hero .title → ambient (descendant)', () => {
+  it('.hero .title binds the rightmost class while preserving the selector', () => {
     const { rules } = cssToStyleRules('.hero .title { color: red }')
-    expect(rules[0].kind).toBe('ambient')
+    expect(rules[0].kind).toBe('class')
+    expect(rules[0].name).toBe('title')
     expect(rules[0].selector).toBe('.hero .title')
   })
 
@@ -86,9 +87,41 @@ describe('cssToStyleRules — selector classification', () => {
     expect(rules[0].selector).toContain('data-state')
   })
 
-  it('.foo.bar → ambient (compound — two classes, no space)', () => {
+  it('.foo.bar binds the rightmost compound class', () => {
     const { rules } = cssToStyleRules('.foo.bar { color: red }')
-    expect(rules[0].kind).toBe('ambient')
+    expect(rules[0].kind).toBe('class')
+    expect(rules[0].name).toBe('bar')
+  })
+
+  it('decodes and binds escaped Tailwind variant class names', () => {
+    const { rules } = cssToStyleRules(
+      '.group:hover .group-hover\\:block { display: block }',
+    )
+    expect(rules).toHaveLength(1)
+    expect(rules[0]).toMatchObject({
+      kind: 'class',
+      name: 'group-hover:block',
+      selector: '.group:hover .group-hover\\:block',
+    })
+  })
+
+  it('keeps selector-list alternatives with one binding in one rule', () => {
+    const { rules } = cssToStyleRules(
+      '.placeholder\\:text-gray-400::-moz-placeholder, .placeholder\\:text-gray-400::placeholder { color: gray }',
+    )
+    expect(rules).toHaveLength(1)
+    expect(rules[0].selector).toBe(
+      '.placeholder\\:text-gray-400::-moz-placeholder, .placeholder\\:text-gray-400::placeholder',
+    )
+    expect(rules[0].name).toBe('placeholder:text-gray-400')
+  })
+
+  it('splits selector-list alternatives owned by different classes', () => {
+    const { rules } = cssToStyleRules('.foo, .bar { color: red }')
+    expect(rules.map((rule) => [rule.name, rule.selector])).toEqual([
+      ['foo', '.foo'],
+      ['bar', '.bar'],
+    ])
   })
 })
 
diff --git a/src/admin/pages/site/canvas/ClassStyleInjector.tsx b/src/admin/pages/site/canvas/ClassStyleInjector.tsx
index b238ee8a4..aba5d660f 100644
--- a/src/admin/pages/site/canvas/ClassStyleInjector.tsx
+++ b/src/admin/pages/site/canvas/ClassStyleInjector.tsx
@@ -41,7 +41,12 @@
 import { useEffect } from 'react'
 import { useEditorStore } from '@site/store/store'
 import { styleRuleSelector, type ConditionDef, type StyleRule } from '@core/page-tree'
-import { collectBackgroundImagePaths, collectSiteStyleBackgroundImagePaths } from '@core/publisher'
+import {
+  collectBackgroundImagePaths,
+  collectSiteStyleBackgroundImagePaths,
+  treeShakeStyleRulesBySignature,
+  usedStyleRuleIdSignature,
+} from '@core/publisher'
 import { useResponsiveEditorMediaAssets } from '@admin/pages/media/hooks/useResponsiveBackgroundStyle'
 import { selectorStatePseudo } from '@site/cssStatePseudo'
 import {
@@ -98,6 +103,9 @@ export function ClassStyleInjector({ targetDocument, viewport }: ClassStyleInjec
   // Subscribe to class registry — shallow equality so we only re-run when
   // the classes object reference changes (Mutative always creates a new ref on mutation)
   const classes = useEditorStore((s) => s.site?.styleRules ?? null)
+  const usedClassIdSignature = useEditorStore((s) =>
+    s.site ? usedStyleRuleIdSignature(s.site) : '',
+  )
   const breakpoints = useEditorStore((s) => s.site?.breakpoints ?? EMPTY_BREAKPOINTS)
   const conditions = useEditorStore((s) => s.site?.conditions ?? EMPTY_CONDITIONS)
   const frameworkColors = useEditorStore((s) => s.site?.settings.framework?.colors ?? null)
@@ -108,8 +116,12 @@ export function ClassStyleInjector({ targetDocument, viewport }: ClassStyleInjec
   const previewClassStyles = useEditorStore((s) => s.previewClassStyles)
   const activeClassId = useEditorStore((s) => s.activeClassId)
   const selectedNodeId = useEditorStore((s) => s.selectedNodeId)
+  const canvasClasses = treeShakeStyleRulesBySignature(
+    classes ?? EMPTY_STYLE_RULES,
+    usedClassIdSignature,
+  )
   const backgroundPaths = [
-    ...collectSiteStyleBackgroundImagePaths({ styleRules: classes ?? EMPTY_STYLE_RULES }),
+    ...collectSiteStyleBackgroundImagePaths({ styleRules: canvasClasses }),
     ...collectBackgroundImagePaths(previewClassStyles?.styles.backgroundImage),
   ]
   const {
@@ -133,7 +145,7 @@ export function ClassStyleInjector({ targetDocument, viewport }: ClassStyleInjec
     const forCanvas = (css: string) => (viewport ? resolveViewportUnitsForCanvas(css, viewport) : css)
 
     const generated = generateCanvasClassCSS(
-      classes ?? EMPTY_STYLE_RULES,
+      canvasClasses,
       breakpoints,
       conditions,
       frameworkColors,
@@ -154,7 +166,7 @@ export function ClassStyleInjector({ targetDocument, viewport }: ClassStyleInjec
       ? `@layer user-authored {\n${css}\n}`
       : '/* no classes */'
     const placeholderSuppressionCss = generateAmbientPlaceholderSuppressionCSS(
-      classes ?? EMPTY_STYLE_RULES,
+      canvasClasses,
     )
     styleEl.textContent = placeholderSuppressionCss
       ? `${authoredCss}\n${placeholderSuppressionCss}`
@@ -162,7 +174,7 @@ export function ClassStyleInjector({ targetDocument, viewport }: ClassStyleInjec
   }, [
     targetDocument,
     viewport,
-    classes,
+    canvasClasses,
     breakpoints,
     conditions,
     frameworkColors,
diff --git a/src/admin/pages/site/panels/PropertiesPanel/selectorPickerModel.ts b/src/admin/pages/site/panels/PropertiesPanel/selectorPickerModel.ts
index b219559e2..33d483fce 100644
--- a/src/admin/pages/site/panels/PropertiesPanel/selectorPickerModel.ts
+++ b/src/admin/pages/site/panels/PropertiesPanel/selectorPickerModel.ts
@@ -34,7 +34,6 @@ interface SelectorPickerModel {
 export function deriveSelectorPickerModel(input: SelectorPickerModelInput): SelectorPickerModel {
   const { rules, node, selectedElement, activeRuleId } = input
   const assignedIds = node?.classIds ?? []
-  const assignedIdSet = new Set(assignedIds)
   const selectorSubject = authorSelectorSubject(selectedElement)
   const pills: SelectorPillItem[] = []
   const suggestions: SelectorSuggestionItem[] = []
@@ -50,34 +49,25 @@ export function deriveSelectorPickerModel(input: SelectorPickerModelInput): Sele
     })
   }
 
-  for (const rule of sortedRules(rules)) {
-    if (rule.kind === 'ambient') {
-      const { match, pillMatch } = evaluateAmbientRule(rule, selectorSubject)
-      if (pillMatch) {
-        pills.push({
-          rule,
-          match: pillMatch,
-          active: activeRuleId === rule.id,
-          removable: false,
-        })
-      }
-      suggestions.push({
-        rule,
-        match,
-        disabled: match === null,
-        disabledReason: match === null ? "Doesn't match this element" : null,
-      })
-      continue
-    }
-
-    if (!assignedIdSet.has(rule.id)) {
-      suggestions.push({
+  // Class suggestions are derived directly from the registry by
+  // useClassPickerSuggestions. Only ambient rules need DOM selector matching
+  // here; filtering before sorting keeps a 40k-class Tailwind registry cheap.
+  for (const rule of sortedAmbientRules(rules)) {
+    const { match, pillMatch } = evaluateAmbientRule(rule, selectorSubject)
+    if (pillMatch) {
+      pills.push({
         rule,
-        match: null,
-        disabled: false,
-        disabledReason: null,
+        match: pillMatch,
+        active: activeRuleId === rule.id,
+        removable: false,
       })
     }
+    suggestions.push({
+      rule,
+      match,
+      disabled: match === null,
+      disabledReason: match === null ? "Doesn't match this element" : null,
+    })
   }
 
   return { pills: sortPillsBySpecificity(pills), suggestions }
@@ -133,8 +123,8 @@ function stripCanvasEditorAttributes(root: Element): void {
   }
 }
 
-function sortedRules(rules: Record<string, StyleRule>): StyleRule[] {
-  return Object.values(rules).slice().sort((a, b) => {
+function sortedAmbientRules(rules: Record<string, StyleRule>): StyleRule[] {
+  return Object.values(rules).filter((rule) => rule.kind === 'ambient').sort((a, b) => {
     const byOrder = normaliseOrder(a) - normaliseOrder(b)
     return byOrder !== 0 ? byOrder : a.name.localeCompare(b.name)
   })
diff --git a/src/admin/pages/site/panels/PropertiesPanel/useClassPickerSuggestions.ts b/src/admin/pages/site/panels/PropertiesPanel/useClassPickerSuggestions.ts
index 7102687d5..600b276ef 100644
--- a/src/admin/pages/site/panels/PropertiesPanel/useClassPickerSuggestions.ts
+++ b/src/admin/pages/site/panels/PropertiesPanel/useClassPickerSuggestions.ts
@@ -40,6 +40,9 @@ import { rankBySuggestionScore } from './classPickerRanking'
 // doesn't leave the dropdown sparse.
 const SUFFICIENT_HISTORY_THRESHOLD = CLASS_USAGE_RECENT_LIMIT
 
+/** Bound mounted picker rows while retaining full-registry exact-name lookup. */
+export const CLASS_PICKER_RESULT_LIMIT = 100
+
 interface ClassPickerSuggestionsInput {
   /** Every user-visible class in the site, regardless of node assignment. */
   allClasses: readonly StyleRule[]
@@ -136,11 +139,11 @@ export function useClassPickerSuggestions(
     ? createIntent.name.toLowerCase()
     : trimmedQuery
   const filteredSuggestions = isEmptyQuery
-    ? candidates
-    : rankBySuggestionScore(candidates, classSearchQuery)
+    ? candidates.slice(0, CLASS_PICKER_RESULT_LIMIT)
+    : rankBySuggestionScore(candidates, classSearchQuery).slice(0, CLASS_PICKER_RESULT_LIMIT)
   const selectorSuggestions = isEmptyQuery
-    ? selectorItems.slice()
-    : rankSelectorSuggestions(selectorItems, trimmedQuery)
+    ? selectorItems.slice(0, CLASS_PICKER_RESULT_LIMIT)
+    : rankSelectorSuggestions(selectorItems, trimmedQuery).slice(0, CLASS_PICKER_RESULT_LIMIT)
 
   // Empty-query layout: surface Recent + Frequent first, then optionally an
   // "All classes" section so fresh sites with sparse history stay browsable.
@@ -150,7 +153,9 @@ export function useClassPickerSuggestions(
     : { recent: [] as string[], frequent: [] as string[] }
   const surfacedSet = new Set<string>([...recentIds, ...frequentIds])
   const surfacedCount = surfacedSet.size
-  const remainingCandidates = candidates.filter((c) => !surfacedSet.has(c.id))
+  const remainingCandidates = candidates
+    .filter((c) => !surfacedSet.has(c.id))
+    .slice(0, CLASS_PICKER_RESULT_LIMIT)
   const shouldShowAllSection =
     isEmptyQuery && (surfacedCount === 0 || surfacedCount < SUFFICIENT_HISTORY_THRESHOLD)
 
diff --git a/src/admin/pages/site/store/slices/site/helpers.ts b/src/admin/pages/site/store/slices/site/helpers.ts
index b1f8b9008..f62cbde48 100644
--- a/src/admin/pages/site/store/slices/site/helpers.ts
+++ b/src/admin/pages/site/store/slices/site/helpers.ts
@@ -24,7 +24,12 @@ import { collectDirtyFromSitePatches, mergeDirtyMarks } from './dirtyTracking'
 import type { EditorStore } from '@site/store/types'
 import { MAX_HISTORY } from './defaults'
 import { reconcileFrameworkClasses } from './framework/reconcile'
-import { indexStyleRulesByName, linkImportedClassNames } from './importLinking'
+import {
+  createStyleRuleOrderAllocator,
+  indexStyleRulesByName,
+  linkImportedClassNames,
+  type StyleRuleOrderAllocator,
+} from './importLinking'
 import { addImportedColorTokens, overwriteImportedColorTokens } from './importedColorTokens'
 import { addImportedFonts, addImportedFontTokens, addInstalledFontEntries, overwriteImportedFontTokens } from './importedFonts'
 import type { HistoryEntry, SiteMutationResult, SiteSliceHelpers, SiteSliceRecipe } from './types'
@@ -162,6 +167,7 @@ function applyImportedBodyAttributes(
   fragment: ImportFragment,
   site: SiteDocument,
   byName: Map<string, string>,
+  allocateOrder: StyleRuleOrderAllocator,
 ): void {
   const body = fragment.body
   if (!body) return
@@ -170,7 +176,7 @@ function applyImportedBodyAttributes(
     rootNode.props = { ...rootNode.props, ...body.props }
   }
   if (body.classIds?.length) {
-    rootNode.classIds = linkImportedClassNames(body.classIds, site.styleRules, byName)
+    rootNode.classIds = linkImportedClassNames(body.classIds, site.styleRules, byName, allocateOrder)
   }
   if (body.inlineStyles && Object.keys(body.inlineStyles).length > 0) {
     rootNode.inlineStyles = body.inlineStyles
@@ -435,6 +441,7 @@ export function buildSiteHelpers(
       // a `addStyleRule(kind:'class', name:'btn')` followed by
       // `addPage(fragment with node.classIds:['btn'])` resolves to the same id.
       const byName = indexStyleRulesByName(site.styleRules)
+      const allocateStyleRuleOrder = createStyleRuleOrderAllocator(site.styleRules)
 
       const helpers: SiteImportTransaction = {
         addPage({ id: pageId, title, slug, nodeFragment }: { id?: string; title: string; slug: string; nodeFragment: ImportFragment }): string {
@@ -445,12 +452,23 @@ export function buildSiteHelpers(
           // Honour a caller-supplied id so the importer can pre-mint page ids
           // and rewrite internal links to `cms:page:<id>` before committing.
           if (pageId) page.id = pageId
-          applyImportedBodyAttributes(page.nodes[page.rootNodeId]!, nodeFragment, site, byName)
+          applyImportedBodyAttributes(
+            page.nodes[page.rootNodeId]!,
+            nodeFragment,
+            site,
+            byName,
+            allocateStyleRuleOrder,
+          )
           for (const [id, node] of Object.entries(nodeFragment.nodes)) {
             // `node.inlineStyles` rides along on the spread — first-class field.
             page.nodes[id] = {
               ...node,
-              classIds: linkImportedClassNames(node.classIds, site.styleRules, byName),
+              classIds: linkImportedClassNames(
+                node.classIds,
+                site.styleRules,
+                byName,
+                allocateStyleRuleOrder,
+              ),
             }
           }
           page.nodes[page.rootNodeId]!.children = [...nodeFragment.rootIds]
@@ -462,18 +480,12 @@ export function buildSiteHelpers(
         addStyleRule(rule: NewStyleRule): string {
           const id = nanoid()
           const now = Date.now()
-          // Append after every existing rule so imports don't disrupt the
-          // established cascade order.
-          let maxOrder = -1
-          for (const r of Object.values(site.styleRules)) {
-            if (typeof r.order === 'number' && r.order > maxOrder) maxOrder = r.order
-          }
           const newRule: StyleRule = {
             ...rule,
             id,
             createdAt: now,
             updatedAt: now,
-            order: maxOrder + 1,
+            order: allocateStyleRuleOrder(),
           }
           site.styleRules[id] = newRule
           // Register in byName so subsequent addPage calls referencing this
@@ -490,13 +502,18 @@ export function buildSiteHelpers(
           // Mint a fresh body root; wire fragment roots as its children.
           const rootNode = createNode('base.body')
           rootNode.children = [...nodeFragment.rootIds]
-          applyImportedBodyAttributes(rootNode, nodeFragment, site, byName)
+          applyImportedBodyAttributes(rootNode, nodeFragment, site, byName, allocateStyleRuleOrder)
 
           const newNodes: Record<string, PageNode> = { [rootNode.id]: rootNode }
           for (const [id, node] of Object.entries(nodeFragment.nodes)) {
             newNodes[id] = {
               ...node,
-              classIds: linkImportedClassNames(node.classIds, site.styleRules, byName),
+              classIds: linkImportedClassNames(
+                node.classIds,
+                site.styleRules,
+                byName,
+                allocateStyleRuleOrder,
+              ),
             }
           }
 
diff --git a/src/admin/pages/site/store/slices/site/importLinking.ts b/src/admin/pages/site/store/slices/site/importLinking.ts
index 518827824..272245d99 100644
--- a/src/admin/pages/site/store/slices/site/importLinking.ts
+++ b/src/admin/pages/site/store/slices/site/importLinking.ts
@@ -11,6 +11,25 @@ import { classKindSelector } from '@core/page-tree'
 import type { StyleRule } from '@core/page-tree'
 import type { NewStyleRule } from '@core/siteImport'
 
+export type StyleRuleOrderAllocator = () => number
+
+/**
+ * Allocate monotonically increasing cascade positions for one import
+ * transaction. The existing registry is scanned once; every subsequent rule
+ * append is O(1), even when a stylesheet contains tens of thousands of rules.
+ */
+export function createStyleRuleOrderAllocator(
+  rules: Record<string, StyleRule>,
+): StyleRuleOrderAllocator {
+  let nextOrder = 0
+  for (const rule of Object.values(rules)) {
+    if (typeof rule.order === 'number' && rule.order >= nextOrder) {
+      nextOrder = rule.order + 1
+    }
+  }
+  return () => nextOrder++
+}
+
 /**
  * Index a StyleRule registry by name → id.
  * First id wins on duplicates (createClass enforces name uniqueness, so
@@ -39,6 +58,7 @@ export function linkImportedClassNames(
   classNames: readonly string[] | undefined,
   rules: Record<string, StyleRule>,
   byName: Map<string, string>,
+  allocateOrder: StyleRuleOrderAllocator,
 ): string[] {
   if (!classNames?.length) return []
   const ids: string[] = []
@@ -48,19 +68,15 @@ export function linkImportedClassNames(
     if (!id) {
       const now = Date.now()
       // Auto-created classes are always kind:'class' — they exist to back the
-      // class-attribute tokens stamped onto imported nodes. Append at the
-      // end of the cascade (`order` strictly greater than every existing
-      // rule) so they don't accidentally outrank prior user-authored rules.
-      let maxOrder = -1
-      for (const c of Object.values(rules)) {
-        if (typeof c.order === 'number' && c.order > maxOrder) maxOrder = c.order
-      }
+      // class-attribute tokens stamped onto imported nodes. The shared
+      // transaction allocator keeps appends ordered without rescanning the
+      // growing registry for every unknown token.
       const cls: StyleRule = {
         id: nanoid(),
         name,
         kind: 'class',
         selector: classKindSelector(name),
-        order: maxOrder + 1,
+        order: allocateOrder(),
         styles: {},
         contextStyles: {},
         createdAt: now,
@@ -97,13 +113,12 @@ export function mergeImportedStyleRules(
   rules: readonly NewStyleRule[],
   siteRules: Record<string, StyleRule>,
   byName: Map<string, string>,
+  allocateOrder: StyleRuleOrderAllocator,
 ): void {
   if (rules.length === 0) return
 
-  let maxOrder = -1
   const ambientSelectors = new Set<string>()
   for (const r of Object.values(siteRules)) {
-    if (typeof r.order === 'number' && r.order > maxOrder) maxOrder = r.order
     if (r.kind === 'ambient') ambientSelectors.add(r.selector)
   }
 
@@ -119,7 +134,7 @@ export function mergeImportedStyleRules(
     const newRule: StyleRule = {
       ...rule,
       id,
-      order: (maxOrder += 1),
+      order: allocateOrder(),
       createdAt: now,
       updatedAt: now,
     }
diff --git a/src/admin/pages/site/store/slices/site/nodeActions.ts b/src/admin/pages/site/store/slices/site/nodeActions.ts
index 1cffefdf2..41111a4c6 100644
--- a/src/admin/pages/site/store/slices/site/nodeActions.ts
+++ b/src/admin/pages/site/store/slices/site/nodeActions.ts
@@ -37,7 +37,12 @@ import { wouldCreateCycle, syncSlotInstances, applySlotSyncResult } from '@core/
 import { pushToast } from '@ui/components/Toast'
 import { depthInTree, resolveActiveTreeTarget } from './helpers'
 import { pruneCanvasSelectionDraft } from '../selectionSlice'
-import { indexStyleRulesByName, linkImportedClassNames, mergeImportedStyleRules } from './importLinking'
+import {
+  createStyleRuleOrderAllocator,
+  indexStyleRulesByName,
+  linkImportedClassNames,
+  mergeImportedStyleRules,
+} from './importLinking'
 import type { SiteSlice, SiteSliceHelpers } from './types'
 
 type NodeActions = Pick<
@@ -207,13 +212,19 @@ export function createNodeActions(helpers: SiteSliceHelpers): NodeActions {
         // Nodes already carry fresh nanoid IDs from createNode — no collision
         // risk on the node map.
         const classesByName = indexStyleRulesByName(site.styleRules)
+        const allocateStyleRuleOrder = createStyleRuleOrderAllocator(site.styleRules)
 
         // Commit rules parsed from <style> blocks BEFORE linking class names so
         // a node's `class="foo"` token binds to the just-added `.foo {}` rule
         // (rather than auto-creating a bare class). These show in the Selectors
         // panel like any other rule.
         if (opts?.styleRules?.length) {
-          mergeImportedStyleRules(opts.styleRules, site.styleRules, classesByName)
+          mergeImportedStyleRules(
+            opts.styleRules,
+            site.styleRules,
+            classesByName,
+            allocateStyleRuleOrder,
+          )
         }
         // Register any reusable conditions (custom @media / @container /
         // @supports) the <style> rules reference via contextStyles keys.
@@ -232,7 +243,12 @@ export function createNodeActions(helpers: SiteSliceHelpers): NodeActions {
           // the `...node` spread — it is a first-class node field.
           tree.nodes[id] = {
             ...node,
-            classIds: linkImportedClassNames(node.classIds, site.styleRules, classesByName),
+            classIds: linkImportedClassNames(
+              node.classIds,
+              site.styleRules,
+              classesByName,
+              allocateStyleRuleOrder,
+            ),
           }
         }
 
diff --git a/src/admin/pages/site/store/styleRuleRename.ts b/src/admin/pages/site/store/styleRuleRename.ts
index b8870392d..8c76d2b9d 100644
--- a/src/admin/pages/site/store/styleRuleRename.ts
+++ b/src/admin/pages/site/store/styleRuleRename.ts
@@ -2,6 +2,7 @@ import {
   assertValidCssClassName,
   classKindSelector,
   isGeneratedClassLocked,
+  replaceCssSelectorClassName,
   type StyleRule,
 } from '@core/page-tree'
 
@@ -147,7 +148,11 @@ export function renameStyleRule(
   }
 
   assertValidCssClassName(trimmed)
-  const selector = classKindSelector(trimmed)
+  const escapedName = classKindSelector(trimmed).slice(1)
+  const renamedSelector = replaceCssSelectorClassName(rule.selector, rule.name, escapedName)
+  const selector = renamedSelector === rule.selector && rule.name !== trimmed
+    ? classKindSelector(trimmed)
+    : renamedSelector
   if (Object.is(rule.name, trimmed) && Object.is(rule.selector, selector)) return false
 
   const existing = Object.values(styleRules).find(
diff --git a/src/core/page-tree/classNames.ts b/src/core/page-tree/classNames.ts
index 2e92b4a40..89ce98f4c 100644
--- a/src/core/page-tree/classNames.ts
+++ b/src/core/page-tree/classNames.ts
@@ -26,8 +26,9 @@ export function assertValidCssClassName(name: string): void {
 /**
  * Return the CSS selector to emit for a style rule.
  *
- *   - kind:'class':   `rule.selector` (always pre-built as `.<escaped-name>`).
- *   - kind:'ambient': `rule.selector` verbatim (`h1 > span`, `.hero .title`, ...).
+ *   - kind:'class':   `rule.selector` (a canonical `.<escaped-name>` or a
+ *                     preserved imported selector containing that class).
+ *   - kind:'ambient': `rule.selector` verbatim (`h1 > span`, `a:hover`, ...).
  */
 export function styleRuleSelector(cls: Pick<StyleRule, 'selector'>): string {
   return cls.selector
diff --git a/src/core/page-tree/cssSelectorClasses.ts b/src/core/page-tree/cssSelectorClasses.ts
new file mode 100644
index 000000000..ea6b18098
--- /dev/null
+++ b/src/core/page-tree/cssSelectorClasses.ts
@@ -0,0 +1,224 @@
+/**
+ * CSS class tokens embedded in selector text.
+ *
+ * A style rule can be node-assignable even when its selector is more than a
+ * bare class:
+ *
+ *   .hover\:bg-blue-700:hover
+ *   .group:hover .group-hover\:block
+ *   .space-x-4 > :not([hidden]) ~ :not([hidden])
+ *
+ * The importer, class rename path, usage index, and publisher tree-shaker all
+ * need to agree on the decoded class names carried by those selectors. This
+ * module is the one dependency-free lexer they share.
+ */
+
+export interface CssSelectorClassToken {
+  /** Class-attribute value after decoding CSS identifier escapes. */
+  name: string
+  /** Offset of the leading `.` in the selector string. */
+  start: number
+  /** Exclusive end offset of the escaped identifier. */
+  end: number
+  /** Functional-pseudo nesting depth at the leading `.`. */
+  functionalDepth: number
+}
+
+function isHexDigit(char: string): boolean {
+  return /^[0-9a-fA-F]$/.test(char)
+}
+
+function isIdentifierChar(char: string): boolean {
+  if (!char) return false
+  const codePoint = char.codePointAt(0) ?? 0
+  return /[\w-]/.test(char) || codePoint >= 0x80
+}
+
+function consumeCssEscape(
+  source: string,
+  slashIndex: number,
+): { decoded: string; end: number } | null {
+  if (source[slashIndex] !== '\\' || slashIndex + 1 >= source.length) return null
+
+  let index = slashIndex + 1
+  if (isHexDigit(source[index])) {
+    const hexStart = index
+    while (index < source.length && index - hexStart < 6 && isHexDigit(source[index])) {
+      index += 1
+    }
+    const codePoint = Number.parseInt(source.slice(hexStart, index), 16)
+    if (/\s/.test(source[index] ?? '')) index += 1
+    const decoded =
+      codePoint === 0 || codePoint > 0x10ffff
+        ? '\uFFFD'
+        : String.fromCodePoint(codePoint)
+    return { decoded, end: index }
+  }
+
+  const decoded = source[index]
+  return { decoded, end: index + 1 }
+}
+
+function readClassToken(
+  selector: string,
+  dotIndex: number,
+): Omit<CssSelectorClassToken, 'functionalDepth'> | null {
+  let index = dotIndex + 1
+  let name = ''
+
+  while (index < selector.length) {
+    const char = selector[index]
+    if (char === '\\') {
+      const escape = consumeCssEscape(selector, index)
+      if (!escape) break
+      name += escape.decoded
+      index = escape.end
+      continue
+    }
+    if (!isIdentifierChar(char)) break
+    name += char
+    index += char.length
+  }
+
+  if (!name) return null
+  return {
+    name,
+    start: dotIndex,
+    end: index,
+  }
+}
+
+/**
+ * Extract class selectors while ignoring dots inside quoted strings and
+ * attribute selectors. Functional pseudos remain searchable, so
+ * `:not(.disabled)` correctly contributes `disabled`.
+ */
+export function extractCssSelectorClasses(selector: string): CssSelectorClassToken[] {
+  const tokens: CssSelectorClassToken[] = []
+  let quote: '"' | "'" | null = null
+  let attributeDepth = 0
+  let functionalDepth = 0
+
+  for (let index = 0; index < selector.length; index += 1) {
+    const char = selector[index]
+    if (quote) {
+      if (char === '\\') index += 1
+      else if (char === quote) quote = null
+      continue
+    }
+    if (char === '"' || char === "'") {
+      quote = char
+      continue
+    }
+    if (char === '[') {
+      attributeDepth += 1
+      continue
+    }
+    if (char === ']') {
+      attributeDepth = Math.max(0, attributeDepth - 1)
+      continue
+    }
+    if (attributeDepth > 0) continue
+    if (char === '\\') {
+      const escape = consumeCssEscape(selector, index)
+      if (escape) index = escape.end - 1
+      continue
+    }
+    if (char === '(') {
+      functionalDepth += 1
+      continue
+    }
+    if (char === ')') {
+      functionalDepth = Math.max(0, functionalDepth - 1)
+      continue
+    }
+    if (char !== '.') continue
+
+    const token = readClassToken(selector, index)
+    if (!token) continue
+    tokens.push({ ...token, functionalDepth })
+    index = token.end - 1
+  }
+
+  return tokens
+}
+
+/** Split a selector list without treating commas inside functions/attrs as separators. */
+export function splitCssSelectorList(selector: string): string[] {
+  const parts: string[] = []
+  let start = 0
+  let quote: '"' | "'" | null = null
+  let bracketDepth = 0
+  let parenDepth = 0
+
+  for (let index = 0; index < selector.length; index += 1) {
+    const char = selector[index]
+    if (quote) {
+      if (char === '\\') index += 1
+      else if (char === quote) quote = null
+      continue
+    }
+    if (char === '"' || char === "'") {
+      quote = char
+      continue
+    }
+    if (char === '\\') {
+      index += 1
+      continue
+    }
+    if (char === '[') bracketDepth += 1
+    else if (char === ']') bracketDepth = Math.max(0, bracketDepth - 1)
+    else if (char === '(') parenDepth += 1
+    else if (char === ')') parenDepth = Math.max(0, parenDepth - 1)
+    else if (char === ',' && bracketDepth === 0 && parenDepth === 0) {
+      const part = selector.slice(start, index).trim()
+      if (part) parts.push(part)
+      start = index + 1
+    }
+  }
+
+  const tail = selector.slice(start).trim()
+  if (tail) parts.push(tail)
+  return parts
+}
+
+/**
+ * The class token a selector rule should expose in the class picker.
+ *
+ * The rightmost class selector is the styled subject for descendant variants
+ * (`.group:hover .group-hover\:block`). If every comma-list alternative has
+ * the same subject class, the whole list is bindable to that one class.
+ * Callers normally split lists first, but the all-equal behavior keeps this
+ * helper safe for hand-authored selector lists too.
+ */
+export function selectorBindingClassName(selector: string): string | null {
+  let binding: string | null = null
+  for (const part of splitCssSelectorList(selector)) {
+    const tokens = extractCssSelectorClasses(part).filter(
+      (token) => token.functionalDepth === 0,
+    )
+    const candidate = tokens.at(-1)?.name ?? null
+    if (!candidate) return null
+    if (binding !== null && binding !== candidate) return null
+    binding = candidate
+  }
+  return binding
+}
+
+/**
+ * Rename one decoded class token everywhere it appears in a selector.
+ * Replacement runs from right to left so offsets remain valid.
+ */
+export function replaceCssSelectorClassName(
+  selector: string,
+  fromName: string,
+  toEscapedName: string,
+): string {
+  const matches = extractCssSelectorClasses(selector).filter((token) => token.name === fromName)
+  let result = selector
+  for (let index = matches.length - 1; index >= 0; index -= 1) {
+    const token = matches[index]
+    result = `${result.slice(0, token.start + 1)}${toEscapedName}${result.slice(token.end)}`
+  }
+  return result
+}
diff --git a/src/core/page-tree/index.ts b/src/core/page-tree/index.ts
index 416288906..1f9d04ae1 100644
--- a/src/core/page-tree/index.ts
+++ b/src/core/page-tree/index.ts
@@ -28,6 +28,13 @@ export {
   classifySelectorCreateInput,
   parseStyleRule,
 } from './styleRule'
+export {
+  extractCssSelectorClasses,
+  replaceCssSelectorClassName,
+  selectorBindingClassName,
+  splitCssSelectorList,
+} from './cssSelectorClasses'
+export type { CssSelectorClassToken } from './cssSelectorClasses'
 export { SiteShellSchema } from './siteDocument'
 export {   parsePageTemplate } from './pageTemplate'
 
diff --git a/src/core/page-tree/styleRule.ts b/src/core/page-tree/styleRule.ts
index 5b6f05f8a..9414cfce4 100644
--- a/src/core/page-tree/styleRule.ts
+++ b/src/core/page-tree/styleRule.ts
@@ -3,13 +3,14 @@
  *
  * A `StyleRule` can be any CSS rule, discriminated by `kind`:
  *
- *   - `kind: 'class'` — the rule's selector is `.<name>`. It is attached to
- *     nodes via `node.classIds`; the publisher emits the name into the node's
- *     class attribute and the rule into the stylesheet. This is what the
- *     editor's ClassPicker manipulates.
+ *   - `kind: 'class'` — the rule is attached to nodes via `node.classIds`.
+ *     User-created rules use `.<name>`; imported utility variants may retain
+ *     a complex selector such as `.group:hover .group-hover\:block`, with
+ *     `name` identifying the rightmost bindable class. The publisher emits
+ *     that name into the node's class attribute and preserves the selector.
  *
  *   - `kind: 'ambient'` — the rule attaches by CSS matching, not by node
- *     assignment (e.g. `h1`, `h1 > span`, `.hero .title`, `a:hover`). The
+ *     assignment (e.g. `h1`, `h1 > span`, `a:hover`). The
  *     publisher emits the rule into the stylesheet only; nothing changes on
  *     node `class=` attributes. Used by the CSS importer and "Add ambient
  *     selector" affordance.
@@ -70,9 +71,9 @@ export const StyleRuleSchema = Type.Object({
   /**
    * The CSS selector expression emitted verbatim into the published
    * stylesheet:
-   *   - kind:'class'   → `.<escaped-name>` (always derived from `name`; not
-   *                      user-edited; kept on the object so the publisher and
-   *                      canvas can call `styleRuleSelector(rule)` uniformly).
+   *   - kind:'class'   → contains the escaped `name` class token; imported
+   *                      variants may include combinators, pseudo-classes, or
+   *                      dependency classes around that binding token.
    *   - kind:'ambient' → any valid selector (`h1`, `h1 > span`, `.hero .title`,
    *                      `a:hover`, `[data-x="y"]`, ...).
    *
diff --git a/src/core/publisher/cssCollector.ts b/src/core/publisher/cssCollector.ts
index c9ac8d4ce..d09d9b302 100644
--- a/src/core/publisher/cssCollector.ts
+++ b/src/core/publisher/cssCollector.ts
@@ -19,9 +19,9 @@
  */
 
 import type { SiteDocument } from '@core/page-tree'
-import { isGeneratedClass } from '@core/page-tree'
 import { generateClassCSS } from './classCss'
 import type { ResponsiveCssOptions } from './responsiveBackground'
+import { collectUsedStyleRuleIds, treeShakeStyleRules } from './styleRuleTreeShake'
 
 /**
  * Collect all user-authored CSS class declarations for the classes referenced
@@ -40,59 +40,10 @@ export function collectClassCSS(site: SiteDocument, options: ResponsiveCssOption
   // Defensive guard: corrupted/partial snapshots may have classes undefined
   if (!site.styleRules) return ''
 
-  // Collect the set of used classIds across all pages
-  const usedClassIds = new Set<string>()
-  for (const page of site.pages) {
-    for (const node of Object.values(page.nodes)) {
-      if (node.classIds) {
-        for (const id of node.classIds) {
-          usedClassIds.add(id)
-        }
-      }
-    }
-  }
-
-  // Also collect classIds from all VisualComponent trees. VC nodes are rendered
-  // inline by the publisher (renderVisualComponentRef) but live outside page.nodes —
-  // their classIds must be collected separately so the CSS rules are included.
-  if (site.visualComponents) {
-    for (const vc of site.visualComponents) {
-      // VC-level classIds (the component container)
-      if (vc.classIds) {
-        for (const id of vc.classIds) {
-          usedClassIds.add(id)
-        }
-      }
-      // Collect from the VC's flat node tree
-      for (const node of Object.values(vc.tree.nodes)) {
-        if (node.classIds) {
-          for (const id of node.classIds) {
-            usedClassIds.add(id)
-          }
-        }
-      }
-    }
-  }
-
-  // Build the filtered set of style rules to emit. Two contributions:
-  //   1. class-kind rules referenced by any node's classIds (tree-shaken).
-  //   2. EVERY ambient-kind rule (e.g. `h1`, `.hero .title`, `a:hover`) —
-  //      ambient rules attach by CSS matching, not by node assignment, so
-  //      tree-shaking by classIds would silently drop them.
-  // Framework-generated utility classes are excluded here; they ride through
-  // `framework.css` via `generateFrameworkCss()`.
-  const usedClasses: SiteDocument['styleRules'] = {}
-  for (const id of usedClassIds) {
-    const cls = site.styleRules[id]
-    if (!cls || isGeneratedClass(cls)) continue
-    if (cls.kind && cls.kind !== 'class') continue // ambient ids never land here
-    usedClasses[id] = cls
-  }
-  for (const cls of Object.values(site.styleRules)) {
-    if (cls.kind !== 'ambient') continue
-    if (isGeneratedClass(cls)) continue
-    usedClasses[cls.id] = cls
-  }
+  const usedClasses = treeShakeStyleRules(
+    site.styleRules,
+    collectUsedStyleRuleIds(site),
+  )
 
   if (Object.keys(usedClasses).length === 0) return ''
 
diff --git a/src/core/publisher/index.ts b/src/core/publisher/index.ts
index a3926559f..b66205279 100644
--- a/src/core/publisher/index.ts
+++ b/src/core/publisher/index.ts
@@ -58,6 +58,12 @@ export {
 export type { ResponsiveCssOptions } from './responsiveBackground'
 
 export { collectClassCSS, CssCollector, sanitizeModuleCSS } from './cssCollector'
+export {
+  collectUsedStyleRuleIds,
+  treeShakeStyleRules,
+  treeShakeStyleRulesBySignature,
+  usedStyleRuleIdSignature,
+} from './styleRuleTreeShake'
 
 export { buildSiteFrameworkCss, generateFrameworkCss } from './frameworkCss'
 
diff --git a/src/core/publisher/styleRuleTreeShake.ts b/src/core/publisher/styleRuleTreeShake.ts
new file mode 100644
index 000000000..8033396bb
--- /dev/null
+++ b/src/core/publisher/styleRuleTreeShake.ts
@@ -0,0 +1,133 @@
+import {
+  extractCssSelectorClasses,
+  isGeneratedClass,
+  splitCssSelectorList,
+  type SiteDocument,
+  type StyleRule,
+} from '@core/page-tree'
+
+/** Collect every registry class id referenced by page and Visual Component nodes. */
+export function collectUsedStyleRuleIds(
+  site: Pick<SiteDocument, 'pages' | 'visualComponents'>,
+): Set<string> {
+  const usedIds = new Set<string>()
+  for (const page of site.pages) {
+    for (const node of Object.values(page.nodes)) {
+      for (const id of node.classIds ?? []) usedIds.add(id)
+    }
+  }
+  for (const component of site.visualComponents ?? []) {
+    for (const id of component.classIds ?? []) usedIds.add(id)
+    for (const node of Object.values(component.tree.nodes)) {
+      for (const id of node.classIds ?? []) usedIds.add(id)
+    }
+  }
+  return usedIds
+}
+
+/**
+ * A stable primitive signature suitable for store subscriptions. It changes
+ * only when the set of assigned class ids changes, not for unrelated edits.
+ */
+export function usedStyleRuleIdSignature(
+  site: Pick<SiteDocument, 'pages' | 'visualComponents'>,
+): string {
+  return [...collectUsedStyleRuleIds(site)].sort().join('\0')
+}
+
+function selectorPartCanMatch(
+  selector: string,
+  knownClassNames: ReadonlySet<string>,
+  usedClassNames: ReadonlySet<string>,
+): boolean {
+  for (const token of extractCssSelectorClasses(selector)) {
+    if (knownClassNames.has(token.name) && !usedClassNames.has(token.name)) {
+      return false
+    }
+  }
+  return true
+}
+
+function selectorCanMatch(
+  selector: string,
+  knownClassNames: ReadonlySet<string>,
+  usedClassNames: ReadonlySet<string>,
+): boolean {
+  return splitCssSelectorList(selector).some((part) =>
+    selectorPartCanMatch(part, knownClassNames, usedClassNames),
+  )
+}
+
+/**
+ * Select only registry rules that can affect the current document trees.
+ *
+ * Class rules require their assignment id and every known class dependency in
+ * their selector. Ambient selector fragments require every known dependency
+ * in at least one selector-list alternative. Class-free selectors and raw
+ * stylesheet blocks stay conservative because their reach cannot be inferred
+ * from node class ids alone.
+ */
+export function treeShakeStyleRules(
+  styleRules: Record<string, StyleRule>,
+  usedIds: ReadonlySet<string>,
+): Record<string, StyleRule> {
+  const knownClassNames = new Set<string>()
+  const usedClassNames = new Set<string>()
+
+  for (const rule of Object.values(styleRules)) {
+    if (rule.kind !== 'class') continue
+    knownClassNames.add(rule.name)
+    if (usedIds.has(rule.id)) usedClassNames.add(rule.name)
+  }
+
+  const selected: Record<string, StyleRule> = {}
+  for (const rule of Object.values(styleRules)) {
+    if (isGeneratedClass(rule)) continue
+
+    if (rule.kind === 'class') {
+      if (
+        usedIds.has(rule.id)
+        && selectorCanMatch(rule.selector, knownClassNames, usedClassNames)
+      ) {
+        selected[rule.id] = rule
+      }
+      continue
+    }
+
+    if (
+      rule.rawCss
+      || selectorCanMatch(rule.selector, knownClassNames, usedClassNames)
+    ) {
+      selected[rule.id] = rule
+    }
+  }
+  return selected
+}
+
+let lastStyleRules: Record<string, StyleRule> | null = null
+let lastUsedIdSignature = ''
+let lastTreeShakenRules: Record<string, StyleRule> = {}
+
+/**
+ * Identity/signature-memoized entry for the multi-frame editor canvas. Every
+ * frame sees the same immutable registry snapshot, so a 40k-rule Tailwind
+ * registry is filtered once per change rather than once per iframe.
+ */
+export function treeShakeStyleRulesBySignature(
+  styleRules: Record<string, StyleRule>,
+  usedIdSignature: string,
+): Record<string, StyleRule> {
+  if (
+    styleRules === lastStyleRules
+    && usedIdSignature === lastUsedIdSignature
+  ) {
+    return lastTreeShakenRules
+  }
+  const usedIds = usedIdSignature
+    ? new Set(usedIdSignature.split('\0'))
+    : new Set<string>()
+  lastTreeShakenRules = treeShakeStyleRules(styleRules, usedIds)
+  lastStyleRules = styleRules
+  lastUsedIdSignature = usedIdSignature
+  return lastTreeShakenRules
+}
diff --git a/src/core/siteImport/buildPlan.ts b/src/core/siteImport/buildPlan.ts
index 6b3abf00c..390585db0 100644
--- a/src/core/siteImport/buildPlan.ts
+++ b/src/core/siteImport/buildPlan.ts
@@ -11,7 +11,11 @@
  * threading more state through a 250-line body.
  */
 
-import type { SiteDocument } from '@core/page-tree'
+import {
+  classKindSelector,
+  extractCssSelectorClasses,
+  type SiteDocument,
+} from '@core/page-tree'
 import { compareVariants } from '@core/fonts'
 import { expandLinkedCssImports } from './cssImports'
 import { extractGoogleFontImports } from './fontImports'
@@ -19,7 +23,7 @@ import { classifyFiles } from './classifyFiles'
 import { makeHtmlPagePlan } from './htmlPagePlan'
 import { buildAssetPlan, type CssFileResult } from './assetPlan'
 import { partitionLinkedStylesheets } from './stylesheetPlan'
-import { detectCrossSheetClassConflicts, isSharedUtilityClassName } from './classCascades'
+import { detectCrossSheetClassConflicts } from './classCascades'
 import { detectConflicts } from './conflicts'
 import { createCssPlanState, parseCssSourceIntoPlan } from './planCss'
 import { rewriteNpmCdnModuleImports } from './scriptDependencies'
@@ -150,9 +154,9 @@ export function buildImportPlan({ fileMap, currentSite, options }: BuildImportPl
     cssPlan.cssFileResults,
     existingClassNames,
   )
-  const publishableCssFileResults = preserveGloballyMatchedClassRules(
-    rawPagePlans,
+  const publishableCssFileResults = addSelectorDependencyClasses(
     cssPlan.cssFileResults,
+    currentSite,
   )
 
   // 5. Build asset plan — normalises URLs in node props, CSS values, and kept
@@ -309,45 +313,83 @@ function expandConvertedCssSources(
 }
 
 // ---------------------------------------------------------------------------
-// Phase 4b helper — keep runtime-only / shared-utility class rules ambient
+// Phase 4b helper — make every selector class available to the class picker
 // ---------------------------------------------------------------------------
 
-function preserveGloballyMatchedClassRules(
-  pagePlans: PagePlan[],
+const INVALID_CLASS_ATTRIBUTE_TOKEN_RE = /[\s\u007f]/u
+
+/**
+ * Complex selectors expose their rightmost class as their bindable class rule
+ * (`.group:hover .group-hover\:block` binds `group-hover:block`). Ancestor and
+ * dependency classes such as `group`, `peer`, or `dark` may never own a
+ * declaration block of their own, but users still need to pick and assign
+ * them. Add one bare registry class for every selector class name that has no
+ * bindable rule in the incoming CSS or existing site.
+ *
+ * Bare entries add no CSS. They are assignment/index records; the publisher's
+ * selector-dependency tree-shaker emits ambient fragments when their known
+ * class dependencies are in use.
+ */
+function addSelectorDependencyClasses(
   cssFileResults: CssFileResult[],
+  currentSite: SiteDocument,
 ): CssFileResult[] {
-  // Class-kind rules are tree-shaken by the publisher unless a node owns their
-  // class id. Runtime-only classes and shared utility fragments must instead
-  // remain ambient selectors: scripts may add the former later, and utilities
-  // like `.row` need every source rule even though nodes only link one token.
-  const usedClassNames = collectImportedNodeClassNames(pagePlans)
-  return cssFileResults.map((file) => {
-    let changed = false
-    const rules = file.rules.map((rule) => {
-      if (rule.kind !== 'class') return rule
-      if (isSharedUtilityClassName(rule.name) || !usedClassNames.has(rule.name)) {
-        changed = true
-        return {
-          ...rule,
-          kind: 'ambient' as const,
-          name: rule.selector,
+  const bindableNames = new Set(
+    Object.values(currentSite.styleRules)
+      .filter((rule) => rule.kind === 'class')
+      .map((rule) => rule.name),
+  )
+  for (const file of cssFileResults) {
+    for (const rule of file.rules) {
+      if (rule.kind === 'class') bindableNames.add(rule.name)
+    }
+  }
+
+  const firstSourceByMissingName = new Map<string, number>()
+  for (let fileIndex = 0; fileIndex < cssFileResults.length; fileIndex += 1) {
+    for (const rule of cssFileResults[fileIndex].rules) {
+      if (rule.rawCss) continue
+      for (const token of extractCssSelectorClasses(rule.selector)) {
+        if (
+          bindableNames.has(token.name)
+          || firstSourceByMissingName.has(token.name)
+          || INVALID_CLASS_ATTRIBUTE_TOKEN_RE.test(token.name)
+        ) {
+          continue
         }
+        firstSourceByMissingName.set(token.name, fileIndex)
       }
-      return rule
-    })
-    return changed ? { ...file, rules } : file
-  })
-}
-
-function collectImportedNodeClassNames(pagePlans: PagePlan[]): Set<string> {
-  const names = new Set<string>()
-  for (const page of pagePlans) {
-    for (const className of page.nodeFragment.body?.classIds ?? []) names.add(className)
-    for (const node of Object.values(page.nodeFragment.nodes)) {
-      for (const className of node.classIds ?? []) names.add(className)
     }
   }
-  return names
+
+  if (firstSourceByMissingName.size === 0) return cssFileResults
+
+  const additionsByFile = new Map<number, string[]>()
+  for (const [name, fileIndex] of firstSourceByMissingName) {
+    const names = additionsByFile.get(fileIndex) ?? []
+    names.push(name)
+    additionsByFile.set(fileIndex, names)
+  }
+
+  return cssFileResults.map((file, fileIndex) => {
+    const additions = additionsByFile.get(fileIndex)
+    if (!additions?.length) return file
+    const baseOrder = file.rules.length
+    return {
+      ...file,
+      rules: [
+        ...file.rules,
+        ...additions.map((name, index) => ({
+          name,
+          kind: 'class' as const,
+          selector: classKindSelector(name),
+          order: baseOrder + index,
+          styles: {},
+          contextStyles: {},
+        })),
+      ],
+    }
+  })
 }
 
 // ---------------------------------------------------------------------------
diff --git a/src/core/siteImport/classCascades.ts b/src/core/siteImport/classCascades.ts
index ded445803..211fb245b 100644
--- a/src/core/siteImport/classCascades.ts
+++ b/src/core/siteImport/classCascades.ts
@@ -36,6 +36,10 @@ import type {
   PagePlan,
 } from './types'
 import type { CssFileResult } from './assetPlan'
+import {
+  classKindSelector,
+  replaceCssSelectorClassName,
+} from '@core/page-tree'
 import {
   createCascadedStyleRuleLayers,
   mergeStyleRuleCascade,
@@ -335,7 +339,7 @@ function materialiseRenamedClass(
     styleRules.push({
       kind: 'class',
       name: newName,
-      selector: `.${newName}`,
+      selector: classKindSelector(newName),
       order: 0,
       styles: merged.styles as NewStyleRule['styles'],
       ...(sparsePriorities(merged.stylePriorities)
@@ -483,14 +487,17 @@ function renamePageClassTokens(page: PagePlan, from: string, to: string): PagePl
   return { ...page, nodeFragment: { ...page.nodeFragment, nodes, ...(body ? { body } : {}) } }
 }
 
-/** A class token in a selector: a `.` followed by a CSS identifier. */
-const SELECTOR_CLASS_TOKEN_RE = /\.(-?[A-Za-z_][\w-]*)/g
-
 function rewriteSelectorClassTokens(selector: string, renames: Map<string, string>): string {
-  return selector.replace(SELECTOR_CLASS_TOKEN_RE, (whole, token: string) => {
-    const next = renames.get(token)
-    return next && next !== token ? `.${next}` : whole
-  })
+  let rewritten = selector
+  for (const [fromName, toName] of renames) {
+    if (fromName === toName) continue
+    rewritten = replaceCssSelectorClassName(
+      rewritten,
+      fromName,
+      classKindSelector(toName).slice(1),
+    )
+  }
+  return rewritten
 }
 
 /** Deterministic JSON with sorted object keys (arrays keep their order). */
diff --git a/src/core/siteImport/conflicts.ts b/src/core/siteImport/conflicts.ts
index 2bf40287f..367ea6474 100644
--- a/src/core/siteImport/conflicts.ts
+++ b/src/core/siteImport/conflicts.ts
@@ -29,7 +29,12 @@ import type {
   ImportColorToken,
   ImportFontToken,
 } from './types'
-import type { SiteDocument, PageNode } from '@core/page-tree'
+import {
+  classKindSelector,
+  replaceCssSelectorClassName,
+  type SiteDocument,
+  type PageNode,
+} from '@core/page-tree'
 import type { ImportFragment } from '@core/htmlImport'
 import { normalizeFrameworkColorSlug } from '@core/framework'
 import { normalizeFontTokenVariable } from '@core/fonts'
@@ -420,8 +425,17 @@ function resolveStyleRules(
       // `skip` keeps the original name (binds to the pre-existing rule).
       if (res && res.action !== 'skip') {
         const resolvedName = res.resolvedName ?? rule.name
-        // The selector must stay in sync with the name for class-kind rules.
-        next = { ...next, name: resolvedName, selector: `.${resolvedName}` }
+        // Preserve imported selector structure while moving its decoded
+        // binding token to the resolved class name.
+        next = {
+          ...next,
+          name: resolvedName,
+          selector: replaceCssSelectorClassName(
+            rule.selector,
+            rule.name,
+            classKindSelector(resolvedName).slice(1),
+          ),
+        }
       }
     } else if (classRenames.size > 0) {
       next = rewriteAmbientRuleClassRefs(rule, classRenames)
@@ -532,13 +546,17 @@ function rewriteAmbientRuleClassRefs(
   }
 }
 
-const SELECTOR_CLASS_TOKEN_RE = /\.(-?[A-Za-z_][\w-]*)/g
-
 function rewriteSelectorClasses(selector: string, classRenames: Map<string, string>): string {
-  return selector.replace(SELECTOR_CLASS_TOKEN_RE, (whole, token: string) => {
-    const renamed = classRenames.get(token)
-    return renamed && renamed !== token ? `.${renamed}` : whole
-  })
+  let rewritten = selector
+  for (const [fromName, toName] of classRenames) {
+    if (fromName === toName) continue
+    rewritten = replaceCssSelectorClassName(
+      rewritten,
+      fromName,
+      classKindSelector(toName).slice(1),
+    )
+  }
+  return rewritten
 }
 
 /**
diff --git a/src/core/siteImport/cssToStyleRules.ts b/src/core/siteImport/cssToStyleRules.ts
index 218201b69..5a4f072a0 100644
--- a/src/core/siteImport/cssToStyleRules.ts
+++ b/src/core/siteImport/cssToStyleRules.ts
@@ -38,8 +38,13 @@
  */
 
 import type { StyleRuleKind, Condition, ConditionDef } from '@core/page-tree'
-import { conditionId, makeConditionDef } from '@core/page-tree'
-import { formatVariant } from '@core/fonts'
+import {
+  classKindSelector,
+  conditionId,
+  makeConditionDef,
+  selectorBindingClassName,
+  splitCssSelectorList,
+} from '@core/page-tree'
 import { processKeyframesRule } from './keyframesToStyleRule'
 import { encodeSubstitutionDeclarations } from '@core/css-substitution'
 import { matchMediaQueryToViewport } from './mediaQueryMatch'
@@ -49,6 +54,7 @@ import {
   sparsePriorities,
 } from './declarationCascade'
 import { parseStyleDeclarations } from './cssDeclarationReader'
+import { extractUrlPayloads, parseFontFaceRule } from './fontFaceParser'
 import type {
   ImportWarning,
   BreakpointHint,
@@ -125,20 +131,9 @@ function truncate(text: string, maxLen = 120): string {
   return `${text.slice(0, maxLen)}…`
 }
 
-/**
- * A single `.class-name` selector with no compound selectors, no combinators,
- * and no pseudo-classes/elements.
- *
- * Matches: `.foo`, `.btn-primary`, `.my_class`
- * Doesn't match: `.foo.bar`, `.foo .bar`, `h1`, `a:hover`, `[data-x]`, `.foo::after`
- */
-const SINGLE_CLASS_RE = /^\.[a-zA-Z_][\w-]*$/
-
 function classifySelector(selector: string): { kind: StyleRuleKind; name: string } {
-  if (SINGLE_CLASS_RE.test(selector)) {
-    // kind:'class' — selector is `.<name>`, name is the part after the dot
-    return { kind: 'class', name: selector.slice(1) }
-  }
+  const bindingClassName = selectorBindingClassName(selector)
+  if (bindingClassName) return { kind: 'class', name: bindingClassName }
   // kind:'ambient' — the selector text IS the display name
   return { kind: 'ambient', name: selector }
 }
@@ -158,23 +153,6 @@ function getSheetConstructor(): typeof CSSStyleSheet | null {
   return null
 }
 
-/**
- * Read all `url(...)` payloads from a CSS declaration value.
- * Handles single-quoted, double-quoted, and unquoted forms.
- * Handles multiple urls per value (e.g. `background: url(a) url(b)`).
- */
-function extractUrlPayloads(value: string): string[] {
-  const result: string[] = []
-  // Captures: group 1 = optional quote char, group 2 = url content (excl. quotes/parens)
-  const re = /url\(\s*(['"]?)([^'")\n]*)\1\s*\)/g
-  let m: RegExpExecArray | null
-  while ((m = re.exec(value)) !== null) {
-    const rawUrl = m[2].trim()
-    if (rawUrl) result.push(rawUrl)
-  }
-  return result
-}
-
 /**
  * Scan a declarations map for `url(...)` values and append AssetRef entries.
  */
@@ -310,9 +288,67 @@ export function cssToStyleRules(
     }
   }
 
+  normalizeParsedBindableClassRules(rules)
   return { rules, warnings, assetRefs, conditions: [...conditionsById.values()], fontFaces }
 }
 
+/**
+ * Keep one assignable registry rule per decoded class name within a source
+ * file. Prefer its canonical bare selector when present; preserve every other
+ * selector fragment as ambient CSS so state/vendor/structural variants retain
+ * source order and become dependency-tree-shakeable with that class.
+ */
+function normalizeParsedBindableClassRules(rules: NewStyleRule[]): void {
+  const primaryIndexByName = new Map<string, number>()
+  for (let index = 0; index < rules.length; index += 1) {
+    const rule = rules[index]
+    if (rule.kind !== 'class') continue
+    const primaryIndex = primaryIndexByName.get(rule.name)
+    if (primaryIndex === undefined) {
+      primaryIndexByName.set(rule.name, index)
+      continue
+    }
+
+    const primary = rules[primaryIndex]
+    const canonicalSelector = classKindSelector(rule.name)
+    if (
+      rule.selector === canonicalSelector
+      && primary.selector !== canonicalSelector
+    ) {
+      rules[primaryIndex] = {
+        ...primary,
+        kind: 'ambient',
+        name: primary.selector,
+      }
+      primaryIndexByName.set(rule.name, index)
+      continue
+    }
+
+    rules[index] = {
+      ...rule,
+      kind: 'ambient',
+      name: rule.selector,
+    }
+  }
+}
+
+/**
+ * Preserve class-free lists and lists sharing one binding as one CSS rule.
+ * Split only when alternatives have different binding ownership; that gives
+ * each picker class an independent registry entry without fragmenting resets.
+ */
+function selectorsForStorage(selectorList: string): string[] {
+  const parts = splitCssSelectorList(selectorList)
+  if (parts.length <= 1) return parts
+  const bindings = parts.map(selectorBindingClassName)
+  if (bindings.every((binding) => binding === null)) return [selectorList]
+  const first = bindings[0]
+  if (first !== null && bindings.every((binding) => binding === first)) {
+    return [selectorList]
+  }
+  return parts
+}
+
 // ---------------------------------------------------------------------------
 // Top-level rule processing
 // ---------------------------------------------------------------------------
@@ -436,45 +472,6 @@ function processTopLevelRule(
   }
 }
 
-/**
- * Strip surrounding quotes from a parsed `font-family` descriptor value.
- * `"Acme Sans"` → `Acme Sans`; `Acme Sans` → `Acme Sans`.
- */
-function unquoteFamily(value: string): string {
-  const trimmed = value.trim()
-  if (
-    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
-    (trimmed.startsWith("'") && trimmed.endsWith("'"))
-  ) {
-    return trimmed.slice(1, -1).trim()
-  }
-  return trimmed
-}
-
-/**
- * Map an `@font-face` `font-weight` + `font-style` descriptor pair to a
- * canonical variant tag ("400", "700italic", …).
- *
- * `font-weight` may be a keyword (`normal`/`bold`), a number, or a variable-font
- * range (`100 900`) — we take the first numeric token, defaulting to 400.
- * `font-style` counts as italic when it's `italic` or `oblique`.
- */
-function fontFaceVariant(decl: CSSStyleDeclaration): string {
-  const weightRaw = (decl.getPropertyValue('font-weight') || '').trim().toLowerCase()
-  const styleRaw = (decl.getPropertyValue('font-style') || '').trim().toLowerCase()
-
-  let weight = 400
-  if (weightRaw === 'bold') weight = 700
-  else if (weightRaw === 'normal' || weightRaw === '') weight = 400
-  else {
-    const firstNumber = weightRaw.match(/\d{2,3}/)
-    if (firstNumber) weight = Number(firstNumber[0])
-  }
-
-  const italic = styleRaw.startsWith('italic') || styleRaw.startsWith('oblique')
-  return formatVariant({ weight, italic })
-}
-
 /**
  * Capture one `@font-face` block:
  *   - record every `src: url(...)` payload as an assetRef so the binaries
@@ -491,31 +488,19 @@ function collectFontFace(
   syntheticRuleIndex: number,
   fontFaces: ParsedFontFace[],
 ): void {
-  const decl = rule.style
-  if (!decl) return
-  const srcValue = decl.getPropertyValue('src')
-  if (!srcValue) return
+  const parsed = parseFontFaceRule(rule)
+  if (!parsed) return
 
   // Upload every referenced binary (existing behavior) so even an unmodellable
   // face leaves its files in the media library.
   collectAssetRefsFromDecls(
-    { src: srcValue } as unknown as Record<string, string>,
+    { src: parsed.srcValue },
     syntheticRuleIndex,
     undefined,
     assetRefs,
   )
 
-  const family = unquoteFamily(decl.getPropertyValue('font-family') || '')
-  const srcUrls = extractUrlPayloads(srcValue)
-  if (!family || srcUrls.length === 0) return
-
-  const unicodeRange = (decl.getPropertyValue('unicode-range') || '').trim()
-  fontFaces.push({
-    family,
-    variant: fontFaceVariant(decl),
-    srcUrls,
-    ...(unicodeRange ? { unicodeRange } : {}),
-  })
+  if (parsed.fontFace) fontFaces.push(parsed.fontFace)
 }
 
 // ---------------------------------------------------------------------------
@@ -530,10 +515,31 @@ function processBaseStyleRule(
   selectorToLastIndex: Map<string, number>,
   seenClassSelectors: Set<string>,
 ): void {
-  const selector = rule.selectorText.trim()
-  const classified = classifySelector(selector)
-  const declarations = parseStyleDeclarations(rule.style, selector, warnings)
+  const selectorList = rule.selectorText.trim()
+  const declarations = parseStyleDeclarations(rule.style, selectorList, warnings)
+  for (const selector of selectorsForStorage(selectorList)) {
+    processBaseSelector(
+      selector,
+      declarations,
+      rules,
+      warnings,
+      assetRefs,
+      selectorToLastIndex,
+      seenClassSelectors,
+    )
+  }
+}
 
+function processBaseSelector(
+  selector: string,
+  declarations: ReturnType<typeof parseStyleDeclarations>,
+  rules: NewStyleRule[],
+  warnings: ImportWarning[],
+  assetRefs: AssetRef[],
+  selectorToLastIndex: Map<string, number>,
+  seenClassSelectors: Set<string>,
+): void {
+  const classified = classifySelector(selector)
   if (classified.kind === 'class') {
     if (seenClassSelectors.has(selector)) {
       // Duplicate class: later-in-source wins. Update existing rule's styles.
@@ -660,29 +666,31 @@ function processConditionInner(
     if (inner.type !== STYLE_RULE_TYPE) continue
 
     const innerStyle = inner as CSSStyleRule
-    const selector = innerStyle.selectorText.trim()
-    const declarations = parseStyleDeclarations(innerStyle.style, selector, warnings)
-
-    // Find or create the rule for this selector
-    let idx: number
-    if (selectorToLastIndex.has(selector)) {
-      idx = selectorToLastIndex.get(selector)!
-    } else {
-      const classified = classifySelector(selector)
-      idx = rules.length
-      rules.push({
-        name: classified.name,
-        kind: classified.kind,
-        selector,
-        order: idx,
-        styles: {},
-        contextStyles: {},
-      })
-      selectorToLastIndex.set(selector, idx)
-      if (classified.kind === 'class') seenClassSelectors.add(selector)
-    }
+    const selectorList = innerStyle.selectorText.trim()
+    const declarations = parseStyleDeclarations(innerStyle.style, selectorList, warnings)
+
+    for (const selector of selectorsForStorage(selectorList)) {
+      // Find or create the rule for this selector
+      let idx: number
+      if (selectorToLastIndex.has(selector)) {
+        idx = selectorToLastIndex.get(selector)!
+      } else {
+        const classified = classifySelector(selector)
+        idx = rules.length
+        rules.push({
+          name: classified.name,
+          kind: classified.kind,
+          selector,
+          order: idx,
+          styles: {},
+          contextStyles: {},
+        })
+        selectorToLastIndex.set(selector, idx)
+        if (classified.kind === 'class') seenClassSelectors.add(selector)
+      }
 
-    mergeRuleContextDeclarations(rules[idx], contextId, declarations)
-    collectAssetRefsFromDecls(declarations.styles, idx, contextId, assetRefs)
+      mergeRuleContextDeclarations(rules[idx], contextId, declarations)
+      collectAssetRefsFromDecls(declarations.styles, idx, contextId, assetRefs)
+    }
   }
 }
diff --git a/src/core/siteImport/fontFaceParser.ts b/src/core/siteImport/fontFaceParser.ts
new file mode 100644
index 000000000..b39444233
--- /dev/null
+++ b/src/core/siteImport/fontFaceParser.ts
@@ -0,0 +1,75 @@
+import { formatVariant } from '@core/fonts'
+import type { ParsedFontFace } from './types'
+
+/**
+ * Read every url(...) payload from a declaration value. The CSSOM has already
+ * validated the declaration, so this scanner only needs to preserve the
+ * quoted or unquoted payloads for later asset resolution.
+ */
+export function extractUrlPayloads(value: string): string[] {
+  const result: string[] = []
+  const pattern = /url\(\s*(['"]?)([^'")\n]*)\1\s*\)/g
+  let match: RegExpExecArray | null
+  while ((match = pattern.exec(value)) !== null) {
+    const rawUrl = match[2].trim()
+    if (rawUrl) result.push(rawUrl)
+  }
+  return result
+}
+
+function unquoteFamily(value: string): string {
+  const trimmed = value.trim()
+  if (
+    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+    (trimmed.startsWith("'") && trimmed.endsWith("'"))
+  ) {
+    return trimmed.slice(1, -1).trim()
+  }
+  return trimmed
+}
+
+function fontFaceVariant(declarations: CSSStyleDeclaration): string {
+  const weightRaw = (declarations.getPropertyValue('font-weight') || '').trim().toLowerCase()
+  const styleRaw = (declarations.getPropertyValue('font-style') || '').trim().toLowerCase()
+
+  let weight = 400
+  if (weightRaw === 'bold') weight = 700
+  else if (weightRaw !== 'normal' && weightRaw !== '') {
+    const firstNumber = weightRaw.match(/\d{2,3}/)
+    if (firstNumber) weight = Number(firstNumber[0])
+  }
+
+  const italic = styleRaw.startsWith('italic') || styleRaw.startsWith('oblique')
+  return formatVariant({ weight, italic })
+}
+
+export interface ParsedFontFaceRule {
+  srcValue: string
+  fontFace: ParsedFontFace | null
+}
+
+/**
+ * Parse the modelled part of one @font-face block. The caller owns asset-ref
+ * collection because it needs the final style-rule index for URL rewriting.
+ */
+export function parseFontFaceRule(rule: CSSFontFaceRule): ParsedFontFaceRule | null {
+  const declarations = rule.style
+  if (!declarations) return null
+  const srcValue = declarations.getPropertyValue('src')
+  if (!srcValue) return null
+
+  const family = unquoteFamily(declarations.getPropertyValue('font-family') || '')
+  const srcUrls = extractUrlPayloads(srcValue)
+  if (!family || srcUrls.length === 0) return { srcValue, fontFace: null }
+
+  const unicodeRange = (declarations.getPropertyValue('unicode-range') || '').trim()
+  return {
+    srcValue,
+    fontFace: {
+      family,
+      variant: fontFaceVariant(declarations),
+      srcUrls,
+      ...(unicodeRange ? { unicodeRange } : {}),
+    },
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
index 24432c221..3adf8db7d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,10 @@ import react, { reactCompilerPreset } from '@vitejs/plugin-react'
 import babel from '@rolldown/plugin-babel'
 import path from 'path'
 import type { IncomingMessage, ServerResponse } from 'node:http'
+import {
+  proxyLargeDevRequest,
+  shouldBufferLargeDevProxyRequest,
+} from './scripts/lib/largeBodyDevProxy'
 
 const CMS_DEV_SERVER_ORIGIN = `http://localhost:${process.env.PORT ?? '3001'}`
 const FILE_EXTENSION_RE = /\.[a-zA-Z0-9]+$/
@@ -101,6 +105,32 @@ function publicSiteDevProxyPlugin(): Plugin {
   }
 }
 
+/**
+ * Work around a Bun-hosted Vite proxy backpressure deadlock for large request
+ * CMS bodies. Small and non-CMS requests keep using Vite's native proxy,
+ * including streaming AI responses; only known-length CMS bodies of at least
+ * 1 MiB take the bounded buffer-and-forward path.
+ */
+function largeBodyDevProxyPlugin(): Plugin {
+  return {
+    name: 'instatic-large-body-dev-proxy',
+    apply: 'serve',
+
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (!shouldBufferLargeDevProxyRequest(req)) {
+          next()
+          return
+        }
+
+        void proxyLargeDevRequest(req, res, CMS_DEV_SERVER_ORIGIN).catch((err) => {
+          next(err)
+        })
+      })
+    },
+  }
+}
+
 // Stable vendor chunk groups for long-term browser caching. Vendor code
 // rarely changes, so isolating it from the app code means returning users
 // re-download only the (small) app chunks when we ship a new build.
@@ -166,6 +196,7 @@ function vendorChunkName(moduleId: string): string | null {
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    largeBodyDevProxyPlugin(),
     publicSiteDevProxyPlugin(),
     react(),
     babel({ presets: [reactCompilerPreset()] }),