@buoy-gg/floating-tools-core 7.0.36 → 7.0.39

package/lib/module/FloatingToolsStore.js

@@ -190,6 +190,7 @@ export class FloatingToolsStore {
       return;
     }
     this.bubbleSize = size;
+    if (!this.isDragging) this.reconcileBounds();
     this.notify();
   }
 
@@ -199,12 +200,22 @@ export class FloatingToolsStore {
   setScreenSize(width, height) {
     this.screenWidth = width;
     this.screenHeight = height;
-    // Re-validate position
-    const validated = this.validatePosition(this.position);
-    if (validated.x !== this.position.x || validated.y !== this.position.y) {
-      this.position = validated;
-      this.notify();
-    }
+    this.reconcileBounds();
+    this.notify();
+  }
+
+  /** Keep the whole visible tool reachable after its content or viewport changes. */
+  reconcileBounds() {
+    const clampVisible = position => ({
+      x: Math.max(this.minPosition.x, Math.min(position.x, this.screenWidth - this.bubbleSize.width - this.edgePadding)),
+      y: Math.max(this.minPosition.y, Math.min(position.y, this.screenHeight - this.bubbleSize.height - this.edgePadding))
+    });
+    const visible = clampVisible(this.position);
+    this.position = this.isHidden ? {
+      ...visible,
+      x: this.screenWidth - this.visibleHandleWidth
+    } : visible;
+    if (this.savedPosition) this.savedPosition = clampVisible(this.savedPosition);
   }
 
   /**

package/lib/module/dial.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { monoFont } from "./fonts.js";
+import { monoFont } from './fonts';
 /**
  * Dial Menu - Shared layout calculations, colors, and styling.
  *
@@ -67,6 +67,12 @@ export const dialColors = {
   dialGridLine: 'rgba(255, 255, 255, 0.08)',
   /** Backdrop overlay color */
   dialBackdrop: 'rgba(0, 0, 0, 0.85)',
+  /** Center hub — glass. The inner button is a soft dark puck (enough ink to
+   *  keep BUOY / PRO legible over a bright core) and the outer disc a barely-
+   *  there shade; no rings, so the tool background reads through the middle
+   *  of the dial. */
+  hubFill: 'rgba(5, 5, 5, 0.34)',
+  hubHalo: 'rgba(5, 5, 5, 0.12)',
   /** Center button text color (night text) */
   centerText: '#ECEDEE',
   /** Center button text halo — dark, keeps text legible over star fields */

package/lib/module/floating.js

@@ -0,0 +1,9 @@
+"use strict";
+
+/** Floating geometry and utilities without native fonts, icons, or tool registries. */
+export { FloatingToolsStore } from "./FloatingToolsStore.js";
+export * from "./constants.js";
+export * from "./types.js";
+export * from "./utils.js";
+export * from "./easing.js";
+export * from "./colors.js";

package/lib/module/fonts.web.js

@@ -0,0 +1,4 @@
+"use strict";
+
+/** Browser twin of fonts.ts, without loading React Native into DOM hosts. */
+export const monoFont = 'ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace';

package/lib/module/icons/ICONS.md

@@ -1,3 +1,10 @@
+> **Raster defaults:** 15 shared tool designs plus 10 supplied or separately exported raster families use PNGs across supported platforms.
+> Sources remain in `shared/icons`; the raster manifest is `shared/raster-icon-manifest.json`.
+> Run `pnpm icons` after editing a source. Per-icon modules preserve aliases and fall back to
+> the existing renderer for custom colors/backgrounds or previews above 48 points.
+> Transparent image bleed does not enlarge the layout box. See `ICON_RASTER_CONVERSION_PLAN.md`
+> for platform coverage and remaining validation.
+
 # Icon System API Documentation
 
 A declarative, data-driven icon system for creating scalable vector-like icons using pure React components. Works on both **web** and **React Native** without SVG dependencies.

package/lib/module/icons/ask-buoy-icon.js

@@ -1,18 +1,6 @@
 "use strict";
 
-/**
- * AskBuoyIcon - Data-driven icon
- *
- * A speech bubble with three dots and a small orb above it — a conversation,
- * with something thinking behind it.
- *
- * Defined as pure data in shared/icons/ask-buoy.json (Buoy Icon Format),
- * so this is the same artwork the Flutter build renders.
- *
- * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
- */
-
-import { createIcon } from "./icon-renderer.js";
-import { askBuoyIconData, ASK_BUOY_ICON_COLOR } from "./generated/icon-data.g.js";
-export { ASK_BUOY_ICON_COLOR };
-export const AskBuoyIcon = createIcon(askBuoyIconData);
+// Cursor-free chat artwork. Metro uses the native Image twin.
+import { createRasterIcon } from "./raster-icon.js";
+export { ASK_BUOY_ICON_COLOR } from "./generated/icon-data.g.js";
+export const AskBuoyIcon = createRasterIcon('askBuoy');

package/lib/module/icons/ask-buoy-icon.native.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { Image } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { ASK_BUOY_ICON_COLOR } from "./generated/icon-data.g.js";
+
+// Cursor-free chat artwork with transparent 48/96/144px density assets.
+const source = require('./assets/askBuoy.png');
+export function AskBuoyIcon({
+  size = 24,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Image, {
+    source: source,
+    resizeMode: "contain",
+    fadeDuration: 0,
+    accessible: false,
+    style: [{
+      width: size,
+      height: size
+    }, style]
+  });
+}

package/lib/module/icons/assets-icon.js

@@ -1,17 +1,8 @@
 "use strict";
 
-/**
- * AssetsIcon - Data-driven icon
- *
- * Stacked asset layers inside the tool frame.
- *
- * Defined as pure data in shared/icons/assets.json (Buoy Icon Format), so this
- * is the same artwork the Flutter build renders.
- *
- * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
- */
-
-import { createIcon } from "./icon-renderer.js";
-import { assetsIconData, ASSETS_ICON_COLOR } from "./generated/icon-data.g.js";
-export { ASSETS_ICON_COLOR };
-export const AssetsIcon = createIcon(assetsIconData);
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { assetsIconData } from "./generated/icon-data.g.js";
+import source from "./generated/assets-raster.g.js";
+export { ASSETS_ICON_COLOR } from "./generated/icon-data.g.js";
+export const AssetsIcon = createBifRasterIcon(assetsIconData, source, 9);

package/lib/module/icons/assets-icon.native.js

@@ -0,0 +1,7 @@
+"use strict";
+
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { assetsIconData } from "./generated/icon-data.g.js";
+export { ASSETS_ICON_COLOR } from "./generated/icon-data.g.js";
+export const AssetsIcon = createBifRasterIcon(assetsIconData, require('./assets/assets.png'), 9);

package/lib/module/icons/benchmark-icon.js

@@ -1,15 +1,8 @@
 "use strict";
 
-/**
- * BenchmarkIcon - Data-driven icon
- *
- * Defined as pure data in shared/icons/benchmark.json (Buoy Icon Format).
- * The renderer transforms it to components.
- *
- * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
- */
-
-import { createIcon } from "./icon-renderer.js";
-import { benchmarkIconData, BENCHMARK_ICON_COLOR } from "./generated/icon-data.g.js";
-export { BENCHMARK_ICON_COLOR };
-export const BenchmarkIcon = createIcon(benchmarkIconData);
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { benchmarkIconData } from "./generated/icon-data.g.js";
+import source from "./generated/benchmark-raster.g.js";
+export { BENCHMARK_ICON_COLOR } from "./generated/icon-data.g.js";
+export const BenchmarkIcon = createBifRasterIcon(benchmarkIconData, source, 3);

package/lib/module/icons/benchmark-icon.native.js

@@ -0,0 +1,7 @@
+"use strict";
+
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { benchmarkIconData } from "./generated/icon-data.g.js";
+export { BENCHMARK_ICON_COLOR } from "./generated/icon-data.g.js";
+export const BenchmarkIcon = createBifRasterIcon(benchmarkIconData, require('./assets/benchmark.png'), 3);

package/lib/module/icons/bif-raster-icon.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import { createElement } from 'react';
+import { createIcon } from "./icon-renderer.js";
+
+/** Pre-rendered default artwork; preserve the full API for custom colors and large previews. */
+export function createBifRasterIcon(data, source, padding) {
+  const Fallback = createIcon(data);
+  return function RasterIcon(props) {
+    const {
+      size = 24,
+      color,
+      bgColor,
+      style
+    } = props;
+    if (color !== undefined && color.toLowerCase() !== data.color.toLowerCase() || bgColor !== undefined && bgColor.toLowerCase() !== data.bgColor.toLowerCase() || size > 48) {
+      return /*#__PURE__*/createElement(Fallback, props);
+    }
+    const bleed = size * padding / 24;
+    return /*#__PURE__*/createElement('span', {
+      'aria-hidden': true,
+      style: {
+        display: 'inline-block',
+        position: 'relative',
+        width: size,
+        height: size,
+        flexShrink: 0,
+        verticalAlign: 'middle',
+        ...style
+      }
+    }, /*#__PURE__*/createElement('img', {
+      src: source,
+      alt: '',
+      draggable: false,
+      style: {
+        position: 'absolute',
+        left: -bleed,
+        top: -bleed,
+        width: size + bleed * 2,
+        height: size + bleed * 2,
+        maxWidth: 'none',
+        pointerEvents: 'none'
+      }
+    }));
+  };
+}

package/lib/module/icons/bif-raster-icon.native.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { Image, View } from 'react-native';
+import { createIcon } from "./icon-renderer.js";
+
+/** Static requires allow Metro to select the appropriate density resource. */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function createBifRasterIcon(data, source, padding) {
+  const Fallback = createIcon(data);
+  return function RasterIcon(props) {
+    const {
+      size = 24,
+      color,
+      bgColor,
+      style
+    } = props;
+    if (color !== undefined && color.toLowerCase() !== data.color.toLowerCase() || bgColor !== undefined && bgColor.toLowerCase() !== data.bgColor.toLowerCase() || size > 48) {
+      return /*#__PURE__*/_jsx(Fallback, {
+        ...props
+      });
+    }
+    const bleed = size * padding / 24;
+    return /*#__PURE__*/_jsx(View, {
+      accessible: false,
+      style: [{
+        width: size,
+        height: size
+      }, style],
+      children: /*#__PURE__*/_jsx(Image, {
+        source: source,
+        resizeMode: "contain",
+        fadeDuration: 0,
+        accessible: false,
+        style: {
+          position: 'absolute',
+          left: -bleed,
+          top: -bleed,
+          width: size + bleed * 2,
+          height: size + bleed * 2
+        }
+      })
+    });
+  };
+}

package/lib/module/icons/camera-icon.js

@@ -1,18 +1,8 @@
 "use strict";
 
-/**
- * CameraIcon - Data-driven icon
- *
- * A camera body with a viewfinder hump, a lens ring with lit glass, and a
- * flash dot.
- *
- * Defined as pure data in shared/icons/camera.json (Buoy Icon Format), so this
- * is the same artwork the Flutter build renders.
- *
- * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
- */
-
-import { createIcon } from "./icon-renderer.js";
-import { cameraIconData, CAMERA_ICON_COLOR } from "./generated/icon-data.g.js";
-export { CAMERA_ICON_COLOR };
-export const CameraIcon = createIcon(cameraIconData);
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { cameraIconData } from "./generated/icon-data.g.js";
+import source from "./generated/camera-raster.g.js";
+export { CAMERA_ICON_COLOR } from "./generated/icon-data.g.js";
+export const CameraIcon = createBifRasterIcon(cameraIconData, source, 9);

package/lib/module/icons/camera-icon.native.js

@@ -0,0 +1,7 @@
+"use strict";
+
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { cameraIconData } from "./generated/icon-data.g.js";
+export { CAMERA_ICON_COLOR } from "./generated/icon-data.g.js";
+export const CameraIcon = createBifRasterIcon(cameraIconData, require('./assets/camera.png'), 9);

package/lib/module/icons/console-icon.js

@@ -1,17 +1,6 @@
 "use strict";
 
-/**
- * ConsoleIcon - Data-driven icon
- *
- * Terminal frame with a `>_` prompt.
- *
- * Defined as pure data in shared/icons/console.json (Buoy Icon Format), so this
- * is the same artwork the Flutter build renders.
- *
- * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
- */
-
-import { createIcon } from "./icon-renderer.js";
-import { consoleIconData, CONSOLE_ICON_COLOR } from "./generated/icon-data.g.js";
-export { CONSOLE_ICON_COLOR };
-export const ConsoleIcon = createIcon(consoleIconData);
+// Original Console artwork, rasterized from shared/icons/console.json; Metro uses the native Image twin.
+import { createRasterIcon } from "./raster-icon.js";
+export { CONSOLE_ICON_COLOR } from "./generated/icon-data.g.js";
+export const ConsoleIcon = createRasterIcon('console');

package/lib/module/icons/console-icon.native.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { Image } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { CONSOLE_ICON_COLOR } from "./generated/icon-data.g.js";
+
+// Original terminal design with transparent 32/64/96px density assets.
+const source = require('./assets/console.png');
+export function ConsoleIcon({
+  size = 24,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Image, {
+    source: source,
+    resizeMode: "contain",
+    fadeDuration: 0,
+    accessible: false,
+    style: [{
+      width: size,
+      height: size
+    }, style]
+  });
+}

package/lib/module/icons/env-icon.js

@@ -1,15 +1,8 @@
 "use strict";
 
-/**
- * EnvIcon - Data-driven icon
- *
- * Defined as pure data in shared/icons/env.json (Buoy Icon Format).
- * The renderer transforms it to components.
- *
- * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
- */
-
-import { createIcon } from "./icon-renderer.js";
-import { envIconData, ENV_ICON_COLOR } from "./generated/icon-data.g.js";
-export { ENV_ICON_COLOR };
-export const EnvIcon = createIcon(envIconData);
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { envIconData } from "./generated/icon-data.g.js";
+import source from "./generated/env-raster.g.js";
+export { ENV_ICON_COLOR } from "./generated/icon-data.g.js";
+export const EnvIcon = createBifRasterIcon(envIconData, source, 3);

package/lib/module/icons/env-icon.native.js

@@ -0,0 +1,7 @@
+"use strict";
+
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { envIconData } from "./generated/icon-data.g.js";
+export { ENV_ICON_COLOR } from "./generated/icon-data.g.js";
+export const EnvIcon = createBifRasterIcon(envIconData, require('./assets/env.png'), 3);

package/lib/module/icons/events-icon.js

@@ -1,15 +1,8 @@
 "use strict";
 
-/**
- * EventsIcon - Data-driven icon
- *
- * Defined as pure data in shared/icons/events.json (Buoy Icon Format).
- * The renderer transforms it to components.
- *
- * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
- */
-
-import { createIcon } from "./icon-renderer.js";
-import { eventsIconData, EVENTS_ICON_COLOR } from "./generated/icon-data.g.js";
-export { EVENTS_ICON_COLOR };
-export const EventsIcon = createIcon(eventsIconData);
+// Generated by scripts/sync-raster-icons.cjs.
+import { createBifRasterIcon } from './bif-raster-icon';
+import { eventsIconData } from "./generated/icon-data.g.js";
+import source from "./generated/events-raster.g.js";
+export { EVENTS_ICON_COLOR } from "./generated/icon-data.g.js";
+export const EventsIcon = createBifRasterIcon(eventsIconData, source, 3);