@dumiflex/wp-kit 0.3.0 → 0.4.0

package/src/diff.ts

@@ -1,51 +1,51 @@
-/**
- * A small word or line diff for DiffView: the longest common subsequence of
- * the two token lists, then the runs that are the same, added or removed.
- * Inputs past `limit` tokens on either side fall back to "all removed, all
- * added", which keeps the table (n × m) small.
- */
-export type DiffPart = { kind: "same" | "add" | "del"; text: string };
-
-/** Words with the spaces after them, so joining the parts gives the text back. */
-export function tokenize(text: string, by: "words" | "lines"): string[] {
-  if (!text) return [];
-  return by === "lines" ? text.split(/(?<=\n)/) : text.match(/\s+|[^\s]+/g) ?? [];
-}
-
-export function diffTokens(a: string[], b: string[], limit = 2000): DiffPart[] {
-  if (a.length > limit || b.length > limit) {
-    return merge([...a.map((t) => ({ kind: "del" as const, text: t })), ...b.map((t) => ({ kind: "add" as const, text: t }))]);
-  }
-  const n = a.length; const m = b.length;
-  const lcs: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
-  for (let i = n - 1; i >= 0; i--) {
-    for (let j = m - 1; j >= 0; j--) {
-      lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
-    }
-  }
-  const out: DiffPart[] = [];
-  let i = 0; let j = 0;
-  while (i < n && j < m) {
-    if (a[i] === b[j]) { out.push({ kind: "same", text: a[i] }); i++; j++; }
-    else if (lcs[i + 1][j] >= lcs[i][j + 1]) { out.push({ kind: "del", text: a[i] }); i++; }
-    else { out.push({ kind: "add", text: b[j] }); j++; }
-  }
-  while (i < n) out.push({ kind: "del", text: a[i++] });
-  while (j < m) out.push({ kind: "add", text: b[j++] });
-  return merge(out);
-}
-
-/** Join neighbours of one kind into one part. */
-function merge(parts: DiffPart[]): DiffPart[] {
-  const out: DiffPart[] = [];
-  for (const p of parts) {
-    const last = out[out.length - 1];
-    if (last && last.kind === p.kind) last.text += p.text;
-    else out.push({ ...p });
-  }
-  return out;
-}
-
-export function diffText(before: string, after: string, by: "words" | "lines" = "words"): DiffPart[] {
-  return diffTokens(tokenize(before, by), tokenize(after, by));
-}
+/**
+ * A small word or line diff for DiffView: the longest common subsequence of
+ * the two token lists, then the runs that are the same, added or removed.
+ * Inputs past `limit` tokens on either side fall back to "all removed, all
+ * added", which keeps the table (n × m) small.
+ */
+export type DiffPart = { kind: "same" | "add" | "del"; text: string };
+
+/** Words with the spaces after them, so joining the parts gives the text back. */
+export function tokenize(text: string, by: "words" | "lines"): string[] {
+  if (!text) return [];
+  return by === "lines" ? text.split(/(?<=\n)/) : text.match(/\s+|[^\s]+/g) ?? [];
+}
+
+export function diffTokens(a: string[], b: string[], limit = 2000): DiffPart[] {
+  if (a.length > limit || b.length > limit) {
+    return merge([...a.map((t) => ({ kind: "del" as const, text: t })), ...b.map((t) => ({ kind: "add" as const, text: t }))]);
+  }
+  const n = a.length; const m = b.length;
+  const lcs: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+    }
+  }
+  const out: DiffPart[] = [];
+  let i = 0; let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) { out.push({ kind: "same", text: a[i] }); i++; j++; }
+    else if (lcs[i + 1][j] >= lcs[i][j + 1]) { out.push({ kind: "del", text: a[i] }); i++; }
+    else { out.push({ kind: "add", text: b[j] }); j++; }
+  }
+  while (i < n) out.push({ kind: "del", text: a[i++] });
+  while (j < m) out.push({ kind: "add", text: b[j++] });
+  return merge(out);
+}
+
+/** Join neighbours of one kind into one part. */
+function merge(parts: DiffPart[]): DiffPart[] {
+  const out: DiffPart[] = [];
+  for (const p of parts) {
+    const last = out[out.length - 1];
+    if (last && last.kind === p.kind) last.text += p.text;
+    else out.push({ ...p });
+  }
+  return out;
+}
+
+export function diffText(before: string, after: string, by: "words" | "lines" = "words"): DiffPart[] {
+  return diffTokens(tokenize(before, by), tokenize(after, by));
+}

package/src/drop-zone.ts

