sh-ui-cli 0.114.0 → 0.116.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 (25) hide show
  1. package/bin/sh-ui.mjs +70 -3
  2. package/data/changelog/versions.json +26 -0
  3. package/data/registry/react/components/rich-text-editor/index.module.tsx +523 -171
  4. package/data/registry/react/components/rich-text-editor/index.tailwind.tsx +596 -70
  5. package/data/registry/react/components/rich-text-editor/index.tsx +523 -171
  6. package/data/registry/react/components/rich-text-editor/styles.css +103 -5
  7. package/data/registry/react/components/rich-text-editor/styles.module.css +103 -5
  8. package/data/registry/react/registry.json +319 -963
  9. package/data/registry/react/tokens-used.json +4 -1
  10. package/package.json +1 -1
  11. package/src/add.mjs +31 -1
  12. package/src/commands.mjs +6 -0
  13. package/src/create/generator.js +4 -0
  14. package/src/doctor.mjs +14 -0
  15. package/src/init.mjs +19 -0
  16. package/src/levenshtein.mjs +36 -0
  17. package/src/list.mjs +13 -0
  18. package/src/mcp.mjs +14 -0
  19. package/src/migrate-bundled.mjs +14 -0
  20. package/src/migrate-v065.mjs +14 -0
  21. package/src/remove.mjs +15 -0
  22. package/src/rename-app.mjs +15 -0
  23. package/src/theme-extract.mjs +13 -0
  24. package/src/tokens-cmd.mjs +12 -0
  25. package/src/upgrade-cli.mjs +13 -0
