@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/vue/kit/types.d.ts

@@ -0,0 +1,370 @@
+import { Notifier } from "../../core/notify.js";
+import { Component } from "vue";
+//#region src/vue/kit/types.d.ts
+/** Semantic colours. A kit maps them onto its own palette; `neutral` is the plain chrome colour. */
+export type KitColor = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+/** Control sizes, `xs` the densest. A kit may collapse neighbouring steps (PrimeVue has three). */
+export type KitSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+/** How a button or badge is filled: `solid` (primary fill), `outline`, `soft` (tinted), `subtle` (tinted + ring), `ghost` (text until hovered), `link`. */
+export type KitVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link';
+/** Where an overlay opens relative to its anchor (the subset of reka-ui's `PopperContent` the chrome uses). */
+export interface KitOverlayContent {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+  /** `'always'` re-measures the anchor on every frame (an anchor that moves with the text caret). */
+  updatePositionStrategy?: 'optimized' | 'always';
+  /** Called when focus would move into the overlay as it opens; `preventDefault()` keeps focus where it is. */
+  onOpenAutoFocus?: (event: Event) => void;
+  /** Called when focus would return to the trigger as the overlay closes; `preventDefault()` keeps it where it is. */
+  onCloseAutoFocus?: (event: Event) => void;
+  /** Called before a pointer or focus event outside the overlay dismisses it; `preventDefault()` keeps it open. */
+  onInteractOutside?: (event: Event) => void;
+}
+/** Class slots a host-facing component passes to a kit overlay (`ui.content`: the panel; `ui.overlay`: the backdrop of a modal). */
+export interface KitOverlayUi {
+  content?: string;
+  overlay?: string;
+}
+/** The virtual anchor of an overlay that is not wrapped around a trigger (a text range): what `Range` and `Element` offer. */
+export interface KitAnchor {
+  getBoundingClientRect(): DOMRect;
+  getClientRects?(): DOMRectList;
+}
+/**
+ * One entry of a `DropdownMenu`. A superset of `MenuItem` from `/core` (every `MenuItem` is a valid item).
+ * `type: 'checkbox'` items show `checked` and call `onUpdateChecked`; `onSelect(event)` runs on activation and a menu
+ * stays open when it calls `event.preventDefault()`.
+ */
+export interface DropdownItem {
+  type?: 'label' | 'separator' | 'checkbox' | 'link';
+  label?: string;
+  description?: string;
+  /** Iconify name (`i-lucide-…`). */
+  icon?: string;
+  color?: KitColor;
+  disabled?: boolean;
+  checked?: boolean;
+  onUpdateChecked?: (checked: boolean) => void;
+  onSelect?: (event: Event) => void;
+  /** Shortcut keys shown at the end of the row (`['meta', 'b']`). */
+  kbds?: string[];
+}
+/** The items of a `DropdownMenu`: a flat list, or groups separated by a line. */
+export type DropdownItems = DropdownItem[] | DropdownItem[][];
+/** One tab of `Tabs`; `value` is what `modelValue` carries. */
+export interface TabItem {
+  label: string;
+  value: string;
+  icon?: string;
+  disabled?: boolean;
+}
+/** One entry of `Select`/`SelectMenu`: a choice, a `label` heading or a `separator`. `value` is what `modelValue` carries; `onSelect(event)` may `preventDefault()` to keep the current value. */
+export interface SelectItem {
+  type?: 'label' | 'separator';
+  label?: string;
+  description?: string;
+  icon?: string;
+  value?: string | number | boolean;
+  disabled?: boolean;
+  onSelect?: (event: Event) => void;
+}
+/** One entry of `InputMenu` (`multiple`: string choices); `label` is shown, `value` is carried. */
+export type InputMenuItem = string | {
+  label: string;
+  value?: string;
+  icon?: string;
+  disabled?: boolean;
+};
+/** One row of `Tree`. The rest of the row's data is the host's (`T extends TreeNode`), reached through the `item-wrapper` slot. */
+export interface TreeNode {
+  key?: string;
+  label?: string;
+  icon?: string;
+  children?: TreeNode[];
+  /** Row activation (click or Enter); the tree toggles a row that has children after it, unless `preventDefault()` was called. */
+  onSelect?: (event?: Event) => void;
+  /** Called when the tree toggles the row. */
+  onToggle?: (event?: Event) => void;
+}
+/** One column of `Table`. `id` names its slots (`<id>-header`, `<id>-cell`). */
+export interface TableColumn<T = unknown> {
+  id: string;
+  /** Header text when the `<id>-header` slot is absent. */
+  header?: string;
+  /** Value of a cell when the `<id>-cell` slot is absent. */
+  accessorFn?: (row: T) => unknown;
+  /** Marks the header as sortable for assistive technology (`aria-sort` is reported through `Table`'s `sorting`). */
+  enableSorting?: boolean;
+  /** Classes of the header cell (`th`) and body cells (`td`) of this column. */
+  meta?: {
+    class?: {
+      th?: string;
+      td?: string;
+    };
+  };
+}
+/** What `Table`'s `sorting` model carries: one entry per sorted column (the host orders the data itself). */
+export interface TableSort {
+  id: string;
+  desc: boolean;
+}
+export interface AlertProps {
+  title?: string;
+  description?: string;
+  icon?: string;
+  color?: KitColor;
+  variant?: KitVariant;
+}
+export interface AvatarProps {
+  /** Image URL; initials from `text` when absent. */
+  src?: string;
+  alt?: string;
+  text?: string;
+  size?: KitSize;
+}
+export interface BadgeProps {
+  label?: string | number;
+  icon?: string;
+  color?: KitColor;
+  variant?: KitVariant;
+  size?: KitSize;
+}
+export interface ButtonProps {
+  label?: string;
+  icon?: string;
+  trailingIcon?: string;
+  color?: KitColor;
+  variant?: KitVariant;
+  size?: KitSize;
+  /** Pressed/open state: `activeColor`/`activeVariant` replace `color`/`variant` while it is set. */
+  active?: boolean;
+  activeColor?: KitColor;
+  activeVariant?: KitVariant;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Shows the loading state while an async `onClick` handler is pending. */
+  loadingAuto?: boolean;
+  /** Renders a link (`<a>`) instead of a `<button>`. */
+  href?: string;
+  target?: string;
+  type?: 'button' | 'submit' | 'reset';
+}
+/** A dot or short text badge pinned to the corner of the default slot; nothing is drawn while `show` is false. */
+export interface ChipProps {
+  show?: boolean;
+  text?: string | number;
+  color?: KitColor;
+  size?: KitSize;
+}
+/** DropdownMenu slots: default (the trigger). Emits `update:open`. A kit without the capability documents what it ignores (`content`, a menu that stays open on `preventDefault()`). */
+export interface DropdownMenuProps {
+  items: DropdownItems;
+  content?: KitOverlayContent;
+  ui?: KitOverlayUi;
+  /** Emits `update:open`. The default slot is the trigger; a kit marks it `data-state="open"|"closed"`. */
+  open?: boolean;
+}
+export interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+}
+export interface FieldGroupProps {
+  size?: KitSize;
+}
+export interface FormFieldProps {
+  label?: string;
+  description?: string;
+  help?: string;
+  required?: boolean;
+  orientation?: 'vertical' | 'horizontal';
+  size?: KitSize;
+}
+export interface IconProps {
+  /** Iconify name, `i-lucide-x` or `lucide:x`. */
+  name: string;
+}
+export interface InputProps {
+  modelValue?: string | number;
+  type?: string;
+  size?: KitSize;
+  color?: KitColor;
+  /** Draws the field's highlight ring (used with `color: 'error'`). */
+  highlight?: boolean;
+  icon?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  maxlength?: number | string;
+  autofocus?: boolean;
+  autocomplete?: string;
+  accept?: string;
+}
+/** The instance of `Input`: `inputRef` is the native element (focus it from the host). Slot: `trailing`. */
+export interface InputExposed {
+  inputRef: HTMLInputElement | null;
+}
+/** InputMenu slot: `create-item-label` (`{ item: string }`, the text of the row that offers the typed text). Events: `update:modelValue`, `update:searchTerm`, `update:open`, `create(text)`. */
+export interface InputMenuProps {
+  /** The picked values (`multiple`) or the picked value. */
+  modelValue?: string[] | string;
+  items?: InputMenuItem[];
+  multiple?: boolean;
+  searchTerm?: string;
+  /** Do not filter `items` by the search term (the host searches). */
+  ignoreFilter?: boolean;
+  /** Offers the typed text as a new choice (`emits create(text)`); `when: 'always'` also when it matches an item. */
+  createItem?: false | {
+    position?: 'top' | 'bottom';
+    when?: 'empty' | 'always' | 'no-match';
+  };
+  placeholder?: string;
+  icon?: string;
+  size?: KitSize;
+  disabled?: boolean;
+  open?: boolean;
+}
+/**
+ * Modal slots: default (an optional trigger), `body`, `footer` (the title and description come from the props). Emits
+ * `update:open`; `close` and `after:leave` after the dialog closed.
+ */
+export interface ModalProps {
+  open?: boolean;
+  title?: string;
+  description?: string;
+  /** `false`: Escape and outside clicks do not close it. */
+  dismissible?: boolean;
+  /** The close button; `false` hides it, `{ disabled }` greys it out. */
+  close?: boolean | {
+    disabled?: boolean;
+  };
+  ui?: KitOverlayUi;
+}
+/** Popover slots: default (the trigger, unless `reference` is set), `content` (the panel). Emits `update:open`. */
+export interface PopoverProps {
+  open?: boolean;
+  /** Anchors the popover to this instead of the default slot. */
+  reference?: KitAnchor;
+  dismissible?: boolean;
+  content?: KitOverlayContent;
+  ui?: KitOverlayUi;
+}
+export interface RadioGroupProps {
+  modelValue?: string | number;
+  items: {
+    label: string;
+    value: string | number;
+    description?: string;
+    disabled?: boolean;
+  }[];
+  orientation?: 'vertical' | 'horizontal';
+  /** The group's accessible name. */
+  legend?: string;
+}
+export interface SelectProps {
+  modelValue?: string | number;
+  items: SelectItem[];
+  placeholder?: string;
+  size?: KitSize;
+  disabled?: boolean;
+}
+export interface SelectMenuProps {
+  modelValue?: string | number;
+  items: SelectItem[];
+  /** Key of an item that carries the value (`'value'`). */
+  valueKey?: string;
+  /** `false` hides the search field. */
+  searchInput?: boolean;
+  placeholder?: string;
+  icon?: string;
+  size?: KitSize;
+  open?: boolean;
+  ui?: KitOverlayUi;
+}
+export interface SwitchProps {
+  modelValue?: boolean;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+}
+export interface TableProps<T = unknown> {
+  data: T[];
+  columns: TableColumn<T>[];
+  getRowId?: (row: T) => string;
+  sorting?: TableSort[];
+  /** Keeps the header visible while the body scrolls. */
+  sticky?: boolean;
+  ui?: {
+    th?: string;
+    td?: string;
+  };
+}
+/**
+ * Table slots: `<column.id>-header`, `<column.id>-cell` with `{ row: { original: T } }`, `empty`. Events: `select(event, row: { original: T })`
+ * (a row was activated), `update:sorting`. The table never sorts: the host orders `data` itself and `sorting` only reports it.
+ */
+export interface TabsProps {
+  modelValue?: string;
+  items: TabItem[];
+  orientation?: 'horizontal' | 'vertical';
+  variant?: 'pill' | 'link';
+  /** The editor renders the panels itself: always `false`. */
+  content?: false;
+}
+export interface TextareaProps {
+  modelValue?: string;
+  rows?: number;
+  maxrows?: number;
+  /** Grows with its content between `rows` and `maxrows`. */
+  autoresize?: boolean;
+  size?: KitSize;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  maxlength?: number | string;
+  autofocus?: boolean;
+}
+export interface TooltipProps {
+  text?: string;
+  /** Shortcut keys shown next to the text. */
+  kbds?: string[];
+}
+export interface TreeProps<T extends TreeNode = TreeNode> {
+  items: T[];
+  getKey?: (item: T) => string;
+  /** Keys of the open rows. */
+  expanded?: string[];
+  size?: KitSize;
+}
+/** Tree slot `item-wrapper` renders the whole row: `{ item: T, expanded: boolean, level: number }`. The tree owns the nesting and `role="tree"`. */
+/**
+ * The widgets the editor chrome renders, plus the toast bridge. `notifier` is a composable: it is called during
+ * component setup (Nuxt UI's `useToast()` needs an active app) and returns the `Notifier` that shows notices.
+ */
+export interface VueUiKit {
+  Alert: Component;
+  Avatar: Component;
+  Badge: Component;
+  Button: Component;
+  Chip: Component;
+  DropdownMenu: Component;
+  FieldGroup: Component;
+  FormField: Component;
+  Icon: Component;
+  Input: Component;
+  InputMenu: Component;
+  Modal: Component;
+  Popover: Component;
+  RadioGroup: Component;
+  Select: Component;
+  SelectMenu: Component;
+  Separator: Component;
+  Switch: Component;
+  Table: Component;
+  Tabs: Component;
+  Textarea: Component;
+  Tooltip: Component;
+  Tree: Component;
+  notifier: () => Notifier;
+}
+//#endregion
+//# sourceMappingURL=types.d.ts.map

