rimecms 0.33.0 → 1.0.1

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

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

@@ -25,8 +25,22 @@
   </div>
 </div>
 
-<style>
-  .rz-auth {
+<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-auth {
     display: grid;
     grid-template-columns: 1fr;
     height: 100vh;
@@ -37,19 +51,12 @@
       0px 0px,
       0px 0px,
       0px 0px;
+    background-color: var(--rz-bg-base);
     background-image:
-      url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='10.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.88'/%3E%3C/svg%3E"),
-      radial-gradient(113% 91% at 17% -2%, oklch(0.21 0.03 290) 1%, oklch(0 0 0 / 0) 99%),
-      radial-gradient(142% 91% at 83% 7%, oklch(0.21 0.12 80) 1%, oklch(0.85 0.23 155 / 0) 99%),
-      radial-gradient(142% 91% at 111% 84%, oklch(0.13 0.08 300) 0%, oklch(0.05 0.1 250) 100%);
-
-    @media (prefers-color-scheme: light) {
-      background-image:
-        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='10.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E"),
-        radial-gradient(113% 91% at 17% -2%, oklch(0.95 0 310) 1%, oklch(1 0 0 / 0) 99%),
-        radial-gradient(142% 91% at 83% 7%, oklch(0.92 0 90) 1%, oklch(1 0 0 / 0) 99%),
-        radial-gradient(142% 91% at 111% 84%, oklch(0.88 0 40) 0%, oklch(0.96 0 40) 100%);
-    }
+      url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='10.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E"),
+      radial-gradient(113% 91% at 17% -2%, var(--rz-accent-tint) 1%, transparent 99%),
+      radial-gradient(142% 91% at 83% 7%, var(--rz-bg-page) 1%, transparent 99%),
+      radial-gradient(142% 91% at 111% 84%, var(--rz-bg-active) 0%, transparent 100%);
 
     @media (min-width: 1024px) {
       grid-template-columns: 0.8fr 1.2fr;
@@ -57,19 +64,14 @@
 
     .rz-auth__right {
       --rz-input-height: var(--rz-size-14);
-      --rz-input-bg: 68deg 0 0 / 0;
-      --border-color: light-dark(hsl(68deg 100 100 / 0.6), hsl(68deg 100 100 / 0.1));
       border-radius: var(--rz-radius-xl);
-      background-color: hsl(var(--rz-color-bg) / 0.4);
-      backdrop-filter: blur(10px) brightness(180%);
-      @media (prefers-color-scheme: light) {
-        background-color: hsl(var(--rz-color-bg) / 0.1);
-        backdrop-filter: blur(4px) brightness(105%);
-      }
+      background-color: var(--rz-bg-raised);
+      box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
 
       @media (min-width: 1024px) {
         margin: 1rem;
-        border: 1px solid var(--border-color);
       }
 
       > div {
@@ -115,8 +117,5 @@
 
   .rz-auth.rz-auth--image {
     background-size: cover;
-    .rz-auth__right {
-      background-color: hsl(var(--rz-color-bg) / 0.9);
-    }
   }
 </style>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+  type Props = {
+    /** The person's name; the avatar shows its initials. */
+    name: string;
+    /** `xs` sits in a list row, `sm` in a card row. */
+    size?: 'xs' | 'sm';
+  };
+  const { name, size = 'sm' }: Props = $props();
+
+  // "Anthony Ivol" -> "AI", "anthony@site.com" -> "A"
+  const initials = $derived(
+    name
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((word) => word.charAt(0))
+      .join('')
+  );
+</script>
+
+<span class="rz-avatar rz-avatar--{size}" aria-hidden="true">{initials}</span>
+
+<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-avatar {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    border-radius: var(--rz-radius-full);
+    background-color: var(--rz-bg-active);
+    color: var(--rz-fg-muted);
+    text-transform: uppercase;
+    font-variation-settings: 'wght' 600;
+    font-weight: 600;
+  }
+
+  .rz-avatar--sm {
+    width: calc(5.5 * var(--rz-unit));
+    height: calc(5.5 * var(--rz-unit));
+    font-size: var(--rz-text-2xs);
+  }
+
+  .rz-avatar--xs {
+    width: calc(4.5 * var(--rz-unit));
+    height: calc(4.5 * var(--rz-unit));
+    font-size: calc(var(--rz-text-2xs) * 0.85);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+type Props = {
+    /** The person's name; the avatar shows its initials. */
+    name: string;
+    /** `xs` sits in a list row, `sm` in a card row. */
+    size?: 'xs' | 'sm';
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import {
+    VERSIONS_STATUS,
+    type VersionsStatus
+  } from '../../../../core/prototype/shared/versions/constant.js';
+  import StatusDot from './StatusDot.svelte';
+
+  type Props = { status: VersionsStatus };
+  const { status }: Props = $props();
+</script>
+
+<!-- A dot, then Draft or Published. -->
+<span class="rz-doc-status">
+  <StatusDot --rz-dot-size="var(--rz-size-1-5)" {status} />
+  {status === VERSIONS_STATUS.DRAFT ? t__('common.draft') : t__('common.published')}
+</span>
+
+<style>
+  .rz-doc-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rz-size-1-5);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-sm);
+    white-space: nowrap;
+  }
+</style>

package/dist/panel/components/sections/collection/DocStatus.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type VersionsStatus } from '../../../../core/prototype/shared/versions/constant.js';
+type Props = {
+    status: VersionsStatus;
+};
+declare const DocStatus: import("svelte").Component<Props, {}, "">;
+type DocStatus = ReturnType<typeof DocStatus>;
+export default DocStatus;

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

@@ -17,12 +17,12 @@
 <style>
   .rz-no-document {
     height: var(--rz-input-height);
-    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
-    color: hsl(var(--rz-gray-10));
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-subtle);
     display: flex;
     align-items: center;
     border-radius: var(--rz-radius-md);
     padding: var(--rz-size-3);
-    border: var(--rz-border);
+    border: 1px solid var(--rz-border);
   }
 </style>

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

@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { type VersionsStatus } from '../../../../core/prototype/shared/versions/constant.js';
-  import { VERSIONS_STATUS } from '../../../../core/prototype/shared/versions/constant.js';
+  import {
+    VERSIONS_STATUS,
+    type VersionsStatus
+  } from '../../../../core/prototype/shared/versions/constant.js';
 
   type Props = { status: VersionsStatus };
 
   const { status }: Props = $props();
-  const colorDraft = 'var(--rz-color-warn)';
-  const colorPublished = 'var(--rz-color-success)';
+  const colorDraft = 'var(--rz-warn)';
+  const colorPublished = 'var(--rz-success)';
   const color = $derived(status === VERSIONS_STATUS.DRAFT ? colorDraft : colorPublished);
 </script>
 
@@ -17,7 +19,7 @@
     flex-shrink: 0;
     width: var(--rz-dot-size, 0.7rem);
     height: var(--rz-dot-size, 0.7rem);
-    background-color: hsl(var(--rz-status-color));
+    background-color: var(--rz-status-color);
     border-radius: 0.7rem;
   }
 </style>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getConfigContext } from '../../../context/config.svelte.js';
