@12-apps/ui 6.92.2 → 6.93.1

package/src/components/data-display/DayRuler/DayRuler.types.ts

@@ -14,9 +14,14 @@ export interface DayRulerBlock {
   id: string;
   start: RulerHour;
   end: RulerHour;
-  /** What the block says ("↻ 20:39–00:00", "Ausente"). One line, cut with an ellipsis. */
+  /**
+   * What the block says ("↻ 20:39–00:00", "Ausente"). One line, drawn whole or
+   * not at all: a bar too short for it says `shortLabel`, and one too short
+   * even for that says nothing — never a cut text (FUT-3831). Either way it
+   * stays the block's tooltip (unless `title`) and its accessible name.
+   */
   label: string;
-  /** What a NARROW block says on a narrow ruler (a phone) instead of a cut label — its start ("20:39"). */
+  /** What a block too short for its `label` says instead, at any width — its start ("20:39"). */
   shortLabel?: string;
   tone: ScheduleBlockTone;
   /** Its middle can be dragged along the row (and Alt+←/→ moves it). */
@@ -53,7 +58,12 @@ export interface DayRulerRow {
   nameAdornment?: React.ReactNode;
   /** Under the meta: the host's chips (praça, "Em pausa desde …"). One line; a chip that does not fit shrinks, its label cut. */
   chips?: React.ReactNode;
-  /** The row's own buttons ("Encerrar turno", "Iniciar agora"), at the end of the row. */
+  /**
+   * The row's own buttons ("Encerrar turno", "Iniciar agora"): under the name
+   * on a computer, beside it when the row stacks. They take no column of their
+   * own, so every track keeps the same width and the hours stay aligned
+   * (FUT-3831).
+   */
   actions?: React.ReactNode;
   blocks: readonly DayRulerBlock[];
   actual?: DayRulerActual;

package/src/components/data-display/DayRuler/day-ruler-model.ts

@@ -81,3 +81,48 @@ export function ticksOf(from: RulerHour, to: RulerHour, step: number): RulerHour
   for (let h = from; h <= to + 1e-9; h += step) out.push(h);
   return out;
 }
+
+/** A bar along the track: where it starts and how long it is, both in % of the track. */
+export interface TrackSpan {
+  at: number;
+  share: number;
+}
+
+/**
+ * How far each bar's hit band may reach, in % of the track (FUT-3831): from
+ * `lo` to `hi`, never past the track's ends and never past the MIDPOINT of
+ * the gap to the bar beside it, so a band widened round a short bar cannot
+ * take a tap meant for its neighbour. Two bars that touch or overlap give each
+ * other nothing: the band stays on the bar's own edge on that side.
+ *
+ * The band itself is drawn in CSS — at least the hit area wide, centred on the
+ * bar, then cut to `lo…hi` — because the bar's width in px is the layout's.
+ */
+export function hitBoundsOf(spans: readonly TrackSpan[]): { lo: number; hi: number }[] {
+  const order = spans.map((_, index) => index).sort((a, b) => spans[a]!.at - spans[b]!.at);
+  const out = spans.map(() => ({ lo: 0, hi: 100 }));
+  for (let k = 1; k < order.length; k += 1) {
+    const left = spans[order[k - 1]!]!;
+    const right = spans[order[k]!]!;
+    const leftEnd = left.at + left.share;
+    const mid = leftEnd <= right.at ? (leftEnd + right.at) / 2 : null;
+    out[order[k - 1]!]!.hi = Math.min(out[order[k - 1]!]!.hi, mid ?? leftEnd);
+    out[order[k]!]!.lo = Math.max(out[order[k]!]!.lo, mid ?? right.at);
+  }
+  return out;
+}
+
+/** What a block can say in its bar: its full text, its start, or nothing. */
+export type BlockTextFit = 'full' | 'short' | 'none';
+
+/**
+ * Which of a block's texts fits the room it leaves inside the bar, by pixels
+ * (FUT-3831): the full one, else the short one, else NOTHING — a cut "12:"
+ * says less than an empty bar whose title and accessible name carry the text.
+ */
+export function textFitOf(fullWidth: number, shortWidth: number, room: number): BlockTextFit {
+  const slack = 0.5;
+  if (fullWidth <= room + slack) return 'full';
+  if (shortWidth <= room + slack) return 'short';
+  return 'none';
+}

package/src/components/data-display/DayRuler/useTextFits.ts

@@ -1,41 +1,84 @@
 import type * as React from 'react';
 import { useLayoutEffect, useState } from 'react';
 
+import { textFitOf, type BlockTextFit } from './day-ruler-model';
+
+/** A text span's own width (its laid-out text, whatever the span's own box). */
+function textWidth(span: HTMLElement | null): number {
+  if (!span) return Number.POSITIVE_INFINITY;
+  const range = span.ownerDocument.createRange();
+  range.selectNodeContents(span);
+  return range.getBoundingClientRect().width;
+}
+
 /**
- * Whether a block's full text fits it, by pixels (FUT-3825): the full text's
- * own width against the room the block leaves it, re-read whenever the block
- * is resized. A wide block on a narrow ruler keeps "18:00–23:00"; only one too
- * short for it says its start.
+ * The block's fit, measured in ONE layout: every write first (both texts
+ * shown for the measurement alone), then every read, then the writes undone —
+ * so a ruler of many blocks forces one layout per block, not one per text.
+ * `null` when there is nothing to measure yet.
+ */
+function measureFit(el: HTMLElement): BlockTextFit | null {
+  const full = el.querySelector<HTMLElement>('[data-dr-text="full"]');
+  if (!full) return null;
+  const short = el.querySelector<HTMLElement>('[data-dr-text="short"]');
+  const spans = [full, short].filter((span): span is HTMLElement => span !== null);
+  const shown = spans.map((span) => span.style.display);
+  for (const span of spans) span.style.display = 'inline';
+  const fullWidth = textWidth(full);
+  const shortWidth = textWidth(short);
+  const style = getComputedStyle(el);
+  const outer = el.clientWidth;
+  const room = outer - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
+  spans.forEach((span, index) => {
+    span.style.display = shown[index] ?? '';
+  });
+  if (room > 0) return textFitOf(fullWidth, shortWidth, room);
+  // A bar with no room at all (narrower than its own padding) says nothing.
+  return outer > 0 ? 'none' : null;
+}
+
+/**
+ * Which of a block's texts fits it, by pixels (FUT-3825, FUT-3831): the full
+ * text's and the short text's own widths against the room the block leaves
+ * them. A wide block keeps "18:00–23:00"; one too short for it says its start
+ * ("18:00"); one too short even for that says nothing — never a cut "18:".
  *
- * The full text is measured with its span shown for the measurement alone
- * (synchronously, so nothing is painted), even while the short text stands in
- * for it. Where nothing can be measured (no `ResizeObserver`) it answers
- * `fallback`.
+ * Measured at once (synchronously, so nothing is painted), then again on the
+ * next frame whenever the block is resized, and once more when the page's
+ * fonts have loaded: a webfont arriving late changes every text's width, and
+ * a fit read in the fallback font would leave a label cut. Where nothing can
+ * be measured (no `ResizeObserver`) it answers `fallback`.
  */
-export function useTextFits(block: React.RefObject<HTMLElement | null>, text: string, fallback: boolean): boolean {
-  const [fits, setFits] = useState(fallback);
+export function useTextFit(block: React.RefObject<HTMLElement | null>, text: string, short: string, fallback: BlockTextFit): BlockTextFit {
+  const [fit, setFit] = useState<BlockTextFit>(fallback);
 
   useLayoutEffect(() => {
     const el = block.current;
     if (!el || typeof ResizeObserver === 'undefined') return undefined;
+    let live = true;
+    let frame = 0;
     const measure = (): void => {
-      const full = el.querySelector<HTMLElement>('[data-dr-text="full"]');
-      if (!full) return;
-      const shown = full.style.display;
-      full.style.display = 'inline';
-      const range = el.ownerDocument.createRange();
-      range.selectNodeContents(full);
-      const width = range.getBoundingClientRect().width;
-      full.style.display = shown;
-      const style = getComputedStyle(el);
-      const room = el.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
-      if (room > 0) setFits(width <= room + 0.5);
+      frame = 0;
+      if (!live) return;
+      const next = measureFit(el);
+      if (next) setFit(next);
+    };
+    // Resizes and the fonts come in bursts: one measurement per frame.
+    const schedule = (): void => {
+      if (frame || !live) return;
+      frame = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(measure) : 0;
+      if (!frame) measure();
     };
     measure();
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(schedule);
     observer.observe(el);
-    return () => observer.disconnect();
-  }, [block, text]);
+    el.ownerDocument.fonts?.ready.then(schedule, () => undefined);
+    return () => {
+      live = false;
+      observer.disconnect();
+      if (frame && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(frame);
+    };
+  }, [block, text, short]);
 
-  return fits;
+  return fit;
 }

package/src/components/data-display/ScheduleGrid/schedule-tones.ts

@@ -108,6 +108,19 @@ export function blockToneStyles(theme: Theme, tone: ScheduleBlockTone, dashedPla
   }
 }
 
