@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/color-slider/color-slider.css

@@ -0,0 +1,112 @@
+/* color-slider — one colour channel: a pill track with the channel's gradient (alpha over a checkerboard) and a round
+   thumb filled with the colour; grabbing grows it and pops a loupe. The native range is a transparent hit area. */
+.mk-color-slider,
+mk-color-slider {
+  --mk-color-size: 1.75rem;
+  --mk-color-length: 12rem;
+  --mk-color-checker: repeating-conic-gradient(#d4d4d4 0 25%, #fff 0 50%) 0 0 / 10px 10px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-track] {
+  position: relative;
+  height: var(--mk-color-size);
+  border-radius: 999px;
+  background: var(--mk-color-track), var(--mk-color-checker);
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-input] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-thumb] {
+  position: absolute;
+  top: 50%;
+  left: calc(clamp(0, var(--mk-color-pos, 0), 1) * (100% - var(--mk-color-size)));
+  width: var(--mk-color-size);
+  height: var(--mk-color-size);
+  margin-top: calc(var(--mk-color-size) / -2);
+  border-radius: 50%;
+  background: linear-gradient(var(--mk-color-thumb), var(--mk-color-thumb)), var(--mk-color-checker);
+  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(0 0 0 / 0.14), 0 4px 12px rgb(0 0 0 / 0.25);
+  pointer-events: none;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-track]:has(input:focus-visible) [data-mk-color-thumb] {
+  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mk-accent), 0 4px 12px rgb(0 0 0 / 0.25);
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-loupe] {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-left: -1.375rem;
+  border-radius: 50%;
+  background: linear-gradient(var(--mk-color-thumb), var(--mk-color-thumb)), var(--mk-color-checker);
+  box-shadow: 0 0 0 3px #fff, 0 8px 20px rgb(0 0 0 / 0.25);
+  opacity: 0;
+  transform-origin: 50% 100%;
+}
+
+/* Reduced motion: GSAP does not run, the attribute shows the loupe. */
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-color-slider, mk-color-slider)[data-mk-grabbing] [data-mk-color-loupe] {
+    opacity: 1;
+  }
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-output] {
+  min-width: 3.5ch;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-track]:has(input:disabled) {
+  opacity: 0.45;
+}
+
+/* Vertical: the track stands up, bottom is the minimum, the loupe sits on the left. */
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] {
+  grid-template-columns: auto;
+  justify-items: center;
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-track] {
+  width: var(--mk-color-size);
+  height: var(--mk-color-length);
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-input] {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-thumb] {
+  top: auto;
+  bottom: calc(clamp(0, var(--mk-color-pos, 0), 1) * (100% - var(--mk-color-size)));
+  left: 0;
+  margin-top: 0;
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-loupe] {
+  top: 50%;
+  right: calc(100% + 10px);
+  bottom: auto;
+  left: auto;
+  margin: -1.375rem 0 0;
+  transform-origin: 100% 50%;
+}

package/src/components/color-slider/element.ts

@@ -0,0 +1,26 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createColorSlider, type ColorSliderInstance } from './engine';
+
+/**
+ * <mk-color-slider class="mk-color-slider" channel="hue" value="#ff8800" show-value></mk-color-slider>
+ * Emits mk:input / mk:change ({value, color}). Changing `value` glides the thumb.
+ */
+export class MkColorSliderElement extends MkElement<ColorSliderInstance> {
+  static options: Record<string, OptionType> = { channel: 'string', value: 'string', label: 'string', orientation: 'string', step: 'number', showValue: 'boolean', name: 'string', disabled: 'boolean' };
+
+  protected create(options: Record<string, unknown>) {
+    return createColorSlider(this, options);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'value' && next) this.instance.setColor(next, false);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+
+  get value() {
+    return this.instance?.value ?? '';
+  }
+}
+
+export const defineColorSlider = () => defineElement('mk-color-slider', MkColorSliderElement);

package/src/components/color-slider/engine.ts

