@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-LAECSR4H.js → chunk-RJA3RXO3.js}

@@ -1,5 +1,6 @@
-import { camMeta, decorativeProps } from './chunk-RW6ZL2FQ.js';
-import { useReducedMotion } from './chunk-6N33LFQA.js';
+import { useAnalyzerLabels, camMeta, decorativeProps } from './chunk-OCHPK5YV.js';
+import { useLoamLocale } from './chunk-APCWFOZW.js';
+import { useReducedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, View, Text, Easing } from 'react-native';
 import Svg, { Defs, Pattern, Line, RadialGradient, Stop, Rect } from 'react-native-svg';
@@ -9,12 +10,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var PLACEHOLDER_LABEL = "live feed \xB7 placeholder";
 function PlaceholderFeed({
-  label = PLACEHOLDER_LABEL,
+  label,
+  labels,
   drift = true,
   topInset = 0,
   children
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("analyzer");
+  const t = useAnalyzerLabels(labels);
   const reduced = useReducedMotion();
   const { styles } = useStyles(feedSheet);
   const still = reduced || theme.reduceMotion || !drift;
@@ -37,60 +40,69 @@ function PlaceholderFeed({
   const scale = still ? 1.015 : phase.interpolate({ inputRange: [0, 1], outputRange: [1.015, 1.046] });
   const translateX = still ? 0 : phase.interpolate({ inputRange: [0, 1], outputRange: [0, 8] });
   const translateY = still ? 0 : phase.interpolate({ inputRange: [0, 1], outputRange: [0, -8] });
-  return /* @__PURE__ */ jsxs(View, { accessible: false, testID: "loam-placeholder-feed", style: styles.root, ...decorativeProps(), children: [
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        testID: still ? "loam-cam-plate-static" : "loam-cam-plate",
-        style: [styles.plate, { transform: [{ translateX }, { translateY }, { scale }] }],
-        children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
-          /* @__PURE__ */ jsxs(Defs, { children: [
-            /* @__PURE__ */ jsx(
-              Pattern,
-              {
-                id: "loam-cam-stripe",
-                patternUnits: "userSpaceOnUse",
-                width: 11,
-                height: 11,
-                patternTransform: "rotate(52)",
-                children: /* @__PURE__ */ jsx(
-                  Line,
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: false,
+      testID: "loam-placeholder-feed",
+      style: styles.root,
+      ...decorativeProps(),
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: still ? "loam-cam-plate-static" : "loam-cam-plate",
+            style: [styles.plate, { transform: [{ translateX }, { translateY }, { scale }] }],
+            children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+              /* @__PURE__ */ jsxs(Defs, { children: [
+                /* @__PURE__ */ jsx(
+                  Pattern,
                   {
-                    x1: 0,
-                    y1: 0,
-                    x2: 0,
-                    y2: 11,
-                    stroke: theme.white.a2,
-                    strokeWidth: theme.borderWidth.heavy
+                    id: "loam-cam-stripe",
+                    patternUnits: "userSpaceOnUse",
+                    width: 11,
+                    height: 11,
+                    patternTransform: "rotate(52)",
+                    children: /* @__PURE__ */ jsx(
+                      Line,
+                      {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 11,
+                        stroke: theme.white.a2,
+                        strokeWidth: theme.borderWidth.heavy
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-warm", cx: "22%", cy: "18%", rx: "62%", ry: "62%", children: [
-              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.white.a3 }),
-              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.white.a3, stopOpacity: theme.opacity[0] })
-            ] }),
-            /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-cool", cx: "78%", cy: "82%", rx: "64%", ry: "64%", children: [
-              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.black.a5 }),
-              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a5, stopOpacity: theme.opacity[0] })
+                ),
+                /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-warm", cx: "22%", cy: "18%", rx: "62%", ry: "62%", children: [
+                  /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.white.a3 }),
+                  /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.white.a3, stopOpacity: theme.opacity[0] })
+                ] }),
+                /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-cool", cx: "78%", cy: "82%", rx: "64%", ry: "64%", children: [
+                  /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.black.a5 }),
+                  /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a5, stopOpacity: theme.opacity[0] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-stripe)" }),
+              /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-warm)" }),
+              /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-cool)" })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-stripe)" }),
-          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-warm)" }),
-          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-cool)" })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(View, { testID: "loam-cam-vignette", style: styles.vignette, children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
-      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-vignette-fill", cx: "50%", cy: "50%", rx: "50%", ry: "50%", children: [
-        /* @__PURE__ */ jsx(Stop, { offset: "0.42", stopColor: theme.black.a9, stopOpacity: theme.opacity[0] }),
-        /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a9 })
-      ] }) }),
-      /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-vignette-fill)" })
-    ] }) }),
-    children,
-    /* @__PURE__ */ jsx(Text, { style: [styles.label, camMeta(theme), topInset ? { marginTop: topInset } : null], children: label })
-  ] });
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { testID: "loam-cam-vignette", style: styles.vignette, children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+          /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-vignette-fill", cx: "50%", cy: "50%", rx: "50%", ry: "50%", children: [
+            /* @__PURE__ */ jsx(Stop, { offset: "0.42", stopColor: theme.black.a9, stopOpacity: theme.opacity[0] }),
+            /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a9 })
+          ] }) }),
+          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-vignette-fill)" })
+        ] }) }),
+        children,
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, camMeta(theme), topInset ? { marginTop: topInset } : null], children: label ?? t.placeholderFeed })
+      ]
+    }
+  );
 }
 var PLATE = {
   plant: { width: "38%", height: "42%", caption: "plant subject" },
@@ -102,10 +114,13 @@ var PLATE = {
 };
 function SubjectPlate({
   profile: profileProp,
-  caption
+  caption,
+  labels
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("analyzer");
   const { styles } = useStyles(feedSheet);
+  const t = useAnalyzerLabels(labels);
+  const locale = useLoamLocale();
   const p = profile(profileProp);
   const plate = PLATE[p.id] ?? PLATE.generic;
   return /* @__PURE__ */ jsx(
@@ -115,7 +130,7 @@ function SubjectPlate({
       testID: `loam-subject-plate-${p.id}`,
       style: [styles.subjectPlate, { width: plate.width, height: plate.height }],
       ...decorativeProps(),
-      children: /* @__PURE__ */ jsx(Text, { style: [styles.subjectCaption, camMeta(theme)], children: (caption ?? plate.caption).toUpperCase() })
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.subjectCaption, camMeta(theme)], children: (caption ?? t.plate[p.id] ?? plate.caption).toLocaleUpperCase(locale) })
     }
   );
 }
@@ -147,8 +162,8 @@ var feedSheet = createStyleSheet((theme) => ({
     position: "absolute",
     left: theme.space[16],
     // Clear of the top bar, which is where the close button and the title plate
-    // sit.
-    top: theme.layout.appbarH + theme.space[8],
+    // sit, and one pill lower so the status pill never covers it.
+    top: theme.layout.appbarH + theme.space[8] + theme.space[40],
     fontSize: theme.fontSize[10]
   },
   subjectPlate: {

package/dist/chunk-RJYRJ3LD.js

@@ -0,0 +1 @@
+