@sixthshift/design-system 0.5.0 → 0.7.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.5.0",
+  "version": "0.7.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,11 +318,12 @@
   },
   "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 --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",
@@ -340,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"
   },
@@ -352,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",
@@ -374,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
@@ -55,23 +55,29 @@ export type BadgeIntent = Loose<BadgeIntentName>;
 export type BadgeRecipeProps = VariantProps<typeof badgeVariants> & {
   variant?: BadgeVariant | undefined;
   intent?: BadgeIntent | undefined;
+  /** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
+  brand?: string | undefined;
   className?: string | undefined;
 };
 
 /**
- * The class string plus the two attributes the recipe selects on.
+ * The class string plus the attributes the recipe selects on. `data-brand` is
+ * omitted unless `brand` is set, same as `buttonRecipe`.
  */
-export function badgeRecipe({ variant = "solid", intent = "brand", className }: BadgeRecipeProps) {
+export function badgeRecipe({ variant = "solid", intent = "brand", brand, className }: BadgeRecipeProps) {
   return {
     className: cn(variantStructure[variant], badgeVariants({ className })),
     "data-variant": variant,
     "data-intent": intent,
+    "data-brand": brand,
   };
 }
 
 export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
   variant?: BadgeVariant | undefined;
   intent?: BadgeIntent | undefined;
+  /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
+  brand?: string | undefined;
 };
 
 /**
@@ -85,12 +91,12 @@ 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.
  */
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant = "solid", intent = "brand", ...props }, ref) => {
-  return <span ref={ref} {...badgeRecipe({ variant, intent, className })} {...props} />;
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant = "solid", intent = "brand", brand, ...props }, ref) => {
+  return <span ref={ref} {...badgeRecipe({ variant, intent, brand, className })} {...props} />;
 });
 Badge.displayName = "Badge";
 

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
@@ -86,18 +86,23 @@ export type ButtonIntent = Loose<ButtonIntentName>;
 export type ButtonRecipeProps = VariantProps<typeof buttonVariants> & {
   variant?: ButtonVariant | undefined;
   intent?: ButtonIntent | undefined;
+  /** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
+  brand?: string | undefined;
   iconOnly?: boolean | undefined;
   className?: string | undefined;
 };
 
 /**
- * The class string plus the two attributes the recipe selects on.
+ * The class string plus the attributes the recipe selects on.
+ *
+ * `data-brand` is only emitted when `brand` is set: `undefined` makes React
+ * omit the attribute, so the element takes its brand from its surroundings.
  *
  * Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
  * data attributes are half the contract now, so anything reusing that look has
  * to emit them as well or it lands on the recipe's floor instead of a cell.
  */
-export function buttonRecipe({ variant = "solid", intent = "neutral", size, iconOnly = false, className }: ButtonRecipeProps) {
+export function buttonRecipe({ variant = "solid", intent = "neutral", brand, size, iconOnly = false, className }: ButtonRecipeProps) {
   return {
     className: cn(
       variantStructure[variant],
@@ -106,6 +111,7 @@ export function buttonRecipe({ variant = "solid", intent = "neutral", size, icon
     ),
     "data-variant": variant,
     "data-intent": intent,
+    "data-brand": brand,
   };
 }
 
@@ -113,6 +119,12 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants> & {
     variant?: ButtonVariant | undefined;
     intent?: ButtonIntent | undefined;
+    /**
+     * Name of a brand the theme defines, rendered as `data-brand`. Re-points
+     * every brand token on this element, so `intent="brand"` takes that brand's
+     * colour. Omitted, the button follows the nearest `data-brand` ancestor.
+     */
+    brand?: string | undefined;
     /** Square the button at its current size, for an icon with no label. */
     iconOnly?: boolean;
     asChild?: boolean;
@@ -147,15 +159,23 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  * `aria-label`, since there is no text to name it. It is a separate prop rather
  * than a size, so `size="sm" iconOnly` is expressible.
  *
+ * `brand` scopes the `brand` intent to one of the theme's named brands
+ * (`<Button intent="brand" brand="mint">`), for a theme with more than one
+ * brand colour. It renders `data-brand` and nothing else; the theme's CSS gives
+ * the name meaning, and an unknown name falls back to the surrounding brand.
+ *
  * `asChild` renders the child element with Button's styling instead of a
  * `<button>`, for links that should look like buttons. `loading` shows a spinner
  * and disables the control, so it does not need `disabled` as well.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = "solid", intent = "neutral", size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+  (
+    { className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
-      <Comp {...buttonRecipe({ variant, intent, size, iconOnly, className })} ref={ref} disabled={disabled || loading} {...props}>
+      <Comp {...buttonRecipe({ variant, intent, brand, size, iconOnly, className })} ref={ref} disabled={disabled || loading} {...props}>
         {loading ? (
           <>
             <svg className="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">

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,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -6,7 +8,7 @@ import * as React from "react";
  * Geometry only, plus the five `--card-*` component tokens.
  *
  * Every colour reads a `--card-*` token whose value is decided by
- * src/theme/recipes/card.css. `size` stays here: it is pure geometry
+ * 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.
  *
@@ -108,7 +110,7 @@ export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
  * `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.
  */

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,8 @@ import {
   toISODateRange,
 } from "../../date-time";
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
+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 +240,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
@@ -532,6 +540,8 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
             role="dialog"
             aria-label="Choose date"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

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,9 @@ import {
   today,
   toISOInstantOrUndefined,
 } from "../../date-time";
-
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
+import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { CalendarView } from "../Calendar/CalendarView";
 import { isDateDisabled } from "../Calendar/calendar.hooks";
@@ -251,6 +254,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
@@ -404,6 +411,8 @@ export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerPro
             role="dialog"
             aria-label="Choose date and time"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

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";

package/src/components/DateTimeRangePicker/DateTimeRangePicker.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";
@@ -16,8 +18,9 @@ import {
   toISOInstant,
   toISOInstantRange,
 } from "../../date-time";
-
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
+import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { CalendarView } from "../Calendar/CalendarView";
 import { isDateDisabled } from "../Calendar/calendar.hooks";
@@ -412,6 +415,10 @@ export const DateTimeRangePicker = React.forwardRef<HTMLDivElement, DateTimeRang
 
   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
@@ -624,6 +631,8 @@ export const DateTimeRangePicker = React.forwardRef<HTMLDivElement, DateTimeRang
             role="dialog"
             aria-label="Choose date and time range"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >