@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/chunk-KQT3XYRS.js +10 -0
- package/dist/chunk-KQT3XYRS.js.map +1 -0
- package/dist/index.cjs +367 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +120 -1
- package/dist/index.d.ts +120 -1
- package/dist/index.js +353 -1
- package/dist/index.js.map +1 -1
- package/dist/menu.cjs +12 -0
- package/dist/menu.cjs.map +1 -0
- package/dist/menu.d.cts +13 -0
- package/dist/menu.d.ts +13 -0
- package/dist/menu.js +3 -0
- package/dist/menu.js.map +1 -0
- package/dist/pane-shell.css +114 -0
- package/dist/pane-shell.css.map +1 -0
- package/dist/pane-shell.d.cts +2 -0
- package/dist/pane-shell.d.ts +2 -0
- package/dist/settings.css +266 -0
- package/dist/settings.css.map +1 -0
- package/dist/settings.d.cts +2 -0
- package/dist/settings.d.ts +2 -0
- package/package.json +12 -2
package/dist/menu.js
ADDED
package/dist/menu.js.map
ADDED
|
@@ -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,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":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wildwinter/app-shell",
|
|
3
|
-
"version": "0.1
|
|
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",
|