@flamingo-stack/openframe-frontend-core 0.0.523 → 0.0.524-1675.4405.1

package/src/components/ui/tabs.tsx

@@ -11,37 +11,92 @@ import { cn } from "../../utils/cn"
  * shadows). This Radix-based `Tabs` set (a duplicate of `components/tabs.tsx`)
  * styles itself with legacy shadcn tokens (`bg-muted`, `text-foreground`,
  * `ring-ring`) that don't exist in ODS and is kept only for un-migrated call
- * sites. Do not use in new code.
+ * sites. Do not use in new code — EXCEPT `variant="admin-rail"`, the sanctioned
+ * ODS underline-tab styling for admin config surfaces (see {@link TabsList}).
  */
 const Tabs = TabsPrimitive.Root
 
-/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
+export type TabsVariant = 'default' | 'admin-rail'
+
+const TABS_LIST_BASE =
+  "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
+
+/**
+ * The admin underline-tab styling, baked in as a variant so call sites never
+ * stack these classes themselves: transparent list on a bordered, scrollable
+ * rail; accent underline on the active trigger; secondary → primary text on
+ * hover. Set `variant="admin-rail"` on BOTH `TabsList` and each `TabsTrigger`.
+ */
+const tabsListVariantClasses: Record<TabsVariant, string> = {
+  default: TABS_LIST_BASE,
+  // Applied ON TOP of the base (cn resolves the conflicts) so the variant
+  // renders exactly what admin call sites produced by stacking these classes.
+  'admin-rail': cn(TABS_LIST_BASE, 'inline-flex justify-start rounded-none bg-transparent h-auto p-0'),
+}
+
+const TABS_TRIGGER_BASE =
+  "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-h6 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+
+const tabsTriggerVariantClasses: Record<TabsVariant, string> = {
+  default: TABS_TRIGGER_BASE,
+  'admin-rail': cn(
+    TABS_TRIGGER_BASE,
+    'rounded-none border-b-2 border-transparent',
+    'data-[state=active]:border-ods-accent data-[state=active]:bg-transparent',
+    'px-[var(--spacing-system-l)] py-[var(--spacing-system-sf)] text-h4 whitespace-nowrap',
+    'text-ods-text-secondary data-[state=active]:text-ods-text-primary',
+    'hover:text-ods-text-primary transition-colors',
+    // Disabled tabs stay visible but inert.
+    'disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-ods-text-secondary',
+  ),
+}
+
+/** The bordered rail `admin-rail` lists sit on, scrollable when tabs overflow. */
+const ADMIN_RAIL_WRAPPER_CLASS = 'w-full border-b border-ods-border overflow-x-auto'
+
+interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  /**
+   * `admin-rail` renders the ODS underline-tab list AND wraps it in the
+   * bordered, horizontally-scrollable rail — no extra wrapper div needed at
+   * the call site.
+   */
+  variant?: TabsVariant
+}
+
+/** @deprecated for `variant="default"` — use `TabNavigation`. `variant="admin-rail"` is the sanctioned admin tabs styling. See {@link Tabs}. */
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
+  TabsListProps
+>(({ className, variant = 'default', ...props }, ref) => {
+  const list = (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(tabsListVariantClasses[variant], className)}
+      {...props}
+    />
+  )
+  if (variant === 'admin-rail') {
+    return <div className={ADMIN_RAIL_WRAPPER_CLASS}>{list}</div>
+  }
+  return list
+})
 TabsList.displayName = TabsPrimitive.List.displayName
 
-/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
+interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+  /** Match the `variant` set on the surrounding `TabsList`. */
+  variant?: TabsVariant
+}
+
+/** @deprecated for `variant="default"` — use `TabNavigation`. `variant="admin-rail"` is the sanctioned admin tabs styling. See {@link Tabs}. */
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+  TabsTriggerProps
+>(({ className, variant = 'default', ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-h6 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    )}
+    className={cn(tabsTriggerVariantClasses[variant], className)}
     {...props}
   />
 ))

