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

package/dist/prod/artifact/artifact.template.js

@@ -0,0 +1,58 @@
+import { html } from "@oddkin/core/template";
+const artifactTemplate = (host) => {
+  const t = host._strings, a = host.artifact, revision = host.revision;
+  if (!a || !revision)
+    return html`<div part="preview" hidden></div>`;
+  const previewable = host._previewable, mode = previewable ? host.view : "source";
+  return html`<section class="base" aria-labelledby="title">
+    <div part="header" class="header">
+      <p id="title" class="title">${a.title}</p>
+      <label class="revision" ?hidden=${a.revisions.length < 2}>
+        <span class="visually-hidden">${t.revision}</span>
+        <select @change=${host._onRevision}>
+          ${a.revisions.map((r) => html`<option .value=${r.revisionId} ?selected=${r.revisionId === revision.revisionId}>
+                ${host._revisionLabel(r, a.revisions.length)}
+              </option>`)}
+        </select>
+      </label>
+      <span class="muted" ?hidden=${a.revisions.length > 1}
+        >${host._revisionLabel(revision, a.revisions.length)}</span
+      >
+      <div class="actions" role="group" aria-label=${t.view} ?hidden=${!previewable}>
+        <button
+          class="text-button"
+          type="button"
+          data-view="preview"
+          aria-pressed=${mode === "preview" ? "true" : "false"}
+          @click=${host._setMode}
+        >
+          ${t.preview}
+        </button>
+        <button
+          class="text-button"
+          type="button"
+          data-view="source"
+          aria-pressed=${mode === "source" ? "true" : "false"}
+          @click=${host._setMode}
+        >
+          ${t.source}
+        </button>
+      </div>
+      <div class="actions">
+        <button class="text-button" type="button" @click=${host._copy}>${t.copy}</button>
+        <button class="text-button" type="button" data-format="source" @click=${host._export}>
+          ${t.download}
+        </button>
+        ${host.exports.map((e) => html`<button class="text-button" type="button" data-format=${e.format} @click=${host._export}>${e.label}</button>`)}
+      </div>
+    </div>
+    <p class="muted" ?hidden=${previewable}>${t.noPreview}</p>
+    <p class="summary muted" ?hidden=${!revision.summary}>${revision.summary ?? ""}</p>
+    <div part="preview" class="preview" ?hidden=${mode !== "preview"}></div>
+    <pre part="source" class="source" tabindex="0" ?hidden=${mode !== "source"}>
+${revision.content}</pre>
+  </section>`;
+};
+export {
+  artifactTemplate
+};

package/dist/prod/artifact/index.js

@@ -0,0 +1,11 @@
+import { OddkinArtifact, ARTIFACT_STRINGS } from "./artifact.js";
+import { artifactTemplate } from "./artifact.template.js";
+import { artifactStyles } from "./artifact.styles.js";
+import { artifactDefinition } from "./artifact.definition.js";
+export {
+  ARTIFACT_STRINGS,
+  OddkinArtifact,
+  artifactDefinition,
+  artifactStyles,
+  artifactTemplate
+};

package/dist/prod/change-review/change-review.define.js

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

package/dist/prod/change-review/change-review.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 { OddkinChangeReview } from "./change-review.js";
+import { changeReviewStyles } from "./change-review.styles.js";
+import { changeReviewTemplate } from "./change-review.template.js";
+const changeReviewDefinition = compose({
+  name: "odd-change-review",
+  element: OddkinChangeReview,
+  template: changeReviewTemplate,
+  styles: [aiBaseStyles, changeReviewStyles],
+  dependencies: { button: buttonDefinition }
+});
+export {
+  changeReviewDefinition
+};

package/dist/prod/change-review/change-review.js

