@moloodev/editor-sdk 0.0.0-stage → 0.1.0

package/src/layout/hide.ts

@@ -0,0 +1,103 @@
+import type { Spec } from "@json-render/core";
+import {
+  findParentKey,
+  listLeafPanels,
+  setActiveChild,
+} from "./mutate";
+import type { LayoutElement } from "./types";
+
+function elementsOf(spec: Spec): Record<string, LayoutElement> {
+  return spec.elements as Record<string, LayoutElement>;
+}
+
+function isTabsGroup(el: LayoutElement | undefined): boolean {
+  return el?.type === "PanelGroup" && el.props.layout === "tabs";
+}
+
+/** json-render: omit / `true` is shown; `false` is collapsed. */
+function isElementVisible(
+  el: LayoutElement | undefined,
+): boolean {
+  return el?.visible !== false;
+}
+
+export function isSpecVisible(spec: Spec, key: string): boolean {
+  return isElementVisible(elementsOf(spec)[key]);
+}
+
+function setElementVisible(
+  spec: Spec,
+  key: string,
+  visible: boolean,
+): Spec {
+  const el = elementsOf(spec)[key];
+  if (!el) return spec;
+  if (isElementVisible(el) === visible) return spec;
+
+  const next = structuredClone(spec);
+  const dest = elementsOf(next)[key];
+  if (!dest) return spec;
+  if (visible) delete dest.visible;
+  else dest.visible = false;
+  return next;
+}
+
+/** Visible neighbor after `hiddenKey`, or the previous one if none follow. */
+export function nextChildAfterHide(
+  spec: Spec,
+  children: string[],
+  hiddenKey: string,
+): string | null {
+  const remaining = children.filter(
+    (key) => key !== hiddenKey && isSpecVisible(spec, key),
+  );
+  if (remaining.length === 0) return null;
+
+  const index = children.indexOf(hiddenKey);
+  for (let i = index + 1; i < children.length; i += 1) {
+    const key = children[i];
+    if (key && remaining.includes(key)) return key;
+  }
+  for (let i = index - 1; i >= 0; i -= 1) {
+    const key = children[i];
+    if (key && remaining.includes(key)) return key;
+  }
+  return remaining[0] ?? null;
+}
+
+/** Collapse a leaf (`visible: false`). Last tab also collapses its group. */
+export function hidePanel(spec: Spec, panelKey: string): Spec {
+  const leaf = listLeafPanels(spec).find((panel) => panel.key === panelKey);
+  if (!leaf) return spec;
+  if (!isSpecVisible(spec, panelKey)) return spec;
+
+  let next = setElementVisible(spec, panelKey, false);
+  const parentKey = findParentKey(elementsOf(next), panelKey);
+  if (!parentKey) return next;
+
+  const parent = elementsOf(next)[parentKey];
+  if (!isTabsGroup(parent)) return next;
+
+  const neighbor = nextChildAfterHide(next, parent.children ?? [], panelKey);
+  if (!neighbor) return setElementVisible(next, parentKey, false);
+
+  const active =
+    typeof parent.props.active === "string" ? parent.props.active : undefined;
+  if (active === panelKey || !isSpecVisible(next, active ?? "")) {
+    next = setActiveChild(next, parentKey, neighbor);
+  }
+  return next;
+}
+
+/** Show a leaf and, if it sits in a collapsed tabs group, the group too. */
+export function showPanel(spec: Spec, panelKey: string): Spec {
+  if (!elementsOf(spec)[panelKey]) return spec;
+
+  let next = setElementVisible(spec, panelKey, true);
+  const parentKey = findParentKey(elementsOf(next), panelKey);
+  const parent = parentKey ? elementsOf(next)[parentKey] : undefined;
+  if (!parentKey || !isTabsGroup(parent)) return next;
+
+  next = setElementVisible(next, parentKey, true);
+  return setActiveChild(next, parentKey, panelKey);
+}

package/src/layout/index.ts

