@pixerate/editor-svelte 0.217.1 → 0.219.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,5 @@
-import type { ResolvedStyle, StyleCheckReport, StyleChoiceGroup, StyleChoiceResult, StyleResolver } from "@pixerate/editor/tools";
+import type { Editor } from "@tiptap/core";
+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). */
@@ -22,7 +23,7 @@ export declare function useStyle(styles: MaybeGetter<StyleResolver | null | unde
  * the resolver notifies. Results of older runs that settle late are ignored. Feed `report` to
  * `<StyleFindings>`. Call it during component initialisation. Parity with React's `useStyleFindings`.
  */
-export declare function useStyleFindings(styles: MaybeGetter<StyleResolver | null | undefined>, domain: MaybeGetter<string>, subject: MaybeGetter<unknown>): SvelteStyleFindings;
+export declare function useStyleFindings(styles: MaybeGetter<StyleResolver | null | undefined>, domain: MaybeGetter<string>, subject: MaybeGetter<unknown>, scope?: MaybeGetter<string | undefined>): SvelteStyleFindings;
 export interface SvelteStyleChoices {
     /** The one-of-a-kind groups (a look, a theme) with the chosen skill and every option, or `null` before the first read (reactive). */
     readonly groups: StyleChoiceGroup[] | null;
@@ -39,4 +40,25 @@ 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;
+/**
+ * Svelte 5 rune: the document house-style findings for a TipTap editor (`rich-text` domain),
+ * re-checked after every edit. Feed `report` to `<StyleFindings>`. Call it during component
+ * initialisation. Parity with React's `useRichTextStyleFindings`.
+ */
+export declare function useRichTextStyleFindings(styles: MaybeGetter<StyleResolver | null | undefined>, editor: MaybeGetter<Editor | null | undefined>, scope?: MaybeGetter<string | undefined>): SvelteStyleFindings;
 export {};

package/dist/style/style.svelte.js

@@ -1,3 +1,5 @@
+import { styleSwatches } from "@pixerate/editor/tools";
+import { richTextStyleState } from "@pixerate/editor";
 const read = (value) => (typeof value === "function" ? value() : value);
 const message = (error) => (error instanceof Error ? error.message : String(error));
 /**
@@ -58,11 +60,11 @@ export function useStyle(styles, domain) {
  * the resolver notifies. Results of older runs that settle late are ignored. Feed `report` to
  * `<StyleFindings>`. Call it during component initialisation. Parity with React's `useStyleFindings`.
  */
-export function useStyleFindings(styles, domain, subject) {
+export function useStyleFindings(styles, domain, subject, scope) {
     let report = $state.raw(null);
     let style = $state.raw(null);
     let error = $state.raw(null);
-    resolverTask(() => ({ styles: read(styles), input: { domain: read(domain), value: read(subject) } }), (s, { domain: d, value }) => s.check(d, value), (result) => {
+    resolverTask(() => ({ styles: read(styles), input: { domain: read(domain), value: read(subject), scope: scope === undefined ? undefined : read(scope) } }), (s, { domain: d, value, scope: sc }) => s.check(d, value, sc !== undefined ? { scope: sc } : {}), (result) => {
         if (!result.value) {
             report = null;
             style = null;
@@ -121,3 +123,55 @@ 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;
+        },
+    };
+}
+/**
+ * Svelte 5 rune: the document house-style findings for a TipTap editor (`rich-text` domain),
+ * re-checked after every edit. Feed `report` to `<StyleFindings>`. Call it during component
+ * initialisation. Parity with React's `useRichTextStyleFindings`.
+ */
+export function useRichTextStyleFindings(styles, editor, scope) {
+    let doc = $state.raw(null);
+    $effect(() => {
+        const ed = read(editor);
+        if (!ed) {
+            doc = null;
+            return;
+        }
+        doc = ed.state.doc;
+        const onUpdate = () => {
+            doc = ed.state.doc;
+        };
+        ed.on("update", onUpdate);
+        return () => {
+            ed.off("update", onUpdate);
+        };
+    });
+    const subject = $derived(doc ? richTextStyleState(doc) : null);
+    return useStyleFindings(() => (subject ? read(styles) : null), "rich-text", () => subject, scope);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.217.1",
+  "version": "0.219.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.300.0"
+    "@pixerate/editor": "0.302.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",