diff --git "a/.next/static/chunks/app/page-a32e1a99596afbe6.js" "b/.next/static/chunks/app/page-a32e1a99596afbe6.js"
new file mode 100644--- /dev/null
+++ "b/.next/static/chunks/app/page-a32e1a99596afbe6.js"
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[974],{8846:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>tJ});var a=n(5155),s=n(2115),r=n(5695),o=n(4520),i=n(3999),l=n(7168),c=n(9852);let d=s.forwardRef((e,t)=>{let{className:n,...s}=e;return(0,a.jsx)("textarea",{className:(0,i.cn)("flex min-h-[84px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",n),ref:t,...s})});d.displayName="Textarea";var m=n(2332),u=n(7434),p=n(7213),h=n(5196),g=n(4416),v=n(6287),f=n(4395),x=n(5880),b=n(5868),y=n(4020),w=n(2657),j=n(4357),k=n(7108),N=n(1788),C=n(2525),S=n(757),E=n(3853);function A(e){let{...t}=e;return(0,a.jsx)(E.bL,{"data-slot":"dropdown-menu",...t})}function P(e){let{...t}=e;return(0,a.jsx)(E.l9,{"data-slot":"dropdown-menu-trigger",...t})}function I(e){let{className:t,sideOffset:n=4,...s}=e;return(0,a.jsx)(E.ZL,{children:(0,a.jsx)(E.UC,{"data-slot":"dropdown-menu-content",sideOffset:n,className:(0,i.cn)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-40 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg",t),...s})})}function D(e){let{className:t,inset:n,variant:s="default",...r}=e;return(0,a.jsx)(E.q7,{"data-slot":"dropdown-menu-item","data-inset":n,"data-variant":s,className:(0,i.cn)("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",t),...r})}function L(e){let{className:t,...n}=e;return(0,a.jsx)(E.wv,{"data-slot":"dropdown-menu-separator",className:(0,i.cn)("bg-border -mx-1 my-1 h-px",t),...n})}var T=n(6671);function M(e){var t,n;let{project:r,onSelect:E,onDelete:M,onExport:z,onExportZip:F,onDuplicate:R,onPreview:O,onUpdate:B,viewMode:W="grid",forceMenuOpen:U=!1,highlightExport:_=!1}=e,[$,Y]=(0,s.useState)(!1),[H,V]=(0,s.useState)(r.name),[q,G]=(0,s.useState)(r.description||""),[J,K]=(0,s.useState)(null),[Z,X]=(0,s.useState)(!0),[Q,ee]=(0,s.useState)(!1);(0,s.useEffect)(()=>{et()},[r.id]);let et=async()=>{try{let e=await o.OP.getProjectStats(r.id);K(e)}catch(e){i.v.error("Failed to load project stats:",e)}finally{X(!1)}},en=async()=>{if(!H.trim()){T.oR.error("Project name cannot be empty"),V(r.name),Y(!1);return}if(H.length>50)return void T.oR.error("Project name must be 50 characters or less");if(q.length>200)return void T.oR.error("Description must be 200 characters or less");try{r.name=H.trim(),r.description=q.trim()||void 0,await o.OP.updateProject(r),B(r),Y(!1),T.oR.success("Project updated")}catch(e){i.v.error("Failed to update project:",e),T.oR.error("Failed to update project"),V(r.name),G(r.description||"")}},ea=()=>{V(r.name),G(r.description||""),Y(!1)};(0,s.useEffect)(()=>{U?ee(!0):ee(!1)},[U]);let es=e=>{if(U)return void ee(!0);ee(e)},er=()=>J?Object.entries(J.fileTypes).sort((e,t)=>{let[,n]=e,[,a]=t;return a-n}).slice(0,3):[],eo=e=>{let t=e.toLowerCase();return["html","htm"].includes(t)?(0,a.jsx)(m.A,{className:"h-3 w-3"}):["css","scss","sass"].includes(t)?(0,a.jsx)(u.A,{className:"h-3 w-3"}):["js","jsx","ts","tsx"].includes(t)?(0,a.jsx)(m.A,{className:"h-3 w-3"}):["png","jpg","jpeg","gif","svg"].includes(t)?(0,a.jsx)(p.A,{className:"h-3 w-3"}):(0,a.jsx)(u.A,{className:"h-3 w-3"})},ei=e=>e&&0!==e?"$".concat(e.toFixed(2)):null;return"list"===W?(0,a.jsx)("div",{className:"border border-border rounded-lg p-4 hover:shadow-md transition-all cursor-pointer hover:border-primary/50 ".concat(_?"ring-2 ring-primary/70 animate-ring-opacity":""),style:{background:"linear-gradient(var(--project-card-tint), var(--project-card-tint)), var(--card)"},onClick:()=>E(r),children:(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsx)("div",{className:"flex-1 min-w-0",children:(0,a.jsxs)("div",{className:"flex items-center gap-3",children:[$?(0,a.jsxs)("div",{className:"flex items-center gap-2",onClick:e=>e.stopPropagation(),children:[(0,a.jsx)(c.p,{value:H,onChange:e=>V(e.target.value),onKeyDown:e=>{"Enter"===e.key&&en(),"Escape"===e.key&&ea()},className:"h-7 text-sm",autoFocus:!0,maxLength:50}),(0,a.jsxs)("span",{className:"text-xs text-muted-foreground",children:[H.length,"/50"]}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:en,children:(0,a.jsx)(h.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:ea,children:(0,a.jsx)(g.A,{className:"h-3 w-3"})})]}):(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("h3",{className:"font-semibold truncate",children:r.name}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5 opacity-0 group-hover:opacity-100",onClick:e=>{e.stopPropagation(),Y(!0)},children:(0,a.jsx)(v.A,{className:"h-3 w-3"})})]}),r.description&&!$&&(0,a.jsx)("span",{className:"text-sm text-muted-foreground truncate max-w-md",children:r.description})]})}),(0,a.jsxs)("div",{className:"flex items-center gap-4 ml-4",children:[J&&(0,a.jsxs)("div",{className:"flex items-center gap-4 text-sm text-muted-foreground",children:[(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(f.A,{className:"h-4 w-4"}),J.fileCount," files"]}),(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(x.A,{className:"h-4 w-4"}),J.formattedSize]}),(null==(n=r.costTracking)?void 0:n.totalCost)&&(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(b.A,{className:"h-4 w-4"}),ei(r.costTracking.totalCost)]})]}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:"text-xs text-muted-foreground",children:(0,S.m)(r.updatedAt,{addSuffix:!0})}),(0,a.jsxs)(A,{open:!!U||Q,onOpenChange:es,children:[(0,a.jsx)(P,{asChild:!0,onClick:e=>e.stopPropagation(),"data-tour-id":_?"project-actions-trigger":void 0,children:(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-8 w-8",children:(0,a.jsx)(y.A,{className:"h-4 w-4"})})}),(0,a.jsxs)(I,{align:"end",children:[(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),O(r)},children:[(0,a.jsx)(w.A,{className:"mr-2 h-4 w-4"}),"Preview"]}),(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),R(r)},children:[(0,a.jsx)(j.A,{className:"mr-2 h-4 w-4"}),"Duplicate"]}),(0,a.jsx)(L,{}),(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),F(r)},children:[(0,a.jsx)(k.A,{className:"mr-2 h-4 w-4"}),"Export as ZIP"]}),(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),z(r)},"data-tour-id":_?"project-export-json":void 0,children:[(0,a.jsx)(N.A,{className:"mr-2 h-4 w-4"}),"Export as JSON"]}),(0,a.jsx)(L,{}),(0,a.jsxs)(D,{className:"text-destructive",onClick:e=>{e.stopPropagation(),M(r)},children:[(0,a.jsx)(C.A,{className:"mr-2 h-4 w-4"}),"Delete"]})]})]})]})]})]})}):(0,a.jsx)("div",{className:"border border-border rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer hover:border-primary/50 group ".concat(_?"ring-2 ring-primary/70 animate-ring-opacity":""),style:{background:"linear-gradient(var(--project-card-tint), var(--project-card-tint)), var(--card)"},onClick:()=>E(r),"data-tour-id":"project-card",children:(0,a.jsxs)("div",{className:"space-y-3",children:[(0,a.jsxs)("div",{className:"flex justify-between items-start",children:[$?(0,a.jsxs)("div",{className:"flex-1",onClick:e=>e.stopPropagation(),children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(c.p,{value:H,onChange:e=>V(e.target.value),onKeyDown:e=>{"Enter"===e.key&&!1===e.shiftKey&&(e.preventDefault(),en()),"Escape"===e.key&&ea()},className:"h-8 text-sm font-semibold",autoFocus:!0,maxLength:50}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:en,children:(0,a.jsx)(h.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:ea,children:(0,a.jsx)(g.A,{className:"h-3 w-3"})})]}),(0,a.jsxs)("span",{className:"text-xs text-muted-foreground mt-1",children:[H.length,"/50"]})]}):(0,a.jsxs)("div",{className:"flex items-center gap-2 flex-1",children:[(0,a.jsx)("h3",{className:"font-semibold text-lg truncate flex-1",children:r.name}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity",onClick:e=>{e.stopPropagation(),Y(!0)},children:(0,a.jsx)(v.A,{className:"h-3 w-3"})})]}),(0,a.jsxs)(A,{open:!!U||Q,onOpenChange:es,children:[(0,a.jsx)(P,{asChild:!0,onClick:e=>e.stopPropagation(),"data-tour-id":_?"project-actions-trigger":void 0,children:(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-8 w-8",children:(0,a.jsx)(y.A,{className:"h-4 w-4"})})}),(0,a.jsxs)(I,{align:"end",children:[(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),O(r)},children:[(0,a.jsx)(w.A,{className:"mr-2 h-4 w-4"}),"Preview"]}),(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),R(r)},children:[(0,a.jsx)(j.A,{className:"mr-2 h-4 w-4"}),"Duplicate"]}),(0,a.jsx)(L,{}),(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),F(r)},children:[(0,a.jsx)(k.A,{className:"mr-2 h-4 w-4"}),"Export as ZIP"]}),(0,a.jsxs)(D,{onClick:e=>{e.stopPropagation(),z(r)},"data-tour-id":_?"project-export-json":void 0,children:[(0,a.jsx)(N.A,{className:"mr-2 h-4 w-4"}),"Export as JSON"]}),(0,a.jsx)(L,{}),(0,a.jsxs)(D,{className:"text-destructive",onClick:e=>{e.stopPropagation(),M(r)},children:[(0,a.jsx)(C.A,{className:"mr-2 h-4 w-4"}),"Delete"]})]})]})]}),$?(0,a.jsxs)("div",{onClick:e=>e.stopPropagation(),children:[(0,a.jsx)(d,{value:q,onChange:e=>G(e.target.value),onKeyDown:e=>{"Escape"===e.key&&ea()},placeholder:"Add a description...",className:"min-h-[60px] text-sm resize-none",maxLength:200}),(0,a.jsx)("div",{className:"flex items-center justify-between mt-1",children:(0,a.jsxs)("span",{className:"text-xs text-muted-foreground",children:[q.length,"/200"]})})]}):(0,a.jsx)("div",{className:"min-h-[40px]",children:r.description?(0,a.jsx)("p",{className:"text-sm text-muted-foreground line-clamp-2",children:r.description}):(0,a.jsx)("p",{className:"text-sm text-muted-foreground/50 italic",children:"No description"})}),Z?(0,a.jsx)("div",{className:"h-6 bg-muted animate-pulse rounded"}):J&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex items-center gap-3 text-sm text-muted-foreground pt-2 border-t",children:[(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(f.A,{className:"h-4 w-4"}),J.fileCount," ",1===J.fileCount?"file":"files"]}),(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(x.A,{className:"h-4 w-4"}),J.formattedSize]}),(null==(t=r.costTracking)?void 0:t.totalCost)&&r.costTracking.totalCost>0&&(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(b.A,{className:"h-4 w-4"}),ei(r.costTracking.totalCost)]})]}),er().length>0&&(0,a.jsx)("div",{className:"flex items-center gap-3 text-xs",children:er().map(e=>{let[t,n]=e;return(0,a.jsxs)("div",{className:"flex items-center gap-1 text-muted-foreground",children:[eo(t),(0,a.jsxs)("span",{children:[t," (",n,")"]})]},t)})})]}),(0,a.jsx)("div",{className:"text-xs text-muted-foreground pt-2 border-t",children:(0,a.jsxs)("p",{children:["Updated ",(0,S.m)(r.updatedAt,{addSuffix:!0})]})})]})})}var z=n(3902),F=n(3904),R=n(2355),O=n(3052),B=n(7340),W=n(2580),U=n(6767),_=n(2280),$=n(4738),Y=n(5784);let H={mobile:{width:"375px",height:"100%",maxHeight:"667px"},tablet:{width:"768px",height:"100%",maxHeight:"1024px"},desktop:{width:"100%",height:"100%",maxHeight:"900px",maxWidth:"1440px"},responsive:{width:"100%",height:"100%"}};function V(e){let{projectId:t,refreshTrigger:n,onFocusSelection:r,hasFocusTarget:c=!1,onClose:d}=e,[m,u]=(0,s.useState)(null),[p,h]=(0,s.useState)("/"),[v,f]=(0,s.useState)(!0),[x,b]=(0,s.useState)(null),[y,j]=(0,s.useState)("tablet"),[k,N]=(0,s.useState)(["/"]),[C,S]=(0,s.useState)(0),[E,A]=(0,s.useState)(!1),[P,I]=(0,s.useState)(!1),D=P?{backgroundColor:"var(--button-preview-active)",color:"white"}:c?{backgroundColor:"rgba(99, 102, 241, 0.12)",color:"var(--button-preview-active)"}:{},L=(0,s.useRef)(null),T=(0,s.useRef)(null),M=(0,s.useRef)(null),V=(0,s.useRef)("/"),q=(0,s.useRef)(null),G=(0,s.useRef)(!1),J=(0,s.useCallback)(e=>{if(L.current&&L.current.contentWindow)try{L.current.contentWindow.postMessage(e,"*")}catch(e){i.v.warn("Failed to communicate with preview iframe",e)}},[]),K=(0,s.useRef)(!1),Z=(0,s.useRef)(null),X=(0,s.useRef)(null),Q=(0,s.useRef)(null),ee=()=>(0,a.jsxs)("div",{className:"p-3 border-b bg-muted/70 flex items-center gap-2",children:[(0,a.jsx)(w.A,{className:"h-4 w-4 md:hidden",style:{color:"var(--button-preview-active)"}}),d?(0,a.jsxs)("button",{type:"button",onClick:d,"aria-label":"Hide preview",className:"relative hidden h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-destructive md:flex group",children:[(0,a.jsx)(w.A,{className:"h-4 w-4 transition-opacity group-hover:opacity-0",style:{color:"var(--button-preview-active)"}}),(0,a.jsx)(g.A,{className:"absolute h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100"})]}):(0,a.jsx)(w.A,{className:"hidden h-4 w-4 md:inline-flex",style:{color:"var(--button-preview-active)"}}),(0,a.jsx)("h3",{className:"text-sm font-medium",children:"Live Preview"})]});(0,s.useEffect)(()=>{M.current=m},[m]),(0,s.useEffect)(()=>{G.current=P,E&&J({type:"selector-toggle",active:P})},[P,E,J]),(0,s.useEffect)(()=>{let e=L.current;if(!e)return;let t=()=>{J({type:"selector-toggle",active:G.current})};return e.addEventListener("load",t),()=>{e.removeEventListener("load",t)}},[E,J]),(0,s.useEffect)(()=>{V.current=p},[p]),(0,s.useEffect)(()=>{if(E&&q.current&&M.current){let e=q.current;q.current=null,es(e,M.current)}},[E]),(0,s.useEffect)(()=>()=>{X.current&&window.clearTimeout(X.current)},[]);let et=(0,s.useCallback)(async function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=!(arguments.length>1)||void 0===arguments[1]||arguments[1];n&&f(!0),b(null);try{await o.OP.init();let n=e?V.current:null;T.current&&T.current.cleanupBlobUrls();let a=new z.B(o.OP,t);T.current=a;let s=await a.compileProject();u(s),M.current=s;let r=n;r||(r=s.blobUrls.has("/index.html")?"/":s.entryPoint||(s.routes.length>0?s.routes[0].path:"/")),es(r,s)}catch(e){b(e instanceof Error?e.message:"Failed to compile project"),i.v.error("Compilation error:",e)}finally{n&&f(!1)}},[t]),en=(0,s.useCallback)(function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=!(arguments.length>1)||void 0===arguments[1]||arguments[1];if(K.current){var n,a;let s=Z.current;Z.current={preserve:null!=(n=null==s?void 0:s.preserve)&&n||e,showLoading:null!=(a=null==s?void 0:s.showLoading)&&a||t};return}(async(e,t)=>{K.current=!0;try{await et(e,t)}finally{K.current=!1;let e=Z.current;Z.current=null,e&&en(e.preserve,e.showLoading)}})(e,t)},[et]),ea=(0,s.useCallback)(function(){var e,t;let n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],a=arguments.length>1&&void 0!==arguments[1]&&arguments[1],s=Q.current;Q.current={preserve:null!=(e=null==s?void 0:s.preserve)&&e||n,showLoading:null!=(t=null==s?void 0:s.showLoading)&&t||a},X.current&&window.clearTimeout(X.current),X.current=window.setTimeout(()=>{let e=Q.current;Q.current=null,X.current=null,e&&en(e.preserve,e.showLoading)},150)},[en]);(0,s.useEffect)(()=>{en()},[t,n,en]),(0,s.useEffect)(()=>{let e=()=>{ea(!0)},n=e=>{e.detail&&e.detail.projectId!==t||ea(!0)};return window.addEventListener("filesChanged",e),window.addEventListener("fileContentChanged",n),()=>{window.removeEventListener("filesChanged",e),window.removeEventListener("fileContentChanged",n)}},[t,ea]);let es=(e,t)=>{let n,a=t||M.current||m;if(!a)return void i.v.warn("No compiled project available");if(G.current?I(!1):J({type:"selector-toggle",active:!1}),!L.current||!E){q.current=e;return}let s=e;s.startsWith("/")||(s="/"+s);let r=a.routes.find(e=>e.path===s);n=r?r.file:"/"===s?"/index.html":s+".html";let o=a.files.find(e=>e.path===n);if(!o){b("Page not found: ".concat(e)),a.files.find(e=>"/index.html"===e.path||"index.html"===e.path)&&"/"!==e&&es("/",t);return}let l="string"==typeof o.content?o.content:new TextDecoder().decode(o.content);l=(l=(l=l.replace(/href="([^"]+)"/g,(e,t)=>{if(!t.endsWith(".css")||t.startsWith("http")||t.startsWith("//"))return e;let n=t.startsWith("/")?t:"/"+t,s=a.blobUrls.get(n);return s?'href="'.concat(s,'"'):e})).replace(/src="([^"]+)"/g,(e,t)=>{if(!t.endsWith(".js")||t.startsWith("http")||t.startsWith("//"))return e;let n=t.startsWith("/")?t:"/"+t,s=a.blobUrls.get(n);return s?'src="'.concat(s,'"'):e})).replace(/src="([^"]+\.(png|jpg|jpeg|gif|svg|webp))"/gi,(e,t)=>{let n=t.startsWith("/")?t:"/"+t,s=a.blobUrls.get(n);return s?'src="'.concat(s,'"'):e});let c="\n      <script>\n        (function() {\n          const isInIframe = window !== window.parent;\n\n          function resolveInternalPath(href) {\n            let path = href;\n            if (!path.startsWith('/')) {\n              const currentPath = '".concat(s,"';\n              const currentDir = currentPath.substring(0, currentPath.lastIndexOf('/'));\n              path = currentDir + '/' + path;\n            }\n\n            if (path.endsWith('.html')) {\n              path = path.slice(0, -5);\n            }\n            if (path === '/index') {\n              path = '/';\n            }\n            return path;\n          }\n\n          document.addEventListener('click', function(e) {\n            const target = e.target && e.target.closest ? e.target.closest('a') : null;\n            if (target && target.getAttribute) {\n              const href = target.getAttribute('href');\n\n              if (!href) {\n                return;\n              }\n\n              if (href.startsWith('#')) {\n                e.preventDefault();\n                const targetId = href.substring(1);\n                const targetElement = document.getElementById(targetId);\n                if (targetElement) {\n                  targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                }\n                return;\n              }\n\n              const isExternal = href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//');\n              if (!isExternal) {\n                if (isInIframe) {\n                  e.preventDefault();\n                  window.parent.postMessage({\n                    type: 'navigate',\n                    path: resolveInternalPath(href)\n                  }, '*');\n                }\n              } else {\n                e.preventDefault();\n                window.open(href, '_blank');\n              }\n            }\n          });\n\n          const selectorState = {\n            active: false,\n            overlay: null,\n            lastTarget: null,\n            previousCursor: ''\n          };\n\n          function isElement(node) {\n            return node && node.nodeType === 1;\n          }\n\n          function ensureOverlay() {\n            if (selectorState.overlay) {\n              return selectorState.overlay;\n            }\n            const overlay = document.createElement('div');\n            overlay.style.position = 'absolute';\n            overlay.style.pointerEvents = 'none';\n            overlay.style.border = '2px solid rgba(99, 102, 241, 0.95)';\n            overlay.style.background = 'rgba(99, 102, 241, 0.08)';\n            overlay.style.boxShadow = '0 0 0 4px rgba(99, 102, 241, 0.32), 0 20px 40px rgba(15, 23, 42, 0.28)';\n            overlay.style.borderRadius = '12px';\n            overlay.style.zIndex = '2147483647';\n            overlay.style.transition = 'top 0.12s ease-out, left 0.12s ease-out, width 0.12s ease-out, height 0.12s ease-out';\n            overlay.style.willChange = 'top, left, width, height';\n            selectorState.overlay = overlay;\n            document.body.appendChild(overlay);\n            return overlay;\n          }\n\n          function positionOverlay(target) {\n            if (!isElement(target)) {\n              return;\n            }\n            const overlay = ensureOverlay();\n            const rect = target.getBoundingClientRect();\n            overlay.style.top = (rect.top + window.scrollY) + 'px';\n            overlay.style.left = (rect.left + window.scrollX) + 'px';\n            overlay.style.width = Math.max(rect.width, 1) + 'px';\n            overlay.style.height = Math.max(rect.height, 1) + 'px';\n            overlay.style.opacity = '1';\n          }\n\n          function clearOverlay() {\n            if (selectorState.overlay && selectorState.overlay.parentElement) {\n              selectorState.overlay.parentElement.removeChild(selectorState.overlay);\n            }\n            selectorState.overlay = null;\n          }\n\n          function buildDomPath(element) {\n            if (!isElement(element)) {\n              return '';\n            }\n            const segments = [];\n            let current = element;\n            while (current && current.nodeType === 1) {\n              let segment = current.tagName.toLowerCase();\n              if (current.id) {\n                segment += '#' + current.id;\n                segments.unshift(segment);\n                break;\n              }\n              const parent = current.parentElement;\n              if (parent) {\n                const siblings = parent.children;\n                let index = 0;\n                for (let i = 0; i < siblings.length; i++) {\n                  if (siblings[i].tagName === current.tagName) {\n                    index++;\n                  }\n                  if (siblings[i] === current) {\n                    if (index > 1) {\n                      segment += ':nth-of-type(' + index + ')';\n                    } else {\n                      const hasSame = Array.from(siblings).some(function(child, childIndex) {\n                        return childIndex !== i && child.tagName === current.tagName;\n                      });\n                      if (hasSame) {\n                        segment += ':nth-of-type(' + index + ')';\n                      }\n                    }\n                    break;\n                  }\n                }\n              }\n              segments.unshift(segment);\n              current = parent;\n            }\n            return segments.join(' > ');\n          }\n\n          function gatherAttributes(element) {\n            const attributes = {};\n            if (!isElement(element) || !element.attributes) {\n              return attributes;\n            }\n            const maxAttributes = 25;\n            for (let i = 0; i < element.attributes.length && i < maxAttributes; i++) {\n              const attr = element.attributes[i];\n              if (!attr) continue;\n              const name = attr.name;\n              if (!name || name === 'style' || name.startsWith('on')) {\n                continue;\n              }\n              attributes[name] = attr.value;\n            }\n            return attributes;\n          }\n\n          function handleMouseMove(event) {\n            if (!selectorState.active) {\n              return;\n            }\n            const target = isElement(event.target) ? event.target : (event.target && event.target.parentElement);\n            if (!isElement(target) || target === selectorState.lastTarget) {\n              return;\n            }\n            selectorState.lastTarget = target;\n            positionOverlay(target);\n          }\n\n          function handleClick(event) {\n            if (!selectorState.active) {\n              return;\n            }\n            event.preventDefault();\n            event.stopPropagation();\n            if (typeof event.stopImmediatePropagation === 'function') {\n              event.stopImmediatePropagation();\n            }\n            const target = isElement(event.target) ? event.target : (event.target && event.target.parentElement);\n            if (!isElement(target)) {\n              disableSelector(false);\n              return;\n            }\n            const payload = {\n              domPath: buildDomPath(target),\n              tagName: target.tagName.toLowerCase(),\n              attributes: gatherAttributes(target),\n              outerHTML: target.outerHTML || ''\n            };\n            if (isInIframe) {\n              window.parent.postMessage({ type: 'selector-selection', payload: payload }, '*');\n            }\n            disableSelector(false);\n          }\n\n          function handleContextMenu(event) {\n            if (!selectorState.active) {\n              return;\n            }\n            event.preventDefault();\n            event.stopPropagation();\n          }\n\n          function handleKeyDown(event) {\n            if (!selectorState.active) {\n              return;\n            }\n            if (event.key === 'Escape') {\n              event.preventDefault();\n              disableSelector(true);\n            }\n          }\n\n          function enableSelector() {\n            if (selectorState.active) {\n              return;\n            }\n            selectorState.active = true;\n            selectorState.previousCursor = document.body.style.cursor;\n            const overlay = ensureOverlay();\n            overlay.style.opacity = '0';\n            document.body.style.cursor = 'crosshair';\n            document.addEventListener('mousemove', handleMouseMove, true);\n            document.addEventListener('click', handleClick, true);\n            document.addEventListener('contextmenu', handleContextMenu, true);\n            document.addEventListener('keydown', handleKeyDown, true);\n          }\n\n          function disableSelector(notifyCancel) {\n            if (!selectorState.active) {\n              return;\n            }\n            selectorState.active = false;\n            selectorState.lastTarget = null;\n            if (selectorState.overlay) {\n              selectorState.overlay.style.opacity = '0';\n              window.setTimeout(clearOverlay, 120);\n            } else {\n              clearOverlay();\n            }\n            document.body.style.cursor = selectorState.previousCursor || '';\n            document.removeEventListener('mousemove', handleMouseMove, true);\n            document.removeEventListener('click', handleClick, true);\n            document.removeEventListener('contextmenu', handleContextMenu, true);\n            document.removeEventListener('keydown', handleKeyDown, true);\n            if (notifyCancel && isInIframe) {\n              window.parent.postMessage({ type: 'selector-cancelled' }, '*');\n            }\n          }\n\n          window.addEventListener('message', function(event) {\n            const data = event.data;\n            if (!data || typeof data !== 'object') {\n              return;\n            }\n            if (data.type === 'selector-toggle') {\n              if (data.active) {\n                enableSelector();\n              } else {\n                disableSelector(false);\n              }\n            }\n          });\n        })();\n      <\/script>\n    ");l.includes("</body>")?l=l.replace("</body>",c+"</body>"):l+=c,L.current.srcdoc=l,h(s),V.current=s,S(e=>(N(t=>[...t.slice(0,e+1),s]),e+1))},er=(0,s.useCallback)(e=>{es(e)},[m]),eo=()=>{if(C>0){let e=C-1;S(e),es(k[e])}},ei=()=>{if(C<k.length-1){let e=C+1;S(e),es(k[e])}},el=()=>{es("/")},ec=()=>{en(!0,!1)};return((0,s.useEffect)(()=>{let e=e=>{let t=e.data;if(t&&"object"==typeof t){if("navigate"===t.type&&t.path)return void er(t.path);if("selector-selection"===t.type&&t.payload){I(!1),null==r||r(t.payload);return}"selector-cancelled"===t.type&&I(!1)}};return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}},[er,r]),(0,s.useEffect)(()=>()=>{T.current&&T.current.cleanupBlobUrls()},[]),v)?(0,a.jsxs)("div",{className:"h-full flex flex-col",children:[(0,a.jsx)(ee,{}),(0,a.jsx)("div",{className:"flex-1 flex items-center justify-center",children:(0,a.jsxs)("div",{className:"text-center space-y-2",children:[(0,a.jsx)(F.A,{className:"w-8 h-8 animate-spin mx-auto text-primary"}),(0,a.jsx)("p",{className:"text-muted-foreground",children:"Compiling project..."})]})})]}):x?(0,a.jsxs)("div",{className:"h-full flex flex-col",children:[(0,a.jsx)(ee,{}),(0,a.jsx)("div",{className:"flex-1 flex items-center justify-center",children:(0,a.jsxs)("div",{className:"text-center text-destructive space-y-2",children:[(0,a.jsx)("p",{className:"font-medium",children:"Error"}),(0,a.jsx)("p",{className:"text-sm mt-2",children:x}),(0,a.jsx)(l.$,{onClick:ec,className:"mt-4",children:"Try Again"})]})})]}):(0,a.jsxs)("div",{className:"h-full flex flex-col",children:[(0,a.jsx)(ee,{}),(0,a.jsxs)("div",{className:"border-b p-2 flex items-center gap-2 md:hidden",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:eo,disabled:0===C,children:(0,a.jsx)(R.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:ei,disabled:C>=k.length-1,children:(0,a.jsx)(O.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:el,children:(0,a.jsx)(B.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:ec,children:(0,a.jsx)(F.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:()=>I(e=>!e),disabled:!E,style:D,title:P?"Cancel element selection":c?"Replace focused element":"Select element","data-tour-id":"focus-crosshair-button",children:(0,a.jsx)(W.A,{className:"h-3 w-3"})})]}),m&&m.routes.length>1&&(0,a.jsxs)(Y.l6,{value:p,onValueChange:er,children:[(0,a.jsx)(Y.bq,{className:"flex-1 h-8 min-w-0 max-w-full",children:(0,a.jsx)(Y.yv,{className:"truncate"})}),(0,a.jsx)(Y.gC,{children:m.routes.map(e=>(0,a.jsx)(Y.eb,{value:e.path,children:e.title||e.path},e.path))})]})]}),(0,a.jsxs)("div",{className:"border-b p-2 hidden md:flex items-center gap-2",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:eo,disabled:0===C,children:(0,a.jsx)(R.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:ei,disabled:C>=k.length-1,children:(0,a.jsx)(O.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:el,children:(0,a.jsx)(B.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:ec,children:(0,a.jsx)(F.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:()=>I(e=>!e),disabled:!E,style:{backgroundColor:P?"var(--button-preview-active)":void 0,color:P?"white":void 0},title:P?"Cancel element focus":"Select element","data-tour-id":"focus-crosshair-button",children:(0,a.jsx)(W.A,{className:"h-3 w-3"})})]}),(0,a.jsx)("div",{className:"flex-1 px-3 py-1 bg-muted rounded text-sm",children:p}),m&&m.routes.length>1&&(0,a.jsxs)(Y.l6,{value:p,onValueChange:er,children:[(0,a.jsx)(Y.bq,{className:"w-[200px] h-8",children:(0,a.jsx)(Y.yv,{})}),(0,a.jsx)(Y.gC,{children:m.routes.map(e=>(0,a.jsx)(Y.eb,{value:e.path,children:e.title||e.path},e.path))})]}),(0,a.jsxs)("div",{className:"flex items-center gap-1 border-l pl-2",children:[(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5 rounded-sm",style:{backgroundColor:"mobile"===y?"var(--button-preview-active)":void 0,color:"mobile"===y?"white":void 0},onClick:()=>j("mobile"),children:(0,a.jsx)(U.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5 rounded-sm",style:{backgroundColor:"tablet"===y?"var(--button-preview-active)":void 0,color:"tablet"===y?"white":void 0},onClick:()=>j("tablet"),children:(0,a.jsx)(_.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5 rounded-sm",style:{backgroundColor:"desktop"===y?"var(--button-preview-active)":void 0,color:"desktop"===y?"white":void 0},onClick:()=>j("desktop"),children:(0,a.jsx)($.A,{className:"h-3 w-3"})})]})]}),(0,a.jsx)("div",{className:"flex-1 bg-muted/20 dark:bg-muted/10 p-4 overflow-auto min-h-0",children:(0,a.jsx)("div",{className:(0,i.cn)("bg-white mx-auto shadow-2xl transition-all duration-300","responsive"!==y&&"rounded-lg"),style:{width:H[y].width||"100%",height:H[y].height||"100%",maxHeight:H[y].maxHeight||"100%",maxWidth:H[y].maxWidth||"100%"},children:(0,a.jsx)("iframe",{ref:e=>{L.current=e,e&&!E?setTimeout(()=>{A(!0)},0):!e&&E&&A(!1)},className:"w-full h-full rounded-lg",sandbox:"allow-scripts allow-same-origin allow-forms",title:"Preview"})})})]})}let q={rE:"1.11.0"};var G=n(5452);function J(e){let{...t}=e;return(0,a.jsx)(G.bL,{"data-slot":"dialog",...t})}function K(e){let{...t}=e;return(0,a.jsx)(G.ZL,{"data-slot":"dialog-portal",...t})}function Z(e){let{className:t,...n}=e;return(0,a.jsx)(G.hJ,{"data-slot":"dialog-overlay",className:(0,i.cn)("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",t),...n})}function X(e){let{className:t,children:n,showCloseButton:s=!0,...r}=e;return(0,a.jsxs)(K,{"data-slot":"dialog-portal",children:[(0,a.jsx)(Z,{}),(0,a.jsxs)(G.UC,{"data-slot":"dialog-content",className:(0,i.cn)("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-2xl duration-200 sm:max-w-lg",t),...r,children:[n,s&&(0,a.jsxs)(G.bm,{"data-slot":"dialog-close",className:"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",children:[(0,a.jsx)(g.A,{}),(0,a.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})}function Q(e){let{className:t,...n}=e;return(0,a.jsx)("div",{"data-slot":"dialog-header",className:(0,i.cn)("flex flex-col gap-2 text-center sm:text-left",t),...n})}function ee(e){let{className:t,...n}=e;return(0,a.jsx)("div",{"data-slot":"dialog-footer",className:(0,i.cn)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",t),...n})}function et(e){let{className:t,...n}=e;return(0,a.jsx)(G.hE,{"data-slot":"dialog-title",className:(0,i.cn)("text-lg leading-none font-semibold",t),...n})}function en(e){let{className:t,...n}=e;return(0,a.jsx)(G.VY,{"data-slot":"dialog-description",className:(0,i.cn)("text-muted-foreground text-sm",t),...n})}var ea=n(5221),es=n(8145),er=n(9099),eo=n(3786),ei=n(9509);function el(e){let{open:t,onOpenChange:n}=e;return(0,a.jsx)(J,{open:t,onOpenChange:n,children:(0,a.jsxs)(X,{className:"max-w-3xl max-h-[90vh]",children:[(0,a.jsx)(Q,{children:(0,a.jsxs)("div",{className:"flex items-center gap-4 mb-2",children:[(0,a.jsx)(ea.g,{width:64,height:64}),(0,a.jsxs)("div",{children:[(0,a.jsx)(et,{className:"text-2xl",children:"DeepStudio"}),(0,a.jsx)(en,{className:"text-base",children:"Browser-based Website Builder"})]})]})}),(0,a.jsxs)("div",{className:"space-y-6 overflow-y-auto max-h-[60vh] pr-4",children:[(0,a.jsx)("section",{children:(0,a.jsxs)("div",{className:"text-sm text-gray-600 dark:text-gray-300 leading-relaxed space-y-3",children:[(0,a.jsx)("p",{children:"DeepStudio is a fork from @enzostvs and @victor's DeepSite v2 that over the months of tinkering became a BYOK (Bring Your Own Key) agentic browser-based website builder where you describe what you want and an agent writes the code."}),(0,a.jsx)("p",{children:"This is a solo project and there isn't a huge corpo behind it. I'll do my best to fix issues and possibly keep the project improving, but it's just me doing this for fun so please be patient. All feedback and contributions are more than welcome."}),(0,a.jsx)("p",{children:"If you make something with the app I would be thrilled if you could share what you've made."})]})}),(0,a.jsxs)("section",{children:[(0,a.jsx)("h3",{className:"font-semibold text-lg mb-3",children:"Links & Support"}),(0,a.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,a.jsxs)("a",{href:"https://github.com/o-stahl/deepstudio",target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:underline",children:[(0,a.jsx)(er.A,{className:"h-4 w-4"}),"GitHub repo",(0,a.jsx)(eo.A,{className:"h-3 w-3"})]}),(0,a.jsxs)("a",{href:"https://huggingface.co/spaces/o-stahl/deepstudio",target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:underline",children:[(0,a.jsxs)("svg",{fill:"currentColor",fillRule:"evenodd",height:"1em",style:{flex:"none",lineHeight:1},viewBox:"0 0 24 24",width:"1em",xmlns:"http://www.w3.org/2000/svg",className:"h-4 w-4",children:[(0,a.jsx)("title",{children:"HuggingFace"}),(0,a.jsx)("path",{d:"M16.781 3.277c2.997 1.704 4.844 4.851 4.844 8.258 0 .995-.155 1.955-.443 2.857a1.332 1.332 0 011.125.4 1.41 1.41 0 01.2 1.723c.204.165.352.385.428.632l.017.062c.06.222.12.69-.2 1.166.244.37.279.836.093 1.236-.255.57-.893 1.018-2.128 1.5l-.202.078-.131.048c-.478.173-.89.295-1.061.345l-.086.024c-.89.243-1.808.375-2.732.394-1.32 0-2.3-.36-2.923-1.067a9.852 9.852 0 01-3.18.018C9.778 21.647 8.802 22 7.494 22a11.249 11.249 0 01-2.541-.343l-.221-.06-.273-.08a16.574 16.574 0 01-1.175-.405c-1.237-.483-1.875-.93-2.13-1.501-.186-.4-.151-.867.093-1.236a1.42 1.42 0 01-.2-1.166c.069-.273.226-.516.447-.694a1.41 1.41 0 01.2-1.722c.233-.248.557-.391.917-.407l.078-.001a9.385 9.385 0 01-.44-2.85c0-3.407 1.847-6.554 4.844-8.258a9.822 9.822 0 019.687 0zM4.188 14.758c.125.687 2.357 2.35 2.14 2.707-.19.315-.796-.239-.948-.386l-.041-.04-.168-.147c-.561-.479-2.304-1.9-2.74-1.432-.43.46.119.859 1.055 1.42l.784.467.136.083c1.045.643 1.12.84.95 1.113-.188.295-3.07-2.1-3.34-1.083-.27 1.011 2.942 1.304 2.744 2.006-.2.7-2.265-1.324-2.685-.537-.425.79 2.913 1.718 2.94 1.725l.16.04.175.042c1.227.284 3.565.65 4.435-.604.673-.973.64-1.709-.248-2.61l-.057-.057c-.945-.928-1.495-2.288-1.495-2.288l-.017-.058-.025-.072c-.082-.22-.284-.639-.63-.584-.46.073-.798 1.21.12 1.933l.05.038c.977.721-.195 1.21-.573.534l-.058-.104-.143-.25c-.463-.799-1.282-2.111-1.739-2.397-.532-.332-.907-.148-.782.541zm14.842-.541c-.533.335-1.563 2.074-1.94 2.751a.613.613 0 01-.687.302.436.436 0 01-.176-.098.303.303 0 01-.049-.06l-.014-.028-.008-.02-.007-.019-.003-.013-.003-.017a.289.289 0 01-.004-.048c0-.12.071-.266.25-.427.026-.024.054-.047.084-.07l.047-.036c.022-.016.043-.032.063-.049.883-.71.573-1.81.131-1.917l-.031-.006-.056-.004a.368.368 0 00-.062.006l-.028.005-.042.014-.039.017-.028.015-.028.019-.036.027-.023.02c-.173.158-.273.428-.31.542l-.016.054s-.53 1.309-1.439 2.234l-.054.054c-.365.358-.596.69-.702 1.018-.143.437-.066.868.21 1.353.055.097.117.195.187.296.882 1.275 3.282.876 4.494.59l.286-.07.25-.074c.276-.084.736-.233 1.2-.42l.188-.077.065-.028.064-.028.124-.056.081-.038c.529-.252.964-.543.994-.827l.001-.036a.299.299 0 00-.037-.139c-.094-.176-.271-.212-.491-.168l-.045.01c-.044.01-.09.024-.136.04l-.097.035-.054.022c-.559.23-1.238.705-1.607.745h.006a.452.452 0 01-.05.003h-.024l-.024-.003-.023-.005c-.068-.016-.116-.06-.14-.142a.22.22 0 01-.005-.1c.062-.345.958-.595 1.713-.91l.066-.028c.528-.224.97-.483.985-.832v-.04a.47.47 0 00-.016-.098c-.048-.18-.175-.251-.36-.251-.785 0-2.55 1.36-2.92 1.36-.025 0-.048-.007-.058-.024a.6.6 0 01-.046-.088c-.1-.238.068-.462 1.06-1.066l.209-.126c.538-.32 1.01-.588 1.341-.831.29-.212.475-.406.503-.6l.003-.028c.008-.113-.038-.227-.147-.344a.266.266 0 00-.07-.054l-.034-.015-.013-.005a.403.403 0 00-.13-.02c-.162 0-.369.07-.595.18-.637.313-1.431.952-1.826 1.285l-.249.215-.033.033c-.08.078-.288.27-.493.386l-.071.037-.041.019a.535.535 0 01-.122.036h.005a.346.346 0 01-.031.003l.01-.001-.013.001c-.079.005-.145-.021-.19-.095a.113.113 0 01-.014-.065c.027-.465 2.034-1.991 2.152-2.642l.009-.048c.1-.65-.271-.817-.791-.493zM11.938 2.984c-4.798 0-8.688 3.829-8.688 8.55 0 .692.083 1.364.24 2.008l.008-.009c.252-.298.612-.46 1.017-.46.355.008.699.117.993.312.22.14.465.384.715.694.261-.372.69-.598 1.15-.605.852 0 1.367.728 1.562 1.383l.047.105.06.127c.192.396.595 1.139 1.143 1.68 1.06 1.04 1.324 2.115.8 3.266a8.865 8.865 0 002.024-.014c-.505-1.12-.26-2.17.74-3.186l.066-.066c.695-.684 1.157-1.69 1.252-1.912.195-.655.708-1.383 1.56-1.383.46.007.889.233 1.15.605.25-.31.495-.553.718-.694a1.87 1.87 0 01.99-.312c.357 0 .682.126.925.36.14-.61.215-1.245.215-1.898 0-4.722-3.89-8.55-8.687-8.55zm1.857 8.926l.439-.212c.553-.264.89-.383.89.152 0 1.093-.771 3.208-3.155 3.262h-.184c-2.325-.052-3.116-2.06-3.156-3.175l-.001-.087c0-1.107 1.452.586 3.25.586.716 0 1.379-.272 1.917-.526zm4.017-3.143c.45 0 .813.358.813.8 0 .441-.364.8-.813.8a.806.806 0 01-.812-.8c0-.442.364-.8.812-.8zm-11.624 0c.448 0 .812.358.812.8 0 .441-.364.8-.812.8a.806.806 0 01-.813-.8c0-.442.364-.8.813-.8zm7.79-.841c.32-.384.846-.54 1.33-.394.483.146.83.564.878 1.06.048.495-.212.97-.659 1.203-.322.168-.447-.477-.767-.585l.002-.003c-.287-.098-.772.362-.925.079a1.215 1.215 0 01.14-1.36zm-4.323 0c.322.384.377.92.14 1.36-.152.283-.64-.177-.925-.079l.003.003c-.108.036-.194.134-.273.24l-.118.165c-.11.15-.22.262-.377.18a1.226 1.226 0 01-.658-1.204c.048-.495.395-.913.878-1.059a1.262 1.262 0 011.33.394z"})]}),"Live Demo (HuggingFace)",(0,a.jsx)(eo.A,{className:"h-3 w-3"})]}),(0,a.jsx)("a",{href:"https://www.buymeacoffee.com/otst",target:"_blank",rel:"noopener noreferrer",children:(0,a.jsx)("img",{src:"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png",alt:"Buy Me A Coffee",style:{height:"30px",width:"109px"}})})]})]})]}),(0,a.jsxs)("div",{className:"flex justify-between items-center pt-4 border-t",children:[(0,a.jsxs)(es.E,{variant:"secondary",className:"text-xs",children:["v",ei.env.NEXT_PUBLIC_APP_VERSION||q.rE]}),(0,a.jsx)(l.$,{onClick:()=>n(!1),children:"Close"})]})]})})}var ec=n(4616),ed=n(9869),em=n(381),eu=n(1284),ep=n(5021),eh=n(7924),eg=n(1492),ev=n(4541),ef=n(5968),ex=n(9945),eb=n(2714);let ey={name:"Example Studios",description:"Creative agency portfolio showcasing modern web development capabilities",directories:["/styles","/scripts","/portfolio","/assets","/assets/images","/templates"],files:[{path:"/index.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Example Studios - Creative Agency</title>\n    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">\n    <link rel="stylesheet" href="/styles/main.css">\n</head>\n<body>\n    {{> navigation}}\n\n    <main>\n        <section class="hero">\n            <div class="hero-content">\n                <h1>Crafting Digital Experiences</h1>\n                <p class="hero-subtitle">We create stunning websites and digital solutions that captivate audiences and drive results</p>\n                <div class="hero-buttons">\n                    <a href="#services" class="btn btn-primary">Our Services</a>\n                    <a href="#work" class="btn btn-secondary">View Work</a>\n                </div>\n            </div>\n        </section>\n        \n        <div class="container" id="services">\n            <div class="section-header">\n                <h2>What We Do</h2>\n                <p class="section-subtitle">From concept to launch, we deliver exceptional digital experiences</p>\n            </div>\n        \n            <div class="card-grid">\n                <div class="card">\n                    <div class="service-icon">Design</div>\n                    <h3>Web Design</h3>\n                    <p>Beautiful, user-centered designs that make lasting impressions</p>\n                    <a href="/portfolio.html" class="btn">See Our Work</a>\n                </div>\n                \n                <div class="card">\n                    <div class="service-icon">Code</div>\n                    <h3>Development</h3>\n                    <p>Fast, responsive websites built with modern technologies</p>\n                    <a href="/portfolio.html" class="btn">View Projects</a>\n                </div>\n                \n                <div class="card">\n                    <div class="service-icon">Mobile</div>\n                    <h3>Mobile Apps</h3>\n                    <p>Native and web applications that users love to use</p>\n                    <a href="/contact.html" class="btn">Get Started</a>\n                </div>\n            </div>\n        </div>\n\n        <section class="featured-work" id="work">\n            <h2>Recent Work</h2>\n            <div class="work-grid">\n                <div class="work-item">\n                    <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="work-image">\n                    <div class="work-info">\n                        <h3>Brand Identity</h3>\n                        <p>Complete visual identity for tech startup</p>\n                    </div>\n                </div>\n                <div class="work-item">\n                    <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="work-image">\n                    <div class="work-info">\n                        <h3>Portfolio Website</h3>\n                        <p>Clean and modern portfolio showcase</p>\n                    </div>\n                </div>\n                <div class="work-item">\n                    <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="work-image">\n                    <div class="work-info">\n                        <h3>Mobile Application</h3>\n                        <p>Social platform connecting local communities</p>\n                    </div>\n                </div>\n            </div>\n            \n            <div class="featured-work-cta">\n                <a href="/portfolio.html" class="btn btn-primary">View Full Portfolio</a>\n            </div>\n        </section>\n        \n        <section class="cta-section">\n            <div class="cta-content">\n                <h2>Ready to Build Something Amazing?</h2>\n                <p>Let\'s turn your ideas into reality. We\'d love to hear about your project.</p>\n                <a href="/contact.html" class="btn btn-primary">Start Your Project</a>\n            </div>\n        </section>\n        </div>\n    </main>\n\n    {{> footer}}\n\n    <script src="/scripts/main.js"><\/script>\n</body>\n</html>'},{path:"/portfolio.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Portfolio - Example Studios</title>\n    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">\n    <link rel="stylesheet" href="/styles/main.css">\n    <link rel="stylesheet" href="/styles/portfolio.css">\n</head>\n<body>\n    <nav class="navbar">\n        <a href="/" class="nav-brand">\n            <img src="/assets/images/logo.svg" alt="Example Studios" class="nav-logo">\n            <span>Example Studios</span>\n        </a>\n        \n        <button class="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false">\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n        </button>\n        \n        <ul class="nav-menu">\n            <li><a href="/" class="nav-link">Home</a></li>\n            <li><a href="/portfolio.html" class="nav-link active">Portfolio</a></li>\n            <li><a href="/about.html" class="nav-link">About</a></li>\n            <li><a href="/contact.html" class="nav-link">Contact</a></li>\n        </ul>\n    </nav>\n\n    <main>\n        <section class="hero sub-page">\n            <div class="hero-content">\n                <h1>Our Portfolio</h1>\n                <p class="hero-subtitle">Explore our recent projects and see how we bring ideas to life</p>\n            </div>\n        </section>\n        \n        <div class="container">\n            <section class="content-section">\n                <div class="section-header">\n                    <h2>Our Work</h2>\n                    <p class="section-subtitle">Filter by category to explore our diverse portfolio of projects</p>\n                </div>\n                \n                <div class="portfolio-filters">\n                    <button class="filter-btn active" data-filter="all">All Projects</button>\n                    <button class="filter-btn" data-filter="web">Web Design</button>\n                    <button class="filter-btn" data-filter="mobile">Mobile Apps</button>\n                    <button class="filter-btn" data-filter="branding">Branding</button>\n                </div>\n                \n                <div class="portfolio-grid">\n            <div class="portfolio-item" data-category="web">\n                <a href="/portfolio/techflow-dashboard.html">\n                    <img src="https://picsum.photos/400/300?random=10" alt="TechFlow Dashboard" class="portfolio-image">\n                    <div class="portfolio-overlay">\n                        <h3>TechFlow Dashboard</h3>\n                        <p>Modern analytics platform with real-time data visualization</p>\n                        <div class="portfolio-tags">\n                            <span class="tag">React</span>\n                            <span class="tag">D3.js</span>\n                            <span class="tag">Node.js</span>\n                        </div>\n                    </div>\n                </a>\n            </div>\n            \n            <div class="portfolio-item" data-category="mobile">\n                <img src="https://picsum.photos/400/300?random=11" alt="Fitness Tracker App" class="portfolio-image">\n                <div class="portfolio-overlay">\n                    <h3>Fitness Tracker App</h3>\n                    <p>Cross-platform mobile app for health and wellness tracking</p>\n                    <div class="portfolio-tags">\n                        <span class="tag">React Native</span>\n                        <span class="tag">Firebase</span>\n                        <span class="tag">Redux</span>\n                    </div>\n                </div>\n            </div>\n            \n            <div class="portfolio-item" data-category="branding">\n                <img src="https://picsum.photos/400/300?random=12" alt="Green Earth Campaign" class="portfolio-image">\n                <div class="portfolio-overlay">\n                    <h3>Green Earth Campaign</h3>\n                    <p>Complete brand identity for environmental awareness initiative</p>\n                    <div class="portfolio-tags">\n                        <span class="tag">Brand Design</span>\n                        <span class="tag">Illustration</span>\n                        <span class="tag">Print</span>\n                    </div>\n                </div>\n            </div>\n            \n            <div class="portfolio-item" data-category="web">\n                <img src="https://picsum.photos/400/300?random=13" alt="Web Application" class="portfolio-image">\n                <div class="portfolio-overlay">\n                    <h3>Web Application</h3>\n                    <p>Interactive web application with modern features</p>\n                    <div class="portfolio-tags">\n                        <span class="tag">React</span>\n                        <span class="tag">Node.js</span>\n                        <span class="tag">PostgreSQL</span>\n                    </div>\n                </div>\n            </div>\n            \n            <div class="portfolio-item" data-category="mobile">\n                <img src="https://picsum.photos/400/300?random=14" alt="Recipe Sharing App" class="portfolio-image">\n                <div class="portfolio-overlay">\n                    <h3>Recipe Sharing App</h3>\n                    <p>Social platform for food enthusiasts to share and discover recipes</p>\n                    <div class="portfolio-tags">\n                        <span class="tag">Flutter</span>\n                        <span class="tag">AWS</span>\n                        <span class="tag">ML Kit</span>\n                    </div>\n                </div>\n            </div>\n            \n            <div class="portfolio-item" data-category="branding">\n                <img src="https://picsum.photos/400/300?random=15" alt="StartupLab Identity" class="portfolio-image">\n                <div class="portfolio-overlay">\n                    <h3>StartupLab Identity</h3>\n                    <p>Modern brand identity for tech incubator and coworking space</p>\n                    <div class="portfolio-tags">\n                        <span class="tag">Logo Design</span>\n                        <span class="tag">Web Design</span>\n                        <span class="tag">Marketing</span>\n                    </div>\n                </div>\n            </div>\n                </div>\n            </section>\n        </div>\n        \n        <section class="cta-section">\n            <div class="cta-content">\n                <h2>Ready to Build Something Amazing?</h2>\n                <p>Let\'s turn your ideas into reality. We\'d love to hear about your project.</p>\n                <a href="/contact.html" class="btn btn-primary">Start Your Project</a>\n            </div>\n        </section>\n    </main>\n\n    {{> footer}}\n\n    <script src="/scripts/main.js"><\/script>\n    <script src="/scripts/portfolio.js"><\/script>\n</body>\n</html>'},{path:"/about.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>About - Example Studios</title>\n    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">\n    <link rel="stylesheet" href="/styles/main.css">\n</head>\n<body>\n    <nav class="navbar">\n        <a href="/" class="nav-brand">\n            <img src="/assets/images/logo.svg" alt="Example Studios" class="nav-logo">\n            <span>Example Studios</span>\n        </a>\n        \n        <button class="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false">\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n        </button>\n        \n        <ul class="nav-menu">\n            <li><a href="/" class="nav-link">Home</a></li>\n            <li><a href="/portfolio.html" class="nav-link">Portfolio</a></li>\n            <li><a href="/about.html" class="nav-link active">About</a></li>\n            <li><a href="/contact.html" class="nav-link">Contact</a></li>\n        </ul>\n    </nav>\n\n    <main>\n        <section class="hero sub-page">\n            <div class="hero-content">\n                <h1>About Example Studios</h1>\n                <p class="hero-subtitle">We\'re a passionate team of designers and developers crafting exceptional digital experiences that make a difference.</p>\n            </div>\n        </section>\n        \n        <div class="container">\n\n        <section class="content-section">\n            <div class="section-header">\n                <h2>Our Story</h2>\n                <p class="section-subtitle">From humble beginnings to digital excellence</p>\n            </div>\n            <div class="card-grid">\n                <div class="card">\n                    <div class="service-icon">\uD83D\uDE80</div>\n                    <h3>Founded in 2020</h3>\n                    <p>Example Studios emerged from a simple belief: great design should be accessible to everyone. What started as a small team of passionate creators has grown into a full-service digital agency.</p>\n                </div>\n                \n                <div class="card">\n                    <div class="service-icon">\uD83D\uDCA1</div>\n                    <h3>Our Philosophy</h3>\n                    <p>We believe in the power of collaboration, the importance of user-centered design, and the magic that happens when creativity meets technology.</p>\n                </div>\n            </div>\n        </section>\n\n        <section class="content-section">\n            <div class="section-header">\n                <h2>Our Mission</h2>\n                <p class="section-subtitle">Crafting digital experiences that make a difference</p>\n            </div>\n            <div class="card">\n                <div class="service-icon">\uD83C\uDFAF</div>\n                <h3>Empowering Through Design</h3>\n                <p>To empower businesses and individuals with stunning, functional digital solutions that not only look great but drive real results. We\'re not just building websites and applications; we\'re crafting digital experiences that connect, engage, and inspire.</p>\n                <a href="/contact.html" class="btn">Start Your Project</a>\n            </div>\n        </section>\n\n        <section class="content-section">\n            <div class="section-header">\n                <h2>Our Team</h2>\n            </div>\n            <div class="team-grid">\n                <div class="team-member">\n                    <img src="https://picsum.photos/200/200?random=1" alt="Sarah Johnson">\n                    <h3>Sarah Johnson</h3>\n                    <div class="role">Creative Director</div>\n                    <p>With over 8 years in design, Sarah leads our creative vision and ensures every project tells a compelling story.</p>\n                </div>\n                \n                <div class="team-member">\n                    <img src="https://picsum.photos/200/200?random=2" alt="Mike Chen">\n                    <h3>Mike Chen</h3>\n                    <div class="role">Lead Developer</div>\n                    <p>Mike transforms designs into responsive, performant web experiences using the latest technologies and best practices.</p>\n                </div>\n                \n                <div class="team-member">\n                    <img src="https://picsum.photos/200/200?random=3" alt="Emily Rodriguez">\n                    <h3>Emily Rodriguez</h3>\n                    <div class="role">UX Designer</div>\n                    <p>Emily ensures every user interaction is intuitive and delightful, backed by research and user testing.</p>\n                </div>\n            </div>\n        </section>\n\n        <section class="content-section">\n            <div class="section-header">\n                <h2>Our Values</h2>\n            </div>\n            <div class="card-grid">\n                <div class="card">\n                    <div class="service-icon">Creativity</div>\n                    <h3>Creativity First</h3>\n                    <p>We believe every project deserves a unique, creative approach that stands out in the digital landscape.</p>\n                </div>\n                \n                <div class="card">\n                    <div class="service-icon">Performance</div>\n                    <h3>Performance Driven</h3>\n                    <p>Beautiful designs mean nothing without flawless performance. We optimize for speed, accessibility, and user experience.</p>\n                </div>\n                \n                <div class="card">\n                    <div class="service-icon">Partnership</div>\n                    <h3>Collaboration</h3>\n                    <p>The best results come from working closely with our clients as partners, not just service providers.</p>\n                </div>\n                \n                <div class="card">\n                    <div class="service-icon">Innovation</div>\n                    <h3>Innovation</h3>\n                    <p>We stay ahead of industry trends and constantly explore new technologies to deliver cutting-edge solutions.</p>\n                </div>\n            </div>\n        </section>\n        \n        <section class="cta-section">\n            <div class="cta-content">\n                <h2>Ready to Build Something Amazing?</h2>\n                <p>Let\'s turn your ideas into reality. We\'d love to hear about your project.</p>\n                <a href="/contact.html" class="btn btn-primary">Start Your Project</a>\n            </div>\n        </section>\n        </div>\n    </main>\n\n    {{> footer}}\n\n    <script src="/scripts/main.js"><\/script>\n</body>\n</html>'},{path:"/styles/main.css",content:"/* Main Stylesheet - Shared across all pages */\n\n:root {\n  --primary: #ea580c;\n  --primary-dark: #c2410c;\n  --secondary: #0891b2;\n  --secondary-dark: #0e7490;\n  --accent: #f59e0b;\n  --neutral: #64748b;\n  --bg: linear-gradient(180deg, #ffffff 0%, #fdfdfd 100%);\n  --bg-secondary: linear-gradient(180deg, #f4f4f4 0%, #f8fafc 100%);\n  --text: #1e293b;\n  --text-light: #64748b;\n  --border: #e2e8f0;\n  --radius: 12px;\n  --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  \n  /* Layout variables */\n  --navbar-height: 65px;\n  --navbar-bg: rgba(255, 255, 255, 0.95);\n  --hero-gradient-blue: rgba(26, 54, 93, 0.9);\n  --hero-gradient-orange: rgba(255, 123, 0, 0.8);\n  \n  /* Responsive Typography Scale (Mobile-first) */\n  --text-xs: 0.75rem;\n  --text-sm: 0.875rem;\n  --text-base: 1rem;\n  --text-lg: 1.125rem;\n  --text-xl: 1.25rem;\n  --text-2xl: 1.5rem;\n  --text-3xl: 1.875rem;\n  --text-4xl: 2.25rem;\n  --text-5xl: 3rem;\n  --text-6xl: 3.75rem;\n  \n  /* Semantic Typography Variables */\n  --heading-h1: var(--text-4xl);\n  --heading-h2: var(--text-3xl);\n  --heading-h3: var(--text-xl);\n  --heading-h4: var(--text-lg);\n  --heading-h5: var(--text-base);\n  --text-subtitle: var(--text-lg);\n  --text-body: var(--text-base);\n  --text-small: var(--text-sm);\n  \n  /* Responsive Spacing Scale */\n  --space-1: 0.25rem;\n  --space-2: 0.5rem;\n  --space-3: 0.75rem;\n  --space-4: 1rem;\n  --space-5: 1.25rem;\n  --space-6: 1.5rem;\n  --space-8: 2rem;\n  --space-10: 2.5rem;\n  --space-12: 3rem;\n  --space-16: 4rem;\n  --space-20: 5rem;\n  \n  /* Container and Grid Variables */\n  --container-padding: var(--space-4);\n  --grid-gap: var(--space-6);\n  --card-padding: var(--space-6);\n  --section-spacing: var(--space-12);\n}\n\n/* Tablet Breakpoint - 768px+ */\n@media (min-width: 768px) {\n  :root {\n    /* Larger typography for tablet */\n    --text-3xl: 2.25rem;\n    --text-4xl: 2.75rem;\n    --text-5xl: 3.5rem;\n    --text-6xl: 4.5rem;\n    \n    /* Updated semantic typography for tablet */\n    --heading-h1: var(--text-4xl);\n    --heading-h2: var(--text-3xl);\n    --heading-h3: var(--text-2xl);\n    --heading-h4: var(--text-xl);\n    --text-subtitle: var(--text-xl);\n    \n    /* Increased spacing for tablet */\n    --container-padding: var(--space-6);\n    --grid-gap: var(--space-8);\n    --card-padding: var(--space-8);\n    --section-spacing: var(--space-16);\n  }\n}\n\n/* Desktop Breakpoint - 1024px+ */\n@media (min-width: 1024px) {\n  :root {\n    /* Larger typography for desktop */\n    --text-4xl: 2.5rem;\n    --text-5xl: 3rem;\n    --text-6xl: 3.5rem;\n    \n    /* Updated semantic typography for desktop */\n    --heading-h1: var(--text-4xl);\n    --heading-h2: var(--text-3xl);\n    --heading-h3: var(--text-2xl);\n    --heading-h4: var(--text-xl);\n    \n    /* Increased spacing for desktop */\n    --container-padding: var(--space-8);\n    --grid-gap: var(--space-10);\n    --card-padding: var(--space-10);\n    --section-spacing: var(--space-20);\n  }\n}\n\n/* Large Desktop Breakpoint - 1200px+ */\n@media (min-width: 1200px) {\n  :root {\n    /* Maximum typography scaling */\n    --text-6xl: 4rem;\n    \n    /* Maximum spacing */\n    --section-spacing: var(--space-24, 6rem);\n  }\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--bg);\n  color: var(--text);\n  line-height: 1.6;\n}\n\n/* Navigation */\n.navbar {\n  padding: var(--space-4) var(--container-padding);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  transition: transform 0.3s ease;\n  backdrop-filter: opacity(0);\n  background: var(--navbar-bg);\n  height: var(--navbar-height);\n}\n\n.navbar.hidden {\n  transform: translateY(-100%);\n}\n\nbody {\n  padding-top: var(--navbar-height);\n}\n\n.nav-brand {\n  font-size: var(--text-xl);\n  font-weight: 600;\n  color: var(--text);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n.nav-logo {\n  width: 28px;\n  height: 28px;\n}\n\n.nav-menu {\n  display: flex;\n  list-style: none;\n  gap: var(--space-6);\n}\n\n.nav-link {\n  color: var(--text-light);\n  text-decoration: none;\n  transition: all 0.2s ease;\n  border-radius: var(--space-1);\n  padding: var(--space-2);\n}\n\n.nav-link:hover,\n.nav-link.active {\n  color: var(--primary);\n}\n\n.nav-link:focus {\n  outline: none;\n}\n\n/* Hamburger Menu Button */\n.nav-toggle {\n  display: none;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 24px;\n  height: 18px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  z-index: 1001;\n  border-radius: var(--space-1);\n}\n\n.nav-toggle:focus {\n  outline: none;\n}\n\n.hamburger-line {\n  width: 100%;\n  height: 2px;\n  background: var(--text);\n  transition: all 0.3s ease;\n  transform-origin: center;\n}\n\n.nav-toggle.active .hamburger-line:nth-child(1) {\n  transform: rotate(45deg) translate(6px, 6px);\n}\n\n.nav-toggle.active .hamburger-line:nth-child(2) {\n  opacity: 0;\n}\n\n.nav-toggle.active .hamburger-line:nth-child(3) {\n  transform: rotate(-45deg) translate(6px, -6px);\n}\n\n/* Tablet Responsive - Enhanced desktop experience */\n@media (min-width: 768px) and (max-width: 1023px) {\n  .nav-menu {\n    gap: var(--space-4);\n  }\n  \n  .nav-link {\n    font-size: var(--text-sm);\n    padding: var(--space-2) var(--space-3);\n  }\n}\n\n/* Mobile Menu Styles - Hamburger menu only on mobile */\n@media (max-width: 767px) {\n  .nav-toggle {\n    display: flex;\n  }\n  \n  .navbar.menu-open {\n    background: rgba(255, 255, 255, 1);\n    backdrop-filter: opacity(0);\n  }\n  \n  .nav-menu {\n    position: fixed;\n    top: var(--navbar-height);\n    left: 0;\n    right: 0;\n    background: #fff;\n    backdrop-filter: opacity(0);\n    flex-direction: column;\n    padding: var(--space-6) var(--space-4) var(--space-8);\n    gap: 0;\n    transform: translateY(-100%);\n    opacity: 0;\n    visibility: hidden;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  \n  .nav-menu.active {\n    transform: translateY(0);\n    opacity: 1;\n    visibility: visible;\n  }\n  \n  .nav-link {\n    font-size: var(--text-lg);\n    font-weight: 500;\n    padding: var(--space-2) var(--space-6);\n    border-radius: var(--space-2);\n    background: transparent;\n    border: none;\n    transition: all 0.2s ease;\n    position: relative;\n    width: fit-content;\n    display: block;\n    margin: 0 auto;\n  }\n  \n  .nav-link:hover {\n    background: var(--bg-secondary);\n    color: var(--primary);\n    transform: translateY(-2px);\n  }\n  \n  .nav-link.active {\n    background: var(--primary);\n    color: white;\n    font-weight: 600;\n  }\n  \n  .nav-link.active::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 4px;\n    height: 20px;\n    background: white;\n    border-radius: 2px;\n  }\n}\n\n/* Container */\n.container {\n  max-width: 1000px;\n  margin: 0 auto;\n  padding: var(--card-padding);\n}\n\n/* Universal Heading Styles */\nh1 {\n  font-size: var(--heading-h1);\n  margin-bottom: var(--space-4);\n  font-weight: 700;\n  line-height: 1.2;\n}\n\nh2 {\n  font-size: var(--heading-h2);\n  margin-bottom: var(--space-4);\n  font-weight: 600;\n  line-height: 1.3;\n}\n\nh3 {\n  font-size: var(--heading-h3);\n  margin-bottom: var(--space-3);\n  font-weight: 600;\n  line-height: 1.4;\n}\n\nh4 {\n  font-size: var(--heading-h4);\n  margin-bottom: var(--space-2);\n  font-weight: 600;\n  line-height: 1.4;\n}\n\nh5 {\n  font-size: var(--heading-h5);\n  margin-bottom: var(--space-2);\n  font-weight: 600;\n  line-height: 1.5;\n}\n\np {\n  color: var(--text-light);\n  font-size: var(--text-body);\n  margin-bottom: var(--space-8);\n  line-height: 1.6;\n}\n\n/* Cards */\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: var(--space-6);\n  margin-bottom: var(--section-spacing);\n}\n\n.card {\n  background: var(--bg-secondary);\n  padding: var(--card-padding);\n  border-radius: var(--radius);\n  text-align: center;\n}\n\n.card h2 {\n  font-size: var(--heading-h2);\n  margin-bottom: var(--space-4);\n}\n\n.card p {\n  font-size: var(--text-body);\n  margin-bottom: var(--space-6);\n}\n\n/* Buttons */\n.btn {\n  display: inline-block;\n  background: var(--primary);\n  color: white;\n  padding: var(--space-3) var(--space-6);\n  border: none;\n  border-radius: var(--radius);\n  cursor: pointer;\n  text-decoration: none;\n  font-size: var(--text-body);\n  font-weight: 500;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.btn:hover {\n  background: var(--primary-dark);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.btn:active {\n  transform: translateY(0);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.btn:focus {\n  outline: none;\n}\n\n.btn-small {\n  padding: var(--space-2) var(--space-4);\n  font-size: var(--text-sm);\n}\n\n/* Hero Section */\n.hero {\n  height: calc(100vh - var(--navbar-height) - var(--container-padding));\n  background: linear-gradient(135deg, var(--hero-gradient-blue), var(--hero-gradient-orange)),\n              url('/assets/images/example-background.jpg') center/cover;\n  background-size: contain;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: var(--space-8) var(--container-padding);\n  position: relative;\n  overflow: hidden;\n  margin: 0rem var(--container-padding) var(--section-spacing);\n  border-radius: var(--radius);\n}\n\n.hero.sub-page {\n  height: calc(50vh + var(--navbar-height));\n  min-height: calc(300px + var(--navbar-height));\n}\n\n.hero-content {\n  max-width: 800px;\n  z-index: 1;\n}\n\n.hero h1 {\n  font-size: var(--text-4xl);\n  margin-bottom: var(--space-4);\n  font-weight: 700;\n  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.hero-subtitle {\n  font-size: var(--text-subtitle);\n  opacity: 0.95;\n  margin-bottom: var(--space-8);\n  color: white;\n}\n\n.hero-buttons {\n  display: flex;\n  gap: var(--space-4);\n  justify-content: center;\n  flex-wrap: wrap;\n}\n\n.btn-primary {\n  background: var(--primary);\n  color: white;\n}\n\n.btn-primary:hover {\n  background: var(--primary-dark);\n  transform: translateY(-2px) scale(1.02);\n  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.25);\n}\n\n.btn-primary:focus {\n  outline: none;\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.2);\n  color: white;\n  backdrop-filter: opacity(0);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.3);\n  transform: translateY(-2px) scale(1.02);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\n}\n\n.btn-secondary:focus {\n  outline: none;\n}\n\n/* Features Section */\n.features-section {\n  padding: var(--section-spacing) 0;\n  background: var(--bg-secondary);\n  border-radius: var(--radius);\n  margin-top: var(--section-spacing);\n}\n\n.feature-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: var(--space-6);\n  margin-top: var(--space-8);\n}\n\n.feature {\n  text-align: center;\n  padding: var(--space-6);\n}\n\n.feature-icon {\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: var(--secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  display: block;\n  margin-bottom: var(--space-4);\n}\n\n.feature h3 {\n  color: var(--secondary-dark);\n  margin-bottom: 0.5rem;\n}\n\n.feature p {\n  color: var(--text-light);\n  font-size: var(--text-body);\n}\n\n/* Example Section */\n.example-section {\n  background: var(--bg-secondary);\n  padding: var(--card-padding);\n  border-radius: var(--radius);\n  text-align: center;\n}\n\n/* Aurora Studios Specific Styles */\n.section-subtitle {\n  font-size: var(--text-subtitle);\n  color: var(--text-light);\n  margin-bottom: var(--section-spacing);\n  text-align: center;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* What We Do section title */\n#services h2 {\n  text-align: center;\n}\n\n.service-icon {\n  font-size: var(--text-small);\n  font-weight: 600;\n  color: var(--primary);\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  margin-bottom: var(--space-6);\n  display: block;\n}\n\n/* Featured Work Section */\n.featured-work {\n  padding: var(--section-spacing) 0;\n  background: var(--bg-secondary);\n}\n\n.featured-work h2 {\n  font-size: var(--heading-h2);\n  text-align: center;\n  margin-bottom: var(--section-spacing);\n  color: var(--text);\n}\n\n.work-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: var(--space-6);\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 var(--space-8);\n}\n\n.work-item {\n  background: white;\n  border-radius: var(--radius);\n  overflow: hidden;\n  box-shadow: var(--shadow);\n  transition: transform 0.3s ease;\n}\n\n.work-item:hover {\n  transform: translateY(-5px);\n}\n\n.section-cta {\n  text-align: center;\n  margin-top: var(--space-8);\n  padding-top: var(--space-6);\n  border-top: 1px solid var(--border);\n}\n\n.featured-work-cta {\n  text-align: center;\n  margin-top: var(--space-8);\n}\n\n.work-image {\n  width: 100%;\n  height: 250px;\n  object-fit: cover;\n}\n\n.work-info {\n  padding: var(--space-6);\n}\n\n.work-info h3 {\n  color: var(--primary);\n  margin-bottom: var(--space-2);\n}\n\n.work-info p {\n  color: var(--text-light);\n  font-size: var(--text-body);\n}\n\n/* CTA Section */\n.cta-section {\n  background: linear-gradient(135deg, var(--secondary), var(--primary));\n  color: white;\n  padding: var(--section-spacing) var(--space-8);\n  text-align: center;\n  margin: var(--section-spacing) var(--space-4);\n  border-radius: var(--radius);\n}\n\n.cta-content h2 {\n  margin-bottom: var(--space-4);\n  font-size: var(--heading-h2);\n}\n\n.cta-content p {\n  font-size: var(--text-subtitle);\n  opacity: 0.9;\n  margin-bottom: var(--space-8);\n  color: white;\n}\n\n.cta-section .btn {\n  background: white;\n  color: var(--text);\n  font-weight: 600;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.cta-section .btn:hover {\n  background: var(--bg-secondary);\n  transform: translateY(-2px) scale(1.02);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\n}\n\n.cta-section .btn:focus {\n  outline: none;\n}\n\n/* Page Header - Shared across sub-pages */\n.page-header {\n  text-align: center;\n  margin-bottom: var(--section-spacing);\n}\n\n.page-header h1 {\n  font-size: var(--heading-h1);\n  margin-bottom: var(--space-4);\n  color: var(--text);\n}\n\n.page-subtitle {\n  font-size: var(--text-subtitle);\n  color: var(--text-light);\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n/* Section Header Component */\n.section-header {\n  text-align: center;\n  margin-bottom: var(--section-spacing);\n}\n\n.section-header h2 {\n  font-size: var(--heading-h2);\n  color: var(--text);\n  margin-bottom: var(--space-3);\n  position: relative;\n}\n\n.section-header h2::after {\n  content: '';\n  position: absolute;\n  bottom: -0.75rem;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 2rem;\n  height: 3px;\n  background: var(--primary);\n  border-radius: 2px;\n}\n\n.section-header .section-subtitle {\n  font-size: var(--text-subtitle);\n  color: var(--text-light);\n  margin-top: var(--space-6);\n  margin-bottom: 0;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  line-height: 1.6;\n}\n\n/* Content Sections - Shared layout styles */\n.content-section {\n  margin-bottom: var(--section-spacing);\n}\n\n.content-section h2 {\n  font-size: var(--heading-h2);\n  color: var(--text);\n  margin-bottom: var(--space-4);\n  position: relative;\n}\n\n.content-section p {\n  font-size: var(--text-subtitle);\n  line-height: 1.8;\n  color: var(--text-light);\n  margin-bottom: var(--space-6);\n  text-align: center;\n}\n\n/* Team Grid - Shared component */\n.team-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: var(--space-6);\n  margin-top: var(--space-8);\n}\n\n.team-member {\n  text-align: center;\n  padding: var(--card-padding);\n  background: var(--bg-secondary);\n  border-radius: var(--radius);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.team-member:hover {\n  transform: translateY(-5px);\n  box-shadow: var(--shadow);\n}\n\n.team-member img {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  object-fit: cover;\n  margin-bottom: var(--space-4);\n  border: 3px solid var(--primary);\n}\n\n.team-member h3 {\n  font-size: var(--heading-h3);\n  color: var(--text);\n  margin-bottom: var(--space-2);\n}\n\n.team-member .role {\n  color: var(--primary);\n  font-weight: 600;\n  margin-bottom: var(--space-4);\n}\n\n.team-member p {\n  font-size: var(--text-small);\n  color: var(--text-light);\n  line-height: 1.6;\n}\n\n/* Contact Page Components */\n.contact-card .contact-detail {\n  font-weight: 600;\n  color: var(--primary);\n  font-size: var(--text-base);\n  margin: var(--space-4) 0;\n  padding: var(--space-3);\n  background: var(--bg-secondary);\n  border-radius: var(--space-2);\n  text-align: center;\n}\n\n.contact-form-section {\n  max-width: 600px;\n  margin: 0 auto;\n  background: white;\n  padding: var(--card-padding);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n}\n\n.social-proof-container {\n  max-width: 800px;\n  margin: 0 auto;\n  text-align: center;\n}\n\n/* Tablet Responsive Styles */\n@media (min-width: 768px) and (max-width: 1023px) {\n  /* Hero adjustments for tablet */\n  .hero.sub-page {\n    height: calc(50vh + var(--navbar-height));\n    min-height: calc(350px + var(--navbar-height));\n  }\n  \n  /* Grid layout adjustments for tablet */\n  .card-grid,\n  .work-grid,\n  .team-grid,\n  .portfolio-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: var(--space-6);\n  }\n  \n}\n\n/* Mobile Responsive Styles */\n@media (max-width: 767px) {\n  :root {\n    /* Mobile-optimized typography */\n    --heading-h1: var(--text-3xl);\n    --heading-h2: var(--text-2xl);\n    --heading-h3: var(--text-lg);\n    --text-subtitle: var(--text-base);\n    \n    /* Tighter spacing for mobile */\n    --section-spacing: var(--space-10);\n    --card-padding: var(--space-4);\n  }\n  \n  /* Hero section mobile adjustments */\n  .hero {\n    margin: 0rem var(--space-4) var(--section-spacing);\n    padding: var(--space-6) var(--space-4);\n  }\n  \n  .hero h1 {\n    font-size: var(--text-4xl);\n  }\n  \n  .hero.sub-page {\n    height: calc(40vh + var(--navbar-height));\n    min-height: calc(250px + var(--navbar-height));\n  }\n  \n  /* Grid layout adjustments - single column for mobile */\n  .card-grid,\n  .work-grid,\n  .team-grid,\n  .portfolio-grid {\n    grid-template-columns: 1fr;\n    gap: var(--space-4);\n  }\n  \n  \n  /* Mobile button improvements */\n  .btn {\n    width: 100%;\n    max-width: 280px;\n    text-align: center;\n  }\n  \n  .hero-buttons {\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-3);\n  }\n  \n  /* Mobile typography improvements */\n  p {\n    margin-bottom: var(--space-6);\n  }\n  \n  /* Contact form mobile adjustments */\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: var(--space-4);\n    margin-bottom: var(--space-4);\n  }\n  \n  .social-proof-stats {\n    grid-template-columns: 1fr;\n    gap: var(--space-6);\n  }\n  \n  .social-proof-text {\n    margin-left: 0;\n    border-left: none;\n    border-top: 3px solid var(--primary);\n    padding-left: 0;\n    padding-top: var(--space-4);\n  }\n}\n\n.contact-info h2 {\n  font-size: var(--heading-h2);\n  color: var(--text);\n  margin-bottom: var(--space-4);\n}\n\n.contact-info p {\n  font-size: var(--text-subtitle);\n  line-height: 1.8;\n  color: var(--text-light);\n  margin-bottom: var(--space-8);\n}\n\n\n/* Contact Form - Refactored */\n.contact-form-container {\n  padding: var(--card-padding);\n}\n\n.contact-form-container .section-header {\n  text-align: left;\n  margin-bottom: var(--space-8);\n}\n\n.contact-form-container .section-header h2 {\n  font-size: var(--heading-h2);\n  color: var(--text);\n  margin-bottom: var(--space-3);\n}\n\n.contact-form-container .section-header p {\n  color: var(--text-light);\n  font-size: var(--text-base);\n  margin: 0;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-4);\n  margin-bottom: var(--space-6);\n}\n\n.form-group {\n  margin-bottom: var(--space-6);\n}\n\n.form-group label {\n  display: block;\n  font-weight: 600;\n  color: var(--text);\n  font-size: var(--text-body);\n  margin-bottom: var(--space-2);\n}\n\n.form-group input,\n.form-group select,\n.form-group textarea {\n  width: 100%;\n  padding: var(--space-4);\n  border: 2px solid var(--border);\n  border-radius: var(--radius);\n  font-size: var(--text-body);\n  transition: border-color 0.3s ease, box-shadow 0.3s ease;\n}\n\n.form-group input:focus,\n.form-group select:focus,\n.form-group textarea:focus {\n  outline: none;\n  border-color: var(--primary);\n  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);\n}\n\n.form-group textarea {\n  resize: vertical;\n  min-height: 120px;\n}\n\n.checkbox-group {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n}\n\n.checkbox-group input[type=\"checkbox\"] {\n  width: auto;\n  margin: 0;\n  transform: scale(1.2);\n}\n\n.checkbox-group label {\n  margin-bottom: 0;\n  font-weight: normal;\n  font-size: var(--text-small);\n  cursor: pointer;\n}\n\n.error-message {\n  color: #ef4444;\n  font-size: var(--text-sm);\n  margin-top: var(--space-1);\n  display: block;\n}\n\n.btn-full {\n  width: 100%;\n  padding: var(--space-4) var(--space-8);\n  font-size: var(--text-subtitle);\n  font-weight: 600;\n}\n\n.form-success {\n  display: none;\n  background: #10b981;\n  color: white;\n  padding: var(--space-6);\n  border-radius: var(--radius);\n  margin-top: var(--space-4);\n  text-align: center;\n  border: 1px solid #059669;\n}\n\n.form-success.show {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-3);\n}\n\n.form-success .success-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.form-success .success-icon svg {\n  width: 20px;\n  height: 20px;\n  stroke: white;\n  stroke-width: 3;\n}\n\n.form-success p {\n  margin: 0;\n  font-weight: 500;\n  font-size: var(--text-body);\n}\n\n/* Social Proof Section */\n.contact-social-proof {\n  background: var(--bg-secondary);\n  padding: var(--card-padding);\n  border-radius: var(--radius);\n  border: 2px solid var(--border);\n}\n\n.contact-social-proof h3 {\n  font-size: var(--heading-h3);\n  color: var(--text);\n  margin-bottom: var(--space-6);\n  text-align: center;\n}\n\n.social-proof-stats {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-4);\n  margin-bottom: var(--space-6);\n}\n\n.stat {\n  text-align: center;\n  padding: var(--space-3);\n}\n\n.stat-number {\n  font-size: var(--text-2xl);\n  font-weight: 700;\n  color: var(--primary);\n  margin-bottom: var(--space-1);\n}\n\n.stat-label {\n  font-size: var(--text-sm);\n  color: var(--text-light);\n  font-weight: 500;\n}\n\n.social-proof-text {\n  font-style: italic;\n  color: var(--text);\n  line-height: 1.6;\n  margin-bottom: var(--space-4);\n  text-align: center;\n  border-left: 3px solid var(--primary);\n  padding-left: var(--space-4);\n  margin-left: var(--space-4);\n}\n\n.social-proof-attribution {\n  text-align: center;\n  color: var(--text-light);\n  font-size: var(--text-sm);\n}\n\n.testimonial {\n  margin-top: var(--space-8);\n  padding: var(--space-6);\n  background: var(--bg-secondary);\n  border-radius: var(--radius);\n  border-left: 4px solid var(--primary);\n}\n\n.testimonial-text {\n  font-size: var(--text-lg);\n  font-style: italic;\n  color: var(--text);\n  line-height: 1.6;\n  margin-bottom: var(--space-4);\n}\n\n.testimonial-attribution {\n  color: var(--text-light);\n  font-size: var(--text-sm);\n}\n\n/* Loading state for form submission */\n.contact-form.loading .btn-primary {\n  background: var(--neutral);\n  cursor: not-allowed;\n  position: relative;\n}\n\n.contact-form.loading .btn-primary:after {\n  content: '';\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  margin: auto;\n  border: 2px solid white;\n  border-top: 2px solid transparent;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* Form validation styles */\n.form-group.error input,\n.form-group.error select,\n.form-group.error textarea {\n  border-color: #ef4444;\n  background-color: #fef2f2;\n}\n\n.form-group.success input,\n.form-group.success select,\n.form-group.success textarea {\n  border-color: #10b981;\n  background-color: #f0fdf4;\n}\n\n/* Footer - Modern Light Design */\n.site-footer {\n  background: var(--bg-secondary);\n  border-top: 1px solid var(--border);\n  padding: var(--section-spacing) 0 0;\n  margin-top: var(--section-spacing);\n}\n\n.footer-content {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 var(--space-8) var(--section-spacing);\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: var(--space-10);\n  align-items: start;\n}\n\n/* Footer Brand Section */\n.footer-brand {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n\n.footer-logo {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-size: var(--text-xl);\n  font-weight: 600;\n  color: var(--text);\n}\n\n.footer-logo img {\n  width: 40px;\n  height: 40px;\n}\n\n.footer-tagline {\n  color: var(--text-light);\n  font-size: var(--text-body);\n  margin: 0;\n  line-height: 1.5;\n}\n\n.footer-social {\n  display: flex;\n  gap: var(--space-3);\n  margin-top: var(--space-2);\n}\n\n.footer-social a {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: white;\n  color: var(--text);\n  text-decoration: none;\n  font-size: var(--text-base);\n  transition: all 0.2s ease;\n  border: 1px solid var(--border);\n}\n\n.footer-social a:hover {\n  background: var(--primary);\n  color: white;\n  border-color: var(--primary);\n  transform: translateY(-2px);\n}\n\n/* Footer Links Section */\n.footer-links-section {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-8);\n}\n\n.footer-column h4 {\n  font-size: var(--text-base);\n  font-weight: 600;\n  color: var(--text);\n  margin-bottom: var(--space-4);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.footer-links {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.footer-links li {\n  margin-bottom: var(--space-3);\n}\n\n.footer-links a {\n  color: var(--text-light);\n  text-decoration: none;\n  font-size: var(--text-body);\n  transition: color 0.2s ease;\n  position: relative;\n}\n\n.footer-links a:hover {\n  color: var(--primary);\n  transform: translateX(2px);\n  display: inline-block;\n}\n\n/* Footer Bottom Bar */\n.footer-bottom {\n  border-top: 1px solid var(--border);\n  padding: var(--space-6) var(--space-8);\n  max-width: 1200px;\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n.footer-hf-link {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--text-light);\n  text-decoration: none;\n  font-size: var(--text-sm);\n  font-weight: 500;\n  transition: all 0.2s ease;\n  padding: var(--space-1) var(--space-2);\n  border-radius: var(--space-1);\n}\n\n.footer-hf-link:hover {\n  color: var(--primary);\n  background: rgba(234, 88, 12, 0.1);\n  transform: translateY(-1px);\n}\n\n.footer-hf-link svg {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.footer-bottom-links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n.footer-bottom-links a {\n  color: var(--text-light);\n  text-decoration: none;\n  font-size: var(--text-sm);\n  transition: color 0.2s ease;\n}\n\n.footer-bottom-links a:hover {\n  color: var(--primary);\n}\n\n.footer-bottom-links .separator {\n  color: var(--text-light);\n  font-size: var(--text-sm);\n}\n\n/* Responsive Footer Styles */\n@media (max-width: 767px) {\n  .footer-content {\n    grid-template-columns: 1fr;\n    gap: var(--space-8);\n    padding: 0 var(--space-4) var(--space-8);\n  }\n  \n  .footer-brand {\n    text-align: center;\n    align-items: center;\n  }\n  \n  .footer-links-section {\n    grid-template-columns: 1fr 1fr;\n    gap: var(--space-6);\n    text-align: center;\n  }\n  \n  .footer-column h4 {\n    text-align: center;\n  }\n  \n  .footer-links {\n    text-align: center;\n  }\n  \n  .footer-links a {\n    display: inline-block;\n  }\n  \n  .footer-bottom {\n    flex-direction: column;\n    text-align: center;\n    padding: var(--space-4);\n  }\n  \n  .footer-bottom-links {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n}\n\n"},{path:"/styles/portfolio.css",content:"/* Portfolio Page Styles */\n\n/* Portfolio Filters */\n.portfolio-filters {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-4);\n  margin-bottom: var(--section-spacing);\n  flex-wrap: wrap;\n}\n\n.filter-btn {\n  padding: var(--space-3) var(--space-6);\n  border: 2px solid var(--border);\n  background: transparent;\n  border-radius: 50px;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  font-weight: 500;\n  font-size: var(--text-body);\n  color: var(--text-light);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.filter-btn:hover,\n.filter-btn.active {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: white;\n  transform: translateY(-1px) scale(1.01);\n  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);\n}\n\n.filter-btn:focus {\n  outline: none;\n}\n\n.filter-btn:active {\n  transform: translateY(0) scale(0.99);\n}\n\n/* Portfolio Grid */\n.portfolio-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: var(--space-6);\n  margin-bottom: var(--section-spacing);\n}\n\n.portfolio-item {\n  position: relative;\n  border-radius: var(--radius);\n  overflow: hidden;\n  box-shadow: var(--shadow);\n  transition: transform 0.3s ease;\n  cursor: pointer;\n}\n\n.portfolio-item:hover {\n  transform: translateY(-10px);\n}\n\n.portfolio-item.hidden {\n  display: none;\n}\n\n.portfolio-image {\n  width: 100%;\n  height: 300px;\n  object-fit: cover;\n  transition: transform 0.3s ease;\n}\n\n.portfolio-item:hover .portfolio-image {\n  transform: scale(1.05);\n}\n\n.portfolio-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(transparent, rgba(0,0,0,0.8));\n  color: white;\n  padding: var(--card-padding);\n  transform: translateY(100%);\n  transition: transform 0.3s ease;\n}\n\n.portfolio-item:hover .portfolio-overlay {\n  transform: translateY(0);\n}\n\n.portfolio-overlay h3 {\n  font-size: var(--heading-h3);\n  margin-bottom: var(--space-2);\n}\n\n.portfolio-overlay p {\n  margin-bottom: var(--space-4);\n  opacity: 0.9;\n  color: white;\n}\n\n.portfolio-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n.tag {\n  background: rgba(255,255,255,0.2);\n  color: white;\n  padding: var(--space-1) var(--space-3);\n  border-radius: 20px;\n  font-size: var(--text-xs);\n  font-weight: 500;\n}"},{path:"/scripts/main.js",content:"// Main JavaScript - Shared functionality\n\n// Multi-file demo loaded\n\n// Set up navigation highlighting\ndocument.addEventListener('DOMContentLoaded', function() {\n    const currentPath = window.location.pathname;\n    const navLinks = document.querySelectorAll('.nav-link');\n    \n    navLinks.forEach(link => {\n        if (link.getAttribute('href') === currentPath) {\n            link.classList.add('active');\n        } else {\n            link.classList.remove('active');\n        }\n    });\n    \n    // Scroll-reactive navbar functionality\n    const navbar = document.querySelector('.navbar');\n    const hero = document.querySelector('.hero');\n    let lastScrollY = window.scrollY;\n    let heroHeight = hero ? hero.offsetHeight : 0;\n    \n    function updateNavbarVisibility() {\n        const currentScrollY = window.scrollY;\n        const scrollDifference = currentScrollY - lastScrollY;\n        \n        // Always show navbar in hero section\n        if (currentScrollY <= heroHeight) {\n            navbar.classList.remove('hidden');\n        } \n        // Hide when scrolling down past hero section\n        else if (scrollDifference > 0) {\n            navbar.classList.add('hidden');\n        }\n        // Show when scrolling up by 20px or more\n        else if (scrollDifference <= -20) {\n            navbar.classList.remove('hidden');\n        }\n        \n        lastScrollY = currentScrollY;\n    }\n    \n    // Throttle scroll events for better performance\n    let ticking = false;\n    function handleScroll() {\n        if (!ticking) {\n            requestAnimationFrame(updateNavbarVisibility);\n            ticking = true;\n            setTimeout(() => { ticking = false; }, 16); // ~60fps\n        }\n    }\n    \n    window.addEventListener('scroll', handleScroll);\n    \n    // Recalculate hero height on resize\n    window.addEventListener('resize', function() {\n        heroHeight = hero ? hero.offsetHeight : 0;\n    });\n    \n    // Mobile hamburger menu functionality\n    const navToggle = document.querySelector('.nav-toggle');\n    const navMenu = document.querySelector('.nav-menu');\n    const mobileNavLinks = document.querySelectorAll('.nav-link');\n    \n    function toggleMobileMenu() {\n        navToggle.classList.toggle('active');\n        navMenu.classList.toggle('active');\n        navbar.classList.toggle('menu-open');\n        \n        // Update ARIA attributes\n        const isExpanded = navToggle.classList.contains('active');\n        navToggle.setAttribute('aria-expanded', isExpanded);\n        \n        // Prevent body scroll when menu is open\n        document.body.style.overflow = isExpanded ? 'hidden' : '';\n    }\n    \n    function closeMobileMenu() {\n        navToggle.classList.remove('active');\n        navMenu.classList.remove('active');\n        navbar.classList.remove('menu-open');\n        navToggle.setAttribute('aria-expanded', 'false');\n        document.body.style.overflow = '';\n    }\n    \n    // Toggle menu on button click\n    if (navToggle) {\n        navToggle.addEventListener('click', toggleMobileMenu);\n    }\n    \n    // Close menu when clicking nav links\n    mobileNavLinks.forEach(link => {\n        link.addEventListener('click', closeMobileMenu);\n    });\n    \n    // Close menu on escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape' && navMenu.classList.contains('active')) {\n            closeMobileMenu();\n        }\n    });\n    \n    // Close menu when clicking outside\n    document.addEventListener('click', function(e) {\n        if (!navToggle.contains(e.target) && !navMenu.contains(e.target) && navMenu.classList.contains('active')) {\n            closeMobileMenu();\n        }\n    });\n    \n    // Close mobile menu when navbar hides (scroll reactive)\n    const originalUpdateNavbarVisibility = updateNavbarVisibility;\n    updateNavbarVisibility = function() {\n        originalUpdateNavbarVisibility();\n        if (navbar.classList.contains('hidden') && navMenu.classList.contains('active')) {\n            closeMobileMenu();\n        }\n    };\n    \n});"},{path:"/templates/navigation.hbs",content:'<nav class="navbar">\n    <a href="/" class="nav-brand">\n        <img src="/assets/images/logo.svg" alt="{{siteName}}" class="nav-logo">\n        <span>{{siteName}}</span>\n    </a>\n    \n    <button class="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false">\n        <span class="hamburger-line"></span>\n        <span class="hamburger-line"></span>\n        <span class="hamburger-line"></span>\n    </button>\n    \n    <ul class="nav-menu">\n        {{#each navigation}}\n        <li><a href="{{url}}" class="nav-link">{{title}}</a></li>\n        {{/each}}\n    </ul>\n</nav>'},{path:"/templates/footer.hbs",content:'<footer class="site-footer">\n    <div class="footer-content">\n        <div class="footer-brand">\n            <div class="footer-logo">\n                <img src="/assets/images/logo.svg" alt="{{siteName}}" width="40" height="40">\n                <span>{{siteName}}</span>\n            </div>\n            <p class="footer-tagline">{{footerTagline}}</p>\n            <div class="footer-social">\n                {{#each social}}\n                <a href="{{url}}" aria-label="{{name}}">{{icon}}</a>\n                {{/each}}\n            </div>\n        </div>\n        \n        <div class="footer-links-section">\n            <div class="footer-column">\n                <h4>Explore</h4>\n                <ul class="footer-links">\n                    {{#each navigation}}\n                    <li><a href="{{url}}">{{title}}</a></li>\n                    {{/each}}\n                </ul>\n            </div>\n            \n            <div class="footer-column">\n                <h4>Services</h4>\n                <ul class="footer-links">\n                    {{#each services}}\n                    <li><a href="{{url}}">{{name}}</a></li>\n                    {{/each}}\n                </ul>\n            </div>\n        </div>\n    </div>\n    \n    <div class="footer-bottom">\n        <a href="{{deepstudioLink}}" target="_blank" class="footer-hf-link">\n            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>\n            </svg>\n            <span>{{deepstudioName}}</span>\n        </a>\n        <div class="footer-bottom-links">\n            {{#each legalLinks}}\n            <a href="{{url}}">{{name}}</a>\n            {{#unless @last}}<span class="separator">•</span>{{/unless}}\n            {{/each}}\n        </div>\n    </div>\n</footer>'},{path:"/scripts/portfolio.js",content:"// Portfolio Filtering Functionality\n\n(function() {\n    let currentFilter = 'all';\n    \n    function init() {\n        const filterButtons = document.querySelectorAll('.filter-btn');\n        const portfolioItems = document.querySelectorAll('.portfolio-item');\n        \n        if (!filterButtons.length || !portfolioItems.length) return;\n        \n        // Add event listeners to filter buttons\n        filterButtons.forEach(btn => {\n            btn.addEventListener('click', handleFilterClick);\n        });\n        \n        // Show all items initially\n        showItems(portfolioItems, 'all');\n    }\n    \n    function handleFilterClick(e) {\n        const button = e.target;\n        const filter = button.dataset.filter;\n        \n        if (!filter) return;\n        \n        // Update active button\n        document.querySelectorAll('.filter-btn').forEach(btn => {\n            btn.classList.remove('active');\n        });\n        button.classList.add('active');\n        \n        // Filter and show items\n        const portfolioItems = document.querySelectorAll('.portfolio-item');\n        showItems(portfolioItems, filter);\n        \n        currentFilter = filter;\n    }\n    \n    function showItems(items, filter) {\n        items.forEach(item => {\n            const itemCategory = item.dataset.category;\n            \n            if (filter === 'all' || itemCategory === filter) {\n                item.style.display = 'block';\n                item.style.opacity = '0';\n                \n                // Animate in\n                setTimeout(() => {\n                    item.style.opacity = '1';\n                    item.style.transform = 'translateY(0)';\n                }, 50);\n            } else {\n                item.style.opacity = '0';\n                item.style.transform = 'translateY(20px)';\n                \n                // Hide after animation\n                setTimeout(() => {\n                    item.style.display = 'none';\n                }, 300);\n            }\n        });\n    }\n    \n    // Add smooth transitions to portfolio items\n    function addTransitions() {\n        const portfolioItems = document.querySelectorAll('.portfolio-item');\n        portfolioItems.forEach(item => {\n            item.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n        });\n    }\n    \n    document.addEventListener('DOMContentLoaded', function() {\n        addTransitions();\n        init();\n    });\n})();"},{path:"/scripts/contact.js",content:"// Contact Form Validation and Submission\n\n(function() {\n    let form;\n    let submitButton;\n    let isSubmitting = false;\n    \n    function init() {\n        form = document.getElementById('contactForm');\n        submitButton = form?.querySelector('button[type=\"submit\"]');\n        \n        if (!form || !submitButton) return;\n        \n        // Add event listeners\n        form.addEventListener('submit', handleSubmit);\n        \n        // Real-time validation\n        const inputs = form.querySelectorAll('input[required], textarea[required]');\n        inputs.forEach(input => {\n            input.addEventListener('blur', validateField);\n            input.addEventListener('input', clearErrors);\n        });\n        \n        // Email specific validation\n        const emailInput = form.querySelector('#email');\n        if (emailInput) {\n            emailInput.addEventListener('blur', validateEmail);\n        }\n    }\n    \n    function handleSubmit(e) {\n        e.preventDefault();\n        \n        if (isSubmitting) return;\n        \n        // Clear all previous errors\n        clearAllErrors();\n        \n        // Validate all fields\n        const isValid = validateForm();\n        \n        if (isValid) {\n            submitForm();\n        }\n    }\n    \n    function validateForm() {\n        let isValid = true;\n        \n        // Required field validation\n        const requiredFields = [\n            { id: 'name', name: 'Full Name' },\n            { id: 'email', name: 'Email Address' },\n            { id: 'message', name: 'Project Details' }\n        ];\n        \n        requiredFields.forEach(field => {\n            const input = document.getElementById(field.id);\n            const value = input.value.trim();\n            \n            if (!value) {\n                showError(field.id, `${field.name} is required`);\n                isValid = false;\n            }\n        });\n        \n        // Email format validation\n        const emailInput = document.getElementById('email');\n        const emailValue = emailInput.value.trim();\n        if (emailValue && !isValidEmail(emailValue)) {\n            showError('email', 'Please enter a valid email address');\n            isValid = false;\n        }\n        \n        // Message length validation\n        const messageInput = document.getElementById('message');\n        const messageValue = messageInput.value.trim();\n        if (messageValue && messageValue.length < 20) {\n            showError('message', 'Please provide more details about your project (minimum 20 characters)');\n            isValid = false;\n        }\n        \n        return isValid;\n    }\n    \n    function validateField(e) {\n        const field = e.target;\n        const value = field.value.trim();\n        \n        clearErrors(e);\n        \n        if (field.hasAttribute('required') && !value) {\n            const fieldName = field.previousElementSibling.textContent.replace(' *', '');\n            showError(field.id, `${fieldName} is required`);\n        }\n    }\n    \n    function validateEmail(e) {\n        const emailInput = e.target;\n        const emailValue = emailInput.value.trim();\n        \n        if (emailValue && !isValidEmail(emailValue)) {\n            showError('email', 'Please enter a valid email address');\n        }\n    }\n    \n    function isValidEmail(email) {\n        const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n        return emailRegex.test(email);\n    }\n    \n    function showError(fieldId, message) {\n        const field = document.getElementById(fieldId);\n        const formGroup = field.parentElement;\n        const errorElement = document.getElementById(fieldId + 'Error');\n        \n        // Add error class to form group\n        formGroup.classList.add('error');\n        formGroup.classList.remove('success');\n        \n        // Show error message\n        if (errorElement) {\n            errorElement.textContent = message;\n        }\n    }\n    \n    function clearErrors(e) {\n        const field = e.target;\n        const formGroup = field.parentElement;\n        const errorElement = document.getElementById(field.id + 'Error');\n        \n        // Remove error class\n        formGroup.classList.remove('error');\n        \n        // Clear error message\n        if (errorElement) {\n            errorElement.textContent = '';\n        }\n        \n        // Add success class if field has value and no errors\n        if (field.value.trim() && !formGroup.classList.contains('error')) {\n            formGroup.classList.add('success');\n        } else {\n            formGroup.classList.remove('success');\n        }\n    }\n    \n    function clearAllErrors() {\n        const errorMessages = form.querySelectorAll('.error-message');\n        errorMessages.forEach(error => error.textContent = '');\n        \n        const formGroups = form.querySelectorAll('.form-group');\n        formGroups.forEach(group => {\n            group.classList.remove('error', 'success');\n        });\n        \n        // Hide success message\n        const successElement = document.getElementById('formSuccess');\n        if (successElement) {\n            successElement.classList.remove('show');\n        }\n    }\n    \n    function submitForm() {\n        if (isSubmitting) return;\n        \n        isSubmitting = true;\n        \n        // Add loading state\n        form.classList.add('loading');\n        submitButton.disabled = true;\n        submitButton.textContent = 'Sending...';\n        \n        // Collect form data\n        const formData = new FormData(form);\n        const data = {\n            name: formData.get('name'),\n            email: formData.get('email'),\n            company: formData.get('company'),\n            project: formData.get('project'),\n            budget: formData.get('budget'),\n            message: formData.get('message'),\n            newsletter: formData.get('newsletter') ? true : false,\n            timestamp: new Date().toISOString()\n        };\n        \n        // Simulate form submission (replace with actual API call)\n        setTimeout(() => {\n            \n            // Show success message\n            showSuccess();\n            \n            // Reset form\n            form.reset();\n            clearAllErrors();\n            \n            // Remove loading state\n            form.classList.remove('loading');\n            submitButton.disabled = false;\n            submitButton.textContent = 'Send Message';\n            \n            isSubmitting = false;\n            \n            // Auto-hide success message after 5 seconds\n            setTimeout(() => {\n                const successElement = document.getElementById('formSuccess');\n                if (successElement) {\n                    successElement.classList.remove('show');\n                }\n            }, 5000);\n            \n        }, 2000); // Simulate network delay\n    }\n    \n    function showSuccess() {\n        const successElement = document.getElementById('formSuccess');\n        if (successElement) {\n            successElement.classList.add('show');\n            successElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n        }\n    }\n    \n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', init);\n})();"},{path:"/data.json",content:'{\n  "siteName": "Example Studios",\n  "footerTagline": "Crafting digital experiences that inspire",\n  "navigation": [\n    {"title": "Home", "url": "/"},\n    {"title": "Portfolio", "url": "/portfolio.html"},\n    {"title": "About", "url": "/about.html"},\n    {"title": "Contact", "url": "/contact.html"}\n  ],\n  "social": [\n    {"name": "Twitter", "url": "#", "icon": "\uD835\uDD4F"},\n    {"name": "LinkedIn", "url": "#", "icon": "in"},\n    {"name": "Instagram", "url": "#", "icon": "\uD83D\uDCF7"},\n    {"name": "GitHub", "url": "#", "icon": "⚡"}\n  ],\n  "services": [\n    {"name": "Web Design", "url": "/portfolio.html"},\n    {"name": "Development", "url": "/portfolio.html"},\n    {"name": "Mobile Apps", "url": "/portfolio.html"},\n    {"name": "Consulting", "url": "/portfolio.html"}\n  ],\n  "deepstudioLink": "https://huggingface.co/spaces/otst/deepstudio",\n  "deepstudioName": "DeepStudio",\n  "legalLinks": [\n    {"name": "Privacy Policy", "url": "/privacy.html"},\n    {"name": "Terms of Service", "url": "/terms.html"}\n  ]\n}'},{path:"/assets/images/logo.svg",content:'<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">\n  <defs>\n    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">\n      <stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />\n      <stop offset="100%" style="stop-color:#ff7b00;stop-opacity:1" />\n    </linearGradient>\n  </defs>\n  <rect x="2" y="2" width="12" height="12" rx="2" fill="url(#gradient)" opacity="0.9"/>\n  <rect x="18" y="2" width="12" height="12" rx="2" fill="#ff7b00" opacity="0.8"/>\n  <rect x="2" y="18" width="12" height="12" rx="2" fill="#2563eb" opacity="0.8"/>\n  <rect x="18" y="18" width="12" height="12" rx="2" fill="url(#gradient)" opacity="0.7"/>\n  <circle cx="16" cy="16" r="6" fill="white" opacity="0.9"/>\n  <circle cx="16" cy="16" r="3" fill="#1a365d"/>\n</svg>'},{path:"/assets/images/favicon.svg",content:'<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">\n  <rect x="1" y="1" width="6" height="6" rx="1" fill="#2563eb"/>\n  <rect x="9" y="1" width="6" height="6" rx="1" fill="#ff7b00"/>\n  <rect x="1" y="9" width="6" height="6" rx="1" fill="#ff7b00"/>\n  <rect x="9" y="9" width="6" height="6" rx="1" fill="#2563eb"/>\n</svg>'},{path:"/contact.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Contact - Example Studios</title>\n    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">\n    <link rel="stylesheet" href="/styles/main.css">\n</head>\n<body>\n    <nav class="navbar">\n        <a href="/" class="nav-brand">\n            <img src="/assets/images/logo.svg" alt="Example Studios" class="nav-logo">\n            <span>Example Studios</span>\n        </a>\n        \n        <button class="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false">\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n        </button>\n        \n        <ul class="nav-menu">\n            <li><a href="/" class="nav-link">Home</a></li>\n            <li><a href="/portfolio.html" class="nav-link">Portfolio</a></li>\n            <li><a href="/about.html" class="nav-link">About</a></li>\n            <li><a href="/contact.html" class="nav-link active">Contact</a></li>\n        </ul>\n    </nav>\n\n    <main>\n        <section class="hero sub-page">\n            <div class="hero-content">\n                <h1>Let\'s Build Something Amazing</h1>\n                <p class="hero-subtitle">Ready to turn your ideas into reality? We\'d love to hear about your project and show you how we can help.</p>\n            </div>\n        </section>\n        \n        <div class="container">\n            <div class="section-header">\n                <h2>Get In Touch</h2>\n                <p class="section-subtitle">Ready to start your next project? Choose how you\'d like to connect with us</p>\n            </div>\n            \n            <div class="card-grid">\n                <div class="card contact-card">\n                    <div class="service-icon">Email</div>\n                    <h3>Send Us an Email</h3>\n                    <p>Drop us a line and we\'ll get back to you within 24 hours</p>\n                    <div class="contact-detail">hello@examplestudios.com</div>\n                    <a href="mailto:hello@examplestudios.com" class="btn">Send Email</a>\n                </div>\n                \n                <div class="card contact-card">\n                    <div class="service-icon">Phone</div>\n                    <h3>Give Us a Call</h3>\n                    <p>Speak directly with our team about your project</p>\n                    <div class="contact-detail">(555) 123-4567</div>\n                    <a href="tel:+15551234567" class="btn">Call Now</a>\n                </div>\n                \n                <div class="card contact-card">\n                    <div class="service-icon">Office</div>\n                    <h3>Visit Our Studio</h3>\n                    <p>Meet with us in person to discuss your vision</p>\n                    <div class="contact-detail">San Francisco, CA<br><small>By appointment only</small></div>\n                    <a href="/contact.html" class="btn">Schedule Visit</a>\n                </div>\n            </div>\n        </div>\n        \n        <div class="container">\n            <div class="section-header">\n                <h2>Start Your Project</h2>\n                <p class="section-subtitle">Tell us about your vision and we\'ll get back to you within 24 hours</p>\n            </div>\n            \n            <div class="contact-form-section">\n                <form class="contact-form" id="contactForm">\n                    <div class="form-row">\n                        <div class="form-group">\n                            <label for="name">Your Name</label>\n                            <input type="text" id="name" name="name" required>\n                            <span class="error-message" id="nameError"></span>\n                        </div>\n                        \n                        <div class="form-group">\n                            <label for="email">Email Address</label>\n                            <input type="email" id="email" name="email" required>\n                            <span class="error-message" id="emailError"></span>\n                        </div>\n                    </div>\n                    \n                    <div class="form-group">\n                        <label for="message">Tell us about your project</label>\n                        <textarea id="message" name="message" rows="5" required placeholder="What are you looking to build? Share your goals, timeline, or any specific requirements..."></textarea>\n                        <span class="error-message" id="messageError"></span>\n                    </div>\n                    \n                    <button type="submit" class="btn btn-primary btn-full">Send Message</button>\n                    \n                    <div class="form-success" id="formSuccess">\n                        <div class="success-icon">\n                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n                                <path d="M16.667 5L7.5 14.167L3.333 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n                            </svg>\n                        </div>\n                        <p>Thank you! We\'ll get back to you within 24 hours.</p>\n                    </div>\n                </form>\n            </div>\n        </div>\n        \n        <section class="featured-work">\n            <div class="section-header">\n                <h2>Trusted by Growing Companies</h2>\n                <p class="section-subtitle">Join the businesses that have transformed their digital presence with us</p>\n            </div>\n            \n            <div class="social-proof-container">\n                <div class="social-proof-stats">\n                    <div class="stat">\n                        <div class="stat-number">50+</div>\n                        <div class="stat-label">Projects Completed</div>\n                    </div>\n                    <div class="stat">\n                        <div class="stat-number">24hr</div>\n                        <div class="stat-label">Response Time</div>\n                    </div>\n                    <div class="stat">\n                        <div class="stat-number">100%</div>\n                        <div class="stat-label">Client Satisfaction</div>\n                    </div>\n                </div>\n                \n                <div class="testimonial">\n                    <p class="testimonial-text">"Example Studios delivered our project on time and exceeded our expectations. Their attention to detail is remarkable and their team was incredibly responsive throughout the entire process."</p>\n                    <div class="testimonial-attribution">\n                        <strong>Sarah Chen</strong>, Product Manager at TechCorp\n                    </div>\n                </div>\n            </div>\n        </section>\n    </main>\n\n    {{> footer}}\n\n    <script src="/scripts/main.js"><\/script>\n    <script src="/scripts/contact.js"><\/script>\n</body>\n</html>'},{path:"/privacy.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Privacy Policy - Example Studios</title>\n    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">\n    <link rel="stylesheet" href="/styles/main.css">\n</head>\n<body>\n    {{> navigation}}\n\n    <main>\n        <section class="hero sub-page">\n            <div class="hero-content">\n                <h1>Privacy Policy</h1>\n                <p class="hero-subtitle">How we protect and handle your information</p>\n            </div>\n        </section>\n        \n        <div class="container">\n            <div class="content-section">\n                <p><strong>Last updated:</strong> December 2024</p>\n                \n                <h2>Overview</h2>\n                <p>At Example Studios, we take your privacy seriously. This Privacy Policy explains how we collect, use, and protect your personal information when you use our services.</p>\n                \n                <h2>Information We Collect</h2>\n                <p>We may collect the following types of information:</p>\n                <ul>\n                    <li><strong>Contact Information:</strong> Name, email address, phone number when you contact us</li>\n                    <li><strong>Project Information:</strong> Details about your project requirements and preferences</li>\n                    <li><strong>Usage Data:</strong> How you interact with our website for improving our services</li>\n                </ul>\n                \n                <h2>How We Use Your Information</h2>\n                <p>We use your information to:</p>\n                <ul>\n                    <li>Provide and improve our design and development services</li>\n                    <li>Communicate with you about your projects</li>\n                    <li>Send you updates about our services (with your consent)</li>\n                    <li>Analyze and improve our website and services</li>\n                </ul>\n                \n                <h2>Information Sharing</h2>\n                <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except:</p>\n                <ul>\n                    <li>To trusted service providers who help us operate our business</li>\n                    <li>When required by law or to protect our rights</li>\n                    <li>With your explicit consent</li>\n                </ul>\n                \n                <h2>Data Security</h2>\n                <p>We implement appropriate security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.</p>\n                \n                <h2>Your Rights</h2>\n                <p>You have the right to:</p>\n                <ul>\n                    <li>Access and review your personal information</li>\n                    <li>Request corrections to your information</li>\n                    <li>Request deletion of your information</li>\n                    <li>Opt-out of marketing communications</li>\n                </ul>\n                \n                <h2>Contact Us</h2>\n                <p>If you have questions about this Privacy Policy, please contact us at:</p>\n                <p>\n                    <strong>Example Studios</strong><br>\n                    Email: hello@examplestudios.com<br>\n                    Phone: (555) 123-4567\n                </p>\n            </div>\n        </div>\n        \n        <section class="cta-section">\n            <div class="cta-content">\n                <h2>Ready to Build Something Amazing?</h2>\n                <p>Let\'s turn your ideas into reality. We\'d love to hear about your project.</p>\n                <a href="/contact.html" class="btn btn-primary">Start Your Project</a>\n            </div>\n        </section>\n    </main>\n\n    {{> footer}}\n\n    <script src="/scripts/main.js"><\/script>\n</body>\n</html>'},{path:"/terms.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Terms of Service - Example Studios</title>\n    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">\n    <link rel="stylesheet" href="/styles/main.css">\n</head>\n<body>\n    {{> navigation}}\n\n    <main>\n        <section class="hero sub-page">\n            <div class="hero-content">\n                <h1>Terms of Service</h1>\n                <p class="hero-subtitle">Our terms and conditions for working together</p>\n            </div>\n        </section>\n        \n        <div class="container">\n            <div class="content-section">\n                <p><strong>Last updated:</strong> December 2024</p>\n                \n                <h2>Agreement to Terms</h2>\n                <p>By accessing and using Example Studios\' services, you agree to be bound by these Terms of Service and all applicable laws and regulations.</p>\n                \n                <h2>Services</h2>\n                <p>Example Studios provides web design, development, and digital consulting services. We reserve the right to modify or discontinue services with reasonable notice.</p>\n                \n                <h2>Client Responsibilities</h2>\n                <p>As a client, you agree to:</p>\n                <ul>\n                    <li>Provide accurate and complete information for your project</li>\n                    <li>Respond to requests for feedback in a timely manner</li>\n                    <li>Collaborate effectively throughout the project</li>\n                    <li>Respect intellectual property rights</li>\n                </ul>\n                \n                <h2>Project Process</h2>\n                <p>Our typical process includes:</p>\n                <ul>\n                    <li><strong>Discovery:</strong> Understanding your requirements and goals</li>\n                    <li><strong>Proposal:</strong> Detailed scope, timeline, and pricing</li>\n                    <li><strong>Design & Development:</strong> Creating your solution</li>\n                    <li><strong>Review:</strong> Client feedback and revisions</li>\n                    <li><strong>Launch:</strong> Final delivery and launch support</li>\n                </ul>\n                \n                <h2>Project Timeline</h2>\n                <ul>\n                    <li>Project schedules will be outlined in individual agreements</li>\n                    <li>Milestone deliverables will be clearly defined</li>\n                    <li>Regular progress updates will be provided</li>\n                </ul>\n                \n                <h2>Intellectual Property</h2>\n                <p>Upon project completion, clients receive ownership of custom work created specifically for their project, excluding any pre-existing intellectual property or third-party components.</p>\n                \n                <h2>Limitation of Liability</h2>\n                <p>Example Studios\' liability is limited to the amount paid for services. We are not responsible for indirect, incidental, or consequential damages.</p>\n                \n                <h2>Termination</h2>\n                <p>Either party may terminate services with written notice. All completed work will be delivered upon termination.</p>\n                \n                <h2>Changes to Terms</h2>\n                <p>We reserve the right to update these terms with reasonable notice to existing clients.</p>\n                \n                <h2>Contact</h2>\n                <p>Questions about these terms? Contact us at:</p>\n                <p>\n                    <strong>Example Studios</strong><br>\n                    Email: hello@examplestudios.com<br>\n                    Phone: (555) 123-4567\n                </p>\n            </div>\n        </div>\n    </main>\n\n    {{> footer}}\n\n    <script src="/scripts/main.js"><\/script>\n</body>\n</html>'},{path:"/portfolio/techflow-dashboard.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>TechFlow Dashboard - Example Studios</title>\n    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">\n    <link rel="stylesheet" href="/styles/main.css">\n</head>\n<body>\n    <nav class="navbar">\n        <a href="/" class="nav-brand">\n            <img src="/assets/images/logo.svg" alt="Example Studios" class="nav-logo">\n            <span>Example Studios</span>\n        </a>\n        \n        <button class="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false">\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n            <span class="hamburger-line"></span>\n        </button>\n        \n        <ul class="nav-menu">\n            <li><a href="/" class="nav-link">Home</a></li>\n            <li><a href="/portfolio.html" class="nav-link active">Portfolio</a></li>\n            <li><a href="/about.html" class="nav-link">About</a></li>\n            <li><a href="/contact.html" class="nav-link">Contact</a></li>\n        </ul>\n    </nav>\n\n    <main>\n        <section class="hero sub-page">\n            <div class="hero-content">\n                <h1>TechFlow Dashboard</h1>\n                <p class="hero-subtitle">Modern analytics platform with real-time data visualization</p>\n            </div>\n        </section>\n        \n        <div class="container">\n            <section class="content-section">\n                <div class="section-header">\n                    <h2>Project Overview</h2>\n                    <p class="section-subtitle">A comprehensive analytics solution built for modern businesses</p>\n                </div>\n                \n                <div class="card-grid">\n                    <div class="card">\n                        <div class="service-icon">Challenge</div>\n                        <h3>Challenge</h3>\n                        <p>TechFlow needed a modern dashboard to visualize complex data streams in real-time, replacing their outdated reporting system with something more intuitive and scalable.</p>\n                    </div>\n                    \n                    <div class="card">\n                        <div class="service-icon">Solution</div>\n                        <h3>Solution</h3>\n                        <p>We designed and built a React-based dashboard with D3.js visualizations, featuring customizable widgets and real-time data updates via WebSocket connections.</p>\n                    </div>\n                </div>\n            </section>\n            \n            <section class="content-section">\n                <div class="section-header">\n                    <h2>Technology Stack</h2>\n                </div>\n                <div class="card-grid">\n                    <div class="card">\n                        <div class="service-icon">React</div>\n                        <h3>React</h3>\n                        <p>Modern component-based architecture for maintainable UI development</p>\n                    </div>\n                    \n                    <div class="card">\n                        <div class="service-icon">Data</div>\n                        <h3>D3.js</h3>\n                        <p>Custom data visualizations with smooth animations and interactions</p>\n                    </div>\n                    \n                    <div class="card">\n                        <div class="service-icon">Backend</div>\n                        <h3>Node.js</h3>\n                        <p>Robust backend API with real-time data processing capabilities</p>\n                    </div>\n                </div>\n            </section>\n            \n            <section class="content-section">\n                <div class="section-header">\n                    <h2>Results</h2>\n                </div>\n                <div class="card">\n                    <div class="service-icon">Results</div>\n                    <h3>Impact & Performance</h3>\n                    <p>The new dashboard reduced report generation time by 75% and improved user engagement by 300%. Real-time updates eliminated the need for manual refreshes, and the intuitive interface reduced training time for new users.</p>\n                </div>\n            </section>\n        </div>\n        \n        <section class="cta-section">\n            <div class="cta-content">\n                <h2>Ready for Your Next Project?</h2>\n                <p>Let\'s discuss how we can create a custom solution for your business needs.</p>\n                <a href="/contact.html" class="btn btn-primary">Start Your Project</a>\n            </div>\n        </section>\n    </main>\n\n    {{> footer}}\n\n    <script src="/scripts/main.js"><\/script>\n</body>\n</html>'},{path:"/assets/README.md",content:"# Assets Directory\n\nThis directory contains all static assets for the Example project.\n\n## Structure\n\n- `/images/` - Image files including:\n  - `example-background.jpg` - Hero section background image\n  - `logo.svg` - Site logo\n  - `favicon.svg` - Browser favicon\n\n## Background Image\n\nThe `example-background.jpg` is automatically included when the demo project is created. It features a beautiful flowing gradient design that complements the orange (#ff7b00) and blue (#2563eb) color scheme.\n\n## File Types Supported\n\nThe VFS system supports various file types:\n- Images: PNG, JPG, JPEG, GIF, WebP, SVG, ICO\n- Documents: HTML, CSS, JS, JSON, TXT, MD, XML\n- Binary files up to 10MB\n\nThis demonstrates the VFS capability to handle multiple file types and organize them in a structured directory system."}],assets:[{filename:"example-background.jpg",path:"/assets/images/example-background.jpg"}]},ew={name:"Barebones Project",description:"A minimal starting template",directories:["/styles","/scripts","/templates"],files:[{path:"/index.html",content:'<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>New Project</title>\n    <link rel="stylesheet" href="/styles/style.css">\n</head>\n<body>\n    {{> welcome-card}}\n\n    <script src="/scripts/main.js"><\/script>\n</body>\n</html>'},{path:"/styles/style.css",content:"/*\n * Your project styles start here.\n * Use this file to customize typography, layout, and colors.\n */\n\nbody {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  margin: 0;\n  padding: 2rem;\n  background: #f9fafb;\n  color: #0f172a;\n}\n\nh1 {\n  font-size: 2.25rem;\n  margin-bottom: 0.5rem;\n}\n\np {\n  font-size: 1rem;\n  line-height: 1.6;\n}\n\n.welcome-card {\n  /* Component styles can be added here */\n}\n"},{path:"/scripts/main.js",content:"// Welcome to your project!\n// Use this file to add interactivity to your pages.\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  console.log('Project ready. Happy building!');\n});\n"},{path:"/templates/welcome-card.hbs",content:'<div class="welcome-card">\n    <h1>{{title}}</h1>\n    <p>{{message}}</p>\n</div>'},{path:"/data.json",content:'{\n  "title": "Welcome",\n  "message": "Start building your website!"\n}'}]};var ej=n(7015);async function ek(e,t,n,a){await ej.$.runWithSuppressedDirty(t,async()=>{for(let a of n.directories)await e.createDirectory(t,a);for(let a of n.files){let n=a.content;if(a.isBase64){let e=atob(a.content),t=new Uint8Array(e.length);for(let n=0;n<e.length;n++)t[n]=e.charCodeAt(n);n=t.buffer}await e.createFile(t,a.path,n)}if(a&&a.length>0)for(let n of a)try{let a=await fetch("".concat(window.location.origin,"/").concat(n.filename));if(a.ok){let s=await a.arrayBuffer();await e.createFile(t,n.path,s)}}catch(e){}})}var eN=n(823),eC=n(8202),eS=n(4884);function eE(e){let{className:t,...n}=e;return(0,a.jsx)(eS.bL,{"data-slot":"switch",className:(0,i.cn)("peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",t),...n,children:(0,a.jsx)(eS.zi,{"data-slot":"switch-thumb",className:(0,i.cn)("bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0")})})}var eA=n(1362),eP=n(3127),eI=n(6474),eD=n(1243),eL=n(4213),eT=n(3462),eM=n(9311),ez=n.n(eM);class eF{static async exportAllData(){try{i.v.info("Starting data export...");let e={version:this.BACKUP_VERSION,exportDate:new Date().toISOString(),databases:{vfs:await this.exportVFSData(),conversations:await this.exportConversationData(),checkpoints:await this.exportCheckpointData()},metadata:{projectCount:0,totalSize:0,exportedFrom:"deepstudio"}};e.metadata.projectCount=e.databases.vfs.projects.length,e.metadata.totalSize=this.calculateDataSize(e);let t=new(ez());t.file("backup.json",JSON.stringify(e,null,2));let n=await t.generateAsync({type:"blob",compression:"DEFLATE",compressionOptions:{level:6}}),a="oswstudio-backup-".concat(new Date().toISOString().split("T")[0]).concat(this.FILE_EXTENSION);this.downloadBlob(n,a),i.v.info("Export completed: ".concat(e.metadata.projectCount," projects, ").concat(this.formatBytes(e.metadata.totalSize)))}catch(e){throw i.v.error("Export failed:",e),Error("Export failed: ".concat(e instanceof Error?e.message:"Unknown error"))}}static async importAllData(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{mode:"merge"};try{var n,a,s,r,o,l,c;if(!e.name.endsWith(this.FILE_EXTENSION))throw Error("Invalid file type. Expected ".concat(this.FILE_EXTENSION," file."));if(e.size>this.MAX_IMPORT_SIZE)throw Error("File too large. Maximum size is ".concat(this.formatBytes(this.MAX_IMPORT_SIZE),"."));null==(n=t.onProgress)||n.call(t,10,"Reading backup file...");let d=new(ez()),m=(await d.loadAsync(e)).file("backup.json");if(!m)throw Error("Invalid backup file format.");let u=await m.async("string"),p=JSON.parse(u);this.validateBackupData(p),null==(a=t.onProgress)||a.call(t,30,"Validating backup data..."),"replace"===t.mode&&(null==(c=t.onProgress)||c.call(t,40,"Clearing existing data..."),await this.clearAllData()),null==(s=t.onProgress)||s.call(t,50,"Importing projects and files..."),await this.importVFSData(p.databases.vfs),null==(r=t.onProgress)||r.call(t,70,"Importing conversations..."),await this.importConversationData(p.databases.conversations),null==(o=t.onProgress)||o.call(t,90,"Importing checkpoints..."),await this.importCheckpointData(p.databases.checkpoints),null==(l=t.onProgress)||l.call(t,100,"Import completed successfully!"),i.v.info("Import completed: ".concat(p.metadata.projectCount," projects restored"))}catch(e){throw i.v.error("Import failed:",e),Error("Import failed: ".concat(e instanceof Error?e.message:"Unknown error"))}}static async validateBackupFile(e){try{if(!e.name.endsWith(this.FILE_EXTENSION))return{valid:!1,reason:"Invalid file extension"};if(e.size>this.MAX_IMPORT_SIZE)return{valid:!1,reason:"File too large"};let t=new(ez()),n=(await t.loadAsync(e)).file("backup.json");if(!n)return{valid:!1,reason:"Invalid backup file format"};let a=await n.async("string"),s=JSON.parse(a);return this.validateBackupData(s),{valid:!0,metadata:s.metadata}}catch(e){return{valid:!1,reason:e instanceof Error?e.message:"Unknown error"}}}static async exportVFSData(){let e={projects:[],files:[],fileTree:[]};return new Promise((t,n)=>{let a=indexedDB.open("deepstudio-vfs",1);a.onsuccess=async()=>{try{let n=a.result,s=n.transaction(["projects"],"readonly"),r=s.objectStore("projects").getAll();r.onsuccess=()=>{e.projects=r.result||[]};let o=n.transaction(["files"],"readonly"),i=o.objectStore("files").getAll();i.onsuccess=()=>{e.files=i.result||[]};let l=n.transaction(["fileTree"],"readonly"),c=l.objectStore("fileTree").getAll();c.onsuccess=()=>{e.fileTree=c.result||[]},await Promise.all([new Promise(e=>s.oncomplete=()=>e(void 0)),new Promise(e=>o.oncomplete=()=>e(void 0)),new Promise(e=>l.oncomplete=()=>e(void 0))]),t(e)}catch(e){n(e)}},a.onerror=()=>n(a.error)})}static async exportConversationData(){return new Promise((e,t)=>{let n=indexedDB.open("DeepStudioConversations",1);n.onsuccess=()=>{let a=n.result.transaction(["conversations"],"readonly").objectStore("conversations").getAll();a.onsuccess=()=>{e(a.result||[])},a.onerror=()=>t(a.error)},n.onerror=()=>t(n.error)})}static async exportCheckpointData(){return new Promise((e,t)=>{let n=indexedDB.open("DeepStudioCheckpoints",1);n.onsuccess=()=>{let a=n.result.transaction(["checkpoints"],"readonly").objectStore("checkpoints").getAll();a.onsuccess=()=>{e(a.result||[])},a.onerror=()=>t(a.error)},n.onerror=()=>t(n.error)})}static async importVFSData(e){return new Promise((t,n)=>{let a=indexedDB.open("deepstudio-vfs",1);a.onsuccess=async()=>{try{let n=a.result,s=n.transaction(["projects"],"readwrite").objectStore("projects");for(let t of e.projects)await new Promise((e,n)=>{let a=s.put(t);a.onsuccess=()=>e(),a.onerror=()=>n(a.error)});let r=n.transaction(["files"],"readwrite").objectStore("files");for(let t of e.files)await new Promise((e,n)=>{let a=r.put(t);a.onsuccess=()=>e(),a.onerror=()=>n(a.error)});let o=n.transaction(["fileTree"],"readwrite").objectStore("fileTree");for(let t of e.fileTree)await new Promise((e,n)=>{let a=o.put(t);a.onsuccess=()=>e(),a.onerror=()=>n(a.error)});t()}catch(e){n(e)}},a.onerror=()=>n(a.error)})}static async importConversationData(e){return new Promise((t,n)=>{let a=indexedDB.open("DeepStudioConversations",1);a.onsuccess=async()=>{try{let n=a.result.transaction(["conversations"],"readwrite").objectStore("conversations");for(let t of e)await new Promise((e,a)=>{let s=n.put(t);s.onsuccess=()=>e(),s.onerror=()=>a(s.error)});t()}catch(e){n(e)}},a.onerror=()=>n(a.error)})}static async importCheckpointData(e){return new Promise((t,n)=>{let a=indexedDB.open("DeepStudioCheckpoints",1);a.onsuccess=async()=>{try{let n=a.result.transaction(["checkpoints"],"readwrite").objectStore("checkpoints");for(let t of e)await new Promise((e,a)=>{let s=n.put(t);s.onsuccess=()=>e(),s.onerror=()=>a(s.error)});t()}catch(e){n(e)}},a.onerror=()=>n(a.error)})}static async clearAllData(){for(let e of["deepstudio-vfs","DeepStudioConversations","DeepStudioCheckpoints"])await new Promise((t,n)=>{let a=indexedDB.deleteDatabase(e);a.onsuccess=()=>t(),a.onerror=()=>n(a.error)})}static validateBackupData(e){if(!e.version||!e.exportDate||!e.databases||!e.metadata)throw Error("Invalid backup file structure");if(!e.databases.vfs||!e.databases.conversations||!e.databases.checkpoints)throw Error("Incomplete backup data");let t=e.version.split(".").map(Number),n=this.BACKUP_VERSION.split(".").map(Number);if(t[0]>n[0])throw Error("Backup version ".concat(e.version," is not compatible with current version ").concat(this.BACKUP_VERSION))}static calculateDataSize(e){return JSON.stringify(e).length}static formatBytes(e){if(0===e)return"0 Bytes";let t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["Bytes","KB","MB","GB"][t]}static downloadBlob(e,t){let n=URL.createObjectURL(e),a=document.createElement("a");a.href=n,a.download=t,document.body.appendChild(a),a.click(),document.body.removeChild(a),URL.revokeObjectURL(n)}}eF.BACKUP_VERSION="1.9.0",eF.FILE_EXTENSION=".osws",eF.MAX_IMPORT_SIZE=0x6400000;var eR=n(8106);function eO(e){let{...t}=e;return(0,a.jsx)(eR.bL,{"data-slot":"collapsible",...t})}function eB(e){let{...t}=e;return(0,a.jsx)(eR.R6,{"data-slot":"collapsible-trigger",...t})}function eW(e){let{...t}=e;return(0,a.jsx)(eR.Ke,{"data-slot":"collapsible-content",...t})}function eU(e){let{onClose:t}=e,[n,r]=(0,s.useState)({}),[o,i]=(0,s.useState)({}),{theme:d,setTheme:m}=(0,eA.D)(),[u,p]=(0,s.useState)(!1),[h,g]=(0,s.useState)(!1),[v,f]=(0,s.useState)(!1),[x,y]=(0,s.useState)(!1),[w,j]=(0,s.useState)(0),[k,C]=(0,s.useState)(""),[S,E]=(0,s.useState)({application:!0,costTracking:!1,dataManagement:!1});(0,s.useEffect)(()=>{r(eC.s.getSettings()),i(eC.s.getCostSettings()),p(!0)},[]);let A=(e,t)=>{eC.s.setSetting(e,t),r(n=>({...n,[e]:t}))},P=async()=>{try{f(!0),await eF.exportAllData(),T.oR.success("Data exported successfully!")}catch(e){T.oR.error(e instanceof Error?e.message:"Export failed")}finally{f(!1)}},I=e=>{E(t=>({...t,[e]:!t[e]}))};return(0,a.jsxs)("div",{className:"max-h-[calc(100vh-4rem)] overflow-y-auto",children:[(0,a.jsxs)("div",{className:"space-y-3 pb-4",children:[(0,a.jsxs)(eO,{open:S.application,onOpenChange:()=>I("application"),children:[(0,a.jsxs)(eB,{className:"flex items-center justify-between w-full p-3 rounded-lg hover:bg-muted/50 transition-colors",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(eP.A,{className:"h-4 w-4"}),(0,a.jsx)("h4",{className:"font-medium text-sm",children:"Application Settings"})]}),(0,a.jsx)(eI.A,{className:"h-4 w-4 transition-transform duration-200 ".concat(S.application?"rotate-180":"")})]}),(0,a.jsxs)(eW,{className:"px-3 pt-2 pb-3",children:[(0,a.jsx)("p",{className:"text-muted-foreground text-xs mb-4",children:"Configure your preferences and display options"}),(0,a.jsx)("div",{className:"space-y-4",children:(0,a.jsxs)("div",{children:[(0,a.jsx)(eb.J,{htmlFor:"theme",children:"Theme"}),(0,a.jsxs)(Y.l6,{value:u?d:"dark",onValueChange:e=>{m(e),A("theme",e)},children:[(0,a.jsx)(Y.bq,{id:"theme",className:"mt-2",children:(0,a.jsx)(Y.yv,{})}),(0,a.jsxs)(Y.gC,{children:[(0,a.jsx)(Y.eb,{value:"light",children:"Light"}),(0,a.jsx)(Y.eb,{value:"dark",children:"Dark"}),(0,a.jsx)(Y.eb,{value:"system",children:"System"})]})]})]})})]})]}),(0,a.jsxs)(eO,{open:S.costTracking,onOpenChange:()=>I("costTracking"),children:[(0,a.jsxs)(eB,{className:"flex items-center justify-between w-full p-3 rounded-lg hover:bg-muted/50 transition-colors",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(b.A,{className:"h-4 w-4"}),(0,a.jsx)("h4",{className:"font-medium text-sm",children:"Cost Tracking"})]}),(0,a.jsx)(eI.A,{className:"h-4 w-4 transition-transform duration-200 ".concat(S.costTracking?"rotate-180":"")})]}),(0,a.jsx)(eW,{className:"px-3 pt-2 pb-3",children:(0,a.jsxs)("div",{className:"space-y-4",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)(eb.J,{htmlFor:"show-costs",children:"Display Costs"}),(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:"Show cost information in messages"})]}),(0,a.jsx)(eE,{id:"show-costs",checked:!1!==o.showCosts,onCheckedChange:e=>{let t={...o,showCosts:e};eC.s.setCostSettings(t),i(t)}})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)(eb.J,{htmlFor:"daily-limit",children:"Daily Cost Limit (USD)"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2",children:[(0,a.jsx)(c.p,{id:"daily-limit",type:"number",min:"0",step:"0.01",placeholder:"No limit",value:o.dailyLimit||"",onChange:e=>{let t=e.target.value?parseFloat(e.target.value):void 0,n={...o,dailyLimit:t};eC.s.setCostSettings(n),i(n)}}),o.dailyLimit&&(0,a.jsxs)("span",{className:"text-sm text-muted-foreground",children:["$",o.dailyLimit.toFixed(2),"/day"]})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)(eb.J,{htmlFor:"project-limit",children:"Project Cost Limit (USD)"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2",children:[(0,a.jsx)(c.p,{id:"project-limit",type:"number",min:"0",step:"0.01",placeholder:"No limit",value:o.projectLimit||"",onChange:e=>{let t=e.target.value?parseFloat(e.target.value):void 0,n={...o,projectLimit:t};eC.s.setCostSettings(n),i(n)}}),o.projectLimit&&(0,a.jsxs)("span",{className:"text-sm text-muted-foreground",children:["$",o.projectLimit.toFixed(2),"/project"]})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)(eb.J,{htmlFor:"warning-threshold",children:"Warning Threshold (%)"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2",children:[(0,a.jsx)(c.p,{id:"warning-threshold",type:"number",min:"50",max:"100",step:"5",value:o.warningThreshold||80,onChange:e=>{let t=parseInt(e.target.value),n={...o,warningThreshold:t};eC.s.setCostSettings(n),i(n)}}),(0,a.jsxs)("span",{className:"text-sm text-muted-foreground flex items-center gap-1",children:[(0,a.jsx)(eD.A,{className:"h-3 w-3"}),"Warn at ",o.warningThreshold||80,"%"]})]})]}),(0,a.jsx)("div",{className:"border-t pt-3 mt-3",children:(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"text-sm font-medium",children:"Lifetime Total"}),(0,a.jsx)("div",{className:"text-xs text-muted-foreground",children:eT.U.formatCost(eC.s.getLifetimeCosts().total)})]}),(0,a.jsx)(l.$,{variant:"outline",size:"sm",onClick:()=>{confirm("Reset lifetime cost tracking? This cannot be undone.")&&(eC.s.resetLifetimeCosts(),T.oR.success("Lifetime costs reset"))},children:"Reset Stats"})]})})]})})]}),(0,a.jsxs)(eO,{open:S.dataManagement,onOpenChange:()=>I("dataManagement"),children:[(0,a.jsxs)(eB,{className:"flex items-center justify-between w-full p-3 rounded-lg hover:bg-muted/50 transition-colors",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(eL.A,{className:"h-4 w-4"}),(0,a.jsx)("h4",{className:"font-medium text-sm",children:"Data Management"})]}),(0,a.jsx)(eI.A,{className:"h-4 w-4 transition-transform duration-200 ".concat(S.dataManagement?"rotate-180":"")})]}),(0,a.jsxs)(eW,{className:"px-3 pt-2 pb-3",children:[(0,a.jsx)("p",{className:"text-xs text-muted-foreground mb-4",children:"Backup and restore your projects, conversations, and settings. Use this to migrate your data to OSWStudio or create backups."}),(0,a.jsxs)("div",{className:"space-y-3",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"text-sm font-medium",children:"Export All Data"}),(0,a.jsx)("div",{className:"text-xs text-muted-foreground",children:"Download a backup file containing all your projects and data"})]}),(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:P,disabled:v,className:"flex items-center gap-2",children:[(0,a.jsx)(N.A,{className:"h-4 w-4"}),v?"Exporting...":"Export"]})]}),(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"text-sm font-medium",children:"Import Data"}),(0,a.jsx)("div",{className:"text-xs text-muted-foreground",children:"Restore from a .osws backup file"})]}),(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:()=>{let e=document.createElement("input");e.type="file",e.accept=".osws",e.onchange=async e=>{var t,n;let a=null==(t=e.target.files)?void 0:t[0];if(a)try{y(!0),j(0),C("Validating file...");let e=await eF.validateBackupFile(a);if(!e.valid)return void T.oR.error("Invalid backup file: ".concat(e.reason));let t=confirm("Import ".concat((null==(n=e.metadata)?void 0:n.projectCount)||0," projects?\n\n")+"Choose OK to REPLACE all current data, or Cancel to MERGE with existing data.");await eF.importAllData(a,{mode:t?"replace":"merge",onProgress:(e,t)=>{j(e),C(t)}}),T.oR.success("Data imported successfully!"),setTimeout(()=>window.location.reload(),1e3)}catch(e){T.oR.error(e instanceof Error?e.message:"Import failed")}finally{y(!1),j(0),C("")}},e.click()},disabled:x,className:"flex items-center gap-2",children:[(0,a.jsx)(ed.A,{className:"h-4 w-4"}),x?"Importing...":"Import"]})]}),x&&(0,a.jsxs)("div",{className:"space-y-2",children:[(0,a.jsxs)("div",{className:"flex justify-between text-xs",children:[(0,a.jsx)("span",{children:k}),(0,a.jsxs)("span",{children:[w,"%"]})]}),(0,a.jsx)("div",{className:"w-full bg-muted rounded-full h-2",children:(0,a.jsx)("div",{className:"bg-primary h-2 rounded-full transition-all duration-300",style:{width:"".concat(w,"%")}})})]})]})]})]})]}),(0,a.jsxs)("div",{className:"flex justify-between pt-4 px-3 border-t mt-4",children:[(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(l.$,{variant:"destructive",onClick:()=>{confirm("Are you sure you want to clear all settings?")&&(eC.s.clearSettings(),r({}),T.oR.success("Settings cleared"))},children:"Clear All Settings"}),(0,a.jsxs)(l.$,{variant:"outline",onClick:()=>g(!0),children:[(0,a.jsx)(eu.A,{className:"mr-2 h-4 w-4"}),"About DeepStudio"]})]}),t&&(0,a.jsx)(l.$,{onClick:t,children:"Close"})]}),(0,a.jsx)(el,{open:h,onOpenChange:g})]})}let e_=[{id:"welcome",title:"Welcome to DeepStudio",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"Let's take a guided tour of the workspace so you can see how projects, agents, and saves all fit together."}),(0,a.jsx)("p",{children:"The tour takes under two minutes and you can skip at any time."})]}),location:"project-manager",primaryLabel:"Start tour",secondaryLabel:"Skip"},{id:"projects-overview",title:"Projects at a Glance",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"This is your project gallery. Recent work appears here with quick actions for opening, duplicating, or exporting."}),(0,a.jsx)("p",{children:"I've loaded a demo project so you can explore without setting anything up."})]}),location:"project-manager",target:'[data-tour-id="projects-list"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"create-project",title:"Creating a Project",body:(0,a.jsx)("div",{className:"space-y-2 text-sm text-muted-foreground",children:(0,a.jsx)("p",{children:"Use the New Project button to start fresh. The dialog lets you name the project and add an optional description."})}),location:"project-manager",target:'[data-tour-id="new-project-button"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"project-controls",title:"Exporting a Project",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"Click the dropdown menu on any project card to access export options. You can export as a ZIP for deployment or JSON for backup."}),(0,a.jsx)("p",{children:"Projects can also be duplicated or deleted from this menu."})]}),location:"project-manager",target:'[data-tour-id="project-export-json"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"edit-project",title:"Editing a Project",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"To get to the workspace and start editing, simply click on the project card. This will open the full development environment."}),(0,a.jsx)("p",{children:"Click Next to enter the workspace and continue the tour."})]}),location:"project-manager",target:'[data-tour-id="project-card"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"workspace-overview",title:"Workspace Layout",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"The workspace has four main areas: the assistant conversation, the virtual file explorer, your editor tabs, and the live preview."}),(0,a.jsx)("p",{children:"The VFS works like a project file tree—add HTML, CSS, JS, or assets and the agent can edit them just like local files."})]}),location:"workspace",target:'[data-tour-id="workspace-panels"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"workspace-edit",title:"See the Agent in Action",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:'I\'ll request the agent to change the color of "Our Services" button to a green accent and the agent performs the task.'}),(0,a.jsx)("p",{children:"This mimics what you will see when asking the agent to perform tasks."})]}),location:"workspace",target:'[data-tour-id="assistant-panel"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"workspace-focus",title:"Element Focus Tool",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"The crosshair tool in the preview panel lets you select and focus on specific elements in your design."}),(0,a.jsx)("p",{children:"Click it to activate element selection mode, then click any element in the preview to highlight it."})]}),location:"workspace",target:'[data-tour-id="focus-crosshair-button"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"workspace-checkpoint",title:"Checkpoints & Manual Saves",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:'The "Discard Changes" button restores to the original saved point, letting you revert any changes back to your last manual save.'}),(0,a.jsx)("p",{children:"If you like the result, use the Save button to lock it in as your manual checkpoint."})]}),location:"workspace",target:'[data-tour-id="discard-changes-button"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"clear-conversation",title:"Clear Conversation",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"The agent will have the last tasks and responses in memory. You can clear it with the trashcan button to start fresh."}),(0,a.jsx)("p",{children:"This removes the conversation history but keeps your project files intact."})]}),location:"workspace",target:'[data-tour-id="clear-chat-button"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"provider-settings",title:"Connect Your Provider",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsxs)("p",{children:["Set your API key under Settings → Provider. I recommend trying OpenRouter with the ",(0,a.jsx)("code",{children:"gpt-oss-120b"})," model, but you can use any supported provider."]}),(0,a.jsx)("p",{children:"You can return here anytime from the header menu."}),(0,a.jsx)("p",{className:"text-xs text-orange-500/90",children:"Privacy note: Remote LLM providers (OpenAI, Anthropic, etc.) will receive your code when generating. For complete privacy, use local models with Ollama or LM Studio."})]}),location:"workspace",target:'[data-tour-id="provider-settings-trigger"]',showBack:!0,primaryLabel:"Next",secondaryLabel:"Skip"},{id:"wrap-up",title:"You're Ready!",body:(0,a.jsxs)("div",{className:"space-y-2 text-sm text-muted-foreground",children:[(0,a.jsx)("p",{children:"That's the basics—prompt the agent, preview updates, and save when you're happy. You can replay this tour from the Help menu anytime."}),(0,a.jsx)("p",{children:"Have fun building! Let me know what you ship."})]}),location:"workspace",showBack:!0,primaryLabel:"Finish",secondaryLabel:"Skip"}];var e$=n(1368),eY=n(7150);function eH(e,t){return(null==t?void 0:t.aborted)?Promise.reject(Error("aborted")):new Promise((n,a)=>{let s=setTimeout(()=>{if(null==t?void 0:t.aborted)return void a(Error("aborted"));n()},e);null==t||t.addEventListener("abort",()=>{clearTimeout(s),a(Error("aborted"))},{once:!0})})}function eV(){try{return(0,e$.A)()}catch(e){return"evt-".concat(Date.now(),"-").concat(Math.random())}}function eq(e){let t=e.split("\n"),n=Math.max(0,t.findIndex(e=>e.includes("--primary"))-1);return t.slice(n,n+6).join("\n")}async function eG(e){let{delayMs:t=200,signal:n}=e;await eH(2e3,n)}async function eJ(e){let{projectId:t,delayMs:n=200,emit:a,signal:s,onWorkspaceEvent:r}=e;await o.OP.init();let i={preChangeCheckpointId:null,postChangeCheckpointId:null,originalCss:null,updatedCss:null},l=await o.OP.readFile(t,"/styles/main.css"),c="string"==typeof l.content?l.content:"";i.originalCss=c;let d=await eY.Y.createCheckpoint(t,"Tour: before button color change",{kind:"system"});i.preChangeCheckpointId=d.id;let m=async e=>{let t={...e,id:e.id||eV()};a(t),null==r||r(t),await eH(n,s)};await m({id:eV(),role:"user",content:'On the home page, change the background color of the button "Our Services" to green.'}),await m({id:eV(),role:"assistant",tone:"plan",content:"Plan:\n1. Inspect the project structure.\n2. Review the CSS variables controlling accent colors.\n3. Update the primary palette to a green tone.\n4. Verify the change in the stylesheet."}),await m({id:eV(),role:"tool",name:"shell",command:"ls -R /",output:"/\n/about.html\n/contact.html\n/index.html\n/styles\n/styles/main.css\n/scripts\n/scripts/main.js"}),await m({id:eV(),role:"assistant",tone:"info",content:"The landing page lives in /index.html and styling is centralized in /styles/main.css, so updating those CSS variables will recolor the buttons everywhere."}),await m({id:eV(),role:"tool",name:"shell",command:"cat /styles/main.css",output:eq(c)}),await m({id:eV(),role:"assistant",tone:"info",content:"The orange palette is defined by --primary and --primary-dark. I’ll replace those with green values."});let u=c.replace("--primary: #ea580c;","--primary: #22c55e;").replace("--primary-dark: #c2410c;","--primary-dark: #16a34a;");i.updatedCss=u,await m({id:eV(),role:"tool",name:"json_patch",command:"update /styles/main.css (--primary → #22c55e)",output:"Applied 2/2 operations to /styles/main.css. Updated primary palette to emerald green."}),c!==u&&(await o.OP.updateFile(t,"/styles/main.css",u),ej.$.markDirty(t),window.dispatchEvent(new CustomEvent("filesChanged")));let p=await eY.Y.createCheckpoint(t,"Tour: button color updated",{kind:"auto",baseRevisionId:d.id});return i.postChangeCheckpointId=p.id,await m({id:eV(),role:"tool",name:"shell",command:"cat /styles/main.css",output:eq(u)}),await m({id:eV(),role:"assistant",tone:"success",content:"The primary accent now uses a green palette. You can preview the change and save it if you prefer this style.",checkpointId:p.id}),i}let eK=(0,s.createContext)(null);function eZ(e){let{children:t}=e,[n,r]=(0,s.useState)("idle"),[o,i]=(0,s.useState)(0),[l,c]=(0,s.useState)(0),[d,m]=(0,s.useState)([]),[u,p]=(0,s.useState)(!1),[h,g]=(0,s.useState)([]),[v,f]=(0,s.useState)(null),[x,b]=(0,s.useState)({projectId:null,preCheckpointId:null,postCheckpointId:null,originalCss:null,updatedCss:null}),y=(0,s.useRef)(x),w=(0,s.useRef)(null),j=(0,s.useRef)(null),k=(0,s.useRef)(null),N=(0,s.useRef)(null),C=(0,s.useRef)(null),S=(0,s.useRef)(null),E=(0,s.useMemo)(()=>(function(e){if(!(e<0)&&!(e>=e_.length))return e_[e]})(o),[o]),A=(0,s.useCallback)(()=>{b({projectId:null,preCheckpointId:null,postCheckpointId:null,originalCss:null,updatedCss:null}),w.current=null,j.current=null,k.current=null,N.current=null},[]),P=(0,s.useCallback)(()=>{"running"!==n&&(r("running"),i(0),c(e=>e+1),m([]),A())},[A,n]),I=(0,s.useCallback)(e=>{S.current=e},[]);(0,s.useEffect)(()=>{y.current=x},[x]);let D=(0,s.useCallback)(function(){var e;let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"finish",n=y.current;n.projectId&&n.preCheckpointId&&n.postCheckpointId&&ej.$.runWithSuppressedDirty(n.projectId,async()=>{await eY.Y.restoreCheckpoint(n.preCheckpointId)}).then(()=>{window.dispatchEvent(new CustomEvent("filesChanged"))}).catch(e=>{console.error("[GuidedTour] Failed to restore baseline during cleanup",e)}),A(),m([]),i(0),c(e=>e+1),r("finish"===t?"completed":"idle"),eC.s.setHasSeenTour(!0),null==(e=C.current)||e.abort(),S.current=null},[A]),L=(0,s.useCallback)(()=>{D("skip")},[D]),T=(0,s.useCallback)(()=>{i(e=>{let t=e+1;return t>=e_.length?(D(),e):(c(e=>e+1),t)})},[D]),M=(0,s.useCallback)(()=>{i(e=>{let t=Math.max(0,e-1);return t!==e&&c(e=>e+1),t})},[]);(0,s.useEffect)(()=>{if("running"!==n){var e;null==(e=C.current)||e.abort(),C.current=null}},[n]),(0,s.useEffect)(()=>{var e,t,a;if("running"===n&&E){if("workspace-edit"===E.id){if(!v||w.current===l)return;w.current=l,p(!0),m([]);let t=new AbortController;return null==(e=C.current)||e.abort(),C.current=t,eJ({projectId:v,emit:e=>{m(t=>[...t,e])},onWorkspaceEvent:e=>{var t;return null==(t=S.current)?void 0:t.call(S,e)},signal:t.signal}).then(e=>{b(t=>({...t,projectId:v,preCheckpointId:e.preChangeCheckpointId,postCheckpointId:e.postChangeCheckpointId,originalCss:e.originalCss,updatedCss:e.updatedCss}))}).catch(e=>{(null==e?void 0:e.message)!=="aborted"&&console.error("[GuidedTour] Demo run failed",e)}).finally(()=>{C.current===t&&(C.current=null),p(!1)}),()=>{t.abort()}}if("workspace-focus"===E.id){if(j.current===l)return;j.current=l,p(!0);let e=new AbortController;return null==(t=C.current)||t.abort(),C.current=e,eG({signal:e.signal}).catch(e=>{(null==e?void 0:e.message)!=="aborted"&&console.error("[GuidedTour] Focus demo failed",e)}).finally(()=>{C.current===e&&(C.current=null),p(!1)}),()=>{e.abort()}}if("workspace-checkpoint"===E.id){if(!x.projectId||!x.preCheckpointId||k.current===l)return;k.current=l,p(!0),(async()=>{try{var e;await ej.$.runWithSuppressedDirty(x.projectId,async()=>{await eY.Y.restoreCheckpoint(x.preCheckpointId)}),window.dispatchEvent(new CustomEvent("filesChanged")),b(e=>({...e,postCheckpointId:null}));let t={id:"restore-".concat(Date.now()),role:"assistant",tone:"info",content:"Restored the checkpoint from before the color change so you can compare both versions."};m(e=>[...e,t]),null==(e=S.current)||e.call(S,t)}catch(e){console.error("[GuidedTour] Failed to restore checkpoint",e)}finally{p(!1)}})()}if("clear-conversation"===E.id){if(N.current===l)return;N.current=l;let e={id:"clear-conversation-".concat(Date.now()),role:"clear",action:"conversation"};null==(a=S.current)||a.call(S,e),m([]);let t={id:"clear-message-".concat(Date.now()),role:"assistant",tone:"info",content:"Conversation cleared. The agent now has a fresh start without the previous task history."};setTimeout(()=>{var e;m([t]),null==(e=S.current)||e.call(S,t),setTimeout(()=>{m([])},2e3)},100)}}},[n,E,l,v,x]),(0,s.useEffect)(()=>{if((null==E?void 0:E.id)!=="workspace-edit"){var e;null==(e=C.current)||e.abort(),C.current=null}},[E]);let z=(0,s.useMemo)(()=>({state:{status:n,stepIndex:o,stepKey:l,currentStep:E,transcript:d,isBusy:u,projectList:h},start:P,skip:L,next:T,previous:M,setProjectList:e=>{g(e)},setActiveProjectId:f,setTranscript:m,setWorkspaceHandler:I}),[n,o,l,E,d,u,h,P,L,T,M,I]);return(0,a.jsx)(eK.Provider,{value:z,children:t})}function eX(){let e=(0,s.useContext)(eK);if(!e)throw Error("useGuidedTour must be used within a GuidedTourProvider");return e}var eQ=n(1154);function e0(e){var t,n;let{location:r}=e,{state:o,next:i,previous:c,skip:d}=eX(),{status:m,currentStep:u,stepKey:p,isBusy:h,stepIndex:g}=o,[v,f]=(0,s.useState)(null),x=e_.length;(0,s.useEffect)(()=>{if("running"!==m||!u||u.location!==r)return;if(!u.target)return void f(null);let e=!1,t=u.target,n=()=>{if(e)return;let n=document.querySelectorAll(t),a=null;for(let e=0;e<n.length;e++){let t=n[e];if(t.offsetWidth>0&&t.offsetHeight>0){a=t;break}}if(a){let e=a.getBoundingClientRect();return f({top:e.top,left:e.left,width:e.width,height:e.height}),!0}return f(null),!1};n();let a=window.setInterval(()=>{n()&&window.clearInterval(a)},250);return window.addEventListener("resize",n),()=>{e=!0,window.clearInterval(a),window.removeEventListener("resize",n)}},[m,u,r,p]);let b=(0,s.useMemo)(()=>!!u&&!!h&&("workspace-edit"===u.id||"workspace-focus"===u.id||"workspace-checkpoint"===u.id),[u,h]);if("running"!==m||!u||u.location!==r)return null;let y=null!=(t=u.primaryLabel)?t:"Next",w=null!=(n=u.secondaryLabel)?n:"Skip";return(0,a.jsxs)("div",{className:"fixed inset-0 z-[2000] pointer-events-auto",children:[(0,a.jsx)("div",{className:"absolute inset-0 bg-background/30"}),v&&(0,a.jsx)("div",{className:"pointer-events-none fixed rounded-xl border-2 border-primary ring-4 ring-primary/30 transition-all animate-ring-opacity",style:{top:v.top,left:v.left,width:v.width,height:v.height}}),(0,a.jsx)("div",{className:"absolute bottom-10 left-1/2 flex w-full max-w-xl -translate-x-1/2 flex-col gap-4 px-4",children:(0,a.jsxs)("div",{className:"pointer-events-auto rounded-2xl border bg-background/95 p-6 shadow-2xl",children:[(0,a.jsxs)("div",{className:"flex items-start justify-between gap-4",children:[(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,a.jsx)("h3",{className:"text-lg font-semibold text-foreground",children:u.title}),(0,a.jsxs)("span",{className:"text-sm text-muted-foreground font-medium",children:[g+1,"/",x]})]}),(0,a.jsx)("div",{className:"mt-2 text-sm leading-relaxed text-muted-foreground",children:u.body})]}),h&&(0,a.jsx)(eQ.A,{className:"h-5 w-5 animate-spin text-primary"})]}),(0,a.jsxs)("div",{className:"mt-6 flex items-center justify-between",children:[u.showBack?(0,a.jsx)(l.$,{variant:"ghost",onClick:c,disabled:h,children:"Back"}):(0,a.jsx)("div",{}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(l.$,{variant:"ghost",onClick:d,children:w}),(0,a.jsx)(l.$,{onClick:i,disabled:b,children:y})]})]})]})})]})}function e1(e){var t;let{onProjectSelect:n}=e,m=(0,r.useRouter)(),[u,p]=(0,s.useState)([]),[h,g]=(0,s.useState)(!0),[v,x]=(0,s.useState)(""),[b,y]=(0,s.useState)(!1),[w,j]=(0,s.useState)(""),[k,N]=(0,s.useState)(""),[C,S]=(0,s.useState)("blank"),[E,A]=(0,s.useState)("updated"),[P,I]=(0,s.useState)("grid"),[D,L]=(0,s.useState)(null),[z,F]=(0,s.useState)(!1),{state:R,setProjectList:O,start:B}=eX(),W=null==(t=R.currentStep)?void 0:t.id,U="running"===R.status,[_,$]=(0,s.useState)(!1),[H,q]=(0,s.useState)(null),G=(0,s.useRef)(!1),K=(0,s.useRef)(!1),Z=(0,s.useCallback)(async()=>{if(!G.current){G.current=!0,g(!0);try{await o.OP.init();let e=(await o.OP.listProjects()).sort((e,t)=>t.updatedAt.getTime()-e.updatedAt.getTime());p(e),O(e)}catch(e){i.v.error("Failed to load projects:",e),T.oR.error("Failed to load projects")}finally{g(!1),$(!0),G.current=!1}}},[O]),ea=(0,s.useCallback)(async()=>{try{await o.OP.init();let e=(await o.OP.listProjects()).sort((e,t)=>t.updatedAt.getTime()-e.updatedAt.getTime());p(e),O(e)}catch(e){i.v.error("Failed to reload projects:",e),T.oR.error("Failed to reload projects")}},[O]),es=async()=>{if(!K.current){K.current=!0;try{let e=await o.OP.createProject("Multi-File Demo","Interactive examples showing how HTML, CSS, and JavaScript files work together");return await ek(o.OP,e.id,ey,ey.assets),T.oR.success("Demo project created successfully"),await ea(),n(e),e}catch(e){throw i.v.error("Failed to create demo project:",e),T.oR.error("Failed to create demo project"),K.current=!1,e}}},eo=async()=>{try{0===u.length&&await es(),B()}catch(e){i.v.error("Failed to prepare for tour:",e),T.oR.error("Failed to start tour - could not create demo project")}};(0,s.useEffect)(()=>{_||Z()},[]),(0,s.useEffect)(()=>{U&&"create-project"!==W&&b&&y(!1)},[U,W,b]),(0,s.useEffect)(()=>{U&&"project-controls"===W&&u.length>0?q(u[0].id):q(null)},[U,W,u]),(0,s.useEffect)(()=>{!_||0!==u.length||U||eC.s.hasSeenTour()||eo()},[_,u.length,U]);let ei=async()=>{if(!w.trim())return void T.oR.error("Please enter a project name");if(w.length>50)return void T.oR.error("Project name must be 50 characters or less");if(k.length>200)return void T.oR.error("Description must be 200 characters or less");try{let e=await o.OP.createProject(w.trim().slice(0,50),k.trim().slice(0,200)||void 0);"demo"===C?await ek(o.OP,e.id,ey,ey.assets):await ek(o.OP,e.id,ew),T.oR.success("Project created successfully"),y(!1),j(""),N(""),S("blank"),await ea(),n(e)}catch(e){i.v.error("Failed to create project:",e),T.oR.error("Failed to create project")}},ej=async e=>{if(confirm('Are you sure you want to delete "'.concat(e.name,'"? This cannot be undone.')))try{await o.OP.deleteProject(e.id),T.oR.success("Project deleted"),await ea()}catch(e){i.v.error("Failed to delete project:",e),T.oR.error("Failed to delete project")}},eS=async e=>{try{let t=await o.OP.duplicateProject(e.id);T.oR.success("Project duplicated successfully"),await ea(),n(t)}catch(e){i.v.error("Failed to duplicate project:",e),T.oR.error("Failed to duplicate project")}},eE=async e=>{try{let t=await o.OP.exportProject(e.id),n=JSON.stringify(t,null,2),a=new Blob([n],{type:"application/json"}),s=URL.createObjectURL(a),r=document.createElement("a");r.href=s,r.download="".concat(e.name.replace(/\s+/g,"-"),"-export.json"),document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(s),T.oR.success("Project exported")}catch(e){i.v.error("Failed to export project:",e),T.oR.error("Failed to export project")}},eA=async e=>{try{let t=await o.OP.exportProjectAsZip(e.id),n=URL.createObjectURL(t),a=document.createElement("a");a.href=n,a.download="".concat(e.name.replace(/\s+/g,"-"),".zip"),document.body.appendChild(a),a.click(),document.body.removeChild(a),URL.revokeObjectURL(n),T.oR.success("Project exported as ZIP")}catch(e){i.v.error("Failed to export project as ZIP:",e),T.oR.error("Failed to export project as ZIP")}},eP=async()=>{let e=document.createElement("input");e.type="file",e.accept=".json",e.onchange=async e=>{var t;let a=null==(t=e.target.files)?void 0:t[0];if(a)try{let e=await a.text(),t=JSON.parse(e);if(!t.project||!t.files)throw Error("Invalid project file");let s=await o.OP.importProject(t);T.oR.success("Project imported successfully"),await ea(),n(s)}catch(e){i.v.error("Failed to import project:",e),T.oR.error("Failed to import project")}},e.click()},eI=((e,t)=>{let n=[...e];switch(t){case"updated":return n.sort((e,t)=>t.updatedAt.getTime()-e.updatedAt.getTime());case"created":return n.sort((e,t)=>t.createdAt.getTime()-e.createdAt.getTime());case"name":return n.sort((e,t)=>e.name.localeCompare(t.name));case"size":return n.sort((e,t)=>t.updatedAt.getTime()-e.updatedAt.getTime());default:return n}})(u.filter(e=>{var t;return e.name.toLowerCase().includes(v.toLowerCase())||(null==(t=e.description)?void 0:t.toLowerCase().includes(v.toLowerCase()))}),E);if(h&&!_)return(0,a.jsx)("div",{className:"flex items-center justify-center h-screen",children:(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)("div",{className:"animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"}),(0,a.jsx)("p",{className:"mt-4",children:"Loading projects..."})]})});let eD=[{id:"new-project",label:"New Project",icon:ec.A,onClick:()=>y(!0),content:(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:()=>y(!0),"data-tour-id":"new-project-button",className:"justify-start",children:[(0,a.jsx)(ec.A,{className:"mr-2 h-4 w-4"}),"New Project"]})},{id:"import",label:"Import",icon:ed.A,onClick:eP,variant:"outline"}],eL=(0,a.jsxs)(eN.AM,{children:[(0,a.jsx)(eN.Wv,{asChild:!0,children:(0,a.jsx)(l.$,{variant:"outline",size:"icon",className:"h-8 w-8",children:(0,a.jsx)(em.A,{className:"h-4 w-4"})})}),(0,a.jsx)(eN.hl,{className:"w-96",align:"end",children:(0,a.jsx)(eU,{})})]}),eT=(0,a.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,a.jsxs)(eN.AM,{children:[(0,a.jsx)(eN.Wv,{asChild:!0,children:(0,a.jsxs)(l.$,{variant:"outline",size:"sm",className:"w-full justify-start",children:[(0,a.jsx)(em.A,{className:"mr-2 h-4 w-4"}),"Settings"]})}),(0,a.jsx)(eN.hl,{className:"w-[calc(100vw-2rem)]",align:"start",children:(0,a.jsx)(eU,{})})]}),(0,a.jsx)("div",{className:"border-t my-2"}),(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:eo,disabled:U,className:"w-full justify-start","data-tour-id":"footer-guided-tour",children:[(0,a.jsx)(eu.A,{className:"mr-2 h-4 w-4"}),"Guided Tour"]}),(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:()=>m.push("/test-generation"),className:"w-full justify-start",children:[(0,a.jsx)(ep.A,{className:"mr-2 h-4 w-4"}),"Model Tester"]}),(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:()=>F(!0),className:"w-full justify-start",children:[(0,a.jsx)(eu.A,{className:"mr-2 h-4 w-4"}),"About DeepStudio"]}),(0,a.jsx)(l.$,{variant:"outline",size:"sm",asChild:!0,className:"w-full justify-start",children:(0,a.jsxs)("a",{href:"https://github.com/o-stahl/deepstudio",target:"_blank",rel:"noopener noreferrer",children:[(0,a.jsx)(er.A,{className:"mr-2 h-4 w-4"}),"GitHub"]})})]});return(0,a.jsxs)("div",{className:"flex flex-col h-[100dvh]",style:{background:"linear-gradient(var(--project-background-tint), var(--project-background-tint)), var(--background)"},children:[(0,a.jsx)(ex.j,{onLogoClick:()=>F(!0),actions:eD,mobileMenuContent:eT,desktopOnlyContent:eL,leftText:"DeepStudio"}),(0,a.jsx)("main",{className:"flex-1 min-h-0 overflow-auto",children:(0,a.jsxs)("div",{className:"container mx-auto p-6 max-w-6xl",children:[(0,a.jsx)("div",{className:"mb-6 space-y-4",children:(0,a.jsxs)("div",{className:"flex flex-col md:flex-row gap-4","data-tour-id":"projects-actions",children:[(0,a.jsxs)("div",{className:"relative flex-1",children:[(0,a.jsx)(eh.A,{className:"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4"}),(0,a.jsx)(c.p,{placeholder:"Search projects...",value:v,onChange:e=>x(e.target.value),className:"pl-10 bg-card"})]}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsxs)(Y.l6,{value:E,onValueChange:e=>A(e),children:[(0,a.jsxs)(Y.bq,{className:"flex-1 md:w-[180px] bg-card",children:[(0,a.jsx)(eg.A,{className:"h-4 w-4 mr-2"}),(0,a.jsx)(Y.yv,{placeholder:"Sort by..."})]}),(0,a.jsxs)(Y.gC,{children:[(0,a.jsx)(Y.eb,{value:"updated",children:"Last Updated"}),(0,a.jsx)(Y.eb,{value:"created",children:"Date Created"}),(0,a.jsx)(Y.eb,{value:"name",children:"Name"})]})]}),(0,a.jsxs)("div",{className:"flex gap-0.5 border rounded-sm p-1 bg-card h-9",children:[(0,a.jsx)(l.$,{size:"icon",variant:"grid"===P?"default":"ghost",className:"h-full w-8 rounded-sm",onClick:()=>I("grid"),children:(0,a.jsx)(ev.A,{className:"h-4 w-4"})}),(0,a.jsx)(l.$,{size:"icon",variant:"list"===P?"default":"ghost",className:"h-full w-8 rounded-sm",onClick:()=>I("list"),children:(0,a.jsx)(ef.A,{className:"h-4 w-4"})})]})]})]})}),0===eI.length?(0,a.jsxs)("div",{className:"text-center py-12",children:[(0,a.jsx)(f.A,{className:"h-12 w-12 text-muted-foreground mx-auto mb-4"}),(0,a.jsx)("h2",{className:"text-xl font-semibold mb-2",children:v?"No projects found":"No projects yet"}),(0,a.jsx)("p",{className:"text-muted-foreground mb-6",children:v?"Try a different search term":"Create your first project to get started"}),!v&&(0,a.jsxs)("div",{className:"flex gap-3 justify-center",children:[(0,a.jsxs)(l.$,{onClick:()=>y(!0),children:[(0,a.jsx)(ec.A,{className:"mr-2 h-4 w-4"}),"Create Project"]}),(0,a.jsxs)(l.$,{variant:"outline",onClick:es,children:[(0,a.jsx)(f.A,{className:"mr-2 h-4 w-4"}),"Create Demo Project"]})]})]}):(0,a.jsx)("div",{className:"grid"===P?"grid gap-4 md:grid-cols-2 lg:grid-cols-3":"space-y-3","data-tour-id":"projects-list",children:eI.map(e=>"object"==typeof e&&e.id&&e.name?(0,a.jsx)(M,{project:e,onSelect:n,onDelete:ej,onExport:eE,onExportZip:eA,onDuplicate:eS,onPreview:L,onUpdate:e=>{p(u.map(t=>t.id===e.id?e:t))},viewMode:P,forceMenuOpen:H===e.id,highlightExport:U&&"project-controls"===W&&H===e.id},e.id):(i.v.error("Invalid project object:",e),null))})]})}),(0,a.jsx)("footer",{className:"hidden md:block border-t bg-card/50 py-3 px-6",children:(0,a.jsxs)("div",{className:"flex justify-center gap-2",children:[(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:eo,disabled:U,"data-tour-id":"footer-guided-tour",children:[(0,a.jsx)(eu.A,{className:"mr-2 h-4 w-4"}),"Guided Tour"]}),(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:()=>m.push("/test-generation"),children:[(0,a.jsx)(ep.A,{className:"mr-2 h-4 w-4"}),"Model Tester"]}),(0,a.jsxs)(l.$,{variant:"outline",size:"sm",onClick:()=>F(!0),children:[(0,a.jsx)(eu.A,{className:"mr-2 h-4 w-4"}),"About DeepStudio"]}),(0,a.jsx)(l.$,{variant:"outline",size:"sm",asChild:!0,children:(0,a.jsxs)("a",{href:"https://github.com/o-stahl/deepstudio",target:"_blank",rel:"noopener noreferrer",children:[(0,a.jsx)(er.A,{className:"mr-2 h-4 w-4"}),"GitHub"]})})]})}),(0,a.jsx)(J,{open:b,onOpenChange:y,children:(0,a.jsxs)(X,{children:[(0,a.jsxs)(Q,{children:[(0,a.jsx)(et,{children:"Create New Project"}),(0,a.jsx)(en,{children:"Start a new multipage website project"})]}),(0,a.jsxs)("div",{className:"space-y-4",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"flex justify-between items-center",children:[(0,a.jsx)(eb.J,{htmlFor:"name",children:"Project Name"}),(0,a.jsxs)("span",{className:"text-xs text-muted-foreground",children:[w.length,"/50"]})]}),(0,a.jsx)(c.p,{id:"name",value:w,onChange:e=>j(e.target.value.slice(0,50)),placeholder:"My Awesome Website",className:"mt-2",maxLength:50})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)(eb.J,{htmlFor:"template",children:"Template"}),(0,a.jsxs)(Y.l6,{value:C,onValueChange:e=>S(e),children:[(0,a.jsx)(Y.bq,{id:"template",className:"mt-2",children:(0,a.jsx)(Y.yv,{placeholder:"Select a template"})}),(0,a.jsxs)(Y.gC,{children:[(0,a.jsx)(Y.eb,{value:"blank",children:"Blank (HTML/CSS/JS starter)"}),(0,a.jsx)(Y.eb,{value:"demo",children:"Demo (multi-page example)"})]})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"flex justify-between items-center",children:[(0,a.jsx)(eb.J,{htmlFor:"description",children:"Description (optional)"}),(0,a.jsxs)("span",{className:"text-xs text-muted-foreground",children:[k.length,"/200"]})]}),(0,a.jsx)(d,{id:"description",value:k,onChange:e=>N(e.target.value.slice(0,200)),placeholder:"A brief description of your project",className:"mt-2 resize-none",rows:3,maxLength:200})]})]}),(0,a.jsxs)(ee,{children:[(0,a.jsx)(l.$,{variant:"outline",onClick:()=>y(!1),children:"Cancel"}),(0,a.jsx)(l.$,{onClick:ei,children:"Create Project"})]})]})}),D&&(0,a.jsx)(J,{open:!!D,onOpenChange:()=>L(null),children:(0,a.jsxs)(X,{className:"max-w-[90vw] sm:max-w-[85vw] lg:max-w-[80vw] 2xl:max-w-[1400px] max-h-[90vh] w-full h-full p-0 flex flex-col",children:[(0,a.jsx)(Q,{className:"p-4 border-b",children:(0,a.jsxs)(et,{children:["Preview: ",D.name]})}),(0,a.jsx)("div",{className:"flex-1 overflow-hidden",children:(0,a.jsx)(V,{projectId:D.id})})]})}),(0,a.jsx)(el,{open:z,onOpenChange:F}),(0,a.jsx)(e0,{location:"project-manager"})]})}var e2=n(5337),e3=n(1380),e4=n(9803),e5=n(9890),e8=n(8239),e6=n(3145),e7=n(9428);let e9=e6.bL,te=e6.l9;e6.YJ,e6.ZL,e6.Pb,e6.z6,s.forwardRef((e,t)=>{let{className:n,inset:s,children:r,...o}=e;return(0,a.jsxs)(e6.ZP,{ref:t,className:(0,i.cn)("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",s&&"pl-8",n),...o,children:[r,(0,a.jsx)(O.A,{className:"ml-auto h-4 w-4"})]})}).displayName=e6.ZP.displayName,s.forwardRef((e,t)=>{let{className:n,...s}=e;return(0,a.jsx)(e6.G5,{ref:t,className:(0,i.cn)("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",n),...s})}).displayName=e6.G5.displayName;let tt=s.forwardRef((e,t)=>{let{className:n,...s}=e;return(0,a.jsx)(e6.ZL,{children:(0,a.jsx)(e6.UC,{ref:t,className:(0,i.cn)("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",n),...s})})});tt.displayName=e6.UC.displayName;let tn=s.forwardRef((e,t)=>{let{className:n,inset:s,...r}=e;return(0,a.jsx)(e6.q7,{ref:t,className:(0,i.cn)("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",s&&"pl-8",n),...r})});function ta(e){let{projectId:t,onFileSelect:n,selectedPath:r,onClose:d}=e,[m,u]=(0,s.useState)([]),[h,v]=(0,s.useState)([]),[x,b]=(0,s.useState)(new Set(["/"])),[y,w]=(0,s.useState)(null),[j,k]=(0,s.useState)(""),[N,C]=(0,s.useState)(!1),[S,E]=(0,s.useState)(null),[A,P]=(0,s.useState)(null),I=(0,s.useRef)(null),D=(0,s.useCallback)(async()=>{try{await o.OP.init();let e=await o.OP.getAllFilesAndDirectories(t),n=e.filter(e=>"directory"!==e.type);u(n),v(L(e))}catch(e){i.v.error("Failed to load files:",e)}},[t]);(0,s.useEffect)(()=>{D();let e=()=>{D()};return window.addEventListener("filesChanged",e),()=>{window.removeEventListener("filesChanged",e)}},[t,D]);let L=e=>{let t=[],n=new Map;e.forEach(e=>{if("directory"===e.type){let t=e.path.split("/").filter(Boolean),a={path:e.path,name:e.name||t[t.length-1]||"unnamed",type:"directory",children:[]};n.set(e.path,a)}}),e.forEach(e=>{if("directory"!==e.type){let t=e.path.split("/").filter(Boolean),a="";for(let e=0;e<t.length-1;e++)if(a=a+"/"+t[e],!n.has(a)){let s={path:a,name:t[e],type:"directory",children:[]};n.set(a,s)}}}),n.forEach((e,a)=>{let s=a.split("/").filter(Boolean);if(1===s.length)t.push(e);else{let t="/"+s.slice(0,-1).join("/"),a=n.get(t);a&&a.children&&a.children.push(e)}}),e.forEach(e=>{if("directory"!==e.type){let s=e.path.split("/").filter(Boolean),r={path:e.path,name:e.name,type:"file"};if(1===s.length)t.push(r);else{let e="/"+s.slice(0,-1).join("/"),t=n.get(e);if(t){var a;null==(a=t.children)||a.push(r)}}}});let a=e=>{e.sort((e,t)=>e.type===t.type?e.name.localeCompare(t.name):"directory"===e.type?-1:1),e.forEach(e=>{e.children&&a(e.children)})};return a(t),t},M=e=>{b(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},z=async e=>{if("directory"===e.type)M(e.path);else{let t=m.find(t=>t.path===e.path);t&&n&&n(t)}},F=async function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",n=prompt("Enter file name:");if(!n)return;let a="/"===e?"/".concat(n):"".concat(e,"/").concat(n);try{await o.OP.createFile(t,a,""),await D()}catch(e){i.v.error("Failed to create file:",e)}},R=async function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",n=prompt("Enter directory name:");if(!n)return;let a="/"===e?"/".concat(n):"".concat(e,"/").concat(n);try{await o.OP.createDirectory(t,a),await D()}catch(e){i.v.error("Failed to create directory:",e)}},B=async(e,n)=>{if(confirm("Delete ".concat(n,' "').concat(e,'"?')))try{"file"===n?await o.OP.deleteFile(t,e):await o.OP.deleteDirectory(t,e),await D()}catch(e){i.v.error("Failed to delete ".concat(n,":"),e)}},W=async(e,n)=>{if(!j)return;let a=e.split("/");a[a.length-1]=j;let s=a.join("/");try{"directory"===n?await o.OP.renameDirectory(t,e,s):await o.OP.renameFile(t,e,s),await D(),w(null),k("")}catch(e){i.v.error("Failed to rename ".concat(n,":"),e)}},U=async e=>{for(let t of(e.preventDefault(),e.stopPropagation(),C(!1),Array.from(e.dataTransfer.items)))if("file"===t.kind){let e=t.getAsFile();e&&await _(e,"/")}},_=async(e,n)=>{if(!(0,e2.fu)(e.name))return void T.oR.error("File type not supported: ".concat(e.name));let a=(0,e2.Gr)(e.name),s=e2.Q6[a];if(e.size>s)return void T.oR.error("File too large: ".concat(e.name,". Maximum size is ").concat(Math.round(s/1024/1024),"MB"));let r="/"===n?"/".concat(e.name):"".concat(n,"/").concat(e.name);try{let n;n="image"===a||"video"===a||"binary"===a?await e.arrayBuffer():await e.text(),await o.OP.createFile(t,r,n),await D(),T.oR.success("Uploaded ".concat(e.name))}catch(a){var l;if(null==(l=a.message)?void 0:l.includes("already exists")){if(confirm('File "'.concat(e.name,'" already exists. Overwrite?')))try{await o.OP.deleteFile(t,r),await _(e,n)}catch(e){i.v.error("Failed to overwrite file:",e),T.oR.error("Failed to overwrite file")}}else i.v.error("Failed to upload file:",a),T.oR.error("Failed to upload ".concat(e.name,": ").concat(a.message))}},$=(e,t)=>{e.stopPropagation(),E(t),e.dataTransfer.effectAllowed="move"},Y=()=>{E(null),P(null)},H=(e,t)=>{e.preventDefault(),e.stopPropagation(),S&&t!==S.path&&(e.dataTransfer.dropEffect="move",P(t))},V=async(e,n)=>{if(e.preventDefault(),e.stopPropagation(),!S||n&&S.path===n.path)return void P(null);let a=n&&"directory"===n.type?n.path:"/";if("directory"===S.type){let e=S.path.endsWith("/")?S.path:S.path+"/";if((a.endsWith("/")?a:a+"/").startsWith(e)){T.oR.error("Cannot move a folder into itself"),P(null);return}}let s=S.name,r="/"===a?"/".concat(s):"".concat(a,"/").concat(s);try{"directory"===S.type?await o.OP.moveDirectory(t,S.path,r):await o.OP.moveFile(t,S.path,r),await D(),T.oR.success("Moved ".concat(S.name," to ").concat("/"===a?"root":a))}catch(e){i.v.error("Failed to move item:",e),T.oR.error("Failed to move: ".concat(e.message))}P(null)},q=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=x.has(e.path),s=r===e.path,o=y===e.path,l=A===e.path;return(0,a.jsxs)("div",{draggable:!o,onDragStart:t=>$(t,e),onDragEnd:Y,onDragOver:t=>"directory"===e.type&&H(t,e.path),onDrop:t=>"directory"===e.type&&V(t,e),children:[(0,a.jsxs)(e9,{children:[(0,a.jsx)(te,{children:(0,a.jsxs)("div",{className:(0,i.cn)("flex items-center gap-2 px-2 py-1.5 hover:bg-accent hover:text-accent-foreground cursor-pointer rounded-md transition-colors",s&&"bg-accent text-accent-foreground",l&&"directory"===e.type&&"bg-blue-500/20 border border-blue-500",(null==S?void 0:S.path)===e.path&&"opacity-50","group"),style:{paddingLeft:"".concat(16*t+8,"px")},onClick:()=>z(e),children:["directory"===e.type?(0,a.jsxs)(a.Fragment,{children:[n?(0,a.jsx)(eI.A,{className:"w-4 h-4 text-muted-foreground"}):(0,a.jsx)(O.A,{className:"w-4 h-4 text-muted-foreground"}),n?(0,a.jsx)(f.A,{className:"w-4 h-4 text-blue-500"}):(0,a.jsx)(e3.A,{className:"w-4 h-4 text-blue-500"})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{className:"w-4"}),(()=>{let t=(0,e2.Gr)(e.path);return"image"===t?(0,a.jsx)(p.A,{className:"w-4 h-4 text-green-500"}):"video"===t?(0,a.jsx)(e4.A,{className:"w-4 h-4 text-purple-500"}):(0,a.jsx)(e5.A,{className:"w-4 h-4 text-muted-foreground"})})()]}),o?(0,a.jsx)(c.p,{value:j,onChange:e=>k(e.target.value),onBlur:()=>W(e.path,e.type),onKeyDown:t=>{"Enter"===t.key?W(e.path,e.type):"Escape"===t.key&&(w(null),k(""))},className:"h-5 text-sm",autoFocus:!0,onClick:e=>e.stopPropagation()}):(0,a.jsx)("span",{className:"text-sm flex-1",children:e.name})]})}),(0,a.jsxs)(tt,{children:["directory"===e.type&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(tn,{onClick:()=>F(e.path),children:[(0,a.jsx)(e5.A,{className:"mr-2 h-4 w-4"}),"New File"]}),(0,a.jsxs)(tn,{onClick:()=>R(e.path),children:[(0,a.jsx)(e3.A,{className:"mr-2 h-4 w-4"}),"New Folder"]}),(0,a.jsxs)(tn,{onClick:()=>{var e;return null==(e=I.current)?void 0:e.click()},children:[(0,a.jsx)(ed.A,{className:"mr-2 h-4 w-4"}),"Upload Files"]})]}),(0,a.jsx)(tn,{onClick:()=>{w(e.path),k(e.name)},children:"Rename"}),(0,a.jsx)(tn,{onClick:()=>B(e.path,e.type),className:"text-destructive",children:"Delete"})]})]}),"directory"===e.type&&n&&e.children&&(0,a.jsx)("div",{children:e.children.map(e=>q(e,t+1))})]},e.path)};return(0,a.jsxs)("div",{className:"h-full flex flex-col",onDrop:U,onDragOver:e=>{e.preventDefault(),e.stopPropagation(),C(!0)},onDragLeave:e=>{e.preventDefault(),e.stopPropagation();let t=e.currentTarget.getBoundingClientRect(),n=e.clientX,a=e.clientY;(n<t.left||n>=t.right||a<t.top||a>=t.bottom)&&C(!1)},children:[(0,a.jsx)("input",{ref:I,type:"file",multiple:!0,className:"hidden",onChange:async e=>{for(let t of Array.from(e.target.files||[]))await _(t,"/");I.current&&(I.current.value="")}}),(0,a.jsxs)("div",{className:"p-3 border-b bg-muted/70 flex items-center justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(e8.A,{className:"h-4 w-4 md:hidden",style:{color:"var(--button-files-active)"}}),d?(0,a.jsxs)("button",{type:"button",onClick:d,"aria-label":"Hide file explorer",className:"relative hidden h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-destructive md:flex group",children:[(0,a.jsx)(e8.A,{className:"h-4 w-4 transition-opacity group-hover:opacity-0",style:{color:"var(--button-files-active)"}}),(0,a.jsx)(g.A,{className:"absolute h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100"})]}):(0,a.jsx)(e8.A,{className:"hidden h-4 w-4 md:inline-flex",style:{color:"var(--button-files-active)"}}),(0,a.jsx)("h3",{className:"text-sm font-medium",children:"File Explorer"})]}),(0,a.jsxs)("div",{className:"flex gap-1",children:[(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:()=>{var e;return null==(e=I.current)?void 0:e.click()},title:"Upload files",children:(0,a.jsx)(ed.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:()=>F("/"),title:"New file",children:(0,a.jsx)(e5.A,{className:"h-3 w-3"})}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-5 w-5",onClick:()=>R("/"),title:"New folder",children:(0,a.jsx)(e3.A,{className:"h-3 w-3"})})]})]}),(0,a.jsxs)(e9,{children:[(0,a.jsx)(te,{asChild:!0,children:(0,a.jsxs)("div",{className:(0,i.cn)("flex-1 overflow-y-auto p-3 space-y-0.5 relative",N&&"bg-blue-500/10"),onDragOver:e=>{S&&(e.preventDefault(),e.stopPropagation(),P("/"))},onDrop:e=>{S&&V(e,null)},children:[N&&(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none",children:(0,a.jsxs)("div",{className:"bg-blue-500/20 border-2 border-dashed border-blue-500 rounded-lg p-8",children:[(0,a.jsx)(ed.A,{className:"h-12 w-12 text-blue-500 mx-auto mb-2"}),(0,a.jsx)("p",{className:"text-sm text-blue-600",children:"Drop files here to upload"})]})}),0===h.length?(0,a.jsx)("div",{className:"flex-1 flex items-center justify-center py-8",children:(0,a.jsxs)("div",{className:"text-center space-y-3",children:[(0,a.jsx)(e3.A,{className:"h-12 w-12 mx-auto opacity-50 text-muted-foreground"}),(0,a.jsxs)("div",{className:"space-y-1",children:[(0,a.jsx)("p",{className:"text-base font-medium text-foreground",children:"No files yet"}),(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:"Create your first file to get started"})]})]})}):(0,a.jsx)("div",{className:"contents",children:h.map(e=>q(e))})]})}),(0,a.jsxs)(tt,{children:[(0,a.jsxs)(tn,{onClick:()=>F("/"),children:[(0,a.jsx)(e5.A,{className:"mr-2 h-4 w-4"}),"New File"]}),(0,a.jsxs)(tn,{onClick:()=>R("/"),children:[(0,a.jsx)(e3.A,{className:"mr-2 h-4 w-4"}),"New Folder"]}),(0,a.jsxs)(tn,{onClick:()=>{var e;return null==(e=I.current)?void 0:e.click()},children:[(0,a.jsx)(ed.A,{className:"mr-2 h-4 w-4"}),"Upload Files"]})]})]})]})}tn.displayName=e6.q7.displayName,s.forwardRef((e,t)=>{let{className:n,children:s,checked:r,...o}=e;return(0,a.jsxs)(e6.H_,{ref:t,className:(0,i.cn)("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",n),checked:r,...o,children:[(0,a.jsx)("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:(0,a.jsx)(e6.VF,{children:(0,a.jsx)(h.A,{className:"h-4 w-4"})})}),s]})}).displayName=e6.H_.displayName,s.forwardRef((e,t)=>{let{className:n,children:s,...r}=e;return(0,a.jsxs)(e6.hN,{ref:t,className:(0,i.cn)("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",n),...r,children:[(0,a.jsx)("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:(0,a.jsx)(e6.VF,{children:(0,a.jsx)(e7.A,{className:"h-2 w-2 fill-current"})})}),s]})}).displayName=e6.hN.displayName,s.forwardRef((e,t)=>{let{className:n,inset:s,...r}=e;return(0,a.jsx)(e6.JU,{ref:t,className:(0,i.cn)("px-2 py-1.5 text-sm font-semibold text-foreground",s&&"pl-8",n),...r})}).displayName=e6.JU.displayName,s.forwardRef((e,t)=>{let{className:n,...s}=e;return(0,a.jsx)(e6.wv,{ref:t,className:(0,i.cn)("-mx-1 my-1 h-px bg-border",n),...s})}).displayName=e6.wv.displayName;var ts=n(1364),tr=n(3417),to=n(4229),ti=n(5339);function tl(e){let{projectId:t,onFilesChange:n,onClose:r}=e,[c,d]=(0,s.useState)(new Map),[u,h]=(0,s.useState)(null),{resolvedTheme:v}=(0,eA.D)(),[f,x]=(0,s.useState)(!1);(0,s.useEffect)(()=>{x(!0)},[]),(0,s.useEffect)(()=>{let e=e=>{b(e.detail)};return window.addEventListener("openFile",e),()=>{window.removeEventListener("openFile",e)}},[t]),(0,s.useEffect)(()=>{let e=async e=>{var n;null!=(n=e.detail)&&n.fromEditor||d(e=>((async()=>{let n=new Map;for(let[a,s]of e.entries())try{await o.OP.init();let e=await o.OP.readFile(t,a);n.set(a,{file:e,content:s.modified?s.content:e.content,modified:s.modified})}catch(e){}d(n)})(),e))};return window.addEventListener("filesChanged",e),()=>{window.removeEventListener("filesChanged",e)}},[t]);let b=async e=>{if(c.has(e.path))return void h(e.path);let t={file:e,content:e.content,modified:!1};d(n=>new Map(n).set(e.path,t)),h(e.path)},y=(e,t)=>{t&&t.stopPropagation();let n=c.get(e);if((null==n||!n.modified||confirm("Close ".concat(n.file.name," without saving?")))&&(d(t=>{let n=new Map(t);return n.delete(e),n}),u===e)){let t=Array.from(c.keys()).filter(t=>t!==e);h(t.length>0?t[t.length-1]:null)}},w=(0,s.useCallback)((e,t)=>{void 0!==e&&"text"===N(t).type&&d(n=>{let a=new Map(n),s=a.get(t);return s&&a.set(t,{...s,content:e,modified:s.file.content!==e}),a})},[]),j=(0,s.useCallback)(async e=>{let n=c.get(e);if(n&&n.modified)try{await o.OP.init();let a=await o.OP.updateFile(t,e,n.content);d(t=>{let s=new Map(t);return s.set(e,{file:a,content:n.content,modified:!1}),s}),window.dispatchEvent(new CustomEvent("fileContentChanged",{detail:{path:e,projectId:t}}))}catch(e){i.v.error("Failed to save file:",e)}},[c,t]),k=(0,s.useCallback)(e=>{(e.metaKey||e.ctrlKey)&&"s"===e.key&&(e.preventDefault(),u&&j(u))},[u,j]);(0,s.useEffect)(()=>(window.addEventListener("keydown",k),()=>{window.removeEventListener("keydown",k)}),[k]);let N=e=>{var t;let n=null==(t=e.split(".").pop())?void 0:t.toLowerCase();if(["png","jpg","jpeg","gif","bmp","svg","webp"].includes(n||""))return{type:"image",language:"plaintext"};let a={js:"javascript",mjs:"javascript",ts:"typescript",tsx:"typescript",html:"html",htm:"html",css:"css",json:"json",md:"markdown",txt:"plaintext",xml:"xml",yaml:"yaml",yml:"yaml"};return a[n||""]?{type:"text",language:a[n||""]}:["zip","tar","gz","exe","bin","pdf","doc","docx","xls","xlsx","ppt","pptx"].includes(n||"")?{type:"unsupported",language:"plaintext"}:{type:"text",language:"plaintext"}},C=e=>N(e).language,S=u?c.get(u):null;return(0,a.jsxs)("div",{className:"h-full flex flex-col",children:[(0,a.jsxs)("div",{className:"p-3 border-b bg-muted/70 flex items-center justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(tr.A,{className:"h-4 w-4 md:hidden",style:{color:"var(--button-editor-active)"}}),r?(0,a.jsxs)("button",{type:"button",onClick:r,"aria-label":"Hide code editor",className:"relative hidden h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-destructive md:flex group",children:[(0,a.jsx)(tr.A,{className:"h-4 w-4 transition-opacity group-hover:opacity-0",style:{color:"var(--button-editor-active)"}}),(0,a.jsx)(g.A,{className:"absolute h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100"})]}):(0,a.jsx)(tr.A,{className:"hidden h-4 w-4 md:inline-flex",style:{color:"var(--button-editor-active)"}}),(0,a.jsx)("h3",{className:"text-sm font-medium",children:"Code Editor"})]}),(null==S?void 0:S.modified)&&"text"===N(S.file.path).type&&(0,a.jsxs)(l.$,{size:"sm",variant:"ghost",className:"h-5 px-2 gap-1.5",onClick:()=>j(u),children:[(0,a.jsx)(to.A,{className:"h-3 w-3"}),(0,a.jsx)("span",{className:"text-xs",children:"Save"})]})]}),0===c.size?(0,a.jsx)("div",{className:"flex-1 flex items-center justify-center text-muted-foreground",children:(0,a.jsxs)("div",{className:"text-center space-y-3",children:[(0,a.jsx)(m.A,{className:"h-12 w-12 mx-auto opacity-50"}),(0,a.jsxs)("div",{className:"space-y-1",children:[(0,a.jsx)("p",{className:"text-base font-medium",children:"No files open"}),(0,a.jsx)("p",{className:"text-sm",children:"Select a file from the explorer to edit"})]})]})}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"border-b bg-muted/70",children:(0,a.jsx)("div",{className:"flex items-center overflow-x-auto scrollbar-thin",children:Array.from(c.entries()).map(e=>{let[t,n]=e;return(0,a.jsxs)("div",{className:(0,i.cn)("flex items-center gap-2 px-4 py-2.5 border-r cursor-pointer transition-all relative group",u===t?"bg-background border-b-2 border-b-primary shadow-sm":"hover:bg-muted/50 border-b-2 border-b-transparent"),onClick:()=>h(t),children:[(0,a.jsxs)("span",{className:"text-sm",children:[n.file.name,n.modified&&(0,a.jsx)("span",{className:"text-orange-500 ml-1",children:"●"})]}),(0,a.jsx)(l.$,{size:"icon",variant:"ghost",className:"h-4 w-4 p-0 opacity-0 group-hover:opacity-100 transition-opacity",onClick:e=>y(t,e),children:(0,a.jsx)(g.A,{className:"h-3 w-3 hover:text-destructive"})})]},t)})})}),S&&(0,a.jsx)("div",{className:"flex-1 border-t",children:(()=>{let e=N(S.file.path);return"image"===e.type?(0,a.jsx)("div",{className:"h-full flex items-center justify-center bg-background p-8",children:(0,a.jsxs)("div",{className:"text-center space-y-4 max-w-2xl",children:[(0,a.jsx)(p.A,{className:"h-12 w-12 mx-auto text-muted-foreground"}),(0,a.jsxs)("div",{className:"space-y-2",children:[(0,a.jsx)("h3",{className:"text-lg font-medium",children:"Image Preview"}),(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:S.file.name})]}),(0,a.jsx)("div",{className:"border rounded-lg p-4 bg-muted/30 max-h-96 overflow-auto",children:(0,a.jsx)("img",{src:"data:image/".concat(S.file.path.split(".").pop(),";base64,").concat(S.content),alt:S.file.name,className:"max-w-full h-auto rounded shadow-sm",onError:e=>{var t,n;let a=e.target;if(a.style.display="none",!(null==(t=a.parentElement)?void 0:t.querySelector(".error-msg"))){let e=document.createElement("div");e.className="error-msg text-sm text-muted-foreground flex items-center gap-2",e.innerHTML='<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Unable to display image',null==(n=a.parentElement)||n.appendChild(e)}}})}),(0,a.jsx)("p",{className:"text-xs text-muted-foreground",children:"Image files cannot be edited in the text editor"})]})}):"unsupported"===e.type?(0,a.jsx)("div",{className:"h-full flex items-center justify-center bg-background p-8",children:(0,a.jsxs)("div",{className:"text-center space-y-4",children:[(0,a.jsx)(ti.A,{className:"h-12 w-12 mx-auto text-muted-foreground"}),(0,a.jsxs)("div",{className:"space-y-2",children:[(0,a.jsx)("h3",{className:"text-lg font-medium",children:"Unsupported File Type"}),(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:S.file.name}),(0,a.jsx)("p",{className:"text-sm text-muted-foreground max-w-md",children:"This file type is not supported for editing in the text editor. Binary files and certain document formats cannot be displayed here."})]})]})}):(0,a.jsx)(ts.Ay,{height:"100%",language:C(S.file.path),value:S.content,onChange:e=>w(e,S.file.path),theme:f?"dark"===v?"vs-dark":"light":"vs-dark",options:{minimap:{enabled:!1},fontSize:14,lineNumbers:"on",roundedSelection:!1,scrollBeyondLastLine:!1,automaticLayout:!0,tabSize:2,wordWrap:"on",wrappingIndent:"indent"}})})()})]})]})}function tc(e){window.dispatchEvent(new CustomEvent("openFile",{detail:e}))}var td=n(7550),tm=n(133),tu=n(1497),tp=n(2486),th=n(7863),tg=n(5040);let tv="deepstudio-cost-settings-changed";function tf(){let[e,t]=(0,s.useState)(()=>eC.s.getCostSettings());(0,s.useEffect)(()=>{let e=()=>{t(eC.s.getCostSettings())};return window.addEventListener(tv,e),()=>{window.removeEventListener(tv,e)}},[]);let n=!1!==e.showCosts;return{costSettings:e,shouldShowCosts:n}}var tx=n(86);class tb{async initDB(){if(!this.isInitialized)return new Promise((e,t)=>{let n=indexedDB.open(this.dbName,1);n.onerror=()=>{i.v.error("Failed to open conversation database"),t(n.error)},n.onsuccess=()=>{this.db=n.result,this.isInitialized=!0,e()},n.onupgradeneeded=e=>{let t=e.target.result;if(!t.objectStoreNames.contains(this.storeName)){let e=t.createObjectStore(this.storeName,{keyPath:"id"});e.createIndex("projectId","projectId",{unique:!1}),e.createIndex("lastUpdated","lastUpdated",{unique:!1})}}})}getConversationId(e){return"conv_".concat(e)}async loadConversationFromDB(e){if(await this.initDB(),!this.db)return null;let t=this.getConversationId(e);return new Promise((n,a)=>{let s=this.db.transaction([this.storeName],"readonly").objectStore(this.storeName).get(t);s.onsuccess=()=>{let t=s.result;if(t){let a={id:t.id,projectId:t.projectId,messages:t.messages||[],lastUpdated:t.lastUpdated,version:t.version||1};this.conversationBreaks.set(e,t.breaks||[]),n(a)}else n(null)},s.onerror=()=>{i.v.error("Failed to load conversation from DB"),a(s.error)}})}async saveConversationToDB(e){if(await this.initDB(),!this.db)return;let t=this.conversationBreaks.get(e.projectId)||[],n={id:e.id,projectId:e.projectId,messages:e.messages,lastUpdated:e.lastUpdated,version:e.version,breaks:t};return new Promise((e,t)=>{let a=this.db.transaction([this.storeName],"readwrite").objectStore(this.storeName).put(n);a.onsuccess=()=>e(),a.onerror=()=>{i.v.error("Failed to save conversation to DB"),t(a.error)}})}async deleteConversationFromDB(e){if(await this.initDB(),!this.db)return;let t=this.getConversationId(e);return new Promise((e,n)=>{let a=this.db.transaction([this.storeName],"readwrite").objectStore(this.storeName).delete(t);a.onsuccess=()=>e(),a.onerror=()=>{i.v.error("Failed to delete conversation from DB"),n(a.error)}})}async getConversation(e){let t=this.conversations.get(e);if(!t){let n=await this.loadConversationFromDB(e);t=n||{id:this.getConversationId(e),projectId:e,messages:[],lastUpdated:new Date().toISOString(),version:1},this.conversations.set(e,t)}return t}async updateConversation(e,t){let n=await this.getConversation(e);n.messages=[...t],n.lastUpdated=new Date().toISOString(),n.version+=1,this.conversations.set(e,n),await this.saveConversationToDB(n),i.v.debug("[ConversationState] Updated conversation for project ".concat(e," with ").concat(t.length," messages"))}async clearConversation(e){let t=await this.getConversation(e);await this.recordConversationBreak(e,{type:"clear",timestamp:new Date().toISOString(),description:"User cleared chat"}),t.messages=[],t.lastUpdated=new Date().toISOString(),t.version+=1,this.conversations.set(e,t),await this.saveConversationToDB(t),i.v.debug("[ConversationState] Cleared conversation for project ".concat(e))}async recordConversationBreak(e,t){let n=this.conversationBreaks.get(e)||[];n.push(t),n.length>20&&(n=n.slice(-20)),this.conversationBreaks.set(e,n);let a=this.conversations.get(e);a&&await this.saveConversationToDB(a),i.v.debug("[ConversationState] Recorded conversation break for project ".concat(e,":"),t.type)}getRecentBreaks(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;return(this.conversationBreaks.get(e)||[]).slice(-t)}async addBreakContextMessage(e,t){let n,a=await this.getConversation(e);switch(t.type){case"checkpoint_restore":n='[Context: Project was restored to checkpoint "'.concat(t.description||"previous state",'" at ').concat(new Date(t.timestamp).toLocaleTimeString(),"]");break;case"retry":n="[Context: Retrying previous request after restoring to checkpoint at ".concat(new Date(t.timestamp).toLocaleTimeString(),"]");break;case"page_refresh":n="[Context: Session resumed after page refresh at ".concat(new Date(t.timestamp).toLocaleTimeString(),"]");break;case"manual_save":n="[Context: Project saved manually at ".concat(new Date(t.timestamp).toLocaleTimeString()).concat(t.description?" (".concat(t.description,")"):"","]");break;default:return}let s={role:"system",content:n};a.messages.push(s),await this.updateConversation(e,a.messages)}async getConversationMessages(e,t){let n=await this.getConversation(e);if(!t||n.messages.length<=t)return[...n.messages];let a=[...n.messages],s=a.filter(e=>"system"===e.role),r=a.filter(e=>"system"!==e.role).slice(-(t-s.length));return[...s,...r]}async deleteProject(e){this.conversations.delete(e),this.conversationBreaks.delete(e),await this.deleteConversationFromDB(e),i.v.debug("[ConversationState] Deleted all conversation data for project ".concat(e))}async getConversationStats(e){let t=await this.getConversation(e),n=this.conversationBreaks.get(e)||[];return{messageCount:t.messages.length,lastUpdated:t.lastUpdated,breaks:n.length,version:t.version}}constructor(){this.conversations=new Map,this.conversationBreaks=new Map,this.dbName="DeepStudioConversations",this.storeName="conversations",this.db=null,this.isInitialized=!1}}let ty=new tb;class tw{static convertToOrchestratorMessages(e){let t=[];for(let n of e)if(!n.isTask){if("user"===n.role)t.push({role:"user",content:n.content||""});else if("assistant"===n.role){let e={role:"assistant",content:n.content||""};if(n.toolCalls&&n.toolCalls.length>0&&(e.tool_calls=n.toolCalls),n.toolMessages&&!e.tool_calls){let t=[];for(let e of n.toolMessages)"tool"===e.type&&e.name&&t.push({id:e.id||"tool_".concat(t.length),type:"function",function:{name:e.name,arguments:JSON.stringify(e.parameters||{})}});t.length>0&&(e.tool_calls=t)}if((n.checkpointId||n.cost||n.usage||n.toolMessages)&&(e.ui_metadata={},n.checkpointId&&(e.ui_metadata.checkpointId=n.checkpointId),n.cost&&(e.ui_metadata.cost=n.cost),n.usage&&(e.ui_metadata.usage=n.usage),n.toolMessages&&(e.ui_metadata.toolMessages=n.toolMessages)),n.toolMessages){let t=n.toolMessages,a=[];for(let e of t)"message"===e.type&&e.content&&a.push(e.content);if(a.length>0){let t=[e.content,...a].filter(e=>e&&e.trim()).join("\n\n");e.content=t}}if(t.push(e),n.toolMessages){let e=n.toolMessages;for(let n=0;n<e.length;n++){let a=e[n];if("tool"===a.type&&void 0!==a.result&&null!==a.result){let e=a.id||"tool_".concat(n);t.push({role:"tool",tool_call_id:e,content:"string"==typeof a.result?a.result:JSON.stringify(a.result)})}}}}}return t}static convertToUIMessages(e){let t=[],n=0,a=e=>"".concat(e,"_recovered_").concat(n++);for(let n=0;n<e.length;n++){let o=e[n];if("system"!==o.role&&"tool"!==o.role){if("user"===o.role)t.push({id:a("user"),role:"user",content:o.content});else if("assistant"===o.role){let i={id:a("assistant"),role:"assistant",content:o.content||""};if(o.ui_metadata&&(o.ui_metadata.checkpointId&&(i.checkpointId=o.ui_metadata.checkpointId),o.ui_metadata.cost&&(i.cost=o.ui_metadata.cost),o.ui_metadata.usage&&(i.usage=o.ui_metadata.usage),o.ui_metadata.toolMessages)){i.toolMessages=o.ui_metadata.toolMessages;let e=[];for(let t of o.ui_metadata.toolMessages)"tool"===t.type&&t.name&&e.push({id:t.id,type:"function",function:{name:t.name,arguments:JSON.stringify(t.parameters||{})}});e.length>0&&(i.toolCalls=e)}if(!i.toolMessages&&o.tool_calls&&o.tool_calls.length>0){let t=[];for(let i of(o.content&&o.content.trim()&&t.push({id:a("msg"),type:"message",content:o.content}),o.tool_calls)){var s,r;let o=i.id||a("tool"),l={};if(null==(s=i.function)?void 0:s.arguments)try{l=JSON.parse(i.function.arguments)}catch(e){l={arguments:i.function.arguments}}let c=null;for(let t=n+1;t<e.length;t++){let n=e[t];if("tool"===n.role&&n.tool_call_id===i.id){c=n.content;break}if("user"===n.role||"assistant"===n.role)break}t.push({id:o,type:"tool",name:(null==(r=i.function)?void 0:r.name)||i.type||"unknown",parameters:l,result:c,status:"completed"})}t.length>0&&(i.toolMessages=t),i.toolCalls=o.tool_calls}t.push(i)}}}return i.v.debug("[ConversationConverter] Converted ".concat(e.length," orchestrator messages to ").concat(t.length," UI messages")),t}static truncateConversation(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:50;if(e.length<=t)return e;let n=e.filter(e=>"system"===e.role),a=e.filter(e=>"system"!==e.role),s=t-n.length;return s<=0?n:[...n,...a.slice(-s)]}static createContextMessage(e,t){return{role:"system",content:"[Context: ".concat(t,"]")}}static prepareConversationForOrchestrator(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.convertToOrchestratorMessages(e);return t.includeSystemPrompt&&t.systemPrompt&&(n.some(e=>"system"===e.role)||n.unshift({role:"system",content:t.systemPrompt})),t.maxMessages&&(n=this.truncateConversation(n,t.maxMessages)),i.v.debug("[ConversationConverter] Prepared ".concat(n.length," messages for orchestrator")),n}}var tj=n(1052),tk=n(8021),tN=n(1729);let tC=e=>{let{className:t,...n}=e;return(0,a.jsx)(tN.YZ,{className:(0,i.cn)("flex h-full w-full data-[panel-group-direction=vertical]:flex-col",t),...n})},tS=tN.Zk,tE=e=>{let{withHandle:t,className:n,...s}=e;return(0,a.jsx)(tN.TW,{className:(0,i.cn)("group relative flex w-2 mx-1 items-center justify-center bg-transparent hover:bg-border/50 transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-4 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-2 data-[panel-group-direction=vertical]:my-1 data-[panel-group-direction=vertical]:mx-0 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-4 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 cursor-col-resize data-[panel-group-direction=vertical]:cursor-row-resize",n),...s,children:t&&(0,a.jsx)("div",{className:"z-10 flex h-12 w-1 items-center justify-center rounded-full bg-border/30 hover:bg-border/50 transition-colors opacity-0 group-hover:opacity-100",children:(0,a.jsx)(tk.A,{className:"h-3 w-3 text-muted-foreground/50"})})})};var tA=n(9613);function tP(e){let{delayDuration:t=0,...n}=e;return(0,a.jsx)(tA.Kq,{"data-slot":"tooltip-provider",delayDuration:t,...n})}function tI(e){let{...t}=e;return(0,a.jsx)(tP,{children:(0,a.jsx)(tA.bL,{"data-slot":"tooltip",...t})})}function tD(e){let{...t}=e;return(0,a.jsx)(tA.l9,{"data-slot":"tooltip-trigger",...t})}function tL(e){let{className:t,sideOffset:n=0,children:s,arrowStyle:r,...o}=e;return(0,a.jsx)(tA.ZL,{children:(0,a.jsxs)(tA.UC,{"data-slot":"tooltip-content",sideOffset:n,className:(0,i.cn)("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",t),...o,children:[s,(0,a.jsx)(tA.i3,{className:"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",style:r})]})})}var tT=n(4186);let tM={pending:(0,a.jsx)(tT.A,{className:"h-4 w-4 text-muted-foreground"}),in_progress:(0,a.jsx)(eQ.A,{className:"h-4 w-4 text-blue-500 animate-spin"}),success:(0,a.jsx)(h.A,{className:"h-4 w-4 text-green-500"}),failed:(0,a.jsx)(g.A,{className:"h-4 w-4 text-red-500"}),skipped:(0,a.jsx)("span",{className:"text-muted-foreground",children:"⊘"})},tz={pending:"text-muted-foreground",in_progress:"text-blue-500",success:"text-green-500",failed:"text-red-500",skipped:"text-gray-400"};function tF(e){let{title:t,steps:n,checkpointId:s,onRestore:r,isSavedCheckpoint:o,expanded:c=!0,onToggleExpand:d}=e,m=n.filter(e=>"success"===e.status).length,u=n.filter(e=>"failed"===e.status).length,p=n.some(e=>"in_progress"===e.status),v=n.every(e=>"pending"!==e.status&&"in_progress"!==e.status),f=s&&v?(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2",children:[(0,a.jsx)(es.E,{variant:o?"default":"outline",className:"h-6 px-2 text-xs",children:o?"Saved version":"Checkpoint"}),r&&(0,a.jsxs)(l.$,{size:"sm",variant:"ghost",onClick:()=>r(s),className:"h-6 px-2 text-xs",title:"Restore to this checkpoint",children:[(0,a.jsx)(tm.A,{className:"h-3 w-3 mr-1"}),"Restore"]})]}):null;return(0,a.jsxs)("div",{className:"space-y-2",children:[(0,a.jsx)("div",{className:"flex items-start justify-between",children:(0,a.jsxs)("div",{className:"flex items-start gap-2 flex-1",children:[(0,a.jsx)("button",{onClick:d,className:"mt-0.5 hover:bg-muted rounded p-0.5","aria-label":c?"Collapse":"Expand",children:c?(0,a.jsx)(eI.A,{className:"h-4 w-4"}):(0,a.jsx)(O.A,{className:"h-4 w-4"})}),(0,a.jsxs)("div",{className:"flex-1 space-y-1",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:"font-medium",children:t}),p&&(0,a.jsx)("span",{className:"text-xs text-blue-500 animate-pulse",children:"In Progress..."}),v&&(0,a.jsx)("span",{className:(0,i.cn)("text-xs",0===u?"text-green-500":"text-orange-500"),children:0===u?"✓ Complete":"⚠ ".concat(m,"/").concat(n.length," succeeded")})]}),!c&&n.length>0&&(0,a.jsxs)("div",{className:"flex items-center gap-3 text-xs text-muted-foreground",children:[(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(h.A,{className:"h-3 w-3 text-green-500"}),m]}),u>0&&(0,a.jsxs)("span",{className:"flex items-center gap-1",children:[(0,a.jsx)(g.A,{className:"h-3 w-3 text-red-500"}),u]}),(0,a.jsxs)("span",{children:[n.length," total"]})]})]})]})}),c&&n.length>0&&(0,a.jsx)("div",{className:"ml-6 space-y-1 text-sm",children:n.map(e=>(0,a.jsxs)("div",{className:(0,i.cn)("flex items-start gap-2 py-1",tz[e.status]),children:[(0,a.jsx)("span",{className:"mt-0.5",children:tM[e.status]}),(0,a.jsxs)("div",{className:"flex-1 space-y-0.5",children:[(0,a.jsx)("div",{children:e.description}),e.error&&(0,a.jsxs)("div",{className:"text-xs text-red-400 ml-6",children:["Error: ",e.error]})]})]},e.id))}),f&&(0,a.jsx)("div",{className:"ml-6",children:f})]})}var tR=n(646),tO=n(4861),tB=n(8200),tW=n(1539),tU=n(792);function t_(e){let{content:t,className:n}=e;return(0,a.jsx)("div",{className:(0,i.cn)("prose prose-sm dark:prose-invert max-w-none",n),children:(0,a.jsx)(tU.oz,{components:{h1:e=>{let{children:t}=e;return(0,a.jsx)("h1",{className:"text-xl font-bold mb-2 mt-4",children:t})},h2:e=>{let{children:t}=e;return(0,a.jsx)("h2",{className:"text-lg font-semibold mb-2 mt-3",children:t})},h3:e=>{let{children:t}=e;return(0,a.jsx)("h3",{className:"text-base font-semibold mb-1 mt-2",children:t})},h4:e=>{let{children:t}=e;return(0,a.jsx)("h4",{className:"text-sm font-semibold mb-1 mt-2",children:t})},p:e=>{let{children:t}=e;return(0,a.jsx)("p",{className:"mb-2 last:mb-0",children:t})},ul:e=>{let{children:t}=e;return(0,a.jsx)("ul",{className:"list-disc pl-5 mb-2 space-y-0.5",children:t})},ol:e=>{let{children:t}=e;return(0,a.jsx)("ol",{className:"list-decimal pl-5 mb-2 space-y-0.5",children:t})},li:e=>{let{children:t}=e;return(0,a.jsx)("li",{className:"text-sm",children:t})},code:e=>{let{className:t,children:n,...s}=e;return/language-(\w+)/.exec(t||"")?(0,a.jsx)("pre",{className:"p-3 rounded-md bg-muted overflow-x-auto mb-2",children:(0,a.jsx)("code",{className:"font-mono text-xs",children:n})}):(0,a.jsx)("code",{className:"px-1.5 py-0.5 rounded bg-muted font-mono text-xs",...s,children:n})},blockquote:e=>{let{children:t}=e;return(0,a.jsx)("blockquote",{className:"border-l-2 border-muted-foreground/30 pl-3 py-0.5 mb-2 italic text-muted-foreground",children:t})},a:e=>{let{href:t,children:n}=e;return(0,a.jsx)("a",{href:t,className:"text-primary hover:underline",target:"_blank",rel:"noopener noreferrer",children:n})},strong:e=>{let{children:t}=e;return(0,a.jsx)("strong",{className:"font-semibold",children:t})},em:e=>{let{children:t}=e;return(0,a.jsx)("em",{className:"italic",children:t})},hr:()=>(0,a.jsx)("hr",{className:"my-3 border-muted"}),table:e=>{let{children:t}=e;return(0,a.jsx)("div",{className:"overflow-x-auto mb-2",children:(0,a.jsx)("table",{className:"min-w-full divide-y divide-muted",children:t})})},thead:e=>{let{children:t}=e;return(0,a.jsx)("thead",{className:"bg-muted/30",children:t})},tbody:e=>{let{children:t}=e;return(0,a.jsx)("tbody",{className:"divide-y divide-muted",children:t})},tr:e=>{let{children:t}=e;return(0,a.jsx)("tr",{children:t})},th:e=>{let{children:t}=e;return(0,a.jsx)("th",{className:"px-2 py-1 text-left text-xs font-medium",children:t})},td:e=>{let{children:t}=e;return(0,a.jsx)("td",{className:"px-2 py-1 text-xs",children:t})}},children:t})})}let t$={shell:(0,a.jsx)(O.A,{className:"h-3 w-3 text-blue-500"}),json_patch:(0,a.jsx)(m.A,{className:"h-3 w-3 text-orange-500"}),evaluation:(0,a.jsx)(tR.A,{className:"h-3 w-3 text-orange-500"}),complete_task:(0,a.jsx)(tR.A,{className:"h-3 w-3 text-green-500"})},tY={pending:(0,a.jsx)(eQ.A,{className:"h-3 w-3 animate-spin text-gray-400"}),executing:(0,a.jsx)(eQ.A,{className:"h-3 w-3 animate-spin text-blue-500"}),completed:(0,a.jsx)(tR.A,{className:"h-3 w-3 text-green-500"}),failed:(0,a.jsx)(tO.A,{className:"h-3 w-3 text-red-500"})};function tH(e){let{content:t,toolCalls:n=[],toolMessages:r,checkpointId:o,onRestore:c,onRetry:d,isSavedCheckpoint:m,isExecuting:u=!1,className:p,cost:h,usage:g}=e,[v,f]=s.useState(new Set),[x,y]=s.useState(!1),{shouldShowCosts:w}=tf(),j=!!(t&&""!==t.trim()),k=e=>{let t=new Set(v);t.has(e)?t.delete(e):t.add(e),f(t)},N=o&&(c||d)&&!u?(0,a.jsxs)("div",{className:"pt-2 flex flex-wrap items-center gap-2","data-tour-id":"checkpoint-actions",children:[(0,a.jsx)(es.E,{variant:m?"default":"outline",className:"h-6 px-2 text-xs",children:m?"Saved version":"Checkpoint"}),c&&(0,a.jsxs)(l.$,{size:"sm",variant:"ghost",onClick:()=>c(o),className:"h-7 text-xs","data-tour-id":"checkpoint-restore-button",children:[(0,a.jsx)(tm.A,{className:"h-3 w-3 mr-1"}),"Restore"]}),d&&(0,a.jsxs)(l.$,{size:"sm",variant:"ghost",onClick:()=>d(o),className:"h-7 text-xs","data-tour-id":"checkpoint-retry-button",children:[(0,a.jsx)(tB.A,{className:"h-3 w-3 mr-1"}),"Retry"]})]}):null;return r&&r.length>0?(0,a.jsxs)("div",{className:(0,i.cn)("space-y-2",p),children:[j&&(0,a.jsx)("div",{className:"text-sm text-foreground/90",children:(0,a.jsx)(t_,{content:null!=t?t:""})}),w&&(void 0!==h||g)&&(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2 mb-2",children:[void 0!==h&&(0,a.jsxs)(es.E,{variant:"secondary",className:"text-xs cursor-pointer",onClick:()=>y(!x),children:[(0,a.jsx)(b.A,{className:"h-3 w-3 mr-1"}),eT.U.formatCost(h)]}),g&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(es.E,{variant:"outline",className:"text-xs",children:[(0,a.jsx)(tW.A,{className:"h-3 w-3 mr-1"}),g.totalTokens.toLocaleString()," tokens"]}),g.provider&&(0,a.jsxs)(es.E,{variant:"outline",className:"text-xs",children:[g.provider,g.model&&" / ".concat(g.model.split("/").pop())]})]}),x&&g&&(0,a.jsxs)("div",{className:"w-full mt-2 p-2 bg-muted/30 rounded text-xs space-y-1",children:[(0,a.jsxs)("div",{children:["Input: ",g.promptTokens.toLocaleString()," tokens"]}),(0,a.jsxs)("div",{children:["Output: ",g.completionTokens.toLocaleString()," tokens"]}),(0,a.jsxs)("div",{children:["Total: ",g.totalTokens.toLocaleString()," tokens"]}),void 0!==h&&(0,a.jsxs)("div",{className:"font-medium",children:["Cost: ",eT.U.formatCost(h)]})]})]}),r.map(e=>{var t,n,s,r,o,l,c,d,m,u,p,h,g;return"message"===e.type?(0,a.jsx)("div",{className:"text-sm text-foreground/90 bg-muted/20 px-3 py-2 rounded",children:(0,a.jsx)(t_,{content:e.content||""})},e.id):"divider"===e.type?(0,a.jsxs)("div",{className:"flex items-center gap-2 my-2",children:[(0,a.jsx)("div",{className:"flex-1 h-px bg-border"}),(0,a.jsx)("div",{className:"text-[10px] uppercase tracking-wider text-muted-foreground whitespace-nowrap",children:e.title||"Section"}),(0,a.jsx)("div",{className:"flex-1 h-px bg-border"})]},e.id):(0,a.jsxs)("div",{className:(0,i.cn)("bg-muted/30 rounded-md transition-all",v.has(e.id)?"p-2":"p-1.5"),children:[(0,a.jsxs)("button",{onClick:()=>k(e.id),className:"flex items-center gap-2 w-full text-left hover:bg-muted/50 rounded px-1",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1.5",children:["evaluation"===e.name?(null==(t=e.parameters)?void 0:t.goal_achieved)?(0,a.jsx)(tR.A,{className:"h-3 w-3 text-green-500"}):(0,a.jsx)(tO.A,{className:"h-3 w-3 text-red-500"}):e.name&&t$[""===e.name&&(null==(n=e.parameters)?void 0:n.tool)||e.name]||(0,a.jsx)(O.A,{className:"h-3 w-3"}),(0,a.jsx)("span",{className:"text-xs font-mono",children:"shell"===e.name&&(null==(r=e.parameters)||null==(s=r.cmd)?void 0:s[0])?e.parameters.cmd[0]:""===e.name&&(null==(o=e.parameters)?void 0:o.tool)||e.name})]}),"shell"===e.name&&(null==(l=e.parameters)?void 0:l.cmd)?(0,a.jsx)("code",{className:"text-xs text-muted-foreground",children:(()=>{let t=e.parameters.cmd;if(Array.isArray(t)){let e=t.slice(1).join(" ");return e.substring(0,50)+(e.length>50?"...":"")}return"string"==typeof t?t.substring(0,50)+(t.length>50?"...":""):JSON.stringify(t).substring(0,50)})()}):((null==(c=e.parameters)?void 0:c.path)||(null==(d=e.parameters)?void 0:d.file_path))&&(0,a.jsx)("code",{className:"text-xs text-muted-foreground",children:e.parameters.path||e.parameters.file_path}),(0,a.jsx)("div",{className:"ml-auto",children:tY[e.status||"completed"]})]}),"complete_task"===e.name&&(null==(m=e.parameters)?void 0:m.summary)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsx)("span",{className:"text-xs text-green-600 dark:text-green-400",children:e.parameters.summary})}),""===e.name&&(null==(u=e.parameters)?void 0:u.description)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsx)("span",{className:"text-xs text-muted-foreground",children:e.parameters.description})}),"evaluation"===e.name&&e.parameters&&(0,a.jsxs)("div",{className:"px-2 py-1 mt-1 space-y-2",children:[(0,a.jsx)("div",{className:"text-xs text-muted-foreground",children:e.parameters.reasoning}),(0,a.jsxs)("div",{className:"flex items-center gap-3 text-xs",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[e.parameters.goal_achieved?(0,a.jsx)(tR.A,{className:"h-3 w-3 text-green-500"}):(0,a.jsx)(tO.A,{className:"h-3 w-3 text-red-500"}),(0,a.jsx)("span",{className:e.parameters.goal_achieved?"text-green-600 dark:text-green-400":"text-red-600 dark:text-red-400",children:e.parameters.goal_achieved?"Goal achieved":"Goal not achieved"})]}),!e.parameters.should_continue&&(0,a.jsxs)("div",{className:"flex items-center gap-1 text-muted-foreground",children:[(0,a.jsx)("span",{children:"•"}),(0,a.jsx)("span",{children:"Stopping"})]})]})]}),(null==(p=e.result)?void 0:p.error)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsxs)("span",{className:"text-xs text-red-500",children:["Error: ",e.result.error]})}),"shell"===e.name&&(null==(h=e.result)?void 0:h.success)===!1&&(null==(g=e.result)?void 0:g.stderr)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsx)("span",{className:"text-xs text-red-500",children:e.result.stderr})}),v.has(e.id)&&(0,a.jsxs)("div",{className:"mt-2 pl-5 space-y-1 text-xs",children:[e.parameters&&Object.keys(e.parameters).length>0&&(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-muted-foreground",children:"Parameters:"}),(0,a.jsx)("pre",{className:"mt-1 p-2 bg-muted/50 rounded overflow-x-auto",children:JSON.stringify(e.parameters,null,2)})]}),e.result&&(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-muted-foreground",children:"Result:"}),(0,a.jsx)("pre",{className:"mt-1 p-2 bg-muted/50 rounded overflow-x-auto max-h-32",children:"string"==typeof e.result?e.result:JSON.stringify(e.result,null,2)})]})]})]},e.id)}),N]}):(0,a.jsxs)("div",{className:(0,i.cn)("space-y-2",p),children:[j&&(0,a.jsx)("div",{className:"text-sm text-foreground/90",children:(0,a.jsx)(t_,{content:null!=t?t:""})}),w&&(void 0!==h||g)&&(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2 mt-2",children:[void 0!==h&&(0,a.jsxs)(es.E,{variant:"secondary",className:"text-xs cursor-pointer",onClick:()=>y(!x),children:[(0,a.jsx)(b.A,{className:"h-3 w-3 mr-1"}),eT.U.formatCost(h)]}),g&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(es.E,{variant:"outline",className:"text-xs",children:[(0,a.jsx)(tW.A,{className:"h-3 w-3 mr-1"}),g.totalTokens.toLocaleString()," tokens"]}),g.provider&&(0,a.jsxs)(es.E,{variant:"outline",className:"text-xs",children:[g.provider,g.model&&" / ".concat(g.model.split("/").pop())]})]}),x&&g&&(0,a.jsxs)("div",{className:"w-full mt-2 p-2 bg-muted/30 rounded text-xs space-y-1",children:[(0,a.jsxs)("div",{children:["Input: ",g.promptTokens.toLocaleString()," tokens"]}),(0,a.jsxs)("div",{children:["Output: ",g.completionTokens.toLocaleString()," tokens"]}),(0,a.jsxs)("div",{children:["Total: ",g.totalTokens.toLocaleString()," tokens"]}),void 0!==h&&(0,a.jsxs)("div",{className:"font-medium",children:["Cost: ",eT.U.formatCost(h)]})]})]}),n.length>0&&(0,a.jsx)("div",{className:"space-y-1",children:n.map((e,t)=>{var n,s,r,o,l,c,d,m,u,p,h,g,f;return(0,a.jsxs)("div",{className:(0,i.cn)("bg-muted/30 rounded-md transition-all",v.has(String(t))?"p-2":"p-1.5"),children:[(0,a.jsxs)("button",{onClick:()=>k(String(t)),className:"flex items-center gap-2 w-full text-left hover:bg-muted/50 rounded px-1",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1.5",children:["evaluation"===e.name?(null==(n=e.parameters)?void 0:n.goal_achieved)?(0,a.jsx)(tR.A,{className:"h-3 w-3 text-green-500"}):(0,a.jsx)(tO.A,{className:"h-3 w-3 text-red-500"}):e.name&&t$[""===e.name&&(null==(s=e.parameters)?void 0:s.tool)||e.name]||(0,a.jsx)(O.A,{className:"h-3 w-3"}),(0,a.jsx)("span",{className:"text-xs font-mono",children:"shell"===e.name&&(null==(o=e.parameters)||null==(r=o.cmd)?void 0:r[0])?e.parameters.cmd[0]:""===e.name&&(null==(l=e.parameters)?void 0:l.tool)||e.name})]}),"shell"===e.name&&(null==(c=e.parameters)?void 0:c.cmd)?(0,a.jsx)("code",{className:"text-xs text-muted-foreground",children:(()=>{let t=e.parameters.cmd;if(Array.isArray(t)){let e=t.slice(1).join(" ");return e.substring(0,50)+(e.length>50?"...":"")}return"string"==typeof t?t.substring(0,50)+(t.length>50?"...":""):JSON.stringify(t).substring(0,50)})()}):((null==(d=e.parameters)?void 0:d.path)||(null==(m=e.parameters)?void 0:m.file_path))&&(0,a.jsx)("code",{className:"text-xs text-muted-foreground",children:e.parameters.path||e.parameters.file_path}),(0,a.jsx)("div",{className:"ml-auto",children:tY[e.status||"completed"]})]}),"complete_task"===e.name&&(null==(u=e.parameters)?void 0:u.summary)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsx)("span",{className:"text-xs text-green-600 dark:text-green-400",children:e.parameters.summary})}),""===e.name&&(null==(p=e.parameters)?void 0:p.description)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsx)("span",{className:"text-xs text-muted-foreground",children:e.parameters.description})}),(null==(h=e.result)?void 0:h.error)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsxs)("span",{className:"text-xs text-red-500",children:["Error: ",e.result.error]})}),"shell"===e.name&&(null==(g=e.result)?void 0:g.success)===!1&&(null==(f=e.result)?void 0:f.stderr)&&(0,a.jsx)("div",{className:"px-2 py-1 mt-1",children:(0,a.jsx)("span",{className:"text-xs text-red-500",children:e.result.stderr})}),v.has(String(t))&&(0,a.jsxs)("div",{className:"mt-2 pl-5 space-y-1 text-xs",children:[e.parameters&&Object.keys(e.parameters).length>0&&(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-muted-foreground",children:"Parameters:"}),(0,a.jsx)("pre",{className:"mt-1 p-2 bg-muted/50 rounded overflow-x-auto",children:JSON.stringify(e.parameters,null,2)})]}),e.result&&(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-muted-foreground",children:"Result:"}),(0,a.jsx)("pre",{className:"mt-1 p-2 bg-muted/50 rounded overflow-x-auto max-h-32",children:"string"==typeof e.result?e.result:JSON.stringify(e.result,null,2)})]})]})]},t)})}),N]})}var tV=n(7250);function tq(e){var t,n,r;let{project:c,onBack:m}=e,[u,p]=(0,s.useState)(0),[h,v]=(0,s.useState)(""),[f,x]=(0,s.useState)(!1),[b,y]=(0,s.useState)(null),[j,k]=(0,s.useState)([]),[N,S]=(0,s.useState)("preview"),[E,A]=(0,s.useState)(!1),[P,I]=(0,s.useState)(!1),[D,L]=(0,s.useState)(null!=(n=c.lastSavedAt)?n:null),[M,z]=(0,s.useState)(null),F=(0,s.useRef)(null),R=(0,s.useRef)(null),O=(0,s.useRef)(0),B=(0,s.useCallback)(()=>{try{var e;let t=null==(e=globalThis)?void 0:e.crypto;if(t&&"function"==typeof t.randomUUID)return t.randomUUID()}catch(e){}let t="".concat(Date.now(),"_").concat(O.current);return O.current+=1,t},[]),W=(0,s.useCallback)(e=>{if(null!=R.current&&R.current>=0&&R.current<e.length&&e[R.current]&&"assistant"===e[R.current].role&&!e[R.current].checkpointId)return{arr:e,idx:R.current};let t=e[e.length-1];if(!(!t||"assistant"!==t.role||t.checkpointId||t.isTask))return R.current=e.length-1,{arr:e,idx:R.current};{let t=[...e,{id:B(),role:"assistant",content:"",toolMessages:[]}];return R.current=t.length-1,{arr:t,idx:R.current}}},[B]),[U,_]=(0,s.useState)(null),[$,Y]=(0,s.useState)(new Set),[H,q]=(0,s.useState)(eC.s.getDefaultModel()),[G,J]=(0,s.useState)(!1),[K,Z]=(0,s.useState)(!1),[X,Q]=(0,s.useState)(0),{state:ee,start:et,setWorkspaceHandler:en}=eX(),ea=null==(t=ee.currentStep)?void 0:t.id,es="running"===ee.status,er=es&&"wrap-up"!==ea,{shouldShowCosts:eo}=tf(),ei=(0,s.useRef)(null),el=(0,s.useRef)(null),ec=(0,s.useRef)(!0),ed=(0,s.useRef)(!1),[eu,ep]=(0,s.useState)(!0),[eh,eg]=(0,s.useState)(!0),[ev,ef]=(0,s.useState)(!1),[eb,ey]=(0,s.useState)(!0),ew=(()=>{let e=[eu,eh,ev,eb].filter(Boolean).length;if(4===e)return{assistant:25,files:15,editor:35,preview:25};if(3===e){if(!eu)return{assistant:0,files:20,editor:40,preview:40};if(!eh)return{assistant:30,files:0,editor:40,preview:30};if(!ev)return{assistant:33,files:20,editor:0,preview:47};if(!eb)return{assistant:30,files:20,editor:50,preview:0}}else if(2===e)return{assistant:50,files:50,editor:50,preview:50};return{assistant:100,files:100,editor:100,preview:100}})(),ek=e=>{if(!e)return"Select Model";let t=e.split("/");return t[t.length-1].split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" ")},eS=(0,s.useCallback)(function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1200;if(!e)return"";if(e.length<=t)return e;let n=Math.max(0,Math.floor(.6*t)),a=Math.max(0,Math.floor(.3*t)),s=e.slice(0,n),r=a>0?e.slice(-a):"";return"".concat(s,"\n  (...truncated...)\n").concat(r)},[]),eE=(0,s.useCallback)(e=>{let t=Object.entries(e.attributes||{}).slice(0,6);if(0===t.length)return"<".concat(e.tagName,">");let n=t.map(e=>{let[t,n]=e,a=n.length>40?"".concat(n.slice(0,37),"…"):n;return"".concat(t,'="').concat(a,'"')}).join(" ");return"<".concat(e.tagName," ").concat(n,">")},[]),eA=(0,s.useCallback)(e=>{let t=eE(e),n=eS(e.outerHTML,1200),a=e.domPath||"(unknown path)";return["Focus context:","- Target: ".concat(t),"- DOM path: ".concat(a),"- HTML snippet:","```html",n,"```"].join("\n")},[eE,eS]),eP=(0,s.useCallback)(e=>{if(!e){z(null),F.current=null;return}let t="".concat(e.domPath||"","::").concat(e.tagName||"","::").concat(e.outerHTML?e.outerHTML.length:0),n=Date.now();if(F.current&&F.current.signature===t&&n-F.current.timestamp<400)return;let a={...e,timestamp:n};z(a),T.oR.info("Focus context set",{description:eE(a)}),F.current={signature:t,timestamp:n}},[eE]);M&&eE(M);let eD=M?eS(M.outerHTML,240):"",eL=null!=(r=null==eD?void 0:eD.trim())?r:"",eT=M?(0,a.jsxs)("div",{id:"focus-context-hint",className:"rounded-md border border-dashed border-primary/40 bg-primary/5 px-3 py-2 text-xs text-muted-foreground shadow-sm",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-2 text-foreground",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:"font-medium text-xs uppercase tracking-wide text-primary",children:"context"}),(0,a.jsx)("span",{className:"text-[10px] uppercase tracking-wide text-muted-foreground",children:"included in next message"})]}),(0,a.jsx)(l.$,{size:"sm",variant:"ghost",className:"h-6 px-2 text-xs",onClick:()=>z(null),title:"Clear focus context",children:"Clear"})]}),(0,a.jsxs)("div",{className:"mt-2 space-y-2",children:[M.domPath&&(0,a.jsx)("div",{className:"text-[11px] font-mono text-muted-foreground/80 break-all leading-snug",children:M.domPath}),eL&&(0,a.jsx)("pre",{className:"max-h-24 overflow-auto rounded border border-border/50 bg-background/90 px-2 py-1 text-[11px] text-foreground leading-relaxed",children:(0,a.jsx)("code",{children:eL})})]})]}):null;(0,s.useEffect)(()=>{A(ej.$.isDirty(c.id));let e=ej.$.subscribe(e=>{let{projectId:t,dirty:n}=e;t===c.id&&A(n)});return()=>e()},[c.id]),(0,s.useEffect)(()=>{let e=!0;(async()=>{try{var t;await ej.$.syncProjectSaveState(c.id);let n=ej.$.getSavedCheckpointId(c.id);if(n?await ej.$.restoreLastSaved(c.id)||(i.v.warn("[Workspace] Saved checkpoint missing or failed to restore, creating new baseline"),n=(await ej.$.save(c.id,"Initial manual save")).id):n=(await ej.$.save(c.id,"Initial manual save")).id,!e)return;n&&_(n);let a=await o.OP.getProject(c.id);if(!e)return;L(null!=(t=a.lastSavedAt)?t:null),A(ej.$.isDirty(c.id)),i.v.debug("[Workspace] Initializing workspace for project: ".concat(c.id));let s=await ty.getConversation(c.id);if(!e)return;if(i.v.debug("[Workspace] Loaded conversation state:",{messageCount:s.messages.length,lastUpdated:s.lastUpdated,version:s.version}),s.messages.length>0){i.v.debug("[Workspace] Converting ".concat(s.messages.length," orchestrator messages to UI format"));let t=s.messages.filter(e=>"system"!==e.role);if(0===t.length){if(i.v.warn("[Workspace] Conversation contains only system messages - clearing"),await ty.clearConversation(c.id),!e)return;i.v.debug("[Workspace] No existing conversation found - starting fresh");return}let n=tw.convertToUIMessages(s.messages),a=n.filter(e=>e.id&&e.role);if(i.v.debug("[Workspace] Conversion result:",{originalCount:s.messages.length,convertedCount:n.length,filteredCount:a.length,messageTypes:s.messages.map(e=>e.role),convertedTypes:n.map(e=>e.role)}),!e)return;k(a),await ty.recordConversationBreak(c.id,{type:"page_refresh",timestamp:new Date().toISOString(),description:"Page refreshed, conversation restored"}),await ty.addBreakContextMessage(c.id,{type:"page_refresh",timestamp:new Date().toISOString(),description:"Page refreshed, conversation restored"}),i.v.debug("[Workspace] Restored conversation with ".concat(a.length," UI messages displayed"))}else i.v.debug("[Workspace] No existing conversation found - starting fresh")}catch(t){if(!e)return;i.v.error("Failed to initialize workspace:",t)}})();let t=async()=>{try{var t;let n=await o.OP.getProject(c.id);if(!e)return;(null==n||null==(t=n.costTracking)?void 0:t.totalCost)?Q(n.costTracking.totalCost):Q(0)}catch(t){if(!e)return;Q(0)}};t();let n=setInterval(t,2e3);return()=>{e=!1,clearInterval(n)}},[c.id]),(0,s.useEffect)(()=>{if(!es){J(!1),Z(!1);return}"provider-settings"===ea?(J(!0),Z(!0)):(J(!1),Z(!1))},[es,ea]),(0,s.useEffect)(()=>{if(!es){en(null),x(!1);return}return x("workspace-edit"===ea),en(e=>{if("user"===e.role)return void k(t=>[...t,{id:B(),role:"user",content:e.content}]);if("assistant"===e.role){k(t=>{var n,a;let{arr:s,idx:r}=W([...t]),o=s[r],i=o.content?"".concat(o.content,"\n\n").concat(e.content):e.content;return s[r]={...o,content:i,toolMessages:null!=(n=o.toolMessages)?n:[],checkpointId:null!=(a=e.checkpointId)?a:o.checkpointId},s}),"success"===e.tone&&x(!1);return}if("tool"===e.role)return void k(t=>{var n;let{arr:a,idx:s}=W([...t]),r=a[s],o=[...null!=(n=r.toolMessages)?n:[]],i=e.name,l={};if("shell"===e.name&&e.command){let t=e.command.trim().split(/\s+/);l=t.length>0?{cmd:t}:{command:e.command}}else"json_patch"===e.name&&(i="json_patch"),l={command:e.command};return o.push({id:B(),type:"tool",name:i,parameters:l,result:e.output,status:"completed"}),a[s]={...r,toolMessages:o},a});if("clear"===e.role&&"conversation"===e.action){R.current=null,k([]);return}}),()=>{en(null)}},[es,ea,en,W,B]),(0,s.useEffect)(()=>{ec.current&&el.current&&el.current.scrollIntoView({behavior:"smooth"})},[j]),(0,s.useEffect)(()=>{let e=ei.current,t=el.current;if(!e||!t)return;let n=new IntersectionObserver(e=>{let[t]=e,n=t.isIntersecting||t.intersectionRatio>.5;ec.current=n,n&&(ed.current=!1)},{root:e,threshold:[0,.5,1]});return n.observe(t),()=>{n.disconnect()}},[]);let eM=(0,s.useCallback)(()=>{if(!ei.current)return;let{scrollTop:e,scrollHeight:t,clientHeight:n}=ei.current;t-e-n<100?(ec.current=!0,ed.current=!1):f||(ec.current=!1,ed.current=!0)},[f]),ez=(0,s.useCallback)(e=>{window.innerWidth<768?(S("editor"),setTimeout(()=>{tc(e)},0)):ev?tc(e):(ef(!0),setTimeout(()=>{tc(e)},0))},[ev]),eF=(0,s.useCallback)(()=>{p(e=>e+1),window.dispatchEvent(new CustomEvent("filesChanged"))},[]),eR=(0,s.useCallback)(async()=>{if(!P){I(!0);try{var e;let t=await ej.$.save(c.id),n=await o.OP.getProject(c.id);L(null!=(e=n.lastSavedAt)?e:new Date(t.timestamp)),_(t.id);let a=new Date().toISOString(),s={type:"manual_save",timestamp:a,checkpointId:t.id,description:"Manual save"};await ty.recordConversationBreak(c.id,s),await ty.addBreakContextMessage(c.id,s),T.oR.success("Project saved")}catch(e){i.v.error("Failed to save project",e),T.oR.error("Failed to save project")}finally{I(!1)}}},[c.id,P]);(0,s.useEffect)(()=>{let e=e=>{var t;((null==(t=navigator.platform)?void 0:t.toLowerCase().includes("mac"))?e.metaKey:e.ctrlKey)&&"s"===e.key.toLowerCase()&&(e.preventDefault(),eR())};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[eR]);let eO=(0,s.useCallback)(async(e,t)=>{try{if(!await eY.Y.checkpointExists(e)){T.oR.error("Checkpoint no longer exists - it may have been cleaned up"),i.v.warn("[Workspace] Checkpoint ".concat(e," no longer exists"));return}if(await ej.$.runWithSuppressedDirty(c.id,()=>eY.Y.restoreCheckpoint(e))){T.oR.success("Restored to: ".concat(t||"checkpoint")),eF(),await ty.recordConversationBreak(c.id,{type:"checkpoint_restore",timestamp:new Date().toISOString(),checkpointId:e,description:t||"checkpoint"}),await ty.addBreakContextMessage(c.id,{type:"checkpoint_restore",timestamp:new Date().toISOString(),checkpointId:e,description:t||"checkpoint"});let a=ej.$.getSavedCheckpointId(c.id);if(a&&a===e){var n;ej.$.markClean(c.id);let e=await o.OP.getProject(c.id);L(null!=(n=e.lastSavedAt)?n:null)}else ej.$.markDirty(c.id);k(n=>[...n,{id:B(),role:"assistant",content:"Restored to checkpoint: ".concat(t||"previous state"),checkpointId:e}]);let s=tw.convertToOrchestratorMessages(j);await ty.updateConversation(c.id,s)}else T.oR.error("Failed to restore checkpoint")}catch(e){i.v.error("Error restoring checkpoint:",e),T.oR.error("Failed to restore checkpoint")}},[eF,j,c.id]),eB=(0,s.useCallback)(async(e,t)=>{try{if(!await eY.Y.checkpointExists(e)){T.oR.error("Checkpoint no longer exists - cannot retry"),i.v.warn("[Workspace] Checkpoint ".concat(e," no longer exists"));return}let a=null;for(let e=t-1;e>=0;e--)if("user"===j[e].role){a=j[e];break}if(!a)return void T.oR.error("Cannot find original user message to retry");if(!await ej.$.runWithSuppressedDirty(c.id,()=>eY.Y.restoreCheckpoint(e)))return void T.oR.error("Failed to restore checkpoint");let s=ej.$.getSavedCheckpointId(c.id);if(s&&s===e){var n;ej.$.markClean(c.id);let e=await o.OP.getProject(c.id);L(null!=(n=e.lastSavedAt)?n:null)}else ej.$.markDirty(c.id);await ty.recordConversationBreak(c.id,{type:"retry",timestamp:new Date().toISOString(),checkpointId:e,description:'Retrying: "'.concat(a.content.substring(0,50),'..."')});let r=j.slice(0,t-1);k(r);let l=tw.convertToOrchestratorMessages(r);await ty.updateConversation(c.id,l),await ty.addBreakContextMessage(c.id,{type:"retry",timestamp:new Date().toISOString(),checkpointId:e,description:"Retrying after restoring to checkpoint"}),T.oR.success("Restored checkpoint and retrying..."),eF(),v(a.content),setTimeout(()=>{let e=document.querySelector('[data-retry-trigger="true"]');e&&e.click()},100)}catch(e){i.v.error("Error during retry:",e),T.oR.error("Failed to retry")}},[j,eF,c.id]),eW=async()=>{if(er)return;let e=h.trim();if(!e)return void T.oR.error("Please enter a prompt");let t=eC.s.getSelectedProvider(),n=(0,tx.sO)(t),a=eC.s.getApiKey();if(n.apiKeyRequired&&!a)return void T.oR.error("Please set your ".concat(n.name," API key in settings"));if(n.isLocal&&!eC.s.getProviderModel(t))return void T.oR.error("No model selected for ".concat(n.name,". Please select a model in settings."));ec.current=!0,ed.current=!1,x(!0);let s=M?"".concat(eA(M),"\n\n").concat(e):e,r={id:B(),role:"user",content:s};k(e=>[...e,r]);try{let e;R.current=null,k(e=>W([...e]).arr);let t=await ty.getConversationMessages(c.id,50),n=j.length,a=t.filter(e=>"user"===e.role||"assistant"===e.role).length;i.v.debug("[Workspace] Context validation:",{uiMessages:n,contextMessages:a,totalContextIncludingSystem:t.length,contextTypes:t.map(e=>e.role)}),0===n&&a>0&&(i.v.warn("[Workspace] GHOST CONVERSATION DETECTED: UI has ".concat(n," messages but context has ").concat(a," messages!")),i.v.warn("[Workspace] This causes the LLM to continue previous conversations that the user cannot see."),i.v.warn("[Workspace] Clearing context to match UI state..."),await ty.clearConversation(c.id),t.length=0);try{let t=await o.OP.listDirectory(c.id,"/");t.length>0&&(e=t.map(e=>e.path).join("\n"))}catch(e){}let r=(0,tj.m)(e),l=await new Promise(e=>{k(t=>(e(t),t))}),d=tw.prepareConversationForOrchestrator(l,{maxMessages:50,includeSystemPrompt:!0,systemPrompt:r}),m=new tg.r(c.id,d,(e,t)=>{if("assistant_delta"===e&&((null==t?void 0:t.text)||(null==t?void 0:t.snapshot))){let e=t.text,n=t.snapshot;k(t=>{let{arr:a,idx:s}=W([...t]);if(s<0||s>=a.length||!a[s])return i.v.error("[assistant_delta] Invalid index or missing message:",{idx:s,arrayLength:a.length}),t;let r=a[s],o={...r,toolMessages:[...r.toolMessages||[]]},l=o.toolMessages;(0===l.length||"message"!==l[l.length-1].type)&&l.push({id:B(),type:"message",content:""});let c=l[l.length-1];return void 0!==n?c.content=n:e&&(c.content=(c.content||"")+e),a[s]=o,a})}if("toolCalls"===e&&(null==t?void 0:t.toolCalls)){let e=t.toolCalls;i.v.debug("[Workspace] Received ".concat(e.length," tool calls")),k(t=>{let{arr:n,idx:a}=W([...t]),s=n[a],r={...s,toolMessages:[...s.toolMessages||[]]},o=r.toolMessages;for(let t=0;t<e.length;t++){var i;let n,a=e[t],s=(null==(i=a.function)?void 0:i.name)||a.name||"";try{n=a.function?JSON.parse(a.function.arguments||"{}"):a.parameters}catch(e){n=a.function?{arguments:a.function.arguments}:a.parameters}o.push({id:B(),type:"tool",name:s,parameters:n,status:"pending",result:null})}return n[a]=r,n})}if("usage"===e&&(null==t?void 0:t.usage)&&k(e=>{if(null==R.current)return e;let n=[...e],a=n[R.current];return n[R.current]={...a,cost:t.totalCost,usage:t.usage},n}),"evaluation"===e&&(null==t?void 0:t.summary)){let e=t.summary;k(t=>{let{arr:n,idx:a}=W([...t]),s=n[a],r={...s,toolMessages:[...s.toolMessages||[]]};return r.toolMessages.push({id:B(),type:"message",content:e}),n[a]=r,n})}if("divider"===e&&k(e=>{let{arr:n,idx:a}=W([...e]),s=n[a],r={...s,toolMessages:[...s.toolMessages||[]]};return r.toolMessages.push({id:B(),type:"divider",title:(null==t?void 0:t.title)||"Section"}),n[a]=r,n}),"tool_result"===e&&t){let{toolIndex:e,result:n}=t;i.v.debug("[Workspace] Received tool result for tool ".concat(e),{resultPreview:"string"==typeof n?n.substring(0,100):n}),k(e=>{let{arr:t,idx:a}=W([...e]),s=t[a],r={...s,toolMessages:[...s.toolMessages||[]]},o=r.toolMessages;for(let e=o.length-1;e>=0;e--)if("tool"===o[e].type&&!o[e].result){o[e]={...o[e],result:n};break}return t[a]=r,t})}if("tool_status"===e&&t){let{toolIndex:e,status:n,result:a,error:s}=t;k(e=>{let{arr:t,idx:r}=W([...e]),o=t[r],i={...o,toolMessages:[...o.toolMessages||[]]},l=i.toolMessages;for(let e=l.length-1;e>=0;e--)if("tool"===l[e].type&&("pending"===l[e].status||"executing"===l[e].status)){l[e]={...l[e],status:n,result:a||s||l[e].result};break}return t[r]=i,t})}});y(m);let u=await m.execute(s);k(e=>{if(null==R.current)return e;let t=[...e],n=t[R.current];return t[R.current]={...n,checkpointId:u.checkpointId,cost:u.totalCost,usage:u.usageInfo},t}),u.success&&eF();let p=await new Promise(e=>{k(t=>(e(t),t))}),h=tw.convertToOrchestratorMessages(p);await ty.updateConversation(c.id,h),v("")}catch(e){i.v.error("Generation error:",e),T.oR.error(e instanceof Error?e.message:"Failed to generate"),k(t=>[...t,{id:B(),role:"assistant",content:"Error: ".concat(e instanceof Error?e.message:"Unknown error")}])}finally{x(!1),y(null),R.current=null}},e_=(0,s.useCallback)(()=>{b&&(b.stop(),T.oR.info("Generation stopped"))},[b]),e$=[{id:"back",label:"Back to projects",icon:td.A,onClick:m,variant:"outline"}];e$.push({id:"save",label:P?"Saving…":E?"Save":"Saved",icon:to.A,onClick:eR,variant:E?"default":"outline",disabled:!E||P}),U&&e$.push({id:"discard",label:"Discard Changes",icon:tm.A,onClick:()=>eO(U,"Last saved state"),variant:"outline",disabled:P||!E,dataTourId:"discard-changes-button"});let eH=(0,a.jsxs)(eN.AM,{children:[(0,a.jsx)(eN.Wv,{asChild:!0,children:(0,a.jsxs)(l.$,{variant:"outline",size:"sm",className:"h-8 px-3 flex items-center gap-2",title:"Project cost and settings",children:[eo&&(0,a.jsxs)("span",{className:"text-sm font-medium",children:["$",X.toFixed(3)]}),(0,a.jsx)(em.A,{className:"h-4 w-4"})]})}),(0,a.jsx)(eN.hl,{className:"w-96",align:"end",children:(0,a.jsx)(eU,{})})]}),eV=(0,a.jsxs)("div",{className:"space-y-2",children:[eo&&(0,a.jsx)("div",{className:"pb-2 border-b border-border/50",children:(0,a.jsxs)("span",{className:"text-sm font-medium",children:["Project cost: $",X.toFixed(X>=10?2:3)]})}),(0,a.jsxs)(eN.AM,{children:[(0,a.jsx)(eN.Wv,{asChild:!0,children:(0,a.jsxs)(l.$,{variant:"outline",size:"sm",className:"w-full justify-start",children:[(0,a.jsx)(em.A,{className:"h-4 w-4 mr-2"}),"Settings"]})}),(0,a.jsx)(eN.hl,{className:"w-[calc(100vw-2rem)]",align:"start",children:(0,a.jsx)(eU,{})})]})]});return(0,a.jsxs)(tP,{children:[(0,a.jsxs)("div",{className:"h-screen flex flex-col",children:[(0,a.jsx)(ex.j,{leftText:c.name,onLogoClick:m,actions:e$,mobileMenuContent:eV,desktopOnlyContent:eH}),(0,a.jsxs)("div",{className:"hidden md:flex flex-1 overflow-hidden bg-background",children:[(0,a.jsxs)("div",{className:"w-10 bg-muted/70 border-r border-border flex flex-col items-center py-3 gap-1.5",children:[(0,a.jsxs)(tI,{children:[(0,a.jsx)(tD,{asChild:!0,children:(0,a.jsx)("button",{className:"h-5 w-5 px-1 rounded-sm flex items-center justify-center transition-all ".concat(eu?"shadow-sm":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:eu?"var(--button-assistant-active)":void 0,color:eu?"white":void 0},onClick:()=>ep(!eu),children:(0,a.jsx)(tu.A,{className:"h-3.5 w-3.5"})})}),(0,a.jsx)(tL,{side:"right",className:"border-0",style:{backgroundColor:"var(--button-assistant-active)",color:"white"},arrowStyle:{backgroundColor:"var(--button-assistant-active)",fill:"var(--button-assistant-active)"},children:(0,a.jsx)("p",{children:"Chat"})})]}),(0,a.jsxs)(tI,{children:[(0,a.jsx)(tD,{asChild:!0,children:(0,a.jsx)("button",{className:"h-5 w-5 px-1 rounded-sm flex items-center justify-center transition-all ".concat(eh?"shadow-sm":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:eh?"var(--button-files-active)":void 0,color:eh?"white":void 0},onClick:()=>eg(!eh),children:(0,a.jsx)(e8.A,{className:"h-3.5 w-3.5"})})}),(0,a.jsx)(tL,{side:"right",className:"border-0",style:{backgroundColor:"var(--button-files-active)",color:"white"},arrowStyle:{backgroundColor:"var(--button-files-active)",fill:"var(--button-files-active)"},children:(0,a.jsx)("p",{children:"File Explorer"})})]}),(0,a.jsxs)(tI,{children:[(0,a.jsx)(tD,{asChild:!0,children:(0,a.jsx)("button",{className:"h-5 w-5 px-1 rounded-sm flex items-center justify-center transition-all ".concat(ev?"shadow-sm":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:ev?"var(--button-editor-active)":void 0,color:ev?"white":void 0},onClick:()=>ef(!ev),children:(0,a.jsx)(tr.A,{className:"h-3.5 w-3.5"})})}),(0,a.jsx)(tL,{side:"right",className:"border-0",style:{backgroundColor:"var(--button-editor-active)",color:"white"},arrowStyle:{backgroundColor:"var(--button-editor-active)",fill:"var(--button-editor-active)"},children:(0,a.jsx)("p",{children:"Code Editor"})})]}),(0,a.jsxs)(tI,{children:[(0,a.jsx)(tD,{asChild:!0,children:(0,a.jsx)("button",{className:"h-5 w-5 mx-1 rounded-sm flex items-center justify-center transition-all ".concat(eb?"shadow-sm":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:eb?"var(--button-preview-active)":void 0,color:eb?"white":void 0},onClick:()=>ey(!eb),children:(0,a.jsx)(w.A,{className:"h-3.5 w-3.5"})})}),(0,a.jsx)(tL,{side:"right",className:"border-0",style:{backgroundColor:"var(--button-preview-active)",color:"white"},arrowStyle:{backgroundColor:"var(--button-preview-active)",fill:"var(--button-preview-active)"},children:(0,a.jsx)("p",{children:"Preview"})})]})]}),(0,a.jsx)("div",{className:"flex-1 p-2 overflow-hidden","data-tour-id":"workspace-panels",children:(0,a.jsxs)(tC,{direction:"horizontal",autoSaveId:"workspace-layout",children:[eu&&(0,a.jsx)(tS,{id:"assistant",order:1,defaultSize:ew.assistant,minSize:15,children:(0,a.jsxs)("div",{className:"h-full flex flex-col border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(var(--panel-assistant-tint), var(--panel-assistant-tint)), var(--card)"},"data-tour-id":"assistant-panel",children:[(0,a.jsxs)("div",{className:"p-3 border-b bg-muted/80 flex items-center justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(tu.A,{className:"h-4 w-4 md:hidden",style:{color:"var(--button-assistant-active)"}}),(0,a.jsxs)("button",{type:"button",onClick:()=>ep(!1),"aria-label":"Hide chat",className:"relative hidden h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-destructive md:flex group",children:[(0,a.jsx)(tu.A,{className:"h-4 w-4 transition-opacity group-hover:opacity-0",style:{color:"var(--button-assistant-active)"}}),(0,a.jsx)(g.A,{className:"absolute h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100"})]}),(0,a.jsx)("h3",{className:"text-sm font-medium",children:"Chat"})]}),(0,a.jsx)(l.$,{size:"sm",variant:"ghost",onClick:async()=>{i.v.debug("[Workspace] Clearing chat - UI has ".concat(j.length," messages")),k([]),await ty.clearConversation(c.id);let e=await ty.getConversationMessages(c.id);e.length>0?i.v.error("[Workspace] Clear failed! Still has ".concat(e.length," messages in storage")):i.v.debug("[Workspace] Successfully cleared all conversation data for project ".concat(c.id))},className:"h-5 w-5 p-0",title:"Clear chat","data-tour-id":"clear-chat-button",children:(0,a.jsx)(C.A,{className:"h-3 w-3"})})]}),(0,a.jsxs)("div",{ref:ei,onScroll:eM,className:"flex-1 overflow-y-auto p-4 space-y-3 flex flex-col","data-tour-id":"checkpoint-panel",children:[0===j.length?(0,a.jsx)("div",{className:"flex-1 flex items-center justify-center",children:(0,a.jsxs)("div",{className:"text-center space-y-3",children:[(0,a.jsx)(tu.A,{className:"h-12 w-12 mx-auto opacity-50 text-muted-foreground"}),(0,a.jsxs)("div",{className:"space-y-1",children:[(0,a.jsx)("p",{className:"text-base font-medium text-foreground",children:"Ready to build"}),(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:"Describe what you want to create or change"})]})]})}):j.map((e,t)=>e.isTask&&e.taskSteps?(0,a.jsx)("div",{className:"bg-card border border-border p-3 rounded-lg text-sm",children:(0,a.jsx)(tF,{title:e.taskTitle||"Task Progress",steps:e.taskSteps,checkpointId:e.checkpointId,onRestore:e=>eO(e,"task checkpoint"),isSavedCheckpoint:e.checkpointId===U,expanded:$.has(t),onToggleExpand:()=>{let e=new Set($);e.has(t)?e.delete(t):e.add(t),Y(e)}})},e.id):"assistant"===e.role&&(e.toolMessages&&e.toolMessages.length>0||e.toolCalls&&e.toolCalls.length>0)?(0,a.jsxs)("div",{className:"bg-card border border-border p-3 rounded-lg text-sm mr-2",children:[(0,a.jsx)("div",{className:"mb-2",children:(0,a.jsx)("p",{className:"font-medium",children:"AI"})}),(0,a.jsx)(tH,{content:e.content,toolCalls:e.toolCalls,toolMessages:e.toolMessages,checkpointId:e.checkpointId,onRestore:e.checkpointId?e=>eO(e,"checkpoint"):void 0,onRetry:e.checkpointId?e=>eB(e,t):void 0,isSavedCheckpoint:e.checkpointId===U,isExecuting:f,cost:e.cost,usage:e.usage})]},e.id):(0,a.jsxs)("div",{className:"p-3 rounded-lg text-sm ".concat("user"===e.role?"bg-muted/50 ml-8":"bg-card border border-border mr-2"),children:[(0,a.jsx)("div",{className:"mb-1",children:(0,a.jsx)("p",{className:"font-medium",children:"user"===e.role?"You":"AI"})}),(0,a.jsx)(t_,{content:e.content})]},e.id)),(0,a.jsx)("div",{ref:el})]}),(0,a.jsxs)("div",{className:"p-3 space-y-2",children:[eT,(0,a.jsxs)("div",{className:"bg-card border border-border rounded-lg shadow-sm overflow-hidden",children:[(0,a.jsxs)("div",{className:"relative flex bg-card rounded-lg transition-all",children:[(0,a.jsx)(d,{value:h,onChange:e=>v(e.target.value),onKeyDown:e=>{!er&&"Enter"===e.key&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),eW())},placeholder:"Describe what you want to build...",className:"flex-1 px-3 py-2 bg-transparent border-0 resize-none focus:outline-none text-sm placeholder:text-muted-foreground text-foreground",rows:3,disabled:f||er}),(0,a.jsxs)("div",{className:"flex flex-col p-2 gap-2",children:[(0,a.jsxs)(tI,{children:[(0,a.jsx)(tD,{asChild:!0,children:(0,a.jsx)(l.$,{onClick:f?e_:eW,disabled:er?!f:!f&&!h.trim(),size:"sm",className:"flex items-center gap-2","data-retry-trigger":"true",children:f?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(eQ.A,{className:"h-4 w-4 animate-spin"}),"Stop"]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(tp.A,{className:"h-4 w-4"}),"Send"]})})}),(0,a.jsx)(tL,{side:"left",children:(0,a.jsxs)("div",{className:"space-y-1",children:[(0,a.jsxs)("p",{className:"text-xs",children:[(0,a.jsx)("kbd",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"Ctrl/Cmd+Enter"})," to send"]}),(0,a.jsxs)("p",{className:"text-xs",children:[(0,a.jsx)("kbd",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"Enter"})," for newline"]})]})})]}),h.length>0&&(0,a.jsxs)("div",{className:"px-3 py-1.5 bg-muted text-muted-foreground rounded-md text-xs text-center",children:[h.length," chars"]})]})]}),(0,a.jsx)("div",{className:"border-t border-border bg-muted/50 px-2 py-2",children:(0,a.jsx)("div",{className:"flex items-center justify-between",children:(0,a.jsxs)(eN.AM,{open:G,onOpenChange:J,children:[(0,a.jsx)(eN.Wv,{asChild:!0,children:(0,a.jsxs)(l.$,{variant:"outline",size:"sm",className:"h-7 text-xs","data-tour-id":"provider-settings-trigger",children:[(0,a.jsx)("span",{children:ek(H)}),G?(0,a.jsx)(eI.A,{className:"h-3 w-3 ml-1"}):(0,a.jsx)(th.A,{className:"h-3 w-3 ml-1"})]})}),(0,a.jsx)(eN.hl,{className:"w-96",align:"start",children:(0,a.jsx)(tV.t,{onClose:()=>J(!1),onModelChange:e=>q(e)})})]})})})]})]})]})}),eu&&(eh||ev||eb)&&(0,a.jsx)(tE,{withHandle:!0}),eh&&(0,a.jsx)(tS,{id:"files",order:2,defaultSize:ew.files,minSize:14,children:(0,a.jsx)("div",{className:"h-full border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(0deg, rgba(var(--panel-files-rgb), 0.01), rgba(var(--panel-files-rgb), 0.01)), var(--card)"},children:(0,a.jsx)(ta,{projectId:c.id,onFileSelect:ez,onClose:()=>eg(!1)})})}),eh&&(ev||eb)&&(0,a.jsx)(tE,{withHandle:!0}),ev&&(0,a.jsx)(tS,{id:"editor",order:3,defaultSize:ew.editor,minSize:20,children:(0,a.jsx)("div",{className:"h-full border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(0deg, rgba(var(--panel-editor-rgb), 0.01), rgba(var(--panel-editor-rgb), 0.01)), var(--card)"},children:(0,a.jsx)(tl,{projectId:c.id,onFilesChange:eF,onClose:()=>ef(!1)})})}),ev&&eb&&(0,a.jsx)(tE,{withHandle:!0}),eb&&(0,a.jsx)(tS,{id:"preview",order:4,defaultSize:ew.preview,minSize:20,children:(0,a.jsx)("div",{className:"h-full border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(0deg, rgba(var(--panel-preview-rgb), 0.01), rgba(var(--panel-preview-rgb), 0.01)), var(--card)"},children:(0,a.jsx)(V,{projectId:c.id,refreshTrigger:u,onFocusSelection:eP,hasFocusTarget:!!M,onClose:()=>ey(!1)})})})]})})]}),(0,a.jsxs)("div",{className:"flex md:hidden flex-1 overflow-hidden bg-background flex-col",children:[(0,a.jsxs)("div",{className:"flex-1 p-2 pb-16 overflow-hidden",children:["assistant"===N&&(0,a.jsxs)("div",{className:"h-full flex flex-col border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(var(--panel-assistant-tint), var(--panel-assistant-tint)), var(--card)"},children:[(0,a.jsxs)("div",{className:"p-3 border-b bg-muted/80 flex items-center justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(tu.A,{className:"h-4 w-4",style:{color:"var(--button-assistant-active)"}}),(0,a.jsx)("h3",{className:"text-sm font-medium",children:"Chat"})]}),(0,a.jsx)(l.$,{size:"sm",variant:"ghost",onClick:async()=>{i.v.debug("[Workspace] Clearing chat - UI has ".concat(j.length," messages")),k([]),await ty.clearConversation(c.id)},className:"h-5 w-5 p-0",title:"Clear chat",children:(0,a.jsx)(C.A,{className:"h-3 w-3"})})]}),(0,a.jsxs)("div",{ref:ei,onScroll:eM,className:"flex-1 overflow-auto p-2 space-y-2",children:[j.map((e,t)=>e.isTask&&e.taskSteps?(0,a.jsxs)("div",{className:"border border-border rounded-lg p-3 bg-card",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between mb-2",children:[(0,a.jsx)("p",{className:"font-medium text-sm",children:"Task Progress"}),e.checkpointId&&(0,a.jsxs)(l.$,{size:"sm",variant:"ghost",onClick:()=>eO(e.checkpointId,"checkpoint"),className:"h-6 px-2 text-xs",title:"Restore to this checkpoint",children:[(0,a.jsx)(tm.A,{className:"h-3 w-3 mr-1"}),"Restore"]})]}),(0,a.jsx)(tH,{content:e.content,toolCalls:e.toolCalls,toolMessages:e.toolMessages,checkpointId:e.checkpointId,onRestore:e.checkpointId?e=>eO(e,"checkpoint"):void 0,onRetry:e.checkpointId?e=>eB(e,t):void 0,isSavedCheckpoint:e.checkpointId===U,isExecuting:f,cost:e.cost,usage:e.usage})]},e.id):"assistant"===e.role&&(e.toolMessages&&e.toolMessages.length>0||e.toolCalls&&e.toolCalls.length>0)?(0,a.jsxs)("div",{className:"bg-card border border-border p-3 rounded-lg text-sm mr-2",children:[(0,a.jsx)("div",{className:"mb-2",children:(0,a.jsx)("p",{className:"font-medium",children:"AI"})}),(0,a.jsx)(tH,{content:e.content,toolCalls:e.toolCalls,toolMessages:e.toolMessages,checkpointId:e.checkpointId,onRestore:e.checkpointId?e=>eO(e,"checkpoint"):void 0,onRetry:e.checkpointId?e=>eB(e,t):void 0,isSavedCheckpoint:e.checkpointId===U,isExecuting:f,cost:e.cost,usage:e.usage})]},e.id):(0,a.jsxs)("div",{className:"p-3 rounded-lg text-sm ".concat("user"===e.role?"bg-muted/50 ml-8":"bg-card border border-border mr-2"),children:[(0,a.jsx)("div",{className:"mb-1",children:(0,a.jsx)("p",{className:"font-medium",children:"user"===e.role?"You":"AI"})}),(0,a.jsx)(t_,{content:e.content})]},e.id)),(0,a.jsx)("div",{ref:el})]}),(0,a.jsxs)("div",{className:"p-3 space-y-2",children:[eT,(0,a.jsxs)("div",{className:"bg-card border border-border rounded-lg shadow-sm overflow-hidden",children:[(0,a.jsxs)("div",{className:"relative flex bg-card rounded-lg transition-all",children:[(0,a.jsx)(d,{value:h,onChange:e=>v(e.target.value),onKeyDown:e=>{!er&&"Enter"===e.key&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),eW())},placeholder:"Describe what you want to build...",className:"flex-1 px-3 py-2 bg-transparent border-0 resize-none focus:outline-none text-sm placeholder:text-muted-foreground text-foreground",rows:3,disabled:f||er}),(0,a.jsx)("div",{className:"flex flex-col p-2 gap-2",children:(0,a.jsx)(l.$,{onClick:f?e_:eW,disabled:er?!f:!f&&!h.trim(),size:"sm",className:"flex items-center gap-2",children:f?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(eQ.A,{className:"h-4 w-4 animate-spin"}),"Stop"]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(tp.A,{className:"h-4 w-4"}),"Send"]})})})]}),(0,a.jsx)("div",{className:"border-t border-border bg-muted/50 px-2 py-2",children:(0,a.jsxs)(eN.AM,{open:K,onOpenChange:Z,children:[(0,a.jsx)(eN.Wv,{asChild:!0,children:(0,a.jsxs)(l.$,{variant:"outline",size:"sm",className:"h-7 text-xs","data-tour-id":"provider-settings-trigger",children:[(0,a.jsx)("span",{children:ek(H)}),K?(0,a.jsx)(eI.A,{className:"h-3 w-3 ml-1"}):(0,a.jsx)(th.A,{className:"h-3 w-3 ml-1"})]})}),(0,a.jsx)(eN.hl,{className:"w-[calc(100vw-2rem)]",align:"start",children:(0,a.jsx)(tV.t,{onClose:()=>Z(!1),onModelChange:e=>q(e)})})]})})]})]})]}),"files"===N&&(0,a.jsx)("div",{className:"h-full border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(0deg, rgba(var(--panel-files-rgb), 0.01), rgba(var(--panel-files-rgb), 0.01)), var(--card)"},children:(0,a.jsx)(ta,{projectId:c.id,onFileSelect:ez,onClose:()=>eg(!1)})}),"editor"===N&&(0,a.jsx)("div",{className:"h-full border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(0deg, rgba(var(--panel-editor-rgb), 0.01), rgba(var(--panel-editor-rgb), 0.01)), var(--card)"},children:(0,a.jsx)(tl,{projectId:c.id,onFilesChange:eF,onClose:()=>ef(!1)})}),"preview"===N&&(0,a.jsx)("div",{className:"h-full border border-border rounded-lg shadow-sm overflow-hidden relative",style:{background:"linear-gradient(0deg, rgba(var(--panel-preview-rgb), 0.01), rgba(var(--panel-preview-rgb), 0.01)), var(--card)"},children:(0,a.jsx)(V,{projectId:c.id,refreshTrigger:u,onFocusSelection:eP,hasFocusTarget:!!M,onClose:()=>ey(!1)})})]}),(0,a.jsx)("div",{className:"fixed bottom-0 left-0 right-0 bg-card border-t border-border",children:(0,a.jsxs)("div",{className:"flex justify-center items-center p-2 gap-2",children:[(0,a.jsx)("button",{className:"flex items-center justify-center py-2 px-2 rounded-lg transition-all shadow-sm ".concat("assistant"===N?"text-white":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:"assistant"===N?"var(--button-assistant-active)":void 0},onClick:()=>S("assistant"),children:(0,a.jsx)(tu.A,{className:"h-4 w-4"})}),(0,a.jsx)("button",{className:"flex items-center justify-center py-2 px-2 rounded-lg transition-all shadow-sm ".concat("files"===N?"text-white":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:"files"===N?"var(--button-files-active)":void 0},onClick:()=>S("files"),children:(0,a.jsx)(e8.A,{className:"h-4 w-4"})}),(0,a.jsx)("button",{className:"flex items-center justify-center py-2 px-2 rounded-lg transition-all shadow-sm ".concat("editor"===N?"text-white":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:"editor"===N?"var(--button-editor-active)":void 0},onClick:()=>S("editor"),children:(0,a.jsx)(tr.A,{className:"h-4 w-4"})}),(0,a.jsx)("button",{className:"flex items-center justify-center py-2 px-2 rounded-lg transition-all shadow-sm ".concat("preview"===N?"text-white":"bg-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"),style:{backgroundColor:"preview"===N?"var(--button-preview-active)":void 0},onClick:()=>S("preview"),children:(0,a.jsx)(w.A,{className:"h-4 w-4"})})]})})]})]}),(0,a.jsx)(e0,{location:"workspace"}),(0,a.jsx)(e0,{location:"settings"})]})}function tG(){var e;let[t,n]=(0,s.useState)(null),{state:r,setActiveProjectId:o}=eX(),i=null==(e=r.currentStep)?void 0:e.id,l="running"===r.status;(0,s.useEffect)(()=>{t?o(t.id):o(null)},[t,o]),(0,s.useEffect)(()=>{if(l&&i){if("welcome"===i||"projects-overview"===i||"create-project"===i||"project-controls"===i||"edit-project"===i){t&&n(null);return}("workspace-overview"===i||"workspace-edit"===i||"workspace-checkpoint"===i||"provider-settings"===i||"wrap-up"===i)&&!t&&r.projectList.length>0&&n(r.projectList[0])}},[l,i,t,r.projectList]);let c=(0,s.useMemo)(()=>t?(0,a.jsx)(tq,{project:t,onBack:()=>n(null)}):(0,a.jsx)(e1,{onProjectSelect:n}),[t]);return(0,a.jsxs)(a.Fragment,{children:[c,(0,a.jsx)(e0,{location:"global"})]})}function tJ(){return(0,a.jsx)(eZ,{children:(0,a.jsx)(tG,{})})}},9013:(e,t,n)=>{Promise.resolve().then(n.bind(n,8846))}},e=>{var t=t=>e(e.s=t);e.O(0,[948,486,478,901,835,441,684,358],()=>t(9013)),_N_E=e.O()}]);
\ No newline at end of file