@moloodev/editor-sdk 0.0.0-stage → 0.1.0

package/src/layout/toolbar.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger, cn } from "@moloodev/ui";
+import { useLayoutBinding } from "./layout-binding";
+import { toolbarPageDelta, toolbarScrollEdges } from "./toolbar-scroll";
+
+const scrollHideClass =
+  "no-scrollbar h-[calc(100%+1.25rem)] overflow-x-auto overflow-y-hidden overscroll-x-contain";
+
+const cueButtonClass =
+  "h-10 w-5 shrink-0 rounded-none bg-card p-0 text-foreground shadow-none hover:bg-muted hover:text-foreground";
+
+export function LayoutToolbar({ children }: { children?: ReactNode }) {
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const [canLeft, setCanLeft] = useState(false);
+  const [canRight, setCanRight] = useState(false);
+
+  useEffect(() => {
+    const node = scrollerRef.current;
+    if (!node) return;
+
+    const syncEdges = () => {
+      const next = toolbarScrollEdges(
+        node.scrollLeft,
+        node.clientWidth,
+        node.scrollWidth,
+      );
+      setCanLeft(next.canLeft);
+      setCanRight(next.canRight);
+    };
+
+    const onWheel = (event: WheelEvent) => {
+      if (event.deltaY === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+        return;
+      }
+      if (node.scrollWidth <= node.clientWidth) return;
+      event.preventDefault();
+      node.scrollLeft += event.deltaY;
+    };
+
+    node.addEventListener("scroll", syncEdges, { passive: true });
+    node.addEventListener("wheel", onWheel, { passive: false });
+    const observer = new ResizeObserver(syncEdges);
+    observer.observe(node);
+    const inner = node.firstElementChild;
+    if (inner) observer.observe(inner);
+    syncEdges();
+
+    return () => {
+      node.removeEventListener("scroll", syncEdges);
+      node.removeEventListener("wheel", onWheel);
+      observer.disconnect();
+    };
+  }, []);
+
+  function scrollByPage(direction: -1 | 1) {
+    const node = scrollerRef.current;
+    if (!node) return;
+    node.scrollBy({
+      left: direction * toolbarPageDelta(node.clientWidth),
+      behavior: "smooth",
+    });
+  }
+
+  return (
+    <div
+      data-slot="editor-toolbar"
+      className="flex h-10 min-w-0 shrink-0 items-center overflow-hidden border-b border-border bg-card"
+      aria-label="에디터 도구"
+    >
+      {canLeft ? (
+        <Button
+          type="button"
+          variant="ghost"
+          aria-label="이전 도구"
+          className={cn(cueButtonClass, "border-r border-border")}
+          onClick={() => scrollByPage(-1)}
+        >
+          <IconChevronLeft className="size-4" strokeWidth={1.75} />
+        </Button>
+      ) : null}
+      <div className="relative min-w-0 flex-1 self-stretch px-1">
+        <div className="h-full overflow-hidden">
+          <div ref={scrollerRef} className={scrollHideClass}>
+            <div className="flex h-10 min-w-full w-max items-center gap-1 [&>:not([aria-hidden])]:shrink-0">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+      {canRight ? (
+        <Button
+          type="button"
+          variant="ghost"
+          aria-label="다음 도구"
+          className={cn(cueButtonClass, "border-l border-border")}
+          onClick={() => scrollByPage(1)}
+        >
+          <IconChevronRight className="size-4" strokeWidth={1.75} />
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+type ToolbarButtonProps = {
+  commandId: string;
+  icon?: string | null;
+  disabled?: boolean;
+  pressed?: boolean;
+  label?: string;
+};
+
+export function LayoutToolbarButton({
+  props,
+  emit,
+}: {
+  props: ToolbarButtonProps;
+  emit: (event: string) => void;
+}) {
+  const { resolveIcon, shortcutFor } = useLayoutBinding();
+  const Icon = resolveIcon?.(props.icon ?? undefined, props.commandId);
+  const label = props.label || props.commandId;
+  const shortcut = shortcutFor?.(props.commandId);
+  const wide = !Icon;
+  return (
+    <Tooltip>
+      <TooltipTrigger className="inline-flex shrink-0" render={<span />}>
+        <Button
+          type="button"
+          size={wide ? "sm" : "icon-sm"}
+          variant={props.pressed ? "secondary" : "ghost"}
+          aria-label={label}
+          aria-pressed={props.pressed ? true : undefined}
+          disabled={props.disabled === true}
+          className={
+            wide
+              ? "h-8 shrink-0 px-2 font-display text-xs font-bold"
+              : undefined
+          }
+          onClick={() => emit("press")}
+        >
+          {Icon ? (
+            <Icon className="size-4" strokeWidth={1.75} />
+          ) : (
+            <span className="px-1 font-display text-[0.65rem] font-bold">
+              {label}
+            </span>
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="text-xs">
+        {label}
+        {shortcut ? (
+          <span className="ml-1.5 text-muted-foreground">{shortcut}</span>
+        ) : null}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function LayoutToolbarSeparator() {
+  return <Separator orientation="vertical" className="shrink-0 self-stretch" />;
+}
+
+export function LayoutToolbarSpacer() {
+  return <div className="min-w-0 flex-1" aria-hidden />;
+}

package/src/layout/types.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { ActionBinding, Spec, VisibilityCondition } from "@json-render/core";
+
+export type DockEdge = "north" | "south" | "east" | "west";
+
+export type LayoutElement = {
+  type: string;
+  props: Record<string, unknown>;
+  children?: string[];
+  /** json-render element field. `false` is collapsed; omit / `true` is shown. */
+  visible?: VisibilityCondition;
+  on?: Record<string, ActionBinding | ActionBinding[]>;
+};
+
+export type PanelToggle = {
+  id: string;
+  label: string;
+  checked: boolean;
+  onCheckedChange: (visible: boolean) => void;
+};
+
+/** Gap shown in a strip while a panel is dragged over it. */
+export type TabInsertPreview = {
+  panelKey: string;
+  index: number;
+  width: number;
+};
+
+/** Resolved panel body and header from a layout binding. */
+export type PanelSlot = {
+  name: string;
+  title: string;
+  /** Icon + title nodes that label the header. */
+  dragNodes: ReactNode[];
+  action?: ReactNode;
+  menu: ReactNode | null;
+  body: ReactNode;
+  hasHeader: boolean;
+};
+
+export type { Spec };

package/src/layout/use-collapsed-sections.ts

@@ -0,0 +1,50 @@
+import { useCallback, useRef, useState } from "react";
+import type { Spec } from "@json-render/core";
+import { applyLayoutValues, layoutValuesOf, type LayoutValues } from "./layout-values";
+
+function collapsedTrue(collapsed: LayoutValues["collapsed"]): Record<string, boolean> {
+  const next: Record<string, boolean> = {};
+  if (!collapsed) return next;
+  for (const [id, value] of Object.entries(collapsed)) {
+    if (value) next[id] = true;
+  }
+  return next;
+}
+
+export function useCollapsedSections({
+  layout,
+  saveLayout,
+  defaultSpec,
+}: {
+  layout: LayoutValues | null;
+  saveLayout: (values: LayoutValues) => void;
+  defaultSpec: Spec;
+}): {
+  initialSpec: Spec;
+  collapsed: Readonly<Record<string, boolean>>;
+  onCollapsedChange: (id: string, collapsed: boolean) => void;
+  onSpecChange: (spec: Spec) => void;
+} {
+  const [initialSpec] = useState(() =>
+    layout ? applyLayoutValues(defaultSpec, layout) : defaultSpec,
+  );
+  const specRef = useRef(initialSpec);
+  const collapsedRef = useRef(collapsedTrue(layout?.collapsed));
+  const [collapsed, setCollapsed] = useState(collapsedRef.current);
+  const publish = useCallback((spec: Spec, next: Readonly<Record<string, boolean>>) => {
+    saveLayout(layoutValuesOf(spec, defaultSpec, next));
+  }, [defaultSpec, saveLayout]);
+  const onSpecChange = useCallback((spec: Spec) => {
+    specRef.current = spec;
+    publish(spec, collapsedRef.current);
+  }, [publish]);
+  const onCollapsedChange = useCallback((id: string, isCollapsed: boolean) => {
+    const next = { ...collapsedRef.current };
+    if (isCollapsed) next[id] = true;
+    else delete next[id];
+    collapsedRef.current = next;
+    setCollapsed(next);
+    publish(specRef.current, next);
+  }, [publish]);
+  return { initialSpec, collapsed, onCollapsedChange, onSpecChange };
+}

package/src/layout/validate-layout-spec.ts

@@ -0,0 +1,143 @@
+import {
+  formatSpecIssues,
+  isNonEmptySpec,
+  validateSpec,
+  type Spec,
+} from "@json-render/core";
+import { catalog, TOOLBAR_CHROME, TOOLBAR_ITEMS } from "./catalog";
+
+export function sectionIdsOf(props: unknown): readonly string[] {
+  if (typeof props !== "object" || props === null || !Object.hasOwn(props, "sectionIds")) {
+    return [];
+  }
+  const value = Reflect.get(props, "sectionIds");
+  if (!Array.isArray(value)) return [];
+  const ids: string[] = [];
+  for (const item of value) {
+    if (typeof item !== "string") return [];
+    ids.push(item);
+  }
+  return ids;
+}
+
+function formatZodIssues(error: {
+  issues: { path: PropertyKey[]; message: string }[];
+}): string {
+  return error.issues
+    .map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`)
+    .join("; ");
+}
+
+type CatalogComponent = {
+  props: {
+    safeParse: (
+      value: unknown,
+    ) =>
+      | { success: true }
+      | { success: false; error: { issues: { path: PropertyKey[]; message: string }[] } };
+  };
+};
+
+/**
+ * `catalog.validate` checks element `type` against the catalog, but with
+ * multiple components `@json-render/core` does not discriminate `propsOf` —
+ * so we parse each element's props with that component's Zod schema.
+ */
+export function validateLayoutSpec(input: unknown): Spec {
+  if (!isNonEmptySpec(input)) {
+    throw new Error("Invalid layout spec: expected non-empty { root, elements }");
+  }
+
+  const structural = validateSpec(input);
+  if (!structural.valid) {
+    throw new Error(
+      `Invalid layout spec (structure): ${formatSpecIssues(structural.issues)}`,
+    );
+  }
+
+  const catalogResult = catalog.validate(input);
+  if (!catalogResult.success || catalogResult.data == null) {
+    const detail = catalogResult.error
+      ? formatZodIssues(catalogResult.error)
+      : "unknown catalog validation error";
+    throw new Error(`Invalid layout spec (catalog): ${detail}`);
+  }
+
+  const components = catalog.data.components as Record<string, CatalogComponent>;
+  const contentIds = new Map<string, string>();
+  const sectionIds = new Set<string>();
+
+  for (const [key, element] of Object.entries(input.elements)) {
+    const component = components[element.type];
+    if (!component) {
+      throw new Error(
+        `Invalid layout spec (catalog): elements.${key}.type: unknown type "${element.type}"`,
+      );
+    }
+    const propsResult = component.props.safeParse(element.props);
+    if (!propsResult.success) {
+      throw new Error(
+        `Invalid layout spec (catalog): elements.${key}.props: ${formatZodIssues(propsResult.error)}`,
+      );
+    }
+    if (element.type === "PanelGroup") {
+      const props = element.props as {
+        layout: "split" | "tabs";
+        orientation?: string | null;
+        active?: string | null;
+      };
+      const children = element.children ?? [];
+      if (props.layout === "split" && props.orientation == null) {
+        throw new Error(
+          `Invalid layout spec (catalog): elements.${key}.props.orientation: required when layout is split`,
+        );
+      }
+      if (props.layout === "tabs") {
+        const active = props.active ?? children[0];
+        if (active && !children.includes(active)) {
+          throw new Error(
+            `Invalid layout spec (catalog): elements.${key}.props.active: "${active}" is not in children`,
+          );
+        }
+      }
+    }
+    if (element.type === "Panel") {
+      const props = element.props as { contentId: string };
+      const existing = contentIds.get(props.contentId);
+      if (existing != null) {
+        throw new Error(
+          `Invalid layout spec (catalog): elements.${key}.props.contentId: "${props.contentId}" is already used by elements.${existing}`,
+        );
+      }
+      contentIds.set(props.contentId, key);
+      for (const sectionId of sectionIdsOf(element.props)) {
+        if (sectionIds.has(sectionId)) {
+          throw new Error(
+            `Invalid layout spec (catalog): elements.${key}.props.sectionIds: "${sectionId}" is already used`,
+          );
+        }
+        sectionIds.add(sectionId);
+      }
+      for (const childKey of element.children ?? []) {
+        const child = input.elements[childKey];
+        if (!child || !TOOLBAR_CHROME.has(child.type)) {
+          throw new Error(
+            `Invalid layout spec (catalog): elements.${key}.children: "${childKey}" must be toolbar chrome`,
+          );
+        }
+      }
+    }
+    if (element.type === "Toolbar") {
+      for (const childKey of element.children ?? []) {
+        const child = input.elements[childKey];
+        if (!child || !TOOLBAR_ITEMS.has(child.type)) {
+          throw new Error(
+            `Invalid layout spec (catalog): elements.${key}.children: "${childKey}" must be a ToolbarButton, ToolbarSeparator, or ToolbarSpacer`,
+          );
+        }
+      }
+    }
+  }
+
+  return catalogResult.data as Spec;
+}