foldkit 0.101.0 → 0.102.0

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

@@ -1,6 +1,7 @@
-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, type TagName } from '../../html/index.js';
+import { type ChildAttribute, type Html, type SubmodelView } from '../../html/index.js';
+import type { Reflect2 } from '../../submodel/submodel.js';
 export { wrapIndex, findFirstEnabledIndex, keyToIndex } from '../keyboard.js';
 /** Controls the tab list layout direction and which arrow keys navigate between tabs. */
 export declare const Orientation: S.Literals<readonly ["Horizontal", "Vertical"]>;
@@ -17,24 +18,44 @@ export declare const Model: S.Struct<{
 }>;
 export type Model = typeof Model.Type;
 /** Sent when a tab is selected via click or keyboard. Updates both the active and focused indices. */
-export declare const TabSelected: import("../../schema/index.js").CallableTaggedStruct<"TabSelected", {
+export declare const SelectedTab: import("../../schema/index.js").CallableTaggedStruct<"SelectedTab", {
     index: S.Number;
+    value: S.String;
 }>;
 /** Sent when a tab receives keyboard focus in `Manual` mode without being activated. */
-export declare const TabFocused: import("../../schema/index.js").CallableTaggedStruct<"TabFocused", {
+export declare const FocusedTab: import("../../schema/index.js").CallableTaggedStruct<"FocusedTab", {
     index: S.Number;
 }>;
 /** Sent when the focus-tab command completes. */
 export declare const CompletedFocusTab: import("../../schema/index.js").CallableTaggedStruct<"CompletedFocusTab", {}>;
 /** Union of all messages the tabs component can produce. */
 export declare const Message: S.Union<[
-    typeof TabSelected,
-    typeof TabFocused,
+    typeof SelectedTab,
+    typeof FocusedTab,
     typeof CompletedFocusTab
 ]>;
-export type TabSelected = typeof TabSelected.Type;
-export type TabFocused = typeof TabFocused.Type;
+export type SelectedTab = typeof SelectedTab.Type;
+export type FocusedTab = typeof FocusedTab.Type;
 export type Message = typeof Message.Type;
+/** Sent to the parent when a tab is committed via click or keyboard. Carries both the tab's value (typed as `Value` via `Ui.Tabs.create<Value>()`) and its index. Generic at the type level; the schema stores `value: string` and the factory's fenced cast types it as `Value`. */
+export declare const Selected: import("../../schema/index.js").CallableTaggedStruct<"Selected", {
+    value: S.String;
+    index: S.Number;
+}>;
+export type Selected<Value extends string = string> = Readonly<{
+    readonly _tag: 'Selected';
+    readonly value: Value;
+    readonly index: number;
+}>;
+/** Union of out-messages the tabs 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("../../schema/index.js").CallableTaggedStruct<"Selected", {
+    value: S.String;
+    index: S.Number;
+}>]>;
+/** Generic over `Value extends string` so consumers using
+ *  `Ui.Tabs.create<MyUnion>()` receive `value: MyUnion` in the
+ *  `Selected` OutMessage. Defaults to `string`. */
+export type OutMessage<Value extends string = string> = Selected<Value>;
 /** Configuration for creating a tabs model with `init`. */
 export type InitConfig = Readonly<{
     id: string;
@@ -50,44 +71,85 @@ export declare const FocusTab: Command.CommandDefinitionWithArgs<"FocusTab", {
 }, Effect.Effect<{
     readonly _tag: "CompletedFocusTab";
 }, never, never>>;
-/** Processes a tabs message and returns the next model and commands. */
-export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-/** Configuration for an individual tab's button and panel content. */
-export type TabConfig<ParentMessage = unknown> = Readonly<{
-    buttonClassName?: string;
-    buttonAttributes?: ReadonlyArray<Attribute<ParentMessage>>;
-    buttonContent: Html;
-    panelClassName?: string;
-    panelAttributes?: ReadonlyArray<Attribute<ParentMessage>>;
-    panelContent: Html;
+type UpdateReturn = readonly [
+    Model,
+    ReadonlyArray<Command.Command<Message>>,
+    Option.Option<OutMessage>
+];
+/** Processes a tabs message and returns the next model, commands, and an optional OutMessage. `Selected` fires when a tab is committed via click or keyboard. */
+export declare const update: (model: Model, message: Message) => UpdateReturn;
+/** Programmatically selects a tab. Emits a `Selected` OutMessage. */
+export declare const selectTab: (model: Model, value: string, index: number) => UpdateReturn;
+/** Reflects an externally-sourced active tab onto the model without
+ *  emitting an OutMessage or running the focus command. Use this to mirror
+ *  external truth (a deep link, restored storage) onto the active tab.
+ *  Contrast with `selectTab`, which represents a user or programmatic
+ *  *choice*: it focuses the tab and emits `Selected`. Takes the tab `value`
+ *  plus the `options` list (mirroring `RadioGroup.select`) because Tabs
+ *  stores the active *index* internally, so the value is resolved to an
+ *  index. A value not present in `options` is a no-op. Returns the model
+ *  directly because it produces no commands and no OutMessage. */
+export declare const reflectSelectedTab: Reflect2<Model, string, ReadonlyArray<string>>;
+/** Per-tab render info passed to the consumer's `toView`. Generic over
+ *  `Value extends string`: when `Ui.Tabs.create<MyUnion>()` is declared,
+ *  `tab.value` is typed `MyUnion` so the consumer can switch on it without
+ *  casting. */
+export type TabInfo<Value extends string = string> = Readonly<{
+    value: Value;
+    index: number;
+    isActive: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    tab: ReadonlyArray<ChildAttribute>;
+    panel: ReadonlyArray<ChildAttribute>;
+}>;
+/** Render-time payload published to the consumer's `toView`.
+ *
+ *  - `tablist`: ARIA + role attributes for the wrapping tablist element.
+ *  - `tabs`: one entry per tab in `viewInputs.tabs`, in the same order, with
+ *    the tab button's attribute bundle, the panel's attribute bundle,
+ *    and derived state.
+ *  - `activeIndex`: the currently-active tab index, convenient when the
+ *    consumer wants to render only the active panel (vs all panels with
+ *    `Hidden` for transitions). */
+export type RenderInfo<Value extends string = string> = Readonly<{
+    tablist: ReadonlyArray<ChildAttribute>;
+    tabs: ReadonlyArray<TabInfo<Value>>;
+    activeIndex: number;
 }>;
-/** Configuration for rendering a tab group with `view`. */
-export type ViewConfig<ParentMessage, Tab extends string> = Readonly<{
-    model: Model;
-    toParentMessage: (message: TabSelected | TabFocused) => ParentMessage;
-    onTabSelected?: (index: number) => ParentMessage;
-    tabs: ReadonlyArray<Tab>;
-    tabToConfig: (tab: Tab, context: {
-        isActive: boolean;
-    }) => TabConfig<ParentMessage>;
-    isTabDisabled?: (tab: Tab, index: number) => boolean;
-    persistPanels?: boolean;
+/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field.
+ *  Generic over `Value extends string` so consumers using
+ *  `Ui.Tabs.create<MyUnion>()` receive `tab.value: MyUnion` in `toView`
+ *  and `(value: MyUnion, index) => boolean` in `isTabDisabled`, without
+ *  casting. */
+export type ViewInputs<Value extends string = string> = Readonly<{
+    tabs: ReadonlyArray<Value>;
+    ariaLabel: string;
+    toView: (render: RenderInfo<Value>) => Html;
+    isTabDisabled?: (value: Value, index: number) => boolean;
     orientation?: Orientation;
-    tabListElement?: TagName;
-    tabElement?: TagName;
-    panelElement?: TagName;
-    className?: string;
-    attributes?: ReadonlyArray<Attribute<ParentMessage>>;
-    tabListClassName?: string;
-    tabListAttributes?: ReadonlyArray<Attribute<ParentMessage>>;
-    tabListAriaLabel: string;
 }>;
-/** Programmatically selects a tab at the given index, updating the model and returning
- *  focus commands. Use this in domain-event handlers when the tab group uses `onTabSelected`. */
-export declare const selectTab: (model: Model, index: number) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-/** Renders a headless tab group with accessible ARIA roles, roving tabindex, and keyboard navigation. */
-export declare const view: <ParentMessage, Tab extends string>(config: ViewConfig<ParentMessage, Tab>) => Html;
-/** Creates a memoized tabs view. Static config is captured in a closure;
- *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
-export declare const lazy: <ParentMessage, Tab extends string>(staticConfig: Omit<ViewConfig<ParentMessage, Tab>, "model" | "toParentMessage" | "onTabSelected">) => ((model: Model, toParentMessage: ViewConfig<ParentMessage, Tab>["toParentMessage"]) => Html);
+/** Pairs the tabs `view`, `update`, and `selectTab` behind a single
+ *  Value-typed entry point. Declare once at module scope so consumers
+ *  receive `tab.value: Value` in `toView` without an `as` cast:
+ *
+ *  ```ts
+ *  const DemoTabs = Ui.Tabs.create<DemoTab>()
+ *
+ *  // In view:
+ *  h.submodel({ view: DemoTabs.view, ... })
+ *
+ *  // In update:
+ *  const [next, commands] = DemoTabs.update(model, message)
+ *  ```
+ *
+ *  The internal view stays typed `ReadonlyArray<string>`; consumers can
+ *  pass a `ReadonlyArray<MyUnion>` (assignable) and the fenced cast inside
+ *  `create` types `TabInfo.value` as `MyUnion`. */
+export declare const create: <Value extends string = string>() => Readonly<{
+    view: SubmodelView<Model, Message, ViewInputs<Value>>;
+    update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    selectTab: (model: Model, value: Value, index: number) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    reflectSelectedTab: Reflect2<Model, Value, ReadonlyArray<Value>>;
+}>;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/ui/tabs/index.js

@@ -1,7 +1,7 @@
-import { Array, Effect, Match as M, Option, Schema as S, String, pipe, } from 'effect';
+import { Array, Effect, Function, Match as M, Option, Schema as S, String, pipe, } from 'effect';
 import * as Command from '../../command/index.js';
 import * as Dom from '../../dom/index.js';
-import { createLazy, html, } from '../../html/index.js';
+import { childAttributes, defineView, html, } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 import { keyToIndex } from '../keyboard.js';
@@ -20,13 +20,24 @@ export const Model = S.Struct({
 });
 // MESSAGE
 /** Sent when a tab is selected via click or keyboard. Updates both the active and focused indices. */
-export const TabSelected = m('TabSelected', { index: S.Number });
+export const SelectedTab = m('SelectedTab', {
+    index: S.Number,
+    value: S.String,
+});
 /** Sent when a tab receives keyboard focus in `Manual` mode without being activated. */
-export const TabFocused = m('TabFocused', { index: S.Number });
+export const FocusedTab = m('FocusedTab', { index: S.Number });
 /** Sent when the focus-tab command completes. */
 export const CompletedFocusTab = m('CompletedFocusTab');
 /** Union of all messages the tabs component can produce. */
-export const Message = S.Union([TabSelected, TabFocused, CompletedFocusTab]);
+export const Message = S.Union([SelectedTab, FocusedTab, CompletedFocusTab]);
+// OUT MESSAGE
+/** Sent to the parent when a tab is committed via click or keyboard. Carries both the tab's value (typed as `Value` via `Ui.Tabs.create<Value>()`) and its index. Generic at the type level; the schema stores `value: string` and the factory's fenced cast types it as `Value`. */
+export const Selected = m('Selected', {
+    value: S.String,
+    index: S.Number,
+});
+/** Union of out-messages the tabs component can produce. Surfaced as the third element of `update`'s return tuple and pattern-matched by the parent. */
+export const OutMessage = S.Union([Selected]);
 /** Creates an initial tabs model from a config. Defaults to first tab and automatic activation. */
 export const init = (config) => {
     const activeIndex = config.activeIndex ?? 0;
@@ -39,34 +50,45 @@ export const init = (config) => {
 };
 // UPDATE
 const tabId = (id, index) => `${id}-tab-${index}`;
+const tabPanelId = (id, index) => `${id}-panel-${index}`;
 /** Moves focus to the tab at the given index. */
 export const FocusTab = Command.define('FocusTab', { id: S.String, index: S.Number }, CompletedFocusTab)(({ id, index }) => Dom.focus(`#${tabId(id, index)}`).pipe(Effect.ignore, Effect.as(CompletedFocusTab())));
-/** Processes a tabs message and returns the next model and commands. */
+/** Processes a tabs message and returns the next model, commands, and an optional OutMessage. `Selected` fires when a tab is committed via click or keyboard. */
 export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
-    TabSelected: ({ index }) => [
+    SelectedTab: ({ index, value }) => [
         evo(model, {
             activeIndex: () => index,
             focusedIndex: () => index,
         }),
         [FocusTab({ id: model.id, index })],
+        Option.some(Selected({ value, index })),
     ],
-    TabFocused: ({ index }) => [
+    FocusedTab: ({ index }) => [
         evo(model, { focusedIndex: () => index }),
         [FocusTab({ id: model.id, index })],
+        Option.none(),
     ],
-    CompletedFocusTab: () => [model, []],
+    CompletedFocusTab: () => [model, [], Option.none()],
 }));
-const tabPanelId = (id, index) => `${id}-panel-${index}`;
-/** Programmatically selects a tab at the given index, updating the model and returning
- *  focus commands. Use this in domain-event handlers when the tab group uses `onTabSelected`. */
-export const selectTab = (model, index) => update(model, TabSelected({ index }));
-/** Renders a headless tab group with accessible ARIA roles, roving tabindex, and keyboard navigation. */
-export const view = (config) => {
+/** Programmatically selects a tab. Emits a `Selected` OutMessage. */
+export const selectTab = (model, value, index) => update(model, SelectedTab({ index, value }));
+/** Reflects an externally-sourced active tab onto the model without
+ *  emitting an OutMessage or running the focus command. Use this to mirror
+ *  external truth (a deep link, restored storage) onto the active tab.
+ *  Contrast with `selectTab`, which represents a user or programmatic
+ *  *choice*: it focuses the tab and emits `Selected`. Takes the tab `value`
+ *  plus the `options` list (mirroring `RadioGroup.select`) because Tabs
+ *  stores the active *index* internally, so the value is resolved to an
+ *  index. A value not present in `options` is a no-op. Returns the model
+ *  directly because it produces no commands and no OutMessage. */
+export const reflectSelectedTab = Function.dual(3, (model, value, options) => pipe(options, Array.findFirstIndex(option => option === value), Option.match({
+    onNone: () => model,
+    onSome: index => evo(model, { activeIndex: () => index, focusedIndex: () => index }),
+})));
+const internalView = defineView((model, viewInputs) => {
     const h = html();
-    const { model, model: { id, activationMode, focusedIndex }, toParentMessage, onTabSelected, tabs, tabToConfig, isTabDisabled, persistPanels, orientation = 'Horizontal', tabListElement = 'div', tabElement = 'button', panelElement = 'div', className, attributes = [], tabListClassName, tabListAttributes = [], tabListAriaLabel, } = config;
-    const dispatchTabSelected = (index) => onTabSelected
-        ? onTabSelected(index)
-        : toParentMessage(TabSelected({ index }));
+    const { id, activationMode, focusedIndex, activeIndex } = model;
+    const { tabs, ariaLabel, toView, isTabDisabled, orientation = 'Horizontal', } = viewInputs;
     const isDisabled = (index) => !!isTabDisabled &&
         pipe(tabs, Array.get(index), Option.exists(tab => isTabDisabled(tab, index)));
     const { nextKey, previousKey } = M.value(orientation).pipe(M.when('Horizontal', () => ({
@@ -77,15 +99,15 @@ export const view = (config) => {
         previousKey: 'ArrowUp',
     })), M.exhaustive);
     const resolveKeyIndex = keyToIndex(nextKey, previousKey, tabs.length, focusedIndex, isDisabled);
-    const handleAutomaticKeyDown = (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(dispatchTabSelected(resolveKeyIndex(key)))), M.whenOr('Enter', ' ', () => Option.some(dispatchTabSelected(focusedIndex))), M.orElse(() => Option.none()));
-    const handleManualKeyDown = (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toParentMessage(TabFocused({ index: resolveKeyIndex(key) })))), M.whenOr('Enter', ' ', () => Option.some(dispatchTabSelected(focusedIndex))), M.orElse(() => Option.none()));
+    const tabSelectedAt = (index) => pipe(tabs, Array.get(index), Option.map(value => SelectedTab({ index, value })));
+    const handleAutomaticKeyDown = (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => tabSelectedAt(resolveKeyIndex(key))), M.whenOr('Enter', ' ', () => tabSelectedAt(focusedIndex)), M.orElse(() => Option.none()));
+    const handleManualKeyDown = (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(FocusedTab({ index: resolveKeyIndex(key) }))), M.whenOr('Enter', ' ', () => tabSelectedAt(focusedIndex)), M.orElse(() => Option.none()));
     const handleKeyDown = (key) => M.value(activationMode).pipe(M.when('Automatic', () => handleAutomaticKeyDown(key)), M.when('Manual', () => handleManualKeyDown(key)), M.exhaustive);
-    const tabButtons = Array.map(tabs, (tab, index) => {
-        const isActive = index === model.activeIndex;
+    const tabInfos = Array.map(tabs, (value, index) => {
+        const isActive = index === activeIndex;
         const isFocused = index === focusedIndex;
-        const isTabDisabledAtIndex = isDisabled(index);
-        const tabConfig = tabToConfig(tab, { isActive });
-        return h.keyed(tabElement)(tabId(id, index), [
+        const isTabDisabledNow = isDisabled(index);
+        const tabAttributes = [
             h.Id(tabId(id, index)),
             h.Role('tab'),
             h.Type('button'),
@@ -93,74 +115,70 @@ export const view = (config) => {
             h.AriaControls(tabPanelId(id, index)),
             h.Tabindex(isFocused ? 0 : -1),
             ...(isActive ? [h.DataAttribute('selected', '')] : []),
-            ...(isTabDisabledAtIndex
+            ...(isTabDisabledNow
                 ? [
                     h.Disabled(true),
                     h.AriaDisabled(true),
                     h.DataAttribute('disabled', ''),
                 ]
-                : [h.OnClick(dispatchTabSelected(index))]),
+                : [h.OnClick(SelectedTab({ index, value }))]),
             h.OnKeyDownPreventDefault(handleKeyDown),
-            ...(tabConfig.buttonClassName
-                ? [h.Class(tabConfig.buttonClassName)]
-                : []),
-            ...(tabConfig.buttonAttributes ?? []),
-        ], [tabConfig.buttonContent]);
-    });
-    const allPanels = Array.map(tabs, (tab, index) => {
-        const isActive = index === model.activeIndex;
-        const panelConfig = tabToConfig(tab, { isActive });
-        return h.keyed(panelElement)(tabPanelId(id, index), [
+        ];
+        const panelAttributes = [
             h.Id(tabPanelId(id, index)),
             h.Role('tabpanel'),
             h.AriaLabelledBy(tabId(id, index)),
             h.Tabindex(isActive ? 0 : -1),
-            h.Hidden(!isActive),
             ...(isActive ? [h.DataAttribute('selected', '')] : []),
-            ...(panelConfig.panelClassName
-                ? [h.Class(panelConfig.panelClassName)]
-                : []),
-            ...(panelConfig.panelAttributes ?? []),
-            ...(isActive ? [] : [h.Style({ display: 'none' })]),
-        ], [panelConfig.panelContent]);
+        ];
+        return {
+            value,
+            index,
+            isActive,
+            isFocused,
+            isDisabled: isTabDisabledNow,
+            tab: childAttributes(tabAttributes),
+            panel: childAttributes(panelAttributes),
+        };
     });
-    const activePanelOnly = pipe(tabs, Array.get(model.activeIndex), Option.match({
-        onNone: () => h.empty,
-        onSome: tab => {
-            const activeConfig = tabToConfig(tab, { isActive: true });
-            return h.keyed(panelElement)(tabPanelId(id, model.activeIndex), [
-                h.Id(tabPanelId(id, model.activeIndex)),
-                h.Role('tabpanel'),
-                h.AriaLabelledBy(tabId(id, model.activeIndex)),
-                h.Tabindex(0),
-                h.DataAttribute('selected', ''),
-                ...(activeConfig.panelClassName
-                    ? [h.Class(activeConfig.panelClassName)]
-                    : []),
-                ...(activeConfig.panelAttributes ?? []),
-            ], [activeConfig.panelContent]);
-        },
-    }));
-    const tabPanels = persistPanels ? allPanels : [activePanelOnly];
-    const resolvedTabListAttributes = [
+    const tablistAttributes = [
         h.Role('tablist'),
         h.AriaOrientation(String.toLowerCase(orientation)),
-        h.AriaLabel(tabListAriaLabel),
-        ...(tabListClassName ? [h.Class(tabListClassName)] : []),
-        ...tabListAttributes,
+        h.AriaLabel(ariaLabel),
     ];
-    return h.div([...(className ? [h.Class(className)] : []), ...attributes], [
-        h.keyed(tabListElement)(`${id}-tablist`, resolvedTabListAttributes, tabButtons),
-        ...tabPanels,
-    ]);
-};
-/** Creates a memoized tabs 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]);
+    return toView({
+        tablist: childAttributes(tablistAttributes),
+        tabs: tabInfos,
+        activeIndex,
+    });
+});
+/** Pairs the tabs `view`, `update`, and `selectTab` behind a single
+ *  Value-typed entry point. Declare once at module scope so consumers
+ *  receive `tab.value: Value` in `toView` without an `as` cast:
+ *
+ *  ```ts
+ *  const DemoTabs = Ui.Tabs.create<DemoTab>()
+ *
+ *  // In view:
+ *  h.submodel({ view: DemoTabs.view, ... })
+ *
+ *  // In update:
+ *  const [next, commands] = DemoTabs.update(model, message)
+ *  ```
+ *
+ *  The internal view stays typed `ReadonlyArray<string>`; consumers can
+ *  pass a `ReadonlyArray<MyUnion>` (assignable) and the fenced cast inside
+ *  `create` types `TabInfo.value` as `MyUnion`. */
+export const create = () => {
+    const cast = (result) => 
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    result;
+    return {
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        view: internalView,
+        update: (model, message) => cast(update(model, message)),
+        selectTab: (model, value, index) => cast(selectTab(model, value, index)),
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        reflectSelectedTab: reflectSelectedTab,
+    };
 };

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

@@ -1,3 +1,3 @@
-export { init, update, selectTab, view, lazy, Model, Message, TabSelected, TabFocused, CompletedFocusTab, FocusTab, } from './index.js';
-export type { Orientation, ActivationMode, InitConfig, ViewConfig, TabConfig, } from './index.js';
+export { init, create, Model, Message, OutMessage, Selected, SelectedTab, FocusedTab, CompletedFocusTab, FocusTab, } from './index.js';
+export type { Orientation, ActivationMode, InitConfig, ViewInputs, RenderInfo, TabInfo, } from './index.js';
 //# sourceMappingURL=public.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/tabs/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,QAAQ,GACT,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,WAAW,EACX,cAAc,EACd,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/tabs/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,QAAQ,GACT,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,WAAW,EACX,cAAc,EACd,UAAU,EACV,UAAU,EACV,UAAU,EACV,OAAO,GACR,MAAM,YAAY,CAAA"}

package/dist/ui/tabs/public.js

@@ -1 +1 @@
-export { init, update, selectTab, view, lazy, Model, Message, TabSelected, TabFocused, CompletedFocusTab, FocusTab, } from './index.js';
+export { init, create, Model, Message, OutMessage, Selected, SelectedTab, FocusedTab, CompletedFocusTab, FocusTab, } from './index.js';