@flamingo-stack/openframe-frontend-core 0.0.544 → 0.0.545

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.544",
+  "version": "0.0.545",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/ui/.modal-v2.md

@@ -1,4 +1,4 @@
-<!-- source-hash: c07730f37a88d985ee9a4914a711ec71 -->
+<!-- source-hash: 0c2069899d815c77a5b73d74742e3171 -->
 Accessible, animated modal dialog component with compound sub-components for building structured dialogs with backdrop, scroll-lock, and keyboard dismiss support.
 
 ## Key Components
@@ -72,6 +72,7 @@ function MyDialog() {
 - **Scroll lock** — `react-remove-scroll` (the same library Radix primitives use internally, so it composes with the lock a Select opened inside the modal adds on top). Rendered with `forwardProps` so no extra wrapper `<div>` lands in a flex/grid parent's flow
 - **Escape key** — document-level listener, but top-of-stack only: with stacked modals (a confirm above a form) one Escape closes just the top one, and a nested Radix layer's `preventDefault`ed Escape closes only that layer
 - **Focus** — focus moves into the panel on open, is CONTAINED there while it is topmost (with bounded re-asserts for focus dropped by node removal), Tab cycles inside it, and focus returns to the opener on close. Portaled Radix layers (`[data-radix-popper-content-wrapper]`, `[role=listbox]`, `[role=menu]`) are exempt
+- **No focus ring on the panel** — the panel is `tabIndex={-1}`, a focus TARGET rather than a control, so it carries `outline-none`. Opening by click hid the UA ring via `:focus-visible` heuristics, but a modal opened straight from a URL on page load has no preceding pointer event and the browser drew a ring around the whole dialog on every refresh. Controls inside keep their own rings
 - **Backdrop click** — calls `onClose`
 - **Two-column scroll model** — below `lg` there is one column and the outer region scrolls (identical to a single-column modal on a phone); from `lg` up the outer region is `overflow-hidden` and each column scrolls independently
 - **Software keyboard** — the wrapper pads by `--of-keyboard-inset` rather than shrinking, since neither mobile shell shrinks the layout viewport when the IME opens

package/src/components/ui/.modal.md

@@ -1,5 +1,5 @@
-<!-- source-hash: ed95b565acc4157d608a7b7a22ff8139 -->
-A deprecated modal component system providing an accessible, composable modal dialog with scroll locking, keyboard handling, and overlay dismissal. All exports are superseded by `ModalV2` from `./modal-v2`.
+<!-- source-hash: ec832e4f08292ae27c4a94e9d050afaf -->
+A deprecated modal component system providing an accessible, composable modal dialog with scroll locking, keyboard handling, and overlay dismissal. All exports are superseded by `ModalV2` from `./modal-v2`. What remains here is the compact legacy dialog used by the confirm modals that have not moved yet.
 
 ## Key Components
 
@@ -13,6 +13,15 @@ A deprecated modal component system providing an accessible, composable modal di
 
 All components use `React.forwardRef` and accept an optional `className` for Tailwind overrides.
 
+## Removed exports
+
+There is no sizing or two-column layout here any more. `size` / `MODAL_SIZE_CLASSES` and the
+`TWO_COLUMN_MODAL_BODY_CLASS` / `TWO_COLUMN_MODAL_GRID_CLASS` / `TWO_COLUMN_MODAL_COLUMN_CLASS`
+class-string constants were removed once `ModalV2` gained a `size` prop and `ModalV2TwoColumn` —
+the class strings were copied per call site and drifted, so a component owns the scroll model
+instead. Width on this legacy dialog is a plain `className` override; anything that needs a size
+variant or a two-column body belongs on `ModalV2`.
+
 ## Usage Example
 
 > ⚠️ **Deprecated.** Use [`ModalV2`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/components/modal-v2.tsx) instead.

package/src/stories/Modal.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useCallback, useState } from 'react'
+import { useState } from 'react'
 import { fn } from 'storybook/test'
 import { Autocomplete, type AutocompleteOption } from '../components/ui/autocomplete'
 import { Button } from '../components/ui/button'
