Single panel: outline tree with slots, node search with type filter

The outline and blocks are no longer tabs: one panel shows the
outline tree, the new-block palette and a search over existing
nodes. Outline rows drag to reorder (same snap engine, explicit
gap targets), palette blocks and searched nodes drop onto the
outline gaps as well as the page.

Named slots (x-graph.connections, e.g. a pdp's info-section /
3d-accessories / model) render as groups under their block with
allowed types, live counts and a slot-limited insert picker.
Drops that fit no plain-children rule resolve to the first
accepting slot; existing nodes link via graft tree.link.

Adds Api.searchNodes, schema connections helpers, handle-aware
controller ops (linkExisting, insertIntoSlot, dropExisting) and
mock support for /api/nodes listing and graft links.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

src/editors/builtin.tsx

@@ -3,7 +3,14 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { mountMarkdownEditor } from '@k6n/cms-editor'
 import { diffData } from '../diff'
-import { allowedChildren, sortGroups, typeName } from '../schema'
+import { allowedChildren, connectionsOf, sortGroups, typeName } from '../schema'
+
+/** Types that fit a named slot; empty `to` means any known type. */
+function slotTypes(schema: unknown, all: string[], handle: string): string[] {
+  const def = connectionsOf(schema as never)[handle]
+  if (!def) return []
+  return def.to.length ? def.to.filter((t) => all.includes(t)) : all
+}
 import { useEditorState } from '../ui/hooks'
 import { getIn, parsePath } from '../page/infer'
 import type { Blueprint } from '../api'
@@ -81,7 +88,7 @@ function RawJson({ node, ctrl, close }: EditorProps) {
 
 // --- Insert picker: children allowed by x-graph + blueprints ---------------------
 
-export function InsertPicker({ parentId, index, ctrl, close }: { parentId: string; index?: number; ctrl: Controller; close(): void }) {
+export function InsertPicker({ parentId, handle, index, ctrl, close }: { parentId: string; handle?: string; index?: number; ctrl: Controller; close(): void }) {
   const [state, setState] = useState<{ types: string[]; blueprints: Blueprint[] } | { error: string } | null>(null)
   useEffect(() => {
     let live = true
@@ -89,8 +96,8 @@ export function InsertPicker({ parentId, index, ctrl, close }: { parentId: strin
       try {
         const parent = await ctrl.node(parentId)
         const [schema, all, blueprints] = await Promise.all([ctrl.schema(parent.dataType), ctrl.api.types(), ctrl.api.blueprints()])
-        const types = allowedChildren(schema, all.map(typeName)).filter((t) => !ctrl.isStaticRoot(t))
-        if (live) setState({ types, blueprints })
+        const types = (handle ? slotTypes(schema, all.map(typeName), handle) : allowedChildren(schema, all.map(typeName))).filter((t) => !ctrl.isStaticRoot(t))
+        if (live) setState({ types, blueprints: handle ? [] : blueprints })
         void ctrl.loadSchemas(types) // for grouping
       } catch (e) {
         if (live) setState({ error: (e as Error).message })
@@ -99,7 +106,7 @@ export function InsertPicker({ parentId, index, ctrl, close }: { parentId: strin
     return () => {
       live = false
     }
-  }, [parentId, ctrl])
+  }, [parentId, handle, ctrl])
   useEditorState((st) => st.schemasVersion)
   if (!state) return <p className="cms-muted">Loading…</p>
   if ('error' in state) return <p className="cms-error">{state.error}</p>
@@ -114,7 +121,7 @@ export function InsertPicker({ parentId, index, ctrl, close }: { parentId: strin
       title={t}
       onClick={async () => {
         close()
-        await ctrl.insert(parentId, t, index !== undefined ? { index } : {})
+        await ctrl.insert(parentId, t, { ...(index !== undefined ? { index } : {}), ...(handle ? { handle } : {}) })
       }}
     >
       <TypeIcon type={t} size={20} />