babylon.quarks-editor 0.27.0 → 0.28.0

package/dist/react/fields.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+/** An inspector row: a label, with an optional hint, and its controls. */
 export declare function Row(props: {
     label: string;
     hint?: string;
@@ -13,15 +14,22 @@ export declare function NumberField(props: {
     min?: number;
     max?: number;
 }): React.JSX.Element;
+/** A checkbox bound to a boolean. */
 export declare function CheckboxField(props: {
     value: boolean;
     onChange: (value: boolean) => void;
 }): React.JSX.Element;
+/** A select bound to a value, from a list of options. */
 export declare function SelectField<T extends string | number>(props: {
+    /** The selected value. */
     value: T;
+    /** The options, in menu order. */
     options: Array<{
+        /** The option's value. */
         value: T;
+        /** Its text. */
         label: string;
     }>;
+    /** Receives the picked value, a number when the values are numbers. */
     onChange: (value: T) => void;
 }): React.JSX.Element;

package/dist/react/fields.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { InspectorLabel } from './InspectorLabel.js';
 import { inputStyle, rowStyle } from './theme.js';
+/** An inspector row: a label, with an optional hint, and its controls. */
 export function Row(props) {
     return (_jsxs("div", { style: rowStyle, children: [_jsx(InspectorLabel, { label: props.label, hint: props.hint, hintKey: props.hintKey }), props.children] }));
 }
@@ -27,9 +28,11 @@ export function NumberField(props) {
             }
         } }));
 }
