@tastic/hud 0.24.0 → 0.25.0

package/dist/chrome/index.mjs

@@ -24,17 +24,18 @@ import {
   useCompactDialog,
   usePopoverHost,
   useWellColors
-} from "../chunk-BXG44LIA.mjs";
+} from "../chunk-AJD4FMG5.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,
   OverlayBackdrop,
   OverlayCard,
+  SecondaryButton,
   isCompactDialogHeight,
   overlayActionStyles,
   overlayStyles,
   useOverlayCardColors
-} from "../chunk-PUF6TABL.mjs";
+} from "../chunk-CBH7GQKI.mjs";
 export {
   AchievementCatalogSection,
   AchievementRow,
@@ -54,6 +55,7 @@ export {
   PopoverBody,
   PressAwayOverlay,
   RotatedFrame,
+  SecondaryButton,
   StaggeredWord,
   StatRow,
   StatSection,

package/dist/{chunk-BXG44LIA.mjs → chunk-AJD4FMG5.mjs}

@@ -2,11 +2,12 @@ import {
   DialogHeader,
   OverlayBackdrop,
   OverlayCard,
+  SecondaryButton,
   isCompactDialogHeight,
   overlayActionStyles,
   overlayStyles,
   useOverlayCardColors
-} from "./chunk-PUF6TABL.mjs";
+} from "./chunk-CBH7GQKI.mjs";
 
 // src/wellSurface.ts
 import { useAutoPaperTheme } from "@rific/auto-paper";
@@ -223,7 +224,7 @@ function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onC
     /* @__PURE__ */ jsx6(DialogHeader, { icon, title, color: accent, compact }),
     /* @__PURE__ */ jsx6(Text5, { variant: "bodyLarge", style: [styles5.body, { color: fg }], children: message }),
     /* @__PURE__ */ jsxs6(View4, { style: overlayActionStyles.actions, children: [
-      showCancel && /* @__PURE__ */ jsx6(Button, { mode: "outlined", onPress: onCancel, style: overlayActionStyles.actionButton, children: cancelLabel }),
+      showCancel && /* @__PURE__ */ jsx6(SecondaryButton, { onPress: onCancel, children: cancelLabel }),
       /* @__PURE__ */ jsx6(Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
     ] })
   ] }) }) });
@@ -714,7 +715,7 @@ var styles10 = StyleSheet10.create({
 });
 
 // src/useAutoAlign.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState5 } from "react";
 import { useWindowDimensions as useWindowDimensions4 } from "react-native";
 var EDGE_MARGIN = 12;
 function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
@@ -726,7 +727,7 @@ function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   const [newDx, newDy, newWidth, newHeight] = rotation === 180 ? [-dx, -dy, width, height] : rotation === 90 ? [-dy, dx, height, width] : [dy, -dx, height, width];
   return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
 }
-function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
+function useAutoAlign(open, contentWidth, contentHeight, rotation = 0, bounds) {
   const triggerRef = useRef3(null);
   const { width: windowWidth, height: windowHeight } = useWindowDimensions4();
   const [align, setAlign] = useState5("center");
@@ -738,26 +739,34 @@ function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
     setPrevOpen(open);
     if (open) setMeasured(false);
   }
-  const measure = useCallback3(() => {
-    triggerRef.current?.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
+  useEffect2(() => {
+    if (!open) return;
+    const place = (limits) => (rawX, rawY, rawWidth, rawHeight) => {
       const { x, y, width: triggerWidth, height: triggerHeight } = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
       const centerX = x + triggerWidth / 2;
-      const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN;
-      const overflowsLeft = centerX - contentWidth / 2 < EDGE_MARGIN;
+      const overflowsRight = centerX + contentWidth / 2 > limits.right - EDGE_MARGIN;
+      const overflowsLeft = centerX - contentWidth / 2 < limits.left + EDGE_MARGIN;
       if (overflowsRight && !overflowsLeft) setAlign("right");
       else if (overflowsLeft && !overflowsRight) setAlign("left");
       else setAlign("center");
-      const roomBelow = windowHeight - (y + triggerHeight) - EDGE_MARGIN;
-      const roomAbove = y - EDGE_MARGIN;
+      const roomBelow = limits.bottom - (y + triggerHeight) - EDGE_MARGIN;
+      const roomAbove = y - limits.top - EDGE_MARGIN;
       const above = contentHeight > roomBelow && roomAbove > roomBelow;
       setVerticalAlign(above ? "above" : "below");
       setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
       setMeasured(true);
+    };
+    const screen = { left: 0, top: 0, right: windowWidth, bottom: windowHeight };
+    const boundsView = bounds?.current;
+    if (!boundsView) {
+      triggerRef.current?.measureInWindow(place(screen));
+      return;
+    }
+    boundsView.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
+      const b = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
+      triggerRef.current?.measureInWindow(place({ left: Math.max(b.x, 0), top: Math.max(b.y, 0), right: Math.min(b.x + b.width, windowWidth), bottom: Math.min(b.y + b.height, windowHeight) }));
     });
-  }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
-  useEffect2(() => {
-    if (open) measure();
-  }, [open, measure]);
+  }, [open, contentWidth, contentHeight, windowWidth, windowHeight, rotation, bounds]);
   return { align, maxHeight, measured, triggerRef, verticalAlign };
 }
 
