@moloodev/editor-sdk 0.0.0-stage → 0.1.0

package/src/layout/nesting-context.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+const NestingContext = createContext(false);
+
+/** True when rendering inside another PanelGroup (needs ResizablePanel wrapper). */
+export function useIsNestedLayout(): boolean {
+  return useContext(NestingContext);
+}
+
+export function LayoutNestingProvider({
+  nested,
+  children,
+}: {
+  nested: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <NestingContext.Provider value={nested}>{children}</NestingContext.Provider>
+  );
+}

package/src/layout/panel-header-action.tsx

@@ -0,0 +1,29 @@
+import { useSyncExternalStore } from "react";
+import { buttonVariants } from "@moloodev/ui";
+import { useLayoutBinding } from "./layout-binding";
+
+const subscribe = () => () => {};
+const emptySnapshot = () => undefined;
+
+export function PanelHeaderAction({ header }: {
+  header: { commandId: string; icon: string };
+}) {
+  const { store, handlers, resolveIcon } = useLayoutBinding();
+  const value: unknown = useSyncExternalStore(
+    store?.subscribe ?? subscribe,
+    store ? () => store.get(`/commands/${header.commandId}`) : emptySnapshot,
+    store ? () => store.get(`/commands/${header.commandId}`) : emptySnapshot,
+  );
+  const state = typeof value === "object" && value !== null ? value : {};
+  if ("visible" in state && state.visible === false) return null;
+  const label = "label" in state && typeof state.label === "string" ? state.label : header.commandId;
+  const pressed = "pressed" in state && state.pressed === true;
+  const disabled = "disabled" in state && state.disabled === true;
+  const Icon = resolveIcon?.(header.icon, header.commandId);
+  return <button type="button" data-slot="panel-header-action" aria-label={label} title={label}
+    aria-pressed={pressed ? true : undefined} disabled={disabled}
+    className={buttonVariants({ variant: pressed ? "secondary" : "ghost", size: "icon-sm" })}
+    onClick={() => { void handlers?.executeCommand?.({ commandId: header.commandId }); }}>
+    {Icon ? <Icon className="size-4" strokeWidth={1.75} /> : null}
+  </button>;
+}

package/src/layout/panel-header.tsx

