@mccaskie-labs/workbench-config 0.1.20 → 0.1.21

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mccaskie-labs/workbench-config
 
+## 0.1.21
+
+### Patch Changes
+
+- The `ui` component: `capabilities/ui.json` (rules and probes for `@mccaskie-labs/workbench-ui`) joins the manifests, and `ui` joins the component list.
+
 ## 0.1.20
 
 ### Patch Changes

package/capabilities/schema.json

@@ -32,7 +32,8 @@
         "r2",
         "kv",
         "github",
-        "strings"
+        "strings",
+        "ui"
       ]
     },
     "title": {

package/capabilities/ui.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "./schema.json",
+  "format": 1,
+  "component": "ui",
+  "title": "One look for every page",
+  "summary": "workbench-ui gives every Workbench page the same dark look: the page shell, a top bar with the environment tag, cards that fold, jump pills, outcome pills, and one way to write times, money and durations. It returns HTML text in the app's own Worker, with no Gateway call and no cost.",
+  "status": "built",
+  "surfaces": {
+    "package": [
+      "shell",
+      "topBar",
+      "card",
+      "jumpNav",
+      "SECTIONS_SCRIPT",
+      "pill",
+      "chip",
+      "when",
+      "shortWhen",
+      "timeLeft",
+      "money",
+      "duration",
+      "escape",
+      "STYLE",
+      "CSS"
+    ]
+  },
+  "rules": [
+    {
+      "id": "ui.one-look",
+      "kind": "must",
+      "text": "Build every page a person opens with shell (or STYLE for a page that writes its own document), so each page has the same top bar, cards and pills.",
+      "enforced_by": "review",
+      "probe": "ui.page"
+    },
+    {
+      "id": "ui.environment-tag",
+      "kind": "must",
+      "text": "Pass the environment to topBar, so every page says whether it is staging or production.",
+      "enforced_by": "review",
+      "probe": "ui.page"
+    },
+    {
+      "id": "ui.escape",
+      "kind": "must",
+      "text": "Escape any text that goes into an HTML argument (a card's inner, a top bar's extra) with escape. Arguments described as plain text are escaped for you.",
+      "enforced_by": "review",
+      "probe": "ui.page"
+    },
+    {
+      "id": "ui.no-own-colours",
+      "kind": "must_not",
+      "text": "Give a page its own colours. A page's own rules go after the shared ones and use the colour tokens (--surface, --line, --pass and so on).",
+      "enforced_by": "review",
+      "probe": "ui.page"
+    },
+    {
+      "id": "ui.one-format",
+      "kind": "must",
+      "text": "Write the times, amounts and durations a page shows with when, shortWhen, timeLeft, money and duration, not hand-built strings.",
+      "enforced_by": "review",
+      "probe": "ui.formats"
+    }
+  ],
+  "examples": [
+    {
+      "id": "ui.example.page",
+      "title": "A page with one folding card",
+      "lang": "ts",
+      "probe": "ui.page",
+      "code": "import { workbenchEnv } from '@mccaskie-labs/workbench-config'\nimport { card, pill, shell, shortWhen, topBar } from '@mccaskie-labs/workbench-ui'\n\nconst html = shell({\n  title: 'Orders',\n  site: 'my-app',\n  top: topBar({ name: 'my-app', href: '/', env: workbenchEnv(env), links: [['History', '/history']] }),\n  body: card('Last order', `<div class=\"body\">${pill('pass', 'Sent')} ${shortWhen(order.sent_at)}</div>`, {\n    id: 'last-order',\n    about: 'The most recent order and when it went out.',\n    collapsible: true,\n  }),\n})"
+    }
+  ],
+  "probes": [
+    {
+      "id": "ui.page",
+      "half": "runtime",
+      "expect": "pass",
+      "smoke": true,
+      "cost_hint_usd": 0,
+      "note": "In the Worker itself: builds one page with shell, topBar, jumpNav, a folding card and a pill, and checks the shared stylesheet is there with its colour tokens, the environment tag is shown, the pill carries its tone, the jump pill points at the card, and markup in a plain-text title and in text passed through escape both come out escaped"
+    },
+    {
+      "id": "ui.formats",
+      "half": "runtime",
+      "expect": "pass",
+      "smoke": true,
+      "cost_hint_usd": 0,
+      "note": "In the Worker itself: compares money (US$0.0042, US$12.50, and an en dash for nothing), duration (640 ms, 2.35 s, 3 min 5 s) and timeLeft against a fixed now (42 minutes left) with the expected text, and checks when and shortWhen write one fixed moment as its Manila day and hour with UTC beside it"
+    }
+  ]
+}

