@foldkit/ui 0.127.0 → 0.128.1

package/dist/slider/index.js

@@ -9,23 +9,30 @@ import * as Subscription from 'foldkit/subscription';
 const Idle = ts('Idle');
 const Dragging = ts('Dragging', { originValue: S.Number });
 const DragState = S.Union([Idle, Dragging]);
-/** Schema for the slider component's state. Tracks the current value, the
- *  range (min/max/step), and the active drag phase. */
+/** Schema for the slider component's private interaction state. The current
+ *  value is owned by the parent and passed in via `ViewInputs.value`, so it is
+ *  not stored here. `min`/`max`/`step` are configuration the drag subscription
+ *  reads to map pointer positions into values. `dragState` tracks the active
+ *  drag phase and captures the pre-drag value so Escape can restore it. */
 export const Model = S.Struct({
     id: S.String,
-    value: S.Number,
     min: S.Number,
     max: S.Number,
     step: S.Number,
     dragState: DragState,
 });
 // MESSAGE
-/** The user pressed the thumb. Starts a drag without changing the value. */
-export const PressedThumb = m('PressedThumb');
+/** The user pressed the thumb. Starts a drag without changing the value. The
+ *  view supplies `originValue`, the current value, so Escape can restore it. */
+export const PressedThumb = m('PressedThumb', { originValue: S.Number });
 /** The user pressed the track. Starts a drag and snaps the value to the
  *  cursor position. Ignored while already dragging, which absorbs the bubble
- *  from a thumb press so the value is not shifted. */
-export const PressedPointer = m('PressedPointer', { value: S.Number });
+ *  from a thumb press so the value is not shifted. `originValue` is the current
+ *  value the drag restores to on Escape. */
+export const PressedPointer = m('PressedPointer', {
+    value: S.Number,
+    originValue: S.Number,
+});
 /** The pointer moved during a drag, producing a new snapped value from the
  *  cursor position within the track. */
 export const MovedDragPointer = m('MovedDragPointer', { value: S.Number });
@@ -33,7 +40,8 @@ export const MovedDragPointer = m('MovedDragPointer', { value: S.Number });
 export const ReleasedDragPointer = m('ReleasedDragPointer');
 /** Escape was pressed during a drag. Restores the value from the drag origin. */
 export const CancelledDrag = m('CancelledDrag');
