Function renderWidgetScreen

scripts/hsr/widget-view.mjs:427–492

(state, handlers)

}

export function renderWidgetScreen(state, handlers) {
  const viewport = normalizeViewport(state.viewport);
  const layoutMode = resolveWidgetDemoLayout(viewport);
  const status = normalizeStatus(state.selfEditStatus);
  const modal = normalizeModal(state.feedbackModal);
  const feed = normalizeFeed(state.activityFeed);
  const trapVersion =
    typeof state.focusTrapVersion === "number" && Number.isFinite(state.focusTrapVersion)
      ? Math.max(0, Math.floor(state.focusTrapVersion))
      : 0;
  const trapInitialFocus =
    typeof state.focusTrapInitialFocus === "string" && state.focusTrapInitialFocus.length > 0
      ? state.focusTrapInitialFocus
      : CODE_EDITOR_ID;

  const editorPanel = renderEditorPanel(state, handlers, layoutMode, viewport, status, feed);
  const formPanel = renderFormPanel(state, handlers, layoutMode);
  const counterPanel = renderCounterPanel(state, handlers);
  const runbookPanel = renderRunbookPanel();
  const body = renderBody(layoutMode, editorPanel, formPanel, counterPanel, runbookPanel);

  const footer = ui.row({ gap: 1, wrap: true, items: "center" }, [
    ui.text(`Viewport ${String(viewport.cols)}x${String(viewport.rows)} (${layoutMode})`, {
      style: { fg: palette.muted },
    }),
    ui.kbd("Tab"),
    ui.kbd("Shift+Tab"),
    ui.kbd("Esc"),
    ui.kbd("Enter"),
    ui.kbd("F6"),
    ui.kbd("q"),
    ui.kbd("F10"),
  ]);

  const page = ui.page({
    p: 1,
    gap: 1,
    header: renderHeader(state, layoutMode),
    body,
    footer,
  });

  const frame = ui.box(
    {
      border: "single",
      p: 0,
      width: "full",
      height: "full",
      style: { fg: palette.ink, bg: palette.frame },
    },
    [ui.box({ width: "full", height: "full", style: { fg: palette.ink, bg: palette.bg } }, [page])],
  );

  const trapped = ui.focusTrap(
    {
      id: `widget-hsr-focus-trap-${String(trapVersion)}`,
      active: true,
      initialFocus: trapInitialFocus,