@innspel/react-native 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,8 +1,51 @@
 // src/InnspelProvider.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { View as View9 } from "react-native";
 
-// src/tema.ts
+// src/skjermbilde.ts
 import { createContext, useContext } from "react";
+import { Image } from "react-native";
+function createScreenshotAdapter(captureRef) {
+  return {
+    async capture(ref, options) {
+      const uri = await captureRef(ref, { format: options.format, quality: options.quality, result: "tmpfile" });
+      const { width, height } = await new Promise(
+        (resolve, reject) => Image.getSize(uri, (w, h) => resolve({ width: w, height: h }), reject)
+      );
+      return { uri, width, height };
+    },
+    measure(ref) {
+      return new Promise((resolve) => {
+        const view = ref.current;
+        if (!view) return resolve(null);
+        view.measureInWindow((x, y, width, height) => resolve({ x, y, width, height }));
+      });
+    },
+    async read(uri) {
+      const res = await fetch(uri);
+      return res.blob();
+    }
+  };
+}
+function createPrivateRegistry() {
+  const alle = /* @__PURE__ */ new Set();
+  return {
+    register(ref) {
+      alle.add(ref);
+      return () => {
+        alle.delete(ref);
+      };
+    },
+    refs: () => [...alle]
+  };
+}
+var SkjermbildeContext = createContext(null);
+function useSkjermbilde() {
+  return useContext(SkjermbildeContext);
+}
+
+// src/tema.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
 
 // src/generated/tokens.ts
 var t = {
@@ -177,7 +220,9 @@ var screenRules = {
   brushFill: "#E5007D",
   autoMaskFill: "#101114",
   autoMaskStroke: "#E5007D",
-  previewBackdrop: "#000000"
+  previewBackdrop: "#000000",
+  brushWidth: 28,
+  textBlurRadius: 24
 };
 
 // src/tema.ts
@@ -190,10 +235,10 @@ function byggTema(vertens, palett = "dark") {
     color: { ...bunn.color, ...vertens.color }
   };
 }
-var TemaContext = createContext(t);
+var TemaContext = createContext2(t);
 var TemaProvider = TemaContext.Provider;
 function useTema() {
-  return useContext(TemaContext);
+  return useContext2(TemaContext);
 }
 
 // src/widget/Widget.tsx
@@ -201,8 +246,8 @@ import {
   InnspelApiError,
   InnspelQueueFullError
 } from "@innspel/core";
-import { useCallback, useEffect, useState as useState2 } from "react";
-import { Modal, Pressable as Pressable4, Text as Text7, View as View7 } from "react-native";
+import { useCallback as useCallback2, useEffect, useRef as useRef2, useState as useState3 } from "react";
+import { Modal, Pressable as Pressable5, Text as Text8, View as View8 } from "react-native";
 
 // src/widget/Felt.tsx
 import { useMemo, useState } from "react";
