@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/src/primitives/inline-select.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type SelectTriggerProps,
+} from './select'
+
+export type InlineSelectTriggerProps = Omit<SelectTriggerProps, 'size'> & {
+  /**
+   * Trigger size. `sm` (h-8) is the default — inline editors are typically
+   * embedded inside dense rows. Pass `'default'` (h-9) when the editor sits
+   * alongside other h-9 controls.
+   */
+  size?: 'sm' | 'default'
+  /**
+   * Render a subtle trigger border on hover so the affordance is
+   * discoverable. Default `true`. Set to `false` for editors that should
+   * remain visually invisible until focused.
+   */
+  showBorderOnHover?: boolean
+}
+
+/**
+ * Borderless variant of `SelectTrigger` — the select-typed counterpart to
+ * `InlineInput`. At rest the trigger looks like plain text (transparent
+ * border, transparent background, no shadow); hover reveals a subtle
+ * border via `showBorderOnHover` (default `true`), and focus inherits the
+ * standard `border-foreground` + focus shadow from the underlying
+ * `SelectTrigger` for keyboard accessibility.
+ *
+ * Composes with the regular `Select` root + `SelectContent` /
+ * `SelectItem` — `inline-select.tsx` re-exports the rest of the `Select`
+ * API so consumers can import the entire composition from one path.
+ */
+export const InlineSelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectTrigger>,
+  InlineSelectTriggerProps
+>(({ className, size = 'sm', showBorderOnHover = true, children, ...props }, ref) => (
+  <SelectTrigger
+    ref={ref}
+    size={size}
+    className={cn(
+      'border-transparent bg-transparent shadow-none',
+      showBorderOnHover ? 'hover:border-input hover:bg-muted/40' : 'hover:bg-transparent',
+      className,
+    )}
+    data-slot="inline-select-trigger"
+    {...props}
+  >
+    {children}
+  </SelectTrigger>
+))
+InlineSelectTrigger.displayName = 'InlineSelectTrigger'
+
+// Re-export the rest of the Select API so consumers can import the entire
+// inline-select composition from one path.
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectValue,
+}

