@moloodev/editor-sdk 0.0.0-stage → 0.2.0

package/src/layout/define-editor-layout.ts

@@ -0,0 +1,60 @@
+import type { ComponentType } from "react";
+import type { Spec } from "./types";
+import { validateLayoutSpec } from "./validate-layout-spec";
+
+export type LayoutJson = {
+  root: string;
+  elements: Record<string, {
+    type: string;
+    props: { readonly contentId?: string; readonly [key: string]: unknown };
+    children?: readonly string[];
+  }>;
+};
+
+export type PanelIdOf<S extends LayoutJson> = {
+  [K in keyof S["elements"]]: S["elements"][K] extends {
+    type: "Panel";
+    props: { contentId: infer Id extends string };
+  } ? Id : never;
+}[keyof S["elements"]];
+
+type NoExtra<Id extends string, T> = {
+  [K in keyof T]: K extends Id ? T[K] : never;
+};
+
+type HeaderCommand = { commandId: string; icon: string };
+const editorLayoutBrand: unique symbol = Symbol("editorLayout");
+
+export type EditorLayoutBinding<S extends LayoutJson> = {
+  readonly [editorLayoutBrand]: S;
+  readonly spec: S;
+  readonly validated: Spec;
+  readonly panels: Record<PanelIdOf<S>, ComponentType>;
+  readonly titles: Record<PanelIdOf<S>, string>;
+  readonly panelHeaders: Partial<Record<PanelIdOf<S>, HeaderCommand>>;
+};
+
+export function defineLayoutSpec<const S extends LayoutJson>(spec: S): S {
+  validateLayoutSpec(spec);
+  return spec;
+}
+
+export function defineEditorLayout<
+  const S extends LayoutJson,
+  const Panels extends Record<PanelIdOf<S>, ComponentType>,
+  const Titles extends Record<PanelIdOf<S>, string>,
+  const Headers extends Partial<Record<PanelIdOf<S>, HeaderCommand>>,
+>(spec: S, input: {
+  panels: Panels & NoExtra<PanelIdOf<S>, Panels>;
+  titles: Titles & NoExtra<PanelIdOf<S>, Titles>;
+  panelHeaders?: Headers & NoExtra<PanelIdOf<S>, Headers>;
+}): EditorLayoutBinding<S> {
+  return {
+    [editorLayoutBrand]: spec,
+    spec,
+    validated: validateLayoutSpec(spec),
+    panels: input.panels,
+    titles: input.titles,
+    panelHeaders: input.panelHeaders ?? {},
+  };
+}

package/src/layout/define-editor-layout.types.ts

@@ -0,0 +1,57 @@
+import { defineLayoutSpec, defineEditorLayout } from "./define-editor-layout";
+
+const spec = defineLayoutSpec({
+	root: "root",
+	elements: {
+		root: { type: "PanelGroup", props: { id: "root" }, children: ["a", "b"] },
+		a: { type: "Panel", props: { contentId: "a" }, children: [] },
+		b: { type: "Panel", props: { contentId: "b" }, children: [] },
+	},
+});
+
+const Body = () => null;
+
+defineEditorLayout(spec, {
+	panels: { a: Body, b: Body },
+	titles: { a: "A", b: "B" },
+});
+
+defineEditorLayout(spec, {
+	// @ts-expect-error missing panel b
+	panels: { a: Body },
+	titles: { a: "A", b: "B" },
+});
+
+defineEditorLayout(spec, {
+	panels: {
+		a: Body,
+		b: Body,
+		// @ts-expect-error extra panel c
+		c: Body,
+	},
+	titles: { a: "A", b: "B" },
+});
+
+defineEditorLayout(spec, {
+	panels: { a: Body, b: Body },
+	titles: {
+		a: "A",
+		b: "B",
+		// @ts-expect-error extra title c
+		c: "C",
+	},
+});
+
+const binding = defineEditorLayout(spec, { panels: { a: Body, b: Body }, titles: { a: "A", b: "B" } });
+
+defineEditorLayout(spec, {
+  panels: { a: Body, b: Body }, titles: { a: "A", b: "B" },
+  panelHeaders: {
+    // @ts-expect-error extra header c
+    c: { commandId: "add", icon: "plus" },
+  },
+});
+
+import { EditorLayout } from "./editor-layout";
+// @ts-expect-error panel children are not a public mount
+EditorLayout({ binding, children: null });

