@moloodev/editor-sdk 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moloodev/editor-sdk",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "exports": {
     ".": "./src/view.ts",
@@ -29,8 +29,8 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.32",
     "zod": "^4.5.4",
-    "@moloodev/platform": "0.10.0",
-    "@moloodev/ui": "0.10.0"
+    "@moloodev/platform": "0.11.0",
+    "@moloodev/ui": "0.11.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -46,9 +46,9 @@
     "jsdom": "30.1.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "tsx": "^4.23.13",
+    "vitest": "5.1.0",
     "typescript": "^7.0.2",
-    "@moloodev/typescript-config": "0.10.0"
+    "@moloodev/typescript-config": "0.11.0"
   },
   "publishConfig": {
     "access": "public"
@@ -60,7 +60,7 @@
   ],
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.origin-headers.json",
-    "test": "tsx --test 'src/**/*.test.ts' 'src/**/*.test.tsx' && pnpm test:browser",
-    "test:browser": "tsx --test 'browser/**/*.test.ts'"
+    "test": "vitest run --root ../.. --project @moloodev/editor-sdk --project @moloodev/editor-sdk:browser",
+    "test:browser": "vitest run --root ../.. --project @moloodev/editor-sdk:browser"
   }
 }

package/src/chrome-manifest.ts

@@ -10,6 +10,8 @@ const HOST_COMMANDS = new Set([
   "editor.new",
   "editor.open",
   "editor.preferences",
+  "editor.about",
+  "editor.pinToSidebar",
 ]);
 
 const whenClause = z

package/src/commands/icons/catalog.ts

