rimecms 0.33.0 → 1.0.0

package/dist/panel/components/sections/collection/grid/grid-item/GridItem.svelte

@@ -1,81 +1,294 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
   import { page } from '$app/state';
+  import type { ResolvedPathname } from '$app/types';
   import { PARAMS } from '../../../../../../core/constants.js';
   import { UPLOAD_PATH } from '../../../../../../core/prototype/collection/upload/constant.js';
   import { isUploadConfig } from '../../../../../../core/prototype/collection/upload/util/config';
   import type { GenericDoc } from '../../../../../../core/prototype/types';
   import { panelPath } from '../../../../../../core/routes/util';
-  import CardDocument from '../../../../ui/card-document/card-document.svelte';
-  import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
+  import { getLocaleContext } from '../../../../../context/locale.svelte.js';
+  import { mediaMeta } from '../../../../../util/upload-file.js';
   import type { BuiltCollection } from '../../../../../../types';
+  import { Check } from '@lucide/svelte';
+  import StatusDot from '../../StatusDot.svelte';
 
   type Props = {
     checked: boolean;
     doc: GenericDoc;
     draggable?: 'true';
+    /** On while an item is checked: a click on the card then picks it. */
     isSelectMode?: boolean;
     config: BuiltCollection;
+    /** Given, the thumbnail carries a ring to pick the item: shown on hover, and while picking. */
     toggleSelectOf?: (id: string) => void;
   };
 
   const { checked, doc, draggable, isSelectMode, config, toggleSelectOf }: Props = $props();
 
+  const locale = getLocaleContext();
   const isUploadCollection = $derived(isUploadConfig(config));
+  const hasDraft = $derived(!!(config.versions && config.versions.draft));
 
-  function handleEdit() {
+  const mimeType = $derived(typeof doc.mimeType === 'string' ? doc.mimeType : '');
+  const isImage = $derived(!!doc._thumbnail && mimeType.startsWith('image/'));
+  // A photo fills its frame; a png, a gif or an svg may be a logo, so it shows whole.
+  const contain = $derived(/^image\/(png|gif|svg)/.test(mimeType));
+
+  // brochure-2026.pdf -> PDF
+  const extension = $derived.by(() => {
+    const filename = typeof doc.filename === 'string' ? doc.filename : '';
+    const fromName = filename.includes('.') ? filename.split('.').pop() : '';
+    return (fromName || mimeType.split('/').pop() || '').toUpperCase();
+  });
+
+  const name = $derived(doc.title || doc.filename || '[untitled]');
+
+  // 3.2 MB · JPG for a file, the last edit for a document.
+  const meta = $derived.by(() => {
+    if (isUploadCollection) return mediaMeta({ filesize: doc.filesize, mimeType });
+    return doc.updatedAt ? locale.dateFormat(doc.updatedAt, { short: true }) : '';
+  });
+
+  const href = $derived.by(() => {
     const uploadPath = isUploadCollection
       ? page.url.searchParams.get(PARAMS.UPLOAD_PATH) || UPLOAD_PATH.ROOT_NAME
       : null;
     const params = uploadPath ? `?${PARAMS.UPLOAD_PATH}=${uploadPath}` : '';
-    goto(resolve(`${panelPath(config.kebab, doc.id)}${params}`));
-  }
+    return `${panelPath(config.kebab, doc.id)}${params}` as ResolvedPathname;
+  });
 
   function handleDragStart(e: DragEvent) {
     e.dataTransfer?.setData('text/plain', doc.id);
   }
-
-  function handleClick() {
-    if (isSelectMode) {
-      toggleSelectOf?.(doc.id);
-    } else {
-      handleEdit();
-    }
-  }
 </script>
 
