@lovett/ui 0.0.1

package/src/completion-ring.tsx

@@ -0,0 +1,119 @@
+/**
+ * CompletionRing — small SVG ring showing a 0–100 percentage.
+ *
+ * Used wherever the app wants to communicate "X% of this thing is
+ * done" in a compact, glanceable widget — currently on the Brand
+ * Profile rail and (queued) on the dashboard onboarding card.
+ *
+ * Sizing is configurable so the same primitive can render at 30px
+ * (rail) and 38–48px (dashboard) without duplicating the stroke maths.
+ *
+ *   <CompletionRing percent={80} />
+ *   <CompletionRing percent={pct} size={38} strokeWidth={3} />
+ *   <CompletionRing percent={pct} showLabel={false} />
+ *   <CompletionRing percent={pct} label={<Check className="h-3 w-3" />} />
+ *
+ * SVG is the right tool for ring geometry — the "no inline SVG" guidance
+ * applies to icons (use Lucide), not to chart primitives like this one.
+ */
+
+import type { CSSProperties, ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export interface CompletionRingProps {
+  /** 0–100. Values outside the range are clamped. */
+  percent: number
+  /** Outer dimension in px. Default 30. */
+  size?: number
+  /** Ring stroke width in px. Default scales with size (size / 12). */
+  strokeWidth?: number
+  /**
+   * What to render in the middle. Defaults to the percent number with
+   * a `%` suffix. Pass `false`/`null` to hide. Pass a node (icon, text)
+   * to fully override.
+   */
+  label?: ReactNode | false
+  /** Convenience: false hides the default label. Same as `label={false}`. */
+  showLabel?: boolean
+  /** Track colour CSS value. Defaults to `--surface-overlay-strong`. */
+  trackColor?: string
+  /** Fill (progress arc) colour. Defaults to `--accent`. */
+  fillColor?: string
+  /** Extra classes / inline style on the wrapper. */
+  className?: string
+  style?: CSSProperties
+}
+
+export default function CompletionRing({
+  percent,
+  size = 30,
+  strokeWidth,
+  label,
+  showLabel = true,
+  trackColor = 'rgb(var(--surface-overlay-strong))',
+  fillColor = 'rgb(var(--accent))',
+  className,
+  style,
+}: CompletionRingProps) {
+  const clamped = Math.max(0, Math.min(100, percent))
+  const sw = strokeWidth ?? Math.max(2, Math.round(size / 12))
+  const r = (size - sw) / 2
+  const cx = size / 2
+  const cy = size / 2
+  const circ = 2 * Math.PI * r
+  const dashoff = circ * (1 - clamped / 100)
+
+  // `label` (when provided) wins over `showLabel`. The default renders
+  // the percentage in tabular-nums at a size that fits comfortably in
+  // the ring at any sane diameter.
+  const explicitLabel = label === undefined ? undefined : label
+  const renderedLabel =
+    explicitLabel !== undefined
+      ? explicitLabel || null
+      : showLabel
+        ? `${Math.round(clamped)}%`
+        : null
+
+  return (
+    <div
+      className={cn('relative shrink-0', className)}
+      style={{ width: size, height: size, ...style }}
+    >
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <circle
+          cx={cx}
+          cy={cy}
+          r={r}
+          fill="none"
+          stroke={trackColor}
+          strokeWidth={sw}
+        />
+        <circle
+          cx={cx}
+          cy={cy}
+          r={r}
+          fill="none"
+          stroke={fillColor}
+          strokeWidth={sw}
+          strokeLinecap="round"
+          strokeDasharray={circ}
+          strokeDashoffset={dashoff}
+          transform={`rotate(-90 ${cx} ${cy})`}
+          style={{ transition: 'stroke-dashoffset var(--dur-base) var(--ease-out)' }}
+        />
+      </svg>
+      {renderedLabel !== null && (
+        <div
+          className="absolute inset-0 flex items-center justify-center font-bold tabular-nums leading-none"
+          style={{
+            color: 'rgb(var(--foreground))',
+            // Auto-size the label to the ring so 30px and 48px both look right.
+            fontSize: Math.max(8, Math.round(size * 0.3)),
+          }}
+        >
+          {renderedLabel}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/copy-field.tsx

@@ -0,0 +1,169 @@
+/**
+ * CopyField — an input/output field with a copy button pinned to the
+ * top-right corner.
+ *
+ * The workbench input/output pattern from the tool prototypes: a single
+ * field a user types into and that a transform writes its result back
+ * into ("output replaces input"), with a one-click copy affordance
+ * always in reach.
+ *
+ * Wraps <Textarea> (`multiline`, the default) or <Input>. Owns the copy
+ * interaction end-to-end — clipboard write, a transient ✓ confirmation,
+ * and a success/error toast. The field content is right-padded so text
+ * never slides under the button.
+ *
+ * CopyField does NOT render a char/line count — that is caller state;
+ * render it in the surrounding footer.
+ *
+ * Workspace ADR: ADR-031 Decision 2.
+ */
+
+import {
+  useId,
+  useState,
+  type ChangeEvent,
+  type CSSProperties,
+} from 'react'
+import { Check, Copy } from 'lucide-react'
+import { Textarea } from './textarea'
+import { Input } from './input'
+import { toast } from './toast'
+import { cn } from './lib/utils'
+
+export interface CopyFieldProps {
+  /** Field value (controlled). */
+  value: string
+  /** Change handler. Omit for a read-only output field. */
+  onChange?: (value: string) => void
+  /** Multi-line textarea (default) or single-line input. */
+  multiline?: boolean
+  /** Textarea row count. Ignored when `multiline` is false. */
+  rows?: number
+  placeholder?: string
+  readOnly?: boolean
+  /** Visible field label — wires `<label htmlFor>`. */
+  label?: string
+  /** Keep the label for assistive tech but hide it visually. */
+  hideLabel?: boolean
+  /** Field id. Auto-generated when omitted. */
+  id?: string
+  /** Toast message on a successful copy. */
+  copyToastMessage?: string
+  className?: string
+}
+
+export function CopyField({
+  value,
+  onChange,
+  multiline = true,
+  rows = 10,
+  placeholder,
+  readOnly,
+  label,
+  hideLabel,
+  id,
+  copyToastMessage = 'Copied to clipboard',
+  className,
+}: CopyFieldProps) {
+  const reactId = useId()
+  const fieldId = id ?? reactId
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    if (value === '') return
+    let ok = false
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      try {
+        await navigator.clipboard.writeText(value)
+        ok = true
+      } catch {
+        ok = false
+      }
+    }
+    if (ok) {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+      toast.success(copyToastMessage)
+    } else {
+      toast.error('Clipboard unavailable')
+    }
+  }
+
+  // Reserve room on the right so text never slides under the button.
+  const fieldStyle: CSSProperties = { paddingRight: 44 }
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)}>
+      {label && (
+        <label
+          htmlFor={fieldId}
+          className={cn(
+            'text-[12px] font-semibold tracking-[0.02em]',
+            hideLabel && 'sr-only',
+          )}
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {multiline ? (
+          <Textarea
+            id={fieldId}
+            value={value}
+            {...(onChange
+              ? {
+                  onChange: (e: ChangeEvent<HTMLTextAreaElement>) =>
+                    onChange(e.target.value),
+                }
+              : {})}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            rows={rows}
+            style={fieldStyle}
+          />
+        ) : (
+          <Input
+            id={fieldId}
+            value={value}
+            {...(onChange
+              ? {
+                  onChange: (e: ChangeEvent<HTMLInputElement>) =>
+                    onChange(e.target.value),
+                }
+              : {})}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            style={fieldStyle}
+          />
+        )}
+        <button
+          type="button"
+          onClick={handleCopy}
+          disabled={value === ''}
+          aria-label={copied ? 'Copied' : 'Copy'}
+          className="absolute inline-flex items-center justify-center transition-colors disabled:opacity-40 disabled:pointer-events-none"
+          style={{
+            top: 8,
+            right: 8,
+            height: 28,
+            width: 28,
+            borderRadius: 'var(--radius-xs)',
+            background: 'rgb(var(--bg-card))',
+            border: '1px solid rgb(var(--border))',
+            boxShadow: 'var(--shadow-sm)',
+            color: copied
+              ? 'rgb(var(--success))'
+              : 'rgb(var(--text-secondary))',
+          }}
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/data-grid/column-options-menu.tsx

@@ -0,0 +1,127 @@
+/**
+ * DataGridColumnOptionsMenu — toolbar dropdown for showing summary
+ * row + toggling column visibility + reordering columns via dnd-kit.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/column-options-menu.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR:
+ *  • Token reskin per ADR-025 D7
+ *  • @tabler/icons-react → lucide-react per CLAUDE.md §6 (DEV-4)
+ *  • DropdownMenu* imports come from the workspace BUILD_FRESH
+ *    primitive (DEV-3). Trigger inherits the secondary Button visual
+ *    per ADR-026 D4 (DQ-4) — by default the workspace
+ *    DropdownMenuTrigger applies `.btn .btn-secondary`, so we just
+ *    spread the icon + label inside it.
+ */
+
+import { closestCenter, DndContext } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { SlidersHorizontal } from 'lucide-react'
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu'
+import { SortableColumnOptionItem } from './sortable-parts'
+import type {
+  DataGridColumn,
+  DataGridToolbarRenderProps,
+} from './types'
+
+type DataGridColumnOptionsMenuProps<ColumnId extends string> = Pick<
+  DataGridToolbarRenderProps<ColumnId>,
+  | 'showSummaries'
+  | 'onShowSummariesChange'
+  | 'visibleColumns'
+  | 'visibleColumnIds'
+  | 'hiddenColumns'
+  | 'toggleColumnVisibility'
+  | 'optionsSensors'
+  | 'onOptionColumnDragEnd'
+  | 'optionsDndContextId'
+> & {
+  triggerLabel?: string
+}
+
+export function DataGridColumnOptionsMenu<ColumnId extends string>({
+  showSummaries,
+  onShowSummariesChange,
+  visibleColumns,
+  visibleColumnIds,
+  hiddenColumns,
+  toggleColumnVisibility,
+  optionsSensors,
+  onOptionColumnDragEnd,
+  optionsDndContextId,
+  triggerLabel = 'Options',
+}: DataGridColumnOptionsMenuProps<ColumnId>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger aria-label="Open table options">
+        <SlidersHorizontal className="h-4 w-4" />
+        <span>{triggerLabel}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Options</DropdownMenuLabel>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={showSummaries}
+          onCheckedChange={(checked) => onShowSummariesChange(checked === true)}
+        >
+          Show summary row
+        </DropdownMenuCheckboxItem>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Columns</DropdownMenuLabel>
+        </DropdownMenuGroup>
+        <DndContext
+          id={optionsDndContextId}
+          sensors={optionsSensors}
+          collisionDetection={closestCenter}
+          onDragEnd={onOptionColumnDragEnd}
+        >
+          <SortableContext
+            items={visibleColumns.map((column) => column.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {visibleColumns.map((column) => (
+              <SortableColumnOptionItem
+                key={column.id}
+                column={column}
+                checked
+                disabled={visibleColumnIds.length === 1}
+                onCheckedChange={(checked) =>
+                  toggleColumnVisibility(column.id, checked)
+                }
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+
+        {hiddenColumns.length > 0 ? <DropdownMenuSeparator /> : null}
+        {hiddenColumns.map((column: DataGridColumn<ColumnId>) => (
+          <DropdownMenuCheckboxItem
+            key={column.id}
+            checked={false}
+            onCheckedChange={(checked) =>
+              toggleColumnVisibility(column.id, checked === true)
+            }
+          >
+            {column.label}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}