@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223

package/src/stories/ChatTicketList.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import type React from "react";
-import type { ChatTicketItemData } from "../components/chat/chat-ticket-item";
+import type { ChatTicketItemData } from "../components/chat/entity-cards/chat-ticket-item";
 import { ChatTicketList } from "../components/chat/chat-ticket-list";
 
 const mockTickets: ChatTicketItemData[] = [

package/src/stories/DataTable.stories.tsx

@@ -21,7 +21,7 @@ import {
 import { Button } from '../components/ui/button'
 import { Checkbox } from '../components/ui/checkbox'
 import { Tag } from '../components/ui/tag'
-import { MoreActionsMenu } from '../components/ui/more-actions-menu'
+import { ActionsMenuDropdown } from '../components/ui/actions-menu'
 import { Chevron02RightIcon } from '../components/icons-v2-generated'
 
 /* ──────────────────────────────── sample data ───────────────────────────────── */
@@ -580,12 +580,14 @@ export const WithActionsColumn: Story = {
                 data-no-row-click
                 className="flex gap-2 items-center justify-end pointer-events-auto"
               >
-                <MoreActionsMenu
-                  items={[
-                    { label: 'Ping', onClick: () => alert(`Ping ${device.hostname}`) },
-                    { label: 'Restart', onClick: () => alert(`Restart ${device.hostname}`) },
-                    { label: 'Remove', onClick: () => alert(`Remove ${device.hostname}`), danger: true },
-                  ]}
+                <ActionsMenuDropdown
+                  groups={[{
+                    items: [
+                      { id: 'ping', label: 'Ping', onClick: () => alert(`Ping ${device.hostname}`) },
+                      { id: 'restart', label: 'Restart', onClick: () => alert(`Restart ${device.hostname}`) },
+                      { id: 'remove', label: 'Remove', onClick: () => alert(`Remove ${device.hostname}`), danger: true },
+                    ],
+                  }]}
                 />
               </div>
             )
@@ -1328,12 +1330,14 @@ export const KitchenSink: Story = {
                 data-no-row-click
                 className="flex gap-2 items-center justify-end pointer-events-auto"
               >
-                <MoreActionsMenu
-                  items={[
-                    { label: 'Ping', onClick: () => alert(`Ping ${device.hostname}`) },
-                    { label: 'Restart', onClick: () => alert(`Restart ${device.hostname}`) },
-                    { label: 'Remove', onClick: () => alert(`Remove ${device.hostname}`), danger: true },
-                  ]}
+                <ActionsMenuDropdown
+                  groups={[{
+                    items: [
+                      { id: 'ping', label: 'Ping', onClick: () => alert(`Ping ${device.hostname}`) },
+                      { id: 'restart', label: 'Restart', onClick: () => alert(`Restart ${device.hostname}`) },
+                      { id: 'remove', label: 'Remove', onClick: () => alert(`Remove ${device.hostname}`), danger: true },
+                    ],
+                  }]}
                 />
               </div>
             )

package/src/stories/EmbeddableChat.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { within, userEvent } from 'storybook/test'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import React, { useMemo } from 'react'
 import {
@@ -6,9 +7,19 @@ import {
   type ChatRuntime,
 } from '../contexts/chat-runtime-context'
 import { EmbeddableChat } from '../components/chat/embeddable-chat'
-import type { UseNatsChatAdapterConfig } from '../components/chat/hooks/use-nats-chat-adapter'
+import type {
+  UseNatsChatAdapterConfig,
+  FetchDialogsResult,
+  FetchDialogMessagesResult,
+} from '../components/chat/hooks/use-nats-chat-adapter'
 import type { SlashCommandSummary } from '../components/chat/hooks/use-slash-commands'
 import type { DialogItem } from '../components/chat/types/component.types'
+import type { MingoQuickAction } from '../components/chat/mingo-welcome'
+import {
+  BracketCurlyIcon,
+  Rocket01Icon,
+  SearchIcon,
+} from '../components/icons-v2-generated'
 
 // =============================================================================
 // Stub commands endpoint — module-level constant referenced both by the
@@ -104,6 +115,42 @@ const SAMPLE_DIALOGS: ReadonlyArray<DialogItem> = [
   { id: 'd8', title: 'SQL Server maintenance plan troubleshooting' },
 ]
 
+// Caller-provided Mingo quick-action chips — rendered after the built-in
+// "Start Guide Chat" chip in the welcome/returning-user view. `onClick` just
+// logs; the story demonstrates the chip row layout, not the action behaviour.
+const SAMPLE_QUICK_ACTIONS: ReadonlyArray<MingoQuickAction> = [
+  {
+    id: 'weekly-log-summary',
+    label: 'Weekly Log Summary',
+    icon: <SearchIcon size={16} />,
+    onClick: () => console.log('[story] quick action: weekly log summary'),
+  },
+  {
+    id: 'run-script',
+    label: 'Run a script',
+    icon: <BracketCurlyIcon size={16} />,
+    onClick: () => console.log('[story] quick action: run a script'),
+  },
+  {
+    id: 'device-health',
+    label: 'Device health check',
+    icon: <Rocket01Icon size={16} />,
+    onClick: () => console.log('[story] quick action: device health check'),
+  },
+  {
+    id: 'summarize-tickets',
+    label: 'Summarize open tickets',
+    icon: <SearchIcon size={16} />,
+    onClick: () => console.log('[story] quick action: summarize tickets'),
+  },
+  {
+    id: 'patch-status',
+    label: 'Patch status report',
+    icon: <BracketCurlyIcon size={16} />,
+    onClick: () => console.log('[story] quick action: patch status report'),
+  },
+]
+
 /** Mingo config whose `fetchDialogs` resolves a single page of history (with
  *  timestamps so the list splits into Today / Yesterday) plus working
  *  rename/archive callbacks — used by the returning-user story. */
@@ -149,6 +196,69 @@ function createMockMingoConfigWithDialogs(): UseNatsChatAdapterConfig {
   }
 }
 
+/**
+ * A promise that never settles — keeps whichever adapter loading flag it
+ * backs pinned `true`, so the loading UI stays on screen for the story
+ * (no fake timers, no flicker to a resolved state).
+ */
+const pending = <T,>(): Promise<T> => new Promise<T>(() => {})
+
+/**
+ * Chats-loading config — `fetchDialogs` never resolves, so the adapter keeps
+ * `isDialogsLoading` true with an empty list. EmbeddableChat reports
+ * `dialogsInitialLoading` and the Mingo empty state shows its history
+ * skeleton instead of the new/returning-user greeting.
+ */
+function createMockMingoConfigChatsLoading(): UseNatsChatAdapterConfig {
+  return {
+    ...createMockMingoConfig(),
+    fetchDialogs: () => pending<FetchDialogsResult>(),
+  }
+}
+
+/**
+ * Chat-loading config — the dialog list resolves normally, but
+ * `fetchDialogMessages` never resolves. Paired with the story's `play`
+ * (which opens the first dialog), this pins `isMessagesLoading` with no
+ * messages yet, so the conversation view shows the message-list skeleton.
+ */
+function createMockMingoConfigChatLoading(): UseNatsChatAdapterConfig {
+  return {
+    ...createMockMingoConfigWithDialogs(),
+    fetchDialogMessages: () => pending<FetchDialogMessagesResult>(),
+  }
+}
+
+/**
+ * Chats-error config — `fetchDialogs` rejects, so the adapter flips
+ * `dialogsError` true with an empty list. EmbeddableChat reports
+ * `dialogsLoadError`, and the Mingo empty state shows its load-error + retry
+ * affordance instead of the greeting (distinguishing a backend failure from a
+ * genuinely empty list). `reloadDialogs` re-invokes this — the retry path is
+ * wired, it just keeps failing against the unavailable mock backend.
+ */
+function createMockMingoConfigChatsError(): UseNatsChatAdapterConfig {
+  return {
+    ...createMockMingoConfig(),
+    fetchDialogs: () =>
+      Promise.reject(new Error('Story: dialog list backend unavailable')),
+  }
+}
+
+/**
+ * Archive-empty config — a populated dialog list (so the header's archive
+ * button is present), but `fetchArchivedDialogs` resolves an empty page. Paired
+ * with the story's `play` (which opens the archive page), this renders the
+ * archive page's empty state.
+ */
+function createMockMingoConfigArchiveEmpty(): UseNatsChatAdapterConfig {
+  return {
+    ...createMockMingoConfigWithDialogs(),
+    fetchArchivedDialogs: () =>
+      Promise.resolve({ dialogs: [], nextCursor: null }),
+  }
+}
+
 // =============================================================================
 // Mocked slash-commands — fed into the empty-state card list (Figma node
 // 7363:205938) via a `window.fetch` override below. Each entry must set
@@ -452,6 +562,9 @@ export const BothModes: Story = {
  * returning-user form: the "New to OpenFrame?" notification is hidden and the
  * "Start Guide Chat" chip drops from the accent yellow to the muted outline
  * style. The dialog list itself renders inline via MingoChatHistory.
+ *
+ * Caller-provided `quickActions` chips render in the pinned chip row after
+ * "Start Guide Chat" — the first is `primary` (accent), the rest `outline`.
  */
 export const ReturningUser: Story = {
   render: (args) => (
@@ -464,7 +577,126 @@ export const ReturningUser: Story = {
       defaultActiveMode="mingo"
       defaultOpen
       showInternalTrigger={false}
+      mingoWelcome={{ quickActions: SAMPLE_QUICK_ACTIONS }}
     />
   ),
   args: {},
 }
+
+// =============================================================================
+// 5. Chats loading — dialog list fetch in flight
+// =============================================================================
+
+/**
+ * Dialog-list loading state. The mock `fetchDialogs` never resolves, so the
+ * adapter keeps `isDialogsLoading` true with an empty list. The Mingo empty
+ * state renders its history skeleton (instead of the new/returning-user
+ * greeting), matching what the panel shows on first open before the chat list
+ * lands.
+ */
+export const ChatsLoading: Story = {
+  render: (args) => (
+    <EmbeddableChat
+      {...args}
+      modes={{
+        mingo: createMockMingoConfigChatsLoading(),
+      }}
+      defaultActiveMode="mingo"
+      defaultOpen
+      showInternalTrigger={false}
+    />
+  ),
+  args: {},
+}
+
+// =============================================================================
+// 6. Chat loading — opening a dialog whose history is in flight
+// =============================================================================
+
+/**
+ * Single-conversation loading state. The dialog list resolves, but
+ * `fetchDialogMessages` never resolves. The `play` step opens the first
+ * dialog, so the panel flips to the conversation view and shows the
+ * message-list skeleton (`isMessagesLoading` with no messages yet) — the
+ * "opening a chat" loading frame before bubbles stream in.
+ */
+export const ChatLoading: Story = {
+  render: (args) => (
+    <EmbeddableChat
+      {...args}
+      modes={{
+        mingo: createMockMingoConfigChatLoading(),
+      }}
+      defaultActiveMode="mingo"
+      defaultOpen
+      showInternalTrigger={false}
+    />
+  ),
+  args: {},
+  play: async () => {
+    // The drawer portals to <body>, so query the document, not the canvas.
+    const body = within(document.body)
+    const row = await body.findByText(SAMPLE_DIALOGS[0].title)
+    await userEvent.click(row)
+  },
+}
+
+// =============================================================================
+// 7. Chats error — dialog list fetch failed
+// =============================================================================
+
+/**
+ * Dialog-list error state. The mock `fetchDialogs` rejects, so the adapter
+ * sets `dialogsError` with an empty list. EmbeddableChat reports
+ * `dialogsLoadError` and the Mingo empty state shows its error message + retry
+ * button instead of the greeting — what the panel shows when the chat backend
+ * is unreachable. Clicking retry re-runs the (still-failing) fetch.
+ */
+export const ChatsError: Story = {
+  render: (args) => (
+    <EmbeddableChat
+      {...args}
+      modes={{
+        mingo: createMockMingoConfigChatsError(),
+      }}
+      defaultActiveMode="mingo"
+      defaultOpen
+      showInternalTrigger={false}
+    />
+  ),
+  args: {},
+}
+
+// =============================================================================
+// 8. Archive empty — archive page with no archived chats
+// =============================================================================
+
+/**
+ * Archive page empty state. The dialog list is populated (so the header's
+ * archive button renders), but `fetchArchivedDialogs` resolves an empty page.
+ * The `play` step clicks the archive button to open the Chat Archive page,
+ * which — with nothing archived — shows its centred empty state (icon + title +
+ * hint) rather than the dialog list or skeleton.
+ */
+export const ArchiveEmpty: Story = {
+  render: (args) => (
+    <EmbeddableChat
+      {...args}
+      modes={{
+        mingo: createMockMingoConfigArchiveEmpty(),
+      }}
+      defaultActiveMode="mingo"
+      defaultOpen
+      showInternalTrigger={false}
+    />
+  ),
+  args: {},
+  play: async () => {
+    // The drawer portals to <body>, so query the document, not the canvas.
+    const body = within(document.body)
+    const archiveButton = await body.findByRole('button', {
+      name: 'Chat archive',
+    })
+    await userEvent.click(archiveButton)
+  },
+}

package/src/stories/MingoInfoCard.stories.tsx

@@ -0,0 +1,193 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { MingoInfoCard } from '../components/chat/mingo-info-card'
+import { MonitorIcon } from '../components/icons-v2-generated/devices/monitor-icon'
+import { Copy01Icon } from '../components/icons-v2-generated/documents/copy-01-icon'
+import { TrashIcon } from '../components/icons-v2-generated/interface/trash-icon'
+
+const AVATAR_SRC = 'https://i.pravatar.cc/80?img=12'
+
+const SAMPLE_MENU = [
+  {
+    items: [
+      {
+        id: 'copy',
+        label: 'Copy link',
+        icon: <Copy01Icon size={16} />,
+        onClick: () => {
+          // eslint-disable-next-line no-console
+          console.log('[story] copy link')
+        },
+      },
+      {
+        id: 'remove',
+        label: 'Remove',
+        icon: <TrashIcon size={16} />,
+        danger: true,
+        onClick: () => {
+          // eslint-disable-next-line no-console
+          console.log('[story] remove')
+        },
+      },
+    ],
+  },
+]
+
+const meta: Meta<typeof MingoInfoCard> = {
+  title: 'Chat/MingoInfoCard',
+  component: MingoInfoCard,
+  parameters: {
+    // `fullscreen` (not `centered`): `centered` shrinks the wrapper to the
+    // content, so the card's `w-full` resolves against a content-sized box and
+    // never stretches. A full-width block container lets the card fill 100% and
+    // shrink with the canvas — resize the Storybook viewport to see it reflow.
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Figma node `2410:6007`. Horizontal info row: a leading 40px avatar (`imageSrc`) or boxed glyph (`icon`), a title + optional description column, an optional status pill, and a trailing "⋯" overflow menu separated by a vertical divider. Background `ods-card`, border `ods-border`, `rounded-md`. The card is `w-full` — it fills whatever block container it is placed in.',
+      },
+    },
+  },
+  argTypes: {
+    icon: { control: false },
+    menuGroups: { control: false },
+    onClick: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full bg-ods-bg p-6">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// =============================================================================
+// The two Figma media variants
+// =============================================================================
+
+export const WithImage: Story = {
+  args: {
+    title: 'Card Title',
+    description: 'Card Description',
+    imageSrc: AVATAR_SRC,
+    imageAlt: 'Acme Corp',
+    status: { label: 'Status' },
+    menuGroups: SAMPLE_MENU,
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    title: 'Card Title',
+    description: 'Card Description',
+    icon: <MonitorIcon size={24} />,
+    status: { label: 'Status' },
+    menuGroups: SAMPLE_MENU,
+  },
+}
+
+// =============================================================================
+// Optional-element permutations
+// =============================================================================
+
+export const WithoutStatus: Story = {
+  args: {
+    title: 'Card Title',
+    description: 'Card Description',
+    icon: <MonitorIcon size={24} />,
+    menuGroups: SAMPLE_MENU,
+  },
+}
+
+export const WithoutDescription: Story = {
+  args: {
+    title: 'Card Title',
+    imageSrc: AVATAR_SRC,
+    imageAlt: 'Acme Corp',
+    status: { label: 'Status' },
+    menuGroups: SAMPLE_MENU,
+  },
+}
+
+export const WithoutMenu: Story = {
+  args: {
+    title: 'Card Title',
+    description: 'Card Description',
+    icon: <MonitorIcon size={24} />,
+    status: { label: 'Status' },
+  },
+}
+
+export const Clickable: Story = {
+  args: {
+    title: 'Card Title',
+    description: 'Click anywhere on the row',
+    imageSrc: AVATAR_SRC,
+    imageAlt: 'Acme Corp',
+    status: { label: 'Online' },
+    menuGroups: SAMPLE_MENU,
+    onClick: () => {
+      // eslint-disable-next-line no-console
+      console.log('[story] card clicked')
+    },
+  },
+}
+
+export const StatusVariants: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The `status.variant` maps to the shared `Tag` palette — `success` (default), `warning`, `error`, `grey`.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <MingoInfoCard
+        title="Production"
+        description="All systems operational"
+        icon={<MonitorIcon size={24} />}
+        status={{ label: 'Online', variant: 'success' }}
+        menuGroups={SAMPLE_MENU}
+      />
+      <MingoInfoCard
+        title="Staging"
+        description="Elevated latency detected"
+        icon={<MonitorIcon size={24} />}
+        status={{ label: 'Degraded', variant: 'warning' }}
+        menuGroups={SAMPLE_MENU}
+      />
+      <MingoInfoCard
+        title="Legacy host"
+        description="Unreachable for 12 minutes"
+        icon={<MonitorIcon size={24} />}
+        status={{ label: 'Offline', variant: 'error' }}
+        menuGroups={SAMPLE_MENU}
+      />
+      <MingoInfoCard
+        title="Archived host"
+        description="Decommissioned last quarter"
+        icon={<MonitorIcon size={24} />}
+        status={{ label: 'Archived', variant: 'grey' }}
+        menuGroups={SAMPLE_MENU}
+      />
+    </div>
+  ),
+}
+
+export const LongContentTruncates: Story = {
+  args: {
+    title: 'Some Really Long Card Title That Should Truncate Cleanly Without Wrapping',
+    description:
+      'An equally long description line that also truncates instead of pushing the status pill and overflow menu off the card',
+    imageSrc: AVATAR_SRC,
+    imageAlt: 'Acme Corp',
+    status: { label: 'Status' },
+    menuGroups: SAMPLE_MENU,
+  },
+}

package/src/stories/MingoOnboardingCard.stories.tsx

@@ -61,7 +61,7 @@ export const WithoutDescription: Story = {
 
 export const WithoutSlashCommand: Story = {
   args: {
-    icon: <Rocket01Icon size={16} />,
+    icon: <Rocket02Icon size={16} />,
     title: 'Get started',
     description: 'Browse onboarding guides and quick wins',
   },

package/src/stories/Modal.stories.tsx

@@ -116,6 +116,7 @@ export const WithAutocomplete: Story = {
           </ModalHeader>
           <ModalContent className="px-6 py-4">
             <Autocomplete
+              multiple
               options={autocompleteOptions}
               value={selected}
               onChange={setSelected}

package/src/stories/NotificationDrawer.stories.tsx

@@ -24,6 +24,17 @@ const meta = {
       },
     },
   },
+  args: {
+    notification: {
+      id: 'preview',
+      variant: 'default',
+      title: 'Preview',
+      description: 'Preview notification',
+      createdAt: 0,
+      read: true,
+    },
+    onComplete: () => {},
+  },
 } satisfies Meta<typeof NotificationTile>;
 
 export default meta;
@@ -264,7 +275,7 @@ function PlaygroundControls() {
 
       <div className="flex flex-wrap gap-2">
         <Button
-          variant="success"
+          variant="accent"
           onClick={() =>
             fire('success', 'Device Deployment Complete', 'HP EliteBook deployed to Marketing Dept')
           }
@@ -280,13 +291,13 @@ function PlaygroundControls() {
           Fire error
         </Button>
         <Button
-          variant="warning"
+          variant="outline"
           onClick={() => fire('warning', 'Tech Required', 'Approval is required to execute the command.')}
         >
           Fire warning
         </Button>
         <Button
-          variant="info"
+          variant="transparent"
           onClick={() => fire('info', 'Update available', 'A new agent version is ready to install.')}
         >
           Fire info

package/src/stories/PageActions.stories.tsx

@@ -16,7 +16,7 @@ PageActions component for displaying action buttons in page headers.
 **Three variants:**
 1. \`icon-buttons\` - Buttons with icons, collapses to dropdown menu on mobile
 2. \`primary-buttons\` - Primary + outline buttons, fixed to bottom on mobile
-3. \`menu-primary\` - MoreActionsMenu ("...") + primary button on desktop, all actions expand to fixed bottom bar on mobile
+3. \`menu-primary\` - ActionsMenuDropdown ("...") + primary button on desktop, all actions expand to fixed bottom bar on mobile
 
 Use with \`PageContainer\` headerActions prop for consistent page layouts.
         `,
@@ -52,7 +52,7 @@ type Story = StoryObj<typeof meta>
 
 /**
  * Icon buttons variant - used for list pages like Scripts.
- * Shows buttons with icons on desktop, collapses to MoreActionsMenu on mobile.
+ * Shows buttons with icons on desktop, collapses to ActionsMenuDropdown on mobile.
  */
 export const IconButtons: Story = {
   args: {
@@ -151,7 +151,7 @@ export const SingleIconButton: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'When there is only one action in icon-buttons variant, it displays as an icon button on mobile instead of collapsing to a MoreActionsMenu.',
+        story: 'When there is only one action in icon-buttons variant, it displays as an icon button on mobile instead of collapsing to an ActionsMenuDropdown.',
       },
     },
   },
@@ -207,7 +207,7 @@ export const WithStates: Story = {
 }
 
 /**
- * Menu + primary variant - shows MoreActionsMenu ("...") + primary button on desktop.
+ * Menu + primary variant - shows ActionsMenuDropdown ("...") + primary button on desktop.
  * On mobile all actions expand into a fixed bottom bar.
  */
 export const MenuPrimary: Story = {

package/src/stories/PageContainer.stories.tsx

@@ -85,7 +85,7 @@ export const ListPage: Story = {
     title: 'Devices',
     subtitle: '24 devices found',
     actions: [
-      { label: 'Add Device', onClick: () => {}, icon: <Plus className="w-5 h-5" />, variant: 'primary' },
+      { label: 'Add Device', onClick: () => {}, icon: <Plus className="w-5 h-5" />, variant: 'accent' },
     ],
     children: <PlaceholderContent />,
   },
@@ -101,7 +101,7 @@ export const ListPageMultipleActions: Story = {
     subtitle: 'Manage your scripts',
     actions: [
       { label: 'Edit', onClick: () => {}, icon: <Edit className="w-5 h-5" />, variant: 'outline' },
-      { label: 'Create Script', onClick: () => {}, icon: <Plus className="w-5 h-5" />, variant: 'primary' },
+      { label: 'Create Script', onClick: () => {}, icon: <Plus className="w-5 h-5" />, variant: 'accent' },
     ],
     children: <PlaceholderContent />,
   },
@@ -133,7 +133,7 @@ export const DetailPageWithActions: Story = {
     backButton: { onClick: () => {} },
     actions: [
       { label: 'Delete', onClick: () => {}, icon: <Trash2 className="w-5 h-5" />, variant: 'outline' },
-      { label: 'Run Script', onClick: () => {}, variant: 'primary' },
+      { label: 'Run Script', onClick: () => {}, variant: 'accent' },
     ],
     children: <PlaceholderContent />,
   },
@@ -151,7 +151,7 @@ export const FormPage: Story = {
     backButton: { label: 'Cancel', onClick: () => {} },
     actions: [
       { label: 'Save Draft', onClick: () => {}, variant: 'outline' },
-      { label: 'Publish', onClick: () => {}, variant: 'primary' },
+      { label: 'Publish', onClick: () => {}, variant: 'accent' },
     ],
     children: (
       <div className="flex flex-col gap-6">
@@ -208,7 +208,7 @@ export const WithHeaderActions: Story = {
       <Button variant="outline" size="small-legacy">Export</Button>
     ),
     actions: [
-      { label: 'Add Device', onClick: () => {}, icon: <Plus className="w-5 h-5" />, variant: 'primary' },
+      { label: 'Add Device', onClick: () => {}, icon: <Plus className="w-5 h-5" />, variant: 'accent' },
     ],
     children: <PlaceholderContent />,
   },

package/src/stories/PageLayout.stories.tsx

@@ -133,7 +133,7 @@ export const WithSubtitleOnly: Story = {
       {
         label: 'Add Payment Method',
         onClick: fn(),
-        variant: 'primary',
+        variant: 'accent',
         icon: <PlusCircleIcon size={24} />,
       },
     ],