@pixerate/editor-svelte 0.205.1 → 0.206.0

package/dist/paint-editor/WetPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { WET_FLOW_KINDS, WET_GPU_OPTIONS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath, wetEngineSummary, type PaintEditorController, type WetFlowKind, type WetGpuMode } from '@pixerate/editor/paint-editor';
+  import { LIVE_PATTERN_KINDS, LIVE_PATTERN_LABELS, LIVE_PATTERN_SLIDERS, WET_FLOW_KINDS, WET_GPU_OPTIONS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath, wetEngineSummary, type LivePatternKind, type PaintEditorController, type WetFlowKind, type WetGpuMode } from '@pixerate/editor/paint-editor';
   import PaintSlider from './PaintSlider.svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
@@ -15,6 +15,10 @@
     void editor.current;
     return layerId ? controller.wetLayerInfo(layerId) : null;
   });
+  const livePattern = $derived.by(() => {
+    void editor.current;
+    return layerId ? controller.getLivePatterns(layerId).layers[0] ?? null : null;
+  });
   const backend = $derived.by(() => {
     void editor.current;
     return controller.wetState();
@@ -58,6 +62,23 @@
       {/if}
     </div>
   {/if}
+  {#if livePattern && layerId}
+    <div class="flex flex-col gap-1.5" data-testid="wet-live-patterns">
+      <div class="flex items-center justify-between">
+        <span class="font-medium text-slate-300">Live patterns</span>
+        <button type="button" class={button} onclick={() => run(async () => { await controller.wetIdle(); const cx = Math.round(editor.current.document.canvas.width / 2); const cy = Math.round(editor.current.document.canvas.height / 2); controller.seedLivePatterns({ layerId, points: [{ x: cx, y: cy }] }); })}>Seed pattern</button>
+      </div>
+      <label class="flex items-center justify-between gap-2">
+        <span class="text-slate-400">Pattern</span>
+        <select aria-label="Live pattern" value={livePattern.settings.pattern} onchange={(e) => { const pattern = e.currentTarget.value as LivePatternKind; run(async () => (await controller.wetIdle(), controller.setLivePatterns(layerId, { pattern }))); }} class="rounded bg-slate-800 px-1 py-0.5">
+          {#each LIVE_PATTERN_KINDS as k (k)}<option value={k}>{LIVE_PATTERN_LABELS[k]}</option>{/each}
+        </select>
+      </label>
+      {#each LIVE_PATTERN_SLIDERS as c (c.path)}
+        <PaintSlider control={c} value={readPath(livePattern.settings, c.path)} oncommit={(v) => run(async () => (await controller.wetIdle(), controller.setLivePatterns(layerId, { [c.path]: v })))} />
+      {/each}
+    </div>
+  {/if}
   {#if backend.message}<p class="text-[10px] text-amber-300" data-testid="wet-message">{backend.message}</p>{/if}
   {#if backend.backend}
     <p class="text-[10px] text-slate-500">{backend.backend.kind === 'wasm-threads' ? `WebAssembly, ${backend.backend.threads} threads` : backend.backend.kind === 'wasm' ? 'WebAssembly, one thread' : 'JavaScript'}</p>

package/package.json

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