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

package/dist/prod/message/message.definition.js

@@ -0,0 +1,34 @@
+import { buttonDefinition } from "@oddkin/components/button";
+import { compose } from "@oddkin/core/element";
+import { actionApprovalDefinition } from "../action-approval/action-approval.definition.js";
+import { aiLabelDefinition } from "../ai-label/ai-label.definition.js";
+import { artifactDefinition } from "../artifact/artifact.definition.js";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { messageBranchDefinition } from "../message-branch/message-branch.definition.js";
+import { responseFeedbackDefinition } from "../response-feedback/response-feedback.definition.js";
+import { responseDefinition } from "../response/response.definition.js";
+import { sourcesDefinition } from "../sources/sources.definition.js";
+import { toolCallDefinition } from "../tool-call/tool-call.definition.js";
+import { OddkinMessage } from "./message.js";
+import { messageStyles } from "./message.styles.js";
+import { messageTemplate } from "./message.template.js";
+const messageDefinition = compose({
+  name: "odd-message",
+  element: OddkinMessage,
+  template: messageTemplate,
+  styles: [aiBaseStyles, messageStyles],
+  dependencies: {
+    button: buttonDefinition,
+    response: responseDefinition,
+    sources: sourcesDefinition,
+    toolCall: toolCallDefinition,
+    approval: actionApprovalDefinition,
+    artifact: artifactDefinition,
+    branch: messageBranchDefinition,
+    feedback: responseFeedbackDefinition,
+    label: aiLabelDefinition
+  }
+});
+export {
+  messageDefinition
+};

package/dist/prod/message/message.js

