fix(shared,admin): ship Workbench edge/elevation/hover styling via admin CSS

WorkbenchRow (Hub) + WorkbenchCard (Actions) authored a few edge / elevation /
hover / selected utilities as arbitrary-value or compound-variant Tailwind
classes in shared JSX, which admin's Tailwind v4 content scan does not reach —
so they silently no-op in admin's build (confirmed via admin dist-grep). Move
the genuinely-missing ones into named classes in admin/index.css (both
components are admin-only consumers) and keep the already-shipping utilities.

Migrated (were absent from admin dist):
- hover lift + hover/active box-shadow (hover:-translate-y-0.5,
  hover:shadow-[edge-hover,elev-N], active:shadow-[edge-rest])
- selected-row container tint (bg-[rgb(tone-primary-container/0.12)]; the
  focus ring shadow-[edge-focus] already ships)
- inner tile edge+elevation (shadow-[edge-rest,elev-1] -> .workbench-raised)
- trailing-arrow mobile hide (max-[599px]:hidden -> .workbench-row-trailing)
- transition owned in CSS so transform never races Tailwind translate utils

Left untouched (verified shipping): shadow-[edge-rest], shadow-[edge-focus],
grid-cols arbitraries, w-[3.75rem], max-[599px]:w-12/h-11/w-11, hover:bg-bg-weak,
focus-visible:*. Named rules and glass-raised share @layer utilities, so the
0,2,0 hover/selected overrides win by specificity.

Follow-up to the PR #562 review (the deferred WorkbenchCard/Row migration).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Oba-One

packages/admin/src/index.css

@@ -1251,6 +1251,67 @@
     background: rgb(var(--bg-sub-300));
   }
 
