@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/tooltipPlacement.ts

@@ -1,13 +0,0 @@
-const EDGE_PADDING_PX = 8;
-
-export function clampTooltipLeft(
-  anchorX: number,
-  tooltipWidth: number,
-  viewportWidth: number,
-  edgePadding = EDGE_PADDING_PX,
-): number {
-  const minLeft = edgePadding;
-  const maxLeft = Math.max(minLeft, viewportWidth - edgePadding - tooltipWidth);
-  const centeredLeft = anchorX - tooltipWidth / 2;
-  return Math.min(maxLeft, Math.max(minLeft, centeredLeft));
-}

package/src/transformStyleId.ts

@@ -1,17 +0,0 @@
-import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
-
-const VALID_TRANSFORM_IDS = new Set(getTransformStyleSummaries().map((summary) => summary.id));
-
-/**
- * Normalize a transform id read from document frontmatter.
- *
- * `dataDriven` was written by older Squisq versions. It remains accepted as a
- * wire-format compatibility value, but every editor surface exposes and writes
- * only the canonical `data-driven` id.
- */
-export function resolvePersistedTransformStyleId(value: unknown): string | null {
-  if (typeof value !== 'string') return null;
-  const normalized = value.trim().toLowerCase().replace(/\s+/g, '-');
-  if (normalized === 'datadriven') return 'data-driven';
-  return VALID_TRANSFORM_IDS.has(normalized) ? normalized : null;
-}

package/src/transitionCatalog.ts

