@yewdiel21/motion-kit 0.9.1 → 0.14.0

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

@@ -0,0 +1,263 @@
+/* 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)
+   so long lines never run into a curved corner. */
+.mk-code-block,
+mk-code-block {
+  --mk-code-radius: var(--mk-radius-sm, 12px);
+  --mk-code-bg: #0e0f11;
+  --mk-code-bar: #16171a;
+  --mk-code-text: #e6e8ec;
+  --mk-code-muted: #8a909b;
+  --mk-code-line: rgb(255 255 255 / 0.035);
+  --mk-code-mark: rgb(196 165 255 / 0.1);
+  --mk-code-keyword: #c4a5ff;
+  --mk-code-string: #9fe0b0;
+  --mk-code-number: #ffb86b;
+  --mk-code-comment: #7d8390;
+  --mk-code-function: #82b4ff;
+  --mk-code-tag: #ff8f8f;
+  --mk-code-attr: #ffd479;
+  --mk-code-property: #8fd6ff;
+  --mk-code-punctuation: #9aa0aa;
+  --mk-code-operator: #c9ced6;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: var(--mk-code-radius);
+  background: var(--mk-code-bg);
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 0.06),
+    0 18px 40px -24px rgb(0 0 0 / 0.55);
+  color: var(--mk-code-text);
+  color-scheme: dark;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-header] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 3rem;
+  padding: 0.4rem 0.45rem 0.4rem 1rem;
+  background: var(--mk-code-bar);
+  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.05);
+  font-family: var(--mk-font);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-dots] {
+  display: inline-flex;
+  flex: none;
+  gap: 6px;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-dots] i {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.14);
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-title] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--mk-code-text);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-language] {
+  padding: 0.15rem 0.5rem;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 0.07);
+  color: var(--mk-code-muted);
+  font-family: var(--mk-font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  text-transform: lowercase;
+}
+
+:is(.mk-code-block, mk-code-block) pre {
+  margin: 0;
+  padding: 1rem 0;
+  overflow-x: auto;
+  font-family: var(--mk-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.875rem;
+  line-height: 1.7;
+  tab-size: 2;
+  scrollbar-color: rgb(255 255 255 / 0.2) transparent;
+}
+
+:is(.mk-code-block, mk-code-block) pre:focus-visible {
+  outline: 2px solid var(--mk-code-keyword);
+  outline-offset: -4px;
+  border-radius: calc(var(--mk-code-radius) - 4px);
+}
+
+:is(.mk-code-block, mk-code-block) code {
+  display: block;
+  min-width: max-content;
+  padding: 0 1.25rem;
+  font: inherit;
+  white-space: pre;
+}
+
+/* Highlighted code: block lines (the newlines between them are not rendered in a grid). */
+:is(.mk-code-block, mk-code-block) code:has([data-mk-code-line]) {
+  display: grid;
+  padding: 0;
+  counter-reset: mk-line;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-line] {
+  display: block;
+  translate: 0 var(--mk-line-y, 0);
+  min-height: 1.7em;
+  padding: 0 1.25rem;
+  transition: background-color 0.15s ease;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-line]:hover {
+  background: var(--mk-code-line);
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-line][data-mk-highlight] {
+  background: var(--mk-code-mark);
+  box-shadow: inset 2px 0 0 var(--mk-code-keyword);
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-line-numbers] [data-mk-code-line]::before {
+  counter-increment: mk-line;
+  content: counter(mk-line);
+  display: inline-block;
+  width: 2ch;
+  margin-right: 1.25rem;
+  color: var(--mk-code-muted);
+  opacity: 0.55;
+  text-align: right;
+  user-select: none;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-token='keyword'] { color: var(--mk-code-keyword); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='string'] { color: var(--mk-code-string); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='number'] { color: var(--mk-code-number); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='comment'] { color: var(--mk-code-comment); font-style: italic; }
+:is(.mk-code-block, mk-code-block) [data-mk-token='function'] { color: var(--mk-code-function); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='tag'] { color: var(--mk-code-tag); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='attr'] { color: var(--mk-code-attr); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='property'] { color: var(--mk-code-property); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='punctuation'] { color: var(--mk-code-punctuation); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='operator'] { color: var(--mk-code-operator); }
+
+/* The copy button: glass on the bar, or floating in the corner when authored outside it. */
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 2.25rem;
+  padding: 0 0.9rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-radius-xs, 8px);
+  background: rgb(255 255 255 / 0.08);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.08),
+    inset -1px -1px 1px rgb(255 255 255 / 0.04);
+  color: var(--mk-code-text);
+  font-family: var(--mk-font);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+:is(.mk-code-block, mk-code-block) > [data-mk-code-copy] {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.6rem;
+  z-index: 1;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy]:hover {
+  background: rgb(255 255 255 / 0.14);
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy]:focus-visible {
+  outline: 2px solid var(--mk-code-keyword);
+  outline-offset: 2px;
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-copied] [data-mk-code-copy] {
+  background: #e6e8ec;
+  color: #0e0f11;
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-copy-error] [data-mk-code-copy] {
+  background: rgb(255 120 120 / 0.18);
+  color: #ffb4b4;
+}
+
+/* The icon turns into a check (or a cross) with a blur. */
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy] svg {
+  flex: none;
+}
+
+:is(.mk-code-block, mk-code-block):is([data-mk-copied], [data-mk-copy-error]) [data-mk-code-copy] svg {
+  display: none;
+}
+
+:is(.mk-code-block, mk-code-block):is([data-mk-copied], [data-mk-copy-error]) [data-mk-code-copy]::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
+  animation: mk-code-check 0.4s cubic-bezier(0.1, 0.8, 0, 1.1);
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-copy-error] [data-mk-code-copy]::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
+}
+
+/* The button says what happened (the status says it to screen readers). */
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy-text][data-mk-feedback] {
+  font-size: 0;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy-text][data-mk-feedback]::after {
+  content: attr(data-mk-feedback);
+  font-size: 0.8125rem;
+}
+
+@keyframes mk-code-check {
+  from {
+    opacity: 0;
+    filter: blur(6px);
+    transform: scale(0.4) rotate(-20deg);
+  }
+}
+
+@media (max-width: 520px) {
+  :is(.mk-code-block, mk-code-block) [data-mk-code-dots] {
+    display: none;
+  }
+
+  :is(.mk-code-block, mk-code-block) pre {
+    font-size: 0.8125rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-code-block, mk-code-block) [data-mk-code-copy]::before {
+    animation: none !important;
+  }
+
+  :is(.mk-code-block, mk-code-block) [data-mk-code-line] {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,34 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createCodeBlock, type CodeBlockInstance } from './engine';
+
+/**
+ * <mk-code-block class="mk-code-block" title="Instalar" language="bash" line-numbers>
+ *   <pre><code>npm install @yewdiel21/motion-kit gsap</code></pre>
+ * </mk-code-block>
+ * Header, copy button and status are made when absent. Emits `mk:copy` ({ok, code}).
+ */
+export class MkCodeBlockElement extends MkElement<CodeBlockInstance> {
+  static options: Record<string, OptionType> = {
+    code: 'string',
+    language: 'string',
+    title: 'string',
+    lineNumbers: 'boolean',
+    copyLabel: 'string',
+    copiedLabel: 'string',
+    errorLabel: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createCodeBlock(this, options);
+  }
+
+  setCode(code: string) {
+    this.instance?.setCode(code);
+  }
+
+  copy() {
+    return this.instance?.copy() ?? Promise.resolve(false);
+  }
+}
+
+export const defineCodeBlock = () => defineElement('mk-code-block', MkCodeBlockElement);

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

@@ -0,0 +1,254 @@
+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 { press } from '../../motion/micro';
+import { languageFamily, renderCode } from './highlight';
+
+/*
+ * Code block: <pre><code> with optional title/language header, line numbers and
+ * a copy button. Code is always text (textContent), so markup-looking strings
+ * show as code. Copy writes the exact string with the Clipboard API and reports
+ * success or failure in a polite status; on failure the code is selected so it
+ * can be copied by hand. A copy that finishes after destroy changes nothing.
+ * Parts (made when absent): pre > code, [data-mk-code-copy], [data-mk-code-status].
+ */
+
+export interface CodeBlockOptions {
+  /** The code; omitted, the text already in <code> is used (and read at copy time). */
+  code?: string;
+  language?: string;
+  title?: string;
+  lineNumbers?: boolean;
+  /** Colour the syntax (default: when the language is supported). */
+  highlight?: boolean;
+  /** 1-based lines to mark. */
+  highlightLines?: number[];
+  copyLabel?: string;
+  copiedLabel?: string;
+  errorLabel?: string;
+  onCopy?: (ok: boolean) => void;
+}
+
+export interface CodeBlockInstance extends Instance {
+  setCode(code: string): void;
+  /** Copy the code; resolves true when the clipboard took it. */
+  copy(): Promise<boolean>;
+  readonly code: string;
+}
+
+const COPY_ICON =
+  '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2.5"/><path d="M5 15V6a2 2 0 0 1 2-2h8"/></svg>';
+const FEEDBACK_MS = 2000;
+
+/**
+ * New code flows in line by line: opacity, blur 12 and an 8 px drop through the
+ * --mk-line-y custom property (no measured transform, so the newline text nodes
+ * between lines never move). Capped at 40 lines so long files stay quick.
+ */
+export function flowLines(root: Element | null) {
+  if (!root || reduced()) return null;
+  registerMotion();
+  const lines = [...root.querySelectorAll('[data-mk-code-line]')].slice(0, 40);
+  if (!lines.length) return null;
+  return gsap.fromTo(
+    lines,
+    { opacity: 0, filter: 'blur(12px)', '--mk-line-y': '-8px' },
+    { opacity: 1, filter: 'blur(0px)', '--mk-line-y': '0px', duration: 0.4, ease: 'power2.out', stagger: 0.015, clearProps: 'opacity,filter,--mk-line-y' },
+  );
+}
+
+/** Line count of a code string (a final newline does not open a line). */
+export const codeLines = (code: string) => Math.max(1, code.replace(/\n$/, '').split('\n').length);
+
+export function createCodeBlock(root: HTMLElement | null, options: CodeBlockOptions = {}): CodeBlockInstance {
+  if (!root) return inert({ setCode() {}, copy: async () => false, code: '' });
+  registerMotion();
+  const scope = createScope();
+  const copyLabel = options.copyLabel ?? 'Copiar';
+  const copiedLabel = options.copiedLabel ?? 'Copiado';
+  const errorLabel = options.errorLabel ?? 'No se pudo copiar';
+  const made = <K extends keyof HTMLElementTagNameMap>(tag: K, place: (element: HTMLElementTagNameMap[K]) => void) => {
+    const element = document.createElement(tag);
+    place(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+
+  let pre = root.querySelector('pre');
+  if (!pre) pre = made('pre', (element) => root.append(element));
+  let code = pre.querySelector('code');
+  if (!code) code = made('code', (element) => pre!.append(element));
+  const authoredText = code.textContent ?? '';
+  let owned = false;
+  let text = authoredText;
+  /** From now on the engine writes the text (and puts the authored one back on destroy). */
+  const own = () => {
+    if (owned) return;
+    owned = true;
+    scope.add(() => (code!.textContent = authoredText));
+  };
+  if (options.code !== undefined) {
+    own();
+    text = options.code;
+  }
+
+  // The editor bar: three quiet dots, the file name, the language and the copy button.
+  let header = root.querySelector<HTMLElement>('[data-mk-code-header]');
+  if (!header) {
+    header = made('div', (element) => root.prepend(element));
+    header.dataset.mkCodeHeader = '';
+    const dots = document.createElement('span');
+    dots.dataset.mkCodeDots = '';
+    dots.setAttribute('aria-hidden', 'true');
+    dots.append(document.createElement('i'), document.createElement('i'), document.createElement('i'));
+    header.append(dots);
+    const name = document.createElement('span');
+    name.dataset.mkCodeTitle = '';
+    name.textContent = options.title ?? '';
+    header.append(name);
+    if (options.language) {
+      const language = document.createElement('span');
+      language.dataset.mkCodeLanguage = '';
+      language.textContent = options.language;
+      header.append(language);
+    }
+  }
+  if (!root.querySelector('[data-mk-code-copy]')) {
+    const button = made('button', (element) => (header ?? root).append(element));
+    button.type = 'button';
+    button.dataset.mkCodeCopy = '';
+    button.innerHTML = `${COPY_ICON}<span data-mk-code-copy-text>${copyLabel.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`)}</span>`;
+  }
+  for (const button of root.querySelectorAll<HTMLButtonElement>('button[data-mk-code-copy]')) if (!button.hasAttribute('type')) scope.attr(button, 'type', 'button');
+  let status = root.querySelector<HTMLElement>('[data-mk-code-status]');
+  if (!status) {
+    status = made('span', (element) => root.append(element));
+    status.dataset.mkCodeStatus = '';
+    status.className = 'mk-sr-only';
+    status.setAttribute('role', 'status');
+  } else if (!status.matches('output') && !status.hasAttribute('role')) scope.attr(status, 'role', 'status');
+  const statusText = status.textContent;
+  scope.add(() => (status!.textContent = statusText));
+
+  // Long lines scroll: the region takes keyboard focus so it can be scrolled.
+  if (!pre.hasAttribute('tabindex')) scope.attr(pre, 'tabindex', '0');
+  if (options.language) scope.attr(root, 'data-mk-language', options.language);
+  if (options.lineNumbers) scope.attr(root, 'data-mk-line-numbers', '');
+  scope.attr(root, 'data-mk-ready', '');
+
+  // A framework that already rendered the lines owns them; the engine only copies.
+  const prerendered = Boolean(code.querySelector('[data-mk-code-line]'));
+  /** Text given through setCode while a framework renders the lines. */
+  let given: string | null = null;
+  const highlight = !prerendered && (options.highlight ?? languageFamily(options.language) !== 'plain');
+  if (highlight) own();
+  const render = () => {
+    if (highlight) renderCode(code!, text, options.language, options.highlightLines);
+    else if (owned) code!.textContent = text;
+  };
+  render();
+  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();
+  });
+  /** The copy button springs to the width of its new label (Melonmind's playful curve). */
+  const resize = (change: () => void) => {
+    const buttons = [...root.querySelectorAll<HTMLElement>('[data-mk-code-copy]')];
+    const before = buttons.map((button) => button.getBoundingClientRect().width);
+    change();
+    if (reduced()) return;
+    buttons.forEach((button, i) => {
+      const after = button.getBoundingClientRect().width;
+      if (!before[i] || !after || Math.abs(after - before[i]!) < 1) return;
+      keep(gsap.fromTo(button, { width: before[i] }, { width: after, duration: 0.45, ease: EASE.playful, clearProps: 'width' }));
+    });
+  };
+
+  let attempt = 0;
+  const feedback = (ok: boolean) => {
+    // The button shows the outcome too (CSS reads data-mk-feedback) and springs to its width.
+    const labels = [...root.querySelectorAll<HTMLElement>('[data-mk-code-copy-text]')];
+    resize(() => {
+      scope.attr(root, 'data-mk-copied', ok ? '' : null);
+      scope.attr(root, 'data-mk-copy-error', ok ? null : '');
+      for (const label of labels) scope.attr(label, 'data-mk-feedback', ok ? copiedLabel : errorLabel);
+    });
+    for (const button of root.querySelectorAll('[data-mk-code-copy]')) keep(press(button));
+    status!.textContent = ok ? copiedLabel : errorLabel;
+    const mine = attempt;
+    scope.timeout(() => {
+      if (mine !== attempt) return;
+      resize(() => {
+        scope.attr(root, 'data-mk-copied', null);
+        scope.attr(root, 'data-mk-copy-error', null);
+        for (const label of labels) scope.attr(label, 'data-mk-feedback', null);
+      });
+    }, FEEDBACK_MS);
+  };
+  const selectCode = () => {
+    const selection = typeof getSelection === 'function' ? getSelection() : null;
+    if (!selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(code!);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+  const current = () => given ?? (owned ? text : ((code!.isConnected ? code : root.querySelector('code'))?.textContent ?? ''));
+
+  const copy = async () => {
+    if (scope.disposed) return false;
+    const mine = ++attempt;
+    const value = current();
+    let ok = false;
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error('clipboard unavailable');
+      await navigator.clipboard.writeText(value);
+      ok = true;
+    } catch {
+      ok = false;
+    }
+    // Destroyed (or a newer copy started) meanwhile: leave the DOM alone.
+    if (scope.disposed) return false;
+    if (mine !== attempt) return ok;
+    feedback(ok);
+    if (!ok) selectCode();
+    options.onCopy?.(ok);
+    root.dispatchEvent(new CustomEvent('mk:copy', { bubbles: true, detail: { ok, code: value } }));
+    return ok;
+  };
+
+  // Delegated: a framework may replace the button.
+  scope.on(root, 'click', (event) => {
+    const button = (event.target as Element | null)?.closest('[data-mk-code-copy]');
+    if (button && root.contains(button)) void copy();
+  });
+
+  return {
+    setCode(next) {
+      if (scope.disposed) return;
+      // Framework-rendered lines: only the text to copy changes.
+      if (prerendered) {
+        given = String(next);
+        return;
+      }
+      own();
+      const changed = text !== String(next);
+      text = String(next);
+      render();
+      if (changed && highlight) keep(flowLines(code));
+    },
+    copy,
+    get code() {
+      return current();
+    },
+    destroy: () => scope.dispose(),
+  };
+}