@moloodev/editor-sdk 0.0.0-stage → 0.2.0

package/src/layout/registry.tsx

@@ -0,0 +1,333 @@
+import {
+  Children,
+  Fragment,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { defineRegistry } from "@json-render/react";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  usePanelRef,
+} from "@moloodev/ui";
+import { catalog } from "./catalog";
+import {
+  LayoutToolbar,
+  LayoutToolbarButton,
+  LayoutToolbarSeparator,
+  LayoutToolbarSpacer,
+} from "./toolbar";
+import { PanelDockZones } from "./dock-zones";
+import {
+  LayoutNestingProvider,
+  useIsNestedLayout,
+} from "./nesting-context";
+import { findPanelKeyByContent, findParentKey } from "./mutate";
+import { PanelHeader } from "./panel-header";
+import { groupResizeBehaviorFor, groupSizeFromLeaves } from "./panel-size";
+import { restoreCollapsedPanel } from "./restore-panel";
+import { useRuntime } from "./slots-context";
+import type { LayoutElement } from "./types";
+
+type LeafProps = {
+  id: string;
+  contentId: string;
+  defaultSize?: number | string | null;
+  minSize?: number | string | null;
+  maxSize?: number | string | null;
+};
+
+type GroupProps = {
+  id: string;
+  layout: "split" | "tabs";
+  orientation?: "horizontal" | "vertical" | null;
+  active?: string | null;
+  defaultSize?: number | string | null;
+  minSize?: number | string | null;
+};
+
+function sizeProp(value: number | string | null | undefined) {
+  return value ?? undefined;
+}
+
+function elementsOf(spec: { elements: unknown }): Record<string, LayoutElement> {
+  return spec.elements as Record<string, LayoutElement>;
+}
+
+function findElementKey(spec: { elements: unknown }, propsId: string): string {
+  const elements = elementsOf(spec);
+  if (elements[propsId]) return propsId;
+  for (const [key, el] of Object.entries(elements)) {
+    if (el.props.id === propsId) return key;
+  }
+  return propsId;
+}
+
+function tabsWrapperSize(
+  childKeys: string[],
+  elements: Record<string, LayoutElement>,
+  empty: boolean,
+) {
+  const leaves = childKeys
+    .map((key) => elements[key])
+    .filter((el): el is LayoutElement => el?.type === "Panel")
+    .map((el) => ({
+      defaultSize: el.props.defaultSize as number | string | null | undefined,
+      minSize: el.props.minSize as number | string | null | undefined,
+      maxSize: el.props.maxSize as number | string | null | undefined,
+    }));
+  return groupSizeFromLeaves(leaves, { empty });
+}
+
+/** Mount the group only after the host box has a real size so defaultSize applies. */
+function useReadyBox() {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [ready, setReady] = useState(false);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const check = () => {
+      if (el.clientWidth > 0 && el.clientHeight > 0) setReady(true);
+    };
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return { ref, ready };
+}
+
+function interleaveHandles(children: ReactNode) {
+  const items = Children.toArray(children);
+  return items.map((child, index) => (
+    <Fragment key={index}>
+      {index > 0 ? <ResizableHandle /> : null}
+      {child}
+    </Fragment>
+  ));
+}
+
+function LayoutPanel({
+  props,
+  children,
+}: {
+  props: LeafProps;
+  children?: ReactNode;
+}) {
+  const { spec, getSlot, isPanelVisible } = useRuntime();
+  const panelKey = findPanelKeyByContent(spec, props.contentId) ?? props.id;
+  const parentKey = findParentKey(elementsOf(spec), panelKey);
+  const parent = parentKey ? elementsOf(spec)[parentKey] : undefined;
+  const inTabs = parent?.type === "PanelGroup" && parent.props.layout === "tabs";
+  const slot = getSlot(props.contentId);
+  const siblingKeys = parent?.children ?? [];
+  const visibleSiblings = siblingKeys.filter((key) => isPanelVisible(key));
+  const activeKey =
+    typeof parent?.props.active === "string" &&
+    visibleSiblings.includes(parent.props.active)
+      ? parent.props.active
+      : (visibleSiblings[0] ?? null);
+  const isActive = !inTabs || panelKey === activeKey;
+
+  const chrome = (
+    <div
+      className={
+        inTabs && !isActive
+          ? "hidden"
+          : "relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-card"
+      }
+    >
+      {inTabs ? null : (
+        <PanelHeader
+          stripKey={panelKey}
+          childKeys={[panelKey]}
+          activeKey={panelKey}
+          dropKind="stack"
+        />
+      )}
+      {isActive ? children : null}
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto has-[>[data-panel-section]]:overflow-hidden has-[[data-slot=editor-toolbar]]:bg-background">
+        {isActive ? (slot?.body ?? null) : null}
+      </div>
+      {inTabs ? null : <PanelDockZones panelKey={panelKey} />}
+    </div>
+  );
+
+  if (inTabs) return chrome;
+
+  return (
+    <ResizablePanel
+      id={props.id}
+      collapsible
+      collapsedSize={0}
+      defaultSize={sizeProp(props.defaultSize)}
+      minSize={sizeProp(props.minSize)}
+      maxSize={sizeProp(props.maxSize)}
+      groupResizeBehavior={groupResizeBehaviorFor(props.defaultSize)}
+    >
+      {chrome}
+    </ResizablePanel>
+  );
+}
+
+function LayoutSplitGroup({
+  props,
+  children,
+}: {
+  props: GroupProps;
+  children?: ReactNode;
+}) {
+  const nested = useIsNestedLayout();
+  const { ref, ready } = useReadyBox();
+  const { spec, persistGroupLayout } = useRuntime();
+  const groupKey = findElementKey(spec, props.id);
+
+  const onLayoutChanged = useCallback(
+    (layout: Record<string, number>, meta: { isUserInteraction: boolean }) => {
+      if (!meta.isUserInteraction) return;
+      const box = ref.current;
+      if (!box) return;
+      const groupPx =
+        (props.orientation ?? "horizontal") === "vertical"
+          ? box.clientHeight
+          : box.clientWidth;
+      persistGroupLayout(groupKey, layout, groupPx);
+    },
+    [groupKey, persistGroupLayout, props.orientation, ref],
+  );
+
+  const group = (
+    <div ref={ref} className="h-full min-h-0 min-w-0">
+      {ready ? (
+        <LayoutNestingProvider nested>
+          <ResizablePanelGroup
+            id={props.id}
+            orientation={props.orientation ?? "horizontal"}
+            className="h-full min-h-0 min-w-0"
+            onLayoutChanged={onLayoutChanged}
+          >
+            {interleaveHandles(children)}
+          </ResizablePanelGroup>
+        </LayoutNestingProvider>
+      ) : null}
+    </div>
+  );
+
+  if (!nested) return group;
+
+  return (
+    <ResizablePanel
+      id={props.id}
+      collapsible
+      collapsedSize={0}
+      defaultSize={sizeProp(props.defaultSize)}
+      minSize={props.minSize ?? "20%"}
+      groupResizeBehavior={groupResizeBehaviorFor(props.defaultSize)}
+    >
+      {group}
+    </ResizablePanel>
+  );
+}
+
+function LayoutTabsGroup({
+  props,
+  children,
+}: {
+  props: GroupProps;
+  children?: ReactNode;
+}) {
+  const nested = useIsNestedLayout();
+  const { spec, isPanelVisible } = useRuntime();
+  const panelRef = usePanelRef();
+  const groupKey = findElementKey(spec, props.id);
+  const elements = elementsOf(spec);
+  const childKeys = elements[groupKey]?.children ?? [];
+  const visibleChildren = childKeys.filter((key) => isPanelVisible(key));
+  const empty = visibleChildren.length === 0;
+  const activeKey =
+    props.active && visibleChildren.includes(props.active)
+      ? props.active
+      : (visibleChildren[0] ?? null);
+  const size = tabsWrapperSize(childKeys, elements, empty);
+  const defaultSize = sizeProp(props.defaultSize) ?? size.defaultSize;
+
+  const wasEmpty = useRef(empty);
+
+  useLayoutEffect(() => {
+    if (empty) {
+      panelRef.current?.collapse();
+    } else if (wasEmpty.current) {
+      restoreCollapsedPanel(panelRef.current, defaultSize);
+    }
+    wasEmpty.current = empty;
+  }, [defaultSize, empty, panelRef]);
+
+  const chrome = (
+    <div className="relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-card">
+      <PanelHeader
+        stripKey={groupKey}
+        childKeys={childKeys}
+        activeKey={activeKey}
+        dropKind="tabs"
+      />
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden has-[[data-slot=editor-toolbar]]:bg-background">
+        {empty ? null : children}
+      </div>
+      <PanelDockZones panelKey={groupKey} />
+    </div>
+  );
+
+  if (!nested) return chrome;
+
+  return (
+    <ResizablePanel
+      id={props.id}
+      collapsible
+      collapsedSize={0}
+      panelRef={panelRef}
+      defaultSize={defaultSize}
+      minSize={empty ? 0 : size.minSize}
+      maxSize={size.maxSize}
+      groupResizeBehavior={groupResizeBehaviorFor(defaultSize)}
+    >
+      {chrome}
+    </ResizablePanel>
+  );
+}
+
+function LayoutPanelGroup({
+  props,
+  children,
+}: {
+  props: GroupProps;
+  children?: ReactNode;
+}) {
+  if (props.layout === "tabs") {
+    return <LayoutTabsGroup props={props}>{children}</LayoutTabsGroup>;
+  }
+  return <LayoutSplitGroup props={props}>{children}</LayoutSplitGroup>;
+}
+
+export const { registry: layoutRegistry } = defineRegistry(catalog, {
+  components: {
+    PanelGroup: ({ props, children }) => (
+      <LayoutPanelGroup props={props} children={children} />
+    ),
+    Panel: ({ props, children }) => (
+      <LayoutPanel props={props}>{children}</LayoutPanel>
+    ),
+    Toolbar: ({ children }) => <LayoutToolbar>{children}</LayoutToolbar>,
+    ToolbarButton: ({ props, emit }) => (
+      <LayoutToolbarButton props={props} emit={emit} />
+    ),
+    ToolbarSeparator: () => <LayoutToolbarSeparator />,
+    ToolbarSpacer: () => <LayoutToolbarSpacer />,
+  },
+  actions: {
+    executeCommand: async () => {},
+  },
+});

