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

package/dist/components/ai/StreamingResponse/StreamingCursor.js

@@ -1,21 +1,25 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useReducedMotion, motion } from 'motion/react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
 import { cursorPulse } from './StreamingResponse.animations.js';
 
 /**
- * StreamingCursor renders an animated blinking caret
- * that indicates active streaming. Automatically respects
- * reduced motion preferences.
+ * StreamingCursor renders a premium glowing caret that indicates active streaming.
+ * Uses Framer Motion for a smooth breathing scale and opacity animation.
  */
-const StreamingCursor = ({ visible, enabled = true, cursor = '▍', className, }) => {
-    const shouldReduceMotion = useReducedMotion();
+const StreamingCursor = ({ visible, enabled = true, cursor = "▏", className, }) => {
     if (!visible)
         return null;
-    if (!enabled || shouldReduceMotion) {
-        return (jsx("span", { className: className || 'text-[var(--color-primary)] font-light ml-0.5', "aria-hidden": "true", children: cursor }));
+    const isDefaultCursor = cursor === "▏";
+    if (!enabled) {
+        return isDefaultCursor ? (jsx("span", { className: cn("inline-block ml-1.5 w-2 h-2 rounded-full bg-[var(--color-primary)] align-middle mb-[3px]", className), "aria-hidden": "true" })) : (jsx("span", { className: cn("font-light ml-0.5 text-[var(--color-primary)]", className), "aria-hidden": "true", children: cursor }));
     }
-    return (jsx(motion.span, { variants: cursorPulse, animate: "pulse", className: className || 'text-[var(--color-primary)] font-light ml-0.5 inline-block', "aria-hidden": "true", children: cursor }));
+    return (jsx(motion.span, { variants: cursorPulse, initial: "initial", animate: "animate", className: cn("inline-block ml-1.5 text-[var(--color-primary)] drop-shadow-[0_0_5px_var(--color-primary-400)]", isDefaultCursor ? "w-2 h-2 rounded-full bg-[var(--color-primary)] align-middle mb-[3px]" : "font-light", className), "aria-hidden": "true", style: {
+            transformOrigin: "center center",
+            display: "inline-block",
+        }, children: !isDefaultCursor && cursor }));
 };
-StreamingCursor.displayName = 'StreamingCursor';
+StreamingCursor.displayName = "StreamingCursor";
 
 export { StreamingCursor };

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

@@ -16,10 +16,17 @@ export declare const tokenTransition: Transition;
 export declare const blockSlideIn: Variants;
 export declare const blockTransition: Transition;
 /**
- * Streaming cursor (caret) animation
- * Pulses while streaming is active
+ * Streaming cursor (caret/particle) animation
+ * Pulses smoothly with scale and opacity
  */
 export declare const cursorPulse: Variants;
+/**
+ * Inline token fade-in animation
+ * Used for word-by-word animation inside markdown prose elements
+ * No y-movement to prevent layout jitter in inline text
+ */
+export declare const inlineTokenFadeIn: Variants;
+export declare const inlineTokenTransition: Transition;
 /**
  * Container animation for staggered children
  */

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

@@ -1,3 +1,5 @@
+import { springs, easings } from '../../../theme/animations.js';
+
 /**
  * StreamingResponse Animation Variants
  * Motion variants for streaming text animations
@@ -9,8 +11,8 @@
 const tokenFadeIn = {
     hidden: {
         opacity: 0,
-        y: 6,
-        filter: 'blur(4px)',
+        y: 3,
+        filter: 'blur(3px)',
     },
     visible: {
         opacity: 1,
@@ -19,8 +21,8 @@ const tokenFadeIn = {
     },
 };
 const tokenTransition = {
-    duration: 0.35,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.25,
+    ease: easings.easeOut,
 };
 /**
  * Block slide-in animation
@@ -29,7 +31,7 @@ const tokenTransition = {
 const blockSlideIn = {
     hidden: {
         opacity: 0,
-        y: 8,
+        y: 6,
     },
     visible: {
         opacity: 1,
@@ -37,16 +39,20 @@ const blockSlideIn = {
     },
 };
 const blockTransition = {
-    duration: 0.4,
-    ease: [0.25, 0.4, 0.55, 1],
+    ...springs.smooth,
 };
 /**
- * Streaming cursor (caret) animation
- * Pulses while streaming is active
+ * Streaming cursor (caret/particle) animation
+ * Pulses smoothly with scale and opacity
  */
 const cursorPulse = {
-    pulse: {
-        opacity: [1, 0.4, 1],
+    initial: {
+        opacity: 0.25,
+        scale: 0.85,
+    },
+    animate: {
+        opacity: [1, 0.25, 1],
+        scale: [1.1, 0.85, 1.1],
         transition: {
             duration: 0.8,
             repeat: Infinity,
@@ -54,6 +60,25 @@ const cursorPulse = {
         },
     },
 };
+/**
+ * Inline token fade-in animation
+ * Used for word-by-word animation inside markdown prose elements
+ * No y-movement to prevent layout jitter in inline text
+ */
+const inlineTokenFadeIn = {
+    hidden: {
+        opacity: 0,
+        filter: 'blur(3px)',
+    },
+    visible: {
+        opacity: 1,
+        filter: 'blur(0px)',
+    },
+};
+const inlineTokenTransition = {
+    duration: 0.25,
+    ease: easings.easeOut,
+};
 /**
  * Container animation for staggered children
  */
@@ -65,4 +90,4 @@ const staggerContainer = {
     },
 };
 
-export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition };
+export { blockSlideIn, blockTransition, cursorPulse, inlineTokenFadeIn, inlineTokenTransition, staggerContainer, tokenFadeIn, tokenTransition };

package/dist/components/ai/StreamingResponse/StreamingResponse.js

@@ -1,8 +1,15 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
 import { Message } from '../../core/Message/Message.js';
 import { TypeWriter } from '../../core/Message/TypeWriter.js';
+import '../../core/Message/MessageBody.js';
+import '../../../utils/cn.js';
+import '../../core/Link/Link.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 import { ErrorDisplay } from './ErrorDisplay.js';
 import { MarkdownRenderer } from './MarkdownRenderer.js';
 import { AnimatedText } from './AnimatedText.js';
@@ -32,7 +39,7 @@ onToken, onComplete, onError, onStart, onAbort,
 // Display options
 typingSpeed = 100, enableTypewriter = true, enableMarkdown = true, markdownOptions, 
 // Animation
-animated = true, showCursor = true, 
+animated = true, showCursor = true, animateLastN = 12, 
 // Message component props
 role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
 // Error handling
@@ -65,7 +72,7 @@ className, }) => {
     }
     else if (enableMarkdown) {
         // Render markdown with block-level slide-in animations and streaming cursor
-        messageContent = (jsx(MarkdownRenderer, { content: accumulatedText, options: markdownOptions, isStreaming: isStreaming, animated: animated, showCursor: showCursor }));
+        messageContent = (jsx(MarkdownRenderer, { content: accumulatedText, options: markdownOptions, isStreaming: isStreaming, animated: animated, showCursor: showCursor, animateLastN: animateLastN }));
     }
     else if (isStreaming) {
         // During streaming without markdown: use per-token fade-in animation
@@ -73,11 +80,11 @@ className, }) => {
     }
     else if (enableTypewriter && isComplete && accumulatedText) {
         // Use typewriter animation after streaming completes
-        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap break-words" }));
+        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap wrap-break-word" }));
     }
     else {
         // Show raw text (streaming complete, typewriter disabled)
-        messageContent = (jsx("p", { className: "whitespace-pre-wrap break-words", children: accumulatedText }));
+        messageContent = (jsx("p", { className: "whitespace-pre-wrap wrap-break-word", children: accumulatedText }));
     }
     // Render with Message component
     return (jsx(Message, { role: role, content: messageContent, avatar: avatar, timestamp: startTimeRef.current, showTimestamp: showTimestamp, isStreaming: isStreaming, showActions: showActions && !error, onCopy: onCopy, onRegenerate: onRegenerate, className: className }));

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

