@flamingo-stack/openframe-frontend-core 0.0.410-snapshot.20260711165901 → 0.0.410

package/dist/hooks/ui/use-focus-trap.d.ts

@@ -1,32 +0,0 @@
-import { type RefObject } from 'react';
-export interface UseFocusTrapOptions {
-    /** Called when Escape is pressed while focus is inside the container.
-     *  When omitted, Escape passes through untouched so document-level
-     *  listeners still fire. */
-    onEscape?: () => void;
-    /**
-     * When false, Tab/Shift+Tab are NOT cycled within the container — for
-     * non-modal dialogs (e.g. SlidingSidebar, whose z-50 header stays clickable
-     * above the open drawer). Escape / initial focus / guarded restore still apply.
-     * @default true
-     */
-    contain?: boolean;
-}
-/**
- * Focus management for overlay surfaces (mobile nav panel, sliding sidebar,
- * burger menu, modals): initial focus on activate, container-scoped Tab
- * cycling + Escape, and guarded focus restore on deactivate.
- *
- * CONTRACT: the container element MUST have `tabIndex={-1}`. After a
- * click/tap on a non-focusable area inside the surface, browsers move focus
- * to the nearest focusable ancestor — with the container script-focusable
- * that ancestor is the container itself, so this keydown listener keeps
- * hearing Escape/Tab. Without it, focus falls to `body` and the trap goes
- * deaf.
- *
- * The listener being container-scoped makes it stacking-safe: it only fires
- * while focus is inside the surface, so a modal open above never leaks its
- * Escape into the surface below.
- */
-export declare function useFocusTrap(containerRef: RefObject<HTMLElement | null>, active: boolean, { onEscape, contain }?: UseFocusTrapOptions): void;
-//# sourceMappingURL=use-focus-trap.d.ts.map

package/dist/hooks/ui/use-focus-trap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-focus-trap.d.ts","sourceRoot":"","sources":["../../../src/hooks/ui/use-focus-trap.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWzD,MAAM,WAAW,mBAAmB;IAClC;;gCAE4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAC1B,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,OAAO,EACf,EAAE,QAAQ,EAAE,OAAc,EAAE,GAAE,mBAAwB,GACrD,IAAI,CA8DN"}

package/src/hooks/ui/use-focus-trap.ts

@@ -1,110 +0,0 @@
-'use client'
-
-import { useEffect, useRef, type RefObject } from 'react'
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(', ')
-
-export interface UseFocusTrapOptions {
-  /** Called when Escape is pressed while focus is inside the container.
-   *  When omitted, Escape passes through untouched so document-level
-   *  listeners still fire. */
-  onEscape?: () => void
-  /**
-   * When false, Tab/Shift+Tab are NOT cycled within the container — for
-   * non-modal dialogs (e.g. SlidingSidebar, whose z-50 header stays clickable
-   * above the open drawer). Escape / initial focus / guarded restore still apply.
-   * @default true
-   */
-  contain?: boolean
-}
-
-/**
- * Focus management for overlay surfaces (mobile nav panel, sliding sidebar,
- * burger menu, modals): initial focus on activate, container-scoped Tab
- * cycling + Escape, and guarded focus restore on deactivate.
- *
- * CONTRACT: the container element MUST have `tabIndex={-1}`. After a
- * click/tap on a non-focusable area inside the surface, browsers move focus
- * to the nearest focusable ancestor — with the container script-focusable
- * that ancestor is the container itself, so this keydown listener keeps
- * hearing Escape/Tab. Without it, focus falls to `body` and the trap goes
- * deaf.
- *
- * The listener being container-scoped makes it stacking-safe: it only fires
- * while focus is inside the surface, so a modal open above never leaks its
- * Escape into the surface below.
- */
-export function useFocusTrap(
-  containerRef: RefObject<HTMLElement | null>,
-  active: boolean,
-  { onEscape, contain = true }: UseFocusTrapOptions = {}
-): void {
-  // Latest-ref so unstable inline callbacks never tear the trap down and
-  // re-yank focus — same stable-callback discipline as `useCloseOnNavigation`.
-  const onEscapeRef = useRef(onEscape)
-  onEscapeRef.current = onEscape
-
-  useEffect(() => {
-    if (!active) return
-    const container = containerRef.current
-    if (!container) return
-
-    const previouslyFocused = document.activeElement as HTMLElement | null
-
-    const focusables = () =>
-      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
-        .filter((el) => el.getClientRects().length > 0)
-
-    const first = focusables()[0]
-    ;(first ?? container).focus({ preventScroll: true })
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        // No preventDefault/stopPropagation — pass-through by design.
-        onEscapeRef.current?.()
-        return
-      }
-      if (e.key !== 'Tab' || !contain) return
-      const items = focusables()
-      if (items.length === 0) {
-        e.preventDefault()
-        container.focus({ preventScroll: true })
-        return
-      }
-      const firstEl = items[0]
-      const lastEl = items[items.length - 1]
-      const current = document.activeElement
-      if (e.shiftKey && (current === firstEl || current === container)) {
-        e.preventDefault()
-        lastEl.focus({ preventScroll: true })
-      } else if (!e.shiftKey && current === lastEl) {
-        e.preventDefault()
-        firstEl.focus({ preventScroll: true })
-      }
-    }
-
-    container.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      container.removeEventListener('keydown', handleKeyDown)
-      // Guarded restore: only when focus is still inside the surface (or fell
-      // to body because the surface unmounted) — never steal focus from a
-      // dialog that opened meanwhile (e.g. the nav-footer → SSO modal flow).
-      const current = document.activeElement
-      if (
-        previouslyFocused &&
-        previouslyFocused.isConnected &&
-        (current === null || current === document.body || container.contains(current))
-      ) {
-        previouslyFocused.focus({ preventScroll: true })
-      }
-    }
-  }, [containerRef, active, contain])
-}

