@boyernick/standard-ui-react 0.1.1-canary.1 → 0.1.1-canary.11

package/src/illustrations.tsx

@@ -1,167 +1,245 @@
-import type { SVGProps } from "react"
+import type { ComponentProps, ReactNode } from "react"
 import { cn } from "./lib/cn"
 
-export type IllustrationProps = SVGProps<SVGSVGElement>
+/**
+ * Small, composition-based illustrations for empty states.
+ *
+ * Built from divs and theme tokens rather than SVG paths, so they follow the
+ * palette into dark mode instead of carrying baked-in colours. They are
+ * deliberately abstract and monochrome — a miniature of the thing that is
+ * missing, not a picture about it. Nothing here uses a brand colour: an empty
+ * state is a quiet moment, and an accent turns it into an announcement.
+ */
 
-const illustrationProps = {
-  viewBox: "0 0 240 160",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-} as const
+export type IllustrationProps = ComponentProps<"div">
 
-export const IllustrationEmpty = ({
-  className,
-  ...props
-}: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
+/** Fixed 64×48 stage, so a row of these lines up without ad-hoc sizing. */
+const Frame = ({ className, children, ...props }: IllustrationProps) => (
+  <div
+    className={cn(
+      "inline-flex h-12 w-16 shrink-0 items-center justify-center",
+      className,
+    )}
     aria-hidden
     {...props}
   >
-    <path
-      d="M52 65 79 40h82l27 25v55H52V65Z"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path
-      d="M52 65h45l8 13h30l8-13h45"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M97 31h46"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="4"
-      strokeLinecap="round"
-    />
-    <circle cx="120" cy="104" r="4" className="fill-brand-primary" />
-  </svg>
+    {children}
+  </div>
 )
 
-export const IllustrationError = ({
+/** A sheet. The hairline and radius are sub-pixel on purpose — at this size a
+ *  1px border reads as a heavy outline rather than an edge. */
+const Card = ({
+  className,
+  children,
+}: {
+  className?: string
+  children?: ReactNode
+}) => (
+  <div
+    className={cn(
+      "relative flex shrink-0 flex-col overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
+      className,
+    )}
+  >
+    {children}
+  </div>
+)
+
+/** A line of content. */
+const Bar = ({ width }: { width: string }) => (
+  <div
+    className="h-[3px] shrink-0 rounded-[1px] bg-background-tertiary"
+    style={{ width }}
+  />
+)
+
+/** Nothing here yet — a sheet with no content on it. */
+export const IllustrationEmpty = ({ className, ...props }: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8" />
+  </Frame>
+)
+
+/** Something to look through — a sheet behind a lens. */
+export const IllustrationSearch = ({
   className,
   ...props
 }: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
-    aria-hidden
-    {...props}
-  >
-    <rect
-      x="47"
-      y="28"
-      width="146"
-      height="104"
-      rx="16"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path
-      d="M47 54h146"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <circle cx="63" cy="41" r="3" className="fill-brand-primary" />
-    <circle cx="74" cy="41" r="3" fill="currentColor" opacity=".45" />
-    <circle cx="85" cy="41" r="3" fill="currentColor" opacity=".25" />
-    <path
-      d="m103 78 34 34m0-34-34 34"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="5"
-      strokeLinecap="round"
-    />
-  </svg>
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8 gap-[3px]">
+      <Bar width="80%" />
+      <Bar width="55%" />
+      <Bar width="35%" />
+    </Card>
+    <div className="-ml-2.5 mt-4 size-4 rounded-full border-[1.5px] border-border-secondary bg-surface" />
+  </Frame>
 )
 
-export const IllustrationSuccess = ({
+/** Something went wrong — the stack knocked out of true. */
+export const IllustrationError = ({ className, ...props }: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Card className="h-9 w-7 -rotate-6" />
+    <Card className="-ml-3 h-10 w-8 rotate-[7deg] gap-[3px]">
+      <Bar width="70%" />
+      <Bar width="45%" />
+    </Card>
+  </Frame>
+)
+
+/** Somewhere to put a file — a sheet going into a folder.
+ *
+ *  Two earlier attempts failed for the same reason: an arrow stamped on a
+ *  sheet, then a sheet on a plain grey slab, both read as a document with
+ *  something next to it. A folder is its own silhouette — tab, body, a sheet
+ *  tucked behind the front — so the arrangement carries the meaning and no
+ *  symbol has to. It is also the one shape here that is not another sheet,
+ *  which keeps it from reading as the error stack. */
+export const IllustrationUpload = ({
   className,
   ...props
 }: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
-    aria-hidden
-    {...props}
-  >
-    <circle
-      cx="120"
-      cy="80"
-      r="53"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <circle
-      cx="120"
-      cy="80"
-      r="37"
-      className="fill-brand-primary text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path
-      d="m99 80 14 14 29-31"
-      className="text-brand-foreground"
-      stroke="currentColor"
-      strokeWidth="6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M63 42h13M69.5 35.5v13M168 118h13m-6.5-6.5v13"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="3"
-      strokeLinecap="round"
-    />
-  </svg>
+  <Frame className={className} {...props}>
+    <div className="relative h-11 w-12">
+      {/* Tucked deep enough that the folder front cuts across it. */}
+      <Card className="absolute inset-x-[13px] top-0 h-8 -rotate-6 gap-[3px]">
+        <Bar width="70%" />
+        <Bar width="45%" />
+      </Card>
+      {/* Laps 1px into the body so their borders read as one outline. */}
+      <div className="absolute bottom-[21px] left-1 h-1.5 w-4 rounded-t-[2px] border-x-[0.5px] border-t-[0.5px] border-border-secondary bg-background-tertiary" />
+      <div className="absolute inset-x-1 bottom-0 h-[22px] rounded-[3px] border-[0.5px] border-border-secondary bg-background-tertiary" />
+    </div>
+  </Frame>
 )
 
-export const IllustrationSearch = ({
+/** Done — a sheet carrying a mark. */
+export const IllustrationSuccess = ({
   className,
   ...props
 }: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8 items-center justify-center">
+      {/* A check is cheaper as two borders on a rotated box than as a path. */}
+      <span className="mb-0.5 h-3 w-1.5 rotate-45 border-r-[1.5px] border-b-[1.5px] border-fg-tertiary" />
+    </Card>
+  </Frame>
+)
+
+/* -------------------------------------------------------------------------
+ * File types
+ *
+ * A second, smaller family. These sit inline — in an attachment row, a list,
+ * a preview slot — so they are a bare sheet at 24×30 rather than a hero on a
+ * 64×48 stage. Same grammar: a sheet, and marks on it standing in for whatever
+ * the file holds.
+ *
+ * Presentational, like Kbd: they render the type you name. Mapping an
+ * extension to a type is the consumer's job, since only the consumer knows
+ * what it wants to do with the ones it does not recognise.
+ * ---------------------------------------------------------------------- */
+
+export type FileIllustrationType =
+  | "document"
+  | "image"
+  | "spreadsheet"
+  | "presentation"
+  | "video"
+  | "audio"
+  | "code"
+  | "archive"
+  | "generic"
+
+export type IllustrationFileProps = IllustrationProps & {
+  type?: FileIllustrationType
+}
+
+/** A block of colour standing in for content rather than a line of it. */
+const Block = ({ className }: { className?: string }) => (
+  <div className={cn("rounded-[1px] bg-background-tertiary", className)} />
+)
+
+const marks: Record<FileIllustrationType, ReactNode> = {
+  document: (
+    <>
+      <Bar width="100%" />
+      <Bar width="100%" />
+      <Bar width="60%" />
+    </>
+  ),
+  // A horizon and a sun — the smallest arrangement that reads as a picture.
+  image: (
+    <div className="relative mt-auto h-3.5 w-full">
+      <Block className="absolute top-0 right-1 size-1.5 rounded-full" />
+      <Block className="absolute inset-x-0 bottom-0 h-2 [clip-path:polygon(0_100%,38%_28%,62%_100%)]" />
+      <Block className="absolute right-0 bottom-0 h-1.5 w-1/2 [clip-path:polygon(0_100%,50%_20%,100%_100%)]" />
+    </div>
+  ),
+  spreadsheet: (
+    <div className="grid h-full w-full grid-cols-3 grid-rows-3 gap-[1.5px]">
+      {Array.from({ length: 9 }, (_, i) => (
+        <Block key={i} />
+      ))}
+    </div>
+  ),
+  presentation: (
+    <>
+      <Block className="h-2.5 w-full" />
+      <Bar width="70%" />
+    </>
+  ),
+  // A play triangle, cut from a block so it keeps the same fill as everything else.
+  video: (
+    <div className="m-auto size-3">
+      <Block className="size-full [clip-path:polygon(22%_10%,90%_50%,22%_90%)]" />
+    </div>
+  ),
+  audio: (
+    <div className="m-auto flex h-3.5 items-center gap-[2px]">
+      <Block className="h-1.5 w-[2px]" />
+      <Block className="h-3.5 w-[2px]" />
+      <Block className="h-2.5 w-[2px]" />
+      <Block className="h-3.5 w-[2px]" />
+      <Block className="h-1.5 w-[2px]" />
+    </div>
+  ),
+  code: (
+    <>
+      <Bar width="55%" />
+      <div className="flex w-full pl-1.5">
+        <Bar width="70%" />
+      </div>
+      <div className="flex w-full pl-1.5">
+        <Bar width="50%" />
+      </div>
+      <Bar width="40%" />
+    </>
+  ),
+  // A stack, since an archive is other files in a coat.
+  archive: (
+    <div className="m-auto flex flex-col gap-[2px]">
+      <Block className="h-1.5 w-2.5" />
+      <Block className="h-1.5 w-2.5" />
+      <Block className="h-1.5 w-2.5" />
+    </div>
+  ),
+  generic: null,
+}
+
+/** One file, drawn as the kind of thing it holds. */
+export const IllustrationFile = ({
+  type = "generic",
+  className,
+  ...props
+}: IllustrationFileProps) => (
+  <div
+    className={cn(
+      "relative flex h-[30px] w-6 shrink-0 flex-col gap-[3px] overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
+      className,
+    )}
     aria-hidden
     {...props}
   >
-    <path
-      d="M42 38h113a12 12 0 0 1 12 12v69H42V38Z"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path d="M42 58h125" stroke="currentColor" strokeWidth="2" />
-    <path
-      d="M59 76h48M59 89h34M59 102h53"
-      stroke="currentColor"
-      strokeWidth="4"
-      strokeLinecap="round"
-      opacity=".5"
-    />
-    <circle
-      cx="155"
-      cy="91"
-      r="27"
-      className="fill-surface text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="5"
-    />
-    <path
-      d="m174 111 22 22"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="7"
-      strokeLinecap="round"
-    />
-  </svg>
+    {marks[type]}
+  </div>
 )

package/src/index.ts

@@ -1,5 +1,12 @@
 export { Button, buttonVariants, type ButtonProps } from "./button";
 export { Input, inputVariants, type InputProps } from "./input";
+export {
+  Kbd,
+  KbdGroup,
+  kbdVariants,
+  type KbdGroupProps,
+  type KbdProps,
+} from "./kbd";
 export { Badge, badgeVariants, type BadgeProps } from "./badge";
 export { Switch, type SwitchProps } from "./switch";
 export { Checkbox, type CheckboxProps } from "./checkbox";
@@ -92,17 +99,27 @@ export {
   type AvatarFallbackProps,
 } from "./avatar";
 export { Calendar, type CalendarProps } from "./calendar";
+export {
+  DatePicker,
+  type DatePickerProps,
+  type DatePickerSingleProps,
+  type DatePickerRangeProps,
+} from "./date-picker";
+export type { DateRange } from "react-day-picker";
 export {
   Card,
   CardHeader,
   CardTitle,
   CardDescription,
+  CardAction,
   CardContent,
   CardFooter,
+  cardVariants,
   type CardProps,
   type CardHeaderProps,
   type CardTitleProps,
   type CardDescriptionProps,
+  type CardActionProps,
   type CardContentProps,
   type CardFooterProps,
 } from "./card";
@@ -650,6 +667,7 @@ export {
   BreadcrumbLink,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  breadcrumbSeparatorVariants,
   type BreadcrumbProps,
   type BreadcrumbListProps,
   type BreadcrumbItemProps,
@@ -773,6 +791,7 @@ export {
   TooltipPortal,
   TooltipPositioner,
   TooltipPopup,
+  tooltipPopupVariants,
   type TooltipProviderProps,
   type TooltipProps,
   type TooltipTriggerProps,
@@ -785,13 +804,19 @@ export {
   withCentralIconDefaults,
   iconGallery,
   IconBell,
+  IconCalendar1,
   IconChainLink1,
   IconCheckmark1,
   IconChevronBottom,
   IconChevronDownSmall,
   IconChevronRightSmall,
+  IconCircleCheck,
+  IconCircleInfo,
   IconClipboard,
   IconCrossSmall,
+  IconDotGrid1x3Horizontal,
+  IconExclamationCircle,
+  IconExclamationTriangle,
   IconHome,
   IconMagnifyingGlass,
   IconMinus,
@@ -800,6 +825,7 @@ export {
   IconPlus,
   IconSettingsGear1,
   IconSquareBehindSquare6,
+  IconStar,
   IconSun,
   IconX,
   type CentralIconProps,
@@ -821,7 +847,11 @@ export {
   IllustrationError,
   IllustrationSuccess,
   IllustrationSearch,
+  IllustrationUpload,
+  IllustrationFile,
   type IllustrationProps,
+  type IllustrationFileProps,
+  type FileIllustrationType,
 } from "./illustrations"
 export { BrandMark, BrandWordmark, type BrandMarkProps, type BrandWordmarkProps } from "./brand"
 export {

package/src/input.tsx

@@ -5,7 +5,7 @@ import { forwardRef, type InputHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
 
 const inputVariants = cva(
-  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/kbd.tsx

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+const kbdVariants = cva(
+  // The border is bottom-only on purpose: it reads as the lip of a physical
+  // key without boxing the glyph in on all four sides, which at 12px turns a
+  // keycap into a cramped badge.
+  "inline-flex shrink-0 items-center justify-center border-b px-1 font-sans text-xs whitespace-nowrap select-none",
+  {
+    variants: {
+      variant: {
+        default: "border-border-primary bg-background-tertiary text-fg-secondary",
+        // The default fill is a light grey that vanishes on a dark surface, so
+        // an inverted keycap tints with the inverted foreground instead. It has
+        // to be that token rather than a literal `white`: the grey ramp flips
+        // under `.dark`, so a hardcoded white wash would sit invisibly on the
+        // now-light inverted surface.
+        inverted: "border-fg-inverted/10 bg-fg-inverted/10 text-fg-inverted",
+      },
+      size: {
+        sm: "h-4 min-w-3.5 rounded-2xs",
+        md: "h-5 min-w-4 rounded-xs",
+      },
+    },
+    defaultVariants: { variant: "default", size: "md" },
+  },
+)
+
+export type KbdProps = ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>
+export type KbdGroupProps = ComponentProps<"span">
+
+/** A single keycap. Presentational — map "cmd" to ⌘ before it gets here. */
+export const Kbd = ({ className, variant, size, ...props }: KbdProps) => (
+  <kbd className={cn(kbdVariants({ variant, size }), className)} {...props} />
+)
+
+/** A full shortcut. Keeps the caps on one line at a consistent gap. */
+export const KbdGroup = ({ className, ...props }: KbdGroupProps) => (
+  <span
+    className={cn("inline-flex items-center gap-1 align-middle", className)}
+    {...props}
+  />
+)
+
+export { kbdVariants }

package/src/lib/motion.ts

@@ -1,23 +1,133 @@
 /**
  * Shared motion classes for StandardUI.
- * Prefer CSS `scale` on centered modals so `translate` centering stays intact.
- * Anchored popups use `transform-origin` from Base UI.
+ *
+ * Every value resolves to a token in `@boyernick/standard-ui-tokens` — the
+ * `--ease-*` ladder and the `--duration-*` scale. Nothing here hardcodes a
+ * curve or a millisecond count.
+ *
+ * The easing ladder is ordered by *onset* — how quickly a transition commits:
+ *
+ *   passive  ambient, system-initiated       (slowest onset)
+ *   enter    surfaces arriving
+ *   move     things travelling across a surface
+ *   snap     direct response to a pointer    (sharpest onset)
+ *
+ * Two kinds of token live here, and they behave differently:
+ *
+ *   Mount tokens  — backdrop, popupCenter, popupAnchor, accordionPanel,
+ *     checkIndicator.
+ *     These carry separate enter and exit behaviour. Base UI flags the exit
+ *     with `data-ending-style`, and the `data-ending-style:` variants below
+ *     re-declare duration and easing for that direction. Exits always run at
+ *     `--duration-exit`, so dismissing anything costs the same no matter how
+ *     long the entrance took.
+ *
+ *   State tokens — tabsIndicator, colors, transform, all.
+ *     These animate between states on a mounted element, so there is no enter
+ *     or exit to distinguish; they take a single curve.
+ *
+ * Fades are linear on purpose. Perceived brightness is already non-linear, so
+ * easing an opacity change makes it look like it sticks at the end.
  */
+
+const DURATION = {
+  xs: "duration-[var(--duration-xs)]",
+  sm: "duration-[var(--duration-sm)]",
+  md: "duration-[var(--duration-md)]",
+  lg: "duration-[var(--duration-lg)]",
+} as const
+
+/** Every exit runs at the same length — see `--duration-exit`. */
+const EXIT_DURATION = "data-ending-style:duration-[var(--duration-exit)]"
+
+const REDUCED = "motion-reduce:transition-none"
+
 export const motion = {
-  backdrop:
-    "transition-opacity duration-150 ease-out motion-reduce:transition-none data-starting-style:opacity-0 data-ending-style:opacity-0",
-  /** Centered dialog / alert — scale property, not transform */
-  popupCenter:
-    "transition-[scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  /** Select, tooltip, menus — transform-origin from Base UI */
-  popupAnchor:
-    "origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  accordionPanel:
-    "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-starting-style:h-0 data-ending-style:h-0",
-  tabsIndicator:
-    "transition-[translate,width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
-  colors: "transition-colors duration-150 ease-out motion-reduce:transition-none",
-  transform:
-    "transition-transform duration-150 ease-out motion-reduce:transition-none",
-  all: "transition-all duration-150 ease-out motion-reduce:transition-none",
+  /** Overlay scrims. Linear both ways — see the note on fades above. */
+  backdrop: [
+    "transition-opacity",
+    DURATION.sm,
+    "ease-linear",
+    REDUCED,
+    "data-starting-style:opacity-0",
+    "data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-linear",
+  ].join(" "),
+
+  /** Centred dialog / alert — animates `scale`, so translate centring holds. */
+  popupCenter: [
+    "transition-[scale,opacity]",
+    DURATION.md,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Select, tooltip, menus — transform-origin comes from Base UI. */
+  popupAnchor: [
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity]",
+    DURATION.sm,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Height expand and collapse. */
+  accordionPanel: [
+    "transition-[height]",
+    DURATION.md,
+    "ease-move",
+    REDUCED,
+    "data-starting-style:h-0",
+    "data-ending-style:h-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Check and minus glyphs mounting inside a small control. Snaps, because
+   *  it answers a click directly, and scales from the centre so the mark
+   *  reads as landing in the box rather than fading onto it. */
+  checkIndicator: [
+    "transition-[scale,opacity]",
+    DURATION.sm,
+    "ease-snap",
+    REDUCED,
+    "data-starting-style:scale-50 data-starting-style:opacity-0",
+    "data-ending-style:scale-50 data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Sliding tab underline or pill — follows a pointer, so it snaps. */
+  tabsIndicator: [
+    "transition-[translate,width]",
+    DURATION.md,
+    "ease-snap",
+    REDUCED,
+  ].join(" "),
+
+  /** Hover and pressed colour changes. */
+  colors: ["transition-colors", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Icon rotates and simple transforms. */
+  transform: [
+    "transition-transform",
+    DURATION.sm,
+    "ease-move",
+    REDUCED,
+  ].join(" "),
+
+  /** Every property. Reach for a narrower token first. */
+  all: ["transition-all", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Long, ambient movement — progress fills, meters, background shifts. */
+  passive: ["transition-all", DURATION.lg, "ease-passive", REDUCED].join(" "),
 } as const