@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/chart-tooltip/engine.ts

@@ -0,0 +1,442 @@
+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 { rollDigits } from '../../motion/micro';
+
+/*
+ * Chart tooltip: an advanced card for charts. Over the kit's chart (created
+ * with tooltip: false) it follows the chart's selection — mk:select brings the
+ * point, each series and its previous value — and leaves the guide and markers
+ * to the chart. Over any other chart it tracks the pointer itself across
+ * `labels` (edge to edge for lines, slot centres for bars, inside `inset`),
+ * drawing a dotted guide and, with `min`/`max`, a marker per series; the
+ * keyboard moves it too (arrows, Home, End, Escape). The card is Melon Mind's
+ * inverse glass: the label, one row per series with its value, the change from
+ * the previous point (▲ ▼ %) and optionally its share, a total, rows sorted by
+ * value on request. It pops in (.25 s, pop), glides between points (.25 s,
+ * power3.out) on the side with room, and changed values roll in their
+ * direction. A click pins it: it stays when the pointer leaves (the pin pops
+ * in); another click or Escape releases it.
+ */
+
+export interface ChartTooltipSeries {
+  name: string;
+  values: Array<number | null>;
+  /** Any CSS colour (default: the --mk-chart-N slot). */
+  color?: string;
+}
+
+export interface ChartTooltipOptions {
+  /** Standalone: the x labels, one per point. */
+  labels?: string[];
+  series?: ChartTooltipSeries[];
+  /** Standalone: points edge to edge (lines, default) or at slot centres (bars). */
+  align?: 'edge' | 'center';
+  /** Standalone: the plot inside the root, in px from each side (default 0). */
+  inset?: { top?: number; right?: number; bottom?: number; left?: number };
+  /** Standalone: the y scale; with it a marker sits on each series. */
+  min?: number;
+  max?: number;
+  formatValue?: (value: number) => string;
+  /** The change from the previous point (default true). */
+  delta?: boolean;
+  /** Each row's share of the total (default false). */
+  share?: boolean;
+  /** A total row (default: two or more series). */
+  total?: boolean;
+  /** Rows by value, largest first (default false). */
+  sort?: boolean;
+  /** A click pins the card (default true). */
+  pin?: boolean;
+  /** Standalone: accessible name of the focusable plot. */
+  label?: string;
+  onIndexChange?: (index: number | null) => void;
+}
+
+export interface ChartTooltipInstance extends Instance {
+  show(index: number): void;
+  hide(): void;
+  update(options: ChartTooltipOptions): void;
+  readonly index: number | null;
+  readonly pinned: boolean;
+}
+
+interface Row {
+  name: string;
+  color: string;
+  value: number | null;
+  previous: number | null;
+}
+
+const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);
+const PIN = '<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4h6l-1 6 3 3H7l3-3z"/><path d="M12 13v7"/></svg>';
+
+export function createChartTooltip(root: HTMLElement | null, initial: ChartTooltipOptions = {}): ChartTooltipInstance {
+  if (!root) return inert({ show() {}, hide() {}, update() {}, index: null, pinned: false });
+  registerMotion();
+  const scope = createScope();
+  let options: ChartTooltipOptions = { ...initial };
+  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);
+  };
+  const number = numberFormat(root, { maximumFractionDigits: 2 });
+  const percent = numberFormat(root, { maximumFractionDigits: 1, minimumFractionDigits: 1 });
+  const format = (value: number) => (options.formatValue ? options.formatValue(value) : number.format(value));
+
+  const layer = document.createElement('div');
+  layer.dataset.mkCtLayer = '';
+  layer.setAttribute('aria-hidden', 'true');
+  const guide = document.createElement('span');
+  guide.dataset.mkCtGuide = '';
+  guide.hidden = true;
+  const markers = document.createElement('span');
+  markers.dataset.mkCtMarkers = '';
+  const card = document.createElement('div');
+  card.dataset.mkCtCard = '';
+  card.hidden = true;
+  const head = document.createElement('div');
+  head.dataset.mkCtHead = '';
+  const title = document.createElement('strong');
+  title.dataset.mkCtTitle = '';
+  const pin = document.createElement('span');
+  pin.dataset.mkCtPin = '';
+  pin.innerHTML = PIN;
+  pin.hidden = true;
+  head.append(title, pin);
+  const rowsHost = document.createElement('div');
+  rowsHost.dataset.mkCtRows = '';
+  card.append(head, rowsHost);
+  layer.append(guide, markers, card);
+  const live = document.createElement('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  root.append(layer, live);
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    gsap.killTweensOf([card, guide]);
+    layer.remove();
+    live.remove();
+  });
+  scope.attr(root, 'data-mk-ready', '');
+
+  /** A kit chart inside: follow its selection instead of tracking the pointer. */
+  const linked = () => root.querySelector<HTMLElement>('[data-mk-chart-plot]');
+  if (!linked() && !root.matches('a[href], button, [tabindex]')) {
+    scope.attr(root, 'tabindex', '0');
+    scope.attr(root, 'role', 'group');
+    scope.attr(root, 'aria-label', options.label ?? 'Gráfica');
+  }
+
+  let index: number | null = null;
+  let pinned = false;
+  let rows: Row[] = [];
+  let label = '';
+
+  const plot = () => {
+    const width = root.clientWidth;
+    const height = root.clientHeight;
+    const inset = options.inset ?? {};
+    return { left: inset.left ?? 0, right: width - (inset.right ?? 0), top: inset.top ?? 0, bottom: height - (inset.bottom ?? 0), width, height };
+  };
+  const count = () => Math.max(options.labels?.length ?? 0, ...(options.series ?? []).map((series) => series.values.length), 0);
+  const xOf = (i: number) => {
+    const box = plot();
+    const n = count();
+    if (options.align === 'center') return box.left + ((i + 0.5) * (box.right - box.left)) / Math.max(1, n);
+    return n <= 1 ? (box.left + box.right) / 2 : box.left + (i * (box.right - box.left)) / (n - 1);
+  };
+  const scaled = () => finite(options.min) && finite(options.max) && options.max! > options.min!;
+  const yOf = (value: number) => {
+    const box = plot();
+    return box.top + (1 - (value - options.min!) / (options.max! - options.min!)) * (box.bottom - box.top);
+  };
+  const rowsAt = (i: number): Row[] =>
+    (options.series ?? []).map((series, k) => ({
+      name: series.name,
+      color: series.color ?? `var(--mk-chart-${(k % 8) + 1})`,
+      value: finite(series.values[i]) ? series.values[i]! : null,
+      previous: i > 0 && finite(series.values[i - 1]) ? series.values[i - 1]! : null,
+    }));
+
+  const deltaOf = (row: Row) => {
+    if (row.value === null || row.previous === null || row.previous === 0) return null;
+    return ((row.value - row.previous) / Math.abs(row.previous)) * 100;
+  };
+
+  /**
+   * A colour as the chart draws it: variables (the --mk-chart-N slots) resolve where the chart defines them, so a
+   * chart recoloured by its own CSS shows the same colours in the card.
+   */
+  const resolveColor = (color: string) => {
+    if (!color.includes('var(')) return color;
+    const probe = document.createElement('span');
+    probe.style.color = color;
+    (linked() ?? root).append(probe);
+    const value = getComputedStyle(probe).color;
+    probe.remove();
+    return value && !value.includes('var(') ? value : color;
+  };
+
+  /** Write the card's rows, rolling values that changed. */
+  const paintRows = () => {
+    const showTotal = options.total ?? rows.length > 1;
+    const total = rows.reduce((sum, row) => sum + (row.value ?? 0), 0);
+    const ordered = options.sort ? [...rows].sort((a, b) => (b.value ?? -Infinity) - (a.value ?? -Infinity)) : rows;
+    const existing = [...rowsHost.querySelectorAll<HTMLElement>('[data-mk-ct-row]:not([data-mk-ct-row="total"])')];
+    const reuse = existing.length === ordered.length && existing.every((element, k) => element.dataset.mkName === ordered[k]!.name);
+    const lines: string[] = [];
+    const write = (element: HTMLElement, text: string, value: number | null) => {
+      const before = Number(element.dataset.mkValue);
+      element.dataset.mkValue = value === null ? '' : String(value);
+      if (reuse && !reduced() && element.textContent !== text && value !== null && Number.isFinite(before)) keep(rollDigits(element, text, value >= before ? 1 : -1, 0.28));
+      else element.textContent = text;
+    };
+    const elements = ordered.map((row, k) => {
+      const element = reuse ? existing[k]! : document.createElement('div');
+      if (!reuse) {
+        element.dataset.mkCtRow = '';
+        element.dataset.mkName = row.name;
+        const swatch = document.createElement('i');
+        swatch.dataset.mkCtSwatch = '';
+        const name = document.createElement('span');
+        name.dataset.mkCtName = '';
+        name.textContent = row.name;
+        const value = document.createElement('b');
+        value.dataset.mkCtValue = '';
+        const delta = document.createElement('span');
+        delta.dataset.mkCtDelta = '';
+        element.append(swatch, name, value, delta);
+      }
+      // Text-coloured series would vanish on the inverse glass: they show as a line in its ink.
+      const swatch = element.querySelector<HTMLElement>('[data-mk-ct-swatch]')!;
+      if (/--mk-(text|chart-mono|muted)/.test(row.color)) swatch.dataset.mkMono = '';
+      else swatch.style.background = resolveColor(row.color);
+      write(element.querySelector<HTMLElement>('[data-mk-ct-value]')!, row.value === null ? '—' : format(row.value), row.value);
+      const deltaElement = element.querySelector<HTMLElement>('[data-mk-ct-delta]')!;
+      const change = options.delta === false ? null : deltaOf(row);
+      const parts: string[] = [];
+      if (change !== null) {
+        const trend = Math.abs(change) < 0.05 ? 'flat' : change > 0 ? 'up' : 'down';
+        deltaElement.dataset.mkTrend = trend;
+        parts.push(`${trend === 'up' ? '▲' : trend === 'down' ? '▼' : '='} ${percent.format(Math.abs(change))} %`);
+      }
+      if (options.share && row.value !== null && total) parts.push(`${percent.format((row.value / total) * 100)} % del total`);
+      deltaElement.textContent = parts.join(' · ');
+      deltaElement.hidden = !parts.length;
+      lines.push(`${row.name ? `${row.name}: ` : ''}${row.value === null ? 'sin dato' : format(row.value)}${change !== null ? `, ${change >= 0 ? 'sube' : 'baja'} ${percent.format(Math.abs(change))} %` : ''}`);
+      return element;
+    });
+    let totalElement = rowsHost.querySelector<HTMLElement>('[data-mk-ct-row="total"]');
+    if (showTotal) {
+      if (!totalElement) {
+        totalElement = document.createElement('div');
+        totalElement.dataset.mkCtRow = 'total';
+        const name = document.createElement('span');
+        name.dataset.mkCtName = '';
+        name.textContent = 'Total';
+        const value = document.createElement('b');
+        value.dataset.mkCtValue = '';
+        totalElement.append(document.createElement('i'), name, value);
+      }
+      write(totalElement.querySelector<HTMLElement>('[data-mk-ct-value]')!, format(total), total);
+      lines.push(`Total: ${format(total)}`);
+    }
+    rowsHost.replaceChildren(...elements, ...(showTotal && totalElement ? [totalElement] : []));
+    return lines;
+  };
+
+  /** Place the card beside x, towards the middle, above the highest point, inside the root. */
+  const placeCard = (x: number, anchorY: number, appearing: boolean) => {
+    const width = root.clientWidth;
+    const height = root.clientHeight;
+    const cardW = card.offsetWidth || 180;
+    const cardH = card.offsetHeight || 80;
+    const towardsLeft = x > width / 2;
+    const left = Math.round(Math.max(0, Math.min(width - cardW, towardsLeft ? x - 16 - cardW : x + 16)));
+    const top = Math.round(Math.max(0, Math.min(height - cardH, anchorY - cardH - 12)));
+    if (appearing || reduced()) {
+      gsap.killTweensOf(card);
+      gsap.set(card, { x: left, y: top, transformOrigin: towardsLeft ? '100% 100%' : '0% 100%' });
+      if (!reduced()) keep(gsap.fromTo(card, { opacity: 0, scale: 0.9, filter: 'blur(6px)' }, { opacity: 1, scale: 1, filter: 'blur(0px)', duration: 0.25, ease: EASE.pop }));
+      else gsap.set(card, { opacity: 1, scale: 1 });
+    } else {
+      gsap.killTweensOf(card, 'opacity,scale,filter');
+      gsap.set(card, { opacity: 1, scale: 1, filter: 'blur(0px)' });
+      keep(gsap.to(card, { x: left, y: top, duration: 0.25, ease: 'power3.out', overwrite: 'auto' }));
+    }
+  };
+
+  /** Standalone: the dotted guide and a marker per series. */
+  const paintGuide = (x: number, appearing: boolean) => {
+    const box = plot();
+    guide.hidden = false;
+    gsap.set(guide, { top: box.top, height: Math.max(0, box.bottom - box.top) });
+    if (appearing || reduced()) gsap.set(guide, { x });
+    else keep(gsap.to(guide, { x, duration: 0.25, ease: 'power3.out', overwrite: 'auto' }));
+    if (!scaled()) {
+      markers.replaceChildren();
+      return box.top + 8 + (card.offsetHeight || 80) + 12;
+    }
+    const fresh = markers.children.length !== rows.length;
+    if (fresh) {
+      markers.replaceChildren(
+        ...rows.map((row) => {
+          const dot = document.createElement('span');
+          dot.dataset.mkCtMarker = '';
+          dot.style.background = row.color;
+          return dot;
+        }),
+      );
+    }
+    let highest = box.bottom;
+    rows.forEach((row, k) => {
+      const dot = markers.children[k] as HTMLElement;
+      dot.hidden = row.value === null;
+      if (row.value === null) return;
+      const y = yOf(row.value);
+      highest = Math.min(highest, y);
+      if (appearing || fresh || reduced()) {
+        gsap.set(dot, { x, y });
+        if (!reduced()) keep(gsap.fromTo(dot, { scale: 0 }, { scale: 1, duration: 0.3, ease: EASE.pop }));
+      } else keep(gsap.to(dot, { x, y, duration: 0.25, ease: 'power3.out', overwrite: 'auto' }));
+    });
+    return highest;
+  };
+
+  const emit = () => {
+    options.onIndexChange?.(index);
+    root.dispatchEvent(new CustomEvent('mk:index-change', { bubbles: true, detail: { index, pinned } }));
+  };
+
+  /** Show the card for point `i`: x and anchorY in root px. */
+  const present = (i: number, x: number, anchorY: number | null, announce: boolean) => {
+    const appearing = card.hidden;
+    const changed = i !== index;
+    index = i;
+    title.textContent = label;
+    const lines = paintRows();
+    card.hidden = false;
+    const top = anchorY ?? paintGuide(x, appearing);
+    placeCard(x, top, appearing);
+    if (announce) live.textContent = `${label}. ${lines.join('. ')}`;
+    if (changed) emit();
+  };
+
+  const hide = (force = false) => {
+    if (pinned && !force) return;
+    if (force) setPinned(false);
+    if (index === null && card.hidden) return;
+    index = null;
+    guide.hidden = true;
+    markers.replaceChildren();
+    if (!card.hidden && !reduced()) {
+      gsap.killTweensOf(card, 'opacity,scale,filter');
+      keep(gsap.to(card, { opacity: 0, scale: 0.94, duration: 0.15, ease: 'power2.in', onComplete: () => void (card.hidden = true) }));
+    } else card.hidden = true;
+    emit();
+  };
+
+  const setPinned = (next: boolean) => {
+    if (pinned === next) return;
+    pinned = next;
+    root.toggleAttribute('data-mk-pinned', pinned);
+    pin.hidden = !pinned;
+    if (pinned && !reduced()) keep(gsap.fromTo(pin, { scale: 0.4, rotation: -30 }, { scale: 1, rotation: 0, duration: 0.35, ease: EASE.click, clearProps: 'transform' }));
+    root.dispatchEvent(new CustomEvent('mk:index-change', { bubbles: true, detail: { index, pinned } }));
+  };
+  scope.attr(root, 'data-mk-pinned', null);
+
+  /** Standalone: show point i from the options' data. */
+  const showStandalone = (i: number, announce = false) => {
+    const n = count();
+    if (!n) return;
+    const clamped = Math.max(0, Math.min(n - 1, Math.round(i)));
+    rows = rowsAt(clamped);
+    label = options.labels?.[clamped] ?? String(clamped + 1);
+    present(clamped, xOf(clamped), null, announce);
+  };
+
+  const indexAt = (clientX: number) => {
+    const rect = root.getBoundingClientRect();
+    const x = clientX - rect.left;
+    let best = 0;
+    for (let i = 1; i < count(); i++) if (Math.abs(xOf(i) - x) < Math.abs(xOf(best) - x)) best = i;
+    return best;
+  };
+
+  // Linked: the kit chart tells where its selection is.
+  scope.on(root, 'mk:select', (event) => {
+    const plotElement = linked();
+    if (!plotElement || event.target === root) return;
+    const detail = (event as CustomEvent<{ index: number | null; label: string | null; x: number | null; y: number | null; series?: Array<{ name: string; color: string; value: number | null; previous: number | null }> }>).detail;
+    if (detail.index === null || detail.x === null || detail.y === null) return hide();
+    const rootBox = root.getBoundingClientRect();
+    const plotBox = plotElement.getBoundingClientRect();
+    rows = (detail.series ?? []).map((row) => ({ name: row.name, color: row.color, value: finite(row.value) ? row.value : null, previous: finite(row.previous) ? row.previous : null }));
+    label = detail.label ?? '';
+    present(detail.index, plotBox.left - rootBox.left + detail.x, plotBox.top - rootBox.top + detail.y, false);
+  });
+
+  scope.on(root, 'pointermove', (event) => {
+    if (linked()) return;
+    showStandalone(indexAt((event as PointerEvent).clientX));
+  });
+  scope.on(root, 'pointerleave', (event) => {
+    if (linked() || (event as PointerEvent).pointerType === 'touch') return;
+    hide();
+  });
+  scope.on(root, 'click', (event) => {
+    if (options.pin === false || card.hidden) return;
+    const target = event.target as Element | null;
+    if (target?.closest('a, button, input, select, textarea')) return;
+    setPinned(!pinned);
+  });
+  scope.on(root, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    if (key === 'Escape') {
+      if (index !== null || pinned) {
+        event.preventDefault();
+        hide(true);
+      }
+      return;
+    }
+    if (linked()) return;
+    const last = count() - 1;
+    const moves: Record<string, number> = { ArrowRight: Math.min(last, (index ?? -1) + 1), ArrowLeft: Math.max(0, (index ?? 1) - 1), Home: 0, End: last };
+    if (!(key in moves) || last < 0) return;
+    event.preventDefault();
+    showStandalone(moves[key]!, true);
+  });
+  scope.on(root, 'focus', () => {
+    if (!linked() && index === null && count()) showStandalone(0, true);
+  });
+  scope.on(root, 'blur', () => {
+    if (!linked()) hide();
+  });
+
+  return {
+    show(i) {
+      if (!linked()) showStandalone(i, true);
+    },
+    hide: () => hide(true),
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      if (index !== null && !linked()) showStandalone(index);
+    },
+    get index() {
+      return index;
+    },
+    get pinned() {
+      return pinned;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/chart-tooltip/react.tsx

@@ -0,0 +1,47 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createChartTooltip, type ChartTooltipInstance, type ChartTooltipOptions } from './engine';
+
+export interface ChartTooltipProps extends HTMLAttributes<HTMLDivElement>, ChartTooltipOptions {}
+
+/**
+ * <ChartTooltip share><Chart tooltip={false} … /></ChartTooltip>, or over any chart with labels, series,
+ * inset, min and max.
+ */
+export function ChartTooltip({ labels, series, align, inset, min, max, formatValue, delta, share, total, sort, pin, label, onIndexChange, className, children, ...props }: ChartTooltipProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ChartTooltipInstance | null>(null);
+  const format = useLatest(formatValue);
+  const change = useLatest(onIndexChange);
+  const data = { labels, series, align, inset, min, max, delta, share, total, sort, pin, label };
+  const key = JSON.stringify(data);
+  const options = (): ChartTooltipOptions => ({
+    ...data,
+    formatValue: formatValue ? (value) => format.current?.(value) ?? String(value) : undefined,
+    onIndexChange: (index) => change.current?.(index),
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createChartTooltip(ref.current, options());
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const first = useRef(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, Boolean(formatValue)]);
+  return (
+    <div {...props} ref={ref} className={['mk-chart-tooltip', className].filter(Boolean).join(' ')}>
+      {children}
+    </div>
+  );
+}

package/src/components/code-block/README.md

@@ -0,0 +1,19 @@
+# code-block
+
+Bloque de código con título y lenguaje opcionales, números de línea y botón copiar con confirmación. El código siempre se trata como texto: una cadena que parece HTML se muestra como código, nunca se interpreta.
+
+```html
+<mk-code-block class="mk-code-block" title="Instalar" language="bash">
+  <pre><code>npm install @yewdiel21/motion-kit gsap</code></pre>
+</mk-code-block>
+```
+
+`defineElements()`, `createCodeBlock(root, options)` o `<CodeBlock code={source} language="ts" title="main.ts" lineNumbers />`.
+
+Opciones: `code` (sin ella se usa y se copia el texto actual de `<code>`), `language`, `title`, `lineNumbers`, `highlight` (colorea la sintaxis; por defecto cuando el lenguaje está soportado), `highlightLines` (líneas a marcar, desde 1), `copyLabel='Copiar'`, `copiedLabel='Copiado'`, `errorLabel='No se pudo copiar'`, `onCopy(ok)`. API: `setCode(text)`, `copy(): Promise<boolean>`, `code`, `destroy()`. Evento `mk:copy` con `{ok, code}`.
+
+Copiar usa la Clipboard API con el texto exacto (espacios, tabs y saltos de línea). El resultado se anuncia en un estado educado y se refleja en el botón (`data-mk-copied` / `data-mk-copy-error` durante 2 s). Si el portapapeles no está disponible o lo deniega, el código queda seleccionado para copiarlo a mano. Una copia que termina después de `destroy()` no toca el DOM.
+
+El marcado propio se respeta: `pre > code`, `[data-mk-code-copy]`, `[data-mk-code-status]`, `[data-mk-code-header]`; las piezas que faltan se crean y `destroy()` las quita y restaura texto y atributos. El clic de copiar es delegado, así que un framework puede volver a renderizar el botón. Los números de línea son un contador CSS que no se selecciona ni se copia. El resaltado es propio y sin dependencias: ts/js/tsx/jsx, json, css, html/xml/svg/astro/vue y shell; cada token es un `span` creado con `textContent`, así que el código nunca se interpreta como HTML. Siempre es un editor oscuro (también en tema claro): barra con tres puntos, título, lenguaje y botón copiar; radio de 12px para que las líneas largas no choquen con una esquina curva (se desplazan en horizontal).
+
+Variables: `--mk-code-radius` (12px), `--mk-code-bg`, `--mk-code-bar`, `--mk-code-text` y los colores de sintaxis `--mk-code-keyword`, `--mk-code-string`, `--mk-code-number`, `--mk-code-comment`, `--mk-code-function`, `--mk-code-tag`, `--mk-code-attr`, `--mk-code-property`; el botón muestra la etiqueta de éxito o error mediante `data-mk-feedback`. Movimiento reducido quita la escala al pulsar.