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

package/src/layout/text-truncate-pass.ts

@@ -0,0 +1,151 @@
+import { applyTruncation, readTruncationMark } from '../text/text-truncate';
+
+/**
+ * Deferred text-truncation pass.
+ *
+ * Run by any layout step that resolves a container's content width
+ * *after* its children have been built — e.g. the table column-
+ * alignment pass, or any future deferred-layout transform whose
+ * children include text whose width depends on a parent that wasn't
+ * sized at render time.
+ *
+ * At render time, the per-element handler marks each TextNode that
+ * came from a `truncate` / `line-clamp-N` source via
+ * `markForTruncation`. This pass walks `container`'s subtree, finds
+ * those marked nodes, and applies the actual `textTruncation =
+ * 'ENDING'` + `maxLines` + `resize` once the parent's width is known.
+ *
+ * The container's *content* width (`width - paddingLeft -
+ * paddingRight`) is the budget. As we descend through intermediate
+ * frames, each frame's own paddings shrink the budget further before
+ * reaching its children — so a deeply-nested text node sees its true
+ * available width.
+ *
+ * Skips text nodes that already fit. Idempotent (a second invocation
+ * is a no-op for already-truncated nodes that still fit).
+ */
+export function applyDeferredTruncationPass(container: SceneNode): number {
+  if (!('children' in container) || !('width' in container)) return 0;
+  if (!Number.isFinite(container.width) || container.width <= 0) return 0;
+
+  const padLeft = ('paddingLeft' in container ? (container.paddingLeft || 0) : 0);
+  const padRight = ('paddingRight' in container ? (container.paddingRight || 0) : 0);
+  const budget = container.width - padLeft - padRight;
+  if (!(budget > 0)) return 0;
+
+  const counter = { applied: 0, marksSeen: 0 };
+  for (const child of container.children) {
+    walk(child, budget, 0, counter, container);
+  }
+  return counter.applied;
+}
+
+function walk(
+  node: SceneNode,
+  budget: number,
+  consumed: number,
+  counter: { applied: number; marksSeen: number },
+  container: SceneNode,
+): void {
+  if (node.type === 'TEXT') {
+    const maxLines = readTruncationMark(node);
+    if (maxLines == null) return;
+    counter.marksSeen += 1;
+    const available = budget - consumed;
+    if (!(available > 0)) return;
+    if (node.width > available + 0.5) {
+      const lineHeight = extractLineHeightPixels(node);
+      applyTruncation(node, available, maxLines, lineHeight);
+      counter.applied += 1;
+      // Walk up from the truncated text and shrink any FIXED-width
+      // ancestor frame that overflows the container. Without this
+      // step the text is resized to fit but its wrapping <span>
+      // frame stays at its own `max-w-[N]` width — visually the
+      // span (and thus the text inside) still overflows the cell.
+      // Equivalent to CSS shrinking the block-level child to match
+      // its parent's content area.
+      shrinkOverflowingAncestors(node, container);
+    }
+    return;
+  }
+  if (!('children' in node)) return;
+  // Children of this node consume its paddings before reaching their
+  // own content area. Gaps between siblings on a HORIZONTAL row are
+  // intentionally NOT subtracted — the budget is for any *one* text
+  // node along the path; the actual per-cell allowance is enforced by
+  // the table-layout pass itself when it resizes each cell first.
+  let nextConsumed = consumed;
+  if ('paddingLeft' in node) {
+    nextConsumed += (node.paddingLeft || 0) + (node.paddingRight || 0);
+  }
+  for (const child of node.children) {
+    walk(child, budget, nextConsumed, counter, container);
+  }
+}
+
+/**
+ * After a marked TextNode is truncated to its allotted width, walk
+ * from it up to (but not including) `container` and shrink any
+ * ancestor frame currently wider than the space it has available
+ * inside `container`'s content box.
+ *
+ * Necessary because Figma auto-layout doesn't automatically reflow
+ * an explicit-width child when its parent shrinks — the parent was
+ * column-aligned to a smaller size *after* the child was originally
+ * rendered at its `max-w-[N]` natural width. Without this, the
+ * text resizes correctly but its wrapping `<span>` keeps its 152 px
+ * width inside a 100 px cell, and visually nothing changes.
+ *
+ * Mirrors the descending budget the `walk` uses, just in reverse.
+ */
+function shrinkOverflowingAncestors(textNode: TextNode, container: SceneNode): void {
+  // Collect outermost-first chain `[container's child, …, textNode.parent]`.
+  const chain: SceneNode[] = [];
+  let cur: BaseNode | null = textNode.parent;
+  while (cur && cur !== container) {
+    chain.unshift(cur as SceneNode);
+    cur = cur.parent;
+  }
+  if (cur !== container) return;  // textNode not actually a descendant
+
+  const padL = ('paddingLeft' in container ? ((container as FrameNode).paddingLeft || 0) : 0);
+  const padR = ('paddingRight' in container ? ((container as FrameNode).paddingRight || 0) : 0);
+  let budget = ('width' in container ? (container as FrameNode).width : 0) - padL - padR;
+  if (!(budget > 0)) return;
+
+  for (const frame of chain) {
+    if ('width' in frame && Number.isFinite((frame as FrameNode).width) && (frame as FrameNode).width > budget + 0.5) {
+      try {
+        if ('resize' in frame && typeof (frame as FrameNode).resize === 'function') {
+          (frame as FrameNode).resize(budget, (frame as FrameNode).height);
+        }
+      } catch (_err) {
+        // ignore — some node types refuse resize
+      }
+    }
+    if ('paddingLeft' in frame) {
+      budget -= ((frame as FrameNode).paddingLeft || 0) + ((frame as FrameNode).paddingRight || 0);
+      if (!(budget > 0)) return;
+    }
+  }
+}
+
+/**
+ * Best-effort resolution of a TextNode's effective line-height in
+ * pixels. Used to size the post-truncation frame height so the cell
+ * doesn't snap to a different visual baseline. Falls back to
+ * `fontSize × 1.5` when the value isn't directly readable (mixed
+ * runs, AUTO unit), matching Tailwind's `leading-normal` default and
+ * what the immediate-truncation path used before this util existed.
+ */
+function extractLineHeightPixels(textNode: TextNode): number | undefined {
+  const lh = textNode.lineHeight;
+  if (lh && typeof lh === 'object' && 'unit' in lh) {
+    if (lh.unit === 'PIXELS' && typeof lh.value === 'number') return lh.value;
+    if (lh.unit === 'PERCENT' && typeof lh.value === 'number') {
+      const fs = typeof textNode.fontSize === 'number' ? textNode.fontSize : 14;
+      return Math.ceil(fs * (lh.value / 100));
+    }
+  }
+  return undefined;
+}

