@yewdiel21/motion-kit 0.18.0 → 0.19.1

package/dist/{chunk-DOOMULVV.js → chunk-OLT3CWDJ.js}

@@ -195,7 +195,9 @@ var TIMING = Object.freeze({
   infiniteReel: Object.freeze({ friction: 0.95, wheel: 0.05, dragThreshold: 5 }),
   repelBento: Object.freeze({ offset: 0.6, stagger: 6e-3, strength: 5e3, distance: 30, breakpoint: 1024 }),
   rotator: Object.freeze({ interval: 8e3, duration: 0.25, y: 5 }),
-  dragRuler: Object.freeze({ min: 0, max: 8, step: 0.1, pixelsPerUnit: 60 })
+  dragRuler: Object.freeze({ min: 0, max: 8, step: 0.1, pixelsPerUnit: 60 }),
+  /** scroll-area: bars hide after idleMs; edge fades up to `fade` px; a click on the rail glides (s); shortest thumb (px). */
+  scrollArea: Object.freeze({ idleMs: 900, fade: 24, glide: 0.6, minThumb: 24 })
 });
 
 // src/core/loop.ts
@@ -301,4 +303,4 @@ export {
   MK_HEAD_SCRIPT,
   createScope
 };
-//# sourceMappingURL=chunk-DOOMULVV.js.map
+//# sourceMappingURL=chunk-OLT3CWDJ.js.map

