@keenmate/web-components-devkit 1.0.0-rc04 → 1.0.0-rc05

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [1.0.0-rc05] - 2026-11-01 [PUBLISHED]
+
+### Changed
+
+- **`.event-log` is now the same panel as `.log-panel--dark`** — the legacy console differed
+  in small ways (grey base text, 0.8rem, 200px cap, no columns), so old and new logs looked
+  slightly different. It now renders exactly as `.log-panel--dark` (light base text,
+  0.85rem, `--log-max-height`, default 220px), and an `.event-entry` holding `.event-time`
+  / `.event-name` is a timeline row: aligned time column, the detail wrapping in its own
+  column, tones via `.log-line--*`. Other `.event-log` markup (lines without
+  `.event-entry`, page-own classes) just gets the panel look.
+
+### Added
+
+- **Log lines: one tone set, timeline columns, text logs, empty placeholder** —
+  web-components-core's pages each coloured their log lines (four schemes mixing severity
+  with "what happened"). A `.log-line` now takes one of the pill tones — `--ok`, `--info`,
+  `--warn`, `--err`, `--muted` — and `--action` marks a "you clicked X" line. On
+  `.log-panel--dark` and `.event-log` the tones switch to fixed light tints
+  (`--kmwc-console-ok|info|warn|err-color`), so they stay readable on the console in both
+  themes. Every line in a log keeps its line breaks and indentation. The cells
+  `.log-line__seq`, `__time`, `__source`, `__name` turn a line into aligned columns, with
+  the detail wrapping in its own column. `<pre class="log-panel">` is a log fed by
+  `textContent`; `data-empty` is shown while a panel is empty.
+- **`.pill--info` / `--muted` and `.status-dot--info` / `--muted`**, so pills, dots and log
+  lines share the same five tones.
+- **`.mono`** (monospace text without the code chip; `textarea.mono` for a JSON editor),
+  **`td.is-highlight`** (one highlighted cell) and **`.check-list`** (checkbox / radio
+  options one per line, a long label wrapping beside its box).
+- Playground: WG01 and WG03 show the tones, new WG05 (timeline), WG06 (text log, empty
+  placeholder), WG07 (`.mono`), FC11 (check list), TB06 (highlighted cell); e2e specs.
+
 ## [1.0.0-rc04] - 2026-11-01 [PUBLISHED]
 
 ### Fixed

package/README.md

@@ -19,21 +19,19 @@ them in the same shape: `@keenmate/web-components-devkit`.
 > positioning) lives in [`@keenmate/web-components-core`](../web-components-core).
 > Nothing here ships inside a component's bundle.
 
+## What's New in v1.0.0-rc05
+
+- **Log panels — one tone set for every log line** — web-components-core's example pages each coloured their log lines with their own classes (`.warn`, `.lv-error`, `data-kind="hook"` …), four schemes mixing severity with "what happened". A `.log-line` now takes one of five tones — `--ok`, `--info`, `--warn`, `--err`, `--muted`, the same names as `.pill` and `.status-dot` (which gain `--info` / `--muted`) — and `--action` marks a "▶ you clicked X" line. Kinds such as hook or callback map onto those tones; the kind itself goes in a cell as text. On `.log-panel--dark` the tones switch to fixed light tints (`--kmwc-console-ok|info|warn|err-color`), so they stay readable on the console in both themes, while a light `.log-panel` follows the page theme. Every line keeps its line breaks and indentation.
+- **Log panels — timeline columns, text logs and an empty placeholder** — The cells `.log-line__seq`, `__time`, `__source` and `__name` turn a line into aligned columns, with the detail after them wrapping in its own column; the name takes the line's tone. A log fed by `textContent` is a `<pre class="log-panel">`, `data-empty="(nothing yet)"` shows while a panel is empty, and `--log-max-height: none` lets a log grow. This replaces the page-local timeline CSS core's Lifecycle and Interaction pages carried.
+- **`.event-log` — the legacy console now renders as `.log-panel--dark`** — Many component pages (web-grid, web-dropzone, web-treeview, the showcases) still use `.event-log` / `.event-entry` / `.event-time` / `.event-name`, which differed slightly from the newer panel (grey base text, 0.8rem, a 200px cap, no columns). It is now the same panel, and an `.event-entry` holding `.event-time` / `.event-name` is a timeline row with an aligned time column and tones, so old and new logs look the same. Other `.event-log` markup — lines without `.event-entry`, page-own classes — only gets the panel look, so existing layouts don't break.
+- **Small helpers — `.mono`, `td.is-highlight`, `.check-list`** — `.mono` sets the monospace font without the code chip, and `textarea.mono` makes a JSON or config editor. `td.is-highlight` (or `th`) tints one table cell, where only whole rows could be highlighted before. `.check-list` stacks checkbox / radio options one per line, a long label wrapping beside its box, with room for a trailing `.pill`. The playground shows everything on the Widgets (WG01–WG07), Form controls (FC11) and Tables (TB06) pages.
+
 ## What's New in v1.0.0-rc04
 
 - **Example-page grids — wide content scrolls instead of widening the page** — A `<pre>` or table inside a `.grid`, `.grid-2` or `.card-grid` item still pushed the page wider than a phone: grid items default to `min-width: auto` (their min-content), so the single `1fr` column at ≤ 768 px grew to fit the content instead of letting it scroll. Every item of the three grids now gets `min-width: 0`, the same rule pure-css puts on its `.pc-col-*` columns. Found by two agents migrating web-components-core's example pages, which drop their page-local workaround with this release.
 - **`.controls` — long `<code>` in a button wraps on a phone** — rc03 wrapped `<code>` only inside `.controls` labels, so a button whose label was an unbroken API name (`setAttribute("…")`) still overflowed the row. The wrap rule (`overflow-wrap: anywhere`) now covers any `<code>` in a `.controls` row, and a `.controls` button is capped at the row width. An e2e spec injects both cases at 390 px and checks that the page stays inside the screen.
 - **Playground — a Widgets page for the kit's opt-in helpers** — `.log-panel` (light and `--dark`), the legacy `.event-log`, `.pill` / `.status-dot` tones, `.display-sliders` and `.css-readout` had no demo, so their look was only checked on component pages. The new `examples-widgets.html` (WG01–WG04) shows them as they are today, including the gaps the coming log-tone work fixes (no line tones, leading spaces collapsing in a log line), and gets its own e2e spec.
 
