@elytracms/studio 0.0.62 → 0.0.64

package/dist/components/builder/canvas-chrome-css.js

@@ -0,0 +1,164 @@
+import { PRESERVE_NODE_ATTR } from '@elytracms/core/rich-text';
+/**
+ * Injected FIRST into the canvas head (before the `ec-app-css` link): a bare
+ * layer STATEMENT that pins `ec-canvas-backdrop` to the very bottom of the
+ * document's layer order (layer order is first-occurrence order). The new-world
+ * backdrop rules live in this layer, so they lose to EVERYTHING the consumer
+ * ships — `@layer base` body rules, unlayered rules, later layers — and only
+ * paint when the consumer paints nothing. (An unlayered backdrop would ALWAYS
+ * beat the consumer's layered `@layer base body { background }` — the exact
+ * NK-004 mechanism this task retires.) Inert in the legacy world: the legacy
+ * chrome CSS puts nothing in the layer.
+ */
+export const CANVAS_BACKDROP_LAYER_STATEMENT = '@layer ec-canvas-backdrop;';
+/**
+ * NEW-world backdrop (AD-B item 4): the studio-utility body-class default is
+ * retired; these neutral hand-written rules give the canvas a light, site-like
+ * page when the consumer theme paints nothing, in the weakest possible cascade
+ * position (see {@link CANVAS_BACKDROP_LAYER_STATEMENT}). Background sits on
+ * BODY (not html) so a consumer `body { background }` keeps its normal
+ * canvas-propagation behavior — short pages paint edge-to-edge exactly as the
+ * delivery build does.
+ */
+const NEW_WORLD_BACKDROP_CSS = `
+  @layer ec-canvas-backdrop {
+    html { color-scheme: light; }
+    body { background-color: #ffffff; }
+  }
+`;
+/**
+ * LEGACY-world backdrop — today's rule, verbatim and unlayered (EC-389-era
+ * behavior applies EXACTLY in the legacy world, per AD-C): the canvas backdrop
+ * is deliberately always light/site-like, so the native form-control/scrollbar
+ * theme is forced to match and a page with real inputs never shows dark native
+ * chrome floating on a light page. The light page itself comes from the studio
+ * body-class default (`DEFAULT_CANVAS_BODY_CLASS`) resolving against the merged
+ * stylesheet's studio tokens.
+ */
+const LEGACY_BACKDROP_CSS = `
+  html { color-scheme: light; }
+`;
+/**
+ * The chrome UI rules — identical in both worlds. Sections:
+ * page frame, containment recipe, selection/hover outlines, inline editing,
+ * rich-text toolbar, locale-fallback chips, drag & drop indicators.
+ */
+const CHROME_UI_CSS = `
+  /* ── Page frame ─────────────────────────────────────────────────────────
+     The canvas gutter — unlayered on purpose (identical in both worlds, and
+     it must beat a consumer body margin: the 16px frame is editor ergonomics,
+     not page styling). */
+  body { margin: 0; padding: 16px; }
+
+  /* ── Containment recipe (chrome contract item 2) ────────────────────────
+     Every chrome ROOT (toolbar, spacing handles, in-canvas placeholders)
+     carries .ec-chrome: reset everything, then re-establish the chrome's own
+     typography and color-scheme explicitly. Inherited custom properties pierce
+     'all: initial' (and even shadow DOM) — that is why chrome never consumes
+     var() names (contract-tested), not something this recipe could fix.
+     The :where(div, span, p) guard re-links descendant text to the chrome
+     root's typography with class-level specificity, so a consumer's bare
+     'div, span { color: … }' element rules cannot restyle chrome text; chrome
+     elements styled inline stay inline-styled (inline always wins here). */
+  .ec-chrome {
+    all: initial;
+    display: block;
+    box-sizing: border-box;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+    color: rgb(30, 35, 45);
+    color-scheme: light;
+  }
+  .ec-chrome *,
+  .ec-chrome *::before,
+  .ec-chrome *::after { box-sizing: border-box; }
+  .ec-chrome :where(div, span, p) { color: inherit; font: inherit; }
+
+  /* ── Selection/hover outlines ───────────────────────────────────────────
+     Scoped to the per-node editable wrappers. The wrappers WRAP consumer
+     content, so they are deliberately NOT contained (no .ec-chrome — they must
+     stay layout-transparent); their indicator declarations carry !important
+     (contract item 3) so a site theme's element rules can never hide the
+     selection state. */
+  .ec-editable { outline-offset: -1px !important; cursor: default; }
+  .ec-editable[data-hovered]:not([data-selected]) { outline: 1px dashed rgba(130,150,190,0.75) !important; }
+  .ec-editable[data-selected] { outline: 2px solid #5b8cff !important; }
+
+  /* ── Inline editing (EC-158 text, EC-159 rich text) ─────────────────────
+     The rendered element itself becomes the editor — no overlay, no
+     replacement input — so typography, alignment, and layout are
+     pixel-identical between edit and render states. The wrapper keeps the
+     selection outline; the host only gets a caret. pre-wrap applies to PLAIN
+     text hosts only — rich-text markup must keep its rendered whitespace
+     handling (no layout shift). */
+  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff !important; }
+  .ec-editable [data-ec-edit] { outline: none; cursor: text; }
+  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }
+  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,
+     images, embeds): visible and rendered, but not text-editable. */
+  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }
+
+  /* ── Floating mark toolbar (EC-159), portaled into the iframe ───────────
+     All visual declarations !important (contract item 3): the toolbar is
+     stylesheet-styled chrome whose button/input elements a site theme's
+     element rules would otherwise match. */
+  .ec-rt-toolbar { color-scheme: dark !important; }
+  .ec-rt-toolbar-row { display: flex !important; align-items: center !important; gap: 2px !important;
+    padding: 3px !important; margin: 0 !important;
+    border: 1px solid rgba(130,150,190,0.4) !important; border-radius: 8px !important;
+    background: rgb(24,26,32) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }
+  .ec-rt-toolbar-btn { min-width: 26px !important; height: 24px !important; padding: 0 7px !important;
+    border: 0 !important; border-radius: 5px !important;
+    background: transparent !important; color: rgb(225,228,236) !important;
+    font: 600 12px/1 ui-sans-serif, system-ui, sans-serif !important;
+    cursor: pointer !important; }
+  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25) !important; }
+  .ec-rt-toolbar-btn[data-active] { background: #5b8cff !important; color: white !important; }
+  .ec-rt-toolbar-input { width: 200px !important; height: 24px !important; padding: 0 7px !important;
+    border-radius: 5px !important;
+    border: 1px solid rgba(130,150,190,0.4) !important; background: rgb(16,18,22) !important;
+    color: rgb(225,228,236) !important;
+    font: 12px/1 ui-sans-serif, system-ui, sans-serif !important; outline: none !important; }
+
+  /* ── Locale-fallback chips (EC-176) ─────────────────────────────────────
+     A node whose bound content is currently served via locale fallback wears a
+     small corner chip naming the locale it actually came from — the canvas
+     never silently mixes locales. A pseudo-element cannot carry .ec-chrome, so
+     every declaration is !important (contract item 3). */
+  .ec-editable[data-ec-locale-fallback] { position: relative; }
+  .ec-editable[data-ec-locale-fallback]::after {
+    content: attr(data-ec-locale-fallback) !important;
+    position: absolute !important; top: 2px !important; right: 2px !important;
+    z-index: 5 !important; pointer-events: none !important;
+    padding: 0 4px !important; border-radius: 4px !important;
+    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif !important;
+    letter-spacing: 0.05em !important; text-transform: uppercase !important;
+    color: #fbbf24 !important; background: rgba(180,83,9,0.25) !important;
+    border: 1px solid rgba(245,158,11,0.45) !important;
+  }
+
+  /* ── Drag & drop states (EC-160/EC-162) ─────────────────────────────────
+     Eligibility comes from the shared pure rules (lib/dnd/drop-rules); these
+     classes only *show* the resolution. Rejection is explicit and visible
+     during the drag — never a silent failed drop. Before/after bars follow the
+     parent's flow axis (data-ec-drop-axis); left/right are the
+     wrap-into-columns gesture (violet, paired highlight). Indicator
+     declarations !important (contract item 3). */
+  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399 !important; outline-offset: -2px !important; background-color: rgba(52, 211, 153, 0.08) !important; }
+  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8 !important; }
+  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8 !important; }
+  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8 !important; }
+  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8 !important; }
+  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }
+  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }
+  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444 !important; outline-offset: -2px !important; background-color: rgba(239, 68, 68, 0.08) !important; cursor: not-allowed !important; }
+`;
+/**
+ * The complete chrome stylesheet for a world — the `ec-outline-css` element's
+ * content (id kept from EC-389; the cascade position is pinned by test).
+ */
+export function canvasChromeCss(world) {
+    return (world === 'legacy' ? LEGACY_BACKDROP_CSS : NEW_WORLD_BACKDROP_CSS) + CHROME_UI_CSS;
+}
+//# sourceMappingURL=canvas-chrome-css.js.map

