@open-slot-ui/core 0.11.1 → 0.12.1

package/dist/index.d.cts

@@ -252,6 +252,15 @@ interface LayoutSpec {
     scale?: number;
     /** Rotation in degrees, clockwise. Default 0. */
     rotation?: number;
+    /**
+     * Which rect the anchor resolves against. `'stage'` (default) = the uniformly-scaled
+     * design FRAME, so the HUD scales as one homogeneous unit and inter-control gaps never
+     * change with aspect ratio. `'screen'` = the RAW viewport, so a control hugs the true
+     * screen edge even when the frame is letterboxed off it — for the corner utility buttons
+     * (mute / fullscreen / RTP / timers), which must sit in the viewport corner at every
+     * aspect (otherwise a bottom-anchored letterboxed frame drops a "top" control mid-screen).
+     */
+    origin?: 'stage' | 'screen';
 }
 interface Placement {
     x: number;

package/dist/index.d.ts

@@ -252,6 +252,15 @@ interface LayoutSpec {
     scale?: number;
     /** Rotation in degrees, clockwise. Default 0. */
     rotation?: number;
+    /**
+     * Which rect the anchor resolves against. `'stage'` (default) = the uniformly-scaled
+     * design FRAME, so the HUD scales as one homogeneous unit and inter-control gaps never
+     * change with aspect ratio. `'screen'` = the RAW viewport, so a control hugs the true
+     * screen edge even when the frame is letterboxed off it — for the corner utility buttons
+     * (mute / fullscreen / RTP / timers), which must sit in the viewport corner at every
+     * aspect (otherwise a bottom-anchored letterboxed frame drops a "top" control mid-screen).
+     */
+    origin?: 'stage' | 'screen';
 }
 interface Placement {
     x: number;

package/dist/index.js

@@ -131,10 +131,10 @@ function anchorFactors(anchor) {
 function resolvePlacement(spec, screen) {
   const [ax, ay] = anchorFactors(spec.anchor);
   const [ox, oy] = spec.offset ?? [0, 0];
-  const st = screen.stage;
+  const rect = spec.origin === "screen" ? { x: 0, y: 0, width: screen.width, height: screen.height } : screen.stage;
   return {
-    x: st.x + ax * st.width + ox * screen.scale,
-    y: st.y + ay * st.height + oy * screen.scale,
+    x: rect.x + ax * rect.width + ox * screen.scale,
+    y: rect.y + ay * rect.height + oy * screen.scale,
     scale: screen.scale * (spec.scale ?? 1),
     rotation: (spec.rotation ?? 0) * Math.PI / 180
   };
@@ -158,11 +158,13 @@ var landscapeDefaultLayouts = Object.freeze({
   // Right-anchored so a long localized caption grows LEFT and never clips the edge.
   "total-win": { anchor: "bottom-right", offset: [-150, -300] },
   settings: { anchor: "bottom-center", offset: [-740, -320], rotation: -5 },
-  mute: { anchor: "top-right", offset: [-122, 46] },
-  fullscreen: { anchor: "top-right", offset: [-46, 46] },
-  rtp: { anchor: "top-left", offset: [20, 18] },
-  "session-timer": { anchor: "top-left", offset: [20, 46] },
-  "net-position": { anchor: "top-left", offset: [20, 74] }
+  // Corner utilities anchor to the SCREEN (not the letterboxed frame) so they hug the true
+  // viewport corners at every aspect — see `LayoutSpec.origin`.
+  mute: { anchor: "top-right", offset: [-122, 46], origin: "screen" },
+  fullscreen: { anchor: "top-right", offset: [-46, 46], origin: "screen" },
+  rtp: { anchor: "top-left", offset: [20, 18], origin: "screen" },
+  "session-timer": { anchor: "top-left", offset: [20, 46], origin: "screen" },
+  "net-position": { anchor: "top-left", offset: [20, 74], origin: "screen" }
 });
 var portraitDefaultLayouts = Object.freeze({
   // Mobile sizes run ~1.5× the desktop base (the Figma mobile frame draws the
@@ -177,19 +179,21 @@ var portraitDefaultLayouts = Object.freeze({
   settings: { anchor: "bottom-center", offset: [438, -480], scale: 1.5, rotation: -5 },
   "bet-minus": { anchor: "bottom-center", offset: [-105, -267], scale: 1.5 },
   "bet-plus": { anchor: "bottom-center", offset: [105, -267], scale: 1.5 },
-  mute: { anchor: "top-right", offset: [-159, 57], scale: 1.5 },
-  fullscreen: { anchor: "top-right", offset: [-57, 57], scale: 1.5 },
+  // Corner utilities anchor to the SCREEN (see `LayoutSpec.origin`) so they stay in the true
+  // viewport corner even when the portrait frame is letterboxed.
+  mute: { anchor: "top-right", offset: [-159, 57], scale: 1.5, origin: "screen" },
+  fullscreen: { anchor: "top-right", offset: [-57, 57], scale: 1.5, origin: "screen" },
   // Compliance readouts scale up ~2× on mobile with wider line spacing.
-  rtp: { anchor: "top-left", offset: [16, 16], scale: 2 },
-  "session-timer": { anchor: "top-left", offset: [16, 66], scale: 2 },
-  "net-position": { anchor: "top-left", offset: [16, 116], scale: 2 },
+  rtp: { anchor: "top-left", offset: [16, 16], scale: 2, origin: "screen" },
+  "session-timer": { anchor: "top-left", offset: [16, 66], scale: 2, origin: "screen" },
+  "net-position": { anchor: "top-left", offset: [16, 116], scale: 2, origin: "screen" },
   balance: { anchor: "bottom-left", offset: [36, -110], rotation: -5 },
   bet: { anchor: "bottom-right", offset: [-36, -110], rotation: 5 }
 });
 function defaultLayout(id) {
   const l = landscapeDefaultLayouts[id];
   if (!l) return { anchor: "center" };
-  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation };
+  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation, origin: l.origin };
 }
 
 // src/transition/Transition.ts
@@ -2457,7 +2461,7 @@ var OpenUI = class {
 
 // src/spec/responsive.ts
 function cloneLayout(l) {
-  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation };
+  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation, origin: l.origin };
 }
 function activeKeys(screen) {
   return [screen.orientation, screen.breakpoint];