@lotics/ui 27.15.1 → 27.15.3

package/docs/catalog.md

@@ -615,9 +615,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`dots_indicator`** — `DotsIndicator`: three looping bouncing dots (`size`/`color`); the
   indeterminate "working/typing" pulse `Loading` composes; use bare beside a caption while
   an agent thinks. Determinate work → `ProgressBar`.
-- **`animation_fade_in`** — `AnimationFadeIn`: the mount transition — children fade (+
-  optional `translateY` rise) into place on first render, once; the entrance polish
-  Accordion/Timeline/Stepper/AgentRun rows use.
+- **`animation_fade_in`** — `AnimationFadeIn`: the mount transition — children fade into
+  place on first render, once; the entrance polish Accordion/Timeline/Stepper/AgentRun
+  rows use. `translateY` adds the rise that reads as settling into place; `translateX`
+  the horizontal travel of a panel arriving from an edge (negative = from the left).
 
 ### Pickers & selection controls
 

package/docs/composition.md

@@ -471,9 +471,19 @@ All view controls are 40px tall (`CONTROL_HEIGHT`), `sm` labels, in ONE wrapping
 
 ## Commit & feedback surfaces
 
-- **Footer actions align RIGHT.** `PopoverFooter`/`DialogFooter` default `align="end"`;
-  `DrawerFooter` is right-aligned by construction. Commit at the right edge, secondary to its
-  left. Never left-flow a Save/Submit.
+- **A form's COMMIT sits with its fields, never in the footer.** The button submitting a set of
+  inputs goes directly beneath the last one it commits, `alignSelf="flex-start"` — the same left
+  edge the user just filled (data_entry.md's form-action alignment law, which holds inside an
+  overlay too). A footer commit is separated from what it commits by the width of the surface and
+  reads as belonging to the dialog rather than the fields. A **`Reset` travels with the `Save` it
+  undoes** — same draft, same row, secondary to the commit's left; splitting the pair across two
+  surfaces breaks one decision in half. A dialog whose only actions are a commit and its reset has
+  **no footer at all**.
+- **The footer carries SURFACE actions**: `Cancel`/`Close`/`Done` (dismissal), `Back`
+  (navigation) — verbs about the overlay, with no field group to sit beside. `PopoverFooter`/
+  `DialogFooter` default `align="end"`; `DrawerFooter` is right-aligned by construction. Primary
+  at the right edge, secondary to its left. A confirm dialog (no fields) is all surface: its
+  buttons ARE the dialog, and they belong in the footer.
 - **Empty result**: `<EmptyState message hint? icon? action?>` — never a bare muted Text.
 - **Inline status**: `<Callout tone="info|success|warning|error|neutral">` — compound (like
   Card): compose `CalloutTitle`/`CalloutText`/`CalloutActions` inside. `Callout` is INLINE;

package/docs/data_entry.md

@@ -36,11 +36,13 @@ shows in the resting row too; the `data` generic types option payloads). A DEPEN
 renders only while its parent value makes it real — never a disabled ghost row. Worked rows:
 `tpl_record`'s Classification group.
 
-**The form-action alignment law.** On an open page, a label-left form's action row rides the
-form's OWN GRID — an empty-label `DetailRow` puts the CTA (and what it produces) exactly on
-the CONTROL COLUMN, the same left edge the user just filled, and inherits stacked mode on
-narrow containers. A right-floated button aligns to nothing; only OVERLAY footers
-(`DialogFooter`/`DrawerFooter`) right-align. Worked: `tpl_record`'s Delivery receipt.
+**The form-action alignment law.** A label-left form's action row rides the form's OWN GRID —
+an empty-label `DetailRow` puts the CTA (and what it produces) exactly on the CONTROL COLUMN,
+the same left edge the user just filled, and inherits stacked mode on narrow containers. A
+right-floated button aligns to nothing. Worked: `tpl_record`'s Delivery receipt.
+
+**This holds inside an overlay too.** A dialog's commit sits under the last field it commits,
+not in the footer — see [composition.md §Commit & feedback surfaces](./composition.md).
 
 ### A dialog is a draft — use `FormField`, never an `Inline*` editor
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "27.15.1",
+  "version": "27.15.3",
   "type": "module",
   "exports": {
     "./vite": {

package/src/animation_fade_in.tsx

@@ -7,10 +7,14 @@ interface AnimationFadeInProps {
   /** Rise this many px while fading in — the "appearing into place" gesture.
    *  Default 0 (fade only). */
   translateY?: number;
+  /** Travel this many px horizontally while fading in — negative enters from the
+   *  left, positive from the right. The gesture for a panel arriving from an
+   *  edge rather than settling into place. Default 0. */
+  translateX?: number;
 }
 
 export function AnimationFadeIn(props: AnimationFadeInProps) {
-  const { children, style, translateY = 0 } = props;
+  const { children, style, translateY = 0, translateX = 0 } = props;
   const progress = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -21,9 +25,18 @@ export function AnimationFadeIn(props: AnimationFadeInProps) {
     }).start();
   }, [progress]);
 
-  const transform = translateY
-    ? [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [translateY, 0] }) }]
-    : undefined;
+  const offset = (from: number) =>
+    progress.interpolate({ inputRange: [0, 1], outputRange: [from, 0] });
+  const transform = [
+    ...(translateX ? [{ translateX: offset(translateX) }] : []),
+    ...(translateY ? [{ translateY: offset(translateY) }] : []),
+  ];
 
-  return <Animated.View style={[{ opacity: progress, transform }, style]}>{children}</Animated.View>;
+  return (
+    <Animated.View
+      style={[{ opacity: progress, transform: transform.length ? transform : undefined }, style]}
+    >
+      {children}
+    </Animated.View>
+  );
 }