Enforce workspace palette locking and workspace-gated tool usage

- added second workspace lock overlay on actual tool surface below header
- kept existing tile overlay and workspace action gating behavior
- disabled Save/Save As/Close Workspace until workspace is loaded
- updated Palette Browser shared-palette flow:
  - block reserved palette names for workspace assignment
  - lock shared palette after initial assignment
  - show explicit alert to edit swatches when palette is locked

Author: DavidQ

tools/Palette Browser/main.js

@@ -234,6 +234,7 @@ function renderPaletteList() {
 function renderSelectedPalette() {
   const palette = getSelectedPalette();
   const canUseInActiveTools = isWorkspaceContext();
+  const existingSharedPalette = readSharedPaletteHandoff();
   if (!palette) {
     refs.paletteTitle.textContent = "Palette Preview";
     refs.paletteSummaryText.textContent = "Select a palette to inspect its swatches.";
@@ -472,6 +473,33 @@ function usePaletteInActiveTools() {
     refs.selectionText.textContent = "Use in Workspace Manager is available only in Workspace Manager context.";
     return;
   }
+  if (hasReservedPaletteKeyword(palette.name)) {
+    const message = "Reserved palette names cannot be used for workspace shared palette. Duplicate and rename first.";
+    refs.selectionText.textContent = message;
+    window.alert(message);
+    return;
+  }
+  const existingSharedPalette = readSharedPaletteHandoff();
+  if (
+    existingSharedPalette
+    && existingSharedPalette.paletteId
+    && existingSharedPalette.paletteId !== palette.id
+  ) {
+    const message = `Shared palette is locked to ${existingSharedPalette.displayName}. Edit swatches instead.`;
+    refs.selectionText.textContent = message;
+    window.alert(message);
+    return;
+  }
+  if (
+    existingSharedPalette
+    && existingSharedPalette.paletteId
+    && existingSharedPalette.paletteId === palette.id
+  ) {
+    const message = "Shared palette is locked. Edit swatches instead.";
+    refs.selectionText.textContent = message;
+    window.alert(message);
+    return;
+  }
   const context = getSharedLaunchContext();
   const handoff = createPaletteHandoff({
     paletteId: palette.id,

tools/index.html

@@ -36,8 +36,12 @@ <h2>Workspace Manager</h2>
 
     <section>
       <h2>First-Class Tools</h2>
-      <div class="grid" data-active-tools-grid>
-      </div>
+      <h3>Editors</h3>
+      <div class="grid" data-active-tools-editors-grid></div>
+      <h3>Utilities</h3>
+      <div class="grid" data-active-tools-utilities-grid></div>
+      <h3>Viewers</h3>
+      <div class="grid" data-active-tools-viewers-grid></div>
       <noscript>
         <p class="callout"><strong>JavaScript required:</strong> the active tools list is generated from the shared
           tools registry.</p>

tools/renderToolsIndex.js

@@ -61,6 +61,29 @@ function renderToolCard(tool) {
   `;
 }
 
+function classifyToolGroup(toolId) {
+  const viewerToolIds = new Set([
+    "3d-asset-viewer",
+    "state-inspector",
+    "replay-visualizer",
+    "performance-profiler"
+  ]);
+  const utilityToolIds = new Set([
+    "asset-browser",
+    "asset-pipeline-tool",
+    "tile-model-converter",
+    "physics-sandbox",
+    "3d-json-payload-normalizer"
+  ]);
+  if (viewerToolIds.has(toolId)) {
+    return "viewers";
+  }
+  if (utilityToolIds.has(toolId)) {
+    return "utilities";
+  }
+  return "editors";
+}
+
 function renderWorkspaceManagerCard() {
   return `
     <div class="card tools-platform-card">
@@ -88,16 +111,24 @@ function renderWorkspaceManagerSection() {
 }
 
 function renderActiveToolsList() {
-  const grid = document.querySelector("[data-active-tools-grid]");
-  if (!grid) {
+  const editorsGrid = document.querySelector("[data-active-tools-editors-grid]");
+  const utilitiesGrid = document.querySelector("[data-active-tools-utilities-grid]");
+  const viewersGrid = document.querySelector("[data-active-tools-viewers-grid]");
+  if (!editorsGrid || !utilitiesGrid || !viewersGrid) {
     return;
   }
-  const toolCards = getToolRegistry()
+  const tools = getToolRegistry()
     .filter((entry) => entry.active === true)
     .filter((entry) => entry.visibleInToolsList === true)
-    .sort((left, right) => String(left.displayName || "").localeCompare(String(right.displayName || "")))
-    .map((tool) => renderToolCard(tool));
-  grid.innerHTML = toolCards.join("\n");
+    .sort((left, right) => String(left.displayName || "").localeCompare(String(right.displayName || "")));
+
+  const editors = tools.filter((tool) => classifyToolGroup(tool.id) === "editors").map((tool) => renderToolCard(tool));
+  const utilities = tools.filter((tool) => classifyToolGroup(tool.id) === "utilities").map((tool) => renderToolCard(tool));
+  const viewers = tools.filter((tool) => classifyToolGroup(tool.id) === "viewers").map((tool) => renderToolCard(tool));
+
+  editorsGrid.innerHTML = editors.join("\n");
+  utilitiesGrid.innerHTML = utilities.join("\n");
+  viewersGrid.innerHTML = viewers.join("\n");
 }
 
 function sortPlannedCardsAlphabetically() {

tools/shared/platformShell.css

@@ -196,6 +196,10 @@ body.tools-platform-surface {
   border-bottom: 0;
 }
 
+.tools-platform-frame__nav-tool-row.is-disabled {
+  opacity: 0.55;
+}
+
 .tools-platform-frame__binding-badges {
   display: inline-flex;
   flex-wrap: wrap;
@@ -242,6 +246,54 @@ body.tools-platform-surface {
   width: 100%;
 }
 
+.tools-platform-frame__nav.is-workspace-locked {
+  position: relative;
+}
+
+.tools-platform-frame__nav.is-workspace-locked::after {
+  content: "Create or open a workspace to enable tools.";
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 16px;
+  color: #ffffff;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  border-radius: 12px;
+  background: rgba(28, 13, 60, 0.52);
+  border: 1px solid rgba(221, 214, 254, 0.26);
+  backdrop-filter: blur(1px);
+  pointer-events: auto;
+}
+
+.tools-platform-lock-surface {
+  position: relative;
+}
+
+.tools-platform-lock-surface::after {
+  content: attr(data-tools-platform-lock-message);
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px;
+  color: #ffffff;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  border-radius: 12px;
+  background: rgba(28, 13, 60, 0.44);
+  border: 1px solid rgba(221, 214, 254, 0.26);
+  backdrop-filter: blur(1px);
+  pointer-events: auto;
+}
+
 .tools-platform-frame__nav-section {
   display: grid;
   gap: 10px;
@@ -335,6 +387,15 @@ body.tools-platform-surface {
   background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
 }
 
+.tools-platform-frame__project-button:disabled,
+.tools-platform-frame__project-button[aria-disabled="true"] {
+  color: #b3a7c9;
+  border-color: rgba(179, 167, 201, 0.5);
+  background: linear-gradient(180deg, rgba(89, 72, 126, 0.42) 0%, rgba(58, 44, 88, 0.66) 100%);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
 .tools-platform-frame__project-input {
   display: none;
 }
@@ -372,6 +433,14 @@ body.tools-platform-surface {
   font-size: 0.88rem;
 }
 
+.tools-platform-frame__nav-link.is-disabled {
+  color: #b3a7c9;
+  border-color: rgba(221, 214, 254, 0.16);
+  background: linear-gradient(180deg, rgba(76, 29, 149, 0.55) 0%, rgba(49, 17, 102, 0.7) 100%);
+  pointer-events: none;
+  box-shadow: none;
+}
+
 .tools-platform-frame__action-link {
   display: inline-flex;
   align-items: center;