rift-ds 1.0.0

package/components/AppSidebar/AppSidebar.css

@@ -0,0 +1,592 @@
+/* ============================================
+   APP SIDEBAR — collapsible navigation
+   Collapsed: 64px icon-only rail
+   Expanded: 280px with labels, accordion, profile
+   ============================================ */
+
+/* ============================================
+   WRAPPER
+   ============================================ */
+.ds-app-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+  width: 64px;
+  padding: var(--padding-500) 0;
+  background-color: var(--color-bg-page-primary);
+  overflow: hidden;
+  transition: width var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar--expanded {
+  width: 280px;
+}
+
+/* ============================================
+   FLOATING VARIANT — the rail as a glass card
+   inset from the viewport edges (the same
+   recipe as the site chat panel)
+   ============================================ */
+.ds-app-sidebar--floating {
+  top: var(--ds-sidebar-float-inset, 20px);
+  left: var(--ds-sidebar-float-inset, 20px);
+  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);
+  /* The glass token is deliberately translucent; this blur is what keeps
+     content behind the rail readable through it. */
+  backdrop-filter: blur(24px);
+}
+
+/* ============================================
+   TOP SECTION — logo + nav
+   ============================================ */
+.ds-app-sidebar__top {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-1000);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ============================================
+   LOGO ROW
+   ============================================ */
+.ds-app-sidebar__logo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+  padding: 0 var(--padding-500);
+  flex-shrink: 0;
+}
+
+/* Expand/collapse choreography, here and on every row below: the rail's
+   clipping width and the text's opacity fade carry the whole transition.
+   Inner layout stays constant - text keeps its natural width with
+   min-width: 0 so it truncates under the sweeping rail instead of holding
+   rows at full width (width: 0 to auto cannot interpolate, and a gap that
+   snaps mid-glide reads as a bounce). */
+.ds-app-sidebar__logo-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-500);
+  min-width: 0;
+}
+
+.ds-app-sidebar__logo-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__logo-text {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__logo-text {
+  opacity: 1;
+}
+
+.ds-app-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  height: 24px;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  padding: 0;
+  overflow: hidden;
+  opacity: 0;
+  /* Both widths are explicit (0 and 24px), so the width glides too. */
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), width var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__toggle {
+  width: 24px;
+  opacity: 1;
+}
+
+.ds-app-sidebar__toggle .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+/* ============================================
+   NAV GROUP
+   ============================================ */
+.ds-app-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  flex-shrink: 0;
+  /* Stretch in both states: rows fill the rail and the collapsed icon is
+     centred by the row's own padding, so alignment never snaps. */
+  align-items: stretch;
+}
+
+/* Category label — only visible when expanded */
+.ds-app-sidebar__category {
+  padding: 0 var(--padding-500);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), height var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__category {
+  opacity: 1;
+  height: 20px;
+}
+
+/* ============================================
+   NAV BUTTON
+   ============================================ */
+.ds-app-sidebar__btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  min-width: 0;
+  /* The same inset in both states: in the collapsed 64px rail the 12px
+     margins leave a 40px row, so the hover pill is a perfect circle clear
+     of the rail edges, with the icon centred (12 + 8 + 24 + 8 + 12 = 64);
+     expanded, these are the pill's edge inset. Nothing to transition. */
+  margin: 0 var(--padding-300);
+  padding: var(--padding-200);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+  /* The row renders as an <a> when the item carries an href. */
+  text-decoration: none;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), padding var(--motion-duration-slow) var(--motion-ease-emphasized), margin var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+/* Inset via margin + reduced padding (12 + 8 = the 20px the label sat at
+   before), so the pill floats off the rail edges while the icon and label
+   keep their exact x-positions against the category labels above. */
+
+.ds-app-sidebar__btn:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__btn--active {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__btn-left {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  min-width: 0;
+}
+
+.ds-app-sidebar__btn-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__btn-label {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-label {
+  opacity: 1;
+}
+
+.ds-app-sidebar__btn-badge {
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-container-tertiary);
+  border-radius: var(--radius-pill);
+  padding: var(--padding-050) var(--padding-200);
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-badge {
+  opacity: 1;
+}
+
+.ds-app-sidebar__btn-chevron {
+  font-size: 24px;
+  color: var(--color-icon-secondary);
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
+  opacity: 0;
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-chevron {
+  opacity: 1;
+}
+
+.ds-app-sidebar__btn-chevron--open {
+  transform: rotate(90deg);
+}
+
+/* ============================================
+   SUB-ITEMS (accordion children)
+   ============================================ */
+.ds-app-sidebar__sub-items {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar__sub-items--open {
+  max-height: 500px;
+}
+
+.ds-app-sidebar__sub-item {
+  display: flex;
+  align-items: flex-start;
+  height: 40px;
+}
+
+.ds-app-sidebar__sub-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 100%;
+  flex-shrink: 0;
+  padding-left: 16px;
+}
+
+.ds-app-sidebar__sub-line::after {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 100%;
+  background-color: var(--color-bg-container-border);
+}
+
+.ds-app-sidebar__sub-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  /* The same edge inset the parent pills get; sub-items only render while
+     the rail is expanded, so this needs no state selector. */
+  margin-right: var(--padding-300);
+  padding: var(--padding-200);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  /* The row renders as an <a> when the sub-item carries an href. */
+  text-decoration: none;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar__sub-btn:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__sub-btn--active {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__sub-label {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+/* ============================================
+   CONSUMER SLOTS + BOTTOM WRAPPER
+   Slots keep their height in both states so the
+   rail's layout never snaps; collapsed they fade
+   out and stop taking clicks.
+   ============================================ */
+.ds-app-sidebar__bottom {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400);
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__top-slot,
+.ds-app-sidebar__footer-slot {
+  padding: 0 var(--padding-400);
+  min-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__top-slot,
+.ds-app-sidebar--expanded .ds-app-sidebar__footer-slot {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ============================================
+   PROFILE
+   ============================================ */
+.ds-app-sidebar__profile {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  /* Centres the 40px avatar in the collapsed 64px rail; glides to the
+     expanded inset below. */
+  padding: 0 var(--padding-300);
+  flex-shrink: 0;
+  transition: padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__profile {
+  padding: 0 var(--padding-500);
+}
+
+.ds-app-sidebar__profile-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+/* The row composes Avatar at `md`, which already carries the 40px footprint,
+   the pill radius, the container fill and the image/initials/glyph ladder —
+   this rule only holds the seat in the row. */
+.ds-app-sidebar__avatar {
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__profile-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__profile-info {
+  opacity: 1;
+}
+
+.ds-app-sidebar__profile-name {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-app-sidebar__profile-email {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-app-sidebar__profile-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  width: 0;
+  overflow: hidden;
+  opacity: 0;
+  /* Both widths are explicit (0 and 24px), so the width glides too. */
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), width var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__profile-more {
+  width: 24px;
+  opacity: 1;
+}
+
+.ds-app-sidebar__profile-more .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+/* ============================================
+   RESPONSIVE — the mobile drawer
+   Below the mobile breakpoint (768px — design.md's Breakpoints section
+   is the authoritative home) the rail leaves the layout entirely and
+   the fixed hamburger trigger opens it as a modal overlay drawer. The
+   trigger and scrim exist only inside this media query, so the overlay
+   behaviors can never activate on wider viewports.
+   ============================================ */
+.ds-app-sidebar__mobile-trigger {
+  display: none;
+}
+
+.ds-app-sidebar__scrim {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .ds-app-sidebar {
+    width: 0;
+    padding: 0;
+    overflow: hidden;
+    /* Zero width still paints borders and the floating variant's glass
+       edge — a hairline sliver standing where the rail was. Visibility
+       hides every painted box in one property, whatever the variant;
+       the open drawer below restores it. */
+    visibility: hidden;
+  }
+
+  .ds-app-sidebar__mobile-trigger {
+    position: fixed;
+    /* One padding step in from the corner, so hosts whose mobile
+       content gutter is 16px get a trigger whose centre lines up with
+       a 40px header row's. */
+    top: var(--padding-400);
+    left: var(--padding-400);
+    z-index: 80;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    background: var(--color-bg-container-primary);
+    border: var(--border-025) solid var(--color-bg-container-border);
+    border-radius: var(--radius-pill);
+    color: var(--color-text-primary);
+    cursor: pointer;
+    box-shadow: var(--shadow-floating);
+  }
+
+  .ds-app-sidebar__scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    background: var(--color-scrim);
+  }
+
+  /* The drawer: the full expanded rail, fixed over the scrim, sliding
+     in from the left on the motion tokens (the reduced-motion guard
+     zeroes the duration system-wide). */
+  .ds-app-sidebar--mobile-open {
+    visibility: visible;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    width: 280px;
+    height: 100dvh;
+    padding: var(--padding-500) 0;
+    overflow-y: auto;
+    background: var(--color-bg-page-primary);
+    border-right: var(--border-025) solid var(--color-bg-container-border);
+    box-shadow: var(--shadow-modal);
+    animation: ds-app-sidebar-slide-in var(--motion-duration-base) var(--motion-ease-standard);
+  }
+}
+
+@keyframes ds-app-sidebar-slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents.
+
+   The two consumer slots are carved out, because inside them the rule
+   does the very damage it exists to prevent: a component mounted in a
+   slot sets its own icon colours through single-class selectors, and a
+   two-class descendant rule outranks every one of them. A SegmentedControl
+   in the footer slot lost its active segment's on-action colour that way
+   and painted a black glyph on a near-black pill. :where() keeps the
+   selector at its original specificity, so nothing else in the cascade
+   moves. */
+.ds-app-sidebar
+  .material-symbols-rounded:not(:where(.ds-app-sidebar__top-slot *, .ds-app-sidebar__footer-slot *)) {
+  color: inherit;
+}

package/components/AppSidebar/AppSidebar.d.ts

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+export interface AppSidebarSubItem {
+    /** Unique key for this sub-item */
+    key: string;
+    /** Display label */
+    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 */
+    href?: string;
+}
+export interface AppSidebarItem {
+    /** Unique key for this item */
+    key: string;
+    /** Item icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon: string | React.ReactNode;
+    /** Display label (shown when expanded) */
+    label: string;
+    /** Click handler — also fires on a link item, so a consumer can route client-side */
+    onClick?: () => void;
+    /** Renders the item as a real link to this URL instead of a button. Ignored when the item has children, whose row is the accordion toggle */
+    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 */
+    children?: AppSidebarSubItem[];
+}
+export interface AppSidebarSection {
+    /** Optional category label above the group */
+    category?: string;
+    /** Nav items in this section */
+    items: AppSidebarItem[];
+}
+export interface AppSidebarProfile {
+    /** User display name */
+    name: string;
+    /** User email */
+    email: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+}
+export interface AppSidebarProps {
+    /** Navigation sections */
+    sections: AppSidebarSection[];
+    /** Profile data for the bottom section */
+    profile?: AppSidebarProfile;
+    /** Key of the currently active item */
+    activeKey?: string;
+    /** Key of the currently active sub-item */
+    activeSubKey?: string;
+    /** Whether sidebar starts expanded */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Callback when expand/collapse changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Callback when profile more button clicked */
+    onProfileMore?: () => void;
+    /**
+     * Floats the rail off the viewport edges as a glass card: inset with
+     * rounded corners, the translucent glass fill over a backdrop blur, and
+     * the floating shadow. The inset defaults to 20px and is overridable via
+     * the --ds-sidebar-float-inset custom property.
+     */
+    floating?: boolean;
+    /** Rendered under the logo row, above the nav; fades out while collapsed */
+    topSlot?: React.ReactNode;
+    /** Rendered above the profile block; fades out while collapsed */
+    footerSlot?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Logo element — defaults to the built-in brand mark */
+    logo?: React.ReactNode;
+    /** Text shown next to logo when expanded */
+    logoText?: string;
+    /**
+     * Below the mobile breakpoint the rail hides and this fixed hamburger
+     * button opens it as an overlay drawer instead. Set false when the
+     * host renders its own trigger in the page chrome.
+     */
+    showMobileTrigger?: boolean;
+}
+/**
+ * AppSidebar — a collapsible left-hand navigation rail.
+ *
+ * **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.
+ */
+export declare const AppSidebar: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, expanded: controlledExpanded, onExpandedChange, onProfileMore, floating, topSlot, footerSlot, className, logo, logoText, showMobileTrigger, }: AppSidebarProps) => React.JSX.Element;