@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Map/drawing/config/layer-models.js

@@ -0,0 +1,38 @@
+import { Box, degToRad, Rect } from '@expofp/geometry';
+/**
+ * The attribute that turns a designer `<image>` into a 3D model: the URL of a
+ * .glb/.gltf, authored relative to the drawing. `@expofp/config` rebases it
+ * with every other asset URL the drawing carries when the payload loads, so
+ * what arrives here is already resolved — absolute for a live load,
+ * page-relative or rooted for an offline copy.
+ */
+export const MODEL_3D_ATTRIBUTE = 'data-model-3d';
+/**
+ * The rotation an element's `transform` carries, in radians.
+ *
+ * Only the first transform in the list is read, which is what the designer emits. It inherits the
+ * assumption `loadLayerImages` has always made: an SVG `rotate(a, cx, cy)` is treated as pivoting
+ * about the element's own center, because that is what a geometry `Rect` does. A transform with a
+ * different pivot is placed wrongly — pre-existing behavior, recorded rather than fixed here.
+ * @param element - The graphic to read.
+ * @returns The rotation in radians, positive = clockwise.
+ */
+export function svgTransformRotation(element) {
+    return degToRad(element.transform?.animVal[0]?.angle ?? 0);
+}
+/**
+ * Builds a {@link ModelDef} from an `<image>` carrying {@link MODEL_3D_ATTRIBUTE}.
+ *
+ * Bounds come from the element's own x/y/width/height — `Box.fromSvg` reads an `<image>` as readily
+ * as a `<rect>` — combined with its transform's rotation. The URL is taken verbatim: the drawing
+ * reaches the runtime with its asset URLs already resolved.
+ * @param element - The placeholder image.
+ * @returns The model def.
+ */
+export function createModelDefFromElement(element) {
+    const box = Box.fromSvg(element);
+    return {
+        url: element.getAttribute(MODEL_3D_ATTRIBUTE) ?? '',
+        bounds: Rect.fromMinMax(box.min, box.max, svgTransformRotation(element)),
+    };
+}

package/dist/esm/components/Map/drawing/config/loadBoothsImages.d.ts

@@ -0,0 +1,45 @@
+import { Rect } from '@expofp/geometry';
+import { type Booth } from '../../../../store/BoothStore';
+import { type Layer } from '../../../../store/LayerStore';
+import type { ImageUrls } from '../../../../utils/loadImagesInBatches';
+export declare function loadLayersImages(): Promise<void>;
+export declare const getImageLayerName: (layerName: string) => string;
+export declare const getModelLayerName: (layerName: string) => string;
+export declare function mapBoothsLogos(booths: Booth[]): Map<number, ImageUrls>;
+/**
+ * A layer's designer images, split by what they actually are. An `<image>` carrying
+ * {@link MODEL_3D_ATTRIBUTE} is a placeholder for a 3D model, so it must be kept out of image
+ * loading entirely — its `href` is never fetched — and rendered from the model URL instead.
+ */
+export interface LayerGraphics {
+    /** Ordinary images, to be loaded and drawn as textured quads. */
+    icons: SVGImageElement[];
+    /** Images standing in for 3D models. */
+    models: SVGImageElement[];
+}
+export declare function getLayerGraphics(layer: Layer): LayerGraphics;
+/** Where one booth's logo goes. */
+export interface BoothImg {
+    /** The booth the logo sits in. */
+    booth: Booth;
+    /** The booth's slug, which becomes the def's name. */
+    name?: string;
+    /**
+     * The booth center, the fitted logo size, and the booth rotation.
+     *
+     * The image def keeps this `Rect` by reference, and `rotateImageDef` and `flipImageDef` rotate
+     * it in place. Each booth gets its own, so no other owner sees those writes.
+     */
+    bounds: Rect;
+}
+/**
+ * Fits a logo inside a booth and returns where the logo goes.
+ *
+ * This function takes the logo's aspect ratio, not the logo and not its pixel size. The ratio is
+ * the only fact it ever needed from the image: every length below comes from the booth.
+ * @param booth - The booth to fit the logo into.
+ * @param ratio - The logo's width divided by its height. A finite positive number.
+ * @returns The placement.
+ */
+export declare function createBoothImg(booth: Booth, ratio: number): BoothImg;
+//# sourceMappingURL=loadBoothsImages.d.ts.map

