From 9e6f3a5c6cbea7219d5a707563fc4aa4983fba29 Mon Sep 17 00:00:00 2001 From: Renn F Date: Thu, 9 Jul 2026 07:03:51 +0200 Subject: [PATCH] docs(motion): reflow hard-wrapped prose + lock 0.20.0 The kit READMEs from #365 were hard-wrapped and failed the master quality gate's reflow-check (the gate runs on master pushes, not PRs). uv.lock picks up the 0.20.0 project version from the release bump. --- motion/README.md | 17 ++---------- motion/kit/README.md | 62 +++++++------------------------------------- 2 files changed, 12 insertions(+), 67 deletions(-) diff --git a/motion/README.md b/motion/README.md index d823366b..d24e225f 100644 --- a/motion/README.md +++ b/motion/README.md @@ -38,19 +38,6 @@ This composition is the library's reference point — match its restraint, don't ## Panel-demo kit (`kit/`) -`kit/` is a second register alongside the release-announcement's text-card -style: reusable `pk-`-namespaced CSS/HTML that recreates the control panel's -look (dark chrome, task cards, status pills, toasts, a typing reveal, a -cursor) so a composition can simulate the product actually being used, -instead of announcing it over a headline. Use the **text-card register** -(release-announcement's pattern) for version/feature announcements with no -product visuals; use the **demo register** (`kit/`) whenever the story is -"watch this happen in the app" — a task moving through the panel, a feature -being triggered, an agent doing something visible. +`kit/` is a second register alongside the release-announcement's text-card style: reusable `pk-`-namespaced CSS/HTML that recreates the control panel's look (dark chrome, task cards, status pills, toasts, a typing reveal, a cursor) so a composition can simulate the product actually being used, instead of announcing it over a headline. Use the **text-card register** (release-announcement's pattern) for version/feature announcements with no product visuals; use the **demo register** (`kit/`) whenever the story is "watch this happen in the app" — a task moving through the panel, a feature being triggered, an agent doing something visible. -`compositions/panel-demo/` is the reference composition: a task title types -into an intake field, a card materializes in a column, a cursor clicks it -done, a toast confirms, out on "roboco.tech". Start a new demo-register -composition from its structure and `kit.css`'s classes rather than -reinventing the panel's chrome per clip. See `kit/README.md` for the full -piece-by-piece reference. \ No newline at end of file +`compositions/panel-demo/` is the reference composition: a task title types into an intake field, a card materializes in a column, a cursor clicks it done, a toast confirms, out on "roboco.tech". Start a new demo-register composition from its structure and `kit.css`'s classes rather than reinventing the panel's chrome per clip. See `kit/README.md` for the full piece-by-piece reference. \ No newline at end of file diff --git a/motion/kit/README.md b/motion/kit/README.md index 9a4662a2..f50ebc10 100644 --- a/motion/kit/README.md +++ b/motion/kit/README.md @@ -1,11 +1,6 @@ # kit -Reusable plain-CSS/HTML building blocks that recreate the RoboCo control -panel's look, for compositions that want to simulate the product rather -than run a text card. Hand-rolled (no React, no Tailwind, no bundler) — this -is a recreation of the panel's design language, not a port of its -components. Load `kit.css` (and `kit.js` if you use the typing helper); no -composition-level `theme.css` is needed, kit.css owns the reset + fonts. +Reusable plain-CSS/HTML building blocks that recreate the RoboCo control panel's look, for compositions that want to simulate the product rather than run a text card. Hand-rolled (no React, no Tailwind, no bundler) — this is a recreation of the panel's design language, not a port of its components. Load `kit.css` (and `kit.js` if you use the typing helper); no composition-level `theme.css` is needed, kit.css owns the reset + fonts. ```html @@ -13,55 +8,18 @@ composition-level `theme.css` is needed, kit.css owns the reset + fonts. ``` -Every class is namespaced `pk-`. See `compositions/panel-demo/` for a full -worked example (task types in, a card appears, a cursor clicks it done, a -toast confirms it). +Every class is namespaced `pk-`. See `compositions/panel-demo/` for a full worked example (task types in, a card appears, a cursor clicks it done, a toast confirms it). ## Pieces -- **`pk-frame`** — the app chrome: a slim sidebar (`pk-frame__sidebar`, - `pk-frame__navitem[--active]`) and a top bar (`pk-frame__topbar`, - `pk-frame__search`, `pk-frame__status` for the pulsing "Live" dot) around - a `pk-frame__content` area. Fixed sidebar/topbar sizing works at both - 1080x1920 and 1080x1080 — only the content area's height changes. -- **`pk-column`** / **`pk-card`** — a kanban-ish list container - (`pk-column__header` + children) hosting task cards. A card is - `pk-card__title`, `pk-card__meta` (chips + `pk-card__assignee`), and - `pk-card__status` (a pill). -- **`pk-chip`** — a small team/priority tag: `Frontend`. Variants: `--purple`, `--blue`, - `--green`, `--orange`, `--pink`, `--gray`. -- **`pk-pill`** — a status pill: `in progress`. Variants: `--progress`, - `--review`, `--approved`, `--completed`. To swap one pill for another - (e.g. progress -> completed), stack two pills at the same spot inside a - `position: relative` `pk-card__status` and give the outgoing one - `pk-pill--swap-out` (fades in then out) and the incoming one - `pk-pill--swap-in` (fades in and stays), each with its own - `--pk-pill-enter-delay` / `--pk-pill-exit-delay` (composition-absolute - seconds — the same convention `data-start` uses). -- **`pk-toast`** — a notification card that slides in from a corner: - `pk-toast__icon` + `pk-toast__body` (`pk-toast__title`, - `pk-toast__text`). Position via `--pk-toast-bottom` (right-anchored). -- **`pk-type`** / **`pk-caret`** — character-by-character typing reveal. - Write the target element's final text directly in the HTML, then call - `window.PanelKit.typeText(el, { delay, stagger })` (from `kit.js`) once, - synchronously, before rendering starts — it splits the text into - `pk-type__char` spans with staggered `animation-delay`s (works with any - font, no per-character width math). `delay` is the composition-absolute - second the first character appears; `stagger` defaults to 0.045s/char. - Add a `` next to it for the blinking caret. -- **`pk-cursor`** — a small CSS-shape cursor (`pk-cursor__glyph`) that - glides along a straight path and pulses (`pk-cursor__ring`) on arrival. - Position via `--pk-cursor-x0/y0/x1/y1` (content-box-relative pixels) and - timing via `--pk-cursor-delay` (glide start) / `--pk-click-delay` (pulse - start), all composition-absolute seconds. +- **`pk-frame`** — the app chrome: a slim sidebar (`pk-frame__sidebar`, `pk-frame__navitem[--active]`) and a top bar (`pk-frame__topbar`, `pk-frame__search`, `pk-frame__status` for the pulsing "Live" dot) around a `pk-frame__content` area. Fixed sidebar/topbar sizing works at both 1080x1920 and 1080x1080 — only the content area's height changes. +- **`pk-column`** / **`pk-card`** — a kanban-ish list container (`pk-column__header` + children) hosting task cards. A card is `pk-card__title`, `pk-card__meta` (chips + `pk-card__assignee`), and `pk-card__status` (a pill). +- **`pk-chip`** — a small team/priority tag: `Frontend`. Variants: `--purple`, `--blue`, `--green`, `--orange`, `--pink`, `--gray`. +- **`pk-pill`** — a status pill: `in progress`. Variants: `--progress`, `--review`, `--approved`, `--completed`. To swap one pill for another (e.g. progress -> completed), stack two pills at the same spot inside a `position: relative` `pk-card__status` and give the outgoing one `pk-pill--swap-out` (fades in then out) and the incoming one `pk-pill--swap-in` (fades in and stays), each with its own `--pk-pill-enter-delay` / `--pk-pill-exit-delay` (composition-absolute seconds — the same convention `data-start` uses). +- **`pk-toast`** — a notification card that slides in from a corner: `pk-toast__icon` + `pk-toast__body` (`pk-toast__title`, `pk-toast__text`). Position via `--pk-toast-bottom` (right-anchored). +- **`pk-type`** / **`pk-caret`** — character-by-character typing reveal. Write the target element's final text directly in the HTML, then call `window.PanelKit.typeText(el, { delay, stagger })` (from `kit.js`) once, synchronously, before rendering starts — it splits the text into `pk-type__char` spans with staggered `animation-delay`s (works with any font, no per-character width math). `delay` is the composition-absolute second the first character appears; `stagger` defaults to 0.045s/char. Add a `` next to it for the blinking caret. +- **`pk-cursor`** — a small CSS-shape cursor (`pk-cursor__glyph`) that glides along a straight path and pulses (`pk-cursor__ring`) on arrival. Position via `--pk-cursor-x0/y0/x1/y1` (content-box-relative pixels) and timing via `--pk-cursor-delay` (glide start) / `--pk-click-delay` (pulse start), all composition-absolute seconds. ## Offline constraints (same as every composition) -No CDN, no npm runtime deps, no bundler — plain files only, loaded via -relative paths (`../../kit/...` from a composition two levels down). Fonts -are the vendored `motion/public/fonts/*.woff2`, loaded via `@font-face` in -`kit.css`. Motion is CSS keyframes timed with `animation-delay` (seconds -from frame 0 — no `requestAnimationFrame`, no `Date.now()`), so a render is -frame-deterministic. +No CDN, no npm runtime deps, no bundler — plain files only, loaded via relative paths (`../../kit/...` from a composition two levels down). Fonts are the vendored `motion/public/fonts/*.woff2`, loaded via `@font-face` in `kit.css`. Motion is CSS keyframes timed with `animation-delay` (seconds from frame 0 — no `requestAnimationFrame`, no `Date.now()`), so a render is frame-deterministic.