create-playcanvas 0.11.0 → 0.12.0

package/templates/engine/interactive-sphere/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + TS</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
-</html>

package/templates/engine/interactive-sphere/src/style.css

@@ -1,28 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-}
-
-canvas {
-    display: block;
-    width: 100vw;
-    height: 100vh;
-}
-
-.counter {
-    position: fixed;
-    bottom: 22px;
-    left: 50%;
-    z-index: 2;
-    margin: 0;
-    padding: 9px 13px;
-    border: 1px solid #ffffff24;
-    border-radius: 999px;
-    background: #07101bd9;
-    color: #f8fafc;
-    font-size: 12px;
-    font-weight: 650;
-    translate: -50% 0;
-    backdrop-filter: blur(10px);
-}

package/templates/engine/model-viewer/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + TS</title>
-    </head>
-    <body>
-        <canvas id="application-canvas"></canvas>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
-</html>

package/templates/engine/model-viewer/src/style.css

@@ -1,8 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-}
-
-canvas {
-    display: block;
-}

package/templates/engine/spinning-cube/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + TS</title>
-    </head>
-    <body>
-        <canvas id="application-canvas"></canvas>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
-</html>

package/templates/engine/spinning-cube/src/style.css

@@ -1,8 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-}
-
-canvas {
-    display: block;
-}

package/templates/engine/splat-viewer/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + TS</title>
-    </head>
-    <body>
-        <canvas id="application-canvas"></canvas>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
-</html>

package/templates/engine/splat-viewer/src/style.css

@@ -1,8 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-}
-
-canvas {
-    display: block;
-}

package/templates/react/base/.prettierignore

@@ -1,3 +0,0 @@
-.claude
-.agents
-public/ammo

package/templates/react/base/_gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/templates/react/base/_npmrc

@@ -1 +0,0 @@
-registry=https://registry.npmjs.org/

package/templates/react/base/prettier.config.mjs

@@ -1 +0,0 @@
-export { default } from '@playcanvas/eslint-config/prettier';

package/templates/react/base/src/inspector.css

@@ -1,33 +0,0 @@
-/* Inspector key hint, added on the dev server only by src/inspector.ts. Styled like the starter panels */
-.inspector-hint {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    z-index: 10;
-    margin: 0;
-    padding: 8px 12px;
-    border: 1px solid #ffffff24;
-    border-radius: 10px;
-    background: #0b1019d9;
-    box-shadow: 0 12px 40px #0008;
-    color: #aeb8c8;
-    font:
-        12px/1.6 Inter,
-        ui-sans-serif,
-        system-ui,
-        sans-serif;
-    backdrop-filter: blur(12px);
-    pointer-events: none;
-}
-
-.inspector-hint kbd {
-    padding: 1px 5px;
-    border-radius: 4px;
-    background: #263247;
-    color: #f8fafc;
-    font:
-        11px ui-monospace,
-        SFMono-Regular,
-        Menlo,
-        monospace;
-}

package/templates/react/base/src/inspector.ts

@@ -1,38 +0,0 @@
-// Loaded by the dev server only (see vite.config.ts), so production builds never include it
-import { Inspector } from '@playcanvas/inspector';
-import type { AppBase } from 'playcanvas';
-
-import './inspector.css';
-
-type Hook = {
-    register?(app: AppBase, info: object): void;
-    unregister?(app: AppBase): void;
-};
-
-// Every app announces itself to this hook as it starts, whichever format created it
-const KEY = Symbol.for('playcanvas.inspector');
-const scope = globalThis as unknown as Record<symbol, Hook | undefined>;
-
-// Keep a hook installed earlier, such as a devtools extension's
-const prev = scope[KEY];
-
-scope[KEY] = {
-    register(app, info) {
-        prev?.register?.(app, info);
-
-        // Skip headless apps, such as the null apps @playcanvas/react creates for validation. Each
-        // panel destroys itself with its app
-        if (!app.graphicsDevice.isNull) new Inspector(app, { visible: false });
-    },
-    unregister(app) {
-        prev?.unregister?.(app);
-    }
-};
-
-console.info('PlayCanvas Inspector: press ` to toggle');
-
-// Key hint, a separate corner chip so the starter's own UI stays untouched
-const hint = document.createElement('p');
-hint.className = 'inspector-hint';
-hint.innerHTML = '<kbd>`</kbd> inspector · <kbd>F9</kbd> pause · <kbd>F10</kbd> step';
-document.body.append(hint);

package/templates/react/base/src/starter.css

@@ -1,104 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-html,
-body,
-#root,
-#application,
-pc-app,
-canvas {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    overflow: hidden;
-}
-
-body {
-    background: #11151c;
-    color: #f8fafc;
-    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-}
-
-canvas,
-pc-app {
-    display: block;
-}
-
-.hud {
-    position: fixed;
-    inset: 0;
-    z-index: 10;
-    padding: 20px;
-    pointer-events: none;
-}
-
-.panel {
-    width: min(360px, calc(100vw - 40px));
-    padding: 16px;
-    border: 1px solid #ffffff24;
-    border-radius: 14px;
-    background: #0b1019d9;
-    box-shadow: 0 12px 40px #0008;
-    backdrop-filter: blur(12px);
-    pointer-events: auto;
-}
-
-h1 {
-    margin: 0 0 6px;
-    font-size: 18px;
-}
-
-p {
-    margin: 6px 0 0;
-    color: #aeb8c8;
-    font-size: 13px;
-    line-height: 1.45;
-}
-
-.controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 14px;
-}
-
-button {
-    padding: 8px 11px;
-    border: 1px solid #ffffff24;
-    border-radius: 9px;
-    background: #263247;
-    color: inherit;
-    cursor: pointer;
-}
-
-button:hover,
-button[aria-pressed='true'] {
-    border-color: #41b6e6;
-    background: #334867;
-}
-
-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-}
-
-.swatch {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border-radius: 50%;
-    background: var(--color);
-}
-
-.crosshair {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 16px;
-    height: 16px;
-    border: 2px solid #fff;
-    border-radius: 50%;
-    translate: -50% -50%;
-    box-shadow: 0 0 4px #000;
-}