package/dist/capabilities.gen.d.ts

@@ -1,4 +1,4 @@
-export declare const MANIFEST_VERSION: "71462ff7fe4c";
+export declare const MANIFEST_VERSION: "2216125e22d4";
 export declare const capabilities: {
     readonly ai: {
         readonly $schema: "./schema.json";
@@ -1642,6 +1642,70 @@ export declare const capabilities: {
             readonly note: "The app's own checkStrings run passes in its tests, and npx workbench-strings check passes in CI";
         }];
     };
+    readonly ui: {
+        readonly $schema: "./schema.json";
+        readonly format: 1;
+        readonly component: "ui";
+        readonly title: "One look for every page";
+        readonly summary: "workbench-ui gives every Workbench page the same dark look: the page shell, a top bar with the environment tag, cards that fold, jump pills, outcome pills, and one way to write times, money and durations. It returns HTML text in the app's own Worker, with no Gateway call and no cost.";
+        readonly status: "built";
+        readonly surfaces: {
+            readonly package: readonly ["shell", "topBar", "card", "jumpNav", "SECTIONS_SCRIPT", "pill", "chip", "when", "shortWhen", "timeLeft", "money", "duration", "escape", "STYLE", "CSS"];
+        };
+        readonly rules: readonly [{
+            readonly id: "ui.one-look";
+            readonly kind: "must";
+            readonly text: "Build every page a person opens with shell (or STYLE for a page that writes its own document), so each page has the same top bar, cards and pills.";
+            readonly enforced_by: "review";
+            readonly probe: "ui.page";
+        }, {
+            readonly id: "ui.environment-tag";
+            readonly kind: "must";
+            readonly text: "Pass the environment to topBar, so every page says whether it is staging or production.";
+            readonly enforced_by: "review";
+            readonly probe: "ui.page";
+        }, {
+            readonly id: "ui.escape";
+            readonly kind: "must";
+            readonly text: "Escape any text that goes into an HTML argument (a card's inner, a top bar's extra) with escape. Arguments described as plain text are escaped for you.";
+            readonly enforced_by: "review";
+            readonly probe: "ui.page";
+        }, {
+            readonly id: "ui.no-own-colours";
+            readonly kind: "must_not";
+            readonly text: "Give a page its own colours. A page's own rules go after the shared ones and use the colour tokens (--surface, --line, --pass and so on).";
+            readonly enforced_by: "review";
+            readonly probe: "ui.page";
+        }, {
+            readonly id: "ui.one-format";
+            readonly kind: "must";
+            readonly text: "Write the times, amounts and durations a page shows with when, shortWhen, timeLeft, money and duration, not hand-built strings.";
+            readonly enforced_by: "review";
+            readonly probe: "ui.formats";
+        }];
+        readonly examples: readonly [{
+            readonly id: "ui.example.page";
+            readonly title: "A page with one folding card";
+            readonly lang: "ts";
+            readonly code: "import { workbenchEnv } from '@mccaskie-labs/workbench-config'\nimport { card, pill, shell, shortWhen, topBar } from '@mccaskie-labs/workbench-ui'\n\nconst html = shell({\n  title: 'Orders',\n  site: 'my-app',\n  top: topBar({ name: 'my-app', href: '/', env: workbenchEnv(env), links: [['History', '/history']] }),\n  body: card('Last order', `<div class=\"body\">${pill('pass', 'Sent')} ${shortWhen(order.sent_at)}</div>`, {\n    id: 'last-order',\n    about: 'The most recent order and when it went out.',\n    collapsible: true,\n  }),\n})";
+            readonly probe: "ui.page";
+        }];
+        readonly probes: readonly [{
+            readonly id: "ui.page";
+            readonly half: "runtime";
+            readonly expect: "pass";
+            readonly smoke: true;
+            readonly cost_hint_usd: 0;
+            readonly note: "In the Worker itself: builds one page with shell, topBar, jumpNav, a folding card and a pill, and checks the shared stylesheet is there with its colour tokens, the environment tag is shown, the pill carries its tone, the jump pill points at the card, and markup in a plain-text title and in text passed through escape both come out escaped";
+        }, {
+            readonly id: "ui.formats";
+            readonly half: "runtime";
+            readonly expect: "pass";
+            readonly smoke: true;
+            readonly cost_hint_usd: 0;
+            readonly note: "In the Worker itself: compares money (US$0.0042, US$12.50, and an en dash for nothing), duration (640 ms, 2.35 s, 3 min 5 s) and timeLeft against a fixed now (42 minutes left) with the expected text, and checks when and shortWhen write one fixed moment as its Manila day and hour with UTC beside it";
+        }];
+    };
 };
 export type Alias = (typeof capabilities)["ai"]["allowed"]["aliases"][number]["alias"];
 export type GatewayScope = (typeof capabilities)["gateway"]["allowed"]["scopes"][number];