package/dist/vue/kit/use-ui-kit.d.ts

@@ -0,0 +1,12 @@
+import { VueUiKit } from "./types.js";
+import { InjectionKey } from "vue";
+//#region src/vue/kit/use-ui-kit.d.ts
+/** Provided by `createEditor({ kit })`: the widgets the chrome components render (see `VueUiKit`). */
+export declare const VUE_UI_KIT: InjectionKey<VueUiKit>;
+/**
+ * The UI kit of the app: every chrome component of the package takes its widgets from here, never from a UI library.
+ * Throws a descriptive error when `createEditor({ kit })` was not installed. Call during component setup.
+ */
+export declare function useUiKit(): VueUiKit;
+//#endregion
+//# sourceMappingURL=use-ui-kit.d.ts.map

package/dist/vue/kit/use-ui-kit.js

@@ -0,0 +1,17 @@
+import { inject } from "vue";
+//#region src/vue/kit/use-ui-kit.ts
+/** Provided by `createEditor({ kit })`: the widgets the chrome components render (see `VueUiKit`). */
+const VUE_UI_KIT = Symbol("tiptap-editor:ui-kit");
+/**
+* The UI kit of the app: every chrome component of the package takes its widgets from here, never from a UI library.
+* Throws a descriptive error when `createEditor({ kit })` was not installed. Call during component setup.
+*/
+function useUiKit() {
+	const kit = inject(VUE_UI_KIT, null);
+	if (!kit) throw new Error("@ecsplico/editor: no UI kit; install it with app.use(createEditor({ kit: nuxtUiKit() })) (kits: @ecsplico/editor/vue/kit/nuxt-ui, @ecsplico/editor/vue/kit/primevue)");
+	return kit;
+}
+//#endregion
+export { VUE_UI_KIT, useUiKit };
+
+//# sourceMappingURL=use-ui-kit.js.map

