fauna-api 0.0.0-stage → 1.0.676

package/dist/src/ui/generative.d.ts

@@ -0,0 +1,39 @@
+import { Fauna } from 'fauna-api';
+export declare function avatarUrl(profile?: Fauna.Authentification.Profile): string;
+export declare function buildAvatar(profile?: Fauna.Authentification.Profile): HTMLImageElement;
+export declare function buildModelAvatar(model?: string, iconByModel?: Record<string, string>): HTMLElement;
+export declare function stampUserAvatar(el: HTMLElement, profile?: Fauna.Authentification.Profile): void;
+export declare function stampModelAvatar(el: HTMLElement, model?: string, iconByModel?: Record<string, string>): void;
+export type SelectorOption = {
+    value: string;
+    name: string;
+    icon?: string;
+    reasoning?: string[];
+};
+export type SelectorHandle = {
+    getValue: () => string;
+    setValue: (value: string) => void;
+    getReasoning: () => string | undefined;
+    setReasoning: (reasoning: string | undefined) => void;
+    setOptions: (options: SelectorOption[]) => void;
+    destroy: () => void;
+};
+export declare function reasoningLabel(reasoning: string): string;
+export declare function createSelector(container: HTMLElement, opts?: {
+    options?: SelectorOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    reasoning?: string;
+    onReasoningChange?: (reasoning: string | undefined) => void;
+}): SelectorHandle;
+export type DemographicHandle = {
+    getValue: () => Partial<Fauna.Ant.Persona.Demographic>;
+    setValue: (value: Partial<Fauna.Ant.Persona.Demographic>) => void;
+    destroy: () => void;
+};
+export type DemographicField = 'age' | 'income' | 'sex' | 'race';
+export declare function createDemographic(container: HTMLElement, opts?: {
+    value?: Partial<Fauna.Ant.Persona.Demographic>;
+    onChange?: (value: Partial<Fauna.Ant.Persona.Demographic>) => void;
+    omit?: DemographicField[];
+}): DemographicHandle;

package/dist/src/ui/generative.js