package/dist/capabilities.gen.js

@@ -1,6 +1,6 @@
 // Generated by `npm run capabilities:build` from capabilities/*.json. Do not edit.
 // check:capabilities fails in Checks when this file is stale.
-export const MANIFEST_VERSION = "71462ff7fe4c";
+export const MANIFEST_VERSION = "2216125e22d4";
 export const capabilities = {
     "ai": {
         "$schema": "./schema.json",
@@ -2204,5 +2204,96 @@ export const capabilities = {
                 "note": "The app's own checkStrings run passes in its tests, and npx workbench-strings check passes in CI"
             }
         ]
+    },
+    "ui": {
+        "$schema": "./schema.json",
+        "format": 1,
+        "component": "ui",
+        "title": "One look for every page",
+        "summary": "workbench-ui gives every Workbench page the same dark look: the page shell, a top bar with the environment tag, cards that fold, jump pills, outcome pills, and one way to write times, money and durations. It returns HTML text in the app's own Worker, with no Gateway call and no cost.",
+        "status": "built",
+        "surfaces": {
+            "package": [
+                "shell",
+                "topBar",
+                "card",
+                "jumpNav",
+                "SECTIONS_SCRIPT",
+                "pill",
+                "chip",
+                "when",
+                "shortWhen",
+                "timeLeft",
+                "money",
+                "duration",
+                "escape",
+                "STYLE",
+                "CSS"
+            ]
+        },
+        "rules": [
+            {
+                "id": "ui.one-look",
+                "kind": "must",
+                "text": "Build every page a person opens with shell (or STYLE for a page that writes its own document), so each page has the same top bar, cards and pills.",
+                "enforced_by": "review",
+                "probe": "ui.page"
+            },
+            {
+                "id": "ui.environment-tag",
+                "kind": "must",
+                "text": "Pass the environment to topBar, so every page says whether it is staging or production.",
+                "enforced_by": "review",
+                "probe": "ui.page"
+            },
+            {
+                "id": "ui.escape",
+                "kind": "must",
+                "text": "Escape any text that goes into an HTML argument (a card's inner, a top bar's extra) with escape. Arguments described as plain text are escaped for you.",
+                "enforced_by": "review",
+                "probe": "ui.page"
+            },
+            {
+                "id": "ui.no-own-colours",
+                "kind": "must_not",
+                "text": "Give a page its own colours. A page's own rules go after the shared ones and use the colour tokens (--surface, --line, --pass and so on).",
+                "enforced_by": "review",
+                "probe": "ui.page"
+            },
+            {
+                "id": "ui.one-format",
+                "kind": "must",
+                "text": "Write the times, amounts and durations a page shows with when, shortWhen, timeLeft, money and duration, not hand-built strings.",
+                "enforced_by": "review",
+                "probe": "ui.formats"
+            }
+        ],
+        "examples": [
+            {
+                "id": "ui.example.page",
+                "title": "A page with one folding card",
+                "lang": "ts",
+                "code": "import { workbenchEnv } from '@mccaskie-labs/workbench-config'\nimport { card, pill, shell, shortWhen, topBar } from '@mccaskie-labs/workbench-ui'\n\nconst html = shell({\n  title: 'Orders',\n  site: 'my-app',\n  top: topBar({ name: 'my-app', href: '/', env: workbenchEnv(env), links: [['History', '/history']] }),\n  body: card('Last order', `<div class=\"body\">${pill('pass', 'Sent')} ${shortWhen(order.sent_at)}</div>`, {\n    id: 'last-order',\n    about: 'The most recent order and when it went out.',\n    collapsible: true,\n  }),\n})",
+                "probe": "ui.page"
+            }
+        ],
+        "probes": [
+            {
+                "id": "ui.page",
+                "half": "runtime",
+                "expect": "pass",
+                "smoke": true,
+                "cost_hint_usd": 0,
+                "note": "In the Worker itself: builds one page with shell, topBar, jumpNav, a folding card and a pill, and checks the shared stylesheet is there with its colour tokens, the environment tag is shown, the pill carries its tone, the jump pill points at the card, and markup in a plain-text title and in text passed through escape both come out escaped"
+            },
+            {
+                "id": "ui.formats",
+                "half": "runtime",
+                "expect": "pass",
+                "smoke": true,
+                "cost_hint_usd": 0,
+                "note": "In the Worker itself: compares money (US$0.0042, US$12.50, and an en dash for nothing), duration (640 ms, 2.35 s, 3 min 5 s) and timeLeft against a fixed now (42 minutes left) with the expected text, and checks when and shortWhen write one fixed moment as its Manila day and hour with UTC beside it"
+            }
+        ]
     }
 };

