@innspel/web 0.0.0 → 0.1.0

package/dist/lib/mount.d.ts

@@ -0,0 +1,52 @@
+import { type InnspelClient, type InnspelOptions } from '@innspel/core';
+import { type InnspelProviderProps } from './InnspelProvider.js';
+import type { ÅpneOpsjoner } from './widget/Widget.js';
+export interface MountOptions extends Omit<InnspelProviderProps, 'client' | 'children'> {
+    /** En ferdig klient fra `init()` — eller opsjonene under, så lager `mount` den. */
+    client?: InnspelClient;
+    baseUrl?: string;
+    tenantKey?: string;
+    identityProvider?: InnspelOptions['identityProvider'];
+    /** Standard er offline-køen i `localStorage` (DD-41). */
+    storage?: InnspelOptions['storage'];
+    /** Vertens bygg — legges på konteksten. Plattform, nettleser og språk settes av pakken. */
+    appVersion?: string;
+    build?: string;
+    textMaxLength?: InnspelOptions['textMaxLength'];
+    minTextLength?: number;
+    screenshotsEnabled?: boolean;
+    /**
+     * Standard er plattformens eget mottak for målemodellen (M4.2): anonymt, aldri tekst,
+     * aldri en tredjepart. `false` skrur det av; et eget objekt med `emit(e)` erstatter det.
+     */
+    telemetry?: InnspelOptions['telemetry'] | false;
+    /** Injiseres i test. Standard er `fetch` i nettleseren. */
+    fetch?: InnspelOptions['fetch'];
+}
+export interface Mounted {
+    client: InnspelClient;
+    open: (options?: ÅpneOpsjoner) => Promise<void>;
+    close: () => void;
+    /**
+     * Gjør vertens egen knapp til inngangen (DD-21): klikk åpner, knappen får
+     * `aria-haspopup="dialog"` og en beskrivelse (DD-47), og fokus kommer tilbake
+     * til den når dialogen lukkes. Returnerer en funksjon som løsner koblingen.
+     */
+    bindTrigger: (knapp: HTMLElement, options?: ÅpneOpsjoner) => () => void;
+    unmount: () => void;
+}
+/**
+ * Vanilla-inngangen: monter dialogen i et element, og bind vertens knapp.
+ *
+ * @example
+ * ```ts
+ * const innspel = mount(document.getElementById('innspel')!, {
+ *   baseUrl: 'https://api.innspel.example',
+ *   tenantKey: 'ik_pub_xxxxxxxx',
+ *   identityProvider: hentFeedbackToken,   // eller null = anonym modus
+ *   appVersion: '2.4.1',
+ * });
+ * innspel.bindTrigger(document.getElementById('send-innspill')!);
+ * ```
+ */
+export declare function mount(el: HTMLElement, options: MountOptions): Mounted;

package/dist/lib/skjermbilde/fil.d.ts

@@ -0,0 +1,14 @@
+import type { Fangst } from './typer.js';
+/**
+ * «Last opp bilde»: PNG eller JPEG fra fil. Bildet dekodes til en bitmap her —
+ * det er dekodingen som gjør at EXIF (posisjon, kamera, tidspunkt) er borte når
+ * bildet re-enkodes ved komposisjon (K4). Plattformen stripper igjen (K9).
+ *
+ * Grensene sjekkes før dekoding, med feltnavn, slik kjernen gjør for vedlegget:
+ * type mot PNG/JPEG og størrelse mot taket. Ingen private felter — bildet er
+ * ikke fra siden, så DD-39 har ingenting å måle.
+ */
+export declare function lesBildefil(fil: Blob & {
+    type: string;
+    name?: string;
+}): Promise<Fangst>;

package/dist/lib/skjermbilde/komposisjon.d.ts

@@ -0,0 +1,28 @@
+import { type AttachmentInput, type MaskRect } from '@innspel/core';
+import type { Fangst } from './typer.js';
+export interface Maskering {
+    /** Private felter — kan ikke fjernes (DD-39). */
+    automasker: MaskRect[];
+    /** Innsenderens egne: «Masker felt» og «Tegn over» (DD-40). */
+    egne: MaskRect[];
+    /** «Masker all tekst» (DD-40). */
+    allTekst: boolean;
+}
+/**
+ * Komposisjonen er det som lastes opp (K4): bitmapen med alle maskene tegnet
+ * INN i pikslene, re-enkodet som JPEG. Rå-bitmapen brukes bare til
+ * forhåndsvisningen og forlater aldri widgeten.
+ *
+ * Fargene er `screenRules` fra temaet (theme/theme.ts) — det ene stedet
+ * paletten ikke gjelder, fordi maskene skal være synlige uansett hva bildet
+ * inneholder. De leses fra CSS-variablene så tallet bor ett sted.
+ */
+export declare function komponer(fangst: Fangst, maskering: Maskering, farger?: {
+    auto: string;
+    egen: string;
+}): Promise<AttachmentInput>;
+/** Maskefargene fra tokens.css. Reserven er de samme tallene som i theme.ts, for et dokument uten stilarket. */
+export declare function lesMaskefarger(): {
+    auto: string;
+    egen: string;
+};

package/dist/lib/skjermbilde/renderer.d.ts