+  import { formatWhen } from '../../../util/time.js';
+
+  type Props = {
+    date: Date | string;
+    /** The moment "ago" counts from; the render's by default. */
+    now?: Date;
+  };
+  const { date, now = new Date() }: Props = $props();
+
+  const config = getConfigContext();
+  const iso = $derived(new Date(date).toISOString());
+  const label = $derived(formatWhen(date, now, config.raw.panel.language));
+</script>
+
+<!-- 2 h ago, Yesterday, Sep 12: the full date shows on hover. -->
+<time
+  class="rz-when"
+  datetime={iso}
+  title={new Date(date).toLocaleString(config.raw.panel.language)}
+>
+  {label}
+</time>
+
+<style>
+  .rz-when {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+</style>

package/dist/panel/components/sections/collection/When.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    date: Date | string;
+    /** The moment "ago" counts from; the render's by default. */
+    now?: Date;
+};
+declare const When: import("svelte").Component<Props, {}, "">;
+type When = ReturnType<typeof When>;
+export default When;

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

@@ -3,37 +3,81 @@
   import { t__ } from '../../../../../core/i18n/index.js';
   import Button from '../../../ui/button/button.svelte';
   import * as Dialog from '../../../ui/dialog/index.js';
-  import type { CollectionContext } from '../../../../context/collection.svelte';
+  import type { UploadTarget } from '../../../../util/upload-file.js';
+  import { X } from '@lucide/svelte';
   import DropZone from './DropZone.svelte';
 