package/dist/esm/components/Map/drawing/config/loadBoothsImages.js

@@ -0,0 +1,99 @@
+import { degToRad, radToDeg, Rect } from '@expofp/geometry';
+import { update } from '@expofp/renderer';
+import { select } from 'd3';
+import { SEPARATOR } from '../../../../constants';
+import { getFpSvgJs } from '../../../../data/fp-payloads';
+import { getLayerSvg } from '../../../../data/svg';
+import { getLogoUrl } from '../../../../utils/getLogoUrl';
+import { boothLogoExhibitor } from './booth-logos';
+import { invokeLayerImages } from './layer-images';
+import { MODEL_3D_ATTRIBUTE } from './layer-models';
+export async function loadLayersImages() {
+    const handlerResults = invokeLayerImages();
+    await Promise.all(handlerResults.map(async (handlerPromise) => {
+        const layerToUpdate = await handlerPromise;
+        if (!layerToUpdate?.children.length)
+            return;
+        const { layer, children } = layerToUpdate;
+        layer.children.push(...children);
+        update(layer);
+    }));
+}
+export const getImageLayerName = (layerName) => `${layerName}${SEPARATOR}images`;
+export const getModelLayerName = (layerName) => `${layerName}${SEPARATOR}models`;
+export function mapBoothsLogos(booths) {
+    const logos = new Map();
+    for (const booth of booths) {
+        if (!booth.rect)
+            continue;
+        const logo = boothLogoExhibitor(booth)?.logo;
+        if (!logo)
+            continue;
+        logos.set(booth.id, { preferred: getLogoUrl(logo), fallback: logo.url });
+    }
+    return logos;
+}
+export function getLayerGraphics(layer) {
+    const selected = select(getLayerSvg(layer)).select(`[data-layer="${layer.name}"]`);
+    const elements = ((getFpSvgJs().__fpVersion ?? 0) > 5
+        ? selected.selectAll(':scope > image, :scope > g:not([data-layer]) image').nodes()
+        : selected.selectAll(":scope > g[data-is-editable='false'] image").nodes()).filter(Boolean);
+    const icons = [];
+    const models = [];
+    for (const element of elements) {
+        (element.hasAttribute(MODEL_3D_ATTRIBUTE) ? models : icons).push(element);
+    }
+    return { icons, models };
+}
+/**
+ * Fits a logo inside a booth and returns where the logo goes.
+ *
+ * This function takes the logo's aspect ratio, not the logo and not its pixel size. The ratio is
+ * the only fact it ever needed from the image: every length below comes from the booth.
+ * @param booth - The booth to fit the logo into.
+ * @param ratio - The logo's width divided by its height. A finite positive number.
+ * @returns The placement.
+ */
+export function createBoothImg(booth, ratio) {
+    const rect = booth.rect;
+    // booth.rect is a geometry Box: unrotated footprint (size + center).
+    const boothW = rect.size.width;
+    const boothH = rect.size.height;
+    const ratioBooth = boothH ? boothW / boothH : 1;
+    let imgWidth, imgHeight, imgAngle;
+    const SCALE_FACTOR = 0.9;
+    if (ratioBooth > ratio) {
+        imgHeight = boothH * SCALE_FACTOR;
+        imgWidth = imgHeight * ratio;
+    }
+    else {
+        imgWidth = boothW * SCALE_FACTOR;
+        imgHeight = imgWidth / ratio;
+    }
+    const rotate = booth.rotate || 0;
+    if (ratio >= 2 && !rotate && boothH >= boothW * 2.0) {
+        imgHeight = boothW * SCALE_FACTOR;
+        imgWidth = imgHeight * ratio;
+        imgAngle = -90;
+    }
+    else {
+        imgAngle = radToDeg(rotate);
+    }
+    // Width and height should not exceed the booth's width and height
+    if (imgWidth > boothW) {
+        imgWidth = boothW;
+        imgHeight = imgWidth / ratio;
+    }
+    if (imgHeight > boothH) {
+        imgHeight = boothH;
+        imgWidth = imgHeight * ratio;
+    }
+    // The logo is centered on the booth; size = fitted dimensions; rotation =
+    // imgAngle (degrees) → radians, positive = clockwise (y-down); elevation = the booth's, so the
+    // logo lies on its roof rather than on the floor under it.
+    return {
+        name: booth.slug,
+        bounds: new Rect(rect.center, { x: imgWidth, y: imgHeight }, degToRad(imgAngle), booth.elevation),
+        booth,
+    };
+}

