@codepress/design-kit 0.4.0 → 0.4.2

package/README.md

@@ -445,6 +445,6 @@ remove from markup, such as a mock API's) and a `session` object whose
 ## Contributing and license
 
 The source is on GitHub at
-[quantfive/design-kit](https://github.com/quantfive/design-kit), where issues
+[codepressdev/design-kit](https://github.com/codepressdev/design-kit), where issues
 and pull requests are welcome; see its `CONTRIBUTING.md`. MIT licensed: see
 [`LICENSE`](./LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codepress/design-kit",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Capture your Storybook and real app pages as a static design kit, and compose self-contained mockups from it",
   "type": "module",
   "bin": {
@@ -63,11 +63,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/quantfive/design-kit.git"
+    "url": "git+https://github.com/codepressdev/design-kit.git"
   },
-  "homepage": "https://github.com/quantfive/design-kit#readme",
+  "homepage": "https://github.com/codepressdev/design-kit#readme",
   "bugs": {
-    "url": "https://github.com/quantfive/design-kit/issues"
+    "url": "https://github.com/codepressdev/design-kit/issues"
   },
   "publishConfig": {
     "access": "public"

package/src/capture-stories.mjs

@@ -10,6 +10,7 @@
  * Needs Playwright's Chromium (`npx playwright install chromium`).
  */
 import { execFileSync, spawnSync } from "node:child_process";
+import { createHash } from "node:crypto";
 import {
   copyFileSync,
   createReadStream,
@@ -62,6 +63,28 @@ export const kitId = (storyId, width) => `story:${storyId}@${width}`;
 export const kitFile = (id) => `html/${id.replace(/^story:/, "story--")}.html`;
 export const storyIdOf = (id) => id.replace(/^story:/, "").replace(/@\d+$/, "");
 
+/**
+ * Holds each distinct sheet once. A capture's sheets come back as shared
+ * `{key, rules}` entries: an equal key and equal rules give the same entry,
+ * so a run keeps one copy of the CSS nearly every story loads instead of one
+ * per capture. A linked sheet is keyed by its path, so two captures can share
+ * a key with different rules; each keeps its own, and the kit chooses between
+ * them exactly as it did before.
+ */
+export function sheetStore() {
+  const byKey = new Map(); // key -> Map(rules digest -> entry)
+  return (sheets) =>
+    sheets.map(({ key, rules }) => {
+      const digest = createHash("sha256")
+        .update(JSON.stringify(rules))
+        .digest("base64");
+      let variants = byKey.get(key);
+      if (!variants) byKey.set(key, (variants = new Map()));
+      if (!variants.has(digest)) variants.set(digest, { key, rules });
+      return variants.get(digest);
+    });
+}
+
 /**
  * Sheets in a cascade-respecting order: each capture's sheets keep their
  * document order, and a sheet first seen later is placed after the sheet
@@ -974,6 +997,15 @@ export async function captureStories(config, options = {}) {
     const captures = new Map(); // kit id -> {story, viewport, result}
     const failures = [];
     const attempts = []; // every capture's timing, kept or not
+    // Nearly every story loads the same sheets, a few hundred KB of rules
+    // each; kept results share one copy of each (see sheetStore).
+    const keepSheetsOnce = sheetStore();
+    // What the timings report needs from a capture, without its result.
+    const attempt = (capture) => {
+      const record = { timing: capture.timing, failure: capture.failure };
+      attempts.push(record);
+      return record;
+    };
     let done = 0;
     await pool(targets, concurrency, async (story) => {
       const first = await captureOne({
@@ -986,7 +1018,7 @@ export async function captureStories(config, options = {}) {
         families,
         fixedTime,
       });
-      attempts.push(first);
+      const firstAttempt = attempt(first);
       let viewports = plannedViewports(story.title, null, planning);
       const results = new Map([[planning.viewport.width, first]]);
       if (first.result) {
@@ -994,7 +1026,7 @@ export async function captureStories(config, options = {}) {
         viewports = plannedViewports(story.title, declared, planning);
         if (declared) {
           results.delete(planning.viewport.width);
-          first.discarded = true;
+          firstAttempt.discarded = true;
         }
       }
       for (const viewport of viewports) {
@@ -1009,7 +1041,7 @@ export async function captureStories(config, options = {}) {
             families,
             fixedTime,
           });
-          attempts.push(capture);
+          attempt(capture);
           results.set(viewport.width, capture);
         }
         const capture = results.get(viewport.width);
@@ -1017,7 +1049,14 @@ export async function captureStories(config, options = {}) {
         if (capture.failure) {
           failures.push({ id, ...capture.failure });
         } else {
-          captures.set(id, { story, viewport, result: capture.result });
+          captures.set(id, {
+            story,
+            viewport,
+            result: {
+              ...capture.result,
+              sheets: keepSheetsOnce(capture.result.sheets),
+            },
+          });
         }
       }
       done += 1;

package/src/init.mjs

@@ -36,6 +36,10 @@ export const WORKFLOW_PATH = ".github/workflows/design-kit.yml";
 export const SKILL_DIR = ".claude/skills/design-kit";
 export const AGENTS_SKILL_DIR = ".agents/skills/design-kit";
 const TODO = "TODO";
+// The one line a finished (not dry-run) init ends with. Printed only; init
+// makes no network call.
+export const CALL_TO_ACTION =
+  "Want every screen on one canvas, shareable with your team, and agents that build it? → https://codepress.dev";
 /** How long a kit artifact is kept: the most a public repository allows. */
 export const RETENTION_DAYS = 90;
 
@@ -1196,5 +1200,6 @@ export function init({
       if (write.kind !== "unchanged") apply(write);
   }
   log(summary(found, plan, { dryRun }));
+  if (!dryRun) log(`\n${CALL_TO_ACTION}`);
   return 0;
 }