improvement(tables): strip the empty-state graphic to ruled lines and a corner fade

Minimal pass. The card is gone — no border, no fill, no header shading, no type
squares. What is left is the grid itself: hairline rules in `--border-1`, ink
bars at two strengths, and the one cell held in an edit ring.

With no card fill the grid sits directly on the page, so it can dissolve into
the background instead of ending at a border. The fade is the landing page's own
idiom — two gradients intersected (`mask-composite: intersect`), crisp at the
top-left and gone through the bottom-right, the same construction
`workflow-graph-preview` uses.

Two placement notes:

- The grid is offset right of frame centre. A diagonal dissolve puts the visual
  mass toward its opaque corner, so centring the geometry would leave the
  graphic reading left of the copy beneath it.
- The selected cell sits in the quadrant the fade leaves fully opaque. A
  selection ring dissolving mid-stroke reads as a rendering fault, not a detail.

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,62 +1,60 @@
-import { cn } from '@sim/emcn'
 import { EmptyState } from '@/components/empty-state/empty-state'
 
 /**
- * Neutral ink at graded strengths.
+ * Neutral ink at two 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.
+ * `--surface-4`/`--surface-5` are near-white in light mode (#f5f5f5/#f3f3f3), so
+ * skeleton geometry built on them dissolves against the page. Mixing
+ * `--text-secondary` into transparent gives a real mid-grey that inverts with the
+ * theme — the idiom the workflow editor's vignette 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)',
+  header: 'color-mix(in srgb, var(--text-secondary) 30%, transparent)',
+  cell: 'color-mix(in srgb, var(--text-secondary) 15%, transparent)',
+  selection: 'color-mix(in srgb, var(--text-secondary) 32%, transparent)',
 } as const
 
-const COLUMN_TEMPLATE = '84px 66px 66px 66px'
+/**
+ * Crisp at the top-left, dissolving through the bottom-right — the same
+ * two-gradient intersect the landing page's workflow vignette uses, so the grid
+ * blends into the page rather than sitting on it as a card.
+ */
+const CORNER_FADE =
+  '[-webkit-mask-image:linear-gradient(to_right,#000_62%,transparent_100%),linear-gradient(to_bottom,#000_56%,transparent_100%)] [mask-image:linear-gradient(to_right,#000_62%,transparent_100%),linear-gradient(to_bottom,#000_56%,transparent_100%)] [-webkit-mask-composite:source-in] [mask-composite:intersect]'
 
-/** 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 COLUMN_TEMPLATE = '88px 72px 72px 72px'
+
+const HEADER_WIDTHS = [36, 28, 26, 28] as const
 
 const CELL_WIDTHS = [
-  [52, 34, 26, 38],
-  [44, 30, 32, 30],
-  [58, 38, 22, 40],
-  [38, 26, 30, 32],
+  [54, 34, 26, 38],
+  [44, 30, 34, 30],
+  [60, 38, 22, 40],
+  [40, 26, 30, 34],
+  [50, 32, 28, 36],
 ] as const
 
 /**
- * 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.
+ * The one cell held in an edit ring, placed in the top-left quadrant the corner
+ * fade leaves fully opaque — a selection dissolving mid-stroke would read as a
+ * rendering fault rather than a detail.
  */
+const SELECTED_CELL = { row: 1, column: 0 } as const
+
+/** Nothing but ruled lines and the ink sitting in them, running off two edges. */
 function TablesGraphic() {
   return (
-    <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 }}
-        >
+    <div aria-hidden='true' className={`relative h-[148px] w-[320px] ${CORNER_FADE}`}>
+      <div className='absolute top-[14px] left-[54px] border-[var(--border-1)] border-t border-l'>
+        <div className='grid' 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'
+              className='flex h-[26px] items-center border-[var(--border-1)] border-r border-b px-3'
             >
               <span
-                className='size-[7px] shrink-0 rounded-[2px]'
-                style={{ background: INK.headerType }}
-              />
-              <span
-                className='block h-[6px] rounded-full'
+                className='block h-[5px] rounded-full'
                 style={{ width, background: INK.header }}
               />
             </div>
@@ -66,22 +64,19 @@ function TablesGraphic() {
         {CELL_WIDTHS.map((row, rowIndex) => (
           <div
             key={`row-${rowIndex}`}
-            className={cn(
-              'grid',
-              rowIndex < CELL_WIDTHS.length - 1 && 'border-[var(--border-1)] border-b'
-            )}
+            className='grid'
             style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
           >
             {row.map((width, column) => (
               <div
                 key={`cell-${rowIndex}-${column}`}
-                className='relative flex h-[22px] items-center border-[var(--border-1)] border-r px-2.5'
+                className='relative flex h-[24px] items-center border-[var(--border-1)] border-r border-b px-3'
               >
                 <span
-                  className='block h-[6px] rounded-full'
+                  className='block h-[5px] rounded-full'
                   style={{ width, background: INK.cell }}
                 />
-                {rowIndex === 1 && column === 1 ? (
+                {rowIndex === SELECTED_CELL.row && column === SELECTED_CELL.column ? (
                   <span
                     className='absolute inset-[-1px] rounded-[3px] border-[1.5px]'
                     style={{ borderColor: INK.selection }}
@@ -91,9 +86,6 @@ function TablesGraphic() {
             ))}
           </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>
     </div>
   )