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

package/dist/prod/activity/activity.definition.js

@@ -0,0 +1,14 @@
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinActivity } from "./activity.js";
+import { activityStyles } from "./activity.styles.js";
+import { activityTemplate } from "./activity.template.js";
+const activityDefinition = compose({
+  name: "odd-activity",
+  element: OddkinActivity,
+  template: activityTemplate,
+  styles: [aiBaseStyles, activityStyles]
+});
+export {
+  activityDefinition
+};

package/dist/prod/activity/activity.js

@@ -0,0 +1,96 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { can } from "../contracts/normalize.js";
+import { attemptResumeEvent, attemptRetryEvent, promptStopEvent } from "../events.js";
+import { format, strings } from "../internal/strings.js";
+import { isActive } from "../controllers/transitions.js";
+const ACTIVITY_STRINGS = {
+  submitted: "Sending\u2026",
+  accepted: "Request accepted. Waiting for the response\u2026",
+  streaming: "Responding\u2026",
+  tools: "Running {count} tools: {names}",
+  tool: "Running {names}",
+  approval: "Waiting for approval",
+  "awaiting-input": "Waiting for your input",
+  completed: "Done",
+  cancelled: "Stopped",
+  failed: "Failed: {message}",
+  interrupted: "Connection ended before the response finished. The assistant may still be working.",
+  disconnected: "Disconnected. The response may still be generating.",
+  reconnecting: "Reconnecting\u2026",
+  stopping: "Stopping\u2026 waiting for confirmation.",
+  tooLate: "The response finished before it could be stopped.",
+  stopUnknown: "Stop could not be confirmed. The response may still be running.",
+  stop: "Stop",
+  resume: "Resume",
+  retry: "Retry"
+};
+class OddkinActivity extends OddkinElement.with({
+  attempt: prop.object({ description: "The attempt to describe." }),
+  tools: prop.array({ description: "The attempt's tool calls." }),
+  capabilities: prop.object({ description: "Which recovery actions to offer." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = {
+    "odd-prompt-stop": promptStopEvent,
+    "odd-attempt-resume": attemptResumeEvent,
+    "odd-attempt-retry": attemptRetryEvent
+  };
+  /** @internal */
+  get _strings() {
+    return strings(ACTIVITY_STRINGS, this.strings);
+  }
+  /** @internal The status line. */
+  _text() {
+    const t = this._strings, a = this.attempt;
+    if (!a)
+      return "";
+    if (a.stop === "requested")
+      return t.stopping;
+    if (a.stop === "too-late")
+      return t.tooLate;
+    if ((a.stop === "unknown" || a.stop === "failed") && a.status !== "cancelled")
+      return t.stopUnknown;
+    if (a.connection === "reconnecting")
+      return t.reconnecting;
+    if (a.connection === "disconnected" && isActive(a.status))
+      return t.disconnected;
+    if (a.status === "failed")
+      return format(t.failed, { message: a.error?.message ?? "" });
+    if (a.status === "streaming") {
+      const running = this.tools.filter((tool) => tool.status === "executing" || tool.status === "input-streaming");
+      if (this.tools.some((tool) => tool.status === "awaiting-approval"))
+        return t.approval;
+      if (running.length)
+        return format(running.length > 1 ? t.tools : t.tool, {
+          count: running.length,
+          names: running.map((tool) => tool.title ?? tool.toolName).join(", ")
+        });
+    }
+    return t[a.status];
+  }
+  /** @internal */
+  _actions() {
+    const a = this.attempt, caps = this.capabilities;
+    if (!a)
+      return { stop: !1, resume: !1, retry: !1 };
+    const lost = a.connection === "disconnected" || a.status === "interrupted";
+    return {
+      stop: can(caps, "stop") && (isActive(a.status) || a.status === "interrupted") && a.stop !== "requested",
+      resume: can(caps, "resume") && lost && a.connection !== "reconnecting" && a.status !== "completed",
+      retry: can(caps, "retry") && (a.status === "failed" || a.status === "interrupted" || a.status === "cancelled")
+    };
+  }
+  /** @internal */
+  _act = (event) => {
+    const button = event.currentTarget, action = button.dataset.action, a = this.attempt;
+    a && (action === "stop" && this.emit(promptStopEvent, { attemptId: a.attemptId }), action === "resume" && this.emit(attemptResumeEvent, { attemptId: a.attemptId }), action === "retry" && this.emit(attemptRetryEvent, { attemptId: a.attemptId }), this.updateComplete.then(() => {
+      !button.isConnected && this.isConnected && this.shadowRoot?.querySelector(".text")?.focus({ preventScroll: !0 });
+    }));
+  };
+}
+export {
+  ACTIVITY_STRINGS,
+  OddkinActivity
+};

package/dist/prod/activity/activity.recipe.js

@@ -0,0 +1,9 @@
+import { defineLayoutRecipe, row } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const activityRecipe = defineLayoutRecipe({
+  name: "activity",
+  regions: { base: row({ gap: token("space.xs"), wrap: !0 }) }
+});
+export {
+  activityRecipe
+};

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

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

package/dist/prod/activity/activity.styles.js

@@ -0,0 +1,38 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { activityRecipeStyles } from "./activity.recipe.styles.js";
+const activityStyles = css`
+  ${activityRecipeStyles}
+  .base {
+    min-block-size: ${token("target.min")};
+    color: ${token("color.text.secondary")};
+    font-size: ${token("font.size.sm")};
+  }
+  .base[data-status='failed'] {
+    color: ${token("color.danger.foreground")};
+  }
+  .indicator {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: ${token("radius.full")};
+    background: currentColor;
+    animation: odd-activity-pulse 1.2s ease-in-out infinite;
+  }
+  @keyframes odd-activity-pulse {
+    50% {
+      opacity: 0.3;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .indicator {
+      animation: none;
+    }
+  }
+  .text {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+`;
+export {
+  activityStyles
+};

package/dist/prod/activity/activity.template.js

@@ -0,0 +1,19 @@
+import { html } from "@oddkin/core/template";
+const activityTemplate = (host) => {
+  const a = host.attempt;
+  if (!a)
+    return html``;
+  const t = host._strings, actions = host._actions(), busy = a.status === "submitted" || a.status === "accepted" || a.status === "streaming" || a.stop === "requested";
+  return html`<div part="base" class="base" data-status=${a.status} data-connection=${a.connection}>
+    <span class="indicator" aria-hidden="true" ?hidden=${!busy}></span>
+    <span class="text" tabindex="-1">${host._text()}</span>
+    <span part="actions" class="actions">
+      ${actions.stop ? html`<button class="text-button" type="button" data-action="stop" @click=${host._act}>${t.stop}</button>` : null}
+      ${actions.resume ? html`<button class="text-button" type="button" data-action="resume" @click=${host._act}>${t.resume}</button>` : null}
+      ${actions.retry ? html`<button class="text-button" type="button" data-action="retry" @click=${host._act}>${t.retry}</button>` : null}
+    </span>
+  </div>`;
+};
+export {
+  activityTemplate
+};

package/dist/prod/activity/index.js

@@ -0,0 +1,11 @@
+import { OddkinActivity, ACTIVITY_STRINGS } from "./activity.js";
+import { activityTemplate } from "./activity.template.js";
+import { activityStyles } from "./activity.styles.js";
+import { activityDefinition } from "./activity.definition.js";
+export {
+  ACTIVITY_STRINGS,
+  OddkinActivity,
+  activityDefinition,
+  activityStyles,
+  activityTemplate
+};

package/dist/prod/ai-label/ai-label.define.js

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

package/dist/prod/ai-label/ai-label.definition.js

@@ -0,0 +1,14 @@
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinAiLabel } from "./ai-label.js";
+import { aiLabelStyles } from "./ai-label.styles.js";
+import { aiLabelTemplate } from "./ai-label.template.js";
+const aiLabelDefinition = compose({
+  name: "odd-ai-label",
+  element: OddkinAiLabel,
+  template: aiLabelTemplate,
+  styles: [aiBaseStyles, aiLabelStyles]
+});
+export {
+  aiLabelDefinition
+};

package/dist/prod/ai-label/ai-label.js

@@ -0,0 +1,29 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { strings } from "../internal/strings.js";
+const AI_LABEL_STRINGS = {
+  generated: "AI generated",
+  assisted: "AI assisted",
+  edited: "Edited by a person",
+  human: "Written by a person",
+  model: "Model",
+  provider: "Provider",
+  generatedAt: "Generated",
+  disclaimer: "Information supplied by the application; not independently verified."
+};
+class OddkinAiLabel extends OddkinElement.with({
+  provenance: prop.object({
+    description: "Origin information supplied by the application."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  /** @internal */
+  get _strings() {
+    return strings(AI_LABEL_STRINGS, this.strings);
+  }
+}
+export {
+  AI_LABEL_STRINGS,
+  OddkinAiLabel
+};

package/dist/prod/ai-label/ai-label.styles.js

@@ -0,0 +1,42 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+const aiLabelStyles = css`
+  :host {
+    display: inline-block;
+    font-size: ${token("font.size.xs")};
+  }
+  .label {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: ${token("target.min")};
+    padding-inline: ${token("space.xs")};
+    border-radius: ${token("radius.full")};
+    color: ${token("color.text.secondary")};
+    font-weight: ${token("font.weight.medium")};
+    list-style: none;
+    cursor: pointer;
+  }
+  .label::before {
+    content: '\\2726';
+    margin-inline-end: ${token("space.2xs")};
+  }
+  .details,
+  .notes,
+  .muted {
+    margin-block: ${token("space.2xs")} 0;
+    max-inline-size: 40ch;
+  }
+  .details div {
+    display: flex;
+    gap: ${token("space.xs")};
+  }
+  .details dt {
+    color: ${token("color.text.secondary")};
+  }
+  .details dd {
+    margin: 0;
+  }
+`;
+export {
+  aiLabelStyles
+};

package/dist/prod/ai-label/ai-label.template.js

@@ -0,0 +1,30 @@
+import { html } from "@oddkin/core/template";
+import { formatTime, langOf } from "../internal/strings.js";
+const aiLabelTemplate = (host) => {
+  const t = host._strings, p = host.provenance;
+  if (!p)
+    return html``;
+  const label = p.label ?? t[p.kind], when = formatTime(p.generatedAt, langOf(host)), hasDetails = !!(p.model || p.provider || when || p.notes);
+  return html`<details class="base" part="base">
+    <summary part="label" class="label" data-kind=${p.kind}>${label}</summary>
+    <dl part="details" class="details" ?hidden=${!hasDetails}>
+      <div ?hidden=${!p.model}>
+        <dt>${t.model}</dt>
+        <dd>${p.model ?? ""}</dd>
+      </div>
+      <div ?hidden=${!p.provider}>
+        <dt>${t.provider}</dt>
+        <dd>${p.provider ?? ""}</dd>
+      </div>
+      <div ?hidden=${!when}>
+        <dt>${t.generatedAt}</dt>
+        <dd>${when ?? ""}</dd>
+      </div>
+    </dl>
+    <p class="notes" ?hidden=${!p.notes}>${p.notes ?? ""}</p>
+    <p class="muted">${t.disclaimer}</p>
+  </details>`;
+};
+export {
+  aiLabelTemplate
+};

package/dist/prod/ai-label/index.js

@@ -0,0 +1,11 @@
+import { OddkinAiLabel, AI_LABEL_STRINGS } from "./ai-label.js";
+import { aiLabelTemplate } from "./ai-label.template.js";
+import { aiLabelStyles } from "./ai-label.styles.js";
+import { aiLabelDefinition } from "./ai-label.definition.js";
+export {
+  AI_LABEL_STRINGS,
+  OddkinAiLabel,
+  aiLabelDefinition,
+  aiLabelStyles,
+  aiLabelTemplate
+};

package/dist/prod/announce.js

@@ -0,0 +1,15 @@
+import { LiveAnnouncer, createLiveRegions } from "@oddkin/core/controllers/announce";
+import { createScope } from "@oddkin/core/scope";
+function createAnnouncer(container) {
+  const scope = createScope({ name: "announcer" }), regions = createLiveRegions(container);
+  scope.add(() => regions.remove(), "live regions");
+  const announcer = scope.use(new LiveAnnouncer({ regions: () => regions, event: "odd-announce", target: () => container }));
+  return {
+    announce: (detail) => announcer.announce(detail),
+    reset: () => announcer.reset(),
+    dispose: () => scope.dispose()
+  };
+}
+export {
+  createAnnouncer
+};

package/dist/prod/artifact/artifact.define.js

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

package/dist/prod/artifact/artifact.definition.js

@@ -0,0 +1,14 @@
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinArtifact } from "./artifact.js";
+import { artifactStyles } from "./artifact.styles.js";
+import { artifactTemplate } from "./artifact.template.js";
+const artifactDefinition = compose({
+  name: "odd-artifact",
+  element: OddkinArtifact,
+  template: artifactTemplate,
+  styles: [aiBaseStyles, artifactStyles]
+});
+export {
+  artifactDefinition
+};

package/dist/prod/artifact/artifact.js

@@ -0,0 +1,139 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { announceEvent, artifactExportEvent, artifactRevisionEvent } from "../events.js";
+import { format, strings } from "../internal/strings.js";
+import { MarkdownView } from "../markdown/render.js";
+const ARTIFACT_STRINGS = {
+  revision: "Revision",
+  revisionOption: "Revision {number} of {count}",
+  current: "(latest)",
+  preview: "Preview",
+  source: "Source",
+  view: "View",
+  copy: "Copy",
+  download: "Download",
+  copied: "Copied to clipboard.",
+  copyFailed: "Copying failed.",
+  noPreview: "No preview is available for this kind of artifact; showing the source."
+};
+class OddkinArtifact extends OddkinElement.with({
+  artifact: prop.object({ description: "The artifact record with all revisions." }),
+  revisionId: prop.string({
+    default: "",
+    attribute: "revision-id",
+    description: "Revision to show; empty shows the current one."
+  }),
+  view: prop.enum(["preview", "source"], {
+    default: "preview",
+    reflect: !0,
+    description: "Preview or source view."
+  }),
+  renderers: prop.object({
+    description: "Host renderers by artifact kind."
+  }),
+  exports: prop.array({
+    description: "Extra export formats offered through `odd-artifact-export`."
+  }),
+  markdown: prop.object({
+    description: "Options for the built-in Markdown and code preview."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = {
+    "odd-artifact-export": artifactExportEvent,
+    "odd-artifact-revision-change": artifactRevisionEvent,
+    "odd-announce": announceEvent
+  };
+  /** @internal Bumps whenever the preview is re-rendered. */
+  _previews = signal(0);
+  /** @internal */
+  get _strings() {
+    return strings(ARTIFACT_STRINGS, this.strings);
+  }
+  /** The revision on screen. */
+  get revision() {
+    const a = this.artifact;
+    if (a)
+      return a.revisions.find((r) => r.revisionId === (this.revisionId || a.currentRevisionId)) ?? a.revisions[a.revisions.length - 1];
+  }
+  /** @internal */
+  get _previewable() {
+    const kind = this.artifact?.kind;
+    return !!kind && (!!this.renderers?.[kind] || kind === "markdown" || kind === "code" || kind === "text");
+  }
+  /** @internal */
+  _onRevision = (event) => {
+    const revisionId = event.target.value, a = this.artifact;
+    a && (this.revisionId = revisionId, this.emit(artifactRevisionEvent, { artifactId: a.artifactId, revisionId }));
+  };
+  /** @internal */
+  _setMode = (event) => {
+    this.view = event.currentTarget.dataset.view;
+  };
+  /** @internal */
+  _copy = async () => {
+    const t = this._strings;
+    try {
+      await navigator.clipboard.writeText(this.revision?.content ?? ""), this.emit(announceEvent, {
+        text: t.copied,
+        priority: "polite",
+        key: `artifact-copy:${Date.now()}`
+      });
+    } catch {
+      this.emit(announceEvent, {
+        text: t.copyFailed,
+        priority: "polite",
+        key: `artifact-copy-failed:${Date.now()}`
+      });
+    }
+  };
+  /** @internal */
+  _export = (event) => {
+    const a = this.artifact, revision = this.revision;
+    if (!a || !revision)
+      return;
+    const format2 = event.currentTarget.dataset.format ?? "source";
+    if (!this.emit(artifactExportEvent, {
+      artifactId: a.artifactId,
+      revisionId: revision.revisionId,
+      format: format2
+    }) || format2 !== "source")
+      return;
+    const extension = a.kind === "markdown" ? "md" : a.kind === "code" ? a.language ?? "txt" : "txt", url = URL.createObjectURL(new Blob([revision.content], { type: "text/plain;charset=utf-8" })), link = this.ownerDocument.createElement("a");
+    link.href = url, link.download = `${a.title.replace(/[^\p{L}\p{N}._-]+/gu, "-").slice(0, 80) || "artifact"}.${extension.replace(/[^a-z0-9]/gi, "") || "txt"}`, link.click(), setTimeout(() => URL.revokeObjectURL(url), 0);
+  };
+  /** @internal */
+  _revisionLabel(revision, count) {
+    const t = this._strings, current = revision.revisionId === this.artifact?.currentRevisionId ? ` ${t.current}` : "";
+    return `${format(t.revisionOption, { number: revision.number, count })}${current}`;
+  }
+  mounted(scope) {
+    let identity;
+    scope.effect((run) => {
+      const a = this.artifact, revision = this.revision, mode = this.view, options = this.markdown ?? {}, renderer = a ? this.renderers?.[a.kind] : void 0;
+      a && identity !== void 0 && identity !== a.artifactId && this.revisionId && (this.revisionId = ""), identity = a?.artifactId;
+      const container = this.shadowRoot?.querySelector('[part="preview"]');
+      if (container && (container.replaceChildren(), !(!a || !revision || mode !== "preview"))) {
+        if (renderer) {
+          const cleanup = renderer(revision, a, container);
+          typeof cleanup == "function" && run.add(cleanup, "artifact renderer");
+        } else if (a.kind === "markdown" || a.kind === "code") {
+          const view = new MarkdownView(container, { ...options, headingOffset: 1 }), longest = Math.max(0, ...(revision.content.match(/`+/g) ?? []).map((run2) => run2.length)), fence = "`".repeat(Math.max(3, longest + 1)), source = a.kind === "code" ? `${fence}${a.language ?? ""}
+${revision.content}
+${fence}` : revision.content;
+          view.update(source, !1), run.add(() => view.dispose(), "artifact preview");
+        } else if (a.kind === "text") {
+          const pre = this.ownerDocument.createElement("pre");
+          pre.className = "text", pre.textContent = revision.content, container.append(pre);
+        }
+        this._previews.value = this._previews.peek() + 1;
+      }
+    }, { phase: "post", name: "<odd-artifact> preview" });
+  }
+}
+export {
+  ARTIFACT_STRINGS,
+  OddkinArtifact
+};

package/dist/prod/artifact/artifact.recipe.js

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

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

@@ -0,0 +1,21 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const artifactRecipeStyles = 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;
+  }
+}
+`);
+export {
+  artifactRecipeStyles
+};

package/dist/prod/artifact/artifact.styles.js

@@ -0,0 +1,71 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { artifactRecipeStyles } from "./artifact.recipe.styles.js";
+const artifactStyles = css`
+  ${artifactRecipeStyles}
+  .base {
+    padding: ${token("space.sm")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("radius.lg")};
+    background: ${token("color.surface.default")};
+  }
+  .title {
+    flex: 1 1 12rem;
+    margin: 0;
+    font-weight: ${token("font.weight.semibold")};
+  }
+  p {
+    margin: 0;
+  }
+  .revision {
+    min-inline-size: 0;
+  }
+  select {
+    /* Never wider than the header: a wide font in a narrow container clips the label instead. */
+    max-inline-size: 100%;
+    min-block-size: ${token("target.min")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("control.radius")};
+    background: ${token("color.surface.default")};
+    color: inherit;
+    font: inherit;
+    font-size: ${token("font.size.sm")};
+  }
+  .preview {
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+  .preview > :first-child {
+    margin-block-start: 0;
+  }
+  .preview pre,
+  .source {
+    margin: 0;
+    padding: ${token("space.sm")};
+    overflow: auto;
+    border-radius: ${token("radius.sm")};
+    background: ${token("color.surface.sunken")};
+    font-family: ${token("font.family.mono")};
+    font-size: ${token("font.size.sm")};
+  }
+  .source,
+  .preview .text {
+    max-block-size: 32rem;
+    white-space: pre-wrap;
+  }
+  .preview a {
+    color: ${token("color.link")};
+  }
+  .preview .tok-keyword {
+    color: ${token("color.link")};
+  }
+  .preview .tok-string {
+    color: ${token("color.success.foreground")};
+  }
+  .preview .tok-comment {
+    color: ${token("color.text.secondary")};
+  }
+`;
+export {
+  artifactStyles
+};