foldkit 0.101.0 → 0.102.1

package/dist/ui/datePicker/index.js

@@ -1,7 +1,7 @@
-import { Effect, Match as M, Option, Schema as S } from 'effect';
+import { Function, Match as M, Option, Schema as S } from 'effect';
 import * as Calendar from '../../calendar/index.js';
 import * as Command from '../../command/index.js';
-import { createLazy, html, } from '../../html/index.js';
+import { defineView, html, } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 import * as UiCalendar from '../calendar/index.js';
@@ -27,7 +27,9 @@ export const GotPopoverMessage = m('GotPopoverMessage', {
 });
 /** Sent when the user commits a date via click or keyboard. Updates the
  * selected date, syncs the calendar, and closes the popover. */
-export const SelectedDate = m('SelectedDate', { date: Calendar.CalendarDate });
+export const RequestedSelectDate = m('RequestedSelectDate', {
+    date: Calendar.CalendarDate,
+});
 /** Sent when the user clears the selected date. Does not close the popover. */
 export const Cleared = m('Cleared');
 /** Sent when the popover should open. Triggers focus-grid on the embedded
@@ -40,7 +42,7 @@ export const Closed = m('Closed');
 export const Message = S.Union([
     GotCalendarMessage,
     GotPopoverMessage,
-    SelectedDate,
+    RequestedSelectDate,
     Cleared,
     Opened,
     Closed,
@@ -52,10 +54,14 @@ export const ChangedViewMonth = m('ChangedViewMonth', {
     year: S.Int,
     month: S.Int,
 });
-/** The date picker's OutMessage. Matches Calendar — only `ChangedViewMonth`.
- * Date selection goes through the `onSelectedDate` ViewConfig callback, not
- * OutMessage. */
-export const OutMessage = ChangedViewMonth;
+/** Emitted when the user commits a date selection (propagated from the
+ * embedded Calendar). The popover has already closed; the parent reads the
+ * committed date and lifts it into domain state. */
+export const SelectedDate = m('SelectedDate', {
+    date: Calendar.CalendarDate,
+});
+/** Union of out-messages the date picker can produce. */
+export const OutMessage = S.Union([ChangedViewMonth, SelectedDate]);
 /** Creates an initial date picker model from a config. The calendar and
  * popover submodels are created with derived ids so their DOM elements stay
  * addressable. The popover is opened in `contentFocus` mode so focus lands on
@@ -86,26 +92,57 @@ export const init = (config) => ({
     }),
 });
 const withUpdateReturn = M.withReturnType();
-const mapCalendarCommands = (commands) => commands.map(Command.mapEffect(Effect.map(message => GotCalendarMessage({ message }))));
-const mapPopoverCommands = (commands) => commands.map(Command.mapEffect(Effect.map(message => GotPopoverMessage({ message }))));
-const mapCalendarOutMessage = (maybeOutMessage) => Option.map(maybeOutMessage, M.type().pipe(M.tagsExhaustive({
-    ChangedViewMonth: ({ year, month }) => ChangedViewMonth({ year, month }),
-})));
+const mapCalendarCommands = (commands) => Command.mapMessages(commands, message => GotCalendarMessage({ message }));
+const mapPopoverCommands = (commands) => Command.mapMessages(commands, message => GotPopoverMessage({ message }));
 const delegateToCalendar = (model, calendarMessage) => {
     const [nextCalendar, calendarCommands, maybeCalendarOutMessage] = UiCalendar.update(model.calendar, calendarMessage);
-    return [
-        evo(model, { calendar: () => nextCalendar }),
-        mapCalendarCommands(calendarCommands),
-        mapCalendarOutMessage(maybeCalendarOutMessage),
-    ];
+    const modelWithCalendar = evo(model, { calendar: () => nextCalendar });
+    return Option.match(maybeCalendarOutMessage, {
+        onNone: () => [
+            modelWithCalendar,
+            mapCalendarCommands(calendarCommands),
+            Option.none(),
+        ],
+        onSome: M.type().pipe(M.withReturnType(), M.tagsExhaustive({
+            ChangedViewMonth: ({ year, month }) => [
+                modelWithCalendar,
+                mapCalendarCommands(calendarCommands),
+                Option.some(ChangedViewMonth({ year, month })),
+            ],
+            SelectedDate: ({ date }) => {
+                const [nextPopover, popoverCommands] = Popover.close(model.popover);
+                return [
+                    evo(modelWithCalendar, {
+                        maybeSelectedDate: () => Option.some(date),
+                        popover: () => nextPopover,
+                    }),
+                    [
+                        ...mapCalendarCommands(calendarCommands),
+                        ...mapPopoverCommands(popoverCommands),
+                    ],
+                    Option.some(SelectedDate({ date })),
+                ];
+            },
+        })),
+    });
 };
 const delegateToPopover = (model, popoverMessage) => {
-    const [nextPopover, popoverCommands] = Popover.update(model.popover, popoverMessage);
-    return [
-        evo(model, { popover: () => nextPopover }),
-        mapPopoverCommands(popoverCommands),
-        Option.none(),
-    ];
+    const [nextPopover, popoverCommands, maybePopoverOutMessage] = Popover.update(model.popover, popoverMessage);
+    const modelWithPopover = evo(model, { popover: () => nextPopover });
+    return Option.match(maybePopoverOutMessage, {
+        onNone: () => [
+            modelWithPopover,
+            mapPopoverCommands(popoverCommands),
+            Option.none(),
+        ],
+        onSome: () => [
+            evo(modelWithPopover, {
+                calendar: () => UiCalendar.dropToDays(modelWithPopover.calendar),
+            }),
+            mapPopoverCommands(popoverCommands),
+            Option.none(),
+        ],
+    });
 };
 /** Processes a date picker message and returns the next model, commands, and
  * optional OutMessage. */