@@ -1,41 +1,41 @@
-/**
- * File checks for DropZone: does a file (or a dragged item, whose name is
- * not known until the drop) match an `accept` list like the file input's
- * ("image/*,.txt,application/json")?
- */
-export function acceptList(accept: string | undefined): string[] {
-  return (accept ?? "").split(",").map((a) => a.trim().toLowerCase()).filter(Boolean);
-}
-
-function typeMatches(type: string, rule: string): boolean {
-  if (!type) return false;
-  const t = type.toLowerCase();
-  return rule.endsWith("/*") ? t.startsWith(rule.slice(0, -1)) : t === rule;
-}
-
-/** A dropped file: by its extension or its type. An empty list takes all. */
-export function fileAccepted(file: { name: string; type: string }, accept: string | undefined): boolean {
-  const rules = acceptList(accept);
-  if (!rules.length) return true;
-  const name = file.name.toLowerCase();
-  return rules.some((r) => (r.startsWith(".") ? name.endsWith(r) : typeMatches(file.type, r)));
-}
-
-/**
- * A dragged item, before the drop: only its type is known. Returns false
- * only when it surely won't be taken; an item with no type, or a list that
- * names extensions (which we can't see yet), gets the benefit of the doubt.
- */
-export function dragItemMaybeAccepted(type: string, accept: string | undefined): boolean {
-  const rules = acceptList(accept);
-  if (!rules.length || !type) return true;
-  if (rules.some((r) => r.startsWith("."))) return true;
-  return rules.some((r) => typeMatches(type, r));
-}
-
-/** "2.4 MB", "820 KB". */
-export function formatBytes(n: number): string {
-  if (n >= 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(n >= 10 * 1024 * 1024 ? 0 : 1)} MB`;
-  if (n >= 1024) return `${Math.round(n / 1024)} KB`;
-  return `${n} B`;
-}
+/**
+ * File checks for DropZone: does a file (or a dragged item, whose name is
+ * not known until the drop) match an `accept` list like the file input's
+ * ("image/*,.txt,application/json")?
+ */
+export function acceptList(accept: string | undefined): string[] {
+  return (accept ?? "").split(",").map((a) => a.trim().toLowerCase()).filter(Boolean);
+}
+
+function typeMatches(type: string, rule: string): boolean {
+  if (!type) return false;
+  const t = type.toLowerCase();
+  return rule.endsWith("/*") ? t.startsWith(rule.slice(0, -1)) : t === rule;
+}
+
+/** A dropped file: by its extension or its type. An empty list takes all. */
+export function fileAccepted(file: { name: string; type: string }, accept: string | undefined): boolean {
+  const rules = acceptList(accept);
+  if (!rules.length) return true;
+  const name = file.name.toLowerCase();
+  return rules.some((r) => (r.startsWith(".") ? name.endsWith(r) : typeMatches(file.type, r)));
+}
+
+/**
+ * A dragged item, before the drop: only its type is known. Returns false
+ * only when it surely won't be taken; an item with no type, or a list that
+ * names extensions (which we can't see yet), gets the benefit of the doubt.
+ */
+export function dragItemMaybeAccepted(type: string, accept: string | undefined): boolean {
+  const rules = acceptList(accept);
+  if (!rules.length || !type) return true;
+  if (rules.some((r) => r.startsWith("."))) return true;
+  return rules.some((r) => typeMatches(type, r));
+}
+
+/** "2.4 MB", "820 KB". */
+export function formatBytes(n: number): string {
+  if (n >= 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(n >= 10 * 1024 * 1024 ? 0 : 1)} MB`;
+  if (n >= 1024) return `${Math.round(n / 1024)} KB`;
+  return `${n} B`;
+}

package/src/field.css

@@ -0,0 +1,50 @@
+/* Field box: the one look of every text-like field in the kit (Input,
+ * Textarea and Select draw the same box from theme/tokens.css' `.wp-input`;
+ * SearchInput, WpNumber, Combobox, TagInput, ColorField and WpSelect pull this
+ * sheet in scoped). It reads only the SHARED_TOKENS names, so a field wears
+ * the manager colours on a page and the canvas colours in a node.
+ *
+ *   <div class="wp-field-box wp-field-box--sm" …>
+ *
+ * Heights follow the control scale (sm 24 / md 32 / lg 40) as a min-height,
+ * so a field that wraps (Combobox, TagInput chips) can grow; a single-line
+ * field sets `height: var(--wp-field-h)` itself. A piece keeps its own
+ * layout (display, padding, gap) and font family (WpNumber and ColorField
+ * are mono); the box sets everything you see around it.
+ *
+ * States: hover (stronger border), focus-within (accent border + focus
+ * ring), invalid (`.is-invalid`, `[data-invalid]` or `aria-invalid`),
+ * disabled (`.is-disabled`, `[data-disabled]` or `:disabled`: 45%).
+ */
+
+.wp-field-box {
+  --wp-field-h: var(--wp-control-h-md);
+  box-sizing: border-box;
+  min-height: var(--wp-field-h);
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  font-size: 12.5px;
+  transition: border-color var(--wp-motion-quick), box-shadow var(--wp-motion-quick), background var(--wp-motion-quick);
+}
+.wp-field-box--sm { --wp-field-h: var(--wp-control-h-sm); font-size: 12px; }
+.wp-field-box--lg { --wp-field-h: var(--wp-control-h-lg); font-size: 13.5px; }
+
+.wp-field-box:hover { border-color: var(--wp-border-strong); }
+.wp-field-box:focus-within,
+.wp-field-box:focus-visible {
+  outline: none;
+  border-color: var(--wp-accent-500);
+  box-shadow: var(--wp-focus-ring);
+  background: var(--wp-bg-1);
+}
+.wp-field-box.is-invalid,
+.wp-field-box[data-invalid],
+.wp-field-box[aria-invalid="true"] { border-color: var(--wp-error-border); }
+.wp-field-box.is-disabled,
+.wp-field-box[data-disabled],
+.wp-field-box:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-field-box.is-disabled:hover,
+.wp-field-box[data-disabled]:hover,
+.wp-field-box:disabled:hover { border-color: var(--wp-border); }