@luna-editor/engine 0.1.0

package/dist/sdk.js

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// SDK exports for plugin development
+// This file contains all types and utilities needed for plugin development
+import React from "react";
+// Component registration types
+export var ComponentType;
+(function (ComponentType) {
+    ComponentType["Backlog"] = "Backlog";
+    ComponentType["DialogueBox"] = "DialogueBox";
+    ComponentType["CharacterDisplay"] = "CharacterDisplay";
+    ComponentType["ActionMenu"] = "ActionMenu";
+    ComponentType["SaveLoadMenu"] = "SaveLoadMenu";
+    ComponentType["SaveMenu"] = "SaveMenu";
+    ComponentType["LoadMenu"] = "LoadMenu";
+    ComponentType["SettingsMenu"] = "SettingsMenu";
+    ComponentType["GameMenu"] = "GameMenu";
+    ComponentType["Config"] = "Config";
+})(ComponentType || (ComponentType = {}));
+// Component types are already exported as part of the interfaces above
+// Plugin utility function
+export function definePlugin(plugin) {
+    return plugin;
+}
+// Helper function for component registration
+export function defineComponent(type, component) {
+    return { type, component };
+}
+/**
+ * Calculate effect position relative to face
+ * Utility function for plugins to position effects relative to character face
+ */
+export function calculateFaceRelativePosition(options) {
+    const { facePosition, relativePosition, offsetX = 0, offsetY = 0 } = options;
+    let baseX = facePosition.x;
+    let baseY = facePosition.y;
+    // Adjust base position based on relative position
+    switch (relativePosition) {
+        case "forehead":
+            baseY = facePosition.y - facePosition.height * 0.3;
+            break;
+        case "cheek_left":
+            baseX = facePosition.x - facePosition.width * 0.3;
+            break;
+        case "cheek_right":
+            baseX = facePosition.x + facePosition.width * 0.3;
+            break;
+        case "chin":
+            baseY = facePosition.y + facePosition.height * 0.3;
+            break;
+        case "center":
+        default:
+            // Use face center as is
+            break;
+    }
+    return {
+        x: baseX + offsetX,
+        y: baseY + offsetY,
+    };
+}
+// Export React for plugin use
+export { React };
+export { OverlayUI } from "./components/OverlayUI";
+// Screen size constants
+export { aspectRatio, BasisHeight, BasisWidth } from "./constants/screen-size";

package/dist/types.d.ts

