@lovett/ui 0.0.1

package/src/markdown.tsx

@@ -0,0 +1,214 @@
+/**
+ * MarkdownRenderer — renders a markdown string using react-markdown + remark-gfm.
+ * Component overrides match the chat-message.tsx config from brand-ai-extension.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ * Extracted from components/chat/chat-message.tsx (lines 15-110 — the
+ * MARKDOWN_COMPONENTS and REMARK_PLUGINS constants + renderMarkdown helper).
+ *
+ * Token note: the source referenced --primary for blockquote border, link
+ * colour, and ordered-list marker accent. --primary is an internal token.
+ * Replaced with the public --accent token throughout.
+ */
+
+import type {
+  InputHTMLAttributes,
+  HTMLAttributes,
+  AnchorHTMLAttributes,
+} from 'react'
+import ReactMarkdown, { type Components } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { MarkdownCode } from './code-block'
+
+type NodeProps = HTMLAttributes<HTMLElement>
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement>
+
+const MARKDOWN_COMPONENTS: Components = {
+  h1: ({ children }: NodeProps) => (
+    <h1
+      className="mt-6 mb-3 text-xl font-bold first:mt-0"
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      {children}
+    </h1>
+  ),
+  h2: ({ children }: NodeProps) => (
+    <h2
+      className="mt-5 mb-2 text-lg font-bold first:mt-0"
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      {children}
+    </h2>
+  ),
+  h3: ({ children }: NodeProps) => (
+    <h3
+      className="mt-4 mb-2 text-base font-semibold first:mt-0"
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      {children}
+    </h3>
+  ),
+  p: ({ children }: NodeProps) => (
+    <p
+      className="mb-4 leading-relaxed last:mb-0"
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      {children}
+    </p>
+  ),
+  // list-outside + left padding so wrapped lines indent under the text (not the
+  // marker). Bullets use text-tertiary; ordered markers use --accent + bold so
+  // the numbering reads as deliberate hierarchy rather than browser-default grey.
+  ul: ({ children }: NodeProps) => (
+    <ul
+      className="mb-4 list-disc list-outside space-y-2 pl-6"
+      style={{ color: 'rgb(var(--text-tertiary))' }}
+    >
+      {children}
+    </ul>
+  ),
+  ol: ({ children }: NodeProps) => (
+    <ol
+      className="mb-4 list-decimal list-outside space-y-2 pl-6 marker:font-semibold"
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      {children}
+    </ol>
+  ),
+  li: ({ children }: NodeProps) => (
+    <li
+      className="pl-1 leading-relaxed"
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      {children}
+    </li>
+  ),
+  strong: ({ children }: NodeProps) => (
+    <strong className="font-semibold" style={{ color: 'rgb(var(--foreground))' }}>
+      {children}
+    </strong>
+  ),
+  em: ({ children }: NodeProps) => (
+    <em className="italic" style={{ color: 'rgb(var(--foreground))' }}>
+      {children}
+    </em>
+  ),
+  // code: inline chip or fenced block (handled by CodeBlock via MarkdownCode).
+  // pre just passes through so the highlighter owns its own container.
+  code: MarkdownCode,
+  pre: ({ children }: NodeProps) => <>{children}</>,
+  blockquote: ({ children }: NodeProps) => (
+    <blockquote
+      className="my-4 border-l-4 py-1 pl-4 italic"
+      style={{
+        borderColor: 'rgb(var(--accent))',
+        color: 'rgb(var(--muted-foreground))',
+      }}
+    >
+      {children}
+    </blockquote>
+  ),
+  hr: () => (
+    <hr className="my-6" style={{ borderColor: 'rgb(var(--border))' }} />
+  ),
+  a: ({ href, children }: AnchorProps) => (
+    <a
+      href={href}
+      className="hover:underline"
+      style={{ color: 'rgb(var(--accent))' }}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ),
+  // GFM additions — tables, task lists, strikethrough.
+  table: ({ children }: NodeProps) => (
+    <div
+      className="my-4 overflow-x-auto"
+      style={{
+        borderRadius: 'var(--radius-md)',
+        border: '1px solid rgb(var(--border))',
+      }}
+    >
+      <table className="w-full border-collapse text-sm">{children}</table>
+    </div>
+  ),
+  thead: ({ children }: NodeProps) => (
+    <thead
+      style={{
+        background: 'rgb(var(--muted))',
+        color: 'rgb(var(--muted-foreground))',
+      }}
+    >
+      {children}
+    </thead>
+  ),
+  tbody: ({ children }: NodeProps) => <tbody>{children}</tbody>,
+  tr: ({ children }: NodeProps) => (
+    <tr
+      className="first:border-t-0"
+      style={{ borderTop: '1px solid rgb(var(--border))' }}
+    >
+      {children}
+    </tr>
+  ),
+  th: ({ children }: NodeProps) => (
+    <th className="px-3 py-2 text-left font-medium">{children}</th>
+  ),
+  td: ({ children }: NodeProps) => (
+    <td
+      className="px-3 py-2 align-top"
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      {children}
+    </td>
+  ),
+  del: ({ children }: NodeProps) => (
+    <del className="line-through" style={{ color: 'rgb(var(--muted-foreground))' }}>
+      {children}
+    </del>
+  ),
+  // Task-list checkboxes rendered by remark-gfm for "- [ ] ..." / "- [x] ...".
+  input: (props: InputHTMLAttributes<HTMLInputElement>) =>
+    props.type === 'checkbox' ? (
+      <input
+        {...props}
+        disabled
+        className="mr-1.5 -translate-y-px"
+        style={{ accentColor: 'rgb(var(--accent))' }}
+      />
+    ) : (
+      <input {...props} />
+    ),
+}
+
+const REMARK_PLUGINS = [remarkGfm]
+
+export interface MarkdownRendererProps {
+  /** Raw markdown string to render. */
+  children: string
+  /** Optional className applied to the wrapping div. */
+  className?: string
+}
+
+/**
+ * MarkdownRenderer — drop-in markdown surface with GFM support.
+ * Renders headings, lists, code (via CodeBlock), tables, task lists,
+ * strikethrough, blockquotes, and links with workspace token styling.
+ */
+export function MarkdownRenderer({ children, className }: MarkdownRendererProps) {
+  return (
+    <div className={className}>
+      <ReactMarkdown
+        components={MARKDOWN_COMPONENTS}
+        remarkPlugins={REMARK_PLUGINS}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  )
+}
+
+// Re-export for callers that just want the raw component map
+export { MARKDOWN_COMPONENTS as markdownComponents }