@@ -0,0 +1,168 @@
+import { useRef } from "react";
+import { useDragDropMonitor, useDroppable } from "@dnd-kit/react";
+import { cn } from "@moloodev/ui";
+import { stackDropId, tabsDropId } from "./drop";
+import { TabButton } from "./tab-button";
+import { useRuntime } from "./slots-context";
+import type { LayoutElement } from "./types";
+
+/** Soft slot so the insert index is readable while dragging. */
+function TabInsertGap({ width }: { width: number }) {
+  return (
+    <span
+      aria-hidden
+      className="relative flex h-full shrink-0 items-center justify-center transition-[width] duration-150 ease-out"
+      style={{ width: Math.max(width, 12) }}
+    >
+      <span className="absolute inset-y-1 inset-x-0.5 rounded-sm bg-primary/20" />
+    </span>
+  );
+}
+
+function insertIndexFromX(
+  strip: HTMLElement,
+  clientX: number,
+  draggingId: string | null,
+): number {
+  const buttons = [
+    ...strip.querySelectorAll<HTMLElement>("[data-panel-key]"),
+  ].filter((el) => el.dataset.panelKey !== draggingId);
+  let index = 0;
+  for (const el of buttons) {
+    const rect = el.getBoundingClientRect();
+    if (clientX >= rect.left + rect.width / 2) index += 1;
+  }
+  return index;
+}
+
+function toMoveIndex(
+  keys: string[],
+  panelKey: string,
+  remainingIndex: number,
+): number {
+  if (!keys.includes(panelKey)) return remainingIndex;
+  let seen = 0;
+  for (let i = 0; i < keys.length; i += 1) {
+    if (keys[i] === panelKey) continue;
+    if (seen === remainingIndex) return i;
+    seen += 1;
+  }
+  return keys.length;
+}
+
+function clientXOf(event: { nativeEvent?: Event; to?: { x: number } }) {
+  const native = event.nativeEvent;
+  if (native instanceof PointerEvent || native instanceof MouseEvent) {
+    return native.clientX;
+  }
+  return undefined;
+}
+
+function contentIdOf(
+  elements: Record<string, LayoutElement>,
+  panelKey: string,
+): string {
+  const el = elements[panelKey];
+  return el?.type === "Panel" ? String(el.props.contentId ?? "") : "";
+}
+
+export function PanelHeader({
+  stripKey,
+  childKeys,
+  activeKey,
+  dropKind,
+}: {
+  stripKey: string;
+  childKeys: string[];
+  activeKey: string | null;
+  dropKind: "tabs" | "stack";
+}) {
+  const {
+    spec,
+    getSlot,
+    isPanelVisible,
+    dragPanelKey,
+    dragWidth,
+    insertPreview,
+    setInsertPreview,
+  } = useRuntime();
+  const elements = spec.elements as Record<string, LayoutElement>;
+  const stripRef = useRef<HTMLElement | null>(null);
+  const { ref, isDropTarget } = useDroppable({
+    id: dropKind === "tabs" ? tabsDropId(stripKey) : stackDropId(stripKey),
+    data: { kind: dropKind, panelKey: stripKey },
+  });
+  const isDropTargetRef = useRef(isDropTarget);
+  isDropTargetRef.current = isDropTarget;
+  const dragPanelKeyRef = useRef(dragPanelKey);
+  dragPanelKeyRef.current = dragPanelKey;
+  const dragWidthRef = useRef(dragWidth);
+  dragWidthRef.current = dragWidth;
+
+  const headed = childKeys.filter((key) => {
+    const slot = getSlot(contentIdOf(elements, key));
+    return Boolean(slot) && (isPanelVisible(key) || key === dragPanelKey);
+  });
+  const headedRef = useRef(headed);
+  headedRef.current = headed;
+  const insertHere =
+    insertPreview?.panelKey === stripKey ? insertPreview : null;
+
+  useDragDropMonitor({
+    onDragMove(event) {
+      const dragging = dragPanelKeyRef.current;
+      if (!isDropTargetRef.current || !dragging) return;
+      const strip = stripRef.current;
+      const clientX = clientXOf(event);
+      if (!strip || clientX == null) return;
+      const remaining = insertIndexFromX(strip, clientX, dragging);
+      const index = toMoveIndex(headedRef.current, dragging, remaining);
+      setInsertPreview({
+        panelKey: stripKey,
+        index,
+        width: dragWidthRef.current,
+      });
+    },
+  });
+
+  if (headed.length === 0 && !insertHere) return null;
+
+  return (
+    <header
+      ref={(node) => {
+        stripRef.current = node;
+        ref(node);
+      }}
+      className={cn(
+        "flex h-10 shrink-0 items-center overflow-x-auto border-b border-border bg-card",
+        isDropTarget && "bg-primary/8",
+      )}
+    >
+      {headed.map((key, index) => {
+        const slot = getSlot(contentIdOf(elements, key));
+        if (!slot) return null;
+        const gap =
+          insertHere && insertHere.index === index ? (
+            <TabInsertGap width={insertHere.width} />
+          ) : null;
+        return (
+          <span key={key} className="flex h-full items-center">
+            {gap}
+            {slot.action}
+            <TabButton
+              panelKey={key}
+              active={key === activeKey}
+              label={
+                slot.dragNodes.length > 0 ? slot.dragNodes : slot.title
+              }
+              menu={slot.menu}
+            />
+          </span>
+        );
+      })}
+      {insertHere && insertHere.index >= headed.length ? (
+        <TabInsertGap width={insertHere.width} />
+      ) : null}
+    </header>
+  );
+}

package/src/layout/panel-hide-menu.tsx

@@ -0,0 +1,6 @@
+import { MenuContent, HideItem } from "./panel-menu";
+
+/** Panel overflow: hide the current panel. */
+export function PanelHideMenu() {
+  return <MenuContent><HideItem>숨기기</HideItem></MenuContent>;
+}

package/src/layout/panel-menu.tsx

