@tastic/hud 0.1.1 → 0.1.3

package/dist/{TriggerGauge-XBKZ3KER.mjs → TriggerGauge-2OJOOF6I.mjs}

@@ -1,5 +1,6 @@
 // src/TriggerGauge.tsx
 import { Canvas, Path, Skia } from "@shopify/react-native-skia";
+import { clamp } from "@tastic/core";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Easing, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
@@ -60,7 +61,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       if (mountProgress.value < 1) {
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       }
       const sweep = dashAngleDeg * local;
       if (sweep <= 0) continue;
@@ -84,7 +85,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
         if (!isLitNow) continue;
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       } else if (isLitNow === wasLit) {
         local = 1;
       } else if (isLitNow) {

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
@@ -20,14 +18,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/TriggerGauge.tsx
@@ -82,7 +72,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       if (mountProgress.value < 1) {
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = (0, import_core2.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       }
       const sweep = dashAngleDeg * local;
       if (sweep <= 0) continue;
@@ -106,7 +96,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
         if (!isLitNow) continue;
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = (0, import_core2.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       } else if (isLitNow === wasLit) {
         local = 1;
       } else if (isLitNow) {
@@ -130,18 +120,19 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     height: canvasSize,
     width: canvasSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native8.View, { style: [styles4.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native7.View, { style: [styles4.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_react2, import_react_native8, import_react_native_reanimated, import_jsx_runtime5, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles4;
+var import_react_native_skia, import_core2, import_react2, import_react_native7, import_react_native_reanimated, import_jsx_runtime5, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles4;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
+    import_core2 = require("@tastic/core");
     import_react2 = require("react");
-    import_react_native8 = require("react-native");
+    import_react_native7 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
     import_jsx_runtime5 = require("react/jsx-runtime");
     UNLIT_THICKNESS = 3;
@@ -153,7 +144,7 @@ var init_TriggerGauge = __esm({
     MOUNT_DURATION_MS = 450;
     MOUNT_STAGGER_MS = 40;
     SELECTION_TRANSITION_DURATION_MS = 260;
-    styles4 = import_react_native8.StyleSheet.create({
+    styles4 = import_react_native7.StyleSheet.create({
       container: {
         alignItems: "center",
         justifyContent: "center",
@@ -186,6 +177,7 @@ var MONO_FONT = import_react_native.Platform.select({ ios: "Menlo", android: "mo
 // src/InlineColorPicker.tsx
 var import_auto_paper = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
+var import_core = require("@tastic/core");
 var import_react_native4 = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
@@ -309,7 +301,7 @@ function widthForColumns(columns) {
 function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_paper.defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", autoDismiss = true, columns }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = (0, import_react_native4.useWindowDimensions)();
-  const autoColumns = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))));
+  const autoColumns = (0, import_core.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
   const resolvedColumns = columns ?? autoColumns;
   const swatchesWidth = widthForColumns(resolvedColumns);
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
@@ -406,23 +398,21 @@ var styles2 = import_react_native4.StyleSheet.create({
 });
 
 // src/loadSkiaWeb.ts
-var import_react_native5 = require("react-native");
 function loadSkiaWeb() {
-  if (import_react_native5.Platform.OS !== "web") return Promise.resolve();
-  return import("@shopify/react-native-skia/src/web").then((m) => m.LoadSkiaWeb());
+  return Promise.resolve();
 }
 
 // src/PressAwayOverlay.tsx
-var import_react_native6 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native6.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native5.StyleSheet.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
 var import_feedback_press2 = require("@rific/feedback-press");
-var import_react_native7 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
@@ -431,7 +421,7 @@ function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MON
   const labelColorStyle = { color: ready ? "#000000" : color };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles3 = import_react_native7.StyleSheet.create({
+var styles3 = import_react_native6.StyleSheet.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -446,7 +436,7 @@ var styles3 = import_react_native7.StyleSheet.create({
 // src/SectionedDropdown.tsx
 var import_auto_paper2 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
-var import_react_native9 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 
 // src/TriggerGaugeHost.tsx
@@ -507,13 +497,13 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
   const anchorStyle = [styles5.anchor, open && styles5.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: anchorStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { ref: triggerRef, collapsable: false, style: styles5.triggerBox, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: anchorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { ref: triggerRef, collapsable: false, style: styles5.triggerBox, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.ScrollView, { style: [styles5.menu, menuStyle], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: [styles5.divider, dividerStyle] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.ScrollView, { style: [styles5.menu, menuStyle], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { style: [styles5.divider, dividerStyle] }),
       section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SingleSection,
         {
@@ -545,9 +535,9 @@ function SingleSection({
     const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemRow, children: [
       option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemLabelColumn, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemLabelColumn, children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
         option.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
@@ -571,7 +561,7 @@ function MultiSection({
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
       const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
       const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemRow, children: [
         option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
@@ -579,7 +569,7 @@ function MultiSection({
     section.allClear && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles5.item, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles5 = import_react_native9.StyleSheet.create({
+var styles5 = import_react_native8.StyleSheet.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -596,7 +586,7 @@ var styles5 = import_react_native9.StyleSheet.create({
     zIndex: 100
   },
   divider: {
-    height: import_react_native9.StyleSheet.hairlineWidth,
+    height: import_react_native8.StyleSheet.hairlineWidth,
     marginVertical: 4
   },
   item: {

package/dist/index.mjs

@@ -5,6 +5,7 @@ var MONO_FONT = Platform.select({ ios: "Menlo", android: "monospace", default: "
 // src/InlineColorPicker.tsx
 import { defaultColors, getContrastColor } from "@rific/auto-paper";
 import { TouchableRipple } from "@rific/feedback-press";
+import { clamp } from "@tastic/core";
 import { ScrollView, StyleSheet as StyleSheet2, useWindowDimensions as useWindowDimensions2, View as View3 } from "react-native";
 import { Icon } from "react-native-paper";
 
@@ -128,7 +129,7 @@ function widthForColumns(columns) {
 function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", autoDismiss = true, columns }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = useWindowDimensions2();
-  const autoColumns = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))));
+  const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
   const resolvedColumns = columns ?? autoColumns;
   const swatchesWidth = widthForColumns(resolvedColumns);
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
@@ -225,10 +226,8 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/loadSkiaWeb.ts
-import { Platform as Platform2 } from "react-native";
 function loadSkiaWeb() {
-  if (Platform2.OS !== "web") return Promise.resolve();
-  return import("@shopify/react-native-skia/src/web").then((m) => m.LoadSkiaWeb());
+  return Promise.resolve();
 }
 
 // src/PressAwayOverlay.tsx
@@ -271,7 +270,7 @@ import { Icon as Icon2, Text as Text2 } from "react-native-paper";
 // src/TriggerGaugeHost.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-XBKZ3KER.mjs").then((m) => ({ default: m.TriggerGauge }))));
+var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-2OJOOF6I.mjs").then((m) => ({ default: m.TriggerGauge }))));
 function TriggerGaugeHost(props) {
   return /* @__PURE__ */ jsx5(Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(LazyTriggerGauge, { ...props }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",
@@ -29,6 +29,7 @@
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
+      "browser": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
@@ -63,6 +64,7 @@
     "@rific/auto-paper": "^0.9.4",
     "@rific/feedback-press": "^0.10.4",
     "@shopify/react-native-skia": "^2.6.2",
+    "@tastic/core": "^0.1.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -92,6 +94,7 @@
     "@rific/auto-paper": ">=0.9.0",
     "@rific/feedback-press": ">=0.10.0",
     "@shopify/react-native-skia": ">=1.5.0",
+    "@tastic/core": ">=0.1.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",
     "react-native-paper": ">=5.0.0",

package/src/InlineColorPicker.tsx

@@ -1,5 +1,6 @@
 import { defaultColors, getContrastColor, SeedColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
+import { clamp } from '@tastic/core'
 import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Icon } from 'react-native-paper'
 
@@ -63,7 +64,7 @@ interface Props {
 export function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', autoDismiss = true, columns }: Props) {
   const menuBg = dark ? '#000000' : '#FFFFFF'
   const { width: windowWidth } = useWindowDimensions()
-  const autoColumns = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))))
+  const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS)
   const resolvedColumns = columns ?? autoColumns
   const swatchesWidth = widthForColumns(resolvedColumns)
   const swatchRows = Math.ceil(swatches.length / resolvedColumns)

package/src/TriggerGauge.tsx

@@ -1,4 +1,5 @@
 import { Canvas, Path, Skia } from '@shopify/react-native-skia'
+import { clamp } from '@tastic/core'
 import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Easing, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated'
@@ -207,7 +208,7 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
       if (mountProgress.value < 1) {
         const startFrac = (i * MOUNT_STAGGER_MS) / totalDurationMs
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)))
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1)
       }
       const sweep = dashAngleDeg * local
       if (sweep <= 0) continue
@@ -245,7 +246,7 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
         if (!isLitNow) continue
         const startFrac = (i * MOUNT_STAGGER_MS) / totalDurationMs
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)))
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1)
       } else if (isLitNow === wasLit) {
         local = 1 // steady — lit before and after (or the mount-only branch above already handled unlit)
       } else if (isLitNow) {

package/src/TriggerGaugeHost.tsx

@@ -11,10 +11,9 @@ import { TriggerGaugeProps } from './TriggerGauge'
 // file therefore never imports TriggerGauge itself except as a type (erased at compile time,
 // carrying no runtime module reference) — `lazy()` is what actually defers the real import to
 // runtime, after loadSkiaWeb() resolves. Always lazy, on every platform, rather than a native/web
-// branch here: this package builds to a single bundled dist file (see loadSkiaWeb's own comment on
-// why), so there's no reliable build-time way to give native a plain, non-lazy passthrough instead —
-// loadSkiaWeb() itself already resolves immediately on native, so the Suspense boundary there just
-// clears on the next tick, not a perceptible delay. The Suspense fallback renders nothing, so a
+// branch here, purely to keep this file simple — loadSkiaWeb() itself already resolves immediately
+// on native (see its own file split), so the Suspense boundary there just clears on the next tick,
+// not a perceptible delay. The Suspense fallback renders nothing, so a
 // consumer's trigger icon still shows immediately and the gauge ring just pops in a beat later.
 const LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import('./TriggerGauge').then((m) => ({ default: m.TriggerGauge }))))
 

package/src/loadSkiaWeb.ts

@@ -1,14 +1,10 @@
-import { Platform } from 'react-native'
-
-// Skia's web target renders through CanvasKit, a WASM build of Skia fetched at runtime — nothing
-// using @shopify/react-native-skia's React components can draw a single frame until this resolves.
-// Skia on native (via JSI) is ready as soon as the app's native module is linked, so this only
-// actually does anything on web — a Platform.OS check rather than a `.web.ts` sibling file, since
-// this package builds to a single bundled dist file (see package.json's `build` script): a bundler
-// that pre-flattens the whole module graph itself (tsup/esbuild) never sees or swaps in a `.web.ts`
-// variant the way a consuming app's own Metro bundler would, so the split has to be a runtime
-// branch that survives being bundled, not a build-time file choice that wouldn't.
+// Native counterpart to loadSkiaWeb.web.ts — Skia on native (via JSI, no WASM) is ready as soon as
+// the app's native module is linked, so there's nothing to actually wait on here. This file must
+// never import '@shopify/react-native-skia/src/web' (even conditionally behind a Platform.OS check):
+// that module pulls in canvaskit-wasm, which does `require('fs')` — a runtime check doesn't stop
+// Metro from statically resolving that import to build the native bundle graph, and Metro has no
+// `fs` for iOS/Android, so the build fails outright. Metro's own platform-extension resolution (this
+// file vs. loadSkiaWeb.web.ts) is what actually keeps the web-only module out of the native graph.
 export function loadSkiaWeb(): Promise<void> {
-  if (Platform.OS !== 'web') return Promise.resolve()
-  return import('@shopify/react-native-skia/src/web').then((m) => m.LoadSkiaWeb())
+  return Promise.resolve()
 }

package/src/loadSkiaWeb.web.ts

@@ -0,0 +1,11 @@
+import { LoadSkiaWeb } from '@shopify/react-native-skia/src/web'
+
+// Skia's web target renders through CanvasKit, a WASM build of Skia fetched at runtime — nothing
+// using @shopify/react-native-skia's React components can draw a single frame until this resolves.
+// Kept as a thin wrapper (rather than importing LoadSkiaWeb directly at call sites) purely so this
+// file's `.ts` counterpart, loadSkiaWeb.ts, gives native an identically-shaped async no-op — Metro's
+// platform-extension resolution picks whichever one matches the bundle target, so canvaskit-wasm's
+// `require('fs')' never even gets resolved into a native/iOS/Android bundle.
+export function loadSkiaWeb(): Promise<void> {
+  return LoadSkiaWeb()
+}