rimecms 0.32.1 → 1.0.0

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

@@ -25,15 +25,33 @@
   <input bind:this={ref} class="rz-input" bind:value {...restProps} />
 </div>
 
-<style>:root {
-    --rz-input-border-color: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-6) / 0.6));
+<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. */
+:root {
+    --rz-input-border-color: var(--rz-border);
     --rz-input-padding-x: var(--rz-size-3);
     --rz-input-padding-y: var(--rz-size-1);
   }
 
   .rz-input {
-    border: 1px solid var(--rz-input-border-color);
-    background-color: hsl(var(--rz-input-bg));
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
     display: flex;
     height: var(--rz-input-height);
     width: 100%;
@@ -46,34 +64,44 @@
     padding-left: calc(var(--rz-input-padding-x) + var(--rz-size-6));
   }
 
+  /* Inset shadows cover the browser's autofill fill: the page, then the well tinted with the accent. */
   input.rz-input:is(:-webkit-autofill, :-webkit-autofill) {
-    --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 12%);
+    --color: color-mix(in oklab, var(--rz-bg-well), var(--rz-accent) 12%);
     background-color: var(--color) !important;
-    box-shadow: 0 0 0 1000px var(--color) inset !important;
-    color: hsl(var(--rz-color-fg) / 1) !important;
-    -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
+    box-shadow:
+      0 0 0 1000px var(--color) inset,
+      0 0 0 1000px var(--rz-bg-page) inset !important;
+    color: var(--rz-fg) !important;
+    -webkit-text-fill-color: var(--rz-fg) !important;
   }
-
   input.rz-input:is(:-webkit-autofill, :autofill) {
-    --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 12%);
+    --color: color-mix(in oklab, var(--rz-bg-well), var(--rz-accent) 12%);
     background-color: var(--color) !important;
-    box-shadow: 0 0 0 1000px var(--color) inset !important;
-    color: hsl(var(--rz-color-fg) / 1) !important;
-    -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
+    box-shadow:
+      0 0 0 1000px var(--color) inset,
+      0 0 0 1000px var(--rz-bg-page) inset !important;
+    color: var(--rz-fg) !important;
+    -webkit-text-fill-color: var(--rz-fg) !important;
   }
   input.rz-input:is(:-webkit-autofill, :-webkit-autofill):focus {
-    --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 24%);
+    --color: color-mix(in oklab, var(--rz-bg-well), var(--rz-accent) 24%);
     background-color: var(--color) !important;
-    box-shadow: 0 0 0 1000px var(--color) inset !important;
-    color: hsl(var(--rz-color-fg) / 1) !important;
-    -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
+    box-shadow:
+      0 0 0 1000px var(--color) inset,
+      0 0 0 1000px var(--rz-bg-page) inset,
+      0 0 0 3px var(--rz-ring) !important;
+    color: var(--rz-fg) !important;
+    -webkit-text-fill-color: var(--rz-fg) !important;
   }
   input.rz-input:is(:-webkit-autofill, :autofill):focus {
-    --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 24%);
+    --color: color-mix(in oklab, var(--rz-bg-well), var(--rz-accent) 24%);
     background-color: var(--color) !important;
-    box-shadow: 0 0 0 1000px var(--color) inset !important;
-    color: hsl(var(--rz-color-fg) / 1) !important;
-    -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
+    box-shadow:
+      0 0 0 1000px var(--color) inset,
+      0 0 0 1000px var(--rz-bg-page) inset,
+      0 0 0 3px var(--rz-ring) !important;
+    color: var(--rz-fg) !important;
+    -webkit-text-fill-color: var(--rz-fg) !important;
   }
 
   .rz-input:disabled {
@@ -81,24 +109,22 @@
     cursor: not-allowed;
   }
   .rz-input::-moz-placeholder {
-    color: hsl(var(--rz-color-fg) / 0.5);
+    color: var(--rz-fg-subtle);
   }
   .rz-input::placeholder {
-    color: hsl(var(--rz-color-fg) / 0.5);
+    color: var(--rz-fg-subtle);
   }
 
   .rz-input:focus-visible {
     outline: none;
-    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));
+    border-color: var(--rz-accent-border);
+    box-shadow: 0 0 0 3px var(--rz-ring);
   }
 
   .rz-input[data-error] {
     outline: none;
-    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));
+    border-color: var(--rz-danger);
+    box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
   }
 
   .rz-input-wrapper {
@@ -111,11 +137,11 @@
       top: 50%;
       transform: translateY(-50%);
       pointer-events: none;
-      color: hsl(var(--rz-color-fg) / 0.4);
+      color: var(--rz-fg-subtle);
     }
 
     .rz-input__icon:has(+ .rz-input:focus-visible) {
-      color: hsl(var(--rz-color-fg));
+      color: var(--rz-fg);
     }
   }
 </style>

