babylon.quarks-editor 0.20.0 → 0.23.0

package/CHANGELOG.md

@@ -4,6 +4,35 @@ All notable changes to the `babylon.quarks-editor` package are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and the project follows the `quarks.core` 0.x version line.
 
+## [0.23.0] — 2026-10-18
+
+### Added
+
+- The projects page shows the host's `backLink` (the same one the editor viewport shows), so a
+  workspace embedded in a site can be left for the hosting page without the browser's back button.
+
+### Changed
+
+- Version aligned with babylon.quarks 0.23.0, whose simulation now runs on store columns; the
+  editor's preview and gallery get the same speed-up with no editor changes.
+
+## [0.22.0] — 2026-10-17
+
+### Added
+
+- Renderer module: a "Lighting" selector for mesh particles (`fixed` / `unlit` / `scene`) and
+  rim (Fresnel) controls — colour, power, strength, add or mix.
+- Width over Trail module: an "Absolute width" checkbox for `WidthOverLength`'s `absolute`
+  flag (the curve as world-unit widths, the pre-0.22 reading).
+
+## [0.21.0] — 2026-10-16
+
+### Changed
+
+- Asset folder import inlines external textures and geometries through
+  `QuarksLoader.resolveLinkedResources` and a File-backed `QuarksResourceResolver`, matching the
+  runtime loader path instead of a private `resolveExternalGeometries` helper.
+
 ## [0.20.0] — 2026-10-16
 
 ### Added

package/dist/core/assets.js

