@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/code-block/highlight.ts

@@ -0,0 +1,244 @@
+/*
+ * A small syntax highlighter for code blocks: no dependency, no HTML parsing.
+ * It splits code into typed tokens whose texts concatenate back to the exact
+ * input, then builds one [data-mk-code-line] per line with spans created
+ * through textContent, so markup in the code is always shown, never run.
+ * Languages: ts, js, tsx, jsx, json, css, html (also xml, svg, astro, vue), bash (sh, shell, zsh).
+ */
+
+export type TokenType = 'plain' | 'keyword' | 'string' | 'comment' | 'number' | 'tag' | 'attr' | 'property' | 'function' | 'punctuation' | 'operator';
+
+export interface Token {
+  type: TokenType;
+  text: string;
+}
+
+type Family = 'script' | 'markup' | 'css' | 'shell' | 'json' | 'plain';
+
+const ALIASES: Record<string, Family> = {
+  ts: 'script',
+  typescript: 'script',
+  js: 'script',
+  javascript: 'script',
+  mjs: 'script',
+  cjs: 'script',
+  tsx: 'script',
+  jsx: 'script',
+  json: 'json',
+  css: 'css',
+  scss: 'css',
+  html: 'markup',
+  xml: 'markup',
+  svg: 'markup',
+  astro: 'markup',
+  vue: 'markup',
+  bash: 'shell',
+  sh: 'shell',
+  shell: 'shell',
+  zsh: 'shell',
+  console: 'shell',
+};
+
+const JSX = new Set(['tsx', 'jsx', 'astro', 'vue']);
+
+const SCRIPT_KEYWORDS = new Set(
+  'import export from as default const let var function return if else for while do switch case break continue new class extends super this typeof instanceof in of await async yield try catch finally throw delete void interface type enum implements public private protected readonly static declare namespace keyof satisfies true false null undefined'.split(
+    ' ',
+  ),
+);
+const SHELL_KEYWORDS = new Set('if then else elif fi for in do done while until case esac function return export local set unset echo cd source'.split(' '));
+
+/** The language a code block uses, or 'plain'. */
+export function languageFamily(language: string | undefined): Family {
+  return ALIASES[(language ?? '').trim().toLowerCase()] ?? 'plain';
+}
+
+interface Rule {
+  type: TokenType;
+  re: RegExp;
+}
+
+const sticky = (source: string) => new RegExp(source, 'y');
+
+const RULES: Record<Exclude<Family, 'plain'>, Rule[]> = {
+  script: [
+    { type: 'comment', re: sticky(String.raw`\/\/[^\n]*|\/\*[\s\S]*?(?:\*\/|$)`) },
+    { type: 'string', re: sticky(String.raw`"(?:\\.|[^"\\\n])*"?|'(?:\\.|[^'\\\n])*'?|\`(?:\\[\s\S]|[^\`\\])*\`?`) },
+    { type: 'number', re: sticky(String.raw`\b(?:0[xX][\da-fA-F_]+|\d[\d_]*(?:\.\d+)?(?:[eE][+-]?\d+)?n?)\b`) },
+    { type: 'punctuation', re: sticky(String.raw`[{}()[\];,.]`) },
+    { type: 'operator', re: sticky(String.raw`=>|[=!<>]=?=?|&&|\|\||\?\??|[+\-*/%&|^~:]`) },
+  ],
+  json: [
+    { type: 'property', re: sticky(String.raw`"(?:\\.|[^"\\\n])*"(?=\s*:)`) },
+    { type: 'string', re: sticky(String.raw`"(?:\\.|[^"\\\n])*"?`) },
+    { type: 'number', re: sticky(String.raw`-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b`) },
+    { type: 'keyword', re: sticky(String.raw`\b(?:true|false|null)\b`) },
+    { type: 'punctuation', re: sticky(String.raw`[{}[\],:]`) },
+  ],
+  css: [
+    { type: 'comment', re: sticky(String.raw`\/\*[\s\S]*?(?:\*\/|$)`) },
+    { type: 'string', re: sticky(String.raw`"(?:\\.|[^"\\\n])*"?|'(?:\\.|[^'\\\n])*'?`) },
+    { type: 'keyword', re: sticky(String.raw`@[\w-]+|!important`) },
+    { type: 'property', re: sticky(String.raw`--[\w-]+|[a-zA-Z-]+(?=\s*:(?!:))`) },
+    { type: 'number', re: sticky(String.raw`#[\da-fA-F]{3,8}\b|-?\d*\.?\d+(?:%|[a-zA-Z]+)?`) },
+    { type: 'function', re: sticky(String.raw`[\w-]+(?=\()`) },
+    { type: 'punctuation', re: sticky(String.raw`[{}()[\];,:]`) },
+  ],
+  markup: [
+    { type: 'comment', re: sticky(String.raw`<!--[\s\S]*?(?:-->|$)`) },
+    { type: 'tag', re: sticky(String.raw`<\/?[A-Za-z][\w.:-]*|\/?>`) },
+    { type: 'string', re: sticky(String.raw`"[^"\n]*"?|'[^'\n]*'?`) },
+    { type: 'attr', re: sticky(String.raw`[\w:@.-]+(?==)`) },
+    { type: 'punctuation', re: sticky(String.raw`[{}=]`) },
+  ],
+  shell: [
+    { type: 'comment', re: sticky(String.raw`(?:^|(?<=\s))#[^\n]*`) },
+    { type: 'string', re: sticky(String.raw`"(?:\\.|[^"\\])*"?|'[^']*'?`) },
+    { type: 'property', re: sticky(String.raw`\$\{?[\w@#?*]+\}?`) },
+    { type: 'attr', re: sticky(String.raw`(?<=\s)--?[\w-]+(?:=[^\s]*)?`) },
+    { type: 'number', re: sticky(String.raw`\b\d+\b`) },
+    { type: 'operator', re: sticky(String.raw`&&|\|\||[|>&;]`) },
+  ],
+};
+
+const IDENT = /[A-Za-z_$][\w$-]*/y;
+const JSX_OPEN = /<\/?(?:[A-Za-z][\w.:-]*(?=[\s/>])|(?=>))/y;
+const JSX_CLOSE = /\/?>/y;
+const JSX_ATTR = /[A-Za-z_:][\w:-]*(?==)/y;
+
+const lastMeaningful = (tokens: Token[]) => {
+  for (let i = tokens.length - 1; i >= 0; i--) if (tokens[i]!.text.trim()) return tokens[i]!;
+  return null;
+};
+
+/** Typed tokens whose texts join back to `code` exactly. */
+export function tokenize(code: string, language?: string): Token[] {
+  const text = String(code ?? '');
+  const family = languageFamily(language);
+  if (family === 'plain') return text ? [{ type: 'plain', text }] : [];
+  const rules = RULES[family];
+  const jsx = family === 'script' && JSX.has((language ?? '').trim().toLowerCase());
+  const tokens: Token[] = [];
+  const push = (type: TokenType, value: string) => {
+    const last = tokens[tokens.length - 1];
+    if (last && last.type === 'plain' && type === 'plain') last.text += value;
+    else tokens.push({ type, text: value });
+  };
+  const take = (re: RegExp, at: number) => {
+    re.lastIndex = at;
+    const match = re.exec(text);
+    return match && match[0] ? match[0] : null;
+  };
+  let i = 0;
+  // Inside `<…>` (markup and JSX), and how deep in JSX children we are.
+  let inTag = false;
+  let closing = false;
+  let depth = 0;
+  scan: while (i < text.length) {
+    if (jsx) {
+      if (!inTag) {
+        const open = take(JSX_OPEN, i);
+        const before = lastMeaningful(tokens);
+        // `a < b` is a comparison; a tag follows `(`, `{`, `=`, `return`, another tag or JSX children.
+        if (open && (depth > 0 || !before || /[({>=,?:;[]$/.test(before.text) || before.text === 'return')) {
+          push('tag', open);
+          inTag = true;
+          closing = open.startsWith('</');
+          i += open.length;
+          continue;
+        }
+      } else {
+        const close = take(JSX_CLOSE, i);
+        if (close) {
+          push('tag', close);
+          inTag = false;
+          if (closing) depth = Math.max(0, depth - 1);
+          else if (close === '>') depth += 1;
+          i += close.length;
+          continue;
+        }
+        const attr = take(JSX_ATTR, i);
+        if (attr) {
+          push('attr', attr);
+          i += attr.length;
+          continue;
+        }
+      }
+    }
+    // Markup outside tags: only comments and tags count; the rest is text.
+    const usable = family === 'markup' && !inTag ? rules.slice(0, 2) : rules;
+    for (const rule of usable) {
+      const match = take(rule.re, i);
+      if (!match) continue;
+      if (family === 'markup' && rule.type === 'tag') inTag = !match.endsWith('>');
+      push(rule.type, match);
+      i += match.length;
+      continue scan;
+    }
+    if (family === 'script' || family === 'shell') {
+      const found = take(IDENT, i);
+      if (found) {
+        const word = family === 'script' ? found.replace(/-.*$/, '') : found;
+        const after = text.slice(i + word.length).match(/^\s*(\S)/)?.[1];
+        const before = lastMeaningful(tokens);
+        let type: TokenType = 'plain';
+        if ((family === 'script' ? SCRIPT_KEYWORDS : SHELL_KEYWORDS).has(word)) type = 'keyword';
+        else if (after === '(') type = 'function';
+        else if (family === 'script' && before?.text === '.') type = 'property';
+        else if (family === 'shell' && /(?:^|[\n|;&])[ \t]*$/.test(text.slice(0, i))) type = 'function';
+        else if (family === 'script' && /^[A-Z]/.test(word)) type = 'function';
+        push(type, word);
+        i += word.length;
+        continue;
+      }
+    }
+    push('plain', text[i]!);
+    i += 1;
+  }
+  return tokens;
+}
+
+/** Tokens split into lines (a token spanning lines is cut at each newline). */
+export function tokenLines(tokens: Token[]): Token[][] {
+  const lines: Token[][] = [[]];
+  for (const token of tokens) {
+    const parts = token.text.split('\n');
+    parts.forEach((part, index) => {
+      if (index) lines.push([]);
+      if (part) lines[lines.length - 1]!.push({ type: token.type, text: part });
+    });
+  }
+  return lines;
+}
+
+/**
+ * Write highlighted code into `target`: one [data-mk-code-line] per line, joined
+ * by newline text nodes, so `target.textContent` is the code itself.
+ */
+export function renderCode(target: Element, code: string, language?: string, highlight: number[] = []) {
+  const marked = new Set(highlight);
+  const lines = tokenLines(tokenize(code, language));
+  // A final newline ends the last line; it does not open an empty one (the text node stays).
+  const trailing = lines.length > 1 && !lines[lines.length - 1]!.length;
+  if (trailing) lines.pop();
+  const nodes: Node[] = [];
+  lines.forEach((line, index) => {
+    if (index) nodes.push(document.createTextNode('\n'));
+    const row = document.createElement('span');
+    row.dataset.mkCodeLine = '';
+    if (marked.has(index + 1)) row.dataset.mkHighlight = '';
+    for (const token of line) {
+      if (token.type === 'plain') {
+        row.append(token.text);
+        continue;
+      }
+      const span = document.createElement('span');
+      span.dataset.mkToken = token.type;
+      span.textContent = token.text;
+      row.append(span);
+    }
+    nodes.push(row);
+  });
+  if (trailing) nodes.push(document.createTextNode('\n'));
+  target.replaceChildren(...nodes);
+}

package/src/components/code-block/react.tsx

@@ -0,0 +1,94 @@
+'use client';
+import { Fragment, useMemo, useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createCodeBlock, flowLines, type CodeBlockInstance, type CodeBlockOptions } from './engine';
+import { languageFamily, tokenLines, tokenize } from './highlight';
+
+/** `onCopy` is the copy result (not the DOM clipboard event). */
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title' | 'onCopy'>, Omit<CodeBlockOptions, 'code'> {
+  code: string;
+}
+
+/**
+ * <CodeBlock code={source} language="ts" title="main.ts" lineNumbers />.
+ * React renders the highlighted lines (text only); the engine copies the current text and owns the feedback.
+ */
+export function CodeBlock({ code, language, title, lineNumbers, highlight, highlightLines, copyLabel = 'Copiar', copiedLabel, errorLabel, onCopy, className, ...props }: CodeBlockProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<CodeBlockInstance | null>(null);
+  const copied = useLatest(onCopy);
+  const latest = useLatest(code);
+  useIsomorphicLayoutEffect(() => {
+    const created = createCodeBlock(ref.current, { copyLabel, copiedLabel, errorLabel, onCopy: (ok) => copied.current?.(ok) });
+    // The engine copies the exact string, not the rendered DOM.
+    created.setCode(latest.current);
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [copyLabel, copiedLabel, errorLabel]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setCode(code);
+  }, [code]);
+  // New code flows in line by line (not on the first render).
+  const first = useRef(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    const animation = flowLines(ref.current?.querySelector('code') ?? null);
+    return () => {
+      animation?.progress(1).kill();
+    };
+  }, [code, language]);
+  const colour = highlight ?? languageFamily(language) !== 'plain';
+  const lines = useMemo(() => tokenLines(tokenize(code, colour ? language : undefined)), [code, language, colour]);
+  // A final newline ends the last line; it does not open an empty one.
+  const trailing = lines.length > 1 && !lines[lines.length - 1]!.length;
+  const shown = trailing ? lines.slice(0, -1) : lines;
+  const marked = new Set(highlightLines ?? []);
+  return (
+    <div {...props} ref={ref} className={['mk-code-block', className].filter(Boolean).join(' ')} data-mk-language={language} data-mk-line-numbers={lineNumbers ? '' : undefined}>
+      <div data-mk-code-header="">
+        <span data-mk-code-dots="" aria-hidden="true">
+          <i />
+          <i />
+          <i />
+        </span>
+        <span data-mk-code-title="">{title}</span>
+        {language && <span data-mk-code-language="">{language}</span>}
+        <button type="button" data-mk-code-copy="">
+          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+            <rect x="9" y="9" width="11" height="11" rx="2.5" />
+            <path d="M5 15V6a2 2 0 0 1 2-2h8" />
+          </svg>
+          <span data-mk-code-copy-text="">{copyLabel}</span>
+        </button>
+      </div>
+      <pre tabIndex={0}>
+        <code>
+          {shown.map((line, i) => (
+            <Fragment key={i}>
+              {i ? '\n' : null}
+              <span data-mk-code-line="" data-mk-highlight={marked.has(i + 1) ? '' : undefined}>
+                {line.map((token, k) =>
+                  token.type === 'plain' ? (
+                    <Fragment key={k}>{token.text}</Fragment>
+                  ) : (
+                    <span key={k} data-mk-token={token.type}>
+                      {token.text}
+                    </span>
+                  ),
+                )}
+              </span>
+            </Fragment>
+          ))}
+          {trailing ? '\n' : null}
+        </code>
+      </pre>
+      <span data-mk-code-status="" className="mk-sr-only" role="status" />
+    </div>
+  );
+}

package/src/components/color-area/README.md

@@ -0,0 +1,50 @@
+# color-area
+
+Área de saturación (horizontal) × brillo (vertical) en el tono actual. Al pulsar, el pulgar salta a ese punto (deslizamiento swing de 0,35 s) y luego sigue al puntero de cerca (0,1 s); al soltar se confirma el color. Al agarrarlo crece con la curva click y aparece encima una lupa con el color, como en `color-slider`; cerca del borde superior la lupa pasa debajo del pulgar (`data-mk-loupe-below`), para que un panel que recorta su contenido (el popover de `color-picker`) no la corte.
+
+Dos inputs range ocultos a la vista («Saturación» y «Brillo», `aria-roledescription="selector de color 2D"`) llevan el valor para el teclado y los lectores de pantalla, con un `aria-valuetext` que dice los dos («Saturación 64 %, brillo 80 %»).
+
+## HTML / Astro
+
+```html
+<mk-color-area class="mk-color-area" value="#ff8800"></mk-color-area>
+<mk-color-slider class="mk-color-slider" channel="hue" value="#ff8800"></mk-color-slider>
+```
+
+## React
+
+```tsx
+const [color, setColor] = useState('#ff8800');
+<ColorArea value={color} onInput={setColor} />
+<ColorSlider channel="hue" value={color} onInput={setColor} />
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `value` | `value` | `'hsl(0 100% 50%)'` | Color: hex, `rgb()`, `hsl()` o HSVA. El tono pinta el área. |
+| `label` | `label` | `'Color'` | Nombre accesible del grupo. |
+| `step` | `step` | `1` | Paso de saturación y brillo. |
+| `name` | `name` | — | Un input oculto envía el hex. |
+| `disabled` | `disabled` | `false` | Sin arrastre ni teclado. |
+| `onInput(hex, hsva)` | — | — | Cada movimiento. |
+| `onChange(hex, hsva)` | — | — | Al soltar y con cada tecla. |
+
+## Teclado
+
+| Tecla | Acción |
+|---|---|
+| ← / → | Saturación −/+ paso |
+| ↑ / ↓ | Brillo +/− paso |
+| Mayús + flecha | Paso × 10 |
+| RePág / AvPág | Brillo ± 10 |
+| Inicio / Fin | Saturación mínima / máxima |
+
+## API y eventos
+
+`setColor(color, notify = true)`, `value` (hex), `color` (HSVA), `destroy()`. Eventos `mk:input` y `mk:change` con `{ value, color }`.
+
+## Variables CSS
+
+`--mk-color-area-height` (11rem), `--mk-color-checker`. El motor escribe `--mk-color-area`, `--mk-color-thumb`, `--mk-color-x` y `--mk-color-y`. Las esquinas son de 12 px; deja aire alrededor para que el pulgar y la lupa no se corten. Con movimiento reducido no hay escalas ni deslizamientos y la lupa aparece sin animar mientras se arrastra.

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

@@ -0,0 +1,81 @@
+/* color-area — saturation (x) × brightness (y) at the current hue; 12 px corners; the thumb is a ringed circle that
+   grows when grabbed and pops a loupe. The thumb may stand half outside the square: leave room around it. */
+.mk-color-area,
+mk-color-area {
+  --mk-color-area-height: 11rem;
+  --mk-color-checker: repeating-conic-gradient(#d4d4d4 0 25%, #fff 0 50%) 0 0 / 10px 10px;
+  display: block;
+  position: relative;
+}
+
+:is(.mk-color-area, mk-color-area) [data-mk-color-area-surface] {
+  position: relative;
+  height: var(--mk-color-area-height);
+  border-radius: 12px;
+  background: var(--mk-color-area);
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
+  cursor: crosshair;
+  touch-action: none;
+}
+
+:is(.mk-color-area, mk-color-area) [data-mk-color-thumb] {
+  position: absolute;
+  left: calc(clamp(0, var(--mk-color-x, 0), 1) * 100%);
+  top: calc(clamp(0, var(--mk-color-y, 0), 1) * 100%);
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: -0.75rem 0 0 -0.75rem;
+  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.3);
+  pointer-events: none;
+}
+
+:is(.mk-color-area, mk-color-area):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.3);
+}
+
+:is(.mk-color-area, mk-color-area) [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%;
+}
+
+/* Near the top edge the loupe flips below the thumb, so a panel or card that clips its content never cuts it. */
+:is(.mk-color-area, mk-color-area)[data-mk-loupe-below] [data-mk-color-loupe] {
+  top: calc(100% + 10px);
+  bottom: auto;
+  transform-origin: 50% 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-color-area, mk-color-area)[data-mk-grabbing] [data-mk-color-loupe] {
+    opacity: 1;
+  }
+}
+
+:is(.mk-color-area, mk-color-area):has(input:disabled) [data-mk-color-area-surface] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* The two ranges stay readable to assistive tech but take no room (the per-component file does not need base.css). */
+:is(.mk-color-area, mk-color-area) [data-mk-color-input] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

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

@@ -0,0 +1,26 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createColorArea, type ColorAreaInstance } from './engine';
+
+/**
+ * <mk-color-area class="mk-color-area" value="#ff8800"></mk-color-area>
+ * Emits mk:input / mk:change ({value, color}). Changing `value` glides the thumb.
+ */
+export class MkColorAreaElement extends MkElement<ColorAreaInstance> {
+  static options: Record<string, OptionType> = { value: 'string', label: 'string', step: 'number', name: 'string', disabled: 'boolean' };
+
+  protected create(options: Record<string, unknown>) {
+    return createColorArea(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 defineColorArea = () => defineElement('mk-color-area', MkColorAreaElement);