@buoy-gg/shared-ui 7.0.36 → 7.0.38

package/lib/commonjs/ui/floating/index.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ARROW_BOTTOM_OFFSET", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.ARROW_BOTTOM_OFFSET;
+  }
+});
+Object.defineProperty(exports, "ARROW_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.ARROW_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "FloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.FloatingTool;
+  }
+});
+Object.defineProperty(exports, "FloatingToolDivider", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.Divider;
+  }
+});
+Object.defineProperty(exports, "FloatingToolHost", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolHost.FloatingToolHost;
+  }
+});
+Object.defineProperty(exports, "FloatingToolUserStatus", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.UserStatus;
+  }
+});
+Object.defineProperty(exports, "SPACING_GAP", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.SPACING_GAP;
+  }
+});
+Object.defineProperty(exports, "calculateTargetPosition", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.calculateTargetPosition;
+  }
+});
+Object.defineProperty(exports, "calculateTooltipPosition", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.calculateTooltipPosition;
+  }
+});
+Object.defineProperty(exports, "dismissFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.dismissFloatingTool;
+  }
+});
+Object.defineProperty(exports, "getBubbleAnchorPosition", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.getBubbleAnchorPosition;
+  }
+});
+Object.defineProperty(exports, "getFloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.getFloatingTools;
+  }
+});
+Object.defineProperty(exports, "getScreenCenterY", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.getScreenCenterY;
+  }
+});
+Object.defineProperty(exports, "openFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.openFloatingTool;
+  }
+});
+Object.defineProperty(exports, "registerPersistentFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.registerPersistentFloatingTool;
+  }
+});
+Object.defineProperty(exports, "subscribeFloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.subscribeFloatingTools;
+  }
+});
+var _FloatingTool = require("./FloatingTool");
+var _FloatingToolHost = require("./FloatingToolHost");
+var _floatingToolStore = require("../../stores/floatingToolStore.js");
+var _onboardingConstants = require("./onboardingConstants");

