@moloodev/editor-sdk 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moloodev/editor-sdk",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "exports": {
     ".": "./src/view.ts",
@@ -10,6 +10,7 @@
     "./origin-headers": "./src/origin-headers.ts",
     "./layout": "./src/layout/index.ts",
     "./layout/frame": "./src/layout/frame.ts",
+    "./host": "./src/host/index.ts",
     "./commands": "./src/commands/index.ts",
     "./commands/editor-document": "./src/commands/manifest/editor-document.ts",
     "./commands/when": "./src/commands/when/validate.ts",
@@ -28,8 +29,8 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.32",
     "zod": "^4.5.4",
-    "@moloodev/platform": "0.2.1",
-    "@moloodev/ui": "0.2.1"
+    "@moloodev/platform": "0.2.2",
+    "@moloodev/ui": "0.2.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -47,7 +48,7 @@
     "react-dom": "^19.2.8",
     "tsx": "^4.23.13",
     "typescript": "^7.0.2",
-    "@moloodev/typescript-config": "0.2.1"
+    "@moloodev/typescript-config": "0.2.2"
   },
   "publishConfig": {
     "access": "public"

package/src/host/host-chrome-manifest.ts

@@ -0,0 +1,135 @@
+import {
+  isBrowserReservedKey,
+  isClipboardForbiddenKey,
+  mergeManifests,
+  normalizeKey,
+  type ContributionManifest,
+} from "../commands";
+import {
+  parseChromeManifest,
+  type ChromeManifest,
+  type EditorEvent,
+  type EditorLayoutValues,
+} from "../protocol-entry";
+import type { Spec } from "../layout/types";
+import { sectionIdsOf, validateLayoutSpec } from "../layout/validate-layout-spec";
+
+/** Keys the host keeps for the browser or clipboard; an editor view may not bind them. */
+export function isHostReservedKey(key: string): boolean {
+  const normalized = normalizeKey(key);
+  return isBrowserReservedKey(normalized) || isClipboardForbiddenKey(normalized);
+}
+
+const HOST_CHROME_SCOPE = "host-chrome";
+
+export function scopeManifest(
+  manifest: ChromeManifest,
+  activation?: "exact",
+): ContributionManifest {
+  return {
+    id: HOST_CHROME_SCOPE,
+    ...(activation ? { activation } : {}),
+    ...(manifest.contributes?.commands
+      ? { commands: manifest.contributes.commands }
+      : {}),
+    ...(manifest.contributes?.menus
+      ? { menus: manifest.contributes.menus }
+      : {}),
+    ...(manifest.contributes?.keybindings
+      ? { keybindings: manifest.contributes.keybindings }
+      : {}),
+  };
+}
+
+export function hostChromeMergeInput(
+  manifest: ChromeManifest,
+): ContributionManifest[] {
+  return [scopeManifest(manifest)];
+}
+
+export type CommandStateBody = Extract<
+  EditorEvent,
+  { type: "command.state" }
+>["body"];
+
+export type HostChrome =
+  | { ok: true; manifest: ChromeManifest; spec: Spec }
+  | { ok: false; code: "schema" };
+
+function stringField(value: unknown, key: string): string | undefined {
+  if (typeof value !== "object" || value === null) return undefined;
+  for (const [name, field] of Object.entries(value)) {
+    if (name === key && typeof field === "string") return field;
+  }
+  return undefined;
+}
+
+function childField(value: unknown, key: string): unknown {
+  if (typeof value !== "object" || value === null) return undefined;
+  for (const [name, field] of Object.entries(value)) {
+    if (name === key) return field;
+  }
+  return undefined;
+}
+
+export function layoutForSpec(layout: EditorLayoutValues, spec: Spec): EditorLayoutValues {
+  if (layout.collapsed === undefined) return { panels: layout.panels };
+  const allowed = new Set<string>();
+  for (const element of Object.values(spec.elements)) {
+    if (stringField(element, "type") !== "Panel") continue;
+    for (const id of sectionIdsOf(childField(element, "props"))) allowed.add(id);
+  }
+  const collapsed: { [sectionId: string]: boolean } = {};
+  for (const [id, value] of Object.entries(layout.collapsed)) {
+    if (allowed.has(id)) collapsed[id] = value;
+  }
+  if (Object.keys(collapsed).length === 0) return { panels: layout.panels };
+  return { panels: layout.panels, collapsed };
+}
+
+export function panelContentIds(spec: Spec): string[] {
+  const ids: string[] = [];
+  for (const element of Object.values(spec.elements)) {
+    if (stringField(element, "type") !== "Panel") continue;
+    const contentId = stringField(childField(element, "props"), "contentId");
+    if (contentId) ids.push(contentId);
+  }
+  return ids;
+}
+
+export function commandIdsOf(manifest: ChromeManifest): Set<string> {
+  const ids = new Set<string>();
+  for (const command of manifest.contributes?.commands ?? []) ids.add(command.id);
+  return ids;
+}
+
+export function validateHostChrome(value: unknown): HostChrome {
+  const parsed = parseChromeManifest(value);
+  if (!parsed.ok) return { ok: false, code: "schema" };
+  let spec: Spec;
+  try {
+    spec = validateLayoutSpec(parsed.message.layout);
+  } catch {
+    return { ok: false, code: "schema" };
+  }
+  const ids = panelContentIds(spec);
+  const idSet = new Set(ids);
+  if (idSet.size !== ids.length) return { ok: false, code: "schema" };
+  const titleKeys = Object.keys(parsed.message.titles);
+  if (titleKeys.length !== idSet.size) return { ok: false, code: "schema" };
+  for (const key of titleKeys) {
+    if (!idSet.has(key)) return { ok: false, code: "schema" };
+  }
+  for (const key of Object.keys(parsed.message.panelHeaders ?? {})) {
+    if (!idSet.has(key)) return { ok: false, code: "schema" };
+  }
+  for (const binding of parsed.message.contributes?.keybindings ?? []) {
+    if (isHostReservedKey(binding.key)) return { ok: false, code: "schema" };
+  }
+  try {
+    mergeManifests(hostChromeMergeInput(parsed.message));
+  } catch {
+    return { ok: false, code: "schema" };
+  }
+  return { ok: true, manifest: parsed.message, spec };
+}

package/src/host/host-chrome.tsx

@@ -0,0 +1,304 @@
+import { useEffect, useLayoutEffect, useMemo, type ReactNode } from "react";
+import { createStateStore } from "@json-render/core";
+import { CommandsProvider, ScopeProvider, useCommands } from "../commands";
+import type { ChromeManifest } from "../protocol-entry";
+import { commandLayoutState, type CommandLayoutEntry } from "../layout/chrome/command-layout-state";
+import { EditorMenuBar } from "../layout/chrome/editor-menu";
+import {
+  LayoutBindingProvider,
+  type CommandIconComponent,
+  type LayoutActionHandler,
+} from "../layout/layout-binding";
+import type { Spec } from "../layout/types";
+import { KindIcon } from "@moloodev/ui/kind-icon";
+import { TooltipProvider } from "@moloodev/ui";
+import {
+  hostChromeMergeInput,
+  scopeManifest,
+  validateHostChrome,
+  type CommandStateBody,
+} from "./host-chrome-manifest";
+
+const iconByName = new Map<string, CommandIconComponent>();
+
+export type HostChromeHandlers = {
+  openStartDialog: () => void;
+  openBrowser: () => void;
+  openPreferences?: () => void;
+  /** When set, `editor.import` opens the host file picker instead of reaching the view. */
+  openImport?: () => void;
+  /** Runs before `editor.resetLayout` is forwarded to the view. */
+  resetLayout?: () => void;
+};
+
+export type EditorHostChromeProps = {
+  value: unknown;
+  host: HostChromeHandlers;
+  onViewCommand: (commandId: string) => void;
+  commandState?: Readonly<Record<string, CommandStateBody>>;
+};
+
+function stringField(value: unknown, key: string): string | undefined {
+  if (typeof value !== "object" || value === null) return undefined;
+  for (const [name, field] of Object.entries(value)) {
+    if (name === key && typeof field === "string") return field;
+  }
+  return undefined;
+}
+
+function childField(value: unknown, key: string): unknown {
+  if (typeof value !== "object" || value === null) return undefined;
+  for (const [name, field] of Object.entries(value)) {
+    if (name === key) return field;
+  }
+  return undefined;
+}
+
+function toolbarIcons(spec: Spec): Map<string, string> {
+  const icons = new Map<string, string>();
+  for (const element of Object.values(spec.elements)) {
+    if (stringField(element, "type") !== "ToolbarButton") continue;
+    const props = childField(element, "props");
+    const commandId = stringField(props, "commandId");
+    const icon = stringField(props, "icon");
+    if (!commandId || !icon || icons.has(commandId)) continue;
+    icons.set(commandId, icon);
+  }
+  return icons;
+}
+
+function chromeIcon(name: string): CommandIconComponent {
+  const found = iconByName.get(name);
+  if (found) return found;
+  function Icon({
+    className,
+    strokeWidth,
+  }: {
+    className?: string;
+    strokeWidth?: number | string;
+  }) {
+    return (
+      <KindIcon
+        icon={name}
+        className={className}
+        strokeWidth={typeof strokeWidth === "number" ? strokeWidth : undefined}
+      />
+    );
+  }
+  iconByName.set(name, Icon);
+  return Icon;
+}
+
+function overlayCommandState(
+  commands: Record<string, CommandLayoutEntry>,
+  commandState: Readonly<Record<string, CommandStateBody>> | undefined,
+): Record<string, CommandLayoutEntry> {
+  // Frame command.state resolves visibility and availability from the view's own when context.
+  if (!commandState) return commands;
+  let next: Record<string, CommandLayoutEntry> | undefined;
+  for (const [id, state] of Object.entries(commandState)) {
+    const current = (next ?? commands)[id];
+    if (!current) continue;
+    next ??= { ...commands };
+    next[id] = {
+      visible: state.visible,
+      disabled: state.disabled,
+      pressed: state.pressed,
+      label: state.label,
+    };
+  }
+  return next ?? commands;
+}
+
+export function dispatchHostCommand(
+  commandId: string,
+  declared: ReadonlySet<string>,
+  host: HostChromeHandlers,
+  onViewCommand: (commandId: string) => void,
+): void {
+  if (!declared.has(commandId)) return;
+  if (commandId === "editor.new") {
+    host.openStartDialog();
+    return;
+  }
+  if (commandId === "editor.open") {
+    host.openBrowser();
+    return;
+  }
+  if (commandId === "editor.preferences" && host.openPreferences) {
+    host.openPreferences();
+    return;
+  }
+  if (commandId === "editor.import" && host.openImport) {
+    host.openImport();
+    return;
+  }
+  if (commandId === "editor.resetLayout") host.resetLayout?.();
+  onViewCommand(commandId);
+}
+
+export function chromeCommandHandlers(
+  declared: ReadonlySet<string>,
+  host: HostChromeHandlers,
+  onViewCommand: (commandId: string) => void,
+): { executeCommand: LayoutActionHandler } {
+  return {
+    executeCommand: (params) => {
+      const commandId =
+        params && typeof params.commandId === "string" ? params.commandId : "";
+      dispatchHostCommand(commandId, declared, host, onViewCommand);
+    },
+  };
+}
+
+function HostCommandHandlers({
+  manifest,
+  host,
+  onViewCommand,
+}: {
+  manifest: ChromeManifest;
+  host: HostChromeHandlers;
+  onViewCommand: (commandId: string) => void;
+}) {
+  const { registerHandler } = useCommands();
+  const commandIds = useMemo(
+    () => manifest.contributes?.commands?.map((command) => command.id) ?? [],
+    [manifest],
+  );
+  const declared = useMemo(() => new Set(commandIds), [commandIds]);
+  useEffect(() => {
+    // ScopeProvider installs editor.undo/redo in its own effect. This sibling's
+    // effect runs after ScopeProvider's and keeps every declared id on this map.
+    const unsubs = commandIds.map((id) =>
+      registerHandler(id, () => {
+        dispatchHostCommand(id, declared, host, onViewCommand);
+      }),
+    );
+    return () => {
+      for (const unsub of unsubs) unsub();
+    };
+  }, [commandIds, declared, host, onViewCommand, registerHandler]);
+
+  return null;
+}
+
+function HostCommands({
+  manifest,
+  host,
+  onViewCommand,
+  children,
+}: {
+  manifest: ChromeManifest;
+  host: HostChromeHandlers;
+  onViewCommand: (commandId: string) => void;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <ScopeProvider manifest={scopeManifest(manifest, "exact")}>
+        {children}
+      </ScopeProvider>
+      <HostCommandHandlers manifest={manifest} host={host} onViewCommand={onViewCommand} />
+    </>
+  );
+}
+
+function ChromeFrame({
+  spec,
+  host,
+  onViewCommand,
+  commandState,
+}: {
+  spec: Spec;
+  host: HostChromeHandlers;
+  onViewCommand: (commandId: string) => void;
+  commandState?: Readonly<Record<string, CommandStateBody>>;
+}) {
+  const { commands, getContext, keybindings } = useCommands();
+  const ctx = getContext();
+  const declared = useMemo(
+    () => new Set(commands.map((command) => command.id)),
+    [commands],
+  );
+  const layoutCommands = useMemo(
+    () => overlayCommandState(commandLayoutState(commands, ctx).commands, commandState),
+    [commandState, commands, ctx],
+  );
+  const store = useMemo(() => createStateStore({ commands: layoutCommands }), []);
+  useLayoutEffect(() => {
+    if (store.get("/commands") !== layoutCommands) {
+      store.set("/commands", layoutCommands);
+    }
+  }, [layoutCommands, store]);
+  const icons = useMemo(() => toolbarIcons(spec), [spec]);
+  const handlers = useMemo(
+    () => chromeCommandHandlers(declared, host, onViewCommand),
+    [declared, host, onViewCommand],
+  );
+  const keysByCommand = useMemo(
+    () =>
+      new Map(keybindings.map((binding) => [binding.commandId, binding.key])),
+    [keybindings],
+  );
+  const resolveIcon = useMemo(
+    () => (icon: string | undefined, commandId: string) => {
+      const name = icon ?? icons.get(commandId);
+      if (!name) return null;
+      return chromeIcon(name);
+    },
+    [icons],
+  );
+  const shortcutFor = useMemo(
+    () => (commandId: string) => keysByCommand.get(commandId),
+    [keysByCommand],
+  );
+  const binding = useMemo(
+    () => ({
+      store,
+      handlers,
+      resolveIcon,
+      shortcutFor,
+    }),
+    [handlers, resolveIcon, shortcutFor, store],
+  );
+  return (
+    <LayoutBindingProvider value={binding}>
+      <EditorMenuBar
+        commandState={layoutCommands}
+        onExecute={(commandId) => handlers.executeCommand({ commandId })}
+      />
+    </LayoutBindingProvider>
+  );
+}
+
+export function EditorHostChrome({
+  value,
+  host,
+  onViewCommand,
+  commandState,
+}: EditorHostChromeProps) {
+  const validated = useMemo(() => validateHostChrome(value), [value]);
+  const seeded = useMemo(
+    () => (validated.ok ? hostChromeMergeInput(validated.manifest) : []),
+    [validated],
+  );
+  if (!validated.ok) return null;
+  return (
+    <TooltipProvider>
+      <CommandsProvider manifests={seeded}>
+        <HostCommands
+          manifest={validated.manifest}
+          host={host}
+          onViewCommand={onViewCommand}
+        >
+          <ChromeFrame
+            spec={validated.spec}
+            host={host}
+            onViewCommand={onViewCommand}
+            commandState={commandState}
+          />
+        </HostCommands>
+      </CommandsProvider>
+    </TooltipProvider>
+  );
+}

package/src/host/index.ts

@@ -0,0 +1,18 @@
+export {
+  EditorHostChrome,
+  chromeCommandHandlers,
+  dispatchHostCommand,
+  type EditorHostChromeProps,
+  type HostChromeHandlers,
+} from "./host-chrome";
+export {
+  commandIdsOf,
+  hostChromeMergeInput,
+  isHostReservedKey,
+  layoutForSpec,
+  panelContentIds,
+  scopeManifest,
+  validateHostChrome,
+  type CommandStateBody,
+  type HostChrome,
+} from "./host-chrome-manifest";