@lovett/ui 0.0.1

package/src/brand-logo-tile.tsx

@@ -0,0 +1,200 @@
+/**
+ * BrandLogoTile — the rounded-square logo container used wherever the
+ * app shows a brand's identity at a glance: the brand profile rail
+ * (78px), the sidebar switcher button (36px), dropdown rows (28px),
+ * the dashboard hero tile, etc.
+ *
+ *   <BrandLogoTile size="lg" url={brand.logoUrl} name={brand.name} />
+ *   <BrandLogoTile size={56} url={...} name={...} />
+ *   <BrandLogoTile size="md" name="Acme" />          // initial-only
+ *
+ * Sizes are tokens (sm/md/lg) but custom numbers work too — radius
+ * scales proportionally so a 64px tile looks right without manual
+ * tuning. Pass `accentGlow` to add the subtle radial halo used on the
+ * brand profile rail tray.
+ */
+
+import { useEffect, useState, type CSSProperties, type ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export type BrandLogoTileSize = 'xs' | 'sm' | 'md' | 'lg' | number
+
+// Named sizes map to the most common diameters in the app. Keep
+// these in sync with patterns.md when adding entries.
+const SIZE_PX: Record<Exclude<BrandLogoTileSize, number>, number> = {
+  xs: 28, // dropdown rows
+  sm: 36, // collapsed sidebar
+  md: 56, // dashboard hero
+  lg: 78, // brand profile rail
+}
+
+function resolveSize(size: BrandLogoTileSize): number {
+  return typeof size === 'number' ? size : SIZE_PX[size]
+}
+
+/**
+ * Radius scales with diameter so every size looks like the same shape
+ * family. Coefficient 0.23 chosen to match the rail's 78px → 18px ratio.
+ * Floored to whole px since sub-pixel radii render fuzzy on some GPUs.
+ */
+function radiusFor(size: number): number {
+  return Math.max(6, Math.floor(size * 0.23))
+}
+
+/** Inner padding for image children — bigger for full logos so the
+ *  glyph doesn't kiss the edges, zero for tiny favicons that need to
+ *  fill the tile. */
+function paddingFor(size: number, isFavicon: boolean): number {
+  if (isFavicon) return 0
+  if (size <= 36) return 4
+  if (size <= 56) return 8
+  return 10
+}
+
+export interface BrandLogoTileProps {
+  /** Size token or a raw pixel number. Defaults to `md` (56px). */
+  size?: BrandLogoTileSize
+  /** Image URL — logo, favicon, anything `<img>` can render. */
+  url?: string | null
+  /**
+   * Brand name. Used as `alt` text and as the source for the
+   * single-character fallback when no `url` is provided (or the image
+   * fails to load).
+   */
+  name?: string
+  /**
+   * Treat the image as a favicon — render it smaller, centred, without
+   * stretching to fill the tile. Auto-detected when the URL starts
+   * with the Google s2 favicon endpoint; pass `true`/`false` to override.
+   */
+  isFavicon?: boolean
+  /**
+   * Adds a subtle accent-coloured radial glow above the tile. Used on
+   * the brand profile rail to give the logo a sense of presence
+   * against the slate frame.
+   */
+  accentGlow?: boolean
+  /** Override the fallback character (defaults to `name[0]`). */
+  fallbackChar?: ReactNode
+  /**
+   * Override the tile background. Use for contexts that have their own
+   * visual identity (e.g. the sidebar switcher's blue gradient). When
+   * omitted, the tile picks up the neutral card→overlay gradient that
+   * blends with surrounding chrome.
+   */
+  background?: string
+  /**
+   * Override the fallback character / image-area text colour. Pair
+   * with `background` for branded variants (white text on coloured
+   * gradient). Defaults to the accent token.
+   */
+  color?: string
+  /** Drop the 1px border (used when the tile sits on a strongly tinted bg). */
+  borderless?: boolean
+  className?: string
+  style?: CSSProperties
+}
+
+export default function BrandLogoTile({
+  size = 'md',
+  url,
+  name,
+  isFavicon,
+  accentGlow,
+  fallbackChar,
+  background,
+  color,
+  borderless,
+  className,
+  style,
+}: BrandLogoTileProps) {
+  const px = resolveSize(size)
+  const radius = radiusFor(px)
+  const fav = isFavicon ?? url?.includes('s2/favicons') ?? false
+  const pad = paddingFor(px, fav)
+  // Initial text scales with the tile so a 78px tile gets a big 34-ish
+  // glyph and a 28px tile gets a 12-ish one. Tuned against the rail
+  // (78 → 34) — coefficient ≈ 0.44.
+  const initialFontSize = Math.max(11, Math.round(px * 0.44))
+
+  const initial = (
+    typeof fallbackChar === 'string'
+      ? fallbackChar
+      : (name?.charAt(0).toUpperCase() ?? '?')
+  ) as ReactNode
+
+  // Favicon/logo images that fail to load (404, blocked, dead host) fall
+  // back to the initial. We track the error in state so the <img> is
+  // *replaced* by the letter span — hiding the broken img alone left an
+  // empty tile (the letter only renders in the no-url branch). The flag
+  // resets when `url` changes so a reused tile re-attempts the new image.
+  const [imgError, setImgError] = useState(false)
+  useEffect(() => {
+    setImgError(false)
+  }, [url])
+  const showImg = !!url && !imgError
+
+  return (
+    <div
+      className={cn(
+        'relative inline-flex items-center justify-center overflow-hidden shrink-0',
+        className,
+      )}
+      style={{
+        width: px,
+        height: px,
+        borderRadius: radius,
+        background:
+          background ??
+          'linear-gradient(180deg, rgb(var(--bg-card)) 0%, rgb(var(--surface-overlay)) 100%)',
+        border: borderless ? 'none' : '1px solid rgb(var(--border))',
+        color: color ?? 'rgb(var(--accent))',
+        boxShadow: borderless ? undefined : 'var(--shadow-sm)',
+        ...style,
+      }}
+    >
+      {accentGlow && (
+        <span
+          aria-hidden
+          className="absolute pointer-events-none"
+          style={{
+            top: -Math.round(px * 0.5),
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: Math.round(px * 2.6),
+            height: Math.round(px * 1.05),
+            background:
+              'radial-gradient(closest-side, rgb(var(--accent) / 0.18), transparent 70%)',
+          }}
+        />
+      )}
+      {showImg ? (
+        <img
+          src={url ?? undefined}
+          alt={name ?? ''}
+          className="object-contain"
+          style={{
+            width: fav ? '60%' : '100%',
+            height: fav ? '60%' : '100%',
+            padding: pad,
+          }}
+          onError={() => {
+            // Fall back to the initial silently — swap the img for the
+            // fallback character (see imgError note above).
+            setImgError(true)
+          }}
+        />
+      ) : (
+        <span
+          className="font-extrabold leading-none"
+          style={{
+            fontSize: initialFontSize,
+            letterSpacing: '-0.04em',
+          }}
+        >
+          {fallbackChar ?? initial}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/bulk-action-bar.tsx

@@ -0,0 +1,104 @@
+/**
+ * BulkActionBar — floating, bottom-centred selection action bar.
+ *
+ * Shown when a multi-select surface has a non-empty selection. The
+ * primitive owns the fixed bottom-centre shell, the accent count
+ * badge, the dividers, and the Clear button; the caller passes its
+ * own action buttons as `children`.
+ *
+ * Promoted to @lovett/ui in ADR-035 (Assets lens redesign) — two
+ * committed consumers (the Assets page and the Manage Folders page)
+ * and it needs the internal surface tokens (`--bg-card` /
+ * `--border-card`).
+ */
+
+import type { ReactNode } from 'react'
+import { X } from 'lucide-react'
+
+export interface BulkActionBarProps {
+  /** Selection count shown in the accent badge. */
+  count: number
+  /** Optional summary string, e.g. "2 folders · 3 assets". When
+   *  omitted, a plain "<count> selected" label is shown. */
+  summary?: string
+  /** Caller-owned action buttons (icon buttons or labelled Buttons). */
+  children: ReactNode
+  onClear: () => void
+}
+
+function Divider() {
+  return (
+    <span
+      aria-hidden="true"
+      className="h-[22px] w-px shrink-0"
+      style={{ background: 'rgb(var(--border))' }}
+    />
+  )
+}
+
+export function BulkActionBar({
+  count,
+  summary,
+  children,
+  onClear,
+}: BulkActionBarProps) {
+  return (
+    <div
+      role="region"
+      aria-label="Bulk actions"
+      className="fixed bottom-6 left-1/2 z-30 flex -translate-x-1/2 items-center gap-2.5 py-2.5 pl-4 pr-3"
+      style={{
+        background: 'rgb(var(--bg-card))',
+        border: '1px solid rgb(var(--border-card))',
+        borderRadius: 'var(--radius-lg)',
+        boxShadow: 'var(--shadow-lg)',
+      }}
+    >
+      <span className="inline-flex items-center gap-2">
+        <span
+          className="inline-flex h-[22px] min-w-[22px] items-center justify-center px-1.5 text-[11.5px] font-bold tabular-nums text-white"
+          style={{
+            background: 'rgb(var(--accent))',
+            borderRadius: 'var(--radius-full)',
+          }}
+        >
+          {count}
+        </span>
+        <span
+          className="text-[13px] font-semibold"
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {summary ?? 'selected'}
+        </span>
+      </span>
+
+      <Divider />
+
+      <div className="flex items-center gap-1.5">{children}</div>
+
+      <Divider />
+
+      <button
+        type="button"
+        onClick={onClear}
+        className="inline-flex h-7 items-center gap-1.5 px-2.5 cursor-pointer text-[12px] font-medium transition-colors"
+        style={{
+          background: 'transparent',
+          color: 'rgb(var(--text-tertiary))',
+          borderRadius: 'var(--radius-sm)',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = 'rgb(var(--surface-overlay))'
+          e.currentTarget.style.color = 'rgb(var(--foreground))'
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = 'transparent'
+          e.currentTarget.style.color = 'rgb(var(--text-tertiary))'
+        }}
+      >
+        <X className="h-3.5 w-3.5" aria-hidden="true" />
+        Clear
+      </button>
+    </div>
+  )
+}

package/src/button-group.tsx

@@ -0,0 +1,46 @@
+/**
+ * ButtonGroup — typed wrapper over the `.btn-group` CSS class in styles.css.
+ *
+ * Renders Button children as a joined segmented control (single-row,
+ * shared borders, rounded outer corners). Used for view-switchers,
+ * mode toggles, and other "pick one of N" affordances where the
+ * options should read as a connected group.
+ *
+ * Promoted from inline CSS-class usage to a typed primitive per
+ * ADR-026 D5 (inspired by gray-ui-csm recon §13 DQ-5 — the
+ * view-switcher button group).
+ *
+ *   <ButtonGroup aria-label="View mode">
+ *     <Button variant="secondary" aria-pressed={view === 'grid'}>
+ *       <Grid /> Grid
+ *     </Button>
+ *     <Button variant="secondary" aria-pressed={view === 'list'}>
+ *       <List /> List
+ *     </Button>
+ *   </ButtonGroup>
+ *
+ * The first/last child get rounded outer corners; inner segments are
+ * square. Inner borders deduplicate via `border-right-width: 0` on
+ * non-last children.
+ */
+
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /** One or more `<Button>` elements. */
+  children: ReactNode
+}
+
+export function ButtonGroup({
+  children,
+  className,
+  role = 'group',
+  ...rest
+}: ButtonGroupProps) {
+  return (
+    <div role={role} className={cn('btn-group', className)} {...rest}>
+      {children}
+    </div>
+  )
+}

package/src/button.tsx

@@ -0,0 +1,93 @@
+/**
+ * Button — typed primitive over the .btn CSS classes in styles.css.
+ *
+ *   variants:   primary | secondary | outline | ghost | destructive |
+ *               destructive-soft | icon | toolbar
+ *   sizes:      sm (32) | md (40) — default | lg (48)
+ *   shape:      default | circle (use with variant="icon" — ADR-026 D3)
+ *   states:     loading, disabled — both forwarded to the CSS class
+ */
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'outline'
+  | 'ghost'
+  | 'destructive'
+  | 'destructive-soft'
+  | 'icon'
+  | 'toolbar'
+
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+export type ButtonShape = 'default' | 'circle'
+
+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 ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  /** ADR-026 D3 — `circle` only takes effect when `variant="icon"`. */
+  shape?: ButtonShape
+  /** Show the loading spinner overlay; auto-disables the button. */
+  loading?: boolean
+  /** Optional left-side icon. Forces icon-text gap from .btn. */
+  leadingIcon?: ReactNode
+  /** Optional right-side icon. */
+  trailingIcon?: ReactNode
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = 'primary',
+    size = 'md',
+    shape = 'default',
+    loading,
+    leadingIcon,
+    trailingIcon,
+    disabled,
+    className,
+    children,
+    type = 'button',
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      disabled={disabled || loading}
+      className={cn(
+        'btn',
+        VARIANT_CLASS[variant],
+        SIZE_CLASS[size],
+        shape === 'circle' && variant === 'icon' && 'is-circle',
+        loading && 'is-loading',
+        className,
+      )}
+      {...rest}
+    >
+      {leadingIcon}
+      {children}
+      {trailingIcon}
+    </button>
+  )
+})