lucent-ui 0.9.1 → 0.10.0

package/dist-cli/cli/entry.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+/**
+ * lucent-ui CLI
+ *
+ * Usage:
+ *   npx lucent-ui init       — Interactive preset setup
+ *   npx lucent-ui manifest   — Alias for lucent-manifest (see lucent-manifest --help)
+ */
+const command = process.argv[2];
+switch (command) {
+    case 'init': {
+        const { runInit } = await import('./init/index.js');
+        await runInit();
+        break;
+    }
+    case 'manifest': {
+        // Delegate to the existing manifest CLI by re-running it
+        await import('./index.js');
+        break;
+    }
+    default:
+        console.log('lucent-ui — CLI tools for Lucent UI\n');
+        console.log('Commands:');
+        console.log('  init       Interactive design preset setup');
+        console.log('  manifest   Generate component manifests from Figma\n');
+        console.log('Usage: npx lucent-ui <command>');
+        if (command) {
+            console.error(`\nUnknown command: "${command}"`);
+            process.exit(1);
+        }
+}
+export {};

package/dist-cli/cli/init/index.js

@@ -0,0 +1,115 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { choose, close } from './prompts.js';
+const PALETTES = [
+    { label: 'Default', value: 'default', description: 'Monochrome — neutral grays, near-black accent' },
+    { label: 'Brand', value: 'brand', description: 'Gold accent with warm cream-tinted grays' },
+    { label: 'Indigo', value: 'indigo', description: 'Violet-indigo accent (#6366f1) with cool-tinted grays' },
+    { label: 'Emerald', value: 'emerald', description: 'Green accent (#10b981) with cool green-tinted grays' },
+    { label: 'Rose', value: 'rose', description: 'Pink-rose accent (#f43f5e) with warm-tinted grays' },
+    { label: 'Ocean', value: 'ocean', description: 'Sky-blue accent (#0ea5e9) with cool blue-tinted grays' },
+];
+const SHAPES = [
+    { label: 'Sharp', value: 'sharp', description: 'Minimal border radius — enterprise / professional' },
+    { label: 'Rounded', value: 'rounded', description: 'Balanced border radius (default)' },
+    { label: 'Pill', value: 'pill', description: 'Large border radius — playful / modern' },
+];
+const DENSITIES = [
+    { label: 'Compact', value: 'compact', description: 'Tighter spacing — data-dense UIs' },
+    { label: 'Default', value: 'default', description: 'Balanced spacing' },
+    { label: 'Spacious', value: 'spacious', description: 'More breathing room — marketing / consumer' },
+];
+const SHADOWS = [
+    { label: 'Flat', value: 'flat', description: 'No shadows — minimalist, flat design' },
+    { label: 'Subtle', value: 'subtle', description: 'Light shadows (default)' },
+    { label: 'Elevated', value: 'elevated', description: 'Pronounced shadows — material / depth' },
+];
+const COMBINED = [
+    { label: 'Modern', value: 'modern', description: 'Indigo + rounded + default spacing + subtle shadows' },
+    { label: 'Enterprise', value: 'enterprise', description: 'Monochrome + sharp + compact + flat shadows' },
+    { label: 'Playful', value: 'playful', description: 'Rose + pill + spacious + elevated shadows' },
+    { label: 'Custom', value: 'custom', description: 'Mix and match each dimension yourself' },
+];
+function isDefaultConfig(config) {
+    return config.palette === 'default' && config.shape === 'rounded' &&
+        config.density === 'default' && config.shadow === 'subtle';
+}
+function generateConfigFile(config) {
+    const lines = [
+        `import type { PresetProp } from 'lucent-ui';`,
+        '',
+        `export const preset: PresetProp = {`,
+        `  palette: '${config.palette}',`,
+        `  shape: '${config.shape}',`,
+        `  density: '${config.density}',`,
+        `  shadow: '${config.shadow}',`,
+        `};`,
+        '',
+    ];
+    return lines.join('\n');
+}
+function generateCombinedConfigFile(presetName) {
+    const lines = [
+        `import type { PresetProp } from 'lucent-ui';`,
+        '',
+        `export const preset: PresetProp = '${presetName}';`,
+        '',
+    ];
+    return lines.join('\n');
+}
+function printSnippet() {
+    console.log(`
+Add this to your app entry point:
+
+  import { LucentProvider } from 'lucent-ui';
+  import { preset } from './lucent.config';
+
+  function App() {
+    return (
+      <LucentProvider preset={preset}>
+        {/* your app */}
+      </LucentProvider>
+    );
+  }
+`);
+}
+const COMBINED_PRESETS = {
+    modern: { palette: 'indigo', shape: 'rounded', density: 'default', shadow: 'subtle' },
+    enterprise: { palette: 'default', shape: 'sharp', density: 'compact', shadow: 'flat' },
+    playful: { palette: 'rose', shape: 'pill', density: 'spacious', shadow: 'elevated' },
+};
+export async function runInit() {
+    console.log('\n  Lucent UI — Design Preset Setup\n');
+    const mode = await choose('How would you like to configure your design?', COMBINED);
+    let configContent;
+    if (mode !== 'custom') {
+        configContent = generateCombinedConfigFile(mode);
+        const details = COMBINED_PRESETS[mode];
+        if (details) {
+            console.log(`\n  Preset "${mode}":`);
+            console.log(`    Palette:  ${details.palette}`);
+            console.log(`    Shape:    ${details.shape}`);
+            console.log(`    Density:  ${details.density}`);
+            console.log(`    Shadow:   ${details.shadow}`);
+        }
+    }
+    else {
+        const palette = await choose('Choose a color palette:', PALETTES);
+        const shape = await choose('Choose a shape style:', SHAPES);
+        const density = await choose('Choose a density:', DENSITIES);
+        const shadow = await choose('Choose a shadow style:', SHADOWS);
+        const config = { palette, shape, density, shadow };
+        if (isDefaultConfig(config)) {
+            console.log('\n  Your selections match the built-in defaults — no config file needed!');
+            console.log('  Just use <LucentProvider> without any preset prop.\n');
+            close();
+            return;
+        }
+        configContent = generateConfigFile(config);
+    }
+    const outPath = path.resolve('lucent.config.ts');
+    fs.writeFileSync(outPath, configContent, 'utf8');
+    console.log(`\n  Config written to ${outPath}`);
+    printSnippet();
+    close();
+}

