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

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

@@ -0,0 +1,47 @@
+// The status bar's word on the selection's panes: `regeneration failed` while
+// the scenario editor's last regeneration failed, `regenerating` while one
+// runs, `render error` with the targets whose story threw, `loading` while a
+// pane loads, and `ready` once every pane shows its story. The messages behind
+// a failure open as a hint over it (Hint), from the pointer or the keyboard.
+// Styled in its index.css.
+import { usePreviewState } from '../../controller-context';
+import { Hint } from '../Hint';
+import './index.css';
+
+export function PaneStatus() {
+  const regeneration = usePreviewState((state) => state.regeneration);
+  const frames = usePreviewState((state) => state.frames);
+  const errors = usePreviewState((state) => state.frameErrors);
+  const failing = Object.entries(errors).filter((entry): entry is [string, string] => entry[1] !== undefined);
+  const loading = Object.values(frames).includes('loading');
+  const [word, detail, failed] =
+    regeneration.status === 'error'
+      ? ['regeneration failed', regeneration.message, true]
+      : regeneration.status === 'pending'
+        ? ['regenerating…', undefined, false]
+        : failing.length > 0
+          ? [
+              `render error · ${failing.map(([target]) => target).join(', ')}`,
+              failing.map(([target, message]) => `${target}: ${message}`).join('\n'),
+              true,
+            ]
+          : loading
+            ? ['loading…', undefined, false]
+            : ['ready', undefined, false];
+  return (
+    <Hint text={detail}>
+      {(hint) => (
+        // With messages behind it, the word takes focus, so the keyboard
+        // opens them as the pointer does.
+        <span
+          {...hint}
+          className={`PaneStatus${failed ? ' PaneStatus--failed' : ''}`}
+          role="status"
+          tabIndex={detail ? 0 : undefined}
+        >
+          {word}
+        </span>
+      )}
+    </Hint>
+  );
+}

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

