@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/styles/utilities-layout.css

@@ -19,6 +19,9 @@
   @apply rounded-lg transition-colors duration-150;
   @apply bg-white border border-zinc-100;
   @apply dark:bg-zinc-900 dark:border-zinc-800;
+  /* Gentle inset bevel (clip-safe). Flows through the token so the Layout
+     header's inline `box-shadow: var(--theme-shadow-elevated)` stays consistent. */
+  box-shadow: var(--theme-shadow-elevated);
 }
 
 @utility dialog-panel {
@@ -27,11 +30,19 @@
   @apply backdrop:bg-black/40;
   @apply rounded-lg bg-white dark:bg-zinc-900;
   @apply border border-zinc-200 dark:border-zinc-800;
-  @apply shadow-lg;
+  /* Floating dialog (portaled) — outer shadow is fine here. */
+  box-shadow: var(--theme-shadow-float);
 }
 
 @utility paper-highlighted {
-  @apply paper border-zinc-300 dark:border-zinc-700;
+  @apply paper;
+  background: linear-gradient(90deg, rgb(239 246 255 / 0.34), rgb(255 255 255 / 0.82)), var(--color-white);
+}
+
+.dark .paper-highlighted,
+.dark .hover\:paper-highlighted:hover {
+  background: rgb(23 37 84 / 0.2);
+  box-shadow: var(--theme-shadow-elevated);
 }
 
 @utility no-scrollbar {
@@ -43,6 +54,35 @@
   scrollbar-width: none;
 }
 
