rimecms 0.33.0 → 1.0.1

package/dist/fields/relation/index.js

@@ -1,5 +1,4 @@
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
-import { hasProps, isObjectLiteral } from '../../util/object.js';
 import { capitalize } from '../../util/string.js';
 import { ensureRelationExists } from 'rimecms/fields/relation/module';
 import dedent from 'dedent';
@@ -60,69 +59,3 @@ export class RelationFieldBuilder extends FormFieldBuilder {
     }
 }
 export const relation = (name) => new RelationFieldBuilder(name);
-/**
- * Checks if a relation value is resolved (contains the actual referenced document).
- *
- * @example
- * // Returns true for a resolved relation
- * isRelationResolved({ title: 'Home Page', _prototype: 'collection', _type: 'pages' });
- */
-export const isRelationResolved = (value) => {
-    return value && isObjectLiteral(value) && hasProps(['title', '_prototype', '_type'], value);
-};
-/**
- * Checks if a relation value is a reference (contains only the relationTo and documentId).
- *
- * @example
- * // Returns true for a relation reference
- * isRelationRef({ relationTo: 'pages', documentId: '123' });
- */
-export const isRelationRef = (value) => typeof value === 'object' &&
-    value !== null &&
-    typeof value.relationTo === 'string' &&
-    typeof value.documentId === 'string';
-/**
- * Checks if a relation value is unresolved (contains only reference information).
- *
- * @example
- * // Returns true for an unresolved relation
- * isRelationUnresolved({ relationTo: 'pages', documentId: '123' });
- */
-export const isRelationUnresolved = (value) => {
-    return value && isObjectLiteral(value) && hasProps(['relationTo', 'documentId'], value);
-};
-/**
- * Resolves a relation reference to the actual document it points to.
- *
- * @example
- * // Resolves a relation reference to the actual document
- * const doc = await resolveRelationRef({ relationTo: 'pages', documentId: '123' });
- */
-export async function resolveRelationRef(item) {
-    if (isRelationRef(item)) {
-        return fetch(`api/${item.relationTo}/${item.documentId}`)
-            .then((r) => r.json())
-            .then((r) => r.doc);
-    }
-    if (typeof item === 'string') {
-        throw new Error(`Cannot resolve relation from a bare id ("${item}") — missing "relationTo". ` +
-            `resolveRelationRef only works on populated docs or { relationTo, documentId } objects.`);
-    }
-    if (isRelationResolved(item)) {
-        return item;
-    }
-    throw new Error(`Unrecognized relation shape: ${JSON.stringify(item)}`);
-}
-/**
- * Resolves a relation field value to the actual documents it points to.
- *
- * @example
- * // Resolves a relation value to the actual documents
- * const docs = await resolveRelation([{ relationTo: 'pages', documentId: '123' }]);
- */
-export async function resolveRelation(value) {
-    if (value === null || value === undefined)
-        return value;
-    const items = Array.isArray(value) ? value : [value];
-    return Promise.all(items.map((item) => resolveRelationRef(item)));
-}

package/dist/fields/relation/module.server.js