package/dist/components/builder/canvas-chrome-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-chrome-css.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-chrome-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAyC9D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,4BAA4B,CAAA;AAE3E;;;;;;;;GAQG;AACH,MAAM,sBAAsB,GAAG;;;;;CAK9B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,mBAAmB,GAAG;;CAE3B,CAAA;AAED;;;;GAIG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAsDkB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzD,CAAA;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,aAAa,CAAA;AAC5F,CAAC","sourcesContent":["import { PRESERVE_NODE_ATTR } from '@elytracms/core/rich-text'\n\n/**\n * The canvas chrome STYLESHEET (EC-414 / AD-B) — the studio's complete in-frame\n * styling, hand-written. This is deliberately NOT a second Tailwind world: the\n * chrome inside the canvas iframe styles itself with `ec-*` classes, `data-ec-*`\n * attributes, and inline styles only, so the consumer's theme is the ONLY design\n * system in the canvas document and the canvas resolves exactly what delivery\n * resolves (AD-A).\n *\n * The chrome contract (binding on ALL in-frame studio UI — EC-404/405/408 build\n * on this):\n *\n *   1. Only `ec-*` class names / `data-ec-*` attributes / inline styles — never\n *      studio utility classes, never studio React UI primitives.\n *   2. Chrome roots carry the containment recipe (`.ec-chrome`): `all: initial`\n *      plus explicit font/color/line-height/color-scheme re-establishment, so\n *      consumer element rules and inherited typography cannot restyle chrome.\n *      NOTE (verified, MDN): `all: initial` does NOT stop custom-property\n *      inheritance — the real protection is that chrome never CONSUMES a var()\n *      name a consumer could define (this file uses no var() at all; the\n *      contract test enforces it).\n *   3. Where a consumer ELEMENT selector could still match chrome descendants\n *      (`div`, `span`, `button`, `input` rules in a site theme), chrome rules\n *      use `!important` deliberately — a small, documented surface: the\n *      selection/DnD indicators, the rich-text toolbar, and the locale chip.\n *      The `.ec-chrome` recipe itself stays normal-strength on purpose: inline\n *      styles are the top styling layer for chrome-owned looks (placeholders,\n *      spacing handles) and stylesheet-`!important` would beat them.\n *   4. Escape hatch (documented only, NOT built): if chrome ever outgrows\n *      hand-written CSS, the verified prefixed-bundle recipe is the upgrade\n *      path — granular Tailwind imports `theme.css layer(theme) prefix(ec)` +\n *      `utilities.css layer(utilities) prefix(ec) important source(none)`\n *      compiled into an engine-provided entry (compiles clean on 4.3.2).\n */\n\n/** The two canvas stylesheet worlds (AD-C): `legacy` = the pre-EC-414 merged\n *  canvas.css (studio design system + consumer theme in one build); `new` = the\n *  consumer's standalone full-Tailwind theme entry, studio-free. */\nexport type CanvasWorld = 'legacy' | 'new'\n\n/**\n * Injected FIRST into the canvas head (before the `ec-app-css` link): a bare\n * layer STATEMENT that pins `ec-canvas-backdrop` to the very bottom of the\n * document's layer order (layer order is first-occurrence order). The new-world\n * backdrop rules live in this layer, so they lose to EVERYTHING the consumer\n * ships — `@layer base` body rules, unlayered rules, later layers — and only\n * paint when the consumer paints nothing. (An unlayered backdrop would ALWAYS\n * beat the consumer's layered `@layer base body { background }` — the exact\n * NK-004 mechanism this task retires.) Inert in the legacy world: the legacy\n * chrome CSS puts nothing in the layer.\n */\nexport const CANVAS_BACKDROP_LAYER_STATEMENT = '@layer ec-canvas-backdrop;'\n\n/**\n * NEW-world backdrop (AD-B item 4): the studio-utility body-class default is\n * retired; these neutral hand-written rules give the canvas a light, site-like\n * page when the consumer theme paints nothing, in the weakest possible cascade\n * position (see {@link CANVAS_BACKDROP_LAYER_STATEMENT}). Background sits on\n * BODY (not html) so a consumer `body { background }` keeps its normal\n * canvas-propagation behavior — short pages paint edge-to-edge exactly as the\n * delivery build does.\n */\nconst NEW_WORLD_BACKDROP_CSS = `\n  @layer ec-canvas-backdrop {\n    html { color-scheme: light; }\n    body { background-color: #ffffff; }\n  }\n`\n\n/**\n * LEGACY-world backdrop — today's rule, verbatim and unlayered (EC-389-era\n * behavior applies EXACTLY in the legacy world, per AD-C): the canvas backdrop\n * is deliberately always light/site-like, so the native form-control/scrollbar\n * theme is forced to match and a page with real inputs never shows dark native\n * chrome floating on a light page. The light page itself comes from the studio\n * body-class default (`DEFAULT_CANVAS_BODY_CLASS`) resolving against the merged\n * stylesheet's studio tokens.\n */\nconst LEGACY_BACKDROP_CSS = `\n  html { color-scheme: light; }\n`\n\n/**\n * The chrome UI rules — identical in both worlds. Sections:\n * page frame, containment recipe, selection/hover outlines, inline editing,\n * rich-text toolbar, locale-fallback chips, drag & drop indicators.\n */\nconst CHROME_UI_CSS = `\n  /* ── Page frame ─────────────────────────────────────────────────────────\n     The canvas gutter — unlayered on purpose (identical in both worlds, and\n     it must beat a consumer body margin: the 16px frame is editor ergonomics,\n     not page styling). */\n  body { margin: 0; padding: 16px; }\n\n  /* ── Containment recipe (chrome contract item 2) ────────────────────────\n     Every chrome ROOT (toolbar, spacing handles, in-canvas placeholders)\n     carries .ec-chrome: reset everything, then re-establish the chrome's own\n     typography and color-scheme explicitly. Inherited custom properties pierce\n     'all: initial' (and even shadow DOM) — that is why chrome never consumes\n     var() names (contract-tested), not something this recipe could fix.\n     The :where(div, span, p) guard re-links descendant text to the chrome\n     root's typography with class-level specificity, so a consumer's bare\n     'div, span { color: … }' element rules cannot restyle chrome text; chrome\n     elements styled inline stay inline-styled (inline always wins here). */\n  .ec-chrome {\n    all: initial;\n    display: block;\n    box-sizing: border-box;\n    font-family: ui-sans-serif, system-ui, sans-serif;\n    font-size: 13px;\n    line-height: 1.5;\n    color: rgb(30, 35, 45);\n    color-scheme: light;\n  }\n  .ec-chrome *,\n  .ec-chrome *::before,\n  .ec-chrome *::after { box-sizing: border-box; }\n  .ec-chrome :where(div, span, p) { color: inherit; font: inherit; }\n\n  /* ── Selection/hover outlines ───────────────────────────────────────────\n     Scoped to the per-node editable wrappers. The wrappers WRAP consumer\n     content, so they are deliberately NOT contained (no .ec-chrome — they must\n     stay layout-transparent); their indicator declarations carry !important\n     (contract item 3) so a site theme's element rules can never hide the\n     selection state. */\n  .ec-editable { outline-offset: -1px !important; cursor: default; }\n  .ec-editable[data-hovered]:not([data-selected]) { outline: 1px dashed rgba(130,150,190,0.75) !important; }\n  .ec-editable[data-selected] { outline: 2px solid #5b8cff !important; }\n\n  /* ── Inline editing (EC-158 text, EC-159 rich text) ─────────────────────\n     The rendered element itself becomes the editor — no overlay, no\n     replacement input — so typography, alignment, and layout are\n     pixel-identical between edit and render states. The wrapper keeps the\n     selection outline; the host only gets a caret. pre-wrap applies to PLAIN\n     text hosts only — rich-text markup must keep its rendered whitespace\n     handling (no layout shift). */\n  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff !important; }\n  .ec-editable [data-ec-edit] { outline: none; cursor: text; }\n  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }\n  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,\n     images, embeds): visible and rendered, but not text-editable. */\n  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }\n\n  /* ── Floating mark toolbar (EC-159), portaled into the iframe ───────────\n     All visual declarations !important (contract item 3): the toolbar is\n     stylesheet-styled chrome whose button/input elements a site theme's\n     element rules would otherwise match. */\n  .ec-rt-toolbar { color-scheme: dark !important; }\n  .ec-rt-toolbar-row { display: flex !important; align-items: center !important; gap: 2px !important;\n    padding: 3px !important; margin: 0 !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; border-radius: 8px !important;\n    background: rgb(24,26,32) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }\n  .ec-rt-toolbar-btn { min-width: 26px !important; height: 24px !important; padding: 0 7px !important;\n    border: 0 !important; border-radius: 5px !important;\n    background: transparent !important; color: rgb(225,228,236) !important;\n    font: 600 12px/1 ui-sans-serif, system-ui, sans-serif !important;\n    cursor: pointer !important; }\n  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25) !important; }\n  .ec-rt-toolbar-btn[data-active] { background: #5b8cff !important; color: white !important; }\n  .ec-rt-toolbar-input { width: 200px !important; height: 24px !important; padding: 0 7px !important;\n    border-radius: 5px !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; background: rgb(16,18,22) !important;\n    color: rgb(225,228,236) !important;\n    font: 12px/1 ui-sans-serif, system-ui, sans-serif !important; outline: none !important; }\n\n  /* ── Locale-fallback chips (EC-176) ─────────────────────────────────────\n     A node whose bound content is currently served via locale fallback wears a\n     small corner chip naming the locale it actually came from — the canvas\n     never silently mixes locales. A pseudo-element cannot carry .ec-chrome, so\n     every declaration is !important (contract item 3). */\n  .ec-editable[data-ec-locale-fallback] { position: relative; }\n  .ec-editable[data-ec-locale-fallback]::after {\n    content: attr(data-ec-locale-fallback) !important;\n    position: absolute !important; top: 2px !important; right: 2px !important;\n    z-index: 5 !important; pointer-events: none !important;\n    padding: 0 4px !important; border-radius: 4px !important;\n    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif !important;\n    letter-spacing: 0.05em !important; text-transform: uppercase !important;\n    color: #fbbf24 !important; background: rgba(180,83,9,0.25) !important;\n    border: 1px solid rgba(245,158,11,0.45) !important;\n  }\n\n  /* ── Drag & drop states (EC-160/EC-162) ─────────────────────────────────\n     Eligibility comes from the shared pure rules (lib/dnd/drop-rules); these\n     classes only *show* the resolution. Rejection is explicit and visible\n     during the drag — never a silent failed drop. Before/after bars follow the\n     parent's flow axis (data-ec-drop-axis); left/right are the\n     wrap-into-columns gesture (violet, paired highlight). Indicator\n     declarations !important (contract item 3). */\n  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399 !important; outline-offset: -2px !important; background-color: rgba(52, 211, 153, 0.08) !important; }\n  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444 !important; outline-offset: -2px !important; background-color: rgba(239, 68, 68, 0.08) !important; cursor: not-allowed !important; }\n`\n\n/**\n * The complete chrome stylesheet for a world — the `ec-outline-css` element's\n * content (id kept from EC-389; the cascade position is pinned by test).\n */\nexport function canvasChromeCss(world: CanvasWorld): string {\n  return (world === 'legacy' ? LEGACY_BACKDROP_CSS : NEW_WORLD_BACKDROP_CSS) + CHROME_UI_CSS\n}\n"]}

