@oddkin/ai 0.0.0-stage → 1.0.0-beta.1

package/dist/model-select/model-select.d.ts

@@ -0,0 +1,71 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import type { ModelOption } from '../contracts/types.js';
+export declare const MODEL_SELECT_STRINGS: {
+    label: string;
+    unavailable: string;
+    capabilities: string;
+    none: string;
+};
+declare const OddkinModelSelect_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly models: import("@oddkin/core/element").PropDefinition<{
+        available: boolean;
+        capabilities?: string[] | undefined;
+        description?: string | undefined;
+        id: string;
+        label: string;
+        provider?: string | undefined;
+        reason?: string | undefined;
+    }[]>;
+    readonly value: import("@oddkin/core/element").PropDefinition<string>;
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly disabled: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        label: string;
+        unavailable: string;
+        capabilities: string;
+        none: string;
+    }> | undefined>;
+}>;
+/**
+ * Choose among application-provided models, with capabilities and availability. Built on a
+ * native `<select>`; unavailable models are listed but disabled, with the host's reason.
+ *
+ * @csspart label - The visible label of the select.
+ * @csspart select - The native select.
+ * @csspart details - Description, capabilities, and availability of the selected model.
+ * @cssprop --odd-field-height - Minimum height of the select (never below the target-size token). Shared by every form control.
+ * @cssprop --odd-field-radius - Corner radius of the select. Shared by every form control.
+ * @cssprop --odd-field-border-color - Border colour of the select. Shared by every form control.
+ * @cssprop --odd-field-background - Background colour of the select. Shared by every form control.
+ * @a11y A labelled native select; details are referenced with `aria-describedby`.
+ * @keyboard Native select behavior.
+ * @useFor Letting users choose the model used for the next request.
+ * @notFor Settings unrelated to models.
+ * @limitation Programmatic `value` changes never dispatch `odd-model-change`.
+ * @customization 1 2
+ * @category AI
+ */
+export declare class OddkinModelSelect extends OddkinModelSelect_base {
+    static shadowRootOptions: ShadowRootInit;
+    static events: {
+        'odd-model-change': import("@oddkin/core/element").EventDefinition<{
+            readonly modelId: string;
+            readonly previousModelId: string;
+        }>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinModelSelect>;
+    /** @internal */
+    get _strings(): typeof MODEL_SELECT_STRINGS;
+    /** The selected model record, if listed. */
+    get selected(): ModelOption | undefined;
+    /** @internal */
+    readonly _onChange: (event: Event) => void;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-model-select': OddkinModelSelect;
+    }
+}
+export {};
+//# sourceMappingURL=model-select.d.ts.map

package/dist/model-select/model-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.d.ts","sourceRoot":"","sources":["../../src/model-select/model-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIzD,eAAO,MAAM,oBAAoB;IAC/B,KAAK;IACL,WAAW;IACX,YAAY;IACZ,IAAI;CACL,CAAC;;;;;;;;;;;;;;;;;;;;;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,iBAAkB,SAAQ,sBAWrC;IACA,OAAgB,iBAAiB,EAAE,cAAc,CAA0C;IAC3F,OAAgB,MAAM;QAAK,kBAAkB;;;;MAAqB;IAClE,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,iBAAiB,CAAC,CAAC;IAEnE,gBAAgB;IAChB,IAAI,QAAQ,IAAI,OAAO,oBAAoB,CAE1C;IAED,4CAA4C;IAC5C,IAAI,QAAQ,IAAI,WAAW,GAAG,SAAS,CAEtC;IAED,gBAAgB;IAChB,QAAQ,CAAC,SAAS,UAAW,KAAK,KAAG,IAAI,CAMvC;IAGF,UAAmB,OAAO,IAAI,IAAI,CAGjC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,iBAAiB,CAAC;KACvC;CACF"}

package/dist/model-select/model-select.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="model-select.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=model-select.define.d.ts.map

package/dist/model-select/model-select.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.define.d.ts","sourceRoot":"","sources":["../../src/model-select/model-select.define.ts"],"names":[],"mappings":""}

