@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/dock/adaptive-legibility.css

@@ -1,119 +0,0 @@
-/* dock/adaptive-legibility.css — the dock's ADAPTIVE-LEGIBILITY self-engage (carved
- * from dock/morph.css to hold both partials under the 500-line no-god-module bound).
- *
- * This partial owns the darken-over-light legibility concern, distinct from the morph
- * chrome: the unconditional `:where(.glass-dock)` self-engage (AZ.W-ADAPTIVE-AUTO), the
- * continuous backdrop-luma tint clamp (BC.W-ADAPTIVE-RECONCILE), the BD.W-DOCK-CORE D2
- * warm-chromatic dock ink, the ancestor `@container style(--glass-backdrop: light)`
- * descendant bucket, the AX.W55 contrast-color() progressive refinement, and the
- * BB.W-LIQUID-REVEAL / BC.W-DOCK-SHRINK-BLUR PRM reveal-blur carve.
- *
- * @import-ed by dock.css in cascade order, in the SAME `@layer components` as morph.css
- * (the carve is isomorphic — same layer, source order preserved → ZERO visual delta). */
-
-@layer components {
-    /* ── Adaptive legibility: SELF-ENGAGE the dock over a light backdrop by default
-       (AZ.W-ADAPTIVE-AUTO Arm 1 — the literal G2 surface; "Glass dock over VERY
-       LIGHT materials is unreadable, darken DYNAMICALLY like iOS 27") ─────────────
-       The dock floats over WHATEVER the consumer painted — frequently a light/near-
-       white app surface (the canonical G2 case the user reported). AY.W-A11Y-PERF
-       O-1 set `--glass-backdrop: light` on the dock's OWN root (shell.css) intending
-       a self-darken, but CSS style queries NEVER self-match (the `@container
-       style()` block below reads an ANCESTOR — verified on Chrome 148), so the
-       self-declaration was a NO-OP. This `:where(.glass-dock)` rule is the genuine
-       UNCONDITIONAL self-engage — mirroring the overlay band's `ladder.css:169` —
-       re-pointing the INHERITING tint tokens DIRECTLY on the dock root so the
-       shell (`--glass-bg-dock`), chassis-strip, and held/open tiers (which compose
-       the oklab tint AT THE ELEMENT — the substitution-vs-inheritance-safe targets)
-       darken toward warm-ink in lockstep. `--dock-fg-on-aurora` re-points to the
-       warm-ink here too — ONE reconciled path, the foreground twin folded in (it
-       reaches the dock CONTROLS' glyph/label color). Over a DARK page the darken is
-       sub-perceptual; a dark-substrate consumer opts out via `--glass-tint-strength:
-       0%` on the dock root. The morph-root interp (`.glass-dock:not(.vertical)`
-       above) stays `color-mix(in srgb …)` for the transition — the adaptive darken
-       rides its RESTING endpoint (`--glass-bg-dock`), the in-flight morph frames are
-       sub-perceptual (the ratified resting-endpoint-only default). The muted body
-       register lifts to the full warm-ink under the engaged plate (the muted L40
-       tier cannot clear 4.5:1 on a translucent darkened plate — darkening moves the
-       plate TOWARD muted's own luminance; the low-contrast muted register is
-       inappropriate over a busy glass plate, so it resolves to the legible dark
-       ink, which clears ~10:1). */
-    :where(.glass-dock) {
-        /* BD.W-DOCK-CORE (D2) — the dock self-engage reads the warm-CHROMATIC dock ink
-           (glass-fx.css), NOT the frozen global `--glass-tint-ink` (W-DARK-MATERIAL's
-           whole-system register). So the darken-over-light RAISES chroma toward a warm
-           material (H ≈ 62°, C ≈ 0.016 at AA) rather than dropping L with chroma flat (the
-           gray dock). ONE dock tint source, ONE global ink — file-line-disjoint. */
-        --glass-tint-source: var(--glass-tint-ink-dock);
-        /* BC.W-ADAPTIVE-RECONCILE — the dock JOINS the continuous observer driver (the
-           literal G2 surface: "darken DYNAMICALLY like iOS 27"). The dock's own
-           `useGlassBackdropLuminance` observer samples the threaded `:background-canvas`
-           (aurora/blob) and WRITES `--glass-backdrop-luma`; this clamp READS it and lerps
-           the plate from the warm-cream floor toward the ≤24% AA ceiling as the field
-           brightens past the knee — deepening over a bright bleed, lifting translucent over
-           a dark trough (the SAME clamp the content/overlay tiers get — ONE axis/driver/
-           signal; the discrete `@container` bucket RETIRED). Calm (luma ≤ knee) → floor. */
-        --glass-tint-strength: clamp(
-            var(--glass-tint-strength-floor),
-            calc(
-                var(--glass-tint-strength-floor) +
-                (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
-                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee)))
-            ),
-            var(--glass-tint-strength-aa)
-        );
-        --dock-fg-on-aurora: var(--glass-tint-ink);
-        --muted-foreground: var(--foreground);
-    }
-
-    /* The ancestor-querying `@container` block KEPT — it reaches the DESCENDANT
-       nested-glass surfaces inside a dock when a consumer marks `--glass-backdrop:
-       light` on the dock's ancestor (the self-engage above re-points only the dock
-       root's own inheriting tokens; a consumer's explicit ancestor bucket still
-       cascades to nested glass through this block). */
-    @container style(--glass-backdrop: light) {
-        .glass-dock {
-            --glass-tint-source: var(--glass-tint-ink);
-            --glass-tint-strength: var(--glass-tint-strength-aa);
-            --dock-fg-on-aurora: var(--glass-tint-ink);
-        }
-    }
-
-    /* AX.W55 — the `contrast-color()` flip for the dock control foreground (Chrome
-       147+/Safari 26+; progressive enhancement, NEVER the load-bearing floor). The
-       declarative bucket above already carries AA on all engines (it darkens the dock
-       plate so the warm-dark `--dock-fg-on-aurora` clears ~17:1 over white at the 18%
-       floor). On a supporting engine `contrast-color()` REFINES the control ink,
-       anchored on the LIGHT BACKDROP signal (`--card`, the warm-white surface base the
-       bright bucket implies) — `contrast-color(var(--card))` resolves to the legible
-       DARK ink. Anchoring on the dark ink instead inverts to white (illegible on the
-       still-light dock plate), so the anchor is the light surface, matching the rung
-       refinement in glass.css. The bucket is the floor; this is the native pick. */
-    @supports (color: contrast-color(white)) {
-        /* The SELF-ENGAGED dock refinement (the unconditional self-engage above);
-           progressive enhancement only — the declarative darken is the AA floor. */
-        :where(.glass-dock) {
-            --dock-fg-on-aurora: contrast-color(var(--card));
-            --muted-foreground: contrast-color(var(--card));
-        }
-        @container style(--glass-backdrop: light) {
-            .glass-dock {
-                --dock-fg-on-aurora: contrast-color(var(--card));
-            }
-        }
-    }
-}
-
-/* BB.W-LIQUID-REVEAL — the dock-expand bloom beat's blur-settle is OFF under
-   `prefers-reduced-motion: reduce` (the vestibular floor): a reduced-motion dock reads
-   crisp at every state, no in-between blur frames.
-   BC.W-DOCK-SHRINK-BLUR — the self-blur is now gated to `[data-morphing]`, so the PRM
-   carve zeroes it on the ARMED scope too (specificity 0,2,0) — a PRM dock that briefly
-   arms `[data-morphing]` carries no 3px bloom; the resting `.glass-dock` is already
-   crisp by the re-gate. */
-@media (prefers-reduced-motion: reduce) {
-    .glass-dock,
-    .glass-dock[data-morphing] {
-        --dock-reveal-blur: 0px;
-    }
-}