@@ -790,6 +799,7 @@ import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
+var SWATCH_RING_WIDTH = 2;
 var SWATCHES_PADDING = 8;
 var SWATCHES_GAP = 6;
 var SWATCHES_BORDER_WIDTH = 2;
@@ -807,14 +817,17 @@ function getInlineColorPickerContentSize(swatchCount, windowWidth, columns) {
   const height = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * rows + SWATCHES_GAP * (rows - 1);
   return { width, height };
 }
-function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
+function SwatchDrawing({ size, children }) {
+  return /* @__PURE__ */ jsx13(View11, { style: [styles12.drawing, { borderRadius: size / 2, height: size, width: size }], children });
+}
+function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE, renderSwatch, bounds }) {
   const ambientRotation = useRotation4();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = useWindowDimensions5();
   const { width: swatchesWidth, height: swatchesHeight } = getInlineColorPickerContentSize(swatches.length, windowWidth, columns);
   const open = host.openId === id;
-  const auto = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation);
+  const auto = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation, bounds);
   const placement = alignOverride ?? auto;
   const { maxHeight, measured, triggerRef, verticalAlign } = placement;
   const align = forcedAlign ?? placement.align;
@@ -822,13 +835,21 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const displayValue = displayFor(value);
   const contrastColor = getContrastColor(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
+  const triggerDrawing = renderSwatch?.(displayValue, size, "trigger") ?? null;
   return /* @__PURE__ */ jsxs12(View11, { style: [styles12.anchor, open && styles12.anchorOpen], children: [
-    /* @__PURE__ */ jsx13(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles12.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx13(View11, { ref: triggerRef, collapsable: false, style: styles12.triggerMeasure, children: tag ? /* @__PURE__ */ jsx13(Text8, { style: [styles12.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx13(Icon3, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx13(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles12.trigger, triggerDrawing === null && { backgroundColor: displayValue }, { borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsxs12(View11, { ref: triggerRef, collapsable: false, style: styles12.triggerMeasure, children: [
+      triggerDrawing !== null && /* @__PURE__ */ jsx13(SwatchDrawing, { size, children: triggerDrawing }),
+      tag ? /* @__PURE__ */ jsx13(Text8, { style: [styles12.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx13(Icon3, { source: icon, size: size * 0.6, color: contrastColor })
+    ] }) }),
     /* @__PURE__ */ jsx13(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx13(ScrollView, { style: [styles12.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles12.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
       const swatchDisplay = displayFor(swatch.value);
+      const contrast = getContrastColor(swatchDisplay);
+      const drawnSize = selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE;
+      const drawing = renderSwatch?.(swatchDisplay, drawnSize, "swatch") ?? null;
+      const mark = selected ? /* @__PURE__ */ jsx13(Icon3, { source: "check", size: 16, color: contrast }) : swappable ? /* @__PURE__ */ jsx13(Icon3, { source: "swap-horizontal", size: 16, color: contrast }) : taken ? /* @__PURE__ */ jsx13(Icon3, { source: "close", size: 16, color: contrast }) : /* @__PURE__ */ jsx13(View11, {});
       return /* @__PURE__ */ jsx13(
         TouchableRipple2,
         {
@@ -838,8 +859,11 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
             if (autoDismiss) host.close();
           },
           borderless: true,
-          style: [styles12.swatch, { backgroundColor: swatchDisplay }, selected && styles12.swatchSelected, taken && !swappable && styles12.swatchTaken],
-          children: selected ? /* @__PURE__ */ jsx13(Icon3, { source: "check", size: 16, color: getContrastColor(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx13(Icon3, { source: "swap-horizontal", size: 16, color: getContrastColor(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx13(Icon3, { source: "close", size: 16, color: getContrastColor(swatchDisplay) }) : /* @__PURE__ */ jsx13(View11, {})
+          style: [styles12.swatch, drawing === null && { backgroundColor: swatchDisplay }, selected && styles12.swatchSelected, taken && !swappable && styles12.swatchTaken],
+          children: drawing !== null ? /* @__PURE__ */ jsxs12(View11, { style: styles12.swatchFace, children: [
+            /* @__PURE__ */ jsx13(SwatchDrawing, { size: drawnSize, children: drawing }),
+            mark
+          ] }) : mark
         },
         swatch.value
       );
@@ -856,6 +880,14 @@ var styles12 = StyleSheet12.create({
   anchorOpen: {
     zIndex: 100
   },
+  // A renderSwatch drawing (see SwatchDrawing).
+  drawing: {
+    left: 0,
+    overflow: "hidden",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0
+  },
   swatch: {
     alignItems: "center",
     borderRadius: SWATCH_SIZE / 2,
@@ -863,9 +895,19 @@ var styles12 = StyleSheet12.create({
     justifyContent: "center",
     width: SWATCH_SIZE
   },
+  // A drawn swatch (see SwatchDrawing) and its mark: the whole circle inside the selected one's ring.
+  swatchFace: {
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
   swatchSelected: {
     borderColor: "#ffffff",
-    borderWidth: 2
+    borderWidth: SWATCH_RING_WIDTH
   },
   swatchTaken: {
     opacity: 0.35
@@ -918,13 +960,13 @@ var styles12 = StyleSheet12.create({
 });
 
 // src/usePopoverHost.ts
-import { useCallback as useCallback4, useState as useState6 } from "react";
+import { useCallback as useCallback3, useState as useState6 } from "react";
 function usePopoverHost() {
   const [openId, setOpenId] = useState6(null);
-  const toggle = useCallback4((id) => {
+  const toggle = useCallback3((id) => {
     setOpenId((prev) => prev === id ? null : id);
   }, []);
-  const close = useCallback4(() => setOpenId(null), []);
+  const close = useCallback3(() => setOpenId(null), []);
   return { openId, toggle, close };
 }
 

package/dist/{chunk-PUF6TABL.mjs → chunk-CBH7GQKI.mjs}

@@ -125,6 +125,14 @@ var styles2 = StyleSheet3.create({
   card: { overflow: "hidden" }
 });
 
+// src/SecondaryButton.tsx
+import { Button } from "@rific/feedback-press";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function SecondaryButton({ style, ...props }) {
+  const { fg } = useOverlayCardColors();
+  return /* @__PURE__ */ jsx3(Button, { mode: "outlined", textColor: fg, ...props, style: [overlayActionStyles.actionButton, style] });
+}
+
 export {
   COMPACT_DIALOG_HEIGHT,
   isCompactDialogHeight,
@@ -133,5 +141,6 @@ export {
   overlayActionStyles,
   useOverlayCardColors,
   OverlayBackdrop,
-  OverlayCard
+  OverlayCard,
+  SecondaryButton
 };

package/dist/guide/index.js

@@ -101,7 +101,7 @@ var import_react2 = require("react");
 
 // src/guide/HowToPlayDialog.tsx
 var import_auto_paper4 = require("@rific/auto-paper");
-var import_feedback_press = require("@rific/feedback-press");
+var import_feedback_press2 = require("@rific/feedback-press");
 var import_react = require("react");
 var import_react_native5 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
@@ -234,8 +234,16 @@ var styles3 = import_react_native4.StyleSheet.create({
   card: { overflow: "hidden" }
 });
 
-// src/guide/HowToPlayDialog.tsx
+// src/SecondaryButton.tsx
+var import_feedback_press = require("@rific/feedback-press");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function SecondaryButton({ style, ...props }) {
+  const { fg } = useOverlayCardColors();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.Button, { mode: "outlined", textColor: fg, ...props, style: [overlayActionStyles.actionButton, style] });
+}
+
+// src/guide/HowToPlayDialog.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var OVERLAY_GUTTER = 24;
 var CARD_PADDING = 24;
 var MAX_CARD_WIDTH = 360;
@@ -298,23 +306,23 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0, title = "How to
     targetRef.current = null;
     syncToOffset(e.nativeEvent.contentOffset.x);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverlayBackdrop, { style: styles4.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(OverlayCard, { accessibilityViewIsModal: true, style: [styles4.card, { width: cardWidth, maxHeight }, rotationStyle], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogHeader, { icon, title, compact }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.ScrollView, { ref: scrollRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, scrollEventThrottle: 16, onMomentumScrollEnd: handleMomentumEnd, style: [styles4.pager, { width: pageWidth }], children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.ScrollView, { nestedScrollEnabled: true, showsVerticalScrollIndicator: false, style: { width: pageWidth }, contentContainerStyle: [styles4.page, compact && styles4.pageCompact], children: [
-      step.art !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { style: [styles4.art, { height: artHeight, backgroundColor: artBackground }], children: step.art }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "headlineSmall", style: [styles4.title, { color: fg }], children: step.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: [styles4.body, { color: fg }], children: step.body })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OverlayBackdrop, { style: styles4.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(OverlayCard, { accessibilityViewIsModal: true, style: [styles4.card, { width: cardWidth, maxHeight }, rotationStyle], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogHeader, { icon, title, compact }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.ScrollView, { ref: scrollRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, scrollEventThrottle: 16, onMomentumScrollEnd: handleMomentumEnd, style: [styles4.pager, { width: pageWidth }], children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.ScrollView, { nestedScrollEnabled: true, showsVerticalScrollIndicator: false, style: { width: pageWidth }, contentContainerStyle: [styles4.page, compact && styles4.pageCompact], children: [
+      step.art !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [styles4.art, { height: artHeight, backgroundColor: artBackground }], children: step.art }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: "headlineSmall", style: [styles4.title, { color: fg }], children: step.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: [styles4.body, { color: fg }], children: step.body })
     ] }, i)) }),
-    steps.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles4.dots, children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { style: i === index ? [styles4.dot, { backgroundColor: colors.primary }] : [styles4.dot, styles4.dotInactive, { backgroundColor: fgMuted }] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: overlayActionStyles.actions, children: [
-      !isOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: isFirst ? onSkip : () => goTo(index - 1), style: overlayActionStyles.actionButton, children: isFirst ? "Skip" : "Back" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.Button, { mode: "contained", onPress: isLast ? onFinish : () => goTo(index + 1), style: isOnly ? overlayActionStyles.actionButtonSingle : overlayActionStyles.actionButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: isLast ? "Ready" : "Next" })
+    steps.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles4.dots, children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: i === index ? [styles4.dot, { backgroundColor: colors.primary }] : [styles4.dot, styles4.dotInactive, { backgroundColor: fgMuted }] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: overlayActionStyles.actions, children: [
+      !isOnly && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SecondaryButton, { onPress: isFirst ? onSkip : () => goTo(index - 1), children: isFirst ? "Skip" : "Back" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: isLast ? onFinish : () => goTo(index + 1), style: isOnly ? overlayActionStyles.actionButtonSingle : overlayActionStyles.actionButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: isLast ? "Ready" : "Next" })
     ] })
   ] }) }) });
 }
 function HowToPlayDialog({ visible, steps, ...rest }) {
   if (!visible || steps.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HowToPlayCard, { steps, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HowToPlayCard, { steps, ...rest });
 }
 var styles4 = import_react_native5.StyleSheet.create({
   art: {
@@ -365,7 +373,7 @@ var styles4 = import_react_native5.StyleSheet.create({
 });
 
 // src/guide/GuideProvider.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var noop = () => {
 };
 var GuideContext = (0, import_react2.createContext)({ isOpen: false, open: noop, close: noop, requestAutoShow: noop });
@@ -384,9 +392,9 @@ function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, c
     setIsOpen(true);
   }, [unseen]);
   const value = (0, import_react2.useMemo)(() => ({ isOpen, open, close, requestAutoShow }), [isOpen, open, close, requestAutoShow]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(GuideContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(GuideContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
   ] });
 }
 function useGuide() {
@@ -442,7 +450,7 @@ function createReturningPlayerMigrate(storage, legacyKeys) {
 var import_auto_paper5 = require("@rific/auto-paper");
 var import_react_native6 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ICON = {
   keyboard: { source: "keyboard-outline", size: 56 },
   mouse: { source: "mouse-outline", size: 44 }
@@ -452,11 +460,11 @@ function SeatDevicesHint({ devices, seatColors }) {
   const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
   const tints = seatColors ?? [colors.primary, colors.secondary];
   const accessibilityLabel = devices.map((device, i) => `Player ${i + 1} uses the ${device}`).join(", ");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { accessible: true, accessibilityLabel, style: styles5.row, children: ORDER.map((device) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { accessible: true, accessibilityLabel, style: styles5.row, children: ORDER.map((device) => {
     const seats = devices.flatMap((d, i) => d === device ? [i] : []);
     if (seats.length === 0) return null;
     const color = seats.length === 1 ? tints[seats[0]] ?? colors.onSurface : colors.onSurface;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper4.Icon, { source: ICON[device].source, size: ICON[device].size, color }, device);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.Icon, { source: ICON[device].source, size: ICON[device].size, color }, device);
   }) });
 }
 var styles5 = import_react_native6.StyleSheet.create({
@@ -471,21 +479,21 @@ var styles5 = import_react_native6.StyleSheet.create({
 var import_auto_paper6 = require("@rific/auto-paper");
 var import_react_native7 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEVICE_WIDTH = 88;
 var DEVICE_HEIGHT = 120;
 function SeatDiagram({ topColor, bottomColor, topLabel = "P2", bottomLabel = "P1" }) {
   const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
   const top = topColor ?? colors.secondary;
   const bottom = bottomColor ?? colors.primary;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { accessible: true, accessibilityLabel: `${bottomLabel} plays the bottom half, ${topLabel} plays the top half`, style: [styles6.device, { borderColor: colors.onSurface }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [styles6.half, { borderColor: top }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [import_react_native7.StyleSheet.absoluteFill, styles6.tint, { backgroundColor: top }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Text, { variant: "titleMedium", style: [styles6.label, styles6.flipped, { color: top }], children: topLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { accessible: true, accessibilityLabel: `${bottomLabel} plays the bottom half, ${topLabel} plays the top half`, style: [styles6.device, { borderColor: colors.onSurface }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: [styles6.half, { borderColor: top }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: [import_react_native7.StyleSheet.absoluteFill, styles6.tint, { backgroundColor: top }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper5.Text, { variant: "titleMedium", style: [styles6.label, styles6.flipped, { color: top }], children: topLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [styles6.half, styles6.bottomHalf, { borderColor: bottom }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [import_react_native7.StyleSheet.absoluteFill, styles6.tint, { backgroundColor: bottom }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Text, { variant: "titleMedium", style: [styles6.label, { color: bottom }], children: bottomLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: [styles6.half, styles6.bottomHalf, { borderColor: bottom }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: [import_react_native7.StyleSheet.absoluteFill, styles6.tint, { backgroundColor: bottom }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper5.Text, { variant: "titleMedium", style: [styles6.label, { color: bottom }], children: bottomLabel })
     ] })
   ] });
 }
@@ -525,7 +533,7 @@ var import_react3 = require("react");
 var import_react_native8 = require("react-native");
 var import_react_native_paper6 = require("react-native-paper");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DOT_COUNT = 7;
 var FINGER_SIZE = 28;
 var MOUSE_SIZE = 30;
@@ -555,10 +563,10 @@ function SwipeHint({ direction = "right", pointer = "finger", color, length = 96
     };
   });
   const axis = horizontal ? sign > 0 ? "row" : "row-reverse" : sign > 0 ? "column" : "column-reverse";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { accessibilityLabel: `${pointer === "mouse" ? "Drag" : "Swipe"} ${direction}`, accessible: true, style: [styles7.path, { flexDirection: axis }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: [styles7.dots, { flexDirection: axis, [horizontal ? "width" : "height"]: length }], children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: [styles7.dot, { backgroundColor: tint, opacity: 0.35 + 0.65 * i / (DOT_COUNT - 1) }] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Icon, { source: ARROW_ICON[direction], size: 28, color: tint }),
-    pointer === "mouse" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_reanimated2.default.View, { style: [styles7.mouse, fingerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Icon, { source: "mouse", size: MOUSE_SIZE, color: tint }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_reanimated2.default.View, { style: [styles7.finger, { borderColor: tint }, fingerStyle] })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { accessibilityLabel: `${pointer === "mouse" ? "Drag" : "Swipe"} ${direction}`, accessible: true, style: [styles7.path, { flexDirection: axis }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { style: [styles7.dots, { flexDirection: axis, [horizontal ? "width" : "height"]: length }], children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { style: [styles7.dot, { backgroundColor: tint, opacity: 0.35 + 0.65 * i / (DOT_COUNT - 1) }] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper6.Icon, { source: ARROW_ICON[direction], size: 28, color: tint }),
+    pointer === "mouse" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated2.default.View, { style: [styles7.mouse, fingerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper6.Icon, { source: "mouse", size: MOUSE_SIZE, color: tint }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated2.default.View, { style: [styles7.finger, { borderColor: tint }, fingerStyle] })
   ] });
 }
 var styles7 = import_react_native8.StyleSheet.create({

package/dist/guide/index.mjs

@@ -2,10 +2,11 @@ import {
   DialogHeader,
   OverlayBackdrop,
   OverlayCard,
+  SecondaryButton,
   isCompactDialogHeight,
   overlayActionStyles,
   useOverlayCardColors
-} from "../chunk-PUF6TABL.mjs";
+} from "../chunk-CBH7GQKI.mjs";
 
 // src/guide/DirectionKeysHint.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
@@ -141,7 +142,7 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0, title = "How to
     ] }, i)) }),
     steps.length > 1 && /* @__PURE__ */ jsx2(View2, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles2.dots, children: steps.map((_, i) => /* @__PURE__ */ jsx2(View2, { style: i === index ? [styles2.dot, { backgroundColor: colors.primary }] : [styles2.dot, styles2.dotInactive, { backgroundColor: fgMuted }] }, i)) }),
     /* @__PURE__ */ jsxs2(View2, { style: overlayActionStyles.actions, children: [
-      !isOnly && /* @__PURE__ */ jsx2(Button, { mode: "outlined", onPress: isFirst ? onSkip : () => goTo(index - 1), style: overlayActionStyles.actionButton, children: isFirst ? "Skip" : "Back" }),
+      !isOnly && /* @__PURE__ */ jsx2(SecondaryButton, { onPress: isFirst ? onSkip : () => goTo(index - 1), children: isFirst ? "Skip" : "Back" }),
       /* @__PURE__ */ jsx2(Button, { mode: "contained", onPress: isLast ? onFinish : () => goTo(index + 1), style: isOnly ? overlayActionStyles.actionButtonSingle : overlayActionStyles.actionButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: isLast ? "Ready" : "Next" })
     ] })
   ] }) }) });

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { PopoverHost, AlignResult, PopoverRotation, useAutoAlign } from './chrome/index.mjs';
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, InlineColorPicker, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, PopoverAlign, PopoverBody, PopoverVerticalAlign, PressAwayOverlay, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, WELL_SHADOW, WellColors, getInlineColorPickerContentSize, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, usePopoverHost, useWellColors } from './chrome/index.mjs';
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, InlineColorPicker, InlineColorPickerSwatchPlace, InlineColorPickerSwatchRenderer, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, PopoverAlign, PopoverBody, PopoverVerticalAlign, PressAwayOverlay, RotatedFrame, RotatedFrameProps, SecondaryButton, SecondaryButtonProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, ViewInstance, WELL_SHADOW, WellColors, getInlineColorPickerContentSize, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, usePopoverHost, useWellColors } from './chrome/index.mjs';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';
@@ -8,6 +8,7 @@ import { ViewStyle, StyleProp } from 'react-native';
 export { loadSkiaWeb, locateSkiaWebFile } from './skia/index.mjs';
 import { SeedColor } from '@rific/auto-paper';
 import '@tastic/core';
+import '@rific/feedback-press';
 
 interface UnlockedAchievement {
     id: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { PopoverHost, AlignResult, PopoverRotation, useAutoAlign } from './chrome/index.js';
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, InlineColorPicker, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, PopoverAlign, PopoverBody, PopoverVerticalAlign, PressAwayOverlay, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, WELL_SHADOW, WellColors, getInlineColorPickerContentSize, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, usePopoverHost, useWellColors } from './chrome/index.js';
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, InlineColorPicker, InlineColorPickerSwatchPlace, InlineColorPickerSwatchRenderer, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, PopoverAlign, PopoverBody, PopoverVerticalAlign, PressAwayOverlay, RotatedFrame, RotatedFrameProps, SecondaryButton, SecondaryButtonProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, ViewInstance, WELL_SHADOW, WellColors, getInlineColorPickerContentSize, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, usePopoverHost, useWellColors } from './chrome/index.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';
@@ -8,6 +8,7 @@ import { ViewStyle, StyleProp } from 'react-native';
 export { loadSkiaWeb, locateSkiaWebFile } from './skia/index.js';
 import { SeedColor } from '@rific/auto-paper';
 import '@tastic/core';
+import '@rific/feedback-press';
 
 interface UnlockedAchievement {
     id: string;