fix(org-chart): separate fixed and expanded canvas backgrounds

packages/org-chart/src/styles/org-chart-content.css

@@ -3,8 +3,9 @@
    The stage keeps its natural width (tree + side) and is uniformly scaled by Core JS;
    there is no reflow breakpoint and no inner horizontal scroll. Column/group gaps are
    screen-only layout values (no data or parentId change). */
-.hm-orgchart-composition { position: relative; width: 100%; min-width: 0; overflow: hidden; }
+.hm-orgchart-composition { position: relative; width: 100%; min-width: 0; overflow: hidden; background: var(--hm-orgchart-fixed-canvas-background, transparent); }
 .hm-orgchart-stage {
+  background: var(--hm-orgchart-fixed-canvas-background, transparent);
   /* Engine padding (32px) + node margins (16px) already separate the six 252px
      organization columns; the tree wrapper adds no extra width. */
   --hm-orgchart-column-gap: 0px;

packages/org-chart/src/styles/org-chart-expanded.css

@@ -27,7 +27,9 @@
   overflow: hidden;
   touch-action: none;
   cursor: grab;
-  background: var(--hm-orgchart-resolved-bg-surface);
+  /* Canvas input is independent of cards and the outer preview frame.
+     Keep existing bg-surface themes as the fallback (standalone: #ffffff). */
+  background: var(--hm-orgchart-expanded-canvas-background, var(--hm-orgchart-resolved-bg-surface));
 }
 .hm-orgchart-expanded .hm-orgchart-forest {
   position: absolute;

packages/org-chart/src/styles/org-chart-readonly.css

@@ -7,7 +7,7 @@
   --hm-orgchart-group-title-font-size: 20px;
   --hm-orgchart-group-title-font-weight: 700;
   --hm-orgchart-group-title-line-height: 19.7px;
-  background: var(--hm-orgchart-bg-content, #F5F8FB);
+  background: var(--hm-orgchart-fixed-canvas-background, var(--hm-orgchart-bg-content, #F5F8FB));
 }
 .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage {
   position: relative;
@@ -26,7 +26,7 @@
   min-width: 1920px;
   min-height: 914.5px;
   padding: 12px 0;
-  background: var(--hm-orgchart-bg-content, #F5F8FB);
+  background: var(--hm-orgchart-fixed-canvas-background, var(--hm-orgchart-bg-content, #F5F8FB));
 }
 .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-heading { grid-area: heading; justify-self: start; align-self: start; max-width: calc(100% - 52px - 96px); margin: 0 0 0 52px; }
 .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-title { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; }