rimecms 0.33.0 → 1.0.1

package/dist/fields/group/component/Group.svelte

@@ -9,7 +9,7 @@
   import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
   import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
   import { getUserContext } from '../../../panel/context/user.svelte.js';
-  import { ChevronDown, FolderClosed, FolderOpen } from '@lucide/svelte';
+  import { ChevronDown } from '@lucide/svelte';
   import { onMount } from 'svelte';
 
   type Props = {
@@ -40,6 +40,7 @@
 
   const user = getUserContext() || undefined;
 
+  // The preview shows the group's own values: a layout field has none, and tabs are one.
   const previewFields = $derived.by(() => {
     return config.get.fields
       .filter((field) => !(field instanceof TabsBuilder))
@@ -51,27 +52,28 @@
   const basePath = $derived(path ? `${path}.` : '');
 </script>
 
-<div class="rz-group-field__wrapper" class:rz-group-field__wrapper--hidden={!field.visible}>
+<!-- A card: its name and a chevron, then its fields, or a preview of their values when folded. -->
+<div
+  class="rz-group-field__wrapper"
+  class:rz-group-field__wrapper--hidden={!field.visible}
+  class:rz-group-field__wrapper--open={groupOpen}
+>
   <button
     onclick={handleClick}
     type="button"
+    aria-expanded={groupOpen}
     class:open={groupOpen}
     class:rz-group-field__trigger--live={form.isLive}
     class="rz-group-field__trigger"
   >
-    <span>
-      {#if groupOpen}
-        <FolderOpen size="12" />
-      {:else}
-        <FolderClosed size="12" />
-      {/if}
-      {config.get.label || config.name || 'Group'}
+    <span class="rz-group-field__title">{config.get.label || config.name || 'Group'}</span>
+    <span class="rz-group-field__chevron" aria-hidden="true">
+      <ChevronDown size="14" />
     </span>
-    <ChevronDown size="14" />
   </button>
 
   {#if !groupOpen}
-    <FieldsPreviewTrigger onclick={handleClick}>
+    <FieldsPreviewTrigger class="rz-group-field__preview" onclick={handleClick}>
       <FieldsPreview
         preview={config.get.preview}
         fields={previewFields}
@@ -85,59 +87,126 @@
   {/if}
 </div>
 
-<style>:root {
-    --rz-group-trigger-bg: hsl(var(--rz-row-bg));
-    --rz-group-preview-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
-    --rz-group-content-bg: var(--rz-collapse-fields-content-bg);
+<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-group-field__wrapper {
+    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-group-field__wrapper {
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-md);
-    background-color: var(--rz-group-trigger-bg);
-    &:global(:has(.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));
-    }
+  /* Inside a group, a block, a tree item or a stage card: a hairline, no second fill. */
+  :global(.rz-group-field__content) .rz-group-field__wrapper,
+  :global(.rz-block__fields) .rz-group-field__wrapper,
+  :global(.rz-tree-item__fields) .rz-group-field__wrapper,
+  :global(.rz-stage__fields) .rz-group-field__wrapper {
+    background-color: transparent;
+    box-shadow: 0 0 0 1px var(--rz-border);
+  }
+
+  /* The closed group's preview keeps to the card's rounded corners. */
+  :global(.rz-group-field__preview) {
+    overflow: hidden;
+    border-radius: 0 0 var(--rz-radius-xl) var(--rz-radius-xl);
+  }
+
+  .rz-group-field__wrapper:global(:has(.rz-field-error)) {
+    outline: none;
+    border-color: var(--rz-danger);
+    box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
   }
 
   .rz-group-field__wrapper--hidden {
     display: none;
   }
 
+  /* The fields, 14px from the card's sides, 20px apart. */
   .rz-group-field__content {
-    --rz-fields-padding: var(--rz-size-5);
-    padding-top: var(--rz-fields-padding);
-    padding-bottom: var(--rz-fields-padding);
-    background-color: var(--rz-group-content-bg);
+    --rz-fields-padding: var(--rz-size-3-5);
+    --rz-fields-gap: var(--rz-size-5);
+    padding-block: var(--rz-size-4);
   }
 
+  /* The card's head: its name, then a chevron; a hairline under it while the group is open. */
   .rz-group-field__trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--rz-size-2);
-    padding: 0 var(--rz-size-4);
-    height: var(--rz-input-height);
-    position: relative;
     width: 100%;
+    height: var(--rz-size-10);
+    padding: 0 var(--rz-size-1-5) 0 var(--rz-size-3-5);
+    border-radius: var(--rz-radius-xl);
     text-align: left;
-    border-bottom: var(--rz-border);
-    background-color: var(--rz-group-trigger-bg);
-    font-variation-settings: 'wght' 600;
-    font-weight: 600;
-    > span {
-      gap: var(--rz-size-2);
-      display: flex;
-      align-items: center;
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
     }
+  }
+
+  .rz-group-field__wrapper--open > .rz-group-field__trigger {
+    border-radius: var(--rz-radius-xl) var(--rz-radius-xl) 0 0;
+    box-shadow: inset 0 -1px 0 var(--rz-border);
+  }
 
-    &.open :global(.lucide-chevron-down) {
-      rotate: -180deg;
+  .rz-group-field__title {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .rz-group-field__chevron {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--rz-size-7);
+    height: var(--rz-size-7);
+    border-radius: var(--rz-radius-lg);
+    color: var(--rz-fg-subtle);
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+
+    :global(svg) {
+      transition: rotate 0.2s ease;
     }
   }
+
+  .rz-group-field__trigger:hover .rz-group-field__chevron {
+    background-color: var(--rz-bg-hover);
+    color: var(--rz-fg);
+  }
+
+  .rz-group-field__trigger.open .rz-group-field__chevron :global(svg) {
+    rotate: -180deg;
+  }
+
   .rz-group-field__trigger--live {
     font-size: var(--rz-text-md);
   }
+
+  /* Folded: the values under a hairline, the card's bottom corners kept. */
+  .rz-group-field__wrapper :global(.rz-group-field__preview) {
+    border-radius: 0 0 var(--rz-radius-xl) var(--rz-radius-xl);
+    box-shadow: inset 0 1px 0 var(--rz-border);
+  }
 </style>

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

@@ -1,4 +1,4 @@
-import type { FieldBuilder } from '../../core/fields/builders/field-builder.js';
+import type { FieldBuilder, FieldNode, ValueNode } from '../../core/fields/builders/field-builder.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
 import type { Field, FieldsPreviewProps, FormField } from '../types.js';
 import type { Component } from 'svelte';
@@ -63,9 +63,13 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
         defaultValue?: import("../types.js").DefaultValueFn<any> | unknown;
         isEmpty: (value: unknown) => boolean;
         root?: boolean;
+        index?: boolean;
         preview?: Component<FieldsPreviewProps>;
     };
     protected generateType(): string;
+    /** One branch, contributing no segment: the group's own name already is one. */
+    protected nodes(): FieldNode[];
+    protected nodesFor(value: unknown): ValueNode[];
 }
 export declare const group: (name: string) => GroupFieldBuilder;
 /**

package/dist/fields/group/index.js

@@ -1,3 +1,4 @@
+import { joinMemberTypes } from '../../util/string.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
 import Group from './component/Group.svelte';
 const isEmpty = (value) => !!value === false ||
@@ -40,8 +41,15 @@ export class GroupFieldBuilder extends FormFieldBuilder {
         return { ...this.field, fields: this.field.fields.map((f) => f.compile()) };
     }
     generateType() {
-        const fieldsTypes = this.field.fields.map((field) => field.use.generateType()).filter(Boolean);
-        return this.field.fields.length ? `${this.name}: {${fieldsTypes.join(',\n\t')}}` : '';
+        const fieldsTypes = joinMemberTypes(this.field.fields.map((field) => field.use.generateType()));
+        return fieldsTypes ? `${this.name}: {${fieldsTypes}}` : '';
+    }
+    /** One branch, contributing no segment: the group's own name already is one. */
+    nodes() {
+        return [{ segment: '', fields: this.field.fields }];
+    }
+    nodesFor(value) {
+        return [{ segment: '', fields: this.field.fields, value }];
     }
 }
 export const group = (name) => new GroupFieldBuilder(name);

package/dist/fields/link/component/Link.svelte

@@ -2,14 +2,13 @@
   import { t__ } from '../../../core/i18n/index.js';
   import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
-  import Button from '../../../panel/components/ui/button/button.svelte';
+  import Checkbox from '../../../panel/components/ui/checkbox/checkbox.svelte';
   import * as DropdownMenu from '../../../panel/components/ui/dropdown-menu/index.js';
   import { Input } from '../../../panel/components/ui/input/index.js';
-  import Label from '../../../panel/components/ui/label/label.svelte';
-  import { Switch } from '../../../panel/components/ui/switch/index.js';
+  import { getConfigContext } from '../../../panel/context/config.svelte.js';
   import type { PrototypeSlug } from '../../../types';
   import { capitalize } from '../../../util/string.js';
-  import { Anchor, AtSign, ChevronDown, Link2, Newspaper, Phone } from '@lucide/svelte';
+  import { Anchor, AtSign, ChevronDown, FileText, Link2, Phone } from '@lucide/svelte';
   import type { Link, LinkType } from '../types';
   import type { LinkFieldProps } from './props';
   import RessourceInput from './RessourceInput.svelte';
@@ -33,6 +32,16 @@
   const primitiveTypes = ['url', 'email', 'tel', 'anchor'];
   const field = $derived(form.useField<Link>(path, config));
   const linkTypes = $derived(config.get.types);
+  const plainTypes = $derived(linkTypes.filter((type) => primitiveTypes.includes(type)));
+  const documentTypes = $derived(linkTypes.filter((type) => !primitiveTypes.includes(type)));
+
+  const panelConfig = getConfigContext();
+
+  /** url -> URL, tel -> Phone, pages -> Page: a collection by its singular label. */
+  function typeLabel(type: string) {
+    if (primitiveTypes.includes(type)) return t__(`fields.link_${type}`);
+    return panelConfig.getCollection(type)?.label.singular || capitalize(type);
+  }
   const initial = $derived(path ? form.getRawValue<Link>(path) : null);
 
   let initialLinkType = $derived(initial?.type || linkTypes[0]);
@@ -45,7 +54,7 @@
   let targetBlank = $derived(initialTargetBlank);
 
   let isPrimitiveType = $derived(primitiveTypes.includes(linkType));
-  let Icon = $derived(icons[linkType] || Newspaper);
+  let Icon = $derived(icons[linkType] || FileText);
   let placeholder = $derived(placeholders[linkType] || '');
   let ressourceId = $derived(!primitiveTypes.includes(initialLinkType) ? initialLinkValue : '');
   const hasTarget = $derived(!['anchor', 'email', 'tel'].includes(linkType));
@@ -105,79 +114,90 @@
 >
   <Field.Label {config} for={path || config.name} />
 
-  <div class="rz-link-field__wrap">
-    <div
-      class="rz-link-field__row"
-      style="--rz-corner-radius:{hasTarget ? 0 : 'var(--rz-radius-md)'}"
-    >
-      <!-- Type -->
-      {#if linkTypes.length === 1}
-        <Button class="rz-link__type-single" variant="secondary">
-          <Icon class="rz-link__type-icon" size={12} />
-          <p class="rz-link__type-text">{capitalize(linkType)}</p>
-        </Button>
-      {:else}
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            {#snippet child({ props })}
-              <Button variant="secondary" {...props}>
-                <Icon class="rz-link__type-icon" size={12} />
-                {capitalize(linkType)}
-                <ChevronDown class="rz-link__type-icon" size={12} />
-              </Button>
-            {/snippet}
-          </DropdownMenu.Trigger>
-
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content class="rz-link__type-content" align="start">
-              <DropdownMenu.RadioGroup onValueChange={onTypeChange} bind:value={linkType}>
-                {#each linkTypes as type, index (index)}
-                  <DropdownMenu.RadioItem value={type}>
-                    {capitalize(type)}
-                  </DropdownMenu.RadioItem>
-                {/each}
-              </DropdownMenu.RadioGroup>
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-      {/if}
-      <!-- Value -->
-
-      {#if isPrimitiveType}
-        <Input
-          id={path || config.name}
-          name={path || config.name}
-          data-error={isLinkValueError ? '' : null}
-          value={inputValue}
-          {placeholder}
-          oninput={onInput}
-        />
-      {:else}
-        <RessourceInput
-          error={isLinkValueError}
-          type={linkType as PrototypeSlug}
-          bind:ressourceId
-          readOnly={form.readOnly}
-        />
-      {/if}
-
-      <!-- Target -->
-      {#if hasTarget}
-        <div class="rz-link__target">
-          <Switch checked={targetBlank} onCheckedChange={onTargetChange} id="{path}.target" />
-          <Label for="{path}.target">{t__('fields.new_tab')}</Label>
-        </div>
-      {/if}
-    </div>
+  <!-- One well: the type, the value, then whether it opens in a new tab. -->
+  <div class="rz-link-field__row" data-error={isLinkValueError ? '' : null}>
+    {#if linkTypes.length === 1}
+      <span class="rz-link__type rz-link__type--single" title={typeLabel(linkType)}>
+        <Icon size={14} />
+      </span>
+    {:else}
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger class="rz-link__type">
+          {#snippet child({ props })}
+            <button type="button" {...props}>
+              <Icon size={14} />
+              <span class="rz-link__type-text">{typeLabel(linkType)}</span>
+              <ChevronDown class="rz-link__type-chevron" size={12} />
+            </button>
+          {/snippet}
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content class="rz-link__type-content" align="start">
+            <DropdownMenu.RadioGroup onValueChange={onTypeChange} bind:value={linkType}>
+              {#each plainTypes as type (type)}
+                <DropdownMenu.RadioItem value={type}>{typeLabel(type)}</DropdownMenu.RadioItem>
+              {/each}
+              {#if plainTypes.length && documentTypes.length}
+                <DropdownMenu.Separator />
+              {/if}
+              {#each documentTypes as type (type)}
+                <DropdownMenu.RadioItem value={type}>{typeLabel(type)}</DropdownMenu.RadioItem>
+              {/each}
+            </DropdownMenu.RadioGroup>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+      <span class="rz-link__sep" aria-hidden="true"></span>
+    {/if}
+
+    {#if isPrimitiveType}
+      <Input
+        id={path || config.name}
+        name={path || config.name}
+        value={inputValue}
+        {placeholder}
+        oninput={onInput}
+      />
+    {:else}
+      <RessourceInput
+        error={isLinkValueError}
+        type={linkType as PrototypeSlug}
+        bind:ressourceId
+        readOnly={form.readOnly}
+      />
+    {/if}
+
+    {#if hasTarget}
+      <span class="rz-link__sep" aria-hidden="true"></span>
+      <span class="rz-link__target">
+        <Checkbox checked={targetBlank} onCheckedChange={onTargetChange} id="{path}.target" />
+        <label for="{path}.target">{t__('fields.new_tab')}</label>
+      </span>
+    {/if}
   </div>
 
   <Field.Hint {config} />
   <Field.Error error={field.error} />
 </fieldset>
 
-<style>
-  .rz-link-field[data-compact] :global {
-    .rz-link-field__wrap + .rz-field-error {
+<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-link-field[data-compact] :global {
+    .rz-link-field__row + .rz-field-error {
       top: -1.3rem;
     }
     .rz-field-label {
@@ -185,94 +205,115 @@
     }
   }
 
+  /*
+   * One well like any input: [type ▾ | value | ☐ New tab]
+   * One type: its icon alone, no menu. The ring goes around the whole well.
+   */
   .rz-link-field__row {
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
     display: flex;
-    position: relative;
-    border: 1px solid var(--rz-input-border-color);
-    border-radius: var(--rz-radius-lg);
+    align-items: center;
     height: var(--rz-input-height);
+    border-radius: var(--rz-radius-lg);
 
-    .rz-link__type-text {
-      display: none;
+    &:focus-within {
+      outline: none;
+      border-color: var(--rz-accent-border);
+      box-shadow: 0 0 0 3px var(--rz-ring);
+    }
+    &[data-error] {
+      outline: none;
+      border-color: var(--rz-danger);
+      box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
     }
 
-    :global {
-      :focus-visible {
-        position: relative;
-        z-index: 10;
-      }
-      .rz-input {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: var(--rz-corner-radius);
-        position: relative;
-        z-index: 10;
-      }
+    /* The value's own input and search draw no well of their own. */
+    :global(.rz-input-wrapper) {
+      flex: 1;
+      min-width: 0;
+    }
+    :global(.rz-input),
+    :global(.rz-input:focus-visible) {
+      height: 100%;
+      border: 0;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: none;
+    }
+    :global(.rz-input) {
+      padding-inline: var(--rz-size-2-5);
+    }
+    :global(.rz-ressource-input) {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+    }
+  }
 
-      .rz-input,
-      .rz-ressource-input {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: 0;
-        border: 0;
-        height: 100%;
-      }
-      .rz-link__type-single {
-        pointer-events: none;
-      }
+  .rz-link__type {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--rz-size-1-5);
+    align-self: stretch;
+    padding: 0 var(--rz-size-2) 0 calc(2.75 * var(--rz-unit));
+    border-radius: var(--rz-radius-lg) 0 0 var(--rz-radius-lg);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-sm);
+    transition: color 0.15s;
+
+    :global(.rz-link__type-chevron) {
+      color: var(--rz-fg-subtle);
+    }
 
-      .rz-button {
-        min-width: var(--rz-size-20);
-        border-top-left-radius: var(--rz-radius-md);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        height: 100%;
-        justify-content: start;
-        font-size: var(--rz-text-sm);
-
-        > * {
-          flex-shrink: 0;
-        }
-
-        .rz-link__type-icon {
-          width: var(--rz-size-6);
-        }
-
-        &[data-dropdown-menu-trigger] {
-          border-right: 1px solid var(--rz-input-border-color);
-        }
-      }
+    &:is(button):hover,
+    &[data-state='open'] {
+      color: var(--rz-fg);
     }
 
-    @container rz-field-root (min-width:420px) {
-      .rz-link__type-text {
-        display: block;
-      }
-      :global(.rz-button) {
-        min-width: var(--rz-size-32);
-      }
+    &:focus-visible {
+      outline: none;
+      background-color: var(--rz-bg-hover);
     }
   }
 
+  .rz-link__type--single {
+    padding-right: 0;
+    color: var(--rz-fg-subtle);
+  }
+
+  /* A short divider between the parts. */
+  .rz-link__sep {
+    flex-shrink: 0;
+    width: 1px;
+    height: var(--rz-size-4);
+    background-color: var(--rz-border-strong);
+  }
+
   .rz-link__target {
-    height: 100%;
-    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-5)));
-    border-bottom-right-radius: var(--rz-radius-md);
-    border-top-right-radius: var(--rz-radius-md);
-    border-left: 1px solid var(--rz-input-border-color);
-    display: flex;
+    display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
-    gap: var(--rz-size-4);
-    min-width: 140px;
-    padding: 0 var(--rz-size-4);
-    :global(.rz-label) {
-      text-wrap: nowrap;
+    gap: var(--rz-size-2);
+    padding: 0 var(--rz-size-3) 0 var(--rz-size-2-5);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-sm);
+    white-space: nowrap;
+
+    label {
+      cursor: pointer;
     }
+  }
 
-    @container rz-field-root (max-width:420px) {
-      min-width: auto;
-      :global(.rz-label) {
-        display: none;
-      }
+  /* A narrow field: the type's icon alone, the checkbox without its words. */
+  @container rz-field-root (max-width: 420px) {
+    .rz-link__type-text,
+    .rz-link__target label {
+      display: none;
     }
   }
 </style>