Generated by Spark: Fix all reported errors.

src/components/AtomicComponentDemo.tsx

@@ -29,19 +29,15 @@ export function AtomicComponentDemo() {
     searchFields: ['title'],
   })
 
-  const { filtered: filteredByPriority, filters, addFilter, clearFilters } = useFilter({
-    items: filtered,
-  })
-
   const showCompleted = useToggle({ initial: true })
   const addDialog = useDialog()
 
   const displayedTasks = showCompleted.value 
-    ? filteredByPriority 
-    : filteredByPriority.filter(t => t.status !== 'success')
+    ? filtered 
+    : filtered.filter(t => t.status !== 'success')
 
   const handleAddTask = () => {
-    create({
+    crud.create({
       id: Date.now(),
       title: 'New Task',
       status: 'pending',
@@ -97,17 +93,6 @@ export function AtomicComponentDemo() {
         placeholder="Search tasks..."
       />
 
-      {filters.length > 0 && (
-        <div className="flex gap-2 items-center">
-          <span className="text-sm text-muted-foreground">
-            {filters.length} filter(s) active
-          </span>
-          <Button size="sm" variant="ghost" onClick={clearFilters}>
-            Clear filters
-          </Button>
-        </div>
-      )}
-
       <div className="space-y-3">
         {displayedTasks.map(task => (
           <Card key={task.id}>
@@ -119,7 +104,7 @@ export function AtomicComponentDemo() {
                   <Button
                     variant="ghost"
                     size="sm"
-                    onClick={() => remove(task.id)}
+                    onClick={() => crud.delete(task.id)}
                   >
                     <Trash size={16} />
                   </Button>

src/components/ComprehensiveDemoPage.tsx

@@ -7,6 +7,7 @@ import { Separator } from '@/components/ui/separator'
 import { Progress } from '@/components/ui/progress'
 import { useCRUD, useSearch } from '@/hooks/data'
 import { useDialog } from '@/hooks/ui'
+import { useKV } from '@github/spark/hooks'
 import { SearchBar } from '@/components/molecules/SearchBar'
 import { DataList, ActionButton, IconButton } from '@/components/atoms'
 import { Plus, Trash, Check, Clock } from '@phosphor-icons/react'
@@ -22,10 +23,11 @@ interface Todo {
 }
 
 export function ComprehensiveDemoPage() {
-  const { items: todos, create, update, remove } = useCRUD<Todo>({
-    key: 'json-demo-todos',
-    defaultValue: [],
-    persist: true,
+  const [todos, setTodos] = useKV<Todo[]>('json-demo-todos', [])
+  
+  const crud = useCRUD<Todo>({
+    items: todos,
+    setItems: (updater) => setTodos(updater),
   })
 
   const { query, setQuery, filtered } = useSearch({
@@ -46,7 +48,7 @@ export function ComprehensiveDemoPage() {
 
   const handleAddTodo = () => {
     if (newTodoText.trim()) {
-      create({
+      crud.create({
         id: Date.now(),
         text: newTodoText,
         completed: false,
@@ -63,13 +65,13 @@ export function ComprehensiveDemoPage() {
   const handleToggleTodo = (id: number) => {
     const todo = todos.find(t => t.id === id)
     if (todo) {
-      update(id, { completed: !todo.completed })
+      crud.update(id, { completed: !todo.completed })
       toast.success(todo.completed ? 'Task marked as pending' : 'Task completed!')
     }
   }
 
   const handleDeleteTodo = (id: number) => {
-    remove(id)
+    crud.delete(id)
     toast.success('Task deleted')
   }
 

src/components/ui/button.tsx

@@ -56,4 +56,9 @@ function Button({
   )
 }
 
+export type ButtonProps = ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }
+
 export { Button, buttonVariants }