@letsprogram/ng-oat-mcp 0.2.0

package/dist/data/components.js

@@ -0,0 +1,647 @@
+export const COMPONENTS = [
+    // ─── Core Components ───
+    {
+        name: 'NgOatButton',
+        selector: 'ng-oat-button',
+        import: "import { NgOatButton } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Button with variant, style, and size options. Supports icon-only mode.',
+        inputs: [
+            { name: 'variant', type: "'default' | 'secondary' | 'danger'", default: "'default'" },
+            { name: 'btnStyle', type: "'filled' | 'outline' | 'ghost'", default: "'filled'" },
+            { name: 'size', type: "'default' | 'small' | 'large'", default: "'default'" },
+            { name: 'icon', type: 'boolean', default: 'false' },
+            { name: 'type', type: "'button' | 'submit' | 'reset'", default: "'button'" },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+            { name: 'ariaLabel', type: 'string', default: "''" },
+        ],
+        outputs: [{ name: 'clicked', type: 'MouseEvent' }],
+        contentSlots: ['default (button label/icon)'],
+        example: `<ng-oat-button variant="default" btnStyle="filled" (clicked)="onSave()">Save</ng-oat-button>`,
+    },
+    {
+        name: 'NgOatSplitButton',
+        selector: 'ng-oat-split-button',
+        import: "import { NgOatSplitButton } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Split button with primary action and dropdown menu. Popover-based with keyboard nav.',
+        inputs: [
+            { name: 'label', type: 'string', default: 'required' },
+            { name: 'variant', type: "'default' | 'secondary' | 'danger'", default: "'default'" },
+            { name: 'btnStyle', type: "'filled' | 'outline' | 'ghost'", default: "'filled'" },
+            { name: 'size', type: "'default' | 'small' | 'large'", default: "'default'" },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+        ],
+        outputs: [{ name: 'clicked', type: 'MouseEvent' }],
+        contentSlots: ['[role="menuitem"] elements for dropdown items'],
+        example: `<ng-oat-split-button label="Save" (clicked)="onSave()">\n  <button role="menuitem">Save as Draft</button>\n  <button role="menuitem">Save & Publish</button>\n</ng-oat-split-button>`,
+    },
+    {
+        name: 'NgOatBadge',
+        selector: 'ng-oat-badge',
+        import: "import { NgOatBadge } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Inline badge/tag with variant colors.',
+        inputs: [{ name: 'variant', type: "'default' | 'secondary' | 'outline' | 'danger' | 'success'", default: "'default'" }],
+        outputs: [],
+        contentSlots: ['default (badge text)'],
+        example: `<ng-oat-badge variant="success">Active</ng-oat-badge>`,
+    },
+    {
+        name: 'NgOatAlert',
+        selector: 'ng-oat-alert',
+        import: "import { NgOatAlert } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Alert banner with variant, size, and optional dismiss button. Has role="alert".',
+        inputs: [
+            { name: 'variant', type: "'default' | 'success' | 'danger' | 'warning'", default: "'default'" },
+            { name: 'size', type: "'compact' | 'default' | 'comfortable'", default: "'default'" },
+            { name: 'dismissible', type: 'boolean', default: 'false' },
+        ],
+        outputs: [{ name: 'dismissed', type: 'void' }],
+        contentSlots: ['default (alert body)'],
+        example: `<ng-oat-alert variant="success" [dismissible]="true" (dismissed)="onDismiss()">Changes saved.</ng-oat-alert>`,
+    },
+    {
+        name: 'NgOatCard',
+        selector: 'ng-oat-card',
+        import: "import { NgOatCard, NgOatCardHeader, NgOatCardFooter } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Card container with optional header and footer sub-components.',
+        inputs: [],
+        outputs: [],
+        contentSlots: ['ng-oat-card-header', 'default (body)', 'ng-oat-card-footer'],
+        example: `<ng-oat-card>\n  <ng-oat-card-header><h3>Title</h3></ng-oat-card-header>\n  <p>Body</p>\n  <ng-oat-card-footer><ng-oat-button>Action</ng-oat-button></ng-oat-card-footer>\n</ng-oat-card>`,
+    },
+    {
+        name: 'NgOatAccordion',
+        selector: 'ng-oat-accordion',
+        import: "import { NgOatAccordion } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Accordion with collapsible sections. Items: { title, content, open? }.',
+        inputs: [
+            { name: 'items', type: 'NgOatAccordionItem[]', default: 'required' },
+            { name: 'group', type: 'string | undefined', default: 'undefined' },
+        ],
+        outputs: [{ name: 'toggled', type: '{ item: NgOatAccordionItem; open: boolean }' }],
+        example: `<ng-oat-accordion [items]="[{ title: 'FAQ 1', content: 'Answer 1' }]" />`,
+    },
+    {
+        name: 'NgOatTable',
+        selector: 'ng-oat-table',
+        import: "import { NgOatTable } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Data table with columns, optional striping, row click, and scroll support.',
+        inputs: [
+            { name: 'columns', type: 'NgOatTableColumn[]', default: 'required' },
+            { name: 'data', type: 'Record<string, any>[]', default: 'required' },
+            { name: 'striped', type: 'boolean', default: 'false' },
+            { name: 'clickable', type: 'boolean', default: 'false' },
+            { name: 'emptyText', type: 'string', default: "'No data available.'" },
+            { name: 'scrollX', type: 'boolean', default: 'false' },
+            { name: 'scrollY', type: 'string', default: "''" },
+        ],
+        outputs: [{ name: 'rowClick', type: 'Record<string, any>' }],
+        notes: 'NgOatTableColumn: { key: string; label: string; width?: string; align?: string; render?: (val, row) => string }',
+        example: `<ng-oat-table [columns]="cols" [data]="rows" [striped]="true" (rowClick)="onRow($event)" />`,
+    },
+    {
+        name: 'NgOatBreadcrumb',
+        selector: 'ng-oat-breadcrumb',
+        import: "import { NgOatBreadcrumb, NgOatBreadcrumbIcon } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Breadcrumb navigation. Supports content-projected icons via NgOatBreadcrumbIcon directive.',
+        inputs: [{ name: 'items', type: 'OatBreadcrumbItem[]', default: 'required' }],
+        outputs: [{ name: 'navigate', type: 'OatBreadcrumbItem' }],
+        contentSlots: ['ng-template[ngOatBreadcrumbIcon] — template context: $implicit = icon string'],
+        notes: 'OatBreadcrumbItem: { label: string; url?: string; icon?: string }',
+        example: `<ng-oat-breadcrumb [items]="crumbs" (navigate)="onNav($event)">\n  <ng-template ngOatBreadcrumbIcon let-iconKey>\n    <lucide-icon [name]="iconKey" [size]="16" />\n  </ng-template>\n</ng-oat-breadcrumb>`,
+    },
+    {
+        name: 'NgOatPagination',
+        selector: 'ng-oat-pagination',
+        import: "import { NgOatPagination } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Page navigation with configurable visible page count.',
+        inputs: [
+            { name: 'totalPages', type: 'number', default: 'required' },
+            { name: 'currentPage', type: 'number', default: '1' },
+            { name: 'maxVisible', type: 'number', default: '5' },
+        ],
+        outputs: [{ name: 'pageChange', type: 'number' }],
+        example: `<ng-oat-pagination [totalPages]="20" [currentPage]="page" (pageChange)="page = $event" />`,
+    },
+    {
+        name: 'NgOatProgress',
+        selector: 'ng-oat-progress',
+        import: "import { NgOatProgress } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Determinate progress bar.',
+        inputs: [
+            { name: 'value', type: 'number', default: 'required' },
+            { name: 'max', type: 'number', default: '100' },
+        ],
+        outputs: [],
+        example: `<ng-oat-progress [value]="65" />`,
+    },
+    {
+        name: 'NgOatMeter',
+        selector: 'ng-oat-meter',
+        import: "import { NgOatMeter } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Meter gauge for scalar measurements with low/high/optimum ranges.',
+        inputs: [
+            { name: 'value', type: 'number', default: 'required' },
+            { name: 'min', type: 'number', default: '0' },
+            { name: 'max', type: 'number', default: '1' },
+            { name: 'low', type: 'number | undefined', default: 'undefined' },
+            { name: 'high', type: 'number | undefined', default: 'undefined' },
+            { name: 'optimum', type: 'number | undefined', default: 'undefined' },
+        ],
+        outputs: [],
+        example: `<ng-oat-meter [value]="0.7" [low]="0.3" [high]="0.8" />`,
+    },
+    {
+        name: 'NgOatSpinner',
+        selector: 'ng-oat-spinner',
+        import: "import { NgOatSpinner } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Loading spinner with optional overlay mode. Has aria-busy="true".',
+        inputs: [
+            { name: 'size', type: "'small' | 'default' | 'large'", default: "'default'" },
+            { name: 'overlay', type: 'boolean', default: 'false' },
+        ],
+        outputs: [],
+        contentSlots: ['default (loading text)'],
+        example: `<ng-oat-spinner size="large" />\n<ng-oat-spinner [overlay]="true">Loading...</ng-oat-spinner>`,
+    },
+    {
+        name: 'NgOatSwitch',
+        selector: 'ng-oat-switch',
+        import: "import { NgOatSwitch } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Toggle switch. Implements FormCheckboxControl for Signal Forms.',
+        inputs: [
+            { name: 'label', type: 'string', default: "''" },
+            { name: 'checked', type: 'boolean', default: 'false', kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [{ name: 'changed', type: 'boolean' }],
+        example: `<ng-oat-switch label="Dark mode" [(checked)]="isDark" />`,
+    },
+    {
+        name: 'NgOatSkeleton',
+        selector: 'ng-oat-skeleton',
+        import: "import { NgOatSkeleton } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Skeleton placeholder for loading states. Line or box type.',
+        inputs: [
+            { name: 'type', type: "'line' | 'box'", default: "'line'" },
+            { name: 'width', type: 'string | undefined', default: 'undefined' },
+        ],
+        outputs: [],
+        example: `<ng-oat-skeleton />\n<ng-oat-skeleton type="box" width="200px" />`,
+    },
+    {
+        name: 'NgOatAvatar',
+        selector: 'ng-oat-avatar',
+        import: "import { NgOatAvatar } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Avatar with image, initials fallback, or placeholder. Auto-generates initials from alt.',
+        inputs: [
+            { name: 'src', type: 'string', default: "''" },
+            { name: 'alt', type: 'string', default: "''" },
+            { name: 'initials', type: 'string', default: "''" },
+            { name: 'fallback', type: 'string', default: "''" },
+            { name: 'size', type: "'sm' | 'default' | 'lg' | 'xl'", default: "'default'" },
+        ],
+        outputs: [],
+        example: `<ng-oat-avatar src="/avatar.jpg" alt="Jane Doe" size="lg" />`,
+    },
+    {
+        name: 'NgOatSeparator',
+        selector: 'ng-oat-separator',
+        import: "import { NgOatSeparator } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Horizontal or vertical divider line, with optional label.',
+        inputs: [
+            { name: 'orientation', type: "'horizontal' | 'vertical'", default: "'horizontal'" },
+            { name: 'label', type: 'string', default: "''" },
+        ],
+        outputs: [],
+        example: `<ng-oat-separator label="OR" />`,
+    },
+    {
+        name: 'NgOatFileUpload',
+        selector: 'ng-oat-file-upload',
+        import: "import { NgOatFileUpload } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Drag-and-drop file upload with click-to-browse fallback.',
+        inputs: [
+            { name: 'accept', type: 'string', default: "''" },
+            { name: 'multiple', type: 'boolean', default: 'false' },
+            { name: 'maxSize', type: 'number', default: '0' },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+            { name: 'label', type: 'string', default: "''" },
+        ],
+        outputs: [{ name: 'filesSelected', type: 'File[]' }],
+        methods: ['openFilePicker()', 'removeFile(index)'],
+        example: `<ng-oat-file-upload accept="image/*" [multiple]="true" [maxSize]="5242880" (filesSelected)="onFiles($event)" />`,
+    },
+    {
+        name: 'NgOatInputOtp',
+        selector: 'ng-oat-input-otp',
+        import: "import { NgOatInputOtp } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'OTP input with configurable length, separator, and mask. Signal Forms compatible.',
+        inputs: [
+            { name: 'length', type: 'number', default: '6' },
+            { name: 'separator', type: 'number', default: '0' },
+            { name: 'mask', type: 'boolean', default: 'false' },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [],
+        methods: ['focus()'],
+        example: `<ng-oat-input-otp [length]="6" [separator]="3" [(value)]="otp" />`,
+    },
+    {
+        name: 'NgOatSearchInput',
+        selector: 'ng-oat-search-input',
+        import: "import { NgOatSearchInput } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Search input with debounce, clear button, and optional keyboard shortcut.',
+        inputs: [
+            { name: 'placeholder', type: 'string', default: "'Search...'" },
+            { name: 'shortcut', type: 'string', default: "''" },
+            { name: 'debounceMs', type: 'number', default: '300' },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [{ name: 'search', type: 'string' }],
+        methods: ['clear()', 'focus()'],
+        example: `<ng-oat-search-input placeholder="Search users..." shortcut="⌘K" (search)="onSearch($event)" />`,
+    },
+    {
+        name: 'NgOatCarousel',
+        selector: 'ng-oat-carousel',
+        import: "import { NgOatCarousel } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Image carousel with autoplay, loop, touch/drag, keyboard support.',
+        inputs: [
+            { name: 'slides', type: 'NgOatCarouselSlide[]', default: '[]' },
+            { name: 'autoplay', type: 'boolean', default: 'false' },
+            { name: 'interval', type: 'number', default: '5000' },
+            { name: 'loop', type: 'boolean', default: 'true' },
+            { name: 'showArrows', type: 'boolean', default: 'true' },
+            { name: 'showDots', type: 'boolean', default: 'true' },
+            { name: 'aspectRatio', type: "'auto' | '16:9' | '4:3' | '1:1'", default: "'auto'" },
+            { name: 'activeIndex', type: 'number', default: '0', kind: 'model' },
+        ],
+        outputs: [{ name: 'slideChange', type: 'number' }],
+        methods: ['next()', 'prev()', 'goTo(index)'],
+        notes: 'NgOatCarouselSlide: { src: string; alt?: string; caption?: string }',
+        example: `<ng-oat-carousel [slides]="slides" [autoplay]="true" aspectRatio="16:9" />`,
+    },
+    {
+        name: 'NgOatCardCarousel',
+        selector: 'ng-oat-card-carousel',
+        import: "import { NgOatCardCarousel } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Horizontal scrollable product card carousel.',
+        inputs: [
+            { name: 'heading', type: 'string', default: "''" },
+            { name: 'ariaLabel', type: 'string', default: "'Product carousel'" },
+            { name: 'items', type: 'NgOatProductCard[]', default: '[]' },
+            { name: 'showSeeAll', type: 'boolean', default: 'false' },
+        ],
+        outputs: [
+            { name: 'seeAllClick', type: 'void' },
+            { name: 'cardClick', type: 'NgOatProductCard' },
+        ],
+        methods: ['scrollNext()', 'scrollPrev()'],
+        notes: 'NgOatProductCard: { title: string; image: string; price?: string; description?: string }',
+        example: `<ng-oat-card-carousel heading="Featured" [items]="products" (cardClick)="onCard($event)" />`,
+    },
+    {
+        name: 'NgOatToolbar',
+        selector: 'ng-oat-toolbar',
+        import: "import { NgOatToolbar, NgOatToolbarRow } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'App toolbar/header bar with color, density, and fixed positioning.',
+        inputs: [
+            { name: 'color', type: "'default' | 'primary' | 'accent'", default: "'default'" },
+            { name: 'dense', type: 'boolean', default: 'false' },
+            { name: 'fixed', type: 'boolean', default: 'true' },
+        ],
+        outputs: [],
+        contentSlots: ['[toolbarStart]', 'default', '[toolbarEnd]', 'ng-oat-toolbar-row (multi-row)'],
+        example: `<ng-oat-toolbar color="primary">\n  <span toolbarStart>My App</span>\n  <ng-oat-button toolbarEnd [icon]="true">☰</ng-oat-button>\n</ng-oat-toolbar>`,
+    },
+    {
+        name: 'NgOatThemeSelector',
+        selector: 'ng-oat-theme-selector',
+        import: "import { NgOatThemeSelector } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Theme switcher (light/dark/system) as dropdown or toggle. Persists to localStorage.',
+        inputs: [
+            { name: 'mode', type: "'dropdown' | 'toggle'", default: "'dropdown'" },
+            { name: 'initialTheme', type: 'NgOatTheme | undefined', default: 'undefined' },
+            { name: 'themes', type: 'NgOatThemeOption[]', default: '[light, dark, system]' },
+        ],
+        outputs: [{ name: 'themeChange', type: "NgOatTheme ('light' | 'dark' | 'system')" }],
+        methods: ['setTheme()', 'pick()', 'toggleOpen()'],
+        example: `<ng-oat-theme-selector mode="toggle" (themeChange)="onTheme($event)" />`,
+    },
+    {
+        name: 'NgOatToggle',
+        selector: 'ng-oat-toggle',
+        import: "import { NgOatToggle } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Toggle button with pressed state. Standalone or inside ToggleGroup.',
+        inputs: [
+            { name: 'variant', type: "'default' | 'outline'", default: "'default'" },
+            { name: 'size', type: "'sm' | 'default' | 'lg'", default: "'default'" },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+            { name: 'toggleValue', type: 'string', default: "''" },
+            { name: 'pressed', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [{ name: 'pressedChange', type: 'boolean' }],
+        contentSlots: ['default (button label)'],
+        example: `<ng-oat-toggle [(pressed)]="isBold">Bold</ng-oat-toggle>`,
+    },
+    {
+        name: 'NgOatToggleGroup',
+        selector: 'ng-oat-toggle-group',
+        import: "import { NgOatToggleGroup } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Group of toggle buttons. Single or multi-select.',
+        inputs: [
+            { name: 'multiple', type: 'boolean', default: 'false' },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+            { name: 'variant', type: "'default' | 'outline'", default: "'default'" },
+            { name: 'size', type: "'sm' | 'default' | 'lg'", default: "'default'" },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+        ],
+        outputs: [],
+        contentSlots: ['ng-oat-toggle children'],
+        example: `<ng-oat-toggle-group [(value)]="align">\n  <ng-oat-toggle toggleValue="left">Left</ng-oat-toggle>\n  <ng-oat-toggle toggleValue="center">Center</ng-oat-toggle>\n</ng-oat-toggle-group>`,
+    },
+    {
+        name: 'NgOatChip',
+        selector: 'ng-oat-chip',
+        import: "import { NgOatChip, NgOatChipGroup, NgOatChipInput } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Chip/tag with variants, selectable and removable modes.',
+        inputs: [
+            { name: 'variant', type: "'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'danger'", default: "'default'" },
+            { name: 'size', type: "'sm' | 'default' | 'lg'", default: "'default'" },
+            { name: 'removable', type: 'boolean', default: 'false' },
+            { name: 'selectable', type: 'boolean', default: 'false' },
+            { name: 'chipValue', type: 'string', default: "''" },
+            { name: 'label', type: 'string', default: "''" },
+            { name: 'selected', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [
+            { name: 'removed', type: 'void' },
+            { name: 'selectedChange', type: 'boolean' },
+        ],
+        contentSlots: ['default (chip text)', '[chipIcon] slot'],
+        example: `<ng-oat-chip variant="success" [removable]="true" (removed)="onRemove()">Tag</ng-oat-chip>`,
+    },
+    {
+        name: 'NgOatChipGroup',
+        selector: 'ng-oat-chip-group',
+        import: "import { NgOatChipGroup } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Group of chips with single/multi selection state.',
+        inputs: [
+            { name: 'multiple', type: 'boolean', default: 'false' },
+            { name: 'ariaLabel', type: 'string', default: "''" },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+        ],
+        outputs: [{ name: 'chipRemoved', type: 'string' }],
+        contentSlots: ['ng-oat-chip children'],
+        example: `<ng-oat-chip-group [(value)]="selected">\n  <ng-oat-chip chipValue="a" [selectable]="true">A</ng-oat-chip>\n  <ng-oat-chip chipValue="b" [selectable]="true">B</ng-oat-chip>\n</ng-oat-chip-group>`,
+    },
+    {
+        name: 'NgOatChipInput',
+        selector: 'ng-oat-chip-input',
+        import: "import { NgOatChipInput } from '@letsprogram/ng-oat';",
+        category: 'component',
+        description: 'Input that creates chips on Enter. Supports max count and duplicate control.',
+        inputs: [
+            { name: 'placeholder', type: 'string', default: "'Add item...'" },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+            { name: 'variant', type: 'NgOatChipVariant', default: "'default'" },
+            { name: 'allowDuplicates', type: 'boolean', default: 'false' },
+            { name: 'maxChips', type: 'number', default: 'Infinity' },
+            { name: 'chips', type: 'string[]', default: '[]', kind: 'model' },
+        ],
+        outputs: [
+            { name: 'chipAdded', type: 'string' },
+            { name: 'chipRemovedEvent', type: 'string' },
+        ],
+        example: `<ng-oat-chip-input [(chips)]="tags" placeholder="Add tag..." [maxChips]="5" />`,
+    },
+    // ─── Directive Wrappers ───
+    {
+        name: 'NgOatDropdownComponent',
+        selector: 'ng-oat-dropdown',
+        import: "import { NgOatDropdownComponent } from '@letsprogram/ng-oat';",
+        category: 'directive-wrapper',
+        description: 'Component wrapper for Oat dropdown. Popover-based with keyboard nav.',
+        inputs: [],
+        outputs: [{ name: 'openChange', type: 'boolean' }],
+        methods: ['open()', 'close()', 'toggle()'],
+        contentSlots: ['[trigger] button', '[role="menuitem"] items'],
+        example: `<ng-oat-dropdown>\n  <button trigger>Menu</button>\n  <button role="menuitem">Option 1</button>\n</ng-oat-dropdown>`,
+    },
+    {
+        name: 'NgOatTooltipComponent',
+        selector: 'ng-oat-tooltip',
+        import: "import { NgOatTooltipComponent } from '@letsprogram/ng-oat';",
+        category: 'directive-wrapper',
+        description: 'Component wrapper for tooltips. Plain text or rich template content.',
+        inputs: [
+            { name: 'text', type: 'string', default: "''" },
+            { name: 'template', type: 'TemplateRef<any> | undefined', default: 'undefined' },
+            { name: 'position', type: "'top' | 'bottom' | 'left' | 'right'", default: "'top'" },
+            { name: 'delay', type: 'number', default: '700' },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+        ],
+        outputs: [],
+        methods: ['show()', 'hide()'],
+        contentSlots: ['default (trigger element)'],
+        example: `<ng-oat-tooltip text="Hello!">\n  <button>Hover me</button>\n</ng-oat-tooltip>`,
+    },
+    {
+        name: 'NgOatSidebarComponent',
+        selector: 'ng-oat-sidebar',
+        import: "import { NgOatSidebarComponent } from '@letsprogram/ng-oat';",
+        category: 'directive-wrapper',
+        description: 'Sidebar layout with fixed or overlay mode.',
+        inputs: [
+            { name: 'mode', type: "'fixed' | 'overlay'", default: "'fixed'" },
+            { name: 'scrollLock', type: 'boolean', default: 'true' },
+            { name: 'initialOpen', type: 'boolean', default: 'false' },
+        ],
+        outputs: [{ name: 'openChange', type: 'boolean' }],
+        methods: ['open()', 'close()', 'toggle()'],
+        contentSlots: ['aside[data-sidebar]', 'main'],
+        example: `<ng-oat-sidebar mode="overlay">\n  <aside data-sidebar>Nav</aside>\n  <main>Content</main>\n</ng-oat-sidebar>`,
+    },
+    {
+        name: 'NgOatTabsComponent',
+        selector: 'ng-oat-tabs',
+        import: "import { NgOatTabsComponent } from '@letsprogram/ng-oat';",
+        category: 'directive-wrapper',
+        description: 'Tabbed interface. Pass tab labels, project panel divs as children.',
+        inputs: [{ name: 'tabs', type: '(string | NgOatTabItem)[]', default: 'required' }],
+        outputs: [{ name: 'tabChange', type: '{ index: number; tab: HTMLElement }' }],
+        methods: ['selectTab(index)'],
+        contentSlots: ['div children (one per tab panel)'],
+        notes: 'NgOatTabItem: { label: string; disabled?: boolean }',
+        example: `<ng-oat-tabs [tabs]="['Tab 1', 'Tab 2']">\n  <div>Content 1</div>\n  <div>Content 2</div>\n</ng-oat-tabs>`,
+    },
+    {
+        name: 'NgOatDialogComponent',
+        selector: 'ng-oat-dialog',
+        import: "import { NgOatDialogComponent } from '@letsprogram/ng-oat';",
+        category: 'directive-wrapper',
+        description: 'Modal dialog wrapping native <dialog>. Header/footer slots.',
+        inputs: [],
+        outputs: [{ name: 'closed', type: 'string' }],
+        methods: ['showModal()', 'show()', 'close(returnValue?)'],
+        contentSlots: ['[header]', 'default (body)', '[footer]'],
+        example: `<ng-oat-dialog #dlg>\n  <h2 header>Title</h2>\n  <p>Content</p>\n  <div footer><ng-oat-button (clicked)="dlg.close()">Close</ng-oat-button></div>\n</ng-oat-dialog>`,
+    },
+    // ─── Signal Forms Fields ───
+    {
+        name: 'NgOatInput',
+        selector: 'ng-oat-input',
+        import: "import { NgOatInput } from '@letsprogram/ng-oat';",
+        category: 'form',
+        description: 'Text input field for Signal Forms. Supports many HTML input types.',
+        inputs: [
+            { name: 'label', type: 'string', default: "''" },
+            {
+                name: 'type',
+                type: "'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color'",
+                default: "'text'",
+            },
+            { name: 'placeholder', type: 'string', default: "''" },
+            { name: 'readonly', type: 'boolean', default: 'false' },
+            { name: 'required', type: 'boolean', default: 'false' },
+            { name: 'invalid', type: 'boolean', default: 'false' },
+            { name: 'showErrors', type: 'boolean', default: 'true' },
+            { name: 'min', type: 'number | undefined', default: 'undefined' },
+            { name: 'max', type: 'number | undefined', default: 'undefined' },
+            { name: 'minLength', type: 'number | undefined', default: 'undefined' },
+            { name: 'maxLength', type: 'number | undefined', default: 'undefined' },
+            { name: 'autocomplete', type: 'string | undefined', default: 'undefined' },
+            { name: 'errors', type: 'ValidationError[]', default: '[]' },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+            { name: 'touched', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [],
+        methods: ['focus()'],
+        example: `<ng-oat-input label="Email" type="email" placeholder="you@example.com" [(value)]="email" [required]="true" />`,
+    },
+    {
+        name: 'NgOatTextarea',
+        selector: 'ng-oat-textarea',
+        import: "import { NgOatTextarea } from '@letsprogram/ng-oat';",
+        category: 'form',
+        description: 'Multi-line text input for Signal Forms.',
+        inputs: [
+            { name: 'label', type: 'string', default: "''" },
+            { name: 'placeholder', type: 'string', default: "''" },
+            { name: 'rows', type: 'number', default: '4' },
+            { name: 'readonly', type: 'boolean', default: 'false' },
+            { name: 'required', type: 'boolean', default: 'false' },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [],
+        methods: ['focus()'],
+        example: `<ng-oat-textarea label="Bio" [rows]="6" [(value)]="bio" />`,
+    },
+    {
+        name: 'NgOatSelect',
+        selector: 'ng-oat-select',
+        import: "import { NgOatSelect } from '@letsprogram/ng-oat';",
+        category: 'form',
+        description: 'Dropdown select for Signal Forms.',
+        inputs: [
+            { name: 'label', type: 'string', default: "''" },
+            { name: 'placeholder', type: 'string', default: "''" },
+            { name: 'options', type: 'NgOatSelectOption[]', default: 'required' },
+            { name: 'required', type: 'boolean', default: 'false' },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [],
+        methods: ['focus()'],
+        notes: 'NgOatSelectOption: { label: string; value: string; disabled?: boolean }',
+        example: `<ng-oat-select label="Country" [options]="countries" [(value)]="country" />`,
+    },
+    {
+        name: 'NgOatCheckbox',
+        selector: 'ng-oat-checkbox',
+        import: "import { NgOatCheckbox } from '@letsprogram/ng-oat';",
+        category: 'form',
+        description: 'Checkbox for Signal Forms. Implements FormCheckboxControl.',
+        inputs: [
+            { name: 'label', type: 'string', default: "''" },
+            { name: 'checked', type: 'boolean', default: 'false', kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [],
+        example: `<ng-oat-checkbox label="Accept terms" [(checked)]="accepted" />`,
+    },
+    {
+        name: 'NgOatRadioGroup',
+        selector: 'ng-oat-radio-group',
+        import: "import { NgOatRadioGroup } from '@letsprogram/ng-oat';",
+        category: 'form',
+        description: 'Radio group for Signal Forms. Renders fieldset/legend when label provided.',
+        inputs: [
+            { name: 'label', type: 'string', default: "''" },
+            { name: 'options', type: 'NgOatRadioOption[]', default: 'required' },
+            { name: 'required', type: 'boolean', default: 'false' },
+            { name: 'value', type: 'string', default: "''", kind: 'model' },
+            { name: 'disabled', type: 'boolean', default: 'false', kind: 'model' },
+        ],
+        outputs: [],
+        notes: 'NgOatRadioOption: { label: string; value: string; disabled?: boolean }',
+        example: `<ng-oat-radio-group label="Plan" [options]="plans" [(value)]="plan" />`,
+    },
+    {
+        name: 'NgOatFormError',
+        selector: 'ng-oat-form-error',
+        import: "import { NgOatFormError } from '@letsprogram/ng-oat';",
+        category: 'form',
+        description: 'Displays validation errors. Use control input for Signal Forms, or errors+show for Reactive Forms.',
+        inputs: [
+            { name: 'control', type: 'FieldState<unknown> | undefined', default: 'undefined' },
+            { name: 'errors', type: 'string[]', default: '[]' },
+            { name: 'show', type: 'boolean', default: 'false' },
+        ],
+        outputs: [],
+        example: `<ng-oat-form-error [control]="form.controls.email" />`,
+    },
+];
+/**
+ * Fuzzy-match a component by name or selector.
+ */
+export function findComponent(query) {
+    const q = query.toLowerCase().replace(/[-_\s]/g, '');
+    return COMPONENTS.filter((c) => {
+        const name = c.name.toLowerCase().replace(/[-_\s]/g, '');
+        const sel = c.selector.toLowerCase().replace(/[-_\s]/g, '');
+        return name.includes(q) || sel.includes(q) || c.description.toLowerCase().includes(query.toLowerCase());
+    });
+}
+//# sourceMappingURL=components.js.map