lucent-ui 0.29.0 → 0.31.0

package/dist-server/src/manifest/patterns/search-filter-bar.pattern.js

@@ -0,0 +1,122 @@
+export const PATTERN = {
+    id: 'search-filter-bar',
+    name: 'Search / Filter Bar',
+    description: 'Compact toolbar of filter molecules — FilterSearch, FilterSelect, FilterMultiSelect, FilterDateRange — with sort control and view toggle. Designed to sit above a DataTable or list.',
+    category: 'dashboard',
+    components: ['filter-search', 'filter-select', 'filter-multi-select', 'filter-date-range', 'segmented-control', 'row', 'text', 'button'],
+    structure: `
+Row gap="2" align="center" wrap
+├── FilterSearch                            ← icon button, expands to Input
+├── FilterSelect (label="Availability")     ← single-select dropdown
+├── FilterMultiSelect (label="Status")      ← multi-select, stays open, count badge
+├── FilterMultiSelect (label="Tags")        ← multi-select with swatch chips
+├── FilterDateRange (label="Date range")    ← button trigger → calendar popover
+├── Text + Button (ghost, "Clear all")      ← conditional result count row
+├── flex spacer
+└── Row gap="2" align="center"
+    ├── FilterSelect (icon=sort, "Newest")  ← sort control
+    └── SegmentedControl (grid/list icons)  ← view toggle
+  `.trim(),
+    code: `const [search, setSearch] = useState('');
+const [statuses, setStatuses] = useState<string[]>([]);
+const [tags, setTags] = useState<string[]>([]);
+const [dateRange, setDateRange] = useState<DateRange | undefined>();
+
+const hasFilters = statuses.length > 0 || tags.length > 0 || dateRange !== undefined;
+const clearAll = () => { setStatuses([]); setTags([]); setDateRange(undefined); setSearch(''); };
+
+<Row gap="2" align="center" wrap>
+  <FilterSearch placeholder="Search…" value={search} onChange={setSearch} />
+
+  <FilterSelect label="Availability" options={[
+    { value: 'available', label: 'Available' },
+    { value: 'notice', label: 'On notice' },
+    { value: 'unavailable', label: 'Unavailable' },
+  ]} />
+
+  <FilterMultiSelect label="Status" options={[
+    { value: 'active', label: 'Active' },
+    { value: 'archived', label: 'Archived' },
+    { value: 'on-hold', label: 'On hold' },
+  ]} value={statuses} onChange={setStatuses} />
+
+  <FilterMultiSelect label="Tags" options={[
+    { value: 'react', label: 'React', swatch: '#3b82f6' },
+    { value: 'devops', label: 'DevOps', swatch: '#10b981' },
+    { value: 'data', label: 'Data Science', swatch: '#6366f1' },
+  ]} value={tags} onChange={setTags} />
+
+  <FilterDateRange label="Date range" value={dateRange} onChange={setDateRange} />
+
+  <div style={{ flex: 1 }} />
+
+  <Row gap="2" align="center">
+    <FilterSelect label="Newest first" icon={<SortIcon />} options={[
+      { value: 'newest', label: 'Newest first' },
+      { value: 'oldest', label: 'Oldest first' },
+      { value: 'name', label: 'Name A–Z' },
+    ]} />
+    <SegmentedControl size="sm" defaultValue="grid" options={[
+      { value: 'grid', label: <GridIcon /> },
+      { value: 'list', label: <ListIcon /> },
+    ]} />
+  </Row>
+</Row>
+
+{/* Result count between filter bar and DataTable */}
+{hasFilters && (
+  <Row gap="2" align="center">
+    <Text size="sm" color="secondary">
+      Showing {filteredRows.length} of {allRows.length} candidates
+    </Text>
+    <Button variant="ghost" size="xs" onClick={clearAll}>Clear all</Button>
+  </Row>
+)}`,
+    variants: [
+        {
+            title: 'Minimal — search + sort only',
+            code: `<Row gap="2" align="center">
+  <FilterSearch placeholder="Search…" />
+  <div style={{ flex: 1 }} />
+  <FilterSelect label="Newest first" icon={<SortIcon />} options={sortOptions} />
+</Row>`,
+        },
+        {
+            title: 'With DataTable',
+            code: `const [search, setSearch] = useState('');
+const [statuses, setStatuses] = useState<string[]>([]);
+
+const filtered = candidates.filter(c => {
+  if (search && !c.name.toLowerCase().includes(search.toLowerCase())) return false;
+  if (statuses.length > 0 && !statuses.includes(c.status.toLowerCase())) return false;
+  return true;
+});
+
+<Stack gap="3">
+  <Row gap="2" align="center" wrap>
+    <FilterSearch placeholder="Search…" value={search} onChange={setSearch} />
+    <FilterMultiSelect label="Status" options={statusOptions}
+      value={statuses} onChange={setStatuses} />
+  </Row>
+  {statuses.length > 0 && (
+    <Row gap="2" align="center">
+      <Text size="sm" color="secondary">
+        Showing {filtered.length} of {candidates.length}
+      </Text>
+      <Button variant="ghost" size="xs" onClick={() => setStatuses([])}>Clear all</Button>
+    </Row>
+  )}
+  <DataTable columns={columns} rows={filtered} pageSize={5} />
+</Stack>`,
+        },
+    ],
+    designNotes: 'Four dedicated filter molecules replace the previous boilerplate of manually wiring Menu open state, ' +
+        'keepOpen hacks, count badges, and clear footers. FilterSearch collapses to a square icon-only button ' +
+        'and expands on click. FilterSelect wraps Menu for single-select with a "Clear" footer. ' +
+        'FilterMultiSelect builds its own portal dropdown (not Menu) so items toggle without closing — ' +
+        'it renders Checkbox + optional Chip (with swatch) per option and an always-visible "Clear all" footer. ' +
+        'FilterDateRange wraps DateRangePicker with the trigger prop to render a secondary Button. ' +
+        'A flex spacer pushes sort and view controls to the right edge. ' +
+        'Between the filter bar and DataTable, a conditional result count row shows ' +
+        '"Showing X of Y" with a ghost "Clear all" button when filters are active.',
+};

