rimecms 1.0.1 → 1.1.0

package/dist/fields/rich-text/core/features/link/component/link-selector.svelte

@@ -251,7 +251,7 @@
   </Command.List>
 </Command.Dialog>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -294,7 +294,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
     animation: fadeInSlideFromTop 0.2s ease-out;
     border-radius: var(--rz-radius-lg);
   }

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

@@ -127,7 +127,7 @@
   </Command.List>
 </Command.Dialog>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -207,7 +207,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -155,7 +155,7 @@
   <Field.Hint {config} />
 </fieldset>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -188,7 +188,7 @@
       background-color: var(--rz-bg-float);
       box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
       position: absolute;
       left: 0;
       right: 0;

package/dist/fields/text/component/TextInline.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import type { TextAreaFieldBuilder } from '../../textarea/index.js';
+  import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+  import { capitalize } from '../../../util/string.js';
+  import type { TextFieldBuilder } from '../index.js';
+
+  type Props = {
+    path: string;
+    config: TextFieldBuilder | TextAreaFieldBuilder;
+    form: DocumentFormContext;
+    /** The element drawn: `h2`, `p`… `span` by default. */
+    as?: string;
+    class?: string;
+  };
+  const { path, config, form, as = 'span', class: className }: Props = $props();
+
+  const field = $derived(form.useField<string>(path, config));
+  /** A textarea keeps its lines; a text is one. */
+  const multiline = $derived(config.type === 'textarea');
+  let element = $state<HTMLElement>();
+
+  // The value goes into the element only when it differs from what the element shows: the caret
+  // stays where it is while typing, and a change made in the inspector shows here. The element
+  // has no children of Svelte's to lose.
+  $effect(() => {
+    const value = field.value ?? '';
+    // eslint-disable-next-line svelte/no-dom-manipulating
+    if (element && element.textContent !== value) element.textContent = value;
+  });
+
+  function oninput() {
+    if (!element) return;
+    // Emptied, the element keeps no stray line break, so its placeholder shows again.
+    // eslint-disable-next-line svelte/no-dom-manipulating
+    if (!element.textContent) element.replaceChildren();
+    field.value = element.textContent ?? '';
+  }
+
+  /** In a text, Enter adds nothing. */
+  function onkeydown(event: KeyboardEvent) {
+    if (!multiline && event.key === 'Enter') event.preventDefault();
+  }
+
+  /** Pasted into a text, line breaks become spaces. */
+  function onpaste(event: ClipboardEvent) {
+    if (multiline) return;
+    event.preventDefault();
+    const text = (event.clipboardData?.getData('text/plain') ?? '').replace(/\s*\r?\n\s*/g, ' ');
+    const selection = window.getSelection();
+    if (!selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(document.createTextNode(text));
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    oninput();
+  }
+</script>
+
+<!-- A text edited where a block render draws it: the render's own element, its tag and its class. -->
+<svelte:element
+  this={as}
+  bind:this={element}
+  class="rz-text-inline {className ?? ''}"
+  contenteditable={field.editable ? 'plaintext-only' : 'false'}
+  role="textbox"
+  tabindex="0"
+  aria-multiline={multiline}
+  aria-label={config.get.label || capitalize(config.name)}
+  data-multiline={multiline ? '' : null}
+  data-placeholder={config.get.placeholder || capitalize(config.name)}
+  data-error={field.error ? '' : null}
+  {oninput}
+  {onkeydown}
+  {onpaste}
+></svelte:element>
+
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+/* The render's own text: no frame of its own while edited, as a rich text in place. */
+  .rz-text-inline {
+    border-radius: var(--rz-radius-sm);
+    outline: none;
+    cursor: text;
+
+    &[data-multiline] {
+      white-space: pre-wrap;
+    }
+    &[data-error] {
+      outline: 1px solid var(--rz-danger);
+      outline-offset: 2px;
+    }
+    &:empty::before {
+      content: attr(data-placeholder);
+      color: var(--rz-fg-subtle);
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/fields/text/component/TextInline.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TextAreaFieldBuilder } from '../../textarea/index.js';
+import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+import type { TextFieldBuilder } from '../index.js';
+type Props = {
+    path: string;
+    config: TextFieldBuilder | TextAreaFieldBuilder;
+    form: DocumentFormContext;
+    /** The element drawn: `h2`, `p`… `span` by default. */
+    as?: string;
+    class?: string;
+};
+declare const TextInline: import("svelte").Component<Props, {}, "">;
+type TextInline = ReturnType<typeof TextInline>;
+export default TextInline;

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

@@ -28,7 +28,7 @@
   <Field.Hint {config} />
 </fieldset>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -164,7 +164,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -184,7 +184,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     border-radius: var(--rz-radius-xl);
   }
 
@@ -197,8 +197,8 @@
     background-color: transparent;
   }
 
