@wpic/ui 0.3.5

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 (82) hide show
  1. package/dist/components/CollapseToggle.vue.d.ts +10 -0
  2. package/dist/components/ConfirmModal.vue.d.ts +16 -0
  3. package/dist/components/Modal.vue.d.ts +27 -0
  4. package/dist/components/SearchSelect.vue.d.ts +19 -0
  5. package/dist/components/ToastContainer.vue.d.ts +2 -0
  6. package/dist/components/TreeSelect.vue.d.ts +32 -0
  7. package/dist/components/WActionMenu.vue.d.ts +12 -0
  8. package/dist/components/WActionMenuItem.vue.d.ts +20 -0
  9. package/dist/components/WActionPanel.vue.d.ts +22 -0
  10. package/dist/components/WAlert.vue.d.ts +24 -0
  11. package/dist/components/WAvatar.vue.d.ts +7 -0
  12. package/dist/components/WBadge.vue.d.ts +21 -0
  13. package/dist/components/WBanner.vue.d.ts +17 -0
  14. package/dist/components/WBatchActionBar.vue.d.ts +22 -0
  15. package/dist/components/WButton.vue.d.ts +25 -0
  16. package/dist/components/WButtonGroup.vue.d.ts +12 -0
  17. package/dist/components/WCard.vue.d.ts +44 -0
  18. package/dist/components/WChatPanel.vue.d.ts +278 -0
  19. package/dist/components/WCheckbox.vue.d.ts +22 -0
  20. package/dist/components/WDatePicker.vue.d.ts +31 -0
  21. package/dist/components/WDateRangePicker.vue.d.ts +26 -0
  22. package/dist/components/WEmptyState.vue.d.ts +27 -0
  23. package/dist/components/WEmptyValue.vue.d.ts +17 -0
  24. package/dist/components/WFileList.vue.d.ts +36 -0
  25. package/dist/components/WFilter.vue.d.ts +21 -0
  26. package/dist/components/WFilterBar.vue.d.ts +69 -0
  27. package/dist/components/WFormActions.vue.d.ts +14 -0
  28. package/dist/components/WFormLabel.vue.d.ts +15 -0
  29. package/dist/components/WImageTile.vue.d.ts +11 -0
  30. package/dist/components/WInput.vue.d.ts +35 -0
  31. package/dist/components/WLoader.vue.d.ts +12 -0
  32. package/dist/components/WModal.vue.d.ts +28 -0
  33. package/dist/components/WMonthPicker.vue.d.ts +23 -0
  34. package/dist/components/WOptionPopover.vue.d.ts +19 -0
  35. package/dist/components/WPagination.vue.d.ts +16 -0
  36. package/dist/components/WPillGroup.vue.d.ts +35 -0
  37. package/dist/components/WPopover.vue.d.ts +44 -0
  38. package/dist/components/WProgress.vue.d.ts +10 -0
  39. package/dist/components/WSearchSelect.vue.d.ts +25 -0
  40. package/dist/components/WSegmentedControl.vue.d.ts +22 -0
  41. package/dist/components/WSelect.vue.d.ts +67 -0
  42. package/dist/components/WSelectOption.vue.d.ts +22 -0
  43. package/dist/components/WSidePanel.vue.d.ts +29 -0
  44. package/dist/components/WSkeleton.vue.d.ts +7 -0
  45. package/dist/components/WSlidePanel.vue.d.ts +25 -0
  46. package/dist/components/WSlider.vue.d.ts +22 -0
  47. package/dist/components/WSpinner.vue.d.ts +15 -0
  48. package/dist/components/WSpreadsheet.vue.d.ts +99 -0
  49. package/dist/components/WStatCard.vue.d.ts +21 -0
  50. package/dist/components/WTable.vue.d.ts +87 -0
  51. package/dist/components/WTabs.vue.d.ts +28 -0
  52. package/dist/components/WTag.vue.d.ts +27 -0
  53. package/dist/components/WTagInput.vue.d.ts +71 -0
  54. package/dist/components/WTailwindColorPicker.vue.d.ts +21 -0
  55. package/dist/components/WTextarea.vue.d.ts +15 -0
  56. package/dist/components/WToggle.vue.d.ts +22 -0
  57. package/dist/components/WTooltip.vue.d.ts +19 -0
  58. package/dist/components/WTwoColumnFormSection.vue.d.ts +19 -0
  59. package/dist/components/WWorkflowNav.vue.d.ts +20 -0
  60. package/dist/components/form/FormDate.vue.d.ts +23 -0
  61. package/dist/components/form/FormInput.vue.d.ts +15 -0
  62. package/dist/components/form/FormLabel.vue.d.ts +12 -0
  63. package/dist/components/form/FormSelect.vue.d.ts +18 -0
  64. package/dist/components/form/FormTextarea.vue.d.ts +14 -0
  65. package/dist/components/icons/MarketplaceIcon.vue.d.ts +9 -0
  66. package/dist/components/icons/ProviderLogo.vue.d.ts +11 -0
  67. package/dist/components/table/Table.vue.d.ts +12 -0
  68. package/dist/components/table/TableBody.vue.d.ts +12 -0
  69. package/dist/components/table/TableCell.vue.d.ts +17 -0
  70. package/dist/components/table/TableHead.vue.d.ts +12 -0
  71. package/dist/components/table/TableRow.vue.d.ts +15 -0
  72. package/dist/composables/useRecentItems.d.ts +9 -0
  73. package/dist/index.d.ts +82 -0
  74. package/dist/stores/toast.d.ts +148 -0
  75. package/dist/wpic-ui.cjs +9318 -0
  76. package/dist/wpic-ui.css +284 -0
  77. package/dist/wpic-ui.js +17570 -0
  78. package/package.json +51 -0
  79. package/src/components/chat/DB_SCHEMA.md +440 -0
  80. package/src/components/chat/LLM_STREAMING.md +390 -0
  81. package/src/components/chat/UI_INTEGRATION.md +273 -0
  82. package/src/style.css +282 -0