package/src/layout/doc-undo-bridge.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { createUndo, observe, type Doc } from "../crdt";
+import { useCommands } from "../commands";
+
+export function DocUndoBridge({ doc }: { doc: Doc | null }) {
+  const { activeScopeId, replaceUndoStack } = useCommands();
+
+  useEffect(() => {
+    if (!doc || !activeScopeId || !replaceUndoStack) return;
+    const inner = createUndo(doc);
+    replaceUndoStack(activeScopeId, inner);
+    const unsub = observe(doc, () => {
+      replaceUndoStack(activeScopeId, inner);
+    });
+    return () => {
+      unsub();
+      replaceUndoStack(activeScopeId, null);
+    };
+  }, [activeScopeId, doc, replaceUndoStack]);
+
+  return null;
+}

package/src/layout/dock-zones.tsx

@@ -0,0 +1,61 @@
+import { useDroppable } from "@dnd-kit/react";
+import { cn } from "@moloodev/ui";
+import { dockDropId } from "./drop";
+import type { DockEdge } from "./types";
+import { useRuntime } from "./slots-context";
+
+const EDGES: DockEdge[] = ["north", "south", "east", "west"];
+
+/** Thin outer-edge hit. Body interior is not a target. */
+const edgeClass: Record<DockEdge, string> = {
+  north: "inset-x-0 top-0 h-3",
+  south: "inset-x-0 bottom-0 h-3",
+  east: "inset-y-0 right-0 w-3",
+  west: "inset-y-0 left-0 w-3",
+};
+
+const activeClass: Record<DockEdge, string> = {
+  north: "border-t-2 border-primary bg-primary/25",
+  south: "border-b-2 border-primary bg-primary/25",
+  east: "border-r-2 border-primary bg-primary/25",
+  west: "border-l-2 border-primary bg-primary/25",
+};
+
+function DockZone({
+  panelKey,
+  edge,
+}: {
+  panelKey: string;
+  edge: DockEdge;
+}) {
+  const { ref, isDropTarget } = useDroppable({
+    id: dockDropId(panelKey, edge),
+    data: { kind: "dock", panelKey, edge },
+  });
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "pointer-events-auto absolute z-30",
+        edgeClass[edge],
+        isDropTarget && activeClass[edge],
+      )}
+      aria-hidden
+    />
+  );
+}
+
+/** Outer-edge drop targets shown while a panel is being dragged. */
+export function PanelDockZones({ panelKey }: { panelKey: string }) {
+  const { isDragging } = useRuntime();
+  if (!isDragging) return null;
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-30">
+      {EDGES.map((edge) => (
+        <DockZone key={edge} panelKey={panelKey} edge={edge} />
+      ))}
+    </div>
+  );
+}

package/src/layout/drop.ts

@@ -0,0 +1,39 @@
+import type { DockEdge } from "./types";
+
+type DropTarget =
+  | { kind: "dock"; targetKey: string; edge: DockEdge }
+  | { kind: "tabs"; targetKey: string }
+  | { kind: "stack"; targetKey: string };
+
+export function dockDropId(panelKey: string, edge: DockEdge): string {
+  return `${panelKey}:${edge}`;
+}
+
+export function tabsDropId(groupKey: string): string {
+  return `${groupKey}:tabs`;
+}
+
+export function stackDropId(panelKey: string): string {
+  return `${panelKey}:stack`;
+}
+
+export function parseDrop(
+  id: string | number | undefined,
+): DropTarget | null {
+  if (typeof id !== "string") return null;
+  if (id.endsWith(":stack")) {
+    const targetKey = id.slice(0, -":stack".length);
+    return targetKey ? { kind: "stack", targetKey } : null;
+  }
+  if (id.endsWith(":tabs")) {
+    const targetKey = id.slice(0, -":tabs".length);
+    return targetKey ? { kind: "tabs", targetKey } : null;
+  }
+  const match = /^(.*):(north|south|east|west)$/.exec(id);
+  if (!match) return null;
+  return {
+    kind: "dock",
+    targetKey: match[1]!,
+    edge: match[2] as DockEdge,
+  };
+}

package/src/layout/editor-layout.tsx

