@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Popover-WJGCF3ZQ.css

@@ -0,0 +1,185 @@
+/*
+ * The anchored panel.
+ *
+ * It is placed by arithmetic (see Popover.tsx), so this stylesheet owns only
+ * what the panel looks like and how it enters. Two positioning modes, and one
+ * branch decides which: inside a LayerHost the panel is absolute in that
+ * host's own box, and against the window it is fixed, because the coordinates
+ * it is given are viewport coordinates and an absolute panel under an
+ * unpositioned body is offset by the page's scroll.
+ *
+ * An OPAQUE surface, never the glass one: glass carries chrome, and anything
+ * carrying words sits on something a contrast ratio can be measured against.
+ */
+
+.crewlet-popover {
+  position: fixed;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  /* Wide enough that a panel is a panel: below this a popover reads as a
+     tooltip that happens to hold controls. */
+  min-width: 260px;
+  max-width: 380px;
+  max-height: min(360px, 60vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  animation: crewlet-popover-in var(--motion-duration-base) var(--motion-easing-emphasized);
+}
+
+.crewlet-popover--in-host {
+  position: absolute;
+}
+
+.crewlet-popover--below {
+  transform-origin: top left;
+}
+
+.crewlet-popover--above {
+  transform-origin: bottom left;
+}
+
+/* A panel that takes focus shows it on the panel, not only on what is inside. */
+.crewlet-popover:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* Up from under its anchor, which is where it is about to be. */
+@keyframes crewlet-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-2));
+  }
+}
+
+/* A list inside a panel. The rows carry the menu's register, because a row of
+   verbs is a row of verbs wherever it is drawn.
+
+   WHAT THEY DO NOT TAKE FROM A MENU IS ITS `white-space: nowrap`. A menu panel
+   is as wide as its longest row and can afford an unbreakable line; this panel
+   is a declared width range, so a line that cannot break has nowhere to go but
+   sideways out of a box whose `overflow-y` already makes the other axis
+   scroll. A row's text is often a bare child of the row as well, which is a
+   place `text-overflow` cannot reach, so the line would be clipped with
+   nothing to say it had been. It wraps instead. */
+.crewlet-popover__list {
+  list-style: none;
+  margin: 0;
+  padding: var(--spacing-1);
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-popover__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  font-family: inherit;
+  text-align: left;
+  width: 100%;
+}
+
+/*
+ * A NEUTRAL hover. The accent means "where the reader is": a selection, an
+ * active filter, the row a listbox's arrows are on. A row that turned the
+ * accent under the pointer said the reader was somewhere they were only
+ * passing over, and with focus moving row to row in a menu it said it twice.
+ */
+.crewlet-popover__item:hover:not(.is-disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * The tint is on `:focus` and the ring on `:focus-visible`, as in a menu: a
+ * panel that takes focus as it opens hands it to its first row, and a row a
+ * script focused after a pointer opened the panel matches no browser's
+ * `:focus-visible`, so the panel came up with nothing lit. See Menu.css.
+ */
+.crewlet-popover__item:focus {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-popover__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  /* Inside a panel that scrolls its own rows, an outset ring is clipped by the
+     scroller and painted over by the next row. */
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-popover__item.is-disabled,
+.crewlet-popover__item[aria-disabled='true'] {
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+/* The current answer of a choice: the one place the accent belongs here. */
+.crewlet-popover__item.is-active {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-popover__item-icon {
+  flex-shrink: 0;
+}
+
+.crewlet-popover__item-spacer {
+  flex: 1;
+}
+
+.crewlet-popover__item-trail {
+  margin-left: auto;
+  padding-left: var(--spacing-4);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* A heading above a group of rows. */
+.crewlet-popover__heading {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-popover__divider {
+  height: 1px;
+  background: var(--color-border-default);
+  margin: var(--spacing-1) 0;
+}
+
+/* An inline editor: a panel hosting a single control while a value is edited
+   in place. Sized snug around it. */
+.crewlet-popover__editor {
+  padding: var(--spacing-3);
+  min-width: 240px;
+}
+
+.crewlet-popover__editor-label {
+  display: block;
+  margin-bottom: var(--spacing-2);
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The rows carry no transition, and that is the rule rather than an omission:
+ * the arrows move the highlight, and a fade lags a held arrow key.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-popover {
+    animation: none;
+  }
+}

package/dist/PricingCard/PricingCard.d.ts

@@ -0,0 +1,56 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+export type PricingCardTagVariant = 'neutral' | 'top' | 'save' | 'pending';
+/**
+ * PricingCard is the canonical plan-tier card surface. It owns the
+ * outer container (the selected, pending, unavailable and disabled
+ * states, plus the interactive hover), and exposes compound parts
+ * (`PricingCard.Header / Name / Tag / Price / Amount / Cadence /
+ * PriceNote / Body / Footer`) so the caller composes the content.
+ *
+ * The card renders as a `<button>` by default so the entire surface
+ * is clickable in a picker context. Pass `interactive={false}` for
+ * a static display card (a pricing comparison) and the surface
+ * renders as a `<div>` instead.
+ */
+export interface PricingCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    selected?: boolean;
+    pending?: boolean;
+    /**
+     * Soft-disabled: the option is shown but cannot be chosen right now.
+     * Click is suppressed and the interactive card is announced as
+     * disabled through `aria-disabled` while staying focusable, so a
+     * keyboard or screen reader user can still reach it and read why.
+     * State that reason in the card content, since the dimmed surface
+     * alone does not explain it.
+     */
+    unavailable?: boolean;
+    /** Hard disabled. Click is suppressed. */
+    disabled?: boolean;
+    /** When false (default true), render a `<div>` instead of a `<button>`. */
+    interactive?: boolean;
+}
+interface PricingCardRootProps extends PricingCardProps {
+    children?: ReactNode;
+}
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: PricingCardTagVariant;
+}
+interface AmountProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Strikethrough; used to show the pre-discount price. */
+    strike?: boolean;
+    /** Highlighted with the discounted accent colour. */
+    discounted?: boolean;
+}
+export declare const PricingCard: import("react").ForwardRefExoticComponent<PricingCardRootProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    Header: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Name: ({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+    Tag: ({ variant, className, children, ...rest }: TagProps) => import("react/jsx-runtime").JSX.Element;
+    Price: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Amount: ({ strike, discounted, className, children, ...rest }: AmountProps) => import("react/jsx-runtime").JSX.Element;
+    Cadence: ({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+    PriceNote: ({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Grid: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/PricingCard/index.d.ts

@@ -0,0 +1,3 @@
+import './PricingCard.css';
+export { PricingCard } from './PricingCard.js';
+export type { PricingCardProps, PricingCardTagVariant } from './PricingCard.js';

package/dist/PricingCard/index.js

@@ -0,0 +1,4 @@
+export { PricingCard } from '../chunk-KLJCCMF3.js';
+import '../chunk-S2XHHEW4.js';
+import '../chunk-PZSWF74H.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PricingCard-JFI7RYXP.css

@@ -0,0 +1,278 @@
+/*
+ * PricingCard, the plan-tier card surface.
+ *
+ * The primitive owns the outer card (border, radius, padding, states), the
+ * header, the price block and the grid container, and leaves the body and the
+ * footer to the caller.
+ *
+ * EVERY COLOUR IS A TOKEN NOW. The tags, the price note and the card's own
+ * ground were dark-theme literals: an amber at rgba(251, 191, 36, 0.75), a
+ * green at #86efac and a white lift at 2 percent, none of which is visible on
+ * a light page. The status hues here are the same soft-and-ink pairs the Tag
+ * and the Callout draw, so a "Save 10 percent" chip and a success tag on the
+ * screen behind it are the same green.
+ */
+
+/* ── Grid container ─────────────────────────────────────────────── */
+.crewlet-pricing-card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--spacing-3);
+  align-items: stretch;
+}
+
+@media (max-width: 1200px) {
+  .crewlet-pricing-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .crewlet-pricing-card-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* ── Card root ──────────────────────────────────────────────────── */
+.crewlet-pricing-card {
+  text-align: left;
+  /* The panel recipe: on dark the top hairline is the elevation, on light the
+     shadow is. One card surface across the system, so a plan tier and a
+     dashboard panel are the same object. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs), var(--shadow-hairline);
+  padding: var(--spacing-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  font-family: var(--font-family-sans);
+  color: var(--color-text-primary);
+  min-width: 0;
+  container-type: inline-size;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-pricing-card.is-interactive {
+  cursor: pointer;
+}
+
+.crewlet-pricing-card.is-interactive:hover:not(.is-disabled):not(.is-unavailable):not(:disabled) {
+  border-color: var(--color-brand-accent-soft-strong);
+}
+
+.crewlet-pricing-card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* The chosen plan takes the selection ring, which is the same inset rule
+   every selected surface in the system draws. */
+.crewlet-pricing-card.is-selected {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  box-shadow: var(--shadow-selection), var(--shadow-hairline);
+}
+
+.crewlet-pricing-card.is-disabled,
+.crewlet-pricing-card:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.crewlet-pricing-card.is-unavailable {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.crewlet-pricing-card.is-selected:has(.crewlet-pricing-card__amount--discounted) {
+  box-shadow: var(--shadow-selection), var(--shadow-hairline), var(--shadow-glow);
+}
+
+/* Compact a card's interior at small container widths, so a four-up grid on a
+   tablet does not render unreadably tight. */
+@container (max-width: 320px) {
+  .crewlet-pricing-card {
+    padding: var(--spacing-3);
+    gap: var(--spacing-2);
+  }
+
+  .crewlet-pricing-card__amount { font-size: var(--font-size-xl); }
+}
+
+@container (max-width: 240px) {
+  .crewlet-pricing-card {
+    padding: var(--spacing-2);
+  }
+
+  .crewlet-pricing-card__amount { font-size: var(--font-size-lg); }
+  .crewlet-pricing-card__name { font-size: var(--font-size-sm); }
+}
+
+/* ── Header (name and tags) ─────────────────────────────────────── */
+.crewlet-pricing-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+
+.crewlet-pricing-card__name {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+/* ── Tags ───────────────────────────────────────────────────────── */
+
+/*
+ * A PRICING TAG IS A TAG. It had its own pill here, with its own radius, its
+ * own type and its own tint table, so a "Save 10 percent" chip and a success
+ * tag two screens away were the same claim drawn two ways; four of the five
+ * declarations it needed were the Tag's own, already written down. It renders
+ * the shared primitive now, and what is left in this file is the only thing
+ * this card has to say about it: where the top tag sits.
+ *
+ * Pending, for a change that takes effect later, is the warning tone and the
+ * only signal on the card (no border tint, no ground change), so the eye reads
+ * it as a heads-up annotation rather than as a status competing with the
+ * selection ring.
+ */
+.crewlet-pricing-card__tag--top {
+  margin-left: auto;
+}
+
+/* ── Price block ────────────────────────────────────────────────── */
+.crewlet-pricing-card__price {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-pricing-card__amount {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  font-variant-numeric: tabular-nums;
+  transition: color var(--motion-duration-base) var(--motion-easing-default);
+}
+
+.crewlet-pricing-card__amount--strike {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+  text-decoration: line-through;
+  text-decoration-thickness: 1.5px;
+}
+
+/* The discounted price is TEXT, so it takes the accent's ink step rather than
+   its fill: the fill measures 3.77:1 as text on a light card. */
+.crewlet-pricing-card__amount--discounted {
+  color: var(--color-brand-accent-ink);
+  animation: crewlet-pricing-card-discount-pop var(--motion-duration-slow) var(--motion-easing-spring);
+  transform-origin: left center;
+}
+
+@keyframes crewlet-pricing-card-discount-pop {
+  0% {
+    transform: scale(0.92);
+    opacity: 0;
+  }
+
+  60% {
+    transform: scale(1.06);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.crewlet-pricing-card__cadence {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+/*
+ * A short label under the price: "Save $X (10 percent off)" on a discounted
+ * plan, or "Billed annually" and "Free forever" on a pricing page.
+ */
+.crewlet-pricing-card__price-note {
+  /* Layout and arrival only. The pill, the tint and the ink are the Tag's. */
+  flex-basis: 100%;
+  margin-top: 2px;
+  width: max-content;
+  max-width: 100%;
+  animation: crewlet-pricing-card-price-note-enter var(--motion-duration-slow) var(--motion-easing-spring);
+}
+
+/*
+ * A NOTE THAT LEADS WITH A GLYPH IS STILL TWO THINGS.
+ *
+ * The pill spaces its own slots, and a caller's glyph is not one of them: the
+ * children it is given are ONE slot, the label, so the gap the pill spends
+ * between a dot and a word does not reach inside it and a discount icon ends
+ * up touching the "Save" beside it. The label carries the same step instead,
+ * which is what this note drew for itself before it became a Tag. It is
+ * layout, not look: the pill, the tint and the type are still the Tag's.
+ *
+ * `min-width: 0` with it, because the label is a flex item of the pill and a
+ * flex item does not shrink below its content without it, which is what would
+ * push a long note past the card's edge instead of ellipsing inside it.
+ */
+.crewlet-pricing-card__price-note .crewlet-tag__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+@keyframes crewlet-pricing-card-price-note-enter {
+  0% {
+    transform: translateY(-4px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* ── Body and footer slots ──────────────────────────────────────── */
+.crewlet-pricing-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-pricing-card__footer {
+  margin-top: auto;
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+/*
+ * The price still changes and the note still appears; neither jumps to say so.
+ * A price that pops is a nice touch for somebody who can watch it and a
+ * genuine problem for somebody who cannot.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-pricing-card,
+  .crewlet-pricing-card__amount {
+    transition: none;
+  }
+
+  .crewlet-pricing-card__amount--discounted,
+  .crewlet-pricing-card__price-note {
+    animation: none;
+  }
+}

package/dist/Prose/Prose.d.ts

@@ -0,0 +1,33 @@
+import type { ElementType, HTMLAttributes } from 'react';
+export type ProseTone = 'default' | 'muted';
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** The element to draw. A `p` by default. */
+    as?: ElementType | undefined;
+    tone?: ProseTone | undefined;
+    /**
+     * The text is still arriving. It draws a caret after the last character, and
+     * the caret holds still under a reduced-motion preference.
+     */
+    streaming?: boolean | undefined;
+    /**
+     * An attempt that was given up on. Dimmed rather than removed: a reader has
+     * already read it, and making it vanish reads as a glitch.
+     */
+    dimmed?: boolean | undefined;
+    /** Bounds the line length. On by default; a measure is the point. */
+    measure?: 'normal' | 'narrow' | 'none' | undefined;
+}
+/**
+ * Natural language a person or a model wrote.
+ *
+ * WHY IT IS NOT A CODE BLOCK. Reasoning and speech used to be set in the same
+ * monospace block that carries tool JSON: 11px, tight leading, unbounded
+ * measure. That is a wall of text nobody reads. Here they get the
+ * proportional face, real leading and a bounded measure, and monospace stays
+ * where it means something.
+ *
+ * `white-space: pre-wrap` keeps the writer's own paragraph breaks, which are
+ * load bearing in a long answer, without turning a long line into a
+ * horizontal scroll.
+ */
+export declare function Prose({ as: Tag, tone, streaming, dimmed, measure, className, children, ...rest }: ProseProps): import("react/jsx-runtime").JSX.Element;

package/dist/Prose/index.d.ts

@@ -0,0 +1,3 @@
+import './Prose.css';
+export { Prose } from './Prose.js';
+export type { ProseProps, ProseTone } from './Prose.js';

package/dist/Prose/index.js

@@ -0,0 +1,2 @@
+export { Prose } from '../chunk-JCSA3XVH.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Prose-BTXNFT2Q.css

@@ -0,0 +1,99 @@
+/*
+ * Natural language: the proportional face, real leading, a bounded measure.
+ */
+
+.crewlet-prose {
+  /*
+   * The caret's blink, which is not a token: the motion scale covers a
+   * transition a reader barely registers, and this is a one-second pulse that
+   * has to read as a cursor. It is a component variable so an application can
+   * slow it without restating the rule.
+   */
+  --crewlet-prose-caret-period: 1.1s;
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  /* The writer's own paragraph breaks survive, and a long line still wraps. */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-prose--measure-normal {
+  max-width: var(--size-measure);
+}
+
+.crewlet-prose--measure-narrow {
+  max-width: var(--size-measure-narrow);
+}
+
+.crewlet-prose--muted {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * An attempt a provider gave up on. Dimmed rather than deleted, because a
+ * reader has already read it and making it vanish reads as a glitch.
+ */
+.crewlet-prose--dimmed {
+  opacity: 0.65;
+}
+
+/*
+ * THE TWO QUIETING DEVICES DO NOT STACK. The opacity above is already what
+ * says "given up on", and applied to the muted step as well it takes the words
+ * to 3.08:1 on the panel, under the floor for anything a reader reads; the
+ * primary step at the same opacity measures 6.16:1. A given-up attempt is
+ * still text somebody goes back to, so the dimming is the whole of the signal
+ * and the ink stays the one that was measured.
+ */
+.crewlet-prose--dimmed.crewlet-prose--muted {
+  color: var(--color-text-primary);
+}
+
+/*
+ * Text arriving right now. The transition is on COLOUR only, never on height:
+ * animating the height of a growing block makes every append a reflow the
+ * reader can feel, which is the opposite of the point.
+ */
+.crewlet-prose--streaming {
+  transition: color var(--motion-duration-slow) var(--motion-easing-default);
+}
+
+.crewlet-prose--streaming::after {
+  content: '';
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-inline-start: 2px;
+  vertical-align: text-bottom;
+  background: var(--color-brand-accent);
+  animation: crewlet-prose-caret var(--crewlet-prose-caret-period) steps(1) infinite;
+}
+
+@keyframes crewlet-prose-caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/*
+ * An indicator that will not stop is exactly what this setting is for, so the
+ * caret stops rather than merely slowing: it stays drawn, so the reader can
+ * still see where the text has reached.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-prose--streaming {
+    transition: none;
+  }
+
+  .crewlet-prose--streaming::after {
+    animation: none;
+  }
+}