@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-2OLKPG4E.js → chunk-ZVJCWXAL.js}

@@ -1,7 +1,9 @@
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { View, Pressable, Text, TextInput, ScrollView } from 'react-native';
+import { View, Pressable, Text, TextInput, ScrollView, ActivityIndicator } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -52,6 +54,8 @@ var BOTTOM_THRESHOLD = 8;
 var DEFAULT_LABELS = {
   levels: { error: "Error", warn: "Warning", info: "Info", debug: "Debug" },
   levelsShort: { error: "ERR", warn: "WARN", info: "INFO", debug: "DBG" },
+  levelCodes: { error: "ERR", warn: "WRN", info: "INF", debug: "DBG" },
+  hiddenLines: (hidden) => `${hidden.toLocaleString()} earlier ${hidden === 1 ? "line" : "lines"} hidden`,
   levelPrefix: (level) => `${level}: `,
   announcement: (level, text) => `${level}: ${text}`,
   filterByLevel: "Filter by level",
@@ -83,7 +87,9 @@ var DEFAULT_LABELS = {
   noLevelMatch: "No lines match the selected levels.",
   showAllLevels: "Show all levels",
   empty: "No log lines.",
-  jumpToLatest: "Jump to latest"
+  jumpToLatest: "Jump to latest",
+  error: "The log stream failed.",
+  loading: "Loading log"
 };
 function renderText(text, query, markStyle) {
   if (!query) return text;
@@ -129,12 +135,23 @@ function LogViewer({
   label: labelOverride,
   liveRegion = "none",
   testID,
-  motion: _motion = "full"
+  size = "md",
+  readOnly = false,
+  disabled = false,
+  loading = false,
+  error,
+  motion: _motion = "full",
+  chipStyle = "level",
+  levelBadge = "glyph",
+  toolbarDensity = "comfortable",
+  searchSize = "lg",
+  hiddenLines = 0
 }) {
   const labels = useLabels("logViewer", DEFAULT_LABELS, labelsProp);
   const label = labelOverride ?? labels.region;
   const theme = useLoamTheme("log-viewer");
   const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme);
   const scrollRef = React.useRef(null);
   const filterControlled = levelFilter !== void 0;
   const [internalFilter, setInternalFilter] = React.useState([...LOG_LEVELS]);
@@ -143,17 +160,27 @@ function LogViewer({
   const [internalSearch, setInternalSearch] = React.useState("");
   const activeSearch = searchControlled ? search : internalSearch;
   const [paused, setPaused] = React.useState(false);
+  const locked = disabled || readOnly;
+  const errorText = error === true ? labels.error : error || void 0;
+  const lineFont = size === "sm" ? theme.fontSize[12] : size === "lg" ? theme.fontSize[14] : theme.type.footnote.fontSize;
+  const lineType = {
+    fontSize: lineFont,
+    lineHeight: Math.round(theme.code.lineH * lineFont / theme.type.footnote.fontSize)
+  };
   const toggleLevel = (level) => {
+    if (locked) return;
     const next = activeFilter.includes(level) ? activeFilter.filter((l) => l !== level) : [...activeFilter, level];
     onLevelFilterChange?.(next);
     if (!filterControlled) setInternalFilter(next);
   };
   const showAllLevels = () => {
+    if (locked) return;
     const all = [...LOG_LEVELS];
     onLevelFilterChange?.(all);
     if (!filterControlled) setInternalFilter(all);
   };
   const setSearch = (value) => {
+    if (locked) return;
     onSearchChange?.(value);
     if (!searchControlled) setInternalSearch(value);
   };
@@ -177,12 +204,19 @@ function LogViewer({
   };
   const markStyle = { backgroundColor: theme.color.accentSoft, color: theme.color.accentOnSoft };
   const showJump = follow && paused;
-  const tapSlop = Math.max(0, (theme.tapMin - theme.ctl.md) / 2);
+  const tapSlop = Math.max(0, (theme.tapMin - theme.ctl.sm) / 2);
   const renderLines = () => /* @__PURE__ */ jsx(View, { style: wrap ? styles.linesStretch : void 0, children: visible.map((line) => {
     const meta = line.level ? levelMeta(theme, labels, line.level) : null;
     return /* @__PURE__ */ jsxs(View, { style: styles.line, children: [
       showTimestamps ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: formatLogTime(line.time) }) : null,
-      meta ? /* @__PURE__ */ jsxs(
+      meta && levelBadge === "code" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [styles.badgeLabel, styles.badgeCode, { color: meta.fg }],
+          accessibilityLabel: meta.label,
+          children: labels.levelCodes[line.level]
+        }
+      ) : meta ? /* @__PURE__ */ jsxs(
         View,
         {
           style: [styles.badge, { backgroundColor: meta.bg, borderColor: meta.edge }],
@@ -193,56 +227,89 @@ function LogViewer({
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsx(Text, { style: [styles.lineText, wrap ? styles.lineTextWrap : null], children: renderText(line.text, activeSearch, markStyle) })
+      /* @__PURE__ */ jsx(Text, { style: [styles.lineText, lineType, wrap ? styles.lineTextWrap : null], children: renderText(line.text, activeSearch, markStyle) })
     ] }, line.id);
   }) });
   return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.filterGroup, role: "group", accessibilityLabel: labels.filterByLevel, children: LOG_LEVELS.map((level) => {
-        const meta = levelMeta(theme, labels, level);
-        const on = activeFilter.includes(level);
-        return /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: meta.label,
-            accessibilityState: { selected: on },
-            onPress: () => toggleLevel(level),
-            hitSlop: { top: tapSlop, bottom: tapSlop },
-            style: ({ pressed }) => [
-              styles.chip,
-              on ? { backgroundColor: meta.bg, borderColor: meta.edge } : { backgroundColor: theme.color.surface2, borderColor: theme.color.border },
-              pressed && { backgroundColor: theme.state.pressed }
-            ],
-            children: [
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: meta.icon,
-                  size: theme.icon.sm,
-                  color: on ? meta.fg : theme.color.text
-                }
-              ),
-              /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, { color: on ? meta.fg : theme.color.text }], children: meta.label })
-            ]
-          },
-          level
-        );
-      }) }),
-      /* @__PURE__ */ jsxs(View, { style: styles.searchWrap, children: [
-        /* @__PURE__ */ jsx(Icon, { name: "search", size: theme.icon.sm, color: theme.color.text3 }),
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            value: activeSearch,
-            onChangeText: setSearch,
-            accessibilityLabel: labels.search,
-            placeholder: labels.searchPlaceholder,
-            placeholderTextColor: theme.color.text3,
-            style: styles.searchInput
-          }
-        )
-      ] })
+    /* @__PURE__ */ jsxs(View, { style: [styles.toolbar, disabled ? styles.disabled : null], children: [
+      /* @__PURE__ */ jsx(View, { style: styles.filterGroup, role: "group", accessibilityLabel: labels.filterByLevel, children: LOG_LEVELS.filter((l) => !(toolbarDensity === "compact" && l === "debug")).map(
+        (level) => {
+          const meta = levelMeta(theme, labels, level);
+          const on = activeFilter.includes(level);
+          return /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: meta.label,
+              accessibilityState: { selected: on, disabled: locked },
+              disabled,
+              onPress: () => toggleLevel(level),
+              hitSlop: { top: tapSlop, bottom: tapSlop },
+              style: ({ pressed }) => [
+                styles.chip,
+                // Android: the level filters are the Chip sm pill.
+                android ? { borderRadius: theme.radius.full } : null,
+                on && chipStyle === "neutral" ? { backgroundColor: theme.color.surface3, borderColor: theme.edge.neutral } : on ? { backgroundColor: meta.bg, borderColor: meta.edge } : {
+                  backgroundColor: theme.color.surface2,
+                  borderColor: theme.color.border
+                },
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: [
+                chipStyle === "neutral" ? on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: theme.color.text }) : null : /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: meta.icon,
+                    size: theme.icon.sm,
+                    color: on ? meta.fg : theme.color.text
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: [
+                      styles.chipLabel,
+                      android ? styles.chipLabelAndroid : null,
+                      { color: on && chipStyle === "level" ? meta.fg : theme.color.text }
+                    ],
+                    children: meta.label
+                  }
+                )
+              ]
+            },
+            level
+          );
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [
+            styles.searchWrap,
+            {
+              height: theme.ctl[searchSize],
+              paddingHorizontal: theme.ctl.px[searchSize],
+              borderRadius: theme.ctl.r[searchSize]
+            }
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "search", size: theme.icon.sm, color: theme.color.text3 }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: activeSearch,
+                onChangeText: setSearch,
+                accessibilityLabel: labels.search,
+                editable: !locked,
+                "aria-disabled": disabled || void 0,
+                placeholder: labels.searchPlaceholder,
+                placeholderTextColor: theme.color.text3,
+                style: [styles.searchInput, { fontSize: theme.fontSize[android ? 16 : 17] }]
+              }
+            )
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.surfaceWrap, children: [
       /* @__PURE__ */ jsxs(
@@ -254,12 +321,19 @@ function LogViewer({
           focusable: true,
           accessibilityLabel: label,
           accessibilityLiveRegion: liveRegion,
+          "aria-busy": loading || void 0,
+          "aria-invalid": errorText ? true : void 0,
           onScroll,
           onContentSizeChange,
           scrollEventThrottle: 16,
-          style: [styles.surface, { maxHeight }],
+          style: [
+            styles.surface,
+            { maxHeight },
+            errorText ? { borderColor: theme.color.danger } : null
+          ],
           contentContainerStyle: styles.surfaceContent,
           children: [
+            hiddenLines > 0 ? /* @__PURE__ */ jsx(View, { style: styles.notice, accessibilityRole: "text", children: /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: labels.hiddenLines(hiddenLines) }) }) : null,
             hiddenCount > 0 ? /* @__PURE__ */ jsx(View, { style: styles.notice, accessibilityRole: "text", children: /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: labels.truncated(hiddenCount, maxLines) }) }) : null,
             visible.length === 0 ? lines.length > 0 ? (
               // Lines exist but the level filter hides every one: say so and
@@ -267,13 +341,13 @@ function LogViewer({
               /* @__PURE__ */ jsxs(View, { style: styles.emptyRow, children: [
                 /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.noLevelMatch }),
                 /* @__PURE__ */ jsx(
-                  Pressable,
+                  Button,
                   {
-                    accessibilityRole: "button",
+                    variant: "ghost",
+                    size: "sm",
                     accessibilityLabel: labels.showAllLevels,
                     onPress: showAllLevels,
-                    hitSlop: { top: tapSlop, bottom: tapSlop },
-                    children: /* @__PURE__ */ jsx(Text, { style: styles.emptyAction, children: labels.showAllLevels })
+                    children: labels.showAllLevels
                   }
                 )
               ] })
@@ -281,25 +355,40 @@ function LogViewer({
               // No-wrap: a horizontal ScrollView lets wide lines scroll sideways
               // rather than soft-wrapping. Vertical follow stays on the outer view.
               /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: true, focusable: true, children: renderLines() })
-            )
+            ),
+            loading ? /* @__PURE__ */ jsx(View, { style: styles.loadingRow, testID: "log-viewer-loading", children: /* @__PURE__ */ jsx(
+              ActivityIndicator,
+              {
+                size: "small",
+                color: theme.color.text3,
+                accessibilityLabel: labels.loading
+              }
+            ) }) : null
           ]
         }
       ),