@@ -0,0 +1,287 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+} from "react";
+import {
+  DragDropProvider,
+  DragOverlay,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from "@dnd-kit/react";
+import {
+  ActionProvider,
+  Renderer,
+  StateProvider,
+  VisibilityProvider,
+} from "@json-render/react";
+import type { Spec } from "@json-render/core";
+import { bindToolbarSpec } from "./bind-toolbar";
+import { useLayoutBinding } from "./layout-binding";
+import { LayoutNestingProvider } from "./nesting-context";
+import { applyTabsDrop, dockPanel, listLeafPanels, stackPanel } from "./mutate";
+import { parseDrop } from "./drop";
+import { Title } from "./panel-title";
+import { PanelHideMenu } from "./panel-hide-menu";
+import { PanelHeaderAction } from "./panel-header-action";
+import type { EditorLayoutBinding, LayoutJson } from "./define-editor-layout";
+import type { PanelSlot } from "./types";
+import { layoutRegistry } from "./registry";
+import { SlotsProvider, useRuntime } from "./slots-context";
+import { validateLayoutSpec } from "./validate-layout-spec";
+
+type EditorLayoutProps = {
+  initialSpec?: Spec;
+  binding?: EditorLayoutBinding<LayoutJson> & {
+    panels: Record<string, ComponentType>;
+    titles: Record<string, string>;
+    panelHeaders: Partial<Record<string, { commandId: string; icon: string }>>;
+  };
+  /** When set, Spec is loaded/saved in localStorage under this key. */
+  storageKey?: string;
+  onSpecChange?: (spec: Spec) => void;
+  onDragActiveChange?: (active: boolean) => void;
+};
+
+const emptyHandlers = {};
+const emptyState = {};
+
+export function readStoredSpec(storageKey: string, fallback: Spec): Spec {
+  if (typeof window === "undefined") return fallback;
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return fallback;
+    const parsed: unknown = JSON.parse(raw);
+    const stored = validateLayoutSpec(parsed);
+    const storedIds = new Set(listLeafPanels(stored).map((panel) => panel.id));
+    const complete = listLeafPanels(fallback).every((panel) =>
+      storedIds.has(panel.id),
+    );
+    return complete ? stored : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function writeStoredSpec(storageKey: string, spec: Spec) {
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(spec));
+  } catch {
+    // Quota / private mode — ignore.
+  }
+}
+
+function LayoutRenderer({ spec }: { spec: Spec }) {
+  const binding = useLayoutBinding();
+  const bound = useMemo(() => bindToolbarSpec(spec), [spec]);
+  return (
+    <LayoutNestingProvider nested={false}>
+      {/* Avoid JSONUIProvider: ValidationProvider + ActionProvider loops here. */}
+      <StateProvider
+        store={binding.store}
+        initialState={binding.store ? undefined : emptyState}
+      >
+        <VisibilityProvider>
+          <ActionProvider handlers={binding.handlers ?? emptyHandlers}>
+            <Renderer spec={bound} registry={layoutRegistry} />
+          </ActionProvider>
+        </VisibilityProvider>
+      </StateProvider>
+    </LayoutNestingProvider>
+  );
+}
+
+function EditorLayoutInner({
+  spec,
+  setSpec,
+  onDragActiveChange,
+}: {
+  spec: Spec;
+  setSpec: (updater: Spec | ((prev: Spec) => Spec)) => void;
+  onDragActiveChange?: (active: boolean) => void;
+}) {
+  const {
+    setDragging,
+    getSlot,
+    setDragPanelKey,
+    setDragWidth,
+    setInsertPreview,
+    insertPreviewRef,
+  } = useRuntime();
+  const { menuBar } = useLayoutBinding();
+
+  const onDragStart = useCallback(
+    (event: DragStartEvent) => {
+      setDragging(true);
+      onDragActiveChange?.(true);
+      const id = event.operation.source?.id;
+      if (typeof id !== "string") return;
+      setDragPanelKey(id);
+      const el = event.operation.source?.element;
+      if (el instanceof HTMLElement) {
+        setDragWidth(el.getBoundingClientRect().width);
+      }
+    },
+    [onDragActiveChange, setDragPanelKey, setDragWidth, setDragging],
+  );
+
+  const onDragOver = useCallback(
+    (event: DragOverEvent) => {
+      const targetId = event.operation.target?.id;
+      const drop = parseDrop(
+        typeof targetId === "string" || typeof targetId === "number"
+          ? targetId
+          : undefined,
+      );
+      if (!drop || drop.kind === "dock") {
+        setInsertPreview(null);
+      }
+    },
+    [setInsertPreview],
+  );
+
+  const onDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const sourceKey =
+        typeof event.operation.source?.id === "string"
+          ? event.operation.source.id
+          : null;
+      const targetId = event.operation.target?.id;
+      const drop = parseDrop(
+        typeof targetId === "string" || typeof targetId === "number"
+          ? targetId
+          : undefined,
+      );
+      const insert = insertPreviewRef.current;
+
+      setDragging(false);
+      onDragActiveChange?.(false);
+      setDragPanelKey(null);
+      setInsertPreview(null);
+      setDragWidth(0);
+
+      if (event.canceled || !sourceKey || !drop) return;
+
+      const index = insert?.panelKey === drop.targetKey ? insert.index : 0;
+
+      if (drop.kind === "dock") {
+        setSpec((s) => dockPanel(s, sourceKey, drop.targetKey, drop.edge));
+        return;
+      }
+      if (drop.kind === "tabs") {
+        setSpec((s) => applyTabsDrop(s, sourceKey, drop.targetKey, index));
+        return;
+      }
+      if (drop.kind === "stack") {
+        setSpec((s) => stackPanel(s, sourceKey, drop.targetKey, index));
+      }
+    },
+    [
+      onDragActiveChange,
+      insertPreviewRef,
+      setDragPanelKey,
+      setDragWidth,
+      setDragging,
+      setInsertPreview,
+      setSpec,
+    ],
+  );
+
+  return (
+    <DragDropProvider
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEnd}
+    >
+      <div className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-card">
+        {menuBar}
+        <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
+          <LayoutRenderer spec={spec} />
+        </div>
+      </div>
+      <DragOverlay dropAnimation={null}>
+        {(source) => {
+          const id = String(source?.id ?? "");
+          const leaf = listLeafPanels(spec).find((panel) => panel.key === id);
+          const slot = leaf ? getSlot(leaf.contentId) : undefined;
+          if (!slot) return null;
+          return (
+            <div className="flex h-10 items-center gap-1.5 rounded-md bg-card px-2.5 shadow-moloo ring-2 ring-primary">
+              {slot.dragNodes.length > 0 ? slot.dragNodes : slot.title}
+            </div>
+          );
+        }}
+      </DragOverlay>
+    </DragDropProvider>
+  );
+}
+
+/** Spec-driven resizable editor chrome with tabbed panels and edge docking. */
+export function EditorLayout({
+  initialSpec: providedSpec,
+  binding,
+  storageKey,
+  onSpecChange,
+  onDragActiveChange,
+}: EditorLayoutProps) {
+  const initialSpec = providedSpec ?? binding?.validated;
+  if (!initialSpec) throw new Error("EditorLayout requires a binding or initialSpec");
+  const [spec, setSpecState] = useState(() =>
+    storageKey ? readStoredSpec(storageKey, initialSpec) : initialSpec,
+  );
+  const loadedFrom = useRef({ storageKey, initialSpec });
+
+  useEffect(() => {
+    if (
+      loadedFrom.current.storageKey === storageKey &&
+      loadedFrom.current.initialSpec === initialSpec
+    ) {
+      return;
+    }
+    loadedFrom.current = { storageKey, initialSpec };
+    if (!storageKey) {
+      setSpecState(initialSpec);
+      return;
+    }
+    setSpecState(readStoredSpec(storageKey, initialSpec));
+  }, [storageKey, initialSpec]);
+
+  const setSpec = useCallback(
+    (updater: Spec | ((prev: Spec) => Spec)) => {
+      setSpecState((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        if (next === prev) return prev;
+        if (storageKey) writeStoredSpec(storageKey, next);
+        onSpecChange?.(next);
+        return next;
+      });
+    },
+    [onSpecChange, storageKey],
+  );
+
+  const slots = useMemo(() => new Map<string, PanelSlot>(
+    Object.entries<ComponentType>(binding?.panels ?? {}).map(([contentId, BodyComponent]) => {
+      const title = binding?.titles[contentId] ?? contentId;
+      const header = binding?.panelHeaders[contentId];
+      return [contentId, {
+        name: contentId,
+        title,
+        dragNodes: [<Title key="title">{title}</Title>],
+        menu: <PanelHideMenu />,
+        ...(header ? { action: <PanelHeaderAction header={header} /> } : {}),
+        body: <BodyComponent />,
+        hasHeader: true,
+      }];
+    }),
+  ), [binding]);
+
+  return (
+    <SlotsProvider spec={spec} slots={slots} setSpec={setSpec}>
+      <EditorLayoutInner spec={spec} setSpec={setSpec} onDragActiveChange={onDragActiveChange} />
+    </SlotsProvider>
+  );
+}

