@tastic/hud 0.1.2 → 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

@@ -72,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;
@@ -96,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) {
@@ -125,11 +125,12 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     /* @__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_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 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_native7 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
@@ -176,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");
 
@@ -299,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);

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);
@@ -269,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.2",
+  "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) {