inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/src/design-system/state-master.ts

@@ -0,0 +1,267 @@
+import { findChildByName, getFrameHash, setFrameHash, hashString, hashDef } from '../cache';
+import { enforceFixedBoxSizingAfterLayout, applyRingIfPossible, getRingNode, markRingNode } from '../layout';
+import { splitClassName } from '../tailwind';
+import { RENDER_ENGINE_VERSION } from '../render-engine-version';
+import { tagGeneratedNode } from './generated-node';
+import { getThemeContext } from './theme-context';
+import {
+  ENABLE_SYMBOL_MASTERS,
+  toFigmaVariantPropertyName,
+  toFigmaVariantPropertyValue,
+  ensureThemeComponentLibrary,
+} from './master-shared';
+import { isTruthyStateProp } from './state-utils';
+import { createStateStoryFrame } from './story-frames';
+import type { StoryBuilderContext } from './story-builder-context';
+
+/**
+ * State-master logic: creating Figma component sets that represent the
+ * default / hover / disabled / error / checked variants of state-typed
+ * components (Input, Checkbox, Switch, …).
+ */
+
+export { isTruthyStateProp };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function shouldCreateStateMaster(def: any): boolean {
+  if (!def || def.type !== 'state') return false;
+  if (def.symbolCandidate === false) return false;
+  const states = def && def.states ? def.states : {};
+  const stateNames = Object.keys(states);
+  return stateNames.length > 0;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function buildStateComponentSetHash(def: any, theme: string): string {
+  const themeContext = getThemeContext(theme);
+  return hashString(
+    hashDef(def)
+      + ':'
+      + theme
+      + ':state-component-set-v3:'
+      + RENDER_ENGINE_VERSION
+      + ':'
+      + JSON.stringify({
+        colorGroup: themeContext.colorGroup,
+        radiusGroup: themeContext.radiusGroup,
+      })
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getStateVariantNames(def: any): string[] {
+  const out: string[] = ['default'];
+  const states = def && def.states ? def.states : {};
+  const names = Object.keys(states);
+  for (let i = 0; i < names.length; i++) {
+    const name = String(names[i] || '').trim();
+    if (!name || name === 'default') continue;
+    if (out.indexOf(name) !== -1) continue;
+    out.push(name);
+  }
+  return out;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function hasCheckedStateVariant(def: any): boolean {
+  const names = getStateVariantNames(def);
+  for (let i = 0; i < names.length; i++) {
+    if (names[i].toLowerCase() === 'checked') return true;
+  }
+  return false;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getVisualStateVariantNames(def: any): string[] {
+  const all = getStateVariantNames(def);
+  const out: string[] = [];
+  for (let i = 0; i < all.length; i++) {
+    const name = all[i];
+    if (name.toLowerCase() === 'checked') continue;
+    out.push(name);
+  }
+  if (out.length === 0) out.push('default');
+  return out;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function resolveStateVariantName(def: any, requested: unknown, includeChecked: boolean = true): string {
+  const requestedName = String(requested == null ? '' : requested).trim().toLowerCase();
+  const available = includeChecked ? getStateVariantNames(def) : getVisualStateVariantNames(def);
+  for (let i = 0; i < available.length; i++) {
+    if (available[i].toLowerCase() === requestedName) return available[i];
+  }
+  return 'default';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isCheckedInstance(instance: any): boolean {
+  const props = instance && instance.props ? instance.props : {};
+  return isTruthyStateProp(props.checked)
+    || isTruthyStateProp(props.defaultChecked)
+    || isTruthyStateProp(props['aria-checked']);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getStateVariantForInstance(def: any, instance: any): string {
+  const props = instance && instance.props ? instance.props : {};
+  const explicitState = props['data-state'] != null ? props['data-state'] : props.state;
+  if (explicitState != null && String(explicitState).trim() !== '') {
+    return resolveStateVariantName(def, explicitState, false);
+  }
+  if (isTruthyStateProp(props.disabled) || isTruthyStateProp(props['aria-disabled'])) {
+    return resolveStateVariantName(def, 'disabled', false);
+  }
+  if (isTruthyStateProp(props['aria-invalid'])) {
+    return resolveStateVariantName(def, 'error', false);
+  }
+  return 'default';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function buildStateVariantProps(def: any, stateName: string, checked: boolean): Record<string, any> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const props: Record<string, any> = {};
+  const normalized = resolveStateVariantName(def, stateName, false);
+  const stateInfo = def && def.states && def.states[normalized] ? def.states[normalized] : null;
+  const stateClasses = stateInfo && Array.isArray(stateInfo.classes) ? stateInfo.classes : [];
+  const checkedState = def && def.states && def.states.checked ? def.states.checked : null;
+  const checkedClasses = checkedState && Array.isArray(checkedState.classes) ? checkedState.classes : [];
+  const mergedClasses = checked ? stateClasses.concat(checkedClasses) : stateClasses;
+  if (mergedClasses.length > 0) {
+    props.className = mergedClasses.join(' ');
+  }
+  if (checked) {
+    props.checked = 'true';
+  }
+  if (normalized === 'disabled') {
+    props.disabled = 'true';
+  } else if (normalized === 'error') {
+    props['aria-invalid'] = 'true';
+  } else if (normalized === 'open') {
+    props['data-state'] = 'open';
+  }
+  return props;
+}
+
+export function ensureStateComponentSet(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  def: any,
+  theme: string,
+  ctx: StoryBuilderContext
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): any | null {
+  if (!ENABLE_SYMBOL_MASTERS) return null;
+  if (!shouldCreateStateMaster(def)) return null;
+
+  const stateNames = getVisualStateVariantNames(def);
+  if (stateNames.length === 0) return null;
+  const includeChecked = hasCheckedStateVariant(def);
+
+  const themeLibrary = ensureThemeComponentLibrary(theme);
+  if (!themeLibrary) return null;
+
+  const setName = def.name + ' [' + theme + ']';
+  const masterHash = buildStateComponentSetHash(def, theme);
+  const existing = findChildByName(themeLibrary, setName);
+  if (existing && existing.type === 'COMPONENT_SET' && getFrameHash(existing) === masterHash) {
+    return existing;
+  }
+  if (existing) {
+    existing.remove();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const components: any[] = [];
+  const checkedValues = includeChecked ? [false, true] : [false];
+  for (let i = 0; i < stateNames.length; i++) {
+    const stateName = stateNames[i];
+    for (let ci = 0; ci < checkedValues.length; ci++) {
+      const checked = checkedValues[ci];
+      const stateVariantProps = buildStateVariantProps(def, stateName, checked);
+      const sourceNode = createStateStoryFrame(
+        def,
+        { props: stateVariantProps },
+        theme,
+        ctx
+      );
+      themeLibrary.appendChild(sourceNode);
+
+      // `createStateStoryFrame` → `applyTailwindStylesToFrame` calls
+      // `markRingNode(sourceNode, ringInfo)` for ring classes. We must
+      // capture that ring info BEFORE `createComponentFromNode` — it
+      // creates a NEW node identity, so the `RING_NODES` WeakMap entry
+      // keyed on `sourceNode` is unreachable from the resulting component.
+      // Without this transfer the focus / error variants of state masters
+      // (Input, Textarea) render with no ring overlay — only the host's
+      // 1px border shows. Confirmed 2026-05-17 from a side-by-side
+      // Storybook (correct: 1px border + 3px halo) vs Figma (broken: 1px
+      // border alone) comparison.
+      const ringInfo = getRingNode(sourceNode);
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let component: any = null;
+      try {
+        component = figma.createComponentFromNode(sourceNode);
+      } catch (_error) {
+        try {
+          sourceNode.remove();
+        } catch (_cleanupError) {
+          // ignore cleanup errors
+        }
+        continue;
+      }
+      if (!component) continue;
+      // Transfer the captured ring mark onto the new component identity.
+      if (ringInfo) {
+        markRingNode(component, ringInfo);
+      }
+      enforceFixedBoxSizingAfterLayout(
+        component,
+        splitClassName(stateVariantProps && stateVariantProps.className ? String(stateVariantProps.className) : '')
+      );
+      // Now that the component's dimensions are finalised by
+      // `enforceFixedBoxSizingAfterLayout`, build the ring overlay against
+      // those final dimensions. Idempotent: if the comp already has an
+      // `__inkbridge-ring__` child from an earlier pass, it's removed and
+      // recreated at the correct size.
+      applyRingIfPossible(component as unknown as FrameNode, themeLibrary);
+
+      const nameParts = [
+        toFigmaVariantPropertyName('state') + '=' + toFigmaVariantPropertyValue(stateName),
+      ];
+      if (includeChecked) {
+        nameParts.push(toFigmaVariantPropertyName('checked') + '=' + toFigmaVariantPropertyValue(String(checked)));
+      }
+      component.name = nameParts.join(', ');
+      component.visible = false;
+      if (component.parent !== themeLibrary) {
+        themeLibrary.appendChild(component);
+      }
+      components.push(component);
+    }
+  }
+
+  if (components.length === 0) return null;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let componentSet: any = null;
+  try {
+    componentSet = figma.combineAsVariants(components, themeLibrary);
+  } catch (_error) {
+    for (let i = 0; i < components.length; i++) {
+      try {
+        components[i].remove();
+      } catch (_cleanupError) {
+        // ignore cleanup errors
+      }
+    }
+    return null;
+  }
+
+  componentSet.name = setName;
+  componentSet.visible = false;
+  setFrameHash(componentSet, masterHash);
+  tagGeneratedNode(componentSet, 'state-component-set:' + def.name + ':' + theme);
+  return componentSet;
+}

package/src/design-system/state-utils.ts

@@ -0,0 +1,15 @@
+/**
+ * Predicate for "is this prop value truthy by HTML/JSX conventions?"
+ *
+ * Originally lived as two near-duplicates: `isTruthyStateProp` (in
+ * state-master) and `isTruthyBoolProp` (in ui-builder). They differed only
+ * in whether they trimmed whitespace; the trimming version is correct
+ * because attributes can carry leading/trailing whitespace through JSX.
+ * Both call sites now use this one function.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isTruthyStateProp(value: any): boolean {
+  if (value == null) return false;
+  const normalized = String(value).trim().toLowerCase();
+  return normalized !== '' && normalized !== 'false' && normalized !== '0' && normalized !== 'off';
+}

package/src/design-system/story-builder-context.ts

@@ -0,0 +1,40 @@
+import type { RGB } from '../tokens';
+import type { JsxNode } from '../tailwind';
+import type { ComponentDef } from '../components/scanner-types';
+
+export type StoryRenderContext = {
+  maxWidth?: number;
+  /** Story-level viewport width for responsive breakpoint resolution. */
+  viewportWidth?: number;
+  textAlign?: 'LEFT' | 'CENTER' | 'RIGHT';
+  parentLayout?: 'HORIZONTAL' | 'VERTICAL';
+  textColor?: string | RGB | null;
+  textColorToken?: string;
+  parentCompoundDef?: unknown;
+};
+
+export type StoryBuilderContext = {
+  getComponentDefByName: (name: string) => ComponentDef | null;
+  normalizeComponentDef: (raw: ComponentDef) => ComponentDef;
+  applyClipBehavior: (frame: FrameNode, classes: string[] | undefined) => void;
+  applyLayoutClasses: (
+    frame: FrameNode,
+    classes: string[] | undefined,
+    colorGroup: Record<string, string>,
+    radiusGroup: Record<string, string> | null,
+    theme: string
+  ) => void;
+  hasExplicitHeight: (classes: string[] | undefined) => boolean;
+  renderJsxTree: (
+    node: JsxNode,
+    colorGroup: Record<string, string>,
+    radiusGroup: Record<string, string> | null,
+    theme: string,
+    depth?: number,
+    context?: StoryRenderContext
+  ) => SceneNode | null;
+  applyAbsoluteIfAllowed: (child: SceneNode, parent: FrameNode, allowAbsolute: boolean) => void;
+  applyGridColumnsWithReflow: (frame: FrameNode, widthOverride?: number, colsOverride?: number) => void;
+  hasWidthHintInClasses: (classes: string[]) => boolean;
+  propsContainWidthHint: (props: Record<string, unknown> | undefined) => boolean;
+};