package/dist-server/src/manifest/{recipes/settings-panel.recipe.js → patterns/settings-panel.pattern.js}

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     id: 'settings-panel',
     name: 'Settings Panel',
     description: 'Settings card with section header, toggle rows with descriptions, select dropdown, and action buttons.',

package/dist-server/src/manifest/{recipes/stats-row.recipe.js → patterns/stats-row.pattern.js}

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     id: 'stats-row',
     name: 'Stats Row',
     description: 'Row of individual stat cards with label, large display-font value, and trend chip with comparison.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -30,18 +30,6 @@
     "dist-server",
     "dist-cli"
   ],
-  "scripts": {
-    "dev": "vite --config vite.dev.config.ts",
-    "build": "vite build",
-    "build:server": "tsc -p server/tsconfig.json",
-    "build:cli": "tsc -p cli/tsconfig.json && cp cli/template.manifest.json dist-cli/cli/template.manifest.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "tsc --noEmit && pnpm build && pnpm build:server && pnpm build:cli",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "pnpm prepublishOnly && changeset publish"
-  },
   "keywords": [
     "react",
     "component-library",
@@ -56,7 +44,6 @@
   },
   "author": "Rozina Szogyenyi",
   "license": "MIT",
-  "packageManager": "pnpm@10.30.3",
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -78,5 +65,16 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.27.1",
     "zod": "^4.3.6"
+  },
+  "scripts": {
+    "dev": "vite --config vite.dev.config.ts",
+    "build": "vite build",
+    "build:server": "tsc -p server/tsconfig.json",
+    "build:cli": "tsc -p cli/tsconfig.json && cp cli/template.manifest.json dist-cli/cli/template.manifest.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "pnpm prepublishOnly && changeset publish"
   }
-}
+}

package/dist-server/server/recipe-registry.js

@@ -1,18 +0,0 @@
-import { RECIPE as ProfileCard } from '../src/manifest/recipes/profile-card.recipe.js';
-import { RECIPE as SettingsPanel } from '../src/manifest/recipes/settings-panel.recipe.js';
-import { RECIPE as StatsRow } from '../src/manifest/recipes/stats-row.recipe.js';
-import { RECIPE as ActionBar } from '../src/manifest/recipes/action-bar.recipe.js';
-import { RECIPE as FormLayout } from '../src/manifest/recipes/form-layout.recipe.js';
-import { RECIPE as EmptyStateCard } from '../src/manifest/recipes/empty-state-card.recipe.js';
-import { RECIPE as CollapsibleCard } from '../src/manifest/recipes/collapsible-card.recipe.js';
-import { RECIPE as SearchFilterBar } from '../src/manifest/recipes/search-filter-bar.recipe.js';
-export const ALL_RECIPES = [
-    ProfileCard,
-    SettingsPanel,
-    StatsRow,
-    ActionBar,
-    FormLayout,
-    EmptyStateCard,
-    CollapsibleCard,
-    SearchFilterBar,
-];