package/dist/vue/kit/use-ui-kit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ui-kit.js","names":[],"sources":["../../../src/vue/kit/use-ui-kit.ts"],"sourcesContent":["import { type InjectionKey, inject } from 'vue'\nimport type { VueUiKit } from './types'\n\n/** Provided by `createEditor({ kit })`: the widgets the chrome components render (see `VueUiKit`). */\nexport const VUE_UI_KIT: InjectionKey<VueUiKit> = Symbol('tiptap-editor:ui-kit')\n\n/**\n * The UI kit of the app: every chrome component of the package takes its widgets from here, never from a UI library.\n * Throws a descriptive error when `createEditor({ kit })` was not installed. Call during component setup.\n */\nexport function useUiKit(): VueUiKit {\n  const kit = inject(VUE_UI_KIT, null)\n  if (!kit) throw new Error('@ecsplico/editor: no UI kit; install it with app.use(createEditor({ kit: nuxtUiKit() })) (kits: @ecsplico/editor/vue/kit/nuxt-ui, @ecsplico/editor/vue/kit/primevue)')\n  return kit\n}\n"],"mappings":";;;AAIA,MAAa,aAAqC,OAAO,sBAAsB;;;;;AAM/E,SAAgB,WAAqB;CACnC,MAAM,MAAM,OAAO,YAAY,IAAI;CACnC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sKAAsK;CAChM,OAAO;AACT"}