-      showJump ? /* @__PURE__ */ jsxs(
+      showJump ? /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: styles.jumpAnchor, children: /* @__PURE__ */ jsxs(
         Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel: labels.jumpToLatest,
           onPress: jumpToLatest,
-          hitSlop: { top: tapSlop, bottom: tapSlop },
-          style: ({ pressed }) => [styles.jump, pressed && { opacity: theme.state.pressedOpacity }],
+          hitSlop: tapSlop,
+          style: ({ pressed }) => [
+            styles.jump,
+            pressed && { opacity: theme.state.pressedOpacity }
+          ],
           children: [
-            /* @__PURE__ */ jsx(Icon, { name: "arrow-down", size: theme.icon.sm, color: theme.color.accentInk }),
+            /* @__PURE__ */ jsx(Icon, { name: "arrow-down", size: theme.icon.sm, color: theme.color.surface }),
             /* @__PURE__ */ jsx(Text, { style: styles.jumpLabel, children: labels.jumpToLatest })
           ]
         }
-      ) : null
-    ] })
+      ) }) : null
+    ] }),
+    errorText ? /* @__PURE__ */ jsxs(View, { style: styles.errorRow, role: "alert", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.danger }),
+      /* @__PURE__ */ jsx(Text, { style: styles.errorText, children: errorText })
+    ] }) : null
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
@@ -315,8 +404,8 @@ var sheet = createStyleSheet((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s1,
-    height: theme.ctl.md,
-    paddingHorizontal: theme.space.s2,
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.ctl.px.sm,
     borderRadius: theme.radius.sm,
     borderWidth: theme.borderWidth.base
   },
@@ -325,26 +414,40 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.type.footnote.fontSize,
     fontWeight: theme.fontWeight.semibold
   },
