rimecms 0.33.0 → 1.0.1

package/dist/panel/components/ui/page-header/PageHeader.svelte

@@ -6,14 +6,29 @@
   type Props = {
     children?: Snippet;
     title?: Snippet;
-    bottomRight?: Snippet;
+    /** A line under the title: a count, a date. */
+    meta?: Snippet;
+    /** Under the meta line: a document's url. */
+    aside?: Snippet;
+    /** The toolbar under the title, its left side. */
     bottomLeft?: Snippet;
+    /** The toolbar under the title, its right side. */
+    bottomRight?: Snippet;
     topLeft?: Snippet;
+    topCenter?: Snippet;
     topRight?: Snippet;
   };
-  const { children, bottomRight, bottomLeft, topRight, topLeft, title }: Props = $props();
-
-  //
+  const {
+    children,
+    bottomRight,
+    bottomLeft,
+    topRight,
+    topCenter,
+    topLeft,
+    title,
+    meta,
+    aside
+  }: Props = $props();
 </script>
 
 {#if children}
@@ -28,34 +43,55 @@
       {/if}
     </div>
 
-    <div>
-      {#if topRight}
-        {@render topRight()}
-      {/if}
+    <div class="rz-page-header__top-center">
+      {@render topCenter?.()}
+    </div>
+
+    <div class="rz-page-header__top-right">
+      {@render topRight?.()}
     </div>
   </div>
 
-  {#if title || bottomRight || bottomLeft}
-    <div class="rz-page-header__row rz-page-header__row-bottom">
+  {#if title || meta || aside}
+    <div class="rz-page-header__head">
+      {#if title}
+        <h1 class="rz-page-header__title">{@render title()}</h1>
+      {/if}
+      {#if meta}
+        <p class="rz-page-header__meta">{@render meta()}</p>
+      {/if}
+      {@render aside?.()}
+    </div>
+  {/if}
+
+  {#if bottomLeft || bottomRight}
+    <div class="rz-page-header__toolbar">
       <div class="rz-page-header__bottom-left">
-        <h1>
-          {@render title?.()}
-        </h1>
-        <div>
-          {@render bottomLeft?.()}
-        </div>
+        {@render bottomLeft?.()}
       </div>
-
       <div class="rz-page-header__bottom-right">
-        {#if bottomRight}
-          {@render bottomRight()}
-        {/if}
+        {@render bottomRight?.()}
       </div>
     </div>
   {/if}
 {/if}
 
-<style>.rz-page-header__row {
+<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-page-header__row {
     display: flex;
     justify-content: space-between;
     gap: var(--rz-size-4);
@@ -63,41 +99,103 @@
     padding-inline: var(--rz-page-gutter, var(--rz-size-6));
   }
 
-  .rz-page-header__row:first-child {
-    height: var(--rz-size-16);
+  /* A bar over the page. Three columns, so the middle one sits in the middle whatever the sides hold. */
+  .rz-page-header__row-top {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    height: var(--rz-size-11);
+    margin-bottom: var(--rz-size-6);
+    padding-inline: var(--rz-size-5) var(--rz-size-3);
+    /* See-through, so the page's glow reaches the top; what scrolls under it blurs. */
+    background: oklch(from var(--rz-bg-page) l c h / 0.8);
+    backdrop-filter: blur(12px);
+    box-shadow: inset 0 -1px 0 var(--rz-border);
+  }
+
+  /* Room above a title; without one, the page starts closer. */
+  .rz-page-header__row-top:has(+ .rz-page-header__head) {
+    margin-bottom: var(--rz-size-10);
   }
 
-  h1 {
+  .rz-page-header__row-top > div,
+  .rz-page-header__top-center,
+  .rz-page-header__bottom-left,
+  .rz-page-header__bottom-right {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+  }
+
+  .rz-page-header__top-right {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-1);
+  }
+
+  .rz-page-header__top-center {
+    justify-content: center;
+  }
+
+  .rz-page-header__top-right {
+    justify-content: flex-end;
+  }
+
+  /*
+   * The title and the toolbar line up with a page's content. A page narrows it with
+   * `--rz-page-width`; else it runs the full width, inside the gutter.
+   */
+  .rz-page-header__head,
+  .rz-page-header__toolbar {
+    padding-inline: max(
+      var(--rz-page-gutter, var(--rz-size-6)),
+      calc((100% - var(--rz-page-width, 100%)) / 2)
+    );
+  }
+
+  .rz-page-header__head {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-1-5);
+  }
+
+  .rz-page-header__title {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
-    font-size: var(--rz-text-3xl);
     font-variation-settings: 'wght' 600;
     font-weight: 600;
+    font-size: var(--rz-text-4xl);
+    line-height: 1.15;
+    letter-spacing: -0.03em;
   }
 
-  .rz-page-header__bottom-left,
-  .rz-page-header__bottom-left > div,
-  .rz-page-header__bottom-right {
-    display: flex;
-    align-items: center;
-    gap: var(--rz-size-2);
+  .rz-page-header__meta {
+    color: var(--rz-fg-subtle);
+    font-variant-numeric: tabular-nums;
   }
 
-  .rz-page-header__row-bottom {
+  /* It stays under the breadcrumb row while the page scrolls. */
+  .rz-page-header__toolbar {
     position: sticky;
-    top: 0;
+    top: var(--rz-size-11);
     z-index: 100;
-    height: var(--rz-size-14);
-    background: hsl(var(--rz-color-bg));
-    align-items: flex-end;
-    border-bottom: var(--rz-border);
-    padding-bottom: var(--rz-size-2);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-2) var(--rz-size-4);
+    padding-block: var(--rz-size-3);
+    margin-top: var(--rz-size-2);
+    background: var(--rz-bg-page);
   }
-  .rz-page-header__row-top {
-    height: var(--rz-size-14);
-    background: hsl(var(--rz-color-bg));
-    margin-bottom: var(--rz-size-16);
+
+  .rz-page-header__bottom-left {
+    flex: 1;
+    flex-wrap: wrap;
+    min-width: 0;
   }
 </style>

package/dist/panel/components/ui/page-header/PageHeader.svelte.d.ts

@@ -2,9 +2,16 @@ import { type Snippet } from 'svelte';
 type Props = {
     children?: Snippet;
     title?: Snippet;
-    bottomRight?: Snippet;
+    /** A line under the title: a count, a date. */
+    meta?: Snippet;
+    /** Under the meta line: a document's url. */
+    aside?: Snippet;
+    /** The toolbar under the title, its left side. */
     bottomLeft?: Snippet;
+    /** The toolbar under the title, its right side. */
+    bottomRight?: Snippet;
     topLeft?: Snippet;
+    topCenter?: Snippet;
     topRight?: Snippet;
 };
 declare const PageHeader: import("svelte").Component<Props, {}, "">;

package/dist/panel/components/ui/popover/popover-content.css

@@ -2,8 +2,9 @@
   z-index: 500000;
   position: relative;
   border-radius: var(--rz-radius-lg);
-  border: var(--rz-border);
-  box-shadow: var(--rz-shadow-md);
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
   outline: none;
-  background-color: hsl(var(--rz-color-bg));
 }

package/dist/panel/components/ui/radio-group/radio-group.css

@@ -13,8 +13,8 @@
 }
 
 .rz-radio-group-item {
-  border: 1px solid var(--rz-input-border-color);
-  background-color: var(--rz-input-bg);
+  border: 1px solid var(--rz-border-strong);
+  background-color: var(--rz-bg-well);
   border-radius: var(--rz-radius-full);
   transition: all 0.066s ease-in-out;
   height: var(--rz-size-5);
@@ -23,11 +23,9 @@
   cursor: pointer;
 }
 .rz-radio-group-item:hover {
-  --border-color: var(--rz-gray-2);
-  --border-opacity: 0.3;
   border-width: 6px;
 }
 .rz-radio-group-item[data-state='checked'] {
-  border: 6px solid hsl(var(--rz-color-spot));
-  background-color: hsl(var(--rz-gray-19));
+  border: 6px solid var(--rz-accent);
+  background-color: var(--rz-accent-fg);
 }

package/dist/panel/components/ui/radio-row-group/radio-row-group.css

@@ -1,13 +1,17 @@
 .rz-radio-row-group {
-  display: inline-flex;
+  display: flex;
+  justify-content: space-between;
   align-self: flex-start;
   width: auto;
-  border: 1px solid var(--rz-input-border-color);
-  background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3) / 0.6));
+  background-color: var(--rz-bg-well);
+  border: 1px solid var(--rz-border);
+  &:hover {
+    border-color: var(--rz-border-strong);
+  }
   border-radius: var(--rz-radius-lg);
   max-height: var(--rz-input-height);
   height: var(--rz-input-height);
-  padding: var(--rz-size-1);
+  padding: var(--rz-size-0-5);
 
   &[data-disabled] {
     opacity: 0.4;
@@ -19,18 +23,26 @@
   }
 }
 
+.rz-radio__option {
+  display: flex;
+  flex-shrink: 0;
+  flex: 1;
+}
+
 .rz-radio-row-group-item {
+  width: 100%;
   padding: 0 var(--rz-size-4);
   background-color: transparent;
   border-radius: var(--rz-radius-md);
   height: 100%;
-  flex-shrink: 0;
+  color: var(--rz-fg-muted);
   font-variation-settings: 'wght' 500;
   font-weight: 500;
   cursor: pointer;
 }
 
 .rz-radio-row-group-item[data-state='checked'] {
-  box-shadow: var(--rz-shadow-sm);
-  background-color: hsl(var(--rz-input-bg));
+  background-color: var(--rz-bg-knob);
+  box-shadow: var(--rz-shadow-knob);
+  color: var(--rz-fg);
 }

package/dist/panel/components/ui/scroll-area/scroll-area.css

@@ -36,7 +36,7 @@
 }
 
 .rz-scroll-area-scroll-bar__thumb {
-  background-color: hsl(var(--rz-color-border));
+  background-color: var(--rz-border-strong);
   position: relative;
-  border-radius: var(--raidus-full);
+  border-radius: var(--rz-radius-full);
 }

package/dist/panel/components/ui/separator/separator.svelte

@@ -20,7 +20,7 @@
   :global {
     .rz-separator {
       flex-shrink: 0;
-      background-color: hsl(var(--rz-color-border));
+      background-color: var(--rz-border);
     }
     .rz-separator--vertical {
       width: 1px;

package/dist/panel/components/ui/sheet/index.d.ts

@@ -1,15 +1,15 @@
 import { Dialog as SheetPrimitive } from 'bits-ui';
-import Overlay from './sheet-overlay.svelte';
 import Content from './sheet-content.svelte';
-import Header from './sheet-header.svelte';
+import Description from './sheet-description.svelte';
 import Footer from './sheet-footer.svelte';
+import Header from './sheet-header.svelte';
+import Overlay from './sheet-overlay.svelte';
 import Title from './sheet-title.svelte';
-import Description from './sheet-description.svelte';
 import Root from './sheet.svelte';
 declare const Close: import("svelte").Component<SheetPrimitive.TriggerProps, {}, "ref">;
 declare const Trigger: import("svelte").Component<SheetPrimitive.TriggerProps, {}, "ref">;
 declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
-export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };
+export { Close, Content, Description, Footer, Header, Overlay, Portal, Root, Root as Sheet, Close as SheetClose, Content as SheetContent, Description as SheetDescription, Footer as SheetFooter, Header as SheetHeader, Overlay as SheetOverlay, Portal as SheetPortal, Title as SheetTitle, Trigger as SheetTrigger, Title, Trigger };
 export declare const sheetTransitions: {
     top: {
         in: {

package/dist/panel/components/ui/sheet/index.js

@@ -1,18 +1,18 @@
 import { Dialog as SheetPrimitive } from 'bits-ui';
-import Overlay from './sheet-overlay.svelte';
 import Content from './sheet-content.svelte';
-import Header from './sheet-header.svelte';
+import Description from './sheet-description.svelte';
 import Footer from './sheet-footer.svelte';
+import Header from './sheet-header.svelte';
+import Overlay from './sheet-overlay.svelte';
 import Title from './sheet-title.svelte';
-import Description from './sheet-description.svelte';
 import Root from './sheet.svelte';
 // const Root = SheetPrimitive.Root;
 const Close = SheetPrimitive.Close;
 const Trigger = SheetPrimitive.Trigger;
 const Portal = SheetPrimitive.Portal;
-export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, 
+export { Close, Content, Description, Footer, Header, Overlay, Portal, Root, 
 //
-Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };
+Root as Sheet, Close as SheetClose, Content as SheetContent, Description as SheetDescription, Footer as SheetFooter, Header as SheetHeader, Overlay as SheetOverlay, Portal as SheetPortal, Title as SheetTitle, Trigger as SheetTrigger, Title, Trigger };
 export const sheetTransitions = {
     top: {
         in: {

package/dist/panel/components/ui/sheet/sheet.css

@@ -7,9 +7,11 @@
   position: fixed;
   z-index: 1010;
   gap: var(--rz-size-4);
-  background-color: hsl(var(--rz-color-bg));
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
   padding: var(--rz-size-6);
-  box-shadow: var(--rz-shadow-xl);
   overflow-y: auto;
 
   &[data-state='closed'] {
@@ -60,12 +62,9 @@
 }
 
 .rz-sheet-content__close:focus-visible {
-  outline: none;
-  /* --rz-ring-offset: 2px; */
   border-radius: var(--rz-radius-sm);
-  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-ring) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 .rz-sheet-content--right {
@@ -73,7 +72,47 @@
   right: 0;
   top: 0;
   bottom: 0;
-  border-left: var(--rz-border);
+}
+
+.rz-sheet-content--left {
+  height: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+
+  &[data-state='closed'] {
+    animation-name: exit-left;
+  }
+  &[data-state='open'] {
+    animation-name: enter-left;
+  }
+}
+
+/* Narrow, for a panel beside the page rather than a page of its own. */
+.rz-sheet-content--sm {
+  width: min(var(--rz-size-80), 100%);
+}
+
+@keyframes exit-left {
+  from {
+    opacity: 1;
+    transform: translate3d(0%, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes enter-left {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0%, 0, 0);
+  }
 }
 
 /**************************************/
@@ -81,7 +120,7 @@
 /**************************************/
 
 .rz-sheet-description {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-muted);
   font-size: var(--rz-text-sm);
 }
 
@@ -124,10 +163,10 @@
 /**************************************/
 
 .rz-sheet-overlay {
-  background-color: var(--rz-overlay-color);
+  background-color: var(--rz-bg-overlay);
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: 1010;
   backdrop-filter: blur(var(--rz-overlay-blur));
 }
 

package/dist/panel/components/ui/sonner/sonner.css

@@ -1,21 +1,24 @@
 .rz-toaster__toast[data-sonner-toast][data-sonner-toast][data-styled='true'] {
-  background-color: hsl(var(--rz-color-bg));
-  border: var(--rz-border);
-  color: var(--rz-gray-2);
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
+  border: 0;
+  color: var(--rz-fg);
 
   &.rz-toaster__success svg {
-    fill: hsl(var(--rz-color-success));
+    fill: var(--rz-success);
   }
   &.rz-toaster__error svg {
-    fill: hsl(var(--rz-color-alert));
+    fill: var(--rz-danger);
   }
 }
 
 .rz-toaster__description {
-  color: hsl(var(--rz-color-fg));
+  color: var(--rz-fg);
 }
 
 .rz-toaster__cancel {
-  background-color: hsl(var(--rz-gray-5));
-  color: hsl(var(--rz-color-fg) / 0.7);
+  background-color: var(--rz-bg-active);
+  color: var(--rz-fg-muted);
 }

package/dist/panel/components/ui/switch/switch.css

@@ -1,20 +1,19 @@
 :root {
-  --rz-switch-color-thumb: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-16)));
-  --rz-switch-color-bg: light-dark(hsl(var(--rz-gray-13)), hsl(var(--rz-input-bg)));
-  --rz-switch-color-bg--active: hsl(var(--rz-color-spot));
+  --rz-switch-color-thumb: var(--rz-accent-fg);
+  --rz-switch-color-bg: var(--rz-border-strong);
+  --rz-switch-color-bg--active: var(--rz-accent);
 }
 
 .rz-switch {
-  /* --rz-ring-offset: 1px; */
   display: inline-flex;
-  height: 16px;
-  width: 26px;
+  height: var(--rz-size-4);
+  width: var(--rz-size-7);
   flex-shrink: 0;
   cursor: pointer;
   align-items: center;
   border-radius: var(--rz-radius-full);
   border: 2px solid transparent;
-  box-shadow: var(--rz-shadow-sm);
+  box-shadow: var(--rz-shadow-raised);
   transition: all 0.1s ease;
   outline: none;
 }
@@ -28,13 +27,12 @@
 }
 
 .rz-switch[data-error] {
-  background-color: hsl(var(--rz-color-alert));
+  background-color: var(--rz-danger);
 }
 
 .rz-switch:focus-visible {
-  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-ring) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 .rz-switch:disabled {
@@ -43,21 +41,18 @@
 }
 
 .rz-switch__thumb {
-  height: 12px;
-  width: 12px;
+  height: var(--rz-size-3);
+  width: var(--rz-size-3);
   pointer-events: none;
   display: block;
   transition: translate 0.25s ease;
   border-radius: var(--rz-radius-full);
-  box-shadow: var(--rz-shadow-lg);
+  box-shadow: var(--rz-shadow-knob);
   background-color: var(--rz-switch-color-thumb);
-  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) + 0) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
 }
 
 .rz-switch__thumb[data-state='checked'] {
-  translate: 10px;
+  translate: var(--rz-size-3);
 }
 
 .rz-switch__thumb[data-state='unchecked'] {

package/dist/panel/components/ui/switch/switch.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Switch as SwitchPrimitive } from 'bits-ui';
 import './switch.css';
-declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "checked" | "ref">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;