@buoy-gg/shared-ui 7.0.26 → 7.0.27

package/lib/module/dataViewer/tree/TreeDiffViewer.js

@@ -17,7 +17,7 @@
 
 import React, { useMemo, useState, useEffect, useRef } from "react";
 import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
-import { gameUIColors } from "@buoy-gg/shared-ui";
+import { gameUIColors, night } from "@buoy-gg/shared-ui";
 import { isAbsent } from "../lineDiff.js";
 
 // ============================================
@@ -29,10 +29,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // ============================================
 
 const darkTheme = {
-  background: gameUIColors.diff.lineNumberBackground,
-  // Exact from gameUIColors
-  text: gameUIColors.diff.unchangedText,
-  // Exact from gameUIColors
+  // Night chrome; the diff DATA colors below stay on the shared diff palette.
+  background: night.color.bg,
+  text: night.color.textSecondary,
+  // "unchanged" stays dimmed vs the diff tints
   // Line backgrounds - exact from gameUIColors
   addedBg: gameUIColors.diff.addedBackground,
   removedBg: gameUIColors.diff.removedBackground,
@@ -47,12 +47,12 @@ const darkTheme = {
   // UI elements
   arrowText: gameUIColors.diff.modifiedText,
   keyText: gameUIColors.diff.modifiedText,
-  expandIcon: gameUIColors.diff.lineNumberText,
-  bracketText: gameUIColors.diff.unchangedText,
+  expandIcon: night.color.textTertiary,
+  bracketText: night.color.textSecondary,
   nullText: gameUIColors.diff.modifiedText,
   undefinedText: gameUIColors.diff.modifiedText,
-  stringText: gameUIColors.diff.unchangedText,
-  numberText: gameUIColors.diff.unchangedText,
+  stringText: night.color.textSecondary,
+  numberText: night.color.textSecondary,
   booleanText: gameUIColors.diff.modifiedText
 };
 const lightTheme = {

package/lib/module/hooks/safe-area-impl.js

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-19T21:27:36.627Z
+ * Generated at: 2026-08-21T01:33:44.897Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/icons/lucide-icons.js

@@ -505,30 +505,89 @@ export const Eye = ({
     strokeWidth: strokeWidth
   })]
 });
