@g9tm/aiassistant-svelte 0.0.0-stage → 1.1.0

package/README.md

@@ -1,3 +1,30 @@
-# Temporary Holding Version
+# @g9tm/aiassistant-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte 5 components for the G9 AI assistant, drawn from the headless client `@g9tm/aiassistant`. Every part can be
+restyled or replaced without forking.
+
+- Surfaces: the panel in six layouts (side, sheet, fullscreen, inline, card, compact, or `auto` by width), the chat,
+  and the person's pages (history, abilities, knowledge, learned items, findings, routines, actions).
+- Parts and cards: messages, the composer, the work card, blocks and charts, approval cards with a PIN pad, secret
+  fields and dialogs.
+- Five layers of customising: theme tokens (light and dark), per-part classes and styles, an `unstyled` switch that
+  keeps structure and classes only, a replaced component by name, and panels built from parts alone.
+- `browserHost()`: a ready host for a plain browser app (fetch with the host's headers, `EventSource`, clipboard,
+  files, recording for dictation).
+- `@g9tm/aiassistant-svelte/admin`: the manager's page, as a separate entry so people who never open it never load it.
+
+```svelte
+<script lang="ts">
+  import { createAssistant } from "@g9tm/aiassistant";
+  import { AssistantRoot, AssistantPanel, browserHost } from "@g9tm/aiassistant-svelte";
+
+  const assistant = createAssistant(browserHost({ locale: "en", headers: () => ({ Authorization: "Bearer " + token() }) }));
+  let open = $state(true);
+</script>
+
+<AssistantRoot {assistant}>
+  <AssistantPanel bind:open layout="auto" />
+</AssistantRoot>
+```
+
+Part of the G9 AI assistant library. Documentation: see the guides that ship with the library.