package/src/styles/dock/crossfade.css

@@ -1,139 +0,0 @@
-/* dock/crossfade.css — the ONE crossfade-slot rule (BI.W-DOCK-CROSSFADE).
- *
- * `DockLayerGroup`/`DockLayer`/`useLayerTransition` FOLD to ONE crossfade slot
- * (PASS-1 §2.6): the content layer hosts ONE active face; a switch is a two-child
- * OPACITY OVERLAP on the per-face `--dock-t` scalar (written by `useDockSpring` in
- * `DockCrossfade.vue` — velocity-continuous + interruptible, NOT a UA-eased View
- * Transition; G6 CLOSED). The reserved box is sized to the PEAK face as a MEASURE-ONCE
- * `min-block-size` (set inline by the crossfade slot — a running max, never a per-swap
- * FLIP). The clip-era `.dock-layer-item-host` FLIP crossfade in `layers.css`/
- * `layer-group.css` is superseded (its element no longer renders — DockLayer renders
- * `.dock-face`).
- *
- * `--dock-t` is `@property`-registered `inherits: false` (dock.css, the plate scalar),
- * so writing it per-FACE is local to that face — each face reads its OWN `--dock-t` for
- * its opacity, and the plate's own `--dock-t` (the collapse clip) never collides. The
- * G12 content clip rides the SEPARATE inheriting `--dock-morph-t` collapse scalar.
- */
-@layer components {
-    /* The crossfade slot: a relative grid whose cells (faces) stack at 1/1. The
-       peak-reserve `min-block-size` is set inline by `DockCrossfade.vue` (measure-once
-       running max), so the box holds the tallest face from frame 0 — no jump when a
-       shorter face becomes active nor when the plate collapses over it (the compound). */
-    .dock-crossfade {
-        position: relative;
-        display: grid;
-    }
-
-    /* A face host — the grid cell + the crossfade opacity channel (the INTERACTIVE run:
-       hover plates overflow it, NEVER clipped here). The inactive default is
-       out-of-flow (absolute + inset:0, opacity 0, inert) so the grid shrink-wraps to
-       the ACTIVE face while the peak reserve holds the box. */
-    .dock-crossfade > .dock-face {
-        grid-area: 1 / 1;
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        will-change: opacity;
-    }
-
-    /* ACTIVE — in flow, fully painted AT REST (`opacity: 1`; `--dock-t` is a registered
-       `initial-value: 0` property, so a `var(--dock-t, 1)` at-rest read would resolve the
-       registered 0, not the fallback — the active pane would vanish). The two-child
-       opacity OVERLAP engages ONLY while the crossfade slot is mid-swap
-       (`[data-crossfading]`, below). */
-    .dock-crossfade > .dock-face.is-active {
-        position: relative;
-        inset: auto;
-        inline-size: max-content;
-        min-inline-size: 0;
-        opacity: 1;
-    }
-
-    /* LEAVING — out of flow (the entering active face sizes the box); stays painted +
-       untouchable through the dissolve (the crossfading rule below drives its fade). */
-    .dock-crossfade > .dock-face.is-leaving {
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        visibility: visible;
-    }
-
-    /* THE TWO-CHILD OPACITY OVERLAP ON `--dock-t` — engaged ONLY mid-swap. The crossfade
-       slot arms `[data-crossfading]` at the swap start (cleared on settle) + writes the
-       per-face `--dock-t` spring progress (`useDockSpring`, velocity-continuous). The
-       entering face reads `opacity: var(--dock-t)` (0→1), the leaving `calc(1 -
-       var(--dock-t))` (1→0) — co-present through the overlap, no blank-plate dead-zone.
-       Higher-specificity than the at-rest rules (the extra `[data-crossfading]` attr), so
-       they win while a swap runs and hand back to `opacity: 1`/idle on settle. */
-    .dock-crossfade[data-crossfading] > .dock-face.is-active {
-        opacity: var(--dock-t);
-    }
-
-    .dock-crossfade[data-crossfading] > .dock-face.is-leaving {
-        opacity: calc(1 - var(--dock-t));
-    }
-
-    /* The content flex — the controls / glyphs / labels a face authors. The
-       orientation flips to a stacked column when the crossfade lives in a vertical
-       dock or layer group (matching the box axis). */
-    .dock-crossfade > .dock-face > .dock-face-content {
-        display: flex;
-        align-items: center;
-        gap: var(--dock-layer-gap, 0.375rem);
-        white-space: nowrap;
-        block-size: 100%;
-    }
-
-    :where(.glass-dock, .dock-layer-group).vertical
-        .dock-crossfade
-        > .dock-face
-        > .dock-face-content {
-        flex-direction: column;
-        align-items: stretch;
-        white-space: normal;
-    }
-
-    :where(.glass-dock, .dock-layer-group).vertical
-        .dock-crossfade
-        > .dock-face.is-active {
-        inline-size: auto;
-        block-size: max-content;
-    }
-
-    /* G12 — the content-wrapper clip. Lands on `.dock-face-content` ONLY (the
-       non-interactive content wrapper), NEVER on the `.dock-face` interactive run, and
-       ONLY while a SIMULTANEOUS plate collapse is in flight (`.glass-dock[data-morphing]`
-       ancestor). So a face's row that spills past the narrowing plate is clipped
-       mid-collapse WHILE hover plates overflow freely at rest (no `[data-morphing]` → no
-       clip). The clip rides the inheriting `--dock-morph-t` collapse scalar (DISTINCT
-       from the per-face `--dock-t` opacity scalar): at `--dock-morph-t: 1` (expanded)
-       `inset(0)` — no clip; toward `0` (collapsing) the trailing/​bottom remainder is
-       clipped away as the aperture narrows. Compositor-only (`clip-path`) — the
-       `proof:no-layout-animation` floor. PRM snaps the collapse, so the clip is a single
-       frame. This is the COMPOUND the synthetic prototypes never composed: a face-swap
-       crossfade coexisting with a collapse-morph clip on the same face. */
-    .glass-dock[data-morphing]
-        .dock-crossfade
-        > .dock-face.is-active
-        > .dock-face-content {
-        clip-path: inset(0 calc((1 - var(--dock-morph-t)) * 100%) 0 0);
-        will-change: clip-path;
-    }
-
-    .glass-dock.vertical[data-morphing]
-        .dock-crossfade
-        > .dock-face.is-active
-        > .dock-face-content {
-        clip-path: inset(0 0 calc((1 - var(--dock-morph-t)) * 100%) 0);
-    }
-
-    /* PRM — the opacity crossfade snaps (the spring's `respectReducedMotion` jumps
-       `--dock-t` 0→1 in one frame). The reserved box + the discrete active/leaving
-       presence stay correct (fade-keeps / transform-drops; there is no transform here). */
-    @media (prefers-reduced-motion: reduce) {
-        .dock-crossfade > .dock-face {
-            will-change: auto;
-        }
-    }
-}

