@beyondwork/docx-react-component 1.0.52 → 1.0.53

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -77,11 +77,8 @@ import {
   resolvePageOverlayRects,
   type PageOverlayRect,
 } from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
-import { TwPageHeaderBand } from "./tw-page-header-band.tsx";
-import { TwPageFooterBand } from "./tw-page-footer-band.tsx";
-import { TwFootnoteArea } from "./tw-footnote-area.tsx";
 import { TwEndnoteArea } from "./tw-endnote-area.tsx";
-import { FRAME_PX_PER_TWIP_AT_96DPI } from "../tw-review-workspace.tsx";
+import { TwPageChromeEntry } from "./tw-page-chrome-entry.tsx";
 
 /**
  * Minimal structural type for the PM `EditorView` handle consumed by
@@ -369,115 +366,18 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
       {rects.map((rect, pageIndex) => {
         const page = facet.getPage(pageIndex);
         if (!page) return null;
-
-        // L7 Phase 2.8 — viewport cull. Pages outside the visible range
-        // (plus overscan) render an empty frame wrapper: the
-        // `data-page-chrome-frame` + `data-page-index` attributes stay
-        // put so downstream DOM queries (portal-slot, test hooks) keep
-        // working, but the four heavy React subtrees below do not mount.
-        const frameHeightPxForCull = rect.bottomPx - rect.topPx;
-        if (
-          visiblePageIndexRange &&
-          (pageIndex < visiblePageIndexRange.start ||
-            pageIndex >= visiblePageIndexRange.end)
-        ) {
-          return (
-            <div
-              key={`page-chrome-${rect.pageId}`}
-              data-page-chrome-frame=""
-              data-page-index={pageIndex}
-              data-page-chrome-culled=""
-              style={{
-                position: "absolute",
-                top: `${rect.topPx}px`,
-                left: 0,
-                width: "100%",
-                height: `${frameHeightPxForCull}px`,
-                pointerEvents: "none",
-              }}
-            />
-          );
-        }
-
-        const layout = page.layout;
-        const headerStory = page.stories.header;
-        const footerStory = page.stories.footer;
-        const headerRegion = page.regions.header;
-        const footerRegion = page.regions.footer;
-        const footnoteRegion = page.regions.footnotes?.[0];
-
-        const headerBlocks = headerStory
-          ? facet
-              .getStoryBlocksForRegion(pageIndex, "header")
-              .map((b) => b.blockSnapshot)
-          : [];
-        const footerBlocks = footerStory
-          ? facet
-              .getStoryBlocksForRegion(pageIndex, "footer")
-              .map((b) => b.blockSnapshot)
-          : [];
-        const footnoteBlocks = footnoteRegion
-          ? facet
-              .getStoryBlocksForRegion(pageIndex, "footnote-area")
-              .map((b) => b.blockSnapshot)
-          : [];
-
-        const px = (twips: number): number => twips * FRAME_PX_PER_TWIP_AT_96DPI;
-        const bandWidthPx = px(
-          layout.pageWidth - layout.marginLeft - layout.marginRight,
-        );
-        const bandLeftPx = px(layout.marginLeft);
-        const frameHeightPx = rect.bottomPx - rect.topPx;
-
         return (
-          <div
+          <TwPageChromeEntry
             key={`page-chrome-${rect.pageId}`}
-            data-page-chrome-frame=""
-            data-page-index={pageIndex}
-            style={{
-              position: "absolute",
-              top: `${rect.topPx}px`,
-              left: 0,
-              width: "100%",
-              height: `${frameHeightPx}px`,
-              pointerEvents: "none",
-            }}
-          >
-            {headerRegion && headerStory ? (
-              <TwPageHeaderBand
-                pageIndex={pageIndex}
-                blocks={headerBlocks}
-                topPx={px(layout.headerMargin ?? 720)}
-                leftPx={bandLeftPx}
-                widthPx={bandWidthPx}
-                bandHeightPx={px(headerRegion.heightTwips)}
-                isActiveSlot={isActiveStoryMatch(activeStory, headerStory)}
-                onClick={() => onOpenStory?.(headerStory)}
-              />
-            ) : null}
-            {footerRegion && footerStory ? (
-              <TwPageFooterBand
-                pageIndex={pageIndex}
-                blocks={footerBlocks}
-                bottomPx={px(layout.footerMargin ?? 720)}
-                leftPx={bandLeftPx}
-                widthPx={bandWidthPx}
-                bandHeightPx={px(footerRegion.heightTwips)}
-                isActiveSlot={isActiveStoryMatch(activeStory, footerStory)}
-                onClick={() => onOpenStory?.(footerStory)}
-              />
-            ) : null}
-            {footnoteRegion ? (
-              <TwFootnoteArea
-                pageIndex={pageIndex}
-                blocks={footnoteBlocks}
-                topPx={px(footnoteRegion.originTwips - layout.marginTop)}
-                leftPx={bandLeftPx}
-                widthPx={px(footnoteRegion.widthTwips)}
-                heightPx={px(footnoteRegion.heightTwips)}
-              />
-            ) : null}
-          </div>
+            rect={rect}
+            pageIndex={pageIndex}
+            page={page}
+            facet={facet}
+            activeStory={activeStory}
+            onOpenStory={onOpenStory}
+            visiblePageIndexRange={visiblePageIndexRange}
+            renderFrameRevision={renderFrameRevision}
+          />
         );
       })}
       <TwEndnoteArea blocks={endnoteBlocks} />
@@ -485,40 +385,4 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
   );
 };
 
-/**
- * Strict equality for two `EditorStoryTarget` values — used to decide
- * whether a given band should render in active-slot mode.
- *
- * For `"main"` the kinds must match; for header/footer the triple
- * `(relationshipId, variant, sectionIndex)` must match; for footnote /
- * endnote the `noteId` must match.  Any mismatch returns false.
- */
-function isActiveStoryMatch(
-  active: EditorStoryTarget,
-  candidate: EditorStoryTarget,
-): boolean {
-  if (active.kind !== candidate.kind) return false;
-  if (active.kind === "main" || candidate.kind === "main") {
-    return active.kind === candidate.kind;
-  }
-  if (active.kind === "footnote" && candidate.kind === "footnote") {
-    return active.noteId === candidate.noteId;
-  }
-  if (active.kind === "endnote" && candidate.kind === "endnote") {
-    return active.noteId === candidate.noteId;
-  }
-  // header / footer — triple match.
-  if (
-    (active.kind === "header" && candidate.kind === "header") ||
-    (active.kind === "footer" && candidate.kind === "footer")
-  ) {
-    return (
-      active.relationshipId === candidate.relationshipId &&
-      active.variant === candidate.variant &&
-      active.sectionIndex === candidate.sectionIndex
-    );
-  }
-  return false;
-}
-
 export default TwPageStackChromeLayer;

