@jogak/ui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to Jogak packages are documented here. The repository follow
 
 Version numbers apply to all packages in the workspace (synchronized release).
 
+## [0.1.0-alpha.2] — 2026-05-07
+
+### Fixed
+
+- **`@jogak/ui`**: Published package was missing `src/app/main.tsx` (referenced by `index.html` as the SPA entry), causing `jogak dev` to 404 on the entry script and `jogak build` to fail with `Failed to resolve /src/app/main.tsx`. The `files` field in `package.json` only included `dist/`, but `runHost` uses the package's `index.html` as the Vite root and resolves `/src/app/main.tsx` from source. Added `src/app`, `src/components`, `src/hooks`, `src/index.ts`, `src/vite-env.d.ts` to `files`. Internal `src/host` and `src/examples` remain excluded (host is consumed via the published `dist/host` build; examples are repository-only demos).
+
+Other packages: no source changes; version bumped to keep the workspace synchronized.
+
+## [0.1.0-alpha.1] — 2026-05-07
+
+### Changed
+
+- **CI**: Switched npm publish authentication from `NPM_TOKEN` secret to npm Trusted Publisher (GitHub Actions OIDC). The release workflow no longer reads `NODE_AUTH_TOKEN`; identity is verified via the OIDC token issued for `id-token: write`. No functional changes to package source code.
+
 ## [0.1.0-alpha.0] — 2026-05-07
 
 First public preview release. API is not yet stable.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jogak/ui",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Showcase viewer UI for Jogak — Sidebar / Preview / Controls / Actions and the JogakApp shell.",
   "keywords": [
     "jogak",
@@ -42,6 +42,11 @@
   "files": [
     "dist",
     "index.html",
+    "src/app",
+    "src/components",
+    "src/hooks",
+    "src/index.ts",
+    "src/vite-env.d.ts",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
@@ -55,8 +60,8 @@
   },
   "dependencies": {
     "prism-react-renderer": "^2.4.1",
-    "@jogak/core": "0.1.0-alpha.0",
-    "@jogak/react": "0.1.0-alpha.0"
+    "@jogak/core": "0.1.0-alpha.2",
+    "@jogak/react": "0.1.0-alpha.2"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",

package/src/app/App.tsx

@@ -0,0 +1,169 @@
+import { useState, useCallback, useEffect, useMemo } from 'react'
+import { ComponentRegistry, defaultRegistry } from '@jogak/core'
+import type { RegistryEntry, RegistryEntryMeta } from '@jogak/core'
+import { JogakProvider } from '@jogak/react'
+import { Sidebar } from '../components/Sidebar/index.js'
+import { Preview } from '../components/Preview/index.js'
+import type { ReactElement } from 'react'
+
+/**
+ * `JogakApp` props.
+ *
+ *  - `entries`: 기존 — eager 모드. 정적 빌드 / 테스트용. 새 `ComponentRegistry`에 즉시 register.
+ *  - `metas`  : NEW — lazy 모드. `defaultRegistry`를 그대로 사용하면서 metas를 `registerMeta`로 등록.
+ *  - 둘 다 미지정 → `defaultRegistry` 그대로 사용 (인덱스 가상모듈 `import 'virtual:jogak'`이 채웠다고 가정).
+ *  - 둘 다 지정 → console.warn 후 `entries` 우선 (eager 우선, breaking 회피).
+ *
+ * 외부 호환을 위해 `entries`는 optional로만 변경되며 나머지 시그니처는 그대로 유지된다.
+ */
+export interface JogakAppProps {
+  readonly entries?: readonly RegistryEntry[]
+  readonly metas?: readonly RegistryEntryMeta[]
+  readonly codeTheme?: string
+}
+
+function readUrlParams(): { entryId: string; jogakName: string | null } | null {
+  if (typeof window === 'undefined') return null
+  const params = new URLSearchParams(window.location.search)
+  const entryId = params.get('entry')
+  if (entryId === null) return null
+  const jogakName = params.get('jogak')
+  return { entryId, jogakName }
+}
+
+function pushUrl(entryId: string, jogakName: string): void {
+  const params = new URLSearchParams()
+  params.set('entry', entryId)
+  params.set('jogak', jogakName)
+  window.history.pushState({}, '', `?${params.toString()}`)
+}
+
+export function JogakApp({
+  entries,
+  metas,
+  codeTheme = 'vsDark',
+}: JogakAppProps = {}): ReactElement {
+  // ── 4가지 모드 결정 (계약 §5.2) ─────────────────────────────────────
+  // 1) entries가 주어지면: 새 ComponentRegistry에 register (eager, 기존 동작)
+  // 2) metas만 주어지면: defaultRegistry 사용 + metas를 registerMeta로 등록
+  // 3) 둘 다 미지정: defaultRegistry 그대로 (인덱스 가상모듈이 채웠다고 가정)
+  // 4) 둘 다 지정: warn 후 entries 우선 (breaking 회피)
+  const registry = useMemo(() => {
+    if (entries !== undefined) {
+      if (metas !== undefined) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.',
+        )
+      }
+      const r = new ComponentRegistry()
+      for (const entry of entries) r.register(entry)
+      return r
+    }
+    if (metas !== undefined) {
+      for (const meta of metas) defaultRegistry.registerMeta(meta)
+    }
+    return defaultRegistry
+  }, [entries, metas])
+
+  // ── URL deep link 초기 상태 (계약 §5.5) ──────────────────────────────
+  // ?entry=<id>&jogak=<name>로 진입 시 그 entry로 마운트. jogak 미지정이면
+  // 사이드바가 첫 jogak을 자동 선택하지 않으므로 entry hydrate 후 보정한다.
+  const initial = useMemo(() => readUrlParams(), [])
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(
+    initial?.entryId ?? null,
+  )
+  const [selectedJogakName, setSelectedJogakName] = useState<string | null>(
+    initial?.jogakName ?? null,
+  )
+  const [overrideArgs, setOverrideArgs] = useState<Readonly<Record<string, unknown>>>({})
+
+  useEffect(() => {
+    const handlePopState = (): void => {
+      const parsed = readUrlParams()
+      if (parsed !== null) {
+        setSelectedEntryId(parsed.entryId)
+        setSelectedJogakName(parsed.jogakName)
+        setOverrideArgs({})
+      } else {
+        setSelectedEntryId(null)
+        setSelectedJogakName(null)
+      }
+    }
+    window.addEventListener('popstate', handlePopState)
+    return () => { window.removeEventListener('popstate', handlePopState) }
+  }, [])
+
+  const handleSelect = useCallback((entryId: string, jogakName: string) => {
+    setSelectedEntryId(entryId)
+    setSelectedJogakName(jogakName)
+    setOverrideArgs({})
+    pushUrl(entryId, jogakName)
+  }, [])
+
+  const handleResolveJogak = useCallback((entryId: string, jogakName: string) => {
+    // Preview가 entry를 hydrate한 뒤 jogakName이 비어있을 때 첫 jogak로 보정.
+    setSelectedEntryId((prevId) => (prevId === entryId ? entryId : prevId))
+    setSelectedJogakName((prev) => prev ?? jogakName)
+    if (typeof window !== 'undefined') {
+      // URL에 jogak이 누락된 경우만 보정 (사용자 history는 건드리지 않음 — replaceState).
+      const params = new URLSearchParams(window.location.search)
+      if (params.get('entry') === entryId && params.get('jogak') === null) {
+        params.set('jogak', jogakName)
+        window.history.replaceState({}, '', `?${params.toString()}`)
+      }
+    }
+  }, [])
+
+  const handleArgChange = useCallback((key: string, value: unknown) => {
+    setOverrideArgs((prev) => ({ ...prev, [key]: value }))
+  }, [])
+
+  const handleReset = useCallback(() => {
+    setOverrideArgs({})
+  }, [])
+
+  return (
+    <JogakProvider registry={registry}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '260px 1fr',
+          height: '100dvh',
+          overflow: 'hidden',
+        }}
+      >
+        <Sidebar
+          selectedEntryId={selectedEntryId}
+          selectedJogakName={selectedJogakName}
+          onSelect={handleSelect}
+        />
+        <main style={{ overflow: 'hidden', minHeight: 0 }}>
+          {selectedEntryId !== null ? (
+            <Preview
+              entryId={selectedEntryId}
+              jogakName={selectedJogakName}
+              overrideArgs={overrideArgs}
+              onArgChange={handleArgChange}
+              onReset={handleReset}
+              codeTheme={codeTheme}
+              onResolveJogak={handleResolveJogak}
+            />
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: '#9ca3af',
+              }}
+            >
+              Select a component from the sidebar
+            </div>
+          )}
+        </main>
+      </div>
+    </JogakProvider>
+  )
+}

