@bluepic/embed 0.4.0-next.145 → 0.4.0-next.146

package/dist/util/fieldHints/placement.d.ts

@@ -0,0 +1,57 @@
+import type { BluepicField } from '@bluepic/types';
+/**
+ * Where a hint chip sits relative to its hitbox.
+ *
+ * Deliberately a small synchronous solver rather than `@floating-ui`, which
+ * this package already depends on: hints re-project on EVERY pan/zoom frame,
+ * and floating-ui's `computePosition` is async and DOM-measuring. Running one
+ * per hint per frame would lag the overlay behind the canvas it is annotating.
+ * A pure function over numbers also means the placement rules can be tested
+ * without a DOM.
+ */
+export type ChipSide = 'top' | 'bottom' | 'left' | 'right';
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type PlacementInput = {
+    /** Hitbox AABB in overlay pixels. */
+    box: Rect;
+    /** Measured (or estimated) chip size. */
+    chip: {
+        width: number;
+        height: number;
+    };
+    /** Visible overlay area. */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Distance from the hitbox edge to the chip edge — room for the arrow. */
+    gap: number;
+    /** Keep-inside-the-viewport padding. */
+    margin: number;
+};
+export type PlacementResult = {
+    side: ChipSide;
+    /** Chip top-left in overlay pixels. */
+    x: number;
+    y: number;
+    /**
+     * Arrow tip anchor, RELATIVE to the chip's top-left. Tracks the hitbox centre
+     * even after the chip has been shifted to stay on screen — otherwise a
+     * clamped chip would point at empty space.
+     */
+    arrowX: number;
+    arrowY: number;
+};
+export declare function chipIsCentered(fieldType: BluepicField['type']): boolean;
+export declare function chooseChipPlacement(input: PlacementInput): PlacementResult;
+/**
+ * Chip width before the real element has been measured. Only used for the very
+ * first frame — the layer measures the rendered chip and re-solves — but a wild
+ * guess here would place the first paint visibly wrong.
+ */
+export declare function estimateChipWidth(label: string, max?: number): number;

package/dist/util/fieldHints/probe.d.ts