package/src/menu-button.tsx

@@ -0,0 +1,142 @@
+/**
+ * MenuButton — menu-bar dropdown for File / Edit-style affordances.
+ *
+ * The classic app menu-bar pattern: a bordered secondary button with a
+ * trailing chevron that opens a compact menu of actions.
+ *
+ * Distinct from <DropdownButton>:
+ *   • DropdownButton — a primary/secondary CTA whose items are
+ *     icon-tile + title + description rows. For "primary action +
+ *     secondary picker".
+ *   • MenuButton — a compact secondary button whose items are
+ *     `icon? + label + shortcut?` rows. For a menu bar.
+ *
+ * Trigger is a bordered `.btn .btn-secondary` (NOT a ghost button) —
+ * per CLAUDE.md §2, buttons carry a 1px border by default.
+ *
+ * Built on the <DropdownMenu> compound. Items accept a
+ * `{ type: 'separator' }` sentinel for dividers.
+ *
+ * Workspace ADR: ADR-031 Decision 1.
+ */
+
+import { useId, type ReactNode } from 'react'
+import { ChevronDown } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  type DropdownMenuContentProps,
+} from './dropdown-menu'
+import { cn } from './lib/utils'
+
+export interface MenuButtonItem {
+  /** Stable id for keying. Falls back to the index. */
+  id?: string
+  /** Optional leading icon (Lucide or any ReactNode), sized ~14px. */
+  icon?: ReactNode
+  /** Primary label. */
+  label: string
+  /** Optional right-aligned shortcut hint, e.g. "⌘C". */
+  shortcut?: string
+  /** Visual variant. `destructive` tints the row red. */
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  onSelect: () => void
+}
+
+/** A divider between menu items. */
+export interface MenuButtonSeparator {
+  type: 'separator'
+}
+
+export type MenuButtonEntry = MenuButtonItem | MenuButtonSeparator
+
+export interface MenuButtonProps {
+  /** Trigger label — e.g. "File", "Edit". */
+  label: string
+  /** Menu entries, in order. */
+  items: MenuButtonEntry[]
+  /** Optional leading icon on the trigger. */
+  leadingIcon?: ReactNode
+  /** Disable the trigger entirely. */
+  disabled?: boolean
+  /** Popover alignment relative to the trigger. Default `start`. */
+  align?: DropdownMenuContentProps['align']
+  /** Popover width. Default `14rem`. */
+  menuWidth?: string
+  /** Forwarded to the trigger className for layout overrides. */
+  className?: string
+  /** aria-label for the trigger when the visible label is ambiguous. */
+  triggerAriaLabel?: string
+}
+
+function isSeparator(entry: MenuButtonEntry): entry is MenuButtonSeparator {
+  return 'type' in entry && entry.type === 'separator'
+}
+
+export function MenuButton({
+  label,
+  items,
+  leadingIcon,
+  disabled,
+  align = 'start',
+  menuWidth = '14rem',
+  className,
+  triggerAriaLabel,
+}: MenuButtonProps) {
+  const reactId = useId()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        unstyled
+        disabled={disabled}
+        aria-label={triggerAriaLabel}
+        className={cn('btn btn-secondary size-sm', className)}
+      >
+        {leadingIcon}
+        <span>{label}</span>
+        <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        sideOffset={6}
+        style={{ width: menuWidth, padding: 6 }}
+      >
+        {items.map((entry, index) => {
+          if (isSeparator(entry)) {
+            return <DropdownMenuSeparator key={`${reactId}-sep-${index}`} />
+          }
+          return (
+            <DropdownMenuItem
+              key={entry.id ?? `${reactId}-${index}`}
+              {...(entry.variant ? { variant: entry.variant } : {})}
+              {...(entry.disabled ? { disabled: entry.disabled } : {})}
+              onClick={entry.onSelect}
+              className="!py-1.5 !px-2 !gap-2 text-[13px]"
+            >
+              <span
+                className="inline-flex h-4 w-4 shrink-0 items-center justify-center"
+                aria-hidden="true"
+              >
+                {entry.icon}
+              </span>
+              <span className="flex-1 truncate">{entry.label}</span>
+              {entry.shortcut && (
+                <span
+                  className="shrink-0 text-[11px] tabular-nums"
+                  style={{ color: 'rgb(var(--text-tertiary))' }}
+                >
+                  {entry.shortcut}
+                </span>
+              )}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/meta-previews/CreativeMedia.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Play, Volume2, VolumeX } from 'lucide-react';
+
+// `| undefined` on every optional so the workspace's
+// exactOptionalPropertyTypes consumers may pass `undefined` literals.
+interface CreativeMediaProps {
+  src: string;
+  alt?: string | undefined;
+  mediaType?: 'image' | 'video' | undefined;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+  autoPlay?: boolean | undefined;
+  loop?: boolean | undefined;
+  showPlayOverlay?: boolean | undefined;
+  thumbnailSrc?: string | undefined;
+  onError?: ((e: React.SyntheticEvent) => void) | undefined;
+}
+
+export const CreativeMedia: React.FC<CreativeMediaProps> = ({
+  src,
+  alt = 'Ad creative',
+  mediaType,
+  className,
+  style,
+  autoPlay = false,
+  loop = true,
+  showPlayOverlay = true,
+  thumbnailSrc,
+  onError,
+}) => {
+  const isVideo = mediaType === 'video' || /\.(mp4|mov|webm|m4v)$/i.test(src);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(autoPlay ?? false);
+  const [isMuted, setIsMuted] = useState(true);
+
+  // Hooks must run on every render — keep them above the early return.
+  const togglePlay = useCallback(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    if (v.paused) {
+      void v.play();
+      setIsPlaying(true);
+    } else {
+      v.pause();
+      setIsPlaying(false);
+    }
+  }, []);
+
+  const toggleMute = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    const v = videoRef.current;
+    if (!v) return;
+    v.muted = !v.muted;
+    setIsMuted(v.muted);
+  }, []);
+
+  if (!isVideo) {
+    return (
+      <img
+        src={src}
+        alt={alt}
+        className={className}
+        style={style}
+        loading="lazy"
+        onError={onError || ((e) => { (e.currentTarget as HTMLElement).style.display = 'none'; })}
+      />
+    );
+  }
+
+  const { objectFit, ...wrapperStyle } =
+    (style ?? {}) as React.CSSProperties & { objectFit?: React.CSSProperties['objectFit'] };
+
+  return (
+    <div
+      className={`relative ${className || ''}`}
+      style={wrapperStyle}
+      onClick={togglePlay}
+    >
+      <video
+        ref={videoRef}
+        src={src}
+        poster={thumbnailSrc}
+        style={{ width: '100%', height: '100%', objectFit: objectFit || 'cover' }}
+        muted={isMuted}
+        loop={loop}
+        playsInline
+        autoPlay={autoPlay}
+        preload="metadata"
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+        onError={onError || ((e) => { (e.currentTarget as HTMLElement).style.display = 'none'; })}
+      />
+
+      {/* Play overlay — shown when paused */}
+      {showPlayOverlay && !isPlaying && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer">
+          <div className="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center shadow-lg">
+            <Play className="w-5 h-5 text-[#1c1e21] ml-0.5" fill="currentColor" />
+          </div>
+        </div>
+      )}
+
+      {/* Sound toggle — shown when playing */}
+      {isPlaying && (
+        <button
+          type="button"
+          onClick={toggleMute}
+          className="absolute bottom-2 right-2 w-7 h-7 rounded-full bg-black/60 flex items-center justify-center hover:bg-black/80 transition-colors"
+        >
+          {isMuted ? (
+            <VolumeX className="w-3.5 h-3.5 text-white" />
+          ) : (
+            <Volume2 className="w-3.5 h-3.5 text-white" />
+          )}
+        </button>
+      )}
+    </div>
+  );
+};