+
+/**
+ * Pushpin at 45°: needle → flange bar → flare → one long rounded handle.
+ * The handle is a border-only View rotated about its center; everything else
+ * is straight Line segments, so no curve stamping on native.
+ *
+ * `active` stands the pin upright (needle down — "stuck in"); default is the
+ * tilted resting pose. The upright pose scales 0.92 so the needle tip and
+ * head corners stay inside the 24-box.
+ */
 export const Pin = ({
   size = 24,
   color = "currentColor",
   strokeWidth = 2,
+  active = false,
   ...props
-}) => /*#__PURE__*/_jsxs(Svg, {
+}) => /*#__PURE__*/_jsx(Svg, {
   width: size,
   height: size,
   viewBox: "0 0 24 24",
   ...props,
-  children: [/*#__PURE__*/_jsx(Circle, {
-    cx: 12,
-    cy: 9,
-    r: 5,
-    stroke: color,
-    strokeWidth: strokeWidth
-  }), /*#__PURE__*/_jsx(Line, {
-    x1: 12,
-    y1: 14,
-    x2: 12,
-    y2: 21,
-    stroke: color,
-    strokeWidth: strokeWidth
-  })]
+  children: /*#__PURE__*/_jsxs(View, {
+    style: {
+      position: "absolute",
+      width: 24,
+      height: 24,
+      // Keep the array shape stable across toggles: RN's style differ turns
+      // an explicit `transform: undefined` into null and processTransform
+      // crashes on it (`null.forEach`) when unpinning.
+      transform: active ? [{
+        rotate: "-45deg"
+      }, {
+        scale: 0.92
+      }] : [{
+        rotate: "0deg"
+      }, {
+        scale: 1
+      }]
+    },
+    children: [/*#__PURE__*/_jsx(Line, {
+      x1: 2.97,
+      y1: 21.03,
+      x2: 8.18,
+      y2: 15.82,
+      stroke: color,
+      strokeWidth: strokeWidth
+    }), /*#__PURE__*/_jsx(Line, {
+      x1: 4.4,
+      y1: 10.81,
+      x2: 13.19,
+      y2: 19.6,
+      stroke: color,
+      strokeWidth: strokeWidth
+    }), /*#__PURE__*/_jsx(Line, {
+      x1: 5.17,
+      y1: 10.54,
+      x2: 11.43,
+      y2: 8.83,
+      stroke: color,
+      strokeWidth: strokeWidth
+    }), /*#__PURE__*/_jsx(Line, {
+      x1: 13.46,
+      y1: 18.83,
+      x2: 15.17,
+      y2: 12.57,
+      stroke: color,
+      strokeWidth: strokeWidth
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: 11.15,
+        top: 4.4,
+        width: 11.38,
+        height: 5.52,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: 2.07,
+        transform: [{
+          rotate: "-45deg"
+        }]
+      }
+    })]
+  })
 });
 
 /**

package/lib/module/index.js

@@ -61,6 +61,10 @@ export { useSafeAreaInsets, useFilterManager, usePersistedState, useDeviceInfo,
 
 // JsModal
 export { JsModal } from "./JsModal";
+// Night theme — the Everlights-style surface language (piloted on the dial
+// menu's settings modal; see ui/night/nightTheme.ts).
+export { night, NIGHT_LABEL_TRACKING } from "./ui/night/nightTheme.js";
+export { NightSectionLabel, NightFootnote, NightCard, NightSeparator, NightRows, NightSwitch, NightChip, NightButton, NightSegmented, NightBadge } from "./ui/night/primitives.js";
 // game ui colors
 export { gameUIColors, buoyColors } from "./ui/gameUI/constants/gameUIColors.js";
 // Runtime re-tint hook — only the desktop dashboard's theme switcher uses it.

package/lib/module/ui/backgrounds/BackgroundSwitcher.js

@@ -1,92 +1,210 @@
 "use strict";
 
 /**
- * The ‹ prev / next › strip for auditioning backgrounds.
+ * The ‹ prev / next › strip for choosing a background.
  *
- * This is a REVIEW control, not shipped chrome: it exists so the whole
- * catalogue can be walked without a rebuild, with the cost of each preset shown
- * next to its name. Mount it at the top of a tool's body while evaluating, and
- * pull it once a winner is picked (or keep it behind a setting).
+ * Shipping mount: the dial menu's settings modal (pass `embedded` there so the
+ * host card supplies the chrome). It can also be dropped at the top of a
+ * tool's body while auditioning new presets — the cost of each preset shows
+ * next to its name, so it doubles as the review tool it started as.
  *
  * It writes to the shared `backgroundStore`, so stepping here changes the
  * background in every tool at once.
+ *
+ * While Live Sky is showing, a second row appears: a WALL-clock slider that
+ * scrubs the scene through the whole cycle (Live Sky applies its workday
+ * remap to whatever wall time the scrub holds, same as it does to the live
+ * clock). LIVE snaps back to the real clock. The scrub is quantized to
+ * 5-minute steps so a drag re-renders the scene at most once per step, and it
+ * is not persisted — it's a preview gesture.
+ *
+ * ▶ runs the cycle like a movie: one full 24h lap in 15s, starting from the
+ * displayed time and finishing exactly where it began (back on LIVE if that's
+ * where it was). It drives the SAME scrub value on a JS interval — ~19 5-min
+ * steps a second, each one small re-render of the scene — which is fine for a
+ * 15s preview gesture and is exactly what a fast drag already does.
  */
 