package/templates/react/base/src/vite-env.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module 'playcanvas/scripts/esm/camera-controls.mjs' {
-    import type { Script } from 'playcanvas';
-
-    export const CameraControls: typeof Script & (new () => Script);
-}
-
-declare module 'playcanvas/scripts/esm/grid.mjs' {
-    import type { Script } from 'playcanvas';
-
-    export const Grid: typeof Script & (new () => Script);
-}
-
-declare module 'playcanvas/scripts/esm/sky/procedural-sky.mjs' {
-    import type { Script } from 'playcanvas';
-
-    export const ProceduralSky: typeof Script & (new () => Script);
-}

package/templates/react/interactive-sphere/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + React + TS</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
-</html>

package/templates/react/interactive-sphere/src/index.css

@@ -1,4 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-}

package/templates/react/interactive-sphere/src/main.tsx

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

package/templates/react/model-viewer/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + React</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
-</html>

package/templates/react/model-viewer/src/index.css

@@ -1,9 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-}
-
-#root {
-    width: 100vw;
-    height: 100vh;
-}

package/templates/react/model-viewer/src/main.tsx

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

package/templates/react/spinning-cube/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + React</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
-</html>

package/templates/react/spinning-cube/src/index.css

@@ -1,9 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-}
-
-#root {
-    width: 100vw;
-    height: 100vh;
-}

package/templates/react/spinning-cube/src/main.tsx

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

package/templates/react/splat-viewer/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PlayCanvas + React</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
-</html>

package/templates/react/splat-viewer/src/index.css

@@ -1,9 +0,0 @@
-body {
-    margin: 0;
-    overflow: hidden;
-}
-
-#root {
-    width: 100vw;
-    height: 100vh;
-}

package/templates/react/splat-viewer/src/main.tsx

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

package/templates/web-components/base/.prettierignore

@@ -1,3 +0,0 @@
-.claude
-.agents
-public/ammo

package/templates/web-components/base/_gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/templates/web-components/base/_npmrc

@@ -1 +0,0 @@
-registry=https://registry.npmjs.org/

package/templates/web-components/base/prettier.config.mjs

@@ -1 +0,0 @@
-export { default } from '@playcanvas/eslint-config/prettier';

package/templates/web-components/base/src/inspector.css

@@ -1,33 +0,0 @@
-/* Inspector key hint, added on the dev server only by src/inspector.ts. Styled like the starter panels */
-.inspector-hint {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    z-index: 10;
-    margin: 0;
-    padding: 8px 12px;
-    border: 1px solid #ffffff24;
-    border-radius: 10px;
-    background: #0b1019d9;
-    box-shadow: 0 12px 40px #0008;
-    color: #aeb8c8;
-    font:
-        12px/1.6 Inter,
-        ui-sans-serif,
-        system-ui,
-        sans-serif;
-    backdrop-filter: blur(12px);
-    pointer-events: none;
-}
-
-.inspector-hint kbd {
-    padding: 1px 5px;
-    border-radius: 4px;
-    background: #263247;
-    color: #f8fafc;
-    font:
-        11px ui-monospace,
-        SFMono-Regular,
-        Menlo,
-        monospace;
-}

package/templates/web-components/base/src/inspector.ts

@@ -1,38 +0,0 @@
-// Loaded by the dev server only (see vite.config.ts), so production builds never include it
-import { Inspector } from '@playcanvas/inspector';
-import type { AppBase } from 'playcanvas';
-
-import './inspector.css';
-
-type Hook = {
-    register?(app: AppBase, info: object): void;
-    unregister?(app: AppBase): void;
-};
-
-// Every app announces itself to this hook as it starts, whichever format created it
-const KEY = Symbol.for('playcanvas.inspector');
-const scope = globalThis as unknown as Record<symbol, Hook | undefined>;
-
-// Keep a hook installed earlier, such as a devtools extension's
-const prev = scope[KEY];
-
-scope[KEY] = {
-    register(app, info) {
-        prev?.register?.(app, info);
-
-        // Skip headless apps, such as the null apps @playcanvas/react creates for validation. Each
-        // panel destroys itself with its app
-        if (!app.graphicsDevice.isNull) new Inspector(app, { visible: false });
-    },
-    unregister(app) {
-        prev?.unregister?.(app);
-    }
-};
-
-console.info('PlayCanvas Inspector: press ` to toggle');
-
-// Key hint, a separate corner chip so the starter's own UI stays untouched
-const hint = document.createElement('p');
-hint.className = 'inspector-hint';
-hint.innerHTML = '<kbd>`</kbd> inspector · <kbd>F9</kbd> pause · <kbd>F10</kbd> step';
-document.body.append(hint);