Why place

// src/pages/hello.page.tsx
import { page } from '@place/component'

export default page('/hello', {
  view: () => <h1>Hello</h1>,
})

// app/hello/page.tsx
export default function Page() {
  return <h1>Hello</h1>
}
// (file path = route; no value to reference)

// app/routes/hello.tsx
export default function Hello() {
  return <h1>Hello</h1>
}
// (file path = route; framework wires it via convention)

export default page('/posts/:id', {
  on: {
    save: async (input: { title: string }, { params }) => {
      await db.posts.update(params.id, input)
      return { ok: true }
    },
  },
  view: () => /* call pageRef.save({...}) — fully typed */ null,
})

// app/posts/[id]/page.tsx
'use server'  // ← required marker
export async function save(formData: FormData) {
  // formData is untyped; you destructure strings.
  await db.posts.update(/* id from cookie? closure? */, {
    title: formData.get('title') as string,
  })
}
// caller imports save(), passes FormData; types lost.

import { defineCapability } from '@place/capability'

export const NoteStoreCap = defineCapability<NoteStore>('NoteStore', {
  clientOnly: true,
})

// In a page:
const store = NoteStoreCap.use()  // typed; provided once at app config

const NoteStoreContext = createContext<NoteStore | null>(null)

function Provider({ children }: { children: ReactNode }) {
  const value = useMemo(() => createStore(), [])
  return <NoteStoreContext.Provider value={value}>{children}</NoteStoreContext.Provider>
}

function useStore() {
  const v = useContext(NoteStoreContext)
  if (!v) throw new Error('NoteStoreContext not provided')
  return v
}
// 12 lines for what one defineCapability does.