@@ -0,0 +1,45 @@
+// The output's `width` select, among the output's options with the kit's
+// own (ViewControls): `fit`, the panes sharing the stage's width, or one of
+// the catalog's pane widths, such as `medium 768`, which lays every story
+// pane out that wide so a component that responds to its width shows as it
+// does on such a screen. The output stacks its panes as rows while the width
+// is wider than a column would be (PreviewGrid), and a row still narrower
+// scrolls across (PreviewPane). A width a link names that is not among them
+// shows as its number. The controller keeps the choice, and the address with
+// it (`width=768`). With no pane widths in the catalog and none chosen there
+// is nothing to pick, and no select.
+import { usePreviewController, usePreviewState } from '../../controller-context';
+import { Select, type SelectOption } from '../Select';
+
+/** The select's value while the panes fit the stage. */
+const FIT = 'fit';
+
+/** Whether there is a width to pick: the catalog offers some, or one is
+ *  chosen. */
+export function usePaneWidthShown(): boolean {
+  const controller = usePreviewController();
+  const paneWidth = usePreviewState((state) => state.paneWidth);
+  return controller.catalog.paneWidths.length > 0 || paneWidth !== undefined;
+}
+
+export function PaneWidth() {
+  const controller = usePreviewController();
+  const paneWidth = usePreviewState((state) => state.paneWidth);
+  const paneWidths = controller.catalog.paneWidths;
+  if (paneWidths.length === 0 && paneWidth === undefined) return null;
+  const options: SelectOption[] = [
+    { value: FIT, label: FIT },
+    ...paneWidths.map(({ label, width }) => ({ value: String(width), label: `${label} ${width}` })),
+  ];
+  if (paneWidth !== undefined && !paneWidths.some(({ width }) => width === paneWidth))
+    options.push({ value: String(paneWidth), label: String(paneWidth) });
+  return (
+    <Select
+      label="width"
+      testId="select-pane-width"
+      value={paneWidth === undefined ? FIT : String(paneWidth)}
+      onChange={(value) => controller.actions.setPaneWidth(value === FIT ? undefined : Number(value))}
+      options={options}
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+@layer charcell.components {
+  /* The panes: the targets' preview and code panes in a charcell SplitGrid
+     that fills the grid's place (charcell's `fill`). The frames float on the
+     canvas: the stage's side cells their breathing room to the lines beside
+     them, the invisible-at-rest handles the gaps. No vertical padding: the
+     frames' own ring rows are the breathing room, and their strokes land
+     centered in whole grid rows. */
+  .PreviewGrid {
+    flex: 1;
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+  }
+  /* The rows' box: the grid's height, or, stacked, at least the rows' least
+     (`--preview-grid-least-rows`, in rows), the grid then scrolling down
+     past the stage rather than squeezing a row. */
+  .PreviewGrid__rows {
+    flex: 1 1 0;
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+  }
+  .PreviewGrid[data-stacked] {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .PreviewGrid[data-stacked] > .PreviewGrid__rows {
+    min-height: calc(var(--preview-grid-least-rows) * var(--charcell-row));
+  }
+  /* Under stacked output rows, the code row holds each target's code pane
+     side by side, a cell apart. */
+  .PreviewGrid__codes {
+    flex: 1;
+    display: flex;
+    gap: 1ch;
+    min-width: 0;
+    min-height: 0;
+  }
+}

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

@@ -0,0 +1,344 @@
+// The component stage's grid: a column per pane showing (a target's, and
+// the html one where the kit builds html), and a row per view showing of the
+// two the grid holds - the output row, a preview pane in each column, and the
+// code row, that target's code pane under it (CodePane). charcell's
+// SplitGridDriver + SplitGridVisual composed with its SplitGridCell and
+// SplitGridHandle parts: a handle between two columns runs down every row, the
+// handle between the rows across every column, and a press where they cross
+// drags both, each boundary a whole column or row at a time (the driver's own
+// snapping). The handle between the rows draws one grip, in its middle, and
+// carries the code view's heading at its start and the wrap toggle
+// (WrapToggle) at its end. The code row starts at about two fifths of the height and keeps
+// at least eight rows - its ring, the copy row and a few rows of source - and
+// the output row at least three; the columns share the width equally to
+// start. A new set of columns or rows starts over from those sizes. The
+// preview cells are keyed by their target and come first, and stay in the
+// grid while the output row is hidden, laid out nowhere, so the panes keep
+// their place in the tree, and their frames, while either row opens and
+// closes and while a target is turned on or off.
+//
+// While the story panes are laid out at a width (`paneWidth`) wider than a
+// column would be, the output stacks instead: a row per target, each at the
+// grid's full width, the handles between them dragging a row at a time, and
+// the code row under them holding each target's code pane side by side. Each
+// row starts at its story's height, or, when the stories don't fit, at an
+// equal share (stackedRowCells), once every story has reported its height.
+// Each keeps a least: ten rows, its ring and scrollbar rows and about seven
+// rows of story, or its whole story and pane when they take fewer. The grid
+// is tall enough for every row's least and the code row's, so the stage
+// scrolls down only when those don't fit, rather than squeezing a row. The
+// rows follow the stories' heights and the stage's until the reader drags a
+// handle between them or steps it with a key. A story still wider than its row
+// scrolls across, and a taller one down (PreviewPane). The preview cells keep
+// their keys, so the panes keep their frames as the grid stacks and unstacks.
+//
+// A target turned off gives its columns to the others in proportion to their
+// widths, and one turned back on comes back at the width it had, the others
+// giving way in proportion (the driver's `redistribute: 'proportional'`); the
+// stacked rows and the code row share their rows the same way. A double-click
+// on a handle, or Enter while it holds the focus (split-reset.ts), puts its
+// split back where it started: the columns at equal widths, the output and
+// code rows at their starting heights, and stacked rows at their stories'
+// heights again, following the stories as before a handle was moved.
+import { useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type RefObject } from 'react';
+import {
+  SplitGridCell,
+  SplitGridDriver,
+  SplitGridHandle,
+  SplitGridHandleRow,
+  SplitGridVisual,
+  type SplitGridScope,
+} from 'charcell/react/unlinked';
+import type { PreviewTarget } from '../../../../../src/shell';
+import { usePreviewState } from '../../controller-context';
+import { withResetGesture } from '../../split-reset';
+import { stackedLeastCells, stackedRowCells, type StackedCodeRow } from '../../stacked-rows';
+import { CodePane } from '../CodePane';
+import { PreviewPane } from '../PreviewPane';
+import { ViewControls } from '../ViewControls';
+import { ViewHeading } from '../ViewHeading';
+import { WrapToggle } from '../WrapToggle';
+import './index.css';
+
+/** The fewest rows the code row keeps, so its copy row and some source still show. */
+const CODE_ROWS = 8;
+
+/** The fewest rows the output row keeps. */
+const OUTPUT_ROWS = 3;
+
+/** The fewest columns a pane keeps, so its title and some of its story still show. */
+const PANE_COLUMNS = 12;
+
+/** The output row's and the code row's starting shares, in percent, while both show. */
+const BOTH_ROWS_SIZE = [60, 40];
+
+/** The one row's share while only one shows. */
+const ONE_ROW_SIZE = [100];
+
+/** The code row's starting share under stacked output rows, in percent. */
+const STACKED_CODE_SIZE = 30;
+
+/** The fewest rows a stacked output row keeps, unless its story and pane
+ *  take fewer: its ring and scrollbar rows and about seven rows of story. */
+const STACKED_ROWS = 10;
+
+/** The keys that step a handle. */
+const STEP_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown']);
+
+/** The one column of a stacked grid. */
+const STACK_COLUMN = 'stack';
+
+/** The grid's own size, as it changes. */
+function useSize(element: RefObject<HTMLDivElement | null>): {
+  width: number;
+  height: number;
+} {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const current = element.current;
+    if (!current) return;
+    const { width, height } = current.getBoundingClientRect();
+    setSize({ width, height });
+    const observer = new ResizeObserver(([entry]) =>
+      setSize({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      }),
+    );
+    observer.observe(current);
+    return () => observer.disconnect();
+  }, [element]);
+  return size;
+}
+
+export function PreviewGrid({ targets, output, code }: { targets: PreviewTarget[]; output: boolean; code: boolean }) {
+  const element = useRef<HTMLDivElement>(null);
+  const { width, height } = useSize(element);
+  const paneWidth = usePreviewState((state) => state.paneWidth);
+  // The stories' heights, as one value that changes when any of them does.
+  const storyHeights = usePreviewState((state) =>
+    targets.map((target) => state.frameSizes[target]?.height ?? '').join(','),
+  );
+  // Stacked while the output shows and a picked width is wider than a column would be.
+  const stacked =
+    output && targets.length > 1 && paneWidth !== undefined && width > 0 && paneWidth > width / targets.length;
+  const columns = useMemo(
+    () =>
+      stacked
+        ? [{ id: STACK_COLUMN, minimumCells: PANE_COLUMNS }]
+        : targets.map((target) => ({ id: target, minimumCells: PANE_COLUMNS })),
+    [targets, stacked],
+  );
+  // With neither row showing the grid is hidden whole (StageSplit),
+  // and keeps the output row for its panes.
+  const rows = useMemo(
+    () =>
+      stacked
+        ? [
+            // Each target's row starts at its story's height (below).
+            ...targets.map((target) => ({
+              id: `output:${target}`,
+              minimumCells: OUTPUT_ROWS,
+            })),
+            ...(code ? [{ id: 'code', minimumCells: CODE_ROWS }] : []),
+          ]
+        : [
+            // Beside the code row, the output row starts at its panes' content.
+            ...(output || !code
+              ? [
+                  {
+                    id: 'output',
+                    minimumCells: OUTPUT_ROWS,
+                    ...(code && output ? { defaultCells: 'content' as const } : {}),
+                  },
+                ]
+              : []),
+            ...(code ? [{ id: 'code', minimumCells: CODE_ROWS }] : []),
+          ],
+    [targets, output, code, stacked],
+  );
+  const defaultColumnSize = useMemo(() => columns.map(() => 100 / columns.length), [columns]);
+  const defaultRowSize = useMemo(() => {
+    if (!stacked) return rows.length === 2 ? BOTH_ROWS_SIZE : ONE_ROW_SIZE;
+    const outputShare = (100 - (code ? STACKED_CODE_SIZE : 0)) / targets.length;
+    return [...targets.map(() => outputShare), ...(code ? [STACKED_CODE_SIZE] : [])];
+  }, [stacked, rows, code, targets]);
+  // The code row is the last; the handle above it carries its heading.
+  const codeRow = rows.length - 1;
+  const codeRowLimits: StackedCodeRow | undefined = code ? { least: CODE_ROWS, share: STACKED_CODE_SIZE } : undefined;
+
+  // The grid's parts as the driver last handed them, for the stacked rows' start.
+  const scope = useRef<SplitGridScope | null>(null);
+  // Whether the reader has moved a handle between the rows since they last
+  // stacked: dragged it, or stepped it with a key.
+  const moved = useRef(false);
+  // A press on a handle, until it ends: a drag while it lasts is the reader's.
+  const pressed = useRef(false);
+  const layout = `${stacked}:${code}:${targets.join(',')}`;
+  useLayoutEffect(() => {
+    moved.current = false;
+  }, [layout]);
+  // The cells the stacked grid needs at least, once the stories report.
+  const [leastCells, setLeastCells] = useState(0);
+  // A count of the resets of the rows, so a reset of stacked rows lays them
+  // out at their stories again.
+  const [rowResets, setRowResets] = useState(0);
+  // A charcell whose split has no `resetSizes` leaves the split where it is,
+  // and shares a leaving track's cells by its own default, whatever
+  // `redistribute` says: a reset there does nothing but re-lay stacked rows
+  // at their stories.
+  const resetColumns = () => scope.current?.columnsApi.resetSizes?.();
+  const resetRows = () => {
+    scope.current?.rowsApi.resetSizes?.();
+    if (!stacked) return;
+    moved.current = false;
+    setRowResets((count) => count + 1);
+  };
+  // Stacked, each row starts at its story's height, or an equal share where
+  // the stories don't fit, once every story has reported its height, and
+  // follows the stories and the stage until the reader moves a handle.
+  useLayoutEffect(() => {
+    const grid = scope.current;
+    if (!stacked || moved.current || !grid) return;
+    const gridElement = document.getElementById(String(grid.gridProps.id));
+    if (!gridElement) return;
+    const cell = parseFloat(getComputedStyle(gridElement).lineHeight);
+    if (!(cell > 0)) return;
+    const heights = storyHeights.split(',').map(Number);
+    if (heights.some((story) => !(story > 0))) return;
+    const wanted = targets.map((_, index) => {
+      const cellElement = document.getElementById(String(grid.cellProps(0, index).id));
+      const viewport = cellElement?.querySelector('[role="region"]');
+      if (!cellElement || !viewport) return undefined;
+      // The pane around the story: its ring and any scrollbar row.
+      const chrome = cellElement.getBoundingClientRect().height - viewport.clientHeight;
+      return (heights[index] + chrome) / cell;
+    });
+    const least = stackedLeastCells(wanted, STACKED_ROWS, codeRowLimits);
+    if (least !== leastCells) {
+      // The grid grows to it first; this runs again at its new height.
+      setLeastCells(least);
+      return;
+    }
+    const total = (gridElement.getBoundingClientRect().height - (grid.rows.length - 1) * cell) / cell;
+    if (!(total > 0)) return;
+    const cells = stackedRowCells({ wanted, total, least: STACKED_ROWS, code: codeRowLimits });
+    // A frame later, once the split has taken in a new set of rows.
+    const frame = requestAnimationFrame(() =>
+      scope.current?.rowsApi.setSizes(cells.map((length) => (length / total) * 100)),
+    );
+    return () => cancelAnimationFrame(frame);
+    // The layout and stories it follows, the grid's least, the stage's size
+    // and a reset of the rows.
+  }, [stacked, layout, storyHeights, leastCells, height, width, rowResets]);
+  const onHandle = (target: EventTarget) => (target as Element).closest('[data-part="resize-trigger"]') !== null;
+  return (
+    <div
+      ref={element}
+      className="PreviewGrid"
+      data-stacked={stacked || undefined}
+      style={{ '--preview-grid-least-rows': stacked ? leastCells : 0 } as CSSProperties}
+      // A drag or a step key on a handle between the rows is the reader's:
+      // the rows stay where they leave them. A plain click or a tab to it is not.
+      onPointerDownCapture={(event) => {
+        pressed.current = onHandle(event.target);
+      }}
+      onPointerMoveCapture={(event) => {
+        if (pressed.current && event.buttons !== 0) moved.current = true;
+      }}
+      onPointerUpCapture={() => {
+        pressed.current = false;
+      }}
+      onKeyDownCapture={(event) => {
+        if (STEP_KEYS.has(event.key) && onHandle(event.target)) moved.current = true;
+      }}
+    >
+      <div className="PreviewGrid__rows">
+        <SplitGridDriver
+          columns={columns}
+          rows={rows}
+          defaultColumnSize={defaultColumnSize}
+          defaultRowSize={defaultRowSize}
+          redistribute="proportional"
+        >
+          {({ grid }) => {
+            scope.current = grid;
+            return (
+              <SplitGridVisual fill rowGrips="one" {...grid.rootProps} gridProps={grid.gridProps}>
+                {targets.map((target, index) => (
+                  <SplitGridCell
+                    key={`output:${target}`}
+                    {...(!output ? { hidden: true } : stacked ? grid.cellProps(0, index) : grid.cellProps(index, 0))}
+                  >
+                    <PreviewPane title={target} target={target} />
+                  </SplitGridCell>
+                ))}
+                {code &&
+                  !stacked &&
+                  targets.map((target, columnIndex) => (
+                    <SplitGridCell key={`code:${target}`} {...grid.cellProps(columnIndex, codeRow)}>
+                      <CodePane target={target} />
+                    </SplitGridCell>
+                  ))}
+                {code && stacked && (
+                  <SplitGridCell key="code:stack" {...grid.cellProps(0, codeRow)}>
+                    <div className="PreviewGrid__codes">
+                      {targets.map((target) => (
+                        <CodePane key={target} target={target} />
+                      ))}
+                    </div>
+                  </SplitGridCell>
+                )}
+                {!stacked &&
+                  targets
+                    .slice(1)
+                    .map((target, index) => (
+                      <SplitGridHandle
+                        key={`handle:${target}`}
+                        {...withResetGesture(grid.columnHandleProps(index), resetColumns)}
+                        axis="column"
+                        crosses={grid.rows}
+                        label={`resize ${targets[index]} and ${target}`}
+                      />
+                    ))}
+                {stacked &&
+                  targets
+                    .slice(1)
+                    .map((target, index) => (
+                      <SplitGridHandle
+                        key={`row-handle:${target}`}
+                        {...withResetGesture(grid.rowHandleProps(index), resetRows)}
+                        axis="row"
+                        crosses={grid.columns}
+                        label={`resize ${targets[index]} and ${target}`}
+                      />
+                    ))}
+                {code && rows.length > 1 && (
+                  <SplitGridHandle
+                    key="handle:code"
+                    {...withResetGesture(grid.rowHandleProps(codeRow - 1), resetRows)}
+                    axis="row"
+                    crosses={grid.columns}
+                    label="resize panes and code"
+                  />
+                )}
+                {code && rows.length > 1 && (
+                  <SplitGridHandleRow
+                    key="handle-row:code"
+                    {...grid.rowHandleRowProps(codeRow - 1)}
+                    start={<ViewHeading>code</ViewHeading>}
+                    end={
+                      <ViewControls view="code">
+                        <WrapToggle />
+                      </ViewControls>
+                    }
+                  />
+                )}
+              </SplitGridVisual>
+            );
+          }}
+        </SplitGridDriver>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,127 @@
+@layer charcell.components {
+  /* One pane: the element the controller mounts the iframe
+     in, inside a charcell Frame that fills the pane's place in the row. It fills
+     the Frame's body, which is not a flex container, so the iframe's own flex
+     sizing has a box to fill. */
+  .PreviewPane {
+    position: relative;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  /* While its iframe loads, hidden by the controller until it shows its
+     content, the pane says so in the mid gray, its dots counting up - after
+     300ms, so a quick load shows nothing but the ground. The note sits on a
+     whole cell counted from the pane's corner, the one nearest the middle. */
+  .PreviewPane:has(> iframe:not([data-preview-shown]))::after {
+    content: 'loading';
+    position: absolute;
+    left: round(down, calc((100% - 10ch) / 2), 1ch);
+    top: round(
+      down,
+      calc((100% - var(--charcell-row)) / 2),
+      var(--charcell-row)
+    );
+    white-space: pre;
+    color: var(--charcell-mid);
+    visibility: hidden;
+    animation:
+      PreviewPane-loading 0s 300ms forwards,
+      PreviewPane-dots 1.2s 300ms steps(1, end) infinite;
+  }
+  @keyframes PreviewPane-loading {
+    to {
+      visibility: visible;
+    }
+  }
+  /* The dots count up, one a step; spaces hold the dots' place, so the
+     word stays put in the monospace face. */
+  @keyframes PreviewPane-dots {
+    0% {
+      content: 'loading\00a0\00a0\00a0';
+    }
+    25% {
+      content: 'loading.\00a0\00a0';
+    }
+    50% {
+      content: 'loading..\00a0';
+    }
+    75%,
+    100% {
+      content: 'loading...';
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .PreviewPane:has(> iframe:not([data-preview-shown]))::after {
+      animation: PreviewPane-loading 0s 300ms forwards;
+    }
+  }
+  /* The controller's iframe, the pane's one child: based on the height its
+     story reports (the iframe's own 150px until it does), so a row measuring
+     its content fits the story, and growing to fill a taller pane or
+     shrinking with a shorter one. */
+  .PreviewPane > iframe {
+    display: block;
+    flex: 1 1 var(--preview-pane-content, 150px);
+    min-height: 0;
+    width: 100%;
+    border: 0;
+  }
+  /* At a width the reader picked, inside a scroll area: the iframe is that
+     wide and as tall as its story, centered while the pane is wider. The
+     scroll area's bars take rows and columns of their own, so a bar never
+     covers the story, and a row sized to its content makes room for one. */
+  .PreviewPane--fixed {
+    display: block;
+    height: auto;
+  }
+  .PreviewPane--fixed > iframe {
+    width: var(--preview-pane-width);
+    height: var(--preview-pane-content, 150px);
+    margin-inline: auto;
+  }
+  /* Why the html pane has no html, over the pane's own note in the kit's
+     canvas: in the mid gray on the shell's ground, centered, as the
+     loading note and the code pane's reason are. */
+  .PreviewPane__note {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0 1ch;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    color: var(--charcell-mid);
+    background: var(--charcell-background);
+  }
+  /* What the Frame fills, and takes the pane's whole width from; the cell,
+     nothing to see, is the width the labels are cut against. */
+  .PreviewPane__frame {
+    position: relative;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    display: grid;
+    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+  }
+  .PreviewPane__cell {
+    position: absolute;
+    width: 1ch;
+    visibility: hidden;
+  }
+  /* The actions at the end of the top row, side by side: each button's own
+     padding is the cells between them. */
+  .PreviewPane__actions {
+    display: flex;
+  }
+  /* How many warnings the html pane's markup has, first in its legend at
+     the foreground, so a part left out at rest is not mistaken for one the
+     story does not show; the count opens the warnings (HtmlWarnings). */
+  .PreviewPane__warnings {
+    white-space: nowrap;
+    color: var(--charcell-foreground);
+  }
+}