@llc3233149/core 0.9.0

package/src/tools/patterns.ts

@@ -0,0 +1,189 @@
+import { defineTool } from './schema'
+
+interface DesignPattern {
+  jsx: string
+  notes: string
+}
+
+const PATTERNS: Record<string, DesignPattern> = {
+  card: {
+    jsx: `<Frame name="Card" w={380} h="hug" flex="col" gap={16} p={20} bg="#FFFFFF" rounded={12} shadow="0 1 3 #00000015">
+  <Text size={18} weight="bold" color="#111827">Card Title</Text>
+  <Text size={14} color="#6B7280">Description text goes here with enough detail.</Text>
+  <Frame flex="row" gap={8} items="center">
+    <Frame w={80} h={36} flex="row" items="center" justify="center" bg="#3B82F6" rounded={8}>
+      <Text size={13} weight="bold" color="#FFFFFF">Action</Text>
+    </Frame>
+    <Text size={13} color="#9CA3AF">Secondary</Text>
+  </Frame>
+</Frame>`,
+    notes: '380px is the sweet spot for cards. p={20} inner < p={24} outer. gap={16} groups content. Button hugs content at 80px.'
+  },
+
+  'nav-bar': {
+    jsx: `<Frame name="NavBar" w={1440} h={56} flex="row" items="center" px={24} bg="#FFFFFF" shadow="0 1 2 #0000000A">
+  <Text size={18} weight="bold" color="#111827">Logo</Text>
+  <Frame grow={1} />
+  <Frame flex="row" gap={24} items="center">
+    <Text size={14} color="#374151">Features</Text>
+    <Text size={14} color="#374151">Pricing</Text>
+    <Frame w={80} h={36} flex="row" items="center" justify="center" bg="#3B82F6" rounded={8}>
+      <Text size={13} weight="bold" color="#FFFFFF">Sign Up</Text>
+    </Frame>
+  </Frame>
+</Frame>`,
+    notes: 'h={56} standard nav. grow={1} spacer pushes nav items right. Single CTA button stands out with color.'
+  },
+
+  'hero-section': {
+    jsx: `<Frame name="Hero" w={1440} h="hug" flex="col" items="center" gap={24} py={80} px={24} bg="#F9FAFB">
+  <Text size={40} weight="bold" color="#111827" textAlign="center">Main Headline Here</Text>
+  <Text size={18} color="#6B7280" textAlign="center">Supporting text that explains the value proposition in one or two lines.</Text>
+  <Frame flex="row" gap={12} items="center">
+    <Frame w={140} h={44} flex="row" items="center" justify="center" bg="#3B82F6" rounded={8}>
+      <Text size={15} weight="bold" color="#FFFFFF">Get Started</Text>
+    </Frame>
+    <Frame w={120} h={44} flex="row" items="center" justify="center" rounded={8} stroke="#D1D5DB" strokeWidth={1}>
+      <Text size={15} color="#374151">Learn More</Text>
+    </Frame>
+  </Frame>
+</Frame>`,
+    notes: 'py={80} gives breathing room. size={40} hero heading. Two CTAs: primary filled, secondary outlined.'
+  },
+
+  form: {
+    jsx: `<Frame name="Form" w={400} h="hug" flex="col" gap={20} p={24} bg="#FFFFFF" rounded={12}>
+  <Text size={20} weight="bold" color="#111827">Form Title</Text>
+  <Frame flex="col" gap={6} w="fill">
+    <Text size={13} weight="medium" color="#374151">Label</Text>
+    <Frame w="fill" h={40} flex="row" items="center" px={12} rounded={8} stroke="#D1D5DB" strokeWidth={1}>
+      <Text size={14} color="#9CA3AF">Placeholder text</Text>
+    </Frame>
+  </Frame>
+  <Frame w="fill" h={44} flex="row" items="center" justify="center" bg="#3B82F6" rounded={8}>
+    <Text size={15} weight="bold" color="#FFFFFF">Submit</Text>
+  </Frame>
+</Frame>`,
+    notes: 'w={400} form width. Input h={40}. Label size={13} above input. Submit button w="fill" spans full width.'
+  },
+
+  'list-item': {
+    jsx: `<Frame name="ListItem" w={380} h={64} flex="row" items="center" gap={12} px={16} bg="#FFFFFF">
+  <Ellipse w={40} h={40} bg="#E5E7EB" />
+  <Frame flex="col" gap={2} grow={1}>
+    <Text size={14} weight="bold" color="#111827">Item Title</Text>
+    <Text size={12} color="#9CA3AF">Subtitle or metadata</Text>
+  </Frame>
+  <Text size={12} color="#9CA3AF">→</Text>
+</Frame>`,
+    notes: 'h={64} standard list item. Avatar 40px. grow={1} on text column. Arrow as navigation hint.'
+  },
+
+  modal: {
+    jsx: `<Frame name="ModalBackdrop" w={1440} h={900} items="center" justify="center" flex="col" bg="#00000040">
+  <Frame name="Modal" w={480} h="hug" flex="col" gap={20} p={24} bg="#FFFFFF" rounded={16} shadow="0 4 24 #00000020">
+    <Frame flex="row" items="center" w="fill">
+      <Text size={18} weight="bold" color="#111827" grow={1}>Modal Title</Text>
+      <Text size={18} color="#9CA3AF">✕</Text>
+    </Frame>
+    <Text size={14} color="#6B7280">Modal body content goes here.</Text>
+    <Frame flex="row" gap={8} justify="end" w="fill">
+      <Frame w={80} h={40} flex="row" items="center" justify="center" rounded={8} stroke="#D1D5DB" strokeWidth={1}>
+        <Text size={14} color="#374151">Cancel</Text>
+      </Frame>
+      <Frame w={80} h={40} flex="row" items="center" justify="center" bg="#3B82F6" rounded={8}>
+        <Text size={14} weight="bold" color="#FFFFFF">Save</Text>
+      </Frame>
+    </Frame>
+  </Frame>
+</Frame>`,
+    notes: 'w={480} modal. Backdrop with 25% black. Close button top-right. Actions right-aligned.'
+  },
+
+  sidebar: {
+    jsx: `<Frame name="Sidebar" w={260} h={900} flex="col" gap={4} py={16} bg="#F9FAFB" stroke="#E5E7EB" strokeWidth={1}>
+  <Frame flex="row" items="center" gap={8} px={16} pb={16}>
+    <Ellipse w={32} h={32} bg="#3B82F6" />
+    <Text size={14} weight="bold" color="#111827">App Name</Text>
+  </Frame>
+  {['☰ Dashboard', '○ Users', '◆ Settings'].map(item => (
+    <Frame w="fill" h={40} flex="row" items="center" px={16} rounded={8}>
+      <Text size={14} color="#374151">{item}</Text>
+    </Frame>
+  ))}
+</Frame>`,
+    notes: 'w={260} sidebar. h={40} nav items. px={16} consistent indent. Unicode icons for nav items.'
+  },
+
+  'dashboard-grid': {
+    jsx: `<Frame name="DashboardGrid" w={1080} h="hug" flex="row" gap={20} wrap>
+  {['Revenue', 'Users', 'Orders', 'Growth'].map(label => (
+    <Frame w={250} h="hug" flex="col" gap={8} p={20} bg="#FFFFFF" rounded={12} shadow="0 1 3 #00000010">
+      <Text size={12} color="#9CA3AF">{label}</Text>
+      <Text size={28} weight="bold" color="#111827">1,234</Text>
+      <Text size={12} color="#10B981">↑ 12%</Text>
+    </Frame>
+  ))}
+</Frame>`,
+    notes: 'Stat cards at 250px in a wrapping row. gap={20} between cards. Metric hierarchy: label → value → trend.'
+  },
+
+  'pricing-table': {
+    jsx: `<Frame name="PricingTable" w={1080} h="hug" flex="row" gap={24} items="start" justify="center">
+  {[{name:'Basic',price:'$9'},{name:'Pro',price:'$29'},{name:'Enterprise',price:'$99'}].map(plan => (
+    <Frame w={320} h="hug" flex="col" gap={16} p={24} bg="#FFFFFF" rounded={12} stroke="#E5E7EB" strokeWidth={1}>
+      <Text size={16} weight="bold" color="#111827">{plan.name}</Text>
+      <Text size={32} weight="bold" color="#111827">{plan.price}<Text size={14} color="#9CA3AF">/mo</Text></Text>
+      <Frame w="fill" h={1} bg="#E5E7EB" />
+      {['Feature one', 'Feature two', 'Feature three'].map(f => (
+        <Frame flex="row" gap={8} items="center"><Text size={14} color="#10B981">✓</Text><Text size={14} color="#374151">{f}</Text></Frame>
+      ))}
+      <Frame w="fill" h={44} flex="row" items="center" justify="center" bg="#3B82F6" rounded={8}>
+        <Text size={14} weight="bold" color="#FFFFFF">Choose Plan</Text>
+      </Frame>
+    </Frame>
+  ))}
+</Frame>`,
+    notes: 'Three columns at 320px. Price hierarchy: large number + small suffix. Divider separates price from features.'
+  },
+
+  'profile-header': {
+    jsx: `<Frame name="ProfileHeader" w={400} h="hug" flex="col" items="center" gap={16} p={24} bg="#FFFFFF" rounded={12}>
+  <Ellipse w={64} h={64} bg="#E5E7EB" />
+  <Frame flex="col" gap={4} items="center">
+    <Text size={18} weight="bold" color="#111827">User Name</Text>
+    <Text size={14} color="#9CA3AF">user@example.com</Text>
+  </Frame>
+  <Frame flex="row" gap={32}>
+    <Frame flex="col" items="center" gap={2}>
+      <Text size={18} weight="bold" color="#111827">128</Text>
+      <Text size={12} color="#9CA3AF">Posts</Text>
+    </Frame>
+    <Frame flex="col" items="center" gap={2}>
+      <Text size={18} weight="bold" color="#111827">1.2k</Text>
+      <Text size={12} color="#9CA3AF">Followers</Text>
+    </Frame>
+  </Frame>
+</Frame>`,
+    notes: 'Centered layout for profile. Avatar 64px. Stats in a row with gap={32} for visual separation.'
+  },
+
+}
+
+export const getDesignPattern = defineTool({
+  name: 'get_design_pattern',
+  description: 'Get a reference JSX template for a common UI pattern. Call BEFORE rendering to see recommended structure, sizing, and spacing.',
+  params: {
+    pattern: {
+      type: 'string',
+      required: true,
+      description: 'Pattern name',
+      enum: ['card', 'nav-bar', 'hero-section', 'form', 'list-item', 'modal', 'sidebar', 'dashboard-grid', 'pricing-table', 'profile-header']
+    }
+  },
+  execute: (_figma, { pattern }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- defensive: runtime key may not exist
+    const p: DesignPattern | undefined = PATTERNS[pattern]
+    return p ?? { error: `Unknown pattern "${pattern}". Available: ${Object.keys(PATTERNS).join(', ')}` }
+  }
+})

