@moloodev/editor-sdk 0.0.0-stage → 0.1.0

package/src/layout/catalog.ts

@@ -0,0 +1,82 @@
+import { schema } from "@json-render/react/schema";
+import { z } from "zod";
+
+const sizeValue = z.union([z.number(), z.string()]);
+
+/**
+ * Layout catalog on the React spec schema.
+ *
+ * `visible` is an optional element field (not a prop). `false` is collapsed;
+ * omit or `true` is shown. VisibilityProvider already honors it.
+ *
+ * Keep per-element props checks in `validateLayoutSpec` until `propsOf`
+ * discriminates correctly for multi-component catalogs.
+ */
+export const catalog = schema.createCatalog({
+  components: {
+    PanelGroup: {
+      props: z.object({
+        id: z.string(),
+        layout: z.enum(["split", "tabs"]),
+        orientation: z.enum(["horizontal", "vertical"]).nullable().optional(),
+        active: z.string().nullable().optional(),
+        defaultSize: sizeValue.nullable().optional(),
+        minSize: sizeValue.nullable().optional(),
+      }),
+      description: "Arranges child panels by split or tabs",
+    },
+    Panel: {
+      props: z.object({
+        id: z.string(),
+        contentId: z.string(),
+        defaultSize: sizeValue.nullable().optional(),
+        minSize: sizeValue.nullable().optional(),
+        maxSize: sizeValue.nullable().optional(),
+        sectionIds: z.array(z.string().regex(/^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$/)).optional(),
+      }),
+      description: "Leaf editor panel bound to one content slot",
+    },
+    Toolbar: {
+      props: z.object({
+        id: z.string(),
+      }),
+      description: "Per-panel command toolbar",
+    },
+    ToolbarButton: {
+      props: z.object({
+        commandId: z.string(),
+        icon: z.string().nullable().optional(),
+      }),
+      description: "Runs a command by id",
+    },
+    ToolbarSeparator: {
+      props: z.object({}),
+      description: "Visual break between toolbar groups",
+    },
+    ToolbarSpacer: {
+      props: z.object({}),
+      description: "Flexible gap that pushes following tools to the end",
+    },
+  },
+  actions: {
+    executeCommand: {
+      params: z.object({
+        commandId: z.string(),
+      }),
+      description: "Invoke a workspace command by id",
+    },
+  },
+});
+
+export const TOOLBAR_CHROME = new Set([
+  "Toolbar",
+  "ToolbarButton",
+  "ToolbarSeparator",
+  "ToolbarSpacer",
+]);
+
+export const TOOLBAR_ITEMS = new Set([
+  "ToolbarButton",
+  "ToolbarSeparator",
+  "ToolbarSpacer",
+]);

package/src/layout/chrome/command-affordances.ts

@@ -0,0 +1,47 @@
+import { isWhenEnabled, type ContextKeys } from "../../commands";
+
+type CommandWhenSource = {
+  id: string;
+  when?: string;
+};
+
+const ALWAYS_VISIBLE_TOOLBAR_COMMANDS = new Set([
+  "editor.undo",
+  "editor.redo",
+  "bundle.add",
+  "bundle.restore",
+  "bundle.delete",
+  "bundle.confirm",
+]);
+
+/**
+ * Surface policy for unavailable commands (`when` false):
+ * - menu: show + disabled
+ * - toolbar / palette: hide
+ * - undo / redo / bundle asset + confirm toolbar: show + disabled in edit; hide in read
+ * - keybinding / execute: no-op (handled in useCommands.execute)
+ */
+export function isCommandAvailable(
+  command: CommandWhenSource | undefined,
+  ctx: ContextKeys,
+): boolean {
+  if (!command) return true;
+  return isWhenEnabled(command.when, ctx);
+}
+
+export function shouldHideCommand(
+  command: CommandWhenSource | undefined,
+  ctx: ContextKeys,
+): boolean {
+  if (command && ALWAYS_VISIBLE_TOOLBAR_COMMANDS.has(command.id)) {
+    return ctx.editorMode !== "edit";
+  }
+  return !isCommandAvailable(command, ctx);
+}
+
+export function shouldDisableCommand(
+  command: CommandWhenSource | undefined,
+  ctx: ContextKeys,
+): boolean {
+  return !isCommandAvailable(command, ctx);
+}