@@ -12,6 +12,12 @@ const meta: ModalStoryMeta = {
   component: Modal,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Deprecated. The compact legacy dialog kept for the confirm modals that have not moved yet — new work uses `ModalV2` (UI/ModalV2), which owns the focus trap, Escape stacking, keyboard-inset handling, the `size` variants and the two-column body. Sizing and two-column layout are NOT available here: the `size` prop and the `TWO_COLUMN_MODAL_*` class-string constants this component used to export were removed once `ModalV2` gained `size` + `ModalV2TwoColumn`. Width is a plain `className` override.',
+      },
+    },
   },
   argTypes: {
     isOpen: {
@@ -82,8 +88,9 @@ const autocompleteOptions: AutocompleteOption<string>[] = [
 ]
 
 /**
- * Modal with Autocomplete inside. Uses `portalContainer` to render the dropdown
- * within the modal's DOM tree, avoiding z-index conflicts.
+ * Modal with Autocomplete inside. The Autocomplete dropdown renders inline in
+ * the modal's own DOM tree (no portal), so the panel needs `overflow-visible`
+ * for the list to escape the dialog box.
  */
 export const WithAutocomplete: Story = {
   args: {
@@ -94,11 +101,6 @@ export const WithAutocomplete: Story = {
   render: function Render(args) {
     const [isOpen, setIsOpen] = useState(args.isOpen)
     const [selected, setSelected] = useState<string[]>(['enterprise'])
-    const [modalElement, setModalElement] = useState<HTMLDivElement | null>(null)
-
-    const modalRef = useCallback((node: HTMLDivElement | null) => {
-      setModalElement(node)
-    }, [])
 
     return (
       <>
@@ -106,7 +108,6 @@ export const WithAutocomplete: Story = {
           Open Modal with Autocomplete
         </Button>
         <Modal
-          ref={modalRef}
           isOpen={isOpen}
           onClose={() => setIsOpen(false)}
           className="max-w-lg overflow-visible"

package/src/stories/ModalV2.stories.tsx

@@ -0,0 +1,421 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import {
+  ModalV2,
+  ModalV2Content,
+  ModalV2Footer,
+  ModalV2Header,
+  ModalV2Title,
+  ModalV2TwoColumn,
+} from '../components/ui/modal-v2';
+import { Textarea } from '../components/ui/textarea';
+
+type ModalV2StoryMeta = Meta<typeof ModalV2>;
+
+const meta: ModalV2StoryMeta = {
+  title: 'UI/ModalV2',
+  component: ModalV2,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The current modal. `size` picks the panel width (`default` 28rem / `medium` 42rem / `wide` 1400px); `wide` also FIXES the desktop panel height so it stops jumping as content hydrates in. Use `ModalV2TwoColumn` instead of `ModalV2Content` for two-column editors — below `lg` it is one column with a single outer scroll, from `lg` up each column scrolls independently while header and footer stay pinned.',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div className="min-h-[100dvh] bg-ods-bg p-[var(--spacing-system-xl)]">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the modal is open',
+    },
+    size: {
+      control: 'radio',
+      options: ['default', 'medium', 'wide'],
+      description:
+        'Panel width. `default` = confirms, `medium` = single-column forms, `wide` = two-column editors (also fixes the desktop height)',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom className for the modal panel',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ------------------------------------------------------------------ *
+ * Story content — deliberately long so the scroll model is reviewable.
+ * ------------------------------------------------------------------ */
+
+const VENDOR_FIELDS: { label: string; value: string }[] = [
+  { label: 'Vendor name', value: 'Acme Endpoint Security' },
+  { label: 'Slug', value: 'acme-endpoint-security' },
+  { label: 'Website', value: 'https://acme-endpoint.example' },
+  { label: 'Support email', value: 'support@acme-endpoint.example' },
+  { label: 'Headquarters', value: 'Austin, TX' },
+  { label: 'Founded', value: '2014' },
+  { label: 'Employees', value: '240' },
+  { label: 'Category', value: 'Endpoint protection' },
+  { label: 'Sub-category', value: 'EDR' },
+  { label: 'Deployment', value: 'Cloud, on-premise' },
+  { label: 'Agent platforms', value: 'Windows, macOS, Linux' },
+  { label: 'Compliance', value: 'SOC 2 Type II, ISO 27001' },
+  { label: 'Integration partner', value: 'OpenFrame' },
+  { label: 'Account manager', value: 'Dana Whitfield' },
+  { label: 'Renewal date', value: '2026-11-30' },
+  { label: 'Contract owner', value: 'Procurement' },
+];
+
+const ACTIVITY_ROWS: { title: string; meta: string; body: string }[] = [
+  {
+    title: 'Pricing refreshed',
+    meta: 'Today · 09:12',
+    body: 'Per-device tier moved from $4.20 to $4.60. Annual commitment unchanged.',
+  },
+  {
+    title: 'Feature matrix synced',
+    meta: 'Yesterday · 17:40',
+    body: 'Ransomware rollback and USB device control marked as generally available.',
+  },
+  {
+    title: 'Case study published',
+    meta: '3 days ago',
+    body: 'Regional MSP consolidated three agents onto one console after migration.',
+  },
+  {
+    title: 'Security review passed',
+    meta: '6 days ago',
+    body: 'SOC 2 Type II report re-issued; no exceptions carried forward.',
+  },
+  {
+    title: 'Support SLA updated',
+    meta: '2 weeks ago',
+    body: 'P1 response tightened to 30 minutes for partners on the managed plan.',
+  },
+  {
+    title: 'Partner tier changed',
+    meta: '3 weeks ago',
+    body: 'Promoted to Gold. Deal registration discount now applies automatically.',
+  },
+  {
+    title: 'Console redesign shipped',
+    meta: '1 month ago',
+    body: 'Alert triage moved into a single queue with saved views per technician.',
+  },
+  {
+    title: 'API v3 announced',
+    meta: '1 month ago',
+    body: 'Webhook payloads gain device tags; v2 stays supported through next year.',
+  },
+  {
+    title: 'Outage postmortem',
+    meta: '2 months ago',
+    body: 'Ingest backlog cleared in 90 minutes; regional failover added since.',
+  },
+  {
+    title: 'Onboarding docs rewritten',
+    meta: '2 months ago',
+    body: 'Silent-install flags documented for every supported RMM deployment tool.',
+  },
+];
+
+function VendorFields({ count = VENDOR_FIELDS.length }: { count?: number }) {
+  return (
+    <>
+      <p className="text-h5 text-ods-text-secondary">Vendor profile</p>
+      {VENDOR_FIELDS.slice(0, count).map(field => (
+        <Input key={field.label} label={field.label} defaultValue={field.value} className="w-full" />
+      ))}
+      <Textarea
+        label="Internal notes"
+        rows={4}
+        defaultValue="Renewal negotiated alongside the backup vendor. Keep both contracts on the same anniversary so the bundle discount survives."
+      />
+    </>
+  );
+}
+
+function ActivityRows({ count = ACTIVITY_ROWS.length }: { count?: number }) {
+  return (
+    <>
+      <p className="text-h5 text-ods-text-secondary">Recent activity</p>
+      {ACTIVITY_ROWS.slice(0, count).map(row => (
+        <div key={row.title} className="rounded-md border border-ods-border p-[var(--spacing-system-mf)]">
+          <div className="flex items-baseline justify-between gap-[var(--spacing-system-xsf)]">
+            <span className="text-h3 text-ods-text-primary">{row.title}</span>
+            <span className="text-h6 text-ods-text-tertiary">{row.meta}</span>
+          </div>
+          <p className="mt-[var(--spacing-system-xs)] text-h6 text-ods-text-secondary">{row.body}</p>
+        </div>
+      ))}
+    </>
+  );
+}
+
+/**
+ * `size="default"` (28rem) — the confirm-dialog width. Header, one short
+ * paragraph, footer.
+ */
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    size: 'default',
+    children: null,
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} variant="outline">
+          Open default modal
+        </Button>
+        <ModalV2 isOpen={isOpen} onClose={() => setIsOpen(false)} size={args.size}>
+          <ModalV2Header>
+            <ModalV2Title>Archive vendor</ModalV2Title>
+          </ModalV2Header>
+          <ModalV2Content>
+            <p className="text-h6 text-ods-text-secondary">
+              Acme Endpoint Security will stop appearing in comparisons and search. Existing references keep working and
+              you can restore it at any time.
+            </p>
+          </ModalV2Content>
+          <ModalV2Footer className="justify-end">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={() => setIsOpen(false)}>
+              Archive
+            </Button>
+          </ModalV2Footer>
+        </ModalV2>
+      </>
+    );
+  },
+};
+
+/**
+ * `size="medium"` (42rem) — the single-column form width. The body is a plain
+ * `ModalV2Content`, so header and footer stay pinned while it scrolls.
+ */
+export const Medium: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    size: 'medium',
+    children: null,
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} variant="outline">
+          Open medium modal
+        </Button>
+        <ModalV2 isOpen={isOpen} onClose={() => setIsOpen(false)} size={args.size}>
+          <ModalV2Header>
+            <ModalV2Title>Edit vendor</ModalV2Title>
+          </ModalV2Header>
+          <ModalV2Content className="space-y-[var(--spacing-system-lf)] pr-[var(--spacing-system-sf)]">
+            <VendorFields count={8} />
+          </ModalV2Content>
+          <ModalV2Footer className="justify-end">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setIsOpen(false)}>Save</Button>
+          </ModalV2Footer>
+        </ModalV2>
+      </>
+    );
+  },
+};
+
+/**
+ * `size="wide"` (1400px) with a single-column body and deliberately sparse
+ * content: on desktop the panel keeps its full `min(90dvh,100%-2rem)` height
+ * instead of hugging the content, which is what stops it jumping as an entity
+ * hydrates in. Mobile still gets a content-sized bottom sheet.
+ */
+export const Wide: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    size: 'wide',
+    children: null,
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} variant="outline">
+          Open wide modal
+        </Button>
+        <ModalV2 isOpen={isOpen} onClose={() => setIsOpen(false)} size={args.size}>
+          <ModalV2Header>
+            <ModalV2Title>Vendor loading</ModalV2Title>
+          </ModalV2Header>
+          <ModalV2Content>
+            <p className="text-h6 text-ods-text-secondary">
+              Two fields of content in a panel that keeps its full height. Compare with the medium story above, which
+              shrinks to fit its content.
+            </p>
+            <div className="mt-[var(--spacing-system-lf)] space-y-[var(--spacing-system-lf)]">
+              <Input label="Vendor name" defaultValue="Acme Endpoint Security" className="w-full" />
+              <Input label="Slug" defaultValue="acme-endpoint-security" className="w-full" />
+            </div>
+          </ModalV2Content>
+          <ModalV2Footer className="justify-end">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setIsOpen(false)}>Save</Button>
+          </ModalV2Footer>
+        </ModalV2>
+      </>
+    );
+  },
+};
+
+/**
+ * The two-column editor: `size="wide"` + `ModalV2TwoColumn`. Both columns
+ * overflow, and by different amounts — scroll the left one to the bottom and
+ * the right one does not move. Narrow the viewport below `lg` and the two
+ * collapse into a single column with one outer scrollbar.
+ */
+export const WideTwoColumn: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    size: 'wide',
+    children: null,
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} variant="outline">
+          Open two-column editor
+        </Button>
+        <ModalV2 isOpen={isOpen} onClose={() => setIsOpen(false)} size={args.size}>
+          <ModalV2Header>
+            <ModalV2Title>Acme Endpoint Security</ModalV2Title>
+            <p className="text-h6 text-ods-text-secondary">
+              16 fields on the left, 10 activity entries on the right. Each side scrolls on its own at desktop widths.
+            </p>
+          </ModalV2Header>
+          <ModalV2TwoColumn left={<VendorFields />} right={<ActivityRows />} />
+          <ModalV2Footer className="justify-end">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setIsOpen(false)}>Save</Button>
+          </ModalV2Footer>
+        </ModalV2>
+      </>
+    );
+  },
+};
+
+/**
+ * The regression case for the row sizing. The left column is very long and the
+ * right one holds two entries: with an implicit `auto` grid row the row would
+ * size to the TALLER column, the columns would get no bounded height to scroll
+ * inside, and the outer `overflow-hidden` would clip the bottom of the left
+ * column instead. `lg:grid-rows-[minmax(0,1fr)]` is what keeps the left column
+ * scrollable and the right one short.
+ */
+export const TwoColumnUnequalColumns: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    size: 'wide',
+    children: null,
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} variant="outline">
+          Open lopsided two-column editor
+        </Button>
+        <ModalV2 isOpen={isOpen} onClose={() => setIsOpen(false)} size={args.size}>
+          <ModalV2Header>
+            <ModalV2Title>Lopsided columns</ModalV2Title>
+            <p className="text-h6 text-ods-text-secondary">
+              Scroll the left column to its last field — the panel does not grow and nothing is clipped.
+            </p>
+          </ModalV2Header>
+          <ModalV2TwoColumn left={<VendorFields />} right={<ActivityRows count={2} />} />
+          <ModalV2Footer className="justify-end">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setIsOpen(false)}>Save</Button>
+          </ModalV2Footer>
+        </ModalV2>
+      </>
+    );
+  },
+};
+
+/**
+ * Header and footer live outside the scrolling region, so both stay pinned while
+ * the columns move under them. Both are given a divider here to make the seam
+ * between the pinned chrome and the scrolling body obvious during review.
+ */
+export const PinnedHeaderAndFooter: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    size: 'wide',
+    children: null,
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} variant="outline">
+          Open pinned header/footer editor
+        </Button>
+        <ModalV2 isOpen={isOpen} onClose={() => setIsOpen(false)} size={args.size}>
+          <ModalV2Header className="border-b border-ods-border pb-[var(--spacing-system-mf)]">
+            <ModalV2Title>Pinned chrome</ModalV2Title>
+            <p className="text-h6 text-ods-text-secondary">
+              Scroll either column to its end — this header and the footer below stay put, and the close button stays
+              reachable the whole time.
+            </p>
+          </ModalV2Header>
+          <ModalV2TwoColumn left={<VendorFields />} right={<ActivityRows count={6} />} />
+          <ModalV2Footer className="items-center justify-between border-t border-ods-border pt-[var(--spacing-system-mf)]">
+            <span className="text-h6 text-ods-text-secondary">Last saved 4 minutes ago</span>
+            <div className="flex gap-[var(--spacing-system-mf)]">
+              <Button variant="outline" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setIsOpen(false)}>Save</Button>
+            </div>
+          </ModalV2Footer>
+        </ModalV2>
+      </>
+    );
+  },
+};