package/lib/commonjs/ui/floating/index.web.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ARROW_BOTTOM_OFFSET", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstantsWeb.ARROW_BOTTOM_OFFSET;
+  }
+});
+Object.defineProperty(exports, "ARROW_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstantsWeb.ARROW_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "FloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolWeb.FloatingTool;
+  }
+});
+Object.defineProperty(exports, "FloatingToolDivider", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolWeb.Divider;
+  }
+});
+Object.defineProperty(exports, "FloatingToolHost", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolHostWeb.FloatingToolHost;
+  }
+});
+Object.defineProperty(exports, "FloatingToolUserStatus", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolWeb.UserStatus;
+  }
+});
+Object.defineProperty(exports, "SPACING_GAP", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstantsWeb.SPACING_GAP;
+  }
+});
+Object.defineProperty(exports, "calculateTargetPosition", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstantsWeb.calculateTargetPosition;
+  }
+});
+Object.defineProperty(exports, "calculateTooltipPosition", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstantsWeb.calculateTooltipPosition;
+  }
+});
+Object.defineProperty(exports, "dismissFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.dismissFloatingTool;
+  }
+});
+Object.defineProperty(exports, "getBubbleAnchorPosition", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolWeb.getBubbleAnchorPosition;
+  }
+});
+Object.defineProperty(exports, "getFloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.getFloatingTools;
+  }
+});
+Object.defineProperty(exports, "getScreenCenterY", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstantsWeb.getScreenCenterY;
+  }
+});
+Object.defineProperty(exports, "openFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.openFloatingTool;
+  }
+});
+Object.defineProperty(exports, "registerPersistentFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.registerPersistentFloatingTool;
+  }
+});
+Object.defineProperty(exports, "subscribeFloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.subscribeFloatingTools;
+  }
+});
+var _FloatingToolWeb = require("./FloatingTool.web.js");
+var _FloatingToolHostWeb = require("./FloatingToolHost.web.js");
+var _floatingToolStore = require("../../stores/floatingToolStore.js");
+var _onboardingConstantsWeb = require("./onboardingConstants.web.js");

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING_GAP = exports.ARROW_HEIGHT = exports.ARROW_BOTTOM_OFFSET = void 0;
+exports.calculateTargetPosition = calculateTargetPosition;
+exports.calculateTooltipPosition = calculateTooltipPosition;
+exports.getScreenCenterY = getScreenCenterY;
+var _reactNative = require("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)
+const ARROW_BOTTOM_OFFSET = exports.ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
+const ARROW_HEIGHT = exports.ARROW_HEIGHT = 20; // borderTopWidth of arrow
+const SPACING_GAP = exports.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
+ */
+function getScreenCenterY() {
+  const {
+    height: screenHeight
+  } = _reactNative.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
+ */
+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
+ */
+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/commonjs/ui/floating/onboardingConstants.web.js

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

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

@@ -218,5 +218,7 @@ const dialColors = exports.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/commonjs/ui/index.js

@@ -9,8 +9,36 @@ var _exportNames = {
   CyberpunkSectionButton: true,
   EVENT_LIST_PRESET: true,
   LOG_LIST_PRESET: true,
-  CLIP_OFFSCREEN_CELLS: true
+  CLIP_OFFSCREEN_CELLS: true,
+  FloatingTool: true,
+  getBubbleAnchorPosition: true,
+  FloatingToolDivider: true,
+  FloatingToolUserStatus: true,
+  ARROW_BOTTOM_OFFSET: true,
+  ARROW_HEIGHT: true,
+  SPACING_GAP: true,
+  getScreenCenterY: true,
+  calculateTooltipPosition: true,
+  calculateTargetPosition: true,
+  FloatingToolHost: true,
+  openFloatingTool: true,
+  dismissFloatingTool: true,
+  registerPersistentFloatingTool: true,
+  getFloatingTools: true,
+  subscribeFloatingTools: true
 };
+Object.defineProperty(exports, "ARROW_BOTTOM_OFFSET", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.ARROW_BOTTOM_OFFSET;
+  }
+});
+Object.defineProperty(exports, "ARROW_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.ARROW_HEIGHT;
+  }
+});
 Object.defineProperty(exports, "CLIP_OFFSCREEN_CELLS", {
   enumerable: true,
   get: function () {
@@ -29,18 +57,102 @@ Object.defineProperty(exports, "EVENT_LIST_PRESET", {
     return _listPresets.EVENT_LIST_PRESET;
   }
 });
+Object.defineProperty(exports, "FloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.FloatingTool;
+  }
+});
+Object.defineProperty(exports, "FloatingToolDivider", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.Divider;
+  }
+});
+Object.defineProperty(exports, "FloatingToolHost", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolHost.FloatingToolHost;
+  }
+});
+Object.defineProperty(exports, "FloatingToolUserStatus", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.UserStatus;
+  }
+});
 Object.defineProperty(exports, "LOG_LIST_PRESET", {
   enumerable: true,
   get: function () {
     return _listPresets.LOG_LIST_PRESET;
   }
 });
+Object.defineProperty(exports, "SPACING_GAP", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.SPACING_GAP;
+  }
+});
+Object.defineProperty(exports, "calculateTargetPosition", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.calculateTargetPosition;
+  }
+});
+Object.defineProperty(exports, "calculateTooltipPosition", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.calculateTooltipPosition;
+  }
+});
+Object.defineProperty(exports, "dismissFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.dismissFloatingTool;
+  }
+});
+Object.defineProperty(exports, "getBubbleAnchorPosition", {
+  enumerable: true,
+  get: function () {
+    return _FloatingTool.getBubbleAnchorPosition;
+  }
+});
+Object.defineProperty(exports, "getFloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.getFloatingTools;
+  }
+});
+Object.defineProperty(exports, "getScreenCenterY", {
+  enumerable: true,
+  get: function () {
+    return _onboardingConstants.getScreenCenterY;
+  }
+});
 Object.defineProperty(exports, "monoFont", {
   enumerable: true,
   get: function () {
     return _fonts.monoFont;
   }
 });
+Object.defineProperty(exports, "openFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.openFloatingTool;
+  }
+});
+Object.defineProperty(exports, "registerPersistentFloatingTool", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.registerPersistentFloatingTool;
+  }
+});
+Object.defineProperty(exports, "subscribeFloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolStore.subscribeFloatingTools;
+  }
+});
 Object.defineProperty(exports, "toolTheme", {
   enumerable: true,
   get: function () {
@@ -98,4 +210,8 @@ Object.keys(_index4).forEach(function (key) {
     }
   });
 });
