@pixerate/editor-svelte 0.43.0 → 0.44.1

package/dist/chart-node/ChartNodeView.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { ChartNodeViewState } from '@pixerate/editor';
+  import type { ChartTheme } from '@pixerate/editor/chart';
+  import ChartCanvas from '../chart/ChartCanvas.svelte';
+  import ChartDataGrid from '../chart/ChartDataGrid.svelte';
+  import ChartInspector from '../chart/ChartInspector.svelte';
+  import { chartButtonClass } from '../chart/styles.js';
+
+  interface Props {
+    /** What the editor's `chart` node passes (see `ChartNodeViewState`). */
+    view: ChartNodeViewState;
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+  }
+
+  let { view, theme, showDataGrid = true }: Props = $props();
+
+  const clickable = $derived(view.editable && !view.editing);
+
+  function open() {
+    if (clickable) view.setEditing(true);
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    if (view.editing && event.key === 'Escape') {
+      event.stopPropagation();
+      view.setEditing(false);
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="not-prose my-2 rounded-md border bg-background p-1 {view.selected ? 'border-primary ring-1 ring-primary' : 'border-border'}"
+  data-chart-node-view=""
+  data-editing={view.editing ? '' : undefined}
+  {onkeydown}
+>
+  {#if view.editing}
+    <div class="mb-1 flex items-center justify-between gap-2 px-1" data-chart-node-toolbar="">
+      <span class="text-xs text-muted-foreground">Editing chart</span>
+      <button type="button" class={chartButtonClass} data-action="done" onclick={() => view.setEditing(false)}>Done</button>
+    </div>
+  {/if}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class={clickable ? 'cursor-pointer' : undefined} onclick={open} title={clickable ? 'Click to edit the chart' : undefined} data-chart-node-canvas="">
+    <ChartCanvas controller={view.controller} width={view.width ?? 640} height={view.height} responsive={view.width === null} editable={view.editing} {theme} />
+  </div>
+  {#if view.editing}
+    <!-- Wraps by the document's width, not the viewport's: side by side when there is room. -->
+    <div class="mt-2 flex flex-wrap items-start gap-2" data-chart-node-panel="">
+      {#if showDataGrid}
+        <div class="min-w-0 flex-[1_1_20rem] overflow-x-auto">
+          <ChartDataGrid controller={view.controller} />
+        </div>
+      {/if}
+      <ChartInspector controller={view.controller} class="max-h-96 min-w-0 flex-[1_1_16rem] overflow-y-auto rounded-md border border-border p-3" />
+    </div>
+  {/if}
+</div>

package/dist/chart-node/ChartNodeView.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ChartNodeViewState } from '@pixerate/editor';
+import type { ChartTheme } from '@pixerate/editor/chart';
+interface Props {
+    /** What the editor's `chart` node passes (see `ChartNodeViewState`). */
+    view: ChartNodeViewState;
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+}
+declare const ChartNodeView: import("svelte").Component<Props, {}, "">;
+type ChartNodeView = ReturnType<typeof ChartNodeView>;
+export default ChartNodeView;
+//# sourceMappingURL=ChartNodeView.svelte.d.ts.map

package/dist/chart-node/ChartNodeView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartNodeView.svelte.d.ts","sourceRoot":"","sources":["../../src/chart-node/ChartNodeView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOvD,UAAU,KAAK;IACb,wEAAwE;IACxE,IAAI,EAAE,kBAAkB,CAAC;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAqDH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/chart-node/createChartNodeView.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Component } from "svelte";
+import type { ChartNodeViewMount, ChartNodeViewState } from "@pixerate/editor";
+import type { ChartTheme } from "@pixerate/editor/chart";
+export interface SvelteChartNodeViewOptions {
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+    /** Draw something else for each chart (default `ChartNodeView`; it receives `view`). */
+    component?: Component<{
+        view: ChartNodeViewState;
+        theme?: Partial<ChartTheme>;
+        showDataGrid?: boolean;
+    }>;
+}
+/**
+ * The `nodeView` for the core `chart` node, mounting `ChartNodeView` into each chart:
+ * `createRichTextPreset({ chart: { nodeView: createSvelteChartNodeView() } })`.
+ */
+export declare function createSvelteChartNodeView(options?: SvelteChartNodeViewOptions): ChartNodeViewMount;
+//# sourceMappingURL=createChartNodeView.svelte.d.ts.map

package/dist/chart-node/createChartNodeView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createChartNodeView.svelte.d.ts","sourceRoot":"","sources":["../../src/chart-node/createChartNodeView.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGzD,MAAM,WAAW,0BAA0B;IACzC,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wFAAwF;IACxF,SAAS,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,kBAAkB,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1G;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,0BAA+B,GAAG,kBAAkB,CAqBtG"}

package/dist/chart-node/createChartNodeView.svelte.js

@@ -0,0 +1,28 @@
+import { mount, unmount } from "svelte";
+import ChartNodeView from "./ChartNodeView.svelte";
+/**
+ * The `nodeView` for the core `chart` node, mounting `ChartNodeView` into each chart:
+ * `createRichTextPreset({ chart: { nodeView: createSvelteChartNodeView() } })`.
+ */
+export function createSvelteChartNodeView(options = {}) {
+    const { component = ChartNodeView, theme, showDataGrid } = options;
+    return (dom, state) => {
+        let current = $state.raw(state);
+        const instance = mount(component, {
+            target: dom,
+            props: {
+                get view() {
+                    return current;
+                },
+                theme,
+                showDataGrid,
+            },
+        });
+        return {
+            update: (next) => {
+                current = next;
+            },
+            destroy: () => void unmount(instance),
+        };
+    };
+}

package/dist/chart-node/index.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from "svelte";
+import type ChartNodeViewComponent from "./ChartNodeView.svelte";
+export { default as ChartNodeView } from "./ChartNodeView.svelte";
+export * from "./createChartNodeView.svelte.js";
+export type ChartNodeViewProps = ComponentProps<typeof ChartNodeViewComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/chart-node/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chart-node/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,cAAc,iCAAiC,CAAC;AAEhD,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/chart-node/index.js

@@ -0,0 +1,2 @@
+export { default as ChartNodeView } from "./ChartNodeView.svelte";
+export * from "./createChartNodeView.svelte.js";

package/dist/index.d.ts

@@ -45,4 +45,5 @@ export * from "./persistence/index.js";
 export * from "./generation/index.js";
 export * from "./find-replace/index.js";
 export * from "./tables/index.js";
+export * from "./chart-node/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -25,3 +25,4 @@ export * from "./persistence/index.js";
 export * from "./generation/index.js";
 export * from "./find-replace/index.js";
 export * from "./tables/index.js";
+export * from "./chart-node/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.43.0",
+  "version": "0.44.1",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -115,7 +115,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.47.0"
+    "@pixerate/editor": "0.49.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",