sparkdesign 0.4.6 → 0.4.7

package/dist/registry/basic/native-select.d.ts

@@ -0,0 +1,18 @@
+/**
+ * [WHO]: NativeSelect primitives for browser-native select controls.
+ * [FROM]: React, registry/lib/utils.
+ * [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
+ * [HERE]: registry/basic/native-select.tsx — tokenized shadcn-derived native select primitive.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from "react";
+declare function NativeSelect({ className, size, ...props }: Omit<React.ComponentProps<"select">, "size"> & {
+    size?: "sm" | "default";
+}): import("react/jsx-runtime").JSX.Element;
+declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): import("react/jsx-runtime").JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): import("react/jsx-runtime").JSX.Element;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/registry/basic/navigation-menu.d.ts

@@ -0,0 +1,25 @@
+/**
+ * [WHO]: NavigationMenu primitives for hierarchical navigation surfaces.
+ * [FROM]: React, @radix-ui/react-navigation-menu, registry/lib/utils.
+ * [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
+ * [HERE]: registry/basic/navigation-menu.tsx — tokenized shadcn-derived navigation menu primitive.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from "react";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
+declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    viewport?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };

package/dist/registry/basic/popover.d.ts

@@ -0,0 +1,23 @@
+/**
+ * [WHO]: Popover — floating content built on @radix-ui/react-popover.
+ * [FROM]: React + @radix-ui/react-popover + framer-motion + getThemeFromDocument.
+ * [TO]: sparkdesign package consumers; output of CLI `add popover` when registered.
+ * [HERE]: registry/basic/popover.tsx — Spark Design source; keep aligned with the main library.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+    dataStyle?: string;
+    dataTheme?: string;
+}
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/registry/basic/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };

package/dist/registry/basic/separator.d.ts

@@ -0,0 +1,16 @@
+/**
+ * [WHO]: Separator — visual/semantic divider built on @radix-ui/react-separator.
+ * [FROM]: React + @radix-ui/react-separator + `@/lib/utils` cn.
+ * [TO]: sparkdesign package consumers; output of CLI `add separator` when registered.
+ * [HERE]: registry/basic/separator.tsx — Spark Design source; keep aligned with the main library.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+export type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/registry/basic/sheet.d.ts

@@ -0,0 +1,13 @@
+/**
+ * [WHO]: Sheet — compatibility alias for Drawer using shadcn-style naming.
+ * [FROM]: registry/basic/drawer.
+ * [TO]: sparkdesign package consumers; output of CLI `add sheet` when registered.
+ * [HERE]: registry/basic/sheet.tsx — Spark Design source; keep aligned with Drawer semantics.
+ *
+ * [PROTOCOL]:
+ * 1. Keep Sheet as a thin compatibility layer; Drawer remains the canonical semantic component.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+export { Drawer as Sheet, DrawerTrigger as SheetTrigger, DrawerClose as SheetClose, DrawerPortal as SheetPortal, DrawerOverlay as SheetOverlay, DrawerContent as SheetContent, DrawerHeader as SheetHeader, DrawerFooter as SheetFooter, DrawerTitle as SheetTitle, DrawerDescription as SheetDescription, drawerVariants as sheetVariants, } from './drawer';
+export type { DrawerContentProps as SheetContentProps, DrawerHeaderProps as SheetHeaderProps, DrawerFooterProps as SheetFooterProps, } from './drawer';

package/dist/registry/basic/textarea.d.ts

@@ -0,0 +1,15 @@
+/**
+ * [WHO]: Textarea — multi-line text input with token-driven styling.
+ * [FROM]: React + `@/lib/utils` cn.
+ * [TO]: sparkdesign package consumers; output of CLI `add textarea` when registered.
+ * [HERE]: registry/basic/textarea.tsx — Spark Design source; keep aligned with the main library.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from 'react';
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/registry/basic/toggle.d.ts

@@ -3,7 +3,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "square" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/registry/chat/chat-input/context.d.ts

@@ -19,6 +19,8 @@ export interface ChatInputContextValue {
     onChange: (value: string) => void;
     onSend?: (value: string) => void;
     disabled: boolean;
+    placeholder: string;
+    maxRows: number;
     form?: string;
     textareaRef: React.RefObject<HTMLTextAreaElement | null>;
     setTextareaRef: (node: HTMLTextAreaElement | null) => void;
@@ -59,7 +61,7 @@ export declare function useChatInputContext(): ChatInputContextValue;
 export type ChatInputRootProps = ChatInputProps & {
     children?: ReactNode;
 };
-export declare function ChatInputRootProvider({ value: controlledValue, onChange, onSend, placeholder, disabled, maxRows, form, sendButtonStatus, showFooter, showFolderButton, folderButtonLabel, onFolderButtonClick, onFolderClear, folderPermission, showMoreButton, onMoreButtonClick, footerLeftConfig, showGenerationStatus, generationStatus, attachments, addLargeIcon, folderIcon, folderOpenIcon, historyIcon, arrowDownIcon, subMenuArrowIcon, folderFillIcon, closeIcon, dataStyle, dataTheme, className, children, ...rest }: ChatInputRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInputRootProvider({ value: controlledValue, onChange, onSend, placeholder, disabled, maxRows, form, sendButtonStatus, showFooter, showFolderButton, folderButtonLabel, onFolderButtonClick, onFolderClear, folderPermission, showMoreButton, onMoreButtonClick, footerLeftConfig, showGenerationStatus, generationStatus, attachments, addLargeIcon, folderIcon, folderOpenIcon, historyIcon, arrowDownIcon, subMenuArrowIcon, folderFillIcon, closeIcon, dataStyle, dataTheme, children, ...rest }: ChatInputRootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChatInputRootProvider {
     var displayName: string;
 }

package/dist/registry/chat/conversation-anchor-nav.d.ts

@@ -0,0 +1,72 @@
+import type { RefObject, ReactNode } from 'react';
+/** 单个锚点项 */
+export interface ConversationAnchorItem {
+    /** 稳定 id，用于定位 DOM 节点与 React key */
+    id: string;
+    /** 在 Tooltip 中展示的摘要文案（纯文本）。为空时回落到 labels.scrollTo。 */
+    summary?: string;
+}
+/** i18n 文案 */
+export interface ConversationAnchorLabels {
+    /** nav 的 aria-label */
+    ariaLabel?: string;
+    /** Tooltip 兜底文案（无摘要时） */
+    scrollTo?: string;
+}
+/** 样式变体 */
+export type ConversationAnchorVariant = 'bar' | 'punch';
+export interface ConversationAnchorNavProps {
+    /** 滚动容器 ref，用于检测当前可视锚点；受控场景可传 { current: null } */
+    scrollContainerRef: RefObject<HTMLElement | null>;
+    /** 锚点列表，顺序即视觉顺序 */
+    items: ConversationAnchorItem[];
+    /** 点击锚点时回调，参数为在 items 中的索引与对应 item */
+    onSelect: (index: number, item: ConversationAnchorItem) => void;
+    /**
+     * 当前高亮索引（受控）。
+     * 省略时组件内部会订阅 scrollContainerRef 的滚动并通过 IntersectionObserver 自动推导。
+     */
+    activeIndex?: number;
+    /**
+     * 锚点视觉样式：
+     * - 'bar' （默认）：短横杠，hover 时加长
+     * - 'punch'：圆形"打孔"点，适合羊皮纸 / 拟物风主题
+     */
+    variant?: ConversationAnchorVariant;
+    /** 少于该数量时隐藏整个 nav，默认 3 */
+    minItems?: number;
+    /** 外部强制隐藏（例如 compact 布局），默认 false */
+    hidden?: boolean;
+    /** 自定义 Tooltip / aria 文案 */
+    labels?: ConversationAnchorLabels;
+    /** 额外 className（会与默认定位 className 合并） */
+    className?: string;
+    /**
+     * 自定义锚点元素解析。默认通过
+     * `scrollContainerRef.current.querySelector('[data-spark-anchor="<id>"]')`
+     * 查找；需要业务在消息容器上添加该属性。
+     */
+    getAnchorElement?: (item: ConversationAnchorItem, index: number, container: HTMLElement) => HTMLElement | null;
+    /** 渲染 slot：自定义每个锚点的视觉表达，返回 null 时回落到内置样式 */
+    renderAnchor?: (ctx: {
+        item: ConversationAnchorItem;
+        index: number;
+        isActive: boolean;
+        variant: ConversationAnchorVariant;
+    }) => ReactNode;
+}
+export declare const ConversationAnchorNav: import("react").NamedExoticComponent<ConversationAnchorNavProps>;
+export interface UseVisibleAnchorIndexOptions {
+    scrollContainerRef: RefObject<HTMLElement | null>;
+    items: ConversationAnchorItem[];
+    /** 与 ConversationAnchorNav 同名 prop，默认按 `[data-spark-anchor="<id>"]` 查找 */
+    getAnchorElement?: ConversationAnchorNavProps['getAnchorElement'];
+    /** 为 false 时不订阅滚动，返回 0；用于受控场景 */
+    enabled?: boolean;
+}
+/**
+ * 订阅 scroll 容器内每个锚点元素的可见性，返回"最靠近顶部且仍可见"的锚点索引。
+ * - 容器必须可滚动（通常 overflow-y: auto），且锚点元素是其后代
+ * - 每个锚点需要能通过 `getAnchorElement` 解析到 HTMLElement
+ */
+export declare function useVisibleAnchorIndex({ scrollContainerRef, items, getAnchorElement, enabled, }: UseVisibleAnchorIndexOptions): number;

