refactor(canvas): drop dead markers and share the tile-brightness maths

Review pass over the branch against staging.

Dead code removed:
- `tileIconColorClass` in the renderer package — never called; only its
  `isLightTileColor` sibling is.
- `data-connection-selector-search-frost`, `data-workflow-cursor-edge` and
  `data-workflow-cursor-source-side` — written on three elements, read by no
  stylesheet, selector or test.
- `CHIP_TARGET_SELECTOR_TYPES`, `MAX_CHIPS` and `chipPriority` were exported from
  `canvas-rows.ts` but only used inside it.

Consolidated the one real divergence: the renderer package carried a hand-copied
mirror of the app's perceived-brightness maths, because it may not import app
code. The copy had already drifted — it dropped the `white`/`black` keyword
handling, so a block shipping `bgColor: 'white'` would render a white
`currentColor` icon on a white tile on the canvas while every other surface drew
it black. No block ships one today, which is exactly why nothing caught it. The
function now lives in `@sim/utils/color` and both sides import it; only the
0.75 threshold stays local to each.

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

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx

@@ -483,10 +483,7 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
               </>
             )}
           </Command.List>
-          <div
-            data-connection-selector-search-frost=''
-            className='nodrag nopan absolute inset-x-[3px] top-[3px] z-20 flex h-12 cursor-text items-center gap-2 rounded-t-[13px] bg-[linear-gradient(to_bottom,var(--surface-2)_0%,color-mix(in_srgb,var(--surface-2)_88%,transparent)_68%,transparent_100%)] px-2.5 pb-2'
-          >
+          <div className='nodrag nopan absolute inset-x-[3px] top-[3px] z-20 flex h-12 cursor-text items-center gap-2 rounded-t-[13px] bg-[linear-gradient(to_bottom,var(--surface-2)_0%,color-mix(in_srgb,var(--surface-2)_88%,transparent)_68%,transparent_100%)] px-2.5 pb-2'>
             <Search className='size-[14px] flex-shrink-0 text-[var(--text-muted)]' />
             <Command.Input
               ref={inputRef}

apps/sim/lib/colors/brightness.ts

