@mkbabb/glass-ui 7.0.0 → 9.0.0

package/dist/components/dock/styles/layer-group.css

@@ -1 +1 @@
-@layer components { .dock-separator { @apply flex-shrink-0; width: 1px; height: var(--dock-separator-height); margin: 0 0.375rem; background: var(--surface-tint-15); } .glass-dock.vertical .dock-separator, .dock-layer-group.vertical .dock-separator, .dock-separator[data-orientation="vertical"] { width: var(--dock-separator-height); height: 1px; align-self: center; margin: 0.375rem 0; } .glass-dock.layout-grid .dock-separator { grid-column: 1 / -1; width: 100%; height: 1px; margin: var(--dock-layer-gap, 0.375rem) 0; align-self: center; } .dock-spacer { @apply flex-1; } .dock-layer-group { display: flex; gap: var(--dock-layer-group-gap, var(--dock-layer-gap, 0.25rem)); min-width: 0; min-height: 0; } .dock-layer-group.horizontal { flex-direction: row; align-items: stretch; } .dock-layer-group.horizontal.rail-end { flex-direction: row-reverse; } .dock-layer-group.vertical { flex-direction: column; align-items: stretch; } .dock-layer-group.vertical.rail-end { flex-direction: column-reverse; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail { display: flex; flex-direction: column; flex-shrink: 0; align-self: start; min-height: max-content; gap: var(--dock-layer-rail-gap, 0.125rem); padding: var(--dock-layer-rail-padding, 0.125rem); background: var(--dock-layer-rail-bg, transparent); border-right: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } .dock-layer-group.vertical .dock-layer-rail { flex-direction: row; border-right: none; border-bottom: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } .dock-layer-group.horizontal.rail-end .dock-layer-rail { border-right: none; border-left: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } .dock-layer-group.vertical.rail-end .dock-layer-rail { border-bottom: none; border-top: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail { position: relative; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); border: 0; border-radius: var(--dock-layer-tab-radius, var(--radius-sm)); background: transparent; color: var( --dock-layer-rail-glyph, color-mix( in srgb, var(--dock-fg-on-aurora, var(--foreground)) 78%, transparent ) ); cursor: pointer; font: inherit; font-size: 0.75rem; z-index: 1; transition: background var(--dock-motion-fast), color var(--dock-motion-fast); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab svg { width: 1rem; height: 1rem; flex-shrink: 0; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab:hover { background: var( --dock-layer-rail-hover, color-mix(in srgb, var(--accent) 30%, transparent) ); color: var(--dock-fg-on-aurora, var(--foreground)); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab[aria-selected="true"] { color: var( --dock-rail-active-accent, var(--dock-fg-on-aurora, var(--foreground)) ); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail [role="tab"]:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab-indicator { position: absolute; left: 0; top: 0; width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); opacity: 0; border-radius: var(--dock-layer-tab-radius, var(--radius-sm)); background: var(--dock-layer-rail-active, var(--glass-bg-floating)); transition: width var(--duration-fast) var(--spring-snappy), height var(--duration-fast) var(--spring-snappy), translate var(--duration-fast) var(--spring-snappy); pointer-events: none; } .dock-layer-group.vertical .dock-layer-rail .dock-layer-tab-indicator { width: auto; height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); } }
+@layer components{.dock-separator{@apply flex-shrink-0;width: 1px;height: var(--dock-separator-height);margin: 0 0.375rem;background: var(--dock-hairline);}.glass-dock.vertical .dock-separator,.dock-layer-group.vertical .dock-separator,.dock-separator[data-orientation="vertical"]{width: var(--dock-separator-height);height: 1px;align-self: center;margin: 0.375rem 0;}:is(.glass-dock,.dock-layer-group):not(.vertical) .dock-hairline{align-self: stretch;height: 100%;margin-block: 0;}:is(.glass-dock,.dock-layer-group).vertical .dock-hairline{align-self: stretch;width: 100%;margin-inline: 0;}.dock-spacer{@apply flex-1;}.dock-layer-group{display: flex;gap: var(--dock-layer-group-gap,var(--dock-layer-gap,0.25rem));min-width: 0;min-height: 0;}.dock-layer-group.horizontal{flex-direction: row;align-items: stretch;}.dock-layer-group.horizontal.switcher-end{flex-direction: row-reverse;}.dock-layer-group.vertical{flex-direction: column;align-items: stretch;}.dock-layer-group.vertical.switcher-end{flex-direction: column-reverse;}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher{display: flex;flex-direction: column;flex-shrink: 0;align-self: start;min-height: max-content;gap: var(--dock-layer-switcher-gap,0.125rem);padding: var(--dock-layer-switcher-padding,0.125rem);background: var(--dock-layer-switcher-bg,transparent);border-right: 1px solid var(--dock-hairline);}.dock-layer-group.vertical .dock-layer-switcher{flex-direction: row;border-right: none;border-bottom: 1px solid var(--dock-hairline);}.dock-layer-group.horizontal.switcher-end .dock-layer-switcher{border-right: none;border-left: 1px solid var(--dock-hairline);}.dock-layer-group.vertical.switcher-end .dock-layer-switcher{border-bottom: none;border-top: 1px solid var(--dock-hairline);}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher{position: relative;}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .dock-layer-tab{position: relative;display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;width: var(--dock-layer-tab-size,var(--dock-control-size,1.75rem));height: var(--dock-layer-tab-size,var(--dock-control-size,1.75rem));border: 0;border-radius: var(--dock-layer-tab-radius,var(--radius-sm));background: transparent;color: var( --dock-layer-switcher-glyph,color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) 78%,transparent ) );cursor: pointer;font: inherit;font-size: var(--type-caption);z-index: 1;transition: background var(--dock-motion-fast),color var(--dock-motion-fast);}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .dock-layer-tab svg{width: 1rem;height: 1rem;flex-shrink: 0;}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .dock-layer-tab:hover{background: var( --dock-layer-switcher-hover,color-mix(in srgb,var(--accent) 30%,transparent) );color: var(--dock-fg-on-aurora,var(--foreground));}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .dock-layer-tab[aria-selected="true"]{color: var( --dock-layer-switcher-glyph-active,var(--dock-fg-on-aurora,var(--foreground)) );}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher [role="tab"]:focus-visible{outline: var(--dock-ring-width) solid var(--dock-ring-color);outline-offset: var(--dock-ring-offset);}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .dock-layer-tab-indicator{position: absolute;left: 0;top: 0;width: var(--dock-layer-tab-size,var(--dock-control-size,1.75rem));opacity: 0;border-radius: var(--dock-layer-tab-radius,var(--radius-sm));background: var(--dock-layer-switcher-active,var(--glass-plate-floating));transition: width var(--spring-dock-duration) var(--spring-dock),height var(--spring-dock-duration) var(--spring-dock),translate var(--spring-dock-duration) var(--spring-dock);pointer-events: none;}.dock-layer-group.vertical .dock-layer-switcher .dock-layer-tab-indicator{width: auto;height: var(--dock-layer-tab-size,var(--dock-control-size,1.75rem));}}

package/dist/components/dock/styles/layers.css

@@ -1 +1 @@
-@layer components { :where(.glass-dock, .dock-layer-group) .dock-layers { display: grid; min-width: 0; } .glass-dock[data-morphing] { --dock-live: calc( var(--dock-collapsed-px, var(--dock-expanded-px, 0px)) + ( var(--dock-expanded-px, 0px) - var(--dock-collapsed-px, var(--dock-expanded-px, 0px)) ) * clamp(0, var(--dock-expand-t), 1) ); --dock-size-scale: clamp( 0.06, calc(var(--dock-live) / max(var(--dock-expanded-px, 1px), 1px)), 1 ); transform-origin: center center; will-change: transform; } .glass-dock[data-morphing]:not(.vertical) { inline-size: var(--dock-expanded-px); } .glass-dock[data-morphing].vertical { block-size: var(--dock-expanded-px); } .glass-dock.expanded:not(.dock-overflow-wrap) > .dock-controls > .dock-layers { overflow-x: visible; } :where(.glass-dock, .dock-layer-group) .dock-layer { transition: visibility 0s linear var(--duration-normal); } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving) { opacity: 0; visibility: hidden; pointer-events: none; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: visibility 0s; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-leaving { opacity: 0; visibility: visible; pointer-events: none; } .glass-dock[data-morphing] .dock-layer.is-leaving { opacity: calc(1 - var(--dock-morph-t)); } .glass-dock .dock-layer.is-leaving.is-press-keepalive { opacity: 1; visibility: visible; pointer-events: none; } .glass-dock .dock-layer.is-leaving.is-press-keepalive [inert] { visibility: hidden; } .glass-dock .dock-layer.is-leaving.is-press-keepalive [data-dock-press-origin] { position: relative; z-index: 1; pointer-events: auto; } :where(.glass-dock, .dock-layer-group) .dock-layer { display: flex; align-items: center; grid-area: 1 / 1; gap: var(--dock-layer-gap, 0.375rem); } .glass-dock:not(.vertical) .dock-layer { white-space: nowrap; min-height: var(--dock-layer-height, 2.5rem); } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active { position: relative; } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active) { position: absolute; inset: 0; } .glass-dock[data-morphing] .dock-layer.is-active > * { --dock-stagger-window: var(--dock-stagger-window-size, 0.55); --dock-stagger-onset: 0; --child-reveal: clamp( 0, calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ), 1 ); opacity: var(--child-reveal); scale: calc(0.82 + 0.18 * var(--child-reveal)); transform-origin: center; } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 1); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 2); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4):nth-child(-n + 5) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 3); } .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers { width: 100%; } .glass-dock.expanded:not(.fit-content) .dock-layer--full { width: 100%; } .glass-dock.always-expanded { cursor: default; } .glass-dock.layout-grid { white-space: normal; } .glass-dock.layout-grid .dock-layer--full { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--dock-tile-min, 4.5rem), 1fr) ); grid-auto-rows: var(--dock-tile-min, 4.5rem); gap: var(--dock-layer-gap, 0.375rem); width: 100%; height: auto; white-space: normal; place-items: center; } .glass-dock.layout-grid .dock-layers { width: 100%; } .glass-dock.layout-grid.shape-card .dock-layer--full > * { border-radius: calc( var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem) ); } }
+@layer components{:where(.glass-dock,.dock-layer-group) .dock-layers{display: grid;min-width: 0;}.glass-dock[data-morphing]{--dock-live: calc( var(--dock-collapsed-px,var(--dock-expanded-px,0px)) + ( var(--dock-expanded-px,0px) - var(--dock-collapsed-px,var(--dock-expanded-px,0px)) ) * clamp(0,var(--dock-expand-t),1) );--dock-size-scale: clamp( 0.06,calc(var(--dock-live) / max(var(--dock-expanded-px,1px),1px)),1 );transform-origin: center center;will-change: transform;}.glass-dock[data-morphing]:not(.vertical){inline-size: var(--dock-expanded-px);}.glass-dock[data-morphing].vertical{block-size: var(--dock-expanded-px);}.glass-dock.expanded > .dock-controls > .dock-layers{overflow-x: visible;}:where(.glass-dock,.dock-layer-group) .dock-layer{transition: visibility 0s linear var(--duration-normal);}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving){opacity: 0;visibility: hidden;pointer-events: none;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{opacity: 1;visibility: visible;pointer-events: auto;transition: visibility 0s;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-leaving{opacity: 0;visibility: visible;pointer-events: none;}.glass-dock[data-morphing] .dock-layer.is-leaving{opacity: calc(1 - var(--dock-morph-t));}.glass-dock .dock-layer.is-leaving.is-press-keepalive{opacity: 1;visibility: visible;pointer-events: none;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [inert]{visibility: hidden;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [data-dock-press-origin]{position: relative;z-index: 1;pointer-events: auto;}:where(.glass-dock,.dock-layer-group) .dock-layer{display: flex;align-items: center;grid-area: 1 / 1;gap: var(--dock-layer-gap,0.375rem);}.glass-dock:not(.vertical) .dock-layer{white-space: nowrap;min-height: var(--dock-layer-height,2.5rem);}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{position: relative;}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active){position: absolute;inset: 0;}.glass-dock[data-morphing] .dock-layer.is-active > *{--dock-stagger-window: var(--dock-stagger-window-size,0.55);--dock-stagger-onset: 0;--child-reveal: clamp( 0,calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ),1 );opacity: var(--child-reveal);scale: calc(0.82 + 0.18 * var(--child-reveal));transform-origin: center;}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of *),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of *){--dock-stagger-onset: calc(var(--dock-stagger-step) * 1);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of *),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of *){--dock-stagger-onset: calc(var(--dock-stagger-step) * 2);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4):nth-child(-n + 5){--dock-stagger-onset: calc(var(--dock-stagger-step) * 3);}.glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers{width: 100%;}.glass-dock.expanded:not(.fit-content) .dock-layer--full{width: 100%;}.glass-dock.always-expanded{cursor: default;}}

