@flamingo-stack/openframe-frontend-core 0.0.449-snapshot.20260718143201 → 0.0.449

package/src/hooks/ui/use-suppress-clone-focus.ts

@@ -1,61 +0,0 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-
-// Every focusable a clone might contain — matched so it can be pulled out of the
-// keyboard tab order (see useSuppressCloneFocus). `[contenteditable]:not(
-// [contenteditable="false"])` catches the empty/`"true"`/`"plaintext-only"`
-// editable forms; `summary` is focusable inside a <details>.
-const CLONE_FOCUSABLE_SELECTOR =
-  'a[href],button,input,select,textarea,iframe,summary,audio[controls],video[controls],[tabindex],[contenteditable]:not([contenteditable="false"])'
-
-/**
- * Keep a marquee clone's content pointer-CLICKABLE while taking it out of the
- * accessibility tree and the keyboard tab order. Shared by every endless-loop
- * surface that renders a second track copy (<CardsStrip> managed cells,
- * <MarqueeWall> clone copies).
- *
- * `inert` (the previous approach) does all three at once: a11y-hidden,
- * un-focusable AND un-clickable. That third effect was the "news marquee stops
- * being clickable after you scroll it for a while" bug — the 2-copy endless
- * loop ALWAYS paints clone cards inside the viewport near the copy seam, so a
- * user who manually scrolls and parks there is looking at real-looking cards
- * that silently swallow every click. Clones must therefore stay clickable (a
- * click on ANY visible card must open its link — mouse, ⌘-click, middle-click
- * and context-menu all handled natively by the clone's own anchor).
- *
- * The a11y contract is still met without `inert`: the caller keeps
- * `aria-hidden` on the clone wrapper (out of the a11y tree) and this hook
- * forces every focusable descendant to `tabindex="-1"` (out of the tab order →
- * no duplicate tab stops, no aria-hidden-focus violation). Re-applied on
- * subtree mutation. This is the standard loop-clone treatment used by
- * Swiper/Splide.
- */
-export function useSuppressCloneFocus(active: boolean) {
-  const ref = useRef<HTMLDivElement | null>(null)
-  useEffect(() => {
-    const root = ref.current
-    if (!root || !active) return
-    const suppress = () => {
-      root.querySelectorAll<HTMLElement>(CLONE_FOCUSABLE_SELECTOR).forEach(el => {
-        // Only stamp the ones not already stamped — avoids touching the DOM (and
-        // clobbering an intentional tabindex) on every mutation.
-        if (el.getAttribute('tabindex') !== '-1') el.setAttribute('tabindex', '-1')
-      })
-    }
-    suppress()
-    // Watch structure AND the attributes that can turn a descendant tabbable
-    // (an anchor gaining `href`, React restoring `tabindex="0"`, an element
-    // becoming editable, media gaining `controls`). The `!== '-1'` guard above
-    // makes our own tabindex writes a no-op, so the observer never loops.
-    const mo = new MutationObserver(suppress)
-    mo.observe(root, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['href', 'tabindex', 'contenteditable', 'controls'],
-    })
-    return () => mo.disconnect()
-  }, [active])
-  return ref
-}

package/src/stories/MarqueeWall.stories.tsx

