@naeil/ui 0.2.0 → 0.4.0

package/src/styles/theme.css

@@ -1,8 +1,8 @@
+/* Generated from src/tokens — DO NOT EDIT. */
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
-  --color-card-elevated: var(--card-elevated);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
@@ -35,6 +35,18 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-card-elevated: var(--card-elevated);
+  --color-primary-hover: var(--primary-hover);
+  --color-surface-selected: var(--surface-selected);
+  --color-border-strong: var(--border-strong);
+  --color-error: var(--error);
+  --color-error-bg: var(--error-bg);
+  --color-success: var(--success);
+  --color-success-bg: var(--success-bg);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
 
   --color-project-cc: var(--project-cc);
   --color-project-sa: var(--project-sa);
@@ -42,9 +54,26 @@
   --color-project-naeilUi: var(--project-naeilUi);
   --color-project-baby: var(--project-baby);
 
-  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
+  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans JP', -apple-system, system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
 
+  --text-xs: 0.8125rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.25rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5625;
+  --leading-relaxed: 1.875;
+  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
   --radius-none: var(--radius-none-value);
   --radius-sm: var(--radius-sm-value);
   --radius-md: var(--radius-md-value);
@@ -64,43 +93,69 @@
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-elevated: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.970 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.970 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.970 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --border-subtle: oklch(0 0 0 / 6%);
-  --border-subtle-hover: oklch(0 0 0 / 12%);
-  --surface-subtle: oklch(0 0 0 / 2%);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --background: #f7f8fa;
+  --foreground: #202127;
+  --card: #ffffff;
+  --card-foreground: #202127;
+  --popover: #ffffff;
+  --popover-foreground: #202127;
+  --primary: #292929;
+  --primary-foreground: #ffffff;
+  --secondary: #ebebeb;
+  --secondary-foreground: #202127;
+  --muted: #f0f1f5;
+  --muted-foreground: #5f626e;
+  --accent: #ebebeb;
+  --accent-foreground: #202127;
+  --destructive: #b73a45;
+  --destructive-foreground: #ffffff;
+  --border: #e2e3e9;
+  --border-subtle: #e2e3e9;
+  --border-subtle-hover: #8c8f9b;
+  --surface-subtle: #f0f1f5;
+  --input: #8c8f9b;
+  --ring: #616161;
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.970 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: #ffffff;
+  --sidebar-foreground: #202127;
+  --sidebar-primary: #292929;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ebebeb;
+  --sidebar-accent-foreground: #202127;
+  --sidebar-border: #e2e3e9;
+  --sidebar-ring: #616161;
+  --card-elevated: #ffffff;
+  --primary-hover: #414141;
+  --surface-selected: #ebebeb;
+  --border-strong: #8c8f9b;
+  --error: #b73a45;
+  --error-bg: #fff0f1;
+  --success: #246a49;
+  --success-bg: #e9f5ee;
+  --warning: #865d17;
+  --warning-bg: #fff3da;
+  --info: #245ec7;
+  --info-bg: #edf3ff;
 
+  --ui-control-height: 40px;
+  --ui-control-height-compact: 36px;
+  --ui-touch-target: 44px;
+  --ui-row-height: 72px;
+  --ui-row-height-compact: 60px;
+  --ui-panel-padding: 24px;
+  --ui-panel-padding-compact: 20px;
+  --ui-field-gap: 24px;
+  --ui-field-gap-compact: 16px;
+  --ui-width-reading: 640px;
+  --ui-width-settings: 640px;
+  --ui-width-list: 1200px;
+  --ui-width-short-form: 480px;
+  --ui-motion-fast: 120ms;
+  --ui-motion-standard: 180ms;
   --project-cc: oklch(0.704 0.140 181);
   --project-sa: oklch(0.723 0.219 149);
   --project-pkm: oklch(0.627 0.265 303);
@@ -108,9 +163,9 @@
   --project-baby: oklch(0.769 0.188 70.08);
 
   --radius-none-value: 0px;
-  --radius-sm-value: 2px;
-  --radius-md-value: 4px;
-  --radius-lg-value: 8px;
+  --radius-sm-value: 4px;
+  --radius-md-value: 8px;
+  --radius-lg-value: 12px;
 
   --spacing-0-value: 0px;
   --spacing-1-value: 4px;
