@signalsupport/sdk 0.0.0-stage → 0.7.1

package/dist/support.d.ts

@@ -0,0 +1,108 @@
+import { SignalClient, type InitOptions } from './client.js';
+import { type Consent, type Diagnostics } from './evidence.js';
+import { type FeedbackKind, type ReporterReport, type ReporterReportDetail, type Severity } from './model.js';
+import { type ReporterApi } from './reporter.js';
+import { type Trail, type TrailEntry } from './trail.js';
+/**
+ * Support, without a UI.
+ *
+ * Everything the panel does, as plain functions and one subscribable state, so
+ * a product can draw its own panel and still get the whole loop: file with
+ * evidence, follow the report, read and answer the team, and confirm the fix.
+ * The widget (`@signalsupport/sdk/widget`) is built on exactly this.
+ */
+export interface SupportConfig extends InitOptions {
+    /**
+     * The build the person is running. Sent with every report, and what decides
+     * whether "does the fix work?" can be asked yet.
+     */
+    appVersion?: string;
+    /** Your own diagnostics, read only when the reporter reaches the Attach step. */
+    diagnostics?: Diagnostics;
+    /** Pass your own trail to share it, or `false` to keep none. */
+    trail?: Trail | false;
+    /** Put uncaught errors in the trail. Observes only; never reports by itself. Default true. */
+    captureErrors?: boolean;
+    /** How often to refresh the reporter's reports while the page is visible. Default 2 minutes. */
+    refreshMs?: number;
+}
+export interface SupportState {
+    /** Null until known. False means reports are anonymous and cannot be followed. */
+    signedIn: boolean | null;
+    loading: boolean;
+    reports: ReporterReport[];
+    /** Reports wanting something from the reporter, or carrying an unread team reply. */
+    attention: number;
+    error: string | null;
+    /** When the reports were last fetched successfully (ms since epoch), for "Updated 12s ago". */
+    updatedAt: number | null;
+}
+export interface IssueDraft {
+    what: string;
+    expected: string;
+    severity: Severity;
+    /** Where in the product. Prefilled from the context's `area`. */
+    area?: string;
+    screenshot?: string;
+    /** What the reporter chose to attach, after seeing it. */
+    include?: Partial<Pick<Consent, 'system' | 'browser' | 'trail' | 'extra' | 'screenshot'>>;
+    /** For an anonymous report: how to reach them, if they want to be reached. */
+    contact?: {
+        name?: string;
+        email?: string;
+    };
+}
+export interface FeedbackDraft {
+    kind: FeedbackKind;
+    body: string;
+    area?: string;
+    screenshot?: string;
+    contact?: {
+        name?: string;
+        email?: string;
+    };
+}
+/** What the Attach step shows, read when the reporter gets there and not before. */
+export interface Collected {
+    system?: Record<string, unknown>;
+    browser?: Record<string, unknown>;
+    trail: TrailEntry[];
+    extra?: Record<string, unknown>;
+}
+export interface Support {
+    readonly client: SignalClient;
+    readonly reporter: ReporterApi;
+    readonly trail: Trail;
+    readonly appVersion?: string;
+    getState(): SupportState;
+    subscribe(listener: (state: SupportState) => void): () => void;
+    refresh(): Promise<void>;
+    context(): Record<string, unknown>;
+    setContext(context: Record<string, unknown>): void;
+    /** Record something the person did, for the trail a report may carry. */
+    record(kind: string, label: string): void;
+    collect(): Promise<Collected>;
+    submitIssue(draft: IssueDraft): Promise<{
+        id: string;
+        ref: string;
+    }>;
+    submitFeedback(draft: FeedbackDraft): Promise<{
+        id: string;
+        ref: string;
+    }>;
+    detail(id: string): Promise<ReporterReportDetail>;
+    reply(id: string, body: string): Promise<ReporterReportDetail>;
+    verify(id: string, works: boolean, note?: string): Promise<ReporterReportDetail>;
+    /**
+     * Take a report back: it sorted itself out, or they no longer need it. A
+     * close, never a delete; the team keeps the report and sees why.
+     */
+    withdraw(id: string, note?: string): Promise<ReporterReportDetail>;
+    /** Whether a report carries a team reply this browser has not opened. */
+    unread(report: ReporterReport): boolean;
+    markSeen(id: string): void;
+    destroy(): void;
+}
+/** The short reference a person can quote: the tail of the id, as the service derives it. */
+export declare function refOf(id: string): string;
+export declare function createSupport(config: SupportConfig): Support;

