@g9tm/aiassistant-svelte 0.0.0-stage → 1.0.0

package/dist/slots/PinPad.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  // The default PinPad slot: a numeric code field (a host may give its own).
+  let { value = $bindable(""), label }: { value?: string; label: string } = $props();
+</script>
+
+<input class="g9a-pin" type="password" inputmode="numeric" autocomplete="one-time-code" aria-label={label} placeholder={label} bind:value />

package/dist/slots/PinPad.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    value?: string;
+    label: string;
+};
+declare const PinPad: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PinPad = ReturnType<typeof PinPad>;
+export default PinPad;

package/dist/store.svelte.d.ts

@@ -0,0 +1,15 @@
+/** The core assistant's snapshot as Svelte state (runes). */
+import type { Assistant, AssistantSnapshot } from "@g9tm/aiassistant";
+export declare class AssistantState {
+    current: AssistantSnapshot;
+    private readonly stop;
+    constructor(assistant: Assistant);
+    dispose(): void;
+}
+/** A clock that ticks while something is shown (for elapsed time and reveal), never during server rendering. */
+export declare class Ticker {
+    now: number;
+    private handle;
+    start(ms?: number): void;
+    stop(): void;
+}

package/dist/store.svelte.js

@@ -0,0 +1,31 @@
+/** The core assistant's snapshot as Svelte state (runes). */
+export class AssistantState {
+    constructor(assistant) {
+        this.current = $state();
+        this.current = assistant.snapshot();
+        this.stop = assistant.subscribe((s) => {
+            this.current = s;
+        });
+    }
+    dispose() {
+        this.stop();
+    }
+}
+/** A clock that ticks while something is shown (for elapsed time and reveal), never during server rendering. */
+export class Ticker {
+    constructor() {
+        this.now = $state(Date.now());
+    }
+    start(ms = 80) {
+        if (typeof window === "undefined" || this.handle !== undefined)
+            return;
+        this.handle = setInterval(() => {
+            this.now = Date.now();
+        }, ms);
+    }
+    stop() {
+        if (this.handle !== undefined)
+            clearInterval(this.handle);
+        this.handle = undefined;
+    }
+}