@@ -1,6 +1,14 @@
 import type { ComponentType } from "react";
 import { parseTablerIconUri } from "../manifest/editor-document";
 import {
+  IconArchive,
+  IconCube,
+  IconDatabase,
+  IconFile,
+  IconFolder,
+  IconHelp,
+  IconMovie,
+  IconTypography,
   IconArrowBackUp,
   IconArrowForwardUp,
   IconBold,
@@ -69,6 +77,14 @@ export type EditorIconComponent = ComponentType<IconProps>;
 
 /** Host-resolved Tabler icon names. */
 export const EDITOR_ICON_CATALOG = {
+  archive: IconArchive,
+  cube: IconCube,
+  database: IconDatabase,
+  file: IconFile,
+  folder: IconFolder,
+  help: IconHelp,
+  movie: IconMovie,
+  typography: IconTypography,
   menu: IconMenu2,
   "arrow-back-up": IconArrowBackUp,
   restore: IconRestore,

package/src/commands/manifest/editor-document.ts

@@ -10,7 +10,7 @@ import { validateManifest } from "./validate-manifest";
 
 export const TABLER_ICON_URI_PREFIX = "tabler:";
 const TABLER_ICON_NAME = /^[a-z0-9]+(-[a-z0-9]+)*$/;
-const HEX_COLOR = /^#[0-9a-fA-F]{6}$/;
+export const HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;
 
 export function parseTablerIconUri(value: string): string | null {
   if (!value.startsWith(TABLER_ICON_URI_PREFIX)) return null;
@@ -28,6 +28,8 @@ export type EditorContributes = Pick<
 >;
 
 export type EditorFileMatcher = {
+  /** Explicit asset kind id for type-only displays, independent of acceptedTypes. */
+  type?: string;
   /** File extensions with leading dot, supporting compound extensions (e.g. [".layout.json"], [".md", ".markdown"]). */
   extensions?: string[];
   /** MIME types or wildcard families (e.g. ["text/markdown"], ["application/json"]). */
@@ -56,6 +58,8 @@ export type EditorManifest = {
   categories?: string[];
   /** Host-resolved Tabler icon URI (`tabler:{name}`). */
   icon?: string;
+  /** Editor identity tint (`#rrggbb`), independent of fileTypes. */
+  color?: string;
   /** Optional host I/O the editor implements (`editor.import` / `editor.download`). */
   capabilities?: EditorCapability[];
   importAccept?: string;
@@ -117,6 +121,13 @@ function parseEditorFileMatchers(input: unknown): EditorFileMatcher[] {
         `Invalid editor manifest: fileTypes.${index} must be an object`,
       );
     }
+    let type: string | undefined;
+    if (entry.type != null) {
+      type = requireString(entry.type, `fileTypes.${index}.type`);
+      if (!isQualifiedName(type)) {
+        throw new Error(`Invalid editor manifest: fileTypes.${index}.type must be publisher.name`);
+      }
+    }
     let extensions: string[] | undefined;
     if (entry.extensions != null) {
       if (!Array.isArray(entry.extensions) || entry.extensions.length === 0) {
@@ -198,18 +209,19 @@ function parseEditorFileMatchers(input: unknown): EditorFileMatcher[] {
     let icon: AssetTypeIcon | undefined;
     if (entry.icon != null) {
       const rawIcon = requireString(entry.icon, `fileTypes.${index}.icon`);
-      if (parseTablerIconUri(rawIcon) === null) {
+      const name = parseTablerIconUri(rawIcon);
+      if (name === null) {
         throw new Error(
           `Invalid editor manifest: fileTypes.${index}.icon must be tabler:{name}`,
         );
       }
-      icon = rawIcon as AssetTypeIcon;
+      icon = `tabler:${name}`;
     }
 
     let color: string | undefined;
     if (entry.color != null) {
       const rawColor = requireString(entry.color, `fileTypes.${index}.color`);
-      if (!HEX_COLOR.test(rawColor)) {
+      if (!HEX_COLOR_PATTERN.test(rawColor)) {
         throw new Error(
           `Invalid editor manifest: fileTypes.${index}.color must be #rrggbb`,
         );
@@ -218,6 +230,7 @@ function parseEditorFileMatchers(input: unknown): EditorFileMatcher[] {
     }
 
     return {
+      ...(type ? { type } : {}),
       ...(extensions ? { extensions } : {}),
       ...(mimeTypes ? { mimeTypes } : {}),
       ...(schema ? { schema } : {}),
@@ -370,6 +383,14 @@ export function validateEditorManifest(
       throw new Error("Invalid editor manifest: icon must be tabler:{name}");
     }
   }
+  let color: string | undefined;
+  if (input.color != null) {
+    const rawColor = requireString(input.color, "color");
+    if (!HEX_COLOR_PATTERN.test(rawColor)) {
+      throw new Error("Invalid editor manifest: color must be #rrggbb");
+    }
+    color = rawColor.toLowerCase();
+  }
   if ("order" in input) {
     throw new Error(
       "Invalid editor manifest: order belongs on workspace favorites, not editor documents",
@@ -438,6 +459,7 @@ export function validateEditorManifest(
     ...(fileTypes ? { fileTypes } : {}),
     ...(templates ? { templates } : {}),
     ...(icon ? { icon } : {}),
+    ...(color ? { color } : {}),
     ...(categories ? { categories } : {}),
     ...(capabilities ? { capabilities } : {}),
     ...(importAccept ? { importAccept } : {}),

package/src/commands/manifest/merge.ts

@@ -111,6 +111,7 @@ function buildMenuTree(
   }
 
   const SEGMENT_META: Record<string, { label: string; order: number }> = {
+    app: { label: "앱", order: 0 },
     file: { label: "파일", order: 10 },
     edit: { label: "편집", order: 30 },
     insert: { label: "삽입", order: 35 },

package/src/editor-common.ts

@@ -63,7 +63,7 @@ export const EDITOR_COMMON_CONTRIBUTES = {
     },
     {
       id: "editor.preferences",
-      title: "에디터 설정...",
+      title: "에디터 설정…",
       group: "앱",
     },
     {
@@ -140,10 +140,10 @@ export const EDITOR_COMMON_CONTRIBUTES = {
       shortcut: "Backspace",
     },
     {
-      path: ["edit", "preferences"],
+      path: ["app", "preferences"],
       commandId: "editor.preferences",
-      group: "9_settings",
-      order: 20,
+      group: "2_settings",
+      order: 10,
     },
     {
       path: ["view", "resetLayout"],

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

@@ -22,6 +22,9 @@ export function isHostReservedKey(key: string): boolean {
 
 const HOST_CHROME_SCOPE = "host-chrome";
 
+/** The host owns this label; published views still send their own title ("환경설정"). */
+export const PREFERENCES_LABEL = "에디터 설정…";
+
 export function scopeManifest(
   manifest: ChromeManifest,
   activation?: "exact",
@@ -33,7 +36,13 @@ export function scopeManifest(
       ? { commands: manifest.contributes.commands }
       : {}),
     ...(manifest.contributes?.menus
-      ? { menus: manifest.contributes.menus }
+      ? { menus: manifest.contributes.menus.map((menu) =>
+        // Compat for published views that still contribute the old Edit-menu path.
+        // Remove once no published editor targets an SDK older than this release.
+        menu.commandId === "editor.preferences"
+          ? { ...menu, path: ["app", "preferences"], group: "2_settings", order: 10, label: PREFERENCES_LABEL }
+          : menu,
+      ) }
       : {}),
     ...(manifest.contributes?.keybindings
       ? { keybindings: manifest.contributes.keybindings }
@@ -43,8 +52,19 @@ export function scopeManifest(
 
 export function hostChromeMergeInput(
   manifest: ChromeManifest,
+  options?: { displayName: string },
 ): ContributionManifest[] {
-  return [scopeManifest(manifest)];
+  return [{
+    id: "host-app-menu",
+    commands: [
+      { id: "editor.about", title: `${options?.displayName ?? "앱"}에 대하여` },
+      { id: "editor.pinToSidebar", title: "사이드바에 고정" },
+    ],
+    menus: [
+      { path: ["app", "about"], commandId: "editor.about", group: "1_about", order: 10 },
+      { path: ["app", "pin"], commandId: "editor.pinToSidebar", group: "3_sidebar", order: 10 },
+    ],
+  }, scopeManifest(manifest)];
 }
 
 export type CommandStateBody = Extract<

package/src/host/host-chrome.tsx

@@ -14,6 +14,7 @@ import { KindIcon } from "@moloodev/ui/kind-icon";
 import { TooltipProvider } from "@moloodev/ui";
 import {
   hostChromeMergeInput,
+  PREFERENCES_LABEL,
   scopeManifest,
   validateHostChrome,
   type CommandStateBody,
@@ -25,6 +26,8 @@ export type HostChromeHandlers = {
   openStartDialog: () => void;
   openBrowser: () => void;
   openPreferences?: () => void;
+  openAbout?: () => void;
+  togglePinToSidebar?: () => 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. */
@@ -33,6 +36,7 @@ export type HostChromeHandlers = {
 
 export type EditorHostChromeProps = {
   value: unknown;
+  appMenu?: { displayName: string; pinned: boolean };
   host: HostChromeHandlers;
   onViewCommand: (commandId: string) => void;
   commandState?: Readonly<Record<string, CommandStateBody>>;
@@ -104,7 +108,7 @@ function overlayCommandState(
       visible: state.visible,
       disabled: state.disabled,
       pressed: state.pressed,
-      label: state.label,
+      label: id === "editor.preferences" ? PREFERENCES_LABEL : state.label,
     };
   }
   return next ?? commands;
@@ -117,6 +121,14 @@ export function dispatchHostCommand(
   onViewCommand: (commandId: string) => void,
 ): void {
   if (!declared.has(commandId)) return;
+  if (commandId === "editor.about") {
+    host.openAbout?.();
+    return;
+  }
+  if (commandId === "editor.pinToSidebar") {
+    host.togglePinToSidebar?.();
+    return;
+  }
   if (commandId === "editor.new") {
     host.openStartDialog();
     return;
@@ -152,18 +164,16 @@ export function chromeCommandHandlers(
 }
 
 function HostCommandHandlers({
-  manifest,
   host,
   onViewCommand,
 }: {
-  manifest: ChromeManifest;
   host: HostChromeHandlers;
   onViewCommand: (commandId: string) => void;
 }) {
-  const { registerHandler } = useCommands();
+  const { commands, registerHandler } = useCommands();
   const commandIds = useMemo(
-    () => manifest.contributes?.commands?.map((command) => command.id) ?? [],
-    [manifest],
+    () => commands.map((command) => command.id),
+    [commands],
   );
   const declared = useMemo(() => new Set(commandIds), [commandIds]);
   useEffect(() => {
@@ -198,18 +208,20 @@ function HostCommands({
       <ScopeProvider manifest={scopeManifest(manifest, "exact")}>
         {children}
       </ScopeProvider>
-      <HostCommandHandlers manifest={manifest} host={host} onViewCommand={onViewCommand} />
+      <HostCommandHandlers host={host} onViewCommand={onViewCommand} />
     </>
   );
 }
 
 function ChromeFrame({
   spec,
+  appMenu,
   host,
   onViewCommand,
   commandState,
 }: {
   spec: Spec;
+  appMenu?: EditorHostChromeProps["appMenu"];
   host: HostChromeHandlers;
   onViewCommand: (commandId: string) => void;
   commandState?: Readonly<Record<string, CommandStateBody>>;
@@ -221,8 +233,18 @@ function ChromeFrame({
     [commands],
   );
   const layoutCommands = useMemo(
-    () => overlayCommandState(commandLayoutState(commands, ctx).commands, commandState),
-    [commandState, commands, ctx],
+    () => ({
+      ...overlayCommandState(commandLayoutState(commands, ctx).commands, commandState),
+      "editor.about": {
+        visible: true, disabled: !host.openAbout, pressed: false,
+        label: `${appMenu?.displayName ?? "앱"}에 대하여`,
+      },
+      "editor.pinToSidebar": {
+        visible: true, disabled: !host.togglePinToSidebar,
+        pressed: appMenu?.pinned ?? false, label: "사이드바에 고정",
+      },
+    }),
+    [appMenu, commandState, commands, ctx, host.openAbout, host.togglePinToSidebar],
   );
   const store = useMemo(() => createStateStore({ commands: layoutCommands }), []);
   useLayoutEffect(() => {
@@ -264,6 +286,7 @@ function ChromeFrame({
   return (
     <LayoutBindingProvider value={binding}>
       <EditorMenuBar
+        appMenuLabel={appMenu?.displayName}
         commandState={layoutCommands}
         onExecute={(commandId) => handlers.executeCommand({ commandId })}
       />
@@ -273,14 +296,15 @@ function ChromeFrame({
 
 export function EditorHostChrome({
   value,
+  appMenu,
   host,
   onViewCommand,
   commandState,
 }: EditorHostChromeProps) {
   const validated = useMemo(() => validateHostChrome(value), [value]);
   const seeded = useMemo(
-    () => (validated.ok ? hostChromeMergeInput(validated.manifest) : []),
-    [validated],
+    () => (validated.ok ? hostChromeMergeInput(validated.manifest, appMenu) : []),
+    [validated, appMenu?.displayName],
   );
   if (!validated.ok) return null;
   return (
@@ -293,6 +317,7 @@ export function EditorHostChrome({
         >
           <ChromeFrame
             spec={validated.spec}
+            appMenu={appMenu}
             host={host}
             onViewCommand={onViewCommand}
             commandState={commandState}

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

@@ -34,9 +34,11 @@ type MenuCommandState = Readonly<Record<string, CommandLayoutEntry>>;
 
 /** Horizontal editor menubar driven by merged contribution manifests. */
 export function EditorMenuBar({
+  appMenuLabel,
   commandState,
   onExecute,
 }: {
+  appMenuLabel?: string;
   commandState?: MenuCommandState;
   onExecute?: (commandId: string) => unknown;
 } = {}) {
@@ -103,7 +105,7 @@ export function EditorMenuBar({
                   />
                 }
               >
-                {node.label}
+                {node.segment === "app" ? appMenuLabel ?? node.label : node.label}
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="start"
@@ -298,7 +300,7 @@ export function MenuLeaf({
     </>
   );
 
-  if (isPanelToggleCommand(node.commandId)) {
+  if (isPanelToggleCommand(node.commandId) || node.commandId === "editor.pinToSidebar") {
     return (
       <DropdownMenuCheckboxItem
         className={`${editorMenuItemClass} pr-7`}

package/src/view/file-types-context.ts

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+import type { FileAppearanceMatcher } from "@moloodev/platform";
+
+/** Active view manifest declarations, supplied by mountEditorView. */
+export const FileTypesContext = createContext<readonly FileAppearanceMatcher[]>([]);

package/src/view/hooks.ts

@@ -1,5 +1,5 @@
 import { createContext, createElement, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from "react";
-import { KNOWN_PATTERN_IDS, resolvePatternAppearance } from "@moloodev/platform";
+import { KNOWN_PATTERN_IDS, resolveTypeAppearance, type FileAppearanceMatcher } from "@moloodev/platform";
 import type { Doc } from "../crdt";
 import type { Composition, Publication } from "@moloodev/platform";
 import type {
@@ -120,8 +120,8 @@ export function shouldShowContentError(
   return contentError && isEditorContentReady(mode, hasDoc);
 }
 
-export function kindOf(type: string) {
-  const entry = resolvePatternAppearance(type);
+export function kindOf(type: string, matchers: readonly FileAppearanceMatcher[] = []) {
+  const entry = resolveTypeAppearance(type, matchers);
   return {
     id: type,
     label: entry.label,
@@ -130,8 +130,9 @@ export function kindOf(type: string) {
   };
 }
 
-export function kindsOf() {
-  return KNOWN_PATTERN_IDS.map(kindOf);
+export function kindsOf(matchers: readonly FileAppearanceMatcher[] = []) {
+  const types = new Set<string>([...KNOWN_PATTERN_IDS, ...matchers.flatMap((rule) => rule.type ? [rule.type] : [])]);
+  return [...types].map((type) => kindOf(type, matchers));
 }
 
 export function useTheme() {

package/src/view/mount-editor-view.ts

@@ -2,6 +2,7 @@ import { createElement, type ComponentType } from "react";
 import type { EditorManifest } from "../commands";
 import { connectEditorView, type EditorView } from "../view";
 import { bindThemeClass } from "./theme-class";
+import { FileTypesContext } from "./file-types-context";
 import { createEditorChrome } from "./editor-chrome";
 
 /** Imports outside an iframe stay inert, including server and DOM unit tests. */
@@ -24,7 +25,8 @@ export function mountEditorView(options: {
   root.id = "root";
   document.body.append(root);
   void import("react-dom/client").then(({ createRoot }) => {
-    createRoot(root).render(createElement(options.Root, { view }));
+    createRoot(root).render(createElement(FileTypesContext.Provider, { value: options.manifest.fileTypes ?? [] },
+      createElement(options.Root, { view })));
   });
   void view.handshake.then(async (reply) => {
     if (!reply.ok) throw new Error(reply.code);

package/src/view/port-binding.ts

@@ -1,5 +1,6 @@
-import { createElement, useCallback, useMemo, useSyncExternalStore, type ReactNode } from "react";
+import { createElement, useContext, useCallback, useMemo, useSyncExternalStore, type ReactNode } from "react";
 import type { EditorOperation } from "../index";
+import { FileTypesContext } from "./file-types-context";
 import { RenderFailure, renderCode } from "../render-result";
 import type { EditorView } from "../view";
 import { EditorViewProvider, kindOf, type EditorOpenBrowserArgs, type EditorViewBinding } from "./hooks";
@@ -66,7 +67,8 @@ function createPortBinding(view: EditorView, acceptedTypes: readonly string[]):
     },
     useKind(type) {
       useSnapshot();
-      return useMemo(() => kindOf(type), [type]);
+      const matchers = useContext(FileTypesContext);
+      return useMemo(() => kindOf(type, matchers), [type, matchers]);
     },
     useKinds: () => unavailable("useKinds"),
     useList: () => unavailable("useList"),