@pixerate/editor-svelte 0.118.0 → 0.119.0

package/dist/effects/EffectParameters.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { effectFieldValue, effectParameterFields, type EffectDescription } from '@pixerate/editor/effects';
+  import { effectFieldValue, effectParameterFields, type EffectDescription, type EffectFieldOptions } from '@pixerate/editor/effects';
   import { parameterLabel, parameterValuesEqual, type ParameterValue } from '@pixerate/editor/parameters';
   import ParameterFieldControl from '../parameters/ParameterFieldControl.svelte';
 
@@ -23,12 +23,14 @@
     onpresetname?: (name: string) => void;
     /** Optional addon rendered next to the control label (e.g. keyframe toggle button). */
     addon?: import('svelte').Snippet<[string]>;
+    /** Families offered by font controls (`format: "font"`); default the system font catalog. */
+    fonts?: EffectFieldOptions['fonts'];
     disabled?: boolean;
     class?: string;
   }
 
-  let { description, values, onchange, onreset, keyframed, onpreset, onpresetname, addon, disabled = false, class: className = '' }: Props = $props();
-  const fields = $derived(effectParameterFields(description));
+  let { description, values, onchange, onreset, keyframed, onpreset, onpresetname, addon, fonts, disabled = false, class: className = '' }: Props = $props();
+  const fields = $derived(effectParameterFields(description, { fonts }));
   const idBase = `fx-${Math.random().toString(36).slice(2, 8)}`;
   let gesture: string | null = null;
   let count = 0;

