ai-design-system 0.1.41 → 0.1.43

package/components/blocks/AIConversation/AIConversation.tsx

@@ -6,12 +6,11 @@ import {
   ConversationScrollButton,
   type ConversationProps,
 } from "@/components/ai-elements/conversation"
-import { type AIMessage } from "@/components/composites/AgentMessage"
+import type { ToolCall, SubAgent } from "@/components/composites"
 import { UserMessage } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
-import type { SubAgent } from "@/components/composites/AgentIndicator"
 
 /**
  * AIConversation Section
@@ -23,6 +22,17 @@ import type { SubAgent } from "@/components/composites/AgentIndicator"
  * Based on reference implementation from deep-agents-ui ChatInterface.
  */
 
+interface AIMessage {
+  id: string;
+  type: 'human' | 'ai';
+  role: string;
+  content: string;
+  avatarSrc?: string;
+  avatarName?: string;
+  toolCalls?: ToolCall[];
+  subAgents?: SubAgent[];
+}
+
 export interface AIConversationProps
   extends Omit<ConversationProps, "children"> {
   /**
@@ -137,7 +147,6 @@ export const AIConversation = React.memo<AIConversationProps>(
                       status: subAgent.status,
                       toolCalls: [],
                     }}
-                    showAvatar={showAvatars}
                     isNested={true}
                   />
                 ))}
@@ -156,7 +165,6 @@ export const AIConversation = React.memo<AIConversationProps>(
                 toolCalls: message.toolCalls?.filter((tc) => tc.name !== "task"),
                 status: "completed",
               }}
-              showAvatar={showAvatars}
               isNested={false}
             />
           )

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -109,7 +109,8 @@ function WorkflowCanvasInner({
         onEdgesChange={onEdgesChange}
         onNodesChange={onNodesChange}
         onPaneClick={onPaneClick}
-        onNodeClick={onNodeClick}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onNodeClick={onNodeClick as any}
         onEdgeClick={onEdgeClick}
       >
         {topLeft && (

package/components/composites/AppHeader/AppHeader.mocks.ts

@@ -5,7 +5,7 @@
  * - AppHeader.stories.tsx
  */
 
-import type { TabItem } from './AppHeader'
+import type { TabItem } from './interfaces'
 
 export const mockTabs: TabItem[] = [
   { value: 'agent', label: 'Agent' },

package/components/composites/DataTable/DataTable.tsx

@@ -8,6 +8,7 @@ import {
   flexRender,
   type ColumnDef,
 } from "@tanstack/react-table"
+import type { Table as TanStackTable } from "@tanstack/react-table"
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/primitives/Table"
 import { TablePagination } from "@/components/composites/TablePagination"
 import { TableToolbar } from "@/components/composites/TableToolbar"
@@ -45,7 +46,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className={`space-y-4 ${className || ""}`}>
-      {enableFiltering && <TableToolbar table={table} searchColumn={searchColumn} />}
+      {enableFiltering && <TableToolbar table={table as unknown as TanStackTable<unknown>} searchColumn={searchColumn} />}
       <div className="rounded-md border">
         <Table>
           <TableHeader>
@@ -87,7 +88,7 @@ export function DataTable<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      {enablePagination && <TablePagination table={table} />}
+      {enablePagination && <TablePagination table={table as unknown as TanStackTable<unknown>} />}
     </div>
   )
 }

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -439,7 +439,7 @@ export function EnhancedDataTable({
     (event: DragEndEvent) => {
       const { active, over } = event
       if (active && over && active.id !== over.id) {
-        reorderById(active.id, over.id)
+        reorderById(String(active.id), String(over.id))
       }
     },
     [reorderById]

package/components/composites/DataTable/InlineEditCell.tsx

@@ -14,16 +14,18 @@ export interface InlineEditCellProps {
 export function InlineEditCell({ row, field, onSave }: InlineEditCellProps) {
   const inputId = `${row.id}-${field}`
   const defaultValue = row[field]
+  const rowId = row.id as number
+  const rowHeader = row.header as string
 
   const onSubmit = React.useCallback(
     (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault()
       const formData = new FormData(event.currentTarget)
       const value = String(formData.get(field) ?? "").trim()
-      onSave(row.id, field, value)
-      toast.success(`Saved ${field} for ${row.header}`)
+      onSave(rowId, field, value)
+      toast.success(`Saved ${field} for ${rowHeader}`)
     },
-    [field, onSave, row.header, row.id]
+    [field, onSave, rowId, rowHeader]
   )
 
   return (
@@ -34,10 +36,10 @@ export function InlineEditCell({ row, field, onSave }: InlineEditCellProps) {
       <Input
         id={inputId}
         name={field}
-        defaultValue={defaultValue}
+        defaultValue={String(defaultValue)}
         className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background"
         onBlur={(event) => {
-          onSave(row.id, field, event.target.value)
+          onSave(row.id as number, field, event.target.value)
         }}
       />
     </form>

package/components/composites/DataTable/ReviewerCell.tsx

@@ -16,7 +16,7 @@ export function ReviewerCell({ row, onAssign }: ReviewerCellProps) {
   const isAssigned = row.reviewer !== "Assign reviewer"
 
   if (isAssigned) {
-    return <span>{row.reviewer}</span>
+    return <span>{row.reviewer as React.ReactNode}</span>
   }
 
   const id = `${row.id}-reviewer`
@@ -26,7 +26,7 @@ export function ReviewerCell({ row, onAssign }: ReviewerCellProps) {
       <Label htmlFor={id} className="sr-only">
         Reviewer
       </Label>
-      <Select onValueChange={(value) => onAssign(row.id, value)}>
+      <Select onValueChange={(value) => onAssign(row.id as number, value)}>
         <SelectTrigger id={id} className="w-[170px]">
           <SelectValue placeholder="Assign reviewer" />
         </SelectTrigger>

package/components/composites/DataTable/RowDetailDrawer.tsx

@@ -67,12 +67,12 @@ export function RowDetailDrawer({ item, onChange }: RowDetailDrawerProps) {
     <Drawer open={open} onOpenChange={setOpen} direction={isMobile ? "bottom" : "right"}>
       <DrawerTrigger asChild>
         <Button variant="link" className="w-fit px-0 text-left text-foreground">
-          {item.header}
+          {item.header as React.ReactNode}
         </Button>
       </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader className="gap-1">
-          <DrawerTitle>{item.header}</DrawerTitle>
+          <DrawerTitle>{item.header as React.ReactNode}</DrawerTitle>
           <DrawerDescription>Showing total visitors for the last 6 months</DrawerDescription>
         </DrawerHeader>
         <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
@@ -103,12 +103,12 @@ export function RowDetailDrawer({ item, onChange }: RowDetailDrawerProps) {
           <form className="flex flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
             <div className="flex flex-col gap-3">
               <Label htmlFor="drawer-header">Header</Label>
-              <Input id="drawer-header" defaultValue={item.header} onBlur={(e) => onChange(item.id, "header", e.target.value)} />
+              <Input id="drawer-header" defaultValue={String(item.header)} onBlur={(e) => onChange(item.id as number, "header", e.target.value)} />
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="flex flex-col gap-3">
                 <Label htmlFor="drawer-type">Type</Label>
-                <Select defaultValue={item.type} onValueChange={(value) => onChange(item.id, "type", value)}>
+                <Select defaultValue={String(item.type)} onValueChange={(value) => onChange(item.id as number, "type", value)}>
                   <SelectTrigger id="drawer-type" className="w-full">
                     <SelectValue placeholder="Select a type" />
                   </SelectTrigger>
@@ -123,7 +123,7 @@ export function RowDetailDrawer({ item, onChange }: RowDetailDrawerProps) {
               </div>
               <div className="flex flex-col gap-3">
                 <Label htmlFor="drawer-status">Status</Label>
-                <Select defaultValue={item.status} onValueChange={(value) => onChange(item.id, "status", value)}>
+                <Select defaultValue={String(item.status)} onValueChange={(value) => onChange(item.id as number, "status", value)}>
                   <SelectTrigger id="drawer-status" className="w-full">
                     <SelectValue placeholder="Select a status" />
                   </SelectTrigger>
@@ -138,16 +138,16 @@ export function RowDetailDrawer({ item, onChange }: RowDetailDrawerProps) {
             <div className="grid grid-cols-2 gap-4">
               <div className="flex flex-col gap-3">
                 <Label htmlFor="drawer-target">Target</Label>
-                <Input id="drawer-target" defaultValue={item.target} onBlur={(e) => onChange(item.id, "target", e.target.value)} />
+                <Input id="drawer-target" defaultValue={String(item.target)} onBlur={(e) => onChange(item.id as number, "target", e.target.value)} />
               </div>
               <div className="flex flex-col gap-3">
                 <Label htmlFor="drawer-limit">Limit</Label>
-                <Input id="drawer-limit" defaultValue={item.limit} onBlur={(e) => onChange(item.id, "limit", e.target.value)} />
+                <Input id="drawer-limit" defaultValue={String(item.limit)} onBlur={(e) => onChange(item.id as number, "limit", e.target.value)} />
               </div>
             </div>
             <div className="flex flex-col gap-3">
               <Label htmlFor="drawer-reviewer">Reviewer</Label>
-              <Select defaultValue={item.reviewer} onValueChange={(value) => onChange(item.id, "reviewer", value)}>
+              <Select defaultValue={String(item.reviewer)} onValueChange={(value) => onChange(item.id as number, "reviewer", value)}>
                 <SelectTrigger id="drawer-reviewer" className="w-full">
                   <SelectValue placeholder="Select a reviewer" />
                 </SelectTrigger>

package/components/composites/DataTable/StatusCell.tsx

@@ -13,7 +13,7 @@ export function StatusCell({ status }: StatusCellProps) {
       {status === "Done" ? <CheckCircle2 className="size-3 text-green-500" /> : null}
       {status === "In Process" ? <LoaderCircle className="size-3 animate-spin" /> : null}
       {status === "Not Started" ? <CircleSlash className="size-3" /> : null}
-      {status}
+      {status as React.ReactNode}
     </Badge>
   )
 }

package/components/composites/DataTable/useEnhancedDataTable.ts

@@ -12,7 +12,7 @@ import {
   type SortingState,
   type VisibilityState,
 } from "@tanstack/react-table"
-import { arrayMove, type UniqueIdentifier } from "@dnd-kit/sortable"
+import { arrayMove } from "@dnd-kit/sortable"
 
 import type { DashboardRow } from "./table-types"
 
@@ -54,7 +54,7 @@ export function useEnhancedDataTable({ data: initialData, columns, onReorder, se
     })
   }, [serverPagination])
 
-  const dataIds = React.useMemo<UniqueIdentifier[]>(() => data.map((item) => item.id), [data])
+  const dataIds = React.useMemo<string[]>(() => data.map((item) => String(item.id)), [data])
 
   const table = useReactTable({
     data,
@@ -86,7 +86,7 @@ export function useEnhancedDataTable({ data: initialData, columns, onReorder, se
   })
 
   const reorderById = React.useCallback(
-    (activeId: UniqueIdentifier, overId: UniqueIdentifier) => {
+    (activeId: string, overId: string) => {
       if (activeId === overId) {
         return
       }

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -9,7 +9,13 @@ import React from 'react'
 import { Tabs, TabsList, TabsTrigger, Button, ScrollArea } from '@/components/primitives'
 import { X, Circle } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import type { DocumentFile } from '@/types/ai-editor'
+export interface DocumentFile {
+  id: string
+  name: string
+  isDirty?: boolean
+  format?: string
+  lastModified?: number
+}
 
 /**
  * Props for DocumentTabBar composite
@@ -70,7 +76,7 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
         )}
         data-slot="document-tab-bar"
       >
-        <ScrollArea orientation="horizontal" className="flex-1">
+        <ScrollArea className="flex-1">
           <Tabs
             value={activeTabId || tabs[0]?.id}
             onValueChange={onTabSelect}

package/components/composites/FilePreviewDialog/FilePreviewDialog.tsx

@@ -13,6 +13,7 @@ interface ChecklistItem {
   id: string;
   label: string;
   checked: boolean;
+  isTask: boolean;
 }
 
 function parseChecklistItems(content?: string) {
@@ -50,6 +51,7 @@ function parseChecklistItems(content?: string) {
           id: `checklist-${index}`,
           label: taskMatch[2],
           checked: taskMatch[1].toLowerCase() === "x",
+          isTask: true,
         });
         return items;
       }
@@ -61,6 +63,7 @@ function parseChecklistItems(content?: string) {
         id: `checklist-${index}`,
         label: numberStripped,
         checked: false,
+        isTask: false,
       });
 
       return items;
@@ -121,16 +124,18 @@ export const FilePreviewDialog = React.memo<FilePreviewDialogProps>(
                     key={item.id}
                     className="flex items-start gap-3 rounded-md px-1 py-1 text-sm leading-6"
                   >
-                    <Checkbox
-                      checked={checkedItems[item.id] ?? false}
-                      onCheckedChange={(checked) => {
-                        setCheckedItems((prev) => ({
-                          ...prev,
-                          [item.id]: checked === true,
-                        }));
-                      }}
-                      className="mt-1"
-                    />
+                    {item.isTask && (
+                      <Checkbox
+                        checked={checkedItems[item.id] ?? false}
+                        onCheckedChange={(checked) => {
+                          setCheckedItems((prev) => ({
+                            ...prev,
+                            [item.id]: checked === true,
+                          }));
+                        }}
+                        className="mt-1"
+                      />
+                    )}
                     <span>{item.label}</span>
                   </label>
                 ))}

package/components/composites/FormReports/FormReportsDrawerForm.tsx

@@ -15,12 +15,19 @@ import { Label } from "@/components/primitives/Label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/primitives/Select"
 import { Checkbox } from "@/components/primitives/Checkbox"
 import { Textarea } from "@/components/primitives/Textarea"
-import type {
-  FormFieldDefinition,
-  FormFieldOption,
-  FormFieldType,
-  FormFieldValue,
-} from "design-schema"
+type FormFieldType = "text" | "number" | "date" | "textarea" | "select" | "boolean"
+type FormFieldValue = string | number | boolean | null
+interface FormFieldOption { value: string; label: string }
+interface FormFieldDefinition {
+  name: string
+  label: string
+  type: FormFieldType
+  required?: boolean
+  placeholder?: string
+  description?: string
+  defaultValue?: FormFieldValue
+  options?: FormFieldOption[]
+}
 
 export type FormReportsFieldType = FormFieldType
 
@@ -142,7 +149,7 @@ export const FormReportsDrawerForm = React.memo<FormReportsDrawerFormProps>(
                         <SelectValue placeholder={field.placeholder ?? `Select ${field.label}`} />
                       </SelectTrigger>
                       <SelectContent>
-                        {(field.options ?? []).map((option) => (
+                        {(field.options ?? []).map((option: FormFieldOption) => (
                           <SelectItem key={option.value} value={option.value}>
                             {option.label}
                           </SelectItem>

package/components/features/AIDocEditor/AIDocEditor.mocks.ts

@@ -9,7 +9,20 @@
 
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor'
-import type { DocumentWithAnnotations, DocumentFile } from '@/types/ai-editor'
+
+interface DocumentFile {
+  id: string
+  name: string
+  isDirty?: boolean
+  format?: string
+  lastModified?: number
+}
+
+interface DocumentWithAnnotations {
+  file: DocumentFile
+  content: JSONContent | string
+  annotations: Annotation[]
+}
 
 /**
  * Sample document content for stories and tests

package/components/features/AIDocEditor/AIDocEditor.tsx

@@ -38,7 +38,12 @@ import { DocumentTabBar } from '@/components/composites/DocumentTabBar'
 import { cn } from '@/lib/utils'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor/annotations'
-import type { DocumentWithAnnotations } from '@/types/ai-editor'
+
+interface DocumentWithAnnotations {
+  file: { id: string; name: string; isDirty?: boolean; format?: 'json' | 'markdown' | string; lastModified?: number }
+  content: JSONContent | string
+  annotations: Annotation[]
+}
 
 /**
  * Props for AIDocEditor feature component - Single document mode (backward compatible)
@@ -240,7 +245,7 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
         <div className="flex-1 overflow-auto">
           <DocumentEditorWithComments
             content={currentDocument.content}
-            format={currentDocument.file.format}
+            format={currentDocument.file.format as 'json' | 'markdown' | undefined}
             annotations={currentDocument.annotations}
             currentUserId={currentUser.id}
             currentUserName={currentUser.name}

package/components/features/AIDocEditor/useAIDocEditor.mock.ts

@@ -6,10 +6,24 @@
  */
 
 import { useState, useCallback } from 'react'
+import type { JSONContent } from '@tiptap/core'
 import type { Annotation } from '@/types/ai-editor/annotations'
-import type { DocumentFile, DocumentWithAnnotations } from '@/types/ai-editor'
 import type { UseAIDocEditorReturn, UseAIMultiTabDocEditorReturn } from './useAIDocEditor'
 
+interface DocumentFile {
+  id: string
+  name: string
+  isDirty: boolean
+  format?: 'json' | 'markdown'
+  lastModified: number
+}
+
+interface DocumentWithAnnotations {
+  file: DocumentFile
+  content: JSONContent | string
+  annotations: Annotation[]
+}
+
 type MultiDocMockConfig = {
   multiDoc: true
   initialDocuments?: DocumentWithAnnotations[]
@@ -76,9 +90,9 @@ function useMultiTabDocEditorMockState(
   )
   const [loading, setLoading] = useState(false)
 
-  const addDocument = useCallback((file: DocumentFile, content: any) => {
+  const addDocument = useCallback((file: DocumentFile, content: unknown) => {
     console.log('[Multi-Tab Mock] Adding document:', file.name)
-    setDocuments(prev => [...prev, { file, content, annotations: [] }])
+    setDocuments(prev => [...prev, { file, content: content as JSONContent | string, annotations: [] }])
     setActiveDocumentId(file.id)
   }, [])
 
@@ -227,6 +241,6 @@ export function useAIDocEditorMock(
  * @param initialDocuments - Initial documents to display
  * @returns Mock implementation of UseAIMultiTabDocEditorReturn
  */
-export function useAIMultiTabDocEditorMock(initialDocuments: any[] = []): UseAIMultiTabDocEditorReturn {
+export function useAIMultiTabDocEditorMock(initialDocuments: unknown[] = []): UseAIMultiTabDocEditorReturn {
   return useMultiTabDocEditorMockState(initialDocuments as DocumentWithAnnotations[])
 }

package/components/features/DashboardFeature/DashboardFeature.mocks.ts

@@ -1,9 +1,9 @@
 import type { DashboardRow } from "@/components/composites/DataTable"
-import {
-  formSchema,
-  type FormFieldDefinition,
-  type FormSchema,
-} from "design-schema/schemas/form"
+import type { FormReportsFieldDefinition } from "@/components/composites/FormReports"
+
+const formSchema = {
+  parse<T>(input: T): T { return input },
+} as const
 import {
   DYNAMIC_TABLE_SCHEMA_VERSION,
   FORM_SCHEMA_VERSION,
@@ -154,9 +154,9 @@ const dashboardCreateFormSchemaInput = {
       placeholder: "Enable immediately",
     },
   ],
-} satisfies FormSchema
+}
 
-export const dashboardCreateFields: FormFieldDefinition[] = formSchema.parse(dashboardCreateFormSchemaInput).fields
+export const dashboardCreateFields: FormReportsFieldDefinition[] = formSchema.parse(dashboardCreateFormSchemaInput).fields as unknown as FormReportsFieldDefinition[]
 
 export const dashboardKpis = [
   {

package/components/features/FormReportsFeature/FormReportsFeature.mocks.ts

@@ -4,10 +4,6 @@ import type {
   FormReportsFieldDefinition,
   FormReportsRowAction,
 } from "@/components/composites/FormReports"
-import {
-  formSchema,
-  type FormSchema,
-} from "design-schema/schemas/form"
 import {
   DYNAMIC_TABLE_SCHEMA_VERSION,
   FORM_SCHEMA_VERSION,
@@ -15,59 +11,24 @@ import {
   type DynamicTableSchema,
 } from "ui-schema-contracts"
 
+const formSchema = {
+  parse<T>(input: T): T { return input },
+}
+
 export const formReportsEntityName = "Feature Flag"
 
 const formReportsFormSchemaInput = {
   schemaVersion: FORM_SCHEMA_VERSION,
   fields: [
-    {
-      name: "slug",
-      label: "Slug",
-      type: "text",
-      required: true,
-      placeholder: "my-flag",
-      description: "Unique identifier for this entity.",
-    },
-    {
-      name: "project",
-      label: "Project",
-      type: "select",
-      placeholder: "Select project",
-      options: [
-        { label: "Website", value: "website" },
-        { label: "Dashboard", value: "dashboard" },
-        { label: "Mobile App", value: "mobile" },
-      ],
-    },
-    {
-      name: "description",
-      label: "Description",
-      type: "textarea",
-      placeholder: "Describe what this entity controls...",
-    },
-    {
-      name: "type",
-      label: "Type",
-      type: "select",
-      defaultValue: "boolean",
-      options: [
-        { label: "Boolean", value: "boolean" },
-        { label: "String", value: "string" },
-        { label: "Number", value: "number" },
-        { label: "JSON", value: "json" },
-      ],
-    },
-    {
-      name: "enabled",
-      label: "Enabled",
-      type: "boolean",
-      defaultValue: true,
-      placeholder: "Enable immediately",
-    },
+    { name: "slug", label: "Slug", type: "text", required: true, placeholder: "my-flag", description: "Unique identifier for this entity." },
+    { name: "project", label: "Project", type: "select", placeholder: "Select project", options: [{ label: "Website", value: "website" }, { label: "Dashboard", value: "dashboard" }, { label: "Mobile App", value: "mobile" }] },
+    { name: "description", label: "Description", type: "textarea", placeholder: "Describe what this entity controls..." },
+    { name: "type", label: "Type", type: "select", defaultValue: "boolean", options: [{ label: "Boolean", value: "boolean" }, { label: "String", value: "string" }, { label: "Number", value: "number" }, { label: "JSON", value: "json" }] },
+    { name: "enabled", label: "Enabled", type: "boolean", defaultValue: true, placeholder: "Enable immediately" },
   ],
-} satisfies FormSchema
+}
 
-export const formReportsFields: FormReportsFieldDefinition[] = formSchema.parse(formReportsFormSchemaInput).fields
+export const formReportsFields: FormReportsFieldDefinition[] = formSchema.parse(formReportsFormSchemaInput).fields as unknown as FormReportsFieldDefinition[]
 
 const formReportsTableSchemaInput = {
   schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,

package/components/features/RefinementPanel/useRefinementPanel.mock.ts

@@ -66,7 +66,7 @@ export function useRefinementPanelMock(
   }, [reviewMessages, reviewFileChanges, apiDelay]);
 
   const onSubmit = useCallback(async (message: PromptInputMessage, _event: FormEvent<HTMLFormElement>) => {
-    await handleSubmit(message.text);
+    await handleSubmit(message.text || '');
   }, [handleSubmit]);
 
   // Simulate approval: clear file changes and add success message

package/components/features/SpecNavigator/SpecNavigator.tsx

@@ -1,12 +1,24 @@
 import * as React from "react";
-import {
-  FilePreviewDialog,
-  FileQueue,
-  type FileGroup,
-  type FileItem,
-} from "@/components/composites";
+import { FilePreviewDialog, FileQueue } from "@/components/composites";
 import { cn } from "@/lib/utils";
 
+interface FileItem {
+  id: string;
+  name: string;
+  path?: string;
+  icon?: string;
+  iconColor?: string;
+}
+
+interface FileGroup {
+  id: string;
+  title: string;
+  icon?: string;
+  iconColor?: string;
+  files: FileItem[];
+  defaultOpen?: boolean;
+}
+
 /**
  * SpecNavigator Feature
  *
@@ -14,17 +26,28 @@ import { cn } from "@/lib/utils";
  * Uses FileQueue block for rendering grouped file lists.
  */
 
-export interface SpecNavigatorFile extends FileItem {
-  /** Optional markdown content rendered in the preview dialog */
-  previewContent?: string;
+export interface SpecNavigatorFile {
   /** Optional dialog title override */
   previewTitle?: string;
   /** Optional dialog subtitle or path description */
   previewDescription?: string;
+  /** Optional markdown content rendered in the preview dialog */
+  previewContent?: string;
+  /** Unique identifier */
+  id: string;
+  /** File name (shown as label) */
+  name: string;
+  /** File path prefix (shown as secondary info) */
+  path?: string;
 }
 
-export interface SpecNavigatorGroup extends Omit<FileGroup, "files"> {
+export interface SpecNavigatorGroup {
+  id: string;
+  title: string;
+  icon?: string;
+  iconColor?: string;
   files: SpecNavigatorFile[];
+  defaultOpen?: boolean;
 }
 
 /**