package/dist/esm/components/Map/drawing/config/pin-geometry.d.ts

@@ -0,0 +1,65 @@
+/**
+ * How a count is written on a cluster marker: the count itself up to 99, and `99+` above that.
+ *
+ * Three characters is the most the counter circle holds, and the font size is chosen for three, so
+ * a longer label would have to be drawn smaller or clipped.
+ * @param count - How many points the cluster holds.
+ * @returns The label.
+ */
+export declare function clusterCountText(count: number): string;
+/**
+ * The counter circle inside a cluster pin, in CSS pixels from the pin's top-left corner. The pin
+ * fills its canvas, so this is also the canvas's CSS coordinate space.
+ * @param widthPx - The pin's width in CSS pixels.
+ * @returns The circle's center and radius.
+ */
+export declare function clusterCounterCircle(widthPx: number): {
+    cx: number;
+    cy: number;
+    r: number;
+};
+/**
+ * The count's em height, chosen once so that `99+` — the widest label — fits inside the circle, and
+ * used for every count so a marker does not change size as its membership changes.
+ *
+ * The label's half-diagonal is what has to fit, not its half-width: a box inscribed in a circle
+ * touches at its corners.
+ * @param radiusPx - The counter circle's radius in CSS pixels.
+ * @returns The font size in CSS pixels.
+ */
+export declare function clusterCountFontPx(radiusPx: number): number;
+/**
+ * The teardrop's height as a fraction of its width, for every pin drawn from `createPinCanvas`.
+ * Here rather than in `canvases.ts`, so a pin's height is computable without loading a module that
+ * builds a canvas.
+ */
+export declare const PIN_ASPECT: number;
+/** The pin head's radius as a fraction of the pin's width, for the PoI pin and the cluster pin. */
+export declare const PIN_HEAD_FACTOR = 0.37;
+/** The edge stroke's width in CSS pixels, which `createPinCanvas` also takes as its inset. */
+export declare const PIN_EDGE_PX = 1.4;
+/** The counter circle's radius as a fraction of the pin head's radius. */
+export declare const CLUSTER_CIRCLE_FACTOR = 0.78;
+/**
+ * One character's advance width as a fraction of the font size, for the SDK's condensed face.
+ *
+ * An estimate, like {@link CLUSTER_COUNT_CAP_EM} and {@link CLUSTER_COUNT_FIT}, rather than a
+ * computation: the count is laid out by the renderer's text engine and not by a 2D context, so
+ * there is nothing here to call `measureText` on. Nothing automated checks the three against the
+ * shipped font. The renderer's `ClusterCounts` baselines draw a fixture font, so they check the
+ * layout, not these numbers. The real check is visual: run the app and look at a `99+` marker.
+ */
+export declare const CLUSTER_COUNT_ADVANCE_EM = 0.58;
+/**
+ * How far below a `top`-aligned line's top edge the digits' ink center sits, in em. Troika anchors
+ * the line at the block's top, ascender space included, so this lifts the glyphs from that edge onto
+ * the circle's center. Measured in the running app with the shipped font (device ratios 1 and 2, one
+ * to three characters), not half the block, which was the 0.5 it replaced. The name keeps the old
+ * "half block" wording. The renderer story `ClusterCounts` keeps its own value for its fixture font.
+ */
+export declare const COUNT_BLOCK_HALF_EM = 0.61;
+/** A digit's cap height as a fraction of the font size, measured the same way. */
+export declare const CLUSTER_COUNT_CAP_EM = 0.72;
+/** How much of the circle the label claims, leaving a visible ring of white around it. */
+export declare const CLUSTER_COUNT_FIT = 0.88;
+//# sourceMappingURL=pin-geometry.d.ts.map