@@ -2,16 +2,16 @@
  * StreamingResponse Component Types
  * Type definitions for the StreamingResponse component
  */
-import type { ReactNode } from 'react';
-import type { SSEFormat, SSEParser } from '../../../utils/sseFormatParsers';
-import type { StreamingError, RetryConfig } from '../../../utils';
-import type { MessageRole } from '../../core/Message';
+import type { ReactNode } from "react";
+import type { SSEFormat, SSEParser } from "../../../utils/sseFormatParsers";
+import type { StreamingError, RetryConfig } from "../../../utils";
+import type { MessageRole } from "../../core/Message";
 /**
  * Avatar configuration for Message component
  */
 export interface MessageAvatarProps {
     src?: string;
-    alt: string;
+    name: string;
     fallback?: ReactNode;
 }
 /**
@@ -21,7 +21,7 @@ export interface MarkdownOptions {
     /** Allow HTML in markdown (default: false) */
     allowHtml?: boolean;
     /** Syntax highlighting theme (default: 'light') */
-    syntaxTheme?: 'light' | 'dark';
+    syntaxTheme?: "light" | "dark";
     /** Custom code block renderer */
     renderCodeBlock?: (code: string, language: string) => ReactNode;
 }
@@ -32,7 +32,7 @@ export interface StreamingResponseProps {
     /** The SSE endpoint URL */
     url: string;
     /** HTTP method (default: 'POST') */
-    method?: 'GET' | 'POST';
+    method?: "GET" | "POST";
     /** Request headers */
     headers?: Record<string, string>;
     /** Request body (for POST requests) */
@@ -63,6 +63,8 @@ export interface StreamingResponseProps {
     animated?: boolean;
     /** Show blinking cursor while streaming (default: true) */
     showCursor?: boolean;
+    /** Number of recent words to animate during streaming (default: 6) */
+    animateLastN?: number;
     /** Message role (default: 'assistant') */
     role?: MessageRole;
     /** Avatar configuration */

package/dist/components/ai/StreamingResponse/WordAnimationContext.d.ts

@@ -0,0 +1,27 @@
+/**
+ * WordAnimationContext
+ * Provides a global word counter for word-by-word fade-in animation
+ * inside markdown-rendered content. Works like AnimatedText but across
+ * all markdown elements (paragraphs, headings, lists, blockquotes, etc.).
+ */
+import React from "react";
+interface WordAnimationContextValue {
+    /** Process children of a prose element, animating recent words */
+    processChildren: (children: React.ReactNode) => React.ReactNode;
+    /** Count words in children without animating (for code blocks, tables, etc.) */
+    skipChildren: (children: React.ReactNode) => void;
+}
+export declare const useWordAnimation: () => WordAnimationContextValue | null;
+export interface WordAnimationProviderProps {
+    children: React.ReactNode;
+    /** Full markdown content string — used to compute total word count */
+    content: string;
+    /** Whether animation is active */
+    enabled: boolean;
+    /** Number of recent words to animate (older ones render as static text) */
+    animateLastN?: number;
+    /** Whether cursor is present in content */
+    hasCursor?: boolean;
+}
+export declare const WordAnimationProvider: React.FC<WordAnimationProviderProps>;
+export {};

package/dist/components/ai/StreamingResponse/WordAnimationContext.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { createContext, useRef, useMemo, useContext } from 'react';
+import { motion } from 'motion/react';
+import { inlineTokenTransition, inlineTokenFadeIn } from './StreamingResponse.animations.js';
+import { StreamingCursor } from './StreamingCursor.js';
+
+const WordAnimationContext = createContext(null);
+const useWordAnimation = () => useContext(WordAnimationContext);
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Split a string into word tokens, preserving trailing whitespace on each */
+const tokenize = (text) => {
+    if (!text)
+        return [];
+    return text.match(/\S+\s*/g) || [];
+};
+/** Count prose words in a React children tree (recursive) */
+const countWordsInChildren = (children) => {
+    let count = 0;
+    React__default.Children.forEach(children, (child) => {
+        if (typeof child === "string") {
+            count += tokenize(child).length;
+        }
+        else if (React__default.isValidElement(child)) {
+            const props = child.props;
+            if (props.children) {
+                count += countWordsInChildren(props.children);
+            }
+        }
+    });
+    return count;
+};
+const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12, hasCursor = false, }) => {
+    const settledCountRef = useRef(0);
+    // Count total prose words in the raw content
+    const totalWords = useMemo(() => {
+        // Strip the cursor character before counting
+        const cleanContent = hasCursor ? content.replace(/\s*▏\s*$/, "") : content;
+        return tokenize(cleanContent).length;
+    }, [content, hasCursor]);
+    // Update settled count — words that have aged out of the animation window
+    if (totalWords > settledCountRef.current + animateLastN) {
+        settledCountRef.current = totalWords - animateLastN;
+    }
+    // Mutable counter — reset each render, incremented as text nodes are processed
+    const wordIndexRef = useRef(0);
+    wordIndexRef.current = 0;
+    const settledCount = settledCountRef.current;
+    const contextValue = useMemo(() => {
+        if (!enabled) {
+            return {
+                processChildren: (children) => children,
+                skipChildren: () => { },
+            };
+        }
+        /**
+         * Process React children, wrapping recent words in motion.span
+         * Preserves element structure (strong, em, a, etc.) by recursing into them
+         */
+        const processChildren = (children) => {
+            return React__default.Children.map(children, (child) => {
+                if (typeof child === "string") {
+                    return processTextNode(child);
+                }
+                if (React__default.isValidElement(child)) {
+                    const props = child.props;
+                    if (props.children) {
+                        // Recurse into inline elements (strong, em, a, del, code, etc.)
+                        const processed = processChildren(props.children);
+                        return React__default.cloneElement(child, {}, processed);
+                    }
+                }
+                return child;
+            });
+        };
+        /**
+         * Process a text string node — split into words, settled words become plain,
+         * recent words become motion.span with fade-in
+         */
+        const processTextNode = (text) => {
+            const tokens = tokenize(text);
+            if (tokens.length === 0)
+                return text;
+            const result = [];
+            let staticBuffer = "";
+            for (const token of tokens) {
+                const currentIndex = wordIndexRef.current;
+                wordIndexRef.current++;
+                // Check if this is the cursor character
+                if (token.trim() === "▏") {
+                    // Flush static buffer
+                    if (staticBuffer) {
+                        result.push(staticBuffer);
+                        staticBuffer = "";
+                    }
+                    result.push(jsx(StreamingCursor, { visible: true, enabled: enabled }, "streaming-cursor"));
+                    continue;
+                }
+                if (currentIndex < settledCount) {
+                    // Settled word — accumulate into static string
+                    staticBuffer += token;
+                }
+                else {
+                    // Flush static buffer before animated tokens
+                    if (staticBuffer) {
+                        result.push(staticBuffer);
+                        staticBuffer = "";
+                    }
+                    // Animated word
+                    result.push(jsx(motion.span, { variants: inlineTokenFadeIn, initial: "hidden", animate: "visible", transition: inlineTokenTransition, style: { display: "inline" }, children: token }, `word-${currentIndex}-${token.trim()}`));
+                }
+            }
+            // Flush any remaining static buffer
+            if (staticBuffer) {
+                result.push(staticBuffer);
+            }
+            return result.length === 1 ? result[0] : jsx(Fragment, { children: result });
+        };
+        /**
+         * Count words in children without producing animated output.
+         * Used for non-prose elements (code blocks, tables) to keep counter in sync.
+         */
+        const skipChildren = (children) => {
+            const count = countWordsInChildren(children);
+            wordIndexRef.current += count;
+        };
+        return { processChildren, skipChildren };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, settledCount, totalWords]);
+    return (jsx(WordAnimationContext.Provider, { value: contextValue, children: children }));
+};
+WordAnimationProvider.displayName = "WordAnimationProvider";
+
+export { WordAnimationProvider, useWordAnimation };