+/** A checkbox bound to a boolean. */
 export function CheckboxField(props) {
     return (_jsx("input", { type: "checkbox", className: "qe-hover", checked: props.value, onChange: (e) => props.onChange(e.target.checked), style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' } }));
 }
+/** A select bound to a value, from a list of options. */
 export function SelectField(props) {
     const numeric = typeof props.value === 'number';
     return (_jsx("select", { className: "qe-hover", style: { ...inputStyle, cursor: 'pointer' }, value: String(props.value), onChange: (e) => props.onChange((numeric ? Number(e.target.value) : e.target.value)), children: props.options.map((o) => (_jsx("option", { value: String(o.value), children: o.label }, String(o.value)))) }));

package/dist/react/host/BottomDocks.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type AssetsPanelProps } from '../AssetsPanel.js';
+/** Props of {@link AssetsDrawer}. */
+export interface AssetsDrawerProps {
+    /** The drawer is shown. */
+    open: boolean;
+    /** The drawer is docked above the timeline instead of floating over the viewport. */
+    pinned: boolean;
+    /** Pin or unpin it (it stays open). */
+    onTogglePin(): void;
+    /** Close and unpin it. */
+    onClose(): void;
+    /** The Assets browser inside. */
+    panel: AssetsPanelProps;
+}
+/** The Assets browser, floating over the viewport or pinned above the timeline. */
+export declare function AssetsDrawer(props: AssetsDrawerProps): React.ReactElement;
+/** Props of {@link TimelineDock}. */
+export interface TimelineDockProps {
+    /** The timeline is collapsed to its header. */
+    collapsed: boolean;
+    /** Collapse or expand it. */
+    onToggleCollapsed(): void;
+    /** Name of the focused effect, if any. */
+    effectName?: string;
+    /** Assets in the project, counted on the Assets button. */
+    assetCount: number;
+    /** The Assets button shows as switched on. */
+    assetsActive: boolean;
+    /** The Assets button. */
+    onToggleAssets(): void;
+    /** The timeline, or `null` when nothing is focused. */
+    children: React.ReactNode;
+}
+/** The bottom dock: the focused effect's timeline, and the Assets button. */
+export declare function TimelineDock(props: TimelineDockProps): React.ReactElement;

package/dist/react/host/BottomDocks.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, MapPinIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { AssetsPanel } from '../AssetsPanel.js';
+import { iconStyle } from '../icons.js';
+import { buttonStyle, theme } from '../theme.js';
+import { activeSquareButtonStyle, dockIconButtonStyle, dockTitleStyle, DRAWER_HEIGHT, TIMELINE_HEIGHT, } from './hostStyles.js';
+/** The Assets browser, floating over the viewport or pinned above the timeline. */
+export function AssetsDrawer(props) {
+    const { open, pinned } = props;
+    return (_jsxs("div", { "aria-hidden": !open && !pinned, style: {
+            height: DRAWER_HEIGHT,
+            display: 'flex',
+            flexDirection: 'column',
+            background: theme.panelBg,
+            borderTop: `1px solid ${theme.border}`,
+            ...(pinned
+                ? { flexShrink: 0 }
+                : {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 20,
+                    background: '#0a0f20',
+                    boxShadow: '0 -10px 30px rgba(0, 0, 0, 0.5)',
+                    transform: open ? 'none' : 'translateY(100%)',
+                    opacity: open ? 1 : 0,
+                    pointerEvents: open ? 'auto' : 'none',
+                    transition: 'transform 0.18s ease, opacity 0.18s ease',
+                }),
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '4px 6px 4px 12px',
+                    borderBottom: `1px solid ${theme.border}`,
+                }, children: [_jsx("span", { style: dockTitleStyle, children: "Assets" }), _jsx("span", { style: { fontSize: 11, color: theme.textDim }, children: "Ctrl+Space" }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "qe-hover", title: pinned ? 'Unpin — float over the viewport again' : 'Pin — keep it docked above the timeline', style: { ...dockIconButtonStyle, ...(pinned ? activeSquareButtonStyle : {}) }, onClick: props.onTogglePin, children: _jsx(MapPinIcon, { style: iconStyle(13) }) }), _jsx("button", { type: "button", className: "qe-hover", title: "Close (Esc)", style: dockIconButtonStyle, onClick: props.onClose, children: _jsx(XMarkIcon, { style: iconStyle(13) }) })] }), _jsx(AssetsPanel, { ...props.panel })] }));
+}
+/** The bottom dock: the focused effect's timeline, and the Assets button. */
+export function TimelineDock(props) {
+    const { collapsed } = props;
+    return (_jsxs("div", { style: {
+            flexShrink: 0,
+            borderTop: `1px solid ${theme.border}`,
+            background: theme.panelBg,
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '3px 6px' }, children: [_jsx("button", { type: "button", className: "qe-hover-bg", title: collapsed ? 'Expand timeline' : 'Collapse timeline', style: { ...dockIconButtonStyle, border: 'none', background: 'transparent' }, onClick: props.onToggleCollapsed, children: collapsed ? _jsx(ChevronUpIcon, { style: iconStyle(13) }) : _jsx(ChevronDownIcon, { style: iconStyle(13) }) }), _jsx("span", { style: dockTitleStyle, children: "Timeline" }), props.effectName !== undefined && (_jsx("span", { style: {
+                            fontSize: 12,
+                            color: theme.textDim,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: props.effectName })), _jsx("span", { style: { flex: 1 } }), _jsxs("button", { type: "button", className: "qe-hover", title: "Assets (Ctrl+Space)", style: {
+                            ...buttonStyle,
+                            padding: '3px 10px',
+                            ...(props.assetsActive ? activeSquareButtonStyle : {}),
+                        }, onClick: props.onToggleAssets, children: ["Assets", props.assetCount > 0 ? ` · ${props.assetCount}` : ''] })] }), _jsx("div", { style: {
+                    height: TIMELINE_HEIGHT,
+                    display: collapsed ? 'none' : 'flex',
+                    borderTop: `1px solid ${theme.border}`,
+                }, children: props.children ?? (_jsx("div", { style: { padding: '14px', fontSize: 12, color: theme.textDim }, children: "Select an effect in the Scene to see its timeline." })) })] }));
+}