+  /* ── Workbench surfaces (Hub WorkbenchRow + Actions WorkbenchCard) ──────────
+     These shared Canvas components are admin-only consumers. A handful of their
+     edge/elevation/hover/selected utilities are authored in packages/shared/src
+     JSX as arbitrary-value or compound variants that admin's Tailwind v4 content
+     scan does not reach, so they silently no-op in admin's build. Own those here
+     (base layout/colour utilities that DO ship stay in the components).
+     Verified against admin dist (packages/admin/dist/assets/*.css). */
+  .workbench-row,
+  .workbench-card {
+    transition-property: background-color, transform, box-shadow, filter;
+    transition-duration: var(--spring-spatial-fast-duration, 200ms);
+    transition-timing-function: var(--spring-spatial-fast-easing, cubic-bezier(0.34, 1.56, 0.64, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .workbench-row,
+    .workbench-card {
+      transition: none;
+    }
+  }
+
+  /* Selected row gains a container tint; the focus ring ships via Tailwind. */
+  .workbench-row[data-selected="true"] {
+    background-color: rgb(var(--tone-primary-container) / 0.12);
+  }
+
+  /* Clickable surfaces lift on hover (row → elevation-1, card → elevation-2)
+     and settle on press. Transform is owned here so it never races Tailwind's
+     translate utilities. */
+  .workbench-row-clickable:hover {
+    transform: translateY(-0.125rem);
+    box-shadow: var(--edge-hover), var(--elevation-1);
+  }
+
+  .workbench-card-clickable:hover {
+    transform: translateY(-0.125rem);
+    box-shadow: var(--edge-hover), var(--elevation-2);
+  }
+
+  .workbench-row-clickable:active,
+  .workbench-card-clickable:active {
+    transform: translateY(0);
+    box-shadow: var(--edge-rest);
+  }
+
+  /* Raised inner tiles (thumbnail / icon) — edge ring + elevation. */
+  .workbench-raised {
+    box-shadow: var(--edge-rest), var(--elevation-1);
+  }
+
+  /* Row trailing affordance hides on the <600px two-column layout. */
+  .workbench-row-trailing {
+    display: inline-flex;
+  }
+
+  @media (max-width: 599px) {
+    .workbench-row-trailing {
+      display: none;
+    }
+  }
+
   @supports not (backdrop-filter: blur(1px)) {
     .canvas-route-card {
       background: rgb(var(--admin-surface-0));

packages/shared/src/components/Canvas/WorkbenchCard.tsx

@@ -48,11 +48,11 @@ export function WorkbenchCard({
               alt=""
               loading="lazy"
               draggable={false}
-              className="h-11 w-11 rounded-xl object-cover shadow-[var(--edge-rest),_var(--elevation-1)]"
+              className="h-11 w-11 rounded-xl object-cover workbench-raised"
             />
           ) : (
             <div
-              className="inline-flex h-11 w-11 items-center justify-center rounded-xl text-primary-base shadow-[var(--edge-rest),_var(--elevation-1)]"
+              className="inline-flex h-11 w-11 items-center justify-center rounded-xl text-primary-base workbench-raised"
               style={{ background: "var(--admin-workbench-icon-bg, rgb(var(--bg-soft-200)))" }}
             >
               <LeadingIcon className="h-5 w-5" />
@@ -93,13 +93,13 @@ export function WorkbenchCard({
   );
 
   const sharedClassName = cn(
-    "relative flex h-full flex-col gap-3 rounded-2xl p-4 text-left transition-[background-color,transform,box-shadow] duration-[var(--spring-spatial-fast-duration)] ease-[var(--spring-spatial-fast-easing)] motion-reduce:transition-none",
-    "glass-raised shadow-[var(--edge-rest),_var(--elevation-1)]",
+    "workbench-card relative flex h-full flex-col gap-3 rounded-2xl p-4 text-left",
+    "glass-raised",
     selected && "shadow-[var(--edge-focus)]",
     disabled && "cursor-default opacity-60 shadow-none",
     onClick &&
       !disabled &&
-      "cursor-pointer hover:-translate-y-0.5 hover:bg-bg-weak hover:shadow-[var(--edge-hover),_var(--elevation-2)] active:translate-y-0 active:shadow-[var(--edge-rest)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base",
+      "workbench-card-clickable cursor-pointer hover:bg-bg-weak focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base",
     className
   );
 

packages/shared/src/components/Canvas/WorkbenchRow.tsx

@@ -56,11 +56,11 @@ export function WorkbenchRow({
             alt=""
             loading="lazy"
             draggable={false}
-            className="h-14 w-14 rounded-2xl object-cover shadow-[var(--edge-rest),_var(--elevation-1)] max-[599px]:h-11 max-[599px]:w-11 max-[599px]:rounded-xl"
+            className="h-14 w-14 rounded-2xl object-cover workbench-raised max-[599px]:h-11 max-[599px]:w-11"
           />
         ) : (
           <div
-            className="inline-flex h-14 w-14 items-center justify-center rounded-2xl text-primary-base shadow-[var(--edge-rest),_var(--elevation-1)] max-[599px]:h-11 max-[599px]:w-11 max-[599px]:rounded-xl"
+            className="inline-flex h-14 w-14 items-center justify-center rounded-2xl text-primary-base workbench-raised max-[599px]:h-11 max-[599px]:w-11"
             style={{ background: "var(--admin-workbench-icon-bg, rgb(var(--bg-soft-200)))" }}
           >
             <LeadingIcon className="h-5 w-5" />
@@ -95,7 +95,7 @@ export function WorkbenchRow({
       </div>
 
       <div
-        className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-bg-soft text-text-sub shadow-[var(--edge-rest)] max-[599px]:hidden"
+        className="workbench-row-trailing h-9 w-9 items-center justify-center rounded-full bg-bg-soft text-text-sub shadow-[var(--edge-rest)]"
         aria-hidden="true"
       >
         <RiArrowRightLine className="h-4 w-4" />
@@ -104,13 +104,13 @@ export function WorkbenchRow({
   );
 
   const sharedClassName = cn(
-    "relative grid w-full items-center gap-3 px-4 py-3 text-left transition-[background-color,transform,box-shadow,filter] duration-[var(--spring-spatial-fast-duration)] ease-[var(--spring-spatial-fast-easing)] motion-reduce:transition-none max-[599px]:grid-cols-[auto_minmax(0,1fr)]",
+    "workbench-row relative grid w-full items-center gap-3 px-4 py-3 text-left max-[599px]:grid-cols-[auto_minmax(0,1fr)]",
     "grid-cols-[auto_minmax(0,1fr)_auto]",
-    selected && "bg-[rgb(var(--tone-primary-container)/0.12)] shadow-[var(--edge-focus)]",
+    selected && "shadow-[var(--edge-focus)]",
     disabled && "cursor-default opacity-60 shadow-none",
     onClick &&
       !disabled &&
-      "workbench-row-clickable cursor-pointer hover:-translate-y-0.5 hover:bg-bg-weak hover:shadow-[var(--edge-hover),_var(--elevation-1)] active:translate-y-0 active:bg-bg-soft active:shadow-[var(--edge-rest)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base",
+      "workbench-row-clickable cursor-pointer hover:bg-bg-weak focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base",
     className
   );