@crewlethq/ui 0.17.1 → 0.19.0

package/dist/PresenceStack-QSXQJND5.css

@@ -0,0 +1,59 @@
+/*
+ * Who is here (PresenceStack.tsx), on the avatar stack's own geometry: the
+ * overlap and the counted chip are the stack's. What this adds is the ring in
+ * each present collaborator's hue, outside the cut-out, and the idle fade.
+ */
+
+/* The wrapper (a span, or a button when badges select) carries no edge of its
+   own: the cut-out and the hue ring are drawn on the badge inside it, which
+   has the badge's own outline to follow. */
+.crewlet-presence-stack > .crewlet-presence-stack__member {
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+}
+
+.crewlet-presence-stack > .crewlet-presence-stack__member--human {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-presence-stack > .crewlet-presence-stack__member--agent {
+  border-radius: var(--radius-sm);
+}
+
+button.crewlet-presence-stack__member {
+  cursor: pointer;
+}
+
+button.crewlet-presence-stack__member:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-presence-stack .crewlet-presence-stack__badge {
+  box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
+}
+
+/* The hue ring sits outside the cut-out, so it reads as a ring round the
+   badge rather than a stroke on it. */
+.crewlet-presence-stack .crewlet-presence-stack__badge--present {
+  box-shadow:
+    0 0 0 2px var(--crewlet-avatar-stack-ground),
+    0 0 0 4px var(--crewlet-presence-hue);
+}
+
+.crewlet-presence-stack .crewlet-presence-stack__badge--idle {
+  opacity: 0.5;
+}
+
+@media (forced-colors: active) {
+  .crewlet-presence-stack .crewlet-presence-stack__badge--present {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}

package/dist/PricingCard/index.js

@@ -1,4 +1,4 @@
-export { PricingCard } from '../chunk-UCYIRDND.js';
-import '../chunk-LOECRMHA.js';
+export { PricingCard } from '../chunk-DQSXWQMJ.js';
+import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Principal/Principal.d.ts

@@ -0,0 +1,35 @@
+import type { CrewletCharacterId } from '@crewlethq/icons/characters';
+import { type AvatarSize } from '../Avatar/index.js';
+import type { NodeHue } from '../utils/nodeHue.js';
+/**
+ * Who something is shared with, made by or owned by.
+ *
+ * `person` and `agent` are seats (a person holds a human seat), drawn as the
+ * circle and the squircle `Avatar` already draws them as. A `team` is an org
+ * unit: everyone in it and below it, people and agents alike, so it is drawn
+ * with the people glyph rather than anybody's initials.
+ */
+export type PrincipalKind = 'person' | 'agent' | 'team';
+export declare const PRINCIPAL_KINDS: readonly ["person", "agent", "team"];
+export interface Principal {
+    /** Stable across renames: a seat handle or a unit key. */
+    id: string;
+    kind: PrincipalKind;
+    name: string;
+    /** A short second line: a unit, a handle, "6 people, 4 agents". */
+    detail?: string | undefined;
+    /** The Crewlet character an agent is drawn as. */
+    character?: CrewletCharacterId | undefined;
+    /** The hue an agent's character is drawn in. */
+    hue?: NodeHue | undefined;
+    /** A person's picture. */
+    src?: string | undefined;
+}
+export interface PrincipalAvatarProps {
+    principal: Principal;
+    size?: AvatarSize | undefined;
+    /** The name is printed beside the badge, so the badge says nothing itself. Defaults to true. */
+    decorative?: boolean | undefined;
+}
+/** A principal's badge, drawn the one way every surface draws it. */
+export declare function PrincipalAvatar({ principal, size, decorative }: PrincipalAvatarProps): import("react").JSX.Element;

package/dist/Principal/index.d.ts

@@ -0,0 +1,2 @@
+export { PRINCIPAL_KINDS, PrincipalAvatar } from './Principal.js';
+export type { Principal, PrincipalAvatarProps, PrincipalKind } from './Principal.js';

package/dist/Principal/index.js

@@ -0,0 +1,4 @@
+export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-4KP4RC3O.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/PrincipalPicker.d.ts

@@ -0,0 +1,45 @@
+import { type Principal, type PrincipalKind } from '../Principal/index.js';
+/** A principal that may be offered but not taken, with the reason in words. */
+export interface PrincipalOption extends Principal {
+    disabled?: boolean | undefined;
+    /** Why it cannot be picked: "Already has access", "Only a person can add the whole company". */
+    disabledReason?: string | undefined;
+}
+export interface PrincipalPickerLabels {
+    /** The heading over each kind's group of suggestions. */
+    groups: Record<PrincipalKind, string>;
+    empty: string;
+    loading: string;
+}
+export interface PrincipalPickerProps {
+    /** What the field holds. The caller owns it, and searches with it. */
+    query: string;
+    onQueryChange: (query: string) => void;
+    /**
+     * The matches for `query`, in any order: they are grouped people, then
+     * agents, then teams. The caller filters, because who matches is the
+     * engine's answer, not a substring of a list the browser happens to hold.
+     */
+    options: readonly PrincipalOption[];
+    onPick: (principal: Principal) => void;
+    /** Names the field and its list. */
+    label: string;
+    placeholder?: string | undefined;
+    /** A search is in flight; the list says so instead of saying nobody matches. */
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    labels?: Partial<PrincipalPickerLabels> | undefined;
+}
+/**
+ * A search over people, agents and teams, with each match drawn as itself.
+ *
+ * THE LIST IS GROUPED BY KIND, because "Operations" the team and "Operations
+ * Lead" the agent are different answers to "who should see this", and a flat
+ * list of names makes a reader stop on every row to find out which is which.
+ * The groups are real ARIA groups named by their headings, and the highlight
+ * still moves through every option in order, across the groups.
+ *
+ * Picking clears the field, ready for the next name.
+ */
+export declare function PrincipalPicker({ query, onQueryChange, options, onPick, label, placeholder, loading, disabled, className, labels, }: PrincipalPickerProps): import("react").JSX.Element;

package/dist/PrincipalPicker/index.d.ts

@@ -0,0 +1,3 @@
+import './PrincipalPicker.css';
+export { PrincipalPicker } from './PrincipalPicker.js';
+export type { PrincipalOption, PrincipalPickerLabels, PrincipalPickerProps } from './PrincipalPicker.js';

package/dist/PrincipalPicker/index.js

@@ -0,0 +1,12 @@
+export { PrincipalPicker } from '../chunk-JEDWC3GI.js';
+import '../chunk-LOLELDBW.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-Q55TXPA3.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker-7NNZTGUP.css

@@ -0,0 +1,41 @@
+/*
+ * The suggestions under the field, grouped by kind. A row is the badge and the
+ * name with its second line, the shape every list of principals in the
+ * product draws.
+ */
+
+.crewlet-principal-picker {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.crewlet-principal-picker__group + .crewlet-principal-picker__group {
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-1);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-principal-picker__heading {
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-principal-picker__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-principal-picker__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-principal-picker__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/Reorder/index.d.ts

@@ -0,0 +1,2 @@
+export { useReorder, useReorderLists, moveKey, DEFAULT_REORDER_LABELS } from './useReorder.js';
+export type { Reorder, ReorderAxis, ReorderContainerProps, ReorderHandleProps, ReorderItemProps, ReorderLabels, ReorderLists, ReorderListsState, UseReorderListsOptions, UseReorderOptions, } from './useReorder.js';

package/dist/Reorder/index.js

@@ -0,0 +1,4 @@
+export { DEFAULT_REORDER_LABELS, moveKey, useReorder, useReorderLists } from '../chunk-XJ2QEBMM.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Reorder/useReorder.d.ts

@@ -0,0 +1,138 @@
+import { type DragEvent, type KeyboardEvent } from 'react';
+/**
+ * How the arrow keys map to a move.
+ *
+ * - `vertical`: Up moves an item one place earlier, Down one place later. A
+ *   list.
+ * - `grid`: Left and Up move it one place earlier, Right and Down one place
+ *   later. A wrapping row of cards, where the reading order is the order and
+ *   "the card above" is not a position the list holds.
+ */
+export type ReorderAxis = 'vertical' | 'grid';
+export interface ReorderLabels {
+    /** What the handle does, and its NAME: "Move Projects". */
+    handle: (name: string) => string;
+    /** The instruction a handle is described by, for a reader who cannot drag. */
+    hint: string;
+    /** Said after every move, by any means: "Projects moved to position 2 of 6." */
+    moved: (name: string, position: number, total: number) => string;
+}
+export declare const DEFAULT_REORDER_LABELS: ReorderLabels;
+/** Several ordered lists, by the id of the container each one is drawn in. */
+export type ReorderLists<K extends string> = Readonly<Record<string, readonly K[]>>;
+export interface UseReorderListsOptions<K extends string> {
+    /** Every list as it stands. The hook never owns them. */
+    lists: ReorderLists<K>;
+    /** A finished move: a drop, an arrow key or a call to `move`. */
+    onReorder: (next: Record<string, K[]>) => void;
+    /** What a reader calls an item, for the handle's name and the announcement. */
+    nameOf: (key: K) => string;
+    /**
+     * Whether an item may be dropped into a list. Left out, every item goes
+     * anywhere. A page refuses a group inside a group here.
+     */
+    accepts?: ((key: K, list: string) => boolean) | undefined;
+    axis?: ReorderAxis | undefined;
+    labels?: Partial<ReorderLabels> | undefined;
+}
+export interface ReorderHandleProps {
+    draggable: true;
+    'aria-label': string;
+    'aria-describedby': string;
+    onDragStart: (event: DragEvent<HTMLElement>) => void;
+    onDragEnd: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+export interface ReorderItemProps {
+    ref: (node: HTMLElement | null) => void;
+    'data-reorder': 'dragging' | 'idle';
+    /** Set on the item another list's drag would land before, or after when it is the last. */
+    'data-reorder-target'?: 'before' | 'after' | undefined;
+    /**
+     * Which way the target's marker runs: `vertical` beside an item that shares
+     * its row, `horizontal` above or below one that spans the row.
+     */
+    'data-reorder-line'?: 'vertical' | 'horizontal' | undefined;
+    onDragOver: (event: DragEvent<HTMLElement>) => void;
+    onDrop: (event: DragEvent<HTMLElement>) => void;
+}
+export interface ReorderContainerProps {
+    'data-reorder-over'?: 'true' | undefined;
+    onDragOver: (event: DragEvent<HTMLElement>) => void;
+    onDrop: (event: DragEvent<HTMLElement>) => void;
+}
+export interface ReorderListsState<K extends string> {
+    /** The lists to DRAW: the caller's, or the preview while a drag is held. */
+    lists: Readonly<Record<string, readonly K[]>>;
+    /** The item being dragged, if any. */
+    dragging: K | null;
+    /** Spread on the control an item is moved BY. */
+    handleProps: (key: K) => ReorderHandleProps;
+    /** Spread on the element that holds the item, the one a drag passes over. */
+    itemProps: (key: K) => ReorderItemProps;
+    /**
+     * Spread on the element a list is drawn in. A drop in the gap between two
+     * items keeps the preview, and a drag over an EMPTY stretch of another list
+     * (an empty group, the space after its last item) moves the item to its end.
+     */
+    listProps: (list: string) => ReorderContainerProps;
+    /** Move an item by a number of places within its own list, clamped to the ends. */
+    move: (key: K, by: number) => void;
+    /** Move an item to the end of another list, by command (a menu's "Move to"). */
+    moveTo: (key: K, list: string) => void;
+    /** The id of the hidden instruction every handle is described by. */
+    hintId: string;
+    /** The instruction itself, for the caller to render once (`VisuallyHidden`). */
+    hint: string;
+}
+export interface UseReorderOptions<K extends string> {
+    keys: readonly K[];
+    onReorder: (next: K[]) => void;
+    nameOf: (key: K) => string;
+    axis?: ReorderAxis | undefined;
+    labels?: Partial<ReorderLabels> | undefined;
+}
+export interface Reorder<K extends string> {
+    order: readonly K[];
+    dragging: K | null;
+    handleProps: (key: K) => ReorderHandleProps;
+    itemProps: (key: K) => ReorderItemProps;
+    containerProps: ReorderContainerProps;
+    move: (key: K, by: number) => void;
+    hintId: string;
+    hint: string;
+}
+/** `keys` with `key` taken out and put back at `to`. */
+export declare function moveKey<K>(keys: readonly K[], key: K, to: number): K[];
+/**
+ * Reordering items within and between lists, by drag, by keyboard and by
+ * command, as one operation: the cards of a page and the cards inside each
+ * of its groups.
+ *
+ * ONE IMPLEMENTATION, because there were three. DataTable's column settings,
+ * the dashboard's priority list and its board each carried their own drag
+ * handlers, and only one of them could be reached from a keyboard. This hook
+ * is that one's rules, given to every list that can be put in order.
+ *
+ * THE HANDLE IS A CONTROL. It is what an item is dragged BY, it has a name
+ * ("Move Projects"), it takes focus, and the arrow keys move the item from
+ * there. Moving into another list by keyboard is `moveTo`, which a caller
+ * offers as a command ("Move to group"), because "the next list" is not a
+ * direction an arrow key names.
+ *
+ * THE CALLER OWNS THE LISTS. While a drag is held the hook draws a PREVIEW
+ * within the item's own list and MARKS where it would land in another one
+ * (`data-reorder-target` on the item it would precede, `data-reorder-over`
+ * on the list); a drop reports the new lists once, and a drag that ends
+ * anywhere else (Escape, outside every list) leaves them as they were.
+ *
+ * EVERY MOVE IS SAID, through the page's `Announcer`, and ITEMS GLIDE to
+ * their new place (a FLIP transform) unless the reader asked for reduced
+ * motion.
+ */
+export declare function useReorderLists<K extends string>({ lists, onReorder, nameOf, accepts, axis, labels: labelOverrides, }: UseReorderListsOptions<K>): ReorderListsState<K>;
+/**
+ * One list's reordering: `useReorderLists` over a single list, for the
+ * common case of a settings panel or a shelf.
+ */
+export declare function useReorder<K extends string>({ keys, onReorder, nameOf, axis, labels, }: UseReorderOptions<K>): Reorder<K>;

package/dist/SandboxedFrame/SandboxedFrame.d.ts

@@ -0,0 +1,142 @@
+import { type HTMLAttributes } from 'react';
+import { type FrameBridgeRange, type FrameHello, type FrameOriginMode, type FrameTheme } from '../FrameProtocol/index.js';
+/**
+ * Where the frame is in its life.
+ *
+ * `loading` until the document has said hello, `ready` once it holds a port,
+ * and four ends, each torn down rather than left showing a document nobody
+ * vouched for: `failed` (it never said hello), `navigated` (a document that did
+ * not say hello replaced one that had), `refused` (the policy it arrived with
+ * is not one this host embeds) and `outdated` (it speaks no bridge version
+ * this host does).
+ */
+export type SandboxedFrameState = 'loading' | 'ready' | 'failed' | 'navigated' | 'refused' | 'outdated';
+/**
+ * Something the host turned away, reported so the page around the frame can
+ * record it. None of these is shown to the reader as more than the frame's
+ * own state: they are evidence for whoever reads the logs.
+ */
+export type FrameRefusal = 
+/** The engine's sandbox attribute carried tokens this host never sets. */
+{
+    kind: 'sandbox';
+    tokens: string[];
+}
+/** The frame URL is not http or https, or is not served from the origin it was given. */
+ | {
+    kind: 'src';
+}
+/** The nonce handed to the frame is not the shape the engine mints. */
+ | {
+    kind: 'nonce';
+}
+/** The embedded window said hello from the wrong origin. */
+ | {
+    kind: 'origin';
+    origin: string;
+}
+/** The embedded window said hello with a nonce that is not this frame's. */
+ | {
+    kind: 'hello-nonce';
+}
+/** A second hello without a document load between, or any second hello on the shared host. */
+ | {
+    kind: 'rehello';
+}
+/** The runtime speaks no bridge version this host does. */
+ | {
+    kind: 'bridge';
+    offered: FrameBridgeRange;
+}
+/** The page asked to open something that is not an external http, https or mailto link. */
+ | {
+    kind: 'link';
+    url: string;
+};
+export interface SandboxedFrameLabels {
+    /** The loading line, said once to a screen reader and drawn under the placeholder. */
+    loading: (title: string) => string;
+    failed: string;
+    failedDetail: string;
+    navigated: string;
+    navigatedDetail: string;
+    refused: string;
+    refusedDetail: string;
+    outdated: string;
+    outdatedDetail: string;
+    reload: string;
+}
+/** How long a document has to say hello after the frame mounts, or after a load, before it is torn down. */
+export declare const FRAME_HELLO_TIMEOUT_MS = 10000;
+type FrameDivAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onMessage' | 'children' | 'role' | 'aria-label'>;
+export interface SandboxedFrameProps extends FrameDivAttributes {
+    /** The engine's ticketed frame URL (`Frame.frame_url`). The host appends the fragment. */
+    src: string;
+    /**
+     * The origin the document is served from (`Frame.origin`). Per artifact, the
+     * hello must come from exactly this origin. On the shared host the document
+     * is opaque, its hello comes from `"null"`, and this may be that host's
+     * origin or `"null"` itself.
+     */
+    origin: string;
+    /** How the engine isolated the artifact (`Frame.mode`). */
+    mode: FrameOriginMode;
+    /** The engine's sandbox attribute (`Frame.sandbox`), set verbatim once it passes the host's own check. */
+    sandbox: string;
+    /** The engine's permissions attribute (`Frame.allow`), set verbatim. */
+    allow?: string | undefined;
+    /** The artifact's title. It names the frame, and the region around it, to assistive technology. */
+    title: string;
+    /**
+     * The reader's appearance. The value at mount goes in the fragment, so the
+     * first paint is already right; later values are posted on the port.
+     */
+    theme: FrameTheme;
+    /** The handshake nonce minted with the ticket (`Frame.nonce`). */
+    nonce: string;
+    /** The document said hello and holds its port. Called again for each document that does. */
+    onReady?: ((port: MessagePort, hello: FrameHello) => void) | undefined;
+    /** Every port message the frame does not handle itself. UNTRUSTED input: decide every call. */
+    onMessage?: ((data: unknown, port: MessagePort) => void) | undefined;
+    /**
+     * The page asked to open an external link. The frame never opens a window
+     * itself: the page around it shows the destination first (`LinkInterstitial`).
+     */
+    onOpenLink?: ((url: URL) => void) | undefined;
+    /**
+     * The page asked to give focus back, which is how a reader leaves a page
+     * that traps Tab. Without a handler, focus moves to the frame's region.
+     */
+    onFocusExit?: (() => void) | undefined;
+    onStateChange?: ((state: SandboxedFrameState) => void) | undefined;
+    onRefusal?: ((refusal: FrameRefusal) => void) | undefined;
+    /** Offered on every end state as the Reload action. Mint a fresh frame, then re-render with it. */
+    onReload?: (() => void) | undefined;
+    helloTimeoutMs?: number | undefined;
+    labels?: Partial<SandboxedFrameLabels> | undefined;
+}
+/**
+ * An artifact's document, embedded in a sandboxed frame and spoken to over one
+ * transferred `MessagePort`.
+ *
+ * THE HANDSHAKE IS THE WHOLE SECURITY OF THE BRIDGE. A hello is accepted only
+ * from this iframe's own window, carrying the nonce minted with its ticket,
+ * and, per artifact, from the artifact's own origin. Only then is a fresh
+ * port transferred, in the same task, to the window that was checked. Every
+ * later call travels on that port, which no other window can address, and a
+ * document that navigates away loses it.
+ *
+ * A DOCUMENT THAT DOES NOT ANNOUNCE ITSELF IS TORN DOWN. The engine's runtime
+ * says hello on every load, so a load with no hello means the frame now holds
+ * a document the engine did not serve, and the frame is removed rather than
+ * left on screen. On the shared host, where origins are opaque, a document
+ * gets one handshake per ticket; a second document needs a fresh ticket.
+ *
+ * The frame never opens a window: an external link reaches `onOpenLink`, and
+ * the page around the frame decides.
+ *
+ * A new `src` or `nonce` is a new frame: everything is torn down and started
+ * again, as if the component had been remounted.
+ */
+export declare function SandboxedFrame(props: SandboxedFrameProps): import("react").JSX.Element;
+export {};

package/dist/SandboxedFrame/index.d.ts

@@ -0,0 +1,3 @@
+import './SandboxedFrame.css';
+export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from './SandboxedFrame.js';
+export type { FrameRefusal, SandboxedFrameLabels, SandboxedFrameProps, SandboxedFrameState } from './SandboxedFrame.js';

package/dist/SandboxedFrame/index.js

@@ -0,0 +1,8 @@
+export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from '../chunk-VYDFB6PJ.js';
+import '../chunk-W5J7R5EB.js';
+import '../chunk-F6V2PTN6.js';
+import '../chunk-ZXXDZJQN.js';
+import '../chunk-SVSCLHHI.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SandboxedFrame-L6HBQZCD.css

@@ -0,0 +1,50 @@
+/*
+ * The frame fills the box it is given. The page around it does not scroll
+ * round the artifact: the artifact scrolls inside its own document, which is
+ * what a viewer body that holds one wants.
+ *
+ * The region takes focus when the frame hands it back, and keeps the
+ * document's own focus treatment then: a reader who just left a page by
+ * keyboard needs to see where they landed.
+ */
+
+.crewlet-sandboxed-frame {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+}
+
+.crewlet-sandboxed-frame__frame {
+  flex: 1 1 auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+}
+
+/* Kept out of sight while it starts, so a document that has not painted in
+   the reader's palette yet is never what they see. It still loads. */
+.crewlet-sandboxed-frame[data-state='loading'] .crewlet-sandboxed-frame__frame {
+  visibility: hidden;
+}
+
+.crewlet-sandboxed-frame__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  padding: var(--spacing-3);
+}
+
+.crewlet-sandboxed-frame__end {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: var(--spacing-4);
+}