@flamingo-stack/openframe-frontend-core 0.0.518-1660.4292.1 → 0.0.518-1663.4312.1

package/src/components/chat/utils/__tests__/history-merge.test.ts

@@ -930,3 +930,102 @@ describe('mid-stream refetch (turn partially persisted)', () => {
     expect(ids(merged)).toEqual([U0.id, A0.id, PERSISTED_PARTIAL.id, unrelatedLive.id])
   })
 })
+
+describe('ordering of surviving realtime messages', () => {
+  // The merge concatenates: all persisted history, then every realtime message
+  // the coverage rules kept, each side in its own order. These pin that
+  // contract, which nothing asserted before — the suite tested only WHICH
+  // messages survive, never where they land — and which an attempt to
+  // chronologically interleave the two sides repeatedly broke.
+  const H_U0: TestMessage = { ...U0, streamSeq: 5 }
+  const H_A0: TestMessage = { ...A0, streamSeq: 10 }
+  /**
+   * Sent from a notification while the window was away, and persisted. NO
+   * `streamSeq`: the backend does not stamp user MESSAGE_REQUEST rows, which is
+   * the missing signal that makes interleaving guesswork.
+   */
+  const AWAY_U: TestMessage = {
+    id: 'bbbb0001',
+    role: 'user',
+    content: 'replied from a notification',
+    timestamp: t(3000),
+  }
+  /** Mingo's answer to it. Assistant rows DO carry a sequence. */
+  const AWAY_A: TestMessage = {
+    id: 'bbbb0002',
+    role: 'assistant',
+    content: txt('answered while the window was away'),
+    timestamp: t(3100),
+    streamSeq: 80,
+  }
+
+  it('appends surviving realtime messages after all persisted history', () => {
+    // A technician direct message the snapshot has not caught up with. Its own
+    // role's persisted max (H_U0, seq 5) is below it, so coverage keeps it.
+    const unpersistedDirect: TestMessage = {
+      id: 'direct-1500-old',
+      role: 'user',
+      content: 'a direct message history has not persisted yet',
+      timestamp: t(1500),
+      streamSeq: 40,
+    }
+    const merged = mergeHistoryWithRealtime({
+      processedHistory: [H_U0, H_A0, AWAY_U, AWAY_A],
+      existingMessages: [H_U0, H_A0, unpersistedDirect],
+      streamingMessageId: null,
+      historyFetchedAt: 9000,
+      historyMaxStreamSeq: 80,
+      realtimeSeenStreamSeq: 40,
+    })
+
+    expect(ids(merged)).toEqual([H_U0.id, H_A0.id, AWAY_U.id, AWAY_A.id, unpersistedDirect.id])
+  })
+
+  it('keeps survivors in store order, sequence or no sequence', () => {
+    // The guard against reordering the two kinds against each other: an
+    // optimistic bubble carries no sequence and a replayed direct message does,
+    // and sorting by sequence would render the user's question below the reply
+    // that came after it.
+    const optimistic: TestMessage = {
+      id: 'optimistic-9400-x',
+      role: 'user',
+      content: 'just typed, no seq of its own',
+      timestamp: t(9400),
+    }
+    const laterDirect: TestMessage = {
+      id: 'direct-9500-x',
+      role: 'user',
+      content: 'and a direct message after it',
+      timestamp: t(9500),
+      streamSeq: 40,
+    }
+    const merged = mergeHistoryWithRealtime({
+      processedHistory: [H_U0, H_A0, AWAY_U, AWAY_A],
+      existingMessages: [H_U0, H_A0, optimistic, laterDirect],
+      streamingMessageId: null,
+      // Before either was minted, so neither can be in the snapshot.
+      historyFetchedAt: 9000,
+      historyMaxStreamSeq: 80,
+      realtimeSeenStreamSeq: 40,
+    })
+
+    expect(ids(merged)).toEqual([H_U0.id, H_A0.id, AWAY_U.id, AWAY_A.id, optimistic.id, laterDirect.id])
+  })
+
+  it('keeps history in snapshot order even when its sequences do not climb', () => {
+    // The snapshot is the server's account of the conversation; the merge is
+    // not entitled to second-guess it from a `streamSeq` that looks out of
+    // order, which is what any sort of the two sides together would do.
+    const outOfOrder: TestMessage = { ...H_A0, id: 'aaaa0009', streamSeq: 3 }
+    const merged = mergeHistoryWithRealtime({
+      processedHistory: [H_U0, outOfOrder, AWAY_U, AWAY_A],
+      existingMessages: [H_U0],
+      streamingMessageId: null,
+      historyFetchedAt: 9000,
+      historyMaxStreamSeq: 80,
+      realtimeSeenStreamSeq: 0,
+    })
+
+    expect(ids(merged)).toEqual([H_U0.id, outOfOrder.id, AWAY_U.id, AWAY_A.id])
+  })
+})

