@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/core/files.ts

@@ -0,0 +1,107 @@
+import { toTime, type TimeInput } from './relative-time';
+
+/*
+ * Files (file-explorer), the pure part: what is a folder, the family an
+ * extension belongs to (its colour), sizes in KB and MB, a free name in a
+ * folder ("Nueva carpeta (2)") and the order of a folder's content (folders
+ * first, then by name, size or date; numbers in names in their natural order).
+ */
+
+export interface FileEntry {
+  id: string;
+  name: string;
+  /** 'folder' or 'file'; without it, an entry with children is a folder. */
+  kind?: 'folder' | 'file';
+  children?: FileEntry[];
+  /** Bytes. */
+  size?: number;
+  modified?: TimeInput;
+}
+
+export type FileFamily = 'folder' | 'image' | 'pdf' | 'doc' | 'sheet' | 'slides' | 'code' | 'archive' | 'media' | 'other';
+export type FileSort = 'name' | 'size' | 'modified';
+
+export const isFolder = (entry: FileEntry) => (entry.kind ? entry.kind === 'folder' : Array.isArray(entry.children));
+
+/** "pdf" for "Informe.PDF"; '' without one (".gitignore" has none). */
+export function extensionOf(name: string): string {
+  const dot = name.lastIndexOf('.');
+  return dot > 0 && dot < name.length - 1 ? name.slice(dot + 1).toLowerCase() : '';
+}
+
+const FAMILIES: Record<Exclude<FileFamily, 'folder' | 'other'>, string[]> = {
+  image: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'heic', 'bmp', 'ico', 'fig', 'psd', 'ai', 'sketch'],
+  pdf: ['pdf'],
+  doc: ['doc', 'docx', 'txt', 'md', 'rtf', 'odt', 'pages'],
+  sheet: ['xls', 'xlsx', 'csv', 'numbers', 'ods'],
+  slides: ['ppt', 'pptx', 'key', 'odp'],
+  code: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'jsx', 'json', 'css', 'scss', 'html', 'astro', 'vue', 'svelte', 'py', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'php', 'sh', 'sql', 'xml', 'yml', 'yaml', 'toml'],
+  archive: ['zip', 'rar', '7z', 'tar', 'gz', 'tgz', 'bz2'],
+  media: ['mp3', 'wav', 'ogg', 'flac', 'm4a', 'mp4', 'mov', 'avi', 'mkv', 'webm'],
+};
+
+export function fileFamily(entry: FileEntry): FileFamily {
+  if (isFolder(entry)) return 'folder';
+  const extension = extensionOf(entry.name);
+  for (const [family, extensions] of Object.entries(FAMILIES)) if (extensions.includes(extension)) return family as FileFamily;
+  return 'other';
+}
+
+/** "820 B", "12 KB", "3,4 MB" (in the given language). */
+export function formatSize(bytes: number, locale = 'es'): string {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let value = Math.max(0, bytes);
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  let format: Intl.NumberFormat;
+  try {
+    format = new Intl.NumberFormat(locale, { maximumFractionDigits: unit && value < 10 ? 1 : 0 });
+  } catch {
+    format = new Intl.NumberFormat(undefined, { maximumFractionDigits: unit && value < 10 ? 1 : 0 });
+  }
+  return `${format.format(value)} ${units[unit]}`;
+}
+
+const same = (a: string, b: string) => a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0;
+
+/** Does a sibling (other than `except`) already have this name? Case does not count ("foto" is "Foto"); accents do. */
+export const nameTaken = (name: string, siblings: FileEntry[], except?: string) => siblings.some((sibling) => sibling.id !== except && same(sibling.name, name));
+
+/** `name`, or "name (2)", "name (3)"… (before the extension for files) when a sibling has it; `except` is the entry being renamed. */
+export function uniqueName(name: string, siblings: FileEntry[], except?: string): string {
+  if (!nameTaken(name, siblings, except)) return name;
+  const extension = extensionOf(name);
+  const base = extension ? name.slice(0, -extension.length - 1) : name;
+  for (let n = 2; ; n++) {
+    const candidate = extension ? `${base} (${n}).${extension}` : `${base} (${n})`;
+    if (!nameTaken(candidate, siblings, except)) return candidate;
+  }
+}
+
+/** Folders first; then by `key` (names in natural order: "Foto 2" before "Foto 10"). */
+export function sortEntries(entries: FileEntry[], key: FileSort = 'name', direction: 1 | -1 = 1, locale = 'es'): FileEntry[] {
+  let collator: Intl.Collator;
+  try {
+    collator = new Intl.Collator(locale, { numeric: true, sensitivity: 'base' });
+  } catch {
+    collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+  }
+  const time = (entry: FileEntry) => toTime(entry.modified)?.getTime() ?? 0;
+  return [...entries].sort((a, b) => {
+    const folderA = isFolder(a);
+    if (folderA !== isFolder(b)) return folderA ? -1 : 1;
+    let diff = 0;
+    // Folders have no size of their own: by name, as file managers do.
+    if (key === 'size' && !folderA) diff = (a.size ?? 0) - (b.size ?? 0);
+    else if (key === 'modified') diff = time(a) - time(b);
+    if (!diff) diff = collator.compare(a.name, b.name);
+    return diff * direction;
+  });
+}
+
+/** A deep copy of entries (dates and other values are kept as they are). */
+export const cloneEntries = (entries: FileEntry[]): FileEntry[] =>
+  entries.map((entry) => (entry.children ? { ...entry, children: cloneEntries(entry.children) } : { ...entry }));

