- {pkg.tags.map((tag) => (
-
- {tag}
-
- ))}
+ {/* Preview */}
+
+ {theme.preview}
+ {selected && locked && (
+
+
+
+ )}
+ {selected && !locked && (
+
+
+
+ )}
-
- Best for: {pkg.bestFor.join(", ")}
-
+ {/* Info */}
+
+
+
{theme.description}
+
+ {theme.tags.map(t => (
+ {t}
+ ))}
+
+
);
}
// ---------------------------------------------------------------------------
-// App section
+// Surface section
// ---------------------------------------------------------------------------
-function AppSection({
- appName,
- selectedPackageId,
+function SurfaceSection({
+ surface,
+ selectedThemeId,
+ lockedThemeId,
onSelect,
+ onLock,
+ onUnlock,
+ saving,
}: {
- appName: string;
- selectedPackageId: string | undefined;
- onSelect: (appName: string, pkgId: string) => Promise
;
+ surface: Surface;
+ selectedThemeId: string | null;
+ lockedThemeId: string | null;
+ onSelect: (themeId: string) => void;
+ onLock: () => void;
+ onUnlock: () => void;
+ saving: boolean;
}) {
- const [saving, setSaving] = useState(null);
-
- const handleSelect = async (pkgId: string) => {
- if (pkgId === selectedPackageId) return;
- setSaving(pkgId);
- await onSelect(appName, pkgId);
- setSaving(null);
- };
-
- const selectedPkg = PACKAGES.find((p) => p.id === selectedPackageId);
+ const Icon = surface.icon;
+ const lockedTheme = surface.themes.find(t => t.id === lockedThemeId);
return (
-
+
+ {/* Surface header */}
-
-
-
+
+
+
-
{appName}
- {selectedPkg && (
-
- Using {selectedPkg.name}
-
- )}
+
+
{surface.name}
+ {lockedTheme && (
+
+
+ {lockedTheme.name}
+
+ )}
+
+
{surface.description}
- {selectedPkg && (
-
e.stopPropagation()}
- >
- Docs
-
-
- )}
+
+ {/* Lock / Unlock controls */}
+
+ {lockedThemeId ? (
+
+ ) : (
+
+ )}
+
+
+
+ {/* Theme cards — horizontal scroll */}
+ {!lockedThemeId && (
+
+ {surface.themes.map(theme => (
+ onSelect(theme.id)}
+ />
+ ))}
+
+ )}
+
+ {/* Locked state — show only selected */}
+ {lockedThemeId && (
+
+ {surface.themes.map(theme => (
+ {}}
+ />
+ ))}
+
+ )}
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Phase 1 — Surface picker
+// ---------------------------------------------------------------------------
+
+function SurfacePicker({
+ onConfirm,
+ saving,
+}: {
+ onConfirm: (ids: string[]) => void;
+ saving: boolean;
+}) {
+ const [selected, setSelected] = useState
>(new Set());
+
+ const toggle = (id: string) => {
+ setSelected(prev => {
+ const next = new Set(prev);
+ next.has(id) ? next.delete(id) : next.add(id);
+ return next;
+ });
+ };
+
+ return (
+
+
+
Design surfaces
+
+ Which surfaces does your product need? Select all that apply — you can always add more later.
+
- {PACKAGES.map((pkg) => (
-
handleSelect(pkg.id)}
- />
- ))}
+ {ALL_SURFACES.map(surface => {
+ const Icon = surface.icon;
+ const isSelected = selected.has(surface.id);
+ return (
+
+ );
+ })}
+
+
+
+
+ {selected.size === 0 && (
+
Select at least one surface to continue
+ )}
@@ -251,54 +625,61 @@ export default function DesignPage({
);
}
+ // Phase 1 — no surfaces set yet
+ if (surfaces.length === 0) {
+ return (
+
+
+
+ );
+ }
+
+ // Phase 2 — surfaces set, pick themes
+ const activeSurfaces = ALL_SURFACES.filter(s => surfaces.includes(s.id));
+ const lockedCount = Object.keys(surfaceThemes).length;
+
return (
- {/* App sections */}
- {apps.length === 0 ? (
-
-
-
No apps found
-
- Push a Turborepo scaffold to your Gitea repo — apps in the{" "}
- apps/ directory will appear here.
-
-
- ) : (
-
- {apps.map((app) => (
-
- ))}
-
- )}
+
+ {activeSurfaces.map((surface, i) => (
+
0 ? "pt-10" : ""}>
+ setSelectedThemes(prev => ({ ...prev, [surface.id]: themeId }))}
+ onLock={() => handleLock(surface.id)}
+ onUnlock={() => handleUnlock(surface.id)}
+ saving={savingLock === surface.id}
+ />
+
+ ))}
+