@eifi1/ui-kit 0.54.0 → 0.56.0

package/src/components/focus-ring.ts

@@ -1,16 +0,0 @@
-/**
- * The kit's focus frame (§5): a brand ring `--focus-ring-width` wide — 2 px, 3 px under
- * More contrast (tokens.css) — on keyboard focus only. ONE frame instead of the hundred
- * spelled-out `focus-visible:ring-2` copies, so the contrast setting can thicken all of
- * them at once. Compose with `ring-inset` or `ring-offset-surface` where a component needs it.
- *
- * The width is the `ring-focus` utility (tokens.css, 0.34): where this constant's variant
- * does not fit — a ring on an `after:` overlay, on links inside a footer, an outline on a
- * card — write `focus-visible:after:ring-focus` or `has-[:focus-visible]:outline-focus`
- * rather than spelling the width out.
- */
-export const FOCUS_RING = "focus-visible:outline-none focus-visible:ring-focus focus-visible:ring-brand";
-
-/** Just the width of {@link FOCUS_RING}, for a ring in another colour (a danger control's,
- *  `--brand-contrast` on a filled button): `cn(FOCUS_RING_WIDTH, "focus-visible:ring-brand-contrast")`. */
-export const FOCUS_RING_WIDTH = "focus-visible:ring-focus";

package/src/components/form-actions-labels.ts

@@ -1,11 +0,0 @@
-// The English words of ./form-actions, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./form-actions re-exports them.
-
-import type { FormActionsLabels } from "./form-actions";
-
-export const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {
-  save: "Save",
-  cancel: "Cancel",
-  submitShortcut: (apple) => (apple ? "⌘ Enter" : "Ctrl+Enter"),
-};

package/src/components/form-actions.tsx