package/data/registry/react/components/rich-text-editor/styles.css CHANGED
@@ -1,3 +1,25 @@
1
+ /* 본문 텍스트 색 팔레트 — 라이트/다크 추종 (RTE Color 확장이 var() 로 저장) */
2
+ :root {
3
+ --sh-ui-rte-c-moss: #2f5d4f;
4
+ --sh-ui-rte-c-red: #c0392b;
5
+ --sh-ui-rte-c-orange: #c2410c;
6
+ --sh-ui-rte-c-blue: #1d4ed8;
7
+ }
8
+ .dark {
9
+ --sh-ui-rte-c-moss: #5ba886;
10
+ --sh-ui-rte-c-red: #f1736a;
11
+ --sh-ui-rte-c-orange: #f0935a;
12
+ --sh-ui-rte-c-blue: #6ba2f2;
13
+ }
14
+ @media (prefers-color-scheme: dark) {
15
+ :root:not(.light):not(.dark) {
16
+ --sh-ui-rte-c-moss: #5ba886;
17
+ --sh-ui-rte-c-red: #f1736a;
18
+ --sh-ui-rte-c-orange: #f0935a;
19
+ --sh-ui-rte-c-blue: #6ba2f2;
20
+ }
21
+ }
22
+
1
23
  .sh-ui-rte {
2
24
  display: flex;
3
25
  flex-direction: column;
@@ -18,13 +40,15 @@
18
40
 
19
41
  /* ─── Toolbar ─── */
20
42
  .sh-ui-rte__toolbar {
43
+ background: var(--background-muted);
44
+ border-bottom: 1px solid var(--border);
45
+ }
46
+ .sh-ui-rte__toolbar-row {
21
47
  display: flex;
22
48
  flex-wrap: wrap;
23
49
  align-items: center;
24
50
  gap: 0.125rem;
25
51
  padding: var(--space-1) var(--space-2);
26
- background: var(--background-muted);
27
- border-bottom: 1px solid var(--border);
28
52
  }
29
53
  .sh-ui-rte__btn {
30
54
  display: inline-flex;
@@ -70,6 +94,64 @@
70
94
  background: var(--border);
71
95
  }
72
96
 
97
+ /* ─── Secondary panel (color · link) ─── */
98
+ .sh-ui-rte__panel {
99
+ display: flex;
100
+ align-items: center;
101
+ gap: var(--space-1);
102
+ padding: var(--space-1) var(--space-2);
103
+ border-top: 1px solid var(--border);
104
+ }
105
+ .sh-ui-rte__panel--swatches {
106
+ flex-wrap: wrap;
107
+ }
108
+ .sh-ui-rte__swatch {
109
+ display: inline-flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ width: 1.5rem;
113
+ height: 1.5rem;
114
+ border-radius: 9999px;
115
+ border: 1px solid var(--border);
116
+ cursor: pointer;
117
+ transition: border-color var(--duration-fast);
118
+ -webkit-tap-highlight-color: transparent;
119
+ }
120
+ .sh-ui-rte__swatch:hover {
121
+ border-color: var(--border-strong);
122
+ }
123
+ .sh-ui-rte__swatch:focus-visible {
124
+ outline: var(--border-width-strong) solid var(--ring);
125
+ outline-offset: 1px;
126
+ }
127
+ .sh-ui-rte__swatch.is-active {
128
+ border-color: var(--foreground);
129
+ }
130
+ .sh-ui-rte__swatch-a {
131
+ font-size: 10px;
132
+ font-weight: 600;
133
+ color: var(--foreground-muted);
134
+ }
135
+ .sh-ui-rte__link-input {
136
+ flex: 1;
137
+ min-width: 0;
138
+ height: 1.75rem;
139
+ padding: 0 var(--space-2);
140
+ font-size: 0.875rem;
141
+ background: var(--background);
142
+ color: var(--foreground);
143
+ border: 1px solid var(--border);
144
+ border-radius: calc(var(--radius) - 2px);
145
+ outline: none;
146
+ }
147
+ .sh-ui-rte__link-input:focus {
148
+ border-color: var(--foreground);
149
+ }
150
+ .sh-ui-rte__link-input:focus-visible {
151
+ outline: var(--border-width-strong) solid var(--ring);
152
+ outline-offset: 1px;
153
+ }
154
+
73
155
  /* ─── Content ─── */
74
156
  .sh-ui-rte__viewport {
75
157
  display: flex;
@@ -108,15 +190,27 @@
108
190
  font-weight: 600;
109
191
  line-height: 1.3;
110
192
  }
111
- .sh-ui-rte__content h1 { font-size: 1.5rem; }
112
- .sh-ui-rte__content h2 { font-size: 1.25rem; }
113
- .sh-ui-rte__content h3 { font-size: 1.125rem; }
193
+ .sh-ui-rte__content h1 {
194
+ font-size: 1.5rem;
195
+ }
196
+ .sh-ui-rte__content h2 {
197
+ font-size: 1.25rem;
198
+ }
199
+ .sh-ui-rte__content h3 {
200
+ font-size: 1.125rem;
201
+ }
114
202
 
115
203
  .sh-ui-rte__content ul,
116
204
  .sh-ui-rte__content ol {
117
205
  margin: 0 0 var(--space-3);
118
206
  padding-inline-start: var(--space-5);
119
207
  }
208
+ .sh-ui-rte__content ul {
209
+ list-style: disc;
210
+ }
211
+ .sh-ui-rte__content ol {
212
+ list-style: decimal;
213
+ }
120
214
  .sh-ui-rte__content li {
121
215
  margin-bottom: var(--space-1);
122
216
  }
@@ -174,6 +268,10 @@
174
268
  .sh-ui-rte__content a:hover {
175
269
  text-decoration-thickness: 2px;
176
270
  }
271
+ .sh-ui-rte__content u {
272
+ text-decoration: underline;
273
+ text-underline-offset: 2px;
274
+ }
177
275
 
178
276
  /* Placeholder (Tiptap extension) */
179
277
  .sh-ui-rte__content p.is-editor-empty:first-child::before,
package/data/registry/react/components/rich-text-editor/styles.module.css CHANGED
@@ -1,3 +1,25 @@
1
+ /* 본문 텍스트 색 팔레트 — 라이트/다크 추종 (RTE Color 확장이 var() 로 저장) */
2
+ :root {
3
+ --sh-ui-rte-c-moss: #2f5d4f;
4
+ --sh-ui-rte-c-red: #c0392b;
5
+ --sh-ui-rte-c-orange: #c2410c;
6
+ --sh-ui-rte-c-blue: #1d4ed8;
7
+ }
8
+ .dark {
9
+ --sh-ui-rte-c-moss: #5ba886;
10
+ --sh-ui-rte-c-red: #f1736a;
11
+ --sh-ui-rte-c-orange: #f0935a;
12
+ --sh-ui-rte-c-blue: #6ba2f2;
13
+ }
14
+ @media (prefers-color-scheme: dark) {
15
+ :root:not(.light):not(.dark) {
16
+ --sh-ui-rte-c-moss: #5ba886;
17
+ --sh-ui-rte-c-red: #f1736a;
18
+ --sh-ui-rte-c-orange: #f0935a;
19
+ --sh-ui-rte-c-blue: #6ba2f2;
20
+ }
21
+ }
22
+
1
23
  .rte {
2
24
  display: flex;
3
25
  flex-direction: column;
@@ -18,13 +40,15 @@
18
40
 
19
41
  /* ─── Toolbar ─── */
20
42
  .rte__toolbar {
43
+ background: var(--background-muted);
44
+ border-bottom: 1px solid var(--border);
45
+ }
46
+ .rte__toolbar-row {
21
47
  display: flex;
22
48
  flex-wrap: wrap;
23
49
  align-items: center;
24
50
  gap: 0.125rem;
25
51
  padding: var(--space-1) var(--space-2);
26
- background: var(--background-muted);
27
- border-bottom: 1px solid var(--border);
28
52
  }
29
53
  .rte__btn {
30
54
  display: inline-flex;
@@ -70,6 +94,64 @@
70
94
  background: var(--border);
71
95
  }
72
96
 
97
+ /* ─── Secondary panel (color · link) ─── */
98
+ .rte__panel {
99
+ display: flex;
100
+ align-items: center;
101
+ gap: var(--space-1);
102
+ padding: var(--space-1) var(--space-2);
103
+ border-top: 1px solid var(--border);
104
+ }
105
+ .rte__panel--swatches {
106
+ flex-wrap: wrap;
107
+ }
108
+ .rte__swatch {
109
+ display: inline-flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ width: 1.5rem;
113
+ height: 1.5rem;
114
+ border-radius: 9999px;
115
+ border: 1px solid var(--border);
116
+ cursor: pointer;
117
+ transition: border-color var(--duration-fast);
118
+ -webkit-tap-highlight-color: transparent;
119
+ }
120
+ .rte__swatch:hover {
121
+ border-color: var(--border-strong);
122
+ }
123
+ .rte__swatch:focus-visible {
124
+ outline: var(--border-width-strong) solid var(--ring);
125
+ outline-offset: 1px;
126
+ }
127
+ .rte__swatch.is-active {
128
+ border-color: var(--foreground);
129
+ }
130
+ .rte__swatch-a {
131
+ font-size: 10px;
132
+ font-weight: 600;
133
+ color: var(--foreground-muted);
134
+ }
135
+ .rte__link-input {
136
+ flex: 1;
137
+ min-width: 0;
138
+ height: 1.75rem;
139
+ padding: 0 var(--space-2);
140
+ font-size: 0.875rem;
141
+ background: var(--background);
142
+ color: var(--foreground);
143
+ border: 1px solid var(--border);
144
+ border-radius: calc(var(--radius) - 2px);
145
+ outline: none;
146
+ }
147
+ .rte__link-input:focus {
148
+ border-color: var(--foreground);
149
+ }
150
+ .rte__link-input:focus-visible {
151
+ outline: var(--border-width-strong) solid var(--ring);
152
+ outline-offset: 1px;
153
+ }
154
+
73
155
  /* ─── Content ─── */
74
156
  .rte__viewport {
75
157
  display: flex;
@@ -108,15 +190,27 @@
108
190
  font-weight: 600;
109
191
  line-height: 1.3;
110
192
  }
111
- .rte__content h1 { font-size: 1.5rem; }
112
- .rte__content h2 { font-size: 1.25rem; }
113
- .rte__content h3 { font-size: 1.125rem; }
193
+ .rte__content h1 {
194
+ font-size: 1.5rem;
195
+ }
196
+ .rte__content h2 {
197
+ font-size: 1.25rem;
198
+ }
199
+ .rte__content h3 {
200
+ font-size: 1.125rem;
201
+ }
114
202
 
115
203
  .rte__content ul,
116
204
  .rte__content ol {
117
205
  margin: 0 0 var(--space-3);
118
206
  padding-inline-start: var(--space-5);
119
207
  }
208
+ .rte__content ul {
209
+ list-style: disc;
210
+ }
211
+ .rte__content ol {
212
+ list-style: decimal;
213
+ }
120
214
  .rte__content li {
121
215
  margin-bottom: var(--space-1);
122
216
  }
@@ -174,6 +268,10 @@
174
268
  .rte__content a:hover {
175
269
  text-decoration-thickness: 2px;
176
270
  }
271
+ .rte__content u {
272
+ text-decoration: underline;
273
+ text-underline-offset: 2px;
274
+ }
177
275
 
178
276
  /* Placeholder (Tiptap extension) */
179
277
  .rte__content p.is-editor-empty:first-child::before,