@@ -87,31 +87,53 @@ class ImportedFileIndex {
     }
 }
 /**
- * Inlines what an "assets as files" export put in separate files: image urls become data URIs
- * and external geometries are read into the JSON, so the effect loads (and later exports) as a
+ * File-backed {@link QuarksResourceResolver}: relative image urls become data URIs and geometry
+ * urls load from the imported file set. Collects missing references into `missing`.
+ */
+function createFileResolver(effectPath, index, missing) {
+    return {
+        async resolve(url, kind, baseUrl) {
+            if (kind === 'image') {
+                if (isExternalUrl(url)) {
+                    return url;
+                }
+                const file = index.find(baseUrl || effectPath, url);
+                if (!file) {
+                    missing.push(url);
+                    return url;
+                }
+                return index.read(file, readAsDataUrl);
+            }
+            // Geometry (and other kinds): stable path key for fetchJson.
+            const file = index.find(baseUrl || effectPath, url);
+            if (!file) {
+                missing.push(url);
+                throw new Error('not among the imported files');
+            }
+            return relativePathOf(file);
+        },
+        fetchJson(resolvedUrl) {
+            // resolvedUrl is relativePathOf(file) from resolve(); look up by path (empty base).
+            const file = index.find('', resolvedUrl);
+            if (!file) {
+                throw new Error(`missing file "${resolvedUrl}"`);
+            }
+            return index.read(file, async (f) => JSON.parse(await f.text()));
+        },
+    };
+}
+/**
+ * Inlines what an "assets as files" export put in separate files via
+ * {@link QuarksLoader.resolveLinkedResources}, so the effect loads (and later exports) as a
  * self-contained effect. Returns the references that could not be found among the files.
  */
 async function inlineExternalFiles(json, effectPath, index) {
     const missing = [];
-    for (const image of Array.isArray(json.images) ? json.images : []) {
-        const url = image?.url;
-        if (typeof url !== 'string' || isExternalUrl(url))
-            continue;
-        const file = index.find(effectPath, url);
-        if (file) {
-            image.url = await index.read(file, readAsDataUrl);
-        }
-        else {
-            missing.push(url);
-        }
-    }
-    await QuarksLoader.resolveExternalGeometries(json, async (url) => {
-        const file = index.find(effectPath, url);
-        if (!file) {
-            missing.push(url);
-            throw new Error('not among the imported files');
-        }
-        return index.read(file, async (f) => JSON.parse(await f.text()));
+    // baseUrl is the effect file path so resolveRelativePath can walk from its folder; the
+    // File resolver ignores HTTP join and looks up files by path/name instead.
+    await QuarksLoader.resolveLinkedResources(json, {
+        baseUrl: effectPath,
+        resolver: createFileResolver(effectPath, index, missing),
     });
     return missing;
 }

package/dist/react/EditorWorkspace.js

@@ -42,7 +42,7 @@ export function EditorWorkspace(props) {
             }, children: "Opening project\u2026" }));
     }
     if (!project) {
-        return (_jsx(ProjectsPage, { store: store, title: hostProps.title, onOpen: (meta) => {
+        return (_jsx(ProjectsPage, { store: store, title: hostProps.title, backLink: hostProps.backLink, onOpen: (meta) => {
                 setProject(meta);
                 onProjectChange?.(meta.id);
             } }));

package/dist/react/ProjectsPage.d.ts

@@ -4,6 +4,11 @@ export interface ProjectsPageProps {
     store: ProjectStore;
     onOpen: (project: ProjectMeta) => void;
     title?: string;
+    /** Optional link back to the page that hosts the editor (e.g. a gallery), shown above the title. */
+    backLink?: {
+        href: string;
+        label: string;
+    };
 }
 /** Start page: the projects saved in the store, plus storage usage. */
 export declare function ProjectsPage(props: ProjectsPageProps): React.ReactElement;

package/dist/react/ProjectsPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FolderIcon, PlusIcon } from '@heroicons/react/24/solid';
+import { ArrowLeftIcon, FolderIcon, PlusIcon } from '@heroicons/react/24/solid';
 import { useCallback, useEffect, useState } from 'react';
 import { formatBytes } from '../core/projectStore';
 import { ChoiceDialog } from './ChoiceDialog';
@@ -31,7 +31,7 @@ function StorageBar(props) {
 }
 /** Start page: the projects saved in the store, plus storage usage. */
 export function ProjectsPage(props) {
-    const { store, onOpen, title = 'Effect editor' } = props;
+    const { store, onOpen, title = 'Effect editor', backLink } = props;
     const [projects, setProjects] = useState(null);
     const [estimate, setEstimate] = useState(null);
     const [dialog, setDialog] = useState(null);
@@ -84,7 +84,20 @@ export function ProjectsPage(props) {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 18,
-                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 22, fontWeight: 700 }, children: title }), _jsx("div", { style: { fontSize: 13, color: theme.textDim, marginTop: 4 }, children: "Projects keep their assets and scene between sessions." })] }), _jsx("span", { style: { flex: 1 } }), _jsxs("button", { className: "qe-hover", style: {
+                }, children: [backLink && (_jsxs("a", { className: "qe-hover", href: backLink.href, style: {
+                            alignSelf: 'flex-start',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 6,
+                            background: theme.panelBg,
+                            border: `1px solid ${theme.border}`,
+                            borderRadius: 8,
+                            padding: '6px 12px',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: theme.text,
+                            textDecoration: 'none',
+                        }, children: [_jsx(ArrowLeftIcon, { style: iconStyle(14) }), backLink.label.replace(/^←\s*/, '')] })), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 22, fontWeight: 700 }, children: title }), _jsx("div", { style: { fontSize: 13, color: theme.textDim, marginTop: 4 }, children: "Projects keep their assets and scene between sessions." })] }), _jsx("span", { style: { flex: 1 } }), _jsxs("button", { className: "qe-hover", style: {
                                     ...buttonStyle,
                                     display: 'inline-flex',
                                     alignItems: 'center',

package/dist/react/behaviorModules.js

@@ -3,7 +3,7 @@ import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, Constant
 import { buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops } from '../core/colors';
 import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
 import { CurveEditor } from './CurveEditor';
-import { NumberField, Row, SelectField } from './fields';
+import { CheckboxField, NumberField, Row, SelectField } from './fields';
 import { GradientEditor } from './GradientEditor';
 import { ModuleSection } from './ModuleSection';
 import { ValueField } from './ValueField';
@@ -93,7 +93,7 @@ export function OrbitOverLifeModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Orbit over Lifetime", type: "OrbitOverLife", create: () => new OrbitOverLife(new ConstantValue(Math.PI), new Vector3(0, 1, 0)), children: (behavior) => (_jsx(ValueField, { label: "Orbit speed", generator: behavior.orbitSpeed, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitSpeed = g)) })) }));
 }
 export function WidthOverTrailModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Width over Trail", type: "WidthOverLength", create: () => new WidthOverLength(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.4, 0] })), children: (behavior) => (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.width), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.width = buildCurve(pieces))) }) })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Width over Trail", type: "WidthOverLength", create: () => new WidthOverLength(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.4, 0] })), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.width), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.width = buildCurve(pieces))) }) }), _jsx(Row, { label: "Absolute width", children: _jsx(CheckboxField, { value: behavior.absolute, onChange: (v) => binding.apply(() => (behavior.absolute = v)) }) })] })) }));
 }
 export function TextureSheetModule({ binding }) {
     const system = binding.system;

package/dist/react/modules.js

@@ -485,6 +485,24 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                             }
                                         });
                                     } }), _jsx(MeshPreview, { positions: system.instancingGeometry, indices: system.getRendererSettings().instancingIndices }), preset === 'custom' && (_jsxs("span", { style: { fontSize: 10.5, color: '#9eb9ff' }, children: [vertexCount, " verts / ", triangleCount, " tris \u2014 picking a preset replaces this mesh"] }))] }) }));
