rimecms 0.27.6 → 0.28.1

package/dist/fields/relation/component/default/Default.svelte

@@ -155,13 +155,7 @@
   {/if}
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-relation {
+<style>.rz-relation {
     position: relative;
 
     :global {

package/dist/fields/relation/component/upload/upload.css

@@ -24,11 +24,10 @@
   flex-wrap: wrap;
   gap: var(--rz-size-4);
 }
-
 .rz-relation-upload__list:not(.rz-relation-upload__list[data-many]) {
   @container relation-upload-list (min-width: 285px) {
     .rz-card-resource {
-      width: min(400px, 100%);
+      width: min(310px, 100%);
       .rz-card-resource__info {
         display: block;
       }
@@ -41,7 +40,6 @@
     }
   }
 }
-
 .rz-relation-upload__actions {
   display: flex;
   margin-top: var(--rz-size-3);
@@ -58,7 +56,6 @@
 .rz-relation-upload__actions.rz-relation-upload__actions--list-empty {
   margin-top: 0;
 }
-
 .rz-relation-upload__search {
   height: var(--rz-size-10);
   align-items: center;
@@ -67,30 +64,25 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-
 .rz-relation-upload__command-list {
   padding: var(--rz-size-2);
 }
-
 .rz-relation-upload__command-item[aria-selected='true'] {
   /* background-color: hsl(var(--rz-gray-5)); */
   background-color: var(--rz-popover-high-light-bg);
 }
-
 .rz-relation-upload__grid-item {
   display: flex;
   gap: var(--rz-size-4);
   padding-left: var(--rz-size-1);
   padding-right: var(--rz-size-1);
 }
-
 .rz-relation-upload__grid-thumbnail {
   width: var(--rz-size-16);
   height: var(--rz-size-16);
   overflow: hidden;
   border-radius: var(--rz-radius-lg);
 }
-
 .rz-relation-upload__grid-filename {
   margin-top: var(--rz-size-2);
   display: -webkit-box;
@@ -102,7 +94,6 @@
   font-variation-settings: 'wght' 600;
   font-weight: 600;
 }
-
 .rz-relation-upload__grid-filesize,
 .rz-relation-upload__grid-mimetype {
   text-align: left;

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

@@ -1,6 +1,6 @@
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
 import type { CollectionSlug, GenericDoc } from '../../core/types/doc.js';
-import type { DefaultValueFn, Field, FieldHookShared, FormField } from '../types.js';
+import type { DefaultValueFn, Field, FieldHookShared, FormField, RelationRef, RelationValue } from '../types.js';
 import type { RegisterCollection } from '../../index.js';
 import type { WithOptional } from '../../util/types';
 export declare const ensureRelationExists: FieldHookShared;
@@ -38,6 +38,14 @@ export declare const isRelationField: (field: Field) => field is RelationField;
  * 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).
  *
@@ -47,14 +55,21 @@ export declare const isRelationResolved: <T>(value: any) => value is T;
  */
 export declare const isRelationUnresolved: (value: any) => value is Omit<Relation, "path" | "position" | "ownerId">;
 /**
- * Resolves a relation by fetching the referenced document.
- * If the relation is already resolved, returns it as is.
+ * 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 to its full document
- * const page = await resolveRelation({ relationTo: 'pages', documentId: '123' });
+ * // Resolves a relation value to the actual documents
+ * const docs = await resolveRelation([{ relationTo: 'pages', documentId: '123' }]);
  */
-export declare const resolveRelation: <T>(value: any) => Promise<T>;
+export declare function resolveRelation<T>(value: RelationValue<T> | null | undefined): Promise<T[] | null | undefined>;
 /****************************************************/
 export type RelationField<Doc extends GenericDoc = GenericDoc> = FormField & {
     type: 'relation';

package/dist/fields/relation/index.js

@@ -102,6 +102,17 @@ export const isRelationField = (field) => field.type === 'relation';
 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).
  *
@@ -113,18 +124,37 @@ export const isRelationUnresolved = (value) => {
     return value && isObjectLiteral(value) && hasProps(['relationTo', 'documentId'], value);
 };
 /**
- * Resolves a relation by fetching the referenced document.
- * If the relation is already resolved, returns it as is.
+ * Resolves a relation reference to the actual document it points to.
  *
  * @example
- * // Resolves a relation to its full document
- * const page = await resolveRelation({ relationTo: 'pages', documentId: '123' });
+ * // Resolves a relation reference to the actual document
+ * const doc = await resolveRelationRef({ relationTo: 'pages', documentId: '123' });
  */
-export const resolveRelation = async (value) => {
-    if (isRelationResolved(value)) {
-        return value;
+export async function resolveRelationRef(item) {
+    if (isRelationRef(item)) {
+        return fetch(`api/${item.relationTo}/${item.documentId}`)
+            .then((r) => r.json())
+            .then((r) => r.doc);
     }
-    return (await fetch(`api/${value.relationTo}/${value.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/rich-text/component/RichText.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Field } from '../../../panel/components/fields/index.js';
   import { root } from '../../../panel/components/fields/root.svelte.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';
@@ -22,10 +23,9 @@
   let editor = $state<Editor>();
   let features = $state<RichTextFeature[]>([]);
   const field = $derived(form.useField<JSONContent>(path, config));
+  const instanceId = random.randomId(8);
 
-  $effect(() => {
-    setRichTextContext(path);
-  });
+  const ctx = setRichTextContext(instanceId);
 
   const withSuggestion = $derived(hasSuggestion(config.features || defaultFeatures));
 
@@ -82,7 +82,7 @@
       {/if}
 
       {#key key}
-        <EditorBubbleMenu {features} {editor} {path} />
+        <EditorBubbleMenu {features} {editor} {path} context={ctx} />
       {/key}
     {/if}
   </div>

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

@@ -7,7 +7,7 @@
     RichTextFeatureMark,
     RichTextFeatureNode
   } from '../../core/types.js';
-  import { getRichTextContext } from '../context.svelte';
+  import type { RichTextContext } from '../context.svelte';
   import './bubble-menu.css';
   import IconButton from './icon-button/icon-button.svelte';
   import NodeSelector, { type NodeSelectorItem } from './node-selector/node-selector.svelte';
@@ -18,12 +18,13 @@
   };
 
   type Props = {
+    context: RichTextContext;
     editor: Editor;
     features: RichTextFeature[];
     path: string;
   };
 
-  const { editor, path, features = [] }: Props = $props();
+  const { editor, path, features = [], context }: Props = $props();
 
   let element: HTMLElement;
   let isOpen = $state(false);
@@ -60,7 +61,6 @@
 
   const pluginKey = $derived(path);
   const updateDelay = 250;
-  const richTextContext = $derived(getRichTextContext(path));
 
   const shouldShow = ({ editor }: { editor: Editor }) => {
     return (
@@ -87,11 +87,11 @@
       updateDelay,
       options: {
         onShow() {
-          richTextContext.bubbleOpen = true;
+          context.bubbleOpen = true;
           isOpen = true;
         },
         onHide() {
-          richTextContext.bubbleOpen = false;
+          context.bubbleOpen = false;
           isOpen = false;
         }
       }
@@ -128,7 +128,7 @@
           options={item.options}
           {editor}
           {path}
-          context={richTextContext}
+          {context}
         />
       {:else if item.bubbleMenu?.command}
         <IconButton

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

@@ -1,7 +1,9 @@
 import type { Editor } from '@tiptap/core';
 import type { RichTextFeature } from '../../core/types.js';
+import type { RichTextContext } from '../context.svelte';
 import './bubble-menu.css';
 type Props = {
+    context: RichTextContext;
     editor: Editor;
     features: RichTextFeature[];
     path: string;

package/dist/fields/rich-text/component/drag-handle/drag-handle.css

@@ -13,6 +13,7 @@
 }
 
 /** Show drag handle only when more than 1 node */
+
 .ProseMirror:not(:has(> *:nth-child(2))) + div > .rz-rich-text-drag-handle {
   display: none !important;
 }

package/dist/fields/rich-text/component/styles/rich-text.css

@@ -22,7 +22,6 @@
     display: inline-block;
   }
 }
-
 /** Disabled style */
 .rz-rich-text__editor > [contenteditable='false'] {
   color: hsl(var(--rz-color-fg) / 0.5);
@@ -32,7 +31,6 @@
     opacity: 0.9;
   }
 }
-
 /** All editor > node */
 .ProseMirror > *:not(.ProseMirror-gapcursor) {
   background-color: hsl(var(--rz-input-bg));
@@ -55,16 +53,13 @@
     border-bottom: 1px solid var(--rz-input-border-color);
   }
 }
-
 /** Disable focus-style on the whole editor */
 .ProseMirror-focused {
   outline: none;
 }
-
 .rz-rich-text__editor[data-error]:has(.ProseMirror-focused) {
   border-color: hsl(var(--rz-color-alert));
 }
-
 .rz-rich-text__editor .ProseMirror .is-empty:not(table)::before {
   content: attr(data-placeholder);
   color: hsl(var(--rz-color-fg) / 0.3);
@@ -77,7 +72,6 @@
 .rz-rich-text__editor .ProseMirror blockquote.is-empty::before {
   margin-left: var(--rz-size-6);
 }
-
 /** Text styles */
 .rz-rich-text__editor .ProseMirror {
   h1 {
@@ -176,7 +170,6 @@
     font-weight: 500;
   }
 }
-
 /** Fix gap cursor position */
 .rz-field-rich-text .ProseMirror-gapcursor:after {
   left: calc(var(--left-spacing) + var(--rz-size-4));

package/dist/fields/rich-text/core/features/resource/resource.svelte

@@ -127,13 +127,7 @@
   </Command.List>
 </Command.Dialog>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-:global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
+<style>:global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
     :global(.rz-card-resource),
     :global(button.rz-richtext-resource__add) {
       box-shadow:
@@ -141,8 +135,7 @@
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-spot) / var(--rz-ring-opacity, 1));
     }
   }
-
-.rz-richtext-resource {
+  .rz-richtext-resource {
     position: relative;
     --rz-border-radius: var(--rz-radius-xl);
     --rz-ressource-card-thumbnail-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-3)));

package/dist/fields/rich-text/core/features/upload/upload.svelte

@@ -207,13 +207,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-:global(.ProseMirror-selectednode .rz-richtext-media) {
+<style>:global(.ProseMirror-selectednode .rz-richtext-media) {
     .rz-richtext-media__media,
     :global(button.rz-richtext-media__add) {
       box-shadow:
@@ -225,16 +219,15 @@
     }
   }
 
-.rz-richtext-media {
+  .rz-richtext-media {
     position: relative;
   }
 
-.rz-richtext-media__media {
+  .rz-richtext-media__media {
     border-radius: var(--rz-radius-lg);
     overflow: hidden;
   }
-
-.rz-richtext-media__actions {
+  .rz-richtext-media__actions {
     position: absolute;
     font-size: var(--rz-text-sm);
     right: var(--rz-size-3);
@@ -261,7 +254,7 @@
     }
   }
 
-.rz-richtext-media__legend {
+  .rz-richtext-media__legend {
     font-style: italic;
     font-size: var(--rz-text-sm);
     opacity: 0.5;

package/dist/fields/rich-text/core/render-rich-text.svelte

@@ -137,16 +137,18 @@
         <li {...node.attrs}><RenderRichText {components} json={node} /></li>
       {/if}
       <!--  -->
-    {:else if node.type === 'media'}
+    {:else if node.type?.startsWith('rich-text-upload-')}
       {#if components?.media}
         <components.media {components} {node}>
           <RenderRichText {components} json={node} />
         </components.media>
+      {:else if node.attrs?.url && node.attrs.mimeType?.startsWith('image/')}
+        <img alt={node.attrs?.alt || ''} style="width:100%;height:auto;" src={node.attrs?.url} />
       {:else}
         [Provide a media component to render this node]
       {/if}
       <!--  -->
-    {:else if node.type === 'resource'}
+    {:else if node.type?.startsWith('rich-text-resource-')}
       {#if components?.resource}
         <components.resource {components} {node}>
           <RenderRichText {components} json={node} />
@@ -154,7 +156,7 @@
       {:else}
         [Provide a resource component to render this node]
       {/if}
-    {:else if node.type === 'fields'}
+    {:else if node.type?.startsWith('rich-text-fields-')}
       {#if components?.fields}
         <components.fields {components} {node}>
           <RenderRichText {components} json={node} />

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

@@ -46,7 +46,7 @@ export declare const isJSONContent: (value: any) => value is JSONContent;
  * // Returns "Hello world"
  * richTextJSONToText('{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello world"}]}]}');
  */
-export declare const richTextJSONToText: (value: string | JSONContent) => string;
+export declare const richTextJSONToText: (value: string | JSONContent | undefined) => string;
 type RichTextContent = {
     type: 'doc';
     content: JSONContent[];

package/dist/fields/select/component/Select.svelte

@@ -151,13 +151,7 @@
   <Field.Hint {config} />
 </fieldset>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-select {
+<style>.rz-select {
     margin-bottom: var(--rz-size-2);
     position: relative;
 
@@ -187,7 +181,7 @@
     }
   }
 
-.rz-select__list {
+  .rz-select__list {
     background-color: hsl(var(--rz-input-bg));
     border: var(--rz-border);
     border-radius: var(--rz-radius-md);
@@ -198,19 +192,19 @@
     padding: var(--rz-size-2) var(--rz-size-3);
   }
 
-.rz-select__list[data-focused] {
+  .rz-select__list[data-focused] {
     box-shadow:
     0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
   }
 
-.rz-select__list[data-error] {
+  .rz-select__list[data-error] {
     box-shadow:
     0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
   }
 
-.rz-select__list--readonly {
+  .rz-select__list--readonly {
     cursor: no-drop;
   }
 </style>

package/dist/fields/tabs/index.d.ts

@@ -43,6 +43,7 @@ export declare class TabBuilder {
     constructor(name: string);
     label(label: string): this;
     get name(): string;
+    get tab(): TabsFieldTab;
     fields(...fields: FieldBuilder<Field>[]): this;
     get raw(): {
         name: string;

package/dist/fields/tabs/index.js

@@ -36,6 +36,9 @@ export class TabBuilder {
     get name() {
         return this.#tab.name;
     }
+    get tab() {
+        return this.#tab;
+    }
     fields(...fields) {
         this.#tab.fields = fields;
         return this;

package/dist/fields/textarea/component/TextArea.svelte

@@ -28,13 +28,7 @@
   <Field.Hint {config} />
 </fieldset>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-textarea {
+<style>textarea {
     field-sizing: content;
     border: 1px solid var(--rz-input-border-color);
     background-color: hsl(var(--rz-input-bg));
@@ -54,20 +48,18 @@ textarea {
     }
   }
 
-textarea:disabled {
+  textarea:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-
-textarea::-moz-placeholder {
+  textarea::-moz-placeholder {
     color: hsl(var(--rz-color-fg) / 0.5);
   }
-
-textarea::placeholder {
+  textarea::placeholder {
     color: hsl(var(--rz-color-fg) / 0.5);
   }
 
-textarea:focus-visible {
+  textarea:focus-visible {
     outline: none;
     /* --rz-ring-offset: 1px; */
     box-shadow:

package/dist/fields/tree/component/TreeBlock.svelte

@@ -118,31 +118,25 @@
   {/if}
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-tree-item {
+<style>.rz-tree-item {
     position: relative;
   }
 
-.rz-tree-item__grip {
+  .rz-tree-item__grip {
     cursor: grab;
     position: absolute;
     top: 1rem;
     left: -1rem;
   }
 
-.rz-tree-item__header:hover {
+  .rz-tree-item__header:hover {
     > :global(.rz-tree-item-actions) {
       opacity: 1;
       pointer-events: all;
     }
   }
 
-.rz-tree-item__header {
+  .rz-tree-item__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -155,7 +149,7 @@
     width: 100%;
   }
 
-.rz-tree-item__content--closed {
+  .rz-tree-item__content--closed {
     .rz-tree-item__header {
       border-radius: var(--rz-radius-md);
     }
@@ -166,20 +160,20 @@
     }
   }
 
-.rz-tree-item__content + .rz-tree-item__list-placeholder,
+  .rz-tree-item__content + .rz-tree-item__list-placeholder,
   .rz-tree-item__content + .rz-tree__list {
     margin-top: 1rem;
     min-height: 5px;
   }
 
-.rz-tree-item__title {
+  .rz-tree-item__title {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--rz-size-2);
   }
 
-.rz-tree-item__fields {
+  .rz-tree-item__fields {
     --rz-fields-padding: var(--rz-size-4);
     background-color: var(--rz-collapse-fields-content-bg);
     border: var(--rz-border);
@@ -190,21 +184,21 @@
     flex: 1;
   }
 
-.rz-tree-item__fields--hidden {
+  .rz-tree-item__fields--hidden {
     display: none;
   }
 
-.rz-tree-item[data-sorting='true'] .rz-tree-item__grip {
+  .rz-tree-item[data-sorting='true'] .rz-tree-item__grip {
     display: none;
   }
 
-.rz-tree-item__content--closed:has(:global(.rz-field-error)) {
+  .rz-tree-item__content--closed:has(:global(.rz-field-error)) {
     box-shadow:
     0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
   }
 
-:global(.rz-tree-item-actions) {
+  :global(.rz-tree-item-actions) {
     opacity: 0;
     pointer-events: none;
   }

package/dist/fields/types.d.ts

@@ -107,11 +107,12 @@ export type OptionWithIcon = {
     label?: string;
     icon?: Component<IconProps>;
 };
-export type RelationValue<T> = T[] | {
+export type RelationRef = {
     id?: string;
     relationTo: string;
     documentId: string;
-}[] | string[] | string;
+};
+export type RelationValue<T> = T[] | RelationRef[] | string[] | string;
 export type SimplerField<T extends FormField> = WithRequired<Partial<T>, 'name' | 'isEmpty' | 'type'>;
 export type BaseUseFieldReturn = {
     path: string;