package/dist/react/host/HostDialogs.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { EditorSession, PrefabInfo } from '../../core/editorSession.js';
+import type { SceneEntry } from '../../core/sceneEntries.js';
+/** Which prefab question is open: overwrite on save, save before leaving, or a new asset path. */
+export type PrefabDialog = 'overwrite' | 'exit' | 'saveAs' | null;
+/** The host's dialog and notice state, with its setters. */
+export interface HostDialogState {
+    /** Name of the project being opened, while it loads. */
+    loadingProject: string | null;
+    /** The short notice shown, if any. */
+    toast: string | null;
+    /** Entry being saved as a new asset. */
+    saveAsTarget: SceneEntry | null;
+    setSaveAsTarget(entry: SceneEntry | null): void;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab question. */
+    prefabDialog: PrefabDialog;
+    setPrefabDialog(dialog: PrefabDialog): void;
+    /** Asset waiting to replace an open prefab that has unsaved edits. */
+    prefabSwitch: {
+        id: number;
+        name: string;
+    } | null;
+    setPrefabSwitch(asset: {
+        id: number;
+        name: string;
+    } | null): void;
+    /** "Save changes to the scene?" before leaving the project. */
+    exitPrompt: boolean;
+    setExitPrompt(open: boolean): void;
+    /** The notice the user dismisses, if any. */
+    message: {
+        title: string;
+        message: string;
+    } | null;
+    setMessage(message: {
+        title: string;
+        message: string;
+    } | null): void;
+}
+/** Props of {@link HostDialogs}. */
+export interface HostDialogsProps extends HostDialogState {
+    /** The session the dialogs act on. */
+    session: EditorSession | null;
+    /** Leaves the project, once the scene is dealt with. */
+    onExitProject?: () => void;
+}
+/** The host's modal dialogs, the project loading screen and the toast. */
+export declare function HostDialogs(props: HostDialogsProps): React.ReactElement;

package/dist/react/host/HostDialogs.js

@@ -0,0 +1,113 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChoiceDialog } from '../ChoiceDialog.js';
+import { MessageDialog } from '../MessageDialog.js';
+import { PromptDialog } from '../PromptDialog.js';
+import { theme } from '../theme.js';
+/** The host's modal dialogs, the project loading screen and the toast. */
+export function HostDialogs(props) {
+    const { session, prefabInfo, prefabDialog, setPrefabDialog, prefabSwitch, setPrefabSwitch } = props;
+    return (_jsxs(_Fragment, { children: [props.loadingProject !== null && (_jsxs("div", { style: {
+                    position: 'fixed',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(7, 11, 22, 0.8)',
+                    zIndex: 900,
+                    color: theme.text,
+                    fontSize: 14,
+                }, children: ["Opening ", props.loadingProject, "\u2026"] })), props.toast && (_jsx("div", { role: "status", style: {
+                    position: 'fixed',
+                    top: 16,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    zIndex: 950,
+                    background: '#13204a',
+                    border: `1px solid ${theme.borderActive}`,
+                    borderRadius: 8,
+                    padding: '8px 14px',
+                    fontSize: 12.5,
+                    color: theme.text,
+                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+                    pointerEvents: 'none',
+                }, children: props.toast })), props.saveAsTarget && (_jsx(PromptDialog, { title: "Save as new asset \u2014 Folder/Name", defaultValue: props.saveAsTarget.name, placeholder: "Fire/Big explosion", confirmLabel: "Save", onSubmit: (path) => {
+                    const entry = props.saveAsTarget;
+                    props.setSaveAsTarget(null);
+                    session?.saveEntryAsAsset(entry, path);
+                }, onCancel: () => props.setSaveAsTarget(null) })), prefabDialog === 'overwrite' && prefabInfo && (_jsx(ChoiceDialog, { title: `Overwrite prefab “${prefabInfo.name}”?`, message: (() => {
+                    const count = session?.prefabInstanceCount() ?? 0;
+                    return count > 0
+                        ? `The asset is replaced with your edits. The ${count} “${prefabInfo.name}” effect(s) already in the scene will not change.`
+                        : 'The asset is replaced with your edits. Effects already in the scene will not change.';
+                })(), actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabDialog(null) },
+                    { label: 'Save as new…', onSelect: () => setPrefabDialog('saveAs') },
+                    {
+                        label: 'Overwrite',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            session?.overwritePrefab();
+                        },
+                    },
+                ], onCancel: () => setPrefabDialog(null) })), prefabSwitch && prefabInfo && (_jsx(ChoiceDialog, { title: `Save changes to prefab “${prefabInfo.name}”?`, message: `Before opening “${prefabSwitch.name}”. Saving overwrites the prefab asset; effects already in the scene will not change.`, actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabSwitch(null) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            setPrefabSwitch(null);
+                            session?.openPrefab(prefabSwitch.id, true);
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabSwitch(null);
+                            session?.overwritePrefab();
+                            session?.openPrefab(prefabSwitch.id, true);
+                        },
+                    },
+                ], onCancel: () => setPrefabSwitch(null) })), prefabDialog === 'exit' && prefabInfo && (_jsx(ChoiceDialog, { title: `Save changes to prefab “${prefabInfo.name}”?`, message: "Saving overwrites the prefab asset. Effects already in the scene will not change.", actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabDialog(null) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            session?.closePrefab();
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            session?.overwritePrefab();
+                            session?.closePrefab();
+                        },
+                    },
+                ], onCancel: () => setPrefabDialog(null) })), prefabDialog === 'saveAs' && prefabInfo && (_jsx(PromptDialog, { title: "Save prefab as new asset \u2014 Folder/Name", defaultValue: prefabInfo.path.replace(/\.json$/i, ''), confirmLabel: "Save", onSubmit: (path) => {
+                    setPrefabDialog(null);
+                    session?.savePrefabAsNew(path);
+                }, onCancel: () => setPrefabDialog(null) })), props.exitPrompt && (_jsx(ChoiceDialog, { title: "Save changes to the scene?", message: "The scene has changes that are not saved. Assets are already saved.", actions: [
+                    { label: 'Cancel', onSelect: () => props.setExitPrompt(false) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            props.setExitPrompt(false);
+                            props.onExitProject?.();
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            props.setExitPrompt(false);
+                            void session?.saveScene().then((saved) => saved && props.onExitProject?.());
+                        },
+                    },
+                ], onCancel: () => props.setExitPrompt(false) })), props.message && (_jsx(MessageDialog, { title: props.message.title, message: props.message.message, onClose: () => props.setMessage(null) }))] }));
+}

