rimecms 0.33.0 → 1.0.0

package/dist/fields/tabs/component/Tabs.svelte

@@ -21,7 +21,10 @@
 
   // Retrieve active tab from localStorage, if not found use the first tab.
   // If the stored active tab is not available in live mode, fallback to the first tab.
+  // The server has no storage: it renders the first tab. Node 25+ warns on any read of its
+  // `localStorage`, so the check is on `window`.
   let activeTabName = $derived.by(() => {
+    if (typeof window === 'undefined') return config.get.tabs[0].name;
     let storedActiveTab = localStorage.getItem(storageActiveKey);
     if (storedActiveTab && form.isLive) {
       const activeTab = config.get.tabs.find((tab) => tab.name === storedActiveTab);
@@ -60,18 +63,22 @@
 
 <div class="rz-tabs">
   <Tabs.Root onValueChange={onActiveTabChange} value={activeTabName}>
-    <Tabs.List>
-      {#each config.get.tabs as tab, index (index)}
-        {#if isTabVisible(tab)}
-          <Tabs.Trigger
-            data-error={errorTabs.includes(tabIds[index]) ? 'true' : null}
-            value={tab.name}
-          >
-            {tab.get.label || tab.name}
-          </Tabs.Trigger>
-        {/if}
-      {/each}
-    </Tabs.List>
+    <!-- A strip of page that stays under the header, so the fields scroll behind it. -->
+    <div class="rz-tabs__bar">
+      <Tabs.List>
+        {#each config.get.tabs as tab, index (index)}
+          {#if isTabVisible(tab)}
+            <Tabs.Trigger
+              data-error={errorTabs.includes(tabIds[index]) ? 'true' : null}
+              data-label={tab.get.label || tab.name}
+              value={tab.name}
+            >
+              {tab.get.label || tab.name}
+            </Tabs.Trigger>
+          {/if}
+        {/each}
+      </Tabs.List>
+    </div>
 
     {#each config.get.tabs as tab, index (index)}
       {#if isTabVisible(tab)}
@@ -96,18 +103,17 @@
 </div>
 
 <style>
+  .rz-tabs__bar {
+    position: sticky;
+    top: var(--rz-tabs-list-top, var(--rz-size-11));
+    z-index: 40;
+    margin-inline: calc(-1 * var(--rz-fields-padding));
+    padding: var(--rz-size-2) var(--rz-fields-padding);
+  }
+
   .rz-tabs :global {
     .rz-tabs-content {
-      margin-top: var(--rz-size-8);
-    }
-
-    .rz-tabs-list {
-      padding-left: var(--rz-fields-padding);
-      padding-right: var(--rz-fields-padding);
-      position: sticky;
-      top: var(--rz-tabs-list-top, var(--rz-size-14));
-      margin-bottom: 0;
-      z-index: 40;
+      margin-top: var(--rz-size-6);
     }
   }
 </style>

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

@@ -1,4 +1,4 @@
-import { FieldBuilder } from '../../core/fields/builders/field-builder.js';
+import { FieldBuilder, type FieldNode, type ValueNode } from '../../core/fields/builders/field-builder.js';
 import type { Field } from '../types.js';
 import type { WithoutBuilders } from '../../core/fields/types.js';
 export declare const tabs: (...tabs: TabBuilder[]) => TabsBuilder;
@@ -38,6 +38,9 @@ export declare class TabsBuilder extends FieldBuilder<TabsField> {
         };
     };
     protected generateType(): string;
+    /** The builder has no name of its own, so each tab's name is the whole segment. */
+    protected nodes(): FieldNode[];
+    protected nodesFor(value: unknown): ValueNode[];
 }
 export declare class TabBuilder {
     #private;

package/dist/fields/tabs/index.js

@@ -1,5 +1,6 @@
 import { FieldBuilder } from '../../core/fields/builders/field-builder.js';
-import { isCamelCase } from '../../util/string.js';
+import { isObjectLiteral } from '../../util/object.js';
+import { isCamelCase, joinMemberTypes } from '../../util/string.js';
 import Tabs from './component/Tabs.svelte';
 export const tabs = (...tabs) => new TabsBuilder(...tabs);
 export const tab = (name) => new TabBuilder(name);
@@ -22,12 +23,23 @@ export class TabsBuilder extends FieldBuilder {
     generateType() {
         const types = [];
         for (const tab of this.field.tabs) {
-            const fieldsTypes = tab.get.fields.map((field) => field.use.generateType()).filter(Boolean);
-            if (fieldsTypes.length) {
-                types.push(`${tab.name}: {${fieldsTypes.join(',\n\t\t')}}`);
+            const fieldsTypes = joinMemberTypes(tab.get.fields.map((field) => field.use.generateType()));
+            if (fieldsTypes) {
+                types.push(`${tab.name}: {${fieldsTypes}}`);
             }
         }
-        return types.length ? types.join(',\n\t').replaceAll(',,', ',') : '';
+        return types.join(',\n');
+    }
+    /** The builder has no name of its own, so each tab's name is the whole segment. */
+    nodes() {
+        return this.field.tabs.map((tab) => ({ segment: tab.name, fields: tab.get.fields }));
+    }
+    nodesFor(value) {
+        if (!isObjectLiteral(value))
+            return [];
+        return this.field.tabs
+            .filter((tab) => tab.name in value)
+            .map((tab) => ({ segment: tab.name, fields: tab.get.fields, value: value[tab.name] }));
     }
 }
 export class TabBuilder {

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

@@ -52,6 +52,7 @@ export declare class TextFieldBuilder extends FormFieldBuilder<TextField> {
         } | undefined;
         isEmpty: (value: unknown) => boolean;
         root?: boolean | undefined;
+        index?: boolean | undefined;
     } & {
         component: import("svelte").Component<any>;
         cell?: import("svelte").Component<{

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

@@ -28,13 +28,31 @@
   <Field.Hint {config} />
 </fieldset>
 
-<style>textarea {
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* 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. */
+textarea {
     field-sizing: content;
-    border: 1px solid var(--rz-input-border-color);
-    background-color: hsl(var(--rz-input-bg));
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
     display: flex;
     width: 100%;
-    border-radius: var(--rz-radius-md);
+    border-radius: var(--rz-radius-lg);
     line-height: 1.5em;
     min-height: var(--rz-size-20);
     padding-inline: var(--rz-size-3);
@@ -42,9 +60,8 @@
 
     &:global([data-error]) {
       outline: none;
-      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));
+      border-color: var(--rz-danger);
+      box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
     }
   }
 
@@ -53,17 +70,15 @@
     cursor: not-allowed;
   }
   textarea::-moz-placeholder {
-    color: hsl(var(--rz-color-fg) / 0.5);
+    color: var(--rz-fg-subtle);
   }
   textarea::placeholder {
-    color: hsl(var(--rz-color-fg) / 0.5);
+    color: var(--rz-fg-subtle);
   }
 
   textarea:focus-visible {
     outline: none;
-    /* --rz-ring-offset: 1px; */
-    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));
+    border-color: var(--rz-accent-border);
+    box-shadow: 0 0 0 3px var(--rz-ring);
   }
 </style>

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

@@ -46,6 +46,7 @@ export declare class TextAreaFieldBuilder extends FormFieldBuilder<TextAreaField
         defaultValue?: string | DefaultValueFn<string> | undefined;
         isEmpty: (value: unknown) => boolean;
         root?: boolean | undefined;
+        index?: boolean | undefined;
         isTitle?: true | undefined;
         placeholder: string;
     } & {

package/dist/fields/time/component/Time.svelte

@@ -35,12 +35,17 @@
 <style>
   .rz-time-field__input-wrapper {
     display: flex;
-    width: 200px;
+    width: var(--rz-size-52);
     position: relative;
     :global {
       .rz-input {
         display: block;
       }
+      /* The browser's own clock stays clickable, unseen, under ours. */
+      .rz-input::-webkit-calendar-picker-indicator {
+        opacity: 0;
+        cursor: pointer;
+      }
     }
   }
 
@@ -48,8 +53,10 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    right: var(--rz-size-4);
+    right: var(--rz-size-3);
     display: flex;
     align-items: center;
+    color: var(--rz-fg-subtle);
+    pointer-events: none;
   }
 </style>

package/dist/fields/toggle/component/Toggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
+  import '../../../panel/components/fields/setting.css';
   import { Switch } from '../../../panel/components/ui/switch/index.js';
   import { slugify } from '../../../util/string.js';
   import type { ToggleProps } from './props.js';
@@ -14,36 +15,18 @@
   };
 </script>
 
-<fieldset class="rz-toggle-field {config.get.className || ''}" use:fieldset={field}>
-  <div class="rz-toggle-field-wrap">
+<!-- A row of a card: the name and the hint, then the switch. -->
+<fieldset class="rz-toggle-field rz-setting {config.get.className || ''}" use:fieldset={field}>
+  <div class="rz-setting__row">
+    <div class="rz-setting__text">
+      <Field.LabelFor {config} for={inputId} />
+      <Field.Hint {config} />
+    </div>
     <Switch
       data-error={field.error ? '' : null}
       checked={field.value}
       {onCheckedChange}
       id={inputId}
     />
-    <Field.LabelFor {config} for={inputId} />
   </div>
-  <Field.Hint {config} />
 </fieldset>
-
-<style>
-  .rz-toggle-field-wrap {
-    display: flex;
-    align-items: center;
-  }
-
-  .rz-toggle-field-wrap > :global(* + *) {
-    margin-left: var(--rz-size-2);
-  }
-
-  .rz-toggle-field {
-    margin-block: var(--rz-size-3);
-  }
-
-  .rz-toggle-field :global {
-    .rz-field-hint {
-      margin-left: var(--rz-size-8);
-    }
-  }
-</style>

package/dist/fields/toggle/component/Toggle.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../panel/components/fields/setting.css';
 import type { ToggleProps } from './props.js';
 declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
 type Toggle = ReturnType<typeof Toggle>;

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

@@ -43,6 +43,7 @@ export declare class ToggleFieldBuilder extends BooleanFieldBuilder<ToggleField>
         } | undefined;
         isEmpty: (value: unknown) => boolean;
         root?: boolean | undefined;
+        index?: boolean | undefined;
     } & {
         component: import("svelte").Component<any>;
         cell?: import("svelte").Component<{

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FieldBuilder } from '../../../core/fields/builders';
-  import { emptyValuesFromFieldConfig, isFormField } from '../../../core/fields/util';
+  import { emptyValuesFromFieldConfig } from '../../../core/fields/util';
   import type { Field } from '../../types.js';
   import Button from '../../../panel/components/ui/button/button.svelte';
   import type { Dic } from '../../../util/types';
@@ -18,7 +18,7 @@
   const { class: className, fields, addItem, size, children }: Props = $props();
 
   const add = () => {
-    const empty = emptyValuesFromFieldConfig(fields.filter(isFormField));
+    const empty = emptyValuesFromFieldConfig(fields);
     addItem(empty);
   };
 </script>
@@ -27,7 +27,7 @@
   icon={Plus}
   class="rz-add-item-button {className}"
   onclick={() => add()}
-  variant="outline"
+  variant="ghost"
   {size}
 >
   <span>
@@ -36,9 +36,22 @@
 </Button>
 
 <style>
+  /* A ghost "+ Add": the muted ink, a subtle plus, both darkening on hover. */
   :global {
-    .rz-add-item-button {
-      gap: var(--rz-size-2);
+    .rz-add-item-button.rz-button {
+      gap: var(--rz-size-1-5);
+      height: var(--rz-size-7);
+      padding-inline: var(--rz-size-1-5) var(--rz-size-2);
+      color: var(--rz-fg-muted);
+    }
+    .rz-add-item-button .rz-button__icon {
+      width: auto;
+      height: auto;
+      color: var(--rz-fg-subtle);
+    }
+    .rz-add-item-button.rz-button:hover:not(:disabled),
+    .rz-add-item-button.rz-button:hover:not(:disabled) .rz-button__icon {
+      color: var(--rz-fg);
     }
   }
 </style>

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

@@ -19,6 +19,7 @@
   const treeState = $derived(form.useTree(path));
   const field = $derived(form.useField(path, config));
   let sortingInitialized = $state(false);
+  let fieldElement = $state<HTMLFieldSetElement>();
   let sorting = $state(false);
   let sortableInstances = $state<ReturnType<typeof Sortable.create>[]>([]);
 
@@ -27,10 +28,21 @@
   const nested = $derived(path.split('.').length > 1);
   const shouldInit = $derived(!sortingInitialized && treeState.items.length > 0);
 
+  /**
+   * A card drags by its header, and shows only its header while it moves; where it lands is a
+   * line. Dropped in an open card's _Inside_ zone, it goes inside that item.
+   */
   const sortableOptions: Sortable.Options = {
     handle: '.rz-tree-item__grip',
+    draggable: '.rz-tree-item',
     animation: 150,
-    swapThreshold: 0.93,
+    forceFallback: true,
+    fallbackOnBody: true,
+    fallbackClass: 'rz-tree-item--floating',
+    ghostClass: 'rz-tree-item--landing',
+    swapThreshold: 0.65,
+    // An empty zone has little height: a drop this close lands in it.
+    emptyInsertThreshold: 12,
     group: {
       name: `list-${key}`,
       put: (to, _, el) => {
@@ -40,8 +52,14 @@
         return targetDepth + childrenCount <= config.get.maxDepth;
       }
     },
-    onStart: () => (sorting = true),
-    onUnchoose: () => (sorting = false),
+    onStart: () => {
+      sorting = true;
+      holdHeight(true);
+    },
+    onUnchoose: () => {
+      sorting = false;
+      holdHeight(false);
+    },
     onEnd: function (evt) {
       const { newIndex, to } = evt;
 
@@ -59,6 +77,15 @@
     }
   };
 
+  /**
+   * While a card moves, the field keeps its height: a card leaving the bottom of the page would
+   * scroll it, and the zone under the pointer with it.
+   */
+  function holdHeight(hold: boolean) {
+    if (!fieldElement) return;
+    fieldElement.style.minHeight = hold ? `${fieldElement.offsetHeight}px` : '';
+  }
+
   const resetSortable = () => {
     destroySortable();
     sortingInitialized = false;
@@ -70,9 +97,7 @@
   };
 
   const add = (emptyValues: Dic) => {
-    treeState.addItem({
-      ...emptyValues
-    });
+    treeState.addItem(emptyValues);
     resetSortable();
   };
 
@@ -93,7 +118,11 @@
   });
 </script>
 
-<fieldset class="rz-field-tree {config.get.className}" use:fieldset={field}>
+<fieldset
+  class="rz-field-tree {config.get.className}"
+  bind:this={fieldElement}
+  use:fieldset={field}
+>
   <Field.Error error={field.error} />
 
   <Field.Label {config} />
@@ -134,23 +163,23 @@
 </fieldset>
 
 <style>
-  .rz-tree__list :global(.rz-tree__list) {
-    margin-left: 2rem;
-  }
-
-  .rz-field-tree {
-    :global(> .rz-label) {
-      margin-bottom: var(--rz-size-5);
-    }
-  }
-  .rz-tree__list {
-    display: grid;
-    margin-left: 1rem;
+  /* The items of the first level: one card each. */
+  .rz-tree__list--root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-2);
   }
 
+  /* Under the cards: the add button, the locale import. */
   .rz-tree__actions {
     display: flex;
     align-items: center;
     gap: var(--rz-size-3);
+    margin-top: var(--rz-size-2-5);
+    margin-left: calc(-0.5 * var(--rz-unit));
+  }
+
+  .rz-tree__list--root[data-empty] + .rz-tree__actions {
+    margin-top: 0;
   }
 </style>