@promptui-lib/codegen 0.1.2 → 0.1.4

package/dist/mappings/component-mappings.js

@@ -0,0 +1,1093 @@
+/**
+ * Component Mappings
+ * Maps Figma frame names to framework-specific components
+ */
+/**
+ * Component mappings by name
+ * Key is the component name (without #), case-insensitive matching
+ */
+export const COMPONENT_MAPPINGS = {
+    // ============= BUTTONS =============
+    button: {
+        bootstrap: {
+            tag: 'button',
+            classes: ['btn', 'btn-primary'],
+        },
+        mui: {
+            component: 'Button',
+            props: { variant: 'contained' },
+            imports: ["import { Button } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'button',
+            classes: ['px-4', 'py-2', 'rounded-lg', 'font-medium'],
+        },
+        scss: {
+            tag: 'button',
+            baseClass: 'button',
+        },
+        flutter: {
+            widget: 'ElevatedButton',
+            props: { onPressed: '() {}' },
+        },
+        swiftui: {
+            view: 'Button',
+            modifiers: ['.buttonStyle(.borderedProminent)'],
+        },
+    },
+    buttongroup: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['btn-group'],
+            wrapper: 'role="group"',
+        },
+        mui: {
+            component: 'ButtonGroup',
+            imports: ["import { ButtonGroup } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['inline-flex', 'rounded-lg', 'overflow-hidden'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'button-group',
+        },
+        flutter: {
+            widget: 'Row',
+        },
+        swiftui: {
+            view: 'HStack',
+            modifiers: ['.spacing(0)'],
+        },
+    },
+    // ============= ALERTS =============
+    alert: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['alert', 'alert-primary'],
+            wrapper: 'role="alert"',
+        },
+        mui: {
+            component: 'Alert',
+            props: { severity: 'info' },
+            imports: ["import { Alert } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['p-4', 'rounded-lg', 'border'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'alert',
+        },
+        flutter: {
+            widget: 'Container',
+            props: {
+                padding: 'EdgeInsets.all(16)',
+                decoration: 'BoxDecoration(borderRadius: BorderRadius.circular(8))',
+            },
+        },
+        swiftui: {
+            view: 'HStack',
+            modifiers: ['.padding()', '.background(Color.blue.opacity(0.1))', '.cornerRadius(8)'],
+        },
+    },
+    // ============= BADGES =============
+    badge: {
+        bootstrap: {
+            tag: 'span',
+            classes: ['badge', 'bg-primary'],
+        },
+        mui: {
+            component: 'Chip',
+            props: { size: 'small' },
+            imports: ["import { Chip } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'span',
+            classes: ['px-2', 'py-1', 'text-xs', 'font-medium', 'rounded-full'],
+        },
+        scss: {
+            tag: 'span',
+            baseClass: 'badge',
+        },
+        flutter: {
+            widget: 'Container',
+            props: {
+                padding: 'EdgeInsets.symmetric(horizontal: 8, vertical: 4)',
+                decoration: 'BoxDecoration(borderRadius: BorderRadius.circular(12))',
+            },
+        },
+        swiftui: {
+            view: 'Text',
+            modifiers: ['.font(.caption)', '.padding(.horizontal, 8)', '.padding(.vertical, 4)', '.background(Capsule())'],
+        },
+    },
+    // ============= CARDS =============
+    card: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['card'],
+        },
+        mui: {
+            component: 'Card',
+            imports: ["import { Card, CardContent } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['rounded-lg', 'shadow-md', 'overflow-hidden', 'bg-white'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'card',
+        },
+        flutter: {
+            widget: 'Card',
+            props: { elevation: '2' },
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.background(Color.white)', '.cornerRadius(12)', '.shadow(radius: 4)'],
+        },
+    },
+    // ============= MODALS / DIALOGS =============
+    modal: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['modal'],
+            children: '<div class="modal-dialog"><div class="modal-content"></div></div>',
+        },
+        mui: {
+            component: 'Dialog',
+            imports: ["import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['fixed', 'inset-0', 'z-50', 'flex', 'items-center', 'justify-center'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'modal',
+        },
+        flutter: {
+            widget: 'Dialog',
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.sheet(isPresented: $isPresented)'],
+        },
+    },
+    dialog: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['modal'],
+        },
+        mui: {
+            component: 'Dialog',
+            imports: ["import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['fixed', 'inset-0', 'z-50', 'flex', 'items-center', 'justify-center'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'dialog',
+        },
+        flutter: {
+            widget: 'AlertDialog',
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.alert(isPresented: $isPresented)'],
+        },
+    },
+    // ============= NAVIGATION =============
+    navbar: {
+        bootstrap: {
+            tag: 'nav',
+            classes: ['navbar', 'navbar-expand-lg', 'navbar-light', 'bg-light'],
+        },
+        mui: {
+            component: 'AppBar',
+            imports: ["import { AppBar, Toolbar } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'nav',
+            classes: ['flex', 'items-center', 'justify-between', 'px-6', 'py-4'],
+        },
+        scss: {
+            tag: 'nav',
+            baseClass: 'navbar',
+        },
+        flutter: {
+            widget: 'AppBar',
+        },
+        swiftui: {
+            view: 'NavigationStack',
+        },
+    },
+    nav: {
+        bootstrap: {
+            tag: 'ul',
+            classes: ['nav'],
+        },
+        mui: {
+            component: 'Tabs',
+            imports: ["import { Tabs, Tab } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'nav',
+            classes: ['flex', 'space-x-4'],
+        },
+        scss: {
+            tag: 'nav',
+            baseClass: 'nav',
+        },
+        flutter: {
+            widget: 'Row',
+        },
+        swiftui: {
+            view: 'HStack',
+        },
+    },
+    tabs: {
+        bootstrap: {
+            tag: 'ul',
+            classes: ['nav', 'nav-tabs'],
+        },
+        mui: {
+            component: 'Tabs',
+            imports: ["import { Tabs, Tab } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['flex', 'border-b'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'tabs',
+        },
+        flutter: {
+            widget: 'TabBar',
+        },
+        swiftui: {
+            view: 'TabView',
+        },
+    },
+    breadcrumb: {
+        bootstrap: {
+            tag: 'nav',
+            classes: ['breadcrumb'],
+            wrapper: 'aria-label="breadcrumb"',
+        },
+        mui: {
+            component: 'Breadcrumbs',
+            imports: ["import { Breadcrumbs, Link } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'nav',
+            classes: ['flex', 'items-center', 'space-x-2', 'text-sm'],
+        },
+        scss: {
+            tag: 'nav',
+            baseClass: 'breadcrumb',
+        },
+        flutter: {
+            widget: 'Row',
+        },
+        swiftui: {
+            view: 'HStack',
+        },
+    },
+    pagination: {
+        bootstrap: {
+            tag: 'nav',
+            classes: ['pagination'],
+        },
+        mui: {
+            component: 'Pagination',
+            imports: ["import { Pagination } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'nav',
+            classes: ['flex', 'items-center', 'space-x-1'],
+        },
+        scss: {
+            tag: 'nav',
+            baseClass: 'pagination',
+        },
+        flutter: {
+            widget: 'Row',
+        },
+        swiftui: {
+            view: 'HStack',
+        },
+    },
+    // ============= FORMS =============
+    input: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-control'],
+        },
+        mui: {
+            component: 'TextField',
+            props: { variant: 'outlined', fullWidth: 'true' },
+            imports: ["import { TextField } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg', 'focus:ring-2', 'focus:outline-none'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'input',
+        },
+        flutter: {
+            widget: 'TextField',
+            props: { decoration: "InputDecoration(border: OutlineInputBorder())" },
+        },
+        swiftui: {
+            view: 'TextField',
+            modifiers: ['.textFieldStyle(.roundedBorder)'],
+        },
+    },
+    textfield: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-control'],
+        },
+        mui: {
+            component: 'TextField',
+            props: { variant: 'outlined' },
+            imports: ["import { TextField } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'text-field',
+        },
+        flutter: {
+            widget: 'TextField',
+        },
+        swiftui: {
+            view: 'TextField',
+        },
+    },
+    textarea: {
+        bootstrap: {
+            tag: 'textarea',
+            classes: ['form-control'],
+        },
+        mui: {
+            component: 'TextField',
+            props: { multiline: 'true', rows: '4' },
+            imports: ["import { TextField } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'textarea',
+            classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg', 'resize-y'],
+        },
+        scss: {
+            tag: 'textarea',
+            baseClass: 'textarea',
+        },
+        flutter: {
+            widget: 'TextField',
+            props: { maxLines: 'null', minLines: '4' },
+        },
+        swiftui: {
+            view: 'TextEditor',
+        },
+    },
+    select: {
+        bootstrap: {
+            tag: 'select',
+            classes: ['form-select'],
+        },
+        mui: {
+            component: 'Select',
+            imports: ["import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'select',
+            classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg', 'bg-white'],
+        },
+        scss: {
+            tag: 'select',
+            baseClass: 'select',
+        },
+        flutter: {
+            widget: 'DropdownButton',
+        },
+        swiftui: {
+            view: 'Picker',
+            modifiers: ['.pickerStyle(.menu)'],
+        },
+    },
+    checkbox: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-check-input'],
+            wrapper: 'type="checkbox"',
+        },
+        mui: {
+            component: 'Checkbox',
+            imports: ["import { Checkbox, FormControlLabel } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['w-4', 'h-4', 'rounded', 'border-gray-300'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'checkbox',
+        },
+        flutter: {
+            widget: 'Checkbox',
+        },
+        swiftui: {
+            view: 'Toggle',
+            modifiers: ['.toggleStyle(.checkbox)'],
+        },
+    },
+    radio: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-check-input'],
+            wrapper: 'type="radio"',
+        },
+        mui: {
+            component: 'Radio',
+            imports: ["import { Radio, RadioGroup, FormControlLabel } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['w-4', 'h-4', 'border-gray-300'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'radio',
+        },
+        flutter: {
+            widget: 'Radio',
+        },
+        swiftui: {
+            view: 'Picker',
+            modifiers: ['.pickerStyle(.radioGroup)'],
+        },
+    },
+    switch: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['form-check', 'form-switch'],
+        },
+        mui: {
+            component: 'Switch',
+            imports: ["import { Switch, FormControlLabel } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'button',
+            classes: ['relative', 'inline-flex', 'h-6', 'w-11', 'rounded-full', 'transition-colors'],
+        },
+        scss: {
+            tag: 'label',
+            baseClass: 'switch',
+        },
+        flutter: {
+            widget: 'Switch',
+        },
+        swiftui: {
+            view: 'Toggle',
+        },
+    },
+    formgroup: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['mb-3'],
+        },
+        mui: {
+            component: 'FormControl',
+            imports: ["import { FormControl, FormLabel } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['mb-4'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'form-group',
+        },
+        flutter: {
+            widget: 'Column',
+            props: { crossAxisAlignment: 'CrossAxisAlignment.start' },
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.alignment(.leading)'],
+        },
+    },
+    // ============= FEEDBACK =============
+    spinner: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['spinner-border'],
+            wrapper: 'role="status"',
+        },
+        mui: {
+            component: 'CircularProgress',
+            imports: ["import { CircularProgress } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['animate-spin', 'rounded-full', 'border-2', 'border-t-transparent'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'spinner',
+            hasAnimation: true,
+            animationName: 'spin',
+        },
+        flutter: {
+            widget: 'CircularProgressIndicator',
+        },
+        swiftui: {
+            view: 'ProgressView',
+            modifiers: ['.progressViewStyle(.circular)'],
+        },
+    },
+    loading: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['spinner-border'],
+            wrapper: 'role="status"',
+        },
+        mui: {
+            component: 'CircularProgress',
+            imports: ["import { CircularProgress } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['animate-spin', 'rounded-full', 'border-2', 'border-t-transparent'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'loading',
+            hasAnimation: true,
+            animationName: 'spin',
+        },
+        flutter: {
+            widget: 'CircularProgressIndicator',
+        },
+        swiftui: {
+            view: 'ProgressView',
+        },
+    },
+    progress: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['progress'],
+            children: '<div class="progress-bar" role="progressbar"></div>',
+        },
+        mui: {
+            component: 'LinearProgress',
+            imports: ["import { LinearProgress } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['w-full', 'bg-gray-200', 'rounded-full', 'h-2'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'progress',
+        },
+        flutter: {
+            widget: 'LinearProgressIndicator',
+        },
+        swiftui: {
+            view: 'ProgressView',
+            modifiers: ['.progressViewStyle(.linear)'],
+        },
+    },
+    toast: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['toast'],
+            wrapper: 'role="alert"',
+        },
+        mui: {
+            component: 'Snackbar',
+            imports: ["import { Snackbar, Alert } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['fixed', 'bottom-4', 'right-4', 'p-4', 'rounded-lg', 'shadow-lg'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'toast',
+        },
+        flutter: {
+            widget: 'SnackBar',
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.toast(isPresented: $isPresented)'],
+        },
+    },
+    snackbar: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['toast'],
+        },
+        mui: {
+            component: 'Snackbar',
+            imports: ["import { Snackbar } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['fixed', 'bottom-4', 'left-1/2', '-translate-x-1/2', 'p-4', 'rounded-lg'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'snackbar',
+        },
+        flutter: {
+            widget: 'SnackBar',
+        },
+        swiftui: {
+            view: 'VStack',
+        },
+    },
+    tooltip: {
+        bootstrap: {
+            tag: 'span',
+            classes: [],
+            wrapper: 'data-bs-toggle="tooltip"',
+        },
+        mui: {
+            component: 'Tooltip',
+            imports: ["import { Tooltip } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['relative', 'group'],
+        },
+        scss: {
+            tag: 'span',
+            baseClass: 'tooltip',
+        },
+        flutter: {
+            widget: 'Tooltip',
+        },
+        swiftui: {
+            view: 'Text',
+            modifiers: ['.help("Tooltip text")'],
+        },
+    },
+    // ============= LAYOUT =============
+    dropdown: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['dropdown'],
+        },
+        mui: {
+            component: 'Menu',
+            imports: ["import { Menu, MenuItem, Button } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['relative', 'inline-block'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'dropdown',
+        },
+        flutter: {
+            widget: 'PopupMenuButton',
+        },
+        swiftui: {
+            view: 'Menu',
+        },
+    },
+    menu: {
+        bootstrap: {
+            tag: 'ul',
+            classes: ['dropdown-menu'],
+        },
+        mui: {
+            component: 'Menu',
+            imports: ["import { Menu, MenuItem } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['absolute', 'mt-2', 'py-2', 'bg-white', 'rounded-lg', 'shadow-lg'],
+        },
+        scss: {
+            tag: 'ul',
+            baseClass: 'menu',
+        },
+        flutter: {
+            widget: 'PopupMenuButton',
+        },
+        swiftui: {
+            view: 'Menu',
+        },
+    },
+    listgroup: {
+        bootstrap: {
+            tag: 'ul',
+            classes: ['list-group'],
+        },
+        mui: {
+            component: 'List',
+            imports: ["import { List, ListItem, ListItemText } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'ul',
+            classes: ['divide-y', 'rounded-lg', 'border'],
+        },
+        scss: {
+            tag: 'ul',
+            baseClass: 'list-group',
+        },
+        flutter: {
+            widget: 'ListView',
+        },
+        swiftui: {
+            view: 'List',
+        },
+    },
+    list: {
+        bootstrap: {
+            tag: 'ul',
+            classes: ['list-group'],
+        },
+        mui: {
+            component: 'List',
+            imports: ["import { List, ListItem } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'ul',
+            classes: ['space-y-2'],
+        },
+        scss: {
+            tag: 'ul',
+            baseClass: 'list',
+        },
+        flutter: {
+            widget: 'ListView',
+        },
+        swiftui: {
+            view: 'List',
+        },
+    },
+    table: {
+        bootstrap: {
+            tag: 'table',
+            classes: ['table'],
+        },
+        mui: {
+            component: 'Table',
+            imports: ["import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'table',
+            classes: ['w-full', 'text-left', 'border-collapse'],
+        },
+        scss: {
+            tag: 'table',
+            baseClass: 'table',
+        },
+        flutter: {
+            widget: 'DataTable',
+        },
+        swiftui: {
+            view: 'Table',
+        },
+    },
+    accordion: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['accordion'],
+        },
+        mui: {
+            component: 'Accordion',
+            imports: ["import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['divide-y', 'border', 'rounded-lg'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'accordion',
+        },
+        flutter: {
+            widget: 'ExpansionPanelList',
+        },
+        swiftui: {
+            view: 'DisclosureGroup',
+        },
+    },
+    collapse: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['collapse'],
+        },
+        mui: {
+            component: 'Collapse',
+            imports: ["import { Collapse } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['overflow-hidden', 'transition-all'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'collapse',
+        },
+        flutter: {
+            widget: 'AnimatedContainer',
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.animation(.easeInOut)'],
+        },
+    },
+    carousel: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['carousel', 'slide'],
+            wrapper: 'data-bs-ride="carousel"',
+        },
+        mui: {
+            component: 'Box',
+            imports: ["import { Box, IconButton } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['relative', 'overflow-hidden'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'carousel',
+        },
+        flutter: {
+            widget: 'PageView',
+        },
+        swiftui: {
+            view: 'TabView',
+            modifiers: ['.tabViewStyle(.page)'],
+        },
+    },
+    offcanvas: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['offcanvas', 'offcanvas-start'],
+        },
+        mui: {
+            component: 'Drawer',
+            imports: ["import { Drawer } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['fixed', 'inset-y-0', 'left-0', 'w-64', 'transform', '-translate-x-full'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'offcanvas',
+        },
+        flutter: {
+            widget: 'Drawer',
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.sheet(isPresented: $isPresented)'],
+        },
+    },
+    drawer: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['offcanvas', 'offcanvas-start'],
+        },
+        mui: {
+            component: 'Drawer',
+            imports: ["import { Drawer } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['fixed', 'inset-y-0', 'left-0', 'w-64', 'bg-white', 'shadow-lg'],
+        },
+        scss: {
+            tag: 'aside',
+            baseClass: 'drawer',
+        },
+        flutter: {
+            widget: 'Drawer',
+        },
+        swiftui: {
+            view: 'NavigationSplitView',
+        },
+    },
+    // ============= MISC =============
+    avatar: {
+        bootstrap: {
+            tag: 'img',
+            classes: ['rounded-circle'],
+        },
+        mui: {
+            component: 'Avatar',
+            imports: ["import { Avatar } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'img',
+            classes: ['w-10', 'h-10', 'rounded-full', 'object-cover'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'avatar',
+        },
+        flutter: {
+            widget: 'CircleAvatar',
+        },
+        swiftui: {
+            view: 'Image',
+            modifiers: ['.clipShape(Circle())'],
+        },
+    },
+    chip: {
+        bootstrap: {
+            tag: 'span',
+            classes: ['badge', 'rounded-pill'],
+        },
+        mui: {
+            component: 'Chip',
+            imports: ["import { Chip } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'span',
+            classes: ['inline-flex', 'items-center', 'px-3', 'py-1', 'rounded-full', 'text-sm'],
+        },
+        scss: {
+            tag: 'span',
+            baseClass: 'chip',
+        },
+        flutter: {
+            widget: 'Chip',
+        },
+        swiftui: {
+            view: 'Text',
+            modifiers: ['.padding(.horizontal, 12)', '.padding(.vertical, 6)', '.background(Capsule())'],
+        },
+    },
+    slider: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-range'],
+            wrapper: 'type="range"',
+        },
+        mui: {
+            component: 'Slider',
+            imports: ["import { Slider } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['w-full', 'h-2', 'rounded-lg', 'appearance-none', 'cursor-pointer'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'slider',
+        },
+        flutter: {
+            widget: 'Slider',
+        },
+        swiftui: {
+            view: 'Slider',
+        },
+    },
+    divider: {
+        bootstrap: {
+            tag: 'hr',
+            classes: [],
+        },
+        mui: {
+            component: 'Divider',
+            imports: ["import { Divider } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'hr',
+            classes: ['border-gray-200'],
+        },
+        scss: {
+            tag: 'hr',
+            baseClass: 'divider',
+        },
+        flutter: {
+            widget: 'Divider',
+        },
+        swiftui: {
+            view: 'Divider',
+        },
+    },
+    skeleton: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['placeholder-glow'],
+        },
+        mui: {
+            component: 'Skeleton',
+            imports: ["import { Skeleton } from '@mui/material';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['animate-pulse', 'bg-gray-200', 'rounded'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'skeleton',
+            hasAnimation: true,
+            animationName: 'shimmer',
+        },
+        flutter: {
+            widget: 'Container',
+            props: { color: 'Colors.grey[300]' },
+        },
+        swiftui: {
+            view: 'RoundedRectangle',
+            modifiers: ['.fill(Color.gray.opacity(0.3))', '.shimmering()'],
+        },
+    },
+};
+/**
+ * Get component mapping by name (case-insensitive)
+ */
+export function getComponentMapping(name) {
+    const normalizedName = name.toLowerCase().replace(/[^a-z]/g, '');
+    return COMPONENT_MAPPINGS[normalizedName];
+}
+/**
+ * Check if a component name has a mapping
+ */
+export function hasComponentMapping(name) {
+    return getComponentMapping(name) !== undefined;
+}
+/**
+ * Extract component type from name
+ * e.g., "#ButtonPrimary" -> "button", "#CardProduct" -> "card"
+ */
+export function extractComponentType(name) {
+    // Remove # prefix
+    const cleanName = name.replace(/^#/, '');
+    // Try to match known component types
+    for (const key of Object.keys(COMPONENT_MAPPINGS)) {
+        if (cleanName.toLowerCase().startsWith(key)) {
+            return key;
+        }
+    }
+    return null;
+}