package/src/tools/read.ts

@@ -0,0 +1,401 @@
+import { createTwoFilesPatch } from 'diff'
+
+import { sceneNodeToJSX } from '../render/export-jsx'
+import { defineTool, nodeSummary, nodeToResult } from './schema'
+import { queryByXPath } from '../xpath'
+
+import type { FigmaNodeProxy } from '../figma-api'
+import type { Fill } from '../scene-graph'
+
+export const getSelection = defineTool({
+  name: 'get_selection',
+  description: 'Get details about currently selected nodes.',
+  params: {},
+  execute: (figma) => {
+    const sel = figma.currentPage.selection
+    return { selection: sel.map(nodeToResult) }
+  }
+})
+
+export const getPageTree = defineTool({
+  name: 'get_page_tree',
+  description:
+    'Get the node tree of the current page. Returns all nodes with hierarchy, types, positions, and sizes.',
+  params: {},
+  execute: (figma) => {
+    const page = figma.currentPage
+    return {
+      page: page.name,
+      children: page.children.map(nodeToResult)
+    }
+  }
+})
+
+export const getNode = defineTool({
+  name: 'get_node',
+  description: 'Get detailed properties of a node by ID.',
+  params: {
+    id: { type: 'string', description: 'Node ID', required: true }
+  },
+  execute: (figma, { id }) => {
+    const node = figma.getNodeById(id)
+    if (!node) return { error: `Node "${id}" not found` }
+    return nodeToResult(node)
+  }
+})
+
+export const findNodes = defineTool({
+  name: 'find_nodes',
+  description: 'Find nodes by name pattern and/or type.',
+  params: {
+    name: { type: 'string', description: 'Name substring to match (case-insensitive)' },
+    type: {
+      type: 'string',
+      description: 'Node type filter',
+      enum: [
+        'FRAME',
+        'RECTANGLE',
+        'ELLIPSE',
+        'TEXT',
+        'LINE',
+        'STAR',
+        'POLYGON',
+        'SECTION',
+        'GROUP',
+        'COMPONENT',
+        'INSTANCE',
+        'VECTOR'
+      ]
+    }
+  },
+  execute: (figma, args) => {
+    const page = figma.currentPage
+    const matches = page.findAll((node) => {
+      if (args.type && node.type !== args.type) return false
+      if (args.name && !node.name.toLowerCase().includes(args.name.toLowerCase())) return false
+      return true
+    })
+    return { count: matches.length, nodes: matches.map(nodeSummary) }
+  }
+})
+
+export const getComponents = defineTool({
+  name: 'get_components',
+  description: 'List all components in the document, optionally filtered by name.',
+  params: {
+    name: { type: 'string', description: 'Filter by name (case-insensitive substring)' },
+    limit: { type: 'number', description: 'Max results (default: 50)' }
+  },
+  execute: (figma, args) => {
+    const limit = args.limit ?? 50
+    const nameFilter = args.name?.toLowerCase()
+    const components: { id: string; name: string; type: string; page: string }[] = []
+
+    for (const page of figma.root.children) {
+      if (components.length >= limit) break
+      page.findAll((node) => {
+        if (components.length >= limit) return false
+        if (node.type !== 'COMPONENT' && node.type !== 'COMPONENT_SET') return false
+        if (nameFilter && !node.name.toLowerCase().includes(nameFilter)) return false
+        components.push({ id: node.id, name: node.name, type: node.type, page: page.name })
+        return false
+      })
+    }
+
+    return { count: components.length, components }
+  }
+})
+
+export const listPages = defineTool({
+  name: 'list_pages',
+  description: 'List all pages in the document.',
+  params: {},
+  execute: (figma) => {
+    const pages = figma.root.children
+    return {
+      current: figma.currentPage.name,
+      pages: pages.map((p) => ({ id: p.id, name: p.name }))
+    }
+  }
+})
+
+export const switchPage = defineTool({
+  name: 'switch_page',
+  mutates: true,
+  description: 'Switch to a different page by name or ID.',
+  params: {
+    page: { type: 'string', description: 'Page name or ID', required: true }
+  },
+  execute: (figma, { page }) => {
+    const target = figma.root.children.find((p) => p.name === page) ?? figma.getNodeById(page)
+    if (!target) return { error: `Page "${page}" not found` }
+    figma.currentPage = target
+    return { page: target.name, id: target.id }
+  }
+})
+
+export const getCurrentPage = defineTool({
+  name: 'get_current_page',
+  description: 'Get the current page name and ID.',
+  params: {},
+  execute: (figma) => {
+    return { id: figma.currentPage.id, name: figma.currentPage.name }
+  }
+})
+
+export const pageBounds = defineTool({
+  name: 'page_bounds',
+  description: 'Get bounding box of all objects on the current page.',
+  params: {},
+  execute: (figma) => {
+    const page = figma.currentPage
+    let minX = Infinity
+    let minY = Infinity
+    let maxX = -Infinity
+    let maxY = -Infinity
+    for (const child of page.children) {
+      const bounds = child.absoluteBoundingBox
+      minX = Math.min(minX, bounds.x)
+      minY = Math.min(minY, bounds.y)
+      maxX = Math.max(maxX, bounds.x + bounds.width)
+      maxY = Math.max(maxY, bounds.y + bounds.height)
+    }
+    if (minX === Infinity) return { x: 0, y: 0, width: 0, height: 0 }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+  }
+})
+
+export const selectNodes = defineTool({
+  name: 'select_nodes',
+  mutates: true,
+  description: 'Select one or more nodes by ID.',
+  params: {
+    ids: { type: 'string[]', description: 'Node IDs to select', required: true }
+  },
+  execute: (figma, { ids }) => {
+    figma.currentPage.selection = ids
+      .map((id) => figma.getNodeById(id))
+      .filter((n): n is FigmaNodeProxy => n !== null)
+    return { selected: ids }
+  }
+})
+
+export const listFonts = defineTool({
+  name: 'list_fonts',
+  description: 'List fonts used in the current page.',
+  params: {
+    family: { type: 'string', description: 'Filter by family name (substring)' }
+  },
+  execute: (figma, args) => {
+    const fonts = new Map<string, Set<number>>()
+    const page = figma.currentPage
+    page.findAll((node) => {
+      if (node.type === 'TEXT') {
+        const raw = figma.graph.getNode(node.id)
+        if (raw) {
+          const key = raw.fontFamily
+          if (!fonts.has(key)) fonts.set(key, new Set())
+          fonts.get(key)?.add(raw.fontWeight)
+        }
+      }
+      return false
+    })
+    let result = [...fonts.entries()].map(([family, weights]) => ({
+      family,
+      weights: [...weights].sort((a, b) => a - b)
+    }))
+    if (args.family) {
+      const q = args.family.toLowerCase()
+      result = result.filter((f) => f.family.toLowerCase().includes(q))
+    }
+    return { count: result.length, fonts: result }
+  }
+})
+
+export const queryNodes = defineTool({
+  name: 'query_nodes',
+  description: `Query nodes using XPath selectors. Node types are element names (FRAME, TEXT, RECTANGLE, ELLIPSE, etc.). Attributes: name, width, height, x, y, visible, opacity, cornerRadius, fontSize, fontFamily, fontWeight, layoutMode, itemSpacing, paddingTop/Right/Bottom/Left, strokeWeight, rotation, locked, blendMode, text, lineHeight, letterSpacing.
+
+Examples:
+  //FRAME — all frames
+  //FRAME[@width < 300] — frames narrower than 300px
+  //COMPONENT[starts-with(@name, 'Button')] — components starting with "Button"
+  //SECTION/FRAME — direct frame children of sections
+  //SECTION//TEXT — all text nodes inside sections
+  //*[@cornerRadius > 0] — any node with corner radius
+  //TEXT[contains(@text, 'Hello')] — text nodes containing "Hello"`,
+  params: {
+    selector: { type: 'string', description: 'XPath selector', required: true },
+    page: { type: 'string', description: 'Page name (default: current page)' },
+    limit: { type: 'number', description: 'Max results (default: 1000)' }
+  },
+  execute: async (figma, args) => {
+    try {
+      const nodes = await queryByXPath(figma.graph, args.selector, {
+        page: args.page ?? figma.currentPage.name,
+        limit: args.limit
+      })
+      return {
+        count: nodes.length,
+        nodes: nodes.map((n) => ({ id: n.id, name: n.name, type: n.type }))
+      }
+    } catch (err) {
+      return { error: `XPath error: ${err instanceof Error ? err.message : String(err)}` }
+    }
+  }
+})
+
+const MAX_JSX_LENGTH = 12_000
+
+export const getJsx = defineTool({
+  name: 'get_jsx',
+  description:
+    'Get JSX representation of a node and its children. Compact round-trip format — same syntax as the render tool.',
+  params: {
+    id: { type: 'string', description: 'Node ID', required: true }
+  },
+  execute: (figma, { id }) => {
+    const node = figma.getNodeById(id)
+    if (!node) return { error: `Node "${id}" not found` }
+    const jsx = sceneNodeToJSX(id, figma.graph)
+    if (jsx.length > MAX_JSX_LENGTH) {
+      return {
+        id,
+        name: node.name,
+        jsx: jsx.slice(0, MAX_JSX_LENGTH),
+        truncated: true,
+        totalLength: jsx.length
+      }
+    }
+    return { id, name: node.name, jsx }
+  }
+})
+
+export const diffJsx = defineTool({
+  name: 'diff_jsx',
+  description:
+    'Structural diff between two nodes in JSX format. Shows added/removed children, changed props.',
+  params: {
+    from: { type: 'string', description: 'Source node ID', required: true },
+    to: { type: 'string', description: 'Target node ID', required: true }
+  },
+  execute: (figma, { from, to }) => {
+    const fromNode = figma.getNodeById(from)
+    if (!fromNode) return { error: `Node "${from}" not found` }
+    const toNode = figma.getNodeById(to)
+    if (!toNode) return { error: `Node "${to}" not found` }
+
+    const fromJsx = sceneNodeToJSX(from, figma.graph)
+    const toJsx = sceneNodeToJSX(to, figma.graph)
+
+    if (fromJsx === toJsx) return { diff: null, message: 'No differences' }
+
+    const patch = createTwoFilesPatch(
+      fromNode.name,
+      toNode.name,
+      fromJsx,
+      toJsx,
+      'source',
+      'target',
+      { context: 3 }
+    )
+    return { diff: patch }
+  }
+})
+
+function fillToHex(fill: Fill): string | null {
+  if (fill.type !== 'SOLID' || !fill.visible) return null
+  const { r, g, b } = fill.color
+  return '#' + [r, g, b].map(c => Math.round(c * 255).toString(16).padStart(2, '0')).join('').toUpperCase()
+}
+
+function countDescendants(node: FigmaNodeProxy): number {
+  let count = 0
+  const walk = (n: FigmaNodeProxy) => { count++; for (const c of n.children) walk(c) }
+  walk(node)
+  return count - 1 // exclude self
+}
+
+export const designOverview = defineTool({
+  name: 'design_overview',
+  description: 'Compact overview of the entire design: pages, top-level frames with names/sizes, node counts by type, font list, color palette summary. Use this FIRST when analyzing a large imported design.',
+  params: {},
+  execute: (figma) => {
+    const pages = figma.root.children.map(p => ({
+      id: p.id, name: p.name, isCurrent: p.id === figma.currentPage.id
+    }))
+    const page = figma.currentPage
+    const screens = page.children.map(c => ({
+      id: c.id, name: c.name, type: c.type,
+      width: Math.round(c.width), height: Math.round(c.height),
+      childCount: countDescendants(c)
+    }))
+    const byType: Record<string, number> = {}
+    let totalNodes = 0
+    const fonts = new Set<string>()
+    const colors = new Map<string, number>()
+    page.findAll(node => {
+      totalNodes++
+      byType[node.type] = (byType[node.type] || 0) + 1
+      const raw = figma.graph.getNode(node.id)
+      if (!raw) return false
+      if (raw.type === 'TEXT' && raw.fontFamily) fonts.add(raw.fontFamily)
+      for (const fill of raw.fills) {
+        const hex = fillToHex(fill)
+        if (hex) colors.set(hex, (colors.get(hex) || 0) + 1)
+      }
+      return false
+    })
+    const topColors = [...colors.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 10)
+      .map(([hex]) => hex)
+    return {
+      pages, screens,
+      stats: { totalNodes, byType },
+      fonts: [...fonts].sort(),
+      topColors
+    }
+  }
+})
+
+export const describeScreen = defineTool({
+  name: 'describe_screen',
+  description: 'Describe a single screen/frame: layout structure, key components, text content summary, and visual style. Use after design_overview to analyze each screen individually.',
+  params: {
+    id: { type: 'string', description: 'Node ID of the screen/frame to describe', required: true },
+    depth: { type: 'number', description: 'Max depth to traverse (default: 3)' }
+  },
+  execute: (figma, { id, depth = 3 }) => {
+    const node = figma.getNodeById(id)
+    if (!node) return { error: `Node "${id}" not found` }
+
+    const texts: string[] = []
+    type ChildSummary = { name: string; type: string; w: number; h: number; text?: string; children?: ChildSummary[] }
+
+    function walkNode(n: FigmaNodeProxy, d: number): ChildSummary {
+      const raw = figma.graph.getNode(n.id)
+      const entry: ChildSummary = {
+        name: n.name, type: n.type,
+        w: Math.round(n.width), h: Math.round(n.height)
+      }
+      if (n.type === 'TEXT' && raw?.text) {
+        const t = raw.text.length > 100 ? raw.text.slice(0, 100) + '...' : raw.text
+        entry.text = t
+        texts.push(t)
+      }
+      if (d > 0 && n.children.length > 0) {
+        entry.children = n.children.map(c => walkNode(c, d - 1))
+      }
+      return entry
+    }
+
+    const raw = figma.graph.getNode(id)
+    const structure = walkNode(node, depth)
+    const layout = raw?.layoutMode
+      ? { mode: raw.layoutMode, gap: raw.itemSpacing, padding: [raw.paddingTop, raw.paddingRight, raw.paddingBottom, raw.paddingLeft] }
+      : null
+
+    return { id, name: node.name, width: Math.round(node.width), height: Math.round(node.height), layout, structure, textContent: texts.slice(0, 20) }
+  }
+})