package/dist/esm/components/Map/drawing/config/pin-geometry.js

@@ -0,0 +1,75 @@
+/**
+ * How a count is written on a cluster marker: the count itself up to 99, and `99+` above that.
+ *
+ * Three characters is the most the counter circle holds, and the font size is chosen for three, so
+ * a longer label would have to be drawn smaller or clipped.
+ * @param count - How many points the cluster holds.
+ * @returns The label.
+ */
+export function clusterCountText(count) {
+    return count > 99 ? '99+' : String(count);
+}
+/**
+ * The counter circle inside a cluster pin, in CSS pixels from the pin's top-left corner. The pin
+ * fills its canvas, so this is also the canvas's CSS coordinate space.
+ * @param widthPx - The pin's width in CSS pixels.
+ * @returns The circle's center and radius.
+ */
+export function clusterCounterCircle(widthPx) {
+    const head = widthPx * PIN_HEAD_FACTOR;
+    return {
+        cx: widthPx / 2,
+        // The head's center, which is one radius plus the stroke that is inset around it. Dropping the
+        // inset still scales with the width, so only an absolute assertion catches it.
+        cy: head + PIN_EDGE_PX,
+        r: head * CLUSTER_CIRCLE_FACTOR,
+    };
+}
+/**
+ * The count's em height, chosen once so that `99+` — the widest label — fits inside the circle, and
+ * used for every count so a marker does not change size as its membership changes.
+ *
+ * The label's half-diagonal is what has to fit, not its half-width: a box inscribed in a circle
+ * touches at its corners.
+ * @param radiusPx - The counter circle's radius in CSS pixels.
+ * @returns The font size in CSS pixels.
+ */
+export function clusterCountFontPx(radiusPx) {
+    const halfWidthEm = (3 * CLUSTER_COUNT_ADVANCE_EM) / 2;
+    const halfHeightEm = CLUSTER_COUNT_CAP_EM / 2;
+    return (CLUSTER_COUNT_FIT * radiusPx) / Math.hypot(halfWidthEm, halfHeightEm);
+}
+/**
+ * The teardrop's height as a fraction of its width, for every pin drawn from `createPinCanvas`.
+ * Here rather than in `canvases.ts`, so a pin's height is computable without loading a module that
+ * builds a canvas.
+ */
+export const PIN_ASPECT = 93 / 81;
+/** The pin head's radius as a fraction of the pin's width, for the PoI pin and the cluster pin. */
+export const PIN_HEAD_FACTOR = 0.37;
+/** The edge stroke's width in CSS pixels, which `createPinCanvas` also takes as its inset. */
+export const PIN_EDGE_PX = 1.4;
+/** The counter circle's radius as a fraction of the pin head's radius. */
+export const CLUSTER_CIRCLE_FACTOR = 0.78;
+/**
+ * One character's advance width as a fraction of the font size, for the SDK's condensed face.
+ *
+ * An estimate, like {@link CLUSTER_COUNT_CAP_EM} and {@link CLUSTER_COUNT_FIT}, rather than a
+ * computation: the count is laid out by the renderer's text engine and not by a 2D context, so
+ * there is nothing here to call `measureText` on. Nothing automated checks the three against the
+ * shipped font. The renderer's `ClusterCounts` baselines draw a fixture font, so they check the
+ * layout, not these numbers. The real check is visual: run the app and look at a `99+` marker.
+ */
+export const CLUSTER_COUNT_ADVANCE_EM = 0.58;
+/**
+ * How far below a `top`-aligned line's top edge the digits' ink center sits, in em. Troika anchors
+ * the line at the block's top, ascender space included, so this lifts the glyphs from that edge onto
+ * the circle's center. Measured in the running app with the shipped font (device ratios 1 and 2, one
+ * to three characters), not half the block, which was the 0.5 it replaced. The name keeps the old
+ * "half block" wording. The renderer story `ClusterCounts` keeps its own value for its fixture font.
+ */
+export const COUNT_BLOCK_HALF_EM = 0.61;
+/** A digit's cap height as a fraction of the font size, measured the same way. */
+export const CLUSTER_COUNT_CAP_EM = 0.72;
+/** How much of the circle the label claims, leaving a visible ring of white around it. */
+export const CLUSTER_COUNT_FIT = 0.88;