package/dist/surfaces/AssistantChat.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  // The chat: a composition of exported parts only (mode banner, messages, work card, composer). A host can build the
+  // same from the parts, or replace any of them.
+  import { onDestroy } from "svelte";
+  import { cls, override, useUi } from "../context.js";
+  import { AssistantState } from "../store.svelte.js";
+  import Composer from "../parts/Composer.svelte";
+  import MessageList from "../parts/MessageList.svelte";
+  import Small from "../parts/Small.svelte";
+  import WorkCard from "../parts/WorkCard.svelte";
+
+  let { placeholder = undefined }: { placeholder?: string | undefined } = $props();
+  const ui = useUi();
+  const live = new AssistantState(ui.assistant);
+  onDestroy(() => live.dispose());
+  const List = $derived(override(ui, "MessageList") ?? MessageList);
+  const Work = $derived(override(ui, "WorkCard") ?? WorkCard);
+  const Compose = $derived(override(ui, "Composer") ?? Composer);
+  const s = $derived(live.current);
+  $effect(() => {
+    ui.assistant.stateWatch.start();
+  });
+</script>
+
+<div class={cls(ui, "chat")}>
+  <Small kind="mode" state={s.state} />
+  <List messages={s.messages} plans={s.plans} runId={s.run?.runId ?? null} />
+  {#if s.run}<Work run={s.run} />{/if}
+  {#if s.error}<div class="g9a-note" role="alert">{ui.texts.t(s.error)}</div>{/if}
+  <Compose busy={s.busy} attachments={s.attachments} {placeholder} />
+</div>

package/dist/surfaces/AssistantChat.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    placeholder?: string | undefined;
+};
+declare const AssistantChat: import("svelte").Component<$$ComponentProps, {}, "">;
+type AssistantChat = ReturnType<typeof AssistantChat>;
+export default AssistantChat;

package/dist/surfaces/AssistantPanel.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  // The panel in six layouts (sheet, side, fullscreen, inline, card, compact) or "auto" by the container's width; the
+  // layout can change live without losing the conversation. Escape closes; Alt+A (by key position, so it works with a
+  // Persian keyboard) toggles. Dialogs inside sit above the panel.
+  import type { Snippet } from "svelte";
+  import { pickLayout, type Layout, type LayoutThresholds } from "@g9tm/aiassistant";
+  import { cls, sty, useUi } from "../context.js";
+  import AssistantChat from "./AssistantChat.svelte";
+
+  let { open = $bindable(true), layout = "auto", thresholds = undefined, title = undefined, header = undefined, onclose = undefined }: {
+    open?: boolean; layout?: Layout; thresholds?: LayoutThresholds | undefined; title?: string | undefined; header?: Snippet | undefined; onclose?: (() => void) | undefined;
+  } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  let width = $state(1024);
+  let opener: Element | null = null;
+  const current = $derived(pickLayout(layout, width, thresholds));
+
+  function close(): void {
+    open = false;
+    onclose?.();
+    if (opener instanceof HTMLElement) opener.focus(); // focus goes back to what opened it
+  }
+
+  function onkey(e: KeyboardEvent): void {
+    if (e.altKey && e.code === "KeyA") {
+      e.preventDefault();
+      if (!open) opener = document.activeElement;
+      open = !open;
+    } else if (e.key === "Escape" && open && current !== "inline" && current !== "card") close();
+  }
+</script>
+
+<svelte:window onkeydown={onkey} />
+
+<div class="g9a-measure" bind:clientWidth={width}></div>
+{#if open || current === "inline" || current === "card"}
+  <section class={cls(ui, "panel")} style={sty(ui, "panel") ?? ""} data-layout={current} role={current === "sheet" || current === "fullscreen" ? "dialog" : "region"}
+    aria-label={title ?? t("assistant.name")} style:z-index={current === "inline" || current === "card" ? undefined : ui.layer - 1}>
+    {#if current !== "compact"}
+      <header class={cls(ui, "panel.header")}>
+        {#if header}{@render header()}{:else}<strong>{title ?? t("assistant.name")}</strong>{/if}
+        <button type="button" onclick={() => ui.assistant.fresh()}>{t("panel.new")}</button>
+        {#if current !== "inline" && current !== "card"}<button type="button" aria-label={t("panel.close")} onclick={close}>×</button>{/if}
+      </header>
+    {/if}
+    <div class={cls(ui, "panel.body")}><AssistantChat /></div>
+  </section>
+{/if}

package/dist/surfaces/AssistantPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import { type Layout, type LayoutThresholds } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    open?: boolean;
+    layout?: Layout;
+    thresholds?: LayoutThresholds | undefined;
+    title?: string | undefined;
+    header?: Snippet | undefined;
+    onclose?: (() => void) | undefined;
+};
+declare const AssistantPanel: import("svelte").Component<$$ComponentProps, {}, "open">;
+type AssistantPanel = ReturnType<typeof AssistantPanel>;
+export default AssistantPanel;

package/dist/surfaces/Surfaces.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  export type SurfaceKind = "hero" | "bar-button" | "ask-about";
+</script>
+
+<script lang="ts">
+  // Small surfaces: the dashboard hero (greeting, one status line, three starts, a place to write), the bar button with
+  // the count of cards waiting, and "ask the assistant" about one thing.
+  import { onDestroy } from "svelte";
+  import { cls, useUi } from "../context.js";
+  import { AssistantState } from "../store.svelte.js";
+
+  let { kind, greeting = "", starts = [], subject = undefined, onopen = undefined }: {
+    kind: SurfaceKind; greeting?: string; starts?: string[]; subject?: { label: string; pageId: string; kind?: string; id?: string } | undefined; onopen?: (() => void) | undefined;
+  } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  const live = new AssistantState(ui.assistant);
+  onDestroy(() => live.dispose());
+  let text = $state("");
+
+  async function ask(q: string): Promise<void> {
+    if (!q.trim()) return;
+    const page = subject ? { pageId: subject.pageId, ...(subject.kind ? { subjectKind: subject.kind } : {}), ...(subject.id ? { subjectId: subject.id } : {}), subjectLabel: subject.label } : undefined;
+    await ui.assistant.send(q, page);
+    text = "";
+    onopen?.();
+  }
+</script>
+
+{#if kind === "hero"}
+  <div class={cls(ui, "hero")}>
+    <h2>{greeting || t("assistant.name")}</h2>
+    {#if live.current.state.mode !== "on"}<p class="g9a-note">{t(live.current.state.mode === "off" ? "mode.off" : "mode.offline")}</p>{/if}
+    <div class={cls(ui, "block.actions")}>{#each starts.slice(0, 3) as s (s)}<button type="button" class={cls(ui, "block.action")} onclick={() => ask(s)}>{s}</button>{/each}</div>
+    <form onsubmit={(e) => { e.preventDefault(); void ask(text); }}><input bind:value={text} placeholder={t("composer.placeholder")} aria-label={t("composer.placeholder")} /></form>
+  </div>
+{:else if kind === "bar-button"}
+  <button type="button" class={cls(ui, "bar-button")} onclick={() => onopen?.()} aria-label={t("assistant.name")}>
+    {t("assistant.name")}{#if live.current.state.waiting > 0}<span class="g9a-badge">{live.current.state.waiting}</span>{/if}
+  </button>
+{:else}
+  <button type="button" class={cls(ui, "ask-about")} onclick={() => ask(subject?.label ?? "")}>{t("assistant.name")}: {subject?.label ?? ""}</button>
+{/if}

package/dist/surfaces/Surfaces.svelte.d.ts

@@ -0,0 +1,16 @@
+export type SurfaceKind = "hero" | "bar-button" | "ask-about";
+type $$ComponentProps = {
+    kind: SurfaceKind;
+    greeting?: string;
+    starts?: string[];
+    subject?: {
+        label: string;
+        pageId: string;
+        kind?: string;
+        id?: string;
+    } | undefined;
+    onopen?: (() => void) | undefined;
+};
+declare const Surfaces: import("svelte").Component<$$ComponentProps, {}, "">;
+type Surfaces = ReturnType<typeof Surfaces>;
+export default Surfaces;

package/dist/theme.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Design tokens in three levels (layer 2): base (colours, sizes), semantic (surface, accent, danger) and per
+ * component (approvalCard.border). Every value is a CSS variable the host can set; none is global.
+ */
+import type { AssistantTheme } from "@g9tm/aiassistant";
+export declare const LIGHT: Readonly<Record<string, string>>;
+export declare const DARK: Readonly<Record<string, string>>;
+/** The CSS variables of a theme (the host's tokens over the defaults of its mode). */
+export declare function themeVars(theme: AssistantTheme): string;

package/dist/theme.js

@@ -0,0 +1,22 @@
+/**
+ * Design tokens in three levels (layer 2): base (colours, sizes), semantic (surface, accent, danger) and per
+ * component (approvalCard.border). Every value is a CSS variable the host can set; none is global.
+ */
+export const LIGHT = {
+    "surface": "#ffffff", "surface-2": "#f6f4f1", "ink": "#22201d", "muted": "#6b6660", "line": "#e4ded6",
+    "accent": "#8a4b2a", "accent-ink": "#ffffff", "danger": "#b42318", "ok": "#1f7a3d", "warn": "#a35a00",
+    "radius": "10px", "radius-s": "6px", "gap": "8px", "pad": "12px", "font": "inherit", "font-size": "14px",
+    "shadow": "0 6px 24px rgba(0,0,0,.12)", "motion": "180ms",
+    "approval-card-border": "var(--g9a-accent)", "chart-bar": "var(--g9a-accent)", "chart-grid": "var(--g9a-line)",
+};
+export const DARK = {
+    ...LIGHT,
+    "surface": "#1d1b19", "surface-2": "#272421", "ink": "#efeae4", "muted": "#a39c94", "line": "#3a3632",
+    "accent": "#e0a074", "accent-ink": "#1d1b19", "shadow": "0 6px 24px rgba(0,0,0,.5)",
+};
+/** The CSS variables of a theme (the host's tokens over the defaults of its mode). */
+export function themeVars(theme) {
+    const base = theme.mode === "dark" ? DARK : LIGHT;
+    const all = new Map([...Object.entries(base), ...Object.entries(theme.tokens)]);
+    return [...all].map(([k, v]) => "--g9a-" + k.replace(/[^a-z0-9-]/giu, "-") + ":" + v.replace(/[;{}]/gu, "")).join(";");
+}

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@g9tm/aiassistant-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Svelte 5 components for the G9 AI assistant, fully customisable (layouts, tokens, per-part classes, overrides, parts).",
+  "license": "MIT",
+  "author": {
+    "name": "Iman Kari",
+    "url": "G9TM"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./admin": {
+      "types": "./dist/admin.d.ts",
+      "svelte": "./dist/admin.js",
+      "import": "./dist/admin.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@g9tm/aiassistant": "1.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "2.5.8",
+    "svelte": "5.57.3",
+    "svelte-check": "4.7.8"
+  },
+  "svelte": "./dist/index.js",
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json --threshold error"
+  }
 }