Add guest view and polish Toolbox tile layout - PR_26155_022-024-toolbox-guest-and-tile-polish

Author: ToolboxAid

assets/theme-v2/css/panels.css

@@ -82,6 +82,23 @@
   object-fit: cover
 }
 
+.card-media-link {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit
+}
+
+.card-media-link img {
+  transition: transform var(--transition-duration-fast) ease
+}
+
+.card-media-link:hover img,
+.card-media-link:focus-visible img {
+  transform: scale(1.04) rotate(2deg)
+}
+
 .card img {
   width: 100%;
   display: block

assets/theme-v2/partials/header-nav.html

@@ -23,8 +23,8 @@
             </div>
           </div>
           <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Assets &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Assets tools">
+            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Content &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Content tools">
               <a data-nav-link data-toolbox-menu-item data-route="tool-assets" href="toolbox/assets/index.html">Assets</a>
               <a data-nav-link data-toolbox-menu-item data-route="colors" href="toolbox/colors/index.html">Colors</a>
               <a data-nav-link data-toolbox-menu-item data-route="fonts" href="toolbox/fonts/index.html">Fonts</a>

docs_build/dev/reports/guest-role-view.md

@@ -0,0 +1,33 @@
+# Guest Role View
+
+Stack item: `PR_26155_022-guest-role-view`
+
+## Summary
+
+- Added Guest as the default public Toolbox role.
+- Supported URL roles are `?role=guest`, `?role=user`, and `?role=admin`.
+- Guest banner text is `GUEST VIEW • Preview only • Sign in to create`.
+- Creator banner text is `CREATOR VIEW • Project tools enabled • Switch to Admin View`.
+- Admin banner text is `ADMIN VIEW • Planned tools visible • Switch to Creator View`.
+- Banner links continue to switch Guest -> Creator, Creator -> Admin, and Admin -> Creator.
+
+## Behavior Notes
+
+- Guest and Creator views show the same current public preview-safe tool set because the Toolbox remains a static wireframe surface with no login, database, save, or create runtime behavior.
+- Admin view continues to reveal planned, hidden, and admin-only tool tiles.
+- No login, auth, DB, persistence, or real save/create behavior was added.
+
+## Validation Notes
+
+- Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` before changes.
+- Ran `node scripts/validate-active-tools-surface.mjs`: passed.
+- Ran `node scripts/validate-tool-registry.mjs`: passed.
+- Ran `npm run test:workspace-v2`: passed. This is a legacy command name for the Project Workspace validation lane.
+
+## Manual Test Notes
+
+- `/toolbox/index.html` defaults to Guest view.
+- `/toolbox/index.html?role=guest` shows the Guest banner and no admin-only tiles.
+- `/toolbox/index.html?role=user` shows the Creator banner and no admin-only tiles.
+- `/toolbox/index.html?role=admin` shows the Admin banner and planned/admin tiles.
+- No console errors were reported by the targeted Playwright coverage.

docs_build/dev/reports/toolbox-tile-layout-polish.md

@@ -0,0 +1,30 @@
+# Toolbox Tile Layout Polish
+
+Stack item: `PR_26155_023-toolbox-tile-layout-polish`
+
+## Summary
+
+- Moved the tool category/content cluster under the Open Tool button on Toolbox tiles.
+- Replaced duplicate visible category text with the existing content cluster text.
+- Removed the separate card-level `.kicker` category row from generated tool cards.
+- Made preview images clickable through the same route as the Open Tool button.
+- Added reusable Theme V2 `.card-media-link` styling for preview-image hover.
+
+## Theme V2 Gap Finding
+
+- Existing Theme V2 card media styling supported static media but did not include a reusable linked preview-media hover affordance.
+- Added the reusable pattern to `assets/theme-v2/css/panels.css`.
+- No page-local CSS, tool-local CSS, inline styles, or style blocks were added.
+
+## Validation Notes
+
+- Targeted Playwright checks verify that card preview links match Open Tool routes.
+- Targeted Playwright checks verify that preview hover changes the image transform.
+- Targeted Playwright checks verify that generated Toolbox cards no longer contain duplicate `.kicker` category rows.
+- `npm run test:workspace-v2` passed.
+
+## Manual Test Notes
+
+- Toolbox tiles keep the existing card structure.
+- The preview image for the Assets tile routes to `/toolbox/assets/index.html`, matching Open Tool.
+- Category display appears once per tile through the content cluster under the Open Tool button.

docs_build/dev/reports/toolbox-tool-count-and-group-name.md

@@ -0,0 +1,27 @@
+# Toolbox Tool Count And Group Name
+
+Stack item: `PR_26155_024-toolbox-tool-count-and-group-name`
+
+## Summary
+
+- Added `Tool Count: <visible>/<total>` to the right of the Toolbox view controls.
+- Tool count reflects the active role filter:
+  - Guest: `30/42`
+  - Creator: `30/42`
+  - Admin: `42/42`
+- Renamed the Toolbox group from `Assets` to `Content`.
+- Kept the tool label `Assets`.
+
+## Validation Notes
+
+- Targeted static validation confirms the Tool Count slot exists.
+- Targeted Playwright validation confirms Guest, Creator, and Admin counts.
+- Targeted Playwright validation confirms the grouped view uses `Content` and no longer exposes an `Assets` group heading.
+- Targeted Playwright validation confirms Arcade is absent from the Toolbox page.
+- Targeted Playwright validation confirms no forbidden tool label suffix appears in active Toolbox tile labels.
+
+## Manual Test Notes
+
+- `/toolbox/index.html` shows Order A-Z, Group, Progress, Build Path, and Tool Count.
+- Group view displays `Content` as the group heading.
+- The `Assets` tool remains present as a tile inside the Content group.

scripts/validate-active-tools-surface.mjs

@@ -119,6 +119,21 @@ async function main() {
   if (!/<button[^>]+data-tools-view="build-path"[^>]*>\s*Build Path\s*<\/button>/i.test(toolboxIndex)) {
     issues.push("Toolbox index is missing the Build Path view mode control.");
   }
+  if (!/data-tools-count/.test(toolboxIndex) || !/Tool Count:/.test(toolboxIndex + "\n" + toolsAccordions)) {
+    issues.push("Toolbox index must expose a visible Tool Count control tied to current role filtering.");
+  }
+  if (!/GUEST VIEW/.test(toolboxIndex + "\n" + toolsAccordions) || !/"guest"/.test(toolsAccordions)) {
+    issues.push("Toolbox role simulation must support an explicit Guest view.");
+  }
+  if (!/"group": "Content"/.test(toolsAccordions) || /"group": "Assets"/.test(toolsAccordions)) {
+    issues.push("Toolbox Content group must replace the old Assets group label while keeping the Assets tool label.");
+  }
+  if (!/card-media-link/.test(toolsAccordions)) {
+    issues.push("Toolbox preview images must be linked through the shared card media link pattern.");
+  }
+  if (/group\.className = "kicker"/.test(toolsAccordions)) {
+    issues.push("Toolbox tool cards must not render a duplicate category kicker.");
+  }
   if (/data-tools-view="(?:progress|build-path)"[^>]*aria-disabled="true"/.test(toolboxIndex)) {
     issues.push("Progress and Build Path view mode controls must render as normal reviewable controls, not disabled controls.");
   }

tests/playwright/tools/RootToolsFutureState.spec.mjs

@@ -49,11 +49,13 @@ test("root tools surface links current tool pages without old_* routes", async (
     await expect(page.getByRole("button", { name: "Build Path" })).toBeVisible();
     await expect(page.getByRole("button", { name: "Progress" })).not.toHaveAttribute("aria-disabled", "true");
     await expect(page.getByRole("button", { name: "Build Path" })).not.toHaveAttribute("aria-disabled", "true");
-    await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("CREATOR VIEW • Planned tools hidden • Switch to Admin View");
-    await expect(page.locator("[data-toolbox-role-banner]")).toHaveAttribute("href", /role=admin/);
+    await expect(page.locator("[data-tools-count]")).toHaveText("Tool Count: 30/42");
+    await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("GUEST VIEW • Preview only • Sign in to create");
+    await expect(page.locator("[data-toolbox-role-banner]")).toHaveAttribute("href", /role=user/);
     await expect(page.getByText("Progress Wireframe")).toHaveCount(0);
     await expect(page.getByText("Build Path Wireframe")).toHaveCount(0);
     await expect(page.locator("[data-toolbox-wireframe]")).toHaveCount(0);
+    await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
     const languagesCard = page.locator("main .control-card").filter({
       has: page.locator("h3", { hasText: "Languages" })
     });
@@ -93,6 +95,32 @@ test("root tools surface links current tool pages without old_* routes", async (
       "Cloud",
       "Custom Extensions"
     ]));
+    await expect(page.locator("main .control-card .kicker")).toHaveCount(0);
+    const assetsCard = page.locator("main .control-card").filter({
+      has: page.locator("h3", { hasText: /^Assets$/ })
+    }).first();
+    await expect(assetsCard.locator(".card-body > .content-cluster")).toContainText("Content");
+    await expect(assetsCard.locator(".card-body > .content-cluster")).toHaveCount(1);
+    const assetsBodyOrder = await assetsCard.locator(".card-body").evaluate((body) => (
+      Array.from(body.children).map((child) => child.classList.contains("content-cluster") ? "content-cluster" : child.tagName.toLowerCase())
+    ));
+    expect(assetsBodyOrder).toEqual(["h3", "p", "a", "content-cluster"]);
+    await expect(assetsCard.locator(".card-media-link")).toHaveAttribute("href", "../toolbox/assets/index.html");
+    await expect(assetsCard.locator("a.btn")).toHaveAttribute("href", "../toolbox/assets/index.html");
+    const previewImage = assetsCard.locator(".card-media-link img");
+    const transformBeforeHover = await previewImage.evaluate((image) => getComputedStyle(image).transform);
+    await assetsCard.locator(".card-media-link").hover();
+    await page.waitForTimeout(100);
+    const transformAfterHover = await previewImage.evaluate((image) => getComputedStyle(image).transform);
+    expect(transformAfterHover).not.toBe(transformBeforeHover);
+    expect(transformAfterHover).not.toBe("none");
+    await assetsCard.locator(".card-media-link").click();
+    await page.waitForURL(/\/toolbox\/assets\/index\.html$/);
+    await page.goBack({ waitUntil: "networkidle" });
+    await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("GUEST VIEW • Preview only • Sign in to create");
+    await page.getByRole("button", { name: "Group" }).click();
+    await expect(page.locator("[data-tools-accordion='Content']")).toBeVisible();
+    await expect(page.locator("[data-tools-accordion='Assets']")).toHaveCount(0);
     await page.getByRole("button", { name: "Progress" }).click();
     await expect(page.locator("[data-tools-accordion-list] [data-toolbox-readiness='locked']").first()).toBeVisible();
     await expect(page.locator("[data-tools-accordion-list] [data-toolbox-readiness='ready']").first()).toBeVisible();
@@ -124,11 +152,16 @@ test("root tools surface links current tool pages without old_* routes", async (
     const hrefs = await page.locator("a[href]").evaluateAll((links) => links.map((link) => link.getAttribute("href")));
     expect(hrefs.filter((href) => href && /(^|\/|\.\.\/)tools\/old_/.test(href))).toEqual([]);
     expect(failedRequests.filter((request) => request.includes("/toolbox/old_"))).toEqual([]);
-    expect(pageErrors).toEqual([]);
 
+    await page.locator("[data-toolbox-role-banner]").click();
+    await page.waitForURL(/role=user/);
+    await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("CREATOR VIEW • Project tools enabled • Switch to Admin View");
+    await expect(page.locator("[data-tools-count]")).toHaveText("Tool Count: 30/42");
+    await expect(page.locator("main").getByText("Users", { exact: true })).toHaveCount(0);
     await page.locator("[data-toolbox-role-banner]").click();
     await page.waitForURL(/role=admin/);
     await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("ADMIN VIEW • Planned tools visible • Switch to Creator View");
+    await expect(page.locator("[data-tools-count]")).toHaveText("Tool Count: 42/42");
     const adminLabels = await page.locator("main [data-tools-accordion-list] .control-card h3").evaluateAll((labels) => labels.map((label) => label.textContent.trim()));
     expect(adminLabels).toEqual(expect.arrayContaining([
       "Users",
@@ -140,8 +173,13 @@ test("root tools surface links current tool pages without old_* routes", async (
     ]));
     await page.locator("[data-toolbox-role-banner]").click();
     await page.waitForURL(/role=user/);
-    await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("CREATOR VIEW • Planned tools hidden • Switch to Admin View");
+    await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("CREATOR VIEW • Project tools enabled • Switch to Admin View");
+    await expect(page.locator("main").getByText("Users", { exact: true })).toHaveCount(0);
+    await page.goto(`${server.baseUrl}/toolbox/index.html?role=guest`, { waitUntil: "networkidle" });
+    await expect(page.locator("[data-toolbox-role-banner]")).toHaveText("GUEST VIEW • Preview only • Sign in to create");
+    await expect(page.locator("[data-tools-count]")).toHaveText("Tool Count: 30/42");
     await expect(page.locator("main").getByText("Users", { exact: true })).toHaveCount(0);
+    expect(pageErrors).toEqual([]);
   } finally {
     await workspaceV2CoverageReporter.stop(page);
     await server.close();

toolbox/index.html

@@ -13,7 +13,7 @@
 <body>
     <div data-partial="header-nav"></div>
     <div class="container" aria-label="Toolbox role simulation">
-        <a class="status" href="toolbox/index.html?role=admin" data-toolbox-role-banner>CREATOR VIEW • Planned tools hidden • Switch to Admin View</a>
+        <a class="status" href="toolbox/index.html?role=user" data-toolbox-role-banner>GUEST VIEW • Preview only • Sign in to create</a>
     </div>
     <main>
         <section class="page-title">
@@ -29,6 +29,7 @@ <h1>Creator tools organized by build surface.</h1>
                     <button class="btn" type="button" data-tools-sort="grouped" aria-pressed="false">Group</button>
                     <button class="btn" type="button" data-tools-view="progress" aria-pressed="false">Progress</button>
                     <button class="btn" type="button" data-tools-view="build-path" aria-pressed="false">Build Path</button>
+                    <span class="pill" data-tools-count>Tool Count: 0/0</span>
                 </div>
                 <div class="accordion-group" data-tools-accordion-list></div>
             </div>

toolbox/toolRegistry.js

@@ -119,7 +119,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "assets",
     "entryPoint": "assets/index.html",
     "description": "Create sprites, animations, vectors, and palettes.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-content-assets",
     "requiredForPlayable": true,
     "requiredForTestable": true,
@@ -146,7 +146,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "colors",
     "entryPoint": "colors/index.html",
     "description": "Craft and manage color palettes for your games.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-platform-cloud",
     "requiredForPlayable": true,
     "requiredForTestable": true,
@@ -173,7 +173,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "fonts",
     "entryPoint": "fonts/index.html",
     "description": "Plan game typography, font loading, and readable text choices.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-content-assets",
     "requiredForPlayable": false,
     "requiredForTestable": false,
@@ -200,7 +200,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "sprites",
     "entryPoint": "sprites/index.html",
     "description": "Plan sprite creation, review, and game-ready export workflows.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-build-create",
     "requiredForPlayable": true,
     "requiredForTestable": true,
@@ -227,7 +227,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "characters",
     "entryPoint": "characters/index.html",
     "description": "Plan player, NPC, and character asset workflows.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-build-create",
     "requiredForPlayable": true,
     "requiredForTestable": true,
@@ -254,7 +254,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "objects",
     "entryPoint": "objects/index.html",
     "description": "Design reusable game objects and object-ready assets.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-build-create",
     "requiredForPlayable": true,
     "requiredForTestable": true,
@@ -281,7 +281,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "worlds",
     "entryPoint": "worlds/index.html",
     "description": "Shape world layouts, maps, terrain, and scene geometry.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-content-assets",
     "requiredForPlayable": true,
     "requiredForTestable": true,
@@ -308,7 +308,7 @@ export const TOOL_REGISTRY = Object.freeze([
     "folderName": "animations",
     "entryPoint": "animations/index.html",
     "description": "Plan character and object animation states.",
-    "category": "Assets",
+    "category": "Content",
     "colorGroup": "tool-group-build-create",
     "requiredForPlayable": true,
     "requiredForTestable": true,