From cfa0576f5d12c462272589cde77e644d18b3b3d9 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:12:35 +0200
Subject: [PATCH 01/13] docs: update README to clarify library usage and
 framework compatibility

---
 README.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/README.md b/README.md
index 208808d..775d1cf 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,22 @@
 
 A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size.
 
+> This library is WIP (Work-In-Progress)
+
+## Is This Library Right For You?
+
+This library is framework agnostic at the component level, but requires Vue.js as a dependency to function. Consider this library if:
+
+- Your application doesn't have a framework yet and you're looking for a solid foundation to build on
+- Your application is already built with Vue.js and you need consistent, accessible components
+- You want to use the same components across multiple projects with different technologies
+
+Note that if your main application uses React, Angular, or another non-Vue framework, you might want to consider a framework-specific component library instead for better integration:
+
+- For **React** applications: [shadcn/ui](https://ui.shadcn.com/) offers beautifully designed components that you can copy and paste into your apps
+- For **Angular** applications: [Angular Material](https://material.angular.io/) provides a comprehensive suite of UI components following Material Design principles
+
+
 ## Features
 
 - 🧩 **Web Components**: Use anywhere, framework-agnostic

From 19b3390c58c1be6d3b6dbf5fb76046835fbd6ab4 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:12:48 +0200
Subject: [PATCH 02/13] docs: update README to indicate the library is a
 Work-In-Progress (WIP)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 775d1cf..76f14a5 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Vue Web Component Library
+# Vue Web Component Library (WIP)
 
 A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size.
 

From 4a964d3ed034391bb314e2d89dbc6c4dffe932a6 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:20:38 +0200
Subject: [PATCH 03/13] docs: update component details for clarity and
 accessibility

---
 apps/documentation/index.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/documentation/index.md b/apps/documentation/index.md
index aca4404..b78739c 100644
--- a/apps/documentation/index.md
+++ b/apps/documentation/index.md
@@ -13,11 +13,13 @@ hero:
 features:
   - title: Button component
     link: /docs/components/button
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: A versatile button component with support for different styles, sizes, and states to enhance user interactions.
+
   - title: Input component
     link: /docs/components/input
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: A customizable input field component designed for accessibility and seamless data entry.
+
   - title: Icon component
     link: /docs/components/icon
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: A library of scalable and accessible icons to complement your design system.
 ---

From 14ea73b24187bfbbacfa80b993ea6a1fb24ed1d8 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:46:00 +0200
Subject: [PATCH 04/13] feat(docs): add ComponentExample for interactive
 component demos

---
 apps/documentation/.vitepress/theme/index.js  |   4 +
 apps/documentation/.vitepress/theme/style.css |   2 +-
 .../components/ComponentExample.vue           | 226 ++++++++++++++++++
 apps/documentation/docs/components/button.md  |   7 +
 apps/documentation/docs/components/icon.md    |   7 +
 apps/documentation/docs/components/index.md   |   2 +
 apps/documentation/docs/components/input.md   |   7 +
 apps/documentation/index.md                   |  19 ++
 apps/documentation/package.json               |   1 +
 pnpm-lock.yaml                                |   3 +
 10 files changed, 277 insertions(+), 1 deletion(-)
 create mode 100644 apps/documentation/components/ComponentExample.vue

diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js
index 1d35d0f..91c52f8 100644
--- a/apps/documentation/.vitepress/theme/index.js
+++ b/apps/documentation/.vitepress/theme/index.js
@@ -2,7 +2,9 @@
 import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import MarkdownImporter from '../../components/MarkdownImporter.vue'
+import ComponentExample from '../../components/ComponentExample.vue'
 import './style.css'
+import '@devbyray/vue-wc-components'
 
 /** @type {import('vitepress').Theme} */
 export default {
@@ -15,5 +17,7 @@ export default {
   enhanceApp({ app, router, siteData }) {
     // ...
     app.component('MarkdownImporter', MarkdownImporter)
+    app.component('ComponentExample', ComponentExample)
+
   }
 }
diff --git a/apps/documentation/.vitepress/theme/style.css b/apps/documentation/.vitepress/theme/style.css
index 1a61cb1..a608733 100644
--- a/apps/documentation/.vitepress/theme/style.css
+++ b/apps/documentation/.vitepress/theme/style.css
@@ -42,7 +42,7 @@
  * - `danger`: Used to show error, or dangerous message to the users. Used
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
-
+ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
 :root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue
new file mode 100644
index 0000000..b24dd04
--- /dev/null
+++ b/apps/documentation/components/ComponentExample.vue
@@ -0,0 +1,226 @@
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+
+// Define props with default values to simplify usage in markdown
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    code: {
+        type: String,
+        default: ''
+    },
+    editable: {
+        type: Boolean,
+        default: true
+    },
+    autoRender: {
+        type: Boolean,
+        default: false
+    }
+})
+
+// Define emits for code changes
+const emit = defineEmits(['update:code'])
+
+// Create reactive references to track code changes
+const currentCode = ref(props.code)
+const displayCode = ref(props.code)
+const previewContainer = ref(null)
+
+// Watch for changes in the code prop and update the references
+watch(() => props.code, (newCode) => {
+    currentCode.value = newCode
+    displayCode.value = newCode
+    if (previewContainer.value) {
+        renderComponent()
+    }
+})
+
+// Handle code changes from the textarea
+const updateCode = (event) => {
+    currentCode.value = event.target.value
+    // Emit the updated code to the parent component
+    emit('update:code', currentCode.value)
+    
+    // If autoRender is true, update the display code immediately
+    if (props.autoRender) {
+        renderCode()
+    }
+}
+
+// Function to manually trigger rendering
+const renderCode = async () => {
+    displayCode.value = currentCode.value
+    await nextTick()
+    renderComponent()
+}
+
+// Function to convert string to actual component
+const renderComponent = async () => {
+    if (!previewContainer.value) return
+
+    try {
+        // Force re-render by clearing the container first
+        previewContainer.value.innerHTML = ''
+        
+        // Create a wrapper div to hold the rendered component
+        const wrapper = document.createElement('div')
+        wrapper.setAttribute('data-v-component', 'true')
+        previewContainer.value.appendChild(wrapper)
+        
+        // Make sure the web components are defined before inserting them
+        try {
+            // Wait for web components to be registered with a timeout
+            await Promise.race([
+                customElements.whenDefined('vwc-button'),
+                new Promise(resolve => setTimeout(resolve, 2000))
+            ])
+            await Promise.race([
+                customElements.whenDefined('vwc-input'),
+                new Promise(resolve => setTimeout(resolve, 2000))
+            ])
+            await Promise.race([
+                customElements.whenDefined('vwc-icon'),
+                new Promise(resolve => setTimeout(resolve, 2000))
+            ])
+        } catch (err) {
+            // Continue anyway, components might be registered later
+            console.warn('Component registration timeout:', err)
+        }
+        
+        // Insert the code directly as HTML
+        wrapper.innerHTML = displayCode.value
+    } catch (err) {
+        console.error('Error rendering component:', err)
+        // Display error in the preview
+        previewContainer.value.innerHTML = `<div style="color: red; padding: 10px;">Error: ${err.message}</div>`
+    }
+}
+
+// Initial render
+watch(previewContainer, (el) => {
+    if (el) {
+        renderComponent()
+    }
+}, { immediate: true })
+</script>
+<template>
+    <div class="component-example">
+        <h2 v-if="title">{{ title }}</h2>
+        <div class="example-preview">
+            <!-- Container for dynamically rendered component -->
+            <div ref="previewContainer"></div>
+        </div>
+        <div class="example-code">
+            <div v-if="editable" class="code-editor">
+                <textarea 
+                    :value="currentCode" 
+                    @input="updateCode" 
+                    class="code-textarea"
+                    spellcheck="false"
+                    rows="5"
+                ></textarea>
+                
+                <!-- Add render button when not in auto-render mode -->
+                <button 
+                    v-if="!autoRender" 
+                    @click="renderCode" 
+                    class="render-button"
+                    type="button"
+                >
+                    Render
+                </button>
+            </div>
+            <pre v-else><code>{{ currentCode }}</code></pre>
+        </div>
+    </div>
+    <hr />
+</template>
+<style scoped>
+.component-example {
+    margin: 20px 0;
+}
+.example-code {
+    padding: 10px;
+    border-end-end-radius: 5px;
+    border-end-start-radius: 5px;
+    margin-bottom: 20px;
+    background-color: #5f5f5f;
+    border: 1px solid #ccc;
+}
+.example-code pre {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+}
+.example-preview {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-start-end-radius: 5px;
+    border-start-start-radius: 5px;
+    aspect-ratio: 16/9;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.example-preview > * {
+    margin: 0;
+}
+.example-preview > :not(:last-child) {
+    margin-bottom: 10px;
+}
+.example-preview > :last-child {
+    margin-bottom: 0;
+}
+.example-preview > :first-child {
+    margin-top: 0;
+}
+.example-preview > :last-child {
+    margin-bottom: 0;
+}
+
+.code-editor {
+    position: relative;
+    width: 100%;
+}
+
+.code-textarea {
+    width: 100%;
+    min-height: 100px;
+    font-family: monospace;
+    padding: 10px;
+    background-color: #2d2d2d;
+    color: #e6e6e6;
+    border: none;
+    resize: vertical;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.code-textarea:focus {
+    outline: 1px solid #4a8bfc;
+}
+
+.render-button {
+    margin-top: 10px;
+    padding: 8px 16px;
+    background-color: #4a8bfc;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+
+.render-button:hover {
+    background-color: #3a7bec;
+}
+
+.render-button:active {
+    background-color: #2a6bdc;
+}
+</style>
\ No newline at end of file
diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md
index 6832e04..832a11c 100644
--- a/apps/documentation/docs/components/button.md
+++ b/apps/documentation/docs/components/button.md
@@ -1 +1,8 @@
+<ComponentExample 
+  title="Try out!" 
+  code="<vwc-button variant='primary'>Primary Button</vwc-button>"
+  :editable="true">
+    <vwc-button variant="primary">Primary Button</vwc-button>
+</ComponentExample>
+
 <MarkdownImporter path="packages/components/button/README.md" />
\ No newline at end of file
diff --git a/apps/documentation/docs/components/icon.md b/apps/documentation/docs/components/icon.md
index 52a7a79..9a3e420 100644
--- a/apps/documentation/docs/components/icon.md
+++ b/apps/documentation/docs/components/icon.md
@@ -1 +1,8 @@
+<ComponentExample 
+  title="Try out!" 
+  code="<vwc-icon name='star' size='lg' color='#FFD700'></vwc-icon>"
+  :editable="true">
+    <vwc-icon name="star" size="lg" color="#FFD700"></vwc-icon>
+</ComponentExample>
+
 <MarkdownImporter path="packages/components/icon/README.md" />
\ No newline at end of file
diff --git a/apps/documentation/docs/components/index.md b/apps/documentation/docs/components/index.md
index d796870..c369c02 100644
--- a/apps/documentation/docs/components/index.md
+++ b/apps/documentation/docs/components/index.md
@@ -1 +1,3 @@
+# Components
+
 <MarkdownImporter path="README.md" />
\ No newline at end of file
diff --git a/apps/documentation/docs/components/input.md b/apps/documentation/docs/components/input.md
index 3c9cfee..710f803 100644
--- a/apps/documentation/docs/components/input.md
+++ b/apps/documentation/docs/components/input.md
@@ -1 +1,8 @@
+<ComponentExample 
+  title="Try out!" 
+  code="<vwc-input label='Username' placeholder='Enter username'></vwc-input>"
+  :editable="true">
+    <vwc-input label="Username" placeholder="Enter username"></vwc-input>
+</ComponentExample>
+
 <MarkdownImporter path="packages/components/input/README.md" />
\ No newline at end of file
diff --git a/apps/documentation/index.md b/apps/documentation/index.md
index b78739c..2e1982c 100644
--- a/apps/documentation/index.md
+++ b/apps/documentation/index.md
@@ -23,3 +23,22 @@ features:
     link: /docs/components/icon
     details: A library of scalable and accessible icons to complement your design system.
 ---
+
+<!-- Add a ComponentExample demonstration at the bottom of the homepage -->
+<div class="component-demo">
+  <h2>Try our Button component</h2>
+  <ComponentExample
+    title="Button Demo"
+    code="<vwc-button variant='primary'>Click Me</vwc-button>"
+    :editable="true">
+    <vwc-button variant="primary">Click Me</vwc-button>
+  </ComponentExample>
+</div>
+
+<style>
+.component-demo {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 1rem;
+}
+</style>
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
index 2e22c7b..7790d83 100644
--- a/apps/documentation/package.json
+++ b/apps/documentation/package.json
@@ -14,6 +14,7 @@
     "vitepress": "^1.6.3"
   },
   "dependencies": {
+    "@devbyray/vue-wc-components": "workspace:^",
     "highlight.js": "^11.11.1"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0131e18..17984c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
 
   apps/documentation:
     dependencies:
+      '@devbyray/vue-wc-components':
+        specifier: workspace:^
+        version: link:../../packages/components
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1

From bf7d0e9040d74647e299ead0774c20225b64cfd3 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 17:42:15 +0200
Subject: [PATCH 05/13] feat(docs): update examples and enhance
 MarkdownImporter for better syntax highlighting

---
 .../components/ComponentExample.vue           | 230 ++++++++++++++++--
 .../components/MarkdownImporter.vue           |  96 +++++---
 apps/documentation/docs/components/button.md  |   7 +-
 apps/documentation/docs/components/index.md   |  35 +++
 4 files changed, 314 insertions(+), 54 deletions(-)

diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue
index b24dd04..c1f1a7b 100644
--- a/apps/documentation/components/ComponentExample.vue
+++ b/apps/documentation/components/ComponentExample.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
 
 // Define props with default values to simplify usage in markdown
 const props = defineProps({
@@ -11,6 +11,10 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    style: {
+        type: String,
+        default: ''
+    },
     editable: {
         type: Boolean,
         default: true
@@ -21,13 +25,19 @@ const props = defineProps({
     }
 })
 
-// Define emits for code changes
-const emit = defineEmits(['update:code'])
+// Define emits for code and style changes
+const emit = defineEmits(['update:code', 'update:style'])
 
-// Create reactive references to track code changes
+// Create reactive references to track code and style changes
 const currentCode = ref(props.code)
+const currentStyle = ref(typeof props.style === 'string' ? props.style : '')
 const displayCode = ref(props.code)
+const displayStyle = ref(typeof props.style === 'string' ? props.style : '')
 const previewContainer = ref(null)
+const styleElement = ref(null)
+
+// Track the active tab (code or style)
+const activeTab = ref('code')
 
 // Watch for changes in the code prop and update the references
 watch(() => props.code, (newCode) => {
@@ -38,6 +48,15 @@ watch(() => props.code, (newCode) => {
     }
 })
 
+// Watch for changes in the style prop
+watch(() => props.style, (newStyle) => {
+    // Handle case where style might not be a string
+    const styleStr = typeof newStyle === 'string' ? newStyle : ''
+    currentStyle.value = styleStr
+    displayStyle.value = styleStr
+    applyStyles()
+})
+
 // Handle code changes from the textarea
 const updateCode = (event) => {
     currentCode.value = event.target.value
@@ -50,11 +69,74 @@ const updateCode = (event) => {
     }
 }
 
+// Handle style changes from the textarea
+const updateStyle = (event) => {
+    currentStyle.value = event.target.value
+    // Emit the updated style to the parent component
+    emit('update:style', currentStyle.value)
+    
+    // If autoRender is true, update the styles immediately
+    if (props.autoRender) {
+        applyStyles()
+    }
+}
+
+// Function to toggle between tabs
+const setActiveTab = (tab) => {
+    activeTab.value = tab
+}
+
 // Function to manually trigger rendering
 const renderCode = async () => {
     displayCode.value = currentCode.value
+    displayStyle.value = currentStyle.value
     await nextTick()
     renderComponent()
+    applyStyles()
+}
+
+// Function to apply styles to the preview
+const applyStyles = () => {
+    // Don't proceed if there's no content or container
+    if (!displayStyle.value || !previewContainer.value) return
+    
+    try {
+        // Create a style element if it doesn't exist
+        if (!styleElement.value) {
+            styleElement.value = document.createElement('style')
+            styleElement.value.id = `component-example-style-${Math.random().toString(36).substring(2, 9)}`
+            
+            // Add to document head to ensure CSS variables are available globally
+            document.head.appendChild(styleElement.value)
+        }
+        
+        // Update the style content with properly scoped CSS
+        // We create a unique class for this example and prefix all rules with it
+        const uniqueClass = `example-${Math.random().toString(36).substring(2, 9)}`
+        
+        // Add the unique class to our preview container
+        previewContainer.value.parentNode.classList.add(uniqueClass)
+        
+        // Process styles to ensure they affect web components
+        // For CSS variables, we need to apply them to both :root and the container
+        let processedStyles = displayStyle.value
+        
+        // If styles contain :root selector with CSS variables, add them to our unique class too
+        if (processedStyles.includes(':root')) {
+            processedStyles = processedStyles.replace(/:root\s*{/g, `:root, .${uniqueClass} {`)
+        } else {
+            // Otherwise, wrap everything in our unique class
+            processedStyles = `.${uniqueClass} {\n${displayStyle.value}\n}`
+        }
+        
+        // Update the style element
+        styleElement.value.textContent = processedStyles
+        
+        // Log for debugging (helpful for users to see what's happening)
+        console.log('Applied styles with unique class:', uniqueClass)
+    } catch (err) {
+        console.error('Error applying styles:', err)
+    }
 }
 
 // Function to convert string to actual component
@@ -68,6 +150,10 @@ const renderComponent = async () => {
         // Create a wrapper div to hold the rendered component
         const wrapper = document.createElement('div')
         wrapper.setAttribute('data-v-component', 'true')
+        
+        // Add a class that can be used by our style system to target this specific instance
+        wrapper.classList.add('component-instance')
+        
         previewContainer.value.appendChild(wrapper)
         
         // Make sure the web components are defined before inserting them
@@ -92,6 +178,10 @@ const renderComponent = async () => {
         
         // Insert the code directly as HTML
         wrapper.innerHTML = displayCode.value
+        
+        // Force the browser to re-evaluate styles by triggering a reflow
+        // This helps with making custom properties apply to web components
+        void previewContainer.value.offsetHeight
     } catch (err) {
         console.error('Error rendering component:', err)
         // Display error in the preview
@@ -99,10 +189,18 @@ const renderComponent = async () => {
     }
 }
 
+// Clean up style element when component is unmounted
+onBeforeUnmount(() => {
+    if (styleElement.value && styleElement.value.parentNode) {
+        styleElement.value.parentNode.removeChild(styleElement.value)
+    }
+})
+
 // Initial render
 watch(previewContainer, (el) => {
     if (el) {
         renderComponent()
+        applyStyles()
     }
 }, { immediate: true })
 </script>
@@ -112,28 +210,63 @@ watch(previewContainer, (el) => {
         <div class="example-preview">
             <!-- Container for dynamically rendered component -->
             <div ref="previewContainer"></div>
+            
+            <!-- Render button moved above the fold -->
+            <button 
+                v-if="editable && !autoRender" 
+                @click="renderCode" 
+                class="render-button render-button-preview"
+                type="button"
+            >
+                Render Changes
+            </button>
+        </div>
+        
+        <!-- Tab navigation for code and style -->
+        <div v-if="editable" class="example-tabs">
+            <button 
+                class="tab-button" 
+                :class="{ 'active': activeTab === 'code' }"
+                @click="setActiveTab('code')"
+            >
+                HTML
+            </button>
+            <button 
+                class="tab-button" 
+                :class="{ 'active': activeTab === 'style' }"
+                @click="setActiveTab('style')"
+            >
+                CSS
+            </button>
         </div>
+        
         <div class="example-code">
-            <div v-if="editable" class="code-editor">
+            <!-- Code editor tab -->
+            <div v-if="editable && activeTab === 'code'" class="code-editor">
                 <textarea 
                     :value="currentCode" 
                     @input="updateCode" 
                     class="code-textarea"
                     spellcheck="false"
                     rows="5"
+                    placeholder="Enter HTML code here"
                 ></textarea>
-                
-                <!-- Add render button when not in auto-render mode -->
-                <button 
-                    v-if="!autoRender" 
-                    @click="renderCode" 
-                    class="render-button"
-                    type="button"
-                >
-                    Render
-                </button>
             </div>
-            <pre v-else><code>{{ currentCode }}</code></pre>
+            
+            <!-- Style editor tab -->
+            <div v-if="editable && activeTab === 'style'" class="code-editor">
+                <textarea 
+                    :value="currentStyle" 
+                    @input="updateStyle" 
+                    class="code-textarea"
+                    spellcheck="false"
+                    rows="5"
+                    placeholder="Enter CSS code here e.g. :root { --vwc-button-primary-bg: red; }"
+                ></textarea>
+            </div>
+            
+            <!-- Read-only code display -->
+            <pre v-if="!editable"><code>{{ currentCode }}</code></pre>
         </div>
     </div>
     <hr />
@@ -142,30 +275,80 @@ watch(previewContainer, (el) => {
 .component-example {
     margin: 20px 0;
 }
+
+.example-tabs {
+    display: flex;
+    border-start-end-radius: 5px;
+    border-start-start-radius: 5px;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    border-bottom: none;
+}
+
+.tab-button {
+    flex: 1;
+    padding: 0.5rem 1rem;
+    background-color: #3d3d3d;
+    color: #e6e6e6;
+    border: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: background-color 0.2s;
+}
+
+.tab-button:hover {
+    background-color: #4a4a4a;
+}
+
+.tab-button.active {
+    background-color: #5f5f5f;
+    font-weight: bold;
+}
+
 .example-code {
     padding: 10px;
-    border-end-end-radius: 5px;
-    border-end-start-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
     margin-bottom: 20px;
     background-color: #5f5f5f;
     border: 1px solid #ccc;
+    border-top: none;
+}
+
+.example-tabs + .example-code {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
+
 .example-code pre {
     margin: 0;
     font-size: 14px;
     line-height: 1.5;
 }
+
+.render-button-preview {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    margin-top: 0;
+    background-color: rgba(137, 255, 18, 0.9);
+    backdrop-filter: blur(4px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
 .example-preview {
+    position: relative;
     padding: 10px;
     border: 1px solid #ccc;
-    border-start-end-radius: 5px;
-    border-start-start-radius: 5px;
+    border-radius: 5px;
+    margin-bottom: 10px;
     aspect-ratio: 16/9;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
+
 .example-preview > * {
     margin: 0;
 }
@@ -207,7 +390,7 @@ watch(previewContainer, (el) => {
 .render-button {
     margin-top: 10px;
     padding: 8px 16px;
-    background-color: #4a8bfc;
+    background-color: rgba(137, 255, 18, 0.9);
     color: white;
     border: none;
     border-radius: 4px;
@@ -217,10 +400,11 @@ watch(previewContainer, (el) => {
 }
 
 .render-button:hover {
-    background-color: #3a7bec;
+    background-color: rgba(102, 203, 1, 0.9);
 }
 
 .render-button:active {
-    background-color: #2a6bdc;
+    background-color: rgba(137, 255, 18, 0.9);
+    transform: scale(0.98);
 }
 </style>
\ No newline at end of file
diff --git a/apps/documentation/components/MarkdownImporter.vue b/apps/documentation/components/MarkdownImporter.vue
index 84ab663..aaad8d6 100644
--- a/apps/documentation/components/MarkdownImporter.vue
+++ b/apps/documentation/components/MarkdownImporter.vue
@@ -57,53 +57,74 @@ const fetchMarkdown = async (path) => {
   }
 }
 
-// Function to apply syntax highlighting after the content is rendered
+// Function to safely apply syntax highlighting
 const applySyntaxHighlighting = () => {
   // Select all code blocks
   const codeBlocks = document.querySelectorAll('.markdown-content pre code')
   
   // Apply highlighting to each code block
   codeBlocks?.forEach((block) => {
-    // Make sure block has a className property
-    if (!block || typeof block.className !== 'string') {
+    // Make sure block exists and has content
+    if (!block || !block.textContent) {
       return
     }
     
-    // Check if a language class is present
-    const classList = block.className.split(' ')
-    const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-'))
-    
-    if (langClass) {
-      // Extract the language name
-      const lang = typeof langClass === 'string' ? langClass.replace('language-', '') : ''
+    try {
+      // Check if a language class is present
+      const classList = block.className ? block.className.split(' ') : []
+      const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-'))
       
-      // Apply highlighting if the language is supported
-      if (lang && hljs.getLanguage(lang)) {
-        hljs.highlightElement(block)
+      if (langClass) {
+        // Extract the language name
+        const lang = langClass.replace('language-', '')
+        
+        // Apply highlighting if the language is supported
+        if (lang && hljs.getLanguage(lang)) {
+          hljs.highlightElement(block)
+        } else {
+          // Only apply auto-detection if we have content
+          if (block.textContent.trim()) {
+            hljs.highlightElement(block)
+          }
+        }
       } else {
-        // Try auto-detection for unknown languages
-        hljs.highlightAuto(block)
+        // Only apply auto-detection if we have content
+        if (block.textContent.trim()) {
+          hljs.highlightElement(block)
+        }
       }
-    } else {
-      // No language specified, use auto-detection
-      hljs.highlightAuto(block)
+    } catch (error) {
+      // Log the error but don't break the rendering
+      console.warn('Error highlighting code block:', error)
+      
+      // Apply basic styling if highlighting fails
+      block.classList.add('plain-code')
     }
   })
 }
 
 onMounted(async () => {
-  // Get the base URL
-  const baseUrl = import.meta.env.BASE_URL || '/'
-  // Create a path that's relative to the public directory
-  const fullPath = `${baseUrl}${props.path}`
-  
-  // Fetch and process the markdown
-  const markdownContent = await fetchMarkdown(fullPath)
-  htmlContent.value = marked.parse(markdownContent)
-  
-  // Use nextTick to ensure the content is in the DOM before highlighting
-  await nextTick()
-  applySyntaxHighlighting()
+  try {
+    // Get the base URL
+    const baseUrl = import.meta.env.BASE_URL || '/'
+    // Create a path that's relative to the public directory
+    const fullPath = `${baseUrl}${props.path}`
+    
+    // Fetch and process the markdown
+    const markdownContent = await fetchMarkdown(fullPath)
+    
+    // Only parse if we have content
+    if (markdownContent && typeof markdownContent === 'string') {
+      htmlContent.value = marked.parse(markdownContent)
+      
+      // Use nextTick to ensure the content is in the DOM before highlighting
+      await nextTick()
+      applySyntaxHighlighting()
+    }
+  } catch (error) {
+    console.error('Error rendering markdown:', error)
+    htmlContent.value = '<div class="error-message">Error loading content</div>'
+  }
 })
 </script>
 
@@ -175,4 +196,19 @@ onMounted(async () => {
     color: #ddd;
   }
 }
+
+/* Style for error messages */
+.error-message {
+  color: #e74c3c;
+  padding: 1rem;
+  border: 1px solid #e74c3c;
+  border-radius: 4px;
+  background-color: rgba(231, 76, 60, 0.1);
+  margin: 1rem 0;
+}
+
+/* Style for plain code when highlighting fails */
+.plain-code {
+  color: #e6e6e6;
+}
 </style>
\ No newline at end of file
diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md
index 832a11c..d6b3037 100644
--- a/apps/documentation/docs/components/button.md
+++ b/apps/documentation/docs/components/button.md
@@ -1,6 +1,11 @@
 <ComponentExample 
-  title="Try out!" 
+  title="Interactive Button Example" 
   code="<vwc-button variant='primary'>Primary Button</vwc-button>"
+  style=":root {
+  --vwc-button-primary-bg: #e91e63;
+  --vwc-button-primary-text: white;
+  --vwc-button-radius: 2rem;
+}"
   :editable="true">
     <vwc-button variant="primary">Primary Button</vwc-button>
 </ComponentExample>
diff --git a/apps/documentation/docs/components/index.md b/apps/documentation/docs/components/index.md
index c369c02..28aef24 100644
--- a/apps/documentation/docs/components/index.md
+++ b/apps/documentation/docs/components/index.md
@@ -1,3 +1,38 @@
 # Components
 
+<ComponentExample 
+  title="Button Component" 
+  code="<vwc-button variant='primary'>Primary Button</vwc-button>"
+  style=":root {
+  --vwc-button-primary-bg: #e91e63;
+  --vwc-button-primary-text: white;
+  --vwc-button-radius: 2rem;
+}"
+  :editable="true">
+    <vwc-button variant="primary">Primary Button</vwc-button>
+</ComponentExample>
+
+<ComponentExample 
+  title="Input Component" 
+  code="<vwc-input label='Username' placeholder='Enter username'></vwc-input>"
+  style=":root {
+  --vwc-input-border: 2px solid #9c27b0;
+  --vwc-input-radius: 1rem;
+  --vwc-input-focus-border-color: #673ab7;
+  --vwc-input-label-color: #9c27b0;
+}"
+  :editable="true">
+    <vwc-input label="Username" placeholder="Enter username"></vwc-input>
+</ComponentExample>
+
+<ComponentExample 
+  title="Icon Component" 
+  code="<vwc-icon name='star' size='lg' color='#FFD700'></vwc-icon>"
+  style=":root {
+  --vwc-icon-lg-size: 3rem;
+}"
+  :editable="true">
+    <vwc-icon name="star" size="lg" color="#FFD700"></vwc-icon>
+</ComponentExample>
+
 <MarkdownImporter path="README.md" />
\ No newline at end of file

From 88181b1be6c912d096ad05d88be311399733eafe Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 08:01:02 +0200
Subject: [PATCH 06/13] feat(component): enhance ComponentExample with style
 handling and unique ID generation

---
 .../components/ComponentExample.vue           | 139 ++++++++++++------
 apps/documentation/docs/components/button.md  |   5 -
 packages/components/button/README.md          |   2 +-
 3 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue
index c1f1a7b..dd443f7 100644
--- a/apps/documentation/components/ComponentExample.vue
+++ b/apps/documentation/components/ComponentExample.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount, onMounted } from 'vue'
 
 // Define props with default values to simplify usage in markdown
 const props = defineProps({
@@ -35,6 +35,7 @@ const displayCode = ref(props.code)
 const displayStyle = ref(typeof props.style === 'string' ? props.style : '')
 const previewContainer = ref(null)
 const styleElement = ref(null)
+const componentId = ref(`example-${Math.random().toString(36).substring(2, 9)}`)
 
 // Track the active tab (code or style)
 const activeTab = ref('code')
@@ -54,7 +55,10 @@ watch(() => props.style, (newStyle) => {
     const styleStr = typeof newStyle === 'string' ? newStyle : ''
     currentStyle.value = styleStr
     displayStyle.value = styleStr
-    applyStyles()
+    // Make sure to apply styles when they change
+    nextTick(() => {
+        applyStyles()
+    })
 })
 
 // Handle code changes from the textarea
@@ -95,45 +99,78 @@ const renderCode = async () => {
     applyStyles()
 }
 
+// Add a helper function that creates a component-specific stylesheet
+const createComponentStyles = () => {
+    // Use our stored component ID for consistent style targeting
+    const styleId = `ce-styles-${componentId.value}`
+    
+    // Check if an existing style element exists with this ID
+    const existingStyle = document.getElementById(styleId)
+    if (existingStyle) {
+        return existingStyle
+    }
+    
+    // Create a new style element for our component
+    const styleEl = document.createElement('style')
+    styleEl.id = styleId
+    
+    // Add to document head for global CSS variable access
+    document.head.appendChild(styleEl)
+    
+    console.log('Created new style element:', styleId)
+    return styleEl
+}
+
 // Function to apply styles to the preview
 const applyStyles = () => {
-    // Don't proceed if there's no content or container
-    if (!displayStyle.value || !previewContainer.value) return
+    // Don't proceed if there's no container
+    if (!previewContainer.value) return
     
     try {
-        // Create a style element if it doesn't exist
+        // Make sure we have styles to apply, default to empty string
+        const styleContent = displayStyle.value || ''
+        
+        // Get or create our style element
         if (!styleElement.value) {
-            styleElement.value = document.createElement('style')
-            styleElement.value.id = `component-example-style-${Math.random().toString(36).substring(2, 9)}`
-            
-            // Add to document head to ensure CSS variables are available globally
-            document.head.appendChild(styleElement.value)
+            styleElement.value = createComponentStyles()
         }
         
-        // Update the style content with properly scoped CSS
-        // We create a unique class for this example and prefix all rules with it
-        const uniqueClass = `example-${Math.random().toString(36).substring(2, 9)}`
-        
-        // Add the unique class to our preview container
-        previewContainer.value.parentNode.classList.add(uniqueClass)
+        // Add our component ID to the preview container for targeting
+        previewContainer.value.setAttribute('data-example-id', componentId.value)
         
-        // Process styles to ensure they affect web components
-        // For CSS variables, we need to apply them to both :root and the container
-        let processedStyles = displayStyle.value
+        // Process CSS to handle :root selectors
+        let cssText = styleContent.trim()
         
-        // If styles contain :root selector with CSS variables, add them to our unique class too
-        if (processedStyles.includes(':root')) {
-            processedStyles = processedStyles.replace(/:root\s*{/g, `:root, .${uniqueClass} {`)
-        } else {
-            // Otherwise, wrap everything in our unique class
-            processedStyles = `.${uniqueClass} {\n${displayStyle.value}\n}`
+        // Make sure we properly scope the CSS 
+        if (cssText.includes(':root')) {
+            // For CSS variables, duplicate them to both :root and our scoped component
+            // This ensures they're accessible to Shadow DOM components
+            cssText = cssText.replace(/:root\s*{/g, (match) => {
+                return `:root, [data-example-id="${componentId.value}"] {`
+            })
         }
         
-        // Update the style element
-        styleElement.value.textContent = processedStyles
+        // Update the style element with our processed CSS
+        styleElement.value.textContent = cssText
         
-        // Log for debugging (helpful for users to see what's happening)
-        console.log('Applied styles with unique class:', uniqueClass)
+        // Log the applied styles for debugging
+        console.log('Applied styles for', componentId.value, ':', cssText)
+        
+        // Force a style recalculation to ensure changes are applied
+        setTimeout(() => {
+            if (previewContainer.value) {
+                // Force DOM reflow
+                void previewContainer.value.offsetHeight
+                
+                // Specifically target web components for style refresh
+                const components = previewContainer.value.querySelectorAll('*')
+                components.forEach(comp => {
+                    if (comp.tagName && comp.tagName.includes('-')) {
+                        void comp.offsetHeight
+                    }
+                })
+            }
+        }, 50)
     } catch (err) {
         console.error('Error applying styles:', err)
     }
@@ -144,47 +181,43 @@ const renderComponent = async () => {
     if (!previewContainer.value) return
 
     try {
-        // Force re-render by clearing the container first
+        // Clear the container
         previewContainer.value.innerHTML = ''
         
-        // Create a wrapper div to hold the rendered component
+        // Create a wrapper for our component
         const wrapper = document.createElement('div')
         wrapper.setAttribute('data-v-component', 'true')
-        
-        // Add a class that can be used by our style system to target this specific instance
         wrapper.classList.add('component-instance')
-        
         previewContainer.value.appendChild(wrapper)
         
-        // Make sure the web components are defined before inserting them
+        // Wait for web components to be defined
         try {
-            // Wait for web components to be registered with a timeout
+            // This helps ensure components are ready before rendering
             await Promise.race([
                 customElements.whenDefined('vwc-button'),
-                new Promise(resolve => setTimeout(resolve, 2000))
+                new Promise(resolve => setTimeout(resolve, 1000))
             ])
             await Promise.race([
                 customElements.whenDefined('vwc-input'),
-                new Promise(resolve => setTimeout(resolve, 2000))
+                new Promise(resolve => setTimeout(resolve, 1000)) 
             ])
             await Promise.race([
                 customElements.whenDefined('vwc-icon'),
-                new Promise(resolve => setTimeout(resolve, 2000))
+                new Promise(resolve => setTimeout(resolve, 1000))
             ])
         } catch (err) {
-            // Continue anyway, components might be registered later
-            console.warn('Component registration timeout:', err)
+            console.warn('Component registration timeout, continuing anyway')
         }
         
-        // Insert the code directly as HTML
+        // Insert the HTML code
         wrapper.innerHTML = displayCode.value
         
-        // Force the browser to re-evaluate styles by triggering a reflow
-        // This helps with making custom properties apply to web components
-        void previewContainer.value.offsetHeight
+        // Apply styles after ensuring component is rendered
+        setTimeout(() => {
+            applyStyles()
+        }, 50)
     } catch (err) {
         console.error('Error rendering component:', err)
-        // Display error in the preview
         previewContainer.value.innerHTML = `<div style="color: red; padding: 10px;">Error: ${err.message}</div>`
     }
 }
@@ -196,11 +229,21 @@ onBeforeUnmount(() => {
     }
 })
 
-// Initial render
+// Make sure styles are applied after the component is mounted
+onMounted(() => {
+    // We need a short delay to ensure the component is fully rendered
+    setTimeout(() => {
+        if (displayStyle.value) {
+            applyStyles()
+            console.log('Applied initial styles on mount')
+        }
+    }, 100)
+})
+
+// Initial render when preview container is available
 watch(previewContainer, (el) => {
     if (el) {
         renderComponent()
-        applyStyles()
     }
 }, { immediate: true })
 </script>
diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md
index d6b3037..d305d4c 100644
--- a/apps/documentation/docs/components/button.md
+++ b/apps/documentation/docs/components/button.md
@@ -1,11 +1,6 @@
 <ComponentExample 
   title="Interactive Button Example" 
   code="<vwc-button variant='primary'>Primary Button</vwc-button>"
-  style=":root {
-  --vwc-button-primary-bg: #e91e63;
-  --vwc-button-primary-text: white;
-  --vwc-button-radius: 2rem;
-}"
   :editable="true">
     <vwc-button variant="primary">Primary Button</vwc-button>
 </ComponentExample>
diff --git a/packages/components/button/README.md b/packages/components/button/README.md
index 74a324e..48b5977 100644
--- a/packages/components/button/README.md
+++ b/packages/components/button/README.md
@@ -20,7 +20,7 @@ import '@devbyray/vue-wc-button';
 </script>
 
 <!-- Basic usage -->
-<vwc-button>Click me</vwc-button>
+<vwc-button @click="() => console.log('Click')">Click me</vwc-button>
 
 <!-- With variants -->
 <vwc-button variant="primary">Primary Button</vwc-button>

From edf8a7902a0d9b273aa330c06e4f6713d93d9023 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 08:03:52 +0200
Subject: [PATCH 07/13] feat(package): add exports field for module resolution

---
 packages/components/package.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/components/package.json b/packages/components/package.json
index cb89d30..2d3fada 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -5,6 +5,13 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],

From d16d5d2f972914ce7e04ce71927a5dec765aa3d9 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 10:16:06 +0200
Subject: [PATCH 08/13] fix(package): correct paths in package.json for
 consistency

---
 packages/components/package.json | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 2d3fada..3102395 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -2,14 +2,15 @@
   "name": "@devbyray/vue-wc-components",
   "version": "0.0.12",
   "description": "All accessible Vue web components in one package",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "files": [

From 3620ed608ff7fdee1db0d596d079b9f1bdbe9222 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:21:23 +0200
Subject: [PATCH 09/13] feat(docs): add resolve alias for component path in
 VitePress config

---
 apps/documentation/.vitepress/config.mjs | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs
index c393ff8..6d11d97 100644
--- a/apps/documentation/.vitepress/config.mjs
+++ b/apps/documentation/.vitepress/config.mjs
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import { resolve } from 'path'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -36,6 +37,16 @@ export default defineConfig({
   vite: {
     optimizeDeps: {
       include: ['marked']
+    },
+    resolve: {
+      alias: {
+        '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+      }
+    },
+    build: {
+      commonjsOptions: {
+        strictRequires: true
+      }
     }
   }
 })

From 18407d9898420c7bc4025846043bfeea5cfa8601 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:26:42 +0200
Subject: [PATCH 10/13] fix(docs): update VitePress config to point to specific
 dist file for component imports

---
 apps/documentation/.vitepress/config.mjs     | 4 +++-
 apps/documentation/.vitepress/theme/index.js | 3 ++-
 apps/documentation/package.json              | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs
index 6d11d97..3e7f399 100644
--- a/apps/documentation/.vitepress/config.mjs
+++ b/apps/documentation/.vitepress/config.mjs
@@ -40,7 +40,9 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+        // Point to the specific dist file rather than the directory
+        '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components/dist/index.js'),
+        '@devbyray/vue-wc-components/dist/index.js': resolve(__dirname, '../../../packages/components/dist/index.js')
       }
     },
     build: {
diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js
index 91c52f8..15620b1 100644
--- a/apps/documentation/.vitepress/theme/index.js
+++ b/apps/documentation/.vitepress/theme/index.js
@@ -4,7 +4,8 @@ import DefaultTheme from 'vitepress/theme'
 import MarkdownImporter from '../../components/MarkdownImporter.vue'
 import ComponentExample from '../../components/ComponentExample.vue'
 import './style.css'
-import '@devbyray/vue-wc-components'
+// Import the package via its entry point
+import '@devbyray/vue-wc-components/dist/index.js'
 
 /** @type {import('vitepress').Theme} */
 export default {
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
index 7790d83..77cb8c6 100644
--- a/apps/documentation/package.json
+++ b/apps/documentation/package.json
@@ -4,8 +4,9 @@
   "description": "A Vue-based accessible design system with headless web components",
   "private": false,
   "scripts": {
+    "build:deps": "pnpm --filter @devbyray/vue-wc-components run build",
     "dev": "npm run copy-readme && vitepress dev",
-    "build": "npm run copy-readme && vitepress build",
+    "build": "npm run build:deps && npm run copy-readme && vitepress build",
     "preview": "vitepress preview",
     "copy-readme": "node scripts/copy-readme.js"
   },

From dcf58838ba08fb1f85dd4e5ee6b137c7e00f5e13 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:31:45 +0200
Subject: [PATCH 11/13] fix(docs):  update VitePress config to use specific
 entry point for component imports

---
 apps/documentation/.vitepress/config.mjs     | 22 +++++++++-----------
 apps/documentation/.vitepress/theme/index.js |  3 +--
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs
index 3e7f399..47ce6bb 100644
--- a/apps/documentation/.vitepress/config.mjs
+++ b/apps/documentation/.vitepress/config.mjs
@@ -38,17 +38,15 @@ export default defineConfig({
     optimizeDeps: {
       include: ['marked']
     },
-    resolve: {
-      alias: {
-        // Point to the specific dist file rather than the directory
-        '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components/dist/index.js'),
-        '@devbyray/vue-wc-components/dist/index.js': resolve(__dirname, '../../../packages/components/dist/index.js')
-      }
-    },
-    build: {
-      commonjsOptions: {
-        strictRequires: true
-      }
-    }
+    // resolve: {
+    //   alias: {
+    //     '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+    //   }
+    // },
+    // build: {
+    //   commonjsOptions: {
+    //     strictRequires: true
+    //   }
+    // }
   }
 })
diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js
index 15620b1..91c52f8 100644
--- a/apps/documentation/.vitepress/theme/index.js
+++ b/apps/documentation/.vitepress/theme/index.js
@@ -4,8 +4,7 @@ import DefaultTheme from 'vitepress/theme'
 import MarkdownImporter from '../../components/MarkdownImporter.vue'
 import ComponentExample from '../../components/ComponentExample.vue'
 import './style.css'
-// Import the package via its entry point
-import '@devbyray/vue-wc-components/dist/index.js'
+import '@devbyray/vue-wc-components'
 
 /** @type {import('vitepress').Theme} */
 export default {

From d2782c87a50e34815e77f27efa8f0ed83ee0ec9f Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:36:12 +0200
Subject: [PATCH 12/13] feat(build): add Vercel configuration for deployment

---
 package.json |  4 +++-
 vercel.json  | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 vercel.json

diff --git a/package.json b/package.json
index a0f60b2..baf75f9 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
     "lint": "pnpm -r lint",
     "test": "pnpm -r test",
     "docs:dev": "pnpm --filter @devbyray/vue-wc-documentation dev",
-    "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build"
+    "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build",
+    "vercel-build": "pnpm build:deps && pnpm docs:build",
+    "build:deps": "pnpm --filter @devbyray/vue-wc-core build && pnpm --filter ./packages/components/button build && pnpm --filter ./packages/components/input build && pnpm --filter ./packages/components/icon build && pnpm --filter @devbyray/vue-wc-components build"
   },
   "keywords": [
     "vue",
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..aec5570
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,13 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/node",
+      "config": {
+        "buildCommand": "pnpm vercel-build"
+      }
+    }
+  ],
+  "installCommand": "pnpm install"
+}
\ No newline at end of file

From 9070369b2e2c532315642a6b8955bb300f05c471 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:48:27 +0200
Subject: [PATCH 13/13] fix(build): correct build command in Vercel
 configuration

---
 vercel.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vercel.json b/vercel.json
index aec5570..b5d649f 100644
--- a/vercel.json
+++ b/vercel.json
@@ -5,7 +5,7 @@
       "src": "package.json",
       "use": "@vercel/node",
       "config": {
-        "buildCommand": "pnpm vercel-build"
+        "buildCommand": "pnpm run vercel-build"
       }
     }
   ],