8404cee664
* refactor(design-jsx): extract design JSX into its own package Design JSX elements, helpers, schema, reference, and JSX export only need the scene graph, yet lived in Core, so every consumer of the authoring API pulled in the renderer, layout, and file formats. @open-pencil/design-jsx now owns them and depends only on scene-graph. The renderer takes icon lookup, SVG conversion, vector creation, and layout as DesignJSXServices; Core binds its own and exports the bound renderJSX and renderTree from @open-pencil/core/design-jsx. * feat(design-jsx): export the JSX runtime for TSX authoring The package already had a JSX runtime, but nothing exported it, so design trees could only be written as function calls or JSX strings. Export `./jsx-runtime` and `./jsx-dev-runtime` so `jsxImportSource` works, and make `Fragment` produce the same empty-type node as `<>` in `renderJSX` strings. * fix(design-jsx): render fragments nested in other elements A fragment builds a node with an empty type, which only renderJSX expanded, and only at the root. Nested fragments and fragments passed to renderTree failed with 'Unknown element: <>'. Inline fragment children when trees are built, and share root expansion between renderTree and renderJSX.
2.4 KiB
| title | description |
|---|---|
| Native JavaScript APIs | Find OpenPencil's public document, editor, layout, and design-authoring APIs. |
Native JavaScript APIs
OpenPencil's native APIs are the ordinary JavaScript libraries used by the editor itself. There is no separate RPC-style authoring language or parallel agent implementation.
| Responsibility | Public entry point | Start here |
|---|---|---|
| Document nodes, hierarchy, variables, instances, geometry | @open-pencil/scene-graph |
Scene Graph |
| Editing actions, selection, undo, component properties, events | @open-pencil/core/editor |
createEditor() and its inferred Editor type; custom editor shell |
| Declarative scene construction | @open-pencil/design-jsx for elements, helpers, and JSX export; @open-pencil/core/design-jsx to render them |
JSX guide and authoring reference |
| Layout computation | @open-pencil/core/layout |
computeLayout(graph, frameId) and computeAllLayouts(graph, scopeId) |
| Figma-compatible scripting | @open-pencil/core/figma-api |
Compatibility |
| Schema-backed agent operations | @open-pencil/core/tools |
MCP |
Use the owning package's public exports, not workspace source paths. Package declarations describe the current callable signatures; the table above identifies ownership rather than duplicating every method.
Mutation boundaries
Graph operations are low-level document mutations. They do not automatically constitute an editor undo transaction. Use editor actions for interactive edits that need selection, undo, component synchronization, and layout orchestration. Direct layout functions compute geometry; they are not replacements for editor actions.
Agent access
Library imports, agent tools, and the eval scripting environment are distinct entry points. The installed execution environment determines which objects and functions an agent can access. Do not assume graph, editor, or arbitrary package imports are available in eval simply because those APIs exist in the library. Existing Figma-compatible scripting remains supported.
Shared authoring guidance is maintained in Core and composed into chat/codegen prompts and the installable skill. Examples belong with their implementation and should be exercised against the public API.