@12ui/design 0.2.81 → 0.2.83
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 +11 -7
- package/SKILL.md +1 -1
- package/dist/branch-execution.d.ts.map +1 -1
- package/dist/branch-execution.js +6 -0
- package/dist/branch-execution.js.map +1 -1
- package/dist/branch-materialize.d.ts.map +1 -1
- package/dist/branch-materialize.js +6 -2
- package/dist/branch-materialize.js.map +1 -1
- package/dist/cli-capabilities.d.ts +4 -7
- package/dist/cli-capabilities.d.ts.map +1 -1
- package/dist/cli-capabilities.js +4 -4
- package/dist/cli-capabilities.js.map +1 -1
- package/dist/cli-help/conversion.d.ts +1 -1
- package/dist/cli-help/conversion.js +1 -1
- package/dist/cli-help/conversion.js.map +1 -1
- package/dist/cli-help/index.d.ts +3 -3
- package/dist/cli-help/workflow.d.ts +2 -2
- package/dist/cli-help/workflow.js +4 -4
- package/dist/cli-help/workflow.js.map +1 -1
- package/dist/cli-image-backend.d.ts +6 -1
- package/dist/cli-image-backend.d.ts.map +1 -1
- package/dist/cli-image-backend.js +8 -3
- package/dist/cli-image-backend.js.map +1 -1
- package/dist/cli-local-runtime.d.ts +6 -0
- package/dist/cli-local-runtime.d.ts.map +1 -1
- package/dist/cli-local-runtime.js +14 -1
- package/dist/cli-local-runtime.js.map +1 -1
- package/dist/cli-usage.d.ts.map +1 -1
- package/dist/cli-usage.js +8 -7
- package/dist/cli-usage.js.map +1 -1
- package/dist/cli-workspace-draw.d.ts.map +1 -1
- package/dist/cli-workspace-draw.js +2 -0
- package/dist/cli-workspace-draw.js.map +1 -1
- package/dist/cli-workspace-runner.d.ts.map +1 -1
- package/dist/cli-workspace-runner.js +2 -1
- package/dist/cli-workspace-runner.js.map +1 -1
- package/dist/legacy-skill-catalog.d.ts.map +1 -1
- package/dist/legacy-skill-catalog.js +13 -1
- package/dist/legacy-skill-catalog.js.map +1 -1
- package/dist/mcp-slate-tool-defs.d.ts.map +1 -1
- package/dist/mcp-slate-tool-defs.js +3 -2
- package/dist/mcp-slate-tool-defs.js.map +1 -1
- package/dist/mcp-slate-ui-copy.d.ts +10 -0
- package/dist/mcp-slate-ui-copy.d.ts.map +1 -1
- package/dist/mcp-slate-ui-copy.js +9 -0
- package/dist/mcp-slate-ui-copy.js.map +1 -1
- package/dist/mcp-slate-ui-locales/de-DE.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/de-DE.js +5 -0
- package/dist/mcp-slate-ui-locales/de-DE.js.map +1 -1
- package/dist/mcp-slate-ui-locales/es-419.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/es-419.js +5 -0
- package/dist/mcp-slate-ui-locales/es-419.js.map +1 -1
- package/dist/mcp-slate-ui-locales/es-ES.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/es-ES.js +5 -0
- package/dist/mcp-slate-ui-locales/es-ES.js.map +1 -1
- package/dist/mcp-slate-ui-locales/fr-FR.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/fr-FR.js +5 -0
- package/dist/mcp-slate-ui-locales/fr-FR.js.map +1 -1
- package/dist/mcp-slate-ui-locales/hi-IN.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/hi-IN.js +5 -0
- package/dist/mcp-slate-ui-locales/hi-IN.js.map +1 -1
- package/dist/mcp-slate-ui-locales/it-IT.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/it-IT.js +5 -0
- package/dist/mcp-slate-ui-locales/it-IT.js.map +1 -1
- package/dist/mcp-slate-ui-locales/ja-JP.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/ja-JP.js +5 -0
- package/dist/mcp-slate-ui-locales/ja-JP.js.map +1 -1
- package/dist/mcp-slate-ui-locales/ko-KR.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/ko-KR.js +5 -0
- package/dist/mcp-slate-ui-locales/ko-KR.js.map +1 -1
- package/dist/mcp-slate-ui-locales/pt-BR.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/pt-BR.js +5 -0
- package/dist/mcp-slate-ui-locales/pt-BR.js.map +1 -1
- package/dist/mcp-slate-ui-locales/zh-CN.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/zh-CN.js +5 -0
- package/dist/mcp-slate-ui-locales/zh-CN.js.map +1 -1
- package/dist/mcp-slate-ui-locales/zh-TW.d.ts.map +1 -1
- package/dist/mcp-slate-ui-locales/zh-TW.js +5 -0
- package/dist/mcp-slate-ui-locales/zh-TW.js.map +1 -1
- package/dist/mcp-slate-ui-script-board.d.ts +19 -0
- package/dist/mcp-slate-ui-script-board.d.ts.map +1 -0
- package/dist/mcp-slate-ui-script-board.js +126 -0
- package/dist/mcp-slate-ui-script-board.js.map +1 -0
- package/dist/mcp-slate-ui-script-designs.d.ts +1 -1
- package/dist/mcp-slate-ui-script-designs.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script-designs.js +24 -15
- package/dist/mcp-slate-ui-script-designs.js.map +1 -1
- package/dist/mcp-slate-ui-script-inspiration-collage.d.ts +5 -2
- package/dist/mcp-slate-ui-script-inspiration-collage.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script-inspiration-collage.js +9 -5
- package/dist/mcp-slate-ui-script-inspiration-collage.js.map +1 -1
- package/dist/mcp-slate-ui-script-inspiration-gallery.d.ts +7 -4
- package/dist/mcp-slate-ui-script-inspiration-gallery.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script-inspiration-gallery.js +46 -5
- package/dist/mcp-slate-ui-script-inspiration-gallery.js.map +1 -1
- package/dist/mcp-slate-ui-script-inspiration-grid.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script-inspiration-grid.js +4 -0
- package/dist/mcp-slate-ui-script-inspiration-grid.js.map +1 -1
- package/dist/mcp-slate-ui-script-pause.d.ts +4 -0
- package/dist/mcp-slate-ui-script-pause.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script-pause.js +9 -2
- package/dist/mcp-slate-ui-script-pause.js.map +1 -1
- package/dist/mcp-slate-ui-script-peek.d.ts +16 -0
- package/dist/mcp-slate-ui-script-peek.d.ts.map +1 -0
- package/dist/mcp-slate-ui-script-peek.js +89 -0
- package/dist/mcp-slate-ui-script-peek.js.map +1 -0
- package/dist/mcp-slate-ui-script-references.d.ts +4 -2
- package/dist/mcp-slate-ui-script-references.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script-references.js +39 -7
- package/dist/mcp-slate-ui-script-references.js.map +1 -1
- package/dist/mcp-slate-ui-script-remote.js +2 -2
- package/dist/mcp-slate-ui-script-viewer.d.ts +7 -2
- package/dist/mcp-slate-ui-script-viewer.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script-viewer.js +183 -50
- package/dist/mcp-slate-ui-script-viewer.js.map +1 -1
- package/dist/mcp-slate-ui-script.d.ts.map +1 -1
- package/dist/mcp-slate-ui-script.js +4 -0
- package/dist/mcp-slate-ui-script.js.map +1 -1
- package/dist/mcp-slate-ui-styles-board.d.ts +7 -0
- package/dist/mcp-slate-ui-styles-board.d.ts.map +1 -0
- package/dist/mcp-slate-ui-styles-board.js +30 -0
- package/dist/mcp-slate-ui-styles-board.js.map +1 -0
- package/dist/mcp-slate-ui-styles-designs.d.ts +2 -1
- package/dist/mcp-slate-ui-styles-designs.d.ts.map +1 -1
- package/dist/mcp-slate-ui-styles-designs.js +10 -8
- package/dist/mcp-slate-ui-styles-designs.js.map +1 -1
- package/dist/mcp-slate-ui-styles-inspiration.d.ts.map +1 -1
- package/dist/mcp-slate-ui-styles-inspiration.js +13 -2
- package/dist/mcp-slate-ui-styles-inspiration.js.map +1 -1
- package/dist/mcp-slate-ui-styles-loading.d.ts +18 -0
- package/dist/mcp-slate-ui-styles-loading.d.ts.map +1 -0
- package/dist/mcp-slate-ui-styles-loading.js +37 -0
- package/dist/mcp-slate-ui-styles-loading.js.map +1 -0
- package/dist/mcp-slate-ui-styles-peek.d.ts +8 -0
- package/dist/mcp-slate-ui-styles-peek.d.ts.map +1 -0
- package/dist/mcp-slate-ui-styles-peek.js +13 -0
- package/dist/mcp-slate-ui-styles-peek.js.map +1 -0
- package/dist/mcp-slate-ui-styles.d.ts.map +1 -1
- package/dist/mcp-slate-ui-styles.js +0 -3
- package/dist/mcp-slate-ui-styles.js.map +1 -1
- package/dist/mcp-slate-ui.d.ts.map +1 -1
- package/dist/mcp-slate-ui.js +4 -1
- package/dist/mcp-slate-ui.js.map +1 -1
- package/dist/mcp-workflow-tools.js +2 -2
- package/dist/mcp-workflow-tools.js.map +1 -1
- package/dist/prototype-browsers.d.ts +10 -2
- package/dist/prototype-browsers.d.ts.map +1 -1
- package/dist/prototype-browsers.js +27 -2
- package/dist/prototype-browsers.js.map +1 -1
- package/dist/review-files-server.d.ts +8 -0
- package/dist/review-files-server.d.ts.map +1 -0
- package/dist/review-files-server.js +133 -0
- package/dist/review-files-server.js.map +1 -0
- package/dist/review-page-assets.d.ts +1 -1
- package/dist/review-page-assets.d.ts.map +1 -1
- package/dist/review-page-assets.js +3 -1
- package/dist/review-page-assets.js.map +1 -1
- package/dist/review-page.d.ts +8 -1
- package/dist/review-page.d.ts.map +1 -1
- package/dist/review-page.js +32 -21
- package/dist/review-page.js.map +1 -1
- package/dist/review-server-guard.d.ts +33 -0
- package/dist/review-server-guard.d.ts.map +1 -0
- package/dist/review-server-guard.js +65 -0
- package/dist/review-server-guard.js.map +1 -0
- package/dist/review-server.d.ts +2 -0
- package/dist/review-server.d.ts.map +1 -1
- package/dist/review-server.js +45 -74
- package/dist/review-server.js.map +1 -1
- package/dist/server.d.ts.map +1 -1
- package/dist/server.js +2 -1
- package/dist/server.js.map +1 -1
- package/dist/slate-actions.d.ts +6 -7
- package/dist/slate-actions.d.ts.map +1 -1
- package/dist/slate-actions.js +6 -9
- package/dist/slate-actions.js.map +1 -1
- package/dist/slate-branch-runner.d.ts +120 -0
- package/dist/slate-branch-runner.d.ts.map +1 -0
- package/dist/slate-branch-runner.js +312 -0
- package/dist/slate-branch-runner.js.map +1 -0
- package/dist/slate-captions-local.d.ts +14 -0
- package/dist/slate-captions-local.d.ts.map +1 -0
- package/dist/slate-captions-local.js +70 -0
- package/dist/slate-captions-local.js.map +1 -0
- package/dist/slate-captions-remote.d.ts +29 -0
- package/dist/slate-captions-remote.d.ts.map +1 -0
- package/dist/slate-captions-remote.js +65 -0
- package/dist/slate-captions-remote.js.map +1 -0
- package/dist/slate-captions.d.ts +41 -0
- package/dist/slate-captions.d.ts.map +1 -0
- package/dist/slate-captions.js +112 -0
- package/dist/slate-captions.js.map +1 -0
- package/dist/slate-commit.d.ts.map +1 -1
- package/dist/slate-commit.js +8 -6
- package/dist/slate-commit.js.map +1 -1
- package/dist/slate-image-executor.d.ts +18 -3
- package/dist/slate-image-executor.d.ts.map +1 -1
- package/dist/slate-image-executor.js +18 -5
- package/dist/slate-image-executor.js.map +1 -1
- package/dist/slate-paths.d.ts +3 -1
- package/dist/slate-paths.d.ts.map +1 -1
- package/dist/slate-paths.js +8 -2
- package/dist/slate-paths.js.map +1 -1
- package/dist/slate-round-prompt.d.ts +0 -12
- package/dist/slate-round-prompt.d.ts.map +1 -1
- package/dist/slate-round-prompt.js +0 -15
- package/dist/slate-round-prompt.js.map +1 -1
- package/dist/slate-round-runner.d.ts.map +1 -1
- package/dist/slate-round-runner.js +8 -14
- package/dist/slate-round-runner.js.map +1 -1
- package/dist/slate-runner-context.d.ts +3 -0
- package/dist/slate-runner-context.d.ts.map +1 -1
- package/dist/slate-runner-context.js.map +1 -1
- package/dist/slate-runner-main.d.ts +3 -0
- package/dist/slate-runner-main.d.ts.map +1 -1
- package/dist/slate-runner-main.js +5 -1
- package/dist/slate-runner-main.js.map +1 -1
- package/dist/slate-runner-spawn.js +2 -2
- package/dist/slate-runner-spawn.js.map +1 -1
- package/dist/slate-site-references-capture.d.ts +38 -1
- package/dist/slate-site-references-capture.d.ts.map +1 -1
- package/dist/slate-site-references-capture.js +25 -7
- package/dist/slate-site-references-capture.js.map +1 -1
- package/dist/slate-site-references-client.d.ts +13 -1
- package/dist/slate-site-references-client.d.ts.map +1 -1
- package/dist/slate-site-references-client.js +39 -14
- package/dist/slate-site-references-client.js.map +1 -1
- package/dist/slate-site-references-local.d.ts +3 -0
- package/dist/slate-site-references-local.d.ts.map +1 -1
- package/dist/slate-site-references-local.js +20 -1
- package/dist/slate-site-references-local.js.map +1 -1
- package/dist/slate-site-references-suggest.d.ts +25 -2
- package/dist/slate-site-references-suggest.d.ts.map +1 -1
- package/dist/slate-site-references-suggest.js +71 -12
- package/dist/slate-site-references-suggest.js.map +1 -1
- package/dist/slate-site-references.d.ts +11 -0
- package/dist/slate-site-references.d.ts.map +1 -1
- package/dist/slate-site-references.js +42 -3
- package/dist/slate-site-references.js.map +1 -1
- package/dist/slate-view-contract.d.ts +39 -1
- package/dist/slate-view-contract.d.ts.map +1 -1
- package/dist/slate-view.d.ts.map +1 -1
- package/dist/slate-view.js +8 -0
- package/dist/slate-view.js.map +1 -1
- package/dist/slate-workspace-parse.d.ts.map +1 -1
- package/dist/slate-workspace-parse.js +35 -0
- package/dist/slate-workspace-parse.js.map +1 -1
- package/dist/slate-workspace-types.d.ts +31 -2
- package/dist/slate-workspace-types.d.ts.map +1 -1
- package/dist/workflow/adapter-12ui.js +1 -1
- package/dist/workflow/adapter-12ui.js.map +1 -1
- package/dist/workflow/adapters.d.ts.map +1 -1
- package/dist/workflow/adapters.js +3 -3
- package/dist/workflow/adapters.js.map +1 -1
- package/dist/workflow/providers.js +2 -2
- package/dist/workflow/providers.js.map +1 -1
- package/dist/workflow/routing.d.ts +8 -1
- package/dist/workflow/routing.d.ts.map +1 -1
- package/dist/workflow/routing.js +9 -2
- package/dist/workflow/routing.js.map +1 -1
- package/dist/workflow/types.d.ts +5 -2
- package/dist/workflow/types.d.ts.map +1 -1
- package/dist/workflow/types.js.map +1 -1
- package/dist/workflow-transport.d.ts.map +1 -1
- package/dist/workflow-transport.js +4 -2
- package/dist/workflow-transport.js.map +1 -1
- package/dist/workspace-draw-branch.d.ts +27 -0
- package/dist/workspace-draw-branch.d.ts.map +1 -0
- package/dist/workspace-draw-branch.js +101 -0
- package/dist/workspace-draw-branch.js.map +1 -0
- package/dist/workspace-draw-client.d.ts +27 -0
- package/dist/workspace-draw-client.d.ts.map +1 -1
- package/dist/workspace-draw-client.js +30 -0
- package/dist/workspace-draw-client.js.map +1 -1
- package/dist/workspace-draw-codex.d.ts +5 -5
- package/dist/workspace-draw-codex.d.ts.map +1 -1
- package/dist/workspace-draw-codex.js +4 -3
- package/dist/workspace-draw-codex.js.map +1 -1
- package/dist/workspace-draw-run.d.ts +19 -3
- package/dist/workspace-draw-run.d.ts.map +1 -1
- package/dist/workspace-draw-run.js +44 -4
- package/dist/workspace-draw-run.js.map +1 -1
- package/dist/workspace-draw-types.d.ts +18 -2
- package/dist/workspace-draw-types.d.ts.map +1 -1
- package/dist/workspace-draw-types.js.map +1 -1
- package/dist/workspace-runner-main.d.ts +9 -2
- package/dist/workspace-runner-main.d.ts.map +1 -1
- package/dist/workspace-runner-main.js +21 -2
- package/dist/workspace-runner-main.js.map +1 -1
- package/dist/workspace-runner-spawn.js +1 -1
- package/dist/workspace-runner-spawn.js.map +1 -1
- package/open-design.json +2 -2
- package/package.json +1 -1
- package/runtime/codex-conversion/bin/convert.mjs +1 -1
- package/runtime/codex-conversion/src/codex/caller-home.mjs +95 -0
- package/runtime/codex-conversion/src/codex/home.mjs +8 -2
- package/runtime/codex-conversion/src/images/execute.mjs +1 -1
- package/runtime/codex-conversion/src/images/native-invoke.mjs +21 -13
- package/runtime/codex-conversion/src/images/native.mjs +42 -19
- package/runtime/codex-conversion/src/run.mjs +2 -1
- package/skills/12ui-design/SKILL.md +6 -6
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* The Designs tab, the same in the card and in the workspace: every round as a section, newest first, with a slim bar
|
|
3
3
|
* (how many designs a round draws, 6 or 12, and More) at the right of the newest round's head. A section's head is small: the round's number, a strip of the
|
|
4
4
|
* inspiration and references that fed it (or, for a branch, the design it grew from), and a status dot. Under it a grid
|
|
5
|
-
* of large tiles in the frame's shape.
|
|
5
|
+
* of large tiles in the frame's shape; under a branch's head, its board (mcp-slate-ui-script-board.ts).
|
|
6
6
|
*
|
|
7
7
|
* A tile is one version of a design: its picture, its code (A, or A2 from A after an edit, or a branch's page name), a
|
|
8
8
|
* filled check and ring when it is the pick, and four icon actions: expand, edit, branch and choose. An edit's new
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-designs.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-designs.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,QAqW5B,CAAC"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* The Designs tab, the same in the card and in the workspace: every round as a section, newest first, with a slim bar
|
|
3
3
|
* (how many designs a round draws, 6 or 12, and More) at the right of the newest round's head. A section's head is small: the round's number, a strip of the
|
|
4
4
|
* inspiration and references that fed it (or, for a branch, the design it grew from), and a status dot. Under it a grid
|
|
5
|
-
* of large tiles in the frame's shape.
|
|
5
|
+
* of large tiles in the frame's shape; under a branch's head, its board (mcp-slate-ui-script-board.ts).
|
|
6
6
|
*
|
|
7
7
|
* A tile is one version of a design: its picture, its code (A, or A2 from A after an edit, or a branch's page name), a
|
|
8
8
|
* filled check and ring when it is the pick, and four icon actions: expand, edit, branch and choose. An edit's new
|
|
@@ -81,10 +81,10 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
81
81
|
});
|
|
82
82
|
return items;
|
|
83
83
|
}
|
|
84
|
-
// Every version
|
|
84
|
+
// Every version in the rounds' grids, in screen order: what the large view steps through (a branch's board steps by its columns).
|
|
85
85
|
function viewerOrder() {
|
|
86
86
|
var list = [];
|
|
87
|
-
roundsNewestFirst().forEach(function (r) { roundItems(r).forEach(function (it) { if (it.v && it.v.fileState === "ok") list.push(it.v); }); });
|
|
87
|
+
roundsNewestFirst().filter(function (r) { return r.kind !== "branch"; }).forEach(function (r) { roundItems(r).forEach(function (it) { if (it.v && it.v.fileState === "ok") list.push(it.v); }); });
|
|
88
88
|
return list;
|
|
89
89
|
}
|
|
90
90
|
|
|
@@ -129,7 +129,6 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
129
129
|
} else if (item.op || drawing(c)) {
|
|
130
130
|
tile.classList.add("loading");
|
|
131
131
|
face.classList.add("shimmer");
|
|
132
|
-
face.appendChild(el("span", "spin"));
|
|
133
132
|
face.setAttribute("aria-label", t("drawingName", { name: item.op ? t("versionName", { label: c.label + item.n }) : tileName(c, null) }));
|
|
134
133
|
face.disabled = true;
|
|
135
134
|
} else if (waitingRef) {
|
|
@@ -167,14 +166,17 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
167
166
|
|
|
168
167
|
if (shown && samePick(v)) {
|
|
169
168
|
tile.classList.add("chosen");
|
|
170
|
-
|
|
171
|
-
badge.innerHTML = svgIcon(ICON.choose, 15);
|
|
172
|
-
badge.appendChild(el("span", "sr", t("chosen")));
|
|
173
|
-
tile.appendChild(badge);
|
|
169
|
+
tile.appendChild(chosenBadge());
|
|
174
170
|
}
|
|
175
171
|
if (shown) tile.appendChild(choosePill(v));
|
|
176
172
|
return tile;
|
|
177
173
|
}
|
|
174
|
+
function chosenBadge() {
|
|
175
|
+
var badge = el("span", "dchosen");
|
|
176
|
+
badge.innerHTML = svgIcon(ICON.choose, 15);
|
|
177
|
+
badge.appendChild(el("span", "sr", t("chosen")));
|
|
178
|
+
return badge;
|
|
179
|
+
}
|
|
178
180
|
function chipTitle(v) {
|
|
179
181
|
if (v.promptFromMarks) return t("versionTitleMarks", { label: v.label });
|
|
180
182
|
return v.prompt ? t("versionTitle", { label: v.label, prompt: v.prompt }) : v.label;
|
|
@@ -223,7 +225,9 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
223
225
|
var box = el("span", "dstat");
|
|
224
226
|
if (op && isRunning(op) && !pausedFor({ roundId: round.roundId, state: "pending" })) {
|
|
225
227
|
box.appendChild(el("span", "dot run"));
|
|
226
|
-
|
|
228
|
+
// A branch counts its screens (a full page is several), as its pipeline reports them.
|
|
229
|
+
var counted = round.screens && round.screens.total > 0 ? { n: round.screens.ready, m: round.screens.total } : { n: round.readyCount, m: round.count };
|
|
230
|
+
box.appendChild(el("span", "", t("readyOf", counted)));
|
|
227
231
|
box.setAttribute("role", "status");
|
|
228
232
|
return box;
|
|
229
233
|
}
|
|
@@ -253,10 +257,12 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
253
257
|
head.appendChild(feedStrip(round));
|
|
254
258
|
if (round.note) { var note = el("span", "dnote", round.note); note.title = round.note; head.appendChild(note); }
|
|
255
259
|
}
|
|
260
|
+
// What this round does for the brief, in one quiet line the person's agent wrote; none until it lands.
|
|
261
|
+
if (round.caption) { var caption = el("span", "dcaption", round.caption); caption.title = round.caption; head.appendChild(caption); }
|
|
256
262
|
head.appendChild(el("span", "spacer"));
|
|
257
|
-
var status = roundStatus(
|
|
258
|
-
if (status) head.appendChild(status);
|
|
263
|
+
(round.kind === "branch" ? branchesOf(round.fromVersionId) : [round]).forEach(function (r) { var status = roundStatus(r); if (status) head.appendChild(status); });
|
|
259
264
|
section.appendChild(head);
|
|
265
|
+
if (round.kind === "branch") { section.appendChild(boardOf(round.fromVersionId)); return section; }
|
|
260
266
|
var grid = el("div", "dgrid");
|
|
261
267
|
var items = roundItems(round);
|
|
262
268
|
grid.style.setProperty("--shape", String(Math.round(Math.sqrt(items.length && items[0].v && sized(items[0].v) ? items[0].v.width / items[0].v.height : ratioOf(items[0] ? items[0].c : {})) * 1000) / 1000));
|
|
@@ -321,8 +327,8 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
321
327
|
function designsSignature(where) {
|
|
322
328
|
var v = state.view;
|
|
323
329
|
return JSON.stringify([where, perRound(), designs.showAll, designs.error, moreBusy(), localImage().ready, state.busy, v.pick && [v.pick.versionId, v.pick.intact],
|
|
324
|
-
v.rounds.map(function (r) { return [r.roundId, r.kind, r.state, r.count, r.readyCount, r.referenceIds, r.fromVersionId, r.note, !!r.pause]; }),
|
|
325
|
-
v.candidates.map(function (c) { return [c.candidateId, c.state, c.error, c.versionIds, c.busy, c.page, drawing(c), pausedRef(c)]; }),
|
|
330
|
+
v.rounds.map(function (r) { return [r.roundId, r.kind, r.state, r.count, r.readyCount, r.screens, r.scope, r.referenceIds, r.fromVersionId, r.note, !!r.pause, r.caption || ""]; }),
|
|
331
|
+
v.candidates.map(function (c) { return [c.candidateId, c.state, c.error, c.versionIds, c.busy, c.page, c.place, drawing(c), pausedRef(c)]; }),
|
|
326
332
|
v.versions.map(function (x) { return [x.versionId, x.sha256, x.fileState, x.editable]; }),
|
|
327
333
|
v.ops.map(function (o) { return [o.opId, o.state, o.resumable, o.resultVersionIds]; })]);
|
|
328
334
|
}
|
|
@@ -331,6 +337,7 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
331
337
|
function renderDesigns(host, where) {
|
|
332
338
|
if (!state.view) return;
|
|
333
339
|
var focusKey = host.contains(document.activeElement) ? keyOf(document.activeElement) : null;
|
|
340
|
+
var scrolled = boardScrolls(host);
|
|
334
341
|
var rebuilt = setIfChanged(host, designsSignature(where), function (node) {
|
|
335
342
|
var bar = designsBar();
|
|
336
343
|
var rounds = roundsNewestFirst();
|
|
@@ -338,7 +345,8 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
338
345
|
var cut = rounds.findIndex(function (r) { return r.kind !== "branch"; });
|
|
339
346
|
var shown = where === "card" && !designs.showAll ? rounds.slice(0, cut < 0 ? rounds.length : cut + 1) : rounds;
|
|
340
347
|
// The bar sits at the right of the newest round's head, so it takes no row of its own.
|
|
341
|
-
|
|
348
|
+
var boards = {};
|
|
349
|
+
shown.filter(function (r) { return r.kind !== "branch" || !boards[r.fromVersionId] && (boards[r.fromVersionId] = true); }).forEach(function (r, i) {
|
|
342
350
|
var section = sectionOf(r);
|
|
343
351
|
if (i === 0) section.querySelector(".dhead").appendChild(bar);
|
|
344
352
|
node.appendChild(section);
|
|
@@ -349,6 +357,7 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
349
357
|
node.appendChild(earlier);
|
|
350
358
|
}
|
|
351
359
|
});
|
|
360
|
+
if (rebuilt) boardScrolls(host, scrolled);
|
|
352
361
|
if (rebuilt && focusKey) {
|
|
353
362
|
var back = Array.prototype.filter.call(host.querySelectorAll("button"), function (b) { return keyOf(b) === focusKey; })[0];
|
|
354
363
|
if (back) back.focus();
|
|
@@ -357,7 +366,7 @@ export const SLATE_UI_DESIGNS = String.raw `
|
|
|
357
366
|
// A focusable control's place (its tile and its name), so a rebuild can put keyboard focus back on the same control.
|
|
358
367
|
function keyOf(node) {
|
|
359
368
|
if (!node || !node.closest) return null;
|
|
360
|
-
var tile = node.closest(".dtile");
|
|
369
|
+
var tile = node.closest(".dtile, .bshot");
|
|
361
370
|
var label = node.getAttribute("aria-label") || node.textContent || "";
|
|
362
371
|
return (tile ? tile.getAttribute("data-version") || tile.getAttribute("data-option") : "bar") + "|" + label;
|
|
363
372
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-designs.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-designs.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqWzC,CAAC"}
|
|
@@ -6,8 +6,11 @@
|
|
|
6
6
|
*
|
|
7
7
|
* Only the packing is the screen's (the gallery's is sized for cards with an action strip on a whole page):
|
|
8
8
|
*
|
|
9
|
-
* - a band plans its pictures at least
|
|
10
|
-
* and holds at most
|
|
9
|
+
* - a band plans its pictures at least 300 px across in the card and 420 px in the workspace, two across at the least,
|
|
10
|
+
* and holds at most three columns: large thumbnails (two across in Codex's inline card, three in a 1440 px
|
|
11
|
+
* workspace); the gap is a generous 16 px;
|
|
12
|
+
* - a grid with captions (the References tab's name and domain under each picture) reserves `caption` px under every
|
|
13
|
+
* picture through the solver's own footer, so a band still closes exactly;
|
|
11
14
|
* - a page with fewer pictures than a row holds is as wide as those pictures would be in a full row, so a short list
|
|
12
15
|
* shows tiles of the usual size, not one picture as wide as the pane.
|
|
13
16
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,4BAA4B,QA+CxC,CAAC"}
|
|
@@ -7,8 +7,11 @@ import { packMosaicBands } from './mosaic-bands.js';
|
|
|
7
7
|
*
|
|
8
8
|
* Only the packing is the screen's (the gallery's is sized for cards with an action strip on a whole page):
|
|
9
9
|
*
|
|
10
|
-
* - a band plans its pictures at least
|
|
11
|
-
* and holds at most
|
|
10
|
+
* - a band plans its pictures at least 300 px across in the card and 420 px in the workspace, two across at the least,
|
|
11
|
+
* and holds at most three columns: large thumbnails (two across in Codex's inline card, three in a 1440 px
|
|
12
|
+
* workspace); the gap is a generous 16 px;
|
|
13
|
+
* - a grid with captions (the References tab's name and domain under each picture) reserves `caption` px under every
|
|
14
|
+
* picture through the solver's own footer, so a band still closes exactly;
|
|
12
15
|
* - a page with fewer pictures than a row holds is as wide as those pictures would be in a full row, so a short list
|
|
13
16
|
* shows tiles of the usual size, not one picture as wide as the pane.
|
|
14
17
|
*
|
|
@@ -21,7 +24,7 @@ import { packMosaicBands } from './mosaic-bands.js';
|
|
|
21
24
|
export const SLATE_UI_INSPIRATION_COLLAGE = String.raw `
|
|
22
25
|
// ---- the collage: the web gallery's mosaic bands (packages/12ui/src/mosaic-bands.ts) ----
|
|
23
26
|
var packMosaicBands = (${packMosaicBands.toString()});
|
|
24
|
-
var COLLAGE = { min: { card:
|
|
27
|
+
var COLLAGE = { min: { card: 300, stage: 420 }, gap: 16, columns: 3, caption: 42 };
|
|
25
28
|
// How a grid of this many pictures packs at this width: the width it takes and the band packing.
|
|
26
29
|
function collagePacking(count, width, where) {
|
|
27
30
|
var gap = COLLAGE.gap;
|
|
@@ -41,14 +44,15 @@ export const SLATE_UI_INSPIRATION_COLLAGE = String.raw `
|
|
|
41
44
|
items.push({ id: String(i), aspect: shape.aspect, width: shape.width, height: shape.height });
|
|
42
45
|
}
|
|
43
46
|
var plan = collagePacking(items.length, width, where);
|
|
44
|
-
var
|
|
47
|
+
var footer = grid.__caption || 0;
|
|
48
|
+
var layout = packMosaicBands(items, plan.width, plan.packing, footer);
|
|
45
49
|
layout.placements.forEach(function (p) {
|
|
46
50
|
var tile = tiles[Number(p.id)];
|
|
47
51
|
var s = tile.style;
|
|
48
52
|
s.left = p.left + "px";
|
|
49
53
|
s.top = p.top + "px";
|
|
50
54
|
s.width = p.width + "px";
|
|
51
|
-
s.height = p.height + "px";
|
|
55
|
+
s.height = (p.height + footer) + "px";
|
|
52
56
|
var img = tile.querySelector("img");
|
|
53
57
|
if (img) img.sizes = Math.ceil(p.width) + "px";
|
|
54
58
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAA;;2BAE3B,eAAe,CAAC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CpD,CAAC"}
|
|
@@ -3,11 +3,14 @@
|
|
|
3
3
|
*
|
|
4
4
|
* `createGallery({ where, root, isSelected, onToggle })` returns `{ node, set(key, items), sync(), layout() }`.
|
|
5
5
|
*
|
|
6
|
-
* - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load? }`:
|
|
7
|
-
* `thumbUrl` for the tile and `imageUrl` for the large view, straight from their origin (`srcset`
|
|
8
|
-
* pick by the tile's laid-out width); `load(img, size)` fills a picture another way when there is no
|
|
6
|
+
* - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load?, pending? }`:
|
|
7
|
+
* `thumbUrl` for the tile and `imageUrl` for the large view (and the hover peek), straight from their origin (`srcset`
|
|
8
|
+
* lets the browser pick by the tile's laid-out width); `load(img, size)` fills a picture another way when there is no
|
|
9
|
+
* URL. A `pending` item has no picture yet: its tile is the loading surface and cannot be selected.
|
|
10
|
+
* - `caption: true` puts the item's title and its site's domain (a link to the live page) under each picture.
|
|
9
11
|
* - `set(key, items)`: a new key is a new list (the tiles are built again from the top); the same key with a longer
|
|
10
|
-
* list only adds what is new at the end
|
|
12
|
+
* list only adds what is new at the end, and refills in place a tile whose item stopped being `pending` (a reference
|
|
13
|
+
* site whose screenshot landed); a list whose shown part changed otherwise is built again. The first page shows at once and the next page appears as the person nears
|
|
11
14
|
* the end of the grid (an IntersectionObserver on a marker after the last block, under `root()`, the element that
|
|
12
15
|
* scrolls the grid, or the window), until the list ends. Each page is its own collage block, so nothing already on
|
|
13
16
|
* screen ever moves: not on a click, not when a page is added.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,4BAA4B,QA4OxC,CAAC"}
|
|
@@ -3,11 +3,14 @@
|
|
|
3
3
|
*
|
|
4
4
|
* `createGallery({ where, root, isSelected, onToggle })` returns `{ node, set(key, items), sync(), layout() }`.
|
|
5
5
|
*
|
|
6
|
-
* - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load? }`:
|
|
7
|
-
* `thumbUrl` for the tile and `imageUrl` for the large view, straight from their origin (`srcset`
|
|
8
|
-
* pick by the tile's laid-out width); `load(img, size)` fills a picture another way when there is no
|
|
6
|
+
* - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load?, pending? }`:
|
|
7
|
+
* `thumbUrl` for the tile and `imageUrl` for the large view (and the hover peek), straight from their origin (`srcset`
|
|
8
|
+
* lets the browser pick by the tile's laid-out width); `load(img, size)` fills a picture another way when there is no
|
|
9
|
+
* URL. A `pending` item has no picture yet: its tile is the loading surface and cannot be selected.
|
|
10
|
+
* - `caption: true` puts the item's title and its site's domain (a link to the live page) under each picture.
|
|
9
11
|
* - `set(key, items)`: a new key is a new list (the tiles are built again from the top); the same key with a longer
|
|
10
|
-
* list only adds what is new at the end
|
|
12
|
+
* list only adds what is new at the end, and refills in place a tile whose item stopped being `pending` (a reference
|
|
13
|
+
* site whose screenshot landed); a list whose shown part changed otherwise is built again. The first page shows at once and the next page appears as the person nears
|
|
11
14
|
* the end of the grid (an IntersectionObserver on a marker after the last block, under `root()`, the element that
|
|
12
15
|
* scrolls the grid, or the window), until the list ends. Each page is its own collage block, so nothing already on
|
|
13
16
|
* screen ever moves: not on a click, not when a page is added.
|
|
@@ -55,7 +58,12 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
|
|
|
55
58
|
if (scroller) scroller.scrollTop = 0;
|
|
56
59
|
revealPage(g);
|
|
57
60
|
} else {
|
|
61
|
+
var before = g.items;
|
|
62
|
+
var kept = items.length >= g.shown && before.slice(0, g.shown).every(function (item, i) { return item.id === items[i].id; });
|
|
63
|
+
if (!kept) { g.key = null; g.set(key, items); return; }
|
|
58
64
|
g.items = items.slice();
|
|
65
|
+
var shownTiles = g.node.querySelectorAll(".gtile");
|
|
66
|
+
for (var i = 0; i < g.shown; i++) if (!!before[i].pending !== !!items[i].pending) refillTile(g, shownTiles[i], i);
|
|
59
67
|
// The list had ended on screen (a short last page): what joins it shows at once, in that block.
|
|
60
68
|
if (g.shown % GALLERY_PAGE !== 0) revealPage(g);
|
|
61
69
|
}
|
|
@@ -69,12 +77,22 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
|
|
|
69
77
|
g.layout = function () { layoutBlocks(g.node, g.opts.where); };
|
|
70
78
|
return g;
|
|
71
79
|
}
|
|
80
|
+
// A tile whose item changed (a pending site that landed) is built again where it stands.
|
|
81
|
+
function refillTile(g, tile, index) {
|
|
82
|
+
if (!tile) return;
|
|
83
|
+
var fresh = galleryTile(g, g.items[index], index);
|
|
84
|
+
fresh.style.cssText = tile.style.cssText;
|
|
85
|
+
var img = tile.querySelector("img.thumb"), freshImg = fresh.querySelector("img.thumb");
|
|
86
|
+
if (img && freshImg && img.sizes) freshImg.sizes = img.sizes;
|
|
87
|
+
tile.parentNode.replaceChild(fresh, tile);
|
|
88
|
+
}
|
|
72
89
|
// The next page of the list as one collage block, before the end marker; a short last block is topped up first, so
|
|
73
90
|
// sites arriving one by one fill its rows instead of stacking short blocks. Returns whether anything was added.
|
|
74
91
|
function revealPage(g) {
|
|
75
92
|
if (g.shown >= g.items.length) return false;
|
|
76
93
|
var short = g.shown % GALLERY_PAGE !== 0;
|
|
77
94
|
var grid = short ? g.end.previousElementSibling : el("div", "refgrid");
|
|
95
|
+
if (g.opts.caption) { grid.__caption = COLLAGE.caption; grid.classList.add("captioned"); }
|
|
78
96
|
var page = g.items.slice(g.shown, g.shown + (short ? GALLERY_PAGE - (g.shown % GALLERY_PAGE) : GALLERY_PAGE));
|
|
79
97
|
var start = g.shown;
|
|
80
98
|
page.forEach(function (item, i) { grid.appendChild(galleryTile(g, item, start + i)); });
|
|
@@ -105,6 +123,14 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
|
|
|
105
123
|
b.setAttribute("data-ref", item.id);
|
|
106
124
|
b.setAttribute("aria-label", item.label || item.title || item.id);
|
|
107
125
|
b.setAttribute("aria-pressed", g.opts.isSelected(item.id) ? "true" : "false");
|
|
126
|
+
if (g.opts.caption) tile.appendChild(galleryCaption(item));
|
|
127
|
+
if (item.pending) {
|
|
128
|
+
tile.classList.add("pending");
|
|
129
|
+
b.classList.add("shimmer");
|
|
130
|
+
b.disabled = true;
|
|
131
|
+
tile.insertBefore(b, tile.firstChild);
|
|
132
|
+
return tile;
|
|
133
|
+
}
|
|
108
134
|
// The picture's own skeleton shows until it lands, so a tile that has arrived never flashes a grey square.
|
|
109
135
|
var img = el("img", "thumb empty shimmer");
|
|
110
136
|
img.alt = "";
|
|
@@ -117,16 +143,31 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
|
|
|
117
143
|
if (item.srcset) img.srcset = item.srcset;
|
|
118
144
|
img.src = item.thumbUrl;
|
|
119
145
|
} else if (item.load) item.load(img, "thumb");
|
|
146
|
+
if (item.imageUrl && item.imageUrl !== item.thumbUrl && !item.srcset) img.setAttribute("data-large", item.imageUrl);
|
|
120
147
|
b.appendChild(img);
|
|
121
148
|
var check = el("span", "check");
|
|
122
149
|
check.innerHTML = glyph(GLYPH.check, 15, 3);
|
|
123
150
|
b.appendChild(check);
|
|
124
151
|
b.addEventListener("click", function () { g.opts.onToggle(item.id); });
|
|
125
152
|
b.addEventListener("dblclick", function (e) { e.preventDefault(); openLargeView(g, index); });
|
|
126
|
-
tile.
|
|
153
|
+
tile.insertBefore(b, tile.firstChild);
|
|
127
154
|
tile.appendChild(glyphButton(t("expand"), GLYPH.expand, "zoombtn", function (e) { e.stopPropagation(); openLargeView(g, index); }));
|
|
128
155
|
return tile;
|
|
129
156
|
}
|
|
157
|
+
// Under a captioned picture: its name, and its site's domain as a link that opens the live page through the host.
|
|
158
|
+
function galleryCaption(item) {
|
|
159
|
+
var cap = el("div", "gcap");
|
|
160
|
+
cap.appendChild(el("span", "gname", item.title || ""));
|
|
161
|
+
if (item.sourceUrl) {
|
|
162
|
+
var link = el("a", "gdomain", item.domain || item.sourceUrl);
|
|
163
|
+
link.href = item.sourceUrl;
|
|
164
|
+
link.target = "_blank";
|
|
165
|
+
link.rel = "noopener noreferrer";
|
|
166
|
+
link.addEventListener("click", function (e) { e.preventDefault(); openSite(item.sourceUrl); });
|
|
167
|
+
cap.appendChild(link);
|
|
168
|
+
}
|
|
169
|
+
return cap;
|
|
170
|
+
}
|
|
130
171
|
|
|
131
172
|
// ---- the large view ----
|
|
132
173
|
var largeView = null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4OrD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-inspiration-grid.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-inspiration-grid.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,yBAAyB,QA+JrC,CAAC"}
|
|
@@ -101,6 +101,9 @@ export const SLATE_UI_INSPIRATION_GRID = String.raw `
|
|
|
101
101
|
pane.__built = true;
|
|
102
102
|
pane.__where = where;
|
|
103
103
|
pane.classList.add("insp", where);
|
|
104
|
+
var caption = el("p", "tabcaption");
|
|
105
|
+
pane.__caption = caption;
|
|
106
|
+
pane.appendChild(caption);
|
|
104
107
|
var status = el("div", "status");
|
|
105
108
|
status.setAttribute("data-istatus", "");
|
|
106
109
|
status.setAttribute("role", "status");
|
|
@@ -145,6 +148,7 @@ export const SLATE_UI_INSPIRATION_GRID = String.raw `
|
|
|
145
148
|
function renderInspiration(pane, where) {
|
|
146
149
|
if (!state.view) return;
|
|
147
150
|
if (!pane.__built) buildInspirationShell(pane, where);
|
|
151
|
+
pane.__caption.textContent = pane.__caption.title = tabCaption("inspiration");
|
|
148
152
|
syncSearchRun();
|
|
149
153
|
var list = gridList();
|
|
150
154
|
var searching = state.insp.searching;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-inspiration-grid.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-inspiration-grid.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JlD,CAAC"}
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
* - A new wait opens the Inspiration tab (unless the person chose a tab since), with the round's references picked;
|
|
7
7
|
* when the wait ends (Continue, or the countdown on the server) the screen moves back to Designs, where the options
|
|
8
8
|
* now draw. Moving on to Designs by hand continues the round with the picks (`setTab`).
|
|
9
|
+
* - While the server's countdown waits for the workspace's first live website reference, more than 60 s are left
|
|
10
|
+
* (`remainingMs`, workers/api/src/slate/store/pause.ts): the words say so ("Starts after the first site") and the
|
|
11
|
+
* line stays full until 60 s are left. The seconds are always the server's, so the screen never counts down a
|
|
12
|
+
* deadline the server does not keep.
|
|
9
13
|
* - In the Inspiration tab the tray carries the countdown ("Starts in 42 s") beside Continue. On Designs (the
|
|
10
14
|
* workspace's picture, or the card when the person went there) the pause bar says "Starts in 42 s" beside Change and
|
|
11
15
|
* Continue, and counts down calmly: the words change once a second (a timer role, so assistive
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-pause.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-pause.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,cAAc,QA0L1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAY7B,CAAC"}
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
* - A new wait opens the Inspiration tab (unless the person chose a tab since), with the round's references picked;
|
|
7
7
|
* when the wait ends (Continue, or the countdown on the server) the screen moves back to Designs, where the options
|
|
8
8
|
* now draw. Moving on to Designs by hand continues the round with the picks (`setTab`).
|
|
9
|
+
* - While the server's countdown waits for the workspace's first live website reference, more than 60 s are left
|
|
10
|
+
* (`remainingMs`, workers/api/src/slate/store/pause.ts): the words say so ("Starts after the first site") and the
|
|
11
|
+
* line stays full until 60 s are left. The seconds are always the server's, so the screen never counts down a
|
|
12
|
+
* deadline the server does not keep.
|
|
9
13
|
* - In the Inspiration tab the tray carries the countdown ("Starts in 42 s") beside Continue. On Designs (the
|
|
10
14
|
* workspace's picture, or the card when the person went there) the pause bar says "Starts in 42 s" beside Change and
|
|
11
15
|
* Continue, and counts down calmly: the words change once a second (a timer role, so assistive
|
|
@@ -71,11 +75,14 @@ export const SLATE_UI_PAUSE = String.raw `
|
|
|
71
75
|
if (pause.opId && pause.autoTab && state.tab === "inspiration") { state.tab = "designs"; syncTabs(); }
|
|
72
76
|
pause = { opId: null, roundId: null, endsAt: 0, held: false, chosen: null, sending: false, error: "", timer: null, asked: false, sighted: false, autoTab: false };
|
|
73
77
|
}
|
|
78
|
+
// The countdown waits for the first website: the server leaves more than the usual 60 s only then.
|
|
79
|
+
function pauseAwaitsSite() { return !pause.held && pauseLeftMs() > PAUSE_COUNTDOWN_MS; }
|
|
74
80
|
function pauseLeftMs() { return Math.max(0, pause.endsAt - pauseClock()); }
|
|
75
81
|
function pauseText() {
|
|
76
82
|
if (pause.error) return pause.error;
|
|
77
83
|
if (pause.sending) return t("pauseStarting");
|
|
78
84
|
if (pause.held) return t("pauseHeld");
|
|
85
|
+
if (pauseAwaitsSite()) return t("pauseFirstSite");
|
|
79
86
|
var left = Math.ceil(pauseLeftMs() / 1000);
|
|
80
87
|
return left > 0 ? t("startsIn", { n: left }) : t("pauseStarting");
|
|
81
88
|
}
|
|
@@ -88,10 +95,10 @@ export const SLATE_UI_PAUSE = String.raw `
|
|
|
88
95
|
var words = pauseText();
|
|
89
96
|
var left = Math.ceil(pauseLeftMs() / 1000);
|
|
90
97
|
// The tray's clock: the seconds left, nothing once held, and "Starting." when the round goes.
|
|
91
|
-
var clock = pause.error ? pause.error : pause.sending || (!pause.held && left <= 0) ? t("pauseStarting") : pause.held ? "" : t("startsIn", { n: left });
|
|
98
|
+
var clock = pause.error ? pause.error : pause.sending || (!pause.held && left <= 0) ? t("pauseStarting") : pause.held ? "" : pauseAwaitsSite() ? t("pauseFirstSite") : t("startsIn", { n: left });
|
|
92
99
|
var clocks = document.querySelectorAll("[data-pause-clock]");
|
|
93
100
|
for (var c = 0; c < clocks.length; c++) if (clocks[c].textContent !== clock) clocks[c].textContent = clock;
|
|
94
|
-
var share = pause.held ? 0 : pauseLeftMs() / PAUSE_COUNTDOWN_MS;
|
|
101
|
+
var share = pause.held ? 0 : Math.min(1, pauseLeftMs() / PAUSE_COUNTDOWN_MS);
|
|
95
102
|
// Only the bars themselves are walked, never the whole document: this runs every second while a round waits.
|
|
96
103
|
pauseBoxes = pauseBoxes.filter(function (box) { return box.isConnected !== false; });
|
|
97
104
|
pauseBoxes.forEach(function (box) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-pause.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-pause.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0LvC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY1C,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The hover peek: resting the pointer on a picture tile (an Inspiration or References tile, or a design) for a moment,
|
|
3
|
+
* or reaching it with the keyboard, shows a modestly larger copy (about 1.4x, at most half the frame wide and 60% of its height) of its picture floating over the grid, centred on the tile and
|
|
4
|
+
* kept inside the frame, with a soft shadow. Nothing in the grid moves.
|
|
5
|
+
*
|
|
6
|
+
* - The copy never takes the pointer, so a click lands on the tile exactly as without it (select in a gallery, the
|
|
7
|
+
* large view on a design), and moving onto another tile peeks that one instead. It goes on leave, a press, a scroll,
|
|
8
|
+
* a resize, Escape, and over a tile's own controls (expand, the pill, the row under a design).
|
|
9
|
+
* - Only a tile whose picture has landed peeks, and only where the copy would be noticeably larger than the tile.
|
|
10
|
+
* - It shows the tile's own picture at once; a gallery tile with a larger picture (`data-large`) swaps to it when it loads.
|
|
11
|
+
* - Off on a touch screen: only where the primary pointer hovers and is fine, and only for a mouse.
|
|
12
|
+
*
|
|
13
|
+
* Fragment of the view's script; String.raw, no backtick, no dollar-brace.
|
|
14
|
+
*/
|
|
15
|
+
export declare const SLATE_UI_PEEK: string;
|
|
16
|
+
//# sourceMappingURL=mcp-slate-ui-script-peek.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-peek.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-peek.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,QAyEzB,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The hover peek: resting the pointer on a picture tile (an Inspiration or References tile, or a design) for a moment,
|
|
3
|
+
* or reaching it with the keyboard, shows a modestly larger copy (about 1.4x, at most half the frame wide and 60% of its height) of its picture floating over the grid, centred on the tile and
|
|
4
|
+
* kept inside the frame, with a soft shadow. Nothing in the grid moves.
|
|
5
|
+
*
|
|
6
|
+
* - The copy never takes the pointer, so a click lands on the tile exactly as without it (select in a gallery, the
|
|
7
|
+
* large view on a design), and moving onto another tile peeks that one instead. It goes on leave, a press, a scroll,
|
|
8
|
+
* a resize, Escape, and over a tile's own controls (expand, the pill, the row under a design).
|
|
9
|
+
* - Only a tile whose picture has landed peeks, and only where the copy would be noticeably larger than the tile.
|
|
10
|
+
* - It shows the tile's own picture at once; a gallery tile with a larger picture (`data-large`) swaps to it when it loads.
|
|
11
|
+
* - Off on a touch screen: only where the primary pointer hovers and is fine, and only for a mouse.
|
|
12
|
+
*
|
|
13
|
+
* Fragment of the view's script; String.raw, no backtick, no dollar-brace.
|
|
14
|
+
*/
|
|
15
|
+
export const SLATE_UI_PEEK = String.raw `
|
|
16
|
+
// ---- the hover peek ----
|
|
17
|
+
var PEEK = { delayMs: 420, scale: 1.4, maxWidth: 0.5, hardWidth: 0.6, maxHeight: 0.6, floorGain: 1.2, margin: 12, minGain: 1.1 };
|
|
18
|
+
var peek = { key: null, tile: null, timer: null, node: null, held: null };
|
|
19
|
+
function peekFaceOf(target) { return target && target.closest ? target.closest(".gtile .refbtn, .dtile .dface") : null; }
|
|
20
|
+
function peekKey(face) { var tile = face.closest(".gtile, .dtile"); return tile.getAttribute("data-version") || face.getAttribute("data-ref") || ""; }
|
|
21
|
+
function peekPicture(face) {
|
|
22
|
+
var img = face.querySelector("img.thumb");
|
|
23
|
+
return img && img.complete && img.naturalWidth > 0 && !img.classList.contains("empty") && !img.classList.contains("shimmer") ? img : null;
|
|
24
|
+
}
|
|
25
|
+
function hidePeek() {
|
|
26
|
+
if (peek.timer !== null) { clearTimeout(peek.timer); peek.timer = null; }
|
|
27
|
+
if (peek.node && peek.node.parentNode) peek.node.parentNode.removeChild(peek.node);
|
|
28
|
+
peek.node = null;
|
|
29
|
+
peek.key = null;
|
|
30
|
+
peek.tile = null;
|
|
31
|
+
}
|
|
32
|
+
function armPeek(face) {
|
|
33
|
+
var key = peekKey(face);
|
|
34
|
+
if (key === peek.key || key === peek.held) return;
|
|
35
|
+
hidePeek();
|
|
36
|
+
peek.key = key;
|
|
37
|
+
peek.tile = face;
|
|
38
|
+
peek.timer = setTimeout(function () { peek.timer = null; showPeek(face); }, PEEK.delayMs);
|
|
39
|
+
}
|
|
40
|
+
function showPeek(face) {
|
|
41
|
+
var img = face.isConnected ? peekPicture(face) : null;
|
|
42
|
+
if (!img || face.disabled) return;
|
|
43
|
+
var r = face.getBoundingClientRect();
|
|
44
|
+
var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight, m = PEEK.margin;
|
|
45
|
+
if (r.width < 8 || r.height < 8) return;
|
|
46
|
+
var ratio = r.width / r.height;
|
|
47
|
+
// Half the frame's width at most, except that a wide tile (two across in a narrow frame) still gains the floor, up to 60%; a tile already past that does not peek.
|
|
48
|
+
var w = Math.min(r.width * PEEK.scale, Math.max(vw * PEEK.maxWidth, Math.min(r.width * PEEK.floorGain, vw * PEEK.hardWidth)), vw - 2 * m), h = w / ratio;
|
|
49
|
+
var hMax = Math.min(vh * PEEK.maxHeight, vh - 2 * m);
|
|
50
|
+
if (h > hMax) { h = hMax; w = h * ratio; }
|
|
51
|
+
if (w < r.width * PEEK.minGain) return;
|
|
52
|
+
var left = Math.max(m, Math.min(vw - m - w, r.left + r.width / 2 - w / 2));
|
|
53
|
+
var top = Math.max(m, Math.min(vh - m - h, r.top + r.height / 2 - h / 2));
|
|
54
|
+
var node = el("div", "peek");
|
|
55
|
+
node.setAttribute("aria-hidden", "true");
|
|
56
|
+
node.style.cssText = "left:" + left + "px;top:" + top + "px;width:" + w + "px;height:" + h + "px";
|
|
57
|
+
if (face.getAttribute("aria-pressed") === "true" || face.closest(".dtile.chosen")) node.classList.add("on");
|
|
58
|
+
var copy = el("img", "");
|
|
59
|
+
copy.alt = "";
|
|
60
|
+
copy.src = img.currentSrc || img.src;
|
|
61
|
+
node.appendChild(copy);
|
|
62
|
+
var large = img.getAttribute("data-large");
|
|
63
|
+
if (large && large !== copy.src) {
|
|
64
|
+
var better = new Image();
|
|
65
|
+
better.onload = function () { if (peek.node === node) copy.src = large; };
|
|
66
|
+
better.src = large;
|
|
67
|
+
}
|
|
68
|
+
document.body.appendChild(node);
|
|
69
|
+
peek.node = node;
|
|
70
|
+
}
|
|
71
|
+
if (typeof matchMedia === "function" && matchMedia("(hover: hover) and (pointer: fine)").matches) {
|
|
72
|
+
document.addEventListener("pointerover", function (e) {
|
|
73
|
+
if (e.pointerType && e.pointerType !== "mouse") return;
|
|
74
|
+
var face = peekFaceOf(e.target);
|
|
75
|
+
if (!face) { peek.held = null; hidePeek(); return; }
|
|
76
|
+
if (peekKey(face) !== peek.held) peek.held = null;
|
|
77
|
+
armPeek(face);
|
|
78
|
+
});
|
|
79
|
+
// A press shows the tile itself (its ring, the large view): no peek until the pointer moves to another tile.
|
|
80
|
+
document.addEventListener("pointerdown", function () { if (peek.key) peek.held = peek.key; hidePeek(); }, true);
|
|
81
|
+
document.documentElement.addEventListener("pointerleave", function () { peek.held = null; hidePeek(); });
|
|
82
|
+
document.addEventListener("focusin", function (e) { var face = peekFaceOf(e.target); if (face && face.matches(":focus-visible")) armPeek(face); else hidePeek(); });
|
|
83
|
+
document.addEventListener("focusout", function () { hidePeek(); });
|
|
84
|
+
document.addEventListener("scroll", hidePeek, true);
|
|
85
|
+
window.addEventListener("resize", hidePeek);
|
|
86
|
+
document.addEventListener("keydown", function (e) { if (e.key === "Escape") hidePeek(); }, true);
|
|
87
|
+
}
|
|
88
|
+
`;
|
|
89
|
+
//# sourceMappingURL=mcp-slate-ui-script-peek.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-peek.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-peek.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEtC,CAAC"}
|
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
* and captured by the 12ui command line while a round waits on them. It is the Inspiration tab's gallery, large view
|
|
4
4
|
* and tray (mcp-slate-ui-script-inspiration-gallery.ts, mcp-slate-ui-script-inspiration-grid.ts) over the sites:
|
|
5
5
|
*
|
|
6
|
-
* -
|
|
7
|
-
*
|
|
6
|
+
* - As soon as the agents have chosen the sites (`view.pendingSites`), each shows as a placeholder tile, the loading
|
|
7
|
+
* surface, with its name and domain under it; its screenshot fills that tile in place when it is captured (the status
|
|
8
|
+
* poll brings each, or the tab's own short watch below). A site keeps the place it first took, so nothing already
|
|
9
|
+
* shown moves; a site that was never planned joins the end. The name and domain stay under the picture.
|
|
8
10
|
* - A click selects or deselects a site exactly like an Inspiration reference (`toggleRef`: the selection for the next
|
|
9
11
|
* round, or, while a round waits on the person, that round's references), with the same ring, check and tray.
|
|
10
12
|
* - The large view adds Open site, which opens the live page through the host.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-slate-ui-script-references.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-references.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"mcp-slate-ui-script-references.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-references.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,mBAAmB,QAiH/B,CAAC"}
|