package/dist/esm/components/Map/drawing/config/poi-pin-shape.d.ts

@@ -0,0 +1,100 @@
+/**
+ * A vector outdoor-PoI pin, traced from the outdoor-only app's marker artwork. Coordinates
+ * are in that artwork's pixel frame (which includes a drop-shadow margin), so
+ * the numbers can be checked against the source PNGs directly.
+ */
+export interface PoiPinShape {
+    /** The artwork frame: the pin plus room for its drop shadow. */
+    readonly frame: {
+        readonly width: number;
+        readonly height: number;
+    };
+    /** Width of the visible pin (stroke included) — what the size constants set. */
+    readonly bodyWidth: number;
+    /**
+     * Teardrop outline as SVG path data, starting at the tip apex. For a stroked
+     * pin this is the stroke's centerline.
+     */
+    readonly outline: string;
+    readonly strokeWidth: number;
+    /** Lowest point of {@link outline}, at the horizontal center of the frame. */
+    readonly tipApexY: number;
+    /**
+     * The round head: its center, and the radius of the disc drawn on it (the
+     * glyph's colored disc, or the selection dot).
+     */
+    readonly head: {
+        readonly x: number;
+        readonly y: number;
+        readonly innerRadius: number;
+    };
+    readonly shadow: {
+        readonly offsetY: number;
+        readonly blur: number;
+    };
+}
+/**
+ * The category pin (82x96 artwork): a white teardrop around a colored disc
+ * that carries the poiType glyph.
+ */
+export declare const POI_MARKER_PIN_SHAPE: {
+    readonly frame: {
+        readonly width: 82;
+        readonly height: 96;
+    };
+    readonly bodyWidth: 70;
+    readonly outline: 'M41 86.13C41.68 85.63 76 61.93 76 36.1A35 35 0 0 0 6 36.1C6 61.93 40.32 85.63 41 86.13Z';
+    readonly strokeWidth: 0;
+    readonly tipApexY: 86.13;
+    readonly head: {
+        readonly x: 41;
+        readonly y: 36.1;
+        readonly innerRadius: 29.3;
+    };
+    readonly shadow: {
+        readonly offsetY: 2;
+        readonly blur: 4;
+    };
+};
+/**
+ * The selection pin (102x137 artwork): a teardrop filled with the selection
+ * color, outlined and dotted in a darker shade of it.
+ */
+export declare const POI_SELECTED_PIN_SHAPE: {
+    readonly frame: {
+        readonly width: 102;
+        readonly height: 137;
+    };
+    readonly bodyWidth: 90;
+    readonly outline: 'M51 125.88C56.54 123.07 94.5 77 94.5 47A43.5 43.5 0 0 0 7.5 47C7.5 77 45.46 123.07 51 125.88Z';
+    readonly strokeWidth: 3;
+    readonly tipApexY: 125.88;
+    readonly head: {
+        readonly x: 51;
+        readonly y: 47;
+        readonly innerRadius: 19;
+    };
+    readonly shadow: {
+        readonly offsetY: 2.5;
+        readonly blur: 5;
+    };
+};
+export interface PoiPinLayout {
+    /** Artwork frame units → device pixels. */
+    readonly scale: number;
+    readonly canvasWidth: number;
+    readonly canvasHeight: number;
+    /**
+     * CSS px to shift the bottom-anchored image down by (MapLibre `icon-offset`),
+     * so the pin tip — not the shadow below it — sits on the point.
+     */
+    readonly tipOffset: number;
+}
+/** Sizes a pin whose visible body is `bodyWidthPx` CSS px wide. */
+export declare function getPoiPinLayout(shape: PoiPinShape, bodyWidthPx: number, pixelRatio: number): PoiPinLayout;
+/**
+ * The darker shade the selection pin draws its outline and dot in — the
+ * artwork's #ff4747 → #9a2626 pairing, applied to any selection color.
+ */
+export declare function getPoiPinShadeColor(color: string): string;
+//# sourceMappingURL=poi-pin-shape.d.ts.map

