@typed/ui 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/Menubar.d.ts

@@ -0,0 +1,249 @@
+/**
+ * Menubar is a persistent horizontal composite. Its root establishes DOM-order roving focus and
+ * typeahead; items expose menuitem semantics and invoke caller-provided activation Effects.
+ *
+ * @remarks
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
+ * events and browser-owned focus.
+ *
+ * Learn the interaction in the [Menubar guide](/explore/ui-menubar).
+ *
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import type * as Scope from "effect/Scope";
+import * as Schema from "effect/Schema";
+import type { Fx } from "@typed/fx/Fx";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
+import * as Collection from "./Collection.js";
+import * as Composite from "./Composite.js";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/**
+ * The active top-level command and horizontal navigation policy.
+ * Child menu visibility belongs to the separate Menu state connected by its submenu trigger.
+ *
+ * @since 1.0.0
+ * @category Command focus
+ */
+export interface State extends Composite.State {
+}
+/**
+ * Initial Menubar values. Uses Composite defaults unless overridden.
+ *
+ * @since 1.0.0
+ * @category Command focus
+ */
+export type InitialState = Composite.InitialState;
+/**
+ * Effect Schema used by makeState to encode, decode, and hydrate Menubar state.
+ *
+ * @remarks
+ * @example
+ * ```ts
+ * import * as Schema from "effect/Schema";
+ * import * as Menubar from "@typed/ui/Menubar";
+ *
+ * const decodeState = Schema.decodeUnknownEffect(Menubar.StateSchema);
+ * ```
+ * @since 1.0.0
+ * @category Command focus
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly activeId: Schema.NullOr<Schema.String>;
+    readonly orientation: Schema.Literals<readonly ["horizontal", "vertical", "both"]>;
+    readonly loop: Schema.Boolean;
+    readonly rtl: Schema.Boolean;
+    readonly virtualFocus: Schema.Boolean;
+}>;
+/**
+ * Creates hydrated Menubar state. Uses Composite defaults unless overridden.
+ *
+ * @remarks
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
+ * creation.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Menubar from "@typed/ui/Menubar";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Menubar.makeState({});
+ *     const collection = yield* Menubar.makeCollection();
+ *     return { state: yield* state, collection: yield* collection };
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Command focus
+ */
+export declare function makeState(initial?: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly activeId: string | null;
+    readonly orientation: "both" | "horizontal" | "vertical";
+    readonly loop: boolean;
+    readonly rtl: boolean;
+    readonly virtualFocus: boolean;
+}, Schema.SchemaError, never, never>, never, Scope.Scope>;
+/**
+ * Creates a scoped Collection for Menubar items.
+ *
+ * @remarks
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
+ * owned by the Scope that runs register, independently of this construction Effect.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Menubar from "@typed/ui/Menubar";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const collection = yield* Menubar.makeCollection();
+ *     return yield* collection;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Command registration
+ */
+export declare const makeCollection: (initial?: Collection.State<string, Element>) => Effect.Effect<RefSubject.RefSubject<Collection.State<string, Element>, never, never>, never, Scope.Scope>;
+/**
+ * Inputs accepted by Menubar.Root in addition to the shared DOM host options.
+ *
+ * @since 1.0.0
+ * @category Menubar surface
+ */
+export interface RootOptions extends Dom.HostOptions<HTMLDivElement> {
+    /**
+     * Renderer-independent RefSubject state consumed by this component or operation.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Item registry used for collection-driven keyboard behavior and mounted ordering.
+     * @since 1.0.0
+     * @category Item registration
+     */
+    readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
+    /**
+     * Renderable child content for the component host.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+    /**
+     * Accessible label rendered through aria-label.
+     * @since 1.0.0
+     * @category Accessible naming
+     */
+    readonly label?: Renderable.Any<string | null | undefined>;
+}
+declare function rootProps<const Options extends RootOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly role: "menubar";
+    readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
+    readonly "aria-orientation": RefSubject.Computed<Composite.Orientation, Schema.SchemaError, never>;
+    readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
+    readonly onfocus: Effect.Effect<void, Schema.SchemaError, never> | undefined;
+    readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never> | undefined;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type RootProps<Options extends RootOptions> = ReturnType<ReturnType<typeof rootProps<Options>>>;
+/**
+ * Renders the persistent menubar root with roving focus, orientation-aware keys, and typeahead.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Menubar surface
+ */
+export declare function Root<const Options extends RootOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, RootProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+/**
+ * Consumer-facing alias of the canonical Menubar component with identical behavior and lifetime.
+ *
+ * @remarks
+ * The alias acquires nothing. Rendering it has exactly the canonical component's Scope and DOM
+ * ownership contract.
+ *
+ * @since 1.0.0
+ * @category Menubar surface
+ */
+export declare const Menubar: typeof Root;
+/**
+ * Inputs accepted by Menubar.Item in addition to the shared DOM host options.
+ *
+ * @since 1.0.0
+ * @category Top-level commands
+ */
+export interface ItemOptions extends Dom.HostOptions<HTMLDivElement> {
+    /**
+     * Renderer-independent RefSubject state consumed by this component or operation.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Item registry used for collection-driven keyboard behavior and mounted ordering.
+     * @since 1.0.0
+     * @category Item registration
+     */
+    readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
+    /**
+     * Stable id used for collection identity and ARIA relationships.
+     * @since 1.0.0
+     * @category Identity and relationships
+     */
+    readonly id: string;
+    /**
+     * Renderable child content for the component host.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+    /**
+     * Search text used by typeahead independently of rendered markup.
+     * @since 1.0.0
+     * @category Text matching
+     */
+    readonly textValue?: string;
+    /**
+     * Flag used by collection movement and widget handlers to skip activation by default.
+     * @since 1.0.0
+     * @category Availability
+     */
+    readonly disabled?: boolean;
+}
+declare function itemProps<const Options extends ItemOptions>(options: Options): () => {
+    readonly id: string;
+    readonly role: "menuitem";
+    readonly "aria-disabled": boolean;
+    readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
+    readonly onfocus: Effect.Effect<State, Schema.SchemaError, never>;
+    readonly onclick: Effect.Effect<void, never, never> | Effect.Effect<State, Schema.SchemaError, never>;
+    readonly ref: ((element: Element & HTMLDivElement & RefSubject.HydrationElement) => Effect.Effect<void, any, any>) | undefined;
+};
+type ItemProps<Options extends ItemOptions> = ReturnType<ReturnType<typeof itemProps<Options>>>;
+/**
+ * Renders a registered menuitem and runs onActivate for native focus or click unless disabled.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Top-level commands
+ */
+export declare function Item<const Options extends ItemOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ItemProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+export {};
+//# sourceMappingURL=Menubar.d.ts.map

