@pixerate/editor-svelte 0.192.0 → 0.193.2

package/dist/paint-editor/PaintEditor.svelte

@@ -12,6 +12,7 @@
   import WetPanel from './WetPanel.svelte';
   import StickerPanel from './StickerPanel.svelte';
   import StrokePanel from './StrokePanel.svelte';
+  import PathStrokePanel from './PathStrokePanel.svelte';
   import PaintEffectsPanel from './PaintEffectsPanel.svelte';
   import { chip, paintEffectsProvider } from './paintEditorRune.svelte.js';
 
@@ -133,7 +134,7 @@
         {#if tab === 'color'}<ColorPanel {controller} />{/if}
         {#if tab === 'wet'}<WetPanel {controller} />{/if}
         {#if tab === 'paper'}<PaperPanel {controller} />{/if}
-        {#if tab === 'layers'}<PaintLayersPanel {controller} /><StrokePanel {controller} /><StickerPanel {controller} />{/if}
+        {#if tab === 'layers'}<PaintLayersPanel {controller} /><StrokePanel {controller} /><PathStrokePanel {controller} /><StickerPanel {controller} />{/if}
         {#if tab === 'effects' && effects.current}<PaintEffectsPanel {controller} />{/if}
       </div>
     </div>

package/dist/paint-editor/PathStrokePanel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { PATH_STROKE_TAPERS, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  let path = $state('');
+  let taper = $state(PATH_STROKE_TAPERS[0].id);
+  const pressure = $derived(PATH_STROKE_TAPERS.find((t) => t.id === taper)?.pressure);
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+</script>
+
+<!-- Brush a path: paste SVG path data (document pixels) and brush it on the active layer with the active brush and colour, with an even pressure or a taper. One undo step, as the stroke_path agent tool. -->
+<div class={`${panel} ${className}`} data-testid="path-stroke-panel">
+  <span class="font-medium text-slate-300">Brush a path</span>
+  <textarea aria-label="SVG path data" placeholder="M 40 200 C 120 40 280 40 360 200" bind:value={path} rows="2" class="w-full resize-y rounded bg-slate-800 px-1 py-0.5 font-mono text-[11px]"></textarea>
+  <div class="flex items-center gap-2">
+    <select aria-label="Pressure along the path" bind:value={taper} class="rounded bg-slate-800 px-1 py-0.5">
+      {#each PATH_STROKE_TAPERS as t (t.id)}<option value={t.id}>{t.label}</option>{/each}
+    </select>
+    <button type="button" class={button} disabled={!path.trim() || editor.current.stroking} onclick={() => run(() => controller.strokePath({ path, ...(pressure ? { pressure } : {}) }))}>Brush path</button>
+  </div>
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

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

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

@@ -12,6 +12,7 @@ import type WetPanelComponent from './WetPanel.svelte';
 import type StickerPanelComponent from './StickerPanel.svelte';
 import type StickerPickerComponent from './StickerPicker.svelte';
 import type StrokePanelComponent from './StrokePanel.svelte';
+import type PathStrokePanelComponent from './PathStrokePanel.svelte';
 import type PaintEffectsPanelComponent from './PaintEffectsPanel.svelte';
 import type PaintGradientEditorComponent from './PaintGradientEditor.svelte';
 export { default as PaintEditor } from './PaintEditor.svelte';
@@ -27,6 +28,7 @@ export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
 export { default as StickerPicker } from './StickerPicker.svelte';
 export { default as StrokePanel } from './StrokePanel.svelte';
+export { default as PathStrokePanel } from './PathStrokePanel.svelte';
 export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
@@ -47,5 +49,6 @@ export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;
 export type StickerPanelProps = ComponentProps<typeof StickerPanelComponent>;
 export type StickerPickerProps = ComponentProps<typeof StickerPickerComponent>;
 export type StrokePanelProps = ComponentProps<typeof StrokePanelComponent>;
+export type PathStrokePanelProps = ComponentProps<typeof PathStrokePanelComponent>;
 export type PaintEffectsPanelProps = ComponentProps<typeof PaintEffectsPanelComponent>;
 export type PaintGradientEditorProps = ComponentProps<typeof PaintGradientEditorComponent>;

package/dist/paint-editor/index.js

@@ -12,6 +12,7 @@ export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
 export { default as StickerPicker } from './StickerPicker.svelte';
 export { default as StrokePanel } from './StrokePanel.svelte';
+export { default as PathStrokePanel } from './PathStrokePanel.svelte';
 export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';

package/package.json

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