package/dist/vue/notify.d.ts

@@ -0,0 +1,12 @@
+import { Notifier } from "../core/notify.js";
+//#region src/vue/notify.d.ts
+/** A notifier that is handed to the app before any kit notifier exists (the Nuxt plugin runs outside component setup). */
+export type QueuedNotifier = Notifier & {
+  attach(target: Notifier): void;
+};
+/** Notices raised before `attach` wait; `attach` shows them once and forwards from then on. A second `attach` is a no-op. */
+export declare function createQueuedNotifier(): QueuedNotifier;
+/** Gives a queued notifier the kit's notifier (`EditorSurface` calls it in setup); any other notifier is left alone. */
+export declare function attachNotifier(notify: Notifier, kitNotifier: Notifier): void;
+//#endregion
+//# sourceMappingURL=notify.d.ts.map

package/dist/vue/notify.js

@@ -0,0 +1,27 @@
+//#region src/vue/notify.ts
+/** Notices raised before `attach` wait; `attach` shows them once and forwards from then on. A second `attach` is a no-op. */
+function createQueuedNotifier() {
+	let target;
+	const queue = [];
+	const notify = ((notice) => {
+		if (target) target(notice);
+		else queue.push(notice);
+	});
+	notify.dismiss = (id) => {
+		target?.dismiss?.(id);
+	};
+	notify.attach = (next) => {
+		if (target) return;
+		target = next;
+		for (const notice of queue.splice(0)) target(notice);
+	};
+	return notify;
+}
+/** Gives a queued notifier the kit's notifier (`EditorSurface` calls it in setup); any other notifier is left alone. */
+function attachNotifier(notify, kitNotifier) {
+	if ("attach" in notify && typeof notify.attach === "function") notify.attach(kitNotifier);
+}
+//#endregion
+export { attachNotifier, createQueuedNotifier };
+
+//# sourceMappingURL=notify.js.map

