diamon-engine 0.1.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "diamon-engine",
+  "version": "0.1.0",
+  "description": "Diamon 3D engine runtime and editor workbench.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/package/index.js",
+  "module": "./dist/package/index.js",
+  "types": "./dist/package/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/package/types/index.d.ts",
+      "import": "./dist/package/index.js"
+    },
+    "./engine3d": {
+      "types": "./dist/package/types/engine3d/index.d.ts",
+      "import": "./dist/package/engine3d.js"
+    },
+    "./workbench": {
+      "types": "./dist/package/types/workbench/index.d.ts",
+      "import": "./dist/package/workbench.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/package",
+    "src/styles.css",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./src/styles.css"
+  ],
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "npm run build:app && npm run build:package",
+    "build:app": "tsc && vite build",
+    "build:package": "vite build --config vite.package.config.ts && tsc -p tsconfig.package.json",
+    "check": "tsc --noEmit",
+    "pack:dry": "npm pack --dry-run",
+    "prepare": "npm run build:package",
+    "preview": "vite preview --host 0.0.0.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.184.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
+  },
+  "dependencies": {
+    "three": "^0.184.0"
+  }
+}

package/src/styles.css

@@ -0,0 +1,460 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  font-size: 16px;
+  line-height: 1.35;
+  color: #eef7f2;
+  background: #0f1110;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  width: 100%;
+  min-width: 320px;
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  min-height: 100vh;
+  overflow: hidden;
+  background: #0f1110;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 0;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr) 340px;
+  width: 100vw;
+  height: 100vh;
+  min-height: 0;
+  background: #0f1110;
+}
+
+.left-panel,
+.right-panel {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  gap: 12px;
+  overflow-y: auto;
+  padding: 18px;
+  background: #171b18;
+}
+
+.left-panel {
+  border-right: 1px solid rgba(238, 247, 242, 0.12);
+}
+
+.right-panel {
+  border-left: 1px solid rgba(238, 247, 242, 0.12);
+}
+
+.panel-header p {
+  margin: 0 0 6px;
+  color: #1ec7a6;
+  font-size: 0.72rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.panel-header h1 {
+  margin: 0 0 4px;
+  color: #fff8df;
+  font-size: 1.35rem;
+  line-height: 1.1;
+  letter-spacing: 0;
+}
+
+.panel-section {
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid rgba(238, 247, 242, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  margin-bottom: 10px;
+}
+
+.section-title h2 {
+  margin: 0;
+  color: #fff8df;
+  font-size: 0.9rem;
+  letter-spacing: 0;
+}
+
+.section-title span {
+  min-width: 0;
+  overflow: hidden;
+  color: #9fb1a8;
+  font-size: 0.78rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.section-title button,
+.file-button,
+.toolbar-button {
+  flex: 0 0 auto;
+  min-height: 30px;
+  padding: 0 10px;
+  border-radius: 7px;
+  color: #0d1512;
+  background: #f5c95f;
+  cursor: pointer;
+}
+
+.section-title button:hover,
+.file-button:hover,
+.toolbar-button:hover {
+  background: #ffdc7d;
+}
+
+.file-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.file-button input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.stage {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: #07100f;
+}
+
+.engine-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  touch-action: none;
+}
+
+.hud {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #f5fff9;
+  pointer-events: none;
+}
+
+.hud-top {
+  top: 14px;
+  left: 14px;
+  right: 14px;
+  justify-content: flex-start;
+  overflow-x: auto;
+}
+
+.hud-top > div,
+.hud-bottom {
+  padding: 8px 10px;
+  border: 1px solid rgba(238, 247, 242, 0.16);
+  border-radius: 8px;
+  background: rgba(7, 16, 15, 0.78);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(12px);
+}
+
+.hud-top > div {
+  min-width: 82px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 2px;
+  color: #98aaa1;
+  font-size: 0.68rem;
+}
+
+.hud strong {
+  font-size: 1rem;
+}
+
+.hud-bottom {
+  right: 14px;
+  bottom: 14px;
+  pointer-events: auto;
+}
+
+.hud-bottom strong {
+  min-width: 8em;
+  font-size: 0.95rem;
+}
+
+#resetButton {
+  width: 58px;
+  height: 34px;
+  border-radius: 8px;
+  color: #0d1512;
+  background: #f5c95f;
+  cursor: pointer;
+}
+
+#resetButton:hover {
+  background: #ffdb7a;
+}
+
+.workbench-toolbar {
+  position: absolute;
+  z-index: 2;
+  left: 14px;
+  right: 120px;
+  bottom: 14px;
+  display: flex;
+  gap: 7px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.workbench-toolbar button {
+  flex: 0 0 auto;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid rgba(238, 247, 242, 0.16);
+  border-radius: 8px;
+  color: #0d1512;
+  background: #1ec7a6;
+  cursor: pointer;
+}
+
+.workbench-toolbar button:hover {
+  background: #33dfbe;
+}
+
+.scene-tree,
+.resource-list,
+.log-list {
+  display: grid;
+  gap: 6px;
+  max-height: 220px;
+  overflow: auto;
+}
+
+.tree-row,
+.resource-row,
+.log-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 6px 8px;
+  border: 1px solid rgba(238, 247, 242, 0.1);
+  border-radius: 7px;
+  color: #dce9e1;
+  background: rgba(255, 255, 255, 0.035);
+  font-size: 0.8rem;
+}
+
+.tree-row {
+  cursor: pointer;
+}
+
+.tree-row:hover,
+.tree-row.is-selected {
+  border-color: rgba(30, 199, 166, 0.55);
+  background: rgba(30, 199, 166, 0.12);
+}
+
+.tree-row.is-hidden {
+  opacity: 0.55;
+}
+
+.tree-name,
+.resource-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-meta,
+.resource-kind,
+.log-time {
+  color: #8da098;
+  font-size: 0.72rem;
+  white-space: nowrap;
+}
+
+.property-panel {
+  display: grid;
+  gap: 8px;
+}
+
+.property-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.property-field {
+  display: grid;
+  gap: 4px;
+}
+
+.property-field.full {
+  grid-column: 1 / -1;
+}
+
+.property-field label {
+  color: #9fb1a8;
+  font-size: 0.72rem;
+}
+
+.property-field input,
+.property-field select,
+#sceneData {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid rgba(238, 247, 242, 0.14);
+  border-radius: 7px;
+  color: #eef7f2;
+  background: #101310;
+}
+
+.property-field input,
+.property-field select {
+  height: 32px;
+  padding: 0 8px;
+}
+
+.property-field input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+}
+
+.property-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.property-actions button {
+  min-height: 30px;
+  padding: 0 10px;
+  border-radius: 7px;
+  color: #0d1512;
+  background: #1ec7a6;
+  cursor: pointer;
+}
+
+.property-actions button:hover {
+  background: #33dfbe;
+}
+
+.metrics {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+}
+
+.metrics div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 28px;
+  border-bottom: 1px solid rgba(238, 247, 242, 0.1);
+}
+
+.metrics dt {
+  color: #9fb1a8;
+  font-size: 0.78rem;
+}
+
+.metrics dd {
+  margin: 0;
+  color: #fff8df;
+  font-size: 0.9rem;
+  font-weight: 800;
+}
+
+#sceneData {
+  height: 120px;
+  resize: vertical;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+}
+
+.log-list {
+  max-height: 150px;
+}
+
+.log-row {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+@media (max-width: 1120px) {
+  body {
+    overflow: auto;
+  }
+
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(520px, 72vh) auto;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .left-panel,
+  .right-panel {
+    max-height: none;
+    border: 0;
+  }
+}
+
+@media (max-width: 560px) {
+  .hud-top {
+    gap: 6px;
+  }
+
+  .hud-top > div {
+    min-width: 74px;
+    padding: 7px;
+  }
+
+  .workbench-toolbar {
+    right: 14px;
+    bottom: 62px;
+  }
+}