package/dist-cli/cli/init/prompts.js

@@ -0,0 +1,25 @@
+import * as readline from 'node:readline';
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+function ask(question) {
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => resolve(answer.trim()));
+    });
+}
+export async function choose(title, options) {
+    console.log(`\n${title}\n`);
+    for (let i = 0; i < options.length; i++) {
+        console.log(`  ${i + 1}) ${options[i].label} — ${options[i].description}`);
+    }
+    console.log();
+    while (true) {
+        const input = await ask(`  Enter choice (1–${options.length}): `);
+        const idx = parseInt(input, 10) - 1;
+        if (idx >= 0 && idx < options.length) {
+            return options[idx].value;
+        }
+        console.log(`  Invalid choice. Please enter a number between 1 and ${options.length}.`);
+    }
+}
+export function close() {
+    rl.close();
+}

package/dist-cli/src/tokens/presets/types.js

@@ -0,0 +1 @@
+export {};

package/dist-server/server/index.js

@@ -3,6 +3,7 @@ import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { z } from 'zod';
 import { ALL_MANIFESTS } from './registry.js';
+import { PALETTES, SHAPES, DENSITIES, SHADOWS, COMBINED, generatePresetConfig } from './presets.js';
 // ─── Auth stub ───────────────────────────────────────────────────────────────
 // LUCENT_API_KEY is reserved for the future paid tier.
 // When set, the server acknowledges it but does not yet enforce it.
@@ -106,6 +107,50 @@ server.tool('search_components', 'Searches Lucent UI components by description o
         ],
     };
 });
