@pixerate/editor-svelte 0.179.0 → 0.180.0

package/dist/paint-editor/BrushPanel.svelte

@@ -182,6 +182,11 @@
           </select>
         </label>
       {/if}
+      {#if engine.light && brush.light.amount > 0}
+        <label class="flex items-center gap-2" title="Pressure scales the light the brush lays">
+          <input type="checkbox" aria-label="Light follows pressure" checked={brush.light.pressure} onchange={(e) => controller.setBrush({ light: { pressure: e.currentTarget.checked } })} /> Light follows pressure
+        </label>
+      {/if}
       {#if engine.dirty}
         <label class="flex items-center gap-2" title="Keep the colour the brush picked up for the next stroke (needs Pick-up above 0)">
           <input type="checkbox" aria-label="Dirty brush" checked={brush.behavior.dirty} onchange={(e) => controller.setBrush({ behavior: { dirty: e.currentTarget.checked } })} /> Dirty brush

package/dist/paint-editor/PaintLayersPanel.svelte

@@ -14,6 +14,10 @@
     return untrack(() => controller.listLayers());
   });
   const active = $derived(layers.find((l) => l.active) ?? null);
+  const light = $derived.by(() => {
+    void editor.current;
+    return active?.type === 'pixel' ? untrack(() => controller.lightOf(active.id)) : null;
+  });
   let error = $state<string | null>(null);
   let renaming = $state<string | null>(null);
   const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
@@ -107,6 +111,23 @@
         {/each}
         <button type="button" aria-pressed={active.clipped} class={chip(active.clipped)} onclick={() => run(() => controller.updateLayer(active.id, { clipped: !active.clipped }))}>Clip</button>
       </div>
+      {#if light?.hasLight}
+        {@const id = active.id}
+        <div class="flex flex-col gap-1.5 border-t border-slate-800 pt-1.5" data-testid="layer-light">
+          <div class="flex items-center justify-between">
+            <span class="font-medium text-slate-300" title="This layer's paint gives off light">Light</span>
+            <button type="button" class={button} onclick={() => run(() => controller.clearLight(id))}>Clear light</button>
+          </div>
+          <label class="flex items-center gap-2" title="How far the light spills onto the paint and paper around it (0 turns it off)">
+            <span class="w-14 text-slate-400">Spill</span>
+            <input type="range" aria-label="Light spill radius" min="0" max="120" step="1" value={light.spill.radius} onchange={(e) => run(() => controller.setLightSpill(id, { radius: Number(e.currentTarget.value) }))} class="flex-1 accent-indigo-500" />
+          </label>
+          <label class="flex items-center gap-2">
+            <span class="w-14 text-slate-400">Strength</span>
+            <input type="range" aria-label="Light spill strength" min="0" max="2" step="0.05" value={light.spill.strength} onchange={(e) => run(() => controller.setLightSpill(id, { strength: Number(e.currentTarget.value) }))} class="flex-1 accent-indigo-500" />
+          </label>
+        </div>
+      {/if}
     </div>
   {/if}
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.179.0",
+  "version": "0.180.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.242.0"
+    "@pixerate/editor": "0.243.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",