@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223

package/src/components/chat/utils/process-historical-messages.ts

@@ -27,6 +27,12 @@ function getOwnerDisplayName(owner?: MessageOwner): string {
   return owner?.type === OWNER_TYPE.ADMIN ? 'Admin' : 'You'
 }
 
+/** Per-message author avatar (e.g. an admin's profile photo) when the owner
+ *  carries one. `imageUrl` may be relative; the host resolves it downstream. */
+function getOwnerAvatar(owner?: MessageOwner): string | undefined {
+  return owner?.user?.image?.imageUrl ?? undefined
+}
+
 function pushStandaloneMessages(
   processedMessages: ProcessedMessage[],
   msg: HistoricalMessage,
@@ -143,6 +149,7 @@ export function processHistoricalMessages(
             role: 'user',
             content: data.text,
             name: getOwnerDisplayName(msg.owner),
+            avatar: getOwnerAvatar(msg.owner),
             authorType: userAuthorType,
             timestamp: new Date(msg.createdAt),
           })
@@ -517,6 +524,7 @@ export function processHistoricalMessagesWithErrors(
             role: 'user',
             content: data.text,
             name: getOwnerDisplayName(msg.owner),
+            avatar: getOwnerAvatar(msg.owner),
             authorType: userAuthorType,
             timestamp: new Date(msg.createdAt),
           })

package/src/components/content-loading-container.tsx

