@flamingo-stack/openframe-frontend-core 0.0.201 → 0.0.202-snapshot.20260521221224

package/src/components/navigation/navigation-sidebar.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { useCallback, useLayoutEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { useLocalStorage } from '../../hooks/ui/use-local-storage'
-import { useLgUp } from '../../hooks/ui/use-media-query'
+import { useLgUp, useMdUp } from '../../hooks/ui/use-media-query'
 import { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation'
 import { cn } from '../../utils'
 import { NavigationSidebarHeader } from './navigation-sidebar-header'
@@ -23,25 +23,57 @@ export interface NavigationSidebarProps {
 }
 
 export function NavigationSidebar({ config, disabled = false }: NavigationSidebarProps) {
+  const isMdUp = useMdUp() ?? false
   const isLgUp = useLgUp() ?? false
 
-  // useLocalStorage reads from localStorage first, then falls back to this value
-  const [minimized, setMinimized] = useLocalStorage<boolean>(
+  // Tablet = md viewport but not lg. On tablet the sidebar floats over the
+  // content area (overlay) instead of pushing it like on desktop.
+  const isTablet = isMdUp && !isLgUp
+
+  // Desktop preference persists across sessions. Tablet state is in-memory
+  // only so entering tablet always starts minimized without clobbering the
+  // user's desktop choice.
+  const [desktopMinimized, setDesktopMinimized] = useLocalStorage<boolean>(
     STORAGE_KEY,
-    !isLgUp || (config.minimized ?? false)
+    config.minimized ?? false,
   )
+  const [tabletMinimized, setTabletMinimized] = useState(true)
+
+  useEffect(() => {
+    if (isTablet) setTabletMinimized(true)
+  }, [isTablet])
+
+  const minimized = isTablet ? tabletMinimized : desktopMinimized
 
   // Enable transitions only after the correct width is painted
   const [transitionsEnabled, setTransitionsEnabled] = useState(false)
 
-  // On tablet (md but not lg), force minimized layout regardless of stored value
-  const isMinimized = !isLgUp || minimized
-  const showLabel = isLgUp && !minimized
+  const isOverlayOpen = isTablet && !minimized
+
+  const showLabel = !minimized
 
   const handleToggle = useCallback(() => {
-    setMinimized(prev => !prev)
+    if (isTablet) {
+      setTabletMinimized(prev => !prev)
+    } else {
+      setDesktopMinimized(prev => !prev)
+    }
     config.onToggleMinimized?.()
-  }, [setMinimized, config])
+  }, [isTablet, setDesktopMinimized, config])
+
+  const closeOverlay = useCallback(() => {
+    setTabletMinimized(true)
+  }, [])
+
+  // Dismiss the tablet overlay with Escape so it behaves like a transient panel
+  useEffect(() => {
+    if (!isOverlayOpen) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeOverlay()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOverlayOpen, closeOverlay])
 
   const handleItemClick = useCallback((item: NavigationSidebarItem, event?: React.MouseEvent) => {
     event?.stopPropagation()
@@ -58,14 +90,12 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
     secondaryItems: config.items.filter(item => item.section === 'secondary'),
   }), [config.items])
 
-  const sidebarWidth = useMemo(() => {
-    if (isLgUp === undefined) {
-      return `${MINIMIZED_WIDTH}px`
-    }
-    return isMinimized ? `${MINIMIZED_WIDTH}px` : `${EXPANDED_WIDTH}px`
-  }, [isLgUp, isMinimized])
+  const sidebarWidth = useMemo(
+    () => (minimized ? `${MINIMIZED_WIDTH}px` : `${EXPANDED_WIDTH}px`),
+    [minimized],
+  )
 
-  const isHydrated = isLgUp !== undefined
+  const isHydrated = isMdUp !== undefined && isLgUp !== undefined
 
   useLayoutEffect(() => {
     if (isHydrated && !transitionsEnabled) {
@@ -77,36 +107,47 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
   }, [isHydrated, transitionsEnabled])
 
   return (
-    <aside
-      className={cn(
-        "flex-col h-full hidden md:flex",
-        "bg-ods-card border-r border-ods-border",
-        transitionsEnabled && "transition-[width] duration-300",
-        config.className,
+    <>
+      {/* Backdrop scrim — only visible on tablet while the overlay is open */}
+      <div
+        className={cn(
+          "fixed inset-0 z-[40] bg-black/50",
+          "hidden md:block lg:hidden",
+          "transition-opacity duration-300",
+          isOverlayOpen ? "opacity-100" : "opacity-0 pointer-events-none",
+        )}
+        onClick={closeOverlay}
+        aria-hidden="true"
+      />
+
+      {/* Flex-flow placeholder — reserves the collapsed 56px slot on tablet so
+          the main content keeps its position while the sidebar floats above it */}
+      {isTablet && (
+        <div
+          className="h-full hidden md:block flex-shrink-0"
+          style={{ width: `${MINIMIZED_WIDTH}px` }}
+          aria-hidden="true"
+        />
       )}
-      style={{ width: sidebarWidth }}
-      aria-label="Main navigation sidebar"
-    >
-      {isHydrated && (
-        <>
-          <NavigationSidebarHeader minimized={isMinimized} />
-
-          <div className="flex-1 flex flex-col justify-between py-4">
-            <nav className="flex flex-col" aria-label="Primary navigation">
-              {primaryItems.map(item => (
-                <NavigationSidebarItemButton
-                  key={item.id}
-                  item={item}
-                  showLabel={showLabel}
-                  disabled={disabled}
-                  onClick={handleItemClick}
-                />
-              ))}
-            </nav>
-
-            {secondaryItems.length > 0 && (
-              <nav className="flex flex-col" aria-label="Secondary navigation">
-                {secondaryItems.map(item => (
+
+      <aside
+        className={cn(
+          "flex-col hidden md:flex flex-shrink-0",
+          "bg-ods-card border-r border-ods-border",
+          isTablet ? "fixed top-0 left-0 h-screen z-[45]" : "relative h-full",
+          transitionsEnabled && "transition-[width] duration-300",
+          config.className,
+        )}
+        style={{ width: sidebarWidth }}
+        aria-label="Main navigation sidebar"
+      >
+        {isHydrated && (
+          <>
+            <NavigationSidebarHeader minimized={minimized} />
+
+            <div className="flex-1 flex flex-col justify-between py-4 overflow-y-auto">
+              <nav className="flex flex-col" aria-label="Primary navigation">
+                {primaryItems.map(item => (
                   <NavigationSidebarItemButton
                     key={item.id}
                     item={item}
@@ -116,18 +157,30 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
                   />
                 ))}
               </nav>
-            )}
-          </div>
 
-          {isLgUp && (
+              {secondaryItems.length > 0 && (
+                <nav className="flex flex-col" aria-label="Secondary navigation">
+                  {secondaryItems.map(item => (
+                    <NavigationSidebarItemButton
+                      key={item.id}
+                      item={item}
+                      showLabel={showLabel}
+                      disabled={disabled}
+                      onClick={handleItemClick}
+                    />
+                  ))}
+                </nav>
+              )}
+            </div>
+
             <NavigationSidebarToggle
-              minimized={isMinimized}
+              minimized={minimized}
               showLabel={showLabel}
               onToggle={handleToggle}
             />
-          )}
-        </>
-      )}
-    </aside>
+          </>
+        )}
+      </aside>
+    </>
   )
 }

package/src/components/platform/ScriptInfoSection.tsx

@@ -100,7 +100,7 @@ function InfoCell({ label, value, avatar, className }: InfoCellProps) {
 
       {/* Text content */}
       <div className="flex flex-col min-w-0">
-        <span className="text-ods-text-primary font-['DM_Sans'] text-[14px] leading-[20px] md:text-[18px] md:leading-[24px] font-medium truncate">
+        <span className="text-ods-text-primary font-['DM_Sans'] text-[14px] leading-[20px] md:text-[18px] md:leading-[24px] font-medium truncate" title={value}>
           {value}
         </span>
         <span className="text-ods-text-secondary font-['DM_Sans'] text-[12px] leading-[16px] md:text-[14px] md:leading-[20px] font-medium truncate">

package/src/components/providers/theme-provider.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import {
+  ThemeProvider as NextThemesProvider,
+  useTheme as useNextTheme,
+} from "next-themes";
+import type { ThemeProviderProps as NextThemesProviderProps } from "next-themes/dist/types";
+
+/**
+ * ODS theme system — thin wrapper over `next-themes`.
+ *
+ * We deliberately do NOT hand-roll a provider/no-flash script: `next-themes`
+ * is already a dependency, is battle-tested in Next.js (App & Pages router),
+ * injects its own pre-paint anti-flash script, handles SSR + localStorage +
+ * cross-tab sync, and also works in plain React (Vite/Tauri).
+ *
+ * Product model (locked): a MANUAL light/dark switch, default DARK,
+ * persisted to localStorage. No "system" mode (`enableSystem={false}`).
+ *
+ * Drives styling by setting `data-theme="light|dark"` on <html>;
+ * `src/styles/ods-colors.css` swaps the `--ods-*` primitives accordingly.
+ *
+ * Public API exposed by this module:
+ *   • `<ThemeProvider>` — preconfigured next-themes provider.
+ *   • `useTheme()`      — raw next-themes hook (advanced cases).
+ *   • `useThemeToggle()`— headless convenience hook for building toggle UI
+ *                         in consumer apps (no styled component on purpose;
+ *                         apps own their button visuals via the lib's
+ *                         existing `<Button>`).
+ */
+
+export type Theme = "light" | "dark";
+
+export const THEME_STORAGE_KEY = "ods-theme";
+export const THEME_ATTRIBUTE = "data-theme";
+export const DEFAULT_THEME: Theme = "dark";
+
+export type ThemeProviderProps = Partial<NextThemesProviderProps>;
+
+/**
+ * Pre-configured provider. Wrap the app once (Next.js: in the root layout;
+ * apps must keep `suppressHydrationWarning` on <html> — already the case).
+ * No `<ThemeScript>` needed — next-themes handles the no-flash script.
+ *
+ * All next-themes props are overridable, but the ODS defaults below encode
+ * the product decision.
+ */
+export function ThemeProvider({ children, ...overrides }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider
+      attribute={THEME_ATTRIBUTE}
+      defaultTheme={DEFAULT_THEME}
+      enableSystem={false}
+      themes={["light", "dark"]}
+      storageKey={THEME_STORAGE_KEY}
+      disableTransitionOnChange={false}
+      {...overrides}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
+
+/**
+ * Re-export of next-themes' `useTheme` (no custom logic on top).
+ * Returns `{ theme, setTheme, resolvedTheme, themes, ... }`.
+ */
+export const useTheme = useNextTheme;
+
+/* ------------------------------------------------------------------ */
+/* useThemeToggle — headless convenience for building toggle UIs      */
+/* ------------------------------------------------------------------ */
+
+export interface UseThemeToggleResult {
+  /** Becomes `true` after the client has hydrated and resolved the stored
+   *  preference. Until then, `theme`/`isDark`/`isLight` reflect the SSR
+   *  default (`DEFAULT_THEME`) — handy for rendering a stable placeholder. */
+  mounted: boolean;
+  /** Resolved active theme (`"dark"` until mounted, then real value). */
+  theme: Theme;
+  isDark: boolean;
+  isLight: boolean;
+  /** Flip dark↔light and persist. */
+  toggle: () => void;
+  /** Set explicitly to `"light"` or `"dark"` and persist. */
+  setTheme: (theme: Theme) => void;
+}
+
+/**
+ * Headless toggle helper. Build any button you like:
+ *
+ *   const { isDark, toggle, mounted } = useThemeToggle()
+ *   <Button size="icon" variant="transparent" onClick={toggle} aria-label="…">
+ *     {mounted && (isDark ? <Sun01Icon /> : <MoonIcon />)}
+ *   </Button>
+ *
+ * The mount gate avoids hydration mismatch (next-themes only knows the
+ * persisted preference on the client after mount).
+ */
+export function useThemeToggle(): UseThemeToggleResult {
+  const { resolvedTheme, theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+
+  const active: Theme = mounted
+    ? resolvedTheme === "light" || theme === "light"
+      ? "light"
+      : "dark"
+    : DEFAULT_THEME;
+
+  const setOdsTheme = React.useCallback(
+    (next: Theme) => setTheme(next),
+    [setTheme],
+  );
+
+  const toggle = React.useCallback(
+    () => setTheme(active === "dark" ? "light" : "dark"),
+    [active, setTheme],
+  );
+
+  return {
+    mounted,
+    theme: active,
+    isDark: active === "dark",
+    isLight: active === "light",
+    toggle,
+    setTheme: setOdsTheme,
+  };
+}

package/src/components/shared/onboarding/onboarding-step-card.tsx

@@ -66,10 +66,10 @@ export function OnboardingStepCard({
     >
       {/* Left column - content */}
       <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-1">
-        <h3 className="text-h4 text-ods-text-primary truncate">
+        <h3 className="text-h4 text-ods-text-primary truncate" title={step.title}>
           {step.title}
         </h3>
-        <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate h-[20px]">
+        <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate h-[20px]" title={step.description}>
           {step.description}
         </p>
       </div>

package/src/components/shared/product-release/product-release-card.tsx

@@ -463,7 +463,7 @@ export function ProductReleaseCard({
             as the loaded text — zero load-to-resolve baseline shift. */}
         <span className="flex min-w-0 flex-1 flex-col gap-0.5 min-h-14">
           <span className="flex items-center gap-2 min-w-0 h-5">
-            <span className="truncate text-sm font-semibold leading-5 text-ods-text-primary min-w-0">
+            <span className="truncate text-sm font-semibold leading-5 text-ods-text-primary min-w-0" title={title}>
               {title}
             </span>
             {version ? (
@@ -478,7 +478,7 @@ export function ProductReleaseCard({
             </span>
           </span>
           <span className="flex items-center min-w-0 h-4">
-            <span className="truncate text-[11px] leading-4 text-ods-text-secondary/80">
+            <span className="truncate text-[11px] leading-4 text-ods-text-secondary/80" title={summary || undefined}>
               {/* The literal between the curly-quote string is U+00A0
                   (NBSP). The hub's `COMPACT_CARD_ROW_FILLER` is also
                   NBSP; ASCII space here would let React collapse the
@@ -545,11 +545,11 @@ export function ProductReleaseCard({
         {/* Left column - content */}
         <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
           <div className="min-h-[48px] flex items-center">
-            <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2">
+            <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2" title={title}>
               {title}
             </h3>
           </div>
-          <p className="text-h4 text-ods-text-secondary line-clamp-3">
+          <p className="text-h4 text-ods-text-secondary line-clamp-3" title={summary || ' '}>
             {summary || ' '}
           </p>
         </div>
@@ -585,11 +585,11 @@ export function ProductReleaseCard({
       {/* Left column - content */}
       <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
         <div className="min-h-[48px] flex items-center">
-          <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2">
+          <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2" title={title}>
             {title}
           </h3>
         </div>
-        <p className="text-h4 text-ods-text-secondary line-clamp-3">
+        <p className="text-h4 text-ods-text-secondary line-clamp-3" title={summary || ' '}>
           {summary || ' '}
         </p>
       </div>

package/src/components/shared/product-release/release-detail-page.tsx

@@ -282,7 +282,7 @@ export function ReleaseDetailPage({
               variant="round"
             />
             <div className="flex flex-col gap-0 flex-1 min-w-0">
-              <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
+              <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate" title={author?.full_name || 'Unknown Author'}>
                 {author?.full_name || 'Unknown Author'}
               </p>
               <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">

package/src/components/ui/assignee-dropdown.tsx

@@ -159,7 +159,7 @@ function CompactAssigneeDropdown({
                       variant="round"
                       className="h-6 w-6 shrink-0"
                     />
-                    <span className="flex-1 truncate text-h4 text-ods-text-primary">{opt.label}</span>
+                    <span className="flex-1 truncate text-h4 text-ods-text-primary" title={opt.label}>{opt.label}</span>
                     {isCurrent && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
                   </button>
                 )
@@ -194,7 +194,7 @@ function DefaultAssigneeDropdown({
           variant="round"
           className="h-6 w-6 shrink-0"
         />
-        <span className="truncate">{opt.label}</span>
+        <span className="truncate" title={opt.label}>{opt.label}</span>
       </div>
     )
   }, [])
@@ -253,7 +253,7 @@ function DefaultAssigneeDropdown({
                 className="flex items-center gap-[var(--spacing-system-xxs)] cursor-pointer group text-left"
               >
                 <PenEditIcon className="size-4 shrink-0 text-ods-text-secondary group-hover:text-ods-accent transition-colors" />
-                <span className="text-h4 text-ods-text-primary truncate">{currentAssignee!.name}</span>
+                <span className="text-h4 text-ods-text-primary truncate" title={currentAssignee!.name}>{currentAssignee!.name}</span>
               </button>
             </div>
             <span className="text-h6 text-ods-text-secondary truncate">Assigned</span>

package/src/components/ui/autocomplete.tsx

@@ -574,7 +574,7 @@ function AutocompleteInner<T = string>(
                     )}
                     onClick={handleCreate}
                   >
-                    <span className="truncate">+ Create &quot;{inputValue.trim()}&quot;</span>
+                    <span className="truncate" title={`+ Create "${inputValue.trim()}"`}>+ Create &quot;{inputValue.trim()}&quot;</span>
                   </div>
                 ) : (
                   <div className="px-3 py-2 text-ods-text-secondary text-[14px]">
@@ -607,7 +607,7 @@ function AutocompleteInner<T = string>(
                     >
                       {renderOption ? renderOption(option, isSelected) : (
                         <div className="flex items-center justify-between w-full min-w-0">
-                          <span className="truncate">{option.label}</span>
+                          <span className="truncate" title={option.label}>{option.label}</span>
                           {isSelected && (
                             <CheckIcon className="text-ods-accent" size={20} />
                           )}

package/src/components/ui/button/split-button.tsx

@@ -16,7 +16,7 @@ const splitHalfBase = [
   "whitespace-nowrap transition-colors duration-200",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:z-10",
   "disabled:pointer-events-none",
-  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0",
 ]
 
 const splitHalfVariants = cva(splitHalfBase, {
@@ -28,8 +28,8 @@ const splitHalfVariants = cva(splitHalfBase, {
       destructive: buttonSurfaceClasses.destructive,
     },
     size: {
-      default: "h-12 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3",
-      small: "h-6 md:h-8 px-[var(--spacing-system-xs)] text-h5",
+      default: "h-10 md:h-12 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
+      small: "h-6 md:h-8 px-[var(--spacing-system-xs)] text-h5 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4",
     },
     side: { main: "", icon: "" },
   },
@@ -55,8 +55,6 @@ const splitHalfVariants = cva(splitHalfBase, {
     // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
     { side: "icon", size: "default", class: "w-10 px-0" },
     { side: "icon", size: "small", class: "w-6 md:w-8 px-0" },
-
-    { size: "small", class: "[&_svg]:h-4 [&_svg]:w-4" },
   ],
   defaultVariants: { variant: "accent", size: "default", side: "main" },
 })

package/src/components/ui/checkbox-block.tsx

@@ -80,7 +80,7 @@ const CheckboxBlock = React.forwardRef<
       </div>
     </label>
     {error && (
-      <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error">
+      <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error" title={error}>
         {error}
       </p>
     )}