@@ -134,7 +171,7 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
             Option.none(),
         ];
     },
-    SelectedDate: ({ date }) => {
+    RequestedSelectDate: ({ date }) => {
         const [nextCalendar, calendarCommands] = UiCalendar.selectDate(model.calendar, date);
         const [nextPopover, popoverCommands] = Popover.close(model.popover);
         return [
@@ -147,105 +184,123 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
                 ...mapCalendarCommands(calendarCommands),
                 ...mapPopoverCommands(popoverCommands),
             ],
-            Option.none(),
+            Option.some(SelectedDate({ date })),
         ];
     },
     Cleared: () => [
-        evo(model, { maybeSelectedDate: () => Option.none() }),
+        evo(model, {
+            maybeSelectedDate: () => Option.none(),
+            calendar: UiCalendar.reflectSelectedDate(Option.none()),
+        }),
         [],
         Option.none(),
     ],
 }));
 /** Programmatically opens the date picker, updating the model and returning
  * focus and popover commands. Use this in domain-event handlers. */
-export const open = (model) => {
-    const [nextModel, commands] = toModelAndCommands(update(model, Opened()));
-    return [nextModel, commands];
-};
+export const open = (model) => update(model, Opened());
 /** Programmatically closes the date picker. Use this in domain-event handlers. */
-export const close = (model) => {
-    const [nextModel, commands] = toModelAndCommands(update(model, Closed()));
-    return [nextModel, commands];
-};
-/** Programmatically selects a date, committing it and closing the popover. */
-export const selectDate = (model, date) => {
-    const [nextModel, commands] = toModelAndCommands(update(model, SelectedDate({ date })));
-    return [nextModel, commands];
-};
+export const close = (model) => update(model, Closed());
+/** Programmatically selects a date, committing it and closing the popover. Emits a `SelectedDate` OutMessage just like a user-initiated selection. */
+export const selectDate = (model, date) => update(model, RequestedSelectDate({ date }));
 /** Programmatically clears the selected date. */
