@vantageos/mosaic 0.1.2 → 0.2.0

package/dist/preact/artifacts.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=artifacts.js.map
+//# sourceMappingURL=artifacts.js.map

package/dist/preact/artifacts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"artifacts.js"}

package/dist/preact/confirmation.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=confirmation.js.map
+//# sourceMappingURL=confirmation.js.map

package/dist/preact/confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"confirmation.js"}

package/dist/preact/display.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=display.js.map
+//# sourceMappingURL=display.js.map

package/dist/preact/display.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"display.js"}

package/dist/preact/index.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/preact/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/preact/input.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/preact/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"input.js"}

package/dist/preact/media.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=media.js.map
+//# sourceMappingURL=media.js.map

package/dist/preact/media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"media.js"}

package/dist/preact/progress.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=progress.js.map
+//# sourceMappingURL=progress.js.map

package/dist/preact/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"progress.js"}

package/dist/react/artifacts.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=artifacts.cjs.map
+//# sourceMappingURL=artifacts.cjs.map

package/dist/react/artifacts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"artifacts.cjs"}

package/dist/react/artifacts.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/artifacts.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/artifacts.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=artifacts.js.map
+//# sourceMappingURL=artifacts.js.map

package/dist/react/artifacts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"artifacts.js"}

package/dist/react/confirmation.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=confirmation.cjs.map
+//# sourceMappingURL=confirmation.cjs.map

package/dist/react/confirmation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"confirmation.cjs"}

package/dist/react/confirmation.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/confirmation.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/confirmation.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=confirmation.js.map
+//# sourceMappingURL=confirmation.js.map

package/dist/react/confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"confirmation.js"}

package/dist/react/display.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=display.cjs.map
+//# sourceMappingURL=display.cjs.map

package/dist/react/display.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"display.cjs"}

package/dist/react/display.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/display.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/display.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=display.js.map
+//# sourceMappingURL=display.js.map

package/dist/react/display.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"display.js"}

package/dist/react/index.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/react/index.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/index.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/react/input.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=input.cjs.map
+//# sourceMappingURL=input.cjs.map

package/dist/react/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"input.cjs"}

package/dist/react/input.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/input.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/input.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/react/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"input.js"}

package/dist/react/media.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=media.cjs.map
+//# sourceMappingURL=media.cjs.map

package/dist/react/media.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"media.cjs"}

package/dist/react/media.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/media.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/media.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=media.js.map
+//# sourceMappingURL=media.js.map

package/dist/react/media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"media.js"}

package/dist/react/progress.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=progress.cjs.map
+//# sourceMappingURL=progress.cjs.map

package/dist/react/progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"progress.cjs"}

package/dist/react/progress.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/progress.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/react/progress.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=progress.js.map
+//# sourceMappingURL=progress.js.map

package/dist/react/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"progress.js"}

