@wildwinter/app-shell 0.44.0 → 0.45.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 +3 -0
- package/dist/kit-gallery.css +2 -4
- package/dist/kit-gallery.css.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -191,6 +191,9 @@ openKitGallery({
|
|
|
191
191
|
- **v0.44:** `onChoose` runs whenever an item is chosen, so an app can show or
|
|
192
192
|
hide its own fields per kit; `validate` holds the pick until the app's own
|
|
193
193
|
field is filled, marking and focusing it the way an empty name is.
|
|
194
|
+
- **v0.45:** the picture colours are read with fallbacks and never set by the
|
|
195
|
+
gallery, so an app's `--kit-art-ink` and `--kit-art-plate` on `:root` reach
|
|
196
|
+
both the dialog and the welcome's tiles.
|
|
194
197
|
|
|
195
198
|
## Roadmap
|
|
196
199
|
|
package/dist/kit-gallery.css
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
/* src/kit-gallery.css */
|
|
2
2
|
.kit-gallery {
|
|
3
3
|
--dialog-width: 880px;
|
|
4
|
-
--kit-art-ink: var(--ink);
|
|
5
|
-
--kit-art-plate: transparent;
|
|
6
4
|
}
|
|
7
5
|
.kit-gallery .shell-dialog-body {
|
|
8
6
|
overflow: hidden;
|
|
@@ -98,7 +96,7 @@
|
|
|
98
96
|
aspect-ratio: 5 / 3;
|
|
99
97
|
overflow: hidden;
|
|
100
98
|
border-radius: var(--radius-sm);
|
|
101
|
-
background: var(--kit-art-plate);
|
|
99
|
+
background: var(--kit-art-plate, transparent);
|
|
102
100
|
}
|
|
103
101
|
.kit-gallery-art[hidden] {
|
|
104
102
|
display: none;
|
|
@@ -106,7 +104,7 @@
|
|
|
106
104
|
.kit-gallery-ink {
|
|
107
105
|
position: absolute;
|
|
108
106
|
inset: 0;
|
|
109
|
-
background: var(--kit-art-ink);
|
|
107
|
+
background: var(--kit-art-ink, var(--ink));
|
|
110
108
|
-webkit-mask: var(--kit-art) center / cover no-repeat;
|
|
111
109
|
mask: var(--kit-art) center / cover no-repeat;
|
|
112
110
|
}
|
package/dist/kit-gallery.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/kit-gallery.css"],"sourcesContent":["/* ---------------------------------------------------------------------------\n The kit gallery (kit-gallery.ts): tiles on the left, a details panel on the\n right, on the dialog frame (dialog.css) with `.btn` from controls.css and\n `.field` for the name. Reads the palette (--surface, --ink, --muted,\n --line, --accent) over the shared tokens.\n\n Pictures are masks: the image's opaque pixels are drawn in --kit-art-ink on\n --kit-art-plate
|
|
1
|
+
{"version":3,"sources":["../src/kit-gallery.css"],"sourcesContent":["/* ---------------------------------------------------------------------------\n The kit gallery (kit-gallery.ts): tiles on the left, a details panel on the\n right, on the dialog frame (dialog.css) with `.btn` from controls.css and\n `.field` for the name. Reads the palette (--surface, --ink, --muted,\n --line, --accent) over the shared tokens.\n\n Pictures are masks: the image's opaque pixels are drawn in --kit-art-ink on\n --kit-art-plate, which an app sets on :root (the welcome's tiles sit outside\n the dialog, so the gallery never sets them itself). The defaults, the app's\n --ink on no plate, suit a light theme. A dark theme should NOT invert an engraving, which turns it into a photographic\n negative; it sets a paper-toned plate and a dark ink instead, so the\n picture is always dark on light and only its frame follows the theme.\n --------------------------------------------------------------------------- */\n\n.kit-gallery { --dialog-width: 880px; }\n.kit-gallery .shell-dialog-body { overflow: hidden; }\n\n.kit-gallery-layout {\n display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 18px;\n min-height: 0; max-height: 64vh;\n}\n.kit-gallery-shelves { overflow-y: auto; min-height: 0; padding: 2px; }\n.kit-gallery-panel {\n overflow-y: auto; min-height: 0;\n display: flex; flex-direction: column; gap: 6px;\n padding: 2px 2px 2px 18px; border-left: 1px solid var(--line);\n}\n\n/* A shelf per job (start / learn), captioned like the welcome's groups:\n sentence-case label text, never an overline. */\n.kit-gallery-shelf + .kit-gallery-shelf { margin-top: 18px; }\n.kit-gallery-caption { margin: 0 0 6px; color: var(--muted); font: 600 13px/1.3 var(--font-ui); }\n.kit-gallery-shelf-note { margin: -2px 0 8px; color: var(--muted); font: 12.5px/1.45 var(--font-ui); }\n\n.kit-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }\n.kit-gallery-tile {\n display: flex; flex-direction: column; align-items: stretch; gap: 4px;\n padding: 8px; text-align: left; cursor: pointer;\n background: none; color: var(--ink); font: inherit;\n border: 1px solid var(--line); border-radius: var(--radius-md);\n transition: background var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);\n}\n.kit-gallery-tile:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }\n.kit-gallery-tile[aria-pressed=\"true\"] {\n border-color: var(--accent);\n background: color-mix(in oklab, var(--accent) 10%, transparent);\n}\n.kit-gallery-tile-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }\n.kit-gallery-tile-name { font: 600 14px/1.3 var(--font-ui); }\n/* Three lines on the tile; the panel says the rest. */\n.kit-gallery-tile-blurb {\n color: var(--muted); font: 12.5px/1.4 var(--font-ui);\n display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;\n}\n.kit-gallery-badge {\n padding: 1px 6px; border-radius: 999px;\n background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--ink);\n font: 600 11px/1.5 var(--font-ui);\n}\n\n/* The picture: a plate, and the ink drawn through the image as a mask. */\n.kit-gallery-art {\n position: relative; aspect-ratio: 5 / 3; overflow: hidden;\n border-radius: var(--radius-sm); background: var(--kit-art-plate, transparent);\n}\n.kit-gallery-art[hidden] { display: none; }\n.kit-gallery-ink {\n position: absolute; inset: 0; background: var(--kit-art-ink, var(--ink));\n -webkit-mask: var(--kit-art) center / cover no-repeat;\n mask: var(--kit-art) center / cover no-repeat;\n}\n\n/* The details panel: the chosen kit said in full, then the app's fields. */\n.kit-gallery-panel-name { margin: 2px 0 0; font: 600 16px/1.3 var(--font-ui); }\n.kit-gallery-panel-blurb, .kit-gallery-panel-detail { margin: 0; font: 13.5px/1.5 var(--font-ui); color: var(--ink); }\n.kit-gallery-play { margin: 0; font: 13.5px/1.5 var(--font-ui); color: var(--ink); }\n.kit-gallery-shows, .kit-gallery-note { margin: 0; font: 12.5px/1.45 var(--font-ui); color: var(--muted); }\n.kit-gallery-lands-caption { margin: 6px 0 0; font: 600 13px/1.3 var(--font-ui); color: var(--muted); }\n.kit-gallery-lands { margin: 0; padding-left: 18px; font: 13px/1.5 var(--font-ui); color: var(--ink); }\n.kit-gallery-panel [hidden] { display: none; }\n.kit-gallery-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }\n.kit-gallery-label { font: 600 13px/1.3 var(--font-ui); color: var(--ink); }\n.kit-gallery .kit-gallery-missing { border-color: var(--danger); }\n\n/* Narrow windows: the panel goes under the tiles. */\n@media (max-width: 760px) {\n .kit-gallery-layout { grid-template-columns: minmax(0, 1fr); max-height: none; overflow-y: auto; }\n .kit-gallery-panel { border-left: none; border-top: 1px solid var(--line); padding: 12px 2px 2px; overflow: visible; }\n .kit-gallery-shelves { overflow: visible; }\n}\n"],"mappings":";AAcA,CAAC;AAAc,kBAAgB;AAAO;AACtC,CADC,YACY,CAAC;AAAoB,YAAU;AAAQ;AAEpD,CAAC;AACC,WAAS;AAAM,yBAAuB,OAAO,CAAC,EAAE,KAAK;AAAO,OAAK;AACjE,cAAY;AAAG,cAAY;AAC7B;AACA,CAAC;AAAsB,cAAY;AAAM,cAAY;AAAG,WAAS;AAAK;AACtE,CAAC;AACC,cAAY;AAAM,cAAY;AAC9B,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAC5C,WAAS,IAAI,IAAI,IAAI;AAAM,eAAa,IAAI,MAAM,IAAI;AACxD;AAIA,CAAC,kBAAkB,EAAE,CAApB;AAAyC,cAAY;AAAM;AAC5D,CAAC;AAAsB,UAAQ,EAAE,EAAE;AAAK,SAAO,IAAI;AAAU,QAAM,IAAI,IAAI,CAAC,IAAI,IAAI;AAAY;AAChG,CAAC;AAAyB,UAAQ,KAAK,EAAE;AAAK,SAAO,IAAI;AAAU,QAAM,MAAM,CAAC,KAAK,IAAI;AAAY;AAErG,CAAC;AAAmB,WAAS;AAAM,yBAAuB,OAAO,SAAS,EAAE,OAAO,KAAK,EAAE;AAAO,OAAK;AAAK;AAC3G,CAAC;AACC,WAAS;AAAM,kBAAgB;AAAQ,eAAa;AAAS,OAAK;AAClE,WAAS;AAAK,cAAY;AAAM,UAAQ;AACxC,cAAY;AAAM,SAAO,IAAI;AAAQ,QAAM;AAC3C,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAClD,cAAY,WAAW,IAAI,aAAa,IAAI,gBAAgB,EAAE,aAAa,IAAI,aAAa,IAAI;AAClG;AACA,CAPC,gBAOgB;AAAS,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,EAAE,EAAE;AAAc;AAC1F,CARC,gBAQgB,CAAC;AAChB,gBAAc,IAAI;AAClB,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AACrD;AACA,CAAC;AAAwB,WAAS;AAAM,eAAa;AAAU,OAAK;AAAK,aAAW;AAAM;AAC1F,CAAC;AAAwB,QAAM,IAAI,IAAI,CAAC,IAAI,IAAI;AAAY;AAE5D,CAAC;AACC,SAAO,IAAI;AAAU,QAAM,MAAM,CAAC,IAAI,IAAI;AAC1C,WAAS;AAAa,sBAAoB;AAAU,sBAAoB;AAAG,cAAY;AAAG,YAAU;AACtG;AACA,CAAC;AACC,WAAS,IAAI;AAAK,iBAAe;AACjC,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AAAc,SAAO,IAAI;AAC5E,QAAM,IAAI,IAAI,CAAC,IAAI,IAAI;AACzB;AAGA,CAAC;AACC,YAAU;AAAU,gBAAc,EAAE,EAAE;AAAG,YAAU;AACnD,iBAAe,IAAI;AAAc,cAAY,IAAI,eAAe,EAAE;AACpE;AACA,CAJC,eAIe,CAAC;AAAU,WAAS;AAAM;AAC1C,CAAC;AACC,YAAU;AAAU,SAAO;AAAG,cAAY,IAAI,aAAa,EAAE,IAAI;AACjE,gBAAc,IAAI,WAAW,OAAO,EAAE,MAAM;AAC5C,QAAM,IAAI,WAAW,OAAO,EAAE,MAAM;AACtC;AAGA,CAAC;AAAyB,UAAQ,IAAI,EAAE;AAAG,QAAM,IAAI,IAAI,CAAC,IAAI,IAAI;AAAY;AAC9E,CAAC;AAAyB,CAAC;AAA2B,UAAQ;AAAG,QAAM,MAAM,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAQ;AACrH,CAAC;AAAmB,UAAQ;AAAG,QAAM,MAAM,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAQ;AACnF,CAAC;AAAmB,CAAC;AAAmB,UAAQ;AAAG,QAAM,MAAM,CAAC,KAAK,IAAI;AAAY,SAAO,IAAI;AAAU;AAC1G,CAAC;AAA4B,UAAQ,IAAI,EAAE;AAAG,QAAM,IAAI,IAAI,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAU;AACtG,CAAC;AAAoB,UAAQ;AAAG,gBAAc;AAAM,QAAM,IAAI,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAQ;AACtG,CAzDC,kBAyDkB,CAAC;AAAU,WAAS;AAAM;AAC7C,CAAC;AAAqB,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAAK,cAAY;AAAK,eAAa;AAAM,cAAY,IAAI,MAAM,IAAI;AAAS;AAC9I,CAAC;AAAoB,QAAM,IAAI,IAAI,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAQ;AAC3E,CApEC,YAoEY,CAAC;AAAsB,gBAAc,IAAI;AAAW;AAGjE,QAAO,WAAY;AACjB,GArED;AAqEuB,2BAAuB,OAAO,CAAC,EAAE;AAAM,gBAAY;AAAM,gBAAY;AAAM;AACjG,GAjED;AAiEsB,iBAAa;AAAM,gBAAY,IAAI,MAAM,IAAI;AAAS,aAAS,KAAK,IAAI;AAAK,cAAU;AAAS;AACrH,GAnED;AAmEwB,cAAU;AAAS;AAC5C;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wildwinter/app-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.45.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",
|