package/dist/trail.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The last few things that happened, kept in memory and attached to a report
+ * only if the reporter keeps it.
+ *
+ * ⚠ IT ONLY OBSERVES. The error hooks append a line and do nothing else: they
+ * never swallow, never `preventDefault`, and never send anything anywhere. A
+ * listener that quietly transmitted would break the promise the report form
+ * makes on its own Attach step, and would be the first thing someone found in
+ * their DevTools.
+ */
+export type TrailKind = 'click' | 'navigate' | 'edit' | 'error' | 'note' | (string & {});
+export interface TrailEntry {
+    /** Epoch milliseconds. */
+    at: number;
+    kind: TrailKind;
+    label: string;
+}
+export interface Trail {
+    record(kind: TrailKind, label: string, at?: number): void;
+    /** The most recent `count`, oldest first. */
+    recent(count?: number): TrailEntry[];
+    size(): number;
+    clear(): void;
+    /** Put uncaught errors and unhandled rejections into the trail. Returns the undo. */
+    captureErrors(target?: Window): () => void;
+}
+export declare function createTrail(capacity?: number): Trail;

package/dist/widget/app.d.ts

@@ -0,0 +1,31 @@
+import type { Support } from '../support.js';
+import { type Copy } from './copy.js';
+import type { FaqItem, Features, HomeAction } from './ctx.js';
+import type { Layout, UiStore } from './store.js';
+export type { Layout } from './store.js';
+export interface AppProps {
+    ui: UiStore;
+    support: Support;
+    copy: Copy;
+    features: Features;
+    faq: FaqItem[];
+    actions: HomeAction[];
+    layout: Layout;
+    side: 'left' | 'right';
+    launcher: false | {
+        position: 'bottom-right' | 'bottom-left';
+        label?: string;
+    };
+    brand?: {
+        name?: string;
+        logo?: string;
+    };
+    zIndex: number;
+    /** The host's own frame source (a desktop shell); `WidgetConfig.captureFrame`. */
+    captureFrame?: () => Promise<string>;
+    emit: (event: string, detail?: unknown) => void;
+    root: ShadowRoot;
+}
+export declare function App(p: AppProps): import("preact").JSX.Element;
+export declare function renderPanel(mountPoint: HTMLElement, root: ShadowRoot, props: AppProps): void;
+export declare function unmountPanel(mountPoint: HTMLElement): void;