@@ -1,39 +1,6 @@
-/**
- * Perceived brightness (0 = black, 1 = white) of a CSS color, using the ITU-R
- * BT.601 (YIQ) luma weights `0.299 R + 0.587 G + 0.114 B`.
- *
- * This is the perceptual "is it light or dark" measure the app uses for
- * foreground/background contrast decisions. It tracks human brightness
- * perception better than gamma-corrected relative luminance for the saturated
- * brand colors used as tile backgrounds (e.g. it correctly reads bright yellows
- * as light), which is why every contrast helper in the app builds on it.
- *
- * Accepts `#rgb`/`#rrggbb` hex (with or without `#`, optionally quoted) and the
- * `white`/`black` keywords. Returns `null` for anything else (named colors,
- * gradients, `currentColor`, malformed input) so callers can treat unknown
- * values explicitly instead of guessing.
- */
-export function perceivedBrightness(color: string): number | null {
-  const value = color.trim().replace(/['"]/g, '').toLowerCase()
-  if (value === 'white') return 1
-  if (value === 'black') return 0
-  const hex = value.replace('#', '')
-  let r: number
-  let g: number
-  let b: number
-  if (/^[0-9a-f]{3}$/.test(hex)) {
-    r = Number.parseInt(hex[0] + hex[0], 16)
-    g = Number.parseInt(hex[1] + hex[1], 16)
-    b = Number.parseInt(hex[2] + hex[2], 16)
-  } else if (/^[0-9a-f]{6}$/.test(hex)) {
-    r = Number.parseInt(hex.slice(0, 2), 16)
-    g = Number.parseInt(hex.slice(2, 4), 16)
-    b = Number.parseInt(hex.slice(4, 6), 16)
-  } else {
-    return null
-  }
-  return (0.299 * r + 0.587 * g + 0.114 * b) / 255
-}
+import { perceivedBrightness } from '@sim/utils/color'
+
+export { perceivedBrightness }
 
 /**
  * True when `color` is light enough that a white foreground would wash out.

apps/sim/lib/workflows/blocks/canvas-rows.ts

@@ -13,7 +13,7 @@ import type { BlockConfig, SubBlockConfig } from '@/blocks/types'
  * Selector subblock types whose hydrated value names the block's primary
  * target (table, channel, knowledge base, …) — promoted to a chip.
  */
-export const CHIP_TARGET_SELECTOR_TYPES = new Set<string>([
+const CHIP_TARGET_SELECTOR_TYPES = new Set<string>([
   'table-selector',
   'knowledge-base-selector',
   'workflow-selector',
@@ -29,14 +29,14 @@ export const CHIP_TARGET_SELECTOR_TYPES = new Set<string>([
 ])
 
 /** Maximum fragments in the statement line; remaining candidates fall back to rows. */
-export const MAX_CHIPS = 2
+const MAX_CHIPS = 2
 
 /**
  * Ranks a subblock for promotion into the card's chips row: the operation
  * first, then the primary target selector, then the model. Returns null for
  * subblocks that stay as label/value rows.
  */
-export function chipPriority(subBlock: SubBlockConfig): number | null {
+function chipPriority(subBlock: SubBlockConfig): number | null {
   if (subBlock.id === 'operation') return 0
   if (CHIP_TARGET_SELECTOR_TYPES.has(subBlock.type)) return 1
   if (subBlock.id === 'model') return 2

packages/utils/package.json

@@ -18,6 +18,10 @@
       "types": "./src/random.ts",
       "default": "./src/random.ts"
     },
+    "./color": {
+      "types": "./src/color.ts",
+      "default": "./src/color.ts"
+    },
     "./errors": {
       "types": "./src/errors.ts",
       "default": "./src/errors.ts"

packages/utils/src/color.ts

@@ -0,0 +1,41 @@
+/**
+ * Perceived brightness (0 = black, 1 = white) of a CSS color, using the ITU-R
+ * BT.601 (YIQ) luma weights `0.299 R + 0.587 G + 0.114 B`.
+ *
+ * This is the perceptual "is it light or dark" measure the product uses for
+ * foreground/background contrast decisions. It tracks human brightness
+ * perception better than gamma-corrected relative luminance for the saturated
+ * brand colors used as tile backgrounds (e.g. it correctly reads bright yellows
+ * as light), which is why every contrast helper builds on it.
+ *
+ * Accepts `#rgb`/`#rrggbb` hex (with or without `#`, optionally quoted) and the
+ * `white`/`black` keywords. Returns `null` for anything else (named colors,
+ * gradients, `currentColor`, malformed input) so callers can treat unknown
+ * values explicitly instead of guessing.
+ *
+ * Lives here rather than in `apps/sim` because the canvas renderer package needs
+ * the same answer and may not import app code. A second copy there drifted on
+ * the `white`/`black` keywords, which is invisible until a block ships one as
+ * its tile color and its icon renders white-on-white on the canvas only.
+ */
+export function perceivedBrightness(color: string): number | null {
+  const value = color.trim().replace(/['"]/g, '').toLowerCase()
+  if (value === 'white') return 1
+  if (value === 'black') return 0
+  const hex = value.replace('#', '')
+  let r: number
+  let g: number
+  let b: number
+  if (/^[0-9a-f]{3}$/.test(hex)) {
+    r = Number.parseInt(hex[0] + hex[0], 16)
+    g = Number.parseInt(hex[1] + hex[1], 16)
+    b = Number.parseInt(hex[2] + hex[2], 16)
+  } else if (/^[0-9a-f]{6}$/.test(hex)) {
+    r = Number.parseInt(hex.slice(0, 2), 16)
+    g = Number.parseInt(hex.slice(2, 4), 16)
+    b = Number.parseInt(hex.slice(4, 6), 16)
+  } else {
+    return null
+  }
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255
+}

packages/workflow-renderer/src/lib/tile-icon-color.ts

@@ -1,38 +1,18 @@
+import { perceivedBrightness } from '@sim/utils/color'
+
 /**
  * Foreground class for a brand icon rendered inside its colored block tile.
  *
- * This is a self-contained mirror of `apps/sim/lib/colors` +
- * `getTileIconColorClass` (apps/sim/blocks/icon-color.ts). The renderer package
- * is intentionally isolated and must not import app code, so the small bit of
- * brightness math it needs lives here. Keep the threshold and behavior in sync
- * with the canonical helper.
+ * The brightness maths is `@sim/utils/color`, shared with `@/blocks/icon-color`,
+ * so the canvas and the rest of the app can never disagree about which tiles are
+ * light. Only the threshold lives here, and it matches that helper's.
  *
  * Block icons are increasingly drawn with `fill='currentColor'`, so a tile must
  * give them a foreground that contrasts the (fixed, non-theme) brand
  * background: white on dark tiles, near-black on clearly light tiles. Hardcoded
  * multi-color icons ignore the class and keep their own fills.
  */
 
-/** ITU-R BT.601 perceived brightness (0–1) of a `#rgb`/`#rrggbb` color, else null. */
-function perceivedBrightness(color: string): number | null {
-  const hex = color.trim().replace(/['"#]/g, '').toLowerCase()
-  let r: number
-  let g: number
-  let b: number
-  if (/^[0-9a-f]{3}$/.test(hex)) {
-    r = Number.parseInt(hex[0] + hex[0], 16)
-    g = Number.parseInt(hex[1] + hex[1], 16)
-    b = Number.parseInt(hex[2] + hex[2], 16)
-  } else if (/^[0-9a-f]{6}$/.test(hex)) {
-    r = Number.parseInt(hex.slice(0, 2), 16)
-    g = Number.parseInt(hex.slice(2, 4), 16)
-    b = Number.parseInt(hex.slice(4, 6), 16)
-  } else {
-    return null
-  }
-  return (0.299 * r + 0.587 * g + 0.114 * b) / 255
-}
-
 /** Tiles brighter than this flip their icon foreground to near-black. */
 const LIGHT_TILE_THRESHOLD = 0.75
 
@@ -41,8 +21,3 @@ export function isLightTileColor(bgColor: string | null | undefined): boolean {
   const brightness = bgColor ? perceivedBrightness(bgColor) : null
   return brightness !== null && brightness > LIGHT_TILE_THRESHOLD
 }
-
-/** `text-white` on dark/unknown tiles, `text-black` on clearly light tiles. */
-export function tileIconColorClass(bgColor: string | null | undefined): string {
-  return isLightTileColor(bgColor) ? 'text-black' : 'text-white'
-}

packages/workflow-renderer/src/subflow/subflow-node-view.tsx

@@ -302,8 +302,6 @@ export function SubflowStartView({
           }}
           data-nodeid={parentId}
           data-handleid={cursorHandleId}
-          data-workflow-cursor-edge={cursorSourceHandle.edgeSide}
-          data-workflow-cursor-source-side={cursorSourceHandle.side}
           isConnectableStart={true}
           isConnectableEnd={false}
           onPointerDownCapture={syncCursorSourceHandleBounds}
@@ -564,8 +562,6 @@ export function SubflowNodeView({
             }}
             data-nodeid={id}
             data-handleid={cursorSourceHandle.handleId}
-            data-workflow-cursor-edge={cursorSourceHandle.edgeSide}
-            data-workflow-cursor-source-side={cursorSourceHandle.side}
             isConnectableStart={true}
             isConnectableEnd={false}
             onPointerDownCapture={syncCursorSourceHandleBounds}

packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx

@@ -859,8 +859,6 @@ export function WorkflowBlockView({
             }}
             data-nodeid={id}
             data-handleid={cursorSourceHandle.handleId}
-            data-workflow-cursor-edge={cursorSourceHandle.edgeSide}
-            data-workflow-cursor-source-side={cursorSourceHandle.side}
             isConnectableStart={true}
             isConnectableEnd={false}
             onPointerDownCapture={syncCursorSourceHandleBounds}