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

package/src/stories/TabSelector.stories.tsx

@@ -234,7 +234,7 @@ export const VariantComparison: Story = {
           value={primaryValue}
           onValueChange={setPrimaryValue}
           items={fiveItems}
-          variant="accent"
+          variant="primary"
           label="Primary"
         />
         <TabSelector
@@ -275,6 +275,6 @@ export const WithBadges: Story = {
         ),
       },
     ];
-    return <TabSelector value={value} onValueChange={setValue} items={items} variant="accent" label="Plan" />;
+    return <TabSelector value={value} onValueChange={setValue} items={items} variant="primary" label="Plan" />;
   },
 };

package/src/stories/Tag.stories.tsx

@@ -70,9 +70,10 @@ export const WithIconAndClose: Story = {
 };
 
 export const AllVariants: Story = {
+  args: { label: 'Tag' },
   render: () => (
     <div className="flex flex-wrap gap-3">
-      <Tag variant="accent" label="Primary" />
+      <Tag variant="primary" label="Primary" />
       <Tag variant="outline" label="Outline" />
       <Tag variant="success" label="Success" />
       <Tag variant="warning" label="Warning" />
@@ -84,9 +85,10 @@ export const AllVariants: Story = {
 };
 
 export const AllWithIcons: Story = {
+  args: { label: 'Tag' },
   render: () => (
     <div className="flex flex-wrap gap-3">
-      <Tag variant="accent" icon={<Smile className="size-5" />} label="Primary" />
+      <Tag variant="primary" icon={<Smile className="size-5" />} label="Primary" />
       <Tag variant="outline" icon={<Smile className="size-5" />} label="Outline" />
       <Tag variant="success" icon={<Smile className="size-5" />} label="Success" />
       <Tag variant="warning" icon={<Smile className="size-5" />} label="Warning" />
@@ -98,9 +100,10 @@ export const AllWithIcons: Story = {
 };
 
 export const AllWithClose: Story = {
+  args: { label: 'Tag' },
   render: () => (
     <div className="flex flex-wrap gap-3">
-      <Tag variant="accent" onClose={() => {}} label="Primary" />
+      <Tag variant="primary" onClose={() => {}} label="Primary" />
       <Tag variant="outline" onClose={() => {}} label="Outline" />
       <Tag variant="success" onClose={() => {}} label="Success" />
       <Tag variant="warning" onClose={() => {}} label="Warning" />
@@ -126,9 +129,10 @@ export const DisabledWithIconAndClose: Story = {
 };
 
 export const AllDisabled: Story = {
+  args: { label: 'Tag' },
   render: () => (
     <div className="flex flex-wrap gap-3">
-      <Tag variant="accent" label="Primary" disabled />
+      <Tag variant="primary" label="Primary" disabled />
       <Tag variant="outline" label="Outline" disabled />
       <Tag variant="success" label="Success" disabled />
       <Tag variant="warning" label="Warning" disabled />
@@ -140,9 +144,10 @@ export const AllDisabled: Story = {
 };
 
 export const AllWithIconAndClose: Story = {
+  args: { label: 'Tag' },
   render: () => (
     <div className="flex flex-wrap gap-3">
-      <Tag variant="accent" icon={<Smile className="size-5" />} onClose={() => {}} label="Primary" />
+      <Tag variant="primary" icon={<Smile className="size-5" />} onClose={() => {}} label="Primary" />
       <Tag variant="outline" icon={<Smile className="size-5" />} onClose={() => {}} label="Outline" />
       <Tag variant="success" icon={<Smile className="size-5" />} onClose={() => {}} label="Success" />
       <Tag variant="warning" icon={<Smile className="size-5" />} onClose={() => {}} label="Warning" />

package/src/stories/TicketInfoSection.stories.tsx

@@ -57,12 +57,6 @@ const mockAttachments = [
   { id: '3', fileName: 'acme-teaser.mp4', fileSize: '5.6 MB', onDownload: () => {} },
 ];
 
-const mockArticles = [
-  { id: '1', title: 'OpenFrame Initial Setup Guide', description: 'Complete platform configuration including SSO integration, API connections, and core settings.' },
-  { id: '2', title: 'Data Migration Best Practices', description: 'Step-by-step process for transferring client data from existing MSP tools.' },
-  { id: '3', title: 'Admin Training Certification Program', description: 'Structured learning modules and hands-on exercises to certify client administrators.' },
-];
-
 /**
  * Collapsed state — default view.
  */
@@ -86,12 +80,18 @@ export const Expanded: Story = {
     device: { name: 'WIN-SERVER-01', icon: <Monitor className="size-4" /> },
     status: 'TECH_REQUIRED',
     expanded: true,
-    assigned: { name: 'Roman Smith', statusTag: { label: 'Status', variant: 'primary' } },
+    assigned: {
+      currentAssignee: { id: 'u1', name: 'Roman Smith' },
+      options: [
+        { value: 'u1', label: 'Roman Smith' },
+        { value: 'u2', label: 'John Doe' },
+      ],
+      onAssign: (userId) => alert(`Assign: ${userId}`),
+    },
     createdAt: '2025/07/12, 22:27',
     description: 'Goal: Reduce new client onboarding from 4 weeks to 10 days while maintaining 95% satisfaction.\n\nCore Activities:\n- Platform setup and configuration\n- Data migration and SSO integration\n- Team training and certification\n- Go-live support',
     attachments: mockAttachments,
     tags: ['Client-onboarding', 'Process-management', 'Project-template'],
-    knowledgeBaseArticles: mockArticles,
     notes: mockNotes,
     onAddNote: () => {},
     onEditNote: () => {},
@@ -116,12 +116,18 @@ export const Interactive: Story = {
         {...args}
         expanded={expanded}
         onExpand={() => setExpanded(prev => !prev)}
-        assigned={{ name: 'Roman Smith' }}
+        assigned={{
+          currentAssignee: { id: 'u1', name: 'Roman Smith' },
+          options: [
+            { value: 'u1', label: 'Roman Smith' },
+            { value: 'u2', label: 'John Doe' },
+          ],
+          onAssign: (userId) => alert(`Assign: ${userId}`),
+        }}
         createdAt="2025/07/12, 22:27"
         description="This is a sample ticket description with **markdown** content."
         attachments={mockAttachments}
         tags={['Linux', 'Production', 'High-Risk']}
-        knowledgeBaseArticles={mockArticles}
         notes={mockNotes}
         onAddNote={(text) => alert(`Add note: ${text}`)}
         onEditNote={(id) => alert(`Edit note: ${id}`)}
@@ -141,7 +147,13 @@ export const Minimal: Story = {
     device: { name: 'Unassigned' },
     status: 'ACTIVE',
     expanded: true,
-    assigned: { name: 'Unassigned' },
+    assigned: {
+      options: [
+        { value: 'u1', label: 'Roman Smith' },
+        { value: 'u2', label: 'John Doe' },
+      ],
+      onAssign: (userId) => alert(`Assign: ${userId}`),
+    },
     createdAt: '2025/01/01, 00:00',
   },
 };

package/src/stories/Toaster.stories.tsx

@@ -203,7 +203,7 @@ export const CommandApprovalLive: Story = {
     <div className="flex flex-col gap-4">
       <div className="flex flex-wrap gap-2">
         <Button
-          variant="warning"
+          variant="outline"
           onClick={() =>
             showCommandApprovalToast({
               title: 'Tech Required',
@@ -220,7 +220,7 @@ export const CommandApprovalLive: Story = {
           Fire approval toast
         </Button>
         <Button
-          variant="warning"
+          variant="outline"
           onClick={() =>
             showCommandApprovalToast({
               title: 'Tech Required',
@@ -264,7 +264,7 @@ export const LiveTriggers: Story = {
           Default
         </Button>
         <Button
-          variant="success"
+          variant="accent"
           onClick={() =>
             toast({
               variant: 'success',
@@ -276,7 +276,7 @@ export const LiveTriggers: Story = {
           Success
         </Button>
         <Button
-          variant="warning"
+          variant="outline"
           onClick={() =>
             toast({
               variant: 'warning',
@@ -301,7 +301,7 @@ export const LiveTriggers: Story = {
           Error
         </Button>
         <Button
-          variant="info"
+          variant="transparent"
           onClick={() =>
             toast({
               variant: 'info',

package/src/stories/__fixtures__/chat-card-decorator.tsx

@@ -0,0 +1,44 @@
+/**
+ * Shared Storybook decorator + helpers for chat entity-card stories.
+ *
+ * Chat entity-cards are designed to render inside the assistant's message
+ * column — a narrow, padded column over the chat background. This decorator
+ * reproduces that context so the cards lay out at their real width in
+ * isolation, without booting the chat runtime.
+ *
+ * `makeAnchorProps` builds the `{ href, onClick }` pair the cards expect for
+ * their inner `<a>`. In Storybook there is no router, so the click is
+ * neutralized with `preventDefault` to keep navigation from escaping the
+ * iframe while still exercising the anchor markup (hover, copy-link, etc.).
+ */
+
+import type React from 'react'
+
+/**
+ * Wraps a story in a chat-message-column-like container: constrained width,
+ * chat background, ODS padding. Matches the column the dispatch pipeline
+ * renders entity-cards into.
+ */
+export function ChatColumnDecorator({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen w-full bg-ods-bg p-6">
+      <div className="mx-auto w-full max-w-[420px]">{children}</div>
+    </div>
+  )
+}
+
+/**
+ * Anchor-prop pair for a card's inner `<a>`. Shape matches the per-card
+ * `*AnchorProps` interfaces (`{ href, target?, rel?, onClick? }`). The
+ * `onClick` prevents default so Storybook doesn't navigate away from the
+ * iframe when the card is clicked.
+ */
+export function makeAnchorProps(href: string): {
+  href: string
+  onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void
+} {
+  return {
+    href,
+    onClick: (e) => e.preventDefault(),
+  }
+}