@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/form-actions.d.ts

@@ -1,100 +1,280 @@
-import 'react';
-import 'lucide-react';
-export { cC as DEFAULT_FORM_ACTIONS_LABELS, dt as FormActions, du as FormActionsAlign, dv as FormActionsDestructive, dw as FormActionsLabels, dx as FormActionsPlacement, dy as FormActionsProps, dz as FormActionsStack, dA as FormActionsStickyWithin, dB as FormActionsSubmitProps, dC as FormActionsSubmitShortcut, eJ as ResponsiveFormActionsPlacement } from '../delete-account-setting-DiPX4Vue.js';
-import './write-lock.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import './field-parts.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import type { LucideIcon } from "lucide-react";
+import { type ButtonProps } from "./button.js";
+import type { ButtonSize, ButtonVariant } from "./button-look.js";
+import type { CommitScope } from "./write-lock.js";
+import { DEFAULT_FORM_ACTIONS_LABELS } from "./form-actions-labels.js";
+/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */
+export interface FormActionsLabels {
+    save: string;
+    cancel: string;
+    /**
+     * The {@link FormActionsProps.submitShortcut} hint beside Save's text, when
+     * {@link FormActionsProps.submitShortcutHint} shows it. `apple` is true on a Mac,
+     * iPhone or iPad, where the key is Cmd: "⌘ Enter" there, "Ctrl+Enter" elsewhere
+     * (a German keyboard says "Strg").
+     */
+    submitShortcut: (apple: boolean) => string;
+}
+export { DEFAULT_FORM_ACTIONS_LABELS };
+/** See {@link FormActionsProps.submitShortcut}. */
+export type FormActionsSubmitShortcut = "mod-enter";
+export type FormActionsAlign = "start" | "center" | "end" | "between";
+/**
+ * Where the row sits:
+ *  - `inline` (default): under the form's last field, `pt-4` above it.
+ *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface
+ *    colour with a rule above, clear of the phone's home indicator — for a long form
+ *    whose Save should not be a scroll away.
+ *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,
+ *    FullBleedDialog's `footer`), which already pads and rules it.
+ */
+export type FormActionsPlacement = "inline" | "sticky" | "dialog";
+/**
+ * When the row's buttons STACK, one per line at the row's full width (0.32,
+ * docs/text-size-harmonization.md §4 "FormActions stack full width on a phone layout"):
+ *
+ *  - `"auto"` (default): on the phone layout (`usePhoneLayout()`, `max-md:` at the text
+ *    size in force) at Large and Extra large. There a phone is 312 or 260 px of text
+ *    wide, and Cancel and a "Save changes" side by side wrap into a ragged pair with
+ *    one 48 px target squeezed against the other. Normal keeps the row the apps tuned.
+ *  - `"phone"`: on the phone layout at every text size.
+ *  - `"never"`: always the row.
+ *
+ * Stacked, the order is the DOM's — the start group (the destructive action), the extra
+ * actions, Cancel, then Save at the bottom, under the thumb — so the visual order and
+ * the tab order stay one.
+ */
+export type FormActionsStack = "auto" | "phone" | "never";
+/**
+ * A placement per breakpoint, mobile first — `{ base: "sticky", md: "inline" }` is a
+ * Save row stuck to the bottom of a phone's long form and in the flow under the last
+ * field from 768px up, where the form fits. The breakpoints are the classes' (sm 640,
+ * md 768, lg 1024, xl 1280px at Normal text size, and 1.25 / 1.5 times that at Large /
+ * Extra large, as `md:` is since 0.32), as `BulkActionBar`'s `variant` breakpoints are, and
+ * resolved the same way, in JS: the sticky row is positioned by inline style, which a
+ * `md:` class cannot reach. keksdose switched `placement` on its own media query at
+ * every long form for want of this. The breakpoints are the VIEWPORT's, not the
+ * container's: a form in a narrow pane on a wide screen resolves to `md`.
+ */
+export interface ResponsiveFormActionsPlacement {
+    base: FormActionsPlacement;
+    sm?: FormActionsPlacement;
+    md?: FormActionsPlacement;
+    lg?: FormActionsPlacement;
+    xl?: FormActionsPlacement;
+}
+/**
+ * What a `sticky` row sticks to — see {@link FormActionsProps.stickyWithin}.
+ *  - `viewport` (default): the page's (or AppShell pane's) bottom edge, lifted onto
+ *    the phone's bottom nav by `--app-nav-h`.
+ *  - `container`: the bottom of whatever scroll container it is in — a dialog body, a
+ *    side pane, a panel with `overflow-y-auto` — at `bottom: 0`, with no nav offset.
+ */
+export type FormActionsStickyWithin = "viewport" | "container";
+/**
+ * Extra attributes for the save button — an `id`, `data-*` hooks for tests or
+ * analytics, an `aria-describedby`. The props FormActions drives itself (type, click,
+ * disabled, variant, form, children, the busy state) are not among them.
+ */
+export type FormActionsSubmitProps = Omit<ButtonProps, "type" | "onClick" | "disabled" | "disabledReason" | "variant" | "form" | "children" | "aria-busy" | "commit"> & {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+/** The start-side action of {@link FormActionsProps.destructive}, as data. */
+export interface FormActionsDestructive {
+    label: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    /** See Button's `disabledReason`. */
+    disabledReason?: ReactNode;
+}
+export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */
+    onCancel?: () => void;
+    /**
+     * Given: the save button is `type="button"` and calls this — for a dialog or a row
+     * that saves from a handler. Omitted: it is `type="submit"` and submits the
+     * enclosing `<form>` (or the one named by {@link form}).
+     */
+    onSubmit?: () => void;
+    /** The save button's text. Default `form.save` from the provider, else "Save". */
+    submitLabel?: ReactNode;
+    /** The cancel button's text. Default `form.cancel` from the provider, else "Cancel". */
+    cancelLabel?: ReactNode;
+    /** The save button's text while `pending` ("Saving…"). Default: `submitLabel`. */
+    pendingLabel?: ReactNode;
+    /**
+     * A Lucide icon before the save button's text. While `pending` the spinner takes
+     * ITS place rather than being added in front of it — an icon written into
+     * `submitLabel` itself stays, so the button would show the spinner AND the glyph,
+     * two statuses side by side (keksdose's crop Apply needed a `pendingLabel` copy of
+     * its text only to drop the check mark).
+     */
+    submitIcon?: LucideIcon;
+    /** Attributes passed through to the save button: `id`, `data-*`, `aria-*`, a
+     *  `className`. See {@link FormActionsSubmitProps}. */
+    submitProps?: FormActionsSubmitProps;
+    /**
+     * The save is running: a spinner in the save button, `aria-busy` on it, and the
+     * button disabled, so a second click cannot send the form twice. Cancel stays
+     * usable. The spinner goes in front of the text, or in place of {@link submitIcon}.
+     */
+    pending?: boolean;
+    /** Disable save for a reason of the form's own (an unbalanced entry). */
+    submitDisabled?: boolean;
+    /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */
+    submitDisabledReason?: ReactNode;
+    /**
+     * Save is a commit: under a locked {@link WriteLockProvider} it is disabled with the
+     * lock's reason (over `submitDisabledReason`), focusable, the reason in its tooltip —
+     * Button's `commit`. The `{ label, onClick }` form of {@link destructive} is a
+     * commit too and is locked with it; Cancel and `children` are not (closing a form
+     * writes nothing). No provider, or an unlocked one: no effect. Default `false`.
+     *
+     * keksdose wrote `submitDisabled={lock.locked || …}` and
+     * `submitDisabledReason={lock.locked ? lock.reason : undefined}` at each form; this is
+     * that pair, read from the provider.
+     *
+     * 0.33: a {@link CommitScope} — `COMMIT_EXCEPT_BILLING` for a form a lapsed plan still
+     * allows (the account's own settings, docs/billing-harmonization.md §12.36).
+     */
+    commit?: CommitScope;
+    /** The save button's variant. Default `brand`; `danger` for a save that destroys
+     *  (kastlan's `destructive` flag on its own FormActions). */
+    submitVariant?: ButtonVariant;
+    /**
+     * The Cancel button's variant. Default `secondary` (the outlined button, as before).
+     * `ghost` for a row where Cancel should step back further than an outline — keksdose
+     * G3: a quiet inline row (a confirm under a table row, a card's own small editor)
+     * whose Cancel was a ghost button before it moved onto FormActions, which drew every
+     * Cancel outlined.
+     */
+    cancelVariant?: ButtonVariant;
+    /**
+     * The size of every button the row draws itself — Save, Cancel and the
+     * `{ label, onClick }` form of {@link destructive}: Button's `size`. Default `md`.
+     * `sm` (12px text, `px-2 py-1`) for a dense row: a confirm inside a table's expansion
+     * row, a toolbar card. keksdose G3: two such rows had small hand-built buttons and lost
+     * them on adopting FormActions, which had no size. At `sm` the spinner and
+     * {@link submitIcon} shrink with the text.
+     *
+     * Your own elements (`children`, an element passed as `destructive`, `start`) are
+     * yours to size — pass them `size="sm"` too. A `size` in {@link submitProps} still
+     * wins for Save, as it always has.
+     */
+    size?: ButtonSize;
+    /**
+     * A destructive action at the START of the row, apart from Save and Cancel — the
+     * "Delete" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger
+     * button, or an element of your own (a {@link DangerConfirm}, say). With it the row
+     * is `between`-aligned unless `align` says otherwise.
+     */
+    destructive?: ReactNode | FormActionsDestructive;
+    /**
+     * Something neutral at the START of the row — a caption ("Last saved 2 min ago",
+     * "Drag the corners to crop"), a "View activity" link. After {@link destructive}
+     * when both are given; like it, makes the row `between`-aligned unless `align` says
+     * otherwise. `children` are for further ACTIONS, beside Cancel.
+     */
+    start?: ReactNode;
+    /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */
+    align?: FormActionsAlign;
+    /** See {@link FormActionsPlacement}, or one per breakpoint — see
+     *  {@link ResponsiveFormActionsPlacement}. Default `inline`. */
+    placement?: FormActionsPlacement | ResponsiveFormActionsPlacement;
+    /**
+     * While the row is `sticky`: pull it out over its container's inline padding by this
+     * much (a CSS length, a number in px) and give the same back as padding — so the
+     * rule above it and its surface run edge to edge, while the buttons stay on the
+     * content's line. Without it a sticky row in a padded card or pane is a strip inset
+     * from both sides, with the content scrolling past it in the gutters (keksdose wrote
+     * `@max-md:-mx-3 @max-md:px-3` by hand). Pass the container's padding (`"0.75rem"`,
+     * `12`, `"var(--pane-px)"`). Applied only while the resolved placement is sticky, so
+     * `placement={{ base: "sticky", md: "inline" }}` bleeds on the phone alone. The margin
+     * is `calc(-1 * X)`; jsdom folds that to `calc(-X)`, so match it loosely in tests.
+     */
+    bleed?: string | number;
+    /**
+     * With `placement="sticky"`: what the row sticks to. Default `viewport`.
+     *
+     * CSS sticky always sticks to the NEAREST scroll container, so the default row
+     * already holds inside a scrolling pane — but it offsets itself by `--app-nav-h`,
+     * which AppShell publishes on the document: inside a pane or a portalled dialog
+     * body on a phone it then floats a nav's height above that container's bottom,
+     * with the content scrolling through the gap. `container` drops that offset.
+     *
+     * What neither value can fix, because it is the layout, not the row:
+     *  - sticky moves only within its PARENT box. Inside a DataTable expansion row the
+     *    parent is the expansion cell, so the row pins to the table's own scroller
+     *    (`overflow-auto`, bounded by `maxBodyHeight`) and only while the cell spans
+     *    that scroller's bottom edge — not to the page.
+     *  - any `overflow` other than `visible`/`clip` between the row and the scroller
+     *    you mean (an `overflow-x-auto` wrapper, an `overflow-hidden` card) becomes the
+     *    scroll container; if THAT box does not scroll, the row never sticks.
+     *  - the offset is resolved against the scroller's content box, so a scroller with
+     *    bottom padding leaves that strip uncovered; give the row a negative `bottom`
+     *    through `style` and the same amount back as padding.
+     */
+    stickyWithin?: FormActionsStickyWithin;
+    /** The `id` of the `<form>` the save button submits, when the row is rendered
+     *  outside it (a dialog's footer slot). */
+    form?: string;
+    /**
+     * A keyboard shortcut that presses Save from anywhere in the form. `"mod-enter"`:
+     * Ctrl+Enter, or Cmd+Enter on a Mac — both are accepted everywhere, as keksdose's
+     * editors always have. keksdose K14 (inputs audit 2026-10-02, S5): its transaction
+     * editor, category editor and create card each wrote this as an `onKeyDown` on a
+     * container, re-stating `!pending && !saveDisabled && !lock.locked` every time, and
+     * the one that forgot the lock let the demo's refused save through from the keyboard.
+     *
+     * What it does is what pressing Save does — the same button is clicked, so a form
+     * submits with its validation and its submitter, and `onSubmit` is called in the
+     * `type="button"` mode — and it does NOTHING while Save could not be pressed:
+     * `pending`, `submitDisabled`, or a `commit` under a locked {@link WriteLockProvider}.
+     *
+     * Scoped to the form Save submits (the `form` prop's, else the enclosing `<form>`):
+     * the chord counts only when the focus is inside it, so two editors on one page each
+     * answer for their own fields. Without a form (an `onSubmit` row in a plain container)
+     * the scope is the nearest `role="dialog"`, else the row's parent element — the
+     * container the row ends.
+     *
+     * Listened for on the document, so it runs AFTER every React handler: a field that
+     * takes Ctrl+Enter for itself calls `preventDefault()` or `stopPropagation()` and
+     * the row stays out of it (keksdose live #202 — the create card's Ctrl+Shift+Enter
+     * must create ONE row; the chord here is exactly Ctrl/Cmd+Enter, never with Shift or
+     * Alt). Not during IME composition, and not on a held key's repeats.
+     *
+     * The save button announces it with `aria-keyshortcuts`; {@link submitShortcutHint}
+     * also shows it.
+     */
+    submitShortcut?: FormActionsSubmitShortcut;
+    /** Show the {@link submitShortcut} beside Save's text ("Ctrl+Enter", "⌘ Enter"; the
+     *  `form.submitShortcut` label), dimmed. Hidden on a touch-only device, which has no
+     *  keyboard to press it on. Default `false`. */
+    submitShortcutHint?: boolean;
+    /** When the buttons stack full width — see {@link FormActionsStack}. Default `auto`:
+     *  on the phone layout at Large and Extra large. */
+    stack?: FormActionsStack;
+    /** Extra actions, placed before Cancel. */
+    children?: ReactNode;
+    /** The row, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
+     *  merged with its own ref, which `submitShortcut` finds its form from. It rode the
+     *  rest props before, after the row's own, and a caller's ref took the shortcut's. */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's
+ * `FormActions`, with the labels from the provider, a pending state and a place for
+ * the destructive action.
+ *
+ * ```tsx
+ * <form onSubmit={form.handleSubmit(save)}>
+ *   …
+ *   <FormActions onCancel={close} pending={mutation.isPending} />
+ * </form>
+ * ```
+ *
+ * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`
+ * so the button's name stays its text; `aria-busy` is what says it is working.
+ */
+export declare function FormActions({ onCancel, onSubmit, submitLabel, cancelLabel, pendingLabel, submitIcon: SubmitIcon, submitProps, pending, submitDisabled, submitDisabledReason, commit, submitVariant, cancelVariant, size, destructive, start: startSlot, align, placement: placementProp, stickyWithin, bleed, form, submitShortcut, submitShortcutHint, stack, children, className, style, ref, ...rest }: FormActionsProps): import("react").JSX.Element;

package/dist/components/form-actions.js

@@ -1,18 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement, useCallback, useEffect, useRef } from "react";
+import { isValidElement, useEffect, useMemo, useRef } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { useBreakpoint, usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { useLargeText } from "../hooks/use-large-text.js";
 import { isApplePlatform } from "../hooks/use-hotkey.js";
-import { Button, Spinner } from "./ui.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+import { mergeRefs } from "./field-parts.js";
 import { useWriteLock } from "./write-lock.js";
-const DEFAULT_FORM_ACTIONS_LABELS = {
-  save: "Save",
-  cancel: "Cancel",
-  submitShortcut: (apple) => apple ? "\u2318 Enter" : "Ctrl+Enter"
-};
+import { DEFAULT_FORM_ACTIONS_LABELS } from "./form-actions-labels.js";
 const BREAKPOINTS = ["xl", "lg", "md", "sm"];
 function useResolvedPlacement(placement) {
   const matches = {
@@ -39,13 +37,9 @@ const ALIGN_CLASS = {
 };
 const PLACEMENT_CLASS = {
   inline: "pt-4",
-  sticky: "sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3",
+  sticky: "sticky bottom-0 z-10 border-t border-subtle bg-surface pt-3",
   dialog: ""
 };
-function assignRef(ref, el) {
-  if (typeof ref === "function") ref(el);
-  else if (ref) ref.current = el;
-}
 function shortcutScope(row, formId) {
   if (!row) return null;
   const named = formId ? row.ownerDocument.getElementById(formId) : null;
@@ -83,6 +77,7 @@ function FormActions({
   children,
   className,
   style,
+  ref,
   ...rest
 }) {
   const phone = usePhoneLayout();
@@ -92,15 +87,10 @@ function FormActions({
   const labels = useKitLabels("form", DEFAULT_FORM_ACTIONS_LABELS);
   const lock = useWriteLock(commit);
   const rootRef = useRef(null);
+  const setRoot = useMemo(() => mergeRefs(rootRef, ref), [ref]);
   const saveRef = useRef(null);
   const callerSaveRef = submitProps?.ref;
-  const setSaveRef = useCallback(
-    (el) => {
-      saveRef.current = el;
-      assignRef(callerSaveRef, el);
-    },
-    [callerSaveRef]
-  );
+  const setSaveRef = useMemo(() => mergeRefs(saveRef, callerSaveRef), [callerSaveRef]);
   const pressed = useRef(false);
   const wasPending = useRef(pending);
   useEffect(() => {
@@ -157,7 +147,7 @@ function FormActions({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: rootRef,
+      ref: setRoot,
       "data-slot": "form-actions",
       "data-placement": placement,
       "data-sticky-within": placement === "sticky" ? stickyWithin : void 0,

package/dist/components/form-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useBreakpoint, usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { isApplePlatform } from \"../hooks/use-hotkey\";\nimport { Button, Spinner, type ButtonProps, type ButtonSize, type ButtonVariant } from \"./ui\";\nimport { useWriteLock } from \"./write-lock\";\nimport type { CommitScope } from \"./write-lock\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n  save: string;\n  cancel: string;\n  /**\n   * The {@link FormActionsProps.submitShortcut} hint beside Save's text, when\n   * {@link FormActionsProps.submitShortcutHint} shows it. `apple` is true on a Mac,\n   * iPhone or iPad, where the key is Cmd: \"⌘ Enter\" there, \"Ctrl+Enter\" elsewhere\n   * (a German keyboard says \"Strg\").\n   */\n  submitShortcut: (apple: boolean) => string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n  save: \"Save\",\n  cancel: \"Cancel\",\n  submitShortcut: (apple) => (apple ? \"⌘ Enter\" : \"Ctrl+Enter\"),\n};\n\n/** See {@link FormActionsProps.submitShortcut}. */\nexport type FormActionsSubmitShortcut = \"mod-enter\";\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n *  - `inline` (default): under the form's last field, `pt-4` above it.\n *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n *    colour with a rule above, clear of the phone's home indicator — for a long form\n *    whose Save should not be a scroll away.\n *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n *    FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/**\n * When the row's buttons STACK, one per line at the row's full width (0.32,\n * docs/text-size-harmonization.md §4 \"FormActions stack full width on a phone layout\"):\n *\n *  - `\"auto\"` (default): on the phone layout (`usePhoneLayout()`, `max-md:` at the text\n *    size in force) at Large and Extra large. There a phone is 312 or 260 px of text\n *    wide, and Cancel and a \"Save changes\" side by side wrap into a ragged pair with\n *    one 48 px target squeezed against the other. Normal keeps the row the apps tuned.\n *  - `\"phone\"`: on the phone layout at every text size.\n *  - `\"never\"`: always the row.\n *\n * Stacked, the order is the DOM's — the start group (the destructive action), the extra\n * actions, Cancel, then Save at the bottom, under the thumb — so the visual order and\n * the tab order stay one.\n */\nexport type FormActionsStack = \"auto\" | \"phone\" | \"never\";\n\n/**\n * A placement per breakpoint, mobile first — `{ base: \"sticky\", md: \"inline\" }` is a\n * Save row stuck to the bottom of a phone's long form and in the flow under the last\n * field from 768px up, where the form fits. The breakpoints are the classes' (sm 640,\n * md 768, lg 1024, xl 1280px at Normal text size, and 1.25 / 1.5 times that at Large /\n * Extra large, as `md:` is since 0.32), as `BulkActionBar`'s `variant` breakpoints are, and\n * resolved the same way, in JS: the sticky row is positioned by inline style, which a\n * `md:` class cannot reach. keksdose switched `placement` on its own media query at\n * every long form for want of this. The breakpoints are the VIEWPORT's, not the\n * container's: a form in a narrow pane on a wide screen resolves to `md`.\n */\nexport interface ResponsiveFormActionsPlacement {\n  base: FormActionsPlacement;\n  sm?: FormActionsPlacement;\n  md?: FormActionsPlacement;\n  lg?: FormActionsPlacement;\n  xl?: FormActionsPlacement;\n}\n\n/** Widest first: the first that matches and names a value wins. Each is the class's own\n *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */\nconst BREAKPOINTS = [\"xl\", \"lg\", \"md\", \"sm\"] as const;\n\n/** The placement in force: the widest breakpoint that matches AND names one, else\n *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a\n *  plain string ignores them. Without `matchMedia` (SSR, tests) none match, so the row\n *  renders its `base`, the phone's. The same resolution as BulkActionBar's variant. */\nfunction useResolvedPlacement(\n  placement: FormActionsPlacement | ResponsiveFormActionsPlacement,\n): FormActionsPlacement {\n  const matches = {\n    xl: useBreakpoint(\"xl\"),\n    lg: useBreakpoint(\"lg\"),\n    md: useBreakpoint(\"md\"),\n    sm: useBreakpoint(\"sm\"),\n  };\n  if (typeof placement === \"string\") return placement;\n  for (const key of BREAKPOINTS) {\n    const p = placement[key];\n    if (matches[key] && p !== undefined) return p;\n  }\n  return placement.base;\n}\n\n/** A CSS length: a number is pixels. */\nfunction cssLength(value: string | number): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * What a `sticky` row sticks to — see {@link FormActionsProps.stickyWithin}.\n *  - `viewport` (default): the page's (or AppShell pane's) bottom edge, lifted onto\n *    the phone's bottom nav by `--app-nav-h`.\n *  - `container`: the bottom of whatever scroll container it is in — a dialog body, a\n *    side pane, a panel with `overflow-y-auto` — at `bottom: 0`, with no nav offset.\n */\nexport type FormActionsStickyWithin = \"viewport\" | \"container\";\n\n/**\n * Extra attributes for the save button — an `id`, `data-*` hooks for tests or\n * analytics, an `aria-describedby`. The props FormActions drives itself (type, click,\n * disabled, variant, form, children, the busy state) are not among them.\n */\nexport type FormActionsSubmitProps = Omit<\n  ButtonProps,\n  \"type\" | \"onClick\" | \"disabled\" | \"disabledReason\" | \"variant\" | \"form\" | \"children\" | \"aria-busy\" | \"commit\"\n> & { [key: `data-${string}`]: string | number | boolean | undefined };\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  /** See Button's `disabledReason`. */\n  disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n  inline: \"pt-4\",\n  sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n  dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n  onCancel?: () => void;\n  /**\n   * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n   * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n   * enclosing `<form>` (or the one named by {@link form}).\n   */\n  onSubmit?: () => void;\n  /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n  submitLabel?: ReactNode;\n  /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n  pendingLabel?: ReactNode;\n  /**\n   * A Lucide icon before the save button's text. While `pending` the spinner takes\n   * ITS place rather than being added in front of it — an icon written into\n   * `submitLabel` itself stays, so the button would show the spinner AND the glyph,\n   * two statuses side by side (keksdose's crop Apply needed a `pendingLabel` copy of\n   * its text only to drop the check mark).\n   */\n  submitIcon?: LucideIcon;\n  /** Attributes passed through to the save button: `id`, `data-*`, `aria-*`, a\n   *  `className`. See {@link FormActionsSubmitProps}. */\n  submitProps?: FormActionsSubmitProps;\n  /**\n   * The save is running: a spinner in the save button, `aria-busy` on it, and the\n   * button disabled, so a second click cannot send the form twice. Cancel stays\n   * usable. The spinner goes in front of the text, or in place of {@link submitIcon}.\n   */\n  pending?: boolean;\n  /** Disable save for a reason of the form's own (an unbalanced entry). */\n  submitDisabled?: boolean;\n  /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n  submitDisabledReason?: ReactNode;\n  /**\n   * Save is a commit: under a locked {@link WriteLockProvider} it is disabled with the\n   * lock's reason (over `submitDisabledReason`), focusable, the reason in its tooltip —\n   * Button's `commit`. The `{ label, onClick }` form of {@link destructive} is a\n   * commit too and is locked with it; Cancel and `children` are not (closing a form\n   * writes nothing). No provider, or an unlocked one: no effect. Default `false`.\n   *\n   * keksdose wrote `submitDisabled={lock.locked || …}` and\n   * `submitDisabledReason={lock.locked ? lock.reason : undefined}` at each form; this is\n   * that pair, read from the provider.\n   *\n   * 0.33: a {@link CommitScope} — `COMMIT_EXCEPT_BILLING` for a form a lapsed plan still\n   * allows (the account's own settings, docs/billing-harmonization.md §12.36).\n   */\n  commit?: CommitScope;\n  /** The save button's variant. Default `brand`; `danger` for a save that destroys\n   *  (kastlan's `destructive` flag on its own FormActions). */\n  submitVariant?: ButtonVariant;\n  /**\n   * The Cancel button's variant. Default `secondary` (the outlined button, as before).\n   * `ghost` for a row where Cancel should step back further than an outline — keksdose\n   * G3: a quiet inline row (a confirm under a table row, a card's own small editor)\n   * whose Cancel was a ghost button before it moved onto FormActions, which drew every\n   * Cancel outlined.\n   */\n  cancelVariant?: ButtonVariant;\n  /**\n   * The size of every button the row draws itself — Save, Cancel and the\n   * `{ label, onClick }` form of {@link destructive}: Button's `size`. Default `md`.\n   * `sm` (12px text, `px-2 py-1`) for a dense row: a confirm inside a table's expansion\n   * row, a toolbar card. keksdose G3: two such rows had small hand-built buttons and lost\n   * them on adopting FormActions, which had no size. At `sm` the spinner and\n   * {@link submitIcon} shrink with the text.\n   *\n   * Your own elements (`children`, an element passed as `destructive`, `start`) are\n   * yours to size — pass them `size=\"sm\"` too. A `size` in {@link submitProps} still\n   * wins for Save, as it always has.\n   */\n  size?: ButtonSize;\n  /**\n   * A destructive action at the START of the row, apart from Save and Cancel — the\n   * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n   * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n   * is `between`-aligned unless `align` says otherwise.\n   */\n  destructive?: ReactNode | FormActionsDestructive;\n  /**\n   * Something neutral at the START of the row — a caption (\"Last saved 2 min ago\",\n   * \"Drag the corners to crop\"), a \"View activity\" link. After {@link destructive}\n   * when both are given; like it, makes the row `between`-aligned unless `align` says\n   * otherwise. `children` are for further ACTIONS, beside Cancel.\n   */\n  start?: ReactNode;\n  /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n  align?: FormActionsAlign;\n  /** See {@link FormActionsPlacement}, or one per breakpoint — see\n   *  {@link ResponsiveFormActionsPlacement}. Default `inline`. */\n  placement?: FormActionsPlacement | ResponsiveFormActionsPlacement;\n  /**\n   * While the row is `sticky`: pull it out over its container's inline padding by this\n   * much (a CSS length, a number in px) and give the same back as padding — so the\n   * rule above it and its surface run edge to edge, while the buttons stay on the\n   * content's line. Without it a sticky row in a padded card or pane is a strip inset\n   * from both sides, with the content scrolling past it in the gutters (keksdose wrote\n   * `@max-md:-mx-3 @max-md:px-3` by hand). Pass the container's padding (`\"0.75rem\"`,\n   * `12`, `\"var(--pane-px)\"`). Applied only while the resolved placement is sticky, so\n   * `placement={{ base: \"sticky\", md: \"inline\" }}` bleeds on the phone alone. The margin\n   * is `calc(-1 * X)`; jsdom folds that to `calc(-X)`, so match it loosely in tests.\n   */\n  bleed?: string | number;\n  /**\n   * With `placement=\"sticky\"`: what the row sticks to. Default `viewport`.\n   *\n   * CSS sticky always sticks to the NEAREST scroll container, so the default row\n   * already holds inside a scrolling pane — but it offsets itself by `--app-nav-h`,\n   * which AppShell publishes on the document: inside a pane or a portalled dialog\n   * body on a phone it then floats a nav's height above that container's bottom,\n   * with the content scrolling through the gap. `container` drops that offset.\n   *\n   * What neither value can fix, because it is the layout, not the row:\n   *  - sticky moves only within its PARENT box. Inside a DataTable expansion row the\n   *    parent is the expansion cell, so the row pins to the table's own scroller\n   *    (`overflow-auto`, bounded by `maxBodyHeight`) and only while the cell spans\n   *    that scroller's bottom edge — not to the page.\n   *  - any `overflow` other than `visible`/`clip` between the row and the scroller\n   *    you mean (an `overflow-x-auto` wrapper, an `overflow-hidden` card) becomes the\n   *    scroll container; if THAT box does not scroll, the row never sticks.\n   *  - the offset is resolved against the scroller's content box, so a scroller with\n   *    bottom padding leaves that strip uncovered; give the row a negative `bottom`\n   *    through `style` and the same amount back as padding.\n   */\n  stickyWithin?: FormActionsStickyWithin;\n  /** The `id` of the `<form>` the save button submits, when the row is rendered\n   *  outside it (a dialog's footer slot). */\n  form?: string;\n  /**\n   * A keyboard shortcut that presses Save from anywhere in the form. `\"mod-enter\"`:\n   * Ctrl+Enter, or Cmd+Enter on a Mac — both are accepted everywhere, as keksdose's\n   * editors always have. keksdose K14 (inputs audit 2026-10-02, S5): its transaction\n   * editor, category editor and create card each wrote this as an `onKeyDown` on a\n   * container, re-stating `!pending && !saveDisabled && !lock.locked` every time, and\n   * the one that forgot the lock let the demo's refused save through from the keyboard.\n   *\n   * What it does is what pressing Save does — the same button is clicked, so a form\n   * submits with its validation and its submitter, and `onSubmit` is called in the\n   * `type=\"button\"` mode — and it does NOTHING while Save could not be pressed:\n   * `pending`, `submitDisabled`, or a `commit` under a locked {@link WriteLockProvider}.\n   *\n   * Scoped to the form Save submits (the `form` prop's, else the enclosing `<form>`):\n   * the chord counts only when the focus is inside it, so two editors on one page each\n   * answer for their own fields. Without a form (an `onSubmit` row in a plain container)\n   * the scope is the nearest `role=\"dialog\"`, else the row's parent element — the\n   * container the row ends.\n   *\n   * Listened for on the document, so it runs AFTER every React handler: a field that\n   * takes Ctrl+Enter for itself calls `preventDefault()` or `stopPropagation()` and\n   * the row stays out of it (keksdose live #202 — the create card's Ctrl+Shift+Enter\n   * must create ONE row; the chord here is exactly Ctrl/Cmd+Enter, never with Shift or\n   * Alt). Not during IME composition, and not on a held key's repeats.\n   *\n   * The save button announces it with `aria-keyshortcuts`; {@link submitShortcutHint}\n   * also shows it.\n   */\n  submitShortcut?: FormActionsSubmitShortcut;\n  /** Show the {@link submitShortcut} beside Save's text (\"Ctrl+Enter\", \"⌘ Enter\"; the\n   *  `form.submitShortcut` label), dimmed. Hidden on a touch-only device, which has no\n   *  keyboard to press it on. Default `false`. */\n  submitShortcutHint?: boolean;\n  /** When the buttons stack full width — see {@link FormActionsStack}. Default `auto`:\n   *  on the phone layout at Large and Extra large. */\n  stack?: FormActionsStack;\n  /** Extra actions, placed before Cancel. */\n  children?: ReactNode;\n}\n\n/** Hand `el` to a caller's ref, whichever kind it is. */\nfunction assignRef<E>(ref: Ref<E> | undefined, el: E | null): void {\n  if (typeof ref === \"function\") ref(el);\n  else if (ref) (ref as { current: E | null }).current = el;\n}\n\n/**\n * Where {@link FormActionsProps.submitShortcut} listens: the form Save submits (named\n * by `formId`, else the enclosing one), else the nearest dialog, else the row's parent.\n */\nfunction shortcutScope(row: HTMLElement | null, formId: string | undefined): Element | null {\n  if (!row) return null;\n  const named = formId ? row.ownerDocument.getElementById(formId) : null;\n  if (named instanceof HTMLFormElement) return named;\n  return row.closest(\"form\") ?? row.closest('[role=\"dialog\"]') ?? row.parentElement;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n  return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n *   …\n *   <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n  onCancel,\n  onSubmit,\n  submitLabel,\n  cancelLabel,\n  pendingLabel,\n  submitIcon: SubmitIcon,\n  submitProps,\n  pending = false,\n  submitDisabled = false,\n  submitDisabledReason,\n  commit = false,\n  submitVariant = \"brand\",\n  cancelVariant = \"secondary\",\n  size = \"md\",\n  destructive,\n  start: startSlot,\n  align,\n  placement: placementProp = \"inline\",\n  stickyWithin = \"viewport\",\n  bleed,\n  form,\n  submitShortcut,\n  submitShortcutHint = false,\n  stack = \"auto\",\n  children,\n  className,\n  style,\n  ...rest\n}: FormActionsProps) {\n  const phone = usePhoneLayout();\n  const large = useLargeText();\n  const stacked = stack !== \"never\" && phone && (stack === \"phone\" || large);\n  // Stacked, a button fills its line — also inside the reason line's wrapper, which the\n  // column stretches but which keeps its control at the control's own width.\n  const full = stacked ? \"w-full\" : undefined;\n  const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n  // The lock as Save sees it: with its scope, so a billing lock leaves a\n  // `COMMIT_EXCEPT_BILLING` form's shortcut live too.\n  const lock = useWriteLock(commit);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const saveRef = useRef<HTMLButtonElement | null>(null);\n  // The caller's own `submitProps.ref` still gets the element.\n  const callerSaveRef = submitProps?.ref;\n  const setSaveRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      saveRef.current = el;\n      assignRef(callerSaveRef, el);\n    },\n    [callerSaveRef],\n  );\n  // The save settled and the form is still here — it failed, and the user retries. The\n  // button was natively disabled while it ran, and a focused button that turns disabled\n  // drops the focus to <body> (DangerConfirm's 0.24 fix, keksdose). Only after a press\n  // of THIS button (`pressed`: a click or the shortcut), so a `pending` that comes and\n  // goes on its own never pulls the page's focus in.\n  const pressed = useRef(false);\n  const wasPending = useRef(pending);\n  useEffect(() => {\n    const settled = wasPending.current && !pending;\n    wasPending.current = pending;\n    if (!settled) return;\n    const ours = pressed.current;\n    pressed.current = false;\n    if (!ours) return;\n    if (document.activeElement === null || document.activeElement === document.body) saveRef.current?.focus();\n  }, [pending]);\n  // Read by the shortcut's listener at the moment of the key press, so the listener\n  // itself is attached once and never sees a stale `pending`.\n  const canSave = !pending && !submitDisabled && !lock.locked;\n  const canSaveRef = useRef(canSave);\n  useEffect(() => {\n    canSaveRef.current = canSave;\n  });\n  useEffect(() => {\n    if (submitShortcut !== \"mod-enter\") return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Enter\" || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;\n      if (e.repeat || e.isComposing || e.defaultPrevented || !canSaveRef.current) return;\n      const scope = shortcutScope(rootRef.current, form);\n      if (!scope || !(e.target instanceof Node) || !scope.contains(e.target)) return;\n      e.preventDefault();\n      saveRef.current?.click();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [submitShortcut, form]);\n  const apple = submitShortcut ? isApplePlatform() : false;\n  const placement = useResolvedPlacement(placementProp);\n  const bleedLength = bleed === undefined || bleed === \"\" ? undefined : cssLength(bleed);\n  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n  const hasStart = startSlot !== undefined && startSlot !== null && startSlot !== false;\n  const justify = align ?? (hasDestructive || hasStart ? \"between\" : \"end\");\n  const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      tone=\"danger\"\n      size={size}\n      onClick={destructive.onClick}\n      disabled={destructive.disabled}\n      disabledReason={destructive.disabledReason}\n      commit={commit}\n      className={full}\n    >\n      {destructive.label}\n    </Button>\n  ) : (\n    destructive\n  );\n  const saveLabel = submitLabel ?? labels.save;\n  // The glyphs follow the text: 16px beside `md`'s 14px text, 14px beside `sm`'s 12px.\n  const saveSize = submitProps?.size ?? size;\n  const glyphClass = saveSize === \"sm\" ? \"size-3.5\" : \"size-4\";\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"form-actions\"\n      data-placement={placement}\n      data-sticky-within={placement === \"sticky\" ? stickyWithin : undefined}\n      {...rest}\n      style={\n        placement === \"sticky\"\n          ? {\n              paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\",\n              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`\n              // pinned the row under AppShell's nav, which covers the page's last ~56px.\n              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an\n              // AppShell); the 1px overlaps the two top borders into one line. In a\n              // container the nav is not underneath: `--app-nav-h` is the document's,\n              // and would hold the row that far above the container's own edge.\n              bottom: stickyWithin === \"container\" ? 0 : \"max(0px, calc(var(--app-nav-h, 0px) - 1px))\",\n              ...(bleedLength !== undefined && {\n                marginInline: `calc(-1 * ${bleedLength})`,\n                paddingInline: bleedLength,\n              }),\n              ...style,\n            }\n          : style\n      }\n      data-stacked={stacked || undefined}\n      className={cn(\n        stacked ? \"flex flex-col items-stretch gap-2\" : cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify]),\n        PLACEMENT_CLASS[placement],\n        className,\n      )}\n    >\n      {(hasDestructive || hasStart) && (\n        <div\n          className={\n            stacked ? \"flex min-w-0 flex-col items-stretch gap-2\" : \"me-auto flex min-w-0 flex-wrap items-center gap-2\"\n          }\n        >\n          {destructiveNode}\n          {hasStart && startSlot}\n        </div>\n      )}\n      <div className={stacked ? \"flex flex-col items-stretch gap-2\" : \"flex flex-wrap items-center gap-2\"}>\n        {children}\n        {onCancel && (\n          <Button type=\"button\" variant={cancelVariant} size={size} onClick={onCancel} className={full}>\n            {cancelLabel ?? labels.cancel}\n          </Button>\n        )}\n        <Button\n          {...submitProps}\n          ref={setSaveRef}\n          aria-keyshortcuts={\n            submitShortcut === \"mod-enter\" ? \"Control+Enter Meta+Enter\" : submitProps?.[\"aria-keyshortcuts\"]\n          }\n          type={onSubmit ? \"button\" : \"submit\"}\n          form={form}\n          onClick={() => {\n            pressed.current = true;\n            onSubmit?.();\n          }}\n          variant={submitVariant}\n          size={saveSize}\n          disabled={pending || submitDisabled}\n          disabledReason={pending ? undefined : submitDisabledReason}\n          // Not while pending: the save already left, and the lock's look over the\n          // spinner would say it had not. A ternary, not `commit && !pending`, which\n          // turned a `{ except }` scope into `true` (§12.36).\n          commit={pending ? false : commit}\n          aria-busy={pending || undefined}\n          className={cn(submitProps?.className, full)}\n        >\n          {pending ? (\n            <Spinner label={null} className={glyphClass} />\n          ) : (\n            SubmitIcon && <SubmitIcon aria-hidden className={cn(glyphClass, \"shrink-0\")} />\n          )}\n          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n          {submitShortcut && submitShortcutHint && (\n            // Hidden from the accessibility tree: `aria-keyshortcuts` already says it,\n            // and in the name it would make the button \"Save Ctrl+Enter\".\n            <kbd\n              aria-hidden\n              className=\"ms-1 font-sans text-[0.85em] font-normal whitespace-nowrap opacity-70 pointer-coarse:hidden\"\n            >\n              {labels.submitShortcut(apple)}\n            </kbd>\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement, useEffect, useMemo, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useBreakpoint, usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { isApplePlatform } from \"../hooks/use-hotkey\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Spinner } from \"./spinner\";\nimport type { ButtonSize, ButtonVariant } from \"./button-look\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useWriteLock } from \"./write-lock\";\nimport type { CommitScope } from \"./write-lock\";\nimport { DEFAULT_FORM_ACTIONS_LABELS } from \"./form-actions-labels\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n  save: string;\n  cancel: string;\n  /**\n   * The {@link FormActionsProps.submitShortcut} hint beside Save's text, when\n   * {@link FormActionsProps.submitShortcutHint} shows it. `apple` is true on a Mac,\n   * iPhone or iPad, where the key is Cmd: \"⌘ Enter\" there, \"Ctrl+Enter\" elsewhere\n   * (a German keyboard says \"Strg\").\n   */\n  submitShortcut: (apple: boolean) => string;\n}\n\n// Defined in ./form-actions-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_FORM_ACTIONS_LABELS };\n\n/** See {@link FormActionsProps.submitShortcut}. */\nexport type FormActionsSubmitShortcut = \"mod-enter\";\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n *  - `inline` (default): under the form's last field, `pt-4` above it.\n *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n *    colour with a rule above, clear of the phone's home indicator — for a long form\n *    whose Save should not be a scroll away.\n *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n *    FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/**\n * When the row's buttons STACK, one per line at the row's full width (0.32,\n * docs/text-size-harmonization.md §4 \"FormActions stack full width on a phone layout\"):\n *\n *  - `\"auto\"` (default): on the phone layout (`usePhoneLayout()`, `max-md:` at the text\n *    size in force) at Large and Extra large. There a phone is 312 or 260 px of text\n *    wide, and Cancel and a \"Save changes\" side by side wrap into a ragged pair with\n *    one 48 px target squeezed against the other. Normal keeps the row the apps tuned.\n *  - `\"phone\"`: on the phone layout at every text size.\n *  - `\"never\"`: always the row.\n *\n * Stacked, the order is the DOM's — the start group (the destructive action), the extra\n * actions, Cancel, then Save at the bottom, under the thumb — so the visual order and\n * the tab order stay one.\n */\nexport type FormActionsStack = \"auto\" | \"phone\" | \"never\";\n\n/**\n * A placement per breakpoint, mobile first — `{ base: \"sticky\", md: \"inline\" }` is a\n * Save row stuck to the bottom of a phone's long form and in the flow under the last\n * field from 768px up, where the form fits. The breakpoints are the classes' (sm 640,\n * md 768, lg 1024, xl 1280px at Normal text size, and 1.25 / 1.5 times that at Large /\n * Extra large, as `md:` is since 0.32), as `BulkActionBar`'s `variant` breakpoints are, and\n * resolved the same way, in JS: the sticky row is positioned by inline style, which a\n * `md:` class cannot reach. keksdose switched `placement` on its own media query at\n * every long form for want of this. The breakpoints are the VIEWPORT's, not the\n * container's: a form in a narrow pane on a wide screen resolves to `md`.\n */\nexport interface ResponsiveFormActionsPlacement {\n  base: FormActionsPlacement;\n  sm?: FormActionsPlacement;\n  md?: FormActionsPlacement;\n  lg?: FormActionsPlacement;\n  xl?: FormActionsPlacement;\n}\n\n/** Widest first: the first that matches and names a value wins. Each is the class's own\n *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */\nconst BREAKPOINTS = [\"xl\", \"lg\", \"md\", \"sm\"] as const;\n\n/** The placement in force: the widest breakpoint that matches AND names one, else\n *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a\n *  plain string ignores them. Without `matchMedia` (SSR, tests) none match, so the row\n *  renders its `base`, the phone's. The same resolution as BulkActionBar's variant. */\nfunction useResolvedPlacement(\n  placement: FormActionsPlacement | ResponsiveFormActionsPlacement,\n): FormActionsPlacement {\n  const matches = {\n    xl: useBreakpoint(\"xl\"),\n    lg: useBreakpoint(\"lg\"),\n    md: useBreakpoint(\"md\"),\n    sm: useBreakpoint(\"sm\"),\n  };\n  if (typeof placement === \"string\") return placement;\n  for (const key of BREAKPOINTS) {\n    const p = placement[key];\n    if (matches[key] && p !== undefined) return p;\n  }\n  return placement.base;\n}\n\n/** A CSS length: a number is pixels. */\nfunction cssLength(value: string | number): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * What a `sticky` row sticks to — see {@link FormActionsProps.stickyWithin}.\n *  - `viewport` (default): the page's (or AppShell pane's) bottom edge, lifted onto\n *    the phone's bottom nav by `--app-nav-h`.\n *  - `container`: the bottom of whatever scroll container it is in — a dialog body, a\n *    side pane, a panel with `overflow-y-auto` — at `bottom: 0`, with no nav offset.\n */\nexport type FormActionsStickyWithin = \"viewport\" | \"container\";\n\n/**\n * Extra attributes for the save button — an `id`, `data-*` hooks for tests or\n * analytics, an `aria-describedby`. The props FormActions drives itself (type, click,\n * disabled, variant, form, children, the busy state) are not among them.\n */\nexport type FormActionsSubmitProps = Omit<\n  ButtonProps,\n  \"type\" | \"onClick\" | \"disabled\" | \"disabledReason\" | \"variant\" | \"form\" | \"children\" | \"aria-busy\" | \"commit\"\n> & { [key: `data-${string}`]: string | number | boolean | undefined };\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  /** See Button's `disabledReason`. */\n  disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n  inline: \"pt-4\",\n  sticky: \"sticky bottom-0 z-10 border-t border-subtle bg-surface pt-3\",\n  dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n  onCancel?: () => void;\n  /**\n   * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n   * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n   * enclosing `<form>` (or the one named by {@link form}).\n   */\n  onSubmit?: () => void;\n  /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n  submitLabel?: ReactNode;\n  /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n  pendingLabel?: ReactNode;\n  /**\n   * A Lucide icon before the save button's text. While `pending` the spinner takes\n   * ITS place rather than being added in front of it — an icon written into\n   * `submitLabel` itself stays, so the button would show the spinner AND the glyph,\n   * two statuses side by side (keksdose's crop Apply needed a `pendingLabel` copy of\n   * its text only to drop the check mark).\n   */\n  submitIcon?: LucideIcon;\n  /** Attributes passed through to the save button: `id`, `data-*`, `aria-*`, a\n   *  `className`. See {@link FormActionsSubmitProps}. */\n  submitProps?: FormActionsSubmitProps;\n  /**\n   * The save is running: a spinner in the save button, `aria-busy` on it, and the\n   * button disabled, so a second click cannot send the form twice. Cancel stays\n   * usable. The spinner goes in front of the text, or in place of {@link submitIcon}.\n   */\n  pending?: boolean;\n  /** Disable save for a reason of the form's own (an unbalanced entry). */\n  submitDisabled?: boolean;\n  /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n  submitDisabledReason?: ReactNode;\n  /**\n   * Save is a commit: under a locked {@link WriteLockProvider} it is disabled with the\n   * lock's reason (over `submitDisabledReason`), focusable, the reason in its tooltip —\n   * Button's `commit`. The `{ label, onClick }` form of {@link destructive} is a\n   * commit too and is locked with it; Cancel and `children` are not (closing a form\n   * writes nothing). No provider, or an unlocked one: no effect. Default `false`.\n   *\n   * keksdose wrote `submitDisabled={lock.locked || …}` and\n   * `submitDisabledReason={lock.locked ? lock.reason : undefined}` at each form; this is\n   * that pair, read from the provider.\n   *\n   * 0.33: a {@link CommitScope} — `COMMIT_EXCEPT_BILLING` for a form a lapsed plan still\n   * allows (the account's own settings, docs/billing-harmonization.md §12.36).\n   */\n  commit?: CommitScope;\n  /** The save button's variant. Default `brand`; `danger` for a save that destroys\n   *  (kastlan's `destructive` flag on its own FormActions). */\n  submitVariant?: ButtonVariant;\n  /**\n   * The Cancel button's variant. Default `secondary` (the outlined button, as before).\n   * `ghost` for a row where Cancel should step back further than an outline — keksdose\n   * G3: a quiet inline row (a confirm under a table row, a card's own small editor)\n   * whose Cancel was a ghost button before it moved onto FormActions, which drew every\n   * Cancel outlined.\n   */\n  cancelVariant?: ButtonVariant;\n  /**\n   * The size of every button the row draws itself — Save, Cancel and the\n   * `{ label, onClick }` form of {@link destructive}: Button's `size`. Default `md`.\n   * `sm` (12px text, `px-2 py-1`) for a dense row: a confirm inside a table's expansion\n   * row, a toolbar card. keksdose G3: two such rows had small hand-built buttons and lost\n   * them on adopting FormActions, which had no size. At `sm` the spinner and\n   * {@link submitIcon} shrink with the text.\n   *\n   * Your own elements (`children`, an element passed as `destructive`, `start`) are\n   * yours to size — pass them `size=\"sm\"` too. A `size` in {@link submitProps} still\n   * wins for Save, as it always has.\n   */\n  size?: ButtonSize;\n  /**\n   * A destructive action at the START of the row, apart from Save and Cancel — the\n   * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n   * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n   * is `between`-aligned unless `align` says otherwise.\n   */\n  destructive?: ReactNode | FormActionsDestructive;\n  /**\n   * Something neutral at the START of the row — a caption (\"Last saved 2 min ago\",\n   * \"Drag the corners to crop\"), a \"View activity\" link. After {@link destructive}\n   * when both are given; like it, makes the row `between`-aligned unless `align` says\n   * otherwise. `children` are for further ACTIONS, beside Cancel.\n   */\n  start?: ReactNode;\n  /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n  align?: FormActionsAlign;\n  /** See {@link FormActionsPlacement}, or one per breakpoint — see\n   *  {@link ResponsiveFormActionsPlacement}. Default `inline`. */\n  placement?: FormActionsPlacement | ResponsiveFormActionsPlacement;\n  /**\n   * While the row is `sticky`: pull it out over its container's inline padding by this\n   * much (a CSS length, a number in px) and give the same back as padding — so the\n   * rule above it and its surface run edge to edge, while the buttons stay on the\n   * content's line. Without it a sticky row in a padded card or pane is a strip inset\n   * from both sides, with the content scrolling past it in the gutters (keksdose wrote\n   * `@max-md:-mx-3 @max-md:px-3` by hand). Pass the container's padding (`\"0.75rem\"`,\n   * `12`, `\"var(--pane-px)\"`). Applied only while the resolved placement is sticky, so\n   * `placement={{ base: \"sticky\", md: \"inline\" }}` bleeds on the phone alone. The margin\n   * is `calc(-1 * X)`; jsdom folds that to `calc(-X)`, so match it loosely in tests.\n   */\n  bleed?: string | number;\n  /**\n   * With `placement=\"sticky\"`: what the row sticks to. Default `viewport`.\n   *\n   * CSS sticky always sticks to the NEAREST scroll container, so the default row\n   * already holds inside a scrolling pane — but it offsets itself by `--app-nav-h`,\n   * which AppShell publishes on the document: inside a pane or a portalled dialog\n   * body on a phone it then floats a nav's height above that container's bottom,\n   * with the content scrolling through the gap. `container` drops that offset.\n   *\n   * What neither value can fix, because it is the layout, not the row:\n   *  - sticky moves only within its PARENT box. Inside a DataTable expansion row the\n   *    parent is the expansion cell, so the row pins to the table's own scroller\n   *    (`overflow-auto`, bounded by `maxBodyHeight`) and only while the cell spans\n   *    that scroller's bottom edge — not to the page.\n   *  - any `overflow` other than `visible`/`clip` between the row and the scroller\n   *    you mean (an `overflow-x-auto` wrapper, an `overflow-hidden` card) becomes the\n   *    scroll container; if THAT box does not scroll, the row never sticks.\n   *  - the offset is resolved against the scroller's content box, so a scroller with\n   *    bottom padding leaves that strip uncovered; give the row a negative `bottom`\n   *    through `style` and the same amount back as padding.\n   */\n  stickyWithin?: FormActionsStickyWithin;\n  /** The `id` of the `<form>` the save button submits, when the row is rendered\n   *  outside it (a dialog's footer slot). */\n  form?: string;\n  /**\n   * A keyboard shortcut that presses Save from anywhere in the form. `\"mod-enter\"`:\n   * Ctrl+Enter, or Cmd+Enter on a Mac — both are accepted everywhere, as keksdose's\n   * editors always have. keksdose K14 (inputs audit 2026-10-02, S5): its transaction\n   * editor, category editor and create card each wrote this as an `onKeyDown` on a\n   * container, re-stating `!pending && !saveDisabled && !lock.locked` every time, and\n   * the one that forgot the lock let the demo's refused save through from the keyboard.\n   *\n   * What it does is what pressing Save does — the same button is clicked, so a form\n   * submits with its validation and its submitter, and `onSubmit` is called in the\n   * `type=\"button\"` mode — and it does NOTHING while Save could not be pressed:\n   * `pending`, `submitDisabled`, or a `commit` under a locked {@link WriteLockProvider}.\n   *\n   * Scoped to the form Save submits (the `form` prop's, else the enclosing `<form>`):\n   * the chord counts only when the focus is inside it, so two editors on one page each\n   * answer for their own fields. Without a form (an `onSubmit` row in a plain container)\n   * the scope is the nearest `role=\"dialog\"`, else the row's parent element — the\n   * container the row ends.\n   *\n   * Listened for on the document, so it runs AFTER every React handler: a field that\n   * takes Ctrl+Enter for itself calls `preventDefault()` or `stopPropagation()` and\n   * the row stays out of it (keksdose live #202 — the create card's Ctrl+Shift+Enter\n   * must create ONE row; the chord here is exactly Ctrl/Cmd+Enter, never with Shift or\n   * Alt). Not during IME composition, and not on a held key's repeats.\n   *\n   * The save button announces it with `aria-keyshortcuts`; {@link submitShortcutHint}\n   * also shows it.\n   */\n  submitShortcut?: FormActionsSubmitShortcut;\n  /** Show the {@link submitShortcut} beside Save's text (\"Ctrl+Enter\", \"⌘ Enter\"; the\n   *  `form.submitShortcut` label), dimmed. Hidden on a touch-only device, which has no\n   *  keyboard to press it on. Default `false`. */\n  submitShortcutHint?: boolean;\n  /** When the buttons stack full width — see {@link FormActionsStack}. Default `auto`:\n   *  on the phone layout at Large and Extra large. */\n  stack?: FormActionsStack;\n  /** Extra actions, placed before Cancel. */\n  children?: ReactNode;\n  /** The row, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with its own ref, which `submitShortcut` finds its form from. It rode the\n   *  rest props before, after the row's own, and a caller's ref took the shortcut's. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n\n/**\n * Where {@link FormActionsProps.submitShortcut} listens: the form Save submits (named\n * by `formId`, else the enclosing one), else the nearest dialog, else the row's parent.\n */\nfunction shortcutScope(row: HTMLElement | null, formId: string | undefined): Element | null {\n  if (!row) return null;\n  const named = formId ? row.ownerDocument.getElementById(formId) : null;\n  if (named instanceof HTMLFormElement) return named;\n  return row.closest(\"form\") ?? row.closest('[role=\"dialog\"]') ?? row.parentElement;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n  return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n *   …\n *   <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n  onCancel,\n  onSubmit,\n  submitLabel,\n  cancelLabel,\n  pendingLabel,\n  submitIcon: SubmitIcon,\n  submitProps,\n  pending = false,\n  submitDisabled = false,\n  submitDisabledReason,\n  commit = false,\n  submitVariant = \"brand\",\n  cancelVariant = \"secondary\",\n  size = \"md\",\n  destructive,\n  start: startSlot,\n  align,\n  placement: placementProp = \"inline\",\n  stickyWithin = \"viewport\",\n  bleed,\n  form,\n  submitShortcut,\n  submitShortcutHint = false,\n  stack = \"auto\",\n  children,\n  className,\n  style,\n  ref,\n  ...rest\n}: FormActionsProps) {\n  const phone = usePhoneLayout();\n  const large = useLargeText();\n  const stacked = stack !== \"never\" && phone && (stack === \"phone\" || large);\n  // Stacked, a button fills its line — also inside the reason line's wrapper, which the\n  // column stretches but which keeps its control at the control's own width.\n  const full = stacked ? \"w-full\" : undefined;\n  const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n  // The lock as Save sees it: with its scope, so a billing lock leaves a\n  // `COMMIT_EXCEPT_BILLING` form's shortcut live too.\n  const lock = useWriteLock(commit);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const setRoot = useMemo(() => mergeRefs(rootRef, ref), [ref]);\n  const saveRef = useRef<HTMLButtonElement | null>(null);\n  // The caller's own `submitProps.ref` still gets the element.\n  const callerSaveRef = submitProps?.ref;\n  const setSaveRef = useMemo(() => mergeRefs(saveRef, callerSaveRef), [callerSaveRef]);\n  // The save settled and the form is still here — it failed, and the user retries. The\n  // button was natively disabled while it ran, and a focused button that turns disabled\n  // drops the focus to <body> (DangerConfirm's 0.24 fix, keksdose). Only after a press\n  // of THIS button (`pressed`: a click or the shortcut), so a `pending` that comes and\n  // goes on its own never pulls the page's focus in.\n  const pressed = useRef(false);\n  const wasPending = useRef(pending);\n  useEffect(() => {\n    const settled = wasPending.current && !pending;\n    wasPending.current = pending;\n    if (!settled) return;\n    const ours = pressed.current;\n    pressed.current = false;\n    if (!ours) return;\n    if (document.activeElement === null || document.activeElement === document.body) saveRef.current?.focus();\n  }, [pending]);\n  // Read by the shortcut's listener at the moment of the key press, so the listener\n  // itself is attached once and never sees a stale `pending`.\n  const canSave = !pending && !submitDisabled && !lock.locked;\n  const canSaveRef = useRef(canSave);\n  useEffect(() => {\n    canSaveRef.current = canSave;\n  });\n  useEffect(() => {\n    if (submitShortcut !== \"mod-enter\") return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Enter\" || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;\n      if (e.repeat || e.isComposing || e.defaultPrevented || !canSaveRef.current) return;\n      const scope = shortcutScope(rootRef.current, form);\n      if (!scope || !(e.target instanceof Node) || !scope.contains(e.target)) return;\n      e.preventDefault();\n      saveRef.current?.click();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [submitShortcut, form]);\n  const apple = submitShortcut ? isApplePlatform() : false;\n  const placement = useResolvedPlacement(placementProp);\n  const bleedLength = bleed === undefined || bleed === \"\" ? undefined : cssLength(bleed);\n  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n  const hasStart = startSlot !== undefined && startSlot !== null && startSlot !== false;\n  const justify = align ?? (hasDestructive || hasStart ? \"between\" : \"end\");\n  const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      tone=\"danger\"\n      size={size}\n      onClick={destructive.onClick}\n      disabled={destructive.disabled}\n      disabledReason={destructive.disabledReason}\n      commit={commit}\n      className={full}\n    >\n      {destructive.label}\n    </Button>\n  ) : (\n    destructive\n  );\n  const saveLabel = submitLabel ?? labels.save;\n  // The glyphs follow the text: 16px beside `md`'s 14px text, 14px beside `sm`'s 12px.\n  const saveSize = submitProps?.size ?? size;\n  const glyphClass = saveSize === \"sm\" ? \"size-3.5\" : \"size-4\";\n\n  return (\n    <div\n      ref={setRoot}\n      data-slot=\"form-actions\"\n      data-placement={placement}\n      data-sticky-within={placement === \"sticky\" ? stickyWithin : undefined}\n      {...rest}\n      style={\n        placement === \"sticky\"\n          ? {\n              paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\",\n              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`\n              // pinned the row under AppShell's nav, which covers the page's last ~56px.\n              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an\n              // AppShell); the 1px overlaps the two top borders into one line. In a\n              // container the nav is not underneath: `--app-nav-h` is the document's,\n              // and would hold the row that far above the container's own edge.\n              bottom: stickyWithin === \"container\" ? 0 : \"max(0px, calc(var(--app-nav-h, 0px) - 1px))\",\n              ...(bleedLength !== undefined && {\n                marginInline: `calc(-1 * ${bleedLength})`,\n                paddingInline: bleedLength,\n              }),\n              ...style,\n            }\n          : style\n      }\n      data-stacked={stacked || undefined}\n      className={cn(\n        stacked ? \"flex flex-col items-stretch gap-2\" : cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify]),\n        PLACEMENT_CLASS[placement],\n        className,\n      )}\n    >\n      {(hasDestructive || hasStart) && (\n        <div\n          className={\n            stacked ? \"flex min-w-0 flex-col items-stretch gap-2\" : \"me-auto flex min-w-0 flex-wrap items-center gap-2\"\n          }\n        >\n          {destructiveNode}\n          {hasStart && startSlot}\n        </div>\n      )}\n      <div className={stacked ? \"flex flex-col items-stretch gap-2\" : \"flex flex-wrap items-center gap-2\"}>\n        {children}\n        {onCancel && (\n          <Button type=\"button\" variant={cancelVariant} size={size} onClick={onCancel} className={full}>\n            {cancelLabel ?? labels.cancel}\n          </Button>\n        )}\n        <Button\n          {...submitProps}\n          ref={setSaveRef}\n          aria-keyshortcuts={\n            submitShortcut === \"mod-enter\" ? \"Control+Enter Meta+Enter\" : submitProps?.[\"aria-keyshortcuts\"]\n          }\n          type={onSubmit ? \"button\" : \"submit\"}\n          form={form}\n          onClick={() => {\n            pressed.current = true;\n            onSubmit?.();\n          }}\n          variant={submitVariant}\n          size={saveSize}\n          disabled={pending || submitDisabled}\n          disabledReason={pending ? undefined : submitDisabledReason}\n          // Not while pending: the save already left, and the lock's look over the\n          // spinner would say it had not. A ternary, not `commit && !pending`, which\n          // turned a `{ except }` scope into `true` (§12.36).\n          commit={pending ? false : commit}\n          aria-busy={pending || undefined}\n          className={cn(submitProps?.className, full)}\n        >\n          {pending ? (\n            <Spinner label={null} className={glyphClass} />\n          ) : (\n            SubmitIcon && <SubmitIcon aria-hidden className={cn(glyphClass, \"shrink-0\")} />\n          )}\n          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n          {submitShortcut && submitShortcutHint && (\n            // Hidden from the accessibility tree: `aria-keyshortcuts` already says it,\n            // and in the name it would make the button \"Save Ctrl+Enter\".\n            <kbd\n              aria-hidden\n              className=\"ms-1 font-sans text-[0.85em] font-normal whitespace-nowrap opacity-70 pointer-coarse:hidden\"\n            >\n              {labels.submitShortcut(apple)}\n            </kbd>\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAmcI,cAuDI,YAvDJ;AAncJ,SAAS,gBAAgB,WAAW,SAAS,cAAc;AAG3D,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,eAAe,sBAAsB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,cAAgC;AACzC,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAE7B,SAAS,mCAAmC;AAwE5C,MAAM,cAAc,CAAC,MAAM,MAAM,MAAM,IAAI;AAM3C,SAAS,qBACP,WACsB;AACtB,QAAM,UAAU;AAAA,IACd,IAAI,cAAc,IAAI;AAAA,IACtB,IAAI,cAAc,IAAI;AAAA,IACtB,IAAI,cAAc,IAAI;AAAA,IACtB,IAAI,cAAc,IAAI;AAAA,EACxB;AACA,MAAI,OAAO,cAAc,SAAU,QAAO;AAC1C,aAAW,OAAO,aAAa;AAC7B,UAAM,IAAI,UAAU,GAAG;AACvB,QAAI,QAAQ,GAAG,KAAK,MAAM,OAAW,QAAO;AAAA,EAC9C;AACA,SAAO,UAAU;AACnB;AAGA,SAAS,UAAU,OAAgC;AACjD,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AACpD;AA8BA,MAAM,cAAgD;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AACX;AAEA,MAAM,kBAAwD;AAAA,EAC5D,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;AAsLA,SAAS,cAAc,KAAyB,QAA4C;AAC1F,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,QAAQ,SAAS,IAAI,cAAc,eAAe,MAAM,IAAI;AAClE,MAAI,iBAAiB,gBAAiB,QAAO;AAC7C,SAAO,IAAI,QAAQ,MAAM,KAAK,IAAI,QAAQ,iBAAiB,KAAK,IAAI;AACtE;AAEA,SAAS,kBAAkB,OAAiD;AAC1E,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,eAAe,KAAK,KAAK,aAAa;AAC/F;AAiBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,WAAW,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,QAAQ,eAAe;AAC7B,QAAM,QAAQ,aAAa;AAC3B,QAAM,UAAU,UAAU,WAAW,UAAU,UAAU,WAAW;AAGpE,QAAM,OAAO,UAAU,WAAW;AAClC,QAAM,SAAS,aAAa,QAAQ,2BAA2B;AAG/D,QAAM,OAAO,aAAa,MAAM;AAChC,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,QAAQ,MAAM,UAAU,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC;AAC5D,QAAM,UAAU,OAAiC,IAAI;AAErD,QAAM,gBAAgB,aAAa;AACnC,QAAM,aAAa,QAAQ,MAAM,UAAU,SAAS,aAAa,GAAG,CAAC,aAAa,CAAC;AAMnF,QAAM,UAAU,OAAO,KAAK;AAC5B,QAAM,aAAa,OAAO,OAAO;AACjC,YAAU,MAAM;AACd,UAAM,UAAU,WAAW,WAAW,CAAC;AACvC,eAAW,UAAU;AACrB,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,QAAQ;AACrB,YAAQ,UAAU;AAClB,QAAI,CAAC,KAAM;AACX,QAAI,SAAS,kBAAkB,QAAQ,SAAS,kBAAkB,SAAS,KAAM,SAAQ,SAAS,MAAM;AAAA,EAC1G,GAAG,CAAC,OAAO,CAAC;AAGZ,QAAM,UAAU,CAAC,WAAW,CAAC,kBAAkB,CAAC,KAAK;AACrD,QAAM,aAAa,OAAO,OAAO;AACjC,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,mBAAmB,YAAa;AACpC,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,WAAW,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,OAAQ;AAC9E,UAAI,EAAE,UAAU,EAAE,eAAe,EAAE,oBAAoB,CAAC,WAAW,QAAS;AAC5E,YAAM,QAAQ,cAAc,QAAQ,SAAS,IAAI;AACjD,UAAI,CAAC,SAAS,EAAE,EAAE,kBAAkB,SAAS,CAAC,MAAM,SAAS,EAAE,MAAM,EAAG;AACxE,QAAE,eAAe;AACjB,cAAQ,SAAS,MAAM;AAAA,IACzB;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,gBAAgB,IAAI,CAAC;AACzB,QAAM,QAAQ,iBAAiB,gBAAgB,IAAI;AACnD,QAAM,YAAY,qBAAqB,aAAa;AACpD,QAAM,cAAc,UAAU,UAAa,UAAU,KAAK,SAAY,UAAU,KAAK;AACrF,QAAM,iBAAiB,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB;AAC5F,QAAM,WAAW,cAAc,UAAa,cAAc,QAAQ,cAAc;AAChF,QAAM,UAAU,UAAU,kBAAkB,WAAW,YAAY;AACnE,QAAM,kBAAkB,CAAC,iBAAiB,OAAO,kBAAkB,WAAW,IAC5E;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,SAAS,YAAY;AAAA,MACrB,UAAU,YAAY;AAAA,MACtB,gBAAgB,YAAY;AAAA,MAC5B;AAAA,MACA,WAAW;AAAA,MAEV,sBAAY;AAAA;AAAA,EACf,IAEA;AAEF,QAAM,YAAY,eAAe,OAAO;AAExC,QAAM,WAAW,aAAa,QAAQ;AACtC,QAAM,aAAa,aAAa,OAAO,aAAa;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAU;AAAA,MACV,kBAAgB;AAAA,MAChB,sBAAoB,cAAc,WAAW,eAAe;AAAA,MAC3D,GAAG;AAAA,MACJ,OACE,cAAc,WACV;AAAA,QACE,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,QAAQ,iBAAiB,cAAc,IAAI;AAAA,QAC3C,GAAI,gBAAgB,UAAa;AAAA,UAC/B,cAAc,aAAa,WAAW;AAAA,UACtC,eAAe;AAAA,QACjB;AAAA,QACA,GAAG;AAAA,MACL,IACA;AAAA,MAEN,gBAAc,WAAW;AAAA,MACzB,WAAW;AAAA,QACT,UAAU,sCAAsC,GAAG,qCAAqC,YAAY,OAAO,CAAC;AAAA,QAC5G,gBAAgB,SAAS;AAAA,QACzB;AAAA,MACF;AAAA,MAEE;AAAA,2BAAkB,aAClB;AAAA,UAAC;AAAA;AAAA,YACC,WACE,UAAU,8CAA8C;AAAA,YAGzD;AAAA;AAAA,cACA,YAAY;AAAA;AAAA;AAAA,QACf;AAAA,QAEF,qBAAC,SAAI,WAAW,UAAU,sCAAsC,qCAC7D;AAAA;AAAA,UACA,YACC,oBAAC,UAAO,MAAK,UAAS,SAAS,eAAe,MAAY,SAAS,UAAU,WAAW,MACrF,yBAAe,OAAO,QACzB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,qBACE,mBAAmB,cAAc,6BAA6B,cAAc,mBAAmB;AAAA,cAEjG,MAAM,WAAW,WAAW;AAAA,cAC5B;AAAA,cACA,SAAS,MAAM;AACb,wBAAQ,UAAU;AAClB,2BAAW;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT,MAAM;AAAA,cACN,UAAU,WAAW;AAAA,cACrB,gBAAgB,UAAU,SAAY;AAAA,cAItC,QAAQ,UAAU,QAAQ;AAAA,cAC1B,aAAW,WAAW;AAAA,cACtB,WAAW,GAAG,aAAa,WAAW,IAAI;AAAA,cAEzC;AAAA,0BACC,oBAAC,WAAQ,OAAO,MAAM,WAAW,YAAY,IAE7C,cAAc,oBAAC,cAAW,eAAW,MAAC,WAAW,GAAG,YAAY,UAAU,GAAG;AAAA,gBAE9E,WAAW,iBAAiB,SAAY,eAAe;AAAA,gBACvD,kBAAkB;AAAA;AAAA,gBAGjB;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAW;AAAA,oBACX,WAAU;AAAA,oBAET,iBAAO,eAAe,KAAK;AAAA;AAAA,gBAC9B;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}