-/** The user pressed a keyboard navigation key on the focused thumb. */
+/** The user pressed a keyboard navigation key on the focused thumb. The view
+ *  supplies `value`, the current value, to compute the next one from. */
 export const PressedKeyboardNavigation = m('PressedKeyboardNavigation', {
     direction: S.Literals([
         'StepDecrement',
@@ -43,6 +51,7 @@ export const PressedKeyboardNavigation = m('PressedKeyboardNavigation', {
         'Min',
         'Max',
     ]),
+    value: S.Number,
 });
 /** Union of all messages the slider component can produce. */
 export const Message = S.Union([
@@ -60,11 +69,10 @@ export const Message = S.Union([
 export const ChangedValue = m('ChangedValue', { value: S.Number });
 /** Union of all out-messages the slider component can emit to its parent. */
 export const OutMessage = S.Union([ChangedValue]);
-/** Creates an initial slider model from a config. The initial value is
- *  snapped to the step and clamped into range. */
+/** Creates an initial slider model from a config. The value lives in the
+ *  parent Model; initialize it there and snap it with {@link snapAndClamp}. */
 export const init = (config) => ({
     id: config.id,
-    value: snapAndClamp(config.initialValue, config.min, config.max, config.step),
     min: config.min,
     max: config.max,
     step: config.step,
@@ -83,43 +91,37 @@ const roundToStepPrecision = (value, step) => {
     return Number(value.toFixed(decimals));
 };
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-const snapAndClamp = (value, min, max, step) => {
+/** Snaps a value to the nearest step and clamps it into `[min, max]`. Exported
+ *  so a parent can conform the value it owns to the slider's range, for example
+ *  when seeding the initial value or reacting to an external update. */
+export const snapAndClamp = (value, min, max, step) => {
     const snapped = min + Math.round((value - min) / step) * step;
     return roundToStepPrecision(clamp(snapped, min, max), step);
 };
 /** Computes the fraction (0–1) of a value between min and max. Returns 0 when
  *  the range has zero width. */
-export const fractionOfValue = (model) => {
-    const range = model.max - model.min;
+export const fractionOfValue = (value, min, max) => {
+    const range = max - min;
     if (range <= 0) {
         return 0;
     }
     else {
-        return clamp((model.value - model.min) / range, 0, 1);
+        return clamp((value - min) / range, 0, 1);
     }
 };
 const PAGE_STEP_MULTIPLIER = 10;
-const nextValueForDirection = (model, direction) => M.value(direction).pipe(M.withReturnType(), M.when('StepIncrement', () => snapAndClamp(model.value + model.step, model.min, model.max, model.step)), M.when('StepDecrement', () => snapAndClamp(model.value - model.step, model.min, model.max, model.step)), M.when('PageIncrement', () => snapAndClamp(model.value + model.step * PAGE_STEP_MULTIPLIER, model.min, model.max, model.step)), M.when('PageDecrement', () => snapAndClamp(model.value - model.step * PAGE_STEP_MULTIPLIER, model.min, model.max, model.step)), M.when('Min', () => model.min), M.when('Max', () => model.max), M.exhaustive);
+const nextValueForDirection = (value, min, max, step, direction) => M.value(direction).pipe(M.withReturnType(), M.when('StepIncrement', () => snapAndClamp(value + step, min, max, step)), M.when('StepDecrement', () => snapAndClamp(value - step, min, max, step)), M.when('PageIncrement', () => snapAndClamp(value + step * PAGE_STEP_MULTIPLIER, min, max, step)), M.when('PageDecrement', () => snapAndClamp(value - step * PAGE_STEP_MULTIPLIER, min, max, step)), M.when('Min', () => min), M.when('Max', () => max), M.exhaustive);
 const withUpdateReturn = M.withReturnType();
-const withValue = (model, nextValue, commands) => {
-    if (nextValue === model.value) {
-        return [model, commands, Option.none()];
-    }
-    else {
-        return [
-            evo(model, { value: () => nextValue }),
-            commands,
-            Option.some(ChangedValue({ value: nextValue })),
-        ];
-    }
-};
+const changedValueOption = (currentValue, nextValue) => nextValue === currentValue
+    ? Option.none()
+    : Option.some(ChangedValue({ value: nextValue }));
 /** Processes a slider message and returns the next model, commands, and an
- *  optional out-message for the parent. */
+ *  optional out-message for the parent. The value lives in the parent Model:
+ *  the view supplies the current value on the messages that need it, and value
+ *  changes surface as `ChangedValue` rather than mutating this Model. */
 export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
-    PressedThumb: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => [
-        evo(model, {
-            dragState: () => Dragging({ originValue: model.value }),
-        }),
+    PressedThumb: ({ originValue }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => [
+        evo(model, { dragState: () => Dragging({ originValue }) }),
         [],
         Option.none(),
     ])),
@@ -129,48 +131,45 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
     // from the thumb's current position. Fine-grained sliders (e.g. step
     // 0.05) see a visible jump without this guard, because the cursor sits
     // off-center on a non-zero-width thumb.
-    PressedPointer: ({ value }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => {
+    PressedPointer: ({ value, originValue }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => {
         const snapped = snapAndClamp(value, model.min, model.max, model.step);
-        const [modelWithValue, commands, maybeOutMessage] = withValue(model, snapped, []);
         return [
-            evo(modelWithValue, {
-                dragState: () => Dragging({ originValue: model.value }),
-            }),
-            commands,
-            maybeOutMessage,
+            evo(model, { dragState: () => Dragging({ originValue }) }),
+            [],
+            changedValueOption(originValue, snapped),
         ];
     })),
-    MovedDragPointer: ({ value }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => withValue(model, snapAndClamp(value, model.min, model.max, model.step), [])), M.orElse(() => [model, [], Option.none()])),
+    MovedDragPointer: ({ value }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [
+        model,
+        [],
+        Option.some(ChangedValue({
+            value: snapAndClamp(value, model.min, model.max, model.step),
+        })),
+    ]), M.orElse(() => [model, [], Option.none()])),
     ReleasedDragPointer: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [
         evo(model, { dragState: () => Idle() }),
         [],
         Option.none(),
     ]), M.orElse(() => [model, [], Option.none()])),
-    CancelledDrag: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', ({ originValue }) => {
-        const restored = evo(model, {
-            dragState: () => Idle(),
-        });
-        return withValue(restored, originValue, []);
-    }), M.orElse(() => [model, [], Option.none()])),
-    PressedKeyboardNavigation: ({ direction }) => withValue(model, nextValueForDirection(model, direction), []),
+    CancelledDrag: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', ({ originValue }) => [
+        evo(model, { dragState: () => Idle() }),
+        [],
+        Option.some(ChangedValue({ value: originValue })),
+    ]), M.orElse(() => [model, [], Option.none()])),
+    PressedKeyboardNavigation: ({ direction, value }) => [
+        model,
+        [],
+        changedValueOption(value, nextValueForDirection(value, model.min, model.max, model.step, direction)),
+    ],
 }));