package/dist/widget/copy.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Every word the panel says, overridable one at a time.
+ *
+ * Written from the reporter's side of the table. A product can rename
+ * anything to fit its voice ("Help" instead of "Support", "Ticket" instead of
+ * "Report") without touching layout.
+ */
+export declare const DEFAULT_COPY: {
+    launcher: string;
+    title: string;
+    homeTitle: string;
+    reportAction: string;
+    reportHint: string;
+    feedbackAction: string;
+    feedbackHint: string;
+    faqAction: string;
+    faqHint: string;
+    yourReports: string;
+    refresh: string;
+    updatedAgo: string;
+    upToDate: string;
+    seeAll: string;
+    signedOutReports: string;
+    fixesWaitingOne: string;
+    fixesWaitingMany: string;
+    questionWaiting: string;
+    stepDescribe: string;
+    stepAttach: string;
+    stepReview: string;
+    whatLabel: string;
+    whatHint: string;
+    whatPlaceholder: string;
+    expectedLabel: string;
+    expectedHint: string;
+    expectedPlaceholder: string;
+    severityLabel: string;
+    whereLabel: string;
+    whereHint: string;
+    attachIntro: string;
+    screenshot: string;
+    screenshotNone: string;
+    capture: string;
+    retake: string;
+    capturing: string;
+    pickHint: string;
+    pickCapture: string;
+    system: string;
+    trail: string;
+    trailNone: string;
+    diagnostics: string;
+    contactLabel: string;
+    contactHint: string;
+    namePlaceholder: string;
+    emailPlaceholder: string;
+    attached: string;
+    notAttached: string;
+    next: string;
+    back: string;
+    cancel: string;
+    submitReport: string;
+    reportSent: string;
+    reportSentBody: string;
+    reportSentAnon: string;
+    track: string;
+    done: string;
+    feedbackKindLabel: string;
+    feedbackLabel: string;
+    feedbackPlaceholder: string;
+    sendFeedback: string;
+    thanks: string;
+    thanksBody: string;
+    faqSearch: string;
+    faqEmpty: string;
+    faqNotFound: string;
+    allReports: string;
+    noReports: string;
+    noReportsBody: string;
+    conversation: string;
+    replyPlaceholder: string;
+    send: string;
+    closedNote: string;
+    withdrawAction: string;
+    withdrawTitle: string;
+    withdrawBody: string;
+    withdrawPlaceholder: string;
+    withdrawConfirm: string;
+    withdrawKeep: string;
+    closedReports: string;
+    nothingOpen: string;
+    verifyTitle: string;
+    verifyBody: string;
+    verifyYes: string;
+    verifyNo: string;
+    verifyNoPlaceholder: string;
+    verifySend: string;
+    updateTitle: string;
+    updateBody: string;
+    whatYouReported: string;
+    team: string;
+    you: string;
+    error: string;
+};
+export type Copy = typeof DEFAULT_COPY;
+export declare function fill(text: string, vars: Record<string, string | number>): string;

package/dist/widget/ctx.d.ts

@@ -0,0 +1,75 @@
+import type { CaptureResult } from '../evidence.js';
+import type { Support, SupportState } from '../support.js';
+import type { Copy } from './copy.js';
+export interface FaqItem {
+    q: string;
+    a: string;
+    /** Extra words the search should match. */
+    tags?: string[];
+}
+export interface Features {
+    report: boolean;
+    feedback: boolean;
+    faq: boolean;
+    /** "Your reports". Needs a session; hidden when nobody is signed in. */
+    reports: boolean;
+    /** Offer a screen capture in the report and feedback forms. */
+    screenshot: boolean;
+}
+export type Screen = {
+    name: 'home';
+} | {
+    name: 'report';
+} | {
+    name: 'feedback';
+} | {
+    name: 'faq';
+} | {
+    name: 'reports';
+} | {
+    name: 'detail';
+    id: string;
+} | {
+    name: 'sent';
+    id: string;
+    ref: string;
+} | {
+    name: 'thanks';
+};
+export type View = 'home' | 'report' | 'feedback' | 'faq' | 'reports';
+/**
+ * Where a host's own content can go. Each is a native `<slot>`: what the host
+ * puts there stays in ITS document, so its own CSS and its own framework
+ * render it.
+ */
+export type SlotName = 'header' | 'home-top' | 'home-bottom' | 'report-top' | 'feedback-top' | 'sent' | 'footer';
+export declare const SLOT_NAMES: readonly SlotName[];
+/** An extra entry under "How can we help?": a status page, a community, a sales line. */
+export interface HomeAction {
+    label: string;
+    hint?: string;
+    /** A built-in icon name (`external`, `book`, `message`, …) or an image URL. */
+    icon?: string;
+    /** Opened in a new tab. */
+    href?: string;
+    /** Called on press. The panel stays open; call the widget's `close()` to leave it. */
+    onClick?: () => void;
+}
+/** What every screen is handed. */
+export interface Ctx {
+    support: Support;
+    state: SupportState;
+    /** Changes when the person asks for fresh data; a screen with its own copy reloads on it. */
+    tick: number;
+    copy: Copy;
+    features: Features;
+    faq: FaqItem[];
+    actions: HomeAction[];
+    /** The slots the host has filled; an empty one renders nothing, not a gap. */
+    slots: ReadonlySet<string>;
+    appVersion?: string;
+    go: (screen: Screen) => void;
+    /** Take one frame, stepping the panel out of its own picture. */
+    capture: () => Promise<CaptureResult>;
+    emit: (event: 'submitted' | 'verified' | 'withdrawn', detail: unknown) => void;
+}

