@mkbabb/glass-ui 3.13.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.13.0",
+    "version": "4.0.0",
     "description": "Glassmorphic design system \u2014 Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
@@ -31,6 +31,9 @@
             "controls": [
                 "dist/controls.d.ts"
             ],
+            "color-swatch": [
+                "dist/color-swatch.d.ts"
+            ],
             "confirm-dialog": [
                 "dist/confirm-dialog.d.ts"
             ],
@@ -46,6 +49,9 @@
             "stacked-icons": [
                 "dist/stacked-icons.d.ts"
             ],
+            "icon-chip": [
+                "dist/icon-chip.d.ts"
+            ],
             "aurora": [
                 "dist/aurora.d.ts"
             ],
@@ -55,6 +61,9 @@
             "color": [
                 "dist/color.d.ts"
             ],
+            "fading-scroll": [
+                "dist/fading-scroll.d.ts"
+            ],
             "fourier-field": [
                 "dist/fourier-field.d.ts"
             ],
@@ -85,6 +94,9 @@
             "paper-backdrop": [
                 "dist/paper-backdrop.d.ts"
             ],
+                "pager-dots": [
+                    "dist/pager-dots.d.ts"
+                ],
             "toggle-chip": [
                 "dist/toggle-chip.d.ts"
             ],
@@ -118,8 +130,8 @@
             "scrolling-text": [
                 "dist/scrolling-text.d.ts"
             ],
