@getaster/elements 0.0.0-stage → 0.1.0-preview.1

package/dist/composition/builtins.js

@@ -0,0 +1,318 @@
+import { Collection, Command, DataContext, EditModel, FilterDraft, ListEdit, Selection, SharedFilters, Tree } from "@getaster/data";
+import { nothing } from "lit-html";
+import { compositeTypes as t } from "./contracts.js";
+import { compositeElement } from "./registry.js";
+import { PickerOptions } from "../picker/options.js";
+import { TreeChoices } from "../picker/tree-choices.js";
+import { ProgressStatus } from "../progress/status.js";
+import { Sidebar } from "../sidebar/sidebar.js";
+import { Button } from "../button/button.js";
+import { Field } from "../field/field.js";
+import { NumberField } from "../field/number-field.js";
+import { canonicalNumeric, compareNumeric } from "../field/numeric.js";
+import { CompositeField } from "../field/composite-field.js";
+import { Stack, HorizontalLayout, VerticalLayout } from "../layout/stack.js";
+import { Breadcrumbs } from "../breadcrumbs/breadcrumbs.js";
+import { Accordion } from "../section/accordion.js";
+import { Check } from "../field/check.js";
+import { Select } from "../select/select.js";
+import { Picker } from "../picker/picker.js";
+import { TreePicker } from "../picker/tree-picker.js";
+import { DateField } from "../date/date-field.js";
+import { Choice } from "../select/choice-element.js";
+import { Switch } from "../switch/switch.js";
+import { Grid } from "../grid/grid.js";
+import { TileGrid } from "../tile-grid/tile-grid.js";
+import { Listbox } from "../listbox/listbox.js";
+import { Form } from "../form/form.js";
+import { ListEditor } from "../list-edit/list-edit.js";
+import { RuleEditor } from "../rule/rule-editor.js";
+import { FilterBuilder } from "../filter/filter-builder.js";
+import { TreeNavigator } from "../tree/navigator.js";
+import { Tabs } from "../tabs/tabs.js";
+import { Section } from "../section/section.js";
+import { Split } from "../split/split.js";
+import { Carousel } from "../carousel/carousel.js";
+import { Slicer } from "../slicer/slicer.js";
+import { ComponentHost } from "../component/component.js";
+import { Window } from "../window/window.js";
+import { Dialog } from "../dialog/dialog.js";
+import { Dashboard } from "../dashboard/dashboard.js";
+import { CommandBar } from "../composition/command-bar.js";
+const object = (value) => !!value && typeof value === "object" && [Object.prototype, null].includes(Object.getPrototypeOf(value));
+const fn = (value) => typeof value === "function";
+const view = (value) => value === nothing || object(value) && "_$litType$" in value;
+const value = (v) => v === null || ["string", "boolean"].includes(typeof v) || typeof v === "number" && Number.isFinite(v) || Array.isArray(v) && v.every(value);
+const options = t.array(t.object({ value: t.custom("OData value", (v) => value(v)), label: t.string }));
+const tabItems = t.array(t.object({ value: t.string, label: t.string, closable: t.optional(t.boolean), disabled: t.optional(t.boolean) }));
+const literals = (...values) => t.custom("one of " + values.join(", "), (v) => values.some(item => item === v), { enum: values });
+function checked(description, test) {
+    return t.custom(description, (value) => test(value));
+}
+function bindable(inner) {
+    const signal = t.signal(inner);
+    return t.custom(inner.description + " or signal", (v) => inner.validate(v) || signal.validate(v), { anyOf: [inner.schema ?? {}, signal.schema ?? {}] });
+}
+// Omission preserves the element's own default; explicit undefined must still validate.
+function element() {
+    return (tag, props) => {
+        const defaults = Object.fromEntries(Object.entries(props).map(([key, spec]) => [key, Object.freeze({ ...spec, optional: true })]));
+        return Object.freeze(compositeElement(tag, Object.freeze(defaults)));
+    };
+}
+const optionalNumber = (v) => v === undefined || t.number.validate(v);
+const optionalBoolean = (v) => v === undefined || typeof v === "boolean";
+const numeric = (v) => {
+    if (typeof v !== "string" && typeof v !== "number")
+        return false;
+    try {
+        canonicalNumeric(v);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+const sourceOptions = (v) => v === undefined || v instanceof Collection || v instanceof PickerOptions;
+const formItem = checked("field name, configured field or derived value", v => typeof v === "string" || object(v) && optionalNumber(v.span) && (typeof v.field === "string" && sourceOptions(v.options)
+    || typeof v.title === "string" && t.signal(t.string).validate(v.value)));
+const sections = t.array(t.object({ title: t.string, columns: t.optional(t.positiveInteger), open: t.optional(t.boolean), items: t.array(formItem) }));
+const gridView = checked("Grid view", v => object(v)
+    && Array.isArray(v.columns) && v.columns.every(c => object(c) && typeof c.field === "string" && optionalNumber(c.width) && optionalBoolean(c.hidden) && (c.sortField === undefined || typeof c.sortField === "string" && c.sortField.trim().length > 0))
+    && Array.isArray(v.sort) && v.sort.every(k => object(k) && typeof k.field === "string" && optionalBoolean(k.descending))
+    && object(v.filters) && Object.values(v.filters).every(c => object(c) && typeof c.op === "string")
+    && typeof v.frozen === "number" && Number.isSafeInteger(v.frozen) && v.frozen >= 0
+    && (v.groupBy === undefined || typeof v.groupBy === "string" || Array.isArray(v.groupBy) && v.groupBy.every(k => typeof k === "string")));
+const milliseconds = t.custom("nonnegative milliseconds", (value) => Number.isSafeInteger(value) && typeof value === "number" && value >= 0 && value <= 2_147_483_647, { type: "integer", minimum: 0, maximum: 2_147_483_647 });
+const progressTiming = t.object({ delayMs: t.optional(milliseconds), minVisibleMs: t.optional(milliseconds) });
+const bound = {
+    model: t.optional(t.instance(EditModel)), field: t.string, label: t.string,
+    labelled: t.boolean, sharedReasons: t.instance((Map)),
+};
+/** Reusable public control contracts. Select entries explicitly for an application's allowlist. */
+export const asterComponents = Object.freeze({
+    Button: element()("aster-button", {
+        label: t.string,
+        busyLabel: t.optional(t.string),
+        confirmLabel: t.optional(t.string),
+        busy: bindable(t.boolean),
+        variant: literals("secondary", "primary"),
+        type: literals("button", "submit"),
+        icon: checked("Button.icon", view),
+        reason: t.optional(t.string),
+    }),
+    Field: element()("aster-field", {
+        ...bound,
+        value: t.string,
+        placeholder: t.string,
+        readOnly: t.boolean,
+        keyboard: t.string,
+        trailing: checked("Field.trailing", view),
+    }),
+    NumberField: element()("aster-number-field", {
+        ...bound, value: checked("numeric value", v => v === null || typeof v === "string" || typeof v === "number" && Number.isFinite(v)),
+        numericType: literals("decimal", "integer", "float"),
+        min: t.optional(t.custom("numeric bound", numeric)),
+        max: t.optional(t.custom("numeric bound", numeric)),
+        step: t.optional(t.custom("positive numeric step", (v) => numeric(v) && compareNumeric(v, 0) > 0)),
+        stepButtons: t.boolean, prefixText: t.string, suffixText: t.string, placeholder: t.string, readOnly: t.boolean,
+        format: checked("numeric display formatter", v => v === undefined || fn(v)),
+    }),
+    CompositeField: element()("aster-composite-field", {
+        model: t.optional(t.instance(EditModel)), fields: t.array(t.string), label: t.string, help: t.string, error: t.string,
+        disabled: t.boolean, readOnly: t.boolean, content: checked("CompositeField.content", view),
+        value: t.custom("application value", (_v) => true),
+        renderValue: checked("composite value renderer", v => v === undefined || fn(v)),
+    }),
+    Stack: Object.freeze(compositeElement(Stack)),
+    HorizontalLayout: Object.freeze(compositeElement(HorizontalLayout)),
+    VerticalLayout: Object.freeze(compositeElement(VerticalLayout)),
+    Breadcrumbs: Object.freeze(compositeElement(Breadcrumbs)),
+    Accordion: element()("aster-accordion", {
+        items: checked("accordion items", v => Array.isArray(v) && new Set(v.map(i => i?.id)).size === v.length && v.every(i => object(i) && typeof i.id === "string" && i.id.length > 0 && typeof i.heading === "string" && !(i.body !== undefined && i.create !== undefined) && optionalBoolean(i.disabled) && (i.body === undefined || view(i.body)) && (i.summary === undefined || view(i.summary)) && (i.actions === undefined || view(i.actions)) && (i.create === undefined || fn(i.create)))),
+        expanded: t.array(t.string), multiple: t.boolean, headingLevel: literals(2, 3, 4),
+    }),
+    Check: element()("aster-check", {
+        ...bound,
+    }),
+    Select: element()("aster-select", {
+        ...bound,
+        choices: t.optional(options),
+    }),
+    Picker: element()("aster-picker", {
+        ...bound,
+        options: checked("Picker.options", v => v === undefined || v instanceof Collection || v instanceof PickerOptions),
+        display: t.string,
+        valueField: t.string,
+        multiple: t.boolean,
+        values: checked("Picker.values", v => Array.isArray(v) && v.every(value)),
+        placeholder: t.string,
+    }),
+    TreePicker: element()("aster-tree-picker", {
+        ...bound,
+        options: t.optional(t.instance(TreeChoices)),
+        placeholder: t.string,
+    }),
+    DateField: element()("aster-date", {
+        ...bound,
+    }),
+    Choice: element()("aster-choice", {
+        options: options,
+        value: checked("Choice.value", v => v === undefined || value(v)),
+        label: t.string,
+        placeholder: t.string,
+    }),
+    Switch: element()("aster-switch", {
+        binding: checked("Switch.binding", v => v === undefined || object(v) && v.ctx instanceof DataContext && typeof v.set === "string" && typeof v.key === "string" && typeof v.field === "string"),
+        label: t.string,
+    }),
+    Grid: element()("aster-grid", {
+        progressPolicy: progressTiming,
+        ctx: t.optional(t.instance(DataContext)),
+        set: t.string,
+        base: checked("Grid.base", v => v === undefined || object(v) && typeof v.op === "string"),
+        view: t.optional(gridView),
+        label: t.string,
+        publish: t.string,
+        persist: t.string,
+        renderers: checked("Grid.renderers", v => object(v) && Object.values(v).every(fn)),
+        formatters: checked("Grid.formatters", v => object(v) && Object.values(v).every(fn)),
+        summaries: checked("Grid.summaries", v => Array.isArray(v) && v.every(s => object(s) && (s.label === undefined || typeof s.label === "string") && (s.method === "count" || ["sum", "min", "max", "average", "countdistinct"].includes(String(s.method)) && typeof s.field === "string"))),
+        lookups: checked("Grid.lookups", v => object(v) && Object.values(v).every(l => object(l) && typeof l.set === "string" && typeof l.display === "string")),
+        rowMenu: checked("Grid.rowMenu", fn),
+        tree: checked("Grid.tree", v => v === undefined || object(v) && typeof v.parentField === "string" && optionalBoolean(v.draggable) && (v.filterMode === undefined || ["keepAncestors", "strict"].includes(String(v.filterMode)))),
+        rowControls: checked("Grid.rowControls", v => v === undefined || fn(v)),
+        expansion: checked("Grid.expansion", v => v === undefined || object(v) && fn(v.content) && optionalBoolean(v.single) && optionalNumber(v.limit) && (v.canExpand === undefined || fn(v.canExpand))),
+        editable: t.boolean,
+        rules: checked("Grid.rules", object),
+        empty: checked("Grid.empty", view),
+        collection: t.optional(t.instance(Collection)),
+        selection: t.optional(t.instance(Selection)),
+        selectable: t.boolean,
+    }),
+    TileGrid: element()("aster-tile-grid", {
+        collection: t.optional(t.instance(Collection)),
+        selection: t.optional(t.instance(Selection)),
+        selectable: t.boolean,
+        label: t.string,
+        publish: t.string,
+        presentTile: checked("TileGrid.presentTile", v => v === undefined || fn(v)),
+        renderTile: checked("TileGrid.renderTile", v => v === undefined || fn(v)),
+        actions: checked("TileGrid.actions", v => v === undefined || fn(v)),
+        empty: checked("TileGrid.empty", view),
+        layout: literals("uniform", "content"),
+        virtualized: t.boolean,
+    }),
+    Listbox: element()("aster-listbox", {
+        collection: t.optional(t.instance(Collection)),
+        selection: t.optional(t.instance(Selection)),
+        publish: t.string,
+        renderRow: checked("Listbox.renderRow", fn),
+        empty: checked("Listbox.empty", view),
+        label: t.string,
+    }),
+    Form: element()("aster-form", {
+        model: t.optional(t.instance(EditModel)),
+        sections,
+        headingLevel: literals(2, 3, 4),
+    }),
+    ListEditor: element()("aster-list-editor", {
+        list: t.optional(t.instance(ListEdit)),
+        columns: checked("ListEditor.columns", v => Array.isArray(v) && v.every(c => object(c) && typeof c.field === "string")),
+        label: t.string,
+        addLabel: t.string,
+        readOnlyReason: t.optional(t.string),
+        empty: checked("ListEditor.empty", view),
+    }),
+    RuleEditor: element()("aster-rule-editor", {
+        list: t.optional(t.instance(ListEdit)),
+        category: t.string,
+        label: t.string,
+        messages: t.boolean,
+        fields: checked("RuleEditor.fields", v => v === undefined || v instanceof PickerOptions || v instanceof TreeChoices),
+        describe: checked("RuleEditor.describe", v => v === undefined || fn(v)),
+        readOnlyReason: t.optional(t.string),
+        empty: t.string,
+    }),
+    FilterBuilder: element()("aster-filter-builder", {
+        model: t.optional(t.instance(FilterDraft)),
+        label: t.string,
+        readOnlyReason: t.optional(t.string),
+    }),
+    TreeNavigator: element()("aster-tree-navigator", {
+        tree: t.optional(t.instance(Tree)),
+        display: t.string,
+        label: t.string,
+        choosable: checked("TreeNavigator.choosable", v => v === undefined || fn(v)),
+        headingLevel: literals(1, 2, 3, 4, 5, 6),
+        chooseLabel: t.string,
+    }),
+    Tabs: element()("aster-tabs", {
+        renderPanel: checked("Tabs.renderPanel", v => v === undefined || fn(v)),
+        activation: literals("automatic", "manual"),
+        items: bindable(tabItems),
+        value: bindable(t.optional(t.string)),
+        label: t.string,
+        controls: t.optional(t.string),
+    }),
+    Section: element()("aster-section", {
+        actions: checked("Section.actions", view),
+        disabled: t.boolean,
+        heading: t.string,
+        open: t.boolean,
+        body: checked("Section.body", view),
+        level: literals(2, 3, 4),
+        summary: checked("Section.summary", view),
+    }),
+    Split: element()("aster-split", {
+        orientation: literals("horizontal", "vertical"), size: t.number, collapsible: t.boolean, collapsed: t.boolean, responsive: t.boolean,
+        start: checked("Split.start", view),
+        end: checked("Split.end", view),
+        width: t.number,
+        min: t.number,
+        max: t.number,
+        label: t.string,
+        persist: t.string,
+    }),
+    Carousel: element()("aster-carousel", {
+        slides: checked("Carousel.slides", v => Array.isArray(v) && new Set(v.filter(s => s?.id !== undefined).map(s => s.id)).size === v.filter(s => s?.id !== undefined).length && v.every(s => object(s) && typeof s.label === "string" && (s.id === undefined || typeof s.id === "string") && view(s.view))),
+        label: t.string,
+    }),
+    Slicer: element()("aster-slicer", {
+        filters: t.optional(t.instance(SharedFilters)),
+        label: t.string,
+        empty: t.string,
+    }),
+    ComponentHost: element()("aster-component", {
+        progressPolicy: progressTiming,
+        adapter: checked("ComponentHost.adapter", v => v === undefined || !!v && typeof v === "object" && "mount" in v && fn(v.mount)),
+        alternative: checked("ComponentHost.alternative", v => v === undefined || fn(v)),
+        label: t.string,
+        locale: t.optional(t.string),
+    }),
+    Window: element()("aster-window", {
+        heading: t.string,
+        content: checked("Window.content", view),
+        managed: t.boolean,
+        preserveContent: t.boolean,
+        beforeClose: checked("Window.beforeClose", v => v === undefined || fn(v)),
+    }),
+    Dialog: element()("aster-dialog", {
+        content: checked("Dialog.content", view),
+        labelledBy: t.optional(t.string),
+    }),
+    Dashboard: element()("aster-dashboard", {
+        label: t.string,
+    }),
+    CommandBar: element()("aster-command-bar", {
+        showErrors: t.boolean,
+        formatError: checked("CommandBar.formatError", v => v === undefined || fn(v)),
+        label: t.string,
+        commands: t.array(t.instance(Command)),
+    }),
+    ProgressStatus: element()("aster-progress-status", {
+        busy: t.boolean, error: t.optional(t.string), progressPolicy: progressTiming,
+        pendingText: t.string, completeText: t.string, reserveSpace: t.boolean,
+    }),
+    Sidebar: Object.freeze(compositeElement(Sidebar)),
+});

package/dist/composition/command-bar.d.ts

@@ -0,0 +1,18 @@
+import { Command } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+import "../button/button.ts";
+/** A labelled action group; every surface consumes the original guarded commands. */
+export declare class CommandBar extends AsterElement {
+    #private;
+    get commands(): readonly Command[];
+    set commands(value: readonly Command[]);
+    get label(): string;
+    set label(value: string);
+    /** Disable when the application presents contextual failures at another surface. */
+    get showErrors(): boolean;
+    set showErrors(value: boolean);
+    /** Translate errors into application-facing text without changing command state. */
+    get formatError(): ((error: unknown, action: Command) => string) | undefined;
+    set formatError(value: ((error: unknown, action: Command) => string) | undefined);
+    protected render(): View;
+}

package/dist/composition/command-bar.js

@@ -0,0 +1,34 @@
+import { Command } from "@getaster/data";
+import { html, nothing } from "lit-html";
+import { AsterElement, define } from "../base/element.js";
+import "../button/button.js";
+/** A labelled action group; every surface consumes the original guarded commands. */
+export class CommandBar extends AsterElement {
+    #commands = this.prop([]);
+    #label = this.prop("Actions");
+    #showErrors = this.prop(true);
+    #formatError = this.prop(undefined);
+    get commands() { return this.#commands.value; }
+    set commands(value) { this.#commands.value = value; }
+    get label() { return this.#label.value; }
+    set label(value) { this.#label.value = value; }
+    /** Disable when the application presents contextual failures at another surface. */
+    get showErrors() { return this.#showErrors.value; }
+    set showErrors(value) { this.#showErrors.value = value; }
+    /** Translate errors into application-facing text without changing command state. */
+    get formatError() { return this.#formatError.value; }
+    set formatError(value) { this.#formatError.value = value; }
+    render() {
+        const commands = this.#commands.value;
+        const failures = this.#showErrors.value ? commands.filter(action => action.error.value !== undefined) : [];
+        return html `<div class="aster-command-bar" role="group" aria-label=${this.#label.value}>
+      ${commands.map(action => html `<aster-button .label=${action.label} .busy=${action.busy.value}
+        .reason=${action.reason.value} @click=${() => void action.execute().catch(() => { })}></aster-button>`)}
+    </div>${failures.length ? html `<div class="aster-command-error" role="status">${failures.map(action => {
+            const error = action.error.value;
+            const message = this.#formatError.value?.(error, action) ?? (error instanceof Error ? error.message : String(error));
+            return html `<p><strong>${action.label}</strong><span>${message}</span></p>`;
+        })}</div>` : nothing}`;
+    }
+}
+define("aster-command-bar", CommandBar);

package/dist/composition/commands.d.ts

@@ -0,0 +1,14 @@
+import type { CompositeDefinition } from "./definition.ts";
+type Commands = NonNullable<CompositeDefinition["commands"]>;
+export interface CommandPlan {
+    readonly order: readonly string[];
+    readonly errors: readonly {
+        readonly path: string;
+        readonly message: string;
+    }[];
+}
+/** Resolve declared aliases by dependency, independent of object key order. */
+export declare function planCommands(commands: Commands, accepts: (reference: string) => boolean): CommandPlan;
+/** Suggest aliases which are valid and cannot introduce a cycle at this destination. */
+export declare function commandTargets(commands: Commands, base: readonly string[], destination?: string): readonly string[];
+export {};

package/dist/composition/commands.js

@@ -0,0 +1,59 @@
+/** Resolve declared aliases by dependency, independent of object key order. */
+export function planCommands(commands, accepts) {
+    const state = new Map();
+    const order = [];
+    const errors = [];
+    function visit(key, chain) {
+        switch (state.get(key)) {
+            case "valid": return true;
+            case "invalid": return false;
+            case "visiting":
+                errors.push({ path: `definition.commands.${key}.use`, message: `Command reference cycle: ${[...chain, key].join(" → ")}` });
+                return false;
+        }
+        if (chain.length >= 128) {
+            errors.push({ path: `definition.commands.${key}.use`, message: "Command alias chain exceeds 128 links" });
+            state.set(key, "invalid");
+            return false;
+        }
+        state.set(key, "visiting");
+        const reference = commands[key].use;
+        const alias = reference.startsWith("commands.") ? reference.slice("commands.".length) : undefined;
+        let valid;
+        if (alias !== undefined && Object.hasOwn(commands, alias))
+            valid = visit(alias, [...chain, key]);
+        else {
+            valid = accepts(reference);
+            if (!valid)
+                errors.push({ path: `definition.commands.${key}.use`, message: `Expected a declared Command reference; unknown or incompatible '${reference}'` });
+        }
+        state.set(key, valid ? "valid" : "invalid");
+        if (valid)
+            order.push(key);
+        return valid;
+    }
+    Object.keys(commands).forEach(key => visit(key, []));
+    return { order, errors };
+}
+/** Suggest aliases which are valid and cannot introduce a cycle at this destination. */
+export function commandTargets(commands, base, destination) {
+    const references = new Set(base);
+    const plan = planCommands(commands, reference => references.has(reference));
+    const dependsOn = (key, target) => {
+        const seen = new Set();
+        while (Object.hasOwn(commands, key) && !seen.has(key)) {
+            if (key === target)
+                return true;
+            seen.add(key);
+            const reference = commands[key].use;
+            if (!reference.startsWith("commands."))
+                return false;
+            key = reference.slice("commands.".length);
+        }
+        return false;
+    };
+    for (const key of plan.order)
+        if (!destination || !dependsOn(key, destination))
+            references.add(`commands.${key}`);
+    return [...references];
+}

package/dist/composition/composite.d.ts

@@ -0,0 +1,48 @@
+import { type ReadonlySignal } from "@preact/signals-core";
+import { type TemplateResult } from "lit-html";
+import { Command, Lifetime, PageScope, SessionActivity, type DataContext } from "@getaster/data";
+import { type CompositeDefinition, type CompositeSources, type CompositeOverrides } from "./definition.ts";
+import { type CompositeResolver, type CompositeValues, type CompositeComponentType, type CompositeContract } from "./registry.ts";
+import type { CompositeContractValues } from "./contracts.ts";
+export type CompositePlacement = (place: (child?: string) => HTMLElement) => TemplateResult;
+export interface CompositeOptions<I extends CompositeContract = CompositeContract> {
+    readonly inputs?: CompositeContractValues<I>;
+    readonly parentScope?: PageScope;
+    readonly activity?: SessionActivity;
+    /** Enables typed navigation in PageRules; inherited by nested scopes. */
+    readonly ctx?: DataContext;
+    readonly sources?: CompositeSources;
+    readonly overrides?: CompositeOverrides;
+    /** Optional semantic markup; the definition still controls activation and ownership. */
+    readonly placement?: CompositePlacement;
+}
+type CompositeArguments<I extends CompositeContract> = {} extends CompositeContractValues<I> ? [options?: CompositeOptions<I>] : [options: CompositeOptions<I> & {
+    readonly inputs: CompositeContractValues<I>;
+}];
+export interface CompositeChildHandle {
+    readonly status: ReadonlySignal<"idle" | "loading" | "ready" | "error" | "suppressed" | "disposed">;
+    readonly error: ReadonlySignal<Error | undefined>;
+    /** Does not change placement/visibility; concurrent callers join one creation. */
+    ensure(): Promise<HTMLElement>;
+}
+/** A logical owner with a stable scope and independently activated named views. */
+export declare class Composite<I extends CompositeContract = CompositeContract> {
+    #private;
+    readonly registry: CompositeResolver<I>;
+    readonly element: HTMLDivElement;
+    readonly lifetime: Lifetime;
+    readonly scope: PageScope;
+    readonly activity: SessionActivity;
+    readonly commands: Readonly<Record<string, Command>>;
+    readonly children: Readonly<Record<string, CompositeChildHandle>>;
+    readonly model: CompositeValues;
+    readonly definition: CompositeDefinition;
+    constructor(definition: CompositeDefinition, registry: CompositeResolver<I>, ...args: CompositeArguments<NoInfer<I>>);
+    mount(target: HTMLElement): this;
+    /** The caller performs close/draft guards before unconditional teardown. */
+    dispose(): void;
+    report(error: unknown): Error;
+}
+/** Use either a compiled YAML definition or a JS definition as a registered child. */
+export declare function compositeComponent(definition: CompositeDefinition, registry: CompositeResolver, inputs: CompositeContract, sources?: CompositeSources): CompositeComponentType;
+export {};