@declarion/react 0.36.1 → 0.36.3

package/dist-lib/{LayoutRenderer-BUIoUmFl.js → LayoutRenderer-0UKE3pp6.js}

@@ -1,6 +1,6 @@
 import { s as e, t } from "./DynamicIcon-BWO6QtNF.js";
 import { En as n, F as r, Hn as i, I as a, Ln as o, Qt as s, Un as c, V as l, Wn as u, an as d, cn as f, f as p, h as m, in as h, jn as g, kt as _, ln as v, m as y, mn as b, nt as x, p as S, pn as C, pt as w, rn as T, rt as E, sn as D, tt as O, un as k, vn as A } from "./ActionRunner-BrXXs8ga.js";
-import { E as j, J as M, K as ee, St as N, T as P, Y as F, d as I, et as L, k as R, o as z, pt as B, q as V, r as te, t as ne, tt as re, u as ie, xt as ae } from "./registry-Bnc6QkvA.js";
+import { E as j, J as M, K as ee, St as N, T as P, Y as F, d as I, et as L, k as R, o as z, pt as B, q as V, r as te, t as ne, tt as re, u as ie, xt as ae } from "./registry-D_zbJrLC.js";
 import { n as oe, r as se, t as ce } from "./dataTableStyles-vwD1mVOP.js";
 import { Suspense as le, createContext as ue, lazy as H, useCallback as U, useContext as de, useEffect as W, useId as fe, useLayoutEffect as pe, useMemo as G, useRef as K, useState as q } from "react";
 import { useInfiniteQuery as me, useMutation as he, useQueryClient as ge } from "@tanstack/react-query";

package/dist-lib/{SmartDetailPage.impl-yjxK8z0s.js → SmartDetailPage.impl-Ccz4TqfJ.js}

@@ -1,9 +1,9 @@
 import { s as e, t } from "./DynamicIcon-BWO6QtNF.js";
 import { F as n, H as r, Hn as i, Jt as a, L as o, Ln as s, P as c, R as l, Un as u, Wn as d, Y as f, Z as p, an as m, b as h, cn as g, ct as _, et as v, fn as y, g as b, ht as x, in as S, it as C, jn as w, m as T, mt as ee, n as E, on as D, p as te, rn as ne, sn as re, st as O, un as ie, v as ae, vn as k } from "./ActionRunner-BrXXs8ga.js";
 import { I as oe, N as se, P as ce, S as le, f as A, h as j, i as ue, l as de, o as fe, t as M, u as N, v as pe, w as me } from "./RefreshControl-CX_D6PcA.js";
-import { $ as he, D as ge, G as _e, H as ve, K as ye, L as P, M as be, O as xe, Q as Se, St as Ce, U as we, W as Te, X as Ee, Z as De, _ as Oe, a as ke, dt as Ae, et as je, ft as Me, i as Ne, nt as Pe, q as Fe, s as Ie, tt as Le, vt as Re, w as ze, z as Be } from "./registry-Bnc6QkvA.js";
+import { $ as he, D as ge, G as _e, H as ve, K as ye, L as P, M as be, O as xe, Q as Se, St as Ce, U as we, W as Te, X as Ee, Z as De, _ as Oe, a as ke, dt as Ae, et as je, ft as Me, i as Ne, nt as Pe, q as Fe, s as Ie, tt as Le, vt as Re, w as ze, z as Be } from "./registry-D_zbJrLC.js";
 import { n as Ve, r as He, t as Ue } from "./dataTableStyles-vwD1mVOP.js";
-import { n as We, t as Ge } from "./LayoutRenderer-BUIoUmFl.js";
+import { n as We, t as Ge } from "./LayoutRenderer-0UKE3pp6.js";
 import { Fragment as Ke, useCallback as F, useEffect as I, useMemo as L, useRef as qe, useState as R } from "react";
 import { useLocation as Je, useParams as Ye, useSearchParams as Xe } from "react-router-dom";
 import { useQuery as Ze, useQueryClient as Qe } from "@tanstack/react-query";
