@buoy-gg/shared-ui 7.0.36 → 7.0.38

package/lib/module/ui/floating/onboardingConstants.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import { Dimensions } from "react-native";
+
+/**
+ * Shared constants for onboarding tooltip positioning
+ * These ensure the floating menu aligns perfectly under the tooltip arrow
+ * All positions are calculated dynamically based on screen size
+ */
+
+// Arrow dimensions (relative positioning)
+export const ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
+export const ARROW_HEIGHT = 20; // borderTopWidth of arrow
+export const SPACING_GAP = 10; // Gap between arrow tip and target element
+
+/**
+ * Calculate the center Y position of the screen
+ * This is used to vertically center the onboarding UI
+ *
+ * @returns Y coordinate at the center of the screen
+ */
+export function getScreenCenterY() {
+  const {
+    height: screenHeight
+  } = Dimensions.get("window");
+  return screenHeight / 2;
+}
+
+/**
+ * Calculate the tooltip position to center it vertically on screen
+ * Uses flexbox-style centering - tooltip will center itself with its actual size
+ *
+ * @returns Distance from screen bottom for tooltip positioning
+ */
+export function calculateTooltipPosition() {
+  // Position from center - tooltip will be centered with transform or flex
+  // We return a value that's slightly above center to account for the arrow below
+  const centerY = getScreenCenterY();
+
+  // Approximate offset to center the tooltip+arrow combo
+  // This is a reasonable estimate that works for most tooltip sizes
+  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
+
+  return centerY - estimatedHalfHeight;
+}
+
+/**
+ * Calculate the position where a target element should be placed
+ * to align directly under the tooltip arrow
+ *
+ * @returns Distance from screen bottom where element should be positioned
+ */
+export function calculateTargetPosition() {
+  const tooltipBottom = calculateTooltipPosition();
+
+  // Arrow tip position = tooltip bottom + arrow offset (arrow extends below, so negative)
+  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
+
+  // Subtract arrow height to get to the actual tip
+  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
+
+  // Subtract spacing gap to position element below arrow
+  return actualArrowTip - SPACING_GAP;
+}

package/lib/module/ui/floating/onboardingConstants.web.js

@@ -0,0 +1,27 @@
+"use strict";
+
+/**
+ * Web twin of onboardingConstants.ts — same math, window.innerHeight instead
+ * of RN Dimensions.
+ */
+export const ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
+export const ARROW_HEIGHT = 20; // borderTopWidth of arrow
+export const SPACING_GAP = 10; // Gap between arrow tip and target element
+
+export function getScreenCenterY() {
+  return window.innerHeight / 2;
+}
+
+/** Distance from screen bottom for tooltip positioning (centered-ish). */
+export function calculateTooltipPosition() {
+  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
+  return getScreenCenterY() - estimatedHalfHeight;
+}
+
+/** Distance from screen bottom where the bubble should sit (under the arrow). */
+export function calculateTargetPosition() {
+  const tooltipBottom = calculateTooltipPosition();
+  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
+  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
+  return actualArrowTip - SPACING_GAP;
+}

package/lib/module/ui/gameUI/constants/gameUIColors.js

@@ -214,5 +214,7 @@ export const dialColors = {
   dialGradient3: "rgba(255, 255, 255, 0.06)",
   dialBorder: "rgba(255, 255, 255, 0.12)",
   dialShadow: "#000000",
-  dialGridLine: "rgba(255, 255, 255, 0.08)"
+  dialGridLine: "rgba(255, 255, 255, 0.08)",
+  hubFill: "rgba(5, 5, 5, 0.34)",
+  hubHalo: "rgba(5, 5, 5, 0.12)"
 };

package/lib/module/ui/index.js

@@ -24,4 +24,8 @@ export * from "./gameUI/index.js";
 export * from "./otto/index.js";
 
 // FlatList presets (tuned window/batch values + the E2E clipping guard)
