@open-slot-ui/core 0.12.0 → 0.13.0

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;
@@ -1747,6 +1756,12 @@ type BlockSpec = {
         payouts: string;
         icon?: string;
     }>;
+} | {
+    kind: 'paylines';
+    id: string;
+    reels: number;
+    rows: number;
+    lines: number[][];
 } | {
     kind: 'image';
     id: string;
@@ -1786,7 +1801,7 @@ type BlockSpec = {
     children: BlockSpec[];
 });
 /** All block kinds, for runtime validation of untyped host data. */
-declare const BLOCK_KINDS: readonly ["slider", "toggle", "button", "select", "stepper", "value", "text", "heading", "subheading", "callout", "stat-grid", "mode-stats", "steps", "table", "paytable", "image", "media", "cards", "legal", "divider", "group"];
+declare const BLOCK_KINDS: readonly ["slider", "toggle", "button", "select", "stepper", "value", "text", "heading", "subheading", "callout", "stat-grid", "mode-stats", "steps", "table", "paytable", "paylines", "image", "media", "cards", "legal", "divider", "group"];
 interface PanelSpec {
     id: string;
     variant: PanelVariant;

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;
@@ -1747,6 +1756,12 @@ type BlockSpec = {
         payouts: string;
         icon?: string;
     }>;
+} | {
+    kind: 'paylines';
+    id: string;
+    reels: number;
+    rows: number;
+    lines: number[][];
 } | {
     kind: 'image';
     id: string;
@@ -1786,7 +1801,7 @@ type BlockSpec = {
     children: BlockSpec[];
 });
 /** All block kinds, for runtime validation of untyped host data. */
-declare const BLOCK_KINDS: readonly ["slider", "toggle", "button", "select", "stepper", "value", "text", "heading", "subheading", "callout", "stat-grid", "mode-stats", "steps", "table", "paytable", "image", "media", "cards", "legal", "divider", "group"];
+declare const BLOCK_KINDS: readonly ["slider", "toggle", "button", "select", "stepper", "value", "text", "heading", "subheading", "callout", "stat-grid", "mode-stats", "steps", "table", "paytable", "paylines", "image", "media", "cards", "legal", "divider", "group"];
 interface PanelSpec {
     id: string;
     variant: PanelVariant;

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
@@ -1273,6 +1277,7 @@ var BLOCK_KINDS = [
   "steps",
   "table",
   "paytable",
+  "paylines",
   "image",
   "media",
   "cards",
@@ -1434,6 +1439,10 @@ function validateSpec(spec) {
         if (b.kind === "paytable" && (!b.rows || b.rows.length === 0)) {
           add("warn", `${p}.rows`, "empty-paytable", "a paytable block has no rows");
         }
+        if (b.kind === "paylines") {
+          if (!(b.reels > 0) || !(b.rows > 0)) add("error", `${p}.reels`, "paylines-shape", "a paylines block needs reels > 0 and rows > 0");
+          if (!b.lines || b.lines.length === 0) add("warn", `${p}.lines`, "empty-paylines", "a paylines block has no lines");
+        }
         if (b.kind === "image" && (!b.src || !b.src.trim())) {
           add("error", `${p}.src`, "image-src", "an image block needs a src");
         }
@@ -2457,7 +2466,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];
@@ -2915,6 +2924,15 @@ function renderBlocksHtml(blocks, tr, facts) {
       case "paytable":
         out.push(`<div class="ohm-grid">${renderPaytable(b.rows, tr)}</div>`);
         break;
+      case "paylines": {
+        const masks = b.lines.map((line, i) => {
+          const cells = [];
+          for (let row = 0; row < b.rows; row++) for (let reel = 0; reel < b.reels; reel++) cells.push(`<i class="${line[reel] === row ? "on" : ""}"></i>`);
+          return `<div class="ohm-line"><div class="ohm-linegrid" style="grid-template-columns:repeat(${b.reels},1fr)">${cells.join("")}</div><span>${i + 1}</span></div>`;
+        }).join("");
+        out.push(`<div class="ohm-lines">${masks}</div>`);
+        break;
+      }
       case "table": {
         const head = b.columns?.length ? `<thead><tr>${b.columns.map((c) => `<th>${esc(tr(c))}</th>`).join("")}</tr></thead>` : "";
         const body = b.rows.map((r) => `<tr>${r.map((c) => `<td>${esc(tr(c))}</td>`).join("")}</tr>`).join("");