package/src/layout/width-solver.ts

@@ -162,29 +162,75 @@ export function extractFixedWidth(classes: string[] | undefined): number | null
   return null;
 }
 
+const MAX_WIDTH_PX: Record<string, number> = {
+  'max-w-xs': 320,
+  'max-w-sm': 384,
+  'max-w-md': 448,
+  'max-w-lg': 512,
+  'max-w-xl': 576,
+  'max-w-2xl': 672,
+  'max-w-3xl': 768,
+  'max-w-4xl': 896,
+  'max-w-5xl': 1024,
+  'max-w-6xl': 1152,
+  'max-w-7xl': 1280,
+};
+
+// Tailwind breakpoint variants in ascending order. The story preview is
+// rendered "desktop-first" (default Story Layout width ~900px), so a
+// responsive class like `sm:max-w-lg` IS active and should constrain the
+// preview. When multiple breakpoint variants of `max-w-*` are present,
+// the one with the LARGEST active breakpoint wins (matches CSS cascade
+// at a desktop viewport).
+const RESPONSIVE_BREAKPOINT_RANK: Record<string, number> = {
+  'sm': 1,
+  'md': 2,
+  'lg': 3,
+  'xl': 4,
+  '2xl': 5,
+};
+
+function parseBracketMaxWidth(cls: string): number | null {
+  const bracket = cls.match(/^max-w-\[(\d+(?:\.\d+)?)px\]$/);
+  return bracket ? parseFloat(bracket[1]) : null;
+}
+
 export function extractMaxWidth(classes: string[] | undefined): number | null {
   if (!classes) return null;
-  const map: Record<string, number> = {
-    'max-w-xs': 320,
-    'max-w-sm': 384,
-    'max-w-md': 448,
-    'max-w-lg': 512,
-    'max-w-xl': 576,
-    'max-w-2xl': 672,
-    'max-w-3xl': 768,
-    'max-w-4xl': 896,
-    'max-w-5xl': 1024,
-    'max-w-6xl': 1152,
-    'max-w-7xl': 1280,
-  };
+  // Pass 1: base (unprefixed) max-w-*. Wins over any variant-prefixed
+  // value because it applies at every breakpoint.
   for (const cls of classes) {
     const base = getBaseClass(cls);
     if (!base) continue;
-    if (map[base]) return map[base];
-    const bracket = base.match(/^max-w-\[(\d+(?:\.\d+)?)px\]$/);
-    if (bracket) return parseFloat(bracket[1]);
+    if (MAX_WIDTH_PX[base]) return MAX_WIDTH_PX[base];
+    const bracket = parseBracketMaxWidth(base);
+    if (bracket != null) return bracket;
   }
-  return null;
+  // Pass 2: variant-prefixed max-w-* (`sm:max-w-lg`, `md:max-w-xl`, …).
+  // Pick the LARGEST active breakpoint variant — at the desktop-default
+  // preview width all responsive utilities up to xl are active, so the
+  // latest matching breakpoint wins (CSS cascade at wide viewport).
+  // Real-world trigger: shadcn DialogContent uses `sm:max-w-lg` to cap
+  // dialog width at 512px — without this fallback the story preview
+  // ignores it and renders the dialog at the 900px generic Story Layout
+  // fallback, which makes the form fields look stretched.
+  let bestRank = 0;
+  let bestWidth: number | null = null;
+  for (const cls of classes) {
+    if (!cls || cls.indexOf(':') === -1) continue;
+    const idx = cls.lastIndexOf(':');
+    const prefix = cls.slice(0, idx);
+    const base = cls.slice(idx + 1);
+    const rank = RESPONSIVE_BREAKPOINT_RANK[prefix];
+    if (!rank) continue;
+    const px = MAX_WIDTH_PX[base] ?? parseBracketMaxWidth(base);
+    if (px == null) continue;
+    if (rank > bestRank) {
+      bestRank = rank;
+      bestWidth = px;
+    }
+  }
+  return bestWidth;
 }
 
 export function extractGridColumns(classes: string[] | undefined, availableWidth?: number): number | null {

package/src/main.ts

@@ -4,7 +4,7 @@
 // Universal plugin - configure for any project via Settings.
 
 import { loadConfig, saveConfig, GITHUB_CONFIG } from './plugin';
-import { TOKENS, COMPONENT_DEFS, applyScannedTokens, getCoreFontFamily, getThemeFontFamily, getThemeNames } from './tokens';
+import { TOKENS, COMPONENT_DEFS, applyScannedTokens, applyConsumerOwnedTokens, getCoreFontFamily, getThemeFontFamily, getThemeNames, isConsumerOwnedToken } from './tokens';
 import { rebuildColorIndex } from './tokens';
 import { handleUIReady, handleImageResult, prefetchImages } from './plugin';
 import { setImageMap, setSvgMap } from './cache';
@@ -17,7 +17,6 @@ import {
   buildDesignSystemSinglePage,
   cleanGeneratedDesignSystemArtifacts,
   computePreflightData,
-  isGeneratedDesignSystemNode,
 } from './design-system';
 import { hashString, stableStringify, getFrameHash, findChildByName } from './cache';
 import { waitForAllFonts } from './text';
@@ -129,21 +128,6 @@ async function saveExcludedComponents(excluded: string[]): Promise<void> {
   } catch (_e) {}
 }
 const TOKEN_SOURCE_INFO_KEY = 'token_source_info';
