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

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/fields.d.ts

@@ -54,7 +54,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -71,7 +70,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -89,7 +87,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -104,7 +101,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -121,7 +117,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -138,7 +133,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -155,7 +149,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -172,7 +165,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -189,7 +181,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -206,7 +197,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -223,7 +213,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -240,7 +229,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -257,7 +245,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -274,7 +261,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -289,7 +275,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 } | {
     props: {
@@ -306,7 +291,6 @@ export declare function stringifyField(field: BluepicField): {
         maxWidth: string;
     };
     hitbox?: import("@bluepic/types").Hitbox;
-    hintType?: import("@bluepic/types").FieldHintType;
     frameIndex?: number;
 };
 export declare function renderFieldIcon(fieldType: BluepicField['type']): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

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.148",
   "description": "Bluepic embed sdk",
   "type": "module",
   "sideEffects": false,
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@auth0/auth0-vue": "^2.4.0",
-    "@bluepic/types": "^0.6.497",
+    "@bluepic/types": "^0.6.499",
     "@hono/zod-openapi": "^1.1.4",
     "@types/css": "^0.0.38",
     "@types/downloadjs": "^1.4.6",

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

@@ -1,21 +0,0 @@
-import type { BluepicField } from '@bluepic/types';
-/**
- * What an `interact` hint does when clicked.
- *
- * - `inline-text` — expand into a text input on the overlay, editing the value
- *   in place. Only for plain-text fields: a richtext field's value is a run
- *   array with its own toolbar, and a bare input would silently flatten it.
- * - `activate`    — run the field's own flow (image picker / upload dialog),
- *   via the activator the field component registered.
- * - `focus`       — nothing better available; jump to the control in the panel.
- */
-export type InteractMode = 'inline-text' | 'activate' | 'focus';
-/**
- * `field.props` entries may be author expressions (functions) rather than
- * literals, so a prop can only be read through the host's evaluator — the same
- * `wrapFieldProps` treatment `FieldsList` gives every field component.
- */
-export declare function readFieldProp<T>(value: T | (() => T), evaluate?: (fn: Function) => unknown): T | undefined;
-export declare function interactModeFor(field: BluepicField, evaluate?: (fn: Function) => unknown): InteractMode;
-/** The binding an inline text editor reads and writes. */
-export declare function inlineTextBinding(field: BluepicField): string | undefined;