package/src/layout/editor-loading.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { Spinner } from "@moloodev/ui";
+
+const SPINNER_DELAY_MS = 300;
+
+export function EditorLoading() {
+  const [spinner, setSpinner] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setSpinner(true), SPINNER_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div
+      data-slot="editor-loading"
+      className="flex min-h-0 min-w-0 flex-1 items-center justify-center bg-card"
+    >
+      {spinner ? (
+        <Spinner aria-label="불러오는 중" className="text-muted-foreground" />
+      ) : null}
+    </div>
+  );
+}

package/src/layout/frame-layout-binding.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useLayoutEffect, useMemo, type Dispatch, type ReactNode, type SetStateAction } from "react";
+import { createStateStore } from "@json-render/core";
+import { useCommands, useScope } from "../commands";
+import {
+  LayoutBindingProvider,
+  type CommandIconComponent,
+  type LayoutActionHandler,
+  type LayoutBindingValue,
+} from "./layout-binding";
+import { commandLayoutState, type CommandPresentation } from "./chrome/command-layout-state";
+import { usePanelToggles } from "./slots-context";
+
+export function FrameLayoutBinding({ children, controller, icons, presentation }: {
+  children: ReactNode;
+  icons: Record<string, CommandIconComponent>;
+  controller?: ReactNode;
+  presentation?: Readonly<Record<string, CommandPresentation>>;
+}) {
+  const { commands, execute, getContext, keybindings } = useCommands();
+  const ctx = getContext();
+  const snapshot = useMemo(
+    () => commandLayoutState(commands, ctx, presentation),
+    [commands, ctx, presentation],
+  );
+  const store = useMemo(() => createStateStore(snapshot), []);
+  useLayoutEffect(() => {
+    if (store.get("/commands") !== snapshot.commands) {
+      store.set("/commands", snapshot.commands);
+    }
+  }, [store, snapshot.commands]);
+  const handlers = useMemo<Record<string, LayoutActionHandler>>(
+    () => ({
+      executeCommand: async (params) => {
+        const commandId =
+          params && typeof params.commandId === "string" ? params.commandId : "";
+        if (commandId) await execute(commandId);
+      },
+    }),
+    [execute],
+  );
+  const keysByCommand = useMemo(
+    () => new Map(keybindings.map((binding) => [binding.commandId, binding.key])),
+    [keybindings],
+  );
+  const value = useMemo<LayoutBindingValue>(
+    () => ({
+      store,
+      handlers,
+      menuBar: controller,
+      resolveIcon: (icon) => icon ? icons[icon] ?? null : null,
+      shortcutFor: (commandId) => keysByCommand.get(commandId),
+    }),
+    [controller, handlers, icons, keysByCommand, store],
+  );
+  return <LayoutBindingProvider value={value}>{children}</LayoutBindingProvider>;
+}
+
+export function PanelToggleCommands({ prefix, onPresentation }: {
+  prefix: string;
+  onPresentation: Dispatch<SetStateAction<Readonly<Record<string, CommandPresentation>>>>;
+}) {
+  const toggles = usePanelToggles();
+  const { registerHandler } = useScope();
+  useEffect(() => {
+    const commandId = (panelId: string) => `${prefix}.togglePanel.${panelId}`;
+    const stops = toggles.map((toggle) => registerHandler(commandId(toggle.id), () => toggle.onCheckedChange(!toggle.checked)));
+    onPresentation((previous) => {
+      const next = Object.fromEntries(toggles.map((toggle) => [commandId(toggle.id), { pressed: toggle.checked }]));
+      return Object.keys(previous).length === toggles.length && toggles.every((toggle) => previous[commandId(toggle.id)]?.pressed === toggle.checked) ? previous : next;
+    });
+    return () => { for (const stop of stops) stop(); };
+  }, [prefix, toggles, registerHandler, onPresentation]);
+  return null;
+}