package/src/style.css ADDED
@@ -0,0 +1,282 @@
1
+ /*
2
+ * @wpic/ui — design token utilities
3
+ * Import this file in your project: import '@wpic/ui/style.css'
4
+ * Dark mode is activated by the .dark class on <html>.
5
+ */
6
+
7
+ /* ═══════════════════════════════════════════════════════════════════════════
8
+ LINEAR DESIGN SYSTEM — v0.3
9
+ CSS custom properties, switched by .dark on <html>.
10
+ ═══════════════════════════════════════════════════════════════════════════ */
11
+
12
+ :root {
13
+ /* Surfaces */
14
+ --bg-main: #fafafa;
15
+ --bg-card: #ffffff;
16
+ --bg-input: #f4f4f5;
17
+
18
+ /* Borders */
19
+ --border-subtle: rgba(0, 0, 0, 0.05);
20
+ --border-strong: #e4e4e7;
21
+ --border-hover: #d4d4d8;
22
+
23
+ /* Text */
24
+ --text-main: #18181b;
25
+ --text-muted: #52525b;
26
+ --text-dim: #a1a1aa;
27
+
28
+ /* Accents */
29
+ --color-indigo-neon: #6366f1;
30
+ --color-rose-neon: #f43f5e;
31
+ --color-teal-neon: #10b981;
32
+ --color-wpic-green: #85C531;
33
+ }
34
+
35
+ .dark {
36
+ --bg-main: #09090b;
37
+ --bg-card: #0c0c0e;
38
+ --bg-input: #111113;
39
+
40
+ --border-subtle: rgba(255, 255, 255, 0.04);
41
+ --border-strong: #1d1d20;
42
+ --border-hover: #27272a;
43
+
44
+ --text-main: #f4f4f5;
45
+ --text-muted: #a1a1aa;
46
+ --text-dim: #52525b;
47
+ }
48
+
49
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
50
+ .bg-main { background-color: var(--bg-main); }
51
+ .bg-card { background-color: var(--bg-card); }
52
+ .bg-input { background-color: var(--bg-input); }
53
+
54
+ /* ── Borders ──────────────────────────────────────────────────────────── */
55
+ .border-subtle { border-color: var(--border-subtle); }
56
+ .border-strong { border-color: var(--border-strong); }
57
+ .border-hover { border-color: var(--border-hover); }
58
+
59
+ /* ── Text ─────────────────────────────────────────────────────────────── */
60
+ .text-main { color: var(--text-main); }
61
+ .text-muted { color: var(--text-muted); }
62
+ .text-dim { color: var(--text-dim); }
63
+
64
+ /* ── Typography ───────────────────────────────────────────────────────── */
65
+ .label-xs {
66
+ font-size: 11px;
67
+ font-weight: 500;
68
+ letter-spacing: 0.01em;
69
+ color: var(--text-dim);
70
+ }
71
+ .heading-sm {
72
+ font-size: 0.875rem;
73
+ font-weight: 600;
74
+ letter-spacing: -0.025em;
75
+ color: var(--text-main);
76
+ }
77
+
78
+ /* ── Status badges ────────────────────────────────────────────────────── */
79
+ .status-ok { color: rgb(52 211 153); background-color: rgb(52 211 153 / 0.05); border: 1px solid rgb(52 211 153 / 0.1); }
80
+ .status-low { color: rgb(251 191 36); background-color: rgb(251 191 36 / 0.05); border: 1px solid rgb(251 191 36 / 0.1); }
81
+ .status-error { color: rgb(251 113 133); background-color: rgb(251 113 133 / 0.05); border: 1px solid rgb(251 113 133 / 0.1); }
82
+
83
+ /* ── Glass surface ────────────────────────────────────────────────────── */
84
+ .glass {
85
+ backdrop-filter: blur(12px);
86
+ -webkit-backdrop-filter: blur(12px);
87
+ background-color: rgba(255, 255, 255, 0.05);
88
+ }
89
+
90
+ /* ── Table header ─────────────────────────────────────────────────────── */
91
+ .th {
92
+ font-size: 11px;
93
+ font-weight: 600;
94
+ letter-spacing: 0.01em;
95
+ color: var(--text-dim);
96
+ padding: 0.75rem 1rem;
97
+ border-bottom: 1px solid var(--border-subtle);
98
+ text-align: left;
99
+ }
100
+
101
+ /* ── Buttons ──────────────────────────────────────────────────────────── */
102
+ .btn-primary {
103
+ display: inline-flex; align-items: center; justify-content: center;
104
+ height: 2rem; padding: 0 0.75rem;
105
+ border-radius: 0.5rem;
106
+ background-color: #e4e4e7;
107
+ color: #18181b;
108
+ font-size: 0.875rem; font-weight: 600;
109
+ transition: background-color 0.15s;
110
+ cursor: pointer;
111
+ }
112
+ .btn-primary:hover { background-color: #ffffff; }
113
+ .dark .btn-primary { background-color: #27272a; color: #f4f4f5; }
114
+ .dark .btn-primary:hover { background-color: #3f3f46; }
115
+
116
+ .btn-secondary {
117
+ display: inline-flex; align-items: center; justify-content: center;
118
+ height: 2rem; padding: 0 0.75rem;
119
+ border-radius: 0.5rem;
120
+ border: 1px solid var(--border-subtle);
121
+ color: var(--text-muted);
122
+ font-size: 0.875rem; font-weight: 500;
123
+ transition: all 0.15s;
124
+ cursor: pointer;
125
+ }
126
+ .btn-secondary:hover { color: var(--text-main); background-color: rgba(255,255,255,0.05); }
127
+
128
+ .btn-indigo {
129
+ display: inline-flex; align-items: center; justify-content: center;
130
+ height: 2rem; padding: 0 0.75rem;
131
+ border-radius: 0.5rem;
132
+ background-color: #4f46e5;
133
+ color: #ffffff;
134
+ font-size: 0.875rem; font-weight: 600;
135
+ box-shadow: 0 0 15px rgba(99,102,241,0.2);
136
+ transition: background-color 0.15s;
137
+ cursor: pointer;
138
+ }
139
+ .btn-indigo:hover { background-color: #6366f1; }
140
+
141
+ .btn-destructive {
142
+ display: inline-flex; align-items: center; justify-content: center;
143
+ background-color: #dc2626; color: #ffffff;
144
+ font-size: 0.875rem; font-weight: 600;
145
+ border-radius: 0.5rem;
146
+ cursor: pointer;
147
+ }
148
+ .btn-destructive:hover { background-color: #ef4444; }
149
+ .btn-destructive:active { background-color: #b91c1c; box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }
150
+
151
+ /* ── Spinner ──────────────────────────────────────────────────────────── */
152
+ @keyframes wpic-spin { to { transform: rotate(360deg); } }
153
+
154
+ .spinner {
155
+ width: 1.25rem; height: 1.25rem;
156
+ border-radius: 9999px;
157
+ border: 2px solid var(--border-strong);
158
+ border-top-color: #6366f1;
159
+ animation: wpic-spin 0.7s linear infinite;
160
+ }
161
+
162
+ .wpic-spinner {
163
+ display: inline-block;
164
+ width: 1.75rem; height: 1.75rem;
165
+ border-radius: 9999px;
166
+ border: 3px solid var(--border-strong);
167
+ border-top-color: #85C531;
168
+ animation: wpic-spin 0.75s linear infinite;
169
+ }
170
+
171
+ /* ── Custom scrollbar ─────────────────────────────────────────────────── */
172
+ .wpic-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
173
+ .wpic-scrollbar::-webkit-scrollbar-track { background: transparent; }
174
+ .wpic-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
175
+ .wpic-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
176
+
177
+ /* ── Range slider ─────────────────────────────────────────────────────── */
178
+ input[type="range"].slider-themed {
179
+ -webkit-appearance: none; appearance: none;
180
+ height: 4px; border-radius: 2px;
181
+ background: var(--border-strong); outline: none;
182
+ }
183
+ input[type="range"].slider-themed::-webkit-slider-thumb {
184
+ -webkit-appearance: none;
185
+ width: 14px; height: 14px;
186
+ border-radius: 50%; background: #85C531; cursor: pointer;
187
+ }
188
+
189
+ /* ═══════════════════════════════════════════════════════════════════════════
190
+ LEGACY — v0.2 wpic-prefixed classes (backward compat)
191
+ ═══════════════════════════════════════════════════════════════════════════ */
192
+
193
+ .bg-wpic-black { background-color: var(--bg-main); }
194
+ .bg-wpic-dark { background-color: var(--bg-main); }
195
+ .bg-wpic-card { background-color: var(--bg-card); }
196
+ .bg-wpic-input { background-color: var(--bg-input); }
197
+ .bg-wpic-nav-active { background-color: var(--bg-input); }
198
+ .bg-wpic-border { background-color: var(--border-strong); }
199
+
200
+ .bg-wpic-card-30 { background-color: color-mix(in srgb, var(--bg-card) 30%, transparent); }
201
+ .bg-wpic-card-50 { background-color: color-mix(in srgb, var(--bg-card) 50%, transparent); }
202
+ .bg-wpic-card-80 { background-color: color-mix(in srgb, var(--bg-card) 80%, transparent); }
203
+ .bg-wpic-dark-50 { background-color: color-mix(in srgb, var(--bg-main) 50%, transparent); }
204
+ .bg-wpic-input-50 { background-color: color-mix(in srgb, var(--bg-input) 50%, transparent); }
205
+ .bg-wpic-border-30 { background-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
206
+ .bg-wpic-border-40 { background-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
207
+ .bg-wpic-border-50 { background-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
208
+
209
+ .border-wpic-border { border-color: var(--border-strong); }
210
+ .border-wpic-border-30 { border-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
211
+ .border-wpic-border-40 { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
212
+ .border-wpic-border-50 { border-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
213
+ .border-wpic-border-60 { border-color: color-mix(in srgb, var(--border-strong) 60%, transparent); }
214
+ .border-wpic-border-80 { border-color: color-mix(in srgb, var(--border-strong) 80%, transparent); }
215
+ .border-wpic-border-hover { border-color: var(--border-hover); }
216
+ .divide-wpic-border-40 > * + * { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
217
+
218
+ .text-wpic-text { color: var(--text-main); }
219
+ .text-wpic-muted { color: var(--text-muted); }
220
+ .text-wpic-dim { color: var(--text-dim); }
221
+ .text-wpic-dim-20 { color: color-mix(in srgb, var(--text-dim) 20%, transparent); }
222
+ .text-wpic-dim-30 { color: color-mix(in srgb, var(--text-dim) 30%, transparent); }
223
+ .text-wpic-dim-40 { color: color-mix(in srgb, var(--text-dim) 40%, transparent); }
224
+ .text-wpic-dim-50 { color: color-mix(in srgb, var(--text-dim) 50%, transparent); }
225
+ .text-wpic-dim-60 { color: color-mix(in srgb, var(--text-dim) 60%, transparent); }
226
+
227
+ .text-wpic-green { color: #85C531; }
228
+ .bg-wpic-green { background-color: #85C531; }
229
+ .bg-wpic-green\/10 { background-color: rgba(133, 197, 49, 0.1); }
230
+ .bg-wpic-green\/15 { background-color: rgba(133, 197, 49, 0.15); }
231
+ .bg-wpic-green\/20 { background-color: rgba(133, 197, 49, 0.2); }
232
+ .border-wpic-green { border-color: #85C531; }
233
+ .ring-wpic-green { --tw-ring-color: #85C531; }
234
+ .accent-wpic-green { accent-color: #85C531; }
235
+ .focus\:border-wpic-green:focus { border-color: #85C531; }
236
+ .hover\:border-wpic-green\/50:hover { border-color: rgba(133, 197, 49, 0.5); }
237
+
238
+ /* ═══════════════════════════════════════════════════════════════════════════
239
+ THEMING — Primary colour (override per app)
240
+ Default: indigo. Override by setting --wpic-primary* in your app's CSS.
241
+ ═══════════════════════════════════════════════════════════════════════════ */
242
+
243
+ :root {
244
+ --wpic-primary: #6366f1; /* indigo-500 */
245
+ --wpic-primary-hover: #4f46e5; /* indigo-600 */
246
+ --wpic-primary-ring: rgba(99, 102, 241, 0.3);
247
+ }
248
+
249
+ .wpic-btn-primary {
250
+ background-color: var(--wpic-primary);
251
+ transition: background-color 0.15s;
252
+ }
253
+ .wpic-btn-primary:hover:not(:disabled) {
254
+ background-color: var(--wpic-primary-hover);
255
+ }
256
+ .wpic-btn-primary:focus-visible {
257
+ outline: 2px solid var(--wpic-primary);
258
+ outline-offset: 2px;
259
+ }
260
+
261
+ /* ── Input/Select hover & focus states (guaranteed in bundle) ── */
262
+ /* These target the actual input/button elements inside wpic-ui components.
263
+ `wpic-input-field` = idle state (used by WInput input, WSelect trigger, etc.)
264
+ `wpic-select-open` = WSelect's trigger when its dropdown is open
265
+ Both share the same focus visual (themable via --wpic-primary). */
266
+
267
+ /* Idle → hover: slightly darker border in light, slightly lighter in dark */
268
+ .wpic-input-field:hover {
269
+ border-color: #d4d4d8; /* zinc-300 — 1 step darker than default zinc-200 */
270
+ }
271
+ .dark .wpic-input-field:hover {
272
+ border-color: #3f3f46; /* zinc-700 */
273
+ }
274
+
275
+ /* Focus (typing in input) AND open (select dropdown open) share the same
276
+ accent ring. Themable per-app: override --wpic-primary in app's root CSS. */
277
+ .wpic-input-field:focus,
278
+ .wpic-select-open {
279
+ border-color: var(--wpic-primary, #6366f1) !important;
280
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpic-primary, #6366f1) 25%, transparent);
281
+ outline: none;
282
+ }