@printhive/react 0.0.0-stage → 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.
@@ -0,0 +1,482 @@
1
+ .ph-filament-management {
2
+ --ph-filament-background: light-dark(#f0eee9, #141515);
3
+ --ph-filament-surface: light-dark(#ffffff, #0a0a0a);
4
+ --ph-filament-text: light-dark(#0a0a0a, #f0eee9);
5
+ --ph-filament-muted: light-dark(#535b5b, #b2b8b8);
6
+ --ph-filament-border: light-dark(#848c8c, #848c8c);
7
+ --ph-filament-accent: #39ff14;
8
+ --ph-filament-font: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
9
+ --ph-filament-focus: light-dark(#1d4ed8, #93c5fd);
10
+ --ph-filament-danger: light-dark(#a11d16, #ffb4b0);
11
+ --ph-filament-warning: light-dark(#785000, #ffcf72);
12
+ --ph-filament-success: light-dark(#1e6a2c, #91df9f);
13
+ color-scheme: light dark;
14
+ container-type: inline-size;
15
+ box-sizing: border-box;
16
+ padding: 20px;
17
+ border: 1px solid var(--ph-filament-border);
18
+ border-radius: 8px;
19
+ background: var(--ph-filament-background);
20
+ color: var(--ph-filament-text);
21
+ font-family: var(--ph-filament-font);
22
+ font-size: 14px;
23
+ line-height: 1.5;
24
+ }
25
+
26
+ .ph-filament-management *,
27
+ .ph-filament-management *::before,
28
+ .ph-filament-management *::after {
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ .ph-filament-management :is(h2, h3, p) {
33
+ margin: 0;
34
+ }
35
+ .ph-filament-management h2 {
36
+ font-size: 20px;
37
+ font-weight: 650;
38
+ line-height: 1.3;
39
+ }
40
+ .ph-filament-management h3 {
41
+ font-size: 14px;
42
+ font-weight: 650;
43
+ }
44
+ .ph-filament-management .ph-filament-muted {
45
+ color: var(--ph-filament-muted);
46
+ font-size: 12px;
47
+ }
48
+ .ph-filament-management .ph-filament-eyebrow {
49
+ margin-bottom: 4px;
50
+ color: var(--ph-filament-muted);
51
+ font-size: 11px;
52
+ font-weight: 600;
53
+ letter-spacing: 0.08em;
54
+ text-transform: uppercase;
55
+ }
56
+ .ph-filament-management .ph-filament-header,
57
+ .ph-filament-management .ph-filament-header-actions,
58
+ .ph-filament-management .ph-filament-source > header,
59
+ .ph-filament-management .ph-filament-nozzle > header,
60
+ .ph-filament-management .ph-filament-slot-top,
61
+ .ph-filament-management .ph-filament-editor-heading,
62
+ .ph-filament-management .ph-filament-actions {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: space-between;
66
+ gap: 12px;
67
+ }
68
+ .ph-filament-management .ph-filament-header-actions {
69
+ flex-wrap: wrap;
70
+ justify-content: flex-end;
71
+ }
72
+ .ph-filament-management .ph-filament-header > div:first-child {
73
+ flex: 1;
74
+ min-width: 0;
75
+ overflow-wrap: anywhere;
76
+ }
77
+ .ph-filament-management .ph-filament-connection {
78
+ color: var(--ph-filament-muted);
79
+ font-size: 12px;
80
+ }
81
+ .ph-filament-management .ph-filament-freshness {
82
+ display: flex;
83
+ flex-wrap: wrap;
84
+ gap: 4px 12px;
85
+ margin: 16px 0 20px;
86
+ color: var(--ph-filament-muted);
87
+ font-size: 12px;
88
+ }
89
+ .ph-filament-management .ph-filament-nozzles {
90
+ display: grid;
91
+ gap: 24px;
92
+ }
93
+ .ph-filament-management .ph-filament-nozzle {
94
+ display: grid;
95
+ min-width: 0;
96
+ align-content: start;
97
+ gap: 12px;
98
+ }
99
+ .ph-filament-management .ph-filament-nozzle > header {
100
+ padding-bottom: 8px;
101
+ border-bottom: 1px solid var(--ph-filament-border);
102
+ }
103
+ .ph-filament-management .ph-filament-source {
104
+ min-width: 0;
105
+ }
106
+ .ph-filament-management .ph-filament-source > header {
107
+ margin-bottom: 8px;
108
+ }
109
+ .ph-filament-management .ph-filament-slots {
110
+ display: grid;
111
+ grid-template-columns: repeat(2, minmax(0, 1fr));
112
+ gap: 8px;
113
+ }
114
+ .ph-filament-management .ph-filament-slots[data-layout="single"] {
115
+ grid-template-columns: minmax(0, 1fr);
116
+ }
117
+ .ph-filament-management .ph-filament-slot {
118
+ display: flex;
119
+ width: 100%;
120
+ height: auto;
121
+ min-height: 156px;
122
+ flex-direction: column;
123
+ align-items: flex-start;
124
+ justify-content: flex-start;
125
+ gap: 8px;
126
+ padding: 12px;
127
+ border: 1px solid var(--ph-filament-border);
128
+ border-radius: 4px;
129
+ background: var(--ph-filament-surface);
130
+ color: var(--ph-filament-text);
131
+ text-align: left;
132
+ white-space: normal;
133
+ }
134
+ .ph-filament-management .ph-filament-slot strong {
135
+ overflow-wrap: anywhere;
136
+ font-size: 13px;
137
+ font-weight: 600;
138
+ }
139
+ .ph-filament-management .ph-filament-slot-top {
140
+ width: 100%;
141
+ align-items: flex-start;
142
+ }
143
+ .ph-filament-management .ph-filament-slot-label {
144
+ color: var(--ph-filament-muted);
145
+ font-family: ui-monospace, monospace;
146
+ font-size: 11px;
147
+ }
148
+ .ph-filament-management .ph-filament-feeding {
149
+ color: var(--ph-filament-success);
150
+ font-size: 10px;
151
+ font-weight: 650;
152
+ }
153
+ .ph-filament-management .ph-filament-slot-status {
154
+ color: var(--ph-filament-muted);
155
+ font-size: 11px;
156
+ }
157
+ .ph-filament-management .ph-filament-slot-status[data-state="mismatch"] {
158
+ color: var(--ph-filament-warning);
159
+ }
160
+ .ph-filament-management .ph-filament-slot-status[data-state="synced"] {
161
+ color: var(--ph-filament-success);
162
+ }
163
+ .ph-filament-management .ph-filament-swatch {
164
+ display: block;
165
+ width: 32px;
166
+ height: 32px;
167
+ flex: 0 0 auto;
168
+ border: 1px solid var(--ph-filament-border);
169
+ border-radius: 50%;
170
+ background-color: var(--ph-filament-background);
171
+ box-shadow: inset 0 0 0 3px var(--ph-filament-surface);
172
+ }
173
+ .ph-filament-management .ph-filament-swatch-small {
174
+ width: 24px;
175
+ height: 24px;
176
+ }
177
+ .ph-filament-management .ph-filament-unbound {
178
+ display: grid;
179
+ gap: 12px;
180
+ margin-top: 24px;
181
+ }
182
+ .ph-filament-management .ph-filament-rack {
183
+ display: grid;
184
+ gap: 8px;
185
+ margin-bottom: 24px;
186
+ }
187
+ .ph-filament-management .ph-filament-rack-tools {
188
+ display: flex;
189
+ flex-wrap: wrap;
190
+ gap: 8px;
191
+ }
192
+ .ph-filament-management .ph-filament-rack-tools > span {
193
+ display: grid;
194
+ min-width: 76px;
195
+ max-width: 160px;
196
+ gap: 4px;
197
+ padding: 8px;
198
+ border: 1px solid var(--ph-filament-border);
199
+ border-radius: 4px;
200
+ color: var(--ph-filament-muted);
201
+ font-size: 11px;
202
+ overflow-wrap: anywhere;
203
+ }
204
+ .ph-filament-management .ph-filament-rack-tools strong {
205
+ color: var(--ph-filament-text);
206
+ font-size: 13px;
207
+ }
208
+ .ph-filament-management .ph-filament-rack-tools small {
209
+ font-size: 10px;
210
+ }
211
+ .ph-filament-management
212
+ :is([data-slot="button"], [data-slot="dialog-close"]):not(.ph-filament-slot) {
213
+ display: inline-flex;
214
+ min-height: 40px;
215
+ height: auto;
216
+ align-items: center;
217
+ justify-content: center;
218
+ gap: 8px;
219
+ padding: 8px 12px;
220
+ border: 1px solid var(--ph-filament-border);
221
+ border-radius: 4px;
222
+ background: var(--ph-filament-surface);
223
+ color: var(--ph-filament-text);
224
+ font: inherit;
225
+ font-size: 12px;
226
+ font-weight: 600;
227
+ cursor: pointer;
228
+ white-space: normal;
229
+ }
230
+ .ph-filament-management
231
+ :is(
232
+ [data-slot="button"],
233
+ [data-slot="dialog-close"],
234
+ [data-slot="dialog-trigger"],
235
+ [data-slot="combobox-input"]
236
+ ):focus-visible {
237
+ outline: 2px solid var(--ph-filament-focus);
238
+ outline-offset: 2px;
239
+ }
240
+ .ph-filament-management :is([data-disabled], [disabled]) {
241
+ cursor: not-allowed;
242
+ opacity: 0.6;
243
+ }
244
+ .ph-filament-management .ph-filament-primary {
245
+ background: var(--ph-filament-accent);
246
+ color: #0a0a0a;
247
+ border-color: #0a0a0a;
248
+ }
249
+ .ph-filament-management .ph-filament-danger {
250
+ color: var(--ph-filament-danger);
251
+ }
252
+ .ph-filament-management .ph-filament-inline-error,
253
+ .ph-filament-management .ph-filament-notice {
254
+ margin: 12px 0;
255
+ padding: 10px 12px;
256
+ border: 1px solid currentColor;
257
+ border-radius: 4px;
258
+ color: var(--ph-filament-warning);
259
+ font-size: 12px;
260
+ }
261
+ .ph-filament-management .ph-filament-inline-error,
262
+ .ph-filament-management .ph-filament-notice[data-tone="error"] {
263
+ color: var(--ph-filament-danger);
264
+ }
265
+ .ph-filament-management .ph-filament-notice[data-tone="success"] {
266
+ color: var(--ph-filament-success);
267
+ }
268
+ .ph-filament-management .ph-filament-backdrop {
269
+ position: fixed;
270
+ inset: 0;
271
+ background: #0a0a0a99;
272
+ }
273
+ .ph-filament-management .ph-filament-editor {
274
+ position: fixed;
275
+ inset: 50% auto auto 50%;
276
+ width: min(560px, calc(100vw - 32px));
277
+ max-height: min(840px, calc(100dvh - 32px));
278
+ margin: 0;
279
+ padding: 24px;
280
+ overflow: auto;
281
+ transform: translate(-50%, -50%);
282
+ border: 1px solid var(--ph-filament-border);
283
+ border-radius: 8px;
284
+ background: var(--ph-filament-surface);
285
+ color: var(--ph-filament-text);
286
+ font: inherit;
287
+ overscroll-behavior: contain;
288
+ scrollbar-gutter: stable both-edges;
289
+ }
290
+ .ph-filament-management .ph-filament-editor-heading {
291
+ align-items: flex-start;
292
+ gap: 20px;
293
+ margin-bottom: 20px;
294
+ }
295
+ .ph-filament-management [data-slot="dialog-description"] {
296
+ margin-top: 6px;
297
+ color: var(--ph-filament-muted);
298
+ font-size: 12px;
299
+ }
300
+ .ph-filament-management .ph-filament-close {
301
+ min-height: 36px;
302
+ flex-shrink: 0;
303
+ }
304
+ .ph-filament-management .ph-filament-comparison {
305
+ display: grid;
306
+ grid-template-columns: 1fr 1fr;
307
+ gap: 12px;
308
+ margin-bottom: 24px;
309
+ }
310
+ .ph-filament-management .ph-filament-comparison > section {
311
+ padding: 12px;
312
+ border: 1px solid var(--ph-filament-border);
313
+ border-radius: 4px;
314
+ }
315
+ .ph-filament-management .ph-filament-comparison h3 {
316
+ margin-bottom: 10px;
317
+ color: var(--ph-filament-muted);
318
+ font-size: 11px;
319
+ }
320
+ .ph-filament-management .ph-filament-material {
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 10px;
324
+ min-width: 0;
325
+ }
326
+ .ph-filament-management .ph-filament-material strong {
327
+ display: block;
328
+ font-size: 13px;
329
+ }
330
+ .ph-filament-management .ph-filament-material p {
331
+ color: var(--ph-filament-muted);
332
+ font-size: 11px;
333
+ overflow-wrap: anywhere;
334
+ }
335
+ .ph-filament-management .ph-filament-catalog {
336
+ display: grid;
337
+ gap: 8px;
338
+ }
339
+ .ph-filament-management .ph-filament-combobox-control {
340
+ display: flex;
341
+ gap: 8px;
342
+ }
343
+ .ph-filament-management
344
+ .ph-filament-combobox-control
345
+ [data-slot="combobox-input"] {
346
+ min-width: 0;
347
+ flex: 1;
348
+ }
349
+ .ph-filament-management [data-slot="combobox-trigger"] {
350
+ display: inline-flex;
351
+ width: 44px;
352
+ min-height: 44px;
353
+ flex-shrink: 0;
354
+ align-items: center;
355
+ justify-content: center;
356
+ padding: 8px;
357
+ border: 1px solid var(--ph-filament-border);
358
+ border-radius: 4px;
359
+ background: var(--ph-filament-surface);
360
+ color: var(--ph-filament-text);
361
+ cursor: pointer;
362
+ }
363
+ .ph-filament-management [data-slot="combobox-trigger"]:focus-visible {
364
+ outline: 2px solid var(--ph-filament-focus);
365
+ outline-offset: 2px;
366
+ }
367
+ .ph-filament-management [data-slot="combobox-label"] {
368
+ display: block;
369
+ margin-bottom: 8px;
370
+ font-weight: 600;
371
+ font-size: 12px;
372
+ }
373
+ .ph-filament-management [data-slot="combobox-input"] {
374
+ width: 100%;
375
+ min-height: 44px;
376
+ padding: 10px 12px;
377
+ border: 1px solid var(--ph-filament-border);
378
+ border-radius: 4px;
379
+ background: var(--ph-filament-surface);
380
+ color: var(--ph-filament-text);
381
+ font: inherit;
382
+ font-size: 13px;
383
+ }
384
+ .ph-filament-management .ph-filament-catalog-popup {
385
+ width: var(--anchor-width, 100%);
386
+ max-height: 300px;
387
+ overflow: auto;
388
+ padding: 4px;
389
+ border: 1px solid var(--ph-filament-border);
390
+ border-radius: 4px;
391
+ background: var(--ph-filament-surface);
392
+ color: var(--ph-filament-text);
393
+ box-shadow: 0 8px 24px #0a0a0a22;
394
+ }
395
+ .ph-filament-management [data-slot="combobox-item"] {
396
+ display: flex;
397
+ align-items: center;
398
+ gap: 10px;
399
+ padding: 10px;
400
+ border-radius: 2px;
401
+ cursor: pointer;
402
+ }
403
+ .ph-filament-management [data-slot="combobox-item"][data-highlighted] {
404
+ outline: 2px solid var(--ph-filament-focus);
405
+ outline-offset: -2px;
406
+ }
407
+ .ph-filament-management [data-slot="combobox-item"][data-selected] {
408
+ background: var(--ph-filament-background);
409
+ font-weight: 650;
410
+ }
411
+ .ph-filament-management .ph-filament-option-label {
412
+ display: block;
413
+ font-size: 13px;
414
+ }
415
+ .ph-filament-management [data-slot="combobox-empty"] {
416
+ padding: 12px;
417
+ color: var(--ph-filament-muted);
418
+ font-size: 12px;
419
+ }
420
+ .ph-filament-management .ph-filament-editor-primary {
421
+ display: flex;
422
+ justify-content: flex-end;
423
+ margin-top: 20px;
424
+ }
425
+ .ph-filament-management .ph-filament-editor-secondary {
426
+ display: grid;
427
+ grid-template-columns: 1fr 1fr;
428
+ gap: 16px;
429
+ margin-top: 24px;
430
+ padding-top: 20px;
431
+ border-top: 1px solid var(--ph-filament-border);
432
+ }
433
+ .ph-filament-management .ph-filament-editor-secondary p {
434
+ margin-top: 6px;
435
+ }
436
+ .ph-filament-management .ph-filament-clear-confirmation {
437
+ display: grid;
438
+ gap: 12px;
439
+ margin-top: 16px;
440
+ padding: 12px;
441
+ border: 1px solid var(--ph-filament-danger);
442
+ border-radius: 4px;
443
+ font-size: 12px;
444
+ }
445
+ @container (min-width: 540px) {
446
+ .ph-filament-management .ph-filament-slots[data-layout="row4"] {
447
+ grid-template-columns: repeat(4, minmax(0, 1fr));
448
+ }
449
+ }
450
+ @container (min-width: 900px) {
451
+ .ph-filament-management .ph-filament-nozzles {
452
+ grid-template-columns: repeat(2, minmax(0, 1fr));
453
+ }
454
+ .ph-filament-management .ph-filament-nozzles > :only-child {
455
+ grid-column: 1 / -1;
456
+ }
457
+ }
458
+ @media (max-width: 480px) {
459
+ .ph-filament-management {
460
+ padding: 12px;
461
+ }
462
+ .ph-filament-management .ph-filament-header {
463
+ align-items: flex-start;
464
+ }
465
+ .ph-filament-management .ph-filament-header-actions {
466
+ flex-direction: column;
467
+ align-items: flex-end;
468
+ gap: 4px;
469
+ }
470
+ .ph-filament-management .ph-filament-comparison {
471
+ grid-template-columns: 1fr;
472
+ }
473
+ .ph-filament-management .ph-filament-editor {
474
+ padding: 16px;
475
+ }
476
+ .ph-filament-management .ph-filament-editor-secondary {
477
+ grid-template-columns: 1fr;
478
+ }
479
+ .ph-filament-management .ph-filament-actions {
480
+ flex-wrap: wrap;
481
+ }
482
+ }
package/package.json CHANGED
@@ -1,6 +1,82 @@
1
1
  {
2
2
  "name": "@printhive/react",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "0.1.0",
4
+ "description": "Embeddable PrintHive filament management for React",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "main": "./dist/index.cjs",
8
+ "module": "./dist/index.js",
9
+ "types": "./dist/index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "import": {
13
+ "types": "./dist/index.d.ts",
14
+ "default": "./dist/index.js"
15
+ },
16
+ "require": {
17
+ "types": "./dist/index.d.cts",
18
+ "default": "./dist/index.cjs"
19
+ }
20
+ },
21
+ "./server": {
22
+ "import": {
23
+ "types": "./dist/server.d.ts",
24
+ "default": "./dist/server.js"
25
+ },
26
+ "require": {
27
+ "types": "./dist/server.d.cts",
28
+ "default": "./dist/server.cjs"
29
+ }
30
+ },
31
+ "./styles.css": "./dist/styles.css"
32
+ },
33
+ "files": [
34
+ "dist",
35
+ "LICENSE"
36
+ ],
37
+ "sideEffects": [
38
+ "**/*.css"
39
+ ],
40
+ "publishConfig": {
41
+ "access": "public"
42
+ },
43
+ "repository": {
44
+ "type": "git",
45
+ "url": "git+https://github.com/PrintHive/hive.git",
46
+ "directory": "packages/react"
47
+ },
48
+ "peerDependencies": {
49
+ "@printhive/api": "^0.9.0",
50
+ "react": ">=19",
51
+ "react-dom": ">=19"
52
+ },
53
+ "dependencies": {
54
+ "@tanstack/react-query": "^5.56.2",
55
+ "@ui-sdk/core": "^0.1.0-beta.1",
56
+ "@ui-sdk/react": "^0.1.0-beta.1",
57
+ "zod": "^3.25.76"
58
+ },
59
+ "devDependencies": {
60
+ "@printhive/api": "*",
61
+ "@testing-library/dom": "^10.4.1",
62
+ "@testing-library/react": "^16.3.2",
63
+ "@testing-library/user-event": "^14.6.1",
64
+ "@types/node": "^24.10.1",
65
+ "@types/react": "^19.2.18",
66
+ "@types/react-dom": "^19.2.4",
67
+ "@vitejs/plugin-react": "^5.1.2",
68
+ "jsdom": "^27.2.0",
69
+ "react": "^19.2.8",
70
+ "react-dom": "^19.2.8",
71
+ "tsup": "^8.5.0",
72
+ "typescript": "^5.9.3",
73
+ "vite": "^7.0.0",
74
+ "vitest": "^4.1.0"
75
+ },
76
+ "scripts": {
77
+ "build": "tsup --config tsup.config.ts && node scripts/copy-css.mjs",
78
+ "check-types": "tsc --noEmit",
79
+ "test": "vitest run",
80
+ "dev": "vite --config demo/vite.config.ts"
81
+ }
82
+ }
package/README.md DELETED
@@ -1,3 +0,0 @@
1
- # Temporary Holding Version
2
-
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.