package/dist/widget/icons.d.ts

@@ -0,0 +1,38 @@
+/** @jsxImportSource preact */
+/**
+ * The panel's icons: stroked, 24px grid, inheriting `currentColor`, so a theme
+ * colours them without a second set.
+ */
+declare const PATHS: {
+    readonly lifebuoy: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-5a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm2.8-6.8L18.4 5.6M9.2 9.2 5.6 5.6m3.6 9.2-3.6 3.6m9.2-3.6 3.6 3.6";
+    readonly bug: "M9 9V8a3 3 0 0 1 6 0v1M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1-10 0v-3a6 6 0 0 1 1-3ZM3 13h4m10 0h4M12 20v-6M4 19l3.35-2M20 19l-3.35-2M4 7l3.75 2.4M20 7l-3.75 2.4";
+    readonly bulb: "M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7-.7.7M9 16a5 5 0 1 1 6 0 3.5 3.5 0 0 0-1 3 2 2 0 0 1-4 0 3.5 3.5 0 0 0-1-3M9.7 17h4.6";
+    readonly question: "M8 9h8M8 13h6M9 18H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-3l-3 3-3-3Z";
+    readonly chevronRight: "m9 6 6 6-6 6";
+    readonly chevronLeft: "m15 6-6 6 6 6";
+    readonly arrowLeft: "M5 12h14M5 12l6 6M5 12l6-6";
+    readonly x: "M18 6 6 18M6 6l12 12";
+    readonly check: "m5 12 5 5L20 7";
+    readonly checkCircle: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-3-9 2 2 4-4";
+    readonly camera: "M5 7h1a2 2 0 0 0 2-2 1 1 0 0 1 1-1h6a1 1 0 0 1 1 1 2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm7 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z";
+    readonly monitor: "M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5Zm4 15h10M9 16v4m6-4v4";
+    readonly history: "M12 8v4l2 2M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5";
+    readonly cpu: "M5 6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6Zm4 3h6v6H9V9ZM3 10h2m-2 4h2m14-4h2m-2 4h2M10 3v2m4-2v2m-4 14v2m4-2v2";
+    readonly send: "M10 14 21 3M21 3l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3";
+    readonly search: "M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm11 4-6-6";
+    readonly thumbUp: "M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3Zm0 0a4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3";
+    readonly refresh: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4";
+    readonly download: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12";
+    readonly external: "M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1 9-9m-5 0h5v5";
+    readonly book: "M3 19a9 9 0 0 1 9 0 9 9 0 0 1 9 0M3 6a9 9 0 0 1 9 0 9 9 0 0 1 9 0M3 6v13M12 6v13M21 6v13";
+    readonly message: "M8 9h8M8 13h6M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12Z";
+};
+export type IconName = keyof typeof PATHS;
+/** Whether a host-supplied name is one of ours, rather than an image URL. */
+export declare function isIconName(name: string): name is IconName;
+export declare function Icon({ name, size, stroke }: {
+    name: IconName;
+    size?: number;
+    stroke?: number;
+}): import("preact").JSX.Element;
+export {};

package/dist/widget/index.d.ts

