@naeil/ui 0.1.0 → 0.2.0

package/src/components/workflow-diagram.tsx

@@ -1,414 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

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

package/src/proxy.ts

@@ -1,62 +0,0 @@
-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

@@ -1,56 +0,0 @@
-{
-  "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)" }
-  }
-}