package/dist/effects/EffectParameters.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type EffectDescription } from '@pixerate/editor/effects';
+import { type EffectDescription, type EffectFieldOptions } from '@pixerate/editor/effects';
 import { type ParameterValue } from '@pixerate/editor/parameters';
 interface Props {
     /** The effect's description (`describe`). */
@@ -20,6 +20,8 @@ interface Props {
     onpresetname?: (name: string) => void;
     /** Optional addon rendered next to the control label (e.g. keyframe toggle button). */
     addon?: import('svelte').Snippet<[string]>;
+    /** Families offered by font controls (`format: "font"`); default the system font catalog. */
+    fonts?: EffectFieldOptions['fonts'];
     disabled?: boolean;
     class?: string;
 }

package/dist/typography/FontPicker.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+  import { onDestroy, untrack, type Snippet } from 'svelte';
+  import {
+    FONT_CATEGORIES,
+    FONT_CATEGORY_LABELS,
+    FontPickerModel,
+    type FontCategory,
+    type FontProvider,
+    type FontSpec,
+    type FontStyle,
+    type FontSummary
+  } from '@pixerate/editor/typography';
+  import { fontPickerOf } from './picker.svelte.js';
+
+  interface Props {
+    /** The selected font (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called when the user (or an agent through the model's tools) picks a different font, weight or style. */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    /** Where fonts come from (fetched on mount). */
+    provider?: FontProvider;
+    /** A fixed list of fonts. */
+    fonts?: readonly FontSummary[];
+    /** Text for the live preview. */
+    previewText?: string;
+    /** Show the live preview (default true). */
+    showPreview?: boolean;
+    /** Show the category filter (default true). */
+    showCategories?: boolean;
+    /** Show the weight and style selects (default true). */
+    showWeight?: boolean;
+    /** Most options rendered at once (default 200); search to reach the rest. */
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Font picker"). */
+    'aria-label'?: string;
+    /** Extra controls rendered above the preview (used by `TypographyControl`). */
+    children?: Snippet;
+  }
+
+  let {
+    value,
+    onchange,
+    onChange,
+    model: external,
+    provider,
+    fonts,
+    previewText,
+    showPreview = true,
+    showCategories = true,
+    showWeight = true,
+    maxResults = 200,
+    disabled = false,
+    class: klass,
+    className,
+    id,
+    'aria-label': ariaLabel = 'Font picker',
+    children
+  }: Props = $props();
+
+  const model = untrack(() => external ?? new FontPickerModel({ provider, fonts, value, previewText }));
+  const picker = fontPickerOf(model);
+  const offValue = model.onValueChange((v) => (onchange ?? onChange)?.(v));
+  onDestroy(() => {
+    picker.destroy();
+    offValue();
+  });
+  if (!untrack(() => external) && untrack(() => provider)) void model.refresh();
+
+  $effect(() => {
+    const v = value;
+    if (v) untrack(() => model.setValue(v));
+  });
+
+  const s = $derived(picker.state);
+  const shown = $derived(s.results.slice(0, maxResults));
+  // The model's getters read its current state; reading `s` first makes them update with it.
+  const css = $derived.by(() => {
+    void s;
+    return model.css;
+  });
+  const weights = $derived.by(() => {
+    void s;
+    return model.availableWeights;
+  });
+  const styles = $derived.by(() => {
+    void s;
+    return model.availableStyles;
+  });
+  const status = $derived(
+    s.loading
+      ? 'Loading fonts…'
+      : s.error
+        ? `Could not load fonts: ${s.error}`
+        : s.loadStatus[s.value.family.toLowerCase()] === 'failed'
+          ? `${s.value.family} could not be loaded; a fallback is shown.`
+          : ''
+  );
+
+  const baseId = `pixerate-font-picker-${Math.random().toString(36).slice(2, 10)}`;
+  const listId = `${baseId}-list`;
+  const optionId = (i: number) => `${baseId}-opt-${i}`;
+  let listEl: HTMLUListElement | undefined = $state();
+
+  $effect(() => {
+    const i = s.highlighted;
+    if (i < 0) return;
+    untrack(() => listEl?.ownerDocument.getElementById(optionId(i))?.scrollIntoView?.({ block: 'nearest' }));
+  });
+
+  function onKeydown(e: KeyboardEvent) {
+    if (model.handleKey(e.key)) e.preventDefault();
+  }
+
+  const field =
+    'box-sizing:border-box;width:100%;padding:5px 8px;border-radius:6px;border:1px solid var(--pixerate-font-picker-border, #3a4152);background:var(--pixerate-font-picker-field-bg, #151922);color:inherit;font:inherit;';
+</script>
+
+<div
+  {id}
+  role="group"
+  aria-label={ariaLabel}
+  aria-disabled={disabled || undefined}
+  class={klass ?? className}
+  style="box-sizing:border-box;width:var(--pixerate-font-picker-width, 280px);border-radius:var(--pixerate-font-picker-radius, 8px);background:var(--pixerate-font-picker-bg, #1f2430);color:var(--pixerate-font-picker-fg, #f0f2f5);padding:12px;display:flex;flex-direction:column;gap:8px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:12px;opacity:{disabled
+    ? 0.6
+    : 1};pointer-events:{disabled ? 'none' : 'auto'};"
+>
+  <div style="display:flex;gap:6px;">
+    <input
+      type="text"
+      role="combobox"
+      aria-label="Search fonts"
+      aria-expanded="true"
+      aria-controls={listId}
+      aria-autocomplete="list"
+      aria-activedescendant={s.highlighted >= 0 && s.highlighted < shown.length ? optionId(s.highlighted) : undefined}
+      placeholder="Search fonts"
+      value={s.query}
+      {disabled}
+      oninput={(e) => model.setQuery((e.currentTarget as HTMLInputElement).value)}
+      onkeydown={onKeydown}
+      style={field}
+    />
+    {#if showCategories}
+      <select
+        aria-label="Font category"
+        value={s.category}
+        {disabled}
+        onchange={(e) => model.setCategory((e.currentTarget as HTMLSelectElement).value as FontCategory | 'all')}
+        style="{field}width:auto;"
+      >
+        {#each ['all', ...FONT_CATEGORIES] as c (c)}
+          <option value={c}>{FONT_CATEGORY_LABELS[c as FontCategory | 'all']}</option>
+        {/each}
+      </select>
+    {/if}
+  </div>
+
+  <ul
+    bind:this={listEl}
+    id={listId}
+    role="listbox"
+    aria-label="Fonts"
+    style="list-style:none;margin:0;padding:2px;max-height:var(--pixerate-font-picker-list-height, 180px);overflow-y:auto;border-radius:6px;border:1px solid var(--pixerate-font-picker-border, #3a4152);"
+  >
+    {#if shown.length === 0}
+      <li role="presentation" style="padding:6px 8px;opacity:0.7;">{s.loading ? 'Loading…' : 'No fonts match'}</li>
+    {/if}
+    {#each shown as font, i (font.family)}
+      {@const selected = font.family.toLowerCase() === s.value.family.toLowerCase()}
+      {@const highlighted = i === s.highlighted}
+      <li
+        id={optionId(i)}
+        role="option"
+        tabindex="-1"
+        aria-selected={selected}
+        data-highlighted={highlighted || undefined}
+        onmousedown={(e) => e.preventDefault()}
+        onmouseenter={() => model.setHighlight(i)}
+        onclick={() => model.selectFamily(font.family)}
+        onkeydown={() => {}}
+        style="display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 8px;border-radius:4px;cursor:pointer;background:{selected
+          ? 'var(--pixerate-font-picker-selected, #2f3b57)'
+          : highlighted
+            ? 'var(--pixerate-font-picker-hover, #2a3040)'
+            : 'transparent'};"
+      >
+        <span style="font-family:{model.familyCss(font)};font-size:14px;">{font.family}</span>
+        <span style="opacity:0.6;font-size:10px;">{FONT_CATEGORY_LABELS[font.category]}</span>
+      </li>
+    {/each}
+  </ul>
+
+  {#if showWeight}
+    <div style="display:flex;gap:6px;">
+      <select
+        aria-label="Font weight"
+        value={s.value.weight}
+        {disabled}
+        onchange={(e) => model.setWeight(Number((e.currentTarget as HTMLSelectElement).value))}
+        style={field}
+      >
+        {#each weights as w (w)}
+          <option value={w}>{w}</option>
+        {/each}
+      </select>
+      <select
+        aria-label="Font style"
+        value={s.value.style}
+        {disabled}
+        onchange={(e) => model.setStyle((e.currentTarget as HTMLSelectElement).value as FontStyle)}
+        style={field}
+      >
+        {#each styles as st (st)}
+          <option value={st}>{st}</option>
+        {/each}
+      </select>
+    </div>
+  {/if}
+
+  {@render children?.()}
+
+  {#if showPreview}
+    <div
+      aria-label="Font preview"
+      style="font-family:{css.fontFamily};font-weight:{css.fontWeight};font-style:{css.fontStyle};font-size:{Math.min(
+        s.value.size,
+        48
+      )}px;line-height:{css.lineHeight};letter-spacing:{css.letterSpacing};padding:6px 4px;overflow-wrap:anywhere;"
+    >
+      {s.previewText}
+    </div>
+  {/if}
+
+  <div role="status" aria-live="polite" style="opacity:0.75;">{status}</div>
+</div>

package/dist/typography/FontPicker.svelte.d.ts

@@ -0,0 +1,36 @@
+import { type Snippet } from 'svelte';
+import { FontPickerModel, type FontProvider, type FontSpec, type FontSummary } from '@pixerate/editor/typography';
+interface Props {
+    /** The selected font (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called when the user (or an agent through the model's tools) picks a different font, weight or style. */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    /** Where fonts come from (fetched on mount). */
+    provider?: FontProvider;
+    /** A fixed list of fonts. */
+    fonts?: readonly FontSummary[];
+    /** Text for the live preview. */
+    previewText?: string;
+    /** Show the live preview (default true). */
+    showPreview?: boolean;
+    /** Show the category filter (default true). */
+    showCategories?: boolean;
+    /** Show the weight and style selects (default true). */
+    showWeight?: boolean;
+    /** Most options rendered at once (default 200); search to reach the rest. */
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Font picker"). */
+    'aria-label'?: string;
+    /** Extra controls rendered above the preview (used by `TypographyControl`). */
+    children?: Snippet;
+}
+declare const FontPicker: import("svelte").Component<Props, {}, "">;
+type FontPicker = ReturnType<typeof FontPicker>;
+export default FontPicker;

package/dist/typography/TypographyControl.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onDestroy, untrack } from 'svelte';
+  import { FontPickerModel, type FontProvider, type FontSpec, type FontSummary } from '@pixerate/editor/typography';
+  import FontPicker from './FontPicker.svelte';
+  import { fontPickerOf } from './picker.svelte.js';
+
+  interface Props {
+    /** The selected font and metrics (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called with the whole spec when anything changes in the control (or through its agent tools). */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    provider?: FontProvider;
+    fonts?: readonly FontSummary[];
+    previewText?: string;
+    showPreview?: boolean;
+    showCategories?: boolean;
+    showWeight?: boolean;
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Typography"). */
+    'aria-label'?: string;
+  }
+
+  let {
+    value,
+    onchange,
+    onChange,
+    model: external,
+    provider,
+    fonts,
+    previewText,
+    disabled = false,
+    'aria-label': ariaLabel = 'Typography',
+    ...rest
+  }: Props = $props();
+
+  const model = untrack(() => external ?? new FontPickerModel({ provider, fonts, value, previewText }));
+  const picker = fontPickerOf(model);
+  onDestroy(() => picker.destroy());
+  if (!untrack(() => external) && untrack(() => provider)) void model.refresh();
+  const v = $derived(picker.state.value);
+
+  const numberField =
+    'box-sizing:border-box;width:100%;padding:5px 6px;border-radius:6px;border:1px solid var(--pixerate-font-picker-border, #3a4152);background:var(--pixerate-font-picker-field-bg, #151922);color:inherit;font:inherit;';
+
+  function commit(e: Event, set: (n: number) => void) {
+    const n = (e.currentTarget as HTMLInputElement).valueAsNumber;
+    if (Number.isFinite(n)) set(n);
+  }
+</script>
+
+<FontPicker {model} {value} onchange={(next) => (onchange ?? onChange)?.(next)} {disabled} aria-label={ariaLabel} {...rest}>
+  <div style="display:flex;gap:6px;">
+    <label style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;">
+      <span style="opacity:0.75;">Font size <span style="opacity:0.6;">px</span></span>
+      <input type="number" aria-label="Font size" value={v.size} step="1" min="1" max="1000" {disabled} oninput={(e) => commit(e, (n) => model.setSize(n))} style={numberField} />
+    </label>
+    <label style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;">
+      <span style="opacity:0.75;">Line height <span style="opacity:0.6;">×</span></span>
+      <input type="number" aria-label="Line height" value={v.lineHeight} step="0.05" min="0.5" max="4" {disabled} oninput={(e) => commit(e, (n) => model.setLineHeight(n))} style={numberField} />
+    </label>
+    <label style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;">
+      <span style="opacity:0.75;">Letter spacing <span style="opacity:0.6;">em</span></span>
+      <input type="number" aria-label="Letter spacing" value={v.letterSpacing} step="0.01" min="-0.5" max="1" {disabled} oninput={(e) => commit(e, (n) => model.setLetterSpacing(n))} style={numberField} />
+    </label>
+  </div>
+</FontPicker>

package/dist/typography/TypographyControl.svelte.d.ts

@@ -0,0 +1,26 @@
+import { FontPickerModel, type FontProvider, type FontSpec, type FontSummary } from '@pixerate/editor/typography';
+interface Props {
+    /** The selected font and metrics (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called with the whole spec when anything changes in the control (or through its agent tools). */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    provider?: FontProvider;
+    fonts?: readonly FontSummary[];
+    previewText?: string;
+    showPreview?: boolean;
+    showCategories?: boolean;
+    showWeight?: boolean;
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Typography"). */
+    'aria-label'?: string;
+}
+declare const TypographyControl: import("svelte").Component<Props, {}, "">;
+type TypographyControl = ReturnType<typeof TypographyControl>;
+export default TypographyControl;

package/dist/typography/index.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'svelte';
+import type FontPickerComponent from './FontPicker.svelte';
+import type TypographyControlComponent from './TypographyControl.svelte';
+export { default as FontPicker } from './FontPicker.svelte';
+export { default as TypographyControl } from './TypographyControl.svelte';
+export type FontPickerProps = ComponentProps<typeof FontPickerComponent>;
+export type TypographyControlProps = ComponentProps<typeof TypographyControlComponent>;
+export { fontPickerOf, type FontPickerBinding } from './picker.svelte.js';
+export * from '@pixerate/editor/typography';

package/dist/typography/index.js

@@ -0,0 +1,5 @@
+export { default as FontPicker } from './FontPicker.svelte';
+export { default as TypographyControl } from './TypographyControl.svelte';
+export { fontPickerOf } from './picker.svelte.js';
+// Re-export the core typography module for consumer convenience
+export * from '@pixerate/editor/typography';

package/dist/typography/picker.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { FontPickerModel, FontPickerState } from '@pixerate/editor/typography';
+export interface FontPickerBinding {
+    /** The model's state, reactive. */
+    readonly state: FontPickerState;
+    readonly model: FontPickerModel;
+    /** Stops following the model. */
+    destroy(): void;
+}
+/**
+ * Follows a {@link FontPickerModel} with Svelte 5 runes: `binding.state` updates whenever the model
+ * changes (from the UI or from its agent tools). Call `destroy()` when the component unmounts.
+ */
+export declare function fontPickerOf(model: FontPickerModel): FontPickerBinding;

package/dist/typography/picker.svelte.js

@@ -0,0 +1,19 @@
+/**
+ * Follows a {@link FontPickerModel} with Svelte 5 runes: `binding.state` updates whenever the model
+ * changes (from the UI or from its agent tools). Call `destroy()` when the component unmounts.
+ */
+export function fontPickerOf(model) {
+    let current = $state.raw(model.getState());
+    const unsubscribe = model.subscribe((next) => {
+        current = next;
+    });
+    return {
+        get state() {
+            return current;
+        },
+        model,
+        destroy: () => {
+            unsubscribe();
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.118.0",
+  "version": "0.119.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -93,6 +93,11 @@
       "svelte": "./dist/color/index.js",
       "default": "./dist/color/index.js"
     },
+    "./typography": {
+      "types": "./dist/typography/index.d.ts",
+      "svelte": "./dist/typography/index.js",
+      "default": "./dist/typography/index.js"
+    },
     "./gradient": {
       "types": "./dist/gradient/index.d.ts",
       "svelte": "./dist/gradient/index.js",
@@ -144,6 +149,9 @@
       "color": [
         "./dist/color/index.d.ts"
       ],
+      "typography": [
+        "./dist/typography/index.d.ts"
+      ],
       "gradient": [
         "./dist/gradient/index.d.ts"
       ]
@@ -160,7 +168,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.161.0"
+    "@pixerate/editor": "0.162.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",