package/src/styles/dock/cta-seat.css

@@ -1,87 +0,0 @@
-/* dock/cta-seat.css — the `[data-cta-pending]` CTA-receive landing SEAT (BC.W-AX-DOCK-
- * CTA-SEAT; the speedtest-AX BC-W2 + BC-W3 fold).
- *
- * THE MOVE. `useDockCtaReceive` (the BB.B2 morph half) flies an EXTERNAL CTA onto a
- * dock control's rect; this partial makes the control it lands on a SEAT that was
- * visibly RESERVED for it. While the CTA is in flight (or pending), the target dock
- * control carries `data-cta-pending` (written by `setPending()` on the
- * `useDockCtaReceive` return): the control shows a quiet dim GHOST (a placeholder
- * awaiting its arrival) AND reserves its resting footprint from frame 0 so the dock
- * box does NOT jump when the CTA lands. On `clearPending()` (the default hand-off
- * fires it as the CTA lands) the attribute is removed and the seat REVEALS its real
- * content with a plain `transition: opacity` FLIP.
- *
- * THE NO-BOX-JUMP (T2). The reserve is a STATIC `min-inline-size`/`min-block-size`
- * keyed off `--dock-control-size`/`--dock-layer-height` (the control's resting box) —
- * a ONE-TIME reservation set the instant `setPending()` fires, NEVER an animated
- * dimension (the W-DESKTOP-RESERVE static-frame-0 precedent). The dock's shrink-wrap
- * is already at the seated width, so the CTA lands into an already-sized hole; the box
- * never grows on reveal. `proof:no-layout-animation` holds — no `transition: width`/
- * animated min-* anywhere here.
- *
- * THE FLIP REVEAL (T3). The seat is a CONTENT swap on an already-sized box, NOT a box
- * morph — so the reveal is a PLAIN `transition: opacity` on the `--ease-out`
- * no-overshoot register (a content reveal must not overshoot — W-MOTION-CANON P2). It
- * does NOT ride the dock collapse/expand morph-stagger (`--dock-expand-t`/the child
- * stagger); re-using the morph clock would read as a janky stagger-restart on a
- * content reveal.
- *
- * RECT-DRIVEN, LAYOUT-AGNOSTIC (Gate-1 Q5). The seat targets `[data-cta-pending]` on
- * ANY dock control — it makes NO assumption about a skip-arrow affordance (a
- * consumer-side functional skip control that may or may not be present). The reserve
- * is the control's own resting footprint; the seat works with or without arrows.
- *
- * COMPOSITOR-ONLY. `setPending`/`clearPending` toggle the data attribute; this partial
- * paints with `opacity` + the static reserve. No layout property is animated. The
- * `--cta-seat-*` knobs are the consumer retune seam.
- *
- * @import-ed by dock.css in the dock partial cascade, in the SAME `@layer components`. */
-
-@layer components {
-    /* The armed seat — the control is RESERVED. The static min-*-size locks the resting
-       footprint from frame 0 (the no-box-jump); the dim opacity is the placeholder
-       ghost awaiting the CTA's arrival. The `transition: opacity` is declared HERE (not
-       only on the cleared state) so the GHOST→content reveal is a smooth fade in BOTH
-       directions on the SAME compositor-safe register — the box is already sized, only
-       the opacity moves. */
-    [data-cta-pending] {
-        /* The STATIC resting-geometry reserve (T2) — a one-time min-*-size off the
-           control's own resting box. NEVER transitioned (an animated dimension
-           CLS-storms — the proof:no-layout-animation floor). */
-        min-inline-size: var(--dock-control-size, var(--size-icon-btn));
-        min-block-size: var(
-            --dock-layer-height,
-            var(--dock-control-size, var(--size-icon-btn))
-        );
-
-        /* The dim GHOST placeholder — the control awaits its arrival (T3). */
-        opacity: var(--cta-seat-ghost-opacity, 0.35);
-
-        /* The FLIP reveal register — a PLAIN opacity transition on --ease-out
-           (no-overshoot). Default duration tracks the snappy spring envelope so the
-           reveal reads as the same family as the morph that lands the CTA. */
-        transition: opacity
-            var(--cta-seat-reveal-duration, var(--spring-snappy-duration))
-            var(--ease-out);
-    }
-
-    /* The seated CONTENT also dims while pending — the icon/label is the thing that
-       fades back in on reveal. Direct-child targeting keeps the seat layout-agnostic
-       (it does not name a control class — Q5). */
-    [data-cta-pending] > * {
-        opacity: var(--cta-seat-ghost-opacity, 0.35);
-        transition: opacity
-            var(--cta-seat-reveal-duration, var(--spring-snappy-duration))
-            var(--ease-out);
-    }
-
-    /* PRM — the reveal is an INSTANT opacity swap (the vestibular floor; the seat snaps
-       to its content, zero transition frames). The reserve is unchanged (it is static,
-       not a motion). The gesture completes; the animation is off. */
-    @media (prefers-reduced-motion: reduce) {
-        [data-cta-pending],
-        [data-cta-pending] > * {
-            transition: none;
-        }
-    }
-}