@@ -0,0 +1,313 @@
+import { Fauna } from 'fauna-api';
+export function avatarUrl(profile) {
+    if (profile?.icon)
+        return profile.icon;
+    const name = profile?.displayName ?? profile?.email?.split('@')[0] ?? '?';
+    return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=0B1020&color=F3F6FF&size=64`;
+}
+export function buildAvatar(profile) {
+    const img = document.createElement('img');
+    img.className = 'chat-message-avatar';
+    img.src = avatarUrl(profile);
+    img.alt = profile?.displayName ?? profile?.email ?? '';
+    img.title = img.alt;
+    return img;
+}
+export function buildModelAvatar(model, iconByModel) {
+    const icon = model ? iconByModel?.[model] : undefined;
+    if (icon) {
+        const img = document.createElement('img');
+        img.className = 'chat-message-avatar chat-message-model-avatar';
+        img.src = icon;
+        img.alt = model ?? 'model';
+        img.title = model ?? '';
+        return img;
+    }
+    const fallback = document.createElement('span');
+    fallback.className = 'material-symbols-outlined chat-message-avatar chat-message-model-avatar chat-message-model-avatar-fallback';
+    fallback.textContent = 'neurology';
+    fallback.title = model ?? 'model';
+    return fallback;
+}
+export function stampUserAvatar(el, profile) {
+    el.querySelector(':scope > .chat-message-avatar:not(.chat-message-model-avatar)')?.remove();
+    el.classList.add('chat-message-authored');
+    el.appendChild(buildAvatar(profile));
+}
+export function stampModelAvatar(el, model, iconByModel) {
+    el.querySelector('.chat-message-model-avatar')?.remove();
+    el.classList.add('chat-message-model-authored');
+    el.appendChild(buildModelAvatar(model, iconByModel));
+}
+export function reasoningLabel(reasoning) {
+    return reasoning.charAt(0).toUpperCase() + reasoning.slice(1).toLowerCase();
+}
+export function createSelector(container, opts = {}) {
+    let options = opts.options ?? [];
+    let value = opts.value ?? '';
+    let reasoning = opts.reasoning;
+    let open = false;
+    container.classList.add('gen-select');
+    container.innerHTML = '';
+    const trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'gen-select-trigger';
+    const triggerIcon = document.createElement('img');
+    triggerIcon.className = 'gen-select-trigger-icon';
+    triggerIcon.alt = '';
+    const triggerLabel = document.createElement('span');
+    triggerLabel.className = 'gen-select-trigger-label';
+    triggerLabel.textContent = 'Model';
+    const triggerReasoning = document.createElement('span');
+    triggerReasoning.className = 'gen-select-trigger-reasoning';
+    triggerReasoning.style.display = 'none';
+    const caret = document.createElement('span');
+    caret.className = 'material-symbols-outlined gen-select-caret';
+    caret.textContent = 'expand_more';
+    trigger.append(triggerIcon, triggerLabel, triggerReasoning, caret);
+    const menu = document.createElement('div');
+    menu.className = 'gen-select-menu';
+    menu.setAttribute('role', 'listbox');
+    const reasoningPanel = document.createElement('div');
+    reasoningPanel.className = 'gen-select-reasoning';
+    reasoningPanel.style.display = 'none';
+    container.append(trigger, menu, reasoningPanel);
+    const hidePanel = () => { reasoningPanel.style.display = 'none'; };
+    const closeMenu = () => { open = false; container.classList.remove('open'); hidePanel(); };
+    const openMenu = () => {
+        open = true;
+        container.classList.add('open');
+        const sel = menu.querySelector('.gen-select-option[aria-selected="true"]');
+        sel?.scrollIntoView({ block: 'nearest' });
+    };
+    trigger.onclick = (e) => { e.stopPropagation(); open ? closeMenu() : openMenu(); };
+    const onDocClick = (e) => { if (!container.contains(e.target))
+        closeMenu(); };
+    const onKeyDown = (e) => { if (e.key === 'Escape')
+        closeMenu(); };
+    document.addEventListener('click', onDocClick);
+    container.addEventListener('keydown', onKeyDown);
+    const renderSelection = () => {
+        const current = options.find((row) => row.value === value);
+        triggerLabel.textContent = current?.name ?? 'Model';
+        if (current?.icon) {
+            triggerIcon.src = current.icon;
+            triggerIcon.style.display = '';
+        }
+        else {
+            triggerIcon.removeAttribute('src');
+            triggerIcon.style.display = 'none';
+        }
+        const supports = (current?.reasoning?.length ?? 0) > 0;
+        if (supports && reasoning) {
+            triggerReasoning.textContent = `\u00b7 ${reasoningLabel(reasoning)}`;
+            triggerReasoning.style.display = '';
+        }
+        else {
+            triggerReasoning.style.display = 'none';
+        }
+        for (const el of Array.from(menu.children)) {
+            el.setAttribute('aria-selected', el.dataset.value === value ? 'true' : 'false');
+        }
+    };
+    const showPanel = (row, anchor) => {
+        reasoningPanel.innerHTML = '';
+        for (const tier of row.reasoning ?? []) {
+            const opt = document.createElement('button');
+            opt.type = 'button';
+            opt.className = 'gen-select-reasoning-option';
+            opt.textContent = reasoningLabel(tier);
+            opt.setAttribute('aria-selected', (value === row.value && reasoning === tier) ? 'true' : 'false');
+            opt.onclick = (e) => {
+                e.stopPropagation();
+                value = row.value;
+                reasoning = tier;
+                renderSelection();
+                closeMenu();
+                opts.onChange?.(value);
+                opts.onReasoningChange?.(reasoning);
+            };
+            reasoningPanel.appendChild(opt);
+        }
+        reasoningPanel.style.display = 'block';
+        const containerRect = container.getBoundingClientRect();
+        const anchorRect = anchor.getBoundingClientRect();
+        const menuRect = menu.getBoundingClientRect();
+        const panelRect = reasoningPanel.getBoundingClientRect();
+        const margin = 8;
+        let viewportTop = anchorRect.top;
+        let viewportLeft = menuRect.right + 6;
+        if (viewportLeft + panelRect.width + margin > window.innerWidth) {
+            viewportLeft = menuRect.left - panelRect.width - 6;
+        }
+        viewportLeft = Math.max(margin, Math.min(viewportLeft, window.innerWidth - panelRect.width - margin));
+        viewportTop = Math.max(margin, Math.min(viewportTop, window.innerHeight - panelRect.height - margin));
+        reasoningPanel.style.top = `${viewportTop - containerRect.top}px`;
+        reasoningPanel.style.left = `${viewportLeft - containerRect.left}px`;
+    };
+    const renderMenu = () => {
+        menu.innerHTML = '';
+        for (const row of options) {
+            const item = document.createElement('button');
+            item.type = 'button';
+            item.className = 'gen-select-option';
+            item.setAttribute('role', 'option');
+            item.dataset.value = row.value;
+            const icon = document.createElement('img');
+            icon.className = 'gen-select-option-icon';
+            if (row.icon)
+                icon.src = row.icon;
+            icon.alt = '';
+            const label = document.createElement('span');
+            label.className = 'gen-select-option-label';
+            label.textContent = row.name;
+            item.append(icon, label);
+            const supportsReasoning = (row.reasoning?.length ?? 0) > 0;
+            if (supportsReasoning) {
+                const chevron = document.createElement('span');
+                chevron.className = 'material-symbols-outlined gen-select-option-chevron';
+                chevron.textContent = 'chevron_right';
+                item.appendChild(chevron);
+                item.onmouseenter = () => showPanel(row, item);
+                item.onclick = (e) => { e.stopPropagation(); showPanel(row, item); };
+            }
+            else {
+                item.onclick = (e) => {
+                    e.stopPropagation();
+                    value = row.value;
+                    reasoning = undefined;
+                    renderSelection();
+                    closeMenu();
+                    opts.onChange?.(value);
+                    opts.onReasoningChange?.(undefined);
+                };
+                item.onmouseenter = () => hidePanel();
+            }
+            menu.appendChild(item);
+        }
+        renderSelection();
+    };
+    renderMenu();
+    return {
+        getValue: () => value,
+        setValue: (next) => { value = next; renderSelection(); },
+        getReasoning: () => reasoning,
+        setReasoning: (next) => { reasoning = next; renderSelection(); },
+        setOptions: (next) => { options = next; renderMenu(); },
+        destroy: () => {
+            document.removeEventListener('click', onDocClick);
+            container.removeEventListener('keydown', onKeyDown);
+            container.innerHTML = '';
+            container.classList.remove('gen-select', 'open');
+        },
+    };
+}
+function prettyEnum(value) {
+    return value.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function formatIncome(value) {
+    if (value >= 1000)
+        return `$${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k`;
+    return `$${value}`;
+}
+export function createDemographic(container, opts = {}) {
+    let value = { ...(opts.value ?? {}) };
+    container.classList.add('gen-demographic');
+    container.innerHTML = '';
+    const emit = () => opts.onChange?.({ ...value });
+    const addSlider = (key, label, min, max, fallback, format) => {
+        const row = document.createElement('div');
+        row.className = 'gen-demographic-row';
+        const head = document.createElement('div');
+        head.className = 'gen-demographic-head';
+        const title = document.createElement('span');
+        title.textContent = label;
+        const readout = document.createElement('span');
+        readout.className = 'gen-demographic-readout';
+        head.append(title, readout);
+        const input = document.createElement('input');
+        input.type = 'range';
+        input.min = String(min);
+        input.max = String(max);
+        input.step = key === 'income' ? '1000' : '1';
+        const paint = () => {
+            if (key === 'age' && value.age === undefined)
+                value.age = fallback;
+            if (key === 'income' && value.income === undefined)
+                value.income = fallback;
+            const set = value[key] ?? fallback;
+            input.value = String(set);
+            readout.textContent = format(set);
+            row.classList.add('is-set');
+        };
+        input.oninput = () => {
+            const next = Number(input.value);
+            if (key === 'age')
+                value.age = next;
+            else
+                value.income = next;
+            paint();
+        };
+        input.onchange = () => emit();
+        row.append(head, input);
+        container.appendChild(row);
+        paint();
+        return paint;
+    };
+    const addChips = (key, label, values) => {
+        const row = document.createElement('div');
+        row.className = 'gen-demographic-row';
+        const title = document.createElement('span');
+        title.className = 'gen-demographic-head';
+        title.textContent = label;
+        const chips = document.createElement('div');
+        chips.className = 'gen-demographic-chips';
+        const paint = () => {
+            const selected = key === 'sex' ? value.sex : value.race;
+            for (const button of Array.from(chips.children)) {
+                button.classList.toggle('is-selected', button.dataset.value === selected);
+            }
+            row.classList.toggle('is-set', selected !== undefined);
+        };
+        for (const item of values) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.dataset.value = item;
+            button.textContent = prettyEnum(item);
+            button.onclick = () => {
+                if (key === 'sex') {
+                    value.sex = value.sex === item ? undefined : item;
+                }
+                else {
+                    value.race = value.race === item ? undefined : item;
+                }
+                paint();
+                emit();
+            };
+            chips.appendChild(button);
+        }
+        row.append(title, chips);
+        container.appendChild(row);
+        paint();
+        return paint;
+    };
+    const skip = new Set(opts.omit ?? []);
+    const paints = [
+        !skip.has('age') && addSlider('age', 'Age', 18, 90, 35, (n) => String(n)),
+        !skip.has('income') && addSlider('income', 'Income', 0, 250000, 75000, formatIncome),
+        !skip.has('sex') && addChips('sex', 'Sex', Object.values(Fauna.Ant.Persona.Sex)),
+        !skip.has('race') && addChips('race', 'Race', Object.values(Fauna.Ant.Persona.Race)),
+    ].filter((paint) => Boolean(paint));
+    return {
+        getValue: () => ({ ...value }),
+        setValue: (next) => {
+            value = { ...next };
+            for (const paint of paints)
+                paint();
+        },
+        destroy: () => {
+            container.innerHTML = '';
+            container.classList.remove('gen-demographic');
+        },
+    };
+}

package/dist/src/ui/hover.d.ts

@@ -0,0 +1,6 @@
+export declare function createHoveringElement(elements: HTMLElement[], key?: HTMLElement): HTMLElement;
+export declare function openHovering(element: HTMLElement, position: [number, number]): void;
+export declare function closeHovering(element: HTMLElement): void;
+export declare function createTooltip(target: HTMLElement, text: string, delay?: number): {
+    setText: (next: string) => void;
+};

package/dist/src/ui/hover.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import gsap from "gsap";
+let nextId = 1;
+const POPOVERS = [];
+const TOOLTIPS = [];
+let listener = null;
+function notify() {
+    listener?.();
+}
+// ─── Public API (imperative, unchanged signatures) ────────────────────────────
+// Build a popover menu from pre-rendered nodes. When a `key` element is given,
+// clicking it toggles the popover open/closed beneath it, and the popover is
+// torn down automatically once the key leaves the DOM. Returns a lightweight
+// host element for API compatibility (drive uses the key-driven flow and never
+// touches the return value).
+export function createHoveringElement(elements, key) {
+    ensureMounted();
+    const entry = { id: nextId++, nodes: elements, position: null, open: false };
+    POPOVERS.push(entry);
+    notify();
+    // A detached stand-in so the historical `HTMLElement` return contract holds.
+    const host = document.createElement('div');
+    host.className = 'hover';
+    host.__hoverId = entry.id;
+    if (key) {
+        key.addEventListener('click', (ev) => {
+            ev.stopPropagation();
+            if (entry.open) {
+                closeEntry(entry);
+            }
+            else {
+                const rect = key.getBoundingClientRect();
+                openEntry(entry, [rect.left, rect.top + rect.height]);
+            }
+        });
+        const observer = new MutationObserver(() => {
+            if (!key.isConnected) {
+                removeEntry(entry);
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+    }
+    return host;
+}
+// Programmatically open/close a popover by its host element (kept for API
+// parity with the old exports). Positions are viewport coordinates.
+export function openHovering(element, position) {
+    const entry = POPOVERS.find((p) => p.id === element.__hoverId);
+    if (entry)
+        openEntry(entry, position);
+}
+export function closeHovering(element) {
+    const entry = POPOVERS.find((p) => p.id === element.__hoverId);
+    if (entry)
+        closeEntry(entry);
+}
+// Attach a delayed tooltip to any element. Shows `text` after `delay` ms of
+// hover; hides on leave; self-destructs when the target leaves the DOM.
+export function createTooltip(target, text, delay = 1000) {
+    ensureMounted();
+    const entry = { id: nextId++, text, position: null, visible: false };
+    TOOLTIPS.push(entry);
+    notify();
+    let timer = null;
+    target.addEventListener('mouseenter', () => {
+        timer = setTimeout(() => {
+            const rect = target.getBoundingClientRect();
+            entry.position = [rect.left + rect.width / 2, rect.top - 6];
+            entry.visible = true;
+            notify();
+        }, delay);
+    });
+    target.addEventListener('mouseleave', () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+        entry.visible = false;
+        notify();
+    });
+    const observer = new MutationObserver(() => {
+        if (!target.isConnected) {
+            const idx = TOOLTIPS.indexOf(entry);
+            if (idx >= 0)
+                TOOLTIPS.splice(idx, 1);
+            notify();
+            observer.disconnect();
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return {
+        setText: (next) => {
+            entry.text = next;
+            if (entry.visible)
+                notify();
+        },
+    };
+}
+// ─── Store mutators ────────────────────────────────────────────────────────────
+function openEntry(entry, position) {
+    entry.position = position;
+    entry.open = true;
+    notify();
+}
+function closeEntry(entry) {
+    entry.open = false;
+    notify();
+}
+function removeEntry(entry) {
+    const idx = POPOVERS.indexOf(entry);
+    if (idx >= 0)
+        POPOVERS.splice(idx, 1);
+    notify();
+}
+// ─── Global dismissers (click outside / keydown / resize) ──────────────────────
+if (typeof window !== 'undefined') {
+    window.addEventListener('click', (ev) => {
+        for (let i = POPOVERS.length - 1; i >= 0; i--) {
+            const entry = POPOVERS[i];
+            if (!entry.open)
+                continue;
+            // Don't dismiss when the click lands inside the popover's own nodes.
+            const inside = entry.nodes.some((n) => n.contains(ev.target) || n.parentElement?.contains(ev.target));
+            if (!inside)
+                closeEntry(entry);
+        }
+    });
+    window.addEventListener('keydown', () => {
+        for (const entry of POPOVERS)
+            if (entry.open)
+                closeEntry(entry);
+    });
+    window.addEventListener('resize', () => {
+        for (const entry of POPOVERS)
+            if (entry.open)
+                closeEntry(entry);
+    });
+}
+// ─── React component + self-mount ──────────────────────────────────────────────
+const PORTAL_ID = 'fauna-hover-portal';
+let mounted = false;
+function ensureMounted() {
+    if (mounted || typeof document === 'undefined')
+        return;
+    mounted = true;
+    const host = document.createElement('div');
+    host.id = PORTAL_ID;
+    document.body.appendChild(host);
+    createRoot(host).render(_jsx(HoverRoot, {}));
+}
+function HoverRoot() {
+    const [, force] = useState(0);
+    useEffect(() => {
+        listener = () => force((n) => n + 1);
+        return () => { listener = null; };
+    }, []);
+    return (_jsxs(_Fragment, { children: [POPOVERS.map((entry) => _jsx(HoverPopover, { entry: entry }, entry.id)), TOOLTIPS.map((entry) => _jsx(HoverTooltip, { entry: entry }, entry.id))] }));
+}
+function HoverPopover({ entry }) {
+    const ref = useRef(null);
+    // Host the pre-built nodes verbatim (they carry their own click handlers).
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        for (const node of entry.nodes)
+            el.appendChild(node);
+        return () => {
+            for (const node of entry.nodes)
+                if (node.parentElement === el)
+                    el.removeChild(node);
+        };
+    }, []);
+    // Animate open/close to match the original gsap height/opacity transition.
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        gsap.killTweensOf(el);
+        if (entry.open && entry.position) {
+            gsap.set(el, { left: entry.position[0], top: entry.position[1] });
+            gsap.to(el, { duration: 0.3, opacity: 1, display: 'flex', height: 'auto', ease: 'linear' });
+        }
+        else {
+            gsap.to(el, { duration: 0.3, opacity: 0, display: 'none', height: 0, ease: 'linear' });
+        }
+    }, [entry.open, entry.position]);
+    return _jsx("div", { ref: ref, className: "hover", style: { opacity: 0, display: 'none', height: 0 } });
+}
+function HoverTooltip({ entry }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        gsap.killTweensOf(el);
+        if (entry.visible && entry.position) {
+            el.style.left = `${entry.position[0]}px`;
+            el.style.top = `${entry.position[1]}px`;
+            gsap.to(el, { duration: 0.2, opacity: 1, y: -4, display: 'block', ease: 'power2.out' });
+        }
+        else {
+            gsap.to(el, { duration: 0.15, opacity: 0, y: 0, display: 'none', ease: 'power2.in' });
+        }
+    }, [entry.visible, entry.position]);
+    return _jsx("div", { ref: ref, className: "tooltip", children: entry.text });
+}

package/dist/src/ui/index.d.ts

@@ -0,0 +1,42 @@
+import * as DriveUI from "./drive.js";
+import * as HoverUI from "./hover.js";
+import * as ToastUI from "./toast.js";
+import * as ChatUI from "./chat.js";
+import * as GenerativeUI from "./generative.js";
+import * as TalkUI from "./talk.js";
+import * as TokenizedInputUI from "./tokenized.js";
+import * as IntegrationsUI from "./integrations.js";
+import * as AuthentificationUI from "./authentification.js";
+import * as DeviceUI from "./device.js";
+import * as CursorUI from "./cursor.js";
+import * as TicketsUI from "./tickets.js";
+import * as BrandsUI from "./brands.js";
+import * as BrowserUI from "./browser.js";
+import * as RosterUI from "./roster.js";
+import * as MapsUI from "./maps.js";
+import * as ViewUI from "./view.js";
+export declare namespace UI {
+    function setRoute(route: string): void;
+    function getIP(): string;
+    function getPort(): number;
+    function getRoute(): string;
+    function getURL(): string;
+    function ping(): Promise<number>;
+    export import File = DriveUI;
+    export import Hover = HoverUI;
+    export import Toast = ToastUI;
+    export import Chat = ChatUI;
+    export import Generative = GenerativeUI;
+    export import Talk = TalkUI;
+    export import TokenizedInput = TokenizedInputUI;
+    export import Integrations = IntegrationsUI;
+    export import Authentification = AuthentificationUI;
+    export import Device = DeviceUI;
+    export import Cursor = CursorUI;
+    export import Tickets = TicketsUI;
+    export import Brands = BrandsUI;
+    export import Browser = BrowserUI;
+    export import Roster = RosterUI;
+    export import Maps = MapsUI;
+    export import View = ViewUI;
+}