package/dist/Menubar.d.ts.map

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

package/dist/Menubar.js

@@ -0,0 +1,207 @@
+/**
+ * Menubar is a persistent horizontal composite. Its root establishes DOM-order roving focus and
+ * typeahead; items expose menuitem semantics and invoke caller-provided activation Effects.
+ *
+ * @remarks
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
+ * events and browser-owned focus.
+ *
+ * Learn the interaction in the [Menubar guide](/explore/ui-menubar).
+ *
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, html, } from "@typed/template";
+import * as Collection from "./Collection.js";
+import * as Composite from "./Composite.js";
+import * as Dom from "./Dom.js";
+/**
+ * Effect Schema used by makeState to encode, decode, and hydrate Menubar state.
+ *
+ * @remarks
+ * @example
+ * ```ts
+ * import * as Schema from "effect/Schema";
+ * import * as Menubar from "@typed/ui/Menubar";
+ *
+ * const decodeState = Schema.decodeUnknownEffect(Menubar.StateSchema);
+ * ```
+ * @since 1.0.0
+ * @category Command focus
+ */
+export const StateSchema = Composite.StateSchema;
+/**
+ * Creates hydrated Menubar state. Uses Composite defaults unless overridden.
+ *
+ * @remarks
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
+ * creation.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Menubar from "@typed/ui/Menubar";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Menubar.makeState({});
+ *     const collection = yield* Menubar.makeCollection();
+ *     return { state: yield* state, collection: yield* collection };
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Command focus
+ */
+export function makeState(initial = {}) {
+    return Composite.makeState({ ...initial, orientation: initial.orientation ?? "horizontal" });
+}
+/**
+ * Creates a scoped Collection for Menubar items.
+ *
+ * @remarks
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
+ * owned by the Scope that runs register, independently of this construction Effect.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Menubar from "@typed/ui/Menubar";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const collection = yield* Menubar.makeCollection();
+ *     return yield* collection;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Command registration
+ */
+export const makeCollection = Collection.makeState;
+function rootProps(options) {
+    let typeahead = { value: "", updatedAt: 0 };
+    const onfocus = options.collection === undefined
+        ? undefined
+        : Effect.gen(function* () {
+            if ((yield* options.state).activeId !== null)
+                return;
+            yield* Composite.moveAndFocus({
+                state: options.state,
+                collection: options.collection,
+                includeDisabled: true,
+            }, "first");
+        });
+    const onkeydown = options.collection === undefined
+        ? undefined
+        : EventHandler.make(Effect.fn(function* (event) {
+            if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+                const activeId = (yield* options.state).activeId;
+                const item = activeId === null
+                    ? undefined
+                    : (yield* options.collection).find((item) => item.id === activeId);
+                const shouldActivate = event.key !== "ArrowDown" || item?.submenu === true;
+                const element = shouldActivate && item?.disabled !== true ? item?.element : undefined;
+                const click = element === undefined ? undefined : Reflect.get(element, "click");
+                if (typeof click === "function") {
+                    event.preventDefault();
+                    yield* Effect.sync(() => click.call(element));
+                    return;
+                }
+            }
+            const direction = Composite.keyMove(event, yield* options.state);
+            if (direction !== undefined) {
+                event.preventDefault();
+                yield* Composite.moveAndFocus({ state: options.state, collection: options.collection, includeDisabled: true }, direction);
+                return;
+            }
+            const key = Composite.typeaheadKey(event);
+            if (key === null)
+                return;
+            typeahead = Composite.updateTypeaheadBuffer(typeahead, key, Date.now());
+            const activeId = Composite.typeaheadFrom(yield* options.collection, typeahead.value, (yield* options.state).activeId, undefined, true);
+            if (activeId === null)
+                return;
+            event.preventDefault();
+            yield* RefSubject.update(options.state, (state) => ({ ...state, activeId }));
+            yield* Composite.focusActive({ state: options.state, collection: options.collection });
+        }));
+    return ({ property }) => ({
+        role: "menubar",
+        "aria-label": property("label", undefined),
+        "aria-orientation": RefSubject.map(options.state, (state) => state.orientation),
+        tabindex: Composite.rootTabIndex(options.state),
+        onfocus,
+        onkeydown,
+        ref: options.state,
+    });
+}
+/**
+ * Renders the persistent menubar root with roving focus, orientation-aware keys, and typeahead.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Menubar surface
+ */
+export function Root(options, host) {
+    return Dom.renderHost()(options, host, rootProps(options), options.content, (props, content) => {
+        return html `<div ...${props}>${content}</div>`;
+    });
+}
+/**
+ * Consumer-facing alias of the canonical Menubar component with identical behavior and lifetime.
+ *
+ * @remarks
+ * The alias acquires nothing. Rendering it has exactly the canonical component's Scope and DOM
+ * ownership contract.
+ *
+ * @since 1.0.0
+ * @category Menubar surface
+ */
+export const Menubar = Root;
+function itemProps(options) {
+    const activate = options.disabled === true
+        ? Effect.void
+        : RefSubject.update(options.state, (state) => ({ ...state, activeId: options.id }));
+    const focus = RefSubject.update(options.state, (state) => ({ ...state, activeId: options.id }));
+    const register = options.collection === undefined
+        ? undefined
+        : Collection.ref(options.collection, {
+            id: options.id,
+            value: options.id,
+            textValue: options.textValue ?? options.id,
+            disabled: options.disabled,
+        });
+    return () => ({
+        id: options.id,
+        role: "menuitem",
+        "aria-disabled": options.disabled ?? false,
+        tabindex: Composite.tabIndex(options.state, options.id),
+        onfocus: focus,
+        onclick: activate,
+        ref: Dom.composeRefs(register, options.ref),
+    });
+}
+/**
+ * Renders a registered menuitem and runs onActivate for native focus or click unless disabled.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Top-level commands
+ */
+export function Item(options, host) {
+    return Dom.renderHost()(options, host, itemProps(options), options.content, (props, content) => html `<div ...${props}>${content}</div>`);
+}

