@mosaic-media/sdui-react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/LICENSE +661 -0
  2. package/README.md +54 -0
  3. package/dist/components/controls.d.ts +34 -0
  4. package/dist/components/controls.d.ts.map +1 -0
  5. package/dist/components/controls.js +93 -0
  6. package/dist/components/controls.js.map +1 -0
  7. package/dist/components/definitions.d.ts +3 -0
  8. package/dist/components/definitions.d.ts.map +1 -0
  9. package/dist/components/definitions.js +494 -0
  10. package/dist/components/definitions.js.map +1 -0
  11. package/dist/components/definitions.layout.d.ts +3 -0
  12. package/dist/components/definitions.layout.d.ts.map +1 -0
  13. package/dist/components/definitions.layout.js +197 -0
  14. package/dist/components/definitions.layout.js.map +1 -0
  15. package/dist/components/feedback/Unknown.d.ts +4 -0
  16. package/dist/components/feedback/Unknown.d.ts.map +1 -0
  17. package/dist/components/feedback/Unknown.js +13 -0
  18. package/dist/components/feedback/Unknown.js.map +1 -0
  19. package/dist/components/feedback.d.ts +6 -0
  20. package/dist/components/feedback.d.ts.map +1 -0
  21. package/dist/components/feedback.js +10 -0
  22. package/dist/components/feedback.js.map +1 -0
  23. package/dist/components/host.d.ts +11 -0
  24. package/dist/components/host.d.ts.map +1 -0
  25. package/dist/components/host.js +15 -0
  26. package/dist/components/host.js.map +1 -0
  27. package/dist/components/index.d.ts +3 -0
  28. package/dist/components/index.d.ts.map +1 -0
  29. package/dist/components/index.js +60 -0
  30. package/dist/components/index.js.map +1 -0
  31. package/dist/components/layout.d.ts +9 -0
  32. package/dist/components/layout.d.ts.map +1 -0
  33. package/dist/components/layout.js +23 -0
  34. package/dist/components/layout.js.map +1 -0
  35. package/dist/components/media.d.ts +5 -0
  36. package/dist/components/media.d.ts.map +1 -0
  37. package/dist/components/media.js +15 -0
  38. package/dist/components/media.js.map +1 -0
  39. package/dist/components/primitives.d.ts +39 -0
  40. package/dist/components/primitives.d.ts.map +1 -0
  41. package/dist/components/primitives.js +75 -0
  42. package/dist/components/primitives.js.map +1 -0
  43. package/dist/components/shared.d.ts +13 -0
  44. package/dist/components/shared.d.ts.map +1 -0
  45. package/dist/components/shared.js +36 -0
  46. package/dist/components/shared.js.map +1 -0
  47. package/dist/index.d.ts +19 -0
  48. package/dist/index.d.ts.map +1 -0
  49. package/dist/index.js +26 -0
  50. package/dist/index.js.map +1 -0
  51. package/dist/lib/platform.d.ts +12 -0
  52. package/dist/lib/platform.d.ts.map +1 -0
  53. package/dist/lib/platform.js +74 -0
  54. package/dist/lib/platform.js.map +1 -0
  55. package/dist/sdui/Renderer.d.ts +16 -0
  56. package/dist/sdui/Renderer.d.ts.map +1 -0
  57. package/dist/sdui/Renderer.js +40 -0
  58. package/dist/sdui/Renderer.js.map +1 -0
  59. package/dist/sdui/ShellProvider.d.ts +24 -0
  60. package/dist/sdui/ShellProvider.d.ts.map +1 -0
  61. package/dist/sdui/ShellProvider.js +110 -0
  62. package/dist/sdui/ShellProvider.js.map +1 -0
  63. package/dist/sdui/context.d.ts +17 -0
  64. package/dist/sdui/context.d.ts.map +1 -0
  65. package/dist/sdui/context.js +18 -0
  66. package/dist/sdui/context.js.map +1 -0
  67. package/dist/sdui/registry.d.ts +13 -0
  68. package/dist/sdui/registry.d.ts.map +1 -0
  69. package/dist/sdui/registry.js +26 -0
  70. package/dist/sdui/registry.js.map +1 -0
  71. package/dist/sdui/style.d.ts +81 -0
  72. package/dist/sdui/style.d.ts.map +1 -0
  73. package/dist/sdui/style.js +149 -0
  74. package/dist/sdui/style.js.map +1 -0
  75. package/dist/sdui/template.d.ts +19 -0
  76. package/dist/sdui/template.d.ts.map +1 -0
  77. package/dist/sdui/template.js +111 -0
  78. package/dist/sdui/template.js.map +1 -0
  79. package/dist/sdui/types.d.ts +96 -0
  80. package/dist/sdui/types.d.ts.map +1 -0
  81. package/dist/sdui/types.js +4 -0
  82. package/dist/sdui/types.js.map +1 -0
  83. package/dist/styles/components.css +772 -0
  84. package/dist/styles/global.css +80 -0
  85. package/dist/styles/index.css +5 -0
  86. package/dist/styles/tokens.css +150 -0
  87. package/package.json +37 -0