-const DEBUG_PLUGIN_DATA_KEYS = [
-  'inkbridge:generated',
-  'inkbridge:scope',
-  'inkbridge:role',
-  'inkbridge:fallback-reason',
-  'inkbridge:hash',
-  'inkbridge:symbol-decision',
-  'inkbridge:symbol-ignored-props',
-  'inkbridge:symbol-text-overrides',
-  'inkbridge:symbol-slot-prop-mappings',
-  'inkbridge:story-name',
-  'inkbridge:story-def',
-  'inkbridge:story-scan',
-  'inkbridge:story-render',
-];
 
 type TokenSourceInfo = {
   source: string;
@@ -153,106 +137,6 @@ type TokenSourceInfo = {
 
 let LAST_TOKEN_SOURCE_INFO: TokenSourceInfo | null = null;
 
-function readNodePluginData(node: BaseNode): Record<string, string> {
-  const out: Record<string, string> = {};
-  if (!node || typeof node.getPluginData !== 'function') return out;
-  for (let i = 0; i < DEBUG_PLUGIN_DATA_KEYS.length; i++) {
-    const key = DEBUG_PLUGIN_DATA_KEYS[i];
-    try {
-      const value = node.getPluginData(key);
-      if (value) out[key] = value;
-    } catch (_err) {
-      // ignore plugin data read failures
-    }
-  }
-  return out;
-}
-
-type NodeDescription = {
-  id: string;
-  name: string;
-  type: string;
-  width?: number;
-  height?: number;
-  layoutMode?: string;
-  childCount?: number;
-  pluginData?: Record<string, string>;
-};
-
-function describeNode(node: BaseNode): NodeDescription {
-  const info: NodeDescription = {
-    id: node && node.id ? String(node.id) : '',
-    name: node && node.name ? String(node.name) : '',
-    type: node && node.type ? String(node.type) : '',
-  };
-  if (node && 'width' in node && typeof node.width === 'number') info.width = Math.round(node.width);
-  if (node && 'height' in node && typeof node.height === 'number') info.height = Math.round(node.height);
-  if (node && 'layoutMode' in node && node.layoutMode) info.layoutMode = String(node.layoutMode);
-  if (node && 'children' in node && Array.isArray(node.children)) {
-    info.childCount = node.children.length;
-  }
-  const pluginData = readNodePluginData(node);
-  if (Object.keys(pluginData).length > 0) {
-    info.pluginData = pluginData;
-  }
-  return info;
-}
-
-function collectChildrenSummary(node: BaseNode): NodeDescription[] {
-  if (!node || !('children' in node) || !Array.isArray(node.children)) return [];
-  const out: NodeDescription[] = [];
-  for (let i = 0; i < node.children.length; i++) {
-    out.push(describeNode(node.children[i]));
-  }
-  return out;
-}
-
-function findGeneratedDebugFallbackNode(): BaseNode | null {
-  const currentPage = figma.currentPage;
-  if (currentPage && isGeneratedDesignSystemNode(currentPage)) {
-    return currentPage;
-  }
-
-  if (figma.root && Array.isArray(figma.root.children)) {
-    for (let i = 0; i < figma.root.children.length; i++) {
-      const page = figma.root.children[i];
-      if (!page || page.type !== 'PAGE') continue;
-      if (isGeneratedDesignSystemNode(page)) return page;
-    }
-  }
-
-  return null;
-}
-
-function runDebugSelectionCommand(): void {
-  const selection = figma.currentPage && Array.isArray(figma.currentPage.selection)
-    ? figma.currentPage.selection
-    : [];
-  const fallbackNode = selection.length === 0 ? findGeneratedDebugFallbackNode() : null;
-  const targetNodes = selection.length > 0
-    ? selection
-    : (fallbackNode ? [fallbackNode] : []);
-  if (targetNodes.length === 0) {
-    figma.notify('No selected node and no generated Design System page found.');
-    return;
-  }
-
-  const report = targetNodes.map(function(node: BaseNode) {
-    return {
-      selected: describeNode(node),
-      children: collectChildrenSummary(node),
-    };
-  });
-
-  console.error('[Inkbridge][DebugSelection]', JSON.stringify(report, null, 2));
-  if (selection.length > 0) {
-    figma.notify('Debug report written to plugin console.');
-  } else {
-    figma.notify('Debug report written for generated Design System page.');
-  }
-}
-
-
 function getPackLoadErrorMessage(error?: string): string {
   if (error === 'incompatible-schema-version' || error === 'incompatible-pack-version') {
     return 'Incompatible scanner contract. Update plugin and scanner to matching versions.';
@@ -354,12 +238,39 @@ async function warmThemeFonts(): Promise<string[]> {
   fontsSet.add(baseFont);
   fontsSet.add('Inter');
 
+  // Walk every font role the consumer defined on each theme — `sans`,
+  // `mono`, `serif`, `heading`, plus any custom roles (`display`, `brand`,
+  // …). Pre-loading them all here means the render-time
+  // `setRangeFontName` finds the font ready and never silently falls back
+  // to Inter when the consumer uses a non-default role name.
+  const tokensRecord = TOKENS as unknown as Record<string, Record<string, unknown> | undefined>;
   for (let i = 0; i < themeNames.length; i++) {
     const theme = themeNames[i];
+    // Always include `sans` and `heading` (fallback to base) — these are
+    // the canonical body / display surfaces and must resolve even when
+    // the consumer left them unset.
     const sansFont = getThemeFontFamily(TOKENS, theme, 'sans') || baseFont;
     const headingFont = getThemeFontFamily(TOKENS, theme, 'heading') || sansFont || baseFont;
     if (sansFont) fontsSet.add(sansFont);
     if (headingFont) fontsSet.add(headingFont);
+
+    // Then every other role the consumer actually defined. Filter via
+    // `isConsumerOwnedToken` — same predicate the Custom Tokens panel
+    // uses — so we skip roles leaked from Tailwind defaults (most
+    // notoriously `serif: ui-serif, Georgia, Cambria, …` pulled in by
+    // `@import "tailwindcss"`). Without the filter Figma surfaces a
+    // "Font(s) not found: Cambria" warning even when the consumer
+    // doesn't use a serif anywhere.
+    const themeBlock = tokensRecord[theme];
+    const fontGroup = themeBlock && typeof themeBlock === 'object' ? themeBlock.font : null;
+    if (fontGroup && typeof fontGroup === 'object') {
+      for (const role of Object.keys(fontGroup)) {
+        if (role === 'sans' || role === 'heading') continue;  // already preloaded above
+        if (!isConsumerOwnedToken(theme, 'font', role)) continue;
+        const family = getThemeFontFamily(TOKENS, theme, role);
+        if (family) fontsSet.add(family);
+      }
+    }
   }
 
   const fontsToLoad = Array.from(fontsSet);
@@ -440,6 +351,7 @@ async function runGenerate(): Promise<void> {
 
     applyPack(result.pack);
     applyScannedTokens(result.pack.tokens);
+    applyConsumerOwnedTokens(result.pack.consumerTokens);
     await saveAndBroadcastTokenSourceInfo(getTokenSourceInfoFromPack(result.pack));
 
     // Empty-state guard: the dev server is reachable but the scan
@@ -500,7 +412,11 @@ async function runGenerate(): Promise<void> {
       ? figma.root.children.find(function (p) { return p.name === 'Design System' && p.type === 'PAGE'; })
       : null;
     if (dsPage) {
-      const existingTokensRow = findChildByName(dsPage, 'Design Tokens');
+      // Look for the renamed frame first; fall back to the legacy
+      // "Design Tokens" name so files created by older plugin versions
+      // still report tokens-row status correctly until migration.
+      const existingTokensRow = findChildByName(dsPage, 'Custom Tokens')
+        || findChildByName(dsPage, 'Design Tokens');
       if (existingTokensRow) {
         tokensStatus = getFrameHash(existingTokensRow) === tokenHash ? 'unchanged' : 'changed';
       }
@@ -584,12 +500,6 @@ async function handleCommand(command: string): Promise<void> {
       break;
     }
 
-    case 'debug-selection': {
-      runDebugSelectionCommand();
-      figma.closePlugin();
-      break;
-    }
-
     case 'generate':
     default:
       await runGenerate();
@@ -719,6 +629,7 @@ figma.ui.onmessage = async (msg: any) => {
         allowNewTokensFromFigma: msg.allowNewTokensFromFigma === true,
         newTokenPrefixes: Array.isArray(msg.newTokenPrefixes) ? msg.newTokenPrefixes : [],
         projectName: msg.projectName || '',
+        devServerPort: typeof msg.devServerPort === 'string' ? msg.devServerPort : '',
       };
       await saveConfig(newConfig);
 
@@ -795,6 +706,7 @@ figma.ui.onmessage = async (msg: any) => {
       }
       applyPack(result.pack);
       applyScannedTokens(result.pack.tokens);
+      applyConsumerOwnedTokens(result.pack.consumerTokens);
       await saveAndBroadcastTokenSourceInfo(getTokenSourceInfoFromPack(result.pack));
 
       // Detect changes between Figma and code
@@ -902,6 +814,7 @@ figma.ui.onmessage = async (msg: any) => {
     }
     applyPack(retryResult.pack);
     applyScannedTokens(retryResult.pack.tokens);
+    applyConsumerOwnedTokens(retryResult.pack.consumerTokens);
     await saveAndBroadcastTokenSourceInfo(getTokenSourceInfoFromPack(retryResult.pack));
     const failedFonts = await warmThemeFonts();
     if (failedFonts.length) {

package/src/plugin/config.ts

@@ -13,6 +13,15 @@ export interface ProjectConfig {
   allowNewTokensFromFigma: boolean;
   newTokenPrefixes: string[];
   projectName: string;
+  /**
+   * Optional dev-server port override. Empty string means auto-discover
+   * across the standard Next.js / Vite ports (3000 / 4000 / 5173). Set
+   * this when you're running multiple local projects on different ports
+   * and the auto-discovery picks the wrong one. Stored as a string so
+   * the input round-trips unchanged; validated to a 1-65535 numeric on
+   * normalise.
+   */
+  devServerPort: string;
 }
 
 // Default GitHub configuration (can be overridden via Settings)
@@ -27,6 +36,7 @@ export const DEFAULT_CONFIG: ProjectConfig = {
   allowNewTokensFromFigma: false,
   newTokenPrefixes: [],
   projectName: 'My Project',
+  devServerPort: '',
 };
 
 // Runtime config - loaded from storage
@@ -60,6 +70,15 @@ function normalizeAllowNewTokensFromFigma(value: unknown): boolean {
   return value === true;
 }
 
+function normalizeDevServerPort(value: unknown): string {
+  if (typeof value !== 'string' && typeof value !== 'number') return '';
+  const raw = String(value).trim();
+  if (!raw) return '';
+  const n = parseInt(raw, 10);
+  if (!Number.isFinite(n) || n < 1 || n > 65535) return '';
+  return String(n);
+}
+
 function normalizeNewTokenPrefixes(value: unknown): string[] {
   if (Array.isArray(value)) {
     return value
@@ -91,6 +110,7 @@ export async function loadConfig(): Promise<ProjectConfig> {
         syncDtcgOnPush: normalizeSyncDtcgOnPush(storedConfig.syncDtcgOnPush),
         allowNewTokensFromFigma: normalizeAllowNewTokensFromFigma(storedConfig.allowNewTokensFromFigma),
         newTokenPrefixes: normalizeNewTokenPrefixes(storedConfig.newTokenPrefixes),
+        devServerPort: normalizeDevServerPort(storedConfig.devServerPort),
       };
       // Persist one-time migrations so old installs stop carrying stale settings.
       await figma.clientStorage.setAsync('project_config', GITHUB_CONFIG);
@@ -110,6 +130,7 @@ export async function saveConfig(config: ProjectConfig): Promise<void> {
   config.syncDtcgOnPush = normalizeSyncDtcgOnPush(config.syncDtcgOnPush);
   config.allowNewTokensFromFigma = normalizeAllowNewTokensFromFigma(config.allowNewTokensFromFigma);
   config.newTokenPrefixes = normalizeNewTokenPrefixes(config.newTokenPrefixes);
+  config.devServerPort = normalizeDevServerPort(config.devServerPort);
   GITHUB_CONFIG = config;
   await figma.clientStorage.setAsync('project_config', config);
 }

package/src/plugin/packs/pack-provider.ts

@@ -11,10 +11,25 @@ type PackFetchResult = {
   error?: string;
 };
 
-type PackFetchConfig = Pick<ProjectConfig, 'tokenPath' | 'tokenSourceMode' | 'cssTokenPath'>;
+type PackFetchConfig = Pick<ProjectConfig, 'tokenPath' | 'tokenSourceMode' | 'cssTokenPath' | 'devServerPort'>;
 
-const PACK_PORTS = [3000, 4000, 5173];
+const DEFAULT_PACK_PORTS = [3000, 4000, 5173];
 const PACK_PATHS = ['api/inkbridge/scan-components'];
+
+/**
+ * Returns the ports to try when fetching the component pack. A
+ * configured `devServerPort` (string, validated upstream by the config
+ * normaliser) collapses the list to that single port — useful when the
+ * user runs multiple local projects and wants to pin the scanner to
+ * the right one. Empty / missing falls back to the default sweep.
+ */
+function getPackPorts(devServerPort?: string): number[] {
+  const trimmed = (devServerPort || '').trim();
+  if (!trimmed) return DEFAULT_PACK_PORTS;
+  const n = parseInt(trimmed, 10);
+  if (!Number.isFinite(n) || n < 1 || n > 65535) return DEFAULT_PACK_PORTS;
+  return [n];
+}
 const SUPPORTED_SCHEMA_VERSION = 1;
 const SUPPORTED_COMPONENT_DEFS_MAJOR = 1;
 
@@ -71,8 +86,9 @@ function validateComponentDefsContract(raw: unknown): { ok: true } | { ok: false
 
 function buildPackCandidates(config?: PackFetchConfig): string[] {
   const urls: string[] = [];
-  for (let i = 0; i < PACK_PORTS.length; i++) {
-    const port = PACK_PORTS[i];
+  const ports = getPackPorts(config?.devServerPort);
+  for (let i = 0; i < ports.length; i++) {
+    const port = ports[i];
     for (let j = 0; j < PACK_PATHS.length; j++) {
       const path = PACK_PATHS[j];
       if (!path) continue;

package/src/plugin/packs/packs.ts

@@ -19,7 +19,16 @@ export type Pack = {
   name: string;
   version?: string;
   components: ComponentDefs;
+  // Full token map (consumer + imported Tailwind defaults). Used by the
+  // runtime token resolver so utilities like `text-sm` keep working when
+  // the consumer relies on Tailwind's defaults.
   tokens?: ScannedTokenMap;
+  // Consumer-only subset of `tokens` — only what the consumer wrote in
+  // their own files. Used by the Design Tokens panel to avoid showing
+  // leaked Tailwind defaults (`serif: Cambria`, the lone spacing
+  // baseline, etc.). When absent (older scanner output / DTCG mode),
+  // the panel falls back to `tokens` and may show defaults.
+  consumerTokens?: ScannedTokenMap;
   stories?: StoryDefinition[];
   tags?: string[];
 };
@@ -102,6 +111,11 @@ export function normalizePack(raw: unknown, fallbackId: string): Pack | null {
     version: typeof raw.version === 'string' ? raw.version : undefined,
     components: normalizeComponentDefs(componentDefs),
     tokens: normalizeTokenMap(raw.tokens),
+    // CLI emits `consumerTokens` alongside `tokens` (see scanner/cli.ts).
+    // Older scanner output won't have this field — `normalizeTokenMap`
+    // handles undefined safely and the panel falls back to `tokens` in
+    // that case.
+    consumerTokens: raw.consumerTokens ? normalizeTokenMap(raw.consumerTokens) : undefined,
     stories: Array.isArray(raw.stories) ? raw.stories : undefined,
     tags: Array.isArray(raw.tags) ? raw.tags : undefined,
   };

package/src/render-engine-version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by build.mjs. Do not edit manually.
-export const RENDER_ENGINE_VERSION = '011e89524e15bfda';
+export const RENDER_ENGINE_VERSION = '7a5be23936c74399';

package/src/tailwind/jsx-utils.ts

@@ -163,6 +163,45 @@ export function extractLeadingContainerMaxWidthFromTree(node: JsxNode | undefine
   return constrainedWidth;
 }
 
+/**
+ * Find any `max-w-*` declaration anywhere in the tree (depth-first walk),
+ * regardless of whether the element also has `w-full` or how many siblings
+ * it has. Returns the SMALLEST max-w-* found — the most restrictive
+ * constraint anywhere in the tree wins as the story-width hint.
+ *
+ * Use case: the story-layout fallback needs SOMETHING smaller than the
+ * generic 900px default when a component declares its intended max width
+ * via Tailwind. `extractLeadingContainerMaxWidthFromTree` is too
+ * conservative — it requires `w-full` (the "fill parent up to max"
+ * idiom) and bails on multi-child branches. A modal like shadcn
+ * DialogContent has neither: it's wrapped by `<Dialog>` (multi-child
+ * with overlay) and doesn't carry `w-full` itself. So we lose the
+ * `sm:max-w-lg` signal and the story renders at 900px instead of 512px.
+ *
+ * This helper is the looser fallback for that case — any `max-w-*`
+ * anywhere counts. Doesn't replace the leading-container helper (which
+ * is correct for its own use case); just supplements it.
+ */
+export function findAnyMaxWidthInTree(node: JsxNode | undefined): number | null {
+  if (!node) return null;
+  let best: number | null = null;
+  function walk(n: JsxNode): void {
+    if (!n || n.type !== 'element') return;
+    const element = n as JsxElement;
+    const className = element.props && element.props.className ? String(element.props.className) : '';
+    if (className) {
+      const classes = splitClassName(className);
+      const maxWidth = extractMaxWidth(classes);
+      if (maxWidth != null) {
+        best = best == null ? maxWidth : Math.min(best, maxWidth);
+      }
+    }
+    for (const child of element.children || []) walk(child);
+  }
+  walk(node);
+  return best;
+}
+
 /**
  * Propagate child-wildcard utility classes (`*:X`, `sm:*:X`, etc.) from a node
  * to all of its direct element children, then remove them from the parent.

package/src/tailwind/node-ir.ts

@@ -348,7 +348,14 @@ function buildRangeSliderTree(input: NodeIRElement): NodeIR {
   const rawValue = props.value ?? props.defaultValue;
   const pcts = resolveValuePercents(rawValue, props.min, props.max);
   const pct = pcts[0] ?? 0;
-  const isDisabled = props.disabled !== undefined && props.disabled !== 'false';
+  // Treat ONLY explicit-truthy literals as disabled. Consumers commonly write
+  // `disabled={disabled}` where the React var is undefined; the scanner can't
+  // statically resolve the identifier and emits its text (e.g. "disabled") as
+  // the prop value. The previous `!== 'false'` check accepted any non-"false"
+  // string and dimmed every slider at opacity 50% by mistake. Only `true`,
+  // `'true'`, `'1'`, or JSX shorthand (scanner emits `'true'`) should count.
+  const disabledRaw = props.disabled;
+  const isDisabled = disabledRaw === 'true' || disabledRaw === '1';
 
   // Preserve sizing-related classes from the consumer (`w-full`, `w-[Npx]`,
   // `max-w-*`) onto the wrapper. Visual / state classes that applied to the