package/dist/Meter.d.ts

@@ -0,0 +1,157 @@
+/**
+ * A non-interactive native measurement within a known range.
+ * Threshold options communicate preferred regions; they do not execute alert policies.
+ *
+ * Read the [Meter guide](/explore/ui-meter) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/meter/).
+ * @since 1.0.0
+ * @category Overview
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { type Renderable } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/**
+ */
+export interface State {
+    /**
+     */
+    readonly value: number;
+}
+/**
+ */
+export interface InitialState {
+    /**
+     */
+    readonly value: number;
+}
+/**
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly value: Schema.Finite;
+}>;
+/**
+ * Creates hydrated meter state.
+ * @remarks
+ * The state remains testable and reusable without rendering a UI component.
+ * The caller's Effect Scope owns the hydrated RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Meter from "@typed/ui/Meter"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Meter.makeState({ value: 0.72 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category State construction
+ */
+export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly value: number;
+}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+/**
+ * Assigns the displayed measurement without clamping it to the meter range.
+ *
+ * @remarks
+ * Keep measurement units consistent with min/max and threshold options. This operation does not
+ * execute threshold actions or validate the preferred range.
+ * @since 1.0.0
+ * @category State transitions
+ */
+export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>, value: number): Effect.Effect<State, E, R>;
+/**
+ */
+export interface MeterOptions extends Dom.HostOptions<HTMLMeterElement> {
+    /**
+     * Hydrated value state borrowed by the element.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Lower bound of the measured range.
+     * @since 1.0.0
+     * @category Numeric bounds
+     */
+    readonly min?: Renderable.Any<number | null | undefined>;
+    /**
+     * Upper bound of the measured range.
+     * @since 1.0.0
+     * @category Numeric bounds
+     */
+    readonly max?: Renderable.Any<number | null | undefined>;
+    /**
+     * Boundary below which values are considered low.
+     * @since 1.0.0
+     * @category Measurement thresholds
+     */
+    readonly low?: Renderable.Any<number | null | undefined>;
+    /**
+     * Boundary above which values are considered high.
+     * @since 1.0.0
+     * @category Measurement thresholds
+     */
+    readonly high?: Renderable.Any<number | null | undefined>;
+    /**
+     * Preferred value within the meter range.
+     * @since 1.0.0
+     * @category Measurement thresholds
+     */
+    readonly optimum?: Renderable.Any<number | null | undefined>;
+    /**
+     * Fallback content rendered inside the meter.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content?: Renderable.Any;
+}
+declare function internalProps<const Options extends MeterOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly value: RefSubject.Computed<number, Schema.SchemaError, never>;
+    readonly min: Exclude<Dom.Property<Options, "min">, Dom.Nullish> | undefined;
+    readonly max: Exclude<Dom.Property<Options, "max">, Dom.Nullish> | undefined;
+    readonly low: Exclude<Dom.Property<Options, "low">, Dom.Nullish> | undefined;
+    readonly high: Exclude<Dom.Property<Options, "high">, Dom.Nullish> | undefined;
+    readonly optimum: Exclude<Dom.Property<Options, "optimum">, Dom.Nullish> | undefined;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type MeterInternalProps<Options extends MeterOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
+/**
+ * Renders a native meter for a measurement within a known range.
+ *
+ * @remarks
+ * Supply a label and coherent min/max/low/high/optimum values. The browser presents thresholds;
+ * the component does not trigger alerts when they are crossed. Use a slider for editing or a
+ * progress element for operation completion. The meter has no keyboard action.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/template";
+ * import * as Meter from "@typed/ui/Meter";
+ *
+ * export const StorageUsage = component(function* () {
+ *   const state = yield* Meter.makeState({ value: 64 });
+ *   const description = RefSubject.map(state, ({ value }) => `${value} GB of 100 GB used`);
+ *   return html`<section>
+ *     <label for="storage-meter">Storage used</label>
+ *     ${Meter.Meter({
+ *       state, min: 0, max: 100, low: 60, high: 85, optimum: 0,
+ *       content: description,
+ *       props: { id: "storage-meter", "aria-valuetext": description },
+ *     })}
+ *     <p>${description}</p>
+ *   </section>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Controls
+ */
+export declare function Meter<const Options extends MeterOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, MeterInternalProps<Options>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=Meter.d.ts.map

package/dist/Meter.d.ts.map

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