package/dist/styles/global.css ADDED
@@ -0,0 +1,80 @@
1
+ /* SPDX-License-Identifier: AGPL-3.0-only */
2
+ /* SPDX-FileCopyrightText: 2026 the Mosaic authors */
3
+
4
+ /* Reset + base. Kept tiny; component styles live in components.css. */
5
+
6
+ *,
7
+ *::before,
8
+ *::after {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ * {
13
+ margin: 0;
14
+ }
15
+
16
+ html {
17
+ -webkit-text-size-adjust: 100%;
18
+ }
19
+
20
+ body {
21
+ font-family: var(--font-sans);
22
+ font-size: var(--text-md);
23
+ line-height: var(--leading-normal);
24
+ color: var(--color-text);
25
+ background: var(--color-bg);
26
+ -webkit-font-smoothing: antialiased;
27
+ text-rendering: optimizeLegibility;
28
+ min-height: 100vh;
29
+ }
30
+
31
+ img,
32
+ picture,
33
+ svg,
34
+ video {
35
+ display: block;
36
+ max-width: 100%;
37
+ }
38
+
39
+ button,
40
+ input,
41
+ select,
42
+ textarea {
43
+ font: inherit;
44
+ color: inherit;
45
+ }
46
+
47
+ a {
48
+ color: inherit;
49
+ text-decoration: none;
50
+ }
51
+
52
+ :focus-visible {
53
+ outline: 2px solid var(--color-accent);
54
+ outline-offset: 2px;
55
+ border-radius: var(--radius-sm);
56
+ }
57
+
58
+ /* Thin, dark-friendly scrollbars for the horizontal rails */
59
+ * {
60
+ scrollbar-width: thin;
61
+ scrollbar-color: var(--color-border-strong) transparent;
62
+ }
63
+ *::-webkit-scrollbar {
64
+ height: 10px;
65
+ width: 10px;
66
+ }
67
+ *::-webkit-scrollbar-thumb {
68
+ background: var(--color-border-strong);
69
+ border-radius: var(--radius-pill);
70
+ }
71
+
72
+ @media (prefers-reduced-motion: reduce) {
73
+ *,
74
+ *::before,
75
+ *::after {
76
+ animation-duration: 0.001ms !important;
77
+ animation-iteration-count: 1 !important;
78
+ transition-duration: 0.001ms !important;
79
+ }
80
+ }
package/dist/styles/index.css ADDED
@@ -0,0 +1,5 @@
1
+ /* The full skin, in order: tokens → reset/base → component styles.
2
+ Consumers import this once: `import "@mosaic-media/sdui-react/styles.css"`. */
3
+ @import "./tokens.css";
4
+ @import "./global.css";
5
+ @import "./components.css";
package/dist/styles/tokens.css ADDED
@@ -0,0 +1,150 @@
1
+ /* SPDX-License-Identifier: AGPL-3.0-only */
2
+ /* SPDX-FileCopyrightText: 2026 the Mosaic authors */
3
+
4
+ /*
5
+ * Design tokens — the single seam the server references and the future
6
+ * Mosaic Design Language replaces. Components never hardcode colours, spacing,
7
+ * radii or type sizes; they read these variables. Reskin the whole Shell by
8
+ * editing this file alone.
9
+ *
10
+ * Dark is the default (a media app lives in a dim room). Light is provided so
11
+ * the token contract is proven in both directions. The active theme is chosen
12
+ * by [data-theme] on <html>; system preference is the fallback.
13
+ */
14
+
15
+ :root,
16
+ :root[data-theme="dark"] {
17
+ color-scheme: dark;
18
+
19
+ /* Surfaces — from the back of the screen forward */
20
+ --color-bg: #0b0d12;
21
+ --color-surface: #14171f;
22
+ --color-surface-raised: #1b1f2a;
23
+ --color-surface-overlay: #222735;
24
+ --color-scrim: rgba(6, 8, 12, 0.66);
25
+
26
+ /* Lines & borders */
27
+ --color-border: rgba(255, 255, 255, 0.09);
28
+ --color-border-strong: rgba(255, 255, 255, 0.16);
29
+
30
+ /* Text */
31
+ --color-text: #eef1f7;
32
+ --color-text-muted: #a4adbe;
33
+ --color-text-faint: #6b7386;
34
+ --color-text-on-accent: #0b0d12;
35
+
36
+ /* Brand accent — placeholder Mosaic teal/indigo. Swap for the real DL. */
37
+ --color-accent: #5b8cff;
38
+ --color-accent-hover: #7aa2ff;
39
+ --color-accent-quiet: rgba(91, 140, 255, 0.14);
40
+
41
+ /* Semantic status — these map to Platform error categories in feedback UI */
42
+ --color-success: #3fbf7f;
43
+ --color-warning: #e6b055;
44
+ --color-danger: #ef5f6b;
45
+ --color-info: #5b8cff;
46
+
47
+ /* Quiet tints of the status colours (badge / banner / status backgrounds) */
48
+ --color-success-quiet: rgba(63, 191, 127, 0.16);
49
+ --color-warning-quiet: rgba(230, 176, 85, 0.18);
50
+ --color-danger-quiet: rgba(239, 95, 107, 0.16);
51
+ --color-info-quiet: rgba(91, 140, 255, 0.16);
52
+
53
+ /* Media chrome */
54
+ --color-rating: #ffc857;
55
+ --color-progress-track: rgba(255, 255, 255, 0.16);
56
+
57
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
58
+ --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
59
+ --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55);
60
+ }
61
+
62
+ :root[data-theme="light"] {
63
+ color-scheme: light;
64
+
65
+ --color-bg: #f4f5f8;
66
+ --color-surface: #ffffff;
67
+ --color-surface-raised: #ffffff;
68
+ --color-surface-overlay: #ffffff;
69
+ --color-scrim: rgba(20, 23, 31, 0.42);
70
+
71
+ --color-border: rgba(16, 20, 30, 0.1);
72
+ --color-border-strong: rgba(16, 20, 30, 0.18);
73
+
74
+ --color-text: #141821;
75
+ --color-text-muted: #545c6e;
76
+ --color-text-faint: #8a92a3;
77
+ --color-text-on-accent: #ffffff;
78
+
79
+ --color-accent: #3f6fe0;
80
+ --color-accent-hover: #2f5bc7;
81
+ --color-accent-quiet: rgba(63, 111, 224, 0.12);
82
+
83
+ --color-success: #1f9d63;
84
+ --color-warning: #b9822a;
85
+ --color-danger: #d23f4b;
86
+ --color-info: #3f6fe0;
87
+
88
+ --color-success-quiet: rgba(31, 157, 99, 0.14);
89
+ --color-warning-quiet: rgba(185, 130, 42, 0.16);
90
+ --color-danger-quiet: rgba(210, 63, 75, 0.13);
91
+ --color-info-quiet: rgba(63, 111, 224, 0.12);
92
+
93
+ --color-rating: #d99a1f;
94
+ --color-progress-track: rgba(16, 20, 30, 0.14);
95
+
96
+ --shadow-1: 0 1px 2px rgba(16, 20, 30, 0.08);
97
+ --shadow-2: 0 6px 20px rgba(16, 20, 30, 0.12);
98
+ --shadow-3: 0 18px 50px rgba(16, 20, 30, 0.18);
99
+ }
100
+
101
+ :root {
102
+ /* Spacing scale (4px base) */
103
+ --space-1: 4px;
104
+ --space-2: 8px;
105
+ --space-3: 12px;
106
+ --space-4: 16px;
107
+ --space-5: 24px;
108
+ --space-6: 32px;
109
+ --space-7: 48px;
110
+ --space-8: 64px;
111
+
112
+ /* Radii */
113
+ --radius-sm: 6px;
114
+ --radius-md: 10px;
115
+ --radius-lg: 16px;
116
+ --radius-xl: 22px;
117
+ --radius-pill: 999px;
118
+
119
+ /* Typography */
120
+ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
121
+ Arial, sans-serif;
122
+ --font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo,
123
+ Consolas, monospace;
124
+
125
+ --text-xs: 0.75rem;
126
+ --text-sm: 0.85rem;
127
+ --text-md: 0.95rem;
128
+ --text-lg: 1.15rem;
129
+ --text-xl: 1.45rem;
130
+ --text-2xl: 1.9rem;
131
+ --text-3xl: 2.6rem;
132
+
133
+ --weight-regular: 400;
134
+ --weight-medium: 550;
135
+ --weight-bold: 700;
136
+
137
+ --leading-tight: 1.18;
138
+ --leading-normal: 1.5;
139
+
140
+ /* Motion */
141
+ --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
142
+ --dur-fast: 120ms;
143
+ --dur-med: 220ms;
144
+
145
+ /* Layout */
146
+ --shell-max: 1440px;
147
+ --shell-gutter: clamp(var(--space-4), 4vw, var(--space-7));
148
+ --z-overlay: 100;
149
+ --z-toast: 200;
150
+ }
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "@mosaic-media/sdui-react",
3
+ "version": "0.1.0",
4
+ "description": "React runtime for the Mosaic SDUI contract: primitives, registry, renderer, definition expander, and the token-driven skin.",
5
+ "license": "AGPL-3.0-only",
6
+ "type": "module",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "default": "./dist/index.js"
11
+ },
12
+ "./styles.css": "./dist/styles/index.css"
13
+ },
14
+ "files": ["dist"],
15
+ "scripts": {
16
+ "build": "tsc -p tsconfig.build.json && node copy-styles.mjs",
17
+ "typecheck": "tsc -p tsconfig.build.json --noEmit",
18
+ "prepare": "npm run build"
19
+ },
20
+ "peerDependencies": {
21
+ "react": "^18.3.1",
22
+ "react-dom": "^18.3.1"
23
+ },
24
+ "devDependencies": {
25
+ "@types/react": "^18.3.12",
26
+ "@types/react-dom": "^18.3.1",
27
+ "typescript": "^5.6.3"
28
+ },
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "git+https://github.com/mosaic-media/mosaic-sdui-react.git"
32
+ },
33
+ "publishConfig": {
34
+ "access": "public"
35
+ },
36
+ "sideEffects": ["*.css"]
37
+ }