+/**
+ * An OPAQUE ground for a ruler block's label where the block's own fill is
+ * not opaque (the dashed plan's faint wash, the away / uncovered outline): the
+ * fill flattened over the cell's ground, so the label reads the same and
+ * whatever the track draws under the block — the "agora" line — never shows
+ * through the text (FUT-3831). An opaque fill needs none: `undefined`.
+ */
+export function dashedLabelGround(theme: Theme, tone: ScheduleBlockTone): string | undefined {
+  if (tone === 'away' || tone === 'uncovered') return cellGround(theme);
+  if (tone === 'plan') return flatten(cellGround(theme), theme.palette.action.hover);
+  return undefined;
+}
+
 /**
  * A break inside a block (a meal break): the page's own ground with diagonal
  * stripes of the disabled action colour, opaque, so the block reads as CUT there in any

package/src/components/feedback/ConfirmAction/ConfirmAction.md

@@ -29,6 +29,16 @@ Whichever of the three entry points you use, you get the same contract:
 - **The popup names the thing.** `entityName` is echoed into the body, so it
   reads "Bebidas", not "este item".
 
+## On a phone
+
+The popup is an `AlertDialog`, so it takes that dialog's narrow layout
+(FUT-3831): given less than 480px — a container query, never a media query —
+the icon moves above the title so the question has the paper's whole width, and
+the buttons stack each across the row, **the verb on top and Cancel at the
+bottom**, the library's stacked order (`components-guidelines.md`, "Stacked
+buttons"). The keyboard contract is unchanged: a destructive popup still opens
+with focus on Cancel, and Cancel is still the first button to tab to.
+
 ## Three entry points
 
 ### `withConfirmation(Component, defaults?)` — the HOC

package/src/components/feedback/SequenceResolver/SequenceResolver.frame.tsx

@@ -0,0 +1,71 @@
+import Box from '@mui/material/Box/index.js';
+import React from 'react';
+
+import { Dialog } from '../Dialog';
+import { SequenceHeader } from './SequenceResolver.header';
+import { chromeSx, columnSx, paperSx, scrollBodySx } from './SequenceResolver.styles';
+import type { SequenceResolverLabels } from './SequenceResolver.types';
+import type { Screen } from './SequenceResolver';
+
+/**
+ * Esc closes. `persistent` turns MUI's own Esc off together with the veil's
+ * click (the prototype's veil does nothing), so Esc is put back here; a popup
+ * inside a step that handles its own Esc stops it before it gets here.
+ */
+function escapeCloses(close: () => void) {
+  return (event: React.KeyboardEvent): void => {
+    if (event.key !== 'Escape' || event.defaultPrevented) return;
+    event.stopPropagation();
+    close();
+  };
+}
+
+export interface ResolverFrameProps {
+  shown: boolean;
+  /** The kept last step is playing its exit: a picture, nothing on it acts. */
+  exiting: boolean;
+  touch: boolean;
+  titleId: string;
+  testId: string;
+  labels: SequenceResolverLabels;
+  screen: Screen;
+  close: () => void;
+}
+
+function swallowClick(event: React.SyntheticEvent): void {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+export function ResolverFrame(props: ResolverFrameProps): React.JSX.Element {
+  const { shown, exiting, touch, titleId, testId, labels, screen, close } = props;
+  return (
+    <Dialog
+      open={shown}
+      onClose={close}
+      persistent
+      variant={touch ? 'bottom-sheet' : 'default'}
+      size="sm"
+      aria-labelledby={titleId}
+      onKeyDown={escapeCloses(close)}
+      slotProps={{ paper: { sx: paperSx(touch) } }}
+      dataTestId={testId}
+    >
+      <Box sx={columnSx} inert={exiting} aria-hidden={exiting || undefined} onClickCapture={exiting ? swallowClick : undefined}>
+        <Box sx={chromeSx}>
+          <SequenceHeader
+            touch={touch}
+            {...screen.header}
+            closeLabel={labels.close}
+            onClose={close}
+            progressLabel={labels.progress}
+            testId={testId}
+          />
+        </Box>
+        <Box sx={scrollBodySx} data-testid={`${testId}-body`}>
+          {screen.body}
+        </Box>
+      </Box>
+    </Dialog>
+  );
+}

package/src/components/feedback/SequenceResolver/SequenceResolver.md

@@ -47,7 +47,7 @@ data-sized and shrinks while you go.
 | Prop | Type | Description |
 |---|---|---|
 | `open` | `boolean` | Shows the resolver. Every opening — with an intro or without — starts a fresh run. |
-| `onClose` | `(summary) => void` | Close button, Esc and the end screen's button. Gets `{ resolved, skipped, total, alsoResolved }`; a close toast counts `resolved + alsoResolved` (and shows only when that is above 0). Clicking the veil does nothing (as approved). |
+| `onClose` | `(summary) => void` | Close button, Esc and the end screen's button — or, with `done: null`, the queue running out. Gets `{ resolved, skipped, total, alsoResolved }`; a close toast counts `resolved + alsoResolved` (and shows only when that is above 0). Clicking the veil does nothing (as approved). |
 | `intro` | `SequenceIntro?` | While given, the intro shows instead of the run: `title`, `description`, `categories` (`label`, `description`, `count`, `onPick`), `startAllLabel`, `onStartAll`. The host drops it and sets `queue` in the same update as a pick. |
 | `queue` | `readonly I[]` (`I extends { key; kindLabel }`) | The problems, in order. Live data: it may shrink (siblings answered together) or grow mid-run. |
 | `renderStep` | `(item, api) => SequenceStep` | The current step: `content`, `primary?`, `secondary?` (default: skip with `labels.skip`; `false` removes it), `tertiary?`, `footer?` (`'end'` default — right-aligned over a hairline; `'split'` — two equal columns, no hairline; on a phone the actions always share the row without a hairline), `canGoBack?` (`false`: this answer has no inverse — once it is answered, Back is not offered from the next step). |
@@ -55,7 +55,7 @@ data-sized and shrinks while you go.
 | `canGoBack` | `boolean` (default `true`) | Offer Back at all. It shows only once a previous step exists — on steps and on the end screen, never on the intro. |
 | `overview` | `SequenceOverview?` | "Ver todos (N)" inside the run (FUT-3825): `label(total)`, `title`, `categories` (`label`, `description?`, `count?` — the host's bookkeeping, not drawn: the `label` says the number, "Atrasado · 1" — `keys`, `onPick?`), `pickLabel`, `continueLabel`. See "Ver todos". |
 | `initialKey` | `string?` | Open the run at this problem (a click on its block). The ones before it follow it; nothing is passed over. |
-| `done` | `SequenceDone \| (summary) => SequenceDone` | The end screen: `title`, `description?`, `confirmLabel`. |
+| `done` | `SequenceDone \| ((summary) => SequenceDone) \| null` | The end screen: `title`, `description?`, `confirmLabel`. **`null` drops it** (FUT-3833): when the queue runs out — the last step answered or passed over, or the host's queue emptied under the run — the resolver calls `onClose(summary)` once (StrictMode included) and starts closing, its exit playing over the last step as it was; the host's toast is the run's last word. A pending last write keeps the step until it returns; a refused one keeps it with its message and does not close. Never fires from the intro. |
 | `labels` | `SequenceResolverLabels` | Every chrome word: `back`, `backAccessible?`, `close`, `skip`, `step(position, total, item)`, `introStep`, `doneStep`, `progress`, `failed`. **Required — the package ships no copy.** |
 | `dataTestId` | `string` (default `sequence-resolver`) | Parts: `-back`, `-close`, `-step-label`, `-progress`, `-handle`, `-category-<n>`, `-start-all`, `-primary`, `-secondary`, `-tertiary`, `-footer`, `-error`, `-done`, `-done-confirm`, `-see-all`, `-overview`, `-overview-pick-<n>`, `-continue`. |
 

package/src/components/feedback/SequenceResolver/SequenceResolver.tsx

@@ -1,21 +1,18 @@
 'use client';
 
-import Box from '@mui/material/Box/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import useMediaQuery from '@mui/material/useMediaQuery/index.js';
-import React, { useCallback, useId, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 
-import { Dialog } from '../Dialog';
 import { canReturn, currentOf, jumpTargetOf, positionOf, progressOf, summaryOf, type RunState } from './sequence-model';
 import {
   SequenceDoneBody,
   SequenceIntroBody,
   SequenceStepBody,
 } from './SequenceResolver.parts';
-import { SequenceHeader } from './SequenceResolver.header';
 import { SequenceOverviewBody } from './SequenceResolver.overview';
+import { ResolverFrame } from './SequenceResolver.frame';
 import { SEQUENCE_METRICS } from './SequenceResolver.metrics';
-import { chromeSx, columnSx, paperSx, scrollBodySx } from './SequenceResolver.styles';
 import type {
   SequenceItem,
   SequenceOverviewCategory,
@@ -124,19 +121,6 @@ function headerOf<I extends SequenceItem, R>(inputs: HeaderInputs<I, R>) {
   return { ...base, back: backOf(props, state), seeAll: overview.button };
 }
 
-/**
- * Esc closes. `persistent` turns MUI's own Esc off together with the veil's
- * click (the prototype's veil does nothing), so Esc is put back here; a popup
- * inside a step that handles its own Esc stops it before it gets here.
- */
-function escapeCloses(close: () => void) {
-  return (event: React.KeyboardEvent): void => {
-    if (event.key !== 'Escape' || event.defaultPrevented) return;
-    event.stopPropagation();
-    close();
-  };
-}
-
 interface BodyProps<I extends SequenceItem, R> {
   props: SequenceResolverProps<I, R>;
   state: SequenceRun<I, R>;
@@ -193,6 +177,8 @@ function SequenceBody<I extends SequenceItem, R>(body: BodyProps<I, R>): React.J
     );
   }
   if (stepBody) return <>{stepBody}</>;
+  // `done: null`: no end screen — the resolver is closing over its last step (see `useExitScreen`).
+  if (props.done === null) return <></>;
   const summary = summaryOf(state.run);
   return (
     <SequenceDoneBody
@@ -207,10 +193,94 @@ function SequenceBody<I extends SequenceItem, R>(body: BodyProps<I, R>): React.J
   );
 }
 
+/**
+ * With `done: null`, the run's end closes the resolver: `onClose(summary)`
+ * once, when the queue runs out while it is open and past the intro. Returns
+ * whether the run has ended that way, so the dialog starts closing in the same
+ * render (and keeps its last screen for the exit, see `useExitScreen`).
+ *
+ * `fired` makes it once per ending: StrictMode replays a mount's effects, and
+ * a resolver mounted open over an empty queue would otherwise close twice. It
+ * resets when the run is live again (a reopening, a queue that grew back).
+ */
+function useCloseAtEnd(ended: boolean, close: () => void): boolean {
+  const closeRef = useRef(close);
+  const fired = useRef(false);
+  useEffect(() => {
+    closeRef.current = close;
+  });
+  useEffect(() => {
+    if (!ended) {
+      fired.current = false;
+      return;
+    }
+    if (fired.current) return;
+    fired.current = true;
+    closeRef.current();
+  }, [ended]);
+  return ended;
+}
+
+export interface Screen {
+  header: ReturnType<typeof headerOf>;
+  body: React.JSX.Element;
+}
+
+/**
+ * What the dialog shows. While a step is on screen, that screen — and it is
+ * kept: when the run ends with `done: null` the dialog closes in that same
+ * render, and its exit transition (a fade, the sheet sliding down) plays over
+ * the LAST step as it was — its label, Back, progress and body — rather than
+ * an empty, collapsed "done" paper — also once the host turns `open` off from
+ * `onClose`. Back is inert during the exit.
+ */
+function useExitScreen(live: Screen, input: { open: boolean; hasStep: boolean; closesAtEnd: boolean }): Screen {
+  const { open, hasStep, closesAtEnd } = input;
+  const last = useRef<Screen | null>(null);
+  const wasOpen = useRef(open);
+  // A new opening is a new run: the last one's screen is not kept into it.
+  if (open && !wasOpen.current) last.current = null;
+  wasOpen.current = open;
+  if (!closesAtEnd) return live;
+  if (open && hasStep) {
+    last.current = live;
+    return live;
+  }
+  // Ended (or closed by the host after `onClose`): the exit plays over the last step.
+  const kept = last.current;
+  if (!kept) return live;
+  const { header } = kept;
+  if (!('back' in header) || !header.back) return kept;
+  return { ...kept, header: { ...header, back: { ...header.back, onClick: () => undefined } } };
+}
+
+interface RunEnding<I extends SequenceItem> {
+  current: I | undefined;
+  close: () => void;
+  /** The run ended with `done: null`: the dialog is closing. */
+  ended: boolean;
+  /** The kept last step is playing its exit. */
+  exiting: boolean;
+}
+
+function useRunEnding<I extends SequenceItem, R>(
+  props: SequenceResolverProps<I, R>,
+  state: SequenceRun<I, R>,
+): RunEnding<I> {
+  const { open, onClose, intro } = props;
+  const { run } = state;
+  const current = intro ? undefined : currentOf(run);
+  const close = (): void => onClose(summaryOf(run));
+  const closesAtEnd = props.done === null && !intro;
+  const ended = useCloseAtEnd(open && closesAtEnd && !current, close);
+  return { current, close, ended, exiting: ended || (!open && closesAtEnd) };
+}
+
 /**
  * Resolve a queue of problems one at a time, in ONE dialog whose body is
  * replaced step by step: a header with "‹ Back", the step's label and close,
- * a progress bar, the host's step, and an end screen (FUT-3671).
+ * a progress bar, the host's step, and an end screen (FUT-3671) — or none,
+ * with `done: null`: the run's end closes it (FUT-3833).
  *
  * A centred `Dialog` from the `sm` breakpoint up; the `Dialog` inset
  * bottom-sheet variant below it, never taller than 95% of the viewport. Either
@@ -223,7 +293,7 @@ function SequenceBody<I extends SequenceItem, R>(body: BodyProps<I, R>): React.J
 export function SequenceResolver<I extends SequenceItem, R = unknown>(
   props: SequenceResolverProps<I, R>,
 ): React.JSX.Element {
-  const { open, onClose, intro, labels } = props;
+  const { open, intro, labels } = props;
   const testId = props.dataTestId ?? 'sequence-resolver';
   const theme = useTheme();
   const touch = useMediaQuery(theme.breakpoints.down(SEQUENCE_METRICS.sheetBreakpoint));
@@ -244,53 +314,44 @@ export function SequenceResolver<I extends SequenceItem, R = unknown>(
     failed: labels.failed,
     stepAllowsBack: () => stepAllowsBack.current,
   });
-  const { run } = state;
-  const current = intro ? undefined : currentOf(run);
-  const close = (): void => onClose(summaryOf(run));
+  const ending = useRunEnding(props, state);
+  const { current, close } = ending;
   const overview = useOverview(props, state, current, open);
   // Under the overview the step is kept but hidden, and the overview's title names the dialog.
   const titleProps = { id: overview.shown ? `${titleId}-kept` : titleId, tabIndex: -1, ref: titleRef } as const;
   const step = current ? props.renderStep(current, stepApiOf(state, titleProps)) : undefined;
   stepAllowsBack.current = step?.canGoBack !== false;
+  const screen = useExitScreen(
+    {
+      header: headerOf({ props, state, current, overview, titleId }),
+      body: (
+        <SequenceBody
+          props={props}
+          state={state}
+          current={current}
+          step={step}
+          overview={overview}
+          titleId={titleId}
+          stepTitleRef={stepTitleRef}
+          touch={touch}
+          testId={testId}
+          close={close}
+        />
+      ),
+    },
+    { open, hasStep: current !== undefined && step !== undefined, closesAtEnd: props.done === null && !intro },
+  );
 
   return (
-    <Dialog
-      open={open}
-      onClose={close}
-      persistent
-      variant={touch ? 'bottom-sheet' : 'default'}
-      size="sm"
-      aria-labelledby={titleId}
-      onKeyDown={escapeCloses(close)}
-      slotProps={{ paper: { sx: paperSx(touch) } }}
-      dataTestId={testId}
-    >
-      <Box sx={columnSx}>
-        <Box sx={chromeSx}>
-          <SequenceHeader
-            touch={touch}
-            {...headerOf({ props, state, current, overview, titleId })}
-            closeLabel={labels.close}
-            onClose={close}
-            progressLabel={labels.progress}
-            testId={testId}
-          />
-        </Box>
-        <Box sx={scrollBodySx} data-testid={`${testId}-body`}>
-          <SequenceBody
-            props={props}
-            state={state}
-            current={current}
-            step={step}
-            overview={overview}
-            titleId={titleId}
-            stepTitleRef={stepTitleRef}
-            touch={touch}
-            testId={testId}
-            close={close}
-          />
-        </Box>
-      </Box>
-    </Dialog>
+    <ResolverFrame
+      shown={open && !ending.ended}
+      exiting={ending.exiting}
+      touch={touch}
+      titleId={titleId}
+      testId={testId}
+      labels={labels}
+      screen={screen}
+      close={close}
+    />
   );
 }

package/src/components/feedback/SequenceResolver/SequenceResolver.types.ts

@@ -196,8 +196,9 @@ export interface SequenceResolverLabels {
 export interface SequenceResolverProps<I extends SequenceItem = SequenceItem, R = unknown> {
   open: boolean;
   /**
-   * The close button, Esc, and the end screen's button. Gets where the run
-   * stood, for the host's "N resolved · Undo" toast.
+   * The close button, Esc, and the end screen's button — or, with `done:
+   * null`, the queue running out. Gets where the run stood, for the host's
+   * "N resolved · Undo" toast.
    */
   onClose: (summary: SequenceSummary) => void;
   /**
@@ -228,8 +229,13 @@ export interface SequenceResolverProps<I extends SequenceItem = SequenceItem, R
   overview?: SequenceOverview;
   /** Open the run at this problem (a click on its block); the ones before it follow it. */
   initialKey?: string;
-  /** The end screen's words, from the run's summary. */
-  done: SequenceDone | ((summary: SequenceSummary) => SequenceDone);
+  /**
+   * The end screen's words, from the run's summary. `null` drops the end
+   * screen: when the queue runs out — the last step answered or passed over —
+   * the resolver calls `onClose(summary)` at once, and the host's toast is the
+   * run's last word (FUT-3833).
+   */
+  done: SequenceDone | ((summary: SequenceSummary) => SequenceDone) | null;
   labels: SequenceResolverLabels;
   /**
    * Base test id (default `sequence-resolver`). Parts get `${id}-back`,

package/dist/chunk-7ZQ3KQ7J.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.metrics.ts"],"sourcesContent":["/**\n * THE DAY RULER'S NUMBERS — the approved prototype's (FUT-3823, frames d02 at\n * 1280 and the phone rows), in px. The web reads them through `rem`/`sxRem`.\n */\nexport const DAY_RULER_METRICS = {\n  /** The name and the actions columns on a computer. */\n  sideColumn: 220,\n  gap: 16,\n  /**\n   * Below this container width a row stacks: name and actions on top, the\n   * track under them. Two 220px side columns, their gaps and a track of at\n   * least 320px (where the hour labels every 4 hours do not collide): 792,\n   * rounded up.\n   */\n  compactBelow: 800,\n  /**\n   * Below this container width the pane is phone-sized: no coverage row and\n   * no hour axis. Between it and `compactBelow` the rows stack and the two\n   * lines are drawn across the full width, like the tracks.\n   */\n  phoneBelow: 600,\n  rowPaddingY: 8,\n  track: { height: 40, compactHeight: 30, radius: 8, compactRadius: 6 },\n  block: { top: 4, height: 24, compactTop: 3, compactHeight: 20, radius: 6, paddingX: 6, font: 12, hitArea: 40 },\n  /** The end handles' hit area. */\n  handle: 10,\n  actual: { top: 31, height: 6, compactTop: 24, compactHeight: 4, radius: 3 },\n  actualLabel: { top: 8, offset: 6, font: 12 },\n  now: { width: 2, overhang: 2 },\n  coverage: { height: 26, gap: 2, radius: 4, font: 12 },\n  axis: { height: 18, font: 12 },\n  name: 15,\n  meta: 13,\n  groupTitle: 12,\n  ring: 2,\n  /** How far a block's focus ring stands off it. */\n  ringOffset: 1,\n  /** The loading row's name bar. */\n  skeletonNameRadius: 4,\n  /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start on a narrow ruler. */\n  narrowShare: 0.3,\n  /** The shortest block a resize leaves, in hours. */\n  minHours: 0.5,\n  skeletonRows: 4,\n  /** The hatch of a break inside a block: stripe width. */\n  breakStripe: { ink: 2, gap: 3 },\n} as const;\n"],"mappings":";AAIO,IAAM,oBAAoB;AAAA;AAAA,EAE/B,YAAY;AAAA,EACZ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOL,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO,EAAE,QAAQ,IAAI,eAAe,IAAI,QAAQ,GAAG,eAAe,EAAE;AAAA,EACpE,OAAO,EAAE,KAAK,GAAG,QAAQ,IAAI,YAAY,GAAG,eAAe,IAAI,QAAQ,GAAG,UAAU,GAAG,MAAM,IAAI,SAAS,GAAG;AAAA;AAAA,EAE7G,QAAQ;AAAA,EACR,QAAQ,EAAE,KAAK,IAAI,QAAQ,GAAG,YAAY,IAAI,eAAe,GAAG,QAAQ,EAAE;AAAA,EAC1E,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG;AAAA,EAC3C,KAAK,EAAE,OAAO,GAAG,UAAU,EAAE;AAAA,EAC7B,UAAU,EAAE,QAAQ,IAAI,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG;AAAA,EACpD,MAAM,EAAE,QAAQ,IAAI,MAAM,GAAG;AAAA,EAC7B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,MAAM;AAAA;AAAA,EAEN,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA;AAAA,EAEpB,aAAa;AAAA;AAAA,EAEb,UAAU;AAAA,EACV,cAAc;AAAA;AAAA,EAEd,aAAa,EAAE,KAAK,GAAG,KAAK,EAAE;AAChC;","names":[]}

package/dist/chunk-COK65GX2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/AlertDialog/AlertDialog.parts.tsx"],"sourcesContent":["/**\n * The AlertDialog's action row, kept apart from the dialog shell so each stays\n * inside the complexity budget: which button is filled, where each one sits,\n * and how the row wraps.\n */\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogActions from '@mui/material/DialogActions/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nimport type { AlertDialogProps } from './AlertDialog.types';\n\n/**\n * The action row WRAPS WHOLE BUTTONS; it never breaks a label inside one. A pair\n * that did not fit side by side used to squeeze the longer label onto two\n * lines, so one button stood twice as tall as its neighbour. Now the row breaks\n * instead. `wrap-reverse` puts the LAST button — the primary, whichever\n * `emphasis` picks — on top when it stacks, the same slot it holds on the right\n * when the row fits. A pair that fits is laid out exactly as before: natural\n * widths, pushed to the right.\n *\n * `fill` — set only by `emphasis=\"cancel\"` — lets the buttons grow to share the\n * row, and so to take the full width of their line once it stacks. It is not\n * the default because growing also stretches a pair that fits, which would\n * redraw every existing dialog's footer.\n *\n * Rendered with `disableSpacing`: MUI's own spacing is a left margin on every\n * button after the first, which would indent a button that wrapped onto a line\n * of its own. The gaps below replace it, at the same 16px across.\n */\nconst StyledDialogActions = styled(DialogActions, {\n  shouldForwardProp: (prop) => prop !== 'fill',\n})<{ fill: boolean }>(({ theme, fill }) => ({\n  padding: theme.spacing(2, 3, 3, 3),\n  flexWrap: 'wrap-reverse',\n  columnGap: theme.spacing(2),\n  rowGap: theme.spacing(1),\n  // A 40px tap target, the floor the kit's own Button keeps (FUT-3269): MUI's\n  // medium button is 37px, short of it on a phone.\n  '& > .MuiButton-root': { minHeight: rem(theme, 40) },\n  ...(fill && { '& > .MuiButton-root': { flexGrow: 1, minHeight: rem(theme, 40) } }),\n}));\n\nconst confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>\n  variant === 'destructive' ? 'error' : 'primary';\n\ninterface ButtonLook {\n  variant: ButtonProps['variant'];\n  color: ButtonProps['color'];\n}\n\n/**\n * How each button is drawn, by `emphasis`: the emphasised one is filled, the\n * other a NEUTRAL outline. Primary / neutral both ways round — a confirm that\n * steps down drops the variant's colour too, so the one filled button is the\n * only coloured thing in the row and the eye has a single place to land.\n */\nconst buttonLooks = (\n  emphasis: AlertDialogProps['emphasis'],\n  variant: AlertDialogProps['variant'],\n): { cancel: ButtonLook; confirm: ButtonLook } =>\n  emphasis === 'cancel'\n    ? {\n        cancel: { variant: 'contained', color: 'primary' },\n        confirm: { variant: 'outlined', color: 'inherit' },\n      }\n    : {\n        cancel: { variant: 'outlined', color: 'inherit' },\n        confirm: { variant: 'contained', color: confirmButtonColor(variant) },\n      };\n\n/**\n * The emphasis that applies: `cancel` only while the cancel is shown. A hidden\n * cancel with the confirm stepped down would leave a dialog with no primary.\n */\nconst effectiveEmphasis = (\n  emphasis: AlertDialogProps['emphasis'],\n  showCancel: boolean,\n): NonNullable<AlertDialogProps['emphasis']> =>\n  emphasis === 'cancel' && showCancel ? 'cancel' : 'confirm';\n\n/**\n * Whether the cancel owns focus on open: what `initialFocus` says, and when it\n * says nothing, the emphasised button — so Enter on a steered question keeps\n * the work instead of completing the loss.\n */\nconst focusesCancel = (\n  initialFocus: AlertDialogProps['initialFocus'],\n  emphasis: NonNullable<AlertDialogProps['emphasis']>,\n): boolean => (initialFocus ?? emphasis) === 'cancel';\n\n/** The two buttons in slot order: the emphasised one LAST, the primary slot. */\nconst inSlotOrder = (\n  emphasis: AlertDialogProps['emphasis'],\n  cancel: React.ReactNode,\n  confirm: React.ReactNode,\n): React.ReactNode[] => (emphasis === 'cancel' ? [confirm, cancel] : [cancel, confirm]);\n\n/**\n * Action row: the optional cancel button and the (variant-coloured) confirm,\n * with the emphasised one LAST — the primary slot, on the right or, once the\n * row stacks, on top. DOM order is the tab order, so it follows the same rule.\n */\nexport function AlertDialogFooter({\n  variant,\n  cancelText = EN_US_UI_LABELS.alertDialog.cancel,\n  confirmText = EN_US_UI_LABELS.alertDialog.confirm,\n  showCancel = true,\n  loading = false,\n  confirmDisabled = false,\n  initialFocus,\n  emphasis: asked,\n  onCancel,\n  onConfirm,\n  dataTestId,\n}: Pick<\n  AlertDialogProps,\n  | 'variant'\n  | 'cancelText'\n  | 'confirmText'\n  | 'showCancel'\n  | 'loading'\n  | 'confirmDisabled'\n  | 'initialFocus'\n  | 'emphasis'\n> & {\n  onCancel: () => void;\n  onConfirm: () => void;\n  dataTestId: string;\n}): React.ReactElement {\n  const theme = useTheme();\n  const emphasis = effectiveEmphasis(asked, showCancel);\n  const look = buttonLooks(emphasis, variant);\n  const cancelFocused = focusesCancel(initialFocus, emphasis);\n  const cancel = showCancel && (\n    <Button\n      key=\"cancel\"\n      onClick={onCancel}\n      variant={look.cancel.variant}\n      color={look.cancel.color}\n      disabled={loading}\n      autoFocus={cancelFocused}\n      data-testid={`${dataTestId}-cancel-button`}\n    >\n      {cancelText}\n    </Button>\n  );\n  const confirm = (\n    <Button\n      key=\"confirm\"\n      onClick={onConfirm}\n      variant={look.confirm.variant}\n      color={look.confirm.color}\n      disabled={confirmDisabled || loading}\n      startIcon={\n        loading ? (\n          <CircularProgress\n            size={rem(theme, 16)}\n            color=\"inherit\"\n            data-testid={`${dataTestId}-loading-spinner`}\n          />\n        ) : undefined\n      }\n      autoFocus={!cancelFocused}\n      data-testid={`${dataTestId}-confirm-button`}\n    >\n      {confirmText}\n    </Button>\n  );\n  return (\n    <StyledDialogActions\n      disableSpacing\n      fill={emphasis === 'cancel'}\n      data-testid={`${dataTestId}-actions`}\n    >\n      {inSlotOrder(emphasis, cancel, confirm)}\n    </StyledDialogActions>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,SAAS,QAAQ,gBAAgB;AAmI7B;AAzGJ,IAAM,sBAAsB,OAAO,eAAe;AAAA,EAChD,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAqB,CAAC,EAAE,OAAO,KAAK,OAAO;AAAA,EAC1C,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,WAAW,MAAM,QAAQ,CAAC;AAAA,EAC1B,QAAQ,MAAM,QAAQ,CAAC;AAAA;AAAA;AAAA,EAGvB,uBAAuB,EAAE,WAAW,IAAI,OAAO,EAAE,EAAE;AAAA,EACnD,GAAI,QAAQ,EAAE,uBAAuB,EAAE,UAAU,GAAG,WAAW,IAAI,OAAO,EAAE,EAAE,EAAE;AAClF,EAAE;AAEF,IAAM,qBAAqB,CAAC,YAC1B,YAAY,gBAAgB,UAAU;AAaxC,IAAM,cAAc,CAClB,UACA,YAEA,aAAa,WACT;AAAA,EACE,QAAQ,EAAE,SAAS,aAAa,OAAO,UAAU;AAAA,EACjD,SAAS,EAAE,SAAS,YAAY,OAAO,UAAU;AACnD,IACA;AAAA,EACE,QAAQ,EAAE,SAAS,YAAY,OAAO,UAAU;AAAA,EAChD,SAAS,EAAE,SAAS,aAAa,OAAO,mBAAmB,OAAO,EAAE;AACtE;AAMN,IAAM,oBAAoB,CACxB,UACA,eAEA,aAAa,YAAY,aAAa,WAAW;AAOnD,IAAM,gBAAgB,CACpB,cACA,cACa,gBAAgB,cAAc;AAG7C,IAAM,cAAc,CAClB,UACA,QACA,YACuB,aAAa,WAAW,CAAC,SAAS,MAAM,IAAI,CAAC,QAAQ,OAAO;AAO9E,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,aAAa,gBAAgB,YAAY;AAAA,EACzC,cAAc,gBAAgB,YAAY;AAAA,EAC1C,aAAa;AAAA,EACb,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAcuB;AACrB,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,kBAAkB,OAAO,UAAU;AACpD,QAAM,OAAO,YAAY,UAAU,OAAO;AAC1C,QAAM,gBAAgB,cAAc,cAAc,QAAQ;AAC1D,QAAM,SAAS,cACb;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,OAAO;AAAA,MACrB,OAAO,KAAK,OAAO;AAAA,MACnB,UAAU;AAAA,MACV,WAAW;AAAA,MACX,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IARG;AAAA,EASN;AAEF,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,QAAQ;AAAA,MACtB,OAAO,KAAK,QAAQ;AAAA,MACpB,UAAU,mBAAmB;AAAA,MAC7B,WACE,UACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,IAAI,OAAO,EAAE;AAAA,UACnB,OAAM;AAAA,UACN,eAAa,GAAG,UAAU;AAAA;AAAA,MAC5B,IACE;AAAA,MAEN,WAAW,CAAC;AAAA,MACZ,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IAjBG;AAAA,EAkBN;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,MAAM,aAAa;AAAA,MACnB,eAAa,GAAG,UAAU;AAAA,MAEzB,sBAAY,UAAU,QAAQ,OAAO;AAAA;AAAA,EACxC;AAEJ;","names":[]}

package/dist/chunk-LE5JYNR7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DayRuler/day-ruler-model.ts"],"sourcesContent":["import type { RulerHour } from './DayRuler.types';\n\n/**\n * THE RULER'S ARITHMETIC, as pure functions (FUT-3825): snapping, clamping,\n * positions and the HH:MM the ruler writes. Hours are from the day's\n * midnight; past 24 is the next morning.\n */\n\n/** `h` on the `snap`-hour grid (0.25 for 15 minutes). */\nexport function snapTo(h: RulerHour, snap: number): RulerHour {\n  return snap > 0 ? Math.round(h / snap) * snap : h;\n}\n\nexport function clamp(h: RulerHour, from: RulerHour, to: RulerHour): RulerHour {\n  return Math.min(to, Math.max(from, h));\n}\n\n/** The hour under `x` on a track whose box starts at `left` and is `width` wide, snapped and clamped. */\nexport function hourAt(x: number, left: number, width: number, from: RulerHour, to: RulerHour, snap: number): RulerHour {\n  const share = width > 0 ? (x - left) / width : 0;\n  return clamp(snapTo(from + share * (to - from), snap), from, to);\n}\n\n/** Where `h` sits along the ruler, 0..100 (%), clamped to it. */\nexport function percentOf(h: RulerHour, from: RulerHour, to: RulerHour): number {\n  return ((clamp(h, from, to) - from) / (to - from)) * 100;\n}\n\n/** \"20:45\"; 26 → \"02:00\", 24 → \"00:00\". */\nexport function formatHour(h: RulerHour): string {\n  const minutes = Math.round(h * 60);\n  const hh = Math.floor(minutes / 60) % 24;\n  const mm = minutes % 60;\n  return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;\n}\n\n/** \"20:45–00:45\". */\nexport function formatRange(start: RulerHour, end: RulerHour): string {\n  return `${formatHour(start)}–${formatHour(end)}`;\n}\n\n/** A block slid by `delta`, keeping its length and staying on the ruler. */\nexport function moved(start: RulerHour, end: RulerHour, delta: number, from: RulerHour, to: RulerHour): [RulerHour, RulerHour] {\n  const length = end - start;\n  const next = clamp(start + delta, from, to - length);\n  return [next, next + length];\n}\n\n/** A block whose `side` was dragged to `h`, never shorter than `minHours`, never off the ruler. */\nexport function resized(\n  start: RulerHour,\n  end: RulerHour,\n  side: 'start' | 'end',\n  h: RulerHour,\n  minHours: number,\n  from: RulerHour,\n  to: RulerHour,\n): [RulerHour, RulerHour] {\n  if (side === 'start') return [clamp(Math.min(h, end - minHours), from, to), end];\n  return [start, clamp(Math.max(h, start + minHours), from, to)];\n}\n\n/** A click alone (shorter than `minHours`) becomes `createHours` from where it was pressed. */\nexport function createdSpan(\n  a: RulerHour,\n  b: RulerHour,\n  minHours: number,\n  createHours: number,\n  to: RulerHour,\n): [RulerHour, RulerHour] {\n  const start = Math.min(a, b);\n  const end = Math.max(a, b);\n  if (end - start >= minHours) return [start, end];\n  return [start, Math.min(to, start + createHours)];\n}\n\n/** The axis labels: every `step` hours from `from` to `to`, both ends included. */\nexport function ticksOf(from: RulerHour, to: RulerHour, step: number): RulerHour[] {\n  const out: RulerHour[] = [];\n  if (step <= 0) return [from, to];\n  for (let h = from; h <= to + 1e-9; h += step) out.push(h);\n  return out;\n}\n"],"mappings":";AASO,SAAS,OAAO,GAAc,MAAyB;AAC5D,SAAO,OAAO,IAAI,KAAK,MAAM,IAAI,IAAI,IAAI,OAAO;AAClD;AAEO,SAAS,MAAM,GAAc,MAAiB,IAA0B;AAC7E,SAAO,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC,CAAC;AACvC;AAGO,SAAS,OAAO,GAAW,MAAc,OAAe,MAAiB,IAAe,MAAyB;AACtH,QAAM,QAAQ,QAAQ,KAAK,IAAI,QAAQ,QAAQ;AAC/C,SAAO,MAAM,OAAO,OAAO,SAAS,KAAK,OAAO,IAAI,GAAG,MAAM,EAAE;AACjE;AAGO,SAAS,UAAU,GAAc,MAAiB,IAAuB;AAC9E,UAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,KAAK,QAAS;AACvD;AAGO,SAAS,WAAW,GAAsB;AAC/C,QAAM,UAAU,KAAK,MAAM,IAAI,EAAE;AACjC,QAAM,KAAK,KAAK,MAAM,UAAU,EAAE,IAAI;AACtC,QAAM,KAAK,UAAU;AACrB,SAAO,GAAG,OAAO,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,OAAO,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AACtE;AAGO,SAAS,YAAY,OAAkB,KAAwB;AACpE,SAAO,GAAG,WAAW,KAAK,CAAC,SAAI,WAAW,GAAG,CAAC;AAChD;AAGO,SAAS,MAAM,OAAkB,KAAgB,OAAe,MAAiB,IAAuC;AAC7H,QAAM,SAAS,MAAM;AACrB,QAAM,OAAO,MAAM,QAAQ,OAAO,MAAM,KAAK,MAAM;AACnD,SAAO,CAAC,MAAM,OAAO,MAAM;AAC7B;AAGO,SAAS,QACd,OACA,KACA,MACA,GACA,UACA,MACA,IACwB;AACxB,MAAI,SAAS,QAAS,QAAO,CAAC,MAAM,KAAK,IAAI,GAAG,MAAM,QAAQ,GAAG,MAAM,EAAE,GAAG,GAAG;AAC/E,SAAO,CAAC,OAAO,MAAM,KAAK,IAAI,GAAG,QAAQ,QAAQ,GAAG,MAAM,EAAE,CAAC;AAC/D;AAGO,SAAS,YACd,GACA,GACA,UACA,aACA,IACwB;AACxB,QAAM,QAAQ,KAAK,IAAI,GAAG,CAAC;AAC3B,QAAM,MAAM,KAAK,IAAI,GAAG,CAAC;AACzB,MAAI,MAAM,SAAS,SAAU,QAAO,CAAC,OAAO,GAAG;AAC/C,SAAO,CAAC,OAAO,KAAK,IAAI,IAAI,QAAQ,WAAW,CAAC;AAClD;AAGO,SAAS,QAAQ,MAAiB,IAAe,MAA2B;AACjF,QAAM,MAAmB,CAAC;AAC1B,MAAI,QAAQ,EAAG,QAAO,CAAC,MAAM,EAAE;AAC/B,WAAS,IAAI,MAAM,KAAK,KAAK,MAAM,KAAK,KAAM,KAAI,KAAK,CAAC;AACxD,SAAO;AACT;","names":[]}