package/dist/panel/components/ui/kbd/Kbd.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { formatKeys, isMac, parseKeys } from '../../../util/keys.js';
+  import {
+    ArrowBigUp,
+    ArrowDown,
+    ArrowLeft,
+    ArrowRight,
+    ArrowUp,
+    Command,
+    CornerDownLeft,
+    Delete,
+    Option
+  } from '@lucide/svelte';
+
+  /**
+   * A key chord drawn key by key: `mod+k` -> [⌘] [K] on a Mac, [Ctrl] [K] elsewhere.
+   * `plain` drops the key caps, for a chord inside a button.
+   */
+  type Props = { keys: string; plain?: boolean };
+  const { keys, plain = false }: Props = $props();
+
+  // The server cannot tell the platform: the chord starts as elsewhere and turns Mac once mounted.
+  let mac = $state(false);
+  $effect(() => {
+    mac = isMac();
+  });
+
+  const chord = $derived(parseKeys(keys));
+
+  const ICONS: Record<string, typeof Command> = {
+    arrowup: ArrowUp,
+    arrowdown: ArrowDown,
+    arrowleft: ArrowLeft,
+    arrowright: ArrowRight,
+    enter: CornerDownLeft,
+    backspace: Delete
+  };
+  const LABELS: Record<string, string> = { escape: 'esc', delete: 'del', ' ': 'space' };
+</script>
+
+{#snippet cap(label: string, Icon?: typeof Command)}
+  <span class="rz-kbd__key">
+    {#if Icon}<Icon size="1em" strokeWidth={2} />{:else}{label}{/if}
+  </span>
+{/snippet}
+
+<kbd class="rz-kbd" class:rz-kbd--plain={plain} aria-label={formatKeys(keys, mac)}>
+  {#if chord.mod}{@render cap('Ctrl', mac ? Command : undefined)}{/if}
+  {#if chord.alt}{@render cap('Alt', mac ? Option : undefined)}{/if}
+  {#if chord.shift}{@render cap('Shift', mac ? ArrowBigUp : undefined)}{/if}
+  {@render cap(LABELS[chord.key] ?? chord.key.toUpperCase(), ICONS[chord.key])}
+</kbd>
+
+<style>
+  .rz-kbd {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+    color: var(--rz-fg-subtle);
+    font-family: var(--rz-font-sans);
+    font-size: var(--rz-text-xs);
+    line-height: 1;
+  }
+
+  .rz-kbd__key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.6em;
+    height: 1.6em;
+    padding: 0 0.35em;
+    border-radius: var(--rz-radius-sm);
+    background-color: var(--rz-bg-well);
+    box-shadow: inset 0 0 0 1px var(--rz-border);
+  }
+
+  .rz-kbd--plain {
+    gap: 0.15em;
+    color: inherit;
+
+    .rz-kbd__key {
+      min-width: 0;
+      height: auto;
+      padding: 0;
+      background: none;
+      box-shadow: none;
+    }
+  }
+</style>

package/dist/panel/components/ui/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A key chord drawn key by key: `mod+k` -> [⌘] [K] on a Mac, [Ctrl] [K] elsewhere.
+ * `plain` drops the key caps, for a chord inside a button.
+ */
+type Props = {
+    keys: string;
+    plain?: boolean;
+};
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

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

@@ -0,0 +1 @@
+export { default as Kbd } from './Kbd.svelte';

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

@@ -0,0 +1 @@
+export { default as Kbd } from './Kbd.svelte';

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

@@ -1,8 +1,10 @@
+/* A field's name: small, medium, muted. */
 .rz-label {
   display: inline-block;
-  color: hsl(var(--rz-color-fg));
-  font-variation-settings: 'wght' 600;
-  font-weight: 600;
+  color: var(--rz-fg-muted);
+  font-size: var(--rz-text-sm);
+  font-variation-settings: 'wght' 500;
+  font-weight: 500;
 }
 .rz-label ~ :disabled {
   opacity: 0.7;

package/dist/panel/components/ui/language-switcher/LanguageSwitcher.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { dev } from '$app/environment';
+  import { t__ } from '../../../../core/i18n/index.js';
   import Button from '../button/button.svelte';
   import * as DropdownMenu from '../dropdown-menu/index.js';
+  import { useCommands } from '../../../context/commands.svelte.js';
   import { getConfigContext } from '../../../context/config.svelte.js';
   import { getLocaleContext } from '../../../context/locale.svelte.js';
-  import { Languages } from '@lucide/svelte';
+  import { ChevronDown, Languages } from '@lucide/svelte';
   import Cookies from 'js-cookie';
 
   type Props = { onLocalClick: (code: string) => void };
@@ -17,19 +19,35 @@
   function isActive(code: string) {
     return code === locale.code;
   }
+
+  function switchTo(code: string) {
+    Cookies.set('rime.locale', code, { sameSite: 'strict', secure: !dev });
+    onLocalClick(code);
+  }
+
+  /** The other locales, in the palette, with the panel's own commands below the page's. */
+  useCommands(
+    () =>
+      locales
+        .filter((item) => !isActive(item.code))
+        .map((item) => ({
+          id: `locale.${item.code}`,
+          label: t__('common.switch_to_language', item.label),
+          group: t__('common.language'),
+          icon: Languages,
+          run: () => switchTo(item.code)
+        })),
+    { depth: 0 }
+  );
 </script>
 
 {#if config.raw.localization?.locales.length}
   <DropdownMenu.Root>
     <DropdownMenu.Trigger>
       {#snippet child({ props })}
-        <Button
-          icon={Languages}
-          size="sm"
-          variant={props['data-state'] === 'open' ? 'secondary' : 'ghost'}
-          {...props}
-        >
-          {locale.label}
+        <Button size="sm" aria-label={locale.label} variant="ghost" {...props}>
+          {locale.code?.toUpperCase()}
+          <ChevronDown size="13" class="rz-language-switcher__chevron" />
         </Button>
       {/snippet}
     </DropdownMenu.Trigger>
@@ -40,13 +58,7 @@
           <DropdownMenu.Item
             disabled={isActive(item.code)}
             data-active={isActive(item.code) ? '' : null}
-            onclick={() => {
-              Cookies.set('rime.locale', item.code, {
-                sameSite: 'strict',
-                secure: !dev
-              });
-              onLocalClick(item.code);
-            }}
+            onclick={() => switchTo(item.code)}
           >
             <span>{item.label}</span>
           </DropdownMenu.Item>

package/dist/panel/components/ui/nav/Nav.svelte

@@ -1,23 +1,37 @@
 <script lang="ts">
   import { panelPath } from '../../../../core/routes/util.js';
+  import CommandButton from '../../sections/commands/CommandButton.svelte';
   import { getConfigContext } from '../../../context/config.svelte.js';
+  import { getNavContext } from '../../../context/nav.svelte.js';
   import type { Route } from '../../../types';
-  import { PanelsTopLeft } from '@lucide/svelte';
+  import { PanelLeft, PanelsTopLeft } from '@lucide/svelte';
   import ScrollArea from '../scroll-area/scroll-area.svelte';
   import NavGroup from './NavGroup.svelte';
   import NavItem from './NavItem.svelte';
   import UserButton from './UserButton.svelte';
 
-  type Props = {
-    isCollapsed: boolean;
-    setCollapsed: (value: boolean) => void;
-    routes: Record<string, Route[]>;
-  };
-  const { isCollapsed, setCollapsed, routes: routesGroups }: Props = $props();
+  type Props = { routes: Record<string, Route[]> };
+  const { routes: routesGroups }: Props = $props();
+
+  const nav = getNavContext()!;
+  const isCollapsed = $derived(nav.collapsed);
 
   const config = getConfigContext();
   const navigationGroupsConfig = config.raw.panel.navigation?.groups;
 
+  /** The host of a url, or nothing when it does not parse. */
+  function hostOf(url?: string) {
+    if (!url) return undefined;
+    try {
+      return new URL(url).host;
+    } catch {
+      return undefined;
+    }
+  }
+
+  // config.siteName, else the host of config.siteUrl, else "rime"
+  const siteName = config.raw.siteName || hostOf(config.raw.siteUrl) || 'rime';
+
   const getGroupIcon = (groupName: string) => {
     if (!navigationGroupsConfig) return null;
     const group = navigationGroupsConfig.find((group) => group.label === groupName);
@@ -34,134 +48,190 @@
   };
 </script>
 
-<div class:rz-nav--collapsed={isCollapsed} class="rz-nav">
-  <div class="rz-nav__content">
-    <div class="rz-nav__header" class:rz-nav__header--collapsed={isCollapsed}>
-      <NavItem href={panelPath()} {isCollapsed} route={dashBoardRoute} />
-    </div>
-
-    <div class="rz-nav__body">
-      <ScrollArea>
-        <nav class="rz-nav__nav">
-          {#each Object.entries(routesGroups) as [groupName, routes], index (index)}
-            {#if groupName !== 'none'}
-              {@const icon = getGroupIcon(groupName)}
-              <NavGroup name={groupName} {icon} navCollapsed={isCollapsed}>
-                {#each routes as route (route.url)}
-                  <NavItem href={route.url} {isCollapsed} {route} />
-                {/each}
-              </NavGroup>
-            {/if}
-          {/each}
-          {#each routesGroups.none as route (route.url)}
-            <div class="rz-nav__group-none">
-              <NavItem href={route.url} {isCollapsed} {route} />
-            </div>
-          {/each}
-        </nav>
-      </ScrollArea>
+<aside class="rz-nav" class:rz-nav--collapsed={isCollapsed}>
+  <div class="rz-nav__head">
+    {#if !isCollapsed}
+      <a class="rz-nav__brand" href={panelPath()}>
+        <span class="rz-nav__brand-mark">{siteName.charAt(0)}</span>
+        <span class="rz-nav__brand-name">{siteName}</span>
+      </a>
+    {/if}
+    <button
+      type="button"
+      class="rz-nav__toggle"
+      onclick={nav.toggle}
+      aria-label="Toggle navigation"
+      aria-expanded={!isCollapsed}
+    >
+      <PanelLeft size="15" />
+    </button>
+  </div>
 
-      <div class="rz-nav__user">
-        <UserButton navCollapsed={isCollapsed} />
-      </div>
-    </div>
+  <CommandButton variant={isCollapsed ? 'icon' : 'input'} />
+
+  <div class="rz-nav__body">
+    <ScrollArea>
+      <nav class="rz-nav__nav">
+        <div class="rz-nav__group">
+          <NavItem href={panelPath()} {isCollapsed} route={dashBoardRoute} />
+          {#each routesGroups.none ?? [] as route (route.url)}
+            <NavItem href={route.url} {isCollapsed} {route} />
+          {/each}
+        </div>
+        {#each Object.entries(routesGroups) as [groupName, routes], index (index)}
+          {#if groupName !== 'none'}
+            {@const icon = getGroupIcon(groupName)}
+            <NavGroup name={groupName} {icon} navCollapsed={isCollapsed}>
+              {#each routes as route (route.url)}
+                <NavItem href={route.url} {isCollapsed} {route} />
+              {/each}
+            </NavGroup>
+          {/if}
+        {/each}
+      </nav>
+    </ScrollArea>
   </div>
 
-  <button
-    class="rz-nav__toggle"
-    onclick={() => setCollapsed(!isCollapsed)}
-    aria-label="Toggle navigation"
-  >
-  </button>
-</div>
-
-<style>
-  :root {
-    --rz-nav-button-height: var(--rz-size-12);
-    --rz-nav-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
-
-    --rz-nav-button-bg: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-2)));
-    --rz-nav-group-bg: light-dark(hsl(var(--rz-gray-17)), hsl(var(--rz-gray-1)));
-    --rz-nav-group-border-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-2)));
-  }
+  <UserButton navCollapsed={isCollapsed} />
+</aside>
+
+<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. */
 
-  .rz-nav {
+/* 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-nav {
     position: fixed;
-    z-index: 100;
+    z-index: 300;
+    top: 0;
     bottom: 0;
     left: 0;
-    top: 0;
-    padding: var(--rz-size-2) var(--rz-size-5);
-    background-color: var(--rz-nav-bg);
-    border-right: var(--rz-border);
-    width: var(--rz-size-72);
-
-    .rz-nav__toggle {
-      position: absolute;
-      display: none;
-      align-items: center;
-      justify-content: center;
-      width: var(--rz-size-6);
-      height: 100vh;
-      right: 0;
-      translate: var(--rz-size-3) 0;
-      z-index: 10;
-      top: 0;
-      display: none;
-      cursor: w-resize;
-      padding: var(--rz-size-2);
-      @media (min-width: 1024px) {
-        display: flex;
-      }
-    }
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-3);
+    width: var(--rz-size-60);
+    padding: var(--rz-size-3) var(--rz-size-2-5) var(--rz-size-2-5);
+    background-color: var(--rz-bg-base);
+    box-shadow: inset -1px 0 0 var(--rz-border);
+    font-size: var(--rz-text-md);
   }
+
   .rz-nav--collapsed {
-    width: var(--rz-size-14);
-    padding: var(--rz-size-3);
-    :global(.rz-button-nav) {
-      justify-content: start;
-    }
-    .rz-nav__toggle {
-      cursor: e-resize;
+    align-items: center;
+    width: var(--rz-size-12);
+
+    :global(.rz-nav-item) {
+      justify-content: center;
+      width: var(--rz-size-8);
+      padding: 0;
     }
   }
-  .rz-nav__content {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-  }
-  .rz-nav__header {
+
+  .rz-nav__head {
     display: flex;
-    height: var(--rz-size-14);
     flex-shrink: 0;
     align-items: center;
     justify-content: space-between;
-    padding-right: var(--rz-size-4);
-    padding-left: var(--rz-size-4);
+    gap: var(--rz-size-2);
+    width: 100%;
+    height: var(--rz-size-8);
+    padding-left: var(--rz-size-1-5);
+  }
 
-    &.rz-nav__header--collapsed {
-      justify-content: center;
+  .rz-nav--collapsed .rz-nav__head {
+    justify-content: center;
+    padding: 0;
+  }
+
+  .rz-nav__brand {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2-5);
+    min-width: 0;
+    color: var(--rz-fg);
+    font-size: var(--rz-text-lg);
+    letter-spacing: -0.01em;
+    font-variation-settings: 'wght' 600;
+    font-weight: 600;
+  }
+
+  .rz-nav__brand-mark {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--rz-size-6);
+    height: var(--rz-size-6);
+    border-radius: var(--rz-radius-sm);
+    font-size: var(--rz-text-xs);
+    text-transform: uppercase;
+    background: var(--rz-gradient-primary);
+    color: var(--rz-fg-inverse);
+    box-shadow: var(--rz-shadow-primary);
+  }
+
+  .rz-nav__brand-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rz-nav__toggle {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--rz-size-7);
+    height: var(--rz-size-7);
+    border-radius: var(--rz-radius-md);
+    color: var(--rz-fg-subtle);
+    transition:
+      background-color 0.15s,
+      color 0.15s;
+
+    &:hover {
+      background-color: var(--rz-bg-hover);
+      color: var(--rz-fg);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
     }
   }
+
+  .rz-nav--collapsed :global(.rz-cmdk-input) {
+    flex-shrink: 0;
+  }
+
   .rz-nav__body {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-    justify-content: space-between;
+    flex: 1;
+    width: 100%;
+    min-height: 0;
   }
-  .rz-nav__group-none {
-    padding: 0 var(--rz-size-4);
+
+  .rz-nav__nav {
     display: flex;
     flex-direction: column;
-    gap: var(--rz-size-2);
-  }
-  .rz-nav__nav {
-    border-radius: var(--rz-radius-lg);
+    gap: var(--rz-size-5);
+    padding-top: var(--rz-size-2);
   }
+
   .rz-nav--collapsed .rz-nav__nav {
     align-items: center;
+    gap: var(--rz-size-1-5);
   }
-  .rz-nav__user {
-    padding-bottom: var(--rz-size-2);
+
+  .rz-nav__group {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
   }
 </style>