@tastic/hud 0.1.0

package/dist/index.js

@@ -0,0 +1,649 @@
+"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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+var TriggerGauge_exports = {};
+__export(TriggerGauge_exports, {
+  TriggerGauge: () => TriggerGauge
+});
+function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, dashWidth, startDeg = DEFAULT_START_DEG, endDeg = startDeg }) {
+  const totalDurationMs = MOUNT_DURATION_MS + Math.max(0, segments - 1) * MOUNT_STAGGER_MS;
+  const mountProgress = (0, import_react_native_reanimated.useSharedValue)(0);
+  (0, import_react2.useLayoutEffect)(() => {
+    mountProgress.value = (0, import_react_native_reanimated.withTiming)(1, { duration: totalDurationMs, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
+  }, []);
+  const rawSweepDeg = ((endDeg - startDeg) % 360 + 360) % 360;
+  const totalSweepDeg = rawSweepDeg === 0 ? 360 : rawSweepDeg;
+  const step = segments > 0 ? totalSweepDeg / segments : 0;
+  const centerDeg = (0, import_react2.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
+  const singleSelect = litIndices.length === 1;
+  const angleDeg = (0, import_react_native_reanimated.useSharedValue)(centerDeg(litIndices[0] ?? 0));
+  const litIndicesKey = [...litIndices].sort((a, b) => a - b).join(",");
+  const [transitionFrom, setTransitionFrom] = (0, import_react2.useState)(litIndices);
+  const transitionFromKey = [...transitionFrom].sort((a, b) => a - b).join(",");
+  const lastKeyRef = (0, import_react2.useRef)(litIndicesKey);
+  const lastIndicesRef = (0, import_react2.useRef)(litIndices);
+  const selectionProgress = (0, import_react_native_reanimated.useSharedValue)(1);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (litIndicesKey !== lastKeyRef.current) {
+      if (singleSelect && lastIndicesRef.current.length === 1) {
+        angleDeg.value = (0, import_react_native_reanimated.withTiming)(centerDeg(litIndices[0]), { duration: SELECTION_TRANSITION_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
+      } else {
+        setTransitionFrom(lastIndicesRef.current);
+        selectionProgress.value = 0;
+        selectionProgress.value = (0, import_react_native_reanimated.withTiming)(1, { duration: SELECTION_TRANSITION_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
+      }
+      lastKeyRef.current = litIndicesKey;
+    }
+    lastIndicesRef.current = litIndices;
+  }, [litIndicesKey, litIndices, selectionProgress, angleDeg, singleSelect, centerDeg]);
+  const radius = size / 2 + ARC_GAP;
+  const slotDeg = step;
+  const gapDeg = DASH_GAP_PX / radius * (180 / Math.PI);
+  const autoDashAngleDeg = Math.max(MIN_DASH_ANGLE_DEG, slotDeg - gapDeg);
+  const dashAngleDeg = dashWidth != null ? Math.max(MIN_DASH_ANGLE_DEG, dashWidth / radius * (180 / Math.PI)) : autoDashAngleDeg;
+  const diameter = radius * 2;
+  const canvasSize = diameter + LIT_THICKNESS;
+  const oval = import_react_native_skia.Skia.XYWHRect(LIT_THICKNESS / 2, LIT_THICKNESS / 2, diameter, diameter);
+  const unlitPath = (0, import_react_native_reanimated.useDerivedValue)(() => {
+    const path = import_react_native_skia.Skia.Path.Make();
+    for (let i = 0; i < segments; i++) {
+      if (litIndices.includes(i)) continue;
+      let local = 1;
+      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)));
+      }
+      const sweep = dashAngleDeg * local;
+      if (sweep <= 0) continue;
+      const dashCenterDeg = startDeg + (i + 0.5) * step;
+      path.addArc(oval, dashCenterDeg - 90 - sweep / 2, sweep);
+    }
+    return path;
+  }, [segments, litIndicesKey, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
+  const litPath = (0, import_react_native_reanimated.useDerivedValue)(() => {
+    const path = import_react_native_skia.Skia.Path.Make();
+    if (mountProgress.value >= 1 && singleSelect) {
+      path.addArc(oval, angleDeg.value - 90 - dashAngleDeg / 2, dashAngleDeg);
+      return path;
+    }
+    for (let i = 0; i < segments; i++) {
+      const isLitNow = litIndices.includes(i);
+      const wasLit = transitionFrom.includes(i);
+      if (!isLitNow && !wasLit) continue;
+      let local;
+      if (mountProgress.value < 1) {
+        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)));
+      } else if (isLitNow === wasLit) {
+        local = 1;
+      } else if (isLitNow) {
+        local = selectionProgress.value;
+      } else {
+        local = 1 - selectionProgress.value;
+      }
+      const sweep = dashAngleDeg * local;
+      if (sweep <= 0) continue;
+      const dashCenterDeg = startDeg + (i + 0.5) * step;
+      path.addArc(oval, dashCenterDeg - 90 - sweep / 2, sweep);
+    }
+    return path;
+  }, [segments, litIndicesKey, transitionFromKey, singleSelect, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
+  if (segments < 2) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native8.View, { style: [styles4.container, { height: size, width: size }], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: { height: canvasSize, width: canvasSize }, 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 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_native_reanimated = require("react-native-reanimated");
+    import_jsx_runtime5 = require("react/jsx-runtime");
+    UNLIT_THICKNESS = 3;
+    LIT_THICKNESS = 7;
+    DASH_GAP_PX = 9;
+    ARC_GAP = 2;
+    DEFAULT_START_DEG = 180;
+    MIN_DASH_ANGLE_DEG = 4;
+    MOUNT_DURATION_MS = 450;
+    MOUNT_STAGGER_MS = 40;
+    SELECTION_TRANSITION_DURATION_MS = 260;
+    styles4 = import_react_native8.StyleSheet.create({
+      container: {
+        alignItems: "center",
+        justifyContent: "center",
+        position: "absolute"
+      }
+    });
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InlineColorPicker: () => InlineColorPicker,
+  MONO_FONT: () => MONO_FONT,
+  PopoverBody: () => PopoverBody,
+  PressAwayOverlay: () => PressAwayOverlay,
+  ReadyButton: () => ReadyButton,
+  SectionedDropdown: () => SectionedDropdown,
+  TriggerGaugeHost: () => TriggerGaugeHost,
+  loadSkiaWeb: () => loadSkiaWeb,
+  useAutoAlign: () => useAutoAlign,
+  usePopoverHost: () => usePopoverHost
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/fonts.ts
+var import_react_native = require("react-native");
+var MONO_FONT = import_react_native.Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
+
+// src/InlineColorPicker.tsx
+var import_auto_paper = require("@rific/auto-paper");
+var import_feedback_press = require("@rific/feedback-press");
+var import_react_native4 = require("react-native");
+var import_react_native_paper = require("react-native-paper");
+
+// src/PopoverBody.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CARET_SIZE = 7;
+var CARET_RING_OFFSET = 2;
+var CARET_DIP = 1;
+function PopoverBody({ visible, children, align = "center", verticalAlign = "below", caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }) {
+  if (!visible) return null;
+  const above = verticalAlign === "above";
+  const alignStyle = align === "left" ? styles.contentLeft : align === "right" ? styles.contentRight : styles.contentCenter;
+  const verticalStyle = above ? styles.contentAbove : styles.contentBelow;
+  const ringSize = CARET_SIZE + caretBorderWidth;
+  const caretOffset = (halfFootprint) => align === "right" ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint };
+  const caretFill = above ? "borderTopColor" : "borderBottomColor";
+  const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
+  const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: [styles.content, alignStyle, verticalStyle], children: [
+    children,
+    caretColor && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    ] })
+  ] });
+}
+var styles = import_react_native2.StyleSheet.create({
+  caret: {
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    height: 0,
+    position: "absolute",
+    width: 0,
+    // Explicit, not left to DOM order — the box it dips into is itself a position:'relative' view,
+    // which React Native Web always gives an implicit zIndex:0 (see PopoverBody's stacking-context
+    // notes elsewhere in this codebase), so painting on top needs a real zIndex to beat that
+    // reliably rather than relying on being the later sibling.
+    zIndex: 1
+  },
+  content: {
+    position: "absolute",
+    zIndex: 50
+  },
+  contentAbove: {
+    bottom: "100%",
+    marginBottom: 8
+  },
+  contentBelow: {
+    marginTop: 8,
+    top: "100%"
+  },
+  // Stretched to the anchor's own (trigger) width, with alignItems centering the actual (usually
+  // much wider) popover box inside via plain flexbox — not `left:'50%'` plus a percentage
+  // `transform`, which depends on native resolving the box's own auto width before applying the
+  // transform and has proven unreliable there, visibly shifting the box off-center.
+  contentCenter: {
+    alignItems: "center",
+    left: 0,
+    right: 0
+  },
+  contentLeft: {
+    left: 0
+  },
+  contentRight: {
+    right: 0
+  }
+});
+
+// src/useAutoAlign.ts
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+var EDGE_MARGIN = 12;
+function useAutoAlign(open, contentWidth, contentHeight) {
+  const triggerRef = (0, import_react.useRef)(null);
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native3.useWindowDimensions)();
+  const [align, setAlign] = (0, import_react.useState)("center");
+  const [verticalAlign, setVerticalAlign] = (0, import_react.useState)("below");
+  const [maxHeight, setMaxHeight] = (0, import_react.useState)(contentHeight);
+  const [measured, setMeasured] = (0, import_react.useState)(false);
+  const [prevOpen, setPrevOpen] = (0, import_react.useState)(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setMeasured(false);
+  }
+  const measure = (0, import_react.useCallback)(() => {
+    triggerRef.current?.measureInWindow((x, y, triggerWidth, triggerHeight) => {
+      const centerX = x + triggerWidth / 2;
+      const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN;
+      const overflowsLeft = centerX - contentWidth / 2 < 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 above = contentHeight > roomBelow && roomAbove > roomBelow;
+      setVerticalAlign(above ? "above" : "below");
+      setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
+      setMeasured(true);
+    });
+  }, [contentWidth, contentHeight, windowWidth, windowHeight]);
+  (0, import_react.useEffect)(() => {
+    if (open) measure();
+  }, [open, measure]);
+  return { align, maxHeight, measured, triggerRef, verticalAlign };
+}
+
+// src/InlineColorPicker.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SIZE = 48;
+var SWATCH_SIZE = 28;
+var SWATCHES_PADDING = 8;
+var SWATCHES_GAP = 6;
+var SWATCHES_BORDER_WIDTH = 2;
+var MIN_COLUMNS = 3;
+var MAX_COLUMNS = 6;
+var SCREEN_MARGIN = 40;
+function widthForColumns(columns) {
+  return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
+}
+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 resolvedColumns = columns ?? autoColumns;
+  const swatchesWidth = widthForColumns(resolvedColumns);
+  const swatchRows = Math.ceil(swatches.length / resolvedColumns);
+  const swatchesHeight = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * swatchRows + SWATCHES_GAP * (swatchRows - 1);
+  const open = host.openId === id;
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight);
+  const align = alignOverride ?? autoAlign;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native4.View, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles2.trigger, { backgroundColor: value }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { ref: triggerRef, collapsable: false, style: styles2.triggerMeasure, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color: (0, import_auto_paper.getContrastColor)(value) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.ScrollView, { style: [styles2.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles2.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;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_feedback_press.TouchableRipple,
+        {
+          disabled: taken && !swappable,
+          onPress: () => {
+            onChange(swatch.value);
+            if (autoDismiss) host.close();
+          },
+          borderless: true,
+          style: [styles2.swatch, { backgroundColor: swatch.value }, selected && styles2.swatchSelected, taken && !swappable && styles2.swatchTaken],
+          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "check", size: 16, color: (0, import_auto_paper.getContrastColor)(swatch.value) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper.getContrastColor)(swatch.value) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "close", size: 16, color: (0, import_auto_paper.getContrastColor)(swatch.value) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, {})
+        },
+        swatch.value
+      );
+    }) }) })
+  ] });
+}
+var styles2 = import_react_native4.StyleSheet.create({
+  anchor: {
+    position: "relative"
+  },
+  // See SectionedDropdown's identical comment — React Native Web gives every position:'relative' view
+  // its own stacking context, so the elevation has to live on the anchor itself, not just the
+  // popover content nested inside it, to correctly paint above this anchor's own later siblings.
+  anchorOpen: {
+    zIndex: 100
+  },
+  swatch: {
+    alignItems: "center",
+    borderRadius: SWATCH_SIZE / 2,
+    height: SWATCH_SIZE,
+    justifyContent: "center",
+    width: SWATCH_SIZE
+  },
+  swatchSelected: {
+    borderColor: "#ffffff",
+    borderWidth: 2
+  },
+  swatchTaken: {
+    opacity: 0.35
+  },
+  swatches: {
+    borderRadius: 12,
+    borderWidth: SWATCHES_BORDER_WIDTH,
+    elevation: 8,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+    // width is set inline above — border-box sizing means it has to include the border too
+    // (2*SWATCHES_BORDER_WIDTH), not just padding+content, or exactly enough room goes missing that
+    // the last column silently wraps to a new row. Anything wider than the exact sum just shows as
+    // dead space on the right edge of each row instead.
+  },
+  // Separate from `swatches` itself — see SectionedDropdown's identical menu/menuContent split.
+  // The scroll frame's own bounds (including maxHeight) live on the ScrollView; the actual grid
+  // wrapping belongs to its contentContainerStyle, which sizes to the unclamped content instead.
+  swatchesContent: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SWATCHES_GAP,
+    padding: SWATCHES_PADDING
+  },
+  trigger: {
+    alignItems: "center",
+    alignSelf: "flex-start",
+    borderRadius: SIZE / 2,
+    height: SIZE,
+    justifyContent: "center",
+    width: SIZE
+  },
+  // Wraps just the icon, inside the TouchableRipple, purely so useAutoAlign has a plain View to
+  // attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a measurable
+  // native node.
+  triggerMeasure: {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "center",
+    width: "100%"
+  }
+});
+
+// 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());
+}
+
+// src/PressAwayOverlay.tsx
+var import_react_native6 = 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] });
+}
+
+// src/ReadyButton.tsx
+var import_feedback_press2 = require("@rific/feedback-press");
+var import_react_native7 = 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 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onToggleReady, borderless: true, style: [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily, fontWeight: "bold" }, { color: ready ? "#000000" : color }], children: ready ? "READY \u2713" : "READY?" }) });
+}
+var styles3 = import_react_native7.StyleSheet.create({
+  readyButton: {
+    alignItems: "center",
+    borderRadius: 12,
+    borderWidth: 1,
+    justifyContent: "center",
+    minWidth: 120,
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  }
+});
+
+// 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_native_paper3 = require("react-native-paper");
+
+// src/TriggerGaugeHost.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var LazyTriggerGauge = (0, import_react3.lazy)(() => loadSkiaWeb().then(() => Promise.resolve().then(() => (init_TriggerGauge(), TriggerGauge_exports)).then((m) => ({ default: m.TriggerGauge }))));
+function TriggerGaugeHost(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LazyTriggerGauge, { ...props }) });
+}
+
+// src/SectionedDropdown.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MENU_BORDER_WIDTH = 1;
+var TRIGGER_SIZE = 44;
+var MENU_MIN_WIDTH = 200;
+var MENU_MAX_WIDTH = 220;
+var MENU_ITEM_ICON_SIZE = 18;
+var MENU_ITEM_LABEL_MAX_WIDTH = 150;
+var MENU_ITEM_HEIGHT = 40;
+var MENU_ITEM_HEIGHT_WITH_DESCRIPTION = 58;
+var MENU_DIVIDER_HEIGHT = 9;
+var MENU_VERTICAL_PADDING = 12;
+function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const menuBorderColor = (0, import_auto_paper2.getBlendedColor)(mutedColor, menuBg, 0.5);
+  const resolvedOnAccentColor = onAccentColor ?? (0, import_auto_paper2.getColorRoles)(accentColor, menuBg).onColor;
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const open = host.openId === id;
+  const estimatedHeight = MENU_VERTICAL_PADDING + sections.reduce((sum, section, sectionIndex) => {
+    const rows = section.options.reduce((rowSum, option) => rowSum + (option.description ? MENU_ITEM_HEIGHT_WITH_DESCRIPTION : MENU_ITEM_HEIGHT), 0);
+    const footer = section.kind === "multi" && section.allClear ? MENU_ITEM_HEIGHT : 0;
+    const divider = sectionIndex > 0 ? MENU_DIVIDER_HEIGHT : 0;
+    return sum + rows + footer + divider;
+  }, 0);
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, MENU_MAX_WIDTH, estimatedHeight);
+  const align = alignOverride ?? autoAlign;
+  const onlySection = sections.length === 1 ? sections[0] : null;
+  const selectedOption = onlySection?.kind === "single" ? onlySection.options.find((o) => o.value === onlySection.value) : void 0;
+  const triggerIcon = selectedOption?.icon ?? icon;
+  const triggerIconSize = selectedOption?.iconSize ?? 22;
+  const hasMultiSection = sections.some((s) => s.kind === "multi");
+  const anyMultiSelected = sections.some((s) => s.kind === "multi" && s.value.length > 0);
+  const triggerIconColor = hasMultiSection ? anyMultiSelected ? accentColor : fg : fg;
+  const gaugeSegments = sections.reduce((sum, section) => sum + section.options.length, 0);
+  const gaugeLitIndices = [];
+  let gaugeOffset = 0;
+  for (const section of sections) {
+    if (section.kind === "single") {
+      const index = section.options.findIndex((o) => o.value === section.value);
+      if (index >= 0) gaugeLitIndices.push(gaugeOffset + index);
+    } else {
+      section.options.forEach((o, i) => {
+        if (section.value.includes(o.value)) gaugeLitIndices.push(gaugeOffset + i);
+      });
+    }
+    gaugeOffset += section.options.length;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: [styles5.anchor, open && styles5.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.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, { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }], 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, { backgroundColor: menuBorderColor }] }),
+      section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        SingleSection,
+        {
+          section,
+          accentColor,
+          onAccentColor: resolvedOnAccentColor,
+          mutedColor,
+          labelFontFamily,
+          onSelect: (value) => {
+            section.onChange(value);
+            if (autoDismiss) host.close();
+          }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+    ] }, section.id)) }) })
+  ] });
+}
+function SingleSection({
+  section,
+  accentColor,
+  onAccentColor,
+  mutedColor,
+  labelFontFamily,
+  onSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: section.options.map((option) => {
+    const selected = option.value === section.value;
+    const rowColor = selected ? onAccentColor : mutedColor;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: [styles5.item, selected && { backgroundColor: accentColor }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.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.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelSmall", style: [{ fontFamily: labelFontFamily }, { color: rowColor }], children: option.description })
+      ] })
+    ] }) }, option.value);
+  }) });
+}
+function MultiSection({
+  section,
+  accentColor,
+  onAccentColor,
+  mutedColor,
+  labelFontFamily,
+  allClearLabels
+}) {
+  const allSelected = section.value.length === section.options.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    section.options.map((option, i) => {
+      const selected = section.value.includes(option.value);
+      const rowColor = selected ? onAccentColor : mutedColor;
+      const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
+      const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
+      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: [styles5.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.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, { fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label })
+      ] }) }, option.value);
+    }),
+    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({
+  allClearLabel: {
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  anchor: {
+    position: "relative"
+  },
+  // React Native Web gives every position:'relative' view an explicit zIndex (0, not 'auto'),
+  // which makes each one its own stacking context — so a zIndex set only on the popover content
+  // below only wins comparisons within this anchor's own box, not against this anchor's own later
+  // siblings (e.g. a Ready button), which are otherwise painted on top by DOM-order tiebreak.
+  // Elevating the anchor itself, only while its popover is open, fixes that at the right level.
+  anchorOpen: {
+    zIndex: 100
+  },
+  divider: {
+    height: import_react_native9.StyleSheet.hairlineWidth,
+    marginVertical: 4
+  },
+  item: {
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  itemLabelColumn: {
+    maxWidth: MENU_ITEM_LABEL_MAX_WIDTH
+  },
+  itemLabelFlex: {
+    flex: 1
+  },
+  itemRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8
+  },
+  menu: {
+    borderRadius: 12,
+    borderWidth: MENU_BORDER_WIDTH,
+    elevation: 8,
+    maxWidth: MENU_MAX_WIDTH,
+    minWidth: MENU_MIN_WIDTH,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  // Separate from `menu` itself — a ScrollView's own style sets the scrolling frame's bounds
+  // (including the maxHeight that actually caps it), while padding/gap belong to its
+  // contentContainerStyle, which sizes to the *unclamped* content instead of the frame.
+  menuContent: {
+    gap: 4,
+    padding: 6
+  },
+  // Fixed hit-area regardless of the current option's iconSize, so a small-vs-large trigger icon
+  // doesn't shift this picker's position within its row.
+  triggerBox: {
+    alignItems: "center",
+    height: TRIGGER_SIZE,
+    justifyContent: "center",
+    width: TRIGGER_SIZE
+  }
+});
+
+// src/usePopoverHost.ts
+var import_react4 = require("react");
+function usePopoverHost() {
+  const [openId, setOpenId] = (0, import_react4.useState)(null);
+  const toggle = (0, import_react4.useCallback)((id) => {
+    setOpenId((prev) => prev === id ? null : id);
+  }, []);
+  const close = (0, import_react4.useCallback)(() => setOpenId(null), []);
+  return { openId, toggle, close };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InlineColorPicker,
+  MONO_FONT,
+  PopoverBody,
+  PressAwayOverlay,
+  ReadyButton,
+  SectionedDropdown,
+  TriggerGaugeHost,
+  loadSkiaWeb,
+  useAutoAlign,
+  usePopoverHost
+});