Master-detail panel

from __future__ import annotations

from imperal_sdk import Extension, ui

ext = Extension(
    "my-ext",
    display_name="My Extension",
    description="A master-detail extension for managing items.",
    actions_explicit=True,
)

# ── Inline stub data — replace with your real data fetch in production ─────
_ITEMS = [
    {"id": "item-1", "title": "First item",  "body": "Content for item one."},
    {"id": "item-2", "title": "Second item", "body": "Content for item two."},
    {"id": "item-3", "title": "Third item",  "body": "Content for item three."},
]


def _get_item(item_id: str) -> dict | None:
    return next((i for i in _ITEMS if i["id"] == item_id), None)


# ── Left sidebar — discovery-safe, sets auto_action on root ────────────────

@ext.panel(
    "sidebar",
    slot="left",
    title="Items",
    icon="📜",
    default_width=280,
    min_width=200,
    max_width=500,
)
async def sidebar(ctx: object, active_item_id: str = "", **kwargs: object) -> object:
    items = _ITEMS  # replace with: items = await fetch_items(ctx)

    root = ui.Stack(
        children=[
            ui.List(
                items=[
                    ui.ListItem(
                        id=item["id"],
                        title=item["title"],
                        selected=(item["id"] == active_item_id),
                        on_click=ui.Call(
                            "__panel__editor",
                            item_id=item["id"],
                        ),
                    )
                    for item in items
                ]
            )
        ],
        gap=2,
    )

    # Set auto_action only when there is content to show and no item is
    # already active (first load). The host fires this once per discovery
    # cycle to claim the center slot automatically.
    if items and not active_item_id:
        root.props["auto_action"] = ui.Call(
            "__panel__editor", item_id=items[0]["id"]
        )

    return root


# ── Center editor — returns ui.Empty() at batch discovery ─────────────────

@ext.panel(
    "editor",
    slot="center",
    center_overlay=True,
    title="Editor",
    icon="✏️",
)
async def editor(ctx: object, item_id: str = "", **kwargs: object) -> object:
    # On first load the platform calls this with no item_id.
    # Return ui.Empty() so the slot is held but visually indicates "select an item".
    # This keeps the center slot renderable while the sidebar's auto_action
    # claims it with the first real item.
    if not item_id:
        return ui.Empty(message="Select an item", icon="🖱️")

    item = _get_item(item_id)
    if item is None:
        return ui.Error(message="Item not found")

    return ui.Stack(
        children=[
            ui.Header(item["title"]),
            ui.RichEditor(
                content=item["body"],
                on_change=ui.Call("save_item", item_id=item_id),
            ),
        ],
        gap=4,
    )