+  chipLabelAndroid: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium },
   searchWrap: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s2,
     flexGrow: 1,
     flexBasis: theme.space[140],
-    height: theme.ctl.md,
-    paddingHorizontal: theme.space.s2,
-    borderRadius: theme.radius.sm,
+    // Search is Input lg 44 on both phones.
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.ctl.px.lg,
+    borderRadius: theme.ctl.r.lg,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border,
     backgroundColor: theme.color.surface2
   },
   searchInput: {
     flex: 1,
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.footnote.fontSize,
+    fontFamily: theme.font.sans,
     color: theme.color.text,
     paddingVertical: 0
   },
+  disabled: { opacity: theme.state.disabledOpacity },
+  loadingRow: {
+    alignItems: "flex-start",
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s1
+  },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  errorText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.danger
+  },
   surfaceWrap: { position: "relative" },
   surface: {
     borderRadius: theme.radius.lg,
@@ -374,14 +477,6 @@ var sheet = createStyleSheet((theme) => ({
     paddingVertical: theme.space.s2
   },
   emptyRow: { flexDirection: "row", flexWrap: "wrap", alignItems: "center" },
-  emptyAction: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.footnote.fontSize,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.code.fg,
-    textDecorationLine: "underline",
-    paddingHorizontal: theme.space.s3
-  },
   line: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -408,6 +503,7 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.type.caption1.fontSize,
     fontWeight: theme.fontWeight.bold
   },
+  badgeCode: { marginTop: theme.space[1] },
   lineText: {
     fontFamily: theme.font.mono,
     fontSize: theme.type.footnote.fontSize,
@@ -415,24 +511,30 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.code.fg
   },
   lineTextWrap: { flex: 1, flexShrink: 1 },
-  jump: {
+  jumpAnchor: {
     position: "absolute",
     bottom: theme.space.s3,
-    end: theme.space.s3,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  },
+  // The Timeline jump pill: chip sm 30, 13 / 600, px 12, inverse ink, sh-md.
+  jump: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s1,
-    height: theme.ctl.md,
+    height: theme.ctl.sm,
     paddingHorizontal: theme.space.s3,
     borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accent,
+    backgroundColor: theme.color.text,
     ...theme.shadow.md
   },
   jumpLabel: {
     fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.accentInk
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.surface
   }
 }));
 