@@ -0,0 +1,111 @@
+/**
+ * `@signalsupport/sdk/widget` — the support panel, in any page.
+ *
+ * ```ts
+ * import { mountSupport } from '@signalsupport/sdk/widget';
+ *
+ * const support = mountSupport({
+ *   key: process.env.NEXT_PUBLIC_SIGNAL_KEY_ID,     // anonymous reports
+ *   session: '/api/signal/session',                  // signed-in reporters follow theirs
+ *   appVersion: '2.4.0',
+ *   context: { area: 'Editor' },
+ *   theme: { preset: 'midnight', accent: '#7a50dd' },
+ *   layout: 'drawer',
+ * });
+ *
+ * support.open('report');
+ * support.on('attention', (n) => badge(n));
+ * ```
+ *
+ * It renders into a Shadow DOM: your CSS cannot restyle it by accident and
+ * none of its CSS reaches your page. It works in React, Vue, Svelte or plain
+ * HTML alike, because it owns its own element.
+ *
+ * # IT COSTS ALMOST NOTHING UNTIL SOMEONE NEEDS HELP
+ *
+ * This module is the shell: the element, the state and the badge count. The
+ * panel itself (Preact, every screen, the stylesheet) is a separate chunk,
+ * fetched when the browser is idle after the page has loaded, or the moment
+ * `open()` is called, whichever comes first. A product's first paint never
+ * waits for its support panel.
+ */
+import { type Support, type SupportConfig } from '../support.js';
+import { type Copy } from './copy.js';
+import { type FaqItem, type Features, type HomeAction, type SlotName, type View } from './ctx.js';
+import { type Layout } from './store.js';
+import type { ThemeInput } from './theme.js';
+export { PRESETS, resolveTheme, type PresetName, type Theme, type ThemeInput } from './theme.js';
+export { DEFAULT_COPY, type Copy } from './copy.js';
+export type { FaqItem, Features, HomeAction, SlotName, View } from './ctx.js';
+export { PARTS } from './parts.js';
+export type { Layout } from './store.js';
+export interface WidgetConfig extends SupportConfig {
+    /** A preset name, or tokens on top of one: `{ preset: 'daylight', accent: '#e11d48' }`. */
+    theme?: ThemeInput;
+    /** `drawer` from the side (default), `modal`, `popover` above the launcher, or `sheet` from the bottom. Phones always get a sheet. */
+    layout?: Layout;
+    /** Which side a drawer slides from. */
+    side?: 'left' | 'right';
+    /** A floating button, or `false` when your own control calls `open()`. */
+    launcher?: false | {
+        position?: 'bottom-right' | 'bottom-left';
+        label?: string;
+    };
+    brand?: {
+        name?: string;
+        logo?: string;
+    };
+    features?: Partial<Features>;
+    faq?: FaqItem[];
+    copy?: Partial<Copy>;
+    /** Where the panel's element goes. Default `document.body`. */
+    container?: HTMLElement;
+    zIndex?: number;
+    /** Share a support instance you already created headlessly. */
+    support?: Support;
+    /** Load the panel immediately rather than when the browser is idle. */
+    eager?: boolean;
+    /**
+     * Your own CSS, applied INSIDE the panel after its own, so it wins at equal
+     * specificity. Target the `::part()` names from outside, or `[part~="button"]`
+     * and friends from here. The `sg-` class names are internal and may change.
+     */
+    css?: string;
+    /** Your own content in the panel: an element per slot name. See `slot()`. */
+    slots?: Partial<Record<SlotName, HTMLElement>>;
+    /** Extra entries under "How can we help?", after the built-in ones. */
+    actions?: HomeAction[];
+    /**
+     * Your own picture of your own view, for Capture, in place of the browser's
+     * screen capture. For a product in a desktop shell, where `getDisplayMedia`
+     * opens the shell's own permission dialog: resolve to an image data URL of
+     * the window (WebView2 `CapturePreview`, Electron `capturePage`). Capture
+     * mode is unchanged; there is simply no prompt. Omit it in a browser.
+     */
+    captureFrame?: () => Promise<string>;
+}
+export type WidgetEvent = 'open' | 'close' | 'submitted' | 'verified' | 'withdrawn' | 'attention';
+export interface SupportWidget {
+    open(view?: View): void;
+    close(): void;
+    toggle(view?: View): void;
+    isOpen(): boolean;
+    /** Merge into the context sent with reports (where in the product, which project). */
+    setContext(context: Record<string, unknown>): void;
+    setTheme(theme: ThemeInput): void;
+    /** Replace the CSS given as `css`, live. An empty string removes it. */
+    setCss(css: string): void;
+    /**
+     * The element for one slot, created on first ask. Render into it with
+     * anything: plain DOM, a React portal, Vue's Teleport. It lives in YOUR
+     * document, so your CSS styles it.
+     */
+    slot(name: SlotName): HTMLElement;
+    on(event: WidgetEvent, fn: (detail: unknown) => void): () => void;
+    /** Resolves once the panel's code has loaded and rendered. */
+    ready(): Promise<void>;
+    /** The headless core, for your own badges and buttons. */
+    readonly support: Support;
+    destroy(): void;
+}
+export declare function mountSupport(config: WidgetConfig): SupportWidget;