package/src/ui-tailwind/theme/chart-palette-adapter.ts

@@ -0,0 +1,57 @@
+/**
+ * Runtime chart-palette adapter.
+ *
+ * Reads live CSS variable values from the document root so that the palette
+ * automatically tracks light/dark mode and any host accent overrides applied
+ * at the `:root` level. No React dependency — pure module.
+ *
+ * See `docs/wiki/design-tokens.md` → "Chart palette" section.
+ */
+
+const CATEGORICAL_COUNT = 8;
+const SEQUENTIAL_COUNT = 6;
+
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+}
+
+/**
+ * Returns the CSS value for the categorical series slot at `index`.
+ * Wraps around after 8 slots (0-indexed).
+ */
+export function getCategoricalAt(index: number): string {
+  const slot = (((index % CATEGORICAL_COUNT) + CATEGORICAL_COUNT) % CATEGORICAL_COUNT) + 1;
+  return cssVar(`--color-chart-categorical-${slot}`);
+}
+
+/**
+ * Returns all 6 sequential ramp values in order (lightest → darkest in light
+ * mode; darkest → lightest in dark mode — always index 1..6).
+ */
+export function getSequentialRamp(): string[] {
+  return Array.from({ length: SEQUENTIAL_COUNT }, (_, i) =>
+    cssVar(`--color-chart-sequential-${i + 1}`),
+  );
+}
+
+/**
+ * Returns the five diverging scale stops. Keys match the token names so
+ * consumers can reference them by semantic intent.
+ */
+export function getDivergingScale(): {
+  negStrong: string;
+  neg: string;
+  neutral: string;
+  pos: string;
+  posStrong: string;
+} {
+  return {
+    negStrong: cssVar("--color-chart-diverging-neg-strong"),
+    neg: cssVar("--color-chart-diverging-neg"),
+    neutral: cssVar("--color-chart-diverging-neutral"),
+    pos: cssVar("--color-chart-diverging-pos"),
+    posStrong: cssVar("--color-chart-diverging-pos-strong"),
+  };
+}

