@simpludify/web 0.0.0-stage → 0.1.1

package/dist/shared-images.d.ts

@@ -0,0 +1,25 @@
+import { type SpriteFrame } from "@simpludify/core";
+import { Texture } from "pixi.js";
+/** Internal ownership boundary: the loader owns a Texture and its TextureSource. */
+export interface ImageResource {
+    readonly texture: Texture;
+    release(): void;
+}
+export interface ImageLease extends ImageResource {
+    textureFor(frame?: SpriteFrame): Texture;
+}
+/** Renderer-local, live-reference cache. No idle retention or process-global state. */
+export declare class SharedImages {
+    private readonly load;
+    private readonly entries;
+    private references;
+    private dead;
+    constructor(load: (url: string, signal: AbortSignal) => Promise<ImageResource>);
+    get diagnostics(): {
+        imageReferences: number;
+        imageEntries: number;
+        pendingImages: number;
+    };
+    acquire(key: string, signal: AbortSignal): Promise<ImageLease>;
+    dispose(): void;
+}

package/dist/style.css

@@ -0,0 +1,193 @@
+.simpludify {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  height: 100%;
+  min-height: 20rem;
+  overflow: hidden;
+  background: var(--s-background);
+  color: var(--s-text);
+  font-family: var(--s-font);
+  outline-offset: -4px;
+}
+.simpludify,
+.simpludify * {
+  box-sizing: border-box;
+}
+.simpludify > canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+.s-ui {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: max(1rem, env(safe-area-inset-top))
+    max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
+    max(1rem, env(safe-area-inset-left));
+  overflow: auto;
+  pointer-events: none;
+}
+.s-ui > * {
+  pointer-events: auto;
+}
+.s-panel {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  max-width: min(100%, 30rem);
+  min-width: 0;
+  background: var(--s-surface);
+  border: 1px solid color-mix(in srgb, var(--s-muted), transparent 65%);
+  border-radius: 1rem;
+  box-shadow: 0 0.5rem 2rem #0002;
+}
+.s-column {
+  flex-direction: column;
+}
+.s-row {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.s-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  width: 100%;
+}
+.s-ui p,
+.s-ui h2 {
+  margin: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+.s-ui h2 {
+  font-size: 1.15rem;
+  letter-spacing: -0.02em;
+}
+.s-muted {
+  color: var(--s-muted);
+  font-size: 0.9rem;
+}
+.s-ui button {
+  font: inherit;
+  font-weight: 650;
+  color: var(--s-background);
+  background: var(--s-accent);
+  border: 0;
+  border-radius: 0.6rem;
+  padding: 0.7rem 1rem;
+  min-height: 2.75rem;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.s-ui button:hover {
+  filter: brightness(1.08);
+}
+.s-ui button:disabled,
+.s-ui button[aria-disabled="true"] {
+  opacity: 0.65;
+  cursor: progress;
+}
+.s-ui button:focus-visible,
+.simpludify:focus-visible {
+  outline: 3px solid var(--s-accent);
+  outline-offset: 3px;
+}
+.s-error {
+  position: absolute;
+  bottom: 1rem;
+  inset-inline: 1rem;
+  z-index: 2;
+  padding: 1rem;
+  background: #6b1728;
+  color: #fff;
+  border-radius: 0.75rem;
+}
+@media (max-width: 32rem) {
+  .s-ui {
+    padding: 0.75rem;
+  }
+  .s-panel {
+    padding: 0.85rem;
+  }
+}
+
+.s-ui > .s-bottom {
+  margin-top: auto;
+}
+.s-ui > .s-center {
+  margin: auto;
+}
+.simpludify .s-hold {
+  min-width: 3rem;
+  min-height: 3rem;
+  touch-action: none;
+  user-select: none;
+}
+.simpludify .s-hold[aria-pressed="true"] {
+  filter: brightness(0.8);
+}
+
+/* Semantic keyboard/AT mirrors; all visible rendering and pointer hits use Pixi. */
+.s-canvas-accessibility {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.s-canvas-accessibility button {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  padding: 0;
+  border: 0;
+  margin: 0;
+}
+.simpludify > canvas {
+  touch-action: none;
+}
+
+/* Engine-owned native editing surfaces; Canvas still owns geometry/background/focus paint. */
+.s-canvas-accessibility .s-canvas-native {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  border-radius: 0;
+  min-width: 0;
+  user-select: text;
+  color-scheme: dark;
+  color: var(--s-native-color);
+}
+.s-canvas-native option {
+  background: var(--s-native-background);
+}
+
+.s-canvas-accessibility input.s-canvas-native:not(:focus) {
+  color: transparent;
+  caret-color: transparent;
+}
+.s-canvas-accessibility input.s-canvas-native:not(:focus)::placeholder {
+  color: transparent;
+}
+.s-canvas-accessibility input.s-canvas-native:focus::placeholder {
+  color: currentColor;
+  opacity: 0.65;
+}
+
+.s-canvas-native:disabled {
+  opacity: 0.45;
+}
+.s-canvas-native[aria-readonly="true"] {
+  opacity: 0.7;
+}
+/*$vite$:1*/

package/dist/style.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tilemap-visual.d.ts

@@ -0,0 +1,39 @@
+import { type Scene, type Tilemap, type ViewTransform } from "@simpludify/core";
+import { Container, Sprite } from "pixi.js";
+import type { ImageLease } from "./shared-images.js";
+/** Renderer-owned sparse visible set; sheet pixels are owned by SharedImages. */
+export declare class TilemapVisual {
+    readonly map: Tilemap<string>;
+    private readonly changed;
+    private readonly onError;
+    private readonly released;
+    readonly display: Container<import("pixi.js").ContainerChild>;
+    readonly sprites: Map<number, Sprite>;
+    order: number;
+    depth: number;
+    controller: AbortController | undefined;
+    error: unknown;
+    disposed: boolean;
+    readonly stats: {
+        visitedCells: number;
+        updatedTiles: number;
+        createdSprites: number;
+        destroyedSprites: number;
+        validatedFrames: number;
+    };
+    private lease;
+    private readonly textures;
+    private readonly dirty;
+    private revision;
+    private range;
+    private invalid;
+    private readonly off;
+    private readonly offDispose;
+    constructor(map: Tilemap<string>, scene: Scene, acquire: (url: string, signal: AbortSignal) => Promise<ImageLease>, changed: () => void, onError: (error: unknown) => void, released: () => void);
+    private fail;
+    sync(): void;
+    private remove;
+    private cell;
+    render(view: ViewTransform): void;
+    dispose(): void;
+}

package/dist/ui-keyboard.d.ts

@@ -0,0 +1,6 @@
+export declare function registerGameButton(button: HTMLButtonElement, signal: AbortSignal): void;
+export declare function uiConsumesKey(event: KeyboardEvent): boolean;
+/** Unmanaged native buttons retain the previous isolated keyboard behavior. */
+export declare function blocksGameKeyboard(target: EventTarget | null): boolean;
+/** Grant surface focus from outside/editing; do not evict a compatible UI button. */
+export declare function focusGameSurface(host: HTMLElement): void;

package/dist/ui.d.ts

@@ -0,0 +1,66 @@
+export declare const Layout: {
+    readonly Column: "column";
+    readonly Row: "row";
+    readonly Grid: "grid";
+};
+export type Layout = (typeof Layout)[keyof typeof Layout];
+export declare const Theme: {
+    readonly Dark: "dark";
+    readonly Light: "light";
+};
+export type Theme = (typeof Theme)[keyof typeof Theme];
+export interface ThemeTokens {
+    background: string;
+    surface: string;
+    text: string;
+    muted: string;
+    accent: string;
+    font: string;
+}
+export declare const Themes: Readonly<Record<Theme, ThemeTokens>>;
+export declare const Placement: {
+    readonly Top: "top";
+    readonly Center: "center";
+    readonly Bottom: "bottom";
+};
+export type Placement = (typeof Placement)[keyof typeof Placement];
+export interface TextBinding {
+    readonly text: string;
+    setText(text: string): void;
+    subscribe(listener: (text: string) => void): () => void;
+}
+export interface LabelNode extends TextBinding {
+    readonly kind: "label";
+    readonly muted: boolean;
+}
+export interface ButtonNode extends TextBinding {
+    readonly kind: "button";
+    readonly onClick: (signal: AbortSignal) => void | Promise<void>;
+}
+export interface HoldButtonNode extends TextBinding {
+    readonly kind: "hold-button";
+    readonly onHold: (held: boolean) => void;
+}
+export interface PanelNode {
+    readonly kind: "panel";
+    readonly layout: Layout;
+    readonly placement: Placement;
+    readonly children: readonly UINode[];
+    readonly title?: string;
+}
+export type UINode = LabelNode | ButtonNode | HoldButtonNode | PanelNode;
+export declare function Label(text: string, options?: {
+    muted?: boolean;
+}): LabelNode;
+export declare function Button(text: string, onClick: (signal: AbortSignal) => void | Promise<void>): ButtonNode;
+export declare function HoldButton(text: string, onHold: (held: boolean) => void): HoldButtonNode;
+export declare function Panel(children: readonly UINode[], options?: {
+    layout?: Layout;
+    title?: string;
+    placement?: Placement;
+}): PanelNode;
+export interface MountedUI {
+    readonly element: HTMLDivElement;
+    dispose(): void;
+}
+export declare function mountUI(nodes: readonly UINode[], onError: (error: unknown) => void): MountedUI;

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@simpludify/web",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": {
+      "types": "./dist/style.css.d.ts",
+      "default": "./dist/style.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@simpludify/core": "0.1.1",
+    "pixi.js": "8.22.0"
+  },
+  "description": "Browser host, PixiJS rendering and input for the experimental Simpludify 2D engine.",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./dist/index.js",
+    "./src/index.ts",
+    "**/*.css"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oz-coden/Simpludify.git",
+    "directory": "packages/web"
+  },
+  "homepage": "https://github.oz-coden.com/Simpludify/",
+  "bugs": {
+    "url": "https://github.com/oz-coden/Simpludify/issues"
+  },
+  "keywords": [
+    "2d",
+    "game-engine",
+    "pixijs",
+    "typescript",
+    "experimental"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}