package/dist/model-select/model-select.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./model-select.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { modelSelectDefinition } from './model-select.definition.js';
+define(modelSelectDefinition);
+//# sourceMappingURL=model-select.define.js.map

package/dist/model-select/model-select.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.define.js","sourceRoot":"","sources":["../../src/model-select/model-select.define.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/model-select/model-select.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinModelSelect } from './model-select.js';
+export declare const modelSelectDefinition: import("@oddkin/core/element").ElementDefinition<OddkinModelSelect>;
+//# sourceMappingURL=model-select.definition.d.ts.map

package/dist/model-select/model-select.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.definition.d.ts","sourceRoot":"","sources":["../../src/model-select/model-select.definition.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,qBAAqB,qEAKhC,CAAC"}

package/dist/model-select/model-select.definition.js

@@ -0,0 +1,13 @@
+import { controlStyles, fieldStructuralStyles, glyphStyles } from '@oddkin/components/styles';
+import { compose } from '@oddkin/core/element';
+import { aiBaseStyles } from '../internal/base.styles.js';
+import { OddkinModelSelect } from './model-select.js';
+import { modelSelectStyles } from './model-select.styles.js';
+import { modelSelectTemplate } from './model-select.template.js';
+export const modelSelectDefinition = compose({
+    name: 'odd-model-select',
+    element: OddkinModelSelect,
+    template: modelSelectTemplate,
+    styles: [aiBaseStyles, fieldStructuralStyles, glyphStyles, controlStyles, modelSelectStyles],
+});
+//# sourceMappingURL=model-select.definition.js.map

package/dist/model-select/model-select.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.definition.js","sourceRoot":"","sources":["../../src/model-select/model-select.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,CAAC,MAAM,qBAAqB,GAAG,OAAO,CAAC;IAC3C,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,iBAAiB;IAC1B,QAAQ,EAAE,mBAAmB;IAC7B,MAAM,EAAE,CAAC,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,CAAC;CAC7F,CAAC,CAAC"}

package/dist/model-select/model-select.js

