@naeil/ui 0.1.0

package/src/components/workflow-diagram.tsx

@@ -0,0 +1,414 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                              */
+/* ------------------------------------------------------------------ */
+
+export interface WorkflowNode {
+  id: string;
+  label: string;
+  type: "source" | "process" | "storage" | "output" | "ai";
+  /** Position in % (0–100) relative to container */
+  position: { x: number; y: number };
+  detail: {
+    description: string;
+    tech: string[];
+    meta?: string;
+  };
+}
+
+export interface WorkflowEdge {
+  from: string;
+  to: string;
+  label?: string;
+  animated?: boolean;
+}
+
+export interface WorkflowDiagramProps {
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  accent: string;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                            */
+/* ------------------------------------------------------------------ */
+
+/** Nodes connected to the given node (any direction). */
+function connectedIds(nodeId: string, edges: WorkflowEdge[]): Set<string> {
+  const ids = new Set<string>();
+  ids.add(nodeId);
+  for (const e of edges) {
+    if (e.from === nodeId) ids.add(e.to);
+    if (e.to === nodeId) ids.add(e.from);
+  }
+  return ids;
+}
+
+/** Build a cubic‑bezier `d` attribute (vertical flow). */
+function edgePath(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): string {
+  const midY = (y1 + y2) / 2;
+  return `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Sub‑components                                                     */
+/* ------------------------------------------------------------------ */
+
+function Tooltip({
+  node,
+  accent,
+  containerRect,
+  nodeRect,
+}: {
+  node: WorkflowNode;
+  accent: string;
+  containerRect: DOMRect | null;
+  nodeRect: DOMRect | null;
+}) {
+  if (!containerRect || !nodeRect) return null;
+
+  const tooltipWidth = 240;
+  const gap = 12;
+
+  // Position relative to container
+  const nodeCenter = nodeRect.left + nodeRect.width / 2 - containerRect.left;
+  const nodeBottom = nodeRect.bottom - containerRect.top + gap;
+
+  // Keep within container bounds
+  let left = nodeCenter - tooltipWidth / 2;
+  if (left < 8) left = 8;
+  if (left + tooltipWidth > containerRect.width - 8)
+    left = containerRect.width - tooltipWidth - 8;
+
+  return (
+    <div
+      className="pointer-events-none absolute z-20 w-[240px] rounded-lg border border-border bg-popover p-3 shadow-md transition-all duration-150"
+      style={{ left, top: nodeBottom }}
+    >
+      <p className="mb-2 text-[13px] leading-snug text-foreground">
+        {node.detail.description}
+      </p>
+      <div className="flex flex-wrap gap-1">
+        {node.detail.tech.map((t) => (
+          <span
+            key={t}
+            className="rounded px-1.5 py-0.5 font-mono text-[10px]"
+            style={{
+              background: `color-mix(in oklch, ${accent} 10%, transparent)`,
+              color: accent,
+            }}
+          >
+            {t}
+          </span>
+        ))}
+      </div>
+      {node.detail.meta && (
+        <p className="mt-2 font-mono text-[10px] text-muted-foreground">
+          {node.detail.meta}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mobile fallback — vertical pipeline                                */
+/* ------------------------------------------------------------------ */
+
+function MobilePipeline({
+  nodes,
+  edges,
+  accent,
+}: WorkflowDiagramProps) {
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  // Topological-ish order: sort by y position
+  const sorted = [...nodes].sort((a, b) => a.position.y - b.position.y);
+
+  return (
+    <div className="flex flex-col gap-0">
+      {sorted.map((node, i) => {
+        const isOpen = expanded === node.id;
+        return (
+          <div key={node.id} className="flex items-start gap-4">
+            {/* Marker */}
+            <div className="flex flex-col items-center">
+              <div
+                className="h-2.5 w-2.5 shrink-0 rounded-full border-2"
+                style={{
+                  borderColor: accent,
+                  background:
+                    node.type === "ai" || node.type === "output"
+                      ? accent
+                      : "transparent",
+                }}
+              />
+              {i < sorted.length - 1 && (
+                <div className="w-px flex-1 min-h-[32px] bg-border" />
+              )}
+            </div>
+
+            {/* Content */}
+            <button
+              type="button"
+              className="mb-4 flex-1 text-left"
+              onClick={() => setExpanded(isOpen ? null : node.id)}
+            >
+              <p className="text-[13px] font-medium text-foreground">
+                {node.label}
+              </p>
+              {isOpen && (
+                <div className="mt-2 rounded-lg border border-border bg-popover p-3">
+                  <p className="mb-2 text-[12px] leading-relaxed text-muted-foreground">
+                    {node.detail.description}
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {node.detail.tech.map((t) => (
+                      <span
+                        key={t}
+                        className="rounded px-1.5 py-0.5 font-mono text-[10px]"
+                        style={{
+                          background: `color-mix(in oklch, ${accent} 10%, transparent)`,
+                          color: accent,
+                        }}
+                      >
+                        {t}
+                      </span>
+                    ))}
+                  </div>
+                  {node.detail.meta && (
+                    <p className="mt-1.5 font-mono text-[10px] text-muted-foreground">
+                      {node.detail.meta}
+                    </p>
+                  )}
+                </div>
+              )}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main diagram (desktop)                                             */
+/* ------------------------------------------------------------------ */
+
+export function WorkflowDiagram({
+  nodes,
+  edges,
+  accent,
+}: WorkflowDiagramProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const nodeRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const [hovered, setHovered] = useState<string | null>(null);
+  const [positions, setPositions] = useState<
+    Map<string, { cx: number; cy: number }>
+  >(new Map());
+  const [containerRect, setContainerRect] = useState<DOMRect | null>(null);
+  const [hoveredRect, setHoveredRect] = useState<DOMRect | null>(null);
+
+  // Compute pixel centres after layout
+  const measure = useCallback(() => {
+    const cEl = containerRef.current;
+    if (!cEl) return;
+    const cRect = cEl.getBoundingClientRect();
+    setContainerRect(cRect);
+    const map = new Map<string, { cx: number; cy: number }>();
+    nodeRefs.current.forEach((el, id) => {
+      const r = el.getBoundingClientRect();
+      map.set(id, {
+        cx: r.left + r.width / 2 - cRect.left,
+        cy: r.top + r.height / 2 - cRect.top,
+      });
+    });
+    setPositions(map);
+  }, []);
+
+  useEffect(() => {
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [measure]);
+
+  // Re‑measure once after first paint (node refs populated)
+  useEffect(() => {
+    const t = setTimeout(measure, 50);
+    return () => clearTimeout(t);
+  }, [measure]);
+
+  const connected = hovered ? connectedIds(hovered, edges) : null;
+
+  const handleHover = (id: string | null) => {
+    setHovered(id);
+    if (id) {
+      const el = nodeRefs.current.get(id);
+      if (el) setHoveredRect(el.getBoundingClientRect());
+    } else {
+      setHoveredRect(null);
+    }
+  };
+
+  const hoveredNode = hovered
+    ? nodes.find((n) => n.id === hovered) ?? null
+    : null;
+
+  // Container height based on node Y spread
+  const maxY = Math.max(...nodes.map((n) => n.position.y));
+  const containerHeight = Math.max(400, (maxY / 100) * 600 + 60);
+
+  return (
+    <>
+      {/* Desktop */}
+      <div
+        ref={containerRef}
+        className="relative hidden md:block"
+        style={{ height: containerHeight }}
+        onMouseLeave={() => handleHover(null)}
+      >
+        {/* SVG edges */}
+        <svg
+          className="pointer-events-none absolute inset-0 h-full w-full"
+          aria-hidden="true"
+        >
+          <defs>
+            <marker
+              id="arrowhead"
+              markerWidth="6"
+              markerHeight="5"
+              refX="5"
+              refY="2.5"
+              orient="auto"
+            >
+              <polygon
+                points="0 0, 6 2.5, 0 5"
+                fill={`color-mix(in oklch, ${accent} 30%, transparent)`}
+              />
+            </marker>
+          </defs>
+          {edges.map((edge) => {
+            const from = positions.get(edge.from);
+            const to = positions.get(edge.to);
+            if (!from || !to) return null;
+
+            const isConnected =
+              !connected ||
+              (connected.has(edge.from) && connected.has(edge.to));
+            const isDirectlyConnected =
+              hovered === edge.from || hovered === edge.to;
+
+            return (
+              <g key={`${edge.from}-${edge.to}`}>
+                <path
+                  d={edgePath(from.cx, from.cy, to.cx, to.cy)}
+                  fill="none"
+                  stroke={accent}
+                  strokeWidth={isDirectlyConnected ? 2 : 1.5}
+                  strokeOpacity={
+                    !connected ? 0.15 : isConnected ? 0.4 : 0.05
+                  }
+                  markerEnd="url(#arrowhead)"
+                  className="transition-all duration-200"
+                  strokeDasharray={edge.animated ? "6 4" : undefined}
+                >
+                  {edge.animated && (
+                    <animate
+                      attributeName="stroke-dashoffset"
+                      from="0"
+                      to="-20"
+                      dur="1.5s"
+                      repeatCount="indefinite"
+                    />
+                  )}
+                </path>
+                {edge.label && (
+                  <text
+                    x={(from.cx + to.cx) / 2}
+                    y={(from.cy + to.cy) / 2 - 6}
+                    textAnchor="middle"
+                    className="fill-muted-foreground text-[9px] font-mono"
+                    opacity={!connected ? 0.4 : isConnected ? 0.7 : 0.1}
+                  >
+                    {edge.label}
+                  </text>
+                )}
+              </g>
+            );
+          })}
+        </svg>
+
+        {/* Nodes */}
+        {nodes.map((node) => {
+          const isDim = connected && !connected.has(node.id);
+          const isActive = hovered === node.id;
+
+          return (
+            <div
+              key={node.id}
+              ref={(el) => {
+                if (el) nodeRefs.current.set(node.id, el);
+              }}
+              className="absolute -translate-x-1/2 -translate-y-1/2 cursor-default select-none rounded-lg border px-4 py-2.5 font-mono text-[13px] font-medium transition-all duration-200"
+              style={{
+                left: `${node.position.x}%`,
+                top: `${node.position.y}%`,
+                borderColor: isDim
+                  ? "var(--border)"
+                  : node.type === "ai"
+                    ? `color-mix(in oklch, ${accent} ${isActive ? "50%" : "25%"}, transparent)`
+                    : node.type === "output"
+                      ? `color-mix(in oklch, ${accent} ${isActive ? "40%" : "18%"}, transparent)`
+                      : "var(--border)",
+                background: isDim
+                  ? "var(--background)"
+                  : node.type === "ai"
+                    ? `color-mix(in oklch, ${accent} ${isActive ? "12%" : "6%"}, transparent)`
+                    : "var(--background)",
+                opacity: isDim ? 0.3 : 1,
+                transform: `translate(-50%, -50%) ${isActive ? "scale(1.04)" : "scale(1)"}`,
+                zIndex: isActive ? 10 : 1,
+              }}
+              onMouseEnter={() => handleHover(node.id)}
+              role="button"
+              tabIndex={0}
+              aria-label={`${node.label}: ${node.detail.description}`}
+              onFocus={() => handleHover(node.id)}
+              onBlur={() => handleHover(null)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  handleHover(hovered === node.id ? null : node.id);
+                }
+              }}
+            >
+              {node.label}
+            </div>
+          );
+        })}
+
+        {/* Tooltip */}
+        {hoveredNode && (
+          <Tooltip
+            node={hoveredNode}
+            accent={accent}
+            containerRect={containerRect}
+            nodeRect={hoveredRect}
+          />
+        )}
+      </div>
+
+      {/* Mobile */}
+      <div className="md:hidden">
+        <MobilePipeline nodes={nodes} edges={edges} accent={accent} />
+      </div>
+    </>
+  );
+}

package/src/i18n/config.ts

@@ -0,0 +1,8 @@
+export const locales = ["en", "ko", "ja"] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = "en";
+export const localeNames: Record<Locale, string> = {
+  en: "English",
+  ko: "한국어",
+  ja: "日本語",
+};

package/src/i18n/request.ts

@@ -0,0 +1,16 @@
+import { getRequestConfig } from "next-intl/server";
+import { routing } from "./routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+  if (
+    !locale ||
+    !routing.locales.includes(locale as (typeof routing.locales)[number])
+  ) {
+    locale = routing.defaultLocale;
+  }
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
+  };
+});

package/src/i18n/routing.ts

@@ -0,0 +1,12 @@
+import { defineRouting } from "next-intl/routing";
+import { createNavigation } from "next-intl/navigation";
+import { locales, defaultLocale } from "./config";
+
+export const routing = defineRouting({
+  locales,
+  defaultLocale,
+  localePrefix: "as-needed",
+});
+
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);

package/src/lib/supabase/client.ts

@@ -0,0 +1,18 @@
+import { createBrowserClient } from "@supabase/ssr";
+
+const COOKIE_DOMAIN =
+  typeof window !== "undefined" && window.location.hostname.endsWith(".naeil.dev")
+    ? ".naeil.dev"
+    : undefined;
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookieOptions: {
+        domain: COOKIE_DOMAIN,
+      },
+    },
+  );
+}

package/src/lib/supabase/middleware.ts

@@ -0,0 +1,42 @@
+import { createServerClient } from "@supabase/ssr";
+import { type NextRequest, NextResponse } from "next/server";
+
+function getCookieDomain(request: NextRequest): string | undefined {
+  const host = request.headers.get("host") || "";
+  return host.endsWith(".naeil.dev") || host === "naeil.dev"
+    ? ".naeil.dev"
+    : undefined;
+}
+
+export async function updateSession(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({ request });
+  const domain = getCookieDomain(request);
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value }) =>
+            request.cookies.set(name, value),
+          );
+          supabaseResponse = NextResponse.next({ request });
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, { ...options, domain }),
+          );
+        },
+      },
+    },
+  );
+
+  // Refresh the session — this calls Supabase Auth to validate/refresh tokens
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  return { response: supabaseResponse, user };
+}

package/src/lib/supabase/server.ts

@@ -0,0 +1,37 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies, headers } from "next/headers";
+
+function getCookieDomain(headerStore: Headers): string | undefined {
+  const host = headerStore.get("host") || "";
+  return host.endsWith(".naeil.dev") || host === "naeil.dev"
+    ? ".naeil.dev"
+    : undefined;
+}
+
+export async function createClient() {
+  const cookieStore = await cookies();
+  const headerStore = await headers();
+  const domain = getCookieDomain(headerStore);
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, { ...options, domain }),
+            );
+          } catch {
+            // The `setAll` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing sessions.
+          }
+        },
+      },
+    },
+  );
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/proxy.ts

@@ -0,0 +1,62 @@
+import { type NextRequest, NextResponse } from "next/server";
+import createIntlMiddleware from "next-intl/middleware";
+import { routing } from "./i18n/routing";
+import { updateSession } from "./lib/supabase/middleware";
+
+const intlMiddleware = createIntlMiddleware(routing);
+
+// Matches /sa/reports/<id> with optional locale prefix, but NOT /sa/reports
+const PROTECTED_ROUTE = /^\/(?:(?:en|ko|ja)\/)?sa\/reports\/[^/]+/;
+
+export default async function proxy(request: NextRequest) {
+  // 1. Refresh Supabase session (updates auth cookies)
+  const { response: supabaseResponse, user } = await updateSession(request);
+
+  // 2. Capture URL info BEFORE intl middleware (which may mutate request.nextUrl)
+  const { pathname } = request.nextUrl;
+  const nextParam = request.nextUrl.searchParams.get("next");
+
+  // 3. Check protected routes — redirect to login if unauthenticated
+  if (PROTECTED_ROUTE.test(pathname) && !user) {
+    const loginUrl = request.nextUrl.clone();
+    loginUrl.pathname = "/login";
+    loginUrl.searchParams.set("next", pathname);
+    return NextResponse.redirect(loginUrl);
+  }
+
+  // 4. Run next-intl middleware for locale routing
+  const intlResponse = intlMiddleware(request);
+
+  // 5. If visiting /login with a ?next param, store it in a cookie for post-OAuth redirect
+  //    Skip if next points back to /login itself (RSC refetch sends next=/login which overwrites the real value)
+  const loginMatch = pathname.match(/^\/(?:(?:en|ko|ja)\/)?login$/);
+  const isLoginSelf = nextParam?.replace(/^\/(?:en|ko|ja)\//, '/') === '/login';
+  if (loginMatch && nextParam && !isLoginSelf) {
+    intlResponse.cookies.set("auth_redirect_to", nextParam, {
+      path: "/",
+      maxAge: 600,
+      httpOnly: true,
+      sameSite: "lax",
+    });
+  }
+
+  // 6. Copy Supabase auth cookies onto the intl response
+  supabaseResponse.cookies.getAll().forEach((cookie) => {
+    intlResponse.cookies.set(cookie.name, cookie.value);
+  });
+
+  return intlResponse;
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all paths except:
+     * - _next (Next.js internals)
+     * - Static files (images, fonts, etc.)
+     * - favicon.ico
+     * - auth/callback (handled by route handler, not locale-prefixed)
+     */
+    "/((?!_next|auth/|.*\\..*|favicon\\.ico).*)",
+  ],
+};

package/src/tokens/color.json

@@ -0,0 +1,56 @@
+{
+  "color": {
+    "$description": "Primitive color palette — OKLCH color space",
+    "gray": {
+      "$description": "Pure neutral gray scale (chroma 0). Dark-first: 950=background, 50=text direction.",
+      "50": { "$type": "color", "$value": "oklch(0.985 0 0)" },
+      "100": { "$type": "color", "$value": "oklch(0.970 0 0)" },
+      "200": { "$type": "color", "$value": "oklch(0.922 0 0)" },
+      "300": { "$type": "color", "$value": "oklch(0.870 0 0)" },
+      "400": { "$type": "color", "$value": "oklch(0.708 0 0)" },
+      "500": { "$type": "color", "$value": "oklch(0.556 0 0)" },
+      "600": { "$type": "color", "$value": "oklch(0.439 0 0)" },
+      "700": { "$type": "color", "$value": "oklch(0.371 0 0)" },
+      "800": { "$type": "color", "$value": "oklch(0.269 0 0)" },
+      "900": { "$type": "color", "$value": "oklch(0.205 0 0)" },
+      "950": { "$type": "color", "$value": "oklch(0.145 0 0)" }
+    },
+    "accent": {
+      "$description": "Neutral blue accent scale. Default values — consumer projects may override.",
+      "50": { "$type": "color", "$value": "oklch(0.970 0.014 254)" },
+      "100": { "$type": "color", "$value": "oklch(0.932 0.032 255)" },
+      "200": { "$type": "color", "$value": "oklch(0.882 0.059 254)" },
+      "300": { "$type": "color", "$value": "oklch(0.809 0.105 254)" },
+      "400": { "$type": "color", "$value": "oklch(0.707 0.165 254)" },
+      "500": { "$type": "color", "$value": "oklch(0.623 0.214 259)" },
+      "600": { "$type": "color", "$value": "oklch(0.546 0.245 263)" },
+      "700": { "$type": "color", "$value": "oklch(0.488 0.243 264.376)" },
+      "800": { "$type": "color", "$value": "oklch(0.424 0.199 265)" },
+      "900": { "$type": "color", "$value": "oklch(0.379 0.146 265)" },
+      "950": { "$type": "color", "$value": "oklch(0.282 0.091 267)" }
+    },
+    "destructive": {
+      "$description": "Red scale for destructive/error states.",
+      "50": { "$type": "color", "$value": "oklch(0.971 0.013 17)" },
+      "100": { "$type": "color", "$value": "oklch(0.936 0.032 17)" },
+      "200": { "$type": "color", "$value": "oklch(0.885 0.062 18)" },
+      "300": { "$type": "color", "$value": "oklch(0.808 0.114 19)" },
+      "400": { "$type": "color", "$value": "oklch(0.704 0.191 22.216)" },
+      "500": { "$type": "color", "$value": "oklch(0.637 0.237 25)" },
+      "600": { "$type": "color", "$value": "oklch(0.577 0.245 27.325)" },
+      "700": { "$type": "color", "$value": "oklch(0.505 0.213 27)" },
+      "800": { "$type": "color", "$value": "oklch(0.444 0.177 26)" },
+      "900": { "$type": "color", "$value": "oklch(0.396 0.141 25)" },
+      "950": { "$type": "color", "$value": "oklch(0.258 0.092 26)" }
+    },
+    "project": {
+      "$description": "Per-project accent colors — theme-independent, used across light/dark.",
+      "cc": { "$type": "color", "$value": "oklch(0.723 0.219 149)" },
+      "pkm": { "$type": "color", "$value": "oklch(0.627 0.265 303)" },
+      "naeilUi": { "$type": "color", "$value": "oklch(0.623 0.214 259)" },
+      "baby": { "$type": "color", "$value": "oklch(0.769 0.188 70.08)" }
+    },
+    "white": { "$type": "color", "$value": "oklch(1 0 0)" },
+    "black": { "$type": "color", "$value": "oklch(0 0 0)" }
+  }
+}