@pixerate/editor-svelte 0.210.0 → 0.211.0

package/dist/paint-editor/PaperPanel.svelte

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

package/dist/paint-editor/TimeMachinePanel.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { AGE_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 age = $derived(editor.current.age);
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+</script>
+
+<!-- Painting time machine panel: non-destructive ageing preview, bakeAge, X-ray view and scraper brush. -->
+<div class={`${panel} ${className}`} data-testid="time-machine-panel">
+  <div class="flex items-center justify-between gap-1">
+    <span class="font-medium text-slate-300">Time machine (ageing &amp; X-ray)</span>
+    <div class="flex flex-wrap gap-1">
+      <button type="button" class={chip(age.years === 300)} onclick={() => run(() => controller.setAge({ years: 300 }))}>
+        Age 300 yr
+      </button>
+      {#if age.years > 0}
+        <button type="button" class={button} onclick={() => run(() => controller.setAge({ years: 0 }))}>Fresh</button>
+      {/if}
+    </div>
+  </div>
+  <label class="flex items-center gap-2">
+    <input
+      type="checkbox"
+      checked={editor.current.xrayView}
+      onchange={(e) => run(() => controller.setXrayView(e.currentTarget.checked))}
+    />
+    X-ray view (pentimento)
+  </label>
+  {#each AGE_SLIDERS as c (c.path)}
+    <PaintSlider control={c} value={readPath(age, c.path)} onchange={(v) => run(() => controller.setAge({ [c.path]: v }))} />
+  {/each}
+  <div class="flex flex-wrap items-center gap-1.5">
+    <button type="button" class={button} disabled={age.years <= 0} onclick={() => run(() => controller.bakeAge())}>
+      Bake age
+    </button>
+    <button type="button" class={button} onclick={() => run(() => controller.setAge({ seed: age.seed + 1 }))}>
+      New crack seed
+    </button>
+    <button
+      type="button"
+      class={chip(editor.current.brush.id === 'paint-scraper')}
+      onclick={() => run(() => controller.setBrush({ id: 'paint-scraper' }))}
+    >
+      Scraper brush
+    </button>
+  </div>
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

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

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

@@ -7,6 +7,7 @@ import type BrushEditorComponent from '../brushes/BrushEditor.svelte';
 import type BrushLibraryBrowserComponent from '../brushes/BrushLibraryBrowser.svelte';
 import type PaperPanelComponent from './PaperPanel.svelte';
 import type FerroPanelComponent from './FerroPanel.svelte';
+import type TimeMachinePanelComponent from './TimeMachinePanel.svelte';
 import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
 import type WetPanelComponent from './WetPanel.svelte';
@@ -25,6 +26,7 @@ export { default as BrushEditor } from '../brushes/BrushEditor.svelte';
 export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as FerroPanel } from './FerroPanel.svelte';
+export { default as TimeMachinePanel } from './TimeMachinePanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
@@ -48,6 +50,7 @@ export type BrushEditorProps = ComponentProps<typeof BrushEditorComponent>;
 export type BrushLibraryBrowserProps = ComponentProps<typeof BrushLibraryBrowserComponent>;
 export type PaperPanelProps = ComponentProps<typeof PaperPanelComponent>;
 export type FerroPanelProps = ComponentProps<typeof FerroPanelComponent>;
+export type TimeMachinePanelProps = ComponentProps<typeof TimeMachinePanelComponent>;
 export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
 export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;

package/dist/paint-editor/index.js

@@ -8,6 +8,7 @@ export { default as BrushEditor } from '../brushes/BrushEditor.svelte';
 export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as FerroPanel } from './FerroPanel.svelte';
+export { default as TimeMachinePanel } from './TimeMachinePanel.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.210.0",
+  "version": "0.211.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.282.0"
+    "@pixerate/editor": "0.283.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",