@innspel/react-native 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -20,9 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  InnspelPrivate: () => InnspelPrivate,
   InnspelProvider: () => InnspelProvider,
   byggTema: () => byggTema,
   createMemoryStorage: () => createMemoryStorage,
+  createScreenshotAdapter: () => createScreenshotAdapter,
   createStorage: () => createStorage,
   darkTokens: () => t,
   light: () => light,
@@ -37,10 +39,53 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/InnspelProvider.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
+var import_react_native10 = require("react-native");
 
-// src/tema.ts
+// src/skjermbilde.ts
 var import_react = require("react");
+var import_react_native = require("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) => import_react_native.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 = (0, import_react.createContext)(null);
+function useSkjermbilde() {
+  return (0, import_react.useContext)(SkjermbildeContext);
+}
+
+// src/tema.ts
+var import_react2 = require("react");
 
 // src/generated/tokens.ts
 var t = {
@@ -215,7 +260,9 @@ var screenRules = {
   brushFill: "#E5007D",
   autoMaskFill: "#101114",
   autoMaskStroke: "#E5007D",
-  previewBackdrop: "#000000"
+  previewBackdrop: "#000000",
+  brushWidth: 28,
+  textBlurRadius: 24
 };
 
 // src/tema.ts
@@ -228,24 +275,24 @@ function byggTema(vertens, palett = "dark") {
     color: { ...bunn.color, ...vertens.color }
   };
 }
-var TemaContext = (0, import_react.createContext)(t);
+var TemaContext = (0, import_react2.createContext)(t);
 var TemaProvider = TemaContext.Provider;
 function useTema() {
-  return (0, import_react.useContext)(TemaContext);
+  return (0, import_react2.useContext)(TemaContext);
 }
 
 // src/widget/Widget.tsx
-var import_core = require("@innspel/core");
-var import_react8 = require("react");
-var import_react_native7 = require("react-native");
+var import_core2 = require("@innspel/core");
+var import_react10 = require("react");
+var import_react_native9 = require("react-native");
 
 // src/widget/Felt.tsx
-var import_react3 = require("react");
-var import_react_native2 = require("react-native");
+var import_react4 = require("react");
+var import_react_native3 = require("react-native");
 
 // src/widget/primitiver.tsx
-var import_react2 = require("react");
-var import_react_native = require("react-native");
+var import_react3 = require("react");
+var import_react_native2 = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Btn({
   label,
@@ -263,9 +310,9 @@ function Btn({
   const bakgrunn = variant === "primary" ? c.actionPrimary : variant === "secondary" ? c.surfaceRaised : "transparent";
   const tekstfarge = variant === "primary" ? c.onActionPrimary : variant === "danger" ? c.danger : c.actionSecondaryText;
   const kant = variant === "ghost" ? "transparent" : variant === "primary" ? c.actionPrimary : c.actionSecondaryBorder;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: grow ? { flex: 1 } : void 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: grow ? { flex: 1 } : void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_react_native.Pressable,
+      import_react_native2.Pressable,
       {
         testID,
         accessibilityRole: "button",
@@ -287,9 +334,9 @@ function Btn({
           opacity: disabled ? 0.6 : 1
         },
         children: [
-          ikon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.body }, children: ikon }) : null,
+          ikon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.body }, children: ikon }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native.Text,
+            import_react_native2.Text,
             {
               style: {
                 color: disabled ? c.textDisabled : tekstfarge,
@@ -307,9 +354,9 @@ function Btn({
 }
 function H({ children, sub }) {
   const tema = useTema();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: { gap: tema.space.xs }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: { gap: tema.space.xs }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native.Text,
+      import_react_native2.Text,
       {
         accessibilityRole: "header",
         style: {
@@ -322,7 +369,7 @@ function H({ children, sub }) {
       }
     ),
     sub ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native.Text,
+      import_react_native2.Text,
       {
         style: {
           color: tema.color.textSecondary,
@@ -337,7 +384,7 @@ function H({ children, sub }) {
 function Hint({ children }) {
   const tema = useTema();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native.Text,
+    import_react_native2.Text,
     {
       style: {
         color: tema.color.textMuted,
@@ -355,7 +402,7 @@ function Card({
 }) {
   const tema = useTema();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native.View,
+    import_react_native2.View,
     {
       style: [
         {
@@ -380,7 +427,7 @@ function StatusPill({
 }) {
   const tema = useTema();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react_native.View,
+    import_react_native2.View,
     {
       style: {
         flexDirection: "row",
@@ -393,8 +440,8 @@ function StatusPill({
         backgroundColor: tema.color[`${farge}Bg`]
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.small }, children: ikon }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: tema.color[farge], fontSize: tema.font.small, fontWeight: tema.weight.medium }, children: etikett })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.small }, children: ikon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: tema.color[farge], fontSize: tema.font.small, fontWeight: tema.weight.medium }, children: etikett })
       ]
     }
   );
@@ -407,7 +454,7 @@ function Banner({
 }) {
   const tema = useTema();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react_native.View,
+    import_react_native2.View,
     {
       style: {
         flexDirection: "row",
@@ -417,9 +464,9 @@ function Banner({
         padding: tema.space.md
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.body }, children: ikon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.body }, children: ikon }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_native.Text,
+          import_react_native2.Text,
           {
             accessibilityRole: "alert",
             accessibilityLiveRegion: live ? "polite" : "none",
@@ -474,6 +521,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?",
@@ -493,10 +561,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
@@ -542,17 +617,20 @@ function Felt({
   onFjernLenke,
   funn,
   onSend,
-  sender
+  sender,
+  onSkjermbilde,
+  harVedlegg,
+  onFjernVedlegg
 }) {
   const tema = useTema();
-  const [apen, setApen] = (0, import_react3.useState)(false);
-  const [beholdt, setBeholdt] = (0, import_react3.useState)([]);
+  const [apen, setApen] = (0, import_react4.useState)(false);
+  const [beholdt, setBeholdt] = (0, import_react4.useState)([]);
   const brukt = verdi.length;
   const forKort = brukt < minTextLength;
   const full = brukt >= textMaxLength;
   const visTeller = brukt >= textMaxLength * 0.8;
   const uavklart = funn.find((f) => !beholdt.includes(f.match));
-  const linjer = (0, import_react3.useMemo)(() => {
+  const linjer = (0, import_react4.useMemo)(() => {
     const etiketter = {
       screen: "Skjerm",
       appVersion: "Appversjon",
@@ -566,9 +644,9 @@ function Felt({
       return verdi2 && !fjernedeFelter.includes(felt) ? { felt, etikett, verdi: verdi2 } : null;
     }).filter((x) => x !== null);
   }, [kontekst, fjernedeFelter]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { flex: 1, gap: tema.space.md }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { flex: 1, gap: tema.space.md }, children: [
     lenketTil ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_react_native2.View,
+      import_react_native3.View,
       {
         style: {
           flexDirection: "row",
@@ -582,23 +660,23 @@ function Felt({
           paddingRight: tema.space.xs
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.lenketTil(lenketTil.title) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.lenketTil(lenketTil.title) }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_react_native2.Pressable,
+            import_react_native3.Pressable,
             {
               testID: "fjern-lenke",
               accessibilityRole: "button",
               accessibilityLabel: tekst.fjernLenke,
               onPress: onFjernLenke,
               style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
             }
           )
         ]
       }
     ) : null,
     uavklart ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_react_native2.View,
+      import_react_native3.View,
       {
         style: {
           gap: tema.space.sm,
@@ -608,7 +686,7 @@ function Felt({
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_react_native2.Text,
+            import_react_native3.Text,
             {
               accessibilityRole: "alert",
               accessibilityLiveRegion: "polite",
@@ -621,7 +699,7 @@ function Felt({
               children: tekst.monsterSpm[uavklart.kind]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               Btn,
               {
@@ -649,7 +727,7 @@ function Felt({
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(H, { children: spor === "onske" ? tekst.feltLabelOnske : tekst.feltLabelFeil }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_native2.TextInput,
+      import_react_native3.TextInput,
       {
         testID: "innspill-tekst",
         accessibilityLabel: spor === "onske" ? tekst.feltLabelOnske : tekst.feltLabelFeil,
@@ -675,7 +753,7 @@ function Felt({
       }
     ),
     visTeller ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_react_native2.Text,
+      import_react_native3.Text,
       {
         testID: "teller",
         accessibilityLiveRegion: full ? "assertive" : "polite",
@@ -692,9 +770,51 @@ function Felt({
         ]
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { borderTopWidth: tema.hairline, borderTopColor: tema.color.border, paddingTop: tema.space.sm }, children: [
+    harVedlegg ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_react_native3.View,
+      {
+        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__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.small }, children: "\u{1F4F7}" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.skjermbildeLagtVed }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_react_native3.Pressable,
+            {
+              testID: "fjern-vedlegg",
+              accessibilityRole: "button",
+              accessibilityLabel: tekst.fjernSkjermbilde,
+              onPress: onFjernVedlegg,
+              style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
+            }
+          )
+        ]
+      }
+    ) : onSkjermbilde ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Btn,
+      {
+        variant: "secondary",
+        testID: "legg-ved-skjermbilde",
+        ikon: "\u{1F4F7}",
+        label: tekst.leggVedSkjermbilde,
+        hint: tekst.leggVedHint,
+        onPress: onSkjermbilde
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { borderTopWidth: tema.hairline, borderTopColor: tema.color.border, paddingTop: tema.space.sm }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native2.Pressable,
+        import_react_native3.Pressable,
         {
           testID: "kontekst-bryter",
           accessibilityRole: "button",
@@ -702,7 +822,7 @@ function Felt({
           accessibilityLabel: `${tekst.kontekstLinje}${apen ? "" : tekst.kontekstVis}`,
           onPress: () => setApen((a) => !a),
           style: { minHeight: tema.touch, justifyContent: "center" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
             apen ? "\u25B4" : "\u25BE",
             " ",
             tekst.kontekstLinje,
@@ -710,9 +830,9 @@ function Felt({
           ] })
         }
       ),
-      apen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { children: [
+      apen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { children: [
         linjer.map((l) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_react_native2.View,
+          import_react_native3.View,
           {
             style: {
               flexDirection: "row",
@@ -723,17 +843,17 @@ function Felt({
               borderBottomColor: tema.color.border
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { color: tema.color.textMuted, fontSize: tema.font.small, minWidth: tema.touch * 2 }, children: l.etikett }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: l.verdi }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textMuted, fontSize: tema.font.small, minWidth: tema.touch * 2 }, children: l.etikett }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: l.verdi }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_react_native2.Pressable,
+                import_react_native3.Pressable,
                 {
                   testID: `fjern-${l.felt}`,
                   accessibilityRole: "button",
                   accessibilityLabel: `${tekst.kontekstFjern} ${l.etikett.toLowerCase()} fra innsendingen`,
                   onPress: () => onFjernKontekst(l.felt),
                   style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
                     "\u2715 ",
                     tekst.kontekstFjern
                   ] })
@@ -743,16 +863,16 @@ function Felt({
           },
           l.felt
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { paddingTop: tema.space.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: tekst.kontekstAldri }) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: { paddingTop: tema.space.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: tekst.kontekstAldri }) })
       ] }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { flex: 1, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: { flex: 1, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Btn,
       {
         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
       }
     ) })
@@ -760,13 +880,13 @@ function Felt({
 }
 
 // src/widget/Valg.tsx
-var import_react4 = require("react");
-var import_react_native3 = require("react-native");
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Valg({ onVelg }) {
   const tema = useTema();
   const flate = (spor, ikon, label, under) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_react_native3.Pressable,
+    import_react_native4.Pressable,
     {
       testID: `spor-${spor}`,
       accessibilityRole: "button",
@@ -785,9 +905,9 @@ function Valg({ onVelg }) {
         padding: tema.space.md
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h1 }, children: ikon }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h1 }, children: ikon }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react_native3.Text,
+          import_react_native4.Text,
           {
             style: {
               color: tema.color.textPrimary,
@@ -798,13 +918,13 @@ function Valg({ onVelg }) {
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: { color: tema.color.textMuted, fontSize: tema.font.small, textAlign: "center" }, children: under })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.Text, { style: { color: tema.color.textMuted, fontSize: tema.font.small, textAlign: "center" }, children: under })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: { flex: 1, gap: tema.space.lg }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: { flex: 1, gap: tema.space.lg }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(H, { sub: tekst.valgUnder, children: tekst.valgTittel }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { flex: 1, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: { flexDirection: "row", gap: tema.space.md }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: { flex: 1, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: { flexDirection: "row", gap: tema.space.md }, children: [
       flate("feil", "\u{1F41E}", tekst.sporFeil, tekst.sporFeilUnder),
       flate("onske", "\u{1F4A1}", tekst.sporOnske, tekst.sporOnskeUnder)
     ] }) })
@@ -812,8 +932,8 @@ function Valg({ onVelg }) {
 }
 
 // src/widget/KjenteFeil.tsx
-var import_react5 = require("react");
-var import_react_native4 = require("react-native");
+var import_react6 = require("react");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function KjenteFeil({
   kort,
@@ -825,19 +945,19 @@ function KjenteFeil({
 }) {
   const tema = useTema();
   if (laster) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: { flex: 1, gap: tema.space.md }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: { flex: 1, gap: tema.space.md }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(H, { sub: spor === "onske" ? tekst.kjenteFeilUnderOnske : tekst.kjenteFeilUnderFeil, children: spor === "onske" ? tekst.kjenteFeilTittelOnske : tekst.kjenteFeilTittelFeil }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ActivityIndicator, { accessibilityLabel: "Sjekker kjente feil", color: tema.color.textSecondary })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.ActivityIndicator, { accessibilityLabel: "Sjekker kjente feil", color: tema.color.textSecondary })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: { flex: 1, gap: tema.space.md }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: { flex: 1, gap: tema.space.md }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(H, { sub: spor === "onske" ? tekst.kjenteFeilUnderOnske : tekst.kjenteFeilUnderFeil, children: spor === "onske" ? tekst.kjenteFeilTittelOnske : tekst.kjenteFeilTittelFeil }),
     kort.map((k) => {
       const versjon = k.fixedIn ? k.status === "fikset" ? tekst.rettetI(k.fixedIn) : tekst.rettesI(k.fixedIn) : void 0;
       const kontekst = versjon ? `${k.title}. ${versjon}` : k.title;
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_react_native4.Text,
+          import_react_native5.Text,
           {
             style: {
               color: tema.color.textPrimary,
@@ -849,7 +969,7 @@ function KjenteFeil({
           }
         ),
         k.workaround ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          import_react_native4.Text,
+          import_react_native5.Text,
           {
             style: {
               color: tema.color.textSecondary,
@@ -871,7 +991,7 @@ function KjenteFeil({
             farge: k.status === "fikset" ? "success" : "info"
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             Btn,
             {
@@ -901,12 +1021,13 @@ function KjenteFeil({
 }
 
 // src/widget/Kvittering.tsx
-var import_react6 = require("react");
-var import_react_native5 = require("react-native");
+var import_react7 = require("react");
+var import_react_native6 = require("react-native");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Kvittering({
   art,
   saksnummer,
+  vedlegg,
   onLukk
 }) {
   const tema = useTema();
@@ -918,10 +1039,12 @@ function Kvittering({
     // (DD-41 presiserer DD-07). Den lover bare at det sendes.
     k\u00F8: { h: tekst.offlineTittel, p: tekst.offlineBanner }
   }[art];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: { flex: 1, justifyContent: "center", gap: tema.space.lg }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: { alignItems: "center", gap: tema.space.md }, children: [
+  const overskrift = vedlegg === "feilet" ? tekst.kvitteringVedleggFeilet : innhold.h;
+  const brodtekst = vedlegg === "feilet" ? `${tekst.tekstenErLagret} ${innhold.p}` : innhold.p;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native6.View, { style: { flex: 1, justifyContent: "center", gap: tema.space.lg }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native6.View, { style: { alignItems: "center", gap: tema.space.md }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_react_native5.Text,
+        import_react_native6.Text,
         {
           accessibilityElementsHidden: true,
           importantForAccessibility: "no",
@@ -929,9 +1052,11 @@ function Kvittering({
           children: art === "k\xF8" ? "\u21C5" : "\u2713"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(H, { children: innhold.h }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(H, { children: overskrift }),
+      vedlegg === "feilet" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Banner, { ikon: "\u26A0", tone: "warning", children: tekst.vedleggFeiletBanner }) : null,
+      vedlegg === "forkastet" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Banner, { ikon: "\u{1F4F7}", tone: "info", children: tekst.offlineUtenBilde }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_react_native5.Text,
+        import_react_native6.Text,
         {
           testID: "kvittering-tekst",
           accessibilityRole: "alert",
@@ -942,18 +1067,18 @@ function Kvittering({
             lineHeight: tema.lineHeight.body,
             textAlign: "center"
           },
-          children: innhold.p
+          children: brodtekst
         }
       ),
-      saksnummer ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Hint, { children: tekst.saksnummer(saksnummer) }) : null
+      saksnummer ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Hint, { children: vedlegg === "feilet" ? tekst.saksnummerUtenVedlegg(saksnummer) : tekst.saksnummer(saksnummer) }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Btn, { testID: "tilbake-til-appen", label: tekst.tilbakeTilAppen, onPress: onLukk })
   ] });
 }
 
 // src/widget/MineInnspill.tsx
-var import_react7 = require("react");
-var import_react_native6 = require("react-native");
+var import_react8 = require("react");
+var import_react_native7 = require("react-native");
 
 // src/widget/status.ts
 var IKON = {
@@ -1018,9 +1143,9 @@ function MineInnspill({
   onNytt
 }) {
   const tema = useTema();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: { flex: 1, gap: tema.space.md }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native7.View, { style: { flex: 1, gap: tema.space.md }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(H, { sub: tekst.mineUnder, children: tekst.mineTittel }),
-    laster ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.ActivityIndicator, { accessibilityLabel: "Henter innspillene dine", color: tema.color.textSecondary }) : rader.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Hint, { children: tekst.mineTom }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.ScrollView, { style: { flex: 1 }, contentContainerStyle: { gap: tema.space.sm }, children: rader.map((rad) => {
+    laster ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native7.ActivityIndicator, { accessibilityLabel: "Henter innspillene dine", color: tema.color.textSecondary }) : rader.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Hint, { children: tekst.mineTom }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native7.ScrollView, { style: { flex: 1 }, contentContainerStyle: { gap: tema.space.sm }, children: rader.map((rad) => {
       const venter = rad.pending === true;
       const v = venter ? venterVisning : statusVisning(rad.status, rad.type, rad.deadlineAt);
       const nokkel = venter ? rad.clientRef : rad.id;
@@ -1033,7 +1158,7 @@ function MineInnspill({
           rad.type === "onske" ? "\xF8nske" : "feil"
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react_native6.Text,
+          import_react_native7.Text,
           {
             style: {
               color: tema.color.textPrimary,
@@ -1043,12 +1168,12 @@ function MineInnspill({
             children: rad.text
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: { gap: tema.space.xs }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native7.View, { style: { gap: tema.space.xs }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatusPill, { ikon: v.ikon, etikett: v.etikett, farge: v.farge }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Hint, { children: v.lofte })
         ] }),
         svar ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          import_react_native6.View,
+          import_react_native7.View,
           {
             style: {
               borderLeftWidth: tema.hairline * 2,
@@ -1057,9 +1182,9 @@ function MineInnspill({
               gap: tema.space.xs
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: tenantName ? tekst.svarFra(tenantName) : tekst.svarFraGenerisk }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native7.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: tenantName ? tekst.svarFra(tenantName) : tekst.svarFraGenerisk }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_react_native6.Text,
+                import_react_native7.Text,
                 {
                   style: {
                     color: tema.color.textPrimary,
@@ -1078,8 +1203,209 @@ function MineInnspill({
   ] });
 }
 
-// src/widget/Widget.tsx
+// src/widget/Skjermbilde.tsx
+var import_core = require("@innspel/core");
+var import_react9 = require("react");
+var import_react_native8 = require("react-native");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function Skjermbilde({
+  bilde,
+  automaskerRot,
+  rotStorrelse,
+  previewRef,
+  komponerer,
+  onFjern,
+  onLeggVed
+}) {
+  const tema = useTema();
+  const [verktoy, setVerktoy] = (0, import_react9.useState)("pensel");
+  const [allTekst, setAllTekst] = (0, import_react9.useState)(false);
+  const [egne, setEgne] = (0, import_react9.useState)([]);
+  const [ramme, setRamme] = (0, import_react9.useState)(null);
+  const strok = (0, import_react9.useRef)([]);
+  const visning = (0, import_react9.useMemo)(() => {
+    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 = (0, import_react9.useMemo)(
+    () => visning ? automaskerRot.map((r) => (0, import_core.skaler)(r, rotStorrelse, visning)) : [],
+    [automaskerRot, rotStorrelse, visning]
+  );
+  const onLayout = (0, import_react9.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) => (0, import_core.treffer)(p, r));
+    if (treff >= 0) {
+      setEgne((x) => x.filter((_, i) => i !== treff));
+      return;
+    }
+    if (verktoy === "felt") {
+      const r = (0, import_core.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 = (0, import_core.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__ */ (0, import_jsx_runtime7.jsxs)(
+      import_react_native8.Pressable,
+      {
+        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__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.body }, children: ikon }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_native8.Text,
+            {
+              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__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: { flex: 1, gap: tema.space.md }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(H, { sub: tekst.skjermbildeUnder, children: tekst.skjermbildeTittel }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { 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__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native8.View,
+      {
+        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__ */ (0, import_jsx_runtime7.jsxs)(
+          import_react_native8.View,
+          {
+            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__ */ (0, import_jsx_runtime7.jsx)(
+                import_react_native8.Image,
+                {
+                  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__ */ (0, import_jsx_runtime7.jsx)(
+                import_react_native8.View,
+                {
+                  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__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, numberOfLines: 1, children: [
+                    "\u{1F512} ",
+                    tekst.maskertAvAppen
+                  ] }) : null
+                },
+                `auto-${i}`
+              )),
+              egne.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                import_react_native8.View,
+                {
+                  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__ */ (0, import_jsx_runtime7.jsxs)(Hint, { children: [
+      "\u{1F512} ",
+      tekst.maskertAvAppenHint
+    ] }) : null,
+    egne.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.dittStrok }) : null,
+    allTekst ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.allTekstHint }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: { gap: tema.space.sm }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { variant: "danger", testID: "fjern-bildet", ikon: "\u{1F5D1}", label: tekst.fjernBildet, onPress: onFjern, disabled: komponerer }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { testID: "legg-ved", label: tekst.leggVedOgFortsett, onPress: onLeggVed, disabled: komponerer || !visning, hint: tekst.leggVedHintDD42 })
+    ] })
+  ] });
+}
+
+// src/widget/Widget.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FANGST = { format: "jpg", quality: 0.85 };
 function Widget({
   client,
   synlig,
@@ -1088,20 +1414,28 @@ function Widget({
   tenantName
 }) {
   const tema = useTema();
-  const [steg, setSteg] = (0, import_react8.useState)("valg");
-  const [spor, setSpor] = (0, import_react8.useState)("feil");
-  const [verdi, setVerdi] = (0, import_react8.useState)("");
-  const [kort, setKort] = (0, import_react8.useState)([]);
-  const [lasterKort, setLasterKort] = (0, import_react8.useState)(false);
-  const [lenketTil, setLenketTil] = (0, import_react8.useState)();
-  const [funn, setFunn] = (0, import_react8.useState)([]);
-  const [fjernede, setFjernede] = (0, import_react8.useState)([]);
-  const [sender, setSender] = (0, import_react8.useState)(false);
-  const [feil, setFeil] = (0, import_react8.useState)();
-  const [kvittering, setKvittering] = (0, import_react8.useState)();
-  const [mine, setMine] = (0, import_react8.useState)([]);
-  const [lasterMine, setLasterMine] = (0, import_react8.useState)(false);
-  const nullstill = (0, import_react8.useCallback)(() => {
+  const skjermbilde = useSkjermbilde();
+  const previewRef = (0, import_react10.useRef)(null);
+  const [steg, setSteg] = (0, import_react10.useState)("valg");
+  const [spor, setSpor] = (0, import_react10.useState)("feil");
+  const [verdi, setVerdi] = (0, import_react10.useState)("");
+  const [kort, setKort] = (0, import_react10.useState)([]);
+  const [lasterKort, setLasterKort] = (0, import_react10.useState)(false);
+  const [lenketTil, setLenketTil] = (0, import_react10.useState)();
+  const [funn, setFunn] = (0, import_react10.useState)([]);
+  const [fjernede, setFjernede] = (0, import_react10.useState)([]);
+  const [sender, setSender] = (0, import_react10.useState)(false);
+  const [feil, setFeil] = (0, import_react10.useState)();
+  const [kvittering, setKvittering] = (0, import_react10.useState)();
+  const [mine, setMine] = (0, import_react10.useState)([]);
+  const [lasterMine, setLasterMine] = (0, import_react10.useState)(false);
+  const [bilde, setBilde] = (0, import_react10.useState)();
+  const [automasker, setAutomasker] = (0, import_react10.useState)([]);
+  const [rotStorrelse, setRotStorrelse] = (0, import_react10.useState)({ width: 1, height: 1 });
+  const [komponerer, setKomponerer] = (0, import_react10.useState)(false);
+  const [vedlegg, setVedlegg] = (0, import_react10.useState)();
+  const skjermbildeMulig = client.settings.screenshotsEnabled && skjermbilde?.adapter != null;
+  const nullstill = (0, import_react10.useCallback)(() => {
     setSteg("valg");
     setSpor("feil");
     setVerdi("");
@@ -1111,18 +1445,22 @@ function Widget({
     setFjernede([]);
     setFeil(void 0);
     setKvittering(void 0);
+    setBilde(void 0);
+    setAutomasker([]);
+    setVedlegg(void 0);
+    setKomponerer(false);
   }, []);
-  const lukk = (0, import_react8.useCallback)(() => {
+  const lukk = (0, import_react10.useCallback)(() => {
     onLukk();
     nullstill();
   }, [onLukk, nullstill]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!synlig) return;
     client.track({ name: "widget_opened" });
     void client.queue.flush().catch(() => void 0);
     if (apneOpsjoner?.track) velgSpor(apneOpsjoner.track);
   }, [synlig]);
-  const hentKort = (0, import_react8.useCallback)(async () => {
+  const hentKort = (0, import_react10.useCallback)(async () => {
     setLasterKort(true);
     try {
       const q = apneOpsjoner?.screen ? { screen: apneOpsjoner.screen } : {};
@@ -1131,7 +1469,7 @@ function Widget({
       setLasterKort(false);
     }
   }, [client, apneOpsjoner?.screen]);
-  const velgSpor = (0, import_react8.useCallback)(
+  const velgSpor = (0, import_react10.useCallback)(
     async (valgt) => {
       setSpor(valgt);
       client.track({ name: "track_selected", type: valgt });
@@ -1144,17 +1482,62 @@ function Widget({
     },
     [client, hentKort]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (steg === "kjenteFeil" && !lasterKort && kort.length === 0) setSteg("felt");
   }, [steg, lasterKort, kort.length]);
-  const endreTekst = (0, import_react8.useCallback)(
+  const endreTekst = (0, import_react10.useCallback)(
     (v) => {
       setVerdi(v);
       setFunn(client.scanText(v));
     },
     [client]
   );
-  const send = (0, import_react8.useCallback)(async () => {
+  const taSkjermbilde = (0, import_react10.useCallback)(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 = (0, import_react10.useCallback)(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 = (0, import_react10.useCallback)(() => {
+    setBilde(void 0);
+    setAutomasker([]);
+    setVedlegg(void 0);
+    setSteg("felt");
+  }, []);
+  const send = (0, import_react10.useCallback)(async () => {
     if (spor === "onske" && steg === "felt" && kort.length === 0 && !lasterKort) {
       setSteg("kjenteFeil");
       await hentKort();
@@ -1166,24 +1549,29 @@ 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) {
-      if (e instanceof import_core.InnspelQueueFullError) setFeil(e.userMessage);
-      else if (e instanceof import_core.InnspelApiError) setFeil(e.message);
+      if (e instanceof import_core2.InnspelQueueFullError) setFeil(e.userMessage);
+      else if (e instanceof import_core2.InnspelApiError) setFeil(e.message);
       else setFeil("tjeneren svarte ikke.");
     } finally {
       setSender(false);
     }
-  }, [client, spor, steg, verdi, lenketTil, fjernede, kort.length, lasterKort, hentKort]);
-  const jaOgsa = (0, import_react8.useCallback)(
+  }, [client, spor, steg, verdi, vedlegg, lenketTil, fjernede, kort.length, lasterKort, hentKort]);
+  const jaOgsa = (0, import_react10.useCallback)(
     async (k) => {
       setSender(true);
       try {
@@ -1191,14 +1579,14 @@ function Widget({
         setKvittering({ art: "jaOgsa", nr: res.id });
         setSteg("kvittering");
       } catch (e) {
-        setFeil(e instanceof import_core.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+        setFeil(e instanceof import_core2.InnspelApiError ? e.message : "tjeneren svarte ikke.");
       } finally {
         setSender(false);
       }
     },
     [client]
   );
-  const visMine = (0, import_react8.useCallback)(async () => {
+  const visMine = (0, import_react10.useCallback)(async () => {
     setSteg("mine");
     setLasterMine(true);
     try {
@@ -1209,16 +1597,16 @@ function Widget({
       setLasterMine(false);
     }
   }, [client]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react_native7.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react_native9.Modal,
     {
       visible: synlig,
       transparent: true,
       animationType: "slide",
       onRequestClose: lukk,
       accessibilityViewIsModal: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        import_react_native7.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        import_react_native9.View,
         {
           testID: "innspel-widget",
           accessibilityViewIsModal: true,
@@ -1233,26 +1621,26 @@ function Widget({
             minHeight: "60%"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
-              steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                import_react_native7.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
+              steg === "skjermbilde" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: fjernBilde }) : steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                import_react_native9.Pressable,
                 {
                   testID: "lukk",
                   accessibilityRole: "button",
                   accessibilityLabel: tekst.lukk,
                   onPress: lukk,
                   style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
                 }
               )
             ] }),
-            feil ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
-            steg === "valg" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Valg, { onVelg: velgSpor }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
+            feil ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
+            steg === "valg" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Valg, { onVelg: velgSpor }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
             ] }) : null,
-            steg === "kjenteFeil" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            steg === "kjenteFeil" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               KjenteFeil,
               {
                 kort,
@@ -1266,7 +1654,7 @@ function Widget({
                 onNei: () => spor === "onske" ? void send() : setSteg("felt")
               }
             ) : null,
-            steg === "felt" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            steg === "felt" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Felt,
               {
                 spor,
@@ -1280,11 +1668,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 === "skjermbilde" && bilde ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Skjermbilde,
+              {
+                bilde,
+                automaskerRot: automasker,
+                rotStorrelse,
+                previewRef,
+                komponerer,
+                onFjern: fjernBilde,
+                onLeggVed: leggVedBilde
               }
             ) : null,
-            steg === "kvittering" && kvittering ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Kvittering, { art: kvittering.art, ...kvittering.nr ? { saksnummer: kvittering.nr } : {}, onLukk: lukk }) : null,
-            steg === "mine" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            steg === "kvittering" && kvittering ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Kvittering,
+              {
+                art: kvittering.art,
+                ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
+                ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
+                onLukk: lukk
+              }
+            ) : null,
+            steg === "mine" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               MineInnspill,
               {
                 rader: mine,
@@ -1308,35 +1719,42 @@ function fjernetKontekst(client, fjernede) {
 }
 
 // src/InnspelProvider.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Kontekst = (0, import_react9.createContext)(null);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Kontekst = (0, import_react11.createContext)(null);
 function InnspelProvider({
   client,
   children,
   theme,
   colorScheme = "dark",
-  tenantName
+  tenantName,
+  screenshot
 }) {
-  const [synlig, setSynlig] = (0, import_react9.useState)(false);
-  const [apneOpsjoner, setApneOpsjoner] = (0, import_react9.useState)();
-  const registrert = (0, import_react9.useRef)(false);
-  const open = (0, import_react9.useCallback)(
+  const [synlig, setSynlig] = (0, import_react11.useState)(false);
+  const [apneOpsjoner, setApneOpsjoner] = (0, import_react11.useState)();
+  const registrert = (0, import_react11.useRef)(false);
+  const rootRef = (0, import_react11.useRef)(null);
+  const privat = (0, import_react11.useMemo)(createPrivateRegistry, []);
+  const open = (0, import_react11.useCallback)(
     async (options) => {
       setApneOpsjoner(options);
       setSynlig(true);
     },
     []
   );
-  const close = (0, import_react9.useCallback)(() => setSynlig(false), []);
+  const close = (0, import_react11.useCallback)(() => setSynlig(false), []);
   if (!registrert.current) {
     client.registerPresenter({ open });
     registrert.current = true;
   }
-  const tema = (0, import_react9.useMemo)(() => byggTema(theme, colorScheme), [theme, colorScheme]);
-  const verdi = (0, import_react9.useMemo)(() => ({ client, open, close }), [client, open, close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Kontekst.Provider, { value: verdi, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(TemaProvider, { value: tema, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const tema = (0, import_react11.useMemo)(() => byggTema(theme, colorScheme), [theme, colorScheme]);
+  const verdi = (0, import_react11.useMemo)(() => ({ client, open, close }), [client, open, close]);
+  const skjermbilde = (0, import_react11.useMemo)(
+    () => ({ adapter: screenshot ?? null, rootRef, privat }),
+    [screenshot, privat]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Kontekst.Provider, { value: verdi, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkjermbildeContext.Provider, { value: skjermbilde, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TemaProvider, { value: tema, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { ref: rootRef, collapsable: false, style: { flex: 1 }, testID: "innspel-rot", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Widget,
       {
         client,
@@ -1346,10 +1764,10 @@ function InnspelProvider({
         onLukk: close
       }
     )
-  ] }) });
+  ] }) }) });
 }
 function useInnspel() {
-  const k = (0, import_react9.useContext)(Kontekst);
+  const k = (0, import_react11.useContext)(Kontekst);
   if (!k) {
     throw new Error(
       "[innspel] useInnspel() ble kalt utenfor <InnspelProvider>. Pakk appen din i den \u2014 se README.md."
@@ -1358,6 +1776,21 @@ function useInnspel() {
   return k;
 }
 
+// src/InnspelPrivate.tsx
+var import_react12 = require("react");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function InnspelPrivate({ children, style }) {
+  const ref = (0, import_react12.useRef)(null);
+  const kontekst = useSkjermbilde();
+  const registrer = kontekst?.privat.register;
+  (0, import_react12.useEffect)(() => {
+    if (!registrer) return;
+    return registrer(ref);
+  }, [registrer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { ref, collapsable: false, style, testID: "innspel-privat", children });
+}
+
 // src/lagring.ts
 function createStorage(pakke) {
   return {
@@ -1380,9 +1813,11 @@ function createMemoryStorage() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  InnspelPrivate,
   InnspelProvider,
   byggTema,
   createMemoryStorage,
+  createScreenshotAdapter,
   createStorage,
   darkTokens,
   light,