package/src/layout/frame.ts

@@ -0,0 +1,23 @@
+export { EditorLayout } from "./editor-layout";
+export { PanelSection, ReadOnlyScope, SectionCollapseProvider } from "./panel-section";
+export { useCollapsedSections } from "./use-collapsed-sections";
+export { PanelHideMenu } from "./panel-hide-menu";
+export { LayoutBindingProvider } from "./layout-binding";
+export type {
+  LayoutBindingValue,
+  LayoutActionHandler,
+  CommandIconComponent,
+} from "./layout-binding";
+export { usePanelToggles } from "./slots-context";
+export { validateLayoutSpec } from "./validate-layout-spec";
+export { commandLayoutState } from "./chrome/command-layout-state";
+export type { CommandPresentation } from "./chrome/command-layout-state";
+export { ContentErrorNotice } from "./content-error-notice";
+export { DocUndoBridge } from "./doc-undo-bridge";
+export { editorMenuContentClass, editorMenuItemClass } from "./chrome/menu-styles";
+export { layoutValuesOf, applyLayoutValues } from "./layout-values";
+export type { LayoutValues } from "./layout-values";
+export { FrameLayoutBinding, PanelToggleCommands } from "./frame-layout-binding";
+export type { DockEdge, PanelToggle, Spec } from "./types";
+
+export { defineLayoutSpec, defineEditorLayout, type EditorLayoutBinding } from "./define-editor-layout";