@jogak/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jogak/ui",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "Showcase viewer UI for Jogak — Sidebar / Preview / Controls / Actions and the JogakApp shell.",
   "keywords": [
     "jogak",
@@ -45,6 +45,7 @@
     "src/app",
     "src/components",
     "src/hooks",
+    "src/styles",
     "src/index.ts",
     "src/vite-env.d.ts",
     "README.md",
@@ -59,9 +60,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
-    "@jogak/core": "0.1.0-alpha.3",
-    "@jogak/react": "0.1.0-alpha.3"
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@jogak/core": "0.1.0-alpha.5",
+    "@jogak/react": "0.1.0-alpha.5"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",

package/src/app/App.tsx

@@ -126,19 +126,15 @@ export function JogakApp({
   return (
     <JogakProvider registry={registry}>
       <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: '260px 1fr',
-          height: '100dvh',
-          overflow: 'hidden',
-        }}
+        data-jogak-shell
+        className="jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden"
       >
         <Sidebar
           selectedEntryId={selectedEntryId}
           selectedJogakName={selectedJogakName}
           onSelect={handleSelect}
         />
-        <main style={{ overflow: 'hidden', minHeight: 0 }}>
+        <main className="jogak:overflow-hidden jogak:min-h-0">
           {selectedEntryId !== null ? (
             <Preview
               entryId={selectedEntryId}
@@ -150,15 +146,7 @@ export function JogakApp({
               onResolveJogak={handleResolveJogak}
             />
           ) : (
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                color: '#9ca3af',
-              }}
-            >
+            <div className="jogak:flex jogak:items-center jogak:justify-center jogak:h-full jogak:text-[var(--jogak-color-fg-subtle)]">
               Select a component from the sidebar
             </div>
           )}

package/src/app/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import 'virtual:jogak'
 import { _jogakCodeTheme } from 'virtual:jogak'
+import '../styles/jogak.css'
 import { JogakApp } from './App.js'
 
 const rootEl = document.getElementById('root')

package/src/components/Actions/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import type { ReactElement } from 'react'
+import clsx from 'clsx'
 import { defaultActionChannel } from '@jogak/core'
 import type { ActionLog } from '@jogak/core'
 
@@ -41,75 +42,44 @@ export function Actions(): ReactElement {
     return defaultActionChannel.subscribe(setLogs)
   }, [])
 
+  const isEmpty = logs.length === 0
+
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <div
-        style={{
-          padding: '6px 20px',
-          fontSize: 11,
-          fontWeight: 700,
-          color: '#9ca3af',
-          textTransform: 'uppercase',
-          letterSpacing: '0.08em',
-          borderBottom: '1px solid #e5e7eb',
-          background: '#f9fafb',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          flexShrink: 0,
-        }}
-      >
+    <div className="jogak:h-full jogak:flex jogak:flex-col">
+      <div className="jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)] jogak:flex jogak:items-center jogak:justify-between jogak:shrink-0">
         <span>Actions {logs.length > 0 && `(${logs.length.toString()})`}</span>
         <button
           type="button"
           onClick={() => { defaultActionChannel.clear() }}
-          disabled={logs.length === 0}
-          style={{
-            fontSize: 10,
-            fontWeight: 600,
-            padding: '2px 8px',
-            border: '1px solid #d1d5db',
-            borderRadius: 3,
-            background: '#fff',
-            color: logs.length === 0 ? '#9ca3af' : '#374151',
-            cursor: logs.length === 0 ? 'default' : 'pointer',
-            textTransform: 'none',
-            letterSpacing: 0,
-          }}
+          disabled={isEmpty}
+          className={clsx(
+            'jogak:text-[10px] jogak:font-semibold jogak:px-2 jogak:py-0.5 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-sm)] jogak:bg-[var(--jogak-color-bg)] jogak:normal-case jogak:tracking-normal',
+            isEmpty
+              ? 'jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default'
+              : 'jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer',
+          )}
         >
           Clear
         </button>
       </div>
 
-      <div style={{ flex: 1, overflow: 'auto' }}>
-        {logs.length === 0 ? (
-          <div
-            style={{
-              padding: '12px 20px',
-              color: '#9ca3af',
-              fontSize: 13,
-            }}
-          >
+      <div className="jogak:flex-1 jogak:overflow-auto">
+        {isEmpty ? (
+          <div className="jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none">
             함수 prop이 호출되면 여기에 기록됩니다
           </div>
         ) : (
-          <ul style={{ listStyle: 'none', margin: 0, padding: 0, fontFamily: 'monospace', fontSize: 12 }}>
+          <ul className="jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]">
             {logs.map((log) => (
               <li
                 key={log.id}
-                style={{
-                  display: 'flex',
-                  alignItems: 'baseline',
-                  gap: 10,
-                  padding: '6px 20px',
-                  borderBottom: '1px solid #f3f4f6',
-                }}
+                className="jogak:flex jogak:items-baseline jogak:gap-[10px] jogak:px-5 jogak:py-1.5 jogak:border-b jogak:border-[var(--jogak-color-border-muted)]"
               >
-                <span style={{ color: '#9ca3af', fontSize: 11, minWidth: 92 }}>
+                <span className="jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]">
                   {formatTime(log.timestamp)}
                 </span>
-                <span style={{ color: '#7c3aed', fontWeight: 600 }}>{log.name}</span>
-                <span style={{ color: '#374151', wordBreak: 'break-all', flex: 1 }}>
+                <span className="jogak:text-[var(--jogak-color-violet)] jogak:font-semibold">{log.name}</span>
+                <span className="jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1">
                   ({formatArgs(log.args)})
                 </span>
               </li>

package/src/components/Controls/index.tsx

@@ -1,4 +1,5 @@
-import type { ReactElement, ChangeEvent, CSSProperties } from 'react'
+import type { ReactElement, ChangeEvent } from 'react'
+import clsx from 'clsx'
 import type { ArgType } from '@jogak/core'
 
 export interface ControlsProps {
@@ -34,6 +35,34 @@ interface ControlInputProps {
   readonly onArgChange: (key: string, value: unknown) => void
 }
 
+/**
+ * input/select 공용 className — §6.10 의 inputClass 상수.
+ *
+ * `<select>` 에 `appearance-none` 을 일부러 적용하지 않는다 (UA dropdown 화살표 보존, §3.5).
+ * alpha.4 baseline 이 UA 기본 select 화살표를 캡처한 상태라 픽셀 동등을 위해 유지.
+ */
+const inputClass =
+  'jogak:px-2 jogak:py-1 ' +
+  'jogak:border jogak:border-[var(--jogak-color-border-strong)] ' +
+  'jogak:rounded-[var(--jogak-radius-md)] ' +
+  'jogak:text-[13px] ' +
+  'jogak:w-full jogak:max-w-[280px]'
+
+/** th className 상수 — Controls table header cell. */
+const thClass =
+  'jogak:px-5 jogak:py-1.5 ' +
+  'jogak:text-left ' +
+  'jogak:text-[var(--jogak-color-fg-muted)] ' +
+  'jogak:font-medium ' +
+  'jogak:text-[12px] ' +
+  'jogak:border-b jogak:border-[var(--jogak-color-border)]'
+
+/** td className 상수 — Controls table body cell. */
+const tdClass =
+  'jogak:px-5 jogak:py-2 ' +
+  'jogak:align-middle ' +
+  'jogak:border-b jogak:border-[var(--jogak-color-border-muted)]'
+
 function ControlInput({ argKey, value, argType, onArgChange }: ControlInputProps): ReactElement {
   const kind = resolveControlKind(value, argType)
 
@@ -46,7 +75,7 @@ function ControlInput({ argKey, value, argType, onArgChange }: ControlInputProps
           onChange={(e: ChangeEvent<HTMLInputElement>) => {
             onArgChange(argKey, e.target.checked)
           }}
-          style={{ cursor: 'pointer', width: 16, height: 16, accentColor: '#2563eb' }}
+          className="jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"
         />
       )
     case 'number':
@@ -57,7 +86,7 @@ function ControlInput({ argKey, value, argType, onArgChange }: ControlInputProps
           onChange={(e: ChangeEvent<HTMLInputElement>) => {
             onArgChange(argKey, e.target.valueAsNumber)
           }}
-          style={inputStyle}
+          className={inputClass}
         />
       )
     case 'select': {
@@ -68,7 +97,7 @@ function ControlInput({ argKey, value, argType, onArgChange }: ControlInputProps
           onChange={(e: ChangeEvent<HTMLSelectElement>) => {
             onArgChange(argKey, e.target.value)
           }}
-          style={inputStyle}
+          className={inputClass}
         >
           {options.map((opt) => (
             <option key={String(opt)} value={String(opt)}>
@@ -86,91 +115,44 @@ function ControlInput({ argKey, value, argType, onArgChange }: ControlInputProps
           onChange={(e: ChangeEvent<HTMLInputElement>) => {
             onArgChange(argKey, e.target.value)
           }}
-          style={inputStyle}
+          className={inputClass}
         />
       )
     case 'action':
       return (
-        <span
-          style={{
-            display: 'inline-block',
-            padding: '2px 8px',
-            fontSize: 11,
-            fontWeight: 600,
-            color: '#7c3aed',
-            background: '#f5f3ff',
-            border: '1px solid #ddd6fe',
-            borderRadius: 4,
-            fontFamily: 'monospace',
-          }}
-        >
+        <span className="jogak:inline-block jogak:px-2 jogak:py-0.5 jogak:text-[11px] jogak:font-semibold jogak:text-[var(--jogak-color-violet)] jogak:bg-[var(--jogak-color-violet-bg)] jogak:border jogak:border-[var(--jogak-color-violet-border)] jogak:rounded-[var(--jogak-radius-md)] jogak:font-[family-name:var(--jogak-font-mono)] jogak:leading-none">
           (action)
         </span>
       )
     case 'json':
       return (
-        <code style={{ fontSize: 12, color: '#6b7280', fontFamily: 'monospace' }}>
+        <code className="jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]">
           {JSON.stringify(value)}
         </code>
       )
   }
 }
 
-const inputStyle: CSSProperties = {
-  padding: '4px 8px',
-  border: '1px solid #d1d5db',
-  borderRadius: 4,
-  fontSize: 13,
-  width: '100%',
-  maxWidth: 280,
-}
-
-const thStyle: CSSProperties = {
-  padding: '6px 20px',
-  textAlign: 'left',
-  color: '#6b7280',
-  fontWeight: 500,
-  fontSize: 12,
-  borderBottom: '1px solid #e5e7eb',
-}
-
-const tdStyle: CSSProperties = {
-  padding: '8px 20px',
-  verticalAlign: 'middle',
-  borderBottom: '1px solid #f3f4f6',
-}
-
 export function Controls({ args, argTypes, onArgChange }: ControlsProps): ReactElement {
   const keys = Array.from(new Set([...Object.keys(args), ...Object.keys(argTypes)]))
   const entries = keys.map((k) => [k, args[k]] as const)
 
   return (
-    <div style={{ borderTop: '2px solid #e5e7eb' }}>
-      <div
-        style={{
-          padding: '6px 20px',
-          fontSize: 11,
-          fontWeight: 700,
-          color: '#9ca3af',
-          textTransform: 'uppercase',
-          letterSpacing: '0.08em',
-          borderBottom: '1px solid #e5e7eb',
-          background: '#f9fafb',
-        }}
-      >
+    <div className="jogak:border-t-2 jogak:border-[var(--jogak-color-border)]">
+      <div className="jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)]">
         Controls
       </div>
       {entries.length === 0 ? (
-        <div style={{ padding: '12px 20px', color: '#9ca3af', fontSize: 13 }}>
+        <div className="jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]">
           No args defined
         </div>
       ) : (
-        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+        <table className="jogak:w-full jogak:border-collapse jogak:text-[13px]">
           <thead>
             <tr>
-              <th style={thStyle}>Name</th>
-              <th style={thStyle}>Control</th>
-              <th style={thStyle}>Description</th>
+              <th className={thClass}>Name</th>
+              <th className={thClass}>Control</th>
+              <th className={thClass}>Description</th>
             </tr>
           </thead>
           <tbody>
@@ -179,17 +161,14 @@ export function Controls({ args, argTypes, onArgChange }: ControlsProps): ReactE
               return (
                 <tr key={key}>
                   <td
-                    style={{
-                      ...tdStyle,
-                      fontFamily: 'monospace',
-                      fontSize: 12,
-                      color: '#374151',
-                      whiteSpace: 'nowrap',
-                    }}
+                    className={clsx(
+                      tdClass,
+                      'jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap',
+                    )}
                   >
                     {key}
                   </td>
-                  <td style={tdStyle}>
+                  <td className={tdClass}>
                     <ControlInput
                       argKey={key}
                       value={value}
@@ -197,7 +176,7 @@ export function Controls({ args, argTypes, onArgChange }: ControlsProps): ReactE
                       onArgChange={onArgChange}
                     />
                   </td>
-                  <td style={{ ...tdStyle, color: '#9ca3af' }}>
+                  <td className={clsx(tdClass, 'jogak:text-[var(--jogak-color-fg-subtle)]')}>
                     {argType?.description ?? ''}
                   </td>
                 </tr>