@@ -83,7 +83,7 @@ export function ContentLoadingContainer({
       {/* Loading Skeleton Overlay */}
       {isLoading && (
         <div 
-          className="absolute inset-0 z-10 bg-[#161616]"
+          className="absolute inset-0 z-10 bg-ods-bg"
           style={{ 
             opacity: loadingOpacity,
             transition: `opacity ${transitionDuration}ms ease-in-out`

package/src/components/empty-state.tsx

@@ -177,9 +177,9 @@ export function EmptyState({
         <div className="w-full max-w-xs mb-3">
           <Button
             onClick={smartCTA.action}
-            className={ctaVariant === 'primary' 
-              ? "w-full bg-[#FFC008] text-black hover:bg-[#FFC008]/90 transition-all duration-150 font-['DM_Sans'] font-medium"
-              : "w-full bg-transparent border border-ods-border text-ods-text-primary hover:border-[#FFC008] hover:text-ods-accent transition-all duration-150 font-['DM_Sans'] font-medium"
+            className={ctaVariant === 'primary'
+              ? "w-full bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover transition-all duration-150 font-['DM_Sans'] font-medium"
+              : "w-full bg-transparent border border-ods-border text-ods-text-primary hover:border-ods-accent hover:text-ods-accent transition-all duration-150 font-['DM_Sans'] font-medium"
             }
           >
             {smartCTA.text}

package/src/components/faq-accordion.tsx

@@ -52,7 +52,7 @@ export function FaqAccordion({ items, defaultOpenIds = [] }: FaqAccordionProps)
   }
 
   return (
-    <div className="rounded-3xl border border-ods-border divide-y divide-[#3A3A3A] bg-ods-card overflow-hidden">
+    <div className="rounded-3xl border border-ods-border divide-y divide-ods-border bg-ods-card overflow-hidden">
       {items.map(item => {
         const isOpen = openSet.has(item.id)
         const { ref, maxHeight } = useMeasuredHeight(isOpen)
@@ -60,7 +60,7 @@ export function FaqAccordion({ items, defaultOpenIds = [] }: FaqAccordionProps)
         return (
           <div
             key={item.id}
-            className={cn('group transition-colors hover:bg-[#1E1E1E]', isOpen ? 'bg-[#161616]' : 'bg-transparent')}
+            className={cn('group transition-colors hover:bg-[#1E1E1E]', isOpen ? 'bg-ods-bg' : 'bg-transparent')}
           >
             {/* Header */}
             <div

package/src/components/features/changelog-manager.tsx

@@ -177,7 +177,7 @@ export function ChangelogManager({
                     value={entry.title}
                     onChange={(e) => updateEntry(index, 'title', e.target.value)}
                     onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
-                    className="bg-[#161616]"
+                    className="bg-ods-bg"
                   />
                 </div>
 
@@ -189,7 +189,7 @@ export function ChangelogManager({
                     value={entry.description || ''}
                     onChange={(e) => updateEntry(index, 'description', e.target.value)}
                     rows={2}
-                    className="bg-[#161616]"
+                    className="bg-ods-bg"
                   />
                 </div>
               </div>

package/src/components/features/highlight-config-section.tsx

@@ -43,7 +43,7 @@ export function HighlightConfigSection({
             onValueChange={(value) => onTargetDurationChange(parseInt(value))}
             disabled={disabled}
           >
-            <SelectTrigger className="bg-[#161616] mt-1">
+            <SelectTrigger className="bg-ods-bg mt-1">
               <SelectValue />
             </SelectTrigger>
             <SelectContent className="bg-ods-card">
@@ -62,7 +62,7 @@ export function HighlightConfigSection({
             checked={skipSubtitleBurning}
             onChange={(e) => onSkipSubtitleBurningChange(e.target.checked)}
             disabled={disabled}
-            className="h-4 w-4 rounded border-ods-border bg-[#161616] text-ods-accent focus:ring-ods-accent"
+            className="h-4 w-4 rounded border-ods-border bg-ods-bg text-ods-accent focus:ring-ods-accent"
           />
           <Label htmlFor="skipSubtitleBurning" className="text-sm cursor-pointer">
             Skip subtitle burning

package/src/components/features/og-editor-preview.tsx

@@ -65,7 +65,7 @@ export function OGEditorPreview({
             onChange={(e) => onSeoTitleChange(e.target.value)}
             disabled={disabled}
             placeholder="Enter SEO meta title..."
-            className="bg-[#161616] border-ods-border text-ods-text-primary"
+            className="bg-ods-bg border-ods-border text-ods-text-primary"
           />
         </div>
 
@@ -78,7 +78,7 @@ export function OGEditorPreview({
             onChange={(e) => onSeoKeywordsChange(e.target.value)}
             disabled={disabled}
             placeholder="Enter SEO keywords..."
-            className="bg-[#161616] border-ods-border text-ods-text-primary"
+            className="bg-ods-bg border-ods-border text-ods-text-primary"
           />
         </div>
       </div>
@@ -94,7 +94,7 @@ export function OGEditorPreview({
             onChange={(e) => onSeoDescriptionChange(e.target.value)}
             disabled={disabled}
             placeholder="Enter SEO meta description..."
-            className="bg-[#161616] border-ods-border text-ods-text-primary flex-1 resize-none"
+            className="bg-ods-bg border-ods-border text-ods-text-primary flex-1 resize-none"
             rows={6}
           />
         </div>

package/src/components/features/release-media-manager.tsx

@@ -241,7 +241,7 @@ export function ReleaseMediaManager({
                       onValueChange={(value: any) => updateMedia(index, 'media_type', value)}
                       disabled={item._uploading}
                     >
-                      <SelectTrigger className="bg-[#161616] h-8 text-xs">
+                      <SelectTrigger className="bg-ods-bg h-8 text-xs">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent className="bg-ods-card">
@@ -258,7 +258,7 @@ export function ReleaseMediaManager({
                     value={item.title}
                     onChange={(e) => updateMedia(index, 'title', e.target.value)}
                     onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
-                    className="bg-[#161616] h-8 text-xs"
+                    className="bg-ods-bg h-8 text-xs"
                     disabled={item._uploading}
                   />
                 </div>

package/src/components/loading/card-skeleton.tsx

@@ -72,7 +72,7 @@ function VendorCardContent({ showActions, showMetadata }: { showActions: boolean
       {/* Header Section - Row layout matching actual VendorCard */}
       <div className="flex items-start gap-3 w-full">
         {/* Logo Frame - 60px width fixed, matching actual structure */}
-        <div className="w-[60px] h-[60px] bg-[#161616] border border-ods-border rounded-lg p-2 flex items-center justify-center flex-shrink-0">
+        <div className="w-[60px] h-[60px] bg-ods-bg border border-ods-border rounded-lg p-2 flex items-center justify-center flex-shrink-0">
           <MediaSkeleton.Avatar size="sm" className="w-11 h-11" />
         </div>
         
@@ -112,7 +112,7 @@ function VendorCardContent({ showActions, showMetadata }: { showActions: boolean
 
         {/* Tag Section - Contained within card boundaries */}
         <div className="flex-shrink-0">
-          <div className="flex items-center gap-1.5 bg-[#161616] border border-ods-border rounded px-2.5 py-1.5">
+          <div className="flex items-center gap-1.5 bg-ods-bg border border-ods-border rounded px-2.5 py-1.5">
             <div className="w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0">
               <MediaSkeleton.Icon size="sm" className="w-2.5 h-2.5" />
             </div>
@@ -131,7 +131,7 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
   return (
     <>
       {/* Image Section — OG 1200×630 aspect (matches blog-card.tsx loaded state) */}
-      <div className="blog-card-image-container relative w-full aspect-[1200/630] overflow-hidden bg-[#161616]">
+      <div className="blog-card-image-container relative w-full aspect-[1200/630] overflow-hidden bg-ods-bg">
         <MediaSkeleton.CardImage />
       </div>
       

package/src/components/loading/device-card-skeleton.tsx

@@ -32,7 +32,7 @@ export function DeviceCardSkeleton({ className }: DeviceCardSkeletonProps) {
       {/* Row 1: Device icon + Device name + More button */}
       <div className="flex gap-4 items-center px-4 py-3">
         {/* Device type icon (8x8 container) */}
-        <div className="w-8 h-8 bg-[#161616] border border-ods-border rounded-[6px] flex items-center justify-center flex-shrink-0">
+        <div className="w-8 h-8 bg-ods-bg border border-ods-border rounded-[6px] flex items-center justify-center flex-shrink-0">
           <div className="w-4 h-4 bg-ods-border rounded animate-pulse" />
         </div>
 

package/src/components/loading/margin-report-skeleton.tsx

@@ -11,7 +11,7 @@ interface MarginReportSkeletonProps {
 
 export function MarginReportSkeleton({ animate = true, description, overlayContent }: MarginReportSkeletonProps) {
   return (
-    <main className={`bg-[#161616] ${animate ? 'animate-pulse' : ''} relative min-h-screen`}>
+    <main className={`bg-ods-bg ${animate ? 'animate-pulse' : ''} relative min-h-screen`}>
       <div className="max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto space-y-10">
         {/* Header */}
         <div className="space-y-3">
@@ -69,7 +69,7 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
               {/* vendor rows */}
               <div className="flex-1 flex flex-col gap-3 p-3">
                 {Array.from({ length: 5 }).map((_, j) => (
-                  <div key={j} className="bg-[#161616] border border-ods-border rounded-lg px-4 py-3 flex items-center justify-between">
+                  <div key={j} className="bg-ods-bg border border-ods-border rounded-lg px-4 py-3 flex items-center justify-between">
                     {/* left section: icon + text */}
                     <div className="flex items-center gap-3 min-w-0">
                       <div className="w-12 h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0" />

package/src/components/loading/organization-card-skeleton.tsx

@@ -101,7 +101,7 @@ export function OrganizationCardSkeleton({
 
             {/* Tag/Badge Section */}
             <div className="flex-shrink-0">
-              <div className="flex items-center gap-1.5 bg-[#161616] border border-ods-border rounded px-2.5 py-1.5">
+              <div className="flex items-center gap-1.5 bg-ods-bg border border-ods-border rounded px-2.5 py-1.5">
                 <div className="w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0">
                   <MediaSkeleton.Icon size="sm" className="w-2.5 h-2.5" />
                 </div>

package/src/components/loading/organization-icon-skeleton.tsx

@@ -45,7 +45,7 @@ const sizeClasses = {
  * Background style classes matching VendorIcon/OrganizationIcon exactly
  */
 const backgroundClasses = {
-  dark: 'bg-[#161616] border border-ods-border',
+  dark: 'bg-ods-bg border border-ods-border',
   light: 'bg-ods-card border border-ods-border',
   white: 'bg-white border border-[#E5E5E5]'
 }

package/src/components/loading/page-layout-skeleton.tsx

@@ -308,7 +308,7 @@ export function ArticleLayoutSkeleton({ className }: PageLayoutSkeletonProps) {
  */
 export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProps) {
   return (
-    <main className={cn("bg-[#161616] min-h-screen", className)}>
+    <main className={cn("bg-ods-bg min-h-screen", className)}>
       <div className="max-w-[1920px] mx-auto px-6 md:px-20 py-6 md:py-10">
         {/* Breadcrumb */}
         <BreadcrumbSkeleton className="mb-6" />
@@ -457,7 +457,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                   <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-16"></div>
                   {Array.from({ length: 3 }).map((_, i) => (
                     <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-4 flex gap-3">
-                      <div className="w-12 h-12 bg-[#161616] border border-ods-border rounded flex-shrink-0 animate-pulse"></div>
+                      <div className="w-12 h-12 bg-ods-bg border border-ods-border rounded flex-shrink-0 animate-pulse"></div>
                       <div className="flex-1 space-y-2">
                         <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-2/3"></div>
                         <div className="h-4 bg-[#2A2A2A] rounded animate-pulse"></div>
@@ -470,7 +470,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                   <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-16"></div>
                   {Array.from({ length: 3 }).map((_, i) => (
                     <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-4 flex gap-3">
-                      <div className="w-12 h-12 bg-[#161616] border border-ods-border rounded flex-shrink-0 animate-pulse"></div>
+                      <div className="w-12 h-12 bg-ods-bg border border-ods-border rounded flex-shrink-0 animate-pulse"></div>
                       <div className="flex-1 space-y-2">
                         <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-2/3"></div>
                         <div className="h-4 bg-[#2A2A2A] rounded animate-pulse"></div>
@@ -489,7 +489,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                   <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-6 space-y-4">
                     {/* Header */}
                     <div className="flex items-start gap-4">
-                      <div className="w-16 h-16 bg-[#161616] border border-ods-border rounded-lg animate-pulse flex-shrink-0"></div>
+                      <div className="w-16 h-16 bg-ods-bg border border-ods-border rounded-lg animate-pulse flex-shrink-0"></div>
                       <div className="flex-1 space-y-2">
                         <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-3/4"></div>
                         <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-1/2"></div>
@@ -523,7 +523,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
               {/* Comment Form Skeleton */}
               <div className="space-y-3">
                 <div className="flex gap-3">
-                  <div className="flex-1 bg-[#161616] border border-ods-border rounded-lg overflow-hidden">
+                  <div className="flex-1 bg-ods-bg border border-ods-border rounded-lg overflow-hidden">
                     {/* Title Section */}
                     <div className="border-b border-ods-border p-3">
                       <div className="h-3 bg-[#2A2A2A] rounded animate-pulse w-8 mb-2"></div>
@@ -702,7 +702,7 @@ export function VendorGridSkeleton({ className }: PageLayoutSkeletonProps) {
 export function SlackCommunitySkeleton() {
   return (
     <section 
-      className="w-full bg-[#161616] px-4 md:px-20 lg:px-20 py-12 md:py-20"
+      className="w-full bg-ods-bg px-4 md:px-20 lg:px-20 py-12 md:py-20"
       aria-label="Slack Community Loading"
     >
       {/* Frame 651 Container */}
@@ -717,7 +717,7 @@ export function SlackCommunitySkeleton() {
         <div className="w-full flex flex-col lg:flex-row lg:justify-end lg:items-start gap-4 md:gap-6 min-w-0">
           
           {/* Channel List Skeleton */}
-          <div className="w-full lg:w-[290px] lg:max-w-[290px] bg-[#161616] border border-ods-border rounded flex flex-col flex-shrink-0 overflow-hidden animate-pulse">
+          <div className="w-full lg:w-[290px] lg:max-w-[290px] bg-ods-bg border border-ods-border rounded flex flex-col flex-shrink-0 overflow-hidden animate-pulse">
             <div className="p-4 space-y-4">
               {/* Header */}
               <div className="flex flex-col gap-2">
@@ -762,7 +762,7 @@ export function SlackCommunitySkeleton() {
           <div className="flex-1 min-h-[450px] h-[450px] md:min-h-[500px] md:h-[500px] lg:min-h-[600px] lg:h-[600px] bg-ods-card border border-ods-border rounded-lg flex flex-col min-w-0 animate-pulse">
             
             {/* Header */}
-            <div className="flex items-center justify-between p-4 md:p-6 border-b border-ods-border bg-[#161616] h-[56px] md:h-[60px] flex-shrink-0">
+            <div className="flex items-center justify-between p-4 md:p-6 border-b border-ods-border bg-ods-bg h-[56px] md:h-[60px] flex-shrink-0">
               <div className="flex items-center gap-2">
                 <div className="h-3 md:h-4 bg-[#2A2A2A] rounded w-3 md:w-4"></div>
                 <div className="h-3 md:h-4 bg-[#2A2A2A] rounded w-24 md:w-32"></div>
@@ -771,7 +771,7 @@ export function SlackCommunitySkeleton() {
             </div>
 
             {/* Messages */}
-            <div className="flex-1 bg-[#161616] p-4 md:p-6 space-y-3 md:space-y-4 overflow-hidden min-h-[280px] md:min-h-[320px] lg:min-h-[420px]">
+            <div className="flex-1 bg-ods-bg p-4 md:p-6 space-y-3 md:space-y-4 overflow-hidden min-h-[280px] md:min-h-[320px] lg:min-h-[420px]">
               {Array.from({ length: 6 }).map((_, i) => (
                 <div key={i} className="flex gap-2 md:gap-3">
                   <div className="w-10 h-10 md:w-12 md:h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0"></div>

package/src/components/loading/users-grid-skeleton.tsx

@@ -9,7 +9,7 @@ export function UsersGridSkeleton({ rows = 10, className }: Props) {
   const skeletonRows = Array.from({ length: rows })
   return (
     <div className={cn('overflow-x-auto rounded-lg border border-ods-border bg-ods-card animate-pulse', className)}>
-      <table className="min-w-full divide-y divide-[#3A3A3A]">
+      <table className="min-w-full divide-y divide-ods-border">
         <thead className="bg-[#2A2A2A]">
           <tr>
             {['Name', 'Email', 'Role', 'Created', 'Last Sign-In'].map((h) => (
@@ -17,7 +17,7 @@ export function UsersGridSkeleton({ rows = 10, className }: Props) {
             ))}
           </tr>
         </thead>
-        <tbody className="divide-y divide-[#3A3A3A]">
+        <tbody className="divide-y divide-ods-border">
           {skeletonRows.map((_, idx) => (
             <tr key={idx}>
               {Array.from({ length: 5 }).map((__, cell) => (

package/src/components/logs-list.tsx

@@ -46,7 +46,7 @@ const LogCard: React.FC<{
             {log.title}
           </p>
           <div className="flex items-center gap-2">
-            <p className="font-['Azeret_Mono'] font-normal text-[13px] leading-4 text-[#888888] uppercase tracking-wider">
+            <p className="font-['Azeret_Mono'] font-normal text-[13px] leading-4 text-ods-text-secondary uppercase tracking-wider">
               {formatTimestamp(log.timestamp)}
             </p>
             {log.toolType && (

package/src/components/media-carousel.tsx

@@ -250,7 +250,7 @@ export const MediaCarousel = memo(function MediaCarousel({
       <div 
         ref={carouselRef}
         className={cn(
-          "relative bg-[#161616] border border-ods-border rounded-2xl overflow-hidden group w-full",
+          "relative bg-ods-bg border border-ods-border rounded-2xl overflow-hidden group w-full",
           getAspectRatioClass()
         )}
         onTouchStart={onTouchStart}

package/src/components/navigation/app-layout-drawer.tsx

@@ -151,6 +151,24 @@ const appLayoutDrawerPanelVariants = cva(
 
 const HORIZONTAL_SIDES: ReadonlySet<DrawerSide> = new Set(["left", "right"])
 
+/**
+ * Persist mode (`forceMount`) keeps the panel mounted across close, so the
+ * `slide-out-*` / `fade-out` exit animations run and then — because
+ * `tailwindcss-animate`'s `.animate-out` does NOT set `animation-fill-mode:
+ * forwards` — the panel/overlay snap back to their resting frame (on-screen,
+ * opacity 1). The element ends up fully visible again, which reads as "the
+ * drawer won't close" (and dims the whole content area via the backdrop).
+ *
+ * Pinning `fill-mode: forwards` for the closed state holds the exit animation's
+ * final frame (off-screen / transparent) after it ends. It can't be replaced by
+ * a static resting transform/opacity: that would override the animation's
+ * `from` value (= current computed style) and collapse the animation to a no-op.
+ *
+ * Not applied without persist — Radix unmounts `Content` after the animation,
+ * so there's nothing to snap back.
+ */
+const PERSIST_CLOSED_HOLD = "data-[state=closed]:fill-mode-forwards"
+
 function clamp(value: number, min: number, max: number): number {
   if (max < min) return min
   return Math.min(max, Math.max(min, value))
@@ -321,12 +339,12 @@ function AppLayoutDrawerResizeHandle({
 
   const trackPosition =
     side === "right"
-      ? "right-full top-4 bottom-4 w-3 items-center justify-end pr-1"
+      ? "right-full top-4 bottom-4 w-12 items-center justify-end pr-1"
       : side === "left"
-        ? "left-full top-4 bottom-4 w-3 items-center justify-start pl-1"
+        ? "left-full top-4 bottom-4 w-12 items-center justify-start pl-1"
         : side === "bottom"
-          ? "bottom-full left-4 right-4 h-3 justify-center items-end pb-1"
-          : "top-full left-4 right-4 h-3 justify-center items-start pt-1"
+          ? "bottom-full left-4 right-4 h-12 justify-center items-end pb-1"
+          : "top-full left-4 right-4 h-12 justify-center items-start pt-1"
 
   const cursorClass = isHorizontal ? "cursor-col-resize" : "cursor-row-resize"
   const gripClass = isHorizontal ? "h-10 w-1" : "w-10 h-1"
@@ -388,6 +406,13 @@ export interface AppLayoutDrawerContentProps
   /** Override the portal container. Defaults to AppLayout's main-area container
    *  (from context). Pass `null` to opt out of portaling. */
   container?: HTMLElement | null
+  /** Keep the panel mounted across close so its subtree state survives an
+   *  open → close → open cycle (no remount, no refetch, no flicker). Lazy:
+   *  nothing renders until the first open; after that the panel stays mounted
+   *  (Radix `forceMount`) and the slide animation runs off `data-state`.
+   *  Default `false` — preserves the standard unmount-on-close behaviour for
+   *  every other consumer. */
+  keepMounted?: boolean
   /** When `true` (default), clicks on the dim overlay over the main content
    *  area close the drawer. Clicks on AppLayout chrome (header, sidebar) NEVER
    *  close the drawer regardless of this flag — chrome interactions shouldn't
@@ -430,6 +455,7 @@ const AppLayoutDrawerContent = React.forwardRef<
       dismissOnInteractOutside = true,
       onInteractOutside,
       debugLayoutShift = false,
+      keepMounted = false,
       children,
       ...props
     },
@@ -439,6 +465,20 @@ const AppLayoutDrawerContent = React.forwardRef<
     const portalContainer = container !== undefined ? container : contextContainer
     const open = React.useContext(DrawerOpenContext)
 
+    // Persist mode: lazily mount on the first open, then never unmount. Radix
+    // unmounts `Dialog.Content` on close by default, which would wipe the
+    // panel's subtree state (and trigger a full refetch) on every reopen.
+    // `forceMount` keeps it mounted; `hasOpened` defers that until the user
+    // opens the panel at least once (no work, no exit-animation flash before
+    // first open).
+    // Seed from `open` so an initially-open (defaultOpen / controlled open=true)
+    // drawer mounts on the first paint instead of flashing `null` for one frame.
+    const [hasOpened, setHasOpened] = React.useState<boolean>(Boolean(open))
+    React.useEffect(() => {
+      if (open) setHasOpened(true)
+    }, [open])
+    const persist = keepMounted && hasOpened
+
     // Diagnostic: walk ancestors and snapshot horizontal-scroll metrics
     // around the open transition. See `debugLayoutShift` prop doc.
     React.useEffect(() => {
@@ -533,8 +573,12 @@ const AppLayoutDrawerContent = React.forwardRef<
         : { height: size }
       : {}
 
+    // Persist mode, pre-first-open: render nothing so the panel mounts lazily.
+    // (All hooks above run unconditionally — this early return is hooks-safe.)
+    if (keepMounted && !hasOpened) return null
+
     return (
-      <DialogPrimitive.Portal container={portalContainer}>
+      <DialogPrimitive.Portal container={portalContainer} forceMount={persist || undefined}>
         {/* Overlay rendered manually: Radix's DialogPrimitive.Overlay returns
             null in non-modal mode, so we render a plain div here. Setting
             `pointer-events-auto` ensures it catches clicks on the main area
@@ -546,17 +590,32 @@ const AppLayoutDrawerContent = React.forwardRef<
           data-state={open ? "open" : "closed"}
           className={cn(
             "absolute inset-0 z-[40] bg-[color-mix(in_srgb,var(--ods-system-greys-background)_50%,transparent)] outline-none data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            // Persist mode only: hold the fade-out's final (transparent) frame
+            // so the backdrop doesn't snap back to opacity 1 and dim the whole
+            // content area while the drawer is "closed" (see PERSIST_CLOSED_HOLD).
+            persist && PERSIST_CLOSED_HOLD,
             overlayClassName,
           )}
         />
         <DialogPrimitive.Content
           ref={ref}
+          forceMount={persist || undefined}
+          // Persist mode: the panel stays mounted while closed (slid off-screen
+          // by the exit animation). Make sure that off-screen content can't
+          // catch clicks or be reached by tab/screen-reader.
+          {...(persist && !open
+            ? { inert: true as const, "aria-hidden": true }
+            : {})}
           className={cn(
             appLayoutDrawerVariants({ side, flush }),
             // Mobile: span the whole container and drop the outer gap so the
             // panel renders edge-to-edge full-screen. (`p-0` overrides the
             // variant's wrapper padding via tailwind-merge.)
             isMobile && "inset-0 p-0",
+            "data-[state=closed]:pointer-events-none",
+            // Persist mode only: hold the slide-out's final (off-screen) frame
+            // so the panel doesn't snap back into view (see PERSIST_CLOSED_HOLD).
+            persist && PERSIST_CLOSED_HOLD,
           )}
           style={style}
           onInteractOutside={(event) => {
@@ -576,7 +635,12 @@ const AppLayoutDrawerContent = React.forwardRef<
           }}
           {...props}
         >
-          {applyInlineSize ? (
+          {/* The resize grip sits just OUTSIDE the panel's inner edge
+              (`right-full` etc.), so the wrapper's `translateX(100%)` close
+              transform doesn't carry it off-screen — it stays as a ~12px sliver
+              at the container edge. In persist mode it's also non-interactive
+              while closed, so drop it entirely until the panel reopens. */}
+          {applyInlineSize && (!persist || open) ? (
             <AppLayoutDrawerResizeHandle
               side={resolvedSide}
               size={size}

package/src/components/open-source-features.tsx

@@ -13,7 +13,7 @@ const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description }) =
   return (
     <div className="bg-ods-card border border-ods-border rounded-3xl p-6 flex flex-col gap-6 h-full hover:bg-[#252525] transition-colors duration-200">
       {/* Icon Container */}
-      <div className="w-12 h-12 bg-[#161616] border border-ods-border rounded flex items-center justify-center">
+      <div className="w-12 h-12 bg-ods-bg border border-ods-border rounded flex items-center justify-center">
         <div className="w-6 h-6 text-ods-text-secondary">
           {icon}
         </div>
@@ -57,7 +57,7 @@ const OpenSourceFeatures: React.FC = () => {
   ];
 
   return (
-    <section className="w-full bg-[#161616] py-12 md:py-16 lg:py-20">
+    <section className="w-full bg-ods-bg py-12 md:py-16 lg:py-20">
       <div className="w-full max-w-[1920px] mx-auto px-6 md:px-20">
         {/* Section Title */}
         <div className="flex flex-col items-center gap-10">