package/dist/widget/index.js

@@ -0,0 +1 @@
+import{a as e,i as t,n,s as r,t as i}from"../chunks/widget-Bxsz5StK.js";export{r as DEFAULT_COPY,n as PARTS,t as PRESETS,i as mountSupport,e as resolveTheme};

package/dist/widget/parts.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The panel's PUBLIC styling surface: which internal elements are exposed to
+ * the host page as `::part()` names.
+ *
+ * ```css
+ * [data-signal-support]::part(launcher) { border-radius: 8px; }
+ * [data-signal-support]::part(button-primary):hover { filter: none; }
+ * ```
+ *
+ * ⚠ THE PART NAMES ARE THE CONTRACT; THE `sg-` CLASSES ARE NOT. Classes get
+ * renamed when a screen is reworked. A part name only ever gains members, and
+ * removing one is a breaking change to the package. That is why this is one
+ * table, applied from one place, rather than a `part=` typed by hand on each
+ * element: the next screen inherits it without anyone remembering to.
+ *
+ * `::part()` cannot be followed by an attribute selector, so states a host may
+ * want to style differently get a part of their own (`chip-selected`,
+ * `message-you`).
+ */
+export declare const PARTS: Record<string, string>;
+/** The part names one element carries, from its classes and its state. */
+export declare function partsFor(el: Element): string;
+/**
+ * Keep every element's `part` in step with its classes for the life of the
+ * panel. Preact re-renders change classes and aria state in place, so this
+ * watches those attributes as well as new elements.
+ */
+export declare function exposeParts(root: ShadowRoot): () => void;

package/dist/widget/pick.d.ts

@@ -0,0 +1,30 @@
+import type { CaptureResult } from '../evidence.js';
+import type { UiStore } from './store.js';
+/**
+ * Capture mode: the panel steps aside so the person can go to the screen they
+ * mean, and a small bar stays up with Capture and Cancel.
+ *
+ * A capture taken from inside the panel shows whatever was behind it, which is
+ * rarely the screen the report is about. Here the panel is only HIDDEN (still
+ * mounted), so the half-written report survives the person changing tabs,
+ * scrolling or opening a menu in the product, and the panel comes back on the
+ * same step with the frame in it.
+ *
+ * The browser's permission prompt is asked on Capture, not on entering the
+ * mode: Capture is the user gesture `getDisplayMedia` needs, and the stream is
+ * live for one frame rather than for the whole walk round the product.
+ *
+ * `start()` resolves once: with the frame, with `cancelled` (Cancel, Escape,
+ * the panel closed), or with the error that ended it. Declining the browser's
+ * own prompt is NOT an end: the bar stays up, to try again or cancel.
+ */
+export interface Picker {
+    start(): Promise<CaptureResult>;
+    capture(): Promise<void>;
+    cancel(): void;
+    readonly active: boolean;
+}
+export declare function createPicker(ui: UiStore, grab: (hooks: {
+    beforeCapture: () => void;
+    afterCapture: () => void;
+}) => Promise<CaptureResult>, supported: () => boolean): Picker;

package/dist/widget/screens/faq.d.ts

@@ -0,0 +1,8 @@
+import type { Ctx } from '../ctx.js';
+/**
+ * Answers first, a report second. Built on <details>, so it is keyboard
+ * operable, announced correctly, and findable by the browser's own search.
+ */
+export declare function Faq({ w }: {
+    w: Ctx;
+}): import("preact").JSX.Element;

package/dist/widget/screens/feedback.d.ts

