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

package/README.md

@@ -0,0 +1,36 @@
+# @buoy-gg/floating-tools-core
+
+State and layout primitives used to build Buoy's floating tools. `FloatingToolsStore` manages position, drag state, hide/show behavior, and optional persistence. Your platform integration supplies input events, rendering, and animations.
+
+To add the existing Buoy menu to an app, use [@buoy-gg/core](https://www.npmjs.com/package/@buoy-gg/core). Use this lower-level package when building a custom shell.
+
+## Install
+
+```bash
+npm install @buoy-gg/floating-tools-core
+```
+
+Check the package's peer dependencies for your target platform. The package also exports visual assets and icons; a headless store does not imply that every root export is free of UI dependencies.
+
+## Store lifecycle
+
+```ts
+import { FloatingToolsStore } from "@buoy-gg/floating-tools-core";
+
+async function inspectInitialPosition() {
+  const store = new FloatingToolsStore({
+    screenWidth: 390,
+    screenHeight: 844,
+    enablePositionPersistence: false,
+  });
+  await store.initialize();
+  console.log(store.getSnapshot().position);
+  store.destroy();
+}
+```
+
+Call this function to inspect an initial position without persistence. For an interactive shell, keep the store alive, subscribe to changes, update screen dimensions on resize, and destroy it when its owner unmounts. Supply a `StorageAdapter` to persist position.
+
+The public types describe position, size, drag events, options, and drag results. Other exports include dial layout, settings state, easing, colors, usage ranking, and icons. Use the types for the installed version rather than importing private source paths.
+
+Check dragging, hide/show, resizing, and persisted position using representative screen sizes. This package does not register inspection tools, establish account admission, or connect a broker by itself.

package/floating.d.ts

@@ -0,0 +1 @@
+export * from "./lib/typescript/module/floating";

package/floating.js

@@ -0,0 +1 @@
+module.exports = require("./lib/module/floating.js");

package/lib/commonjs/FloatingToolsStore.js

@@ -194,6 +194,7 @@ class FloatingToolsStore {
       return;
     }
     this.bubbleSize = size;
+    if (!this.isDragging) this.reconcileBounds();
     this.notify();
   }
 
@@ -203,12 +204,22 @@ 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/commonjs/dial.js

@@ -15,7 +15,7 @@ exports.getIconPosition = getIconPosition;
 exports.getIconStaggerInputRange = getIconStaggerInputRange;
 exports.getSpiralAnimationPosition = getSpiralAnimationPosition;
 exports.getStaggeredIconProgress = getStaggeredIconProgress;
-var _fonts = require("./fonts.js");
+var _fonts = require("./fonts");
 /**
  * Dial Menu - Shared layout calculations, colors, and styling.
  *
@@ -82,6 +82,12 @@ const dialColors = exports.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/commonjs/floating.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  FloatingToolsStore: true
+};
+Object.defineProperty(exports, "FloatingToolsStore", {
+  enumerable: true,
+  get: function () {
+    return _FloatingToolsStore.FloatingToolsStore;
+  }
+});
+var _FloatingToolsStore = require("./FloatingToolsStore.js");
+var _constants = require("./constants.js");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
+});
+var _types = require("./types.js");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _utils = require("./utils.js");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+var _easing = require("./easing.js");
+Object.keys(_easing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _easing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _easing[key];
+    }
+  });
+});
+var _colors = require("./colors.js");
+Object.keys(_colors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _colors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _colors[key];
+    }
+  });
+});

package/lib/commonjs/fonts.web.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.monoFont = void 0;
+/** Browser twin of fonts.ts, without loading React Native into DOM hosts. */
+const monoFont = exports.monoFont = 'ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace';

package/lib/commonjs/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/commonjs/icons/ask-buoy-icon.js

@@ -10,18 +10,8 @@ Object.defineProperty(exports, "ASK_BUOY_ICON_COLOR", {
   }
 });
 exports.AskBuoyIcon = void 0;
-var _iconRenderer = require("./icon-renderer.js");
+var _rasterIcon = require("./raster-icon.js");
 var _iconDataG = require("./generated/icon-data.g.js");
-/**
- * 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`.
- */
+// Cursor-free chat artwork. Metro uses the native Image twin.
 
-const AskBuoyIcon = exports.AskBuoyIcon = (0, _iconRenderer.createIcon)(_iconDataG.askBuoyIconData);
+const AskBuoyIcon = exports.AskBuoyIcon = (0, _rasterIcon.createRasterIcon)('askBuoy');

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ASK_BUOY_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _iconDataG.ASK_BUOY_ICON_COLOR;
+  }
+});
+exports.AskBuoyIcon = AskBuoyIcon;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+var _iconDataG = require("./generated/icon-data.g.js");
+// Cursor-free chat artwork with transparent 48/96/144px density assets.
+const source = require('./assets/askBuoy.png');
+function AskBuoyIcon({
+  size = 24,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+    source: source,
+    resizeMode: "contain",
+    fadeDuration: 0,
+    accessible: false,
+    style: [{
+      width: size,
+      height: size
+    }, style]
+  });
+}

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

