foldkit 0.100.1 → 0.102.0

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';