@sixthshift/design-system 0.4.0 → 0.6.0

package/dist/lib/contexts/OverlayContext/toastStore.js

@@ -0,0 +1,69 @@
+// =============================================================================
+// Defaults
+// =============================================================================
+export const DEFAULT_TOAST_DURATION = 5000;
+export const DEFAULT_MAX_TOASTS = 3;
+/** The lifetime an intent gets when none is given: failures stay, everything else expires. */
+export function defaultToastDuration(intent) {
+    return intent === "danger" ? 0 : DEFAULT_TOAST_DURATION;
+}
+let opened = 0;
+const nextId = () => `toast-${++opened}`;
+// =============================================================================
+// Store
+// =============================================================================
+const EMPTY = [];
+export function createToastStore({ max = DEFAULT_MAX_TOASTS, newId = nextId } = {}) {
+    let toasts = EMPTY;
+    const listeners = new Set();
+    const set = (next) => {
+        toasts = next.length === 0 ? EMPTY : next;
+        for (const listener of [...listeners])
+            listener();
+    };
+    const close = (id) => {
+        const record = toasts.find((toast) => toast.id === id);
+        if (record === undefined || record.closing)
+            return;
+        set(toasts.map((toast) => (toast === record ? { ...toast, closing: true } : toast)));
+    };
+    return {
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => void listeners.delete(listener);
+        },
+        snapshot: () => toasts,
+        open(options) {
+            const id = newId();
+            const record = { id, options, duration: options.duration ?? defaultToastDuration(options.intent), closing: false };
+            set([...toasts, record].slice(-max));
+            return { id, close: () => close(id) };
+        },
+        close,
+        remove(id) {
+            const next = toasts.filter((toast) => toast.id !== id);
+            if (next.length !== toasts.length)
+                set(next);
+        },
+        clear() {
+            if (toasts.every((toast) => toast.closing))
+                return;
+            set(toasts.map((toast) => ({ ...toast, closing: true })));
+        },
+    };
+}
+/** The app's one stack: what `OverlayProvider` renders unless handed another. */
+export const toastStore = createToastStore();
+/** Open a toast on the app's stack, from anywhere. Returns its id and a way to close it early. */
+export function toast(options) {
+    return toastStore.open(options);
+}
+/** Begin a toast's exit on the app's stack. */
+export function closeToast(id) {
+    toastStore.close(id);
+}
+/** Begin every toast's exit on the app's stack. */
+export function closeAllToasts() {
+    toastStore.clear();
+}
+//# sourceMappingURL=toastStore.js.map

package/dist/lib/contexts/OverlayContext/toastStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastStore.js","sourceRoot":"","sources":["../../../../src/lib/contexts/OverlayContext/toastStore.ts"],"names":[],"mappings":"AA6DA,gFAAgF;AAChF,WAAW;AACX,gFAAgF;AAEhF,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAEpC,8FAA8F;AAC9F,MAAM,UAAU,oBAAoB,CAAC,MAA8B;IACjE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC;AAC1D,CAAC;AAED,IAAI,MAAM,GAAG,CAAC,CAAC;AACf,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;AAEzC,gFAAgF;AAChF,QAAQ;AACR,gFAAgF;AAEhF,MAAM,KAAK,GAA2B,EAAE,CAAC;AAEzC,MAAM,UAAU,gBAAgB,CAAC,EAAE,GAAG,GAAG,kBAAkB,EAAE,KAAK,GAAG,MAAM,KAAwB,EAAE;IACnG,IAAI,MAAM,GAA2B,KAAK,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAC;IAExC,MAAM,GAAG,GAAG,CAAC,IAA4B,EAAE,EAAE;QAC3C,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1C,KAAK,MAAM,QAAQ,IAAI,CAAC,GAAG,SAAS,CAAC;YAAE,QAAQ,EAAE,CAAC;IACpD,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CAAC,EAAU,EAAE,EAAE;QAC3B,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO;YAAE,OAAO;QACnD,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACvF,CAAC,CAAC;IAEF,OAAO;QACL,SAAS,CAAC,QAAQ;YAChB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACxB,OAAO,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM;QACtB,IAAI,CAAC,OAAO;YACV,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;YACnB,MAAM,MAAM,GAAgB,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,oBAAoB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAChI,GAAG,CAAC,CAAC,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YACrC,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;QACxC,CAAC;QACD,KAAK;QACL,MAAM,CAAC,EAAE;YACP,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACvD,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;gBAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/C,CAAC;QACD,KAAK;YACH,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC;gBAAE,OAAO;YACnD,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5D,CAAC;KACF,CAAC;AACJ,CAAC;AAED,iFAAiF;AACjF,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,EAAE,CAAC;AAE7C,kGAAkG;AAClG,MAAM,UAAU,KAAK,CAAC,OAAqB;IACzC,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC;AAED,+CAA+C;AAC/C,MAAM,UAAU,UAAU,CAAC,EAAU;IACnC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AACvB,CAAC;AAED,mDAAmD;AACnD,MAAM,UAAU,cAAc;IAC5B,UAAU,CAAC,KAAK,EAAE,CAAC;AACrB,CAAC"}