-  /* Inside a group, a block or a stage card: a hairline, no second fill. */
-  :global(:is(.rz-group-field__content, .rz-block__fields, .rz-stage__fields)) .rz-tree-item {
+  /* Inside a group, a block or the inspector: a hairline, no second fill. */
+  :global(:is(.rz-group-field__content, .rz-block__fields, .rz-inspector__fields)) .rz-tree-item {
     background-color: transparent;
     box-shadow: 0 0 0 1px var(--rz-border);
   }

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

@@ -27,7 +27,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -45,7 +45,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -10,7 +10,7 @@
   {@render children()}
 </button>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -23,7 +23,7 @@
   </p>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/fields/setting.css

@@ -3,9 +3,9 @@
  * Rows that follow each other share one card, a hairline between them.
  *
  *   ╭────────────────────────────────────╮
- *   │ Show in the navigation        ━●  │
+ *   │ Show in the navigation        ━●   │
  *   ├────────────────────────────────────┤
- *   │ Hide from search engines      ●━  │
+ *   │ Hide from search engines      ●━   │
  *   ╰────────────────────────────────────╯
  */
 
@@ -13,7 +13,7 @@
   background-color: var(--rz-bg-raised);
   box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
   border-radius: var(--rz-radius-xl);
 }
 
@@ -33,8 +33,8 @@
   margin-top: var(--rz-size-0-5);
 }
 
-/* Inside a group, a block, a tree item or a stage card: a hairline, no second fill. */
-:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-stage__fields)
+/* Inside a group, a block, a tree item or the inspector: a hairline, no second fill. */
+:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-inspector__fields)
   .rz-setting {
   background-color: transparent;
   box-shadow: 0 0 0 1px var(--rz-border);
@@ -72,7 +72,7 @@
 }
 
 /* Without a fill, the earlier row's edge is the hairline: the later one hides its own. */
-:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-stage__fields)
+:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-inspector__fields)
   .rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox']):has(
     > .rz-setting[data-visible]
   )

package/dist/panel/components/sections/auth/AuthForm.svelte

@@ -25,7 +25,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -68,7 +68,7 @@
       background-color: var(--rz-bg-raised);
       box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
 
       @media (min-width: 1024px) {
         margin: 1rem;

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

@@ -20,7 +20,7 @@
 
 <span class="rz-avatar rz-avatar--{size}" aria-hidden="true">{initials}</span>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/bulk-upload/FileDrop.svelte

@@ -83,7 +83,7 @@
   />
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/bulk-upload/PageDrop.svelte

@@ -111,7 +111,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -142,7 +142,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
     font-variation-settings: 'wght' 500;
     font-weight: 500;
     display: flex;
@@ -158,7 +158,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
     position: fixed;
     right: var(--rz-size-4);
     bottom: var(--rz-size-4);

package/dist/panel/components/sections/collection/bulk-upload/UploadProgress.svelte

@@ -25,7 +25,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -29,7 +29,7 @@
   {@render children()}
 </h3>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -210,7 +210,7 @@
 
 <FolderEdit bind:open={editFolderDialogOpen} {folder} {collection} />
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -230,7 +230,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     display: flex;
     width: 100%;
     height: calc(10.5 * var(--rz-unit));

package/dist/panel/components/sections/collection/grid/grid-item/GridItem.svelte

@@ -137,7 +137,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/header/DisplayMode.svelte

@@ -30,7 +30,7 @@
   {/each}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -69,7 +69,6 @@
 
     &[aria-pressed='true'] {
       background-color: var(--rz-bg-knob);
-      box-shadow: var(--rz-shadow-knob);
       color: var(--rz-fg);
     }
 

package/dist/panel/components/sections/collection/list/CollectionList.svelte

@@ -59,7 +59,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -85,7 +85,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     border-radius: var(--rz-radius-lg);
     overflow: hidden;
 

package/dist/panel/components/sections/collection/list/header/Header.svelte

@@ -59,7 +59,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/list/row/Row.svelte

@@ -110,7 +110,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/tree/CollectionTree.svelte

@@ -122,7 +122,7 @@
   {/if}
 {/key}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/tree/CollectionTreeNode.svelte

@@ -99,7 +99,7 @@
   </div>
 {/key}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte

@@ -47,7 +47,7 @@
   }
 
   .rz-upload-preview-cell {
-    --size: var(--rz-upload-preview-cell-size, var(--rz-size-9));
+    --size: var(--rz-upload-preview-cell-size, var(--rz-size-8));
     display: flex;
     width: var(--size);
     height: var(--size);

package/dist/panel/components/sections/commands/CommandButton.svelte

@@ -42,7 +42,7 @@
   </Button>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/AuthAPIKeyDialog.svelte

@@ -55,7 +55,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/AuthFooter.svelte

@@ -77,7 +77,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -97,7 +97,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     display: grid;
     gap: var(--rz-size-5);
     padding: var(--rz-size-4) var(--rz-size-3-5);

package/dist/panel/components/sections/document/AutoSaveBanner.svelte

@@ -86,7 +86,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -122,7 +122,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
   }
   .rz-auto-save-banner__actions {
     display: flex;

package/dist/panel/components/sections/document/ButtonStatus.svelte

@@ -103,7 +103,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/ChangeSlugDialog.svelte

@@ -106,7 +106,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/DocumentChildren.svelte

@@ -73,7 +73,7 @@
   </section>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -129,7 +129,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     display: grid;
     overflow: hidden;
     border-radius: var(--rz-radius-lg);

package/dist/panel/components/sections/document/upload-header/UploadHeader.svelte

@@ -117,7 +117,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -142,7 +142,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     overflow: hidden;
     border-radius: var(--rz-radius-xl);
   }

package/dist/panel/components/sections/document/upload-header/drop-zone/DropZone.svelte

@@ -116,7 +116,7 @@
   />
 </label>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */