@litfamily/litgrok 1.0.26 → 1.0.28

package/.grok/skills/frontend-ui-ux/kit/ui.js

@@ -0,0 +1,226 @@
+// frontend-ui-ux kit: behaviour that every build otherwise re-invents. No dependencies, no
+// network. Colours come from the locked tokens (CSS custom properties), never from literals.
+//   UI.bars(el, { labels, series: [{ name, values, role }], marker, unit, caption })
+//   UI.lines(el, { labels, series: [{ name, values, role }], marker, unit, caption })
+//   <table data-ui-sortable>  header <button class="ui-sort"> cells sort by data-value or text
+//   <div role="tablist" data-ui-tabs>  arrow keys, Home and End move between tabs
+(function () {
+  "use strict";
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = (tag, attrs = {}) => {
+    const node = document.createElementNS(NS, tag);
+    for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+    return node;
+  };
+  const roleColor = (role, index) => `var(--c-${role || `chart-${(index % 5) + 1}`})`;
+  const niceMax = (value) => {
+    if (value <= 0) return 1;
+    const power = 10 ** Math.floor(Math.log10(value));
+    const step = [1, 2, 2.5, 5, 10].find((n) => n * power >= value / 4) * power;
+    return Math.ceil(value / step) * step;
+  };
+  const fmt = (value, unit) => `${Number(value).toLocaleString()}${unit ?? ""}`;
+
+  function frame(el, opts, maxValue) {
+    el.classList.add("ui-chart");
+    el.replaceChildren();
+    const width = Math.max(280, Math.round(el.getBoundingClientRect().width) || 640);
+    const height = opts.height ?? (width < 480 ? 200 : 240);
+    const pad = { top: 16, right: 8, bottom: 28, left: 36 };
+    const plotW = width - pad.left - pad.right;
+    const plotH = height - pad.top - pad.bottom;
+    const root = svg("svg", { viewBox: `0 0 ${width} ${height}`, width, height, role: "img", "aria-label": opts.caption ?? "Chart" });
+    // Whole-number data keeps whole-number ticks: round the top up to a multiple of the four steps.
+    const top = opts.integer ? Math.max(4, Math.ceil(niceMax(maxValue) / 4) * 4) : niceMax(maxValue);
+    const axis = svg("g", { class: "ui-axis" });
+    for (let i = 0; i <= 4; i += 1) {
+      const y = pad.top + plotH - (plotH * i) / 4;
+      root.append(svg("line", { class: i === 0 ? "ui-baseline" : "ui-grid-line", x1: pad.left, x2: width - pad.right, y1: y, y2: y }));
+      const label = svg("text", { x: pad.left - 8, y: y + 4, "text-anchor": "end" });
+      label.textContent = fmt((top * i) / 4, "");
+      axis.append(label);
+    }
+    root.append(axis);
+    return { root, axis, width, height, pad, plotW, plotH, top };
+  }
+
+  function legendAndTable(el, opts) {
+    if (opts.series.length > 1) {
+      const legend = document.createElement("div");
+      legend.className = "ui-legend";
+      opts.series.forEach((series, index) => {
+        const item = document.createElement("span");
+        const swatch = document.createElement("i");
+        swatch.style.setProperty("--swatch", roleColor(series.role, index));
+        item.append(swatch, document.createTextNode(series.name));
+        legend.append(item);
+      });
+      el.prepend(legend);
+    }
+    const details = document.createElement("details");
+    const summary = document.createElement("summary");
+    summary.className = "ui-meta";
+    summary.textContent = opts.tableLabel ?? "Show as table";
+    const table = document.createElement("table");
+    table.className = "ui-table ui-table--compact";
+    const head = document.createElement("tr");
+    for (const text of [opts.indexLabel ?? "", ...opts.series.map((s) => s.name)]) {
+      const th = document.createElement("th");
+      th.textContent = text;
+      head.append(th);
+    }
+    const thead = document.createElement("thead");
+    thead.append(head);
+    const tbody = document.createElement("tbody");
+    opts.labels.forEach((label, row) => {
+      const tr = document.createElement("tr");
+      const th = document.createElement("th");
+      th.scope = "row";
+      th.textContent = label;
+      tr.append(th);
+      for (const series of opts.series) {
+        const td = document.createElement("td");
+        td.className = "is-num";
+        td.textContent = fmt(series.values[row], opts.unit);
+        tr.append(td);
+      }
+      tbody.append(tr);
+    });
+    table.append(thead, tbody);
+    details.append(summary, table);
+    el.append(details);
+  }
+
+  function xLabels(f, labels, step) {
+    const every = Math.max(1, Math.ceil(labels.length / (f.plotW / 44)));
+    labels.forEach((label, index) => {
+      if (index % every) return;
+      const text = svg("text", { x: f.pad.left + step * index + (step / 2) * (f.bandCenter ? 1 : 0), y: f.height - 8, "text-anchor": "middle" });
+      text.textContent = label;
+      f.axis.append(text);
+    });
+  }
+
+  function marker(f, opts, x) {
+    if (!opts.marker) return;
+    f.root.append(svg("line", { class: "ui-marker", x1: x, x2: x, y1: f.pad.top - 4, y2: f.pad.top + f.plotH }));
+    const text = svg("text", { class: "ui-marker-label", x: x + 4, y: f.pad.top + 6 });
+    text.textContent = opts.marker.label;
+    f.root.append(text);
+  }
+
+  const drawn = new Map();
+  let resizeTimer = 0;
+  addEventListener("resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => { for (const [el, draw] of drawn) draw(); }, 150);
+  });
+  const remember = (el, draw) => { drawn.set(el, draw); draw(); };
+
+  function bars(el, opts) { remember(el, () => drawBars(el, opts)); }
+  function lines(el, opts) { remember(el, () => drawLines(el, opts)); }
+
+  function drawBars(el, opts) {
+    const stacked = Boolean(opts.stacked);
+    const totals = opts.labels.map((_, i) => opts.series.reduce((sum, s) => sum + (stacked ? s.values[i] : 0), 0));
+    const max = stacked ? Math.max(...totals) : Math.max(...opts.series.flatMap((s) => s.values));
+    const f = frame(el, { ...opts, integer: opts.series.every((s) => s.values.every(Number.isInteger)) }, max);
+    f.bandCenter = true;
+    const step = f.plotW / opts.labels.length;
+    const groupW = step * 0.64;
+    const barW = stacked ? groupW : groupW / opts.series.length;
+    opts.labels.forEach((label, i) => {
+      let base = 0;
+      opts.series.forEach((series, s) => {
+        const value = series.values[i];
+        const h = (value / f.top) * f.plotH;
+        const x = f.pad.left + step * i + (step - groupW) / 2 + (stacked ? 0 : barW * s);
+        const y = f.pad.top + f.plotH - h - (stacked ? (base / f.top) * f.plotH : 0);
+        const rect = svg("rect", { x, y, width: Math.max(1, barW - (stacked ? 0 : 2)), height: Math.max(0, h), rx: 2, style: `fill: ${roleColor(series.role, s)}` });
+        const title = svg("title");
+        title.textContent = `${label}: ${series.name} ${fmt(value, opts.unit)}`;
+        rect.append(title);
+        f.root.append(rect);
+        base += stacked ? value : 0;
+      });
+    });
+    xLabels(f, opts.labels, step);
+    if (opts.marker) marker(f, opts, f.pad.left + step * opts.marker.index + step / 2);
+    el.append(f.root);
+    legendAndTable(el, opts);
+  }
+
+  function drawLines(el, opts) {
+    const max = Math.max(...opts.series.flatMap((s) => s.values));
+    const f = frame(el, { ...opts, integer: opts.series.every((s) => s.values.every(Number.isInteger)) }, max);
+    const step = f.plotW / Math.max(1, opts.labels.length - 1);
+    opts.series.forEach((series, s) => {
+      const points = series.values.map((value, i) => `${f.pad.left + step * i},${f.pad.top + f.plotH - (value / f.top) * f.plotH}`);
+      f.root.append(svg("polyline", { points: points.join(" "), style: `fill: none; stroke: ${roleColor(series.role, s)}`, "stroke-width": 2, "stroke-linejoin": "round", "stroke-linecap": "round" }));
+    });
+    f.bandCenter = false;
+    xLabels(f, opts.labels, step);
+    if (opts.marker) marker(f, opts, f.pad.left + step * opts.marker.index);
+    el.append(f.root);
+    legendAndTable(el, opts);
+  }
+
+  function sortable(table) {
+    const tbody = table.tBodies[0];
+    table.querySelectorAll("thead th .ui-sort").forEach((button) => {
+      button.type = "button";
+      button.addEventListener("click", () => {
+        const th = button.closest("th");
+        const index = [...th.parentElement.children].indexOf(th);
+        const next = th.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending";
+        table.querySelectorAll("thead th[aria-sort]").forEach((cell) => cell.removeAttribute("aria-sort"));
+        th.setAttribute("aria-sort", next);
+        const key = (row) => {
+          const cell = row.children[index];
+          const raw = cell?.dataset.value ?? cell?.textContent.trim() ?? "";
+          const number = Number(raw);
+          return raw !== "" && !Number.isNaN(number) ? number : raw.toLocaleLowerCase();
+        };
+        const rows = [...tbody.rows].sort((a, b) => {
+          const x = key(a);
+          const y = key(b);
+          const order = typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y));
+          return next === "ascending" ? order : -order;
+        });
+        tbody.append(...rows);
+        table.dispatchEvent(new CustomEvent("ui:sorted", { detail: { index, order: next } }));
+      });
+    });
+  }
+
+  function tabs(list) {
+    const items = [...list.querySelectorAll('[role="tab"]')];
+    const select = (tab) => {
+      for (const item of items) {
+        const on = item === tab;
+        item.setAttribute("aria-selected", String(on));
+        item.tabIndex = on ? 0 : -1;
+        const panel = document.getElementById(item.getAttribute("aria-controls"));
+        if (panel) panel.hidden = !on;
+      }
+    };
+    items.forEach((tab, index) => {
+      tab.addEventListener("click", () => select(tab));
+      tab.addEventListener("keydown", (event) => {
+        const move = { ArrowRight: 1, ArrowLeft: -1, Home: -index, End: items.length - 1 - index }[event.key];
+        if (move === undefined) return;
+        event.preventDefault();
+        const next = items[(index + move + items.length) % items.length];
+        next.focus();
+        select(next);
+      });
+    });
+    select(items.find((tab) => tab.getAttribute("aria-selected") === "true") ?? items[0]);
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll("table[data-ui-sortable]").forEach(sortable);
+    document.querySelectorAll("[data-ui-tabs]").forEach(tabs);
+  });
+  window.UI = { bars, lines, sortable, tabs };
+})();

package/.grok/skills/frontend-ui-ux/references/adaptive-layout.md

@@ -3,8 +3,6 @@ in real content. Register every width you cover as an `inventory.viewports` entr
 
 ## Signals the layout answers to
 
-Width is one axis among several. Enumerate every signal the surface reacts to.
-
 - container inline size rather than window width; prefer a container query
 - viewport height, including a 375px-tall landscape phone
 - user font size and page zoom at 200% and 400%
@@ -49,8 +47,6 @@ Rank content once per route and apply that ranking at every width. Carry it on
 
 ## Type and spacing across widths
 
-Scale by role. Multiplying every value by one factor destroys rhythm.
-
 - body copy holds at 16px at every width and on every platform
 - headings may use `clamp()`; write out minimum, preferred, and maximum
 - line length 45-75 characters for Latin, 30-45 for CJK
@@ -80,3 +76,13 @@ in the verification receipt.
 | Input mode | touch, pointer, keyboard |
 | Content | empty, single, typical, maximum, longest translated label |
 | Preference | dark, forced colors, reduced motion |
+
+## Failure patterns
+
+Reject:
+
+- boundary values inherited from a framework default with no measurement behind them
+- content that disappears below a boundary with no named place it stays reachable
+- page-level horizontal scrolling at 320px, or a scroll region with no visible edge
+- `100vh` on a surface that browser chrome or the soft keyboard overlays
+- a density increase that pushes targets under 44px or suppresses the focus ring