-            "underline": [
-                "dist/underline.d.ts"
+            "handmark": [
+                "dist/handmark.d.ts"
             ],
             "glass-panel": [
                 "dist/glass-panel.d.ts"
@@ -264,6 +276,10 @@
             "types": "./dist/controls.d.ts",
             "import": "./dist/controls.js"
         },
+        "./color-swatch": {
+            "types": "./dist/color-swatch.d.ts",
+            "import": "./dist/color-swatch.js"
+        },
         "./confirm-dialog": {
             "types": "./dist/confirm-dialog.d.ts",
             "import": "./dist/confirm-dialog.js"
@@ -284,6 +300,10 @@
             "types": "./dist/stacked-icons.d.ts",
             "import": "./dist/stacked-icons.js"
         },
+        "./icon-chip": {
+            "types": "./dist/icon-chip.d.ts",
+            "import": "./dist/icon-chip.js"
+        },
         "./aurora": {
             "types": "./dist/aurora.d.ts",
             "import": "./dist/aurora.js"
@@ -296,6 +316,10 @@
             "types": "./dist/color.d.ts",
             "import": "./dist/color.js"
         },
+        "./fading-scroll": {
+            "types": "./dist/fading-scroll.d.ts",
+            "import": "./dist/fading-scroll.js"
+        },
         "./fourier-field": {
             "types": "./dist/fourier-field.d.ts",
             "import": "./dist/fourier-field.js"
@@ -348,6 +372,10 @@
             "types": "./dist/paper-backdrop.d.ts",
             "import": "./dist/paper-backdrop.js"
         },
+        "./pager-dots": {
+            "types": "./dist/pager-dots.d.ts",
+            "import": "./dist/pager-dots.js"
+        },
         "./toggle-chip": {
             "types": "./dist/toggle-chip.d.ts",
             "import": "./dist/toggle-chip.js"
@@ -384,9 +412,9 @@
             "types": "./dist/scrolling-text.d.ts",
             "import": "./dist/scrolling-text.js"
         },
-        "./underline": {
-            "types": "./dist/underline.d.ts",
-            "import": "./dist/underline.js"
+        "./handmark": {
+            "types": "./dist/handmark.d.ts",
+            "import": "./dist/handmark.js"
         },
         "./glass-panel": {
             "types": "./dist/glass-panel.d.ts",
@@ -587,8 +615,12 @@
         "proof:motion-demo": "node scripts/proof-motion-demo.mjs",
         "proof:motion2": "node scripts/proof-motion2.mjs",
         "proof:rail3": "node scripts/proof-rail3.mjs",
+        "proof:dock-sections": "node scripts/proof-dock-sections.mjs",
+        "proof:dock-morph-insitu": "node scripts/proof-dock-morph-insitu.mjs",
+        "proof:shell-hold": "node scripts/proof-shell-hold.mjs",
         "proof:az-reflect": "node scripts/proof-az-reflect.mjs",
         "proof:az-final": "node scripts/proof-az-final.mjs",
+        "proof:ba-final": "node scripts/proof-ba-final.mjs",
         "proof:shell-identity": "node scripts/proof-shell-identity.mjs",
         "proof:blob-studio": "node scripts/proof-blob-studio.mjs",
         "proof:blob-studio-config": "node scripts/proof-blob-studio-config.mjs",
@@ -601,7 +633,9 @@
         "proof:design-idiom-localization": "node scripts/proof-design-idiom-localization.mjs",
         "proof:hierarchy": "node scripts/proof-hierarchy.mjs",
         "proof:suffuse": "node scripts/proof-suffuse.mjs",
+        "proof:suffuse2": "node scripts/proof-suffuse2.mjs",
         "proof:colocation": "node scripts/proof-colocation.mjs",
+        "proof:claude-structure-sync": "node scripts/proof-claude-structure-sync.mjs",
         "proof:tailwind-v4-idiom": "node scripts/proof-tailwind-v4-idiom.mjs",
         "proof:au-w9-consumers": "node scripts/proof-au-w9-consumers.mjs",
         "proof:shadow-contract": "node scripts/proof-shadow-contract.mjs",
@@ -720,13 +754,32 @@
         "proof:readme-meta-clean": "node scripts/proof-readme-meta-clean.mjs",
         "proof:convergence-fit-coherent": "node scripts/proof-convergence-fit-coherent.mjs",
         "proof:adaptive-glass": "node scripts/proof-adaptive-glass.mjs",
+        "proof:dark-material": "node scripts/proof-dark-material.mjs",
+        "proof:no-gray": "node scripts/proof-no-gray.mjs",
+        "proof:surface-axis": "node scripts/proof-surface-axis.mjs",
+        "proof:menu-glass": "node scripts/proof-menu-glass.mjs",
+        "proof:pager-ring": "node scripts/proof-pager-ring.mjs",
+        "proof:icon-chip": "node scripts/proof-icon-chip.mjs",
+        "proof:handmark": "node scripts/proof-handmark.mjs",
+        "proof:ba-animate": "node scripts/proof-ba-animate.mjs",
+        "proof:stage": "node scripts/proof-stage.mjs",
+        "proof:fading-scroll": "node scripts/proof-fading-scroll.mjs",
+        "proof:emission": "node scripts/proof-emission.mjs",
+        "proof:goo-redress": "node scripts/proof-goo-redress.mjs",
+        "proof:glass-cal": "node scripts/proof-glass-cal.mjs",
+        "proof:dock-plate-clearance": "node scripts/proof-dock-plate-clearance.mjs",
+        "proof:atlas-ab": "node scripts/proof-atlas-ab.mjs",
+        "proof:config-chassis": "node scripts/proof-config-chassis.mjs",
+        "proof:progress-gradient": "node scripts/proof-progress-gradient.mjs",
+        "proof:demo-affordances": "node scripts/proof-demo-affordances.mjs",
+        "proof:fourier-studio": "node scripts/proof-fourier-studio.mjs",
         "proof:dark-semantic-contrast": "node scripts/proof-dark-semantic-contrast.mjs",
         "proof:glass-material-demo": "node scripts/proof-glass-material-demo.mjs",
         "proof:blob-live-truth": "node scripts/proof-blob-live-truth.mjs",
         "proof:blob-config-atoms": "node scripts/proof-blob-config-atoms.mjs",
         "proof:blob3-strip": "node scripts/proof-blob3-strip.mjs",
         "proof:blob-config": "node scripts/proof-blob-config.mjs",
-        "proof:tabs-unified": "node scripts/proof-tabs-unified.mjs",
+        "proof:tabs-std": "node scripts/proof-tabs-std.mjs",
         "proof:glass-material-sota": "node scripts/proof-glass-material-sota.mjs",
         "proof:primitive-affordance": "node scripts/proof-primitive-affordance.mjs",
         "proof:reka-binding-idiom": "node scripts/proof-reka-binding-idiom.mjs",
@@ -744,9 +797,11 @@
         "proof:live-verified-ledger:ay": "node scripts/proof-live-verified-ledger.mjs --tranche=AY",
         "proof:live-verified-ledger:az": "node scripts/proof-live-verified-ledger.mjs --tranche=AZ",
         "proof:live-verified-ledger:ax": "node scripts/proof-live-verified-ledger.mjs --tranche=AX",
+        "proof:live-verified-ledger:ba": "node scripts/proof-live-verified-ledger.mjs --tranche=BA",
         "proof:disposition-live": "node scripts/proof-disposition-live.mjs",
         "proof:gen-ci-fresh": "node scripts/proof-gen-ci-fresh.mjs",
         "proof:gate-manifest-sound": "node scripts/proof-gate-manifest-sound.mjs",
+        "proof:ba-gestalt": "node scripts/proof-ba-gestalt.mjs",
         "gates:verify-ci": "node scripts/gates.mjs --verify-ci",
         "gates:emit-ci": "node scripts/gates.mjs --emit-ci",
         "profile:bundle": "node scripts/profile-bundle.mjs",
@@ -762,11 +817,13 @@
     "peerDependencies": {
         "@lucide/vue": "^1.16.0",
         "@mkbabb/keyframes.js": "^2.2.0 || ^3.0.0 || ^4.0.0",
+        "@mkbabb/pencil-boil": "^0.4.1",
         "@mkbabb/value.js": "^0.10.0 || ^0.11.0",
         "@vueuse/core": "^14.0",
         "class-variance-authority": "^0.7",
         "clsx": "^2.0",
         "embla-carousel-vue": "^8.0",
+        "perfect-freehand": "^1.2.3",
         "reka-ui": "^2.0",
         "tailwindcss": "^4.0",
         "tw-animate-css": "^1.2.5",
@@ -783,9 +840,15 @@
         "@mkbabb/keyframes.js": {
             "optional": true
         },
+        "@mkbabb/pencil-boil": {
+            "optional": true
+        },
         "@mkbabb/value.js": {
             "optional": true
         },
+        "perfect-freehand": {
+            "optional": true
+        },
         "tw-animate-css": {
             "optional": true
         }
@@ -793,6 +856,7 @@
     "devDependencies": {
         "@lucide/vue": "^1.16.0",
         "@mkbabb/keyframes.js": "^4.1.0",
+        "@mkbabb/pencil-boil": "^0.4.1",
         "@mkbabb/value.js": "^0.10.0",
         "@tailwindcss/postcss": "^4.3.0",
         "@tailwindcss/vite": "^4.3.0",

package/src/styles/animations.css

@@ -141,32 +141,13 @@
     100% { background-position: -200% 0; }
 }
 
-/* ── Sparkle sweep: four-point star traverses a surface diagonally ──
- *
- * Reserved for the chassis primary-action hover (dock-tab-button[data-tier="primary"])
- * and the `Complete!` shimmer cycle. Single keyframe, ~600ms per pass; the
- * consumer rule sets the duration and easing. Reduced-motion guard at the
- * consumer site (per surface — not all sparkle uses share the same gate).
+/* ── Sparkle sweep RETIRED (BA.W-GLASS-CAL, H2a) ──
+ * The `@keyframes sparkle-sweep` + its reduced-motion stub are DELETED with the
+ * disco recipe family — the `btn-audacious` ::after star (its sole consumer) is
+ * gone, and the dock-tab primary tier collapsed onto the calm glass register.
+ * The `Complete!` celebratory shimmer rides its OWN keyframes (gold-shimmer-slide
+ * / shimmer above), never sparkle-sweep.
  */
-@keyframes sparkle-sweep {
-    0% {
-        transform: translate(-30%, -30%) scale(0.5);
-        opacity: 0;
-    }
-    25% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(180%, 180%) scale(1.2);
-        opacity: 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    @keyframes sparkle-sweep {
-        0%, 100% { opacity: 0; transform: none; }
-    }
-}
 
 /* ── Pulse dot bounce: dots variant of <Pulse> ──
  *
@@ -334,7 +315,11 @@
         opacity: 0;
         scale: var(--top-layer-enter-scale, 0.96);
         transition-property: opacity, scale, display, overlay;
-        transition-duration: var(--duration-normal);
+        /* BA.W-GLASS-CAL Unit 3 — the enter rides the bouncy spring's OWN settle
+           clock (`--spring-bouncy-duration`, the 2%-band envelope settle) rather
+           than the generic `--duration-normal`, so the emphatic dialog/popover
+           entrance bounce reads fully instead of being clipped at 0.3s. */
+        transition-duration: var(--spring-bouncy-duration);
         transition-timing-function: var(--spring-bouncy);
         transition-behavior: allow-discrete;
     }

package/src/styles/configurator.css

@@ -40,3 +40,38 @@
 .configurator-presets [role="tablist"] {
     gap: var(--configurator-preset-row-gap);
 }
+
+/* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1, CFG-4). The
+ *    section + inter-row dividers were inline `border-border/40` / `/30` Tailwind
+ *    alphas that VANISHED over the W-DARK-MATERIAL dark glass-floating plate
+ *    ("the sections run together"). They now read the ONE dark-adaptive
+ *    --configurator-divider{,-section} token (minted in tokens/offsets-sizing.css
+ *    with a light-dark() arm + the dark-arm.css `.dark` floor) so a visible
+ *    luminance step survives BOTH plates. These rules paint only the COLOR; the
+ *    `border-b`/`border-t` WIDTH stays on the Tailwind utilities in the SFCs.
+ *
+ *    Cascade: configurator.css imports after utilities.css, and these element-
+ *    targeting selectors override the Tailwind `border-color` default the dropped
+ *    `border-border/N` utilities used to set (the utilities are GONE from the SFC
+ *    class lists, so there is no competing utility to lose to). The faint section
+ *    tonal step (--configurator-section-tint, default transparent on light) reads
+ *    behind a <ConfiguratorLayer> so a section reads as a section without a second
+ *    heading rung. */
+.configurator-layer {
+    border-color: var(--configurator-divider-section);
+    background-color: var(--configurator-section-tint);
+}
+.configurator-layer-body[data-dividers] > * + * {
+    border-color: var(--configurator-divider);
+}
+
+/* The Configurator.vue chrome dividers (the aside top rule, the preset-row +
+ * footer separators) read the inter-row divider token — the SAME dark-adaptive
+ * register, so the whole instrument's hairline grammar lifts in lockstep. The
+ * SFC drops the inline `border-border/40` from these elements; this rule paints
+ * the color. */
+.configurator-aside,
+.configurator-presets,
+.configurator-footer {
+    border-color: var(--configurator-divider);
+}

package/src/styles/dock/density.css

@@ -39,6 +39,19 @@
             calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The
+           painted control plate floors a notch BELOW its track cell so the maximal
+           hover (×--scale-hover-dock 1.1) / active silhouette stays inside the
+           cross-axis clip box with ≥1px margin (the lozenge dies at the plate
+           diameter, not at the clip edge). The inset is a per-SIDE fraction of the
+           control size (0.1 → an 80%-of-cell painted plate, the iOS-26 inset
+           register), so it scales with EVERY density rung in lockstep AND rides the
+           `--dock-scale` coarse multiplier transitively through --dock-control-size.
+           The control families route it through `padding` + `background-clip:
+           content-box`, so the HIT BOX stays the full --dock-control-size (the WCAG
+           2.5.5 44px floor stays on the CELL, never the inset plate) while the
+           PAINTED plate insets within it. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
         );
@@ -87,6 +100,8 @@
             ),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale)
         );