package/dist/registry/chat/tool-invocation-card.d.ts

@@ -12,6 +12,8 @@ export interface ToolInvocationCardProps {
     checkboxCircleIcon?: ReactNode;
     closeCircleIcon?: ReactNode;
     arrowDownIcon?: ReactNode;
+    /** @deprecated Use arrowDownIcon. */
+    arrowRightIcon?: ReactNode;
     runningText?: string;
     ranText?: string;
     failedText?: string;

package/dist/scale/presets/compact.css

@@ -1,6 +1,6 @@
 /* ============================================
  * Preset: Compact - 紧凑风格
- * 优化效率，适合信息密集场景
+ * 小幅压缩控件节奏，适合效率型工作台
  * ============================================ */
 
 [data-style="compact"] {
@@ -15,14 +15,25 @@
   --radius-2xl: 12px;
   --radius-3xl: 16px;
 
-  /* Font Size (略小) */
-  --font-size-sm: 12px;
-  --font-size-lg: 14px;
-  --font-size-xl: 16px;
+  /* Font Size (略小但保持阅读舒适) */
+  --font-size-xs: 12px;
+  --font-size-xs--line-height: 16px;
+  --font-size-sm: 13px;
+  --font-size-sm--line-height: 18px;
+  --font-size-base: 14px;
+  --font-size-base--line-height: 20px;
+  --font-size-lg: 15px;
+  --font-size-lg--line-height: 22px;
+  --font-size-xl: 17px;
+  --font-size-xl--line-height: 24px;
   --font-size-2xl: 18px;
+  --font-size-2xl--line-height: 24px;
   --font-size-3xl: 22px;
+  --font-size-3xl--line-height: 28px;
   --font-size-4xl: 28px;
+  --font-size-4xl--line-height: 32px;
   --font-size-5xl: 34px;
+  --font-size-5xl--line-height: 36px;
   --font-size-6xl: 44px;
   --font-size-7xl: 56px;
   --font-size-8xl: 64px;

package/dist/scale/presets/dense.css

@@ -49,14 +49,25 @@
   /* ChatInput 特殊配置 */
   --chat-status-overlap: 4px;
 
-  /* Font Size (更小) */
-  --font-size-base: 12px;
+  /* Font Size (信息密集：主力 text-sm 也压缩) */
+  --font-size-xs: 11px;
+  --font-size-xs--line-height: 14px;
+  --font-size-sm: 12px;
+  --font-size-sm--line-height: 16px;
+  --font-size-base: 13px;
+  --font-size-base--line-height: 18px;
   --font-size-lg: 14px;
+  --font-size-lg--line-height: 20px;
   --font-size-xl: 14px;
+  --font-size-xl--line-height: 20px;
   --font-size-2xl: 16px;
+  --font-size-2xl--line-height: 22px;
   --font-size-3xl: 18px;
+  --font-size-3xl--line-height: 24px;
   --font-size-4xl: 22px;
+  --font-size-4xl--line-height: 28px;
   --font-size-5xl: 28px;
+  --font-size-5xl--line-height: 32px;
   --font-size-6xl: 36px;
   --font-size-7xl: 44px;
   --font-size-8xl: 56px;

package/dist/scale/presets/sharp.css

@@ -1,12 +1,14 @@
 /* ============================================
  * Preset: Sharp - 锐利风格
- * 几何精度，无圆角 + 等宽字体
+ * 几何精度，无圆角 + 等宽字体 + 硬朗节奏
  * ============================================ */
 
 [data-style="sharp"] {
-  /* Spacing (与 compact 相同) */
+  /* Spacing (方正、克制，少量压缩) */
   --spacing-3: 10px;
   --spacing-4: 14px;
+  --spacing-5: 18px;
+  --spacing-6: 22px;
   --spacing-9: 32px;
   --spacing-11: 40px;
 
@@ -25,13 +27,23 @@
   --font-sans: var(--config-font-mono);
   font-family: var(--font-sans);
 
-  /* Font Size (与 compact 相同) */
-  --font-size-sm: 12px;
-  --font-size-lg: 14px;
-  --font-size-xl: 16px;
+  /* Font Size (工程感：略紧、等宽、层级清楚) */
+  --font-size-xs: 12px;
+  --font-size-xs--line-height: 16px;
+  --font-size-sm: 13px;
+  --font-size-sm--line-height: 18px;
+  --font-size-base: 14px;
+  --font-size-base--line-height: 20px;
+  --font-size-lg: 15px;
+  --font-size-lg--line-height: 22px;
+  --font-size-xl: 17px;
+  --font-size-xl--line-height: 24px;
   --font-size-2xl: 18px;
+  --font-size-2xl--line-height: 24px;
   --font-size-3xl: 22px;
+  --font-size-3xl--line-height: 28px;
   --font-size-4xl: 28px;
+  --font-size-4xl--line-height: 32px;
   --font-size-5xl: 34px;
   --font-size-6xl: 44px;
   --font-size-7xl: 56px;

package/dist/scale/presets/soft.css

@@ -4,7 +4,17 @@
  * ============================================ */
 
 [data-style="soft"] {
-  /* 只覆盖 Radius (大圆角) */
+  /* Spacing (舒展留白) */
+  --spacing-3: 14px;
+  --spacing-4: 18px;
+  --spacing-5: 24px;
+  --spacing-6: 28px;
+  --spacing-8: 36px;
+  --spacing-9: 40px;
+  --spacing-11: 48px;
+  --spacing-12: 56px;
+
+  /* Radius (大圆角) */
   --radius-sm: 8px;
   --radius-DEFAULT: 12px;
   --radius-md: 12px;
@@ -13,4 +23,16 @@
   --radius-2xl: 24px;
   --radius-3xl: 28px;
   --radius: var(--radius-DEFAULT);
+
+  /* Font Size (阅读舒适，行高更松) */
+  --font-size-sm: 14px;
+  --font-size-sm--line-height: 22px;
+  --font-size-base: 15px;
+  --font-size-base--line-height: 24px;
+  --font-size-lg: 17px;
+  --font-size-lg--line-height: 26px;
+  --font-size-xl: 20px;
+  --font-size-xl--line-height: 28px;
+  --font-size-2xl: 22px;
+  --font-size-2xl--line-height: 30px;
 }