package/dist/esm/components/Map/drawing/config/poi-pin-shape.js

@@ -0,0 +1,51 @@
+import Color from 'color';
+/**
+ * The category pin (82x96 artwork): a white teardrop around a colored disc
+ * that carries the poiType glyph.
+ */
+export const POI_MARKER_PIN_SHAPE = {
+    frame: { width: 82, height: 96 },
+    bodyWidth: 70,
+    outline: 'M41 86.13C41.68 85.63 76 61.93 76 36.1A35 35 0 0 0 6 36.1C6 61.93 40.32 85.63 41 86.13Z',
+    strokeWidth: 0,
+    tipApexY: 86.13,
+    head: { x: 41, y: 36.1, innerRadius: 29.3 },
+    shadow: { offsetY: 2, blur: 4 },
+};
+/**
+ * The selection pin (102x137 artwork): a teardrop filled with the selection
+ * color, outlined and dotted in a darker shade of it.
+ */
+export const POI_SELECTED_PIN_SHAPE = {
+    frame: { width: 102, height: 137 },
+    bodyWidth: 90,
+    outline: 'M51 125.88C56.54 123.07 94.5 77 94.5 47A43.5 43.5 0 0 0 7.5 47C7.5 77 45.46 123.07 51 125.88Z',
+    strokeWidth: 3,
+    tipApexY: 125.88,
+    head: { x: 51, y: 47, innerRadius: 19 },
+    shadow: { offsetY: 2.5, blur: 5 },
+};
+/** Sizes a pin whose visible body is `bodyWidthPx` CSS px wide. */
+export function getPoiPinLayout(shape, bodyWidthPx, pixelRatio) {
+    const scale = (bodyWidthPx / shape.bodyWidth) * pixelRatio;
+    const canvasHeight = Math.ceil(shape.frame.height * scale);
+    const visibleTipY = (shape.tipApexY + shape.strokeWidth / 2) * scale;
+    return {
+        scale,
+        canvasWidth: Math.ceil(shape.frame.width * scale),
+        canvasHeight,
+        tipOffset: (canvasHeight - visibleTipY) / pixelRatio,
+    };
+}
+/**
+ * The darker shade the selection pin draws its outline and dot in — the
+ * artwork's #ff4747 → #9a2626 pairing, applied to any selection color.
+ */
+export function getPoiPinShadeColor(color) {
+    try {
+        return Color(color).darken(0.41).desaturate(0.4).hex();
+    }
+    catch {
+        return color;
+    }
+}

package/dist/esm/components/Map/drawing/config/poi-pin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The category pin for one outdoor PoI: the poiType glyph knocked out in white
+ * on a disc in the booth's authored color, inside a white teardrop. Returns
+ * `ImageData` rather than a canvas — the only consumer is `map.addImage`, and
+ * a canvas per PoI would stay resident for the session.
+ */
+export declare function createPoiPinImage(image: HTMLImageElement | null, bodyWidthPx: number, pixelRatio: number, color: string): ImageData;
+/** The shared selection pin — one image serves every marker. */
+export declare function createPoiPinheadImage(bodyWidthPx: number, pixelRatio: number, color: string): ImageData;
+//# sourceMappingURL=poi-pin.d.ts.map

package/dist/esm/components/Map/drawing/config/poi-pin.js

