@tastic/hud 0.1.1 → 0.1.2

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
@@ -130,18 +120,18 @@ 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_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_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 +143,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",
@@ -406,23 +396,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 +419,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 +434,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 +495,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 +533,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 +559,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 +567,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 +584,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

@@ -225,10 +225,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",

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()
+}