package/src/core/filter.ts

@@ -0,0 +1,229 @@
+import { toDate } from './dates';
+
+/*
+ * Filters (filter-builder, data-table): groups of conditions combined with
+ * AND / OR, nested. Each field has a type; each type its operators, with
+ * Spanish labels and how many values they take. matchesFilter() tests a
+ * record (text ignores case and accents; dates compare whole days; incomplete
+ * conditions do not filter); describeFilter() writes the filter as a sentence
+ * ("Estado es Activo y (Monto mayor que 100 o País es México)").
+ */
+
+export type FilterFieldType = 'text' | 'number' | 'date' | 'select' | 'boolean';
+
+export interface FilterField {
+  key: string;
+  label: string;
+  type?: FilterFieldType;
+  /** 'select' fields: the values to choose from. */
+  options?: Array<{ value: string; label: string }>;
+}
+
+export type FilterValue = string | number | null | [string | number | null, string | number | null];
+
+export interface FilterRule {
+  id: string;
+  field: string;
+  operator: string;
+  value?: FilterValue;
+}
+
+export interface FilterGroup {
+  id: string;
+  combinator: 'and' | 'or';
+  rules: FilterNode[];
+}
+
+export type FilterNode = FilterRule | FilterGroup;
+
+export interface OperatorDef {
+  id: string;
+  label: string;
+  /** How many values it takes. */
+  arity: 0 | 1 | 2;
+}
+
+export const OPERATORS: Record<FilterFieldType, OperatorDef[]> = {
+  text: [
+    { id: 'contains', label: 'contiene', arity: 1 },
+    { id: 'not_contains', label: 'no contiene', arity: 1 },
+    { id: 'equals', label: 'es', arity: 1 },
+    { id: 'not_equals', label: 'no es', arity: 1 },
+    { id: 'starts', label: 'empieza por', arity: 1 },
+    { id: 'ends', label: 'termina en', arity: 1 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  number: [
+    { id: 'eq', label: 'igual a', arity: 1 },
+    { id: 'neq', label: 'distinto de', arity: 1 },
+    { id: 'gt', label: 'mayor que', arity: 1 },
+    { id: 'gte', label: 'mayor o igual que', arity: 1 },
+    { id: 'lt', label: 'menor que', arity: 1 },
+    { id: 'lte', label: 'menor o igual que', arity: 1 },
+    { id: 'between', label: 'entre', arity: 2 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  date: [
+    { id: 'on', label: 'es el', arity: 1 },
+    { id: 'before', label: 'antes del', arity: 1 },
+    { id: 'after', label: 'después del', arity: 1 },
+    { id: 'between', label: 'entre', arity: 2 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  select: [
+    { id: 'is', label: 'es', arity: 1 },
+    { id: 'is_not', label: 'no es', arity: 1 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  boolean: [
+    { id: 'true', label: 'es sí', arity: 0 },
+    { id: 'false', label: 'es no', arity: 0 },
+  ],
+};
+
+let sequence = 0;
+export const filterId = () => `f${(++sequence).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+
+export const isGroup = (node: FilterNode): node is FilterGroup => 'rules' in node && Array.isArray((node as FilterGroup).rules);
+
+export const emptyFilter = (combinator: 'and' | 'or' = 'and'): FilterGroup => ({ id: filterId(), combinator, rules: [] });
+
+export const typeOf = (field: FilterField | undefined): FilterFieldType => field?.type ?? 'text';
+
+export const operatorsFor = (field: FilterField | undefined) => OPERATORS[typeOf(field)];
+
+export const operatorOf = (field: FilterField | undefined, id: string) => operatorsFor(field).find((operator) => operator.id === id) ?? operatorsFor(field)[0]!;
+
+/** A new condition on `field`: its type's first operator, no value yet. */
+export function newRule(field: FilterField): FilterRule {
+  const operator = operatorsFor(field)[0]!;
+  return { id: filterId(), field: field.key, operator: operator.id, value: operator.arity === 2 ? [null, null] : null };
+}
+
+const blank = (value: unknown) => value === null || value === undefined || (typeof value === 'string' && value.trim() === '');
+
+/** The condition has every value its operator needs. */
+export function isComplete(rule: FilterRule, fields: FilterField[]): boolean {
+  const field = fields.find((candidate) => candidate.key === rule.field);
+  if (!field) return false;
+  const { arity } = operatorOf(field, rule.operator);
+  if (arity === 0) return true;
+  if (arity === 1) return !blank(rule.value);
+  return Array.isArray(rule.value) && !blank(rule.value[0]) && !blank(rule.value[1]);
+}
+
+const fold = (value: unknown) => String(value ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();
+const day = (value: unknown) => {
+  if (blank(value)) return null;
+  const date = toDate(value as string, new Date(Number.NaN));
+  return Number.isNaN(date.getTime()) ? null : date.getTime();
+};
+
+function testRule(record: Record<string, unknown>, rule: FilterRule, field: FilterField): boolean {
+  const raw = record[field.key];
+  const type = typeOf(field);
+  const { id } = operatorOf(field, rule.operator);
+  if (id === 'empty') return blank(raw);
+  if (id === 'not_empty') return !blank(raw);
+  const [a, b] = Array.isArray(rule.value) ? rule.value : [rule.value, null];
+  switch (type) {
+    case 'number': {
+      const n = Number(raw);
+      const x = Number(a);
+      const y = Number(b);
+      if (blank(raw) || Number.isNaN(n)) return false;
+      if (id === 'eq') return n === x;
+      if (id === 'neq') return n !== x;
+      if (id === 'gt') return n > x;
+      if (id === 'gte') return n >= x;
+      if (id === 'lt') return n < x;
+      if (id === 'lte') return n <= x;
+      return n >= Math.min(x, y) && n <= Math.max(x, y);
+    }
+    case 'date': {
+      const n = day(raw);
+      const x = day(a);
+      const y = day(b);
+      if (n === null || x === null) return false;
+      if (id === 'on') return n === x;
+      if (id === 'before') return n < x;
+      if (id === 'after') return n > x;
+      return y !== null && n >= Math.min(x, y) && n <= Math.max(x, y);
+    }
+    case 'boolean':
+      return id === 'true' ? Boolean(raw) : !raw;
+    case 'select':
+      return id === 'is' ? String(raw) === String(a) : String(raw) !== String(a);
+    default: {
+      const text = fold(raw);
+      const needle = fold(a);
+      if (id === 'contains') return text.includes(needle);
+      if (id === 'not_contains') return !text.includes(needle);
+      if (id === 'equals') return text === needle;
+      if (id === 'not_equals') return text !== needle;
+      if (id === 'starts') return text.startsWith(needle);
+      return text.endsWith(needle);
+    }
+  }
+}
+
+/** Whether `record` passes `filter`; incomplete conditions (and empty groups) do not filter. */
+export function matchesFilter(record: Record<string, unknown>, filter: FilterGroup, fields: FilterField[]): boolean {
+  const results: boolean[] = [];
+  for (const node of filter.rules) {
+    if (isGroup(node)) {
+      if (!hasConditions(node, fields)) continue;
+      results.push(matchesFilter(record, node, fields));
+      continue;
+    }
+    const field = fields.find((candidate) => candidate.key === node.field);
+    if (!field || !isComplete(node, fields)) continue;
+    results.push(testRule(record, node, field));
+  }
+  if (!results.length) return true;
+  return filter.combinator === 'and' ? results.every(Boolean) : results.some(Boolean);
+}
+
+/** The group holds at least one complete condition (at any depth). */
+export function hasConditions(filter: FilterGroup, fields: FilterField[]): boolean {
+  return filter.rules.some((node) => (isGroup(node) ? hasConditions(node, fields) : isComplete(node, fields)));
+}
+
+const shown = (field: FilterField, value: unknown) => {
+  if (blank(value)) return '…';
+  if (typeOf(field) === 'select') return field.options?.find((option) => option.value === String(value))?.label ?? String(value);
+  if (typeOf(field) === 'date') {
+    const date = toDate(value as string, new Date(Number.NaN));
+    if (!Number.isNaN(date.getTime())) return new Intl.DateTimeFormat('es', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);
+  }
+  return String(value);
+};
+
+/** The filter as a sentence; incomplete conditions are left out. Empty: ''. */
+export function describeFilter(filter: FilterGroup, fields: FilterField[], nested = false): string {
+  const joiner = filter.combinator === 'and' ? ' y ' : ' o ';
+  const parts: string[] = [];
+  for (const node of filter.rules) {
+    if (isGroup(node)) {
+      const inner = describeFilter(node, fields, true);
+      if (inner) parts.push(inner);
+      continue;
+    }
+    const field = fields.find((candidate) => candidate.key === node.field);
+    if (!field || !isComplete(node, fields)) continue;
+    const operator = operatorOf(field, node.operator);
+    const [a, b] = Array.isArray(node.value) ? node.value : [node.value, null];
+    const values = operator.arity === 0 ? '' : operator.arity === 1 ? ` ${shown(field, a)}` : ` ${shown(field, a)} y ${shown(field, b)}`;
+    parts.push(`${field.label} ${operator.label}${values}`);
+  }
+  if (!parts.length) return '';
+  const text = parts.join(joiner);
+  return nested && parts.length > 1 ? `(${text})` : text;
+}
+
+/** A deep copy (callbacks get their own). */
+export const cloneFilter = (filter: FilterGroup): FilterGroup => JSON.parse(JSON.stringify(filter)) as FilterGroup;

package/src/core/gsap.ts

@@ -1,65 +1,80 @@
-import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { SplitText } from 'gsap/SplitText';
-import { CustomEase } from 'gsap/CustomEase';
-import { Flip } from 'gsap/Flip';
-import { PATHS, springPath } from './curves';
-
-/** elastic overshoot; close to the `--mk-ease-elastic` CSS curve. */
-export const ELASTIC = 'elastic.out(1, 0.45)';
-
-/** Custom eases registered by `registerMotion()`. Use the names as GSAP `ease` values. */
-export const EASE = {
-  signature: 'mk-signature',
-  flow: 'mk-flow',
-  /** A closing surface's fade (`.56,.27,0,1`). Kept from v0.1; same curve as `fadeAway`. */
-  close: 'mk-close',
-  fadeAway: 'mk-fade-away',
-  /** A closing surface's blur (`.37,.35,0,1`). */
-  blurAway: 'mk-blur-away',
-  chatScroll: 'mk-chat-scroll',
-  /** Items travelling to a new place in a list (spring ratio .52). */
-  layoutReflow: 'mk-layout-reflow',
-  /** A dragged item landing in its slot (spring ratio .62). */
-  sortableLand: 'mk-sortable-land',
-  slot: 'mk-slot',
-  slotResize: 'mk-slot-resize',
-  liquidSize: 'mk-liquid-size',
-  swatch: 'mk-swatch',
-  swatchLight: 'mk-swatch-light',
-  sheet: 'mk-sheet',
-  inOut: 'mk-in-out',
-} as const;
-
-const CURVES: Record<keyof typeof EASE, string> = {
-  signature: PATHS.signature,
-  flow: PATHS.flow,
-  close: '.56,.27,0,1',
-  fadeAway: '.56,.27,0,1',
-  blurAway: '.37,.35,0,1',
-  chatScroll: PATHS.chatScroll,
-  layoutReflow: springPath(0.52),
-  sortableLand: springPath(0.62),
-  slot: '.34,1.56,.64,1',
-  slotResize: '.2,0,0,1',
-  liquidSize: '.8,.3,.5,.8',
-  swatch: '.38,.49,0,1.5',
-  swatchLight: '.11,1,0,1',
-  sheet: '.16,1,.3,1',
-  inOut: '.42,0,.58,1',
-};
-
-let registered = false;
-
-/** Register plugins and eases once. Safe to call from every recipe and during SSR (no-op). */
-export function registerMotion() {
-  if (typeof window === 'undefined') return;
-  // Cancels the MK_HEAD_SCRIPT safety net: JS owns the entrance states from here on.
-  document.documentElement.classList.add('mk-ready');
-  if (registered) return;
-  registered = true;
-  gsap.registerPlugin(ScrollTrigger, SplitText, CustomEase, Flip);
-  for (const key of Object.keys(EASE) as Array<keyof typeof EASE>) CustomEase.create(EASE[key], CURVES[key]);
-}
-
-export { gsap, ScrollTrigger, SplitText, CustomEase, Flip };
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { SplitText } from 'gsap/SplitText';
+import { CustomEase } from 'gsap/CustomEase';
+import { Flip } from 'gsap/Flip';
+import { PATHS, springPath } from './curves';
+
+/** elastic overshoot; close to the `--mk-ease-elastic` CSS curve. */
+export const ELASTIC = 'elastic.out(1, 0.45)';
+
+/** Custom eases registered by `registerMotion()`. Use the names as GSAP `ease` values. */
+export const EASE = {
+  signature: 'mk-signature',
+  flow: 'mk-flow',
+  /** A closing surface's fade (`.56,.27,0,1`). Kept from v0.1; same curve as `fadeAway`. */
+  close: 'mk-close',
+  fadeAway: 'mk-fade-away',
+  /** A closing surface's blur (`.37,.35,0,1`). */
+  blurAway: 'mk-blur-away',
+  chatScroll: 'mk-chat-scroll',
+  /** Items travelling to a new place in a list (spring ratio .52). */
+  layoutReflow: 'mk-layout-reflow',
+  /** A dragged item landing in its slot (spring ratio .62). */
+  sortableLand: 'mk-sortable-land',
+  slot: 'mk-slot',
+  slotResize: 'mk-slot-resize',
+  liquidSize: 'mk-liquid-size',
+  swatch: 'mk-swatch',
+  swatchLight: 'mk-swatch-light',
+  sheet: 'mk-sheet',
+  inOut: 'mk-in-out',
+  /** Melonmind's button press (`buttonClickAnimation`, .37,1.42,.37,1). */
+  click: 'mk-click',
+  /** Melonmind's playful padding/radius morph (.38,.49,0,2). */
+  playful: 'mk-playful',
+  /** Melonmind's surface entrance (`animation-general-in-2`, .1,.8,0,1.1). */
+  pop: 'mk-pop',
+  /** Melonmind's entry wipe (.38,.49,0,1). */
+  wipe: 'mk-wipe',
+  /** Melonmind's error shake (.6,.6,.12,1.26). */
+  shake: 'mk-shake',
+} as const;
+
+const CURVES: Record<keyof typeof EASE, string> = {
+  signature: PATHS.signature,
+  flow: PATHS.flow,
+  close: '.56,.27,0,1',
+  fadeAway: '.56,.27,0,1',
+  blurAway: '.37,.35,0,1',
+  chatScroll: PATHS.chatScroll,
+  layoutReflow: springPath(0.52),
+  sortableLand: springPath(0.62),
+  slot: '.34,1.56,.64,1',
+  slotResize: '.2,0,0,1',
+  liquidSize: '.8,.3,.5,.8',
+  swatch: '.38,.49,0,1.5',
+  swatchLight: '.11,1,0,1',
+  sheet: '.16,1,.3,1',
+  inOut: '.42,0,.58,1',
+  click: '.37,1.42,.37,1',
+  playful: '.38,.49,0,2',
+  pop: '.1,.8,0,1.1',
+  wipe: '.38,.49,0,1',
+  shake: '.6,.6,.12,1.26',
+};
+
+let registered = false;
+
+/** Register plugins and eases once. Safe to call from every recipe and during SSR (no-op). */
+export function registerMotion() {
+  if (typeof window === 'undefined') return;
+  // Cancels the MK_HEAD_SCRIPT safety net: JS owns the entrance states from here on.
+  document.documentElement.classList.add('mk-ready');
+  if (registered) return;
+  registered = true;
+  gsap.registerPlugin(ScrollTrigger, SplitText, CustomEase, Flip);
+  for (const key of Object.keys(EASE) as Array<keyof typeof EASE>) CustomEase.create(EASE[key], CURVES[key]);
+}
+
+export { gsap, ScrollTrigger, SplitText, CustomEase, Flip };