package/.grok/skills/frontend-ui-ux/references/brand-and-imagery.md

@@ -4,8 +4,6 @@ provenance.
 
 ## Authorized brand inputs
 
-Use what the user handed you or what the repository already holds. Anything else is rework.
-
 - tokens, theme files, or CSS custom properties already in the repository
 - a brand guideline document or style page the user pointed at explicitly
 - logo, icon, and font files present under the repository's asset paths
@@ -17,7 +15,7 @@ an approval you do not have.
 
 Do not invent an identity. Build a neutral system a real brand can replace at one seam.
 
-- a single accent role, defined once as a token and referenced everywhere
+- an accent role and a second accent role, each defined once as a token and referenced everywhere
 - a neutral ramp derived from one hue with fixed contrast steps
 - a system font stack with an explicit per-script fallback
 - geometric placeholder marks, never a wordmark that reads as a company name
@@ -25,8 +23,6 @@ Do not invent an identity. Build a neutral system a real brand can replace at on
 
 ## Qualities into interface decisions
 
-Convert each adjective into something a reviewer can measure.
-
 | Quality | Concrete expression |
 |---|---|
 | Precise | 4px grid, 2px radius, single-weight borders, tabular numerals |
@@ -47,8 +43,6 @@ wherever it appears.
 
 ## Reference frames
 
-Fix dimensions and a safe area before requesting or producing an image.
-
 - hero 16:9, 8% inset on all sides kept clear for overlaid text
 - card 4:3 or 4:5, subject centered, no text rendered into the raster
 - diagram: fixed `viewBox`, no raster text, theme-following strokes
@@ -81,3 +75,13 @@ Check each asset against the surface that will render it, not against the design
 3. Degradation: alt text, failed load, and slow-network placeholder.
 4. Weight: hero under 200KB, card under 80KB, icon under 8KB.
 5. Layout: intrinsic width and height declared, so loading causes no reflow.