@@ -9,9 +9,15 @@ import { toKebabCase } from '../../util/string.js';
 export const ensureRelationExists = async (value, { config }) => {
     const output = [];
     const retrieveRelation = async (id) => {
+        // Forward auth, not the incoming body's headers: Bun's fetch keeps a `content-length` on a
+        // bodiless GET (Node's drops it), and the server then waits for a body that never comes.
+        const headers = new Headers(getRequestEvent().request.headers);
+        for (const name of ['content-length', 'content-type', 'transfer-encoding']) {
+            headers.delete(name);
+        }
         const [err, response] = await trycatchFetch(`${env.PUBLIC_RIME_URL}/api/${toKebabCase(config.relationTo)}/${id}?${PARAMS.SELECT}=id`, {
             method: 'GET',
-            headers: getRequestEvent().request.headers
+            headers
         });
         if (err)
             return null;

package/dist/fields/relation/populate.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Relations and resource links resolved at depth 1, the shape the API answers with.
+ * A resolved document is returned as is; a relation that cannot be fetched stays a reference.
+ */
+export declare function populate<T>(value: T): Promise<T>;
+export declare namespace populate {
+    var clear: () => void;
+}

package/dist/fields/relation/populate.js

@@ -0,0 +1,49 @@
+import { API_PREFIX } from '../../core/routes/constants.js';
+import { isObjectLiteral } from '../../util/object.js';
+import { toKebabCase } from '../../util/string.js';
+const cache = new Map();
+/** One request per document for the page's life. */
+function fetchDoc(slug, id) {
+    const key = `${slug}/${id}`;
+    if (!cache.has(key)) {
+        const url = `${API_PREFIX}/${toKebabCase(slug)}/${id}?depth=1`;
+        cache.set(key, fetch(url)
+            .then((response) => response.json())
+            .then((response) => response?.doc ?? null)
+            .catch((error) => {
+            console.error(error);
+            return null;
+        }));
+    }
+    return cache.get(key);
+}
+const isLink = (value) => 'value' in value &&
+    'target' in value &&
+    'type' in value &&
+    !['url', 'email', 'tel', 'anchor'].includes(value.type);
+const isRelation = (value) => 'documentId' in value && 'relationTo' in value;
+/**
+ * Relations and resource links resolved at depth 1, the shape the API answers with.
+ * A resolved document is returned as is; a relation that cannot be fetched stays a reference.
+ */
+export async function populate(value) {
+    if (Array.isArray(value)) {
+        return Promise.all(value.map((item) => populate(item)));
+    }
+    if (!isObjectLiteral(value))
+        return value;
+    if (isLink(value)) {
+        if (!value.type || !value.value)
+            return value;
+        const doc = await fetchDoc(value.type, value.value);
+        return doc?.url ? { ...value, url: doc.url } : value;
+    }
+    if (isRelation(value)) {
+        if ('livePreview' in value)
+            return value.livePreview;
+        return ((await fetchDoc(value.relationTo, value.documentId)) ?? value);
+    }
+    const entries = await Promise.all(Object.entries(value).map(async ([key, item]) => [key, await populate(item)]));
+    return Object.fromEntries(entries);
+}
+populate.clear = () => cache.clear();

package/dist/fields/relation/util.d.ts

@@ -0,0 +1,69 @@
+import type { RelationRef, RelationValue } from '../types.js';
+import type { Relation } from './index.js';
+/**
+ * Checks if a relation field's value is populated with full documents.
+ *
+ * A relation is considered populated if it is an array of objects that do not
+ * contain only the relation identifiers (`id`, `relationTo`, `documentId`).
+ * If the value is a string or an array of relation identifier objects,
+ * it is considered not populated.
+ *
+ * @example
+ * // Returns: false
+ * isRelationPopulated('7674e91b-598a-4a72-a5cd-9594736a34dd');
+ *
+ * @example
+ * // Returns: false
+ * isRelationPopulated([]);
+ *
+ * @example
+ * // Returns: false
+ * isRelationPopulated([
+ *   {
+ *     id: '7674e91b-598a-4a72-a5cd-9594736a34dd',
+ *     relationTo: 'articles',
+ *     documentId: 'b674e91b-598a-4a72-a5cd-9594736a34dd'
+ *   }
+ * ]);
+ */
+export declare const isRelationPopulated: <T>(value: RelationValue<T>) => value is T[];
+/**
+ * Checks if a relation value is resolved (contains the actual referenced document).
+ *
+ * @example
+ * // Returns true for a resolved relation
+ * isRelationResolved({ title: 'Home Page', _prototype: 'collection', _type: 'pages' });
+ */
+export declare const isRelationResolved: <T>(value: any) => value is T;
+/**
+ * Checks if a relation value is a reference (contains only the relationTo and documentId).
+ *
+ * @example
+ * // Returns true for a relation reference
+ * isRelationRef({ relationTo: 'pages', documentId: '123' });
+ */
+export declare const isRelationRef: (value: unknown) => value is RelationRef;
+/**
+ * Checks if a relation value is unresolved (contains only reference information).
+ *
+ * @example
+ * // Returns true for an unresolved relation
+ * isRelationUnresolved({ relationTo: 'pages', documentId: '123' });
+ */
+export declare const isRelationUnresolved: (value: any) => value is Omit<Relation, "path" | "position" | "ownerId">;
+/**
+ * Resolves a relation reference to the actual document it points to.
+ *
+ * @example
+ * // Resolves a relation reference to the actual document
+ * const doc = await resolveRelationRef({ relationTo: 'pages', documentId: '123' });
+ */
+export declare function resolveRelationRef<T>(item: T | RelationRef | string): Promise<T>;
+/**
+ * Resolves a relation field value to the actual documents it points to.
+ *
+ * @example
+ * // Resolves a relation value to the actual documents
+ * const docs = await resolveRelation([{ relationTo: 'pages', documentId: '123' }]);
+ */
+export declare function resolveRelation<T>(value: RelationValue<T> | null | undefined): Promise<T[] | null | undefined>;

package/dist/fields/relation/util.js

@@ -0,0 +1,103 @@
+import { hasProps, isObjectLiteral } from '../../util/object.js';
+/**
+ * Checks if a relation field's value is populated with full documents.
+ *
+ * A relation is considered populated if it is an array of objects that do not
+ * contain only the relation identifiers (`id`, `relationTo`, `documentId`).
+ * If the value is a string or an array of relation identifier objects,
+ * it is considered not populated.
+ *
+ * @example
+ * // Returns: false
+ * isRelationPopulated('7674e91b-598a-4a72-a5cd-9594736a34dd');
+ *
+ * @example
+ * // Returns: false
+ * isRelationPopulated([]);
+ *
+ * @example
+ * // Returns: false
+ * isRelationPopulated([
+ *   {
+ *     id: '7674e91b-598a-4a72-a5cd-9594736a34dd',
+ *     relationTo: 'articles',
+ *     documentId: 'b674e91b-598a-4a72-a5cd-9594736a34dd'
+ *   }
+ * ]);
+ */
+export const isRelationPopulated = (value) => {
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return false;
+        return value.every((v) => {
+            return isObjectLiteral(v) && !hasProps(['id', 'relationTo', 'documentId'], v);
+        });
+    }
+    return typeof value !== 'string';
+};
+/**
+ * Checks if a relation value is resolved (contains the actual referenced document).
+ *
+ * @example
+ * // Returns true for a resolved relation
+ * isRelationResolved({ title: 'Home Page', _prototype: 'collection', _type: 'pages' });
+ */
+export const isRelationResolved = (value) => {
+    return value && isObjectLiteral(value) && hasProps(['title', '_prototype', '_type'], value);
+};
+/**
+ * Checks if a relation value is a reference (contains only the relationTo and documentId).
+ *
+ * @example
+ * // Returns true for a relation reference
+ * isRelationRef({ relationTo: 'pages', documentId: '123' });
+ */
+export const isRelationRef = (value) => typeof value === 'object' &&
+    value !== null &&
+    typeof value.relationTo === 'string' &&
+    typeof value.documentId === 'string';
+/**
+ * Checks if a relation value is unresolved (contains only reference information).
+ *
+ * @example
+ * // Returns true for an unresolved relation
+ * isRelationUnresolved({ relationTo: 'pages', documentId: '123' });
+ */
+export const isRelationUnresolved = (value) => {
+    return value && isObjectLiteral(value) && hasProps(['relationTo', 'documentId'], value);
+};
+/**
+ * Resolves a relation reference to the actual document it points to.
+ *
+ * @example
+ * // Resolves a relation reference to the actual document
+ * const doc = await resolveRelationRef({ relationTo: 'pages', documentId: '123' });
+ */
+export async function resolveRelationRef(item) {
+    if (isRelationRef(item)) {
+        return fetch(`api/${item.relationTo}/${item.documentId}`)
+            .then((r) => r.json())
+            .then((r) => r.doc);
+    }
+    if (typeof item === 'string') {
+        throw new Error(`Cannot resolve relation from a bare id ("${item}") — missing "relationTo". ` +
+            `resolveRelationRef only works on populated docs or { relationTo, documentId } objects.`);
+    }
+    if (isRelationResolved(item)) {
+        return item;
+    }
+    throw new Error(`Unrecognized relation shape: ${JSON.stringify(item)}`);
+}
+/**
+ * Resolves a relation field value to the actual documents it points to.
+ *
+ * @example
+ * // Resolves a relation value to the actual documents
+ * const docs = await resolveRelation([{ relationTo: 'pages', documentId: '123' }]);
+ */
+export async function resolveRelation(value) {
+    if (value === null || value === undefined)
+        return value;
+    const items = Array.isArray(value) ? value : [value];
+    return Promise.all(items.map((item) => resolveRelationRef(item)));
+}

package/dist/fields/relation/value.d.ts

@@ -0,0 +1,25 @@
+import type { GenericDoc } from '../../core/prototype/types.js';
+import type { Relation } from './index.js';
+/** A related document as the field holds it before it is written: its id, and its row if any. */
+export type RelationItem = {
+    documentId: string;
+    id?: string;
+    livePreview?: GenericDoc;
+};
+/**
+ * The value a relation field writes for these documents, in this order.
+ *
+ * ```ts
+ * toRelationValue([{ documentId: 'a' }, { documentId: 'b', id: 'r1' }], { relationTo: 'medias', path: 'photos' })
+ * // [{ relationTo: 'medias', path: 'photos', position: 0, documentId: 'a' },
+ * //  { id: 'r1', relationTo: 'medias', path: 'photos', position: 1, documentId: 'b' }]
+ * ```
+ *
+ * `locale` is set on a localized field; `livePreview` rides along in a live-edit form.
+ */
+export declare function toRelationValue(items: RelationItem[], args: {
+    relationTo: string;
+    path: string;
+    locale?: string;
+    live?: boolean;
+}): Omit<Relation, 'ownerId'>[];

package/dist/fields/relation/value.js

@@ -0,0 +1,27 @@
+/**
+ * The value a relation field writes for these documents, in this order.
+ *
+ * ```ts
+ * toRelationValue([{ documentId: 'a' }, { documentId: 'b', id: 'r1' }], { relationTo: 'medias', path: 'photos' })
+ * // [{ relationTo: 'medias', path: 'photos', position: 0, documentId: 'a' },
+ * //  { id: 'r1', relationTo: 'medias', path: 'photos', position: 1, documentId: 'b' }]
+ * ```
+ *
+ * `locale` is set on a localized field; `livePreview` rides along in a live-edit form.
+ */
+export function toRelationValue(items, args) {
+    return items.map((item, index) => {
+        const relation = {
+            id: item.id,
+            relationTo: args.relationTo,
+            path: args.path,
+            position: index,
+            documentId: item.documentId
+        };
+        if (args.locale)
+            relation.locale = args.locale;
+        if (args.live && item.livePreview)
+            relation.livePreview = item.livePreview;
+        return relation;
+    });
+}

package/dist/fields/rich-text/client.d.ts

@@ -5,11 +5,8 @@ import { type LinkFeatureOptions } from './core/features/link/index.js';
 import type { ResourceFeatureExtensionOptions } from './core/features/resource/resource-extension.js';
 import type { RichTextResource } from './core/features/resource/types.js';
 import type { UploadFeatureExtensionOptions } from './core/features/upload/upload-extension.js';
-import RenderRichText from './core/render-rich-text.svelte';
 import SvelteNodeViewRenderer from './core/svelte/node-view-renderer.svelte';
 import NodeViewWrapper from './core/svelte/node-view-wrapper.svelte';
-import type { RichTextNodeRenderer, RichTextNodeRendererProps } from './core/types.js';
-import { richTextJSONToText } from './index.js';
 export declare const fields: (args: FieldsFeatureOptions) => import("./core/types.js").RichTextFeature;
 export declare const bold: () => import("./core/types.js").RichTextFeature;
 export declare const bulletList: () => import("./core/types.js").RichTextFeature;
@@ -22,5 +19,5 @@ export declare const blockquote: () => import("./core/types.js").RichTextFeature
 export declare const italic: () => import("./core/types.js").RichTextFeature;
 export declare const upload: (args: UploadFeatureExtensionOptions) => import("./core/types.js").RichTextFeature;
 export declare const resource: (args: ResourceFeatureExtensionOptions) => import("./core/types.js").RichTextFeature;
-export { NodeViewWrapper, RenderRichText, richTextJSONToText, SvelteNodeViewRenderer };
-export type { JSONContent, RichTextNodeRenderer, RichTextNodeRendererProps, RichTextResource };
+export { NodeViewWrapper, SvelteNodeViewRenderer };
+export type { JSONContent, RichTextResource };

package/dist/fields/rich-text/client.js

@@ -10,10 +10,8 @@ import { OrderedListFeature } from './core/features/ordered-list.js';
 import { ParagraphFeature } from './core/features/paragraph.js';
 import { ResourceFeature } from './core/features/resource/index.js';
 import { UploadFeature } from './core/features/upload/index.js';
-import RenderRichText from './core/render-rich-text.svelte';
 import SvelteNodeViewRenderer from './core/svelte/node-view-renderer.svelte';
 import NodeViewWrapper from './core/svelte/node-view-wrapper.svelte';
-import { richTextJSONToText } from './index.js';
 export const fields = (args) => FieldsFeature(args);
 export const bold = () => BoldFeature;
 export const bulletList = () => BulletListFeature;
@@ -26,4 +24,4 @@ export const blockquote = () => BlockquoteFeature;
 export const italic = () => ItalicFeature;
 export const upload = (args) => UploadFeature(args);
 export const resource = (args) => ResourceFeature(args);
-export { NodeViewWrapper, RenderRichText, richTextJSONToText, SvelteNodeViewRenderer };
+export { NodeViewWrapper, SvelteNodeViewRenderer };

package/dist/fields/rich-text/component/Cell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { richTextJSONToText } from '../index.js';
+  import { richTextJSONToText } from '../json.js';
 
   let { value }: { value: string } = $props();
 

package/dist/fields/rich-text/component/RichText.svelte

@@ -1,61 +1,15 @@
 <script lang="ts">
   import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
-  import { random } from '../../../util/index.js';
-  import { Editor, type JSONContent } from '@tiptap/core';
-  import { onMount } from 'svelte';
-  import { buildEditorConfig } from '../core/build-editor-config.js';
+  import type { JSONContent } from '@tiptap/core';
   import { defaultFeatures } from '../core/features/index.js';
-  import type { RichTextFeature } from '../core/types';
-  import { hasSuggestion } from '../util.js';
-  import EditorBubbleMenu from './bubble-menu/bubble-menu.svelte';
-  import { setRichTextContext } from './context.svelte.js';
-  import DragHandler from './drag-handle/drag-handle.svelte';
+  import RichTextEditorCore from '../core/rich-text-editor-core.svelte';
   import type { RichTextFieldProps } from './props.js';
-  import './styles/rich-text.css';
-  import Suggestion from './suggestion/suggestion.svelte';
+  import './styles/field.css';
 
   const { path, config, form, standAlone, class: className }: RichTextFieldProps = $props();
 
-  let element: HTMLElement;
-  const key = $derived(`richtext-${path}`);
-
-  let editor = $state<Editor>();
-  let features = $state<RichTextFeature[]>([]);
   const field = $derived(form.useField<JSONContent>(path, config));
-  const instanceId = random.randomId(8);
-
-  const ctx = setRichTextContext(instanceId);
-
-  const withSuggestion = $derived(hasSuggestion(config.get.features || defaultFeatures));
-
-  onMount(() => {
-    // Build editor configuration
-    const richTextEditorConfig = buildEditorConfig({
-      features: config.get.features || defaultFeatures
-    });
-
-    features = richTextEditorConfig.features;
-    editor = new Editor({
-      ...richTextEditorConfig.tiptap,
-      element,
-      editable: field.editable
-    });
-
-    if (field.value?.content) {
-      try {
-        editor.commands.setContent(field.value.content);
-      } catch (err) {
-        editor.commands.setContent('');
-        console.log(err);
-      }
-    }
-
-    // Update field value when editor content changes
-    editor.on('update', ({ editor }) => {
-      field.value = editor.getJSON();
-    });
-  });
 </script>
 
 <fieldset
@@ -67,25 +21,15 @@
 
   <Field.Error error={field.error} />
 
-  <div class="rz-rich-text__editor-wrapper">
-    <div
-      bind:this={element}
-      data-error={field.error ? 'true' : null}
-      class="rz-rich-text__editor {className}"
-    ></div>
-
-    {#if editor && editor.isEditable}
-      <DragHandler {editor} />
-
-      {#if withSuggestion}
-        <Suggestion {editor} {features} />
-      {/if}
-
-      {#key key}
-        <EditorBubbleMenu {features} {editor} {path} context={ctx} />
-      {/key}
-    {/if}
-  </div>
+  <RichTextEditorCore
+    {path}
+    features={config.get.features || defaultFeatures}
+    value={field.value}
+    editable={field.editable}
+    error={!!field.error}
+    class={className}
+    onUpdate={(json) => (field.value = json)}
+  />
 
   {#if !standAlone}
     <Field.Hint {config} />
@@ -93,18 +37,6 @@
 </fieldset>
 
 <style>
-  .rz-rich-text__editor-wrapper {
-    position: relative;
-  }
-
-  .rz-field-rich-text {
-    :global {
-      .ProseMirror-gapcursor:after {
-        border-top: 1px solid hsl(var(--rz-color-fg));
-      }
-    }
-  }
-
   .rz-field-rich-text__label-box {
     display: flex;
     align-items: center;

package/dist/fields/rich-text/component/RichText.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RichTextFieldProps } from './props.js';
-import './styles/rich-text.css';
+import './styles/field.css';
 declare const RichText: import("svelte").Component<RichTextFieldProps, {}, "">;
 type RichText = ReturnType<typeof RichText>;
 export default RichText;

package/dist/fields/rich-text/component/RichTextInline.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+  import type { JSONContent } from '@tiptap/core';
+  import { defaultFeatures } from '../core/features/index.js';
+  import RichTextEditorCore from '../core/rich-text-editor-core.svelte';
+  import type { RichTextFieldBuilder } from '../index.js';
+
+  type Props = {
+    path: string;
+    config: RichTextFieldBuilder;
+    form: DocumentFormContext;
+    class?: string;
+  };
+  const { path, config, form, class: className }: Props = $props();
+
+  const field = $derived(form.useField<JSONContent>(path, config));
+</script>
+
+<!-- A rich text edited where a block render draws it: the editor's controls, no fieldset. -->
+<RichTextEditorCore
+  {path}
+  features={config.get.features || defaultFeatures}
+  value={field.value}
+  editable={field.editable}
+  error={!!field.error}
+  class={className}
+  onUpdate={(json) => (field.value = json)}
+/>

package/dist/fields/rich-text/component/RichTextInline.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+import type { RichTextFieldBuilder } from '../index.js';
+type Props = {
+    path: string;
+    config: RichTextFieldBuilder;
+    form: DocumentFormContext;
+    class?: string;
+};
+declare const RichTextInline: import("svelte").Component<Props, {}, "">;
+type RichTextInline = ReturnType<typeof RichTextInline>;
+export default RichTextInline;

package/dist/fields/rich-text/component/bubble-menu/bubble-menu.css

@@ -5,10 +5,11 @@
   width: fit-content;
   gap: var(--rz-size-1);
   border-radius: var(--rz-radius-lg);
-  border: var(--rz-border);
-  background-color: hsl(var(--rz-color-bg));
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
   padding: var(--rz-size-1);
-  box-shadow: var(--rz-shadow-xl);
   visibility: hidden;
   position: absolute;
   left: -9999px;

package/dist/fields/rich-text/component/bubble-menu/bubble-menu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as random from '../../../../util/random.js';
   import type { Editor } from '@tiptap/core';
   import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
   import { onDestroy, onMount } from 'svelte';
@@ -59,7 +60,8 @@
     ...features.flatMap((feature) => getBubbleMenuItems(feature.nodes || [], feature))
   ]);
 
-  const pluginKey = $derived(path);
+  // One key for the menu's life: the path changes when the field moves, the plugin stays.
+  const pluginKey = `rz-bubble-menu-${random.randomId(8)}`;
   const updateDelay = 250;
 
   const shouldShow = ({ editor }: { editor: Editor }) => {

package/dist/fields/rich-text/component/bubble-menu/icon-button/icon-button.css

@@ -6,10 +6,10 @@
   justify-content: center;
   border-radius: var(--rz-radius-lg);
   /* padding: var(--rz-size-2); */
-  color: hsl(var(--rz-color-fg));
+  color: var(--rz-fg);
 }
 
 .rz-icon-button__icon--active {
-  color: hsl(var(--rz-color-spot));
+  color: var(--rz-accent-text);
   opacity: 1;
 }