package/src/components/check-circle-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+interface CheckCircleIconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string
+}
+
+export function CheckCircleIcon({ className, color = '#1A1A1A', ...props }: CheckCircleIconProps) {
+  return (
+    <svg 
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      color={color}
+      {...props}
+    >
+      <path 
+        d="M20.8745 12.0005C20.8745 7.09912 16.9018 3.12526 12.0005 3.125C7.09896 3.125 3.125 7.09896 3.125 12.0005C3.12526 16.9018 7.09912 20.8745 12.0005 20.8745C16.9016 20.8742 20.8742 16.9016 20.8745 12.0005ZM23.1245 12.0005C23.1242 18.1443 18.1443 23.1242 12.0005 23.1245C5.85648 23.1245 0.875264 18.1444 0.875 12.0005C0.875 5.85632 5.85632 0.875 12.0005 0.875C18.1444 0.875264 23.1245 5.85648 23.1245 12.0005Z" 
+        fill={color}
+      />
+      <path 
+        d="M15.7046 8.20459C16.1439 7.76525 16.8561 7.76525 17.2954 8.20459C17.7347 8.64393 17.7347 9.35607 17.2954 9.79541L11.2954 15.7954C10.8561 16.2347 10.1439 16.2347 9.70459 15.7954L6.70459 12.7954L6.62695 12.7104C6.26649 12.2686 6.29268 11.6165 6.70459 11.2046C7.1165 10.7927 7.76858 10.7665 8.21045 11.127L8.29541 11.2046L10.5 13.4092L15.7046 8.20459Z" 
+        fill={color}
+      />
+    </svg>
+  )
+} 

package/src/components/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+
+import { cn } from "../utils/cn"
+import { CheckboxCheckmarkIcon } from "./icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckboxCheckmarkIcon size={10} />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/src/components/claude-icon.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React from 'react';
+
+interface ClaudeIconProps extends React.SVGProps<SVGSVGElement> {}
+
+export function ClaudeIcon(props: ClaudeIconProps) {
+  return (
+    <svg
+      height="1em"
+      width="1em"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Claude"
+      {...props}
+    >
+      <path
+        d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
+        fill="#D97757"
+        fillRule="nonzero"
+      />
+    </svg>
+  );
+} 

package/src/components/coins-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface CoinsIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CoinsIcon: React.FC<CoinsIconProps> = ({ 
+  className = "", 
+  width = 20, 
+  height = 20 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 20 20" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <circle cx="7" cy="8" r="4" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+      <circle cx="13" cy="12" r="4" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+      <path d="M9 6c0-1.1.9-2 2-2s2 .9 2 2" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+      <path d="M15 10c0-1.1.9-2 2-2s2 .9 2 2" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+    </svg>
+  );
+}; 

package/src/components/command.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "../utils/cn"
+import { Dialog, DialogContent } from "./ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-h6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-h6"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