package/dist/react/host/InspectorSidebar.d.ts

@@ -0,0 +1,32 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import type { ParticleSystem } from 'babylon.quarks';
+import React from 'react';
+import type { EffectBinding } from '../../core/binding.js';
+import { type EffectEditorProps } from '../EffectEditor.js';
+/**
+ * The effect's JSON, with a warning when it points at object URLs: a texture
+ * dropped in from disk lives at a `blob:` URL that dies with the page, so the
+ * exported effect would load without it.
+ */
+export declare function exportEffectJSON(binding: EffectBinding, warn: (message: string) => void): string;
+/** Props of {@link InspectorSidebar}. */
+export interface InspectorSidebarProps extends Pick<EffectEditorProps, 'textureOptions' | 'geometryOptions' | 'resolveTexture' | 'resolveGeometry'> {
+    /** The focused effect, for the header and its actions. */
+    binding: EffectBinding | null;
+    /** The binding, system and node the inspector shows (they may lag a selection change). */
+    inspector: {
+        binding: EffectBinding;
+        system: ParticleSystem;
+        node: TransformNode;
+    } | null;
+    /** Header shown when the effect has no name. */
+    title?: string;
+    /** Called after the effect is renamed. */
+    onRenamed(name: string): void;
+    /** Shows a Save button that receives the effect's JSON. */
+    onSave?: (json: string) => void;
+    /** A short notice. */
+    toast(text: string): void;
+}
+/** The editor's right column: the effect's name, Export and Save, and the module inspector. */
+export declare function InspectorSidebar(props: InspectorSidebarProps): React.ReactElement;

