@xenosystem/blocks 0.16.1 → 0.18.0

package/dist/edit/index.d.ts

@@ -6756,12 +6756,28 @@ interface XenoTreeGlyph {
  * and another names lucide icons. A single `icon: string` field forces every consumer to guess
  * which it is holding, and guessing renders `'📄'` as a missing-icon box.
  */
+/** What a node carries when dragged out of the panel (see `XenoTreeNode.dragOut`). */
+interface XenoTreeDragOut {
+    kind: string;
+    payload?: unknown;
+}
 type XenoTreeIcon = {
     kind: 'lucide';
     name: string;
 } | {
     kind: 'text';
     value: string;
+}
+/**
+ * A thumbnail the HOST rendered — a data or blob URL — drawn in the row's icon slot by
+ * `chrome/Thumb`. The panel decodes and fetches nothing (the no-pixel-capability rule stands; the
+ * pixels are the host's). Default frame 44×32.
+ */
+ | {
+    kind: 'image';
+    src: string;
+    width?: number;
+    height?: number;
 };
 /** What a node permits. Absent ⇒ permitted. */
 interface XenoTreeCaps {
@@ -6842,6 +6858,15 @@ interface XenoTreeNode {
     columns?: Record<string, string>;
     /** Hover actions. */
     actions?: XenoTreeAction[];
+    /**
+     * The node may be dragged OUT of the panel and dropped on the host's own surface — a library
+     * component onto a canvas, a clip onto a timeline. `kind` is the host's vocabulary word
+     * (`'component'`, `'clip'`); `payload` is carried back verbatim on the `dragOut` output. The drag
+     * itself is the panel's pointer drag: when it is released outside the panel's rows, the panel
+     * emits `dragOut` with the release point and the host decides what a drop there means. A node
+     * without this is only reorderable inside the tree.
+     */
+    dragOut?: XenoTreeDragOut;
     /**
      * A stable identity for the *thing* this node points at — a resolved real path, an inode, a
      * document id.
@@ -6865,7 +6890,9 @@ interface XenoTreeNode {
     title?: string;
 }
 /** Which adapter produced this source. Presentation hint + telemetry; never behaviour. */
-type XenoTreeSourceKind = 'scene-graph' | 'entity' | 'project-entities' | 'document-pages' | 'filesystem' | 'derived-outline' | 'org' | 'custom';
+type XenoTreeSourceKind = 'scene-graph' | 'entity' | 'project-entities' | 'document-pages'
+/** A library of reusable things — components, assets, presets — usually with `image` icons and `dragOut`. */
+ | 'library' | 'filesystem' | 'derived-outline' | 'org' | 'custom';
 /**
  * The source-level lifecycle — one incumbent's six-state machine, hoisted.
  *
@@ -7361,14 +7388,19 @@ declare class TreeController {
     /** Update the hovered drop target. */
     dragOver(targetId: string, offsetY: number): DropPosition;
     /**
-     * Complete the drag, emitting a `move` intent when the drop is legal.
+     * Complete the drag, emitting a `move` intent when the drop is legal — or, when the release was
+     * OUTSIDE the panel (`outside` given) and every dragged node declares `dragOut` of one kind, a
+     * `dragOut` event carrying the release point for the host to hit-test.
      *
      * A refused drop emits **nothing** — and the refusal that matters most is the descendant one,
      * which lives in `@xenosystem/tree-core` because two shipping apps delete a whole subtree without it.
      *
      * @returns `true` if a move intent was emitted.
      */
-    endDrag(): boolean;
+    endDrag(outside?: {
+        clientX: number;
+        clientY: number;
+    }): boolean;
     /** Abandon the drag. */
     cancelDrag(): void;
     /** Descendants of a node, through the shared recursive walk. */
@@ -7496,6 +7528,10 @@ interface IconHalf {
     iconName: string | null;
     /** Literal text (emoji) instead of a glyph. */
     iconText: string | null;
+    /** A host-rendered thumbnail (`chrome/Thumb`). */
+    iconSrc: string | null;
+    iconWidth: number;
+    iconHeight: number;
 }
 interface TreeViewAction extends IconHalf {
     key: string;

package/dist/edit/index.js

@@ -13114,16 +13114,29 @@ var TreeController = class {
     return result.position;
   }
   /**
-   * Complete the drag, emitting a `move` intent when the drop is legal.
+   * Complete the drag, emitting a `move` intent when the drop is legal — or, when the release was
+   * OUTSIDE the panel (`outside` given) and every dragged node declares `dragOut` of one kind, a
+   * `dragOut` event carrying the release point for the host to hit-test.
    *
    * A refused drop emits **nothing** — and the refusal that matters most is the descendant one,
    * which lives in `@xenosystem/tree-core` because two shipping apps delete a whole subtree without it.
    *
    * @returns `true` if a move intent was emitted.
    */
-  endDrag() {
+  endDrag(outside) {
     const drag = this.drag;
     this.drag = null;
+    if (drag && outside) {
+      const nodes = drag.ids.map((id) => this.source?.nodes[id]).filter((n) => !!n);
+      const outs = nodes.map((n) => n.dragOut).filter((d) => !!d);
+      if (nodes.length > 0 && outs.length === nodes.length && outs.every((d) => d.kind === outs[0].kind)) {
+        this.host.emit("dragOut", { ids: nodes.map((n) => n.id), kind: outs[0].kind, payloads: outs.map((d) => d.payload), clientX: outside.clientX, clientY: outside.clientY });
+        this.notify();
+        return true;
+      }
+      this.notify();
+      return false;
+    }
     if (!drag || !drag.targetId || !drag.position) {
       this.notify();
       return false;
@@ -13248,6 +13261,12 @@ var treeManifest = {
       schema: WELL_KNOWN_PORT_SCHEMAS8.TREE_OP,
       description: "Everything the panel asks for \u2014 select, open, setExpanded, loadChildren, move, rename, create, delete, setProp, action. INTENTS ONLY: the host performs, pins ids, and pushes one undo entry."
     },
+    {
+      id: "dragOut",
+      name: "Dragged Out",
+      type: "object",
+      description: "{ ids, kind, payloads, clientX, clientY } \u2014 a pointer drag of nodes that declare `dragOut` was released OUTSIDE the panel. The host hit-tests its own surface at the point and performs the drop (place an instance, insert a clip); the panel places nothing. Nodes without `dragOut` never emit this."
+    },
     {
       id: "selection",
       name: "Selection",
@@ -13563,12 +13582,13 @@ import {
   TextButton as TextButton7,
   Toolbar as Toolbar7,
   ToolbarGroup as ToolbarGroup5,
-  VirtualWindow as VirtualWindow3
+  VirtualWindow as VirtualWindow3,
+  Thumb
 } from "@xenosystem/components/chrome";
 
 // src/edit/tree/declaration.ts
 import { computeWindow as computeWindow3 } from "@xenosystem/tree-core";
-var iconHalf = (icon) => icon.kind === "text" ? { iconName: null, iconText: icon.value } : { iconName: icon.name, iconText: null };
+var iconHalf = (icon) => icon.kind === "text" ? { iconName: null, iconText: icon.value, iconSrc: null, iconWidth: 0, iconHeight: 0 } : icon.kind === "image" ? { iconName: null, iconText: null, iconSrc: icon.src, iconWidth: icon.width ?? 44, iconHeight: icon.height ?? 32 } : { iconName: icon.name, iconText: null, iconSrc: null, iconWidth: 0, iconHeight: 0 };
 function treeViewState(c, options = {}) {
   const { overscan = 6, showSearch = true, columns, emptyHint } = options;
   const state = c.getState();
@@ -13750,6 +13770,7 @@ var nodeIcon = () => ({
   component: "fragment",
   children: [
     { component: "icons/TreeKind", when: { item: "iconName" }, props: { name: { item: "iconName" } } },
+    { component: "chrome/Thumb", when: { item: "iconSrc" }, props: { src: { item: "iconSrc" }, width: { item: "iconWidth" }, height: { item: "iconHeight" } } },
     { component: "chrome/Text", when: { item: "iconText" }, props: { role: { value: "caption" } }, children: [text10({ item: "iconText" })] }
   ]
 });
@@ -13872,8 +13893,9 @@ function TreePanelView({ controller, ...options }) {
   useSyncExternalStore10(controller.subscribe, controller.getState, controller.getState);
   const view = treeViewState(controller, options);
   const ui10 = (intent) => applyTreeUi(controller, intent, options);
-  const icon = (name, textValue) => /* @__PURE__ */ jsxs11(Fragment9, { children: [
+  const icon = (name, textValue, src = null, w = 0, h = 0) => /* @__PURE__ */ jsxs11(Fragment9, { children: [
     name ? /* @__PURE__ */ jsx12(TreeIcon, { name }) : null,
+    src ? /* @__PURE__ */ jsx12(Thumb, { src, width: w, height: h }) : null,
     textValue ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: textValue }) : null
   ] });
   const row2 = (r) => /* @__PURE__ */ jsx12(
@@ -13888,7 +13910,7 @@ function TreePanelView({ controller, ...options }) {
       expanded: r.expanded,
       dropHint: r.dropHint,
       title: r.dropTitle,
-      icon: icon(r.iconName, r.iconText),
+      icon: icon(r.iconName, r.iconText, r.iconSrc, r.iconWidth, r.iconHeight),
       label: /* @__PURE__ */ jsxs11(Fragment9, { children: [
         r.renaming ? /* @__PURE__ */ jsx12(Input5, { autoFocus: true, value: r.draft, label: "Name", onChange: (value) => ui10({ kind: "renameDraft", value }), onBlur: () => ui10({ kind: "commitRename" }), onKeyDown: (e) => ui10({ kind: "renameKey", key: e.key }) }) : null,
         !r.renaming ? r.label : null
@@ -13990,7 +14012,10 @@ function TreeScroller({ controller, children }) {
         e.currentTarget.releasePointerCapture(e.pointerId);
       } catch {
       }
-      if (press?.dragging) controller.endDrag();
+      if (!press?.dragging) return;
+      const r = scrollRef.current?.getBoundingClientRect();
+      const inside = !!r && e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+      controller.endDrag(inside ? void 0 : { clientX: e.clientX, clientY: e.clientY });
     },
     [controller]
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "XENO Blocks — rung 3 of the front ladder: components composed into a contract-bearing unit (manifest: ports, intents, commands, agent surface), rendered by @xenosystem/workbench. ONE package, one subpath per family (/auth, /edit, /data, /time, /ops, /trust, /agent), one named export per block — XENO PACKAGE NAMING - STANDARD.md.",
   "license": "UNLICENSED",
   "type": "module",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": ">=0.3.4 <1",
-    "@xenosystem/components": ">=0.33.0 <1",
+    "@xenosystem/components": ">=0.34.0 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": ">=0.0.1",
     "@xenosystem/elements-react": ">=0.0.1",
@@ -81,7 +81,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.4",
-    "@xenosystem/components": "^0.33.0",
+    "@xenosystem/components": "^0.34.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",