@@ -0,0 +1,57 @@
+import type { MaskRect } from '@innspel/core';
+import { type Fangst, type ScreenshotAdapter } from './typer.js';
+/**
+ * Pakkens egen klientside-renderer: «Ta bilde av siden» uten at én byte av DOM-en
+ * forlater nettleseren (K4), og uten en tredjepartsavhengighet (K19). Valget og
+ * de forkastede alternativene står i tech-decisions.md, «M1.5».
+ *
+ * Mekanikken er SVG `foreignObject`: DOM-en klones, beregnede stiler skrives
+ * inn som inline-stil på hver node, klonen legges i en `<foreignObject>` i en
+ * SVG med viewportens mål, SVG-en lastes som et bilde og tegnes til en canvas.
+ * Tre ting skjer FØR serialisering, og det er de som gjør rendreren trygg:
+ *
+ * - Widgeten selv (`data-innspel-widget`) fjernes fra klonen.
+ * - Private felter (`data-innspel-private`, DD-39) tømmes i klonen OG måles i
+ *   originalen, så de er maskert i bitmapen selv om geometrien skulle sprike.
+ * - Bilder erstattes: same-origin tegnes inn som data-URL, alt annet blir en
+ *   nøytral flate. Et bilde fra en annen origin forgifter canvasen — og er
+ *   uansett ikke vertens eget innhold.
+ *
+ * Webfonter lastes ikke inn i SVG-bildet; teksten faller tilbake på systemfont.
+ * Layouten er den samme, og det er layouten som er verdien i et skjermbilde.
+ */
+export interface Klon {
+    klon: HTMLElement;
+    /** Private felter i CSS-piksler relativt til viewporten. */
+    automasker: MaskRect[];
+    /** Tekstlinjer i CSS-piksler relativt til viewporten. */
+    tekstRekter: MaskRect[];
+}
+/**
+ * Lager klonen som skal rendres. Ren DOM, ingen canvas — så den kan testes i
+ * jsdom: widgeten er borte, private felter er tomme, og geometrien deres er målt.
+ */
+export declare function klonForBilde(rot: HTMLElement, viewport: {
+    width: number;
+    height: number;
+}): Klon;
+/** SVG-markupen med klonen i en foreignObject, forskjøvet så viewporten er det som vises. */
+export declare function serialiserSvg(klon: HTMLElement, viewport: {
+    width: number;
+    height: number;
+}, scroll: {
+    x: number;
+    y: number;
+}, bakgrunn: string): string;
+/** Største skala som holder bildet innenfor 4096² (K9) — og aldri over enhetens egen. */
+export declare function velgSkala(viewport: {
+    width: number;
+    height: number;
+}, dpr: number, tak?: number): number;
+/**
+ * «Ta bilde av siden»: viewporten slik innsenderen ser den, med widgeten
+ * utelatt og private felter maskert (K4, DD-39).
+ */
+export declare function renderPage(rot?: HTMLElement): Promise<Fangst>;
+/** Adapteren pakken bruker når verten ikke gir sin egen. */
+export declare const standardAdapter: ScreenshotAdapter;

package/dist/lib/skjermbilde/typer.d.ts

@@ -0,0 +1,37 @@
+import type { MaskRect } from '@innspel/core';
+/** Attributtet verten setter på det som aldri skal med på et bilde (DD-39). */
+export declare const PRIVAT_ATTRIBUTT = "data-innspel-private";
+/** Attributtet widgeten setter på seg selv, så den aldri kommer med på bildet. */
+export declare const WIDGET_ATTRIBUTT = "data-innspel-widget";
+/**
+ * Et bilde klart til forhåndsvisning: en bitmap og de private feltenes
+ * rektangler i bildets piksler. Rå-bitmapen forlater aldri widgeten — det som
+ * lastes opp er komposittet med maskene (K4).
+ */
+export interface Fangst {
+    bilde: CanvasImageSource;
+    width: number;
+    height: number;
+    /** Private felter (DD-39), alt i bildets piksler. Tomt for en opplastet fil. */
+    automasker: MaskRect[];
+    /**
+     * Tekstlinjene på siden i bildets piksler — det «Masker all tekst» dekker
+     * (DD-40). Utelatt for en opplastet fil; da pikseleres hele bildet i stedet.
+     */
+    tekstRekter?: MaskRect[];
+    kilde: 'side' | 'fil';
+}
+/**
+ * Fangst av siden. Pakken har sin egen (`renderPage` i renderer.ts, SVG
+ * foreignObject, null avhengigheter — K19), og verten kan bytte den ut med
+ * f.eks. html-to-image gjennom denne adapteren (tech-decisions.md, «M1.5»),
+ * samme mønster som `createScreenshotAdapter` i React Native.
+ */
+export interface ScreenshotAdapter {
+    /**
+     * Fanger `rot` (typisk `document.body`) uten elementer merket
+     * `data-innspel-widget`. Private felter returneres som rektangler i BILDETS
+     * piksler, så widgeten kan maskere dem uansett hvem som rendret.
+     */
+    capture(rot: HTMLElement): Promise<Fangst>;
+}

package/dist/lib/style.css