-/** Reflects an externally-driven range onto the slider. Snaps and clamps the
- *  current value into the new range. Use this when min/max derive from
- *  external state (e.g. a bounded buffer whose first/last index shifts over
- *  time). Unlike `reflectValue`, this runs even while the user is Dragging: a
- *  structural range change cannot leave the value out of bounds. */
+/** Reflects an externally-driven range onto the slider. Use this when min/max
+ *  derive from external state (e.g. a bounded buffer whose first/last index
+ *  shifts over time). The parent owns the value, so conform it to the new range
+ *  in the same update with {@link snapAndClamp}. */
 export const reflectRange = Function.dual(2, (model, range) => evo(model, {
     min: () => range.min,
     max: () => range.max,
-    value: current => snapAndClamp(current, range.min, range.max, model.step),
 }));
-/** Reflects an externally-driven value onto the slider, snapped and clamped
- *  into range; a no-op while the user is dragging, since drag state owns the
- *  value. Does not emit `ChangedValue`; use when the value is being driven by
- *  external state rather than user input. */
-export const reflectValue = Function.dual(2, (model, value) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Dragging', () => model), M.orElse(() => evo(model, {
-    value: () => snapAndClamp(value, model.min, model.max, model.step),
-}))));
 // SUBSCRIPTION
 const DragActivity = S.Literals(['Idle', 'Active']);
 const dragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Dragging', () => 'Active'), M.orElse(() => 'Idle'));
@@ -244,16 +243,17 @@ const percentString = (fraction) => `${Math.round(fraction * 10000) / 100}%`;
  *  end. Pointer drag is handled by the component's drag subscriptions. */
 export const view = defineView((model, viewInputs) => {
     const h = html();
-    const { formatValue, isDisabled = false, name, getTrackRoot = () => document, } = viewInputs;
-    const { id, value, min, max } = model;
+    const { value, formatValue, isDisabled = false, name, getTrackRoot = () => document, } = viewInputs;
+    const { id, min, max } = model;
     const isDragging = model.dragState._tag === 'Dragging';
-    const fraction = fractionOfValue(model);
-    const handleKeyDown = (key) => Option.map(keyToDirection(key), direction => PressedKeyboardNavigation({ direction }));
+    const fraction = fractionOfValue(value, min, max);
+    const handleKeyDown = (key) => Option.map(keyToDirection(key), direction => PressedKeyboardNavigation({ direction, value }));
     const pointerAtClientX = (clientX) => Option.map(trackElement(id, getTrackRoot()), element => PressedPointer({
         value: valueFromClientX(clientX, element, min, max),
+        originValue: value,
     }));
     const trackPointerHandler = (_pointerType, button, _screenX, _screenY, _timeStamp, clientX) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.flatMap(() => pointerAtClientX(clientX)));
-    const thumbPointerHandler = (_pointerType, button) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => PressedThumb()));
+    const thumbPointerHandler = (_pointerType, button) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => PressedThumb({ originValue: value })));
     const stateAttributes = [
         ...(isDragging ? [h.DataAttribute('dragging', '')] : []),
         ...(isDisabled ? [h.DataAttribute('disabled', '')] : []),

package/dist/slider/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, reflectRange, reflectValue, view, subscriptions, subscriptionsForRoot, fractionOfValue, Model, Message, OutMessage, } from './index.js';
+export { init, update, reflectRange, view, subscriptions, subscriptionsForRoot, fractionOfValue, snapAndClamp, Model, Message, OutMessage, } from './index.js';
 export type { InitConfig, ViewInputs, SliderAttributes, PressedThumb, PressedPointer, MovedDragPointer, ReleasedDragPointer, CancelledDrag, PressedKeyboardNavigation, } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/slider/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/slider/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,KAAK,EACL,OAAO,EACP,UAAU,GACX,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,yBAAyB,GAC1B,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/slider/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,KAAK,EACL,OAAO,EACP,UAAU,GACX,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,yBAAyB,GAC1B,MAAM,YAAY,CAAA"}