@@ -0,0 +1,158 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { can } from "../contracts/normalize.js";
+import { announceEvent, messageEditEvent, messageRegenerateEvent } from "../events.js";
+import { revealSourceEvent } from "../citation/citation.js";
+import { format, strings } from "../internal/strings.js";
+const MESSAGE_STRINGS = {
+  user: "You",
+  assistant: "Assistant",
+  system: "System",
+  tool: "Tool",
+  reasoning: "Reasoning",
+  copy: "Copy",
+  copied: "Copied to clipboard.",
+  copyFailed: "Copying failed.",
+  regenerate: "Regenerate",
+  edit: "Edit",
+  save: "Send edited message",
+  cancel: "Cancel",
+  editLabel: "Edit your message",
+  unsupported: "This message contains content ({type}) that can\u2019t be shown here.",
+  toolMissing: "A tool call is referenced but its record is missing.",
+  approvalMissing: "An approval is referenced but its record is missing.",
+  artifactMissing: "An artifact is referenced but its record is missing.",
+  dataInvalid: "Structured content \u201C{name}\u201D was not shown because it did not pass validation.",
+  file: "Attachment"
+};
+class OddkinMessage extends OddkinElement.with({
+  message: prop.object({ description: "The message record." }),
+  attempt: prop.object({
+    description: "The attempt that writes this (assistant) message."
+  }),
+  tools: prop.object({
+    description: "Tool call records by id."
+  }),
+  approvals: prop.object({
+    description: "Approval records by id."
+  }),
+  artifacts: prop.object({
+    description: "Artifact records by id."
+  }),
+  branch: prop.object({ description: "Position among alternative versions." }),
+  feedback: prop.object({ description: "Feedback record for this message." }),
+  capabilities: prop.object({
+    description: "Enables regenerate, edit, branches, feedback, approvals."
+  }),
+  markdown: prop.object({ description: "Markdown rendering options." }),
+  renderers: prop.object({
+    description: "Validated renderers for `data` parts by name."
+  }),
+  artifactRenderers: prop.object({
+    description: "Artifact renderers by kind."
+  }),
+  renderTool: prop.object({
+    description: "Renderer for tool results."
+  }),
+  feedbackReasons: prop.array({ description: "Reasons offered for negative feedback." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = {
+    "odd-message-edit": messageEditEvent,
+    "odd-message-regenerate": messageRegenerateEvent,
+    "odd-announce": announceEvent
+  };
+  /** @internal Inline edit draft (presentation state); undefined when not editing. */
+  _editing = signal(void 0);
+  /** @internal */
+  get _strings() {
+    return strings(MESSAGE_STRINGS, this.strings);
+  }
+  /** Canonical text of the message (text parts joined), as copied. */
+  get text() {
+    return (this.message?.parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join(`
+
+`);
+  }
+  /** @internal */
+  get _sources() {
+    return (this.message?.parts ?? []).filter((p) => p.type === "source");
+  }
+  /** @internal Display status for a text part. */
+  _textStatus(part, last) {
+    if ((part.type === "text" || part.type === "reasoning") && part.state === "streaming")
+      return "streaming";
+    const status = this.attempt?.status;
+    return last && (status === "interrupted" || status === "cancelled" || status === "failed") ? status : last && (status === "streaming" || status === "submitted" || status === "accepted") ? "streaming" : "complete";
+  }
+  /** @internal */
+  _data(part) {
+    const renderer = this.renderers?.[part.name];
+    if (renderer)
+      try {
+        return renderer.validate(part.data) ? renderer.render(part.data, part) : void 0;
+      } catch {
+        return;
+      }
+  }
+  /** @internal */
+  _can(name) {
+    return can(this.capabilities, name);
+  }
+  /** @internal */
+  _copy = async () => {
+    const t = this._strings;
+    try {
+      await navigator.clipboard.writeText(this.text), this.emit(announceEvent, { text: t.copied, priority: "polite", key: `copy:${Date.now()}` });
+    } catch {
+      this.emit(announceEvent, {
+        text: t.copyFailed,
+        priority: "polite",
+        key: `copy-failed:${Date.now()}`
+      });
+    }
+  };
+  /** @internal */
+  _regenerate = () => {
+    const m = this.message;
+    m?.attemptId && this._can("regenerate") && this.emit(messageRegenerateEvent, { messageId: m.id, attemptId: m.attemptId });
+  };
+  /** @internal */
+  _startEdit = () => {
+    this._editing.value = this.text, this.updateComplete.then(() => this.shadowRoot?.querySelector(".edit textarea")?.focus());
+  };
+  /** @internal */
+  _onEditInput = (event) => {
+    this._editing.value = event.target.value;
+  };
+  /** @internal */
+  _cancelEdit = () => {
+    this._editing.value = void 0, this.updateComplete.then(() => this.shadowRoot?.querySelector('[data-action="edit"]')?.focus());
+  };
+  /** @internal */
+  _saveEdit = (event) => {
+    event.preventDefault();
+    const m = this.message, text = this._editing.peek()?.trim();
+    !m || !text || (this._editing.value = void 0, this.emit(messageEditEvent, { messageId: m.id, text }));
+  };
+  /** @internal */
+  _onEditKey = (event) => {
+    event.key === "Escape" && (event.stopPropagation(), this._cancelEdit());
+  };
+  connected(scope) {
+    scope.listen(this, revealSourceEvent.type, (event) => {
+      const sources = this.shadowRoot?.querySelector("odd-sources");
+      sources && sources.reveal(event.detail.sourceId) && (event.preventDefault(), event.stopPropagation());
+    });
+  }
+  /** @internal */
+  _unsupported(type) {
+    return format(this._strings.unsupported, { type });
+  }
+}
+export {
+  MESSAGE_STRINGS,
+  OddkinMessage
+};

package/dist/prod/message/message.recipe.js

@@ -0,0 +1,14 @@
+import { defineLayoutRecipe, row, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const messageRecipe = defineLayoutRecipe({
+  name: "message",
+  regions: {
+    base: stack({ gap: token("space.xs") }),
+    header: row({ gap: token("space.xs"), wrap: !0 }),
+    content: stack({ gap: token("space.sm") }),
+    edit: stack({ gap: token("space.xs") })
+  }
+});
+export {
+  messageRecipe
+};

package/dist/prod/message/message.recipe.styles.js

@@ -0,0 +1,33 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const messageRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--odd-space-xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-sm);
+    min-inline-size: 0;
+  }
+  .edit {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  messageRecipeStyles
+};

package/dist/prod/message/message.styles.js

@@ -0,0 +1,63 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { messageRecipeStyles } from "./message.recipe.styles.js";
+const messageStyles = css`
+  ${messageRecipeStyles}
+  .role {
+    font-size: ${token("font.size.sm")};
+    font-weight: ${token("font.weight.semibold")};
+    color: ${token("color.text.secondary")};
+  }
+  .base[data-role='user'] .content {
+    align-self: start;
+    max-inline-size: 100%;
+    padding: ${token("space.xs")} ${token("space.sm")};
+    border-radius: ${token("radius.lg")};
+    background: ${token("color.surface.sunken")};
+  }
+  .plain-text {
+    margin: 0;
+    white-space: pre-wrap;
+  }
+  .reasoning summary {
+    min-block-size: ${token("target.min")};
+    color: ${token("color.text.secondary")};
+    font-size: ${token("font.size.sm")};
+    cursor: pointer;
+  }
+  .reasoning odd-response {
+    padding-inline-start: ${token("space.sm")};
+    border-inline-start: ${token("border.width.default")} solid ${token("color.border.default")};
+    color: ${token("color.text.secondary")};
+  }
+  .file {
+    margin: 0;
+    font-size: ${token("font.size.sm")};
+  }
+  .file a {
+    color: ${token("color.link")};
+  }
+  .fallback {
+    margin: 0;
+    padding: ${token("space.xs")} ${token("space.sm")};
+    border: ${token("border.width.default")} dashed ${token("color.border.default")};
+    border-radius: ${token("radius.sm")};
+    color: ${token("color.text.secondary")};
+    font-size: ${token("font.size.sm")};
+  }
+  .edit textarea {
+    inline-size: 100%;
+    padding: ${token("space.xs")};
+    border: ${token("border.width.default")} solid ${token("color.border.strong")};
+    border-radius: ${token("control.radius")};
+    background: ${token("color.surface.default")};
+    color: inherit;
+    font: inherit;
+  }
+  .footer {
+    gap: ${token("space.2xs")};
+  }
+`;
+export {
+  messageStyles
+};

package/dist/prod/message/message.template.js

@@ -0,0 +1,136 @@
+import { live } from "@oddkin/core/helpers/live";
+import { html, repeat } from "@oddkin/core/template";
+import { can } from "../contracts/normalize.js";
+import { safeUrl } from "../markdown/url.js";
+import { format } from "../internal/strings.js";
+const part = (host, p, lastText, c) => {
+  const t = host._strings, role = host.message?.role;
+  switch (p.type) {
+    case "text":
+      return role === "assistant" ? html`<odd-response
+            .text=${p.text}
+            .status=${host._textStatus(p, lastText)}
+            .error=${c.error}
+            .sources=${c.sources}
+            .markdown=${c.markdown}
+          ></odd-response>` : html`<p class="plain-text">${p.text}</p>`;
+    case "reasoning":
+      return html`<details class="reasoning">
+        <summary>${t.reasoning}</summary>
+        <odd-response
+          .text=${p.text}
+          .status=${host._textStatus(p, !1)}
+          .markdown=${c.markdown}
+        ></odd-response>
+      </details>`;
+    case "file": {
+      const url = p.url ? safeUrl(p.url) : void 0;
+      return html`<p class="file">
+        <span class="muted">${t.file}:</span>
+        ${url ? html`<a href=${url} rel="noopener noreferrer nofollow" target="_blank">${p.name}</a>` : html`<span>${p.name}</span>`}
+      </p>`;
+    }
+    case "source":
+      return null;
+    case "tool-call": {
+      const tool = c.tools?.[p.toolCallId];
+      return tool ? html`<odd-tool-call
+        .tool=${tool}
+        .approval=${tool.approvalId ? c.approvals?.[tool.approvalId] : void 0}
+        .capabilities=${c.capabilities}
+        .renderOutput=${c.renderTool}
+      ></odd-tool-call>` : html`<p class="fallback">${t.toolMissing}</p>`;
+    }
+    case "approval": {
+      const approval = c.approvals?.[p.approvalId];
+      return approval ? html`<odd-action-approval
+        .approval=${approval}
+        .capabilities=${c.capabilities}
+      ></odd-action-approval>` : html`<p class="fallback">${t.approvalMissing}</p>`;
+    }
+    case "artifact": {
+      const artifact = c.artifacts?.[p.artifactId];
+      return artifact ? html`<odd-artifact
+        .artifact=${artifact}
+        revision-id=${p.revisionId ?? ""}
+        .renderers=${c.artifactRenderers}
+        .markdown=${c.markdown}
+      ></odd-artifact>` : html`<p class="fallback">${t.artifactMissing}</p>`;
+    }
+    case "data":
+      return host._data(p) ?? html`<p class="fallback">${format(t.dataInvalid, { name: p.name })}</p>`;
+    case "unsupported":
+      return html`<p class="fallback">${host._unsupported(p.originalType)}</p>`;
+  }
+}, messageTemplate = (host) => {
+  const t = host._strings, m = host.message;
+  if (!m)
+    return html``;
+  const parts = m.parts;
+  let lastText = -1;
+  parts.forEach((p, i) => {
+    p.type === "text" && (lastText = i);
+  });
+  const assistant = m.role === "assistant", editing = host._editing.value, terminal = ["completed", "cancelled", "failed", "interrupted"].includes(host.attempt?.status ?? "completed"), sources = host._sources, context = {
+    tools: host.tools,
+    approvals: host.approvals,
+    artifacts: host.artifacts,
+    capabilities: host.capabilities,
+    markdown: host.markdown,
+    artifactRenderers: host.artifactRenderers,
+    renderTool: host.renderTool,
+    sources,
+    error: host.attempt?.error
+  };
+  return host.renderers, html`<div class="base" data-role=${m.role}>
+    <div part="header" class="header">
+      <span class="role">${t[m.role]}</span>
+      ${m.provenance ? html`<odd-ai-label .provenance=${m.provenance}></odd-ai-label>` : null}
+    </div>
+    <div part="content" class="content" ?hidden=${editing !== void 0}>
+      ${repeat(parts, (p) => p.id, (p, i) => part(host, p, i === lastText, context))}
+      ${sources.length ? html`<odd-sources .sources=${sources}></odd-sources>` : null}
+    </div>
+    ${editing !== void 0 ? html`<form class="edit" @submit=${host._saveEdit} @keydown=${host._onEditKey}>
+            <label
+              ><span class="visually-hidden">${t.editLabel}</span>
+              <textarea rows="3" .value=${live(editing)} @input=${host._onEditInput}></textarea>
+            </label>
+            <div class="actions">
+              <odd-button size="sm" appearance="primary" @click=${host._saveEdit}
+                >${t.save}</odd-button
+              >
+              <odd-button size="sm" appearance="ghost" @click=${host._cancelEdit}
+                >${t.cancel}</odd-button
+              >
+            </div>
+          </form>` : null}
+    <div part="footer" class="footer actions" ?hidden=${editing !== void 0}>
+      <odd-message-branch
+        .messageId=${m.id}
+        .branch=${host.branch}
+        .capabilities=${host.capabilities}
+      ></odd-message-branch>
+      ${host.text ? html`<button class="text-button" type="button" @click=${host._copy}>${t.copy}</button>` : null}
+      ${assistant && host._can("regenerate") && terminal && m.attemptId ? html`<button class="text-button" type="button" @click=${host._regenerate}>
+              ${t.regenerate}
+            </button>` : null}
+      ${m.role === "user" && host._can("edit") ? html`<button
+              class="text-button"
+              type="button"
+              data-action="edit"
+              @click=${host._startEdit}
+            >
+              ${t.edit}
+            </button>` : null}
+      ${assistant && can(host.capabilities, "feedback") && terminal ? html`<odd-response-feedback
+              .messageId=${m.id}
+              .feedback=${host.feedback}
+              .reasons=${host.feedbackReasons}
+            ></odd-response-feedback>` : null}
+    </div>
+  </div>`;
+};
+export {
+  messageTemplate
+};

package/dist/prod/message-branch/index.js

@@ -0,0 +1,11 @@
+import { OddkinMessageBranch, MESSAGE_BRANCH_STRINGS } from "./message-branch.js";
+import { messageBranchTemplate } from "./message-branch.template.js";
+import { messageBranchStyles } from "./message-branch.styles.js";
+import { messageBranchDefinition } from "./message-branch.definition.js";
+export {
+  MESSAGE_BRANCH_STRINGS,
+  OddkinMessageBranch,
+  messageBranchDefinition,
+  messageBranchStyles,
+  messageBranchTemplate
+};

package/dist/prod/message-branch/message-branch.define.js

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

package/dist/prod/message-branch/message-branch.definition.js

@@ -0,0 +1,14 @@
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinMessageBranch } from "./message-branch.js";
+import { messageBranchStyles } from "./message-branch.styles.js";
+import { messageBranchTemplate } from "./message-branch.template.js";
+const messageBranchDefinition = compose({
+  name: "odd-message-branch",
+  element: OddkinMessageBranch,
+  template: messageBranchTemplate,
+  styles: [aiBaseStyles, messageBranchStyles]
+});
+export {
+  messageBranchDefinition
+};

package/dist/prod/message-branch/message-branch.js

@@ -0,0 +1,41 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { can, unavailableReason } from "../contracts/normalize.js";
+import { branchSwitchEvent } from "../events.js";
+import { strings } from "../internal/strings.js";
+const MESSAGE_BRANCH_STRINGS = {
+  label: "Versions",
+  previous: "Previous version",
+  next: "Next version",
+  position: "Version {index} of {count}"
+};
+class OddkinMessageBranch extends OddkinElement.with({
+  messageId: prop.string({
+    default: "",
+    attribute: "message-id",
+    description: "The message shown now."
+  }),
+  branch: prop.object({ description: "Position among sibling versions." }),
+  capabilities: prop.object({ description: "`switchBranch` enables navigation." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = { "odd-branch-switch": branchSwitchEvent };
+  /** @internal */
+  get _strings() {
+    return strings(MESSAGE_BRANCH_STRINGS, this.strings);
+  }
+  /** @internal Why switching is unavailable, if it is. */
+  get _unavailable() {
+    return can(this.capabilities, "switchBranch") ? void 0 : unavailableReason(this.capabilities, "switchBranch") ?? "";
+  }
+  /** @internal */
+  _go = (event) => {
+    const target = event.currentTarget.dataset.direction === "previous" ? this.branch?.previousId : this.branch?.nextId;
+    target && this._unavailable === void 0 && this.emit(branchSwitchEvent, { messageId: this.messageId, targetMessageId: target });
+  };
+}
+export {
+  MESSAGE_BRANCH_STRINGS,
+  OddkinMessageBranch
+};

package/dist/prod/message-branch/message-branch.styles.js

@@ -0,0 +1,15 @@
+import { css } from "@oddkin/core/styles";
+const messageBranchStyles = css`
+  :host {
+    display: inline-block;
+  }
+  .base {
+    gap: 0;
+  }
+  .position {
+    font-variant-numeric: tabular-nums;
+  }
+`;
+export {
+  messageBranchStyles
+};

package/dist/prod/message-branch/message-branch.template.js

@@ -0,0 +1,45 @@
+import { html } from "@oddkin/core/template";
+import { format } from "../internal/strings.js";
+const messageBranchTemplate = (host) => {
+  const t = host._strings, branch = host.branch;
+  if (!branch || branch.count < 2)
+    return html``;
+  const off = host._unavailable !== void 0;
+  return html`<div
+    part="base"
+    class="base actions"
+    role="group"
+    aria-label=${t.label}
+    title=${host._unavailable || ""}
+  >
+    <button
+      class="text-button"
+      type="button"
+      data-direction="previous"
+      aria-label=${t.previous}
+      ?disabled=${off || !branch.previousId}
+      @click=${host._go}
+    >
+      <span aria-hidden="true">‹</span>
+    </button>
+    <span class="position muted">
+      <span aria-hidden="true">${branch.index} / ${branch.count}</span>
+      <span class="visually-hidden"
+        >${format(t.position, { index: branch.index, count: branch.count })}</span
+      >
+    </span>
+    <button
+      class="text-button"
+      type="button"
+      data-direction="next"
+      aria-label=${t.next}
+      ?disabled=${off || !branch.nextId}
+      @click=${host._go}
+    >
+      <span aria-hidden="true">›</span>
+    </button>
+  </div>`;
+};
+export {
+  messageBranchTemplate
+};

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

@@ -0,0 +1,11 @@
+import { OddkinModelSelect, MODEL_SELECT_STRINGS } from "./model-select.js";
+import { modelSelectTemplate } from "./model-select.template.js";
+import { modelSelectStyles } from "./model-select.styles.js";
+import { modelSelectDefinition } from "./model-select.definition.js";
+export {
+  MODEL_SELECT_STRINGS,
+  OddkinModelSelect,
+  modelSelectDefinition,
+  modelSelectStyles,
+  modelSelectTemplate
+};

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

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

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

@@ -0,0 +1,15 @@
+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";
+const modelSelectDefinition = compose({
+  name: "odd-model-select",
+  element: OddkinModelSelect,
+  template: modelSelectTemplate,
+  styles: [aiBaseStyles, fieldStructuralStyles, glyphStyles, controlStyles, modelSelectStyles]
+});
+export {
+  modelSelectDefinition
+};

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

@@ -0,0 +1,46 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { modelChangeEvent } from "../events.js";
+import { strings } from "../internal/strings.js";
+const MODEL_SELECT_STRINGS = {
+  label: "Model",
+  unavailable: "{label} (unavailable)",
+  capabilities: "Capabilities",
+  none: "No models available"
+};
+class OddkinModelSelect extends OddkinElement.with({
+  models: prop.array({ description: "Models supplied by the application." }),
+  value: prop.string({ default: "", reflect: !0, description: "Selected model id." }),
+  label: prop.string({
+    default: "",
+    description: 'Visible label; defaults to the localized "Model".'
+  }),
+  disabled: prop.boolean({ reflect: !0, description: "Prevents changing the model." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static shadowRootOptions = { mode: "open", delegatesFocus: !0 };
+  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, previousModelId = this.value, modelId = select.value;
+    this.emit(modelChangeEvent, { modelId, previousModelId }) ? this.value = modelId : 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");
+    select && this.models.length && select.value !== this.value && (select.value = this.value);
+  }
+}
+export {
+  MODEL_SELECT_STRINGS,
+  OddkinModelSelect
+};

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

@@ -0,0 +1,15 @@
+import { css } from "@oddkin/core/styles";
+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;
+  }
+`;
+export {
+  modelSelectStyles
+};