package/dist/lib/withErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/lib/withErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;YAC7G,CAAC;;EAWpC"}
+{"version":3,"file":"withErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/lib/withErrorBoundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;YAC7G,CAAC;;EAWpC"}

package/dist/lib/withErrorBoundary.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorBoundary } from "./ErrorBoundary.js";
 export function withErrorBoundary(Component, fallback) {

package/dist/lib/withErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"withErrorBoundary.js","sourceRoot":"","sources":["../../src/lib/withErrorBoundary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AAEzE,MAAM,UAAU,iBAAiB,CAAmB,SAA2B,EAAE,QAAgE;IAC/I,SAAS,iBAAiB,CAAC,KAAQ;QACjC,OAAO,CACL,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,YAC/B,KAAC,SAAS,OAAK,KAAK,GAAI,GACV,CACjB,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,WAAW,GAAG,qBAAqB,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG,CAAC;IAE/G,OAAO,iBAAiB,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"withErrorBoundary.js","sourceRoot":"","sources":["../../src/lib/withErrorBoundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AAEzE,MAAM,UAAU,iBAAiB,CAAmB,SAA2B,EAAE,QAAgE;IAC/I,SAAS,iBAAiB,CAAC,KAAQ;QACjC,OAAO,CACL,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,YAC/B,KAAC,SAAS,OAAK,KAAK,GAAI,GACV,CACjB,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,WAAW,GAAG,qBAAqB,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG,CAAC;IAE/G,OAAO,iBAAiB,CAAC;AAC3B,CAAC"}

package/dist/lib/withSuspenseAndErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withSuspenseAndErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/lib/withSuspenseAndErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,KAAK,OAAO,GAAG;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;CACvE,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO;YAG7D,CAAC;;EAa/C"}
+{"version":3,"file":"withSuspenseAndErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/lib/withSuspenseAndErrorBoundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,KAAK,OAAO,GAAG;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;CACvE,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO;YAG7D,CAAC;;EAa/C"}

package/dist/lib/withSuspenseAndErrorBoundary.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
 import { ErrorBoundary } from "./ErrorBoundary.js";

package/dist/lib/withSuspenseAndErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"withSuspenseAndErrorBoundary.js","sourceRoot":"","sources":["../../src/lib/withSuspenseAndErrorBoundary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AAOzE,MAAM,UAAU,4BAA4B,CAAmB,SAA2B,EAAE,OAAgB;IAC1G,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC;IAE5C,SAAS,4BAA4B,CAAC,KAAQ;QAC5C,OAAO,CACL,KAAC,aAAa,IAAC,QAAQ,EAAE,aAAa,YACpC,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,YAC1B,KAAC,SAAS,OAAK,KAAK,GAAI,GACf,GACG,CACjB,CAAC;IACJ,CAAC;IAED,4BAA4B,CAAC,WAAW,GAAG,gCAAgC,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG,CAAC;IAErI,OAAO,4BAA4B,CAAC;AACtC,CAAC"}
+{"version":3,"file":"withSuspenseAndErrorBoundary.js","sourceRoot":"","sources":["../../src/lib/withSuspenseAndErrorBoundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AAOzE,MAAM,UAAU,4BAA4B,CAAmB,SAA2B,EAAE,OAAgB;IAC1G,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC;IAE5C,SAAS,4BAA4B,CAAC,KAAQ;QAC5C,OAAO,CACL,KAAC,aAAa,IAAC,QAAQ,EAAE,aAAa,YACpC,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,YAC1B,KAAC,SAAS,OAAK,KAAK,GAAI,GACf,GACG,CACjB,CAAC;IACJ,CAAC;IAED,4BAA4B,CAAC,WAAW,GAAG,gCAAgC,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG,CAAC;IAErI,OAAO,4BAA4B,CAAC;AACtC,CAAC"}

package/dist/{theme/schema.d.ts → theming/vocabulary.d.ts}

@@ -1,12 +1,12 @@
 /**
- * Theme Schema
+ * Token naming vocabulary
  *
  * The naming convention for design tokens, as types and as data:
  *
  *   {context}-[on-]{intent}[-{weight}][-{state}]
  *
- * src/theme/tokens.css is the only place tokens are defined, and nothing derives
- * TypeScript from it. These types describe the *shape* a token name can take
+ * The theme sources (src/theme/<name>/ plus src/theming/tailwind.css) are the only place
+ * tokens are defined, and nothing derives TypeScript from them. These types describe the *shape* a token name can take
  * rather than enumerating the names that happen to exist today, which is why the
  * vocabulary below is the thing to edit when the system grows a new axis.
  *
@@ -78,4 +78,4 @@ export type ThemeSchema = {
 /** Type-safe CSS var reference */
 export declare function cssVar(token: ColorToken): string;
 export {};
-//# sourceMappingURL=schema.d.ts.map
+//# sourceMappingURL=vocabulary.d.ts.map

package/dist/theming/vocabulary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vocabulary.d.ts","sourceRoot":"","sources":["../../src/theming/vocabulary.ts"],"names":[],"mappings":"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"}

package/dist/{theme/schema.js → theming/vocabulary.js}

@@ -1,12 +1,12 @@
 /**
- * Theme Schema
+ * Token naming vocabulary
  *
  * The naming convention for design tokens, as types and as data:
  *
  *   {context}-[on-]{intent}[-{weight}][-{state}]
  *
- * src/theme/tokens.css is the only place tokens are defined, and nothing derives
- * TypeScript from it. These types describe the *shape* a token name can take
+ * The theme sources (src/theme/<name>/ plus src/theming/tailwind.css) are the only place
+ * tokens are defined, and nothing derives TypeScript from them. These types describe the *shape* a token name can take
  * rather than enumerating the names that happen to exist today, which is why the
  * vocabulary below is the thing to edit when the system grows a new axis.
  *
@@ -46,4 +46,4 @@ export const standaloneTokens = ["focus-ring"];
 export function cssVar(token) {
     return `var(--${token})`;
 }
-//# sourceMappingURL=schema.js.map
+//# sourceMappingURL=vocabulary.js.map

package/dist/theming/vocabulary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vocabulary.js","sourceRoot":"","sources":["../../src/theming/vocabulary.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAYH,gFAAgF;AAChF,aAAa;AACb,gFAAgF;AAEhF,gDAAgD;AAChD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAU,CAAC;AAGxD,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGjE,mCAAmC;AACnC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAGlE,oBAAoB;AACpB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC;AAG9D,gFAAgF;AAChF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAC;AAGnE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGrD,yBAAyB;AACzB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAU,CAAC;AAGlE,0DAA0D;AAC1D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAU,CAAC;AAiDxD,gFAAgF;AAChF,YAAY;AACZ,gFAAgF;AAEhF,kCAAkC;AAClC,MAAM,UAAU,MAAM,CAAC,KAAiB;IACtC,OAAO,SAAS,KAAK,GAAG,CAAC;AAC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sixthshift/design-system",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Personal design system - tokens, theme, and component library",
   "license": "MIT",
   "publishConfig": {
@@ -38,10 +38,10 @@
     "!src/testing"
   ],
   "exports": {
-    "./theme.css": "./src/theme/tokens.css",
-    "./theme": {
-      "types": "./dist/theme/index.d.ts",
-      "import": "./dist/theme/index.js"
+    "./themes/linen.css": "./src/theme/linen/index.css",
+    "./theming": {
+      "types": "./dist/theming/vocabulary.d.ts",
+      "import": "./dist/theming/vocabulary.js"
     },
     "./utils": {
       "types": "./dist/lib/utils.d.ts",
@@ -318,13 +318,15 @@
   },
   "scripts": {
     "prepare": "bun run build",
-    "build": "bun run clean:dist && bun run build:js && bun run scripts/check-exports.ts",
+    "build": "bun run clean:dist && bun run scripts/check-use-client.ts && bun run build:js && bun run scripts/check-exports.ts",
     "build:js": "tsc -p tsconfig.build.json && bun run scripts/fix-extensions.ts",
     "dev": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
-    "test": "vitest run --project unit --project date-time --reporter=dot",
-    "test:verbose": "vitest run --project unit --project date-time",
-    "test:watch": "vitest --project unit --project date-time",
+    "test": "vitest run --project unit --project date-time --project ssr --reporter=dot",
+    "test:coverage": "vitest run --project unit --project date-time --project ssr --coverage --reporter=dot",
+    "test:verbose": "vitest run --project unit --project date-time --project ssr",
+    "test:watch": "vitest --project unit --project date-time --project ssr",
+    "test:ssr": "vitest run --project ssr",
     "test:visual": "vitest run --project visual",
     "test:visual:update": "vitest run --project visual --update",
     "test:stories": "vitest run --project storybook --project storybook-dark",
@@ -339,6 +341,13 @@
     "check:fix": "biome check --write .",
     "check:recipes": "bun run scripts/check-recipes.ts",
     "check:contrast": "bun run scripts/check-contrast.ts",
+    "check:api": "bun run scripts/api-snapshot.ts --check",
+    "check:size": "bun run scripts/check-size.ts",
+    "api:update": "bun run scripts/api-snapshot.ts",
+    "check:published": "bun run scripts/check-published.ts",
+    "check:consumer-resolution": "bun run scripts/check-consumer-resolution.ts",
+    "check:use-client": "bun run scripts/check-use-client.ts",
+    "clean:artifacts": "rm -rf coverage .vitest-attachments",
     "clean": "rm -rf dist node_modules *.tsbuildinfo",
     "clean:dist": "rm -rf dist"
   },
@@ -351,6 +360,7 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
     "@biomejs/biome": "2.4.15",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
@@ -373,12 +383,15 @@
     "@vitest/coverage-v8": "4.1.7",
     "@vitest/ui": "4.1.7",
     "commander": "^14.0.2",
+    "esbuild": "^0.28.2",
     "happy-dom": "^20.9.0",
     "monaco-editor": "^0.55.1",
     "playwright": "^1.57.0",
+    "publint": "^0.3.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "storybook": "^10.1.8",
     "tailwindcss": "^4",
     "typescript": "~5.7.2",

package/src/components/Badge/Badge.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
  * Geometry and behaviour only.
  *
  * Every colour reads a `--badge-*` component token whose value is decided by
- * src/theme/recipes/badge.css. That file is the mapping from
+ * src/components/Badge/badge.recipe.css. That file is the mapping from
  * `(variant, intent)` to a semantic token — the layer that used to be
  * `compoundVariants` here, where it was compiled into class-name literals and
  * unreachable from outside. Nothing in this file names a colour, which is the
@@ -85,7 +85,7 @@ export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
  * does not manage an accessible name of its own.
  *
  * Colour is not decided here: each `(variant, intent)` pairing resolves
- * through a `--badge-*` component token (src/theme/recipes/badge.css), the
+ * through a `--badge-*` component token (src/components/Badge/badge.recipe.css), the
  * same seam Button uses, so a consumer can re-point a cell without a
  * release.
  */

package/src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ import { Slot } from "../../internal/Slot";
  * Geometry and behaviour only.
  *
  * Every colour reads a `--button-*` component token whose value is decided by
- * src/theme/recipes/button.css. That file is the mapping from
+ * src/components/Button/button.recipe.css. That file is the mapping from
  * `(variant, intent, state)` to a semantic token — the layer that used to be
  * `compoundVariants` here, where it was compiled into class-name literals and
  * unreachable from outside. Nothing in this file names a colour, which is the

package/src/{theme/recipes/button.css → components/Button/button.recipe.css}

@@ -8,7 +8,7 @@
  * or intent the library never shipped.
  *
  * The grammar is `--button-{context}[-{state}]` — the same `context` and
- * `state` words the semantic layer uses (src/theme/schema.ts). Note what is
+ * `state` words the semantic layer uses (src/theming/vocabulary.ts). Note what is
  * deliberately *absent*: intent and weight never appear in a token name. They
  * select, via the `data-` attributes below. Putting them in the name
  * (`--button-bg-danger`) would restore the combinatorial explosion this layer
@@ -47,7 +47,7 @@
     --button-fg: var(--fg-on-brand);
   }
 
-  /* `neutral` means *no colour family* — the grey tiers. It used to resolve to
+  /* `neutral` means *no colour family* — the grey ramp. It used to resolve to
      the brand fill, which made `intent="neutral"` mean one thing on Button and
      another on Badge and Message, where it was already grey. Button
      was the outlier; this is the cell that ends that. A brand-coloured button

package/src/components/Calendar/Calendar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { useCallback, useMemo } from "react";
 import {

package/src/components/Calendar/CalendarView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * CalendarView — the Temporal-typed calendar grid.
  *

package/src/components/Calendar/calendar.hooks.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useMemo } from "react";
 import { addDays, formatDateMediumYear, isPlainDate, isSameDay, isSameMonth, startOfMonth, startOfWeek, Temporal, today } from "../../date-time";
 import type { DateRangeValue, DateSelectionState, DisabledDateMatcher, SelectionMode } from "./calendar.types";

package/src/components/Card/Card.tsx

@@ -1,27 +1,120 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
-  /** Optional header title - string or ReactNode */
-  title?: React.ReactNode;
-  /** Optional action element displayed on the right side of the header */
-  headerAction?: React.ReactNode;
-};
+/**
+ * Geometry only, plus the five `--card-*` component tokens.
+ *
+ * Every colour reads a `--card-*` token whose value is decided by
+ * src/components/Card/card.recipe.css. `size` stays here: it is pure geometry
+ * (padding, header gap, corner radius), not colour, so it has no reason to
+ * move — the same split Message.tsx documents.
+ *
+ * The ramp is a density axis, not a padding setting. `md` is the middle and
+ * the default at 16px, which is also where MUI's `CardContent` and
+ * Bootstrap's `.card-body` sit; two steps exist below it for surfaces that
+ * repeat dozens of times, and two above for surfaces that are the page.
+ *
+ *   xs  8px   dense data — table-row cards, compact tiles, many at once
+ *   sm  12px  list rows and secondary cards; a line or two of content
+ *   md  16px  a standalone content card. The one to reach for by default
+ *   lg  24px  primary or feature cards — a main panel, a form container
+ *   xl  32px  hero, empty-state and marketing surfaces
+ *
+ * Steps are 8 · 12 · 16 · 24 · 32, alternating x1.5 and x1.33; 20px is
+ * skipped deliberately as the value that breaks that rhythm.
+ *
+ * Radius scales with padding and never exceeds it — at `xs` a 12px corner
+ * against 8px of padding visibly crowds the content. The header gap flattens
+ * at both ends instead of tracking padding: it separates a title from an
+ * action control, so it has a usability floor and nothing to gain above 16px.
+ *
+ * Type is deliberately absent from the ramp. Message's `size` carries
+ * `text-xs` because Message knows what it holds; Card is a container for
+ * arbitrary children, `Heading` and `Body` included, so setting type here
+ * would fight the typography ramp at every call site. Containers set
+ * spacing; content components set type.
+ */
+export const cardVariants = cva(
+  // One literal, deliberately: `useSortedClasses --unsafe` strips the trailing
+  // space before a `+`, silently welding the last class of one fragment to the
+  // first of the next. A single string means the sorter has nothing to break.
+  "card border-(color:--card-border) border bg-(--card-bg) text-(--card-fg) shadow",
+  {
+    variants: {
+      size: {
+        xs: "rounded-md p-2",
+        sm: "rounded-lg p-3",
+        md: "rounded-xl p-4",
+        lg: "rounded-xl p-6",
+        xl: "rounded-2xl p-8",
+      },
+      interactive: {
+        true: "hover:border-(color:--card-border-hovered) focus-visible:outline-(color:--card-ring) cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      interactive: false,
+    },
+  }
+);
+
+/**
+ * Header geometry per size: the gap between title and action, and the space
+ * below it.
+ *
+ * A `<div>`, not a `<header>`. A `<header>` whose nearest sectioning ancestor
+ * is the body becomes a `banner` landmark, so two titled cards on one page
+ * produced two banners — axe's `landmark-no-duplicate-banner`. A card's header
+ * is not the page's banner, and the element bought nothing else here.
+ */
+const headerVariants = cva("flex items-start justify-between", {
+  variants: {
+    size: {
+      xs: "mb-2 gap-2",
+      sm: "mb-3 gap-2",
+      md: "mb-4 gap-3",
+      lg: "mb-4 gap-4",
+      xl: "mb-6 gap-4",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export type CardSize = NonNullable<VariantProps<typeof cardVariants>["size"]>;
+
+export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
+  Pick<VariantProps<typeof cardVariants>, "size"> & {
+    /** Optional header title - string or ReactNode */
+    title?: React.ReactNode;
+    /** Optional action element displayed on the right side of the header */
+    headerAction?: React.ReactNode;
+  };
 
 /**
  * Bordered, elevated container — the "this contains data" building block
  * (see docs/visual-hierarchy.md's Elevated tier). Renders a `<div>`, with an
- * optional `<header>` when `title` and/or `headerAction` is passed.
+ * optional header row when `title` and/or `headerAction` is passed.
+ *
+ * `size` is a density axis covering padding, header spacing and corner
+ * radius; `md` (16px) is the default. See `cardVariants` above for what each
+ * step is for and why type is not part of it.
  *
  * Passing `onClick` turns the whole card into a button: it gets
  * `role="button"`, `tabIndex={0}`, and both Enter and Space activate it, not
  * just a pointer click. Omit `onClick` for a purely presentational card.
  *
- * Colour reads `--card-*` component tokens (src/theme/recipes/card.css) —
+ * Colour reads `--card-*` component tokens (src/components/Card/card.recipe.css) —
  * the same seam Button and Badge use — so a consumer can re-point them
  * without a release.
  */
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, title, headerAction, children, onClick, onKeyDown, ...props }, ref) => {
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, size, title, headerAction, children, onClick, onKeyDown, ...props }, ref) => {
   const isInteractive = !!onClick;
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
@@ -36,22 +129,17 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ti
     // biome-ignore lint/a11y/noStaticElementInteractions: role="button" + tabIndex are added dynamically when onClick is present
     <div
       ref={ref}
-      className={cn(
-        "card border-(color:--card-border) rounded-xl border bg-(--card-bg) p-6 text-(--card-fg) shadow",
-        isInteractive &&
-          "hover:border-(color:--card-border-hovered) focus-visible:outline-(color:--card-ring) cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
-        className
-      )}
+      className={cn(cardVariants({ size, interactive: isInteractive }), className)}
       onClick={onClick}
       onKeyDown={handleKeyDown}
       {...(isInteractive && { role: "button", tabIndex: 0 })}
       {...props}
     >
       {(title || headerAction) && (
-        <header className="mb-4 flex items-start justify-between gap-4">
+        <div className={headerVariants({ size })}>
           {title && <div className="font-semibold">{title}</div>}
           {headerAction && <div className="shrink-0">{headerAction}</div>}
-        </header>
+        </div>
       )}
       {children}
     </div>

package/src/{theme/recipes/card.css → components/Card/card.recipe.css}

@@ -1,11 +1,16 @@
 /**
  * Card recipe — the component-token layer for Card.
  *
- * Card has no variant/intent axis — every instance uses the same fixed
+ * Card has no colour-bearing variant — every instance uses the same fixed
  * semantic tokens the old plain class string named directly. This file just
  * gives those tokens a name, so a consumer can re-point a cell or scope a
  * change to a subtree without a release.
  *
+ * Card's `size` axis is pure geometry (padding, header gap, radius) and stays
+ * in Card.tsx's `cva` call; nothing here concerns it. Same split as
+ * message.css — this layer is colour, and a consumer wanting a different
+ * spacing rhythm re-points Tailwind's `--spacing`, not a token here.
+ *
  * The grammar is `--card-{context}[-{state}]`, context in {bg, fg, border,
  * ring} — the same words the semantic layer uses. `--card-ring` backs the
  * `outline-*` utilities on the interactive (clickable) variant: it plays the

package/src/components/Card/index.ts

@@ -1 +1 @@
-export { Card, type CardProps } from "./Card";
+export { Card, type CardProps, type CardSize, cardVariants } from "./Card";

package/src/components/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { Label } from "@sixthshift/design-system/label";
 import { cn } from "@sixthshift/design-system/utils";

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Checkbox } from "@sixthshift/design-system/checkbox";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";

package/src/components/Code/Editor/Editor.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import MonacoEditor from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import type { HTMLAttributes } from "react";

package/src/components/Code/Workspace/StatusBar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { HTMLAttributes, ReactNode } from "react";
 
 export type StatusBarItem = {

package/src/components/Code/Workspace/Toolbar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { HTMLAttributes, ReactNode } from "react";
 import { Button } from "../../Button";
 

package/src/components/Code/Workspace/Workspace.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { HTMLAttributes, ReactNode } from "react";
 import { useState } from "react";
 import { Editor } from "../Editor";

package/src/components/DatePicker/DatePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
@@ -19,6 +21,7 @@ import {
   toISODateRange,
 } from "../../date-time";
 import { PickerField } from "../../internal";
+import { useEscapeLayer } from "../../internal/escapeLayers";
 import { CalendarView } from "../Calendar/CalendarView";
 import { isDateDisabled } from "../Calendar/calendar.hooks";
 import type { PresetOption } from "../Calendar/calendar.types";
@@ -236,6 +239,10 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
 
   const click = useClick(context);
   const dismiss = useDismiss(context);
+
+  // While open, an Escape press closes this picker's popover and must not
+  // also close a Modal/Sheet it is rendered inside.
+  useEscapeLayer(open);
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
 
   // IDs for accessibility

package/src/components/DatePicker/DateSegments.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { type Temporal, today, toISODate } from "../../date-time";
 import { SegmentedField, type SegmentSpec, type SegmentValues } from "../../internal";
 import type { DateSegmentOrder } from "./datepicker.types";

package/src/components/DatePicker/datepicker.hooks.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback } from "react";
 import { formatDateMediumYear, isPlainDate, Temporal } from "../../date-time";
 import type { DatePickerMode, DateRangeValue, DateSelectionState, DisabledDateMatcher } from "./datepicker.types";

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { useMemo } from "react";
 import { addDaysISO, startOfMonthISO, todayISO } from "../../date-time";

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
@@ -13,8 +15,8 @@ import {
   today,
   toISOInstantOrUndefined,
 } from "../../date-time";
-
 import { PickerField } from "../../internal";
+import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { CalendarView } from "../Calendar/CalendarView";
 import { isDateDisabled } from "../Calendar/calendar.hooks";
@@ -251,6 +253,10 @@ export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerPro
 
   const click = useClick(context);
   const dismiss = useDismiss(context);
+
+  // While open, an Escape press closes this picker's popover and must not
+  // also close a Modal/Sheet it is rendered inside.
+  useEscapeLayer(open);
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
 
   // IDs for accessibility

package/src/components/DateTimePicker/DateTimeSegments.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Temporal } from "../../date-time";
 import { SegmentedField, type SegmentSpec, type SegmentValues } from "../../internal";
 import { dateFromSegments, dateSpec, dateToSegments, parseDatePasteIn } from "../DatePicker/DateSegments";