-  type Props = { open: boolean; collection: CollectionContext };
-  let { open = $bindable(), collection }: Props = $props();
+  type Props = {
+    open: boolean;
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
+  };
+  let { open = $bindable(), target }: Props = $props();
 
-  let btnLabel = $state('Cancel');
-  let btnDisabled = $state(true);
+  /** While files go up, the dialog stays open. */
+  let busy = $state(false);
 
+  function onStart() {
+    busy = true;
+  }
+
+  /** Closes on success; on an error, stays open on the report. */
   function onFinish(hasErrors: boolean) {
-    btnDisabled = false;
-    btnLabel = 'Close';
-    if (!hasErrors) {
-      open = false;
-    }
+    busy = false;
+    if (!hasErrors) open = false;
     invalidateAll();
   }
 
-  function onStart() {
-    btnDisabled = true;
-  }
+  const stay = $derived(busy ? 'ignore' : 'close');
 </script>
 
 <Dialog.Root bind:open>
-  <Dialog.Content size="lg" class="rz-status-dialog">
-    <Dialog.Header>{t__('common.bulk_upload_dialog_title')}</Dialog.Header>
-    <DropZone {collection} {onFinish} {onStart} />
-    <Dialog.Footer --rz-justify-content="space-between">
-      <Button disabled={!btnDisabled} variant="secondary" onclick={() => (open = false)}
-        >{btnLabel}</Button
-      >
-    </Dialog.Footer>
+  <Dialog.Content
+    size="lg"
+    class="rz-bulk-upload"
+    escapeKeydownBehavior={stay}
+    interactOutsideBehavior={stay}
+  >
+    <header class="rz-bulk-upload__head">
+      <Dialog.Title level={3}>{t__('fields.upload')}</Dialog.Title>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        icon={X}
+        disabled={busy}
+        aria-label={t__('common.close')}
+        onclick={() => (open = false)}
+      />
+    </header>
+    <div class="rz-bulk-upload__body">
+      <DropZone {target} {onFinish} {onStart} />
+    </div>
   </Dialog.Content>
 </Dialog.Root>
+
+<style>
+  :global(.rz-dialog-content.rz-bulk-upload) {
+    gap: 0;
+    padding: 0;
+    overflow: hidden;
+    border-radius: var(--rz-radius-xl);
+  }
+
+  .rz-bulk-upload__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-3);
+    height: var(--rz-size-12);
+    padding: 0 var(--rz-size-2-5) 0 var(--rz-size-4);
+
+    :global(.rz-dialog-title) {
+      margin: 0;
+      font-size: var(--rz-text-lg);
+    }
+  }
+
+  .rz-bulk-upload__body {
+    padding: 0 var(--rz-size-4) var(--rz-size-4);
+  }
+</style>

package/dist/panel/components/sections/collection/bulk-upload/BulkUploadDialog.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { CollectionContext } from '../../../../context/collection.svelte';
+import type { UploadTarget } from '../../../../util/upload-file.js';
 type Props = {
     open: boolean;
-    collection: CollectionContext;
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
 };
 declare const BulkUploadDialog: import("svelte").Component<Props, {}, "open">;
 type BulkUploadDialog = ReturnType<typeof BulkUploadDialog>;