feat(org-chart): finalize chart features and AI generation rules

packages/org-chart/src/styles/employee-info-dialog.css

@@ -6,8 +6,7 @@
 }
 .hm-orgchart-organization-link:hover { text-decoration: underline; }
 .hm-orgchart-organization-link:focus-visible,
-.hm-orgchart-employee[role="button"]:focus-visible,
-.hm-orgchart-employee-dialog-close:focus-visible {
+.hm-orgchart-employee[role="button"]:focus-visible {
   outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
   outline-offset: 3px;
 }
@@ -27,16 +26,54 @@
 .hm-orgchart-employee-dialog::backdrop {
   background: color-mix(in srgb, var(--hm-orgchart-resolved-fg-primary) 38%, transparent);
 }
-.hm-orgchart-employee-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg); }
+.hm-orgchart-employee-dialog-header {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg);
+  /* Reserve the former text button's height so the title, body and dialog size stay put. */
+  min-height: calc(1lh + 2 * var(--hm-orgchart-resolved-spacing-xs) + 2 * var(--hm-orgchart-resolved-border-width));
+}
 .hm-orgchart-employee-dialog-header h2 { margin: 0; font-size: 18px; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
 .hm-orgchart-employee-dialog-close {
-  padding: var(--hm-orgchart-resolved-spacing-xs) var(--hm-orgchart-resolved-spacing-sm);
-  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default);
-  border-radius: var(--hm-orgchart-resolved-radius-control-md);
-  background: var(--hm-orgchart-resolved-bg-content);
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
+  /* Match HM Dialog's ghost / icon-sm Button without a React or theme dependency.
+     Fallbacks are the declared HM defaults (theme/default.css and primitives.css). */
+  --hm-orgchart-dialog-close-ink: var(--foreground, var(--hm-sem-fg-primary, #0a221d));
+  --hm-orgchart-dialog-close-hover: var(--muted, var(--hm-sem-bg-subtle, #f4f1ea));
+  --hm-orgchart-dialog-close-ring: var(--ring, var(--hm-sem-stroke-input-focus, #266651));
+  position: absolute;
+  top: calc(var(--spacing, .25rem) * 2);
+  right: calc(var(--spacing, .25rem) * 2);
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  box-sizing: border-box;
+  width: calc(var(--spacing, .25rem) * 7);
+  height: calc(var(--spacing, .25rem) * 7);
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: min(var(--radius-md, calc(var(--radius, var(--hm-radius-container, 4px)) * .8)), 12px);
+  background: transparent;
+  background-clip: padding-box;
+  color: var(--hm-orgchart-dialog-close-ink);
+  font: inherit; font-size: .875rem; line-height: calc(var(--spacing, .25rem) * 5); font-weight: 500;
+  outline: none; outline-offset: 0; box-shadow: none;
+  cursor: default; user-select: none; white-space: nowrap;
+  transition: all 150ms cubic-bezier(.4, 0, .2, 1);
+}
+.hm-orgchart-employee-dialog-close svg {
+  width: calc(var(--spacing, .25rem) * 4);
+  height: calc(var(--spacing, .25rem) * 4);
+  pointer-events: none; flex-shrink: 0;
+}
+.hm-orgchart-employee-dialog-close:hover {
+  background-color: var(--hm-orgchart-dialog-close-hover);
+}
+:host-context(.dark) .hm-orgchart-employee-dialog-close:hover,
+.dark .hm-orgchart-employee-dialog-close:hover {
+  background-color: color-mix(in oklab, var(--hm-orgchart-dialog-close-hover) 50%, transparent);
+}
+.hm-orgchart-employee-dialog-close:focus-visible {
+  border-color: var(--hm-orgchart-dialog-close-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hm-orgchart-dialog-close-ring) 50%, transparent);
+}
+.hm-orgchart-employee-dialog-close:active {
+  transform: translateY(1px);
 }
 .hm-orgchart-employee-dialog-fields {
   display: grid;