@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/navigation-menu/NavigationMenuContent.astro

@@ -1,37 +1,37 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  side?: "top" | "bottom";
-  sideOffset?: number;
-}
-
-const {
-  class: className = "",
-  align,
-  alignOffset,
-  side,
-  sideOffset = 6,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="navigation-menu-content"
-  data-align={align}
-  data-align-offset={alignOffset}
-  data-side={side}
-  data-side-offset={sideOffset}
-  hidden
-  class={cn(
-    "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:border-border p-2 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-200 ease data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  align,
+  alignOffset,
+  side,
+  sideOffset = 6,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-content"
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  hidden
+  class={cn(
+    "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:border-border p-2 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-200 ease data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/navigation-menu/NavigationMenuIndicator.astro

@@ -1,24 +1,24 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="navigation-menu-indicator"
-  class={cn(
-    "rounded-md data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in absolute left-0 top-0 z-0 pointer-events-none opacity-0 transition-[translate,width,height,opacity] duration-150 ease data-instant:transition-none data-[state=visible]:opacity-100",
-    "translate-x-(--indicator-left,0px) translate-y-(--indicator-top,0px)",
-    "w-(--indicator-width,0) h-(--indicator-height,0)",
-    className,
-  )}
->
-  <div class="bg-muted/60 ring-border/40 ring-1 absolute inset-0 rounded-[inherit]"></div>
-  <div class="hidden bg-border rounded-tl-sm shadow-md absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-[40%] rotate-45"></div>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-indicator"
+  class={cn(
+    "rounded-md data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in absolute left-0 top-0 z-0 pointer-events-none opacity-0 transition-[translate,width,height,opacity] duration-150 ease data-instant:transition-none data-[state=visible]:opacity-100",
+    "translate-x-(--indicator-left,0px) translate-y-(--indicator-top,0px)",
+    "w-(--indicator-width,0) h-(--indicator-height,0)",
+    className,
+  )}
+>
+  <div class="bg-muted/60 ring-border/40 ring-1 absolute inset-0 rounded-[inherit]"></div>
+  <div class="hidden bg-border rounded-tl-sm shadow-md absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-[40%] rotate-45"></div>
+</div>

package/src/components/navigation-menu/NavigationMenuItem.astro

@@ -1,22 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-  value?: string;
-  align?: "start" | "center" | "end";
-}
-
-const { class: className = "", value, align, ...rest } = Astro.props as Props;
----
-
-<li
-  {...rest}
-  data-slot="navigation-menu-item"
-  data-value={value}
-  data-align={align}
-  class={cn("relative z-10", className)}
->
-  <slot />
-</li>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+  value?: string;
+  align?: "start" | "center" | "end";
+}
+
+const { class: className = "", value, align, ...rest } = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  data-slot="navigation-menu-item"
+  data-value={value}
+  data-align={align}
+  class={cn("relative z-10", className)}
+>
+  <slot />
+</li>

package/src/components/navigation-menu/NavigationMenuLink.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"a"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<a
-  {...rest}
-  data-slot="navigation-menu-link"
-  class={cn("data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-start gap-4 rounded-lg p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className)}
->
-  <slot />
-</a>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"a"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<a
+  {...rest}
+  data-slot="navigation-menu-link"
+  class={cn("data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-start gap-4 rounded-lg p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className)}
+>
+  <slot />
+</a>

package/src/components/navigation-menu/NavigationMenuList.astro

@@ -1,21 +1,21 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"ul"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<ul
-  {...rest}
-  data-slot="navigation-menu-list"
-  class={cn(
-    "gap-0 group flex flex-1 list-none items-center justify-center relative",
-    className,
-  )}
->
-  <slot />
-</ul>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"ul"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<ul
+  {...rest}
+  data-slot="navigation-menu-list"
+  class={cn(
+    "gap-0 group flex flex-1 list-none items-center justify-center relative",
+    className,
+  )}
+>
+  <slot />
+</ul>

package/src/components/navigation-menu/NavigationMenuPositioner.astro

@@ -1,44 +1,44 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import NavigationMenuViewport from "./NavigationMenuViewport.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  side?: "top" | "bottom";
-  sideOffset?: number;
-}
-
-const {
-  class: className = "",
-  side = "bottom",
-  sideOffset = 8,
-  align = "start",
-  alignOffset = 0,
-  ...rest
-} = Astro.props as Props;
----
-
-<div data-slot="navigation-menu-portal">
-  <div
-    {...rest}
-    data-slot="navigation-menu-positioner"
-    data-side={side}
-    data-side-offset={sideOffset}
-    data-align={align}
-    data-align-offset={alignOffset}
-    class={cn(
-      "transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) duration-[0.35s] data-instant:transition-none",
-      className,
-    )}
-  >
-    <div
-      data-slot="navigation-menu-popup"
-      class="bg-popover text-popover-foreground border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s]"
-    >
-      <NavigationMenuViewport />
-    </div>
-  </div>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import NavigationMenuViewport from "./NavigationMenuViewport.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="navigation-menu-portal">
+  <div
+    {...rest}
+    data-slot="navigation-menu-positioner"
+    data-side={side}
+    data-side-offset={sideOffset}
+    data-align={align}
+    data-align-offset={alignOffset}
+    class={cn(
+      "transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) duration-[0.35s] data-instant:transition-none",
+      className,
+    )}
+  >
+    <div
+      data-slot="navigation-menu-popup"
+      class="bg-popover text-popover-foreground border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s]"
+    >
+      <NavigationMenuViewport />
+    </div>
+  </div>
+</div>

package/src/components/navigation-menu/NavigationMenuTrigger.astro

@@ -1,30 +1,30 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-}
-
-export const navigationMenuTriggerStyle = cva(
-  "bg-background text-foreground hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg gap-1.5 px-4 py-2.5 text-base font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-11 w-max items-center justify-center outline-none disabled:pointer-events-none",
-);
-
-const {
-  class: className = "",
-  type = "button",
-  ...rest
-} = Astro.props as Props;
----
-
-<button
-  {...rest}
-  data-slot="navigation-menu-trigger"
-  type={type}
-  class={cn(navigationMenuTriggerStyle(), "group", className)}
->
-  <slot />
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="relative top-px size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-    aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
-</button>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+}
+
+export const navigationMenuTriggerStyle = cva(
+  "bg-background text-foreground hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg gap-1.5 px-4 py-2.5 text-base font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-11 w-max items-center justify-center outline-none disabled:pointer-events-none",
+);
+
+const {
+  class: className = "",
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  data-slot="navigation-menu-trigger"
+  type={type}
+  class={cn(navigationMenuTriggerStyle(), "group", className)}
+>
+  <slot />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="relative top-px size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+    aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+</button>

package/src/components/navigation-menu/NavigationMenuViewport.astro

@@ -1,19 +1,19 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="navigation-menu-viewport"
-  class={cn(
-    "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] duration-100 relative size-full overflow-hidden",
-    className,
-  )}
-></div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-viewport"
+  class={cn(
+    "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] duration-100 relative size-full overflow-hidden",
+    className,
+  )}
+></div>

package/src/components/navigation-menu/index.ts

@@ -1,10 +1,10 @@
-export { default as NavigationMenu } from "./NavigationMenu.astro";
-export { default as NavigationMenuList } from "./NavigationMenuList.astro";
-export { default as NavigationMenuItem } from "./NavigationMenuItem.astro";
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.astro";
-export { default as NavigationMenuContent } from "./NavigationMenuContent.astro";
-export { default as NavigationMenuPositioner } from "./NavigationMenuPositioner.astro";
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.astro";
-export { default as NavigationMenuLink } from "./NavigationMenuLink.astro";
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.astro";
-export { navigationMenuTriggerStyle } from "./NavigationMenuTrigger.astro";
+export { default as NavigationMenu } from "./NavigationMenu.astro";
+export { default as NavigationMenuList } from "./NavigationMenuList.astro";
+export { default as NavigationMenuItem } from "./NavigationMenuItem.astro";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.astro";
+export { default as NavigationMenuContent } from "./NavigationMenuContent.astro";
+export { default as NavigationMenuPositioner } from "./NavigationMenuPositioner.astro";
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.astro";
+export { default as NavigationMenuLink } from "./NavigationMenuLink.astro";
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.astro";
+export { navigationMenuTriggerStyle } from "./NavigationMenuTrigger.astro";

package/src/components/organisms/lightning-sidebar-nav/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to the `LightningSidebarNav` organism will be documented in this file.
+
+## Unreleased
+
+### Added
+
+- New **Organisms** tier (`packages/ui/src/components/organisms/`). `LightningSidebarNav` is the first organism, composed from existing components: Avatar, DropdownMenu, Collapsible, Badge, Separator, Skeleton and Button.
+- `LightningSidebarNav`: renders the whole sidebar from JSON-serialisable backend data (`workspace`, `workspaces`, `sections`, `footerItems`, `usage`, `upgrade`, `loading`).
+  - The active item is resolved from `activeId`, or the longest segment-prefix match of `currentPath` (defaults to `Astro.url.pathname`). It gets `aria-current="page"`.
+  - Groups containing the active link open automatically.
+- Composable parts for custom layouts:
+  - `SidebarNav`: the shell
+  - `SidebarNavWorkspaceSwitcher`
+  - `SidebarNavSection`: `density` is `default` or `compact`, with an optional category `label`
+  - `SidebarNavItem`
+  - `SidebarNavGroup`
+  - `SidebarNavSubItem`
+  - `SidebarNavUsage`
+  - `SidebarNavSkeleton`
+  - `SidebarNavProBadge`
+  - `SidebarNavWorkspaceAvatar`
+- `icons.ts`: a string → Lucide registry so backend data can name icons (`"house"`, `"video"`, …).
+- `sidebar-nav:workspace-change` event (`{ id }`, bubbles, cancelable). Fired when a workspace is picked. If the workspace has an `href` and the event isn't cancelled, the browser navigates there.
+
+### Figma alignment (node 7513:60)
+
+- **Group Item:**
+  - Default: `muted-foreground`, medium weight.
+  - Hover: `bg-muted`, foreground, semibold.
+  - Focus: 1px `sidebar-ring` inset ring.
+  - Active: `sidebar-accent` fill plus semibold `sidebar-accent-foreground`. Active is never shown by colour alone.
+- **.nav item:** 12px medium label against a 1px guide rail at 7.5px. When active, a darker 28px rail segment is drawn over it and the label uses `sidebar-accent-foreground`.
+- **Pro badge:** `Badge variant="accent" size="sm"` with a Lucide `zap` tail icon.
+- **Skeleton:** the workspace switcher stays real. Rows are a 16px square plus an 80px bar.
+- **Spacing:** primary list rows are 12px apart and footer links 2px apart. Separators take 16px of vertical space.
+
+### Tokens (`globals.css`)
+
+- Mapped the previously unused `--sidebar*` variables in `@theme inline`, which gives utilities like `bg-sidebar` and `text-sidebar-accent-foreground`.
+- Aligned the light values to Figma:
+  - `--sidebar`: zinc-50
+  - `--sidebar-accent`: primary-50
+  - `--sidebar-accent-foreground`: primary-950
+  - `--sidebar-border`: `--border`
+  - `--sidebar-ring`: `--ring`
+- Dark mode uses a primary-tinted accent.
+- Added `--sidebar-rail` (zinc-300 light / 15% white dark) for the sub-item guide line.
+- The shared `--accent` token is unchanged.