Unify table-management canon and aqua icon system

demo/web/templates/base.html

@@ -60,6 +60,19 @@
       <path d="M5.8 4L8 1.8 10.2 4"></path>
       <path d="M5 10.2h6"></path>
     </symbol>
+    <symbol id="ico-export-filtered" viewBox="0 0 16 16">
+      <path d="M2 4.2v8.6h10.8"></path>
+      <path d="M7 8V1.8"></path>
+      <path d="M4.8 4L7 1.8 9.2 4"></path>
+      <path d="M10 5.1h5.2L13.1 7.5v3.1l-1.3.7V7.5z"></path>
+    </symbol>
+    <symbol id="ico-export-selected" viewBox="0 0 16 16">
+      <path d="M2 4.2v8.6h10.8"></path>
+      <path d="M7 8V1.8"></path>
+      <path d="M4.8 4L7 1.8 9.2 4"></path>
+      <rect x="10.1" y="5.2" width="5" height="5" rx="0.6"></rect>
+      <path d="M11.2 6.3l2.8 2.8M14 6.3l-2.8 2.8"></path>
+    </symbol>
     <symbol id="ico-retry" viewBox="0 0 16 16">
       <path d="M12.2 6A4.8 4.8 0 0 0 4.8 4.4"></path>
       <path d="M5.6 2.9L4.1 4.6 5.9 5.8"></path>

demo/web/templates/controls_pattern.html

@@ -69,7 +69,7 @@
           <div class="toolbar-group-title">Import/Export</div>
           <div class="toolbar-group-buttons">
             <a class="tool-icon-btn" href="/patterns/io" title="Import" aria-label="Import"><svg class="tool-svg" aria-hidden="true"><use href="#ico-import"></use></svg></a>
-            <a class="tool-icon-btn" href="{{ .BulkExportURL }}" title="Export selected" aria-label="Export selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export"></use></svg></a>
+            <a class="tool-icon-btn" href="{{ .BulkExportURL }}" title="Export selected" aria-label="Export selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-selected"></use></svg></a>
           </div>
         </div>
         <div class="toolbar-group" role="group" aria-label="Task actions">

demo/web/templates/operator_tools_pattern.html

@@ -26,15 +26,16 @@
       </div>
       </div>
 
-      <div class="panel-subsection panel-subsection-divider" id="operator-actions">
+      <div class="panel-subsection panel-subsection-divider" id="operator-queue">
       <div class="panel-head">