package/dist/chunk-OLT3CWDJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/timing.ts","../src/core/loop.ts","../src/core/reduced.ts","../src/core/scope.ts"],"sourcesContent":["/**\n * Every duration in one place (seconds, like GSAP, unless the name says\n * ms). Recipes and components take their defaults from here, so a timing is\n * changed once.\n */\nexport const TIMING = Object.freeze({\n  flow: 0.5,\n  flowStagger: 0.05,\n  stepChange: 0.5,\n  reveal: Object.freeze({\n    fast: [0.5, 0.25],\n    normal: [0.7, 0.35],\n    slow: [1.05, 0.5],\n    slower: [1.6, 0.75],\n  } as const),\n  details: 0.32,\n  chevron: 0.25,\n  indicator: 0.45,\n  number: 0.6,\n  numberPricing: 0.7,\n  revealCounter: 0.9,\n  layoutTravel: 0.62,\n  /** New items in a reflow enter in this share of the travel time. */\n  layoutEnterFactor: 0.6,\n  menu: Object.freeze({ duration: 0.35, stagger: 0.04, delay: 0.1 }),\n  palette: Object.freeze({ duration: 0.1, stagger: 0.01 }),\n  form: Object.freeze({ duration: 0.35, stagger: 0.04 }),\n  landing: Object.freeze({ duration: 0.4, stagger: 0.05, delay: 0.15 }),\n  content: Object.freeze({ duration: 0.6, stagger: 0.06 }),\n  bubble: 0.7,\n  bubbleStagger: 0.06,\n  word: 0.25,\n  wordStagger: 0.05,\n  chatScroll: 0.35,\n  composer: 0.18,\n  slot: Object.freeze({ durationMs: 300, staggerMs: 45, exitOffsetMs: 50, colorFadeMs: 280, maxTilt: 5, minResizeMs: 140 }),\n  swatch: 0.5,\n  swatchLight: 3.5,\n  swatchBackground: 4.5,\n  /** ModalHost (modal-origin, modal-close-origin, modal-fallback, modal-auto-resize). */\n  dialog: Object.freeze({\n    /** The surface travels from its opener. */\n    open: 0.7,\n    /** The opener's colour hands over to the surface's. */\n    surfaceColor: 0.3,\n    /** Back into the opener. */\n    close: 0.5,\n    /** While closing, the content heads for the opener on a 2 s path cut at `close`. */\n    contentReturn: 2,\n    originHide: 0.08,\n    originShow: 0.3,\n    originShowDelay: 0.2,\n    /** No opener on screen: scale .92 → 1. */\n    fallback: 0.35,\n    autoResize: 0.45,\n    /** Backdrop tint on the signature curve. */\n    backdrop: 0.5,\n    /** Items of a list that opens from its control. */\n    list: 0.25,\n  }),\n  /** modal-liquid (spring channels; springs are stiffness/damping, not times). */\n  liquid: Object.freeze({\n    size: 0.3,\n    radius: 0.7,\n    content: 0.3,\n    color: 0.4,\n    colorDelay: 0.15,\n    ghost: 0.25,\n    ghostDelay: 0.05,\n    closeSize: 0.25,\n    closeContent: 0.3,\n    originRestore: 0.3,\n    originRestoreDelay: 0.2,\n    safetyMs: 1100,\n  }),\n  /** modal-drag: the spring back when a drag is not far enough. */\n  drag: Object.freeze({ restore: 0.5, radiusRestore: 0.3 }),\n  /** modal-float. */\n  float: Object.freeze({ shadow: 0.45, glideDecay: 0.18, sizeSmoothing: 0.08 }),\n  /** chat-loader-delay, chat-confirmation-bar. */\n  chat: Object.freeze({ pendingDelayMs: 500, confirmWordStagger: 0.1 }),\n  /** onboarding-busy-background, step-change, onboarding-reveal-counter. */\n  onboarding: Object.freeze({ busy: 0.8, idle: 0.6, step: 0.5, counter: 0.9 }),\n  /** task-drag: lift, land (FA .62), crossfade (66 % of the land), neighbours shifting (FA .52). */\n  sortable: Object.freeze({ lift: 0.18, land: 0.42, landFade: 0.42 * 0.66, shift: 0.62 }),\n  /** toast-deck, toast-morph, toast-character-reveal. */\n  toast: Object.freeze({\n    relayout: 0.6,\n    expand: 0.55,\n    expandStagger: 0.06,\n    enter: 0.5,\n    exit: 0.3,\n    collapseDelayMs: 150,\n    morphSize: 0.32,\n    morphRadius: 0.7,\n    morphContent: 0.32,\n    morphColor: 0.4,\n    morphColorDelay: 0.15,\n    morphShadow: 0.6,\n    morphShadowDelay: 0.05,\n    safetyMs: 1100,\n    chars: 0.4,\n    charsDelay: 0.225,\n    charsStagger: 0.02,\n  }),\n  /** glass (CSS): surface/shadow transitions, ring and shine. */\n  glass: Object.freeze({ hover: 0.4, ring: 0.5 }),\n  /** utility animations (css/effects/anim.css), by name. */\n  effects: Object.freeze({\n    out: 0.5,\n    'out-left': 0.5,\n    'out-bottom': 0.5,\n    collapse: 0.25,\n    highlight: 1,\n    shake: 0.5,\n    'shake-strong': 0.4,\n    fade: 0.3,\n    wipe: 0.7,\n    'progress-in': 1,\n  }),\n  /** success confetti, per 60 fps frame. */\n  confetti: Object.freeze({\n    count: 45,\n    speed: [2, 8] as const,\n    lift: 2,\n    radius: [3, 7] as const,\n    decay: [0.015, 0.03] as const,\n    gravity: 0.15,\n    drag: 0.98,\n    spin: 2.5,\n  }),\n  /** project sheet. */\n  sheet: Object.freeze({ open: 0.72, close: 0.72, underlayScale: 0.98, underlayOpacity: 0.4 }),\n  /** Physical spring pairs: [stiffness, damping]. */\n  springs: Object.freeze({\n    press: [400, 10] as const,\n    success: [260, 18] as const,\n    underlay: [300, 30] as const,\n    letters: [300, 10] as const,\n    cursorFollow: [800, 35] as const,\n    cursorAppear: [500, 30] as const,\n    bentoEnter: [60, 15] as const,\n    bentoRepel: [300, 25] as const,\n    dockPill: [380, 30] as const,\n  }),\n  /** masked type. */\n  maskText: Object.freeze({ duration: 1.2, delay: 0.1, stagger: 0.02, exitStagger: 0.002, y: 100, threshold: 0.8 }),\n  /** reveal group (rules, fades, rises). */\n  cascade: Object.freeze({ duration: 1.2, step: 0.03, rise: 200, threshold: 0.3 }),\n  /** slot title: each letter turns 8–14 times inside a 2 s expo.out envelope. */\n  textRoll: Object.freeze({ duration: 2, stagger: 0.04, turns: [8, 14] as const, interval: 6000, quietMs: 1000 }),\n  /** hero letters: scale on hover, pastel blink. */\n  letters: Object.freeze({\n    scale: 1.3,\n    y: -5,\n    step: 0.03,\n    blink: 0.6,\n    blinkStart: 0.6,\n    blinkRepeatDelay: 0.1,\n    blinkDelays: [0.1, 0.6, 0.2, 1, 0.4, 1.2, 0.15, 0.8, 0.3] as const,\n  }),\n  /** image parallax. */\n  parallax: Object.freeze({ travel: 10, scale: 1.2, strongScale: 1.3, lerp: 1 }),\n  /** About grid gathering from depth. */\n  depthGrid: Object.freeze({\n    perspective: 600,\n    distance: 900,\n    depth: -3000,\n    rotate: -160,\n    opacity: 0.05,\n    scale: 0.4,\n    stagger: 0.15,\n    lerp: 1,\n  }),\n  /** video mask: the frame and the picture inside scale in opposite directions. */\n  frameZoom: Object.freeze({\n    outer: [80, 20] as const,\n    inner: [130, 20] as const,\n    phoneOuter: [95, 5] as const,\n    phoneInner: [105, 5] as const,\n    open: 1,\n    lerp: 1,\n  }),\n  /** marquee: seconds per item, at most 14 counted. */\n  marquee: Object.freeze({ perItem: 2, maxItems: 14 }),\n  /** glass chip and dot cursor. */\n  cursor: Object.freeze({ gutter: 10, circle: 96, dotLerp: 0.2, light: 180 }),\n  /** floating navbar: enters from −300 % over 1.8 s; rows follow 0.15 s + 0.025 s each. */\n  island: Object.freeze({ entrance: 1.8, offset: -300, delay: 0.15, step: 0.025, focus: 150 }),\n  /** product dock: spread for 1.6 s on load; tablet range re-checked 250 ms after a resize. */\n  cardDock: Object.freeze({ intro: 1600, resizeDebounce: 250 }),\n  /** phone cards: 5 s a card, 2 s wait after a touch, 0.5 s after it shows. */\n  snapStrip: Object.freeze({ interval: 5000, resume: 2000, delay: 500 }),\n  /** fill-text: letters from .2, 0.5 s each, 0.1 s apart, top 90 % → centre 40 %. */\n  fillText: Object.freeze({ from: 0.2, duration: 0.5, stagger: 0.1, start: 'top 90%', end: 'center 40%' }),\n  /** particle hero: fade in 1 s after 0.3 s, morph cycles, pointer push. */\n  particleHero: Object.freeze({ fadeIn: 1, fadeDelay: 0.3, size: 128, pointSize: 1.7, maxDpr: 1.5, stillSteps: 110 }),\n  ticketMenu: Object.freeze({ open: 0.9, content: 1.1, stagger: 0.02, from: 150 }),\n  infiniteReel: Object.freeze({ friction: 0.95, wheel: 0.05, dragThreshold: 5 }),\n  repelBento: Object.freeze({ offset: 0.6, stagger: 0.006, strength: 5000, distance: 30, breakpoint: 1024 }),\n  rotator: Object.freeze({ interval: 8000, duration: 0.25, y: 5 }),\n  dragRuler: Object.freeze({ min: 0, max: 8, step: 0.1, pixelsPerUnit: 60 }),\n  /** scroll-area: bars hide after idleMs; edge fades up to `fade` px; a click on the rail glides (s); shortest thumb (px). */\n  scrollArea: Object.freeze({ idleMs: 900, fade: 24, glide: 0.6, minThumb: 24 }),\n});\n","import { gsap } from 'gsap';\n\n/** Called every frame with dt = 1 at 60 Hz. */\nexport type Tick = (dt: number) => void;\n\nconst subscribers = new Set<Tick>();\nconst FRAME_MS = 1000 / 60;\n\nfunction tick(_time: number, deltaMs: number) {\n  // Capped so a backgrounded tab does not explode the springs.\n  const dt = Math.min(deltaMs / FRAME_MS, 3);\n  subscribers.forEach((fn) => fn(dt));\n}\n\n/** One shared ticker callback for every recipe. */\nexport function subscribe(fn: Tick): () => void {\n  if (!subscribers.size) gsap.ticker.add(tick);\n  subscribers.add(fn);\n  return () => {\n    subscribers.delete(fn);\n    if (!subscribers.size) gsap.ticker.remove(tick);\n  };\n}\n\n/** Run `fn` every frame only while `el` is near the viewport. */\nexport function whileVisible(el: Element, fn: Tick, rootMargin = '100px'): () => void {\n  let stop: (() => void) | null = null;\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (entry?.isIntersecting) stop ??= subscribe(fn);\n      else {\n        stop?.();\n        stop = null;\n      }\n    },\n    { rootMargin },\n  );\n  io.observe(el);\n  return () => {\n    io.disconnect();\n    stop?.();\n    stop = null;\n  };\n}\n","/** `prefers-reduced-motion: reduce`. Always false during SSR. */\nexport function reduced(): boolean {\n  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Entrance animations run only with motion allowed and when the head safety net\n * (see MK_HEAD_SCRIPT) has not given up on JavaScript.\n */\nexport function entrances(): boolean {\n  if (reduced()) return false;\n  return !(typeof document !== 'undefined' && document.documentElement.classList.contains('mk-failed'));\n}\n\n/**\n * Inline this in <head> (before CSS paints). It enables the hidden entrance states\n * (`.mk-js`) and reveals everything again (`.mk-failed`) if no recipe has started\n * within 2.5 s — e.g. the bundle failed to load.\n */\nexport const MK_HEAD_SCRIPT =\n  \"(function(){var r=document.documentElement;r.classList.add('mk-js');setTimeout(function(){if(!r.classList.contains('mk-ready'))r.classList.add('mk-failed')},2500)})();\";\n","import type { Cleanup } from './types';\n\nexport interface Scope {\n  /** Register any cleanup; returns it for convenience. */\n  add(fn: Cleanup): Cleanup;\n  /** addEventListener that is removed on dispose. */\n  on<K extends keyof HTMLElementEventMap>(\n    target: EventTarget,\n    type: K | (string & {}),\n    listener: (event: HTMLElementEventMap[K]) => void,\n    options?: AddEventListenerOptions | boolean,\n  ): void;\n  /** Disconnects the observer on dispose and returns it. */\n  observe<O extends { disconnect(): void }>(observer: O): O;\n  /** setTimeout that is cleared on dispose. */\n  timeout(fn: () => void, ms: number): void;\n  /** Set (or remove, with null) an attribute; dispose puts the original value back. */\n  attr(el: Element, name: string, value: string | null): void;\n  /** Run every cleanup once, newest first. */\n  dispose(): void;\n  readonly disposed: boolean;\n}\n\n/** Collects the side effects of one recipe instance so `destroy()` can undo all of them. */\nexport function createScope(): Scope {\n  const cleanups: Cleanup[] = [];\n  const originals = new Map<Element, Map<string, string | null>>();\n  let disposed = false;\n  return {\n    add(fn) {\n      cleanups.push(fn);\n      return fn;\n    },\n    on(target, type, listener, options) {\n      target.addEventListener(type, listener as EventListener, options);\n      cleanups.push(() => target.removeEventListener(type, listener as EventListener, options));\n    },\n    observe(observer) {\n      cleanups.push(() => observer.disconnect());\n      return observer;\n    },\n    timeout(fn, ms) {\n      const id = setTimeout(fn, ms);\n      cleanups.push(() => clearTimeout(id));\n    },\n    attr(el, name, value) {\n      let saved = originals.get(el);\n      if (!saved) originals.set(el, (saved = new Map()));\n      if (!saved.has(name)) {\n        saved.set(name, el.getAttribute(name));\n        cleanups.push(() => {\n          const original = saved.get(name);\n          if (original === null || original === undefined) el.removeAttribute(name);\n          else el.setAttribute(name, original);\n        });\n      }\n      if (value === null) el.removeAttribute(name);\n      else el.setAttribute(name, value);\n    },\n    dispose() {\n      if (disposed) return;\n      disposed = true;\n      for (const fn of cleanups.reverse()) fn();\n      cleanups.length = 0;\n    },\n    get disposed() {\n      return disposed;\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-EDMXWUW3.js → chunk-PVN7YVKV.js}

@@ -18,7 +18,7 @@ import {
   slideIndicator,
   splitGraphemes,
   takeMovement
-} from "./chunk-Q7IW4FV3.js";
+} from "./chunk-NCGNIPJE.js";
 import {
   clamp,
   damp,
@@ -31,7 +31,7 @@ import {
   entrances,
   reduced,
   whileVisible
-} from "./chunk-DOOMULVV.js";
+} from "./chunk-OLT3CWDJ.js";
 import {
   inert,
   warnOnce
@@ -4491,4 +4491,4 @@ export {
   createScrollDock,
   createLocalClock
 };
-//# sourceMappingURL=chunk-EDMXWUW3.js.map
+//# sourceMappingURL=chunk-PVN7YVKV.js.map

package/dist/css/components/code-block.css

@@ -1,3 +1,265 @@
+/* components/scroll-area/scroll-area.css */
+/* scroll-area — the scroller keeps native scrolling with its system bar hidden; the kit's bars ride on top: a 6 px pill
+   (text at 32 %) that shows while hovered or scrolling, swells to 10 px over a tonal rail on the swing curve and turns the
+   accent while dragged. Edges with more content fade out; an optional tonal pill takes the view back to the top. */
+@property --mk-scroll-thickness {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 6px;
+}
+
+.mk-scroll-area,
+mk-scroll-area {
+  --mk-scroll-thumb: color-mix(in srgb, var(--mk-text) 32%, transparent);
+  --mk-scroll-thumb-hover: color-mix(in srgb, var(--mk-text) 48%, transparent);
+  --mk-scroll-rail: color-mix(in srgb, var(--mk-text) 6%, transparent);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Its own viewport fills the area (a height or a max-height on the area both work). */
+:is(.mk-scroll-area, mk-scroll-area) > [data-mk-scroll-viewport] {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border-radius: inherit;
+  outline: none;
+}
+
+:is(.mk-scroll-area, mk-scroll-area)[data-mk-scroll-axis='y'] > [data-mk-scroll-viewport] {
+  overflow-x: hidden;
+}
+
+:is(.mk-scroll-area, mk-scroll-area)[data-mk-scroll-axis='x'] > [data-mk-scroll-viewport] {
+  overflow-y: hidden;
+}
+
+[data-mk-scroll-anchor] {
+  position: relative;
+}
+
+/* The kit's bars replace the system's wherever the scroller's own styles asked for a thin one. */
+[data-mk-scroll-viewport] {
+  scrollbar-width: none !important;
+}
+
+[data-mk-scroll-viewport]::-webkit-scrollbar {
+  display: none !important;
+}
+
+[data-mk-scroll-area]:has(> [data-mk-scroll-viewport]:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+/* Edge fades: as deep as what is hidden past each edge, up to 24 px (written by the engine). */
+[data-mk-fade] > [data-mk-scroll-viewport] {
+  --mk-scroll-fade-top: 0px;
+  --mk-scroll-fade-right: 0px;
+  --mk-scroll-fade-bottom: 0px;
+  --mk-scroll-fade-left: 0px;
+  -webkit-mask-image:
+    linear-gradient(to bottom, transparent, #000 var(--mk-scroll-fade-top), #000 calc(100% - var(--mk-scroll-fade-bottom)), transparent),
+    linear-gradient(to right, transparent, #000 var(--mk-scroll-fade-left), #000 calc(100% - var(--mk-scroll-fade-right)), transparent);
+  -webkit-mask-composite: source-in;
+  mask-image:
+    linear-gradient(to bottom, transparent, #000 var(--mk-scroll-fade-top), #000 calc(100% - var(--mk-scroll-fade-bottom)), transparent),
+    linear-gradient(to right, transparent, #000 var(--mk-scroll-fade-left), #000 calc(100% - var(--mk-scroll-fade-right)), transparent);
+  mask-composite: intersect;
+}
+
+/* Rails: a 14 px grip along the edge; its tonal rail and the pill inside are drawn smaller. */
+[data-mk-scroll-rail] {
+  --mk-scroll-thickness: 6px;
+  position: absolute;
+  z-index: 2;
+  opacity: 0;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  transition:
+    opacity 0.2s ease,
+    --mk-scroll-thickness 0.35s var(--mk-ease-swatch);
+}
+
+[data-mk-scroll-rail][hidden] {
+  display: none;
+}
+
+/* The rails run along the viewport's box inside the root (--mk-scroll-view-*, written by the engine);
+   --mk-scroll-inset keeps their ends clear of rounded corners. */
+[data-mk-scroll-rail][data-mk-axis='y'] {
+  top: calc(var(--mk-scroll-view-top, 0px) + var(--mk-scroll-inset, 6px));
+  right: var(--mk-scroll-view-right, 0px);
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + var(--mk-scroll-inset, 6px));
+  width: 14px;
+}
+
+[data-mk-scroll-rail][data-mk-axis='x'] {
+  right: calc(var(--mk-scroll-view-right, 0px) + var(--mk-scroll-inset, 6px));
+  bottom: var(--mk-scroll-view-bottom, 0px);
+  left: calc(var(--mk-scroll-view-left, 0px) + var(--mk-scroll-inset, 6px));
+  height: 14px;
+}
+
+/* Both bars: each stops short of the other, no corner square. */
+[data-mk-overflow-x] > [data-mk-scroll-rail][data-mk-axis='y'] {
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + 14px);
+}
+
+[data-mk-overflow-y] > [data-mk-scroll-rail][data-mk-axis='x'] {
+  right: calc(var(--mk-scroll-view-right, 0px) + 14px);
+}
+
+[data-mk-active] > [data-mk-scroll-rail],
+[data-mk-scroll-rail]:hover,
+[data-mk-scroll-rail][data-mk-dragging] {
+  opacity: 1;
+}
+
+[data-mk-scroll-rail]:hover,
+[data-mk-scroll-rail][data-mk-dragging] {
+  --mk-scroll-thickness: 10px;
+}
+
+[data-mk-scroll-rail]::before {
+  content: '';
+  position: absolute;
+  border-radius: 999px;
+  background: var(--mk-scroll-rail, color-mix(in srgb, var(--mk-text) 6%, transparent));
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-scroll-rail][data-mk-axis='y']::before {
+  top: 0;
+  right: 2px;
+  bottom: 0;
+  width: 10px;
+}
+
+[data-mk-scroll-rail][data-mk-axis='x']::before {
+  right: 0;
+  bottom: 2px;
+  left: 0;
+  height: 10px;
+}
+
+[data-mk-scroll-rail]:hover::before,
+[data-mk-scroll-rail][data-mk-dragging]::before {
+  opacity: 1;
+}
+
+[data-mk-scroll-thumb] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: grab;
+  will-change: transform;
+}
+
+[data-mk-scroll-rail][data-mk-axis='y'] [data-mk-scroll-thumb] {
+  width: 100%;
+}
+
+[data-mk-scroll-rail][data-mk-axis='x'] [data-mk-scroll-thumb] {
+  height: 100%;
+}
+
+[data-mk-scroll-rail][data-mk-dragging] [data-mk-scroll-thumb] {
+  cursor: grabbing;
+}
+
+/* The pill stays centred on the 10 px rail while it swells. */
+[data-mk-scroll-pill] {
+  position: absolute;
+  border-radius: 999px;
+  background: var(--mk-scroll-thumb, color-mix(in srgb, var(--mk-text) 32%, transparent));
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-scroll-rail][data-mk-axis='y'] [data-mk-scroll-pill] {
+  top: 0;
+  right: calc(2px + (10px - var(--mk-scroll-thickness)) / 2);
+  bottom: 0;
+  width: var(--mk-scroll-thickness);
+}
+
+[data-mk-scroll-rail][data-mk-axis='x'] [data-mk-scroll-pill] {
+  right: 0;
+  bottom: calc(2px + (10px - var(--mk-scroll-thickness)) / 2);
+  left: 0;
+  height: var(--mk-scroll-thickness);
+}
+
+[data-mk-scroll-rail]:hover [data-mk-scroll-pill] {
+  background: var(--mk-scroll-thumb-hover, color-mix(in srgb, var(--mk-text) 48%, transparent));
+}
+
+[data-mk-scroll-rail][data-mk-dragging] [data-mk-scroll-pill] {
+  background: var(--mk-scroll-thumb-active, var(--mk-accent));
+}
+
+[data-mk-dragging] [data-mk-scroll-viewport] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Back to top: a tonal pill in the corner, clear of the bars. */
+[data-mk-scroll-top] {
+  position: absolute;
+  z-index: 3;
+  right: calc(var(--mk-scroll-view-right, 0px) + 20px);
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + 16px);
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--mk-surface-4);
+  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  color: var(--mk-text);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    box-shadow 0.2s;
+}
+
+[data-mk-overflow-x] > [data-mk-scroll-top] {
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + 22px);
+}
+
+[data-mk-scroll-top][hidden] {
+  display: none;
+}
+
+[data-mk-scroll-top]:hover {
+  background: color-mix(in srgb, var(--mk-surface-4) 80%, var(--mk-text) 10%);
+}
+
+[data-mk-scroll-top]:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--mk-accent) 45%, transparent),
+    0 8px 24px -8px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-scroll-rail],
+  [data-mk-scroll-rail]::before,
+  [data-mk-scroll-pill],
+  [data-mk-scroll-top] {
+    transition: none;
+  }
+}
+
 /* components/code-block/code-block.css */
 /* code-block — an editor surface, dark in both modes: a bar with three quiet dots, the file name, the language and a
    glass copy button; mono lines with syntax colours, optional numbers and marked lines. A squared surface (radius 12)
@@ -21,6 +283,11 @@ mk-code-block {
   --mk-code-property: #8fd6ff;
   --mk-code-punctuation: #9aa0aa;
   --mk-code-operator: #c9ced6;
+  /* The scroll-area bar, light on the editor in both modes; dragged, it takes the keyword colour like the focus ring. */
+  --mk-scroll-thumb: rgb(255 255 255 / 0.2);
+  --mk-scroll-thumb-hover: rgb(255 255 255 / 0.36);
+  --mk-scroll-thumb-active: var(--mk-code-keyword);
+  --mk-scroll-rail: rgb(255 255 255 / 0.05);
   position: relative;
   display: block;
   overflow: hidden;