@@ -0,0 +1,14 @@
+export { readStoredSpec } from "./editor-layout";
+export { EditorLoading } from "./editor-loading";
+
+export { sectionIdsOf, validateLayoutSpec } from "./validate-layout-spec";
+export { LayoutBindingProvider } from "./layout-binding";
+export type { LayoutActionHandler, CommandIconComponent } from "./layout-binding";
+export { createStateStore } from "@json-render/core";
+export type { Spec } from "./types";
+
+export { editorLayoutStorageKey } from "./layout-storage-key";
+export { EditorMenuBar } from "./chrome/editor-menu";
+export { commandLayoutState, type CommandLayoutEntry } from "./chrome/command-layout-state";
+
+export { defineLayoutSpec, defineEditorLayout, type EditorLayoutBinding } from "./define-editor-layout";

package/src/layout/layout-binding.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, type ComponentType, type ReactNode } from "react";
+import type { StateStore } from "@json-render/core";
+
+export type CommandIconComponent = ComponentType<{
+  className?: string;
+  strokeWidth?: number | string;
+}>;
+
+export type LayoutActionHandler = (
+  params?: Record<string, unknown>,
+) => unknown | Promise<unknown>;
+
+export type LayoutBindingValue = {
+  store?: StateStore;
+  handlers?: Record<string, LayoutActionHandler>;
+  menuBar?: ReactNode;
+  resolveIcon?: (
+    icon: string | undefined,
+    commandId: string,
+  ) => CommandIconComponent | null;
+  shortcutFor?: (commandId: string) => string | undefined;
+};
+
+const LayoutBindingContext = createContext<LayoutBindingValue>({});
+
+export function LayoutBindingProvider({
+  value,
+  children,
+}: {
+  value: LayoutBindingValue;
+  children: ReactNode;
+}) {
+  return (
+    <LayoutBindingContext.Provider value={value}>
+      {children}
+    </LayoutBindingContext.Provider>
+  );
+}
+
+export function useLayoutBinding(): LayoutBindingValue {
+  return useContext(LayoutBindingContext);
+}

package/src/layout/layout-storage-key.ts

@@ -0,0 +1,6 @@
+/** Browser-local layout Spec key — separate from DB editor settings. */
+export function editorLayoutStorageKey(editorId: string, layoutVersion?: number): string {
+  return layoutVersion === undefined
+    ? `moloo.editor.layout.${editorId}`
+    : `${editorLayoutStorageKey(editorId)}.v${layoutVersion}`;
+}

package/src/layout/layout-values.ts

@@ -0,0 +1,48 @@
+import type { Spec } from "@json-render/core";
+
+/** Structurally matches the frame protocol without importing editor-api. */
+export type LayoutValues = {
+  panels: Record<string, { visible: boolean; size?: number | `${number}%` }>;
+  collapsed?: Record<string, boolean>;
+};
+
+export function layoutValuesOf(
+  spec: Spec,
+  initialSpec: Spec,
+  collapsed?: Readonly<Record<string, boolean>>,
+): LayoutValues {
+  const panels: LayoutValues["panels"] = {};
+  for (const [key, initial] of Object.entries(initialSpec.elements)) {
+    if (initial.type !== "Panel" && initial.type !== "PanelGroup") continue;
+    const element = spec.elements[key];
+    if (!element) continue;
+    const value = element.props.defaultSize;
+    const size = typeof value === "number"
+      ? Math.round(value)
+      : typeof value === "string" && value.endsWith("%")
+        ? `${Math.trunc(Number.parseFloat(value) * 10_000) / 10_000}%` as const
+        : undefined;
+    panels[key] = {
+      visible: element.visible !== false,
+      ...(typeof size === "number" ||
+      (typeof size === "string" && size.endsWith("%"))
+        ? { size: size as number | `${number}%` }
+        : {}),
+    };
+  }
+  if (collapsed === undefined || Object.keys(collapsed).length === 0) return { panels };
+  return { panels, collapsed: { ...collapsed } };
+}
+
+export function applyLayoutValues(initialSpec: Spec, values: LayoutValues): Spec {
+  const spec = structuredClone(initialSpec);
+  for (const [key, value] of Object.entries(values.panels)) {
+    const element = spec.elements[key];
+    if (!element || (element.type !== "Panel" && element.type !== "PanelGroup")) {
+      continue;
+    }
+    element.visible = value.visible;
+    if (value.size !== undefined) element.props.defaultSize = value.size;
+  }
+  return spec;
+}