package/dist/components/dock/styles/morph.css

@@ -1 +1 @@
-@layer components { .glass-dock.expanded, .glass-dock.always-expanded { --dock-expand-t: 1; } .glass-dock.collapsed { --dock-expand-t: 0; } .glass-dock.expanded[data-morphing], .glass-dock.always-expanded[data-morphing] { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed[data-morphing] { --dock-expand-t: calc(1 - var(--dock-morph-t)); } .glass-dock { --dock-reveal-blur: 0px; } .glass-dock[data-morphing] { --dock-reveal-blur: 1.25px; filter: blur( calc( var(--dock-reveal-blur) * clamp(0, calc((0.5 - var(--dock-expand-t)) / 0.5), 1) ) ); } .glass-dock:not(.vertical) .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-resting)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock.vertical .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-wash)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock:not(.vertical):not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-block, 0.375rem), var(--dock-collapsed-padding, 0px) ); padding-block: var(--dock-padding-block, 0.375rem); padding-inline: calc( var(--dock-pad-collapsed) + (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.vertical:not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-inline, 0.5rem), var(--dock-collapsed-padding, 0px) ); padding-inline: var(--dock-padding-inline, 0.5rem); padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.collapsed { cursor: pointer; justify-content: center; box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed)); } .glass-dock .dock-layer--summary { min-width: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); min-block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); height: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); aspect-ratio: 1; justify-content: center; } .glass-dock[data-morphing] .dock-layer--summary { --dock-expand-t: var(--dock-morph-t); } .glass-dock .dock-layer--summary:empty { min-width: 0; inline-size: 0; padding: 0; margin: 0; border: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers { margin-inline-start: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent { display: grid; place-items: center; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > * { place-self: center; } .glass-dock.collapsed .dock-persistent svg, .glass-dock.collapsed .dock-layer--summary svg { min-width: 1rem; min-height: 1rem; } .glass-dock.collapsed:hover { box-shadow: var(--shadow-dock-override, var(--shadow-dock)); } .glass-dock.collapsed:hover .dock-plate { background: var(--glass-bg-wash); border-color: var(--glass-border-floating); } .glass-dock.collapsed:hover:not([data-morphing]) { scale: var(--dock-collapsed-hover-scale); will-change: transform; } .glass-dock[data-held] .dock-plate { background: color-mix( in oklab, var(--glass-bg-floating, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-floating, var(--glass-border-resting)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } }
+@layer components{.glass-dock.expanded,.glass-dock.always-expanded{--dock-expand-t: 1;}.glass-dock.collapsed{--dock-expand-t: 0;}.glass-dock.expanded[data-morphing],.glass-dock.always-expanded[data-morphing]{--dock-expand-t: var(--dock-morph-t);}.glass-dock.collapsed[data-morphing]{--dock-expand-t: calc(1 - var(--dock-morph-t));}.glass-dock:not(.vertical){--dock-pad-collapsed: max( var(--dock-padding-block,0.375rem),var(--dock-collapsed-padding,0px) );padding-block: var(--dock-padding-block,0.375rem);padding-inline: calc( var(--dock-pad-collapsed) + (var(--dock-padding-inline,0.5rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) );}.glass-dock.vertical{--dock-pad-collapsed: max( var(--dock-padding-inline,0.5rem),var(--dock-collapsed-padding,0px) );padding-inline: var(--dock-padding-inline,0.5rem);padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block,0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) );}.glass-dock.collapsed{cursor: pointer;justify-content: center;box-shadow: var(--shadow-dock-override,var(--shadow-dock-collapsed));}.glass-dock .dock-layer--summary{min-width: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );min-block-size: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );block-size: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );height: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );aspect-ratio: 1;justify-content: center;}.glass-dock[data-morphing] .dock-layer--summary{--dock-expand-t: var(--dock-morph-t);}.glass-dock .dock-layer--summary:empty{min-width: 0;inline-size: 0;padding: 0;margin: 0;border: 0;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers{margin-inline-start: 0;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent{display: grid;place-items: center;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > *{place-self: center;}.glass-dock.collapsed .dock-persistent svg,.glass-dock.collapsed .dock-layer--summary svg{min-width: 1rem;min-height: 1rem;}.glass-dock.collapsed:hover{box-shadow: var(--shadow-dock-override,var(--shadow-dock));}.glass-dock[data-held] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);transition: border-color var(--duration-fast) var(--ease-standard);}}