package/src/stories/DropdownButton.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { fn } from 'storybook/test';
+import {
+  Copy01Icon,
+  Download01Icon,
+  PencilIcon,
+  Settings01Icon,
+  TrashBlankIcon,
+} from '../components/icons-v2-generated';
+import { DropdownButton } from '../components/ui/dropdown-button';
+
+const meta = {
+  title: 'UI/DropdownButton',
+  component: DropdownButton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [undefined, 'outline', 'accent', 'transparent', 'destructive', 'warning'],
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex min-h-[320px] items-start justify-center p-8">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DropdownButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ITEMS = [
+  { id: 'edit', label: 'Edit', icon: <PencilIcon />, onClick: fn() },
+  { id: 'duplicate', label: 'Duplicate', icon: <Copy01Icon />, onClick: fn() },
+  { id: 'delete', label: 'Delete', icon: <TrashBlankIcon />, danger: true, onClick: fn() },
+];
+
+/**
+ * The default card-colored seam trigger — label and chevron separated by a
+ * divider, whole surface one click target, chevron rotates while open.
+ */
+export const Default: Story = {
+  args: {
+    label: 'Actions',
+    items: ITEMS,
+  },
+};
+
+/**
+ * The Button-styled trigger: `variant="outline"` renders a standard `Button`
+ * (with leading icon and trailing chevron) so the dropdown matches sibling
+ * buttons in the same row. `groups` gives separated item groups; the danger
+ * row demonstrates the destructive treatment.
+ */
+export const ButtonTrigger: Story = {
+  args: {
+    label: 'Manage repo',
+    variant: 'outline',
+    icon: <Settings01Icon />,
+    groups: [
+      {
+        id: 'primary',
+        separator: true,
+        items: [
+          { id: 'edit', label: 'Edit rules', icon: <PencilIcon />, onClick: fn() },
+          { id: 'export', label: 'Export config', icon: <Download01Icon />, onClick: fn() },
+        ],
+      },
+      {
+        id: 'danger',
+        items: [{ id: 'remove', label: 'Remove repo', icon: <TrashBlankIcon />, danger: true, onClick: fn() }],
+      },
+    ],
+    onCloseAutoFocus: (e: Event) => e.preventDefault(),
+  },
+};
+
+/**
+ * Loading state (Button-styled trigger only): the spinner replaces the
+ * content in place and the menu cannot open while loading.
+ */
+export const Loading: Story = {
+  args: {
+    label: 'Manage repo',
+    variant: 'outline',
+    icon: <Settings01Icon />,
+    loading: true,
+    items: ITEMS,
+  },
+};
+
+/**
+ * Disabled — both trigger looks support it.
+ */
+export const Disabled: Story = {
+  args: {
+    label: 'Actions',
+    disabled: true,
+    items: ITEMS,
+  },
+};

package/src/stories/Field.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Field } from '../components/ui/field';
+import { Input } from '../components/ui/input';
+
+const meta = {
+  title: 'UI/Field',
+  component: Field,
+} satisfies Meta<typeof Field>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full contract in one field: label, required `*`, hover InfoHint, and a
+ * `role="alert"` error. The render-prop spreads `id` / `aria-required` /
+ * `aria-invalid` / `aria-describedby` onto the control so the label and error
+ * are actually announced.
+ */
+export const Default: Story = {
+  args: {
+    label: 'Repository name',
+    hint: 'The GitHub repository this rule set applies to. Owner/name format.',
+    required: true,
+    error: 'A repository with this name already exists.',
+    children: () => null,
+  },
+  render: args => (
+    <div className="max-w-md">
+      <Field {...args}>
+        {f => <Input {...f} placeholder="flamingo-stack/openframe" defaultValue="flamingo-stack/openframe" />}
+      </Field>
+    </div>
+  ),
+};
+
+/**
+ * Clean state — no hint, no error, not required.
+ */
+export const Plain: Story = {
+  args: {
+    label: 'Display name',
+    children: () => null,
+  },
+  render: args => (
+    <div className="max-w-md">
+      <Field {...args}>{f => <Input {...f} placeholder="Enter a name..." />}</Field>
+    </div>
+  ),
+};
+
+/**
+ * Fields in a grid row top-align naturally because labels are a single line —
+ * hints live in the hover icon, never in flow.
+ */
+export const GridRow: Story = {
+  args: {
+    label: 'Model',
+    children: () => null,
+  },
+  render: () => (
+    <div className="grid max-w-2xl grid-cols-2 gap-[var(--spacing-system-mf)]">
+      <Field label="Model" hint="The LLM used for judged rules." required>
+        {f => <Input {...f} placeholder="claude-sonnet" />}
+      </Field>
+      <Field label="Threshold" error="Must be between 0 and 100.">
+        {f => <Input {...f} defaultValue="150" />}
+      </Field>
+    </div>
+  ),
+};