+                })(), system.renderMode === RenderMode.Mesh && (_jsx(Row, { label: "Lighting", children: _jsx(SelectField, { value: system.lighting, options: [
+                        { value: 'fixed', label: 'Fixed light' },
+                        { value: 'scene', label: 'Scene light' },
+                        { value: 'unlit', label: 'Unlit' },
+                    ], onChange: (v) => binding.apply((s) => (s.lighting = v)) }) })), system.renderMode === RenderMode.Mesh && (_jsx(Row, { label: "Rim", children: _jsx(CheckboxField, { value: !!system.rim, onChange: (v) => binding.apply((s) => (s.rim = v ? {} : undefined)) }) })), system.renderMode === RenderMode.Mesh &&
+                system.rim &&
+                (() => {
+                    const rim = system.rim;
+                    const patchRim = (patch) => binding.apply((s) => (s.rim = { ...s.rim, ...patch }));
+                    const setChannel = (channel, value) => {
+                        const color = [...rim.color];
+                        color[channel] = value;
+                        patchRim({ color });
+                    };
+                    return (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Rim mode", children: _jsx(SelectField, { value: rim.mode, options: [
+                                        { value: 'add', label: 'Add (glow)' },
+                                        { value: 'mix', label: 'Mix (outline)' },
+                                    ], onChange: (mode) => patchRim({ mode }) }) }), _jsx(Row, { label: "Rim color", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: [0, 1, 2].map((channel) => (_jsx(NumberField, { value: rim.color[channel], min: 0, step: 0.05, onChange: (v) => setChannel(channel, v) }, channel))) }) }), _jsx(Row, { label: "Rim power", children: _jsx(NumberField, { value: rim.power, min: 0.01, step: 0.25, onChange: (power) => patchRim({ power }) }) }), _jsx(Row, { label: "Rim strength", children: _jsx(NumberField, { value: rim.strength, min: 0, step: 0.05, onChange: (strength) => patchRim({ strength }) }) })] }));
                 })(), _jsx(Row, { label: "Render order", children: _jsx(NumberField, { value: system.renderOrder, step: 1, onChange: (v) => binding.apply((s) => (s.renderOrder = Math.round(v))) }) }), _jsx(Row, { label: "Soft particles", children: _jsx(CheckboxField, { value: system.softParticles, onChange: (v) => binding.apply((s) => (s.softParticles = v)) }) }), system.softParticles && (_jsx(Row, { label: "Fade near/far", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: system.softNearFade, min: 0, onChange: (v) => binding.apply((s) => (s.softNearFade = v)) }), _jsx(NumberField, { value: system.softFarFade, min: 0, onChange: (v) => binding.apply((s) => (s.softFarFade = v)) })] }) }))] }));
 }
 function removeBehavior(system, type) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylon.quarks-editor",
