@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/src/composites/chat-message.variants.ts

@@ -0,0 +1,16 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Density-responsive message rhythm around canonical Base media contracts. */
+export const chatMessage = tv({
+  slots: {
+    root: "min-w-0 text-foreground",
+    content: "grid min-w-0 gap-[var(--reddb-spatial-gap-md)]",
+    header: "flex flex-wrap items-baseline gap-[var(--reddb-spatial-gap-sm)]",
+    author: "font-medium text-foreground",
+    time: "text-sm tabular-nums text-ink-muted",
+    body: "min-w-0 text-sm text-foreground",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+  },
+});
+
+export type ChatMessageVariants = VariantProps<typeof chatMessage>;

package/vendor/ds/kits/app/src/composites/checkout-form.appearance.ts

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+
+/**
+ * Token-only arrangement around canonical Base form contracts. Form and
+ * Fieldset own the rhythm between their own children (ADR 0024): rows sit
+ * `layout-gap-md` apart and a group's fields `layout-gap-sm`, so neither the
+ * root nor a section re-spaces them.
+ */
+export const checkoutForm = tv({
+  slots: {
+    root: "w-full min-w-0",
+    error: "m-0 font-medium text-feedback-danger-foreground",
+    section: "min-w-0",
+    actions: "flex flex-wrap items-center justify-end gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type CheckoutFormVariants = VariantProps<typeof checkoutForm>;

package/vendor/ds/kits/app/src/composites/checkout-form.variants.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { CheckoutField as PortableCheckoutField, CheckoutSection as PortableCheckoutSection } from "../core/checkout-form";
+export { checkoutForm, type CheckoutFormVariants } from "./checkout-form.appearance";
+/** Svelte native attributes on a portable checkout field. */
+export interface CheckoutField extends PortableCheckoutField<HTMLInputAttributes["type"], HTMLInputAttributes["autocomplete"], HTMLInputAttributes["inputmode"]> {}
+/** Svelte native attributes on a portable checkout group. */
+export interface CheckoutSection extends PortableCheckoutSection<HTMLInputAttributes["type"], HTMLInputAttributes["autocomplete"], HTMLInputAttributes["inputmode"]> {}

package/vendor/ds/kits/app/src/composites/command-palette.behavior.ts

@@ -0,0 +1,11 @@
+/** One caller-owned command offered by the global command search. */
+export interface CommandPaletteCommand {
+  /** Stable identity returned when the command is selected. */
+  id: string;
+  /** Visible, searchable command name. */
+  label: string;
+  /** Removes only this command from interaction and selection. */
+  disabled?: boolean;
+  /** Caller-owned business action. */
+  onselect?: () => void;
+}

package/vendor/ds/kits/app/src/composites/command-palette.variants.ts

@@ -0,0 +1,15 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Token-only layout around the canonical Popover and Combobox appearances. */
+export const commandPalette = tv({
+  slots: {
+    root: "isolate min-w-0 text-foreground",
+    content: [
+      "w-[min(32rem,calc(100vw-2rem))]",
+      "p-[var(--reddb-spatial-inset-md)]",
+    ].join(" "),
+    search: "min-w-0",
+  },
+});
+
+export type CommandPaletteVariants = VariantProps<typeof commandPalette>;

package/vendor/ds/kits/app/src/composites/command-surfaces.behavior.ts

@@ -0,0 +1,24 @@
+import type { DropdownMenuEntry } from "@reddb-io/design-system/base";
+
+/** One top-level menu in an application Menubar. */
+export interface MenubarMenu {
+  id: string;
+  label: string;
+  items: readonly DropdownMenuEntry[];
+  disabled?: boolean;
+}
+
+/** Context menus share the canonical DropdownMenu row contract. */
+export type ContextMenuEntry = DropdownMenuEntry;
+
+/** One action or destination in a Toolbar. */
+export interface ToolbarItem {
+  id: string;
+  label: string;
+  href?: string;
+  disabled?: boolean;
+  onselect?: () => void;
+}
+
+/** One action or destination revealed by a SpeedDial. */
+export type SpeedDialAction = ToolbarItem;

package/vendor/ds/kits/app/src/composites/context-menu.variants.ts

@@ -0,0 +1,19 @@
+import { dropdownMenu, popover, type DropdownMenuSize } from "@reddb-io/design-system/base/recipes";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// Rows, headings, separators, icons and their three sizes are the Base
+// DropdownMenu's: one menu vocabulary, extended rather than copied, so the
+// three menus cannot drift apart. Only what this surface adds lives here.
+export const contextMenu = tv({
+  extend: dropdownMenu,
+  slots: {
+    content: popover({
+      class: "min-w-48 p-[var(--reddb-spatial-inset-sm)] data-[state=open]:outline-hidden",
+    }),
+  },
+});
+
+export type ContextMenuVariants = VariantProps<typeof contextMenu>;
+// The sizes are the DropdownMenu's; `extend` widens the variant's inferred
+// type to string, so the size is named from its source instead.
+export type ContextMenuSize = DropdownMenuSize;

package/vendor/ds/kits/app/src/composites/diff.variants.ts

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const DIFF_MODES = ["inline", "side-by-side"] as const;
+export type DiffMode = (typeof DIFF_MODES)[number];
+export type DiffChangeKind = "context" | "addition" | "removal" | "empty";
+
+const CHANGE: Record<DiffChangeKind, string> = {
+  context: "bg-transparent text-foreground",
+  addition:
+    "bg-[var(--reddb-color-feedback-success-surface)] text-[var(--reddb-color-feedback-success-foreground)]",
+  removal:
+    "bg-[var(--reddb-color-feedback-danger-surface)] text-[var(--reddb-color-feedback-danger-foreground)]",
+  empty: "invisible",
+};
+
+export const diff = tv({
+  slots: {
+    root: "w-full min-w-0 overflow-hidden rounded-lg border border-muted bg-transparent text-foreground",
+    split: "w-full min-w-0",
+    pane: "min-w-0",
+    heading:
+      "border-b border-muted px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-sm)] text-sm font-medium text-foreground",
+    lines: "m-0 overflow-x-auto py-[var(--reddb-spatial-inset-sm)] font-mono text-sm leading-relaxed",
+    line: "grid grid-cols-[auto_1fr] gap-[var(--reddb-spatial-gap-sm)] px-[var(--reddb-spatial-inset-md)] whitespace-pre",
+    marker: "select-none",
+  },
+  variants: { change: CHANGE },
+  defaultVariants: { change: "context" },
+});
+
+export type DiffVariants = VariantProps<typeof diff>;

package/vendor/ds/kits/app/src/composites/filter.variants.ts

@@ -0,0 +1,21 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** One application filter offered by the single-active Filter surface. */
+export interface FilterOption {
+  /** Stable submitted value. */
+  value: string;
+  /** Visible option name. */
+  label: string;
+  /** Present but unavailable to pointer and keyboard selection. */
+  disabled?: boolean;
+}
+
+/** Token-only arrangement around the canonical Base ToggleGroup. */
+export const filter = tv({
+  slots: {
+    root: "min-w-0 w-full",
+    list: "gap-[var(--reddb-spatial-gap-sm)]",
+  },
+});
+
+export type FilterVariants = VariantProps<typeof filter>;

package/vendor/ds/kits/app/src/composites/incentive.variants.ts

@@ -0,0 +1,18 @@
+import { mediaObject } from "@reddb-io/design-system/base/recipes";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const ROOT = mediaObject({ align: "start", gap: "md" }).root({
+  class: "isolate w-full min-w-0",
+});
+
+/** Token-only extension seams around canonical MediaObject and SectionHeading. */
+export const incentive = tv({
+  slots: {
+    root: ROOT,
+    icon: "flex shrink-0 items-center justify-center rounded-full border border-muted p-[var(--reddb-spatial-inset-sm)] text-foreground",
+    content: "min-w-0",
+    heading: "items-start pb-0",
+  },
+});
+
+export type IncentiveVariants = VariantProps<typeof incentive>;

package/vendor/ds/kits/app/src/composites/main-landmark.ts

@@ -0,0 +1,23 @@
+// Who owns `<main>` (wave 5A, DESIGN.md "Landmarks").
+//
+// A page has exactly one top-level `main` landmark. ApplicationShell owns it:
+// it is the page frame, and its skip link targets it. Every App layout that
+// could also render `<main>` (SidebarLayout, a nested ApplicationShell) reads
+// this context and renders a plain region instead when a layout above it has
+// already rendered the landmark, so composing them never yields a second or a
+// nested `main`. An `embedded` shell renders no `<main>` and claims nothing:
+// its host places the landmark, possibly further down.
+
+import { getContext, hasContext, setContext } from "svelte";
+
+const MAIN_OWNED = Symbol("reddb.main-owned");
+
+/** Declare that this subtree is inside a rendered `<main>` landmark. */
+export function claimMainLandmark(): void {
+  setContext(MAIN_OWNED, true);
+}
+
+/** Whether an enclosing layout already renders the page's `<main>`. */
+export function mainLandmarkOwned(): boolean {
+  return hasContext(MAIN_OWNED) && getContext<boolean>(MAIN_OWNED) === true;
+}

package/vendor/ds/kits/app/src/composites/menubar.variants.ts

@@ -0,0 +1,18 @@
+import { dropdownMenu, popover, type DropdownMenuSize } from "@reddb-io/design-system/base/recipes";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// Rows, headings, separators, icons and their three sizes are the Base
+// DropdownMenu's: one menu vocabulary, extended rather than copied, so the
+// three menus cannot drift apart. Only what this surface adds lives here.
+export const menubar = tv({
+  extend: dropdownMenu,
+  slots: {
+    root: "flex items-center gap-[var(--reddb-spatial-gap-sm)] data-[command-menubar]:items-center",
+    content: popover({ class: "min-w-48 p-[var(--reddb-spatial-inset-sm)]" }),
+  },
+});
+
+export type MenubarVariants = VariantProps<typeof menubar>;
+// The sizes are the DropdownMenu's; `extend` widens the variant's inferred
+// type to string, so the size is named from its source instead.
+export type MenubarSize = DropdownMenuSize;

package/vendor/ds/kits/app/src/composites/multi-column-layout.variants.ts

@@ -0,0 +1,39 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+// Container-first (ADR 0021): the layout is a named size container, and its
+// columns step against the width it was given, never the window's — so a
+// MultiColumnLayout in a pane or beside a sidebar stacks where it is narrow.
+// The root cannot query its own width, so the steps are on the columns: a
+// flex-wrap row whose columns are a full line each, until the container is
+// wide enough for them to share one line in proportion (1 : 2, then 1 : 2 : 1).
+// The gutter between columns is the Density layout tier (ADR 0024). A size
+// container takes its width from its parent, never its content, so the root
+// is `w-full`: inside a shrink-to-fit parent it would otherwise collapse.
+const COLUMNS = {
+  two: {
+    start: "@3xl/multi-column-layout:grow-[1] @3xl/multi-column-layout:basis-0",
+    main: "@3xl/multi-column-layout:grow-[2] @3xl/multi-column-layout:basis-0",
+    end: "",
+  },
+  three: {
+    start: "@3xl/multi-column-layout:grow-[1] @3xl/multi-column-layout:basis-0",
+    main: "@3xl/multi-column-layout:grow-[2] @3xl/multi-column-layout:basis-0",
+    end: "@5xl/multi-column-layout:grow-[1] @5xl/multi-column-layout:basis-0",
+  },
+} as const;
+
+/** Two or three columns that answer to their own container, with no assumptions about their content. */
+export const multiColumnLayout = tv({
+  slots: {
+    root: "@container/multi-column-layout flex w-full min-w-0 flex-wrap items-start gap-[var(--reddb-spatial-layout-gap-md)]",
+    column: "min-w-0 basis-full",
+    start: "",
+    main: "",
+    end: "",
+  },
+  variants: { columns: COLUMNS },
+  defaultVariants: { columns: "two" },
+});
+
+export type MultiColumnLayoutVariants = VariantProps<typeof multiColumnLayout>;
+export type MultiColumnCount = NonNullable<MultiColumnLayoutVariants["columns"]>;

package/vendor/ds/kits/app/src/composites/navigation.behavior.ts

@@ -0,0 +1,84 @@
+import type { IconGlyph, Tone } from "@reddb-io/design-system/base";
+
+/** Application-owned presence or health, independent of navigation selection. */
+export interface NavigationStatus {
+  /** Meaning announced alongside the destination, such as Online or Service unavailable. */
+  label: string;
+  /** Semantic tone of the status mark. Defaults to neutral. */
+  tone?: Tone;
+}
+
+/** Optional notifications and status shared by the sidebar surfaces. */
+export interface NavigationMarkers {
+  /** Notification count or short text; undefined omits it. Numeric counts above 99 display 99+ while retaining the exact accessible count. */
+  badge?: number | string;
+  /** Complete accessible notification description, e.g. 91 unread conversations. */
+  badgeLabel?: string;
+  /** Semantic notification tone. Defaults to neutral. */
+  badgeTone?: Tone;
+  /** Presence or health indicator; its required label carries meaning beyond colour. */
+  status?: NavigationStatus;
+}
+
+export function navigationBadge(value: number | string): string {
+  return typeof value === "number" && value > 99 ? "99+" : String(value);
+}
+
+export function navigationMarkerLabel(item: NavigationMarkers, label: string): string {
+  const visible = item.badge === undefined ? undefined : navigationBadge(item.badge);
+  const description = item.badgeLabel ?? `${item.badge} notifications`;
+  const notification = visible === undefined ? undefined : description.includes(visible) ? description : `${visible} (${description})`;
+  return [label, notification, item.status?.label].filter(Boolean).join(", ");
+}
+
+/** One destination shared by the Application Kit's navigation surfaces. */
+export interface ApplicationNavigationItem extends NavigationMarkers {
+  /** Stable identity and the value matched by a surface's required `currentId`. */
+  id: string;
+  /** Visible destination name. */
+  label: string;
+  /** Native destination, kept mandatory so navigation remains keyboard reachable. */
+  href: string;
+  /** Optional decorative glyph, drawn through the Base Icon contract beside the label. */
+  icon?: IconGlyph;
+  /** Present but unavailable and removed from the tab order by canonical NavItem. */
+  disabled?: boolean;
+  /** Optional consumer action performed when the destination is chosen. */
+  onselect?: () => void;
+}
+
+/** A destination after the surface has resolved its single current item. */
+export interface ResolvedApplicationNavigationItem extends ApplicationNavigationItem {
+  current: boolean;
+}
+
+/** Resolve current-item state once, refusing ambiguous or missing identities. */
+export function navigationItems<T extends { id: string }>(
+  items: readonly T[],
+  currentId: string,
+): readonly (T & { current: boolean })[] {
+  const matches = items.filter((item) => item.id === currentId);
+  if (matches.length !== 1) {
+    throw new Error(`currentId "${currentId}" must identify exactly one navigation item`);
+  }
+
+  return items.map((item) => ({ ...item, current: item.id === currentId }));
+}
+
+/** A primary destination. Without href, activation opens its contextual menu. */
+export interface PrimaryNavigationItem extends NavigationMarkers {
+  /** Stable section identity; distinct from whether its menu is open. */
+  id: string;
+  /** Visible label on the mobile bar and accessible desktop name. */
+  label: string;
+  /** Native link destination. Omit for a section with a contextual sidebar. */
+  href?: string;
+  /** Decorative glyph rendered through Base Icon. */
+  icon?: IconGlyph;
+  /** Optional initials when there is no glyph. */
+  fallback?: string;
+  /** Unavailable entries retain their place and cannot be activated. */
+  disabled?: boolean;
+  /** Optional action when activated; routing and currentId remain application-owned. */
+  onselect?: () => void;
+}

package/vendor/ds/kits/app/src/composites/order-history.variants.ts

@@ -0,0 +1,38 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Caller-owned order facts rendered with native table relationships. */
+export interface OrderHistoryEntry {
+  id: string;
+  placed: string;
+  placedAt: string;
+  status: string;
+  total: string;
+}
+
+/** Visible caller-owned column vocabulary for an order history. */
+export interface OrderHistoryLabels {
+  order: string;
+  placed: string;
+  status: string;
+  total: string;
+}
+
+export const DEFAULT_ORDER_HISTORY_LABELS: OrderHistoryLabels = {
+  order: "Order",
+  placed: "Placed",
+  status: "Status",
+  total: "Total",
+};
+
+/**
+ * Token-only arrangement around canonical Base heading and table contracts.
+ * A group's heading sits `layout-gap-sm` above its content (ADR 0024).
+ */
+export const orderHistory = tv({
+  slots: {
+    root: "flex w-full flex-col min-w-0 gap-[var(--reddb-spatial-layout-gap-sm)]",
+    heading: "pb-0",
+  },
+});
+
+export type OrderHistoryVariants = VariantProps<typeof orderHistory>;

package/vendor/ds/kits/app/src/composites/order-summary.variants.ts

@@ -0,0 +1,23 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** One caller-owned amount or fact in an order summary. */
+export interface OrderSummaryLine {
+  label: string;
+  value: string;
+}
+
+/**
+ * Token-only arrangement around canonical Base Card and DescriptionList. The
+ * lines and the total are two blocks, `layout-gap-sm` apart (ADR 0024).
+ */
+export const orderSummary = tv({
+  slots: {
+    root: "w-full min-w-0",
+    heading: "pb-0",
+    content: "flex flex-col gap-[var(--reddb-spatial-layout-gap-sm)]",
+    total: "flex items-center justify-between gap-[var(--reddb-spatial-gap-md)] font-medium",
+    actions: "flex flex-wrap items-center justify-end gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type OrderSummaryVariants = VariantProps<typeof orderSummary>;

package/vendor/ds/kits/app/src/composites/page-heading.variants.ts

@@ -0,0 +1,22 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const pageHeading = tv({
+  slots: {
+    root: [
+      "flex flex-wrap items-end justify-between",
+      "gap-[var(--reddb-spatial-gap-lg)]",
+      "border-b border-elevation-sunken-border bg-transparent pb-[var(--reddb-spatial-inset-md)]",
+    ].join(" "),
+    // A 20rem basis lets the actions wrap below the title before the identity
+    // column is squeezed into a word-per-line strip on a phone.
+    identity: "min-w-0 flex-[1_1_20rem]",
+    context: "text-sm text-ink-muted",
+    // The page title is the Theme's `title` role, through the Base Heading
+    // (ADR 0025): it follows the direction, never a size this file chose.
+    title: "",
+    description: "max-w-prose text-sm text-ink-muted",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type PageHeadingVariants = VariantProps<typeof pageHeading>;

package/vendor/ds/kits/app/src/composites/product-feature.variants.ts

@@ -0,0 +1,37 @@
+import { mediaObject } from "@reddb-io/design-system/base/recipes";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// Container-first (ADR 0021): the feature is a named size container, and its
+// media and content share one line from the DS's `3xl` container step (48rem)
+// and stack below it — measured against the feature's own width, never the
+// window's. The root cannot query its own width, so the steps are on the two
+// regions (a flex-wrap row whose regions are a full line each until they fit
+// side by side). `mediaSide="end"` moves the media after the content with
+// `order`, so it trails both side by side and stacked. The gap between the
+// two is the Density layout tier (ADR 0024).
+const ROOT = mediaObject({ gap: "lg" }).root({
+  class: "@container/product-feature w-full flex-wrap gap-[var(--reddb-spatial-layout-gap-md)]",
+});
+const REGION = "min-w-0 grow basis-full @3xl/product-feature:basis-0";
+
+export const productFeature = tv({
+  slots: {
+    root: ROOT,
+    media: `${REGION} overflow-hidden rounded-lg bg-muted`,
+    content: REGION,
+    heading: "items-start pb-0",
+    body: "flex flex-col gap-[var(--reddb-spatial-gap-md)] text-foreground",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-md)]",
+  },
+  variants: {
+    mediaSide: {
+      start: {},
+      end: { media: "order-last" },
+    },
+  },
+  defaultVariants: { mediaSide: "start" },
+});
+
+export type ProductFeatureVariants = VariantProps<typeof productFeature>;
+export type ProductFeatureMediaSide = NonNullable<ProductFeatureVariants["mediaSide"]>;
+export const PRODUCT_FEATURE_MEDIA_SIDES = ["start", "end"] as const;

package/vendor/ds/kits/app/src/composites/product-list.behavior.ts

@@ -0,0 +1,4 @@
+import type { Snippet } from "svelte";
+import type { ProductListItem as PortableProductListItem } from "../core/product-list";
+/** Svelte content adapter for the portable product entry. */
+export interface ProductListItem extends PortableProductListItem<Snippet> {}

package/vendor/ds/kits/app/src/composites/product-list.variants.ts

@@ -0,0 +1,35 @@
+import { gridList, list, type GridListColumn } from "@reddb-io/design-system/base/recipes";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const ROOT = list({
+  gap: "md",
+  class: gridList({ columns: 2, class: "min-w-0" }),
+});
+
+export const productList = tv({
+  slots: {
+    root: ROOT,
+    item: "min-w-0",
+    card: "h-full min-w-0",
+    media: "overflow-hidden rounded-md bg-muted",
+    identity: "flex min-w-0 items-baseline justify-between gap-[var(--reddb-spatial-gap-md)]",
+    // The product's name reads in the Theme's `heading` role, through the
+    // Base Heading (ADR 0025).
+    name: "min-w-0",
+    price: "shrink-0 text-sm font-medium text-foreground",
+    description: "text-sm text-ink-muted",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+    empty: "text-sm text-ink-muted",
+  },
+  variants: {
+    columns: {
+      1: { root: gridList({ columns: 1 }) },
+      2: { root: gridList({ columns: 2 }) },
+      3: { root: gridList({ columns: 3 }) },
+      4: { root: gridList({ columns: 4 }) },
+    } satisfies Record<GridListColumn, { root: string }>,
+  },
+  defaultVariants: { columns: 2 },
+});
+
+export type ProductListVariants = VariantProps<typeof productList>;

package/vendor/ds/kits/app/src/composites/product-overview.variants.ts

@@ -0,0 +1,23 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+// Container-first (ADR 0021): the two columns answer to the overview's own
+// width, never the window's. The root is the grid, and an element cannot
+// query its own size, so the step is intrinsic, as Base GridList's: each
+// track's minimum is half the row (two columns) from the DS's `3xl` container
+// step (48rem) up, and the whole row below it (one column). The gutter is the
+// Density layout tier (ADR 0024), and the step subtracts that gutter, so the
+// count is exact at every stop.
+
+export const productOverview = tv({
+  slots: {
+    root: "grid min-w-0 items-start gap-[var(--reddb-spatial-layout-gap-md)] grid-cols-[repeat(auto-fill,minmax(max(calc((100%_-_var(--reddb-spatial-layout-gap-md))_/_2_-_1px),min(calc(100%_-_1px),calc((var(--reddb-container-3xl)_-_100%)*9999))),1fr))]",
+    media: "min-w-0 overflow-hidden rounded-lg bg-muted",
+    content: "min-w-0",
+    heading: "items-start pb-0",
+    price: "text-lg font-medium text-foreground",
+    body: "flex flex-col gap-[var(--reddb-spatial-gap-md)] text-foreground",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type ProductOverviewVariants = VariantProps<typeof productOverview>;

package/vendor/ds/kits/app/src/composites/product-quickview.variants.ts

@@ -0,0 +1,21 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+// Container-first (ADR 0021): the two columns answer to the quickview's own
+// width, never the window's. The content is the grid, and an element cannot
+// query its own size, so the step is intrinsic, as Base GridList's: each
+// track's minimum is half the row (two columns) from the DS's `3xl` container
+// step (48rem) up, and the whole row below it (one column). The gutter is the
+// Density layout tier (ADR 0024), and the step subtracts that gutter, so the
+// count is exact at every stop.
+
+export const productQuickview = tv({
+  slots: {
+    root: "contents",
+    dialog: "text-foreground",
+    content: "isolate grid min-w-0 gap-[var(--reddb-spatial-layout-gap-md)] grid-cols-[repeat(auto-fill,minmax(max(calc((100%_-_var(--reddb-spatial-layout-gap-md))_/_2_-_1px),min(calc(100%_-_1px),calc((var(--reddb-container-3xl)_-_100%)*9999))),1fr))]",
+    media: "min-w-0 overflow-hidden rounded-lg bg-muted",
+    body: "grid min-w-0 content-start gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type ProductQuickviewVariants = VariantProps<typeof productQuickview>;

package/vendor/ds/kits/app/src/composites/review.variants.ts

@@ -0,0 +1,17 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Density-responsive review rhythm around canonical Base contracts. */
+export const review = tv({
+  slots: {
+    root: "w-full min-w-0 text-foreground",
+    card: "w-full",
+    identity: "grid min-w-0 gap-[var(--reddb-spatial-gap-sm)]",
+    author: "font-medium text-foreground",
+    time: "text-sm tabular-nums text-ink-muted",
+    content: "grid w-full min-w-0 gap-[var(--reddb-spatial-gap-md)]",
+    body: "min-w-0 text-sm text-foreground",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+  },
+});
+
+export type ReviewVariants = VariantProps<typeof review>;

package/vendor/ds/kits/app/src/composites/settings-row.variants.ts

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+
+/** One Density-responsive composition for field associations and independently named actions. */
+export const settingsRow = tv({
+  slots: {
+    root: "@container/settings-row min-w-0 border-b border-muted py-[var(--reddb-spatial-inset-md)] last:border-b-0",
+    row: "grid min-w-0 gap-[var(--reddb-spatial-layout-gap-sm)] @sm/settings-row:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] @sm/settings-row:items-center",
+    copy: "grid min-w-0 content-start gap-[var(--reddb-spatial-gap-sm)]",
+    label: "m-0 break-words text-body font-medium text-foreground",
+    description: "m-0 break-words text-caption text-ink-muted",
+    control: "min-w-0",
+    end: "grid min-w-0 content-start gap-[var(--reddb-spatial-gap-sm)]",
+    actions: "flex min-w-0 flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)] @sm/settings-row:justify-end",
+    required: "ms-[var(--reddb-spatial-gap-sm)]",
+    error: "m-0 break-words text-caption text-feedback-danger-foreground",
+  },
+});

package/vendor/ds/kits/app/src/composites/shopping-cart.appearance.ts

@@ -0,0 +1,32 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+
+/**
+ * Token-only arrangement around canonical Base form and list contracts. The
+ * Form owns the rhythm between the cart's rows (ADR 0024), so the root adds
+ * none. Each item puts its controls beside its details while they fit and
+ * wraps them below when they do not — a flex-wrap measured against the item's
+ * own width, never the window's (ADR 0021).
+ */
+export const shoppingCart = tv({
+  slots: {
+    root: "w-full min-w-0",
+    heading: "pb-0",
+    list: "m-0 list-none p-0",
+    item: "flex min-w-0 flex-wrap items-end gap-[var(--reddb-spatial-gap-md)]",
+    details: "grid min-w-0 grow basis-[var(--reddb-container-3xs)] gap-[var(--reddb-spatial-gap-md)]",
+    media: "min-w-0 overflow-hidden rounded-md bg-muted",
+    identity: "min-w-0",
+    name: "m-0 font-medium text-foreground",
+    description: "m-0 text-ink-muted",
+    price: "m-0 text-foreground",
+    controls: "flex flex-wrap items-end gap-[var(--reddb-spatial-gap-md)]",
+    itemActions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+    quantity: "w-24",
+    empty: "min-w-0",
+    total: "flex items-center justify-between gap-[var(--reddb-spatial-gap-md)] font-medium",
+    actions: "flex flex-wrap items-center justify-end gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type ShoppingCartVariants = VariantProps<typeof shoppingCart>;