package/dist/slider/public.js

@@ -1 +1 @@
-export { init, update, reflectRange, reflectValue, view, subscriptions, subscriptionsForRoot, fractionOfValue, Model, Message, OutMessage, } from './index.js';
+export { init, update, reflectRange, view, subscriptions, subscriptionsForRoot, fractionOfValue, snapAndClamp, Model, Message, OutMessage, } from './index.js';

package/dist/switch/index.d.ts

@@ -1,99 +1,52 @@
-import { Option, Schema as S } from 'effect';
-import type { Command } from 'foldkit/command';
-import { type ChildAttribute, type Html } from 'foldkit/html';
-import { type Reflect } from 'foldkit/submodel';
-/** Schema for the switch component's state, tracking the toggle's checked status. */
-export declare const Model: S.Struct<{
-    readonly id: S.String;
-    readonly isChecked: S.Boolean;
+import { type Attribute, type Html } from 'foldkit/html';
+/** Attribute groups the switch provides to the consumer's `toView` callback.
+ *  Each group is a `ReadonlyArray<Attribute<Message>>` the consumer
+ *  spreads into its own element attribute arrays. The `button` and `label`
+ *  bundles carry the click and Space handlers that dispatch the configured
+ *  `onToggle` Message. */
+export type SwitchAttributes<Message> = Readonly<{
+    button: ReadonlyArray<Attribute<Message>>;
+    label: ReadonlyArray<Attribute<Message>>;
+    description: ReadonlyArray<Attribute<Message>>;
+    hiddenInput: ReadonlyArray<Attribute<Message>>;
 }>;
-export type Model = typeof Model.Type;
-/** Sent when the user toggles the switch via click or Space key. */
-export declare const Toggled: import("foldkit/schema").CallableTaggedStruct<"Toggled", {}>;
-/** Sent to set the checked state to a specific value. Use this for
- *  programmatic state assignment (e.g. a "select all" handler that forces
- *  all child switches to the same state) where `Toggled`'s flip semantics
- *  would not reliably reach the desired state. */
-export declare const SetChecked: import("foldkit/schema").CallableTaggedStruct<"SetChecked", {
-    isChecked: S.Boolean;
-}>;
-/** Schema for all messages the switch component can produce. */
-export declare const Message: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"Toggled", {}>, import("foldkit/schema").CallableTaggedStruct<"SetChecked", {
-    isChecked: S.Boolean;
-}>]>;
-export type Toggled = typeof Toggled.Type;
-export type SetChecked = typeof SetChecked.Type;
-export type Message = typeof Message.Type;
-/** Sent to the parent each time the switch toggles. Carries the new
- *  checked state. Consumers pattern-match this in their `GotSwitchMessage`
- *  handler to lift the toggle into a domain Message (e.g., persisting the
- *  setting, dispatching a sync command). */
-export declare const ToggledChecked: import("foldkit/schema").CallableTaggedStruct<"ToggledChecked", {
-    isChecked: S.Boolean;
-}>;
-/** Union of out-messages the switch component can produce. Surfaced as
- *  the third element of `update`'s return tuple and pattern-matched by
- *  the parent. */
-export declare const OutMessage: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"ToggledChecked", {
-    isChecked: S.Boolean;
-}>]>;
-export type ToggledChecked = typeof ToggledChecked.Type;
-export type OutMessage = typeof OutMessage.Type;
-/** Configuration for creating a switch model with `init`. */
-export type InitConfig = Readonly<{
+/** Per-render view configuration for the stateless controlled {@link view}.
+ *  Generic over `Message` (the message `onToggle` dispatches).
+ *
+ *  - `isChecked`: the current checked state, read straight from the parent
+ *    Model. `aria-checked` and the `data-checked` marker derive from it.
+ *  - `onToggle`: dispatched with the new checked state when the user clicks
+ *    the switch or its label, or presses Space. Handle it in the parent's
+ *    `update` by storing the value.
+ *  - `toView`: receives the {@link SwitchAttributes} and lays out the
+ *    switch. */
+export type ViewConfig<Message> = Readonly<{
     id: string;
-    isChecked?: boolean;
-}>;
-/** Creates an initial switch model from a config. Defaults to unchecked. */
-export declare const init: (config: InitConfig) => Model;
-/** Processes a switch message and returns the next model, commands, and
- *  a `ToggledChecked` OutMessage carrying the new checked state. */
-export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command<Message>>, Option.Option<OutMessage>];
-/** Programmatically sets the checked state. Emits a `ToggledChecked`
- *  OutMessage just like a user-initiated toggle. Use this in domain-event
- *  handlers where you need to force a specific state. */
-export declare const setChecked: (model: Model, isChecked: boolean) => readonly [Model, ReadonlyArray<Command<Message>>, Option.Option<OutMessage>];
-/** Reflects an externally-sourced checked state onto the model without
- *  emitting an OutMessage. Use this to mirror external truth (saved
- *  settings, a server value) onto the switch without triggering the
- *  downstream reaction a user toggle would cause. Contrast with
- *  `setChecked`, which emits `ToggledChecked` so the parent reacts to a
- *  programmatic assignment the same way it reacts to a user toggle. Returns
- *  the model directly because it produces no commands and no OutMessage. */
-export declare const reflectChecked: Reflect<Model, boolean>;
-/** Attribute groups the switch component provides to the consumer's
- *  `toView` callback. Each group is a `ReadonlyArray<ChildAttribute>`
- *  whose event handlers dispatch through the Switch's boundary at
- *  event-fire time. See {@link Checkbox.CheckboxAttributes} for the full
- *  routing model. */
-export type SwitchAttributes = Readonly<{
-    button: ReadonlyArray<ChildAttribute>;
-    label: ReadonlyArray<ChildAttribute>;
-    description: ReadonlyArray<ChildAttribute>;
-    hiddenInput: ReadonlyArray<ChildAttribute>;
-}>;
-/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
-export type ViewInputs = Readonly<{
-    toView: (attributes: SwitchAttributes) => Html;
+    isChecked: boolean;
+    onToggle: (isChecked: boolean) => Message;
+    toView: (attributes: SwitchAttributes<Message>) => Html;
     isDisabled?: boolean;
     name?: string;
     value?: string;
 }>;
