chore(design-system): sync Progress and Select to Claude Design (#663)

@uploads/ui grew from 12 to 14 components. Author previews for the two
new components and add them to the conventions header so the design agent
builds with them.

- previews/Progress.tsx — labelled quota meter (Default, Levels, Percentage)
- previews/Select.tsx — dark select (InField, Standalone, Compact)
- conventions.md — document Progress and Select
- NOTES.md — record the 12 to 14 change

Author: zachdunn

.design-sync/NOTES.md

@@ -79,7 +79,13 @@ restage by hand (or copy from main) in those worktrees.
 - 5 components use `cfg.overrides.<Name>.cardMode = "column"` (Button, Divider,
   Field, GalleryTile, Panel) to resolve `[GRID_OVERFLOW]` — their previews are wider
   than a grid cell. Not a warn once the override is applied.
-- No `[RENDER_THIN]` / `variants-identical` warns to record — all 22 cells graded good.
+- No `[RENDER_THIN]` / `variants-identical` warns to record — all cells graded good.
+- **Progress** and **Select** were added to `@uploads/ui` and authored on the
+  2026-08-14 sync (`previews/Progress.tsx`, `previews/Select.tsx`) — 3 cells each,
+  all graded good, no grid override needed (default card width fits). Select is a
+  new export from `Field.tsx` (`ul-select` / compact `ul-select--sm`); Progress is
+  its own file (`ul-progress__*`, `data-level` fill bands). Both added to
+  `conventions.md`. That brought the DS from 12 → 14 components.
 
 ## Re-sync risks
 

.design-sync/conventions.md

@@ -36,7 +36,10 @@ There is **no utility-class vocabulary to author**. Style two ways only:
    - `Callout` — `tone` (`info | ready | error | muted`), `title`
    - `Badge` — `tone` (`neutral | accent | ok | danger`), `dot`
    - `Field` — `label`, `hint`, `invalid`
+   - `Select` — a dark `<select>`; compact variant via `className="ul-select--sm"`
    - `Panel` — `title`, `description`, `roomy`
+   - `Progress` — `label`, `value`, `max`, `detail` (a labelled quota meter; the
+     fill goes quiet below 85%, warns near the cap, and turns `--accent` when full)
    - `Brand` — `size` (`md | lg`), `href`
 2. **Token overrides** for your own layout glue — set any `var(--*)` on a scope:
    - Surfaces: `--bg` (page), `--panel` (raised cards), `--line` (hairline borders)
@@ -58,7 +61,7 @@ for headings and body copy; `--pixel` only for brand moments.
 
 ## Components
 
-`Surface` · `Brand` · `Button` · `Panel` · `Field` / `Input` / `Label` ·
-`Callout` · `Badge` · `Divider` · `GalleryTile` (a hosted image / PR-screenshot
-tile — the product's core object) · `FileBrowser` (a read-only, folder-aware
-files-sdk browser).
+`Surface` · `Brand` · `Button` · `Panel` · `Field` / `Input` / `Select` / `Label` ·
+`Progress` (a labelled quota / usage meter) · `Callout` · `Badge` · `Divider` ·
+`GalleryTile` (a hosted image / PR-screenshot tile — the product's core object) ·
+`FileBrowser` (a read-only, folder-aware files-sdk browser).

.design-sync/previews/Progress.tsx

@@ -0,0 +1,35 @@
+import { Surface, Progress } from "@uploads/ui";
+
+/** Two stacked quota meters — the shape of a workspace usage panel. */
+export function Default() {
+  return (
+    <Surface style={{ padding: 28, width: 380 }}>
+      <div className="ul-progress">
+        <Progress label="Storage" detail="3.2 GB of 25 GB" value={3.2} max={25} />
+        <Progress label="Uploads this month" detail="420 of 10,000" value={420} max={10000} />
+      </div>
+    </Surface>
+  );
+}
+
+/** The fill bands: quiet below 85%, warm near the cap, accent when full. */
+export function Levels() {
+  return (
+    <Surface style={{ padding: 28, width: 380 }}>
+      <div className="ul-progress">
+        <Progress label="Bandwidth" detail="12 GB of 100 GB" value={12} max={100} />
+        <Progress label="Storage" detail="22.4 GB of 25 GB" value={22.4} max={25} />
+        <Progress label="Seats" detail="5 of 5" value={5} max={5} />
+      </div>
+    </Surface>
+  );
+}
+
+/** Percentage mode — omit `max` and the bar reads 0–100. */
+export function Percentage() {
+  return (
+    <Surface style={{ padding: 28, width: 380 }}>
+      <Progress label="Upload progress" detail="68%" value={68} />
+    </Surface>
+  );
+}

.design-sync/previews/Select.tsx

@@ -0,0 +1,42 @@
+import { Surface, Field, Select } from "@uploads/ui";
+
+/** The canonical composition — a `Select` inside a labelled `Field`. */
+export function InField() {
+  return (
+    <Surface style={{ padding: 28, width: 320 }}>
+      <Field label="Role" hint="Controls what this member can change.">
+        <Select defaultValue="member">
+          <option value="member">member</option>
+          <option value="admin">admin</option>
+          <option value="owner">owner</option>
+        </Select>
+      </Field>
+    </Surface>
+  );
+}
+
+/** Standalone — the same box as `Input`, with a drawn caret. */
+export function Standalone() {
+  return (
+    <Surface style={{ padding: 28, width: 300 }}>
+      <Select defaultValue="private">
+        <option value="private">private</option>
+        <option value="unlisted">unlisted</option>
+        <option value="public">public</option>
+      </Select>
+    </Surface>
+  );
+}
+
+/** The compact `ul-select--sm` variant used in dense rows and tables. */
+export function Compact() {
+  return (
+    <Surface style={{ padding: 28, width: 220 }}>
+      <Select className="ul-select--sm" defaultValue="30d">
+        <option value="7d">7 days</option>
+        <option value="30d">30 days</option>
+        <option value="90d">90 days</option>
+      </Select>
+    </Surface>
+  );
+}