@miozu/jera 0.3.0 → 0.4.3

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 (72) hide show
  1. package/CLAUDE.md +350 -59
  2. package/README.md +30 -22
  3. package/llms.txt +37 -4
  4. package/package.json +8 -2
  5. package/src/components/docs/CodeBlock.svelte +204 -0
  6. package/src/components/docs/DocSection.svelte +120 -0
  7. package/src/components/docs/PropsTable.svelte +136 -0
  8. package/src/components/docs/SplitPane.svelte +98 -0
  9. package/src/components/docs/index.js +14 -0
  10. package/src/components/feedback/Alert.svelte +234 -0
  11. package/src/components/feedback/EmptyState.svelte +6 -6
  12. package/src/components/feedback/ProgressBar.svelte +8 -8
  13. package/src/components/feedback/Skeleton.svelte +4 -4
  14. package/src/components/feedback/Spinner.svelte +1 -1
  15. package/src/components/feedback/Toast.svelte +137 -173
  16. package/src/components/forms/Checkbox.svelte +10 -10
  17. package/src/components/forms/Dropzone.svelte +14 -14
  18. package/src/components/forms/FileUpload.svelte +16 -16
  19. package/src/components/forms/IconInput.svelte +4 -4
  20. package/src/components/forms/Input.svelte +14 -14
  21. package/src/components/forms/NumberInput.svelte +13 -13
  22. package/src/components/forms/PinInput.svelte +8 -8
  23. package/src/components/forms/Radio.svelte +8 -8
  24. package/src/components/forms/RangeSlider.svelte +12 -12
  25. package/src/components/forms/SearchInput.svelte +10 -10
  26. package/src/components/forms/Select.svelte +156 -158
  27. package/src/components/forms/Switch.svelte +4 -4
  28. package/src/components/forms/Textarea.svelte +9 -9
  29. package/src/components/navigation/Accordion.svelte +1 -1
  30. package/src/components/navigation/AccordionItem.svelte +6 -6
  31. package/src/components/navigation/NavigationContainer.svelte +344 -0
  32. package/src/components/navigation/Sidebar.svelte +334 -0
  33. package/src/components/navigation/SidebarAccountGroup.svelte +495 -0
  34. package/src/components/navigation/SidebarAccountItem.svelte +492 -0
  35. package/src/components/navigation/SidebarGroup.svelte +230 -0
  36. package/src/components/navigation/SidebarGroupSwitcher.svelte +262 -0
  37. package/src/components/navigation/SidebarItem.svelte +210 -0
  38. package/src/components/navigation/SidebarNavigationItem.svelte +470 -0
  39. package/src/components/navigation/SidebarPopover.svelte +145 -0
  40. package/src/components/navigation/SidebarSearch.svelte +236 -0
  41. package/src/components/navigation/SidebarSection.svelte +158 -0
  42. package/src/components/navigation/SidebarToggle.svelte +86 -0
  43. package/src/components/navigation/Tabs.svelte +18 -18
  44. package/src/components/navigation/WorkspaceMenu.svelte +416 -0
  45. package/src/components/navigation/blocks/NavigationAccountGroup.svelte +396 -0
  46. package/src/components/navigation/blocks/NavigationCustomBlock.svelte +74 -0
  47. package/src/components/navigation/blocks/NavigationGroupSwitcher.svelte +277 -0
  48. package/src/components/navigation/blocks/NavigationSearch.svelte +300 -0
  49. package/src/components/navigation/blocks/NavigationSection.svelte +230 -0
  50. package/src/components/navigation/index.js +22 -0
  51. package/src/components/overlays/ConfirmDialog.svelte +18 -18
  52. package/src/components/overlays/Dropdown.svelte +2 -2
  53. package/src/components/overlays/DropdownDivider.svelte +1 -1
  54. package/src/components/overlays/DropdownItem.svelte +5 -5
  55. package/src/components/overlays/Modal.svelte +13 -13
  56. package/src/components/overlays/Popover.svelte +3 -3
  57. package/src/components/primitives/Avatar.svelte +12 -12
  58. package/src/components/primitives/Badge.svelte +7 -7
  59. package/src/components/primitives/Button.svelte +126 -174
  60. package/src/components/primitives/Card.svelte +15 -15
  61. package/src/components/primitives/Divider.svelte +3 -3
  62. package/src/components/primitives/LazyImage.svelte +1 -1
  63. package/src/components/primitives/Link.svelte +2 -2
  64. package/src/components/primitives/Stat.svelte +197 -0
  65. package/src/components/primitives/StatusBadge.svelte +24 -24
  66. package/src/index.js +62 -7
  67. package/src/tokens/colors.css +96 -128
  68. package/src/utils/highlighter.js +124 -0
  69. package/src/utils/index.js +7 -2
  70. package/src/utils/navigation.svelte.js +423 -0
  71. package/src/utils/reactive.svelte.js +126 -37
  72. package/src/utils/sidebar.svelte.js +211 -0