@@ -0,0 +1,68 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { modelChangeEvent } from '../events.js';
+import { strings } from '../internal/strings.js';
+export const MODEL_SELECT_STRINGS = {
+    label: 'Model',
+    unavailable: '{label} (unavailable)',
+    capabilities: 'Capabilities',
+    none: 'No models available',
+};
+/**
+ * Choose among application-provided models, with capabilities and availability. Built on a
+ * native `<select>`; unavailable models are listed but disabled, with the host's reason.
+ *
+ * @csspart label - The visible label of the select.
+ * @csspart select - The native select.
+ * @csspart details - Description, capabilities, and availability of the selected model.
+ * @cssprop --odd-field-height - Minimum height of the select (never below the target-size token). Shared by every form control.
+ * @cssprop --odd-field-radius - Corner radius of the select. Shared by every form control.
+ * @cssprop --odd-field-border-color - Border colour of the select. Shared by every form control.
+ * @cssprop --odd-field-background - Background colour of the select. Shared by every form control.
+ * @a11y A labelled native select; details are referenced with `aria-describedby`.
+ * @keyboard Native select behavior.
+ * @useFor Letting users choose the model used for the next request.
+ * @notFor Settings unrelated to models.
+ * @limitation Programmatic `value` changes never dispatch `odd-model-change`.
+ * @customization 1 2
+ * @category AI
+ */
+export class OddkinModelSelect extends OddkinElement.with({
+    models: prop.array({ description: 'Models supplied by the application.' }),
+    value: prop.string({ default: '', reflect: true, description: 'Selected model id.' }),
+    label: prop.string({
+        default: '',
+        description: 'Visible label; defaults to the localized "Model".',
+    }),
+    disabled: prop.boolean({ reflect: true, description: 'Prevents changing the model.' }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { 'odd-model-change': modelChangeEvent };
+    /** @internal */
+    get _strings() {
+        return strings(MODEL_SELECT_STRINGS, this.strings);
+    }
+    /** The selected model record, if listed. */
+    get selected() {
+        return this.models.find((m) => m.id === this.value);
+    }
+    /** @internal */
+    _onChange = (event) => {
+        const select = event.target;
+        const previousModelId = this.value;
+        const modelId = select.value;
+        if (this.emit(modelChangeEvent, { modelId, previousModelId }))
+            this.value = modelId;
+        else
+            select.value = previousModelId;
+    };
+    // Options render after the select's own bindings, so the selection is synced after commit.
+    updated() {
+        const select = this.shadowRoot?.querySelector('select');
+        if (select && this.models.length && select.value !== this.value)
+            select.value = this.value;
+    }
+}
+//# sourceMappingURL=model-select.js.map

package/dist/model-select/model-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.js","sourceRoot":"","sources":["../../src/model-select/model-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,IAAI,EAAsB,MAAM,sBAAsB,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,uBAAuB;IACpC,YAAY,EAAE,cAAc;IAC5B,IAAI,EAAE,qBAAqB;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,iBAAkB,SAAQ,aAAa,CAAC,IAAI,CAAC;IACxD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAc,EAAE,WAAW,EAAE,qCAAqC,EAAE,CAAC;IACvF,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACrF,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC;QACjB,OAAO,EAAE,EAAE;QACX,WAAW,EAAE,mDAAmD;KACjE,CAAC;IACF,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,8BAA8B,EAAE,CAAC;IACtF,OAAO,EAAE,IAAI,CAAC,MAAM,CAAuC;QACzD,WAAW,EAAE,6BAA6B;KAC3C,CAAC;CACH,CAAC;IACA,MAAM,CAAU,iBAAiB,GAAmB,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;IAC3F,MAAM,CAAU,MAAM,GAAG,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,CAAC;IAGlE,gBAAgB;IAChB,IAAI,QAAQ;QACV,OAAO,OAAO,CAAC,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,4CAA4C;IAC5C,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC;IAED,gBAAgB;IACP,SAAS,GAAG,CAAC,KAAY,EAAQ,EAAE;QAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;QACjD,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;QACnC,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;QAC7B,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;YAAE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;;YAC/E,MAAM,CAAC,KAAK,GAAG,eAAe,CAAC;IACtC,CAAC,CAAC;IAEF,2FAA2F;IACxE,OAAO;QACxB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,IAAI,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;YAAE,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAC7F,CAAC;CACF"}

package/dist/model-select/model-select.styles.d.ts

@@ -0,0 +1,3 @@
+/** Layout only: the field look is the shared control module (`controlStyles`). */
+export declare const modelSelectStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=model-select.styles.d.ts.map

package/dist/model-select/model-select.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.styles.d.ts","sourceRoot":"","sources":["../../src/model-select/model-select.styles.ts"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,eAAO,MAAM,iBAAiB,yCAU7B,CAAC"}

package/dist/model-select/model-select.styles.js

@@ -0,0 +1,14 @@
+import { css } from '@oddkin/core/styles';
+/** Layout only: the field look is the shared control module (`controlStyles`). */
+export const modelSelectStyles = css `
+  :host {
+    display: inline-grid;
+    /* A fixed 0 minimum lets the select shrink below its longest option (narrow containers, wide fonts). */
+    grid-template-columns: minmax(0, auto);
+  }
+  .details {
+    display: grid;
+    max-inline-size: 32rem;
+  }
+`;
+//# sourceMappingURL=model-select.styles.js.map

package/dist/model-select/model-select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.styles.js","sourceRoot":"","sources":["../../src/model-select/model-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,kFAAkF;AAClF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;CAUnC,CAAC"}

package/dist/model-select/model-select.template.d.ts

@@ -0,0 +1,4 @@
+import type { OddkinModelSelect } from './model-select.js';
+/** Anatomy: the shared field classes around a `label`, the native `select`, and `details`. */
+export declare const modelSelectTemplate: (host: OddkinModelSelect) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=model-select.template.d.ts.map

package/dist/model-select/model-select.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.template.d.ts","sourceRoot":"","sources":["../../src/model-select/model-select.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,8FAA8F;AAC9F,eAAO,MAAM,mBAAmB,SAAU,iBAAiB,mDAoC1D,CAAC"}

package/dist/model-select/model-select.template.js

@@ -0,0 +1,39 @@
+import { chevronDownGlyph } from '@oddkin/components/styles';
+import { html } from '@oddkin/core/template';
+import { format } from '../internal/strings.js';
+/** Anatomy: the shared field classes around a `label`, the native `select`, and `details`. */
+export const modelSelectTemplate = (host) => {
+    const t = host._strings;
+    const selected = host.selected;
+    return html `<div class="field">
+    <label part="label" class="label" for="select">${host.label || t.label}</label>
+    <div class="control-box">
+      <select
+        part="select"
+        id="select"
+        class="control"
+        aria-describedby="details"
+        ?disabled=${host.disabled || !host.models.length}
+        @change=${host._onChange}
+      >
+        ${host.models.length ? null : html `<option value="">${t.none}</option>`}
+        ${host.models.map((model) => html `<option
+              .value=${model.id}
+              ?disabled=${!model.available}
+              ?selected=${model.id === host.value}
+            >
+              ${model.available ? model.label : format(t.unavailable, { label: model.label })}
+            </option>`)}
+      </select>
+      <span class="control-end">${chevronDownGlyph}</span>
+    </div>
+    <div part="details" id="details" class="description details" ?hidden=${!selected}>
+      <span ?hidden=${!selected?.description}>${selected?.description ?? ''}</span>
+      <span ?hidden=${!selected?.capabilities?.length}
+        >${t.capabilities}: ${selected?.capabilities?.join(', ') ?? ''}</span
+      >
+      <span ?hidden=${!selected || selected.available}>${selected?.reason ?? ''}</span>
+    </div>
+  </div>`;
+};
+//# sourceMappingURL=model-select.template.js.map

package/dist/model-select/model-select.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.template.js","sourceRoot":"","sources":["../../src/model-select/model-select.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGhD,8FAA8F;AAC9F,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAuB,EAAE,EAAE;IAC7D,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC/B,OAAO,IAAI,CAAA;qDACwC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK;;;;;;;oBAOtD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;kBACtC,IAAI,CAAC,SAAS;;UAEtB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,CAAC,CAAC,IAAI,WAAW;UACrE,IAAI,CAAC,MAAM,CAAC,GAAG,CACf,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;uBACO,KAAK,CAAC,EAAE;0BACL,CAAC,KAAK,CAAC,SAAS;0BAChB,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK;;gBAEjC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;sBACvE,CACb;;kCAEyB,gBAAgB;;2EAEyB,CAAC,QAAQ;sBAC9D,CAAC,QAAQ,EAAE,WAAW,IAAI,QAAQ,EAAE,WAAW,IAAI,EAAE;sBACrD,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM;WAC1C,CAAC,CAAC,YAAY,KAAK,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;sBAEhD,CAAC,QAAQ,IAAI,QAAQ,CAAC,SAAS,IAAI,QAAQ,EAAE,MAAM,IAAI,EAAE;;SAEtE,CAAC;AACV,CAAC,CAAC"}

package/dist/prod/action-approval/action-approval.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { actionApprovalDefinition } from "./action-approval.definition.js";
+define(actionApprovalDefinition);

package/dist/prod/action-approval/action-approval.definition.js

@@ -0,0 +1,16 @@
+import { buttonDefinition } from "@oddkin/components/button";
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinActionApproval } from "./action-approval.js";
+import { actionApprovalStyles } from "./action-approval.styles.js";
+import { actionApprovalTemplate } from "./action-approval.template.js";
+const actionApprovalDefinition = compose({
+  name: "odd-action-approval",
+  element: OddkinActionApproval,
+  template: actionApprovalTemplate,
+  styles: [aiBaseStyles, actionApprovalStyles],
+  dependencies: { button: buttonDefinition }
+});
+export {
+  actionApprovalDefinition
+};

