@pixerate/editor-svelte 0.212.0 → 0.213.0

package/dist/paint-editor/CulturePanel.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { CULTURE_SLIDERS, readPath, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import PaintSlider from './PaintSlider.svelte';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const cultures = $derived(editor.current.cultures);
+  const brush = $derived(editor.current.brush);
+  const activeColony = $derived.by(() => {
+    const activeId = editor.current.document.activeLayerId;
+    return cultures.layers.find((l) => l.layerId === activeId) ?? cultures.layers[0] ?? null;
+  });
+  const totalTips = $derived(cultures.layers.reduce((acc, l) => acc + l.tips, 0));
+  const totalSegments = $derived(cultures.layers.reduce((acc, l) => acc + l.segments, 0));
+  const canCarryCulture = $derived(['dab', 'mixer', 'impasto', 'particle', 'bristle'].includes(brush.engine));
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+</script>
+
+<!-- Biopaint (culture) panel: inspect living mycelial colonies, step growth, pause/resume, kill tips, and tune brush spores. -->
+<div class={`${panel} ${className}`} data-testid="culture-panel">
+  <div class="flex items-center justify-between">
+    <span class="font-medium text-slate-300">Biopaint (mycelial ink)</span>
+    <div class="flex gap-1">
+      <button type="button" class={button} onclick={() => run(() => controller.growCultures({ steps: 40 }))}>Grow</button>
+      <button
+        type="button"
+        aria-pressed={cultures.paused}
+        class={chip(cultures.paused)}
+        onclick={() => controller.setCulturePaused(!cultures.paused)}
+      >
+        {cultures.paused ? 'Paused' : 'Pause'}
+      </button>
+      <button
+        type="button"
+        class={button}
+        disabled={!activeColony || activeColony.tips === 0}
+        onclick={() => run(() => controller.removeCultures(activeColony?.layerId))}
+      >
+        Kill colony
+      </button>
+    </div>
+  </div>
+  <div class="flex items-center justify-between text-[11px] text-slate-400">
+    <span>
+      {activeColony
+        ? `${totalTips} living tips · ${totalSegments} segments (${activeColony.status})`
+        : 'No mycelial colony on canvas'}
+    </span>
+  </div>
+  <label class="flex items-center gap-2 text-[11px]">
+    <input
+      type="checkbox"
+      checked={cultures.growWhileClosed}
+      onchange={(e) => run(() => controller.setCultureOptions({ growWhileClosed: e.currentTarget.checked }))}
+    />
+    Grow while closed
+  </label>
+  {#if canCarryCulture}
+    <div class="flex flex-col gap-1 border-t border-slate-800 pt-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-[11px] text-slate-400">Brush spores</span>
+        <button
+          type="button"
+          aria-pressed={Boolean(brush.culture)}
+          class={chip(Boolean(brush.culture))}
+          onclick={() => run(() => controller.setBrush({ culture: brush.culture ? null : {} }))}
+        >
+          {brush.culture ? 'On' : 'Off'}
+        </button>
+      </div>
+      {#if brush.culture}
+        {#each CULTURE_SLIDERS as c (c.path)}
+          {@const key = c.path.replace(/^culture\./, '')}
+          <PaintSlider
+            control={c}
+            value={readPath(brush.culture, key)}
+            oncommit={(v) => run(() => controller.setBrush({ culture: { [key]: v } }))}
+          />
+        {/each}
+      {/if}
+    </div>
+  {/if}
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

package/dist/paint-editor/CulturePanel.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    class?: string;
+}
+declare const CulturePanel: import("svelte").Component<Props, {}, "">;
+type CulturePanel = ReturnType<typeof CulturePanel>;
+export default CulturePanel;

package/dist/paint-editor/PaintCanvas.svelte

@@ -140,11 +140,16 @@
     });
   });
 
-  // Live effect paint plays while the canvas is mounted (idle when nothing is live or it is paused).
+  // Live effect paint and biopaint cultures play while the canvas is mounted (idle when nothing is live or paused).
   $effect(() => {
     const c = controller;
+    untrack(() => c.catchUpCultures());
     const player = untrack(() => c.playEffects());
-    return () => player.stop();
+    const cultures = untrack(() => c.playCultures());
+    return () => {
+      player.stop();
+      cultures.stop();
+    };
   });
 
   // Wheel needs a non-passive listener to prevent page scroll (see GOTCHAS).

package/dist/paint-editor/PaperPanel.svelte

@@ -5,6 +5,7 @@
   import PixelCanvas from './PixelCanvas.svelte';
   import FerroPanel from './FerroPanel.svelte';
   import TimeMachinePanel from './TimeMachinePanel.svelte';
+  import CulturePanel from './CulturePanel.svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
   interface Props {
@@ -106,5 +107,6 @@
   </div>
   <FerroPanel {controller} />
   <TimeMachinePanel {controller} />
+  <CulturePanel {controller} />
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
 </div>

package/dist/paint-editor/index.d.ts

@@ -8,6 +8,7 @@ import type BrushLibraryBrowserComponent from '../brushes/BrushLibraryBrowser.sv
 import type PaperPanelComponent from './PaperPanel.svelte';
 import type FerroPanelComponent from './FerroPanel.svelte';
 import type TimeMachinePanelComponent from './TimeMachinePanel.svelte';
+import type CulturePanelComponent from './CulturePanel.svelte';
 import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
 import type WetPanelComponent from './WetPanel.svelte';
@@ -27,6 +28,7 @@ export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.s
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as FerroPanel } from './FerroPanel.svelte';
 export { default as TimeMachinePanel } from './TimeMachinePanel.svelte';
+export { default as CulturePanel } from './CulturePanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
@@ -51,6 +53,7 @@ export type BrushLibraryBrowserProps = ComponentProps<typeof BrushLibraryBrowser
 export type PaperPanelProps = ComponentProps<typeof PaperPanelComponent>;
 export type FerroPanelProps = ComponentProps<typeof FerroPanelComponent>;
 export type TimeMachinePanelProps = ComponentProps<typeof TimeMachinePanelComponent>;
+export type CulturePanelProps = ComponentProps<typeof CulturePanelComponent>;
 export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
 export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;

package/dist/paint-editor/index.js

@@ -9,6 +9,7 @@ export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.s
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as FerroPanel } from './FerroPanel.svelte';
 export { default as TimeMachinePanel } from './TimeMachinePanel.svelte';
+export { default as CulturePanel } from './CulturePanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.212.0",
+  "version": "0.213.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.284.0"
+    "@pixerate/editor": "0.285.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",