package/dist/tokens.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// ../mosaic-tokens/src/tokens.ts
+var colors = Object.freeze({
+  "success-50": "oklch(0.965 0.040 145)",
+  "success-500": "oklch(0.660 0.180 145)",
+  "success-700": "oklch(0.470 0.140 145)",
+  "warning-50": "oklch(0.975 0.045 85)",
+  "warning-500": "oklch(0.770 0.170 85)",
+  "warning-700": "oklch(0.560 0.145 65)",
+  "danger-50": "oklch(0.965 0.035 25)",
+  "danger-500": "oklch(0.640 0.205 25)",
+  "danger-700": "oklch(0.460 0.180 25)",
+  "info-50": "oklch(0.970 0.035 250)",
+  "info-500": "oklch(0.650 0.170 250)",
+  "info-700": "oklch(0.460 0.150 250)",
+  "neutral-50": "oklch(0.980 0.005 250)",
+  "neutral-500": "oklch(0.580 0.012 250)",
+  "neutral-700": "oklch(0.380 0.010 250)"
+});
+var spacing = Object.freeze({
+  "1": "4px",
+  "2": "8px",
+  "3": "12px",
+  "4": "16px",
+  "6": "24px",
+  "8": "32px",
+  "12": "48px",
+  "16": "64px"
+});
+var typography = Object.freeze({
+  "size-xs": "12px",
+  "size-sm": "14px",
+  "size-base": "16px",
+  "size-lg": "20px",
+  "size-xl": "24px",
+  "size-2xl": "30px",
+  "size-3xl": "38px",
+  "lh-tight": "1.2",
+  "lh-normal": "1.5",
+  "lh-relaxed": "1.6",
+  "weight-regular": "400",
+  "weight-medium": "500",
+  "weight-semibold": "600",
+  "weight-bold": "700"
+});
+var shadows = Object.freeze({
+  "0": "none",
+  "1": "0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)",
+  "2": "0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)",
+  "3": "0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)",
+  "4": "0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)",
+  "5": "0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)"
+});
+var radii = Object.freeze({
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  full: "9999px"
+});
+var motion = Object.freeze({
+  "duration-fast": "75ms",
+  "duration-base": "150ms",
+  "duration-slow": "300ms",
+  "easing-linear": "linear",
+  "easing-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+  "easing-in": "cubic-bezier(0.4, 0, 1, 1)",
+  "easing-out": "cubic-bezier(0, 0, 0.2, 1)",
+  "easing-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+});
+var tokens = Object.freeze({
+  colors,
+  spacing,
+  typography,
+  shadows,
+  radii,
+  motion
+});
+var tokens_default = tokens;
+
+exports.colors = colors;
+exports.default = tokens_default;
+exports.motion = motion;
+exports.radii = radii;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.tokens = tokens;
+exports.typography = typography;
+//# sourceMappingURL=tokens.cjs.map
+//# sourceMappingURL=tokens.cjs.map

package/dist/tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../mosaic-tokens/src/tokens.ts"],"names":[],"mappings":";;;;;AA8BO,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe,wBAAA;AAAA,EACf,YAAA,EAAc,uBAAA;AAAA,EACd,aAAA,EAAe,uBAAA;AAAA,EACf,aAAA,EAAe,uBAAA;AAAA,EACf,WAAA,EAAa,uBAAA;AAAA,EACb,YAAA,EAAc,uBAAA;AAAA,EACd,YAAA,EAAc,uBAAA;AAAA,EACd,SAAA,EAAW,wBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,UAAA,EAAY,wBAAA;AAAA,EACZ,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,UAAA,GAAyC,OAAO,MAAA,CAAO;AAAA,EAClE,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,WAAA,EAAa,MAAA;AAAA,EACb,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,KAAA;AAAA,EACZ,WAAA,EAAa,KAAA;AAAA,EACb,YAAA,EAAc,KAAA;AAAA,EACd,gBAAA,EAAkB,KAAA;AAAA,EAClB,eAAA,EAAiB,KAAA;AAAA,EACjB,iBAAA,EAAmB,KAAA;AAAA,EACnB,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,2CAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,6FAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAC;AAGM,IAAM,KAAA,GAA+B,OAAO,MAAA,CAAO;AAAA,EACxD,IAAA,EAAM,KAAA;AAAA,EACN,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,eAAA,EAAiB,MAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,QAAA;AAAA,EACjB,aAAA,EAAe,8BAAA;AAAA,EACf,WAAA,EAAa,4BAAA;AAAA,EACb,YAAA,EAAc,4BAAA;AAAA,EACd,eAAA,EAAiB;AACnB,CAAC;AAEM,IAAM,MAAA,GAAuB,OAAO,MAAA,CAAO;AAAA,EAChD,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAC;AAED,IAAO,cAAA,GAAQ","file":"tokens.cjs","sourcesContent":["/**\n * @vantageos/mosaic-tokens — design tokens (T3-B implementation).\n *\n * Framework-free, OKLCH-based, mirror of the CSS custom properties in\n * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4\n * + @theme inline) or the JS surface (typed runtime access in JSX styles,\n * Storybook stories, Playwright assertions, snapshot tests).\n *\n * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.\n *\n * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):\n *   - Every CSS var has a JS counterpart (and vice versa).\n *   - Color shades 50 < 500 < 700 monotonic luminance.\n *   - Spacing scale ascending, ratio 1.5x average (4 → 64 px).\n *   - Typography scale uses 1.25x ratio (12 → 38 px).\n *   - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.\n *   - Radii strictly ascending (none → full).\n */\n\nexport interface MosaicTokens {\n  readonly colors: Readonly<Record<string, string>>;\n  readonly spacing: Readonly<Record<string, string>>;\n  readonly typography: Readonly<Record<string, string>>;\n  readonly shadows: Readonly<Record<string, string>>;\n  readonly radii: Readonly<Record<string, string>>;\n  readonly motion: Readonly<Record<string, string>>;\n}\n\n// Colors — semantic statuses × 3 shades (50/500/700), OKLCH.\n// 50 = surface tint, 500 = brand body, 700 = accessible contrast on light bg.\nexport const colors: MosaicTokens[\"colors\"] = Object.freeze({\n  \"success-50\": \"oklch(0.965 0.040 145)\",\n  \"success-500\": \"oklch(0.660 0.180 145)\",\n  \"success-700\": \"oklch(0.470 0.140 145)\",\n  \"warning-50\": \"oklch(0.975 0.045 85)\",\n  \"warning-500\": \"oklch(0.770 0.170 85)\",\n  \"warning-700\": \"oklch(0.560 0.145 65)\",\n  \"danger-50\": \"oklch(0.965 0.035 25)\",\n  \"danger-500\": \"oklch(0.640 0.205 25)\",\n  \"danger-700\": \"oklch(0.460 0.180 25)\",\n  \"info-50\": \"oklch(0.970 0.035 250)\",\n  \"info-500\": \"oklch(0.650 0.170 250)\",\n  \"info-700\": \"oklch(0.460 0.150 250)\",\n  \"neutral-50\": \"oklch(0.980 0.005 250)\",\n  \"neutral-500\": \"oklch(0.580 0.012 250)\",\n  \"neutral-700\": \"oklch(0.380 0.010 250)\",\n});\n\n// Spacing — 4 → 64 px scale.\nexport const spacing: MosaicTokens[\"spacing\"] = Object.freeze({\n  \"1\": \"4px\",\n  \"2\": \"8px\",\n  \"3\": \"12px\",\n  \"4\": \"16px\",\n  \"6\": \"24px\",\n  \"8\": \"32px\",\n  \"12\": \"48px\",\n  \"16\": \"64px\",\n});\n\n// Typography — 1.25x font-size scale + line-height + weight.\nexport const typography: MosaicTokens[\"typography\"] = Object.freeze({\n  \"size-xs\": \"12px\",\n  \"size-sm\": \"14px\",\n  \"size-base\": \"16px\",\n  \"size-lg\": \"20px\",\n  \"size-xl\": \"24px\",\n  \"size-2xl\": \"30px\",\n  \"size-3xl\": \"38px\",\n  \"lh-tight\": \"1.2\",\n  \"lh-normal\": \"1.5\",\n  \"lh-relaxed\": \"1.6\",\n  \"weight-regular\": \"400\",\n  \"weight-medium\": \"500\",\n  \"weight-semibold\": \"600\",\n  \"weight-bold\": \"700\",\n});\n\n// Shadows — 6 elevation steps, OKLCH neutral tint.\nexport const shadows: MosaicTokens[\"shadows\"] = Object.freeze({\n  \"0\": \"none\",\n  \"1\": \"0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)\",\n  \"2\": \"0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)\",\n  \"3\": \"0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)\",\n  \"4\": \"0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)\",\n  \"5\": \"0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)\",\n});\n\n// Radii — strictly ascending (none → full).\nexport const radii: MosaicTokens[\"radii\"] = Object.freeze({\n  none: \"0px\",\n  xs: \"2px\",\n  sm: \"4px\",\n  md: \"6px\",\n  lg: \"8px\",\n  xl: \"12px\",\n  full: \"9999px\",\n});\n\n// Motion — durations + easing curves.\nexport const motion: MosaicTokens[\"motion\"] = Object.freeze({\n  \"duration-fast\": \"75ms\",\n  \"duration-base\": \"150ms\",\n  \"duration-slow\": \"300ms\",\n  \"easing-linear\": \"linear\",\n  \"easing-ease\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  \"easing-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n  \"easing-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n  \"easing-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n});\n\nexport const tokens: MosaicTokens = Object.freeze({\n  colors,\n  spacing,\n  typography,\n  shadows,\n  radii,\n  motion,\n});\n\nexport default tokens;\n"]}

package/dist/tokens.js

@@ -0,0 +1,84 @@
+// ../mosaic-tokens/src/tokens.ts
+var colors = Object.freeze({
+  "success-50": "oklch(0.965 0.040 145)",
+  "success-500": "oklch(0.660 0.180 145)",
+  "success-700": "oklch(0.470 0.140 145)",
+  "warning-50": "oklch(0.975 0.045 85)",
+  "warning-500": "oklch(0.770 0.170 85)",
+  "warning-700": "oklch(0.560 0.145 65)",
+  "danger-50": "oklch(0.965 0.035 25)",
+  "danger-500": "oklch(0.640 0.205 25)",
+  "danger-700": "oklch(0.460 0.180 25)",
+  "info-50": "oklch(0.970 0.035 250)",
+  "info-500": "oklch(0.650 0.170 250)",
+  "info-700": "oklch(0.460 0.150 250)",
+  "neutral-50": "oklch(0.980 0.005 250)",
+  "neutral-500": "oklch(0.580 0.012 250)",
+  "neutral-700": "oklch(0.380 0.010 250)"
+});
+var spacing = Object.freeze({
+  "1": "4px",
+  "2": "8px",
+  "3": "12px",
+  "4": "16px",
+  "6": "24px",
+  "8": "32px",
+  "12": "48px",
+  "16": "64px"
+});
+var typography = Object.freeze({
+  "size-xs": "12px",
+  "size-sm": "14px",
+  "size-base": "16px",
+  "size-lg": "20px",
+  "size-xl": "24px",
+  "size-2xl": "30px",
+  "size-3xl": "38px",
+  "lh-tight": "1.2",
+  "lh-normal": "1.5",
+  "lh-relaxed": "1.6",
+  "weight-regular": "400",
+  "weight-medium": "500",
+  "weight-semibold": "600",
+  "weight-bold": "700"
+});
+var shadows = Object.freeze({
+  "0": "none",
+  "1": "0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)",
+  "2": "0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)",
+  "3": "0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)",
+  "4": "0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)",
+  "5": "0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)"
+});
+var radii = Object.freeze({
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  full: "9999px"
+});
+var motion = Object.freeze({
+  "duration-fast": "75ms",
+  "duration-base": "150ms",
+  "duration-slow": "300ms",
+  "easing-linear": "linear",
+  "easing-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+  "easing-in": "cubic-bezier(0.4, 0, 1, 1)",
+  "easing-out": "cubic-bezier(0, 0, 0.2, 1)",
+  "easing-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+});
+var tokens = Object.freeze({
+  colors,
+  spacing,
+  typography,
+  shadows,
+  radii,
+  motion
+});
+var tokens_default = tokens;
+
+export { colors, tokens_default as default, motion, radii, shadows, spacing, tokens, typography };
+//# sourceMappingURL=tokens.js.map
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../mosaic-tokens/src/tokens.ts"],"names":[],"mappings":";AA8BO,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe,wBAAA;AAAA,EACf,YAAA,EAAc,uBAAA;AAAA,EACd,aAAA,EAAe,uBAAA;AAAA,EACf,aAAA,EAAe,uBAAA;AAAA,EACf,WAAA,EAAa,uBAAA;AAAA,EACb,YAAA,EAAc,uBAAA;AAAA,EACd,YAAA,EAAc,uBAAA;AAAA,EACd,SAAA,EAAW,wBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,UAAA,EAAY,wBAAA;AAAA,EACZ,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,UAAA,GAAyC,OAAO,MAAA,CAAO;AAAA,EAClE,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,WAAA,EAAa,MAAA;AAAA,EACb,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,KAAA;AAAA,EACZ,WAAA,EAAa,KAAA;AAAA,EACb,YAAA,EAAc,KAAA;AAAA,EACd,gBAAA,EAAkB,KAAA;AAAA,EAClB,eAAA,EAAiB,KAAA;AAAA,EACjB,iBAAA,EAAmB,KAAA;AAAA,EACnB,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,2CAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,6FAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAC;AAGM,IAAM,KAAA,GAA+B,OAAO,MAAA,CAAO;AAAA,EACxD,IAAA,EAAM,KAAA;AAAA,EACN,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,eAAA,EAAiB,MAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,QAAA;AAAA,EACjB,aAAA,EAAe,8BAAA;AAAA,EACf,WAAA,EAAa,4BAAA;AAAA,EACb,YAAA,EAAc,4BAAA;AAAA,EACd,eAAA,EAAiB;AACnB,CAAC;AAEM,IAAM,MAAA,GAAuB,OAAO,MAAA,CAAO;AAAA,EAChD,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAC;AAED,IAAO,cAAA,GAAQ","file":"tokens.js","sourcesContent":["/**\n * @vantageos/mosaic-tokens — design tokens (T3-B implementation).\n *\n * Framework-free, OKLCH-based, mirror of the CSS custom properties in\n * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4\n * + @theme inline) or the JS surface (typed runtime access in JSX styles,\n * Storybook stories, Playwright assertions, snapshot tests).\n *\n * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.\n *\n * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):\n *   - Every CSS var has a JS counterpart (and vice versa).\n *   - Color shades 50 < 500 < 700 monotonic luminance.\n *   - Spacing scale ascending, ratio 1.5x average (4 → 64 px).\n *   - Typography scale uses 1.25x ratio (12 → 38 px).\n *   - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.\n *   - Radii strictly ascending (none → full).\n */\n\nexport interface MosaicTokens {\n  readonly colors: Readonly<Record<string, string>>;\n  readonly spacing: Readonly<Record<string, string>>;\n  readonly typography: Readonly<Record<string, string>>;\n  readonly shadows: Readonly<Record<string, string>>;\n  readonly radii: Readonly<Record<string, string>>;\n  readonly motion: Readonly<Record<string, string>>;\n}\n\n// Colors — semantic statuses × 3 shades (50/500/700), OKLCH.\n// 50 = surface tint, 500 = brand body, 700 = accessible contrast on light bg.\nexport const colors: MosaicTokens[\"colors\"] = Object.freeze({\n  \"success-50\": \"oklch(0.965 0.040 145)\",\n  \"success-500\": \"oklch(0.660 0.180 145)\",\n  \"success-700\": \"oklch(0.470 0.140 145)\",\n  \"warning-50\": \"oklch(0.975 0.045 85)\",\n  \"warning-500\": \"oklch(0.770 0.170 85)\",\n  \"warning-700\": \"oklch(0.560 0.145 65)\",\n  \"danger-50\": \"oklch(0.965 0.035 25)\",\n  \"danger-500\": \"oklch(0.640 0.205 25)\",\n  \"danger-700\": \"oklch(0.460 0.180 25)\",\n  \"info-50\": \"oklch(0.970 0.035 250)\",\n  \"info-500\": \"oklch(0.650 0.170 250)\",\n  \"info-700\": \"oklch(0.460 0.150 250)\",\n  \"neutral-50\": \"oklch(0.980 0.005 250)\",\n  \"neutral-500\": \"oklch(0.580 0.012 250)\",\n  \"neutral-700\": \"oklch(0.380 0.010 250)\",\n});\n\n// Spacing — 4 → 64 px scale.\nexport const spacing: MosaicTokens[\"spacing\"] = Object.freeze({\n  \"1\": \"4px\",\n  \"2\": \"8px\",\n  \"3\": \"12px\",\n  \"4\": \"16px\",\n  \"6\": \"24px\",\n  \"8\": \"32px\",\n  \"12\": \"48px\",\n  \"16\": \"64px\",\n});\n\n// Typography — 1.25x font-size scale + line-height + weight.\nexport const typography: MosaicTokens[\"typography\"] = Object.freeze({\n  \"size-xs\": \"12px\",\n  \"size-sm\": \"14px\",\n  \"size-base\": \"16px\",\n  \"size-lg\": \"20px\",\n  \"size-xl\": \"24px\",\n  \"size-2xl\": \"30px\",\n  \"size-3xl\": \"38px\",\n  \"lh-tight\": \"1.2\",\n  \"lh-normal\": \"1.5\",\n  \"lh-relaxed\": \"1.6\",\n  \"weight-regular\": \"400\",\n  \"weight-medium\": \"500\",\n  \"weight-semibold\": \"600\",\n  \"weight-bold\": \"700\",\n});\n\n// Shadows — 6 elevation steps, OKLCH neutral tint.\nexport const shadows: MosaicTokens[\"shadows\"] = Object.freeze({\n  \"0\": \"none\",\n  \"1\": \"0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)\",\n  \"2\": \"0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)\",\n  \"3\": \"0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)\",\n  \"4\": \"0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)\",\n  \"5\": \"0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)\",\n});\n\n// Radii — strictly ascending (none → full).\nexport const radii: MosaicTokens[\"radii\"] = Object.freeze({\n  none: \"0px\",\n  xs: \"2px\",\n  sm: \"4px\",\n  md: \"6px\",\n  lg: \"8px\",\n  xl: \"12px\",\n  full: \"9999px\",\n});\n\n// Motion — durations + easing curves.\nexport const motion: MosaicTokens[\"motion\"] = Object.freeze({\n  \"duration-fast\": \"75ms\",\n  \"duration-base\": \"150ms\",\n  \"duration-slow\": \"300ms\",\n  \"easing-linear\": \"linear\",\n  \"easing-ease\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  \"easing-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n  \"easing-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n  \"easing-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n});\n\nexport const tokens: MosaicTokens = Object.freeze({\n  colors,\n  spacing,\n  typography,\n  shadows,\n  radii,\n  motion,\n});\n\nexport default tokens;\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vantageos/mosaic",
-  "version": "0.1.2",
-  "description": "Fleet-wide MCP UI design system — 6-category taxonomy, Zod-validated, registry-gated, streaming-ready.",
+  "version": "0.2.0",
+  "description": "Fleet-wide MCP UI design system — 6-category taxonomy, Zod-validated, registry-gated, streaming-ready, cross-runtime (React 19 + Preact 10).",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -42,6 +42,74 @@
       "require": "./dist/media.cjs",
       "types": "./dist/media.d.ts"
     },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./react/progress": {
+      "import": "./dist/react/progress.js",
+      "require": "./dist/react/progress.cjs",
+      "types": "./dist/react/progress.d.ts"
+    },
+    "./react/input": {
+      "import": "./dist/react/input.js",
+      "require": "./dist/react/input.cjs",
+      "types": "./dist/react/input.d.ts"
+    },
+    "./react/display": {
+      "import": "./dist/react/display.js",
+      "require": "./dist/react/display.cjs",
+      "types": "./dist/react/display.d.ts"
+    },
+    "./react/artifacts": {
+      "import": "./dist/react/artifacts.js",
+      "require": "./dist/react/artifacts.cjs",
+      "types": "./dist/react/artifacts.d.ts"
+    },
+    "./react/confirmation": {
+      "import": "./dist/react/confirmation.js",
+      "require": "./dist/react/confirmation.cjs",
+      "types": "./dist/react/confirmation.d.ts"
+    },
+    "./react/media": {
+      "import": "./dist/react/media.js",
+      "require": "./dist/react/media.cjs",
+      "types": "./dist/react/media.d.ts"
+    },
+    "./preact": {
+      "import": "./dist/preact/index.js",
+      "types": "./dist/preact/index.d.ts"
+    },
+    "./preact/progress": {
+      "import": "./dist/preact/progress.js",
+      "types": "./dist/preact/progress.d.ts"
+    },
+    "./preact/input": {
+      "import": "./dist/preact/input.js",
+      "types": "./dist/preact/input.d.ts"
+    },
+    "./preact/display": {
+      "import": "./dist/preact/display.js",
+      "types": "./dist/preact/display.d.ts"
+    },
+    "./preact/artifacts": {
+      "import": "./dist/preact/artifacts.js",
+      "types": "./dist/preact/artifacts.d.ts"
+    },
+    "./preact/confirmation": {
+      "import": "./dist/preact/confirmation.js",
+      "types": "./dist/preact/confirmation.d.ts"
+    },
+    "./preact/media": {
+      "import": "./dist/preact/media.js",
+      "types": "./dist/preact/media.d.ts"
+    },
+    "./tokens": {
+      "import": "./dist/tokens.js",
+      "require": "./dist/tokens.cjs",
+      "types": "./dist/tokens.d.ts"
+    },
     "./server": {
       "import": "./dist/server.js",
       "require": "./dist/server.cjs",
@@ -57,6 +125,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@mcp-ui/client": "7.1.1",
+    "preact": "^10.25.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "15.5.2",
@@ -66,6 +135,15 @@
     "@mcp-ui/client": {
       "optional": true
     },
+    "preact": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
     "react-i18next": {
       "optional": true
     },
@@ -79,7 +157,8 @@
     "@tanstack/react-virtual": "3.13.6",
     "dompurify": "3.2.4",
     "marked": "15.0.7",
-    "zod": "3.25.28"
+    "zod": "3.25.28",
+    "@vantageos/mosaic-tokens": "0.2.0"
   },
   "devDependencies": {
     "@babel/parser": "7.29.7",
@@ -102,6 +181,7 @@
     "@vitejs/plugin-react": "4.3.4",
     "@vitest/coverage-v8": "3.2.2",
     "jsdom": "26.0.0",
+    "preact": "10.27.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "size-limit": "11.2.0",

package/registry.yaml

@@ -1,4 +1,4 @@
-version: "0.1.0"
+version: "0.2.0"
 components:
   - name: ProgressBar
     category: progress