@open-press/cli 0.8.0 → 1.1.0

package/template/core/src/openpress/workbench/inspector/inspectorGeometryModel.ts

@@ -1,160 +0,0 @@
-import type { CSSProperties } from "react";
-import type { ObjectSelection } from "./inspectorModel";
-import { clampNumber } from "../../shared";
-import type { InspectorInsertTargetView, InspectorLayerRect } from "../workbenchTypes";
-
-export const INSPECTOR_MARKER_RAIL_WIDTH = 36;
-const INSPECTOR_MARKER_MIN_HEIGHT = 32;
-const INSPECTOR_MARKER_VIEWPORT_PADDING = 8;
-
-export function collectInspectorBlockElements(root: HTMLElement) {
-  return Array.from(root.querySelectorAll<HTMLElement>("[data-openpress-block-id]")).filter((element) => {
-    if (!element.dataset.openpressBlockId) return false;
-    if (element.parentElement?.closest("[data-openpress-block-id]")) return false;
-    const rect = element.getBoundingClientRect();
-    return rect.width > 0 && rect.height > 0;
-  });
-}
-
-export function createInspectorInsertTargets(elements: HTMLElement[]): InspectorInsertTargetView[] {
-  const targets: InspectorInsertTargetView[] = [];
-  const seen = new Set<string>();
-
-  for (let index = 1; index < elements.length; index += 1) {
-    const previous = elements[index - 1];
-    const current = elements[index];
-    const blockId = current.dataset.openpressBlockId;
-    if (!blockId || seen.has(blockId)) continue;
-
-    const previousPage = previous.closest<HTMLElement>(".openpress-html-page");
-    const currentPage = current.closest<HTMLElement>(".openpress-html-page");
-    if (!previousPage || previousPage !== currentPage) continue;
-
-    const previousRect = previous.getBoundingClientRect();
-    const currentRect = current.getBoundingClientRect();
-    const gap = currentRect.top - previousRect.bottom;
-    if (gap < 10) continue;
-
-    const pageRect = currentPage.getBoundingClientRect();
-    const inset = Math.min(56, Math.max(20, pageRect.width * 0.07));
-    const height = Math.min(28, Math.max(14, gap - 4));
-    const rect = {
-      top: previousRect.bottom + ((gap - height) / 2),
-      left: pageRect.left + inset,
-      width: Math.max(96, pageRect.width - (inset * 2)),
-      height,
-    };
-    if (!isInspectorRectNearViewport(rect)) continue;
-
-    targets.push({ blockId, rect });
-    seen.add(blockId);
-  }
-
-  return targets;
-}
-
-export function resolveInspectorSelectionRect(
-  root: HTMLElement,
-  target: ObjectSelection | null,
-  insertTargets: InspectorInsertTargetView[],
-): InspectorLayerRect | null {
-  if (!target) return null;
-  if (target.placement === "before" && target.blockId) {
-    const insertTarget = insertTargets.find((item) => item.blockId === target.blockId);
-    if (insertTarget) return insertTarget.rect;
-    const block = findInspectorBlockElement(root, target.blockId);
-    if (!block) return null;
-    const rect = block.getBoundingClientRect();
-    return {
-      top: rect.top - 22,
-      left: rect.left,
-      width: rect.width,
-      height: 22,
-    };
-  }
-
-  const selector = target.objectId
-    ? `[data-openpress-object-id="${cssEscape(target.objectId)}"]`
-    : target.blockId
-      ? `[data-openpress-block-id="${cssEscape(target.blockId)}"]`
-      : "";
-  const element = selector ? root.querySelector<HTMLElement>(selector) : null;
-  if (!element) return null;
-  const rect = element.getBoundingClientRect();
-  return {
-    top: rect.top,
-    left: rect.left,
-    width: rect.width,
-    height: rect.height,
-  };
-}
-
-export function findInspectorBlockElement(root: HTMLElement, blockId: string) {
-  return collectInspectorBlockElements(root).find((element) => element.dataset.openpressBlockId === blockId) ?? null;
-}
-
-export function syncInspectorSelectedBlock(root: HTMLElement, target: ObjectSelection | null) {
-  root.querySelectorAll<HTMLElement>('[data-openpress-inspector-selected="true"]').forEach((element) => {
-    delete element.dataset.openpressInspectorSelected;
-  });
-  if (!target || target.placement !== "block") return;
-  const selected = target.objectId
-    ? root.querySelector<HTMLElement>(`[data-openpress-object-id="${cssEscape(target.objectId)}"]`)
-    : target.blockId
-      ? findInspectorBlockElement(root, target.blockId)
-      : null;
-  if (selected) selected.dataset.openpressInspectorSelected = "true";
-}
-
-export function rectToFixedStyle(rect: InspectorLayerRect): CSSProperties {
-  return {
-    top: `${rect.top}px`,
-    left: `${rect.left}px`,
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-  };
-}
-
-export function createInspectorComposerStyle(rect: InspectorLayerRect, expanded: boolean): CSSProperties {
-  if (typeof window === "undefined") return {};
-  const targetWidth = expanded ? 460 : 292;
-  const width = Math.min(targetWidth, Math.max(240, window.innerWidth - 32));
-  const preferredLeft = rect.left + (rect.width / 2) - (width / 2);
-  const left = clampNumber(preferredLeft, 16, Math.max(16, window.innerWidth - width - 16));
-  const topAbove = rect.top - 66;
-  const top = topAbove > 12 ? topAbove : rect.top + rect.height + 14;
-  return {
-    top: `${top}px`,
-    left: `${left}px`,
-    width: `${width}px`,
-  };
-}
-
-export function createInspectorMarkerStyle(rect: InspectorLayerRect): CSSProperties {
-  if (typeof window === "undefined") return {};
-  const height = Math.max(INSPECTOR_MARKER_MIN_HEIGHT, rect.height);
-  const maxTop = Math.max(INSPECTOR_MARKER_VIEWPORT_PADDING, window.innerHeight - height - INSPECTOR_MARKER_VIEWPORT_PADDING);
-  const maxLeft = Math.max(
-    INSPECTOR_MARKER_VIEWPORT_PADDING,
-    window.innerWidth - INSPECTOR_MARKER_RAIL_WIDTH - INSPECTOR_MARKER_VIEWPORT_PADDING,
-  );
-
-  return {
-    top: `${clampNumber(rect.top, INSPECTOR_MARKER_VIEWPORT_PADDING, maxTop)}px`,
-    left: `${clampNumber(rect.left - INSPECTOR_MARKER_RAIL_WIDTH, INSPECTOR_MARKER_VIEWPORT_PADDING, maxLeft)}px`,
-    width: `${INSPECTOR_MARKER_RAIL_WIDTH}px`,
-    height: `${height}px`,
-  };
-}
-
-function isInspectorRectNearViewport(rect: InspectorLayerRect, margin = 240) {
-  if (typeof window === "undefined") return true;
-  return rect.top + rect.height >= -margin
-    && rect.top <= window.innerHeight + margin
-    && rect.left + rect.width >= -margin
-    && rect.left <= window.innerWidth + margin;
-}
-
-function cssEscape(value: string) {
-  return globalThis.CSS?.escape ? globalThis.CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
-}