-export const clear = (model) => {
-    const [nextModel, commands] = toModelAndCommands(update(model, Cleared()));
-    return [nextModel, commands];
-};
-/** Sets the minimum selectable date on the embedded calendar. Pass
+export const clear = (model) => update(model, Cleared());
+/** Reflects an externally-sourced selected date onto the date picker
+ *  without emitting an OutMessage or touching the popover. Sets the
+ *  picker's selection and reflects it onto the embedded calendar (moving
+ *  the calendar's view to the date), mirroring `selectDate`'s state change
+ *  minus the `SelectedDate` announcement and the popover close. Pass
+ *  `Option.none()` to clear. Use this to mirror external truth (a URL
+ *  parameter, a saved draft) onto the picker. Contrast with `selectDate`,
+ *  a user or programmatic *choice* that emits `SelectedDate`. Returns the
+ *  model directly because it produces no commands and no OutMessage. */
+export const reflectSelectedDate = Function.dual(2, (model, maybeDate) => evo(model, {
+    maybeSelectedDate: () => maybeDate,
+    calendar: () => UiCalendar.reflectSelectedDate(model.calendar, maybeDate),
+}));
+/** Reflects the minimum selectable date onto the embedded calendar. Pass
  * `Option.none()` to remove the minimum. Use this when the minimum derives
  * from other Model state (e.g. a start date field whose current selection
  * constrains an end date picker).
  *
- * Does NOT reconcile the current selection — if a previously-selected date
+ * Does NOT reconcile the current selection. If a previously-selected date
  * is now below the new minimum, it remains selected. Callers should `clear`
  * or reassign the selection explicitly if their domain requires it. */
-export const setMinDate = (model, maybeMinDate) => evo(model, {
-    calendar: () => UiCalendar.setMinDate(model.calendar, maybeMinDate),
-});
-/** Sets the maximum selectable date on the embedded calendar. Pass
+export const reflectMinDate = Function.dual(2, (model, maybeMinDate) => evo(model, {
+    calendar: () => UiCalendar.reflectMinDate(model.calendar, maybeMinDate),
+}));
+/** Reflects the maximum selectable date onto the embedded calendar. Pass
  * `Option.none()` to remove the maximum. Does NOT reconcile the current
  * selection. */
-export const setMaxDate = (model, maybeMaxDate) => evo(model, {
-    calendar: () => UiCalendar.setMaxDate(model.calendar, maybeMaxDate),
-});
-/** Sets the list of individually-disabled dates on the embedded calendar.
- * Pass an empty array to clear. Does NOT reconcile the current selection. */
-export const setDisabledDates = (model, disabledDates) => evo(model, {
-    calendar: () => UiCalendar.setDisabledDates(model.calendar, disabledDates),
-});
-/** Sets the days of the week that are disabled on the embedded calendar
+export const reflectMaxDate = Function.dual(2, (model, maybeMaxDate) => evo(model, {
+    calendar: () => UiCalendar.reflectMaxDate(model.calendar, maybeMaxDate),
+}));
+/** Reflects the list of individually-disabled dates onto the embedded
+ * calendar. Pass an empty array to clear. Does NOT reconcile the current
+ * selection. */
+export const reflectDisabledDates = Function.dual(2, (model, disabledDates) => evo(model, {
+    calendar: () => UiCalendar.reflectDisabledDates(model.calendar, disabledDates),
+}));
+/** Reflects the days of the week that are disabled onto the embedded calendar
  * (e.g. weekends). Pass an empty array to clear. Does NOT reconcile the
  * current selection. */
-export const setDisabledDaysOfWeek = (model, disabledDaysOfWeek) => evo(model, {
-    calendar: () => UiCalendar.setDisabledDaysOfWeek(model.calendar, disabledDaysOfWeek),
-});
-const toModelAndCommands = (result) => {
-    const [nextModel, commands] = result;
-    return [nextModel, commands];
-};
+export const reflectDisabledDaysOfWeek = Function.dual(2, (model, disabledDaysOfWeek) => evo(model, {
+    calendar: () => UiCalendar.reflectDisabledDaysOfWeek(model.calendar, disabledDaysOfWeek),
+}));
 // VIEW
 const encodeIsoDate = S.encodeSync(Calendar.CalendarDateFromIsoString);
 /** Renders an accessible date picker: a trigger button that opens a popover
  * containing an accessible calendar grid. The date picker assembles the
- * embedded Calendar and Popover components into one flat API — consumers
+ * embedded Calendar and Popover components into one flat API. Consumers
  * provide the trigger face and the calendar grid layout, DatePicker handles
  * focus choreography, open/close state, and form submission. */