package/src/stories/MobileNavPanel.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState, type ReactNode } from 'react'
-import { Button } from '../components/ui/button'
-import { StatusBadge } from '../components/ui/status-badge'
-import { MobileNavPanel } from '../components/navigation/mobile-nav-panel'
-import type { MobileNavConfig } from '../types/navigation'
-
-const meta: Meta<typeof MobileNavPanel> = {
-  title: 'Navigation/MobileNavPanel',
-  component: MobileNavPanel,
-  parameters: {
-    layout: 'fullscreen',
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const baseSections: MobileNavConfig['sections'] = [
-  {
-    title: 'Product',
-    items: [
-      { id: 'home', label: 'Home', href: '#', isActive: true },
-      { id: 'features', label: 'Features', href: '#' },
-      { id: 'pricing', label: 'Pricing', href: '#' },
-    ],
-  },
-  {
-    title: 'Community',
-    items: [
-      { id: 'blog', label: 'Blog', href: '#' },
-      { id: 'podcasts', label: 'Podcasts', href: '#' },
-    ],
-  },
-]
-
-function PanelHarness({
-  config,
-  children,
-}: {
-  config: Omit<MobileNavConfig, 'onClose'>
-  children?: ReactNode
-}) {
-  const [open, setOpen] = useState(true)
-
-  return (
-    <div className="min-h-screen bg-ods-bg p-4">
-      <Button variant="outline" onClick={() => setOpen(true)}>
-        Open menu
-      </Button>
-      {children}
-      <MobileNavPanel
-        isOpen={open}
-        config={{ ...config, onClose: () => setOpen(false) }}
-      />
-    </div>
-  )
-}
-
-/** Default chrome (openmsp-style): bg-ods-card + border, auth footer. */
-export const Default: Story = {
-  render: function Render() {
-    return (
-      <PanelHarness
-        config={{
-          sections: baseSections,
-          footer: (
-            <Button className="w-full" variant="outline">
-              Sign Up
-            </Button>
-          ),
-        }}
-      />
-    )
-  },
-}
-
-/** Flamingo-style custom chrome via config.className (mobileNavClassName knob). */
-export const CustomChrome: Story = {
-  render: function Render() {
-    return (
-      <PanelHarness
-        config={{
-          sections: baseSections,
-          className: 'bg-ods-bg border border-ods-border',
-        }}
-      />
-    )
-  },
-}
-
-/** TMCG-style disabled auth footer with a status badge. */
-export const DisabledFooter: Story = {
-  render: function Render() {
-    return (
-      <PanelHarness
-        config={{
-          sections: baseSections,
-          footer: (
-            <Button className="w-full cursor-not-allowed opacity-75" variant="outline" disabled>
-              <span className="flex items-center justify-center gap-2 w-full">
-                Member Login
-                <StatusBadge text="Coming Soon" variant="button" colorScheme="cyan" />
-              </span>
-            </Button>
-          ),
-        }}
-      />
-    )
-  },
-}
-
-/**
- * Regression story for the reported bug shape: a SHORT visible viewport with
- * a long menu. The panel must fit inside the fold (svh-based max-height), the
- * footer must stay visible, and the list must scroll internally to the last
- * item. View in a ~660px-tall viewport (or the story's constrained frame).
- */
-export const ShortViewportLongList: Story = {
-  render: function Render() {
-    const longSections: MobileNavConfig['sections'] = [
-      {
-        title: 'All entries',
-        items: Array.from({ length: 30 }, (_, i) => ({
-          id: `item-${i + 1}`,
-          label: i === 29 ? 'Last entry (must be reachable)' : `Menu entry ${i + 1}`,
-          href: '#',
-        })),
-      },
-    ]
-
-    return (
-      <PanelHarness
-        config={{
-          sections: longSections,
-          footer: (
-            <Button className="w-full" variant="outline">
-              Sign Up
-            </Button>
-          ),
-        }}
-      >
-        <p className="mt-4 text-sm text-ods-text-secondary">
-          Resize the viewport short (~660px): the footer stays pinned and the
-          list scrolls to "Last entry".
-        </p>
-      </PanelHarness>
-    )
-  },
-}