-## What's New in v1.0.0-rc03
-
-- **Spotlight — Ctrl/⌘+K chapter search across every example page** — Example sites grew to dozens of chapters over several pages, and the per-page chapter nav only knew its own page. The Vite plugin now builds an index of every page's `<h2>`s (`virtual:kmwc-chapters`), coded and uncoded, and Ctrl/⌘+K opens a search that matches the section code or the heading text (`th7` finds `TH07`), grouped by page with the current one first. Enter jumps, Ctrl/⌘+Enter opens a new tab. It mirrors web-commandpalette's markup, matching, keyboard map and CSS without depending on it; `npm run check:spotlight-mirror` lists what changed there since the last alignment. Turn it off with `kmwc.examples.isSpotlightEnabled: false`.
-- **Form controls — one look for native inputs on every example page** — Pages styled their own selects and inputs, or got the browser default, so a select next to the kit's buttons came out shorter and in the platform's style (a `.controls` row was the only place the kit reached). Text fields, selects and list boxes, textareas, checkboxes, radios, `role="switch"` switches, ranges, colour and file inputs are now styled with no class, modelled on pure-admin's forms. Inputs, selects and buttons share `--kmwc-control-height`, so a mixed row lines up in any container. Focus, placeholder, disabled tone, checkbox size and the tick read the `--base-*` contract. The rules are zero-specificity, and `kmwc-native` opts an element out.
-- **Tables — every table styled, `.reference-table` plus modifiers** — Only `.reference-table` had a look; a bare table was unstyled and pages wrote their own table CSS with fixed light colours that break in dark mode. Any `<table>` now gets a header fill, row lines and a hover tint, and modifiers combine: `.table-full`, `.table-bordered`, `.table-striped`, and `.table-compact`, whose inputs and buttons shrink with the rows. Add `tr.is-highlight` and `.num` (tabular figures). Every wide table scrolls inside its card on a phone.
-- **Scaffold — component CSS no longer restyles the host page** — The `*, *::before, *::after { box-sizing: inherit }` reset in the `kmwc new` and `--minimal` templates also reached the page through the component's light-DOM stylesheet, in a layer that beats `@layer kmwc`, so page controls rendered content-box (a 36 px input came out 38 px). It is scoped to `:host *` now, and a unit test rejects any universal or bare-element selector in scaffold CSS. Components scaffolded on rc01/rc02 should make the same one-line change in `src/css/base.css`.
-- **Example pages — short chapter links, phones and the example-pages suite** — `#th07`, `#th7` or an uncoded heading's slug now scroll to that chapter on arrival. On a phone, example pages no longer grow wider than the screen, which made mobile browsers report a wrong viewport to pages that demo breakpoints. `kmwc doctor` runs the rulebook's new `example-pages` suite: every example `<h2>` carries a permanent section code.
-- **`make dev` at the devkit root** — the standard `dev` / `kill-port` / `build-examples` / `preview-examples` targets, run against the playground.
-
 ## Catalogue
 
 <!-- kmwc:catalogue:start — generated by `npm run readme`, do not edit inside -->
