@lovett/ui 0.0.1

package/src/device-frame.tsx

@@ -0,0 +1,274 @@
+/**
+ * DeviceFrame — a generic, content-agnostic device bezel.
+ *
+ * Renders the chrome of a real device around arbitrary `children`:
+ *   • `device='desktop'` → a macOS Safari browser window (rounded card,
+ *     gradient title bar with the three traffic-light dots, centered
+ *     address bar with a lock icon + URL).
+ *   • `device='mobile'`  → an iPhone (rounded bezel, top notch, status bar
+ *     with 9:41 + signal/wifi/battery, an address pill, and the bottom
+ *     home-indicator bar).
+ *
+ * The frame is pure presentation. `children` are the page being previewed;
+ * they render inside the screen area, which scrolls and clips with the
+ * correct rounded corners. Nothing about Google / SERPs / any specific site
+ * is baked in — pass whatever content you like.
+ *
+ * Promoted (genericized) from the sem-spec source app's `SerpCard`
+ * `MacOSFrame` + `IPhoneFrame`. First reuse target: AdStage. The sem-spec
+ * lens does not yet consume this.
+ *
+ * Icon discipline (CLAUDE.md §6): inline `<svg>` is permitted here because
+ * this is a `@lovett/ui` primitive that OWNS its device-replica glyph
+ * definitions (iOS status-bar signal/wifi/battery). The lock icon uses
+ * Lucide where a clean equivalent exists.
+ *
+ * Colors: device-replica chrome — literal colors mirroring real macOS / iOS
+ * UI; owned by this primitive (like the platform-chrome allowlist), NOT the
+ * theme palette. They live in the `DEVICE` constant below and are referenced
+ * by name, never scattered as raw hex through the JSX. `packages/ui` is not
+ * scanned by the app-level hex-grep, so this is gate-clean.
+ */
+
+import type { ReactNode } from 'react'
+import { Lock } from 'lucide-react'
+import { cn } from './lib/utils'
+
+/**
+ * Device-replica chrome palette — literal colors mirroring real macOS / iOS
+ * UI. Owned by this primitive (like the platform-chrome allowlist), not the
+ * theme palette. Reference by name; do not inline raw hex in the JSX.
+ */
+const DEVICE = {
+  /** iPhone bezel + status-bar ink + home indicator. */
+  bezel: '#1D1D1F',
+  /** Screen background behind children. */
+  screen: '#ffffff',
+  /** macOS window outer border. */
+  windowBorder: '#D1D5DB',
+  /** macOS title-bar gradient stops + divider. */
+  titleBarTop: '#E8E8E8',
+  titleBarBottom: '#D4D4D4',
+  titleBarBorder: '#BFBFBF',
+  /** macOS address-bar fill + border. */
+  addressFill: '#ffffff',
+  addressBorder: '#C4C4C4',
+  /** macOS / iOS address-bar text + lock glyph. */
+  addressText: '#5F6368',
+  /** iOS address pill fill. */
+  pillFill: '#F1F3F4',
+  /** Traffic-light dots (fill + matching darker border ring). */
+  trafficRed: '#FF5F57',
+  trafficRedBorder: '#E0443E',
+  trafficAmber: '#FEBC2E',
+  trafficAmberBorder: '#DEA123',
+  trafficGreen: '#28C840',
+  trafficGreenBorder: '#1AAB29',
+} as const
+
+const PLACEHOLDER_URL = 'example.com'
+
+export interface DeviceFrameProps {
+  /** Which device bezel to render. */
+  device: 'desktop' | 'mobile'
+  /**
+   * URL shown in the address bar / pill. On desktop, the address bar is
+   * hidden when omitted; on mobile the pill falls back to a neutral
+   * placeholder.
+   */
+  url?: string
+  /** The page being previewed, rendered inside the (scrollable) screen area. */
+  children: ReactNode
+  /** Optional className on the outer frame element. */
+  className?: string
+}
+
+/* ------------------------------------------------------------------ */
+/*  iOS status-bar glyphs (device-replica SVG definitions)            */
+/* ------------------------------------------------------------------ */
+
+function CellularGlyph() {
+  return (
+    <svg className="w-4 h-3" viewBox="0 0 17 12" fill={DEVICE.bezel} aria-hidden="true">
+      <path d="M1.5 5.5A.5.5 0 0 1 2 5h1a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-5Zm3-2A.5.5 0 0 1 5 3h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5v-7Zm3-2A.5.5 0 0 1 8 1h1a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5v-9Z" />
+    </svg>
+  )
+}
+
+function WifiGlyph() {
+  return (
+    <svg className="w-4 h-3" viewBox="0 0 16 12" fill={DEVICE.bezel} aria-hidden="true">
+      <path d="M8 3.3a6.2 6.2 0 0 1 4.2 1.6l1.1-1.2A8 8 0 0 0 8 1.3a8 8 0 0 0-5.3 2.4l1.1 1.2A6.2 6.2 0 0 1 8 3.3Zm0 3.2c1 0 2 .4 2.7 1l1.1-1.2A5.2 5.2 0 0 0 8 4.7a5.2 5.2 0 0 0-3.8 1.6l1.1 1.2c.7-.6 1.7-1 2.7-1Z" />
+    </svg>
+  )
+}
+
+function BatteryGlyph() {
+  return (
+    <div className="flex items-center" aria-hidden="true">
+      <div
+        className="w-[22px] h-[10px] rounded-[3px] border p-[1px]"
+        style={{ borderColor: DEVICE.bezel }}
+      >
+        <div
+          className="w-full h-full rounded-[1.5px]"
+          style={{ backgroundColor: DEVICE.bezel }}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** Inner-frame props — `url` / `className` are explicitly optional (the
+ *  public `DeviceFrame` already validated them; the helpers just forward). */
+interface InnerFrameProps {
+  url: string | undefined
+  children: ReactNode
+  className: string | undefined
+}
+
+/* ------------------------------------------------------------------ */
+/*  macOS Safari browser window                                       */
+/* ------------------------------------------------------------------ */
+
+function DesktopFrame({ url, children, className }: InnerFrameProps) {
+  return (
+    <div
+      className={cn('rounded-xl overflow-hidden border shadow-lg', className)}
+      style={{ borderColor: DEVICE.windowBorder, backgroundColor: DEVICE.screen }}
+    >
+      {/* Title bar */}
+      <div
+        className="px-4 py-2.5 flex items-center gap-3 border-b"
+        style={{
+          backgroundImage: `linear-gradient(to bottom, ${DEVICE.titleBarTop}, ${DEVICE.titleBarBottom})`,
+          borderColor: DEVICE.titleBarBorder,
+        }}
+        aria-hidden="true"
+      >
+        {/* Traffic lights */}
+        <div className="flex items-center gap-[6px]">
+          <span
+            className="w-3 h-3 rounded-full border"
+            style={{ backgroundColor: DEVICE.trafficRed, borderColor: DEVICE.trafficRedBorder }}
+          />
+          <span
+            className="w-3 h-3 rounded-full border"
+            style={{ backgroundColor: DEVICE.trafficAmber, borderColor: DEVICE.trafficAmberBorder }}
+          />
+          <span
+            className="w-3 h-3 rounded-full border"
+            style={{ backgroundColor: DEVICE.trafficGreen, borderColor: DEVICE.trafficGreenBorder }}
+          />
+        </div>
+
+        {/* Address bar (hidden when no url) */}
+        {url && (
+          <div className="flex-1 mx-8">
+            <div
+              className="rounded-md border px-3 py-1 flex items-center justify-center shadow-inner"
+              style={{ backgroundColor: DEVICE.addressFill, borderColor: DEVICE.addressBorder }}
+            >
+              <div className="flex items-center gap-1.5">
+                <Lock className="w-3 h-3" style={{ color: DEVICE.addressText }} aria-hidden="true" />
+                <span className="text-[12px]" style={{ color: DEVICE.addressText }}>
+                  {url}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Screen — clips to the window's rounded bottom corners */}
+      <div className="overflow-auto" style={{ backgroundColor: DEVICE.screen }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/*  iPhone frame                                                      */
+/* ------------------------------------------------------------------ */
+
+function MobileFrame({ url, children, className }: InnerFrameProps) {
+  return (
+    <div className={cn('mx-auto', className)} style={{ maxWidth: 375 }}>
+      <div
+        className="rounded-[40px] border-[3px] p-1 shadow-2xl"
+        style={{ borderColor: DEVICE.bezel, backgroundColor: DEVICE.bezel }}
+      >
+        {/* Notch */}
+        <div className="relative" aria-hidden="true">
+          <div
+            className="absolute top-0 left-1/2 -translate-x-1/2 z-10 w-[120px] h-[30px] rounded-b-[16px]"
+            style={{ backgroundColor: DEVICE.bezel }}
+          />
+        </div>
+
+        <div className="rounded-[36px] overflow-hidden" style={{ backgroundColor: DEVICE.screen }}>
+          {/* Status bar */}
+          <div
+            className="px-6 pt-3 pb-1 flex items-center justify-between"
+            style={{ backgroundColor: DEVICE.screen }}
+            aria-hidden="true"
+          >
+            <span className="text-[12px] font-semibold" style={{ color: DEVICE.bezel }}>
+              9:41
+            </span>
+            <div className="flex items-center gap-1">
+              <CellularGlyph />
+              <WifiGlyph />
+              <BatteryGlyph />
+            </div>
+          </div>
+
+          {/* Address pill */}
+          <div className="px-3 pb-1" aria-hidden="true">
+            <div
+              className="rounded-full px-3 py-1.5 flex items-center gap-2"
+              style={{ backgroundColor: DEVICE.pillFill }}
+            >
+              <Lock
+                className="w-3 h-3 flex-shrink-0"
+                style={{ color: DEVICE.addressText }}
+                aria-hidden="true"
+              />
+              <span className="text-[12px] truncate" style={{ color: DEVICE.addressText }}>
+                {url || PLACEHOLDER_URL}
+              </span>
+            </div>
+          </div>
+
+          {/* Screen */}
+          <div className="overflow-auto">{children}</div>
+
+          {/* Home indicator */}
+          <div className="flex justify-center py-2" aria-hidden="true">
+            <div className="w-32 h-1 rounded-full" style={{ backgroundColor: DEVICE.bezel }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/*  Public component                                                  */
+/* ------------------------------------------------------------------ */
+
+export function DeviceFrame({ device, url, children, className }: DeviceFrameProps) {
+  if (device === 'mobile') {
+    return (
+      <MobileFrame url={url} className={className}>
+        {children}
+      </MobileFrame>
+    )
+  }
+  return (
+    <DesktopFrame url={url} className={className}>
+      {children}
+    </DesktopFrame>
+  )
+}

package/src/dropdown-button.tsx

@@ -0,0 +1,221 @@
+/**
+ * DropdownButton — Button-styled trigger that opens a rich popover menu.
+ *
+ * The split-button pattern from the design reference: a primary Button
+ * with a trailing chevron-down, which on click reveals a popover of
+ * actions. Items render as `icon + title + description` rows.
+ *
+ * Built on top of <DropdownMenu> + <DropdownMenuTrigger> +
+ * <DropdownMenuContent> + <DropdownMenuItem>. Use this primitive when:
+ *   • A toolbar CTA has 2+ creation paths that share a noun (e.g.
+ *     "New Keyword Plan" → Set OR Group).
+ *   • You want a "primary action + secondary picker" feel without
+ *     resorting to multiple side-by-side buttons.
+ *
+ * For arbitrary menu content (sort pickers, kebab menus, etc.), use
+ * the lower-level <DropdownMenu> compound directly.
+ *
+ * Implementation note: the trigger renders the .btn class chain
+ * directly on <DropdownMenuTrigger> (rather than wrapping a <Button>),
+ * so the rendered DOM stays a single <button>. The variant/size class
+ * maps mirror <Button> 1:1.
+ */
+
+import { useId, type ReactNode } from 'react'
+import { Check, ChevronDown } from 'lucide-react'
+import type { ButtonVariant, ButtonSize } from './button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  type DropdownMenuContentProps,
+} from './dropdown-menu'
+import { cn } from './lib/utils'
+
+const VARIANT_CLASS: Record<ButtonVariant, string> = {
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  outline: 'btn-outline',
+  ghost: 'btn-ghost',
+  destructive: 'btn-destructive',
+  'destructive-soft': 'btn-destructive-soft',
+  icon: 'btn-icon',
+  toolbar: 'btn-toolbar',
+}
+
+const SIZE_CLASS: Record<ButtonSize, string> = {
+  sm: 'size-sm',
+  md: '',
+  lg: 'size-lg',
+}
+
+export interface DropdownButtonItem {
+  /** Stable id for keying. If omitted, the index is used (avoid for
+   *  long lists where order can change). */
+  id?: string
+  /** Icon shown in the leading tile (Lucide or any ReactNode). */
+  icon?: ReactNode
+  /** Primary label of the item. */
+  label: string
+  /** Optional helper text rendered below the label. */
+  description?: string
+  /** Visual variant — `default` or `destructive`. */
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  onSelect: () => void
+}
+
+export interface DropdownButtonProps {
+  /** Trigger label (e.g., "New Keyword Plan"). */
+  label: string
+  /** Trigger variant — defaults to primary to match the screenshot. */
+  variant?: ButtonVariant
+  /** Trigger size — passes through to the .btn size class. */
+  size?: ButtonSize
+  /** Optional leading icon on the trigger (e.g., a `+`). */
+  leadingIcon?: ReactNode
+  /** Override the default chevron-down trailing icon if needed. */
+  trailingIcon?: ReactNode
+  /** Menu items rendered in order. */
+  items: DropdownButtonItem[]
+  /** Disable the trigger entirely. */
+  disabled?: boolean
+  /** Show the .is-loading state on the trigger. */
+  loading?: boolean
+  /** Forwarded to the trigger's className for layout overrides. */
+  className?: string
+  /** Popover alignment relative to the trigger. Default `end`
+   *  (right-aligned) to match the reference screenshot. */
+  align?: DropdownMenuContentProps['align']
+  /** Popover side — `top` or `bottom`. Default `bottom`. */
+  side?: DropdownMenuContentProps['side']
+  /** Popover gap from the trigger. Default 6. */
+  sideOffset?: DropdownMenuContentProps['sideOffset']
+  /** Constrain the popover width. Default `min(20rem, calc(100vw-16px))`. */
+  menuWidth?: string
+  /** Optional aria-label for the trigger if the visible label is
+   *  ambiguous (e.g., icon-only triggers). */
+  triggerAriaLabel?: string
+  /** Optional id of the currently-active item. When set, that item
+   *  renders a trailing check mark — turns the DropdownButton into a
+   *  single-select filter/picker. */
+  activeId?: string
+  /** When true, the trigger gets an accent-tinted treatment — signals
+   *  an engaged filter. Pair with `activeId` for filter-chip use. */
+  active?: boolean
+}
+
+export function DropdownButton({
+  label,
+  variant = 'primary',
+  size = 'md',
+  leadingIcon,
+  trailingIcon,
+  items,
+  disabled,
+  loading,
+  className,
+  align = 'end',
+  side = 'bottom',
+  sideOffset = 6,
+  menuWidth = 'min(20rem, calc(100vw - 16px))',
+  triggerAriaLabel,
+  activeId,
+  active,
+}: DropdownButtonProps) {
+  const reactId = useId()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        unstyled
+        disabled={disabled || loading}
+        aria-label={triggerAriaLabel}
+        className={cn(
+          'btn',
+          VARIANT_CLASS[variant],
+          SIZE_CLASS[size],
+          loading && 'is-loading',
+          className,
+        )}
+        style={
+          active
+            ? {
+                background: 'rgb(var(--accent-subtle))',
+                borderColor: 'rgb(var(--accent))',
+                color: 'rgb(var(--accent))',
+              }
+            : undefined
+        }
+      >
+        {leadingIcon}
+        <span>{label}</span>
+        {trailingIcon ?? (
+          <ChevronDown className="h-4 w-4" aria-hidden="true" />
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        style={{ width: menuWidth, padding: 6 }}
+      >
+        {items.map((item, index) => {
+          const isActive =
+            activeId !== undefined && item.id === activeId
+          return (
+            <DropdownMenuItem
+              key={item.id ?? `${reactId}-${index}`}
+              {...(item.variant ? { variant: item.variant } : {})}
+              {...(item.disabled ? { disabled: item.disabled } : {})}
+              onClick={item.onSelect}
+              className="!py-2.5 !px-2.5 !gap-3 items-start"
+            >
+              {item.icon && (
+                <span
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center"
+                  style={{
+                    background: 'rgb(var(--surface-overlay))',
+                    color: 'rgb(var(--text-muted))',
+                    borderRadius: 'var(--radius-md)',
+                  }}
+                  aria-hidden="true"
+                >
+                  {item.icon}
+                </span>
+              )}
+              <span className="flex flex-col gap-0.5 min-w-0 flex-1">
+                <span
+                  className={cn(
+                    'text-[13px] font-semibold leading-tight',
+                    item.variant === 'destructive'
+                      ? 'text-[rgb(var(--destructive))]'
+                      : 'text-[rgb(var(--foreground))]',
+                  )}
+                >
+                  {item.label}
+                </span>
+                {item.description && (
+                  <span
+                    className="text-[12px] leading-[1.4]"
+                    style={{ color: 'rgb(var(--text-tertiary))' }}
+                  >
+                    {item.description}
+                  </span>
+                )}
+              </span>
+              {isActive && (
+                <Check
+                  className="h-4 w-4 shrink-0 mt-0.5"
+                  style={{ color: 'rgb(var(--accent))' }}
+                  aria-hidden="true"
+                />
+              )}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}