@@ -1,159 +0,0 @@
-/**
- * transitionCatalog
- *
- * Editor-facing, curated presentation of the block transition vocabulary.
- *
- * Core's `TRANSITION_TYPES` (packages/core/src/schemas/Transitions.ts) lists
- * ~80 names, including legacy aliases and near-duplicate spellings. This
- * catalog hand-picks the distinct, useful transitions, gives each a friendly
- * label, and groups them for the toolbar's transition flyout — the same
- * "core holds the truth, the editor holds the presentation" split the block
- * `TemplatePicker` uses.
- *
- * Every `value` here MUST be a real `TransitionType`; `transitionCatalog.test.ts`
- * enforces that so a renamed/removed core transition fails the build instead
- * of silently producing an invalid `transition=` annotation. The catalog is
- * intentionally NOT exhaustive — aliases and redundant spellings are omitted.
- */
-
-/**
- * How a transition takes a direction, driving which direction sub-control
- * the picker shows. Mirrors core's `getTransitionVisualClass` dispatch:
- * - `lrud`: left / right / up / down (push, wipe, cover, uncover, reveal, pan)
- * - `axis`: horizontal / vertical (split, blinds)
- * Entries without a model take no `transitionDirection`.
- */
-export type DirectionModel = 'lrud' | 'axis';
-
-export interface TransitionCatalogEntry {
-  /** Canonical `transition=` value — must be a core `TransitionType`. */
-  value: string;
-  /** Friendly label shown in the flyout and trigger. */
-  label: string;
-  /** Direction model, when the transition is directional. */
-  direction?: DirectionModel;
-}
-
-export interface TransitionGroup {
-  title: string;
-  entries: TransitionCatalogEntry[];
-}
-
-export const TRANSITION_GROUPS: readonly TransitionGroup[] = [
-  {
-    title: 'Basic',
-    entries: [
-      { value: 'fade', label: 'Fade' },
-      { value: 'dissolve', label: 'Dissolve' },
-      { value: 'flash', label: 'Flash' },
-      { value: 'morph', label: 'Morph' },
-    ],
-  },
-  {
-    title: 'Slide & Push',
-    entries: [
-      { value: 'push', label: 'Push', direction: 'lrud' },
-      { value: 'cover', label: 'Cover', direction: 'lrud' },
-      { value: 'uncover', label: 'Uncover', direction: 'lrud' },
-      { value: 'pan', label: 'Pan', direction: 'lrud' },
-      // Conveyor renders as a fixed-direction slide (no distinct 3D motion),
-      // so it lives with the slides rather than "3D & Motion".
-      { value: 'conveyor', label: 'Conveyor' },
-    ],
-  },
-  {
-    title: 'Reveal & Wipe',
-    entries: [
-      { value: 'wipe', label: 'Wipe', direction: 'lrud' },
-      { value: 'reveal', label: 'Reveal', direction: 'lrud' },
-      { value: 'split', label: 'Split', direction: 'axis' },
-      // Blinds takes no `direction`: its horizontal/vertical web animations
-      // are identical (both map to the generic textured reveal), so a
-      // direction control here would be a visual no-op. Split, by contrast,
-      // has genuinely distinct horizontal/vertical keyframes.
-      { value: 'blinds', label: 'Blinds' },
-      { value: 'wedge', label: 'Wedge' },
-      { value: 'wheel', label: 'Wheel' },
-      { value: 'circle', label: 'Circle' },
-      { value: 'diamond', label: 'Diamond' },
-      { value: 'checkerboard', label: 'Checkerboard' },
-    ],
-  },
-  {
-    title: '3D & Motion',
-    entries: [
-      { value: 'zoom', label: 'Zoom' },
-      { value: 'cube', label: 'Cube' },
-      { value: 'flip', label: 'Flip' },
-      { value: 'rotate', label: 'Rotate' },
-      { value: 'doors', label: 'Doors' },
-      { value: 'box', label: 'Box' },
-      { value: 'gallery', label: 'Gallery' },
-      { value: 'pageCurl', label: 'Page Curl' },
-      { value: 'origami', label: 'Origami' },
-      { value: 'ferrisWheel', label: 'Ferris Wheel' },
-      { value: 'orbit', label: 'Orbit' },
-      { value: 'flyThrough', label: 'Fly Through' },
-    ],
-  },
-  {
-    title: 'Effects',
-    entries: [
-      { value: 'ripple', label: 'Ripple' },
-      { value: 'honeycomb', label: 'Honeycomb' },
-      { value: 'glitter', label: 'Glitter' },
-      { value: 'vortex', label: 'Vortex' },
-      { value: 'shred', label: 'Shred' },
-      { value: 'fracture', label: 'Fracture' },
-      { value: 'crush', label: 'Crush' },
-      { value: 'prestige', label: 'Prestige' },
-      { value: 'curtains', label: 'Curtains' },
-      { value: 'drape', label: 'Drape' },
-      { value: 'wind', label: 'Wind' },
-      { value: 'fallOver', label: 'Fall Over' },
-      { value: 'peelOff', label: 'Peel Off' },
-      { value: 'airplane', label: 'Airplane' },
-    ],
-  },
-];
-
-/** Flat list of every catalog entry, in group order. */
-export const TRANSITION_ENTRIES: readonly TransitionCatalogEntry[] = TRANSITION_GROUPS.flatMap(
-  (g) => g.entries,
-);
-
-const ENTRY_BY_VALUE = new Map(TRANSITION_ENTRIES.map((e) => [e.value, e]));
-
-/** Direction option lists keyed by model. */
-export const DIRECTION_OPTIONS: Record<
-  DirectionModel,
-  readonly { value: string; label: string }[]
-> = {
-  lrud: [
-    { value: 'left', label: 'Left' },
-    { value: 'right', label: 'Right' },
-    { value: 'up', label: 'Up' },
-    { value: 'down', label: 'Down' },
-  ],
-  axis: [
-    { value: 'horizontal', label: 'Horizontal' },
-    { value: 'vertical', label: 'Vertical' },
-  ],
-};
-
-/** Look up a catalog entry by its `transition=` value. */
-export function findTransitionEntry(value: string): TransitionCatalogEntry | undefined {
-  return ENTRY_BY_VALUE.get(value);
-}
-
-/**
- * Human label for a transition value. Returns 'None' for the empty value and
- * falls back to a camelCase-humanized form for any valid-but-uncurated type
- * (e.g. a hand-typed alias) so the trigger still reads sensibly.
- */
-export function transitionLabel(value: string): string {
-  if (!value) return 'None';
-  const entry = ENTRY_BY_VALUE.get(value);
-  if (entry) return entry.label;
-  return value.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());
-}

package/src/treeview/TreeOutlineWidget.tsx