package/src/components/forms/Input.svelte CHANGED
@@ -85,24 +85,24 @@
85
85
  <style>
86
86
  .input-base {
87
87
  width: 100%;
88
- padding: var(--space-2) var(--space-3);
89
- font-size: var(--text-sm);
90
- line-height: var(--leading-normal);
91
- color: var(--color-text-strong);
92
- background-color: var(--color-bg);
93
- border: 1px solid var(--color-border-muted);
94
- border-radius: var(--radius-lg);
95
- transition: var(--transition-colors);
88
+ padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
89
+ font-size: var(--text-sm, 0.875rem);
90
+ line-height: var(--leading-normal, 1.5);
91
+ color: var(--color-base07);
92
+ background-color: var(--color-base00);
93
+ border: 1px solid var(--color-base02);
94
+ border-radius: var(--radius-lg, 0.5rem);
95
+ transition: border-color 150ms, box-shadow 150ms;
96
96
  }
97
97
 
98
98
  .input-base::placeholder {
99
- color: var(--color-text-muted);
99
+ color: var(--color-base04);
100
100
  }
101
101
 
102
102
  .input-base:focus {
103
103
  outline: none;
104
- border-color: var(--color-primary);
105
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
104
+ border-color: var(--color-base0D);
105
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
106
106
  }
107
107
 
108
108
  .input-base:disabled {
@@ -111,11 +111,11 @@
111
111
  }
112
112
 
113
113
  .input-error {
114
- border-color: var(--color-error);
114
+ border-color: var(--color-base08);
115
115
  }
116
116
 
117
117
  .input-error:focus {
118
- border-color: var(--color-error);
119
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
118
+ border-color: var(--color-base08);
119
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base08) 20%, transparent);
120
120
  }
121
121
  </style>
package/src/components/forms/NumberInput.svelte CHANGED
@@ -151,10 +151,10 @@
151
151
  padding: 0 var(--space-3);
152
152
  text-align: center;
153
153
  font-size: var(--text-sm);
154
- color: var(--color-text-strong);
155
- background: var(--color-bg);
156
- border-top: 1px solid var(--color-border-muted);
157
- border-bottom: 1px solid var(--color-border-muted);
154
+ color: var(--color-base07);
155
+ background: var(--color-base00);
156
+ border-top: 1px solid var(--color-base02);
157
+ border-bottom: 1px solid var(--color-base02);
158
158
  border-left: none;
159
159
  border-right: none;
160
160
  transition: var(--transition-colors);
@@ -163,7 +163,7 @@
163
163
 
164
164
  .number-field:focus {
165
165
  outline: none;
166
- border-color: var(--color-primary);
166
+ border-color: var(--color-base0D);
167
167
  }
168
168
 
169
169
  .number-field:disabled {
@@ -172,7 +172,7 @@
172
172
  }
173
173
 
174
174
  .number-field::placeholder {
175
- color: var(--color-text-muted);
175
+ color: var(--color-base04);
176
176
  }
177
177
 
178
178
  /* Hide native spinners */
@@ -190,16 +190,16 @@
190
190
  align-items: center;
191
191
  justify-content: center;
192
192
  padding: 0 var(--space-3);
193
- color: var(--color-text-muted);
194
- background: var(--color-surface);
195
- border: 1px solid var(--color-border-muted);
193
+ color: var(--color-base04);
194
+ background: var(--color-base01);
195
+ border: 1px solid var(--color-base02);
196
196
  cursor: pointer;
197
197
  transition: var(--transition-colors);
198
198
  }
199
199
 
200
200
  .number-btn:hover:not(:disabled) {
201
- color: var(--color-text-strong);
202
- background: var(--color-surface-hover);
201
+ color: var(--color-base07);
202
+ background: var(--color-base02);
203
203
  }
204
204
 
205
205
  .number-btn:disabled {
@@ -216,10 +216,10 @@
216
216
  }
217
217
 
