rplib editor — docs

Reference for users of the diagram editor app. Pulled from DSL.md and the in-app overlay.

1. Navigation & interaction

• Drag to pan, scroll to zoom, reset to recenter.
• Hover or click a diagram item — its info populates the sidebar's description box and its references populate the references list.
• Double-click an item that has a details reference to drill into a sub-component. Back / forward retrace the view history.
• Views dropdown shows the abstract → view hierarchy. Selecting a view jumps directly.
• Settings toggles come from each component's settings array (see DSL reference).
• Edit button enters component-edit mode; while active the back / forward arrows undo/redo edit-history entries instead of view changes. Clicking another nav button while the abstract editor is open exits edit mode and restores the previous root view — the abstract text is preserved.

2. DSL basics

Abstracts stitch existing components together. You'll typically author abstracts; components are the reusable building blocks.

myArchitecture:
    componentA
    componentB:
        slotClass: alternativeComponent
    properties:
        modelName: GPT
    references:
        "Some paper":
            authors:
                Name
            info: "short description"
            refType: Paper
            link: https://example.com

• className: componentName swaps a slot for an alternative component.
• properties: feeds text-property replacement (see next section).
• references: attaches sources surfaced in the sidebar when items are hovered.

Naming rules

• IDs must be unique across both abstracts and components.
• IDs cannot end in _<int> (e.g. _1, _2) — that suffix is reserved by the parser.

3. Text property replacement

Inside any text or info string in a component, use:

{{propertyName|defaultValue}}

The value comes from the abstract's properties: block. If the abstract omits it, the defaultValue after | is used.

# component
text: "{{modelName|Model}} layer"

# abstract
properties:
    modelName: GPT

# renders as
GPT layer

The default value is plain text — no surrounding quotes.

Note: a component's settings array (which generates per-view toggles) is a different mechanism than abstract properties:. Settings toggle visibility based on a property flag on subitems; properties substitute text. Don't conflate the two.

4. References & info panel

The sidebar reacts to hover / click on diagram items: #info shows the item's description and the #panels region shows its configured panels (in this app, a references list).

info, references, and details can be set at the component level (as a default for everything inside) or overridden per-item, per-text, or per-arrow.

5. Edit mode

• The edit button unlocks two editors: the abstract editor (free-form DSL with autocomplete) and the component editor (structured form).
• Edit-history undo/redo is separate from view-history. The same arrow buttons serve both contexts — only one history is live at a time depending on whether component-edit mode is active.
• Clicking another nav button while the abstract editor is open auto-exits edit mode and restores the previous root view, so the destination handler doesn't see a broken view. The abstract text isn't lost.

6. Full DSL reference

The complete property list (all optional fields on components, references schema, settings schema, arrow/positioning rules) lives in DSL.md.