package/src/primitives/notification-stack.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from 'react'
+import { Notification, type NotificationProps } from './notification'
+
+export type NotificationStackPlacement =
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'top-center'
+  | 'bottom-center'
+
+export type NotifyOptions = Omit<NotificationProps, 'id' | 'onDismiss'> & {
+  /** Auto-dismiss the notification after this many milliseconds. Omit for manual-only dismiss (Notification default). */
+  autoDismissMs?: number
+}
+
+export type NotificationEntry = NotifyOptions & {
+  id: string
+}
+
+type NotificationContextValue = {
+  notifications: NotificationEntry[]
+  notify: (options: NotifyOptions) => string
+  dismiss: (id: string) => void
+  dismissAll: () => void
+}
+
+const NotificationContext = React.createContext<NotificationContextValue | null>(null)
+
+function generateId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  return `notif-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+export type NotificationProviderProps = {
+  children: React.ReactNode
+  /**
+   * Maximum number of notifications visible at once. Older entries beyond
+   * this cap are removed FIFO. Default `5`.
+   */
+  maxVisible?: number
+}
+
+/**
+ * Mount once near the app root (typically inside `AppShell` next to
+ * `FlashMessages`). Provides the `useNotification()` hook to children
+ * and renders the `NotificationStack` in a fixed-position portal-style
+ * wrapper.
+ *
+ * Stack placement, gap, and per-entry behavior are consumer choice
+ * via `NotificationStack` — `NotificationProvider` itself does not
+ * render the visual list, only the context.
+ */
+export function NotificationProvider({ children, maxVisible = 5 }: NotificationProviderProps) {
+  const [notifications, setNotifications] = React.useState<NotificationEntry[]>([])
+  const timersRef = React.useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())
+
+  const clearTimer = React.useCallback((id: string) => {
+    const t = timersRef.current.get(id)
+    if (t) {
+      clearTimeout(t)
+      timersRef.current.delete(id)
+    }
+  }, [])
+
+  const dismiss = React.useCallback(
+    (id: string) => {
+      clearTimer(id)
+      setNotifications((prev) => prev.filter((n) => n.id !== id))
+    },
+    [clearTimer],
+  )
+
+  const notify = React.useCallback(
+    (options: NotifyOptions) => {
+      const id = generateId()
+      setNotifications((prev) => {
+        const next = [...prev, { ...options, id }]
+        // FIFO trim when exceeding the visible cap.
+        return next.length > maxVisible ? next.slice(next.length - maxVisible) : next
+      })
+      if (typeof options.autoDismissMs === 'number' && options.autoDismissMs > 0) {
+        const t = setTimeout(() => dismiss(id), options.autoDismissMs)
+        timersRef.current.set(id, t)
+      }
+      return id
+    },
+    [dismiss, maxVisible],
+  )
+
+  const dismissAll = React.useCallback(() => {
+    timersRef.current.forEach((t) => clearTimeout(t))
+    timersRef.current.clear()
+    setNotifications([])
+  }, [])
+
+  React.useEffect(() => {
+    return () => {
+      timersRef.current.forEach((t) => clearTimeout(t))
+      timersRef.current.clear()
+    }
+  }, [])
+
+  const value = React.useMemo(
+    () => ({ notifications, notify, dismiss, dismissAll }),
+    [notifications, notify, dismiss, dismissAll],
+  )
+
+  return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>
+}
+
+export function useNotification(): NotificationContextValue {
+  const ctx = React.useContext(NotificationContext)
+  if (!ctx) {
+    throw new Error('useNotification must be used within a NotificationProvider')
+  }
+  return ctx
+}
+
+const placementClasses: Record<NotificationStackPlacement, string> = {
+  'top-right': 'top-4 right-4 items-end',
+  'top-left': 'top-4 left-4 items-start',
+  'bottom-right': 'bottom-4 right-4 items-end',
+  'bottom-left': 'bottom-4 left-4 items-start',
+  'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
+  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
+}
+
+export type NotificationStackProps = {
+  /** Where the stack floats on the viewport. Default `'top-right'`. */
+  placement?: NotificationStackPlacement
+  /** Max width per notification card. Default `380` (matches FlashMessages toast). */
+  maxWidth?: number
+  className?: string
+}
+
+/**
+ * Renders the active `NotificationProvider` queue as a fixed-position
+ * stack in one of six placements. Mount once next to
+ * `NotificationProvider`, typically inside `AppShell` so notifications
+ * float above every backend page.
+ *
+ * Each entry uses the `Notification` primitive — its `onDismiss`
+ * automatically calls `dismiss(id)` from the provider so the user
+ * clicking X removes the entry from the queue.
+ */
+export function NotificationStack({
+  placement = 'top-right',
+  maxWidth = 380,
+  className,
+}: NotificationStackProps) {
+  const { notifications, dismiss } = useNotification()
+  if (notifications.length === 0) return null
+
+  return (
+    <div
+      className={[
+        'pointer-events-none fixed z-toast flex flex-col gap-2',
+        placementClasses[placement],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      data-slot="notification-stack"
+      data-placement={placement}
+    >
+      {notifications.map((entry) => (
+        <div
+          key={entry.id}
+          className="pointer-events-auto w-full"
+          style={{ maxWidth }}
+        >
+          <Notification
+            {...entry}
+            onDismiss={() => dismiss(entry.id)}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/primitives/notification.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  type AlertStatus,
+  type AlertStyle,
+} from './alert'
+
+export type NotificationProps = {
+  /**
+   * Notification status. Same five values as `Alert`.
+   * Default `'information'`.
+   */
+  status?: AlertStatus
+  /**
+   * Visual style. Same four values as `Alert`.
+   * Default `'light'`.
+   */
+  style?: AlertStyle
+  /**
+   * Avatar/icon override. If provided, replaces the per-status default
+   * Lucide icon — typical for user-driven notifications ("John
+   * commented on..." with the author avatar). Pass an `Avatar`
+   * primitive instance or any 20×20 visual.
+   */
+  avatar?: React.ReactNode
+  /**
+   * Notification title. Rendered as `AlertTitle` (Label/Small,
+   * `font-medium 14/20`).
+   */
+  title?: React.ReactNode
+  /**
+   * Notification body. Rendered as `AlertDescription` at 72% opacity
+   * per Figma `170:1839` reference (Paragraph/Small, `font-regular
+   * 14/20`).
+   */
+  description?: React.ReactNode
+  /**
+   * Right-aligned timestamp hint next to the title (e.g. `"2 min
+   * ago"`). Pre-formatted by the caller — pass through
+   * `formatRelativeTime()` from `@open-mercato/shared/lib/time` for
+   * the standard look.
+   */
+  timestamp?: React.ReactNode
+  /**
+   * Action buttons / links rendered under the description. Pass a
+   * `<>...</>` fragment or an array of action elements. Separators
+   * are not auto-inserted — wrap your actions in a `<div>` with
+   * `gap-2` if you need custom spacing.
+   */
+  actions?: React.ReactNode
+  /** Render the trailing X close button. Defaults to `true` — Figma reference always shows it. */
+  dismissible?: boolean
+  onDismiss?: () => void
+  dismissAriaLabel?: string
+  className?: string
+  /** Stable id used by the `NotificationStack` (or external trackers) to identify the card. Forwarded as `data-notification-id`. */
+  id?: string
+}
+
+/**
+ * Card composition over the `Alert` primitive matching the Figma
+ * Notification reference (`170:1839` — Error/Light/Large). Renders a
+ * status icon (or custom `avatar`), a title + timestamp row, an
+ * `opacity-72` description, and an optional row of action links. Use
+ * with `NotificationStack` for corner-floating manual-dismiss UX, or
+ * standalone inside a panel / dialog content area.
+ *
+ * Notification is intentionally a thin wrapper — every visual token
+ * comes from the `Alert` primitive so the look stays in sync with the
+ * unified Alert / Notification / Toast design.
+ */
+export const Notification = React.forwardRef<HTMLDivElement, NotificationProps>(
+  (
+    {
+      status,
+      style,
+      avatar,
+      title,
+      description,
+      timestamp,
+      actions,
+      dismissible = true,
+      onDismiss,
+      dismissAriaLabel,
+      className,
+      id,
+    },
+    ref,
+  ) => {
+    return (
+      <Alert
+        ref={ref}
+        status={status}
+        style={style}
+        size="default"
+        icon={avatar}
+        dismissible={dismissible}
+        onDismiss={onDismiss}
+        dismissAriaLabel={dismissAriaLabel}
+        className={className}
+        data-slot="notification"
+        data-notification-id={id}
+      >
+        {(title || timestamp) && (
+          <div className="flex items-start gap-2">
+            {title ? <AlertTitle className="mb-0 flex-1 min-w-0">{title}</AlertTitle> : <span className="flex-1" />}
+            {timestamp ? (
+              <span className="shrink-0 text-xs leading-5 opacity-60" data-slot="notification-timestamp">
+                {timestamp}
+              </span>
+            ) : null}
+          </div>
+        )}
+        {description ? (
+          <AlertDescription className={cn('opacity-72', title && 'mt-1')} data-slot="notification-description">
+            {description}
+          </AlertDescription>
+        ) : null}
+        {actions ? (
+          <div
+            className={cn('flex flex-wrap items-center gap-2', (title || description) && 'mt-2.5')}
+            data-slot="notification-actions"
+          >
+            {actions}
+          </div>
+        ) : null}
+      </Alert>
+    )
+  },
+)
+Notification.displayName = 'Notification'