npm - @flamingo-stack/openframe-frontend-core - Versions diffs - 0.0.458 → 0.0.459 - Mend

@flamingo-stack/openframe-frontend-core 0.0.458 → 0.0.459

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/dist/components/ui/overlay-scroll-area.d.ts DELETED Viewed

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { type PartialOptions } from 'overlayscrollbars';
-/** True once mounted on a device with a mouse/trackpad-grade pointer. */
-export declare function useFinePointer(): boolean;
-export interface OverlayScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Sizing/box classes of the scroll container (`flex-1 min-h-0`, `max-h-…`,
-     *  borders, background) — AND paddings. Do NOT include `overflow-*` here.
-     *
-     *  PADDING BELONGS HERE, NOT ON `contentClassName`: OverlayScrollbars owns
-     *  the viewport's box and writes `padding: 0` inline on it, so a padding
-     *  class on the viewport is silently dropped (measured — this is why the
-     *  wrapper components keep passing their consumer `className` to the host). */
-    className?: string;
-    /** Layout classes for the scrolling element itself (`flex flex-col gap-…`).
-     *  Children are its direct children, so `gap`/`flex` applies exactly as it
-     *  did on the old single `overflow-auto` div. Paddings do NOT work here —
-     *  see `className`. */
-    contentClassName?: string;
-    /** Receives the actual scrolling element — use for scrollTop/scrollHeight
-     *  logic and as IntersectionObserver root. Set from the first commit, valid
-     *  on both the overlay and the native fallback path. */
-    viewportRef?: React.Ref<HTMLDivElement>;
-    /** Extra OverlayScrollbars options merged over the ODS defaults. */
-    options?: PartialOptions;
-    children?: React.ReactNode;
-}
-/**
- * Replacement for an `overflow-auto` scroll container with the standardized
- * ODS overlay scrollbar. Split the old scroller's classes: sizing goes to
- * `className`, content layout to `contentClassName`. The inner scroller div
- * is stable across pointer modes — refs and `onScroll` (via the standard
- * HTML props) keep working like on the plain div it replaces.
- *
- * On touch devices (no fine pointer) the overlay layer is never initialized
- * and the inner div scrolls with its native (already overlay) scrollbar.
- */
-export declare function OverlayScrollArea({ className, contentClassName, viewportRef, options, children, ...props }: OverlayScrollAreaProps): React.JSX.Element;
-export interface GlobalOverlayScrollbarsProps {
-    /** Extra OverlayScrollbars options merged over the ODS defaults. */
-    options?: PartialOptions;
-}
-/**
- * Applies the same overlay scrollbar to the PAGE scroller (`<body>`).
- * Render once near the app root (client side). No-op on touch devices.
- *
- * ONLY mount this on APP-SHELL pages whose body barely scrolls — the real
- * scrolling happens in inner `OverlayScrollArea` containers (openframe-frontend,
- * openframe-chat). Do NOT mount it on long scroll-driven documents: the thumb is
- * repositioned from JS on every scroll frame, so on a page whose main thread is
- * already busy with reveal-on-scroll sections, tickers and marquees the scroll
- * visibly stutters. Measured on multi-platform-hub; raising the update debounce
- * (`update.debounce.mutation`/`resize`) did NOT help, which rules out the
- * observer re-measurement and points at the per-frame cost itself — i.e. it is
- * inherent to any JS-drawn scrollbar, not to this library. Such pages keep the
- * native page scrollbar, styled by the ODS `scrollbar-width`/`scrollbar-color`
- * globals; their inner containers can still use `OverlayScrollArea`.
- */
-export declare function GlobalOverlayScrollbars({ options }?: GlobalOverlayScrollbarsProps): null;
-//# sourceMappingURL=overlay-scroll-area.d.ts.map

package/dist/components/ui/overlay-scroll-area.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"overlay-scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/overlay-scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AA+B1E,yEAAyE;AACzE,wBAAgB,cAAc,IAAI,OAAO,CAWxC;AAoBD,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF;;;;;;mFAM+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;2BAGuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;4DAEwD;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;IACvC,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA8DxB;AAED,MAAM,WAAW,4BAA4B;IAC3C,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,CAAA;CACzB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,OAAO,EAAE,GAAE,4BAAiC,QA2BrF"}

