@pixerate/editor-svelte 0.217.0 → 0.218.0

package/dist/chart/ChartEditor.svelte

@@ -13,6 +13,8 @@
   interface Props {
     controller: ChartController;
     /** The settings sidebar (default `true`). */
+    /** House colours the inspector offers beside each series colour (e.g. from `useStyleSwatches`). */
+    swatches?: readonly string[];
     showInspector?: boolean;
     /** The data grid under the chart (default `true`). */
     showDataGrid?: boolean;
@@ -36,7 +38,7 @@
     onplaybackreveal?: () => void | Promise<void>;
   }
 
-  let { controller, showInspector = true, showDataGrid = true, showToolbar = true, pngOptions, height = 380, canvasProps = {}, class: className = '', playback, playbackId = 'chart', onplaybackreveal }: Props = $props();
+  let { controller, swatches, showInspector = true, showDataGrid = true, showToolbar = true, pngOptions, height = 380, canvasProps = {}, class: className = '', playback, playbackId = 'chart', onplaybackreveal }: Props = $props();
 
   // Agent playback in the chart's scene coordinates, so a director's drags (in the same presence
   // store) and the editor's own controls share one cursor. Controls outside the chart are mapped
@@ -139,7 +141,7 @@
     {#if showInspector}
       <!-- Side by side, the canvas sets the row's height and the inspector scrolls within it. -->
       <div class="relative w-full shrink-0 md:w-64">
-        <ChartInspector {controller} class="overflow-y-auto rounded-md border border-border p-3 md:absolute md:inset-0" />
+        <ChartInspector {controller} {swatches} class="overflow-y-auto rounded-md border border-border p-3 md:absolute md:inset-0" />
       </div>
     {/if}
   </div>

package/dist/chart/ChartEditor.svelte.d.ts

@@ -5,6 +5,8 @@ import ChartCanvas from './ChartCanvas.svelte';
 interface Props {
     controller: ChartController;
     /** The settings sidebar (default `true`). */
+    /** House colours the inspector offers beside each series colour (e.g. from `useStyleSwatches`). */
+    swatches?: readonly string[];
     showInspector?: boolean;
     /** The data grid under the chart (default `true`). */
     showDataGrid?: boolean;

package/dist/chart/ChartInspector.svelte

@@ -64,9 +64,11 @@
     /** Prefix for the inspector's element ids. */
     idPrefix?: string;
     class?: string;
+    /** House colours offered beside the series colour (e.g. from `useStyleSwatches`). */
+    swatches?: readonly string[];
   }
 
-  let { controller, sections, idPrefix = `pixerate-chart-${++nextId}`, class: className = '' }: Props = $props();
+  let { controller, sections, idPrefix = `pixerate-chart-${++nextId}`, class: className = '', swatches }: Props = $props();
 
   const view = chartStateOf(() => controller);
   const spec = $derived(view.current.spec);
@@ -689,6 +691,21 @@
           {/if}
         </div>
       </div>
+      {#if swatches && swatches.length > 0}
+        <div class="flex flex-wrap gap-1 pl-[5.5rem]" role="group" aria-label="House colours" data-option="series.swatches">
+          {#each swatches as color (color)}
+            <button
+              type="button"
+              title={color}
+              aria-label="Use {color}"
+              aria-pressed={chartColorInputValue(chartSeriesColor(spec, seriesIndex)) === chartColorInputValue(color)}
+              class="h-5 w-5 rounded border border-border"
+              style:background={color}
+              onclick={() => controller.updateSeries(series.id, { color })}
+            ></button>
+          {/each}
+        </div>
+      {/if}
       {#if cartesian}
         <div class="flex items-center gap-2">
           <label for="{idPrefix}-series-type" class="{chartLabelClass} w-20 shrink-0">Draw as</label>

package/dist/chart/ChartInspector.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     /** Prefix for the inspector's element ids. */
     idPrefix?: string;
     class?: string;
+    /** House colours offered beside the series colour (e.g. from `useStyleSwatches`). */
+    swatches?: readonly string[];
 }
 declare const ChartInspector: import("svelte").Component<Props, {}, "">;
 type ChartInspector = ReturnType<typeof ChartInspector>;

package/dist/style/style.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ResolvedStyle, StyleCheckReport, StyleChoiceGroup, StyleChoiceResult, StyleResolver } from "@pixerate/editor/tools";
+import type { ResolvedStyle, StyleCheckReport, StyleChoiceGroup, StyleChoiceResult, StyleResolver, StyleSwatch } from "@pixerate/editor/tools";
 type MaybeGetter<T> = T | (() => T);
 export interface SvelteStyle {
     /** The resolved house style for the domain, or `null` before the first resolve (or without a resolver) (reactive). */
@@ -39,4 +39,19 @@ export interface SvelteStyleChoices {
  * Call it during component initialisation. Parity with React's `useStyleChoices`.
  */
 export declare function useStyleChoices(styles: MaybeGetter<StyleResolver | null | undefined>, scope?: MaybeGetter<string | undefined>): SvelteStyleChoices;
+export interface SvelteStyleSwatches {
+    /** The house colours, in picker order (feed `ColorPicker`'s `swatches` or `ChartEditor`'s) (reactive). */
+    readonly colors: string[];
+    /** The same colours with what each is for (`primary`, `palette 2`, ...) (reactive). */
+    readonly swatches: StyleSwatch[];
+    /** The house fonts (reactive). */
+    readonly fonts: string[];
+    /** Why the last resolve failed, or `null` (reactive). */
+    readonly error: string | null;
+}
+/**
+ * Svelte 5 rune: the colours and fonts the house style offers for one domain, for pickers. The
+ * agent's `get_style` returns the same list. Parity with React's `useStyleSwatches`.
+ */
+export declare function useStyleSwatches(styles: MaybeGetter<StyleResolver | null | undefined>, domain: MaybeGetter<string>, scope?: MaybeGetter<string | undefined>): SvelteStyleSwatches;
 export {};

package/dist/style/style.svelte.js

@@ -1,3 +1,4 @@
+import { styleSwatches } from "@pixerate/editor/tools";
 const read = (value) => (typeof value === "function" ? value() : value);
 const message = (error) => (error instanceof Error ? error.message : String(error));
 /**
@@ -121,3 +122,30 @@ export function useStyleChoices(styles, scope) {
         },
     };
 }
+/**
+ * Svelte 5 rune: the colours and fonts the house style offers for one domain, for pickers. The
+ * agent's `get_style` returns the same list. Parity with React's `useStyleSwatches`.
+ */
+export function useStyleSwatches(styles, domain, scope) {
+    let style = $state.raw(null);
+    let error = $state.raw(null);
+    resolverTask(() => ({ styles: read(styles), input: { domain: read(domain), scope: scope === undefined ? undefined : read(scope) } }), (s, { domain: d, scope: sc }) => s.resolve(d, sc !== undefined ? { scope: sc } : {}), (result) => {
+        style = result.value;
+        error = result.error;
+    });
+    const swatches = $derived(style ? styleSwatches(style) : { colors: [], fonts: [] });
+    return {
+        get colors() {
+            return swatches.colors.map((c) => c.color);
+        },
+        get swatches() {
+            return swatches.colors;
+        },
+        get fonts() {
+            return swatches.fonts;
+        },
+        get error() {
+            return error;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.217.0",
+  "version": "0.218.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.299.0"
+    "@pixerate/editor": "0.301.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",