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

package/dist/prod/highlight/index.js

@@ -0,0 +1,99 @@
+const words = (list) => new Set(list.split(" ")), C_LIKE = { lineComment: "//", blockComment: ["/*", "*/"], strings: "\"'`" }, GRAMMARS = {
+  js: {
+    ...C_LIKE,
+    keywords: words("async await break case catch class const continue default delete do else export extends false finally for from function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while yield")
+  },
+  ts: {
+    ...C_LIKE,
+    keywords: words("abstract as async await break case catch class const continue declare default delete do else enum export extends false finally for from function if implements import in instanceof interface keyof let new null of private protected public readonly return satisfies static super switch this throw true try type typeof undefined var void while yield")
+  },
+  json: { strings: '"', keywords: words("true false null") },
+  css: {
+    blockComment: ["/*", "*/"],
+    strings: `"'`,
+    keywords: words("important inherit initial unset revert")
+  },
+  py: {
+    lineComment: "#",
+    strings: `"'`,
+    keywords: words("and as assert async await break class continue def del elif else except False finally for from global if import in is lambda None nonlocal not or pass raise return True try while with yield")
+  },
+  sh: {
+    lineComment: "#",
+    strings: `"'`,
+    keywords: words("if then else elif fi for while do done case esac function in export local return")
+  },
+  html: { blockComment: ["<!--", "-->"], strings: `"'`, keywords: /* @__PURE__ */ new Set() }
+}, ALIASES = {
+  javascript: "js",
+  mjs: "js",
+  jsx: "js",
+  typescript: "ts",
+  tsx: "ts",
+  python: "py",
+  bash: "sh",
+  shell: "sh",
+  zsh: "sh",
+  xml: "html",
+  svg: "html",
+  jsonc: "json",
+  scss: "css"
+}, highlightLanguages = [
+  ...Object.keys(GRAMMARS),
+  ...Object.keys(ALIASES)
+];
+function highlight(code, language) {
+  const key = language.toLowerCase(), grammar = GRAMMARS[ALIASES[key] ?? key];
+  if (!grammar)
+    return;
+  const tokens = [];
+  let plain = "";
+  const push = (text, kind) => {
+    if (!kind) {
+      plain += text;
+      return;
+    }
+    plain && tokens.push({ text: plain }), plain = "", tokens.push({ text, kind });
+  };
+  let i = 0;
+  for (; i < code.length; ) {
+    const rest = code.slice(i);
+    if (grammar.lineComment && rest.startsWith(grammar.lineComment)) {
+      const end = code.indexOf(`
+`, i), text = end === -1 ? rest : code.slice(i, end);
+      push(text, "comment"), i += text.length;
+      continue;
+    }
+    if (grammar.blockComment && rest.startsWith(grammar.blockComment[0])) {
+      const end = code.indexOf(grammar.blockComment[1], i + grammar.blockComment[0].length), text = end === -1 ? rest : code.slice(i, end + grammar.blockComment[1].length);
+      push(text, "comment"), i += text.length;
+      continue;
+    }
+    const ch = code[i];
+    if (grammar.strings.includes(ch)) {
+      let k = i + 1;
+      for (; k < code.length && code[k] !== ch && (code[k] === "\\" && k++, !(code[k] === `
+` && ch !== "`")); )
+        k++;
+      const text = code.slice(i, Math.min(k + 1, code.length));
+      push(text, "string"), i += text.length;
+      continue;
+    }
+    const number = /^\d[\d_.]*(?:e[+-]?\d+)?/i.exec(rest);
+    if (number && !/[\w$]/.test(code[i - 1] ?? "")) {
+      push(number[0], "number"), i += number[0].length;
+      continue;
+    }
+    const word = /^[A-Za-z_$][\w$]*/.exec(rest);
+    if (word) {
+      push(word[0], grammar.keywords.has(word[0]) ? "keyword" : void 0), i += word[0].length;
+      continue;
+    }
+    push(ch), i++;
+  }
+  return plain && tokens.push({ text: plain }), tokens;
+}
+export {
+  highlight,
+  highlightLanguages
+};

package/dist/prod/index.js

@@ -0,0 +1 @@
+export * from "./contracts/index.js";

package/dist/prod/inline-assist/index.js

@@ -0,0 +1,11 @@
+import { OddkinInlineAssist, INLINE_ASSIST_STRINGS } from "./inline-assist.js";
+import { inlineAssistTemplate } from "./inline-assist.template.js";
+import { inlineAssistStyles } from "./inline-assist.styles.js";
+import { inlineAssistDefinition } from "./inline-assist.definition.js";
+export {
+  INLINE_ASSIST_STRINGS,
+  OddkinInlineAssist,
+  inlineAssistDefinition,
+  inlineAssistStyles,
+  inlineAssistTemplate
+};

