@flyos/design-system 0.0.1-reserved → 1.1.0

package/package.json

@@ -1,7 +1,56 @@
 {
   "name": "@flyos/design-system",
-  "version": "0.0.1-reserved",
-  "description": "FlyOS design system — scope reservation placeholder.",
+  "version": "1.1.0",
+  "description": "FlyOS design system — shared components, directives, pipes, services, and models for Business App developers.",
+  "keywords": [
+    "flyos",
+    "design-system",
+    "angular"
+  ],
   "license": "MIT",
-  "publishConfig": { "access": "public" }
-}
+  "exports": {
+    "./federation/with-fly-federation": {
+      "require": "./federation/with-fly-federation.cjs",
+      "default": "./federation/with-fly-federation.cjs"
+    },
+    "./federation/*": "./federation/*",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/flyos-design-system.d.ts",
+      "default": "./fesm2022/flyos-design-system.mjs"
+    }
+  },
+  "dependencies": {
+    "cropperjs": "^1.6.2",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@flyos/design-system-emoji-pack": "*",
+    "@angular/animations": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@microsoft/signalr": "^10.0.0",
+    "primeicons": "^7.0.0",
+    "rxjs": "~7.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@microsoft/signalr": {
+      "optional": true
+    },
+    "@flyos/design-system-emoji-pack": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/flyos-design-system.mjs",
+  "typings": "types/flyos-design-system.d.ts",
+  "sideEffects": false,
+  "type": "module"
+}

package/scss/_app-surface-tokens.scss