+.panes-tab-strip {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.panes-tab-strip::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.panes-tab-strip:hover,
+.panes-tab-strip:focus-within {
+  scrollbar-color: rgb(161 161 170 / 0.45) transparent;
+}
+
+.panes-tab-strip:hover::-webkit-scrollbar-thumb,
+.panes-tab-strip:focus-within::-webkit-scrollbar-thumb {
+  background: rgb(161 161 170 / 0.45);
+}
+
+.dark .panes-tab-strip:hover,
+.dark .panes-tab-strip:focus-within {
+  scrollbar-color: rgb(82 82 91 / 0.6) transparent;
+}
+
+.dark .panes-tab-strip:hover::-webkit-scrollbar-thumb,
+.dark .panes-tab-strip:focus-within::-webkit-scrollbar-thumb {
+  background: rgb(82 82 91 / 0.6);
+}
+
 @utility ellipsis {
   @apply overflow-hidden text-ellipsis whitespace-nowrap;
 }

package/src/styles/utilities-markdown-editor.css

@@ -0,0 +1,472 @@
+/* Markdown editor — overtype-style layered textarea + preview.
+
+   The textarea has `color: transparent` so its glyphs are invisible; only
+   the cursor (caret-color) and selection show through. The preview div
+   beneath renders the same text with markdown syntax highlighted. Identical
+   font / padding / whitespace / wrapping on both layers is REQUIRED for
+   the cursor to line up exactly with the visible glyphs in the preview.
+
+   All glyph-affecting properties on `.md-editor-layer` use `!important` to
+   defeat any cascading style that would shift the layers relative to each
+   other. No font-size, font-weight, or font-style is ever varied between
+   the textarea and inner preview spans — bold uses a text-shadow trick,
+   italic uses colour. Any real weight/style change risks glyph-width
+   drift even on nominally monospace fonts. */
+
+.md-editor {
+  position: relative;
+  @apply rounded-md border;
+  @apply bg-zinc-100 border-zinc-100;
+  @apply hover:bg-zinc-200/70 hover:border-zinc-200/70;
+  @apply dark:bg-zinc-800 dark:border-zinc-800;
+  @apply dark:hover:bg-zinc-700 dark:hover:border-zinc-700;
+  @apply transition-colors;
+  @apply overflow-hidden;
+  /* Recessed well — matches the `input` utility (default variant is field-shaped).
+     The `paper` variant below overrides this with a card bevel instead. */
+  box-shadow: var(--theme-recess);
+}
+
+.md-editor:focus-within {
+  @apply bg-white border-blue-400;
+  @apply dark:bg-zinc-900 dark:border-blue-400;
+}
+
+.md-editor[data-variant="paper"] {
+  @apply rounded-lg;
+  @apply bg-white border-zinc-100;
+  @apply hover:bg-white hover:border-zinc-100;
+  @apply dark:bg-zinc-900 dark:border-zinc-800;
+  @apply dark:hover:bg-zinc-900 dark:hover:border-zinc-800;
+  /* Paper variant = a document surface, so it gets the card bevel (raised),
+     not the recess of the field variant. */
+  box-shadow: var(--theme-shadow-elevated);
+}
+
+.md-editor[data-variant="paper"]:focus-within {
+  @apply bg-white border-blue-400;
+  @apply dark:bg-zinc-900 dark:border-blue-400;
+}
+
+.md-editor[data-variant="paper"] .md-editor-toolbar {
+  @apply bg-white border-zinc-100;
+  @apply dark:bg-zinc-900 dark:border-zinc-800;
+}
+
+.md-editor[data-variant="paper"] .md-editor-tool {
+  @apply hover:bg-zinc-100;
+  @apply dark:hover:bg-zinc-800;
+}
+
+.md-editor[data-disabled="true"] {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+/* Error state — red border, both unfocused and focused, mirroring how
+   the standard `.input` utility would visually signal an error. The
+   error MESSAGE itself is rendered separately by `InputWrapper` below
+   the editor. */
+.md-editor[data-error="true"],
+.md-editor[data-error="true"]:focus-within {
+  @apply border-red-400 dark:border-red-500;
+}
+
+/* Toolbar bar above the editor surface */
+.md-editor-toolbar {
+  @apply flex items-center gap-0.5 flex-wrap;
+  @apply px-1.5 py-1;
+  @apply border-b border-zinc-200 dark:border-zinc-700;
+}
+
+.md-editor:focus-within .md-editor-toolbar {
+  @apply border-zinc-200 dark:border-zinc-700;
+}
+
+.md-editor-tool {
+  @apply inline-flex items-center justify-center;
+  @apply w-7 h-7 rounded;
+  @apply text-zinc-500 dark:text-zinc-400;
+  @apply hover:bg-zinc-200 hover:text-zinc-800;
+  @apply dark:hover:bg-zinc-700 dark:hover:text-zinc-100;
+  @apply transition-colors;
+  font-size: 0.95rem;
+}
+
+/* Active formatting at the caret — blue tint + faint blue background
+   so the active state is unmistakable at a glance, without becoming
+   visually loud. Hover on an active button keeps the blue surface
+   tone (not the zinc one) so the colour doesn't flicker. */
+.md-editor-tool[aria-pressed="true"] {
+  @apply text-blue-600 bg-blue-50;
+  @apply dark:text-blue-400 dark:bg-blue-950/40;
+}
+
+.md-editor-tool[aria-pressed="true"]:hover {
+  @apply bg-blue-100 text-blue-700;
+  @apply dark:bg-blue-900/40 dark:text-blue-300;
+}
+
+.md-editor-tool-sep {
+  @apply w-px h-4 bg-zinc-300 dark:bg-zinc-600 mx-1;
+}
+
+/* The two stacked layers. The wrapper has explicit height (set inline
+   via style="--md-h: ...em") so both layers can size to it via 100%. */
+.md-editor-surface {
+  position: relative;
+  height: var(--md-h, 8rem);
+}
+
+.md-editor-layer {
+  /* These properties MUST be identical on textarea and preview.
+     `!important` because user-agent textarea defaults + any stray rule
+     could otherwise shift one layer relative to the other.
+
+     Bold + italic are NOT done via font-weight / font-style on this
+     layer — see the rules further down. We rely on text-shadow for
+     fake-bold and colour-only for italic so the glyph advance widths
+     stay identical between the textarea and the preview. */
+  position: absolute !important;
+  inset: 0 !important;
+  display: block !important;
+
+  /* Typography — identical glyph metrics on both layers.
+     Every property here is locked down so the textarea and preview
+     can never disagree on glyph advance widths. The four critical
+     subtleties:
+       1. `font-synthesis: none` — only-loaded weights (400/500/600
+          for IBM Plex Mono) get used. Asking for 700 would synthesise
+          a faux-bold, and synthesised bold does NOT preserve mono
+          glyph widths.
+       2. `font-variant-ligatures: none` + `font-feature-settings`
+          disable ligatures (`==` → `≡` etc.) and contextual
+          alternates. Both reshape glyph runs and break alignment.
+       3. `letter-spacing: 0` (NOT `normal`) — `normal` lets the font
+          decide and some shells inject a fractional value.
+       4. `text-rendering: geometricPrecision` — disables kerning so
+          even non-monospace fallback fonts don't shift glyph X
+          positions across layers. */
+  /* IBM Plex Mono is shipped via @fontsource (regular + italic + 500
+     + 600 weights — see global.css). Pinning the font here means the
+     editor looks identical across OSes and we control the italic
+     variant precisely. The bold/heading "weight" is faked via
+     text-shadow further down so we never actually request a weight
+     the loaded font lacks. The trailing `monospace` is a last-ditch
+     fallback if Plex Mono ever fails to load. */
+  font-family: "IBM Plex Mono", monospace !important;
+  font-size: 0.875rem !important; /* 14px */
+  line-height: 1.55 !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+  font-variant: normal !important;
+  font-variant-ligatures: none !important;
+  font-variant-numeric: tabular-nums !important;
+  font-variant-position: normal !important;
+  font-stretch: normal !important;
+  font-kerning: none !important;
+  font-synthesis: none !important;
+  -webkit-font-synthesis: none !important;
+  font-feature-settings:
+    "liga" 0,
+    "clig" 0,
+    "calt" 0 !important;
+  font-variation-settings: normal !important;
+  font-optical-sizing: none !important;
+  letter-spacing: 0 !important;
+  word-spacing: 0 !important;
+  text-align: left !important;
+  text-indent: 0 !important;
+  text-transform: none !important;
+  text-rendering: geometricPrecision !important;
+
+  /* Box model */
+  padding: 0.625rem 0.75rem !important;
+  margin: 0 !important;
+  border: 0 !important;
+  outline: 0 !important;
+  box-sizing: border-box !important;
+
+  /* Whitespace + wrapping — must agree on every char position */
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  word-break: normal !important;
+  overflow-wrap: break-word !important;
+  tab-size: 2 !important;
+  -moz-tab-size: 2 !important;
+
+  /* Sizing */
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  min-width: 0 !important;
+  max-width: none !important;
+
+  /* Scrolling — both layers must reserve scrollbar space identically
+     or the content widths diverge and long lines wrap at different
+     columns. We force `overflow-y: scroll` on both so the gutter is
+     always present. The textarea shows its native scrollbar; the
+     preview's scrollbar is rendered but painted transparent (see
+     `.md-editor-preview` block) — the gutter stays, the visual goes. */
+  overflow-y: scroll !important;
+  overflow-x: hidden !important;
+  scrollbar-width: thin !important;
+
+  /* Background neutralised — wrapper owns the surface color */
+  background: transparent !important;
+
+  /* No animations that could shift glyph position */
+  animation: none !important;
+  transition: none !important;
+}
+
+.md-editor-input {
+  z-index: 2 !important;
+  resize: none !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  /* Hide own glyphs, show only cursor.
+     `caret-color` must be an explicit colour, NOT `currentColor` — the
+     textarea's own `color` is `transparent`, so `currentColor` would
+     resolve to transparent and the cursor would vanish. We mirror the
+     preview's prose colour (zinc-900 light / zinc-100 dark). */
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
+  caret-color: #18181b !important; /* zinc-900 */
+  /* Prevent mobile double-tap zoom */
+  touch-action: manipulation !important;
+}
+
+.dark .md-editor-input {
+  caret-color: #f4f4f5 !important; /* zinc-100 */
+}
+
+/* Selection background visible even with transparent glyphs */
+.md-editor-input::selection {
+  background: rgb(59 130 246 / 0.35);
+  color: transparent;
+}
+
+.md-editor-preview {
+  z-index: 1 !important;
+  /* Click + selection happen on the textarea, not here */
+  pointer-events: none !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  @apply text-zinc-900 dark:text-zinc-100;
+  /* Paint the preview's scrollbar transparent so only the textarea's
+     scrollbar (sitting on top, z-index: 2) is visible. We CAN'T set
+     `scrollbar-width: none` here — that would also remove the gutter
+     and the preview's content width would no longer match the
+     textarea's, breaking wrap alignment. The transparent-colour trick
+     preserves the gutter while hiding the visual. */
+  scrollbar-color: transparent transparent !important;
+}
+
+.md-editor-preview::-webkit-scrollbar-thumb,
+.md-editor-preview::-webkit-scrollbar-track,
+.md-editor-preview::-webkit-scrollbar-corner {
+  background: transparent !important;
+  border: 0 !important;
+}
+
+/* Critical alignment safeguard (overtype lesson, styles.js:256-264):
+   force EVERY descendant inside the preview to inherit font-family,
+   font-size, and line-height from the preview itself. Without this,
+   external CSS (Tailwind base, @tailwindcss/typography, etc.) can
+   set element-specific font-size on, say, `<span>` or implicit
+   `<h2>` elements. Any such per-element metric difference inflates
+   the line-box height and drifts the overlay relative to the
+   textarea — visible as a "cursor far to the right of the visible
+   text" symptom. Also reset margin/padding/border so no inner
+   element can add box-model space the textarea doesn't have. */
+.md-editor-preview *,
+.md-editor-preview *::before,
+.md-editor-preview *::after {
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  font-stretch: inherit !important;
+  letter-spacing: inherit !important;
+  word-spacing: inherit !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  text-indent: 0 !important;
+  vertical-align: baseline !important;
+  display: inline !important;
+}
+
+/* Placeholder shim — shown when the textarea is empty. MUST use the
+   exact same typography stack as `.md-editor-layer` so the cursor
+   position doesn't visibly jump when the first character is typed
+   and the placeholder fades out. */
+.md-editor-placeholder {
+  position: absolute !important;
+  inset: 0 !important;
+  padding: 0.625rem 0.75rem !important;
+  font-family: "IBM Plex Mono", monospace !important;
+  font-size: 0.875rem !important;
+  line-height: 1.55 !important;
+  font-weight: 400 !important;
+  letter-spacing: 0 !important;
+  word-spacing: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  z-index: 0 !important;
+  @apply text-zinc-400 dark:text-zinc-500;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  word-break: normal !important;
+  overflow-wrap: break-word !important;
+}
+
+/* Syntax highlighting classes — applied INSIDE the preview div by the
+   highlighter. Each rule must preserve glyph width (monospace font does
+   the heavy lifting; we only change weight, color, background). */
+
+/* The visible markdown syntax characters (**, #, -, >, etc.) — kept
+   on-screen but dimmed so prose stands out. */
+.md-syntax,
+.md-marker {
+  @apply text-zinc-400 dark:text-zinc-500;
+}
+
+/* Bold + headers via `text-shadow` instead of `font-weight`.
+
+   Why: any font-weight change risks glyph-advance-width drift between
+   the textarea (locked at weight 400) and the preview. Even nominal
+   monospace fonts can have subtle weight-dependent width changes,
+   especially in browser rasterisers. `text-shadow: 0.5px 0 0
+   currentColor` paints a copy of each glyph 0.5px to the right —
+   visually equivalent to a heavier stroke, but the underlying glyph
+   advance is UNCHANGED. The cursor in the textarea (running at
+   weight 400) lines up perfectly with the visibly "bold" glyphs in
+   the preview because they ARE rendered at weight 400 underneath.
+
+   Italics: same logic — `font-style: italic` swaps in a different
+   font face whose glyph metrics may not perfectly match upright. We
+   simulate italic via colour + a transparent overlay we can't get
+   in CSS, so for italic we accept a colour-only differentiation. */
+.md-h1,
+.md-h2,
+.md-h3,
+.md-bold {
+  text-shadow: 0.5px 0 0 currentColor;
+}
+
+/* Slight tonal ladder so the heading levels are still distinguishable
+   at a glance, even though they share the same weight + size. */
+.md-h1 {
+  @apply text-zinc-950 dark:text-white;
+}
+
+.md-h2 {
+  @apply text-zinc-900 dark:text-zinc-50;
+}
+
+.md-h3 {
+  @apply text-zinc-800 dark:text-zinc-200;
+}
+
+/* Italic: real `font-style: italic`. IBM Plex Mono Italic 400 is
+   loaded as a separate face (see global.css) and is designed as
+   monospace — its glyph advance widths match the regular face. The
+   `!important` defeats the layer-level `font-style: normal !important`
+   so the .md-italic span actually picks up italic. */
+.md-italic {
+  font-style: italic !important;
+}
+
+/* Inline code — background only, no width change.
+   Negative padding would break alignment; we just paint behind the
+   glyphs and accept that the highlight doesn't have inset. */
+.md-code {
+  @apply bg-zinc-200/60 dark:bg-zinc-700/50 rounded-sm;
+}
+
+/* Links — color + underline, both width-safe */
+.md-link {
+  @apply text-blue-600 dark:text-blue-400 underline;
+  text-underline-offset: 2px;
+}
+
+/* Blockquote — color + inset box-shadow for the left bar (box-shadow
+   doesn't affect layout, unlike border-left or padding-left). The bar
+   sits visually outside the text column edge so prose stays aligned. */
+.md-quote {
+  @apply text-zinc-600 dark:text-zinc-400;
+  box-shadow: inset 3px 0 0 var(--color-zinc-300);
+}
+
+.dark .md-quote {
+  box-shadow: inset 3px 0 0 var(--color-zinc-600);
+}
+
+/* Fenced code lines — background only */
+.md-code-block {
+  @apply bg-zinc-200/40 dark:bg-zinc-800;
+}
+
+.md-code-block pre,
+.md-script-source,
+.md-mermaid-block,
+.md-katex-block {
+  border: 1px solid rgb(228 228 231 / 0.72) !important;
+  border-radius: 0.42rem !important;
+  background: color-mix(in oklab, white 92%, rgb(244 244 245)) !important;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.46),
+    inset 0 -1px 0 rgb(0 0 0 / 0.025);
+}
+
+.md-katex-block {
+  padding: 0.75rem;
+}
+
+.dark .md-code-block pre,
+.dark .md-script-source,
+.dark .md-mermaid-block,
+.dark .md-katex-block {
+  border-color: rgb(63 63 70 / 0.72) !important;
+  background: color-mix(in oklab, rgb(24 24 27) 90%, rgb(39 39 42)) !important;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.045),
+    inset 0 -1px 0 rgb(0 0 0 / 0.28);
+}
+
+/* Horizontal rule (---) — just dim the marker; can't draw an actual
+   rule line without inserting layout-shifting elements. */
+.md-hr {
+  @apply text-zinc-400 dark:text-zinc-500;
+}
+
+/* Completion match — every occurrence of a registered completion
+   label (abbreviation or trigger result) is tinted blue so the
+   reader can see what's a recognised mention vs. plain prose.
+   No underline: a dotted underline reads too much like a spellcheck
+   squiggle and trips people into thinking something's broken. */
+.md-completion-match {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* Stats footer — lines / words / chars, anchored at the bottom-left
+   of the editor. No border, no background tint — it inherits the
+   editor body colour and sits as a quiet meta-row separated from the
+   content only by its dim mono text and a hair of padding.
+   When the editor is empty we keep the element rendered (so the
+   editor's outer height stays constant — no layout shift across all
+   sibling fields when the user starts / clears typing) but flip
+   `visibility: hidden` to remove the stats from sight. */
+.md-editor-stats {
+  @apply flex justify-start items-center gap-3;
+  @apply px-3 py-1;
+  @apply text-[10px] text-zinc-400 dark:text-zinc-500;
+  @apply font-mono select-none;
+  letter-spacing: 0.02em;
+}
+
+.md-editor-stats[data-empty="true"] {
+  visibility: hidden;
+}

package/src/styles/utilities-navigation.css

@@ -19,6 +19,8 @@
 @utility sidebar {
   @apply flex h-full min-h-0 flex-col gap-3 rounded-lg border border-zinc-200 bg-white;
   @apply dark:border-zinc-800 dark:bg-zinc-900;
+  /* Same gentle inset bevel as `paper` so the sidebar reads as a dimensional surface. */
+  box-shadow: var(--theme-shadow-elevated);
 }
 
 @utility sidebar-container {
@@ -77,6 +79,43 @@
   @apply mt-auto flex flex-col gap-2;
 }
 
+@utility sidebar-icon-grid-wrap {
+  @apply flex flex-col gap-1;
+}
+
+@utility sidebar-icon-grid {
+  @apply grid gap-1.5;
+}
+
+@utility sidebar-icon-action {
+  @apply flex h-12 w-full min-w-0 items-center justify-center rounded-xl border-0 bg-zinc-100/70 text-zinc-600;
+  @apply transition-[background-color,color,transform,box-shadow] duration-150 ease-out hover:bg-zinc-200 hover:text-zinc-900;
+  @apply focus-ui;
+  @apply active:scale-[0.98];
+  @apply dark:bg-zinc-800/65 dark:text-zinc-300 dark:hover:bg-zinc-700 dark:hover:text-zinc-100;
+  /* Raised tile (matches the redesign); sinks on press */
+  box-shadow: var(--theme-bevel-top), var(--theme-bevel-bottom);
+  &:active {
+    box-shadow: var(--theme-press);
+  }
+}
+
+@utility sidebar-icon-action-active {
+  @apply bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800;
+  @apply dark:bg-blue-950/45 dark:text-blue-300 dark:hover:bg-blue-900/45 dark:hover:text-blue-200;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-blue-500) 22%, transparent), var(--theme-bevel-top);
+}
+
+@utility sidebar-icon-action-success {
+  @apply bg-green-50 text-green-700 hover:bg-green-100 hover:text-green-800;
+  @apply dark:bg-green-950/35 dark:text-green-300 dark:hover:bg-green-900/45 dark:hover:text-green-200;
+}
+
+@utility sidebar-icon-action-danger {
+  @apply bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-800;
+  @apply dark:bg-red-950/35 dark:text-red-300 dark:hover:bg-red-900/45 dark:hover:text-red-200;
+}
+
 @utility sidebar-section {
   @apply flex flex-col gap-1;
 }