@@ -0,0 +1,85 @@
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@moloodev/ui";
+import { useRuntime } from "./slots-context";
+
+const itemClass = "gap-1.5 px-2 py-1 text-xs font-semibold";
+
+type MenuActions = {
+  hideAfterCloseRef: RefObject<boolean>;
+  setOpen: (open: boolean) => void;
+};
+
+const MenuActionsContext = createContext<MenuActions | null>(null);
+
+/** Wraps a header button so right-click opens that panel's menu. */
+export function MenuHost({
+  panelKey,
+  trigger,
+  children,
+}: {
+  panelKey: string;
+  trigger: ReactElement;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const hideAfterCloseRef = useRef(false);
+  const { hidePanel } = useRuntime();
+
+  return (
+    <MenuActionsContext.Provider value={{ hideAfterCloseRef, setOpen }}>
+      <ContextMenu
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next && hideAfterCloseRef.current) {
+            hideAfterCloseRef.current = false;
+            hidePanel(panelKey);
+          }
+        }}
+      >
+        <ContextMenuTrigger render={trigger} />
+        {children}
+      </ContextMenu>
+    </MenuActionsContext.Provider>
+  );
+}
+
+function MenuContent({ children }: { children?: ReactNode }) {
+  return (
+    <ContextMenuContent className="w-28 min-w-0 p-0.5">
+      <ContextMenuGroup>{children}</ContextMenuGroup>
+    </ContextMenuContent>
+  );
+}
+
+function HideItem({ children }: { children?: ReactNode }) {
+  const actions = useContext(MenuActionsContext);
+
+  return (
+    <ContextMenuItem
+      className={itemClass}
+      onClick={() => {
+        if (actions) actions.hideAfterCloseRef.current = true;
+        actions?.setOpen(false);
+      }}
+    >
+      {children}
+    </ContextMenuItem>
+  );
+}
+
+export { MenuContent, HideItem };

package/src/layout/panel-section.tsx

@@ -0,0 +1,114 @@
+import {
+  Children,
+  createContext,
+  useContext,
+  useId,
+  useState,
+  type ReactNode,
+} from "react";
+import { Collapsible, CollapsibleTrigger } from "@moloodev/ui";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+
+const ReadOnlyContext = createContext(false);
+
+const SectionCollapseContext = createContext<{
+  collapsed: Readonly<Record<string, boolean>>;
+  onCollapsedChange: (id: string, collapsed: boolean) => void;
+} | null>(null);
+
+export function SectionCollapseProvider({
+  collapsed,
+  onCollapsedChange,
+  children,
+}: {
+  collapsed: Readonly<Record<string, boolean>>;
+  onCollapsedChange: (id: string, collapsed: boolean) => void;
+  children: ReactNode;
+}) {
+  return (
+    <SectionCollapseContext.Provider value={{ collapsed, onCollapsedChange }}>
+      {children}
+    </SectionCollapseContext.Provider>
+  );
+}
+
+type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+
+const HEADING_TAG = {
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6",
+} satisfies Record<HeadingLevel, "h2" | "h3" | "h4" | "h5" | "h6">;
+
+const headingClassName =
+  "m-0 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] [font-weight:inherit]";
+
+export function ReadOnlyScope({
+  value,
+  children,
+}: {
+  value: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <ReadOnlyContext.Provider value={value}>{children}</ReadOnlyContext.Provider>
+  );
+}
+
+export function PanelSection({
+  id,
+  title,
+  children,
+  level = 2,
+}: {
+  id: string;
+  title: string;
+  children?: ReactNode;
+  level?: HeadingLevel;
+}) {
+  const stored = useContext(SectionCollapseContext);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(true);
+  const open = stored === null ? uncontrolledOpen : stored.collapsed[id] !== true;
+  const readOnly = useContext(ReadOnlyContext);
+  const contentId = useId();
+  if (Children.toArray(children).length === 0) return null;
+  const Heading = HEADING_TAG[level];
+  return (
+    <Collapsible
+      data-panel-section=""
+      className="flex min-h-0 flex-1 flex-col overflow-hidden border-border not-first:border-t data-closed:flex-none"
+      open={open}
+      onOpenChange={(next) => {
+        if (typeof next !== "boolean") return;
+        if (stored === null) setUncontrolledOpen(next);
+        else stored.onCollapsedChange(id, !next);
+      }}
+    >
+      <Heading className={`${headingClassName} shrink-0`}>
+        <CollapsibleTrigger
+          aria-controls={contentId}
+          className="flex h-9 w-full min-w-0 items-center gap-2 px-3 text-left"
+        >
+          {open ? (
+            <IconChevronDown className="size-4" />
+          ) : (
+            <IconChevronRight className="size-4" />
+          )}
+          <span className="label text-muted-foreground">{title}</span>
+        </CollapsibleTrigger>
+      </Heading>
+      {open ? (
+        <fieldset
+          id={contentId}
+          data-slot="panel-section-content"
+          disabled={readOnly}
+          className="m-0 min-h-0 min-w-0 flex-1 overflow-auto border-0 p-3 pt-2 space-y-4"
+        >
+          {children}
+        </fieldset>
+      ) : null}
+    </Collapsible>
+  );
+}