218
218
  .number-input-error .number-field {
219
- border-color: var(--color-error);
219
+ border-color: var(--color-base08);
220
220
  }
221
221
 
222
222
  .number-input-error .number-btn {
223
- border-color: var(--color-error);
223
+ border-color: var(--color-base08);
224
224
  }
225
225
  </style>
package/src/components/forms/PinInput.svelte CHANGED
@@ -120,9 +120,9 @@
120
120
  font-size: 1.25rem;
121
121
  font-weight: 600;
122
122
  text-align: center;
123
- color: var(--color-text-strong);
124
- background: var(--color-bg);
125
- border: 2px solid var(--color-border-muted);
123
+ color: var(--color-base07);
124
+ background: var(--color-base00);
125
+ border: 2px solid var(--color-base02);
126
126
  border-radius: var(--radius-lg);
127
127
  transition: var(--transition-colors);
128
128
  font-family: inherit;
@@ -142,13 +142,13 @@
142
142
 
143
143
  .pin-field:focus {
144
144
  outline: none;
145
- border-color: var(--color-primary);
146
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
145
+ border-color: var(--color-base0D);
146
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
147
147
  }
148
148
 
149
149
  .pin-field-filled {
150
- border-color: var(--color-primary);
151
- background: color-mix(in srgb, var(--color-primary) 5%, transparent);
150
+ border-color: var(--color-base0D);
151
+ background: color-mix(in srgb, var(--color-base0D) 5%, transparent);
152
152
  }
153
153
 
154
154
  .pin-field:disabled {
@@ -157,7 +157,7 @@
157
157
  }
158
158
 
159
159
  .pin-field::placeholder {
160
- color: var(--color-text-muted);
160
+ color: var(--color-base04);
161
161
  }
162
162
 
163
163
  /* Hide spin buttons on number input */
package/src/components/forms/Radio.svelte CHANGED
@@ -88,9 +88,9 @@
88
88
  width: 1.125rem;
89
89
  height: 1.125rem;
90
90
  margin-top: 0.125rem;
91
- border: 2px solid var(--color-border);
91
+ border: 2px solid var(--color-base03);
92
92
  border-radius: 50%;
93
- background: var(--color-bg);
93
+ background: var(--color-base00);
94
94
  transition: var(--transition-colors);
95
95
  display: flex;
96
96
  align-items: center;
@@ -102,13 +102,13 @@
102
102
  width: 0.5rem;
103
103
  height: 0.5rem;
104
104
  border-radius: 50%;
105
- background: var(--color-primary);
105
+ background: var(--color-base0D);
106
106
  transform: scale(0);
107
107
  transition: transform 0.15s ease-out;
108
108
  }
109
109
 
110
110
  .radio-input:checked + .radio-control {
111
- border-color: var(--color-primary);
111
+ border-color: var(--color-base0D);
112
112
  }
113
113
 
114
114
  .radio-input:checked + .radio-control::after {
@@ -116,11 +116,11 @@
116
116
  }
117
117
 
118
118
  .radio-input:focus-visible + .radio-control {
119
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
119
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
120
120
  }
121
121
 
122
122
  .radio-label:hover:not(.radio-disabled) .radio-control {
123
- border-color: var(--color-primary);
123
+ border-color: var(--color-base0D);
124
124
  }
125
125
 
126
126
  .radio-content {
@@ -131,13 +131,13 @@
131
131
 
132
132
  .radio-text {
133
133
  font-size: var(--text-sm);
134
- color: var(--color-text-strong);
134
+ color: var(--color-base07);
135
135
  line-height: 1.4;
136
136
  }
137
137
 
138
138
  .radio-description {
139
139
  font-size: var(--text-xs);
140
- color: var(--color-text-muted);
140
+ color: var(--color-base04);
141
141
  line-height: 1.4;
142
142
  }
143
143
  </style>
package/src/components/forms/RangeSlider.svelte CHANGED
@@ -83,7 +83,7 @@
83
83
  display: block;
84
84
  font-size: var(--text-sm);
85
85
  font-weight: 500;
86
- color: var(--color-text);
86
+ color: var(--color-base05);
87
87
  margin-bottom: var(--space-2);
88
88
  }
89
89
 
@@ -118,14 +118,14 @@
118
118
  inset: 0;
119
119
  width: 100%;
120
120
  height: 100%;
121
- background: var(--color-surface-alt);
121
+ background: var(--color-base02);
122
122
  border-radius: 9999px;