package/dist/components/builder/canvas-chrome.d.ts

@@ -1,24 +1,100 @@
 import type { StudioCanvasTheme } from '../app-views/studio-config.js';
+import type { CanvasWorld } from './canvas-chrome-css.js';
+export { canvasChromeCss, CANVAS_BACKDROP_LAYER_STATEMENT } from './canvas-chrome-css.js';
+export type { CanvasWorld } from './canvas-chrome-css.js';
 /**
- * The canvas iframe's document chrome (EC-389) — the framework-free half of
- * `BuilderCanvas`'s `wireUp` (house pattern, EC-330): everything injected into
- * the preview document lives here, in ONE pinned cascade order, unit-testable
- * without jsdom.
+ * The canvas iframe's document chrome (EC-389, reshaped by EC-414) — the
+ * framework-free half of `BuilderCanvas`'s `wireUp` (house pattern, EC-330):
+ * everything injected into the preview document lives here, in ONE pinned
+ * cascade order, unit-testable without jsdom.
+ *
+ * EC-414 (AD-A/AD-C): the studio design system is leaving the canvas document.
+ * Which world a project lives in is decided by a RUNTIME PROBE of the loaded
+ * canvas stylesheet — no flag, no config, zero consumer breakage:
+ *
+ *   - `legacy` (marker tokens present): the merged pre-EC-414 canvas.css that
+ *     bundles `@elytracms/studio/styles.css` with the consumer theme. The
+ *     EC-389 body-class default and today's behavior apply EXACTLY.
+ *   - `new` (markers absent): the consumer's standalone full-Tailwind theme
+ *     entry. No studio utilities exist in the document, so the body-class
+ *     default retires and the neutral hand-written backdrop applies instead.
  */