package/dist/components/ai/StreamingResponse/index.d.ts

@@ -7,9 +7,11 @@ export { ErrorDisplay } from './ErrorDisplay';
 export { MarkdownRenderer } from './MarkdownRenderer';
 export { AnimatedText } from './AnimatedText';
 export { StreamingCursor } from './StreamingCursor';
+export { WordAnimationProvider, useWordAnimation } from './WordAnimationContext';
 export { streamingResponseTheme } from './StreamingResponse.theme';
-export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
+export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, inlineTokenFadeIn, inlineTokenTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, MessageAvatarProps, } from './StreamingResponse.types';
 export type { AnimatedTextProps } from './AnimatedText';
 export type { StreamingCursorProps } from './StreamingCursor';
 export type { MarkdownRendererProps } from './MarkdownRenderer';
+export type { WordAnimationProviderProps } from './WordAnimationContext';

package/dist/components/ai/TokenCounter/TokenCounter.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { tokenCounterTheme } from './TokenCounter.theme.js';

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

@@ -4,7 +4,7 @@ const tokenCounterTheme = {
     countStyle: "font-medium text-[var(--color-text-primary)]",
     labelStyle: "text-[var(--color-text-muted)]",
     costStyle: "text-[var(--color-text-muted)] font-mono",
-    progressStyle: "h-1 bg-[var(--color-background-tertiary)] rounded-full overflow-hidden",
+    progressStyle: "h-1 bg-[var(--color-surface-sunken)] rounded-full overflow-hidden shadow-inner-real-sm",
     progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
     sizes: {
         sm: {

package/dist/components/ai/index.d.ts

@@ -1,19 +1,12 @@
 export { Message, messageTheme } from "../core/Message";
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
-export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
-export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory";
 export { PromptInput, promptInputTheme } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
-export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
-export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
 export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
-export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
-export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestions";
+export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestion";
+export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestion";
 export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
-export { ApprovalCard } from "./ApprovalCard";
-export type { ApprovalCardProps, ApprovalRiskLevel, } from "./ApprovalCard";
-export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";

package/dist/components/ai/index.js

@@ -1,25 +1,28 @@
 export { Message } from '../core/Message/Message.js';
 export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
-export { MessageHistory } from './MessageHistory/MessageHistory.js';
-export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
+import '../core/Message/MessageBody.js';
+import 'react/jsx-runtime';
+import '../../utils/cn.js';
+import 'react';
+import '../core/Link/Link.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
-export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
-export { thinkingIndicatorTheme } from './ThinkingIndicator/ThinkingIndicator.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
 export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
 export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';
-export { PromptSuggestion } from './PromptSuggestions/PromptSuggestion.js';
-export { promptSuggestionTheme } from './PromptSuggestions/PromptSuggestion.theme.js';
+export { PromptSuggestion } from './PromptSuggestion/PromptSuggestion.js';
+export { promptSuggestionTheme } from './PromptSuggestion/PromptSuggestion.theme.js';
 export { StreamingResponse } from './StreamingResponse/StreamingResponse.js';
 export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
 export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';
 export { AnimatedText } from './StreamingResponse/AnimatedText.js';
 export { StreamingCursor } from './StreamingResponse/StreamingCursor.js';
+import './StreamingResponse/WordAnimationContext.js';
 export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.theme.js';
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
 export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
-export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
-export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';

package/dist/components/canvas/Background.d.ts

@@ -0,0 +1,19 @@
+export type BackgroundVariant = "dots" | "lines";
+export interface BackgroundProps {
+    /** `dots` (default) or a `lines` grid. */
+    variant?: BackgroundVariant;
+    /** Spacing between dots / grid lines in flow units. Defaults to `18`. */
+    gap?: number;
+    /** Dot radius (px, constant) or line stroke width. Defaults to `1`. */
+    size?: number;
+    className?: string;
+}
+/**
+ * A pannable / zoomable canvas backdrop. Lives at the pane level (behind the
+ * world) and follows the viewport via the SVG pattern origin + tile size, so the
+ * pattern tracks pan and its spacing scales with zoom. Non-interactive.
+ */
+export declare function Background({ variant, gap, size, className, }: BackgroundProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Background {
+    var displayName: string;
+}

package/dist/components/canvas/Background.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useCanvasState } from './context/CanvasContext.js';
+
+/**
+ * A pannable / zoomable canvas backdrop. Lives at the pane level (behind the
+ * world) and follows the viewport via the SVG pattern origin + tile size, so the
+ * pattern tracks pan and its spacing scales with zoom. Non-interactive.
+ */
+function Background({ variant = "dots", gap = 18, size = 1, className, }) {
+    const { viewport } = useCanvasState();
+    const id = useId();
+    const tile = gap * viewport.zoom;
+    return (jsxs("svg", { className: cn(
+        // border-secondary, not border: the hairline (93%) sits only 1% darker
+        // than the sunken pane (94%) and disappears — -secondary (87%) restores
+        // the ~7% delta the pattern had on the old white floor.
+        "absolute inset-0 w-full h-full z-0 pointer-events-none text-[var(--color-border-secondary)]", className), "aria-hidden": "true", children: [jsx("pattern", { id: id, x: viewport.x, y: viewport.y, width: tile, height: tile, patternUnits: "userSpaceOnUse", children: variant === "dots" ? (jsx("circle", { cx: tile / 2, cy: tile / 2, r: size, fill: "currentColor" })) : (jsx("path", { d: `M ${tile} 0 L 0 0 0 ${tile}`, fill: "none", stroke: "currentColor", strokeWidth: size })) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })] }));
+}
+Background.displayName = "Background";
+
+export { Background };

package/dist/components/canvas/BaseNode.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface BaseNodeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Reflects selection with a primary-colored border. */
+    selected?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Optional presentational shell for custom nodes — a themeable surface card so
+ * node types look consistent without re-deriving styles. Purely visual: the node
+ * wrapper rendered by `NodeRenderer` owns positioning, focus, drag, and selection.
+ *
+ * Put interactive controls inside and mark them `.nodrag` (or use a native
+ * `<button>`/`<input>`) to keep them clickable without starting a drag.
+ */
+export declare const BaseNode: React.ForwardRefExoticComponent<BaseNodeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/canvas/BaseNode.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../utils/cn.js';
+
+/**
+ * Optional presentational shell for custom nodes — a themeable surface card so
+ * node types look consistent without re-deriving styles. Purely visual: the node
+ * wrapper rendered by `NodeRenderer` owns positioning, focus, drag, and selection.
+ *
+ * Put interactive controls inside and mark them `.nodrag` (or use a native
+ * `<button>`/`<input>`) to keep them clickable without starting a drag.
+ */
+const BaseNode = React__default.forwardRef(function BaseNode({ selected, className, children, ...rest }, ref) {
+    return (jsx("div", { ref: ref, className: cn("relative min-w-[8rem] rounded-[var(--canvas-node-radius,0.75rem)] border bg-[var(--color-surface)] shadow-sm", "transition-all duration-300", selected
+            ? "border-[var(--color-surface)] ring-4 ring-[var(--color-primary)]"
+            : "border-[var(--color-border)] group-hover:border-[var(--color-border-hover)] group-hover:shadow-real-md", className), ...rest, children: children }));
+});
+BaseNode.displayName = "BaseNode";
+
+export { BaseNode };

package/dist/components/canvas/CanvasToolbar.d.ts

@@ -0,0 +1,34 @@
+import type React from "react";
+declare const POSITIONS: {
+    readonly bottom: "bottom-6 left-1/2 -translate-x-1/2";
+    readonly top: "top-6 left-1/2 -translate-x-1/2";
+};
+/** A node type that can be added from the toolbar palette. */
+export interface CanvasToolbarNodeOption {
+    type: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface CanvasToolbarProps {
+    /** Node types addable from the palette (consumer adds them via `onAddNode`). */
+    nodeOptions?: CanvasToolbarNodeOption[];
+    onAddNode?: (type: string) => void;
+    /** Show the Select / Hand (pan) tool toggle. Defaults to `true`. */
+    showTools?: boolean;
+    position?: keyof typeof POSITIONS;
+    className?: string;
+    /** Custom app actions rendered at the end (e.g. Run, Undo/Redo). */
+    children?: React.ReactNode;
+}
+/**
+ * A floating, bottom-center canvas toolbar (FigJam/tldraw style). Built-in **Select /
+ * Hand** tool toggle (drives the engine `tool` mode) and a single **"+ Add node"**
+ * trigger opening a Dropdown menu of `nodeOptions`; a `children` slot holds
+ * app-specific actions. Marked `data-flikkui-nopan` so the pane never pans or steals
+ * clicks from it (the Dropdown menu portals with `data-flikkui-portal`, same rule).
+ */
+export declare function CanvasToolbar({ nodeOptions, onAddNode, showTools, position, className, children, }: CanvasToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CanvasToolbar {
+    var displayName: string;
+}
+export {};