@@ -0,0 +1,2 @@
+:root{--innspel-color-bg: #F6F7F9;--innspel-color-surface: #FFFFFF;--innspel-color-surface-raised: #EDEFF3;--innspel-color-border: #D2D7DE;--innspel-color-border-strong: #B9C0C9;--innspel-color-border-interactive: #6F7883;--innspel-color-text-primary: #14181D;--innspel-color-text-secondary: #454D57;--innspel-color-text-muted: #5C6470;--innspel-color-text-disabled: #9AA2AD;--innspel-color-action-primary: #0A6673;--innspel-color-on-action-primary: #FFFFFF;--innspel-color-action-secondary-border: #6F7883;--innspel-color-action-secondary-text: #14181D;--innspel-color-brand: #0A6673;--innspel-color-on-brand: #FFFFFF;--innspel-color-brand-fill: #0A6673;--innspel-color-on-brand-fill: #FFFFFF;--innspel-color-brand-bg: #E0F0F2;--innspel-color-danger: #B3001B;--innspel-color-danger-fill: #B3001B;--innspel-color-on-danger-fill: #FFFFFF;--innspel-color-danger-bg: #FCE8EA;--innspel-color-success: #04693C;--innspel-color-on-success: #FFFFFF;--innspel-color-success-bg: #E4F4EC;--innspel-color-warning: #7A5200;--innspel-color-on-warning: #FFFFFF;--innspel-color-warning-bg: #FBF1DE;--innspel-color-info: #00588F;--innspel-color-on-info: #FFFFFF;--innspel-color-info-bg: #E4F0F8;--innspel-color-neutral: #5C6470;--innspel-color-on-neutral: #FFFFFF;--innspel-color-neutral-bg: #EEF0F3;--innspel-color-scrim: rgba(10, 14, 18, .45);--innspel-space-xs: 4px;--innspel-space-sm: 8px;--innspel-space-md: 16px;--innspel-space-lg: 24px;--innspel-space-xl: 32px;--innspel-space-xxl: 48px;--innspel-radius-sm: 6px;--innspel-radius-md: 8px;--innspel-radius-lg: 12px;--innspel-radius-pill: 999px;--innspel-font-display: 40px;--innspel-font-h1: 24px;--innspel-font-h2: 21px;--innspel-font-h3: 18px;--innspel-font-body: 16px;--innspel-font-small: 13px;--innspel-font-tiny: 11px;--innspel-line-height-display: 48px;--innspel-line-height-h1: 30px;--innspel-line-height-h2: 27px;--innspel-line-height-h3: 24px;--innspel-line-height-body: 24px;--innspel-line-height-small: 18px;--innspel-line-height-tiny: 16px;--innspel-weight-regular: 400;--innspel-weight-medium: 500;--innspel-weight-semibold: 600;--innspel-weight-bold: 700;--innspel-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;--innspel-motion-fast: .12s;--innspel-motion-base: .2s;--innspel-motion-slow: .32s;--innspel-icon-inline: 20px;--innspel-icon-minste: 16px;--innspel-layout-touch: 48px;--innspel-layout-screen-padding: 24px;--innspel-layout-hairline: 1px;--innspel-layout-breakpoint: 768px;--innspel-layout-breakpoint-smal: 900px;--innspel-layout-content-width: 1120px;--innspel-layout-reading-width: 720px;--innspel-screen-brush-fill: #E5007D;--innspel-screen-auto-mask-fill: #101114;--innspel-screen-auto-mask-stroke: #E5007D;--innspel-screen-preview-backdrop: #000000;--innspel-screen-brush-width: 28;--innspel-screen-text-blur-radius: 24}[data-innspel-theme=dark]{--innspel-color-bg: #111417;--innspel-color-surface: #1A1E22;--innspel-color-surface-raised: #232830;--innspel-color-border: #2E343B;--innspel-color-border-strong: #3D444D;--innspel-color-border-interactive: #7C8894;--innspel-color-text-primary: #F2F4F6;--innspel-color-text-secondary: #B4BCC5;--innspel-color-text-muted: #8D96A1;--innspel-color-text-disabled: #5A626B;--innspel-color-action-primary: #5AD3E2;--innspel-color-on-action-primary: #04252A;--innspel-color-action-secondary-border: #7C8894;--innspel-color-action-secondary-text: #F2F4F6;--innspel-color-brand: #5AD3E2;--innspel-color-on-brand: #04252A;--innspel-color-brand-fill: #0E7C8C;--innspel-color-on-brand-fill: #FFFFFF;--innspel-color-brand-bg: #0C2A30;--innspel-color-danger: #FF7A8C;--innspel-color-danger-fill: #C4001F;--innspel-color-on-danger-fill: #FFFFFF;--innspel-color-danger-bg: #2C1116;--innspel-color-success: #3ED88A;--innspel-color-on-success: #062015;--innspel-color-success-bg: #0E2A1E;--innspel-color-warning: #FFC24D;--innspel-color-on-warning: #2A1C02;--innspel-color-warning-bg: #2C2107;--innspel-color-info: #5CC0FF;--innspel-color-on-info: #04222F;--innspel-color-info-bg: #0E2531;--innspel-color-neutral: #A3ACB6;--innspel-color-on-neutral: #111417;--innspel-color-neutral-bg: #242A31;--innspel-color-scrim: rgba(0, 0, 0, .72)}
+.innspel-rot{font-family:var(--innspel-family-base);font-size:var(--innspel-font-body);line-height:var(--innspel-line-height-body);color:var(--innspel-color-text-primary);box-sizing:border-box}.innspel-rot *,.innspel-rot *:before,.innspel-rot *:after{box-sizing:inherit}.innspel-rot button,.innspel-rot textarea,.innspel-rot input{font:inherit;color:inherit}.innspel-rot :focus-visible{outline:calc(2 * var(--innspel-layout-hairline)) solid var(--innspel-color-text-primary);outline-offset:var(--innspel-space-xs)}.innspel-scrim{position:fixed;inset:0;background:var(--innspel-color-scrim);z-index:2147483000;display:flex;align-items:flex-start;justify-content:center;padding:var(--innspel-space-xl) var(--innspel-space-md)}.innspel-scrim[data-form=bunnark]{align-items:flex-end;padding:0}.innspel-dialog{background:var(--innspel-color-bg);color:var(--innspel-color-text-primary);border:var(--innspel-layout-hairline) solid var(--innspel-color-border-strong);border-radius:var(--innspel-radius-lg);width:100%;max-width:calc(9 * var(--innspel-layout-touch) + 2 * var(--innspel-space-md));max-height:100%;display:flex;flex-direction:column;overflow:hidden}.innspel-scrim[data-form=bunnark] .innspel-dialog{max-width:none;max-height:88%;border-radius:calc(2 * var(--innspel-radius-lg)) calc(2 * var(--innspel-radius-lg)) 0 0;border-bottom:none}.innspel-dialog-hode{display:flex;align-items:center;justify-content:space-between;padding:var(--innspel-space-sm) var(--innspel-space-sm) var(--innspel-space-sm) var(--innspel-space-md);border-bottom:var(--innspel-layout-hairline) solid var(--innspel-color-border);min-height:var(--innspel-layout-touch)}.innspel-dialog-tittel{font-size:var(--innspel-font-small);color:var(--innspel-color-text-secondary)}.innspel-handtak{width:var(--innspel-layout-touch);height:var(--innspel-space-xs);border-radius:var(--innspel-radius-pill);background:var(--innspel-color-border-interactive);margin:0 auto}.innspel-dialog-kropp{flex:1;overflow-y:auto;padding:var(--innspel-space-md);display:flex;flex-direction:column;gap:var(--innspel-space-md);min-height:0}.innspel-dialog-fot{padding:var(--innspel-space-md);border-top:var(--innspel-layout-hairline) solid var(--innspel-color-border);background:var(--innspel-color-surface);display:flex;flex-direction:column;gap:var(--innspel-space-sm)}.innspel-knapp-ramme{display:flex;flex-direction:column;gap:var(--innspel-space-xs)}.innspel-knapp-ramme[data-grow=true]{flex:1}.innspel-knapp{width:100%;min-height:var(--innspel-layout-touch);padding:0 var(--innspel-space-md);border-radius:var(--innspel-radius-md);border:var(--innspel-layout-hairline) solid transparent;font-weight:var(--innspel-weight-semibold);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--innspel-space-sm);background:transparent;text-align:center}.innspel-knapp[data-variant=primary]{background:var(--innspel-color-action-primary);color:var(--innspel-color-on-action-primary);border-color:var(--innspel-color-action-primary)}.innspel-knapp[data-variant=secondary]{color:var(--innspel-color-action-secondary-text);border-color:var(--innspel-color-action-secondary-border)}.innspel-knapp[data-variant=ghost]{color:var(--innspel-color-text-secondary)}.innspel-knapp[data-variant=danger]{color:var(--innspel-color-danger);border-color:var(--innspel-color-danger)}.innspel-knapp[data-tall=true]{min-height:calc(1.5 * var(--innspel-layout-touch))}.innspel-knapp:disabled{background:var(--innspel-color-surface-raised);color:var(--innspel-color-text-disabled);border-color:var(--innspel-color-border);cursor:not-allowed}.innspel-ikonknapp{min-width:var(--innspel-layout-touch);min-height:var(--innspel-layout-touch);background:transparent;border:none;color:var(--innspel-color-text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--innspel-space-xs);font-size:var(--innspel-font-small);border-radius:var(--innspel-radius-md)}.innspel-h{display:flex;flex-direction:column;gap:var(--innspel-space-xs)}.innspel-h>h2,.innspel-h>h1{margin:0;font-size:var(--innspel-font-h2);line-height:var(--innspel-line-height-h2);font-weight:var(--innspel-weight-semibold);color:var(--innspel-color-text-primary)}.innspel-hint{margin:0;font-size:var(--innspel-font-small);line-height:var(--innspel-line-height-small);color:var(--innspel-color-text-muted)}.innspel-p{margin:0;font-size:var(--innspel-font-body);line-height:var(--innspel-line-height-body);color:var(--innspel-color-text-primary)}.innspel-kort{background:var(--innspel-color-surface);border:var(--innspel-layout-hairline) solid var(--innspel-color-border);border-radius:var(--innspel-radius-lg);padding:var(--innspel-space-md);display:flex;flex-direction:column;gap:var(--innspel-space-sm)}.innspel-kort[data-stiplet=true]{border-style:dashed}.innspel-pille{display:inline-flex;align-items:center;align-self:flex-start;gap:var(--innspel-space-xs);padding:var(--innspel-space-xs) var(--innspel-space-sm);border-radius:var(--innspel-radius-pill);font-size:var(--innspel-font-small);font-weight:var(--innspel-weight-medium)}.innspel-pille[data-farge=info]{color:var(--innspel-color-info);background:var(--innspel-color-info-bg)}.innspel-pille[data-farge=success]{color:var(--innspel-color-success);background:var(--innspel-color-success-bg)}.innspel-pille[data-farge=warning]{color:var(--innspel-color-warning);background:var(--innspel-color-warning-bg)}.innspel-pille[data-farge=neutral]{color:var(--innspel-color-neutral);background:var(--innspel-color-neutral-bg)}.innspel-pille[data-farge=danger]{color:var(--innspel-color-danger);background:var(--innspel-color-danger-bg)}.innspel-banner{display:flex;gap:var(--innspel-space-sm);align-items:flex-start;border-radius:var(--innspel-radius-md);padding:var(--innspel-space-sm) var(--innspel-space-md);font-size:var(--innspel-font-small);line-height:var(--innspel-line-height-small);font-weight:var(--innspel-weight-medium)}.innspel-banner>p{margin:0;flex:1}.innspel-banner[data-tone=info]{color:var(--innspel-color-info);background:var(--innspel-color-info-bg)}.innspel-banner[data-tone=success]{color:var(--innspel-color-success);background:var(--innspel-color-success-bg)}.innspel-banner[data-tone=warning]{color:var(--innspel-color-warning);background:var(--innspel-color-warning-bg)}.innspel-banner[data-tone=danger]{color:var(--innspel-color-danger);background:var(--innspel-color-danger-bg)}.innspel-skjelett{height:var(--innspel-space-lg);width:100%;border-radius:var(--innspel-radius-sm);background:var(--innspel-color-surface-raised)}.innspel-skjelett[data-hoy=true]{height:calc(2 * var(--innspel-layout-touch))}.innspel-rad{display:flex;gap:var(--innspel-space-sm)}.innspel-rad[data-gap=md]{gap:var(--innspel-space-md)}.innspel-stabel{display:flex;flex-direction:column;gap:var(--innspel-space-md)}.innspel-stabel[data-gap=sm]{gap:var(--innspel-space-sm)}.innspel-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--innspel-space-sm)}.innspel-flate{flex:1;min-height:calc(2.5 * var(--innspel-layout-touch));background:var(--innspel-color-surface);border:var(--innspel-layout-hairline) solid var(--innspel-color-border-strong);border-radius:var(--innspel-radius-lg);color:var(--innspel-color-text-primary);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--innspel-space-sm);padding:var(--innspel-space-md)}.innspel-flate-ikon{font-size:var(--innspel-font-h1)}.innspel-flate-tittel{font-size:var(--innspel-font-h3);font-weight:var(--innspel-weight-semibold)}.innspel-flate-under{font-size:var(--innspel-font-small);color:var(--innspel-color-text-muted);text-align:center}.innspel-kjent-tittel{margin:0;font-weight:var(--innspel-weight-medium)}.innspel-kjent-omvei{margin:0;font-size:var(--innspel-font-small);line-height:var(--innspel-line-height-small);color:var(--innspel-color-text-secondary)}.innspel-kjent-svar{display:flex;gap:var(--innspel-space-sm);flex-wrap:wrap}.innspel-felt{display:flex;flex-direction:column;gap:var(--innspel-space-sm)}.innspel-felt-etikett{font-size:var(--innspel-font-h3);font-weight:var(--innspel-weight-semibold)}.innspel-tekstfelt{width:100%;min-height:calc(2 * var(--innspel-layout-touch));background:var(--innspel-color-surface-raised);border:var(--innspel-layout-hairline) solid var(--innspel-color-border-strong);border-radius:var(--innspel-radius-md);padding:var(--innspel-space-md);color:var(--innspel-color-text-primary);resize:vertical}.innspel-tekstfelt::placeholder{color:var(--innspel-color-text-muted)}.innspel-tekstfelt[data-full=true]{border-color:var(--innspel-color-warning)}.innspel-utfall{flex:1;min-height:var(--innspel-layout-touch);padding:var(--innspel-space-sm);font:inherit;font-size:var(--innspel-font-small);color:var(--innspel-color-text-primary);background:var(--innspel-color-surface-raised);border:var(--innspel-layout-hairline) solid var(--innspel-color-border-strong);border-radius:var(--innspel-radius-md);cursor:pointer}.innspel-utfall[data-aktiv=true]{font-weight:var(--innspel-weight-semibold);background:var(--innspel-color-brand-bg);border-color:var(--innspel-color-brand)}.innspel-teller{align-self:flex-end;font-size:var(--innspel-font-small);color:var(--innspel-color-text-muted)}.innspel-teller[data-full=true]{color:var(--innspel-color-warning)}.innspel-chip{display:flex;align-items:center;gap:var(--innspel-space-sm);min-height:var(--innspel-layout-touch);border:var(--innspel-layout-hairline) solid var(--innspel-color-border-interactive);border-radius:var(--innspel-radius-pill);padding:0 var(--innspel-space-xs) 0 var(--innspel-space-md);font-size:var(--innspel-font-small)}.innspel-chip>span{flex:1}.innspel-kontekst{border-top:var(--innspel-layout-hairline) solid var(--innspel-color-border);padding-top:var(--innspel-space-sm)}.innspel-kontekst-bryter{width:100%;min-height:calc(var(--innspel-layout-touch) - var(--innspel-space-sm));background:transparent;border:none;color:var(--innspel-color-text-secondary);font-size:var(--innspel-font-small);display:flex;align-items:center;gap:var(--innspel-space-sm);cursor:pointer;padding:0;text-align:left;border-radius:var(--innspel-radius-sm)}.innspel-kontekst-linje{display:flex;align-items:center;gap:var(--innspel-space-sm);min-height:calc(var(--innspel-layout-touch) - var(--innspel-space-sm));border-bottom:var(--innspel-layout-hairline) solid var(--innspel-color-border);font-size:var(--innspel-font-small)}.innspel-kontekst-nokkel{color:var(--innspel-color-text-muted);min-width:calc(2 * var(--innspel-layout-touch))}.innspel-kontekst-verdi{flex:1;color:var(--innspel-color-text-primary);overflow-wrap:anywhere}.innspel-varsel{display:flex;flex-direction:column;gap:var(--innspel-space-sm);background:var(--innspel-color-warning-bg);color:var(--innspel-color-warning);border-radius:var(--innspel-radius-md);padding:var(--innspel-space-sm) var(--innspel-space-md);font-size:var(--innspel-font-small);line-height:var(--innspel-line-height-small);font-weight:var(--innspel-weight-medium)}.innspel-varsel>p{margin:0}.innspel-verktoy{flex:1;min-height:var(--innspel-layout-touch);background:transparent;border:var(--innspel-layout-hairline) solid var(--innspel-color-action-secondary-border);border-bottom-width:calc(2 * var(--innspel-layout-hairline));border-radius:var(--innspel-radius-md);color:var(--innspel-color-text-primary);font-size:var(--innspel-font-small);cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--innspel-space-xs);padding:var(--innspel-space-xs)}.innspel-verktoy[aria-pressed=true]{background:var(--innspel-color-surface-raised);border-bottom-color:var(--innspel-color-text-primary);font-weight:var(--innspel-weight-semibold)}.innspel-forhandsvisning-ramme{background:var(--innspel-screen-preview-backdrop);border-radius:var(--innspel-radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:calc(4 * var(--innspel-layout-touch))}.innspel-forhandsvisning{position:relative;display:block;max-width:100%;touch-action:none;cursor:crosshair}.innspel-forhandsvisning>canvas{display:block;max-width:100%;height:auto}.innspel-maske{position:absolute;pointer-events:none}.innspel-maske[data-art=auto]{background:var(--innspel-screen-auto-mask-fill);border:calc(2 * var(--innspel-layout-hairline)) solid var(--innspel-screen-auto-mask-stroke);color:var(--innspel-color-text-secondary);font-size:var(--innspel-font-small);display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}.innspel-maske[data-art=egen]{background:var(--innspel-screen-brush-fill)}.innspel-skjult-fil{position:absolute;width:var(--innspel-layout-hairline);height:var(--innspel-layout-hairline);opacity:0;overflow:hidden}.innspel-kvittering{margin:auto 0;text-align:center;display:flex;flex-direction:column;gap:var(--innspel-space-md);align-items:center}.innspel-kvittering-ikon{font-size:calc(2 * var(--innspel-font-h1));color:var(--innspel-color-success)}.innspel-kvittering-ikon[data-tone=neutral]{color:var(--innspel-color-neutral)}.innspel-svar{border-left:calc(2 * var(--innspel-layout-hairline)) solid var(--innspel-color-brand);padding-left:var(--innspel-space-sm);display:flex;flex-direction:column;gap:var(--innspel-space-xs)}.innspel-svar-fra{font-size:var(--innspel-font-small);color:var(--innspel-color-text-secondary)}.innspel-svar-tekst{margin:0;font-size:var(--innspel-font-small);line-height:var(--innspel-line-height-small);color:var(--innspel-color-text-primary)}.innspel-sr{position:absolute;width:var(--innspel-layout-hairline);height:var(--innspel-layout-hairline);padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:no-preference){.innspel-dialog{animation:innspel-inn var(--innspel-motion-base) ease-out}@keyframes innspel-inn{0%{opacity:0;transform:translateY(var(--innspel-space-md))}to{opacity:1;transform:none}}}

package/dist/lib/tema.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Legger tokens.css og pakkens stilark inn i `<head>` én gang. Verter med en
+ * `style-src` uten `'unsafe-inline'` importerer CSS-en selv i stedet og setter
+ * `injectStyles: false`. Tokens er GENERERT fra theme/theme.ts (M0.4) — dette
+ * er den ene lovlige veien til en farge (CLAUDE.md, «Styling»).
+ */
+export declare function ensureStyles(doc?: Document): void;
+/** Stilarket som tekst, for verter som vil legge det inn selv. */
+export declare const css: string;

package/dist/lib/widget/Dialog.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+/**
+ * DD-47 — «Widgeten er en dialog og oppfører seg som en.» `role="dialog"`,
+ * `aria-modal`, fokus inn ved åpning og FANGET der, ESC og ✕ lukker, fokus
+ * tilbake til vertens knapp ved lukking. Vertens innhold får `inert` bak
+ * dialogen, så skjermlesere ikke ser det.
+ *
+ * Form: modal på desktop, bunnark på smal skjerm — målt med `matchMedia` mot
+ * `--innspel-layout-breakpoint` fra tokens, aldri user-agent. Samme flyt, annen
+ * form (wireframe 2b, mobilraden).
+ *
+ * `data-innspel-widget` på rota gjør at skjermbilde-rendreren utelater
+ * dialogen fra bildet (K4).
+ */
+export declare function Dialog({ open, onClose, children, footer, colorScheme, returnFocusTo, }: {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    footer?: ReactNode;
+    colorScheme?: 'dark' | 'light';
+    /** Elementet fokus skal tilbake til ved lukking — vertens knapp (DD-47). */
+    returnFocusTo?: HTMLElement | null;
+}): import("react").JSX.Element | null;

package/dist/lib/widget/Felt.d.ts

@@ -0,0 +1,32 @@
+import type { ContextInput, KnownIssueCard, PatternFinding } from '@innspel/core';
+/**
+ * 2d + 2e — feltet og kontekstlinja. Ett felt, ingenting annet.
+ *
+ * DD-44: send er inaktiv under `minTextLength`, og det er det ENESTE kravet.
+ * DD-45: placeholderen stiller to spørsmål i feilsporet. DD-46: mønstervarselet
+ * vises FØR sending og fjerner aldri noe selv. DD-05: konteksten er synlig og
+ * fjernbar linje for linje — fem linjer på web (K5; tech-decisions.md, «M1.5»).
+ * Ctrl+Enter sender (wireframe 2d).
+ */
+export declare function Felt({ spor, verdi, onEndre, minTextLength, textMaxLength, kontekst, fjernedeFelter, onFjernKontekst, lenketTil, onFjernLenke, funn, onSend, sender, onTaBilde, onLastOppBilde, harVedlegg, onFjernVedlegg, }: {
+    spor: 'feil' | 'onske';
+    verdi: string;
+    onEndre: (v: string) => void;
+    minTextLength: number;
+    textMaxLength: number;
+    kontekst: ContextInput & {
+        sdkVersion: string;
+    };
+    fjernedeFelter: string[];
+    onFjernKontekst: (felt: string) => void;
+    lenketTil?: KnownIssueCard;
+    onFjernLenke?: () => void;
+    funn: PatternFinding[];
+    onSend: () => void;
+    sender?: boolean;
+    /** Skjermbilde-steget (2f, K4). Utelatt = steget finnes ikke (DD-26). Aldri en deaktivert knapp. */
+    onTaBilde?: () => void;
+    onLastOppBilde?: (fil: File) => void;
+    harVedlegg?: boolean;
+    onFjernVedlegg?: () => void;
+}): import("react").JSX.Element;

package/dist/lib/widget/KjenteFeil.d.ts

@@ -0,0 +1,18 @@
+import type { KnownIssueCard } from '@innspel/core';
+/**
+ * 2c — kjente feil. Vises FØR feltet i feilsporet, ETTER i ønskesporet (DD-02).
+ * Tre svar per kort (DD-29): «Ja, jeg også» · «Ligner, men ikke helt» · «Nei,
+ * det er noe annet». Kortet er en `group`, ikke én knapp: tre svar må være tre
+ * fokusstopp, og hver knapp bærer kortets tittel i etiketten.
+ *
+ * Treffene er et tilbud, aldri en sperre: tom liste og feilet oppslag hoppes
+ * over uten melding (håndteres i Widget).
+ */
+export declare function KjenteFeil({ kort, spor, laster, onJaOgsa, onLigner, onNei, }: {
+    kort: KnownIssueCard[];
+    spor: 'feil' | 'onske';
+    laster?: boolean;
+    onJaOgsa: (k: KnownIssueCard) => void;
+    onLigner: (k: KnownIssueCard) => void;
+    onNei: () => void;
+}): import("react").JSX.Element;

package/dist/lib/widget/Kvittering.d.ts

@@ -0,0 +1,16 @@
+export type KvitteringArt = 'feil' | 'onske' | 'anonym' | 'jaOgsa' | 'kø';
+/**
+ * 2g — kvitteringen. Den LOVER noe, per spor (DD-07), og saksnummeret er der så
+ * innsenderen kan vise til det hos support. Anonym modus lover ikke svar, men
+ * saken teller. Ingen «vurder appen», ingen oppfordring til å dele.
+ *
+ * DD-42: feilet vedlegget, er saken likevel sendt. DD-47: live-region, og fokus
+ * lander på «Lukk» — Enter lukker.
+ */
+export declare function Kvittering({ art, saksnummer, vedlegg, onLukk, }: {
+    art: KvitteringArt;
+    saksnummer?: string;
+    /** `feilet`: teksten er lagret, bildet kom ikke med. `forkastet`: køet offline uten bilde. */
+    vedlegg?: 'feilet' | 'forkastet';
+    onLukk: () => void;
+}): import("react").JSX.Element;

package/dist/lib/widget/MineInnspill.d.ts

@@ -0,0 +1,17 @@
+import type { MySubmission } from '@innspel/core';
+/**
+ * 2j — «Mine innspill» (DD-27). Offline-køen er synlig (DD-41): raden som
+ * venter står øverst, uten saksnummer. Svaret står under saken, ordrett som i
+ * panelet. Samme komponent i dialogen og i portalens fullskjerm — det er det
+ * snapshot-testen beviser.
+ *
+ * Tilstander: laster (skjelett i radenes form) · tom (invitasjon, DD-19) ·
+ * rader · feil (håndteres av den som kaller, med teksten beholdt).
+ */
+export declare function MineInnspill({ rader, laster, tenantName, onNytt, overskriftNivaa, }: {
+    rader: MySubmission[];
+    laster?: boolean;
+    tenantName?: string;
+    onNytt: () => void;
+    overskriftNivaa?: 1 | 2;
+}): import("react").JSX.Element;

package/dist/lib/widget/Skjermbilde.d.ts

@@ -0,0 +1,19 @@
+import type { Maskering } from '../skjermbilde/komposisjon.js';
+import type { Fangst } from '../skjermbilde/typer.js';
+/**
+ * 2f — skjermbildet, forhåndsvist FØR noe sendes (K4). Tre likestilte
+ * maskeringsveier (DD-40): «Masker felt» (ett klikk legger en boks), «Tegn
+ * over» (dra) og «Masker all tekst» (tekstlinjene dekkes; for en fil pikseleres
+ * bildet). Private felter (DD-39) ligger der før innsenderen ser bildet, merket
+ * «Maskert av appen», og kan ikke fjernes. Egne masker angres med ett klikk.
+ *
+ * Alle masker holdes i BILDETS piksler; lagene tegnes som prosent av flaten,
+ * så de følger bildet uansett hvor stort det vises. Komposisjonen skjer i
+ * `komponer` — det er komposittet som lastes opp, aldri rå-bitmapen.
+ */
+export declare function Skjermbilde({ fangst, komponerer, onFjern, onLeggVed }: {
+    fangst: Fangst;
+    komponerer: boolean;
+    onFjern: () => void;
+    onLeggVed: (m: Maskering) => void;
+}): import("react").JSX.Element;

package/dist/lib/widget/Valg.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 2b — første valg. To flater, ikon og tekst. DD-02: ALDRI et tredje valg, og
+ * aldri spørsmål om kategori eller alvorlighet. Fokus 3 i wireframen er venstre
+ * flate, deretter høyre.
+ */
+export declare function Valg({ onVelg }: {
+    onVelg: (spor: 'feil' | 'onske') => void;
+}): import("react").JSX.Element;

package/dist/lib/widget/Widget.d.ts

@@ -0,0 +1,48 @@
+import { type InnspelClient, type OpenFeedbackOptions } from '@innspel/core';
+import type { ScreenshotAdapter } from '../skjermbilde/typer.js';
+export type Steg = 'valg' | 'kjenteFeil' | 'felt' | 'skjermbilde' | 'kvittering' | 'mine';
+/** Det innsenderen har skrevet — det som skal overleve en ny innlogging (tech-decisions.md, «Portalen»). */
+export interface Utkast {
+    track: 'feil' | 'onske';
+    text: string;
+}
+export interface ÅpneOpsjoner extends OpenFeedbackOptions {
+    /** Gjenopprettet utkast, typisk etter «Logg inn på nytt». */
+    draft?: Utkast;
+}
+export interface WidgetProps {
+    client: InnspelClient;
+    open: boolean;
+    onClose: () => void;
+    apneOpsjoner?: ÅpneOpsjoner;
+    /** Leietakerens navn — på svaret i «Mine innspill» og i «Logg inn på nytt hos …». */
+    tenantName?: string;
+    /** Fangst av siden. `null` = «Ta bilde av siden» finnes ikke; «Last opp bilde» finnes likevel når leietakeren har skjermbilde på. */
+    screenshot: ScreenshotAdapter | null;
+    colorScheme?: 'dark' | 'light';
+    returnFocusTo?: HTMLElement | null;
+    /**
+     * Tokenet utløp mens innsenderen skrev. Verten får utkastet og tar innsenderen
+     * til ny innlogging; teksten går ikke tapt. Uten denne vises bare feilen.
+     */
+    onIdentityExpired?: (utkast: Utkast) => void;
+    /**
+     * «Send anonymt» etter utløpt token: verten gjør klienten anonym (portalen:
+     * logger ut), og widgeten sender på nytt når `client.isAnonymous` er sann.
+     */
+    onSendAnonymously?: () => void;
+}
+/**
+ * Widgeten — samme flyt som `@innspel/react-native`, i en dialog (DD-47).
+ *
+ * Flyten er ikke symmetrisk: feilsporet møter kjente feil FØR feltet,
+ * ønskesporet ETTER. Skjermbildet lages først ved trykk, aldri ved åpning (K4),
+ * og finnes bare når leietakeren har skjermbilde på (DD-26). Teksten sendes
+ * først; bildet kan feile alene (DD-42). Køen tømmes når dialogen ÅPNES, aldri
+ * ved oppstart (DD-41).
+ *
+ * Web-spesifikt: `screen` er URL-stien uten query og hash når verten ikke gir
+ * et rutenavn; kvitteringen sier «Sendt anonymt» når klienten er anonym; og et
+ * utløpt token under skriving beholder utkastet.
+ */
+export declare function Widget({ client, open, onClose, apneOpsjoner, tenantName, screenshot, colorScheme, returnFocusTo, onIdentityExpired, onSendAnonymously }: WidgetProps): import("react").JSX.Element;

package/dist/lib/widget/primitiver.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+/**
+ * Primitivene widgeten og portalen er bygget av. Alt visuelt ligger i
+ * styles.css og kommer fra tokens — ingen hex, ingen px, ingen fontstørrelse
+ * her (CLAUDE.md, «Styling»). Minste trykkflate er `--innspel-layout-touch`;
+ * den gjelder også mus og tastatur på web.
+ */
+type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export declare function Btn({ label, onClick, variant, ikon, hint, disabled, ariaLabel, grow, tall, type, testId, autoFocus, }: {
+    label: string;
+    onClick?: () => void;
+    variant?: Variant;
+    ikon?: string;
+    hint?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+    grow?: boolean;
+    tall?: boolean;
+    type?: 'button' | 'submit';
+    testId?: string;
+    autoFocus?: boolean;
+}): import("react").JSX.Element;
+export declare function H({ children, sub, id, nivaa }: {
+    children: string;
+    sub?: string;
+    id?: string;
+    nivaa?: 1 | 2;
+}): import("react").JSX.Element;
+export declare function Hint({ children, id }: {
+    children: ReactNode;
+    id?: string;
+}): import("react").JSX.Element;
+export declare function P({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Card({ children, dashed, testId, role, ariaLabel, }: {
+    children: ReactNode;
+    dashed?: boolean;
+    testId?: string;
+    role?: string;
+    ariaLabel?: string;
+}): import("react").JSX.Element;
+/**
+ * Status som ikon + etikett. Fargen er et TILLEGG, aldri bæreren: to av
+ * palettens statusfarger er målt til under 1,5 i innbyrdes kontrast (DD-08).
+ */
+export declare function StatusPill({ ikon, etikett, farge, }: {
+    ikon: string;
+    etikett: string;
+    farge: 'info' | 'success' | 'warning' | 'neutral' | 'danger';
+}): import("react").JSX.Element;
+/** Varsel. `live` gjør den til en live-region; kvitteringen og feil bruker det (DD-47). */
+export declare function Banner({ ikon, tone, children, live, testId, }: {
+    ikon: string;
+    tone: 'info' | 'warning' | 'danger' | 'success';
+    children: ReactNode;
+    live?: boolean;
+    testId?: string;
+}): import("react").JSX.Element;
+export declare function Skeleton({ hoy }: {
+    hoy?: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/lib/widget/status.d.ts

@@ -0,0 +1,24 @@
+import type { SubmissionStatus, SubmissionStatusView, SubmissionType } from '@innspel/core';
+/**
+ * DD-22: `levert` heter «Rettet» i feilsporet og «Levert» i ønskesporet —
+ * samme maskinstatus, to navn. Klienten velger navnet; serveren gjør det ikke.
+ *
+ * DD-08 / «Styling» i CLAUDE.md: **farge bærer aldri mening alene.** Hver status
+ * har ikon OG tekstetikett. `brand ↔ info` og `brand ↔ danger` er målt til under
+ * 1,5 i kontrast mot hverandre av tema-generatoren, så etiketten er det som
+ * faktisk bærer meningen. Speiler `@innspel/react-native`, med vilje ordrett.
+ */
+export interface StatusVisning {
+    ikon: string;
+    etikett: string;
+    /** Tokennavn i den aktive paletten, ikke en farge. */
+    farge: 'info' | 'success' | 'warning' | 'neutral' | 'danger';
+    lofte: string;
+}
+/** Norsk dato uten klokkeslett — fristen er en dato, ikke et tidspunkt (DD-28). */
+export declare function formaterFrist(iso: string): string;
+export declare function statusVisning(status: SubmissionStatus, type: SubmissionType, deadlineAt?: string): StatusVisning;
+/** Raden som venter på nett (DD-41). Den har ingen saksnummer og intet løfte om svar. */
+export declare const venterVisning: StatusVisning;
+/** Etikett for en hel rad, som skjermleserens sammendrag. Ikonet er `aria-hidden`, så etiketten bærer alt. */
+export declare function radEtikett(rad: SubmissionStatusView): string;