@pixerate/editor-svelte 0.23.0 → 0.25.0

package/dist/tokens/TokensPanel.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">
+  import {
+    TOKEN_TYPES,
+    TokenError,
+    getCollectionVariables,
+    getTokenVariable,
+    isTokenAlias,
+    resolveTokenInMode,
+    type TokenMode,
+    type TokenState,
+    type TokenStore,
+    type TokenType,
+    type TokenVariable
+  } from '@pixerate/editor/tokens';
+  import { untrack } from 'svelte';
+  import TokenSwatch from './TokenSwatch.svelte';
+
+  interface Props {
+    store: TokenStore;
+    /** Selected collection (controlled); defaults to the first. */
+    collectionId?: string;
+    oncollectionchange?: (collectionId: string) => void;
+    /** Called with refused edits (also shown in the panel). */
+    onerror?: (error: Error) => void;
+    class?: string;
+  }
+
+  let { store, collectionId, oncollectionchange, onerror, class: className = '' }: Props = $props();
+
+  // Re-read the store on every change; follows a replaced `store` prop too.
+  let version = $state(0);
+  const tokenState: TokenState = $derived((void version, store.getState()));
+  $effect(() => {
+    const current = store;
+    return untrack(() =>
+      current.subscribe(() => {
+        version += 1;
+      })
+    );
+  });
+
+  let ownSelection = $state<string | undefined>(undefined);
+  let error = $state<string | null>(null);
+  let newCollection = $state('');
+  let newMode = $state('');
+  let newName = $state('');
+  let newType = $state<TokenType>('color');
+
+  const collection = $derived(
+    tokenState.collections.find((c) => c.id === (collectionId ?? ownSelection)) ?? tokenState.collections[0]
+  );
+  const variables = $derived(collection ? getCollectionVariables(tokenState, collection.id) : []);
+  const canUndo = $derived((void version, store.canUndo()));
+  const canRedo = $derived((void version, store.canRedo()));
+
+  const input =
+    'w-full min-w-0 rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary';
+  const button = 'rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40';
+
+  function select(id: string) {
+    ownSelection = id;
+    oncollectionchange?.(id);
+  }
+
+  function run(fn: () => void): boolean {
+    try {
+      fn();
+      error = null;
+      return true;
+    } catch (e) {
+      const err = e as Error;
+      error = err instanceof TokenError ? err.message : String(err);
+      onerror?.(err);
+      return false;
+    }
+  }
+
+  /** Commit-on-blur handlers for an input showing `value`; refused edits reset the input. */
+  function committer(value: string, apply: (next: string) => void) {
+    return {
+      onblur: (e: FocusEvent) => {
+        const el = e.currentTarget as HTMLInputElement;
+        if (el.value === value) return;
+        if (!run(() => apply(el.value))) el.value = value;
+      },
+      onkeydown: (e: KeyboardEvent) => {
+        const el = e.currentTarget as HTMLInputElement;
+        if (e.key === 'Enter') el.blur();
+        if (e.key === 'Escape') {
+          el.value = value;
+          el.blur();
+        }
+      }
+    };
+  }
+
+  function aliasCandidates(variable: TokenVariable) {
+    return tokenState.variables.filter((v) => v.type === variable.type && v.id !== variable.id);
+  }
+
+  function setAlias(variable: TokenVariable, mode: TokenMode, target: string) {
+    const resolved = resolveTokenInMode(tokenState, variable.id, mode.id);
+    run(() => store.setValue(variable.id, target ? { alias: target } : resolved, mode.id));
+  }
+
+  function typeIcon(type: TokenType) {
+    return type === 'color' ? '◐' : type === 'number' ? '#' : type === 'string' ? 'T' : '⊘';
+  }
+</script>
+
+<div data-tokens-panel="" class="flex flex-col gap-2 text-xs text-foreground {className}">
+  <div class="flex flex-wrap items-center gap-2">
+    {#if tokenState.collections.length > 0}
+      <select
+        aria-label="Collection"
+        class="rounded border border-border bg-background px-1.5 py-0.5 text-xs"
+        value={collection?.id ?? ''}
+        onchange={(e) => select(e.currentTarget.value)}
+      >
+        {#each tokenState.collections as c (c.id)}
+          <option value={c.id}>{c.name}</option>
+        {/each}
+      </select>
+    {/if}
+    <form
+      class="flex items-center gap-1"
+      onsubmit={(e) => {
+        e.preventDefault();
+        run(() => {
+          const created = store.createCollection(newCollection, ['Light', 'Dark']);
+          newCollection = '';
+          select(created.id);
+        });
+      }}
+    >
+      <input class={input} placeholder="New collection" aria-label="New collection name" bind:value={newCollection} />
+      <button type="submit" class={button} disabled={!newCollection.trim()}>Add</button>
+    </form>
+    <span class="ml-auto flex gap-1">
+      <button type="button" class={button} disabled={!canUndo} onclick={() => store.undo()} aria-label="Undo token edit">Undo</button>
+      <button type="button" class={button} disabled={!canRedo} onclick={() => store.redo()} aria-label="Redo token edit">Redo</button>
+    </span>
+  </div>
+
+  {#if error}
+    <div role="alert" class="rounded border border-red-500/40 bg-red-500/10 px-2 py-1 text-red-500">{error}</div>
+  {/if}
+
+  {#if collection}
+    {@const c = collection}
+    <div class="flex items-center gap-1">
+      <input class={input} value={c.name} aria-label="Collection name" {...committer(c.name, (name) => store.renameCollection(c.id, name))} />
+      <button type="button" class={button} onclick={() => run(() => store.deleteCollection(c.id))} aria-label="Delete collection {c.name}">
+        Delete
+      </button>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="w-full border-collapse">
+        <thead>
+          <tr class="border-b border-border text-left text-muted-foreground">
+            <th class="px-1 py-1 font-medium">Name</th>
+            {#each c.modes as mode, index (mode.id)}
+              <th class="px-1 py-1 font-medium" data-mode-id={mode.id}>
+                <div class="flex items-center gap-1">
+                  <input
+                    class={input}
+                    value={mode.name}
+                    aria-label="Mode {mode.name} name"
+                    {...committer(mode.name, (name) => store.renameMode(c.id, mode.id, name))}
+                  />
+                  {#if index === 0}
+                    <span title="Default mode" class="text-[10px] uppercase">default</span>
+                  {:else}
+                    <button
+                      type="button"
+                      class="px-1 hover:text-foreground"
+                      title="Make default"
+                      aria-label="Make {mode.name} the default mode"
+                      onclick={() => run(() => store.setDefaultMode(c.id, mode.id))}>★</button
+                    >
+                  {/if}
+                  {#if c.modes.length > 1}
+                    <button
+                      type="button"
+                      class="px-1 hover:text-foreground"
+                      aria-label="Remove mode {mode.name}"
+                      onclick={() => run(() => store.removeMode(c.id, mode.id))}>×</button
+                    >
+                  {/if}
+                </div>
+              </th>
+            {/each}
+            <th class="px-1 py-1">
+              <form
+                class="flex items-center gap-1"
+                onsubmit={(e) => {
+                  e.preventDefault();
+                  run(() => {
+                    store.addMode(c.id, newMode);
+                    newMode = '';
+                  });
+                }}
+              >
+                <input class={input} placeholder="Mode" aria-label="New mode name" bind:value={newMode} />
+                <button type="submit" class={button} disabled={!newMode.trim()} aria-label="Add mode">+</button>
+              </form>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each variables as variable (variable.id)}
+            <tr class="border-b border-border/50" data-token-row={variable.id}>
+              <td class="px-1 py-1">
+                <div class="flex items-center gap-1">
+                  <span class="w-4 text-center text-muted-foreground" title={variable.type}>{typeIcon(variable.type)}</span>
+                  <input
+                    class={input}
+                    value={variable.name}
+                    aria-label="Variable {variable.name} name"
+                    {...committer(variable.name, (name) => store.renameVariable(variable.id, name))}
+                  />
+                </div>
+              </td>
+              {#each c.modes as mode (mode.id)}
+                {@const value = variable.valuesByMode[mode.id]}
+                {@const alias = isTokenAlias(value) ? value.alias : ''}
+                {@const resolved = resolveTokenInMode(tokenState, variable.id, mode.id)}
+                <td class="px-1 py-1 align-middle" data-variable-id={variable.id} data-mode-id={mode.id}>
+                  <div class="flex items-center gap-1">
+                    {#if alias}
+                      <span class="flex min-w-0 flex-1 items-center gap-1 text-xs" data-token-alias={alias}>
+                        {#if variable.type === 'color' && resolved !== undefined}<TokenSwatch color={String(resolved)} />{/if}
+                        <span class="truncate">→ {getTokenVariable(tokenState, alias)?.name ?? alias}</span>
+                      </span>
+                    {:else}
+                      <span class="min-w-0 flex-1">
+                        {#if variable.type === 'color'}
+                          <span class="flex items-center gap-1">
+                            <label class="relative">
+                              <TokenSwatch color={String(value)} />
+                              <input
+                                type="color"
+                                aria-label="{variable.name} colour"
+                                class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                                value={String(value).slice(0, 7)}
+                                onchange={(e) => run(() => store.setValue(variable.id, e.currentTarget.value + String(value).slice(7), mode.id))}
+                              />
+                            </label>
+                            <input
+                              class={input}
+                              value={String(value)}
+                              aria-label="{variable.name} value"
+                              {...committer(String(value), (next) => store.setValue(variable.id, next, mode.id))}
+                            />
+                          </span>
+                        {:else if variable.type === 'boolean'}
+                          <input
+                            type="checkbox"
+                            aria-label="{variable.name} value"
+                            checked={value === true}
+                            onchange={(e) => run(() => store.setValue(variable.id, e.currentTarget.checked, mode.id))}
+                          />
+                        {:else}
+                          <input
+                            class={input}
+                            value={String(value)}
+                            inputmode={variable.type === 'number' ? 'decimal' : undefined}
+                            aria-label="{variable.name} value"
+                            {...committer(String(value), (next) => store.setValue(variable.id, next, mode.id))}
+                          />
+                        {/if}
+                      </span>
+                    {/if}
+                    <select
+                      aria-label="{variable.name} alias in {mode.name}"
+                      class="w-5 shrink-0 rounded border border-border bg-background text-xs"
+                      title="Alias"
+                      value={alias}
+                      onchange={(e) => setAlias(variable, mode, e.currentTarget.value)}
+                    >
+                      <option value="">Value</option>
+                      {#each aliasCandidates(variable) as candidate (candidate.id)}
+                        <option value={candidate.id}>→ {candidate.name}</option>
+                      {/each}
+                    </select>
+                  </div>
+                </td>
+              {/each}
+              <td class="px-1 py-1 text-right">
+                <button
+                  type="button"
+                  class="px-1 text-muted-foreground hover:text-foreground"
+                  aria-label="Delete variable {variable.name}"
+                  onclick={() => run(() => store.deleteVariables(variable.id))}>×</button
+                >
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+    <form
+      class="flex items-center gap-1"
+      onsubmit={(e) => {
+        e.preventDefault();
+        run(() => {
+          store.createVariable({ collectionId: c.id, name: newName, type: newType });
+          newName = '';
+        });
+      }}
+    >
+      <input class={input} placeholder="color/bg" aria-label="New variable name" bind:value={newName} />
+      <select aria-label="New variable type" class="rounded border border-border bg-background px-1 py-0.5 text-xs" bind:value={newType}>
+        {#each TOKEN_TYPES as t (t)}
+          <option value={t}>{t}</option>
+        {/each}
+      </select>
+      <button type="submit" class={button} disabled={!newName.trim()}>Add variable</button>
+    </form>
+  {:else}
+    <p class="text-muted-foreground">No collections yet.</p>
+  {/if}
+</div>

package/dist/tokens/TokensPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type TokenStore } from '@pixerate/editor/tokens';
+interface Props {
+    store: TokenStore;
+    /** Selected collection (controlled); defaults to the first. */
+    collectionId?: string;
+    oncollectionchange?: (collectionId: string) => void;
+    /** Called with refused edits (also shown in the panel). */
+    onerror?: (error: Error) => void;
+    class?: string;
+}
+declare const TokensPanel: import("svelte").Component<Props, {}, "">;
+type TokensPanel = ReturnType<typeof TokensPanel>;
+export default TokensPanel;
+//# sourceMappingURL=TokensPanel.svelte.d.ts.map

package/dist/tokens/TokensPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokensPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/tokens/TokensPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,KAAK,UAAU,EAGhB,MAAM,yBAAyB,CAAC;AAKjC,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8OH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/tokens/createTokens.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type TokenCssOptions, type TokenModeContext, type TokenState, type TokenStore } from "@pixerate/editor/tokens";
+export interface CreateTokensOptions {
+    /** Modes for `cssVariables` (collection id → mode id), or a getter for reactive modes. */
+    modes?: TokenModeContext | (() => TokenModeContext | undefined);
+    /** Options for `css` and `cssVariables` (prefix, attribute, …). */
+    css?: TokenCssOptions;
+}
+export interface SvelteTokens {
+    readonly store: TokenStore;
+    /** The store's state (reactive). */
+    readonly state: TokenState;
+    /** Resolved custom properties for `modes` (reactive), e.g. for `style:` directives. */
+    readonly cssVariables: Record<string, string>;
+    /** `cssVariables` as a `style` attribute string (reactive). */
+    readonly style: string;
+    /** A stylesheet with every mode (reactive). */
+    readonly css: string;
+    readonly canUndo: boolean;
+    readonly canRedo: boolean;
+    undo(): void;
+    redo(): void;
+    /** Stops listening to the store. */
+    destroy(): void;
+}
+/**
+ * Svelte 5 rune: subscribes to a `TokenStore` and exposes its state plus CSS custom properties
+ * for app theming (`<div style={tokens.style}>`, or inject `tokens.css` and switch the
+ * `data-mode` attribute).
+ */
+export declare function createTokens(store: TokenStore, options?: CreateTokensOptions): SvelteTokens;
+//# sourceMappingURL=createTokens.svelte.d.ts.map

package/dist/tokens/createTokens.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTokens.svelte.d.ts","sourceRoot":"","sources":["../../src/tokens/createTokens.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAmB;IAClC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC,CAAC;IAChE,mEAAmE;IACnE,GAAG,CAAC,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,uFAAuF;IACvF,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,oCAAoC;IACpC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,GAAE,mBAAwB,GAAG,YAAY,CAoC/F"}

package/dist/tokens/createTokens.svelte.js

@@ -0,0 +1,43 @@
+import { exportTokensCss, getTokenCssVariables, } from "@pixerate/editor/tokens";
+/**
+ * Svelte 5 rune: subscribes to a `TokenStore` and exposes its state plus CSS custom properties
+ * for app theming (`<div style={tokens.style}>`, or inject `tokens.css` and switch the
+ * `data-mode` attribute).
+ */
+export function createTokens(store, options = {}) {
+    let state = $state.raw(store.getState());
+    const unsubscribe = store.subscribe((event) => {
+        state = event.state;
+    });
+    const modes = () => (typeof options.modes === "function" ? options.modes() : options.modes);
+    const cssVariables = $derived(getTokenCssVariables(state, modes(), options.css));
+    const css = $derived(exportTokensCss(state, options.css));
+    return {
+        store,
+        get state() {
+            return state;
+        },
+        get cssVariables() {
+            return cssVariables;
+        },
+        get style() {
+            return Object.entries(cssVariables)
+                .map(([name, value]) => `${name}: ${value}`)
+                .join("; ");
+        },
+        get css() {
+            return css;
+        },
+        get canUndo() {
+            void state;
+            return store.canUndo();
+        },
+        get canRedo() {
+            void state;
+            return store.canRedo();
+        },
+        undo: () => void store.undo(),
+        redo: () => void store.redo(),
+        destroy: unsubscribe,
+    };
+}

package/dist/tokens/index.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "svelte";
+import type TokensPanelComponent from "./TokensPanel.svelte";
+export { default as TokensPanel } from "./TokensPanel.svelte";
+export { default as TokenSwatch } from "./TokenSwatch.svelte";
+export * from "./createTokens.svelte.js";
+export type TokensPanelProps = ComponentProps<typeof TokensPanelComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,cAAc,0BAA0B,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/tokens/index.js

@@ -0,0 +1,3 @@
+export { default as TokensPanel } from "./TokensPanel.svelte";
+export { default as TokenSwatch } from "./TokenSwatch.svelte";
+export * from "./createTokens.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -48,6 +48,11 @@
       "svelte": "./dist/generation/index.js",
       "default": "./dist/generation/index.js"
     },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "svelte": "./dist/tokens/index.js",
+      "default": "./dist/tokens/index.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -69,6 +74,9 @@
       ],
       "generation": [
         "./dist/generation/index.d.ts"
+      ],
+      "tokens": [
+        "./dist/tokens/index.d.ts"
       ]
     }
   },
@@ -83,7 +91,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.24.0"
+    "@pixerate/editor": "0.26.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",