package/src/layout/panel-size.ts

@@ -0,0 +1,94 @@
+type LeafSizeProps = {
+  defaultSize?: number | string | null;
+  minSize?: number | string | null;
+  maxSize?: number | string | null;
+};
+
+type SizeUnit = "px" | "%";
+
+type ParsedSize = {
+  n: number;
+  unit: SizeUnit;
+  source: number | string;
+};
+
+function parseSize(value: number | string | null | undefined): ParsedSize | null {
+  if (value == null || value === "") return null;
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return { n: value, unit: "px", source: value };
+  }
+  if (typeof value !== "string") return null;
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(value);
+  if (px) return { n: Number(px[1]), unit: "px", source: value };
+  const pct = /^(\d+(?:\.\d+)?)%$/.exec(value);
+  if (pct) return { n: Number(pct[1]), unit: "%", source: value };
+  return null;
+}
+
+export function sizeUnit(
+  value: number | string | null | undefined,
+): SizeUnit | null {
+  return parseSize(value)?.unit ?? null;
+}
+
+export function sizesEqual(
+  left: number | string | null | undefined,
+  right: number | string | null | undefined,
+): boolean {
+  if (left === right) return true;
+  const a = parseSize(left);
+  const b = parseSize(right);
+  return a != null && b != null && a.unit === b.unit && a.n === b.n;
+}
+
+/** Write a live group percentage back in the same unit the spec already uses. */
+export function storedSizeFromLayout(
+  percent: number,
+  groupSizePx: number,
+  unit: SizeUnit,
+): number | string {
+  if (unit === "px") return Math.round((percent / 100) * groupSizePx);
+  const rounded = Math.round(percent * 10) / 10;
+  return `${rounded}%`;
+}
+
+/** Largest comparable size. Pixel values win over percents when mixed. */
+function largestSize(
+  values: Array<number | string | null | undefined>,
+): number | string | undefined {
+  const parsed = values.map(parseSize).filter((item): item is ParsedSize => item != null);
+  if (parsed.length === 0) return undefined;
+  const pixels = parsed.filter((item) => item.unit === "px");
+  const pool = pixels.length > 0 ? pixels : parsed;
+  return pool.reduce((best, item) => (item.n > best.n ? item : best)).source;
+}
+
+/** Tabs-group chrome size from every leaf, not the active tab. */
+export function groupSizeFromLeaves(
+  leaves: LeafSizeProps[],
+  options?: { empty?: boolean },
+): {
+  defaultSize?: number | string;
+  minSize?: number | string;
+  maxSize?: number | string;
+} {
+  if (options?.empty) {
+    return { minSize: 0 };
+  }
+  return {
+    defaultSize: largestSize(leaves.map((leaf) => leaf.defaultSize)),
+    minSize: largestSize(leaves.map((leaf) => leaf.minSize)),
+    maxSize: largestSize(leaves.map((leaf) => leaf.maxSize)),
+  };
+}
+
+/** Pixel defaults stay in pixels when the group is resized after mount. */
+export function groupResizeBehaviorFor(
+  defaultSize?: number | string | null,
+): "preserve-pixel-size" | "preserve-relative-size" {
+  if (typeof defaultSize === "number") return "preserve-pixel-size";
+  if (typeof defaultSize === "string" && defaultSize.endsWith("px")) {
+    return "preserve-pixel-size";
+  }
+  return "preserve-relative-size";
+}

package/src/layout/panel-title.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export function Title({ children }: { children?: ReactNode }) {
+  return <span className="select-none truncate font-display text-xs font-extrabold tracking-[-0.02em]">{children}</span>;
+}