@@ -35,6 +35,17 @@ export type ElementQuad = {
      */
     dataId: string;
     quad: HintQuad;
+    /**
+     * Tighter box to POINT AT, when the element has one. Present only for text
+     * elements whose painted box is larger than the glyphs — i.e. text carrying a
+     * surface/background bar, where `quad` balloons out to the whole text frame.
+     *
+     * The hover region stays `quad` (generous, easy to hit); only the tooltip's
+     * anchor moves here, so a bubble describing a headline points at the words
+     * rather than at the far corner of the bar behind them. Absent whenever the
+     * two coincide, which is the common case.
+     */
+    anchor?: HintQuad;
 };
 export type HitboxProbeResult = {
     supported: false;

package/dist/util/fieldHints/useFieldHitboxes.d.ts

@@ -23,6 +23,18 @@ export type FieldHitbox = {
         width: number;
         height: number;
     };
+    /**
+     * What a tooltip should POINT AT — the text's own glyph box when the painted
+     * box is larger (text with a surface bar), otherwise identical to `aabb`.
+     * The hover region stays `quad`; only the anchor tightens.
+     */
+    anchorQuad: HintQuad;
+    anchorAABB: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
     /** 1-based, matching the `field.frameIndex` convention. */
     frameIndex: number;
     score: number;
@@ -2859,6 +2871,25 @@ export declare function useFieldHitboxes(options: {
             width: number;
             height: number;
         };
+        anchorQuad: [{
+            x: number;
+            y: number;
+        }, {
+            x: number;
+            y: number;
+        }, {
+            x: number;
+            y: number;
+        }, {
+            x: number;
+            y: number;
+        }];
+        anchorAABB: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
         frameIndex: number;
         score: number;
         elementOrder: number;
@@ -5681,6 +5712,25 @@ export declare function useFieldHitboxes(options: {
             width: number;
             height: number;
         };
+        anchorQuad: [{
+            x: number;
+            y: number;
+        }, {
+            x: number;
+            y: number;
+        }, {
+            x: number;
+            y: number;
+        }, {
+            x: number;
+            y: number;
+        }];
+        anchorAABB: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
         frameIndex: number;
         score: number;
         elementOrder: number;

package/dist/util/fieldHints/useHintReveal.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from 'vue';
 export declare function useHintReveal(enabled: Ref<boolean>): {
-    revealed: Ref<boolean, boolean>;
+    revealed: import("vue").ComputedRef<boolean>;
     hide: () => void;
     onPointerEnter: (event: PointerEvent) => void;
     onPointerLeave: (event: PointerEvent) => void;

package/dist/util/gallery.d.ts

@@ -20,9 +20,9 @@ export declare function groupTemplatesByName(templates: {
             dpi?: number | undefined;
             canvases?: {
                 id: string;
-                label: string;
                 width: number;
                 height: number;
+                label?: string | undefined;
                 preview?: string | null | undefined;
             }[] | undefined;
         };
@@ -57,9 +57,9 @@ export declare function groupPortalItemsByCategory(templates: {
                 dpi?: number | undefined;
                 canvases?: {
                     id: string;
-                    label: string;
                     width: number;
                     height: number;
+                    label?: string | undefined;
                     preview?: string | null | undefined;
                 }[] | undefined;
             };

package/dist/util/popoverArrow.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The popover/tooltip arrow artwork, shared by everything that needs to point
+ * at something.
+ *
+ * The arrow isn't a CSS triangle: it has a rounded tip and flared sides, drawn
+ * as an SVG path, and it renders as TWO masked layers — a fill layer tinted
+ * with the surface colour, and a border layer tinted with the border colour,
+ * built from an outline-only mask so the arrow's outline continues the
+ * bubble's. That's what makes it read as part of the bubble rather than a
+ * triangle stuck to it.
+ *
+ * The shape is authored pointing LEFT. Every other direction is a CSS rotation
+ * of the same mask at the call site, so there is one source of truth for the
+ * geometry and callers only own their placement.
+ *
+ * Extracted from `PopoverElement.vue` so the field-hint overlay can reuse the
+ * same arrow instead of growing a second, subtly different one.
+ */
+declare const ARROW_VIEWBOX: readonly [0, 0, 540, 810];
+/** Outer silhouette — the arrow as the reader sees it. */
+declare const ARROW_SHAPE = "\n<g transform=\"matrix(-1,0,-0,-1,539.059,810)\">\n  <path d=\"M11.046,422.072C-6.191,410.25 -0.941,397.5 11.046,387.928L539.059,0L539.059,810L11.046,422.072Z\"/>\n</g>\n";
+/**
+ * Slightly inset copy of the silhouette. Subtracting it from the outer shape
+ * leaves a constant-width outline — the border layer. A plain stroke would
+ * thicken unevenly around the curved tip.
+ */
+declare const ARROW_INNER_SHAPE = "\n<g transform=\"matrix(-0.926069,0,-0,-0.926069,499.205868,780.057974)\">\n  <path d=\"M0.498,414.688C-13.575,404.976 -4.105,398.555 4.717,392.147L539.059,0L539.059,810L0.498,414.688Z\"/>\n</g>\n";
+declare const ARROW_STROKE_WIDTH = 100;
+/** `mask-image` value for the arrow's filled body. */
+export declare function popoverArrowMaskImage(): string;
+/** `mask-image` value for the arrow's outline. */
+export declare function popoverArrowBorderMaskImage(): string;
+export { ARROW_VIEWBOX, ARROW_SHAPE, ARROW_INNER_SHAPE, ARROW_STROKE_WIDTH };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluepic/embed",
-  "version": "0.4.0-next.145",
+  "version": "0.4.0-next.146",
   "description": "Bluepic embed sdk",
   "type": "module",
   "sideEffects": false,