package/dist/components/dock/styles/run.css

@@ -0,0 +1 @@
+@layer components{.glass-dock{--dock-seat: var(--dock-control-size);--dock-run-gap: 0.5rem;--dock-pitch: calc(var(--dock-seat) + var(--dock-run-gap));--dock-open-pitches: 3;--dock-open-seat: calc( var(--dock-open-pitches) * var(--dock-pitch) - var(--dock-run-gap) );}.glass-dock.vertical{--dock-open-pitches: 2;}.glass-dock > .dock-controls > .dock-layers{flex: 1 1 auto;min-inline-size: 0;min-block-size: 0;}.glass-dock > .dock-controls > .dock-persistent{flex: 0 0 auto;}.glass-dock .dock-run{overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;scroll-padding-inline: calc(var(--dock-pitch) / 2);touch-action: pan-x;overscroll-behavior: contain;scrollbar-width: none;min-inline-size: 0;box-sizing: content-box;padding-block: var(--dock-ring-reserve);margin-block: calc(-1 * var(--dock-ring-reserve));gap: var(--dock-run-gap);}.glass-dock .dock-run::-webkit-scrollbar{display: none;}.glass-dock .dock-run > *{scroll-snap-align: start;flex: 0 0 auto;}.glass-dock.vertical .dock-run{overflow-x: hidden;overflow-y: auto;scroll-snap-type: y mandatory;scroll-padding-block: calc(var(--dock-pitch) / 2);touch-action: pan-y;min-block-size: 0;padding-block: 0;margin-block: 0;padding-inline: var(--dock-ring-reserve);margin-inline: calc(-1 * var(--dock-ring-reserve));}.glass-dock .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: var(--dock-open-seat);transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock.vertical .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: auto;block-size: var(--dock-open-seat);transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock{timeline-scope: --dock-run;--dock-cap-rest: 50%;--dock-cap-cut: var(--radius-card);}.glass-dock.shape-rounded{--dock-cap-rest: var(--radius-card);--dock-cap-cut: var(--radius-xs);}.glass-dock.shape-card{--dock-cap-rest: var(--dock-card-radius,var(--radius-dock-card));--dock-cap-cut: var(--radius-lg);}.glass-dock .dock-run{scroll-timeline: --dock-run inline;}.glass-dock.vertical .dock-run{scroll-timeline: --dock-run block;}.glass-dock .dock-plate{animation: gl-dock-cap-inline-start linear both,gl-dock-cap-inline-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock.vertical .dock-plate{animation: gl-dock-cap-block-start linear both,gl-dock-cap-block-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock .dock-run-status{position: absolute;inline-size: 1px;block-size: 1px;margin: -1px;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0;}}@keyframes gl-dock-cap-inline-start{from{border-start-start-radius: var(--dock-cap-rest);border-end-start-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-end-start-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-inline-end{from{border-start-end-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-start-end-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-start{from{border-start-start-radius: var(--dock-cap-rest);border-start-end-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-start-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-end{from{border-end-start-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-end-start-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}

package/dist/components/dock/styles/search.css

@@ -1 +1 @@
-@layer components { .glass-dock[data-search] .dock-search-field { display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; gap: var(--dock-search-field-gap, 0.375rem); } .glass-dock[data-search] .dock-search-field .input-bar { background: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); color: var(--foreground); } .glass-dock[data-search] .dock-search-field .input-bar-field::placeholder, .glass-dock[data-search] .dock-search-field .dock-search-ghost, .glass-dock[data-search] .dock-search-field .dock-search-result-meta { color: var(--on-glass-muted); } .glass-dock[data-search] .dock-search-field .dock-search-result { color: var(--foreground); } }
+@layer components{.glass-dock .dock-search-field{display: flex;flex-direction: column;inline-size: 100%;min-inline-size: 0;gap: var(--dock-search-field-gap,0.375rem);}.glass-dock .dock-search-field .input-bar{--glass-veil-tier: var(--glass-veil-floating);@apply glass-plate;color: var(--foreground);}.glass-dock .dock-search-field .input-bar-field::placeholder,.glass-dock .dock-search-field .dock-search-ghost,.glass-dock .dock-search-field .dock-search-result-meta{color: var(--on-glass-muted);}.glass-dock .dock-search-field .dock-search-result{color: var(--foreground);}}

package/dist/components/dock/styles/shape.css

@@ -1 +1 @@
-@layer components { .glass-dock { border-radius: calc( var(--dock-shape-from, var(--radius-dock)) + ( var(--dock-shape-to, var(--radius-dock)) - var(--dock-shape-from, var(--radius-dock)) ) * var(--dock-expand-t) ); } .glass-dock { --dock-shape-clip: var(--dock-shape-clip-to, none); clip-path: var(--dock-shape-clip); } .glass-dock[data-morphing] { --dock-shape-clip: var(--dock-shape-clip-from, none); } .glass-dock[data-morphing]:where(.expanded, .always-expanded) { --dock-shape-clip: var(--dock-shape-clip-to, none); } .glass-dock[data-morphing]:not(.vertical) { scale: var(--dock-size-scale, 1) 1; } .glass-dock[data-morphing].vertical { scale: 1 var(--dock-size-scale, 1); } .glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-persistent, .glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-layers { scale: calc(1 / max(var(--dock-size-scale, 1), 0.06)) 1; will-change: transform; } .glass-dock[data-morphing].vertical > .dock-controls > .dock-persistent, .glass-dock[data-morphing].vertical > .dock-controls > .dock-layers { scale: 1 calc(1 / max(var(--dock-size-scale, 1), 0.06)); will-change: transform; } .glass-dock { --motion-weight: 1; } @media (prefers-reduced-motion: reduce) { .glass-dock { --motion-weight: 0; } } }
+@layer components{.glass-dock{border-radius: var(--radius-dock);}.glass-dock[data-morphing]:not(.vertical){scale: var(--dock-size-scale,1) 1;}.glass-dock[data-morphing].vertical{scale: 1 var(--dock-size-scale,1);}.glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-persistent,.glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-layers{scale: calc(1 / max(var(--dock-size-scale,1),0.06)) 1;will-change: transform;}.glass-dock[data-morphing].vertical > .dock-controls > .dock-persistent,.glass-dock[data-morphing].vertical > .dock-controls > .dock-layers{scale: 1 calc(1 / max(var(--dock-size-scale,1),0.06));will-change: transform;}.glass-dock{--motion-weight: 1;}@media (prefers-reduced-motion: reduce){.glass-dock{--motion-weight: 0;}}}

package/dist/components/dock/styles/shell-regions.css

@@ -1 +1 @@
-@layer components { .dock-persistent { display: flex; align-items: center; flex-shrink: 0; gap: var(--dock-layer-gap, 0.375rem); } .glass-dock:not(.vertical) .dock-persistent { flex-direction: row; } .glass-dock.vertical .dock-persistent { flex-direction: column; align-items: stretch; } .glass-dock:not(.vertical) .dock-persistent + .dock-layers { margin-inline-start: var(--dock-layer-gap, 0.375rem); } .glass-dock.vertical .dock-persistent + .dock-layers { margin-block-start: var(--dock-layer-gap, 0.375rem); } .glass-dock.vertical .dock-layer { flex-direction: column; align-items: stretch; gap: var(--dock-layer-gap, 0.375rem); min-width: 0; } }
+@layer components{.dock-persistent{display: flex;align-items: center;flex-shrink: 0;gap: var(--dock-layer-gap,0.375rem);}.glass-dock:not(.vertical) .dock-persistent{flex-direction: row;}.glass-dock.vertical .dock-persistent{flex-direction: column;align-items: stretch;}.glass-dock:not(.vertical) .dock-persistent + .dock-layers{margin-inline-start: var(--dock-layer-gap,0.375rem);}.glass-dock.vertical .dock-persistent + .dock-layers{margin-block-start: var(--dock-layer-gap,0.375rem);}.glass-dock.vertical .dock-layer{flex-direction: column;align-items: stretch;min-width: 0;}}

package/dist/components/dock/styles/shell.css

@@ -1 +1 @@
-@layer components { .glass-dock { --glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.2); --dock-surface-blur: var(--glass-blur-resting); --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5); --dock-collapsed-hover-scale: var(--scale-hover-dock); --dock-stagger-window-size: 0.4; --dock-stagger-step: 0.08; --dock-card-radius: var(--radius-dock-card); --dock-tile-min: 4.5rem; position: relative; z-index: 0; --glass-backdrop: light; contain: layout style; display: inline-flex; align-items: center; white-space: nowrap; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock)); } .dark .glass-dock { --glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.3) brightness(1.14); } .glass-dock { overflow: visible; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { overflow-x: visible; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; } .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar, .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar { display: none; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { mask-image: linear-gradient( to bottom, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self block), scroll(self block); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.vertical { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--dock-layer-gap, 0.375rem); white-space: normal; width: auto; height: auto; max-block-size: var(--dock-max-block-size); padding: var(--dock-padding-block, 0.375rem); border-radius: var(--radius-dock); transition: box-shadow var(--dock-motion-standard), transform var(--dock-motion-resize), scale var(--dock-motion-resize); } .glass-dock.vertical[data-morphing] { transition-property: box-shadow, transform; } .glass-dock.vertical:hover, .glass-dock.vertical:active, .glass-dock.vertical[data-held] { will-change: transform; } .glass-dock.vertical { padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem)); } .glass-dock.vertical .dock-plate { background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-dock, var(--glass-border-wash)); } .glass-dock.vertical.shape-pill { border-radius: var(--radius-pill); } .glass-dock.vertical.shape-rounded { border-radius: var(--radius-xl); } .glass-dock.vertical.shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } .glass-dock:not(.vertical).shape-rounded { border-radius: var(--radius-xl); } .glass-dock:not(.vertical).shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } @supports (corner-shape: superellipse(2)) { .glass-dock:not(.vertical).shape-card { corner-shape: var(--corner-shape-bigdock); } } .glass-dock:where(.fixed) { z-index: var(--z-dock); } .dock-inline { margin: 0 auto; } .dock-sticky { position: sticky; top: 0; z-index: var(--z-dock); margin: 0 auto; } }
+@layer components{.glass-dock{--glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.2);--dock-surface-blur: var(--glass-blur-resting);--dock-separator-height: calc(var(--dock-h,var(--size-icon-btn)) * 0.5);--dock-stagger-window-size: 0.4;--dock-stagger-step: 0.08;--dock-card-radius: var(--radius-dock-card);position: relative;z-index: 0;margin: 0 auto;--glass-backdrop: light;--dock-plate-collapsed-tier: var(--glass-veil-wash);--dock-plate-collapsed-border: var(--glass-border-floating);--dock-plate-expanded-tier: var(--glass-veil-dock);--dock-plate-expanded-border: var(--glass-border-dock);contain: layout style;display: inline-flex;align-items: center;white-space: nowrap;padding: var(--dock-padding-block,0.375rem) var(--dock-padding-inline,0.5rem);box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),var(--shadow-dock-override,var(--shadow-dock));}.dark .glass-dock{--glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.3) brightness(1.14);}.glass-dock{overflow: visible;}.glass-dock.vertical{display: inline-flex;flex-direction: column;align-items: stretch;justify-content: flex-start;gap: var(--dock-layer-gap,0.375rem);white-space: normal;width: auto;height: auto;max-block-size: var(--dock-max-block-size);padding: var(--dock-padding-block,0.375rem);border-radius: var(--radius-dock);transition: box-shadow var(--dock-motion-standard),transform var(--dock-motion-resize),scale var(--dock-motion-resize);}.glass-dock.vertical[data-morphing]{transition-property: box-shadow,transform;}.glass-dock.vertical:hover,.glass-dock.vertical:active,.glass-dock.vertical[data-held]{will-change: transform;}.glass-dock.vertical{padding: var(--dock-vertical-padding,var(--dock-padding-inline,0.5rem));}.glass-dock.vertical.shape-pill{border-radius: var(--radius-pill);}.glass-dock.vertical.shape-rounded{border-radius: var(--radius-card);}.glass-dock.vertical.shape-card{border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) );}.glass-dock:not(.vertical).shape-rounded{border-radius: var(--radius-card);}.glass-dock:not(.vertical).shape-card{border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) );}@supports (corner-shape: superellipse(2)){.glass-dock:not(.vertical).shape-card{corner-shape: var(--corner-shape-bigdock);}}}