+// Tool: list_presets
+server.tool('list_presets', 'Lists all available Lucent UI design presets. Returns combined presets (modern, enterprise, playful) and individual dimensions (palettes, shapes, densities, shadows) that can be mixed and matched.', {}, async () => {
+    return {
+        content: [
+            {
+                type: 'text',
+                text: JSON.stringify({
+                    combined: COMBINED,
+                    palettes: PALETTES,
+                    shapes: SHAPES,
+                    densities: DENSITIES,
+                    shadows: SHADOWS,
+                }, null, 2),
+            },
+        ],
+    };
+});
+// Tool: get_preset_config
+server.tool('get_preset_config', 'Returns the LucentProvider configuration code for a given preset selection. Pass a combined preset name OR individual dimension names to get a ready-to-use config file and provider snippet.', {
+    preset: z.string().optional().describe('Combined preset name: "modern", "enterprise", or "playful"'),
+    palette: z.string().optional().describe('Palette name: "default", "brand", "indigo", "emerald", "rose", or "ocean"'),
+    shape: z.string().optional().describe('Shape name: "sharp", "rounded", or "pill"'),
+    density: z.string().optional().describe('Density name: "compact", "default", or "spacious"'),
+    shadow: z.string().optional().describe('Shadow name: "flat", "subtle", or "elevated"'),
+}, async ({ preset, palette, shape, density, shadow }) => {
+    const result = generatePresetConfig({ preset, palette, shape, density, shadow });
+    if ('error' in result) {
+        return {
+            content: [{ type: 'text', text: JSON.stringify({ error: result.error }) }],
+            isError: true,
+        };
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: JSON.stringify({
+                    configFile: result.configFile,
+                    providerSnippet: result.providerSnippet,
+                }, null, 2),
+            },
+        ],
+    };
+});
 // ─── Start ────────────────────────────────────────────────────────────────────
 const transport = new StdioServerTransport();
 await server.connect(transport);

package/dist-server/server/presets.js

@@ -0,0 +1,105 @@
+/**
+ * Static preset metadata for MCP tools. These are descriptions only —
+ * no runtime token resolution happens in the server.
+ */
+export const PALETTES = [
+    { name: 'default', description: 'Monochrome — neutral grays, near-black accent', accent: '#111827' },
+    { name: 'brand', description: 'Gold accent with warm cream-tinted grays', accent: '#e9c96b' },
+    { name: 'indigo', description: 'Violet-indigo accent with cool-tinted grays', accent: '#6366f1' },
+    { name: 'emerald', description: 'Green accent with cool green-tinted grays', accent: '#10b981' },
+    { name: 'rose', description: 'Pink-rose accent with warm-tinted grays', accent: '#f43f5e' },
+    { name: 'ocean', description: 'Sky-blue accent with cool blue-tinted grays', accent: '#0ea5e9' },
+];
+export const SHAPES = [
+    { name: 'sharp', description: 'Minimal border radius — enterprise / professional' },
+    { name: 'rounded', description: 'Balanced border radius (default)' },
+    { name: 'pill', description: 'Large border radius — playful / modern' },
+];
+export const DENSITIES = [
+    { name: 'compact', description: 'Tighter spacing — data-dense UIs' },
+    { name: 'default', description: 'Balanced spacing' },
+    { name: 'spacious', description: 'More breathing room — marketing / consumer' },
+];
+export const SHADOWS = [
+    { name: 'flat', description: 'No shadows — minimalist, flat design' },
+    { name: 'subtle', description: 'Light shadows (default)' },
+    { name: 'elevated', description: 'Pronounced shadows — material / depth' },
+];
+export const COMBINED = [
+    { name: 'modern', description: 'Indigo accent with rounded corners and balanced spacing', palette: 'indigo', shape: 'rounded', density: 'default', shadow: 'subtle' },
+    { name: 'enterprise', description: 'Monochrome with sharp corners and compact spacing', palette: 'default', shape: 'sharp', density: 'compact', shadow: 'flat' },
+    { name: 'playful', description: 'Rose accent with pill corners and spacious layout', palette: 'rose', shape: 'pill', density: 'spacious', shadow: 'elevated' },
+];
+const VALID_PALETTES = new Set(PALETTES.map((p) => p.name));
+const VALID_SHAPES = new Set(SHAPES.map((s) => s.name));
+const VALID_DENSITIES = new Set(DENSITIES.map((d) => d.name));
+const VALID_SHADOWS = new Set(SHADOWS.map((s) => s.name));
+const VALID_COMBINED = new Set(COMBINED.map((c) => c.name));
+export function generatePresetConfig(selection) {
+    // Combined preset
+    if (selection.preset) {
+        if (!VALID_COMBINED.has(selection.preset)) {
+            return { error: `Unknown combined preset "${selection.preset}". Available: ${[...VALID_COMBINED].join(', ')}` };
+        }
+        const configFile = [
+            `import type { PresetProp } from 'lucent-ui';`,
+            ``,
+            `export const preset: PresetProp = '${selection.preset}';`,
+        ].join('\n');
+        const providerSnippet = [
+            `import { LucentProvider } from 'lucent-ui';`,
+            `import { preset } from './lucent.config';`,
+            ``,
+            `function App() {`,
+            `  return (`,
+            `    <LucentProvider preset={preset}>`,
+            `      {/* your app */}`,
+            `    </LucentProvider>`,
+            `  );`,
+            `}`,
+        ].join('\n');
+        return { configFile, providerSnippet };
+    }
+    // Mix-and-match
+    const errors = [];
+    if (selection.palette && !VALID_PALETTES.has(selection.palette))
+        errors.push(`palette "${selection.palette}"`);
+    if (selection.shape && !VALID_SHAPES.has(selection.shape))
+        errors.push(`shape "${selection.shape}"`);
+    if (selection.density && !VALID_DENSITIES.has(selection.density))
+        errors.push(`density "${selection.density}"`);
+    if (selection.shadow && !VALID_SHADOWS.has(selection.shadow))
+        errors.push(`shadow "${selection.shadow}"`);
+    if (errors.length > 0) {
+        return { error: `Unknown values: ${errors.join(', ')}` };
+    }
+    const parts = [];
+    if (selection.palette)
+        parts.push(`  palette: '${selection.palette}',`);
+    if (selection.shape)
+        parts.push(`  shape: '${selection.shape}',`);
+    if (selection.density)
+        parts.push(`  density: '${selection.density}',`);
+    if (selection.shadow)
+        parts.push(`  shadow: '${selection.shadow}',`);
+    const configFile = [
+        `import type { PresetProp } from 'lucent-ui';`,
+        ``,
+        `export const preset: PresetProp = {`,
+        ...parts,
+        `};`,
+    ].join('\n');
+    const providerSnippet = [
+        `import { LucentProvider } from 'lucent-ui';`,
+        `import { preset } from './lucent.config';`,
+        ``,
+        `function App() {`,
+        `  return (`,
+        `    <LucentProvider preset={preset}>`,
+        `      {/* your app */}`,
+        `    </LucentProvider>`,
+        `  );`,
+        `}`,
+    ].join('\n');
+    return { configFile, providerSnippet };
+}