package/dist/react/host/InspectorSidebar.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { EffectEditor } from '../EffectEditor.js';
+import { PromptDialog } from '../PromptDialog.js';
+import { buttonStyle, theme } from '../theme.js';
+import { INSPECTOR_WIDTH } from './hostStyles.js';
+/**
+ * The effect's JSON, with a warning when it points at object URLs: a texture
+ * dropped in from disk lives at a `blob:` URL that dies with the page, so the
+ * exported effect would load without it.
+ */
+export function exportEffectJSON(binding, warn) {
+    const json = binding.exportJSON('EditorEffect');
+    if (json.includes('"blob:')) {
+        warn('This effect references blob: textures, which will not load after a reload. Re-pick them from a hosted URL.');
+    }
+    return json;
+}
+/** The editor's right column: the effect's name, Export and Save, and the module inspector. */
+export function InspectorSidebar(props) {
+    const { binding, inspector, onSave } = props;
+    const [renaming, setRenaming] = useState(false);
+    return (_jsxs("aside", { style: {
+            width: INSPECTOR_WIDTH,
+            flexShrink: 0,
+            borderLeft: `1px solid ${theme.border}`,
+            background: theme.panelBg,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+        }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: {
+                            fontSize: 11,
+                            fontWeight: 600,
+                            color: theme.textDim,
+                            textTransform: 'uppercase',
+                            letterSpacing: 0.4,
+                            marginBottom: 6,
+                        }, children: "Inspector" }), _jsx("div", { className: "qe-hover-bg", title: binding ? 'Rename effect' : undefined, style: {
+                            fontSize: 16,
+                            fontWeight: 600,
+                            cursor: binding ? 'pointer' : 'default',
+                            borderRadius: 6,
+                            padding: '2px 4px',
+                            margin: '-2px -4px',
+                        }, onClick: () => binding && setRenaming(true), children: (binding?.root.name || props.title) ?? 'Effect editor' }), renaming && binding && (_jsx(PromptDialog, { title: "Rename effect", defaultValue: binding.root.name, onSubmit: (name) => {
+                            binding.apply(() => (binding.root.name = name));
+                            props.onRenamed(name);
+                            setRenaming(false);
+                        }, onCancel: () => setRenaming(false) })), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }, children: [_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => {
+                                    if (!binding)
+                                        return;
+                                    const blob = new Blob([exportEffectJSON(binding, props.toast)], { type: 'application/json' });
+                                    const link = document.createElement('a');
+                                    link.href = URL.createObjectURL(blob);
+                                    link.download = `${binding.root.name || 'effect'}.json`;
+                                    link.click();
+                                    URL.revokeObjectURL(link.href);
+                                }, children: "Export" }), onSave && (_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => binding && onSave(exportEffectJSON(binding, props.toast)), children: "Save" }))] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '6px 14px 20px' }, children: inspector ? (_jsx(EffectEditor, { binding: inspector.binding, selectedSystem: inspector.system, gizmoTargetNode: inspector.node, gizmoTargetLabel: inspector.node.name || 'Node', textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })) : (_jsx("div", { style: { fontSize: 13, color: theme.textDim, lineHeight: 1.5 }, children: "No effect selected." })) })] }));
+}

package/dist/react/host/SceneSidebar.d.ts