@@ -131,6 +146,8 @@
             ),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale)
         );
@@ -174,6 +191,8 @@
             calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale)
         );

package/src/styles/dock/overflow.css

@@ -33,6 +33,15 @@
     .glass-dock.dock-scroll-x .dock-layer--full {
         min-width: 0;
         overflow-x: auto;
+        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (block) axis explicitly
+           `visible`. A single-axis `overflow-x: auto` makes the OTHER axis compute
+           from `visible` to `auto` (the MDN single-axis-clip-degrades caveat), so
+           the 40px-tall block axis would clip the 1.1× hover / full active control
+           circle top+bottom — the lozenge. Pinning `overflow-y: visible` keeps the
+           block axis genuinely un-clipped so a control's inset plate paints past the
+           track; the inline scroll port (the real over-cap content axis) is
+           untouched. */
+        overflow-y: visible;
         scrollbar-width: none;
         /* Trap the inline-scroll momentum at the dock's own boundary so a
            wheel/trackpad gesture that bottoms out the pill does NOT chain into
@@ -52,6 +61,12 @@
        source order. */
     .glass-dock.vertical.dock-scroll-y {
         overflow-y: auto;
+        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (inline) axis explicitly
+           `visible` (the vertical-dock twin of the horizontal pin above). A
+           single-axis `overflow-y: auto` would compute the inline axis from
+           `visible` to `auto`, clipping a vertical control's inset plate left+right.
+           The block scroll port (the real over-cap axis) is untouched. */
+        overflow-x: visible;
         scrollbar-width: none;
         /* Same momentum-trap as the inline port — a rail that bottoms out must
            not chain its remaining wheel delta into the page scroller behind it. */