@@ -1,578 +0,0 @@
-import { isValidElement, useEffect, useMemo, useRef } from "react";
-import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
-import type { LucideIcon } from "lucide-react";
-import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
-import { useBreakpoint, usePhoneLayout } from "../hooks/use-breakpoint";
-import { useLargeText } from "../hooks/use-large-text";
-import { isApplePlatform, matchesHotkey, type ParsedHotkey } from "../hooks/use-hotkey";
-import { isComposing } from "../lib/ime";
-import { hasContent } from "../lib/presence";
-import { Button, type ButtonProps } from "./button";
-import { Spinner } from "./spinner";
-import type { ButtonSize, ButtonVariant } from "./button-look";
-import { mergeRefs } from "./field-parts";
-import { useWriteLock } from "./write-lock";
-import type { CommitScope } from "./write-lock";
-import { DEFAULT_FORM_ACTIONS_LABELS } from "./form-actions-labels";
-
-/** 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;
-}
-
-// Defined in ./form-actions-labels, which holds no component code (0.34, KS U8).
-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;
-}
-
-/** Widest first: the first that matches and names a value wins. Each is the class's own
- *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */
-const BREAKPOINTS = ["xl", "lg", "md", "sm"] as const;
-
-/** The placement in force: the widest breakpoint that matches AND names one, else
- *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a
- *  plain string ignores them. Without `matchMedia` (SSR, tests) none match, so the row
- *  renders its `base`, the phone's. The same resolution as BulkActionBar's variant. */
-function useResolvedPlacement(placement: FormActionsPlacement | ResponsiveFormActionsPlacement): FormActionsPlacement {
-  const matches = {
-    xl: useBreakpoint("xl"),
-    lg: useBreakpoint("lg"),
-    md: useBreakpoint("md"),
-    sm: useBreakpoint("sm"),
-  };
-  if (typeof placement === "string") return placement;
-  for (const key of BREAKPOINTS) {
-    const p = placement[key];
-    if (matches[key] && p !== undefined) return p;
-  }
-  return placement.base;
-}
-
-/** A CSS length: a number is pixels. */
-function cssLength(value: string | number): string {
-  return typeof value === "number" ? `${value}px` : value;
-}
-
-/**
- * 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;
-}
-
-const ALIGN_CLASS: Record<FormActionsAlign, string> = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-};
-
-const PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {
-  inline: "pt-4",
-  sticky: "sticky bottom-0 z-10 border-t border-subtle bg-surface pt-3",
-  dialog: "",
-};
-
-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 `accent`; `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>;
-}
-
-/**
- * Where {@link FormActionsProps.submitShortcut} listens: the form Save submits (named
- * by `formId`, else the enclosing one), else the nearest dialog, else the row's parent.
- */
-function shortcutScope(row: HTMLElement | null, formId: string | undefined): Element | null {
-  if (!row) return null;
-  const named = formId ? row.ownerDocument.getElementById(formId) : null;
-  if (named instanceof HTMLFormElement) return named;
-  return row.closest("form") ?? row.closest('[role="dialog"]') ?? row.parentElement;
-}
-
-/**
- * What {@link FormActionsProps.submitShortcut} answers, on every platform: Ctrl+Enter and
- * Cmd+Enter with nothing else held, read by `matchesHotkey` as every kit shortcut is
- * (refactor audit 2026-10-30, DUP-12). Literals, not `parseHotkey` calls: no module-scope
- * call for a bundler to keep.
- */
-const SUBMIT_CHORDS: readonly ParsedHotkey[] = [
-  { ctrl: true, meta: false, shift: false, alt: false, key: "Enter" },
-  { ctrl: false, meta: true, shift: false, alt: false, key: "Enter" },
-];
-
-function isDestructiveData(value: unknown): value is FormActionsDestructive {
-  return typeof value === "object" && value !== null && !isValidElement(value) && "onClick" in value;
-}
-
-/**
- * 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 function FormActions({
-  onCancel,
-  onSubmit,
-  submitLabel,
-  cancelLabel,
-  pendingLabel,
-  submitIcon: SubmitIcon,
-  submitProps,
-  pending = false,
-  submitDisabled = false,
-  submitDisabledReason,
-  commit = false,
-  submitVariant = "accent",
-  cancelVariant = "secondary",
-  size = "md",
-  destructive,
-  start: startSlot,
-  align,
-  placement: placementProp = "inline",
-  stickyWithin = "viewport",
-  bleed,
-  form,
-  submitShortcut,
-  submitShortcutHint = false,
-  stack = "auto",
-  children,
-  className,
-  style,
-  ref,
-  ...rest
-}: FormActionsProps) {
-  const phone = usePhoneLayout();
-  const large = useLargeText();
-  const stacked = stack !== "never" && phone && (stack === "phone" || large);
-  // Stacked, a button fills its line — also inside the reason line's wrapper, which the
-  // column stretches but which keeps its control at the control's own width.
-  const full = stacked ? "w-full" : undefined;
-  const labels = useKitLabels("form", DEFAULT_FORM_ACTIONS_LABELS);
-  // The lock as Save sees it: with its scope, so a billing lock leaves a
-  // `COMMIT_EXCEPT_BILLING` form's shortcut live too.
-  const lock = useWriteLock(commit);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const setRoot = useMemo(() => mergeRefs(rootRef, ref), [ref]);
-  const saveRef = useRef<HTMLButtonElement | null>(null);
-  // The caller's own `submitProps.ref` still gets the element.
-  const callerSaveRef = submitProps?.ref;
-  const setSaveRef = useMemo(() => mergeRefs(saveRef, callerSaveRef), [callerSaveRef]);
-  // The save settled and the form is still here — it failed, and the user retries. The
-  // button was natively disabled while it ran, and a focused button that turns disabled
-  // drops the focus to <body> (DangerConfirm's 0.24 fix, keksdose). Only after a press
-  // of THIS button (`pressed`: a click or the shortcut), so a `pending` that comes and
-  // goes on its own never pulls the page's focus in.
-  const pressed = useRef(false);
-  const wasPending = useRef(pending);
-  useEffect(() => {
-    const settled = wasPending.current && !pending;
-    wasPending.current = pending;
-    if (!settled) return;
-    const ours = pressed.current;
-    pressed.current = false;
-    if (!ours) return;
-    if (document.activeElement === null || document.activeElement === document.body) saveRef.current?.focus();
-  }, [pending]);
-  // Read by the shortcut's listener at the moment of the key press, so the listener
-  // itself is attached once and never sees a stale `pending`.
-  const canSave = !pending && !submitDisabled && !lock.locked;
-  const canSaveRef = useRef(canSave);
-  useEffect(() => {
-    canSaveRef.current = canSave;
-  });
-  useEffect(() => {
-    if (submitShortcut !== "mod-enter") return;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (!SUBMIT_CHORDS.some((chord) => matchesHotkey(e, chord))) return;
-      // `isComposing` is lib/ime's: Safari's composition-ending Enter (keyCode 229) too.
-      if (e.repeat || isComposing(e) || e.defaultPrevented || !canSaveRef.current) return;
-      const scope = shortcutScope(rootRef.current, form);
-      if (!scope || !(e.target instanceof Node) || !scope.contains(e.target)) return;
-      e.preventDefault();
-      saveRef.current?.click();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [submitShortcut, form]);
-  const apple = submitShortcut ? isApplePlatform() : false;
-  const placement = useResolvedPlacement(placementProp);
-  const bleedLength = bleed === undefined || bleed === "" ? undefined : cssLength(bleed);
-  // `hasContent` (DUP-14): an empty string is no slot either, not an empty `me-auto` box.
-  const hasDestructive = isDestructiveData(destructive) || hasContent(destructive);
-  const hasStart = hasContent(startSlot);
-  const justify = align ?? (hasDestructive || hasStart ? "between" : "end");
-  const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (
-    <Button
-      type="button"
-      variant="ghost"
-      tone="danger"
-      size={size}
-      onClick={destructive.onClick}
-      disabled={destructive.disabled}
-      disabledReason={destructive.disabledReason}
-      commit={commit}
-      className={full}
-    >
-      {destructive.label}
-    </Button>
-  ) : (
-    destructive
-  );
-  const saveLabel = submitLabel ?? labels.save;
-  // The glyphs follow the text: 16px beside `md`'s 14px text, 14px beside `sm`'s 12px.
-  const saveSize = submitProps?.size ?? size;
-  const glyphClass = saveSize === "sm" ? "size-3.5" : "size-4";
-
-  return (
-    <div
-      ref={setRoot}
-      data-slot="form-actions"
-      data-placement={placement}
-      data-sticky-within={placement === "sticky" ? stickyWithin : undefined}
-      {...rest}
-      style={
-        placement === "sticky"
-          ? {
-              paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))",
-              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`
-              // pinned the row under AppShell's nav, which covers the page's last ~56px.
-              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an
-              // AppShell); the 1px overlaps the two top borders into one line. In a
-              // container the nav is not underneath: `--app-nav-h` is the document's,
-              // and would hold the row that far above the container's own edge.
-              bottom: stickyWithin === "container" ? 0 : "max(0px, calc(var(--app-nav-h, 0px) - 1px))",
-              ...(bleedLength !== undefined && {
-                marginInline: `calc(-1 * ${bleedLength})`,
-                paddingInline: bleedLength,
-              }),
-              ...style,
-            }
-          : style
-      }
-      data-stacked={stacked || undefined}
-      className={cn(
-        stacked ? "flex flex-col items-stretch gap-2" : cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify]),
-        PLACEMENT_CLASS[placement],
-        className,
-      )}
-    >
-      {(hasDestructive || hasStart) && (
-        <div
-          className={
-            stacked ? "flex min-w-0 flex-col items-stretch gap-2" : "me-auto flex min-w-0 flex-wrap items-center gap-2"
-          }
-        >
-          {destructiveNode}
-          {hasStart && startSlot}
-        </div>
-      )}
-      <div className={stacked ? "flex flex-col items-stretch gap-2" : "flex flex-wrap items-center gap-2"}>
-        {children}
-        {onCancel && (
-          <Button type="button" variant={cancelVariant} size={size} onClick={onCancel} className={full}>
-            {cancelLabel ?? labels.cancel}
-          </Button>
-        )}
-        <Button
-          {...submitProps}
-          ref={setSaveRef}
-          aria-keyshortcuts={
-            submitShortcut === "mod-enter" ? "Control+Enter Meta+Enter" : submitProps?.["aria-keyshortcuts"]
-          }
-          type={onSubmit ? "button" : "submit"}
-          form={form}
-          onClick={() => {
-            pressed.current = true;
-            onSubmit?.();
-          }}
-          variant={submitVariant}
-          size={saveSize}
-          disabled={pending || submitDisabled}
-          disabledReason={pending ? undefined : submitDisabledReason}
-          // Not while pending: the save already left, and the lock's look over the
-          // spinner would say it had not. A ternary, not `commit && !pending`, which
-          // turned a `{ except }` scope into `true` (§12.36).
-          commit={pending ? false : commit}
-          aria-busy={pending || undefined}
-          className={cn(submitProps?.className, full)}
-        >
-          {pending ? (
-            <Spinner label={null} className={glyphClass} />
-          ) : (
-            SubmitIcon && <SubmitIcon aria-hidden className={cn(glyphClass, "shrink-0")} />
-          )}
-          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}
-          {submitShortcut && submitShortcutHint && (
-            // Hidden from the accessibility tree: `aria-keyshortcuts` already says it,
-            // and in the name it would make the button "Save Ctrl+Enter".
-            <kbd
-              aria-hidden
-              className="ms-1 font-sans text-[0.85em] font-normal whitespace-nowrap opacity-70 pointer-coarse:hidden"
-            >
-              {labels.submitShortcut(apple)}
-            </kbd>
-          )}
-        </Button>
-      </div>
-    </div>
-  );
-}