@@ -0,0 +1,53 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import React from 'react';
+import type { PrefabInfo } from '../../core/editorSession.js';
+import type { SceneEntry } from '../../core/sceneEntries.js';
+/** Props of {@link SceneSidebar}. */
+export interface SceneSidebarProps {
+    /** The open project, for its header; none in memory-only mode. */
+    projectName?: string;
+    /** Shows the back button in the project header. */
+    canExitProject: boolean;
+    /** The scene has unsaved changes. */
+    sceneDirty: boolean;
+    /** The project's scene is still loading. */
+    projectLoading: boolean;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab has unsaved edits. */
+    prefabDirty: boolean;
+    /** The scene's entries. */
+    entries: SceneEntry[];
+    /** The focused entry's root. */
+    focusedRoot: TransformNode | null;
+    /** Shown entries, by root `uniqueId`. */
+    visibleRootIds: ReadonlySet<number>;
+    /** The entry shown alone, if any. */
+    soloRootId: number | null;
+    /** The node selected in the focused effect. */
+    selectedNode: TransformNode | null;
+    /** Back to the projects list. */
+    onExitProject(): void;
+    /** Save (the scene, or the open prefab). */
+    onSave(): void;
+    /** Back from the prefab to the scene. */
+    onExitPrefab(): void;
+    /** Save the open prefab. */
+    onSavePrefab(): void;
+    /** Focus an entry. */
+    onFocus(entry: SceneEntry): void;
+    /** Show or hide an entry. */
+    onToggleVisible(entry: SceneEntry): void;
+    /** Show an entry alone. */
+    onToggleSolo(entry: SceneEntry): void;
+    /** Save an entry as a new asset. */
+    onSaveAsAsset(entry: SceneEntry): void;
+    /** Remove an entry. */
+    onDelete(entry: SceneEntry): void;
+    /** Add a default effect. */
+    onCreateDefault(): void;
+    /** Select a node, focusing its entry first when needed. */
+    onSelectNode(entry: SceneEntry | null, node: TransformNode): void;
+}
+/** The editor's left column: the project header, then the Scene list or the open prefab. */
+export declare function SceneSidebar(props: SceneSidebarProps): React.ReactElement;

package/dist/react/host/SceneSidebar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon } from '@heroicons/react/24/solid';
+import { EffectTreeView } from '../EffectTreeView.js';
+import { iconStyle } from '../icons.js';
+import { ScenePanel } from '../ScenePanel.js';
+import { buttonStyle, theme } from '../theme.js';
+import { dockIconButtonStyle, saveButtonStyle, SCENE_PANEL_WIDTH } from './hostStyles.js';
+/** The editor's left column: the project header, then the Scene list or the open prefab. */
+export function SceneSidebar(props) {
+    const { prefabInfo, prefabDirty, entries } = props;
+    return (_jsxs("aside", { style: {
+            width: SCENE_PANEL_WIDTH,
+            flexShrink: 0,
+            borderRight: `1px solid ${theme.border}`,
+            background: theme.panelBg,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+        }, children: [props.projectName !== undefined && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '8px 10px',
+                    borderBottom: `1px solid ${theme.border}`,
+                }, children: [props.canExitProject && (_jsx("button", { type: "button", className: "qe-hover", title: "Back to projects", style: { ...dockIconButtonStyle, width: 26, height: 26 }, onClick: props.onExitProject, children: _jsx(ArrowLeftIcon, { style: iconStyle(13) }) })), _jsxs("span", { title: props.projectName, style: {
+                            flex: 1,
+                            minWidth: 0,
+                            fontSize: 13,
+                            fontWeight: 600,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: [props.projectName, props.sceneDirty ? ' *' : ''] }), _jsx("button", { type: "button", className: "qe-hover", title: "Save the scene (Ctrl+S) \u2014 assets are not changed", disabled: props.projectLoading, style: saveButtonStyle(props.sceneDirty, '4px 12px'), onClick: props.onSave, children: "Save" })] })), _jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: prefabInfo ? 'Prefab' : `Scene${entries.length > 0 ? ` · ${entries.length}` : ''}` }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }, children: prefabInfo
+                            ? 'The scene is set aside while you edit this asset'
+                            : 'Effects in the viewport · click to edit · eye shows/hides' })] }), _jsx("div", { style: {
+                    flex: 1,
+                    minHeight: 0,
+                    overflow: 'hidden',
+                    padding: '8px 12px 14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: prefabInfo ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, flex: 1, minHeight: 0 }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 10,
+                                padding: 12,
+                                border: `1px solid ${theme.borderActive}`,
+                                borderRadius: 8,
+                                background: 'rgba(120, 165, 255, 0.08)',
+                                fontSize: 12,
+                                color: theme.textDim,
+                                lineHeight: 1.5,
+                            }, children: [_jsxs("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text }, children: [prefabInfo.name, prefabDirty ? ' *' : ''] }), _jsx("div", { style: { wordBreak: 'break-all' }, children: prefabInfo.path }), _jsx("div", { children: "Save (Ctrl+S) overwrites this asset. Effects already placed in the scene keep their own copy and do not change." }), _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, onClick: props.onExitPrefab, children: "\u2190 Scene" }), _jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, onClick: props.onSavePrefab, children: "Save prefab" })] })] }), entries[0] && (_jsx("div", { style: {
+                                flex: 1,
+                                minHeight: 0,
+                                overflowY: 'auto',
+                                border: `1px solid ${theme.border}`,
+                                borderRadius: 8,
+                                background: theme.sectionBg,
+                                padding: '4px 0',
+                            }, children: _jsx(EffectTreeView, { includeRoot: true, root: entries[0].root, selectedNode: props.selectedNode, onSelect: (node) => props.onSelectNode(null, node) }) }))] })) : (_jsx(ScenePanel, { entries: entries, focusedRoot: props.focusedRoot, visibleRootIds: props.visibleRootIds, onFocus: props.onFocus, onToggleVisible: props.onToggleVisible, soloRootId: props.soloRootId, onToggleSolo: props.onToggleSolo, onSaveAsAsset: props.onSaveAsAsset, onDelete: props.onDelete, onCreateDefault: props.onCreateDefault, selectedNode: props.selectedNode, onSelectNode: props.onSelectNode })) })] }));
+}