@@ -10,17 +10,10 @@ Object.defineProperty(exports, "ASSETS_ICON_COLOR", {
   }
 });
 exports.AssetsIcon = void 0;
-var _iconRenderer = require("./icon-renderer.js");
+var _bifRasterIcon = require("./bif-raster-icon");
 var _iconDataG = require("./generated/icon-data.g.js");
-/**
- * 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`.
- */
+var _assetsRasterG = _interopRequireDefault(require("./generated/assets-raster.g.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Generated by scripts/sync-raster-icons.cjs.
 
-const AssetsIcon = exports.AssetsIcon = (0, _iconRenderer.createIcon)(_iconDataG.assetsIconData);
+const AssetsIcon = exports.AssetsIcon = (0, _bifRasterIcon.createBifRasterIcon)(_iconDataG.assetsIconData, _assetsRasterG.default, 9);

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ASSETS_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _iconDataG.ASSETS_ICON_COLOR;
+  }
+});
+exports.AssetsIcon = void 0;
+var _bifRasterIcon = require("./bif-raster-icon");
+var _iconDataG = require("./generated/icon-data.g.js");
+// Generated by scripts/sync-raster-icons.cjs.
+
+const AssetsIcon = exports.AssetsIcon = (0, _bifRasterIcon.createBifRasterIcon)(_iconDataG.assetsIconData, require('./assets/assets.png'), 9);

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

@@ -10,15 +10,10 @@ Object.defineProperty(exports, "BENCHMARK_ICON_COLOR", {
   }
 });
 exports.BenchmarkIcon = void 0;
-var _iconRenderer = require("./icon-renderer.js");
+var _bifRasterIcon = require("./bif-raster-icon");
 var _iconDataG = require("./generated/icon-data.g.js");
-/**
- * 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`.
- */
+var _benchmarkRasterG = _interopRequireDefault(require("./generated/benchmark-raster.g.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Generated by scripts/sync-raster-icons.cjs.
 
-const BenchmarkIcon = exports.BenchmarkIcon = (0, _iconRenderer.createIcon)(_iconDataG.benchmarkIconData);
+const BenchmarkIcon = exports.BenchmarkIcon = (0, _bifRasterIcon.createBifRasterIcon)(_iconDataG.benchmarkIconData, _benchmarkRasterG.default, 3);

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BENCHMARK_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _iconDataG.BENCHMARK_ICON_COLOR;
+  }
+});
+exports.BenchmarkIcon = void 0;
+var _bifRasterIcon = require("./bif-raster-icon");
+var _iconDataG = require("./generated/icon-data.g.js");
+// Generated by scripts/sync-raster-icons.cjs.
+
+const BenchmarkIcon = exports.BenchmarkIcon = (0, _bifRasterIcon.createBifRasterIcon)(_iconDataG.benchmarkIconData, require('./assets/benchmark.png'), 3);

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBifRasterIcon = createBifRasterIcon;
+var _react = require("react");
+var _iconRenderer = require("./icon-renderer.js");
+/** Pre-rendered default artwork; preserve the full API for custom colors and large previews. */
+function createBifRasterIcon(data, source, padding) {
+  const Fallback = (0, _iconRenderer.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__*/(0, _react.createElement)(Fallback, props);
+    }
+    const bleed = size * padding / 24;
+    return /*#__PURE__*/(0, _react.createElement)('span', {
+      'aria-hidden': true,
+      style: {
+        display: 'inline-block',
+        position: 'relative',
+        width: size,
+        height: size,
+        flexShrink: 0,
+        verticalAlign: 'middle',
+        ...style
+      }
+    }, /*#__PURE__*/(0, _react.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/commonjs/icons/bif-raster-icon.native.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBifRasterIcon = createBifRasterIcon;
+var _reactNative = require("react-native");
+var _iconRenderer = require("./icon-renderer.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Static requires allow Metro to select the appropriate density resource. */
+function createBifRasterIcon(data, source, padding) {
+  const Fallback = (0, _iconRenderer.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__*/(0, _jsxRuntime.jsx)(Fallback, {
+        ...props
+      });
+    }
+    const bleed = size * padding / 24;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessible: false,
+      style: [{
+        width: size,
+        height: size
+      }, style],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: source,
+        resizeMode: "contain",
+        fadeDuration: 0,
+        accessible: false,
+        style: {
+          position: 'absolute',
+          left: -bleed,
+          top: -bleed,
+          width: size + bleed * 2,
+          height: size + bleed * 2
+        }
+      })
+    });
+  };
+}