-import { memo } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { memo, useEffect, useRef, useState } from "react";
+import { PanResponder, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { ChevronLeft, ChevronRight, Palette } from "../../icons/lucide-icons.js";
 import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
 import { useToolBackground } from "./backgroundStore.js";
 import { getPreset } from "./registry.js";
+import { getSkyScrub, setSkyScrub, useSkyScrub } from "./skyClock.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BackgroundSwitcher = /*#__PURE__*/memo(function BackgroundSwitcher() {
+const THUMB = 14;
+function formatMinutes(m) {
+  const h = Math.floor(m / 60) % 24;
+  const min = m % 60;
+  return `${String(h).padStart(2, "0")}:${String(min).padStart(2, "0")}`;
+}
+const PLAY_DURATION_MS = 15000;
+const PLAY_FRAME_MS = 50;
+const TimeSlider = /*#__PURE__*/memo(function TimeSlider() {
+  const scrub = useSkyScrub();
+  const [trackW, setTrackW] = useState(0);
+  const widthRef = useRef(0);
+  const [playing, setPlaying] = useState(false);
+  const playTimer = useRef(null);
+  const stopPlay = () => {
+    if (playTimer.current) clearInterval(playTimer.current);
+    playTimer.current = null;
+    setPlaying(false);
+  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => stopPlay, []);
+  const startPlay = () => {
+    stopPlay();
+    const now = new Date();
+    const startMinutes = getSkyScrub() ?? now.getHours() * 60 + now.getMinutes();
+    const wasLive = getSkyScrub() === null;
+    const begin = Date.now();
+    setPlaying(true);
+    playTimer.current = setInterval(() => {
+      const t = (Date.now() - begin) / PLAY_DURATION_MS;
+      if (t >= 1) {
+        stopPlay();
+        // Finish exactly where the day began.
+        setSkyScrub(wasLive ? null : startMinutes);
+        return;
+      }
+      setSkyScrub(Math.floor((startMinutes + t * 1440) % 1440 / 5) * 5);
+    }, PLAY_FRAME_MS);
+  };
+  const applyX = x => {
+    stopPlay();
+    const w = widthRef.current;
+    if (w <= 0) return;
+    const frac = Math.min(1, Math.max(0, x / w));
+    setSkyScrub(Math.round(frac * 1439 / 5) * 5);
+  };
+  const responder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: e => applyX(e.nativeEvent.locationX),
+    onPanResponderMove: e => applyX(e.nativeEvent.locationX)
+  })).current;
+  const now = new Date();
+  // Wall time throughout — the scene applies its own remap to this.
+  const minutes = scrub ?? now.getHours() * 60 + now.getMinutes();
+  const frac = minutes / 1440;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.sliderRow,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: () => {
+        stopPlay();
+        setSkyScrub(null);
+      },
+      style: [styles.live, scrub === null ? styles.liveOn : null],
+      hitSlop: HIT_SLOP,
+      accessibilityLabel: "Follow the real clock",
+      "sentry-label": "ignore background sky live",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.liveText, scrub === null ? styles.liveTextOn : null],
+        children: "LIVE"
+      })
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: playing ? stopPlay : startPlay,
+      style: [styles.live, playing ? styles.playOn : null],
+      hitSlop: HIT_SLOP,
+      accessibilityLabel: playing ? "Stop the day cycle" : "Play the full day in 15 seconds",
+      "sentry-label": "ignore background sky play",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.liveText, playing ? styles.playTextOn : null],
+        children: playing ? "■" : "▶"
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.track,
+      onLayout: e => {
+        widthRef.current = e.nativeEvent.layout.width;
+        setTrackW(e.nativeEvent.layout.width);
+      },
+      ...responder.panHandlers,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.trackBar,
+        pointerEvents: "none"
+      }), trackW > 0 ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: [styles.thumb, scrub === null ? null : styles.thumbScrub, {
+          left: frac * trackW - THUMB / 2
+        }]
+      }) : null]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.time,
+      children: formatMinutes(minutes)
+    })]
+  });
+});
+export const BackgroundSwitcher = /*#__PURE__*/memo(function BackgroundSwitcher({
+  embedded = false
+}) {
   const {
     id,
     index,
     count,
-    motion,
     next,
     previous,
-    setMotion
+    setId
   } = useToolBackground();
   const preset = getPreset(id);
+  const counterpart = preset.counterpart;
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: previous,
-      style: styles.step,
-      hitSlop: HIT_SLOP,
-      accessibilityLabel: "Previous background",
-      "sentry-label": "ignore background previous",
-      children: /*#__PURE__*/_jsx(ChevronLeft, {
-        size: 16,
-        color: macOSColors.text.secondary
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.center,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.titleRow,
-        children: [/*#__PURE__*/_jsx(Palette, {
-          size: 11,
-          color: macOSColors.semantic.info
+    style: embedded ? styles.rootEmbedded : styles.root,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: previous,
+        style: styles.step,
+        hitSlop: HIT_SLOP,
+        accessibilityLabel: "Previous background",
+        "sentry-label": "ignore background previous",
+        children: /*#__PURE__*/_jsx(ChevronLeft, {
+          size: 16,
+          color: macOSColors.text.secondary
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.center,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.titleRow,
+          children: [/*#__PURE__*/_jsx(Palette, {
+            size: 11,
+            color: macOSColors.semantic.info
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            numberOfLines: 1,
+            children: preset.label
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.counter,
+            children: [index + 1, "/", count]
+          })]
         }), /*#__PURE__*/_jsx(Text, {
-          style: styles.title,
+          style: styles.blurb,
           numberOfLines: 1,
-          children: preset.label
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.counter,
-          children: [index + 1, "/", count]
+          children: preset.blurb
         })]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.blurb,
-        numberOfLines: 1,
-        children: preset.blurb
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: styles.cost,
-        numberOfLines: 1,
-        children: [preset.nodes === 0 ? "0 animated nodes" : `${preset.nodes} native node${preset.nodes === 1 ? "" : "s"}`, "  ·  ", "~", preset.views, " static views"]
+      }), counterpart ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setId(counterpart.id),
+        style: styles.motion,
+        hitSlop: HIT_SLOP,
+        accessibilityLabel: `Switch to ${counterpart.id} background`,
+        "sentry-label": "ignore background counterpart",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.motionText,
+          children: counterpart.label
+        })
+      }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: next,
+        style: styles.step,
+        hitSlop: HIT_SLOP,
+        accessibilityLabel: "Next background",
+        "sentry-label": "ignore background next",
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 16,
+          color: macOSColors.text.secondary
+        })
       })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: () => setMotion(!motion),
