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

package/src/components/Sidebar/index.tsx

@@ -0,0 +1,285 @@
+import { useState, useEffect } from 'react'
+import type { CSSProperties, ReactElement } from 'react'
+import clsx from 'clsx'
+import type { CategoryMetaTree, RegistryEntryMeta } from '@jogak/core'
+import { useRegistryMeta } from '@jogak/core/renderers/react'
+
+// CSS custom property를 React style prop에 주입하기 위한 헬퍼 타입.
+// React 18+는 string-keyed `--` prefix를 인식하나 TS는 명시적 cast 필요.
+// spec §6.1 참조.
+type CSSVarStyle = CSSProperties & Record<`--${string}`, string | number>
+
+export interface SidebarProps {
+  readonly selectedEntryId: string | null
+  readonly selectedJogakName: string | null
+  readonly onSelect: (entryId: string, jogakName: string) => void
+}
+
+/**
+ * Sidebar — `useRegistryMeta`로 전환되어 lazy 모드에서도 모든 entry의 메타가 즉시 보인다.
+ * 계약 §10: hydrated 여부를 표시하지 않는다 — 사용자에겐 모든 entry가 동일하게 보임.
+ */
+export function Sidebar({
+  selectedEntryId,
+  selectedJogakName,
+  onSelect,
+}: SidebarProps): ReactElement {
+  const [query, setQuery] = useState('')
+  const { metaTree, searchMeta } = useRegistryMeta()
+
+  const filtered = query.trim().length > 0 ? searchMeta(query) : null
+
+  return (
+    <aside
+      data-testid="sidebar"
+      className="jogak:flex jogak:flex-col jogak:h-full jogak:overflow-auto jogak:border-r jogak:border-[var(--jogak-color-border)]"
+    >
+      <div className="jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]">
+        <input
+          type="search"
+          placeholder="Search components..."
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value)
+          }}
+          className="jogak:w-full jogak:px-2 jogak:py-1.5 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)]"
+          aria-label="Search components"
+        />
+      </div>
+      <nav className="jogak:flex-1 jogak:overflow-auto jogak:py-2">
+        {filtered !== null ? (
+          <FlatList
+            metas={filtered}
+            selectedEntryId={selectedEntryId}
+            selectedJogakName={selectedJogakName}
+            onSelect={onSelect}
+          />
+        ) : (
+          <TreeView
+            node={metaTree}
+            selectedEntryId={selectedEntryId}
+            selectedJogakName={selectedJogakName}
+            onSelect={onSelect}
+          />
+        )}
+      </nav>
+    </aside>
+  )
+}
+
+interface FlatListProps {
+  readonly metas: readonly RegistryEntryMeta[]
+  readonly selectedEntryId: string | null
+  readonly selectedJogakName: string | null
+  readonly onSelect: (entryId: string, jogakName: string) => void
+}
+
+function FlatList({
+  metas,
+  selectedEntryId,
+  selectedJogakName,
+  onSelect,
+}: FlatListProps): ReactElement {
+  if (metas.length === 0) {
+    return (
+      <p className="jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]">
+        No results
+      </p>
+    )
+  }
+  return (
+    <ul className="jogak:list-none jogak:m-0 jogak:p-0">
+      {metas.map((meta) => (
+        <li key={meta.id}>
+          <EntryGroup
+            meta={meta}
+            selectedEntryId={selectedEntryId}
+            selectedJogakName={selectedJogakName}
+            onSelect={onSelect}
+            indent={0}
+          />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+interface TreeViewProps {
+  readonly node: CategoryMetaTree
+  readonly selectedEntryId: string | null
+  readonly selectedJogakName: string | null
+  readonly onSelect: (entryId: string, jogakName: string) => void
+  readonly depth?: number
+}
+
+function TreeView({
+  node,
+  selectedEntryId,
+  selectedJogakName,
+  onSelect,
+  depth = 0,
+}: TreeViewProps): ReactElement {
+  return (
+    <ul
+      className="jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]"
+      // eslint-disable-next-line no-restricted-syntax -- jogak: CSS var inject (--jogak-tree-pl)
+      style={{ '--jogak-tree-pl': `${depth * 12}px` } as CSSVarStyle}
+    >
+      {Object.entries(node).map(([key, child]) => (
+        <li key={key}>
+          {'id' in child ? (
+            <EntryGroup
+              meta={child as RegistryEntryMeta}
+              selectedEntryId={selectedEntryId}
+              selectedJogakName={selectedJogakName}
+              onSelect={onSelect}
+              indent={0}
+            />
+          ) : (
+            <CategoryGroup
+              label={key}
+              node={child as CategoryMetaTree}
+              selectedEntryId={selectedEntryId}
+              selectedJogakName={selectedJogakName}
+              onSelect={onSelect}
+              depth={depth + 1}
+            />
+          )}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+interface CategoryGroupProps {
+  readonly label: string
+  readonly node: CategoryMetaTree
+  readonly selectedEntryId: string | null
+  readonly selectedJogakName: string | null
+  readonly onSelect: (entryId: string, jogakName: string) => void
+  readonly depth: number
+}
+
+function CategoryGroup({
+  label,
+  node,
+  selectedEntryId,
+  selectedJogakName,
+  onSelect,
+  depth,
+}: CategoryGroupProps): ReactElement {
+  const [open, setOpen] = useState(true)
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((v) => !v)
+        }}
+        className="jogak:flex jogak:items-center jogak:gap-1 jogak:w-full jogak:px-3 jogak:py-1 jogak:bg-transparent jogak:border-none jogak:cursor-pointer jogak:text-[12px] jogak:font-semibold jogak:text-[var(--jogak-color-fg-muted)] jogak:uppercase jogak:tracking-wider"
+        aria-expanded={open}
+      >
+        <span>{open ? '▾' : '▸'}</span>
+        {label}
+      </button>
+      {open && (
+        <TreeView
+          node={node}
+          selectedEntryId={selectedEntryId}
+          selectedJogakName={selectedJogakName}
+          onSelect={onSelect}
+          depth={depth}
+        />
+      )}
+    </div>
+  )
+}
+
+interface EntryGroupProps {
+  readonly meta: RegistryEntryMeta
+  readonly selectedEntryId: string | null
+  readonly selectedJogakName: string | null
+  readonly onSelect: (entryId: string, jogakName: string) => void
+  readonly indent: number
+}
+
+function EntryGroup({
+  meta,
+  selectedEntryId,
+  selectedJogakName,
+  onSelect,
+  indent,
+}: EntryGroupProps): ReactElement {
+  const isCurrentEntry = meta.id === selectedEntryId
+  const [open, setOpen] = useState(isCurrentEntry)
+
+  useEffect(() => {
+    if (isCurrentEntry) setOpen(true)
+  }, [isCurrentEntry])
+
+  const label = meta.title.split('/').pop() ?? meta.title
+  const paddingLeft = 16 + indent * 12
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          if (!isCurrentEntry) {
+            setOpen(true)
+            const first = meta.jogakNames[0]
+            if (first !== undefined) onSelect(meta.id, first)
+          } else {
+            setOpen((v) => !v)
+          }
+        }}
+        className={clsx(
+          'jogak:flex jogak:items-center jogak:gap-1.5 jogak:w-full jogak:pr-3 jogak:py-[5px]',
+          'jogak:pl-[var(--jogak-entry-pl)]',
+          'jogak:border-none jogak:cursor-pointer jogak:text-left jogak:text-[13px]',
+          isCurrentEntry
+            ? 'jogak:bg-[var(--jogak-color-accent-bg)] jogak:text-[var(--jogak-color-accent)] jogak:font-medium'
+            : 'jogak:bg-transparent jogak:text-[var(--jogak-color-fg)] jogak:font-normal',
+        )}
+        // eslint-disable-next-line no-restricted-syntax -- jogak: CSS var inject (--jogak-entry-pl)
+        style={{ '--jogak-entry-pl': `${paddingLeft}px` } as CSSVarStyle}
+        aria-expanded={open}
+      >
+        <span className="jogak:text-[10px] jogak:shrink-0 jogak:leading-none">
+          {open ? '▾' : '▸'}
+        </span>
+        {label}
+      </button>
+      {open && (
+        <ul className="jogak:list-none jogak:m-0 jogak:p-0">
+          {meta.jogakNames.map((jogakName) => {
+            const isSelected = isCurrentEntry && jogakName === selectedJogakName
+            return (
+              <li key={jogakName}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    onSelect(meta.id, jogakName)
+                  }}
+                  className={clsx(
+                    'jogak:block jogak:w-full jogak:text-left jogak:pr-3 jogak:py-1',
+                    'jogak:pl-[var(--jogak-jogak-pl)]',
+                    'jogak:border-none jogak:cursor-pointer jogak:text-[12px]',
+                    isSelected
+                      ? 'jogak:bg-[var(--jogak-color-accent-bg-soft)] jogak:text-[var(--jogak-color-accent-fg)] jogak:font-medium'
+                      : 'jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal',
+                  )}
+                  // eslint-disable-next-line no-restricted-syntax -- jogak: CSS var inject (--jogak-jogak-pl)
+                  style={{ '--jogak-jogak-pl': `${paddingLeft + 18}px` } as CSSVarStyle}
+                  aria-current={isSelected ? 'true' : undefined}
+                >
+                  {jogakName}
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/hooks/useRegistry.ts

@@ -0,0 +1,22 @@
+import { useRegistry as useRegistryFromAdapter } from '@jogak/core/renderers/react'
+import { useMemo } from 'react'
+import type { CategoryTree, RegistryEntry } from '@jogak/core'
+
+export interface UseRegistryReturn {
+  readonly entries: readonly RegistryEntry[]
+  readonly tree: CategoryTree
+  readonly search: (query: string) => readonly RegistryEntry[]
+}
+
+export function useRegistry(): UseRegistryReturn {
+  const registry = useRegistryFromAdapter()
+
+  const entries = useMemo(() => registry.getAll(), [registry])
+  const tree = useMemo(() => registry.getTree(), [registry])
+  const search = useMemo(
+    () => (query: string) => registry.search(query),
+    [registry],
+  )
+
+  return { entries, tree, search }
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { JogakApp } from './app/App.js'
+export { Sidebar } from './components/Sidebar/index.js'
+export { Preview } from './components/Preview/index.js'
+export { Controls } from './components/Controls/index.js'
+export { Actions } from './components/Actions/index.js'
+export { useRegistry } from './hooks/useRegistry.js'
+
+export type { JogakAppProps } from './app/App.js'
+export type { SidebarProps } from './components/Sidebar/index.js'
+export type { PreviewProps } from './components/Preview/index.js'
+export type { ControlsProps } from './components/Controls/index.js'
+export type { UseRegistryReturn } from './hooks/useRegistry.js'

package/src/styles/jogak.css

@@ -0,0 +1,128 @@
+/*
+ * jogak SPA 전용 스타일.
+ *
+ * 본 파일은 `packages/ui/src/app/main.tsx`에서만 import된다.
+ * lib mode build entry(`src/index.ts`, `src/host/index.ts`)에는 import되지 않으므로
+ * publish되는 `dist/index.{mjs,js}` / `dist/host/index.{mjs,js}` 산출물에 css 흔적이
+ * 들어가지 않는다 (사용자 번들 영향 zero — api-contracts §2.4, §7).
+ *
+ * Tailwind v4: preflight를 의도적으로 import하지 않고 `theme.css` + `utilities.css`만
+ * 분리 import한다. preflight의 globals(`*`, `html`, `body`)는 사용자 css와 prefix
+ * 무관하게 충돌 가능 — jogak SPA는 `index.html`의 inline reset(`box-sizing`,
+ * `body margin:0`)으로 충분하다 (api-contracts §6.2).
+ *
+ * `prefix(jogak)` — 모든 utility/variant/theme variable에 `jogak:` prefix가 적용된다.
+ * 사용자가 v4(no prefix)나 v3(`tw-` prefix)를 써도 selector 충돌 zero.
+ */
+
+@import "tailwindcss/theme.css" layer(theme) prefix(jogak);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(jogak);
+
+/*
+ * jogak 디자인 토큰 (`--jogak-*`).
+ *
+ * 정의 위치는 `:root` — preview 내부의 사용자 컴포넌트도 var() 참조 가능 (원하면).
+ * `--jogak-*` prefix가 충분한 namespace를 제공하므로 사용자 globalCss(알파.6 예정)
+ * 와 충돌 zero.
+ *
+ * 알파.4에서는 변수만 정의하고 컴포넌트는 inline style을 그대로 둔다.
+ * 알파.5에서 `style={{ color: '#374151' }}` → `className="jogak:text-[var(--jogak-color-fg)]"`
+ * 형태로 마이그레이션한다 (api-contracts §4.4).
+ */
+@layer base {
+  :root {
+    /* color */
+    --jogak-color-bg:           #ffffff;
+    --jogak-color-fg:           #374151;
+    --jogak-color-fg-muted:     #6b7280;
+    --jogak-color-fg-subtle:    #9ca3af;
+    --jogak-color-fg-strong:    #111827;
+    --jogak-color-bg-subtle:    #f9fafb;
+    --jogak-color-bg-elevated:  #ffffff;
+    --jogak-color-bg-error:     #fef2f2;
+
+    --jogak-color-accent:       #2563eb;
+    --jogak-color-accent-bg:    #eff6ff;
+    --jogak-color-accent-fg:    #1d4ed8;
+    --jogak-color-accent-bg-soft: #dbeafe;
+
+    --jogak-color-violet:       #7c3aed;
+    --jogak-color-violet-bg:    #f5f3ff;
+    --jogak-color-violet-border:#ddd6fe;
+
+    --jogak-color-error:        #ef4444;
+    --jogak-color-error-fg:     #b91c1c;
+    --jogak-color-error-border: #fecaca;
+
+    --jogak-color-border:       #e5e7eb;
+    --jogak-color-border-muted: #f3f4f6;
+    --jogak-color-border-strong:#d1d5db;
+    --jogak-color-checker:      #e2e8f0;
+
+    /* spacing */
+    --jogak-space-1: 4px;
+    --jogak-space-2: 8px;
+    --jogak-space-3: 12px;
+    --jogak-space-4: 16px;
+    --jogak-space-5: 20px;
+    --jogak-space-6: 24px;
+
+    /* radius */
+    --jogak-radius-sm: 3px;
+    --jogak-radius-md: 4px;
+    --jogak-radius-lg: 6px;
+    --jogak-radius-xl: 8px;
+
+    /* typography */
+    --jogak-font-sans: system-ui, sans-serif;
+    --jogak-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    /*
+     * NOTE 알파.5 PR 4: --jogak-text-{xs,sm,base,md,lg} 5개 변수 + --jogak-sidebar-width
+     * 1개 삭제. 사용처 zero (PR 1/3에서 픽셀 literal 채택). v4 함정 1 (font-size 페어링)
+     * 회귀 자체 차단 + 알파.6 사용자 globalCss 충돌 가능성 zero.
+     */
+  }
+
+  /*
+   * 알파.6 wrapper 보호 rule (api-contracts §8 옵션 C).
+   *
+   * 사용자 globalCss(예: shadcn `@layer base { * { @apply border-border ... } }`)가
+   * jogak chrome의 form element를 침범하는 것을 차단한다. `:where(...)` specificity 0
+   * 으로 사용자가 명시적으로 `[data-jogak-shell] button { ... }`를 작성하면 자연스럽게
+   * 이긴다.
+   *
+   * 적용 범위: chrome의 모든 form element. preview(`[data-jogak-content]`) 안의
+   * 사용자 컴포넌트는 영향 받지 않음 — `:not([data-jogak-content] *)`로 제외.
+   *
+   * 알파.5 baseline 영향: zero. chrome 컴포넌트는 본 rule이 차단하는 사용자 reset이
+   * 없을 때 동일 시각 (revert-layer는 해당 layer가 없으면 no-op).
+   */
+  [data-jogak-shell] :where(button, input, select, textarea):not([data-jogak-content] *) {
+    border-color: revert-layer;
+    background-color: revert-layer;
+    color: revert-layer;
+  }
+}
+
+@layer components {
+  /*
+   * 알파.5 PR 4: skeleton 애니메이션을 inline <style>(Preview L250-252)에서 jogak.css로
+   * 이동. inline style forbid rule (no-restricted-syntax) 위반 1건 + inline <style> 1건
+   * 동시 제거. VR 영향 zero (선택자/타이밍/그라디언트 픽셀 동일).
+   */
+  @keyframes jogakSkeleton {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  .jogak-skeleton-shimmer {
+    background: linear-gradient(
+      90deg,
+      rgba(229, 231, 235, 0) 0%,
+      rgba(229, 231, 235, 0.45) 50%,
+      rgba(229, 231, 235, 0) 100%
+    );
+    background-size: 200% 100%;
+    animation: jogakSkeleton 1.4s ease-in-out infinite;
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="vite/client" />
+
+declare module 'virtual:jogak' {
+  /** 플러그인 설정에서 지정한 prism-react-renderer 테마 이름 */
+  export const _jogakCodeTheme: string
+  /**
+   * 알파.8: Preview 영역 격리 모드 ('none' | 'shadow' | 'iframe').
+   * `JogakPluginOptions.previewIsolation` (default 'iframe')의 literal emit.
+   */
+  export const _jogakPreviewIsolation: 'none' | 'shadow' | 'iframe'
+  /**
+   * 알파.9: 어댑터 dev URL. iframe `src` base로 사용 (예: `http://localhost:5174`).
+   * 빈 문자열 시 fallback (jogak SPA Vite scope의 preview-frame.tsx).
+   */
+  export const _jogakUserPreviewUrl: string
+  /**
+   * 알파.9: iframe entry path (`BuilderAdapter.previewEntryMeta.devEntryPath`).
+   * 어댑터별 routing (vite: `/__jogak_preview__/index.html`).
+   */
+  export const _jogakPreviewEntryPath: string
+  /**
+   * @deprecated 알파.10 제거 예정. `_jogakUserPreviewUrl` 사용.
+   * 알파.8 호환 alias.
+   */
+  export const _jogakUserViteUrl: string
+}
+
+declare module 'virtual:jogak/global-css' {
+  // empty — side-effect only
+}

package/dist/host/index.js

@@ -1 +0,0 @@
-"use strict";var L=Object.create;var g=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var B=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of S(e))!A.call(t,n)&&n!==o&&g(t,n,{get:()=>e[n],enumerable:!(r=M(e,n))||r.enumerable});return t};var a=(t,e,o)=>(o=t!=null?L(k(t)):{},B(e||!t||!t.__esModule?g(o,"default",{value:t,enumerable:!0}):o,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("node:url"),i=require("node:path");var l=typeof document<"u"?document.currentScript:null;const N=H.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:l&&l.tagName.toUpperCase()==="SCRIPT"&&l.src||new URL("host/index.js",document.baseURI).href),u=i.resolve(i.dirname(N),"..",".."),x=i.resolve(u,"index.html"),F=i.resolve(u,"src/app/main.tsx");async function E(t){const e=await import("vite"),o=await import("@vitejs/plugin-react"),r=await import("@jogak/core/vite"),{createServer:n,build:h}=e,b=o.default,{jogak:v}=r,_=t.codeTheme??"vsDark",f={patterns:t.patterns,codeTheme:_,cwd:t.userRoot};t.tsConfigFilePath!==void 0&&(f.tsConfigFilePath=t.tsConfigFilePath);const R=t.extraPlugins??[],d={root:u,configFile:!1,plugins:[b(),v(f),...R],optimizeDeps:{include:["react","react-dom/client","@jogak/core","@jogak/react"]}};if(t.mode==="dev"){const O={port:t.port??5173,host:t.host??"localhost",open:t.open??!1,fs:{allow:[u,t.userRoot]}},j={...d,server:O},s=await n(j);await s.listen();const p=s.config.server.port??t.port??5173,c=t.host??"localhost",D=`http://${typeof c=="boolean"?c?"0.0.0.0":"localhost":c}:${p.toString()}/`;let y=!1;return{url:D,port:p,close:async()=>{y||(y=!0,await s.close())},printUrls:()=>{s.printUrls()}}}const w={...d,base:t.base??"./",build:{outDir:t.outDir,emptyOutDir:!0,sourcemap:t.sourcemap??!1,minify:t.minify??"esbuild"}},C=Date.now(),T=await h(w),U=Date.now()-C,{assetCount:P,totalBytes:I}=Y(T);return{outDir:t.outDir,elapsedMs:U,assetCount:P,totalBytes:I}}function Y(t){const e=q(t);if(e===void 0)return{assetCount:0,totalBytes:0};let o=0,r=0;for(const n of e)o+=1,r+=z(n);return{assetCount:o,totalBytes:r}}function m(t){return typeof t=="object"&&t!==null&&Array.isArray(t.output)}function q(t){if(Array.isArray(t)){const e=[];for(const o of t)m(o)&&e.push(...o.output);return e}if(m(t))return t.output}function z(t){if(typeof t!="object"||t===null)return 0;const e=t;if(e.type==="chunk"&&typeof e.code=="string")return Buffer.byteLength(e.code,"utf8");if(e.type==="asset"){const o=e.source;if(typeof o=="string")return Buffer.byteLength(o,"utf8");if(o instanceof Uint8Array)return o.byteLength}return 0}exports.UI_HTML_ENTRY=x;exports.UI_MAIN_ENTRY=F;exports.runHost=E;

package/dist/index.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),k=require("@jogak/core"),j=require("@jogak/react"),z=require("prism-react-renderer");function I({selectedEntryId:t,selectedJogakName:n,onSelect:o}){const[i,s]=c.useState(""),{metaTree:r,searchMeta:l}=j.useRegistryMeta(),d=i.trim().length>0?l(i):null;return e.jsxs("aside",{"data-testid":"sidebar",style:{borderRight:"1px solid #e5e7eb",height:"100%",overflow:"auto",display:"flex",flexDirection:"column"},children:[e.jsx("div",{style:{padding:"12px",borderBottom:"1px solid #e5e7eb"},children:e.jsx("input",{type:"search",placeholder:"Search components...",value:i,onChange:a=>{s(a.target.value)},style:{width:"100%",padding:"6px 8px",border:"1px solid #d1d5db",borderRadius:4},"aria-label":"Search components"})}),e.jsx("nav",{style:{flex:1,overflow:"auto",padding:"8px 0"},children:d!==null?e.jsx(J,{metas:d,selectedEntryId:t,selectedJogakName:n,onSelect:o}):e.jsx(O,{node:r,selectedEntryId:t,selectedJogakName:n,onSelect:o})})]})}function J({metas:t,selectedEntryId:n,selectedJogakName:o,onSelect:i}){return t.length===0?e.jsx("p",{style:{padding:"0 12px",color:"#9ca3af",fontSize:13},children:"No results"}):e.jsx("ul",{style:{listStyle:"none",margin:0,padding:0},children:t.map(s=>e.jsx("li",{children:e.jsx($,{meta:s,selectedEntryId:n,selectedJogakName:o,onSelect:i,indent:0})},s.id))})}function O({node:t,selectedEntryId:n,selectedJogakName:o,onSelect:i,depth:s=0}){return e.jsx("ul",{style:{listStyle:"none",margin:0,padding:`0 0 0 ${s*12}px`},children:Object.entries(t).map(([r,l])=>e.jsx("li",{children:"id"in l?e.jsx($,{meta:l,selectedEntryId:n,selectedJogakName:o,onSelect:i,indent:0}):e.jsx(V,{label:r,node:l,selectedEntryId:n,selectedJogakName:o,onSelect:i,depth:s+1})},r))})}function V({label:t,node:n,selectedEntryId:o,selectedJogakName:i,onSelect:s,depth:r}){const[l,d]=c.useState(!0);return e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:()=>{d(a=>!a)},style:{display:"flex",alignItems:"center",gap:4,width:"100%",padding:"4px 12px",background:"none",border:"none",cursor:"pointer",fontSize:12,fontWeight:600,color:"#6b7280",textTransform:"uppercase",letterSpacing:"0.05em"},"aria-expanded":l,children:[e.jsx("span",{children:l?"▾":"▸"}),t]}),l&&e.jsx(O,{node:n,selectedEntryId:o,selectedJogakName:i,onSelect:s,depth:r})]})}function $({meta:t,selectedEntryId:n,selectedJogakName:o,onSelect:i,indent:s}){const r=t.id===n,[l,d]=c.useState(r);c.useEffect(()=>{r&&d(!0)},[r]);const a=t.title.split("/").pop()??t.title,b=16+s*12;return e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:()=>{if(r)d(p=>!p);else{d(!0);const p=t.jogakNames[0];p!==void 0&&i(t.id,p)}},style:{display:"flex",alignItems:"center",gap:6,width:"100%",padding:`5px 12px 5px ${b}px`,background:r?"#eff6ff":"none",border:"none",cursor:"pointer",fontSize:13,color:r?"#2563eb":"#374151",fontWeight:r?500:400,textAlign:"left"},"aria-expanded":l,children:[e.jsx("span",{style:{fontSize:10,flexShrink:0,lineHeight:1},children:l?"▾":"▸"}),a]}),l&&e.jsx("ul",{style:{listStyle:"none",margin:0,padding:0},children:t.jogakNames.map(p=>{const x=r&&p===o;return e.jsx("li",{children:e.jsx("button",{type:"button",onClick:()=>{i(t.id,p)},style:{display:"block",width:"100%",textAlign:"left",padding:`4px 12px 4px ${b+18}px`,background:x?"#dbeafe":"none",border:"none",cursor:"pointer",fontSize:12,color:x?"#1d4ed8":"#6b7280",fontWeight:x?500:400},"aria-current":x?"true":void 0,children:p})},p)})})]})}function q(t,n){const o=n==null?void 0:n.control,i=(n==null?void 0:n.action)!==void 0&&n.action!==!1,s=(n==null?void 0:n.type)==="function"||typeof t=="function";return i||s?"action":o==="boolean"||typeof t=="boolean"?"boolean":o==="number"||o==="range"||typeof t=="number"?"number":o==="select"||o==="radio"||(n==null?void 0:n.options)!==void 0&&n.options.length>0?"select":o==="text"||o==="color"||typeof t=="string"?"text":"json"}function U({argKey:t,value:n,argType:o,onArgChange:i}){switch(q(n,o)){case"boolean":return e.jsx("input",{type:"checkbox",checked:n===!0,onChange:r=>{i(t,r.target.checked)},style:{cursor:"pointer",width:16,height:16,accentColor:"#2563eb"}});case"number":return e.jsx("input",{type:"number",value:typeof n=="number"?n:"",onChange:r=>{i(t,r.target.valueAsNumber)},style:w});case"select":{const r=(o==null?void 0:o.options)??[];return e.jsx("select",{value:String(n??""),onChange:l=>{i(t,l.target.value)},style:w,children:r.map(l=>e.jsx("option",{value:String(l),children:String(l)},String(l)))})}case"text":return e.jsx("input",{type:"text",value:typeof n=="string"?n:String(n??""),onChange:r=>{i(t,r.target.value)},style:w});case"action":return e.jsx("span",{style:{display:"inline-block",padding:"2px 8px",fontSize:11,fontWeight:600,color:"#7c3aed",background:"#f5f3ff",border:"1px solid #ddd6fe",borderRadius:4,fontFamily:"monospace"},children:"(action)"});case"json":return e.jsx("code",{style:{fontSize:12,color:"#6b7280",fontFamily:"monospace"},children:JSON.stringify(n)})}}const w={padding:"4px 8px",border:"1px solid #d1d5db",borderRadius:4,fontSize:13,width:"100%",maxWidth:280},C={padding:"6px 20px",textAlign:"left",color:"#6b7280",fontWeight:500,fontSize:12,borderBottom:"1px solid #e5e7eb"},R={padding:"8px 20px",verticalAlign:"middle",borderBottom:"1px solid #f3f4f6"};function F({args:t,argTypes:n,onArgChange:o}){const s=Array.from(new Set([...Object.keys(t),...Object.keys(n)])).map(r=>[r,t[r]]);return e.jsxs("div",{style:{borderTop:"2px solid #e5e7eb"},children:[e.jsx("div",{style:{padding:"6px 20px",fontSize:11,fontWeight:700,color:"#9ca3af",textTransform:"uppercase",letterSpacing:"0.08em",borderBottom:"1px solid #e5e7eb",background:"#f9fafb"},children:"Controls"}),s.length===0?e.jsx("div",{style:{padding:"12px 20px",color:"#9ca3af",fontSize:13},children:"No args defined"}):e.jsxs("table",{style:{width:"100%",borderCollapse:"collapse",fontSize:13},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{style:C,children:"Name"}),e.jsx("th",{style:C,children:"Control"}),e.jsx("th",{style:C,children:"Description"})]})}),e.jsx("tbody",{children:s.map(([r,l])=>{const d=n[r];return e.jsxs("tr",{children:[e.jsx("td",{style:{...R,fontFamily:"monospace",fontSize:12,color:"#374151",whiteSpace:"nowrap"},children:r}),e.jsx("td",{style:R,children:e.jsx(U,{argKey:r,value:l,argType:d,onArgChange:o})}),e.jsx("td",{style:{...R,color:"#9ca3af"},children:(d==null?void 0:d.description)??""})]},r)})})]})]})}function _(t){if(t.length===0)return"()";try{return t.map(n=>{var o;if(n===null)return"null";if(n===void 0)return"undefined";if(typeof n=="function")return"[Function]";if(typeof n=="object"){const i=((o=n.constructor)==null?void 0:o.name)??"Object";return i!=="Object"&&i!=="Array"?`[${i}]`:JSON.stringify(n)}return JSON.stringify(n)}).join(", ")}catch{return"[unserializable]"}}function G(t){const n=new Date(t),o=n.getHours().toString().padStart(2,"0"),i=n.getMinutes().toString().padStart(2,"0"),s=n.getSeconds().toString().padStart(2,"0"),r=n.getMilliseconds().toString().padStart(3,"0");return`${o}:${i}:${s}.${r}`}function L(){const[t,n]=c.useState(()=>k.defaultActionChannel.getLogs());return c.useEffect(()=>k.defaultActionChannel.subscribe(n),[]),e.jsxs("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:[e.jsxs("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},children:[e.jsxs("span",{children:["Actions ",t.length>0&&`(${t.length.toString()})`]}),e.jsx("button",{type:"button",onClick:()=>{k.defaultActionChannel.clear()},disabled:t.length===0,style:{fontSize:10,fontWeight:600,padding:"2px 8px",border:"1px solid #d1d5db",borderRadius:3,background:"#fff",color:t.length===0?"#9ca3af":"#374151",cursor:t.length===0?"default":"pointer",textTransform:"none",letterSpacing:0},children:"Clear"})]}),e.jsx("div",{style:{flex:1,overflow:"auto"},children:t.length===0?e.jsx("div",{style:{padding:"12px 20px",color:"#9ca3af",fontSize:13},children:"함수 prop이 호출되면 여기에 기록됩니다"}):e.jsx("ul",{style:{listStyle:"none",margin:0,padding:0,fontFamily:"monospace",fontSize:12},children:t.map(o=>e.jsxs("li",{style:{display:"flex",alignItems:"baseline",gap:10,padding:"6px 20px",borderBottom:"1px solid #f3f4f6"},children:[e.jsx("span",{style:{color:"#9ca3af",fontSize:11,minWidth:92},children:G(o.timestamp)}),e.jsx("span",{style:{color:"#7c3aed",fontWeight:600},children:o.name}),e.jsxs("span",{style:{color:"#374151",wordBreak:"break-all",flex:1},children:["(",_(o.args),")"]})]},o.id))})})]})}const H={mobile:375,tablet:768,desktop:"none"},T={mobile:"Mobile",tablet:"Tablet",desktop:"Desktop"},W={white:{background:"#ffffff"},dark:{background:"#1f2937"},transparent:{backgroundImage:["linear-gradient(45deg, #e2e8f0 25%, transparent 25%)","linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)","linear-gradient(45deg, transparent 75%, #e2e8f0 75%)","linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)"].join(", "),backgroundSize:"16px 16px",backgroundPosition:"0 0, 0 8px, 8px -8px, -8px 0px",backgroundColor:"#ffffff"}},A=320;function Q(t){return z.themes[t]??z.themes.vsDark}function D({entryId:t,jogakName:n,overrideArgs:o,onArgChange:i,onReset:s,codeTheme:r,onResolveJogak:l}){const d=j.useEntry(t),[a,b]=c.useState("desktop"),[p,x]=c.useState("white"),[y,h]=c.useState("controls"),m=Q(r);return d.status==="unknown"?e.jsxs("div",{"data-testid":"preview-not-found",style:{padding:24,color:"#ef4444"},children:["Entry not found: ",t]}):d.status==="error"?e.jsxs("div",{"data-testid":"preview-error",style:{padding:24,color:"#b91c1c",background:"#fef2f2",height:"100%",display:"flex",flexDirection:"column",gap:12,alignItems:"flex-start"},children:[e.jsxs("div",{style:{fontWeight:600},children:["Failed to load entry: ",t]}),e.jsx("pre",{style:{margin:0,padding:12,background:"#fff",border:"1px solid #fecaca",borderRadius:6,fontSize:12,whiteSpace:"pre-wrap",maxWidth:"100%"},children:d.error.message})]}):d.status==="loading"?e.jsx(Y,{meta:d.meta,jogakName:n,viewport:a,bgMode:p,onViewportChange:b,onBgModeChange:x}):e.jsx(X,{entry:d.entry,jogakName:n,overrideArgs:o,onArgChange:i,onReset:s,onResolveJogak:l,viewport:a,bgMode:p,bottomTab:y,onViewportChange:b,onBgModeChange:x,onBottomTabChange:h,prismTheme:m})}function Y({meta:t,jogakName:n,viewport:o,bgMode:i,onViewportChange:s,onBgModeChange:r}){const l=n??t.jogakNames[0]??"...",d=H[o];return e.jsxs("div",{"data-testid":"preview-loading",style:{display:"flex",flexDirection:"column",height:"100%"},children:[e.jsx(N,{title:t.title,jogakName:l,viewport:o,bgMode:i,onViewportChange:s,onBgModeChange:r,showReset:!1,onReset:()=>{}}),e.jsx("div",{style:{flex:1,minHeight:A,overflow:"auto",...W[i]},children:e.jsx("div",{style:{maxWidth:d==="none"?"100%":d,margin:"0 auto",padding:24},children:e.jsxs("div",{style:{border:"1px dashed #e5e7eb",borderRadius:8,padding:16,minHeight:A-64,display:"flex",alignItems:"center",justifyContent:"center",color:"#9ca3af",fontSize:13,background:"linear-gradient(90deg, rgba(229,231,235,0) 0%, rgba(229,231,235,0.45) 50%, rgba(229,231,235,0) 100%)",backgroundSize:"200% 100%",animation:"jogakSkeleton 1.4s ease-in-out infinite"},children:["Loading ",t.title,"…"]})})}),e.jsx("style",{children:"@keyframes jogakSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }"})]})}function X({entry:t,jogakName:n,overrideArgs:o,onArgChange:i,onReset:s,onResolveJogak:r,viewport:l,bgMode:d,bottomTab:a,onViewportChange:b,onBgModeChange:p,onBottomTabChange:x,prismTheme:y}){var B;const h=n??((B=t.jogaks[0])==null?void 0:B.name)??null;if(c.useEffect(()=>{n===null&&h!==null&&r!==void 0&&r(t.id,h)},[n,h,t.id,r]),h===null)return e.jsxs("div",{style:{padding:24,color:"#ef4444"},children:["Entry has no jogaks: ",t.id]});const m=t.jogaks.find(S=>S.name===h);if(m===void 0)return e.jsxs("div",{style:{padding:24,color:"#ef4444"},children:["Jogak not found: ",h]});const f={...m.args??{},...o},g={...t.meta.argTypes??{},...m.argTypes??{}},P=Object.keys(o).length>0,M=H[l];return e.jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%"},children:[e.jsx(N,{title:t.title,jogakName:m.name,viewport:l,bgMode:d,onViewportChange:b,onBgModeChange:p,showReset:P,onReset:s}),e.jsx("div",{style:{flex:1,minHeight:A,overflow:"auto",...W[d]},children:e.jsx("div",{style:{maxWidth:M==="none"?"100%":M,margin:"0 auto",padding:24},children:e.jsx(Z,{entry:t,args:f,source:t.source,theme:y},`${t.id}/${m.name}`)})}),e.jsxs("div",{style:{height:260,flexShrink:0,display:"flex",flexDirection:"column",borderTop:"2px solid #e5e7eb"},children:[e.jsx("div",{role:"tablist",style:{display:"flex",gap:4,padding:"4px 12px 0",background:"#fff",borderBottom:"1px solid #e5e7eb",flexShrink:0},children:["controls","actions"].map(S=>{const v=a===S;return e.jsx("button",{type:"button",role:"tab","aria-selected":v,onClick:()=>{x(S)},style:{padding:"6px 14px",fontSize:12,fontWeight:v?600:500,color:v?"#111827":"#6b7280",background:"transparent",border:"none",borderBottom:v?"2px solid #2563eb":"2px solid transparent",marginBottom:-1,cursor:"pointer",textTransform:"capitalize"},children:S},S)})}),e.jsx("div",{style:{flex:1,minHeight:0,overflow:"auto"},children:a==="controls"?e.jsx(F,{args:f,argTypes:g,onArgChange:i}):e.jsx(L,{})})]})]})}function N({title:t,jogakName:n,viewport:o,bgMode:i,onViewportChange:s,onBgModeChange:r,showReset:l,onReset:d}){return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,padding:"7px 14px",borderBottom:"1px solid #e5e7eb",background:"#fff",flexShrink:0},children:[e.jsxs("div",{style:{flex:1,fontSize:13},children:[e.jsx("span",{style:{color:"#9ca3af"},children:t}),e.jsx("span",{style:{color:"#d1d5db",margin:"0 6px"},children:"/"}),e.jsx("span",{style:{color:"#111827",fontWeight:600},children:n})]}),e.jsx("div",{style:{display:"flex",gap:2,background:"#f3f4f6",borderRadius:6,padding:2},children:["mobile","tablet","desktop"].map(a=>e.jsx("button",{type:"button",onClick:()=>{s(a)},"aria-pressed":o===a,style:{padding:"3px 9px",fontSize:12,border:"none",borderRadius:4,cursor:"pointer",background:o===a?"#fff":"transparent",color:o===a?"#111827":"#6b7280",fontWeight:o===a?600:400,boxShadow:o===a?"0 1px 2px rgba(0,0,0,0.08)":"none",transition:"all 0.1s"},children:T[a]},a))}),e.jsx("div",{style:{display:"flex",gap:4,alignItems:"center"},children:["white","dark","transparent"].map(a=>e.jsx("button",{type:"button",onClick:()=>{r(a)},"aria-pressed":i===a,"aria-label":`${a} background`,style:{width:20,height:20,borderRadius:4,border:i===a?"2px solid #2563eb":"2px solid #d1d5db",cursor:"pointer",padding:0,flexShrink:0,...W[a]}},a))}),l&&e.jsx("button",{type:"button",onClick:d,style:{padding:"3px 10px",fontSize:12,border:"1px solid #d1d5db",borderRadius:4,background:"#fff",cursor:"pointer",color:"#374151"},children:"Reset"})]})}function Z({entry:t,args:n,source:o,theme:i}){const s=c.useRef(null),[r,l]=c.useState(!1);return c.useEffect(()=>{const d=s.current;if(d!==null)return j.reactAdapter.render(t,n,d),()=>{j.reactAdapter.unmount(d)}},[t]),c.useEffect(()=>{const d=s.current;d!==null&&j.reactAdapter.render(t,n,d)},[t,n]),e.jsxs("div",{children:[e.jsxs("div",{style:{position:"relative"},children:[e.jsx("div",{ref:s,"data-testid":"preview-content",style:{border:"1px dashed #e5e7eb",borderRadius:8,padding:16,paddingBottom:36}}),e.jsx("button",{type:"button",onClick:()=>{l(d=>!d)},"aria-pressed":r,"aria-label":r?"Hide source code":"Show source code",style:{position:"absolute",bottom:8,right:8,padding:"4px 9px",fontSize:11,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",fontWeight:600,letterSpacing:"0.02em",background:r?"#2563eb":"#1e293b",color:"#fff",border:"none",borderRadius:5,cursor:"pointer",boxShadow:"0 1px 4px rgba(0,0,0,0.2)",transition:"background 0.15s"},children:"</>"})]}),r&&e.jsx("div",{style:{marginTop:8,borderRadius:8,overflow:"hidden",height:320,boxShadow:"0 0 0 1px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.12)"},children:e.jsx(K,{source:o,theme:i})})]})}function K({source:t,theme:n}){const[o,i]=c.useState(!1),s=n.plain.backgroundColor??"#1e293b";if(t===void 0)return e.jsx("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center",background:s,color:"#94a3b8",fontSize:13},children:"Source not available"});const r=()=>{navigator.clipboard.writeText(t).then(()=>{i(!0),setTimeout(()=>{i(!1)},2e3)})};return e.jsxs("div",{style:{position:"relative",height:"100%"},children:[e.jsx("button",{type:"button",onClick:r,style:{position:"absolute",top:10,right:12,zIndex:1,padding:"3px 9px",fontSize:11,background:"rgba(255,255,255,0.1)",color:"#e2e8f0",border:"1px solid rgba(255,255,255,0.18)",borderRadius:4,cursor:"pointer"},children:o?"✓ Copied":"Copy"}),e.jsx(z.Highlight,{code:t.trim(),language:"tsx",theme:n,children:({style:l,tokens:d,getLineProps:a,getTokenProps:b})=>e.jsx("pre",{style:{...l,margin:0,padding:"12px 0",fontSize:12.5,lineHeight:1.7,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",height:"100%",boxSizing:"border-box",overflow:"auto"},children:d.map((p,x)=>e.jsxs("div",{...a({line:p}),style:{...a({line:p}).style,display:"flex",paddingRight:24},children:[e.jsx("span",{style:{userSelect:"none",minWidth:40,paddingLeft:14,paddingRight:14,textAlign:"right",color:"rgba(148,163,184,0.45)",flexShrink:0},children:x+1}),e.jsx("span",{children:p.map((y,h)=>e.jsx("span",{...b({token:y})},h))})]},x))})})]})}function E(){if(typeof window>"u")return null;const t=new URLSearchParams(window.location.search),n=t.get("entry");if(n===null)return null;const o=t.get("jogak");return{entryId:n,jogakName:o}}function ee(t,n){const o=new URLSearchParams;o.set("entry",t),o.set("jogak",n),window.history.pushState({},"",`?${o.toString()}`)}function te({entries:t,metas:n,codeTheme:o="vsDark"}={}){const i=c.useMemo(()=>{if(t!==void 0){n!==void 0&&console.warn("[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.");const u=new k.ComponentRegistry;for(const f of t)u.register(f);return u}if(n!==void 0)for(const u of n)k.defaultRegistry.registerMeta(u);return k.defaultRegistry},[t,n]),s=c.useMemo(()=>E(),[]),[r,l]=c.useState((s==null?void 0:s.entryId)??null),[d,a]=c.useState((s==null?void 0:s.jogakName)??null),[b,p]=c.useState({});c.useEffect(()=>{const u=()=>{const f=E();f!==null?(l(f.entryId),a(f.jogakName),p({})):(l(null),a(null))};return window.addEventListener("popstate",u),()=>{window.removeEventListener("popstate",u)}},[]);const x=c.useCallback((u,f)=>{l(u),a(f),p({}),ee(u,f)},[]),y=c.useCallback((u,f)=>{if(l(g=>g===u?u:g),a(g=>g??f),typeof window<"u"){const g=new URLSearchParams(window.location.search);g.get("entry")===u&&g.get("jogak")===null&&(g.set("jogak",f),window.history.replaceState({},"",`?${g.toString()}`))}},[]),h=c.useCallback((u,f)=>{p(g=>({...g,[u]:f}))},[]),m=c.useCallback(()=>{p({})},[]);return e.jsx(j.JogakProvider,{registry:i,children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"260px 1fr",height:"100dvh",overflow:"hidden"},children:[e.jsx(I,{selectedEntryId:r,selectedJogakName:d,onSelect:x}),e.jsx("main",{style:{overflow:"hidden",minHeight:0},children:r!==null?e.jsx(D,{entryId:r,jogakName:d,overrideArgs:b,onArgChange:h,onReset:m,codeTheme:o,onResolveJogak:y}):e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"#9ca3af"},children:"Select a component from the sidebar"})})]})})}function ne(){const t=j.useRegistry(),n=c.useMemo(()=>t.getAll(),[t]),o=c.useMemo(()=>t.getTree(),[t]),i=c.useMemo(()=>s=>t.search(s),[t]);return{entries:n,tree:o,search:i}}exports.Actions=L;exports.Controls=F;exports.JogakApp=te;exports.Preview=D;exports.Sidebar=I;exports.useRegistry=ne;