package/src/stories/InfoHint.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { InfoHint } from '../components/ui/info-hint';
+
+const meta = {
+  title: 'UI/InfoHint',
+  component: InfoHint,
+  argTypes: {
+    side: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof InfoHint>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The "what does this mean?" affordance — hover the ⓘ to reveal the
+ * definition. The same text is exposed to assistive tech via
+ * `aria-describedby`, so keyboard users are not left out by the hover-only
+ * tooltip.
+ */
+export const Default: Story = {
+  args: {
+    label: 'Judged rules',
+    side: 'top',
+    children: 'Judged rules are evaluated by an LLM against the diff; deterministic rules run as code.',
+  },
+  render: args => (
+    <div className="flex min-h-[160px] items-center justify-center">
+      <span className="inline-flex items-center gap-1.5 text-h6 text-ods-text-primary">
+        Judged rules
+        <InfoHint {...args} />
+      </span>
+    </div>
+  ),
+};
+
+/**
+ * Inline in a row of labels — the `icon-inline` Button variant keeps the
+ * target small enough to sit beside a badge without swamping it.
+ */
+export const InALabelRow: Story = {
+  args: {
+    children: 'Placeholder',
+  },
+  render: () => (
+    <div className="flex min-h-[160px] flex-col items-start justify-center gap-[var(--spacing-system-sf)]">
+      <span className="inline-flex items-center gap-1.5 text-h6 text-ods-text-primary">
+        Observe
+        <InfoHint label="Observe">Runs the rule and records the outcome without blocking the PR.</InfoHint>
+      </span>
+      <span className="inline-flex items-center gap-1.5 text-h6 text-ods-text-primary">
+        Error
+        <InfoHint label="Error" side="right">
+          A failing rule blocks the merge until the finding is resolved or waived.
+        </InfoHint>
+      </span>
+    </div>
+  ),
+};

package/src/stories/JsonDetailList.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { JsonDetailList } from '../components/ui/json-detail-list';
+
+const meta = {
+  title: 'UI/JsonDetailList',
+  component: JsonDetailList,
+} satisfies Meta<typeof JsonDetailList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SAMPLE_PAYLOAD = {
+  rule_id: 'no-hardcoded-colors',
+  status: 'failed',
+  severity: 'error',
+  matched_count: 3,
+  is_blocking: true,
+  created_at: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
+  affected_files: ['components/admin/foo.tsx', 'components/admin/bar.tsx'],
+  evidence: {
+    firstMatch: {
+      file: 'components/admin/foo.tsx',
+      line: 42,
+      snippet: 'className="bg-[#212121] text-white"',
+    },
+    reviewerNote: 'Hex colors must be replaced with ODS tokens.\nSee the token rules doc.',
+  },
+};
+
+/**
+ * A nested machine payload rendered as readable prose: keys humanised,
+ * ISO dates as relative times (hover for the raw timestamp), nested objects
+ * indented behind a border, scalar arrays joined inline.
+ */
+export const Default: Story = {
+  args: {
+    data: SAMPLE_PAYLOAD,
+  },
+  render: args => (
+    <div className="max-w-xl">
+      <JsonDetailList {...args} />
+    </div>
+  ),
+};
+
+/**
+ * A JSON string parses transparently — the common case when the payload comes
+ * straight out of a text column.
+ */
+export const FromJsonString: Story = {
+  args: {
+    data: JSON.stringify(SAMPLE_PAYLOAD),
+  },
+  render: args => (
+    <div className="max-w-xl">
+      <JsonDetailList {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Unparseable input falls back to a faithful raw render instead of blowing up.
+ */
+export const RawFallback: Story = {
+  args: {
+    data: 'plain text note: retried 3 times, gave up',
+  },
+  render: args => (
+    <div className="max-w-xl">
+      <JsonDetailList {...args} />
+    </div>
+  ),
+};

package/src/stories/ModalGuardedClose.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { UnsavedChangesChip, useGuardedClose } from '../components/ui/modal-guarded-close';
+import { Button } from '../components/ui/button';
+
+/**
+ * Stories for `modal-guarded-close` — the unified dirty-state contract for
+ * modals. The chip is the visual affordance; the `useConfirm` /
+ * `useGuardedClose` hooks are exercised by the interactive story below (the
+ * chip story file covers all three exports of the module).
+ */
+const meta = {
+  title: 'UI/UnsavedChangesChip',
+  component: UnsavedChangesChip,
+} satisfies Meta<typeof UnsavedChangesChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The standing "Unsaved changes" signal for a dirty modal's footer —
+ * `role="status"`, warning color, with the WHAT-is-dirty detail on hover.
+ */
+export const Default: Story = {
+  args: {
+    detail: '2 rules changed, 1 rule removed',
+  },
+};
+
+/**
+ * In its natural habitat: a form-modal footer between the status text and the
+ * Cancel/Save buttons.
+ */
+export const InAFooterRow: Story = {
+  args: {
+    detail: 'Name and threshold edited',
+  },
+  render: args => (
+    <div className="flex w-full max-w-2xl items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]">
+      <span className="text-h6 text-ods-text-secondary">3 rules selected</span>
+      <div className="flex items-center gap-[var(--spacing-system-xsf)]">
+        <UnsavedChangesChip {...args} />
+        <Button variant="outline" size="small-legacy">
+          Cancel
+        </Button>
+        <Button size="small-legacy">Save</Button>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * `useGuardedClose` end-to-end: while dirty, Close asks the house confirm
+ * (`useConfirm` + ModalV2) before discarding; while clean, it closes
+ * immediately. Toggle the checkbox and hit Close to see both paths.
+ */
+export const GuardedCloseFlow: Story = {
+  args: {},
+  render: () => <GuardedCloseDemo />,
+};
+
+function GuardedCloseDemo() {
+  const [dirty, setDirty] = useState(true);
+  const [lastOutcome, setLastOutcome] = useState<string>('never closed');
+  const { guardedClose, dialog } = useGuardedClose(dirty, () => setLastOutcome('closed (edits discarded)'));
+  return (
+    <div className="flex max-w-md flex-col items-start gap-[var(--spacing-system-mf)]">
+      <label className="flex items-center gap-[var(--spacing-system-xsf)] text-h6 text-ods-text-primary">
+        <input type="checkbox" checked={dirty} onChange={e => setDirty(e.target.checked)} />
+        Form has unsaved edits
+      </label>
+      <div className="flex items-center gap-[var(--spacing-system-xsf)]">
+        {dirty && <UnsavedChangesChip detail="Demo edits" />}
+        <Button variant="outline" size="small-legacy" onClick={guardedClose}>
+          Close
+        </Button>
+      </div>
+      <span className="text-h6 text-ods-text-secondary">Last outcome: {lastOutcome}</span>
+      {dialog}
+    </div>
+  );
+}

package/src/stories/Tabs.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
+
+const meta = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Radix-based Tabs primitives. The default variant is legacy (deprecated — use `TabNavigation` in new code); `variant="admin-rail"` is the sanctioned ODS underline-tab styling for admin config surfaces: transparent list on a bordered scrollable rail, accent underline on the active trigger. Set the variant on BOTH `TabsList` and each `TabsTrigger`.',
+      },
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default (legacy) look — kept for un-migrated call sites.
+ */
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="max-w-xl">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+        <TabsTrigger value="history">History</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <p className="text-h6 text-ods-text-secondary">Overview content.</p>
+      </TabsContent>
+      <TabsContent value="settings">
+        <p className="text-h6 text-ods-text-secondary">Settings content.</p>
+      </TabsContent>
+      <TabsContent value="history">
+        <p className="text-h6 text-ods-text-secondary">History content.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/**
+ * The `admin-rail` variant: `TabsList variant="admin-rail"` self-wraps in the
+ * bordered, horizontally-scrollable rail; triggers get the accent underline
+ * when active and secondary → primary text on hover. Disabled tabs stay
+ * visible but inert.
+ */
+export const AdminRail: Story = {
+  render: () => (
+    <Tabs defaultValue="rules" className="max-w-2xl">
+      <TabsList variant="admin-rail">
+        <TabsTrigger variant="admin-rail" value="rules">
+          Rules
+        </TabsTrigger>
+        <TabsTrigger variant="admin-rail" value="repos">
+          Repositories
+        </TabsTrigger>
+        <TabsTrigger variant="admin-rail" value="runs">
+          Runs
+        </TabsTrigger>
+        <TabsTrigger variant="admin-rail" value="billing" disabled>
+          Billing
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="rules">
+        <p className="pt-[var(--spacing-system-mf)] text-h6 text-ods-text-secondary">Rule configuration lives here.</p>
+      </TabsContent>
+      <TabsContent value="repos">
+        <p className="pt-[var(--spacing-system-mf)] text-h6 text-ods-text-secondary">Repository bindings live here.</p>
+      </TabsContent>
+      <TabsContent value="runs">
+        <p className="pt-[var(--spacing-system-mf)] text-h6 text-ods-text-secondary">Sweep runs live here.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/**
+ * The rail scrolls horizontally when tabs overflow a narrow container —
+ * the border stays full-width under the scrolled list.
+ */
+export const AdminRailOverflow: Story = {
+  render: () => (
+    <div className="max-w-sm">
+      <Tabs defaultValue="t1">
+        <TabsList variant="admin-rail">
+          {['General', 'Data Sources', 'Executors', 'Prompts', 'Retrieval', 'Transcripts'].map((label, i) => (
+            <TabsTrigger key={label} variant="admin-rail" value={`t${i + 1}`}>
+              {label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <TabsContent value="t1">
+          <p className="pt-[var(--spacing-system-mf)] text-h6 text-ods-text-secondary">General settings.</p>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+};