feat(ui): デザインシステム基盤とDesign Labを追加

AGENTS.md

@@ -6,6 +6,7 @@
 
 ## 主要ドキュメント
 
+- **UIデザインシステム:** [./DESIGN.md](./DESIGN.md)（実装前に参照し、`bun run design:lint` で検証）
 - **API設計:** [./docs/design/api-design.md](./docs/design/api-design.md) (詳細はSwagger UIを参照)
 - **Tauri SPA設計:** [./docs/design/tauri-spa-architecture.md](./docs/design/tauri-spa-architecture.md)
 - **DBスキーマ:** `packages/db/src/schema.ts` (`apps/server/src/infrastructure/db/schema.ts` は再 export)

apps/server/src/routes/__root.tsx

@@ -7,8 +7,9 @@ import {
 	HeadContent,
 	Outlet,
 	Scripts,
+	useLocation,
 } from "@tanstack/solid-router";
-import { createSignal, onMount } from "solid-js";
+import { createSignal, onMount, Show } from "solid-js";
 import { HydrationScript } from "solid-js/web";
 import styleCss from "~/app.css?url";
 import { ApiActivityIndicator } from "~/components/api-activity-indicator";
@@ -39,6 +40,7 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 
 function RootComponent() {
 	const [isHydrated, setIsHydrated] = createSignal(false);
+	const location = useLocation();
 	onMount(() => {
 		setIsHydrated(true);
 	});
@@ -51,10 +53,21 @@ function RootComponent() {
 			</head>
 			<body>
 				<Toaster />
-				<AppShell nav={<Nav />} statusIndicator={<RouteTransitionIndicator />}>
-					<ApiActivityIndicator />
-					<Outlet />
-				</AppShell>
+				<Show
+					fallback={<Outlet />}
+					when={
+						location().pathname !== "/design-lab" &&
+						!location().pathname.startsWith("/design-lab/")
+					}
+				>
+					<AppShell
+						nav={<Nav />}
+						statusIndicator={<RouteTransitionIndicator />}
+					>
+						<ApiActivityIndicator />
+						<Outlet />
+					</AppShell>
+				</Show>
 				<Scripts />
 			</body>
 		</html>

apps/server/src/routes/design-lab.tsx

@@ -0,0 +1,12 @@
+import { DesignConceptScreen } from "@solid-imager/ui/screens/design-concept-screen";
+import { createFileRoute } from "@tanstack/solid-router";
+
+export const Route = createFileRoute("/design-lab")({
+	ssr: false,
+	pendingComponent: () => null,
+	component: DesignLabRoute,
+});
+
+function DesignLabRoute() {
+	return <DesignConceptScreen />;
+}

package.json

@@ -12,14 +12,16 @@
     "build": "bun --filter '*' build",
     "start": "bun --filter @solid-imager/server start",
     "lint": "biome lint .",
-    "check": "biome check . && bun run typecheck",
+    "check": "biome check . && bun run typecheck && bun run design:lint",
+    "design:lint": "designmd lint DESIGN.md",
     "format": "biome format --write .",
     "test": "bun run --cwd apps/server test:unit && bun run --cwd apps/server test:integration && bun run --cwd apps/cli test && bun run --cwd packages/core test && bun run --cwd packages/ui test",
     "typecheck": "bun --filter '*' typecheck",
     "prepare": "husky"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.0",
+    "@google/design.md": "^0.4.0",
     "@tanstack/cli": "^0.69.4",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",

packages/ui/src/alert-dialog.tsx

@@ -53,7 +53,7 @@ const AlertDialogContent: Component<
 			<AlertDialogOverlay />
 			<AlertDialogPrimitiveContent
 				class={cn(
-					"-translate-x-1/2 -translate-y-1/2 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem-env(safe-area-inset-top)-env(safe-area-inset-bottom))] w-[calc(100%-2rem)] max-w-lg gap-4 overflow-y-auto overscroll-contain border bg-background p-6 shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in sm:max-h-[calc(100dvh-4rem)] sm:rounded-lg",
+					"fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem-env(safe-area-inset-top)-env(safe-area-inset-bottom))] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 origin-center gap-4 overflow-y-auto overscroll-contain border bg-background p-6 shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 motion-reduce:animate-none sm:max-h-[calc(100dvh-4rem)] sm:rounded-lg",
 					props.class,
 				)}
 				{...rest}

packages/ui/src/dialog.tsx

@@ -54,6 +54,7 @@ type DialogContentProps<_T extends ValidComponent = "div"> = ComponentProps<
 > & {
 	class?: string | undefined;
 	children?: JSX.Element;
+	placement?: "center" | "right";
 };
 
 const DialogContent = <T extends ValidComponent = "div">(
@@ -62,13 +63,18 @@ const DialogContent = <T extends ValidComponent = "div">(
 	const [, rest] = splitProps(props as DialogContentProps, [
 		"class",
 		"children",
+		"placement",
 	]);
+	const placement = () => props.placement ?? "center";
 	return (
 		<DialogPortal>
 			<DialogOverlay />
 			<DialogPrimitiveContent
 				class={cn(
-					"-translate-x-1/2 -translate-y-1/2 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem-env(safe-area-inset-top)-env(safe-area-inset-bottom))] w-[calc(100%-2rem)] max-w-lg gap-4 overflow-y-auto overscroll-contain border bg-background p-6 shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in sm:max-h-[calc(100dvh-4rem)] sm:rounded-lg",
+					"fixed z-50 grid overflow-y-auto overscroll-contain border bg-background shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in motion-reduce:animate-none",
+					placement() === "center"
+						? "top-1/2 left-1/2 max-h-[calc(100dvh-2rem-env(safe-area-inset-top)-env(safe-area-inset-bottom))] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 origin-center gap-4 p-6 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 sm:max-h-[calc(100dvh-4rem)] sm:rounded-lg"
+						: "inset-y-0 right-0 left-auto h-dvh max-h-none w-[min(28rem,calc(100%-1rem))] max-w-none translate-x-0 translate-y-0 origin-right gap-4 rounded-none border-y-0 border-r-0 p-6 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:slide-out-to-right data-[expanded]:slide-in-from-right sm:max-h-none",
 					props.class,
 				)}
 				{...rest}