@@ -0,0 +1,234 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { numberFormat } from '../../core/dates';
+import {
+  CHANNEL_LABELS, CHANNEL_RANGE, channelGradient, channelText, formatColor, getChannel, sameColor, setChannel, toHex, toHsva,
+  type ColorChannel, type Hsva,
+} from '../../core/color';
+import { rollDigits } from '../../motion/micro';
+
+/*
+ * Color slider: one channel of a colour on a native <input type="range">
+ * (keyboard, touch and forms from the platform; its thumb is transparent). The
+ * engine paints the track (that channel's gradient at the current colour, alpha
+ * over a checkerboard) and a round thumb filled with the colour, moved by a GSAP
+ * proxy: tight while dragging (.1 s), Melonmind's swing for keys and setColor
+ * (.35 s, .38,.49,0,1.5). Grabbing grows the thumb on the click curve and pops a
+ * loupe with the colour above it. Parts: [data-mk-color-track],
+ * input[data-mk-color-input], [data-mk-color-thumb] > [data-mk-color-loupe],
+ * output[data-mk-color-output]. Vars: --mk-color-track, --mk-color-thumb, --mk-color-pos.
+ */
+
+export interface ColorSliderOptions {
+  /** Channel this slider edits (default 'hue'). */
+  channel?: ColorChannel;
+  /** Any CSS colour parseColor reads, or HSVA (default 'hsl(0 100% 50%)'). */
+  value?: string | Hsva;
+  /** Accessible name (default: the channel's Spanish name). */
+  label?: string;
+  orientation?: 'horizontal' | 'vertical';
+  /** Default 1 (alpha .01). */
+  step?: number;
+  /** Shows the value ("210°", "64 %") in an <output>. */
+  showValue?: boolean;
+  /** Form name: a hidden input submits the hex. */
+  name?: string;
+  disabled?: boolean;
+  /** Every move. */
+  onInput?: (value: string, color: Hsva) => void;
+  /** Committed (release, key). */
+  onChange?: (value: string, color: Hsva) => void;
+}
+
+export interface ColorSliderInstance extends Instance {
+  /** Another control changed the colour; `notify` false keeps callbacks quiet. */
+  setColor(color: string | Hsva, notify?: boolean): void;
+  /** Hex (#rrggbb, #rrggbbaa when translucent). */
+  readonly value: string;
+  readonly color: Hsva;
+}
+
+export function createColorSlider(root: HTMLElement | null, options: ColorSliderOptions = {}): ColorSliderInstance {
+  if (!root) return inert({ setColor() {}, value: '', color: { h: 0, s: 0, v: 0, a: 1 } });
+  registerMotion();
+  const scope = createScope();
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+  scope.attr(root, 'style', root.getAttribute('style'));
+
+  const channel: ColorChannel = options.channel && options.channel in CHANNEL_RANGE ? options.channel : 'hue';
+  const [min, max] = CHANNEL_RANGE[channel];
+  const step = options.step && options.step > 0 ? options.step : channel === 'alpha' ? 0.01 : 1;
+  const vertical = options.orientation === 'vertical';
+  let color = toHsva(options.value ?? 'hsl(0 100% 50%)');
+  const format = numberFormat(root, { maximumFractionDigits: 0 });
+
+  const made: Element[] = [];
+  const part = <T extends HTMLElement>(parent: HTMLElement, selector: string, create: () => T): T => {
+    const found = parent.querySelector<T>(selector);
+    if (found) return found;
+    const element = create();
+    made.push(element);
+    return element;
+  };
+  const track = part(root, '[data-mk-color-track]', () => {
+    const element = document.createElement('div');
+    element.dataset.mkColorTrack = '';
+    root.append(element);
+    return element;
+  });
+  const input = part(track, 'input[data-mk-color-input]', () => {
+    const element = document.createElement('input');
+    element.type = 'range';
+    element.dataset.mkColorInput = '';
+    track.append(element);
+    return element;
+  });
+  const thumb = part(track, '[data-mk-color-thumb]', () => {
+    const element = document.createElement('span');
+    element.dataset.mkColorThumb = '';
+    element.setAttribute('aria-hidden', 'true');
+    track.append(element);
+    return element;
+  });
+  const loupe = part(thumb, '[data-mk-color-loupe]', () => {
+    const element = document.createElement('span');
+    element.dataset.mkColorLoupe = '';
+    thumb.append(element);
+    return element;
+  });
+  const output = options.showValue
+    ? part(root, 'output[data-mk-color-output]', () => {
+        const element = document.createElement('output');
+        element.dataset.mkColorOutput = '';
+        track.after(element);
+        return element;
+      })
+    : null;
+  const hidden = options.name
+    ? (() => {
+        const element = document.createElement('input');
+        element.type = 'hidden';
+        element.name = options.name!;
+        root.append(element);
+        made.push(element);
+        return element;
+      })()
+    : null;
+  scope.add(() => made.forEach((node) => node.remove()));
+  // Authored parts keep their own text and value.
+  const outputText = output?.textContent ?? '';
+  const inputValue = input.value;
+  scope.add(() => {
+    if (output?.isConnected) output.textContent = outputText;
+    if (input.isConnected) input.value = inputValue;
+  });
+
+  scope.attr(input, 'min', String(min));
+  scope.attr(input, 'max', String(max));
+  scope.attr(input, 'step', String(step));
+  scope.attr(input, 'aria-label', options.label ?? CHANNEL_LABELS[channel]);
+  scope.attr(input, 'aria-orientation', vertical ? 'vertical' : 'horizontal');
+  scope.attr(input, 'aria-valuetext', null);
+  if (options.disabled) scope.attr(input, 'disabled', '');
+  scope.attr(root, 'data-mk-channel', channel);
+  scope.attr(root, 'data-mk-orientation', vertical ? 'vertical' : 'horizontal');
+  scope.attr(root, 'data-mk-grabbing', null);
+  scope.attr(root, 'data-mk-ready', '');
+
+  const shown = { pos: 0 };
+  let glide: gsap.core.Tween | null = null;
+  scope.add(() => {
+    glide?.kill();
+    gsap.killTweensOf([thumb, loupe]);
+  });
+  const place = () => root.style.setProperty('--mk-color-pos', String(Number(shown.pos.toFixed(4))));
+  const paint = (mode: 'set' | 'drag' | 'glide') => {
+    const value = getChannel(color, channel);
+    const ratio = max > min ? (value - min) / (max - min) : 0;
+    const text = channelText(channel, value, format);
+    root.style.setProperty('--mk-color-track', channelGradient(color, channel, vertical ? 'to top' : 'to right'));
+    root.style.setProperty('--mk-color-thumb', formatColor(color, 'rgb'));
+    if (document.activeElement !== input || mode !== 'drag') input.value = String(Number(value.toFixed(2)));
+    input.setAttribute('aria-valuetext', text);
+    if (output) {
+      if (mode === 'glide' && !reduced()) keep(rollDigits(output, text, ratio >= shown.pos ? 1 : -1, 0.28));
+      else output.textContent = text;
+    }
+    if (hidden) hidden.value = toHex(color);
+    glide?.kill();
+    if (mode === 'set' || reduced()) {
+      shown.pos = ratio;
+      place();
+      return;
+    }
+    glide = gsap.to(shown, { pos: ratio, duration: mode === 'drag' ? 0.1 : 0.35, ease: mode === 'drag' ? 'power3.out' : EASE.swatch, onUpdate: place });
+  };
+
+  const emit = (type: 'input' | 'change') => {
+    const value = toHex(color);
+    (type === 'input' ? options.onInput : options.onChange)?.(value, { ...color });
+    root.dispatchEvent(new CustomEvent(`mk:${type}`, { bubbles: true, detail: { value, color: { ...color } } }));
+  };
+
+  let dragging = false;
+  const grab = (on: boolean) => {
+    if (dragging === on) return;
+    dragging = on;
+    root.toggleAttribute('data-mk-grabbing', on);
+    if (reduced()) return;
+    keep(gsap.to(thumb, { scale: on ? 1.2 : 1, duration: 0.25, ease: EASE.click }));
+    if (on) keep(gsap.fromTo(loupe, { scale: 0.6, opacity: 0, filter: 'blur(6px)' }, { scale: 1, opacity: 1, filter: 'blur(0px)', duration: 0.3, ease: EASE.pop }));
+    else keep(gsap.to(loupe, { scale: 0.8, opacity: 0, filter: 'blur(6px)', duration: 0.2, ease: 'power2.in' }));
+  };
+
+  scope.on(input, 'input', () => {
+    color = setChannel(color, channel, Number(input.value));
+    paint(dragging ? 'drag' : 'glide');
+    emit('input');
+  });
+  scope.on(input, 'change', () => emit('change'));
+  scope.on(input, 'pointerdown', () => {
+    if (!input.disabled) grab(true);
+  });
+  scope.on(window, 'pointerup', () => grab(false));
+  scope.on(window, 'pointercancel', () => grab(false));
+  scope.on(input, 'blur', () => grab(false));
+  scope.add(() => {
+    gsap.set([thumb, loupe], { clearProps: 'scale,opacity,filter,transform' });
+  });
+
+  paint('set');
+
+  return {
+    setColor(next, notify = true) {
+      if (scope.disposed) return;
+      const target = toHsva(next, color);
+      if (sameColor(target, color) && target.h === color.h) return;
+      color = target;
+      paint('glide');
+      if (notify) {
+        emit('input');
+        emit('change');
+      }
+    },
+    get value() {
+      return toHex(color);
+    },
+    get color() {
+      return { ...color };
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/color-slider/react.tsx

@@ -0,0 +1,45 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { toHex, toHsva } from '../../core/color';
+import { createColorSlider, type ColorSliderInstance, type ColorSliderOptions } from './engine';
+
+export interface ColorSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onInput' | 'onChange' | 'defaultValue'>, Omit<ColorSliderOptions, 'value'> {
+  /** Controlled colour; without it the slider keeps its own (defaultValue). */
+  value?: string;
+  defaultValue?: string;
+}
+
+/** <ColorSlider channel="hue" value={color} onInput={setColor} />. */
+export function ColorSlider({ value, defaultValue, channel, label, orientation, step, showValue, name, disabled, onInput, onChange, className, ...props }: ColorSliderProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ColorSliderInstance | null>(null);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const start = useRef(value ?? defaultValue);
+  useIsomorphicLayoutEffect(() => {
+    const created = createColorSlider(ref.current, {
+      value: value ?? start.current,
+      channel,
+      label,
+      orientation,
+      step,
+      showValue,
+      name,
+      disabled,
+      onInput: (hex, color) => input.current?.(hex, color),
+      onChange: (hex, color) => change.current?.(hex, color),
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel, label, orientation, step, showValue, name, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== undefined && instance.current && instance.current.value !== toHex(toHsva(value))) instance.current.setColor(value, false);
+  }, [value]);
+  return <div {...props} ref={ref} className={['mk-color-slider', className].filter(Boolean).join(' ')} />;
+}

package/src/components/command-search/README.md

@@ -0,0 +1,15 @@
+# command-search
+
+Paleta de comandos en un `<dialog>` modal sobre vidrio oscuro. Se abre con ⌘K / Ctrl+K o con un botón `[data-mk-command-open]` y crece desde el botón que la abre (o desde el disparador visible con ⌘K/Ctrl+K) y se pliega de vuelta en él al cerrar: el color del botón se funde en el panel y la forma viaja 0,7 s; `open(origen)` elige otro control y `open(null)` la abre en su sitio. Al escribir filtra por coincidencia aproximada (letras en orden, sin tildes ni mayúsculas) y marca las letras con `<mark>` creado como texto. Los resultados se agrupan; una píldora se desliza bajo el activo con la curva swing.
+
+```html
+<mk-command-search class="mk-command-search" items='[{"id":"charts","label":"Charts","group":"Páginas","href":"/chart"},{"id":"chart","label":"Chart","group":"Componentes","href":"/chart"}]'>
+  <button data-mk-command-open>Buscar… <kbd>⌘K</kbd></button>
+</mk-command-search>
+```
+
+`defineElements()`, `createCommandSearch(root, options)` o `<CommandSearch items={commands} onSelect={run} />`.
+
+`CommandItem`: `{id, label, group?, keywords?, hint?, href?, icon?}`. Opciones: `items`, `placeholder='Buscar…'`, `emptyLabel='Sin resultados'`, `label`, `shortcut=true`, `limit=50`, `onSelect(item)`, `onOpenChange(open)`. API: `open(origen?)`, `close()`, `setItems(items)`, `isOpen`, `destroy()`. Eventos `mk:select` `{item}` (cancelable: si nadie lo cancela y el item tiene `href`, navega), `mk:open` `{origin}`, `mk:close`. Utilidad `matchScore(query, text)`.
+
+Teclado: flechas, Inicio, Fin, Enter y Escape; el puntero también mueve el activo. Semántica combobox + listbox con `aria-activedescendant` y un estado que anuncia cuántos resultados hay. Al cerrar, el foco vuelve a quien la abrió. El botón de origen se oculta mientras la paleta está abierta y reaparece al plegarse. Movimiento reducido: aparece y se mueve sin animación.

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

@@ -0,0 +1,251 @@
+/* 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. */
+.mk-command-search,
+mk-command-search {
+  display: inline-flex;
+}
+
+[data-mk-command] {
+  --mk-command-bg: rgb(14 15 17 / 0.92);
+  --mk-command-text: #eceef1;
+  --mk-command-muted: #8b919b;
+  --mk-command-line: rgb(255 255 255 / 0.07);
+  --mk-command-pill: rgb(255 255 255 / 0.08);
+  --mk-command-mark: #f5d76e;
+  width: min(32rem, calc(100vw - 2rem));
+  max-height: min(28rem, calc(100dvh - 4rem));
+  margin: 12vh auto auto;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  color: var(--mk-command-text);
+  font-family: var(--mk-font);
+}
+
+[data-mk-command]::backdrop {
+  background: color-mix(in srgb, var(--mk-scrim, #000) 28%, transparent);
+  backdrop-filter: blur(3px);
+}
+
+[data-mk-command][open] {
+  display: block;
+}
+
+[data-mk-command] [data-mk-command-panel] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  overflow: hidden;
+  border-radius: 24px;
+  background: var(--mk-command-bg);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.08),
+    inset -1px -1px 1px rgb(255 255 255 / 0.04),
+    0 30px 60px -20px rgb(0 0 0 / 0.6);
+  backdrop-filter: blur(24px);
+}
+
+[data-mk-command] [data-mk-command-field] {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0.6rem;
+  padding: 0 0.85rem;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 0.05);
+  box-shadow: inset 0 0 0 1px var(--mk-command-line);
+}
+
+[data-mk-command] [data-mk-command-icon] {
+  display: grid;
+  color: var(--mk-command-muted);
+}
+
+[data-mk-command] input {
+  flex: 1;
+  min-width: 0;
+  min-height: 2.75rem;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--mk-command-text);
+  font: inherit;
+  font-size: 1rem;
+}
+
+[data-mk-command] input::placeholder {
+  color: var(--mk-command-muted);
+}
+
+[data-mk-command] [data-mk-command-scroll] {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 0.6rem 0.6rem;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(255 255 255 / 0.15) transparent;
+}
+
+[data-mk-command] [data-mk-command-pill] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 12px;
+  background: var(--mk-command-pill);
+  pointer-events: none;
+}
+
+[data-mk-command] [data-mk-command-list] {
+  position: relative;
+}
+
+[data-mk-command] [data-mk-command-group-label] {
+  padding: 0.75rem 0.65rem 0.35rem;
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+[data-mk-command] [data-mk-command-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.5rem;
+  padding: 0 0.65rem;
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+[data-mk-command] [data-mk-command-arrow] {
+  width: 1rem;
+  color: var(--mk-command-muted);
+  text-align: center;
+  transition: translate 0.3s cubic-bezier(0.38, 0.49, 0, 2);
+}
+
+[data-mk-command] [data-mk-command-item][aria-selected='true'] [data-mk-command-arrow] {
+  color: var(--mk-command-text);
+  translate: 2px 0;
+}
+
+[data-mk-command] [data-mk-command-label] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.9375rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-command] mark {
+  border-radius: 3px;
+  background: rgb(245 215 110 / 0.16);
+  color: var(--mk-command-mark);
+}
+
+[data-mk-command] [data-mk-command-hint] {
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-command] [data-mk-command-empty] {
+  margin: 0;
+  padding: 2rem 1rem;
+  color: var(--mk-command-muted);
+  text-align: center;
+}
+
+[data-mk-command] [data-mk-command-empty][hidden] {
+  display: none;
+}
+
+[data-mk-command] [data-mk-command-footer] {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.9rem;
+  border-top: 1px solid var(--mk-command-line);
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-command] [data-mk-command-footer] span {
+  margin-right: 0.6rem;
+}
+
+[data-mk-command] kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0 0.3rem;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 0.07);
+  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
+  color: var(--mk-command-text);
+  font-family: inherit;
+  font-size: 0.75rem;
+}
+
+/* The trigger (optional): a search pill with the shortcut. */
+[data-mk-command-open] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.75rem;
+  padding: 0 0.6rem 0 1rem;
+  border: 0;
+  border-radius: 64px;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-command-open]:hover {
+  background: var(--mk-surface-4);
+}
+
+[data-mk-command-open]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-command-open] kbd {
+  padding: 0.15rem 0.45rem;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font-family: inherit;
+  font-size: 0.75rem;
+}
+
+@media (max-width: 520px) {
+  [data-mk-command] {
+    margin-top: 1rem;
+  }
+
+  [data-mk-command] [data-mk-command-footer] {
+    display: none;
+  }
+}
+
+/* Container transform (motion/morph.ts): the trigger's look covers the panel and fades into it; the trigger hides meanwhile. */
+[data-mk-command] .mk-morph-face {
+  position: absolute;
+  inset: 0;
+  z-index: 2147483647;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+:is(.mk-command-search, mk-command-search) [data-mk-morph-origin] {
+  opacity: 0 !important;
+  transition: opacity 80ms ease !important;
+  pointer-events: none;
+}