-      style: [styles.motion, motion ? styles.motionOn : null],
-      hitSlop: HIT_SLOP,
-      accessibilityLabel: motion ? "Turn motion off" : "Turn motion on",
-      "sentry-label": "ignore background motion",
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.motionText, motion ? styles.motionTextOn : null],
-        children: motion ? "MOTION" : "STATIC"
-      })
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: next,
-      style: styles.step,
-      hitSlop: HIT_SLOP,
-      accessibilityLabel: "Next background",
-      "sentry-label": "ignore background next",
-      children: /*#__PURE__*/_jsx(ChevronRight, {
-        size: 16,
-        color: macOSColors.text.secondary
-      })
-    })]
+    }), id === "livesky" ? /*#__PURE__*/_jsx(TimeSlider, {}) : null]
   });
 });
 const HIT_SLOP = {
@@ -97,9 +215,6 @@ const HIT_SLOP = {
 };
 const styles = StyleSheet.create({
   root: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
     paddingHorizontal: 8,
     paddingVertical: 6,
     marginHorizontal: 8,
@@ -112,6 +227,14 @@ const styles = StyleSheet.create({
     // previewing, so you can see the field through it.
     backgroundColor: "rgba(26,26,28,0.72)"
   },
+  rootEmbedded: {
+    // The host card supplies border/fill/margins.
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
   step: {
     width: 28,
     height: 28,
@@ -146,12 +269,6 @@ const styles = StyleSheet.create({
     fontSize: 10,
     marginTop: 1
   },
-  cost: {
-    color: macOSColors.text.icon,
-    fontSize: 9,
-    marginTop: 1,
-    fontVariant: ["tabular-nums"]
-  },
   motion: {
     paddingHorizontal: 7,
     paddingVertical: 4,
@@ -160,17 +277,74 @@ const styles = StyleSheet.create({
     borderColor: macOSColors.border.default,
     backgroundColor: "rgba(38,38,42,0.8)"
   },
-  motionOn: {
-    borderColor: macOSColors.semantic.info + "55",
-    backgroundColor: macOSColors.semantic.infoBackground
-  },
   motionText: {
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.6,
     color: macOSColors.text.muted
   },
-  motionTextOn: {
+  sliderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginTop: 7
+  },
+  live: {
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: "rgba(38,38,42,0.8)"
+  },
+  liveOn: {
+    borderColor: macOSColors.semantic.success + "55",
+    backgroundColor: macOSColors.semantic.successBackground
+  },
+  liveText: {
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    color: macOSColors.text.muted
+  },
+  liveTextOn: {
+    color: macOSColors.semantic.success
+  },
+  playOn: {
+    borderColor: macOSColors.semantic.info + "55",
+    backgroundColor: macOSColors.semantic.infoBackground
+  },
+  playTextOn: {
     color: macOSColors.semantic.info
+  },
+  track: {
+    flex: 1,
+    height: 24,
+    justifyContent: "center"
+  },
+  trackBar: {
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: "rgba(120,130,150,0.35)"
+  },
+  thumb: {
+    position: "absolute",
+    top: (24 - THUMB) / 2,
+    width: THUMB,
+    height: THUMB,
+    borderRadius: THUMB / 2,
+    backgroundColor: macOSColors.text.secondary,
+    borderWidth: 1,
+    borderColor: "rgba(255,255,255,0.5)"
+  },
+  thumbScrub: {
+    backgroundColor: macOSColors.semantic.info
+  },
+  time: {
+    color: macOSColors.text.secondary,
+    fontSize: 10,
+    fontVariant: ["tabular-nums"],
+    width: 32,
+    textAlign: "right"
   }
 });