-<button
+{#snippet body()}
+  <span class="rz-grid-item__thumb">
+    {#if isImage}
+      <img
+        class="rz-grid-item__image"
+        class:rz-grid-item__image--contain={contain}
+        src={doc._thumbnail}
+        alt=""
+        loading="lazy"
+      />
+    {:else if isUploadCollection}
+      <span class="rz-grid-item__extension">{extension}</span>
+    {:else}
+      {@const Icon = config.icon}
+      <Icon size={18} />
+    {/if}
+  </span>
+
+  <span class="rz-grid-item__text">
+    <span class="rz-grid-item__name">{name}</span>
+    {#if meta || (hasDraft && doc.status)}
+      <span class="rz-grid-item__meta">
+        {#if hasDraft && doc.status}
+          <StatusDot --rz-dot-size="var(--rz-size-1-5)" status={doc.status} />
+        {/if}
+        {meta}
+      </span>
+    {/if}
+  </span>
+{/snippet}
+
+<!-- A media card: the thumbnail, the name, then its size and type. While picking, a click picks it. -->
+<div
   class="rz-grid-item"
-  onclick={handleClick}
-  draggable={draggable || null}
-  ondragstart={draggable ? handleDragStart : null}
+  class:rz-grid-item--picked={checked}
+  class:rz-grid-item--select-mode={isSelectMode}
 >
   {#if isSelectMode}
-    <Checkbox {checked} />
+    <button
+      type="button"
+      class="rz-grid-item__card"
+      aria-pressed={checked}
+      onclick={() => toggleSelectOf?.(doc.id)}
+      draggable={draggable || null}
+      ondragstart={draggable ? handleDragStart : null}
+    >
+      {@render body()}
+    </button>
+  {:else}
+    <a
+      class="rz-grid-item__card"
+      {href}
+      draggable={draggable || null}
+      ondragstart={draggable ? handleDragStart : null}
+    >
+      {@render body()}
+    </a>
   {/if}
-  <CardDocument {doc} />
-</button>
 
-<style>
-  button.rz-grid-item {
+  {#if toggleSelectOf}
+    <!-- An empty ring on the thumbnail; filled with the accent and a check once picked. -->
+    <button
+      type="button"
+      role="checkbox"
+      class="rz-grid-item__pick"
+      aria-checked={checked}
+      aria-label={name}
+      tabindex={isSelectMode ? -1 : 0}
+      onclick={() => toggleSelectOf(doc.id)}
+    >
+      <Check size={11} strokeWidth={2.5} />
+    </button>
+  {/if}
+</div>
+
+<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-grid-item {
+    position: relative;
+    min-width: 0;
+  }
+
+  .rz-grid-item__card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-2);
+    width: 100%;
+    min-width: 0;
     text-align: left;
+    color: var(--rz-fg);
+
+    &:focus-visible {
+      outline: none;
+    }
   }
-  .rz-grid-item {
-    --checkbox-border: hsl(var(--rz-gray-10));
-    --rz-card-color-bg: var(--rz-gray-10);
-    display: block;
+
+  .rz-grid-item__thumb {
     position: relative;
+    display: grid;
+    place-items: center;
+    aspect-ratio: 4 / 3;
+    border-radius: var(--rz-radius-md);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-subtle);
+    overflow: hidden;
 
-    :global {
-      .rz-checkbox {
-        background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
-        border: var(--rz-border);
-        pointer-events: none;
-        position: absolute;
-        left: var(--rz-size-2);
-        top: var(--rz-size-2);
-      }
+    /* A faint ring inside the edge, so a pale image keeps its shape. */
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px var(--rz-border);
+      pointer-events: none;
+      transition: box-shadow 0.15s;
     }
   }
+
+  .rz-grid-item:hover .rz-grid-item__thumb::after {
+    box-shadow: inset 0 0 0 1px var(--rz-border-strong);
+  }
+
+  .rz-grid-item__card:focus-visible .rz-grid-item__thumb {
+    outline: 2px solid var(--rz-accent-border);
+    outline-offset: 2px;
+  }
+
+  .rz-grid-item--picked .rz-grid-item__thumb {
+    outline: 2px solid var(--rz-accent);
+    outline-offset: 2px;
+  }
+
+  .rz-grid-item__image {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+  .rz-grid-item__image--contain {
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .rz-grid-item__extension {
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-sm);
+    font-variation-settings: 'wght' 600;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+  }
+
+  /* Hidden until the card is hovered or focused, or an item is picked. */
+  .rz-grid-item__pick {
+    position: absolute;
+    z-index: 1;
+    top: var(--rz-size-1-5);
+    left: var(--rz-size-1-5);
+    display: grid;
+    place-items: center;
+    width: var(--rz-size-5);
+    height: var(--rz-size-5);
+    border-radius: var(--rz-radius-full);
+    background-color: var(--rz-bg-overlay);
+    box-shadow: inset 0 0 0 1.5px var(--rz-accent-fg);
+    color: var(--rz-accent-fg);
+    opacity: 0;
+    transition: opacity 0.15s;
+
+    :global(svg) {
+      opacity: 0;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-grid-item:is(:hover, :focus-within, .rz-grid-item--select-mode) .rz-grid-item__pick {
+    opacity: 1;
+  }
+
+  .rz-grid-item--picked .rz-grid-item__pick {
+    background-color: var(--rz-accent);
+    box-shadow: none;
+
+    :global(svg) {
+      opacity: 1;
+    }
+  }
+
+  .rz-grid-item__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-0-5);
+    min-width: 0;
+  }
+
+  .rz-grid-item__name {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .rz-grid-item__meta {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-1-5);
+    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/grid/grid-item/GridItem.svelte.d.ts

@@ -4,8 +4,10 @@ type Props = {
     checked: boolean;
     doc: GenericDoc;
     draggable?: 'true';
+    /** On while an item is checked: a click on the card then picks it. */
     isSelectMode?: boolean;
     config: BuiltCollection;
+    /** Given, the thumbnail carries a ring to pick the item: shown on hover, and while picking. */
     toggleSelectOf?: (id: string) => void;
 };
 declare const GridItem: import("svelte").Component<Props, {}, "">;

package/dist/panel/components/sections/collection/header/ButtonCreate.svelte

@@ -1,38 +1,63 @@
 <script lang="ts">
-  import { resolve } from '$app/paths';
   import { page } from '$app/state';
+  import type { ResolvedPathname } from '$app/types';
   import { PARAMS } from '../../../../../core/constants.js';
   import { t__ } from '../../../../../core/i18n/index.js';
   import { panelPath } from '../../../../../core/routes/util.js';
   import Button from '../../../ui/button/button.svelte';
   import type { BuiltCollection } from '../../../../../types';
-  import { CirclePlus } from '@lucide/svelte';
+  import { Plus } from '@lucide/svelte';
 
-  type ButtonSize = 'sm' | 'default';
-  const { config, size = 'default' }: { config: BuiltCollection; size?: ButtonSize } = $props();
+  type Props = {
+    config: BuiltCollection;
+    /** `sm`: an icon alone. `default`: an icon and the label. */
+    size?: 'sm' | 'default';
+    /** The labelled button's look; `default` is the primary one. */
+    variant?: 'default' | 'secondary' | 'ghost';
+  };
+  const { config, size = 'default', variant = 'default' }: Props = $props();
 
-  const isSmallSize = $derived(size === 'sm');
-  const buttonVariant = $derived(isSmallSize ? 'ghost' : 'default');
-  const buttonSize = $derived(isSmallSize ? 'icon-sm' : 'default');
   const buttonLabel = $derived(
     config.label.create || t__(`common.create_new`, config.label.singular)
   );
 
   const createPathname = $derived.by(() => {
-    const currentUploadPath = page.url.searchParams.get(PARAMS.UPLOAD_PATH);
+    const path = panelPath(config.kebab, 'create');
     if (config.upload) {
-      return resolve(
-        `${panelPath(config.kebab)}/create?${PARAMS.UPLOAD_PATH}=${currentUploadPath || 'root'}`
-      );
+      const currentUploadPath = page.url.searchParams.get(PARAMS.UPLOAD_PATH);
+      return `${path}?${PARAMS.UPLOAD_PATH}=${currentUploadPath || 'root'}` as ResolvedPathname;
     }
-    return resolve(`${panelPath(config.kebab)}/create`);
+    return path;
   });
 </script>
 
-<Button variant={buttonVariant} size={buttonSize} href={createPathname}>
-  {#if isSmallSize}
-    <CirclePlus size={16} />
-  {:else}
+{#if size === 'sm'}
+  <Button
+    variant="ghost"
+    size="icon-sm"
+    class="rz-button-create--icon"
+    href={createPathname}
+    aria-label={buttonLabel}
+    title={buttonLabel}
+  >
+    <Plus size={15} />
+  </Button>
+{:else}
+  <Button {variant} size="sm" icon={Plus} href={createPathname}>
     {buttonLabel}
-  {/if}
-</Button>
+  </Button>
+{/if}
+
+<style>
+  /* A plain plus, subtle until hovered. */
+  :global(.rz-button.rz-button-create--icon) {
+    width: var(--rz-size-7);
+    height: var(--rz-size-7);
+    border-radius: var(--rz-radius-md);
+    color: var(--rz-fg-subtle);
+
+    &:hover {
+      color: var(--rz-fg);
+    }
+  }
+</style>

package/dist/panel/components/sections/collection/header/ButtonCreate.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { BuiltCollection } from '../../../../../types';
-type ButtonSize = 'sm' | 'default';
-type $$ComponentProps = {
+type Props = {
     config: BuiltCollection;
-    size?: ButtonSize;
+    /** `sm`: an icon alone. `default`: an icon and the label. */
+    size?: 'sm' | 'default';
+    /** The labelled button's look; `default` is the primary one. */
+    variant?: 'default' | 'secondary' | 'ghost';
 };
-declare const ButtonCreate: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ButtonCreate: import("svelte").Component<Props, {}, "">;
 type ButtonCreate = ReturnType<typeof ButtonCreate>;
 export default ButtonCreate;

package/dist/panel/components/sections/collection/header/DisplayMode.svelte

@@ -1,71 +1,82 @@
 <script lang="ts">
-  import Button from '../../../ui/button/button.svelte';
-  import {
-    DISPLAY_MODE,
-    getCollectionContext,
-    type DisplayMode
-  } from '../../../../context/collection.svelte.js';
-  import { LayoutGrid, List, TextQuote } from '@lucide/svelte';
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import { DISPLAY_MODE, getCollectionContext } from '../../../../context/collection.svelte.js';
+  import { LayoutGrid, List, ListTree } from '@lucide/svelte';
 
   const collection = getCollectionContext();
-  const listIconClass = $derived(collection.isList() ? 'rz-header-display-mode__icon--active' : '');
-  const gridIconClass = $derived(collection.isGrid() ? 'rz-header-display-mode__icon--active' : '');
-  const nestedIconClass = $derived(
-    collection.isNested() ? 'rz-header-display-mode__icon--active' : ''
-  );
 
-  const setVariant = (mode: DisplayMode) => (mode === collection.display ? 'secondary' : 'ghost');
-  const isActive = (mode: DisplayMode) => mode === collection.display;
-
-  function handleListClick() {
-    collection.display = DISPLAY_MODE.LIST;
-  }
-  function handleGridClick() {
-    collection.display = DISPLAY_MODE.GRID;
-  }
-  function handleNestedClick() {
-    collection.display = DISPLAY_MODE.NESTED;
-  }
+  const modes = $derived([
+    { mode: DISPLAY_MODE.LIST, label: t__('common.show_as_list'), icon: List },
+    { mode: DISPLAY_MODE.GRID, label: t__('common.show_as_grid'), icon: LayoutGrid },
+    ...(collection.config.nested
+      ? [{ mode: DISPLAY_MODE.NESTED, label: t__('common.show_as_tree'), icon: ListTree }]
+      : [])
+  ]);
 </script>
 
-<div class="rz-header-display-mode">
-  <Button
-    size="icon-sm"
-    variant={setVariant(DISPLAY_MODE.LIST)}
-    inert={isActive(DISPLAY_MODE.LIST)}
-    onclick={handleListClick}
-  >
-    <List size={17} class="rz-header-display-mode__icon {listIconClass}" />
-  </Button>
-
-  <Button
-    size="icon-sm"
-    variant={setVariant(DISPLAY_MODE.GRID)}
-    inert={isActive(DISPLAY_MODE.GRID)}
-    onclick={handleGridClick}
-  >
-    <LayoutGrid size={17} class="rz-header-display-mode__icon {gridIconClass}" />
-  </Button>
-
-  {#if collection.config.nested}
-    <Button
-      size="icon-sm"
-      variant={setVariant(DISPLAY_MODE.NESTED)}
-      inert={isActive(DISPLAY_MODE.NESTED)}
-      onclick={handleNestedClick}
+<!-- A segmented control: a well track, the current mode a knob inside it. -->
+<div class="rz-header-display-mode" role="group" aria-label={t__('common.collection_display')}>
+  {#each modes as { mode, label, icon: Icon } (mode)}
+    <button
+      type="button"
+      class="rz-header-display-mode__button"
+      aria-label={label}
+      aria-pressed={collection.display === mode}
+      title={label}
+      onclick={() => (collection.display = mode)}
     >
-      <TextQuote size={17} class="rz-header-display-mode__icon {nestedIconClass}" />
-    </Button>
-  {/if}
+      <Icon size={14} />
+    </button>
+  {/each}
 </div>
 
-<style global>
-  .rz-header-display-mode {
-    display: flex;
-    gap: var(--rz-size-2);
+<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-header-display-mode {
+    display: inline-flex;
+    gap: 2px;
+    padding: 2px;
+    border-radius: var(--rz-radius-lg);
+    background-color: var(--rz-bg-well);
+    box-shadow: inset 0 0 0 1px var(--rz-border);
+  }
+
+  .rz-header-display-mode__button {
+    display: grid;
+    place-items: center;
+    width: var(--rz-size-7);
+    height: var(--rz-size-6);
+    border-radius: var(--rz-radius-md);
+    color: var(--rz-fg-muted);
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--rz-fg);
+    }
+
+    &[aria-pressed='true'] {
+      background-color: var(--rz-bg-knob);
+      box-shadow: var(--rz-shadow-knob);
+      color: var(--rz-fg);
+    }
 
-    :global(.rz-header-display-mode__icon--active) {
-      color: hsl(229, 89%, 60%);
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+      outline-offset: 0;
     }
   }
 </style>

package/dist/panel/components/sections/collection/header/DisplayMode.svelte.d.ts

@@ -1,4 +1,3 @@
-import { type DisplayMode } from '../../../../context/collection.svelte.js';
 declare const DisplayMode: import("svelte").Component<Record<string, never>, {}, "">;
 type DisplayMode = ReturnType<typeof DisplayMode>;
 export default DisplayMode;

package/dist/panel/components/sections/collection/header/FilterMenu.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import Button from '../../../ui/button/button.svelte';
+  import * as DropdownMenu from '../../../ui/dropdown-menu/index.js';
+  import { ListFilter } from '@lucide/svelte';
+
+  type Props = {
+    /** What the button says while everything shows: "Status", "All types". */
+    label: string;
+    /** The choices, `all` first. */
+    options: { value: string; label: string }[];
+    value: string;
+    onchange: (value: string) => void;
+  };
+  const { label, options, value, onchange }: Props = $props();
+
+  const picked = $derived(value === 'all' ? null : options.find((o) => o.value === value));
+</script>
+
+<!-- A ghost button; its menu picks one choice, and the button then names it. -->
+<div class="rz-filter-menu" data-active={picked ? '' : undefined}>
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        <Button variant="ghost" size="sm" icon={ListFilter} {...props}>
+          {picked?.label ?? label}
+        </Button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content align="start">
+        <DropdownMenu.RadioGroup {value} onValueChange={onchange}>
+          {#each options as option (option.value)}
+            <DropdownMenu.RadioItem value={option.value}>{option.label}</DropdownMenu.RadioItem>
+          {/each}
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
+</div>
+
+<style>
+  .rz-filter-menu {
+    --rz-button-ghost-fg: var(--rz-fg-muted);
+    display: contents;
+
+    :global(.rz-button__icon) {
+      color: var(--rz-fg-subtle);
+    }
+  }
+
+  /* A filter on: the button reads like the text it filters. */
+  .rz-filter-menu[data-active] {
+    --rz-button-ghost-fg: var(--rz-fg);
+
+    :global(.rz-button__icon) {
+      color: var(--rz-accent-text);
+    }
+  }
+</style>

package/dist/panel/components/sections/collection/header/FilterMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+type Props = {
+    /** What the button says while everything shows: "Status", "All types". */
+    label: string;
+    /** The choices, `all` first. */
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value: string;
+    onchange: (value: string) => void;
+};
+declare const FilterMenu: import("svelte").Component<Props, {}, "">;
+type FilterMenu = ReturnType<typeof FilterMenu>;
+export default FilterMenu;