-        <h2>Operator Tooling Actions</h2>
+        <h2>Operations Queue</h2>
-        <div class="meta">Batch controls must keep scope/filter context explicit</div>
+        <div class="meta">Complex dashboards may include multiple tables; standardize row actions and statuses first.</div>
       </div>
       {{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
       <p class="meta" style="margin-bottom:12px;">
         Selected on this view: {{ .SelectedVisible }}{{ if gt .SelectionOutside 0 }} · Selected outside current filter: {{ .SelectionOutside }}{{ end }}
       </p>
+      <div class="meta" style="margin-bottom:12px;">Batch controls must keep scope/filter context explicit.</div>
       <div class="table-toolbar" role="toolbar" aria-label="Operator tooling actions">
         <div class="toolbar-group" role="group" aria-label="Selection">
           <div class="toolbar-group-title">Selection</div>
@@ -55,8 +56,8 @@
           <div class="toolbar-group-title">Import/Export</div>
           <div class="toolbar-group-buttons">
             <a class="tool-icon-btn" href="{{ .ImportPreviewURL }}" title="Import batch preview" aria-label="Import batch preview"><svg class="tool-svg" aria-hidden="true"><use href="#ico-import"></use></svg></a>
-            <a class="tool-icon-btn" href="{{ .ExportFilteredURL }}" title="Export filtered" aria-label="Export filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export"></use></svg></a>
+            <a class="tool-icon-btn" href="{{ .ExportFilteredURL }}" title="Export filtered" aria-label="Export filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-filtered"></use></svg></a>
-            <a class="tool-icon-btn" href="{{ .ExportSelectedURL }}" title="Export selected" aria-label="Export selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export"></use></svg></a>
+            <a class="tool-icon-btn" href="{{ .ExportSelectedURL }}" title="Export selected" aria-label="Export selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-selected"></use></svg></a>
           </div>
         </div>
         <div class="toolbar-group" role="group" aria-label="Task actions">
@@ -74,13 +75,6 @@
           </div>
         </div>
       </div>
-      </div>
-
-      <div class="panel-subsection panel-subsection-divider" id="operator-queue">
-      <div class="panel-head">
-        <h2>Operations Queue</h2>
-        <div class="meta">Complex dashboards may include multiple tables; standardize row actions and statuses first.</div>
-      </div>
       <div class="table-wrap">
         <table class="ui-table">
           <thead>

exports/bundles/ui-pattern-controls.yaml

@@ -4,7 +4,7 @@
   "description": "Buttons, checkboxes, segmented filters, and bulk-selection control patterns.",
   "conflict_policy": "merge-manual",
   "entries": [
-    { "from": "patterns/controls-selection", "to": "docs/ui-patterns/controls-selection", "mode": "dir" }
+    { "from": "patterns/controls-selection", "to": "docs/ui-patterns/controls-selection", "mode": "dir" },
+    { "from": "patterns/table-management", "to": "docs/ui-patterns/table-management", "mode": "dir" }
   ]
 }
-

exports/bundles/ui-pattern-operator-tools.yaml

@@ -4,6 +4,7 @@
   "description": "Universal operator/admin dashboard pattern: queue tables, batch actions, and safety guardrails.",
   "conflict_policy": "merge-manual",
   "entries": [
-    { "from": "patterns/operator-tools", "to": "docs/ui-patterns/operator-tools", "mode": "dir" }
+    { "from": "patterns/operator-tools", "to": "docs/ui-patterns/operator-tools", "mode": "dir" },
+    { "from": "patterns/table-management", "to": "docs/ui-patterns/table-management", "mode": "dir" }
   ]
 }

exports/bundles/ui-theme-aqua-legacy.yaml