-export const view = (config) => {
+export const view = defineView((model, viewInputs) => {
     const h = html();
-    const { model, toParentMessage, onSelectedDate, anchor, triggerContent, toCalendarView, isDisabled, name, className, attributes = [], triggerClassName, triggerAttributes = [], panelClassName, panelAttributes = [], backdropClassName, backdropAttributes = [], } = config;
-    const dispatchSelectedDate = (date) => onSelectedDate !== undefined
-        ? onSelectedDate(date)
-        : toParentMessage(SelectedDate({ date }));
-    const calendarVNode = UiCalendar.view({
+    const { anchor, triggerContent, toCalendarView, isDisabled, name, className, attributes = [], triggerClassName, triggerAttributes = [], panelClassName, panelAttributes = [], backdropClassName, backdropAttributes = [], } = viewInputs;
+    const calendarVNode = h.submodel({
+        slotId: model.calendar.id,
         model: model.calendar,
-        toParentMessage: message => toParentMessage(GotCalendarMessage({ message })),
-        onSelectedDate: dispatchSelectedDate,
-        toView: toCalendarView,
+        view: UiCalendar.view,
+        viewInputs: { toView: toCalendarView },
+        toParentMessage: message => GotCalendarMessage({ message }),
     });
-    const popoverVNode = Popover.view({
+    const popoverVNode = h.submodel({
+        slotId: model.popover.id,
         model: model.popover,
-        toParentMessage: message => toParentMessage(GotPopoverMessage({ message })),
-        onOpened: () => toParentMessage(Opened()),
-        onClosed: () => toParentMessage(Closed()),
-        anchor,
-        buttonContent: triggerContent(model.maybeSelectedDate),
-        panelContent: calendarVNode,
-        focusSelector: `#${model.calendar.id}-grid`,
-        ...(isDisabled !== undefined && { isDisabled }),
-        ...(triggerClassName !== undefined && {
-            buttonClassName: triggerClassName,
-        }),
-        buttonAttributes: triggerAttributes,
-        ...(panelClassName !== undefined && { panelClassName }),
-        panelAttributes,
-        ...(backdropClassName !== undefined && { backdropClassName }),
-        backdropAttributes,
+        view: Popover.view,
+        viewInputs: {
+            anchor,
+            ...(isDisabled !== undefined && { isDisabled }),
+            focusSelector: `#${model.calendar.id}-grid`,
+            toView: ({ button, panel, backdrop, isVisible }) => h.div([], [
+                h.button([
+                    ...button,
+                    ...(triggerClassName !== undefined
+                        ? [h.Class(triggerClassName)]
+                        : []),
+                    ...triggerAttributes,
+                ], [triggerContent(model.maybeSelectedDate)]),
+                ...(isVisible
+                    ? [
+                        h.div([
+                            ...backdrop,
+                            ...(backdropClassName !== undefined
+                                ? [h.Class(backdropClassName)]
+                                : []),
+                            ...backdropAttributes,
+                        ], []),
+                        h.div([
+                            ...panel,
+                            ...(panelClassName !== undefined
+                                ? [h.Class(panelClassName)]
+                                : []),
+                            ...panelAttributes,
+                        ], [calendarVNode]),
+                    ]
+                    : []),
+            ]),
+        },
+        toParentMessage: message => GotPopoverMessage({ message }),
     });
     const hiddenInputValue = Option.match(model.maybeSelectedDate, {
         onNone: () => '',
@@ -259,14 +314,4 @@ export const view = (config) => {
         ...attributes,
     ];
     return h.div(wrapperAttributes, [popoverVNode, ...maybeHiddenInput]);
-};
-/** Creates a memoized date picker view. Static config is captured in a closure;
- *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
-export const lazy = (staticConfig) => {
-    const lazyView = createLazy();
-    return (model, toParentMessage) => lazyView((currentModel, currentToParentMessage) => view({
-        ...staticConfig,
-        model: currentModel,
-        toParentMessage: currentToParentMessage,
-    }), [model, toParentMessage]);
-};
+});

package/dist/ui/datePicker/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, open, close, selectDate, clear, setMinDate, setMaxDate, setDisabledDates, setDisabledDaysOfWeek, Model, Message, OutMessage, GotCalendarMessage, GotPopoverMessage, SelectedDate, Cleared, Opened, Closed, ChangedViewMonth, } from './index.js';
-export type { InitConfig, ViewConfig } from './index.js';
+export { init, update, view, open, close, selectDate, clear, reflectSelectedDate, reflectMinDate, reflectMaxDate, reflectDisabledDates, reflectDisabledDaysOfWeek, Model, Message, OutMessage, GotCalendarMessage, GotPopoverMessage, RequestedSelectDate, SelectedDate, Cleared, Opened, Closed, ChangedViewMonth, } from './index.js';
+export type { InitConfig, ViewInputs } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/ui/datePicker/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/datePicker/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,EACL,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACP,MAAM,EACN,MAAM,EACN,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/datePicker/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,KAAK,EACL,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,OAAO,EACP,MAAM,EACN,MAAM,EACN,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}

package/dist/ui/datePicker/public.js

@@ -1 +1 @@
-export { init, update, view, lazy, open, close, selectDate, clear, setMinDate, setMaxDate, setDisabledDates, setDisabledDaysOfWeek, Model, Message, OutMessage, GotCalendarMessage, GotPopoverMessage, SelectedDate, Cleared, Opened, Closed, ChangedViewMonth, } from './index.js';
+export { init, update, view, open, close, selectDate, clear, reflectSelectedDate, reflectMinDate, reflectMaxDate, reflectDisabledDates, reflectDisabledDaysOfWeek, Model, Message, OutMessage, GotCalendarMessage, GotPopoverMessage, RequestedSelectDate, SelectedDate, Cleared, Opened, Closed, ChangedViewMonth, } from './index.js';

package/dist/ui/dialog/index.d.ts

@@ -1,6 +1,6 @@
-import { Effect, Schema as S } from 'effect';
+import { Effect, Option, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { type Attribute, type Html } from '../../html/index.js';
+import { type ChildAttribute, type Html } from '../../html/index.js';
 /** Schema for the dialog component's state, tracking its unique ID, open/closed status, animation support, and animation lifecycle phase. */
 export declare const Model: S.Struct<{
     readonly id: S.String;
@@ -15,12 +15,12 @@ export declare const Model: S.Struct<{
 }>;
 export type Model = typeof Model.Type;
 /** Sent when the dialog should open. Triggers the showModal command. */
-export declare const Opened: import("../../schema/index.js").CallableTaggedStruct<"Opened", {}>;
-/** Sent when the dialog should close (Escape key, backdrop click, or programmatic). Triggers the closeModal command. */
-export declare const Closed: import("../../schema/index.js").CallableTaggedStruct<"Closed", {}>;
-/** Sent when the show-dialog command completes (scroll lock + showModal). */
+export declare const RequestedOpen: import("../../schema/index.js").CallableTaggedStruct<"RequestedOpen", {}>;
+/** Sent when the dialog should close (Escape key, backdrop click, or programmatic). */
+export declare const RequestedClose: import("../../schema/index.js").CallableTaggedStruct<"RequestedClose", {}>;
+/** Sent when the show-dialog command completes. */
 export declare const CompletedShowDialog: import("../../schema/index.js").CallableTaggedStruct<"CompletedShowDialog", {}>;
-/** Sent when the close-dialog command completes (closeModal + scroll unlock). */
+/** Sent when the close-dialog command completes. */
 export declare const CompletedCloseDialog: import("../../schema/index.js").CallableTaggedStruct<"CompletedCloseDialog", {}>;
 /** Wraps an Animation submodel message for delegation. */
 export declare const GotAnimationMessage: import("../../schema/index.js").CallableTaggedStruct<"GotAnimationMessage", {
@@ -28,18 +28,33 @@ export declare const GotAnimationMessage: import("../../schema/index.js").Callab
 }>;
 /** Union of all messages the dialog component can produce. */
 export declare const Message: S.Union<[
-    typeof Opened,
-    typeof Closed,
+    typeof RequestedOpen,
+    typeof RequestedClose,
     typeof CompletedShowDialog,
     typeof CompletedCloseDialog,
     typeof GotAnimationMessage
 ]>;
-export type Opened = typeof Opened.Type;
-export type Closed = typeof Closed.Type;
+export type RequestedOpen = typeof RequestedOpen.Type;
+export type RequestedClose = typeof RequestedClose.Type;
 export type CompletedShowDialog = typeof CompletedShowDialog.Type;
 export type CompletedCloseDialog = typeof CompletedCloseDialog.Type;
 export type Message = typeof Message.Type;
-/** Configuration for creating a dialog model with `init`. `isAnimated` enables animation coordination (default `false`). */
+/** Sent once the dialog has transitioned to open. Fires after `update`
+ *  has processed `RequestedOpen` and `isOpen` reflects the new state.
+ *  Programmatic `Dialog.open` on an already-open model is a no-op that
+ *  does not re-emit. */
+export declare const Opened: import("../../schema/index.js").CallableTaggedStruct<"Opened", {}>;
+/** Sent once the dialog has transitioned to closed. Programmatic
+ *  `Dialog.close` on an already-closed model is a no-op that does not
+ *  re-emit; calling close while a leave animation is in progress is
+ *  also a no-op. */
+export declare const Closed: import("../../schema/index.js").CallableTaggedStruct<"Closed", {}>;
+/** Union of out-messages the dialog component can produce. */
+export declare const OutMessage: S.Union<readonly [import("../../schema/index.js").CallableTaggedStruct<"Opened", {}>, import("../../schema/index.js").CallableTaggedStruct<"Closed", {}>]>;
+export type Opened = typeof Opened.Type;
+export type Closed = typeof Closed.Type;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a dialog model with `init`. */
 export type InitConfig = Readonly<{
     id: string;
     isOpen?: boolean;
@@ -48,7 +63,11 @@ export type InitConfig = Readonly<{
 }>;
 /** Creates an initial dialog model from a config. Defaults to closed and non-animated. */
 export declare const init: (config: InitConfig) => Model;
-type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>];
+type UpdateReturn = readonly [
+    Model,
+    ReadonlyArray<Command.Command<Message>>,
+    Option.Option<OutMessage>
+];
 /** Locks page scroll and calls `showModal()` on the native dialog element. */
 export declare const ShowDialog: Command.CommandDefinitionWithArgs<"ShowDialog", {
     id: S.String;
@@ -64,36 +83,73 @@ export declare const CloseDialog: Command.CommandDefinitionWithArgs<"CloseDialog
 }, never, never>>;
 /** Processes a dialog message and returns the next model and commands. */
 export declare const update: (model: Model, message: Message) => UpdateReturn;
+/** Programmatically opens the dialog. */
+export declare const open: (model: Model) => UpdateReturn;
+/** Programmatically closes the dialog. */
+export declare const close: (model: Model) => UpdateReturn;
 /** Returns the ID used for `aria-labelledby` on the dialog. Apply this to your title element. */
 export declare const titleId: (model: Model) => string;
 /** Returns the ID used for `aria-describedby` on the dialog. Apply this to your description element. */
 export declare const descriptionId: (model: Model) => string;
-/** Configuration for rendering a dialog with `view`. */
-export type ViewConfig<ParentMessage> = Readonly<{
-    model: Model;
-    toParentMessage: (message: Closed | CompletedShowDialog | CompletedCloseDialog) => ParentMessage;
-    onClosed?: () => ParentMessage;
-    panelContent: Html;
-    panelClassName?: string;
-    panelAttributes?: ReadonlyArray<Attribute<ParentMessage>>;
-    backdropClassName?: string;
-    backdropAttributes?: ReadonlyArray<Attribute<ParentMessage>>;
-    className?: string;
-    attributes?: ReadonlyArray<Attribute<ParentMessage>>;
+/** Render-time payload published to the consumer's `toView`.
+ *
+ *  - `dialog`: attributes for the native `<dialog>` element. Carries
+ *    the id, ARIA labelling, `open` prop, positioning style, and the
+ *    `OnCancel` handler that wires Escape to `RequestedClose`. The
+ *    consumer MUST render an `h.dialog(...)` element so the framework's
+ *    `showModal`/`close()` commands can target it.
+ *  - `backdrop`: attributes for the backdrop element. Includes the
+ *    Animation data attributes and the `OnClick` handler that closes
+ *    the dialog on outside-click (suppressed while a leave animation
+ *    is in progress).
+ *  - `panel`: attributes for the panel element. Includes the panel id
+ *    (`${model.id}-panel`) and the Animation data attributes.
+ *  - `isVisible`: derived from `isOpen` and the Animation
+ *    `transitionState`. The consumer renders backdrop + panel only
+ *    while this is true. */
+export type RenderInfo = Readonly<{
+    dialog: ReadonlyArray<ChildAttribute>;
+    backdrop: ReadonlyArray<ChildAttribute>;
+    panel: ReadonlyArray<ChildAttribute>;
+    isVisible: boolean;
+}>;
+/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
+export type ViewInputs = Readonly<{
+    toView: (render: RenderInfo) => Html;
 }>;
-/** Programmatically opens the dialog, updating the model and returning
- *  show commands. Use this in domain-event handlers to open the dialog. */
-export declare const open: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-/** Programmatically closes the dialog, updating the model and returning
- *  close commands. Use this in domain-event handlers when the dialog uses `onClosed`. */
-export declare const close: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-/** Renders a headless dialog component backed by the native `<dialog>` element with `showModal()`. */
-export declare const view: <ParentMessage>(config: ViewConfig<ParentMessage>) => Html;
-/** Creates a memoized dialog view. Static config (className, panelClassName,
- *  etc.) is captured in a closure. Dynamic fields — `model`, `toParentMessage`,
- *  and `panelContent` — are compared by reference per render via `createLazy`.
- *  When any of them change, the view re-renders; otherwise the cached VNode is
- *  reused and snabbdom skips the entire subtree. */
-export declare const lazy: <ParentMessage>(staticConfig: Omit<ViewConfig<ParentMessage>, "model" | "toParentMessage" | "onClosed" | "panelContent">) => ((model: Model, toParentMessage: ViewConfig<ParentMessage>["toParentMessage"], panelContent: Html) => Html);
+/** Renders a headless dialog component backed by the native `<dialog>`
+ *  element with `showModal()`. */
+export declare const view: import("../../html/submodel.js").SubmodelView<{
+    readonly id: string;
+    readonly isOpen: boolean;
+    readonly isAnimated: boolean;
+    readonly animation: {
+        readonly id: string;
+        readonly isShowing: boolean;
+        readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+    };
+    readonly maybeFocusSelector: Option.Option<string>;
+}, {
+    readonly _tag: "RequestedOpen";
+} | {
+    readonly _tag: "RequestedClose";
+} | {
+    readonly _tag: "CompletedShowDialog";
+} | {
+    readonly _tag: "CompletedCloseDialog";
+} | {
+    readonly _tag: "GotAnimationMessage";
+    readonly message: {
+        readonly _tag: "Showed";
+    } | {
+        readonly _tag: "Hid";
+    } | {
+        readonly _tag: "AdvancedAnimationFrame";
+    } | {
+        readonly _tag: "EndedAnimation";
+    };
+}, Readonly<{
+    toView: (render: RenderInfo) => Html;
+}>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"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"}