package/dist/capability-schema.d.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export declare const COMPONENTS: readonly ["gateway", "ai", "images", "image-search", "config", "email", "email-inbound", "email-sending", "database", "workers", "domains", "dns", "analytics", "country", "pdf", "access", "r2", "kv", "github", "strings"];
+export declare const COMPONENTS: readonly ["gateway", "ai", "images", "image-search", "config", "email", "email-inbound", "email-sending", "database", "workers", "domains", "dns", "analytics", "country", "pdf", "access", "r2", "kv", "github", "strings", "ui"];
 export type Component = (typeof COMPONENTS)[number];
 export declare const allowedSchemas: {
     gateway: z.ZodObject<{
@@ -111,6 +111,7 @@ export declare const capabilitySchema: z.ZodObject<{
         pdf: "pdf";
         r2: "r2";
         strings: "strings";
+        ui: "ui";
         workers: "workers";
     }>;
     title: z.ZodString;

package/dist/capability-schema.js

@@ -23,6 +23,7 @@ export const COMPONENTS = [
     "kv",
     "github",
     "strings",
+    "ui",
 ];
 const id = z.string().regex(/^[a-z0-9][a-z0-9.-]*$/, "lower case, digits, dots and hyphens");
 const code = z.string().regex(/^[a-z][a-z0-9_]*$/, "a snake_case error code");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mccaskie-labs/workbench-config",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Workbench app configuration: WORKBENCH_ENV, typed variables that fail by name, secrets that are never printed, and the capabilities manifest.",
   "license": "UNLICENSED",
   "type": "module",