@wildwinter/app-shell 0.16.0 → 0.18.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.
- package/README.md +52 -4
- package/dist/index.cjs +105 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +87 -1
- package/dist/index.d.ts +87 -1
- package/dist/index.js +103 -1
- package/dist/index.js.map +1 -1
- package/dist/notes-editor.css +1 -1
- package/dist/notes-editor.css.map +1 -1
- package/dist/save.css +37 -0
- package/dist/save.css.map +1 -0
- package/dist/stale.css +30 -0
- package/dist/stale.css.map +1 -0
- package/dist/stepper.css +98 -0
- package/dist/stepper.css.map +1 -0
- package/dist/tokens.css +2 -1
- package/dist/tokens.css.map +1 -1
- package/package.json +13 -1
package/dist/notes-editor.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/notes-editor.css"],"sourcesContent":["/* The documentation-notes editor (notes-editor.ts): a modal, because notes are\n prose and the popover Patterpad tried first was too cramped. */\n.shell-notes {\n width: min(560px, 92vw);\n border: 1px solid var(--line); border-radius: var(--radius-md);\n background: var(--surface); color: var(--ink);\n padding: 16px 18px;\n box-shadow: var(--shadow-2, var(--shadow-1));\n}\n.shell-notes::backdrop { background: rgba(0, 0, 0, 0.28); }\n.shell-notes-title { font: 600 0.95rem/1.3 var(--font-ui); margin-bottom: 10px; }\n.shell-notes-body { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }\n.shell-notes-caption {\n font: 0.72rem/1 var(--font-ui); color: var(--muted);\n text-transform: uppercase; letter-spacing: 0.04em;\n}\n.shell-notes-class { display: flex; flex-direction: column; gap: 4px; }\n.shell-notes-text {\n width: 100%; box-sizing: border-box; resize: vertical;\n border: 1px solid var(--line-soft); border-radius: var(--radius-sm);\n background: var(--card); color: var(--ink);\n font: 0.85rem/1.45 var(--font-read, var(--font-ui)); padding: 6px 8px;\n}\n.shell-notes-text:focus { outline: none; border-color: var(--accent); }\n/* Inherited notes read as CONTEXT rather than as fields: no box, no cursor. */\n.shell-notes-inherited {\n display: flex; flex-direction: column; gap: 6px;\n padding-bottom: 4px; border-bottom: 1px solid var(--line-soft);\n}\n.shell-notes-level { display: flex; flex-direction: column; gap: 2px; }\n.shell-notes-level-label { font: 0.72rem/1 var(--font-ui); color: var(--muted); }\n.shell-notes-line { font: 0.82rem/1.4 var(--font-read, var(--font-ui)); color: var(--muted); }\n.shell-notes-cls {\n font: 0.68rem/1 var(--font-ui); color: var(--muted);\n border: 1px solid var(--line-soft); border-radius:
|
|
1
|
+
{"version":3,"sources":["../src/notes-editor.css"],"sourcesContent":["/* The documentation-notes editor (notes-editor.ts): a modal, because notes are\n prose and the popover Patterpad tried first was too cramped. */\n.shell-notes {\n width: min(560px, 92vw);\n border: 1px solid var(--line); border-radius: var(--radius-md);\n background: var(--surface); color: var(--ink);\n padding: 16px 18px;\n box-shadow: var(--shadow-2, var(--shadow-1));\n}\n.shell-notes::backdrop { background: rgba(0, 0, 0, 0.28); }\n.shell-notes-title { font: 600 0.95rem/1.3 var(--font-ui); margin-bottom: 10px; }\n.shell-notes-body { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }\n.shell-notes-caption {\n font: 0.72rem/1 var(--font-ui); color: var(--muted);\n text-transform: uppercase; letter-spacing: 0.04em;\n}\n.shell-notes-class { display: flex; flex-direction: column; gap: 4px; }\n.shell-notes-text {\n width: 100%; box-sizing: border-box; resize: vertical;\n border: 1px solid var(--line-soft); border-radius: var(--radius-sm);\n background: var(--card); color: var(--ink);\n font: 0.85rem/1.45 var(--font-read, var(--font-ui)); padding: 6px 8px;\n}\n.shell-notes-text:focus { outline: none; border-color: var(--accent); }\n/* Inherited notes read as CONTEXT rather than as fields: no box, no cursor. */\n.shell-notes-inherited {\n display: flex; flex-direction: column; gap: 6px;\n padding-bottom: 4px; border-bottom: 1px solid var(--line-soft);\n}\n.shell-notes-level { display: flex; flex-direction: column; gap: 2px; }\n.shell-notes-level-label { font: 0.72rem/1 var(--font-ui); color: var(--muted); }\n.shell-notes-line { font: 0.82rem/1.4 var(--font-read, var(--font-ui)); color: var(--muted); }\n.shell-notes-cls {\n font: 0.68rem/1 var(--font-ui); color: var(--muted);\n border: 1px solid var(--line-soft); border-radius: var(--radius-pill);\n padding: 1px 6px; margin-right: 6px;\n}\n.shell-notes-hint { font: 0.72rem/1 var(--font-ui); color: var(--muted); margin: 0; }\n.shell-notes-add { font: 0.78rem/1 var(--font-ui); align-self: flex-start; }\n.shell-notes-actions { display: flex; justify-content: flex-end; margin-top: 12px; }\n.shell-notes-btn {\n font: 0.8rem/1 var(--font-ui); padding: 6px 14px;\n border-radius: var(--radius-sm); border: 1px solid var(--line);\n background: var(--card); color: var(--ink); cursor: pointer;\n}\n.shell-notes-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }\n"],"mappings":";AAEA,CAAC;AACC,SAAO,IAAI,KAAK,EAAE;AAClB,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAClD,cAAY,IAAI;AAAY,SAAO,IAAI;AACvC,WAAS,KAAK;AACd,cAAY,IAAI,UAAU,EAAE,IAAI;AAClC;AACA,CAPC,WAOW;AAAa,cAAY,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAAO;AAC1D,CAAC;AAAoB,QAAM,IAAI,OAAO,CAAC,IAAI,IAAI;AAAY,iBAAe;AAAM;AAChF,CAAC;AAAmB,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAAM,cAAY;AAAM,cAAY;AAAM;AAC1G,CAAC;AACC,QAAM,OAAO,CAAC,EAAE,IAAI;AAAY,SAAO,IAAI;AAC3C,kBAAgB;AAAW,kBAAgB;AAC7C;AACA,CAAC;AAAoB,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAAK;AACtE,CAAC;AACC,SAAO;AAAM,cAAY;AAAY,UAAQ;AAC7C,UAAQ,IAAI,MAAM,IAAI;AAAc,iBAAe,IAAI;AACvD,cAAY,IAAI;AAAS,SAAO,IAAI;AACpC,QAAM,OAAO,CAAC,KAAK,IAAI,WAAW,EAAE,IAAI;AAAa,WAAS,IAAI;AACpE;AACA,CANC,gBAMgB;AAAS,WAAS;AAAM,gBAAc,IAAI;AAAW;AAEtE,CAAC;AACC,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAC5C,kBAAgB;AAAK,iBAAe,IAAI,MAAM,IAAI;AACpD;AACA,CAAC;AAAoB,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAAK;AACtE,CAAC;AAA0B,QAAM,OAAO,CAAC,EAAE,IAAI;AAAY,SAAO,IAAI;AAAU;AAChF,CAAC;AAAmB,QAAM,OAAO,CAAC,IAAI,IAAI,WAAW,EAAE,IAAI;AAAa,SAAO,IAAI;AAAU;AAC7F,CAAC;AACC,QAAM,OAAO,CAAC,EAAE,IAAI;AAAY,SAAO,IAAI;AAC3C,UAAQ,IAAI,MAAM,IAAI;AAAc,iBAAe,IAAI;AACvD,WAAS,IAAI;AAAK,gBAAc;AAClC;AACA,CAAC;AAAmB,QAAM,OAAO,CAAC,EAAE,IAAI;AAAY,SAAO,IAAI;AAAU,UAAQ;AAAG;AACpF,CAAC;AAAkB,QAAM,OAAO,CAAC,EAAE,IAAI;AAAY,cAAY;AAAY;AAC3E,CAAC;AAAsB,WAAS;AAAM,mBAAiB;AAAU,cAAY;AAAM;AACnF,CAAC;AACC,QAAM,MAAM,CAAC,EAAE,IAAI;AAAY,WAAS,IAAI;AAC5C,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM,IAAI;AACvD,cAAY,IAAI;AAAS,SAAO,IAAI;AAAQ,UAAQ;AACtD;AACA,CALC,eAKe,CAAC;AAAU,cAAY,IAAI;AAAW,gBAAc,IAAI;AAAW,SAAO,IAAI,WAAW,EAAE;AAAO;","names":[]}
|
package/dist/save.css
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* src/save.css */
|
|
2
|
+
.savestat {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: 5px;
|
|
6
|
+
font: 0.72rem var(--font-ui);
|
|
7
|
+
color: var(--muted);
|
|
8
|
+
-webkit-app-region: no-drag;
|
|
9
|
+
}
|
|
10
|
+
.savestat::before {
|
|
11
|
+
content: "";
|
|
12
|
+
width: 6px;
|
|
13
|
+
height: 6px;
|
|
14
|
+
border-radius: var(--radius-pill);
|
|
15
|
+
background: currentColor;
|
|
16
|
+
}
|
|
17
|
+
.savestat.saved {
|
|
18
|
+
color: var(--ok);
|
|
19
|
+
}
|
|
20
|
+
.savestat.unsaved,
|
|
21
|
+
.savestat.saving {
|
|
22
|
+
color: var(--warn);
|
|
23
|
+
}
|
|
24
|
+
.savestat.saving::before {
|
|
25
|
+
animation: savepulse 1s ease-in-out infinite;
|
|
26
|
+
}
|
|
27
|
+
@keyframes savepulse {
|
|
28
|
+
50% {
|
|
29
|
+
opacity: 0.35;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
@media (prefers-reduced-motion: reduce) {
|
|
33
|
+
.savestat.saving::before {
|
|
34
|
+
animation: none;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
/*# sourceMappingURL=save.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/save.css"],"sourcesContent":["/* The save indicator (save-view.ts): a dot and a word in the topbar.\n\n The dot is `currentColor`, so the three states are one colour decision each\n and the shape never changes - the eye reads the tone before it reads the\n word. `--ok` for saved is why the semantic set needed completing (tokens.css):\n this state is the one place in the family where \"all is well\" has to be said\n in colour rather than by the absence of anything. */\n.savestat {\n display: inline-flex; align-items: center; gap: 5px;\n font: 0.72rem var(--font-ui); color: var(--muted);\n -webkit-app-region: no-drag; /* a draggable titlebar must not swallow it */\n}\n.savestat::before { content: \"\"; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }\n.savestat.saved { color: var(--ok); }\n/* Unsaved and saving are the same tone on purpose: both mean \"not on disk yet\".\n What separates them is the pulse, which says a write is actually running. */\n.savestat.unsaved, .savestat.saving { color: var(--warn); }\n.savestat.saving::before { animation: savepulse 1s ease-in-out infinite; }\n\n@keyframes savepulse { 50% { opacity: 0.35; } }\n@media (prefers-reduced-motion: reduce) { .savestat.saving::before { animation: none; } }\n"],"mappings":";AAOA,CAAC;AACC,WAAS;AAAa,eAAa;AAAQ,OAAK;AAChD,QAAM,QAAQ,IAAI;AAAY,SAAO,IAAI;AACzC,sBAAoB;AACtB;AACA,CALC,QAKQ;AAAW,WAAS;AAAI,SAAO;AAAK,UAAQ;AAAK,iBAAe,IAAI;AAAgB,cAAY;AAAc;AACvH,CANC,QAMQ,CAAC;AAAQ,SAAO,IAAI;AAAO;AAGpC,CATC,QASQ,CAAC;AAAS,CATlB,QAS2B,CAAC;AAAS,SAAO,IAAI;AAAS;AAC1D,CAVC,QAUQ,CADoB,MACb;AAAW,aAAW,UAAU,GAAG,YAAY;AAAU;AAEzE,WAFsC;AAEf;AAAM,aAAS;AAAM;AAAE;AAC9C,QAAO,wBAAyB;AAAU,GAbzC,QAakD,CAJtB,MAI6B;AAAW,eAAW;AAAM;AAAE;","names":[]}
|
package/dist/stale.css
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* src/stale.css */
|
|
2
|
+
.stale-bar {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: 14px;
|
|
6
|
+
flex-wrap: wrap;
|
|
7
|
+
padding: 10px 14px;
|
|
8
|
+
border: 1px solid var(--warn);
|
|
9
|
+
border-radius: var(--radius-md);
|
|
10
|
+
background: color-mix(in oklab, var(--warn) 12%, transparent);
|
|
11
|
+
color: var(--ink);
|
|
12
|
+
font: 0.85rem var(--font-ui);
|
|
13
|
+
}
|
|
14
|
+
.stale-bar-msg {
|
|
15
|
+
flex: 1;
|
|
16
|
+
}
|
|
17
|
+
.stale-bar-go {
|
|
18
|
+
flex: none;
|
|
19
|
+
font: inherit;
|
|
20
|
+
padding: 4px 12px;
|
|
21
|
+
border: 1px solid var(--accent);
|
|
22
|
+
border-radius: var(--radius-sm);
|
|
23
|
+
background: var(--accent);
|
|
24
|
+
color: var(--surface);
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
}
|
|
27
|
+
.stale-bar-go:hover {
|
|
28
|
+
background: color-mix(in oklab, var(--accent) 85%, var(--ink));
|
|
29
|
+
}
|
|
30
|
+
/*# sourceMappingURL=stale.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/stale.css"],"sourcesContent":["/* The stale-session bar (stale.ts). Warn-toned rather than danger: nothing has\n gone wrong, and nothing is lost - what is on screen is simply older than the\n project. It is a full-width banner at the top of the surface it applies to,\n so it reads as a condition on that surface rather than as a passing remark. */\n.stale-bar {\n display: flex; align-items: center; gap: 14px; flex-wrap: wrap;\n padding: 10px 14px;\n border: 1px solid var(--warn); border-radius: var(--radius-md);\n background: color-mix(in oklab, var(--warn) 12%, transparent);\n color: var(--ink); font: 0.85rem var(--font-ui);\n}\n/* The sentence takes the room; the way out stays its own size at the end. */\n.stale-bar-msg { flex: 1; }\n.stale-bar-go {\n flex: none; font: inherit; padding: 4px 12px;\n border: 1px solid var(--accent); border-radius: var(--radius-sm);\n background: var(--accent); color: var(--surface); cursor: pointer;\n}\n.stale-bar-go:hover { background: color-mix(in oklab, var(--accent) 85%, var(--ink)); }\n"],"mappings":";AAIA,CAAC;AACC,WAAS;AAAM,eAAa;AAAQ,OAAK;AAAM,aAAW;AAC1D,WAAS,KAAK;AACd,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAClD,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AACjD,SAAO,IAAI;AAAQ,QAAM,QAAQ,IAAI;AACvC;AAEA,CAAC;AAAgB,QAAM;AAAG;AAC1B,CAAC;AACC,QAAM;AAAM,QAAM;AAAS,WAAS,IAAI;AACxC,UAAQ,IAAI,MAAM,IAAI;AAAW,iBAAe,IAAI;AACpD,cAAY,IAAI;AAAW,SAAO,IAAI;AAAY,UAAQ;AAC5D;AACA,CALC,YAKY;AAAS,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE,IAAI;AAAS;","names":[]}
|
package/dist/stepper.css
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/* src/stepper.css */
|
|
2
|
+
.stepbar {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: 10px;
|
|
6
|
+
border-top: 1px solid var(--line-soft);
|
|
7
|
+
background: var(--surface);
|
|
8
|
+
font: 0.8rem var(--font-ui);
|
|
9
|
+
padding: 6px 16px;
|
|
10
|
+
min-height: 34px;
|
|
11
|
+
}
|
|
12
|
+
.stepbar[hidden] {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
.stepbar-count {
|
|
16
|
+
flex: none;
|
|
17
|
+
font-weight: 600;
|
|
18
|
+
font-variant-numeric: tabular-nums;
|
|
19
|
+
}
|
|
20
|
+
.stepbar-count.danger {
|
|
21
|
+
color: var(--danger);
|
|
22
|
+
}
|
|
23
|
+
.stepbar-count.warn {
|
|
24
|
+
color: var(--warn);
|
|
25
|
+
}
|
|
26
|
+
.stepbar-count.accent {
|
|
27
|
+
color: var(--accent);
|
|
28
|
+
}
|
|
29
|
+
.stepbar-count.muted {
|
|
30
|
+
color: var(--muted);
|
|
31
|
+
}
|
|
32
|
+
.stepbar-nav {
|
|
33
|
+
flex: none;
|
|
34
|
+
width: 20px;
|
|
35
|
+
height: 20px;
|
|
36
|
+
padding: 0;
|
|
37
|
+
line-height: 1;
|
|
38
|
+
border: none;
|
|
39
|
+
background: none;
|
|
40
|
+
color: var(--muted);
|
|
41
|
+
border-radius: var(--radius-sm);
|
|
42
|
+
font: inherit;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
}
|
|
45
|
+
.stepbar-nav:hover {
|
|
46
|
+
background: var(--accent-soft);
|
|
47
|
+
color: var(--accent);
|
|
48
|
+
}
|
|
49
|
+
.stepbar-close {
|
|
50
|
+
margin-left: auto;
|
|
51
|
+
}
|
|
52
|
+
.stepbar-of {
|
|
53
|
+
flex: none;
|
|
54
|
+
color: var(--muted);
|
|
55
|
+
font-size: 0.72rem;
|
|
56
|
+
font-variant-numeric: tabular-nums;
|
|
57
|
+
}
|
|
58
|
+
.stepbar-cur {
|
|
59
|
+
flex: 1;
|
|
60
|
+
min-width: 0;
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: baseline;
|
|
63
|
+
gap: 10px;
|
|
64
|
+
text-align: left;
|
|
65
|
+
padding: 3px 8px;
|
|
66
|
+
border: none;
|
|
67
|
+
background: none;
|
|
68
|
+
border-radius: var(--radius-sm);
|
|
69
|
+
font: inherit;
|
|
70
|
+
color: inherit;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
}
|
|
73
|
+
.stepbar-cur:hover {
|
|
74
|
+
background: var(--accent-soft);
|
|
75
|
+
}
|
|
76
|
+
.stepbar-cat {
|
|
77
|
+
flex: none;
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
}
|
|
80
|
+
.stepbar-where {
|
|
81
|
+
flex: none;
|
|
82
|
+
font-family: var(--font-mono);
|
|
83
|
+
font-size: 0.72rem;
|
|
84
|
+
color: var(--muted);
|
|
85
|
+
}
|
|
86
|
+
.stepbar-msg {
|
|
87
|
+
flex: 1;
|
|
88
|
+
min-width: 0;
|
|
89
|
+
overflow: hidden;
|
|
90
|
+
text-overflow: ellipsis;
|
|
91
|
+
white-space: nowrap;
|
|
92
|
+
color: var(--ink);
|
|
93
|
+
}
|
|
94
|
+
.stepbar-empty {
|
|
95
|
+
flex: 1;
|
|
96
|
+
color: var(--muted);
|
|
97
|
+
}
|
|
98
|
+
/*# sourceMappingURL=stepper.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/stepper.css"],"sourcesContent":["/* The stepper bar (stepper.ts): one row, one entry at a time.\n\n A host puts `.stepbar` where it wants the bar - both apps stack theirs at the\n bottom of the window - and adds a modifier class when it runs two of them, as\n Storyletter's review walk does over its problems bar. One grammar with one\n modifier, rather than a parallel class set per bar. */\n.stepbar {\n display: flex; align-items: center; gap: 10px;\n border-top: 1px solid var(--line-soft); background: var(--surface);\n font: 0.8rem var(--font-ui); padding: 6px 16px; min-height: 34px;\n}\n.stepbar[hidden] { display: none; }\n\n/* How many there are, in the tone the app chose. Tabular so the number does not\n shuffle the row as it counts down. */\n.stepbar-count { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }\n.stepbar-count.danger { color: var(--danger); }\n.stepbar-count.warn { color: var(--warn); }\n.stepbar-count.accent { color: var(--accent); }\n.stepbar-count.muted { color: var(--muted); }\n\n.stepbar-nav {\n flex: none; width: 20px; height: 20px; padding: 0; line-height: 1;\n border: none; background: none; color: var(--muted);\n border-radius: var(--radius-sm); font: inherit; cursor: pointer;\n}\n.stepbar-nav:hover { background: var(--accent-soft); color: var(--accent); }\n/* The way out sits hard right, past whatever the app put in the action slot. */\n.stepbar-close { margin-left: auto; }\n\n/* Where you are in the walk. Quiet: it answers a question rather than asking one. */\n.stepbar-of { flex: none; color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }\n\n/* The entry is the way TO the entry, so it looks like a control at rest rather\n than only on hover. */\n.stepbar-cur {\n flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px;\n text-align: left; padding: 3px 8px; border: none; background: none;\n border-radius: var(--radius-sm); font: inherit; color: inherit; cursor: pointer;\n}\n.stepbar-cur:hover { background: var(--accent-soft); }\n.stepbar-cat { flex: none; font-weight: 600; }\n.stepbar-where { flex: none; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }\n/* One line, always: the bar's height must not depend on how wordy an entry is. */\n.stepbar-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }\n\n/* An empty MODE still shows its bar, and this is what it says. */\n.stepbar-empty { flex: 1; color: var(--muted); }\n"],"mappings":";AAMA,CAAC;AACC,WAAS;AAAM,eAAa;AAAQ,OAAK;AACzC,cAAY,IAAI,MAAM,IAAI;AAAc,cAAY,IAAI;AACxD,QAAM,OAAO,IAAI;AAAY,WAAS,IAAI;AAAM,cAAY;AAC9D;AACA,CALC,OAKO,CAAC;AAAU,WAAS;AAAM;AAIlC,CAAC;AAAgB,QAAM;AAAM,eAAa;AAAK,wBAAsB;AAAc;AACnF,CADC,aACa,CAAC;AAAS,SAAO,IAAI;AAAW;AAC9C,CAFC,aAEa,CAAC;AAAO,SAAO,IAAI;AAAS;AAC1C,CAHC,aAGa,CAAC;AAAS,SAAO,IAAI;AAAW;AAC9C,CAJC,aAIa,CAAC;AAAQ,SAAO,IAAI;AAAU;AAE5C,CAAC;AACC,QAAM;AAAM,SAAO;AAAM,UAAQ;AAAM,WAAS;AAAG,eAAa;AAChE,UAAQ;AAAM,cAAY;AAAM,SAAO,IAAI;AAC3C,iBAAe,IAAI;AAAc,QAAM;AAAS,UAAQ;AAC1D;AACA,CALC,WAKW;AAAS,cAAY,IAAI;AAAgB,SAAO,IAAI;AAAW;AAE3E,CAAC;AAAgB,eAAa;AAAM;AAGpC,CAAC;AAAa,QAAM;AAAM,SAAO,IAAI;AAAU,aAAW;AAAS,wBAAsB;AAAc;AAIvG,CAAC;AACC,QAAM;AAAG,aAAW;AAAG,WAAS;AAAM,eAAa;AAAU,OAAK;AAClE,cAAY;AAAM,WAAS,IAAI;AAAK,UAAQ;AAAM,cAAY;AAC9D,iBAAe,IAAI;AAAc,QAAM;AAAS,SAAO;AAAS,UAAQ;AAC1E;AACA,CALC,WAKW;AAAS,cAAY,IAAI;AAAgB;AACrD,CAAC;AAAc,QAAM;AAAM,eAAa;AAAK;AAC7C,CAAC;AAAgB,QAAM;AAAM,eAAa,IAAI;AAAc,aAAW;AAAS,SAAO,IAAI;AAAU;AAErG,CAAC;AAAc,QAAM;AAAG,aAAW;AAAG,YAAU;AAAQ,iBAAe;AAAU,eAAa;AAAQ,SAAO,IAAI;AAAQ;AAGzH,CAAC;AAAgB,QAAM;AAAG,SAAO,IAAI;AAAU;","names":[]}
|
package/dist/tokens.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* src/tokens.css */
|
|
2
2
|
:root {
|
|
3
3
|
color-scheme: light dark;
|
|
4
|
+
--ok: light-dark(#3f7d49, #79bd80);
|
|
4
5
|
--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
5
6
|
--shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);
|
|
6
7
|
--shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
}
|
|
40
41
|
::-webkit-scrollbar-thumb {
|
|
41
42
|
background: var(--scroll-thumb);
|
|
42
|
-
border-radius:
|
|
43
|
+
border-radius: var(--radius-sm);
|
|
43
44
|
border: 3px solid transparent;
|
|
44
45
|
background-clip: padding-box;
|
|
45
46
|
}
|
package/dist/tokens.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* ============================================================================\n Design-token GRAMMAR - the app-agnostic layer (design-language.md section 4).\n\n The shared half of \"two palettes, one grammar\": the scales that are IDENTICAL\n across the editor family - elevation, motion, radius, scrollbar chrome. Each\n app supplies its own colour + font VALUES (its palette) over this grammar in\n its own theme.css. Do not add app-specific colours here.\n ============================================================================ */\n\n:root {\n color-scheme: light dark;\n\n /* Elevation: three tiers by how far a surface floats (resting cards,\n floating menus/popovers, full overlays). Theme-agnostic black so it\n deepens naturally on the dark palettes. */\n --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);\n --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);\n --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);\n\n /* Motion: one easing curve + a small duration scale, plus the shared\n panel/backdrop/screen enter-exit vocabulary. Nothing pops. */\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --dur-quick: 120ms;\n --dur-base: 150ms;\n --dur-settle: 200ms;\n --dur-slow: 1s;\n --dur-panel: 260ms;\n --dur-exit: 170ms;\n --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);\n --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);\n --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);\n --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;\n --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;\n\n /* Corner radius: four steps cover every surface. */\n --radius-sm: 6px;\n --radius-md: 10px;\n --radius-lg: 14px;\n --radius-pill: 999px;\n\n /* Scrollbar thumb: a translucent ink, so it adapts per palette. */\n --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);\n --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);\n}\n\n* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }\n::-webkit-scrollbar { width: 11px; height: 11px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-corner { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius:
|
|
1
|
+
{"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* ============================================================================\n Design-token GRAMMAR - the app-agnostic layer (design-language.md section 4).\n\n The shared half of \"two palettes, one grammar\": the scales that are IDENTICAL\n across the editor family - elevation, motion, radius, scrollbar chrome. Each\n app supplies its own colour + font VALUES (its palette) over this grammar in\n its own theme.css. Do not add app-specific colours here.\n ============================================================================ */\n\n:root {\n color-scheme: light dark;\n\n /* The semantic set's third member, and the only COLOUR in this file.\n\n It is here because it kept not being anywhere. An app's palette owns\n --danger and --warn; neither owned \"all is well\", so a real need - the live\n debug link, an in-sync shard, a saved document - was met with a raw green\n literal that could not theme-shift (surface-audit-shell.md F2). A default\n in the grammar layer means the shell's own widgets may say it, and an app\n that has not thought about green yet still gets a green that works on both\n grounds. Every palette should override it in its theme.css, as it does the\n other two: this is a floor, not a decision. */\n --ok: light-dark(#3f7d49, #79bd80);\n\n /* Elevation: three tiers by how far a surface floats (resting cards,\n floating menus/popovers, full overlays). Theme-agnostic black so it\n deepens naturally on the dark palettes. */\n --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);\n --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);\n --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);\n\n /* Motion: one easing curve + a small duration scale, plus the shared\n panel/backdrop/screen enter-exit vocabulary. Nothing pops. */\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --dur-quick: 120ms;\n --dur-base: 150ms;\n --dur-settle: 200ms;\n --dur-slow: 1s;\n --dur-panel: 260ms;\n --dur-exit: 170ms;\n --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);\n --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);\n --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);\n --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;\n --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;\n\n /* Corner radius: four steps cover every surface. */\n --radius-sm: 6px;\n --radius-md: 10px;\n --radius-lg: 14px;\n --radius-pill: 999px;\n\n /* Scrollbar thumb: a translucent ink, so it adapts per palette. */\n --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);\n --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);\n}\n\n* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }\n::-webkit-scrollbar { width: 11px; height: 11px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-corner { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-sm); border: 3px solid transparent; background-clip: padding-box; }\n::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }\n\n@keyframes panel-in { from { opacity: 0; transform: translateY(-9px) scale(0.965); } to { opacity: 1; transform: none; } }\n@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }\n@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }\n\n@media (prefers-reduced-motion: reduce) {\n :root {\n --anim-panel-in: none; --anim-backdrop-in: none; --anim-screen-in: none;\n --anim-panel-out: none; --anim-backdrop-out: none;\n }\n}\n"],"mappings":";AASA;AACE,gBAAc,MAAM;AAYpB,QAAM,WAAW,OAAO,EAAE;AAK1B,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAItC,mBAAiB,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AACzC,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,cAAY;AACZ,eAAa;AACb,cAAY;AACZ,mBAAiB,SAAS,IAAI,aAAa,IAAI;AAC/C,sBAAoB,YAAY,IAAI,cAAc,IAAI;AACtD,oBAAkB,UAAU,IAAI,aAAa,IAAI;AACjD,oBAAkB,UAAU,IAAI,YAAY,IAAI,iBAAiB;AACjE,uBAAqB,aAAa,IAAI,YAAY,IAAI,iBAAiB;AAGvE,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAGf,kBAAgB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AACpD,wBAAsB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC5D;AAEA;AAAI,mBAAiB;AAAM,mBAAiB,IAAI,gBAAgB;AAAa;AAC7E;AAAsB,SAAO;AAAM,UAAQ;AAAM;AACjD;AAA4B,cAAY;AAAa;AACrD;AAA6B,cAAY;AAAa;AACtD;AAA4B,cAAY,IAAI;AAAiB,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM;AAAa,mBAAiB;AAAa;AAC3J,yBAAyB;AAAS,cAAY,IAAI;AAAuB,mBAAiB;AAAa;AAEvG,WAAW;AAAW;AAAO,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAQ;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AACzH,WAAW;AAAc;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AACjE,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW,WAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AAC5G,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAO;AAAE;AACzH,WAAW;AAAe;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AAElE,QAAO,wBAAyB;AAC9B;AACE,qBAAiB;AAAM,wBAAoB;AAAM,sBAAkB;AACnE,sBAAkB;AAAM,yBAAqB;AAC/C;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wildwinter/app-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.0",
|
|
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",
|
|
@@ -105,6 +105,18 @@
|
|
|
105
105
|
"types": "./dist/session.d.ts",
|
|
106
106
|
"import": "./dist/session.js",
|
|
107
107
|
"require": "./dist/session.cjs"
|
|
108
|
+
},
|
|
109
|
+
"./stale.css": {
|
|
110
|
+
"import": "./dist/stale.css",
|
|
111
|
+
"require": "./dist/stale.css"
|
|
112
|
+
},
|
|
113
|
+
"./save.css": {
|
|
114
|
+
"import": "./dist/save.css",
|
|
115
|
+
"require": "./dist/save.css"
|
|
116
|
+
},
|
|
117
|
+
"./stepper.css": {
|
|
118
|
+
"import": "./dist/stepper.css",
|
|
119
|
+
"require": "./dist/stepper.css"
|
|
108
120
|
}
|
|
109
121
|
},
|
|
110
122
|
"files": [
|