rimecms 0.27.6 → 0.28.0

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;

package/dist/live.d.ts

@@ -1,3 +1,4 @@
 import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
+import LiveEdit from './panel/components/sections/live/LiveEdit.svelte';
 import LiveProvider from './panel/components/sections/live/Provider.svelte';
-export { LiveConsumer, LiveProvider };
+export { LiveConsumer, LiveEdit, LiveProvider };

package/dist/live.js

@@ -1,3 +1,4 @@
 import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
+import LiveEdit from './panel/components/sections/live/LiveEdit.svelte';
 import LiveProvider from './panel/components/sections/live/Provider.svelte';
-export { LiveConsumer, LiveProvider };
+export { LiveConsumer, LiveEdit, LiveProvider };

package/dist/panel/components/fields/Error.svelte

@@ -27,13 +27,7 @@
   </div>
 {/if}
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-field-error {
+<style>.rz-field-error {
     color: hsl(var(--rz-ground-6) / 1);
     background-color: hsl(var(--rz-color-alert));
     position: absolute;

package/dist/panel/components/sections/collection/Empty.svelte

@@ -18,6 +18,7 @@
   .rz-no-document {
     height: var(--rz-input-height);
     background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
+    color: hsl(var(--rz-gray-10));
     display: flex;
     align-items: center;
     border-radius: var(--rz-radius-md);

package/dist/panel/components/sections/collection/folder/Folder.svelte

@@ -29,18 +29,12 @@
   {@render children()}
 </h3>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-:root {
-    --rz-folder-light: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-6)));
-    --rz-folder-dark: light-dark(hsl(var(--rz-gray-10)), hsl(var(--rz-gray-4)));
+<style>:root {
+    --rz-folder-light: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-6)));
+    --rz-folder-dark: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-4)));
   }
 
-h3 {
+  h3 {
     font-variation-settings: 'wght' 600;
     font-weight: 600;
     overflow: hidden;
@@ -51,17 +45,14 @@ h3 {
     text-align: center;
     margin-block: var(--rz-size-3);
   }
-
-.rz-folder-svg {
+  .rz-folder-svg {
     aspect-ratio: 5 / 4;
     width: 100%;
   }
-
-.rz-folder-svg path:first-child {
+  .rz-folder-svg path:first-child {
     fill: var(--rz-folder-dark);
   }
-
-.rz-folder-svg path:last-child {
+  .rz-folder-svg path:last-child {
     fill: var(--rz-folder-light);
   }
 </style>

package/dist/panel/components/sections/collection/folder/FolderWithActions.svelte

@@ -205,7 +205,7 @@
 
 <style>
   :root {
-    --rz-folder-hover-bg: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-1)));
+    --rz-folder-hover-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-1)));
   }
 
   .rz-folder--dragging {

package/dist/panel/components/sections/collection/grid/CollectionGrid.svelte

@@ -11,10 +11,13 @@
 
   type Props = { collection: CollectionContext };
   const { collection }: Props = $props();
+
   let createDirectoryDialogOpen = $state(false);
 
   const currentPathDocuments = $derived(
-    collection.docs.filter((doc) => doc._path === collection.upload.currentPath)
+    collection.docs.filter((doc) =>
+      !collection.isUpload ? true : doc._path === collection.upload.currentPath
+    )
   );
 
   function onDeleteFolder(path: string) {
@@ -24,9 +27,10 @@
   const hasContentUnfiltered = $derived(
     !collection.isFiltered &&
       (collection.docs.length ||
-        collection.upload.directories.length ||
-        collection.upload.parentDirectory)
+        (collection.isUpload && collection.upload.directories.length) ||
+        (collection.isUpload && collection.upload.parentDirectory))
   );
+
   const hasDocsFiltered = $derived(collection.isFiltered && collection.docs.length);
 
   /**
@@ -44,7 +48,8 @@
   }
 
   const dragEnabled = $derived(
-    !!(collection.upload.directories.length || collection.upload.parentDirectory)
+    collection.isUpload &&
+      !!(collection.upload.directories.length || collection.upload.parentDirectory)
   );
 </script>
 
@@ -52,7 +57,7 @@
   <div class="rz-page-collection__grid">
     <div class="rz-page-collection__grid-inner">
       <!-- Parent directory -->
-      {#if collection.upload.parentDirectory && !collection.isFiltered}
+      {#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
         <Folder
           {onDocumentDrop}
           folder={{ ...collection.upload.parentDirectory, name: '...' }}
@@ -61,7 +66,7 @@
       {/if}
 
       <!-- All children directories -->
-      {#if !collection.isFiltered}
+      {#if !collection.isFiltered && collection.isUpload}
         {#each collection.upload.directories as folder (folder.id)}
           <Folder
             draggable="true"
@@ -76,11 +81,14 @@
       <!-- All children docs -->
       {#each currentPathDocuments as doc (doc.id)}
         {@const checked = collection.selected.includes(doc.id)}
-        {#if dragEnabled}
-          <GridItem draggable="true" {doc} {checked} />
-        {:else}
-          <GridItem {doc} {checked} />
-        {/if}
+        <GridItem
+          config={collection.config}
+          toggleSelectOf={collection.toggleSelectOf}
+          isSelectMode={collection.selectMode}
+          draggable={dragEnabled ? 'true' : undefined}
+          {doc}
+          {checked}
+        />
       {/each}
 
       <ContextMenu>
@@ -95,7 +103,9 @@
         {/snippet}
       </ContextMenu>
 
-      <CreateDirectoryDialog {collection} bind:open={createDirectoryDialogOpen} />
+      {#if collection.isUpload}
+        <CreateDirectoryDialog {collection} bind:open={createDirectoryDialogOpen} />
+      {/if}
     </div>
   </div>
 {:else}

package/dist/panel/components/sections/collection/grid/create-directory-dialog/CreateDirectoryDialog.svelte

@@ -7,18 +7,17 @@
   import * as Dialog from '../../../../ui/dialog/index.js';
   import type { CollectionContext } from '../../../../../context/collection.svelte.js';
   import { getConfigContext } from '../../../../../context/config.svelte.js';
-  import {
-    setDocumentFormContext,
-    type FormSuccessData
-  } from '../../../../../context/documentForm.svelte.js';
+  import { setDocumentFormContext } from '../../../../../context/documentForm.svelte.js';
 
   type Props = { collection: CollectionContext; open: boolean };
   let { collection, open = $bindable() }: Props = $props();
 
   let formElement = $state<HTMLFormElement>();
   const configCtx = getConfigContext();
+
   // svelte-ignore state_referenced_locally
   const directoriesConfig = configCtx.getCollection(withDirectoriesSuffix(collection.config.slug));
+
   // svelte-ignore state_referenced_locally
   const form = setDocumentFormContext({
     initial: {
@@ -31,7 +30,7 @@
   });
 
   // Prevent redirection after directory creation
-  async function beforeRedirect(data?: FormSuccessData) {
+  async function beforeRedirect() {
     open = false;
     invalidateAll();
     return false;