package/dist-server/src/components/molecules/Card/Card.manifest.js

@@ -4,12 +4,16 @@ export const COMPONENT_MANIFEST = {
     tier: 'molecule',
     domain: 'neutral',
     specVersion: '0.1',
-    description: 'A surface container with optional header, body, and footer slots, configurable padding, shadow, and radius.',
+    description: 'A surface container with optional header, body, and footer slots, configurable padding, shadow, and radius. Includes a CardBleed sub-component for edge-to-edge content.',
     designIntent: 'Card provides a consistent elevated surface for grouping related content. The header and footer slots ' +
         'are separated from the body by a border-default divider, giving visual structure without requiring ' +
         'the consumer to manage spacing. Padding, shadow, and radius are all configurable to accommodate ' +
         'flat/ghost cards, modal-like surfaces, and compact data-dense layouts. The overflow: hidden ensures ' +
         'children respect the border-radius without needing additional clipping.\n\n' +
+        'CardBleed is a companion component that allows specific children within the Card body to stretch ' +
+        'edge-to-edge, cancelling the horizontal padding via negative margins. Text inside CardBleed stays ' +
+        'aligned with the rest of the card content thanks to matching inner padding. Use it for dividers, ' +
+        'full-width lists, or bordered sections that need to reach the card edges.\n\n' +
         'Token rule: Card uses surface for its background. Never use bgBase or bgSubtle on a Card — ' +
         'those tokens are reserved for the page canvas (body, sidebar, layout regions). Content nested ' +
         'inside a Card that needs a tinted fill (e.g. a footer, inset panel, or disabled input) should use ' +
@@ -84,6 +88,15 @@ export const COMPONENT_MANIFEST = {
             title: 'Flat variant',
             code: `<Card shadow="none" radius="sm" padding="sm">
   <Text size="sm">Compact flat card</Text>
+</Card>`,
+        },
+        {
+            title: 'Edge-to-edge content with CardBleed',
+            code: `<Card>
+  <Text weight="semibold">Settings</Text>
+  <CardBleed style={{ borderTop: '1px solid var(--lucent-border-default)', marginTop: 'var(--lucent-space-4)' }}>
+    <Text color="secondary">This section stretches to the card edges.</Text>
+  </CardBleed>
 </Card>`,
         },
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -15,6 +15,7 @@
     "./styles": "./dist/index.css"
   },
   "bin": {
+    "lucent-ui": "./dist-cli/cli/entry.js",
     "lucent-mcp": "./dist-server/server/index.js",
     "lucent-manifest": "./dist-cli/cli/index.js"
   },