@@ -1,390 +0,0 @@
-/**
- * TreeOutlineWidget — the interactive outline editor mounted below a hidden
- * ASCII tree fence. Reads the live tree via `useTreeViewData` and writes
- * every structural edit back as regenerated tree art via `applyTreeCommand`
- * (op → render → verify → single-transaction fence rewrite).
- *
- * Manage-items UX: a toolbar (add file / add folder), inline-editable
- * labels, per-row controls (add child, indent/outdent, move up/down,
- * folder⇄file, delete), and collapse chevrons (widget-local, not
- * persisted). Enter in a label adds a sibling; Backspace on an empty label
- * deletes it.
- */
-
-import { type DragEvent as ReactDragEvent, useCallback, useRef, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import type { TreeNode } from '@bendyline/squisq/doc';
-import { Icon } from '../Icon';
-import { useTreeViewData } from './treeViewData';
-import { applyTreeCommand, type TreeCommand } from './treeViewCommands';
-import type { TreeDropPosition } from './treeOps';
-
-interface TreeOutlineWidgetProps {
-  editor: Editor;
-  blockId: string;
-  fallbackPos: number;
-  host?: HTMLElement | null;
-}
-
-interface TreeDropTarget {
-  id: string;
-  position: TreeDropPosition;
-}
-
-const TREE_DRAG_MIME = 'application/x-squisq-tree-node';
-
-function findNode(nodes: readonly TreeNode[], id: string): TreeNode | null {
-  for (const node of nodes) {
-    if (node.id === id) return node;
-    const child = findNode(node.children, id);
-    if (child) return child;
-  }
-  return null;
-}
-
-function nodeContains(node: TreeNode, id: string): boolean {
-  return node.id === id || node.children.some((child) => nodeContains(child, id));
-}
-
-function canDropNode(nodes: readonly TreeNode[], sourceId: string, targetId: string): boolean {
-  const source = findNode(nodes, sourceId);
-  return source != null && !nodeContains(source, targetId);
-}
-
-function dropPositionForPointer(event: ReactDragEvent<HTMLElement>): TreeDropPosition {
-  const rect = event.currentTarget.getBoundingClientRect();
-  if (rect.height <= 0) return 'child';
-  const ratio = (event.clientY - rect.top) / rect.height;
-  if (ratio < 0.3) return 'before';
-  if (ratio > 0.7) return 'after';
-  return 'child';
-}
-
-export function TreeOutlineWidget({ editor, blockId }: TreeOutlineWidgetProps) {
-  const view = useTreeViewData(editor, blockId);
-  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
-  const activeDragRef = useRef<string | null>(null);
-  const [draggedId, setDraggedId] = useState<string | null>(null);
-  const [dropTarget, setDropTarget] = useState<TreeDropTarget | null>(null);
-
-  const dispatch = useCallback(
-    (cmd: TreeCommand) => applyTreeCommand(editor, blockId, cmd),
-    [editor, blockId],
-  );
-  const toggleCollapse = useCallback((id: string) => {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }, []);
-
-  const clearDragState = useCallback(() => {
-    activeDragRef.current = null;
-    setDraggedId(null);
-    setDropTarget(null);
-  }, []);
-
-  const handleDragStart = useCallback((event: ReactDragEvent<HTMLElement>, id: string) => {
-    event.stopPropagation();
-    activeDragRef.current = id;
-    setDraggedId(id);
-    setDropTarget(null);
-    event.dataTransfer.effectAllowed = 'move';
-    // Firefox requires a text payload before it starts a native drag.
-    event.dataTransfer.setData(TREE_DRAG_MIME, id);
-    event.dataTransfer.setData('text/plain', id);
-  }, []);
-
-  const handleDragOver = useCallback(
-    (event: ReactDragEvent<HTMLElement>, targetId: string) => {
-      const sourceId = activeDragRef.current;
-      if (!sourceId) return;
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (!view || !canDropNode(view.tree.roots, sourceId, targetId)) {
-        event.dataTransfer.dropEffect = 'none';
-        setDropTarget(null);
-        return;
-      }
-
-      const position = dropPositionForPointer(event);
-      event.dataTransfer.dropEffect = 'move';
-      setDropTarget((current) =>
-        current?.id === targetId && current.position === position
-          ? current
-          : { id: targetId, position },
-      );
-    },
-    [view],
-  );
-
-  const handleDrop = useCallback(
-    (event: ReactDragEvent<HTMLElement>, targetId: string) => {
-      const sourceId = activeDragRef.current;
-      if (!sourceId) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const position = dropPositionForPointer(event);
-      const canMove = view && canDropNode(view.tree.roots, sourceId, targetId);
-
-      clearDragState();
-      if (!canMove) return;
-      const moved = dispatch({ kind: 'moveItem', id: sourceId, targetId, position });
-      if (moved && position === 'child') {
-        // Make the result visible when a node is dropped into a collapsed row.
-        setCollapsed((current) => {
-          if (!current.has(targetId)) return current;
-          const next = new Set(current);
-          next.delete(targetId);
-          return next;
-        });
-      }
-    },
-    [clearDragState, dispatch, view],
-  );
-
-  if (!view) return null;
-  const roots = view.tree.roots;
-  const firstRootId = roots[0]?.id;
-
-  return (
-    <div className="squisq-tree-outline">
-      <div className="squisq-tree-toolbar">
-        <button
-          type="button"
-          className="squisq-tree-btn"
-          title="Add file"
-          disabled={!firstRootId}
-          onClick={() =>
-            firstRootId
-              ? dispatch({ kind: 'addItem', targetId: firstRootId, position: 'siblingAfter' })
-              : undefined
-          }
-        >
-          <Icon icon="fa-solid fa-plus" /> Item
-        </button>
-        <button
-          type="button"
-          className="squisq-tree-btn"
-          title="Add folder"
-          disabled={!firstRootId}
-          onClick={() =>
-            firstRootId
-              ? dispatch({
-                  kind: 'addItem',
-                  targetId: firstRootId,
-                  position: 'siblingAfter',
-                  isDir: true,
-                })
-              : undefined
-          }
-        >
-          <Icon icon="fa-solid fa-folder-plus" /> Folder
-        </button>
-      </div>
-
-      <ul className="squisq-tree-rows" role="tree">
-        {roots.map((node) => (
-          <TreeRowView
-            key={node.id}
-            node={node}
-            depth={0}
-            collapsed={collapsed}
-            draggedId={draggedId}
-            dropTarget={dropTarget}
-            toggleCollapse={toggleCollapse}
-            dispatch={dispatch}
-            onDragStart={handleDragStart}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-            onDragEnd={clearDragState}
-          />
-        ))}
-      </ul>
-
-      {view.warnings.length > 0 ? (
-        <div className="squisq-tree-warnings">
-          {view.warnings.length} parser note{view.warnings.length === 1 ? '' : 's'}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function TreeRowView({
-  node,
-  depth,
-  collapsed,
-  draggedId,
-  dropTarget,
-  toggleCollapse,
-  dispatch,
-  onDragStart,
-  onDragOver,
-  onDrop,
-  onDragEnd,
-}: {
-  node: TreeNode;
-  depth: number;
-  collapsed: ReadonlySet<string>;
-  draggedId: string | null;
-  dropTarget: TreeDropTarget | null;
-  toggleCollapse: (id: string) => void;
-  dispatch: (cmd: TreeCommand) => boolean;
-  onDragStart: (event: ReactDragEvent<HTMLElement>, id: string) => void;
-  onDragOver: (event: ReactDragEvent<HTMLElement>, id: string) => void;
-  onDrop: (event: ReactDragEvent<HTMLElement>, id: string) => void;
-  onDragEnd: () => void;
-}) {
-  const hasChildren = node.children.length > 0;
-  const isCollapsed = collapsed.has(node.id);
-  const isDir = node.isDir || hasChildren;
-  const [draft, setDraft] = useState(node.label);
-  const dropPosition = dropTarget?.id === node.id ? dropTarget.position : null;
-  const itemClassName = [
-    'squisq-tree-item',
-    draggedId === node.id ? 'squisq-tree-item--dragging' : '',
-    dropPosition ? `squisq-tree-item--drop-${dropPosition}` : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const commit = () => {
-    if (draft !== node.label && draft.trim().length > 0) {
-      dispatch({ kind: 'renameItem', id: node.id, label: draft });
-    }
-  };
-
-  return (
-    <li className={itemClassName} role="treeitem" style={{ paddingLeft: `${depth * 18}px` }}>
-      <div
-        className="squisq-tree-row"
-        onDragOver={(event) => onDragOver(event, node.id)}
-        onDrop={(event) => onDrop(event, node.id)}
-      >
-        {hasChildren ? (
-          <button
-            type="button"
-            className="squisq-tree-chevron"
-            aria-label={isCollapsed ? 'Expand' : 'Collapse'}
-            onClick={() => toggleCollapse(node.id)}
-          >
-            <Icon icon={`fa-solid ${isCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'}`} />
-          </button>
-        ) : (
-          <span className="squisq-tree-chevron squisq-tree-chevron--empty" />
-        )}
-        <button
-          type="button"
-          className="squisq-tree-icon"
-          title={isDir ? 'Make a file' : 'Make a folder'}
-          onClick={() => dispatch({ kind: 'toggleDir', id: node.id })}
-        >
-          <Icon icon={`fa-solid ${isDir ? 'fa-folder' : 'fa-file'}`} />
-        </button>
-        <input
-          className="squisq-tree-label"
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={commit}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              commit();
-              dispatch({ kind: 'addItem', targetId: node.id, position: 'siblingAfter' });
-            } else if (e.key === 'Backspace' && draft.length === 0) {
-              e.preventDefault();
-              dispatch({ kind: 'removeItem', id: node.id });
-            } else if (e.key === 'Tab') {
-              // Structural indent/outdent operate on the committed label's id;
-              // commit the draft first so no typing is lost.
-              e.preventDefault();
-              commit();
-              dispatch({ kind: e.shiftKey ? 'outdentItem' : 'indentItem', id: node.id });
-            }
-          }}
-        />
-        <span className="squisq-tree-controls">
-          <span
-            className="squisq-tree-drag-handle"
-            draggable
-            aria-hidden="true"
-            title={`Drag ${node.label} to move`}
-            onDragStart={(event) => onDragStart(event, node.id)}
-            onDragEnd={onDragEnd}
-          >
-            <Icon icon="fa-solid fa-grip-vertical" />
-          </span>
-          <button
-            type="button"
-            title="Add child"
-            onClick={() => dispatch({ kind: 'addItem', targetId: node.id, position: 'child' })}
-          >
-            <Icon icon="fa-solid fa-plus" />
-          </button>
-          <button
-            type="button"
-            title="Outdent"
-            onClick={() => dispatch({ kind: 'outdentItem', id: node.id })}
-          >
-            <Icon icon="fa-solid fa-outdent" />
-          </button>
-          <button
-            type="button"
-            title="Indent"
-            onClick={() => dispatch({ kind: 'indentItem', id: node.id })}
-          >
-            <Icon icon="fa-solid fa-indent" />
-          </button>
-          <button
-            type="button"
-            title="Move up"
-            onClick={() => dispatch({ kind: 'moveItemUp', id: node.id })}
-          >
-            <Icon icon="fa-solid fa-arrow-up" />
-          </button>
-          <button
-            type="button"
-            title="Move down"
-            onClick={() => dispatch({ kind: 'moveItemDown', id: node.id })}
-          >
-            <Icon icon="fa-solid fa-arrow-down" />
-          </button>
-          <button
-            type="button"
-            title="Delete"
-            className="squisq-tree-delete"
-            onClick={() => dispatch({ kind: 'removeItem', id: node.id })}
-          >
-            <Icon icon="fa-solid fa-trash" />
-          </button>
-        </span>
-      </div>
-      {hasChildren && !isCollapsed ? (
-        <ul className="squisq-tree-rows" role="group">
-          {node.children.map((child) => (
-            <TreeRowView
-              key={child.id}
-              node={child}
-              depth={depth + 1}
-              collapsed={collapsed}
-              draggedId={draggedId}
-              dropTarget={dropTarget}
-              toggleCollapse={toggleCollapse}
-              dispatch={dispatch}
-              onDragStart={onDragStart}
-              onDragOver={onDragOver}
-              onDrop={onDrop}
-              onDragEnd={onDragEnd}
-            />
-          ))}
-        </ul>
-      ) : null}
-    </li>
-  );
-}
-
-export default TreeOutlineWidget;