create-magelight-view 0.28.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Severause
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,10 @@
+# create-magelight-view
+
+```bash
+npm create magelight-view MyMod
+cd MyMod && npm install && npm run build
+```
+
+Produces a manifest mod (`manifest.json` + `views/config/index.html`) whose page is a React app
+on `@magelight/react`. Copy the folder to `Data/Magelight/MyMod/`; F10 opens it in game. Drive it
+from a DLL (`RegisterMod("MyMod")` adopts it) or from Papyrus (`Magelight.RegisterMod("MyMod")`).

package/index.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+// npm create magelight-view MyMod  →  ./MyMod/ (manifest + React page)
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const args = process.argv.slice(2);
+const local = args.includes('--local');
+const modId = args.find(a => !a.startsWith('--'));
+// Same slug rules as the host's ValidSlug: [A-Za-z0-9_.-], not dot-only,
+// not dot-ended, not a Windows device name.
+const valid = modId && /^[A-Za-z0-9_.-]{1,32}$/.test(modId) && /[A-Za-z0-9]/.test(modId) &&
+  !modId.endsWith('.') && !/^(con|prn|aux|nul|com[1-9]|lpt[1-9])(\.|$)/i.test(modId);
+if (!valid) {
+  console.error('usage: npm create magelight-view <ModId>   (slug: [A-Za-z0-9_.-], 1..32 chars, not dot-only/dot-ended/a device name)');
+  process.exit(1);
+}
+const dst = path.resolve(process.cwd(), modId);
+if (fs.existsSync(dst)) {
+  console.error(`${dst} already exists`);
+  process.exit(1);
+}
+const tpl = path.join(here, 'template');
+for (const f of fs.readdirSync(tpl, { recursive: true })) {
+  const src = path.join(tpl, f);
+  if (!fs.statSync(src).isFile()) continue;
+  const to = path.join(dst, f.replace(/^_/, '.'));
+  fs.mkdirSync(path.dirname(to), { recursive: true });
+  fs.writeFileSync(to, fs.readFileSync(src, 'utf8').replaceAll('__MODID__', modId));
+}
+// --local: point the @magelight/* deps at the cloned packages (file:) so the
+// scaffold builds WITHOUT the packages being published to npm. Requires the
+// packages to be built first (npm install && npm run build at the repo root).
+if (local) {
+  const pkgPath = path.join(dst, 'package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  const rel = { '@magelight/sdk': 'sdk', '@magelight/react': 'react', '@magelight/vite-plugin': 'vite-plugin' };
+  for (const grp of ['dependencies', 'devDependencies']) {
+    for (const dep of Object.keys(pkg[grp] || {})) {
+      if (rel[dep]) pkg[grp][dep] = 'file:' + path.join(here, '..', rel[dep]).split(path.sep).join('/');
+    }
+  }
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+  console.log(`created ${modId}/  (--local: @magelight/* point at the cloned packages)
+  build the packages ONCE:  (repo root) npm install && npm run build
+  then:  cd ${modId} && npm install && npm run build   → ${modId}/views/config/index.html`);
+} else {
+  console.log(`created ${modId}/
+  npm install && npm run build      → ${modId}/views/config/index.html
+  (the @magelight/* packages must be published to npm; if you cloned the repo, re-run with --local)
+  copy the folder to Data/Magelight/${modId}/ (a mod manager mod with Magelight/${modId}/ inside works too)
+  in game: the manifest's hotkey opens the page. To hot-reload page edits, set
+  \"devMode\": true in My Games/Skyrim Special Edition/SKSE/Magelight.json`);
+}

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "create-magelight-view",
+  "version": "0.28.6",
+  "description": "Scaffold a Magelight UI mod: manifest.json + a React config page wired to @magelight/react.",
+  "license": "MIT",
+  "repository": { "type": "git", "url": "git+https://github.com/Severause/MagelightUI.git", "directory": "packages/create-magelight-view" },
+  "type": "module",
+  "bin": { "create-magelight-view": "index.js" },
+  "files": ["index.js", "template", "README.md"],
+  "engines": { "node": ">=20" }
+}

package/template/_gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+views/
+*.log

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>__MODID__</title>
+    <style>html, body { margin: 0; background: transparent; }</style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>

package/template/manifest.json

@@ -0,0 +1,15 @@
+{
+  "modId": "__MODID__",
+  "name": "__MODID__",
+  "version": "0.1.0",
+  "minHost": "0.16.0",
+  "views": {
+    "config": {
+      "path": "views/config/index.html",
+      "layer": "panel",
+      "anchor": "top-left",
+      "x": 120, "y": 120, "w": 560, "h": 380,
+      "hotkey": "F10"
+    }
+  }
+}

package/template/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "__MODID__-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@magelight/react": "^0.28.6",
+    "@magelight/sdk": "^0.28.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@magelight/vite-plugin": "^0.28.6",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1"
+  }
+}

package/template/src/App.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { useChannel, useHost, useSend, useUIMode, HostGate } from '@magelight/react';
+
+// Host → page: your DLL/Papyrus sends InteropCall(view, 'state', json).
+// Page → host: send('save', {...}) reaches the listener you registered as 'save'.
+interface State { volume: number; subtitles: boolean }
+
+const panel: React.CSSProperties = {
+  boxSizing: 'border-box', width: 560, height: 380, padding: '18px 22px',
+  background: '#1e1913', border: '1px solid #5a4a2e', borderRadius: 6,
+  color: '#e8dcc4', font: '14px Georgia, serif',
+};
+
+export function App() {
+  const host = useHost();
+  const hostState = useChannel<State>('state', { volume: 50, subtitles: true });
+  const focused = useUIMode();
+  const send = useSend();
+  // Local state so the page is usable as a manifest-only mod (nothing echoes
+  // 'state' back yet): the control moves immediately, and whatever the host
+  // sends on the 'state' channel still wins when it arrives.
+  const [state, setState] = useState<State>(hostState);
+  useEffect(() => { setState(hostState); }, [hostState]);
+  const update = (next: State) => { setState(next); send('save', next); };
+
+  return (
+    <HostGate fallback={<div style={panel}>Open this page inside Skyrim (or use the mock panel, bottom right).</div>}>
+      <div style={panel}>
+        <h1 style={{ margin: '0 0 8px', fontSize: 18, color: '#cba560', fontWeight: 'normal' }}>__MODID__</h1>
+        <p style={{ color: '#8a7a5a', fontSize: 12, margin: '0 0 14px' }}>
+          Magelight {host.version} · view {host.viewName} · {focused ? 'keyboard is yours' : 'HUD mode'}
+        </p>
+        <label style={{ display: 'block', margin: '10px 0' }}>
+          Volume {state.volume}
+          <input type="range" min={0} max={100} value={state.volume} style={{ width: '100%' }}
+            onChange={(e) => update({ ...state, volume: +e.target.value })} />
+        </label>
+        <label style={{ display: 'block', margin: '10px 0' }}>
+          <input type="checkbox" checked={state.subtitles}
+            onChange={(e) => update({ ...state, subtitles: e.target.checked })} /> Subtitles
+        </label>
+        <p style={{ color: '#8a7a5a', fontSize: 12 }}>F10 or Esc closes this page.</p>
+      </div>
+    </HostGate>
+  );
+}

package/template/src/main.tsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(<App />);

package/template/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { magelight } from '@magelight/vite-plugin';
+
+export default defineConfig({
+  plugins: [react(), magelight({ entries: { config: 'index.html' } })],
+});