package/dist/prod/action-approval/action-approval.js

@@ -0,0 +1,133 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { can, unavailableReason } from "../contracts/normalize.js";
+import { announceEvent, approvalDecideEvent, approvalEditEvent } from "../events.js";
+import { FocusRecovery } from "@oddkin/core/controllers/focus";
+import { format, formatTime, langOf, strings } from "../internal/strings.js";
+const APPROVAL_STRINGS = {
+  approve: "Approve",
+  reject: "Reject",
+  edit: "Edit",
+  reason: "Reason (optional)",
+  target: "Affects",
+  changes: "Proposed changes",
+  before: "Before",
+  after: "After",
+  risk: "Risk: {risk}",
+  low: "low",
+  medium: "medium",
+  high: "high",
+  expires: "Expires {time}",
+  requested: "Waiting for your decision",
+  "decision-pending": "Submitting your decision\u2026",
+  approved: "Approved. The action runs separately; its result appears with the action.",
+  rejected: "Rejected. The action will not run.",
+  expired: "This request expired before a decision was recorded.",
+  superseded: "This proposal changed. Review the new version before deciding.",
+  "decision-failed": "Your decision was not recorded: {message}",
+  unavailable: "Decisions are not available here.",
+  announceRequested: "Approval needed: {title}",
+  announceApproved: "Approved: {title}",
+  announceRejected: "Rejected: {title}",
+  announceExpired: "Approval expired: {title}",
+  announceFailed: "Decision not recorded: {title}"
+};
+class OddkinActionApproval extends OddkinElement.with({
+  approval: prop.object({
+    description: "The approval record (replace to update; never mutate)."
+  }),
+  capabilities: prop.object({
+    description: "`respondToApproval` and `editApproval` decide which controls are enabled."
+  }),
+  announce: prop.enum(["none", "important"], {
+    default: "none",
+    empty: "important",
+    description: "Announce status changes (only when no surrounding surface announces them)."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = {
+    "odd-approval-decide": approvalDecideEvent,
+    "odd-approval-edit": approvalEditEvent,
+    "odd-announce": announceEvent
+  };
+  /** @internal `approvalId:revision:decision` requested from this view, until the record changes. */
+  _requested = signal(void 0);
+  /** @internal Local draft of the rejection reason. */
+  _reason = signal("");
+  /** @internal */
+  get _strings() {
+    return strings(APPROVAL_STRINGS, this.strings);
+  }
+  /** @internal Whether a decision can be requested now, and why not otherwise. */
+  get _blocked() {
+    const approval = this.approval;
+    if (!approval)
+      return this._strings.unavailable;
+    if (!can(this.capabilities, "respondToApproval"))
+      return unavailableReason(this.capabilities, "respondToApproval") ?? this._strings.unavailable;
+    if (approval.status !== "requested" && approval.status !== "decision-failed" || this._requested.value?.startsWith(`${approval.approvalId}:${approval.revision}:`))
+      return "";
+  }
+  /** @internal */
+  _decide = (decision) => {
+    const approval = this.approval;
+    !approval || this._blocked !== void 0 || (this._requested.value = `${approval.approvalId}:${approval.revision}:${decision}`, this.emit(approvalDecideEvent, {
+      approvalId: approval.approvalId,
+      revision: approval.revision,
+      toolCallId: approval.toolCallId,
+      decision,
+      reason: decision === "reject" && this._reason.peek() || void 0
+    }));
+  };
+  /** @internal */
+  _approve = () => this._decide("approve");
+  /** @internal */
+  _reject = () => this._decide("reject");
+  /** @internal */
+  _edit = () => {
+    const approval = this.approval;
+    approval && this.emit(approvalEditEvent, {
+      approvalId: approval.approvalId,
+      revision: approval.revision
+    });
+  };
+  /** @internal */
+  _onReason = (event) => {
+    this._reason.value = event.target.value;
+  };
+  /** @internal */
+  _expires() {
+    const time = formatTime(this.approval?.expiresAt, langOf(this));
+    return time ? format(this._strings.expires, { time }) : void 0;
+  }
+  mounted(scope) {
+    scope.use(new FocusRecovery({
+      root: () => this.shadowRoot,
+      fallback: () => this.shadowRoot?.querySelector(".state")
+    }));
+    let seen;
+    scope.effect(() => {
+      const approval = this.approval;
+      if (!approval)
+        return;
+      const key = `${approval.approvalId}:${approval.revision}`, requested = this._requested.peek();
+      requested && (!requested.startsWith(`${key}:`) || approval.status === "decision-failed") && (this._requested.value = void 0);
+      const changed = !seen || seen.key !== key || seen.status !== approval.status, announceNew = seen ? changed : approval.status === "requested";
+      if (seen = { key, status: approval.status }, this.announce === "none" || !announceNew)
+        return;
+      const t = this._strings, text = approval.status === "requested" ? t.announceRequested : approval.status === "approved" ? t.announceApproved : approval.status === "rejected" ? t.announceRejected : approval.status === "expired" ? t.announceExpired : approval.status === "decision-failed" ? t.announceFailed : void 0;
+      text && this.emit(announceEvent, {
+        text: format(text, { title: approval.title }),
+        priority: "polite",
+        key: `approval:${key}:${approval.status}`
+      });
+    }, { phase: "post", name: "<odd-action-approval> status" });
+  }
+}
+export {
+  APPROVAL_STRINGS,
+  OddkinActionApproval
+};

package/dist/prod/action-approval/action-approval.recipe.js

@@ -0,0 +1,14 @@
+import { defineLayoutRecipe, row, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const actionApprovalRecipe = defineLayoutRecipe({
+  name: "action-approval",
+  regions: {
+    base: stack({ gap: token("space.xs") }),
+    changes: stack({ gap: token("space.2xs") }),
+    change: row({ gap: token("space.xs"), align: "stretch", wrap: !0 }),
+    reason: stack({ gap: token("space.2xs") })
+  }
+});
+export {
+  actionApprovalRecipe
+};

package/dist/prod/action-approval/action-approval.recipe.styles.js

@@ -0,0 +1,33 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const actionApprovalRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .changes {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-2xs);
+    min-inline-size: 0;
+  }
+  .change {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--odd-space-xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+  .reason {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-2xs);
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  actionApprovalRecipeStyles
+};

package/dist/prod/action-approval/action-approval.styles.js

@@ -0,0 +1,68 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { actionApprovalRecipeStyles } from "./action-approval.recipe.styles.js";
+const actionApprovalStyles = css`
+  ${actionApprovalRecipeStyles}
+  .base {
+    padding: ${token("space.sm")};
+    border: ${token("border.width.strong")} solid ${token("color.border.strong")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.raised")};
+  }
+  .base[data-status='approved'],
+  .base[data-status='rejected'],
+  .base[data-status='expired'],
+  .base[data-status='superseded'] {
+    border-width: ${token("border.width.default")};
+    border-color: ${token("color.border.default")};
+  }
+  p {
+    margin: 0;
+  }
+  .title {
+    font-weight: ${token("font.weight.semibold")};
+  }
+  .changes {
+    font-size: ${token("font.size.sm")};
+  }
+  .change-label {
+    font-weight: ${token("font.weight.medium")};
+  }
+  del {
+    color: ${token("color.danger.foreground")};
+  }
+  ins {
+    color: ${token("color.success.foreground")};
+    text-decoration: none;
+  }
+  .state {
+    font-size: ${token("font.size.sm")};
+  }
+  .state[data-tone='success'] {
+    color: ${token("color.success.foreground")};
+  }
+  .state[data-tone='danger'] {
+    color: ${token("color.danger.foreground")};
+  }
+  .reason {
+    flex: 1 1 100%;
+  }
+  textarea {
+    min-block-size: ${token("target.min")};
+    padding: ${token("space.2xs")} ${token("space.xs")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("control.radius")};
+    font: inherit;
+    color: inherit;
+    background: ${token("color.surface.default")};
+    resize: vertical;
+  }
+  @media (forced-colors: active) {
+    .base {
+      border-color: CanvasText;
+    }
+  }
+`;
+export {
+  actionApprovalStyles
+};

package/dist/prod/action-approval/action-approval.template.js

@@ -0,0 +1,71 @@
+import { html } from "@oddkin/core/template";
+import { can } from "../contracts/normalize.js";
+import { format } from "../internal/strings.js";
+const actionApprovalTemplate = (host) => {
+  const t = host._strings, approval = host.approval;
+  if (!approval)
+    return html``;
+  const blocked = host._blocked, pending = approval.status === "decision-pending" || blocked === "" && approval.status === "requested", decided = host._requested.value?.split(":").pop(), actionable = approval.status === "requested" || approval.status === "decision-failed", statusText = approval.status === "decision-failed" ? format(t["decision-failed"], { message: approval.error?.message ?? "" }) : pending ? t["decision-pending"] : t[approval.status], tone = approval.status === "approved" ? "success" : approval.status === "decision-failed" || approval.status === "rejected" ? "danger" : "active", expires = host._expires();
+  return html`<div
+    part="base"
+    class="base"
+    role="group"
+    aria-labelledby="title"
+    data-status=${approval.status}
+  >
+    <p id="title" class="title">${approval.title}</p>
+    <p class="summary" ?hidden=${!approval.summary}>${approval.summary ?? ""}</p>
+    <p class="target" ?hidden=${!approval.target}>
+      <span class="muted">${t.target}:</span> ${approval.target ?? ""}
+    </p>
+    <p class="muted" ?hidden=${!approval.risk && !expires}>
+      ${approval.risk ? format(t.risk, { risk: t[approval.risk] }) : ""} ${expires ?? ""}
+    </p>
+    ${approval.changes?.length ? html`<div part="changes" class="changes" role="group" aria-label=${t.changes}>
+            ${approval.changes.map((change) => html`<div class="change">
+                  <span class="change-label">${change.label}</span>
+                  ${change.before !== void 0 ? html`<del
+                          ><span class="visually-hidden">${t.before}: </span>${change.before}</del
+                        >` : null}
+                  ${change.after !== void 0 ? html`<ins
+                          ><span class="visually-hidden">${t.after}: </span>${change.after}</ins
+                        >` : null}
+                </div>`)}
+          </div>` : null}
+    <p class="state" data-tone=${tone}>${statusText}</p>
+    <div part="actions" class="actions" ?hidden=${!actionable}>
+      <label class="reason">
+        <span class="muted">${t.reason}</span>
+        <textarea
+          rows="1"
+          .value=${host._reason.value}
+          @input=${host._onReason}
+          ?disabled=${blocked !== void 0}
+        ></textarea>
+      </label>
+      <odd-button
+        appearance="primary"
+        ?disabled=${blocked !== void 0 && !(pending && decided === "approve")}
+        ?loading=${pending && decided === "approve"}
+        @click=${host._approve}
+        >${t.approve}</odd-button
+      >
+      <odd-button
+        ?disabled=${blocked !== void 0 && !(pending && decided === "reject")}
+        ?loading=${pending && decided === "reject"}
+        @click=${host._reject}
+        >${t.reject}</odd-button
+      >
+      ${can(host.capabilities, "editApproval") ? html`<odd-button
+              appearance="ghost"
+              ?disabled=${blocked !== void 0}
+              @click=${host._edit}
+              >${t.edit}</odd-button
+            >` : null}
+    </div>
+    <p class="muted" ?hidden=${!actionable || !blocked}>${blocked ?? ""}</p>
+  </div>`;
+};
+export {
+  actionApprovalTemplate
+};

package/dist/prod/action-approval/index.js

@@ -0,0 +1,11 @@
+import { OddkinActionApproval, APPROVAL_STRINGS } from "./action-approval.js";
+import { actionApprovalTemplate } from "./action-approval.template.js";
+import { actionApprovalStyles } from "./action-approval.styles.js";
+import { actionApprovalDefinition } from "./action-approval.definition.js";
+export {
+  APPROVAL_STRINGS,
+  OddkinActionApproval,
+  actionApprovalDefinition,
+  actionApprovalStyles,
+  actionApprovalTemplate
+};

package/dist/prod/activity/activity.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { activityDefinition } from "./activity.definition.js";
+define(activityDefinition);