@@ -0,0 +1,88 @@
+import { POI_PIN_DEFAULT_COLOR } from '../../../../constants.js';
+import { createImageCanvas } from './canvases.js';
+import { getPoiPinLayout, getPoiPinShadeColor, POI_MARKER_PIN_SHAPE, POI_SELECTED_PIN_SHAPE, } from './poi-pin-shape.js';
+// Glyph box edge as a fraction of the disc diameter (glyphs keep their aspect).
+const MARKER_GLYPH_FRACTION = 0.6;
+const PIN_WHITE = '#ffffff';
+const PIN_SHADOW_COLOR = 'rgba(0, 0, 0, 0.35)';
+// A canvas sized for `shape`, its context scaled to artwork frame units.
+function createPinCanvas(shape, layout) {
+    const canvas = document.createElement('canvas');
+    canvas.width = layout.canvasWidth;
+    canvas.height = layout.canvasHeight;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(layout.scale, layout.scale);
+    return { canvas, ctx, path: new Path2D(shape.outline) };
+}
+// Shadow settings ignore the context transform: they are device pixels.
+function setPinShadow(ctx, shape, scale) {
+    ctx.shadowColor = PIN_SHADOW_COLOR;
+    ctx.shadowOffsetY = shape.shadow.offsetY * scale;
+    ctx.shadowBlur = shape.shadow.blur * scale;
+}
+function clearPinShadow(ctx) {
+    ctx.shadowColor = 'transparent';
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 0;
+}
+function toImageData(canvas) {
+    return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+}
+/**
+ * The category pin for one outdoor PoI: the poiType glyph knocked out in white
+ * on a disc in the booth's authored color, inside a white teardrop. Returns
+ * `ImageData` rather than a canvas — the only consumer is `map.addImage`, and
+ * a canvas per PoI would stay resident for the session.
+ */
+export function createPoiPinImage(image, bodyWidthPx, pixelRatio, color) {
+    const shape = POI_MARKER_PIN_SHAPE;
+    const layout = getPoiPinLayout(shape, bodyWidthPx, pixelRatio);
+    const { canvas, ctx, path } = createPinCanvas(shape, layout);
+    const { x, y } = shape.head;
+    setPinShadow(ctx, shape, layout.scale);
+    ctx.fillStyle = PIN_WHITE;
+    ctx.fill(path);
+    clearPinShadow(ctx);
+    ctx.beginPath();
+    ctx.arc(x, y, shape.head.innerRadius, 0, 2 * Math.PI);
+    // A color the canvas can't parse (e.g. an authored `url(#gradient)` fill) is
+    // ignored, so preset the default — a white disc would hide the white glyph.
+    ctx.fillStyle = POI_PIN_DEFAULT_COLOR;
+    ctx.fillStyle = color;
+    ctx.fill();
+    // No glyph (no iconUrl, or the load failed): the plain colored pin is still
+    // a usable marker, so the PoI never vanishes.
+    if (image) {
+        const box = 2 * shape.head.innerRadius * MARKER_GLYPH_FRACTION * layout.scale;
+        const glyph = createImageCanvas(image, box, box, 1);
+        const glyphCtx = glyph.getContext('2d');
+        glyphCtx.globalCompositeOperation = 'source-in';
+        glyphCtx.fillStyle = PIN_WHITE;
+        glyphCtx.fillRect(0, 0, glyph.width, glyph.height);
+        const glyphW = glyph.width / layout.scale;
+        const glyphH = glyph.height / layout.scale;
+        ctx.drawImage(glyph, x - glyphW / 2, y - glyphH / 2, glyphW, glyphH);
+    }
+    return toImageData(canvas);
+}
+/** The shared selection pin — one image serves every marker. */
+export function createPoiPinheadImage(bodyWidthPx, pixelRatio, color) {
+    const shape = POI_SELECTED_PIN_SHAPE;
+    const layout = getPoiPinLayout(shape, bodyWidthPx, pixelRatio);
+    const { canvas, ctx, path } = createPinCanvas(shape, layout);
+    const shade = getPoiPinShadeColor(color);
+    // Shadow the fill only: a shadowed stroke would darken the fill's edge.
+    setPinShadow(ctx, shape, layout.scale);
+    ctx.fillStyle = color;
+    ctx.fill(path);
+    clearPinShadow(ctx);
+    ctx.strokeStyle = shade;
+    ctx.lineWidth = shape.strokeWidth;
+    ctx.lineJoin = 'round';
+    ctx.stroke(path);
+    ctx.beginPath();
+    ctx.arc(shape.head.x, shape.head.y, shape.head.innerRadius, 0, 2 * Math.PI);
+    ctx.fillStyle = shade;
+    ctx.fill();
+    return toImageData(canvas);
+}

