lucent-ui 0.21.0 → 0.22.0

package/dist-server/src/components/atoms/Chip/Chip.manifest.js

@@ -10,26 +10,38 @@ export const COMPONENT_MANIFEST = {
         'Use `onDismiss` for removable chips (filters, multi-select values). ' +
         'Use `onClick` for clickable/selectable chips (filter toggles, category navigation). ' +
         'Use `dot` for status indicators (online/offline). ' +
+        'Use `dot` + `pulse` to show in-progress or live states (deploying, syncing, live incident). ' +
+        'Use `ghost` + `dot` for subtle inline status that blends into surrounding text or table rows. ' +
+        'Omit `children` with `dot` for a minimal dot-only indicator — great for table cells or avatar badges. ' +
         'Use `swatch` for color-coded categories. ' +
         'Use `leftIcon` for chips with leading icons (folders, file types, flags). ' +
         'Use `borderless` for a softer, filled-only appearance in dense UIs. ' +
         'Variant conveys semantic meaning — default to neutral for user-generated content.',
     props: [
-        { name: 'children', type: 'ReactNode', required: true, description: 'Chip label content.' },
+        { name: 'children', type: 'ReactNode', required: false, description: 'Chip label content. When omitted with dot=true, renders as a compact dot-only indicator.' },
         { name: 'variant', type: 'enum', required: false, default: 'neutral', description: 'Colour scheme conveying semantic meaning.', enumValues: ['neutral', 'accent', 'success', 'warning', 'danger', 'info'] },
         { name: 'size', type: 'enum', required: false, default: 'md', description: 'Controls height, font size, and icon size.', enumValues: ['sm', 'md', 'lg'] },
         { name: 'onDismiss', type: 'function', required: false, description: 'Renders an x button that calls this handler. Use for removable filters and multi-select values.' },
         { name: 'onClick', type: 'function', required: false, description: 'Makes the chip clickable (renders as <button>). Use for filter toggles and category links.' },
         { name: 'leftIcon', type: 'ReactNode', required: false, description: 'Icon or element rendered before the label (emoji, flag, avatar).' },
         { name: 'swatch', type: 'string', required: false, description: 'Hex color string. Renders a small color dot before the label.' },
-        { name: 'dot', type: 'boolean', required: false, default: 'false', description: 'Renders a status dot using the variant colour. Use for online/offline indicators.' },
+        { name: 'dot', type: 'boolean', required: false, default: 'false', description: 'Renders a status dot using the variant colour. Omit children for a compact dot-only indicator.' },
+        { name: 'pulse', type: 'boolean', required: false, default: 'false', description: 'Adds a pulsing ring animation to the status dot. Only applies when dot=true. Use for running, deploying, or live states.' },
         { name: 'borderless', type: 'boolean', required: false, default: 'false', description: 'Removes the border for a filled-only look.' },
+        { name: 'ghost', type: 'boolean', required: false, default: 'false', description: 'Transparent background with text color only. Pairs well with dot for subtle inline statuses in tables or lists.' },
         { name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Dims the chip and prevents interaction.' },
         { name: 'style', type: 'object', required: false, description: 'Inline style overrides.' },
     ],
     usageExamples: [
+        // Status indicators — subtle ways to show state
+        { title: 'Status dot', code: `<Chip variant="success" dot>Online</Chip>` },
+        { title: 'Pulsing status (in-progress)', code: `<Chip variant="warning" dot pulse>Deploying</Chip>` },
+        { title: 'Ghost status (inline/table)', code: `<Chip variant="success" ghost dot>Active</Chip>` },
+        { title: 'Ghost pulsing', code: `<Chip variant="danger" ghost dot pulse>Live incident</Chip>` },
+        { title: 'Dot only (minimal)', code: `<Chip variant="success" dot />` },
+        { title: 'Dot only pulsing', code: `<Chip variant="danger" dot pulse />` },
+        // Filters, tags, and categories
         { title: 'Dismissible filter', code: `<Chip onDismiss={() => removeFilter('react')}>React</Chip>` },
-        { title: 'Status with dot', code: `<Chip variant="success" dot>Online</Chip>` },
         { title: 'Color swatch', code: `<Chip swatch="#6366f1" onDismiss={() => {}}>Indigo</Chip>` },
         { title: 'With icon', code: `<Chip leftIcon={<FolderIcon />} onDismiss={() => {}}>Documents</Chip>` },
         { title: 'Clickable category', code: `<Chip variant="accent" onClick={() => navigate('/ux')}>UX</Chip>` },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -25,18 +25,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",
@@ -51,7 +39,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"
@@ -73,5 +60,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/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);
-        });
-    }
-});