package/dist-server/src/manifest/recipes/index.js

@@ -1,8 +0,0 @@
-export { RECIPE as ProfileCard } from './profile-card.recipe.js';
-export { RECIPE as SettingsPanel } from './settings-panel.recipe.js';
-export { RECIPE as StatsRow } from './stats-row.recipe.js';
-export { RECIPE as ActionBar } from './action-bar.recipe.js';
-export { RECIPE as FormLayout } from './form-layout.recipe.js';
-export { RECIPE as EmptyStateCard } from './empty-state-card.recipe.js';
-export { RECIPE as CollapsibleCard } from './collapsible-card.recipe.js';
-export { RECIPE as SearchFilterBar } from './search-filter-bar.recipe.js';

package/dist-server/src/manifest/recipes/search-filter-bar.recipe.js

@@ -1,197 +0,0 @@
-export const RECIPE = {
-    id: 'search-filter-bar',
-    name: 'Search / Filter Bar',
-    description: 'Compact toolbar of secondary filter buttons with Menu popovers, collapsible search, multi-select tags, date range picker, sort control, and view toggle. Designed to sit above a DataTable or list.',
-    category: 'dashboard',
-    components: ['button', 'menu', 'chip', 'checkbox', 'date-range-picker', 'segmented-control', 'input', 'row'],
-    structure: `
-Row gap="2" align="center" wrap
-├── Button (secondary, icon-only, search)  ← expands to Input on click
-├── Menu                                   ← single-select filter
-│   ├── trigger: Button (secondary, chevron, "Availability")
-│   └── MenuItem[] (selected marks active)
-├── Menu                                   ← multi-select status filter
-│   ├── trigger: Button (secondary, chevron, "Status" + Chip count)
-│   └── MenuItem[] (controlled open, stays open on toggle)
-├── Menu                                   ← multi-select tags with chips
-│   ├── trigger: Button (secondary, chevron, "Tags" + Chip count)
-│   └── MenuItem[] > Row > Checkbox + Chip (swatch)
-├── DateRangePicker                        ← trigger prop renders Button
-│   └── trigger: Button (secondary, chevron, "Date range")
-├── Button (ghost, "Clear all")            ← conditional, shown when filters active
-├── flex spacer                            ← pushes sort/view to right
-└── Row gap="2" align="center"             ← sort + view toggle
-    ├── Menu
-    │   ├── trigger: Button (secondary, chevron, leftIcon=sort, "Newest first")
-    │   └── MenuItem[] (selected marks active sort)
-    └── SegmentedControl (sm, grid/list icons)
-  `.trim(),
-    code: `const [searchOpen, setSearchOpen] = useState(false);
-const [statuses, setStatuses] = useState<Set<string>>(new Set());
-const [statusOpen, setStatusOpen] = useState(false);
-const [tags, setTags] = useState<Set<string>>(new Set());
-const [tagsOpen, setTagsOpen] = useState(false);
-const [dateRange, setDateRange] = useState<DateRange | undefined>();
-
-const toggleStatus = (s: string) => setStatuses(prev => {
-  if (s === 'all') return new Set();
-  const next = new Set(prev);
-  if (next.has(s)) next.delete(s); else next.add(s);
-  return next;
-});
-const toggleTag = (t: string) => setTags(prev => {
-  const next = new Set(prev);
-  if (next.has(t)) next.delete(t); else next.add(t);
-  return next;
-});
-const hasFilters = statuses.size > 0 || tags.size > 0 || dateRange !== undefined;
-const clearAll = () => { setStatuses(new Set()); setTags(new Set()); setDateRange(undefined); };
-
-<Row gap="2" align="center" wrap>
-  {/* Collapsible search */}
-  {searchOpen ? (
-    <Input placeholder="Search…" size="sm" style={{ width: 260 }} autoFocus
-      onBlur={(e) => { if (!e.target.value) setSearchOpen(false); }} />
-  ) : (
-    <Button variant="secondary" size="sm" aria-label="Search"
-      leftIcon={<SearchIcon />} />
-  )}
-
-  {/* Single-select filter */}
-  <Menu trigger={<Button variant="secondary" size="sm" chevron>Availability</Button>} size="sm">
-    <MenuItem selected onSelect={() => {}}>All</MenuItem>
-    <MenuItem onSelect={() => {}}>Available</MenuItem>
-    <MenuItem onSelect={() => {}}>On notice</MenuItem>
-    <MenuItem onSelect={() => {}}>Unavailable</MenuItem>
-  </Menu>
-
-  {/* Multi-select status */}
-  <Menu trigger={
-    <Button variant="secondary" size="sm" chevron>
-      Status{statuses.size > 0 && <Chip variant="accent" size="sm">{statuses.size}</Chip>}
-    </Button>
-  } size="sm" open={statusOpen} onOpenChange={setStatusOpen}>
-    <MenuItem selected={statuses.size === 0}
-      onSelect={() => { toggleStatus('all'); setStatusOpen(true); }}>All</MenuItem>
-    <MenuSeparator />
-    <MenuItem selected={statuses.has('active')}
-      onSelect={() => { toggleStatus('active'); setStatusOpen(true); }}>Active</MenuItem>
-    <MenuItem selected={statuses.has('archived')}
-      onSelect={() => { toggleStatus('archived'); setStatusOpen(true); }}>Archived</MenuItem>
-    <MenuItem selected={statuses.has('on-hold')}
-      onSelect={() => { toggleStatus('on-hold'); setStatusOpen(true); }}>On hold</MenuItem>
-  </Menu>
-
-  {/* Multi-select tags with checkbox + chip */}
-  <Menu trigger={
-    <Button variant="secondary" size="sm" chevron>
-      Tags{tags.size > 0 && <Chip variant="accent" size="sm">{tags.size}</Chip>}
-    </Button>
-  } size="sm" open={tagsOpen} onOpenChange={setTagsOpen}>
-    <MenuItem onSelect={() => { toggleTag('data-science'); setTagsOpen(true); }}>
-      <Row gap="2" align="center">
-        <Checkbox checked={tags.has('data-science')} onChange={() => {}} />
-        <Chip size="sm" swatch="#6366f1">Data Science</Chip>
-      </Row>
-    </MenuItem>
-    <MenuItem onSelect={() => { toggleTag('devops'); setTagsOpen(true); }}>
-      <Row gap="2" align="center">
-        <Checkbox checked={tags.has('devops')} onChange={() => {}} />
-        <Chip size="sm" swatch="#10b981">DevOps</Chip>
-      </Row>
-    </MenuItem>
-  </Menu>
-
-  {/* Date range with button trigger */}
-  <DateRangePicker placeholder="Date range" size="sm"
-    value={dateRange} onChange={setDateRange}
-    trigger={<Button variant="secondary" size="sm" chevron>
-      {dateRange ? formatRange(dateRange) : 'Date range'}
-    </Button>} />
-
-  {/* Clear all (conditional) */}
-  {hasFilters && <Button variant="ghost" size="sm" onClick={clearAll}>Clear all</Button>}
-
-  {/* Spacer */}
-  <div style={{ flex: 1 }} />
-
-  {/* Sort + view toggle */}
-  <Row gap="2" align="center">
-    <Menu trigger={
-      <Button variant="secondary" size="sm" chevron leftIcon={<SortIcon />}>
-        Newest first
-      </Button>
-    } size="sm">
-      <MenuItem selected onSelect={() => {}}>Newest first</MenuItem>
-      <MenuItem onSelect={() => {}}>Oldest first</MenuItem>
-      <MenuItem onSelect={() => {}}>Name A–Z</MenuItem>
-    </Menu>
-    <SegmentedControl size="sm" defaultValue="grid" options={[
-      { value: 'grid', label: <GridIcon /> },
-      { value: 'list', label: <ListIcon /> },
-    ]} />
-  </Row>
-</Row>`,
-    variants: [
-        {
-            title: 'Minimal — search + sort only',
-            code: `<Row gap="2" align="center">
-  <Button variant="secondary" size="sm" aria-label="Search" leftIcon={<SearchIcon />} />
-  <div style={{ flex: 1 }} />
-  <Menu trigger={
-    <Button variant="secondary" size="sm" chevron leftIcon={<SortIcon />}>
-      Newest first
-    </Button>
-  } size="sm">
-    <MenuItem selected onSelect={() => {}}>Newest first</MenuItem>
-    <MenuItem onSelect={() => {}}>Oldest first</MenuItem>
-    <MenuItem onSelect={() => {}}>Name A–Z</MenuItem>
-  </Menu>
-</Row>`,
-        },
-        {
-            title: 'Pipeline — multi-select filters only',
-            code: `<Row gap="2" align="center" wrap>
-  <Menu trigger={
-    <Button variant="secondary" size="sm" chevron>
-      Opportunity{selectedOpp.size > 0 && <Chip variant="accent" size="sm">{selectedOpp.size}</Chip>}
-    </Button>
-  } size="sm" open={oppOpen} onOpenChange={setOppOpen}>
-    <MenuItem selected={selectedOpp.size === 0}
-      onSelect={() => { clearOpp(); setOppOpen(true); }}>All</MenuItem>
-    <MenuSeparator />
-    {opportunities.map(o => (
-      <MenuItem key={o} selected={selectedOpp.has(o)}
-        onSelect={() => { toggleOpp(o); setOppOpen(true); }}>{o}</MenuItem>
-    ))}
-  </Menu>
-  <Menu trigger={
-    <Button variant="secondary" size="sm" chevron>
-      Stage{selectedStage.size > 0 && <Chip variant="accent" size="sm">{selectedStage.size}</Chip>}
-    </Button>
-  } size="sm" open={stageOpen} onOpenChange={setStageOpen}>
-    <MenuItem selected={selectedStage.size === 0}
-      onSelect={() => { clearStage(); setStageOpen(true); }}>All</MenuItem>
-    <MenuSeparator />
-    {stages.map(s => (
-      <MenuItem key={s} selected={selectedStage.has(s)}
-        onSelect={() => { toggleStage(s); setStageOpen(true); }}>{s}</MenuItem>
-    ))}
-  </Menu>
-  {hasFilters && <Button variant="ghost" size="sm" onClick={clearAll}>Clear all</Button>}
-</Row>`,
-        },
-    ],
-    designNotes: 'All filters use secondary buttons with chevron to create a uniform, compact toolbar. ' +
-        'No visible input fields or select dropdowns — everything opens as a popover from the button trigger. ' +
-        'Search starts as a square icon-only button (leftIcon with no children) and expands to an Input on click, ' +
-        'collapsing back when blurred empty. Multi-select menus use controlled open state (open + onOpenChange) ' +
-        'and re-set open=true in onSelect handlers so the menu stays open while toggling items. ' +
-        'Active filter count is shown as an accent Chip inside the button label, not parenthesized text. ' +
-        'Tags menu items combine Checkbox + Chip (with swatch colors) in a Row for rich multi-select visuals. ' +
-        'DateRangePicker uses the trigger prop to render a Button instead of its default input-style trigger. ' +
-        'A ghost "Clear all" button appears conditionally when any filter is active. ' +
-        'A flex spacer pushes sort and view controls to the right edge. ' +
-        'Sort button uses leftIcon for the sort icon. ' +
-        'SegmentedControl with icon-only options (grid/list SVGs via label: ReactNode) provides view toggling.',
-};

package/dist-server/src/manifest/validate.test.js

@@ -1,28 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { validateManifest } from './validate.js';
-// Auto-discover all component manifests
-const manifestModules = import.meta.glob('../components/**/*.manifest.ts', { eager: true });
-const manifests = Object.entries(manifestModules).map(([path, mod]) => {
-    const m = mod;
-    const manifest = m['COMPONENT_MANIFEST'];
-    return { path, manifest };
-});
-describe('Component manifests', () => {
-    test('at least one manifest was discovered', () => {
-        expect(manifests.length).toBeGreaterThan(0);
-    });
-    for (const { path, manifest } of manifests) {
-        const label = path.replace('../components/', '').replace('.manifest.ts', '');
-        test(`${label} — exports COMPONENT_MANIFEST`, () => {
-            expect(manifest).toBeDefined();
-        });
-        test(`${label} — passes schema validation`, () => {
-            const result = validateManifest(manifest);
-            if (!result.valid) {
-                const messages = result.errors.map(e => `  ${e.field}: ${e.message}`).join('\n');
-                throw new Error(`Invalid manifest:\n${messages}`);
-            }
-            expect(result.valid).toBe(true);
-        });
-    }
-});