package/dist/prod/inline-assist/inline-assist.define.js

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

package/dist/prod/inline-assist/inline-assist.definition.js

@@ -0,0 +1,14 @@
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinInlineAssist } from "./inline-assist.js";
+import { inlineAssistStyles } from "./inline-assist.styles.js";
+import { inlineAssistTemplate } from "./inline-assist.template.js";
+const inlineAssistDefinition = compose({
+  name: "odd-inline-assist",
+  element: OddkinInlineAssist,
+  template: inlineAssistTemplate,
+  styles: [aiBaseStyles, inlineAssistStyles]
+});
+export {
+  inlineAssistDefinition
+};

package/dist/prod/inline-assist/inline-assist.js

@@ -0,0 +1,130 @@
+import { RovingFocus } from "@oddkin/core/controllers/focus";
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { assistRequestEvent } from "../events.js";
+import { format, strings } from "../internal/strings.js";
+import { MarkdownView } from "../markdown/render.js";
+const INLINE_ASSIST_STRINGS = {
+  label: "Assist with the selection",
+  rewrite: "Rewrite",
+  explain: "Explain",
+  summarize: "Summarize",
+  translate: "Translate",
+  expand: "Expand",
+  language: "Translate to",
+  noSelection: "Select text to get help with it.",
+  stale: "The text changed after you selected it. Select it again.",
+  pending: "Working on \u201C{action}\u201D\u2026",
+  failed: "Assistance failed: {message}",
+  selected: "{count} characters selected"
+};
+class OddkinInlineAssist extends OddkinElement.with({
+  selection: prop.object({
+    description: "Captured selection with its content revision."
+  }),
+  documentRevision: prop.string({
+    default: "",
+    attribute: "document-revision",
+    description: "Current content revision; a different selection revision is stale."
+  }),
+  actions: prop.array({
+    description: "Actions to offer; defaults to the five built-ins."
+  }),
+  languages: prop.array({
+    description: "Target languages for translate (`id` = BCP 47 tag)."
+  }),
+  status: prop.enum(["idle", "pending", "complete", "failed"], {
+    default: "idle",
+    reflect: !0,
+    description: "Host-reported request state."
+  }),
+  pendingAction: prop.string({
+    default: "",
+    attribute: "pending-action",
+    description: "Action in progress."
+  }),
+  result: prop.string({
+    default: "",
+    attribute: !1,
+    description: "Explanation or summary text (Markdown)."
+  }),
+  error: prop.object({ description: "Shown when `status` is failed." }),
+  markdown: prop.object({ description: "Options for rendering `result`." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = { "odd-assist-request": assistRequestEvent };
+  /** @internal Roving tab stop (presentation state). */
+  _active = signal(0);
+  /** @internal */
+  _language = signal("");
+  /** @internal */
+  get _strings() {
+    return strings(INLINE_ASSIST_STRINGS, this.strings);
+  }
+  /** @internal */
+  get _actions() {
+    if (this.actions.length)
+      return this.actions;
+    const t = this._strings;
+    return ["rewrite", "explain", "summarize", "translate", "expand"].map((id) => ({
+      id,
+      label: t[id]
+    }));
+  }
+  /** @internal Why actions are unavailable. */
+  get _blocked() {
+    const t = this._strings;
+    if (!this.selection)
+      return t.noSelection;
+    if (this.documentRevision && this.selection.revision !== this.documentRevision)
+      return t.stale;
+  }
+  /** @internal */
+  _request = (event) => {
+    const action = event.currentTarget.dataset.action, selection = this.selection;
+    if (!selection || this._blocked || this.status === "pending")
+      return;
+    const language = this._language.peek() || this.languages[0]?.id;
+    this.emit(assistRequestEvent, {
+      action,
+      selection,
+      options: action === "translate" && language ? { language } : {}
+    });
+  };
+  /** @internal */
+  _onLanguage = (event) => {
+    this._language.value = event.target.value;
+  };
+  /** @internal */
+  _pendingText() {
+    const label = this._actions.find((a) => a.id === this.pendingAction)?.label ?? this.pendingAction;
+    return format(this._strings.pending, { action: label });
+  }
+  mounted(scope) {
+    const toolbar = this.shadowRoot?.querySelector('[part="toolbar"]');
+    scope.use(new RovingFocus({
+      target: () => toolbar,
+      items: () => [...toolbar?.querySelectorAll("button") ?? []],
+      orientation: "both",
+      skip: () => !1,
+      onActiveChange: (index) => this._active.value = index
+    }));
+    const result = this.shadowRoot?.querySelector('[part="result"] .content');
+    if (!result)
+      return;
+    const view = new MarkdownView(result, this.markdown ?? {});
+    scope.add(() => view.dispose(), "markdown view"), scope.effect(() => {
+      const options = this.markdown;
+      view.configure(this.markdown ?? {});
+    }, { phase: "post", name: "<odd-inline-assist> options" }), scope.effect(() => view.update(this.result, this.status === "pending"), {
+      phase: "post",
+      name: "<odd-inline-assist> result"
+    });
+  }
+}
+export {
+  INLINE_ASSIST_STRINGS,
+  OddkinInlineAssist
+};

package/dist/prod/inline-assist/inline-assist.recipe.js

@@ -0,0 +1,13 @@
+import { defineLayoutRecipe, row, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const inlineAssistRecipe = defineLayoutRecipe({
+  name: "inline-assist",
+  regions: {
+    base: stack({ gap: token("space.xs") }),
+    toolbar: row({ gap: token("space.2xs"), align: "stretch", wrap: !0 }),
+    language: row({ gap: token("space.xs"), wrap: !0 })
+  }
+});
+export {
+  inlineAssistRecipe
+};

package/dist/prod/inline-assist/inline-assist.recipe.styles.js

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

package/dist/prod/inline-assist/inline-assist.styles.js

@@ -0,0 +1,48 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { inlineAssistRecipeStyles } from "./inline-assist.recipe.styles.js";
+const inlineAssistStyles = css`
+  ${inlineAssistRecipeStyles}
+  .toolbar {
+    padding: ${token("space.2xs")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.raised")};
+  }
+  .toolbar [aria-disabled='true'] {
+    color: ${token("color.text.disabled")};
+    cursor: not-allowed;
+  }
+  select {
+    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;
+  }
+  p {
+    margin: 0;
+  }
+  .message {
+    font-size: ${token("font.size.sm")};
+    color: ${token("color.text.secondary")};
+  }
+  .message:is([data-status='failed'], [data-status='blocked']) {
+    color: ${token("color.danger.foreground")};
+  }
+  .result {
+    padding: ${token("space.sm")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.sunken")};
+  }
+  .content > :first-child {
+    margin-block-start: 0;
+  }
+  .content > :last-child {
+    margin-block-end: 0;
+  }
+`;
+export {
+  inlineAssistStyles
+};

package/dist/prod/inline-assist/inline-assist.template.js

@@ -0,0 +1,46 @@
+import { html } from "@oddkin/core/template";
+import { format } from "../internal/strings.js";
+const inlineAssistTemplate = (host) => {
+  const t = host._strings, blocked = host._blocked, pending = host.status === "pending", active = Math.min(host._active.value, host._actions.length - 1), message = blocked ?? (pending ? host._pendingText() : host.status === "failed" ? format(t.failed, { message: host.error?.message ?? "" }) : ""), selection = host.selection;
+  return html`<div class="base" part="base">
+    <div
+      part="toolbar"
+      class="toolbar"
+      role="toolbar"
+      aria-label=${t.label}
+      aria-describedby="message"
+    >
+      ${host._actions.map((action, i) => html`<button
+            class="text-button"
+            type="button"
+            tabindex=${i === active ? "0" : "-1"}
+            data-action=${action.id}
+            aria-disabled=${blocked || pending ? "true" : null}
+            @click=${host._request}
+          >
+            ${action.label}
+          </button>`)}
+    </div>
+    ${host.languages.length ? html`<label class="language"
+            ><span class="muted">${t.language}</span>
+            <select @change=${host._onLanguage}>
+              ${host.languages.map((l) => html`<option .value=${l.id} ?selected=${l.id === host._language.value}>${l.label}</option>`)}
+            </select></label
+          >` : null}
+    <p
+      id="message"
+      class="message"
+      data-status=${blocked ? "blocked" : host.status}
+      ?hidden=${!message}
+    >
+      ${message}
+    </p>
+    <p class="muted" ?hidden=${!selection || !!blocked}>
+      ${selection ? format(t.selected, { count: selection.end - selection.start }) : ""}
+    </p>
+    <div part="result" class="result" ?hidden=${!host.result}><div class="content"></div></div>
+  </div>`;
+};
+export {
+  inlineAssistTemplate
+};

package/dist/prod/internal/ai-element.recipe.js

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

package/dist/prod/internal/ai-element.recipe.styles.js

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

package/dist/prod/internal/base.styles.js

@@ -0,0 +1,94 @@
+import { focusRingStyles, hostStyles, toneStyles, visuallyHiddenStyles } from "@oddkin/components/styles";
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { aiElementRecipeStyles } from "./ai-element.recipe.styles.js";
+const aiElementStyles = css`
+  ${aiElementRecipeStyles}
+  :host {
+    display: block;
+    min-inline-size: 0;
+    color: ${token("color.text.primary")};
+    font-family: ${token("font.family.sans")};
+    font-size: ${token("font.size.md")};
+    line-height: ${token("line-height.normal")};
+    overflow-wrap: anywhere;
+  }
+  .muted {
+    color: ${token("color.text.secondary")};
+    font-size: ${token("font.size.sm")};
+  }
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: ${token("space.2xs")};
+    padding-block: 0.125rem;
+    padding-inline: ${token("space.xs")};
+    border: ${token("border.width.default")} solid var(--_tone-border);
+    border-radius: ${token("radius.full")};
+    font-size: ${token("font.size.xs")};
+    font-weight: ${token("font.weight.medium")};
+    color: var(--_tone-foreground);
+    white-space: nowrap;
+  }
+  .status:is(
+    [data-tone='info'],
+    [data-tone='success'],
+    [data-tone='warning'],
+    [data-tone='danger']
+  ) {
+    border-color: currentColor;
+    background: var(--_tone-surface);
+  }
+  .status[data-tone='active'] {
+    border-color: ${token("color.border.strong")};
+    color: ${token("color.text.primary")};
+  }
+  .error {
+    color: ${token("color.danger.foreground")};
+    font-size: ${token("font.size.sm")};
+  }
+  .text-button {
+    min-block-size: ${token("target.min")};
+    min-inline-size: ${token("target.min")};
+    padding-inline: ${token("space.xs")};
+    border: ${token("border.width.default")} solid transparent;
+    border-radius: ${token("control.radius")};
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: ${token("font.size.sm")};
+    cursor: pointer;
+  }
+  .text-button[aria-pressed='true'] {
+    border-color: ${token("color.selection.background")};
+    background: ${token("color.selection.background")};
+    color: ${token("color.selection.foreground")};
+  }
+  .text-button:disabled {
+    color: ${token("color.text.disabled")};
+    cursor: not-allowed;
+  }
+  @media (hover: hover) {
+    .text-button:not(:disabled, [aria-pressed='true']):hover {
+      background: ${token("color.surface.hover")};
+    }
+  }
+  @media (forced-colors: active) {
+    .status {
+      border-color: CanvasText;
+    }
+    .text-button {
+      border-color: ButtonText;
+    }
+  }
+`, aiBaseStyles = [
+  hostStyles,
+  visuallyHiddenStyles,
+  focusRingStyles,
+  toneStyles,
+  aiElementStyles
+];
+export {
+  aiBaseStyles,
+  aiElementStyles
+};

package/dist/prod/internal/dev.js

@@ -0,0 +1,4 @@
+const DEV = !1;
+export {
+  DEV
+};

package/dist/prod/internal/ids.js

@@ -0,0 +1,8 @@
+let counter = 0;
+function createId(prefix = "id") {
+  const random = globalThis.crypto?.randomUUID?.();
+  return random ? `${prefix}-${random}` : `${prefix}-${Date.now().toString(36)}-${(++counter).toString(36)}`;
+}
+export {
+  createId
+};

package/dist/prod/internal/strings.js

@@ -0,0 +1,12 @@
+import { formatDate } from "@oddkin/core/i18n";
+import { format, formatNumber, langOf, strings } from "@oddkin/core/i18n";
+function formatTime(iso, locale) {
+  return formatDate(iso, locale);
+}
+export {
+  format,
+  formatNumber,
+  formatTime,
+  langOf,
+  strings
+};

package/dist/prod/markdown/index.js

@@ -0,0 +1,13 @@
+import { parseBlocks, parseInline, splitBlocks } from "./parse.js";
+import { MarkdownView, toPlainText } from "./render.js";
+import { DEFAULT_URL_POLICY, displayHost, safeUrl } from "./url.js";
+export {
+  DEFAULT_URL_POLICY,
+  MarkdownView,
+  displayHost,
+  parseBlocks,
+  parseInline,
+  safeUrl,
+  splitBlocks,
+  toPlainText
+};