package/src/layout/chrome/command-layout-state.ts

@@ -0,0 +1,42 @@
+import type { ContextKeys } from "../../commands";
+import {
+  shouldDisableCommand,
+  shouldHideCommand,
+} from "./command-affordances";
+
+export type CommandLayoutSource = {
+  id: string;
+  title: string;
+  when?: string;
+};
+
+export type CommandLayoutEntry = {
+  visible: boolean;
+  disabled: boolean;
+  pressed: boolean;
+  label: string;
+};
+
+export type CommandPresentation = {
+  label?: string;
+  pressed?: boolean;
+};
+
+/** Snapshot of command affordances for json-render `/commands/{id}` state. */
+export function commandLayoutState(
+  commands: readonly CommandLayoutSource[],
+  ctx: ContextKeys,
+  presentation: Readonly<Record<string, CommandPresentation>> = {},
+): { commands: Record<string, CommandLayoutEntry> } {
+  const next: Record<string, CommandLayoutEntry> = {};
+  for (const command of commands) {
+    const extra = presentation[command.id];
+    next[command.id] = {
+      visible: !shouldHideCommand(command, ctx),
+      disabled: shouldDisableCommand(command, ctx),
+      pressed: extra?.pressed === true,
+      label: extra?.label ?? command.title,
+    };
+  }
+  return { commands: next };
+}

package/src/layout/chrome/editor-menu.tsx