package/dist/{chunk-YAAHPATV.js → chunk-ZYQ23DPT.js}

@@ -1,9 +1,9 @@
-import { useTourHost, useTourInsets, useAnchorRect, Beacon } from './chunk-H7DWSL4O.js';
+import { useTourHost, useTourInsets, useAnchorRect, Beacon } from './chunk-36DA3IPO.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Pressable, Animated, Easing, Text, Platform, findNodeHandle, AccessibilityInfo, LayoutAnimation } from 'react-native';
+import { View, Pressable, Animated, Easing, Text, BackHandler, Platform, findNodeHandle, AccessibilityInfo, LayoutAnimation } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { resolveAnchoredPosition, centreInContainer } from '@btndprojects/loam-engage';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -112,14 +112,19 @@ function Coachmark({
   arrow = true,
   width,
   motion = "full",
-  labels: labelsProp
+  labels: labelsProp,
+  titleStyle,
+  bodyStyle,
+  dockOffset,
+  presentation = "anchored"
 }) {
   const labels = useLabels("coachmark", DEFAULT_LABELS, labelsProp);
   const theme = useLoamTheme("coachmark");
   const { styles } = useStyles(sheet);
   const host = useTourHost();
   const insets = useTourInsets();
-  const mode = variant ?? (target != null ? "docked" : "centered");
+  const asSheet = presentation === "sheet";
+  const mode = asSheet ? "docked" : variant ?? (target != null ? "docked" : "centered");
   const rect = useAnchorRect(mode === "anchored" ? target ?? null : null);
   const [size, setSize] = React.useState(null);
   const fade = React.useRef(new Animated.Value(0)).current;
@@ -128,6 +133,14 @@ function Coachmark({
   const visible = mode !== "anchored" || size !== null;
   const cardRef = React.useRef(null);
   const titleRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!onClose) return;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      onClose();
+      return true;
+    });
+    return () => sub.remove();
+  }, [onClose]);
   const titleId = React.useId();
   React.useEffect(() => {
     if (Platform.OS !== "web" || typeof document === "undefined") return;
@@ -232,13 +245,17 @@ function Coachmark({
   } else if (mode === "docked") {
     position = {
       position: "absolute",
-      left: theme.space[10] + insets.left,
-      right: theme.space[10] + insets.right,
+      left: asSheet ? insets.left : theme.space[10] + insets.left,
+      right: asSheet ? insets.right : theme.space[10] + insets.right,
       // Safe-area insets are the host app's to supply — `react-native-safe-area-context`
       // reports them and a token cannot — but they no longer have to be applied by hand:
       // `TourHost` takes an `insets` prop and this reads it. Zero when none is given, so
       // the arithmetic is unconditional and correct on a device with no home indicator.
-      bottom: theme.space[14] + insets.bottom
+      bottom: (asSheet ? 0 : dockOffset ?? theme.space[14]) + insets.bottom,
+      ...asSheet ? {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      } : null
     };
   }
   const facing = mode === "anchored" && placed ? placed.side : mode === "docked" ? "top" : null;
@@ -309,23 +326,14 @@ function Coachmark({
               style: ({ pressed }) => [
                 styles.iconButton,
                 !kicker && !counter && !headerActions ? styles.pushEnd : null,
-                pressed ? { opacity: theme.state.pressedOpacity } : null
+                pressed ? { backgroundColor: theme.state.pressed } : null
               ],
               children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
             }
           ) : null
         ] }) : null,
