@celestia-island/hikari 0.55.104 → 0.55.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.104",
+  "version": "0.55.105",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkBoard3D.scss

@@ -45,6 +45,13 @@
 }
 
 .hk-board3d-fallback {
+  // Self-carried contrast chip: in transparent-backdrop mode the root
+  // paints nothing, so the note cannot lean on the old surface fill.
+  background: rgb(var(--color-surface) / 0.9);
+  border-radius: var(--radius-md, 8px);
+  padding: 6px 12px;
+  margin: auto;
+  width: fit-content;
   position: absolute;
   inset: 0;
   display: flex;

package/src/components/HkBoard3D.test.tsx

@@ -1376,4 +1376,25 @@ describe("HkBoard3D transparent background", () => {
     expect(rendererOf().alpha).toBe(true);
     expect(rendererOf().clearAlpha).toBe(0);
   });
+
+  it("drops the container's own surface paint in transparent mode", async () => {
+    const { container } = mountBoard(
+      { minimap: false, transparentBackground: true },
+      {},
+    );
+    await nextTick();
+    const root = container.querySelector(".hk-board3d") as HTMLElement;
+    // The stylesheet paints --color-surface on .hk-board3d; an inline
+    // transparent style must win, or a page-colored rectangle sits
+    // behind the alpha-0 canvas (user report 2026-10-01: the scene
+    // background differs from the page background).
+    expect(root.style.background).toContain("transparent");
+  });
+
+  it("keeps the stylesheet surface paint when the backdrop is opaque", async () => {
+    const { container } = mountBoard({ minimap: false }, {});
+    await nextTick();
+    const root = container.querySelector(".hk-board3d") as HTMLElement;
+    expect(root.style.background).toBe("");
+  });
 });

package/src/components/HkBoard3D.tsx

@@ -1134,7 +1134,16 @@ export default defineComponent({
     });
 
     return () => (
-      <div class="hk-board3d" ref={containerRef}>
+      <div
+        class="hk-board3d"
+        // The transparent-backdrop mode clears the CANVAS to alpha 0, but
+        // the container's own surface paint would still sit behind it —
+        // a page-colored rectangle where the page's backdrop should show.
+        // An inline style wins over the stylesheet without a specificity
+        // war with consumer classes.
+        style={props.transparentBackground ? { background: "transparent" } : undefined}
+        ref={containerRef}
+      >
         <canvas ref={canvasRef} class="hk-board3d-canvas" />
         {failed.value ? (
           slots.fallback ? (