-/** Renders an accessible switch toggle by building ARIA attribute groups
- *  and delegating layout to the consumer's `toView` callback. Designed
- *  to be embedded via `h.submodel`. */
-export declare const view: import("foldkit/submodel").View<S.Struct.ReadonlySide<{
-    readonly id: S.String;
-    readonly isChecked: S.Boolean;
-}, "Type">, S.Struct.ReadonlySide<{
-    readonly _tag: S.tag<"Toggled">;
-}, "Type"> | S.Struct.ReadonlySide<{
-    readonly _tag: S.tag<"SetChecked">;
-    isChecked: S.Boolean;
-}, "Type">, Readonly<{
-    toView: (attributes: SwitchAttributes) => Html;
-    isDisabled?: boolean;
-    name?: string;
-    value?: string;
-}>>;
+/** Renders an accessible switch as a stateless controlled component. The
+ *  parent owns the checked state (`isChecked`) and receives the new state via
+ *  `onToggle` when the user toggles it.
+ *
+ *  ```ts
+ *  // In view:
+ *  Switch.view<Message>({
+ *    id: 'notifications',
+ *    isChecked: model.notificationsEnabled,
+ *    onToggle: isChecked => ToggledNotifications({ isChecked }),
+ *    toView: attributes => ...,
+ *  })
+ *
+ *  // In update:
+ *  ToggledNotifications: ({ isChecked }) => [
+ *    evo(model, { notificationsEnabled: () => isChecked }),
+ *    [],
+ *  ],
+ *  ``` */
+export declare const view: <Message>(config: ViewConfig<Message>) => Html;
 //# sourceMappingURL=index.d.ts.map