@@ -0,0 +1,110 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { diffLines, diffWords } from "../controllers/diff.js";
+import { announceEvent, changeAcceptEvent, changeRejectEvent, changeUndoEvent } from "../events.js";
+import { FocusRecovery } from "@oddkin/core/controllers/focus";
+import { format, strings } from "../internal/strings.js";
+const CHANGE_REVIEW_STRINGS = {
+  label: "Proposed changes",
+  empty: "No proposed changes.",
+  before: "Before",
+  after: "After",
+  deleted: "deleted",
+  inserted: "inserted",
+  accept: "Accept",
+  reject: "Reject",
+  undo: "Undo",
+  proposed: "Proposed",
+  "accept-pending": "Applying\u2026",
+  applied: "Applied",
+  rejected: "Rejected",
+  stale: "Out of date: the text changed after this suggestion was made, so it cannot be applied.",
+  "undo-pending": "Undoing\u2026",
+  undone: "Undone",
+  failed: "Could not apply: {message}",
+  announceApplied: "Change applied.",
+  announceStale: "A suggestion is out of date and was not applied.",
+  announceUndone: "Change undone."
+};
+class OddkinChangeReview extends OddkinElement.with({
+  proposals: prop.array({
+    description: "Proposal records (host-owned; e.g. from `DocumentSession`)."
+  }),
+  view: prop.enum(["inline", "split"], {
+    default: "inline",
+    reflect: !0,
+    description: "Inline diff or side-by-side before/after."
+  }),
+  granularity: prop.enum(["words", "lines"], {
+    default: "words",
+    description: "Diff by words (prose) or lines (code)."
+  }),
+  announce: prop.enum(["none", "important"], {
+    default: "none",
+    empty: "important",
+    description: "Announce outcomes (when no surrounding surface does)."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = {
+    "odd-change-accept": changeAcceptEvent,
+    "odd-change-reject": changeRejectEvent,
+    "odd-change-undo": changeUndoEvent,
+    "odd-announce": announceEvent
+  };
+  #diffs = /* @__PURE__ */ new WeakMap();
+  /** @internal */
+  get _strings() {
+    return strings(CHANGE_REVIEW_STRINGS, this.strings);
+  }
+  /** @internal Diff per proposal record (cached by record identity and granularity). */
+  _diff(proposal) {
+    const cached = this.#diffs.get(proposal);
+    if (cached?.granularity === this.granularity)
+      return cached.diff;
+    const diff = (this.granularity === "lines" ? diffLines : diffWords)(proposal.original, proposal.replacement);
+    return this.#diffs.set(proposal, { granularity: this.granularity, diff }), diff;
+  }
+  /** @internal */
+  _status(status, message) {
+    const t = this._strings;
+    return status === "failed" ? format(t.failed, { message: message ?? "" }) : t[status];
+  }
+  /** @internal */
+  _act = (event) => {
+    const el = event.currentTarget, proposalId = el.dataset.id, action = el.dataset.action, proposal = this.proposals.find((p) => p.proposalId === proposalId);
+    if (!proposal)
+      return;
+    action === "accept" && proposal.status === "proposed" && this.emit(changeAcceptEvent, { proposalId }), action === "reject" && (proposal.status === "proposed" || proposal.status === "stale") && this.emit(changeRejectEvent, { proposalId }), action === "undo" && proposal.status === "applied" && this.emit(changeUndoEvent, { proposalId });
+    const state = el.closest("li")?.querySelector(".state");
+    this.updateComplete.then(() => {
+      !el.isConnected && state?.isConnected && (state.tabIndex = -1, state.focus({ preventScroll: !0 }));
+    });
+  };
+  mounted(scope) {
+    scope.use(new FocusRecovery({
+      root: () => this.shadowRoot,
+      fallback: () => this.shadowRoot?.querySelector('[part="list"]')
+    }));
+    let previous = /* @__PURE__ */ new Map();
+    scope.effect(() => {
+      const next = new Map(this.proposals.map((p) => [p.proposalId, p.status]));
+      if (this.announce !== "none") {
+        const t = this._strings;
+        for (const [id, status] of next) {
+          const before = previous.get(id);
+          if (!before || before === status)
+            continue;
+          const text = status === "applied" ? t.announceApplied : status === "stale" ? t.announceStale : status === "undone" ? t.announceUndone : void 0;
+          text && this.emit(announceEvent, { text, priority: "polite", key: `change:${id}:${status}` });
+        }
+      }
+      previous = next;
+    }, { phase: "post", name: "<odd-change-review> status" });
+  }
+}
+export {
+  CHANGE_REVIEW_STRINGS,
+  OddkinChangeReview
+};

package/dist/prod/change-review/change-review.recipe.js

@@ -0,0 +1,13 @@
+import { autoGrid, defineLayoutRecipe, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const changeReviewRecipe = defineLayoutRecipe({
+  name: "change-review",
+  regions: {
+    list: stack({ gap: token("space.sm") }),
+    proposal: stack({ gap: token("space.xs") }),
+    split: autoGrid({ min: "14rem", fill: "auto-fit", gap: token("space.sm") })
+  }
+});
+export {
+  changeReviewRecipe
+};

package/dist/prod/change-review/change-review.recipe.styles.js

@@ -0,0 +1,24 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const changeReviewRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-sm);
+    min-inline-size: 0;
+  }
+  .proposal {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+    gap: var(--odd-space-sm);
+  }
+}
+`);
+export {
+  changeReviewRecipeStyles
+};

package/dist/prod/change-review/change-review.styles.js

@@ -0,0 +1,69 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { changeReviewRecipeStyles } from "./change-review.recipe.styles.js";
+const changeReviewStyles = css`
+  ${changeReviewRecipeStyles}
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .proposal {
+    padding: ${token("space.sm")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.default")};
+  }
+  .proposal[data-status='stale'],
+  .proposal[data-status='failed'] {
+    border-color: ${token("color.danger.foreground")};
+  }
+  p {
+    margin: 0;
+  }
+  .label {
+    font-weight: ${token("font.weight.semibold")};
+  }
+  /* Only the diff segments preserve whitespace; template whitespace around them collapses. */
+  .segments {
+    white-space: pre-wrap;
+  }
+  .code {
+    padding: ${token("space.xs")};
+    border-radius: ${token("radius.sm")};
+    background: ${token("color.surface.sunken")};
+    font-family: ${token("font.family.mono")};
+    font-size: ${token("font.size.sm")};
+    overflow-x: auto;
+  }
+  del {
+    background: ${token("color.danger.surface")};
+    color: ${token("color.danger.foreground")};
+  }
+  ins {
+    background: ${token("color.success.surface")};
+    color: ${token("color.success.foreground")};
+    text-decoration: underline;
+  }
+  .split > div {
+    min-inline-size: 0;
+  }
+  .state {
+    font-size: ${token("font.size.sm")};
+    color: ${token("color.text.secondary")};
+  }
+  .state:is([data-status='stale'], [data-status='failed']) {
+    color: ${token("color.danger.foreground")};
+  }
+  .state[data-status='applied'] {
+    color: ${token("color.success.foreground")};
+  }
+  @media (forced-colors: active) {
+    del {
+      text-decoration: line-through;
+    }
+  }
+`;
+export {
+  changeReviewStyles
+};

package/dist/prod/change-review/change-review.template.js

@@ -0,0 +1,72 @@
+import { html, repeat } from "@oddkin/core/template";
+const segments = (host, diff, show) => {
+  const t = host._strings;
+  return diff.map((s) => s.kind === "equal" ? s.text : s.kind === "delete" ? show === "after" ? null : html`<del
+              ><span class="visually-hidden">[${t.deleted}: </span>${s.text}<span
+                class="visually-hidden"
+                >]</span
+              ></del
+            >` : show === "before" ? null : html`<ins
+              ><span class="visually-hidden">[${t.inserted}: </span>${s.text}<span
+                class="visually-hidden"
+                >]</span
+              ></ins
+            >`);
+}, changeReviewTemplate = (host) => {
+  const t = host._strings, code = host.granularity === "lines", view = host.view;
+  return html`<div class="base" role="group" aria-label=${t.label}>
+    <p class="muted" ?hidden=${!!host.proposals.length}>${t.empty}</p>
+    <ol part="list" class="list" tabindex="-1">
+      ${repeat(host.proposals, (p) => p.proposalId, (p) => {
+    const diff = host._diff(p), status = host._status(p.status, p.error?.message);
+    return html`<li part="proposal" class="proposal" data-status=${p.status}>
+            <p class="label" ?hidden=${!p.label}>${p.label ?? ""}</p>
+            ${view === "split" ? html`<div part="diff" class="split">
+                    <div>
+                      <p class="muted">${t.before}</p>
+                      <div class=${code ? "text code" : "text"}>
+                        <span class="segments">${segments(host, diff, "before")}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <p class="muted">${t.after}</p>
+                      <div class=${code ? "text code" : "text"}>
+                        <span class="segments">${segments(host, diff, "after")}</span>
+                      </div>
+                    </div>
+                  </div>` : html`<div part="diff" class=${code ? "text code" : "text"}>
+                    <span class="segments">${segments(host, diff, "both")}</span>
+                  </div>`}
+            <p class="state" data-status=${p.status}>${status}</p>
+            <div class="actions">
+              ${p.status === "proposed" ? html`<odd-button
+                      size="sm"
+                      appearance="primary"
+                      data-id=${p.proposalId}
+                      data-action="accept"
+                      @click=${host._act}
+                      >${t.accept}</odd-button
+                    >` : null}
+              ${p.status === "proposed" || p.status === "stale" ? html`<odd-button
+                      size="sm"
+                      data-id=${p.proposalId}
+                      data-action="reject"
+                      @click=${host._act}
+                      >${t.reject}</odd-button
+                    >` : null}
+              ${p.status === "applied" ? html`<odd-button
+                      size="sm"
+                      data-id=${p.proposalId}
+                      data-action="undo"
+                      @click=${host._act}
+                      >${t.undo}</odd-button
+                    >` : null}
+            </div>
+          </li>`;
+  })}
+    </ol>
+  </div>`;
+};
+export {
+  changeReviewTemplate
+};

package/dist/prod/change-review/index.js

@@ -0,0 +1,11 @@
+import { OddkinChangeReview, CHANGE_REVIEW_STRINGS } from "./change-review.js";
+import { changeReviewTemplate } from "./change-review.template.js";
+import { changeReviewStyles } from "./change-review.styles.js";
+import { changeReviewDefinition } from "./change-review.definition.js";
+export {
+  CHANGE_REVIEW_STRINGS,
+  OddkinChangeReview,
+  changeReviewDefinition,
+  changeReviewStyles,
+  changeReviewTemplate
+};

package/dist/prod/checkpoint/checkpoint.define.js

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

package/dist/prod/checkpoint/checkpoint.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 { OddkinCheckpoint } from "./checkpoint.js";
+import { checkpointStyles } from "./checkpoint.styles.js";
+import { checkpointTemplate } from "./checkpoint.template.js";
+const checkpointDefinition = compose({
+  name: "odd-checkpoint",
+  element: OddkinCheckpoint,
+  template: checkpointTemplate,
+  styles: [aiBaseStyles, checkpointStyles],
+  dependencies: { button: buttonDefinition }
+});
+export {
+  checkpointDefinition
+};

package/dist/prod/checkpoint/checkpoint.js

@@ -0,0 +1,101 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { can, unavailableReason } from "../contracts/normalize.js";
+import { announceEvent, checkpointRestoreEvent } from "../events.js";
+import { FocusRecovery } from "@oddkin/core/controllers/focus";
+import { format, formatTime, langOf, strings } from "../internal/strings.js";
+const CHECKPOINT_STRINGS = {
+  restores: "Restoring replaces:",
+  restore: "Restore\u2026",
+  confirm: "Restore this checkpoint",
+  cancel: "Keep current state",
+  confirmText: "Restore to \u201C{label}\u201D? The items listed above are replaced. Work after this point is not kept unless the application saves it.",
+  available: "Available",
+  "restore-pending": "Restoring\u2026 Not restored yet.",
+  restored: "Restored. {outcome}",
+  "restore-failed": "Restore failed: {message}",
+  unavailable: "This checkpoint cannot be restored.",
+  created: "Created {time}",
+  announceRestored: "Checkpoint restored: {label}",
+  announceFailed: "Checkpoint restore failed: {label}"
+};
+class OddkinCheckpoint extends OddkinElement.with({
+  checkpoint: prop.object({ description: "The checkpoint record." }),
+  capabilities: prop.object({
+    description: "`restoreCheckpoint` enables restoring."
+  }),
+  announce: prop.enum(["none", "important"], {
+    default: "none",
+    empty: "important",
+    description: "Announce outcomes (when no surrounding surface does)."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = {
+    "odd-checkpoint-restore": checkpointRestoreEvent,
+    "odd-announce": announceEvent
+  };
+  /** @internal Confirmation step (presentation state). */
+  _confirming = signal(!1);
+  /** @internal Restore requested from this view for this checkpoint id. */
+  _requested = signal(void 0);
+  /** @internal */
+  get _strings() {
+    return strings(CHECKPOINT_STRINGS, this.strings);
+  }
+  /** @internal */
+  get _unavailable() {
+    const c = this.checkpoint;
+    if (!c || c.status === "unavailable")
+      return this._strings.unavailable;
+    if (!can(this.capabilities, "restoreCheckpoint"))
+      return unavailableReason(this.capabilities, "restoreCheckpoint") ?? this._strings.unavailable;
+  }
+  /** @internal */
+  _created() {
+    const time = formatTime(this.checkpoint?.createdAt, langOf(this));
+    return time ? format(this._strings.created, { time }) : void 0;
+  }
+  /** @internal */
+  _ask = () => {
+    this._unavailable === void 0 && (this._confirming.value = !0);
+  };
+  /** @internal */
+  _cancel = () => {
+    this._confirming.value = !1;
+  };
+  /** @internal */
+  _restore = () => {
+    const c = this.checkpoint;
+    !c || this._unavailable !== void 0 || this._requested.peek() === c.checkpointId || c.status !== "restore-pending" && (this._confirming.value = !1, this._requested.value = c.checkpointId, this.emit(checkpointRestoreEvent, { checkpointId: c.checkpointId }));
+  };
+  mounted(scope) {
+    scope.use(new FocusRecovery({
+      root: () => this.shadowRoot,
+      fallback: () => (this._confirming.peek() ? this.shadowRoot?.querySelector("[data-confirm]") : void 0) ?? this.shadowRoot?.querySelector(".state")
+    }));
+    let previous;
+    scope.effect(() => {
+      const c = this.checkpoint;
+      if (c) {
+        if (c.status !== "restore-pending" && c.status !== "available" && (this._requested.value = void 0), c.status === "available" && previous === "restore-pending" && (this._requested.value = void 0), this.announce !== "none" && previous && previous !== c.status && (c.status === "restored" || c.status === "restore-failed")) {
+          const t = this._strings;
+          this.emit(announceEvent, {
+            text: format(c.status === "restored" ? t.announceRestored : t.announceFailed, {
+              label: c.label
+            }),
+            priority: "polite",
+            key: `checkpoint:${c.checkpointId}:${c.status}:${Date.now()}`
+          });
+        }
+        previous = c.status;
+      }
+    }, { phase: "post", name: "<odd-checkpoint> status" });
+  }
+}
+export {
+  CHECKPOINT_STRINGS,
+  OddkinCheckpoint
+};

package/dist/prod/checkpoint/checkpoint.recipe.js

@@ -0,0 +1,12 @@
+import { defineLayoutRecipe, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const checkpointRecipe = defineLayoutRecipe({
+  name: "checkpoint",
+  regions: {
+    base: stack({ gap: token("space.xs") }),
+    confirm: stack({ gap: token("space.xs") })
+  }
+});
+export {
+  checkpointRecipe
+};

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

@@ -0,0 +1,19 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const checkpointRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .confirm {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  checkpointRecipeStyles
+};

package/dist/prod/checkpoint/checkpoint.styles.js

@@ -0,0 +1,40 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { checkpointRecipeStyles } from "./checkpoint.recipe.styles.js";
+const checkpointStyles = css`
+  ${checkpointRecipeStyles}
+  .base {
+    padding: ${token("space.sm")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.default")};
+  }
+  p {
+    margin: 0;
+  }
+  .label {
+    font-weight: ${token("font.weight.semibold")};
+  }
+  .restores {
+    margin: ${token("space.2xs")} 0 0;
+    padding-inline-start: ${token("space.lg")};
+    font-size: ${token("font.size.sm")};
+  }
+  .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")};
+  }
+  .confirm {
+    padding: ${token("space.xs")};
+    border-radius: ${token("radius.sm")};
+    background: ${token("color.surface.sunken")};
+  }
+`;
+export {
+  checkpointStyles
+};

package/dist/prod/checkpoint/checkpoint.template.js

@@ -0,0 +1,49 @@
+import { html } from "@oddkin/core/template";
+import { format } from "../internal/strings.js";
+const checkpointTemplate = (host) => {
+  const t = host._strings, c = host.checkpoint;
+  if (!c)
+    return html``;
+  const requested = host._requested.value === c.checkpointId, pending = c.status === "restore-pending" || requested && c.status === "available", confirming = host._confirming.value && !pending, status = pending ? t["restore-pending"] : c.status === "restored" ? format(t.restored, { outcome: c.outcome ?? "" }) : c.status === "restore-failed" ? format(t["restore-failed"], { message: c.error?.message ?? "" }) : c.status === "unavailable" ? t.unavailable : t.available, tone = c.status === "restored" ? "success" : c.status === "restore-failed" ? "danger" : pending ? "active" : "", unavailable = host._unavailable, created = host._created();
+  return html`<div
+    part="base"
+    class="base"
+    role="group"
+    aria-labelledby="label"
+    data-status=${c.status}
+  >
+    <p id="label" class="label">${c.label}</p>
+    <p class="muted" ?hidden=${!created}>${created ?? ""}</p>
+    <p class="description">${c.description}</p>
+    <div ?hidden=${!c.restores.length}>
+      <p class="muted">${t.restores}</p>
+      <ul part="restores" class="restores">
+        ${c.restores.map((item) => html`<li>${item}</li>`)}
+      </ul>
+    </div>
+    <p class="state" data-tone=${tone}>${status}</p>
+    <div part="actions" class="actions" ?hidden=${confirming || pending}>
+      <odd-button
+        size="sm"
+        ?disabled=${unavailable !== void 0 || c.status === "unavailable"}
+        @click=${host._ask}
+        >${t.restore}</odd-button
+      >
+      <span class="muted" ?hidden=${!unavailable || c.status === "unavailable"}
+        >${unavailable ?? ""}</span
+      >
+    </div>
+    <div class="confirm" role="group" aria-labelledby="confirm-text" ?hidden=${!confirming}>
+      <p id="confirm-text">${format(t.confirmText, { label: c.label })}</p>
+      <div class="actions">
+        <odd-button data-confirm size="sm" appearance="primary" @click=${host._restore}
+          >${t.confirm}</odd-button
+        >
+        <odd-button size="sm" appearance="ghost" @click=${host._cancel}>${t.cancel}</odd-button>
+      </div>
+    </div>
+  </div>`;
+};
+export {
+  checkpointTemplate
+};

package/dist/prod/checkpoint/index.js

@@ -0,0 +1,11 @@
+import { OddkinCheckpoint, CHECKPOINT_STRINGS } from "./checkpoint.js";
+import { checkpointTemplate } from "./checkpoint.template.js";
+import { checkpointStyles } from "./checkpoint.styles.js";
+import { checkpointDefinition } from "./checkpoint.definition.js";
+export {
+  CHECKPOINT_STRINGS,
+  OddkinCheckpoint,
+  checkpointDefinition,
+  checkpointStyles,
+  checkpointTemplate
+};

package/dist/prod/citation/citation.define.js

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