-export { EVENT_LIST_PRESET, LOG_LIST_PRESET, CLIP_OFFSCREEN_CELLS } from "./listPresets.js";
+export { EVENT_LIST_PRESET, LOG_LIST_PRESET, CLIP_OFFSCREEN_CELLS } from "./listPresets.js";
+export { FloatingTool, getBubbleAnchorPosition, Divider as FloatingToolDivider, UserStatus as FloatingToolUserStatus } from "./floating/FloatingTool";
+export { ARROW_BOTTOM_OFFSET, ARROW_HEIGHT, SPACING_GAP, getScreenCenterY, calculateTooltipPosition, calculateTargetPosition } from "./floating/onboardingConstants";
+export { FloatingToolHost } from "./floating/FloatingToolHost";
+export { openFloatingTool, dismissFloatingTool, registerPersistentFloatingTool, getFloatingTools, subscribeFloatingTools } from "../stores/floatingToolStore.js";

package/lib/module/ui/night/nightTheme.js

@@ -35,6 +35,16 @@ export const night = {
     border: "#1A1A1C",
     /** Hairline between rows inside a card. */
     separator: "rgba(255, 255, 255, 0.08)",
+    /**
+     * Glass variants of the surfaces above, for screens that sit on a living
+     * ToolBackground and want it to leak through (the dial settings). Same
+     * family as the dial hub's `hubFill` — black at a fraction, never a tint —
+     * with a white-alpha lift for rows and a white-alpha hairline so no dark
+     * ring appears when the field behind is bright.
+     */
+    glass: "rgba(5, 5, 5, 0.50)",
+    glassElevated: "rgba(255, 255, 255, 0.06)",
+    glassBorder: "rgba(255, 255, 255, 0.07)",
     /** Neutral fills, lightest → strongest. */
     fill: "rgba(255, 255, 255, 0.06)",
     fillSecondary: "rgba(255, 255, 255, 0.08)",

package/lib/module/ui/night/primitives.js

@@ -48,14 +48,19 @@ export function NightFootnote({
   });
 }
 
-/** A card: `#0C0C0C`, radius 14, hairline border. `padded` = interior 14. */
+/**
+ * A card: `#0C0C0C`, radius 14, hairline border. `padded` = interior 14.
+ * `glass` swaps the opaque fill for `night.color.glass` so the ToolBackground
+ * behind the sheet shows through the card.
+ */
 export function NightCard({
   children,
   padded,
+  glass,
   style
 }) {
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.card, padded ? styles.cardPadded : null, style],
+    style: [styles.card, glass ? styles.cardGlass : null, padded ? styles.cardPadded : null, style],
     children: children
   });
 }