123
123
  pointer-events: none;
124
124
  }
125
125
 
126
126
  .slider-fill {
127
127
  height: 100%;
128
- background: var(--color-primary);
128
+ background: var(--color-base0D);
129
129
  border-radius: 9999px;
130
130
  }
131
131
 
@@ -135,8 +135,8 @@
135
135
  width: 1.25rem;
136
136
  height: 1.25rem;
137
137
  border-radius: 0.375rem;
138
- background: var(--color-bg);
139
- border: 2px solid var(--color-primary);
138
+ background: var(--color-base00);
139
+ border: 2px solid var(--color-base0D);
140
140
  cursor: pointer;
141
141
  transition: transform 0.15s ease, box-shadow 0.15s ease;
142
142
  margin-top: -0.375rem;
@@ -156,7 +156,7 @@
156
156
 
157
157
  .slider::-webkit-slider-thumb:hover {
158
158
  transform: scale(1.1);
159
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
159
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-base0D) 20%, transparent);
160
160
  }
161
161
 
162
162
  .slider:active::-webkit-slider-thumb {
@@ -164,7 +164,7 @@
164
164
  }
165
165
 
166
166
  .slider:focus-visible::-webkit-slider-thumb {
167
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
167
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-base0D) 30%, transparent);
168
168
  }
169
169
 
170
170
  /* Firefox */
@@ -173,15 +173,15 @@
173
173
  width: 1.25rem;
174
174
  height: 1.25rem;
175
175
  border-radius: 0.375rem;
176
- background: var(--color-bg);
177
- border: 2px solid var(--color-primary);
176
+ background: var(--color-base00);
177
+ border: 2px solid var(--color-base0D);
178
178
  cursor: pointer;
179
179
  transition: transform 0.15s ease, box-shadow 0.15s ease;
180
180
  }
181
181
 
182
182
  .slider::-moz-range-thumb:hover {
183
183
  transform: scale(1.1);
184
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
184
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-base0D) 20%, transparent);
185
185
  }
186
186
 
187
187
  .slider::-webkit-slider-runnable-track {
@@ -202,11 +202,11 @@
202
202
  align-items: center;
203
203
  margin-top: var(--space-2);
204
204
  font-size: var(--text-xs);
205
- color: var(--color-text-muted);
205
+ color: var(--color-base04);
206
206
  }
207
207
 
208
208
  .slider-current {
209
209
  font-weight: 500;
210
- color: var(--color-text);
210
+ color: var(--color-base05);
211
211
  }
212
212
  </style>
package/src/components/forms/SearchInput.svelte CHANGED
@@ -93,7 +93,7 @@
93
93
  display: flex;
94
94
  align-items: center;
95
95
  justify-content: center;
96
- color: var(--color-text-muted);
96
+ color: var(--color-base04);
97
97
  pointer-events: none;
98
98
  }
99
99
 
@@ -112,9 +112,9 @@
112
112
  padding-left: 2.5rem;
113
113
  padding-right: 2.25rem;
114
114
  font-size: var(--text-sm);
115
- color: var(--color-text-strong);
116
- background: var(--color-bg);
117
- border: 1px solid var(--color-border-muted);
115
+ color: var(--color-base07);
116
+ background: var(--color-base00);
117
+ border: 1px solid var(--color-base02);
118
118
  border-radius: var(--radius-lg);
119
119
  transition: var(--transition-colors);
120
120
  }
@@ -134,13 +134,13 @@
134
134
  }
135
135
 
136
136
  .search-field::placeholder {
137
- color: var(--color-text-muted);
137
+ color: var(--color-base04);
138
138
  }
139
139
 
140
140
  .search-field:focus {
141
141
  outline: none;
142
- border-color: var(--color-primary);
143
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
142
+ border-color: var(--color-base0D);
143
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
144
144
  }
145
145
 
146
146
  .search-field:disabled {
@@ -163,13 +163,13 @@
163
163
  background: transparent;
164
164
  border: none;
165
165
  border-radius: var(--radius-sm);
166
- color: var(--color-text-muted);
166
+ color: var(--color-base04);
167
167
  cursor: pointer;
168
168
  transition: var(--transition-colors);
169
169
  }
170
170
 
171
171
  .search-clear:hover {
172
- color: var(--color-text);
173
- background: var(--color-surface-hover);
172
+ color: var(--color-base05);
173
+ background: var(--color-base02);
174
174
  }
175
175
  </style>