improvement(tables): redraw the empty-state graphic in the house grayscale

Matches the workflow editor's vignette and the landing feature graphics, which
between them use no brand colour at all — every one of them is built from
neutral tokens.

Two corrections:

- The blue edit ring is gone. Nothing in the reference graphics carries a hue,
  and it was the loudest element on the page.
- `--surface-4`/`--surface-5` are near-white in light mode (#f5f5f5/#f3f3f3), so
  skeleton geometry built on them dissolved on a white card. Bars now mix
  `--text-secondary` into transparent at graded strengths — a real mid-grey that
  inverts with the theme, which is the idiom the editor vignette already uses for
  the one bar it needs you to see.

Also drops the full-composition mask. The editor vignette keeps its block fully
opaque and fades only the connector strokes leaving the frame; masking
everything is what made the miniature read washed rather than deliberate. The
card is crisp now and the continuation is drawn the way a real table draws it —
an overflow fade at the edge the columns run off.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: 2 people

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/tables-empty-state.tsx

@@ -1,61 +1,101 @@
+import { cn } from '@sim/emcn'
 import { EmptyState } from '@/components/empty-state/empty-state'
-import {
-  Bar,
-  Vignette,
-} from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/vignette'
 
-/** Cell fill widths per column, row by row — varied so the grid reads as data, not a lattice. */
+/**
+ * Neutral ink at graded strengths.
+ *
+ * `--surface-4`/`--surface-5` are near-white in light mode (`#f5f5f5`/`#f3f3f3`),
+ * so skeleton geometry built on them dissolves on a white card. Mixing
+ * `--text-secondary` into transparent instead gives a real mid-grey that inverts
+ * with the theme — the same idiom the workflow editor's empty state uses for the
+ * one bar it needs you to actually see.
+ */
+const INK = {
+  header: 'color-mix(in srgb, var(--text-secondary) 32%, transparent)',
+  headerType: 'color-mix(in srgb, var(--text-secondary) 26%, transparent)',
+  cell: 'color-mix(in srgb, var(--text-secondary) 17%, transparent)',
+  selection: 'color-mix(in srgb, var(--text-secondary) 30%, transparent)',
+} as const
+
+const COLUMN_TEMPLATE = '84px 66px 66px 66px'
+
+/** Header label widths, then per-row cell widths — varied so the grid reads as data. */
+const HEADER_WIDTHS = [34, 26, 24, 26] as const
+
 const CELL_WIDTHS = [
-  [58, 40, 30, 44],
-  [48, 34, 36, 38],
-  [64, 44, 26, 46],
-  [42, 30, 34, 36],
+  [52, 34, 26, 38],
+  [44, 30, 32, 30],
+  [58, 38, 22, 40],
+  [38, 26, 30, 32],
 ] as const
 
-const COLUMN_TEMPLATE = '92px 76px 76px 76px'
-
 /**
- * A sheet of cells running off the right and bottom edges, with one cell held in
- * an edit ring — a table is the only resource whose structure *is* its picture.
+ * A crisp table card whose columns run past its right edge.
+ *
+ * The workflow editor's vignette keeps its block fully opaque and fades only the
+ * connector strokes leaving the frame; masking the whole composition is what
+ * makes a miniature look washed rather than deliberate. So the card here stays
+ * sharp and the continuation is drawn the way a real table draws it — an
+ * overflow fade at the edge the columns run off.
  */
 function TablesGraphic() {
   return (
-    <Vignette>
-      <div
-        className='absolute top-[16px] left-[30px] grid w-[320px] overflow-hidden rounded-tl-[8px] border-[var(--border-1)] border-t border-l'
-        style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
-      >
-        {[0, 1, 2, 3].map((column) => (
+    <div aria-hidden='true' className='relative h-[148px] w-[320px]'>
+      <div className='absolute top-[16px] left-[34px] h-[116px] w-[252px] overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)]'>
+        <div
+          className='grid border-[var(--border-1)] border-b bg-[var(--surface-3)]'
+          style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
+        >
+          {HEADER_WIDTHS.map((width, column) => (
+            <div
+              key={`header-${column}`}
+              className='flex h-[28px] items-center gap-[6px] border-[var(--border-1)] border-r px-2.5'
+            >
+              <span
+                className='size-[7px] shrink-0 rounded-[2px]'
+                style={{ background: INK.headerType }}
+              />
+              <span
+                className='block h-[6px] rounded-full'
+                style={{ width, background: INK.header }}
+              />
+            </div>
+          ))}
+        </div>
+
+        {CELL_WIDTHS.map((row, rowIndex) => (
           <div
-            key={`header-${column}`}
-            className='flex h-[26px] items-center gap-[6px] border-[var(--border-1)] border-r border-b bg-[var(--surface-3)] px-2.5'
+            key={`row-${rowIndex}`}
+            className={cn(
+              'grid',
+              rowIndex < CELL_WIDTHS.length - 1 && 'border-[var(--border-1)] border-b'
+            )}
+            style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
           >
-            <span className='size-[8px] shrink-0 rounded-[2px] bg-[var(--surface-6)]' />
-            <Bar
-              className='h-[7px] bg-[var(--surface-6)]'
-              style={{ width: column === 0 ? 44 : 32 }}
-            />
-          </div>
-        ))}
-
-        {CELL_WIDTHS.map((row, rowIndex) =>
-          row.map((width, column) => {
-            const isEditing = rowIndex === 1 && column === 1
-            return (
+            {row.map((width, column) => (
               <div
                 key={`cell-${rowIndex}-${column}`}
-                className='relative flex h-[26px] items-center border-[var(--border-1)] border-r border-b bg-[var(--surface-1)] px-2.5'
+                className='relative flex h-[22px] items-center border-[var(--border-1)] border-r px-2.5'
               >
-                <Bar className='h-2' style={{ width }} />
-                {isEditing ? (
-                  <span className='absolute inset-[-1px] rounded-[3px] border-[1.5px] border-[var(--brand-secondary)]' />
+                <span
+                  className='block h-[6px] rounded-full'
+                  style={{ width, background: INK.cell }}
+                />
+                {rowIndex === 1 && column === 1 ? (
+                  <span
+                    className='absolute inset-[-1px] rounded-[3px] border-[1.5px]'
+                    style={{ borderColor: INK.selection }}
+                  />
                 ) : null}
               </div>
-            )
-          })
-        )}
+            ))}
+          </div>
+        ))}
+
+        <span className='absolute top-0 right-0 h-[28px] w-[30px] bg-gradient-to-l from-[var(--surface-3)] to-transparent' />
+        <span className='absolute top-[28px] right-0 bottom-0 w-[30px] bg-gradient-to-l from-[var(--surface-2)] to-transparent' />
       </div>
-    </Vignette>
+    </div>
   )
 }