rift-ds 1.0.0 → 1.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Rob Ritacca
+Copyright (c) 2026 Robert Ritacca
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,4 +1,6 @@
-<a href="https://rift-ds.com"><img src=".github/readme-banner.jpg" alt="Rift DS, the AI-ready React design system" width="100%"></a>
+<!-- banner:start -->
+<a href="https://rift-ds.com"><img src="https://raw.githubusercontent.com/robritacca-dotcom/rift-ds/main/.github/readme-banner.jpg" alt="Rift DS, the AI-ready React design system" width="100%"></a>
+<!-- banner:end -->
 
 # Rift DS
 
@@ -71,13 +73,13 @@ import 'rift-ds/tokens/presets/presets.css';
 
 ## Components
 
-<!-- component-count -->133<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
+<!-- component-count -->136<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
 
 <details>
 <summary>The full list</summary>
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Avatar · Avatar group · Badge · Banner · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Tree view · Treemap · Usage card · Waveform · World map
+Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Avatar · Avatar group · Badge · Banner · Bar chart · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · World map
 <!-- component-list:end -->
 
 </details>
@@ -102,6 +104,12 @@ npm run dev --workspace website     # docs site at http://localhost:3000
 npm run verify                      # the full local quality gate, mirroring CI
 ```
 
+## Author
+
+<!-- author:start -->
+Designed and built by [Robert Ritacca](https://robertritacca.com).
+<!-- author:end -->
+
 ## License
 
 MIT, the whole repository: components, tokens, scripts, the website, and the docs. Use it in anything. See [`LICENSE`](LICENSE) for the full terms.

package/components/AppLayout/AppLayout.css

@@ -16,14 +16,24 @@
   flex: 1;
   display: flex;
   justify-content: center;
-  margin-left: 64px;
+  /* The rail's width plus, while it shows, the side panel's. */
+  margin-left: calc(var(--ds-app-layout-rail, 64px) + var(--ds-app-layout-panel, 0px));
   padding: var(--padding-1000) var(--padding-500);
   transition: margin-left var(--motion-duration-slow) var(--motion-ease-emphasized);
   min-width: 0;
 }
 
-.ds-app-layout--expanded .ds-app-layout__main {
-  margin-left: 280px;
+.ds-app-layout--expanded {
+  --ds-app-layout-rail: 280px;
+}
+
+/* Panel mode's collapsed rail is the wider, labelled one. */
+.ds-app-layout:not(.ds-app-layout--expanded):has(.ds-app-sidebar--panel-mode) {
+  --ds-app-layout-rail: 80px;
+}
+
+.ds-app-layout:has(.ds-app-sidebar__panel--visible) {
+  --ds-app-layout-panel: 240px;
 }
 
 /* ============================================

package/components/AppLayout/AppLayout.d.ts

@@ -9,6 +9,10 @@ export interface AppLayoutProps {
     activeKey?: string;
     /** Active sub-item key */
     activeSubKey?: string;
+    /** Active third-level item key, listed in the sidebar's side panel */
+    activeTertiaryKey?: string;
+    /** Where sub-items show: the sidebar's accordion, or straight into its side panel (see AppSidebar) */
+    subNav?: 'accordion' | 'panel';
     /** Whether sidebar starts expanded */
     defaultExpanded?: boolean;
     /** Logo text next to icon */
@@ -30,4 +34,4 @@ export interface AppLayoutProps {
  * AppLayout — full-page template with a collapsible sidebar
  * and a centred content area.
  */
-export declare const AppLayout: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, logoText, logo, children, theme, className, }: AppLayoutProps) => React.JSX.Element;
+export declare const AppLayout: ({ sections, profile, activeKey, activeSubKey, activeTertiaryKey, subNav, defaultExpanded, logoText, logo, children, theme, className, }: AppLayoutProps) => React.JSX.Element;

package/components/AppLayout/AppLayout.js

@@ -8,6 +8,8 @@ const AppLayout = ({
   profile,
   activeKey,
   activeSubKey,
+  activeTertiaryKey,
+  subNav,
   defaultExpanded = true,
   logoText,
   logo,
@@ -33,6 +35,8 @@ const AppLayout = ({
         profile,
         activeKey,
         activeSubKey,
+        activeTertiaryKey,
+        subNav,
         expanded,
         onExpandedChange: handleExpandedChange,
         logoText,

package/components/AppSidebar/AppSidebar.css

@@ -18,7 +18,13 @@
   height: 100vh;
   width: 64px;
   padding: var(--padding-500) 0;
+  /* The vertical padding sits inside the viewport height; content-box
+     sizing ran the rail 40px past the bottom and clipped the profile. */
+  box-sizing: border-box;
   background-color: var(--color-bg-page-primary);
+  /* The logo mark draws in currentColor; without a colour of its own the
+     rail inherited the host's, and the mark vanished on a dark host. */
+  color: var(--color-text-primary);
   overflow: hidden;
   transition: width var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
@@ -358,6 +364,46 @@
   white-space: nowrap;
 }
 
+/* A sub-item with children opens the side panel, and says so with a
+   trailing chevron; a badge sits before it on the same right edge. */
+.ds-app-sidebar__sub-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-app-sidebar__sub-btn .ds-app-sidebar__btn-badge {
+  opacity: 1;
+  flex-shrink: 0;
+}
+
+/* On a filled row the pill steps back to the page ground, or it would
+   share the row's fill and dissolve into it. */
+.ds-app-sidebar__btn--active .ds-app-sidebar__btn-badge,
+.ds-app-sidebar__btn:hover .ds-app-sidebar__btn-badge,
+.ds-app-sidebar__sub-btn--active .ds-app-sidebar__btn-badge,
+.ds-app-sidebar__sub-btn:hover .ds-app-sidebar__btn-badge {
+  background-color: var(--color-bg-page-primary);
+}
+
+.ds-app-sidebar__sub-chevron {
+  --icon-size: var(--icon-size-500);
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar .ds-app-sidebar__sub-chevron {
+  color: var(--color-icon-secondary);
+}
+
+/* The nav sections share one wrapper so the drawer's drill-in can swap
+   them for the panel's level as a unit. */
+.ds-app-sidebar__sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-1000);
+}
+
 /* ============================================
    CONSUMER SLOTS + BOTTOM WRAPPER
    Slots keep their height in both states so the
@@ -484,6 +530,193 @@
   --icon-size: var(--icon-size-600);
 }
 
+/* ============================================
+   SIDE PANEL — the SidebarPanel fixed beside the
+   rail. It tracks the rail's width through the
+   same slow emphasized glide, and slides a step
+   out from under it on open. Hidden, it stays
+   mounted (inert) so the slide can run both ways.
+   ============================================ */
+.ds-app-sidebar__panel {
+  position: fixed;
+  top: 0;
+  left: 64px;
+  /* One step under the rail, so the slide starts from beneath it. */
+  z-index: 99;
+  height: 100vh;
+  border-left: var(--border-025) solid var(--color-bg-container-border);
+  border-right: var(--border-025) solid var(--color-bg-container-border);
+  opacity: 0;
+  transform: translateX(calc(var(--padding-300) * -1));
+  visibility: hidden;
+  pointer-events: none;
+  /* Visibility waits out the fade on the way out, then flips; on the way
+     in it flips first (the --visible rule resets the delay). */
+  transition:
+    left var(--motion-duration-slow) var(--motion-ease-emphasized),
+    opacity var(--motion-duration-base) var(--motion-ease-standard),
+    transform var(--motion-duration-slow) var(--motion-ease-emphasized),
+    visibility 0s linear var(--motion-duration-base);
+}
+
+.ds-app-sidebar__panel--visible {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    left var(--motion-duration-slow) var(--motion-ease-emphasized),
+    opacity var(--motion-duration-base) var(--motion-ease-standard),
+    transform var(--motion-duration-slow) var(--motion-ease-emphasized),
+    visibility 0s linear 0s;
+}
+
+.ds-app-sidebar__panel--panel-mode {
+  left: 80px;
+}
+
+.ds-app-sidebar__panel--beside-expanded {
+  left: 280px;
+}
+
+/* Floating: a second glass card beside the first, one gap along. */
+.ds-app-sidebar__panel--floating {
+  top: var(--ds-sidebar-float-inset, 20px);
+  left: calc(var(--ds-sidebar-float-inset, 20px) + 64px + var(--gap-300));
+  height: calc(100dvh - var(--ds-sidebar-float-inset, 20px) * 2);
+  background-color: var(--color-bg-glass);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  box-shadow: var(--shadow-floating);
+  backdrop-filter: blur(24px);
+}
+
+.ds-app-sidebar__panel--floating.ds-app-sidebar__panel--panel-mode {
+  left: calc(var(--ds-sidebar-float-inset, 20px) + 80px + var(--gap-300));
+}
+
+.ds-app-sidebar__panel--floating.ds-app-sidebar__panel--beside-expanded {
+  left: calc(var(--ds-sidebar-float-inset, 20px) + 280px + var(--gap-300));
+}
+
+/* ============================================
+   PANEL MODE RAIL — labels under icons
+   With the second level in the panel, the
+   collapsed rail is the whole of level 1, so it
+   widens to 80px and names every destination:
+   a pill indicator behind the icon, the label
+   beneath (the navigation-rail pattern).
+   ============================================ */
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) {
+  width: 80px;
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__logo {
+  /* Centres the 24px mark in the 80px rail: (80 - 24) / 2. */
+  padding: 0 calc(var(--padding-500) + var(--padding-200));
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__nav {
+  gap: 0;
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn {
+  height: auto;
+  margin: 0 var(--padding-100);
+  /* Room between the content and the focus ring; the rows' spacing lives
+     here rather than in the nav gap, so the rhythm is unchanged. */
+  padding: var(--padding-100) 0;
+  justify-content: center;
+  border-radius: var(--radius-300);
+  overflow: visible;
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover,
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active {
+  background-color: transparent;
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-left {
+  flex-direction: column;
+  gap: var(--gap-100);
+  width: 100%;
+}
+
+/* The trailing chevron and count pill are faded out on any collapsed
+   rail, but faded still takes width: on this centred column it pushed
+   the icon and label off centre. Here they leave the layout outright. */
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-chevron,
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-badge {
+  display: none;
+}
+
+/* The indicator: a 56 x 32 pill behind the icon carries hover and the
+   selection, so the label stays legible on the page ground. */
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 32px;
+  border-radius: var(--radius-pill);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover .ds-app-sidebar__btn-icon,
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-icon {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-label {
+  opacity: 1;
+  max-width: 100%;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-label {
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__profile {
+  /* Centres the 40px avatar in the 80px rail. */
+  padding: 0 var(--padding-500);
+}
+
+.ds-app-sidebar__btn:focus-visible,
+.ds-app-sidebar__sub-btn:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   DRAWER DRILL-IN — the panel's level as a
+   second screen inside the mobile drawer
+   ============================================ */
+.ds-app-sidebar__drill {
+  width: auto;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  animation: ds-app-sidebar-drill-in var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+@keyframes ds-app-sidebar-drill-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--padding-1000));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* ============================================
    RESPONSIVE — the mobile drawer
    Below the mobile breakpoint (768px — design.md's Breakpoints section
@@ -512,6 +745,10 @@
     visibility: hidden;
   }
 
+  .ds-app-sidebar__panel {
+    display: none;
+  }
+
   .ds-app-sidebar__mobile-trigger {
     position: fixed;
     /* One padding step in from the corner, so hosts whose mobile

package/components/AppSidebar/AppSidebar.d.ts

@@ -6,8 +6,19 @@ export interface AppSidebarSubItem {
     label: string;
     /** Click handler — also fires on a link sub-item, so a consumer can route client-side */
     onClick?: () => void;
-    /** Renders the sub-item as a real link to this URL instead of a button */
+    /** Renders the sub-item as a real link to this URL instead of a button. Ignored when the sub-item has children, whose row opens them */
     href?: string;
+    /** Trailing count pill, e.g. unread items */
+    badge?: string | number;
+    /** Group heading this entry sits under when it is listed in the panel (see `subNav`); ignored in the accordion */
+    group?: string;
+    /**
+     * The next level down. With `subNav="accordion"` a sub-item's children are
+     * level 3 and open in the side panel; with `subNav="panel"` they are the
+     * panel's own accordion. Navigation stops at three levels, so deeper
+     * children are not rendered.
+     */
+    children?: AppSidebarSubItem[];
 }
 export interface AppSidebarItem {
     /** Unique key for this item */
@@ -22,7 +33,7 @@ export interface AppSidebarItem {
     href?: string;
     /** Trailing count pill, e.g. unread items; hidden while the rail is collapsed */
     badge?: string | number;
-    /** Sub-items — turns this into an accordion */
+    /** Sub-items: an accordion under the row, or the side panel's contents when `subNav="panel"` */
     children?: AppSidebarSubItem[];
 }
 export interface AppSidebarSection {
@@ -48,6 +59,23 @@ export interface AppSidebarProps {
     activeKey?: string;
     /** Key of the currently active sub-item */
     activeSubKey?: string;
+    /** Key of the currently active third-level item, listed in the side panel */
+    activeTertiaryKey?: string;
+    /**
+     * Where an item's sub-items show. `accordion` (the default) opens them under
+     * the row, and a sub-item's own children open in a side panel as level 3.
+     * `panel` skips the accordion: a top-level item opens its sub-items straight
+     * into the side panel, with their children as the panel's accordion, and the
+     * collapsed rail shows each label under its icon. On small screens both
+     * modes drill in inside the drawer instead.
+     */
+    subNav?: 'accordion' | 'panel';
+    /** Whether the side panel starts open when there is one to show */
+    defaultPanelOpen?: boolean;
+    /** Controlled open state of the side panel */
+    panelOpen?: boolean;
+    /** Called when the side panel opens or collapses */
+    onPanelOpenChange?: (open: boolean) => void;
     /** Whether sidebar starts expanded */
     defaultExpanded?: boolean;
     /** Controlled expanded state */
@@ -86,5 +114,6 @@ export interface AppSidebarProps {
  * **Collapsed** (64 px): icon-only buttons, logo mark, avatar.
  * **Expanded** (280 px): labels, category headings, accordion
  * sub-items with tree-line connectors, and a profile section.
+ * A third level opens in a `SidebarPanel` beside the rail (see `subNav`).
  */
-export declare const AppSidebar: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, expanded: controlledExpanded, onExpandedChange, onProfileMore, floating, topSlot, footerSlot, className, logo, logoText, showMobileTrigger, }: AppSidebarProps) => React.JSX.Element;
+export declare const AppSidebar: ({ sections, profile, activeKey, activeSubKey, activeTertiaryKey, subNav, defaultPanelOpen, panelOpen: controlledPanelOpen, onPanelOpenChange, defaultExpanded, expanded: controlledExpanded, onExpandedChange, onProfileMore, floating, topSlot, footerSlot, className, logo, logoText, showMobileTrigger, }: AppSidebarProps) => React.JSX.Element;