package/dist/AssistantRoot.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  // The root of one assistant: shares the core, texts, part styles, overrides and theme with every component inside.
+  // All the library's styling is here, under .g9a-styled, from theme tokens; unstyled leaves structure and classes only.
+  import type { Snippet } from "svelte";
+  import type { Assistant, PartStyles } from "@g9tm/aiassistant";
+  import { provideUi, type Overrides } from "./context.js";
+  import { themeVars } from "./theme.js";
+
+  let { assistant, styles = {}, unstyled = false, components = {}, children }: {
+    assistant: Assistant; styles?: PartStyles; unstyled?: boolean; components?: Overrides; children: Snippet;
+  } = $props();
+
+  // Getters, not copies: a host that switches unstyled, styles or a replaced component sees it at once.
+  provideUi({
+    get assistant() { return assistant; },
+    get texts() { return assistant.texts; },
+    get styles() { return styles; },
+    get unstyled() { return unstyled; },
+    get components() { return components; },
+    get layer() { return (assistant.host.sheetLayer ?? 1000) + 1; },
+  });
+  const vars = $derived(unstyled ? "" : themeVars(assistant.host.theme));
+</script>
+
+<div class={unstyled ? "g9a-root" : "g9a-root g9a-styled"} dir={assistant.host.dir} lang={assistant.host.locale} style={vars}>
+  {@render children()}
+</div>
+
+<style>
+  .g9a-root { display: contents; }
+  .g9a-styled { font-family: var(--g9a-font); font-size: var(--g9a-font-size); color: var(--g9a-ink); line-height: 1.6; }
+  .g9a-styled :global(button) { font: inherit; cursor: pointer; min-block-size: 38px; padding: 0 12px; border-radius: var(--g9a-radius-s); border: 1px solid var(--g9a-line); background: var(--g9a-surface); color: var(--g9a-ink); }
+  .g9a-styled :global(input), .g9a-styled :global(textarea) { font: inherit; padding: 8px 10px; border: 1px solid var(--g9a-line); border-radius: var(--g9a-radius-s); background: var(--g9a-surface); color: var(--g9a-ink); }
+  .g9a-styled :global(.g9a-panel) { box-sizing: border-box; display: flex; flex-direction: column; background: var(--g9a-surface); color: var(--g9a-ink); box-shadow: var(--g9a-shadow); overflow: hidden; }
+  .g9a-styled :global(.g9a-panel[data-layout="side"]) { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(420px, 100%); border-inline-start: 1px solid var(--g9a-line); }
+  .g9a-styled :global(.g9a-panel[data-layout="sheet"]) { position: fixed; inset-inline: 0; inset-block-end: 0; block-size: 85vh; border-start-start-radius: 16px; border-start-end-radius: 16px; }
+  .g9a-styled :global(.g9a-panel[data-layout="fullscreen"]) { position: fixed; inset: 0; }
+  .g9a-styled :global(.g9a-panel[data-layout="inline"]) { inline-size: 100%; block-size: 100%; box-shadow: none; border: 1px solid var(--g9a-line); border-radius: var(--g9a-radius); }
+  .g9a-styled :global(.g9a-panel[data-layout="card"]) { border-radius: var(--g9a-radius); border: 1px solid var(--g9a-line); max-block-size: 520px; }
+  .g9a-styled :global(.g9a-panel[data-layout="compact"]) { box-shadow: none; }
+  .g9a-styled :global(.g9a-panel__header) { display: flex; align-items: center; gap: var(--g9a-gap); padding: var(--g9a-pad); border-bottom: 1px solid var(--g9a-line); }
+  .g9a-styled :global(.g9a-panel__header > strong) { flex: 1; min-inline-size: 0; }
+  .g9a-styled :global(.g9a-panel__body), .g9a-styled :global(.g9a-chat) { display: flex; flex-direction: column; flex: 1; min-block-size: 0; }
+  .g9a-styled :global(.g9a-messages) { flex: 1; overflow-y: auto; padding: var(--g9a-pad); display: flex; flex-direction: column; gap: var(--g9a-gap); }
+  .g9a-styled :global(.g9a-message) { max-inline-size: 88%; padding: 8px 12px; border-radius: var(--g9a-radius); background: var(--g9a-surface-2); }
+  .g9a-styled :global(.g9a-message__user) { align-self: flex-start; background: color-mix(in srgb, var(--g9a-accent) 12%, var(--g9a-surface)); }
+  .g9a-styled :global(.g9a-message__assistant) { align-self: flex-end; }
+  .g9a-styled :global(.g9a-message[data-pending="true"]) { opacity: .7; }
+  .g9a-styled :global(.g9a-message__feedback) { display: flex; gap: 6px; align-items: center; margin-block-start: 4px; }
+  .g9a-styled :global(.g9a-message__feedback button) { min-block-size: 26px; font-size: 12px; padding: 0 8px; }
+  .g9a-styled :global(.g9a-message__provenance) { font-size: 11px; color: var(--g9a-muted); }
+  .g9a-styled :global(.g9a-p) { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
+  .g9a-styled :global(code) { font-family: ui-monospace, monospace; background: var(--g9a-surface); border-radius: 4px; padding: 0 4px; }
+  .g9a-styled :global(a) { color: var(--g9a-accent); }
+  .g9a-styled :global(.g9a-work) { display: flex; gap: var(--g9a-gap); align-items: flex-start; padding: var(--g9a-pad); border-top: 1px solid var(--g9a-line); }
+  .g9a-styled :global(.g9a-work-main) { flex: 1; min-inline-size: 0; }
+  .g9a-styled :global(.g9a-work-head) { display: flex; justify-content: space-between; gap: var(--g9a-gap); }
+  .g9a-styled :global(.g9a-work__elapsed), .g9a-styled :global(.g9a-work__tool), .g9a-styled :global(.g9a-note) { color: var(--g9a-muted); font-size: 12px; }
+  .g9a-styled :global(.g9a-stages), .g9a-styled :global(.g9a-stages-thinking) { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px; }
+  .g9a-styled :global(.g9a-work__stage), .g9a-styled :global(.g9a-stages-thinking > span) { padding: 1px 10px; border-radius: 999px; border: 1px solid var(--g9a-line); font-size: 12px; color: var(--g9a-muted); }
+  .g9a-styled :global([data-state="on"].g9a-work__stage), .g9a-styled :global(.g9a-stages-thinking > [data-state="on"]) { background: color-mix(in srgb, var(--g9a-accent) 20%, transparent); color: var(--g9a-ink); border-color: var(--g9a-accent); }
+  .g9a-styled :global(.g9a-thinking-orb) { inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--g9a-accent); animation: g9a-pulse 1.2s ease-in-out infinite; flex: none; margin-block-start: 4px; }
+  .g9a-styled :global(.g9a-thinking-orb[data-still="true"]) { animation: none; }
+  @keyframes -global-g9a-pulse { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }
+  @media (prefers-reduced-motion: reduce) { .g9a-styled :global(.g9a-thinking-orb) { animation: none; } }
+  .g9a-styled :global(.g9a-composer) { padding: var(--g9a-pad); border-top: 1px solid var(--g9a-line); }
+  .g9a-styled :global(.g9a-composer-row) { display: flex; gap: var(--g9a-gap); align-items: flex-end; }
+  .g9a-styled :global(.g9a-composer__input) { flex: 1; min-inline-size: 0; resize: none; max-block-size: 30vh; }
+  .g9a-styled :global(.g9a-composer__send) { background: var(--g9a-accent); color: var(--g9a-accent-ink); border-color: var(--g9a-accent); }
+  .g9a-styled :global(.g9a-file-chips) { display: flex; flex-wrap: wrap; gap: 4px; margin-block-end: 6px; }
+  .g9a-styled :global(.g9a-file-chip) { background: var(--g9a-surface-2); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; }
+  .g9a-styled :global(.g9a-file-chip button) { min-block-size: 20px; border: 0; background: none; padding: 0 6px; }
+  .g9a-styled :global(.g9a-card__approval) { border: 1px solid var(--g9a-approval-card-border); border-radius: var(--g9a-radius); padding: var(--g9a-pad); background: var(--g9a-surface); }
+  .g9a-styled :global(.g9a-card__approval h3) { margin: 0 0 6px; font-size: 15px; }
+  .g9a-styled :global(.g9a-card__approval__fact) { font-size: 12px; color: var(--g9a-muted); padding-inline-start: 24px; }
+  .g9a-styled :global(.g9a-card__approval__confirm) { background: var(--g9a-accent); color: var(--g9a-accent-ink); border-color: var(--g9a-accent); }
+  .g9a-styled :global(.g9a-warning) { color: var(--g9a-warn); font-size: 13px; }
+  .g9a-styled :global(.g9a-irreversible) { color: var(--g9a-danger); font-size: 12px; }
+  .g9a-styled :global(.g9a-row) { display: flex; gap: var(--g9a-gap); margin-block-start: 8px; }
+  .g9a-styled :global(.g9a-mode-banner) { background: var(--g9a-surface-2); border-bottom: 1px solid var(--g9a-line); color: var(--g9a-warn); padding: 6px var(--g9a-pad); font-size: 13px; }
+  .g9a-styled :global(.g9a-usage-chip) { display: inline-block; block-size: 22px; line-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px;
+    background: linear-gradient(to left, var(--g9a-surface-2) calc(100% - var(--g9a-usage)), color-mix(in srgb, var(--g9a-accent) 25%, transparent) 0); }
+  .g9a-styled :global(.g9a-tabs) { display: flex; gap: 4px; border-bottom: 1px solid var(--g9a-line); margin-block-end: 8px; }
+  .g9a-styled :global(.g9a-tabs [aria-selected="true"]) { border-bottom: 2px solid var(--g9a-accent); }
+  .g9a-styled :global(.g9a-admin-capability) { border: 1px solid var(--g9a-line); border-radius: 8px; padding: 8px; margin-block-end: 8px; display: grid; gap: 4px; }
+  .g9a-styled :global(.g9a-admin-capability label) { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
+  .g9a-styled :global([data-bad="true"]), .g9a-styled :global([data-ok="false"]) { color: var(--g9a-danger); }
+  .g9a-styled :global(.g9a-block-title) { font-weight: 600; margin-block: 4px; }
+  .g9a-styled :global(.g9a-block__table table) { border-collapse: collapse; inline-size: 100%; font-size: 13px; }
+  .g9a-styled :global(.g9a-block__table th), .g9a-styled :global(.g9a-block__table td) { border-bottom: 1px solid var(--g9a-line); padding: 4px 6px; text-align: start; }
+  .g9a-styled :global([data-kind="number"]), .g9a-styled :global([data-kind="money"]), .g9a-styled :global([data-kind="percent"]) { text-align: end; font-variant-numeric: tabular-nums; }
+  .g9a-styled :global(.g9a-block__table__card) { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 6px; padding: 6px 8px; background: var(--g9a-surface); border-radius: var(--g9a-radius-s); }
+  .g9a-styled :global(.g9a-block__table__card dt) { color: var(--g9a-muted); }
+  .g9a-styled :global(.g9a-block__table__card dd) { margin: 0; }
+  .g9a-styled :global(.g9a-block__chart__bar) { display: grid; grid-template-columns: 1fr; gap: 2px; margin-block-end: 6px; }
+  .g9a-styled :global(.g9a-bar-track) { display: block; block-size: 10px; background: var(--g9a-surface); border-radius: 5px; overflow: hidden; }
+  .g9a-styled :global(.g9a-bar-fill) { display: block; block-size: 100%; background: var(--g9a-chart-bar); border-radius: 5px; }
+  .g9a-styled :global(.g9a-bar-value) { font-size: 12px; color: var(--g9a-muted); }
+  .g9a-styled :global(.g9a-block__chart__line) { inline-size: 100%; block-size: 140px; }
+  .g9a-styled :global(.g9a-block__chart__line path) { stroke: var(--g9a-chart-bar); stroke-width: 2; }
+  .g9a-styled :global(.g9a-donut) { inline-size: 120px; }
+  .g9a-styled :global(.g9a-donut path) { fill: none; stroke: var(--g9a-chart-bar); stroke-width: 14; }
+  .g9a-styled :global(.g9a-block__kpi) { display: flex; flex-wrap: wrap; gap: var(--g9a-gap); }
+  .g9a-styled :global(.g9a-block__kpi > div) { display: flex; flex-direction: column; padding: 6px 10px; background: var(--g9a-surface); border-radius: var(--g9a-radius-s); }
+  .g9a-styled :global(.g9a-block__actions) { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
+  .g9a-styled :global(.g9a-block__action) { background: color-mix(in srgb, var(--g9a-accent) 12%, var(--g9a-surface)); border-color: var(--g9a-accent); }
+  .g9a-styled :global(.g9a-block__action::after) { content: " ‹"; }
+  .g9a-styled :global([dir="ltr"] .g9a-block__action::after) { content: " ›"; }
+  .g9a-styled :global(.g9a-suggested) { font-size: 10px; color: var(--g9a-muted); margin-inline-start: 6px; }
+  .g9a-styled :global(.g9a-block__callout) { border-inline-start: 3px solid var(--g9a-accent); padding: 6px 10px; background: var(--g9a-surface); }
+  .g9a-styled :global(.g9a-block__callout[data-tone="danger"]) { border-color: var(--g9a-danger); }
+  .g9a-styled :global(.g9a-block__callout[data-tone="warn"]) { border-color: var(--g9a-warn); }
+  .g9a-styled :global(.g9a-block__image img) { max-inline-size: 100%; border-radius: var(--g9a-radius-s); }
+  .g9a-styled :global(.g9a-dialog) { position: fixed; inset: 10% 8%; background: var(--g9a-surface); border-radius: var(--g9a-radius); box-shadow: var(--g9a-shadow); padding: var(--g9a-pad); overflow: auto; }
+  .g9a-styled :global(.g9a-hero) { padding: var(--g9a-pad); border: 1px solid var(--g9a-line); border-radius: var(--g9a-radius); background: var(--g9a-surface); }
+  .g9a-styled :global(.g9a-badge) { margin-inline-start: 6px; background: var(--g9a-danger); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
+  .g9a-styled :global(.g9a-measure) { inline-size: 100%; block-size: 0; }
+  .g9a-styled :global(.g9a-count) { font-size: 11px; color: var(--g9a-muted); margin-inline-start: 4px; }
+  .g9a-styled :global(.g9a-history__list), .g9a-styled :global(.g9a-routines__list), .g9a-styled :global(.g9a-picker__list) { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+  .g9a-styled :global(.g9a-history__row) { display: flex; gap: 4px; align-items: center; }
+  .g9a-styled :global(.g9a-history__open) { flex: 1; min-inline-size: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .g9a-styled :global(.g9a-history__row[data-waiting="true"] .g9a-history__open) { border-color: var(--g9a-warn); }
+  .g9a-styled :global(.g9a-history__delete), .g9a-styled :global(.g9a-history__delete-yes) { color: var(--g9a-danger); }
+  .g9a-styled :global(.g9a-routines__form) { display: grid; gap: var(--g9a-gap); }
+  .g9a-styled :global(.g9a-routines__slot) { display: grid; gap: 2px; }
+  .g9a-styled :global(.g9a-routines__slot[data-state="missing"] input), .g9a-styled :global(.g9a-routines__slot[data-state="invalid"] input) { border-color: var(--g9a-danger); }
+  .g9a-styled :global(.g9a-routines__choose) { inline-size: 100%; text-align: start; }
+  .g9a-styled :global(.g9a-picker__chosen) { font-weight: 600; margin-inline-end: 6px; }
+  .g9a-styled :global(.g9a-csv) { display: flex; gap: 6px; align-items: center; margin-block: 4px; }
+</style>

package/dist/AssistantRoot.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { Assistant, PartStyles } from "@g9tm/aiassistant";
+import { type Overrides } from "./context.js";
+type $$ComponentProps = {
+    assistant: Assistant;
+    styles?: PartStyles;
+    unstyled?: boolean;
+    components?: Overrides;
+    children: Snippet;
+};
+declare const AssistantRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type AssistantRoot = ReturnType<typeof AssistantRoot>;
+export default AssistantRoot;

package/dist/admin.d.ts

@@ -0,0 +1,2 @@
+/** The manager's pages: a separate entry (`@g9tm/aiassistant-svelte/admin`), a lazy chunk only managers load. */
+export { default as AdminPage } from "./pages/AdminPage.svelte";

package/dist/admin.js

@@ -0,0 +1,2 @@
+/** The manager's pages: a separate entry (`@g9tm/aiassistant-svelte/admin`), a lazy chunk only managers load. */
+export { default as AdminPage } from "./pages/AdminPage.svelte";

package/dist/blocks/BlockView.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  // Every block type from the core's view model; the host may replace any type (including its x:* blocks). A block no
+  // renderer knows shows its fallback text, never an error or a hole.
+  import { blockView, can, obj } from "@g9tm/aiassistant";
+  import { blockOverride, cls, override, useUi } from "../context.js";
+  import Chart from "./Chart.svelte";
+  import CsvButton from "./CsvButton.svelte";
+  import TextView from "../parts/TextView.svelte";
+
+  let { block, compact = false }: { block: unknown; compact?: boolean } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  const view = $derived(blockView(block, ui.texts.locale, ui.assistant.customBlocks));
+  const custom = $derived(blockOverride(ui, view.type === "custom" ? view.name : view.type));
+  const Csv = $derived(override(ui, "CsvButton") ?? CsvButton);
+  // A table's file has the raw values (the export view of the same rows), not the text drawn for reading.
+  const raw = $derived(view.type === "table" ? blockView({ ...obj(block), type: "export" }, ui.texts.locale) : null);
+  let open = $state(false);
+  const fileUrl = (id: string): string => "/api/assistant/files/" + encodeURIComponent(id); // only the server's own files
+</script>
+
+{#if custom}
+  {@const Custom = custom}
+  <Custom {view} {block} {compact} />
+{:else if view.type === "text"}
+  <div class={cls(ui, "block.text")}><TextView text={view.text} /></div>
+{:else if view.type === "callout"}
+  <div class={cls(ui, "block.callout")} data-tone={view.tone}><TextView text={view.text} /></div>
+{:else if view.type === "table"}
+  <div class={cls(ui, "block.table")}>
+    {#if view.title}<div class="g9a-block-title">{view.title}</div>{/if}
+    {#if view.asCards || compact}
+      {#each view.rows.slice(0, open ? view.rows.length : view.shown) as row, r (r)}
+        <dl class={cls(ui, "block.table.card")}>
+          {#each view.columns as c, i (c.name)}<dt>{c.label}</dt><dd data-kind={c.kind}>{row[i]}</dd>{/each}
+        </dl>
+      {/each}
+    {:else}
+      <table>
+        <thead><tr>{#each view.columns as c (c.name)}<th data-kind={c.kind}>{c.label}</th>{/each}</tr></thead>
+        <tbody>
+          {#each view.rows.slice(0, open ? view.rows.length : view.shown) as row, r (r)}
+            <tr>{#each row as v, i (i)}<td data-kind={view.columns[i]?.kind}>{v}</td>{/each}</tr>
+          {/each}
+        </tbody>
+      </table>
+    {/if}
+    {#if view.more > 0 && !open}<button type="button" class="g9a-more" onclick={() => (open = true)}>{t("block.more_rows", { count: view.more })}</button>{/if}
+  </div>
+  {#if raw?.type === "export"}<Csv title={view.title} labels={raw.columns.map((c) => c.label)} rows={raw.rows} />{/if}
+{:else if view.type === "export"}
+  <div class={cls(ui, "block") + " g9a-block__export"}>
+    {#if view.title}<div class="g9a-block-title">{view.title}</div>{/if}
+    {#if can(ui.assistant.host, "save")}<Csv title={view.title} labels={view.columns.map((c) => c.label)} rows={view.rows} />{:else}<div>{view.fallbackText}</div>{/if}
+  </div>
+{:else if view.type === "chart"}
+  <div class={cls(ui, "block.chart")}>
+    {#if view.title}<div class="g9a-block-title">{view.title}</div>{/if}
+    <Chart {view} />
+    {#if view.fewData}<div class="g9a-note">{t("block.few_data")}</div>{/if}
+  </div>
+{:else if view.type === "kpi"}
+  <div class={cls(ui, "block.kpi")}>{#each view.items as k, i (i)}<div><span>{k.label}</span><strong>{k.value}</strong></div>{/each}</div>
+{:else if view.type === "steps"}
+  <ol class={cls(ui, "block.steps")}>{#each view.items as s, i (i)}<li data-state={s.state}>{s.text}</li>{/each}</ol>
+{:else if view.type === "actions"}
+  <div class={cls(ui, "block.actions")}>
+    {#each view.items as a, i (i)}
+      <button type="button" class={cls(ui, "block.action")} onclick={() => ui.assistant.send(a.send)}>
+        {a.label}{#if a.suggested}<span class="g9a-suggested">{t("block.suggested")}</span>{/if}
+      </button>
+    {/each}
+  </div>
+{:else if view.type === "flow"}
+  <div class={cls(ui, "block.flow")}>{view.line}</div>
+{:else if view.type === "image"}
+  <div class={cls(ui, "block.image")}>{#each view.fileIds as id (id)}<img src={fileUrl(id)} alt={view.fallbackText} loading="lazy" />{/each}</div>
+{:else if view.type === "open" && ui.assistant.host.navigate}
+  <button type="button" class={cls(ui, "block.open")} onclick={() => ui.assistant.host.navigate?.(view.type === "open" ? view.pageId : "")}>
+    {ui.assistant.host.pageName?.(view.pageId) ?? view.fallbackText}
+  </button>
+{:else}
+  <div class={cls(ui, "block.fallback")}>{view.fallbackText}</div>
+{/if}

package/dist/blocks/BlockView.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    block: unknown;
+    compact?: boolean;
+};
+declare const BlockView: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockView = ReturnType<typeof BlockView>;
+export default BlockView;

package/dist/blocks/Chart.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  // The built-in light chart: horizontal bars for rankings, bars, one or several lines on a time axis,
+  // and a donut. A host may give its own chart library through components.Block.chart with the same data.
+  import { shares, formatNumber, type BlockView } from "@g9tm/aiassistant";
+  import { cls, override, useUi } from "../context.js";
+
+  let { view }: { view: Extract<BlockView, { type: "chart" }> } = $props();
+  const ui = useUi();
+  const own = $derived(override(ui, "Chart"));
+  const fmt = (v: number): string => formatNumber(v, ui.texts.locale);
+  const first = $derived(view.series[0]?.values ?? []);
+  const W = 300, H = 140;
+  function path(values: readonly number[]): string {
+    const max = Math.max(1, ...view.series.flatMap((s) => s.values));
+    return values.map((v, i) => (i === 0 ? "M" : "L") + ((i / Math.max(1, values.length - 1)) * W).toFixed(1) + " " + (H - (v / max) * H).toFixed(1)).join(" ");
+  }
+  const donut = $derived.by(() => {
+    const total = first.reduce((a, b) => a + Math.max(0, b), 0) || 1;
+    let at = 0;
+    return first.map((v) => { const from = at; at += Math.max(0, v) / total; return { from, to: at }; });
+  });
+  const arc = (from: number, to: number): string => {
+    const p = (f: number): string => (50 + 40 * Math.sin(f * 2 * Math.PI)).toFixed(2) + " " + (50 - 40 * Math.cos(f * 2 * Math.PI)).toFixed(2);
+    return "M " + p(from) + " A 40 40 0 " + (to - from > 0.5 ? "1" : "0") + " 1 " + p(to);
+  };
+</script>
+
+{#if own}
+  {@const Own = own}
+  <Own {view} />
+{:else if view.kind === "hbars" || view.kind === "bars" || view.kind === "stacked"}
+  <div class="g9a-hbars" role="img" aria-label={view.fallbackText}>
+    {#each view.labels as label, i (i)}
+      <div class={cls(ui, "block.chart.bar")}>
+        <span class="g9a-bar-label">{label}</span>
+        <span class="g9a-bar-track"><span class="g9a-bar-fill" style={"inline-size:" + String(Math.round((shares(first)[i] ?? 0) * 100)) + "%"}></span></span>
+        <span class="g9a-bar-value">{fmt(first[i] ?? 0)}</span>
+      </div>
+    {/each}
+  </div>
+{:else if view.kind === "donut"}
+  <svg viewBox="0 0 100 100" class="g9a-donut" role="img" aria-label={view.fallbackText}>
+    {#each donut as d, i (i)}<path d={arc(d.from, Math.min(d.to, d.from + 0.9999))} data-index={i} />{/each}
+  </svg>
+  <div class="g9a-legend">{#each view.labels as l, i (i)}<span data-index={i}>{l}</span>{/each}</div>
+{:else}
+  <svg viewBox={"0 0 " + String(W) + " " + String(H)} class={cls(ui, "block.chart.line")} role="img" aria-label={view.fallbackText} preserveAspectRatio="none">
+    {#each view.series as s, i (s.name)}<path d={path(s.values)} data-index={i} fill="none" />{/each}
+  </svg>
+  {#if view.series.length > 1}<div class="g9a-legend">{#each view.series as s, i (s.name)}<span data-index={i}>{s.name}</span>{/each}</div>{/if}
+{/if}

package/dist/blocks/Chart.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type BlockView } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    view: Extract<BlockView, {
+        type: "chart";
+    }>;
+};
+declare const Chart: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/blocks/CsvButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  // "Save as CSV" for a table or an export block, through the host's file save (hidden when the host cannot save). The
+  // file is the core's: a BOM, every cell quoted, no formula injection. A short notice says whether it was saved.
+  import { can } from "@g9tm/aiassistant";
+  import { saveCsv } from "@g9tm/aiassistant/pages";
+  import { useUi } from "../context.js";
+  import { pageTexts } from "../pages/texts.js";
+
+  let { title = undefined, labels, rows }: { title?: string | undefined; labels: readonly string[]; rows: readonly (readonly string[])[] } = $props();
+  const ui = useUi();
+  const t = pageTexts(ui.texts).t;
+  let saved = $state<boolean | null>(null);
+  let busy = $state(false);
+
+  async function save(): Promise<void> {
+    busy = true;
+    saved = await saveCsv(ui.assistant.host, title, labels, rows);
+    busy = false;
+  }
+</script>
+
+{#if can(ui.assistant.host, "save")}
+  <div class="g9a-csv">
+    <button type="button" class="g9a-csv__save" disabled={busy} onclick={save}>{t("csv.save")}</button>
+    {#if saved !== null}<span class="g9a-note" role="status" data-saved={saved}>{t(saved ? "csv.saved" : "csv.not_saved")}</span>{/if}
+  </div>
+{/if}

package/dist/blocks/CsvButton.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    title?: string | undefined;
+    labels: readonly string[];
+    rows: readonly (readonly string[])[];
+};
+declare const CsvButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CsvButton = ReturnType<typeof CsvButton>;
+export default CsvButton;

package/dist/browser.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A ready host for a plain browser app (a product without a bridge talks HTTP itself). Nothing here runs during
+ * server rendering; call it in the browser.
+ */
+import type { AssistantHost, AssistantTheme } from "@g9tm/aiassistant";
+export interface BrowserHostOptions {
+    locale?: "fa" | "en";
+    theme?: AssistantTheme;
+    /** Extra headers on every request (the host's own sign-in). */
+    headers?: () => Record<string, string>;
+    linkHosts?: readonly string[];
+    navigate?: AssistantHost["navigate"];
+    pageName?: AssistantHost["pageName"];
+    sheetLayer?: number;
+}
+export declare function browserHost(o?: BrowserHostOptions): AssistantHost;

package/dist/browser.js

@@ -0,0 +1,80 @@
+/**
+ * A ready host for a plain browser app (a product without a bridge talks HTTP itself). Nothing here runs during
+ * server rendering; call it in the browser.
+ */
+export function browserHost(o = {}) {
+    const locale = o.locale ?? (document.documentElement.lang === "en" ? "en" : "fa");
+    const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const dark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
+    const host = {
+        locale,
+        dir: locale === "fa" ? "rtl" : "ltr",
+        theme: o.theme ?? { mode: dark ? "dark" : "light", tokens: {} },
+        reducedMotion: reduced,
+        sheetLayer: o.sheetLayer ?? 1000,
+        linkHosts: o.linkHosts ?? [location.hostname],
+        async fetch(input, init) {
+            const headers = { ...(o.headers?.() ?? {}), ...(init?.headers ?? {}) };
+            const body = init?.body;
+            const r = await fetch(input, { method: init?.method ?? "GET", headers, credentials: "same-origin", ...(body === undefined ? {} : { body: body }) });
+            return { status: r.status, ok: r.ok, text: () => r.text(), headers: r.headers };
+        },
+        eventSource: (url) => new EventSource(url),
+        copy: (text) => navigator.clipboard.writeText(text),
+        // Recording for dictation: one channel of WebM/Opus (MediaRecorder's default), at most two minutes.
+        ...(typeof MediaRecorder === "function" && navigator.mediaDevices ? {
+            async record() {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1 } });
+                const rec = new MediaRecorder(stream);
+                const parts = [];
+                rec.ondataavailable = (e) => { if (e.data.size > 0)
+                    parts.push(e.data); };
+                const ended = new Promise((resolve) => { rec.onstop = () => resolve(); });
+                rec.start();
+                const cap = setTimeout(() => { if (rec.state === "recording")
+                    rec.stop(); }, 120000);
+                return async () => {
+                    clearTimeout(cap);
+                    if (rec.state === "recording")
+                        rec.stop();
+                    await ended;
+                    stream.getTracks().forEach((t) => t.stop());
+                    const blob = new Blob(parts, { type: rec.mimeType || "audio/webm" });
+                    return blob.size > 0 ? { bytes: new Uint8Array(await blob.arrayBuffer()), mime: blob.type.split(";")[0] ?? "audio/webm" } : null;
+                };
+            },
+        } : {}),
+        openUrl: (url) => { window.open(url, "_blank", "noopener"); },
+        async pickFile(accept) {
+            return new Promise((resolve) => {
+                const input = document.createElement("input");
+                input.type = "file";
+                input.accept = accept.join(",");
+                input.onchange = async () => {
+                    const f = input.files?.[0];
+                    resolve(f ? { name: f.name, type: f.type, bytes: new Uint8Array(await f.arrayBuffer()) } : null);
+                };
+                input.click();
+            });
+        },
+        async saveFile(name, data) {
+            const blob = new Blob([typeof data === "string" ? data : data]);
+            const a = document.createElement("a");
+            a.href = URL.createObjectURL(blob);
+            a.download = name;
+            a.click();
+            setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+            return true;
+        },
+        onBackground(listener) {
+            const on = () => listener(document.visibilityState === "hidden");
+            document.addEventListener("visibilitychange", on);
+            return () => document.removeEventListener("visibilitychange", on);
+        },
+    };
+    if (o.navigate)
+        host.navigate = o.navigate;
+    if (o.pageName)
+        host.pageName = o.pageName;
+    return host;
+}

package/dist/cards/ApprovalCard.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  // The approval card: facts, before and after, step ticks (unticking a step unticks what depends on it), the method
+  // (click, PinPad, code), the taint warning. Confirming always goes through the core, bound to the plan's hash.
+  import type { PlanView } from "@g9tm/aiassistant";
+  import { needsCode } from "@g9tm/aiassistant";
+  import { cls, override, useUi } from "../context.js";
+  import PinPad from "../slots/PinPad.svelte";
+
+  let { plan }: { plan: PlanView } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  const Pin = $derived(override(ui, "PinPad") ?? PinPad);
+  let code = $state("");
+  let busy = $state(false);
+  const say = (key: string, args: Record<string, string>): string => {
+    const text = t(key, args);
+    return text === key ? Object.values(args).join(" ") || key : text;
+  };
+
+  async function confirm(): Promise<void> {
+    busy = true;
+    await ui.assistant.confirm(plan.id, needsCode(plan.method) ? code : null);
+    code = "";
+    busy = false;
+  }
+</script>
+
+<div class={cls(ui, "card.approval")} data-answered={plan.answered ?? ""}>
+  <h3>{plan.readOnly ? t("card.readonly_routine") : plan.title}</h3>
+  {#if plan.warning}<p class="g9a-warning" role="note">{t("card.tainted")}</p>{/if}
+  <ol>
+    {#each plan.steps as s (s.index)}
+      <li class={cls(ui, "card.approval.step")}>
+        <label>
+          <input type="checkbox" checked={s.ticked} disabled={plan.answered !== null || plan.steps.length === 1} onchange={() => ui.assistant.tick(plan.id, s.index)} />
+          {s.text}{#if !s.undoable}<span class="g9a-irreversible"> ({t("card.irreversible")})</span>{/if}
+        </label>
+        {#each s.facts as f, i (i)}<div class={cls(ui, "card.approval.fact")}>{say(f.key, f.args)}</div>{/each}
+        {#each s.diff as d, i (i)}<div class={cls(ui, "card.approval.fact")}>{say(d.name, d.args)}: {d.before ?? "—"} ← {d.after ?? "—"}</div>{/each}
+      </li>
+    {/each}
+  </ol>
+  {#if plan.answered === null}
+    {#if needsCode(plan.method)}
+      <Pin bind:value={code} label={t("card.code")} />
+    {/if}
+    {#if plan.failCode === "confirm.waiting"}<p class="g9a-note" role="status">{t("card.waiting")}</p>
+    {:else if plan.failCode}<p class="g9a-note" role="alert">{plan.failCode}{#if plan.triesLeft !== null} · {t("card.tries_left", { count: plan.triesLeft })}{/if}</p>{/if}
+    <div class="g9a-row">
+      <button type="button" class={cls(ui, "card.approval.confirm")} disabled={busy || (needsCode(plan.method) && code.length === 0)} onclick={confirm}>{t("card.confirm")}</button>
+      <button type="button" class={cls(ui, "card.approval.refuse")} disabled={busy} onclick={() => ui.assistant.refuse(plan.id)}>{t("card.refuse")}</button>
+    </div>
+  {:else}
+    <p class="g9a-note">{t("card.answered")}</p>
+  {/if}
+</div>

package/dist/cards/ApprovalCard.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PlanView } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    plan: PlanView;
+};
+declare const ApprovalCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ApprovalCard = ReturnType<typeof ApprovalCard>;
+export default ApprovalCard;

package/dist/cards/Cards.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  // The other cards: undo all, a question with options (and a secret field), "learn this?" and "make it a routine?".
+  // Each answers once; the answer stays in the core.
+  import { arr, obj, str } from "@g9tm/aiassistant";
+  import { cls, useUi } from "../context.js";
+  import SecretField from "./SecretField.svelte";
+
+  let { card, runId }: { card: { kind: string; id: string; body: Record<string, unknown> }; runId: string | null } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  const answered = $derived(ui.assistant.answered.of(card.id));
+  let text = $state("");
+  let undone = $state<string | null>(null);
+  const b = $derived(card.body);
+  const options = $derived(arr(b["options"]).map(obj).map((o) => str(o["label"])).filter((l) => l.length > 0));
+  const steps = $derived(arr(b["steps"]).map(obj).map((s) => str(s["text"], str(s["title"], str(s["tool"])))));
+</script>
+
+{#if card.kind === "undo"}
+  <div class={cls(ui, "card.undo")}>
+    <ul>{#each steps as s, i (i)}<li>{s}</li>{/each}</ul>
+    {#if undone === null}
+      <button type="button" onclick={async () => { const r = obj(await ui.assistant.undo(card.id).catch(() => null)); undone = str(r["text"], t("card.answered")); }}>{t("undo.all")}</button>
+    {:else}<p class="g9a-note">{undone}</p>{/if}
+  </div>
+{:else if card.kind === "ask" && runId}
+  <div class={cls(ui, "card.ask")}>
+    <p>{str(b["question"])}</p>
+    {#if answered}<p class="g9a-note">{t("card.answered")}</p>
+    {:else}
+      {#each options as o (o)}<button type="button" class="g9a-option" onclick={() => ui.assistant.answer(runId, card.id, [o], null)}>{o}</button>{/each}
+      {#if b["secret"] === true}
+        <SecretField onsubmit={(v) => ui.assistant.answer(runId, card.id, [], v)} />
+      {:else}
+        <form onsubmit={(e) => { e.preventDefault(); void ui.assistant.answer(runId, card.id, [], text); }}>
+          <input bind:value={text} aria-label={t("ask.send")} />
+          <button type="submit">{t("ask.send")}</button>
+        </form>
+      {/if}
+    {/if}
+  </div>
+{:else if card.kind === "learn" || card.kind === "routine" || card.kind === "routine_revision"}
+  <div class={cls(ui, "card.choice")}>
+    <p>{card.kind === "learn" ? t("learn.ask") : t("routine.ask")}</p>
+    {#if card.kind === "learn"}<blockquote>{str(b["text"])}</blockquote>{:else}<ol>{#each steps as s, i (i)}<li>{s}</li>{/each}</ol>{/if}
+    {#if answered}<p class="g9a-note">{t("card.answered")}</p>
+    {:else}
+      {@const kind = card.kind === "learn" ? "knowledge" : "learned"}
+      {@const yes = card.kind === "learn" ? "accept" : "approve"}
+      {@const no = card.kind === "learn" ? "refuse" : "retire"}
+      <button type="button" onclick={() => ui.assistant.choose(kind, str(b["id"], card.id), yes)}>{t("yes")}</button>
+      <button type="button" onclick={() => ui.assistant.choose(kind, str(b["id"], card.id), no)}>{t("no")}</button>
+    {/if}
+  </div>
+{/if}

package/dist/cards/Cards.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    card: {
+        kind: string;
+        id: string;
+        body: Record<string, unknown>;
+    };
+    runId: string | null;
+};
+declare const Cards: import("svelte").Component<$$ComponentProps, {}, "">;
+type Cards = ReturnType<typeof Cards>;
+export default Cards;