package/src/components/ui/overlay-scroll-area.tsx DELETED Viewed

@@ -1,219 +0,0 @@
-'use client'
-import * as React from 'react'
-import { OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'
-import { cn } from '../../utils/cn'
-// =============================================================================
-// Standardized macOS-like overlay scrollbars on every platform.
-//
-// OverlayScrollbars hides the native scrollbar and draws a styleable overlay
-// one on top while keeping NATIVE scrolling (wheel, touchpad momentum,
-// keyboard, drag-the-thumb). With `autoHide` the bar shows only while
-// scrolling and fades out when idle — the macOS behavior, now identical on
-// Windows/Linux and for mouse users.
-//
-// Touch devices keep the native scrollbars: mobile bars are already overlay
-// and auto-hiding, so the custom layer is initialized only on fine-pointer
-// devices (desktop / tablet with a mouse).
-// =============================================================================
-/** Overlay scrollbars are desktop-only; touch keeps native scrolling. */
-const FINE_POINTER_QUERY = '(hover: hover) and (pointer: fine)'
-/**
- * `matchMedia` for the fine-pointer query, or `null` where it doesn't exist —
- * jsdom (every consumer's component tests) and non-browser render paths. The
- * whole overlay layer is progressive enhancement, so "can't detect" degrades
- * to the native scrollbar instead of throwing.
- */
-const matchFinePointer = (): MediaQueryList | null =>
-  typeof window !== 'undefined' && typeof window.matchMedia === 'function'
-    ? window.matchMedia(FINE_POINTER_QUERY)
-    : null
-/** True once mounted on a device with a mouse/trackpad-grade pointer. */
-export function useFinePointer(): boolean {
-  const [fine, setFine] = React.useState(false)
-  React.useEffect(() => {
-    const mq = matchFinePointer()
-    if (!mq) return
-    setFine(mq.matches)
-    const onChange = (e: MediaQueryListEvent) => setFine(e.matches)
-    mq.addEventListener('change', onChange)
-    return () => mq.removeEventListener('change', onChange)
-  }, [])
-  return fine
-}
-/** Shared ODS defaults: thin grey thumb, transparent track, show on scroll. */
-const ODS_SCROLLBAR_OPTIONS: PartialOptions = {
-  scrollbars: {
-    theme: 'os-theme-ods',
-    autoHide: 'scroll',
-    autoHideDelay: 800,
-    // Keep the bar visible until the first scroll so keyboard/AT users still
-    // get the affordance on freshly opened views.
-    autoHideSuspend: true,
-  },
-}
-const setRef = <T,>(ref: React.Ref<T> | undefined, value: T | null) => {
-  if (!ref) return
-  if (typeof ref === 'function') ref(value)
-  else (ref as React.MutableRefObject<T | null>).current = value
-}
-export interface OverlayScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Sizing/box classes of the scroll container (`flex-1 min-h-0`, `max-h-…`,
-   *  borders, background) — AND paddings. Do NOT include `overflow-*` here.
-   *
-   *  PADDING BELONGS HERE, NOT ON `contentClassName`: OverlayScrollbars owns
-   *  the viewport's box and writes `padding: 0` inline on it, so a padding
-   *  class on the viewport is silently dropped (measured — this is why the
-   *  wrapper components keep passing their consumer `className` to the host). */
-  className?: string
-  /** Layout classes for the scrolling element itself (`flex flex-col gap-…`).
-   *  Children are its direct children, so `gap`/`flex` applies exactly as it
-   *  did on the old single `overflow-auto` div. Paddings do NOT work here —
-   *  see `className`. */
-  contentClassName?: string
-  /** Receives the actual scrolling element — use for scrollTop/scrollHeight
-   *  logic and as IntersectionObserver root. Set from the first commit, valid
-   *  on both the overlay and the native fallback path. */
-  viewportRef?: React.Ref<HTMLDivElement>
-  /** Extra OverlayScrollbars options merged over the ODS defaults. */
-  options?: PartialOptions
-  children?: React.ReactNode
-}
-/**
- * Replacement for an `overflow-auto` scroll container with the standardized
- * ODS overlay scrollbar. Split the old scroller's classes: sizing goes to
- * `className`, content layout to `contentClassName`. The inner scroller div
- * is stable across pointer modes — refs and `onScroll` (via the standard
- * HTML props) keep working like on the plain div it replaces.
- *
- * On touch devices (no fine pointer) the overlay layer is never initialized
- * and the inner div scrolls with its native (already overlay) scrollbar.
- */
-export function OverlayScrollArea({
-  className,
-  contentClassName,
-  viewportRef,
-  options,
-  children,
-  ...props
-}: OverlayScrollAreaProps) {
-  const hostRef = React.useRef<HTMLDivElement>(null)
-  const scrollerRef = React.useRef<HTMLDivElement>(null)
-  // Serialize to keep the effect dep stable for inline `options` objects.
-  const optionsJson = JSON.stringify(options ?? null)
-  // Layout effect so the viewport is upgraded before consumers' own layout
-  // effects (scroll-fade hooks, observers) measure it.
-  React.useLayoutEffect(() => {
-    const host = hostRef.current
-    const viewport = scrollerRef.current
-    if (!host || !viewport) return
-    const extra = (JSON.parse(optionsJson) ?? {}) as PartialOptions
-    const mq = matchFinePointer()
-    if (!mq) return
-    let instance: ReturnType<typeof OverlayScrollbars> | null = null
-    const sync = () => {
-      if (mq.matches && !instance) {
-        // Our own div is passed as the viewport: children stay inside it and
-        // it remains the scrolling element; the library only suppresses its
-        // native scrollbar and appends the overlay handles to the host.
-        instance = OverlayScrollbars(
-          { target: host, elements: { viewport } },
-          // `scrollbars` merges one level deep: a caller overriding a single
-          // key (e.g. `autoHide`) must not drop the ODS theme and the other
-          // defaults with it.
-          {
-            ...ODS_SCROLLBAR_OPTIONS,
-            ...extra,
-            scrollbars: { ...ODS_SCROLLBAR_OPTIONS.scrollbars, ...extra.scrollbars },
-          },
-        )
-      } else if (!mq.matches && instance) {
-        instance.destroy()
-        instance = null
-      }
-    }
-    sync()
-    mq.addEventListener('change', sync)
-    return () => {
-      mq.removeEventListener('change', sync)
-      instance?.destroy()
-    }
-  }, [optionsJson])
-  return (
-    <div ref={hostRef} className={cn('relative', className)}>
-      <div
-        ref={(el) => {
-          scrollerRef.current = el
-          setRef(viewportRef, el)
-        }}
-        className={cn('h-full w-full overflow-auto', contentClassName)}
-        {...props}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-export interface GlobalOverlayScrollbarsProps {
-  /** Extra OverlayScrollbars options merged over the ODS defaults. */
-  options?: PartialOptions
-}
-/**
- * Applies the same overlay scrollbar to the PAGE scroller (`<body>`).
- * Render once near the app root (client side). No-op on touch devices.
- *
- * ONLY mount this on APP-SHELL pages whose body barely scrolls — the real
- * scrolling happens in inner `OverlayScrollArea` containers (openframe-frontend,
- * openframe-chat). Do NOT mount it on long scroll-driven documents: the thumb is
- * repositioned from JS on every scroll frame, so on a page whose main thread is
- * already busy with reveal-on-scroll sections, tickers and marquees the scroll
- * visibly stutters. Measured on multi-platform-hub; raising the update debounce
- * (`update.debounce.mutation`/`resize`) did NOT help, which rules out the
- * observer re-measurement and points at the per-frame cost itself — i.e. it is
- * inherent to any JS-drawn scrollbar, not to this library. Such pages keep the
- * native page scrollbar, styled by the ODS `scrollbar-width`/`scrollbar-color`
- * globals; their inner containers can still use `OverlayScrollArea`.
- */
-export function GlobalOverlayScrollbars({ options }: GlobalOverlayScrollbarsProps = {}) {
-  const fine = useFinePointer()
-  // Serialize to keep the effect dep stable for inline `options` objects.
-  const optionsJson = JSON.stringify(options ?? null)
-  React.useEffect(() => {
-    if (!fine) return
-    const extra = (JSON.parse(optionsJson) ?? {}) as PartialOptions
-    // Required by OverlayScrollbars for body initialization — suppresses the
-    // native scrollbars on both scroll roots before the overlay takes over.
-    document.documentElement.setAttribute('data-overlayscrollbars-initialize', '')
-    document.body.setAttribute('data-overlayscrollbars-initialize', '')
-    const instance = OverlayScrollbars(document.body, {
-      ...ODS_SCROLLBAR_OPTIONS,
-      ...extra,
-      // Same one-level-deep merge as OverlayScrollArea: a caller overriding a
-      // single key must not drop the ODS theme (or a tuning preset's siblings).
-      scrollbars: { ...ODS_SCROLLBAR_OPTIONS.scrollbars, ...extra.scrollbars },
-    })
-    return () => {
-      instance.destroy()
-      document.documentElement.removeAttribute('data-overlayscrollbars-initialize')
-      document.body.removeAttribute('data-overlayscrollbars-initialize')
-    }
-  }, [fine, optionsJson])
-  return null
-}

package/src/stories/OverlayScrollArea.stories.tsx DELETED Viewed

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { OverlayScrollArea } from '../components/ui/overlay-scroll-area'
-// POC: standardized macOS-like overlay scrollbar (OverlayScrollbars) — the
-// bar appears while scrolling / hovering and fades out when idle, on every
-// platform. Native scrolling (wheel, touchpad momentum, thumb drag) is kept.
-const meta: Meta<typeof OverlayScrollArea> = {
-  title: 'UI/OverlayScrollArea',
-  component: OverlayScrollArea,
-  parameters: { layout: 'centered' },
-}
-export default meta
-type Story = StoryObj<typeof OverlayScrollArea>
-const rows = (count: number) =>
-  Array.from({ length: count }, (_, i) => (
-    <div key={i} className="border-b border-ods-border px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-ods-text-primary">
-      Row {i + 1} — scrollable content
-    </div>
-  ))
-export const Vertical: Story = {
-  render: () => (
-    <OverlayScrollArea className="h-72 w-96 rounded-lg border border-ods-border bg-ods-card">
-      {rows(40)}
-    </OverlayScrollArea>
-  ),
-}
-export const Horizontal: Story = {
-  render: () => (
-    <OverlayScrollArea className="h-24 w-96 rounded-lg border border-ods-border bg-ods-card">
-      <div className="flex w-max gap-[var(--spacing-system-s)] p-[var(--spacing-system-m)]">
-        {Array.from({ length: 30 }, (_, i) => (
-          <div key={i} className="flex h-12 w-28 shrink-0 items-center justify-center rounded-md bg-ods-bg text-ods-text-secondary">
-            Chip {i + 1}
-          </div>
-        ))}
-      </div>
-    </OverlayScrollArea>
-  ),
-}
-export const Both: Story = {
-  render: () => (
-    <OverlayScrollArea className="h-72 w-96 rounded-lg border border-ods-border bg-ods-card">
-      <div className="w-[800px]">{rows(40)}</div>
-    </OverlayScrollArea>
-  ),
-}

package/src/styles/overlay-scrollbars-theme.css DELETED Viewed

@@ -1,19 +0,0 @@
-/* ODS theme for OverlayScrollbars (see components/ui/overlay-scroll-area.tsx).
-   Thin grey draggable thumb on a transparent track — matches the global
-   elevator scrollbar styling, but with macOS-like auto-hide on all platforms. */
-.os-theme-ods {
-  --os-size: 8px;
-  --os-padding-perpendicular: 2px;
-  --os-padding-axis: 2px;
-  --os-track-bg: transparent;
-  --os-track-bg-hover: transparent;
-  --os-track-bg-active: transparent;
-  --os-handle-bg: var(--ods-system-greys-grey);
-  --os-handle-bg-hover: var(--ods-system-greys-grey-hover);
-  --os-handle-bg-active: var(--ods-system-greys-grey-action);
-  --os-handle-border-radius: 4px;
-  --os-handle-perpendicular-size: 100%;
-  --os-handle-perpendicular-size-hover: 100%;
-  --os-handle-perpendicular-size-active: 100%;
-  --os-handle-min-size: 33px;
-}