@open-slot-ui/pixi 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -2782,6 +2782,14 @@ function paytableCell(r, ui, cellW, lineH) {
 var MARGIN = 16;
 var HEADER_H = 60;
 var INSET = 22;
+var LIGHT = {
+  surface: "#ffffff",
+  surfaceAlt: "#eef1f6",
+  text: "#181b20",
+  textDim: "#5b6472",
+  border: "#000000",
+  accent: "#d99000"
+};
 var MenuView = class extends ControlView {
   constructor(panel, controls, blocks, ui, ticker, opts = {}) {
     super(panel, ui);
@@ -2793,9 +2801,11 @@ var MenuView = class extends ControlView {
     this.zIndex = 120;
     this.titleKey = opts.title ?? "Menu";
     this.maxWidth = opts.maxWidth ?? 1600;
+    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT.surface, surfaceAlt: LIGHT.surfaceAlt, text: LIGHT.text, textDim: LIGHT.textDim, accent: LIGHT.accent } };
+    this.lightUi = new Proxy(ui, { get: (t, p) => p === "theme" ? lightTheme : Reflect.get(t, p) });
     this.backdrop.eventMode = "static";
     this.backdrop.on("pointertap", () => this.panel.closePanel());
-    this.title = new pixi_js.Text({ text: ui.t(this.titleKey), style: { fontFamily: ui.theme.type.family, fontSize: 24, fill: ui.theme.color.text, fontWeight: "800", letterSpacing: 1 } });
+    this.title = new pixi_js.Text({ text: ui.t(this.titleKey), style: { fontFamily: ui.theme.type.family, fontSize: 24, fill: LIGHT.text, fontWeight: "800", letterSpacing: 1 } });
     this.title.anchor.set(0, 0.5);
     this.buildClose();
     this.viewport.addChild(this.catcher, this.content);
@@ -2836,6 +2846,8 @@ var MenuView = class extends ControlView {
   childViews = [];
   titleKey;
   maxWidth;
+  /** `ui` proxy with a light theme — feeds the shared block renderer dark-on-white. */
+  lightUi;
   vpW = 0;
   vpH = 0;
   scrollY = 0;
@@ -2844,10 +2856,9 @@ var MenuView = class extends ControlView {
   lastY = 0;
   wheelHandler;
   buildClose() {
-    const t = this.ui.theme;
     const r = 22;
-    const bg = new pixi_js.Graphics().circle(0, 0, r).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.textDim });
-    const x = new pixi_js.Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: t.color.text });
+    const bg = new pixi_js.Graphics().circle(0, 0, r).fill({ color: LIGHT.border });
+    const x = new pixi_js.Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
     this.closeBtn.addChild(bg, x);
     this.closeBtn.eventMode = "static";
     this.closeBtn.cursor = "pointer";
@@ -2859,7 +2870,7 @@ var MenuView = class extends ControlView {
     this.childViews.length = 0;
     for (const child of this.content.removeChildren()) child.destroy();
     const bodyW = this.vpW > 0 ? this.vpW : Math.min(this.maxWidth - INSET * 2, 520);
-    const col = buildBlockColumn(this.blocks, this.controls, this.ui, this.ticker, bodyW, { controlSkins: this.opts.controlSkins, dropdownLayer: this.dropdownLayer });
+    const col = buildBlockColumn(this.blocks, this.controls, this.lightUi, this.ticker, bodyW, { controlSkins: this.opts.controlSkins, dropdownLayer: this.dropdownLayer });
     this.childViews = col.views;
     this.content.addChild(...col.content.removeChildren());
     this.content.x = bodyW / 2;
@@ -2871,16 +2882,15 @@ var MenuView = class extends ControlView {
     const H = screen.height;
     this.position.set(0, 0);
     this.scale.set(1);
-    const t = this.ui.theme;
-    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.62 });
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
     this.backdrop.hitArea = new pixi_js.Rectangle(0, 0, W, H);
     const marginX = Math.max(MARGIN, Math.round(W * 0.05));
     const cardW = Math.min(W - marginX * 2, this.maxWidth);
     const cardH = H - MARGIN * 2;
     const cx = (W - cardW) / 2;
     const cy = MARGIN;
-    this.card.clear().roundRect(cx, cy, cardW, cardH, t.radius.card).fill({ color: t.color.surface }).stroke({ width: 2, color: t.color.accent });
-    this.headerBar.clear().roundRect(cx, cy, cardW, HEADER_H, t.radius.card).fill({ color: t.color.surfaceAlt }).moveTo(cx + INSET, cy + HEADER_H).lineTo(cx + cardW - INSET, cy + HEADER_H).stroke({ width: 1, color: t.color.textDim, alpha: 0.3 });
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
+    this.headerBar.clear().roundRect(cx, cy, cardW, HEADER_H, 14).fill({ color: LIGHT.surfaceAlt }).moveTo(cx + INSET, cy + HEADER_H).lineTo(cx + cardW - INSET, cy + HEADER_H).stroke({ width: 1, color: LIGHT.textDim, alpha: 0.4 });
     this.title.position.set(cx + INSET, cy + HEADER_H / 2);
     this.closeBtn.position.set(cx + cardW - INSET - 8, cy + HEADER_H / 2);
     const vpX = cx + INSET;
@@ -3056,7 +3066,7 @@ var INSET2 = 24;
 var BTN_H = 52;
 var BTN_GAP = 14;
 var ROW_GAP = 16;
-var LIGHT = {
+var LIGHT2 = {
   surface: "#ffffff",
   surfaceAlt: "#eef1f6",
   text: "#181b20",
@@ -3075,7 +3085,7 @@ var DialogView = class extends ControlView {
     this.opts = opts;
     this.zIndex = 130;
     this.maxWidth = opts.maxWidth ?? 520;
-    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT.surface, surfaceAlt: LIGHT.surfaceAlt, text: LIGHT.text, textDim: LIGHT.textDim } };
+    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT2.surface, surfaceAlt: LIGHT2.surfaceAlt, text: LIGHT2.text, textDim: LIGHT2.textDim } };
     this.lightUi = new Proxy(ui, { get: (t, p) => p === "theme" ? lightTheme : Reflect.get(t, p) });
     this.backdrop.eventMode = "static";
     this.backdrop.on("pointertap", () => {
@@ -3121,7 +3131,7 @@ var DialogView = class extends ControlView {
   lightUi;
   buildClose() {
     const r = 22;
-    const bg = new pixi_js.Graphics().circle(0, 0, r).fill({ color: LIGHT.primary });
+    const bg = new pixi_js.Graphics().circle(0, 0, r).fill({ color: LIGHT2.primary });
     const x = new pixi_js.Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
     this.closeBtn.addChild(bg, x);
     this.closeBtn.eventMode = "static";
@@ -3158,7 +3168,7 @@ var DialogView = class extends ControlView {
     const cy = (H - cardH) / 2;
     this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
     this.backdrop.hitArea = new pixi_js.Rectangle(0, 0, W, H);
-    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT2.surface }).stroke({ width: 2.5, color: LIGHT2.border });
     const bodyH = cardH - (buttonsH ? ROW_GAP + buttonsH + INSET2 : INSET2);
     this.content.x = cx + cardW / 2;
     this.content.y = cy;
@@ -3197,7 +3207,7 @@ var DialogView = class extends ControlView {
     const bg = new pixi_js.Graphics();
     const label = new pixi_js.Text({
       text: this.ui.t(action.label),
-      style: { fontFamily: t.type.family, fontSize: 18, fontWeight: "800", fill: variant === "primary" ? LIGHT.primaryText : LIGHT.text, letterSpacing: 0.5 }
+      style: { fontFamily: t.type.family, fontSize: 18, fontWeight: "800", fill: variant === "primary" ? LIGHT2.primaryText : LIGHT2.text, letterSpacing: 0.5 }
     });
     label.anchor.set(0.5);
     node.addChild(bg, label);
@@ -3216,9 +3226,9 @@ var DialogView = class extends ControlView {
   drawButton(bg, variant, width) {
     bg.clear();
     if (variant === "primary") {
-      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT.primary });
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT2.primary });
     } else {
-      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT2.surface }).stroke({ width: 2.5, color: LIGHT2.border });
     }
   }
   applyOpen(open) {