[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-figma-code-connect":3,"mdc--gewtfn-key":39,"related-repo-openai-figma-code-connect":9033,"related-org-openai-figma-code-connect":9151},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":37,"mdContent":38},"figma-code-connect","map Figma components to code snippets","Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create\u002Fupdate .figma.ts or .figma.js files.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"Documentation","documentation","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":23,"slug":24,"type":15},"Figma","figma",{"name":26,"slug":27,"type":15},"Design","design",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-05-16T06:07:55.347467",null,465,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-code-connect","---\nname: figma-code-connect\ndescription: Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create\u002Fupdate .figma.ts or .figma.js files.\ndisable-model-invocation: false\n---\n\n# Code Connect\n\n## Overview\n\nCreate Code Connect template files (`.figma.ts`) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template.\n\n> **Note:** This project may also contain parser-based `.figma.tsx` files (using `figma.connect()`, published via CLI). This skill covers **templates files only** — `.figma.ts` files that use the MCP tools to fetch component context from Figma.\n\n## Prerequisites\n\n- **Figma MCP server must be connected** — verify that Figma MCP tools (e.g., `get_code_connect_suggestions`) are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client.\n- **Components must be published** — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.\n- **Organization or Enterprise plan required** — Code Connect is not available on Free or Professional plans.\n- **URL must include `node-id`** — the Figma URL must contain the `node-id` query parameter.\n- **TypeScript types** — for editor autocomplete and type checking in `.figma.ts` files `@figma\u002Fcode-connect\u002Ffigma-types` must be added to `types` in `tsconfig.json`:\n  ```json\n  {\n    \"compilerOptions\": {\n      \"types\": [\"@figma\u002Fcode-connect\u002Ffigma-types\"]\n    }\n  }\n  ```\n\n## Step 1: Parse the Figma URL\n\nExtract `fileKey` and `nodeId` from the URL:\n\n| URL Format | fileKey | nodeId |\n|---|---|---|\n| `figma.com\u002Fdesign\u002F:fileKey\u002F:name?node-id=X-Y` | `:fileKey` | `X-Y` → `X:Y` |\n| `figma.com\u002Ffile\u002F:fileKey\u002F:name?node-id=X-Y` | `:fileKey` | `X-Y` → `X:Y` |\n| `figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:name` | use `:branchKey` | from `node-id` param |\n\nAlways convert `nodeId` hyphens to colons: `1234-5678` → `1234:5678`.\n\n**Worked example:**\n\nGiven: `https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FQiEF6w564ggoW8ftcLvdcu\u002FMyDesignSystem?node-id=4185-3778`\n- `fileKey` = `QiEF6w564ggoW8ftcLvdcu`\n- `nodeId` = `4185-3778` → `4185:3778`\n\n## Step 2: Discover Unmapped Components\n\nThe user may provide a URL pointing to a frame, instance, or variant — not necessarily a component set or standalone component. Call the MCP tool `get_code_connect_suggestions` with:\n- `fileKey` — from Step 1\n- `nodeId` — from Step 1 (colons format)\n- `excludeMappingPrompt` — `true` (returns a lightweight list of unmapped components)\n\nThis tool identifies published components in the selection that don't yet have Code Connect mappings.\n\n**Handle the response:**\n\n- **\"No published components found in this selection\"** — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.\n- **\"All component instances in this selection are already connected to code via Code Connect\"** — everything is already mapped. Inform the user and stop.\n- **Normal response with component list** — extract the `mainComponentNodeId` for each returned component. Use these resolved node IDs (not the original from the URL) for all subsequent steps. If multiple components are returned (e.g. the user selected a frame containing several different component instances), repeat Steps 3–6 for each one.\n\n## Step 3: Fetch Component Properties\n\nCall the MCP tool `get_context_for_code_connect` with:\n- `fileKey` — from Step 1\n- `nodeId` — the resolved `mainComponentNodeId` from Step 2\n- `clientFrameworks` — determine from `figma.config.json` `parser` field (e.g. `\"react\"` → `[\"react\"]`)\n- `clientLanguages` — infer from project file extensions (e.g. TypeScript project → `[\"typescript\"]`, JavaScript → `[\"javascript\"]`)\n\nFor multiple components, call the tool once per node ID.\n\nThe response contains the Figma component's **property definitions** — note each property's name and type:\n- **TEXT** — text content (labels, titles, placeholders)\n- **BOOLEAN** — toggles (show\u002Fhide icon, disabled state)\n- **VARIANT** — enum options (size, variant, state)\n- **INSTANCE_SWAP** — swappable nested instances tied to a specific component (icon, avatar)\n- **SLOT** — flexible content regions (freeform layout, mixed children); use `getSlot()` in templates (not the same as INSTANCE_SWAP)\n\nSave this property list — you will use it in Step 5 to write the template.\n\n## Step 4: Identify the Code Component\n\nIf the user did not specify which code component to connect:\n\n1. Check `figma.config.json` for `paths` and `importPaths` to find where components live\n2. Search the codebase for a component matching the Figma component name. Check common directories (`src\u002Fcomponents\u002F`, `components\u002F`, `lib\u002Fui\u002F`, `app\u002Fcomponents\u002F`) if `figma.config.json` doesn't specify paths\n3. Read candidate files and compare their props interface against the Figma properties from Step 3 — look for matching variant types, size options, boolean flags, and slot props\n4. If multiple candidates match, pick the one with the closest prop-interface match and explain your reasoning to the user\n5. If no match is found, show the 2 closest candidates and ask the user to confirm or provide the correct path\n\n**Confirm with the user** before proceeding to Step 5. Present the match: which code component you found, where it lives, and why it matches (prop correspondence, naming, purpose).\n\nRead `figma.config.json` for import path aliases — the `importPaths` section maps glob patterns to import specifiers, and the `paths` section maps those specifiers to directories.\n\nRead the code component's source to understand its props interface — this informs how to map Figma properties to code props in Step 5.\n\n## Step 5: Create the Template File (.figma.ts)\n\n### File location\n\nPlace the file alongside existing Code Connect templates (`.figma.tsx` or `.figma.ts` files). Check `figma.config.json` `include` patterns for the correct directory. Name it `ComponentName.figma.ts`.\n\n### Template structure\n\nEvery template file follows this structure:\n\n```ts\n\u002F\u002F url=https:\u002F\u002Fwww.figma.com\u002Ffile\u002F{fileKey}\u002F{fileName}?node-id={nodeId}\n\u002F\u002F source={path to code component from Step 4}\n\u002F\u002F component={code component name from Step 4}\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\n\u002F\u002F Extract properties from the Figma component (see property mapping below)\n\u002F\u002F ...\n\nexport default {\n  example: figma.code`\u003CComponent ... \u002F>`,       \u002F\u002F Required: code snippet\n  imports: ['import { Component } from \"...\"'], \u002F\u002F Optional: import statements\n  id: 'component-name',                         \u002F\u002F Required: unique identifier\n  metadata: {                                    \u002F\u002F Optional\n    nestable: true,                              \u002F\u002F true = inline in parent, false = show as pill\n    props: {}                                    \u002F\u002F data accessible to parent templates\n  }\n}\n```\n\n### Property mapping\n\nUse the property list from Step 3 to extract values. For each Figma property type, use the corresponding method:\n\n| Figma Property Type | Template Method | When to Use |\n|---|---|---|\n| TEXT | `instance.getString('Name')` | Labels, titles, placeholder text |\n| BOOLEAN | `instance.getBoolean('Name', { true: ..., false: ... })` | Toggle visibility, conditional props |\n| VARIANT | `instance.getEnum('Name', { 'FigmaVal': 'codeVal' })` | Size, variant, state enums |\n| INSTANCE_SWAP | `instance.getInstanceSwap('Name')` | Swapped instance for a fixed component slot (then `hasCodeConnect()` \u002F `executeTemplate()`) - do not confuse with the SLOT property below |\n| SLOT | `instance.getSlot('Name')` | Freeform slot content only when the Figma property type is **SLOT** \n| (child layer) | `instance.findInstance('LayerName')` | Named child instances without a property |\n| (text layer) | `instance.findText('LayerName')` → `.textContent` | Text content from named layers |\n\n**TEXT** — get the string value directly:\n```ts\nconst label = instance.getString('Label')\n```\n\n**VARIANT** — map Figma enum values to code values:\n```ts\nconst variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\n\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\n```\n\n**BOOLEAN** — simple boolean or mapped to values:\n```ts\n\u002F\u002F Simple boolean\nconst disabled = instance.getBoolean('Disabled')\n\n\u002F\u002F Mapped to code values (e.g. when the code prop is an enum, not a boolean)\nconst size = instance.getBoolean('Show Label', { true: 'large', false: 'small' })\n```\n\n**Map Figma properties to code props where there's a valid correspondence.** Figma properties and code props don't always line up 1:1 — some Figma properties map directly (by name, or via the API methods above), others have no code equivalent. Where a mapping exists, use it; where none fits, omit the Figma property rather than invent a code prop. Never emit an attribute whose name doesn't appear in the code component's `Props` interface.\n\n### Exhaustive variant handling\n\nWhen a VARIANT property has multiple possible values, the `getEnum` mapping **must list every value** returned by `get_context_for_code_connect`. Don't omit values — an unmapped value silently returns `undefined`, producing broken output.\n\n```ts\n\u002F\u002F WRONG — omits 'Warning', which will render as undefined\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n})\n\n\u002F\u002F CORRECT — every value is mapped\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n  'Warning': 'warning',\n  'Info': 'info',\n})\n```\n\nWhen **two or more VARIANT properties combine** to produce different code output, generate exhaustive conditional branches. For example, 2 variants × 2 values = 4 branches:\n\n```ts\nconst type = instance.getEnum('Type', { 'Filled': 'filled', 'Outlined': 'outlined' })\nconst status = instance.getEnum('Status', { 'Success': 'success', 'Error': 'error' })\n\nlet colorClass\nif (type === 'filled' && status === 'success') {\n  colorClass = 'bg-green-500 text-white'\n} else if (type === 'filled' && status === 'error') {\n  colorClass = 'bg-red-500 text-white'\n} else if (type === 'outlined' && status === 'success') {\n  colorClass = 'bg-transparent border-green-500'\n} else if (type === 'outlined' && status === 'error') {\n  colorClass = 'bg-transparent border-red-500'\n}\n```\n\nIf the combinations produce **repetitive** output (e.g., `Size` doesn't change the snippet structure — it's just passed through as a prop), a single `getEnum` mapping per variant is sufficient — no need for cross-product branches.\n\n**INSTANCE_SWAP** — access swappable component instances:\n```ts\nconst icon = instance.getInstanceSwap('Icon')\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n```\n\n**SLOT** — `getSlot(propName)` is only valid when the Figma component property reported in Step 3 has type **`SLOT`**. Do not use `getSlot()` for **INSTANCE_SWAP** properties (those use `getInstanceSwap()`). Slots are explicit “content regions” in the component definition, not generic nested instances.\n\n- **Signature:** `getSlot(propName: string): ResultSection[] | undefined`\n```ts\n\u002F\u002F Figma property \"Content\" must be type SLOT in component properties\nconst content = instance.getSlot('Content')\n\nexport default {\n  example: figma.code`\u003CCard>${content}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n```\n\n### Interpolation in tagged templates\n\nWhen interpolating values in tagged templates, use the correct wrapping:\n- **String values** (`getString`, `getEnum`, `textContent`): wrap in quotes → `variant=\"${variant}\"`\n- **Instance\u002Fsection values** (`executeTemplate().example`): wrap in braces → `icon={${iconCode}}`\n- **Slot sections** (`getSlot()` result — `ResultSection[] | undefined`): interpolate directly inside `` figma.code`...` `` (same shape as nested snippet sections), e.g. `` figma.code`\u003CSelect>${content}\u003C\u002FSelect>` `` — do not treat as a plain string\n- **Boolean bare props**: use conditional → `${disabled ? 'disabled' : ''}`\n\n### Finding descendant layers\n\nWhen you need to access children that aren't exposed as component properties:\n\n| Method | Use when |\n|---|---|\n| `instance.getInstanceSwap('PropName')` | Figma property type is **INSTANCE_SWAP** (fixed swapped instance) |\n| `instance.getSlot('PropName')` | Figma property type is **SLOT** (freeform content region) |\n| `instance.findInstance('LayerName')` | You know the child layer name (no component property) |\n| `instance.findText('LayerName')` → `.textContent` | You need text content from a named text layer |\n| `instance.findConnectedInstance('id')` | You know the child's Code Connect `id` |\n| `instance.findConnectedInstances(fn)` | You need multiple connected children matching a filter |\n| `instance.findLayers(fn)` | You need any layers (text + instances) matching a filter |\n\n### Nested configurable instances\n\nA component may contain child instances that are **not exposed as component properties** (no INSTANCE_SWAP) but are still **independently configurable** — they have their own variants, properties, or swap slots. These must be resolved dynamically, not hardcoded.\n\n1. **Check whether the child already has a Code Connect template** — use `get_code_connect_suggestions` or check existing `.figma.ts` files in the project.\n2. **If no template exists, create one** for the child so it renders correctly both standalone and when nested.\n3. **Reference the child from the parent** using `findInstance()` or `findConnectedInstance()`, then call `executeTemplate()`.\n\n```ts\n\u002F\u002F Parent template — the Badge child isn't a prop, but it's configurable\nconst badge = instance.findInstance('Status Badge')\nlet badgeCode\nif (badge && badge.type === 'INSTANCE') {\n  badgeCode = badge.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CCard>${badgeCode}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n```\n\nThis applies to icons, badges, labels, and any other nested instance that is configurable by itself — always connect them and render dynamically, never hardcode their content.\n\n### Nested component example\n\nFor multi-level nested components or metadata prop passing between templates, see [advanced-patterns.md](references\u002Fadvanced-patterns.md).\n\n```ts\nconst icon = instance.getInstanceSwap('Icon')\nlet iconSnippet\nif (icon && icon.type === 'INSTANCE') {\n  iconSnippet = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CButton ${iconSnippet ? figma.code`icon={${iconSnippet}}` : ''}>${label}\u003C\u002FButton>`,\n  \u002F\u002F ...\n}\n```\n\n### Conditional props\n\n```ts\nconst variant = instance.getEnum('Variant', { 'Primary': 'primary', 'Secondary': 'secondary' })\nconst disabled = instance.getBoolean('Disabled')\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      ${disabled ? 'disabled' : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  \u002F\u002F ...\n}\n```\n\n## Step 6: Validate\n\nRead back the `.figma.ts` file and review it against the following:\n\n- **Property coverage** — every Figma property from Step 3 should be accounted for in the template. Flag any that are missing and ask the user if they were intentionally omitted.\n- **Valid, correctly typed code** — all emitted code must be valid and correctly typed against the code component's `Props` interface. Never make up component properties — if a Figma property has no corresponding code prop, omit it rather than invent one.\n- **No hardcoded children** — verify that every INSTANCE_SWAP property and child component slot uses the dynamic APIs (`getInstanceSwap()`, `findInstance()`, `findConnectedInstance()`, etc.) with `executeTemplate()`. No slot should contain hardcoded component content.\n- **Rules and Pitfalls** — check for the common mistakes listed below (string concatenation of template results, unnecessary `hasCodeConnect()` guards, missing `type === 'INSTANCE'` checks, etc.)\n- **Interpolation wrapping** — strings (`getString`, `getEnum`, `textContent`) wrapped in quotes, instance\u002Fsection values (`executeTemplate().example`) wrapped in braces, slot sections (`getSlot`) interpolated as snippet sections inside `` figma.code`...` ``, booleans using conditionals\n\nIf anything looks uncertain, consult [api.md](references\u002Fapi.md) for API details and [advanced-patterns.md](references\u002Fadvanced-patterns.md) for complex nesting.\n\n## Inline Quick Reference\n\n### `instance.*` Methods\n\n| Method | Signature | Returns |\n|---|---|---|\n| `getString` | `(propName: string)` | `string` |\n| `getBoolean` | `(propName: string, mapping?: { true: any, false: any })` | `boolean \\| any` |\n| `getEnum` | `(propName: string, mapping: { [figmaVal]: codeVal })` | `any` |\n| `getInstanceSwap` | `(propName: string)` | `InstanceHandle \\| null` |\n| `getSlot` | `(propName: string)` | `ResultSection[] \\| undefined` |\n| `getPropertyValue` | `(propName: string)` | `string \\| boolean` |\n| `findInstance` | `(layerName: string, opts?: SelectorOptions)` | `InstanceHandle \\| ErrorHandle` |\n| `findText` | `(layerName: string, opts?: SelectorOptions)` | `TextHandle \\| ErrorHandle` |\n| `findConnectedInstance` | `(codeConnectId: string, opts?: SelectorOptions)` | `InstanceHandle \\| ErrorHandle` |\n| `findConnectedInstances` | `(selector: (node) => boolean, opts?: SelectorOptions)` | `InstanceHandle[]` |\n| `findLayers` | `(selector: (node) => boolean, opts?: SelectorOptions)` | `(InstanceHandle \\| TextHandle)[]` |\n\n### InstanceHandle Methods\n\n| Method | Returns |\n|---|---|\n| `hasCodeConnect()` | `boolean` |\n| `executeTemplate()` | `{ example: ResultSection[], metadata: Metadata }` |\n| `codeConnectId()` | `string \\| null` |\n\n### TextHandle Properties\n\n| Property | Type |\n|---|---|\n| `.textContent` | `string` |\n| `.name` | `string` |\n\n### SelectorOptions\n\n```ts\n{ path?: string[], traverseInstances?: boolean }\n```\n\n- `traverseInstances: true` — required when the target lives inside another nested instance. Without it, `findInstance`\u002F`findText` only search the current instance's own layers and stop at nested instance boundaries.\n- `path: string[]` — disambiguates when multiple descendants share the same layer name. Lists parent layer names that must appear on the path to the target.\n\n**Examples:**\n\n```ts\n\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F \"mychild\" sits inside nested instance C, so plain findInstance returns ErrorHandle.\ninstance.findInstance('mychild', { traverseInstances: true })\n\n\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F   A > D (instance) > \"mychild\"\n\u002F\u002F Two \"mychild\" layers exist — use path to pick the one under C.\ninstance.findInstance('mychild', { traverseInstances: true, path: ['C'] })\n```\n\n**When to reach into a nested instance from a parent template:** only when the parent code component (from Step 4) takes the nested layer as a prop value itself (e.g. `\u003CC show={\u003CB \u002F>} \u002F>` — A forwards B into C). If the parent just composes C and C renders B internally, resolve C with `executeTemplate()` and let C's own template handle B — don't duplicate B's rendering at the parent level.\n\n### Export Structure\n\n```ts\nexport default {\n  example: figma.code`...`,                      \u002F\u002F Required: ResultSection[]\n  id: 'component-name',                         \u002F\u002F Required: string\n  imports: ['import { X } from \"...\"'],          \u002F\u002F Optional: string[]\n  metadata: { nestable: true, props: {} }        \u002F\u002F Optional\n}\n```\n\n## Rules and Pitfalls\n\n1. **Never string-concatenate template results.** `executeTemplate().example` is a `ResultSection[]` object, not a string. Using `+` or `.join()` produces `[object Object]`. Always interpolate inside tagged templates: `` figma.code`${snippet1}${snippet2}` ``\n\n2. **Do not use `hasCodeConnect()` guards.** Call `executeTemplate()` directly on any instance after a `type === 'INSTANCE'` check. The runtime handles instances without Code Connect automatically.\n\n   ```ts\n   \u002F\u002F WRONG — hasCodeConnect() gate drops non-CC instances\n   if (icon && icon.type === 'INSTANCE' && icon.hasCodeConnect()) {\n     iconCode = icon.executeTemplate().example\n   }\n\n   \u002F\u002F CORRECT — let the runtime handle all instances\n   if (icon && icon.type === 'INSTANCE') {\n     iconCode = icon.executeTemplate().example\n   }\n   ```\n\n3. **Check `type === 'INSTANCE'` before calling `executeTemplate()`.** `findInstance()`, `findConnectedInstance()`, and `findText()` return an `ErrorHandle` (truthy, but not a real node) on failure — not `null`. Always add a type check to avoid crashes: `if (child && child.type === 'INSTANCE') { ... }`\n\n4. **Prefer `getInstanceSwap()` over `findInstance()`** when a component property exists for the slot. `findInstance('Star Icon')` breaks when the icon is swapped to a different name; `getInstanceSwap('Icon')` always works regardless of which instance is in the slot.\n\n5. **Use `getSlot()` only when the Figma property type is `SLOT`.** For **INSTANCE_SWAP** props, use `getInstanceSwap()` (returns an `InstanceHandle`). `getSlot()` returns structured slot sections, not instances — never call `executeTemplate()` on its return value.\n\n6. **Property names are case-sensitive** and must exactly match what `get_context_for_code_connect` returns.\n\n7. **Handle multiple template arrays correctly.** When iterating over children, set each result in a separate variable and interpolate them individually — do not use `.map().join()`:\n   ```ts\n   \u002F\u002F Wrong:\n   items.map(n => n.executeTemplate().example).join('\\n')\n\n   \u002F\u002F Correct — use separate variables:\n   const child1 = items[0]?.executeTemplate().example\n   const child2 = items[1]?.executeTemplate().example\n   export default { example: figma.code`${child1}${child2}` }\n   ```\n\n7. **Never hardcode slot or children content.** Always resolve child instances dynamically — use `getInstanceSwap()` for INSTANCE_SWAP properties, `findInstance()`\u002F`findConnectedInstance()` for direct children — and render them via `executeTemplate()`. Never construct JSX from a layer name (e.g., `\u003CStarIcon \u002F>`) or guess import paths. If an instance has no Code Connect, omit it — do not add a hardcoded fallback.\n\n   ```ts\n   \u002F\u002F WRONG — hardcodes the icon from its layer name\n   example: figma.code`\u003CButton icon={\u003CStarIcon \u002F>}>Submit\u003C\u002FButton>`\n\n   \u002F\u002F CORRECT — resolves dynamically, works for any swapped icon\n   const icon = instance.findInstance('Icon')\n   let iconCode\n   if (icon && icon.type === 'INSTANCE') {\n     iconCode = icon.executeTemplate().example\n   }\n   example: figma.code`\u003CButton${iconCode ? figma.code` icon={${iconCode}}` : ''}>...\u003C\u002FButton>`\n   ```\n\n8. **Attempt to represent every Figma property via a code prop.** The code component's `Props` interface (from Step 4) is the authoritative list of attribute names. For each Figma property, figure out the right way to represent it using the API methods from Step 5 — direct name match, value transformation, or whatever fits. If no code prop fits at all, omit it — don't invent a prop name.\n\n## Complete Worked Example\n\nGiven URL: `https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100`\n\n**Step 1:** Parse the URL.\n- `fileKey` = `abc123`\n- `nodeId` = `42-100` → `42:100`\n\n**Step 2:** Call `get_code_connect_suggestions` with `fileKey: \"abc123\"`, `nodeId: \"42:100\"`, `excludeMappingPrompt: true`.\nResponse returns one component with `mainComponentNodeId: \"42:100\"`. If the response were empty, stop and inform the user. If multiple components were returned, repeat Steps 3–6 for each.\n\n**Step 3:** Call `get_context_for_code_connect` with `fileKey: \"abc123\"`, `nodeId: \"42:100\"` (from Step 2), `clientFrameworks: [\"react\"]`, `clientLanguages: [\"typescript\"]`.\n\nResponse includes properties:\n- Label (TEXT)\n- Variant (VARIANT): Primary, Secondary\n- Size (VARIANT): Small, Medium, Large\n- Disabled (BOOLEAN)\n- Has Icon (BOOLEAN)\n- Icon (INSTANCE_SWAP)\n\n**Step 4:** Search codebase → find `Button` component. Read its source to confirm props: `variant`, `size`, `disabled`, `icon`, `children`. Import path: `\"primitives\"`.\n\n**Step 5:** Create `src\u002Ffigma\u002Fprimitives\u002FButton.figma.ts`:\n\n```ts\n\u002F\u002F url=https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100\n\u002F\u002F source=src\u002Fcomponents\u002FButton.tsx\n\u002F\u002F component=Button\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\nconst label = instance.getString('Label')\nconst variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\nconst disabled = instance.getBoolean('Disabled')\nconst hasIcon = instance.getBoolean('Has Icon')\nconst icon = hasIcon ? instance.getInstanceSwap('Icon') : null\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      size=\"${size}\"\n      ${disabled ? 'disabled' : ''}\n      ${iconCode ? figma.code`icon={${iconCode}}` : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  imports: ['import { Button } from \"primitives\"'],\n  id: 'button',\n  metadata: { nestable: true }\n}\n```\n\n**Step 6:** Read back file to verify syntax.\n\n## Additional Reference\n\nFor advanced patterns (multi-level nested components, `findConnectedInstances` filtering, metadata prop passing between parent\u002Fchild templates):\n\n- [api.md](references\u002Fapi.md) — Full Code Connect API reference\n- [advanced-patterns.md](references\u002Fadvanced-patterns.md) — Advanced nesting, metadata props, and descendant patterns\n",{"data":40,"body":42},{"name":4,"description":6,"disable-model-invocation":41},false,{"type":43,"children":44},"root",[45,54,61,76,121,127,350,356,377,515,542,550,561,602,608,620,661,666,674,715,721,733,830,835,847,908,913,919,924,1012,1022,1048,1053,1059,1066,1106,1112,1117,1492,1498,1503,1706,1715,1775,1784,2115,2124,2312,2330,2336,2370,2744,2756,3399,3425,3434,3605,3651,3669,3830,3836,3841,3959,3965,3970,4132,4138,4157,4225,4490,4495,4501,4514,4839,4845,5198,5204,5216,5357,5376,5382,5394,5737,5743,5824,5830,5890,5896,5954,5993,6001,6223,6248,6254,6455,6460,7643,7649,7660,7670,7710,7756,7798,7803,7836,7895,7912,8978,8988,8994,9006,9027],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"code-connect",[51],{"type":52,"value":53},"text","Code Connect",{"type":46,"tag":55,"props":56,"children":58},"h2",{"id":57},"overview",[59],{"type":52,"value":60},"Overview",{"type":46,"tag":62,"props":63,"children":64},"p",{},[65,67,74],{"type":52,"value":66},"Create Code Connect template files (",{"type":46,"tag":68,"props":69,"children":71},"code",{"className":70},[],[72],{"type":52,"value":73},".figma.ts",{"type":52,"value":75},") that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template.",{"type":46,"tag":77,"props":78,"children":79},"blockquote",{},[80],{"type":46,"tag":62,"props":81,"children":82},{},[83,89,91,97,99,105,107,112,114,119],{"type":46,"tag":84,"props":85,"children":86},"strong",{},[87],{"type":52,"value":88},"Note:",{"type":52,"value":90}," This project may also contain parser-based ",{"type":46,"tag":68,"props":92,"children":94},{"className":93},[],[95],{"type":52,"value":96},".figma.tsx",{"type":52,"value":98}," files (using ",{"type":46,"tag":68,"props":100,"children":102},{"className":101},[],[103],{"type":52,"value":104},"figma.connect()",{"type":52,"value":106},", published via CLI). This skill covers ",{"type":46,"tag":84,"props":108,"children":109},{},[110],{"type":52,"value":111},"templates files only",{"type":52,"value":113}," — ",{"type":46,"tag":68,"props":115,"children":117},{"className":116},[],[118],{"type":52,"value":73},{"type":52,"value":120}," files that use the MCP tools to fetch component context from Figma.",{"type":46,"tag":55,"props":122,"children":124},{"id":123},"prerequisites",[125],{"type":52,"value":126},"Prerequisites",{"type":46,"tag":128,"props":129,"children":130},"ul",{},[131,150,160,170,193],{"type":46,"tag":132,"props":133,"children":134},"li",{},[135,140,142,148],{"type":46,"tag":84,"props":136,"children":137},{},[138],{"type":52,"value":139},"Figma MCP server must be connected",{"type":52,"value":141}," — verify that Figma MCP tools (e.g., ",{"type":46,"tag":68,"props":143,"children":145},{"className":144},[],[146],{"type":52,"value":147},"get_code_connect_suggestions",{"type":52,"value":149},") are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client.",{"type":46,"tag":132,"props":151,"children":152},{},[153,158],{"type":46,"tag":84,"props":154,"children":155},{},[156],{"type":52,"value":157},"Components must be published",{"type":52,"value":159}," — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.",{"type":46,"tag":132,"props":161,"children":162},{},[163,168],{"type":46,"tag":84,"props":164,"children":165},{},[166],{"type":52,"value":167},"Organization or Enterprise plan required",{"type":52,"value":169}," — Code Connect is not available on Free or Professional plans.",{"type":46,"tag":132,"props":171,"children":172},{},[173,184,186,191],{"type":46,"tag":84,"props":174,"children":175},{},[176,178],{"type":52,"value":177},"URL must include ",{"type":46,"tag":68,"props":179,"children":181},{"className":180},[],[182],{"type":52,"value":183},"node-id",{"type":52,"value":185}," — the Figma URL must contain the ",{"type":46,"tag":68,"props":187,"children":189},{"className":188},[],[190],{"type":52,"value":183},{"type":52,"value":192}," query parameter.",{"type":46,"tag":132,"props":194,"children":195},{},[196,201,203,208,210,216,218,224,226,232,234],{"type":46,"tag":84,"props":197,"children":198},{},[199],{"type":52,"value":200},"TypeScript types",{"type":52,"value":202}," — for editor autocomplete and type checking in ",{"type":46,"tag":68,"props":204,"children":206},{"className":205},[],[207],{"type":52,"value":73},{"type":52,"value":209}," files ",{"type":46,"tag":68,"props":211,"children":213},{"className":212},[],[214],{"type":52,"value":215},"@figma\u002Fcode-connect\u002Ffigma-types",{"type":52,"value":217}," must be added to ",{"type":46,"tag":68,"props":219,"children":221},{"className":220},[],[222],{"type":52,"value":223},"types",{"type":52,"value":225}," in ",{"type":46,"tag":68,"props":227,"children":229},{"className":228},[],[230],{"type":52,"value":231},"tsconfig.json",{"type":52,"value":233},":\n",{"type":46,"tag":235,"props":236,"children":241},"pre",{"className":237,"code":238,"language":239,"meta":240,"style":240},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"compilerOptions\": {\n    \"types\": [\"@figma\u002Fcode-connect\u002Ffigma-types\"]\n  }\n}\n","json","",[242],{"type":46,"tag":68,"props":243,"children":244},{"__ignoreMap":240},[245,257,287,332,341],{"type":46,"tag":246,"props":247,"children":250},"span",{"class":248,"line":249},"line",1,[251],{"type":46,"tag":246,"props":252,"children":254},{"style":253},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[255],{"type":52,"value":256},"{\n",{"type":46,"tag":246,"props":258,"children":260},{"class":248,"line":259},2,[261,266,272,277,282],{"type":46,"tag":246,"props":262,"children":263},{"style":253},[264],{"type":52,"value":265},"  \"",{"type":46,"tag":246,"props":267,"children":269},{"style":268},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[270],{"type":52,"value":271},"compilerOptions",{"type":46,"tag":246,"props":273,"children":274},{"style":253},[275],{"type":52,"value":276},"\"",{"type":46,"tag":246,"props":278,"children":279},{"style":253},[280],{"type":52,"value":281},":",{"type":46,"tag":246,"props":283,"children":284},{"style":253},[285],{"type":52,"value":286}," {\n",{"type":46,"tag":246,"props":288,"children":290},{"class":248,"line":289},3,[291,296,301,305,309,314,318,323,327],{"type":46,"tag":246,"props":292,"children":293},{"style":253},[294],{"type":52,"value":295},"    \"",{"type":46,"tag":246,"props":297,"children":299},{"style":298},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[300],{"type":52,"value":223},{"type":46,"tag":246,"props":302,"children":303},{"style":253},[304],{"type":52,"value":276},{"type":46,"tag":246,"props":306,"children":307},{"style":253},[308],{"type":52,"value":281},{"type":46,"tag":246,"props":310,"children":311},{"style":253},[312],{"type":52,"value":313}," [",{"type":46,"tag":246,"props":315,"children":316},{"style":253},[317],{"type":52,"value":276},{"type":46,"tag":246,"props":319,"children":321},{"style":320},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[322],{"type":52,"value":215},{"type":46,"tag":246,"props":324,"children":325},{"style":253},[326],{"type":52,"value":276},{"type":46,"tag":246,"props":328,"children":329},{"style":253},[330],{"type":52,"value":331},"]\n",{"type":46,"tag":246,"props":333,"children":335},{"class":248,"line":334},4,[336],{"type":46,"tag":246,"props":337,"children":338},{"style":253},[339],{"type":52,"value":340},"  }\n",{"type":46,"tag":246,"props":342,"children":344},{"class":248,"line":343},5,[345],{"type":46,"tag":246,"props":346,"children":347},{"style":253},[348],{"type":52,"value":349},"}\n",{"type":46,"tag":55,"props":351,"children":353},{"id":352},"step-1-parse-the-figma-url",[354],{"type":52,"value":355},"Step 1: Parse the Figma URL",{"type":46,"tag":62,"props":357,"children":358},{},[359,361,367,369,375],{"type":52,"value":360},"Extract ",{"type":46,"tag":68,"props":362,"children":364},{"className":363},[],[365],{"type":52,"value":366},"fileKey",{"type":52,"value":368}," and ",{"type":46,"tag":68,"props":370,"children":372},{"className":371},[],[373],{"type":52,"value":374},"nodeId",{"type":52,"value":376}," from the URL:",{"type":46,"tag":378,"props":379,"children":380},"table",{},[381,403],{"type":46,"tag":382,"props":383,"children":384},"thead",{},[385],{"type":46,"tag":386,"props":387,"children":388},"tr",{},[389,395,399],{"type":46,"tag":390,"props":391,"children":392},"th",{},[393],{"type":52,"value":394},"URL Format",{"type":46,"tag":390,"props":396,"children":397},{},[398],{"type":52,"value":366},{"type":46,"tag":390,"props":400,"children":401},{},[402],{"type":52,"value":374},{"type":46,"tag":404,"props":405,"children":406},"tbody",{},[407,446,480],{"type":46,"tag":386,"props":408,"children":409},{},[410,420,429],{"type":46,"tag":411,"props":412,"children":413},"td",{},[414],{"type":46,"tag":68,"props":415,"children":417},{"className":416},[],[418],{"type":52,"value":419},"figma.com\u002Fdesign\u002F:fileKey\u002F:name?node-id=X-Y",{"type":46,"tag":411,"props":421,"children":422},{},[423],{"type":46,"tag":68,"props":424,"children":426},{"className":425},[],[427],{"type":52,"value":428},":fileKey",{"type":46,"tag":411,"props":430,"children":431},{},[432,438,440],{"type":46,"tag":68,"props":433,"children":435},{"className":434},[],[436],{"type":52,"value":437},"X-Y",{"type":52,"value":439}," → ",{"type":46,"tag":68,"props":441,"children":443},{"className":442},[],[444],{"type":52,"value":445},"X:Y",{"type":46,"tag":386,"props":447,"children":448},{},[449,458,466],{"type":46,"tag":411,"props":450,"children":451},{},[452],{"type":46,"tag":68,"props":453,"children":455},{"className":454},[],[456],{"type":52,"value":457},"figma.com\u002Ffile\u002F:fileKey\u002F:name?node-id=X-Y",{"type":46,"tag":411,"props":459,"children":460},{},[461],{"type":46,"tag":68,"props":462,"children":464},{"className":463},[],[465],{"type":52,"value":428},{"type":46,"tag":411,"props":467,"children":468},{},[469,474,475],{"type":46,"tag":68,"props":470,"children":472},{"className":471},[],[473],{"type":52,"value":437},{"type":52,"value":439},{"type":46,"tag":68,"props":476,"children":478},{"className":477},[],[479],{"type":52,"value":445},{"type":46,"tag":386,"props":481,"children":482},{},[483,492,503],{"type":46,"tag":411,"props":484,"children":485},{},[486],{"type":46,"tag":68,"props":487,"children":489},{"className":488},[],[490],{"type":52,"value":491},"figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:name",{"type":46,"tag":411,"props":493,"children":494},{},[495,497],{"type":52,"value":496},"use ",{"type":46,"tag":68,"props":498,"children":500},{"className":499},[],[501],{"type":52,"value":502},":branchKey",{"type":46,"tag":411,"props":504,"children":505},{},[506,508,513],{"type":52,"value":507},"from ",{"type":46,"tag":68,"props":509,"children":511},{"className":510},[],[512],{"type":52,"value":183},{"type":52,"value":514}," param",{"type":46,"tag":62,"props":516,"children":517},{},[518,520,525,527,533,534,540],{"type":52,"value":519},"Always convert ",{"type":46,"tag":68,"props":521,"children":523},{"className":522},[],[524],{"type":52,"value":374},{"type":52,"value":526}," hyphens to colons: ",{"type":46,"tag":68,"props":528,"children":530},{"className":529},[],[531],{"type":52,"value":532},"1234-5678",{"type":52,"value":439},{"type":46,"tag":68,"props":535,"children":537},{"className":536},[],[538],{"type":52,"value":539},"1234:5678",{"type":52,"value":541},".",{"type":46,"tag":62,"props":543,"children":544},{},[545],{"type":46,"tag":84,"props":546,"children":547},{},[548],{"type":52,"value":549},"Worked example:",{"type":46,"tag":62,"props":551,"children":552},{},[553,555],{"type":52,"value":554},"Given: ",{"type":46,"tag":68,"props":556,"children":558},{"className":557},[],[559],{"type":52,"value":560},"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FQiEF6w564ggoW8ftcLvdcu\u002FMyDesignSystem?node-id=4185-3778",{"type":46,"tag":128,"props":562,"children":563},{},[564,580],{"type":46,"tag":132,"props":565,"children":566},{},[567,572,574],{"type":46,"tag":68,"props":568,"children":570},{"className":569},[],[571],{"type":52,"value":366},{"type":52,"value":573}," = ",{"type":46,"tag":68,"props":575,"children":577},{"className":576},[],[578],{"type":52,"value":579},"QiEF6w564ggoW8ftcLvdcu",{"type":46,"tag":132,"props":581,"children":582},{},[583,588,589,595,596],{"type":46,"tag":68,"props":584,"children":586},{"className":585},[],[587],{"type":52,"value":374},{"type":52,"value":573},{"type":46,"tag":68,"props":590,"children":592},{"className":591},[],[593],{"type":52,"value":594},"4185-3778",{"type":52,"value":439},{"type":46,"tag":68,"props":597,"children":599},{"className":598},[],[600],{"type":52,"value":601},"4185:3778",{"type":46,"tag":55,"props":603,"children":605},{"id":604},"step-2-discover-unmapped-components",[606],{"type":52,"value":607},"Step 2: Discover Unmapped Components",{"type":46,"tag":62,"props":609,"children":610},{},[611,613,618],{"type":52,"value":612},"The user may provide a URL pointing to a frame, instance, or variant — not necessarily a component set or standalone component. Call the MCP tool ",{"type":46,"tag":68,"props":614,"children":616},{"className":615},[],[617],{"type":52,"value":147},{"type":52,"value":619}," with:",{"type":46,"tag":128,"props":621,"children":622},{},[623,633,643],{"type":46,"tag":132,"props":624,"children":625},{},[626,631],{"type":46,"tag":68,"props":627,"children":629},{"className":628},[],[630],{"type":52,"value":366},{"type":52,"value":632}," — from Step 1",{"type":46,"tag":132,"props":634,"children":635},{},[636,641],{"type":46,"tag":68,"props":637,"children":639},{"className":638},[],[640],{"type":52,"value":374},{"type":52,"value":642}," — from Step 1 (colons format)",{"type":46,"tag":132,"props":644,"children":645},{},[646,652,653,659],{"type":46,"tag":68,"props":647,"children":649},{"className":648},[],[650],{"type":52,"value":651},"excludeMappingPrompt",{"type":52,"value":113},{"type":46,"tag":68,"props":654,"children":656},{"className":655},[],[657],{"type":52,"value":658},"true",{"type":52,"value":660}," (returns a lightweight list of unmapped components)",{"type":46,"tag":62,"props":662,"children":663},{},[664],{"type":52,"value":665},"This tool identifies published components in the selection that don't yet have Code Connect mappings.",{"type":46,"tag":62,"props":667,"children":668},{},[669],{"type":46,"tag":84,"props":670,"children":671},{},[672],{"type":52,"value":673},"Handle the response:",{"type":46,"tag":128,"props":675,"children":676},{},[677,687,697],{"type":46,"tag":132,"props":678,"children":679},{},[680,685],{"type":46,"tag":84,"props":681,"children":682},{},[683],{"type":52,"value":684},"\"No published components found in this selection\"",{"type":52,"value":686}," — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.",{"type":46,"tag":132,"props":688,"children":689},{},[690,695],{"type":46,"tag":84,"props":691,"children":692},{},[693],{"type":52,"value":694},"\"All component instances in this selection are already connected to code via Code Connect\"",{"type":52,"value":696}," — everything is already mapped. Inform the user and stop.",{"type":46,"tag":132,"props":698,"children":699},{},[700,705,707,713],{"type":46,"tag":84,"props":701,"children":702},{},[703],{"type":52,"value":704},"Normal response with component list",{"type":52,"value":706}," — extract the ",{"type":46,"tag":68,"props":708,"children":710},{"className":709},[],[711],{"type":52,"value":712},"mainComponentNodeId",{"type":52,"value":714}," for each returned component. Use these resolved node IDs (not the original from the URL) for all subsequent steps. If multiple components are returned (e.g. the user selected a frame containing several different component instances), repeat Steps 3–6 for each one.",{"type":46,"tag":55,"props":716,"children":718},{"id":717},"step-3-fetch-component-properties",[719],{"type":52,"value":720},"Step 3: Fetch Component Properties",{"type":46,"tag":62,"props":722,"children":723},{},[724,726,732],{"type":52,"value":725},"Call the MCP tool ",{"type":46,"tag":68,"props":727,"children":729},{"className":728},[],[730],{"type":52,"value":731},"get_context_for_code_connect",{"type":52,"value":619},{"type":46,"tag":128,"props":734,"children":735},{},[736,745,762,804],{"type":46,"tag":132,"props":737,"children":738},{},[739,744],{"type":46,"tag":68,"props":740,"children":742},{"className":741},[],[743],{"type":52,"value":366},{"type":52,"value":632},{"type":46,"tag":132,"props":746,"children":747},{},[748,753,755,760],{"type":46,"tag":68,"props":749,"children":751},{"className":750},[],[752],{"type":52,"value":374},{"type":52,"value":754}," — the resolved ",{"type":46,"tag":68,"props":756,"children":758},{"className":757},[],[759],{"type":52,"value":712},{"type":52,"value":761}," from Step 2",{"type":46,"tag":132,"props":763,"children":764},{},[765,771,773,779,781,787,789,795,796,802],{"type":46,"tag":68,"props":766,"children":768},{"className":767},[],[769],{"type":52,"value":770},"clientFrameworks",{"type":52,"value":772}," — determine from ",{"type":46,"tag":68,"props":774,"children":776},{"className":775},[],[777],{"type":52,"value":778},"figma.config.json",{"type":52,"value":780}," ",{"type":46,"tag":68,"props":782,"children":784},{"className":783},[],[785],{"type":52,"value":786},"parser",{"type":52,"value":788}," field (e.g. ",{"type":46,"tag":68,"props":790,"children":792},{"className":791},[],[793],{"type":52,"value":794},"\"react\"",{"type":52,"value":439},{"type":46,"tag":68,"props":797,"children":799},{"className":798},[],[800],{"type":52,"value":801},"[\"react\"]",{"type":52,"value":803},")",{"type":46,"tag":132,"props":805,"children":806},{},[807,813,815,821,823,829],{"type":46,"tag":68,"props":808,"children":810},{"className":809},[],[811],{"type":52,"value":812},"clientLanguages",{"type":52,"value":814}," — infer from project file extensions (e.g. TypeScript project → ",{"type":46,"tag":68,"props":816,"children":818},{"className":817},[],[819],{"type":52,"value":820},"[\"typescript\"]",{"type":52,"value":822},", JavaScript → ",{"type":46,"tag":68,"props":824,"children":826},{"className":825},[],[827],{"type":52,"value":828},"[\"javascript\"]",{"type":52,"value":803},{"type":46,"tag":62,"props":831,"children":832},{},[833],{"type":52,"value":834},"For multiple components, call the tool once per node ID.",{"type":46,"tag":62,"props":836,"children":837},{},[838,840,845],{"type":52,"value":839},"The response contains the Figma component's ",{"type":46,"tag":84,"props":841,"children":842},{},[843],{"type":52,"value":844},"property definitions",{"type":52,"value":846}," — note each property's name and type:",{"type":46,"tag":128,"props":848,"children":849},{},[850,860,870,880,890],{"type":46,"tag":132,"props":851,"children":852},{},[853,858],{"type":46,"tag":84,"props":854,"children":855},{},[856],{"type":52,"value":857},"TEXT",{"type":52,"value":859}," — text content (labels, titles, placeholders)",{"type":46,"tag":132,"props":861,"children":862},{},[863,868],{"type":46,"tag":84,"props":864,"children":865},{},[866],{"type":52,"value":867},"BOOLEAN",{"type":52,"value":869}," — toggles (show\u002Fhide icon, disabled state)",{"type":46,"tag":132,"props":871,"children":872},{},[873,878],{"type":46,"tag":84,"props":874,"children":875},{},[876],{"type":52,"value":877},"VARIANT",{"type":52,"value":879}," — enum options (size, variant, state)",{"type":46,"tag":132,"props":881,"children":882},{},[883,888],{"type":46,"tag":84,"props":884,"children":885},{},[886],{"type":52,"value":887},"INSTANCE_SWAP",{"type":52,"value":889}," — swappable nested instances tied to a specific component (icon, avatar)",{"type":46,"tag":132,"props":891,"children":892},{},[893,898,900,906],{"type":46,"tag":84,"props":894,"children":895},{},[896],{"type":52,"value":897},"SLOT",{"type":52,"value":899}," — flexible content regions (freeform layout, mixed children); use ",{"type":46,"tag":68,"props":901,"children":903},{"className":902},[],[904],{"type":52,"value":905},"getSlot()",{"type":52,"value":907}," in templates (not the same as INSTANCE_SWAP)",{"type":46,"tag":62,"props":909,"children":910},{},[911],{"type":52,"value":912},"Save this property list — you will use it in Step 5 to write the template.",{"type":46,"tag":55,"props":914,"children":916},{"id":915},"step-4-identify-the-code-component",[917],{"type":52,"value":918},"Step 4: Identify the Code Component",{"type":46,"tag":62,"props":920,"children":921},{},[922],{"type":52,"value":923},"If the user did not specify which code component to connect:",{"type":46,"tag":925,"props":926,"children":927},"ol",{},[928,955,997,1002,1007],{"type":46,"tag":132,"props":929,"children":930},{},[931,933,938,940,946,947,953],{"type":52,"value":932},"Check ",{"type":46,"tag":68,"props":934,"children":936},{"className":935},[],[937],{"type":52,"value":778},{"type":52,"value":939}," for ",{"type":46,"tag":68,"props":941,"children":943},{"className":942},[],[944],{"type":52,"value":945},"paths",{"type":52,"value":368},{"type":46,"tag":68,"props":948,"children":950},{"className":949},[],[951],{"type":52,"value":952},"importPaths",{"type":52,"value":954}," to find where components live",{"type":46,"tag":132,"props":956,"children":957},{},[958,960,966,968,974,975,981,982,988,990,995],{"type":52,"value":959},"Search the codebase for a component matching the Figma component name. Check common directories (",{"type":46,"tag":68,"props":961,"children":963},{"className":962},[],[964],{"type":52,"value":965},"src\u002Fcomponents\u002F",{"type":52,"value":967},", ",{"type":46,"tag":68,"props":969,"children":971},{"className":970},[],[972],{"type":52,"value":973},"components\u002F",{"type":52,"value":967},{"type":46,"tag":68,"props":976,"children":978},{"className":977},[],[979],{"type":52,"value":980},"lib\u002Fui\u002F",{"type":52,"value":967},{"type":46,"tag":68,"props":983,"children":985},{"className":984},[],[986],{"type":52,"value":987},"app\u002Fcomponents\u002F",{"type":52,"value":989},") if ",{"type":46,"tag":68,"props":991,"children":993},{"className":992},[],[994],{"type":52,"value":778},{"type":52,"value":996}," doesn't specify paths",{"type":46,"tag":132,"props":998,"children":999},{},[1000],{"type":52,"value":1001},"Read candidate files and compare their props interface against the Figma properties from Step 3 — look for matching variant types, size options, boolean flags, and slot props",{"type":46,"tag":132,"props":1003,"children":1004},{},[1005],{"type":52,"value":1006},"If multiple candidates match, pick the one with the closest prop-interface match and explain your reasoning to the user",{"type":46,"tag":132,"props":1008,"children":1009},{},[1010],{"type":52,"value":1011},"If no match is found, show the 2 closest candidates and ask the user to confirm or provide the correct path",{"type":46,"tag":62,"props":1013,"children":1014},{},[1015,1020],{"type":46,"tag":84,"props":1016,"children":1017},{},[1018],{"type":52,"value":1019},"Confirm with the user",{"type":52,"value":1021}," before proceeding to Step 5. Present the match: which code component you found, where it lives, and why it matches (prop correspondence, naming, purpose).",{"type":46,"tag":62,"props":1023,"children":1024},{},[1025,1027,1032,1034,1039,1041,1046],{"type":52,"value":1026},"Read ",{"type":46,"tag":68,"props":1028,"children":1030},{"className":1029},[],[1031],{"type":52,"value":778},{"type":52,"value":1033}," for import path aliases — the ",{"type":46,"tag":68,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":52,"value":952},{"type":52,"value":1040}," section maps glob patterns to import specifiers, and the ",{"type":46,"tag":68,"props":1042,"children":1044},{"className":1043},[],[1045],{"type":52,"value":945},{"type":52,"value":1047}," section maps those specifiers to directories.",{"type":46,"tag":62,"props":1049,"children":1050},{},[1051],{"type":52,"value":1052},"Read the code component's source to understand its props interface — this informs how to map Figma properties to code props in Step 5.",{"type":46,"tag":55,"props":1054,"children":1056},{"id":1055},"step-5-create-the-template-file-figmats",[1057],{"type":52,"value":1058},"Step 5: Create the Template File (.figma.ts)",{"type":46,"tag":1060,"props":1061,"children":1063},"h3",{"id":1062},"file-location",[1064],{"type":52,"value":1065},"File location",{"type":46,"tag":62,"props":1067,"children":1068},{},[1069,1071,1076,1078,1083,1085,1090,1091,1097,1099,1105],{"type":52,"value":1070},"Place the file alongside existing Code Connect templates (",{"type":46,"tag":68,"props":1072,"children":1074},{"className":1073},[],[1075],{"type":52,"value":96},{"type":52,"value":1077}," or ",{"type":46,"tag":68,"props":1079,"children":1081},{"className":1080},[],[1082],{"type":52,"value":73},{"type":52,"value":1084}," files). Check ",{"type":46,"tag":68,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":52,"value":778},{"type":52,"value":780},{"type":46,"tag":68,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":52,"value":1096},"include",{"type":52,"value":1098}," patterns for the correct directory. Name it ",{"type":46,"tag":68,"props":1100,"children":1102},{"className":1101},[],[1103],{"type":52,"value":1104},"ComponentName.figma.ts",{"type":52,"value":541},{"type":46,"tag":1060,"props":1107,"children":1109},{"id":1108},"template-structure",[1110],{"type":52,"value":1111},"Template structure",{"type":46,"tag":62,"props":1113,"children":1114},{},[1115],{"type":52,"value":1116},"Every template file follows this structure:",{"type":46,"tag":235,"props":1118,"children":1122},{"className":1119,"code":1120,"language":1121,"meta":240,"style":240},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F url=https:\u002F\u002Fwww.figma.com\u002Ffile\u002F{fileKey}\u002F{fileName}?node-id={nodeId}\n\u002F\u002F source={path to code component from Step 4}\n\u002F\u002F component={code component name from Step 4}\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\n\u002F\u002F Extract properties from the Figma component (see property mapping below)\n\u002F\u002F ...\n\nexport default {\n  example: figma.code`\u003CComponent ... \u002F>`,       \u002F\u002F Required: code snippet\n  imports: ['import { Component } from \"...\"'], \u002F\u002F Optional: import statements\n  id: 'component-name',                         \u002F\u002F Required: unique identifier\n  metadata: {                                    \u002F\u002F Optional\n    nestable: true,                              \u002F\u002F true = inline in parent, false = show as pill\n    props: {}                                    \u002F\u002F data accessible to parent templates\n  }\n}\n","ts",[1123],{"type":46,"tag":68,"props":1124,"children":1125},{"__ignoreMap":240},[1126,1135,1143,1151,1185,1217,1227,1236,1245,1253,1271,1322,1367,1402,1425,1453,1476,1484],{"type":46,"tag":246,"props":1127,"children":1128},{"class":248,"line":249},[1129],{"type":46,"tag":246,"props":1130,"children":1132},{"style":1131},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1133],{"type":52,"value":1134},"\u002F\u002F url=https:\u002F\u002Fwww.figma.com\u002Ffile\u002F{fileKey}\u002F{fileName}?node-id={nodeId}\n",{"type":46,"tag":246,"props":1136,"children":1137},{"class":248,"line":259},[1138],{"type":46,"tag":246,"props":1139,"children":1140},{"style":1131},[1141],{"type":52,"value":1142},"\u002F\u002F source={path to code component from Step 4}\n",{"type":46,"tag":246,"props":1144,"children":1145},{"class":248,"line":289},[1146],{"type":46,"tag":246,"props":1147,"children":1148},{"style":1131},[1149],{"type":52,"value":1150},"\u002F\u002F component={code component name from Step 4}\n",{"type":46,"tag":246,"props":1152,"children":1153},{"class":248,"line":334},[1154,1160,1166,1171,1176,1180],{"type":46,"tag":246,"props":1155,"children":1157},{"style":1156},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1158],{"type":52,"value":1159},"import",{"type":46,"tag":246,"props":1161,"children":1163},{"style":1162},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1164],{"type":52,"value":1165}," figma ",{"type":46,"tag":246,"props":1167,"children":1168},{"style":1156},[1169],{"type":52,"value":1170},"from",{"type":46,"tag":246,"props":1172,"children":1173},{"style":253},[1174],{"type":52,"value":1175}," '",{"type":46,"tag":246,"props":1177,"children":1178},{"style":320},[1179],{"type":52,"value":24},{"type":46,"tag":246,"props":1181,"children":1182},{"style":253},[1183],{"type":52,"value":1184},"'\n",{"type":46,"tag":246,"props":1186,"children":1187},{"class":248,"line":343},[1188,1193,1198,1203,1208,1212],{"type":46,"tag":246,"props":1189,"children":1190},{"style":268},[1191],{"type":52,"value":1192},"const",{"type":46,"tag":246,"props":1194,"children":1195},{"style":1162},[1196],{"type":52,"value":1197}," instance ",{"type":46,"tag":246,"props":1199,"children":1200},{"style":253},[1201],{"type":52,"value":1202},"=",{"type":46,"tag":246,"props":1204,"children":1205},{"style":1162},[1206],{"type":52,"value":1207}," figma",{"type":46,"tag":246,"props":1209,"children":1210},{"style":253},[1211],{"type":52,"value":541},{"type":46,"tag":246,"props":1213,"children":1214},{"style":1162},[1215],{"type":52,"value":1216},"selectedInstance\n",{"type":46,"tag":246,"props":1218,"children":1220},{"class":248,"line":1219},6,[1221],{"type":46,"tag":246,"props":1222,"children":1224},{"emptyLinePlaceholder":1223},true,[1225],{"type":52,"value":1226},"\n",{"type":46,"tag":246,"props":1228,"children":1230},{"class":248,"line":1229},7,[1231],{"type":46,"tag":246,"props":1232,"children":1233},{"style":1131},[1234],{"type":52,"value":1235},"\u002F\u002F Extract properties from the Figma component (see property mapping below)\n",{"type":46,"tag":246,"props":1237,"children":1239},{"class":248,"line":1238},8,[1240],{"type":46,"tag":246,"props":1241,"children":1242},{"style":1131},[1243],{"type":52,"value":1244},"\u002F\u002F ...\n",{"type":46,"tag":246,"props":1246,"children":1248},{"class":248,"line":1247},9,[1249],{"type":46,"tag":246,"props":1250,"children":1251},{"emptyLinePlaceholder":1223},[1252],{"type":52,"value":1226},{"type":46,"tag":246,"props":1254,"children":1256},{"class":248,"line":1255},10,[1257,1262,1267],{"type":46,"tag":246,"props":1258,"children":1259},{"style":1156},[1260],{"type":52,"value":1261},"export",{"type":46,"tag":246,"props":1263,"children":1264},{"style":1156},[1265],{"type":52,"value":1266}," default",{"type":46,"tag":246,"props":1268,"children":1269},{"style":253},[1270],{"type":52,"value":286},{"type":46,"tag":246,"props":1272,"children":1274},{"class":248,"line":1273},11,[1275,1281,1285,1289,1293,1298,1303,1308,1312,1317],{"type":46,"tag":246,"props":1276,"children":1278},{"style":1277},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1279],{"type":52,"value":1280},"  example",{"type":46,"tag":246,"props":1282,"children":1283},{"style":253},[1284],{"type":52,"value":281},{"type":46,"tag":246,"props":1286,"children":1287},{"style":1162},[1288],{"type":52,"value":1207},{"type":46,"tag":246,"props":1290,"children":1291},{"style":253},[1292],{"type":52,"value":541},{"type":46,"tag":246,"props":1294,"children":1296},{"style":1295},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1297],{"type":52,"value":68},{"type":46,"tag":246,"props":1299,"children":1300},{"style":253},[1301],{"type":52,"value":1302},"`",{"type":46,"tag":246,"props":1304,"children":1305},{"style":320},[1306],{"type":52,"value":1307},"\u003CComponent ... \u002F>",{"type":46,"tag":246,"props":1309,"children":1310},{"style":253},[1311],{"type":52,"value":1302},{"type":46,"tag":246,"props":1313,"children":1314},{"style":253},[1315],{"type":52,"value":1316},",",{"type":46,"tag":246,"props":1318,"children":1319},{"style":1131},[1320],{"type":52,"value":1321},"       \u002F\u002F Required: code snippet\n",{"type":46,"tag":246,"props":1323,"children":1325},{"class":248,"line":1324},12,[1326,1331,1335,1339,1344,1349,1353,1358,1362],{"type":46,"tag":246,"props":1327,"children":1328},{"style":1277},[1329],{"type":52,"value":1330},"  imports",{"type":46,"tag":246,"props":1332,"children":1333},{"style":253},[1334],{"type":52,"value":281},{"type":46,"tag":246,"props":1336,"children":1337},{"style":1162},[1338],{"type":52,"value":313},{"type":46,"tag":246,"props":1340,"children":1341},{"style":253},[1342],{"type":52,"value":1343},"'",{"type":46,"tag":246,"props":1345,"children":1346},{"style":320},[1347],{"type":52,"value":1348},"import { Component } from \"...\"",{"type":46,"tag":246,"props":1350,"children":1351},{"style":253},[1352],{"type":52,"value":1343},{"type":46,"tag":246,"props":1354,"children":1355},{"style":1162},[1356],{"type":52,"value":1357},"]",{"type":46,"tag":246,"props":1359,"children":1360},{"style":253},[1361],{"type":52,"value":1316},{"type":46,"tag":246,"props":1363,"children":1364},{"style":1131},[1365],{"type":52,"value":1366}," \u002F\u002F Optional: import statements\n",{"type":46,"tag":246,"props":1368,"children":1370},{"class":248,"line":1369},13,[1371,1376,1380,1384,1389,1393,1397],{"type":46,"tag":246,"props":1372,"children":1373},{"style":1277},[1374],{"type":52,"value":1375},"  id",{"type":46,"tag":246,"props":1377,"children":1378},{"style":253},[1379],{"type":52,"value":281},{"type":46,"tag":246,"props":1381,"children":1382},{"style":253},[1383],{"type":52,"value":1175},{"type":46,"tag":246,"props":1385,"children":1386},{"style":320},[1387],{"type":52,"value":1388},"component-name",{"type":46,"tag":246,"props":1390,"children":1391},{"style":253},[1392],{"type":52,"value":1343},{"type":46,"tag":246,"props":1394,"children":1395},{"style":253},[1396],{"type":52,"value":1316},{"type":46,"tag":246,"props":1398,"children":1399},{"style":1131},[1400],{"type":52,"value":1401},"                         \u002F\u002F Required: unique identifier\n",{"type":46,"tag":246,"props":1403,"children":1405},{"class":248,"line":1404},14,[1406,1411,1415,1420],{"type":46,"tag":246,"props":1407,"children":1408},{"style":1277},[1409],{"type":52,"value":1410},"  metadata",{"type":46,"tag":246,"props":1412,"children":1413},{"style":253},[1414],{"type":52,"value":281},{"type":46,"tag":246,"props":1416,"children":1417},{"style":253},[1418],{"type":52,"value":1419}," {",{"type":46,"tag":246,"props":1421,"children":1422},{"style":1131},[1423],{"type":52,"value":1424},"                                    \u002F\u002F Optional\n",{"type":46,"tag":246,"props":1426,"children":1428},{"class":248,"line":1427},15,[1429,1434,1438,1444,1448],{"type":46,"tag":246,"props":1430,"children":1431},{"style":1277},[1432],{"type":52,"value":1433},"    nestable",{"type":46,"tag":246,"props":1435,"children":1436},{"style":253},[1437],{"type":52,"value":281},{"type":46,"tag":246,"props":1439,"children":1441},{"style":1440},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1442],{"type":52,"value":1443}," true",{"type":46,"tag":246,"props":1445,"children":1446},{"style":253},[1447],{"type":52,"value":1316},{"type":46,"tag":246,"props":1449,"children":1450},{"style":1131},[1451],{"type":52,"value":1452},"                              \u002F\u002F true = inline in parent, false = show as pill\n",{"type":46,"tag":246,"props":1454,"children":1456},{"class":248,"line":1455},16,[1457,1462,1466,1471],{"type":46,"tag":246,"props":1458,"children":1459},{"style":1277},[1460],{"type":52,"value":1461},"    props",{"type":46,"tag":246,"props":1463,"children":1464},{"style":253},[1465],{"type":52,"value":281},{"type":46,"tag":246,"props":1467,"children":1468},{"style":253},[1469],{"type":52,"value":1470}," {}",{"type":46,"tag":246,"props":1472,"children":1473},{"style":1131},[1474],{"type":52,"value":1475},"                                    \u002F\u002F data accessible to parent templates\n",{"type":46,"tag":246,"props":1477,"children":1479},{"class":248,"line":1478},17,[1480],{"type":46,"tag":246,"props":1481,"children":1482},{"style":253},[1483],{"type":52,"value":340},{"type":46,"tag":246,"props":1485,"children":1487},{"class":248,"line":1486},18,[1488],{"type":46,"tag":246,"props":1489,"children":1490},{"style":253},[1491],{"type":52,"value":349},{"type":46,"tag":1060,"props":1493,"children":1495},{"id":1494},"property-mapping",[1496],{"type":52,"value":1497},"Property mapping",{"type":46,"tag":62,"props":1499,"children":1500},{},[1501],{"type":52,"value":1502},"Use the property list from Step 3 to extract values. For each Figma property type, use the corresponding method:",{"type":46,"tag":378,"props":1504,"children":1505},{},[1506,1527],{"type":46,"tag":382,"props":1507,"children":1508},{},[1509],{"type":46,"tag":386,"props":1510,"children":1511},{},[1512,1517,1522],{"type":46,"tag":390,"props":1513,"children":1514},{},[1515],{"type":52,"value":1516},"Figma Property Type",{"type":46,"tag":390,"props":1518,"children":1519},{},[1520],{"type":52,"value":1521},"Template Method",{"type":46,"tag":390,"props":1523,"children":1524},{},[1525],{"type":52,"value":1526},"When to Use",{"type":46,"tag":404,"props":1528,"children":1529},{},[1530,1551,1572,1593,1630,1655,1677],{"type":46,"tag":386,"props":1531,"children":1532},{},[1533,1537,1546],{"type":46,"tag":411,"props":1534,"children":1535},{},[1536],{"type":52,"value":857},{"type":46,"tag":411,"props":1538,"children":1539},{},[1540],{"type":46,"tag":68,"props":1541,"children":1543},{"className":1542},[],[1544],{"type":52,"value":1545},"instance.getString('Name')",{"type":46,"tag":411,"props":1547,"children":1548},{},[1549],{"type":52,"value":1550},"Labels, titles, placeholder text",{"type":46,"tag":386,"props":1552,"children":1553},{},[1554,1558,1567],{"type":46,"tag":411,"props":1555,"children":1556},{},[1557],{"type":52,"value":867},{"type":46,"tag":411,"props":1559,"children":1560},{},[1561],{"type":46,"tag":68,"props":1562,"children":1564},{"className":1563},[],[1565],{"type":52,"value":1566},"instance.getBoolean('Name', { true: ..., false: ... })",{"type":46,"tag":411,"props":1568,"children":1569},{},[1570],{"type":52,"value":1571},"Toggle visibility, conditional props",{"type":46,"tag":386,"props":1573,"children":1574},{},[1575,1579,1588],{"type":46,"tag":411,"props":1576,"children":1577},{},[1578],{"type":52,"value":877},{"type":46,"tag":411,"props":1580,"children":1581},{},[1582],{"type":46,"tag":68,"props":1583,"children":1585},{"className":1584},[],[1586],{"type":52,"value":1587},"instance.getEnum('Name', { 'FigmaVal': 'codeVal' })",{"type":46,"tag":411,"props":1589,"children":1590},{},[1591],{"type":52,"value":1592},"Size, variant, state enums",{"type":46,"tag":386,"props":1594,"children":1595},{},[1596,1600,1609],{"type":46,"tag":411,"props":1597,"children":1598},{},[1599],{"type":52,"value":887},{"type":46,"tag":411,"props":1601,"children":1602},{},[1603],{"type":46,"tag":68,"props":1604,"children":1606},{"className":1605},[],[1607],{"type":52,"value":1608},"instance.getInstanceSwap('Name')",{"type":46,"tag":411,"props":1610,"children":1611},{},[1612,1614,1620,1622,1628],{"type":52,"value":1613},"Swapped instance for a fixed component slot (then ",{"type":46,"tag":68,"props":1615,"children":1617},{"className":1616},[],[1618],{"type":52,"value":1619},"hasCodeConnect()",{"type":52,"value":1621}," \u002F ",{"type":46,"tag":68,"props":1623,"children":1625},{"className":1624},[],[1626],{"type":52,"value":1627},"executeTemplate()",{"type":52,"value":1629},") - do not confuse with the SLOT property below",{"type":46,"tag":386,"props":1631,"children":1632},{},[1633,1637,1646],{"type":46,"tag":411,"props":1634,"children":1635},{},[1636],{"type":52,"value":897},{"type":46,"tag":411,"props":1638,"children":1639},{},[1640],{"type":46,"tag":68,"props":1641,"children":1643},{"className":1642},[],[1644],{"type":52,"value":1645},"instance.getSlot('Name')",{"type":46,"tag":411,"props":1647,"children":1648},{},[1649,1651],{"type":52,"value":1650},"Freeform slot content only when the Figma property type is ",{"type":46,"tag":84,"props":1652,"children":1653},{},[1654],{"type":52,"value":897},{"type":46,"tag":386,"props":1656,"children":1657},{},[1658,1663,1672],{"type":46,"tag":411,"props":1659,"children":1660},{},[1661],{"type":52,"value":1662},"(child layer)",{"type":46,"tag":411,"props":1664,"children":1665},{},[1666],{"type":46,"tag":68,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":52,"value":1671},"instance.findInstance('LayerName')",{"type":46,"tag":411,"props":1673,"children":1674},{},[1675],{"type":52,"value":1676},"Named child instances without a property",{"type":46,"tag":386,"props":1678,"children":1679},{},[1680,1685,1701],{"type":46,"tag":411,"props":1681,"children":1682},{},[1683],{"type":52,"value":1684},"(text layer)",{"type":46,"tag":411,"props":1686,"children":1687},{},[1688,1694,1695],{"type":46,"tag":68,"props":1689,"children":1691},{"className":1690},[],[1692],{"type":52,"value":1693},"instance.findText('LayerName')",{"type":52,"value":439},{"type":46,"tag":68,"props":1696,"children":1698},{"className":1697},[],[1699],{"type":52,"value":1700},".textContent",{"type":46,"tag":411,"props":1702,"children":1703},{},[1704],{"type":52,"value":1705},"Text content from named layers",{"type":46,"tag":62,"props":1707,"children":1708},{},[1709,1713],{"type":46,"tag":84,"props":1710,"children":1711},{},[1712],{"type":52,"value":857},{"type":52,"value":1714}," — get the string value directly:",{"type":46,"tag":235,"props":1716,"children":1718},{"className":1119,"code":1717,"language":1121,"meta":240,"style":240},"const label = instance.getString('Label')\n",[1719],{"type":46,"tag":68,"props":1720,"children":1721},{"__ignoreMap":240},[1722],{"type":46,"tag":246,"props":1723,"children":1724},{"class":248,"line":249},[1725,1729,1734,1738,1743,1747,1752,1757,1761,1766,1770],{"type":46,"tag":246,"props":1726,"children":1727},{"style":268},[1728],{"type":52,"value":1192},{"type":46,"tag":246,"props":1730,"children":1731},{"style":1162},[1732],{"type":52,"value":1733}," label ",{"type":46,"tag":246,"props":1735,"children":1736},{"style":253},[1737],{"type":52,"value":1202},{"type":46,"tag":246,"props":1739,"children":1740},{"style":1162},[1741],{"type":52,"value":1742}," instance",{"type":46,"tag":246,"props":1744,"children":1745},{"style":253},[1746],{"type":52,"value":541},{"type":46,"tag":246,"props":1748,"children":1749},{"style":1295},[1750],{"type":52,"value":1751},"getString",{"type":46,"tag":246,"props":1753,"children":1754},{"style":1162},[1755],{"type":52,"value":1756},"(",{"type":46,"tag":246,"props":1758,"children":1759},{"style":253},[1760],{"type":52,"value":1343},{"type":46,"tag":246,"props":1762,"children":1763},{"style":320},[1764],{"type":52,"value":1765},"Label",{"type":46,"tag":246,"props":1767,"children":1768},{"style":253},[1769],{"type":52,"value":1343},{"type":46,"tag":246,"props":1771,"children":1772},{"style":1162},[1773],{"type":52,"value":1774},")\n",{"type":46,"tag":62,"props":1776,"children":1777},{},[1778,1782],{"type":46,"tag":84,"props":1779,"children":1780},{},[1781],{"type":52,"value":877},{"type":52,"value":1783}," — map Figma enum values to code values:",{"type":46,"tag":235,"props":1785,"children":1787},{"className":1119,"code":1786,"language":1121,"meta":240,"style":240},"const variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\n\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\n",[1788],{"type":46,"tag":68,"props":1789,"children":1790},{"__ignoreMap":240},[1791,1845,1884,1921,1933,1940,1993,2030,2067,2104],{"type":46,"tag":246,"props":1792,"children":1793},{"class":248,"line":249},[1794,1798,1803,1807,1811,1815,1820,1824,1828,1833,1837,1841],{"type":46,"tag":246,"props":1795,"children":1796},{"style":268},[1797],{"type":52,"value":1192},{"type":46,"tag":246,"props":1799,"children":1800},{"style":1162},[1801],{"type":52,"value":1802}," variant ",{"type":46,"tag":246,"props":1804,"children":1805},{"style":253},[1806],{"type":52,"value":1202},{"type":46,"tag":246,"props":1808,"children":1809},{"style":1162},[1810],{"type":52,"value":1742},{"type":46,"tag":246,"props":1812,"children":1813},{"style":253},[1814],{"type":52,"value":541},{"type":46,"tag":246,"props":1816,"children":1817},{"style":1295},[1818],{"type":52,"value":1819},"getEnum",{"type":46,"tag":246,"props":1821,"children":1822},{"style":1162},[1823],{"type":52,"value":1756},{"type":46,"tag":246,"props":1825,"children":1826},{"style":253},[1827],{"type":52,"value":1343},{"type":46,"tag":246,"props":1829,"children":1830},{"style":320},[1831],{"type":52,"value":1832},"Variant",{"type":46,"tag":246,"props":1834,"children":1835},{"style":253},[1836],{"type":52,"value":1343},{"type":46,"tag":246,"props":1838,"children":1839},{"style":253},[1840],{"type":52,"value":1316},{"type":46,"tag":246,"props":1842,"children":1843},{"style":253},[1844],{"type":52,"value":286},{"type":46,"tag":246,"props":1846,"children":1847},{"class":248,"line":259},[1848,1853,1858,1862,1866,1870,1875,1879],{"type":46,"tag":246,"props":1849,"children":1850},{"style":253},[1851],{"type":52,"value":1852},"  '",{"type":46,"tag":246,"props":1854,"children":1855},{"style":1277},[1856],{"type":52,"value":1857},"Primary",{"type":46,"tag":246,"props":1859,"children":1860},{"style":253},[1861],{"type":52,"value":1343},{"type":46,"tag":246,"props":1863,"children":1864},{"style":253},[1865],{"type":52,"value":281},{"type":46,"tag":246,"props":1867,"children":1868},{"style":253},[1869],{"type":52,"value":1175},{"type":46,"tag":246,"props":1871,"children":1872},{"style":320},[1873],{"type":52,"value":1874},"primary",{"type":46,"tag":246,"props":1876,"children":1877},{"style":253},[1878],{"type":52,"value":1343},{"type":46,"tag":246,"props":1880,"children":1881},{"style":253},[1882],{"type":52,"value":1883},",\n",{"type":46,"tag":246,"props":1885,"children":1886},{"class":248,"line":289},[1887,1891,1896,1900,1904,1908,1913,1917],{"type":46,"tag":246,"props":1888,"children":1889},{"style":253},[1890],{"type":52,"value":1852},{"type":46,"tag":246,"props":1892,"children":1893},{"style":1277},[1894],{"type":52,"value":1895},"Secondary",{"type":46,"tag":246,"props":1897,"children":1898},{"style":253},[1899],{"type":52,"value":1343},{"type":46,"tag":246,"props":1901,"children":1902},{"style":253},[1903],{"type":52,"value":281},{"type":46,"tag":246,"props":1905,"children":1906},{"style":253},[1907],{"type":52,"value":1175},{"type":46,"tag":246,"props":1909,"children":1910},{"style":320},[1911],{"type":52,"value":1912},"secondary",{"type":46,"tag":246,"props":1914,"children":1915},{"style":253},[1916],{"type":52,"value":1343},{"type":46,"tag":246,"props":1918,"children":1919},{"style":253},[1920],{"type":52,"value":1883},{"type":46,"tag":246,"props":1922,"children":1923},{"class":248,"line":334},[1924,1929],{"type":46,"tag":246,"props":1925,"children":1926},{"style":253},[1927],{"type":52,"value":1928},"}",{"type":46,"tag":246,"props":1930,"children":1931},{"style":1162},[1932],{"type":52,"value":1774},{"type":46,"tag":246,"props":1934,"children":1935},{"class":248,"line":343},[1936],{"type":46,"tag":246,"props":1937,"children":1938},{"emptyLinePlaceholder":1223},[1939],{"type":52,"value":1226},{"type":46,"tag":246,"props":1941,"children":1942},{"class":248,"line":1219},[1943,1947,1952,1956,1960,1964,1968,1972,1976,1981,1985,1989],{"type":46,"tag":246,"props":1944,"children":1945},{"style":268},[1946],{"type":52,"value":1192},{"type":46,"tag":246,"props":1948,"children":1949},{"style":1162},[1950],{"type":52,"value":1951}," size ",{"type":46,"tag":246,"props":1953,"children":1954},{"style":253},[1955],{"type":52,"value":1202},{"type":46,"tag":246,"props":1957,"children":1958},{"style":1162},[1959],{"type":52,"value":1742},{"type":46,"tag":246,"props":1961,"children":1962},{"style":253},[1963],{"type":52,"value":541},{"type":46,"tag":246,"props":1965,"children":1966},{"style":1295},[1967],{"type":52,"value":1819},{"type":46,"tag":246,"props":1969,"children":1970},{"style":1162},[1971],{"type":52,"value":1756},{"type":46,"tag":246,"props":1973,"children":1974},{"style":253},[1975],{"type":52,"value":1343},{"type":46,"tag":246,"props":1977,"children":1978},{"style":320},[1979],{"type":52,"value":1980},"Size",{"type":46,"tag":246,"props":1982,"children":1983},{"style":253},[1984],{"type":52,"value":1343},{"type":46,"tag":246,"props":1986,"children":1987},{"style":253},[1988],{"type":52,"value":1316},{"type":46,"tag":246,"props":1990,"children":1991},{"style":253},[1992],{"type":52,"value":286},{"type":46,"tag":246,"props":1994,"children":1995},{"class":248,"line":1229},[1996,2000,2005,2009,2013,2017,2022,2026],{"type":46,"tag":246,"props":1997,"children":1998},{"style":253},[1999],{"type":52,"value":1852},{"type":46,"tag":246,"props":2001,"children":2002},{"style":1277},[2003],{"type":52,"value":2004},"Small",{"type":46,"tag":246,"props":2006,"children":2007},{"style":253},[2008],{"type":52,"value":1343},{"type":46,"tag":246,"props":2010,"children":2011},{"style":253},[2012],{"type":52,"value":281},{"type":46,"tag":246,"props":2014,"children":2015},{"style":253},[2016],{"type":52,"value":1175},{"type":46,"tag":246,"props":2018,"children":2019},{"style":320},[2020],{"type":52,"value":2021},"sm",{"type":46,"tag":246,"props":2023,"children":2024},{"style":253},[2025],{"type":52,"value":1343},{"type":46,"tag":246,"props":2027,"children":2028},{"style":253},[2029],{"type":52,"value":1883},{"type":46,"tag":246,"props":2031,"children":2032},{"class":248,"line":1238},[2033,2037,2042,2046,2050,2054,2059,2063],{"type":46,"tag":246,"props":2034,"children":2035},{"style":253},[2036],{"type":52,"value":1852},{"type":46,"tag":246,"props":2038,"children":2039},{"style":1277},[2040],{"type":52,"value":2041},"Medium",{"type":46,"tag":246,"props":2043,"children":2044},{"style":253},[2045],{"type":52,"value":1343},{"type":46,"tag":246,"props":2047,"children":2048},{"style":253},[2049],{"type":52,"value":281},{"type":46,"tag":246,"props":2051,"children":2052},{"style":253},[2053],{"type":52,"value":1175},{"type":46,"tag":246,"props":2055,"children":2056},{"style":320},[2057],{"type":52,"value":2058},"md",{"type":46,"tag":246,"props":2060,"children":2061},{"style":253},[2062],{"type":52,"value":1343},{"type":46,"tag":246,"props":2064,"children":2065},{"style":253},[2066],{"type":52,"value":1883},{"type":46,"tag":246,"props":2068,"children":2069},{"class":248,"line":1247},[2070,2074,2079,2083,2087,2091,2096,2100],{"type":46,"tag":246,"props":2071,"children":2072},{"style":253},[2073],{"type":52,"value":1852},{"type":46,"tag":246,"props":2075,"children":2076},{"style":1277},[2077],{"type":52,"value":2078},"Large",{"type":46,"tag":246,"props":2080,"children":2081},{"style":253},[2082],{"type":52,"value":1343},{"type":46,"tag":246,"props":2084,"children":2085},{"style":253},[2086],{"type":52,"value":281},{"type":46,"tag":246,"props":2088,"children":2089},{"style":253},[2090],{"type":52,"value":1175},{"type":46,"tag":246,"props":2092,"children":2093},{"style":320},[2094],{"type":52,"value":2095},"lg",{"type":46,"tag":246,"props":2097,"children":2098},{"style":253},[2099],{"type":52,"value":1343},{"type":46,"tag":246,"props":2101,"children":2102},{"style":253},[2103],{"type":52,"value":1883},{"type":46,"tag":246,"props":2105,"children":2106},{"class":248,"line":1255},[2107,2111],{"type":46,"tag":246,"props":2108,"children":2109},{"style":253},[2110],{"type":52,"value":1928},{"type":46,"tag":246,"props":2112,"children":2113},{"style":1162},[2114],{"type":52,"value":1774},{"type":46,"tag":62,"props":2116,"children":2117},{},[2118,2122],{"type":46,"tag":84,"props":2119,"children":2120},{},[2121],{"type":52,"value":867},{"type":52,"value":2123}," — simple boolean or mapped to values:",{"type":46,"tag":235,"props":2125,"children":2127},{"className":1119,"code":2126,"language":1121,"meta":240,"style":240},"\u002F\u002F Simple boolean\nconst disabled = instance.getBoolean('Disabled')\n\n\u002F\u002F Mapped to code values (e.g. when the code prop is an enum, not a boolean)\nconst size = instance.getBoolean('Show Label', { true: 'large', false: 'small' })\n",[2128],{"type":46,"tag":68,"props":2129,"children":2130},{"__ignoreMap":240},[2131,2139,2189,2196,2204],{"type":46,"tag":246,"props":2132,"children":2133},{"class":248,"line":249},[2134],{"type":46,"tag":246,"props":2135,"children":2136},{"style":1131},[2137],{"type":52,"value":2138},"\u002F\u002F Simple boolean\n",{"type":46,"tag":246,"props":2140,"children":2141},{"class":248,"line":259},[2142,2146,2151,2155,2159,2163,2168,2172,2176,2181,2185],{"type":46,"tag":246,"props":2143,"children":2144},{"style":268},[2145],{"type":52,"value":1192},{"type":46,"tag":246,"props":2147,"children":2148},{"style":1162},[2149],{"type":52,"value":2150}," disabled ",{"type":46,"tag":246,"props":2152,"children":2153},{"style":253},[2154],{"type":52,"value":1202},{"type":46,"tag":246,"props":2156,"children":2157},{"style":1162},[2158],{"type":52,"value":1742},{"type":46,"tag":246,"props":2160,"children":2161},{"style":253},[2162],{"type":52,"value":541},{"type":46,"tag":246,"props":2164,"children":2165},{"style":1295},[2166],{"type":52,"value":2167},"getBoolean",{"type":46,"tag":246,"props":2169,"children":2170},{"style":1162},[2171],{"type":52,"value":1756},{"type":46,"tag":246,"props":2173,"children":2174},{"style":253},[2175],{"type":52,"value":1343},{"type":46,"tag":246,"props":2177,"children":2178},{"style":320},[2179],{"type":52,"value":2180},"Disabled",{"type":46,"tag":246,"props":2182,"children":2183},{"style":253},[2184],{"type":52,"value":1343},{"type":46,"tag":246,"props":2186,"children":2187},{"style":1162},[2188],{"type":52,"value":1774},{"type":46,"tag":246,"props":2190,"children":2191},{"class":248,"line":289},[2192],{"type":46,"tag":246,"props":2193,"children":2194},{"emptyLinePlaceholder":1223},[2195],{"type":52,"value":1226},{"type":46,"tag":246,"props":2197,"children":2198},{"class":248,"line":334},[2199],{"type":46,"tag":246,"props":2200,"children":2201},{"style":1131},[2202],{"type":52,"value":2203},"\u002F\u002F Mapped to code values (e.g. when the code prop is an enum, not a boolean)\n",{"type":46,"tag":246,"props":2205,"children":2206},{"class":248,"line":343},[2207,2211,2215,2219,2223,2227,2231,2235,2239,2244,2248,2252,2256,2260,2264,2268,2273,2277,2281,2286,2290,2294,2299,2303,2308],{"type":46,"tag":246,"props":2208,"children":2209},{"style":268},[2210],{"type":52,"value":1192},{"type":46,"tag":246,"props":2212,"children":2213},{"style":1162},[2214],{"type":52,"value":1951},{"type":46,"tag":246,"props":2216,"children":2217},{"style":253},[2218],{"type":52,"value":1202},{"type":46,"tag":246,"props":2220,"children":2221},{"style":1162},[2222],{"type":52,"value":1742},{"type":46,"tag":246,"props":2224,"children":2225},{"style":253},[2226],{"type":52,"value":541},{"type":46,"tag":246,"props":2228,"children":2229},{"style":1295},[2230],{"type":52,"value":2167},{"type":46,"tag":246,"props":2232,"children":2233},{"style":1162},[2234],{"type":52,"value":1756},{"type":46,"tag":246,"props":2236,"children":2237},{"style":253},[2238],{"type":52,"value":1343},{"type":46,"tag":246,"props":2240,"children":2241},{"style":320},[2242],{"type":52,"value":2243},"Show Label",{"type":46,"tag":246,"props":2245,"children":2246},{"style":253},[2247],{"type":52,"value":1343},{"type":46,"tag":246,"props":2249,"children":2250},{"style":253},[2251],{"type":52,"value":1316},{"type":46,"tag":246,"props":2253,"children":2254},{"style":253},[2255],{"type":52,"value":1419},{"type":46,"tag":246,"props":2257,"children":2258},{"style":1277},[2259],{"type":52,"value":1443},{"type":46,"tag":246,"props":2261,"children":2262},{"style":253},[2263],{"type":52,"value":281},{"type":46,"tag":246,"props":2265,"children":2266},{"style":253},[2267],{"type":52,"value":1175},{"type":46,"tag":246,"props":2269,"children":2270},{"style":320},[2271],{"type":52,"value":2272},"large",{"type":46,"tag":246,"props":2274,"children":2275},{"style":253},[2276],{"type":52,"value":1343},{"type":46,"tag":246,"props":2278,"children":2279},{"style":253},[2280],{"type":52,"value":1316},{"type":46,"tag":246,"props":2282,"children":2283},{"style":1277},[2284],{"type":52,"value":2285}," false",{"type":46,"tag":246,"props":2287,"children":2288},{"style":253},[2289],{"type":52,"value":281},{"type":46,"tag":246,"props":2291,"children":2292},{"style":253},[2293],{"type":52,"value":1175},{"type":46,"tag":246,"props":2295,"children":2296},{"style":320},[2297],{"type":52,"value":2298},"small",{"type":46,"tag":246,"props":2300,"children":2301},{"style":253},[2302],{"type":52,"value":1343},{"type":46,"tag":246,"props":2304,"children":2305},{"style":253},[2306],{"type":52,"value":2307}," }",{"type":46,"tag":246,"props":2309,"children":2310},{"style":1162},[2311],{"type":52,"value":1774},{"type":46,"tag":62,"props":2313,"children":2314},{},[2315,2320,2322,2328],{"type":46,"tag":84,"props":2316,"children":2317},{},[2318],{"type":52,"value":2319},"Map Figma properties to code props where there's a valid correspondence.",{"type":52,"value":2321}," Figma properties and code props don't always line up 1:1 — some Figma properties map directly (by name, or via the API methods above), others have no code equivalent. Where a mapping exists, use it; where none fits, omit the Figma property rather than invent a code prop. Never emit an attribute whose name doesn't appear in the code component's ",{"type":46,"tag":68,"props":2323,"children":2325},{"className":2324},[],[2326],{"type":52,"value":2327},"Props",{"type":52,"value":2329}," interface.",{"type":46,"tag":1060,"props":2331,"children":2333},{"id":2332},"exhaustive-variant-handling",[2334],{"type":52,"value":2335},"Exhaustive variant handling",{"type":46,"tag":62,"props":2337,"children":2338},{},[2339,2341,2346,2348,2353,2355,2360,2362,2368],{"type":52,"value":2340},"When a VARIANT property has multiple possible values, the ",{"type":46,"tag":68,"props":2342,"children":2344},{"className":2343},[],[2345],{"type":52,"value":1819},{"type":52,"value":2347}," mapping ",{"type":46,"tag":84,"props":2349,"children":2350},{},[2351],{"type":52,"value":2352},"must list every value",{"type":52,"value":2354}," returned by ",{"type":46,"tag":68,"props":2356,"children":2358},{"className":2357},[],[2359],{"type":52,"value":731},{"type":52,"value":2361},". Don't omit values — an unmapped value silently returns ",{"type":46,"tag":68,"props":2363,"children":2365},{"className":2364},[],[2366],{"type":52,"value":2367},"undefined",{"type":52,"value":2369},", producing broken output.",{"type":46,"tag":235,"props":2371,"children":2373},{"className":1119,"code":2372,"language":1121,"meta":240,"style":240},"\u002F\u002F WRONG — omits 'Warning', which will render as undefined\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n})\n\n\u002F\u002F CORRECT — every value is mapped\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n  'Warning': 'warning',\n  'Info': 'info',\n})\n",[2374],{"type":46,"tag":68,"props":2375,"children":2376},{"__ignoreMap":240},[2377,2385,2438,2475,2512,2523,2530,2538,2589,2624,2659,2696,2733],{"type":46,"tag":246,"props":2378,"children":2379},{"class":248,"line":249},[2380],{"type":46,"tag":246,"props":2381,"children":2382},{"style":1131},[2383],{"type":52,"value":2384},"\u002F\u002F WRONG — omits 'Warning', which will render as undefined\n",{"type":46,"tag":246,"props":2386,"children":2387},{"class":248,"line":259},[2388,2392,2397,2401,2405,2409,2413,2417,2421,2426,2430,2434],{"type":46,"tag":246,"props":2389,"children":2390},{"style":268},[2391],{"type":52,"value":1192},{"type":46,"tag":246,"props":2393,"children":2394},{"style":1162},[2395],{"type":52,"value":2396}," status ",{"type":46,"tag":246,"props":2398,"children":2399},{"style":253},[2400],{"type":52,"value":1202},{"type":46,"tag":246,"props":2402,"children":2403},{"style":1162},[2404],{"type":52,"value":1742},{"type":46,"tag":246,"props":2406,"children":2407},{"style":253},[2408],{"type":52,"value":541},{"type":46,"tag":246,"props":2410,"children":2411},{"style":1295},[2412],{"type":52,"value":1819},{"type":46,"tag":246,"props":2414,"children":2415},{"style":1162},[2416],{"type":52,"value":1756},{"type":46,"tag":246,"props":2418,"children":2419},{"style":253},[2420],{"type":52,"value":1343},{"type":46,"tag":246,"props":2422,"children":2423},{"style":320},[2424],{"type":52,"value":2425},"Status",{"type":46,"tag":246,"props":2427,"children":2428},{"style":253},[2429],{"type":52,"value":1343},{"type":46,"tag":246,"props":2431,"children":2432},{"style":253},[2433],{"type":52,"value":1316},{"type":46,"tag":246,"props":2435,"children":2436},{"style":253},[2437],{"type":52,"value":286},{"type":46,"tag":246,"props":2439,"children":2440},{"class":248,"line":289},[2441,2445,2450,2454,2458,2462,2467,2471],{"type":46,"tag":246,"props":2442,"children":2443},{"style":253},[2444],{"type":52,"value":1852},{"type":46,"tag":246,"props":2446,"children":2447},{"style":1277},[2448],{"type":52,"value":2449},"Success",{"type":46,"tag":246,"props":2451,"children":2452},{"style":253},[2453],{"type":52,"value":1343},{"type":46,"tag":246,"props":2455,"children":2456},{"style":253},[2457],{"type":52,"value":281},{"type":46,"tag":246,"props":2459,"children":2460},{"style":253},[2461],{"type":52,"value":1175},{"type":46,"tag":246,"props":2463,"children":2464},{"style":320},[2465],{"type":52,"value":2466},"success",{"type":46,"tag":246,"props":2468,"children":2469},{"style":253},[2470],{"type":52,"value":1343},{"type":46,"tag":246,"props":2472,"children":2473},{"style":253},[2474],{"type":52,"value":1883},{"type":46,"tag":246,"props":2476,"children":2477},{"class":248,"line":334},[2478,2482,2487,2491,2495,2499,2504,2508],{"type":46,"tag":246,"props":2479,"children":2480},{"style":253},[2481],{"type":52,"value":1852},{"type":46,"tag":246,"props":2483,"children":2484},{"style":1277},[2485],{"type":52,"value":2486},"Error",{"type":46,"tag":246,"props":2488,"children":2489},{"style":253},[2490],{"type":52,"value":1343},{"type":46,"tag":246,"props":2492,"children":2493},{"style":253},[2494],{"type":52,"value":281},{"type":46,"tag":246,"props":2496,"children":2497},{"style":253},[2498],{"type":52,"value":1175},{"type":46,"tag":246,"props":2500,"children":2501},{"style":320},[2502],{"type":52,"value":2503},"error",{"type":46,"tag":246,"props":2505,"children":2506},{"style":253},[2507],{"type":52,"value":1343},{"type":46,"tag":246,"props":2509,"children":2510},{"style":253},[2511],{"type":52,"value":1883},{"type":46,"tag":246,"props":2513,"children":2514},{"class":248,"line":343},[2515,2519],{"type":46,"tag":246,"props":2516,"children":2517},{"style":253},[2518],{"type":52,"value":1928},{"type":46,"tag":246,"props":2520,"children":2521},{"style":1162},[2522],{"type":52,"value":1774},{"type":46,"tag":246,"props":2524,"children":2525},{"class":248,"line":1219},[2526],{"type":46,"tag":246,"props":2527,"children":2528},{"emptyLinePlaceholder":1223},[2529],{"type":52,"value":1226},{"type":46,"tag":246,"props":2531,"children":2532},{"class":248,"line":1229},[2533],{"type":46,"tag":246,"props":2534,"children":2535},{"style":1131},[2536],{"type":52,"value":2537},"\u002F\u002F CORRECT — every value is mapped\n",{"type":46,"tag":246,"props":2539,"children":2540},{"class":248,"line":1238},[2541,2545,2549,2553,2557,2561,2565,2569,2573,2577,2581,2585],{"type":46,"tag":246,"props":2542,"children":2543},{"style":268},[2544],{"type":52,"value":1192},{"type":46,"tag":246,"props":2546,"children":2547},{"style":1162},[2548],{"type":52,"value":2396},{"type":46,"tag":246,"props":2550,"children":2551},{"style":253},[2552],{"type":52,"value":1202},{"type":46,"tag":246,"props":2554,"children":2555},{"style":1162},[2556],{"type":52,"value":1742},{"type":46,"tag":246,"props":2558,"children":2559},{"style":253},[2560],{"type":52,"value":541},{"type":46,"tag":246,"props":2562,"children":2563},{"style":1295},[2564],{"type":52,"value":1819},{"type":46,"tag":246,"props":2566,"children":2567},{"style":1162},[2568],{"type":52,"value":1756},{"type":46,"tag":246,"props":2570,"children":2571},{"style":253},[2572],{"type":52,"value":1343},{"type":46,"tag":246,"props":2574,"children":2575},{"style":320},[2576],{"type":52,"value":2425},{"type":46,"tag":246,"props":2578,"children":2579},{"style":253},[2580],{"type":52,"value":1343},{"type":46,"tag":246,"props":2582,"children":2583},{"style":253},[2584],{"type":52,"value":1316},{"type":46,"tag":246,"props":2586,"children":2587},{"style":253},[2588],{"type":52,"value":286},{"type":46,"tag":246,"props":2590,"children":2591},{"class":248,"line":1247},[2592,2596,2600,2604,2608,2612,2616,2620],{"type":46,"tag":246,"props":2593,"children":2594},{"style":253},[2595],{"type":52,"value":1852},{"type":46,"tag":246,"props":2597,"children":2598},{"style":1277},[2599],{"type":52,"value":2449},{"type":46,"tag":246,"props":2601,"children":2602},{"style":253},[2603],{"type":52,"value":1343},{"type":46,"tag":246,"props":2605,"children":2606},{"style":253},[2607],{"type":52,"value":281},{"type":46,"tag":246,"props":2609,"children":2610},{"style":253},[2611],{"type":52,"value":1175},{"type":46,"tag":246,"props":2613,"children":2614},{"style":320},[2615],{"type":52,"value":2466},{"type":46,"tag":246,"props":2617,"children":2618},{"style":253},[2619],{"type":52,"value":1343},{"type":46,"tag":246,"props":2621,"children":2622},{"style":253},[2623],{"type":52,"value":1883},{"type":46,"tag":246,"props":2625,"children":2626},{"class":248,"line":1255},[2627,2631,2635,2639,2643,2647,2651,2655],{"type":46,"tag":246,"props":2628,"children":2629},{"style":253},[2630],{"type":52,"value":1852},{"type":46,"tag":246,"props":2632,"children":2633},{"style":1277},[2634],{"type":52,"value":2486},{"type":46,"tag":246,"props":2636,"children":2637},{"style":253},[2638],{"type":52,"value":1343},{"type":46,"tag":246,"props":2640,"children":2641},{"style":253},[2642],{"type":52,"value":281},{"type":46,"tag":246,"props":2644,"children":2645},{"style":253},[2646],{"type":52,"value":1175},{"type":46,"tag":246,"props":2648,"children":2649},{"style":320},[2650],{"type":52,"value":2503},{"type":46,"tag":246,"props":2652,"children":2653},{"style":253},[2654],{"type":52,"value":1343},{"type":46,"tag":246,"props":2656,"children":2657},{"style":253},[2658],{"type":52,"value":1883},{"type":46,"tag":246,"props":2660,"children":2661},{"class":248,"line":1273},[2662,2666,2671,2675,2679,2683,2688,2692],{"type":46,"tag":246,"props":2663,"children":2664},{"style":253},[2665],{"type":52,"value":1852},{"type":46,"tag":246,"props":2667,"children":2668},{"style":1277},[2669],{"type":52,"value":2670},"Warning",{"type":46,"tag":246,"props":2672,"children":2673},{"style":253},[2674],{"type":52,"value":1343},{"type":46,"tag":246,"props":2676,"children":2677},{"style":253},[2678],{"type":52,"value":281},{"type":46,"tag":246,"props":2680,"children":2681},{"style":253},[2682],{"type":52,"value":1175},{"type":46,"tag":246,"props":2684,"children":2685},{"style":320},[2686],{"type":52,"value":2687},"warning",{"type":46,"tag":246,"props":2689,"children":2690},{"style":253},[2691],{"type":52,"value":1343},{"type":46,"tag":246,"props":2693,"children":2694},{"style":253},[2695],{"type":52,"value":1883},{"type":46,"tag":246,"props":2697,"children":2698},{"class":248,"line":1324},[2699,2703,2708,2712,2716,2720,2725,2729],{"type":46,"tag":246,"props":2700,"children":2701},{"style":253},[2702],{"type":52,"value":1852},{"type":46,"tag":246,"props":2704,"children":2705},{"style":1277},[2706],{"type":52,"value":2707},"Info",{"type":46,"tag":246,"props":2709,"children":2710},{"style":253},[2711],{"type":52,"value":1343},{"type":46,"tag":246,"props":2713,"children":2714},{"style":253},[2715],{"type":52,"value":281},{"type":46,"tag":246,"props":2717,"children":2718},{"style":253},[2719],{"type":52,"value":1175},{"type":46,"tag":246,"props":2721,"children":2722},{"style":320},[2723],{"type":52,"value":2724},"info",{"type":46,"tag":246,"props":2726,"children":2727},{"style":253},[2728],{"type":52,"value":1343},{"type":46,"tag":246,"props":2730,"children":2731},{"style":253},[2732],{"type":52,"value":1883},{"type":46,"tag":246,"props":2734,"children":2735},{"class":248,"line":1369},[2736,2740],{"type":46,"tag":246,"props":2737,"children":2738},{"style":253},[2739],{"type":52,"value":1928},{"type":46,"tag":246,"props":2741,"children":2742},{"style":1162},[2743],{"type":52,"value":1774},{"type":46,"tag":62,"props":2745,"children":2746},{},[2747,2749,2754],{"type":52,"value":2748},"When ",{"type":46,"tag":84,"props":2750,"children":2751},{},[2752],{"type":52,"value":2753},"two or more VARIANT properties combine",{"type":52,"value":2755}," to produce different code output, generate exhaustive conditional branches. For example, 2 variants × 2 values = 4 branches:",{"type":46,"tag":235,"props":2757,"children":2759},{"className":1119,"code":2758,"language":1121,"meta":240,"style":240},"const type = instance.getEnum('Type', { 'Filled': 'filled', 'Outlined': 'outlined' })\nconst status = instance.getEnum('Status', { 'Success': 'success', 'Error': 'error' })\n\nlet colorClass\nif (type === 'filled' && status === 'success') {\n  colorClass = 'bg-green-500 text-white'\n} else if (type === 'filled' && status === 'error') {\n  colorClass = 'bg-red-500 text-white'\n} else if (type === 'outlined' && status === 'success') {\n  colorClass = 'bg-transparent border-green-500'\n} else if (type === 'outlined' && status === 'error') {\n  colorClass = 'bg-transparent border-red-500'\n}\n",[2760],{"type":46,"tag":68,"props":2761,"children":2762},{"__ignoreMap":240},[2763,2888,3007,3014,3027,3091,3117,3186,3210,3277,3301,3368,3392],{"type":46,"tag":246,"props":2764,"children":2765},{"class":248,"line":249},[2766,2770,2775,2779,2783,2787,2791,2795,2799,2804,2808,2812,2816,2820,2825,2829,2833,2837,2842,2846,2850,2854,2859,2863,2867,2871,2876,2880,2884],{"type":46,"tag":246,"props":2767,"children":2768},{"style":268},[2769],{"type":52,"value":1192},{"type":46,"tag":246,"props":2771,"children":2772},{"style":1162},[2773],{"type":52,"value":2774}," type ",{"type":46,"tag":246,"props":2776,"children":2777},{"style":253},[2778],{"type":52,"value":1202},{"type":46,"tag":246,"props":2780,"children":2781},{"style":1162},[2782],{"type":52,"value":1742},{"type":46,"tag":246,"props":2784,"children":2785},{"style":253},[2786],{"type":52,"value":541},{"type":46,"tag":246,"props":2788,"children":2789},{"style":1295},[2790],{"type":52,"value":1819},{"type":46,"tag":246,"props":2792,"children":2793},{"style":1162},[2794],{"type":52,"value":1756},{"type":46,"tag":246,"props":2796,"children":2797},{"style":253},[2798],{"type":52,"value":1343},{"type":46,"tag":246,"props":2800,"children":2801},{"style":320},[2802],{"type":52,"value":2803},"Type",{"type":46,"tag":246,"props":2805,"children":2806},{"style":253},[2807],{"type":52,"value":1343},{"type":46,"tag":246,"props":2809,"children":2810},{"style":253},[2811],{"type":52,"value":1316},{"type":46,"tag":246,"props":2813,"children":2814},{"style":253},[2815],{"type":52,"value":1419},{"type":46,"tag":246,"props":2817,"children":2818},{"style":253},[2819],{"type":52,"value":1175},{"type":46,"tag":246,"props":2821,"children":2822},{"style":1277},[2823],{"type":52,"value":2824},"Filled",{"type":46,"tag":246,"props":2826,"children":2827},{"style":253},[2828],{"type":52,"value":1343},{"type":46,"tag":246,"props":2830,"children":2831},{"style":253},[2832],{"type":52,"value":281},{"type":46,"tag":246,"props":2834,"children":2835},{"style":253},[2836],{"type":52,"value":1175},{"type":46,"tag":246,"props":2838,"children":2839},{"style":320},[2840],{"type":52,"value":2841},"filled",{"type":46,"tag":246,"props":2843,"children":2844},{"style":253},[2845],{"type":52,"value":1343},{"type":46,"tag":246,"props":2847,"children":2848},{"style":253},[2849],{"type":52,"value":1316},{"type":46,"tag":246,"props":2851,"children":2852},{"style":253},[2853],{"type":52,"value":1175},{"type":46,"tag":246,"props":2855,"children":2856},{"style":1277},[2857],{"type":52,"value":2858},"Outlined",{"type":46,"tag":246,"props":2860,"children":2861},{"style":253},[2862],{"type":52,"value":1343},{"type":46,"tag":246,"props":2864,"children":2865},{"style":253},[2866],{"type":52,"value":281},{"type":46,"tag":246,"props":2868,"children":2869},{"style":253},[2870],{"type":52,"value":1175},{"type":46,"tag":246,"props":2872,"children":2873},{"style":320},[2874],{"type":52,"value":2875},"outlined",{"type":46,"tag":246,"props":2877,"children":2878},{"style":253},[2879],{"type":52,"value":1343},{"type":46,"tag":246,"props":2881,"children":2882},{"style":253},[2883],{"type":52,"value":2307},{"type":46,"tag":246,"props":2885,"children":2886},{"style":1162},[2887],{"type":52,"value":1774},{"type":46,"tag":246,"props":2889,"children":2890},{"class":248,"line":259},[2891,2895,2899,2903,2907,2911,2915,2919,2923,2927,2931,2935,2939,2943,2947,2951,2955,2959,2963,2967,2971,2975,2979,2983,2987,2991,2995,2999,3003],{"type":46,"tag":246,"props":2892,"children":2893},{"style":268},[2894],{"type":52,"value":1192},{"type":46,"tag":246,"props":2896,"children":2897},{"style":1162},[2898],{"type":52,"value":2396},{"type":46,"tag":246,"props":2900,"children":2901},{"style":253},[2902],{"type":52,"value":1202},{"type":46,"tag":246,"props":2904,"children":2905},{"style":1162},[2906],{"type":52,"value":1742},{"type":46,"tag":246,"props":2908,"children":2909},{"style":253},[2910],{"type":52,"value":541},{"type":46,"tag":246,"props":2912,"children":2913},{"style":1295},[2914],{"type":52,"value":1819},{"type":46,"tag":246,"props":2916,"children":2917},{"style":1162},[2918],{"type":52,"value":1756},{"type":46,"tag":246,"props":2920,"children":2921},{"style":253},[2922],{"type":52,"value":1343},{"type":46,"tag":246,"props":2924,"children":2925},{"style":320},[2926],{"type":52,"value":2425},{"type":46,"tag":246,"props":2928,"children":2929},{"style":253},[2930],{"type":52,"value":1343},{"type":46,"tag":246,"props":2932,"children":2933},{"style":253},[2934],{"type":52,"value":1316},{"type":46,"tag":246,"props":2936,"children":2937},{"style":253},[2938],{"type":52,"value":1419},{"type":46,"tag":246,"props":2940,"children":2941},{"style":253},[2942],{"type":52,"value":1175},{"type":46,"tag":246,"props":2944,"children":2945},{"style":1277},[2946],{"type":52,"value":2449},{"type":46,"tag":246,"props":2948,"children":2949},{"style":253},[2950],{"type":52,"value":1343},{"type":46,"tag":246,"props":2952,"children":2953},{"style":253},[2954],{"type":52,"value":281},{"type":46,"tag":246,"props":2956,"children":2957},{"style":253},[2958],{"type":52,"value":1175},{"type":46,"tag":246,"props":2960,"children":2961},{"style":320},[2962],{"type":52,"value":2466},{"type":46,"tag":246,"props":2964,"children":2965},{"style":253},[2966],{"type":52,"value":1343},{"type":46,"tag":246,"props":2968,"children":2969},{"style":253},[2970],{"type":52,"value":1316},{"type":46,"tag":246,"props":2972,"children":2973},{"style":253},[2974],{"type":52,"value":1175},{"type":46,"tag":246,"props":2976,"children":2977},{"style":1277},[2978],{"type":52,"value":2486},{"type":46,"tag":246,"props":2980,"children":2981},{"style":253},[2982],{"type":52,"value":1343},{"type":46,"tag":246,"props":2984,"children":2985},{"style":253},[2986],{"type":52,"value":281},{"type":46,"tag":246,"props":2988,"children":2989},{"style":253},[2990],{"type":52,"value":1175},{"type":46,"tag":246,"props":2992,"children":2993},{"style":320},[2994],{"type":52,"value":2503},{"type":46,"tag":246,"props":2996,"children":2997},{"style":253},[2998],{"type":52,"value":1343},{"type":46,"tag":246,"props":3000,"children":3001},{"style":253},[3002],{"type":52,"value":2307},{"type":46,"tag":246,"props":3004,"children":3005},{"style":1162},[3006],{"type":52,"value":1774},{"type":46,"tag":246,"props":3008,"children":3009},{"class":248,"line":289},[3010],{"type":46,"tag":246,"props":3011,"children":3012},{"emptyLinePlaceholder":1223},[3013],{"type":52,"value":1226},{"type":46,"tag":246,"props":3015,"children":3016},{"class":248,"line":334},[3017,3022],{"type":46,"tag":246,"props":3018,"children":3019},{"style":268},[3020],{"type":52,"value":3021},"let",{"type":46,"tag":246,"props":3023,"children":3024},{"style":1162},[3025],{"type":52,"value":3026}," colorClass\n",{"type":46,"tag":246,"props":3028,"children":3029},{"class":248,"line":343},[3030,3035,3040,3045,3049,3053,3057,3062,3066,3070,3074,3078,3082,3087],{"type":46,"tag":246,"props":3031,"children":3032},{"style":1156},[3033],{"type":52,"value":3034},"if",{"type":46,"tag":246,"props":3036,"children":3037},{"style":1162},[3038],{"type":52,"value":3039}," (type ",{"type":46,"tag":246,"props":3041,"children":3042},{"style":253},[3043],{"type":52,"value":3044},"===",{"type":46,"tag":246,"props":3046,"children":3047},{"style":253},[3048],{"type":52,"value":1175},{"type":46,"tag":246,"props":3050,"children":3051},{"style":320},[3052],{"type":52,"value":2841},{"type":46,"tag":246,"props":3054,"children":3055},{"style":253},[3056],{"type":52,"value":1343},{"type":46,"tag":246,"props":3058,"children":3059},{"style":253},[3060],{"type":52,"value":3061}," &&",{"type":46,"tag":246,"props":3063,"children":3064},{"style":1162},[3065],{"type":52,"value":2396},{"type":46,"tag":246,"props":3067,"children":3068},{"style":253},[3069],{"type":52,"value":3044},{"type":46,"tag":246,"props":3071,"children":3072},{"style":253},[3073],{"type":52,"value":1175},{"type":46,"tag":246,"props":3075,"children":3076},{"style":320},[3077],{"type":52,"value":2466},{"type":46,"tag":246,"props":3079,"children":3080},{"style":253},[3081],{"type":52,"value":1343},{"type":46,"tag":246,"props":3083,"children":3084},{"style":1162},[3085],{"type":52,"value":3086},") ",{"type":46,"tag":246,"props":3088,"children":3089},{"style":253},[3090],{"type":52,"value":256},{"type":46,"tag":246,"props":3092,"children":3093},{"class":248,"line":1219},[3094,3099,3104,3108,3113],{"type":46,"tag":246,"props":3095,"children":3096},{"style":1162},[3097],{"type":52,"value":3098},"  colorClass",{"type":46,"tag":246,"props":3100,"children":3101},{"style":253},[3102],{"type":52,"value":3103}," =",{"type":46,"tag":246,"props":3105,"children":3106},{"style":253},[3107],{"type":52,"value":1175},{"type":46,"tag":246,"props":3109,"children":3110},{"style":320},[3111],{"type":52,"value":3112},"bg-green-500 text-white",{"type":46,"tag":246,"props":3114,"children":3115},{"style":253},[3116],{"type":52,"value":1184},{"type":46,"tag":246,"props":3118,"children":3119},{"class":248,"line":1229},[3120,3124,3129,3134,3138,3142,3146,3150,3154,3158,3162,3166,3170,3174,3178,3182],{"type":46,"tag":246,"props":3121,"children":3122},{"style":253},[3123],{"type":52,"value":1928},{"type":46,"tag":246,"props":3125,"children":3126},{"style":1156},[3127],{"type":52,"value":3128}," else",{"type":46,"tag":246,"props":3130,"children":3131},{"style":1156},[3132],{"type":52,"value":3133}," if",{"type":46,"tag":246,"props":3135,"children":3136},{"style":1162},[3137],{"type":52,"value":3039},{"type":46,"tag":246,"props":3139,"children":3140},{"style":253},[3141],{"type":52,"value":3044},{"type":46,"tag":246,"props":3143,"children":3144},{"style":253},[3145],{"type":52,"value":1175},{"type":46,"tag":246,"props":3147,"children":3148},{"style":320},[3149],{"type":52,"value":2841},{"type":46,"tag":246,"props":3151,"children":3152},{"style":253},[3153],{"type":52,"value":1343},{"type":46,"tag":246,"props":3155,"children":3156},{"style":253},[3157],{"type":52,"value":3061},{"type":46,"tag":246,"props":3159,"children":3160},{"style":1162},[3161],{"type":52,"value":2396},{"type":46,"tag":246,"props":3163,"children":3164},{"style":253},[3165],{"type":52,"value":3044},{"type":46,"tag":246,"props":3167,"children":3168},{"style":253},[3169],{"type":52,"value":1175},{"type":46,"tag":246,"props":3171,"children":3172},{"style":320},[3173],{"type":52,"value":2503},{"type":46,"tag":246,"props":3175,"children":3176},{"style":253},[3177],{"type":52,"value":1343},{"type":46,"tag":246,"props":3179,"children":3180},{"style":1162},[3181],{"type":52,"value":3086},{"type":46,"tag":246,"props":3183,"children":3184},{"style":253},[3185],{"type":52,"value":256},{"type":46,"tag":246,"props":3187,"children":3188},{"class":248,"line":1238},[3189,3193,3197,3201,3206],{"type":46,"tag":246,"props":3190,"children":3191},{"style":1162},[3192],{"type":52,"value":3098},{"type":46,"tag":246,"props":3194,"children":3195},{"style":253},[3196],{"type":52,"value":3103},{"type":46,"tag":246,"props":3198,"children":3199},{"style":253},[3200],{"type":52,"value":1175},{"type":46,"tag":246,"props":3202,"children":3203},{"style":320},[3204],{"type":52,"value":3205},"bg-red-500 text-white",{"type":46,"tag":246,"props":3207,"children":3208},{"style":253},[3209],{"type":52,"value":1184},{"type":46,"tag":246,"props":3211,"children":3212},{"class":248,"line":1247},[3213,3217,3221,3225,3229,3233,3237,3241,3245,3249,3253,3257,3261,3265,3269,3273],{"type":46,"tag":246,"props":3214,"children":3215},{"style":253},[3216],{"type":52,"value":1928},{"type":46,"tag":246,"props":3218,"children":3219},{"style":1156},[3220],{"type":52,"value":3128},{"type":46,"tag":246,"props":3222,"children":3223},{"style":1156},[3224],{"type":52,"value":3133},{"type":46,"tag":246,"props":3226,"children":3227},{"style":1162},[3228],{"type":52,"value":3039},{"type":46,"tag":246,"props":3230,"children":3231},{"style":253},[3232],{"type":52,"value":3044},{"type":46,"tag":246,"props":3234,"children":3235},{"style":253},[3236],{"type":52,"value":1175},{"type":46,"tag":246,"props":3238,"children":3239},{"style":320},[3240],{"type":52,"value":2875},{"type":46,"tag":246,"props":3242,"children":3243},{"style":253},[3244],{"type":52,"value":1343},{"type":46,"tag":246,"props":3246,"children":3247},{"style":253},[3248],{"type":52,"value":3061},{"type":46,"tag":246,"props":3250,"children":3251},{"style":1162},[3252],{"type":52,"value":2396},{"type":46,"tag":246,"props":3254,"children":3255},{"style":253},[3256],{"type":52,"value":3044},{"type":46,"tag":246,"props":3258,"children":3259},{"style":253},[3260],{"type":52,"value":1175},{"type":46,"tag":246,"props":3262,"children":3263},{"style":320},[3264],{"type":52,"value":2466},{"type":46,"tag":246,"props":3266,"children":3267},{"style":253},[3268],{"type":52,"value":1343},{"type":46,"tag":246,"props":3270,"children":3271},{"style":1162},[3272],{"type":52,"value":3086},{"type":46,"tag":246,"props":3274,"children":3275},{"style":253},[3276],{"type":52,"value":256},{"type":46,"tag":246,"props":3278,"children":3279},{"class":248,"line":1255},[3280,3284,3288,3292,3297],{"type":46,"tag":246,"props":3281,"children":3282},{"style":1162},[3283],{"type":52,"value":3098},{"type":46,"tag":246,"props":3285,"children":3286},{"style":253},[3287],{"type":52,"value":3103},{"type":46,"tag":246,"props":3289,"children":3290},{"style":253},[3291],{"type":52,"value":1175},{"type":46,"tag":246,"props":3293,"children":3294},{"style":320},[3295],{"type":52,"value":3296},"bg-transparent border-green-500",{"type":46,"tag":246,"props":3298,"children":3299},{"style":253},[3300],{"type":52,"value":1184},{"type":46,"tag":246,"props":3302,"children":3303},{"class":248,"line":1273},[3304,3308,3312,3316,3320,3324,3328,3332,3336,3340,3344,3348,3352,3356,3360,3364],{"type":46,"tag":246,"props":3305,"children":3306},{"style":253},[3307],{"type":52,"value":1928},{"type":46,"tag":246,"props":3309,"children":3310},{"style":1156},[3311],{"type":52,"value":3128},{"type":46,"tag":246,"props":3313,"children":3314},{"style":1156},[3315],{"type":52,"value":3133},{"type":46,"tag":246,"props":3317,"children":3318},{"style":1162},[3319],{"type":52,"value":3039},{"type":46,"tag":246,"props":3321,"children":3322},{"style":253},[3323],{"type":52,"value":3044},{"type":46,"tag":246,"props":3325,"children":3326},{"style":253},[3327],{"type":52,"value":1175},{"type":46,"tag":246,"props":3329,"children":3330},{"style":320},[3331],{"type":52,"value":2875},{"type":46,"tag":246,"props":3333,"children":3334},{"style":253},[3335],{"type":52,"value":1343},{"type":46,"tag":246,"props":3337,"children":3338},{"style":253},[3339],{"type":52,"value":3061},{"type":46,"tag":246,"props":3341,"children":3342},{"style":1162},[3343],{"type":52,"value":2396},{"type":46,"tag":246,"props":3345,"children":3346},{"style":253},[3347],{"type":52,"value":3044},{"type":46,"tag":246,"props":3349,"children":3350},{"style":253},[3351],{"type":52,"value":1175},{"type":46,"tag":246,"props":3353,"children":3354},{"style":320},[3355],{"type":52,"value":2503},{"type":46,"tag":246,"props":3357,"children":3358},{"style":253},[3359],{"type":52,"value":1343},{"type":46,"tag":246,"props":3361,"children":3362},{"style":1162},[3363],{"type":52,"value":3086},{"type":46,"tag":246,"props":3365,"children":3366},{"style":253},[3367],{"type":52,"value":256},{"type":46,"tag":246,"props":3369,"children":3370},{"class":248,"line":1324},[3371,3375,3379,3383,3388],{"type":46,"tag":246,"props":3372,"children":3373},{"style":1162},[3374],{"type":52,"value":3098},{"type":46,"tag":246,"props":3376,"children":3377},{"style":253},[3378],{"type":52,"value":3103},{"type":46,"tag":246,"props":3380,"children":3381},{"style":253},[3382],{"type":52,"value":1175},{"type":46,"tag":246,"props":3384,"children":3385},{"style":320},[3386],{"type":52,"value":3387},"bg-transparent border-red-500",{"type":46,"tag":246,"props":3389,"children":3390},{"style":253},[3391],{"type":52,"value":1184},{"type":46,"tag":246,"props":3393,"children":3394},{"class":248,"line":1369},[3395],{"type":46,"tag":246,"props":3396,"children":3397},{"style":253},[3398],{"type":52,"value":349},{"type":46,"tag":62,"props":3400,"children":3401},{},[3402,3404,3409,3411,3416,3418,3423],{"type":52,"value":3403},"If the combinations produce ",{"type":46,"tag":84,"props":3405,"children":3406},{},[3407],{"type":52,"value":3408},"repetitive",{"type":52,"value":3410}," output (e.g., ",{"type":46,"tag":68,"props":3412,"children":3414},{"className":3413},[],[3415],{"type":52,"value":1980},{"type":52,"value":3417}," doesn't change the snippet structure — it's just passed through as a prop), a single ",{"type":46,"tag":68,"props":3419,"children":3421},{"className":3420},[],[3422],{"type":52,"value":1819},{"type":52,"value":3424}," mapping per variant is sufficient — no need for cross-product branches.",{"type":46,"tag":62,"props":3426,"children":3427},{},[3428,3432],{"type":46,"tag":84,"props":3429,"children":3430},{},[3431],{"type":52,"value":887},{"type":52,"value":3433}," — access swappable component instances:",{"type":46,"tag":235,"props":3435,"children":3437},{"className":1119,"code":3436,"language":1121,"meta":240,"style":240},"const icon = instance.getInstanceSwap('Icon')\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n",[3438],{"type":46,"tag":68,"props":3439,"children":3440},{"__ignoreMap":240},[3441,3491,3503,3559,3598],{"type":46,"tag":246,"props":3442,"children":3443},{"class":248,"line":249},[3444,3448,3453,3457,3461,3465,3470,3474,3478,3483,3487],{"type":46,"tag":246,"props":3445,"children":3446},{"style":268},[3447],{"type":52,"value":1192},{"type":46,"tag":246,"props":3449,"children":3450},{"style":1162},[3451],{"type":52,"value":3452}," icon ",{"type":46,"tag":246,"props":3454,"children":3455},{"style":253},[3456],{"type":52,"value":1202},{"type":46,"tag":246,"props":3458,"children":3459},{"style":1162},[3460],{"type":52,"value":1742},{"type":46,"tag":246,"props":3462,"children":3463},{"style":253},[3464],{"type":52,"value":541},{"type":46,"tag":246,"props":3466,"children":3467},{"style":1295},[3468],{"type":52,"value":3469},"getInstanceSwap",{"type":46,"tag":246,"props":3471,"children":3472},{"style":1162},[3473],{"type":52,"value":1756},{"type":46,"tag":246,"props":3475,"children":3476},{"style":253},[3477],{"type":52,"value":1343},{"type":46,"tag":246,"props":3479,"children":3480},{"style":320},[3481],{"type":52,"value":3482},"Icon",{"type":46,"tag":246,"props":3484,"children":3485},{"style":253},[3486],{"type":52,"value":1343},{"type":46,"tag":246,"props":3488,"children":3489},{"style":1162},[3490],{"type":52,"value":1774},{"type":46,"tag":246,"props":3492,"children":3493},{"class":248,"line":259},[3494,3498],{"type":46,"tag":246,"props":3495,"children":3496},{"style":268},[3497],{"type":52,"value":3021},{"type":46,"tag":246,"props":3499,"children":3500},{"style":1162},[3501],{"type":52,"value":3502}," iconCode\n",{"type":46,"tag":246,"props":3504,"children":3505},{"class":248,"line":289},[3506,3510,3515,3520,3525,3529,3534,3538,3542,3547,3551,3555],{"type":46,"tag":246,"props":3507,"children":3508},{"style":1156},[3509],{"type":52,"value":3034},{"type":46,"tag":246,"props":3511,"children":3512},{"style":1162},[3513],{"type":52,"value":3514}," (icon ",{"type":46,"tag":246,"props":3516,"children":3517},{"style":253},[3518],{"type":52,"value":3519},"&&",{"type":46,"tag":246,"props":3521,"children":3522},{"style":1162},[3523],{"type":52,"value":3524}," icon",{"type":46,"tag":246,"props":3526,"children":3527},{"style":253},[3528],{"type":52,"value":541},{"type":46,"tag":246,"props":3530,"children":3531},{"style":1162},[3532],{"type":52,"value":3533},"type ",{"type":46,"tag":246,"props":3535,"children":3536},{"style":253},[3537],{"type":52,"value":3044},{"type":46,"tag":246,"props":3539,"children":3540},{"style":253},[3541],{"type":52,"value":1175},{"type":46,"tag":246,"props":3543,"children":3544},{"style":320},[3545],{"type":52,"value":3546},"INSTANCE",{"type":46,"tag":246,"props":3548,"children":3549},{"style":253},[3550],{"type":52,"value":1343},{"type":46,"tag":246,"props":3552,"children":3553},{"style":1162},[3554],{"type":52,"value":3086},{"type":46,"tag":246,"props":3556,"children":3557},{"style":253},[3558],{"type":52,"value":256},{"type":46,"tag":246,"props":3560,"children":3561},{"class":248,"line":334},[3562,3567,3571,3575,3579,3584,3589,3593],{"type":46,"tag":246,"props":3563,"children":3564},{"style":1162},[3565],{"type":52,"value":3566},"  iconCode",{"type":46,"tag":246,"props":3568,"children":3569},{"style":253},[3570],{"type":52,"value":3103},{"type":46,"tag":246,"props":3572,"children":3573},{"style":1162},[3574],{"type":52,"value":3524},{"type":46,"tag":246,"props":3576,"children":3577},{"style":253},[3578],{"type":52,"value":541},{"type":46,"tag":246,"props":3580,"children":3581},{"style":1295},[3582],{"type":52,"value":3583},"executeTemplate",{"type":46,"tag":246,"props":3585,"children":3586},{"style":1277},[3587],{"type":52,"value":3588},"()",{"type":46,"tag":246,"props":3590,"children":3591},{"style":253},[3592],{"type":52,"value":541},{"type":46,"tag":246,"props":3594,"children":3595},{"style":1162},[3596],{"type":52,"value":3597},"example\n",{"type":46,"tag":246,"props":3599,"children":3600},{"class":248,"line":343},[3601],{"type":46,"tag":246,"props":3602,"children":3603},{"style":253},[3604],{"type":52,"value":349},{"type":46,"tag":62,"props":3606,"children":3607},{},[3608,3612,3613,3619,3621,3629,3631,3636,3637,3641,3643,3649],{"type":46,"tag":84,"props":3609,"children":3610},{},[3611],{"type":52,"value":897},{"type":52,"value":113},{"type":46,"tag":68,"props":3614,"children":3616},{"className":3615},[],[3617],{"type":52,"value":3618},"getSlot(propName)",{"type":52,"value":3620}," is only valid when the Figma component property reported in Step 3 has type ",{"type":46,"tag":84,"props":3622,"children":3623},{},[3624],{"type":46,"tag":68,"props":3625,"children":3627},{"className":3626},[],[3628],{"type":52,"value":897},{"type":52,"value":3630},". Do not use ",{"type":46,"tag":68,"props":3632,"children":3634},{"className":3633},[],[3635],{"type":52,"value":905},{"type":52,"value":939},{"type":46,"tag":84,"props":3638,"children":3639},{},[3640],{"type":52,"value":887},{"type":52,"value":3642}," properties (those use ",{"type":46,"tag":68,"props":3644,"children":3646},{"className":3645},[],[3647],{"type":52,"value":3648},"getInstanceSwap()",{"type":52,"value":3650},"). Slots are explicit “content regions” in the component definition, not generic nested instances.",{"type":46,"tag":128,"props":3652,"children":3653},{},[3654],{"type":46,"tag":132,"props":3655,"children":3656},{},[3657,3662,3663],{"type":46,"tag":84,"props":3658,"children":3659},{},[3660],{"type":52,"value":3661},"Signature:",{"type":52,"value":780},{"type":46,"tag":68,"props":3664,"children":3666},{"className":3665},[],[3667],{"type":52,"value":3668},"getSlot(propName: string): ResultSection[] | undefined",{"type":46,"tag":235,"props":3670,"children":3672},{"className":1119,"code":3671,"language":1121,"meta":240,"style":240},"\u002F\u002F Figma property \"Content\" must be type SLOT in component properties\nconst content = instance.getSlot('Content')\n\nexport default {\n  example: figma.code`\u003CCard>${content}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n",[3673],{"type":46,"tag":68,"props":3674,"children":3675},{"__ignoreMap":240},[3676,3684,3734,3741,3756,3815,3823],{"type":46,"tag":246,"props":3677,"children":3678},{"class":248,"line":249},[3679],{"type":46,"tag":246,"props":3680,"children":3681},{"style":1131},[3682],{"type":52,"value":3683},"\u002F\u002F Figma property \"Content\" must be type SLOT in component properties\n",{"type":46,"tag":246,"props":3685,"children":3686},{"class":248,"line":259},[3687,3691,3696,3700,3704,3708,3713,3717,3721,3726,3730],{"type":46,"tag":246,"props":3688,"children":3689},{"style":268},[3690],{"type":52,"value":1192},{"type":46,"tag":246,"props":3692,"children":3693},{"style":1162},[3694],{"type":52,"value":3695}," content ",{"type":46,"tag":246,"props":3697,"children":3698},{"style":253},[3699],{"type":52,"value":1202},{"type":46,"tag":246,"props":3701,"children":3702},{"style":1162},[3703],{"type":52,"value":1742},{"type":46,"tag":246,"props":3705,"children":3706},{"style":253},[3707],{"type":52,"value":541},{"type":46,"tag":246,"props":3709,"children":3710},{"style":1295},[3711],{"type":52,"value":3712},"getSlot",{"type":46,"tag":246,"props":3714,"children":3715},{"style":1162},[3716],{"type":52,"value":1756},{"type":46,"tag":246,"props":3718,"children":3719},{"style":253},[3720],{"type":52,"value":1343},{"type":46,"tag":246,"props":3722,"children":3723},{"style":320},[3724],{"type":52,"value":3725},"Content",{"type":46,"tag":246,"props":3727,"children":3728},{"style":253},[3729],{"type":52,"value":1343},{"type":46,"tag":246,"props":3731,"children":3732},{"style":1162},[3733],{"type":52,"value":1774},{"type":46,"tag":246,"props":3735,"children":3736},{"class":248,"line":289},[3737],{"type":46,"tag":246,"props":3738,"children":3739},{"emptyLinePlaceholder":1223},[3740],{"type":52,"value":1226},{"type":46,"tag":246,"props":3742,"children":3743},{"class":248,"line":334},[3744,3748,3752],{"type":46,"tag":246,"props":3745,"children":3746},{"style":1156},[3747],{"type":52,"value":1261},{"type":46,"tag":246,"props":3749,"children":3750},{"style":1156},[3751],{"type":52,"value":1266},{"type":46,"tag":246,"props":3753,"children":3754},{"style":253},[3755],{"type":52,"value":286},{"type":46,"tag":246,"props":3757,"children":3758},{"class":248,"line":343},[3759,3763,3767,3771,3775,3779,3783,3788,3793,3798,3802,3807,3811],{"type":46,"tag":246,"props":3760,"children":3761},{"style":1277},[3762],{"type":52,"value":1280},{"type":46,"tag":246,"props":3764,"children":3765},{"style":253},[3766],{"type":52,"value":281},{"type":46,"tag":246,"props":3768,"children":3769},{"style":1162},[3770],{"type":52,"value":1207},{"type":46,"tag":246,"props":3772,"children":3773},{"style":253},[3774],{"type":52,"value":541},{"type":46,"tag":246,"props":3776,"children":3777},{"style":1295},[3778],{"type":52,"value":68},{"type":46,"tag":246,"props":3780,"children":3781},{"style":253},[3782],{"type":52,"value":1302},{"type":46,"tag":246,"props":3784,"children":3785},{"style":320},[3786],{"type":52,"value":3787},"\u003CCard>",{"type":46,"tag":246,"props":3789,"children":3790},{"style":253},[3791],{"type":52,"value":3792},"${",{"type":46,"tag":246,"props":3794,"children":3795},{"style":1162},[3796],{"type":52,"value":3797},"content",{"type":46,"tag":246,"props":3799,"children":3800},{"style":253},[3801],{"type":52,"value":1928},{"type":46,"tag":246,"props":3803,"children":3804},{"style":320},[3805],{"type":52,"value":3806},"\u003C\u002FCard>",{"type":46,"tag":246,"props":3808,"children":3809},{"style":253},[3810],{"type":52,"value":1302},{"type":46,"tag":246,"props":3812,"children":3813},{"style":253},[3814],{"type":52,"value":1883},{"type":46,"tag":246,"props":3816,"children":3817},{"class":248,"line":1219},[3818],{"type":46,"tag":246,"props":3819,"children":3820},{"style":1131},[3821],{"type":52,"value":3822},"  \u002F\u002F ...\n",{"type":46,"tag":246,"props":3824,"children":3825},{"class":248,"line":1229},[3826],{"type":46,"tag":246,"props":3827,"children":3828},{"style":253},[3829],{"type":52,"value":349},{"type":46,"tag":1060,"props":3831,"children":3833},{"id":3832},"interpolation-in-tagged-templates",[3834],{"type":52,"value":3835},"Interpolation in tagged templates",{"type":46,"tag":62,"props":3837,"children":3838},{},[3839],{"type":52,"value":3840},"When interpolating values in tagged templates, use the correct wrapping:",{"type":46,"tag":128,"props":3842,"children":3843},{},[3844,3880,3903,3943],{"type":46,"tag":132,"props":3845,"children":3846},{},[3847,3852,3854,3859,3860,3865,3866,3872,3874],{"type":46,"tag":84,"props":3848,"children":3849},{},[3850],{"type":52,"value":3851},"String values",{"type":52,"value":3853}," (",{"type":46,"tag":68,"props":3855,"children":3857},{"className":3856},[],[3858],{"type":52,"value":1751},{"type":52,"value":967},{"type":46,"tag":68,"props":3861,"children":3863},{"className":3862},[],[3864],{"type":52,"value":1819},{"type":52,"value":967},{"type":46,"tag":68,"props":3867,"children":3869},{"className":3868},[],[3870],{"type":52,"value":3871},"textContent",{"type":52,"value":3873},"): wrap in quotes → ",{"type":46,"tag":68,"props":3875,"children":3877},{"className":3876},[],[3878],{"type":52,"value":3879},"variant=\"${variant}\"",{"type":46,"tag":132,"props":3881,"children":3882},{},[3883,3888,3889,3895,3897],{"type":46,"tag":84,"props":3884,"children":3885},{},[3886],{"type":52,"value":3887},"Instance\u002Fsection values",{"type":52,"value":3853},{"type":46,"tag":68,"props":3890,"children":3892},{"className":3891},[],[3893],{"type":52,"value":3894},"executeTemplate().example",{"type":52,"value":3896},"): wrap in braces → ",{"type":46,"tag":68,"props":3898,"children":3900},{"className":3899},[],[3901],{"type":52,"value":3902},"icon={${iconCode}}",{"type":46,"tag":132,"props":3904,"children":3905},{},[3906,3911,3912,3917,3919,3925,3927,3933,3935,3941],{"type":46,"tag":84,"props":3907,"children":3908},{},[3909],{"type":52,"value":3910},"Slot sections",{"type":52,"value":3853},{"type":46,"tag":68,"props":3913,"children":3915},{"className":3914},[],[3916],{"type":52,"value":905},{"type":52,"value":3918}," result — ",{"type":46,"tag":68,"props":3920,"children":3922},{"className":3921},[],[3923],{"type":52,"value":3924},"ResultSection[] | undefined",{"type":52,"value":3926},"): interpolate directly inside ",{"type":46,"tag":68,"props":3928,"children":3930},{"className":3929},[],[3931],{"type":52,"value":3932},"figma.code`...`",{"type":52,"value":3934}," (same shape as nested snippet sections), e.g. ",{"type":46,"tag":68,"props":3936,"children":3938},{"className":3937},[],[3939],{"type":52,"value":3940},"figma.code`\u003CSelect>${content}\u003C\u002FSelect>`",{"type":52,"value":3942}," — do not treat as a plain string",{"type":46,"tag":132,"props":3944,"children":3945},{},[3946,3951,3953],{"type":46,"tag":84,"props":3947,"children":3948},{},[3949],{"type":52,"value":3950},"Boolean bare props",{"type":52,"value":3952},": use conditional → ",{"type":46,"tag":68,"props":3954,"children":3956},{"className":3955},[],[3957],{"type":52,"value":3958},"${disabled ? 'disabled' : ''}",{"type":46,"tag":1060,"props":3960,"children":3962},{"id":3961},"finding-descendant-layers",[3963],{"type":52,"value":3964},"Finding descendant layers",{"type":46,"tag":62,"props":3966,"children":3967},{},[3968],{"type":52,"value":3969},"When you need to access children that aren't exposed as component properties:",{"type":46,"tag":378,"props":3971,"children":3972},{},[3973,3989],{"type":46,"tag":382,"props":3974,"children":3975},{},[3976],{"type":46,"tag":386,"props":3977,"children":3978},{},[3979,3984],{"type":46,"tag":390,"props":3980,"children":3981},{},[3982],{"type":52,"value":3983},"Method",{"type":46,"tag":390,"props":3985,"children":3986},{},[3987],{"type":52,"value":3988},"Use when",{"type":46,"tag":404,"props":3990,"children":3991},{},[3992,4015,4037,4053,4075,4098,4115],{"type":46,"tag":386,"props":3993,"children":3994},{},[3995,4004],{"type":46,"tag":411,"props":3996,"children":3997},{},[3998],{"type":46,"tag":68,"props":3999,"children":4001},{"className":4000},[],[4002],{"type":52,"value":4003},"instance.getInstanceSwap('PropName')",{"type":46,"tag":411,"props":4005,"children":4006},{},[4007,4009,4013],{"type":52,"value":4008},"Figma property type is ",{"type":46,"tag":84,"props":4010,"children":4011},{},[4012],{"type":52,"value":887},{"type":52,"value":4014}," (fixed swapped instance)",{"type":46,"tag":386,"props":4016,"children":4017},{},[4018,4027],{"type":46,"tag":411,"props":4019,"children":4020},{},[4021],{"type":46,"tag":68,"props":4022,"children":4024},{"className":4023},[],[4025],{"type":52,"value":4026},"instance.getSlot('PropName')",{"type":46,"tag":411,"props":4028,"children":4029},{},[4030,4031,4035],{"type":52,"value":4008},{"type":46,"tag":84,"props":4032,"children":4033},{},[4034],{"type":52,"value":897},{"type":52,"value":4036}," (freeform content region)",{"type":46,"tag":386,"props":4038,"children":4039},{},[4040,4048],{"type":46,"tag":411,"props":4041,"children":4042},{},[4043],{"type":46,"tag":68,"props":4044,"children":4046},{"className":4045},[],[4047],{"type":52,"value":1671},{"type":46,"tag":411,"props":4049,"children":4050},{},[4051],{"type":52,"value":4052},"You know the child layer name (no component property)",{"type":46,"tag":386,"props":4054,"children":4055},{},[4056,4070],{"type":46,"tag":411,"props":4057,"children":4058},{},[4059,4064,4065],{"type":46,"tag":68,"props":4060,"children":4062},{"className":4061},[],[4063],{"type":52,"value":1693},{"type":52,"value":439},{"type":46,"tag":68,"props":4066,"children":4068},{"className":4067},[],[4069],{"type":52,"value":1700},{"type":46,"tag":411,"props":4071,"children":4072},{},[4073],{"type":52,"value":4074},"You need text content from a named text layer",{"type":46,"tag":386,"props":4076,"children":4077},{},[4078,4087],{"type":46,"tag":411,"props":4079,"children":4080},{},[4081],{"type":46,"tag":68,"props":4082,"children":4084},{"className":4083},[],[4085],{"type":52,"value":4086},"instance.findConnectedInstance('id')",{"type":46,"tag":411,"props":4088,"children":4089},{},[4090,4092],{"type":52,"value":4091},"You know the child's Code Connect ",{"type":46,"tag":68,"props":4093,"children":4095},{"className":4094},[],[4096],{"type":52,"value":4097},"id",{"type":46,"tag":386,"props":4099,"children":4100},{},[4101,4110],{"type":46,"tag":411,"props":4102,"children":4103},{},[4104],{"type":46,"tag":68,"props":4105,"children":4107},{"className":4106},[],[4108],{"type":52,"value":4109},"instance.findConnectedInstances(fn)",{"type":46,"tag":411,"props":4111,"children":4112},{},[4113],{"type":52,"value":4114},"You need multiple connected children matching a filter",{"type":46,"tag":386,"props":4116,"children":4117},{},[4118,4127],{"type":46,"tag":411,"props":4119,"children":4120},{},[4121],{"type":46,"tag":68,"props":4122,"children":4124},{"className":4123},[],[4125],{"type":52,"value":4126},"instance.findLayers(fn)",{"type":46,"tag":411,"props":4128,"children":4129},{},[4130],{"type":52,"value":4131},"You need any layers (text + instances) matching a filter",{"type":46,"tag":1060,"props":4133,"children":4135},{"id":4134},"nested-configurable-instances",[4136],{"type":52,"value":4137},"Nested configurable instances",{"type":46,"tag":62,"props":4139,"children":4140},{},[4141,4143,4148,4150,4155],{"type":52,"value":4142},"A component may contain child instances that are ",{"type":46,"tag":84,"props":4144,"children":4145},{},[4146],{"type":52,"value":4147},"not exposed as component properties",{"type":52,"value":4149}," (no INSTANCE_SWAP) but are still ",{"type":46,"tag":84,"props":4151,"children":4152},{},[4153],{"type":52,"value":4154},"independently configurable",{"type":52,"value":4156}," — they have their own variants, properties, or swap slots. These must be resolved dynamically, not hardcoded.",{"type":46,"tag":925,"props":4158,"children":4159},{},[4160,4184,4194],{"type":46,"tag":132,"props":4161,"children":4162},{},[4163,4168,4170,4175,4177,4182],{"type":46,"tag":84,"props":4164,"children":4165},{},[4166],{"type":52,"value":4167},"Check whether the child already has a Code Connect template",{"type":52,"value":4169}," — use ",{"type":46,"tag":68,"props":4171,"children":4173},{"className":4172},[],[4174],{"type":52,"value":147},{"type":52,"value":4176}," or check existing ",{"type":46,"tag":68,"props":4178,"children":4180},{"className":4179},[],[4181],{"type":52,"value":73},{"type":52,"value":4183}," files in the project.",{"type":46,"tag":132,"props":4185,"children":4186},{},[4187,4192],{"type":46,"tag":84,"props":4188,"children":4189},{},[4190],{"type":52,"value":4191},"If no template exists, create one",{"type":52,"value":4193}," for the child so it renders correctly both standalone and when nested.",{"type":46,"tag":132,"props":4195,"children":4196},{},[4197,4202,4204,4210,4211,4217,4219,4224],{"type":46,"tag":84,"props":4198,"children":4199},{},[4200],{"type":52,"value":4201},"Reference the child from the parent",{"type":52,"value":4203}," using ",{"type":46,"tag":68,"props":4205,"children":4207},{"className":4206},[],[4208],{"type":52,"value":4209},"findInstance()",{"type":52,"value":1077},{"type":46,"tag":68,"props":4212,"children":4214},{"className":4213},[],[4215],{"type":52,"value":4216},"findConnectedInstance()",{"type":52,"value":4218},", then call ",{"type":46,"tag":68,"props":4220,"children":4222},{"className":4221},[],[4223],{"type":52,"value":1627},{"type":52,"value":541},{"type":46,"tag":235,"props":4226,"children":4228},{"className":1119,"code":4227,"language":1121,"meta":240,"style":240},"\u002F\u002F Parent template — the Badge child isn't a prop, but it's configurable\nconst badge = instance.findInstance('Status Badge')\nlet badgeCode\nif (badge && badge.type === 'INSTANCE') {\n  badgeCode = badge.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CCard>${badgeCode}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n",[4229],{"type":46,"tag":68,"props":4230,"children":4231},{"__ignoreMap":240},[4232,4240,4290,4302,4355,4391,4398,4405,4420,4476,4483],{"type":46,"tag":246,"props":4233,"children":4234},{"class":248,"line":249},[4235],{"type":46,"tag":246,"props":4236,"children":4237},{"style":1131},[4238],{"type":52,"value":4239},"\u002F\u002F Parent template — the Badge child isn't a prop, but it's configurable\n",{"type":46,"tag":246,"props":4241,"children":4242},{"class":248,"line":259},[4243,4247,4252,4256,4260,4264,4269,4273,4277,4282,4286],{"type":46,"tag":246,"props":4244,"children":4245},{"style":268},[4246],{"type":52,"value":1192},{"type":46,"tag":246,"props":4248,"children":4249},{"style":1162},[4250],{"type":52,"value":4251}," badge ",{"type":46,"tag":246,"props":4253,"children":4254},{"style":253},[4255],{"type":52,"value":1202},{"type":46,"tag":246,"props":4257,"children":4258},{"style":1162},[4259],{"type":52,"value":1742},{"type":46,"tag":246,"props":4261,"children":4262},{"style":253},[4263],{"type":52,"value":541},{"type":46,"tag":246,"props":4265,"children":4266},{"style":1295},[4267],{"type":52,"value":4268},"findInstance",{"type":46,"tag":246,"props":4270,"children":4271},{"style":1162},[4272],{"type":52,"value":1756},{"type":46,"tag":246,"props":4274,"children":4275},{"style":253},[4276],{"type":52,"value":1343},{"type":46,"tag":246,"props":4278,"children":4279},{"style":320},[4280],{"type":52,"value":4281},"Status Badge",{"type":46,"tag":246,"props":4283,"children":4284},{"style":253},[4285],{"type":52,"value":1343},{"type":46,"tag":246,"props":4287,"children":4288},{"style":1162},[4289],{"type":52,"value":1774},{"type":46,"tag":246,"props":4291,"children":4292},{"class":248,"line":289},[4293,4297],{"type":46,"tag":246,"props":4294,"children":4295},{"style":268},[4296],{"type":52,"value":3021},{"type":46,"tag":246,"props":4298,"children":4299},{"style":1162},[4300],{"type":52,"value":4301}," badgeCode\n",{"type":46,"tag":246,"props":4303,"children":4304},{"class":248,"line":334},[4305,4309,4314,4318,4323,4327,4331,4335,4339,4343,4347,4351],{"type":46,"tag":246,"props":4306,"children":4307},{"style":1156},[4308],{"type":52,"value":3034},{"type":46,"tag":246,"props":4310,"children":4311},{"style":1162},[4312],{"type":52,"value":4313}," (badge ",{"type":46,"tag":246,"props":4315,"children":4316},{"style":253},[4317],{"type":52,"value":3519},{"type":46,"tag":246,"props":4319,"children":4320},{"style":1162},[4321],{"type":52,"value":4322}," badge",{"type":46,"tag":246,"props":4324,"children":4325},{"style":253},[4326],{"type":52,"value":541},{"type":46,"tag":246,"props":4328,"children":4329},{"style":1162},[4330],{"type":52,"value":3533},{"type":46,"tag":246,"props":4332,"children":4333},{"style":253},[4334],{"type":52,"value":3044},{"type":46,"tag":246,"props":4336,"children":4337},{"style":253},[4338],{"type":52,"value":1175},{"type":46,"tag":246,"props":4340,"children":4341},{"style":320},[4342],{"type":52,"value":3546},{"type":46,"tag":246,"props":4344,"children":4345},{"style":253},[4346],{"type":52,"value":1343},{"type":46,"tag":246,"props":4348,"children":4349},{"style":1162},[4350],{"type":52,"value":3086},{"type":46,"tag":246,"props":4352,"children":4353},{"style":253},[4354],{"type":52,"value":256},{"type":46,"tag":246,"props":4356,"children":4357},{"class":248,"line":343},[4358,4363,4367,4371,4375,4379,4383,4387],{"type":46,"tag":246,"props":4359,"children":4360},{"style":1162},[4361],{"type":52,"value":4362},"  badgeCode",{"type":46,"tag":246,"props":4364,"children":4365},{"style":253},[4366],{"type":52,"value":3103},{"type":46,"tag":246,"props":4368,"children":4369},{"style":1162},[4370],{"type":52,"value":4322},{"type":46,"tag":246,"props":4372,"children":4373},{"style":253},[4374],{"type":52,"value":541},{"type":46,"tag":246,"props":4376,"children":4377},{"style":1295},[4378],{"type":52,"value":3583},{"type":46,"tag":246,"props":4380,"children":4381},{"style":1277},[4382],{"type":52,"value":3588},{"type":46,"tag":246,"props":4384,"children":4385},{"style":253},[4386],{"type":52,"value":541},{"type":46,"tag":246,"props":4388,"children":4389},{"style":1162},[4390],{"type":52,"value":3597},{"type":46,"tag":246,"props":4392,"children":4393},{"class":248,"line":1219},[4394],{"type":46,"tag":246,"props":4395,"children":4396},{"style":253},[4397],{"type":52,"value":349},{"type":46,"tag":246,"props":4399,"children":4400},{"class":248,"line":1229},[4401],{"type":46,"tag":246,"props":4402,"children":4403},{"emptyLinePlaceholder":1223},[4404],{"type":52,"value":1226},{"type":46,"tag":246,"props":4406,"children":4407},{"class":248,"line":1238},[4408,4412,4416],{"type":46,"tag":246,"props":4409,"children":4410},{"style":1156},[4411],{"type":52,"value":1261},{"type":46,"tag":246,"props":4413,"children":4414},{"style":1156},[4415],{"type":52,"value":1266},{"type":46,"tag":246,"props":4417,"children":4418},{"style":253},[4419],{"type":52,"value":286},{"type":46,"tag":246,"props":4421,"children":4422},{"class":248,"line":1247},[4423,4427,4431,4435,4439,4443,4447,4451,4455,4460,4464,4468,4472],{"type":46,"tag":246,"props":4424,"children":4425},{"style":1277},[4426],{"type":52,"value":1280},{"type":46,"tag":246,"props":4428,"children":4429},{"style":253},[4430],{"type":52,"value":281},{"type":46,"tag":246,"props":4432,"children":4433},{"style":1162},[4434],{"type":52,"value":1207},{"type":46,"tag":246,"props":4436,"children":4437},{"style":253},[4438],{"type":52,"value":541},{"type":46,"tag":246,"props":4440,"children":4441},{"style":1295},[4442],{"type":52,"value":68},{"type":46,"tag":246,"props":4444,"children":4445},{"style":253},[4446],{"type":52,"value":1302},{"type":46,"tag":246,"props":4448,"children":4449},{"style":320},[4450],{"type":52,"value":3787},{"type":46,"tag":246,"props":4452,"children":4453},{"style":253},[4454],{"type":52,"value":3792},{"type":46,"tag":246,"props":4456,"children":4457},{"style":1162},[4458],{"type":52,"value":4459},"badgeCode",{"type":46,"tag":246,"props":4461,"children":4462},{"style":253},[4463],{"type":52,"value":1928},{"type":46,"tag":246,"props":4465,"children":4466},{"style":320},[4467],{"type":52,"value":3806},{"type":46,"tag":246,"props":4469,"children":4470},{"style":253},[4471],{"type":52,"value":1302},{"type":46,"tag":246,"props":4473,"children":4474},{"style":253},[4475],{"type":52,"value":1883},{"type":46,"tag":246,"props":4477,"children":4478},{"class":248,"line":1255},[4479],{"type":46,"tag":246,"props":4480,"children":4481},{"style":1131},[4482],{"type":52,"value":3822},{"type":46,"tag":246,"props":4484,"children":4485},{"class":248,"line":1273},[4486],{"type":46,"tag":246,"props":4487,"children":4488},{"style":253},[4489],{"type":52,"value":349},{"type":46,"tag":62,"props":4491,"children":4492},{},[4493],{"type":52,"value":4494},"This applies to icons, badges, labels, and any other nested instance that is configurable by itself — always connect them and render dynamically, never hardcode their content.",{"type":46,"tag":1060,"props":4496,"children":4498},{"id":4497},"nested-component-example",[4499],{"type":52,"value":4500},"Nested component example",{"type":46,"tag":62,"props":4502,"children":4503},{},[4504,4506,4513],{"type":52,"value":4505},"For multi-level nested components or metadata prop passing between templates, see ",{"type":46,"tag":4507,"props":4508,"children":4510},"a",{"href":4509},"references\u002Fadvanced-patterns.md",[4511],{"type":52,"value":4512},"advanced-patterns.md",{"type":52,"value":541},{"type":46,"tag":235,"props":4515,"children":4517},{"className":1119,"code":4516,"language":1121,"meta":240,"style":240},"const icon = instance.getInstanceSwap('Icon')\nlet iconSnippet\nif (icon && icon.type === 'INSTANCE') {\n  iconSnippet = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CButton ${iconSnippet ? figma.code`icon={${iconSnippet}}` : ''}>${label}\u003C\u002FButton>`,\n  \u002F\u002F ...\n}\n",[4518],{"type":46,"tag":68,"props":4519,"children":4520},{"__ignoreMap":240},[4521,4568,4580,4631,4667,4674,4681,4696,4825,4832],{"type":46,"tag":246,"props":4522,"children":4523},{"class":248,"line":249},[4524,4528,4532,4536,4540,4544,4548,4552,4556,4560,4564],{"type":46,"tag":246,"props":4525,"children":4526},{"style":268},[4527],{"type":52,"value":1192},{"type":46,"tag":246,"props":4529,"children":4530},{"style":1162},[4531],{"type":52,"value":3452},{"type":46,"tag":246,"props":4533,"children":4534},{"style":253},[4535],{"type":52,"value":1202},{"type":46,"tag":246,"props":4537,"children":4538},{"style":1162},[4539],{"type":52,"value":1742},{"type":46,"tag":246,"props":4541,"children":4542},{"style":253},[4543],{"type":52,"value":541},{"type":46,"tag":246,"props":4545,"children":4546},{"style":1295},[4547],{"type":52,"value":3469},{"type":46,"tag":246,"props":4549,"children":4550},{"style":1162},[4551],{"type":52,"value":1756},{"type":46,"tag":246,"props":4553,"children":4554},{"style":253},[4555],{"type":52,"value":1343},{"type":46,"tag":246,"props":4557,"children":4558},{"style":320},[4559],{"type":52,"value":3482},{"type":46,"tag":246,"props":4561,"children":4562},{"style":253},[4563],{"type":52,"value":1343},{"type":46,"tag":246,"props":4565,"children":4566},{"style":1162},[4567],{"type":52,"value":1774},{"type":46,"tag":246,"props":4569,"children":4570},{"class":248,"line":259},[4571,4575],{"type":46,"tag":246,"props":4572,"children":4573},{"style":268},[4574],{"type":52,"value":3021},{"type":46,"tag":246,"props":4576,"children":4577},{"style":1162},[4578],{"type":52,"value":4579}," iconSnippet\n",{"type":46,"tag":246,"props":4581,"children":4582},{"class":248,"line":289},[4583,4587,4591,4595,4599,4603,4607,4611,4615,4619,4623,4627],{"type":46,"tag":246,"props":4584,"children":4585},{"style":1156},[4586],{"type":52,"value":3034},{"type":46,"tag":246,"props":4588,"children":4589},{"style":1162},[4590],{"type":52,"value":3514},{"type":46,"tag":246,"props":4592,"children":4593},{"style":253},[4594],{"type":52,"value":3519},{"type":46,"tag":246,"props":4596,"children":4597},{"style":1162},[4598],{"type":52,"value":3524},{"type":46,"tag":246,"props":4600,"children":4601},{"style":253},[4602],{"type":52,"value":541},{"type":46,"tag":246,"props":4604,"children":4605},{"style":1162},[4606],{"type":52,"value":3533},{"type":46,"tag":246,"props":4608,"children":4609},{"style":253},[4610],{"type":52,"value":3044},{"type":46,"tag":246,"props":4612,"children":4613},{"style":253},[4614],{"type":52,"value":1175},{"type":46,"tag":246,"props":4616,"children":4617},{"style":320},[4618],{"type":52,"value":3546},{"type":46,"tag":246,"props":4620,"children":4621},{"style":253},[4622],{"type":52,"value":1343},{"type":46,"tag":246,"props":4624,"children":4625},{"style":1162},[4626],{"type":52,"value":3086},{"type":46,"tag":246,"props":4628,"children":4629},{"style":253},[4630],{"type":52,"value":256},{"type":46,"tag":246,"props":4632,"children":4633},{"class":248,"line":334},[4634,4639,4643,4647,4651,4655,4659,4663],{"type":46,"tag":246,"props":4635,"children":4636},{"style":1162},[4637],{"type":52,"value":4638},"  iconSnippet",{"type":46,"tag":246,"props":4640,"children":4641},{"style":253},[4642],{"type":52,"value":3103},{"type":46,"tag":246,"props":4644,"children":4645},{"style":1162},[4646],{"type":52,"value":3524},{"type":46,"tag":246,"props":4648,"children":4649},{"style":253},[4650],{"type":52,"value":541},{"type":46,"tag":246,"props":4652,"children":4653},{"style":1295},[4654],{"type":52,"value":3583},{"type":46,"tag":246,"props":4656,"children":4657},{"style":1277},[4658],{"type":52,"value":3588},{"type":46,"tag":246,"props":4660,"children":4661},{"style":253},[4662],{"type":52,"value":541},{"type":46,"tag":246,"props":4664,"children":4665},{"style":1162},[4666],{"type":52,"value":3597},{"type":46,"tag":246,"props":4668,"children":4669},{"class":248,"line":343},[4670],{"type":46,"tag":246,"props":4671,"children":4672},{"style":253},[4673],{"type":52,"value":349},{"type":46,"tag":246,"props":4675,"children":4676},{"class":248,"line":1219},[4677],{"type":46,"tag":246,"props":4678,"children":4679},{"emptyLinePlaceholder":1223},[4680],{"type":52,"value":1226},{"type":46,"tag":246,"props":4682,"children":4683},{"class":248,"line":1229},[4684,4688,4692],{"type":46,"tag":246,"props":4685,"children":4686},{"style":1156},[4687],{"type":52,"value":1261},{"type":46,"tag":246,"props":4689,"children":4690},{"style":1156},[4691],{"type":52,"value":1266},{"type":46,"tag":246,"props":4693,"children":4694},{"style":253},[4695],{"type":52,"value":286},{"type":46,"tag":246,"props":4697,"children":4698},{"class":248,"line":1238},[4699,4703,4707,4711,4715,4719,4723,4728,4732,4737,4742,4746,4750,4754,4758,4763,4767,4772,4776,4780,4784,4789,4794,4799,4803,4808,4812,4817,4821],{"type":46,"tag":246,"props":4700,"children":4701},{"style":1277},[4702],{"type":52,"value":1280},{"type":46,"tag":246,"props":4704,"children":4705},{"style":253},[4706],{"type":52,"value":281},{"type":46,"tag":246,"props":4708,"children":4709},{"style":1162},[4710],{"type":52,"value":1207},{"type":46,"tag":246,"props":4712,"children":4713},{"style":253},[4714],{"type":52,"value":541},{"type":46,"tag":246,"props":4716,"children":4717},{"style":1295},[4718],{"type":52,"value":68},{"type":46,"tag":246,"props":4720,"children":4721},{"style":253},[4722],{"type":52,"value":1302},{"type":46,"tag":246,"props":4724,"children":4725},{"style":320},[4726],{"type":52,"value":4727},"\u003CButton ",{"type":46,"tag":246,"props":4729,"children":4730},{"style":253},[4731],{"type":52,"value":3792},{"type":46,"tag":246,"props":4733,"children":4734},{"style":1162},[4735],{"type":52,"value":4736},"iconSnippet ",{"type":46,"tag":246,"props":4738,"children":4739},{"style":253},[4740],{"type":52,"value":4741},"?",{"type":46,"tag":246,"props":4743,"children":4744},{"style":1162},[4745],{"type":52,"value":1207},{"type":46,"tag":246,"props":4747,"children":4748},{"style":253},[4749],{"type":52,"value":541},{"type":46,"tag":246,"props":4751,"children":4752},{"style":1295},[4753],{"type":52,"value":68},{"type":46,"tag":246,"props":4755,"children":4756},{"style":253},[4757],{"type":52,"value":1302},{"type":46,"tag":246,"props":4759,"children":4760},{"style":320},[4761],{"type":52,"value":4762},"icon={",{"type":46,"tag":246,"props":4764,"children":4765},{"style":253},[4766],{"type":52,"value":3792},{"type":46,"tag":246,"props":4768,"children":4769},{"style":1162},[4770],{"type":52,"value":4771},"iconSnippet",{"type":46,"tag":246,"props":4773,"children":4774},{"style":253},[4775],{"type":52,"value":1928},{"type":46,"tag":246,"props":4777,"children":4778},{"style":320},[4779],{"type":52,"value":1928},{"type":46,"tag":246,"props":4781,"children":4782},{"style":253},[4783],{"type":52,"value":1302},{"type":46,"tag":246,"props":4785,"children":4786},{"style":253},[4787],{"type":52,"value":4788}," :",{"type":46,"tag":246,"props":4790,"children":4791},{"style":253},[4792],{"type":52,"value":4793}," ''}",{"type":46,"tag":246,"props":4795,"children":4796},{"style":320},[4797],{"type":52,"value":4798},">",{"type":46,"tag":246,"props":4800,"children":4801},{"style":253},[4802],{"type":52,"value":3792},{"type":46,"tag":246,"props":4804,"children":4805},{"style":1162},[4806],{"type":52,"value":4807},"label",{"type":46,"tag":246,"props":4809,"children":4810},{"style":253},[4811],{"type":52,"value":1928},{"type":46,"tag":246,"props":4813,"children":4814},{"style":320},[4815],{"type":52,"value":4816},"\u003C\u002FButton>",{"type":46,"tag":246,"props":4818,"children":4819},{"style":253},[4820],{"type":52,"value":1302},{"type":46,"tag":246,"props":4822,"children":4823},{"style":253},[4824],{"type":52,"value":1883},{"type":46,"tag":246,"props":4826,"children":4827},{"class":248,"line":1247},[4828],{"type":46,"tag":246,"props":4829,"children":4830},{"style":1131},[4831],{"type":52,"value":3822},{"type":46,"tag":246,"props":4833,"children":4834},{"class":248,"line":1255},[4835],{"type":46,"tag":246,"props":4836,"children":4837},{"style":253},[4838],{"type":52,"value":349},{"type":46,"tag":1060,"props":4840,"children":4842},{"id":4841},"conditional-props",[4843],{"type":52,"value":4844},"Conditional props",{"type":46,"tag":235,"props":4846,"children":4848},{"className":1119,"code":4847,"language":1121,"meta":240,"style":240},"const variant = instance.getEnum('Variant', { 'Primary': 'primary', 'Secondary': 'secondary' })\nconst disabled = instance.getBoolean('Disabled')\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      ${disabled ? 'disabled' : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  \u002F\u002F ...\n}\n",[4849],{"type":46,"tag":68,"props":4850,"children":4851},{"__ignoreMap":240},[4852,4971,5018,5025,5040,5068,5076,5102,5141,5149,5164,5172,5184,5191],{"type":46,"tag":246,"props":4853,"children":4854},{"class":248,"line":249},[4855,4859,4863,4867,4871,4875,4879,4883,4887,4891,4895,4899,4903,4907,4911,4915,4919,4923,4927,4931,4935,4939,4943,4947,4951,4955,4959,4963,4967],{"type":46,"tag":246,"props":4856,"children":4857},{"style":268},[4858],{"type":52,"value":1192},{"type":46,"tag":246,"props":4860,"children":4861},{"style":1162},[4862],{"type":52,"value":1802},{"type":46,"tag":246,"props":4864,"children":4865},{"style":253},[4866],{"type":52,"value":1202},{"type":46,"tag":246,"props":4868,"children":4869},{"style":1162},[4870],{"type":52,"value":1742},{"type":46,"tag":246,"props":4872,"children":4873},{"style":253},[4874],{"type":52,"value":541},{"type":46,"tag":246,"props":4876,"children":4877},{"style":1295},[4878],{"type":52,"value":1819},{"type":46,"tag":246,"props":4880,"children":4881},{"style":1162},[4882],{"type":52,"value":1756},{"type":46,"tag":246,"props":4884,"children":4885},{"style":253},[4886],{"type":52,"value":1343},{"type":46,"tag":246,"props":4888,"children":4889},{"style":320},[4890],{"type":52,"value":1832},{"type":46,"tag":246,"props":4892,"children":4893},{"style":253},[4894],{"type":52,"value":1343},{"type":46,"tag":246,"props":4896,"children":4897},{"style":253},[4898],{"type":52,"value":1316},{"type":46,"tag":246,"props":4900,"children":4901},{"style":253},[4902],{"type":52,"value":1419},{"type":46,"tag":246,"props":4904,"children":4905},{"style":253},[4906],{"type":52,"value":1175},{"type":46,"tag":246,"props":4908,"children":4909},{"style":1277},[4910],{"type":52,"value":1857},{"type":46,"tag":246,"props":4912,"children":4913},{"style":253},[4914],{"type":52,"value":1343},{"type":46,"tag":246,"props":4916,"children":4917},{"style":253},[4918],{"type":52,"value":281},{"type":46,"tag":246,"props":4920,"children":4921},{"style":253},[4922],{"type":52,"value":1175},{"type":46,"tag":246,"props":4924,"children":4925},{"style":320},[4926],{"type":52,"value":1874},{"type":46,"tag":246,"props":4928,"children":4929},{"style":253},[4930],{"type":52,"value":1343},{"type":46,"tag":246,"props":4932,"children":4933},{"style":253},[4934],{"type":52,"value":1316},{"type":46,"tag":246,"props":4936,"children":4937},{"style":253},[4938],{"type":52,"value":1175},{"type":46,"tag":246,"props":4940,"children":4941},{"style":1277},[4942],{"type":52,"value":1895},{"type":46,"tag":246,"props":4944,"children":4945},{"style":253},[4946],{"type":52,"value":1343},{"type":46,"tag":246,"props":4948,"children":4949},{"style":253},[4950],{"type":52,"value":281},{"type":46,"tag":246,"props":4952,"children":4953},{"style":253},[4954],{"type":52,"value":1175},{"type":46,"tag":246,"props":4956,"children":4957},{"style":320},[4958],{"type":52,"value":1912},{"type":46,"tag":246,"props":4960,"children":4961},{"style":253},[4962],{"type":52,"value":1343},{"type":46,"tag":246,"props":4964,"children":4965},{"style":253},[4966],{"type":52,"value":2307},{"type":46,"tag":246,"props":4968,"children":4969},{"style":1162},[4970],{"type":52,"value":1774},{"type":46,"tag":246,"props":4972,"children":4973},{"class":248,"line":259},[4974,4978,4982,4986,4990,4994,4998,5002,5006,5010,5014],{"type":46,"tag":246,"props":4975,"children":4976},{"style":268},[4977],{"type":52,"value":1192},{"type":46,"tag":246,"props":4979,"children":4980},{"style":1162},[4981],{"type":52,"value":2150},{"type":46,"tag":246,"props":4983,"children":4984},{"style":253},[4985],{"type":52,"value":1202},{"type":46,"tag":246,"props":4987,"children":4988},{"style":1162},[4989],{"type":52,"value":1742},{"type":46,"tag":246,"props":4991,"children":4992},{"style":253},[4993],{"type":52,"value":541},{"type":46,"tag":246,"props":4995,"children":4996},{"style":1295},[4997],{"type":52,"value":2167},{"type":46,"tag":246,"props":4999,"children":5000},{"style":1162},[5001],{"type":52,"value":1756},{"type":46,"tag":246,"props":5003,"children":5004},{"style":253},[5005],{"type":52,"value":1343},{"type":46,"tag":246,"props":5007,"children":5008},{"style":320},[5009],{"type":52,"value":2180},{"type":46,"tag":246,"props":5011,"children":5012},{"style":253},[5013],{"type":52,"value":1343},{"type":46,"tag":246,"props":5015,"children":5016},{"style":1162},[5017],{"type":52,"value":1774},{"type":46,"tag":246,"props":5019,"children":5020},{"class":248,"line":289},[5021],{"type":46,"tag":246,"props":5022,"children":5023},{"emptyLinePlaceholder":1223},[5024],{"type":52,"value":1226},{"type":46,"tag":246,"props":5026,"children":5027},{"class":248,"line":334},[5028,5032,5036],{"type":46,"tag":246,"props":5029,"children":5030},{"style":1156},[5031],{"type":52,"value":1261},{"type":46,"tag":246,"props":5033,"children":5034},{"style":1156},[5035],{"type":52,"value":1266},{"type":46,"tag":246,"props":5037,"children":5038},{"style":253},[5039],{"type":52,"value":286},{"type":46,"tag":246,"props":5041,"children":5042},{"class":248,"line":343},[5043,5047,5051,5055,5059,5063],{"type":46,"tag":246,"props":5044,"children":5045},{"style":1277},[5046],{"type":52,"value":1280},{"type":46,"tag":246,"props":5048,"children":5049},{"style":253},[5050],{"type":52,"value":281},{"type":46,"tag":246,"props":5052,"children":5053},{"style":1162},[5054],{"type":52,"value":1207},{"type":46,"tag":246,"props":5056,"children":5057},{"style":253},[5058],{"type":52,"value":541},{"type":46,"tag":246,"props":5060,"children":5061},{"style":1295},[5062],{"type":52,"value":68},{"type":46,"tag":246,"props":5064,"children":5065},{"style":253},[5066],{"type":52,"value":5067},"`\n",{"type":46,"tag":246,"props":5069,"children":5070},{"class":248,"line":1219},[5071],{"type":46,"tag":246,"props":5072,"children":5073},{"style":320},[5074],{"type":52,"value":5075},"    \u003CButton\n",{"type":46,"tag":246,"props":5077,"children":5078},{"class":248,"line":1229},[5079,5084,5088,5093,5097],{"type":46,"tag":246,"props":5080,"children":5081},{"style":320},[5082],{"type":52,"value":5083},"      variant=\"",{"type":46,"tag":246,"props":5085,"children":5086},{"style":253},[5087],{"type":52,"value":3792},{"type":46,"tag":246,"props":5089,"children":5090},{"style":1162},[5091],{"type":52,"value":5092},"variant",{"type":46,"tag":246,"props":5094,"children":5095},{"style":253},[5096],{"type":52,"value":1928},{"type":46,"tag":246,"props":5098,"children":5099},{"style":320},[5100],{"type":52,"value":5101},"\"\n",{"type":46,"tag":246,"props":5103,"children":5104},{"class":248,"line":1238},[5105,5110,5115,5119,5123,5128,5132,5136],{"type":46,"tag":246,"props":5106,"children":5107},{"style":253},[5108],{"type":52,"value":5109},"      ${",{"type":46,"tag":246,"props":5111,"children":5112},{"style":1162},[5113],{"type":52,"value":5114},"disabled ",{"type":46,"tag":246,"props":5116,"children":5117},{"style":253},[5118],{"type":52,"value":4741},{"type":46,"tag":246,"props":5120,"children":5121},{"style":253},[5122],{"type":52,"value":1175},{"type":46,"tag":246,"props":5124,"children":5125},{"style":320},[5126],{"type":52,"value":5127},"disabled",{"type":46,"tag":246,"props":5129,"children":5130},{"style":253},[5131],{"type":52,"value":1343},{"type":46,"tag":246,"props":5133,"children":5134},{"style":253},[5135],{"type":52,"value":4788},{"type":46,"tag":246,"props":5137,"children":5138},{"style":253},[5139],{"type":52,"value":5140}," ''}\n",{"type":46,"tag":246,"props":5142,"children":5143},{"class":248,"line":1247},[5144],{"type":46,"tag":246,"props":5145,"children":5146},{"style":320},[5147],{"type":52,"value":5148},"    >\n",{"type":46,"tag":246,"props":5150,"children":5151},{"class":248,"line":1255},[5152,5156,5160],{"type":46,"tag":246,"props":5153,"children":5154},{"style":253},[5155],{"type":52,"value":5109},{"type":46,"tag":246,"props":5157,"children":5158},{"style":1162},[5159],{"type":52,"value":4807},{"type":46,"tag":246,"props":5161,"children":5162},{"style":253},[5163],{"type":52,"value":349},{"type":46,"tag":246,"props":5165,"children":5166},{"class":248,"line":1273},[5167],{"type":46,"tag":246,"props":5168,"children":5169},{"style":320},[5170],{"type":52,"value":5171},"    \u003C\u002FButton>\n",{"type":46,"tag":246,"props":5173,"children":5174},{"class":248,"line":1324},[5175,5180],{"type":46,"tag":246,"props":5176,"children":5177},{"style":253},[5178],{"type":52,"value":5179},"  `",{"type":46,"tag":246,"props":5181,"children":5182},{"style":253},[5183],{"type":52,"value":1883},{"type":46,"tag":246,"props":5185,"children":5186},{"class":248,"line":1369},[5187],{"type":46,"tag":246,"props":5188,"children":5189},{"style":1131},[5190],{"type":52,"value":3822},{"type":46,"tag":246,"props":5192,"children":5193},{"class":248,"line":1404},[5194],{"type":46,"tag":246,"props":5195,"children":5196},{"style":253},[5197],{"type":52,"value":349},{"type":46,"tag":55,"props":5199,"children":5201},{"id":5200},"step-6-validate",[5202],{"type":52,"value":5203},"Step 6: Validate",{"type":46,"tag":62,"props":5205,"children":5206},{},[5207,5209,5214],{"type":52,"value":5208},"Read back the ",{"type":46,"tag":68,"props":5210,"children":5212},{"className":5211},[],[5213],{"type":52,"value":73},{"type":52,"value":5215}," file and review it against the following:",{"type":46,"tag":128,"props":5217,"children":5218},{},[5219,5229,5246,5282,5307],{"type":46,"tag":132,"props":5220,"children":5221},{},[5222,5227],{"type":46,"tag":84,"props":5223,"children":5224},{},[5225],{"type":52,"value":5226},"Property coverage",{"type":52,"value":5228}," — every Figma property from Step 3 should be accounted for in the template. Flag any that are missing and ask the user if they were intentionally omitted.",{"type":46,"tag":132,"props":5230,"children":5231},{},[5232,5237,5239,5244],{"type":46,"tag":84,"props":5233,"children":5234},{},[5235],{"type":52,"value":5236},"Valid, correctly typed code",{"type":52,"value":5238}," — all emitted code must be valid and correctly typed against the code component's ",{"type":46,"tag":68,"props":5240,"children":5242},{"className":5241},[],[5243],{"type":52,"value":2327},{"type":52,"value":5245}," interface. Never make up component properties — if a Figma property has no corresponding code prop, omit it rather than invent one.",{"type":46,"tag":132,"props":5247,"children":5248},{},[5249,5254,5256,5261,5262,5267,5268,5273,5275,5280],{"type":46,"tag":84,"props":5250,"children":5251},{},[5252],{"type":52,"value":5253},"No hardcoded children",{"type":52,"value":5255}," — verify that every INSTANCE_SWAP property and child component slot uses the dynamic APIs (",{"type":46,"tag":68,"props":5257,"children":5259},{"className":5258},[],[5260],{"type":52,"value":3648},{"type":52,"value":967},{"type":46,"tag":68,"props":5263,"children":5265},{"className":5264},[],[5266],{"type":52,"value":4209},{"type":52,"value":967},{"type":46,"tag":68,"props":5269,"children":5271},{"className":5270},[],[5272],{"type":52,"value":4216},{"type":52,"value":5274},", etc.) with ",{"type":46,"tag":68,"props":5276,"children":5278},{"className":5277},[],[5279],{"type":52,"value":1627},{"type":52,"value":5281},". No slot should contain hardcoded component content.",{"type":46,"tag":132,"props":5283,"children":5284},{},[5285,5290,5292,5297,5299,5305],{"type":46,"tag":84,"props":5286,"children":5287},{},[5288],{"type":52,"value":5289},"Rules and Pitfalls",{"type":52,"value":5291}," — check for the common mistakes listed below (string concatenation of template results, unnecessary ",{"type":46,"tag":68,"props":5293,"children":5295},{"className":5294},[],[5296],{"type":52,"value":1619},{"type":52,"value":5298}," guards, missing ",{"type":46,"tag":68,"props":5300,"children":5302},{"className":5301},[],[5303],{"type":52,"value":5304},"type === 'INSTANCE'",{"type":52,"value":5306}," checks, etc.)",{"type":46,"tag":132,"props":5308,"children":5309},{},[5310,5315,5317,5322,5323,5328,5329,5334,5336,5341,5343,5348,5350,5355],{"type":46,"tag":84,"props":5311,"children":5312},{},[5313],{"type":52,"value":5314},"Interpolation wrapping",{"type":52,"value":5316}," — strings (",{"type":46,"tag":68,"props":5318,"children":5320},{"className":5319},[],[5321],{"type":52,"value":1751},{"type":52,"value":967},{"type":46,"tag":68,"props":5324,"children":5326},{"className":5325},[],[5327],{"type":52,"value":1819},{"type":52,"value":967},{"type":46,"tag":68,"props":5330,"children":5332},{"className":5331},[],[5333],{"type":52,"value":3871},{"type":52,"value":5335},") wrapped in quotes, instance\u002Fsection values (",{"type":46,"tag":68,"props":5337,"children":5339},{"className":5338},[],[5340],{"type":52,"value":3894},{"type":52,"value":5342},") wrapped in braces, slot sections (",{"type":46,"tag":68,"props":5344,"children":5346},{"className":5345},[],[5347],{"type":52,"value":3712},{"type":52,"value":5349},") interpolated as snippet sections inside ",{"type":46,"tag":68,"props":5351,"children":5353},{"className":5352},[],[5354],{"type":52,"value":3932},{"type":52,"value":5356},", booleans using conditionals",{"type":46,"tag":62,"props":5358,"children":5359},{},[5360,5362,5368,5370,5374],{"type":52,"value":5361},"If anything looks uncertain, consult ",{"type":46,"tag":4507,"props":5363,"children":5365},{"href":5364},"references\u002Fapi.md",[5366],{"type":52,"value":5367},"api.md",{"type":52,"value":5369}," for API details and ",{"type":46,"tag":4507,"props":5371,"children":5372},{"href":4509},[5373],{"type":52,"value":4512},{"type":52,"value":5375}," for complex nesting.",{"type":46,"tag":55,"props":5377,"children":5379},{"id":5378},"inline-quick-reference",[5380],{"type":52,"value":5381},"Inline Quick Reference",{"type":46,"tag":1060,"props":5383,"children":5385},{"id":5384},"instance-methods",[5386,5392],{"type":46,"tag":68,"props":5387,"children":5389},{"className":5388},[],[5390],{"type":52,"value":5391},"instance.*",{"type":52,"value":5393}," Methods",{"type":46,"tag":378,"props":5395,"children":5396},{},[5397,5417],{"type":46,"tag":382,"props":5398,"children":5399},{},[5400],{"type":46,"tag":386,"props":5401,"children":5402},{},[5403,5407,5412],{"type":46,"tag":390,"props":5404,"children":5405},{},[5406],{"type":52,"value":3983},{"type":46,"tag":390,"props":5408,"children":5409},{},[5410],{"type":52,"value":5411},"Signature",{"type":46,"tag":390,"props":5413,"children":5414},{},[5415],{"type":52,"value":5416},"Returns",{"type":46,"tag":404,"props":5418,"children":5419},{},[5420,5449,5478,5507,5535,5562,5591,5620,5649,5678,5708],{"type":46,"tag":386,"props":5421,"children":5422},{},[5423,5431,5440],{"type":46,"tag":411,"props":5424,"children":5425},{},[5426],{"type":46,"tag":68,"props":5427,"children":5429},{"className":5428},[],[5430],{"type":52,"value":1751},{"type":46,"tag":411,"props":5432,"children":5433},{},[5434],{"type":46,"tag":68,"props":5435,"children":5437},{"className":5436},[],[5438],{"type":52,"value":5439},"(propName: string)",{"type":46,"tag":411,"props":5441,"children":5442},{},[5443],{"type":46,"tag":68,"props":5444,"children":5446},{"className":5445},[],[5447],{"type":52,"value":5448},"string",{"type":46,"tag":386,"props":5450,"children":5451},{},[5452,5460,5469],{"type":46,"tag":411,"props":5453,"children":5454},{},[5455],{"type":46,"tag":68,"props":5456,"children":5458},{"className":5457},[],[5459],{"type":52,"value":2167},{"type":46,"tag":411,"props":5461,"children":5462},{},[5463],{"type":46,"tag":68,"props":5464,"children":5466},{"className":5465},[],[5467],{"type":52,"value":5468},"(propName: string, mapping?: { true: any, false: any })",{"type":46,"tag":411,"props":5470,"children":5471},{},[5472],{"type":46,"tag":68,"props":5473,"children":5475},{"className":5474},[],[5476],{"type":52,"value":5477},"boolean | any",{"type":46,"tag":386,"props":5479,"children":5480},{},[5481,5489,5498],{"type":46,"tag":411,"props":5482,"children":5483},{},[5484],{"type":46,"tag":68,"props":5485,"children":5487},{"className":5486},[],[5488],{"type":52,"value":1819},{"type":46,"tag":411,"props":5490,"children":5491},{},[5492],{"type":46,"tag":68,"props":5493,"children":5495},{"className":5494},[],[5496],{"type":52,"value":5497},"(propName: string, mapping: { [figmaVal]: codeVal })",{"type":46,"tag":411,"props":5499,"children":5500},{},[5501],{"type":46,"tag":68,"props":5502,"children":5504},{"className":5503},[],[5505],{"type":52,"value":5506},"any",{"type":46,"tag":386,"props":5508,"children":5509},{},[5510,5518,5526],{"type":46,"tag":411,"props":5511,"children":5512},{},[5513],{"type":46,"tag":68,"props":5514,"children":5516},{"className":5515},[],[5517],{"type":52,"value":3469},{"type":46,"tag":411,"props":5519,"children":5520},{},[5521],{"type":46,"tag":68,"props":5522,"children":5524},{"className":5523},[],[5525],{"type":52,"value":5439},{"type":46,"tag":411,"props":5527,"children":5528},{},[5529],{"type":46,"tag":68,"props":5530,"children":5532},{"className":5531},[],[5533],{"type":52,"value":5534},"InstanceHandle | null",{"type":46,"tag":386,"props":5536,"children":5537},{},[5538,5546,5554],{"type":46,"tag":411,"props":5539,"children":5540},{},[5541],{"type":46,"tag":68,"props":5542,"children":5544},{"className":5543},[],[5545],{"type":52,"value":3712},{"type":46,"tag":411,"props":5547,"children":5548},{},[5549],{"type":46,"tag":68,"props":5550,"children":5552},{"className":5551},[],[5553],{"type":52,"value":5439},{"type":46,"tag":411,"props":5555,"children":5556},{},[5557],{"type":46,"tag":68,"props":5558,"children":5560},{"className":5559},[],[5561],{"type":52,"value":3924},{"type":46,"tag":386,"props":5563,"children":5564},{},[5565,5574,5582],{"type":46,"tag":411,"props":5566,"children":5567},{},[5568],{"type":46,"tag":68,"props":5569,"children":5571},{"className":5570},[],[5572],{"type":52,"value":5573},"getPropertyValue",{"type":46,"tag":411,"props":5575,"children":5576},{},[5577],{"type":46,"tag":68,"props":5578,"children":5580},{"className":5579},[],[5581],{"type":52,"value":5439},{"type":46,"tag":411,"props":5583,"children":5584},{},[5585],{"type":46,"tag":68,"props":5586,"children":5588},{"className":5587},[],[5589],{"type":52,"value":5590},"string | boolean",{"type":46,"tag":386,"props":5592,"children":5593},{},[5594,5602,5611],{"type":46,"tag":411,"props":5595,"children":5596},{},[5597],{"type":46,"tag":68,"props":5598,"children":5600},{"className":5599},[],[5601],{"type":52,"value":4268},{"type":46,"tag":411,"props":5603,"children":5604},{},[5605],{"type":46,"tag":68,"props":5606,"children":5608},{"className":5607},[],[5609],{"type":52,"value":5610},"(layerName: string, opts?: SelectorOptions)",{"type":46,"tag":411,"props":5612,"children":5613},{},[5614],{"type":46,"tag":68,"props":5615,"children":5617},{"className":5616},[],[5618],{"type":52,"value":5619},"InstanceHandle | ErrorHandle",{"type":46,"tag":386,"props":5621,"children":5622},{},[5623,5632,5640],{"type":46,"tag":411,"props":5624,"children":5625},{},[5626],{"type":46,"tag":68,"props":5627,"children":5629},{"className":5628},[],[5630],{"type":52,"value":5631},"findText",{"type":46,"tag":411,"props":5633,"children":5634},{},[5635],{"type":46,"tag":68,"props":5636,"children":5638},{"className":5637},[],[5639],{"type":52,"value":5610},{"type":46,"tag":411,"props":5641,"children":5642},{},[5643],{"type":46,"tag":68,"props":5644,"children":5646},{"className":5645},[],[5647],{"type":52,"value":5648},"TextHandle | ErrorHandle",{"type":46,"tag":386,"props":5650,"children":5651},{},[5652,5661,5670],{"type":46,"tag":411,"props":5653,"children":5654},{},[5655],{"type":46,"tag":68,"props":5656,"children":5658},{"className":5657},[],[5659],{"type":52,"value":5660},"findConnectedInstance",{"type":46,"tag":411,"props":5662,"children":5663},{},[5664],{"type":46,"tag":68,"props":5665,"children":5667},{"className":5666},[],[5668],{"type":52,"value":5669},"(codeConnectId: string, opts?: SelectorOptions)",{"type":46,"tag":411,"props":5671,"children":5672},{},[5673],{"type":46,"tag":68,"props":5674,"children":5676},{"className":5675},[],[5677],{"type":52,"value":5619},{"type":46,"tag":386,"props":5679,"children":5680},{},[5681,5690,5699],{"type":46,"tag":411,"props":5682,"children":5683},{},[5684],{"type":46,"tag":68,"props":5685,"children":5687},{"className":5686},[],[5688],{"type":52,"value":5689},"findConnectedInstances",{"type":46,"tag":411,"props":5691,"children":5692},{},[5693],{"type":46,"tag":68,"props":5694,"children":5696},{"className":5695},[],[5697],{"type":52,"value":5698},"(selector: (node) => boolean, opts?: SelectorOptions)",{"type":46,"tag":411,"props":5700,"children":5701},{},[5702],{"type":46,"tag":68,"props":5703,"children":5705},{"className":5704},[],[5706],{"type":52,"value":5707},"InstanceHandle[]",{"type":46,"tag":386,"props":5709,"children":5710},{},[5711,5720,5728],{"type":46,"tag":411,"props":5712,"children":5713},{},[5714],{"type":46,"tag":68,"props":5715,"children":5717},{"className":5716},[],[5718],{"type":52,"value":5719},"findLayers",{"type":46,"tag":411,"props":5721,"children":5722},{},[5723],{"type":46,"tag":68,"props":5724,"children":5726},{"className":5725},[],[5727],{"type":52,"value":5698},{"type":46,"tag":411,"props":5729,"children":5730},{},[5731],{"type":46,"tag":68,"props":5732,"children":5734},{"className":5733},[],[5735],{"type":52,"value":5736},"(InstanceHandle | TextHandle)[]",{"type":46,"tag":1060,"props":5738,"children":5740},{"id":5739},"instancehandle-methods",[5741],{"type":52,"value":5742},"InstanceHandle Methods",{"type":46,"tag":378,"props":5744,"children":5745},{},[5746,5760],{"type":46,"tag":382,"props":5747,"children":5748},{},[5749],{"type":46,"tag":386,"props":5750,"children":5751},{},[5752,5756],{"type":46,"tag":390,"props":5753,"children":5754},{},[5755],{"type":52,"value":3983},{"type":46,"tag":390,"props":5757,"children":5758},{},[5759],{"type":52,"value":5416},{"type":46,"tag":404,"props":5761,"children":5762},{},[5763,5783,5803],{"type":46,"tag":386,"props":5764,"children":5765},{},[5766,5774],{"type":46,"tag":411,"props":5767,"children":5768},{},[5769],{"type":46,"tag":68,"props":5770,"children":5772},{"className":5771},[],[5773],{"type":52,"value":1619},{"type":46,"tag":411,"props":5775,"children":5776},{},[5777],{"type":46,"tag":68,"props":5778,"children":5780},{"className":5779},[],[5781],{"type":52,"value":5782},"boolean",{"type":46,"tag":386,"props":5784,"children":5785},{},[5786,5794],{"type":46,"tag":411,"props":5787,"children":5788},{},[5789],{"type":46,"tag":68,"props":5790,"children":5792},{"className":5791},[],[5793],{"type":52,"value":1627},{"type":46,"tag":411,"props":5795,"children":5796},{},[5797],{"type":46,"tag":68,"props":5798,"children":5800},{"className":5799},[],[5801],{"type":52,"value":5802},"{ example: ResultSection[], metadata: Metadata }",{"type":46,"tag":386,"props":5804,"children":5805},{},[5806,5815],{"type":46,"tag":411,"props":5807,"children":5808},{},[5809],{"type":46,"tag":68,"props":5810,"children":5812},{"className":5811},[],[5813],{"type":52,"value":5814},"codeConnectId()",{"type":46,"tag":411,"props":5816,"children":5817},{},[5818],{"type":46,"tag":68,"props":5819,"children":5821},{"className":5820},[],[5822],{"type":52,"value":5823},"string | null",{"type":46,"tag":1060,"props":5825,"children":5827},{"id":5826},"texthandle-properties",[5828],{"type":52,"value":5829},"TextHandle Properties",{"type":46,"tag":378,"props":5831,"children":5832},{},[5833,5848],{"type":46,"tag":382,"props":5834,"children":5835},{},[5836],{"type":46,"tag":386,"props":5837,"children":5838},{},[5839,5844],{"type":46,"tag":390,"props":5840,"children":5841},{},[5842],{"type":52,"value":5843},"Property",{"type":46,"tag":390,"props":5845,"children":5846},{},[5847],{"type":52,"value":2803},{"type":46,"tag":404,"props":5849,"children":5850},{},[5851,5870],{"type":46,"tag":386,"props":5852,"children":5853},{},[5854,5862],{"type":46,"tag":411,"props":5855,"children":5856},{},[5857],{"type":46,"tag":68,"props":5858,"children":5860},{"className":5859},[],[5861],{"type":52,"value":1700},{"type":46,"tag":411,"props":5863,"children":5864},{},[5865],{"type":46,"tag":68,"props":5866,"children":5868},{"className":5867},[],[5869],{"type":52,"value":5448},{"type":46,"tag":386,"props":5871,"children":5872},{},[5873,5882],{"type":46,"tag":411,"props":5874,"children":5875},{},[5876],{"type":46,"tag":68,"props":5877,"children":5879},{"className":5878},[],[5880],{"type":52,"value":5881},".name",{"type":46,"tag":411,"props":5883,"children":5884},{},[5885],{"type":46,"tag":68,"props":5886,"children":5888},{"className":5887},[],[5889],{"type":52,"value":5448},{"type":46,"tag":1060,"props":5891,"children":5893},{"id":5892},"selectoroptions",[5894],{"type":52,"value":5895},"SelectorOptions",{"type":46,"tag":235,"props":5897,"children":5899},{"className":1119,"code":5898,"language":1121,"meta":240,"style":240},"{ path?: string[], traverseInstances?: boolean }\n",[5900],{"type":46,"tag":68,"props":5901,"children":5902},{"__ignoreMap":240},[5903],{"type":46,"tag":246,"props":5904,"children":5905},{"class":248,"line":249},[5906,5911,5916,5921,5926,5931,5935,5940,5944,5949],{"type":46,"tag":246,"props":5907,"children":5908},{"style":253},[5909],{"type":52,"value":5910},"{",{"type":46,"tag":246,"props":5912,"children":5913},{"style":1162},[5914],{"type":52,"value":5915}," path",{"type":46,"tag":246,"props":5917,"children":5918},{"style":253},[5919],{"type":52,"value":5920},"?:",{"type":46,"tag":246,"props":5922,"children":5923},{"style":1162},[5924],{"type":52,"value":5925}," string",{"type":46,"tag":246,"props":5927,"children":5928},{"style":1277},[5929],{"type":52,"value":5930},"[]",{"type":46,"tag":246,"props":5932,"children":5933},{"style":253},[5934],{"type":52,"value":1316},{"type":46,"tag":246,"props":5936,"children":5937},{"style":1162},[5938],{"type":52,"value":5939}," traverseInstances",{"type":46,"tag":246,"props":5941,"children":5942},{"style":253},[5943],{"type":52,"value":5920},{"type":46,"tag":246,"props":5945,"children":5946},{"style":1162},[5947],{"type":52,"value":5948}," boolean",{"type":46,"tag":246,"props":5950,"children":5951},{"style":253},[5952],{"type":52,"value":5953}," }\n",{"type":46,"tag":128,"props":5955,"children":5956},{},[5957,5982],{"type":46,"tag":132,"props":5958,"children":5959},{},[5960,5966,5968,5973,5975,5980],{"type":46,"tag":68,"props":5961,"children":5963},{"className":5962},[],[5964],{"type":52,"value":5965},"traverseInstances: true",{"type":52,"value":5967}," — required when the target lives inside another nested instance. Without it, ",{"type":46,"tag":68,"props":5969,"children":5971},{"className":5970},[],[5972],{"type":52,"value":4268},{"type":52,"value":5974},"\u002F",{"type":46,"tag":68,"props":5976,"children":5978},{"className":5977},[],[5979],{"type":52,"value":5631},{"type":52,"value":5981}," only search the current instance's own layers and stop at nested instance boundaries.",{"type":46,"tag":132,"props":5983,"children":5984},{},[5985,5991],{"type":46,"tag":68,"props":5986,"children":5988},{"className":5987},[],[5989],{"type":52,"value":5990},"path: string[]",{"type":52,"value":5992}," — disambiguates when multiple descendants share the same layer name. Lists parent layer names that must appear on the path to the target.",{"type":46,"tag":62,"props":5994,"children":5995},{},[5996],{"type":46,"tag":84,"props":5997,"children":5998},{},[5999],{"type":52,"value":6000},"Examples:",{"type":46,"tag":235,"props":6002,"children":6004},{"className":1119,"code":6003,"language":1121,"meta":240,"style":240},"\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F \"mychild\" sits inside nested instance C, so plain findInstance returns ErrorHandle.\ninstance.findInstance('mychild', { traverseInstances: true })\n\n\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F   A > D (instance) > \"mychild\"\n\u002F\u002F Two \"mychild\" layers exist — use path to pick the one under C.\ninstance.findInstance('mychild', { traverseInstances: true, path: ['C'] })\n",[6005],{"type":46,"tag":68,"props":6006,"children":6007},{"__ignoreMap":240},[6008,6016,6024,6032,6093,6100,6107,6114,6122,6130],{"type":46,"tag":246,"props":6009,"children":6010},{"class":248,"line":249},[6011],{"type":46,"tag":246,"props":6012,"children":6013},{"style":1131},[6014],{"type":52,"value":6015},"\u002F\u002F Layer hierarchy:\n",{"type":46,"tag":246,"props":6017,"children":6018},{"class":248,"line":259},[6019],{"type":46,"tag":246,"props":6020,"children":6021},{"style":1131},[6022],{"type":52,"value":6023},"\u002F\u002F   A > C (instance) > \"mychild\"\n",{"type":46,"tag":246,"props":6025,"children":6026},{"class":248,"line":289},[6027],{"type":46,"tag":246,"props":6028,"children":6029},{"style":1131},[6030],{"type":52,"value":6031},"\u002F\u002F \"mychild\" sits inside nested instance C, so plain findInstance returns ErrorHandle.\n",{"type":46,"tag":246,"props":6033,"children":6034},{"class":248,"line":334},[6035,6040,6044,6048,6052,6056,6061,6065,6069,6073,6077,6081,6085,6089],{"type":46,"tag":246,"props":6036,"children":6037},{"style":1162},[6038],{"type":52,"value":6039},"instance",{"type":46,"tag":246,"props":6041,"children":6042},{"style":253},[6043],{"type":52,"value":541},{"type":46,"tag":246,"props":6045,"children":6046},{"style":1295},[6047],{"type":52,"value":4268},{"type":46,"tag":246,"props":6049,"children":6050},{"style":1162},[6051],{"type":52,"value":1756},{"type":46,"tag":246,"props":6053,"children":6054},{"style":253},[6055],{"type":52,"value":1343},{"type":46,"tag":246,"props":6057,"children":6058},{"style":320},[6059],{"type":52,"value":6060},"mychild",{"type":46,"tag":246,"props":6062,"children":6063},{"style":253},[6064],{"type":52,"value":1343},{"type":46,"tag":246,"props":6066,"children":6067},{"style":253},[6068],{"type":52,"value":1316},{"type":46,"tag":246,"props":6070,"children":6071},{"style":253},[6072],{"type":52,"value":1419},{"type":46,"tag":246,"props":6074,"children":6075},{"style":1277},[6076],{"type":52,"value":5939},{"type":46,"tag":246,"props":6078,"children":6079},{"style":253},[6080],{"type":52,"value":281},{"type":46,"tag":246,"props":6082,"children":6083},{"style":1440},[6084],{"type":52,"value":1443},{"type":46,"tag":246,"props":6086,"children":6087},{"style":253},[6088],{"type":52,"value":2307},{"type":46,"tag":246,"props":6090,"children":6091},{"style":1162},[6092],{"type":52,"value":1774},{"type":46,"tag":246,"props":6094,"children":6095},{"class":248,"line":343},[6096],{"type":46,"tag":246,"props":6097,"children":6098},{"emptyLinePlaceholder":1223},[6099],{"type":52,"value":1226},{"type":46,"tag":246,"props":6101,"children":6102},{"class":248,"line":1219},[6103],{"type":46,"tag":246,"props":6104,"children":6105},{"style":1131},[6106],{"type":52,"value":6015},{"type":46,"tag":246,"props":6108,"children":6109},{"class":248,"line":1229},[6110],{"type":46,"tag":246,"props":6111,"children":6112},{"style":1131},[6113],{"type":52,"value":6023},{"type":46,"tag":246,"props":6115,"children":6116},{"class":248,"line":1238},[6117],{"type":46,"tag":246,"props":6118,"children":6119},{"style":1131},[6120],{"type":52,"value":6121},"\u002F\u002F   A > D (instance) > \"mychild\"\n",{"type":46,"tag":246,"props":6123,"children":6124},{"class":248,"line":1247},[6125],{"type":46,"tag":246,"props":6126,"children":6127},{"style":1131},[6128],{"type":52,"value":6129},"\u002F\u002F Two \"mychild\" layers exist — use path to pick the one under C.\n",{"type":46,"tag":246,"props":6131,"children":6132},{"class":248,"line":1255},[6133,6137,6141,6145,6149,6153,6157,6161,6165,6169,6173,6177,6181,6185,6189,6193,6197,6201,6206,6210,6215,6219],{"type":46,"tag":246,"props":6134,"children":6135},{"style":1162},[6136],{"type":52,"value":6039},{"type":46,"tag":246,"props":6138,"children":6139},{"style":253},[6140],{"type":52,"value":541},{"type":46,"tag":246,"props":6142,"children":6143},{"style":1295},[6144],{"type":52,"value":4268},{"type":46,"tag":246,"props":6146,"children":6147},{"style":1162},[6148],{"type":52,"value":1756},{"type":46,"tag":246,"props":6150,"children":6151},{"style":253},[6152],{"type":52,"value":1343},{"type":46,"tag":246,"props":6154,"children":6155},{"style":320},[6156],{"type":52,"value":6060},{"type":46,"tag":246,"props":6158,"children":6159},{"style":253},[6160],{"type":52,"value":1343},{"type":46,"tag":246,"props":6162,"children":6163},{"style":253},[6164],{"type":52,"value":1316},{"type":46,"tag":246,"props":6166,"children":6167},{"style":253},[6168],{"type":52,"value":1419},{"type":46,"tag":246,"props":6170,"children":6171},{"style":1277},[6172],{"type":52,"value":5939},{"type":46,"tag":246,"props":6174,"children":6175},{"style":253},[6176],{"type":52,"value":281},{"type":46,"tag":246,"props":6178,"children":6179},{"style":1440},[6180],{"type":52,"value":1443},{"type":46,"tag":246,"props":6182,"children":6183},{"style":253},[6184],{"type":52,"value":1316},{"type":46,"tag":246,"props":6186,"children":6187},{"style":1277},[6188],{"type":52,"value":5915},{"type":46,"tag":246,"props":6190,"children":6191},{"style":253},[6192],{"type":52,"value":281},{"type":46,"tag":246,"props":6194,"children":6195},{"style":1162},[6196],{"type":52,"value":313},{"type":46,"tag":246,"props":6198,"children":6199},{"style":253},[6200],{"type":52,"value":1343},{"type":46,"tag":246,"props":6202,"children":6203},{"style":320},[6204],{"type":52,"value":6205},"C",{"type":46,"tag":246,"props":6207,"children":6208},{"style":253},[6209],{"type":52,"value":1343},{"type":46,"tag":246,"props":6211,"children":6212},{"style":1162},[6213],{"type":52,"value":6214},"] ",{"type":46,"tag":246,"props":6216,"children":6217},{"style":253},[6218],{"type":52,"value":1928},{"type":46,"tag":246,"props":6220,"children":6221},{"style":1162},[6222],{"type":52,"value":1774},{"type":46,"tag":62,"props":6224,"children":6225},{},[6226,6231,6233,6239,6241,6246],{"type":46,"tag":84,"props":6227,"children":6228},{},[6229],{"type":52,"value":6230},"When to reach into a nested instance from a parent template:",{"type":52,"value":6232}," only when the parent code component (from Step 4) takes the nested layer as a prop value itself (e.g. ",{"type":46,"tag":68,"props":6234,"children":6236},{"className":6235},[],[6237],{"type":52,"value":6238},"\u003CC show={\u003CB \u002F>} \u002F>",{"type":52,"value":6240}," — A forwards B into C). If the parent just composes C and C renders B internally, resolve C with ",{"type":46,"tag":68,"props":6242,"children":6244},{"className":6243},[],[6245],{"type":52,"value":1627},{"type":52,"value":6247}," and let C's own template handle B — don't duplicate B's rendering at the parent level.",{"type":46,"tag":1060,"props":6249,"children":6251},{"id":6250},"export-structure",[6252],{"type":52,"value":6253},"Export Structure",{"type":46,"tag":235,"props":6255,"children":6257},{"className":1119,"code":6256,"language":1121,"meta":240,"style":240},"export default {\n  example: figma.code`...`,                      \u002F\u002F Required: ResultSection[]\n  id: 'component-name',                         \u002F\u002F Required: string\n  imports: ['import { X } from \"...\"'],          \u002F\u002F Optional: string[]\n  metadata: { nestable: true, props: {} }        \u002F\u002F Optional\n}\n",[6258],{"type":46,"tag":68,"props":6259,"children":6260},{"__ignoreMap":240},[6261,6276,6321,6353,6394,6448],{"type":46,"tag":246,"props":6262,"children":6263},{"class":248,"line":249},[6264,6268,6272],{"type":46,"tag":246,"props":6265,"children":6266},{"style":1156},[6267],{"type":52,"value":1261},{"type":46,"tag":246,"props":6269,"children":6270},{"style":1156},[6271],{"type":52,"value":1266},{"type":46,"tag":246,"props":6273,"children":6274},{"style":253},[6275],{"type":52,"value":286},{"type":46,"tag":246,"props":6277,"children":6278},{"class":248,"line":259},[6279,6283,6287,6291,6295,6299,6303,6308,6312,6316],{"type":46,"tag":246,"props":6280,"children":6281},{"style":1277},[6282],{"type":52,"value":1280},{"type":46,"tag":246,"props":6284,"children":6285},{"style":253},[6286],{"type":52,"value":281},{"type":46,"tag":246,"props":6288,"children":6289},{"style":1162},[6290],{"type":52,"value":1207},{"type":46,"tag":246,"props":6292,"children":6293},{"style":253},[6294],{"type":52,"value":541},{"type":46,"tag":246,"props":6296,"children":6297},{"style":1295},[6298],{"type":52,"value":68},{"type":46,"tag":246,"props":6300,"children":6301},{"style":253},[6302],{"type":52,"value":1302},{"type":46,"tag":246,"props":6304,"children":6305},{"style":320},[6306],{"type":52,"value":6307},"...",{"type":46,"tag":246,"props":6309,"children":6310},{"style":253},[6311],{"type":52,"value":1302},{"type":46,"tag":246,"props":6313,"children":6314},{"style":253},[6315],{"type":52,"value":1316},{"type":46,"tag":246,"props":6317,"children":6318},{"style":1131},[6319],{"type":52,"value":6320},"                      \u002F\u002F Required: ResultSection[]\n",{"type":46,"tag":246,"props":6322,"children":6323},{"class":248,"line":289},[6324,6328,6332,6336,6340,6344,6348],{"type":46,"tag":246,"props":6325,"children":6326},{"style":1277},[6327],{"type":52,"value":1375},{"type":46,"tag":246,"props":6329,"children":6330},{"style":253},[6331],{"type":52,"value":281},{"type":46,"tag":246,"props":6333,"children":6334},{"style":253},[6335],{"type":52,"value":1175},{"type":46,"tag":246,"props":6337,"children":6338},{"style":320},[6339],{"type":52,"value":1388},{"type":46,"tag":246,"props":6341,"children":6342},{"style":253},[6343],{"type":52,"value":1343},{"type":46,"tag":246,"props":6345,"children":6346},{"style":253},[6347],{"type":52,"value":1316},{"type":46,"tag":246,"props":6349,"children":6350},{"style":1131},[6351],{"type":52,"value":6352},"                         \u002F\u002F Required: string\n",{"type":46,"tag":246,"props":6354,"children":6355},{"class":248,"line":334},[6356,6360,6364,6368,6372,6377,6381,6385,6389],{"type":46,"tag":246,"props":6357,"children":6358},{"style":1277},[6359],{"type":52,"value":1330},{"type":46,"tag":246,"props":6361,"children":6362},{"style":253},[6363],{"type":52,"value":281},{"type":46,"tag":246,"props":6365,"children":6366},{"style":1162},[6367],{"type":52,"value":313},{"type":46,"tag":246,"props":6369,"children":6370},{"style":253},[6371],{"type":52,"value":1343},{"type":46,"tag":246,"props":6373,"children":6374},{"style":320},[6375],{"type":52,"value":6376},"import { X } from \"...\"",{"type":46,"tag":246,"props":6378,"children":6379},{"style":253},[6380],{"type":52,"value":1343},{"type":46,"tag":246,"props":6382,"children":6383},{"style":1162},[6384],{"type":52,"value":1357},{"type":46,"tag":246,"props":6386,"children":6387},{"style":253},[6388],{"type":52,"value":1316},{"type":46,"tag":246,"props":6390,"children":6391},{"style":1131},[6392],{"type":52,"value":6393},"          \u002F\u002F Optional: string[]\n",{"type":46,"tag":246,"props":6395,"children":6396},{"class":248,"line":343},[6397,6401,6405,6409,6414,6418,6422,6426,6431,6435,6439,6443],{"type":46,"tag":246,"props":6398,"children":6399},{"style":1277},[6400],{"type":52,"value":1410},{"type":46,"tag":246,"props":6402,"children":6403},{"style":253},[6404],{"type":52,"value":281},{"type":46,"tag":246,"props":6406,"children":6407},{"style":253},[6408],{"type":52,"value":1419},{"type":46,"tag":246,"props":6410,"children":6411},{"style":1277},[6412],{"type":52,"value":6413}," nestable",{"type":46,"tag":246,"props":6415,"children":6416},{"style":253},[6417],{"type":52,"value":281},{"type":46,"tag":246,"props":6419,"children":6420},{"style":1440},[6421],{"type":52,"value":1443},{"type":46,"tag":246,"props":6423,"children":6424},{"style":253},[6425],{"type":52,"value":1316},{"type":46,"tag":246,"props":6427,"children":6428},{"style":1277},[6429],{"type":52,"value":6430}," props",{"type":46,"tag":246,"props":6432,"children":6433},{"style":253},[6434],{"type":52,"value":281},{"type":46,"tag":246,"props":6436,"children":6437},{"style":253},[6438],{"type":52,"value":1470},{"type":46,"tag":246,"props":6440,"children":6441},{"style":253},[6442],{"type":52,"value":2307},{"type":46,"tag":246,"props":6444,"children":6445},{"style":1131},[6446],{"type":52,"value":6447},"        \u002F\u002F Optional\n",{"type":46,"tag":246,"props":6449,"children":6450},{"class":248,"line":1219},[6451],{"type":46,"tag":246,"props":6452,"children":6453},{"style":253},[6454],{"type":52,"value":349},{"type":46,"tag":55,"props":6456,"children":6458},{"id":6457},"rules-and-pitfalls",[6459],{"type":52,"value":5289},{"type":46,"tag":925,"props":6461,"children":6462},{},[6463,6516,6781,6845,6883,6941,6958,7259,7626],{"type":46,"tag":132,"props":6464,"children":6465},{},[6466,6471,6472,6477,6479,6485,6487,6493,6494,6500,6502,6508,6510],{"type":46,"tag":84,"props":6467,"children":6468},{},[6469],{"type":52,"value":6470},"Never string-concatenate template results.",{"type":52,"value":780},{"type":46,"tag":68,"props":6473,"children":6475},{"className":6474},[],[6476],{"type":52,"value":3894},{"type":52,"value":6478}," is a ",{"type":46,"tag":68,"props":6480,"children":6482},{"className":6481},[],[6483],{"type":52,"value":6484},"ResultSection[]",{"type":52,"value":6486}," object, not a string. Using ",{"type":46,"tag":68,"props":6488,"children":6490},{"className":6489},[],[6491],{"type":52,"value":6492},"+",{"type":52,"value":1077},{"type":46,"tag":68,"props":6495,"children":6497},{"className":6496},[],[6498],{"type":52,"value":6499},".join()",{"type":52,"value":6501}," produces ",{"type":46,"tag":68,"props":6503,"children":6505},{"className":6504},[],[6506],{"type":52,"value":6507},"[object Object]",{"type":52,"value":6509},". Always interpolate inside tagged templates: ",{"type":46,"tag":68,"props":6511,"children":6513},{"className":6512},[],[6514],{"type":52,"value":6515},"figma.code`${snippet1}${snippet2}`",{"type":46,"tag":132,"props":6517,"children":6518},{},[6519,6531,6533,6538,6540,6545,6547],{"type":46,"tag":84,"props":6520,"children":6521},{},[6522,6524,6529],{"type":52,"value":6523},"Do not use ",{"type":46,"tag":68,"props":6525,"children":6527},{"className":6526},[],[6528],{"type":52,"value":1619},{"type":52,"value":6530}," guards.",{"type":52,"value":6532}," Call ",{"type":46,"tag":68,"props":6534,"children":6536},{"className":6535},[],[6537],{"type":52,"value":1627},{"type":52,"value":6539}," directly on any instance after a ",{"type":46,"tag":68,"props":6541,"children":6543},{"className":6542},[],[6544],{"type":52,"value":5304},{"type":52,"value":6546}," check. The runtime handles instances without Code Connect automatically.",{"type":46,"tag":235,"props":6548,"children":6550},{"className":1119,"code":6549,"language":1121,"meta":240,"style":240},"\u002F\u002F WRONG — hasCodeConnect() gate drops non-CC instances\nif (icon && icon.type === 'INSTANCE' && icon.hasCodeConnect()) {\n  iconCode = icon.executeTemplate().example\n}\n\n\u002F\u002F CORRECT — let the runtime handle all instances\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n",[6551],{"type":46,"tag":68,"props":6552,"children":6553},{"__ignoreMap":240},[6554,6562,6631,6666,6673,6680,6688,6739,6774],{"type":46,"tag":246,"props":6555,"children":6556},{"class":248,"line":249},[6557],{"type":46,"tag":246,"props":6558,"children":6559},{"style":1131},[6560],{"type":52,"value":6561},"\u002F\u002F WRONG — hasCodeConnect() gate drops non-CC instances\n",{"type":46,"tag":246,"props":6563,"children":6564},{"class":248,"line":259},[6565,6569,6573,6577,6581,6585,6589,6593,6597,6601,6605,6609,6613,6617,6622,6627],{"type":46,"tag":246,"props":6566,"children":6567},{"style":1156},[6568],{"type":52,"value":3034},{"type":46,"tag":246,"props":6570,"children":6571},{"style":1162},[6572],{"type":52,"value":3514},{"type":46,"tag":246,"props":6574,"children":6575},{"style":253},[6576],{"type":52,"value":3519},{"type":46,"tag":246,"props":6578,"children":6579},{"style":1162},[6580],{"type":52,"value":3524},{"type":46,"tag":246,"props":6582,"children":6583},{"style":253},[6584],{"type":52,"value":541},{"type":46,"tag":246,"props":6586,"children":6587},{"style":1162},[6588],{"type":52,"value":3533},{"type":46,"tag":246,"props":6590,"children":6591},{"style":253},[6592],{"type":52,"value":3044},{"type":46,"tag":246,"props":6594,"children":6595},{"style":253},[6596],{"type":52,"value":1175},{"type":46,"tag":246,"props":6598,"children":6599},{"style":320},[6600],{"type":52,"value":3546},{"type":46,"tag":246,"props":6602,"children":6603},{"style":253},[6604],{"type":52,"value":1343},{"type":46,"tag":246,"props":6606,"children":6607},{"style":253},[6608],{"type":52,"value":3061},{"type":46,"tag":246,"props":6610,"children":6611},{"style":1162},[6612],{"type":52,"value":3524},{"type":46,"tag":246,"props":6614,"children":6615},{"style":253},[6616],{"type":52,"value":541},{"type":46,"tag":246,"props":6618,"children":6619},{"style":1295},[6620],{"type":52,"value":6621},"hasCodeConnect",{"type":46,"tag":246,"props":6623,"children":6624},{"style":1162},[6625],{"type":52,"value":6626},"()) ",{"type":46,"tag":246,"props":6628,"children":6629},{"style":253},[6630],{"type":52,"value":256},{"type":46,"tag":246,"props":6632,"children":6633},{"class":248,"line":289},[6634,6638,6642,6646,6650,6654,6658,6662],{"type":46,"tag":246,"props":6635,"children":6636},{"style":1162},[6637],{"type":52,"value":3566},{"type":46,"tag":246,"props":6639,"children":6640},{"style":253},[6641],{"type":52,"value":3103},{"type":46,"tag":246,"props":6643,"children":6644},{"style":1162},[6645],{"type":52,"value":3524},{"type":46,"tag":246,"props":6647,"children":6648},{"style":253},[6649],{"type":52,"value":541},{"type":46,"tag":246,"props":6651,"children":6652},{"style":1295},[6653],{"type":52,"value":3583},{"type":46,"tag":246,"props":6655,"children":6656},{"style":1277},[6657],{"type":52,"value":3588},{"type":46,"tag":246,"props":6659,"children":6660},{"style":253},[6661],{"type":52,"value":541},{"type":46,"tag":246,"props":6663,"children":6664},{"style":1162},[6665],{"type":52,"value":3597},{"type":46,"tag":246,"props":6667,"children":6668},{"class":248,"line":334},[6669],{"type":46,"tag":246,"props":6670,"children":6671},{"style":253},[6672],{"type":52,"value":349},{"type":46,"tag":246,"props":6674,"children":6675},{"class":248,"line":343},[6676],{"type":46,"tag":246,"props":6677,"children":6678},{"emptyLinePlaceholder":1223},[6679],{"type":52,"value":1226},{"type":46,"tag":246,"props":6681,"children":6682},{"class":248,"line":1219},[6683],{"type":46,"tag":246,"props":6684,"children":6685},{"style":1131},[6686],{"type":52,"value":6687},"\u002F\u002F CORRECT — let the runtime handle all instances\n",{"type":46,"tag":246,"props":6689,"children":6690},{"class":248,"line":1229},[6691,6695,6699,6703,6707,6711,6715,6719,6723,6727,6731,6735],{"type":46,"tag":246,"props":6692,"children":6693},{"style":1156},[6694],{"type":52,"value":3034},{"type":46,"tag":246,"props":6696,"children":6697},{"style":1162},[6698],{"type":52,"value":3514},{"type":46,"tag":246,"props":6700,"children":6701},{"style":253},[6702],{"type":52,"value":3519},{"type":46,"tag":246,"props":6704,"children":6705},{"style":1162},[6706],{"type":52,"value":3524},{"type":46,"tag":246,"props":6708,"children":6709},{"style":253},[6710],{"type":52,"value":541},{"type":46,"tag":246,"props":6712,"children":6713},{"style":1162},[6714],{"type":52,"value":3533},{"type":46,"tag":246,"props":6716,"children":6717},{"style":253},[6718],{"type":52,"value":3044},{"type":46,"tag":246,"props":6720,"children":6721},{"style":253},[6722],{"type":52,"value":1175},{"type":46,"tag":246,"props":6724,"children":6725},{"style":320},[6726],{"type":52,"value":3546},{"type":46,"tag":246,"props":6728,"children":6729},{"style":253},[6730],{"type":52,"value":1343},{"type":46,"tag":246,"props":6732,"children":6733},{"style":1162},[6734],{"type":52,"value":3086},{"type":46,"tag":246,"props":6736,"children":6737},{"style":253},[6738],{"type":52,"value":256},{"type":46,"tag":246,"props":6740,"children":6741},{"class":248,"line":1238},[6742,6746,6750,6754,6758,6762,6766,6770],{"type":46,"tag":246,"props":6743,"children":6744},{"style":1162},[6745],{"type":52,"value":3566},{"type":46,"tag":246,"props":6747,"children":6748},{"style":253},[6749],{"type":52,"value":3103},{"type":46,"tag":246,"props":6751,"children":6752},{"style":1162},[6753],{"type":52,"value":3524},{"type":46,"tag":246,"props":6755,"children":6756},{"style":253},[6757],{"type":52,"value":541},{"type":46,"tag":246,"props":6759,"children":6760},{"style":1295},[6761],{"type":52,"value":3583},{"type":46,"tag":246,"props":6763,"children":6764},{"style":1277},[6765],{"type":52,"value":3588},{"type":46,"tag":246,"props":6767,"children":6768},{"style":253},[6769],{"type":52,"value":541},{"type":46,"tag":246,"props":6771,"children":6772},{"style":1162},[6773],{"type":52,"value":3597},{"type":46,"tag":246,"props":6775,"children":6776},{"class":248,"line":1247},[6777],{"type":46,"tag":246,"props":6778,"children":6779},{"style":253},[6780],{"type":52,"value":349},{"type":46,"tag":132,"props":6782,"children":6783},{},[6784,6801,6802,6807,6808,6813,6815,6821,6823,6829,6831,6837,6839],{"type":46,"tag":84,"props":6785,"children":6786},{},[6787,6788,6793,6795,6800],{"type":52,"value":932},{"type":46,"tag":68,"props":6789,"children":6791},{"className":6790},[],[6792],{"type":52,"value":5304},{"type":52,"value":6794}," before calling ",{"type":46,"tag":68,"props":6796,"children":6798},{"className":6797},[],[6799],{"type":52,"value":1627},{"type":52,"value":541},{"type":52,"value":780},{"type":46,"tag":68,"props":6803,"children":6805},{"className":6804},[],[6806],{"type":52,"value":4209},{"type":52,"value":967},{"type":46,"tag":68,"props":6809,"children":6811},{"className":6810},[],[6812],{"type":52,"value":4216},{"type":52,"value":6814},", and ",{"type":46,"tag":68,"props":6816,"children":6818},{"className":6817},[],[6819],{"type":52,"value":6820},"findText()",{"type":52,"value":6822}," return an ",{"type":46,"tag":68,"props":6824,"children":6826},{"className":6825},[],[6827],{"type":52,"value":6828},"ErrorHandle",{"type":52,"value":6830}," (truthy, but not a real node) on failure — not ",{"type":46,"tag":68,"props":6832,"children":6834},{"className":6833},[],[6835],{"type":52,"value":6836},"null",{"type":52,"value":6838},". Always add a type check to avoid crashes: ",{"type":46,"tag":68,"props":6840,"children":6842},{"className":6841},[],[6843],{"type":52,"value":6844},"if (child && child.type === 'INSTANCE') { ... }",{"type":46,"tag":132,"props":6846,"children":6847},{},[6848,6865,6867,6873,6875,6881],{"type":46,"tag":84,"props":6849,"children":6850},{},[6851,6853,6858,6860],{"type":52,"value":6852},"Prefer ",{"type":46,"tag":68,"props":6854,"children":6856},{"className":6855},[],[6857],{"type":52,"value":3648},{"type":52,"value":6859}," over ",{"type":46,"tag":68,"props":6861,"children":6863},{"className":6862},[],[6864],{"type":52,"value":4209},{"type":52,"value":6866}," when a component property exists for the slot. ",{"type":46,"tag":68,"props":6868,"children":6870},{"className":6869},[],[6871],{"type":52,"value":6872},"findInstance('Star Icon')",{"type":52,"value":6874}," breaks when the icon is swapped to a different name; ",{"type":46,"tag":68,"props":6876,"children":6878},{"className":6877},[],[6879],{"type":52,"value":6880},"getInstanceSwap('Icon')",{"type":52,"value":6882}," always works regardless of which instance is in the slot.",{"type":46,"tag":132,"props":6884,"children":6885},{},[6886,6904,6906,6910,6912,6917,6919,6925,6927,6932,6934,6939],{"type":46,"tag":84,"props":6887,"children":6888},{},[6889,6891,6896,6898,6903],{"type":52,"value":6890},"Use ",{"type":46,"tag":68,"props":6892,"children":6894},{"className":6893},[],[6895],{"type":52,"value":905},{"type":52,"value":6897}," only when the Figma property type is ",{"type":46,"tag":68,"props":6899,"children":6901},{"className":6900},[],[6902],{"type":52,"value":897},{"type":52,"value":541},{"type":52,"value":6905}," For ",{"type":46,"tag":84,"props":6907,"children":6908},{},[6909],{"type":52,"value":887},{"type":52,"value":6911}," props, use ",{"type":46,"tag":68,"props":6913,"children":6915},{"className":6914},[],[6916],{"type":52,"value":3648},{"type":52,"value":6918}," (returns an ",{"type":46,"tag":68,"props":6920,"children":6922},{"className":6921},[],[6923],{"type":52,"value":6924},"InstanceHandle",{"type":52,"value":6926},"). ",{"type":46,"tag":68,"props":6928,"children":6930},{"className":6929},[],[6931],{"type":52,"value":905},{"type":52,"value":6933}," returns structured slot sections, not instances — never call ",{"type":46,"tag":68,"props":6935,"children":6937},{"className":6936},[],[6938],{"type":52,"value":1627},{"type":52,"value":6940}," on its return value.",{"type":46,"tag":132,"props":6942,"children":6943},{},[6944,6949,6951,6956],{"type":46,"tag":84,"props":6945,"children":6946},{},[6947],{"type":52,"value":6948},"Property names are case-sensitive",{"type":52,"value":6950}," and must exactly match what ",{"type":46,"tag":68,"props":6952,"children":6954},{"className":6953},[],[6955],{"type":52,"value":731},{"type":52,"value":6957}," returns.",{"type":46,"tag":132,"props":6959,"children":6960},{},[6961,6966,6968,6974,6975],{"type":46,"tag":84,"props":6962,"children":6963},{},[6964],{"type":52,"value":6965},"Handle multiple template arrays correctly.",{"type":52,"value":6967}," When iterating over children, set each result in a separate variable and interpolate them individually — do not use ",{"type":46,"tag":68,"props":6969,"children":6971},{"className":6970},[],[6972],{"type":52,"value":6973},".map().join()",{"type":52,"value":281},{"type":46,"tag":235,"props":6976,"children":6978},{"className":1119,"code":6977,"language":1121,"meta":240,"style":240},"\u002F\u002F Wrong:\nitems.map(n => n.executeTemplate().example).join('\\n')\n\n\u002F\u002F Correct — use separate variables:\nconst child1 = items[0]?.executeTemplate().example\nconst child2 = items[1]?.executeTemplate().example\nexport default { example: figma.code`${child1}${child2}` }\n",[6979],{"type":46,"tag":68,"props":6980,"children":6981},{"__ignoreMap":240},[6982,6990,7078,7085,7093,7145,7194],{"type":46,"tag":246,"props":6983,"children":6984},{"class":248,"line":249},[6985],{"type":46,"tag":246,"props":6986,"children":6987},{"style":1131},[6988],{"type":52,"value":6989},"\u002F\u002F Wrong:\n",{"type":46,"tag":246,"props":6991,"children":6992},{"class":248,"line":259},[6993,6998,7002,7007,7011,7017,7022,7027,7031,7035,7039,7043,7048,7052,7057,7061,7065,7070,7074],{"type":46,"tag":246,"props":6994,"children":6995},{"style":1162},[6996],{"type":52,"value":6997},"items",{"type":46,"tag":246,"props":6999,"children":7000},{"style":253},[7001],{"type":52,"value":541},{"type":46,"tag":246,"props":7003,"children":7004},{"style":1295},[7005],{"type":52,"value":7006},"map",{"type":46,"tag":246,"props":7008,"children":7009},{"style":1162},[7010],{"type":52,"value":1756},{"type":46,"tag":246,"props":7012,"children":7014},{"style":7013},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[7015],{"type":52,"value":7016},"n",{"type":46,"tag":246,"props":7018,"children":7019},{"style":268},[7020],{"type":52,"value":7021}," =>",{"type":46,"tag":246,"props":7023,"children":7024},{"style":1162},[7025],{"type":52,"value":7026}," n",{"type":46,"tag":246,"props":7028,"children":7029},{"style":253},[7030],{"type":52,"value":541},{"type":46,"tag":246,"props":7032,"children":7033},{"style":1295},[7034],{"type":52,"value":3583},{"type":46,"tag":246,"props":7036,"children":7037},{"style":1162},[7038],{"type":52,"value":3588},{"type":46,"tag":246,"props":7040,"children":7041},{"style":253},[7042],{"type":52,"value":541},{"type":46,"tag":246,"props":7044,"children":7045},{"style":1162},[7046],{"type":52,"value":7047},"example)",{"type":46,"tag":246,"props":7049,"children":7050},{"style":253},[7051],{"type":52,"value":541},{"type":46,"tag":246,"props":7053,"children":7054},{"style":1295},[7055],{"type":52,"value":7056},"join",{"type":46,"tag":246,"props":7058,"children":7059},{"style":1162},[7060],{"type":52,"value":1756},{"type":46,"tag":246,"props":7062,"children":7063},{"style":253},[7064],{"type":52,"value":1343},{"type":46,"tag":246,"props":7066,"children":7067},{"style":1162},[7068],{"type":52,"value":7069},"\\n",{"type":46,"tag":246,"props":7071,"children":7072},{"style":253},[7073],{"type":52,"value":1343},{"type":46,"tag":246,"props":7075,"children":7076},{"style":1162},[7077],{"type":52,"value":1774},{"type":46,"tag":246,"props":7079,"children":7080},{"class":248,"line":289},[7081],{"type":46,"tag":246,"props":7082,"children":7083},{"emptyLinePlaceholder":1223},[7084],{"type":52,"value":1226},{"type":46,"tag":246,"props":7086,"children":7087},{"class":248,"line":334},[7088],{"type":46,"tag":246,"props":7089,"children":7090},{"style":1131},[7091],{"type":52,"value":7092},"\u002F\u002F Correct — use separate variables:\n",{"type":46,"tag":246,"props":7094,"children":7095},{"class":248,"line":343},[7096,7100,7105,7109,7114,7120,7124,7129,7133,7137,7141],{"type":46,"tag":246,"props":7097,"children":7098},{"style":268},[7099],{"type":52,"value":1192},{"type":46,"tag":246,"props":7101,"children":7102},{"style":1162},[7103],{"type":52,"value":7104}," child1 ",{"type":46,"tag":246,"props":7106,"children":7107},{"style":253},[7108],{"type":52,"value":1202},{"type":46,"tag":246,"props":7110,"children":7111},{"style":1162},[7112],{"type":52,"value":7113}," items[",{"type":46,"tag":246,"props":7115,"children":7117},{"style":7116},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[7118],{"type":52,"value":7119},"0",{"type":46,"tag":246,"props":7121,"children":7122},{"style":1162},[7123],{"type":52,"value":1357},{"type":46,"tag":246,"props":7125,"children":7126},{"style":253},[7127],{"type":52,"value":7128},"?.",{"type":46,"tag":246,"props":7130,"children":7131},{"style":1295},[7132],{"type":52,"value":3583},{"type":46,"tag":246,"props":7134,"children":7135},{"style":1162},[7136],{"type":52,"value":3588},{"type":46,"tag":246,"props":7138,"children":7139},{"style":253},[7140],{"type":52,"value":541},{"type":46,"tag":246,"props":7142,"children":7143},{"style":1162},[7144],{"type":52,"value":3597},{"type":46,"tag":246,"props":7146,"children":7147},{"class":248,"line":1219},[7148,7152,7157,7161,7165,7170,7174,7178,7182,7186,7190],{"type":46,"tag":246,"props":7149,"children":7150},{"style":268},[7151],{"type":52,"value":1192},{"type":46,"tag":246,"props":7153,"children":7154},{"style":1162},[7155],{"type":52,"value":7156}," child2 ",{"type":46,"tag":246,"props":7158,"children":7159},{"style":253},[7160],{"type":52,"value":1202},{"type":46,"tag":246,"props":7162,"children":7163},{"style":1162},[7164],{"type":52,"value":7113},{"type":46,"tag":246,"props":7166,"children":7167},{"style":7116},[7168],{"type":52,"value":7169},"1",{"type":46,"tag":246,"props":7171,"children":7172},{"style":1162},[7173],{"type":52,"value":1357},{"type":46,"tag":246,"props":7175,"children":7176},{"style":253},[7177],{"type":52,"value":7128},{"type":46,"tag":246,"props":7179,"children":7180},{"style":1295},[7181],{"type":52,"value":3583},{"type":46,"tag":246,"props":7183,"children":7184},{"style":1162},[7185],{"type":52,"value":3588},{"type":46,"tag":246,"props":7187,"children":7188},{"style":253},[7189],{"type":52,"value":541},{"type":46,"tag":246,"props":7191,"children":7192},{"style":1162},[7193],{"type":52,"value":3597},{"type":46,"tag":246,"props":7195,"children":7196},{"class":248,"line":1229},[7197,7201,7205,7209,7214,7218,7222,7226,7230,7235,7240,7245,7250,7255],{"type":46,"tag":246,"props":7198,"children":7199},{"style":1156},[7200],{"type":52,"value":1261},{"type":46,"tag":246,"props":7202,"children":7203},{"style":1156},[7204],{"type":52,"value":1266},{"type":46,"tag":246,"props":7206,"children":7207},{"style":253},[7208],{"type":52,"value":1419},{"type":46,"tag":246,"props":7210,"children":7211},{"style":1277},[7212],{"type":52,"value":7213}," example",{"type":46,"tag":246,"props":7215,"children":7216},{"style":253},[7217],{"type":52,"value":281},{"type":46,"tag":246,"props":7219,"children":7220},{"style":1162},[7221],{"type":52,"value":1207},{"type":46,"tag":246,"props":7223,"children":7224},{"style":253},[7225],{"type":52,"value":541},{"type":46,"tag":246,"props":7227,"children":7228},{"style":1295},[7229],{"type":52,"value":68},{"type":46,"tag":246,"props":7231,"children":7232},{"style":253},[7233],{"type":52,"value":7234},"`${",{"type":46,"tag":246,"props":7236,"children":7237},{"style":1162},[7238],{"type":52,"value":7239},"child1",{"type":46,"tag":246,"props":7241,"children":7242},{"style":253},[7243],{"type":52,"value":7244},"}${",{"type":46,"tag":246,"props":7246,"children":7247},{"style":1162},[7248],{"type":52,"value":7249},"child2",{"type":46,"tag":246,"props":7251,"children":7252},{"style":253},[7253],{"type":52,"value":7254},"}`",{"type":46,"tag":246,"props":7256,"children":7257},{"style":253},[7258],{"type":52,"value":5953},{"type":46,"tag":132,"props":7260,"children":7261},{},[7262,7267,7269,7274,7276,7281,7282,7287,7289,7294,7296,7302,7304],{"type":46,"tag":84,"props":7263,"children":7264},{},[7265],{"type":52,"value":7266},"Never hardcode slot or children content.",{"type":52,"value":7268}," Always resolve child instances dynamically — use ",{"type":46,"tag":68,"props":7270,"children":7272},{"className":7271},[],[7273],{"type":52,"value":3648},{"type":52,"value":7275}," for INSTANCE_SWAP properties, ",{"type":46,"tag":68,"props":7277,"children":7279},{"className":7278},[],[7280],{"type":52,"value":4209},{"type":52,"value":5974},{"type":46,"tag":68,"props":7283,"children":7285},{"className":7284},[],[7286],{"type":52,"value":4216},{"type":52,"value":7288}," for direct children — and render them via ",{"type":46,"tag":68,"props":7290,"children":7292},{"className":7291},[],[7293],{"type":52,"value":1627},{"type":52,"value":7295},". Never construct JSX from a layer name (e.g., ",{"type":46,"tag":68,"props":7297,"children":7299},{"className":7298},[],[7300],{"type":52,"value":7301},"\u003CStarIcon \u002F>",{"type":52,"value":7303},") or guess import paths. If an instance has no Code Connect, omit it — do not add a hardcoded fallback.",{"type":46,"tag":235,"props":7305,"children":7307},{"className":1119,"code":7306,"language":1121,"meta":240,"style":240},"\u002F\u002F WRONG — hardcodes the icon from its layer name\nexample: figma.code`\u003CButton icon={\u003CStarIcon \u002F>}>Submit\u003C\u002FButton>`\n\n\u002F\u002F CORRECT — resolves dynamically, works for any swapped icon\nconst icon = instance.findInstance('Icon')\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\nexample: figma.code`\u003CButton${iconCode ? figma.code` icon={${iconCode}}` : ''}>...\u003C\u002FButton>`\n",[7308],{"type":46,"tag":68,"props":7309,"children":7310},{"__ignoreMap":240},[7311,7319,7356,7363,7371,7418,7429,7480,7515,7522],{"type":46,"tag":246,"props":7312,"children":7313},{"class":248,"line":249},[7314],{"type":46,"tag":246,"props":7315,"children":7316},{"style":1131},[7317],{"type":52,"value":7318},"\u002F\u002F WRONG — hardcodes the icon from its layer name\n",{"type":46,"tag":246,"props":7320,"children":7321},{"class":248,"line":259},[7322,7327,7331,7335,7339,7343,7347,7352],{"type":46,"tag":246,"props":7323,"children":7324},{"style":298},[7325],{"type":52,"value":7326},"example",{"type":46,"tag":246,"props":7328,"children":7329},{"style":253},[7330],{"type":52,"value":281},{"type":46,"tag":246,"props":7332,"children":7333},{"style":1162},[7334],{"type":52,"value":1207},{"type":46,"tag":246,"props":7336,"children":7337},{"style":253},[7338],{"type":52,"value":541},{"type":46,"tag":246,"props":7340,"children":7341},{"style":1295},[7342],{"type":52,"value":68},{"type":46,"tag":246,"props":7344,"children":7345},{"style":253},[7346],{"type":52,"value":1302},{"type":46,"tag":246,"props":7348,"children":7349},{"style":320},[7350],{"type":52,"value":7351},"\u003CButton icon={\u003CStarIcon \u002F>}>Submit\u003C\u002FButton>",{"type":46,"tag":246,"props":7353,"children":7354},{"style":253},[7355],{"type":52,"value":5067},{"type":46,"tag":246,"props":7357,"children":7358},{"class":248,"line":289},[7359],{"type":46,"tag":246,"props":7360,"children":7361},{"emptyLinePlaceholder":1223},[7362],{"type":52,"value":1226},{"type":46,"tag":246,"props":7364,"children":7365},{"class":248,"line":334},[7366],{"type":46,"tag":246,"props":7367,"children":7368},{"style":1131},[7369],{"type":52,"value":7370},"\u002F\u002F CORRECT — resolves dynamically, works for any swapped icon\n",{"type":46,"tag":246,"props":7372,"children":7373},{"class":248,"line":343},[7374,7378,7382,7386,7390,7394,7398,7402,7406,7410,7414],{"type":46,"tag":246,"props":7375,"children":7376},{"style":268},[7377],{"type":52,"value":1192},{"type":46,"tag":246,"props":7379,"children":7380},{"style":1162},[7381],{"type":52,"value":3452},{"type":46,"tag":246,"props":7383,"children":7384},{"style":253},[7385],{"type":52,"value":1202},{"type":46,"tag":246,"props":7387,"children":7388},{"style":1162},[7389],{"type":52,"value":1742},{"type":46,"tag":246,"props":7391,"children":7392},{"style":253},[7393],{"type":52,"value":541},{"type":46,"tag":246,"props":7395,"children":7396},{"style":1295},[7397],{"type":52,"value":4268},{"type":46,"tag":246,"props":7399,"children":7400},{"style":1162},[7401],{"type":52,"value":1756},{"type":46,"tag":246,"props":7403,"children":7404},{"style":253},[7405],{"type":52,"value":1343},{"type":46,"tag":246,"props":7407,"children":7408},{"style":320},[7409],{"type":52,"value":3482},{"type":46,"tag":246,"props":7411,"children":7412},{"style":253},[7413],{"type":52,"value":1343},{"type":46,"tag":246,"props":7415,"children":7416},{"style":1162},[7417],{"type":52,"value":1774},{"type":46,"tag":246,"props":7419,"children":7420},{"class":248,"line":1219},[7421,7425],{"type":46,"tag":246,"props":7422,"children":7423},{"style":268},[7424],{"type":52,"value":3021},{"type":46,"tag":246,"props":7426,"children":7427},{"style":1162},[7428],{"type":52,"value":3502},{"type":46,"tag":246,"props":7430,"children":7431},{"class":248,"line":1229},[7432,7436,7440,7444,7448,7452,7456,7460,7464,7468,7472,7476],{"type":46,"tag":246,"props":7433,"children":7434},{"style":1156},[7435],{"type":52,"value":3034},{"type":46,"tag":246,"props":7437,"children":7438},{"style":1162},[7439],{"type":52,"value":3514},{"type":46,"tag":246,"props":7441,"children":7442},{"style":253},[7443],{"type":52,"value":3519},{"type":46,"tag":246,"props":7445,"children":7446},{"style":1162},[7447],{"type":52,"value":3524},{"type":46,"tag":246,"props":7449,"children":7450},{"style":253},[7451],{"type":52,"value":541},{"type":46,"tag":246,"props":7453,"children":7454},{"style":1162},[7455],{"type":52,"value":3533},{"type":46,"tag":246,"props":7457,"children":7458},{"style":253},[7459],{"type":52,"value":3044},{"type":46,"tag":246,"props":7461,"children":7462},{"style":253},[7463],{"type":52,"value":1175},{"type":46,"tag":246,"props":7465,"children":7466},{"style":320},[7467],{"type":52,"value":3546},{"type":46,"tag":246,"props":7469,"children":7470},{"style":253},[7471],{"type":52,"value":1343},{"type":46,"tag":246,"props":7473,"children":7474},{"style":1162},[7475],{"type":52,"value":3086},{"type":46,"tag":246,"props":7477,"children":7478},{"style":253},[7479],{"type":52,"value":256},{"type":46,"tag":246,"props":7481,"children":7482},{"class":248,"line":1238},[7483,7487,7491,7495,7499,7503,7507,7511],{"type":46,"tag":246,"props":7484,"children":7485},{"style":1162},[7486],{"type":52,"value":3566},{"type":46,"tag":246,"props":7488,"children":7489},{"style":253},[7490],{"type":52,"value":3103},{"type":46,"tag":246,"props":7492,"children":7493},{"style":1162},[7494],{"type":52,"value":3524},{"type":46,"tag":246,"props":7496,"children":7497},{"style":253},[7498],{"type":52,"value":541},{"type":46,"tag":246,"props":7500,"children":7501},{"style":1295},[7502],{"type":52,"value":3583},{"type":46,"tag":246,"props":7504,"children":7505},{"style":1277},[7506],{"type":52,"value":3588},{"type":46,"tag":246,"props":7508,"children":7509},{"style":253},[7510],{"type":52,"value":541},{"type":46,"tag":246,"props":7512,"children":7513},{"style":1162},[7514],{"type":52,"value":3597},{"type":46,"tag":246,"props":7516,"children":7517},{"class":248,"line":1247},[7518],{"type":46,"tag":246,"props":7519,"children":7520},{"style":253},[7521],{"type":52,"value":349},{"type":46,"tag":246,"props":7523,"children":7524},{"class":248,"line":1255},[7525,7529,7533,7537,7541,7545,7549,7554,7558,7563,7567,7571,7575,7579,7583,7588,7592,7597,7601,7605,7609,7613,7617,7622],{"type":46,"tag":246,"props":7526,"children":7527},{"style":298},[7528],{"type":52,"value":7326},{"type":46,"tag":246,"props":7530,"children":7531},{"style":253},[7532],{"type":52,"value":281},{"type":46,"tag":246,"props":7534,"children":7535},{"style":1162},[7536],{"type":52,"value":1207},{"type":46,"tag":246,"props":7538,"children":7539},{"style":253},[7540],{"type":52,"value":541},{"type":46,"tag":246,"props":7542,"children":7543},{"style":1295},[7544],{"type":52,"value":68},{"type":46,"tag":246,"props":7546,"children":7547},{"style":253},[7548],{"type":52,"value":1302},{"type":46,"tag":246,"props":7550,"children":7551},{"style":320},[7552],{"type":52,"value":7553},"\u003CButton",{"type":46,"tag":246,"props":7555,"children":7556},{"style":253},[7557],{"type":52,"value":3792},{"type":46,"tag":246,"props":7559,"children":7560},{"style":1162},[7561],{"type":52,"value":7562},"iconCode ",{"type":46,"tag":246,"props":7564,"children":7565},{"style":253},[7566],{"type":52,"value":4741},{"type":46,"tag":246,"props":7568,"children":7569},{"style":1162},[7570],{"type":52,"value":1207},{"type":46,"tag":246,"props":7572,"children":7573},{"style":253},[7574],{"type":52,"value":541},{"type":46,"tag":246,"props":7576,"children":7577},{"style":1295},[7578],{"type":52,"value":68},{"type":46,"tag":246,"props":7580,"children":7581},{"style":253},[7582],{"type":52,"value":1302},{"type":46,"tag":246,"props":7584,"children":7585},{"style":320},[7586],{"type":52,"value":7587}," icon={",{"type":46,"tag":246,"props":7589,"children":7590},{"style":253},[7591],{"type":52,"value":3792},{"type":46,"tag":246,"props":7593,"children":7594},{"style":1162},[7595],{"type":52,"value":7596},"iconCode",{"type":46,"tag":246,"props":7598,"children":7599},{"style":253},[7600],{"type":52,"value":1928},{"type":46,"tag":246,"props":7602,"children":7603},{"style":320},[7604],{"type":52,"value":1928},{"type":46,"tag":246,"props":7606,"children":7607},{"style":253},[7608],{"type":52,"value":1302},{"type":46,"tag":246,"props":7610,"children":7611},{"style":253},[7612],{"type":52,"value":4788},{"type":46,"tag":246,"props":7614,"children":7615},{"style":253},[7616],{"type":52,"value":4793},{"type":46,"tag":246,"props":7618,"children":7619},{"style":320},[7620],{"type":52,"value":7621},">...\u003C\u002FButton>",{"type":46,"tag":246,"props":7623,"children":7624},{"style":253},[7625],{"type":52,"value":5067},{"type":46,"tag":132,"props":7627,"children":7628},{},[7629,7634,7636,7641],{"type":46,"tag":84,"props":7630,"children":7631},{},[7632],{"type":52,"value":7633},"Attempt to represent every Figma property via a code prop.",{"type":52,"value":7635}," The code component's ",{"type":46,"tag":68,"props":7637,"children":7639},{"className":7638},[],[7640],{"type":52,"value":2327},{"type":52,"value":7642}," interface (from Step 4) is the authoritative list of attribute names. For each Figma property, figure out the right way to represent it using the API methods from Step 5 — direct name match, value transformation, or whatever fits. If no code prop fits at all, omit it — don't invent a prop name.",{"type":46,"tag":55,"props":7644,"children":7646},{"id":7645},"complete-worked-example",[7647],{"type":52,"value":7648},"Complete Worked Example",{"type":46,"tag":62,"props":7650,"children":7651},{},[7652,7654],{"type":52,"value":7653},"Given URL: ",{"type":46,"tag":68,"props":7655,"children":7657},{"className":7656},[],[7658],{"type":52,"value":7659},"https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100",{"type":46,"tag":62,"props":7661,"children":7662},{},[7663,7668],{"type":46,"tag":84,"props":7664,"children":7665},{},[7666],{"type":52,"value":7667},"Step 1:",{"type":52,"value":7669}," Parse the URL.",{"type":46,"tag":128,"props":7671,"children":7672},{},[7673,7688],{"type":46,"tag":132,"props":7674,"children":7675},{},[7676,7681,7682],{"type":46,"tag":68,"props":7677,"children":7679},{"className":7678},[],[7680],{"type":52,"value":366},{"type":52,"value":573},{"type":46,"tag":68,"props":7683,"children":7685},{"className":7684},[],[7686],{"type":52,"value":7687},"abc123",{"type":46,"tag":132,"props":7689,"children":7690},{},[7691,7696,7697,7703,7704],{"type":46,"tag":68,"props":7692,"children":7694},{"className":7693},[],[7695],{"type":52,"value":374},{"type":52,"value":573},{"type":46,"tag":68,"props":7698,"children":7700},{"className":7699},[],[7701],{"type":52,"value":7702},"42-100",{"type":52,"value":439},{"type":46,"tag":68,"props":7705,"children":7707},{"className":7706},[],[7708],{"type":52,"value":7709},"42:100",{"type":46,"tag":62,"props":7711,"children":7712},{},[7713,7718,7719,7724,7726,7732,7733,7739,7740,7746,7748,7754],{"type":46,"tag":84,"props":7714,"children":7715},{},[7716],{"type":52,"value":7717},"Step 2:",{"type":52,"value":6532},{"type":46,"tag":68,"props":7720,"children":7722},{"className":7721},[],[7723],{"type":52,"value":147},{"type":52,"value":7725}," with ",{"type":46,"tag":68,"props":7727,"children":7729},{"className":7728},[],[7730],{"type":52,"value":7731},"fileKey: \"abc123\"",{"type":52,"value":967},{"type":46,"tag":68,"props":7734,"children":7736},{"className":7735},[],[7737],{"type":52,"value":7738},"nodeId: \"42:100\"",{"type":52,"value":967},{"type":46,"tag":68,"props":7741,"children":7743},{"className":7742},[],[7744],{"type":52,"value":7745},"excludeMappingPrompt: true",{"type":52,"value":7747},".\nResponse returns one component with ",{"type":46,"tag":68,"props":7749,"children":7751},{"className":7750},[],[7752],{"type":52,"value":7753},"mainComponentNodeId: \"42:100\"",{"type":52,"value":7755},". If the response were empty, stop and inform the user. If multiple components were returned, repeat Steps 3–6 for each.",{"type":46,"tag":62,"props":7757,"children":7758},{},[7759,7764,7765,7770,7771,7776,7777,7782,7784,7790,7791,7797],{"type":46,"tag":84,"props":7760,"children":7761},{},[7762],{"type":52,"value":7763},"Step 3:",{"type":52,"value":6532},{"type":46,"tag":68,"props":7766,"children":7768},{"className":7767},[],[7769],{"type":52,"value":731},{"type":52,"value":7725},{"type":46,"tag":68,"props":7772,"children":7774},{"className":7773},[],[7775],{"type":52,"value":7731},{"type":52,"value":967},{"type":46,"tag":68,"props":7778,"children":7780},{"className":7779},[],[7781],{"type":52,"value":7738},{"type":52,"value":7783}," (from Step 2), ",{"type":46,"tag":68,"props":7785,"children":7787},{"className":7786},[],[7788],{"type":52,"value":7789},"clientFrameworks: [\"react\"]",{"type":52,"value":967},{"type":46,"tag":68,"props":7792,"children":7794},{"className":7793},[],[7795],{"type":52,"value":7796},"clientLanguages: [\"typescript\"]",{"type":52,"value":541},{"type":46,"tag":62,"props":7799,"children":7800},{},[7801],{"type":52,"value":7802},"Response includes properties:",{"type":46,"tag":128,"props":7804,"children":7805},{},[7806,7811,7816,7821,7826,7831],{"type":46,"tag":132,"props":7807,"children":7808},{},[7809],{"type":52,"value":7810},"Label (TEXT)",{"type":46,"tag":132,"props":7812,"children":7813},{},[7814],{"type":52,"value":7815},"Variant (VARIANT): Primary, Secondary",{"type":46,"tag":132,"props":7817,"children":7818},{},[7819],{"type":52,"value":7820},"Size (VARIANT): Small, Medium, Large",{"type":46,"tag":132,"props":7822,"children":7823},{},[7824],{"type":52,"value":7825},"Disabled (BOOLEAN)",{"type":46,"tag":132,"props":7827,"children":7828},{},[7829],{"type":52,"value":7830},"Has Icon (BOOLEAN)",{"type":46,"tag":132,"props":7832,"children":7833},{},[7834],{"type":52,"value":7835},"Icon (INSTANCE_SWAP)",{"type":46,"tag":62,"props":7837,"children":7838},{},[7839,7844,7846,7852,7854,7859,7860,7866,7867,7872,7873,7879,7880,7886,7888,7894],{"type":46,"tag":84,"props":7840,"children":7841},{},[7842],{"type":52,"value":7843},"Step 4:",{"type":52,"value":7845}," Search codebase → find ",{"type":46,"tag":68,"props":7847,"children":7849},{"className":7848},[],[7850],{"type":52,"value":7851},"Button",{"type":52,"value":7853}," component. Read its source to confirm props: ",{"type":46,"tag":68,"props":7855,"children":7857},{"className":7856},[],[7858],{"type":52,"value":5092},{"type":52,"value":967},{"type":46,"tag":68,"props":7861,"children":7863},{"className":7862},[],[7864],{"type":52,"value":7865},"size",{"type":52,"value":967},{"type":46,"tag":68,"props":7868,"children":7870},{"className":7869},[],[7871],{"type":52,"value":5127},{"type":52,"value":967},{"type":46,"tag":68,"props":7874,"children":7876},{"className":7875},[],[7877],{"type":52,"value":7878},"icon",{"type":52,"value":967},{"type":46,"tag":68,"props":7881,"children":7883},{"className":7882},[],[7884],{"type":52,"value":7885},"children",{"type":52,"value":7887},". Import path: ",{"type":46,"tag":68,"props":7889,"children":7891},{"className":7890},[],[7892],{"type":52,"value":7893},"\"primitives\"",{"type":52,"value":541},{"type":46,"tag":62,"props":7896,"children":7897},{},[7898,7903,7905,7911],{"type":46,"tag":84,"props":7899,"children":7900},{},[7901],{"type":52,"value":7902},"Step 5:",{"type":52,"value":7904}," Create ",{"type":46,"tag":68,"props":7906,"children":7908},{"className":7907},[],[7909],{"type":52,"value":7910},"src\u002Ffigma\u002Fprimitives\u002FButton.figma.ts",{"type":52,"value":281},{"type":46,"tag":235,"props":7913,"children":7915},{"className":1119,"code":7914,"language":1121,"meta":240,"style":240},"\u002F\u002F url=https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100\n\u002F\u002F source=src\u002Fcomponents\u002FButton.tsx\n\u002F\u002F component=Button\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\nconst label = instance.getString('Label')\nconst variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\nconst disabled = instance.getBoolean('Disabled')\nconst hasIcon = instance.getBoolean('Has Icon')\nconst icon = hasIcon ? instance.getInstanceSwap('Icon') : null\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      size=\"${size}\"\n      ${disabled ? 'disabled' : ''}\n      ${iconCode ? figma.code`icon={${iconCode}}` : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  imports: ['import { Button } from \"primitives\"'],\n  id: 'button',\n  metadata: { nestable: true }\n}\n",[7916],{"type":46,"tag":68,"props":7917,"children":7918},{"__ignoreMap":240},[7919,7927,7935,7943,7970,7997,8004,8051,8102,8137,8172,8183,8234,8269,8304,8339,8350,8397,8446,8511,8523,8575,8611,8619,8627,8643,8671,8679,8703,8728,8764,8828,8836,8852,8860,8872,8909,8938,8970],{"type":46,"tag":246,"props":7920,"children":7921},{"class":248,"line":249},[7922],{"type":46,"tag":246,"props":7923,"children":7924},{"style":1131},[7925],{"type":52,"value":7926},"\u002F\u002F url=https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100\n",{"type":46,"tag":246,"props":7928,"children":7929},{"class":248,"line":259},[7930],{"type":46,"tag":246,"props":7931,"children":7932},{"style":1131},[7933],{"type":52,"value":7934},"\u002F\u002F source=src\u002Fcomponents\u002FButton.tsx\n",{"type":46,"tag":246,"props":7936,"children":7937},{"class":248,"line":289},[7938],{"type":46,"tag":246,"props":7939,"children":7940},{"style":1131},[7941],{"type":52,"value":7942},"\u002F\u002F component=Button\n",{"type":46,"tag":246,"props":7944,"children":7945},{"class":248,"line":334},[7946,7950,7954,7958,7962,7966],{"type":46,"tag":246,"props":7947,"children":7948},{"style":1156},[7949],{"type":52,"value":1159},{"type":46,"tag":246,"props":7951,"children":7952},{"style":1162},[7953],{"type":52,"value":1165},{"type":46,"tag":246,"props":7955,"children":7956},{"style":1156},[7957],{"type":52,"value":1170},{"type":46,"tag":246,"props":7959,"children":7960},{"style":253},[7961],{"type":52,"value":1175},{"type":46,"tag":246,"props":7963,"children":7964},{"style":320},[7965],{"type":52,"value":24},{"type":46,"tag":246,"props":7967,"children":7968},{"style":253},[7969],{"type":52,"value":1184},{"type":46,"tag":246,"props":7971,"children":7972},{"class":248,"line":343},[7973,7977,7981,7985,7989,7993],{"type":46,"tag":246,"props":7974,"children":7975},{"style":268},[7976],{"type":52,"value":1192},{"type":46,"tag":246,"props":7978,"children":7979},{"style":1162},[7980],{"type":52,"value":1197},{"type":46,"tag":246,"props":7982,"children":7983},{"style":253},[7984],{"type":52,"value":1202},{"type":46,"tag":246,"props":7986,"children":7987},{"style":1162},[7988],{"type":52,"value":1207},{"type":46,"tag":246,"props":7990,"children":7991},{"style":253},[7992],{"type":52,"value":541},{"type":46,"tag":246,"props":7994,"children":7995},{"style":1162},[7996],{"type":52,"value":1216},{"type":46,"tag":246,"props":7998,"children":7999},{"class":248,"line":1219},[8000],{"type":46,"tag":246,"props":8001,"children":8002},{"emptyLinePlaceholder":1223},[8003],{"type":52,"value":1226},{"type":46,"tag":246,"props":8005,"children":8006},{"class":248,"line":1229},[8007,8011,8015,8019,8023,8027,8031,8035,8039,8043,8047],{"type":46,"tag":246,"props":8008,"children":8009},{"style":268},[8010],{"type":52,"value":1192},{"type":46,"tag":246,"props":8012,"children":8013},{"style":1162},[8014],{"type":52,"value":1733},{"type":46,"tag":246,"props":8016,"children":8017},{"style":253},[8018],{"type":52,"value":1202},{"type":46,"tag":246,"props":8020,"children":8021},{"style":1162},[8022],{"type":52,"value":1742},{"type":46,"tag":246,"props":8024,"children":8025},{"style":253},[8026],{"type":52,"value":541},{"type":46,"tag":246,"props":8028,"children":8029},{"style":1295},[8030],{"type":52,"value":1751},{"type":46,"tag":246,"props":8032,"children":8033},{"style":1162},[8034],{"type":52,"value":1756},{"type":46,"tag":246,"props":8036,"children":8037},{"style":253},[8038],{"type":52,"value":1343},{"type":46,"tag":246,"props":8040,"children":8041},{"style":320},[8042],{"type":52,"value":1765},{"type":46,"tag":246,"props":8044,"children":8045},{"style":253},[8046],{"type":52,"value":1343},{"type":46,"tag":246,"props":8048,"children":8049},{"style":1162},[8050],{"type":52,"value":1774},{"type":46,"tag":246,"props":8052,"children":8053},{"class":248,"line":1238},[8054,8058,8062,8066,8070,8074,8078,8082,8086,8090,8094,8098],{"type":46,"tag":246,"props":8055,"children":8056},{"style":268},[8057],{"type":52,"value":1192},{"type":46,"tag":246,"props":8059,"children":8060},{"style":1162},[8061],{"type":52,"value":1802},{"type":46,"tag":246,"props":8063,"children":8064},{"style":253},[8065],{"type":52,"value":1202},{"type":46,"tag":246,"props":8067,"children":8068},{"style":1162},[8069],{"type":52,"value":1742},{"type":46,"tag":246,"props":8071,"children":8072},{"style":253},[8073],{"type":52,"value":541},{"type":46,"tag":246,"props":8075,"children":8076},{"style":1295},[8077],{"type":52,"value":1819},{"type":46,"tag":246,"props":8079,"children":8080},{"style":1162},[8081],{"type":52,"value":1756},{"type":46,"tag":246,"props":8083,"children":8084},{"style":253},[8085],{"type":52,"value":1343},{"type":46,"tag":246,"props":8087,"children":8088},{"style":320},[8089],{"type":52,"value":1832},{"type":46,"tag":246,"props":8091,"children":8092},{"style":253},[8093],{"type":52,"value":1343},{"type":46,"tag":246,"props":8095,"children":8096},{"style":253},[8097],{"type":52,"value":1316},{"type":46,"tag":246,"props":8099,"children":8100},{"style":253},[8101],{"type":52,"value":286},{"type":46,"tag":246,"props":8103,"children":8104},{"class":248,"line":1247},[8105,8109,8113,8117,8121,8125,8129,8133],{"type":46,"tag":246,"props":8106,"children":8107},{"style":253},[8108],{"type":52,"value":1852},{"type":46,"tag":246,"props":8110,"children":8111},{"style":1277},[8112],{"type":52,"value":1857},{"type":46,"tag":246,"props":8114,"children":8115},{"style":253},[8116],{"type":52,"value":1343},{"type":46,"tag":246,"props":8118,"children":8119},{"style":253},[8120],{"type":52,"value":281},{"type":46,"tag":246,"props":8122,"children":8123},{"style":253},[8124],{"type":52,"value":1175},{"type":46,"tag":246,"props":8126,"children":8127},{"style":320},[8128],{"type":52,"value":1874},{"type":46,"tag":246,"props":8130,"children":8131},{"style":253},[8132],{"type":52,"value":1343},{"type":46,"tag":246,"props":8134,"children":8135},{"style":253},[8136],{"type":52,"value":1883},{"type":46,"tag":246,"props":8138,"children":8139},{"class":248,"line":1255},[8140,8144,8148,8152,8156,8160,8164,8168],{"type":46,"tag":246,"props":8141,"children":8142},{"style":253},[8143],{"type":52,"value":1852},{"type":46,"tag":246,"props":8145,"children":8146},{"style":1277},[8147],{"type":52,"value":1895},{"type":46,"tag":246,"props":8149,"children":8150},{"style":253},[8151],{"type":52,"value":1343},{"type":46,"tag":246,"props":8153,"children":8154},{"style":253},[8155],{"type":52,"value":281},{"type":46,"tag":246,"props":8157,"children":8158},{"style":253},[8159],{"type":52,"value":1175},{"type":46,"tag":246,"props":8161,"children":8162},{"style":320},[8163],{"type":52,"value":1912},{"type":46,"tag":246,"props":8165,"children":8166},{"style":253},[8167],{"type":52,"value":1343},{"type":46,"tag":246,"props":8169,"children":8170},{"style":253},[8171],{"type":52,"value":1883},{"type":46,"tag":246,"props":8173,"children":8174},{"class":248,"line":1273},[8175,8179],{"type":46,"tag":246,"props":8176,"children":8177},{"style":253},[8178],{"type":52,"value":1928},{"type":46,"tag":246,"props":8180,"children":8181},{"style":1162},[8182],{"type":52,"value":1774},{"type":46,"tag":246,"props":8184,"children":8185},{"class":248,"line":1324},[8186,8190,8194,8198,8202,8206,8210,8214,8218,8222,8226,8230],{"type":46,"tag":246,"props":8187,"children":8188},{"style":268},[8189],{"type":52,"value":1192},{"type":46,"tag":246,"props":8191,"children":8192},{"style":1162},[8193],{"type":52,"value":1951},{"type":46,"tag":246,"props":8195,"children":8196},{"style":253},[8197],{"type":52,"value":1202},{"type":46,"tag":246,"props":8199,"children":8200},{"style":1162},[8201],{"type":52,"value":1742},{"type":46,"tag":246,"props":8203,"children":8204},{"style":253},[8205],{"type":52,"value":541},{"type":46,"tag":246,"props":8207,"children":8208},{"style":1295},[8209],{"type":52,"value":1819},{"type":46,"tag":246,"props":8211,"children":8212},{"style":1162},[8213],{"type":52,"value":1756},{"type":46,"tag":246,"props":8215,"children":8216},{"style":253},[8217],{"type":52,"value":1343},{"type":46,"tag":246,"props":8219,"children":8220},{"style":320},[8221],{"type":52,"value":1980},{"type":46,"tag":246,"props":8223,"children":8224},{"style":253},[8225],{"type":52,"value":1343},{"type":46,"tag":246,"props":8227,"children":8228},{"style":253},[8229],{"type":52,"value":1316},{"type":46,"tag":246,"props":8231,"children":8232},{"style":253},[8233],{"type":52,"value":286},{"type":46,"tag":246,"props":8235,"children":8236},{"class":248,"line":1369},[8237,8241,8245,8249,8253,8257,8261,8265],{"type":46,"tag":246,"props":8238,"children":8239},{"style":253},[8240],{"type":52,"value":1852},{"type":46,"tag":246,"props":8242,"children":8243},{"style":1277},[8244],{"type":52,"value":2004},{"type":46,"tag":246,"props":8246,"children":8247},{"style":253},[8248],{"type":52,"value":1343},{"type":46,"tag":246,"props":8250,"children":8251},{"style":253},[8252],{"type":52,"value":281},{"type":46,"tag":246,"props":8254,"children":8255},{"style":253},[8256],{"type":52,"value":1175},{"type":46,"tag":246,"props":8258,"children":8259},{"style":320},[8260],{"type":52,"value":2021},{"type":46,"tag":246,"props":8262,"children":8263},{"style":253},[8264],{"type":52,"value":1343},{"type":46,"tag":246,"props":8266,"children":8267},{"style":253},[8268],{"type":52,"value":1883},{"type":46,"tag":246,"props":8270,"children":8271},{"class":248,"line":1404},[8272,8276,8280,8284,8288,8292,8296,8300],{"type":46,"tag":246,"props":8273,"children":8274},{"style":253},[8275],{"type":52,"value":1852},{"type":46,"tag":246,"props":8277,"children":8278},{"style":1277},[8279],{"type":52,"value":2041},{"type":46,"tag":246,"props":8281,"children":8282},{"style":253},[8283],{"type":52,"value":1343},{"type":46,"tag":246,"props":8285,"children":8286},{"style":253},[8287],{"type":52,"value":281},{"type":46,"tag":246,"props":8289,"children":8290},{"style":253},[8291],{"type":52,"value":1175},{"type":46,"tag":246,"props":8293,"children":8294},{"style":320},[8295],{"type":52,"value":2058},{"type":46,"tag":246,"props":8297,"children":8298},{"style":253},[8299],{"type":52,"value":1343},{"type":46,"tag":246,"props":8301,"children":8302},{"style":253},[8303],{"type":52,"value":1883},{"type":46,"tag":246,"props":8305,"children":8306},{"class":248,"line":1427},[8307,8311,8315,8319,8323,8327,8331,8335],{"type":46,"tag":246,"props":8308,"children":8309},{"style":253},[8310],{"type":52,"value":1852},{"type":46,"tag":246,"props":8312,"children":8313},{"style":1277},[8314],{"type":52,"value":2078},{"type":46,"tag":246,"props":8316,"children":8317},{"style":253},[8318],{"type":52,"value":1343},{"type":46,"tag":246,"props":8320,"children":8321},{"style":253},[8322],{"type":52,"value":281},{"type":46,"tag":246,"props":8324,"children":8325},{"style":253},[8326],{"type":52,"value":1175},{"type":46,"tag":246,"props":8328,"children":8329},{"style":320},[8330],{"type":52,"value":2095},{"type":46,"tag":246,"props":8332,"children":8333},{"style":253},[8334],{"type":52,"value":1343},{"type":46,"tag":246,"props":8336,"children":8337},{"style":253},[8338],{"type":52,"value":1883},{"type":46,"tag":246,"props":8340,"children":8341},{"class":248,"line":1455},[8342,8346],{"type":46,"tag":246,"props":8343,"children":8344},{"style":253},[8345],{"type":52,"value":1928},{"type":46,"tag":246,"props":8347,"children":8348},{"style":1162},[8349],{"type":52,"value":1774},{"type":46,"tag":246,"props":8351,"children":8352},{"class":248,"line":1478},[8353,8357,8361,8365,8369,8373,8377,8381,8385,8389,8393],{"type":46,"tag":246,"props":8354,"children":8355},{"style":268},[8356],{"type":52,"value":1192},{"type":46,"tag":246,"props":8358,"children":8359},{"style":1162},[8360],{"type":52,"value":2150},{"type":46,"tag":246,"props":8362,"children":8363},{"style":253},[8364],{"type":52,"value":1202},{"type":46,"tag":246,"props":8366,"children":8367},{"style":1162},[8368],{"type":52,"value":1742},{"type":46,"tag":246,"props":8370,"children":8371},{"style":253},[8372],{"type":52,"value":541},{"type":46,"tag":246,"props":8374,"children":8375},{"style":1295},[8376],{"type":52,"value":2167},{"type":46,"tag":246,"props":8378,"children":8379},{"style":1162},[8380],{"type":52,"value":1756},{"type":46,"tag":246,"props":8382,"children":8383},{"style":253},[8384],{"type":52,"value":1343},{"type":46,"tag":246,"props":8386,"children":8387},{"style":320},[8388],{"type":52,"value":2180},{"type":46,"tag":246,"props":8390,"children":8391},{"style":253},[8392],{"type":52,"value":1343},{"type":46,"tag":246,"props":8394,"children":8395},{"style":1162},[8396],{"type":52,"value":1774},{"type":46,"tag":246,"props":8398,"children":8399},{"class":248,"line":1486},[8400,8404,8409,8413,8417,8421,8425,8429,8433,8438,8442],{"type":46,"tag":246,"props":8401,"children":8402},{"style":268},[8403],{"type":52,"value":1192},{"type":46,"tag":246,"props":8405,"children":8406},{"style":1162},[8407],{"type":52,"value":8408}," hasIcon ",{"type":46,"tag":246,"props":8410,"children":8411},{"style":253},[8412],{"type":52,"value":1202},{"type":46,"tag":246,"props":8414,"children":8415},{"style":1162},[8416],{"type":52,"value":1742},{"type":46,"tag":246,"props":8418,"children":8419},{"style":253},[8420],{"type":52,"value":541},{"type":46,"tag":246,"props":8422,"children":8423},{"style":1295},[8424],{"type":52,"value":2167},{"type":46,"tag":246,"props":8426,"children":8427},{"style":1162},[8428],{"type":52,"value":1756},{"type":46,"tag":246,"props":8430,"children":8431},{"style":253},[8432],{"type":52,"value":1343},{"type":46,"tag":246,"props":8434,"children":8435},{"style":320},[8436],{"type":52,"value":8437},"Has Icon",{"type":46,"tag":246,"props":8439,"children":8440},{"style":253},[8441],{"type":52,"value":1343},{"type":46,"tag":246,"props":8443,"children":8444},{"style":1162},[8445],{"type":52,"value":1774},{"type":46,"tag":246,"props":8447,"children":8449},{"class":248,"line":8448},19,[8450,8454,8458,8462,8466,8470,8474,8478,8482,8486,8490,8494,8498,8502,8506],{"type":46,"tag":246,"props":8451,"children":8452},{"style":268},[8453],{"type":52,"value":1192},{"type":46,"tag":246,"props":8455,"children":8456},{"style":1162},[8457],{"type":52,"value":3452},{"type":46,"tag":246,"props":8459,"children":8460},{"style":253},[8461],{"type":52,"value":1202},{"type":46,"tag":246,"props":8463,"children":8464},{"style":1162},[8465],{"type":52,"value":8408},{"type":46,"tag":246,"props":8467,"children":8468},{"style":253},[8469],{"type":52,"value":4741},{"type":46,"tag":246,"props":8471,"children":8472},{"style":1162},[8473],{"type":52,"value":1742},{"type":46,"tag":246,"props":8475,"children":8476},{"style":253},[8477],{"type":52,"value":541},{"type":46,"tag":246,"props":8479,"children":8480},{"style":1295},[8481],{"type":52,"value":3469},{"type":46,"tag":246,"props":8483,"children":8484},{"style":1162},[8485],{"type":52,"value":1756},{"type":46,"tag":246,"props":8487,"children":8488},{"style":253},[8489],{"type":52,"value":1343},{"type":46,"tag":246,"props":8491,"children":8492},{"style":320},[8493],{"type":52,"value":3482},{"type":46,"tag":246,"props":8495,"children":8496},{"style":253},[8497],{"type":52,"value":1343},{"type":46,"tag":246,"props":8499,"children":8500},{"style":1162},[8501],{"type":52,"value":3086},{"type":46,"tag":246,"props":8503,"children":8504},{"style":253},[8505],{"type":52,"value":281},{"type":46,"tag":246,"props":8507,"children":8508},{"style":253},[8509],{"type":52,"value":8510}," null\n",{"type":46,"tag":246,"props":8512,"children":8514},{"class":248,"line":8513},20,[8515,8519],{"type":46,"tag":246,"props":8516,"children":8517},{"style":268},[8518],{"type":52,"value":3021},{"type":46,"tag":246,"props":8520,"children":8521},{"style":1162},[8522],{"type":52,"value":3502},{"type":46,"tag":246,"props":8524,"children":8526},{"class":248,"line":8525},21,[8527,8531,8535,8539,8543,8547,8551,8555,8559,8563,8567,8571],{"type":46,"tag":246,"props":8528,"children":8529},{"style":1156},[8530],{"type":52,"value":3034},{"type":46,"tag":246,"props":8532,"children":8533},{"style":1162},[8534],{"type":52,"value":3514},{"type":46,"tag":246,"props":8536,"children":8537},{"style":253},[8538],{"type":52,"value":3519},{"type":46,"tag":246,"props":8540,"children":8541},{"style":1162},[8542],{"type":52,"value":3524},{"type":46,"tag":246,"props":8544,"children":8545},{"style":253},[8546],{"type":52,"value":541},{"type":46,"tag":246,"props":8548,"children":8549},{"style":1162},[8550],{"type":52,"value":3533},{"type":46,"tag":246,"props":8552,"children":8553},{"style":253},[8554],{"type":52,"value":3044},{"type":46,"tag":246,"props":8556,"children":8557},{"style":253},[8558],{"type":52,"value":1175},{"type":46,"tag":246,"props":8560,"children":8561},{"style":320},[8562],{"type":52,"value":3546},{"type":46,"tag":246,"props":8564,"children":8565},{"style":253},[8566],{"type":52,"value":1343},{"type":46,"tag":246,"props":8568,"children":8569},{"style":1162},[8570],{"type":52,"value":3086},{"type":46,"tag":246,"props":8572,"children":8573},{"style":253},[8574],{"type":52,"value":256},{"type":46,"tag":246,"props":8576,"children":8578},{"class":248,"line":8577},22,[8579,8583,8587,8591,8595,8599,8603,8607],{"type":46,"tag":246,"props":8580,"children":8581},{"style":1162},[8582],{"type":52,"value":3566},{"type":46,"tag":246,"props":8584,"children":8585},{"style":253},[8586],{"type":52,"value":3103},{"type":46,"tag":246,"props":8588,"children":8589},{"style":1162},[8590],{"type":52,"value":3524},{"type":46,"tag":246,"props":8592,"children":8593},{"style":253},[8594],{"type":52,"value":541},{"type":46,"tag":246,"props":8596,"children":8597},{"style":1295},[8598],{"type":52,"value":3583},{"type":46,"tag":246,"props":8600,"children":8601},{"style":1277},[8602],{"type":52,"value":3588},{"type":46,"tag":246,"props":8604,"children":8605},{"style":253},[8606],{"type":52,"value":541},{"type":46,"tag":246,"props":8608,"children":8609},{"style":1162},[8610],{"type":52,"value":3597},{"type":46,"tag":246,"props":8612,"children":8614},{"class":248,"line":8613},23,[8615],{"type":46,"tag":246,"props":8616,"children":8617},{"style":253},[8618],{"type":52,"value":349},{"type":46,"tag":246,"props":8620,"children":8622},{"class":248,"line":8621},24,[8623],{"type":46,"tag":246,"props":8624,"children":8625},{"emptyLinePlaceholder":1223},[8626],{"type":52,"value":1226},{"type":46,"tag":246,"props":8628,"children":8630},{"class":248,"line":8629},25,[8631,8635,8639],{"type":46,"tag":246,"props":8632,"children":8633},{"style":1156},[8634],{"type":52,"value":1261},{"type":46,"tag":246,"props":8636,"children":8637},{"style":1156},[8638],{"type":52,"value":1266},{"type":46,"tag":246,"props":8640,"children":8641},{"style":253},[8642],{"type":52,"value":286},{"type":46,"tag":246,"props":8644,"children":8646},{"class":248,"line":8645},26,[8647,8651,8655,8659,8663,8667],{"type":46,"tag":246,"props":8648,"children":8649},{"style":1277},[8650],{"type":52,"value":1280},{"type":46,"tag":246,"props":8652,"children":8653},{"style":253},[8654],{"type":52,"value":281},{"type":46,"tag":246,"props":8656,"children":8657},{"style":1162},[8658],{"type":52,"value":1207},{"type":46,"tag":246,"props":8660,"children":8661},{"style":253},[8662],{"type":52,"value":541},{"type":46,"tag":246,"props":8664,"children":8665},{"style":1295},[8666],{"type":52,"value":68},{"type":46,"tag":246,"props":8668,"children":8669},{"style":253},[8670],{"type":52,"value":5067},{"type":46,"tag":246,"props":8672,"children":8674},{"class":248,"line":8673},27,[8675],{"type":46,"tag":246,"props":8676,"children":8677},{"style":320},[8678],{"type":52,"value":5075},{"type":46,"tag":246,"props":8680,"children":8682},{"class":248,"line":8681},28,[8683,8687,8691,8695,8699],{"type":46,"tag":246,"props":8684,"children":8685},{"style":320},[8686],{"type":52,"value":5083},{"type":46,"tag":246,"props":8688,"children":8689},{"style":253},[8690],{"type":52,"value":3792},{"type":46,"tag":246,"props":8692,"children":8693},{"style":1162},[8694],{"type":52,"value":5092},{"type":46,"tag":246,"props":8696,"children":8697},{"style":253},[8698],{"type":52,"value":1928},{"type":46,"tag":246,"props":8700,"children":8701},{"style":320},[8702],{"type":52,"value":5101},{"type":46,"tag":246,"props":8704,"children":8706},{"class":248,"line":8705},29,[8707,8712,8716,8720,8724],{"type":46,"tag":246,"props":8708,"children":8709},{"style":320},[8710],{"type":52,"value":8711},"      size=\"",{"type":46,"tag":246,"props":8713,"children":8714},{"style":253},[8715],{"type":52,"value":3792},{"type":46,"tag":246,"props":8717,"children":8718},{"style":1162},[8719],{"type":52,"value":7865},{"type":46,"tag":246,"props":8721,"children":8722},{"style":253},[8723],{"type":52,"value":1928},{"type":46,"tag":246,"props":8725,"children":8726},{"style":320},[8727],{"type":52,"value":5101},{"type":46,"tag":246,"props":8729,"children":8731},{"class":248,"line":8730},30,[8732,8736,8740,8744,8748,8752,8756,8760],{"type":46,"tag":246,"props":8733,"children":8734},{"style":253},[8735],{"type":52,"value":5109},{"type":46,"tag":246,"props":8737,"children":8738},{"style":1162},[8739],{"type":52,"value":5114},{"type":46,"tag":246,"props":8741,"children":8742},{"style":253},[8743],{"type":52,"value":4741},{"type":46,"tag":246,"props":8745,"children":8746},{"style":253},[8747],{"type":52,"value":1175},{"type":46,"tag":246,"props":8749,"children":8750},{"style":320},[8751],{"type":52,"value":5127},{"type":46,"tag":246,"props":8753,"children":8754},{"style":253},[8755],{"type":52,"value":1343},{"type":46,"tag":246,"props":8757,"children":8758},{"style":253},[8759],{"type":52,"value":4788},{"type":46,"tag":246,"props":8761,"children":8762},{"style":253},[8763],{"type":52,"value":5140},{"type":46,"tag":246,"props":8765,"children":8767},{"class":248,"line":8766},31,[8768,8772,8776,8780,8784,8788,8792,8796,8800,8804,8808,8812,8816,8820,8824],{"type":46,"tag":246,"props":8769,"children":8770},{"style":253},[8771],{"type":52,"value":5109},{"type":46,"tag":246,"props":8773,"children":8774},{"style":1162},[8775],{"type":52,"value":7562},{"type":46,"tag":246,"props":8777,"children":8778},{"style":253},[8779],{"type":52,"value":4741},{"type":46,"tag":246,"props":8781,"children":8782},{"style":1162},[8783],{"type":52,"value":1207},{"type":46,"tag":246,"props":8785,"children":8786},{"style":253},[8787],{"type":52,"value":541},{"type":46,"tag":246,"props":8789,"children":8790},{"style":1295},[8791],{"type":52,"value":68},{"type":46,"tag":246,"props":8793,"children":8794},{"style":253},[8795],{"type":52,"value":1302},{"type":46,"tag":246,"props":8797,"children":8798},{"style":320},[8799],{"type":52,"value":4762},{"type":46,"tag":246,"props":8801,"children":8802},{"style":253},[8803],{"type":52,"value":3792},{"type":46,"tag":246,"props":8805,"children":8806},{"style":1162},[8807],{"type":52,"value":7596},{"type":46,"tag":246,"props":8809,"children":8810},{"style":253},[8811],{"type":52,"value":1928},{"type":46,"tag":246,"props":8813,"children":8814},{"style":320},[8815],{"type":52,"value":1928},{"type":46,"tag":246,"props":8817,"children":8818},{"style":253},[8819],{"type":52,"value":1302},{"type":46,"tag":246,"props":8821,"children":8822},{"style":253},[8823],{"type":52,"value":4788},{"type":46,"tag":246,"props":8825,"children":8826},{"style":253},[8827],{"type":52,"value":5140},{"type":46,"tag":246,"props":8829,"children":8831},{"class":248,"line":8830},32,[8832],{"type":46,"tag":246,"props":8833,"children":8834},{"style":320},[8835],{"type":52,"value":5148},{"type":46,"tag":246,"props":8837,"children":8839},{"class":248,"line":8838},33,[8840,8844,8848],{"type":46,"tag":246,"props":8841,"children":8842},{"style":253},[8843],{"type":52,"value":5109},{"type":46,"tag":246,"props":8845,"children":8846},{"style":1162},[8847],{"type":52,"value":4807},{"type":46,"tag":246,"props":8849,"children":8850},{"style":253},[8851],{"type":52,"value":349},{"type":46,"tag":246,"props":8853,"children":8855},{"class":248,"line":8854},34,[8856],{"type":46,"tag":246,"props":8857,"children":8858},{"style":320},[8859],{"type":52,"value":5171},{"type":46,"tag":246,"props":8861,"children":8863},{"class":248,"line":8862},35,[8864,8868],{"type":46,"tag":246,"props":8865,"children":8866},{"style":253},[8867],{"type":52,"value":5179},{"type":46,"tag":246,"props":8869,"children":8870},{"style":253},[8871],{"type":52,"value":1883},{"type":46,"tag":246,"props":8873,"children":8875},{"class":248,"line":8874},36,[8876,8880,8884,8888,8892,8897,8901,8905],{"type":46,"tag":246,"props":8877,"children":8878},{"style":1277},[8879],{"type":52,"value":1330},{"type":46,"tag":246,"props":8881,"children":8882},{"style":253},[8883],{"type":52,"value":281},{"type":46,"tag":246,"props":8885,"children":8886},{"style":1162},[8887],{"type":52,"value":313},{"type":46,"tag":246,"props":8889,"children":8890},{"style":253},[8891],{"type":52,"value":1343},{"type":46,"tag":246,"props":8893,"children":8894},{"style":320},[8895],{"type":52,"value":8896},"import { Button } from \"primitives\"",{"type":46,"tag":246,"props":8898,"children":8899},{"style":253},[8900],{"type":52,"value":1343},{"type":46,"tag":246,"props":8902,"children":8903},{"style":1162},[8904],{"type":52,"value":1357},{"type":46,"tag":246,"props":8906,"children":8907},{"style":253},[8908],{"type":52,"value":1883},{"type":46,"tag":246,"props":8910,"children":8912},{"class":248,"line":8911},37,[8913,8917,8921,8925,8930,8934],{"type":46,"tag":246,"props":8914,"children":8915},{"style":1277},[8916],{"type":52,"value":1375},{"type":46,"tag":246,"props":8918,"children":8919},{"style":253},[8920],{"type":52,"value":281},{"type":46,"tag":246,"props":8922,"children":8923},{"style":253},[8924],{"type":52,"value":1175},{"type":46,"tag":246,"props":8926,"children":8927},{"style":320},[8928],{"type":52,"value":8929},"button",{"type":46,"tag":246,"props":8931,"children":8932},{"style":253},[8933],{"type":52,"value":1343},{"type":46,"tag":246,"props":8935,"children":8936},{"style":253},[8937],{"type":52,"value":1883},{"type":46,"tag":246,"props":8939,"children":8941},{"class":248,"line":8940},38,[8942,8946,8950,8954,8958,8962,8966],{"type":46,"tag":246,"props":8943,"children":8944},{"style":1277},[8945],{"type":52,"value":1410},{"type":46,"tag":246,"props":8947,"children":8948},{"style":253},[8949],{"type":52,"value":281},{"type":46,"tag":246,"props":8951,"children":8952},{"style":253},[8953],{"type":52,"value":1419},{"type":46,"tag":246,"props":8955,"children":8956},{"style":1277},[8957],{"type":52,"value":6413},{"type":46,"tag":246,"props":8959,"children":8960},{"style":253},[8961],{"type":52,"value":281},{"type":46,"tag":246,"props":8963,"children":8964},{"style":1440},[8965],{"type":52,"value":1443},{"type":46,"tag":246,"props":8967,"children":8968},{"style":253},[8969],{"type":52,"value":5953},{"type":46,"tag":246,"props":8971,"children":8973},{"class":248,"line":8972},39,[8974],{"type":46,"tag":246,"props":8975,"children":8976},{"style":253},[8977],{"type":52,"value":349},{"type":46,"tag":62,"props":8979,"children":8980},{},[8981,8986],{"type":46,"tag":84,"props":8982,"children":8983},{},[8984],{"type":52,"value":8985},"Step 6:",{"type":52,"value":8987}," Read back file to verify syntax.",{"type":46,"tag":55,"props":8989,"children":8991},{"id":8990},"additional-reference",[8992],{"type":52,"value":8993},"Additional Reference",{"type":46,"tag":62,"props":8995,"children":8996},{},[8997,8999,9004],{"type":52,"value":8998},"For advanced patterns (multi-level nested components, ",{"type":46,"tag":68,"props":9000,"children":9002},{"className":9001},[],[9003],{"type":52,"value":5689},{"type":52,"value":9005}," filtering, metadata prop passing between parent\u002Fchild templates):",{"type":46,"tag":128,"props":9007,"children":9008},{},[9009,9018],{"type":46,"tag":132,"props":9010,"children":9011},{},[9012,9016],{"type":46,"tag":4507,"props":9013,"children":9014},{"href":5364},[9015],{"type":52,"value":5367},{"type":52,"value":9017}," — Full Code Connect API reference",{"type":46,"tag":132,"props":9019,"children":9020},{},[9021,9025],{"type":46,"tag":4507,"props":9022,"children":9023},{"href":4509},[9024],{"type":52,"value":4512},{"type":52,"value":9026}," — Advanced nesting, metadata props, and descendant patterns",{"type":46,"tag":9028,"props":9029,"children":9030},"style",{},[9031],{"type":52,"value":9032},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":9034,"total":9150},[9035,9052,9068,9080,9100,9118,9138],{"slug":9036,"name":9036,"fn":9037,"description":9038,"org":9039,"tags":9040,"stars":28,"repoUrl":29,"updatedAt":9051},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9041,9044,9047,9050],{"name":9042,"slug":9043,"type":15},"Accessibility","accessibility",{"name":9045,"slug":9046,"type":15},"Charts","charts",{"name":9048,"slug":9049,"type":15},"Data Visualization","data-visualization",{"name":26,"slug":27,"type":15},"2026-06-30T19:00:57.102",{"slug":9053,"name":9053,"fn":9054,"description":9055,"org":9056,"tags":9057,"stars":28,"repoUrl":29,"updatedAt":9067},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9058,9061,9064],{"name":9059,"slug":9060,"type":15},"Agents","agents",{"name":9062,"slug":9063,"type":15},"Browser Automation","browser-automation",{"name":9065,"slug":9066,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":9069,"name":9069,"fn":9070,"description":9071,"org":9072,"tags":9073,"stars":28,"repoUrl":29,"updatedAt":9079},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9074,9075,9078],{"name":9062,"slug":9063,"type":15},{"name":9076,"slug":9077,"type":15},"Local Development","local-development",{"name":9065,"slug":9066,"type":15},"2026-04-06T18:41:17.526867",{"slug":9081,"name":9081,"fn":9082,"description":9083,"org":9084,"tags":9085,"stars":28,"repoUrl":29,"updatedAt":9099},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9086,9087,9090,9093,9096],{"name":9059,"slug":9060,"type":15},{"name":9088,"slug":9089,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":9091,"slug":9092,"type":15},"SDK","sdk",{"name":9094,"slug":9095,"type":15},"Serverless","serverless",{"name":9097,"slug":9098,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":9101,"name":9101,"fn":9102,"description":9103,"org":9104,"tags":9105,"stars":28,"repoUrl":29,"updatedAt":9117},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9106,9107,9110,9113,9114],{"name":20,"slug":21,"type":15},{"name":9108,"slug":9109,"type":15},"React","react",{"name":9111,"slug":9112,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":17,"slug":18,"type":15},{"name":9115,"slug":9116,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":9119,"name":9119,"fn":9120,"description":9121,"org":9122,"tags":9123,"stars":28,"repoUrl":29,"updatedAt":9137},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9124,9127,9130,9133,9136],{"name":9125,"slug":9126,"type":15},"AI Infrastructure","ai-infrastructure",{"name":9128,"slug":9129,"type":15},"Cost Optimization","cost-optimization",{"name":9131,"slug":9132,"type":15},"LLM","llm",{"name":9134,"slug":9135,"type":15},"Performance","performance",{"name":9115,"slug":9116,"type":15},"2026-04-06T18:40:44.377464",{"slug":9139,"name":9139,"fn":9140,"description":9141,"org":9142,"tags":9143,"stars":28,"repoUrl":29,"updatedAt":9149},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9144,9145,9148],{"name":9128,"slug":9129,"type":15},{"name":9146,"slug":9147,"type":15},"Database","database",{"name":9131,"slug":9132,"type":15},"2026-04-06T18:41:08.513425",600,{"items":9152,"total":9345},[9153,9174,9197,9214,9230,9247,9266,9276,9290,9302,9314,9329],{"slug":9154,"name":9154,"fn":9155,"description":9156,"org":9157,"tags":9158,"stars":9171,"repoUrl":9172,"updatedAt":9173},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9159,9162,9165,9168],{"name":9160,"slug":9161,"type":15},"Documents","documents",{"name":9163,"slug":9164,"type":15},"Healthcare","healthcare",{"name":9166,"slug":9167,"type":15},"Insurance","insurance",{"name":9169,"slug":9170,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":9175,"name":9175,"fn":9176,"description":9177,"org":9178,"tags":9179,"stars":9194,"repoUrl":9195,"updatedAt":9196},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9180,9183,9185,9188,9191],{"name":9181,"slug":9182,"type":15},".NET","dotnet",{"name":9184,"slug":9175,"type":15},"ASP.NET Core",{"name":9186,"slug":9187,"type":15},"Blazor","blazor",{"name":9189,"slug":9190,"type":15},"C#","csharp",{"name":9192,"slug":9193,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":9198,"name":9198,"fn":9199,"description":9200,"org":9201,"tags":9202,"stars":9194,"repoUrl":9195,"updatedAt":9213},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9203,9206,9209,9212],{"name":9204,"slug":9205,"type":15},"Apps SDK","apps-sdk",{"name":9207,"slug":9208,"type":15},"ChatGPT","chatgpt",{"name":9210,"slug":9211,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":9215,"name":9215,"fn":9216,"description":9217,"org":9218,"tags":9219,"stars":9194,"repoUrl":9195,"updatedAt":9229},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9220,9223,9226],{"name":9221,"slug":9222,"type":15},"API Development","api-development",{"name":9224,"slug":9225,"type":15},"CLI","cli",{"name":9227,"slug":9228,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":9231,"name":9231,"fn":9232,"description":9233,"org":9234,"tags":9235,"stars":9194,"repoUrl":9195,"updatedAt":9246},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9236,9239,9242,9243],{"name":9237,"slug":9238,"type":15},"Cloudflare","cloudflare",{"name":9240,"slug":9241,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":9088,"slug":9089,"type":15},{"name":9244,"slug":9245,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":9248,"name":9248,"fn":9249,"description":9250,"org":9251,"tags":9252,"stars":9194,"repoUrl":9195,"updatedAt":9265},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9253,9256,9259,9262],{"name":9254,"slug":9255,"type":15},"Productivity","productivity",{"name":9257,"slug":9258,"type":15},"Project Management","project-management",{"name":9260,"slug":9261,"type":15},"Strategy","strategy",{"name":9263,"slug":9264,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":24,"name":24,"fn":9267,"description":9268,"org":9269,"tags":9270,"stars":9194,"repoUrl":9195,"updatedAt":9275},"translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9271,9272,9273,9274],{"name":26,"slug":27,"type":15},{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":9210,"slug":9211,"type":15},"2026-04-12T05:06:47.939943",{"slug":9277,"name":9277,"fn":9278,"description":9279,"org":9280,"tags":9281,"stars":9194,"repoUrl":9195,"updatedAt":9289},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9282,9283,9286,9287,9288],{"name":26,"slug":27,"type":15},{"name":9284,"slug":9285,"type":15},"Design System","design-system",{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},"2026-05-10T05:59:52.971881",{"slug":9291,"name":9291,"fn":9292,"description":9293,"org":9294,"tags":9295,"stars":9194,"repoUrl":9195,"updatedAt":9301},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9296,9297,9298,9299,9300],{"name":26,"slug":27,"type":15},{"name":9284,"slug":9285,"type":15},{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},"2026-05-16T06:07:47.821474",{"slug":9303,"name":9303,"fn":9304,"description":9305,"org":9306,"tags":9307,"stars":9194,"repoUrl":9195,"updatedAt":9313},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9308,9309,9310,9311,9312],{"name":26,"slug":27,"type":15},{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"name":9192,"slug":9193,"type":15},"2026-05-16T06:07:40.583615",{"slug":9315,"name":9315,"fn":9316,"description":9317,"org":9318,"tags":9319,"stars":9194,"repoUrl":9195,"updatedAt":9328},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9320,9323,9324,9327],{"name":9321,"slug":9322,"type":15},"Animation","animation",{"name":9227,"slug":9228,"type":15},{"name":9325,"slug":9326,"type":15},"Creative","creative",{"name":26,"slug":27,"type":15},"2026-05-02T05:31:48.48485",{"slug":9330,"name":9330,"fn":9331,"description":9332,"org":9333,"tags":9334,"stars":9194,"repoUrl":9195,"updatedAt":9344},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9335,9336,9337,9340,9343],{"name":9325,"slug":9326,"type":15},{"name":26,"slug":27,"type":15},{"name":9338,"slug":9339,"type":15},"Image Generation","image-generation",{"name":9341,"slug":9342,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]