@keenmate/web-components-devkit 1.0.0-rc06 → 1.0.0-rc08

package/src/examples/css/content.css

@@ -118,7 +118,7 @@
         padding: 0.2rem 0.4rem;
         border-radius: 3px;
         font-size: 0.9em;
-        color: var(--kmwc-accent-color);
+        color: var(--kmwc-inline-code-color);
         font-family: var(--kmwc-mono-font-family);
         /* A long identifier has no break opportunity — break it anywhere
            rather than widen the page on a phone. */
@@ -157,8 +157,11 @@
         background-color: var(--kmwc-accent-light-bg-hover);
         color: var(--kmwc-accent-color);
         font-weight: 600;
-        padding: 0 2px;
+        /* No padding: a match inside a word ("Town|send") must not split it. */
+        padding: 0;
         border-radius: var(--kmwc-radius-sm);
+        box-decoration-break: clone;
+        -webkit-box-decoration-break: clone;
     }
 
     /* ==========================================================================

package/src/examples/css/index-page.css

@@ -114,5 +114,9 @@
         .kmwc-index__header {
             padding: 1.75rem 1.5rem;
         }
+
+        .kmwc-index__header h1 {
+            font-size: 2rem;
+        }
     }
 }

package/src/examples/css/tokens.css

@@ -118,7 +118,11 @@
         --kmwc-console-info-color: #7dd3fc;
         --kmwc-console-warn-color: #fcd34d;
         --kmwc-console-err-color: #fca5a5;
-        --kmwc-inline-code-bg: light-dark(#edf2f7, #2b2b2b);
+        /* Dark: the chip is a step up from the main surface (slate on a slate page, not a
+           neutral grey), and the text keeps the accent hue but at least 0.8 lightness, so a
+           mid-dark accent (treeview's #059669) stays readable on it. */
+        --kmwc-inline-code-bg: light-dark(#edf2f7, oklch(from var(--kmwc-main-bg) calc(l + 0.07) c h));
+        --kmwc-inline-code-color: light-dark(var(--kmwc-accent-color), oklch(from var(--kmwc-accent-color) max(l, 0.8) c h));
 
         /* ======================================================================
            COLORS — SEMANTIC

package/src/vite/index.js

@@ -20,7 +20,7 @@ import { readdirSync, existsSync, cpSync } from 'node:fs';
 import { join, resolve } from 'node:path';
 import { getKmwcConfig, getDevkitPackageJson, generateBuildDefines, loadPeerModule, DEVKIT_ROOT, NON_PAGE_HTML_FILES } from '../config.js';
 import { renderThemeBootstrapScript } from '../examples/theme-switch.js';
-import { composePage } from './page-composer.js';
+import { composePage, insertIntoHead, insertBeforeBodyEnd } from './page-composer.js';
 import { generateChapterIndex } from './chapter-index.js';
 
 const AUTO_ENTRY_PATH = join(DEVKIT_ROOT, 'src', 'examples', 'auto.js');
@@ -162,11 +162,7 @@ export function createExamplesPlugin(pluginConfig = {}) {
         const kitImports = isBuild ? `import '${KIT_STYLESHEET_PATH}'; import '${VIRTUAL_AUTO_ID}';` : `import '${VIRTUAL_AUTO_ID}';`;
         const bodyHtml = `<script type="module">${kitImports}</script>\n`;
 
-        html = /<head[^>]*>/i.test(html)
-          ? html.replace(/<head[^>]*>/i, (headTag) => `${headTag}\n${headHtml}`)
-          : headHtml + html;
-        html = /<\/body>/i.test(html) ? html.replace(/<\/body>/i, `${bodyHtml}</body>`) : html + bodyHtml;
-        return html;
+        return insertBeforeBodyEnd(insertIntoHead(html, headHtml), bodyHtml);
       },
     },
 

package/src/vite/page-composer.js

@@ -64,7 +64,36 @@ export function mapOutsideComments(html, mapper, skippedPattern = HTML_COMMENT_P
   return mappedHtml + mapper(html.slice(lastIndex));
 }
 
-const mapToCamelCase = (kebabName) => kebabName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+// The real tag only — `<head[^>]*>` also matches `<header>`.
+const HEAD_TAG_PATTERN = /<head(?=[\s>])[^>]*>/i;
+const BODY_END_TAG = '</body>';
+
+/**
+ * Insert `headHtml` right after the page's <head> tag (prepend when there is none).
+ * The first <head> outside comments is the real one: the text "<head>" in a tooltip
+ * or a script comment comes later, and a snippet landing there breaks the page
+ * (an HTML comment inside a module script throws).
+ */
+export function insertIntoHead(html, headHtml) {
+  let isInserted = false;
+  const insertedHtml = mapOutsideComments(html, (text) => {
+    if (isInserted || !HEAD_TAG_PATTERN.test(text)) return text;
+    isInserted = true;
+    return text.replace(HEAD_TAG_PATTERN, (headTag) => `${headTag}\n${headHtml}`);
+  });
+  return isInserted ? insertedHtml : headHtml + html;
+}
+
+/**
+ * Insert `bodyHtml` before the LAST </body> (append when there is none): an
+ * earlier one is text — e.g. a comment inside an inline script.
+ */
+export function insertBeforeBodyEnd(html, bodyHtml) {
+  const bodyEndIndex = html.toLowerCase().lastIndexOf(BODY_END_TAG);
+  return bodyEndIndex < 0 ? html + bodyHtml : html.slice(0, bodyEndIndex) + bodyHtml + html.slice(bodyEndIndex);
+}
+
+const mapToCamelCase =(kebabName) => kebabName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 
 const HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
 const mapToEscapedHtml = (text) => String(text).replace(/[&<>"]/g, (character) => HTML_ESCAPES[character]);

package/templates/Makefile.tmpl

@@ -4,7 +4,7 @@
 # redefined there wins, with a make "overriding recipe" warning). Per-developer
 # overrides (container runner, image name, port) go in .makefile.env.
 
-.PHONY: help setup dev kill-port build build-examples preview-examples package publish-dry publish publish-rc clean check-version check-vars doctor sync test test-e2e test-e2e-ui test-e2e-headed test-e2e-install image-build image-run image-stop image-clean
+.PHONY: help setup dev kill-port build build-examples preview-examples package publish-dry publish publish-rc clean check-version check-vars doctor check-pages sync test test-e2e test-e2e-ui test-e2e-headed test-e2e-install image-build image-run image-stop image-clean
 
 -include .makefile.env
 DOCKER_RUNNER  ?= {{RUNNER}}
@@ -91,6 +91,9 @@ check-vars: ## Validate component-variables.manifest.json against the CSS
 doctor: ## Check this repo against the Keenmate component standard
 	npx kmwc doctor
 
+check-pages: ## Load every example page at 1440/390/320px: errors, undefined elements, overflow
+	npx kmwc check-pages
+
 sync: ## Regenerate devkit-owned files (Dockerfile, nginx.conf, Makefile, …)
 	npx kmwc sync
 

package/templates/claude-block.md

@@ -28,7 +28,10 @@ locally — every local fork is how they drifted apart.
   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.
   `<kbd>`, `<mark>`, field widths (`.w-xs` … `.w-lg`) and `.push-end` are kit
-  too — no inline styles for them.
+  too — no inline styles for them. Page colours come from the kit's `--kmwc-*`
+  tokens or `light-dark()` — a literal doesn't follow dark mode (doctor warns);
+  a demo that shows fixed colours on purpose goes in `<style data-kmwc-fixed-colors>`
+  (one rule: a `/* kmwc-fixed-colors: why */` comment before it).
   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
@@ -48,4 +51,7 @@ locally — every local fork is how they drifted apart.
   otherwise published with it).
 - Before finishing: `npx kmwc doctor` must pass — it runs the devkit checks,
   checks the `npm pack` file list for dev-only files, and runs the rulebook's
-  `*.checks.sh` suites.
+  `*.checks.sh` suites. A rulebook failure that is a real architectural decision
+  goes into `VALIDATION-NOTES.md` under a `## C-XX-N — …` heading (deferrals
+  don't count). After changing a page, `npx kmwc check-pages` loads every page at
+  desktop and phone widths and reports errors and horizontal overflow.