@scaffold-ui-kit/preview 0.0.0-stage → 2.3.0

package/application/shells/charcell/components/PreviewPane/index.tsx

@@ -0,0 +1,182 @@
+// One preview window: a quiet charcell Frame titled by what it shows, filling its
+// container, around the element the controller mounts the iframe in - a
+// target's story, the story's html, or a custom view. The pane only provides that element;
+// the iframe and what drives it are the controller's. A target's pane
+// takes the height its story reports as its content's, so a row that starts
+// at its content's height fits the story; it still fills the row it is in.
+// While the controller lays the story panes out at a width (`paneWidth`), a
+// target's or the html pane is that wide and as tall as its story, in a
+// charcell ScrollArea: centered in a wider pane, and scrolled across, its
+// scrollbar drawn in cells on a row of its own, in a narrower one, or down
+// in a shorter one. A view's pane always fills its own.
+// The Frame's top row holds, at its end, `reload`, which loads the pane again,
+// and, on a target's pane, `open`, which opens its story as it is now in a
+// window of its own. Where they do not fit beside the title they give way a
+// whole cell at a time, `open` first, and go once too little of a label is
+// left (fit-labels.ts), so a label is never cut through a cell. While the iframe loads, hidden until it shows its content, the
+// pane says `loading` once a moment has passed (index.css). While the html
+// pane has no html for the story, such as the static build's for changed
+// props, the pane says why over it, as the code pane does (index.css). While
+// the story's html leaves out what it cannot evaluate at rest, such as a
+// part shown on a condition its script holds, the html pane's legend says how
+// many warnings, the count opening them in a popover
+// (HtmlWarnings), as the code pane's row does.
+import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type RefObject } from 'react';
+import { Button, Frame, ScrollArea } from 'charcell/react/unlinked';
+import { PREVIEW_SCRIPTED_TARGETS, type PreviewScriptedTarget, type PreviewTarget } from '../../../../../src/shell';
+import { usePreviewController, usePreviewState } from '../../controller-context';
+import { Hint } from '../Hint';
+import { HtmlWarnings } from '../HtmlWarnings';
+import { fitLabels } from '../../fit-labels';
+import { htmlWarningsLabel } from '../../html-warnings';
+import './index.css';
+
+/** The cells of the top row beside its title's text and its actions: the
+ *  ring's corner and a cell of its stroke at each side, the cell at each side
+ *  of the title, and at least one of the stroke between the two. */
+const TOP_ROW_CELLS = 7;
+
+/** How far under a whole cell a width may fall and still be that cell's. */
+const CELL_TOLERANCE = 0.01;
+
+/** The pane's whole width in cells, as it changes; `undefined` until measured. */
+function useColumns(frame: RefObject<HTMLDivElement | null>, cell: RefObject<HTMLSpanElement | null>) {
+  const [columns, setColumns] = useState<number | undefined>(undefined);
+  useLayoutEffect(() => {
+    const element = frame.current;
+    if (!element) return;
+    const measure = () => {
+      const width = cell.current?.getBoundingClientRect().width;
+      if (width) setColumns(Math.floor(element.getBoundingClientRect().width / width + CELL_TOLERANCE));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [frame, cell]);
+  return columns;
+}
+
+export function PreviewPane(props: { title: string } & ({ target: PreviewTarget } | { viewId: string })) {
+  const controller = usePreviewController();
+  const element = useRef<HTMLDivElement>(null);
+  const frame = useRef<HTMLDivElement>(null);
+  const cell = useRef<HTMLSpanElement>(null);
+  const columns = useColumns(frame, cell);
+  const target = 'target' in props ? props.target : undefined;
+  const viewId = 'viewId' in props ? props.viewId : undefined;
+  const height = usePreviewState((state) => (target === undefined ? undefined : state.frameSizes[target]?.height));
+  const width = usePreviewState((state) => (target === undefined ? undefined : state.paneWidth));
+  const fixed = width !== undefined;
+  const unavailable = usePreviewState((state) =>
+    target === 'html' && state.code?.html.status === 'unavailable' ? state.code.html.reason : undefined,
+  );
+  const warnings = usePreviewState((state) =>
+    target === 'html' && state.code?.html.status === 'ready' ? state.code.html.warnings : undefined,
+  );
+  // A fixed pane mounts in a scroll area, a fitted one in the Frame itself:
+  // the element changes between the two, so the iframe mounts again.
+  useEffect(
+    () =>
+      target !== undefined
+        ? controller.frames.mount(element.current!, target)
+        : controller.frames.mountView(element.current!, viewId!),
+    [controller, target, viewId, fixed],
+  );
+  const style = {
+    ...(height === undefined ? {} : { '--preview-pane-content': `${Math.ceil(height)}px` }),
+    ...(width === undefined ? {} : { '--preview-pane-width': `${width}px` }),
+  } as CSSProperties;
+  const actions = [
+    {
+      label: 'reload',
+      hint: `load the ${props.title} pane again`,
+      press: () => controller.frames.reload(target ?? 'view'),
+    },
+    ...(target !== undefined && isScriptedTarget(target)
+      ? [
+          {
+            label: 'open',
+            hint: `open the ${props.title} story in a window of its own`,
+            press: () => window.open(controller.frames.standaloneUrl(target), '_blank'),
+          },
+        ]
+      : []),
+  ];
+  const warningsLabel = warnings && warnings.length > 0 ? htmlWarningsLabel(warnings) : undefined;
+  const titleCells = [...props.title].length + (warningsLabel === undefined ? 0 : warningsLabel.length + 1);
+  const fitted = fitLabels(
+    actions.map((action) => action.label),
+    columns === undefined ? undefined : columns - titleCells - TOP_ROW_CELLS,
+  );
+  return (
+    <div ref={frame} className="PreviewPane__frame">
+      <span ref={cell} className="PreviewPane__cell" aria-hidden="true" />
+      <Frame
+        title={props.title}
+        quiet
+        flush
+        fill
+        legend={
+          warnings && warnings.length > 0 ? (
+            <HtmlWarnings
+              warnings={warnings}
+              className="PreviewPane__warnings"
+              attributes={{ 'data-preview-html-warnings': '' }}
+            />
+          ) : undefined
+        }
+        legendEnd={
+          fitted.length > 0 ? (
+            <span className="PreviewPane__actions">
+              {fitted.map((text, index) => {
+                const action = actions[index]!;
+                return (
+                  <Hint key={action.label} text={action.hint}>
+                    {(hint) => (
+                      <Button
+                        {...hint}
+                        variant="dense"
+                        label={text}
+                        aria-label={action.label}
+                        onClick={action.press}
+                      />
+                    )}
+                  </Hint>
+                );
+              })}
+            </span>
+          ) : undefined
+        }
+      >
+      {fixed ? (
+        <ScrollArea label={`${props.title} story`} orientation="both" overscroll="none" fill>
+          <div ref={element} key="fixed" className="PreviewPane PreviewPane--fixed" style={style}>
+            {note(unavailable)}
+          </div>
+        </ScrollArea>
+      ) : (
+        <div ref={element} key="fitted" className="PreviewPane" style={style}>
+          {note(unavailable)}
+        </div>
+      )}
+      </Frame>
+    </div>
+  );
+}
+
+/** The note over the html pane saying why it has no html, beside the
+ *  iframe the controller mounts in the same element. */
+function note(reason: string | undefined) {
+  return reason === undefined ? null : (
+    <p className="PreviewPane__note" role="status" data-preview-html-note="">
+      {reason}
+    </p>
+  );
+}
+
+/** Whether a target is a scripted one, whose pane can open on its own (the
+ *  html pane shows the markup its host gives it). */
+function isScriptedTarget(target: PreviewTarget): target is PreviewScriptedTarget {
+  return (PREVIEW_SCRIPTED_TARGETS as readonly string[]).includes(target);
+}

package/application/shells/charcell/components/PromptBar/index.tsx

@@ -0,0 +1,133 @@
+// The shell's top bar: the tool sigil, the kit and its
+// version, and the options placed in the top bar (the kit's own settings, such
+// as its theme) at the start; at the end, two groups of toggles at one level,
+// the views (the navigation, then the stage's rows: scenario, output, code,
+// events) and the targets (its columns), then the kit's `top-bar-end` slot. One build of one kit is served,
+// so the kit and its version are plain labels. A target the kit does not
+// build gets no target toggle; html gets one, after the targets', where the
+// kit builds it. Each toggle is on while the stage shows its view or target;
+// in a narrow window each group shows and toggles one at a time
+// (stage-toggles.ts), the navigation apart from that, being no row of the
+// stage.
+import { Field as CharcellField, Toggle } from 'charcell/react/unlinked';
+import { useId } from 'react';
+import type { PreviewTarget } from '../../../../../src/shell';
+import { Bar } from '../Bar';
+import { Hint } from '../Hint';
+import { usePreviewController, usePreviewState } from '../../controller-context';
+import { OptionControls } from '../OptionControls';
+import {
+  CODE_VIEW_OPTION,
+  EVENTS_VIEW_OPTION,
+  NAVIGATION_OPTION,
+  OUTPUT_VIEW_OPTION,
+  SCENARIO_VIEW_OPTION,
+} from '../../shell-options';
+import { SlotOutlet } from '../SlotOutlet';
+import { toggleTarget, toggleView, useStage } from '../../stage-toggles';
+
+/** The stage's views, top to bottom: each a shell option, so the address keeps it. */
+const VIEWS = [
+  { option: SCENARIO_VIEW_OPTION, label: 'scenario', title: 'the props and content editor' },
+  { option: OUTPUT_VIEW_OPTION, label: 'output', title: 'the story rendered in each target' },
+  { option: CODE_VIEW_OPTION, label: 'code', title: 'the story’s source in each target' },
+  { option: EVENTS_VIEW_OPTION, label: 'events', title: 'the events the story’s panes fire' },
+] as const;
+
+export function PromptBar() {
+  const controller = usePreviewController();
+  const { kitName, kitVersion, targets: kitTargets } = controller.catalog;
+  const targets = usePreviewState((state) => state.targets);
+  const viewsLabel = useId();
+  const targetsLabel = useId();
+  const navigationShown = usePreviewState((state) => state.options[NAVIGATION_OPTION] !== false);
+  // Narrow, the stage shows one view and one target at a time.
+  const { narrow, views, panes } = useStage();
+  return (
+    <Bar
+      joined
+      lead="preview$"
+      end={
+        <>
+          <CharcellField label="views" labelId={viewsLabel} role="group" aria-labelledby={viewsLabel}>
+            <Hint text="the components and views" around>
+              {(hint) => (
+                <Toggle
+                  variant="dense"
+                  {...hint}
+                  label="navigation"
+                  pressed={navigationShown}
+                  onPressedChange={() => controller.actions.setOption(NAVIGATION_OPTION, !navigationShown)}
+                />
+              )}
+            </Hint>
+            {VIEWS.map((view) => {
+              const shown = views.has(view.option);
+              return (
+                <Hint key={view.option} text={view.title} around>
+                  {(hint) => (
+                    <Toggle
+                      variant="dense"
+                      {...hint}
+                      label={view.label}
+                      pressed={shown}
+                      onPressedChange={() => toggleView(controller, view.option, narrow)}
+                    />
+                  )}
+                </Hint>
+              );
+            })}
+          </CharcellField>
+          <CharcellField label="targets" labelId={targetsLabel} role="group" aria-labelledby={targetsLabel}>
+            {kitTargets.map((target) => {
+              // The selected component may not render into this target (a React-only
+              // fixture of another package's components) - then the toggle is disabled and forced off,
+              // its hint saying why. A hint either way keeps the toggle where it is as the selection
+              // changes, so a focused toggle keeps the focus.
+              const supported = targets.supported.includes(target);
+              const on = supported && panes.includes(target);
+              return (
+                <Hint
+                  key={target}
+                  text={supported ? targetHint(target) : 'not supported by this component'}
+                  around
+                  focusable={!supported}
+                  label={target}
+                >
+                  {(hint) => (
+                    <Toggle
+                      variant="dense"
+                      {...hint}
+                      label={target}
+                      pressed={on}
+                      disabled={!supported}
+                      onPressedChange={() => toggleTarget(controller, target, narrow)}
+                    />
+                  )}
+                </Hint>
+              );
+            })}
+          </CharcellField>
+          <SlotOutlet name="top-bar-end" />
+        </>
+      }
+    >
+      {/* Which kit, and which version of it, is being previewed. A kit with
+          no package version shows none. */}
+      <CharcellField label="kit" data-testid="kit-name">
+        <span>{kitName}</span>
+      </CharcellField>
+      {kitVersion && (
+        <CharcellField label="version" data-testid="kit-version">
+          <span>{kitVersion}</span>
+        </CharcellField>
+      )}
+      <OptionControls placement="top-bar" />
+    </Bar>
+  );
+}
+
+/** What a target's toggle shows or hides. */
+function targetHint(target: PreviewTarget): string {
+  return target === 'html' ? 'the story’s markup, with no script' : `the story rendered in ${target}`;
+}

package/application/shells/charcell/components/ScenarioRow/index.css

@@ -0,0 +1,36 @@
+@layer charcell.components {
+  /* The scenario row fills its panel of the split (StageSplit), which
+     holds its height in whole rows: the view's heading, then a charcell
+     Frame taking the rest, whose body the editor's ScrollArea fills. A
+     column, so the Frame takes the rest of the row where the split sets its
+     height and its content's where the split measures the content to start
+     the row at. */
+  .ScenarioRow {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+  /* The picker and its info button, side by side with no cell between. */
+  .ScenarioRow__pick {
+    display: flex;
+    align-items: center;
+  }
+  .ScenarioRow__frame {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  /* The Frame is flush, so the scrollbar runs beside its ring: the note and
+     the tree each keep a cell from it. */
+  .ScenarioRow__note {
+    margin: 0;
+    padding: 0 1ch;
+    color: var(--charcell-mid);
+  }
+  .ScenarioRow__tree {
+    padding: 0 1ch;
+  }
+}

package/application/shells/charcell/components/ScenarioRow/index.tsx

@@ -0,0 +1,71 @@
+// The scenario row, the stage's top row while the scenario view shows: the
+// view's heading, with `pick`, the scenario picker, at the heading row's end
+// and an info button for the picked scenario's description; then the props
+// and content editor (EditorPanel) of the picked scenario in a quiet charcell
+// Frame, as the target panes are, scrolling in a charcell ScrollArea, a whole
+// row at a time. The picker shows only when there is a real choice beyond
+// the default (an injected Empty, where the preview can regenerate, and/or
+// named scenarios); its baseline option is "(default)", or
+// "<label> (default)" when a story file names it. The story's context sits in
+// the stage bar (StageBar). Where the preview cannot regenerate there is no
+// editor, and the row says so. The Frame is flush, so the editor's scrollbar
+// runs beside its ring; the note and the tree keep their own cell from it.
+// Styled in its index.css.
+import { Frame, ScrollArea } from 'charcell/react/unlinked';
+import { scenarioChoices } from '../../../../../src/shell';
+import { usePreviewController, usePreviewState } from '../../controller-context';
+import { Description } from '../Description';
+import { EditorPanel } from '../EditorPanel';
+import { Select } from '../Select';
+import { HeadingRow } from '../HeadingRow';
+import { ViewControls } from '../ViewControls';
+import './index.css';
+
+export function ScenarioRow() {
+  const controller = usePreviewController();
+  const selection = usePreviewState((state) => state.selection);
+  const scenario = usePreviewState((state) => state.scenario);
+  const editing = usePreviewState((state) => state.editor.open && state.editor.tree !== undefined);
+  const selected = controller.catalog.components.find((component) => component.id === selection.id);
+  const choices = scenarioChoices(selected, controller.capabilities);
+  const picked = selected?.scenarios.find((candidate) => candidate.id === scenario);
+  return (
+    <div className="ScenarioRow" data-preview-scenario>
+      <HeadingRow
+        heading="scenario"
+        end={
+          <ViewControls view="scenario">
+            {selected && choices.length > 0 && (
+              <span className="ScenarioRow__pick">
+                <Select
+                  label="pick"
+                  testId="select-scenario"
+                  value={scenario}
+                  onChange={controller.actions.pickScenario}
+                  options={choices}
+                />
+                <Description text={picked?.description} label={`about ${picked?.label ?? 'the scenario'}`} />
+              </span>
+            )}
+          </ViewControls>
+        }
+      />
+      <div className="ScenarioRow__frame">
+        <Frame quiet flush fill>
+          {selected && editing ? (
+            <ScrollArea label="scenario" overscroll="none" fill>
+              <div className="ScenarioRow__tree">
+                {/* Reseed the panel's own view state when the story or scenario changes. */}
+                <EditorPanel key={`${selected.id}:${scenario}`} />
+              </div>
+            </ScrollArea>
+          ) : (
+            !controller.capabilities.regeneration && (
+              <p className="ScenarioRow__note">Editing a scenario needs the preview's development server.</p>
+            )
+          )}
+        </Frame>
+      </div>
+    </div>
+  );
+}

package/application/shells/charcell/components/Select/index.tsx

@@ -0,0 +1,48 @@
+// The preview's labeled dropdown - charcell's Select (its own monochrome
+// listbox; a native <select>'s popup is the operating system's own popup).
+// This wrapper keeps the preview-wide call-site API (string value in/out,
+// `label`, `testId`). charcell's Select is bare, so a label puts a charcell
+// Field around it, pointed at the trigger by id; the test id is stamped on
+// the trigger. charcell's layer tokens stack the listbox above a popover panel,
+// so a select opened inside the add-content dialog needs no variant of its own.
+import { useId } from 'react';
+import { Field, Select as CharcellSelect } from 'charcell/react/unlinked';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+export function Select(props: {
+  /** Omit for a bare trigger (no inline label), e.g. the editor's node pickers. */
+  label?: string;
+  /** A bare trigger's id, for a label of the caller's own to point at. */
+  id?: string;
+  value: string;
+  options: SelectOption[];
+  /** Omit for a display-only select. */
+  onChange?: (value: string) => void;
+  /** Stamped on the trigger for tests to open the widget. */
+  testId?: string;
+}) {
+  const { label, value, options, onChange, testId } = props;
+  const ownId = useId();
+  const id = label === undefined ? props.id : ownId;
+  const select = (
+    <CharcellSelect
+      variant="dense"
+      id={id}
+      items={options.map((option) => ({ value: option.value, label: option.label }))}
+      value={value}
+      onValueChange={onChange === undefined ? undefined : (next) => onChange(String(next))}
+      triggerProps={testId === undefined ? undefined : { 'data-testid': testId }}
+    />
+  );
+  return label === undefined ? (
+    select
+  ) : (
+    <Field label={label} htmlFor={id}>
+      {select}
+    </Field>
+  );
+}

package/application/shells/charcell/components/SlotOutlet/index.css

@@ -0,0 +1,7 @@
+@layer charcell.components {
+  /* A slot's outlet has no box of its own: what the kit mounts in it
+     sits in the bar's zone beside the option controls. */
+  .SlotOutlet {
+    display: contents;
+  }
+}

package/application/shells/charcell/components/SlotOutlet/index.tsx

@@ -0,0 +1,25 @@
+// A named slot of the shell: where the kit's fill for it mounts. The outlet
+// renders one element and hands it to the fill with the controller; the fill
+// renders whatever it likes inside, in its own framework, and is unmounted
+// with the outlet. A slot with no fill renders nothing.
+import { useEffect, useRef } from 'react';
+import type { CharcellSlotName } from '../../configuration';
+import { usePreviewController, useShellConfiguration } from '../../controller-context';
+import './index.css';
+
+export function SlotOutlet({ name }: { name: CharcellSlotName }) {
+  const controller = usePreviewController();
+  const fill = useShellConfiguration().slots?.[name];
+  const element = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!fill || !element.current) return;
+    const unmount = fill(element.current, controller);
+    return () => {
+      unmount?.();
+    };
+  }, [fill, controller]);
+  if (!fill) return null;
+  // `display: contents` (index.css): the fill's children sit in the
+  // bar's zone as the option controls do, with no box of the outlet's own.
+  return <div ref={element} className="SlotOutlet" data-preview-slot={name} />;
+}

package/application/shells/charcell/components/StageBar/index.css

@@ -0,0 +1,7 @@
+@layer charcell.components {
+  /* A picker and its info button, side by side with no cell between. */
+  .StageBar__pick {
+    display: flex;
+    align-items: center;
+  }
+}

package/application/shells/charcell/components/StageBar/index.tsx

@@ -0,0 +1,109 @@
+// The stage bar, over a component story or a custom view: what is on the
+// stage and how it is set up. At its start `component` (`view` on a custom view), a combobox of everything the
+// navigation lists (the selected entry too, when it is unlisted), narrowed
+// as the reader types, as wide as its longest entry and titled with the
+// selected one's label, with an info button for the component's
+// description; at its end, the options a kit places in the stage bar and its
+// `stage-bar-end` slot, both empty by default. The scenario picker is the
+// scenario row's (ScenarioRow), and the context options the output view's
+// (ViewControls). The bar's rule row is left empty, so no line crosses the
+// navigation's. Styled in its index.css.
+import { Combobox, Field } from 'charcell/react/unlinked';
+import { useId } from 'react';
+import type { PreviewCatalog, PreviewNavigationNode } from '../../../../../src/shell';
+import { usePreviewController, usePreviewState } from '../../controller-context';
+import { Bar } from '../Bar';
+import { Description } from '../Description';
+import { OptionControls } from '../OptionControls';
+import type { SelectOption } from '../Select';
+import { SlotOutlet } from '../SlotOutlet';
+import './index.css';
+
+export function StageBar() {
+  const controller = usePreviewController();
+  const selection = usePreviewState((state) => state.selection);
+  const { catalog } = controller;
+  const selected =
+    selection.kind === 'view' ? undefined : catalog.components.find((component) => component.id === selection.id);
+  const entries = stageEntries(catalog, selection);
+  const current = entries.find((entry) => entry.value === entryValue(selection))?.label;
+  const findId = useId();
+  return (
+    <Bar
+      unruled
+      flush
+      end={
+        <>
+          <OptionControls placement="stage-bar" />
+          <SlotOutlet name="stage-bar-end" />
+        </>
+      }
+    >
+      <span className="StageBar__pick">
+        <Field label={selection.kind === 'view' ? 'view' : 'component'} htmlFor={findId}>
+          <Combobox
+            variant="dense"
+            id={findId}
+            items={entries}
+            value={entryValue(selection)}
+            onValueChange={(value) => controller.actions.select(entryOf(value))}
+            inputProps={{ 'data-testid': 'select-component', title: current }}
+            style={{ width: pickerWidth(entries) }}
+          />
+        </Field>
+        <Description text={selected?.description} label={`about ${selected?.shortTitle ?? 'the component'}`} />
+      </span>
+    </Bar>
+  );
+}
+
+type Entry = { kind: 'component' | 'view'; id: string };
+
+/** The cells a picker's field takes beside its text: a cell of padding at
+ *  each end, the cell between the text and its `▾`, and the `▾`. */
+const CELLS_BESIDE_TEXT = 4;
+
+/** The width the picker's field takes: its text as wide as the longest
+ *  entry, and never narrower than charcell's own 20 cells, so no name is
+ *  cut short and the field keeps its width as the reader moves between
+ *  entries. */
+function pickerWidth(entries: SelectOption[]): string {
+  const longest = Math.max(20, ...entries.map((entry) => [...entry.label].length));
+  return `${longest + CELLS_BESIDE_TEXT}ch`;
+}
+
+/** A select value for a navigation entry: a view's id and a component's may coincide. */
+function entryValue(entry: Entry): string {
+  return `${entry.kind}:${entry.id}`;
+}
+
+function entryOf(value: string): Entry {
+  const separator = value.indexOf(':');
+  return { kind: value.slice(0, separator) as Entry['kind'], id: value.slice(separator + 1) };
+}
+
+/** Every entry the navigation lists, in its order, components by their short
+ *  title; the selection too, where the navigation leaves it out. */
+function stageEntries(catalog: PreviewCatalog, selection: Entry): SelectOption[] {
+  const entries: SelectOption[] = [];
+  const shortTitle = (id: string) => catalog.components.find((component) => component.id === id)?.shortTitle ?? id;
+  const walk = (nodes: PreviewNavigationNode[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'group') walk(node.children);
+      else
+        entries.push({
+          value: entryValue(node),
+          label: node.kind === 'component' ? shortTitle(node.id) : node.label,
+        });
+    }
+  };
+  walk(catalog.navigation);
+  if (!entries.some((entry) => entry.value === entryValue(selection))) {
+    const view = catalog.views.find((candidate) => candidate.id === selection.id);
+    entries.push({
+      value: entryValue(selection),
+      label: selection.kind === 'view' ? (view?.label ?? selection.id) : shortTitle(selection.id),
+    });
+  }
+  return entries;
+}

package/application/shells/charcell/components/StageSplit/index.css

@@ -0,0 +1,11 @@
+@layer charcell.components {
+  /* The split of the stage's rows fills the body, and leaves
+     it while no view shows (`hidden`). */
+  .StageSplit:not([hidden]) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+}