rimecms 0.33.0 → 1.0.1

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,7 @@
 import i18n, { 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 { i18n, t__ };
 declare module 'rimecms' {
     interface RegisterCollection {
     }

package/dist/index.js

@@ -1,8 +1,4 @@
+// rimecms: what a config and the panel import. A site page imports rimecms/public.
 import i18n, { 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 { i18n, t__ };

package/dist/{panel/components/sections/live → live}/Consumer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T">
-  import { getLiveContext } from '../../../context/live.svelte.js';
-  import type { WithRelationPopulated } from '../../../../core/fields/types.js';
+  import { getLiveContext } from './context.svelte.js';
+  import type { WithRelationPopulated } from '../core/fields/types.js';
   import type { Snippet } from 'svelte';
 
   let { child, data } = $props<{

package/dist/{panel/components/sections/live → live}/Consumer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithRelationPopulated } from '../../../../core/fields/types.js';
+import type { WithRelationPopulated } from '../core/fields/types.js';
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
     props: {

package/dist/{panel/components/sections/live → live}/LiveEdit.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T">
   import { browser } from '$app/environment';
   import { page } from '$app/state';
-  import { getLiveContext } from '../../../context/live.svelte.js';
-  import { normalizeFieldPath } from '../../../../util/path.js';
+  import { getLiveContext } from './context.svelte.js';
+  import { normalizeFieldPath } from '../util/string.js';
   import { onDestroy, type Snippet } from 'svelte';
 
   type Props = {
@@ -108,7 +108,7 @@
   }
 
   :global([data-live-panel-trigger][data-is-active]) {
-    outline-offset: 5px;
+    outline-offset: -2px;
     outline: 2px solid var(--rz-color-live-panel-spot);
   }
 </style>

package/dist/{panel/components/sections/live → live}/Provider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
-  import { setLiveContext } from '../../../context/live.svelte.js';
+  import { setLiveContext } from './context.svelte.js';
   import { onMount, type Snippet } from 'svelte';
 
   const { children }: { children: Snippet } = $props();

package/dist/{panel/context/live.svelte.d.ts → live/context.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { GenericDoc } from '../../core/prototype/types.js';
+import type { GenericDoc } from '../core/prototype/types.js';
 import type { BeforeNavigate } from '@sveltejs/kit';
 export declare const LIVE_KEY: unique symbol;
 /**

package/dist/{panel/context/live.svelte.js → live/context.svelte.js}

@@ -1,10 +1,9 @@
 import { page } from '$app/state';
 import { env } from '$env/dynamic/public';
-import { PARAMS } from '../../core/constants.js';
-import { apiUrl } from '../../core/routes/util.js';
-import { toKebabCase } from '../../util/string.js';
+import { PARAMS } from '../core/constants.js';
 import { getContext, setContext } from 'svelte';
-import { getValueAtPath, isObjectLiteral, setValueAtPath } from '../../util/object.js';
+import { getValueAtPath, setValueAtPath } from '../util/object.js';
+import { populate } from '../fields/relation/populate.js';
 export const LIVE_KEY = Symbol('rime.live');
 function createStore(href) {
     let enabled = $state(false);
@@ -54,76 +53,6 @@ function createStore(href) {
             await handleFieldUpdate(e.data);
         }
     };
-    /**
-     * Recursively processes relation objects in any data structure
-     */
-    const populate = async (value) => {
-        // Base case: null or undefined
-        if (value === null || value === undefined) {
-            return value;
-        }
-        // Check if it's a resource link field value
-        if (isObjectLiteral(value) &&
-            'value' in value &&
-            'target' in value &&
-            'type' in value &&
-            !['url', 'email', 'tel', 'anchor'].includes(value.type)) {
-            if (value.type && value.value) {
-                try {
-                    const { type, value: id } = value;
-                    const response = await fetch(`${apiUrl(toKebabCase(type), id)}?depth=1`).then((r) => r.json());
-                    if (response && response.doc && response.doc.url) {
-                        return {
-                            ...value,
-                            url: response.doc.url
-                        };
-                    }
-                }
-                catch (err) {
-                    console.error(err);
-                    return value;
-                }
-            }
-            return value;
-        }
-        // Check if it's a relation object
-        if (isObjectLiteral(value) && 'documentId' in value && 'relationTo' in value) {
-            // Process single relation object
-            if ('livePreview' in value) {
-                return value.livePreview;
-            }
-            else {
-                try {
-                    const response = await fetch(`${apiUrl(toKebabCase(value.relationTo), value.documentId)}?depth=1`).then((r) => r.json());
-                    if (response && response.doc) {
-                        return response.doc;
-                    }
-                }
-                catch (err) {
-                    console.error(err);
-                }
-            }
-            return value;
-        }
-        // Process arrays
-        if (Array.isArray(value)) {
-            const result = [...value];
-            for (let i = 0; i < result.length; i++) {
-                result[i] = await populate(result[i]);
-            }
-            return result;
-        }
-        // Process objects (recursively)
-        if (isObjectLiteral(value)) {
-            const result = { ...value };
-            for (const key of Object.keys(result)) {
-                result[key] = await populate(result[key]);
-            }
-            return result;
-        }
-        // Return primitives as is
-        return value;
-    };
     /**
      * Handles panel store updates (new multi-panel protocol)
      */

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;
     }