From 0e3fe555a0912b3917f4fcc18d287ff2676edf64 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 10:19:49 +0200
Subject: [PATCH 01/30] chore: update IDE config

---
 .idea/misc.xml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.idea/misc.xml b/.idea/misc.xml
index 03f397c..8c4f656 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,5 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="PWA">
+    <option name="wasEnabledAtLeastOnce" value="true" />
+  </component>
   <component name="ProjectRootManager" version="2" languageLevel="JDK_19" default="true" project-jdk-name="19" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>

From 8b301f737ebdb24334072465237e61c0360e95f0 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 10:20:02 +0200
Subject: [PATCH 02/30] feat: retrieve all instances from selected node

---
 packages/code/src/generate.ts |  5 ++++-
 packages/code/src/utils.ts    | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index 9cd4c3f..1a298ce 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -1,6 +1,6 @@
 import FigmaNodeParser from './parsers/figma-node.parser'
 import HTMLGenerator from './generators/html.generator'
-import { getSelectedNodes } from './utils'
+import { getInstanceNodes, getSelectedNodes } from './utils'
 import ComponentSetProcessor from './set/component-set-processor'
 import {
   sendExecutionTimeMessage,
@@ -24,6 +24,9 @@ export default async function generate(config: Configuration): Promise<string |
   try {
     const nodes = getSelectedNodes()
 
+    const instanceNodes = getInstanceNodes(nodes[0])
+    console.log('instanceNodes', instanceNodes)
+
     // Early return if no node is selected
     if (nodes.length === 0) {
       sendUnselectedMessage()
diff --git a/packages/code/src/utils.ts b/packages/code/src/utils.ts
index ba29cf0..e71604f 100644
--- a/packages/code/src/utils.ts
+++ b/packages/code/src/utils.ts
@@ -35,6 +35,28 @@ export function getSelectedNode(): SceneNode | null {
   return null
 }
 
+/**
+ * Checks if the node is an instance node.
+ * @param node - The node to check.
+ */
+function isInstanceNode(node: SceneNode): node is InstanceNode {
+  return node.type === 'INSTANCE'
+}
+
+/**
+ * Retrieves all instance nodes in the node tree.
+ * @param node
+ */
+export function getInstanceNodes(node: SceneNode): InstanceNode[] {
+  if (isInstanceNode(node))
+    return [node]
+
+  else if ('children' in node)
+    return node.children.flatMap(getInstanceNodes)
+
+  else return []
+}
+
 /**
  * Zips two arrays together, creating pairs of corresponding elements.
  *

From dcbeded4a7529ea4f6f0376f13140b55b718e93d Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 10:23:29 +0200
Subject: [PATCH 03/30] chore: rename html event to generated component event

---
 packages/code/src/generate.ts     | 4 ++--
 packages/code/src/messages.ts     | 6 +++---
 packages/types/src/events.ts      | 6 +++---
 packages/ui/src/stores/useCode.ts | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index 1a298ce..603aa95 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -4,7 +4,7 @@ import { getInstanceNodes, getSelectedNodes } from './utils'
 import ComponentSetProcessor from './set/component-set-processor'
 import {
   sendExecutionTimeMessage,
-  sendHtmlMessage,
+  sendGeneratedComponentsMessage,
   sendIsLoadingMessage,
   sendSelectedMessage,
   sendUnselectedMessage,
@@ -91,7 +91,7 @@ export default async function generate(config: Configuration): Promise<string |
 
     // only send message if html is not empty
     if (html)
-      sendHtmlMessage(html)
+      sendGeneratedComponentsMessage(html)
     else
       sendUnselectedMessage()
   }
diff --git a/packages/code/src/messages.ts b/packages/code/src/messages.ts
index e94a4b8..cb0bd6a 100644
--- a/packages/code/src/messages.ts
+++ b/packages/code/src/messages.ts
@@ -1,7 +1,7 @@
 import type {
   ConfigurationPluginMessage,
   ExecutionTimePluginMessage,
-  HtmlPluginMessage,
+  GeneratedComponentsPluginMessage,
   IConfiguration,
   IsLoadingPluginMessage,
   PluginMessage,
@@ -60,8 +60,8 @@ export function sendSelectedMessage(nodes: SelectedNode[] | null): void {
  *
  * @return {void}
  */
-export function sendHtmlMessage(html: string): void {
-  const pluginMessage: HtmlPluginMessage = { event: 'html', data: { html } }
+export function sendGeneratedComponentsMessage(html: string): void {
+  const pluginMessage: GeneratedComponentsPluginMessage = { event: 'generated-components', data: { html } }
   figma.ui.postMessage(pluginMessage)
 }
 
diff --git a/packages/types/src/events.ts b/packages/types/src/events.ts
index be29512..24f4b77 100644
--- a/packages/types/src/events.ts
+++ b/packages/types/src/events.ts
@@ -23,9 +23,9 @@ interface RendererPluginMessageData {
   height: number
 }
 
-export type HtmlPluginMessage = BasePluginMessage<'html', HtmlPluginMessageData>
+export type GeneratedComponentsPluginMessage = BasePluginMessage<'generated-components', GeneratedComponentsPluginMessageData>
 
-interface HtmlPluginMessageData {
+interface GeneratedComponentsPluginMessageData {
   html: string
 }
 
@@ -110,7 +110,7 @@ interface SelectedPluginMessageData {
 
 export type PluginMessage =
   | RendererPluginMessage
-  | HtmlPluginMessage
+  | GeneratedComponentsPluginMessage
   | UnselectedPluginMessage
   | ExecutionTimePluginMessage
   | IsLoadingPluginMessage
diff --git a/packages/ui/src/stores/useCode.ts b/packages/ui/src/stores/useCode.ts
index d6d3c45..4b1aaca 100644
--- a/packages/ui/src/stores/useCode.ts
+++ b/packages/ui/src/stores/useCode.ts
@@ -18,7 +18,7 @@ export const useCode = defineStore('code', () => {
 
     const { onPluginMessage } = usePluginMessage()
 
-    onPluginMessage('html', ({ html }) => {
+    onPluginMessage('generated-components', ({ html }) => {
       code.value = html
     })
 

From 892c985fcc630adbc82f65aed20b5a3f45a95c86 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 10:31:23 +0200
Subject: [PATCH 04/30] feat: add ability to send multiple components via the
 event bus

---
 packages/code/src/generate.ts     | 11 +++++++----
 packages/code/src/messages.ts     |  8 +++++---
 packages/types/src/events.ts      |  8 ++++++--
 packages/ui/src/stores/useCode.ts |  5 +++--
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index 603aa95..2128147 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -90,10 +90,13 @@ export default async function generate(config: Configuration): Promise<string |
     }
 
     // only send message if html is not empty
-    if (html)
-      sendGeneratedComponentsMessage(html)
-    else
-      sendUnselectedMessage()
+    if (html) {
+      sendGeneratedComponentsMessage({
+        mainComponent: 'main',
+        components: { main: html },
+      })
+    }
+    else { sendUnselectedMessage() }
   }
   catch (e) {
     figma.notify('Onyx: Unexpected Error')
diff --git a/packages/code/src/messages.ts b/packages/code/src/messages.ts
index cb0bd6a..89b613f 100644
--- a/packages/code/src/messages.ts
+++ b/packages/code/src/messages.ts
@@ -2,6 +2,7 @@ import type {
   ConfigurationPluginMessage,
   ExecutionTimePluginMessage,
   GeneratedComponentsPluginMessage,
+  GeneratedComponentsPluginMessageData,
   IConfiguration,
   IsLoadingPluginMessage,
   PluginMessage,
@@ -9,6 +10,7 @@ import type {
   SelectedPluginMessage,
   UnselectedPluginMessage,
 } from '@onyx-gen/types'
+
 import EventBus from './event-bus'
 
 /**
@@ -56,12 +58,12 @@ export function sendSelectedMessage(nodes: SelectedNode[] | null): void {
 /**
  * Sends an HTML message to the UI plugin.
  *
- * @param {string} html - The HTML content to send.
+ * @param {GeneratedComponentsPluginMessageData} data - The generated components data.
  *
  * @return {void}
  */
-export function sendGeneratedComponentsMessage(html: string): void {
-  const pluginMessage: GeneratedComponentsPluginMessage = { event: 'generated-components', data: { html } }
+export function sendGeneratedComponentsMessage(data: GeneratedComponentsPluginMessageData): void {
+  const pluginMessage: GeneratedComponentsPluginMessage = { event: 'generated-components', data }
   figma.ui.postMessage(pluginMessage)
 }
 
diff --git a/packages/types/src/events.ts b/packages/types/src/events.ts
index 24f4b77..f2a77a5 100644
--- a/packages/types/src/events.ts
+++ b/packages/types/src/events.ts
@@ -25,8 +25,12 @@ interface RendererPluginMessageData {
 
 export type GeneratedComponentsPluginMessage = BasePluginMessage<'generated-components', GeneratedComponentsPluginMessageData>
 
-interface GeneratedComponentsPluginMessageData {
-  html: string
+type ComponentName = string
+type GeneratedComponent = string
+
+export interface GeneratedComponentsPluginMessageData {
+  mainComponent: string
+  components: Record<ComponentName, GeneratedComponent>
 }
 
 export type ConfigurationPluginMessage = BasePluginMessage<'configuration', ConfigurationPluginMessageData>
diff --git a/packages/ui/src/stores/useCode.ts b/packages/ui/src/stores/useCode.ts
index 4b1aaca..a279cec 100644
--- a/packages/ui/src/stores/useCode.ts
+++ b/packages/ui/src/stores/useCode.ts
@@ -18,8 +18,9 @@ export const useCode = defineStore('code', () => {
 
     const { onPluginMessage } = usePluginMessage()
 
-    onPluginMessage('generated-components', ({ html }) => {
-      code.value = html
+    onPluginMessage('generated-components', ({ mainComponent, components }) => {
+      console.log('Received generated components', mainComponent, components)
+      code.value = components[mainComponent]
     })
 
     onPluginMessage('unselected', () => {

From 9ffdc2240503a322116139323f3d4203bb9b4e1d Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 11:00:17 +0200
Subject: [PATCH 05/30] feat: generate code for instance node in selected node
 sub-tree

---
 packages/code/src/generate.ts     | 34 +++++++++++++++++++++++++++----
 packages/ui/src/stores/useCode.ts |  2 +-
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index 2128147..1d216f4 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -24,9 +24,6 @@ export default async function generate(config: Configuration): Promise<string |
   try {
     const nodes = getSelectedNodes()
 
-    const instanceNodes = getInstanceNodes(nodes[0])
-    console.log('instanceNodes', instanceNodes)
-
     // Early return if no node is selected
     if (nodes.length === 0) {
       sendUnselectedMessage()
@@ -89,11 +86,40 @@ export default async function generate(config: Configuration): Promise<string |
         sendSelectedMessage([])
     }
 
+    const instanceNodes = await Promise.all(
+      nodes
+        .flatMap(selectedNode => getInstanceNodes(selectedNode))
+        .filter(instanceNode => !config.ignoredComponentInstances.includes(instanceNode.name))
+        .map(async instanceNode => await instanceNode.getMainComponentAsync())
+        .filter(c => c !== null) as Promise<ComponentNode>[],
+    )
+    console.log('Found instanceNodes', instanceNodes)
+
+    const generatedInstances: Record<string, string> = {}
+
+    instanceNodes.map(async (instanceNode) => {
+      console.log('Processing instanceNode', instanceNode.name)
+
+      const parser = new FigmaNodeParser({ default: 'default' }, config)
+      const tree = await parser.parse(instanceNode)
+
+      if (tree) {
+        const generator = new HTMLGenerator([], {}, config)
+        generatedInstances[instanceNode.name] = await generator.generate(tree)
+
+        console.log('Generated HTML for instanceNode', instanceNode.name, generatedInstances[instanceNode.name])
+      }
+      else {
+        console.error('It was not possible to generate HTML code for the selected node.')
+        figma.notify('Error during HTML generation')
+      }
+    })
+
     // only send message if html is not empty
     if (html) {
       sendGeneratedComponentsMessage({
         mainComponent: 'main',
-        components: { main: html },
+        components: { main: html, ...generatedInstances },
       })
     }
     else { sendUnselectedMessage() }
diff --git a/packages/ui/src/stores/useCode.ts b/packages/ui/src/stores/useCode.ts
index a279cec..a82a417 100644
--- a/packages/ui/src/stores/useCode.ts
+++ b/packages/ui/src/stores/useCode.ts
@@ -19,7 +19,7 @@ export const useCode = defineStore('code', () => {
     const { onPluginMessage } = usePluginMessage()
 
     onPluginMessage('generated-components', ({ mainComponent, components }) => {
-      console.log('Received generated components', mainComponent, components)
+      console.log('Received generated components', { mainComponent, components })
       code.value = components[mainComponent]
     })
 

From 15fe2628d775be1636a9dd2d5628f63408849d1d Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 11:46:23 +0200
Subject: [PATCH 06/30] feat: emit generated components to UI code component

---
 packages/ui/src/components/code.vue |  4 +++-
 packages/ui/src/stores/useCode.ts   | 12 ++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 6408c45..7c57006 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -7,7 +7,7 @@ import { useNotification } from '@/composables/useNotification'
 import { useCode } from '@/stores/useCode'
 import Wrapper from '@/components/layout/wrapper.vue'
 
-const { code, isLoading, executionTime } = storeToRefs(useCode())
+const { code, isLoading, executionTime, components } = storeToRefs(useCode())
 
 const { theme } = useTheme()
 
@@ -30,6 +30,8 @@ function onCopy() {
 
 <template>
   <Wrapper headline="Generated Code" :loading="isLoading">
+    <div>{{ components }}</div>
+
     <div class="w-full" v-html="html" />
 
     <template #action>
diff --git a/packages/ui/src/stores/useCode.ts b/packages/ui/src/stores/useCode.ts
index a82a417..3a34c1f 100644
--- a/packages/ui/src/stores/useCode.ts
+++ b/packages/ui/src/stores/useCode.ts
@@ -1,10 +1,12 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
-import type { SelectedNode } from '@onyx-gen/types'
+import type { GeneratedComponentsPluginMessageData, SelectedNode } from '@onyx-gen/types'
 import { whenever } from '@vueuse/core'
 import { usePluginMessage } from './usePluginMessage'
 
 export const useCode = defineStore('code', () => {
+  const components = ref<GeneratedComponentsPluginMessageData | null>(null)
+
   const code = ref('')
   const selectedNodes = ref<SelectedNode[] | null>(null)
   const hasSelection = computed(() => selectedNodes.value !== null)
@@ -18,9 +20,10 @@ export const useCode = defineStore('code', () => {
 
     const { onPluginMessage } = usePluginMessage()
 
-    onPluginMessage('generated-components', ({ mainComponent, components }) => {
-      console.log('Received generated components', { mainComponent, components })
-      code.value = components[mainComponent]
+    onPluginMessage('generated-components', (_components) => {
+      components.value = _components
+      console.log('Received generated components', _components)
+      code.value = _components.components[_components.mainComponent]
     })
 
     onPluginMessage('unselected', () => {
@@ -47,5 +50,6 @@ export const useCode = defineStore('code', () => {
     hasSelection,
     isLoading,
     executionTime,
+    components,
   }
 })

From 989aa488cc824308519fb518042c6b104347455d Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 16:20:03 +0200
Subject: [PATCH 07/30] feat: display components in tab group

---
 packages/code/src/generate.ts       | 24 +++++++++++++++-------
 packages/code/src/messages.ts       |  1 +
 packages/ui/src/components/code.vue | 31 ++++++++++++++++++++++++++---
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index 1d216f4..841f5f6 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -86,28 +86,36 @@ export default async function generate(config: Configuration): Promise<string |
         sendSelectedMessage([])
     }
 
+    interface ComponentInstanceInfo {
+      node: ComponentNode
+      instanceName: string
+    }
+
     const instanceNodes = await Promise.all(
       nodes
         .flatMap(selectedNode => getInstanceNodes(selectedNode))
         .filter(instanceNode => !config.ignoredComponentInstances.includes(instanceNode.name))
-        .map(async instanceNode => await instanceNode.getMainComponentAsync())
-        .filter(c => c !== null) as Promise<ComponentNode>[],
+        .map(async instanceNode => ({
+          node: await instanceNode.getMainComponentAsync(),
+          instanceName: instanceNode.name,
+        }))
+        .filter(async c => (await c).node !== null) as Promise<ComponentInstanceInfo>[],
     )
     console.log('Found instanceNodes', instanceNodes)
 
     const generatedInstances: Record<string, string> = {}
 
-    instanceNodes.map(async (instanceNode) => {
-      console.log('Processing instanceNode', instanceNode.name)
+    const promises = instanceNodes.map(async (componentInstanceInfo) => {
+      console.log('Processing instanceNode....', componentInstanceInfo.instanceName)
 
       const parser = new FigmaNodeParser({ default: 'default' }, config)
-      const tree = await parser.parse(instanceNode)
+      const tree = await parser.parse(componentInstanceInfo.node)
 
       if (tree) {
         const generator = new HTMLGenerator([], {}, config)
-        generatedInstances[instanceNode.name] = await generator.generate(tree)
+        generatedInstances[componentInstanceInfo.instanceName] = await generator.generate(tree)
 
-        console.log('Generated HTML for instanceNode', instanceNode.name, generatedInstances[instanceNode.name])
+        console.log('Generated HTML for instanceNode', componentInstanceInfo.instanceName, generatedInstances[componentInstanceInfo.instanceName])
       }
       else {
         console.error('It was not possible to generate HTML code for the selected node.')
@@ -115,6 +123,8 @@ export default async function generate(config: Configuration): Promise<string |
       }
     })
 
+    await Promise.all(promises)
+
     // only send message if html is not empty
     if (html) {
       sendGeneratedComponentsMessage({
diff --git a/packages/code/src/messages.ts b/packages/code/src/messages.ts
index 89b613f..ea8d55b 100644
--- a/packages/code/src/messages.ts
+++ b/packages/code/src/messages.ts
@@ -64,6 +64,7 @@ export function sendSelectedMessage(nodes: SelectedNode[] | null): void {
  */
 export function sendGeneratedComponentsMessage(data: GeneratedComponentsPluginMessageData): void {
   const pluginMessage: GeneratedComponentsPluginMessage = { event: 'generated-components', data }
+  console.log('sent', pluginMessage)
   figma.ui.postMessage(pluginMessage)
 }
 
diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 7c57006..5b60f5d 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -2,6 +2,7 @@
 import { codeToHtml } from 'shiki'
 import { computedAsync, useClipboard } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { useTheme } from '@/composables/useTheme'
 import { useNotification } from '@/composables/useNotification'
 import { useCode } from '@/stores/useCode'
@@ -26,13 +27,37 @@ function onCopy() {
   copy(code.value)
   notify('Copied to clipboard!')
 }
+
+const componentList = computedAsync(async () => {
+  const promises = Object.entries((components.value?.components as Record<string, string> || {})).map(async ([componentName, componentCode]) => {
+    return {
+      name: componentName,
+      code: componentCode,
+      html: await codeToHtml(componentCode, {
+        lang: 'vue-html',
+        theme: theme.value,
+      }),
+    }
+  })
+
+  return await Promise.all(promises)
+})
 </script>
 
 <template>
   <Wrapper headline="Generated Code" :loading="isLoading">
-    <div>{{ components }}</div>
-
-    <div class="w-full" v-html="html" />
+    <TabGroup class="w-full" as="div">
+      <TabList>
+        <Tab v-for="c in componentList" :key="c.name">
+          Component {{ c.name }}
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel v-for="c in componentList" :key="c.name">
+          <div class="w-full" v-html="c.html" />
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
 
     <template #action>
       <button @click="onCopy">

From 5aedd27504cacacd30e91c23bf5b77f7a03d6a2d Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 17:18:31 +0200
Subject: [PATCH 08/30] chore: remove old code ref variable

---
 packages/ui/src/components/code.vue | 23 +++++++++++++----------
 packages/ui/src/stores/useCode.ts   |  3 ---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 5b60f5d..91ce3d6 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -3,28 +3,31 @@ import { codeToHtml } from 'shiki'
 import { computedAsync, useClipboard } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+import { computed } from 'vue'
 import { useTheme } from '@/composables/useTheme'
 import { useNotification } from '@/composables/useNotification'
 import { useCode } from '@/stores/useCode'
 import Wrapper from '@/components/layout/wrapper.vue'
 
-const { code, isLoading, executionTime, components } = storeToRefs(useCode())
+const { isLoading, executionTime, components } = storeToRefs(useCode())
 
 const { theme } = useTheme()
 
-const html = computedAsync(
-  async () => codeToHtml(code.value, {
-    lang: 'vue-html',
-    theme: theme.value,
-  }),
-  '',
-)
+// Get the main component code
+const mainComponentCode = computed(() => {
+  const mainComponentName = components.value?.mainComponent
 
-const { copy } = useClipboard({ source: code, legacy: true })
+  if (mainComponentName)
+    return components.value?.components[mainComponentName] || ''
+
+  return ''
+})
+
+const { copy } = useClipboard({ source: mainComponentCode, legacy: true })
 const { notify } = useNotification()
 
 function onCopy() {
-  copy(code.value)
+  copy(mainComponentCode.value)
   notify('Copied to clipboard!')
 }
 
diff --git a/packages/ui/src/stores/useCode.ts b/packages/ui/src/stores/useCode.ts
index 3a34c1f..6aa292b 100644
--- a/packages/ui/src/stores/useCode.ts
+++ b/packages/ui/src/stores/useCode.ts
@@ -7,7 +7,6 @@ import { usePluginMessage } from './usePluginMessage'
 export const useCode = defineStore('code', () => {
   const components = ref<GeneratedComponentsPluginMessageData | null>(null)
 
-  const code = ref('')
   const selectedNodes = ref<SelectedNode[] | null>(null)
   const hasSelection = computed(() => selectedNodes.value !== null)
   const isLoading = ref(false)
@@ -23,7 +22,6 @@ export const useCode = defineStore('code', () => {
     onPluginMessage('generated-components', (_components) => {
       components.value = _components
       console.log('Received generated components', _components)
-      code.value = _components.components[_components.mainComponent]
     })
 
     onPluginMessage('unselected', () => {
@@ -45,7 +43,6 @@ export const useCode = defineStore('code', () => {
 
   return {
     listen,
-    code,
     selectedNodes,
     hasSelection,
     isLoading,

From 34ab0a5c19c2ad737bc43b0c0abfb6e7cd77da48 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 18:03:38 +0200
Subject: [PATCH 09/30] feat: render component instances in the render vue
 component

---
 packages/renderer/src/main.ts          | 26 +++++++++++++++++++++++---
 packages/ui/src/components/preview.vue | 14 ++++++++------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/renderer/src/main.ts b/packages/renderer/src/main.ts
index ff538e8..3f2c5ca 100644
--- a/packages/renderer/src/main.ts
+++ b/packages/renderer/src/main.ts
@@ -1,5 +1,8 @@
-import { type App, createApp } from 'vue'
+import type { App, Component } from 'vue'
+import { createApp } from 'vue'
 import type {
+  GeneratedComponentsPluginMessageData,
+
   RendererPluginMessage,
 } from '@onyx-gen/types'
 
@@ -9,12 +12,29 @@ import './unocss'
 let app: App | null = null
 
 // Listen for messages from the parent frame
-window.addEventListener('message', async (event) => {
+window.addEventListener('message', async (event: MessageEvent & { data: GeneratedComponentsPluginMessageData }) => {
   if (app !== null)
     app.unmount()
 
+  const data: GeneratedComponentsPluginMessageData = event.data
+
+  const mainComponentName = data.mainComponent
+  const mainComponentCode = data.components[mainComponentName]
+
+  // Remove the main component from the list of components and create a Vue component for each
+  const nonMainComponents: Record<string, Component> = Object.fromEntries(
+    Object.entries(data.components)
+      .filter(([name]) => name !== mainComponentName)
+      .map(([name, code]) => [name, { template: code }]),
+  )
+
   try {
-    app = createApp({ template: event.data.vue })
+    const vueComponent: Component = {
+      template: mainComponentCode,
+      components: nonMainComponents,
+    }
+
+    app = createApp(vueComponent)
   }
   catch (e) {
     console.error('[iFrame] Error creating Vue app', e)
diff --git a/packages/ui/src/components/preview.vue b/packages/ui/src/components/preview.vue
index 72dd53b..24332ba 100644
--- a/packages/ui/src/components/preview.vue
+++ b/packages/ui/src/components/preview.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, toRaw, watch } from 'vue'
 import html from 'virtual:preview-renderer'
 import { storeToRefs } from 'pinia'
+import type { GeneratedComponentsPluginMessageData } from '@onyx-gen/types'
 import { useCode } from '@/stores/useCode'
 import Wrapper from '@/components/layout/wrapper.vue'
 import { usePluginMessage } from '@/stores/usePluginMessage'
@@ -11,8 +12,8 @@ const iframeRef = ref<HTMLIFrameElement | null>(null)
 const blob = new Blob([html], { type: 'text/html' })
 const blobUrl = URL.createObjectURL(blob)
 
-const { code } = storeToRefs(useCode())
-watch(code, sendCode)
+const { components } = storeToRefs(useCode())
+watch(components, sendCode)
 
 function sendCode() {
   const iframe = iframeRef.value
@@ -20,10 +21,11 @@ function sendCode() {
   if (iframe) {
     const targetOrigin = '*'
 
+    if (components.value === null)
+      return
+
     // Message you want to send to the iframe
-    const message = {
-      vue: code.value,
-    }
+    const message: GeneratedComponentsPluginMessageData = toRaw(components.value)
 
     // Sending the message
     iframe.contentWindow?.postMessage(message, targetOrigin)

From 6934559cad6dda4be48fb07d84c63c66a887bef5 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 18:20:53 +0200
Subject: [PATCH 10/30] feat: style tab group

---
 packages/ui/src/components/code.vue           | 33 ++++++++++++++++---
 packages/ui/src/components/layout/wrapper.vue |  4 +++
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 91ce3d6..05ef545 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -48,16 +48,39 @@ const componentList = computedAsync(async () => {
 </script>
 
 <template>
-  <Wrapper headline="Generated Code" :loading="isLoading">
+  <Wrapper headline="Generated Code" :loading="isLoading" class="!p-0">
     <TabGroup class="w-full" as="div">
-      <TabList>
-        <Tab v-for="c in componentList" :key="c.name">
-          Component {{ c.name }}
+      <TabList
+        as="div"
+        class="
+          flex
+          items-center
+          color-$figma-color-text-secondary
+          border-b-1 border-l-1 border-color-$divider-color-code
+          divide-x divide-color-$divider-color-code
+        "
+      >
+        <Tab
+          v-for="c in componentList"
+          :key="c.name"
+          v-slot="{ selected }"
+        >
+          <button
+            class="
+              font-sans text-xs font-medium
+              px-4 py-2
+            "
+            :class="{
+              'bg-$figma-color-bg': selected,
+            }"
+          >
+            {{ c.name }}.vue
+          </button>
         </Tab>
       </TabList>
       <TabPanels>
         <TabPanel v-for="c in componentList" :key="c.name">
-          <div class="w-full" v-html="c.html" />
+          <div class="w-full px-3 py-2" v-html="c.html" />
         </TabPanel>
       </TabPanels>
     </TabGroup>
diff --git a/packages/ui/src/components/layout/wrapper.vue b/packages/ui/src/components/layout/wrapper.vue
index b3e6122..cd619b9 100644
--- a/packages/ui/src/components/layout/wrapper.vue
+++ b/packages/ui/src/components/layout/wrapper.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useAttrs } from 'vue'
 import LoadingSpinner from '@/components/loading-spinner.vue'
 
 withDefaults(defineProps<{
@@ -7,6 +8,8 @@ withDefaults(defineProps<{
 }>(), {
   loading: false,
 })
+
+const attrs = useAttrs()
 </script>
 
 <template>
@@ -31,6 +34,7 @@ withDefaults(defineProps<{
 
     <div class="code-copy max-h-82 overflow-scroll relative">
       <div
+        v-bind="attrs"
         class="px-3 py-2"
         :class="{
           'opacity-50': loading,

From d27fb7547a06471df1ecc4be9db30fef95c14dc4 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 18:27:36 +0200
Subject: [PATCH 11/30] fix: only show copy style on hovering of copy button

---
 packages/ui/src/components/code.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 05ef545..0cd7209 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -86,14 +86,14 @@ const componentList = computedAsync(async () => {
     </TabGroup>
 
     <template #action>
-      <button @click="onCopy">
+      <button id="copy" @click="onCopy">
         <i class="i-onyx-copy w-4 h-4" />
       </button>
     </template>
   </Wrapper>
 
   <div v-if="!isLoading" class="font-sans text-xs font-medium w-full text-right pt-0.5 color-$figma-color-text-secondary">
-    {{ executionTime }}ms
+    {{ executionTime }}ms!
   </div>
 </template>
 
@@ -105,7 +105,7 @@ code {
   font-feature-settings: "liga", "calt" !important;
 }
 
-.code-container:has(button:hover) {
+.code-container:has(#copy:hover) {
   .code-copy {
     background-color: var(--figma-color-bg-selected-tertiary);
     box-shadow: 0 0 0 1px var(--figma-color-border-selected) inset;

From 6e13d21a3e253314bb517b390390f152bbff46bc Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 18:29:49 +0200
Subject: [PATCH 12/30] fix: highlight the tab panel when hovering copy button

---
 packages/ui/src/components/code.vue           | 2 +-
 packages/ui/src/components/layout/wrapper.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 0cd7209..e22454e 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -80,7 +80,7 @@ const componentList = computedAsync(async () => {
       </TabList>
       <TabPanels>
         <TabPanel v-for="c in componentList" :key="c.name">
-          <div class="w-full px-3 py-2" v-html="c.html" />
+          <div class="w-full px-3 py-2 code-copy" v-html="c.html" />
         </TabPanel>
       </TabPanels>
     </TabGroup>
diff --git a/packages/ui/src/components/layout/wrapper.vue b/packages/ui/src/components/layout/wrapper.vue
index cd619b9..a552dad 100644
--- a/packages/ui/src/components/layout/wrapper.vue
+++ b/packages/ui/src/components/layout/wrapper.vue
@@ -32,7 +32,7 @@ const attrs = useAttrs()
       <slot name="action" />
     </div>
 
-    <div class="code-copy max-h-82 overflow-scroll relative">
+    <div class="max-h-82 overflow-scroll relative">
       <div
         v-bind="attrs"
         class="px-3 py-2"

From e82c6d0a11f8ac468923eda4b2ac5b48c3a44b12 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 18:36:06 +0200
Subject: [PATCH 13/30] fix: add right border to last tab

---
 packages/ui/src/components/code.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index e22454e..c17b818 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -64,11 +64,13 @@ const componentList = computedAsync(async () => {
           v-for="c in componentList"
           :key="c.name"
           v-slot="{ selected }"
+          as="template"
         >
           <button
             class="
               font-sans text-xs font-medium
               px-4 py-2
+              last:(!border-r-1 border-color-$divider-color-code)
             "
             :class="{
               'bg-$figma-color-bg': selected,

From 1b8a80721adb4ea8ef80eee4cbbc0af7e2d0be82 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 19:45:06 +0200
Subject: [PATCH 14/30] feat: allow arbitrary depths of instancing

Allows to generate components that have instances which again use instances
---
 packages/code/src/generate.ts       |  95 +++++++++++++------------
 packages/renderer/src/main.ts       |  52 ++++++++------
 packages/types/src/events.ts        |   8 +--
 packages/types/src/types.ts         |   7 ++
 packages/ui/src/components/code.vue | 103 ++++++++++++++++++++++------
 5 files changed, 175 insertions(+), 90 deletions(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index 841f5f6..d3e737a 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -1,3 +1,4 @@
+import type { ComponentTreeNode } from '@onyx-gen/types'
 import FigmaNodeParser from './parsers/figma-node.parser'
 import HTMLGenerator from './generators/html.generator'
 import { getInstanceNodes, getSelectedNodes } from './utils'
@@ -86,53 +87,27 @@ export default async function generate(config: Configuration): Promise<string |
         sendSelectedMessage([])
     }
 
-    interface ComponentInstanceInfo {
-      node: ComponentNode
-      instanceName: string
-    }
-
-    const instanceNodes = await Promise.all(
-      nodes
-        .flatMap(selectedNode => getInstanceNodes(selectedNode))
-        .filter(instanceNode => !config.ignoredComponentInstances.includes(instanceNode.name))
-        .map(async instanceNode => ({
-          node: await instanceNode.getMainComponentAsync(),
-          instanceName: instanceNode.name,
-        }))
-        .filter(async c => (await c).node !== null) as Promise<ComponentInstanceInfo>[],
+    const instanceNodes = nodes.flatMap(node => getInstanceNodes(node))
+    const mainComponentsOfInstanceNodes = await Promise.all(
+      instanceNodes
+        .map(instanceNode => instanceNode.getMainComponentAsync())
+        .filter((mainComponent): mainComponent is Promise<ComponentNode> => mainComponent !== null),
     )
-    console.log('Found instanceNodes', instanceNodes)
-
-    const generatedInstances: Record<string, string> = {}
 
-    const promises = instanceNodes.map(async (componentInstanceInfo) => {
-      console.log('Processing instanceNode....', componentInstanceInfo.instanceName)
+    const instances = await Promise.all(mainComponentsOfInstanceNodes.map(instanceNode => generateComponentTree(instanceNode, config)))
 
-      const parser = new FigmaNodeParser({ default: 'default' }, config)
-      const tree = await parser.parse(componentInstanceInfo.node)
-
-      if (tree) {
-        const generator = new HTMLGenerator([], {}, config)
-        generatedInstances[componentInstanceInfo.instanceName] = await generator.generate(tree)
-
-        console.log('Generated HTML for instanceNode', componentInstanceInfo.instanceName, generatedInstances[componentInstanceInfo.instanceName])
-      }
-      else {
-        console.error('It was not possible to generate HTML code for the selected node.')
-        figma.notify('Error during HTML generation')
-      }
-    })
-
-    await Promise.all(promises)
+    const componentTree: ComponentTreeNode = {
+      name: nodes[0].name,
+      figmaNode: nodes[0] as ComponentNode, // TODO MF: Should also work for other node types
+      code: html,
+      instances,
+    }
 
     // only send message if html is not empty
-    if (html) {
-      sendGeneratedComponentsMessage({
-        mainComponent: 'main',
-        components: { main: html, ...generatedInstances },
-      })
-    }
-    else { sendUnselectedMessage() }
+    if (html)
+      sendGeneratedComponentsMessage({ componentTree })
+
+    else sendUnselectedMessage()
   }
   catch (e) {
     figma.notify('Onyx: Unexpected Error')
@@ -145,3 +120,39 @@ export default async function generate(config: Configuration): Promise<string |
     sendExecutionTimeMessage(executionTime)
   }
 }
+
+/**
+ * Recursively generates a component tree for given Figma nodes.
+ * Each node's HTML code is generated using FigmaNodeParser and HTMLGenerator.
+ *
+ * @param node - The initial node to generate the tree from.
+ * @param config - Configuration object containing settings and options for node processing.
+ * @returns A promise that resolves to a ComponentTreeNode representing the node hierarchy with generated HTML.
+ */
+async function generateComponentTree(node: ComponentNode, config: Configuration): Promise<ComponentTreeNode> {
+  const parser = new FigmaNodeParser({ default: 'default' }, config)
+  const generator = new HTMLGenerator([], {}, config)
+
+  const tree = await parser.parse(node)
+  const html = tree ? await generator.generate(tree) : ''
+
+  const instances: ComponentTreeNode[] = []
+
+  const instanceNodes = getInstanceNodes(node)
+  for (const instanceNode of instanceNodes) {
+    if (!config.ignoredComponentInstances.includes(instanceNode.name)) {
+      const mainComponent = await instanceNode.getMainComponentAsync()
+      if (mainComponent) {
+        const instanceTree = await generateComponentTree(mainComponent, config)
+        instances.push(instanceTree)
+      }
+    }
+  }
+
+  return {
+    name: node.name,
+    code: html,
+    figmaNode: node,
+    instances,
+  }
+}
diff --git a/packages/renderer/src/main.ts b/packages/renderer/src/main.ts
index 3f2c5ca..2c84b83 100644
--- a/packages/renderer/src/main.ts
+++ b/packages/renderer/src/main.ts
@@ -1,6 +1,7 @@
-import type { App, Component } from 'vue'
-import { createApp } from 'vue'
+import type { App, ComponentOptions } from 'vue'
+import { createApp, defineComponent } from 'vue'
 import type {
+  ComponentTreeNode,
   GeneratedComponentsPluginMessageData,
 
   RendererPluginMessage,
@@ -13,37 +14,48 @@ let app: App | null = null
 
 // Listen for messages from the parent frame
 window.addEventListener('message', async (event: MessageEvent & { data: GeneratedComponentsPluginMessageData }) => {
+  console.log('[iFrame] Received message', event.data)
+
+  // Unmount the previous app
   if (app !== null)
     app.unmount()
 
   const data: GeneratedComponentsPluginMessageData = event.data
 
-  const mainComponentName = data.mainComponent
-  const mainComponentCode = data.components[mainComponentName]
-
-  // Remove the main component from the list of components and create a Vue component for each
-  const nonMainComponents: Record<string, Component> = Object.fromEntries(
-    Object.entries(data.components)
-      .filter(([name]) => name !== mainComponentName)
-      .map(([name, code]) => [name, { template: code }]),
-  )
+  // Construct Vue components recursively from the component tree
+  const rootComponentOptions = createVueComponent(data.componentTree)
 
+  // Create the Vue app and mount it to the root element
   try {
-    const vueComponent: Component = {
-      template: mainComponentCode,
-      components: nonMainComponents,
-    }
-
-    app = createApp(vueComponent)
+    app = createApp(rootComponentOptions)
+    app.mount('#app')
   }
   catch (e) {
     console.error('[iFrame] Error creating Vue app', e)
-    return
   }
-
-  app.mount('#app')
 })
 
+/**
+ * Recursively creates a Vue component from a component tree node.
+ *
+ * @param node - The current node of the component tree.
+ * @returns A Vue component options object representing the node and its children.
+ */
+function createVueComponent(node: ComponentTreeNode): ComponentOptions {
+  const childComponents: Record<string, ComponentOptions> = {}
+  node.instances.forEach((instance) => {
+    childComponents[instance.name] = createVueComponent(instance)
+  })
+
+  const options: ComponentOptions = {
+    name: node.name,
+    template: node.code,
+    components: childComponents,
+  }
+
+  return defineComponent(options as any) as any
+}
+
 function observeHeight() {
   const targetElement = document.getElementById('app')!
 
diff --git a/packages/types/src/events.ts b/packages/types/src/events.ts
index f2a77a5..767c65b 100644
--- a/packages/types/src/events.ts
+++ b/packages/types/src/events.ts
@@ -1,4 +1,4 @@
-import type { ComponentProps, IConfiguration, Mode, Unit, VariableNameTransformations } from './types'
+import type { ComponentProps, ComponentTreeNode, IConfiguration, Mode, Unit, VariableNameTransformations } from './types'
 
 export type PluginMessageEvent = MessageEvent<{ pluginMessage: PluginMessage }>
 
@@ -25,12 +25,8 @@ interface RendererPluginMessageData {
 
 export type GeneratedComponentsPluginMessage = BasePluginMessage<'generated-components', GeneratedComponentsPluginMessageData>
 
-type ComponentName = string
-type GeneratedComponent = string
-
 export interface GeneratedComponentsPluginMessageData {
-  mainComponent: string
-  components: Record<ComponentName, GeneratedComponent>
+  componentTree: ComponentTreeNode
 }
 
 export type ConfigurationPluginMessage = BasePluginMessage<'configuration', ConfigurationPluginMessageData>
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
index 643b58b..37f9e27 100644
--- a/packages/types/src/types.ts
+++ b/packages/types/src/types.ts
@@ -24,3 +24,10 @@ export interface IConfiguration {
   variableNameTransformations: VariableNameTransformations
   ignoredComponentInstances: string[]
 }
+
+export interface ComponentTreeNode {
+  name: string
+  code: string
+  figmaNode: ComponentNode
+  instances: ComponentTreeNode[]
+}
diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index c17b818..ec8d2d7 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -4,6 +4,7 @@ import { computedAsync, useClipboard } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { computed } from 'vue'
+import type { ComponentTreeNode } from '@onyx-gen/types'
 import { useTheme } from '@/composables/useTheme'
 import { useNotification } from '@/composables/useNotification'
 import { useCode } from '@/stores/useCode'
@@ -13,15 +14,8 @@ const { isLoading, executionTime, components } = storeToRefs(useCode())
 
 const { theme } = useTheme()
 
-// Get the main component code
-const mainComponentCode = computed(() => {
-  const mainComponentName = components.value?.mainComponent
-
-  if (mainComponentName)
-    return components.value?.components[mainComponentName] || ''
-
-  return ''
-})
+const componentTree = computed(() => components.value?.componentTree)
+const mainComponentCode = computed(() => componentTree.value?.code || '')
 
 const { copy } = useClipboard({ source: mainComponentCode, legacy: true })
 const { notify } = useNotification()
@@ -31,19 +25,84 @@ function onCopy() {
   notify('Copied to clipboard!')
 }
 
-const componentList = computedAsync(async () => {
-  const promises = Object.entries((components.value?.components as Record<string, string> || {})).map(async ([componentName, componentCode]) => {
-    return {
-      name: componentName,
-      code: componentCode,
-      html: await codeToHtml(componentCode, {
-        lang: 'vue-html',
-        theme: theme.value,
-      }),
-    }
+export type ComponentTreeNodeWithHTML = ComponentTreeNode & {
+  html: string // Ensure that html is always present in this type
+  instances: ComponentTreeNodeWithHTML[] // Make sure instances are of the same extended type
+}
+
+/**
+ * Traverses a tree of `ComponentTreeNode` and adds an `html` property to each node.
+ * The `html` property is generated from the `code` property of each node.
+ * @param _node The root node of the tree or subtree to traverse and modify.
+ * @returns The modified node with the `html` property added.
+ */
+async function addHtmlPropToTree(_node: ComponentTreeNode): Promise<ComponentTreeNodeWithHTML> {
+  const node = { ..._node, html: '' } as ComponentTreeNodeWithHTML
+
+  // Generate HTML from the code; this can be customized as needed.
+  node.html = await generateHtmlFromCode(node.code)
+
+  // Recursively apply this function to all child instances
+  const instances = []
+  for (const instance of node.instances)
+    instances.push(await addHtmlPropToTree(instance))
+  node.instances = instances
+
+  return node
+}
+
+/**
+ * Generates HTML from a given code string.
+ * @param code The code to generate HTML from.
+ * @returns The generated HTML.
+ */
+async function generateHtmlFromCode(code: string): Promise<string> {
+  return await codeToHtml(code, {
+    lang: 'vue-html',
+    theme: theme.value,
   })
+}
+
+interface FlattenedTreeNode {
+  name: string
+  code: string
+  html: string
+}
+
+/**
+ * Flattens a tree of `ComponentTreeNodeWithHTML` into an array of `FlattenedTreeNode`.
+ * Each node in the tree will be transformed into an object containing `name`, `code`, and `html`.
+ * @param node The root node of the tree or subtree to flatten.
+ * @param accumulator An array that accumulates the flattened results. It's used internally by the recursion.
+ * @returns An array of `FlattenedTreeNode` containing the flattened tree nodes.
+ */
+function flattenTree(node: ComponentTreeNodeWithHTML, accumulator: FlattenedTreeNode[] = []): FlattenedTreeNode[] {
+  // Create a simple object with the desired properties and add it to the accumulator
+  const flatNode: FlattenedTreeNode = {
+    name: node.name,
+    code: node.code,
+    html: node.html,
+  }
+  accumulator.push(flatNode)
+
+  // Recursively flatten each child node
+  node.instances.forEach(child => flattenTree(child, accumulator))
+
+  return accumulator
+}
+
+const componentTreeWithHTML = computedAsync(async () => {
+  if (!componentTree.value)
+    return
+
+  return await addHtmlPropToTree(componentTree.value)
+})
+
+const flattenedTree = computed(() => {
+  if (!componentTreeWithHTML.value)
+    return []
 
-  return await Promise.all(promises)
+  return flattenTree(componentTreeWithHTML.value)
 })
 </script>
 
@@ -61,7 +120,7 @@ const componentList = computedAsync(async () => {
         "
       >
         <Tab
-          v-for="c in componentList"
+          v-for="c in flattenedTree"
           :key="c.name"
           v-slot="{ selected }"
           as="template"
@@ -81,7 +140,7 @@ const componentList = computedAsync(async () => {
         </Tab>
       </TabList>
       <TabPanels>
-        <TabPanel v-for="c in componentList" :key="c.name">
+        <TabPanel v-for="c in flattenedTree" :key="c.name">
           <div class="w-full px-3 py-2 code-copy" v-html="c.html" />
         </TabPanel>
       </TabPanels>

From 8a08de0098f62679276706cd7fd897392b0ffc54 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 20:43:18 +0200
Subject: [PATCH 15/30] fix: only show unique components

---
 packages/code/src/generate.ts |  7 ++++---
 packages/code/src/utils.ts    | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index d3e737a..d904547 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -1,7 +1,7 @@
 import type { ComponentTreeNode } from '@onyx-gen/types'
 import FigmaNodeParser from './parsers/figma-node.parser'
 import HTMLGenerator from './generators/html.generator'
-import { getInstanceNodes, getSelectedNodes } from './utils'
+import { getSelectedNodes, getUniqueInstanceNodes } from './utils'
 import ComponentSetProcessor from './set/component-set-processor'
 import {
   sendExecutionTimeMessage,
@@ -87,7 +87,8 @@ export default async function generate(config: Configuration): Promise<string |
         sendSelectedMessage([])
     }
 
-    const instanceNodes = nodes.flatMap(node => getInstanceNodes(node))
+    const instanceNodes = (await Promise.all(nodes.map(node => getUniqueInstanceNodes(node)))).flat()
+
     const mainComponentsOfInstanceNodes = await Promise.all(
       instanceNodes
         .map(instanceNode => instanceNode.getMainComponentAsync())
@@ -138,7 +139,7 @@ async function generateComponentTree(node: ComponentNode, config: Configuration)
 
   const instances: ComponentTreeNode[] = []
 
-  const instanceNodes = getInstanceNodes(node)
+  const instanceNodes = await getUniqueInstanceNodes(node)
   for (const instanceNode of instanceNodes) {
     if (!config.ignoredComponentInstances.includes(instanceNode.name)) {
       const mainComponent = await instanceNode.getMainComponentAsync()
diff --git a/packages/code/src/utils.ts b/packages/code/src/utils.ts
index e71604f..943d126 100644
--- a/packages/code/src/utils.ts
+++ b/packages/code/src/utils.ts
@@ -57,6 +57,30 @@ export function getInstanceNodes(node: SceneNode): InstanceNode[] {
   else return []
 }
 
+/**
+ * Retrieves all unique instance nodes in the node tree.
+ * @param node
+ */
+export async function getUniqueInstanceNodes(node: SceneNode): Promise<InstanceNode[]> {
+  const instanceNodes = getInstanceNodes(node)
+
+  const mainComponentsInstanceNodePairs = (
+    await Promise.all(
+      instanceNodes
+        .map(async (node) => {
+          const mainComponent = await node.getMainComponentAsync()
+          return [node, mainComponent] as [InstanceNode, ComponentNode | null]
+        }),
+    )
+  ).filter((d): d is [InstanceNode, ComponentNode] => d[1] !== null)
+
+  const uniqueMainComponentIds = Array.from(new Set(mainComponentsInstanceNodePairs.map(([_, mainComponent]) => mainComponent.id)))
+  return uniqueMainComponentIds.map((id) => {
+    const foundPair = mainComponentsInstanceNodePairs.find(([_, mainComponent]) => mainComponent.id === id)
+    return foundPair![0]
+  })
+}
+
 /**
  * Zips two arrays together, creating pairs of corresponding elements.
  *

From d52f9b18a3f4d1538b6d4ddcc641076f6c560073 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 20:51:33 +0200
Subject: [PATCH 16/30] feat: use component set name if possible for file name

---
 packages/code/src/generate.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index d904547..3bcc9bb 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -97,8 +97,20 @@ export default async function generate(config: Configuration): Promise<string |
 
     const instances = await Promise.all(mainComponentsOfInstanceNodes.map(instanceNode => generateComponentTree(instanceNode, config)))
 
+    console.log('SELECTED NODE', nodes[0])
+
+    const mainNode = nodes[0]
+    let mainNodeName = mainNode.name
+
+    if (mainNode.type === 'COMPONENT') {
+      const hasComponentSetParent = mainNode.parent?.type === 'COMPONENT_SET'
+
+      if (hasComponentSetParent)
+        mainNodeName = mainNode.parent.name
+    }
+
     const componentTree: ComponentTreeNode = {
-      name: nodes[0].name,
+      name: mainNodeName,
       figmaNode: nodes[0] as ComponentNode, // TODO MF: Should also work for other node types
       code: html,
       instances,

From eb77adf6c0578deec295c0f166f4d931fb4919d1 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 21:16:02 +0200
Subject: [PATCH 17/30] fix: preview container rendering width

---
 packages/renderer/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/renderer/index.html b/packages/renderer/index.html
index afa0467..6fa6b57 100644
--- a/packages/renderer/index.html
+++ b/packages/renderer/index.html
@@ -5,8 +5,8 @@
   </head>
   
   <body class="h-full">
-    <div class="w-full h-full flex justify-center items-center">
-      <div id="app"></div>
+    <div class="min-w-full h-full flex justify-center items-center">
+      <div id="app" class="min-w-full block"></div>
     </div>
     
     <!-- Compile & Mount Vue App -->

From 4d62ba7ca3fd0c134858e26381bcd29c2c3d44ba Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 21:27:17 +0200
Subject: [PATCH 18/30] Revert "fix: preview container rendering width"

This reverts commit eb77adf6c0578deec295c0f166f4d931fb4919d1.
---
 packages/renderer/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/renderer/index.html b/packages/renderer/index.html
index 6fa6b57..afa0467 100644
--- a/packages/renderer/index.html
+++ b/packages/renderer/index.html
@@ -5,8 +5,8 @@
   </head>
   
   <body class="h-full">
-    <div class="min-w-full h-full flex justify-center items-center">
-      <div id="app" class="min-w-full block"></div>
+    <div class="w-full h-full flex justify-center items-center">
+      <div id="app"></div>
     </div>
     
     <!-- Compile & Mount Vue App -->

From 46b5f446393b946a70d691ccf11b38a62a5d3067 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 21:30:40 +0200
Subject: [PATCH 19/30] fix: typo

---
 packages/ui/src/components/code.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index ec8d2d7..9b310ea 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -154,7 +154,7 @@ const flattenedTree = computed(() => {
   </Wrapper>
 
   <div v-if="!isLoading" class="font-sans text-xs font-medium w-full text-right pt-0.5 color-$figma-color-text-secondary">
-    {{ executionTime }}ms!
+    {{ executionTime }}ms
   </div>
 </template>
 

From b301bb6852c0302313bb64c0d85c32a8a4b16a91 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 21:52:15 +0200
Subject: [PATCH 20/30] fix: set component file name correctly

---
 packages/code/src/generate.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
index 3bcc9bb..63bfc3a 100644
--- a/packages/code/src/generate.ts
+++ b/packages/code/src/generate.ts
@@ -116,6 +116,8 @@ export default async function generate(config: Configuration): Promise<string |
       instances,
     }
 
+    console.log('### COMPONENT TREE ###', componentTree)
+
     // only send message if html is not empty
     if (html)
       sendGeneratedComponentsMessage({ componentTree })
@@ -162,8 +164,17 @@ async function generateComponentTree(node: ComponentNode, config: Configuration)
     }
   }
 
+  let nodeName = node.name
+
+  if (node.type === 'COMPONENT') {
+    const hasComponentSetParent = node.parent?.type === 'COMPONENT_SET'
+
+    if (hasComponentSetParent)
+      nodeName = node.parent.name
+  }
+
   return {
-    name: node.name,
+    name: nodeName,
     code: html,
     figmaNode: node,
     instances,

From 99ed41f9e34cf4d1abd27765045fcc109701e01b Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 21:56:06 +0200
Subject: [PATCH 21/30] fix: flex shrink of tabs

---
 packages/ui/src/components/code.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 9b310ea..8b3ac47 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -113,7 +113,6 @@ const flattenedTree = computed(() => {
         as="div"
         class="
           flex
-          items-center
           color-$figma-color-text-secondary
           border-b-1 border-l-1 border-color-$divider-color-code
           divide-x divide-color-$divider-color-code
@@ -127,6 +126,7 @@ const flattenedTree = computed(() => {
         >
           <button
             class="
+              shrink-0
               font-sans text-xs font-medium
               px-4 py-2
               last:(!border-r-1 border-color-$divider-color-code)

From 5242e75291c4ed8fb51f606ee4609a6c317d6357 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 21:59:27 +0200
Subject: [PATCH 22/30] fix: divider color of tabs

---
 packages/ui/src/components/code.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 8b3ac47..2c93575 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -115,7 +115,7 @@ const flattenedTree = computed(() => {
           flex
           color-$figma-color-text-secondary
           border-b-1 border-l-1 border-color-$divider-color-code
-          divide-x divide-color-$divider-color-code
+          divide-x divide-$divider-color-code
         "
       >
         <Tab

From 75ff4273b0d1ab0f66e1a745f420b5afc39d578d Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:00:22 +0200
Subject: [PATCH 23/30] fix: do not show outline of tabs on focus

---
 packages/ui/src/components/code.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index 2c93575..c700fa7 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -130,6 +130,7 @@ const flattenedTree = computed(() => {
               font-sans text-xs font-medium
               px-4 py-2
               last:(!border-r-1 border-color-$divider-color-code)
+              focus:outline-none
             "
             :class="{
               'bg-$figma-color-bg': selected,

From a45e319e63b7899db814edc1c928b84a4b6492bb Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:02:42 +0200
Subject: [PATCH 24/30] fix: scroll behavior of wrapper

---
 packages/ui/src/components/code.vue           | 3 ++-
 packages/ui/src/components/layout/wrapper.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
index c700fa7..5580823 100644
--- a/packages/ui/src/components/code.vue
+++ b/packages/ui/src/components/code.vue
@@ -116,6 +116,7 @@ const flattenedTree = computed(() => {
           color-$figma-color-text-secondary
           border-b-1 border-l-1 border-color-$divider-color-code
           divide-x divide-$divider-color-code
+          overflow-x-scroll
         "
       >
         <Tab
@@ -142,7 +143,7 @@ const flattenedTree = computed(() => {
       </TabList>
       <TabPanels>
         <TabPanel v-for="c in flattenedTree" :key="c.name">
-          <div class="w-full px-3 py-2 code-copy" v-html="c.html" />
+          <div class="w-full px-3 py-2 code-copy overflow-scroll" v-html="c.html" />
         </TabPanel>
       </TabPanels>
     </TabGroup>
diff --git a/packages/ui/src/components/layout/wrapper.vue b/packages/ui/src/components/layout/wrapper.vue
index a552dad..9389802 100644
--- a/packages/ui/src/components/layout/wrapper.vue
+++ b/packages/ui/src/components/layout/wrapper.vue
@@ -32,7 +32,7 @@ const attrs = useAttrs()
       <slot name="action" />
     </div>
 
-    <div class="max-h-82 overflow-scroll relative">
+    <div class="max-h-82 relative">
       <div
         v-bind="attrs"
         class="px-3 py-2"

From 1f7f0b24aaa964273dcda8c5bb675cce19a0386e Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:22:17 +0200
Subject: [PATCH 25/30] chore: update icons

---
 packages/icons/CHANGELOG.md |  6 ++++++
 packages/icons/package.json |  2 +-
 packages/ui/package.json    |  2 +-
 pnpm-lock.yaml              | 10 +++++-----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 6234de8..fb3aa40 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @onyx-gen/icons
 
+## 0.0.2
+
+### Patch Changes
+
+- Add eye icons
+
 ## 0.0.1
 
 ### Patch Changes
diff --git a/packages/icons/package.json b/packages/icons/package.json
index f438eb7..d0dfee6 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@onyx-gen/icons",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 181aa72..d32b010 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.91.0",
-    "@onyx-gen/icons": "0.0.1",
+    "@onyx-gen/icons": "0.0.2",
     "@onyx-gen/tsconfig": "workspace:^",
     "@onyx-gen/types": "workspace:^",
     "@unocss/transformer-variant-group": "^0.59.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fae72dc..2ca529f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -218,8 +218,8 @@ importers:
         specifier: ^1.91.0
         version: 1.91.0
       '@onyx-gen/icons':
-        specifier: 0.0.1
-        version: 0.0.1
+        specifier: 0.0.2
+        version: 0.0.2
       '@onyx-gen/tsconfig':
         specifier: workspace:^
         version: link:../tsconfig
@@ -1380,8 +1380,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@onyx-gen/icons@0.0.1':
-    resolution: {integrity: sha512-DREk3AzGrQUmCMBMVuhmLP3EnwvmX/LidEnVjHXQsKq6eN6VwFR4M3RThnPnECQ687WcyC191e6KzJZTsmKLCw==}
+  '@onyx-gen/icons@0.0.2':
+    resolution: {integrity: sha512-usHNkLIqZgM4UdAbee/RvFpUfjEaW8bMchIpu9mHzZLY+SCqzU8sRz6741tcUftl8E+jdgxaTkfm7u06n4Y34g==}
 
   '@polka/url@1.0.0-next.24':
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
@@ -5538,7 +5538,7 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.16.0
 
-  '@onyx-gen/icons@0.0.1': {}
+  '@onyx-gen/icons@0.0.2': {}
 
   '@polka/url@1.0.0-next.24': {}
 

From 7b8f28648d56bb4c53001b845e0b57d3ee947840 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:22:26 +0200
Subject: [PATCH 26/30] feat: make preview section closable

---
 packages/ui/src/components/content.vue |  4 +--
 packages/ui/src/components/preview.vue | 41 +++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/content.vue b/packages/ui/src/components/content.vue
index 519cf29..5a9c699 100644
--- a/packages/ui/src/components/content.vue
+++ b/packages/ui/src/components/content.vue
@@ -20,14 +20,14 @@ const { selectedNodes, hasSelection } = storeToRefs(useCode())
       </Layout>
     </div>
 
-    <div v-if="hasSelection" class="border-b border-color-$figma-color-border mb-4">
+    <div v-if="hasSelection" class="border-b border-color-$figma-color-border pb-4 mb-4">
       <Layout>
         <Preview />
       </Layout>
     </div>
 
     <div class="border-b border-color-$figma-color-border mb-4">
-      <Layout class="mb-4">
+      <Layout>
         <Configuration />
       </Layout>
     </div>
diff --git a/packages/ui/src/components/preview.vue b/packages/ui/src/components/preview.vue
index 24332ba..ed4843d 100644
--- a/packages/ui/src/components/preview.vue
+++ b/packages/ui/src/components/preview.vue
@@ -3,6 +3,11 @@ import { onMounted, ref, toRaw, watch } from 'vue'
 import html from 'virtual:preview-renderer'
 import { storeToRefs } from 'pinia'
 import type { GeneratedComponentsPluginMessageData } from '@onyx-gen/types'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/vue'
 import { useCode } from '@/stores/useCode'
 import Wrapper from '@/components/layout/wrapper.vue'
 import { usePluginMessage } from '@/stores/usePluginMessage'
@@ -52,11 +57,33 @@ onMounted(() => {
 </script>
 
 <template>
-  <Wrapper headline="Preview" class="mb-4">
-    <iframe
-      ref="iframeRef"
-      :src="blobUrl"
-      class="w-full min-h-24 bg-$figma-color-bg-secondary rounded-sm"
-    />
-  </Wrapper>
+  <div>
+    <Disclosure v-slot="{ open }" as="div" class="space-y-4">
+      <div class="flex justify-between">
+        <div class="font-sans text-xs font-semibold color-$figma-color-text">
+          Preview
+        </div>
+
+        <DisclosureButton>
+          <i
+            class="w-4 h-4"
+            :class="{
+              'i-onyx-eye-slash': open,
+              'i-onyx-eye': !open,
+            }"
+          />
+        </DisclosureButton>
+      </div>
+
+      <DisclosurePanel>
+        <Wrapper headline="Preview">
+          <iframe
+            ref="iframeRef"
+            :src="blobUrl"
+            class="w-full min-h-24 bg-$figma-color-bg-secondary rounded-sm"
+          />
+        </Wrapper>
+      </DisclosurePanel>
+    </Disclosure>
+  </div>
 </template>

From 0d5576ca0634188140de3806b1b4638ec852a3e6 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:24:29 +0200
Subject: [PATCH 27/30] chore: extract disclosure component

---
 packages/ui/src/components/disclosure.vue | 39 ++++++++++++++++++++
 packages/ui/src/components/preview.vue    | 44 ++++++-----------------
 2 files changed, 49 insertions(+), 34 deletions(-)
 create mode 100644 packages/ui/src/components/disclosure.vue

diff --git a/packages/ui/src/components/disclosure.vue b/packages/ui/src/components/disclosure.vue
new file mode 100644
index 0000000..54c94eb
--- /dev/null
+++ b/packages/ui/src/components/disclosure.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/vue'
+
+defineProps<{
+  headline: string
+}>()
+</script>
+
+<template>
+  <Disclosure v-slot="{ open }" as="div" class="space-y-4">
+    <div class="flex justify-between">
+      <div class="font-sans text-xs font-semibold color-$figma-color-text">
+        {{ headline }}
+      </div>
+
+      <DisclosureButton>
+        <i
+          class="w-4 h-4"
+          :class="{
+            'i-onyx-eye-slash': open,
+            'i-onyx-eye': !open,
+          }"
+        />
+      </DisclosureButton>
+    </div>
+
+    <DisclosurePanel>
+      <slot />
+    </DisclosurePanel>
+  </Disclosure>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/packages/ui/src/components/preview.vue b/packages/ui/src/components/preview.vue
index ed4843d..6ce8cf4 100644
--- a/packages/ui/src/components/preview.vue
+++ b/packages/ui/src/components/preview.vue
@@ -3,14 +3,10 @@ import { onMounted, ref, toRaw, watch } from 'vue'
 import html from 'virtual:preview-renderer'
 import { storeToRefs } from 'pinia'
 import type { GeneratedComponentsPluginMessageData } from '@onyx-gen/types'
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@headlessui/vue'
 import { useCode } from '@/stores/useCode'
 import Wrapper from '@/components/layout/wrapper.vue'
 import { usePluginMessage } from '@/stores/usePluginMessage'
+import Disclosure from '@/components/disclosure.vue'
 
 const iframeRef = ref<HTMLIFrameElement | null>(null)
 
@@ -57,33 +53,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
-    <Disclosure v-slot="{ open }" as="div" class="space-y-4">
-      <div class="flex justify-between">
-        <div class="font-sans text-xs font-semibold color-$figma-color-text">
-          Preview
-        </div>
-
-        <DisclosureButton>
-          <i
-            class="w-4 h-4"
-            :class="{
-              'i-onyx-eye-slash': open,
-              'i-onyx-eye': !open,
-            }"
-          />
-        </DisclosureButton>
-      </div>
-
-      <DisclosurePanel>
-        <Wrapper headline="Preview">
-          <iframe
-            ref="iframeRef"
-            :src="blobUrl"
-            class="w-full min-h-24 bg-$figma-color-bg-secondary rounded-sm"
-          />
-        </Wrapper>
-      </DisclosurePanel>
-    </Disclosure>
-  </div>
+  <Disclosure headline="Preview">
+    <Wrapper headline="Preview">
+      <iframe
+        ref="iframeRef"
+        :src="blobUrl"
+        class="w-full min-h-24 bg-$figma-color-bg-secondary rounded-sm"
+      />
+    </Wrapper>
+  </Disclosure>
 </template>

From b0d591c1cb549f0358277235bbd6fc2b716f4f33 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:31:48 +0200
Subject: [PATCH 28/30] feat: make all other sections closable

---
 packages/ui/src/components/configuration.vue | 119 +++++++--------
 packages/ui/src/components/content.vue       |   9 +-
 packages/ui/src/components/selection.vue     | 147 +++++++++----------
 3 files changed, 140 insertions(+), 135 deletions(-)

diff --git a/packages/ui/src/components/configuration.vue b/packages/ui/src/components/configuration.vue
index 4ef6bbc..10f32c4 100644
--- a/packages/ui/src/components/configuration.vue
+++ b/packages/ui/src/components/configuration.vue
@@ -5,6 +5,7 @@ import Switch from './inputs/switch.vue'
 import type { SelectOption } from './inputs/select.vue'
 import Select from './inputs/select.vue'
 import { useConfiguration } from '@/stores/useConfiguration'
+import Disclosure from '@/components/disclosure.vue'
 
 const { configuration } = storeToRefs(useConfiguration())
 
@@ -42,63 +43,65 @@ const options: SelectOption[] = [
 </script>
 
 <template>
-  <div class="font-sans text-xs font-semibold color-$figma-color-text flex gap-4 overflow-x-scroll w-full">
-    <div>
-      <h2>
-        Mode
-      </h2>
-
-      <Select v-model="configuration.mode" :options="options" />
-    </div>
-
-    <div>
-      <h2>
-        Nearest Inference
-      </h2>
-
-      <Switch v-model="configuration.nearestInference" class="mt-2" />
-    </div>
-
-    <div>
-      <h2>
-        Variant Group
-      </h2>
-
-      <Switch v-model="configuration.variantGroup" class="mt-2" />
-    </div>
-
-    <div>
-      <h2>
-        Unit (px/rem)
-      </h2>
-
-      <Switch v-model="isRem" class="mt-2" />
-    </div>
-
-    <div>
-      <h2>
-        Lowercase Variable Names
-      </h2>
-
-      <Switch v-model="shouldLowercaseVariableNames" class="mt-2" />
-    </div>
-
-    <div>
-      <h2>Old/New Builder</h2>
-
-      <Switch v-model="configuration.newBuilder" class="mt-2" />
-    </div>
-
-    <div>
-      <h2>
-        Ignored Component Instances
-      </h2>
-
-      <input
-        v-model="ignoredComponentInstancesModel"
-        class="w-32 mt-2 p-2 border border-$figma-color-border rounded"
-        placeholder="Comma separated list of component instance names"
-      >
+  <Disclosure headline="Configuration">
+    <div class="font-sans text-xs font-semibold color-$figma-color-text flex gap-4 overflow-x-scroll w-full">
+      <div>
+        <h2>
+          Mode
+        </h2>
+
+        <Select v-model="configuration.mode" :options="options" />
+      </div>
+
+      <div>
+        <h2>
+          Nearest Inference
+        </h2>
+
+        <Switch v-model="configuration.nearestInference" class="mt-2" />
+      </div>
+
+      <div>
+        <h2>
+          Variant Group
+        </h2>
+
+        <Switch v-model="configuration.variantGroup" class="mt-2" />
+      </div>
+
+      <div>
+        <h2>
+          Unit (px/rem)
+        </h2>
+
+        <Switch v-model="isRem" class="mt-2" />
+      </div>
+
+      <div>
+        <h2>
+          Lowercase Variable Names
+        </h2>
+
+        <Switch v-model="shouldLowercaseVariableNames" class="mt-2" />
+      </div>
+
+      <div>
+        <h2>Old/New Builder</h2>
+
+        <Switch v-model="configuration.newBuilder" class="mt-2" />
+      </div>
+
+      <div>
+        <h2>
+          Ignored Component Instances
+        </h2>
+
+        <input
+          v-model="ignoredComponentInstancesModel"
+          class="w-32 mt-2 p-2 border border-$figma-color-border rounded"
+          placeholder="Comma separated list of component instance names"
+        >
+      </div>
     </div>
-  </div>
+  </Disclosure>
 </template>
diff --git a/packages/ui/src/components/content.vue b/packages/ui/src/components/content.vue
index 5a9c699..df18bac 100644
--- a/packages/ui/src/components/content.vue
+++ b/packages/ui/src/components/content.vue
@@ -26,18 +26,21 @@ const { selectedNodes, hasSelection } = storeToRefs(useCode())
       </Layout>
     </div>
 
-    <div class="border-b border-color-$figma-color-border mb-4">
+    <div class="border-b border-color-$figma-color-border mb-4 pb-4">
       <Layout>
         <Configuration />
       </Layout>
     </div>
 
-    <div v-if="hasSelection" class="divide-y divide-$figma-color-border">
+    <div v-if="hasSelection" class="divide-y divide-$figma-color-border border-b border-color-$figma-color-border mb-4 pb-4">
       <Layout>
         <Code />
       </Layout>
 
-      <Layout v-if="hasSelection && selectedNodes?.length" class="mt-4">
+      <Layout
+        v-if="hasSelection && selectedNodes?.length"
+        class="mt-4 pt-4"
+      >
         <SelectedNodes :nodes="selectedNodes" />
       </Layout>
     </div>
diff --git a/packages/ui/src/components/selection.vue b/packages/ui/src/components/selection.vue
index 4b5efab..c148da1 100644
--- a/packages/ui/src/components/selection.vue
+++ b/packages/ui/src/components/selection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ComponentProps, SelectedNode } from '@onyx-gen/types'
 import { computed, toRefs } from 'vue'
+import Disclosure from '@/components/disclosure.vue'
 
 interface Props {
   nodes: SelectedNode[]
@@ -57,85 +58,83 @@ function getPermutationNode(permutationKey: string, permutationValue: string, st
 </script>
 
 <template>
-  <div class="pt-4 space-y-4">
-    <div class="font-sans text-xs font-semibold color-$figma-color-text">
-      Selected Nodes
-    </div>
-
-    <table class="border-separate border-spacing-2">
-      <thead>
-        <tr>
-          <th class="opacity-0" />
-          <th
-            v-for="state in states"
-            :key="state"
-            class="p-2 rounded-sm bg-$figma-color-bg-secondary color-$figma-color-text-secondary font-sans text-xs font-medium"
-          >
-            {{ state }}
-          </th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <template
-          v-for="permutationKey in permutationKeys"
-          :key="permutationKey"
-        >
-          <tr
-            v-for="(permutationValue, idx) in permutationMapping[permutationKey]"
-            :key="permutationValue"
-          >
+  <Disclosure headline="Selection">
+    <div class="space-y-4">
+      <table class="border-separate border-spacing-2">
+        <thead>
+          <tr>
+            <th class="opacity-0" />
             <th
-              v-if="idx === 0"
+              v-for="state in states"
+              :key="state"
               class="p-2 rounded-sm bg-$figma-color-bg-secondary color-$figma-color-text-secondary font-sans text-xs font-medium"
-              :rowspan="permutationMapping[permutationKey].size"
             >
-              {{ permutationKey }}
+              {{ state }}
             </th>
-            <td
-              v-for="state in states"
-              :key="state"
-              class="opacity-0 p-2 rounded-sm bg-$figma-color-bg-secondary color-$figma-color-text-secondary font-sans text-xs font-medium space-y-1"
-              :class="{
-                'opacity-100': !!getPermutationNode(permutationKey, permutationValue, state),
-              }"
+          </tr>
+        </thead>
+
+        <tbody>
+          <template
+            v-for="permutationKey in permutationKeys"
+            :key="permutationKey"
+          >
+            <tr
+              v-for="(permutationValue, idx) in permutationMapping[permutationKey]"
+              :key="permutationValue"
             >
-              <div class="flex gap-1 items-center color-$figma-color-text-component mt-0.5">
-                <svg
-                  class="fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="12"
-                  height="12"
-                  viewBox="0 0 12 12"
-                >
-                  <path
-                    fill-opacity="1"
-                    fill-rule="nonzero"
-                    stroke="none"
-                    d="M1.207 6 6 1.207 10.793 6 6 10.793 1.207 6z"
-                  />
-                </svg>
+              <th
+                v-if="idx === 0"
+                class="p-2 rounded-sm bg-$figma-color-bg-secondary color-$figma-color-text-secondary font-sans text-xs font-medium"
+                :rowspan="permutationMapping[permutationKey].size"
+              >
+                {{ permutationKey }}
+              </th>
+              <td
+                v-for="state in states"
+                :key="state"
+                class="opacity-0 p-2 rounded-sm bg-$figma-color-bg-secondary color-$figma-color-text-secondary font-sans text-xs font-medium space-y-1"
+                :class="{
+                  'opacity-100': !!getPermutationNode(permutationKey, permutationValue, state),
+                }"
+              >
+                <div class="flex gap-1 items-center color-$figma-color-text-component mt-0.5">
+                  <svg
+                    class="fill-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                  >
+                    <path
+                      fill-opacity="1"
+                      fill-rule="nonzero"
+                      stroke="none"
+                      d="M1.207 6 6 1.207 10.793 6 6 10.793 1.207 6z"
+                    />
+                  </svg>
 
-                <span class="font-normal">Variant</span>
-              </div>
+                  <span class="font-normal">Variant</span>
+                </div>
 
-              <table class="border-separate border-spacing-x-1 text-left font-sans text-xs font-medium -mx-1">
-                <tr
-                  v-for="(value, key) in getPermutationNode(permutationKey, permutationValue, state)?.props"
-                  :key="key"
-                >
-                  <th class="color-$figma-color-text-secondary">
-                    {{ key }}
-                  </th>
-                  <td class="color-$figma-color-text">
-                    {{ value }}
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
+                <table class="border-separate border-spacing-x-1 text-left font-sans text-xs font-medium -mx-1">
+                  <tr
+                    v-for="(value, key) in getPermutationNode(permutationKey, permutationValue, state)?.props"
+                    :key="key"
+                  >
+                    <th class="color-$figma-color-text-secondary">
+                      {{ key }}
+                    </th>
+                    <td class="color-$figma-color-text">
+                      {{ value }}
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </Disclosure>
 </template>

From 37a09b3029165b51af75d38fbb962921332b3dd5 Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:36:20 +0200
Subject: [PATCH 29/30] chore: add logo to icon assets library

---
 packages/icons/CHANGELOG.md |  6 ++++++
 packages/icons/package.json |  2 +-
 packages/ui/package.json    |  2 +-
 pnpm-lock.yaml              | 10 +++++-----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index fb3aa40..d1e5502 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @onyx-gen/icons
 
+## 0.0.3
+
+### Patch Changes
+
+- Add logo
+
 ## 0.0.2
 
 ### Patch Changes
diff --git a/packages/icons/package.json b/packages/icons/package.json
index d0dfee6..b76de26 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@onyx-gen/icons",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d32b010..30c4ca3 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.91.0",
-    "@onyx-gen/icons": "0.0.2",
+    "@onyx-gen/icons": "0.0.3",
     "@onyx-gen/tsconfig": "workspace:^",
     "@onyx-gen/types": "workspace:^",
     "@unocss/transformer-variant-group": "^0.59.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ca529f..9613ef7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -218,8 +218,8 @@ importers:
         specifier: ^1.91.0
         version: 1.91.0
       '@onyx-gen/icons':
-        specifier: 0.0.2
-        version: 0.0.2
+        specifier: 0.0.3
+        version: 0.0.3
       '@onyx-gen/tsconfig':
         specifier: workspace:^
         version: link:../tsconfig
@@ -1380,8 +1380,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@onyx-gen/icons@0.0.2':
-    resolution: {integrity: sha512-usHNkLIqZgM4UdAbee/RvFpUfjEaW8bMchIpu9mHzZLY+SCqzU8sRz6741tcUftl8E+jdgxaTkfm7u06n4Y34g==}
+  '@onyx-gen/icons@0.0.3':
+    resolution: {integrity: sha512-IjCpVU39S89NdKB6MJ/OPr2WghTZSwqVFcheZRDQJ3W89PIDe0GrHSoOmF3xO66iIhIuEHjGEfeh3QHF5NLQ2Q==}
 
   '@polka/url@1.0.0-next.24':
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
@@ -5538,7 +5538,7 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.16.0
 
-  '@onyx-gen/icons@0.0.2': {}
+  '@onyx-gen/icons@0.0.3': {}
 
   '@polka/url@1.0.0-next.24': {}
 

From 2153ea6e41785d31c34f3e5faabfa6b8e1daca7c Mon Sep 17 00:00:00 2001
From: Miguel Franken <miguelfranken90@gmail.com>
Date: Tue, 23 Apr 2024 22:39:46 +0200
Subject: [PATCH 30/30] feat: add onyx logo

---
 packages/ui/src/components/content.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/content.vue b/packages/ui/src/components/content.vue
index df18bac..65e1fd5 100644
--- a/packages/ui/src/components/content.vue
+++ b/packages/ui/src/components/content.vue
@@ -13,7 +13,8 @@ const { selectedNodes, hasSelection } = storeToRefs(useCode())
 <template>
   <div>
     <div class="border-b border-color-$figma-color-border mb-4">
-      <Layout>
+      <Layout class="flex gap-2">
+        <i class="i-onyx-logo w-8 h-8" />
         <h1 class="text-2xl font-bold mb-4">
           Onyx
         </h1>