package/dist/components/easing/EasingCurve.vue.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from "vue";
+/** `ink` is the subject; `ghost` is the same plot's other reading, held back. */
+export type EasingStrokeTone = "ink" | "ghost";
+/**
+ * One plotted curve.
+ *
+ * `d` is a PATH, not a callable, and that is deliberate: a staircase's shape is its
+ * exact riser positions, and a display unit handed a callable can only sample — which
+ * is precisely how the previous plot spent 241 commands failing to draw a crisp
+ * riser. The owner of the curve knows whether it is smooth or stepped and hands over
+ * the exact path; `usePicker` publishes both.
+ *
+ * There is no `css` field, and its absence is load-bearing: a stroke that renders its
+ * own literal is a SECOND print of the thing the editor prints exactly once. The plot
+ * takes a `label`; the literal has one home.
+ */
+export interface EasingStroke {
+    /** The path `d`, in the plot's SVG space (x rightwards, y downwards). */
+    d: string;
+    tone?: EasingStrokeTone;
+}
+type __VLS_Props = {
+    /** The plotted curves, drawn in order. */
+    strokes: EasingStroke[];
+    /** Normalized travel position; the dot rides the FIRST `ink` stroke's curve. */
+    progress?: number;
+    /** The travelling dot's value at `progress`, in curve space (0 bottom). */
+    travel?: number | null;
+    /** Marks the plot as leaving the frame — the crossed edges take the accent. */
+    clipped?: boolean;
+    /**
+     * Whether the ink stroke is DRAWN. Flip it to `false` and back a frame later
+     * and the ink wipes itself on. Owned by the caller — this unit keeps no state
+     * — and it defaults to `true`, so a plot that is merely shown is shown
+     * finished.
+     */
+    drawn?: boolean;
+    /** The plot's accessible name. */
+    label?: string;
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    class: string | false | Record<string, any> | import("vue").ClassValue[] | null;
+    label: string;
+    progress: number;
+    travel: number | null;
+    clipped: boolean;
+    drawn: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/easing/EasingPicker.vue.d.ts

@@ -1,49 +1,33 @@
-import { type EasingPickerMode, type EasingPickerValue, type JumpTerm } from "./composables/useEasingPicker";
+import { type HTMLAttributes } from "vue";
+import { type EasingPickerValue } from "./usePicker.js";
+/** `card` seats the editor on the resting rung; `bare` renders no plate at all —
+ *  the escape a consumer used to buy with `backdrop-filter: none` and `!important`. */
+export type EasingSurface = "card" | "bare";
 type __VLS_Props = {
-    /** The curve-authoring mode — `"bezier"` (draggable cubic-bezier) or
-     *  `"steps"` (the steppedEase staircase). */
-    mode?: EasingPickerMode;
-    /** The initial bezier preset key. */
-    preset?: string;
-    /** The initial step count. */
-    steps?: number;
-    /** The initial step jump term. */
-    term?: JumpTerm;
-    /** Show the copy-the-literal readout affordance (default true). */
-    readout?: boolean;
-    /** Show the playback travel-dot control (default true). */
+    /** The initial authored curve. Any subset; the rest takes the family default. */
+    initial?: Partial<EasingPickerValue>;
+    /** Show the playback transport and its travelling dot (default true). */
     playback?: boolean;
-    /** A11y label for the canvas. */
+    /** A11y label for the plot. */
     label?: string;
+    /** The material the editor sits on. */
+    surface?: EasingSurface;
+    class?: HTMLAttributes["class"];
 };
 type __VLS_ModelProps = {
     modelValue?: EasingPickerValue;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_122: {
-    value: EasingPickerValue;
-};
-type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_122) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: EasingPickerValue | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: EasingPickerValue | undefined) => any) | undefined;
 }>, {
+    class: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     label: string;
-    mode: EasingPickerMode;
-    steps: number;
-    preset: string;
-    term: JumpTerm;
-    readout: boolean;
+    initial: Partial<EasingPickerValue>;
+    surface: EasingSurface;
     playback: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/easing/constants.d.ts

@@ -5,23 +5,25 @@ export declare const DEFAULT_BEZIER_PRESET: "ease-out-back";
 /** The default steps-mode jump count + term. */
 export declare const DEFAULT_STEP_COUNT = 4;
 export declare const DEFAULT_STEP_TERM: "jump-end";
-/** The steps-mode slider bounds. */
+/** The steps-mode bounds. */
 export declare const STEP_COUNT_MIN = 1;
 export declare const STEP_COUNT_MAX = 12;
-/** Dense staircase sampling so the riser/tread reads crisp (a sampled staircase,
- *  not a smoothed curve). */
-export declare const STEP_PLOT_SAMPLES = 240;
-/** bezier-Y (0 bottom, 1 top) → SVG-Y (0 top, grows down). */
+/** bezier-Y (0 bottom, 1 top) → SVG-Y (0 top, grows down). Its own inverse. */
 export declare const SVG_FLIP: (y: number) => number;
-/** The bezier-canvas viewBox overshoot clamp + pad (a back-curve must not blow up
- *  the canvas). */
-export declare const VIEW_PAD = 0.1;
+/** The frame edges in both axes, in curve space AND in SVG space (the frame is
+ *  square and the flip is an involution, so one pair serves both). */
+export declare const FRAME_MIN: number;
+export declare const FRAME_MAX: number;
+/** THE constant viewBox — square, both modes, every preset, every frame of a drag. */
+export declare const VIEW_BOX: `${number} ${number} ${number} ${number}`;
+/** How far a control point may be authored past the unit box. Handles beyond the
+ *  frame PIN to its edge along their own leader; the authored value keeps going. */
 export declare const MAX_OVERSHOOT = 0.6;
-/** The pointer hit-radius for grabbing a handle (touch is forgiving). */
-export declare const HANDLE_HIT_RADIUS = 0.1;
-export declare const HANDLE_HIT_RADIUS_TOUCH = 0.15;
-/** The number of curve samples the viewBox bounds-fit walks. */
-export declare const VIEWBOX_FIT_SAMPLES = 16;
+/** Pointer hit radii in CSS PIXELS, never user units — a user-unit radius is a
+ *  function of the frame and shrank to a 40.7px target at the small clamp, under
+ *  the 44px coarse floor. 22px radius = the 44px diameter floor exactly. */
+export declare const HANDLE_HIT_RADIUS_PX = 22;
+export declare const HANDLE_HIT_RADIUS_TOUCH_PX = 28;
 /** The one-shot rAF travel clock (ms) for the playback dot. */
 export declare const TRAVEL_DURATION_MS = 1200;
 /** The copy-feedback dwell (ms). */

package/dist/components/easing/index.d.ts

@@ -1,3 +1,5 @@
-export { default as EasingPicker } from "./EasingPicker.vue";
-export { default as EasingConfigurator } from "./EasingConfigurator.vue";
-export { useEasingPicker, type EasingPickerMode, type EasingPickerValue, type EasingFn, type BezierPoints, type JumpTerm, type UseEasingPickerOptions, type UseEasingPickerReturn, } from "./composables/useEasingPicker";
+export { default as EasingCurve } from "./EasingCurve.vue.js";
+export type { EasingStroke, EasingStrokeTone } from "./EasingCurve.vue.js";
+export { default as EasingPicker } from "./EasingPicker.vue.js";
+export type { EasingSurface } from "./EasingPicker.vue.js";
+export { useEasingPicker, type CurvePoint, type EasingPickerMode, type EasingPickerValue, type EasingFn, type BezierPoints, type JumpTerm, type UseEasingPickerOptions, type UseEasingPickerReturn, } from "./usePicker.js";

package/dist/components/easing/{composables/useEasingPicker.d.ts → usePicker.d.ts}

@@ -8,6 +8,11 @@ export type EasingFn = (t: number) => number;
 export type BezierPoints = [number, number, number, number];
 /** A canonical CSS step jump term. */
 export type JumpTerm = (typeof jumpTerms)[number];
+/** A point in the plot's SVG space (x rightwards, y downwards). */
+export interface CurvePoint {
+    readonly x: number;
+    readonly y: number;
+}
 /** The picker's v-model payload — the live curve callable + its re-parseable
  *  CSS literal + the mode, so a consumer can read back the authored curve. */
 export interface EasingPickerValue {
@@ -24,14 +29,8 @@ export interface EasingPickerValue {
     readonly term: JumpTerm;
 }
 export interface UseEasingPickerOptions {
-    /** The initial mode (default `"bezier"`). */
-    initialMode?: EasingPickerMode;
-    /** The initial bezier preset key (default `"ease-out-back"`). */
-    initialPreset?: string;
-    /** The initial step count (default 4). */
-    initialSteps?: number;
-    /** The initial step term (default `"jump-end"`). */
-    initialTerm?: JumpTerm;
+    /** The initial authored curve. Any subset; the rest takes the family default. */
+    initial?: Partial<EasingPickerValue>;
 }
 export interface UseEasingPickerReturn {
     mode: Ref<EasingPickerMode>;
@@ -43,7 +42,11 @@ export interface UseEasingPickerReturn {
     steps: Ref<number>;
     term: Ref<JumpTerm>;
     terms: readonly JumpTerm[];
-    /** The live easing callable for the active mode — re-derived on every edit. */
+    /** The bezier callable, live in both modes (the ghost stroke reads it). */
+    bezierFn: ComputedRef<EasingFn>;
+    /** The staircase callable, live in both modes. */
+    stepFn: ComputedRef<EasingFn>;
+    /** The callable for the ACTIVE mode — the one the readout and the dot follow. */
     easingFn: ComputedRef<EasingFn>;
     /** The complete re-parseable readout literal for the active mode. */
     readout: ComputedRef<string>;
@@ -51,19 +54,21 @@ export interface UseEasingPickerReturn {
     reparseOk: ComputedRef<boolean>;
     /** The full v-model payload (mode + css + fn + raw params). */
     value: ComputedRef<EasingPickerValue>;
-    /** Two SVG-space handle coords `[{x,y},{x,y}]` (bezier mode). */
-    handlesSvg: ComputedRef<{
-        x: number;
-        y: number;
-    }[]>;
-    /** The bezier path `d` (`M 0 1 C …`). */
+    /** The AUTHORED handle coords in SVG space — may sit outside the frame. */
+    handlesSvg: ComputedRef<CurvePoint[]>;
+    /** Where the handles PAINT: on their own leader, clamped to the frame edge. */
+    handlePins: ComputedRef<CurvePoint[]>;
+    /** The two leader anchors, `(0,1)` and `(1,0)` in SVG space. */
+    leaderAnchors: readonly CurvePoint[];
+    /** The bezier path `d` (`M 0 1 C …`) — the authored control points, unclamped. */
     bezierPathD: ComputedRef<string>;
-    /** The sampled staircase path `d` (steps mode). */
+    /** The staircase path `d` — constructed from the callable, never sampled. */
     stepPathD: ComputedRef<string>;
-    /** The bezier-canvas viewBox `{ minY, height }` clamping overshoot. */
-    viewBox: ComputedRef<{
-        minY: number;
-        height: number;
+    /** The active curve's exact extrema and whether it leaves the constant frame. */
+    excursion: ComputedRef<{
+        min: number;
+        max: number;
+        clipped: boolean;
     }>;
     progress: Ref<number>;
     playing: Ref<boolean>;
@@ -74,8 +79,7 @@ export interface UseEasingPickerReturn {
     stopTravel: () => void;
 }
 /**
- * The <EasingPicker> shared editor state. Composes the value.js math; owns the
- * chassis (control points, the literal, the rAF travel). Used by the EasingPicker
- * SFC + (composed through it) the EasingConfigurator register — ONE source.
+ * The `<EasingPicker>` editor state. Composes the value.js math; owns the chassis
+ * (control points, the literal, the constant-frame geometry, the rAF travel).
  */
 export declare function useEasingPicker(options?: UseEasingPickerOptions): UseEasingPickerReturn;

package/dist/components/expandable-container/ExpandableContainer.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Surface } from "../_shared/axes";
+import type { Surface } from "../_shared/axes.js";
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/components/expandable-container/index.d.ts

@@ -1 +1 @@
-export { default as ExpandableContainer } from "./ExpandableContainer.vue";
+export { default as ExpandableContainer } from "./ExpandableContainer.vue.js";

package/dist/components/fading-scroll/constants.d.ts

@@ -1,14 +1,7 @@
 /**
- * Module-scope constants colocated with the FadingScroll family. Both
- * were promoted out of `composables/useFadingScroll.ts` verbatim.
+ * Module-scope constant colocated with the FadingScroll family. Promoted out of
+ * `composables/useFadingScroll.ts` verbatim.
  */
-/**
- * True when the engine genuinely supports a `scroll()` timeline — the CSS recipe
- * in `utilities/base.css` then owns the visual axis on the compositor and the
- * `useFadingScroll` composable becomes the inert (non-attaching) path. Module-level
- * so the feature gate is computed once. (Mirrors `useScrollProgress`'s twin.)
- */
-export declare const NATIVE_SCROLL_TIMELINE: boolean;
 /**
  * Tolerance (CSS px) absorbing scroll-snap jitter — `snap-mandatory` parks the
  * active card a few px off the true start, so the start edge reads as sharp until

package/dist/components/fading-scroll/index.d.ts

@@ -1,2 +1,2 @@
-export { default as FadingScroll } from "./FadingScroll.vue";
-export { useFadingScroll, type UseFadingScrollOptions, type UseFadingScrollControls, } from "./composables/useFadingScroll";
+export { default as FadingScroll } from "./FadingScroll.vue.js";
+export { useFadingScroll, type UseFadingScrollOptions, type UseFadingScrollControls, } from "./composables/useFadingScroll.js";

package/dist/components/fourier-field/FourierField.vue.d.ts

@@ -1,50 +1,50 @@
-import type { ColorResolver, OklchStop } from "../../composables/color";
-import { type BasisComponent } from "./math";
-import type { FourierFieldConfig } from "./constants";
-import type { RendererStatus } from "../../composables/glass/webgpu/rendererStatus";
+import type { OklchStop } from "../../composables/color/index.js";
+import { type BasisComponent } from "./math.js";
+import { type FourierFieldConfig } from "./constants.js";
+import type { RendererStatus } from "../../composables/glass/webgpu/rendererStatus.js";
 /**
- * FourierField — a Fourier epicycle field on the GPU substrate, a
- * sibling primitive to Aurora, GooBlob, and DotFlowField. A chain of rotating circles
- * stacked tip-to-tail draws the reconstructing partial-sum curve; a glowing comet head
- * leads the fading trail. WebGPU-FIRST: the compute pass writes the partial-sum curve +
- * the epicycle chain tips, the fullscreen-fragment render pass composites the SDF field; a
- * WebGL2 GLSL twin is the fallback. It composes `useFourierField` with the
- * `createGpuSubstrate` picker over the ONE canvas lifecycle leaf (offscreen-pause, live-PRM
- * freeze, consumer-owned DPR) and the SHARED `usePointerVelocityField` (the pointer SCRUBS
- * the reconstruction).
+ * FourierField — the drawing machine.
  *
- * The DEFAULT palette is the warm-cream library identity (`--viz-fourier` warm-amber); a
- * demo Teal/cool preset stays demo-LOCAL (presets-in-consumers — never a library token).
+ * Aurora is weather and the blob is a creature; this one is the substrate whose motion is
+ * a CHECKABLE CLAIM. Every frame is the truncated inverse transform of a fixed spectrum,
+ * `Σ c_k·e^{2πikt}`, and a reader can verify it: the rings are the terms, the chain is the
+ * sum, the head is where the parameter currently is. Nothing decorative moves.
  *
- * Visual bundles live in config presets. An ambient-background consumer passes `color` and the
- * `colorResolver`) for a thin warm default preserving the recessive look; the studio passes
- * the full `config` + `spectrum` + `getPalette`.
+ * The two payoffs are CLOSURE — every index is an integer, so the figure completes exactly
+ * at `t = 1` — and ASSEMBLY — the spectrum is amplitude-ordered, so every step of the N
+ * axis adds the largest remaining correction rather than the next arbitrary frequency.
+ *
+ * WebGPU only. There is one renderer, because a second one would be a second paint law,
+ * and where WebGPU is absent the field declares it and paints nothing.
  */
 type __VLS_Props = {
-    /** The full author config (the studio's `useConfiguratorState` model). Defaults to the warm identity. */
+    /** The author config. Defaults to the shipped identity. */
     config?: FourierFieldConfig;
-    /** An explicit CPU-minted spectrum (a curated shape's DFT). When absent, a seeded elliptic spectrum is generated. */
+    /** An explicit spectrum. When absent, the config's `source` decides. */
     spectrum?: readonly BasisComponent[];
-    /** Resolve the curve palette as OKLCh (the studio themes it). When absent, `color`/`config.palette` is used. */
+    /** Resolve the ramp as OKLCh (the studio themes it). Wins over `color`. */
     getPalette?: () => OklchStop[];
-    /** Ambient-consumer color seam — a `var()`/`light-dark()` token or a literal; derives a warm 2-stop palette. */
+    /** Ambient-consumer colour seam — a token or a literal; derives a two-stop ramp. */
     color?: string;
-    /** The color resolver (the GooBlob/Aurora seam) — required when `color` is a `var()` token. */
-    colorResolver?: ColorResolver;
-    /** Extra seed mixed into the generated elliptic spectrum PRNG. Default "". */
+    /** Seed for the generated spectrum. */
     seed?: string;
-    /** Paint ONE static deterministic best-frame and never animate (the capture lever). Default false. */
+    /** Hold the clock. The figure stays live; only time stops. */
     freeze?: boolean;
-    /** Outer loudness envelope (scales the per-layer alpha). When set, overrides `config.intensity`; clamped [0,2]. */
-    intensity?: number;
+    /**
+     * The pointer scrubs and flicks the clock, and the host becomes a real slider.
+     * `false` is the decor mount: no listeners, no role, no tab stop.
+     */
+    interactive?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    backend: () => import("../../composables/glass/webgpu").GpuBackend;
+    backend: () => import("../../composables/glass/webgpu/useGpuSubstrate.js").GpuBackend;
     pause: () => void;
     resume: () => void;
     wake: () => void;
-    renderAt: (timeSec: number) => void;
     setHeadT: (t: number) => void;
+    /** The live loop parameter. Unwrapped on the exposed proxy, so a transport binds it. */
+    headT: Readonly<import("vue").Ref<number, number>>;
+    flick: (turnsPerSec: number) => void;
     rendererStatus: Readonly<import("vue").Ref<RendererStatus, RendererStatus>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     rendererStatus: (status: RendererStatus) => any;
@@ -53,6 +53,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     seed: string;
     freeze: boolean;
+    interactive: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/fourier-field/clock.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The substrate-travel spring, bound by JOB rather than by a remembered pair. This module
+ * owns exactly one invariant about it — the damping fraction it CONSUMES — because that is
+ * what decides whether a flick can rewind the drawing.
+ */
+export declare const FOURIER_TRAVEL_SPRING: import("../../composables/motion/index.js").SpringPresetRow;
+/** The consumed damping fraction. At or above this, a flick has no backward frames. */
+export declare const FOURIER_SETTLE_ZETA_FLOOR = 0.82;
+export interface FourierClockInput {
+    /** Seconds elapsed since the last step. */
+    dt: number;
+    /** The config's speed multiplier. */
+    speed: number;
+    /** The pointer's horizontal velocity, or 0 when the pointer is not driving. */
+    scrubVelocity: number;
+    /** The pointer field's transient flick burst (0..1), or 0. */
+    burst: number;
+    /** Whether the pointer is engaged at all this step. */
+    engaged: boolean;
+    /** Hold the parameter and clear the momentum. */
+    frozen: boolean;
+}
+export interface FourierClock {
+    /** The loop parameter `head_t ∈ [0,1)`. */
+    readonly headT: number;
+    /** The current rate offset (turns/s) the flick spring is carrying. */
+    readonly momentum: number;
+    /** Advance one step; returns the rate the step actually used (never negative). */
+    step: (input: FourierClockInput) => number;
+    /** Seat the parameter directly. Takes no spring — a hand's position is not physics. */
+    set: (t: number) => void;
+    /** Inject one impulse in turns per second, capped by the advance budget. */
+    flick: (turnsPerSec: number) => void;
+}
+export declare function createFourierClock(): FourierClock;