package/src/layout/restore-panel.ts

@@ -0,0 +1,26 @@
+export type CollapsibleHandle = {
+  expand: () => void;
+  isCollapsed: () => boolean;
+  getSize: () => { inPixels: number };
+  resize: (size: number | string) => void;
+};
+
+export function panelRestoreSize(props: {
+  defaultSize?: number | string | null;
+  minSize?: number | string | null;
+}): number | string | undefined {
+  return props.defaultSize ?? props.minSize ?? undefined;
+}
+
+/** Expand a collapsed panel; if the library forgot the last size, apply `size`. */
+export function restoreCollapsedPanel(
+  handle: CollapsibleHandle | null | undefined,
+  size?: number | string,
+) {
+  if (!handle) return;
+  handle.expand();
+  if (size == null) return;
+  if (handle.isCollapsed() || handle.getSize().inPixels === 0) {
+    handle.resize(size);
+  }
+}

package/src/layout/slots-context.tsx

@@ -0,0 +1,189 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import type { Spec } from "@json-render/core";
+import { hidePanel as hidePanelInSpec, isSpecVisible, showPanel } from "./hide";
+import {
+  applyGroupLayout,
+  findParentKey,
+  listLeafPanels,
+  setActiveChild as setActiveChildInSpec,
+} from "./mutate";
+import type { LayoutElement, PanelSlot, PanelToggle, TabInsertPreview } from "./types";
+
+type SetSpec = (updater: Spec | ((prev: Spec) => Spec)) => void;
+
+type RuntimeContextValue = {
+  spec: Spec;
+  getSlot: (contentId: string) => PanelSlot | undefined;
+  isDragging: boolean;
+  setDragging: (dragging: boolean) => void;
+  hidePanel: (panelKey: string) => void;
+  isPanelVisible: (panelKey: string) => boolean;
+  setActiveChild: (panelKeyOrGroupKey: string) => void;
+  dragPanelKey: string | null;
+  setDragPanelKey: (panelKey: string | null) => void;
+  dragWidth: number;
+  setDragWidth: (width: number) => void;
+  insertPreview: TabInsertPreview | null;
+  setInsertPreview: (preview: TabInsertPreview | null) => void;
+  insertPreviewRef: RefObject<TabInsertPreview | null>;
+  persistGroupLayout: (
+    groupKey: string,
+    layout: Record<string, number>,
+    groupSizePx: number,
+  ) => void;
+};
+
+type TogglesContextValue = {
+  panelToggles: PanelToggle[];
+};
+
+const RuntimeContext = createContext<RuntimeContextValue | null>(null);
+const TogglesContext = createContext<TogglesContextValue>({
+  panelToggles: [],
+});
+
+function elementsOf(spec: Spec): Record<string, LayoutElement> {
+  return spec.elements as Record<string, LayoutElement>;
+}
+
+export function SlotsProvider({
+  spec,
+  slots,
+  setSpec,
+  children,
+}: {
+  spec: Spec;
+  slots: Map<string, PanelSlot>;
+  setSpec: SetSpec;
+  children: ReactNode;
+}) {
+  const [isDragging, setDragging] = useState(false);
+  const [dragPanelKey, setDragPanelKey] = useState<string | null>(null);
+  const [dragWidth, setDragWidth] = useState(0);
+  const [insertPreview, setInsertPreview] = useState<TabInsertPreview | null>(
+    null,
+  );
+  const insertPreviewRef = useRef<TabInsertPreview | null>(null);
+  insertPreviewRef.current = insertPreview;
+
+  const setActiveChild = useCallback(
+    (panelKeyOrGroupKey: string) => {
+      setSpec((prev) => {
+        const elements = elementsOf(prev);
+        if (elements[panelKeyOrGroupKey]?.type !== "Panel") return prev;
+        const parentKey = findParentKey(elements, panelKeyOrGroupKey);
+        if (!parentKey) return prev;
+        return setActiveChildInSpec(prev, parentKey, panelKeyOrGroupKey);
+      });
+    },
+    [setSpec],
+  );
+
+  const persistGroupLayout = useCallback(
+    (
+      groupKey: string,
+      layout: Record<string, number>,
+      groupSizePx: number,
+    ) => {
+      setSpec((prev) => applyGroupLayout(prev, groupKey, layout, groupSizePx));
+    },
+    [setSpec],
+  );
+
+  const hidePanel = useCallback(
+    (panelKey: string) => {
+      setSpec((prev) => hidePanelInSpec(prev, panelKey));
+    },
+    [setSpec],
+  );
+
+  const isPanelVisible = useCallback(
+    (panelKey: string) => isSpecVisible(spec, panelKey),
+    [spec],
+  );
+
+  const getSlot = useCallback((contentId: string) => slots.get(contentId), [slots]);
+
+  const panelToggles = useMemo(() => {
+    return listLeafPanels(spec).flatMap((panel) => {
+      const slot = slots.get(panel.contentId);
+      if (!slot) return [];
+      return [
+        {
+          id: panel.key,
+          label: slot.title || panel.contentId,
+          checked: isSpecVisible(spec, panel.key),
+          onCheckedChange: (visible: boolean) => {
+            if (visible) {
+              setSpec((prev) => showPanel(prev, panel.key));
+              return;
+            }
+            hidePanel(panel.key);
+          },
+        } satisfies PanelToggle,
+      ];
+    });
+  }, [hidePanel, setSpec, slots, spec]);
+
+  const runtime = useMemo<RuntimeContextValue>(
+    () => ({
+      spec,
+      getSlot,
+      isDragging,
+      setDragging,
+      hidePanel,
+      isPanelVisible,
+      setActiveChild,
+      dragPanelKey,
+      setDragPanelKey,
+      dragWidth,
+      setDragWidth,
+      insertPreview,
+      setInsertPreview,
+      insertPreviewRef,
+      persistGroupLayout,
+    }),
+    [
+      spec,
+      getSlot,
+      isDragging,
+      hidePanel,
+      isPanelVisible,
+      setActiveChild,
+      dragPanelKey,
+      dragWidth,
+      insertPreview,
+      persistGroupLayout,
+    ],
+  );
+
+  const toggles = useMemo(() => ({ panelToggles }), [panelToggles]);
+
+  return (
+    <RuntimeContext.Provider value={runtime}>
+      <TogglesContext.Provider value={toggles}>{children}</TogglesContext.Provider>
+    </RuntimeContext.Provider>
+  );
+}
+
+export function useRuntime() {
+  const ctx = useContext(RuntimeContext);
+  if (!ctx) {
+    throw new Error("useRuntime must be used within EditorLayout");
+  }
+  return ctx;
+}
+
+/** Panel toggles for app menus — safe outside provider (returns []). */
+export function usePanelToggles(): PanelToggle[] {
+  return useContext(TogglesContext).panelToggles;
+}