-/** Selection/hover outlines, scoped to the per-node editable wrappers. */
-export declare const OUTLINE_CSS = "\n  /* The canvas backdrop is deliberately always light/site-like (see the\n     wireUp note in canvas.tsx) \u2014 force the native form-control/scrollbar theme\n     to match, so a page with real inputs never shows dark native chrome\n     floating on a light page. */\n  html { color-scheme: light; }\n  body { margin: 0; padding: 16px; }\n  .ec-editable { outline-offset: -1px; cursor: default; }\n  .ec-editable[data-hovered]:not([data-selected]) { outline: 1px dashed rgba(130,150,190,0.75); }\n  .ec-editable[data-selected] { outline: 2px solid #5b8cff; }\n  /* Inline editing (EC-158 text, EC-159 rich text): the rendered element\n     itself becomes the editor \u2014 no overlay, no replacement input \u2014 so\n     typography, alignment, and layout are pixel-identical between edit and\n     render states. The wrapper keeps the selection outline; the host only\n     gets a caret. pre-wrap applies to PLAIN text hosts only \u2014 rich-text\n     markup must keep its rendered whitespace handling (no layout shift). */\n  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff; }\n  .ec-editable [data-ec-edit] { outline: none; cursor: text; }\n  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }\n  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,\n     images, embeds): visible and rendered, but not text-editable. */\n  .ec-editable [data-ec-edit='rich'] [data-ec-rt-preserve] { user-select: none; }\n  /* Floating mark toolbar (EC-159), portaled into the iframe. */\n  .ec-rt-toolbar { color-scheme: dark; }\n  .ec-rt-toolbar-row { display: flex; align-items: center; gap: 2px; padding: 3px;\n    border: 1px solid rgba(130,150,190,0.4); border-radius: 8px;\n    background: rgb(24,26,32); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }\n  .ec-rt-toolbar-btn { min-width: 26px; height: 24px; padding: 0 7px; border: 0; border-radius: 5px;\n    background: transparent; color: rgb(225,228,236); font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;\n    cursor: pointer; }\n  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25); }\n  .ec-rt-toolbar-btn[data-active] { background: #5b8cff; color: white; }\n  .ec-rt-toolbar-input { width: 200px; height: 24px; padding: 0 7px; border-radius: 5px;\n    border: 1px solid rgba(130,150,190,0.4); background: rgb(16,18,22); color: rgb(225,228,236);\n    font: 12px/1 ui-sans-serif, system-ui, sans-serif; outline: none; }\n  /* Locale-fallback chips (EC-176): a node whose bound content is currently\n     served via locale fallback wears a small corner chip naming the locale it\n     actually came from \u2014 the canvas never silently mixes locales. */\n  .ec-editable[data-ec-locale-fallback] { position: relative; }\n  .ec-editable[data-ec-locale-fallback]::after {\n    content: attr(data-ec-locale-fallback);\n    position: absolute; top: 2px; right: 2px; z-index: 5; pointer-events: none;\n    padding: 0 4px; border-radius: 4px;\n    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif;\n    letter-spacing: 0.05em; text-transform: uppercase;\n    color: #fbbf24; background: rgba(180,83,9,0.25); border: 1px solid rgba(245,158,11,0.45);\n  }\n  /* Drag & drop states (EC-160/EC-162): eligibility comes from the shared pure\n     rules (lib/dnd/drop-rules); these classes only *show* the resolution.\n     Rejection is explicit and visible during the drag \u2014 never a silent failed\n     drop. Before/after bars follow the parent's flow axis (data-ec-drop-axis);\n     left/right are the wrap-into-columns gesture (violet, paired highlight). */\n  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399; outline-offset: -2px; background-color: rgba(52, 211, 153, 0.08); }\n  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }\n  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }\n  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444; outline-offset: -2px; background-color: rgba(239, 68, 68, 0.08); cursor: not-allowed; }\n";
 /**
- * The studio's DEFAULT canvas body classes — a replaceable default (EC-389
- * decision): a consumer's `defineStudio({ canvas: { bodyClassName } })` REPLACES
- * it wholesale (including `''` to drop it), because these utility classes
+ * The studio design system's marker tokens (AD-C probe). These are the plain
+ * `:root` custom properties from the studio's generated `tokens.css`, which any
+ * merged legacy build carries VERBATIM — unlike `@theme inline` variables
+ * (e.g. `--color-panel`), which Tailwind v4 inlines into utilities and never
+ * emits as custom properties (verified against the repo's Tailwind 4.3.2; the
+ * task file's `--color-panel` example probe would classify every legacy build
+ * as new). Two tokens ANDed so a consumer theme that happens to define one
+ * generic name (`--panel`) cannot be mistaken for the studio design system.
+ */
+export declare const CANVAS_LEGACY_MARKER_TOKENS: readonly ["--panel", "--grid-line"];
+/**
+ * A Tailwind v4 build unconditionally emits `--default-font-family` on
+ * `:root, :host` (preflight consumes it) — its absence after a successful
+ * stylesheet load means the canvas stylesheet is not a Tailwind theme entry at
+ * all (AD-D item 2's "defines no @theme tokens" invalid state).
+ */
+export declare const CANVAS_TAILWIND_MARKER_TOKEN = "--default-font-family";
+/** The settled classification of the canvas stylesheet (AD-C + AD-D item 2). */
+export type CanvasThemeStatus = 
+/** Pre-EC-414 merged canvas.css — studio design system + consumer theme. */
+{
+    kind: 'legacy';
+}
+/** The EC-414 shape: a standalone consumer Tailwind theme entry. */
+ | {
+    kind: 'new';
+}
+/** The app never provided a canvas stylesheet (`setCanvasStylesheetUrl`). */
+ | {
+    kind: 'no-stylesheet';
+}
+/** The stylesheet `<link>` failed to load. */
+ | {
+    kind: 'stylesheet-error';
+}
+/** Loaded, but defines no Tailwind theme tokens at all. */
+ | {
+    kind: 'no-theme-tokens';
+};
+/** The raw computed-style sample the pure classifier decides from. */
+export interface CanvasThemeProbeSample {
+    /** The `ec-app-css` link fired `error` (or never resolved). */
+    loadFailed: boolean;
+    /** Computed values of {@link CANVAS_LEGACY_MARKER_TOKENS}, in order. */
+    legacyMarkers: readonly string[];
+    /** Computed value of {@link CANVAS_TAILWIND_MARKER_TOKEN}. */
+    tailwindMarker: string;
+}
+/**
+ * AD-C pure core: classify the canvas stylesheet world from computed-token
+ * presence. Legacy needs EVERY legacy marker; a loaded stylesheet with no
+ * Tailwind marker is the explicit `no-theme-tokens` invalid state.
+ */
+export declare function classifyCanvasTheme(sample: CanvasThemeProbeSample): CanvasThemeStatus;
+/** The world a status renders as: only the legacy merged stylesheet keeps the
+ *  EC-389 body-class default; every other state gets the neutral backdrop. */
+export declare function canvasWorldOf(status: CanvasThemeStatus): CanvasWorld;
+/** Sample the live document's computed root styles for {@link classifyCanvasTheme}. */
+export declare function probeCanvasTheme(doc: Document, loadFailed?: boolean): CanvasThemeStatus;
+/**
+ * The studio's DEFAULT canvas body classes — LEGACY world only (EC-389 → EC-414):
+ * a consumer's `defineStudio({ canvas: { bodyClassName } })` REPLACES it
+ * wholesale (including `''` to drop it), because these utility classes
  * out-cascade a site theme's `@layer base body` rules — keeping them additive
- * would make the site's own page background unreachable (the NK-004 bug).
+ * would make the site's own page background unreachable (the NK-004 bug). In
+ * the NEW world the default retires entirely (the utilities don't exist there);
+ * the chrome stylesheet's neutral backdrop takes over.
  */
 export declare const DEFAULT_CANVAS_BODY_CLASS = "bg-background text-foreground font-sans";
 /** Everything injected into the canvas preview document. */
 export interface CanvasChromeInputs {
     /** The consuming app's compiled canvas stylesheet URL; `null` → no link (tests/SSR). */
     stylesheetUrl: string | null;
+    /** Which stylesheet world the document is in (AD-C probe; see `wireCanvasChrome`). */
+    world: CanvasWorld;
     /** An instantiated starter kit's brand token palette (EC-117), when the project has one. */
     kitTokensCss?: string;
     /** The consumer's canvas theme from `defineStudio({ canvas })` (EC-389). */
@@ -48,18 +124,46 @@ export interface CanvasChromeDocument {
     };
 }
 /**
- * Apply the canvas document chrome in the PINNED cascade order (EC-389):
+ * Apply the canvas document chrome in the PINNED cascade order (EC-389/EC-414):
  *
- *   1. `ec-app-css` — the canvas stylesheet `<link>` (site delivery CSS + studio CSS);
- *   2. `ec-outline-css` — the studio's editing chrome (selection/DnD/toolbar styles);
- *   3. `ec-kit-tokens` — an instantiated starter kit's `tokensCss` (kit provides…);
- *   4. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (…consumer overrides).
+ *   1. `ec-layer-order` — the backdrop layer STATEMENT, pinning the chrome's
+ *      `ec-canvas-backdrop` layer to the bottom of the layer order (it must
+ *      precede the consumer stylesheet in document order to lose to it);
+ *   2. `ec-app-css` — the canvas stylesheet `<link>` (the consumer theme; in
+ *      the legacy world also the studio design system);
+ *   3. `ec-outline-css` — the studio's editing chrome (world-composed:
+ *      backdrop + selection/DnD/toolbar/containment styles);
+ *   4. `ec-kit-tokens` — an instantiated starter kit's `tokensCss` (kit provides…);
+ *   5. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (…consumer overrides).
  *
  * Later elements win the cascade at equal specificity, so studio defaults <
  * kit tokens < consumer config — the customization-seam ordering. The body
  * class is the consumer's `bodyClassName` when given (even `''`), else the
- * studio default. Safe to run repeatedly (iframe onLoad + the already-loaded
- * fast path): links/styles are deduped by id, and the two token styles are
- * re-appended IN ORDER so a re-wire never flips who wins.
+ * legacy default in the legacy world and empty in the new world (AD-C). Safe
+ * to run repeatedly (iframe onLoad + the already-loaded fast path + the probe
+ * settling): links/styles are deduped by id, the chrome CSS is re-composed in
+ * place when the world flips, and the two token styles are re-appended IN
+ * ORDER so a re-wire never flips who wins.
  */
 export declare function applyCanvasChrome(d: CanvasChromeDocument, inputs: CanvasChromeInputs): void;
+/** `applyCanvasChrome` inputs minus the probe-owned `world`, plus the settle callback. */
+export interface WireCanvasChromeOptions {
+    stylesheetUrl: string | null;
+    kitTokensCss?: string;
+    theme?: StudioCanvasTheme;
+    /**
+     * Fired when the classification SETTLES — the stylesheet finished loading
+     * (or failing), or there is no stylesheet to wait for. Feeds the AD-D dev
+     * notice; may fire again on re-wires (callers dedupe by kind).
+     */
+    onStatus?: (status: CanvasThemeStatus) => void;
+}
+/**
+ * The DOM-level wiring around {@link applyCanvasChrome}: applies the chrome
+ * immediately with the CURRENT classification, then re-applies once the
+ * `ec-app-css` link settles (the AD-C probe reads computed custom properties,
+ * which exist only after the stylesheet loads). Before the stylesheet arrives
+ * neither world's styling is resolvable anyway (no consumer CSS yet), so the
+ * pre-settle pass is visually neutral in both worlds.
+ */
+export declare function wireCanvasChrome(doc: Document, options: WireCanvasChromeOptions): void;