@@ -439,6 +484,27 @@ var tekst = {
   kontekstAldri: "Aldri: navn, e-post, telefon, posisjon eller det som st\xE5r p\xE5 skjermen.",
   lenketTil: (tittel) => `Lenket til: \xAB${tittel}\xBB`,
   fjernLenke: "Fjern lenken til den kjente feilen",
+  // 2f — skjermbilde (K4, DD-39, DD-40, DD-42)
+  leggVedSkjermbilde: "Legg ved skjermbilde",
+  leggVedHint: "Bildet tas f\xF8rst n\xE5r du trykker \u2014 du ser det f\xF8r det sendes.",
+  skjermbildeTittel: "Se over bildet",
+  skjermbildeUnder: "Bildet ble tatt da du trykket. Det du maskerer, ser vi aldri.",
+  maskering: "Maskering",
+  maskerFelt: "Masker felt",
+  tegnOver: "Tegn over",
+  maskerAllTekst: "Masker all tekst",
+  maskertAvAppen: "Maskert av appen",
+  maskertAvAppenHint: "Registrert privat view. Penselen kan ikke oppheve den.",
+  dittStrok: "\u25B2 ditt str\xF8k \u2014 maskert (kan angres med ett trykk)",
+  allTekstHint: "Hele bildet er gjort uskarpt s\xE5 tekst ikke kan leses. Layouten er synlig.",
+  fjernBildet: "Fjern bildet",
+  leggVedOgFortsett: "Legg ved og fortsett",
+  leggVedHintDD42: "Teksten sendes f\xF8rst; bildet lastes opp for seg.",
+  skjermbildeLagtVed: "Skjermbilde lagt ved \u2014 maskert",
+  fjernSkjermbilde: "Fjern skjermbildet",
+  sendHintMedBilde: "Teksten sendes f\xF8rst; bildet lastes opp for seg.",
+  skjermbildeFeilet: "kunne ikke ta skjermbilde. Du kan sende uten.",
+  skjermbildeA11y: (auto, egne, uskarpt) => `Forh\xE5ndsvisning av skjermbildet. ${auto ? `${auto} felt maskert av appen og kan ikke avmaskeres. ` : ""}${egne ? `${egne} felt maskert av deg. ` : ""}${uskarpt ? "All tekst er gjort uskarp. " : ""}Trykk for \xE5 maskere et felt, dra for \xE5 tegne over.`,
   // DD-46 — mønstervarsel. Aldri stille redaksjon.
   monsterSpm: {
     email: "Dette ser ut som en e-postadresse. Vil du fjerne den?",
@@ -458,10 +524,17 @@ var tekst = {
   kvitteringJaOgsa: "Du f\xE5r beskjed n\xE5r den er rettet.",
   saksnummer: (nr) => `Saksnummer ${nr} \u2014 vis dette hvis du sp\xF8r support.`,
   tilbakeTilAppen: "Tilbake til appen",
+  /** DD-42: saken er sendt, bildet kom ikke med — aldri en blokkert innsending. */
+  kvitteringVedleggFeilet: "Sendt \u2014 skjermbildet kunne ikke legges ved",
+  tekstenErLagret: "Teksten din er lagret.",
+  vedleggFeiletBanner: "Bildet ble ikke lastet opp. Saken er sendt uten det \u2014 vil du, kan du sende et nytt innspill med bilde.",
+  saksnummerUtenVedlegg: (nr) => `Saksnummer ${nr} \xB7 uten vedlegg`,
   // 2i — tilstander
   offlineTittel: "Ingen nett",
   offlineBanner: "Ingen nett. Lagres og sendes automatisk \u2014 du ser det under \xABMine innspill\xBB til det er sendt.",
   offlineLagre: "Lagre \u2014 sendes automatisk",
+  /** DD-41: et skjermbilde køes aldri. */
+  offlineUtenBilde: "Skjermbilde kan ikke legges ved uten nett. Teksten sendes; bildet ble ikke lagret.",
   sendefeilBanner: (arsak) => `Kunne ikke sende: ${arsak} Teksten din er beholdt.`,
   provIgjen: "Pr\xF8v igjen",
   // 2j — mine innspill
@@ -507,7 +580,10 @@ function Felt({
   onFjernLenke,
   funn,
   onSend,
-  sender
+  sender,
+  onSkjermbilde,
+  harVedlegg,
+  onFjernVedlegg
 }) {
   const tema = useTema();
   const [apen, setApen] = useState(false);
@@ -657,6 +733,48 @@ function Felt({
         ]
       }
     ) : null,
+    harVedlegg ? /* @__PURE__ */ jsxs2(
+      View2,
+      {
+        testID: "vedlegg-chip",
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tema.space.sm,
+          minHeight: tema.touch,
+          borderWidth: tema.hairline,
+          borderColor: tema.color.borderInteractive,
+          borderRadius: tema.radius.pill,
+          paddingLeft: tema.space.md,
+          paddingRight: tema.space.xs
+        },
+        children: [
+          /* @__PURE__ */ jsx2(Text2, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.small }, children: "\u{1F4F7}" }),
+          /* @__PURE__ */ jsx2(Text2, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.skjermbildeLagtVed }),
+          /* @__PURE__ */ jsx2(
+            Pressable2,
+            {
+              testID: "fjern-vedlegg",
+              accessibilityRole: "button",
+              accessibilityLabel: tekst.fjernSkjermbilde,
+              onPress: onFjernVedlegg,
+              style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
+              children: /* @__PURE__ */ jsx2(Text2, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
+            }
+          )
+        ]
+      }
+    ) : onSkjermbilde ? /* @__PURE__ */ jsx2(
+      Btn,
+      {
+        variant: "secondary",
+        testID: "legg-ved-skjermbilde",
+        ikon: "\u{1F4F7}",
+        label: tekst.leggVedSkjermbilde,
+        hint: tekst.leggVedHint,
+        onPress: onSkjermbilde
+      }
+    ) : null,
     /* @__PURE__ */ jsxs2(View2, { style: { borderTopWidth: tema.hairline, borderTopColor: tema.color.border, paddingTop: tema.space.sm }, children: [
       /* @__PURE__ */ jsx2(
         Pressable2,
@@ -717,7 +835,7 @@ function Felt({
         testID: "send",
         label: spor === "onske" && !forKort ? tekst.nesteOnske : tekst.send,
         disabled: forKort || sender,
-        hint: forKort ? tekst.forKort(minTextLength) : void 0,
+        hint: forKort ? tekst.forKort(minTextLength) : harVedlegg ? tekst.sendHintMedBilde : void 0,
         onPress: onSend
       }
     ) })
@@ -872,6 +990,7 @@ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Kvittering({
   art,
   saksnummer,
+  vedlegg,
   onLukk
 }) {
   const tema = useTema();
@@ -883,6 +1002,8 @@ function Kvittering({
     // (DD-41 presiserer DD-07). Den lover bare at det sendes.
     k\u00F8: { h: tekst.offlineTittel, p: tekst.offlineBanner }
   }[art];
+  const overskrift = vedlegg === "feilet" ? tekst.kvitteringVedleggFeilet : innhold.h;
+  const brodtekst = vedlegg === "feilet" ? `${tekst.tekstenErLagret} ${innhold.p}` : innhold.p;
   return /* @__PURE__ */ jsxs5(View5, { style: { flex: 1, justifyContent: "center", gap: tema.space.lg }, children: [
     /* @__PURE__ */ jsxs5(View5, { style: { alignItems: "center", gap: tema.space.md }, children: [
       /* @__PURE__ */ jsx5(
@@ -894,7 +1015,9 @@ function Kvittering({
           children: art === "k\xF8" ? "\u21C5" : "\u2713"
         }
       ),
-      /* @__PURE__ */ jsx5(H, { children: innhold.h }),
+      /* @__PURE__ */ jsx5(H, { children: overskrift }),
+      vedlegg === "feilet" ? /* @__PURE__ */ jsx5(Banner, { ikon: "\u26A0", tone: "warning", children: tekst.vedleggFeiletBanner }) : null,
+      vedlegg === "forkastet" ? /* @__PURE__ */ jsx5(Banner, { ikon: "\u{1F4F7}", tone: "info", children: tekst.offlineUtenBilde }) : null,
       /* @__PURE__ */ jsx5(
         Text5,
         {
@@ -907,10 +1030,10 @@ function Kvittering({
             lineHeight: tema.lineHeight.body,
             textAlign: "center"
           },
-          children: innhold.p
+          children: brodtekst
         }
       ),
-      saksnummer ? /* @__PURE__ */ jsx5(Hint, { children: tekst.saksnummer(saksnummer) }) : null
+      saksnummer ? /* @__PURE__ */ jsx5(Hint, { children: vedlegg === "feilet" ? tekst.saksnummerUtenVedlegg(saksnummer) : tekst.saksnummer(saksnummer) }) : null
     ] }),
     /* @__PURE__ */ jsx5(Btn, { testID: "tilbake-til-appen", label: tekst.tilbakeTilAppen, onPress: onLukk })
   ] });
@@ -1043,8 +1166,209 @@ function MineInnspill({
   ] });
 }
 
+// src/widget/Skjermbilde.tsx
+import { skaler, strokTilRekter, treffer, trykkTilRekt } from "@innspel/core";
+import { useCallback, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { Image as Image2, Pressable as Pressable4, Text as Text7, View as View7 } from "react-native";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function Skjermbilde({
+  bilde,
+  automaskerRot,
+  rotStorrelse,
+  previewRef,
+  komponerer,
+  onFjern,
+  onLeggVed
+}) {
+  const tema = useTema();
+  const [verktoy, setVerktoy] = useState2("pensel");
+  const [allTekst, setAllTekst] = useState2(false);
+  const [egne, setEgne] = useState2([]);
+  const [ramme, setRamme] = useState2(null);
+  const strok = useRef([]);
+  const visning = useMemo2(() => {
+    if (!ramme) return null;
+    const s = Math.min(ramme.width / bilde.width, ramme.height / bilde.height);
+    return { width: Math.floor(bilde.width * s), height: Math.floor(bilde.height * s) };
+  }, [ramme, bilde.width, bilde.height]);
+  const automasker = useMemo2(
+    () => visning ? automaskerRot.map((r) => skaler(r, rotStorrelse, visning)) : [],
+    [automaskerRot, rotStorrelse, visning]
+  );
+  const onLayout = useCallback((e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setRamme({ width, height });
+  }, []);
+  const punkt = (e) => ({ x: e.nativeEvent.locationX, y: e.nativeEvent.locationY });
+  const onGrant = (e) => {
+    if (!visning) return;
+    const p = punkt(e);
+    const treff = egne.findIndex((r) => treffer(p, r));
+    if (treff >= 0) {
+      setEgne((x) => x.filter((_, i) => i !== treff));
+      return;
+    }
+    if (verktoy === "felt") {
+      const r = trykkTilRekt(p, { width: tema.touch * 4, height: tema.touch }, visning);
+      if (r) setEgne((x) => [...x, r]);
+      return;
+    }
+    strok.current = [p];
+  };
+  const onMove = (e) => {
+    if (verktoy !== "pensel" || strok.current.length === 0) return;
+    strok.current.push(punkt(e));
+  };
+  const onRelease = () => {
+    if (verktoy !== "pensel" || !visning || strok.current.length === 0) return;
+    const rekter = strokTilRekter(strok.current, screenRules.brushWidth, visning);
+    strok.current = [];
+    if (rekter.length) setEgne((x) => [...x, ...rekter]);
+  };
+  const knapp = (id, ikon, label) => {
+    const valgt = id === "allTekst" ? allTekst : verktoy === id && !allTekst;
+    return /* @__PURE__ */ jsxs7(
+      Pressable4,
+      {
+        testID: `verktoy-${id}`,
+        accessibilityRole: "button",
+        accessibilityLabel: label,
+        accessibilityState: { selected: valgt },
+        onPress: () => id === "allTekst" ? setAllTekst((a) => !a) : setVerktoy(id),
+        style: {
+          flex: 1,
+          minHeight: tema.touch,
+          alignItems: "center",
+          justifyContent: "center",
+          gap: tema.space.xs,
+          padding: tema.space.xs,
+          borderRadius: tema.radius.md,
+          borderWidth: tema.hairline,
+          borderColor: tema.color.actionSecondaryBorder,
+          borderBottomWidth: valgt ? tema.hairline * 2 : tema.hairline,
+          borderBottomColor: valgt ? tema.color.textPrimary : tema.color.actionSecondaryBorder,
+          backgroundColor: valgt ? tema.color.surfaceRaised : "transparent"
+        },
+        children: [
+          /* @__PURE__ */ jsx7(Text7, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.body }, children: ikon }),
+          /* @__PURE__ */ jsx7(
+            Text7,
+            {
+              style: {
+                color: tema.color.textPrimary,
+                fontSize: tema.font.small,
+                fontWeight: valgt ? tema.weight.semibold : tema.weight.regular
+              },
+              children: label
+            }
+          )
+        ]
+      },
+      id
+    );
+  };
+  const a11y = tekst.skjermbildeA11y(automasker.length, egne.length, allTekst);
+  return /* @__PURE__ */ jsxs7(View7, { style: { flex: 1, gap: tema.space.md }, children: [
+    /* @__PURE__ */ jsx7(H, { sub: tekst.skjermbildeUnder, children: tekst.skjermbildeTittel }),
+    /* @__PURE__ */ jsxs7(View7, { accessibilityRole: "toolbar", accessibilityLabel: tekst.maskering, style: { flexDirection: "row", gap: tema.space.sm }, children: [
+      knapp("felt", "\u25A3", tekst.maskerFelt),
+      knapp("pensel", "\u270E", tekst.tegnOver),
+      knapp("allTekst", "\u25A6", tekst.maskerAllTekst)
+    ] }),
+    /* @__PURE__ */ jsx7(
+      View7,
+      {
+        testID: "skjermbilde-ramme",
+        onLayout,
+        style: {
+          flex: 1,
+          minHeight: tema.touch * 5,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: screenRules.previewBackdrop,
+          borderRadius: tema.radius.md,
+          overflow: "hidden"
+        },
+        children: visning ? /* @__PURE__ */ jsxs7(
+          View7,
+          {
+            ref: previewRef,
+            collapsable: false,
+            testID: "forhandsvisning",
+            accessibilityRole: "image",
+            accessibilityLabel: a11y,
+            onStartShouldSetResponder: () => !komponerer,
+            onMoveShouldSetResponder: () => !komponerer,
+            onResponderGrant: onGrant,
+            onResponderMove: onMove,
+            onResponderRelease: onRelease,
+            onResponderTerminate: onRelease,
+            style: { width: visning.width, height: visning.height, backgroundColor: screenRules.previewBackdrop },
+            children: [
+              /* @__PURE__ */ jsx7(
+                Image2,
+                {
+                  testID: "skjermbilde-bilde",
+                  source: { uri: bilde.uri },
+                  blurRadius: allTekst ? screenRules.textBlurRadius : 0,
+                  style: { width: visning.width, height: visning.height },
+                  accessibilityIgnoresInvertColors: true
+                }
+              ),
+              automasker.map((r, i) => /* @__PURE__ */ jsx7(
+                View7,
+                {
+                  testID: `automask-${i}`,
+                  pointerEvents: "none",
+                  style: {
+                    position: "absolute",
+                    left: r.x,
+                    top: r.y,
+                    width: r.width,
+                    height: r.height,
+                    backgroundColor: screenRules.autoMaskFill,
+                    borderWidth: tema.hairline * 2,
+                    borderColor: screenRules.autoMaskStroke,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: !komponerer ? /* @__PURE__ */ jsxs7(Text7, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, numberOfLines: 1, children: [
+                    "\u{1F512} ",
+                    tekst.maskertAvAppen
+                  ] }) : null
+                },
+                `auto-${i}`
+              )),
+              egne.map((r, i) => /* @__PURE__ */ jsx7(
+                View7,
+                {
+                  testID: `maske-${i}`,
+                  pointerEvents: "none",
+                  style: { position: "absolute", left: r.x, top: r.y, width: r.width, height: r.height, backgroundColor: screenRules.brushFill }
+                },
+                `egen-${i}`
+              ))
+            ]
+          }
+        ) : null
+      }
+    ),
+    automasker.length ? /* @__PURE__ */ jsxs7(Hint, { children: [
+      "\u{1F512} ",
+      tekst.maskertAvAppenHint
+    ] }) : null,
+    egne.length ? /* @__PURE__ */ jsx7(Hint, { children: tekst.dittStrok }) : null,
+    allTekst ? /* @__PURE__ */ jsx7(Hint, { children: tekst.allTekstHint }) : null,
+    /* @__PURE__ */ jsxs7(View7, { style: { gap: tema.space.sm }, children: [
+      /* @__PURE__ */ jsx7(Btn, { variant: "danger", testID: "fjern-bildet", ikon: "\u{1F5D1}", label: tekst.fjernBildet, onPress: onFjern, disabled: komponerer }),
+      /* @__PURE__ */ jsx7(Btn, { testID: "legg-ved", label: tekst.leggVedOgFortsett, onPress: onLeggVed, disabled: komponerer || !visning, hint: tekst.leggVedHintDD42 })
+    ] })
+  ] });
+}
+
 // src/widget/Widget.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var FANGST = { format: "jpg", quality: 0.85 };
 function Widget({
   client,
   synlig,
@@ -1053,20 +1377,28 @@ function Widget({
   tenantName
 }) {
   const tema = useTema();
-  const [steg, setSteg] = useState2("valg");
-  const [spor, setSpor] = useState2("feil");
-  const [verdi, setVerdi] = useState2("");
-  const [kort, setKort] = useState2([]);
-  const [lasterKort, setLasterKort] = useState2(false);
-  const [lenketTil, setLenketTil] = useState2();
-  const [funn, setFunn] = useState2([]);
-  const [fjernede, setFjernede] = useState2([]);
-  const [sender, setSender] = useState2(false);
-  const [feil, setFeil] = useState2();
-  const [kvittering, setKvittering] = useState2();
-  const [mine, setMine] = useState2([]);
-  const [lasterMine, setLasterMine] = useState2(false);
-  const nullstill = useCallback(() => {
+  const skjermbilde = useSkjermbilde();
+  const previewRef = useRef2(null);
+  const [steg, setSteg] = useState3("valg");
+  const [spor, setSpor] = useState3("feil");
+  const [verdi, setVerdi] = useState3("");
+  const [kort, setKort] = useState3([]);
+  const [lasterKort, setLasterKort] = useState3(false);
+  const [lenketTil, setLenketTil] = useState3();
+  const [funn, setFunn] = useState3([]);
+  const [fjernede, setFjernede] = useState3([]);
+  const [sender, setSender] = useState3(false);
+  const [feil, setFeil] = useState3();
+  const [kvittering, setKvittering] = useState3();
+  const [mine, setMine] = useState3([]);
+  const [lasterMine, setLasterMine] = useState3(false);
+  const [bilde, setBilde] = useState3();
+  const [automasker, setAutomasker] = useState3([]);
+  const [rotStorrelse, setRotStorrelse] = useState3({ width: 1, height: 1 });
+  const [komponerer, setKomponerer] = useState3(false);
+  const [vedlegg, setVedlegg] = useState3();
+  const skjermbildeMulig = client.settings.screenshotsEnabled && skjermbilde?.adapter != null;
+  const nullstill = useCallback2(() => {
     setSteg("valg");
     setSpor("feil");
     setVerdi("");
@@ -1076,8 +1408,12 @@ function Widget({
     setFjernede([]);
     setFeil(void 0);
     setKvittering(void 0);
+    setBilde(void 0);
+    setAutomasker([]);
+    setVedlegg(void 0);
+    setKomponerer(false);
   }, []);
-  const lukk = useCallback(() => {
+  const lukk = useCallback2(() => {
     onLukk();
     nullstill();
   }, [onLukk, nullstill]);
@@ -1087,7 +1423,7 @@ function Widget({
     void client.queue.flush().catch(() => void 0);
     if (apneOpsjoner?.track) velgSpor(apneOpsjoner.track);
   }, [synlig]);
-  const hentKort = useCallback(async () => {
+  const hentKort = useCallback2(async () => {
     setLasterKort(true);
     try {
       const q = apneOpsjoner?.screen ? { screen: apneOpsjoner.screen } : {};
@@ -1096,7 +1432,7 @@ function Widget({
       setLasterKort(false);
     }
   }, [client, apneOpsjoner?.screen]);
-  const velgSpor = useCallback(
+  const velgSpor = useCallback2(
     async (valgt) => {
       setSpor(valgt);
       client.track({ name: "track_selected", type: valgt });
@@ -1112,14 +1448,59 @@ function Widget({
   useEffect(() => {
     if (steg === "kjenteFeil" && !lasterKort && kort.length === 0) setSteg("felt");
   }, [steg, lasterKort, kort.length]);
-  const endreTekst = useCallback(
+  const endreTekst = useCallback2(
     (v) => {
       setVerdi(v);
       setFunn(client.scanText(v));
     },
     [client]
   );
-  const send = useCallback(async () => {
+  const taSkjermbilde = useCallback2(async () => {
+    if (!skjermbilde?.adapter) return;
+    const { adapter, rootRef, privat } = skjermbilde;
+    setFeil(void 0);
+    try {
+      const fangst = await adapter.capture(rootRef, FANGST);
+      const rot = await adapter.measure(rootRef);
+      const private_ = await Promise.all(privat.refs().map((r) => adapter.measure(r)));
+      if (rot) {
+        setRotStorrelse({ width: rot.width, height: rot.height });
+        setAutomasker(
+          private_.filter((r) => r !== null).map((r) => ({ x: r.x - rot.x, y: r.y - rot.y, width: r.width, height: r.height }))
+        );
+      } else {
+        setRotStorrelse({ width: fangst.width, height: fangst.height });
+        setAutomasker([]);
+      }
+      setBilde(fangst);
+      setSteg("skjermbilde");
+    } catch {
+      setFeil(tekst.skjermbildeFeilet);
+    }
+  }, [skjermbilde]);
+  const leggVedBilde = useCallback2(async () => {
+    if (!skjermbilde?.adapter) return;
+    setKomponerer(true);
+    try {
+      const komposit = await skjermbilde.adapter.capture(previewRef, FANGST);
+      const body = await skjermbilde.adapter.read(komposit.uri);
+      setVedlegg({ mime: "image/jpeg", body, width: komposit.width, height: komposit.height });
+      setBilde(void 0);
+      setSteg("felt");
+    } catch {
+      setFeil(tekst.skjermbildeFeilet);
+      setSteg("felt");
+    } finally {
+      setKomponerer(false);
+    }
+  }, [skjermbilde]);
+  const fjernBilde = useCallback2(() => {
+    setBilde(void 0);
+    setAutomasker([]);
+    setVedlegg(void 0);
+    setSteg("felt");
+  }, []);
+  const send = useCallback2(async () => {
     if (spor === "onske" && steg === "felt" && kort.length === 0 && !lasterKort) {
       setSteg("kjenteFeil");
       await hentKort();
@@ -1131,13 +1512,18 @@ function Widget({
       const res = await client.capture({
         type: spor,
         text: verdi,
+        ...vedlegg ? { attachment: vedlegg } : {},
         ...spor === "feil" && lenketTil ? { relatedKnownIssueId: lenketTil.id } : {},
         ...fjernede.length ? { context: fjernetKontekst(client, fjernede) } : {}
       });
       if (res.status === "queued") {
-        setKvittering({ art: "k\xF8" });
+        setKvittering({ art: "k\xF8", ...res.attachment ? { vedlegg: "forkastet" } : {} });
       } else {
-        setKvittering({ art: spor, nr: res.submission.id });
+        setKvittering({
+          art: spor,
+          nr: res.submission.id,
+          ...res.attachment?.status === "failed" ? { vedlegg: "feilet" } : {}
+        });
       }
       setSteg("kvittering");
     } catch (e) {
@@ -1147,8 +1533,8 @@ function Widget({
     } finally {
       setSender(false);
     }
-  }, [client, spor, steg, verdi, lenketTil, fjernede, kort.length, lasterKort, hentKort]);
-  const jaOgsa = useCallback(
+  }, [client, spor, steg, verdi, vedlegg, lenketTil, fjernede, kort.length, lasterKort, hentKort]);
+  const jaOgsa = useCallback2(
     async (k) => {
       setSender(true);
       try {
@@ -1163,7 +1549,7 @@ function Widget({
     },
     [client]
   );
-  const visMine = useCallback(async () => {
+  const visMine = useCallback2(async () => {
     setSteg("mine");
     setLasterMine(true);
     try {
@@ -1174,7 +1560,7 @@ function Widget({
       setLasterMine(false);
     }
   }, [client]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Modal,
     {
       visible: synlig,
@@ -1182,8 +1568,8 @@ function Widget({
       animationType: "slide",
       onRequestClose: lukk,
       accessibilityViewIsModal: true,
-      children: /* @__PURE__ */ jsx7(View7, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs7(
-        View7,
+      children: /* @__PURE__ */ jsx8(View8, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs8(
+        View8,
         {
           testID: "innspel-widget",
           accessibilityViewIsModal: true,
@@ -1198,26 +1584,26 @@ function Widget({
             minHeight: "60%"
           },
           children: [
-            /* @__PURE__ */ jsxs7(View7, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
-              steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ jsx7(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ jsx7(View7, {}),
-              /* @__PURE__ */ jsx7(
-                Pressable4,
+            /* @__PURE__ */ jsxs8(View8, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
+              steg === "skjermbilde" ? /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: fjernBilde }) : steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ jsx8(View8, {}),
+              /* @__PURE__ */ jsx8(
+                Pressable5,
                 {
                   testID: "lukk",
                   accessibilityRole: "button",
                   accessibilityLabel: tekst.lukk,
                   onPress: lukk,
                   style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
-                  children: /* @__PURE__ */ jsx7(Text7, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
+                  children: /* @__PURE__ */ jsx8(Text8, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
                 }
               )
             ] }),
-            feil ? /* @__PURE__ */ jsx7(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
-            steg === "valg" ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-              /* @__PURE__ */ jsx7(Valg, { onVelg: velgSpor }),
-              /* @__PURE__ */ jsx7(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
+            feil ? /* @__PURE__ */ jsx8(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
+            steg === "valg" ? /* @__PURE__ */ jsxs8(Fragment, { children: [
+              /* @__PURE__ */ jsx8(Valg, { onVelg: velgSpor }),
+              /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
             ] }) : null,
-            steg === "kjenteFeil" ? /* @__PURE__ */ jsx7(
+            steg === "kjenteFeil" ? /* @__PURE__ */ jsx8(
               KjenteFeil,
               {
                 kort,
@@ -1231,7 +1617,7 @@ function Widget({
                 onNei: () => spor === "onske" ? void send() : setSteg("felt")
               }
             ) : null,
-            steg === "felt" ? /* @__PURE__ */ jsx7(
+            steg === "felt" ? /* @__PURE__ */ jsx8(
               Felt,
               {
                 spor,
@@ -1245,11 +1631,34 @@ function Widget({
                 ...lenketTil ? { lenketTil, onFjernLenke: () => setLenketTil(void 0) } : {},
                 funn,
                 onSend: send,
-                sender
+                sender,
+                ...skjermbildeMulig ? { onSkjermbilde: taSkjermbilde } : {},
+                harVedlegg: vedlegg !== void 0,
+                onFjernVedlegg: fjernBilde
               }
             ) : null,
-            steg === "kvittering" && kvittering ? /* @__PURE__ */ jsx7(Kvittering, { art: kvittering.art, ...kvittering.nr ? { saksnummer: kvittering.nr } : {}, onLukk: lukk }) : null,
-            steg === "mine" ? /* @__PURE__ */ jsx7(
+            steg === "skjermbilde" && bilde ? /* @__PURE__ */ jsx8(
+              Skjermbilde,
+              {
+                bilde,
+                automaskerRot: automasker,
+                rotStorrelse,
+                previewRef,
+                komponerer,
+                onFjern: fjernBilde,
+                onLeggVed: leggVedBilde
+              }
+            ) : null,
+            steg === "kvittering" && kvittering ? /* @__PURE__ */ jsx8(
+              Kvittering,
+              {
+                art: kvittering.art,
+                ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
+                ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
+                onLukk: lukk
+              }
+            ) : null,
+            steg === "mine" ? /* @__PURE__ */ jsx8(
               MineInnspill,
               {
                 rader: mine,
@@ -1273,35 +1682,42 @@ function fjernetKontekst(client, fjernede) {
 }
 
 // src/InnspelProvider.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var Kontekst = createContext2(null);
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var Kontekst = createContext3(null);
 function InnspelProvider({
   client,
   children,
   theme,
   colorScheme = "dark",
-  tenantName
+  tenantName,
+  screenshot
 }) {
-  const [synlig, setSynlig] = useState3(false);
-  const [apneOpsjoner, setApneOpsjoner] = useState3();
-  const registrert = useRef(false);
-  const open = useCallback2(
+  const [synlig, setSynlig] = useState4(false);
+  const [apneOpsjoner, setApneOpsjoner] = useState4();
+  const registrert = useRef3(false);
+  const rootRef = useRef3(null);
+  const privat = useMemo3(createPrivateRegistry, []);
+  const open = useCallback3(
     async (options) => {
       setApneOpsjoner(options);
       setSynlig(true);
     },
     []
   );
-  const close = useCallback2(() => setSynlig(false), []);
+  const close = useCallback3(() => setSynlig(false), []);
   if (!registrert.current) {
     client.registerPresenter({ open });
     registrert.current = true;
   }
-  const tema = useMemo2(() => byggTema(theme, colorScheme), [theme, colorScheme]);
-  const verdi = useMemo2(() => ({ client, open, close }), [client, open, close]);
-  return /* @__PURE__ */ jsx8(Kontekst.Provider, { value: verdi, children: /* @__PURE__ */ jsxs8(TemaProvider, { value: tema, children: [
-    children,
-    /* @__PURE__ */ jsx8(
+  const tema = useMemo3(() => byggTema(theme, colorScheme), [theme, colorScheme]);
+  const verdi = useMemo3(() => ({ client, open, close }), [client, open, close]);
+  const skjermbilde = useMemo3(
+    () => ({ adapter: screenshot ?? null, rootRef, privat }),
+    [screenshot, privat]
+  );
+  return /* @__PURE__ */ jsx9(Kontekst.Provider, { value: verdi, children: /* @__PURE__ */ jsx9(SkjermbildeContext.Provider, { value: skjermbilde, children: /* @__PURE__ */ jsxs9(TemaProvider, { value: tema, children: [
+    /* @__PURE__ */ jsx9(View9, { ref: rootRef, collapsable: false, style: { flex: 1 }, testID: "innspel-rot", children }),
+    /* @__PURE__ */ jsx9(
       Widget,
       {
         client,
@@ -1311,10 +1727,10 @@ function InnspelProvider({
         onLukk: close
       }
     )
-  ] }) });
+  ] }) }) });
 }
 function useInnspel() {
-  const k = useContext2(Kontekst);
+  const k = useContext3(Kontekst);
   if (!k) {
     throw new Error(
       "[innspel] useInnspel() ble kalt utenfor <InnspelProvider>. Pakk appen din i den \u2014 se README.md."
@@ -1323,6 +1739,21 @@ function useInnspel() {
   return k;
 }
 
+// src/InnspelPrivate.tsx
+import { useEffect as useEffect2, useRef as useRef4 } from "react";
+import { View as View10 } from "react-native";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function InnspelPrivate({ children, style }) {
+  const ref = useRef4(null);
+  const kontekst = useSkjermbilde();
+  const registrer = kontekst?.privat.register;
+  useEffect2(() => {
+    if (!registrer) return;
+    return registrer(ref);
+  }, [registrer]);
+  return /* @__PURE__ */ jsx10(View10, { ref, collapsable: false, style, testID: "innspel-privat", children });
+}
+
 // src/lagring.ts
 function createStorage(pakke) {
   return {
@@ -1344,9 +1775,11 @@ function createMemoryStorage() {
   };
 }
 export {
+  InnspelPrivate,
   InnspelProvider,
   byggTema,
   createMemoryStorage,
+  createScreenshotAdapter,
   createStorage,
   t as darkTokens,
   light,