-var _listPresets = require("./listPresets.js");
+var _listPresets = require("./listPresets.js");
+var _FloatingTool = require("./floating/FloatingTool");
+var _onboardingConstants = require("./floating/onboardingConstants");
+var _FloatingToolHost = require("./floating/FloatingToolHost");
+var _floatingToolStore = require("../stores/floatingToolStore.js");

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

@@ -39,6 +39,16 @@ const night = exports.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/commonjs/ui/night/primitives.js

@@ -61,14 +61,19 @@ 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.
+ */
 function NightCard({
   children,
   padded,
+  glass,
   style
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.card, padded ? styles.cardPadded : null, style],
+    style: [styles.card, glass ? styles.cardGlass : null, padded ? styles.cardPadded : null, style],
     children: children
   });
 }
@@ -222,11 +227,12 @@ function NightSegmented({
   tabs,
   activeKey,
   onChange,
-  size = "md"
+  size = "md",
+  glass
 }) {
   const small = size === "sm";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.segmentTrack,
+    style: [styles.segmentTrack, glass ? styles.segmentTrackGlass : null],
     children: tabs.map(tab => {
       const active = tab.key === activeKey;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
@@ -237,7 +243,7 @@ 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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.segmentText, small ? styles.segmentTextSm : null, active ? styles.segmentTextActive : null],
           children: tab.label
@@ -301,6 +307,10 @@ const styles = _reactNative.StyleSheet.create({
     borderColor: _nightTheme.night.color.border,
     overflow: "hidden"
   },
+  cardGlass: {
+    backgroundColor: _nightTheme.night.color.glass,
+    borderColor: _nightTheme.night.color.glassBorder
+  },
   cardPadded: {
     padding: _nightTheme.night.cardPad,
     gap: 10
@@ -416,9 +426,16 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     borderRadius: _nightTheme.night.radius.segment
   },
+  segmentTrackGlass: {
+    backgroundColor: _nightTheme.night.color.glass,
+    borderColor: _nightTheme.night.color.glassBorder
+  },
   segmentActive: {
     backgroundColor: _nightTheme.night.color.surfaceElevated
   },
+  segmentActiveGlass: {
+    backgroundColor: _nightTheme.night.color.glassElevated
+  },
   segmentText: {
     fontSize: _nightTheme.night.font.caption,
     fontWeight: "500",

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OTTO_SCENE_CROP_H = void 0;
+exports.OttoSceneFrame = OttoSceneFrame;
+exports.OttoSceneStill = OttoSceneStill;
+var _reactNative = require("react-native");
+var _ottoScenes = require("./ottoScenes.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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).
+ */
+
+/** Rows 0–20 carry the art; 21–23 are headroom for hops. */
+const OTTO_SCENE_CROP_H = exports.OTTO_SCENE_CROP_H = 21;
+function OttoSceneFrame({
+  scene,
+  t = 0,
+  pixelSize,
+  crop = true,
+  style
+}) {
+  const rows = crop ? OTTO_SCENE_CROP_H : _ottoScenes.OTTO_SCENE_H;
+  const runs = (0, _ottoScenes.ottoSceneRuns)((0, _ottoScenes.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "none",
+    style: [{
+      width: _ottoScenes.OTTO_SCENE_W * pixelSize,
+      height: rows * pixelSize
+    }, style],
+    children: spans
+  });
+}
+/** Frame 0 of a scene — safe anywhere a still image would be. */
+function OttoSceneStill(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OttoSceneFrame, {
+    ...props,
+    t: 0
+  });
+}

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

@@ -35,4 +35,26 @@ Object.keys(_OttoSprite).forEach(function (key) {
       return _OttoSprite[key];
     }
   });
+});
+var _ottoScenes = require("./ottoScenes.js");
+Object.keys(_ottoScenes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ottoScenes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ottoScenes[key];
+    }
+  });
+});
+var _OttoSceneView = require("./OttoSceneView.js");
+Object.keys(_OttoSceneView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OttoSceneView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OttoSceneView[key];
+    }
+  });
 });

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

@@ -68,6 +68,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) {
@@ -301,13 +308,9 @@ const OTTO_STATES = exports.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 {