@@ -0,0 +1,11 @@
+import type { Ctx } from '../ctx.js';
+/**
+ * Feedback: an idea, a frustration, or something worth protecting.
+ *
+ * Deliberately lighter than a report. It is not a fault to be tracked, so it
+ * asks for one kind and one box, and offers a picture only if the reporter
+ * wants to point at something.
+ */
+export declare function FeedbackForm({ w }: {
+    w: Ctx;
+}): import("preact").JSX.Element;

package/dist/widget/screens/home.d.ts

@@ -0,0 +1,12 @@
+import type { Ctx } from '../ctx.js';
+/**
+ * The first screen: what can be done, and what is waiting on you.
+ *
+ * ⚠ THE EMPTY STATE DRAWS THE JOURNEY. "You have not reported anything" over
+ * an empty panel argues for doing nothing; the same space spent showing what a
+ * report actually does, ending with the reporter's own check, is the strongest
+ * case for filing one, and the only moment it gets read unhurried.
+ */
+export declare function Home({ w }: {
+    w: Ctx;
+}): import("preact").JSX.Element;

package/dist/widget/screens/report.d.ts

@@ -0,0 +1,9 @@
+import type { Ctx } from '../ctx.js';
+export declare function ReportFlow({ w }: {
+    w: Ctx;
+}): import("preact").JSX.Element;
+/** The step rail: a line that fills, because "how much is left" is the question mid-form. */
+export declare function Steps({ step, labels }: {
+    step: number;
+    labels: string[];
+}): import("preact").JSX.Element;

package/dist/widget/screens/reports.d.ts

@@ -0,0 +1,26 @@
+import type { Ctx } from '../ctx.js';
+/**
+ * The reporter's own reports: the list, one report, the conversation, and the
+ * check that closes the loop.
+ *
+ * ⚠ THE CHECK IS THE REASON THIS SCREEN EXISTS. "We think we fixed it, you are
+ * running the build that has the fix, does it work?" can only be asked in the
+ * product, to the person already looking at the thing, and it turns a tracker
+ * into a loop that closes.
+ */
+/**
+ * Open reports first; closed ones folded away under "Closed".
+ *
+ * A closed report is history, and a list where "Closed, you confirmed it"
+ * sits between two live ones makes the live ones harder to see. Folded, not
+ * hidden: one tap shows them, nothing is lost. On the home screen only the
+ * open ones are listed, with a way through to the rest.
+ */
+export declare function ReportList({ w, compact }: {
+    w: Ctx;
+    compact?: boolean;
+}): import("preact").JSX.Element;
+export declare function ReportDetail({ w, id }: {
+    w: Ctx;
+    id: string;
+}): import("preact").JSX.Element;

package/dist/widget/store.d.ts

@@ -0,0 +1,31 @@
+import type { Screen } from './ctx.js';
+import type { ThemeInput } from './theme.js';
+/**
+ * The panel's own state, outside Preact.
+ *
+ * ⚠ IT LIVES IN THE SMALL SHELL, NOT IN THE PANEL CHUNK. The panel is loaded
+ * lazily (see `index.ts`), and a product can call `open()` before that chunk
+ * has arrived. Keeping the state here means the call is remembered and the
+ * panel opens where it was asked to the moment it renders.
+ */
+export type Layout = 'drawer' | 'modal' | 'popover' | 'sheet';
+export interface UiState {
+    open: boolean;
+    history: Screen[];
+    /** Bumped per open: every open starts fresh, never mid-way through an abandoned form. */
+    session: number;
+    hidden: boolean;
+    /** Capture mode: the panel is stepped aside (still mounted) and the capture bar is up. See `pick.ts`. */
+    picking: boolean;
+    theme: ThemeInput | undefined;
+    /** Slot names the host has filled, so the panel only makes room for those. */
+    slots: string[];
+    /** Bumped by the refresh button: a screen holding its own copy (a report) reloads on it. */
+    tick: number;
+}
+export interface UiStore {
+    get(): UiState;
+    set(patch: Partial<UiState>): void;
+    subscribe(fn: () => void): () => void;
+}
+export declare function createUiStore(initial: UiState): UiStore;