package/template/core/src/openpress/workbench/inspector/inspectorModel.ts

@@ -1,408 +0,0 @@
-import { useCallback, useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from "react";
-import { getObjectEntityMap, getSourceBlockMap } from "../../document-model";
-import type {
-  EditableSourceRef,
-  ObjectEntity,
-  ObjectEntityRef,
-  ReaderDocument,
-  SourceBlock,
-} from "../../document-model";
-
-const DEFAULT_INSPECTOR_STORAGE_KEY = "openpress:inspector-mode";
-
-export type InspectorPlacement = "block" | "before";
-
-export interface ObjectSelection {
-  objectId?: string;
-  entityRef?: ObjectEntityRef;
-  blockId?: string;
-  placement: InspectorPlacement;
-  objectEntity?: ObjectEntity;
-}
-
-export type InspectorTarget = ObjectSelection;
-
-export interface CommentDraft {
-  entityRef: ObjectEntityRef;
-  label?: string;
-  blockId?: string;
-  targetObjectId?: string;
-  placement: InspectorPlacement;
-  source: EditableSourceRef;
-  note: string;
-}
-
-export interface InspectorState {
-  enabled: boolean;
-  inspectorMode: boolean;
-  selectedBlockId: string | null;
-  selectedBlock: SourceBlock | null;
-  selectedObjectEntity: ObjectEntity | null;
-  selectedSelection: ObjectSelection | null;
-  selectedTarget: ObjectSelection | null;
-  setInspectorMode: (enabled: boolean) => void;
-  toggleInspectorMode: () => void;
-  selectSelection: (target: ObjectSelection | null) => SourceBlock | null;
-  inspectSelection: (target: EventTarget | null) => SourceBlock | null;
-  selectTarget: (target: ObjectSelection | null) => SourceBlock | null;
-  inspectTarget: (target: EventTarget | null) => SourceBlock | null;
-  handleClick: (event: ReactMouseEvent) => boolean;
-}
-
-export interface InspectorCommentResult {
-  ok: boolean;
-  comment?: {
-    id?: string;
-    timestamp?: string;
-    path?: string;
-    line?: number;
-    note?: string;
-    hint?: string;
-  };
-  message?: string;
-}
-
-export interface PendingComment {
-  id: string;
-  timestamp?: string;
-  path: string;
-  absolutePath?: string;
-  line: number;
-  marker?: string;
-  note: string;
-  hint?: string;
-}
-
-export interface CommentListResult {
-  ok: boolean;
-  comments?: PendingComment[];
-  message?: string;
-}
-
-export interface CommentClearResult {
-  ok: boolean;
-  removedCount: number;
-  comments?: PendingComment[];
-  message?: string;
-}
-
-async function requestInspectorJson<T extends { message?: string }>({
-  endpoint,
-  fetchImpl,
-  method,
-  body,
-  errorPrefix,
-}: {
-  endpoint: string;
-  fetchImpl?: typeof fetch;
-  method: "GET" | "POST" | "PATCH" | "DELETE";
-  body?: unknown;
-  errorPrefix: string;
-}): Promise<T | null> {
-  if (typeof fetchImpl !== "function") throw new Error("OpenPress inspector comment endpoint is unavailable.");
-  const response = await fetchImpl(endpoint, {
-    method,
-    ...(body === undefined
-      ? {}
-      : {
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(body),
-        }),
-  });
-  const result = await response.json().catch(() => null) as T | null;
-  if (!response.ok) {
-    throw new Error(result?.message ?? `${errorPrefix} with status ${response.status}`);
-  }
-  return result;
-}
-
-export async function submitInspectorComment({
-  draft,
-  endpoint = "/__openpress/comment",
-  fetchImpl = globalThis.fetch?.bind(globalThis),
-}: {
-  draft: CommentDraft;
-  endpoint?: string;
-  fetchImpl?: typeof fetch;
-}): Promise<InspectorCommentResult> {
-  const result = await requestInspectorJson<InspectorCommentResult>({
-    endpoint,
-    fetchImpl,
-    method: "POST",
-    errorPrefix: "OpenPress inspector comment failed",
-    body: {
-      target: {
-        objectId: draft.entityRef.id,
-        targetObjectId: draft.targetObjectId,
-        kind: draft.entityRef.kind,
-        label: draft.label,
-        blockId: draft.blockId,
-        path: draft.source.path,
-        source: draft.source.source,
-      },
-      note: draft.note,
-      hint: formatInspectorHint({ placement: draft.placement, targetObjectId: draft.targetObjectId }),
-    },
-  });
-  return result ?? { ok: true };
-}
-
-export function createInspectorCommentDraft({
-  block,
-  entity,
-  note,
-  placement,
-  target,
-}: {
-  block: SourceBlock | null;
-  entity: ObjectEntity | null;
-  note: string;
-  placement: InspectorPlacement;
-  target?: ObjectSelection | null;
-}): CommentDraft {
-  const normalizedNote = note.trim();
-  if (!block) throw new Error("OpenPress inspector comment requires a selected object.");
-  if (!normalizedNote) throw new Error("OpenPress inspector comment note must not be empty.");
-  if (!block.path || !block.source?.line) throw new Error("OpenPress inspector selected object has no editable source location.");
-
-  return {
-    entityRef: entity ? { id: entity.id, kind: entity.kind } : { id: block.id, kind: "mdx-block" },
-    label: entity?.label ?? block.name ?? block.id,
-    blockId: block.id,
-    targetObjectId: target?.objectId && target.objectId !== entity?.id ? target.objectId : undefined,
-    placement,
-    source: {
-      path: block.path,
-      source: block.source,
-      line: block.source.line,
-      column: block.source.column,
-    },
-    note: normalizedNote,
-  };
-}
-
-export async function fetchInspectorComments({
-  endpoint = "/__openpress/comment",
-  fetchImpl = globalThis.fetch?.bind(globalThis),
-}: {
-  endpoint?: string;
-  fetchImpl?: typeof fetch;
-} = {}): Promise<PendingComment[]> {
-  const result = await requestInspectorJson<CommentListResult>({
-    endpoint,
-    fetchImpl,
-    method: "GET",
-    errorPrefix: "OpenPress inspector comment list failed",
-  });
-  return Array.isArray(result?.comments) ? result.comments : [];
-}
-
-export async function clearInspectorComment({
-  id,
-  all = false,
-  endpoint = "/__openpress/comment",
-  fetchImpl = globalThis.fetch?.bind(globalThis),
-}: {
-  id?: string;
-  all?: boolean;
-  endpoint?: string;
-  fetchImpl?: typeof fetch;
-} = {}): Promise<CommentClearResult> {
-  if (!all && !id) throw new Error("OpenPress inspector comment clear requires an id or all=true.");
-
-  const result = await requestInspectorJson<CommentClearResult>({
-    endpoint,
-    fetchImpl,
-    method: "DELETE",
-    errorPrefix: "OpenPress inspector comment clear failed",
-    body: all ? { all: true } : { id },
-  });
-  return result ?? { ok: true, removedCount: 0 };
-}
-
-export async function updateInspectorComment({
-  id,
-  note,
-  placement,
-  endpoint = "/__openpress/comment",
-  fetchImpl = globalThis.fetch?.bind(globalThis),
-}: {
-  id: string;
-  note: string;
-  placement?: InspectorPlacement;
-  endpoint?: string;
-  fetchImpl?: typeof fetch;
-}): Promise<InspectorCommentResult> {
-  const normalizedNote = note.trim();
-  if (!id.trim()) throw new Error("OpenPress inspector comment update requires an id.");
-  if (!normalizedNote) throw new Error("OpenPress inspector comment note must not be empty.");
-
-  const result = await requestInspectorJson<InspectorCommentResult>({
-    endpoint,
-    fetchImpl,
-    method: "PATCH",
-    errorPrefix: "OpenPress inspector comment update failed",
-    body: {
-      id,
-      note: normalizedNote,
-      hint: formatInspectorHint({ placement }),
-    },
-  });
-  return result ?? { ok: true };
-}
-
-export function useInspector(
-  document: ReaderDocument,
-  {
-    enabled = false,
-    storageKey = DEFAULT_INSPECTOR_STORAGE_KEY,
-  }: {
-    enabled?: boolean;
-    storageKey?: string;
-  } = {},
-): InspectorState {
-  const blockMap = useMemo(() => getSourceBlockMap(document), [document]);
-  const objectEntityMap = useMemo(() => getObjectEntityMap(document), [document]);
-  const [inspectorMode, setInspectorModeState] = useState(() => {
-    if (!enabled || typeof window === "undefined") return false;
-    return window.localStorage.getItem(storageKey) === "on";
-  });
-  const [selectedSelection, setSelectedSelection] = useState<ObjectSelection | null>(null);
-
-  useEffect(() => {
-    if (!enabled && inspectorMode) setInspectorModeState(false);
-  }, [enabled, inspectorMode]);
-
-  const setInspectorMode = useCallback((nextEnabled: boolean) => {
-    setInspectorModeState(nextEnabled);
-    if (typeof window !== "undefined") {
-      window.localStorage.setItem(storageKey, nextEnabled ? "on" : "off");
-    }
-    if (!nextEnabled) setSelectedSelection(null);
-  }, [storageKey]);
-
-  const resolveSourceBlock = useCallback((target: ObjectSelection | null): SourceBlock | null => {
-    if (!target) return null;
-    if (target.blockId && blockMap[target.blockId]) return blockMap[target.blockId] ?? null;
-    const entity = target.objectEntity;
-    const source = entity?.source;
-    if (!entity || !source?.path) return null;
-    return {
-      id: entity.blockId ?? entity.id,
-      kind: entity.kind,
-      name: entity.label,
-      path: source.path,
-      frameKey: entity.frameKey,
-      chainId: entity.chainId,
-      source: source.source ?? (source.line ? { line: source.line, column: source.column ?? 1 } : undefined),
-    };
-  }, [blockMap]);
-
-  const selectSelection = useCallback((target: ObjectSelection | null) => {
-    const resolvedTarget = target?.objectId && !target.objectEntity
-      ? { ...target, objectEntity: objectEntityMap[target.objectId] }
-      : target;
-    const withRef = resolvedTarget?.objectEntity && !resolvedTarget.entityRef
-      ? {
-          ...resolvedTarget,
-          entityRef: {
-            id: resolvedTarget.objectEntity.id,
-            kind: resolvedTarget.objectEntity.kind,
-          },
-        }
-      : resolvedTarget;
-
-    setSelectedSelection(withRef ?? null);
-    return resolveSourceBlock(withRef ?? null);
-  }, [objectEntityMap, resolveSourceBlock]);
-
-  const inspectSelection = useCallback((target: EventTarget | null) => {
-    const objectSelection = findObjectSelection(target, objectEntityMap);
-    return selectSelection(objectSelection);
-  }, [objectEntityMap, selectSelection]);
-
-  const handleClick = useCallback((event: ReactMouseEvent) => {
-    if (!enabled || !inspectorMode) return false;
-    const objectSelection = findObjectSelection(event.target, objectEntityMap);
-    if (!objectSelection) return false;
-    selectSelection(objectSelection);
-    event.preventDefault();
-    event.stopPropagation();
-    return true;
-  }, [enabled, inspectorMode, objectEntityMap, selectSelection]);
-
-  const selectedObjectEntity = selectedSelection?.objectEntity ?? null;
-  const selectedBlock = resolveSourceBlock(selectedSelection);
-  const selectedBlockId = selectedBlock?.id ?? selectedSelection?.blockId ?? null;
-
-  return {
-    enabled,
-    inspectorMode: enabled && inspectorMode,
-    selectedBlockId,
-    selectedBlock,
-    selectedObjectEntity,
-    selectedSelection,
-    selectedTarget: selectedSelection,
-    setInspectorMode,
-    toggleInspectorMode: () => setInspectorMode(!inspectorMode),
-    selectSelection,
-    inspectSelection,
-    selectTarget: selectSelection,
-    inspectTarget: inspectSelection,
-    handleClick,
-  };
-}
-
-export function findObjectSelection(
-  target: EventTarget | null,
-  objectEntities: Record<string, ObjectEntity> = {},
-): ObjectSelection | null {
-  if (typeof Element === "undefined") return null;
-  if (!(target instanceof Element)) return null;
-  const insertTarget = target.closest<HTMLElement>("[data-openpress-insert-before-block-id]");
-  const insertBeforeBlockId = insertTarget?.dataset.openpressInsertBeforeBlockId;
-  if (insertBeforeBlockId) {
-    const objectId = insertTarget?.dataset.openpressObjectId;
-    const objectEntity = objectId ? objectEntities[objectId] : undefined;
-    const selection: ObjectSelection = { blockId: insertBeforeBlockId, placement: "before" };
-    if (objectId) selection.objectId = objectId;
-    if (objectEntity) {
-      selection.objectEntity = objectEntity;
-      selection.entityRef = { id: objectEntity.id, kind: objectEntity.kind };
-    }
-    return selection;
-  }
-
-  const renderedObject = target.closest<HTMLElement>("[data-openpress-object-id]");
-  const objectId = renderedObject?.dataset.openpressObjectId;
-  if (objectId) {
-    const objectEntity = objectEntities[objectId];
-    const blockId = renderedObject?.dataset.openpressBlockId || objectEntity?.blockId;
-    const selection: ObjectSelection = { objectId, placement: "block" };
-    if (blockId) selection.blockId = blockId;
-    if (objectEntity) {
-      selection.objectEntity = objectEntity;
-      selection.entityRef = { id: objectEntity.id, kind: objectEntity.kind };
-    }
-    return selection;
-  }
-
-  const element = target.closest<HTMLElement>("[data-openpress-block-id]");
-  const blockId = element?.dataset.openpressBlockId;
-  return blockId ? { blockId, placement: "block" } : null;
-}
-
-export const findInspectorTarget = findObjectSelection;
-
-export function formatInspectorHint({
-  placement,
-  targetObjectId,
-}: {
-  placement?: InspectorPlacement;
-  targetObjectId?: string;
-} = {}) {
-  const parts = ["openpress-react-inspector"];
-  if (placement) parts.push(`placement=${placement}`);
-  if (targetObjectId?.trim()) parts.push(`target=${encodeURIComponent(targetObjectId.trim())}`);
-  return parts.join(" ");
-}