@wildwinter/app-shell 0.1.0 → 0.4.1

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.
package/dist/menu.js ADDED
@@ -0,0 +1,3 @@
1
+ export { PANE_MENU } from './chunk-KQT3XYRS.js';
2
+ //# sourceMappingURL=menu.js.map
3
+ //# sourceMappingURL=menu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"menu.js"}
@@ -0,0 +1,114 @@
1
+ /* src/pane-shell.css */
2
+ .pane-shell {
3
+ flex: 1;
4
+ display: flex;
5
+ flex-direction: column;
6
+ min-height: 0;
7
+ }
8
+ .topbar {
9
+ display: flex;
10
+ align-items: center;
11
+ gap: 10px;
12
+ padding: 8px 14px;
13
+ border-bottom: 1px solid var(--line-soft, var(--line));
14
+ background: var(--surface);
15
+ }
16
+ .topbar-lead {
17
+ display: flex;
18
+ align-items: center;
19
+ gap: 8px;
20
+ min-width: 0;
21
+ }
22
+ .topbar-spacer {
23
+ flex: 1;
24
+ }
25
+ .topbar-trail {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 10px;
29
+ }
30
+ .pane-toggle {
31
+ color: var(--muted);
32
+ font: inherit;
33
+ font-size: 0.95rem;
34
+ background: none;
35
+ border: 0;
36
+ border-radius: var(--radius-sm);
37
+ padding: 2px 8px;
38
+ cursor: pointer;
39
+ }
40
+ .pane-toggle:hover {
41
+ color: var(--accent);
42
+ }
43
+ .panes {
44
+ --nav-open-w: 14rem;
45
+ --insp-open-w: 22rem;
46
+ --nav-w: var(--nav-open-w);
47
+ --insp-w: var(--insp-open-w);
48
+ position: relative;
49
+ flex: 1;
50
+ min-height: 0;
51
+ display: grid;
52
+ grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--insp-w);
53
+ transition: grid-template-columns var(--dur-panel) var(--ease-standard);
54
+ }
55
+ .panes.no-nav {
56
+ --nav-w: 0px;
57
+ }
58
+ .panes.no-inspector {
59
+ --insp-w: 0px;
60
+ }
61
+ .pane {
62
+ overflow: hidden;
63
+ min-height: 0;
64
+ }
65
+ .pane-inner {
66
+ height: 100%;
67
+ overflow: auto;
68
+ }
69
+ .pane-nav .pane-inner {
70
+ width: var(--nav-open-w);
71
+ }
72
+ .pane-inspector .pane-inner {
73
+ width: var(--insp-open-w);
74
+ }
75
+ .pane-centre {
76
+ min-width: 0;
77
+ min-height: 0;
78
+ overflow: auto;
79
+ }
80
+ .panes > .pane {
81
+ transition: opacity var(--dur-panel) var(--ease-standard);
82
+ }
83
+ .panes.no-nav > .pane-nav,
84
+ .panes.no-inspector > .pane-inspector {
85
+ opacity: 0;
86
+ pointer-events: none;
87
+ }
88
+ .pane-resizer {
89
+ position: absolute;
90
+ top: 0;
91
+ bottom: 0;
92
+ width: 7px;
93
+ z-index: 6;
94
+ cursor: col-resize;
95
+ touch-action: none;
96
+ }
97
+ .pane-resizer-nav {
98
+ left: calc(var(--nav-w) - 3px);
99
+ }
100
+ .pane-resizer-insp {
101
+ right: calc(var(--insp-w) - 3px);
102
+ }
103
+ .panes.no-nav .pane-resizer-nav,
104
+ .panes.no-inspector .pane-resizer-insp {
105
+ display: none;
106
+ }
107
+ body.pane-resizing {
108
+ cursor: col-resize;
109
+ user-select: none;
110
+ }
111
+ body.pane-resizing .panes {
112
+ transition: none;
113
+ }
114
+ /*# sourceMappingURL=pane-shell.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/pane-shell.css"],"sourcesContent":["/* ============================================================================\n The pane-shell frame: top bar + nav | centre | inspector grid with collapse\n and drag-resize. Reads the shared token grammar (tokens.css) and the app's\n palette vars (--surface / --ink / --muted / --line / --accent, and an\n optional --line-soft). App-specifics stay in the host: the window-drag region\n (-webkit-app-region) and traffic-light padding, if the app is frameless, are\n applied by the host over .topbar; the host also fills the pane bodies and the\n top-bar lead/trail slots.\n ============================================================================ */\n\n.pane-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }\n\n.topbar {\n display: flex; align-items: center; gap: 10px;\n padding: 8px 14px;\n border-bottom: 1px solid var(--line-soft, var(--line));\n background: var(--surface);\n}\n.topbar-lead { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.topbar-spacer { flex: 1; }\n.topbar-trail { display: flex; align-items: center; gap: 10px; }\n.pane-toggle {\n color: var(--muted); font: inherit; font-size: 0.95rem;\n background: none; border: 0; border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer;\n}\n.pane-toggle:hover { color: var(--accent); }\n\n.panes {\n --nav-open-w: 14rem; --insp-open-w: 22rem;\n --nav-w: var(--nav-open-w); --insp-w: var(--insp-open-w);\n position: relative; flex: 1; min-height: 0;\n display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--insp-w);\n transition: grid-template-columns var(--dur-panel) var(--ease-standard);\n}\n.panes.no-nav { --nav-w: 0px; }\n.panes.no-inspector { --insp-w: 0px; }\n\n/* Side panes clip; their inner holds a fixed width so a collapse wipes cleanly\n rather than reflowing while the column animates to 0. */\n.pane { overflow: hidden; min-height: 0; }\n.pane-inner { height: 100%; overflow: auto; }\n.pane-nav .pane-inner { width: var(--nav-open-w); }\n.pane-inspector .pane-inner { width: var(--insp-open-w); }\n.pane-centre { min-width: 0; min-height: 0; overflow: auto; }\n\n.panes > .pane { transition: opacity var(--dur-panel) var(--ease-standard); }\n.panes.no-nav > .pane-nav, .panes.no-inspector > .pane-inspector { opacity: 0; pointer-events: none; }\n\n/* Drag seams over each side pane's inner edge, tracking the grid columns. */\n.pane-resizer { position: absolute; top: 0; bottom: 0; width: 7px; z-index: 6; cursor: col-resize; touch-action: none; }\n.pane-resizer-nav { left: calc(var(--nav-w) - 3px); }\n.pane-resizer-insp { right: calc(var(--insp-w) - 3px); }\n.panes.no-nav .pane-resizer-nav, .panes.no-inspector .pane-resizer-insp { display: none; }\nbody.pane-resizing { cursor: col-resize; user-select: none; }\nbody.pane-resizing .panes { transition: none; } /* 1:1 feel: suspend the grid tween mid-drag */\n"],"mappings":";AAUA,CAAC;AAAa,QAAM;AAAG,WAAS;AAAM,kBAAgB;AAAQ,cAAY;AAAG;AAE7E,CAAC;AACC,WAAS;AAAM,eAAa;AAAQ,OAAK;AACzC,WAAS,IAAI;AACb,iBAAe,IAAI,MAAM,IAAI,WAAW,EAAE,IAAI;AAC9C,cAAY,IAAI;AAClB;AACA,CAAC;AAAc,WAAS;AAAM,eAAa;AAAQ,OAAK;AAAK,aAAW;AAAG;AAC3E,CAAC;AAAgB,QAAM;AAAG;AAC1B,CAAC;AAAe,WAAS;AAAM,eAAa;AAAQ,OAAK;AAAM;AAC/D,CAAC;AACC,SAAO,IAAI;AAAU,QAAM;AAAS,aAAW;AAC/C,cAAY;AAAM,UAAQ;AAAG,iBAAe,IAAI;AAAc,WAAS,IAAI;AAAK,UAAQ;AAC1F;AACA,CAJC,WAIW;AAAS,SAAO,IAAI;AAAW;AAE3C,CAAC;AACC,gBAAc;AAAO,iBAAe;AACpC,WAAS,IAAI;AAAe,YAAU,IAAI;AAC1C,YAAU;AAAU,QAAM;AAAG,cAAY;AACzC,WAAS;AAAM,yBAAuB,IAAI,SAAS,OAAO,CAAC,EAAE,KAAK,IAAI;AACtE,cAAY,sBAAsB,IAAI,aAAa,IAAI;AACzD;AACA,CAPC,KAOK,CAAC;AAAS,WAAS;AAAK;AAC9B,CARC,KAQK,CAAC;AAAe,YAAU;AAAK;AAIrC,CAAC;AAAO,YAAU;AAAQ,cAAY;AAAG;AACzC,CAAC;AAAa,UAAQ;AAAM,YAAU;AAAM;AAC5C,CAAC,SAAS,CADT;AACuB,SAAO,IAAI;AAAe;AAClD,CAAC,eAAe,CAFf;AAE6B,SAAO,IAAI;AAAgB;AACzD,CAAC;AAAc,aAAW;AAAG,cAAY;AAAG,YAAU;AAAM;AAE5D,CAlBC,MAkBM,EAAE,CANR;AAMgB,cAAY,QAAQ,IAAI,aAAa,IAAI;AAAkB;AAC5E,CAnBC,KAmBK,CAZC,OAYO,EAAE,CALf;AAK0B,CAnB1B,KAmBgC,CAX1B,aAWwC,EAAE,CAJhD;AAIkE,WAAS;AAAG,kBAAgB;AAAM;AAGrG,CAAC;AAAe,YAAU;AAAU,OAAK;AAAG,UAAQ;AAAG,SAAO;AAAK,WAAS;AAAG,UAAQ;AAAY,gBAAc;AAAM;AACvH,CAAC;AAAmB,QAAM,KAAK,IAAI,SAAS,EAAE;AAAM;AACpD,CAAC;AAAoB,SAAO,KAAK,IAAI,UAAU,EAAE;AAAM;AACvD,CAzBC,KAyBK,CAlBC,OAkBO,CAFb;AAEgC,CAzBhC,KAyBsC,CAjBhC,aAiB8C,CADpD;AACyE,WAAS;AAAM;AACzF,IAAI,CAAC;AAAgB,UAAQ;AAAY,eAAa;AAAM;AAC5D,IAAI,CADC,cACc,CA3BlB;AA2B2B,cAAY;AAAM;","names":[]}
@@ -0,0 +1,2 @@
1
+
2
+ export { }
@@ -0,0 +1,2 @@
1
+
2
+ export { }
@@ -0,0 +1,266 @@
1
+ /* src/settings.css */
2
+ .settings-dialog {
3
+ padding: 0;
4
+ border: 1px solid var(--line);
5
+ border-radius: var(--radius-lg);
6
+ background: var(--surface);
7
+ color: var(--ink);
8
+ width: min(760px, 92vw);
9
+ max-height: 82vh;
10
+ box-shadow: var(--shadow-3);
11
+ font: 14px var(--font-ui, system-ui, sans-serif);
12
+ }
13
+ .settings-dialog::backdrop {
14
+ background: color-mix(in oklab, #000 42%, transparent);
15
+ }
16
+ .settings-form {
17
+ display: flex;
18
+ flex-direction: column;
19
+ max-height: 82vh;
20
+ }
21
+ .settings-title {
22
+ margin: 0;
23
+ padding: 16px 20px;
24
+ font-family: var(--font-read, inherit);
25
+ font-size: 1.15rem;
26
+ font-weight: 600;
27
+ border-bottom: 1px solid var(--line-soft, var(--line));
28
+ }
29
+ .settings-body {
30
+ display: flex;
31
+ min-height: 0;
32
+ flex: 1;
33
+ }
34
+ .settings-tabs {
35
+ flex: none;
36
+ width: 12rem;
37
+ overflow-y: auto;
38
+ padding: 10px 8px;
39
+ border-right: 1px solid var(--line-soft, var(--line));
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: 1px;
43
+ }
44
+ .settings-group {
45
+ padding: 12px 8px 4px;
46
+ font: 600 0.62rem/1 var(--font-ui);
47
+ text-transform: uppercase;
48
+ letter-spacing: 0.07em;
49
+ color: var(--muted);
50
+ }
51
+ .settings-tab {
52
+ text-align: left;
53
+ width: 100%;
54
+ padding: 6px 10px;
55
+ border: 0;
56
+ border-radius: var(--radius-sm);
57
+ background: none;
58
+ color: var(--ink);
59
+ font: inherit;
60
+ font-size: 0.88rem;
61
+ cursor: pointer;
62
+ }
63
+ .settings-tab:hover {
64
+ background: var(--accent-soft, color-mix(in oklab, var(--accent) 12%, transparent));
65
+ }
66
+ .settings-tab.active {
67
+ background: var(--accent-soft, color-mix(in oklab, var(--accent) 16%, transparent));
68
+ color: var(--accent);
69
+ font-weight: 500;
70
+ }
71
+ .settings-panels {
72
+ flex: 1;
73
+ min-width: 0;
74
+ overflow-y: auto;
75
+ padding: 18px 22px;
76
+ }
77
+ .settings-panel {
78
+ display: flex;
79
+ flex-direction: column;
80
+ gap: 14px;
81
+ }
82
+ .settings-panel[hidden] {
83
+ display: none;
84
+ }
85
+ .settings-actions {
86
+ display: flex;
87
+ align-items: center;
88
+ gap: 10px;
89
+ padding: 12px 20px;
90
+ border-top: 1px solid var(--line-soft, var(--line));
91
+ }
92
+ .settings-error {
93
+ flex: 1;
94
+ margin: 0;
95
+ color: var(--danger);
96
+ font-size: 0.82rem;
97
+ }
98
+ .settings-actions button {
99
+ font: inherit;
100
+ padding: 6px 16px;
101
+ border: 1px solid var(--line);
102
+ border-radius: var(--radius-sm);
103
+ background: none;
104
+ color: var(--muted);
105
+ cursor: pointer;
106
+ }
107
+ .settings-actions button:hover {
108
+ color: var(--accent);
109
+ border-color: var(--accent);
110
+ }
111
+ .settings-actions .primary {
112
+ background: var(--accent);
113
+ color: var(--surface);
114
+ border-color: transparent;
115
+ font-weight: 500;
116
+ }
117
+ .settings-actions .primary:hover {
118
+ color: var(--surface);
119
+ filter: brightness(1.06);
120
+ }
121
+ .set-row {
122
+ display: flex;
123
+ flex-direction: column;
124
+ gap: 6px;
125
+ padding: 6px 0;
126
+ border-bottom: 1px solid var(--line-soft, var(--line));
127
+ }
128
+ .set-rowline {
129
+ display: flex;
130
+ align-items: center;
131
+ gap: 8px;
132
+ }
133
+ .set-details {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 8px;
137
+ padding: 6px 0 4px 26px;
138
+ }
139
+ .set-details[hidden] {
140
+ display: none;
141
+ }
142
+ .set-expand {
143
+ flex: none;
144
+ width: 18px;
145
+ height: 18px;
146
+ border: 0;
147
+ background: none;
148
+ cursor: pointer;
149
+ display: flex;
150
+ align-items: center;
151
+ justify-content: center;
152
+ padding: 0;
153
+ }
154
+ .set-expand::before {
155
+ content: "";
156
+ width: 0;
157
+ height: 0;
158
+ border-left: 6px solid currentColor;
159
+ border-top: 4.5px solid transparent;
160
+ border-bottom: 4.5px solid transparent;
161
+ transform-origin: 35% 50%;
162
+ transition: transform 0.12s ease;
163
+ }
164
+ .set-expand {
165
+ color: var(--muted);
166
+ }
167
+ .set-expand:hover,
168
+ .set-expand.open {
169
+ color: var(--accent);
170
+ }
171
+ .set-expand.open::before {
172
+ transform: rotate(90deg);
173
+ }
174
+ .set-rowline input,
175
+ .set-rowline select,
176
+ .set-details input,
177
+ .set-details select {
178
+ font: inherit;
179
+ font-size: 0.85rem;
180
+ background: var(--bg);
181
+ color: var(--ink);
182
+ border: 1px solid var(--line);
183
+ border-radius: var(--radius-sm);
184
+ padding: 4px 8px;
185
+ }
186
+ .set-rowline input.set-name {
187
+ flex: 1;
188
+ min-width: 6rem;
189
+ }
190
+ .set-rowline input.invalid,
191
+ .set-details input.invalid {
192
+ border-color: var(--danger);
193
+ }
194
+ .set-rowline input:focus-visible,
195
+ .set-rowline select:focus-visible,
196
+ .set-details input:focus-visible,
197
+ .set-details select:focus-visible {
198
+ outline: 2px solid var(--accent);
199
+ outline-offset: 0;
200
+ border-color: var(--accent);
201
+ }
202
+ .shell-icon {
203
+ flex: none;
204
+ width: 24px;
205
+ height: 24px;
206
+ border: 1px solid var(--line);
207
+ border-radius: var(--radius-sm);
208
+ background: none;
209
+ color: var(--muted);
210
+ cursor: pointer;
211
+ font-size: 0.8rem;
212
+ }
213
+ .shell-icon:hover:not(:disabled) {
214
+ color: var(--accent);
215
+ border-color: var(--accent);
216
+ }
217
+ .shell-icon:disabled {
218
+ opacity: 0.4;
219
+ cursor: default;
220
+ }
221
+ .shell-icon.danger:hover:not(:disabled) {
222
+ color: var(--surface);
223
+ background: var(--danger);
224
+ border-color: var(--danger);
225
+ }
226
+ .shell-labelled {
227
+ display: flex;
228
+ align-items: center;
229
+ gap: 8px;
230
+ font-size: 0.85rem;
231
+ }
232
+ .shell-fieldcap {
233
+ color: var(--muted);
234
+ min-width: 5rem;
235
+ }
236
+ .shell-tags {
237
+ display: flex;
238
+ flex-wrap: wrap;
239
+ gap: 5px;
240
+ align-items: center;
241
+ }
242
+ .shell-tag {
243
+ display: inline-flex;
244
+ align-items: center;
245
+ gap: 4px;
246
+ font-size: 0.76rem;
247
+ padding: 2px 4px 2px 9px;
248
+ border: 1px solid var(--line);
249
+ border-radius: var(--radius-pill);
250
+ color: var(--ink);
251
+ }
252
+ .shell-tag-x {
253
+ border: 0;
254
+ background: none;
255
+ color: var(--muted);
256
+ cursor: pointer;
257
+ font-size: 0.7rem;
258
+ padding: 0 2px;
259
+ }
260
+ .shell-tag-x:hover {
261
+ color: var(--danger);
262
+ }
263
+ .shell-tag-input {
264
+ min-width: 8rem;
265
+ }
266
+ /*# sourceMappingURL=settings.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/settings.css"],"sourcesContent":["/* ============================================================================\n The settings dialog + list-editor styling. Reads the shared token grammar\n (tokens.css) and the app's palette vars (--surface / --ink / --muted / --line\n / --accent / --danger / --bg, optional --line-soft / --accent-soft). Neutral\n class names; the app supplies section content.\n ============================================================================ */\n\n.settings-dialog {\n padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);\n background: var(--surface); color: var(--ink);\n width: min(760px, 92vw); max-height: 82vh;\n box-shadow: var(--shadow-3);\n font: 14px var(--font-ui, system-ui, sans-serif);\n}\n.settings-dialog::backdrop { background: color-mix(in oklab, #000 42%, transparent); }\n.settings-form { display: flex; flex-direction: column; max-height: 82vh; }\n.settings-title { margin: 0; padding: 16px 20px; font-family: var(--font-read, inherit); font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid var(--line-soft, var(--line)); }\n\n.settings-body { display: flex; min-height: 0; flex: 1; }\n.settings-tabs { flex: none; width: 12rem; overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--line-soft, var(--line)); display: flex; flex-direction: column; gap: 1px; }\n.settings-group { padding: 12px 8px 4px; font: 600 0.62rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }\n.settings-tab { text-align: left; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 0.88rem; cursor: pointer; }\n.settings-tab:hover { background: var(--accent-soft, color-mix(in oklab, var(--accent) 12%, transparent)); }\n.settings-tab.active { background: var(--accent-soft, color-mix(in oklab, var(--accent) 16%, transparent)); color: var(--accent); font-weight: 500; }\n\n.settings-panels { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px; }\n.settings-panel { display: flex; flex-direction: column; gap: 14px; }\n/* A `display` on the class beats the UA's `[hidden] { display: none }`, so the\n panels the tab switcher hides would all render at once. Opt back out. */\n.settings-panel[hidden] { display: none; }\n\n.settings-actions { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line-soft, var(--line)); }\n.settings-error { flex: 1; margin: 0; color: var(--danger); font-size: 0.82rem; }\n.settings-actions button { font: inherit; padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }\n.settings-actions button:hover { color: var(--accent); border-color: var(--accent); }\n.settings-actions .primary { background: var(--accent); color: var(--surface); border-color: transparent; font-weight: 500; }\n.settings-actions .primary:hover { color: var(--surface); filter: brightness(1.06); }\n\n/* --- list editor (rows + disclosure + inline field kit) --------------------- */\n.set-row { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line-soft, var(--line)); }\n.set-rowline { display: flex; align-items: center; gap: 8px; }\n.set-details { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px 26px; }\n.set-details[hidden] { display: none; } /* see .settings-panel[hidden] */\n/* The disclosure triangle is drawn, not typed: U+25B8/25BE are \"small\"\n triangles that stay hairline-thin at any font size. Rotates when open. */\n.set-expand { flex: none; width: 18px; height: 18px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }\n.set-expand::before {\n content: \"\"; width: 0; height: 0;\n border-left: 6px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;\n transform-origin: 35% 50%; transition: transform 0.12s ease;\n}\n.set-expand { color: var(--muted); }\n.set-expand:hover, .set-expand.open { color: var(--accent); }\n.set-expand.open::before { transform: rotate(90deg); }\n\n.set-rowline input, .set-rowline select, .set-details input, .set-details select {\n font: inherit; font-size: 0.85rem; background: var(--bg); color: var(--ink);\n border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px;\n}\n.set-rowline input.set-name { flex: 1; min-width: 6rem; }\n.set-rowline input.invalid, .set-details input.invalid { border-color: var(--danger); }\n.set-rowline input:focus-visible, .set-rowline select:focus-visible,\n.set-details input:focus-visible, .set-details select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }\n\n.shell-icon { flex: none; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; font-size: 0.8rem; }\n.shell-icon:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }\n.shell-icon:disabled { opacity: 0.4; cursor: default; }\n.shell-icon.danger:hover:not(:disabled) { color: var(--surface); background: var(--danger); border-color: var(--danger); }\n\n.shell-labelled { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }\n.shell-fieldcap { color: var(--muted); min-width: 5rem; }\n\n.shell-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }\n.shell-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; padding: 2px 4px 2px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); }\n.shell-tag-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 0.7rem; padding: 0 2px; }\n.shell-tag-x:hover { color: var(--danger); }\n.shell-tag-input { min-width: 8rem; }\n"],"mappings":"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","names":[]}
@@ -0,0 +1,2 @@
1
+
2
+ export { }
@@ -0,0 +1,2 @@
1
+
2
+ export { }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wildwinter/app-shell",
3
- "version": "0.1.0",
3
+ "version": "0.4.1",
4
4
  "description": "The shared shell for the editor family (Patterpad, Storylet Studio): the app-agnostic design-token grammar, the per-entity colour hash, and the vanilla-TS DOM primitive. Two palettes, one grammar - each app supplies its own palette/fonts over these tokens.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -25,7 +25,17 @@
25
25
  "import": "./dist/index.js",
26
26
  "require": "./dist/index.cjs"
27
27
  },
28
- "./tokens.css": "./dist/tokens.css"
28
+ "./tokens.css": "./dist/tokens.css",
29
+ "./pane-shell.css": "./dist/pane-shell.css",
30
+ "./menu": {
31
+ "types": "./dist/menu.d.ts",
32
+ "import": "./dist/menu.js",
33
+ "require": "./dist/menu.cjs"
34
+ },
35
+ "./settings.css": {
36
+ "import": "./dist/settings.css",
37
+ "require": "./dist/settings.css"
38
+ }
29
39
  },
30
40
  "files": [
31
41
  "dist",