rimecms 0.33.0 → 1.0.0

package/dist/fields/tree/index.js

@@ -1,6 +1,6 @@
 import { FieldBuilder } from '../../core/fields/builders/field-builder.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
-import { toPascalCase } from '../../util/string.js';
+import { joinMemberTypes, toPascalCase } from '../../util/string.js';
 import dedent from 'dedent';
 import { number } from '../number/index.js';
 import { text } from '../text/index.js';
@@ -44,18 +44,14 @@ export class TreeBuilder extends FormFieldBuilder {
         }
         this.field.localized = true;
         // Add a locale prop in its fields
-        const hasAlreadyLocale = !!this.field.fields
-            .filter((field) => field instanceof FormFieldBuilder)
-            .find((field) => field.name === 'locale');
+        const hasAlreadyLocale = this.field.fields.some((field) => field.name === 'locale');
         if (!hasAlreadyLocale) {
             this.field.fields.push(text('locale').hidden());
         }
         // Set all descendant fields localized
         this.field.fields = this.field.fields.map((field) => {
-            // If it's a "position" or "path" field do not set as localized
-            // as it's a treeBlock property
-            if (field instanceof FormFieldBuilder &&
-                ['position', 'path', 'locale'].includes(field.name)) {
+            // A row's own members are not content: position, path and locale stay as they are.
+            if (['position', 'path', 'locale'].includes(field.name)) {
                 return field;
             }
             // For all others fields set as localized
@@ -77,7 +73,7 @@ export class TreeBuilder extends FormFieldBuilder {
     }
     generateType() {
         const blockTypeName = `Tree${toPascalCase(this.name)}`;
-        const fieldsType = this.get.fields.map((f) => f.use.generateType()).join(',\n');
+        const fieldsType = joinMemberTypes(this.get.fields.map((f) => f.use.generateType()));
         const treeType = dedent `
     //@shared:start ${blockTypeName}
      export type ${blockTypeName} = {
@@ -88,6 +84,36 @@ export class TreeBuilder extends FormFieldBuilder {
     //@shared:end`;
         return `${treeType}\n\n${this.name}: Array<${blockTypeName}>,`;
     }
+    /** One branch, nesting into itself through `_children`, in a table of its own. */
+    nodes() {
+        return [
+            { segment: '#', repeatVia: '_children', fields: this.field.fields, storage: this.storage }
+        ];
+    }
+    get storage() {
+        return { kind: 'tree', name: this.name };
+    }
+    /**
+     * The rows a value has, the nesting flattened into the segment.
+     *
+     * ```
+     * [{ label: 'a', _children: [{ label: 'b' }] }]  ->  0  ·  0._children.0
+     * ```
+     */
+    nodesFor(value) {
+        const nodes = [];
+        const walk = (items, prefix) => {
+            if (!Array.isArray(items))
+                return;
+            items.forEach((item, index) => {
+                const segment = prefix ? `${prefix}._children.${index}` : `${index}`;
+                nodes.push({ segment, fields: this.field.fields, storage: this.storage, value: item });
+                walk(item?._children, segment);
+            });
+        };
+        walk(value, '');
+        return nodes;
+    }
 }
 /**
  * Checks if a field is a tree field.

package/dist/fields/types.d.ts

@@ -6,7 +6,7 @@ import type { RequestEvent } from '@sveltejs/kit';
 import type { Component } from 'svelte';
 import type { User } from '../core/auth/types.js';
 import type { FieldPanelTableConfig } from '../panel/types.js';
-export type { BlocksField, BlocksFieldBlock } from './blocks/index.js';
+export type { BlockRenderProps, BlocksField, BlocksFieldBlock } from './blocks/index.js';
 export type { CheckboxField } from './checkbox/index.js';
 export type { ComboBoxField } from './combobox/index.js';
 export type { ComponentField } from './component/index.js';
@@ -67,6 +67,8 @@ export type FormField = Field & {
     isEmpty: (value: unknown) => boolean;
     /** Kept on the base row of a versioned config, shared by every version. Set by `$root()`. */
     root?: boolean;
+    /** The column gets a database index. Set by `$index()`. */
+    index?: boolean;
 };
 export type DefaultValueFn<T> = ({ event }: {
     event?: RequestEvent;

package/dist/index.d.ts

@@ -1,13 +1,14 @@
-import i18n, { t__ } from './core/i18n/index.js';
+import { getI18nContext, setI18nContext } from './core/i18n/context.js';
+import i18n, { createI18n, t__ } from './core/i18n/index.js';
 import { cache } from './core/plugins/cache/index.js';
 import { openSse } from './core/plugins/sse/index.js';
 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 type { Dictionaries, PanelLanguage } from './core/i18n/index.js';
+export type { Dictionaries, I18n, PanelLanguage, Translate } from './core/i18n/index.js';
 export { definePlugin } from './core/plugins/index.js';
 export type { SSEEvent, SSEHandler } from './core/plugins/sse/index.js';
-export { cache, i18n, LiveConsumer, LiveEdit, LiveProvider, openSse, t__ };
+export { cache, createI18n, getI18nContext, i18n, LiveConsumer, LiveEdit, LiveProvider, openSse, setI18nContext, t__ };
 declare module 'rimecms' {
     interface RegisterCollection {
     }

package/dist/index.js

@@ -1,8 +1,9 @@
-import i18n, { t__ } from './core/i18n/index.js';
+import { getI18nContext, setI18nContext } from './core/i18n/context.js';
+import i18n, { createI18n, t__ } from './core/i18n/index.js';
 import { cache } from './core/plugins/cache/index.js';
 import { openSse } from './core/plugins/sse/index.js';
 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 { definePlugin } from './core/plugins/index.js';
-export { cache, i18n, LiveConsumer, LiveEdit, LiveProvider, openSse, t__ };
+export { cache, createI18n, getI18nContext, i18n, LiveConsumer, LiveEdit, LiveProvider, openSse, setI18nContext, t__ };

package/dist/panel/components/Root.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import type { User } from '../../core/auth/types.js';
   import type { BuiltConfigClient } from '../../core/config/types.js';
+  import Commands from './sections/commands/Commands.svelte';
   import Nav from './ui/nav/Nav.svelte';
   import { Toaster } from './ui/sonner';
   import { setConfigContext } from '../context/config.svelte.js';
   import { setLocaleContext } from '../context/locale.svelte.js';
+  import { setNavContext } from '../context/nav.svelte.js';
   import { setUserContext } from '../context/user.svelte.js';
   import type { Route } from '../types.js';
-  import { onMount, type Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
   import { setAPIProxyContext } from '../context/api-proxy.svelte.js';
   import { setTitleContext } from '../context/title.js';
 
@@ -20,8 +22,7 @@
   };
   const { config, routes, children, locale: initialeLocale, user }: Props = $props();
 
-  let isCollapsed = $state(false);
-  let localeCollapsed = $state<string | null>(null);
+  const nav = setNavContext();
 
   // svelte-ignore state_referenced_locally
   setConfigContext(config);
@@ -38,58 +39,29 @@
   $effect(() => {
     locale.code = initialeLocale;
   });
-
-  function onResize() {
-    if (window.innerWidth < 1024) {
-      isCollapsed = true;
-    } else {
-      if (!localeCollapsed || localeCollapsed === 'false') {
-        isCollapsed = false;
-        localeCollapsed = 'false';
-      }
-    }
-  }
-
-  const setCollapsed = (bool: boolean) => {
-    isCollapsed = bool;
-    localeCollapsed = bool.toString();
-    localStorage.setItem('rz-panel-collapsed', bool.toString());
-  };
-
-  onMount(() => {
-    localeCollapsed = localStorage.getItem('rz-panel-collapsed');
-    if (localeCollapsed) {
-      setCollapsed(localeCollapsed === 'true');
-    }
-    onResize();
-  });
 </script>
 
-<svelte:window on:resize={onResize} />
-
 <Toaster />
 
-<div class="rz-panel-root">
-  <Nav {setCollapsed} {routes} {isCollapsed} />
-  <div class="rz-panel-root__right" class:rz-panel-root__right--navCollapsed={isCollapsed}>
-    {@render children()}
+<Commands {routes}>
+  <div class="rz-panel-root">
+    <Nav {routes} />
+    <div
+      class="rz-panel-root__right"
+      style="margin-left:{nav.width}"
+      class:rz-panel-root__right--navCollapsed={nav.collapsed}
+    >
+      {@render children()}
+    </div>
   </div>
-</div>
+</Commands>
 
 <style>
   .rz-panel-root {
     container-type: inline-size;
     container-name: rz-panel;
     font-family: var(--rz-font-sans);
-    background-color: hsl(var(--rz-color-bg));
+    background-color: var(--rz-bg-page);
     min-height: 100vh;
   }
-
-  .rz-panel-root__right {
-    margin-left: var(--rz-size-72);
-  }
-
-  .rz-panel-root__right--navCollapsed {
-    margin-left: var(--rz-size-14);
-  }
 </style>

package/dist/panel/components/Root.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { User } from '../../core/auth/types.js';
 import type { BuiltConfigClient } from '../../core/config/types.js';
 import type { Route } from '../types.js';
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 type Props = {
     routes: Record<string, Route[]>;
     children: Snippet;

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

@@ -27,9 +27,24 @@
   </div>
 {/if}
 
-<style>.rz-field-error {
-    color: hsl(var(--rz-ground-6) / 1);
-    background-color: hsl(var(--rz-color-alert));
+<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. */
+.rz-field-error {
+    color: var(--rz-accent-fg);
+    background-color: var(--rz-danger);
     position: absolute;
     right: 0;
     top: 0;

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

@@ -45,27 +45,43 @@
   {/if}
 </div>
 
-<style>
+<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. */
+/* A table: a hairline between name and value, and between rows. */
   .rz-render-fields-preview {
     display: grid;
   }
   .rz-render-fields-preview__row {
-    height: var(--rz-input-height);
-    align-items: center;
     display: grid;
-    grid-template-columns: minmax(var(--rz-size-24), var(--rz-size-32)) 1fr;
-    padding-right: 0 var(--rz-size-4);
+    grid-template-columns: minmax(var(--rz-size-24), var(--rz-size-40)) minmax(0, 1fr);
+    min-height: var(--rz-size-9);
   }
-  .rz-render-fields-preview__row:not(:last-child) {
-    border-bottom: var(--rz-border);
+  .rz-render-fields-preview__row + .rz-render-fields-preview__row {
+    box-shadow: inset 0 1px 0 var(--rz-border);
   }
-  .rz-render-fields-preview__name {
-    height: calc(var(--rz-input-height) - 1px);
-    background-color: hsl(var(--rz-color-bg));
-    padding: 0 var(--rz-size-4);
-    border-right: var(--rz-border);
-    align-items: center;
+  .rz-render-fields-preview__name,
+  .rz-render-fields-preview__value {
     display: flex;
+    align-items: center;
+    min-width: 0;
+    padding-inline: var(--rz-size-3-5);
+  }
+  .rz-render-fields-preview__name {
+    box-shadow: inset -1px 0 0 var(--rz-border);
+    color: var(--rz-fg-subtle);
     > p {
       overflow: hidden;
       display: -webkit-box;
@@ -74,10 +90,7 @@
     }
   }
   .rz-render-fields-preview__value {
-    height: var(--rz-input-height);
-    padding: 0 var(--rz-size-4);
-    align-items: center;
-    display: flex;
+    color: var(--rz-fg);
     span {
       overflow: hidden;
       display: -webkit-box;

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

@@ -10,11 +10,33 @@
   {@render children()}
 </button>
 
-<style>
-  .rz-fields-preview__trigger {
+<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. */
+.rz-fields-preview__trigger {
     display: block;
-    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
     width: 100%;
     text-align: left;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-image: linear-gradient(var(--rz-bg-hover) 0 0);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
   }
 </style>

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

@@ -1,22 +1,65 @@
 <script lang="ts">
   import type { FormFieldBuilder } from '../../../fields';
   import type { FormField } from '../../../fields/types.js';
+  import type { Snippet } from 'svelte';
 
-  type Props = { config: FormFieldBuilder<FormField> };
-  const { config }: Props = $props();
+  /**
+   * The line under a field: its hint, then what the field adds to it, a link for instance.
+   *
+   * ```svelte
+   * <Field.Hint {config}>
+   *   <button type="button" onclick={build}>Build it from the title</button>
+   * </Field.Hint>
+   * ```
+   */
+  type Props = { config: FormFieldBuilder<FormField>; children?: Snippet };
+  const { config, children }: Props = $props();
 </script>
 
-{#if config.get.hint}
+{#if config.get.hint || children}
   <p class="rz-field-hint">
-    {config.get.hint}
+    {config.get.hint ?? ''}
+    {@render children?.()}
   </p>
 {/if}
 
-<style>
-  .rz-field-hint {
-    opacity: 0.5;
-    max-width: 320px;
+<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. */
+.rz-field-hint {
     margin-top: var(--rz-size-1-5);
+    color: var(--rz-fg-subtle);
     font-size: var(--rz-text-sm);
+    text-wrap: pretty;
+  }
+
+  .rz-field-hint :global(:is(a, button)) {
+    color: var(--rz-accent-text);
+    border-radius: var(--rz-radius-sm);
+
+    &:hover:not(:disabled) {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+    &:disabled {
+      color: var(--rz-fg-subtle);
+      cursor: default;
+    }
   }
 </style>

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

@@ -1,7 +1,18 @@
 import type { FormFieldBuilder } from '../../../fields';
 import type { FormField } from '../../../fields/types.js';
+import type { Snippet } from 'svelte';
+/**
+ * The line under a field: its hint, then what the field adds to it, a link for instance.
+ *
+ * ```svelte
+ * <Field.Hint {config}>
+ *   <button type="button" onclick={build}>Build it from the title</button>
+ * </Field.Hint>
+ * ```
+ */
 type Props = {
     config: FormFieldBuilder<FormField>;
+    children?: Snippet;
 };
 declare const Hint: import("svelte").Component<Props, {}, "">;
 type Hint = ReturnType<typeof Hint>;

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

@@ -28,6 +28,8 @@
       display: block;
     }
     .rz-field-label sup {
+      margin-left: var(--rz-size-0-5);
+      color: var(--rz-fg-subtle);
       font-size: var(--rz-text-2xs);
       text-transform: uppercase;
     }

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

@@ -18,6 +18,7 @@
 </Label>
 
 <style>
+  /* The name beside a switch or a checkbox reads as a sentence, not as a field's title. */
   :global {
     fieldset:disabled .rz-field-label-for {
       cursor: no-drop;
@@ -25,10 +26,14 @@
     .rz-field-label-for {
       cursor: pointer;
       margin-bottom: 0;
-      font-variation-settings: 'wght' 600;
-      font-weight: 600;
+      color: var(--rz-fg);
+      font-size: var(--rz-text-md);
+      font-variation-settings: 'wght' 400;
+      font-weight: 400;
     }
     .rz-field-label-for sup {
+      margin-left: var(--rz-size-0-5);
+      color: var(--rz-fg-subtle);
       font-size: var(--rz-text-2xs);
       text-transform: uppercase;
     }

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

@@ -65,9 +65,15 @@
 </div>
 
 <style>
+  /**
+   * A 12-column grid of fields.
+   *
+   *   --rz-fields-gap: between two rows of fields, 24px unless a container sets it; the yes/no
+   *                    rows read it to close it
+   */
   .rz-render-fields {
     position: relative;
-    gap: var(--rz-size-8);
+    gap: var(--rz-fields-gap, var(--rz-size-6)) min(2%, var(--rz-size-8));
     display: grid;
     container-type: inline-size;
     grid-template-columns: repeat(12, 1fr);
@@ -83,7 +89,7 @@
 
   /** minimize gap when all fields have no label **/
   .rz-render-fields:not(:has(> :not(.rz-render-fields__field[data-compact]))) {
-    gap: var(--rz-size-4);
+    row-gap: var(--rz-size-4);
   }
 
   /** hide fields that doesn't have any data-visible children */
@@ -100,7 +106,8 @@
     grid-column: span 12 / span 12;
   }
 
-  @container (min-width: 700px) {
+  /* Side by side from 36rem: the document's 40rem column holds halves and thirds. */
+  @container (min-width: 36rem) {
     .rz-render-fields__field--1\/3 {
       grid-column: span 4 / span 4;
     }

package/dist/panel/components/fields/fieldset.svelte.d.ts

@@ -5,5 +5,8 @@ type FieldState = {
     readonly visible: boolean;
     readonly error: string | false;
 };
-export declare function fieldset(node: HTMLElement, field: FieldState): void;
+/** Marks a field's root with its path, visibility and editable state, and follows a new field. */
+export declare function fieldset(node: HTMLElement, initial: FieldState): {
+    update: (next: FieldState) => FieldState;
+};
 export {};

package/dist/panel/components/fields/fieldset.svelte.js

@@ -1,7 +1,11 @@
-export function fieldset(node, field) {
+/** Marks a field's root with its path, visibility and editable state, and follows a new field. */
+export function fieldset(node, initial) {
+    let field = $state.raw(initial);
     node.classList.add('rz-field-root');
     node.setAttribute('style', 'position: relative; container: rz-field-root / inline-size');
-    node.setAttribute('data-path', field.path);
+    $effect(() => {
+        node.setAttribute('data-path', field.path);
+    });
     $effect(() => {
         if (field.visible) {
             node.setAttribute('data-visible', '');
@@ -18,4 +22,7 @@ export function fieldset(node, field) {
             node.removeAttribute('disabled');
         }
     });
+    return {
+        update: (next) => (field = next)
+    };
 }

package/dist/panel/components/fields/index.d.ts

@@ -7,6 +7,7 @@ export declare const Field: {
     }, {}, "">;
     Hint: import("svelte").Component<{
         config: import("../../../fields").FormFieldBuilder<import("../../../types").FormField>;
+        children?: import("svelte").Snippet;
     }, {}, "">;
     LabelFor: import("svelte").Component<{
         config: import("../../../fields").FormFieldBuilder<import("../../../types").FormField>;

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

@@ -0,0 +1,82 @@
+/*
+ * A yes/no field as a row of a card: its name and hint on the left, the control on the right.
+ * Rows that follow each other share one card, a hairline between them.
+ *
+ *   ╭────────────────────────────────────╮
+ *   │ Show in the navigation        ━●  │
+ *   ├────────────────────────────────────┤
+ *   │ Hide from search engines      ●━  │
+ *   ╰────────────────────────────────────╯
+ */
+
+.rz-setting {
+  background-color: var(--rz-bg-raised);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+  border-radius: var(--rz-radius-xl);
+}
+
+.rz-setting__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rz-size-4);
+  padding: var(--rz-size-3) var(--rz-size-3-5);
+}
+
+.rz-setting__text {
+  min-width: 0;
+}
+
+.rz-setting .rz-setting__text .rz-field-hint {
+  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)
+  .rz-setting {
+  background-color: transparent;
+  box-shadow: 0 0 0 1px var(--rz-border);
+}
+
+/*
+ * Rows that follow each other, visible and full width, close the gap between them and square
+ * the corners they share. The later row's hairline draws over the earlier one's edge.
+ */
+.rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox']):has(
+    > .rz-setting[data-visible]
+  )
+  + .rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox']):has(
+    > .rz-setting[data-visible]
+  ) {
+  margin-top: calc(-1 * var(--rz-fields-gap, var(--rz-size-6)));
+}
+
+.rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox']):has(
+    > .rz-setting[data-visible]
+  )
+  + .rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox'])
+  > .rz-setting[data-visible] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox']):has(
+    + .rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox'])
+      > .rz-setting[data-visible]
+  )
+  > .rz-setting[data-visible] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* 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)
+  .rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox']):has(
+    > .rz-setting[data-visible]
+  )
+  + .rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox'])
+  > .rz-setting[data-visible] {
+  clip-path: inset(0 -1px -1px -1px);
+}