@@ -0,0 +1,366 @@
+// ─── App-surface tokens — the BUSINESS-APP content layer ─────────────────────
+// WHY THIS IS A SEPARATE FAMILY FROM `--label-*` / `--surface-*`
+// The DS carries two token families because it dresses two genuinely different
+// surfaces, not because anyone forgot to merge them:
+
+// 1. `--label-*` / `--surface-*` / `--window-*` / `--glass-*` (_theme-light/dark)
+//    SHELL CHROME. Translucent glass composited over the user's wallpaper.
+//    `--surface-card` is a 20%-white LIFT on the window plate — it is only ever
+//    meaningful stacked on that plate.
+
+// 2. `--ink-*` / `--bg-*` / `--line-*` (this file)
+//    BUSINESS-APP CONTENT. An app's own opaque reading surface: white cards on
+//    a near-white page in light, dark cards on a darker page in dark. Apps that
+//    also embed in the shell re-tint THESE to glass in their own
+//    `.fly-shell <app>` block (see Circles' `circles-theme.scss`) — that
+//    override layer is the seam, and it only works because the resting values
+//    are opaque.
+
+// Pointing `--bg-2` at `--surface-card` was evaluated and rejected: standalone,
+// a 20%-white card over a 98.5%-white page stops reading as a card at all. The
+// two families stay distinct on purpose; this comment is the contract.
+
+// ADDITIVE ONLY. `tools/ds-compat` classifies re-valuing an existing theme
+// token as MAJOR (it forks the Native Federation shared singleton for every
+// remote), so nothing here may redefine a token another DS partial owns.
+//
+// Three tokens are deliberately ABSENT — they are the consuming app's BRAND and
+// every app already sets them in its own theme file:
+// --accent --accent-soft --focus-ring
+//
+// The other nine platform tokens (--danger* --warning* --purple --scrim
+// --glass-blur) USED to be absent too, on the assumption that the platform layer
+// supplies them. That assumption only holds when an app runs FEDERATED, where
+// the desktop shell emits `_theme-light/dark.scss`. A business app running
+// STANDALONE loads only this file plus its own theme — `@use 'fly-theme'` is
+// commented out in both Circles and Thoughts — so `var(--danger)` resolved to
+// nothing and error text rendered colourless. Confirmed in a live browser, not
+// inferred: 9 of the 12 computed to the empty string on Thoughts standalone.
+//
+// They are now mirrored below at the SAME values `_theme-light/dark.scss` uses.
+// Mirroring (rather than picking new values) is what makes this safe under the
+// cascade: this file's `:root, html.light-theme` selector can tie with the
+// shell's `html.light-theme`, and when the values are identical it does not
+// matter which one wins.
+
+// Consumed by the `fly-*` component library in `lib/components/`. Emitted via
+// `_fly-theme.scss`, so `@use 'fly-theme'` is all a consumer needs.
+// ─────────────────────────────────────────────────────────────────────────────
+
+:root,
+html.light-theme {
+  // ── Neutrals — text ──────────────────────────────────────────────────────
+  --ink: oklch(18% 0.005 250deg);        // primary text, primary button fills
+  --ink-2: oklch(32% 0.005 250deg);      // secondary text
+  --ink-3: oklch(50% 0.005 250deg);      // tertiary text, icons
+  --ink-4: oklch(65% 0.005 250deg);      // disabled, muted labels
+  --ink-inverse: oklch(99% 0 0deg);      // text on dark / gradient fills
+  --ink-hover: oklch(28% 0.005 250deg);  // hover shade of --ink-filled controls
+
+  // Label for a fill of `--ink` itself (the primary button). Distinct from
+  // `--ink-inverse`, which is a FIXED near-white for coloured/gradient fills and
+  // therefore wrong here: `--ink` flips per theme, so its label must flip too.
+  //
+  // CONTRACT — anything that redefines `--ink` MUST redefine `--on-ink`.
+  // It must also be OPAQUE. The shell-embed glass remaps in Circles and Thoughts
+  // set `--ink` to white and every surface token to a translucent veil; a
+  // translucent label composites into the fill and vanishes.
+  --on-ink: var(--ink-inverse);
+
+  // ── Neutrals — borders ───────────────────────────────────────────────────
+  --line: oklch(92% 0.004 250deg);       // default borders
+  --line-2: oklch(88% 0.004 250deg);     // hover borders
+  --line-3: oklch(96% 0.003 250deg);     // inner row dividers
+
+  // ── Surfaces (opaque by design — see the header note) ────────────────────
+  --bg: oklch(98.5% 0.003 100deg);       // app background (warm off-white)
+  --bg-2: oklch(100% 0 0deg);            // cards, table
+  --bg-3: oklch(97% 0.004 100deg);       // sidebar, table header
+  --bg-hover: oklch(96% 0.005 250deg);
+
+  // ── Brand primitives ─────────────────────────────────────────────────────
+  // `--purple` / `--accent` / `--accent-soft` are platform-owned (_theme-*.scss).
+  --teal: oklch(74% 0.13 195deg);
+  --grad: linear-gradient(
+    135deg,
+    oklch(82% 0.12 325deg),
+    oklch(60% 0.19 305deg),
+    oklch(45% 0.2 285deg)
+  );
+  --grad-soft: linear-gradient(
+    135deg,
+    oklch(74% 0.13 195deg / 12%),
+    oklch(55% 0.18 295deg / 12%)
+  );
+
+  // ── Accent plate/ink PAIRS ───────────────────────────────────────────────
+  // NEVER paint --accent on an --accent-soft plate: that is purple-on-purple,
+  // and it is the bug that keeps coming back. Two plates, two inks:
+
+  //  1. --accent-soft is a TINT the consuming context may redefine (the shell
+  //     resolves it to `color-mix(… 18%, transparent)`, i.e. a translucent wash
+  //     over unknowable glass). The only ink correct against it in every mode
+  //     is the ambient --ink, which each theme already contrasts with its own
+  //     background.
+  --on-accent-soft: var(--ink);
+
+  //  2. --accent-fill is a SOLID plate we own outright, so its ink is knowable
+  //     regardless of backdrop — always white. Badges/chips use this pair, so
+  //     their contrast cannot be broken by a host token override.
+  --accent-fill: var(--accent);
+
+  // Aliased, not a second copy of the same white: "ink on a solid accent plate"
+  // and "ink on a dark/gradient fill" are the same requirement, so they must
+  // move together if the inverse ink is ever re-tuned.
+  --on-accent-fill: var(--ink-inverse);
+
+  // ── Interaction state layers ─────────────────────────────────────────────
+  // Translucent veils layered OVER a surface for hover/press/selected instead
+  // of swapping its bg colour — one value reads correctly on any background
+  // (the visionOS / Material "state layer" model), so hover looks consistent
+  // across cards, rows, chips and glass plates alike.
+  --state-hover: oklch(50% 0.03 285deg / 5%);
+  --state-press: oklch(50% 0.03 285deg / 9%);
+  --state-selected: var(--accent-soft);
+
+  // Bright top rim that gives a translucent plate physical depth. Inert on
+  // opaque surfaces; the shell's glass mode leans on it.
+  --edge-highlight: oklch(100% 0 0deg / 50%);
+
+  // ── Icon size ramp ───────────────────────────────────────────────────────
+  // ONE scale for every icon (PrimeIcons + inline SVG). Icons had drifted to
+  // ~13 different sizes, which is why they never lined up beside each other.
+  --icon-xs: 12px;   // dense meta rows, chips
+  --icon-sm: 14px;   // text buttons, section-header actions
+  --icon-md: 16px;   // default — icon buttons, rails, nav
+  --icon-lg: 20px;   // emphasis / empty states
+
+  // ── Status chips (workflow-generic) ──────────────────────────────────────
+  --st-published: oklch(55% 0.13 165deg);
+  --st-published-bg: oklch(96% 0.04 165deg);
+  --st-approved: oklch(55% 0.15 245deg);
+  --st-approved-bg: oklch(96% 0.03 245deg);
+  --st-draft: oklch(55% 0.005 250deg);
+  --st-draft-bg: oklch(95% 0.003 250deg);
+  --st-archived: oklch(55% 0.06 60deg);
+  --st-archived-bg: oklch(96% 0.025 80deg);
+
+  // ── Semantic feedback ────────────────────────────────────────────────────
+  // Success has no platform equivalent (`--status-success` is a raw dot colour,
+  // not a fg/bg pair), so it ships here, aliased onto the published status chip.
+  --success: var(--st-published);
+  --success-bg: var(--st-published-bg);
+
+  // Standalone fallbacks for the platform tokens — see the header. Values are
+  // copied verbatim from `_theme-light.scss`; keep them in sync if that file
+  // changes, or a standalone app drifts from its federated self.
+  --danger: #ff6b6b;
+  --danger-bg: rgb(255 59 48 / 20%);
+  --danger-line: rgb(255 59 48 / 40%);
+  --warning: #febc2e;
+  --warning-bg: rgb(254 188 46 / 18%);
+  --warning-fg: rgb(255 255 255 / 96%);
+  --purple: #9333ea;
+  --scrim: rgb(0 0 0 / 50%);
+  --glass-blur: 24px;
+
+  // ── Spacing scale (4px base) ─────────────────────────────────────────────
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 22px;
+  --sp-6: 28px;
+  --sp-7: 40px;
+  --sp-8: 56px;
+
+  // ── Typography scale ─────────────────────────────────────────────────────
+  --text-2xs: 11.5px;   // field labels, field errors, footer hints
+  --text-xs: 11px;      // eyebrows, badges, metric labels
+  --text-sm: 12.5px;    // meta, hints, crumbs
+  --text-md: 13.5px;    // body in cards, subtitles
+  --text-base: 14px;    // controls, table body
+  --text-lg: 16px;      // page body
+  --text-xl: 18px;      // card titles, dialog titles
+  --text-2xl: 28px;     // detail page h1
+  --text-3xl: 32px;     // listing page h1
+  --text-display: 44px; // hero title
+  --fw-book: 450;       // between regular and medium (segmented buttons)
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+  --tracking-tight: -0.02em;
+  --tracking-wide: 0.06em;
+
+  // Type families. `--font-family` / `--font-family-mono` are the platform's
+  // names; these are the short aliases the component library reads.
+  --font-sans: var(--font-family);
+
+  // Monospace is retired — the UI is one sans face throughout. Kept (aliased)
+  // rather than deleted so existing `var(--font-mono)` consumers keep
+  // resolving; the `.mono` utility still contributes tabular-nums, which is
+  // what those id/number treatments actually need.
+  --font-mono: var(--font-sans);
+
+  // ── Radii ────────────────────────────────────────────────────────────────
+  --r-sm: 6px;   // icon buttons, kbd
+  --r-md: 8px;   // buttons, inputs, nav items
+  --r-lg: 12px;  // cards, table wrapper, filter panel
+  --r-xl: 16px;  // reserved
+
+  // ── Layout ───────────────────────────────────────────────────────────────
+  --row-h: 56px; // table row
+
+  // ── Z-index scale ────────────────────────────────────────────────────────
+  --z-sticky: 10;
+  --z-bulkbar: 50;
+  --z-overlay: 100;   // drawers, scrims
+  --z-dialog: 110;    // centered dialogs / confirms
+  --z-toast: 200;
+  --z-tooltip: 1000;
+
+  // ── Shadows ──────────────────────────────────────────────────────────────
+  --shadow-card: 0 1px 2px oklch(0% 0 0deg / 4%);
+  --shadow-active: 0 1px 2px oklch(0% 0 0deg / 4%), 0 0 0 1px var(--line);
+  --shadow-bulk: 0 6px 20px oklch(0% 0 0deg / 10%);
+  --shadow-filter: 0 12px 36px oklch(0% 0 0deg / 6%);
+  --shadow-panel: var(--shadow-filter), 0 1px 0 oklch(100% 0 0deg) inset;
+  --shadow-raised: 0 1px 2px oklch(0% 0 0deg / 8%);
+
+  // DERIVED off --accent, never a copy of its hex: a hardcoded purple here
+  // would not follow a runtime accent override (FlyThemeService.applyAccent),
+  // so you would get the new accent with the old glow beside it.
+  --shadow-accent: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
+  --shadow-tooltip: 0 4px 16px oklch(0% 0 0deg / 18%);
+  --shadow-focus-soft: 0 0 0 3px oklch(0% 0 0deg / 4%);
+  --shadow-drawer: -24px 0 64px oklch(0% 0 0deg / 8%);      // end-side panel (LTR)
+  --shadow-drawer-rtl: 24px 0 64px oklch(0% 0 0deg / 8%);   // mirrored under RTL
+  --shadow-dialog: 0 24px 64px oklch(18% 0.005 250deg / 18%), 0 8px 24px oklch(18% 0.005 250deg / 10%);
+  --shadow-toast: 0 12px 32px oklch(18% 0.005 250deg / 14%), 0 4px 12px oklch(18% 0.005 250deg / 8%);
+
+  // ── Transitions ──────────────────────────────────────────────────────────
+  --t-state: 0.12s ease;
+  --t-layout: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --t-overlay: 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
+  --t-drawer: 0.32s cubic-bezier(0.32, 0.72, 0.2, 1);
+}
+
+// ── Dark theme ───────────────────────────────────────────────────────────────
+// Sizing, radii, type, spacing, z-index and transition tokens are theme-neutral
+// and inherit the block above unchanged. Alias-based tokens (--success*,
+// --on-accent-*, --state-selected, --font-*) re-resolve through their targets
+// automatically and are NOT redeclared — a second declaration would just be a
+// second place to get it wrong.
+html.dark-theme {
+  // The nine platform fallbacks carry the SAME values in both themes upstream,
+  // except this one — `_theme-dark.scss` widens the blur. Redeclaring only the
+  // token that actually differs keeps the rest inheriting from the block above.
+  --glass-blur: 40px;
+
+  // ── Neutrals (inverted lightness) ────────────────────────────────────────
+  --ink: oklch(95% 0.005 250deg);
+  --ink-2: oklch(78% 0.005 250deg);
+  --ink-3: oklch(62% 0.005 250deg);
+  --ink-4: oklch(45% 0.005 250deg);
+  --ink-hover: oklch(85% 0.005 250deg);
+  // Flips with --ink above: the primary button is a near-white pill here, so its
+  // label goes near-black. Aliased to --bg (the darkest opaque surface in this
+  // theme) rather than repeating its literal — see the contract on the :root decl.
+  --on-ink: var(--bg);
+  --line: oklch(22% 0.004 250deg);
+  --line-2: oklch(28% 0.004 250deg);
+  --line-3: oklch(18% 0.003 250deg);
+  --bg: oklch(14% 0.003 250deg);
+  --bg-2: oklch(17% 0.003 250deg);
+  --bg-3: oklch(20% 0.004 250deg);
+  --bg-hover: oklch(24% 0.005 250deg);
+
+  // ── Brand — higher chroma/lightness to pop on dark ───────────────────────
+  --teal: oklch(78% 0.13 195deg);
+  --grad: linear-gradient(
+    135deg,
+    oklch(85% 0.12 325deg),
+    oklch(70% 0.19 305deg),
+    oklch(60% 0.2 285deg)
+  );
+  --grad-soft: linear-gradient(
+    135deg,
+    oklch(78% 0.13 195deg / 18%),
+    oklch(68% 0.18 295deg / 18%)
+  );
+
+  // ── Interaction state layers — light veil on dark surfaces ───────────────
+  --state-hover: oklch(95% 0.02 285deg / 6%);
+  --state-press: oklch(95% 0.02 285deg / 11%);
+  --edge-highlight: oklch(100% 0 0deg / 6%);
+
+  // ── Status chips — dim bg, bright fg ─────────────────────────────────────
+  --st-published: oklch(85% 0.13 165deg);
+  --st-published-bg: oklch(28% 0.06 165deg);
+  --st-approved: oklch(82% 0.15 245deg);
+  --st-approved-bg: oklch(28% 0.06 245deg);
+  --st-draft: var(--ink-2);              // same grey as secondary text on dark
+  --st-draft-bg: oklch(24% 0.003 250deg);
+  --st-archived: oklch(82% 0.06 60deg);
+  --st-archived-bg: oklch(28% 0.05 60deg);
+
+  // ── Shadows — deeper opacity on dark surfaces ────────────────────────────
+  --shadow-card: 0 1px 2px oklch(0% 0 0deg / 35%);
+  --shadow-active: 0 1px 2px oklch(0% 0 0deg / 40%), 0 0 0 1px var(--line);
+  --shadow-bulk: 0 6px 20px oklch(0% 0 0deg / 55%);
+  --shadow-filter: 0 12px 36px oklch(0% 0 0deg / 50%);
+  --shadow-panel: var(--shadow-filter), 0 1px 0 oklch(100% 0 0deg / 5%) inset;
+  --shadow-accent: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
+  --shadow-focus-soft: 0 0 0 3px oklch(100% 0 0deg / 6%);
+  --shadow-drawer: -24px 0 64px oklch(0% 0 0deg / 50%);
+  --shadow-drawer-rtl: 24px 0 64px oklch(0% 0 0deg / 50%);
+  --shadow-dialog: 0 24px 64px oklch(0% 0 0deg / 60%), 0 8px 24px oklch(0% 0 0deg / 40%);
+  --shadow-toast: 0 12px 32px oklch(0% 0 0deg / 50%), 0 4px 12px oklch(0% 0 0deg / 30%);
+}
+
+// ── Chrome-token bridge (STANDALONE ONLY) ────────────────────────────────────
+// The older DS components (everything outside lib/app-surface) theme from the
+// SHELL-CHROME family — --label-*, --surface-*, --text-color*, --separator* —
+// and each reference carries a hardcoded literal fallback, e.g.
+// `var(--label-primary, #1d1d1f)` or `var(--surface-card, #fff)`. 211 such
+// fallbacks exist across the library.
+//
+// Those literals are theme-BLIND: a single constant picked by whoever wrote the
+// component. Federated that never shows, because the desktop shell defines the
+// whole chrome family. Standalone, no one does — so a business app got whatever
+// constant each component happened to hardcode, in BOTH light and dark.
+//
+// Aliasing the chrome names onto the app-surface family fixes all 211 sites at
+// once, without touching a single component: the var() resolves through the
+// token and never reaches its literal. The targets are theme-aware, so these
+// follow light/dark automatically.
+//
+// SELECTOR IS LOAD-BEARING: this block is `:root` ALONE — deliberately not
+// `:root, html.light-theme` like the blocks above. The shell declares every one
+// of these under `html.light-theme` / `html.dark-theme` (specificity 0,1,1),
+// which beats a bare `:root` (0,1,0). So federated, the shell's chrome always
+// wins and nothing about the desktop changes; standalone, nothing else declares
+// them and these apply. Widening this selector would create a specificity TIE
+// with the shell and hand the desktop's own chrome to source order.
+:root {
+  // Text
+  --label-primary: var(--ink);
+  --label-secondary: var(--ink-3);
+  --label-tertiary: var(--ink-4);
+  --text-color: var(--ink);
+  --text-color-secondary: var(--ink-3);
+
+  // Surfaces
+  --surface-ground: var(--bg);
+  --surface-card: var(--bg-2);
+  --surface-section: var(--bg-3);
+  --surface-overlay: var(--bg-2);
+  --surface-overlay-strong: var(--bg-2);
+
+  // Lines + interaction states
+  --surface-border: var(--line);
+  --separator: var(--line);
+  --separator-primary: var(--line);
+  --surface-hover: var(--bg-hover);
+  --surface-active: var(--state-selected);
+}

package/scss/_app-surface-utilities.scss

@@ -0,0 +1,82 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// UI library global utilities (generic). EMITS CSS — import once from the
+// global stylesheet, after _tokens.scss.
+// ─────────────────────────────────────────────────────────────────────────────
+@use 'shell-embed-bridge';
+
+// Class form of the app-surface → shell-glass bridge, for consumers that cannot
+// reach the mixin: a component with INLINE `styles:` (no SCSS pipeline), or a
+// subtree portalled out of its app's stylesheet scope. Prefer the mixin in a
+// real `.scss` file; this exists so the map is never retyped by hand. See
+// `_shell-embed-bridge.scss` for why the bridge is needed at all.
+.fly-app-surface-on-glass {
+  @include shell-embed-bridge.app-surface-on-glass;
+}
+
+// Tabular numerals / code — reusable in templates without restyling a component.
+.mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+// ── Tooltip (CSS-only, no JS dependency) ─────────────────────────────────────
+// Add `data-tooltip="text"` to any element to show a floating label on hover or
+// keyboard focus. Always pair with `aria-label` for screen-reader users —
+// data-tooltip is a *visual* affordance only (the flyTooltip directive wires
+// both together). Consumers should use `data-tooltip` *instead of* `title`.
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]::before,
+[data-tooltip]::after {
+  position: absolute;
+  left: 50%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  z-index: var(--z-tooltip);
+}
+
+[data-tooltip]::before {
+  content: attr(data-tooltip);
+  bottom: calc(100% + 8px);
+  transform: translateX(-50%) translateY(3px);
+  background: var(--ink);
+  color: var(--ink-inverse);
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: var(--text-xs);
+  font-weight: var(--fw-medium);
+  line-height: 1.3;
+  letter-spacing: 0;
+  padding: 5px 9px;
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+  box-shadow: var(--shadow-tooltip);
+}
+
+[data-tooltip]::after {
+  content: '';
+  bottom: calc(100% + 3px);
+  transform: translateX(-50%) translateY(3px);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--ink);
+}
+
+[data-tooltip]:hover::before,
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::before,
+[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+// ── CDK overlay container ────────────────────────────────────────────────────
+// Styled entirely by @angular/cdk/overlay-prebuilt.css (imported by the global
+// stylesheet). Its default z-index 1000 is correct here: a connected dropdown
+// (fly-action-menu) is the topmost transient and every library layer sits
+// below 1000. Do NOT re-pin it — the container is shared with the federated
+// shell, so an override leaks into the host's overlays.