package/src/app/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import 'virtual:jogak'
+import { _jogakCodeTheme } from 'virtual:jogak'
+import { JogakApp } from './App.js'
+
+const rootEl = document.getElementById('root')
+if (rootEl === null) throw new Error('#root element not found')
+
+createRoot(rootEl).render(
+  <StrictMode>
+    <JogakApp codeTheme={_jogakCodeTheme} />
+  </StrictMode>,
+)

package/src/components/Actions/index.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react'
+import type { ReactElement } from 'react'
+import { defaultActionChannel } from '@jogak/core'
+import type { ActionLog } from '@jogak/core'
+
+function formatArgs(args: readonly unknown[]): string {
+  if (args.length === 0) return '()'
+  try {
+    return args
+      .map((arg) => {
+        if (arg === null) return 'null'
+        if (arg === undefined) return 'undefined'
+        if (typeof arg === 'function') return '[Function]'
+        if (typeof arg === 'object') {
+          const ctorName =
+            (arg as { constructor?: { name?: string } }).constructor?.name ?? 'Object'
+          if (ctorName !== 'Object' && ctorName !== 'Array') return `[${ctorName}]`
+          return JSON.stringify(arg)
+        }
+        return JSON.stringify(arg)
+      })
+      .join(', ')
+  } catch {
+    return '[unserializable]'
+  }
+}
+
+function formatTime(ts: number): string {
+  const d = new Date(ts)
+  const hh = d.getHours().toString().padStart(2, '0')
+  const mm = d.getMinutes().toString().padStart(2, '0')
+  const ss = d.getSeconds().toString().padStart(2, '0')
+  const ms = d.getMilliseconds().toString().padStart(3, '0')
+  return `${hh}:${mm}:${ss}.${ms}`
+}
+
+export function Actions(): ReactElement {
+  const [logs, setLogs] = useState<readonly ActionLog[]>(() => defaultActionChannel.getLogs())
+
+  useEffect(() => {
+    return defaultActionChannel.subscribe(setLogs)
+  }, [])
+
+  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,
+        }}
+      >
+        <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,
+          }}
+        >
+          Clear
+        </button>
+      </div>
+
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        {logs.length === 0 ? (
+          <div
+            style={{
+              padding: '12px 20px',
+              color: '#9ca3af',
+              fontSize: 13,
+            }}
+          >
+            함수 prop이 호출되면 여기에 기록됩니다
+          </div>
+        ) : (
+          <ul style={{ listStyle: 'none', margin: 0, padding: 0, fontFamily: 'monospace', fontSize: 12 }}>
+            {logs.map((log) => (
+              <li
+                key={log.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'baseline',
+                  gap: 10,
+                  padding: '6px 20px',
+                  borderBottom: '1px solid #f3f4f6',
+                }}
+              >
+                <span style={{ color: '#9ca3af', fontSize: 11, minWidth: 92 }}>
+                  {formatTime(log.timestamp)}
+                </span>
+                <span style={{ color: '#7c3aed', fontWeight: 600 }}>{log.name}</span>
+                <span style={{ color: '#374151', wordBreak: 'break-all', flex: 1 }}>
+                  ({formatArgs(log.args)})
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/Controls/index.tsx

@@ -0,0 +1,211 @@
+import type { ReactElement, ChangeEvent, CSSProperties } from 'react'
+import type { ArgType } from '@jogak/core'
+
+export interface ControlsProps {
+  readonly args: Readonly<Record<string, unknown>>
+  readonly argTypes: Readonly<Record<string, ArgType>>
+  readonly onArgChange: (key: string, value: unknown) => void
+}
+
+type ControlKind = 'boolean' | 'number' | 'text' | 'select' | 'action' | 'json'
+
+function resolveControlKind(value: unknown, argType: ArgType | undefined): ControlKind {
+  const ctrl = argType?.control
+  const isAction = argType?.action !== undefined && argType.action !== false
+  const isFunctionType = argType?.type === 'function' || typeof value === 'function'
+
+  if (isAction || isFunctionType) return 'action'
+  if (ctrl === 'boolean' || typeof value === 'boolean') return 'boolean'
+  if (ctrl === 'number' || ctrl === 'range' || typeof value === 'number') return 'number'
+  if (
+    ctrl === 'select' ||
+    ctrl === 'radio' ||
+    (argType?.options !== undefined && argType.options.length > 0)
+  )
+    return 'select'
+  if (ctrl === 'text' || ctrl === 'color' || typeof value === 'string') return 'text'
+  return 'json'
+}
+
+interface ControlInputProps {
+  readonly argKey: string
+  readonly value: unknown
+  readonly argType: ArgType | undefined
+  readonly onArgChange: (key: string, value: unknown) => void
+}
+
+function ControlInput({ argKey, value, argType, onArgChange }: ControlInputProps): ReactElement {
+  const kind = resolveControlKind(value, argType)
+
+  switch (kind) {
+    case 'boolean':
+      return (
+        <input
+          type="checkbox"
+          checked={value === true}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            onArgChange(argKey, e.target.checked)
+          }}
+          style={{ cursor: 'pointer', width: 16, height: 16, accentColor: '#2563eb' }}
+        />
+      )
+    case 'number':
+      return (
+        <input
+          type="number"
+          value={typeof value === 'number' ? value : ''}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            onArgChange(argKey, e.target.valueAsNumber)
+          }}
+          style={inputStyle}
+        />
+      )
+    case 'select': {
+      const options = argType?.options ?? []
+      return (
+        <select
+          value={String(value ?? '')}
+          onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+            onArgChange(argKey, e.target.value)
+          }}
+          style={inputStyle}
+        >
+          {options.map((opt) => (
+            <option key={String(opt)} value={String(opt)}>
+              {String(opt)}
+            </option>
+          ))}
+        </select>
+      )
+    }
+    case 'text':
+      return (
+        <input
+          type="text"
+          value={typeof value === 'string' ? value : String(value ?? '')}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            onArgChange(argKey, e.target.value)
+          }}
+          style={inputStyle}
+        />
+      )
+    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',
+          }}
+        >
+          (action)
+        </span>
+      )
+    case 'json':
+      return (
+        <code style={{ fontSize: 12, color: '#6b7280', fontFamily: 'monospace' }}>
+          {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',
+        }}
+      >
+        Controls
+      </div>
+      {entries.length === 0 ? (
+        <div style={{ padding: '12px 20px', color: '#9ca3af', fontSize: 13 }}>
+          No args defined
+        </div>
+      ) : (
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+          <thead>
+            <tr>
+              <th style={thStyle}>Name</th>
+              <th style={thStyle}>Control</th>
+              <th style={thStyle}>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map(([key, value]) => {
+              const argType = argTypes[key]
+              return (
+                <tr key={key}>
+                  <td
+                    style={{
+                      ...tdStyle,
+                      fontFamily: 'monospace',
+                      fontSize: 12,
+                      color: '#374151',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {key}
+                  </td>
+                  <td style={tdStyle}>
+                    <ControlInput
+                      argKey={key}
+                      value={value}
+                      argType={argType}
+                      onArgChange={onArgChange}
+                    />
+                  </td>
+                  <td style={{ ...tdStyle, color: '#9ca3af' }}>
+                    {argType?.description ?? ''}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}