@@ -126,81 +181,113 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-elevated: oklch(0.18 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --border-subtle: oklch(1 0 0 / 6%);
-  --border-subtle-hover: oklch(1 0 0 / 12%);
-  --surface-subtle: oklch(1 0 0 / 3%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --background: #0b0c0e;
+  --foreground: #eff0f3;
+  --card: #111215;
+  --card-foreground: #eff0f3;
+  --popover: #191a1f;
+  --popover-foreground: #eff0f3;
+  --primary: #e5e5e5;
+  --primary-foreground: #171717;
+  --secondary: #262626;
+  --secondary-foreground: #eff0f3;
+  --muted: #202127;
+  --muted-foreground: #a4a6b0;
+  --accent: #262626;
+  --accent-foreground: #eff0f3;
+  --destructive: #b73a45;
+  --destructive-foreground: #ffffff;
+  --border: #292b33;
+  --border-subtle: #292b33;
+  --border-subtle-hover: #646773;
+  --surface-subtle: #202127;
+  --input: #646773;
+  --ring: #b5b5b5;
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar: #111215;
+  --sidebar-foreground: #eff0f3;
+  --sidebar-primary: #e5e5e5;
+  --sidebar-primary-foreground: #171717;
+  --sidebar-accent: #262626;
+  --sidebar-accent-foreground: #eff0f3;
+  --sidebar-border: #292b33;
+  --sidebar-ring: #b5b5b5;
+  --card-elevated: #191a1f;
+  --primary-hover: #cccccc;
+  --surface-selected: #262626;
+  --border-strong: #646773;
+  --error: #f0a0a0;
+  --error-bg: #342021;
+  --success: #87c9a6;
+  --success-bg: #182b23;
+  --warning: #e4bf78;
+  --warning-bg: #302819;
+  --info: #a2c2ff;
+  --info-bg: #18263f;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-elevated: oklch(0.18 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --border-subtle: oklch(1 0 0 / 6%);
-    --border-subtle-hover: oklch(1 0 0 / 12%);
-    --surface-subtle: oklch(1 0 0 / 3%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
+    --background: #0b0c0e;
+    --foreground: #eff0f3;
+    --card: #111215;
+    --card-foreground: #eff0f3;
+    --popover: #191a1f;
+    --popover-foreground: #eff0f3;
+    --primary: #e5e5e5;
+    --primary-foreground: #171717;
+    --secondary: #262626;
+    --secondary-foreground: #eff0f3;
+    --muted: #202127;
+    --muted-foreground: #a4a6b0;
+    --accent: #262626;
+    --accent-foreground: #eff0f3;
+    --destructive: #b73a45;
+    --destructive-foreground: #ffffff;
+    --border: #292b33;
+    --border-subtle: #292b33;
+    --border-subtle-hover: #646773;
+    --surface-subtle: #202127;
+    --input: #646773;
+    --ring: #b5b5b5;
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar: #111215;
+    --sidebar-foreground: #eff0f3;
+    --sidebar-primary: #e5e5e5;
+    --sidebar-primary-foreground: #171717;
+    --sidebar-accent: #262626;
+    --sidebar-accent-foreground: #eff0f3;
+    --sidebar-border: #292b33;
+    --sidebar-ring: #b5b5b5;
+    --card-elevated: #191a1f;
+    --primary-hover: #cccccc;
+    --surface-selected: #262626;
+    --border-strong: #646773;
+    --error: #f0a0a0;
+    --error-bg: #342021;
+    --success: #87c9a6;
+    --success-bg: #182b23;
+    --warning: #e4bf78;
+    --warning-bg: #302819;
+    --info: #a2c2ff;
+    --info-bg: #18263f;
   }
 }
+
+:root[data-ui-density="compact"] {
+  --ui-control-height: 36px;
+  --ui-row-height: 60px;
+  --ui-panel-padding: 20px;
+  --ui-field-gap: 16px;
+}
+@media (max-width: 560px), (pointer: coarse) {
+  :root, :root[data-ui-density="compact"] { --ui-control-height: var(--ui-touch-target); --ui-row-height: 72px; }
+}

package/messages/en.json

@@ -1,221 +0,0 @@
-{
-  "common": {
-    "appName": "naeil",
-    "home": "Home",
-    "projects": "Projects",
-    "design": "Design System",
-    "loading": "Loading..."
-  },
-  "nav": {
-    "home": "Home",
-    "projects": "Projects",
-    "blog": "Blog"
-  },
-  "hero": {
-    "title": ".naeil",
-    "subtitle": "Build · Ship · Iterate"
-  },
-  "projects": {
-    "title": "Projects",
-    "subtitle": "Personal tools built for real use — not demos.",
-    "cc": {
-      "name": "Content Collector",
-      "description": "Automated content collection from RSS, YouTube, Reddit + AI summarization"
-    },
-    "pkm": {
-      "name": "PKM",
-      "description": "Personal knowledge management — document parsing, embeddings, semantic search"
-    },
-    "naeilUi": {
-      "name": "naeil-ui",
-      "description": "Minimal design system — OKLCH tokens, Tailwind v4, shadcn"
-    },
-    "babyAgent": {
-      "name": "Baby Agent",
-      "description": "Parenting AI agent — LINE-based Q&A, records, reminders"
-    },
-    "status": {
-      "active": "Active",
-      "coming": "Coming Soon"
-    },
-    "sa": {
-      "name": "Sustainability Analyzer",
-      "description": "AI-powered ESG report analysis — PDF parsing, qualitative assessment, comparison tables"
-    }
-  },
-  "stack": {
-    "label": "Built with"
-  },
-  "cc": {
-    "name": "Content Collector",
-    "description": "Autonomous local pipeline — noisy tech streams to a daily, decision-ready brief.",
-    "overview": "Automated content pipeline with local AI processing.\n\nTech content from multiple sources — GitHub, Reddit, Threads — through a local AI pipeline. Embedding, classification, clustering, summarization. Raw content to daily editorial digest.\n\nFull local execution — Ollama + free APIs. Structured data in PostgreSQL + pgvector. Semantic search built in.",
-    "features": {
-      "collect": {
-        "title": "Multi-Source Ingestion",
-        "desc": "RSS, Reddit, Threads — pulled and normalized into one pipeline"
-      },
-      "classify": {
-        "title": "Local AI Triage",
-        "desc": "Qwen3 14B on-device — relevance scoring, topic labeling, priority ranking"
-      },
-      "embed": {
-        "title": "Semantic Vector Index",
-        "desc": "BGE-M3 embeddings in pgvector — fast similarity search and topic-level recall"
-      },
-      "digest": {
-        "title": "Daily Digest",
-        "desc": "Gemini-generated editorial summaries — LINE message + clean HTML report"
-      },
-      "zeroCost": {
-        "title": "Zero Monthly Cost",
-        "desc": "Local Mac Mini, open models, free-tier APIs — no paid infrastructure"
-      },
-      "alerts": {
-        "title": "Real-Time Alerts",
-        "desc": "Immediate notifications on high-priority signals — not hours later"
-      }
-    },
-    "workflow": {
-      "github": {
-        "desc": "GitHub releases and discussions via RSS feeds",
-        "meta": "30min interval"
-      },
-      "reddit": {
-        "desc": "Subreddit posts via RSS and JSON search API",
-        "meta": "30min interval"
-      },
-      "threads": {
-        "desc": "Profile scraping via Playwright headless browser",
-        "meta": "30min interval"
-      },
-      "collector": {
-        "desc": "Source-specific dispatch, content-hash deduplication",
-        "meta": "SHA-256 dedup"
-      },
-      "postgres": {
-        "desc": "Raw items, classifications, embeddings, clusters, digest history"
-      },
-      "embed": {
-        "desc": "1024-dim multilingual vectors for similarity search",
-        "meta": "~2s per item"
-      },
-      "classify": {
-        "desc": "Topic, importance score, content type, tags — auto-labeled",
-        "meta": "~18s per item"
-      },
-      "cluster": {
-        "desc": "Cosine similarity grouping, hot score ranking"
-      },
-      "digest": {
-        "desc": "Editorial LINE summary + detailed HTML report from top content",
-        "meta": "Free API"
-      },
-      "line": {
-        "desc": "Concise daily summary pushed to LINE group"
-      },
-      "html": {
-        "desc": "Full categorized report with links and scores"
-      }
-    }
-  },
-  "pkm": {
-    "name": "PKM",
-    "description": "Personal knowledge base — parse, embed, search your own documents."
-  },
-  "babyAgent": {
-    "name": "Baby Agent",
-    "description": "Parenting AI companion on LINE — Q&A, growth tracking, schedule reminders."
-  },
-  "design": {
-    "title": "naeil-ui",
-    "subtitle": "Design System Showcase — Tokens · Components · Themes"
-  },
-  "blogPage": {
-    "title": "Blog",
-    "subtitle": "Build notes, research, and iteration logs.",
-    "comingSoon": "Coming Soon"
-  },
-  "footer": {
-    "tagline": "Tomorrow starts here.",
-    "navigation": "Navigation",
-    "projects": "Projects",
-    "blog": "Blog",
-    "social": "Social"
-  },
-  "auth": {
-    "login": "Sign in",
-    "loginWithGoogle": "Sign in with Google",
-    "loginWithGithub": "Sign in with GitHub",
-    "loginDescription": "Sign in to access all features",
-    "redirecting": "Redirecting...",
-    "logout": "Sign out",
-    "profile": "Profile"
-  },
-  "locale": {
-    "switchLabel": "Language"
-  },
-  "sa": {
-    "name": "Sustainability Analyzer",
-    "description": "AI-driven ESG report analysis — topic discovery, qualitative assessment, automated cross-company comparison.",
-    "overview": "An analysis pipeline that parses corporate ESG report PDFs and performs systematic qualitative assessments with AI.\n\nDocling layout parser preserves table and text structure through hierarchical chunking. BGE-M3 embeddings (Dense+Sparse) enable hybrid semantic search. Claude auto-discovers 41 ESG topics and generates 415 checklist items for qualitative evaluation.\n\nLocal embeddings + free APIs. Structured storage in PostgreSQL + pgvector.",
-    "features": {
-      "ingest": {
-        "title": "Structure-Preserving PDF Parsing",
-        "desc": "Docling layout parser — hierarchical chunking that preserves tables and section boundaries"
-      },
-      "embed": {
-        "title": "Hybrid Search",
-        "desc": "BGE-M3 Dense+Sparse embeddings — pgvector hybrid semantic search"
-      },
-      "topics": {
-        "title": "Auto Topic Discovery",
-        "desc": "Claude Sonnet — auto-discovers 41 topics and 415 checklist items from ESG reports"
-      },
-      "assess": {
-        "title": "AI Qualitative Assessment",
-        "desc": "Checklist-based evaluation per topic — cited evidence, scores, and commentary"
-      },
-      "compare": {
-        "title": "Cross-Company Comparison",
-        "desc": "Sector-filtered topic × company matrix — auto-generated comparison tables"
-      },
-      "zeroCost": {
-        "title": "Local + Free",
-        "desc": "BGE-M3 on-device embeddings, Claude & Gemini free-tier usage"
-      }
-    },
-    "workflow": {
-      "pdf": {
-        "desc": "Corporate ESG/sustainability report PDF input",
-        "meta": "Annual reports"
-      },
-      "docling": {
-        "desc": "Layout-based structural parsing — single-chunk tables, section boundary preservation",
-        "meta": "Tables+Text"
-      },
-      "chunk": {
-        "desc": "Parent-child hierarchical chunking — context preservation + granular retrieval",
-        "meta": "parent 1K / child 512"
-      },
-      "bgem3": {
-        "desc": "Dense (1024d) + Sparse (learned BM25) simultaneous embedding generation",
-        "meta": "FlagEmbedding"
-      },
-      "pgvector": {
-        "desc": "Chunks, embeddings, assessments, comparisons — full structured storage"
-      },
-      "search": {
-        "desc": "Dense+Sparse hybrid search with parent context expansion"
-      },
-      "claude": {
-        "desc": "Topic discovery, checklist generation, evidence-based qualitative assessment",
-        "meta": "Sonnet"
-      },
-      "report": {
-        "desc": "Topic × company comparison table HTML report generation",
-        "meta": "Sector filter"
-      }
-    }
-  }
-}