package/dist/switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAClE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EAGV,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,KAAK,OAAO,EAAc,MAAM,kBAAkB,CAAA;AAI3D,qFAAqF;AACrF,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,oEAAoE;AACpE,eAAO,MAAM,OAAO,8DAAe,CAAA;AAEnC;;;kDAGkD;AAClD,eAAO,MAAM,UAAU;;EAA4C,CAAA;AAEnE,gEAAgE;AAChE,eAAO,MAAM,OAAO;;IAAiC,CAAA;AAErD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAE/C,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC;;;4CAG4C;AAC5C,eAAO,MAAM,cAAc;;EAAgD,CAAA;AAE3E;;kBAEkB;AAClB,eAAO,MAAM,UAAU;;IAA4B,CAAA;AAEnD,MAAM,MAAM,cAAc,GAAG,OAAO,cAAc,CAAC,IAAI,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,6DAA6D;AAC7D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC,CAAA;AAEF,4EAA4E;AAC5E,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAIF;oEACoE;AACpE,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CACV,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAC/B,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAyBxB,CAAA;AAEH;;yDAEyD;AACzD,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,EACZ,WAAW,OAAO,KACjB,SAAS,CACV,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAC/B,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CACkB,CAAA;AAE7C;;;;;;4EAM4E;AAC5E,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAIlD,CAAA;AAID;;;;qBAIqB;AACrB,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACrC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,WAAW,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IAC1C,WAAW,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;CAC3C,CAAC,CAAA;AAEF,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC,CAAA;AAKF;;uCAEuC;AACvC,eAAO,MAAM,IAAI;;;;;;;;;YAZP,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI;iBACjC,OAAO;WACb,MAAM;YACL,MAAM;GA2Df,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/switch/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAQ,MAAM,cAAc,CAAA;AAI9D;;;;0BAI0B;AAC1B,MAAM,MAAM,gBAAgB,CAAC,OAAO,IAAI,QAAQ,CAAC;IAC/C,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACzC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACxC,WAAW,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAC9C,WAAW,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;CAC/C,CAAC,CAAA;AAEF;;;;;;;;;gBASgB;AAChB,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAA;IACzC,MAAM,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IACvD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC,CAAA;AAKF;;;;;;;;;;;;;;;;;;UAkBU;AACV,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IA4D3D,CAAA"}

package/dist/switch/index.js

@@ -1,79 +1,31 @@
-import { Function, Match as M, Option, Schema as S } from 'effect';
-import { childAttributes, html, } from 'foldkit/html';
-import { m } from 'foldkit/message';
-import { evo } from 'foldkit/struct';
-import { defineView } from 'foldkit/submodel';
-// MODEL
-/** Schema for the switch component's state, tracking the toggle's checked status. */
-export const Model = S.Struct({
-    id: S.String,
-    isChecked: S.Boolean,
-});
-// MESSAGE
-/** Sent when the user toggles the switch via click or Space key. */
-export const Toggled = m('Toggled');
-/** Sent to set the checked state to a specific value. Use this for
- *  programmatic state assignment (e.g. a "select all" handler that forces
- *  all child switches to the same state) where `Toggled`'s flip semantics
- *  would not reliably reach the desired state. */
-export const SetChecked = m('SetChecked', { isChecked: S.Boolean });
-/** Schema for all messages the switch component can produce. */
-export const Message = S.Union([Toggled, SetChecked]);
-// OUT MESSAGE
-/** Sent to the parent each time the switch toggles. Carries the new
- *  checked state. Consumers pattern-match this in their `GotSwitchMessage`
- *  handler to lift the toggle into a domain Message (e.g., persisting the
- *  setting, dispatching a sync command). */
-export const ToggledChecked = m('ToggledChecked', { isChecked: S.Boolean });
-/** Union of out-messages the switch component can produce. Surfaced as
- *  the third element of `update`'s return tuple and pattern-matched by
- *  the parent. */
-export const OutMessage = S.Union([ToggledChecked]);
-/** Creates an initial switch model from a config. Defaults to unchecked. */
-export const init = (config) => ({
-    id: config.id,
-    isChecked: config.isChecked ?? false,
-});
-// UPDATE
-/** Processes a switch message and returns the next model, commands, and
- *  a `ToggledChecked` OutMessage carrying the new checked state. */
-export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
-    Toggled: () => {
-        const nextIsChecked = !model.isChecked;
-        return [
-            evo(model, { isChecked: () => nextIsChecked }),
-            [],
-            Option.some(ToggledChecked({ isChecked: nextIsChecked })),
-        ];
-    },
-    SetChecked: ({ isChecked }) => [
-        evo(model, { isChecked: () => isChecked }),
-        [],
-        Option.some(ToggledChecked({ isChecked })),
-    ],
-}));
-/** Programmatically sets the checked state. Emits a `ToggledChecked`
- *  OutMessage just like a user-initiated toggle. Use this in domain-event
- *  handlers where you need to force a specific state. */
-export const setChecked = (model, isChecked) => update(model, SetChecked({ isChecked }));
-/** Reflects an externally-sourced checked state onto the model without
- *  emitting an OutMessage. Use this to mirror external truth (saved
- *  settings, a server value) onto the switch without triggering the
- *  downstream reaction a user toggle would cause. Contrast with
- *  `setChecked`, which emits `ToggledChecked` so the parent reacts to a
- *  programmatic assignment the same way it reacts to a user toggle. Returns
- *  the model directly because it produces no commands and no OutMessage. */
-export const reflectChecked = Function.dual(2, (model, isChecked) => evo(model, { isChecked: () => isChecked }));
+import { Match as M, Option } from 'effect';
+import { html } from 'foldkit/html';
 const labelId = (id) => `${id}-label`;
 const descriptionId = (id) => `${id}-description`;