package/dist/vue/notify.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify.js","names":[],"sources":["../../src/vue/notify.ts"],"sourcesContent":["import type { Notice, Notifier } from '../core/notify'\n\n/** A notifier that is handed to the app before any kit notifier exists (the Nuxt plugin runs outside component setup). */\nexport type QueuedNotifier = Notifier & { attach(target: Notifier): void }\n\n/** Notices raised before `attach` wait; `attach` shows them once and forwards from then on. A second `attach` is a no-op. */\nexport function createQueuedNotifier(): QueuedNotifier {\n  let target: Notifier | undefined\n  const queue: Notice[] = []\n  const notify = ((notice: Notice) => {\n    if (target) target(notice)\n    else queue.push(notice)\n  }) as QueuedNotifier\n  notify.dismiss = (id) => { target?.dismiss?.(id) }\n  notify.attach = (next) => {\n    if (target) return\n    target = next\n    for (const notice of queue.splice(0)) target(notice)\n  }\n  return notify\n}\n\n/** Gives a queued notifier the kit's notifier (`EditorSurface` calls it in setup); any other notifier is left alone. */\nexport function attachNotifier(notify: Notifier, kitNotifier: Notifier): void {\n  if ('attach' in notify && typeof notify.attach === 'function') (notify as QueuedNotifier).attach(kitNotifier)\n}\n"],"mappings":";;AAMA,SAAgB,uBAAuC;CACrD,IAAI;CACJ,MAAM,QAAkB,CAAC;CACzB,MAAM,WAAW,WAAmB;EAClC,IAAI,QAAQ,OAAO,MAAM;OACpB,MAAM,KAAK,MAAM;CACxB;CACA,OAAO,WAAW,OAAO;EAAE,QAAQ,UAAU,EAAE;CAAE;CACjD,OAAO,UAAU,SAAS;EACxB,IAAI,QAAQ;EACZ,SAAS;EACT,KAAK,MAAM,UAAU,MAAM,OAAO,CAAC,GAAG,OAAO,MAAM;CACrD;CACA,OAAO;AACT;;AAGA,SAAgB,eAAe,QAAkB,aAA6B;CAC5E,IAAI,YAAY,UAAU,OAAO,OAAO,WAAW,YAAY,OAA2B,OAAO,WAAW;AAC9G"}

package/dist/vue/settings.d.ts

@@ -0,0 +1,16 @@
+import { EditorSettings } from "../settings/index.js";
+import "../core/context.js";
+import { Ref } from "vue";
+//#region src/vue/settings.d.ts
+/**
+ * The editor settings shared by all editors of the app (see `createEditorContext` for persistence), as Vue refs.
+ * `ready` turns true when the stored settings are usable, `synced` when the account's settings from the server are
+ * in effect.
+ */
+export declare function useEditorSettings(): {
+  settings: Ref<EditorSettings>;
+  ready: Ref<boolean>;
+  synced: Ref<boolean>;
+};
+//#endregion
+//# sourceMappingURL=settings.d.ts.map

package/dist/vue/settings.js

@@ -0,0 +1,64 @@
+import { useEditorContext } from "./context.js";
+import { effectScope, ref, toRaw, watch } from "vue";
+//#region src/vue/settings.ts
+const bridges = /* @__PURE__ */ new WeakMap();
+/**
+* The bridge of `ctx` (created once, then shared): `settings.value.a.b = x` in a component reaches the store exactly
+* once per change, and store changes (server load, `ctx.settings.update` of a feature) appear in the ref.
+* `createEditor` creates it on install and disposes it with the app.
+*/
+function createSettingsBridge(ctx) {
+	const existing = bridges.get(ctx);
+	if (existing) return existing;
+	const scope = effectScope(true);
+	const unsubscribers = [];
+	const bridge = scope.run(() => {
+		const settings = ref(ctx.settings.get());
+		const ready = ref(ctx.ready.get());
+		const synced = ref(ctx.synced.get());
+		watch(settings, (value) => {
+			const next = structuredClone(toRaw(value));
+			if (JSON.stringify(next) === JSON.stringify(ctx.settings.get())) return;
+			ctx.settings.set(next);
+		}, { deep: true });
+		unsubscribers.push(ctx.settings.subscribe((value) => {
+			if (JSON.stringify(value) === JSON.stringify(toRaw(settings.value))) return;
+			settings.value = structuredClone(value);
+		}), ctx.ready.subscribe((value) => {
+			ready.value = value;
+		}), ctx.synced.subscribe((value) => {
+			synced.value = value;
+		}));
+		return {
+			settings,
+			ready,
+			synced,
+			dispose() {
+				for (const unsubscribe of unsubscribers) unsubscribe();
+				scope.stop();
+				bridges.delete(ctx);
+			}
+		};
+	});
+	bridges.set(ctx, bridge);
+	return bridge;
+}
+/**
+* The editor settings shared by all editors of the app (see `createEditorContext` for persistence), as Vue refs.
+* `ready` turns true when the stored settings are usable, `synced` when the account's settings from the server are
+* in effect.
+*/
+function useEditorSettings() {
+	const ctx = useEditorContext();
+	ctx.load();
+	const { settings, ready, synced } = createSettingsBridge(ctx);
+	return {
+		settings,
+		ready,
+		synced
+	};
+}
+//#endregion
+export { createSettingsBridge, useEditorSettings };
+
+//# sourceMappingURL=settings.js.map

