@mohasinac/appkit 4.30.18 → 4.31.0

package/dist/tokens/themes/default-dark.js

@@ -52,8 +52,8 @@ export const DEFAULT_DARK_THEME = {
         "appkit-color-border": "#334155",
         "appkit-color-border-subtle": "rgba(30, 41, 59, 0.6)",
         "appkit-color-text": "#fafafa",
-        "appkit-color-text-muted": "#a1a1aa",
-        "appkit-color-text-faint": "#71717a",
+        "appkit-color-text-muted": "#b4b4bd",
+        "appkit-color-text-faint": "#8b8b94",
         "appkit-color-success": "#34d399",
         "appkit-color-success-surface": "rgba(6, 78, 59, 0.25)",
         "appkit-color-warning": "#fbbf24",

package/dist/tokens/themes/default-light.js

@@ -54,8 +54,8 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-color-border": "#e4e4e7",
         "appkit-color-border-subtle": "#f4f4f5",
         "appkit-color-text": "#18181b",
-        "appkit-color-text-muted": "#71717a",
-        "appkit-color-text-faint": "#87878f",
+        "appkit-color-text-muted": "#5b5b63",
+        "appkit-color-text-faint": "#6f6f78",
         "appkit-color-text-on-primary": "#ffffff",
         "appkit-color-success": "#15803d",
         "appkit-color-success-surface": "#f0fdf4",

package/dist/tokens/tokens.css

@@ -287,8 +287,8 @@
   --appkit-color-border-subtle:    #f4f4f5;    /* zinc-100 */
 
   --appkit-color-text:             #18181b;    /* zinc-900 */
-  --appkit-color-text-muted:       #71717a;    /* zinc-500 */
-  --appkit-color-text-faint:       #87878f;    /* zinc-400 darkened for WCAG AA large-text 3:1 on --appkit-color-bg (audit-a11y) */
+  --appkit-color-text-muted:       #5b5b63;    /* darkened from zinc-500 #71717a — ~7:1 on --appkit-color-bg */
+  --appkit-color-text-faint:       #6f6f78;    /* darkened from #87878f — now clears WCAG AA 4.5:1 for NORMAL text, not just large (audit-a11y) */
   --appkit-color-text-on-primary:  #ffffff;
   --appkit-color-text-on-dark:     #ffffff;
 
@@ -429,8 +429,8 @@
   --appkit-color-border-subtle:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
 
   --appkit-color-text:             #fafafa;    /* zinc-50 */
-  --appkit-color-text-muted:       #a1a1aa;    /* zinc-400 */
-  --appkit-color-text-faint:       #71717a;    /* zinc-500 */
+  --appkit-color-text-muted:       #b4b4bd;    /* lightened from zinc-400 #a1a1aa — ~9:1 on the dark page */
+  --appkit-color-text-faint:       #8b8b94;    /* lightened from zinc-500 #71717a, which was ~3:1 and read as barely present */
 
   --appkit-color-success:          #34d399;    /* emerald-400 */
   --appkit-color-success-surface:  rgba(6, 78, 59, 0.25);
@@ -748,6 +748,26 @@
   --appkit-size-input-md: 2.5rem;   /*  40px */
   --appkit-size-input-lg: 2.75rem;  /*  44px */
 
+  /*
+   * CTA sizing — consumed by ActionRow (appkit/src/ui/components/ActionRow.style.css).
+   *
+   * --appkit-size-action-min is the width below which an action WRAPS to the
+   * next line instead of being squeezed. 7.5rem is fixed from both ends:
+   *   upper — the narrowest supported viewport is 280px; the pinned bottom bar
+   *           spends 12px padding a side plus an 8px gap, leaving 248px for two
+   *           actions, i.e. 124px each. 120px is the largest 8px-grid value that
+   *           still lets a two-action bar share one line there.
+   *   lower — 120px is 2.7x the 44px tap-target minimum and holds ~15 characters
+   *           at 14px, so every CTA string resolves in at most two lines.
+   *
+   * SINGLE_ROW_MAX_ACTIONS in features/layout/BottomActions.tsx is COUPLED to
+   * this value. Raising either without re-checking that
+   * 2 x action-min + gap is under 280px reintroduces device-dependent row
+   * flipping, which the bar's row-count invariant forbids.
+   */
+  --appkit-size-action-min: 7.5rem;    /* 120px */
+  --appkit-size-action-height: 2.5rem; /*  40px — CTA tap target, was a literal h-10 */
+
   /* Avatar sizes */
   --appkit-size-avatar-xs: 1.5rem;  /*  24px */
   --appkit-size-avatar-sm: 2rem;    /*  32px */

package/dist/ui/components/ActionRow.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import type { SurfaceProps } from "./surface-tokens";
+/**
+ * Who absorbs the leftover width.
+ *
+ * The BASIS is content-proportional in all three — only the grow factor
+ * differs. `fill` is for bars and sheets, `end`/`start` for desktop dialog and
+ * editor footers where stretching two buttons across a 32rem dialog would read
+ * as a banner rather than a pair of controls.
+ */
+export type ActionRowAlign = "fill" | "end" | "start";
+type ActionRowGap = "xs" | "sm" | "md" | "lg";
+export interface ActionRowProps extends React.HTMLAttributes<HTMLDivElement>, SurfaceProps {
+    /** Who absorbs the leftover width. Default `"fill"`. */
+    align?: ActionRowAlign;
+    /**
+     * Left-hand meta slot that is NOT an action: a title, a breadcrumb, an
+     * "Add more details →" link, or a lone Discard button.
+     *
+     * Content-sized and shrinkable to nothing, so it may ellipsise where an
+     * action never may. This replaces every `justify-content: space-between`
+     * footer and the `<span />` spacer hack that came with them — with a flat
+     * row, `space-between` across three children opens the gulf BETWEEN the two
+     * buttons instead of between the meta and the pair.
+     */
+    anchor?: React.ReactNode;
+    /** Gap between actions. Default `"sm"` (0.5rem). */
+    gap?: ActionRowGap;
+    children?: React.ReactNode;
+}
+/**
+ * The one layout law for CTA / footer action rows.
+ *
+ * Each action is sized from its own label and only the LEFTOVER is shared out;
+ * labels wrap rather than truncate; a row that cannot fit wraps to the next
+ * line rather than crushing its children. All of that lives in
+ * `ActionRow.style.css` as parent-selector rules, deliberately NOT as Tailwind
+ * classes on the children — see the stylesheet for why.
+ *
+ * 🛑 Callers must not put `flex-1`, `flex-shrink-0`, `basis-*`, `w-*`, `h-*`,
+ * `truncate` or `leading-none` on a child. Both configs set `important: true`,
+ * so any of those beats every rule in the stylesheet and silently reverts that
+ * one row to the old squeezed behaviour with no visible error.
+ *
+ * Not for the bulk-action bar. That is a fixed three-control composite
+ * (count pill | picker | Apply) where the picker is MEANT to eat all the slack
+ * and the pill must stay pill-sized.
+ */
+export declare const ActionRow: React.ForwardRefExoticComponent<ActionRowProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/ui/components/ActionRow.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { buildSurfaceClasses } from "./surface-tokens";
+const ACTION_ROW_GAP_MAP = {
+    xs: "appkit-gap--xs",
+    sm: "appkit-gap--sm",
+    md: "appkit-gap--md",
+    lg: "appkit-gap--lg",
+};
+const ACTION_ROW_ALIGN_MAP = {
+    fill: "",
+    end: "appkit-action-row--end",
+    start: "appkit-action-row--start",
+};
+/**
+ * The one layout law for CTA / footer action rows.
+ *
+ * Each action is sized from its own label and only the LEFTOVER is shared out;
+ * labels wrap rather than truncate; a row that cannot fit wraps to the next
+ * line rather than crushing its children. All of that lives in
+ * `ActionRow.style.css` as parent-selector rules, deliberately NOT as Tailwind
+ * classes on the children — see the stylesheet for why.
+ *
+ * 🛑 Callers must not put `flex-1`, `flex-shrink-0`, `basis-*`, `w-*`, `h-*`,
+ * `truncate` or `leading-none` on a child. Both configs set `important: true`,
+ * so any of those beats every rule in the stylesheet and silently reverts that
+ * one row to the old squeezed behaviour with no visible error.
+ *
+ * Not for the bulk-action bar. That is a fixed three-control composite
+ * (count pill | picker | Apply) where the picker is MEANT to eat all the slack
+ * and the pill must stay pill-sized.
+ */
+export const ActionRow = React.forwardRef(({ className = "", align = "fill", anchor, gap = "sm", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }, ref) => (_jsxs("div", { ref: ref, className: [
+        "appkit-action-row",
+        ACTION_ROW_ALIGN_MAP[align],
+        ACTION_ROW_GAP_MAP[gap],
+        buildSurfaceClasses({
+            surface,
+            padding,
+            paddingX,
+            paddingY,
+            rounded,
+            roundedTop,
+            roundedBottom,
+            border,
+            shadow,
+            overflow,
+        }),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" "), ...props, children: [anchor !== undefined && anchor !== null && (_jsx("div", { className: "appkit-action-row__anchor", children: anchor })), _jsx("div", { className: "appkit-action-row__group", children: children })] })));
+ActionRow.displayName = "ActionRow";

package/dist/ui/components/ActionRow.style.css

@@ -0,0 +1,145 @@
+/*
+ * ActionRow — the single layout law for every CTA / footer action row.
+ *
+ * SIZING: `flex: 1 1 auto`. `flex-basis: auto` resolves against the button's
+ * own max-content width, and only the LEFTOVER is shared out. That is the
+ * whole fix. Tailwind's `flex-1` is `flex: 1 1 0%`, and that ZERO basis throws
+ * the content width away — which is why "Back" and "Continue to payment" came
+ * out the same width regardless of their labels, and why the escape hatch from
+ * that (`grow: false`) had to be a hug that rendered a 44px stub reading "Ba".
+ *
+ * OVERFLOW: the row wraps. Flex line-breaking runs on the hypothetical main
+ * size — the base size clamped by `min-width` — BEFORE any shrinking happens,
+ * so an action that does not fit moves to the next line instead of being
+ * crushed. `--appkit-size-action-min` is the switch that decides when.
+ *
+ * TRUNCATION: none, anywhere. A label that cannot fit its line wraps and the
+ * button grows taller. Every height here is therefore `min-height`, never
+ * `height`, and no descendant may carry `truncate` / `leading-none`.
+ *
+ * WHY A STYLESHEET AND NOT TAILWIND CLASSES ON THE CHILDREN: all sizing lands
+ * via `.appkit-action-row__group > *`, a rule on the PARENT's selector. Putting
+ * a bare `flex` / `block` / `hidden` utility on a `<Button>` breaks its own
+ * flex contract, because the consumer's globals.css declares those three
+ * un-layered and `!important` — Recurrent Root Cause #68, which collapsed
+ * twelve image-tile buttons to 0x0.
+ *
+ * NOT FOR: BulkActionBar, and the bulk row inside BottomActions. Those are a
+ * fixed three-control composite — count pill | picker | Apply — where the
+ * picker is MEANT to eat all the slack and the pill must stay pill-sized.
+ * Content-proportional sizing there would let a long selected-action label
+ * push Apply off the line.
+ */
+
+.appkit-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  /* gap comes from the .appkit-gap--* class the component applies */
+}
+
+/*
+ * The inner group is load-bearing, not decoration. With a flat row, a footer
+ * that wants "meta left, buttons right" reaches for `space-between` — and with
+ * three children that opens the gulf BETWEEN the two buttons. Nesting keeps the
+ * outer row at exactly two items so the split is clean, and lets the group
+ * carry the alignment of the actions among themselves.
+ */
+.appkit-action-row__group {
+  display: flex;
+  flex-wrap: wrap;
+  /* Equal heights when one action wraps to two lines and its neighbour does
+     not — ragged button heights in one row read as broken. */
+  align-items: stretch;
+  gap: inherit;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* --- the actions ---------------------------------------------------------- */
+
+.appkit-action-row__group > * {
+  flex: 1 1 auto;
+  /*
+   * The wrap threshold. `min()` with 100% so a panel narrower than the floor
+   * degrades to one action per line instead of overflowing its own container.
+   */
+  min-width: min(var(--appkit-size-action-min), 100%);
+  min-height: var(--appkit-size-action-height);
+  /* Beats any fixed height inherited from a button size variant, so a wrapped
+     second line can actually grow the box. */
+  height: auto;
+  white-space: normal;
+  text-align: center;
+  /*
+   * `.appkit-button` declares `line-height: 1`, which collides two wrapped
+   * lines into one smear. This selector is (0,2,0) and beats its (0,1,0).
+   */
+  line-height: 1.25;
+}
+
+/*
+ * A non-button action — a bare TextLink or a Text — has no intrinsic button
+ * height. Don't stretch it into a 40px block; centre it against the buttons.
+ */
+.appkit-action-row__group > *:not(.appkit-button) {
+  align-self: center;
+  min-height: 0;
+}
+
+/*
+ * Icon-only actions stay square tap targets. The caller opts in, because a
+ * stylesheet cannot know a child has no label.
+ */
+.appkit-action-row__group > .appkit-action-row__icon-only {
+  flex: 0 0 var(--appkit-size-input-lg);
+  min-width: var(--appkit-size-input-lg);
+  padding-inline: 0;
+}
+
+/* --- alignment ------------------------------------------------------------ */
+
+/* `fill` is the base rule above: the actions absorb the leftover. */
+
+.appkit-action-row--end > .appkit-action-row__group {
+  justify-content: flex-end;
+}
+.appkit-action-row--start > .appkit-action-row__group {
+  justify-content: flex-start;
+}
+
+/* Same content-proportional basis; the free space simply isn't handed out. */
+.appkit-action-row--end > .appkit-action-row__group > *,
+.appkit-action-row--start > .appkit-action-row__group > * {
+  flex-grow: 0;
+}
+
+/* --- the anchor ----------------------------------------------------------- */
+
+.appkit-action-row > .appkit-action-row__anchor {
+  flex: 0 1 auto;
+  /* Deliberately NOT the action floor — meta text may ellipsise, an action
+     may not. */
+  min-width: 0;
+  align-self: center;
+}
+
+/* --- narrow collapse ------------------------------------------------------ */
+/*
+ * Below 30rem there is no leftover worth leaving empty: a right-packed footer
+ * at 360px is a ragged clump against the edge. Every alignment becomes `fill`,
+ * which is what the pinned bottom bar already does at every width, and the
+ * anchor takes its own line above the actions.
+ */
+@media (max-width: 30rem) {
+  .appkit-action-row > .appkit-action-row__anchor {
+    flex-basis: 100%;
+  }
+  .appkit-action-row > .appkit-action-row__group {
+    justify-content: flex-start;
+  }
+  .appkit-action-row > .appkit-action-row__group > * {
+    flex-grow: 1;
+  }
+}

package/dist/ui/components/Drawer.d.ts

@@ -10,6 +10,16 @@ export interface DrawerProps {
     onClose: () => void;
     title?: string;
     children: React.ReactNode;
+    /**
+     * Action buttons for the drawer's footer. Pass them bare — the slot supplies
+     * the row itself via `<ActionRow>`, so each button is sized from its own
+     * label and the group wraps rather than overflowing.
+     *
+     * 🛑 Do not wrap them in your own flex container or put `flex-1` on them:
+     * `important: true` makes a caller's utility beat ActionRow's CSS. The slot
+     * used to be a padding-only block, which silently gave inline-flow layout and
+     * made every caller invent its own row.
+     */
     footer?: React.ReactNode;
     side?: "left" | "right" | "bottom";
     /** Width for left/right drawers. Default: 'md' */

package/dist/ui/components/Drawer.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { Heading } from "./Typography";
 import { Button } from "./Button";
+import { ActionRow } from "./ActionRow";
 import { useHandMode } from "../../_internal/client/hand-mode";
 const SIDE_TRANSLATE = {
     left: {
@@ -70,5 +71,5 @@ export function Drawer({ isOpen, onClose, title, children, footer, side, size =
                         : `${SIDE_SIZE[size]} appkit-drawer__panel--full-height`,
                     isOpen ? open : closed,
                     className,
-                ].join(" "), "data-section": "drawer-div-481", children: [isBottom && (_jsx("div", { className: "appkit-drawer__drag-wrap", "data-section": "drawer-div-482", children: _jsx("div", { className: "appkit-drawer__drag", "aria-hidden": "true" }) })), (title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-drawer__header flex-row-reverse" : "appkit-drawer__header", "data-section": "drawer-div-483", children: [title && (_jsx(Heading, { level: 2, className: "appkit-drawer__title", children: title })), showCloseButton && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-drawer__close", "aria-label": "Close", children: _jsx(X, { className: "appkit-drawer__close-icon" }) }))] })), _jsx("div", { className: "appkit-drawer__body", "data-section": "drawer-div-484", children: children }), footer && _jsx("div", { className: "appkit-drawer__footer", "data-section": "drawer-div-485", children: footer })] })] }), document.body);
+                ].join(" "), "data-section": "drawer-div-481", children: [isBottom && (_jsx("div", { className: "appkit-drawer__drag-wrap", "data-section": "drawer-div-482", children: _jsx("div", { className: "appkit-drawer__drag", "aria-hidden": "true" }) })), (title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-drawer__header flex-row-reverse" : "appkit-drawer__header", "data-section": "drawer-div-483", children: [title && (_jsx(Heading, { level: 2, className: "appkit-drawer__title", children: title })), showCloseButton && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-drawer__close", "aria-label": "Close", children: _jsx(X, { className: "appkit-drawer__close-icon" }) }))] })), _jsx("div", { className: "appkit-drawer__body", "data-section": "drawer-div-484", children: children }), footer && (_jsx("div", { className: "appkit-drawer__footer", "data-section": "drawer-div-485", children: _jsx(ActionRow, { children: footer }) }))] })] }), document.body);
 }