@@ -285,9 +283,15 @@ doctor` lists the ones still repeating the head/header boilerplate.
   (tighter cells; the controls in it shrink via `--kmwc-control-height`) — plus
   `tr.is-highlight` and a `.num` cell (right-aligned, tabular figures). On a phone
   a wide table scrolls inside its card. See the playground's `examples-tables.html`.
-- **Widgets** (`.log-panel` / `--dark`, `.event-log`, `.pill`, `.status-dot`,
-  `.display-sliders`, `.css-readout`) are shown in the playground's
-  `examples-widgets.html`.
+- **Widgets:** `.log-panel` (light, following the theme; `--dark` for a console
+  stream; the legacy `.event-log` / `.event-entry` markup renders the same). Lines keep their indentation; a
+  `.log-line` takes one tone — `--ok`, `--info`, `--warn`, `--err`, `--muted`,
+  the same five as `.pill` / `.status-dot` — and `--action` marks a "you clicked
+  X" line. Timeline cells (`.log-line__seq`, `__time`, `__source`, `__name`)
+  turn a line into aligned columns. A `<pre class="log-panel">` is a text-fed
+  log; `data-empty` shows while a panel is empty. Also `.mono`, `.check-list`
+  (options one per line), `td.is-highlight`, `.display-sliders` and
+  `.css-readout`. The playground's `examples-widgets.html` shows them all.
 - **Theme switch** (top right) cycles light → dark → auto and sets
   `data-theme` on `<html>` — the same signal components react to via
   `:host-context([data-theme])`, so every example page is a dark-mode smoke

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-components-devkit",
-  "version": "1.0.0-rc04",
+  "version": "1.0.0-rc05",
   "description": "Shared dev, example-site and build infrastructure for Keenmate web components: Vite preset, examples kit (chapter nav, copy-link, controls store, shared styles), Playwright preset and the `kmwc` CLI (sync, doctor, check-vars, new, readme).",
   "type": "module",
   "license": "MIT",

package/src/examples/css/content.css

@@ -214,6 +214,16 @@
         color: var(--kmwc-text-color-3);
     }
 
+    /* Monospace text that isn't code (folded values, code-unit dumps); on a
+       textarea, a JSON / config editor. */
+    .mono {
+        font-family: var(--kmwc-mono-font-family);
+    }
+
+    textarea.mono {
+        font-size: 0.8125rem;
+    }
+
     .mt-1 {
         margin-top: 1rem;
     }

package/src/examples/css/controls.css

@@ -86,6 +86,34 @@
         margin-bottom: 0.75rem;
     }
 
+    /* Check list — checkbox / radio options one per line; a long label wraps
+       beside its box, and anything after the text (a .pill) follows it. */
+    .check-list {
+        display: grid;
+        gap: 0.35rem;
+        margin-bottom: 1rem;
+    }
+
+    .check-list > label {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.5rem;
+        cursor: pointer;
+    }
+
+    .check-list > label > input {
+        flex: none;
+        margin-top: calc((1lh - var(--kmwc-checkbox-size)) / 2);
+    }
+
+    .check-list > label > :not(input) {
+        min-width: 0;
+    }
+
+    .check-list code {
+        overflow-wrap: anywhere;
+    }
+
     /* Control group — a label stacked over an input/select; rows of them wrap
        via `.control-row`. */
     .control-row {

package/src/examples/css/tables.css

@@ -9,7 +9,7 @@
      .table-striped    zebra rows
      .table-compact    tighter cells; controls inside shrink with them
      .table-full       full width
-     tr.is-highlight   an accent-tinted row
+     tr.is-highlight   an accent-tinted row (td.is-highlight: one cell)
      .num              a right-aligned, tabular-figure cell
 
    The base is zero-specificity (:where()), so a page or component rule wins;
@@ -103,7 +103,8 @@
     }
 
     tr.is-highlight,
-    tr.is-highlight:hover {
+    tr.is-highlight:hover,
+    :is(th, td).is-highlight {
         background: var(--kmwc-accent-light-bg);
     }
 

package/src/examples/css/tokens.css

@@ -113,6 +113,11 @@
         --kmwc-console-text-color: #e2e8f0;
         --kmwc-console-muted-color: #94a3b8;
         --kmwc-console-highlight-color: #68d391;
+        /* Log-line tones on the console (always dark, so fixed light tints). */
+        --kmwc-console-ok-color: #68d391;
+        --kmwc-console-info-color: #7dd3fc;
+        --kmwc-console-warn-color: #fcd34d;
+        --kmwc-console-err-color: #fca5a5;
         --kmwc-inline-code-bg: light-dark(#edf2f7, #2b2b2b);
 
         /* ======================================================================

package/src/examples/css/widgets.css

@@ -7,11 +7,31 @@
     /* ==========================================================================
        LOG PANELS
        ==========================================================================
-       `.log-panel` — monospace, scrollable box for streaming output; light by
-       default, `.log-panel--dark` for the console look; height cap via
-       `--log-max-height`. `.event-log` is the legacy dark console with
-       `.event-*` entries — prefer `.log-panel` for new pages. */
-    .log-panel {
+       `.log-panel` — monospace, scrollable box for streaming output. Light by
+       default (it follows the page theme); `.log-panel--dark` for a console
+       stream (always dark). `--log-max-height` caps the height (`none` lets it
+       grow).
+
+       Lines: any child keeps its line breaks and indentation. `.log-line` takes
+       one tone — `--ok`, `--info`, `--warn`, `--err`, `--muted` (the pill
+       tones) — and `--action` marks a "you clicked X" line. Timeline cells
+       `.log-line__seq`, `__time`, `__source`, `__name` turn a line into columns;
+       the element after them is the detail. A panel fed by textContent is a
+       `<pre class="log-panel">`. `data-empty="(nothing yet)"` shows while the
+       panel is empty.
+
+       Legacy markup: `.event-log` is a `.log-panel--dark`, an `.event-entry`
+       holding `.event-time` / `.event-name` is a timeline line with those two
+       cells. Prefer the `.log-*` classes in new pages. */
+    .log-panel,
+    .event-log {
+        --kmwc-log-ok-color: var(--kmwc-success-color);
+        --kmwc-log-info-color: var(--kmwc-info-color);
+        --kmwc-log-warn-color: var(--kmwc-warning-color);
+        --kmwc-log-err-color: var(--kmwc-danger-color);
+        --kmwc-log-muted-color: var(--kmwc-text-color-3);
+        --kmwc-log-name-color: var(--kmwc-accent-color);
+        --kmwc-log-rule-color: var(--kmwc-border-color);
         font-family: var(--kmwc-mono-font-family);
         font-size: 0.85rem;
         line-height: 1.5;
@@ -24,31 +44,101 @@
         border: 1px solid var(--kmwc-border-color);
     }
 
-    .log-panel--dark {
+    .log-panel--dark,
+    .event-log {
+        --kmwc-log-ok-color: var(--kmwc-console-ok-color);
+        --kmwc-log-info-color: var(--kmwc-console-info-color);
+        --kmwc-log-warn-color: var(--kmwc-console-warn-color);
+        --kmwc-log-err-color: var(--kmwc-console-err-color);
+        --kmwc-log-muted-color: var(--kmwc-console-muted-color);
+        --kmwc-log-name-color: var(--kmwc-console-highlight-color);
+        --kmwc-log-rule-color: color-mix(in srgb, var(--kmwc-console-text-color) 12%, transparent);
         background: var(--kmwc-console-bg);
         color: var(--kmwc-console-text-color);
         border-color: transparent;
     }
 
-    .event-log {
-        background: var(--kmwc-console-bg);
-        color: var(--kmwc-console-muted-color);
-        padding: 1rem;
-        border-radius: var(--kmwc-radius-md);
-        font-family: var(--kmwc-mono-font-family);
-        font-size: 0.8rem;
-        max-height: 200px;
-        overflow-y: auto;
-        line-height: 1.5;
+    pre.log-panel {
+        margin: 0;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+    }
+
+    :is(.log-panel, .event-log) > * {
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+    }
+
+    :is(.log-panel, .event-log)[data-empty]:empty::before {
+        content: attr(data-empty);
+        color: var(--kmwc-log-muted-color);
+    }
+
+    .log-line,
+    .event-entry {
+        color: var(--kmwc-log-tone, currentColor);
+    }
+
+    .log-line--ok { --kmwc-log-tone: var(--kmwc-log-ok-color); }
+    .log-line--info { --kmwc-log-tone: var(--kmwc-log-info-color); }
+    .log-line--warn { --kmwc-log-tone: var(--kmwc-log-warn-color); }
+    .log-line--err { --kmwc-log-tone: var(--kmwc-log-err-color); }
+    .log-line--muted { --kmwc-log-tone: var(--kmwc-log-muted-color); }
+
+    .log-line--action {
+        font-weight: 600;
     }
 
-    .event-log .event-entry {
-        padding: 0.15rem 0;
-        border-bottom: 1px solid color-mix(in srgb, var(--kmwc-console-text-color) 6%, transparent);
+    .log-line--action:not(:first-child) {
+        margin-top: 0.35rem;
     }
 
-    .event-log .event-time { color: var(--kmwc-console-muted-color); }
-    .event-log .event-name { color: var(--kmwc-console-highlight-color); font-weight: 600; }
+    /* Timeline: a line with cells is a row; the cells keep their width and the
+       detail after them wraps in its own column. */
+    .log-line:has(> :is(.log-line__seq, .log-line__time, .log-line__source, .log-line__name)),
+    .event-entry:has(> :is(.event-time, .event-name)) {
+        display: flex;
+        column-gap: 0.6rem;
+        padding: 0.1rem 0;
+        border-bottom: 1px solid var(--kmwc-log-rule-color);
+    }
+
+    .log-line:has(> :is(.log-line__seq, .log-line__time, .log-line__source, .log-line__name)) > :last-child:not(.log-line__name) {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
+    .log-line__seq,
+    .log-line__time,
+    .log-line__source,
+    .log-line__name,
+    .event-time,
+    .event-name {
+        flex: none;
+    }
+
+    .log-line__seq,
+    .log-line__time,
+    .event-time {
+        text-align: end;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .log-line__seq { min-width: 2.2rem; }
+    .log-line__time { min-width: 4.6rem; }
+
+    .log-line__seq,
+    .log-line__time,
+    .log-line__source,
+    .event-time {
+        color: var(--kmwc-log-muted-color);
+    }
+
+    .log-line__name,
+    .event-name {
+        color: var(--kmwc-log-tone, var(--kmwc-log-name-color));
+        font-weight: 600;
+    }
 
     /* ==========================================================================
        CSS-VARIABLE DEMO HELPERS
@@ -98,7 +188,9 @@
 
     /* ==========================================================================
        STATUS DOTS & PILLS
-       ========================================================================== */
+       ==========================================================================
+       One tone set with the log lines: --ok, --info, --warn, --err, --muted
+       (= the neutral default). */
     .status-dot {
         --kmwc-status-color: var(--kmwc-neutral-color);
         display: inline-block;
@@ -113,6 +205,8 @@
     .status-dot--ok { --kmwc-status-color: var(--kmwc-success-color); }
     .status-dot--warn { --kmwc-status-color: var(--kmwc-warning-color); }
     .status-dot--err { --kmwc-status-color: var(--kmwc-danger-color); }
+    .status-dot--info { --kmwc-status-color: var(--kmwc-info-color); }
+    .status-dot--muted { --kmwc-status-color: var(--kmwc-neutral-color); }
 
     .pill {
         --kmwc-status-color: var(--kmwc-neutral-color);
@@ -130,4 +224,6 @@
     .pill--ok { --kmwc-status-color: var(--kmwc-success-color); }
     .pill--warn { --kmwc-status-color: var(--kmwc-warning-color); }
     .pill--err { --kmwc-status-color: var(--kmwc-danger-color); }
+    .pill--info { --kmwc-status-color: var(--kmwc-info-color); }
+    .pill--muted { --kmwc-status-color: var(--kmwc-neutral-color); }
 }

package/templates/claude-block.md

@@ -25,7 +25,9 @@ locally — every local fork is how they drifted apart.
   controls (inputs, selects, checkboxes, radios, `role="switch"`, buttons) and
   tables are already styled by the kit (`.reference-table`, `.table-striped`,
   `.table-compact`, …) — don't restyle them per page; `kmwc-native` opts an
-  element out. If a second component needs a pattern, it belongs in the devkit.
+  element out. Log lines take the kit tones (`.log-line--ok|info|warn|err|muted`,
+  `--action`, timeline cells `.log-line__time` …) — don't colour them per page.
+  If a second component needs a pattern, it belongs in the devkit.
 - **Example pages are fragments:** no `<html>`/`<head>`/`<header>` — start with
   `<meta name="kmwc:title" content="…">`, the devkit layout adds the rest. Shared text
   goes in `partials/` via `<kmwc-include>`; show code with `<kmwc-demo>` (the live