package/dist/vue/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","names":[],"sources":["../../src/vue/settings.ts"],"sourcesContent":["import { effectScope, type Ref, ref, toRaw, watch } from 'vue'\nimport type { EditorContext } from '../core/context'\nimport type { EditorSettings } from '../settings'\nimport { useEditorContext } from './context'\n\n/** The Vue view of an `EditorContext`: refs kept in step with its stores. */\nexport interface SettingsBridge {\n  settings: Ref<EditorSettings>\n  ready: Ref<boolean>\n  synced: Ref<boolean>\n  dispose: () => void\n}\n\nconst bridges = new WeakMap<EditorContext, SettingsBridge>()\n\n/**\n * The bridge of `ctx` (created once, then shared): `settings.value.a.b = x` in a component reaches the store exactly\n * once per change, and store changes (server load, `ctx.settings.update` of a feature) appear in the ref.\n * `createEditor` creates it on install and disposes it with the app.\n */\nexport function createSettingsBridge(ctx: EditorContext): SettingsBridge {\n  const existing = bridges.get(ctx)\n  if (existing) return existing\n\n  const scope = effectScope(true)\n  const unsubscribers: (() => void)[] = []\n  const bridge = scope.run((): SettingsBridge => {\n    const settings = ref<EditorSettings>(ctx.settings.get())\n    const ready = ref(ctx.ready.get())\n    const synced = ref(ctx.synced.get())\n\n    // Ref → store. The watcher runs after the flush, so a flag around the store→ref assignment cannot tell an echo of\n    // a store change from a user edit. Instead the edit is compared with the store's value: a store→ref copy is equal\n    // to the store (no second `set`, hence no redundant local write or server push); only a real difference is pushed.\n    watch(settings, (value) => {\n      const next = structuredClone(toRaw(value))\n      if (JSON.stringify(next) === JSON.stringify(ctx.settings.get())) return\n      ctx.settings.set(next)\n    }, { deep: true })\n\n    // Store → ref. The store notifies synchronously; `set` from the watcher above already has the value in the ref.\n    unsubscribers.push(\n      ctx.settings.subscribe((value) => {\n        if (JSON.stringify(value) === JSON.stringify(toRaw(settings.value))) return\n        settings.value = structuredClone(value)\n      }),\n      ctx.ready.subscribe((value) => { ready.value = value }),\n      ctx.synced.subscribe((value) => { synced.value = value }),\n    )\n\n    return {\n      settings,\n      ready,\n      synced,\n      dispose() {\n        for (const unsubscribe of unsubscribers) unsubscribe()\n        scope.stop()\n        bridges.delete(ctx)\n      },\n    }\n  })!\n  bridges.set(ctx, bridge)\n  return bridge\n}\n\n/**\n * The editor settings shared by all editors of the app (see `createEditorContext` for persistence), as Vue refs.\n * `ready` turns true when the stored settings are usable, `synced` when the account's settings from the server are\n * in effect.\n */\nexport function useEditorSettings(): { settings: Ref<EditorSettings>, ready: Ref<boolean>, synced: Ref<boolean> } {\n  const ctx = useEditorContext()\n  ctx.load()\n  const { settings, ready, synced } = createSettingsBridge(ctx)\n  return { settings, ready, synced }\n}\n"],"mappings":";;;AAaA,MAAM,0BAAU,IAAI,QAAuC;;;;;;AAO3D,SAAgB,qBAAqB,KAAoC;CACvE,MAAM,WAAW,QAAQ,IAAI,GAAG;CAChC,IAAI,UAAU,OAAO;CAErB,MAAM,QAAQ,YAAY,IAAI;CAC9B,MAAM,gBAAgC,CAAC;CACvC,MAAM,SAAS,MAAM,UAA0B;EAC7C,MAAM,WAAW,IAAoB,IAAI,SAAS,IAAI,CAAC;EACvD,MAAM,QAAQ,IAAI,IAAI,MAAM,IAAI,CAAC;EACjC,MAAM,SAAS,IAAI,IAAI,OAAO,IAAI,CAAC;EAKnC,MAAM,WAAW,UAAU;GACzB,MAAM,OAAO,gBAAgB,MAAM,KAAK,CAAC;GACzC,IAAI,KAAK,UAAU,IAAI,MAAM,KAAK,UAAU,IAAI,SAAS,IAAI,CAAC,GAAG;GACjE,IAAI,SAAS,IAAI,IAAI;EACvB,GAAG,EAAE,MAAM,KAAK,CAAC;EAGjB,cAAc,KACZ,IAAI,SAAS,WAAW,UAAU;GAChC,IAAI,KAAK,UAAU,KAAK,MAAM,KAAK,UAAU,MAAM,SAAS,KAAK,CAAC,GAAG;GACrE,SAAS,QAAQ,gBAAgB,KAAK;EACxC,CAAC,GACD,IAAI,MAAM,WAAW,UAAU;GAAE,MAAM,QAAQ;EAAM,CAAC,GACtD,IAAI,OAAO,WAAW,UAAU;GAAE,OAAO,QAAQ;EAAM,CAAC,CAC1D;EAEA,OAAO;GACL;GACA;GACA;GACA,UAAU;IACR,KAAK,MAAM,eAAe,eAAe,YAAY;IACrD,MAAM,KAAK;IACX,QAAQ,OAAO,GAAG;GACpB;EACF;CACF,CAAC;CACD,QAAQ,IAAI,KAAK,MAAM;CACvB,OAAO;AACT;;;;;;AAOA,SAAgB,oBAAkG;CAChH,MAAM,MAAM,iBAAiB;CAC7B,IAAI,KAAK;CACT,MAAM,EAAE,UAAU,OAAO,WAAW,qBAAqB,GAAG;CAC5D,OAAO;EAAE;EAAU;EAAO;CAAO;AACnC"}

package/dist/vue/simple.d.ts

@@ -0,0 +1,2 @@
+import _default from "./SimpleEditor.vue.js";
+export { _default as SimpleEditor };

package/dist/vue/simple.js

@@ -0,0 +1 @@
+export { default as SimpleEditor } from "./SimpleEditor.js";

package/dist/vue/store-ref.d.ts

@@ -0,0 +1,20 @@
+import { ReadonlyStore, Store } from "../core/store.js";
+import { MaybeRefOrGetter, Ref } from "vue";
+//#region src/vue/store-ref.d.ts
+/**
+ * A readonly ref of the current value of a store (which may change with `source`); follows it until the current scope
+ * ends (or `source` switches to another store). Call from `setup()` or an effect scope.
+ */
+export declare function useStoreRef<T>(source: MaybeRefOrGetter<ReadonlyStore<T>>): Readonly<Ref<T>>;
+/** A ref that follows `store` (until the current scope ends) and writes through to it. Call from `setup()` or an effect scope. */
+export declare function useWritableStoreRef<T>(store: Store<T>): Ref<T>;
+/** A store view of a Vue ref/computed, for hosts that implement `DocumentStore` over Vue state. Listeners are notified synchronously after each change. */
+export declare function storeFromRef<T>(source: Readonly<Ref<T>>): ReadonlyStore<T>;
+/**
+ * `store` with a `get()` Vue can track: inside the current component scope a ref follows the store, and `get()` reads
+ * it. Use it for the store handed to code a render function or computed runs (toolbar factories'
+ * `active`/`visible`/`menu`), whose plain `get()` reads are invisible to Vue. Unsubscribes with the scope.
+ */
+export declare function trackedStore<T>(store: Store<T>): Store<T>;
+//#endregion
+//# sourceMappingURL=store-ref.d.ts.map

package/dist/vue/store-ref.js

@@ -0,0 +1,59 @@
+import { computed, effectScope, getCurrentScope, shallowRef, toValue, watch } from "vue";
+//#region src/vue/store-ref.ts
+/**
+* A readonly ref of the current value of a store (which may change with `source`); follows it until the current scope
+* ends (or `source` switches to another store). Call from `setup()` or an effect scope.
+*/
+function useStoreRef(source) {
+	const current = shallowRef(toValue(source).get());
+	watch(() => toValue(source), (store, _previous, onCleanup) => {
+		current.value = store.get();
+		onCleanup(store.subscribe((value) => {
+			current.value = value;
+		}));
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	return current;
+}
+/** A ref that follows `store` (until the current scope ends) and writes through to it. Call from `setup()` or an effect scope. */
+function useWritableStoreRef(store) {
+	const current = useStoreRef(store);
+	return computed({
+		get: () => current.value,
+		set: (value) => store.set(value)
+	});
+}
+/** A store view of a Vue ref/computed, for hosts that implement `DocumentStore` over Vue state. Listeners are notified synchronously after each change. */
+function storeFromRef(source) {
+	return {
+		get: () => source.value,
+		subscribe(listener) {
+			const scope = effectScope(true);
+			scope.run(() => watch(source, (value) => listener(value), { flush: "sync" }));
+			return () => scope.stop();
+		}
+	};
+}
+/**
+* `store` with a `get()` Vue can track: inside the current component scope a ref follows the store, and `get()` reads
+* it. Use it for the store handed to code a render function or computed runs (toolbar factories'
+* `active`/`visible`/`menu`), whose plain `get()` reads are invisible to Vue. Unsubscribes with the scope.
+*/
+function trackedStore(store) {
+	const current = getCurrentScope() ? useStoreRef(store) : void 0;
+	return {
+		get: () => {
+			current?.value;
+			return store.get();
+		},
+		set: (value) => store.set(value),
+		update: (recipe) => store.update(recipe),
+		subscribe: (listener) => store.subscribe(listener)
+	};
+}
+//#endregion
+export { storeFromRef, trackedStore, useStoreRef, useWritableStoreRef };
+
+//# sourceMappingURL=store-ref.js.map

package/dist/vue/store-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store-ref.js","names":[],"sources":["../../src/vue/store-ref.ts"],"sourcesContent":["import { computed, effectScope, getCurrentScope, type MaybeRefOrGetter, onScopeDispose, type Ref, shallowRef, toValue, watch } from 'vue'\nimport type { ReadonlyStore, Store } from '../core/store'\n\n/**\n * A readonly ref of the current value of a store (which may change with `source`); follows it until the current scope\n * ends (or `source` switches to another store). Call from `setup()` or an effect scope.\n */\nexport function useStoreRef<T>(source: MaybeRefOrGetter<ReadonlyStore<T>>): Readonly<Ref<T>> {\n  const current = shallowRef(toValue(source).get())\n  watch(() => toValue(source), (store, _previous, onCleanup) => {\n    current.value = store.get()\n    onCleanup(store.subscribe((value) => { current.value = value }))\n  }, { immediate: true, flush: 'sync' })\n  return current\n}\n\n/** A ref that follows `store` (until the current scope ends) and writes through to it. Call from `setup()` or an effect scope. */\nexport function useWritableStoreRef<T>(store: Store<T>): Ref<T> {\n  const current = useStoreRef(store)\n  return computed({ get: () => current.value, set: value => store.set(value) })\n}\n\n/** A store view of a Vue ref/computed, for hosts that implement `DocumentStore` over Vue state. Listeners are notified synchronously after each change. */\nexport function storeFromRef<T>(source: Readonly<Ref<T>>): ReadonlyStore<T> {\n  return {\n    get: () => source.value,\n    subscribe(listener) {\n      const scope = effectScope(true)\n      scope.run(() => watch(source, value => listener(value), { flush: 'sync' }))\n      return () => scope.stop()\n    },\n  }\n}\n\n/**\n * `store` with a `get()` Vue can track: inside the current component scope a ref follows the store, and `get()` reads\n * it. Use it for the store handed to code a render function or computed runs (toolbar factories'\n * `active`/`visible`/`menu`), whose plain `get()` reads are invisible to Vue. Unsubscribes with the scope.\n */\nexport function trackedStore<T>(store: Store<T>): Store<T> {\n  const current = getCurrentScope() ? useStoreRef(store) : undefined\n  return {\n    get: () => {\n      void current?.value\n      return store.get()\n    },\n    set: value => store.set(value),\n    update: recipe => store.update(recipe),\n    subscribe: listener => store.subscribe(listener),\n  }\n}\n"],"mappings":";;;;;;AAOA,SAAgB,YAAe,QAA8D;CAC3F,MAAM,UAAU,WAAW,QAAQ,MAAM,CAAC,CAAC,IAAI,CAAC;CAChD,YAAY,QAAQ,MAAM,IAAI,OAAO,WAAW,cAAc;EAC5D,QAAQ,QAAQ,MAAM,IAAI;EAC1B,UAAU,MAAM,WAAW,UAAU;GAAE,QAAQ,QAAQ;EAAM,CAAC,CAAC;CACjE,GAAG;EAAE,WAAW;EAAM,OAAO;CAAO,CAAC;CACrC,OAAO;AACT;;AAGA,SAAgB,oBAAuB,OAAyB;CAC9D,MAAM,UAAU,YAAY,KAAK;CACjC,OAAO,SAAS;EAAE,WAAW,QAAQ;EAAO,MAAK,UAAS,MAAM,IAAI,KAAK;CAAE,CAAC;AAC9E;;AAGA,SAAgB,aAAgB,QAA4C;CAC1E,OAAO;EACL,WAAW,OAAO;EAClB,UAAU,UAAU;GAClB,MAAM,QAAQ,YAAY,IAAI;GAC9B,MAAM,UAAU,MAAM,SAAQ,UAAS,SAAS,KAAK,GAAG,EAAE,OAAO,OAAO,CAAC,CAAC;GAC1E,aAAa,MAAM,KAAK;EAC1B;CACF;AACF;;;;;;AAOA,SAAgB,aAAgB,OAA2B;CACzD,MAAM,UAAU,gBAAgB,IAAI,YAAY,KAAK,IAAI,KAAA;CACzD,OAAO;EACL,WAAW;GACT,SAAc;GACd,OAAO,MAAM,IAAI;EACnB;EACA,MAAK,UAAS,MAAM,IAAI,KAAK;EAC7B,SAAQ,WAAU,MAAM,OAAO,MAAM;EACrC,YAAW,aAAY,MAAM,UAAU,QAAQ;CACjD;AACF"}

package/dist/vue/suggestion-renderer.d.ts

@@ -0,0 +1,6 @@
+import { SuggestionPopupRenderer } from "../core/suggestion-popup.js";
+//#region src/vue/suggestion-renderer.d.ts
+/** Mounts `SuggestionList.vue` as the popup of every `@tiptap/suggestion` trigger; the Vue surface registers it through `SuggestionPopup`. */
+export declare const vueSuggestionRenderer: SuggestionPopupRenderer;
+//#endregion
+//# sourceMappingURL=suggestion-renderer.d.ts.map