inkbridge 0.1.0-beta.21 → 0.1.0-beta.23

package/src/tailwind/responsive-analyzer.ts

@@ -84,7 +84,15 @@ function buildResponsiveBuckets(classes: string[]): Record<string, string[]> {
   return buckets;
 }
 
-const DISPLAY_UTILITIES = new Set([
+/**
+ * Every Tailwind `display` utility, including `hidden`. Shared with any
+ * call site that needs to ask "is class X a display utility?" — keeps
+ * the set in one place so adding a new utility lights up uniformly
+ * across the codebase. `width-solver.ts` keeps its own subset that
+ * excludes `hidden` for its own narrower "active display for layout"
+ * purpose; this set is for last-wins / hidden-cascade resolution.
+ */
+export const DISPLAY_UTILITIES = new Set([
   'hidden', 'block', 'inline-block', 'inline', 'flex', 'inline-flex',
   'grid', 'inline-grid', 'table', 'inline-table', 'contents', 'list-item',
   'flow-root', 'table-row', 'table-cell', 'table-caption', 'table-column',
@@ -99,15 +107,61 @@ const DISPLAY_UTILITIES = new Set([
  */
 export function isHiddenAtBreakpoint(classes: string[], breakpoint: string): boolean {
   const effective = getClassesForBreakpoint(classes, breakpoint);
+  return isEffectivelyHidden(effective);
+}
+
+/**
+ * Returns true when an already-resolved (cascaded) class list ends in
+ * `display: hidden`. Used by the per-element renderer to skip nodes
+ * whose `hidden` / `sm:hidden` / `hidden sm:inline` pattern resolves
+ * to `display: none` at the current viewport — without this check,
+ * both halves of a `<span sm:hidden>A</span><span hidden sm:inline>B</span>`
+ * pair render as visible siblings in Figma.
+ *
+ * Caller is responsible for passing the breakpoint-cascaded class
+ * list (e.g. the output of `resolveClassesForBreakpoint`); this
+ * helper applies the last-wins rule across display utilities only.
+ */
+export function isEffectivelyHidden(resolvedClasses: string[]): boolean {
   let lastDisplay: string | null = null;
-  for (let i = 0; i < effective.length; i++) {
-    const cls = effective[i];
+  for (let i = 0; i < resolvedClasses.length; i++) {
+    const cls = resolvedClasses[i];
     const bare = cls.charAt(0) === '!' ? cls.slice(1) : cls;
     if (DISPLAY_UTILITIES.has(bare)) lastDisplay = bare;
   }
   return lastDisplay === 'hidden';
 }
 
+/**
+ * Returns true when the given resolved class list ends in either
+ * `display: hidden` (per `isEffectivelyHidden`) OR `sr-only` without a
+ * later display utility that visually re-shows the element.
+ *
+ * Use this at every render-time gate that decides "skip this element
+ * entirely". A previous-life version of this rule was duplicated as
+ * `classes.includes('hidden') || classes.includes('sr-only')` at three
+ * different sites — each missing the last-wins / override semantics.
+ * The recurring bug was a `<p hidden sm:block>` losing its text because
+ * one of those sites saw `hidden` in the list and short-circuited even
+ * though the sm+ cascade resolved to `block` (visible). One helper now
+ * makes the rule impossible to get wrong.
+ */
+export function isEffectivelyHiddenOrSrOnly(resolvedClasses: string[]): boolean {
+  if (isEffectivelyHidden(resolvedClasses)) return true;
+  // sr-only is not a CSS `display` value but Tailwind treats it as
+  // "visually hidden" via position+clip. Honour `not-sr-only` cascading
+  // after it (e.g. `sr-only sm:not-sr-only`) by looking at the last
+  // sr-only-ish utility — sr-only wins unless `not-sr-only` comes later.
+  let lastSrOnly: 'sr-only' | 'not-sr-only' | null = null;
+  for (let i = 0; i < resolvedClasses.length; i++) {
+    const cls = resolvedClasses[i];
+    const bare = cls.charAt(0) === '!' ? cls.slice(1) : cls;
+    if (bare === 'sr-only') lastSrOnly = 'sr-only';
+    else if (bare === 'not-sr-only') lastSrOnly = 'not-sr-only';
+  }
+  return lastSrOnly === 'sr-only';
+}
+
 export function extractBreakpointsFromClasses(classes: string[]): BreakpointInfo[] {
   const buckets = buildResponsiveBuckets(classes);
   const hasResponsive = BREAKPOINT_ORDER.some(bp => (buckets[bp] && buckets[bp].length > 0));

package/src/tailwind/tailwind.ts

@@ -4,7 +4,7 @@ import { COMPONENT_DEFS } from '../tokens';
 import { parseColor, nearestColorToken } from '../tokens';
 import type { RGB } from '../tokens';
 import { getComponentDef } from '../components';
-import { bindColorVariable } from '../tokens';
+import { applyTokenColor } from '../tokens';
 import {
   parseUtilityClass,
   spacingValue,
@@ -45,18 +45,69 @@ import {
 // Types
 // ---------------------------------------------------------------------------
 
+/**
+ * The kinds of color-bearing Tailwind utilities the plugin currently
+ * understands. Each one maps to a single triple of fields on
+ * `TailwindStyle` (color value, variable token, alpha) and a Figma slot
+ * (fill or stroke).
+ *
+ * Universal touch-point: changing a color slot's parsing / application
+ * means editing this table + `COLOR_SLOT_FIELDS` + `COLOR_SLOT_FIGMA`
+ * once. The 9 parallel TailwindStyle fields stay flat for cheap reads,
+ * but the slot-specific *logic* never needs to special-case bg / text /
+ * border again.
+ */
+export type ColorSlot = 'bg' | 'text' | 'border';
+
+/** Field-name triple per slot — single mapping used by every accessor. */
+const COLOR_SLOT_FIELDS = {
+  bg:     { value: 'bg',     token: 'bgToken',     opacity: 'bgOpacity'     },
+  text:   { value: 'text',   token: 'textToken',   opacity: 'textOpacity'   },
+  border: { value: 'border', token: 'borderToken', opacity: 'borderOpacity' },
+} as const;
+
 export interface TailwindStyle {
   bg: string | null;
   bgToken: string | null;
   bgOpacity?: number;
   text: string | null;
   textToken: string | null;
+  textOpacity?: number;
   border: string | null;
   borderToken: string | null;
+  borderOpacity?: number;
   opacity: number | null;
   underline?: boolean;
 }
 
+/** Set a color slot's value/token/opacity in one call — universal. */
+function setColorSlot(
+  style: TailwindStyle,
+  slot: ColorSlot,
+  value: string | null,
+  token: string | null,
+  opacity: number | null,
+): void {
+  const fields = COLOR_SLOT_FIELDS[slot];
+  (style as unknown as Record<string, unknown>)[fields.value] = value;
+  (style as unknown as Record<string, unknown>)[fields.token] = token;
+  if (opacity !== null) (style as unknown as Record<string, unknown>)[fields.opacity] = opacity;
+}
+
+/** Set only the opacity of a color slot — used by the styleMap fallback. */
+function setColorSlotOpacity(style: TailwindStyle, slot: ColorSlot, alpha: number): void {
+  const fields = COLOR_SLOT_FIELDS[slot];
+  (style as unknown as Record<string, unknown>)[fields.opacity] = alpha;
+}
+
+/** Classify a Tailwind utility into its color slot — `null` if not a color class. */
+function classifyColorSlot(utility: string): ColorSlot | null {
+  if (utility.startsWith('bg-')) return 'bg';
+  if (utility.startsWith('text-')) return 'text';
+  if (utility.startsWith('border-')) return 'border';
+  return null;
+}
+
 export interface FrameProperties {
   cornerRadius: number;
   paddingTop: number;
@@ -108,12 +159,53 @@ function getPaletteTokens(): Record<string, string> {
 }
 
 function cssVarToToken(value: string): string | null {
-  const varMatch = value.match(/var\\(--([^)]+)\\)/);
+  const varMatch = value.match(/var\(--([^)]+)\)/);
   if (!varMatch) return null;
   const token = varMatch[1].replace(/^color-/, '');
   return token || null;
 }
 
+/**
+ * Extract a 0..1 alpha from a CSS color value. Returns `null` when the
+ * value carries no explicit alpha (caller falls back to 1).
+ *
+ * Tailwind v4 compiles `bg-token/N` to a `color-mix` against transparent —
+ * `color-mix(in oklch, var(--muted) 10%, transparent)` — so the styleMap-
+ * driven path through `applyCssDeclarations` used to drop the alpha
+ * entirely (only the variable token was lifted, the `10%` was lost). Net
+ * effect: `bg-muted/10` rendered at full opacity (a heavy grey panel)
+ * instead of the intended near-invisible overlay.
+ *
+ * Recognised shapes:
+ *  - `color-mix(in <space>, <color> N%, transparent)` — Tailwind v4 default
+ *  - `rgba(...)` / `hsla(...)` — legacy 4-arg form
+ *  - `rgb(.../ N%)` / `hsl(.../ N%)` / `oklch(.../ N)` / `lab(.../ N)` —
+ *    modern slash-alpha (CSS Color 4)
+ */
+function extractAlphaFromColorValue(value: string): number | null {
+  if (!value) return null;
+  const mix = value.match(/color-mix\([^,]+,\s*[^,]+?\s+(\d+(?:\.\d+)?)\s*%\s*,\s*transparent\s*\)/i);
+  if (mix) {
+    const pct = parseFloat(mix[1]);
+    if (Number.isFinite(pct)) return Math.max(0, Math.min(1, pct / 100));
+  }
+  const legacy = value.match(/(?:rgba|hsla)\(\s*[^)]*,\s*([0-9.]+)\s*\)/i);
+  if (legacy) {
+    const a = parseFloat(legacy[1]);
+    if (Number.isFinite(a)) return Math.max(0, Math.min(1, a));
+  }
+  const slash = value.match(/\/\s*([0-9.]+)\s*(%?)\s*\)/);
+  if (slash) {
+    const num = parseFloat(slash[1]);
+    const isPct = slash[2] === '%';
+    if (Number.isFinite(num)) {
+      const a = isPct ? num / 100 : num;
+      return Math.max(0, Math.min(1, a));
+    }
+  }
+  return null;
+}
+
 function resolveSpacingToken(token: string, spacingScale: Record<string, number>): number | null {
   if (!token) return null;
   if (token.startsWith('[') && token.endsWith(']')) {
@@ -149,6 +241,12 @@ function applyCssDeclarations(style: TailwindStyle, declarations: Record<string,
       style.bg = value;
       const token = cssVarToToken(value);
       if (token) style.bgToken = token;
+      // Tailwind v4 bakes `/N` alpha into a `color-mix(... var(--x) N%,
+      // transparent)` so the variable token alone doesn't carry the
+      // opacity. Extract the alpha here so the downstream bg-apply path
+      // honors `bg-token/N` the same way it does for `bg-token`.
+      const alpha = extractAlphaFromColorValue(value);
+      if (alpha !== null) style.bgOpacity = alpha;
     } else if (prop === 'color') {
       style.text = value;
       const token = cssVarToToken(value);
@@ -328,15 +426,20 @@ function applyCssDeclarationsToFrame(frame: FrameNode, declarations: Record<stri
       continue;
     }
     if (prop === 'display' && (value === 'grid' || value === 'inline-grid')) {
-      if (declaredGridColumns != null) {
+      // `grid-cols-1` (1 explicit column) is CSS-semantically a vertical
+      // stack — same as `grid` without any column class. Only flip to
+      // HORIZONTAL+WRAP when there are >=2 columns; otherwise route through
+      // the vertical-flow path so itemSpacing (primary axis = vertical)
+      // applies correctly and children don't get a stale horizontal layout.
+      if (declaredGridColumns != null && declaredGridColumns >= 2) {
         frame.layoutMode = 'HORIZONTAL';
         markGridColumnsNode(frame, declaredGridColumns);
         if (frame.layoutWrap !== undefined) {
           frame.layoutWrap = 'WRAP';
         }
       } else {
-        // CSS grid without explicit template columns behaves like a single-column
-        // vertical flow in our Figma mapping.
+        // CSS grid without explicit template columns (or with exactly 1
+        // column) behaves like a single-column vertical flow.
         frame.layoutMode = 'VERTICAL';
         markCssGridVerticalFrame(frame);
       }
@@ -541,6 +644,28 @@ function applyCssDeclarationsToFrame(frame: FrameNode, declarations: Record<stri
 // Section 1 – Tailwind-to-Style conversion (lines 194-425 of code.js)
 // ---------------------------------------------------------------------------
 
+/**
+ * Split a Tailwind color modifier `token/N` (e.g. `muted/10`,
+ * `foreground/30`) into the base token and a 0..1 alpha. Returns
+ * `alpha=null` when no `/N` modifier is present.
+ *
+ * Single source of truth for the `/N` parsing — used by every code
+ * path that needs to interpret partial-opacity color modifiers
+ * (the semantic-style fast path, the styleMap fallback, and any
+ * future call site). Without this, the same regex shape lived
+ * inline in multiple places and the two copies drifted apart on
+ * edge cases (e.g. one tolerated leading whitespace, the other
+ * didn't), which made the `bg-muted/10` rendering bug harder to
+ * pin down than it should have been.
+ */
+export function splitColorAlpha(token: string): { token: string; alpha: number | null } {
+  const match = token.match(/^(.+)\/(\d+)$/);
+  if (!match) return { token, alpha: null };
+  const pct = parseInt(match[2], 10);
+  if (!Number.isFinite(pct)) return { token, alpha: null };
+  return { token: match[1], alpha: Math.max(0, Math.min(1, pct / 100)) };
+}
+
 /**
  * Extract color token name from a Tailwind class
  * e.g., "bg-primary" -> "primary", "text-primary-foreground" -> "primary-foreground"
@@ -609,30 +734,17 @@ function applySemanticStyleForUtility(
     }
   }
 
-  const token = extractColorToken(utility);
-  if (!token) return false;
+  const rawToken = extractColorToken(utility);
+  if (!rawToken) return false;
 
-  const opacityMatch = token.match(/^(.+)\/(\d+)$/);
-  const actualToken = opacityMatch ? opacityMatch[1] : token;
-  const colorOpacity = opacityMatch ? parseInt(opacityMatch[2], 10) / 100 : null;
+  const { token: actualToken, alpha: colorOpacity } = splitColorAlpha(rawToken);
   const palette = getPaletteTokens();
   const color = colorGroup[actualToken] || palette[actualToken] || FALLBACK_COLOR_TOKENS[actualToken];
   if (!color) return false;
 
-  if (utility.startsWith('bg-')) {
-    style.bg = color;
-    style.bgToken = actualToken;
-    if (colorOpacity !== null) style.bgOpacity = colorOpacity;
-    return true;
-  }
-  if (utility.startsWith('text-')) {
-    style.text = color;
-    style.textToken = actualToken;
-    return true;
-  }
-  if (utility.startsWith('border-')) {
-    style.border = color;
-    style.borderToken = actualToken;
+  const slot = classifyColorSlot(utility);
+  if (slot) {
+    setColorSlot(style, slot, color, actualToken, colorOpacity);
     return true;
   }
 
@@ -791,6 +903,27 @@ export function tailwindClassesToStyle(
       for (const entry of entryList) {
         applyCssDeclarations(style, entry.declarations);
       }
+      // Slash-alpha (`bg-muted/10`, `border-foreground/30`, …) is part of
+      // the *class name*, not the declarations. Tailwind v4's styleMap
+      // entry can be the bare `background-color: var(--muted)` with the
+      // 10 % dropped on the floor (depends on how the compiler chose to
+      // emit it for the given consumer). Lift the alpha straight off
+      // `cls` so the consumer's intent survives that compiler choice.
+      // Only fires when `applySemanticStyleForUtility` didn't already
+      // handle this utility (we `continue` above when it does).
+      // Lift the `/N` alpha straight off the class name via the shared
+      // splitter (`splitColorAlpha`) and route it through the universal
+      // slot assignment. Works for every color kind we model — bg, text,
+      // border. Tailwind v4's compiled CSS sometimes drops the alpha
+      // (`bg-muted/10` → `background-color: var(--muted)` with the 10%
+      // lost), so the class name is the canonical source of intent.
+      const base = cls.replace(/^(?:[a-z0-9]+:)+/, '');
+      const slot = classifyColorSlot(base);
+      if (slot) {
+        const tokenPart = base.slice(slot.length + 1);  // strip "bg-" / "text-" / "border-"
+        const { alpha } = splitColorAlpha(tokenPart);
+        if (alpha !== null) setColorSlotOpacity(style, slot, alpha);
+      }
     }
   }
 
@@ -821,6 +954,119 @@ export function getButtonStyleFromDefs(
   return tailwindClassesToStyle(classes, state, colorGroup);
 }
 
+type ShadowDef = {
+  x: number;
+  y: number;
+  radius: number;
+  spread: number;
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+  type: 'DROP_SHADOW' | 'INNER_SHADOW';
+};
+
+/**
+ * Parse a Tailwind arbitrary-value shadow string into our internal shadow
+ * def shape. Mirrors CSS `box-shadow` syntax:
+ *   [inset?] <offset-x> <offset-y> [<blur>] [<spread>] [<color>]
+ * Tailwind uses underscores in place of spaces inside the `shadow-[…]`
+ * bracket (because spaces would break the class-name token), so we swap
+ * those back to spaces before tokenising. Lengths must carry a `px` /
+ * `rem` unit (or be `0`); the color can be `rgba(...)` / `rgb(...)` /
+ * `hsla(...)` / `#hex`.
+ *
+ * Returns `null` (caller falls back to the SHADOW_MAP preset lookup, or
+ * to "unknown shadow → skip") when the value isn't parseable.
+ *
+ * Real-world trigger: greenhouse-app IncreasePositionModal's submit
+ * button uses `shadow-[0_8px_16px_rgba(16,185,129,0.35)]` for a coloured
+ * lift effect. Without arbitrary-value support the button rendered flat.
+ */
+function parseArbitraryBoxShadow(raw: string): ShadowDef[] | null {
+  if (!raw) return null;
+  // Swap _ → space; commas / parens stay intact (rgba() is a single token).
+  const normalized = raw.replace(/_/g, ' ').trim();
+  if (!normalized) return null;
+
+  let cursor = normalized;
+  let isInset = false;
+  if (cursor.startsWith('inset ')) {
+    isInset = true;
+    cursor = cursor.slice('inset '.length).trim();
+  }
+
+  // Split into tokens — respect parens (so `rgba(16,185,129,0.35)` stays one token).
+  const tokens: string[] = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of cursor) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (ch === ' ' && depth === 0) {
+      if (current.length > 0) {
+        tokens.push(current);
+        current = '';
+      }
+      continue;
+    }
+    current += ch;
+  }
+  if (current.length > 0) tokens.push(current);
+
+  if (tokens.length < 2) return null;
+
+  // The trailing color is whichever token isn't parse-able as a length.
+  // Most consumer shadows put the color last; if no token is colour-shaped
+  // assume the last one is.
+  const lengthTokens: string[] = [];
+  let colorToken: string | null = null;
+  for (const tok of tokens) {
+    if (colorToken == null && (
+      tok.startsWith('rgb') || tok.startsWith('hsl') || tok.startsWith('oklch') ||
+      tok.startsWith('#') || tok === 'currentColor' || tok === 'transparent'
+    )) {
+      colorToken = tok;
+    } else {
+      lengthTokens.push(tok);
+    }
+  }
+  if (lengthTokens.length < 2) return null;
+  if (colorToken == null) {
+    // Treat the final token as color when nothing matched a colour prefix.
+    colorToken = lengthTokens.pop() || '';
+  }
+
+  const parseLen = (s: string): number => {
+    const m = s.match(/^(-?\d+(?:\.\d+)?)(px|rem|em)?$/);
+    if (!m) return NaN;
+    const n = parseFloat(m[1]);
+    const unit = m[2] || 'px';
+    if (unit === 'rem' || unit === 'em') return n * 16;
+    return n;
+  };
+  const x = parseLen(lengthTokens[0]);
+  const y = parseLen(lengthTokens[1]);
+  const blur = lengthTokens[2] != null ? parseLen(lengthTokens[2]) : 0;
+  const spread = lengthTokens[3] != null ? parseLen(lengthTokens[3]) : 0;
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(blur) || !Number.isFinite(spread)) {
+    return null;
+  }
+
+  const color = parseColor(colorToken);
+  return [{
+    x,
+    y,
+    radius: blur,
+    spread,
+    r: color.r,
+    g: color.g,
+    b: color.b,
+    a: color.a == null ? 1 : color.a,
+    type: isInset ? 'INNER_SHADOW' : 'DROP_SHADOW',
+  }];
+}
+
 function applySemanticUtilitiesToFrame(
   frame: FrameNode,
   classes: string[],
@@ -842,6 +1088,13 @@ function applySemanticUtilitiesToFrame(
     const atom = parseUtilityClass(cls);
     if (!atom.utility) continue;
 
+    // Filter breakpoint-prefixed atoms FIRST so utilities like `sm:grid-cols-2`
+    // don't leak through to `markGridColumnsNode` at the base breakpoint.
+    // The responsive-analyzer normally strips breakpoint prefixes before
+    // calling here, but defense-in-depth: any atom carrying a non-active
+    // variant must be skipped before any structural side-effects run.
+    if (!shouldApplyAtom(atom, 'default')) continue;
+
     const utility = atom.utility;
 
     const gridColsMatch = utility.match(/^grid-cols-(\d+)$/);
@@ -860,8 +1113,6 @@ function applySemanticUtilitiesToFrame(
       continue;
     }
 
-    if (!shouldApplyAtom(atom, 'default')) continue;
-
     if (utility === 'flex' || utility === 'inline-flex') {
       // Bare `flex` enables flex layout but does not set direction. Only write
       // HORIZONTAL when the direction hasn't been declared yet by a prior
@@ -906,14 +1157,25 @@ function applySemanticUtilitiesToFrame(
       continue;
     }
     if (utility === 'grid' || utility === 'inline-grid') {
-      const hasColumns = classes.some((c: string) => /^grid-cols-\d+$/.test(c));
-      if (hasColumns) {
+      // Match parseLayoutMode + applyCssDeclarationsToFrame: only flip
+      // to HORIZONTAL+WRAP when there are >=2 columns. `grid-cols-1` is
+      // CSS-semantically a vertical stack (single column = no horizontal
+      // flow) and must route through the VERTICAL path so itemSpacing
+      // applies on the right axis. The `mapClassNameForBreakpoint`
+      // helper injects `grid-cols-1` at the base breakpoint when the
+      // source had a responsive `sm:grid-cols-N`, so this case is hit
+      // any time a grid with responsive columns renders at base.
+      const hasMultiColumns = classes.some((c: string) => {
+        const match = c.match(/^grid-cols-(\d+)$/);
+        return match != null && parseInt(match[1], 10) >= 2;
+      });
+      if (hasMultiColumns) {
         frame.layoutMode = 'HORIZONTAL';
         if (frame.layoutWrap !== undefined) {
           frame.layoutWrap = 'WRAP';
         }
       } else {
-        // Single-column implicit grid → VERTICAL; children stretch to fill (CSS default align-items: stretch)
+        // Single-column implicit grid or `grid-cols-1` → VERTICAL; children stretch to fill (CSS default align-items: stretch)
         frame.layoutMode = 'VERTICAL';
         markCssGridVerticalFrame(frame);
       }
@@ -1153,7 +1415,17 @@ function applySemanticUtilitiesToFrame(
         '2xl': [{ x: 0, y: 25, radius: 50, spread: 0, r: 0, g: 0, b: 0, a: 0.25, type: 'DROP_SHADOW' }],
         'inner': [{ x: 0, y: 2, radius: 4, spread: 0, r: 0, g: 0, b: 0, a: 0.06, type: 'INNER_SHADOW' }],
       };
-      const defs = SHADOW_MAP[shadowKey];
+      // Tailwind arbitrary-value shadow:
+      //   `shadow-[0_8px_16px_rgba(16,185,129,0.35)]`
+      // → offset-x 0, offset-y 8px, blur 16px, color rgba(16,185,129,0.35).
+      // Underscores stand in for the spaces CSS allows in `box-shadow`.
+      // Real-world trigger: greenhouse-app's IncreasePositionModal submit
+      // button uses a coloured-glow shadow to lift the CTA — without this
+      // path the rendered button sat flat against the modal.
+      const arbitraryShadow = shadowKey.startsWith('[') && shadowKey.endsWith(']')
+        ? parseArbitraryBoxShadow(shadowKey.slice(1, -1))
+        : null;
+      const defs = arbitraryShadow != null ? arbitraryShadow : SHADOW_MAP[shadowKey];
       if (defs !== undefined) {
         // Figma renders multi-layer DROP_SHADOW effects as independently
         // stacked filters — they composite "harder" than CSS box-shadow,
@@ -1675,34 +1947,55 @@ export function applyTailwindStylesToFrame(
     hasGradient = true;
   }
 
-  // Apply background - try variable binding first, fall back to raw color
+  // Apply background and border via the universal `applyTokenColor` helper —
+  // single source of truth for variable-binding + opacity + literal fallback.
+  // See `tokens/variables.ts` for why partial alpha skips variable binding
+  // (Figma's plugin API normalises bound paint opacity to 1 on reassign).
   if (style.bg && !hasGradient) {
-    const bgToken = style.bgToken;
-    const bound = bgToken && bindColorVariable(frame, bgToken, 'fill', theme);
-    if (bound) {
-      if (style.bgOpacity != null && Array.isArray(frame.fills) && frame.fills.length > 0) {
-        const nextFills = JSON.parse(JSON.stringify(frame.fills));
-        nextFills[0].opacity = style.bgOpacity;
-        frame.fills = nextFills;
-      }
-    } else {
-      const bg = parseColor(style.bg);
-      const bgOpacity = style.bgOpacity != null ? style.bgOpacity : (bg.a == null ? 1 : bg.a);
-      frame.fills = [{ type: 'SOLID', color: { r: bg.r, g: bg.g, b: bg.b }, opacity: bgOpacity }];
-    }
+    applyTokenColor(frame, 'fill', {
+      token: style.bgToken,
+      value: style.bg,
+      opacity: style.bgOpacity,
+    }, theme);
   }
 
-  // Apply border - try variable binding first, fall back to raw color
   if (style.border) {
-    const borderToken = style.borderToken;
-    const borderBound = borderToken && bindColorVariable(frame, borderToken, 'stroke', theme);
-    if (!borderBound) {
-      const borderColor = parseColor(style.border);
-      frame.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
-    }
+    applyTokenColor(frame, 'stroke', {
+      token: style.borderToken,
+      value: style.border,
+      opacity: style.borderOpacity,
+    }, theme);
     frame.strokeWeight = 1;
   }
 
+  // Border style utilities (`border-dashed`, `border-dotted`, `border-solid`)
+  // map to Figma's `dashPattern`. Tailwind doesn't add styles by class; they
+  // override the default "solid" CSS border style. Figma uses dashPattern =
+  // [] for solid, [dash, gap] for dashed/dotted.
+  //
+  // Values picked to mirror typical browser-default dashed/dotted patterns
+  // (Chrome / Safari). Real-world trigger: greenhouse-app's
+  // IncreasePositionModal "Position impact" card uses
+  // `<div className="my-1 h-px border-t border-dashed border-muted-foreground/30" />`
+  // as a separator between the side badge and the metrics grid. Without
+  // dashPattern handling it rendered as a solid line.
+  //
+  // The check runs whenever ANY of these classes is present, even when
+  // there's no border color yet — covers borders applied via `divide-*`,
+  // ring overlays, or other paths that produce a stroke later.
+  if ('dashPattern' in frame) {
+    let dashPattern: number[] | null = null;
+    for (const cls of classes) {
+      if (cls === 'border-dashed') dashPattern = [4, 4];
+      else if (cls === 'border-dotted') dashPattern = [1, 2];
+      else if (cls === 'border-solid' || cls === 'border-none') dashPattern = [];
+    }
+    if (dashPattern !== null) {
+      try { (frame as unknown as { dashPattern: number[] }).dashPattern = dashPattern; }
+      catch (_err) { /* ignore unsupported types */ }
+    }
+  }
+
   const hasBorderWidth = classes.some(cls => {
     const atom = parseUtilityClass(cls);
     if (!atom.utility) return false;

package/src/text/index.ts

@@ -2,3 +2,4 @@ export * from './text-builder';
 export * from './text-line';
 export * from './inline-text';
 export * from './font-style-resolver';
+export * from './text-truncate';