@g9tm/aiassistant-svelte 1.0.0 → 1.1.0

package/dist/AssistantRoot.svelte

@@ -1,118 +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; }
-</style>
+<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/blocks/BlockView.svelte

@@ -1,74 +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 } from "@g9tm/aiassistant";
-  import { blockOverride, cls, useUi } from "../context.js";
-  import Chart from "./Chart.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));
-  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>
-{: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}
+<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/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/index.d.ts

@@ -26,6 +26,10 @@ export { default as LearnedPage } from "./pages/LearnedPage.svelte";
 export { default as FindingsPage } from "./pages/FindingsPage.svelte";
 export { default as RoutineWizard } from "./pages/RoutineWizard.svelte";
 export { default as ActionsPage } from "./pages/ActionsPage.svelte";
+export { default as SlotPicker } from "./pages/SlotPicker.svelte";
+export { default as CsvButton } from "./blocks/CsvButton.svelte";
+export { default as PdfButton } from "./parts/PdfButton.svelte";
+export { pageTexts, pageKeys } from "./pages/texts.js";
 export { browserHost } from "./browser.js";
 export type { BrowserHostOptions } from "./browser.js";
 export { provideUi, useUi, cls, sty, override, blockOverride } from "./context.js";

package/dist/index.js

@@ -26,6 +26,10 @@ export { default as LearnedPage } from "./pages/LearnedPage.svelte";
 export { default as FindingsPage } from "./pages/FindingsPage.svelte";
 export { default as RoutineWizard } from "./pages/RoutineWizard.svelte";
 export { default as ActionsPage } from "./pages/ActionsPage.svelte";
+export { default as SlotPicker } from "./pages/SlotPicker.svelte";
+export { default as CsvButton } from "./blocks/CsvButton.svelte";
+export { default as PdfButton } from "./parts/PdfButton.svelte";
+export { pageTexts, pageKeys } from "./pages/texts.js";
 export { browserHost } from "./browser.js";
 export { provideUi, useUi, cls, sty, override, blockOverride } from "./context.js";
 export { AssistantState, Ticker } from "./store.svelte.js";

package/dist/pages/History.svelte

@@ -1,6 +1,96 @@
-<script lang="ts">
-  import Page from "./Page.svelte";
-  let { onopen = undefined }: { onopen?: ((id: string) => void) | undefined } = $props();
-</script>
-
-<Page kind="history" {onopen} />
+<script lang="ts">
+  // The person's conversations in four tabs with their counts (today, earlier, pinned, waiting for a code), one search
+  // over all of them, pin or unpin, delete after a confirmation, and open. The rows and tabs come from the core's
+  // page helpers; this only draws them.
+  import { HISTORY_TABS, historyTabs, pageCalls, readConversations, tabCounts, type ConversationRow, type HistoryTab } from "@g9tm/aiassistant/pages";
+  import { faDigits } from "@g9tm/aiassistant";
+  import { cls, override, useUi } from "../context.js";
+  import Dialog from "../slots/Dialog.svelte";
+  import { pageTexts } from "./texts.js";
+
+  let { onopen = undefined }: { onopen?: ((conversationId: string) => void) | undefined } = $props();
+  const ui = useUi();
+  const t = pageTexts(ui.texts).t;
+  const api = ui.assistant.api;
+  const Confirm = $derived(override(ui, "Dialog") ?? Dialog);
+  let rows = $state<ConversationRow[]>([]);
+  let failed = $state(false);
+  let search = $state("");
+  let tab = $state<HistoryTab>("today");
+  let removing = $state<ConversationRow | null>(null);
+  let asking = $state(false);
+  const digits = (n: number): string => (ui.texts.locale === "fa" ? faDigits(String(n)) : String(n));
+
+  async function load(): Promise<void> {
+    try {
+      rows = readConversations(await api.conversations());
+      failed = false;
+    } catch {
+      failed = true;
+    }
+  }
+  $effect(() => { void load(); });
+
+  const tabs = $derived(historyTabs(rows, new Date(), search));
+  const counts = $derived(tabCounts(tabs));
+  const shown = $derived(new Map(Object.entries(tabs)).get(tab) ?? []);
+
+  async function call(work: Promise<unknown>): Promise<void> {
+    try {
+      await work;
+    } catch {
+      failed = true;
+    }
+    await load();
+  }
+
+  function askRemove(row: ConversationRow): void {
+    removing = row;
+    asking = true;
+  }
+
+  async function remove(): Promise<void> {
+    const row = removing;
+    asking = false;
+    removing = null;
+    if (row) await call(pageCalls.remove(api, row.id));
+  }
+
+  async function open(id: string): Promise<void> {
+    await ui.assistant.open(id);
+    onopen?.(id);
+  }
+</script>
+
+<div class={cls(ui, "panel.body") + " g9a-history"} data-page="history">
+  {#if failed}<p class="g9a-note" role="alert">{t("error.network")}</p>{/if}
+  <input type="search" bind:value={search} placeholder={t("history.search")} aria-label={t("history.search")} />
+  <div role="tablist" class="g9a-tabs" aria-label={t("history.tabs")}>
+    {#each HISTORY_TABS as x (x)}
+      <button type="button" role="tab" data-tab={x} aria-selected={tab === x} onclick={() => { tab = x; }}>
+        {t("history." + x)} <span class="g9a-count">{digits(new Map(Object.entries(counts)).get(x) ?? 0)}</span>
+      </button>
+    {/each}
+  </div>
+  <div role="tabpanel" data-tab={tab}><ul class="g9a-history__list">
+    {#each shown as row (row.id)}
+      <li class="g9a-history__row" data-id={row.id} data-pinned={row.pinned} data-waiting={row.waiting}>
+        <button type="button" class="g9a-history__open" onclick={() => open(row.id)}>{row.title || t("history.untitled")}</button>
+        <button type="button" class="g9a-history__pin" aria-pressed={row.pinned} onclick={() => call(pageCalls.pin(api, row.id, !row.pinned))}>
+          {row.pinned ? t("history.unpin") : t("history.pin")}
+        </button>
+        <button type="button" class="g9a-history__delete" onclick={() => askRemove(row)}>{t("history.delete")}</button>
+      </li>
+    {:else}
+      <li class="g9a-note">{t("history.empty")}</li>
+    {/each}
+  </ul></div>
+  <Confirm bind:open={asking} label={t("history.delete_confirm")}>
+    <p>{t("history.delete_confirm")}</p>
+    <p><strong>{removing?.title || t("history.untitled")}</strong></p>
+    <div class="g9a-row">
+      <button type="button" class="g9a-history__delete-yes" onclick={remove}>{t("history.delete")}</button>
+      <button type="button" onclick={() => { asking = false; removing = null; }}>{t("no")}</button>
+    </div>
+  </Confirm>
+</div>

package/dist/pages/History.svelte.d.ts

@@ -1,5 +1,5 @@
 type $$ComponentProps = {
-    onopen?: ((id: string) => void) | undefined;
+    onopen?: ((conversationId: string) => void) | undefined;
 };
 declare const History: import("svelte").Component<$$ComponentProps, {}, "">;
 type History = ReturnType<typeof History>;