@@ -209,11 +214,12 @@ export function NightSegmented({
   tabs,
   activeKey,
   onChange,
-  size = "md"
+  size = "md",
+  glass
 }) {
   const small = size === "sm";
   return /*#__PURE__*/_jsx(View, {
-    style: styles.segmentTrack,
+    style: [styles.segmentTrack, glass ? styles.segmentTrackGlass : null],
     children: tabs.map(tab => {
       const active = tab.key === activeKey;
       return /*#__PURE__*/_jsxs(TouchableOpacity, {
@@ -224,7 +230,7 @@ export function NightSegmented({
         },
         accessibilityLabel: tab.label,
         onPress: () => onChange(tab.key),
-        style: [styles.segment, small ? styles.segmentSm : null, active ? styles.segmentActive : null],
+        style: [styles.segment, small ? styles.segmentSm : null, active ? glass ? styles.segmentActiveGlass : styles.segmentActive : null],
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.segmentText, small ? styles.segmentTextSm : null, active ? styles.segmentTextActive : null],
           children: tab.label
@@ -288,6 +294,10 @@ const styles = StyleSheet.create({
     borderColor: night.color.border,
     overflow: "hidden"
   },
+  cardGlass: {
+    backgroundColor: night.color.glass,
+    borderColor: night.color.glassBorder
+  },
   cardPadded: {
     padding: night.cardPad,
     gap: 10
@@ -403,9 +413,16 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderRadius: night.radius.segment
   },
+  segmentTrackGlass: {
+    backgroundColor: night.color.glass,
+    borderColor: night.color.glassBorder
+  },
   segmentActive: {
     backgroundColor: night.color.surfaceElevated
   },
+  segmentActiveGlass: {
+    backgroundColor: night.color.glassElevated
+  },
   segmentText: {
     fontSize: night.font.caption,
     fontWeight: "500",

package/lib/module/ui/otto/OttoSceneView.js

@@ -0,0 +1,64 @@
+"use strict";
+
+/**
+ * Otto × tool scenes in React Native (core APIs only, so it also runs through
+ * react-native-web).
+ *
+ *   <OttoSceneFrame scene={…} t={tick} pixelSize={4} />   one frame, caller's clock
+ *   <OttoSceneStill scene={…} pixelSize={2} />            frame 0, no clock
+ *
+ * A frame is ~150–250 run Views, so this is a still/hero renderer: drive `t`
+ * from a shared clock on a review page, not per list row. `crop` trims the
+ * canvas to the rows that carry pixels (the bottom rows are spare headroom).
+ */
+
+import { View } from "react-native";
+import { OTTO_SCENE_H, OTTO_SCENE_W, ottoSceneRuns, renderOttoScene } from "./ottoScenes.js";
+
+/** Rows 0–20 carry the art; 21–23 are headroom for hops. */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const OTTO_SCENE_CROP_H = 21;
+export function OttoSceneFrame({
+  scene,
+  t = 0,
+  pixelSize,
+  crop = true,
+  style
+}) {
+  const rows = crop ? OTTO_SCENE_CROP_H : OTTO_SCENE_H;
+  const runs = ottoSceneRuns(renderOttoScene(scene, t)).filter(r => r.y < rows);
+  const spans = [];
+  let rowY = -1;
+  let rowIndex = 0;
+  for (const r of runs) {
+    if (r.y !== rowY) {
+      rowY = r.y;
+      rowIndex = 0;
+    }
+    spans.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: r.x * pixelSize,
+        top: r.y * pixelSize,
+        width: r.w * pixelSize,
+        height: pixelSize,
+        backgroundColor: r.color
+      }
+    }, `${r.y}:${rowIndex++}`));
+  }
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: [{
+      width: OTTO_SCENE_W * pixelSize,
+      height: rows * pixelSize
+    }, style],
+    children: spans
+  });
+}
+/** Frame 0 of a scene — safe anywhere a still image would be. */
+export function OttoSceneStill(props) {
+  return /*#__PURE__*/_jsx(OttoSceneFrame, {
+    ...props,
+    t: 0
+  });
+}

package/lib/module/ui/otto/index.js

@@ -17,4 +17,6 @@
  */
 export * from "./ottoEngine.js";
 export * from "./ottoSheet.js";
-export * from "./OttoSprite.js";
+export * from "./OttoSprite.js";
+export * from "./ottoScenes.js";
+export * from "./OttoSceneView.js";

package/lib/module/ui/otto/ottoEngine.js

@@ -60,6 +60,13 @@ const BASE = {
   legs: [0, 0, 0]
 };
 
+/**
+ * A keyboard, rows 10–12 from x=3: light top edge, a row of white key caps
+ * on grey, grey base. Three rows, so the body stays readable at 16px — a
+ * laptop screen at this size is a dark blob. See `typing`.
+ */
+const TYPING_KEYBOARD = ["nnnnnnnnnn", "lmlmlmlmlm", "mmmmmmmmmm"];
+
 // Keys that count as "body" for the keyline pass. Props (n/m/l/p/1) get none.
 const BODY_KEYS = "gsdhaArRk";
 function walk(t) {
@@ -293,13 +300,9 @@ export const OTTO_STATES = {
   }),
   typing: t => {
     const e = [];
-    rect(3, 8, 12, 8, "n", e);
-    rect(3, 11, 12, 11, "n", e);
-    rect(3, 9, 3, 10, "n", e);
-    rect(12, 9, 12, 10, "n", e);
-    rect(4, 9, 11, 10, "1", e);
-    rect(7, 9, 8, 10, "g", e);
-    rect(2, 12, 13, 12, "m", e);
+    TYPING_KEYBOARD.forEach((row, dy) => {
+      for (let dx = 0; dx < row.length; dx++) e.push([3 + dx, 10 + dy, row[dx]]);
+    });
     const tap = t % 2;
     e.push([2, 10 + tap, "g"], [13, 11 - tap, "g"]);
     return {