@@ -0,0 +1,358 @@
+import {
+  keyToKbdTokens,
+  useCommands,
+  type MenuNode,
+} from "../../commands";
+import { IconCheck } from "@tabler/icons-react";
+import {
+  useLayoutBinding,
+  type LayoutBindingValue,
+} from "../layout-binding";
+import { usePanelToggles } from "../slots-context";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@moloodev/ui";
+import { resolveEditorIcon } from "../../commands/icons/catalog";
+import { EditorShortcutKeys } from "./editor-shortcut-keys";
+import {
+  editorMenuContentClass,
+  editorMenuItemClass,
+} from "./menu-styles";
+import { midMenuNodes } from "./mid-menu-nodes";
+import { useEditorCommandAffordances } from "./use-editor-command-affordances";
+import { visibleMenuLeaves } from "./visible-menu-leaves";
+import type { CommandLayoutEntry } from "./command-layout-state";
+
+type MenuCommandState = Readonly<Record<string, CommandLayoutEntry>>;
+
+/** Horizontal editor menubar driven by merged contribution manifests. */
+export function EditorMenuBar({
+  commandState,
+  onExecute,
+}: {
+  commandState?: MenuCommandState;
+  onExecute?: (commandId: string) => unknown;
+} = {}) {
+  const { menuTree, keybindings, execute, getContext } = useCommands();
+  const affordances = useEditorCommandAffordances();
+  const panels = usePanelToggles();
+  const ctx = getContext();
+  const keysByCommand = new Map(
+    keybindings.map((binding) => [binding.commandId, binding.key]),
+  );
+
+  const midNodes = midMenuNodes(menuTree, panels.length > 0);
+  const menuAffordances = {
+    disabled: (commandId: string) =>
+      commandState
+        ? commandState[commandId]?.disabled !== false
+        : affordances.disabled(commandId),
+  };
+  const executeCommand = (commandId: string) => {
+    if (
+      commandState &&
+      (!commandState[commandId]?.visible || menuAffordances.disabled(commandId))
+    ) return;
+    if (onExecute) void onExecute(commandId);
+    else void execute(commandId);
+  };
+
+  return (
+    <nav
+      className="flex h-8 shrink-0 items-center gap-0.5 border-b border-border bg-card px-1"
+      aria-label="에디터 메뉴"
+    >
+      {midNodes.map((node) => {
+        const visibleChildren = visibleMenuLeaves(node.children, ctx, commandState);
+        if (node.segment === "view") {
+          if (commandState && panels.length === 0 && visibleChildren.length === 0) {
+            return null;
+          }
+          return (
+            <ViewMenu
+              key={node.id}
+              commandNodes={visibleChildren}
+              keysByCommand={keysByCommand}
+              affordances={menuAffordances}
+              commandState={commandState}
+              onExecute={executeCommand}
+            />
+          );
+        }
+        if (
+          commandState &&
+          visibleMenuLeaves([node], ctx, commandState).length === 0
+        ) return null;
+        if (visibleChildren.length > 0) {
+          return (
+            <DropdownMenu key={node.id}>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 px-2 font-display text-xs font-semibold"
+                  />
+                }
+              >
+                {node.label}
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="start"
+                className={editorMenuContentClass}
+              >
+                <GroupedMenuLeaves
+                  nodes={visibleChildren}
+                  keysByCommand={keysByCommand}
+                  affordances={menuAffordances}
+                  commandState={commandState}
+                  onExecute={executeCommand}
+                />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        }
+        if (!node.commandId) return null;
+        if (commandState && commandState[node.commandId]?.visible !== true) return null;
+        return (
+          <MenuLeafButton
+            key={node.id}
+            node={node}
+            keysByCommand={keysByCommand}
+            disabled={menuAffordances.disabled(node.commandId)}
+            state={commandState?.[node.commandId]}
+            onExecute={executeCommand}
+          />
+        );
+      })}
+    </nav>
+  );
+}
+
+function ViewMenu({
+  commandNodes,
+  keysByCommand,
+  affordances,
+  commandState,
+  onExecute,
+}: {
+  commandNodes: MenuNode[];
+  keysByCommand: Map<string, string>;
+  affordances: { disabled: (commandId: string) => boolean };
+  commandState?: MenuCommandState;
+  onExecute: (id: string) => void;
+}) {
+  const panels = usePanelToggles();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="h-7 px-2 font-display text-xs font-semibold"
+          />
+        }
+      >
+        보기
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className={editorMenuContentClass}>
+        {panels.length > 0 ? (
+          <DropdownMenuGroup>
+            {panels.map((panel) => (
+              <DropdownMenuCheckboxItem
+                key={panel.id}
+                className={`${editorMenuItemClass} pr-7`}
+                checked={panel.checked}
+                closeOnClick={false}
+                onCheckedChange={(checked) => {
+                  panel.onCheckedChange(checked === true);
+                }}
+              >
+                {panel.label}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuGroup>
+        ) : null}
+        {panels.length > 0 && commandNodes.length > 0 ? (
+          <DropdownMenuSeparator className="my-0.5" />
+        ) : null}
+        {commandNodes.length > 0 ? (
+          <GroupedMenuLeaves
+            nodes={commandNodes}
+            keysByCommand={keysByCommand}
+            affordances={affordances}
+            commandState={commandState}
+            onExecute={onExecute}
+          />
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function GroupedMenuLeaves({
+  nodes,
+  keysByCommand,
+  affordances,
+  commandState,
+  onExecute,
+}: {
+  nodes: MenuNode[];
+  keysByCommand: Map<string, string>;
+  affordances: {
+    disabled: (commandId: string) => boolean;
+  };
+  commandState?: MenuCommandState;
+  onExecute: (id: string) => void;
+}) {
+  const groups: MenuNode[][] = [];
+  for (const node of nodes) {
+    const group = node.group ?? "";
+    const last = groups[groups.length - 1];
+    if (!last || (last[0]?.group ?? "") !== group) {
+      groups.push([node]);
+    } else {
+      last.push(node);
+    }
+  }
+
+  return (
+    <>
+      {groups.map((groupNodes, index) => (
+        <div key={groupNodes[0]?.group ?? index}>
+          {index > 0 ? (
+            <DropdownMenuSeparator className="my-0.5" />
+          ) : null}
+          <DropdownMenuGroup>
+            {groupNodes.map((child) => (
+              <MenuLeaf
+                key={child.id}
+                node={child}
+                keysByCommand={keysByCommand}
+                disabled={
+                  child.commandId
+                    ? affordances.disabled(child.commandId)
+                    : false
+                }
+                state={child.commandId ? commandState?.[child.commandId] : undefined}
+                onExecute={onExecute}
+              />
+            ))}
+          </DropdownMenuGroup>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function menuLeafIcon(
+  resolveIcon: LayoutBindingValue["resolveIcon"],
+  commandId: string,
+) {
+  if (resolveIcon) return resolveIcon(undefined, commandId);
+  return resolveEditorIcon(undefined, commandId);
+}
+
+function isPanelToggleCommand(commandId: string) {
+  return commandId.includes(".togglePanel.");
+}
+
+export function MenuLeaf({
+  node,
+  keysByCommand,
+  disabled = false,
+  state,
+  onExecute,
+}: {
+  node: MenuNode;
+  keysByCommand: Map<string, string>;
+  disabled?: boolean;
+  state?: CommandLayoutEntry;
+  onExecute: (id: string) => void;
+}) {
+  const { resolveIcon } = useLayoutBinding();
+  if (!node.commandId) return null;
+  const Icon = menuLeafIcon(resolveIcon, node.commandId);
+  const key = keysByCommand.get(node.commandId) ?? node.shortcut;
+  const tokens = key ? keyToKbdTokens(key) : [];
+
+  const icon = Icon ? (
+    <Icon className="size-3.5 shrink-0" />
+  ) : (
+    <span className="size-3.5 shrink-0" aria-hidden />
+  );
+  const labelAndKeys = (
+    <>
+      <span className="min-w-0 flex-1 truncate">{state?.label ?? node.label}</span>
+      <EditorShortcutKeys tokens={tokens} className="ml-auto" />
+    </>
+  );
+
+  if (isPanelToggleCommand(node.commandId)) {
+    return (
+      <DropdownMenuCheckboxItem
+        className={`${editorMenuItemClass} pr-7`}
+        disabled={disabled}
+        checked={state?.pressed === true}
+        closeOnClick
+        onCheckedChange={() => onExecute(node.commandId!)}
+      >
+        {icon}
+        {labelAndKeys}
+      </DropdownMenuCheckboxItem>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      className={editorMenuItemClass}
+      disabled={disabled}
+      aria-pressed={state?.pressed ? true : undefined}
+      onClick={() => onExecute(node.commandId!)}
+    >
+      {state?.pressed ? <IconCheck className="size-3.5 shrink-0" aria-hidden /> : icon}
+      {labelAndKeys}
+    </DropdownMenuItem>
+  );
+}
+
+function MenuLeafButton({
+  node,
+  keysByCommand,
+  disabled = false,
+  state,
+  onExecute,
+}: {
+  node: MenuNode;
+  keysByCommand: Map<string, string>;
+  disabled?: boolean;
+  state?: CommandLayoutEntry;
+  onExecute: (id: string) => void;
+}) {
+  if (!node.commandId) return null;
+  const key = keysByCommand.get(node.commandId) ?? node.shortcut;
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      disabled={disabled}
+      aria-pressed={state?.pressed ? true : undefined}
+      aria-keyshortcuts={key}
+      className="h-7 px-2 font-display text-xs font-semibold"
+      onClick={() => onExecute(node.commandId!)}
+    >
+      {state?.label ?? node.label}
+    </Button>
+  );
+}

package/src/layout/chrome/editor-shortcut-keys.tsx

@@ -0,0 +1,27 @@
+import { Kbd, KbdGroup, cn, kbdKey } from "@moloodev/ui";
+
+type EditorShortcutKeysProps = {
+  tokens: readonly string[];
+  className?: string;
+};
+
+/** Menu-style shortcut chips (⌘ / ⇧ / key). */
+export function EditorShortcutKeys({
+  tokens,
+  className,
+}: EditorShortcutKeysProps) {
+  if (tokens.length === 0) return null;
+
+  return (
+    <KbdGroup className={cn("shrink-0 gap-0.5", className)}>
+      {tokens.map((token) => (
+        <Kbd
+          key={token}
+          className="h-3.5 min-w-3.5 rounded border px-0.5 text-[0.625rem] shadow-none"
+        >
+          {kbdKey(token)}
+        </Kbd>
+      ))}
+    </KbdGroup>
+  );
+}

package/src/layout/chrome/menu-styles.ts

@@ -0,0 +1,3 @@
+/** Shared chrome menu surface styles (editor menu + mode menu). */
+export const editorMenuItemClass = "gap-1.5 px-2 py-1 text-xs font-semibold";
+export const editorMenuContentClass = "w-44 p-0.5";

package/src/layout/chrome/mid-menu-nodes.ts

@@ -0,0 +1,27 @@
+import type { MenuNode } from "../../commands";
+
+/** Same order as contribution `view` roots (`SEGMENT_META.view`). */
+const VIEW_MENU_ORDER = 40;
+
+/**
+ * Mid-menu roots keep a single `view` entry. Panel chrome joins that
+ * submenu; it is not a second top-level 「보기」.
+ */
+export function midMenuNodes(
+  nodes: readonly MenuNode[],
+  hasPanels: boolean,
+): MenuNode[] {
+  if (nodes.some((node) => node.segment === "view") || !hasPanels) {
+    return [...nodes];
+  }
+  const placeholder: MenuNode = {
+    id: "view",
+    segment: "view",
+    label: "보기",
+    order: VIEW_MENU_ORDER,
+    children: [],
+  };
+  return [...nodes, placeholder].sort(
+    (a, b) => a.order - b.order || a.label.localeCompare(b.label),
+  );
+}

package/src/layout/chrome/use-editor-command-affordances.ts

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { useCommands } from "../../commands";
+import {
+  shouldDisableCommand,
+  shouldHideCommand,
+} from "./command-affordances";
+
+/**
+ * Disable/hide rules from merged command `when` + context bag.
+ * Subscribes via useCommands so context / undo updates re-render chrome.
+ */
+export function useEditorCommandAffordances() {
+  const { commands, getContext } = useCommands();
+  const ctx = getContext();
+  const commandsById = useMemo(
+    () => new Map(commands.map((command) => [command.id, command])),
+    [commands],
+  );
+
+  return useMemo(
+    () => ({
+      /** Toolbar / palette: omit when unavailable (undo/redo stay). */
+      hidden(commandId: string) {
+        return shouldHideCommand(commandsById.get(commandId), ctx);
+      },
+      /** Menu: keep visible, disable when unavailable. */
+      disabled(commandId: string) {
+        return shouldDisableCommand(commandsById.get(commandId), ctx);
+      },
+    }),
+    [commandsById, ctx],
+  );
+}

package/src/layout/chrome/visible-menu-leaves.ts

@@ -0,0 +1,15 @@
+import { isWhenEnabled, type ContextKeys, type MenuNode } from "../../commands";
+import type { CommandLayoutEntry } from "./command-layout-state";
+
+export function visibleMenuLeaves(
+  nodes: readonly MenuNode[],
+  ctx: ContextKeys,
+  commandState?: Readonly<Record<string, CommandLayoutEntry>>,
+): MenuNode[] {
+  return nodes.filter((node) => {
+    if (commandState && node.commandId && node.children.length === 0) {
+      return commandState[node.commandId]?.visible === true;
+    }
+    return isWhenEnabled(node.when, ctx);
+  });
+}

package/src/layout/content-error-notice.tsx

@@ -0,0 +1,31 @@
+import { IconFileAlert, IconFolderOpen } from "@tabler/icons-react";
+import { Button } from "@moloodev/ui";
+
+export function ContentErrorNotice({
+  onOpenBrowser,
+}: {
+  onOpenBrowser: () => void;
+}) {
+  return (
+    <section
+      role="alert"
+      className="flex min-h-0 flex-1 items-center justify-center p-6"
+    >
+      <div className="max-w-md">
+        <IconFileAlert
+          aria-hidden
+          className="mb-4 size-8 text-muted-foreground"
+        />
+        <h2 className="text-lg font-semibold">애셋을 열 수 없습니다</h2>
+        <p className="mt-3 text-sm leading-6 text-muted-foreground">
+          저장된 데이터 형식을 읽을 수 없어 편집을 중지했습니다. 다른 애셋을
+          열거나 이전 리비전을 확인해 주세요.
+        </p>
+        <Button className="mt-5" variant="outline" onClick={onOpenBrowser}>
+          <IconFolderOpen aria-hidden />
+          애셋 브라우저 열기
+        </Button>
+      </div>
+    </section>
+  );
+}