@@ -1,132 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { MarqueeWall, useMarqueeSync } from '../components/ui/marquee-wall'
-
-// Arbitrary-children demo content: simple lockup tiles (the wall is
-// content-agnostic — chips, logos, feed rows all ride the same engine).
-const TILES = [
-  'Datto RMM',
-  'ConnectWise',
-  'HaloPSA',
-  'SentinelOne',
-  'Proofpoint',
-  'Veeam',
-  'Auvik',
-  'IT Glue',
-]
-
-function Tile({ label }: { label: string }) {
-  return (
-    <div className="flex h-16 w-48 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card text-h6 text-ods-text-secondary">
-      {label}
-    </div>
-  )
-}
-
-const meta: Meta<typeof MarqueeWall> = {
-  title: 'UI/MarqueeWall',
-  component: MarqueeWall,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'THE endless-scroll wall container — a clipped area whose content loops as a marquee along either axis, fading where the clip cuts. Transform-driven on the shared `useMarqueeEngine` core (no inner scroller). Auto-static when the content fits or under `prefers-reduced-motion`. `useMarqueeSync` pins multiple walls to one position driver; `trackId` publishes live offsets for FLIP-morph coordination.',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="bg-ods-bg p-[var(--spacing-system-xl)]">
-        <Story />
-      </div>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof MarqueeWall>
-
-/** Horizontal loop of arbitrary children with the default right fade. */
-export const Horizontal: Story = {
-  render: () => (
-    <MarqueeWall fade="right" copyGap="var(--spacing-system-mf)" className="w-full" contentClassName="flex items-center gap-[var(--spacing-system-mf)]">
-      {TILES.map(t => (
-        <Tile key={t} label={t} />
-      ))}
-    </MarqueeWall>
-  ),
-}
-
-/** Vertical loop (bottom fade → bottom→top travel) inside a height cap. */
-export const Vertical: Story = {
-  render: () => (
-    <div className="w-64 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]">
-      <MarqueeWall
-        fade="bottom"
-        fadeColor="var(--color-bg-card)"
-        copyGap="var(--spacing-system-mf)"
-        className="max-h-[240px]"
-        contentClassName="flex flex-col gap-[var(--spacing-system-mf)]"
-      >
-        {TILES.map(t => (
-          <Tile key={t} label={t} />
-        ))}
-      </MarqueeWall>
-    </div>
-  ),
-}
-
-/** Two walls pinned to ONE position driver via `useMarqueeSync` — scroll
- *  stays pixel-locked (the FreeTrialCTA resolve-strip mechanism). */
-export const SyncedPair: Story = {
-  render: function SyncedPairStory() {
-    const sync = useMarqueeSync()
-    return (
-      <div className="flex flex-col gap-[var(--spacing-system-mf)]">
-        {[0, 1].map(row => (
-          <MarqueeWall
-            key={row}
-            sync={sync}
-            axis="x"
-            copyGap="var(--spacing-system-mf)"
-            className="w-full"
-            contentClassName="flex items-center gap-[var(--spacing-system-mf)]"
-          >
-            {TILES.map(t => (
-              <Tile key={t} label={t} />
-            ))}
-          </MarqueeWall>
-        ))}
-      </div>
-    )
-  },
-}
-
-/** Plain mode — the consumer's opt-out: same wall, no motion, no fades. */
-export const Plain: Story = {
-  render: () => (
-    <MarqueeWall mode="plain" className="w-full" contentClassName="flex items-center gap-[var(--spacing-system-mf)]">
-      {TILES.map(t => (
-        <Tile key={t} label={t} />
-      ))}
-    </MarqueeWall>
-  ),
-}
-
-/** Reverse travel (content moves right) with a custom-size leading fade. */
-export const Reversed: Story = {
-  render: () => (
-    <MarqueeWall
-      reverse
-      fade={['left', 'right']}
-      fadeSize={{ left: 48 }}
-      copyGap="var(--spacing-system-mf)"
-      className="w-full"
-      contentClassName="flex items-center gap-[var(--spacing-system-mf)]"
-    >
-      {TILES.map(t => (
-        <Tile key={t} label={t} />
-      ))}
-    </MarqueeWall>
-  ),
-}

package/src/stories/QuickActionWall.stories.tsx

@@ -1,116 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { QuickActionWall, interleave } from '../components/chat/quick-action-wall'
-import type { QuickActionChip } from '../components/chat/chat-quick-action-row'
-
-// A mixed IT/SEC stream (per-chip themes + lozenges) and a fae wall — the two
-// wall registers: category-classified deck panels vs agent-themed hero walls.
-const IT_ACTIONS: ReadonlyArray<QuickActionChip> = [
-  { id: 'reset-password', label: 'Reset a password', icon: { name: 'key' }, theme: 'it' },
-  { id: 'new-laptop', label: 'Provision a new laptop', icon: { name: 'laptop' }, theme: 'it' },
-  { id: 'printer', label: 'Fix the printer', icon: { name: 'printer' }, theme: 'it' },
-  { id: 'vpn', label: 'VPN will not connect', icon: { name: 'globe' }, theme: 'it' },
-  { id: 'disk-full', label: 'Disk almost full', icon: { name: 'hard-drive' }, theme: 'it' },
-  { id: 'onboard', label: 'Onboard a new hire', icon: { name: 'user-plus' }, theme: 'it' },
-]
-
-const SEC_ACTIONS: ReadonlyArray<QuickActionChip> = [
-  { id: 'phishing', label: 'Phishing report triage', icon: { name: 'fish' }, theme: 'sec' },
-  { id: 'mfa', label: 'Enforce MFA', icon: { name: 'shield-check' }, theme: 'sec' },
-  { id: 'patch', label: 'Patch the CVE', icon: { name: 'bug' }, theme: 'sec' },
-  { id: 'offboard', label: 'Revoke access on exit', icon: { name: 'user-minus' }, theme: 'sec' },
-  { id: 'edr-alert', label: 'EDR alert review', icon: { name: 'radar' }, theme: 'sec' },
-]
-
-const FAE_ACTIONS: ReadonlyArray<QuickActionChip> = [
-  { id: 'how-to-start', label: 'How to start', icon: { name: 'fae' } },
-  { id: 'connect-device', label: 'Connect device', icon: { name: 'search' }, theme: 'fae' },
-  { id: 'find-device', label: 'Find device', icon: { name: 'compass' }, theme: 'fae' },
-  { id: 'remote-connection', label: 'Remote connection', icon: { name: 'rocket' }, theme: 'fae' },
-  { id: 'run-scripts', label: 'Run scripts', icon: { name: 'bracket-curly' }, theme: 'fae' },
-  { id: 'device-software', label: 'Device software', icon: { name: 'package' }, theme: 'fae' },
-]
-
-const meta: Meta<typeof QuickActionWall> = {
-  title: 'Chat/QuickActionWall',
-  component: QuickActionWall,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'THE quick-action chip wall: a themed pile of the shared chip on the shared `<MarqueeWall>` engine. Static-with-fade when content fits (or `prefers-reduced-motion`); an endless marquee when it overflows — the axis follows the fade (`bottom` fade → content travels bottom→top; `right` fade → right→left). Themes: `fae`/`mingo` (agent identities) and `it`/`sec` (classification pair, with lozenges). Interactive chips pause the track on hover; clone-copy chips stay clickable with wrapper-level a11y. `rows` renders the brick-wall mode (stacked independent row marquees).',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="bg-ods-bg p-[var(--spacing-system-xl)]">
-        <Story />
-      </div>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof QuickActionWall>
-
-/** Vertical wall (bottom fade → bottom→top marquee): the deck-panel register —
- *  mixed IT/SEC stream with lozenges, decorative chips. */
-export const VerticalMixedStream: Story = {
-  render: () => (
-    <div className="rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]">
-      <QuickActionWall
-        chips={interleave(IT_ACTIONS, SEC_ACTIONS)}
-        lozenges
-        fade="bottom"
-        fadeColor="var(--color-bg-card)"
-        className="max-h-[180px]"
-      />
-    </div>
-  ),
-}
-
-/** Horizontal wall (right fade): the hero-tab register — a wide fae wall
- *  drifting right→left, interactive chips (hover pauses the track). */
-export const HorizontalInteractive: Story = {
-  render: () => (
-    <QuickActionWall
-      chips={FAE_ACTIONS.map((c, i) => ({ ...c, selected: i === 0, selectedAccent: 'pink', onSelect: () => console.log(c.id) }))}
-      fade="right"
-      className="w-full"
-      contentClassName="w-[1400px]"
-    />
-  ),
-}
-
-/** Plain mode — the consumer's opt-out: same chips and layout, no marquee,
- *  no blur. */
-export const Plain: Story = {
-  render: () => (
-    <div className="rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]">
-      <QuickActionWall
-        chips={interleave(IT_ACTIONS, SEC_ACTIONS)}
-        mode="plain"
-        lozenges
-        className="max-h-[180px]"
-      />
-    </div>
-  ),
-}
-
-/** Loading: skeleton chips (1:1 geometry, lozenge slots reserved) — static
- *  until real chips land. */
-export const Loading: Story = {
-  render: () => (
-    <div className="rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]">
-      <QuickActionWall
-        chips={[]}
-        loading
-        lozenges
-        fade="bottom"
-        fadeColor="var(--color-bg-card)"
-        className="max-h-[180px]"
-      />
-    </div>
-  ),
-}