import { usePath, useChildren } from '@treenity/react/hooks';
import { TodoItem } from './types';

// Typed proxy — reactive data + action methods
const item = usePath('/todo/list/1', TodoItem);
item.title;          // reactive read
await item.toggle(); // tRPC mutation → Immer patch → SSE broadcast

// URI-based read (returns raw data)
const node = usePath('/todo/list/1');

// Reactive children list
const children = useChildren('/todo/list');

import { register } from '@treenity/core';

register('todo.item', 'react', ({ value, onChange }) => (
  <div>
    <span>{value.title}</span>
    <button onClick={() => onChange({ ...value, done: !value.done })}>
      {value.done ? 'Undo' : 'Done'}
    </button>
  </div>
));

import { Render } from '@treenity/react/context';

<Render value={node} onChange={handleChange} />

import { Button } from '@treenity/react/ui/button';
import { Slider } from '@treenity/react/ui/slider';