-        title ? /* @__PURE__ */ jsx(
-          Text,
-          {
-            ref: titleRef,
-            nativeID: titleId,
-            accessibilityRole: "header",
-            style: styles.title,
-            children: title
-          }
-        ) : null,
-        body ? /* @__PURE__ */ jsx(Text, { style: styles.body, children: body }) : null,
+        title ? /* @__PURE__ */ jsx(Text, { ref: titleRef, nativeID: titleId, accessibilityRole: "header", style: [styles.title, titleStyle], children: title }) : null,
+        body ? /* @__PURE__ */ jsx(Text, { style: [styles.body, bodyStyle], children: body }) : null,
         media,
         children,
         hint ? /* @__PURE__ */ jsx(CoachmarkHint, { motion, children: hint }) : null,
@@ -351,6 +359,8 @@ function Hotspot({
   onOpenChange,
   onSpent,
   motion = "full",
+  size = "lg",
+  presentation = "anchored",
   labels
 }) {
   const theme = useLoamTheme("coachmark");
@@ -387,6 +397,8 @@ function Hotspot({
         title,
         body,
         motion,
+        width: theme.panel[size],
+        presentation,
         onClose: () => setOpen(false),
         actions: action,
         labels
@@ -402,7 +414,8 @@ var sheet = createStyleSheet((theme) => ({
     borderColor: theme.color.border,
     padding: theme.space[16],
     gap: theme.space[10],
-    ...theme.shadow.lg
+    // Non-modal, so the popover elevation rather than the dialog's.
+    ...theme.shadow.md
   },
   arrow: {
     position: "absolute",
@@ -413,14 +426,12 @@ var sheet = createStyleSheet((theme) => ({
     borderColor: theme.color.border,
     transform: [{ rotate: "45deg" }]
   },
-  header: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
   headerActions: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
-  pushEnd: { marginLeft: "auto" },
+  pushEnd: { marginStart: "auto" },
   kicker: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
     color: theme.color.accentStrong
   },
   counter: {
@@ -429,12 +440,13 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text3,
     fontVariant: ["tabular-nums"]
   },
+  // A ghost icon Button sm: its square, its corner, its pressed layer.
   iconButton: {
     width: theme.ctl.sm,
     height: theme.ctl.sm,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.full
+    borderRadius: theme.ctl.r.sm
   },
   title: {
     fontFamily: theme.font.display,
@@ -454,9 +466,12 @@ var sheet = createStyleSheet((theme) => ({
     alignSelf: "flex-start",
     flexDirection: "row",
     alignItems: "center",
+    // iOS / Android: the tonal Chip sm 30 (Refinement 36, Final 09 iOS row),
+    // ps 10 pe 12. The web hint is the 24 surface-2 chip.
     gap: theme.space[7],
-    paddingVertical: theme.space[5],
-    paddingHorizontal: theme.space[11],
+    height: theme.ctl.sm,
+    paddingStart: theme.space[10],
+    paddingEnd: theme.space[12],
     borderRadius: theme.radius.full,
     backgroundColor: theme.color.accentSoft,
     borderWidth: theme.borderWidth.thin,
@@ -468,11 +483,11 @@ var sheet = createStyleSheet((theme) => ({
     borderRadius: theme.radius.full,
     backgroundColor: theme.color.accentOnSoft
   },
+  // Chip sm label: 13 / 500, sentence case.
   hintText: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.medium,
     color: theme.color.accentOnSoft
   },
   footer: {

package/dist/coachmark/index.js

@@ -1,7 +1,11 @@
 import '../chunk-J4KLDGI4.js';
-export { Coachmark, CoachmarkArrow, CoachmarkDots, CoachmarkHint, Hotspot } from '../chunk-YAAHPATV.js';
-import '../chunk-H7DWSL4O.js';
+export { Coachmark, CoachmarkArrow, CoachmarkDots, CoachmarkHint, Hotspot } from '../chunk-ZYQ23DPT.js';
+import '../chunk-36DA3IPO.js';
+import '../chunk-Z7I4ZSO6.js';
+import '../chunk-KXLDK6HB.js';
+import '../chunk-43K3BLXV.js';
 import '../chunk-APCWFOZW.js';
-import '../chunk-UXGIW7OK.js';
+import '../chunk-2YKVID2V.js';
+import '../chunk-PCEFCOLN.js';
 import '../chunk-J64KGCGX.js';
 import '../chunk-I2KLQ2HA.js';

package/dist/code-block/index.js

@@ -1,6 +1,7 @@
 import '../chunk-ZK2H4O5P.js';
-export { CodeBlock } from '../chunk-RXSCIO6W.js';
-import '../chunk-C6APNDVA.js';
+export { CodeBlock } from '../chunk-O76QXRBV.js';
+import '../chunk-TYOSA7JG.js';
+import '../chunk-TH4PW2WU.js';
 import '../chunk-APCWFOZW.js';
-import '../chunk-UXGIW7OK.js';
+import '../chunk-PCEFCOLN.js';
 import '../chunk-I2KLQ2HA.js';