package/dist/ui/components/FilterDrawer.js

@@ -34,7 +34,10 @@ export function FilterDrawer({ children, title = "Filters", open, onOpen, onClos
                         handleOpen();
                 }, className: ["appkit-filter-drawer__trigger", triggerClassName]
                     .filter(Boolean)
-                    .join(" "), "aria-label": triggerLabel, children: [_jsx(Span, { children: triggerLabel }), activeCount > 0 ? (_jsx(Span, { className: "appkit-filter-drawer__badge", children: activeCount })) : null] })) : null, _jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, side: side, size: size, className: "appkit-drawer__panel--filter", footer: _jsxs("div", { className: "appkit-filter-drawer__footer", "data-section": "filterdrawer-div-494", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onReset, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: handleApply, children: pendingCount != null && pendingCount > 0
+                    .join(" "), "aria-label": triggerLabel, children: [_jsx(Span, { children: triggerLabel }), activeCount > 0 ? (_jsx(Span, { className: "appkit-filter-drawer__badge", children: activeCount })) : null] })) : null, _jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, side: side, size: size, className: "appkit-drawer__panel--filter", footer: 
+                /* Bare buttons — the Drawer's footer slot supplies the ActionRow.
+                   The old `__footer` wrapper existed only to hand-roll a flex row. */
+                _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onReset, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: handleApply, children: pendingCount != null && pendingCount > 0
                                 ? `Apply (${pendingCount})`
                                 : "Apply" })] }), children: _jsxs("div", { className: [
                         "appkit-filter-drawer__body",

package/dist/ui/components/FilterDrawer.style.css

@@ -35,18 +35,12 @@
   color: var(--appkit-color-text-on-primary);
 }
 
-.appkit-filter-drawer__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  border-top: 1px solid var(--appkit-color-border);
-  padding: 0.75rem 1rem;
-}
-
-:is(.dark) .appkit-filter-drawer__footer {
-  border-top-color: var(--appkit-color-border);
-}
+/*
+ * `.appkit-filter-drawer__footer` was deleted. Its border and padding are
+ * already supplied by `.appkit-drawer__footer` (the slot it rendered inside),
+ * and its flex rules are now ActionRow's job — the wrapper existed only to
+ * hand-roll a row the slot should always have provided.
+ */
 
 .appkit-filter-drawer__body {
   & > * + * {

package/dist/ui/components/FormActionBar.js

@@ -2,8 +2,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ChevronRight } from "lucide-react";
+import { ActionRow } from "./ActionRow";
 import { Button } from "./Button";
 import { TextLink } from "./TextLink";
 export function FormActionBar({ title, breadcrumbs, onSaveDraft, onPublish, publishLabel = "Publish", onPreview, onDiscard, isDirty, isSubmitting, className, }) {
-    return (_jsxs("div", { className: `appkit-form-action-bar${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "appkit-form-action-bar__meta", children: [breadcrumbs && breadcrumbs.length > 0 && (_jsx("div", { className: "appkit-form-action-bar__breadcrumbs", children: breadcrumbs.map((crumb, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }), crumb.href ? (_jsx(TextLink, { href: crumb.href, variant: "inherit", truncate: true, children: crumb.label })) : (_jsx("span", { className: "truncate", children: crumb.label }))] }, i))) })), title && (_jsxs("div", { className: "appkit-form-action-bar__title", children: [isDirty && (_jsx("span", { className: "appkit-form-action-bar__dirty-dot mr-1.5", "aria-label": "Unsaved changes" })), title] }))] }), _jsxs("div", { className: "appkit-form-action-bar__actions", children: [isDirty && onDiscard && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSubmitting, children: "Discard" })), onPreview && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onPreview, disabled: isSubmitting, children: "Preview" })), onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: "Save draft" })), _jsx(Button, { type: "button", size: "sm", onClick: onPublish, isLoading: isSubmitting, disabled: isSubmitting, children: publishLabel })] })] }));
+    return (
+    /*
+     * Up to four actions live here (Discard / Preview / Save draft / Publish),
+     * and every one of them used to be `flex-shrink: 0` inside a non-wrapping
+     * row — so on a narrow viewport the group simply overflowed the bar. As an
+     * ActionRow they wrap instead.
+     *
+     * `align="end"` keeps the desktop look: an editor bar spans the full page
+     * width, and stretching four buttons across it would read as a toolbar of
+     * banners. The title/breadcrumb block is the `anchor`, which is what lets
+     * it shrink and ellipsise while the actions never do.
+     */
+    _jsxs(ActionRow, { align: "end", gap: "sm", className: `appkit-form-action-bar${className ? ` ${className}` : ""}`, anchor: _jsxs("div", { className: "appkit-form-action-bar__meta", children: [breadcrumbs && breadcrumbs.length > 0 && (_jsx("div", { className: "appkit-form-action-bar__breadcrumbs", children: breadcrumbs.map((crumb, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }), crumb.href ? (_jsx(TextLink, { href: crumb.href, variant: "inherit", truncate: true, children: crumb.label })) : (_jsx("span", { className: "truncate", children: crumb.label }))] }, i))) })), title && (_jsxs("div", { className: "appkit-form-action-bar__title", children: [isDirty && (_jsx("span", { className: "appkit-form-action-bar__dirty-dot mr-1.5", "aria-label": "Unsaved changes" })), title] }))] }), children: [isDirty && onDiscard && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSubmitting, children: "Discard" })), onPreview && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onPreview, disabled: isSubmitting, children: "Preview" })), onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: "Save draft" })), _jsx(Button, { type: "button", size: "sm", onClick: onPublish, isLoading: isSubmitting, disabled: isSubmitting, children: publishLabel })] }));
 }

package/dist/ui/components/FormActionBar.style.css

@@ -1,13 +1,16 @@
 /* FormActionBar — sticky editor action bar, bottom on mobile / top on desktop */
 
+/*
+ * Chrome only — sticky positioning, background, padding. The row layout itself
+ * (`display: flex`, `justify-content`, `gap`) moved to ActionRow: this bar can
+ * hold four actions, and as a non-wrapping `flex-shrink: 0` group they used to
+ * overflow the bar on a narrow viewport. Do not re-add flex rules here; they
+ * would fight the ActionRow this class now decorates.
+ */
 .appkit-form-action-bar {
   position: sticky;
   bottom: var(--bottom-nav-height, 0px);
   z-index: var(--appkit-z-raised);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
   border-top: 1px solid var(--appkit-color-border);
   background: var(--appkit-color-surface);
   backdrop-filter: blur(8px);
@@ -73,10 +76,8 @@
 }
 
 /* ── Right: action buttons ───────────────────────────────────────────────── */
-
-.appkit-form-action-bar__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
+/*
+ * `.appkit-form-action-bar__actions` was deleted. Its `flex-shrink: 0` on a
+ * non-wrapping row is precisely what let four buttons overflow the bar; the
+ * group is now ActionRow's `__group`, which wraps.
+ */

package/dist/ui/components/ListingLayout.js

@@ -115,7 +115,14 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                 bottomChromeSlot &&
                 createPortal(_jsx(Nav, { "aria-label": "Pagination", className: "appkit-listing-layout__mobile-pagination", children: toolbarPaginationSlot }), bottomChromeSlot), hasFilter && (_jsx(Drawer, { isOpen: mobileFilterOpen, onClose: () => setMobileFilterOpen(false), side: "bottom", title: filterActiveCount > 0
                     ? `${panelTitle} (${filterActiveCount})`
-                    : panelTitle, footer: _jsxs(Div, { className: "appkit-listing-layout__mobile-overlay-footer", children: [_jsx(Button, { type: "button", variant: "secondary", className: "flex-1 rounded-xl", onClick: () => onFilterClear?.(), children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl", onClick: handleMobileApply, children: filterPendingCount != null && filterPendingCount > 0
+                    : panelTitle, footer: 
+                /* Bare buttons: the Drawer's footer slot supplies the ActionRow.
+                   🛑 `flex-1` used to be on both of these, and under
+                   `important: true` it beats ActionRow's content-proportional
+                   basis — so this was the one row where the fix would have been
+                   silently defeated. Only `rounded-xl` (a shape, not a width)
+                   stays. */
+                _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "secondary", className: "rounded-xl", onClick: () => onFilterClear?.(), children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "rounded-xl", onClick: handleMobileApply, children: filterPendingCount != null && filterPendingCount > 0
                                 ? `${l.applyFilters} (${filterPendingCount})`
                                 : l.applyFilters })] }), children: filterContent })), overlays] }));
 }

package/dist/ui/components/ListingLayout.style.css

@@ -463,19 +463,12 @@
   gap: 1rem;
 }
 
-.appkit-listing-layout__mobile-overlay-footer {
-  flex-shrink: 0;
-  display: flex;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-top: 1px solid var(--appkit-color-zinc-100);
-  background: var(--appkit-color-surface);
-}
-
-.dark .appkit-listing-layout__mobile-overlay-footer {
-  border-top-color: var(--appkit-color-slate-800);
-  background: var(--appkit-color-bg);
-}
+/*
+ * `.appkit-listing-layout__mobile-overlay-footer` was deleted: the mobile
+ * filter panel is a `<Drawer>`, whose footer slot now supplies both the chrome
+ * (`.appkit-drawer__footer`) and the action layout (`<ActionRow>`). The class
+ * existed only to hand-roll a flex row the slot should always have provided.
+ */
 
 /* -- Close button in mobile overlay ----------------- */
 

package/dist/ui/components/Modal.d.ts

@@ -11,7 +11,21 @@ export interface ModalProps {
     className?: string;
 }
 export declare function Modal({ isOpen, open, onClose, title, children, size, showCloseButton, actions, className, }: ModalProps): React.ReactPortal | null;
-export declare function ModalFooter({ children, className, }: {
+/**
+ * A dialog's action row.
+ *
+ * `align="end"` on purpose: a dialog is at most 32rem wide, and stretching
+ * Cancel/Confirm across it reads as a banner rather than a pair of controls.
+ * The buttons are still sized from their own labels — they simply don't take
+ * the leftover — and ActionRow's own narrow breakpoint collapses this to
+ * full-width below 30rem, where a right-packed clump would read badly.
+ *
+ * `anchor` is available for a footer that needs meta on the left (a link, a
+ * count). Use it instead of reintroducing `justify-between`, which with three
+ * children opens the gulf BETWEEN the two buttons rather than beside them.
+ */
+export declare function ModalFooter({ children, anchor, className, }: {
     children: React.ReactNode;
+    anchor?: React.ReactNode;
     className?: string;
 }): React.JSX.Element;

package/dist/ui/components/Modal.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Heading } from "./Typography";
 import { Button } from "./Button";
+import { ActionRow } from "./ActionRow";
 import { SPRING_GENTLE } from "../../tokens/motion";
 import { useHandMode } from "../../_internal/client/hand-mode";
 import { OverlayContext } from "./overlay-context";
@@ -74,9 +75,22 @@ export function Modal({ isOpen, open, onClose, title, children, size = "md", sho
                             .filter(Boolean)
                             .join(" "), initial: reduced ? false : { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 8 }, transition: SPRING_GENTLE, "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-modal__header flex-row-reverse" : "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] })) }) }), document.body);
 }
-export function ModalFooter({ children, className = "", }) {
-    return (_jsx("div", { className: [
-            "flex items-center justify-end gap-3 border-t px-6 py-4 border-[var(--appkit-color-border-subtle)]",
+/**
+ * A dialog's action row.
+ *
+ * `align="end"` on purpose: a dialog is at most 32rem wide, and stretching
+ * Cancel/Confirm across it reads as a banner rather than a pair of controls.
+ * The buttons are still sized from their own labels — they simply don't take
+ * the leftover — and ActionRow's own narrow breakpoint collapses this to
+ * full-width below 30rem, where a right-packed clump would read badly.
+ *
+ * `anchor` is available for a footer that needs meta on the left (a link, a
+ * count). Use it instead of reintroducing `justify-between`, which with three
+ * children opens the gulf BETWEEN the two buttons rather than beside them.
+ */
+export function ModalFooter({ children, anchor, className = "", }) {
+    return (_jsx(ActionRow, { align: "end", gap: "md", anchor: anchor, className: [
+            "border-t px-6 py-4 border-[var(--appkit-color-border-subtle)]",
             className,
         ]
             .filter(Boolean)

package/dist/ui/components/QuickCreateModal.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { createPortal } from "react-dom";
+import { ActionRow } from "./ActionRow";
 import { Button } from "./Button";
 import { Div } from "./Div";
 import { Heading } from "./Typography";
-import { Row } from "./Layout";
 import { TextLink } from "./TextLink";
 export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, children, fullPageHref, saveLabel = "Save", cancelLabel = "Cancel", isSaving = false, saveDisabled = false, }) {
     const [busy, setBusy] = React.useState(false);
@@ -45,5 +45,5 @@ export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, chi
     if (!isOpen || typeof document === "undefined")
         return null;
     const saving = busy || isSaving;
-    return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(Div, { className: "appkit-quick-create-modal__footer", children: [fullPageHref ? (_jsx(TextLink, { variant: "none", href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : (_jsx("span", {})), _jsxs(Row, { className: "appkit-quick-create-modal__actions", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] })] }), document.body);
+    return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(ActionRow, { align: "end", gap: "md", className: "appkit-quick-create-modal__footer", anchor: fullPageHref ? (_jsx(TextLink, { variant: "none", href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : undefined, children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] }), document.body);
 }