package/dist/css/components/command-search.css

@@ -1,3 +1,265 @@
+/* components/scroll-area/scroll-area.css */
+/* scroll-area — the scroller keeps native scrolling with its system bar hidden; the kit's bars ride on top: a 6 px pill
+   (text at 32 %) that shows while hovered or scrolling, swells to 10 px over a tonal rail on the swing curve and turns the
+   accent while dragged. Edges with more content fade out; an optional tonal pill takes the view back to the top. */
+@property --mk-scroll-thickness {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 6px;
+}
+
+.mk-scroll-area,
+mk-scroll-area {
+  --mk-scroll-thumb: color-mix(in srgb, var(--mk-text) 32%, transparent);
+  --mk-scroll-thumb-hover: color-mix(in srgb, var(--mk-text) 48%, transparent);
+  --mk-scroll-rail: color-mix(in srgb, var(--mk-text) 6%, transparent);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Its own viewport fills the area (a height or a max-height on the area both work). */
+:is(.mk-scroll-area, mk-scroll-area) > [data-mk-scroll-viewport] {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border-radius: inherit;
+  outline: none;
+}
+
+:is(.mk-scroll-area, mk-scroll-area)[data-mk-scroll-axis='y'] > [data-mk-scroll-viewport] {
+  overflow-x: hidden;
+}
+
+:is(.mk-scroll-area, mk-scroll-area)[data-mk-scroll-axis='x'] > [data-mk-scroll-viewport] {
+  overflow-y: hidden;
+}
+
+[data-mk-scroll-anchor] {
+  position: relative;
+}
+
+/* The kit's bars replace the system's wherever the scroller's own styles asked for a thin one. */
+[data-mk-scroll-viewport] {
+  scrollbar-width: none !important;
+}
+
+[data-mk-scroll-viewport]::-webkit-scrollbar {
+  display: none !important;
+}
+
+[data-mk-scroll-area]:has(> [data-mk-scroll-viewport]:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+/* Edge fades: as deep as what is hidden past each edge, up to 24 px (written by the engine). */
+[data-mk-fade] > [data-mk-scroll-viewport] {
+  --mk-scroll-fade-top: 0px;
+  --mk-scroll-fade-right: 0px;
+  --mk-scroll-fade-bottom: 0px;
+  --mk-scroll-fade-left: 0px;
+  -webkit-mask-image:
+    linear-gradient(to bottom, transparent, #000 var(--mk-scroll-fade-top), #000 calc(100% - var(--mk-scroll-fade-bottom)), transparent),
+    linear-gradient(to right, transparent, #000 var(--mk-scroll-fade-left), #000 calc(100% - var(--mk-scroll-fade-right)), transparent);
+  -webkit-mask-composite: source-in;
+  mask-image:
+    linear-gradient(to bottom, transparent, #000 var(--mk-scroll-fade-top), #000 calc(100% - var(--mk-scroll-fade-bottom)), transparent),
+    linear-gradient(to right, transparent, #000 var(--mk-scroll-fade-left), #000 calc(100% - var(--mk-scroll-fade-right)), transparent);
+  mask-composite: intersect;
+}
+
+/* Rails: a 14 px grip along the edge; its tonal rail and the pill inside are drawn smaller. */
+[data-mk-scroll-rail] {
+  --mk-scroll-thickness: 6px;
+  position: absolute;
+  z-index: 2;
+  opacity: 0;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  transition:
+    opacity 0.2s ease,
+    --mk-scroll-thickness 0.35s var(--mk-ease-swatch);
+}
+
+[data-mk-scroll-rail][hidden] {
+  display: none;
+}
+
+/* The rails run along the viewport's box inside the root (--mk-scroll-view-*, written by the engine);
+   --mk-scroll-inset keeps their ends clear of rounded corners. */
+[data-mk-scroll-rail][data-mk-axis='y'] {
+  top: calc(var(--mk-scroll-view-top, 0px) + var(--mk-scroll-inset, 6px));
+  right: var(--mk-scroll-view-right, 0px);
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + var(--mk-scroll-inset, 6px));
+  width: 14px;
+}
+
+[data-mk-scroll-rail][data-mk-axis='x'] {
+  right: calc(var(--mk-scroll-view-right, 0px) + var(--mk-scroll-inset, 6px));
+  bottom: var(--mk-scroll-view-bottom, 0px);
+  left: calc(var(--mk-scroll-view-left, 0px) + var(--mk-scroll-inset, 6px));
+  height: 14px;
+}
+
+/* Both bars: each stops short of the other, no corner square. */
+[data-mk-overflow-x] > [data-mk-scroll-rail][data-mk-axis='y'] {
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + 14px);
+}
+
+[data-mk-overflow-y] > [data-mk-scroll-rail][data-mk-axis='x'] {
+  right: calc(var(--mk-scroll-view-right, 0px) + 14px);
+}
+
+[data-mk-active] > [data-mk-scroll-rail],
+[data-mk-scroll-rail]:hover,
+[data-mk-scroll-rail][data-mk-dragging] {
+  opacity: 1;
+}
+
+[data-mk-scroll-rail]:hover,
+[data-mk-scroll-rail][data-mk-dragging] {
+  --mk-scroll-thickness: 10px;
+}
+
+[data-mk-scroll-rail]::before {
+  content: '';
+  position: absolute;
+  border-radius: 999px;
+  background: var(--mk-scroll-rail, color-mix(in srgb, var(--mk-text) 6%, transparent));
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-scroll-rail][data-mk-axis='y']::before {
+  top: 0;
+  right: 2px;
+  bottom: 0;
+  width: 10px;
+}
+
+[data-mk-scroll-rail][data-mk-axis='x']::before {
+  right: 0;
+  bottom: 2px;
+  left: 0;
+  height: 10px;
+}
+
+[data-mk-scroll-rail]:hover::before,
+[data-mk-scroll-rail][data-mk-dragging]::before {
+  opacity: 1;
+}
+
+[data-mk-scroll-thumb] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: grab;
+  will-change: transform;
+}
+
+[data-mk-scroll-rail][data-mk-axis='y'] [data-mk-scroll-thumb] {
+  width: 100%;
+}
+
+[data-mk-scroll-rail][data-mk-axis='x'] [data-mk-scroll-thumb] {
+  height: 100%;
+}
+
+[data-mk-scroll-rail][data-mk-dragging] [data-mk-scroll-thumb] {
+  cursor: grabbing;
+}
+
+/* The pill stays centred on the 10 px rail while it swells. */
+[data-mk-scroll-pill] {
+  position: absolute;
+  border-radius: 999px;
+  background: var(--mk-scroll-thumb, color-mix(in srgb, var(--mk-text) 32%, transparent));
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-scroll-rail][data-mk-axis='y'] [data-mk-scroll-pill] {
+  top: 0;
+  right: calc(2px + (10px - var(--mk-scroll-thickness)) / 2);
+  bottom: 0;
+  width: var(--mk-scroll-thickness);
+}
+
+[data-mk-scroll-rail][data-mk-axis='x'] [data-mk-scroll-pill] {
+  right: 0;
+  bottom: calc(2px + (10px - var(--mk-scroll-thickness)) / 2);
+  left: 0;
+  height: var(--mk-scroll-thickness);
+}
+
+[data-mk-scroll-rail]:hover [data-mk-scroll-pill] {
+  background: var(--mk-scroll-thumb-hover, color-mix(in srgb, var(--mk-text) 48%, transparent));
+}
+
+[data-mk-scroll-rail][data-mk-dragging] [data-mk-scroll-pill] {
+  background: var(--mk-scroll-thumb-active, var(--mk-accent));
+}
+
+[data-mk-dragging] [data-mk-scroll-viewport] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Back to top: a tonal pill in the corner, clear of the bars. */
+[data-mk-scroll-top] {
+  position: absolute;
+  z-index: 3;
+  right: calc(var(--mk-scroll-view-right, 0px) + 20px);
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + 16px);
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--mk-surface-4);
+  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  color: var(--mk-text);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    box-shadow 0.2s;
+}
+
+[data-mk-overflow-x] > [data-mk-scroll-top] {
+  bottom: calc(var(--mk-scroll-view-bottom, 0px) + 22px);
+}
+
+[data-mk-scroll-top][hidden] {
+  display: none;
+}
+
+[data-mk-scroll-top]:hover {
+  background: color-mix(in srgb, var(--mk-surface-4) 80%, var(--mk-text) 10%);
+}
+
+[data-mk-scroll-top]:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--mk-accent) 45%, transparent),
+    0 8px 24px -8px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-scroll-rail],
+  [data-mk-scroll-rail]::before,
+  [data-mk-scroll-pill],
+  [data-mk-scroll-top] {
+    transition: none;
+  }
+}
+
 /* components/command-search/command-search.css */
 /* command-search — a dark command palette (Melonmind's glass, near black in both modes): a search field, grouped
    results with marked letters, a pill gliding under the active one and a footer with the keys. */
@@ -87,8 +349,18 @@ mk-command-search {
   overflow-y: auto;
   padding: 0 0.6rem 0.6rem;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 0.15) transparent;
+}
+
+/* The scroll-area bar, light on the dark glass in both modes; long results leave it a lane. */
+[data-mk-command] [data-mk-command-panel] {
+  --mk-scroll-thumb: rgb(255 255 255 / 0.2);
+  --mk-scroll-thumb-hover: rgb(255 255 255 / 0.36);
+  --mk-scroll-thumb-active: rgb(255 255 255 / 0.62);
+  --mk-scroll-rail: rgb(255 255 255 / 0.05);
+}
+
+[data-mk-command] [data-mk-command-panel][data-mk-overflow-y] [data-mk-command-scroll] {
+  padding-right: 14px;
 }
 
 [data-mk-command] [data-mk-command-pill] {