@@ -0,0 +1,186 @@
+export type ScenarioBlockType = "dialogue" | "narration" | "action_node" | "character_entrance" | "character_exit";
+export interface ScenarioBlock {
+    id: string;
+    scenarioId: string;
+    order: number;
+    blockType: ScenarioBlockType;
+    content: string | null;
+    speakerId: string | null;
+    speakerStateId: string | null;
+    partVoiceId: string | null;
+    actionNodeId: string | null;
+    linkedExitBlockId: string | null;
+    createdAt: Date;
+    updatedAt: Date;
+    speaker?: {
+        id: string;
+        name: string;
+        typeId: string;
+        workId: string;
+        description: string | null;
+        order: number;
+    } | null;
+    speakerState?: {
+        id: string;
+        name: string;
+        imageUrl: string | null;
+        cropArea: string | null;
+        scale?: number;
+        translateY?: number;
+        translateX?: number;
+    } | null;
+    actionNode?: ActionNode | null;
+    attributeValues: ScenarioBlockAttributeValue[];
+    entityAttributeValues: ScenarioBlockEntityAttributeValue[];
+    characters?: ScenarioBlockCharacter[];
+    linkedExitBlock?: {
+        id: string;
+        order: number;
+    } | null;
+}
+export interface ScenarioBlockCharacter {
+    id: string;
+    scenarioBlockId: string;
+    objectId: string;
+    entityStateId: string;
+    positionX?: number | null;
+    positionY?: number | null;
+    zIndex?: number | null;
+    scale?: number | null;
+    object: {
+        id: string;
+        name: string;
+    };
+    entityState: {
+        id: string;
+        name: string;
+        imageUrl: string | null;
+        cropArea: string | null;
+        scale?: number;
+        translateY?: number;
+        translateX?: number;
+    };
+}
+export interface ActionNode {
+    id: string;
+    workId: string;
+    name: string;
+    description: string | null;
+    createdAt: Date;
+    updatedAt: Date;
+    order: number;
+    pluginPackageName?: string | null;
+    nodeType?: string | null;
+    type?: string;
+}
+export interface ScenarioBlockAttributeValue {
+    scenarioBlockId: string;
+    attributeId: number;
+    value: string | null;
+    attribute: {
+        id: number;
+        name: string;
+        attributeType: string;
+        isNullable: boolean;
+    };
+}
+export interface ScenarioBlockEntityAttributeValue {
+    scenarioBlockId: string;
+    attributeId: number;
+    objectId: string;
+    entityStateId: string;
+    attribute: {
+        id: number;
+        name: string;
+        attributeType: string;
+        isNullable: boolean;
+    };
+    object: {
+        id: string;
+        name: string;
+    };
+    entityState: {
+        id: string;
+        name: string;
+        imageUrl: string | null;
+        cropArea: string | null;
+        scale?: number;
+        translateY?: number;
+        translateX?: number;
+    };
+}
+export interface Character {
+    id: string;
+    name: string;
+    state?: EntityState;
+    element?: HTMLElement;
+}
+export interface EntityState {
+    id: string;
+    name: string;
+    imageUrl?: string | null;
+}
+export interface DisplayedCharacter {
+    objectId: string;
+    entityStateId: string;
+    positionX?: number | null;
+    positionY?: number | null;
+    zIndex?: number | null;
+    scale?: number | null;
+    object: {
+        id: string;
+        name: string;
+    };
+    entityState: {
+        id: string;
+        name: string;
+        imageUrl: string | null;
+        cropArea: string | null;
+        scale?: number;
+        translateY?: number;
+        translateX?: number;
+    };
+}
+export interface PublishedScenario {
+    id: string;
+    scenarioId: string;
+    workId: string;
+    name: string;
+    description: string | null;
+    blocks: ScenarioBlock[];
+    publishedAt: Date;
+}
+export interface PlayerSettings {
+    aspectRatio: string;
+    bgObjectFit: "contain" | "cover";
+}
+export interface PluginConfig {
+    packageName: string;
+    bundleUrl: string;
+    config?: unknown;
+}
+export interface PlayerProps {
+    scenario: PublishedScenario;
+    settings?: PlayerSettings;
+    plugins?: PluginConfig[];
+    onEnd?: () => void;
+    onScenarioEnd?: () => void;
+    onScenarioStart?: () => void;
+    onScenarioCancelled?: () => void;
+    className?: string;
+    autoplay?: boolean;
+}
+export interface PlayerState {
+    currentBlockIndex: number;
+    isPlaying: boolean;
+    isEnded: boolean;
+}
+export interface BacklogEntry {
+    id: string;
+    timestamp: number;
+    blockIndex: number;
+    blockType: string;
+    content: string | null;
+    speakerName?: string;
+    speakerState?: string;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+// Common types shared between engine and plugin-sdk
+export {};

package/dist/utils/attributeNormalizer.d.ts

@@ -0,0 +1,5 @@
+import type { ScenarioBlock } from "../types";
+/**
+ * Normalize attribute values from database format to plugin-friendly format
+ */
+export declare function normalizeAttributes(block: ScenarioBlock): Record<string, unknown>;

package/dist/utils/attributeNormalizer.js

@@ -0,0 +1,53 @@
+/**
+ * Normalize attribute values from database format to plugin-friendly format
+ */
+export function normalizeAttributes(block) {
+    var _a, _b;
+    const attributes = {};
+    // Process regular attributes (text, number, select, etc.)
+    (_a = block.attributeValues) === null || _a === void 0 ? void 0 : _a.forEach((attrValue) => {
+        var _a;
+        if (((_a = attrValue === null || attrValue === void 0 ? void 0 : attrValue.attribute) === null || _a === void 0 ? void 0 : _a.name) && attrValue.value !== undefined) {
+            const value = normalizeAttributeValue(attrValue.value, attrValue.attribute.attributeType);
+            attributes[attrValue.attribute.name] = value;
+        }
+    });
+    // Process entity attributes (entity type)
+    (_b = block.entityAttributeValues) === null || _b === void 0 ? void 0 : _b.forEach((entityAttr) => {
+        var _a;
+        if ((_a = entityAttr === null || entityAttr === void 0 ? void 0 : entityAttr.attribute) === null || _a === void 0 ? void 0 : _a.name) {
+            // For entity attributes, provide rich object instead of just ID
+            attributes[entityAttr.attribute.name] = entityAttr.objectId;
+            // Also provide detailed entity info with _detail suffix
+            attributes[`${entityAttr.attribute.name}_detail`] = {
+                objectId: entityAttr.objectId,
+                object: entityAttr.object,
+                entityState: entityAttr.entityState,
+            };
+        }
+    });
+    return attributes;
+}
+/**
+ * Normalize individual attribute value based on its type
+ */
+function normalizeAttributeValue(value, type) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    switch (type) {
+        case "number":
+            return Number(value);
+        case "select":
+            return String(value);
+        case "text":
+        case "textarea":
+            return String(value || "");
+        case "json":
+            return typeof value === "string" ? JSON.parse(value) : value;
+        case "array":
+            return Array.isArray(value) ? value : [value];
+        default:
+            return value;
+    }
+}

package/dist/utils/facePositionCalculator.d.ts