@@ -1,7 +1,7 @@
 {
   "id": "ui-theme-aqua-legacy",
   "version": 1,
-  "description": "Legacy snapshot bundle of the Aqua-style visual exploration (reference only, not active baseline).",
+  "description": "Canonical Aqua theme layer for shared UI primitives, including icon sprite and reusable component chrome.",
   "conflict_policy": "merge-manual",
   "entries": [
     { "from": "patterns/theme-aqua-legacy", "to": "docs/ui-themes/aqua-legacy", "mode": "dir" }

kit/patterns/controls-selection/contract.md

@@ -1,5 +1,12 @@
 # Contract: Controls + Selection
 
+## Shared Base
+
+- This pattern inherits the shared `table-management` contract:
+  `kit/patterns/table-management/contract.md`.
+- Reuse shared toolbar/table/icon geometry from the base contract first, then define only
+  controls-specific additions below.
+
 ## Buttons
 
 - Use a small stable button taxonomy: `primary`, `secondary`, `ghost`, `danger`, `disabled`.

kit/patterns/operator-tools/contract.md

@@ -1,5 +1,12 @@
 # Contract: Operator Tools Dashboard
 
+## Shared Base
+
+- This pattern inherits the shared `table-management` contract:
+  `kit/patterns/table-management/contract.md`.
+- Reuse shared toolbar/table/icon geometry from the base contract first, then define only
+  operator-specific behavior.
+
 ## Purpose
 
 Provide a canonical structure for high-density operator/admin screens without encoding

kit/patterns/table-management/README.md

@@ -0,0 +1,25 @@
+# Table Management Pattern (Shared Module)
+
+Shared reusable module for high-density table screens across patterns.
+
+This module is the canonical source for:
+
+- unified table toolbar layout (single container, grouped actions, vertical separators)
+- icon-first action buttons with deterministic semantics
+- select/actions narrow edge columns
+- toolbar+table visual seam behavior (single continuous block)
+- canonical SVG icon sprite for table actions (shared at theme layer)
+- canonical Aqua style surface for the module (shared at theme layer)
+
+Use this module as the base interaction contract for:
+
+- `controls-selection`
+- `operator-tools`
+
+Pattern-specific contracts should only define additions or exceptions.
+
+## Canonical Assets
+
+- Behavior/layout contract: `contract.md`
+- Global icon sprite: `../theme-aqua-legacy/templates/icon_sprite.html`
+- Global Aqua stylesheet: `../theme-aqua-legacy/demo-aqua-freeze.css`

kit/patterns/table-management/contract.md

@@ -0,0 +1,84 @@
+# Contract: Table Management (Shared)
+
+## Scope
+
+Defines one canonical, reusable interaction model for table-driven operator/admin screens.
+All patterns that expose table selection + bulk actions must inherit this contract.
+Visual tokens and icon rendering are inherited from the global Aqua theme module:
+`kit/patterns/theme-aqua-legacy`.
+
+## Canonical Regions
+
+1. Selection summary line (visible/selected counts).
+2. Unified table toolbar (single module container).
+3. Data table body.
+4. Pagination.
+
+Toolbar and table must read as one continuous module:
+
+- toolbar directly above table,
+- no double borders/rounded-corner seams at the join,
+- table horizontal overflow remains enabled when needed.
+
+## Toolbar Geometry
+
+- One outer toolbar container for all groups.
+- Groups are separated with vertical separators.
+- Group title + icon buttons are inline and compact.
+- Group order is fixed:
+  1. `Selection`
+  2. `Actions`
+  3. `Import/Export`
+  4. `Task Actions`
+  5. `Misc`
+
+## Button Model
+
+- Buttons are icon-first inside toolbar groups.
+- Each button must expose deterministic semantics via `title` and `aria-label`.
+- Keep primary and destructive variants explicit via style tokens, not by icon ambiguity alone.
+
+## Icon Semantics (One Action = One Icon)
+
+Do not reuse the same icon for semantically different actions in this module.
+
+Canonical mapping:
+
+- `select visible` -> checked square
+- `select filtered` -> filter + plus
+- `clear visible` -> square + minus
+- `clear filtered` -> filter + close
+- `clear selection` -> clear selection icon (distinct from remove/cancel/archive)
+- `run` -> play/execute
+- `edit` -> pencil
+- `remove` -> remove/delete row
+- `cancel` -> cancel task (distinct from remove/archive)
+- `archive` -> archive box/tray
+- `import` -> arrow into container
+- `export` -> arrow out of container
+- `export filtered` -> export + filter marker
+- `export selected` -> export + checkbox marker
+- `retry/sync` -> circular refresh (two arrows along path)
+- `review` -> info/review marker
+- `confirm` -> confirm/check marker
+- `inspect` -> inspect/zoom marker
+
+## Table Columns
+
+- Left `select` column:
+  - no text header label,
+  - minimal fixed width,
+  - centered checkbox control.
+- Right `actions` column:
+  - no text header label,
+  - minimal width,
+  - right-aligned action icons.
+- Row action icons in `actions` column are intentionally smaller than toolbar icons.
+
+## Reuse Rule
+
+If a pattern needs table selection + bulk actions, it must:
+
+1. Reuse this module unchanged by default.
+2. Document only additive overrides in the pattern-specific contract.
+3. Avoid redefining shared geometry/icon semantics locally.

kit/patterns/theme-aqua-legacy/README.md

@@ -1,14 +1,17 @@
-# macOS Aqua Theme Snapshot (Legacy)
+# Aqua Theme Module (Canonical Design Layer)
 
-Status: legacy reference only (not active baseline)
+Status: canonical Aqua design layer for reusable UI primitives.
 
-This directory preserves the Aqua-style visual exploration snapshot that was developed during demo
+This directory defines the shared Aqua visual language for the design code:
-refinement. It is stored as a reusable archive bundle so it can be referenced later without
-driving the active baseline.
 
-Active visual baseline for the demo/scaffold is Aqua-first. This package is a frozen snapshot for archival/reference use.
+- global visual tokens and component surfaces
+- reusable control geometry (buttons, segmented controls, table chrome)
+- icon rendering baseline (stroke style + sprite integration)
+
+Pattern modules consume this theme layer and then define behavior-specific contracts.
 
 Contents:
 
-- `demo-aqua-freeze.css` — frozen snapshot of the demo stylesheet at the time of the freeze
+- `demo-aqua-freeze.css` — canonical Aqua stylesheet baseline used by demo/scaffold references
-- `notes.md` — summary of what was explored and how to treat the snapshot
+- `templates/icon_sprite.html` — canonical icon sprite for reusable action semantics
+- `notes.md` — scope and usage policy for this theme module

kit/patterns/theme-aqua-legacy/notes.md

@@ -1,22 +1,22 @@
-# Aqua Legacy Snapshot Notes
+# Aqua Theme Notes
 
-This snapshot is kept for historical reference and selective reuse.
+This module is the reusable Aqua style source for design-code consumers.
 
 ## What it captures
 
 - Aqua-style control surfaces and button hierarchy
-- segmented controls and tab-like grouped buttons
+- segmented controls and grouped tab geometry
-- modal window chrome experiments (titlebar + close button)
+- table/filter/toolbars visual primitives
-- table/filter visual refinements and dot-pager styling
+- icon rendering baseline and shared icon sprite usage
-- style-playground Aqua preset refinements
+- modal and status component style language
 
-## What it is not
+## How to use
 
-- Not a required dependency for host projects
+- Treat this module as the visual baseline for reusable UI components in this repository.
-- Not the live source of truth for the current Aqua baseline (the live baseline is in demo/scaffold CSS)
+- Pattern contracts should reference this module instead of redefining shared visual primitives.
-- Not the target for normal iterative styling work unless explicitly requested
+- When visual behavior changes in demo/scaffold, sync the canonical rules here so host projects can reproduce the same output deterministically.
 
-## Current policy
+## Boundary
 
-- Active baseline styling remains Aqua-first in the live demo/scaffold assets.
+- This module standardizes visual language only.
-- Use this snapshot only when explicitly needed for archival comparison or extraction.
+- Domain behavior, labels, and business workflow semantics belong to pattern contracts.

kit/patterns/theme-aqua-legacy/templates/icon_sprite.html

@@ -0,0 +1,103 @@
+<!-- Canonical Aqua icon sprite for shared UI actions -->
+<svg class="icon-sprite" aria-hidden="true" focusable="false" width="0" height="0">
+  <symbol id="ico-select-visible" viewBox="0 0 16 16">
+    <rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
+    <path d="M5 8.2l2 2.1 4-4.3"></path>
+  </symbol>
+  <symbol id="ico-select-filtered" viewBox="0 0 16 16">
+    <path d="M2.5 3h11l-4.2 4.6v3.1l-2.6 1.5V7.6L2.5 3z"></path>
+    <path d="M11.4 10.2h3M12.9 8.7v3"></path>
+  </symbol>
+  <symbol id="ico-clear-visible" viewBox="0 0 16 16">
+    <rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
+    <path d="M5 8h6"></path>
+  </symbol>
+  <symbol id="ico-clear-filtered" viewBox="0 0 16 16">
+    <path d="M2.5 3h11L9.3 7.6v3.1l-2.6 1.5V7.6L2.5 3z"></path>
+    <path d="M10.5 10.2l3 3M13.5 10.2l-3 3"></path>
+  </symbol>
+  <symbol id="ico-clear-selection" viewBox="0 0 16 16">
+    <rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
+    <path d="M5 5l6 6M11 5l-6 6"></path>
+  </symbol>
+  <symbol id="ico-run" viewBox="0 0 16 16">
+    <path d="M5 3.5l7 4.5-7 4.5z"></path>
+  </symbol>
+  <symbol id="ico-edit" viewBox="0 0 16 16">
+    <path d="M3 13l1.2-3.6L10 3.6l2.4 2.4-5.8 5.8L3 13z"></path>
+    <path d="M8.8 4.8l2.4 2.4"></path>
+  </symbol>
+  <symbol id="ico-remove" viewBox="0 0 16 16">
+    <path d="M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6"></path>
+  </symbol>
+  <symbol id="ico-cancel" viewBox="0 0 16 16">
+    <circle cx="8" cy="8" r="5.5"></circle>
+    <path d="M5.5 5.5l5 5M10.5 5.5l-5 5"></path>
+  </symbol>
+  <symbol id="ico-archive" viewBox="0 0 16 16">
+    <rect x="2.5" y="3" width="11" height="2.8" rx="1"></rect>
+    <path d="M3.5 5.8V13h9V5.8"></path>
+    <path d="M6.2 8h3.6"></path>
+  </symbol>
+  <symbol id="ico-import" viewBox="0 0 16 16">
+    <path d="M3 4.2v8.6h10V4.2"></path>
+    <path d="M8 1.8v6.2"></path>
+    <path d="M5.8 5.8L8 8l2.2-2.2"></path>
+    <path d="M5 10.2h6"></path>
+  </symbol>
+  <symbol id="ico-export" viewBox="0 0 16 16">
+    <path d="M3 4.2v8.6h10V4.2"></path>
+    <path d="M8 8V1.8"></path>
+    <path d="M5.8 4L8 1.8 10.2 4"></path>
+    <path d="M5 10.2h6"></path>
+  </symbol>
+  <symbol id="ico-export-filtered" viewBox="0 0 16 16">
+    <path d="M2 4.2v8.6h10.8"></path>
+    <path d="M7 8V1.8"></path>
+    <path d="M4.8 4L7 1.8 9.2 4"></path>
+    <path d="M10 5.1h5.2L13.1 7.5v3.1l-1.3.7V7.5z"></path>
+  </symbol>
+  <symbol id="ico-export-selected" viewBox="0 0 16 16">
+    <path d="M2 4.2v8.6h10.8"></path>
+    <path d="M7 8V1.8"></path>
+    <path d="M4.8 4L7 1.8 9.2 4"></path>
+    <rect x="10.1" y="5.2" width="5" height="5" rx="0.6"></rect>
+    <path d="M11.2 6.3l2.8 2.8M14 6.3l-2.8 2.8"></path>
+  </symbol>
+  <symbol id="ico-retry" viewBox="0 0 16 16">
+    <path d="M12.2 6A4.8 4.8 0 0 0 4.8 4.4"></path>
+    <path d="M5.6 2.9L4.1 4.6 5.9 5.8"></path>
+    <path d="M3.8 10A4.8 4.8 0 0 0 11.2 11.6"></path>
+    <path d="M10.4 13.1L11.9 11.4 10.1 10.2"></path>
+  </symbol>
+  <symbol id="ico-review" viewBox="0 0 16 16">
+    <circle cx="8" cy="8" r="5.5"></circle>
+    <path d="M8 7.2v3.6"></path>
+    <path d="M8 5.1h.01"></path>
+  </symbol>
+  <symbol id="ico-mark-review" viewBox="0 0 16 16">
+    <path d="M8 2.6l5.2 2v3.7c0 2.3-1.5 4.4-5.2 5.7-3.7-1.3-5.2-3.4-5.2-5.7V4.6l5.2-2z"></path>
+    <path d="M8 6.1v3.2"></path>
+    <path d="M8 11.1h.01"></path>
+  </symbol>
+  <symbol id="ico-confirm" viewBox="0 0 16 16">
+    <path d="M8 2.5l5 2v3.8c0 2.2-1.3 4.1-5 5.3-3.7-1.2-5-3.1-5-5.3V4.5l5-2z"></path>
+    <path d="M5.7 8.3l1.6 1.7 3-3.1"></path>
+  </symbol>
+  <symbol id="ico-inspect" viewBox="0 0 16 16">
+    <circle cx="7" cy="7" r="3.8"></circle>
+    <path d="M9.8 9.8l3.2 3.2"></path>
+  </symbol>
+  <symbol id="ico-scope" viewBox="0 0 16 16">
+    <rect x="2.5" y="2.5" width="4.2" height="4.2"></rect>
+    <rect x="9.3" y="2.5" width="4.2" height="4.2"></rect>
+    <rect x="2.5" y="9.3" width="4.2" height="4.2"></rect>
+    <rect x="9.3" y="9.3" width="4.2" height="4.2"></rect>
+  </symbol>
+  <symbol id="ico-queue" viewBox="0 0 16 16">
+    <path d="M5.4 4h8.1M5.4 8h8.1M5.4 12h8.1"></path>
+    <circle cx="3.2" cy="4" r="0.7"></circle>
+    <circle cx="3.2" cy="8" r="0.7"></circle>
+    <circle cx="3.2" cy="12" r="0.7"></circle>
+  </symbol>
+</svg>