feat(org-chart): separate fixed and auto layout previews

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

@@ -0,0 +1,92 @@
+/* P5-1A flow preview only. Every rule is under the new presenter namespace;
+   the fixed Workdesk composition and approved card internals stay unchanged.
+   Ordinary flex wrapping is not the P5-1B automatic hierarchy layout. */
+.hm-orgchart-expanded {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--hm-orgchart-resolved-spacing-sm);
+  width: 100%;
+  min-width: 0;
+  padding: var(--hm-orgchart-resolved-spacing-lg);
+  background: var(--hm-orgchart-resolved-bg-content);
+}
+.hm-orgchart-expanded .hm-orgchart-heading { margin: 0; }
+.hm-orgchart-expanded .hm-orgchart-expanded-stage-note {
+  margin: 0;
+  color: var(--hm-orgchart-resolved-fg-primary);
+  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
+}
+.hm-orgchart-expanded .hm-orgchart-expanded-description {
+  margin: 0;
+  color: var(--hm-orgchart-resolved-fg-secondary);
+  overflow-wrap: anywhere;
+}
+.hm-orgchart-expanded .hm-orgchart-expanded-top-leaders {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--hm-orgchart-resolved-spacing-lg);
+  padding: var(--hm-orgchart-resolved-spacing-lg) 0;
+}
+.hm-orgchart-expanded .hm-orgchart-viewport {
+  padding: var(--hm-orgchart-resolved-spacing-lg);
+  overflow: auto;
+  background: var(--hm-orgchart-resolved-bg-surface);
+}
+.hm-orgchart-expanded .hm-orgchart-forest {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--hm-orgchart-resolved-spacing-xxl);
+  width: 100%;
+  min-width: 0;
+}
+.hm-orgchart-expanded .hm-orgchart-tree { flex: 0 0 auto; }
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart {
+  min-width: 0;
+  padding: 0;
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] {
+  width: max-content;
+  min-width: 146px;
+  margin: 0;
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+/* Same approved 1Depth title geometry; color resolves from the auto-only
+   company variables supplied by the shared node decorator. */
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization-name {
+  align-self: stretch;
+  min-width: 146px;
+  height: 36px;
+  min-height: 36px;
+  margin: 0;
+  padding: 0 12px;
+  background: var(--hm-orgchart-current-gradient);
+  color: var(--hm-orgchart-resolved-on-action-primary);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 36px;
+  white-space: nowrap;
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee { margin: 0; }
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee.hm-orgchart-leader { margin: 8px 0 0; }
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees:empty { display: none; }

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

@@ -5,6 +5,7 @@
 @import './org-chart-readonly.css';
 @import './org-chart-p3-summary.css';
 @import './employee-info-dialog.css';
+@import './org-chart-expanded.css';
 /* Standalone defaults are scoped to the shell; only OrgChart public variables
    inherit across the Shadow DOM boundary. No host HM Theme is required. */
 :host { display: block; min-width: 0; max-width: 100%; font: inherit; }