package/src/ui-tailwind/theme/editor-theme.css

@@ -14,6 +14,7 @@
  */
 
 @import "tailwindcss";
+@import "./tokens.css";
 
 @theme {
   /* Backgrounds */
@@ -32,9 +33,8 @@
   --color-secondary: #6b6b6b;
   --color-tertiary: #616161;
 
-  /* Accent */
-  --color-accent: #18b394;
-  --color-accent-soft: rgba(24, 179, 148, 0.1);
+  /* Accent — 6a.S1 forest-green flip. Values resolve through tokens.css. */
+  --color-accent: var(--color-accent-primary);
   --color-workflow: #7557d8;
   --color-workflow-soft: rgba(117, 87, 216, 0.12);
 
@@ -123,8 +123,7 @@
    * the .dark block below so the transform lives in one place.
    */
   --shadow-hairline: 0 0 0 1px var(--color-border);
-  --shadow-soft: 0 4px 14px -10px rgba(16, 24, 40, 0.14);
-  --shadow-float: 0 12px 28px -20px rgba(16, 24, 40, 0.18);
+  /* --shadow-soft / --shadow-float / --shadow-focus owned by tokens.css (§3.3/§3.4). */
 
   /*
    * Tailwind shadow-sm / shadow-md / shadow-lg / shadow-xl follow the runtime
@@ -170,26 +169,10 @@
   --color-secondary: #A5B7AC;
   --color-tertiary: #7F9187;
 
-  --color-accent: #53B487;
-  --color-accent-soft: rgba(83, 180, 135, 0.16);
+  /* Accent / semantic / change / comment dark values owned by tokens.css. */
   --color-workflow: #c7b6ff;
   --color-workflow-soft: rgba(199, 182, 255, 0.16);
 
-  --color-comment: #c7b6ff;
-  --color-comment-soft: rgba(199, 182, 255, 0.18);
-  --color-comment-strong: rgba(199, 182, 255, 0.24);
-  --color-insert: #8fd2a9;
-  --color-insert-soft: rgba(143, 210, 169, 0.18);
-  --color-delete: #d78d84;
-  --color-delete-soft: rgba(215, 141, 132, 0.14);
-
-  --color-warning: #c7b6ff;
-  --color-warning-soft: rgba(199, 182, 255, 0.16);
-  --color-danger: #d78d84;
-  --color-danger-soft: rgba(215, 141, 132, 0.16);
-  --color-success: #8fd2a9;
-  --color-success-soft: rgba(143, 210, 169, 0.18);
-
   --color-border: rgba(255, 255, 255, 0.09);
   --color-border-strong: rgba(255, 255, 255, 0.16);
 
@@ -202,8 +185,7 @@
   --color-page-ruler: color-mix(in srgb, var(--color-border) 70%, transparent);
   --color-workspace-canvas: #111827;
 
-  --shadow-soft: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
-  --shadow-float: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
+  /* --shadow-soft / --shadow-float / --shadow-focus owned by tokens.css. */
 }
 
 /*
@@ -509,6 +491,26 @@
   background: color-mix(in srgb, var(--color-danger) 14%, transparent);
 }
 
+/* §3.7 canonical scope families */
+.wre-scope-rail-tint-blocked {
+  background: var(--color-scope-tint-blocked);
+}
+.wre-scope-rail-tint-in-scope {
+  background: var(--color-scope-tint-in-scope);
+}
+.wre-scope-rail-tint-suggest {
+  background: var(--color-scope-tint-suggest);
+}
+.wre-scope-rail-tint-comment {
+  background: var(--color-scope-tint-comment);
+}
+.wre-scope-rail-tint-scheduled {
+  background: var(--color-scope-tint-scheduled);
+}
+.wre-scope-rail-tint-proposed {
+  background: var(--color-scope-tint-proposed);
+}
+
 .wre-scope-rail-tint-active {
   outline: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
   outline-offset: -1px;

package/src/ui-tailwind/theme/tokens.css

@@ -0,0 +1,345 @@
+/*
+ * @beyondwork/docx-react-component — canonical design tokens
+ *
+ * Source of truth for every color, shadow, radius, space, and motion value
+ * consumed by the chrome and document surface. Values are copied verbatim
+ * from `docs/reference/designsystem.md` §10 (starter CSS). Any hex change
+ * happens HERE and in `tokens.ts` — never in a component file.
+ *
+ * Two-layer model:
+ *   1. Product names (TypeScript) — `BRAND_TOKENS.color.accent.primary`
+ *   2. CSS variables (this file)  — `var(--color-accent-primary)`
+ *
+ * See `docs/wiki/design-tokens.md` for narrative + eviction policy.
+ *
+ * Host overrides:
+ *   Allowed  — accent family, `--color-bg-app`, `--radius-*`, `--motion-*`
+ *   Locked   — semantic, change, comment, canvas, focus-ring
+ *   See `docs/reference/designsystem.md` §8.5 + §9.
+ */
+
+:root {
+  /* Backgrounds */
+  --color-bg-app: #F4F7F5;
+  --color-bg-chrome: #FAFCFA;
+  --color-bg-sidebar: #F1F6F2;
+  --color-bg-canvas: #FFFFFF;
+  --color-bg-elevated: #FFFFFF;
+  --color-bg-hover: #EAF6EF;
+  --color-bg-selected: #E2F2E8;
+  --color-bg-muted: #F7FAF8;
+  --color-bg-overlay: rgba(21, 26, 23, 0.08);
+
+  /* Borders */
+  --color-border-subtle: #E2EAE4;
+  --color-border-default: #D3DED6;
+  --color-border-strong: #BECDBF;
+  --color-border-accent: #8FC9AD;
+
+  /* Text */
+  --color-text-primary: #151A17;
+  --color-text-secondary: #5E6D63;
+  --color-text-tertiary: #8A978F;
+  --color-text-quiet: #A4AEA8;
+  --color-text-inverse: #F7FAF8;
+  --color-text-on-accent: #F7FAF8;
+  --color-text-on-soft-accent: #18563F;
+
+  /* Accent (host-overridable) */
+  --color-accent-primary: #1F6B4F;
+  --color-accent-primary-hover: #18563F;
+  --color-accent-primary-active: #124432;
+  --color-accent-secondary: #72D6AE;
+  --color-accent-secondary-hover: #5FC79C;
+  --color-accent-secondary-active: #49B785;
+  --color-accent-soft: #DDF1E4;
+  --color-accent-soft-hover: #CEEAD8;
+
+  /* Semantic (locked) */
+  --color-semantic-success: #1F8A5B;
+  --color-semantic-success-soft: #DDF3E8;
+  --color-semantic-warning: #D58B1E;
+  --color-semantic-warning-soft: #FBEFD8;
+  --color-semantic-error: #D95C67;
+  --color-semantic-error-soft: #FBE3E6;
+  --color-semantic-info: #2F8FCE;
+  --color-semantic-info-soft: #DCEFFC;
+
+  /* Field */
+  --color-field-fill: #F6FAF7;
+  --color-field-editable: #EEF8F0;
+  --color-field-focus: #DDF1E4;
+  --color-field-invalid: #FBE3E6;
+  --color-field-warning: #FBEFD8;
+
+  /* Status */
+  --color-status-ready: #1F8A5B;
+  --color-status-in-progress: #2F8FCE;
+  --color-status-paused: #8A978F;
+  --color-status-blocked: #D95C67;
+  --color-status-review: #1F6B4F;
+  --color-status-draft: #72907E;
+
+  /* Comment (locked) */
+  --color-comment-marker: #1F6B4F;
+  --color-comment-marker-hover: #18563F;
+  --color-comment-thread-bg: #F3FAF6;
+
+  /* Change (locked) */
+  --color-change-insertion: #DDF3E8;
+  --color-change-deletion: #FBE3E6;
+  --color-change-comment: #E8F4EC;
+  --color-change-selection: #DDF1E4;
+
+  /* Chart — categorical */
+  --color-chart-categorical-1: #1F6B4F;
+  --color-chart-categorical-2: #72D6AE;
+  --color-chart-categorical-3: #2F8FCE;
+  --color-chart-categorical-4: #D58B1E;
+  --color-chart-categorical-5: #7A6AF0;
+  --color-chart-categorical-6: #D95C67;
+  --color-chart-categorical-7: #5E8E7A;
+  --color-chart-categorical-8: #A7D9C1;
+
+  /* Chart — sequential */
+  --color-chart-sequential-1: #EAF6EF;
+  --color-chart-sequential-2: #D4EEDD;
+  --color-chart-sequential-3: #B4DFC8;
+  --color-chart-sequential-4: #8FC9AD;
+  --color-chart-sequential-5: #5FA985;
+  --color-chart-sequential-6: #1F6B4F;
+
+  /* Chart — diverging */
+  --color-chart-diverging-neg-strong: #C94B57;
+  --color-chart-diverging-neg: #E9979F;
+  --color-chart-diverging-neutral: #E9EFEA;
+  --color-chart-diverging-pos: #97D1B3;
+  --color-chart-diverging-pos-strong: #1F6B4F;
+
+  /* Scope tints (§3.7.1) */
+  --color-scope-tint-blocked: #FBE3E6;
+  --color-scope-tint-in-scope: #E2F2E8;
+  --color-scope-tint-suggest: #FBEFD8;
+  --color-scope-tint-comment: #F3FAF6;
+  --color-scope-tint-scheduled: #DCEFFC;
+  --color-scope-tint-proposed: #EAF6EF;
+
+  /* Shadows */
+  --shadow-soft: 0 6px 20px rgba(21, 26, 23, 0.06);
+  --shadow-float: 0 12px 32px rgba(21, 26, 23, 0.12);
+  --shadow-focus: 0 0 0 3px rgba(114, 214, 174, 0.28);
+
+  /* Radius (§4.3) */
+  --radius-sm: 10px;
+  --radius-md: 12px;
+  --radius-lg: 14px;
+  --radius-xl: 16px;
+  --radius-pill: 9999px;
+
+  /* Spacing (4px base) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* Motion (host-overridable) */
+  --motion-fast: 120ms;
+  --motion-default: 160ms;
+  --motion-slow: 220ms;
+}
+
+/*
+ * Dark palette (designsystem §3.4).
+ *
+ * Canonical selector is `[data-theme="dark"]`; `.dark` class is retained
+ * as a compat selector for one release cycle (existing harness markup
+ * uses it alongside the attribute). Remove `.dark` after an explicit
+ * consumer audit.
+ */
+[data-theme="dark"],
+.dark {
+  /* Backgrounds */
+  --color-bg-app: #0E1411;
+  --color-bg-chrome: #131B17;
+  --color-bg-sidebar: #16211B;
+  --color-bg-canvas: #1B2620;
+  --color-bg-elevated: #202E27;
+  --color-bg-hover: #21342A;
+  --color-bg-selected: #274234;
+  --color-bg-muted: #17211C;
+  --color-bg-overlay: rgba(0, 0, 0, 0.32);
+
+  /* Borders */
+  --color-border-subtle: #26352C;
+  --color-border-default: #32463A;
+  --color-border-strong: #405847;
+  --color-border-accent: #4F8E70;
+
+  /* Text */
+  --color-text-primary: #EFF7F2;
+  --color-text-secondary: #A5B7AC;
+  --color-text-tertiary: #7F9187;
+  --color-text-quiet: #67786F;
+  --color-text-inverse: #111613;
+  --color-text-on-accent: #0F1713;
+  --color-text-on-soft-accent: #DDF7E9;
+
+  /* Accent */
+  --color-accent-primary: #53B487;
+  --color-accent-primary-hover: #69C598;
+  --color-accent-primary-active: #84D8AE;
+  --color-accent-secondary: #9AE7C7;
+  --color-accent-secondary-hover: #B2F0D5;
+  --color-accent-secondary-active: #C7F6E0;
+  --color-accent-soft: #294235;
+  --color-accent-soft-hover: #31503F;
+
+  /* Semantic */
+  --color-semantic-success: #45C787;
+  --color-semantic-success-soft: #1E3A2C;
+  --color-semantic-warning: #E7B04D;
+  --color-semantic-warning-soft: #3E3117;
+  --color-semantic-error: #F07A84;
+  --color-semantic-error-soft: #3D2024;
+  --color-semantic-info: #64B6E8;
+  --color-semantic-info-soft: #183444;
+
+  /* Field */
+  --color-field-fill: #202D25;
+  --color-field-editable: #23372B;
+  --color-field-focus: #294235;
+  --color-field-invalid: #3D2024;
+  --color-field-warning: #3E3117;
+
+  /* Status */
+  --color-status-ready: #45C787;
+  --color-status-in-progress: #64B6E8;
+  --color-status-paused: #7F9187;
+  --color-status-blocked: #F07A84;
+  --color-status-review: #53B487;
+  --color-status-draft: #7DA38F;
+
+  /* Comment */
+  --color-comment-marker: #53B487;
+  --color-comment-marker-hover: #69C598;
+  --color-comment-thread-bg: #1A2A22;
+
+  /* Change */
+  --color-change-insertion: #1E3A2C;
+  --color-change-deletion: #3D2024;
+  --color-change-comment: #21342A;
+  --color-change-selection: #294235;
+
+  /* Chart — categorical */
+  --color-chart-categorical-1: #53B487;
+  --color-chart-categorical-2: #9AE7C7;
+  --color-chart-categorical-3: #64B6E8;
+  --color-chart-categorical-4: #E7B04D;
+  --color-chart-categorical-5: #A996FF;
+  --color-chart-categorical-6: #F07A84;
+  --color-chart-categorical-7: #7DA38F;
+  --color-chart-categorical-8: #355746;
+
+  /* Chart — sequential */
+  --color-chart-sequential-1: #16211B;
+  --color-chart-sequential-2: #1D2E25;
+  --color-chart-sequential-3: #274234;
+  --color-chart-sequential-4: #35654F;
+  --color-chart-sequential-5: #53B487;
+  --color-chart-sequential-6: #9AE7C7;
+
+  /* Chart — diverging */
+  --color-chart-diverging-neg-strong: #F07A84;
+  --color-chart-diverging-neg: #C76069;
+  --color-chart-diverging-neutral: #2A3530;
+  --color-chart-diverging-pos: #69C598;
+  --color-chart-diverging-pos-strong: #9AE7C7;
+
+  /* Scope tints (§3.7.2) */
+  --color-scope-tint-blocked: #3D2024;
+  --color-scope-tint-in-scope: #274234;
+  --color-scope-tint-suggest: #3E3117;
+  --color-scope-tint-comment: #1A2A22;
+  --color-scope-tint-scheduled: #183444;
+  --color-scope-tint-proposed: #21342A;
+
+  /* Shadows */
+  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
+  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.4);
+  --shadow-focus: 0 0 0 3px rgba(154, 231, 199, 0.22);
+}
+
+/*
+ * Reduced-motion contract (designsystem §4.6 / §7.3).
+ * Collapses every motion token so any transition consuming `var(--motion-*)`
+ * becomes functionally instant. Components MUST read these tokens — never
+ * hardcode a numeric duration.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 1ms;
+    --motion-default: 1ms;
+    --motion-slow: 1ms;
+  }
+}
+
+/*
+ * Density scale (designsystem §4.2 / Lane 6b.U5 consumer wiring).
+ *
+ * Components multiply spacing by `--space-density-multiplier`.
+ * Standard (1.0) is the default; compact (0.85) and comfortable (1.15)
+ * are opt-in via `data-density` on the root element.
+ * The hook `use-density.ts` reads and writes this attribute.
+ */
+:root {
+  --space-density-multiplier: 1;
+}
+:root[data-density="compact"] {
+  --space-density-multiplier: 0.85;
+}
+:root[data-density="standard"] {
+  --space-density-multiplier: 1;
+}
+:root[data-density="comfortable"] {
+  --space-density-multiplier: 1.15;
+}
+
+/*
+ * Back-compat aliases (temporary — remove after full consumer sweep).
+ *
+ * These bind pre-6a names to their post-6a equivalents so that the
+ * existing @theme {} block in editor-theme.css and already-shipped
+ * component markup continue to resolve during the phased migration.
+ */
+:root {
+  /* Legacy accent seed (was teal) → forest-green primary family */
+  --color-accent: var(--color-accent-primary);
+  /* Legacy single-name semantic tokens → canonical semantic family */
+  --color-danger: var(--color-semantic-error);
+  --color-danger-soft: var(--color-semantic-error-soft);
+  --color-warning: var(--color-semantic-warning);
+  --color-warning-soft: var(--color-semantic-warning-soft);
+  --color-success: var(--color-semantic-success);
+  --color-success-soft: var(--color-semantic-success-soft);
+  --color-info: var(--color-semantic-info);
+  --color-info-soft: var(--color-semantic-info-soft);
+  /* Legacy review markup names → change family */
+  --color-insert: var(--color-accent-primary);
+  --color-insert-soft: var(--color-change-insertion);
+  --color-delete: var(--color-semantic-error);
+  --color-delete-soft: var(--color-change-deletion);
+  --color-comment: var(--color-comment-marker);
+  --color-comment-soft: var(--color-change-comment);
+  --color-comment-strong: var(--color-comment-marker-hover);
+  /* Legacy L8 Phase A radius names → §4.3 scale */
+  --radius-panel: var(--radius-md);
+  --radius-card: var(--radius-sm);
+  --radius-control: var(--radius-sm);
+  --radius-page: 2px;
+}