package/src/components/community-hub-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface CommunityHubIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CommunityHubIcon: React.FC<CommunityHubIconProps> = ({ 
+  className = "", 
+  width = 19, 
+  height = 16 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 19 16" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M2.26831 10.5006C2.7145 10.2384 3.28877 10.3878 3.55127 10.8339C3.81375 11.28 3.66521 11.8542 3.21924 12.1168C2.7743 12.3786 2.44807 12.8134 2.32568 13.3266C2.76754 13.4022 3.10443 13.786 3.10449 14.2494C3.10449 14.7349 2.73505 15.1341 2.26221 15.182L2.16699 15.1869H1.80933C1.02862 15.1868 0.395752 14.5541 0.395752 13.7733C0.395757 12.3777 1.14996 11.1587 2.26831 10.5006ZM15.812 4.24941C15.8119 3.75414 15.582 3.31222 15.22 3.02504L15.0576 2.91152L14.9771 2.85781C14.5977 2.5719 14.489 2.03884 14.7402 1.62367C14.9917 1.20828 15.5145 1.05828 15.9438 1.26235L16.0281 1.30751L16.21 1.42592C17.1011 2.04549 17.6869 3.07846 17.687 4.24941C17.687 5.49852 17.0207 6.59175 16.0281 7.19252L15.9438 7.23769C15.5145 7.44157 14.9916 7.29049 14.7402 6.87514C14.4724 6.43223 14.6148 5.85655 15.0576 5.58852L15.22 5.47499C15.5823 5.18777 15.812 4.74494 15.812 4.24941ZM1.64575 4.24941C1.64584 2.99822 2.31536 1.90392 3.31079 1.30385C3.75403 1.03697 4.33009 1.17947 4.59741 1.62245C4.86469 2.06583 4.72213 2.64295 4.27881 2.9103C3.82282 3.18518 3.52084 3.68236 3.52075 4.24941C3.52075 4.74455 3.75095 5.18653 4.11279 5.47377L4.27515 5.5873L4.35449 5.64101C4.73432 5.92694 4.84293 6.45981 4.59131 6.87514C4.33984 7.29016 3.81804 7.44014 3.38892 7.23647L3.30347 7.1913L3.12158 7.07289C2.23118 6.45318 1.64575 5.41987 1.64575 4.24941ZM18.937 13.7733C18.937 14.5541 18.3042 15.1869 17.5234 15.1869H17.167C16.6492 15.1869 16.2295 14.7672 16.2295 14.2494C16.2296 13.7861 16.5654 13.4023 17.0071 13.3266C16.9045 12.8965 16.6603 12.5213 16.321 12.2572L16.1172 12.1193L16.0366 12.0656C15.6544 11.7838 15.5399 11.2529 15.7864 10.8351C16.0332 10.4172 16.5537 10.2614 16.9851 10.4603L17.0706 10.5043L17.2756 10.6349C18.2769 11.3166 18.937 12.4673 18.937 13.7733Z" fill="currentColor"/>
+      <path d="M9.0717 11.4368C7.73301 11.4368 6.62961 12.4363 6.46183 13.7292H12.8717C12.704 12.4363 11.6006 11.4368 10.2619 11.4368H9.0717ZM11.6462 4.24927C11.6459 3.15639 10.7591 2.27051 9.66618 2.27051C8.57344 2.27073 7.68764 3.15653 7.68742 4.24927C7.68742 5.3422 8.5733 6.22903 9.66618 6.22925C10.7592 6.22925 11.6462 5.34233 11.6462 4.24927ZM14.7712 14.071C14.7712 14.9176 14.0845 15.6042 13.238 15.6042H6.09562C5.24911 15.6042 4.56242 14.9176 4.56242 14.071C4.5625 11.5809 6.58154 9.56177 9.0717 9.56177H10.2619C12.752 9.5618 14.7711 11.5809 14.7712 14.071ZM13.5212 4.24927C13.5212 6.37787 11.7948 8.10425 9.66618 8.10425C7.53777 8.10403 5.81242 6.37773 5.81242 4.24927C5.81264 2.12099 7.5379 0.395727 9.66618 0.395508C11.7946 0.395508 13.5209 2.12086 13.5212 4.24927Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/community-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface CommunityIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CommunityIcon: React.FC<CommunityIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M18.124 7.75024C18.124 6.5895 17.3704 5.60113 16.3223 5.25561L16.6753 4.18774L17.0269 3.11987C18.9698 3.76042 20.374 5.58968 20.374 7.75024C20.3739 10.17 18.6127 12.1762 16.3018 12.5593C15.6889 12.6609 15.1085 12.2464 15.0068 11.6335C14.9053 11.0208 15.3201 10.442 15.9326 10.3401C17.1758 10.1341 18.1239 9.05156 18.124 7.75024ZM15.606 3.83618C15.8005 3.2461 16.4368 2.92535 17.0269 3.11987L16.3223 5.25561C15.7326 5.06102 15.4119 4.42595 15.606 3.83618ZM23.125 19.2859C23.1249 20.3016 22.3009 21.1243 21.2852 21.1243H20.0005C19.3792 21.1243 18.8755 20.6206 18.8755 19.9993C18.8759 19.3783 19.3794 18.8743 20.0005 18.8743H20.8457C20.6676 17.5065 19.617 16.4113 18.269 16.1731C17.6574 16.0648 17.2498 15.4811 17.3579 14.8694C17.4662 14.258 18.0487 13.8505 18.6602 13.9583C21.1971 14.4066 23.125 16.6199 23.125 19.2859Z" fill="currentColor"/>
+      <path d="M7.14307 16.125C5.01417 16.125 3.27616 17.781 3.13818 19.875H14.8613C14.7233 17.781 12.9853 16.125 10.8564 16.125H7.14307ZM12.125 7.24951C12.1247 5.52401 10.726 4.12526 9.00049 4.125C7.27476 4.125 5.87478 5.52385 5.87451 7.24951C5.87451 8.9754 7.2746 10.3755 9.00049 10.3755C10.7262 10.3752 12.125 8.97524 12.125 7.24951ZM17.1245 20.1431C17.1244 21.2377 16.2372 22.125 15.1426 22.125H2.85693C1.76239 22.1249 0.875113 21.2376 0.875 20.1431C0.875 16.6814 3.68142 13.875 7.14307 13.875H10.8564C14.3181 13.875 17.1245 16.6814 17.1245 20.1431ZM14.375 7.24951C14.375 10.2179 11.9688 12.6252 9.00049 12.6255C6.03196 12.6255 3.62451 10.218 3.62451 7.24951C3.62478 4.28121 6.03212 1.875 9.00049 1.875C11.9686 1.87526 14.3747 4.28137 14.375 7.24951Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/compare-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface CompareIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CompareIcon: React.FC<CompareIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M12 1C13.3059 1 14.4141 1.83532 14.8262 3H18.5C19.0523 3 19.5 3.44772 19.5 4C19.5 4.55228 19.0523 5 18.5 5H14.8262C14.5249 5.85152 13.8515 6.5238 13 6.8252V21H18.5C19.0523 21 19.5 21.4477 19.5 22C19.5 22.5523 19.0523 23 18.5 23H5.5C4.94772 23 4.5 22.5523 4.5 22C4.5 21.4477 4.94772 21 5.5 21H11V6.8252C10.1485 6.5238 9.47513 5.85152 9.17383 5H5.5C4.94772 5 4.5 4.55228 4.5 4C4.5 3.44772 4.94772 3 5.5 3H9.17383C9.58594 1.83532 10.6941 1 12 1ZM12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3Z" fill="currentColor"/>
+      <path d="M3.67383 7.56812C4.229 6.50318 5.771 6.50317 6.32617 7.56812L6.37891 7.67847L8.91895 13.6062C8.97225 13.7306 8.99997 13.8644 9 13.9998C9 15.7352 7.69135 17.9998 5 17.9998C2.30865 17.9998 1 15.7352 1 13.9998C1.00003 13.8644 1.02775 13.7306 1.08105 13.6062L3.62109 7.67847L3.67383 7.56812ZM17.6738 7.56812C18.229 6.50317 19.771 6.50317 20.3262 7.56812L20.3789 7.67847L22.9189 13.6062C22.9723 13.7306 23 13.8644 23 13.9998C23 15.7352 21.6914 17.9998 19 17.9998C16.3086 17.9998 15 15.7352 15 13.9998C15 13.8644 15.0277 13.7306 15.0811 13.6062L17.6211 7.67847L17.6738 7.56812ZM3.00879 14.1833C3.09268 15.0659 3.77658 15.9998 5 15.9998C6.22338 15.9998 6.9063 15.0659 6.99023 14.1833L5 9.53882L3.00879 14.1833ZM17.0088 14.1833C17.0927 15.0659 17.7766 15.9998 19 15.9998C20.2234 15.9998 20.9063 15.0659 20.9902 14.1833L19 9.53882L17.0088 14.1833Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-h6 font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}