-/** Renders an accessible switch toggle by building ARIA attribute groups
- *  and delegating layout to the consumer's `toView` callback. Designed
- *  to be embedded via `h.submodel`. */
-export const view = defineView((model, viewInputs) => {
+/** Renders an accessible switch as a stateless controlled component. The
+ *  parent owns the checked state (`isChecked`) and receives the new state via
+ *  `onToggle` when the user toggles it.
+ *
+ *  ```ts
+ *  // In view:
+ *  Switch.view<Message>({
+ *    id: 'notifications',
+ *    isChecked: model.notificationsEnabled,
+ *    onToggle: isChecked => ToggledNotifications({ isChecked }),
+ *    toView: attributes => ...,
+ *  })
+ *
+ *  // In update:
+ *  ToggledNotifications: ({ isChecked }) => [
+ *    evo(model, { notificationsEnabled: () => isChecked }),
+ *    [],
+ *  ],
+ *  ``` */
+export const view = (config) => {
     const h = html();
-    const { id, isChecked } = model;
-    const { isDisabled = false, name, value: formValue = 'on' } = viewInputs;
-    const handleKeyUp = (key) => M.value(key).pipe(M.when(' ', () => Option.some(Toggled())), M.orElse(() => Option.none()));
+    const { id, isChecked, onToggle, toView, isDisabled = false, name, value: formValue = 'on', } = config;
+    const nextChecked = !isChecked;
+    const handleKeyUp = (key) => M.value(key).pipe(M.when(' ', () => Option.some(onToggle(nextChecked))), M.orElse(() => Option.none()));
     const checkedAttributes = isChecked ? [h.DataAttribute('checked', '')] : [];
     const disabledAttributes = isDisabled
         ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
@@ -88,20 +40,23 @@ export const view = defineView((model, viewInputs) => {
         ...disabledAttributes,
         ...(isDisabled
             ? []
-            : [h.OnClick(Toggled()), h.OnKeyUpPreventDefault(handleKeyUp)]),
+            : [
+                h.OnClick(onToggle(nextChecked)),
+                h.OnKeyUpPreventDefault(handleKeyUp),
+            ]),
     ];
     const labelAttributes = [
         h.Id(labelId(id)),
-        ...(isDisabled ? [] : [h.OnClick(Toggled())]),
+        ...(isDisabled ? [] : [h.OnClick(onToggle(nextChecked))]),
     ];
     const descriptionAttributes = [h.Id(descriptionId(id))];
     const hiddenInputAttributes = name
         ? [h.Type('hidden'), h.Name(name), h.Value(isChecked ? formValue : '')]
         : [];
-    return viewInputs.toView({
-        button: childAttributes(buttonAttributes),
-        label: childAttributes(labelAttributes),
-        description: childAttributes(descriptionAttributes),
-        hiddenInput: childAttributes(hiddenInputAttributes),
+    return toView({
+        button: buttonAttributes,
+        label: labelAttributes,
+        description: descriptionAttributes,
+        hiddenInput: hiddenInputAttributes,
     });
-});
+};

package/dist/switch/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, setChecked, reflectChecked, view, Model, Message, OutMessage, SetChecked, ToggledChecked, } from './index.js';
-export type { Toggled, InitConfig, ViewInputs, SwitchAttributes, } from './index.js';
+export { view } from './index.js';
+export type { ViewConfig, SwitchAttributes } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/switch/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/switch/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,UAAU,EACV,cAAc,EACd,IAAI,EACJ,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,cAAc,GACf,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,OAAO,EACP,UAAU,EACV,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/switch/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA"}

package/dist/switch/public.js

@@ -1 +1 @@
-export { init, update, setChecked, reflectChecked, view, Model, Message, OutMessage, SetChecked, ToggledChecked, } from './index.js';
+export { view } from './index.js';