@jogak/ui 0.1.0-alpha.6 → 0.1.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/README.md +108 -36
- package/dist/app/App.d.ts +11 -1
- package/dist/components/Preview/IframeMount.d.ts +37 -0
- package/dist/components/Preview/ShadowMount.d.ts +26 -0
- package/dist/components/Preview/index.d.ts +9 -1
- package/dist/host/index.d.ts +20 -0
- package/dist/host/index.js +1 -1
- package/dist/host/index.mjs +51 -45
- package/dist/index.js +2 -1
- package/dist/index.mjs +456 -330
- package/package.json +4 -3
- package/preview-frame.html +17 -0
- package/src/app/App.tsx +12 -0
- package/src/app/main.tsx +5 -2
- package/src/app/preview-frame.tsx +46 -0
- package/src/components/Preview/IframeMount.tsx +82 -0
- package/src/components/Preview/ShadowMount.tsx +101 -0
- package/src/components/Preview/index.tsx +138 -34
- package/src/vite-env.d.ts +9 -0
package/dist/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),w=require("@jogak/core"),v=require("@jogak/react"),A=require("prism-react-renderer");function M(a){var e,r,t="";if(typeof a=="string"||typeof a=="number")t+=a;else if(typeof a=="object")if(Array.isArray(a)){var s=a.length;for(e=0;e<s;e++)a[e]&&(r=M(a[e]))&&(t&&(t+=" "),t+=r)}else for(r in a)a[r]&&(t&&(t+=" "),t+=r);return t}function m(){for(var a,e,r=0,t="",s=arguments.length;r<s;r++)(a=arguments[r])&&(e=M(a))&&(t&&(t+=" "),t+=e);return t}function J({selectedEntryId:a,selectedJogakName:e,onSelect:r}){const[t,s]=l.useState(""),{metaTree:n,searchMeta:j}=v.useRegistryMeta(),g=t.trim().length>0?j(t):null;return o.jsxs("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)]",children:[o.jsx("div",{className:"jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]",children:o.jsx("input",{type:"search",placeholder:"Search components...",value:t,onChange:k=>{s(k.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"})}),o.jsx("nav",{className:"jogak:flex-1 jogak:overflow-auto jogak:py-2",children:g!==null?o.jsx(W,{metas:g,selectedEntryId:a,selectedJogakName:e,onSelect:r}):o.jsx(P,{node:n,selectedEntryId:a,selectedJogakName:e,onSelect:r})})]})}function W({metas:a,selectedEntryId:e,selectedJogakName:r,onSelect:t}){return a.length===0?o.jsx("p",{className:"jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]",children:"No results"}):o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:a.map(s=>o.jsx("li",{children:o.jsx(V,{meta:s,selectedEntryId:e,selectedJogakName:r,onSelect:t,indent:0})},s.id))})}function P({node:a,selectedEntryId:e,selectedJogakName:r,onSelect:t,depth:s=0}){return o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]",style:{"--jogak-tree-pl":`${s*12}px`},children:Object.entries(a).map(([n,j])=>o.jsx("li",{children:"id"in j?o.jsx(V,{meta:j,selectedEntryId:e,selectedJogakName:r,onSelect:t,indent:0}):o.jsx(G,{label:n,node:j,selectedEntryId:e,selectedJogakName:r,onSelect:t,depth:s+1})},n))})}function G({label:a,node:e,selectedEntryId:r,selectedJogakName:t,onSelect:s,depth:n}){const[j,g]=l.useState(!0);return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{g(k=>!k)},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":j,children:[o.jsx("span",{children:j?"▾":"▸"}),a]}),j&&o.jsx(P,{node:e,selectedEntryId:r,selectedJogakName:t,onSelect:s,depth:n})]})}function V({meta:a,selectedEntryId:e,selectedJogakName:r,onSelect:t,indent:s}){const n=a.id===e,[j,g]=l.useState(n);l.useEffect(()=>{n&&g(!0)},[n]);const k=a.title.split("/").pop()??a.title,f=16+s*12;return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{if(n)g(c=>!c);else{g(!0);const c=a.jogakNames[0];c!==void 0&&t(a.id,c)}},className:m("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]",n?"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"),style:{"--jogak-entry-pl":`${f}px`},"aria-expanded":j,children:[o.jsx("span",{className:"jogak:text-[10px] jogak:shrink-0 jogak:leading-none",children:j?"▾":"▸"}),k]}),j&&o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:a.jogakNames.map(c=>{const x=n&&c===r;return o.jsx("li",{children:o.jsx("button",{type:"button",onClick:()=>{t(a.id,c)},className:m("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]",x?"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"),style:{"--jogak-jogak-pl":`${f+18}px`},"aria-current":x?"true":void 0,children:c})},c)})})]})}function H(a,e){const r=e==null?void 0:e.control,t=(e==null?void 0:e.action)!==void 0&&e.action!==!1,s=(e==null?void 0:e.type)==="function"||typeof a=="function";return t||s?"action":r==="boolean"||typeof a=="boolean"?"boolean":r==="number"||r==="range"||typeof a=="number"?"number":r==="select"||r==="radio"||(e==null?void 0:e.options)!==void 0&&e.options.length>0?"select":r==="text"||r==="color"||typeof a=="string"?"text":"json"}const y="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]",S="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)]",C="jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";function I({argKey:a,value:e,argType:r,onArgChange:t}){switch(H(e,r)){case"boolean":return o.jsx("input",{type:"checkbox",checked:e===!0,onChange:n=>{t(a,n.target.checked)},className:"jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"});case"number":return o.jsx("input",{type:"number",value:typeof e=="number"?e:"",onChange:n=>{t(a,n.target.valueAsNumber)},className:y});case"select":{const n=(r==null?void 0:r.options)??[];return o.jsx("select",{value:String(e??""),onChange:j=>{t(a,j.target.value)},className:y,children:n.map(j=>o.jsx("option",{value:String(j),children:String(j)},String(j)))})}case"text":return o.jsx("input",{type:"text",value:typeof e=="string"?e:String(e??""),onChange:n=>{t(a,n.target.value)},className:y});case"action":return o.jsx("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",children:"(action)"});case"json":return o.jsx("code",{className:"jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]",children:JSON.stringify(e)})}}function B({args:a,argTypes:e,onArgChange:r}){const s=Array.from(new Set([...Object.keys(a),...Object.keys(e)])).map(n=>[n,a[n]]);return o.jsxs("div",{className:"jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",children:[o.jsx("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)]",children:"Controls"}),s.length===0?o.jsx("div",{className:"jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]",children:"No args defined"}):o.jsxs("table",{className:"jogak:w-full jogak:border-collapse jogak:text-[13px]",children:[o.jsx("thead",{children:o.jsxs("tr",{children:[o.jsx("th",{className:S,children:"Name"}),o.jsx("th",{className:S,children:"Control"}),o.jsx("th",{className:S,children:"Description"})]})}),o.jsx("tbody",{children:s.map(([n,j])=>{const g=e[n];return o.jsxs("tr",{children:[o.jsx("td",{className:m(C,"jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"),children:n}),o.jsx("td",{className:C,children:o.jsx(I,{argKey:n,value:j,argType:g,onArgChange:r})}),o.jsx("td",{className:m(C,"jogak:text-[var(--jogak-color-fg-subtle)]"),children:(g==null?void 0:g.description)??""})]},n)})})]})]})}function Q(a){if(a.length===0)return"()";try{return a.map(e=>{var r;if(e===null)return"null";if(e===void 0)return"undefined";if(typeof e=="function")return"[Function]";if(typeof e=="object"){const t=((r=e.constructor)==null?void 0:r.name)??"Object";return t!=="Object"&&t!=="Array"?`[${t}]`:JSON.stringify(e)}return JSON.stringify(e)}).join(", ")}catch{return"[unserializable]"}}function X(a){const e=new Date(a),r=e.getHours().toString().padStart(2,"0"),t=e.getMinutes().toString().padStart(2,"0"),s=e.getSeconds().toString().padStart(2,"0"),n=e.getMilliseconds().toString().padStart(3,"0");return`${r}:${t}:${s}.${n}`}function z(){const[a,e]=l.useState(()=>w.defaultActionChannel.getLogs());l.useEffect(()=>w.defaultActionChannel.subscribe(e),[]);const r=a.length===0;return o.jsxs("div",{className:"jogak:h-full jogak:flex jogak:flex-col",children:[o.jsxs("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",children:[o.jsxs("span",{children:["Actions ",a.length>0&&`(${a.length.toString()})`]}),o.jsx("button",{type:"button",onClick:()=>{w.defaultActionChannel.clear()},disabled:r,className:m("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",r?"jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default":"jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"),children:"Clear"})]}),o.jsx("div",{className:"jogak:flex-1 jogak:overflow-auto",children:r?o.jsx("div",{className:"jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none",children:"함수 prop이 호출되면 여기에 기록됩니다"}):o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]",children:a.map(t=>o.jsxs("li",{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)]",children:[o.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]",children:X(t.timestamp)}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-violet)] jogak:font-semibold",children:t.name}),o.jsxs("span",{className:"jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1",children:["(",Q(t.args),")"]})]},t.id))})})]})}const q={mobile:375,tablet:768,desktop:"none"},Y={mobile:"Mobile",tablet:"Tablet",desktop:"Desktop"},R={white:{"--jogak-canvas-bg":"#ffffff","--jogak-canvas-bg-image":"none","--jogak-canvas-bg-size":"auto","--jogak-canvas-bg-position":"0 0"},dark:{"--jogak-canvas-bg":"#1f2937","--jogak-canvas-bg-image":"none","--jogak-canvas-bg-size":"auto","--jogak-canvas-bg-position":"0 0"},transparent:{"--jogak-canvas-bg":"#ffffff","--jogak-canvas-bg-image":"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%)","--jogak-canvas-bg-size":"16px 16px","--jogak-canvas-bg-position":"0 0, 0 8px, 8px -8px, -8px 0px"}},_="jogak:bg-[var(--jogak-canvas-bg)] jogak:bg-[image:var(--jogak-canvas-bg-image)] jogak:bg-[length:var(--jogak-canvas-bg-size)] jogak:bg-[position:var(--jogak-canvas-bg-position)]";function Z(a){return A.themes[a]??A.themes.vsDark}function D({entryId:a,jogakName:e,overrideArgs:r,onArgChange:t,onReset:s,codeTheme:n,onResolveJogak:j}){const g=v.useEntry(a),[k,f]=l.useState("desktop"),[c,x]=l.useState("white"),[h,p]=l.useState("controls"),b=Z(n);return g.status==="unknown"?o.jsxs("div",{"data-testid":"preview-not-found",className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Entry not found: ",a]}):g.status==="error"?o.jsxs("div",{"data-testid":"preview-error",className:"jogak:p-6 jogak:text-[var(--jogak-color-error-fg)] jogak:bg-[var(--jogak-color-bg-error)] jogak:h-full jogak:flex jogak:flex-col jogak:gap-3 jogak:items-start",children:[o.jsxs("div",{className:"jogak:font-semibold",children:["Failed to load entry: ",a]}),o.jsx("pre",{className:"jogak:m-0 jogak:p-3 jogak:bg-[var(--jogak-color-bg)] jogak:border jogak:border-[var(--jogak-color-error-border)] jogak:rounded-[var(--jogak-radius-lg)] jogak:text-[12px] jogak:whitespace-pre-wrap jogak:max-w-full",children:g.error.message})]}):g.status==="loading"?o.jsx(K,{meta:g.meta,jogakName:e,viewport:k,bgMode:c,onViewportChange:f,onBgModeChange:x}):o.jsx(T,{entry:g.entry,jogakName:e,overrideArgs:r,onArgChange:t,onReset:s,onResolveJogak:j,viewport:k,bgMode:c,bottomTab:h,onViewportChange:f,onBgModeChange:x,onBottomTabChange:p,prismTheme:b})}function K({meta:a,jogakName:e,viewport:r,bgMode:t,onViewportChange:s,onBgModeChange:n}){const j=e??a.jogakNames[0]??"...",g=q[r];return o.jsxs("div",{"data-testid":"preview-loading",className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(F,{title:a.title,jogakName:j,viewport:r,bgMode:t,onViewportChange:s,onBgModeChange:n,showReset:!1,onReset:()=>{}}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${_}`,style:R[t],children:o.jsx("div",{className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":g==="none"?"100%":`${g}px`},children:o.jsxs("div",{className:"jogak-skeleton-shimmer jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:flex jogak:items-center jogak:justify-center jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:min-h-[256px]",children:["Loading ",a.title,"…"]})})})]})}function T({entry:a,jogakName:e,overrideArgs:r,onArgChange:t,onReset:s,onResolveJogak:n,viewport:j,bgMode:g,bottomTab:k,onViewportChange:f,onBgModeChange:c,onBottomTabChange:x,prismTheme:h}){var E;const p=e??((E=a.jogaks[0])==null?void 0:E.name)??null;if(l.useEffect(()=>{e===null&&p!==null&&n!==void 0&&n(a.id,p)},[e,p,a.id,n]),p===null)return o.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Entry has no jogaks: ",a.id]});const b=a.jogaks.find(N=>N.name===p);if(b===void 0)return o.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Jogak not found: ",p]});const d={...b.args??{},...r},u={...a.meta.argTypes??{},...b.argTypes??{}},U=Object.keys(r).length>0,$=q[j];return o.jsxs("div",{className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(F,{title:a.title,jogakName:b.name,viewport:j,bgMode:g,onViewportChange:f,onBgModeChange:c,showReset:U,onReset:s}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${_}`,style:R[g],children:o.jsx("div",{"data-jogak-content":!0,className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":$==="none"?"100%":`${$}px`},children:o.jsx(oo,{entry:a,args:d,source:a.source,theme:h},`${a.id}/${b.name}`)})}),o.jsxs("div",{"data-testid":"bottom-panel",className:"jogak:h-[260px] jogak:shrink-0 jogak:flex jogak:flex-col jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",children:[o.jsx("div",{role:"tablist",className:"jogak:flex jogak:gap-1 jogak:pt-1 jogak:px-3 jogak:pb-0 jogak:bg-[var(--jogak-color-bg)] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:shrink-0",children:["controls","actions"].map(N=>{const O=k===N;return o.jsx("button",{type:"button",role:"tab","aria-selected":O,onClick:()=>{x(N)},className:m("jogak:px-[14px] jogak:py-[6px] jogak:text-[12px] jogak:bg-transparent jogak:border-x-0 jogak:border-t-0 jogak:border-b-2 jogak:border-solid jogak:-mb-px jogak:cursor-pointer jogak:capitalize",O?"jogak:font-semibold jogak:text-[var(--jogak-color-fg-strong)] jogak:border-[var(--jogak-color-accent)]":"jogak:font-medium jogak:text-[var(--jogak-color-fg-muted)] jogak:border-transparent"),children:N},N)})}),o.jsx("div",{className:"jogak:flex-1 jogak:min-h-0 jogak:overflow-auto",children:k==="controls"?o.jsx(B,{args:d,argTypes:u,onArgChange:t}):o.jsx(z,{})})]})]})}function F({title:a,jogakName:e,viewport:r,bgMode:t,onViewportChange:s,onBgModeChange:n,showReset:j,onReset:g}){return o.jsxs("div",{className:"jogak:flex jogak:items-center jogak:gap-[10px] jogak:px-[14px] jogak:py-[7px] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg)] jogak:shrink-0",children:[o.jsxs("div",{className:"jogak:flex-1 jogak:text-[13px]",children:[o.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-subtle)]",children:a}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none",children:"/"}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold",children:e})]}),o.jsx("div",{className:"jogak:flex jogak:gap-0.5 jogak:bg-[var(--jogak-color-bg-subtle)] jogak:rounded-[var(--jogak-radius-lg)] jogak:p-0.5",children:["mobile","tablet","desktop"].map(k=>o.jsx("button",{type:"button",onClick:()=>{s(k)},"aria-pressed":r===k,className:m("jogak:px-[9px] jogak:py-[3px] jogak:text-[12px] jogak:border-none jogak:rounded-[var(--jogak-radius-md)] jogak:cursor-pointer jogak:transition-all jogak:duration-100",r===k?"jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]":"jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"),children:Y[k]},k))}),o.jsx("div",{className:"jogak:flex jogak:gap-1 jogak:items-center",children:["white","dark","transparent"].map(k=>o.jsx("button",{type:"button",onClick:()=>{n(k)},"aria-pressed":t===k,"aria-label":`${k} background`,className:m("jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",_,t===k?"jogak:border-[var(--jogak-color-accent)]":"jogak:border-[var(--jogak-color-border-strong)]"),style:R[k]},k))}),j&&o.jsx("button",{type:"button",onClick:g,className:"jogak:px-[10px] jogak:py-[3px] jogak:text-[12px] jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:bg-[var(--jogak-color-bg)] jogak:cursor-pointer jogak:text-[var(--jogak-color-fg)] jogak:leading-none",children:"Reset"})]})}function oo({entry:a,args:e,source:r,theme:t}){const s=l.useRef(null),[n,j]=l.useState(!1);return l.useEffect(()=>{const g=s.current;if(g!==null)return v.reactAdapter.render(a,e,g),()=>{v.reactAdapter.unmount(g)}},[a]),l.useEffect(()=>{const g=s.current;g!==null&&v.reactAdapter.render(a,e,g)},[a,e]),o.jsxs("div",{children:[o.jsxs("div",{className:"jogak:relative",children:[o.jsx("div",{ref:s,"data-testid":"preview-content",className:"jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9"}),o.jsx("button",{type:"button",onClick:()=>{j(g=>!g)},"aria-pressed":n,"aria-label":n?"Hide source code":"Show source code",className:m("jogak:absolute jogak:bottom-2 jogak:right-2 jogak:px-[9px] jogak:py-1","jogak:text-[11px] jogak:font-[family-name:var(--jogak-font-mono)] jogak:font-semibold jogak:tracking-[0.02em]","jogak:text-[var(--jogak-color-bg)] jogak:border-none jogak:rounded-[5px] jogak:cursor-pointer","jogak:shadow-[0_1px_4px_rgba(0,0,0,0.2)] jogak:transition-[background-color] jogak:duration-150 jogak:leading-none",n?"jogak:bg-[var(--jogak-color-accent)]":"jogak:bg-[#1e293b]"),children:"</>"})]}),n&&o.jsx("div",{className:"jogak:mt-2 jogak:rounded-[var(--jogak-radius-xl)] jogak:overflow-hidden jogak:h-[320px] jogak:shadow-[0_0_0_1px_rgba(0,0,0,0.08),_0_4px_16px_rgba(0,0,0,0.12)]",children:o.jsx(ao,{source:r,theme:t})})]})}function ao({source:a,theme:e}){const[r,t]=l.useState(!1),s=e.plain.backgroundColor??"#1e293b";if(a===void 0)return o.jsx("div",{className:"jogak:h-full jogak:flex jogak:items-center jogak:justify-center jogak:bg-[var(--jogak-source-bg)] jogak:text-[#94a3b8] jogak:text-[13px]",style:{"--jogak-source-bg":s},children:"Source not available"});const n=()=>{navigator.clipboard.writeText(a).then(()=>{t(!0),setTimeout(()=>{t(!1)},2e3)})};return o.jsxs("div",{className:"jogak:relative jogak:h-full",children:[o.jsx("button",{type:"button",onClick:n,className:"jogak:absolute jogak:top-[10px] jogak:right-3 jogak:z-[1] jogak:px-[9px] jogak:py-[3px] jogak:text-[11px] jogak:bg-[rgba(255,255,255,0.1)] jogak:text-[#e2e8f0] jogak:border jogak:border-[rgba(255,255,255,0.18)] jogak:rounded-[var(--jogak-radius-md)] jogak:cursor-pointer jogak:leading-none",children:r?"✓ Copied":"Copy"}),o.jsx(A.Highlight,{code:a.trim(),language:"tsx",theme:e,children:({style:j,tokens:g,getLineProps:k,getTokenProps:f})=>o.jsx("pre",{className:"jogak:m-0 jogak:py-3 jogak:px-0 jogak:text-[12.5px] jogak:leading-[1.7] jogak:font-[family-name:var(--jogak-font-mono)] jogak:h-full jogak:box-border jogak:overflow-auto",style:j,children:g.map((c,x)=>o.jsxs("div",{...k({line:c}),className:"jogak:flex jogak:pr-6",style:k({line:c}).style,children:[o.jsx("span",{className:"jogak:select-none jogak:min-w-10 jogak:pl-[14px] jogak:pr-[14px] jogak:text-right jogak:text-[rgba(148,163,184,0.45)] jogak:shrink-0 jogak:leading-[1.7]",children:x+1}),o.jsx("span",{children:c.map((h,p)=>o.jsx("span",{...f({token:h})},p))})]},x))})})]})}function L(){if(typeof window>"u")return null;const a=new URLSearchParams(window.location.search),e=a.get("entry");if(e===null)return null;const r=a.get("jogak");return{entryId:e,jogakName:r}}function eo(a,e){const r=new URLSearchParams;r.set("entry",a),r.set("jogak",e),window.history.pushState({},"",`?${r.toString()}`)}function ro({entries:a,metas:e,codeTheme:r="vsDark"}={}){const t=l.useMemo(()=>{if(a!==void 0){e!==void 0&&console.warn("[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.");const i=new w.ComponentRegistry;for(const d of a)i.register(d);return i}if(e!==void 0)for(const i of e)w.defaultRegistry.registerMeta(i);return w.defaultRegistry},[a,e]),s=l.useMemo(()=>L(),[]),[n,j]=l.useState((s==null?void 0:s.entryId)??null),[g,k]=l.useState((s==null?void 0:s.jogakName)??null),[f,c]=l.useState({});l.useEffect(()=>{const i=()=>{const d=L();d!==null?(j(d.entryId),k(d.jogakName),c({})):(j(null),k(null))};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}},[]);const x=l.useCallback((i,d)=>{j(i),k(d),c({}),eo(i,d)},[]),h=l.useCallback((i,d)=>{if(j(u=>u===i?i:u),k(u=>u??d),typeof window<"u"){const u=new URLSearchParams(window.location.search);u.get("entry")===i&&u.get("jogak")===null&&(u.set("jogak",d),window.history.replaceState({},"",`?${u.toString()}`))}},[]),p=l.useCallback((i,d)=>{c(u=>({...u,[i]:d}))},[]),b=l.useCallback(()=>{c({})},[]);return o.jsx(v.JogakProvider,{registry:t,children:o.jsxs("div",{"data-jogak-shell":!0,className:"jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden",children:[o.jsx(J,{selectedEntryId:n,selectedJogakName:g,onSelect:x}),o.jsx("main",{className:"jogak:overflow-hidden jogak:min-h-0",children:n!==null?o.jsx(D,{entryId:n,jogakName:g,overrideArgs:f,onArgChange:p,onReset:b,codeTheme:r,onResolveJogak:h}):o.jsx("div",{className:"jogak:flex jogak:items-center jogak:justify-center jogak:h-full jogak:text-[var(--jogak-color-fg-subtle)]",children:"Select a component from the sidebar"})})]})})}function to(){const a=v.useRegistry(),e=l.useMemo(()=>a.getAll(),[a]),r=l.useMemo(()=>a.getTree(),[a]),t=l.useMemo(()=>s=>a.search(s),[a]);return{entries:e,tree:r,search:t}}exports.Actions=z;exports.Controls=B;exports.JogakApp=ro;exports.Preview=D;exports.Sidebar=J;exports.useRegistry=to;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("react"),y=require("@jogak/core"),m=require("@jogak/react"),A=require("prism-react-renderer"),I=require("react-dom");function J(o){var e,t,r="";if(typeof o=="string"||typeof o=="number")r+=o;else if(typeof o=="object")if(Array.isArray(o)){var j=o.length;for(e=0;e<j;e++)o[e]&&(t=J(o[e]))&&(r&&(r+=" "),r+=t)}else for(t in o)o[t]&&(r&&(r+=" "),r+=t);return r}function h(){for(var o,e,t=0,r="",j=arguments.length;t<j;t++)(o=arguments[t])&&(e=J(o))&&(r&&(r+=" "),r+=e);return r}function V({selectedEntryId:o,selectedJogakName:e,onSelect:t}){const[r,j]=c.useState(""),{metaTree:n,searchMeta:g}=m.useRegistryMeta(),l=r.trim().length>0?g(r):null;return a.jsxs("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)]",children:[a.jsx("div",{className:"jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]",children:a.jsx("input",{type:"search",placeholder:"Search components...",value:r,onChange:s=>{j(s.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"})}),a.jsx("nav",{className:"jogak:flex-1 jogak:overflow-auto jogak:py-2",children:l!==null?a.jsx(Q,{metas:l,selectedEntryId:o,selectedJogakName:e,onSelect:t}):a.jsx(B,{node:n,selectedEntryId:o,selectedJogakName:e,onSelect:t})})]})}function Q({metas:o,selectedEntryId:e,selectedJogakName:t,onSelect:r}){return o.length===0?a.jsx("p",{className:"jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]",children:"No results"}):a.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:o.map(j=>a.jsx("li",{children:a.jsx(W,{meta:j,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:0})},j.id))})}function B({node:o,selectedEntryId:e,selectedJogakName:t,onSelect:r,depth:j=0}){return a.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]",style:{"--jogak-tree-pl":`${j*12}px`},children:Object.entries(o).map(([n,g])=>a.jsx("li",{children:"id"in g?a.jsx(W,{meta:g,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:0}):a.jsx(X,{label:n,node:g,selectedEntryId:e,selectedJogakName:t,onSelect:r,depth:j+1})},n))})}function X({label:o,node:e,selectedEntryId:t,selectedJogakName:r,onSelect:j,depth:n}){const[g,l]=c.useState(!0);return a.jsxs("div",{children:[a.jsxs("button",{type:"button",onClick:()=>{l(s=>!s)},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":g,children:[a.jsx("span",{children:g?"▾":"▸"}),o]}),g&&a.jsx(B,{node:e,selectedEntryId:t,selectedJogakName:r,onSelect:j,depth:n})]})}function W({meta:o,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:j}){const n=o.id===e,[g,l]=c.useState(n);c.useEffect(()=>{n&&l(!0)},[n]);const s=o.title.split("/").pop()??o.title,k=16+j*12;return a.jsxs("div",{children:[a.jsxs("button",{type:"button",onClick:()=>{if(n)l(i=>!i);else{l(!0);const i=o.jogakNames[0];i!==void 0&&r(o.id,i)}},className:h("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]",n?"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"),style:{"--jogak-entry-pl":`${k}px`},"aria-expanded":g,children:[a.jsx("span",{className:"jogak:text-[10px] jogak:shrink-0 jogak:leading-none",children:g?"▾":"▸"}),s]}),g&&a.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:o.jogakNames.map(i=>{const x=n&&i===t;return a.jsx("li",{children:a.jsx("button",{type:"button",onClick:()=>{r(o.id,i)},className:h("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]",x?"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"),style:{"--jogak-jogak-pl":`${k+18}px`},"aria-current":x?"true":void 0,children:i})},i)})})]})}function Y(o,e){const t=e==null?void 0:e.control,r=(e==null?void 0:e.action)!==void 0&&e.action!==!1,j=(e==null?void 0:e.type)==="function"||typeof o=="function";return r||j?"action":t==="boolean"||typeof o=="boolean"?"boolean":t==="number"||t==="range"||typeof o=="number"?"number":t==="select"||t==="radio"||(e==null?void 0:e.options)!==void 0&&e.options.length>0?"select":t==="text"||t==="color"||typeof o=="string"?"text":"json"}const S="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]",C="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)]",R="jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";function Z({argKey:o,value:e,argType:t,onArgChange:r}){switch(Y(e,t)){case"boolean":return a.jsx("input",{type:"checkbox",checked:e===!0,onChange:n=>{r(o,n.target.checked)},className:"jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"});case"number":return a.jsx("input",{type:"number",value:typeof e=="number"?e:"",onChange:n=>{r(o,n.target.valueAsNumber)},className:S});case"select":{const n=(t==null?void 0:t.options)??[];return a.jsx("select",{value:String(e??""),onChange:g=>{r(o,g.target.value)},className:S,children:n.map(g=>a.jsx("option",{value:String(g),children:String(g)},String(g)))})}case"text":return a.jsx("input",{type:"text",value:typeof e=="string"?e:String(e??""),onChange:n=>{r(o,n.target.value)},className:S});case"action":return a.jsx("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",children:"(action)"});case"json":return a.jsx("code",{className:"jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]",children:JSON.stringify(e)})}}function D({args:o,argTypes:e,onArgChange:t}){const j=Array.from(new Set([...Object.keys(o),...Object.keys(e)])).map(n=>[n,o[n]]);return a.jsxs("div",{className:"jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",children:[a.jsx("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)]",children:"Controls"}),j.length===0?a.jsx("div",{className:"jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]",children:"No args defined"}):a.jsxs("table",{className:"jogak:w-full jogak:border-collapse jogak:text-[13px]",children:[a.jsx("thead",{children:a.jsxs("tr",{children:[a.jsx("th",{className:C,children:"Name"}),a.jsx("th",{className:C,children:"Control"}),a.jsx("th",{className:C,children:"Description"})]})}),a.jsx("tbody",{children:j.map(([n,g])=>{const l=e[n];return a.jsxs("tr",{children:[a.jsx("td",{className:h(R,"jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"),children:n}),a.jsx("td",{className:R,children:a.jsx(Z,{argKey:n,value:g,argType:l,onArgChange:t})}),a.jsx("td",{className:h(R,"jogak:text-[var(--jogak-color-fg-subtle)]"),children:(l==null?void 0:l.description)??""})]},n)})})]})]})}function K(o){if(o.length===0)return"()";try{return o.map(e=>{var t;if(e===null)return"null";if(e===void 0)return"undefined";if(typeof e=="function")return"[Function]";if(typeof e=="object"){const r=((t=e.constructor)==null?void 0:t.name)??"Object";return r!=="Object"&&r!=="Array"?`[${r}]`:JSON.stringify(e)}return JSON.stringify(e)}).join(", ")}catch{return"[unserializable]"}}function T(o){const e=new Date(o),t=e.getHours().toString().padStart(2,"0"),r=e.getMinutes().toString().padStart(2,"0"),j=e.getSeconds().toString().padStart(2,"0"),n=e.getMilliseconds().toString().padStart(3,"0");return`${t}:${r}:${j}.${n}`}function q(){const[o,e]=c.useState(()=>y.defaultActionChannel.getLogs());c.useEffect(()=>y.defaultActionChannel.subscribe(e),[]);const t=o.length===0;return a.jsxs("div",{className:"jogak:h-full jogak:flex jogak:flex-col",children:[a.jsxs("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",children:[a.jsxs("span",{children:["Actions ",o.length>0&&`(${o.length.toString()})`]}),a.jsx("button",{type:"button",onClick:()=>{y.defaultActionChannel.clear()},disabled:t,className:h("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",t?"jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default":"jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"),children:"Clear"})]}),a.jsx("div",{className:"jogak:flex-1 jogak:overflow-auto",children:t?a.jsx("div",{className:"jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none",children:"함수 prop이 호출되면 여기에 기록됩니다"}):a.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]",children:o.map(r=>a.jsxs("li",{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)]",children:[a.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]",children:T(r.timestamp)}),a.jsx("span",{className:"jogak:text-[var(--jogak-color-violet)] jogak:font-semibold",children:r.name}),a.jsxs("span",{className:"jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1",children:["(",K(r.args),")"]})]},r.id))})})]})}function oo({children:o,className:e,style:t,"data-testid":r}){const j=c.useRef(null),[n,g]=c.useState(null);return c.useEffect(()=>{const l=j.current;if(l===null)return;let s;l.shadowRoot!==null?s=l.shadowRoot:s=l.attachShadow({mode:"open"}),g(s),z(s);const k=ao(s);return()=>{k.disconnect()}},[]),a.jsx("div",{ref:j,className:e,"data-testid":r,style:t,children:n!==null?I.createPortal(o,n):null})}function z(o){const e=[];for(const t of Array.from(document.styleSheets))try{const r=t.cssRules,j=new CSSStyleSheet,n=Array.from(r).map(g=>g.cssText).join(`
|
|
2
|
+
`);j.replaceSync(n),e.push(j)}catch{}o.adoptedStyleSheets=e}function ao(o){const e=new MutationObserver(()=>{z(o)});return e.observe(document.head,{childList:!0,subtree:!0}),e}function eo({entry:o,args:e,className:t,"data-testid":r}){const j=c.useRef(null),n=c.useRef(!1);return c.useEffect(()=>{const g=j.current;if(g===null)return;const l=()=>{var s,k;n.current=!0,(k=(s=g.contentWindow)==null?void 0:s.__jogak_setProps__)==null||k.call(s,{entry:o,args:e})};return g.addEventListener("load",l),()=>{var s,k;g.removeEventListener("load",l),(k=(s=g.contentWindow)==null?void 0:s.__jogak_unmount__)==null||k.call(s)}},[]),c.useEffect(()=>{var g,l,s;n.current&&((s=(l=(g=j.current)==null?void 0:g.contentWindow)==null?void 0:l.__jogak_setProps__)==null||s.call(l,{entry:o,args:e}))},[o,e]),a.jsx("iframe",{ref:j,src:"/preview-frame.html",title:"Preview",className:t,"data-testid":r})}const F={mobile:375,tablet:768,desktop:"none"},to={mobile:"Mobile",tablet:"Tablet",desktop:"Desktop"},E={white:{"--jogak-canvas-bg":"#ffffff","--jogak-canvas-bg-image":"none","--jogak-canvas-bg-size":"auto","--jogak-canvas-bg-position":"0 0"},dark:{"--jogak-canvas-bg":"#1f2937","--jogak-canvas-bg-image":"none","--jogak-canvas-bg-size":"auto","--jogak-canvas-bg-position":"0 0"},transparent:{"--jogak-canvas-bg":"#ffffff","--jogak-canvas-bg-image":"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%)","--jogak-canvas-bg-size":"16px 16px","--jogak-canvas-bg-position":"0 0, 0 8px, 8px -8px, -8px 0px"}},$="jogak:bg-[var(--jogak-canvas-bg)] jogak:bg-[image:var(--jogak-canvas-bg-image)] jogak:bg-[length:var(--jogak-canvas-bg-size)] jogak:bg-[position:var(--jogak-canvas-bg-position)]";function ro(o){return A.themes[o]??A.themes.vsDark}function H({entryId:o,jogakName:e,overrideArgs:t,onArgChange:r,onReset:j,codeTheme:n,onResolveJogak:g,previewIsolation:l="none"}){const s=m.useEntry(o),[k,i]=c.useState("desktop"),[x,v]=c.useState("white"),[w,f]=c.useState("controls"),b=ro(n);return s.status==="unknown"?a.jsxs("div",{"data-testid":"preview-not-found",className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Entry not found: ",o]}):s.status==="error"?a.jsxs("div",{"data-testid":"preview-error",className:"jogak:p-6 jogak:text-[var(--jogak-color-error-fg)] jogak:bg-[var(--jogak-color-bg-error)] jogak:h-full jogak:flex jogak:flex-col jogak:gap-3 jogak:items-start",children:[a.jsxs("div",{className:"jogak:font-semibold",children:["Failed to load entry: ",o]}),a.jsx("pre",{className:"jogak:m-0 jogak:p-3 jogak:bg-[var(--jogak-color-bg)] jogak:border jogak:border-[var(--jogak-color-error-border)] jogak:rounded-[var(--jogak-radius-lg)] jogak:text-[12px] jogak:whitespace-pre-wrap jogak:max-w-full",children:s.error.message})]}):s.status==="loading"?a.jsx(no,{meta:s.meta,jogakName:e,viewport:k,bgMode:x,onViewportChange:i,onBgModeChange:v}):a.jsx(so,{entry:s.entry,jogakName:e,overrideArgs:t,onArgChange:r,onReset:j,onResolveJogak:g,viewport:k,bgMode:x,bottomTab:w,onViewportChange:i,onBgModeChange:v,onBottomTabChange:f,prismTheme:b,previewIsolation:l})}function no({meta:o,jogakName:e,viewport:t,bgMode:r,onViewportChange:j,onBgModeChange:n}){const g=e??o.jogakNames[0]??"...",l=F[t];return a.jsxs("div",{"data-testid":"preview-loading",className:"jogak:flex jogak:flex-col jogak:h-full",children:[a.jsx(U,{title:o.title,jogakName:g,viewport:t,bgMode:r,onViewportChange:j,onBgModeChange:n,showReset:!1,onReset:()=>{}}),a.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${$}`,style:E[r],children:a.jsx("div",{className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":l==="none"?"100%":`${l}px`},children:a.jsxs("div",{className:"jogak-skeleton-shimmer jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:flex jogak:items-center jogak:justify-center jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:min-h-[256px]",children:["Loading ",o.title,"…"]})})})]})}function so({entry:o,jogakName:e,overrideArgs:t,onArgChange:r,onReset:j,onResolveJogak:n,viewport:g,bgMode:l,bottomTab:s,onViewportChange:k,onBgModeChange:i,onBottomTabChange:x,prismTheme:v,previewIsolation:w}){var O;const f=e??((O=o.jogaks[0])==null?void 0:O.name)??null;if(c.useEffect(()=>{e===null&&f!==null&&n!==void 0&&n(o.id,f)},[e,f,o.id,n]),f===null)return a.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Entry has no jogaks: ",o.id]});const b=o.jogaks.find(N=>N.name===f);if(b===void 0)return a.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Jogak not found: ",f]});const u={...b.args??{},...t},p={...o.meta.argTypes??{},...b.argTypes??{}},G=Object.keys(t).length>0,L=F[g];return a.jsxs("div",{className:"jogak:flex jogak:flex-col jogak:h-full",children:[a.jsx(U,{title:o.title,jogakName:b.name,viewport:g,bgMode:l,onViewportChange:k,onBgModeChange:i,showReset:G,onReset:j}),a.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${$}`,style:E[l],children:a.jsx("div",{"data-jogak-content":!0,className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":L==="none"?"100%":`${L}px`},children:a.jsx(go,{entry:o,args:u,source:o.source,theme:v,previewIsolation:w},`${o.id}/${b.name}`)})}),a.jsxs("div",{"data-testid":"bottom-panel",className:"jogak:h-[260px] jogak:shrink-0 jogak:flex jogak:flex-col jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",children:[a.jsx("div",{role:"tablist",className:"jogak:flex jogak:gap-1 jogak:pt-1 jogak:px-3 jogak:pb-0 jogak:bg-[var(--jogak-color-bg)] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:shrink-0",children:["controls","actions"].map(N=>{const M=s===N;return a.jsx("button",{type:"button",role:"tab","aria-selected":M,onClick:()=>{x(N)},className:h("jogak:px-[14px] jogak:py-[6px] jogak:text-[12px] jogak:bg-transparent jogak:border-x-0 jogak:border-t-0 jogak:border-b-2 jogak:border-solid jogak:-mb-px jogak:cursor-pointer jogak:capitalize",M?"jogak:font-semibold jogak:text-[var(--jogak-color-fg-strong)] jogak:border-[var(--jogak-color-accent)]":"jogak:font-medium jogak:text-[var(--jogak-color-fg-muted)] jogak:border-transparent"),children:N},N)})}),a.jsx("div",{className:"jogak:flex-1 jogak:min-h-0 jogak:overflow-auto",children:s==="controls"?a.jsx(D,{args:u,argTypes:p,onArgChange:r}):a.jsx(q,{})})]})]})}function U({title:o,jogakName:e,viewport:t,bgMode:r,onViewportChange:j,onBgModeChange:n,showReset:g,onReset:l}){return a.jsxs("div",{className:"jogak:flex jogak:items-center jogak:gap-[10px] jogak:px-[14px] jogak:py-[7px] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg)] jogak:shrink-0",children:[a.jsxs("div",{className:"jogak:flex-1 jogak:text-[13px]",children:[a.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-subtle)]",children:o}),a.jsx("span",{className:"jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none",children:"/"}),a.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold",children:e})]}),a.jsx("div",{className:"jogak:flex jogak:gap-0.5 jogak:bg-[var(--jogak-color-bg-subtle)] jogak:rounded-[var(--jogak-radius-lg)] jogak:p-0.5",children:["mobile","tablet","desktop"].map(s=>a.jsx("button",{type:"button",onClick:()=>{j(s)},"aria-pressed":t===s,className:h("jogak:px-[9px] jogak:py-[3px] jogak:text-[12px] jogak:border-none jogak:rounded-[var(--jogak-radius-md)] jogak:cursor-pointer jogak:transition-all jogak:duration-100",t===s?"jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]":"jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"),children:to[s]},s))}),a.jsx("div",{className:"jogak:flex jogak:gap-1 jogak:items-center",children:["white","dark","transparent"].map(s=>a.jsx("button",{type:"button",onClick:()=>{n(s)},"aria-pressed":r===s,"aria-label":`${s} background`,className:h("jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",$,r===s?"jogak:border-[var(--jogak-color-accent)]":"jogak:border-[var(--jogak-color-border-strong)]"),style:E[s]},s))}),g&&a.jsx("button",{type:"button",onClick:l,className:"jogak:px-[10px] jogak:py-[3px] jogak:text-[12px] jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:bg-[var(--jogak-color-bg)] jogak:cursor-pointer jogak:text-[var(--jogak-color-fg)] jogak:leading-none",children:"Reset"})]})}function go({entry:o,args:e,source:t,theme:r,previewIsolation:j}){const[n,g]=c.useState(!1),l=a.jsxs("div",{className:"jogak:relative",children:[a.jsx(jo,{entry:o,args:e,previewIsolation:j}),a.jsx("button",{type:"button",onClick:()=>{g(s=>!s)},"aria-pressed":n,"aria-label":n?"Hide source code":"Show source code",className:h("jogak:absolute jogak:bottom-2 jogak:right-2 jogak:px-[9px] jogak:py-1","jogak:text-[11px] jogak:font-[family-name:var(--jogak-font-mono)] jogak:font-semibold jogak:tracking-[0.02em]","jogak:text-[var(--jogak-color-bg)] jogak:border-none jogak:rounded-[5px] jogak:cursor-pointer","jogak:shadow-[0_1px_4px_rgba(0,0,0,0.2)] jogak:transition-[background-color] jogak:duration-150 jogak:leading-none",n?"jogak:bg-[var(--jogak-color-accent)]":"jogak:bg-[#1e293b]"),children:"</>"})]});return a.jsxs("div",{children:[l,n&&a.jsx("div",{className:"jogak:mt-2 jogak:rounded-[var(--jogak-radius-xl)] jogak:overflow-hidden jogak:h-[320px] jogak:shadow-[0_0_0_1px_rgba(0,0,0,0.08),_0_4px_16px_rgba(0,0,0,0.12)]",children:a.jsx(ko,{source:t,theme:r})})]})}const _="jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";function jo({entry:o,args:e,previewIsolation:t}){return t==="shadow"?a.jsx(oo,{"data-testid":"preview-content",className:_,children:a.jsx(co,{entry:o,args:e})}):t==="iframe"?a.jsx(eo,{entry:o,args:e,"data-testid":"preview-content",className:`${_} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`}):a.jsx(lo,{entry:o,args:e})}function lo({entry:o,args:e}){const t=c.useRef(null);return c.useEffect(()=>{const r=t.current;if(r!==null)return m.reactAdapter.render(o,e,r),()=>{m.reactAdapter.unmount(r)}},[o]),c.useEffect(()=>{const r=t.current;r!==null&&m.reactAdapter.render(o,e,r)},[o,e]),a.jsx("div",{ref:t,"data-testid":"preview-content",className:_})}function co({entry:o,args:e}){const t=c.useRef(null);return c.useEffect(()=>{const r=t.current;if(r!==null)return m.reactAdapter.render(o,e,r),()=>{m.reactAdapter.unmount(r)}},[o]),c.useEffect(()=>{const r=t.current;r!==null&&m.reactAdapter.render(o,e,r)},[o,e]),a.jsx("div",{ref:t,"data-testid":"preview-content-shadow"})}function ko({source:o,theme:e}){const[t,r]=c.useState(!1),j=e.plain.backgroundColor??"#1e293b";if(o===void 0)return a.jsx("div",{className:"jogak:h-full jogak:flex jogak:items-center jogak:justify-center jogak:bg-[var(--jogak-source-bg)] jogak:text-[#94a3b8] jogak:text-[13px]",style:{"--jogak-source-bg":j},children:"Source not available"});const n=()=>{navigator.clipboard.writeText(o).then(()=>{r(!0),setTimeout(()=>{r(!1)},2e3)})};return a.jsxs("div",{className:"jogak:relative jogak:h-full",children:[a.jsx("button",{type:"button",onClick:n,className:"jogak:absolute jogak:top-[10px] jogak:right-3 jogak:z-[1] jogak:px-[9px] jogak:py-[3px] jogak:text-[11px] jogak:bg-[rgba(255,255,255,0.1)] jogak:text-[#e2e8f0] jogak:border jogak:border-[rgba(255,255,255,0.18)] jogak:rounded-[var(--jogak-radius-md)] jogak:cursor-pointer jogak:leading-none",children:t?"✓ Copied":"Copy"}),a.jsx(A.Highlight,{code:o.trim(),language:"tsx",theme:e,children:({style:g,tokens:l,getLineProps:s,getTokenProps:k})=>a.jsx("pre",{className:"jogak:m-0 jogak:py-3 jogak:px-0 jogak:text-[12.5px] jogak:leading-[1.7] jogak:font-[family-name:var(--jogak-font-mono)] jogak:h-full jogak:box-border jogak:overflow-auto",style:g,children:l.map((i,x)=>a.jsxs("div",{...s({line:i}),className:"jogak:flex jogak:pr-6",style:s({line:i}).style,children:[a.jsx("span",{className:"jogak:select-none jogak:min-w-10 jogak:pl-[14px] jogak:pr-[14px] jogak:text-right jogak:text-[rgba(148,163,184,0.45)] jogak:shrink-0 jogak:leading-[1.7]",children:x+1}),a.jsx("span",{children:i.map((v,w)=>a.jsx("span",{...k({token:v})},w))})]},x))})})]})}function P(){if(typeof window>"u")return null;const o=new URLSearchParams(window.location.search),e=o.get("entry");if(e===null)return null;const t=o.get("jogak");return{entryId:e,jogakName:t}}function io(o,e){const t=new URLSearchParams;t.set("entry",o),t.set("jogak",e),window.history.pushState({},"",`?${t.toString()}`)}function uo({entries:o,metas:e,codeTheme:t="vsDark",previewIsolation:r="none"}={}){const j=c.useMemo(()=>{if(o!==void 0){e!==void 0&&console.warn("[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.");const d=new y.ComponentRegistry;for(const u of o)d.register(u);return d}if(e!==void 0)for(const d of e)y.defaultRegistry.registerMeta(d);return y.defaultRegistry},[o,e]),n=c.useMemo(()=>P(),[]),[g,l]=c.useState((n==null?void 0:n.entryId)??null),[s,k]=c.useState((n==null?void 0:n.jogakName)??null),[i,x]=c.useState({});c.useEffect(()=>{const d=()=>{const u=P();u!==null?(l(u.entryId),k(u.jogakName),x({})):(l(null),k(null))};return window.addEventListener("popstate",d),()=>{window.removeEventListener("popstate",d)}},[]);const v=c.useCallback((d,u)=>{l(d),k(u),x({}),io(d,u)},[]),w=c.useCallback((d,u)=>{if(l(p=>p===d?d:p),k(p=>p??u),typeof window<"u"){const p=new URLSearchParams(window.location.search);p.get("entry")===d&&p.get("jogak")===null&&(p.set("jogak",u),window.history.replaceState({},"",`?${p.toString()}`))}},[]),f=c.useCallback((d,u)=>{x(p=>({...p,[d]:u}))},[]),b=c.useCallback(()=>{x({})},[]);return a.jsx(m.JogakProvider,{registry:j,children:a.jsxs("div",{"data-jogak-shell":!0,className:"jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden",children:[a.jsx(V,{selectedEntryId:g,selectedJogakName:s,onSelect:v}),a.jsx("main",{className:"jogak:overflow-hidden jogak:min-h-0",children:g!==null?a.jsx(H,{entryId:g,jogakName:s,overrideArgs:i,onArgChange:f,onReset:b,codeTheme:t,onResolveJogak:w,previewIsolation:r}):a.jsx("div",{className:"jogak:flex jogak:items-center jogak:justify-center jogak:h-full jogak:text-[var(--jogak-color-fg-subtle)]",children:"Select a component from the sidebar"})})]})})}function xo(){const o=m.useRegistry(),e=c.useMemo(()=>o.getAll(),[o]),t=c.useMemo(()=>o.getTree(),[o]),r=c.useMemo(()=>j=>o.search(j),[o]);return{entries:e,tree:t,search:r}}exports.Actions=q;exports.Controls=D;exports.JogakApp=uo;exports.Preview=H;exports.Sidebar=V;exports.useRegistry=xo;
|