@innspel/react-native 0.9.0 → 0.9.2

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/InnspelProvider.tsx
-import { createContext as createContext3, useCallback as useCallback3, useContext as useContext4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { createContext as createContext3, useCallback as useCallback3, useContext as useContext4, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 import { View as View9 } from "react-native";
 
 // src/skjermbilde.ts
@@ -355,7 +355,7 @@ import {
   InnspelApiError,
   InnspelQueueFullError
 } from "@innspel/core";
-import { useCallback as useCallback2, useContext as useContext3, useEffect, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, useEffect, useRef as useRef3, useState as useState3 } from "react";
 import { KeyboardAvoidingView, Modal, Pressable as Pressable5, View as View8 } from "react-native";
 import { initialWindowMetrics, SafeAreaInsetsContext } from "react-native-safe-area-context";
 
@@ -369,11 +369,14 @@ var arrow_back_outline_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBo
 // ../../node_modules/ionicons/dist/svg/brush-outline.svg
 var brush_outline_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><path d="M452.37 59.63a40.49 40.49 0 0 0-57.26 0L184 294.74c23.08 4.7 46.12 27.29 49.26 49.26l219.11-227.11a40.49 40.49 0 0 0 0-57.26M138 336c-29.88 0-54 24.5-54 54.86 0 23.95-20.88 36.57-36 36.57C64.56 449.74 92.82 464 120 464c39.78 0 72-32.73 72-73.14 0-30.36-24.12-54.86-54-54.86" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px"/></svg>';
 
+// ../../node_modules/ionicons/dist/svg/bug.svg
+var bug_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><path d="M463.55 272.13H400v-48.2q0-4.32-.27-8.47c29.57-27.88 32.25-64.63 32.27-103 0-8.61-6.64-16-15.25-16.41A16 16 0 0 0 400 112c0 28-1.86 48.15-9.9 63.84-19.22-41.15-65.78-63.91-134.1-63.91-39.8 0-74.19 9.13-99.43 26.39-14.9 10.19-26.2 22.91-33.7 37.72C114 160.65 112 141 112 112.46c0-8.61-6.6-16-15.2-16.44A16 16 0 0 0 80 112c0 37.63 2.61 73.73 32.44 101.63q-.43 5.06-.44 10.3v48.2H48.45c-8.61 0-16 6.62-16.43 15.23a16 16 0 0 0 16 16.77h64V320a143.3 143.3 0 0 0 10.39 53.69C96.74 396.64 80.18 422 80 463.34c0 8.74 6.62 16.3 15.36 16.65A16 16 0 0 0 112 464c0-27.66 9.1-44.71 26.17-61.32A144.37 144.37 0 0 0 220 459.42a16 16 0 0 0 20-15.49V192.45c0-8.61 6.62-16 15.23-16.43A16 16 0 0 1 272 192v251.93a16 16 0 0 0 20 15.49 144.4 144.4 0 0 0 81.82-56.74c17 16.54 26.09 33.52 26.17 60.95a16.27 16.27 0 0 0 15.1 16.37A16 16 0 0 0 432 464c0-41.68-16.6-67.23-42.39-90.31A143.3 143.3 0 0 0 400 320v-15.87h64a16 16 0 0 0 16-16.77c-.42-8.61-7.84-15.23-16.45-15.23"/><path d="m321.39 104 .32.09c13.57 3.8 25.07-10.55 18.2-22.85A95.86 95.86 0 0 0 256.21 32h-.42a95.87 95.87 0 0 0-84.19 50.13c-6.84 12.58 5.14 27 18.84 22.86 19.71-6 41.79-9.06 65.56-9.06 24.09 0 46.09 2.72 65.39 8.07"/></svg>';
+
 // ../../node_modules/ionicons/dist/svg/bug-outline.svg
 var bug_outline_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><path d="M370 378c28.89 23.52 46 46.07 46 86M142 378c-28.89 23.52-46 46.06-46 86M384 208c28.89-23.52 32-56.07 32-96M128 206c-28.89-23.52-32-54.06-32-94M464 288.13h-80M128 288.13H48M256 192v256" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px"/><path d="M256 448c-70.4 0-128-57.6-128-128v-96.07c0-65.07 57.6-96 128-96h0c70.4 0 128 25.6 128 96V320c0 70.4-57.6 128-128 128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px"/><path d="M179.43 143.52a49.1 49.1 0 0 1-3.43-15.73A80 80 0 0 1 255.79 48h.42A80 80 0 0 1 336 127.79a41.9 41.9 0 0 1-3.12 14.3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px"/></svg>';
 
-// ../../node_modules/ionicons/dist/svg/bulb-outline.svg
-var bulb_outline_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><path d="M304 384v-24c0-29 31.54-56.43 52-76 28.84-27.57 44-64.61 44-108 0-80-63.73-144-144-144a143.6 143.6 0 0 0-144 144c0 41.84 15.81 81.39 44 108 20.35 19.21 52 46.7 52 76v24M224 480h64M208 432h96M256 384V256" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px"/><path d="M294 240s-21.51 16-38 16-38-16-38-16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px"/></svg>';
+// ../../node_modules/ionicons/dist/svg/bulb.svg
+var bulb_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><path d="M288 464h-64a16 16 0 0 0 0 32h64a16 16 0 0 0 0-32M304 416h-96a16 16 0 0 0 0 32h96a16 16 0 0 0 0-32M369.42 62.69C339.35 32.58 299.07 16 256 16A159.62 159.62 0 0 0 96 176c0 46.62 17.87 90.23 49 119.64l4.36 4.09C167.37 316.57 192 339.64 192 360v24a16 16 0 0 0 16 16h24a8 8 0 0 0 8-8V274.82a8 8 0 0 0-5.13-7.47A130.7 130.7 0 0 1 208.71 253a16 16 0 1 1 18.58-26c7.4 5.24 21.65 13 28.71 13s21.31-7.78 28.73-13a16 16 0 0 1 18.56 26 130.7 130.7 0 0 1-26.16 14.32 8 8 0 0 0-5.13 7.47V392a8 8 0 0 0 8 8h24a16 16 0 0 0 16-16v-24c0-19.88 24.36-42.93 42.15-59.77l4.91-4.66C399.08 265 416 223.61 416 176a159.16 159.16 0 0 0-46.58-113.31"/></svg>';
 
 // ../../node_modules/ionicons/dist/svg/calendar-outline.svg
 var calendar_outline_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><rect width="416" height="384" x="48" y="80" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" rx="48"/><circle cx="296" cy="232" r="24"/><circle cx="376" cy="232" r="24"/><circle cx="296" cy="312" r="24"/><circle cx="376" cy="312" r="24"/><circle cx="136" cy="312" r="24"/><circle cx="216" cy="312" r="24"/><circle cx="136" cy="392" r="24"/><circle cx="216" cy="392" r="24"/><circle cx="296" cy="392" r="24"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M128 48v32M384 48v32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M464 160H48"/></svg>';
@@ -457,8 +460,10 @@ var IKONER = Object.fromEntries(
   Object.entries({
     "arrow-back-outline": arrow_back_outline_default,
     "brush-outline": brush_outline_default,
+    // Fylte varianter: bare på sporvalgets to kort (DD-63), der ikonet bærer stemningen.
+    bug: bug_default,
+    bulb: bulb_default,
     "bug-outline": bug_outline_default,
-    "bulb-outline": bulb_outline_default,
     "calendar-outline": calendar_outline_default,
     "camera-outline": camera_outline_default,
     "checkmark-circle-outline": checkmark_circle_outline_default,
@@ -504,6 +509,7 @@ function Ikon({
       width: maal,
       height: maal,
       color: farge ?? tema.color.textPrimary,
+      fill: farge ?? tema.color.textPrimary,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     }
@@ -511,11 +517,11 @@ function Ikon({
 }
 
 // src/widget/Felt.tsx
-import { useMemo, useState } from "react";
+import { useMemo as useMemo2, useState } from "react";
 import { Pressable as Pressable2, ScrollView, Text as Text2, TextInput, View as View2 } from "react-native";
 
 // src/widget/primitiver.tsx
-import "react";
+import { useMemo, useRef } from "react";
 import { Pressable, Text, View } from "react-native";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Btn({
@@ -528,10 +534,12 @@ function Btn({
   accessibilityLabel,
   grow,
   testID,
-  busy
+  busy,
+  trykkForbiForelder
 }) {
   const tema = useTema();
   const c = tema.color;
+  const forbi = useTrykkForbiForelder(onPress, !!disabled, tema.touch / 2);
   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;
@@ -545,6 +553,7 @@ function Btn({
         accessibilityState: { disabled: !!disabled, busy: !!busy },
         disabled,
         onPress,
+        ...trykkForbiForelder ? forbi : {},
         style: {
           minHeight: tema.touch,
           borderRadius: tema.radius.md,
@@ -577,6 +586,37 @@ function Btn({
     hint ? /* @__PURE__ */ jsx2(Hint, { children: hint }) : null
   ] });
 }
+function useTrykkForbiForelder(onPress, laast, slingring) {
+  const start = useRef(null);
+  const fikkResponder = useRef(false);
+  const siste = useRef({ onPress, laast });
+  siste.current = { onPress, laast };
+  return useMemo(
+    () => ({
+      onPressIn: () => {
+        fikkResponder.current = true;
+      },
+      onTouchStart: (e) => {
+        start.current = { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY };
+      },
+      onTouchEnd: (e) => {
+        const s = start.current;
+        start.current = null;
+        const innenfor = s !== null && Math.abs(e.nativeEvent.pageX - s.x) <= slingring && Math.abs(e.nativeEvent.pageY - s.y) <= slingring;
+        setTimeout(() => {
+          const tatt = fikkResponder.current;
+          fikkResponder.current = false;
+          if (!tatt && innenfor && !siste.current.laast) siste.current.onPress?.();
+        }, 0);
+      },
+      onTouchCancel: () => {
+        start.current = null;
+        fikkResponder.current = false;
+      }
+    }),
+    [slingring]
+  );
+}
 function H({ children, sub }) {
   const tema = useTema();
   return /* @__PURE__ */ jsxs(View, { style: { gap: tema.space.xs }, children: [
@@ -711,7 +751,8 @@ function Banner({
 // src/widget/tekster.ts
 function saksnr(id) {
   const i = id.indexOf("_");
-  return i >= 0 ? id.slice(i + 1) : id;
+  const rest = i >= 0 ? id.slice(i + 1) : id;
+  return rest.length > 8 ? rest.slice(-4) : rest;
 }
 var stor = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
 var tekst = {
@@ -933,7 +974,7 @@ function Felt({
   const full = brukt >= textMaxLength;
   const visTeller = brukt >= textMaxLength * 0.8;
   const uavklart = funn.find((f) => !beholdt.includes(f.match));
-  const linjer = useMemo(() => {
+  const linjer = useMemo2(() => {
     const etiketter = {
       screen: "Skjerm",
       appVersion: "Appversjon",
@@ -1210,7 +1251,8 @@ function Felt({
         disabled: forKort || sender,
         busy: sender,
         hint: forKort ? tekst.forKort(minTextLength) : harVedlegg ? tekst.sendHintMedBilde : void 0,
-        onPress: onSend
+        onPress: onSend,
+        trykkForbiForelder: true
       }
     ) })
   ] });
@@ -1242,7 +1284,21 @@ function Valg({ onVelg }) {
         padding: tema.space.md
       },
       children: [
-        /* @__PURE__ */ jsx4(Ikon, { navn: ikon, storrelse: "stor", farge: tema.color.textPrimary }),
+        /* @__PURE__ */ jsx4(
+          View3,
+          {
+            testID: `spor-${spor}-ikonflate`,
+            style: {
+              width: 2 * tema.icon.inline + 2 * tema.space.md,
+              height: 2 * tema.icon.inline + 2 * tema.space.md,
+              borderRadius: tema.radius.pill,
+              backgroundColor: tema.color.brandBg,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx4(Ikon, { navn: ikon, storrelse: "stor", farge: tema.color.brand })
+          }
+        ),
         /* @__PURE__ */ jsx4(
           Text3,
           {
@@ -1262,8 +1318,8 @@ function Valg({ onVelg }) {
   return /* @__PURE__ */ jsxs3(View3, { style: { flex: 1, gap: tema.space.lg }, children: [
     /* @__PURE__ */ jsx4(H, { children: tekst.valgTittel }),
     /* @__PURE__ */ jsx4(View3, { style: { flex: 1, justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs3(View3, { style: { flexDirection: "row", gap: tema.space.md }, children: [
-      flate("feil", "bug-outline", tekst.sporFeil, tekst.sporFeilUnder),
-      flate("onske", "bulb-outline", tekst.sporOnske, tekst.sporOnskeUnder)
+      flate("feil", "bug", tekst.sporFeil, tekst.sporFeilUnder),
+      flate("onske", "bulb", tekst.sporOnske, tekst.sporOnskeUnder)
     ] }) })
   ] });
 }
@@ -1529,7 +1585,7 @@ 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 { useCallback, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
 import { Image as Image2, Pressable as Pressable4, StyleSheet, Text as Text7, View as View7 } from "react-native";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function Skjermbilde({
@@ -1548,13 +1604,13 @@ function Skjermbilde({
   const [allTekst, setAllTekst] = useState2(false);
   const [egne, setEgne] = useState2([]);
   const [ramme, setRamme] = useState2(null);
-  const strok = useRef([]);
-  const visning = useMemo2(() => {
+  const strok = useRef2([]);
+  const visning = useMemo3(() => {
     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(
+  const automasker = useMemo3(
     () => visning ? automaskerRot.map((r) => skaler(r, rotStorrelse, visning)) : [],
     [automaskerRot, rotStorrelse, visning]
   );
@@ -1771,7 +1827,7 @@ function Widget({
   const tema = useTema();
   const insets = useContext3(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
   const skjermbilde = useSkjermbilde();
-  const previewRef = useRef2(null);
+  const previewRef = useRef3(null);
   const [steg, setSteg] = useState3("valg");
   const [spor, setSpor] = useState3("feil");
   const [verdi, setVerdi] = useState3("");
@@ -1812,9 +1868,23 @@ function Widget({
     setVedlegg(void 0);
     setKomponerer(false);
   }, []);
+  const [mineDirekte, setMineDirekte] = useState3(false);
+  const [stegForMine, setStegForMine] = useState3("valg");
+  const stegRef = useRef3(steg);
+  stegRef.current = steg;
+  const harUtkast = verdi.trim().length > 0 || vedlegg !== void 0;
   const lukk = useCallback2(() => {
+    onLukk();
+    if (stegRef.current === "mine" && mineDirekte) {
+      setSteg(stegForMine);
+      setMineDirekte(false);
+    }
+  }, [onLukk, mineDirekte, stegForMine]);
+  const lukkOgNullstill = useCallback2(() => {
     onLukk();
     nullstill();
+    setMineDirekte(false);
+    setStegForMine("valg");
   }, [onLukk, nullstill]);
   useEffect(() => {
     if (!synlig) return;
@@ -1824,8 +1894,8 @@ function Widget({
     if (!client.isAnonymous) {
       void client.subjects.submissions().then(setMine).catch(() => void 0);
     }
-    if (apneOpsjoner?.view === "mine" && !client.isAnonymous) void visMine();
-    else if (apneOpsjoner?.track) velgSpor(apneOpsjoner.track);
+    if (apneOpsjoner?.view === "mine" && !client.isAnonymous) void visMine(true);
+    else if (apneOpsjoner?.track && !harUtkast) void velgSpor(apneOpsjoner.track);
   }, [synlig]);
   const hentKort = useCallback2(async () => {
     setLasterKort(true);
@@ -1923,6 +1993,11 @@ function Widget({
   }, []);
   const gaaTilbake = useCallback2(() => {
     setFeil(void 0);
+    if (steg === "mine") {
+      if (mineDirekte) lukk();
+      else setSteg("valg");
+      return;
+    }
     if (steg === "skjermbilde") {
       setBilde(void 0);
       setAutomasker([]);
@@ -1934,7 +2009,12 @@ function Widget({
       return;
     }
     setSteg("valg");
-  }, [steg, spor, kort.length]);
+  }, [steg, spor, kort.length, mineDirekte, lukk]);
+  const androidTilbake = useCallback2(() => {
+    if (steg === "valg") lukk();
+    else if (steg === "kvittering") lukkOgNullstill();
+    else gaaTilbake();
+  }, [steg, lukk, lukkOgNullstill, gaaTilbake]);
   const send = useCallback2(async () => {
     setSender(true);
     setFeil(void 0);
@@ -1981,7 +2061,13 @@ function Widget({
     },
     [client]
   );
-  const visMine = useCallback2(async () => {
+  const visMine = useCallback2(async (direkte = false) => {
+    if (direkte) {
+      if (stegRef.current !== "mine") setStegForMine(stegRef.current);
+    } else {
+      setStegForMine("valg");
+    }
+    setMineDirekte(direkte);
     setSteg("mine");
     setLasterMine(true);
     try {
@@ -1992,13 +2078,18 @@ function Widget({
       setLasterMine(false);
     }
   }, [client]);
+  const nyttFraMine = useCallback2(() => {
+    setMineDirekte(false);
+    if (harUtkast) setSteg(stegForMine);
+    else nullstill();
+  }, [harUtkast, stegForMine, nullstill]);
   return /* @__PURE__ */ jsx9(
     Modal,
     {
       visible: synlig,
       transparent: true,
       animationType: "slide",
-      onRequestClose: lukk,
+      onRequestClose: androidTilbake,
       accessibilityViewIsModal: true,
       children: /* @__PURE__ */ jsx9(
         KeyboardAvoidingView,
@@ -2036,7 +2127,7 @@ function Widget({
                       testID: "lukk",
                       accessibilityRole: "button",
                       accessibilityLabel: tekst.lukk,
-                      onPress: lukk,
+                      onPress: steg === "kvittering" ? lukkOgNullstill : lukk,
                       style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
                       children: /* @__PURE__ */ jsx9(Ikon, { navn: "close-outline", farge: tema.color.textSecondary })
                     }
@@ -2054,7 +2145,7 @@ function Widget({
                       ikon: "list-outline",
                       label: mine.length > 0 ? tekst.mineMedAntall(mine.length) : tekst.mineTittel,
                       accessibilityLabel: mine.length > 0 ? tekst.mineEtikett(mine.length) : tekst.mineTittel,
-                      onPress: visMine
+                      onPress: () => void visMine()
                     }
                   ) : null
                 ] }) : null,
@@ -2118,7 +2209,7 @@ function Widget({
                     ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
                     ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
                     ...kvittering.frist ? { frist: kvittering.frist } : {},
-                    onLukk: lukk
+                    onLukk: lukkOgNullstill
                   }
                 ) : null,
                 steg === "mine" ? /* @__PURE__ */ jsx9(
@@ -2127,7 +2218,7 @@ function Widget({
                     rader: mine,
                     laster: lasterMine,
                     ...tenantName ? { tenantName } : {},
-                    onNytt: nullstill
+                    onNytt: nyttFraMine
                   }
                 ) : null
               ]
@@ -2170,9 +2261,9 @@ function InnspelProvider({
 }) {
   const [synlig, setSynlig] = useState4(false);
   const [apneOpsjoner, setApneOpsjoner] = useState4();
-  const registrert = useRef3(false);
-  const rootRef = useRef3(null);
-  const privat = useMemo3(createPrivateRegistry, []);
+  const registrert = useRef4(false);
+  const rootRef = useRef4(null);
+  const privat = useMemo4(createPrivateRegistry, []);
   const open = useCallback3(
     async (options) => {
       setApneOpsjoner(options);
@@ -2185,9 +2276,9 @@ function InnspelProvider({
     client.registerPresenter({ open });
     registrert.current = true;
   }
-  const tema = useMemo3(() => byggTema(theme, colorScheme), [theme, colorScheme]);
-  const verdi = useMemo3(() => ({ client, open, close }), [client, open, close]);
-  const skjermbilde = useMemo3(
+  const tema = useMemo4(() => byggTema(theme, colorScheme), [theme, colorScheme]);
+  const verdi = useMemo4(() => ({ client, open, close }), [client, open, close]);
+  const skjermbilde = useMemo4(
     () => ({ adapter: screenshot ?? null, rootRef, privat }),
     [screenshot, privat]
   );
@@ -2217,11 +2308,11 @@ function useInnspel() {
 }
 
 // src/InnspelPrivate.tsx
-import { useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useEffect as useEffect2, useRef as useRef5 } from "react";
 import { View as View10 } from "react-native";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function InnspelPrivate({ children, style }) {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   const kontekst = useSkjermbilde();
   const registrer = kontekst?.privat.register;
   useEffect2(() => {