-    "version": "0.20.0",
+    "version": "0.23.0",
     "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
     "type": "module",
     "main": "./dist/index.js",

package/src/core/assets.ts

@@ -1,3 +1,4 @@
+import type {QuarksResourceKind, QuarksResourceResolver} from 'babylon.quarks';
 import {QuarksLoader} from 'babylon.quarks';
 
 /**
@@ -124,33 +125,55 @@ class ImportedFileIndex {
 }
 
 /**
- * Inlines what an "assets as files" export put in separate files: image urls become data URIs
- * and external geometries are read into the JSON, so the effect loads (and later exports) as a
+ * File-backed {@link QuarksResourceResolver}: relative image urls become data URIs and geometry
+ * urls load from the imported file set. Collects missing references into `missing`.
+ */
+function createFileResolver(effectPath: string, index: ImportedFileIndex, missing: string[]): QuarksResourceResolver {
+    return {
+        async resolve(url: string, kind: QuarksResourceKind, baseUrl: string): Promise<string> {
+            if (kind === 'image') {
+                if (isExternalUrl(url)) {
+                    return url;
+                }
+                const file = index.find(baseUrl || effectPath, url);
+                if (!file) {
+                    missing.push(url);
+                    return url;
+                }
+                return index.read(file, readAsDataUrl);
+            }
+            // Geometry (and other kinds): stable path key for fetchJson.
+            const file = index.find(baseUrl || effectPath, url);
+            if (!file) {
+                missing.push(url);
+                throw new Error('not among the imported files');
+            }
+            return relativePathOf(file);
+        },
+        fetchJson(resolvedUrl: string): Promise<unknown> {
+            // resolvedUrl is relativePathOf(file) from resolve(); look up by path (empty base).
+            const file = index.find('', resolvedUrl);
+            if (!file) {
+                throw new Error(`missing file "${resolvedUrl}"`);
+            }
+            return index.read(file, async (f) => JSON.parse(await f.text()));
+        },
+    };
+}
+
+/**
+ * Inlines what an "assets as files" export put in separate files via
+ * {@link QuarksLoader.resolveLinkedResources}, so the effect loads (and later exports) as a
  * self-contained effect. Returns the references that could not be found among the files.
  */
 async function inlineExternalFiles(json: any, effectPath: string, index: ImportedFileIndex): Promise<string[]> {
     const missing: string[] = [];
-
-    for (const image of Array.isArray(json.images) ? json.images : []) {
-        const url = image?.url;
-        if (typeof url !== 'string' || isExternalUrl(url)) continue;
-        const file = index.find(effectPath, url);
-        if (file) {
-            image.url = await index.read(file, readAsDataUrl);
-        } else {
-            missing.push(url);
-        }
-    }
-
-    await QuarksLoader.resolveExternalGeometries(json, async (url) => {
-        const file = index.find(effectPath, url);
-        if (!file) {
-            missing.push(url);
-            throw new Error('not among the imported files');
-        }
-        return index.read(file, async (f) => JSON.parse(await f.text()));
+    // baseUrl is the effect file path so resolveRelativePath can walk from its folder; the
+    // File resolver ignores HTTP join and looks up files by path/name instead.
+    await QuarksLoader.resolveLinkedResources(json, {
+        baseUrl: effectPath,
+        resolver: createFileResolver(effectPath, index, missing),
     });
-
     return missing;
 }
 

package/src/react/EditorWorkspace.tsx

@@ -63,6 +63,7 @@ export function EditorWorkspace(props: EditorWorkspaceProps): React.ReactElement
             <ProjectsPage
                 store={store}
                 title={hostProps.title}
+                backLink={hostProps.backLink}
                 onOpen={(meta) => {
                     setProject(meta);
                     onProjectChange?.(meta.id);

package/src/react/ProjectsPage.tsx

@@ -1,4 +1,4 @@
-import {FolderIcon, PlusIcon} from '@heroicons/react/24/solid';
+import {ArrowLeftIcon, FolderIcon, PlusIcon} from '@heroicons/react/24/solid';
 import React, {useCallback, useEffect, useState} from 'react';
 import {formatBytes, type ProjectMeta, type ProjectStore, type StorageEstimate} from '../core/projectStore';
 import {ChoiceDialog} from './ChoiceDialog';
@@ -11,6 +11,8 @@ export interface ProjectsPageProps {
     store: ProjectStore;
     onOpen: (project: ProjectMeta) => void;
     title?: string;
+    /** Optional link back to the page that hosts the editor (e.g. a gallery), shown above the title. */
+    backLink?: {href: string; label: string};
 }
 
 type Dialog =
@@ -79,7 +81,7 @@ function StorageBar(props: {estimate: StorageEstimate | null; onPersist: () => v
 
 /** Start page: the projects saved in the store, plus storage usage. */
 export function ProjectsPage(props: ProjectsPageProps): React.ReactElement {
-    const {store, onOpen, title = 'Effect editor'} = props;
+    const {store, onOpen, title = 'Effect editor', backLink} = props;
     const [projects, setProjects] = useState<ProjectMeta[] | null>(null);
     const [estimate, setEstimate] = useState<StorageEstimate | null>(null);
     const [dialog, setDialog] = useState<Dialog>(null);
@@ -145,6 +147,29 @@ export function ProjectsPage(props: ProjectsPageProps): React.ReactElement {
                     gap: 18,
                 }}
             >
+                {backLink && (
+                    <a
+                        className="qe-hover"
+                        href={backLink.href}
+                        style={{
+                            alignSelf: 'flex-start',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 6,
+                            background: theme.panelBg,
+                            border: `1px solid ${theme.border}`,
+                            borderRadius: 8,
+                            padding: '6px 12px',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: theme.text,
+                            textDecoration: 'none',
+                        }}
+                    >
+                        <ArrowLeftIcon style={iconStyle(14)} />
+                        {backLink.label.replace(/^←\s*/, '')}
+                    </a>
+                )}
                 <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
                     <div>
                         <div style={{fontSize: 22, fontWeight: 700}}>{title}</div>

package/src/react/behaviorModules.tsx

@@ -28,7 +28,7 @@ import {EffectBinding} from '../core/binding';
 import {buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops} from '../core/colors';
 import {buildCurve, buildScalar, readPieces, readScalar} from '../core/values';
 import {CurveEditor} from './CurveEditor';
-import {NumberField, Row, SelectField} from './fields';
+import {CheckboxField, NumberField, Row, SelectField} from './fields';
 import {GradientEditor} from './GradientEditor';
 import {ModuleSection} from './ModuleSection';
 import {ValueField} from './ValueField';
@@ -614,13 +614,22 @@ export function WidthOverTrailModule({binding}: ModuleProps) {
             }
         >
             {(behavior) => (
-                <div style={{marginTop: 6}}>
-                    <CurveEditor
-                        pieces={readPieces(behavior.width as never)}
-                        maxValue={2}
-                        onChange={(pieces) => binding.apply(() => (behavior.width = buildCurve(pieces) as never))}
-                    />
-                </div>
+                <>
+                    <div style={{marginTop: 6}}>
+                        <CurveEditor
+                            pieces={readPieces(behavior.width as never)}
+                            maxValue={2}
+                            onChange={(pieces) => binding.apply(() => (behavior.width = buildCurve(pieces) as never))}
+                        />
+                    </div>
+                    {/* Off: the curve multiplies the particle size. On: it is the width in world units (files from 0.21 and earlier). */}
+                    <Row label="Absolute width">
+                        <CheckboxField
+                            value={behavior.absolute}
+                            onChange={(v) => binding.apply(() => (behavior.absolute = v))}
+                        />
+                    </Row>
+                </>
             )}
         </BehaviorModule>
     );

package/src/react/modules.tsx

@@ -1,7 +1,7 @@
 import {Texture} from '@babylonjs/core/Materials/Textures/texture';
 import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {PlusIcon, XMarkIcon} from '@heroicons/react/24/solid';
-import type {Behavior, ParticleSystem} from 'babylon.quarks';
+import type {Behavior, MeshLighting, MeshRim, ParticleSystem} from 'babylon.quarks';
 import {
     ColorOverLife,
     ConstantColor,
@@ -1122,6 +1122,81 @@ export function RendererModule({
                         </Row>
                     );
                 })()}
+            {system.renderMode === RenderMode.Mesh && (
+                <Row label="Lighting">
+                    <SelectField<MeshLighting>
+                        value={system.lighting}
+                        options={[
+                            {value: 'fixed', label: 'Fixed light'},
+                            {value: 'scene', label: 'Scene light'},
+                            {value: 'unlit', label: 'Unlit'},
+                        ]}
+                        onChange={(v) => binding.apply((s) => (s.lighting = v))}
+                    />
+                </Row>
+            )}
+            {system.renderMode === RenderMode.Mesh && (
+                <Row label="Rim">
+                    <CheckboxField
+                        value={!!system.rim}
+                        onChange={(v) => binding.apply((s) => (s.rim = v ? {} : undefined))}
+                    />
+                </Row>
+            )}
+            {system.renderMode === RenderMode.Mesh &&
+                system.rim &&
+                (() => {
+                    const rim = system.rim;
+                    const patchRim = (patch: Partial<MeshRim>) => binding.apply((s) => (s.rim = {...s.rim, ...patch}));
+                    const setChannel = (channel: number, value: number) => {
+                        const color: [number, number, number] = [...rim.color];
+                        color[channel] = value;
+                        patchRim({color});
+                    };
+                    return (
+                        <>
+                            <Row label="Rim mode">
+                                <SelectField<MeshRim['mode']>
+                                    value={rim.mode}
+                                    options={[
+                                        {value: 'add', label: 'Add (glow)'},
+                                        {value: 'mix', label: 'Mix (outline)'},
+                                    ]}
+                                    onChange={(mode) => patchRim({mode})}
+                                />
+                            </Row>
+                            <Row label="Rim color">
+                                <div style={{display: 'flex', gap: 6}}>
+                                    {[0, 1, 2].map((channel) => (
+                                        <NumberField
+                                            key={channel}
+                                            value={rim.color[channel]}
+                                            min={0}
+                                            step={0.05}
+                                            onChange={(v) => setChannel(channel, v)}
+                                        />
+                                    ))}
+                                </div>
+                            </Row>
+                            <Row label="Rim power">
+                                <NumberField
+                                    value={rim.power}
+                                    min={0.01}
+                                    step={0.25}
+                                    onChange={(power) => patchRim({power})}
+                                />
+                            </Row>
+                            <Row label="Rim strength">
+                                <NumberField
+                                    value={rim.strength}
+                                    min={0}
+                                    step={0.05}
+                                    onChange={(strength) => patchRim({strength})}
+                                />
+                            </Row>
+                        </>
+                    );
+                })()}
             <Row label="Render order">
                 <NumberField
                     value={system.renderOrder}