@@ -98,6 +137,7 @@
   display: flex !important;
   @apply min-h-8 items-center gap-2 rounded-lg px-2 py-1.5 text-xs leading-none text-dimmed;
   @apply transition-[background-color,color] duration-150 ease-out hover:text-secondary;
+  @apply focus-ui;
 
   &:hover {
     background: var(--theme-list-hover-bg);
@@ -109,10 +149,17 @@
 }
 
 @utility sidebar-item-active {
-  @apply bg-blue-50 text-blue-700 font-medium;
-  @apply hover:bg-blue-100 hover:text-blue-700;
-  @apply dark:bg-blue-950 dark:text-blue-300;
-  @apply dark:hover:bg-blue-900 dark:hover:text-blue-200;
+  position: relative;
+  background: var(--theme-list-active-bg);
+  @apply text-blue-700 font-medium;
+  @apply hover:text-blue-700;
+  @apply dark:text-blue-300 dark:hover:text-blue-200;
+  box-shadow: var(--theme-shadow-elevated);
+
+  &::before {
+    content: "";
+    @apply pointer-events-none absolute left-1 top-1/2 h-3.5 w-0.5 -translate-y-1/2 rounded-full bg-blue-500 dark:bg-blue-400;
+  }
 }
 
 @utility sidebar-item-meta {
@@ -155,10 +202,17 @@
 
 @utility list-item-active {
   border-left: var(--theme-list-active-border);
-  @apply rounded-lg bg-blue-50 text-blue-700 font-medium;
-  @apply hover:bg-blue-100 hover:text-blue-700;
-  @apply dark:bg-blue-950 dark:text-blue-300;
-  @apply dark:hover:bg-blue-900 dark:hover:text-blue-200;
+  position: relative;
+  background: var(--theme-list-active-bg);
+  @apply rounded-lg text-blue-700 font-medium;
+  @apply hover:text-blue-700;
+  @apply dark:text-blue-300 dark:hover:text-blue-200;
+  box-shadow: var(--theme-shadow-elevated);
+
+  &::before {
+    content: "";
+    @apply pointer-events-none absolute left-1 top-1/2 h-3.5 w-0.5 -translate-y-1/2 rounded-full bg-blue-500 dark:bg-blue-400;
+  }
 }
 
 @utility section-label {
@@ -181,6 +235,7 @@
   border-right: var(--theme-rail-item-active-border-r);
   @apply rounded-lg text-blue-600 dark:text-blue-300;
   @apply bg-blue-50 dark:bg-blue-950;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-blue-500) 22%, transparent), var(--theme-bevel-top);
 }
 
 @utility bottom-bar-item {