package/src/layout/mutate.ts

@@ -0,0 +1,486 @@
+import type { Spec } from "@json-render/core";
+import {
+  groupSizeFromLeaves,
+  sizesEqual,
+  sizeUnit,
+  storedSizeFromLayout,
+} from "./panel-size";
+import type { DockEdge, LayoutElement } from "./types";
+
+function cloneSpec(spec: Spec): Spec {
+  return structuredClone(spec);
+}
+
+function elementsOf(spec: Spec): Record<string, LayoutElement> {
+  return spec.elements as Record<string, LayoutElement>;
+}
+
+export function findParentKey(
+  elements: Record<string, LayoutElement>,
+  childKey: string,
+): string | null {
+  for (const [key, el] of Object.entries(elements)) {
+    if (el.children?.includes(childKey)) return key;
+  }
+  return null;
+}
+
+function isTabsGroup(el: LayoutElement | undefined): boolean {
+  return el?.type === "PanelGroup" && el.props.layout === "tabs";
+}
+
+function edgeOrientation(edge: DockEdge): "horizontal" | "vertical" {
+  return edge === "east" || edge === "west" ? "horizontal" : "vertical";
+}
+
+function placeBefore(edge: DockEdge): boolean {
+  return edge === "west" || edge === "north";
+}
+
+function newGroupKey(elements: Record<string, LayoutElement>): string {
+  let n = 0;
+  let key = `group-${n}`;
+  while (elements[key]) {
+    n += 1;
+    key = `group-${n}`;
+  }
+  return key;
+}
+
+/** Replace parentKey with its sole child in the grandparent (or as root). */
+function unwrapSingleton(spec: Spec, parentKey: string): void {
+  const elements = elementsOf(spec);
+  const parent = elements[parentKey];
+  if (!parent?.children || parent.children.length !== 1) return;
+
+  const sole = parent.children[0]!;
+  const grandKey = findParentKey(elements, parentKey);
+
+  if (grandKey) {
+    const grand = elements[grandKey]!;
+    grand.children = grand.children!.map((k) => (k === parentKey ? sole : k));
+  } else if (spec.root === parentKey) {
+    spec.root = sole;
+  }
+
+  delete elements[parentKey];
+}
+
+function activateNeighbor(
+  children: string[],
+  removedIndex: number,
+): string | undefined {
+  return children[Math.min(removedIndex, children.length - 1)] ?? children[0];
+}
+
+function soleChildOrEmpty(
+  elements: Record<string, LayoutElement>,
+  _removedKey: string,
+): string {
+  const remaining = Object.keys(elements);
+  return remaining[0] ?? "";
+}
+
+/**
+ * Remove `childKey` from its parent. Unwrap the parent if only one child remains.
+ * Returns the former parent key (may have been deleted by unwrap).
+ */
+function removeFromParent(spec: Spec, childKey: string): string | null {
+  const elements = elementsOf(spec);
+  const parentKey = findParentKey(elements, childKey);
+  if (!parentKey) return null;
+
+  const parent = elements[parentKey]!;
+  const removedIndex = (parent.children ?? []).indexOf(childKey);
+  parent.children = (parent.children ?? []).filter((k) => k !== childKey);
+
+  if (isTabsGroup(parent) && parent.props.active === childKey) {
+    parent.props.active = activateNeighbor(parent.children, removedIndex);
+  }
+
+  if (parent.children.length === 1) {
+    unwrapSingleton(spec, parentKey);
+  } else if (parent.children.length === 0) {
+    const grandKey = findParentKey(elements, parentKey);
+    delete elements[parentKey];
+    if (grandKey) {
+      const grand = elements[grandKey];
+      if (grand) {
+        grand.children = (grand.children ?? []).filter((k) => k !== parentKey);
+        if (grand.children.length === 1) unwrapSingleton(spec, grandKey);
+      }
+    } else if (spec.root === parentKey) {
+      spec.root = soleChildOrEmpty(elements, parentKey);
+    }
+  }
+
+  return parentKey;
+}
+
+function replaceInParent(
+  spec: Spec,
+  targetKey: string,
+  replacementKey: string,
+): void {
+  const elements = elementsOf(spec);
+  let parentKey: string | null = null;
+  for (const [key, el] of Object.entries(elements)) {
+    if (key === replacementKey) continue;
+    if (el.children?.includes(targetKey)) {
+      parentKey = key;
+      break;
+    }
+  }
+  if (parentKey) {
+    const parent = elements[parentKey]!;
+    parent.children = (parent.children ?? []).map((k) =>
+      k === targetKey ? replacementKey : k,
+    );
+    return;
+  }
+  if (spec.root === targetKey) spec.root = replacementKey;
+}
+
+function insertAt(children: string[], key: string, index: number): string[] {
+  const kids = [...children];
+  const at = Math.max(0, Math.min(index, kids.length));
+  kids.splice(at, 0, key);
+  return kids;
+}
+
+export function findPanelKeyByContent(
+  spec: Spec,
+  contentId: string,
+): string | null {
+  for (const leaf of listLeafPanels(spec)) {
+    if (leaf.contentId === contentId) return leaf.key;
+  }
+  return null;
+}
+
+/** List leaf Panel element keys in tree order. */
+export function listLeafPanels(spec: Spec): {
+  key: string;
+  contentId: string;
+  id: string;
+}[] {
+  const elements = elementsOf(spec);
+  const out: {
+    key: string;
+    contentId: string;
+    id: string;
+  }[] = [];
+
+  function walk(key: string | null | undefined) {
+    if (!key) return;
+    const el = elements[key];
+    if (!el) return;
+    if (el.type === "Panel") {
+      out.push({
+        key,
+        contentId: String(el.props.contentId ?? ""),
+        id: String(el.props.id ?? key),
+      });
+      return;
+    }
+    for (const child of el.children ?? []) walk(child);
+  }
+
+  walk(spec.root);
+  return out;
+}
+
+/**
+ * Pull `sourceKey` out of its tabs group and split that group's box
+ * so the remaining tabs stay together on the opposite edge.
+ */
+function splitTabsGroup(
+  spec: Spec,
+  sourceKey: string,
+  groupKey: string,
+  edge: DockEdge,
+): Spec {
+  const elements = elementsOf(spec);
+  const group = elements[groupKey];
+  if (!group) return spec;
+
+  const remaining = (group.children ?? []).filter((key) => key !== sourceKey);
+  if (remaining.length === 0) return spec;
+
+  const orientation = edgeOrientation(edge);
+  const before = placeBefore(edge);
+  const wrapKey = newGroupKey(elements);
+  const siblingKey = remaining.length === 1 ? remaining[0]! : groupKey;
+  const ordered = before ? [sourceKey, siblingKey] : [siblingKey, sourceKey];
+  const sizeProps: Record<string, unknown> = {};
+  for (const key of ["defaultSize", "minSize", "maxSize"] as const) {
+    if (group.props[key] == null) continue;
+    sizeProps[key] = group.props[key];
+    if (remaining.length > 1) delete group.props[key];
+  }
+
+  if (remaining.length > 1) {
+    group.children = remaining;
+    if (group.props.active === sourceKey) {
+      group.props.active = remaining[0];
+    }
+  }
+
+  elements[wrapKey] = {
+    type: "PanelGroup",
+    props: { id: wrapKey, layout: "split", orientation, ...sizeProps },
+    children: ordered,
+  };
+  replaceInParent(spec, groupKey, wrapKey);
+  if (remaining.length === 1) delete elements[groupKey];
+  return spec;
+}
+
+/**
+ * Dock `sourceKey` onto `targetKey` at `edge` by mutating a cloned Spec.
+ * No-ops when source === target or either key is missing.
+ */
+export function dockPanel(
+  spec: Spec,
+  sourceKey: string,
+  targetKey: string,
+  edge: DockEdge,
+): Spec {
+  if (sourceKey === targetKey) return spec;
+
+  const next = cloneSpec(spec);
+  const elements = elementsOf(next);
+
+  if (!elements[sourceKey] || !elements[targetKey]) return spec;
+  if (elements[sourceKey]!.type !== "Panel") return spec;
+
+  const target = elements[targetKey]!;
+  if (isTabsGroup(target) && (target.children ?? []).includes(sourceKey)) {
+    return splitTabsGroup(next, sourceKey, targetKey, edge);
+  }
+
+  removeFromParent(next, sourceKey);
+
+  const els = elementsOf(next);
+  if (!els[targetKey]) return spec;
+
+  const targetParentKey = findParentKey(els, targetKey);
+  const orientation = edgeOrientation(edge);
+  const before = placeBefore(edge);
+
+  if (targetParentKey) {
+    const targetParent = els[targetParentKey]!;
+    const parentOrientation = targetParent.props.orientation as
+      | "horizontal"
+      | "vertical"
+      | undefined;
+
+    if (
+      targetParent.type === "PanelGroup" &&
+      targetParent.props.layout !== "tabs" &&
+      parentOrientation === orientation
+    ) {
+      const kids = [...(targetParent.children ?? [])];
+      const idx = kids.indexOf(targetKey);
+      if (idx === -1) return spec;
+      kids.splice(before ? idx : idx + 1, 0, sourceKey);
+      targetParent.children = kids;
+      return next;
+    }
+  }
+
+  const groupKey = newGroupKey(els);
+  const ordered = before ? [sourceKey, targetKey] : [targetKey, sourceKey];
+
+  els[groupKey] = {
+    type: "PanelGroup",
+    props: { id: groupKey, layout: "split", orientation },
+    children: ordered,
+  };
+
+  replaceInParent(next, targetKey, groupKey);
+  return next;
+}
+
+export function stackPanel(
+  spec: Spec,
+  sourceKey: string,
+  targetKey: string,
+  index: number,
+): Spec {
+  if (sourceKey === targetKey) return spec;
+
+  const elements = elementsOf(spec);
+  const source = elements[sourceKey];
+  const target = elements[targetKey];
+  if (!source || !target || source.type !== "Panel") return spec;
+
+  const targetParentKey = findParentKey(elements, targetKey);
+  const tabsHostKey = isTabsGroup(target)
+    ? targetKey
+    : target.type === "Panel" && isTabsGroup(elements[targetParentKey ?? ""])
+      ? targetParentKey
+      : null;
+
+  if (tabsHostKey) {
+    const next = cloneSpec(spec);
+    removeFromParent(next, sourceKey);
+    const host = elementsOf(next)[tabsHostKey];
+    if (!host) return spec;
+    host.children = insertAt(host.children ?? [], sourceKey, index);
+    host.props.active = sourceKey;
+    return next;
+  }
+
+  if (target.type !== "Panel") return spec;
+
+  const next = cloneSpec(spec);
+  removeFromParent(next, sourceKey);
+  const els = elementsOf(next);
+  if (!els[targetKey]) return spec;
+
+  const groupKey = newGroupKey(els);
+  els[groupKey] = {
+    type: "PanelGroup",
+    props: { id: groupKey, layout: "tabs", active: sourceKey },
+    children: insertAt([targetKey], sourceKey, index),
+  };
+  replaceInParent(next, targetKey, groupKey);
+  return next;
+}
+
+/** Tabs-strip drop: reorder if already a child; otherwise join the strip. */
+export function applyTabsDrop(
+  spec: Spec,
+  sourceKey: string,
+  targetKey: string,
+  index: number,
+): Spec {
+  const children = elementsOf(spec)[targetKey]?.children ?? [];
+  return children.includes(sourceKey)
+    ? moveInTabs(spec, sourceKey, targetKey, index)
+    : stackPanel(spec, sourceKey, targetKey, index);
+}
+
+export function moveInTabs(
+  spec: Spec,
+  sourceKey: string,
+  groupKey: string,
+  index: number,
+): Spec {
+  const group = elementsOf(spec)[groupKey];
+  if (!group || !isTabsGroup(group)) return spec;
+
+  const children = group.children ?? [];
+  const from = children.indexOf(sourceKey);
+  if (from === -1) return spec;
+
+  let insertAtIndex = Math.max(0, Math.min(index, children.length));
+  if (from === insertAtIndex || from + 1 === insertAtIndex) return spec;
+
+  const next = cloneSpec(spec);
+  const dest = elementsOf(next)[groupKey];
+  if (!dest) return spec;
+
+  const tabs = [...(dest.children ?? [])];
+  const [taken] = tabs.splice(from, 1);
+  if (!taken) return spec;
+  if (from < insertAtIndex) insertAtIndex -= 1;
+  tabs.splice(insertAtIndex, 0, taken);
+  dest.children = tabs;
+  dest.props.active = sourceKey;
+  return next;
+}
+
+export function setActiveChild(
+  spec: Spec,
+  groupKey: string,
+  childKey: string,
+): Spec {
+  const group = elementsOf(spec)[groupKey];
+  if (!group || !isTabsGroup(group)) return spec;
+  if (!(group.children ?? []).includes(childKey)) return spec;
+  if (group.props.active === childKey) return spec;
+
+  const next = cloneSpec(spec);
+  const dest = elementsOf(next)[groupKey];
+  if (dest) dest.props.active = childKey;
+  return next;
+}
+
+function persistUnitFor(
+  child: LayoutElement,
+  elements: Record<string, LayoutElement>,
+): "px" | "%" | null {
+  const own = sizeUnit(child.props.defaultSize as number | string | null);
+  if (own) return own;
+  if (child.type !== "PanelGroup") return null;
+  if (isTabsGroup(child)) {
+    const leaves = (child.children ?? [])
+      .map((key) => elements[key])
+      .filter((el): el is LayoutElement => el?.type === "Panel")
+      .map((el) => ({
+        defaultSize: el.props.defaultSize as number | string | null | undefined,
+      }));
+    return sizeUnit(groupSizeFromLeaves(leaves).defaultSize) ?? "%";
+  }
+  return "%";
+}
+
+function markVisible(el: LayoutElement, visible: boolean) {
+  if (visible) delete el.visible;
+  else el.visible = false;
+}
+
+/**
+ * Write a finished split-group layout back onto child `defaultSize`
+ * and element `visible`. Flex leaves (no defaultSize) stay flex.
+ * 0% marks the child collapsed (`visible: false`) and does not store size 0.
+ */
+export function applyGroupLayout(
+  spec: Spec,
+  groupKey: string,
+  layout: Record<string, number>,
+  groupSizePx: number,
+): Spec {
+  if (groupSizePx <= 0) return spec;
+
+  const elements = elementsOf(spec);
+  const group = elements[groupKey];
+  if (!group || group.type !== "PanelGroup" || group.props.layout === "tabs") {
+    return spec;
+  }
+
+  let next: Spec | null = null;
+  for (const childKey of group.children ?? []) {
+    const child = (next ? elementsOf(next) : elements)[childKey];
+    if (!child) continue;
+    const panelId = String(child.props.id ?? childKey);
+    const percent = layout[panelId];
+    if (percent == null) continue;
+
+    if (percent <= 0) {
+      if (child.visible === false) continue;
+      if (!next) next = cloneSpec(spec);
+      markVisible(elementsOf(next)[childKey]!, false);
+      continue;
+    }
+
+    if (child.visible === false) {
+      if (!next) next = cloneSpec(spec);
+      markVisible(elementsOf(next)[childKey]!, true);
+    }
+
+    const live = (next ? elementsOf(next) : elements)[childKey]!;
+    const unit = persistUnitFor(live, next ? elementsOf(next) : elements);
+    if (!unit) continue;
+
+    const stored = storedSizeFromLayout(percent, groupSizePx, unit);
+    const existing = live.props.defaultSize as number | string | null | undefined;
+    if (sizesEqual(existing, stored)) continue;
+
+    if (!next) next = cloneSpec(spec);
+    elementsOf(next)[childKey]!.props.defaultSize = stored;
+  }
+  return next ?? spec;
+}