package/dist/react/host/ViewportPane.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { AssetLoadProgress } from '../../core/assets.js';
+import type { PrefabInfo } from '../../core/editorSession.js';
+/** What the stage gizmo does: nothing, or move, rotate or scale the selected node. */
+export type GizmoMode = 'none' | 'position' | 'rotation' | 'scale';
+/** Props of {@link ViewportPane}. */
+export interface ViewportPaneProps {
+    /** The canvas the engine draws into. */
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    /** The render loop writes the frame rate here. */
+    fpsRef: React.RefObject<HTMLSpanElement | null>;
+    /** Pixels at the bottom covered by the floating Assets drawer. */
+    inset: number;
+    /** The transport bar, once the scene exists. */
+    transport: React.ReactNode;
+    /** The asset drag hovering the viewport, if any. */
+    dragHover: {
+        label: string;
+        count: number;
+    } | null;
+    /** Asset import progress, while importing. */
+    assetsLoading: AssetLoadProgress | null;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab has unsaved edits. */
+    prefabDirty: boolean;
+    /** Link shown in the top-left corner, outside prefab mode. */
+    backLink?: {
+        href: string;
+        label: string;
+    };
+    /** Undo is possible. */
+    canUndo: boolean;
+    /** Redo is possible. */
+    canRedo: boolean;
+    /** An effect is focused. */
+    hasFocus: boolean;
+    /** The stage gizmo's mode. */
+    gizmoMode: GizmoMode;
+    /** Emitter shape wireframes are shown. */
+    showWireframes: boolean;
+    /** Drag handlers of the viewport, for assets dropped from the drawer. */
+    dragHandlers: Pick<React.HTMLAttributes<HTMLDivElement>, 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDrop'>;
+    /** Undo (`false`) or redo. */
+    onHistoryStep(redo: boolean): void;
+    /** Pick the stage gizmo's mode. */
+    onGizmoMode(mode: GizmoMode): void;
+    /** Show or hide the emitter wireframes. */
+    onToggleWireframes(): void;
+    /** Back from the prefab to the scene. */
+    onExitPrefab(): void;
+    /** Save the open prefab. */
+    onSavePrefab(): void;
+}
+/** The 3D viewport and what floats over it: toolbars, transport, drag and import feedback. */
+export declare function ViewportPane({ canvasRef, fpsRef, inset, transport, dragHover, assetsLoading, prefabInfo, prefabDirty, backLink, canUndo, canRedo, hasFocus, gizmoMode, showWireframes, dragHandlers, onHistoryStep, onGizmoMode, onToggleWireframes, onExitPrefab, onSavePrefab, }: ViewportPaneProps): React.ReactElement;