@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/treeView/treeView.component.tsx

@@ -0,0 +1,514 @@
+// Smart widget: the edited page's node OUTLINE — selection, node removal, and the MOVE mode. The
+// live-preview stays pure in `canvas`; this is the structural view.
+//
+// It shows whether the draft is on disk, but does not put it there: writing is the workbench's
+// business (EditingAutosave, armed by useEditingSession), not this panel's. It used to live here,
+// which meant closing this tab silently stopped saving the page.
+import { defineComponentSide, markInternalTile } from '@mosetta/react';
+import '../content/workbenchScale.css';
+import './treeView.css';
+import { CSSProperties, Fragment, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { DEFAULT_SLOT } from '@mosetta/react';
+import { EditingSession, findNodeDoc, IEditingState, IBlueprintNodeDoc, isOutletReference, unitOf } from '@mosetta/content';
+import { unitOwnerOf, UNIT_ID_SEPARATOR } from '@mosetta/content/units';
+import { useEditingSession } from '../content/useEditingSession';
+import { TooltipHost } from '../content/tooltips';
+import { useCtrlHeld } from '../content/useCtrlHeld';
+import { blocksLabel, EditingNotices, noticesOf } from '../content/editingNotices';
+import { useDi, useDiOptional, useIsPreviewMode } from '@mosetta/react';
+import { DI_CONTAINER_TOKEN } from '@mosetta/di';
+import { DOCK_TAB_TOKEN } from '@mosetta/ui';
+import { useProjectPrefabs } from '../content/projectPrefabs';
+import { disconnectedOf, useDisabledDistributions } from '../content/disconnected';
+import { useUpgrades } from '../content/blockUpgrades';
+import type { IUpgrade } from '../content/catalogVersions';
+import type { IPrefabTree } from '../content/contentCommon';
+
+const shortName = (reference: string) => {
+  const unit = unitOf(reference);
+  if (unit !== null) return `prefab · ${unit.name}`;
+  return /_n_(.+?)_v_/.exec(reference)?.[1] ?? reference;
+};
+
+// A TOP-LEVEL component on purpose: defined inside TreeView it would be a NEW element type on
+// every render, and react would unmount and remount every row — the panel's scroll clamps to the
+// top the moment the old rows leave. Stable identity → rows update in place, scroll survives.
+interface INodeRowProps {
+  readonly node: IBlueprintNodeDoc;
+  readonly depth: number;
+  readonly doc: IBlueprintNodeDoc;
+  readonly state: IEditingState;
+  readonly session: EditingSession;
+  readonly notices: EditingNotices | null;
+  /** the travelling node with its whole subtree — rows tinted, gaps inside offered to nobody */
+  readonly movingFamily: ReadonlySet<string>;
+  /** a published revision is inspected: rows select, nothing offers to change the tree */
+  readonly readOnly: boolean;
+  /** the live tree a prefab node embeds, when it is the project's own */
+  readonly prefabTreeOf: (reference: string) => IPrefabTree | null;
+  /** the branches folded away, by node id — the whole document is in view unless folded */
+  readonly folded: ReadonlySet<string>;
+  readonly onFold: (nodeId: string) => void;
+  /** the distributions the project disconnected — their blocks are marked (the site leaves them out) */
+  readonly off: readonly string[];
+  /** the nodes whose block has a newer version, by id — marked with it (ADR-0061) */
+  readonly upgrades: ReadonlyMap<string, IUpgrade>;
+}
+
+const FoldIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M6 3.5L10.5 8 6 12.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+/**
+ * The blocks a PREFAB brings, under its node — to be seen, not changed: they are the prefab's, and
+ * change in the prefab itself. A click on one selects it as itself, read-only — framed in the
+ * canvas, its settings shown with the way to the prefab (prefabParts.ts); the outlet is the page's
+ * place, not a block, and a click on it selects the prefab node. The node's own blocks (the page's)
+ * sit where the prefab's OUTLET is, editable as ever.
+ */
+function PrefabRows({ nodes, depth, owner, state, session, body }: {
+  nodes: readonly IBlueprintNodeDoc[];
+  depth: number;
+  owner: string;
+  state: IEditingState;
+  session: EditingSession;
+  body: (depth: number) => ReactNode;
+}) {
+  return (
+    <>
+      {nodes.map((n) => {
+        const outlet = isOutletReference(n.reference);
+        // the id the page knows the block by — the preview's expanded one
+        const partId = `${owner}${UNIT_ID_SEPARATOR}${n.id}`;
+        const selected = !outlet && state.selectedNodeId === partId;
+        const hovered = !outlet && !selected && state.hoveredNodeId === partId;
+        return (
+          <Fragment key={n.id}>
+            <div className={`tree-view__node tree-view__node--prefab${selected ? ' tree-view__node--selected' : ''}${hovered ? ' tree-view__node--hovered' : ''}`}
+                 data-test-id="tree-prefab-row"
+                 data-prefab-block={n.id}
+                 data-part-id={outlet ? undefined : partId}
+                 data-selected={selected || undefined}
+                 data-tooltip={outlet
+                   ? 'Where the page\'s own blocks go inside the prefab'
+                   : 'A block of the prefab — seen here, changed in the prefab itself'}
+                 style={{ paddingLeft: `${8 + depth * 14}px` }}
+                 onClick={(e) => {
+                   e.stopPropagation();
+                   session.selectNode(outlet ? owner : partId);
+                 }}>
+              <span className="tree-view__label">{shortName(n.reference)}</span>
+            </div>
+            {outlet
+              ? body(depth)
+              : <PrefabRows nodes={n.children ?? []}
+                            depth={depth + 1}
+                            owner={owner}
+                            state={state}
+                            session={session}
+                            body={body} />}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}
+
+/** the ids of the nodes above `id`, the root first — empty for the root and for an unknown id */
+function ancestorsOf(root: IBlueprintNodeDoc, id: string): string[] {
+  const walk = (node: IBlueprintNodeDoc, trail: string[]): string[] | null => {
+    if (node.id === id) return trail;
+    for (const child of node.children ?? []) {
+      const found = walk(child, [...trail, node.id]);
+      if (found) return found;
+    }
+    return null;
+  };
+  return walk(root, []) ?? [];
+}
+
+const hasOutlet = (nodes: readonly IBlueprintNodeDoc[]): boolean => nodes.some((n) => isOutletReference(n.reference) || hasOutlet(n.children ?? []));
+
+// EVERY slot with children gets its own titled section — the default one included: the outline
+// shows WHERE a node sits, always. A slot row is not a node; it is a DOOR to its children —
+// a Ctrl-click on it picks (or releases) all of them, the row lights when every one is in.
+function NodeRow({ node, depth, doc, state, session, notices, movingFamily, readOnly, prefabTreeOf, folded, onFold, off, upgrades }: INodeRowProps) {
+  const movingId = state.movingNodeId;
+  const children = node.children ?? [];
+  const inDefaultSlot = (child: IBlueprintNodeDoc) => !child.slot || child.slot === DEFAULT_SLOT;
+  const sections = new Map<string, IBlueprintNodeDoc[]>();
+  for (const child of children) {
+    const slotName = inDefaultSlot(child) ? DEFAULT_SLOT : child.slot!;
+    sections.set(slotName, [...(sections.get(slotName) ?? []), child]);
+  }
+  // EMPTY slots show too: the document only knows slots with children, the running page's
+  // declarations (fed by the canvas) cover the rest
+  for (const declared of state.declaredSlots) {
+    if (declared.parentId === node.id && !sections.has(declared.slot)) sections.set(declared.slot, []);
+  }
+  // a SELECTED slot must not vanish with its children (a cut empties it, the paste puts them
+  // back INTO it) — an empty section is synthesized for it
+  const selSlot = state.selectedSlot;
+  if (selSlot && selSlot.parentId === node.id && !sections.has(selSlot.slot)) {
+    sections.set(selSlot.slot, []);
+  }
+  // the SAME language as the canvas: blue = the ordinary selection, yellow = the Ctrl mode.
+  // Pickedness is per element (a flat set): a row is lit iff ITS node is picked
+  const inMulti = state.multiSelectedIds.includes(node.id);
+  // …and the inspector's hover echoes here as a PALE wash — pointing at a block in any canvas
+  // marks its row, quieter than a selection (the selection keeps the louder colour)
+  const isHovered = state.hoveredNodeId === node.id && state.selectedNodeId !== node.id;
+  const slotRow = (slotName: string, kids: IBlueprintNodeDoc[], base: number) => {
+    const allPicked = kids.length > 0 && kids.every((kid) => state.multiSelectedIds.includes(kid.id));
+    const isSelected = selSlot?.parentId === node.id && selSlot.slot === slotName;
+    return (
+      <div className={`tree-view__slot${allPicked ? ' tree-view__slot--multi' : ''}${isSelected ? ' tree-view__slot--selected' : ''}`}
+           data-test-id="tree-slot-row"
+           data-tooltip="Select this slot — a paste lands inside it · Ctrl+click picks every block in it"
+           data-slot={slotName}
+           data-slot-of={node.id}
+           data-selected={isSelected || undefined}
+           data-multi-selected={allPicked || undefined}
+           style={{ paddingLeft: `${8 + (base + 1) * 14}px` }}
+           onClick={(e) => {
+             e.stopPropagation();
+             // in the move mode a click anywhere but a tip means "never mind"
+             if (movingId) {
+               session.cancelMove();
+               return;
+             }
+             // the slot is a DOOR: Ctrl passes the pick to its children; a plain click makes
+             // the slot itself the (blue) selection — copy/cut its children, paste inside
+             if (e.ctrlKey || e.metaKey) session.toggleMultiSelectSlot(node.id, slotName);
+             else session.selectSlot(node.id, slotName);
+           }}>
+        #{slotName}
+      </div>
+    );
+  };
+  /**
+   * One legal landing place, standing IN the gap between rows: the zone is slim in the flow but
+   * its hit area reaches halfway into both neighbouring rows (negative margins), so "hovering
+   * between the centres of two rows" is literal. The tip inside shows on zone hover; clicking
+   * it commits the move.
+   */
+  const moveZone = (slotName: string, index: number, zoneDepth: number) => {
+    if (!movingId || movingFamily.has(node.id)) return null;
+    // the two positions around the travelling node itself are the same place it already holds
+    const kids = sections.get(slotName) ?? [];
+    const pos = kids.findIndex((kid) => kid.id === movingId);
+    if (pos !== -1 && (index === pos || index === pos + 1)) return null;
+    return (
+      // the skewer's LEFT end starts at the landing depth: the line itself says how deep
+      // the traveller will sit
+      <div className="tree-view__move-zone"
+           data-test-id="tree-move-zone"
+           data-move-parent={node.id}
+           data-move-slot={slotName}
+           data-move-index={index}
+           style={{ '--skewer-left': `${8 + zoneDepth * 14}px` } as CSSProperties}
+           onClick={(e) => {
+             e.stopPropagation(); session.cancelMove(); // beside the tip means "never mind"
+           }}>
+        <span className="tree-view__move-tip"
+              data-test-id="tree-move-tip"
+              onClick={(e) => {
+                e.stopPropagation();
+                session.commitMove(node.id, slotName, index);
+                notices?.show('move', blocksLabel('Moved', 1));
+              }}>
+          move here
+        </span>
+      </div>
+    );
+  };
+  // the node's own blocks, slot by slot — under the node, or where a prefab's outlet puts them
+  const body = (base: number) => [...sections].map(([slot, slotChildren]) => (
+    <Fragment key={slot}>
+      {slotRow(slot, slotChildren, base)}
+      {slotChildren.map((c, index) => (
+        <Fragment key={c.id}>
+          {moveZone(slot, index, base + 2)}
+          <NodeRow node={c}
+                   depth={base + 2}
+                   doc={doc}
+                   state={state}
+                   session={session}
+                   notices={notices}
+                   movingFamily={movingFamily}
+                   readOnly={readOnly}
+                   prefabTreeOf={prefabTreeOf}
+                   folded={folded}
+                   onFold={onFold}
+                   off={off}
+                   upgrades={upgrades} />
+        </Fragment>
+      ))}
+      {moveZone(slot, slotChildren.length, base + 2)}
+    </Fragment>
+  ));
+  const prefab = prefabTreeOf(node.reference);
+  // a branch folds when there is something under the row: children, declared slots, a prefab's
+  // blocks. The root never folds — a page folded to one line says nothing
+  const foldable = node.id !== doc.id && (sections.size > 0 || prefab !== null);
+  const isFolded = foldable && folded.has(node.id);
+  const disconnected = node.id === doc.id ? null : disconnectedOf(node.reference, off);
+  const upgrade = upgrades.get(node.id);
+  return (
+    <>
+      <div className={`tree-view__node${state.selectedNodeId === node.id ? ' tree-view__node--selected' : ''}${inMulti ? ' tree-view__node--multi' : ''}${isHovered ? ' tree-view__node--hovered' : ''}${movingFamily.has(node.id) ? ' tree-view__node--moving' : ''}${disconnected ? ' tree-view__node--off' : ''}`}
+           data-test-id="tree-node-row"
+           data-node-id={node.id}
+           data-disconnected={disconnected ?? undefined}
+           data-selected={state.selectedNodeId === node.id || undefined}
+           data-multi-selected={inMulti || undefined}
+           data-hovered={isHovered || undefined}
+           data-moving={movingFamily.has(node.id) || undefined}
+           style={{ paddingLeft: `${8 + depth * 14}px` }}
+           onClick={(e) => {
+             e.stopPropagation();
+             if (movingId) {
+               session.cancelMove();
+               return;
+             }
+             if (e.ctrlKey || e.metaKey) session.toggleMultiSelect(node.id);
+             else session.selectNode(node.id);
+           }}>
+        {foldable ? (
+          <button type="button"
+                  className="tree-view__fold"
+                  data-test-id="tree-fold-button"
+                  data-folded={isFolded || undefined}
+                  aria-label={isFolded ? 'Unfold this block' : 'Fold this block'}
+                  data-tooltip={isFolded ? 'Show what is inside this block' : 'Hide what is inside this block'}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onFold(node.id);
+                  }}>
+            {FoldIcon}
+          </button>
+        ) : <span className="tree-view__fold tree-view__fold--none"
+                  aria-hidden="true" />}
+        {/* the root reads like every other row — by its block, not by its id: a prefab's root is
+            its preview frame (its blocks go where the prefab is placed), and a node id there
+            (`cta-frame`) looked like a block that does not exist */}
+        <span className="tree-view__label"
+              data-tooltip={node.id === doc.id && state.kind === 'prefabs'
+                ? 'The prefab’s frame: it previews the blocks here; on a page, only the blocks are placed'
+                : undefined}>
+          {node.id === doc.id ? `${shortName(node.reference)} (root)` : shortName(node.reference)}
+        </span>
+        {upgrade ? (
+          <span className="tree-view__up"
+                data-test-id="tree-outdated"
+                data-version={upgrade.toVersion}
+                data-tooltip={`${upgrade.fromVersion} here — ${upgrade.toVersion} is out: update it in its settings, or all at once from Updates`}>
+            ↑ {upgrade.toVersion}
+          </span>
+        ) : null}
+        {disconnected ? (
+          <span className="tree-view__off"
+                data-test-id="tree-disconnected"
+                data-tooltip="Its tile palette is disconnected from this project: the site does not show this block">
+            off
+          </span>
+        ) : null}
+        {node.id !== doc.id && !movingId && !readOnly && (
+          <span className="tree-view__row-actions">
+            <button type="button"
+                    className="tree-view__move"
+                    data-test-id="tree-move-button"
+                    data-action="move"
+                    data-tooltip={'Move this block — then click "move here" where it should go'}
+                    onClick={(e) => {
+                      e.stopPropagation(); session.startMove(node.id);
+                    }}>
+              <svg viewBox="0 0 16 16"
+                   aria-hidden="true">
+                <path d="M8 2.5v11M2.5 8h11M6 4.5L8 2.5l2 2M6 11.5L8 13.5l2-2M4.5 6L2.5 8l2 2M11.5 6L13.5 8l-2 2"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.4" />
+              </svg>
+            </button>
+            <button type="button"
+                    className="tree-view__remove"
+                    data-test-id="tree-remove-button"
+                    data-action="remove"
+                    data-tooltip="Remove this block with everything inside it (undo brings it back)"
+                    onClick={(e) => {
+                      e.stopPropagation(); session.removeNode(node.id);
+                    }}>
+              ✕
+            </button>
+          </span>
+        )}
+      </div>
+      {isFolded ? null : prefab ? (
+        <>
+          <PrefabRows nodes={prefab.doc.children}
+                      depth={depth + 1}
+                      owner={node.id}
+                      state={state}
+                      session={session}
+                      body={body} />
+          {/* no outlet: the prefab's blocks, then the node's own */}
+          {hasOutlet(prefab.doc.children) ? null : body(depth)}
+        </>
+      ) : body(depth)}
+    </>
+  );
+}
+
+// ONE component, live in the bubble too: the specimen renders against a real session that the
+// editor facet's previewServices seed with a small page (previewEnvironment.ts) — the panel
+// itself never knows it is being looked at.
+function TreeView() {
+  const { session, state } = useEditingSession();
+  const notices = noticesOf(useDi(DI_CONTAINER_TOKEN));
+  const ctrlHeld = useCtrlHeld();
+  // the blocks of disconnected distributions stay in the document; their rows say the site leaves them out
+  const off = useDisabledDistributions();
+  // …and a block with a newer version says so on its row (ADR-0061)
+  const { outdated } = useUpgrades(state.doc, !useIsPreviewMode());
+  const upgrades = useMemo(() => new Map(outdated.map((node) => [node.nodeId, node.upgrade])), [outdated]);
+  // the tree mirrors the ACTIVE canvas's document — its tab says which one (optional: no dock,
+  // no tab to name)
+  const dockTab = useDiOptional(DOCK_TAB_TOKEN);
+  useEffect(() => {
+    const named = state.kind === 'prefabs' ? `prefab ${state.pageName}` : state.pageName;
+    dockTab?.rename(state.pageName ? `Tree · ${named}` : 'Tree');
+  }, [dockTab, state.kind, state.pageName]);
+  // the project's prefabs, to show what a prefab node brings (a specimen asks no server)
+  const project = useProjectPrefabs(!useIsPreviewMode());
+  // the tree FOLLOWS a selection made elsewhere (a block picked in the canvas): its row comes to
+  // the middle of the panel, as far as the panel scrolls. Scrolling only — the tree never selects
+  // in answer, so a pick here and the canvas following it cannot chase each other. A row clicked
+  // HERE stays where it is: it would slide out from under the pointer
+  const rootRef = useRef<HTMLDivElement>(null);
+  const clickedHere = useRef<string | null>(null);
+  // the branches folded away — kept across the documents this tree shows, keyed by the page
+  const [folded, setFolded] = useState<ReadonlySet<string>>(() => new Set());
+  const foldKey = (nodeId: string): string => `${state.kind}/${state.pageName}/${nodeId}`;
+  const foldedHere = useMemo(() => {
+    const prefix = `${state.kind}/${state.pageName}/`;
+    return new Set([...folded].filter((key) => key.startsWith(prefix)).map((key) => key.slice(prefix.length)));
+  }, [folded, state.kind, state.pageName]);
+  const toggleFold = (nodeId: string): void => setFolded((prev) => {
+    const next = new Set(prev);
+    const key = foldKey(nodeId);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    return next;
+  });
+  useEffect(() => {
+    const id = state.selectedNodeId;
+    const root = rootRef.current;
+    const here = clickedHere.current === id;
+    clickedHere.current = null;
+    if (!id || !root || here) return;
+    // a selection made elsewhere unfolds its way: every folded ancestor opens — for a prefab's
+    // block, its prefab node too, which folds the prefab's rows away
+    const owner = unitOwnerOf(id);
+    if (state.doc) {
+      const ancestors = owner === null ? ancestorsOf(state.doc, id) : [...ancestorsOf(state.doc, owner), owner];
+      if (ancestors.some((ancestor) => foldedHere.has(ancestor))) {
+        setFolded((prev) => {
+          const next = new Set(prev);
+          for (const ancestor of ancestors) next.delete(foldKey(ancestor));
+          return next;
+        });
+      }
+    }
+    const row = [...root.querySelectorAll('[data-node-id], [data-part-id]')]
+      .find((el) => (el.getAttribute('data-node-id') ?? el.getAttribute('data-part-id')) === id);
+    // not every DOM scrolls (a test's) — the tree then just does not move
+    row?.scrollIntoView?.({ block: 'center', inline: 'nearest' });
+  }, [state.selectedNodeId]);
+
+  if (!state.doc) {
+    return <div className="tree-view tree-view__empty"
+                data-tree-empty>Open a page draft (Pages panel)</div>;
+  }
+
+  const doc = state.doc;
+  // a published revision is immutable (the session refuses every edit): the tree still selects,
+  // but offers no move and no removal
+  const readOnly = state.revision !== null;
+  // The MOVE mode (its own exclusive mode — isolation keeps modes from breeding emergent bugs):
+  // one node is travelling, rows stop being hover/click targets, and the GAPS between them take
+  // over — a purple "move here" tip per legal position. Gaps inside the travelling branch (a
+  // cycle) and the two positions around the node itself (no-ops) offer nothing.
+  const movingId = state.movingNodeId;
+  const movingFamily = new Set<string>();
+  if (movingId) {
+    const branch = findNodeDoc(doc, movingId);
+    (function collect(n: IBlueprintNodeDoc | null) {
+      if (!n) return;
+      movingFamily.add(n.id);
+      for (const c of n.children ?? []) collect(c);
+    })(branch);
+  }
+
+  return (
+    <TooltipHost>
+      {/* the container knows the modifier so a plain :hover can wear the mode's colour — with Ctrl
+        down, pointing at a row promises the yellow pick, exactly like hovering in the canvas */}
+      <div ref={rootRef}
+           // which row a click here lands on — that selection is the tree's own, nothing to follow
+           onMouseDownCapture={(e) => {
+             const row = (e.target as Element).closest?.('[data-node-id], [data-part-id]');
+             clickedHere.current = row?.getAttribute('data-node-id') ?? row?.getAttribute('data-part-id') ?? null;
+           }}
+           className={`tree-view${ctrlHeld ? ' tree-view--ctrl' : ''}${movingId ? ' tree-view--move' : ''}`}
+           data-test-id="tree"
+           data-tree
+           data-tree-moving={movingId ?? undefined}
+           data-tree-readonly={readOnly || undefined}>
+        {/* no save button: the draft saves itself after a lull, and a button that is disabled
+            whenever there is nothing to save only ever says what the dot already says */}
+        <div className="tree-view__header">
+          <span data-edited-page={state.pageName}
+                data-edited-kind={state.kind}>
+            {state.kind === 'prefabs' ? 'prefab ' : ''}{state.pageName} · {readOnly ? `r${state.revision}` : (state.doc as { title?: string }).title ?? state.draftId?.slice(0, 8)}
+          </span>
+          {state.dirty && <span className="tree-view__dirty"
+                                data-dirty
+                                data-tooltip="Unsaved changes — the draft saves itself after a pause">●</span>}
+        </div>
+        {state.saveFailure && (
+          <div className="tree-view__error"
+               data-save-error={state.saveFailure}>{state.saveFailure}</div>
+        )}
+        <NodeRow node={doc}
+                 depth={0}
+                 doc={doc}
+                 state={state}
+                 session={session}
+                 notices={notices}
+                 movingFamily={movingFamily}
+                 readOnly={readOnly}
+                 prefabTreeOf={project.treeOf}
+                 folded={foldedHere}
+                 onFold={toggleFold}
+                 off={off}
+                 upgrades={upgrades} />
+      </div>
+    </TooltipHost>
+  );
+}
+
+export default markInternalTile(defineComponentSide({
+  Component: TreeView,
+  defaultSettings() {
+    return {};
+  },
+}));