@@ -0,0 +1,29 @@
+export interface CropArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface FacePosition {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface EntityState {
+    cropArea: string | null;
+    scale?: number;
+    translateX?: number;
+    translateY?: number;
+}
+/**
+ * Calculate face position from character element and entity state
+ */
+export declare function calculateFacePosition(characterElement: HTMLElement, entityState: EntityState): FacePosition | null;
+/**
+ * Calculate effect position relative to face
+ */
+export declare function calculateEffectPosition(facePosition: FacePosition, relativePosition: "forehead" | "cheek_left" | "cheek_right" | "chin" | "center", offsetX?: number, offsetY?: number): {
+    x: number;
+    y: number;
+};

package/dist/utils/facePositionCalculator.js

@@ -0,0 +1,127 @@
+// Face position calculation utility for emotion effects
+// Calculates face position from EntityState cropArea data
+/**
+ * Parse cropArea JSON string to CropArea object
+ */
+function parseCropArea(cropAreaString) {
+    if (!cropAreaString)
+        return null;
+    try {
+        const parsed = JSON.parse(cropAreaString);
+        if (typeof parsed === "object" &&
+            typeof parsed.x === "number" &&
+            typeof parsed.y === "number" &&
+            typeof parsed.width === "number" &&
+            typeof parsed.height === "number") {
+            return parsed;
+        }
+        return null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/**
+ * Calculate face position from character element and entity state
+ */
+export function calculateFacePosition(characterElement, entityState) {
+    const cropArea = parseCropArea(entityState.cropArea);
+    if (!cropArea)
+        return null;
+    // Get character element's actual display size
+    const elementRect = characterElement.getBoundingClientRect();
+    const elementWidth = elementRect.width;
+    const elementHeight = elementRect.height;
+    // Get the image element inside character element
+    const imgElement = characterElement.querySelector("img");
+    if (!imgElement)
+        return null;
+    // Get natural image dimensions
+    const naturalWidth = imgElement.naturalWidth;
+    const naturalHeight = imgElement.naturalHeight;
+    if (naturalWidth === 0 || naturalHeight === 0)
+        return null;
+    // Calculate how the image is displayed (considering object-fit: contain/cover)
+    const computedStyle = window.getComputedStyle(imgElement);
+    const objectFit = computedStyle.objectFit || "contain";
+    // Calculate display dimensions based on object-fit
+    let displayWidth;
+    let displayHeight;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (objectFit === "contain") {
+        // Image is scaled to fit within the element while maintaining aspect ratio
+        const elementAspect = elementWidth / elementHeight;
+        const imageAspect = naturalWidth / naturalHeight;
+        if (imageAspect > elementAspect) {
+            // Image is wider - fit to width
+            displayWidth = elementWidth;
+            displayHeight = elementWidth / imageAspect;
+            offsetY = (elementHeight - displayHeight) / 2;
+        }
+        else {
+            // Image is taller - fit to height
+            displayHeight = elementHeight;
+            displayWidth = elementHeight * imageAspect;
+            offsetX = (elementWidth - displayWidth) / 2;
+        }
+    }
+    else {
+        // For other object-fit values, assume full element size
+        displayWidth = elementWidth;
+        displayHeight = elementHeight;
+    }
+    // Calculate scale factor from natural to displayed image
+    const scaleX = displayWidth / naturalWidth;
+    const scaleY = displayHeight / naturalHeight;
+    // Apply entity state transformations
+    const entityScale = entityState.scale || 1.0;
+    const entityTranslateX = entityState.translateX || 0;
+    const entityTranslateY = entityState.translateY || 0;
+    // Calculate face position in displayed coordinates
+    const faceDisplayWidth = cropArea.width * scaleX * entityScale;
+    const faceDisplayHeight = cropArea.height * scaleY * entityScale;
+    // Face center position
+    const faceCenterX = offsetX +
+        (cropArea.x + cropArea.width / 2) * scaleX * entityScale +
+        entityTranslateX;
+    const faceCenterY = offsetY +
+        (cropArea.y + cropArea.height / 2) * scaleY * entityScale +
+        entityTranslateY;
+    return {
+        x: faceCenterX,
+        y: faceCenterY,
+        width: faceDisplayWidth,
+        height: faceDisplayHeight,
+    };
+}
+/**
+ * Calculate effect position relative to face
+ */
+export function calculateEffectPosition(facePosition, relativePosition, offsetX = 0, offsetY = 0) {
+    let baseX = facePosition.x;
+    let baseY = facePosition.y;
+    // Adjust base position based on relative position
+    switch (relativePosition) {
+        case "forehead":
+            baseY = facePosition.y - facePosition.height * 0.3;
+            break;
+        case "cheek_left":
+            baseX = facePosition.x - facePosition.width * 0.3;
+            break;
+        case "cheek_right":
+            baseX = facePosition.x + facePosition.width * 0.3;
+            break;
+        case "chin":
+            baseY = facePosition.y + facePosition.height * 0.3;
+            break;
+        case "center":
+        default:
+            // Use face center as is
+            break;
+    }
+    return {
+        x: baseX + offsetX,
+        y: baseY + offsetY,
+    };
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@luna-editor/engine",
+  "version": "0.1.0",
+  "description": "Luna Editor scenario playback engine",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./sdk": {
+      "types": "./dist/sdk.d.ts",
+      "default": "./dist/sdk.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.503.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instansys/luna-editor.git",
+    "directory": "packages/engine"
+  },
+  "keywords": [
+    "scenario",
+    "playback",
+    "visual-novel",
+    "game-engine"
+  ],
+  "license": "MIT"
+}