@@ -769,7 +769,7 @@ function G({ icon: t, avatarName: n, title: r, recordId: a, description: o, high
 					display: "flex",
 					alignItems: "center",
 					gap: 6,
-					flex: _ ? "1 1 100%" : "0 0 auto",
+					flex: _ ? "1 1 100%" : "1 1 auto",
 					flexWrap: "wrap",
 					justifyContent: _ ? "flex-start" : "flex-end",
 					minWidth: 0
@@ -1692,8 +1692,7 @@ function Ct({ title: n, recordId: i, editing: a, isNew: o, isRecordDeleted: s, d
 		entityActions: m?.actions,
 		globalActions: _,
 		reservedRightWidth: 0,
-		widgetContext: ve,
-		fillContainer: !1
+		widgetContext: ve
 	}) : null, Se = !o && x ? /* @__PURE__ */ z(M, {
 		liveObject: k,
 		realtime: oe
@@ -1741,12 +1740,7 @@ function Ct({ title: n, recordId: i, editing: a, isNew: o, isRecordDeleted: s, d
 		title: u ? "Fix errors in child rows" : f ? "Fix the highlighted fields" : void 0,
 		children: l ? "Saving…" : "Save"
 	})] }) : !o && x ? P ? /* @__PURE__ */ B("span", {
-		style: {
-			display: "inline-flex",
-			alignItems: "center",
-			gap: 8,
-			flexWrap: "nowrap"
-		},
+		style: { display: "contents" },
 		children: [
 			we,
 			Se,

package/dist-lib/{SmartRecordListPage.impl-CwAiIcia.js → SmartRecordListPage.impl-Y0w4oIe3.js}

@@ -1,8 +1,8 @@
 import { s as e } from "./DynamicIcon-BWO6QtNF.js";
 import { A as t, En as n, Ln as r, N as i, Un as a, V as o, Wn as s, _n as c, an as l, cn as u, g as d, jn as f, kn as ee, mt as p, on as m, p as h, rn as g, v as _, vn as te } from "./ActionRunner-BrXXs8ga.js";
-import { $ as v, G as ne, Q as re, X as y, Z as b, _ as ie, a as x, c as S, et as C, nt as w, s as T, w as ae } from "./registry-Bnc6QkvA.js";
-import { b as E, d as D, f as O, g as k, m as oe, n as A, p as se, r as j, s as M } from "./useProperties-Bqr2yTii.js";
-import { t as N } from "./LayoutRenderer-BUIoUmFl.js";
+import { $ as v, G as ne, Q as re, X as y, Z as b, _ as ie, a as x, c as S, et as C, nt as w, s as T, w as ae } from "./registry-D_zbJrLC.js";
+import { b as E, d as D, f as O, g as k, m as oe, n as A, p as se, r as j, s as M } from "./useProperties-C_1KM72K.js";
+import { t as N } from "./LayoutRenderer-0UKE3pp6.js";
 import { useCallback as P, useEffect as F, useMemo as I, useRef as L, useState as ce } from "react";
 import { useSearchParams as le } from "react-router-dom";
 import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";

package/dist-lib/components/shared/PageHeader.d.ts

@@ -1,8 +1,16 @@
 import { type ReactNode } from "react";
 interface PageHeaderProps {
-    title: string;
+    /** Overrides the screen's declared name. Omit it: `<PageHeader />` renders the
+     *  screen's own `display.name` from the schema, already localized, so a rename or a
+     *  translation in YAML reaches the page instead of only the sidebar. Pass a string
+     *  only for a title the schema cannot know (a record's name, a wizard step). */
+    title?: string;
+    /** Overrides the screen's declared `display.description`. When either is present the
+     *  header shows the same small info affordance a list and a record already show;
+     *  when neither is, the header renders exactly as before. */
+    description?: string;
     backTo?: string;
     actions?: ReactNode;
 }
-export declare function PageHeader({ title, backTo, actions }: PageHeaderProps): import("react").JSX.Element | null;
+export declare function PageHeader({ title, description, backTo, actions }: PageHeaderProps): import("react").JSX.Element | null;
 export {};

package/dist-lib/components/shared/ResponsiveActionBar.d.ts

@@ -118,13 +118,23 @@ export interface ResponsiveActionBarProps {
     /** Rendering density / measurement strategy. */
     kind?: "detail" | "toolbar" | "row";
     /**
-     * When true (default) a kind="detail" bar stretches to `width: 100%` so it
-     * can measure the available width and overflow into a "More" menu. Set false
-     * when the bar shares a single flex row with other controls (e.g. the detail
-     * header's Refresh/Live pill): a 100%-width bar would wrap onto its own line.
-     * Content-sized is safe for the header slot, which carries few actions.
+     * Which edge the buttons sit on. The bar always takes the row's FREE space (that is
+     * what makes its width a granted number rather than one it produced itself), so this
+     * says where the buttons sit inside it. Trailing by default: every surface in the
+     * product puts its actions on the trailing edge.
      */
-    fillContainer?: boolean;
+    align?: "leading" | "trailing";
+    /**
+     * Whether the container constrains the bar at all. Default true.
+     *
+     * Set false ONLY when the container is sized by the bar's own content and no row
+     * grants it a width - today that is the floating bulk-selection pill. Measuring such
+     * a container compares the bar with itself: the fit test has zero headroom, one
+     * sub-pixel disagreement collapses a button into the menu, and the container then
+     * shrink-wraps around the menu so the button can never come back. An unconstrained
+     * bar renders every action inline and lets its container wrap.
+     */
+    constrain?: boolean;
     /**
      * Test seam: when provided, overrides the measurement decision for each
      * node. Return true = node fits inline; false = overflows to More.
@@ -195,7 +205,7 @@ interface LayoutDecision {
     /** Pinned trailing-anchor group; never overflows. Plan §3 partition. */
     destructiveInline: ResolvedActionLeaf[];
 }
-export declare function computeLayout(nodes: ResolvedActionLayoutNode[], containerWidth: number, reservedRightWidth: number, measuredWidths: Map<string, number>, entityActions: Record<string, Action> | undefined, globalActions: Record<string, Action> | undefined, measurementOverride?: (node: ResolvedActionLayoutNode) => boolean, prevInline?: ReadonlySet<string>): LayoutDecision;
+export declare function computeLayout(nodes: ResolvedActionLayoutNode[], containerWidth: number, reservedRightWidth: number, measuredWidths: Map<string, number>, entityActions: Record<string, Action> | undefined, globalActions: Record<string, Action> | undefined, measurementOverride?: (node: ResolvedActionLayoutNode) => boolean): LayoutDecision;
 /**
  * ResponsiveActionBar renders a resolved action layout tree.
  *
@@ -203,5 +213,5 @@ export declare function computeLayout(nodes: ResolvedActionLayoutNode[], contain
  * kind="row": single kebab "⋮" with all actions in dropdown.
  * kind default: "toolbar".
  */
-export declare function ResponsiveActionBar({ layout, row, rowSelection, onRun, reservedRightWidth, kind, fillContainer, measurementOverride, entityActions, globalActions, ariaLabel, trailingNormalItems, trailingDestructiveItems, widgetContext, onActionClick, }: ResponsiveActionBarProps): import("react").JSX.Element | null;
+export declare function ResponsiveActionBar({ layout, row, rowSelection, onRun, reservedRightWidth, kind, align, constrain, measurementOverride, entityActions, globalActions, ariaLabel, trailingNormalItems, trailingDestructiveItems, widgetContext, onActionClick, }: ResponsiveActionBarProps): import("react").JSX.Element | null;
 export {};

package/dist-lib/hooks/useCurrentScreen.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import type { Screen } from "../types/schema";
+/**
+ * The screen a component is currently rendering inside.
+ *
+ * Standard pages have always been told which screen they are (`SmartListPage`,
+ * `SmartDetailPage` and `SmartRecordListPage` all take `screenCode`). A CUSTOM screen
+ * was told nothing - it was mounted as a bare `<Component />` - so it could not read
+ * its own declaration and had no choice but to hardcode what the schema already said.
+ * That is why a screen renamed or translated in YAML kept an English literal in its
+ * header while the sidebar followed the schema.
+ *
+ * This context closes that gap: every routed screen, custom included, is rendered
+ * inside it, so any component in the tree can ask what it is looking at without prop
+ * drilling. `PageHeader` uses it to default its title and description - which is what
+ * makes `<PageHeader />` with no props the correct, complete header for a custom screen.
+ */
+export interface CurrentScreen {
+    /** The screen's code in the schema (e.g. `events_compare`). */
+    code: string;
+    /** Its full declaration, or undefined if the schema has not loaded yet. */
+    screen: Screen | undefined;
+}
+export declare function CurrentScreenProvider({ code, children, }: {
+    code: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The screen this component is rendering inside, or undefined outside a routed screen.
+ *
+ * Use it to read anything the schema already declares - the localized name, the
+ * description, the entity, the route - instead of restating it in the component.
+ */
+export declare function useCurrentScreen(): CurrentScreen | undefined;

package/dist-lib/index.d.ts

@@ -15,6 +15,8 @@ export type { BatchOp, BatchOpResult, BatchResponse } from "./api/batch";
 export { useSchema } from "./hooks/useSchema";
 export { useEntity } from "./hooks/useEntity";
 export { useScreen } from "./hooks/useScreen";
+export { useCurrentScreen } from "./hooks/useCurrentScreen";
+export type { CurrentScreen } from "./hooks/useCurrentScreen";
 export { useAuth } from "./hooks/useAuth";
 export { useEntityData, useEntityCount, entityDataQueryKey } from "./hooks/useEntityData";
 export { useCursorEntityData, cursorEntityDataQueryKey, cursorEntityStableKey, } from "./hooks/useCursorEntityData";
@@ -37,6 +39,7 @@ export { useColumns } from "./hooks/useColumns";
 export { useViews } from "./hooks/useViews";
 export { useParams, useNavigate, useLocation, useSearchParams } from "react-router-dom";
 export { registerScreen } from "./stores/screen-registry";
+export type { CustomScreenProps } from "./stores/screen-registry";
 export { setIconRegistry, getIcon } from "./stores/icon-registry";
 export type { IconDef } from "./stores/icon-registry";
 export { registerLayoutWidget, getLayoutWidget, hasLayoutWidget, type LayoutWidget, type LayoutWidgetProps, } from "./components/detail-layout/widgets/registry";