package/dist/esm/components/Map/drawing/config/selection-style.d.ts

@@ -0,0 +1,12 @@
+import type { SelectionStyle } from '@expofp/schema';
+/**
+ * The 0..1 "how selected" value the booth background interpolates on.
+ * `blink` keeps the animated value; `solid` snaps to fully selected.
+ */
+export declare function selectionAnimationPart(style: SelectionStyle, selected: boolean, animated: number): number;
+/**
+ * Border color of a selected booth. `solid` paints the border in the fill
+ * color so the shape reads as one flat highlight without an outline.
+ */
+export declare function selectedBorderColor(style: SelectionStyle, configuredBorder: string | null | undefined, fillColor: string, fallback: string): string;
+//# sourceMappingURL=selection-style.d.ts.map

package/dist/esm/components/Map/drawing/config/selection-style.js

@@ -0,0 +1,18 @@
+/**
+ * The 0..1 "how selected" value the booth background interpolates on.
+ * `blink` keeps the animated value; `solid` snaps to fully selected.
+ */
+export function selectionAnimationPart(style, selected, animated) {
+    if (style === 'blink')
+        return animated;
+    return selected ? 1 : 0;
+}
+/**
+ * Border color of a selected booth. `solid` paints the border in the fill
+ * color so the shape reads as one flat highlight without an outline.
+ */
+export function selectedBorderColor(style, configuredBorder, fillColor, fallback) {
+    if (style === 'solid')
+        return fillColor;
+    return configuredBorder || fallback;
+}

package/dist/esm/components/Map/framing-rect.d.ts

@@ -0,0 +1,16 @@
+import { Box } from '@expofp/geometry';
+/**
+ * The part of the canvas a command should frame into: what the user can see of the plan, narrowed by
+ * an overlay sat over it.
+ *
+ * Composed here rather than kept on the store, because nothing observes it — it is read once, by the
+ * command about to run. `canvasVisibleRectPx` is where the plan is *drawn* and does have observers;
+ * widening that would slide the plan every time a details panel opened, where this only moves where
+ * a `zoomTo` puts its target. The imperative renderer got the same effect by shifting the visible
+ * rect around each call and putting it back in a `finally`.
+ *
+ * Shared by both views, so a command frames into the same region with and without MapLibre.
+ * @returns The region, in css pixels from the canvas's top-left corner.
+ */
+export declare function framingRect(): Box;
+//# sourceMappingURL=framing-rect.d.ts.map

package/dist/esm/components/Map/framing-rect.js

@@ -0,0 +1,24 @@
+import { Box } from '@expofp/geometry';
+import { uiState } from '../../store';
+/**
+ * The part of the canvas a command should frame into: what the user can see of the plan, narrowed by
+ * an overlay sat over it.
+ *
+ * Composed here rather than kept on the store, because nothing observes it — it is read once, by the
+ * command about to run. `canvasVisibleRectPx` is where the plan is *drawn* and does have observers;
+ * widening that would slide the plan every time a details panel opened, where this only moves where
+ * a `zoomTo` puts its target. The imperative renderer got the same effect by shifting the visible
+ * rect around each call and putting it back in a `finally`.
+ *
+ * Shared by both views, so a command frames into the same region with and without MapLibre.
+ * @returns The region, in css pixels from the canvas's top-left corner.
+ */
+export function framingRect() {
+    const rect = uiState.canvasVisibleRectPx;
+    if (!uiState.shouldShiftMapRect)
+        return rect;
+    // The overlay sits at the start of the layout, which is the right-hand side in an RTL locale.
+    return uiState.rtl
+        ? Box.fromMinMax(rect.min, { x: rect.max.x - uiState.overlayWidthPx, y: rect.max.y })
+        : Box.fromMinMax({ x: rect.min.x + uiState.overlayWidthPx, y: rect.min.y }, rect.max);
+}