package/src/layout/tab-button.tsx

@@ -0,0 +1,60 @@
+import { type ReactElement, type ReactNode } from "react";
+import { useDraggable } from "@dnd-kit/react";
+import { cn } from "@moloodev/ui";
+import { MenuHost } from "./panel-menu";
+import { useRuntime } from "./slots-context";
+
+export function TabButton({
+  panelKey,
+  active,
+  label,
+  menu,
+}: {
+  panelKey: string;
+  active: boolean;
+  label: ReactNode;
+  menu: ReactNode | null;
+}) {
+  const { setActiveChild, dragPanelKey } = useRuntime();
+  const { ref, isDragging } = useDraggable({
+    id: panelKey,
+    data: { panelKey },
+  });
+
+  const hidden = isDragging || dragPanelKey === panelKey;
+
+  const button = (
+    <button
+      ref={ref}
+      type="button"
+      data-panel-key={panelKey}
+      aria-pressed={active}
+      onClick={() => {
+        if (!isDragging) setActiveChild(panelKey);
+      }}
+      className={cn(
+        "relative flex h-full shrink-0 items-center gap-1.5 px-2.5",
+        "cursor-grab select-none active:cursor-grabbing",
+        "transition-[opacity,transform] duration-150 ease-out",
+        hidden && "pointer-events-none w-0 overflow-hidden px-0 opacity-0",
+        !hidden && (active ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+      )}
+    >
+      {label}
+      {active && !hidden ? (
+        <span
+          aria-hidden
+          className="absolute inset-x-2 bottom-0 h-0.5 bg-accent"
+        />
+      ) : null}
+    </button>
+  );
+
+  if (!menu) return button;
+
+  return (
+    <MenuHost panelKey={panelKey} trigger={button as ReactElement}>
+      {menu}
+    </MenuHost>
+  );
+}

package/src/layout/toolbar-scroll.ts

@@ -0,0 +1,22 @@
+const EDGE = 1;
+
+/** Whether the toolbar scroller can page left / right. */
+export function toolbarScrollEdges(
+  scrollLeft: number,
+  clientWidth: number,
+  scrollWidth: number,
+): { canLeft: boolean; canRight: boolean } {
+  const max = scrollWidth - clientWidth;
+  if (max <= EDGE) {
+    return { canLeft: false, canRight: false };
+  }
+  return {
+    canLeft: scrollLeft > EDGE,
+    canRight: scrollLeft < max - EDGE,
+  };
+}
+
+/** Distance for one toolbar "page", with overlap on the previous page. */
+export function toolbarPageDelta(clientWidth: number): number {
+  return Math.max(Math.round(clientWidth * 0.75), 48);
+}