@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

package/README.md

@@ -1 +1,53 @@
 # Flikkui
+
+A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. 150+ components following the shadcn philosophy with complete `className` override support.
+
+## MCP Server
+
+Flikkui ships with an MCP (Model Context Protocol) server that gives AI coding tools full knowledge of the component library — component APIs, props, theme tokens, and code generation.
+
+### What It Does
+
+| Tool | Description |
+|------|-------------|
+| `get_component` | Look up any component's full API — props, types, sub-components, theme tokens, and code examples |
+| `search_components` | Find components by name, category (`core`, `forms`, `charts`, etc.), or pattern type (`compound`, `simple`, etc.) |
+| `get_theme_tokens` | Get all CSS variables with correct Tailwind syntax (`bg-[var(--color-primary)]`) |
+| `generate_code` | Generate production-ready Flikkui code from a description |
+
+### Setup for Claude Code
+
+Add the following to your project's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "npx",
+      "args": ["@flikk/mcp"]
+    }
+  }
+}
+```
+
+Or if you're working from a local clone of this repo:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "node",
+      "args": ["./packages/mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+### Building from Source
+
+```bash
+cd packages/mcp
+npm install
+npm run extract   # Parse component source files into registry.json
+npm run build     # Compile TypeScript
+```

package/dist/components/ai/CodeBlock/CodeBlock.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useCallback } from 'react';
+import React__default, { useState, useMemo, useCallback, useRef } from 'react';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { DocumentTextIcon, DocumentCheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline';
@@ -49,7 +50,6 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
         filename: customTheme.filename || codeBlockTheme.filename,
         languageLabel: customTheme.languageLabel || codeBlockTheme.languageLabel,
         codeWrapper: customTheme.codeWrapper || codeBlockTheme.codeWrapper,
-        lineNumber: customTheme.lineNumber || codeBlockTheme.lineNumber,
         highlightedLine: customTheme.highlightedLine || codeBlockTheme.highlightedLine,
         diffAddition: customTheme.diffAddition || codeBlockTheme.diffAddition,
         diffDeletion: customTheme.diffDeletion || codeBlockTheme.diffDeletion,
@@ -140,8 +140,21 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
     const showHeader = filename || showLanguage;
     // Pre-split code lines for lineProps
     const codeLines = useMemo(() => code.split("\n"), [code]);
-    // Custom line props for highlighting
-    const lineProps = useCallback((lineNumber) => {
+    // Custom line props for highlighting/diff styling.
+    //
+    // react-syntax-highlighter only computes a real (1-indexed) `lineNumber`
+    // argument when `showLineNumbers` is truthy — otherwise every line is
+    // called with `lineNumber={false}` (see its `highlight.js`:
+    // `lineNumber = showLineNumbers && newTree.length + startingLineNumber`).
+    // `highlightLines`/`diffMode` must work regardless of whether line
+    // numbers are shown, so we don't trust that argument — instead we keep
+    // our own sequential counter, reset right before each render pass (see
+    // below), since `lineProps` is invoked once per line, in source order,
+    // synchronously during that render.
+    const lineCounterRef = useRef(0);
+    const lineProps = useCallback(() => {
+        lineCounterRef.current += 1;
+        const lineNumber = lineCounterRef.current;
         const lineContent = codeLines[lineNumber - 1] || "";
         const diffStyle = getDiffStyle(lineContent, lineNumber);
         const highlighted = isLineHighlighted(lineNumber);
@@ -160,6 +173,10 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
             className: lineClassName,
         };
     }, [codeLines, getDiffStyle, isLineHighlighted, mergedTheme]);
+    // Reset the sequential counter immediately before each render pass so
+    // `lineProps` starts counting from line 1 every time, regardless of
+    // `showLineNumbers`.
+    lineCounterRef.current = 0;
     return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [showHeader && (jsxs("div", { className: mergedTheme.header, children: [jsx("div", { className: mergedTheme.headerLeft, children: filename && (jsxs(Fragment, { children: [jsx(DocumentTextIcon, { className: "size-4 text-[var(--color-text-muted)]" }), jsx("span", { className: mergedTheme.filename, children: filename })] })) }), jsxs("div", { className: mergedTheme.headerRight, children: [showLanguage && (jsxs("div", { className: "flex items-center gap-2", children: [jsx(LanguageIcon, { language: language, className: "size-4" }), jsx("span", { className: mergedTheme.languageLabel, children: displayLanguage })] })), copyable && (jsx("button", { onClick: handleCopy, className: cn(mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(DocumentCheckIcon, { className: "size-4" })) : (jsx(DocumentDuplicateIcon, { className: "size-4" })) }))] })] })), jsx("div", { className: mergedTheme.codeWrapper, style: {
                     maxHeight: maxHeight,
                     overflowY: maxHeight ? "auto" : undefined,

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -1,16 +1,15 @@
 const codeBlockTheme = {
-    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-background)]",
+    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-sunken)] shadow-inner-real-sm",
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
     filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
     languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
-    lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
-    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-neutral-400/5 dark:border-l-neutral-200",
+    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
-    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     copySuccess: "text-[var(--color-success)]",
 };
 

package/dist/components/ai/CodeBlock/CodeBlock.types.d.ts

@@ -81,7 +81,6 @@ export interface CodeBlockTheme {
     filename: string;
     languageLabel: string;
     codeWrapper: string;
-    lineNumber: string;
     highlightedLine: string;
     diffAddition: string;
     diffDeletion: string;
@@ -99,7 +98,6 @@ export interface CodeBlockThemeOverrides {
     filename?: string;
     languageLabel?: string;
     codeWrapper?: string;
-    lineNumber?: string;
     highlightedLine?: string;
     diffAddition?: string;
     diffDeletion?: string;

package/dist/components/ai/CodeBlock/LanguageIcon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/ai/PromptInput/PromptInput.animations.d.ts

@@ -0,0 +1,25 @@
+import type { Variants } from "motion/react";
+/**
+ * Voice recorder enter/exit animation (replaces textarea area)
+ */
+export declare const voiceRecorderVariants: Variants;
+/**
+ * Textarea enter/exit animation (when swapping with voice recorder)
+ */
+export declare const textareaSwapVariants: Variants;
+/**
+ * Submit/Stop icon swap animation
+ */
+export declare const iconSwapVariants: Variants;
+/**
+ * Enhanced dropzone container animation
+ */
+export declare const dropzoneContainerVariants: Variants;
+/**
+ * Dropzone child elements stagger animation
+ */
+export declare const dropzoneChildVariants: Variants;
+/**
+ * Dropzone action icons stagger animation
+ */
+export declare const dropzoneActionIconVariants: Variants;

package/dist/components/ai/PromptInput/PromptInput.animations.js

@@ -0,0 +1,61 @@
+/**
+ * Voice recorder enter/exit animation (replaces textarea area)
+ */
+/**
+ * Textarea enter/exit animation (when swapping with voice recorder)
+ */
+const textareaSwapVariants = {
+    initial: { opacity: 0, y: -8 },
+    animate: { opacity: 1, y: 0, transition: { duration: 0.2, ease: "easeOut" } },
+    exit: { opacity: 0, y: 8, transition: { duration: 0.15, ease: "easeIn" } },
+};
+/**
+ * Submit/Stop icon swap animation
+ */
+const iconSwapVariants = {
+    initial: { opacity: 0, scale: 0.5, rotate: -90 },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        rotate: 0,
+        transition: { duration: 0.2, ease: "easeOut" },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        rotate: 90,
+        transition: { duration: 0.15, ease: "easeIn" },
+    },
+};
+/**
+ * Enhanced dropzone container animation
+ */
+const dropzoneContainerVariants = {
+    initial: { opacity: 0 },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.2,
+            staggerChildren: 0.05,
+        },
+    },
+    exit: { opacity: 0, transition: { duration: 0.15 } },
+};
+/**
+ * Dropzone child elements stagger animation
+ */
+const dropzoneChildVariants = {
+    initial: { opacity: 0, y: 8 },
+    animate: { opacity: 1, y: 0, transition: { duration: 0.2, ease: "easeOut" } },
+    exit: { opacity: 0, transition: { duration: 0.1 } },
+};
+/**
+ * Dropzone action icons stagger animation
+ */
+const dropzoneActionIconVariants = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1, transition: { duration: 0.15 } },
+    exit: { opacity: 0, scale: 0.8, transition: { duration: 0.1 } },
+};
+
+export { dropzoneActionIconVariants, dropzoneChildVariants, dropzoneContainerVariants, iconSwapVariants, textareaSwapVariants };