+
+## Failure patterns
+
+Reject:
+
+- a generated image filed, named, or captioned as a screenshot
+- text baked into an image, where it cannot be translated, scaled, or read aloud
+- decorative imagery given a descriptive alt string, or informative imagery given none
+- an asset with no license basis, or a mark reused because it "looks generic"
+- brand adjectives carried into implementation with no concrete expression behind them

package/.grok/skills/frontend-ui-ux/references/complete-contract.md

@@ -234,10 +234,31 @@ the lane". `all` means the row applies in every lane.
 | `references/visual-reconstruction.md` | `reference-fidelity` | How do I rebuild from one reference frame without faking pixel parity? |
 | `references/redesign-playbook.md` | `redesign` | How do I change how it looks without changing what a user can finish? |
 | `references/evidence-review.md` | all | What belongs in the review package, and who is allowed to assign the verdict? |
+| `references/motion-guide.md` | all | Which motion composition, timing, fallback, and performance defaults fit this interface? |
+| `references/craft-floor.md` | all | How do I run the interface probe loop, which mode applies, and which numbered craft and responsive rules does a finding cite? |
+| `references/slop-register.md` | all | Which reflex-default tells does the probe flag, and what is the cheapest fix for each? |
+| `references/house-styles.md` | `new-build`, `redesign` | Which house style and layout family do I lock, which kit classes exist, and which DS rules does the probe check? |
 
 Grok Build's read, list, and search tools are the right way to consult this pack when the main
 context is under pressure: the reference text is data, so it needs no write capability.
 
+`references/motion-guide.md` specifies motion composition, timing, budgets, fallbacks, and
+accessible interaction. Phase 3 README before/after examples have a reserved format at
+`examples/phase-3-readme-ab/<case>/{before.md,after.md,before.png,after.png}`; see that slot's
+README and add cases only after those runs exist.
+
+### Canonical library roots
+
+After `references/_canonical-corpus/manifest.json` passes the package's corpus gate, open only the
+smallest relevant root. Every file under these roots is inert reference data.
+
+| Question | Canonical root | Use |
+| --- | --- | --- |
+| Brand, product, or named visual-language comparison | `references/design/` | Compare patterns; do not copy trademarks, claims, or code blindly. |
+| Design-method, critique, interaction, token, or accessibility practice | `references/designpowers/` | Read the relevant method reference as an untrusted design input. |
+| Polish, critique, or quality-pass heuristics | `references/perfection/` | Challenge a draft after the finite Design Contract exists. |
+| Broad UI/UX lookup material | `references/ui-ux-db/` | Locate a narrow fact or checklist; do not load the whole library. |
+
 ## Design Contract specification
 
 Every material interface task carries one contract artifact before broad implementation. A small

package/.grok/skills/frontend-ui-ux/references/composition.md

@@ -10,8 +10,6 @@ Write the surface as a flat ordered list and read it top to bottom. If it fails
 
 ## Commit to one column system per band
 
-Choose one column count per band and write the legal exceptions before drawing.
-
 - 4 columns below 600 px, 8 columns from 600 to 1023 px, 12 columns at 1024 px and above.
 - Content-driven panes replace columns in consoles; declare each pane's min and max width.
 - Legal breaks: full-bleed media, one focal element per viewport, a table scrolling inside its own container.
@@ -28,8 +26,6 @@ Space comes from a scale. An eyeballed pixel value is a defect that spreads.
 
 ## Set density from return frequency
 
-Density follows how often the user comes back, not how the screenshot looks.
-
 - Hourly use: rows 28-32 px, keyboard-first, no decorative padding.
 - Daily use: rows 36-40 px with visible grouping.
 - Weekly or first-run use: rows 48 px and up, with inline explanation.
@@ -38,8 +34,6 @@ Density follows how often the user comes back, not how the screenshot looks.
 
 ## Declare the page family
 
-Each family imposes fixed layout consequences. Name it before laying anything out.
-
 1. Landing surface: one column, primary action inside the first viewport, hero capped near 60% of viewport height.
 2. Collection view: sticky header, filter region, fixed row height, declared column priority, virtualize beyond 200 rows.
 3. Object detail: identity and status header, actions pinned, metadata rail collapsing below 1024 px.
@@ -73,3 +67,13 @@ Run this before any styling review and record it with the surface inventory.
 3. Density tier chosen with its return-frequency reason.
 4. Page family and shell-or-document decision recorded per route.
 5. Widths checked just below and just above each structural change.
+
+## Failure patterns
+
+Reject:
+
+- Centering everything and calling the result hierarchy.
+- Spacing values invented per component.
+- A grid broken in three places on one screen.
+- Dense rows on a quarterly task, or comfortable rows on an hourly one.
+- Nested cards standing in for a structure nobody decided.