https://www.xgrind.pro/assets/GlitchHealPage-DjuUY4pV.js

1import{r as a,j as e}from"./react-core-bWLI75Fw.js";import{o as pe,E as k,F as p,ct as f,cF as c,cH as l,lr as be}from"./index-Cuw9rIcM.js";import{loadImageFromFile as Q,imageToRgba as W,makeGlitchRgba as q,rgbaToCanvas as ue,createTeaserMask as J,encodeDuoMesh as he,encodeGlitchHeal as ge,compositeOnBackground as Y,exportRgbaPng as fe}from"./core-D8bievjF.js";import{F as ke}from"./FunViralShortcuts-BJW8fPeM.js";import{M as je}from"./MaskBrushCanvas-CjDBcZmS.js";import{av as Ne,Q as A,ad as ye,aM as ve,bE as O,X as ee,S as we,L as se,v as $e,c_ as Ee}from"./lucide-U8ZTX028.js";import"./firebase-BwZ4hkwm.js";import"./framer-motion-C0wpNkKn.js";const Se="xgrind-glitch-heal.png",Z=960,Ce=[{n:"1",title:"Upload foto bersih",text:"Ini yang muncul saat hold — hasil “sembuh”."},{n:"2",title:"Pilih engine",text:"Dual-alpha = glitch otomatis. Mesh + brush = teaser kebaca di feed."},{n:"3",title:"Unduh & post",text:"Post PNG dari desktop x.com — feed rusak, hold bersih."}],Ge={dual:{id:"dual",label:"Dual-alpha glitch",badge:"Otomatis",blurb:"Feed = glitch RGB. Hold = foto bersih. Atur intensitas."},mesh:{id:"mesh",label:"Mesh + brush",badge:"Aman X",blurb:"Feed = glitch RGB + mesh. Cat teaser; hold = foto bersih. Export PNG8."}};function Pe({open:M,onClose:j,onUseDemo:G,busy:N}){return M?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-end justify-center p-3 sm:items-center sm:p-4",children:[e.jsx("button",{type:"button",className:"absolute inset-0 bg-slate-950/70 backdrop-blur-[2px]","aria-label":"Tutup",onClick:j}),e.jsxs("div",{className:`relative z-10 max-h-[88dvh] w-full max-w-sm overflow-y-auto rounded-2xl border-2 bg-white ${k} ${p} dark:bg-slate-950`,children:[e.jsxs("div",{className:"sticky top-0 z-10 flex items-start justify-between gap-2 border-b-2 border-slate-200 bg-white/95 px-3 py-2 backdrop-blur dark:border-indigo-500/25 dark:bg-slate-950/95",children:[e.jsxs("div",{children:[e.jsx("p",{className:`text-[10px] font-black uppercase tracking-[0.14em] ${l}`,children:"Contoh hasil"}),e.jsx("h2",{className:`text-[12px] font-black ${c}`,children:"Rusak di feed · sembuh saat hold"})]}),e.jsx("button",{type:"button",onClick:j,className:`rounded-lg border-2 p-1 ${k} ${c}`,"aria-label":"Tutup modal",children:e.jsx(ee,{size:14})})]}),e.jsxs("div",{className:"space-y-2.5 p-2.5",children:[e.jsx("p",{className:`text-[10px] font-medium leading-snug ${l}`,children:"Orang kira bug X. Timeline berantakan; tap/hold langsung normal."}),e.jsxs("div",{className:"flex justify-center gap-1.5",children:[e.jsxs("figure",{className:"w-[72px] overflow-hidden rounded-md border-2 border-rose-400/70",children:[e.jsx("img",{src:"/assets/xviral/glitch-card-feed.jpg",alt:"Feed glitch",className:"aspect-[4/5] w-full object-cover"}),e.jsx("figcaption",{className:"bg-rose-100 px-0.5 py-0.5 text-center text-[8px] font-black text-rose-950",children:"Feed"})]}),e.jsxs("figure",{className:"w-[72px] overflow-hidden rounded-md border-2 border-emerald-400/70",children:[e.jsx("img",{src:"/assets/xviral/glitch-card-hold.jpg",alt:"Hold clean",className:"aspect-[4/5] w-full object-cover"}),e.jsx("figcaption",{className:"bg-emerald-100 px-0.5 py-0.5 text-center text-[8px] font-black text-emerald-950",children:"Hold"})]})]}),e.jsx("img",{src:"/assets/xviral/glitch-compare.jpg",alt:"Glitch vs clean",className:"mx-auto max-w-[200px] rounded-md border border-slate-800"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsxs("button",{type:"button",onClick:G,disabled:N,className:`inline-flex items-center gap-1.5 rounded-xl border-2 border-slate-900 bg-rose-300 px-3 py-2 text-[11px] font-black text-slate-900 disabled:opacity-60 ${p} dark:border-rose-400/50 dark:bg-rose-800 dark:text-rose-50`,children:[N?e.jsx(se,{size:13,className:"animate-spin"}):e.jsx(A,{size:13}),"Pakai di editor"]}),e.jsx("button",{type:"button",onClick:j,className:`inline-flex items-center gap-1.5 rounded-xl border-2 px-3 py-2 text-[11px] font-black ${k} ${c}`,children:"Tutup"})]})]})]})]}):null}function De(){const{isDark:M}=pe(),j=be(M),[G,N]=a.useState("dual"),[d,ae]=a.useState(null),[y,te]=a.useState(null),[v,g]=a.useState(!1),[B,h]=a.use

1State(""),[x,P]=a.useState(null),[le,F]=a.useState({feed:null,hold:null}),[w,_]=a.useState("feed"),[b,I]=a.useState(.55),[$,re]=a.useState(1.5),[E,ne]=a.useState("auto"),[S,T]=a.useState({w:0,h:0}),[u,z]=a.useState(null),[de,L]=a.useState(null),[ie,R]=a.useState(!1),i=G==="mesh";a.useEffect(()=>()=>{y&&URL.revokeObjectURL(y)},[y]);const H=a.useCallback(s=>{te(t=>(t&&URL.revokeObjectURL(t),s?URL.createObjectURL(s):null)),ae(s),P(null),F({feed:null,hold:null}),z(null),L(null),T({w:0,h:0}),h("")},[]),oe=a.useCallback(async()=>{g(!0),h("");try{const s=await fetch("/assets/xviral/glitch-demo-clean.jpg").then(r=>{if(!r.ok)throw new Error("Gagal muat contoh");return r.blob()}),t=new File([s],"glitch-demo-clean.jpg",{type:"image/jpeg"});H(t),N("dual"),I(.6),_("feed")}catch(s){h(s?.message||"Gagal memuat contoh")}finally{g(!1)}},[H]),X=a.useCallback(async()=>{if(!i||!d)return;const s=await Q(d),{rgba:t,width:r,height:m}=W(s,Z),o=q(t,r,m,b);T({w:r,h:m}),L(ue(o,r,m)),z(n=>n&&n.length===r*m?n:J(r,m))},[i,d,b]);a.useEffect(()=>{X().catch(()=>{})},[X]);const U=a.useCallback(async({silent:s=!1}={})=>{if(d){s||(g(!0),h(""));try{const t=await Q(d),r=i?Z:1600,{rgba:m,width:o,height:n}=W(t,r),xe=q(m,o,n,b);let C,D;if(i){const me=u&&u.length===o*n?u:J(o,n);C=he(m,o,n,{mask:me,feedRgba:xe,brightnessBoost:$}),D=E==="png32"?"png32":"png8"}else C=ge(m,o,n,b),D=E==="png8"?"png8":"png32";P({rgba:C,width:o,height:n,format:D}),F({feed:Y(C,o,n,"#ffffff"),hold:Y(C,o,n,"#000000")})}catch(t){s||h(t?.message||"Gagal membuat PNG"),P(null),F({feed:null,hold:null})}finally{s||g(!1)}}},[d,i,u,$,E,b]);a.useEffect(()=>{if(!d||i&&(!u||!S.w))return;const t=setTimeout(()=>{U({silent:!0})},i?450:220);return()=>clearTimeout(t)},[d,i,u,$,E,b,S.w,U]);const ce=a.useCallback(async()=>{if(x){g(!0),h("");try{await fe(x.rgba,x.width,x.height,Se,x.format||"auto")}catch(s){h(s?.message||"Gagal unduh")}finally{g(!1)}}},[x]),V=le[w],K=V?V.toDataURL("image/png"):null;return e.jsxs("div",{className:"mx-auto w-full max-w-5xl space-y-4 px-3 pb-16 pt-3 sm:px-5 sm:pt-4",children:[e.jsx(ke,{current:"glitch-heal",trailing:e.jsxs("button",{type:"button",onClick:()=>R(!0),className:`inline-flex items-center gap-1.5 rounded-xl border-2 bg-rose-200 px-2.5 py-1.5 text-[11px] font-black text-slate-900 ${k} ${p} dark:bg-rose-900 dark:text-rose-50`,children:[e.jsx(Ne,{size:13}),"Lihat contoh hasil"]})}),e.jsx(Pe,{open:ie,onClose:()=>R(!1),busy:v,onUseDemo:async()=>{await oe(),R(!1)}}),e.jsxs("section",{className:`relative overflow-hidden rounded-2xl border-2 ${f} ${p}`,children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-br from-rose-100/80 via-white to-emerald-100/50 dark:from-rose-950/40 dark:via-slate-950 dark:to-emerald-950/40"}),e.jsxs("div",{className:"relative p-4 sm:p-5",children:[e.jsxs("div",{className:"flex items-center gap-2 text-rose-800 dark:text-rose-300",children:[e.jsx(A,{size:16}),e.jsx("span",{className:"text-[10px] font-black uppercase tracking-[0.18em]",children:"Fun · Viral PNG"})]}),e.jsx("h1",{className:`mt-1.5 text-xl font-black sm:text-2xl ${c}`,children:"Glitch Heal"}),e.jsx("p",{className:`mt-1 max-w-2xl text-sm font-medium ${l}`,children:"Timeline kelihatan rusak/error; tap atau hold langsung bersih. Orang sering kira bug X."}),e.jsx("ol",{className:"mt-4 grid gap-2 sm:grid-cols-3",children:Ce.map(s=>e.jsxs("li",{className:`flex gap-2.5 rounded-xl border-2 bg-white/80 p-2.5 dark:bg-slate-900/70 ${k}`,children:[e.jsx("span",{className:"flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border-2 border-slate-900 bg-rose-200 text-[11px] font-black text-slate-900 dark:border-rose-400/50 dark:bg-rose-900 dark:text-rose-100",children:s.n}),e.jsxs("div",{children:[e.jsx("p",{className:`text-[12px] font-black ${c}`,children:s.title}),e.jsx("p",{className:`mt-0.5 text-[11px] font-medium leading-snug ${l}`,children:s.text})]})]},s.n))})]})]}),e.jsxs("div",{className:"flex flex-col gap-2 sm:flex-row",children:[e.jsxs("div",{className:"flex flex-1 items-start gap-2 rounded-2xl border-2 border-emerald-400/70 bg-emerald-50 px-3 py-2.5 text-xs font-semibold text-emerald-950 dark:border-emerald-500/40 dark:bg-emerald-950/35 dar

1k:text-emerald-100",children:[e.jsx(ye,{size:15,className:"mt-0.5 shrink-0"}),e.jsx("span",{children:"Semua proses lokal di browser. Gambar tidak di-upload ke server XGrind."})]}),e.jsxs("div",{className:"flex flex-1 items-start gap-2 rounded-2xl border-2 border-amber-400/80 bg-amber-50 px-3 py-2.5 text-xs font-semibold text-amber-950 dark:border-amber-500/40 dark:bg-amber-950/35 dark:text-amber-100",children:[e.jsx(ve,{size:15,className:"mt-0.5 shrink-0"}),e.jsxs("span",{children:["Post dari ",e.jsx("strong",{children:"desktop x.com"}),". Mesh → PNG8. Dual-alpha → PNG32."]})]})]}),e.jsxs("div",{className:"grid gap-4 lg:grid-cols-[1.05fr_0.95fr] lg:items-start",children:[e.jsxs("section",{className:"space-y-3",children:[e.jsx("h2",{className:`text-[11px] font-black uppercase tracking-[0.14em] ${l}`,children:"Langkah 1 · Engine & foto"}),e.jsxs("div",{className:`rounded-xl border-2 p-2.5 ${f}`,children:[e.jsx("p",{className:`mb-2 text-[10px] font-black uppercase tracking-wide ${l}`,children:"Engine"}),e.jsx("div",{className:"grid gap-1.5 sm:grid-cols-2",children:Object.values(Ge).map(s=>{const t=G===s.id;return e.jsxs("button",{type:"button",onClick:()=>{N(s.id),P(null),F({feed:null,hold:null}),s.id!=="mesh"&&(z(null),L(null),T({w:0,h:0}))},className:`rounded-xl border-2 px-2.5 py-2 text-left ${t?"border-slate-900 bg-rose-300 text-slate-900 dark:border-rose-400/60 dark:bg-rose-800 dark:text-rose-50":`border-slate-200 bg-slate-50 ${c} dark:border-slate-700 dark:bg-slate-900`}`,children:[e.jsxs("span",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"text-[11px] font-black",children:s.label}),e.jsx("span",{className:`rounded px-1 py-0.5 text-[8px] font-black uppercase ${t?"bg-slate-900 text-rose-100":"bg-rose-200 text-rose-950 dark:bg-rose-950 dark:text-rose-200"}`,children:s.badge})]}),e.jsx("span",{className:`mt-1 block text-[10px] font-medium leading-snug ${t?"opacity-90":l}`,children:s.blurb})]},s.id)})})]}),e.jsxs("div",{className:`overflow-hidden rounded-2xl border-2 ${p} border-slate-900 bg-white dark:border-indigo-400/40 dark:bg-slate-900`,children:[e.jsxs("div",{className:"flex items-center gap-2 border-b-2 border-slate-200 bg-emerald-50 px-3 py-2 dark:border-indigo-500/25 dark:bg-emerald-950/30",children:[e.jsx(O,{size:14,className:"text-emerald-600 dark:text-emerald-300"}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:`text-[12px] font-black ${c}`,children:"Foto bersih (hold)"}),e.jsx("p",{className:`text-[10px] font-semibold ${l}`,children:"Hasil akhir setelah “sembuh”"})]}),d?e.jsx("button",{type:"button",onClick:()=>H(null),className:"ml-auto rounded-lg border border-slate-300 p-1 text-slate-500","aria-label":"Hapus",children:e.jsx(ee,{size:14})}):null]}),e.jsxs("label",{className:"block cursor-pointer p-3",children:[y?e.jsx("img",{src:y,alt:"Clean",className:"aspect-[4/5] w-full rounded-xl object-cover"}):e.jsxs("div",{className:"flex aspect-[4/5] flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-300 bg-slate-50 dark:border-indigo-400/30 dark:bg-slate-950",children:[e.jsx(O,{size:28,className:"text-emerald-600"}),e.jsx("p",{className:`text-xs font-black ${c}`,children:"Klik / drop foto"})]}),e.jsx("input",{type:"file",accept:"image/png,image/jpeg,image/webp,image/gif",className:"hidden",onChange:s=>H(s.target.files?.[0]||null)})]})]}),e.jsx("div",{className:`rounded-xl border-2 p-2.5 ${f}`,children:e.jsxs("label",{className:`block text-[10px] font-black uppercase tracking-wide ${l}`,children:["Intensitas glitch · ",Math.round(b*100),"%",e.jsx("input",{type:"range",min:.2,max:1,step:.05,value:b,onChange:s=>I(Number(s.target.value)),className:"mt-2 w-full accent-rose-500"})]})}),i&&d&&S.w>0&&u?e.jsxs("div",{className:`space-y-2 rounded-2xl border-2 p-3 ${f}`,children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(we,{size:14,className:"text-cyan-600 dark:text-cyan-300"}),e.jsx("p",{className:`text-[11px] font-black uppercase tracking-wide ${c}`,children:"Brush teaser"})]}),e.jsx("p",{className:`text-[10px] font-medium ${l}`,children:"Latar = glitch. Cat cyan = glitch yang kebaca di feed. Sisanya mesh â

1†’ hold penuh bersih."}),e.jsx(je,{width:S.w,height:S.h,underlayCanvas:de,mask:u,onMaskChange:z}),e.jsxs("label",{className:`block text-[10px] font-black uppercase tracking-wide ${l}`,children:["Brightness boost hold · ×",$.toFixed(1),e.jsx("input",{type:"range",min:1,max:2.2,step:.1,value:$,onChange:s=>re(Number(s.target.value)),className:"mt-1 w-full accent-rose-500"})]})]}):null,e.jsxs("div",{className:`rounded-xl border-2 p-2.5 ${f}`,children:[e.jsx("p",{className:`mb-2 text-[10px] font-black uppercase tracking-wide ${l}`,children:"Format export"}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:[{id:"auto",label:i?"Auto · PNG8":"Auto · PNG32"},{id:"png8",label:"PNG8"},{id:"png32",label:"PNG32"}].map(s=>e.jsx("button",{type:"button",onClick:()=>ne(s.id),className:`rounded-lg px-2.5 py-1.5 text-[11px] font-black ${E===s.id?"bg-rose-300 text-slate-900 dark:bg-rose-700 dark:text-white":"bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300"}`,children:s.label},s.id))})]}),d?e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>U({silent:!1}),disabled:v,className:`inline-flex items-center gap-2 rounded-xl border-2 px-4 py-2.5 text-sm font-black disabled:opacity-60 ${j} ${p}`,children:[v?e.jsx(se,{size:16,className:"animate-spin"}):e.jsx(A,{size:16}),v?"Memproses…":"Generate ulang"]}),e.jsxs("button",{type:"button",onClick:ce,disabled:!x||v,className:`inline-flex items-center gap-2 rounded-xl border-2 border-slate-900 bg-cyan-300 px-4 py-2.5 text-sm font-black text-slate-900 disabled:cursor-not-allowed disabled:opacity-50 ${p} dark:border-cyan-400/50 dark:bg-cyan-800 dark:text-cyan-50`,children:[e.jsx($e,{size:16}),"Unduh PNG"]})]}):e.jsx("p",{className:`rounded-xl border-2 border-dashed px-3 py-2 text-xs font-bold ${l} ${k}`,children:"Upload foto bersih — Glitch Heal jalan otomatis."}),B?e.jsx("p",{className:"rounded-xl border-2 border-rose-300 bg-rose-50 px-3 py-2 text-xs font-bold text-rose-800 dark:border-rose-700 dark:bg-rose-950/40 dark:text-rose-200",children:B}):null,x?e.jsxs("div",{className:`rounded-2xl border-2 p-3 ${f} ${p}`,children:[e.jsx("p",{className:`text-[11px] font-black uppercase tracking-wide ${c}`,children:"Siap post?"}),e.jsxs("ul",{className:`mt-2 space-y-1.5 text-[12px] font-semibold ${l}`,children:[e.jsxs("li",{children:["✓ Unduh PNG (",x.format||"auto",")"]}),e.jsx("li",{children:"✓ Post dari browser desktop → x.com"}),e.jsx("li",{children:"✓ Cek feed rusak vs hold bersih di HP"})]})]}):null]}),e.jsxs("section",{className:"space-y-3",children:[e.jsx("h2",{className:`text-[11px] font-black uppercase tracking-[0.14em] ${l}`,children:"Langkah 2 · Preview"}),e.jsxs("div",{className:`overflow-hidden rounded-[1.6rem] border-2 border-slate-900 bg-slate-950 ${p} dark:border-indigo-400/45`,children:[e.jsx("div",{className:"border-b border-white/10 px-3 py-2",children:e.jsx("p",{className:"text-[11px] font-black uppercase tracking-wide text-cyan-300",children:w==="feed"?"Timeline (glitch / rusak)":"Hold (sembuh)"})}),e.jsx("div",{className:"flex min-h-[240px] items-center justify-center p-3",style:{background:w==="feed"?"#ffffff":"#000000"},children:K?e.jsx("img",{src:K,alt:w,className:"max-h-72 w-full object-contain"}):e.jsx("p",{className:"px-3 py-10 text-center text-xs font-semibold text-slate-400",children:"Upload foto untuk preview"})}),e.jsx("div",{className:"flex gap-1 border-t border-white/10 p-1.5",children:[{id:"feed",label:"Feed",Icon:O},{id:"hold",label:"Hold",Icon:Ee}].map(({id:s,label:t,Icon:r})=>e.jsxs("button",{type:"button",onClick:()=>_(s),className:`flex flex-1 items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-[10px] font-black ${w===s?"bg-rose-300 text-slate-900":"text-slate-400 hover:bg-white/5"}`,children:[e.jsx(r,{size:12}),t]},s))})]}),e.jsx("p",{className:`text-[11px] font-medium leading-snug ${l}`,children:i?"Mesh: Feed harus kelihatan glitch; Hold hampir penuh bersih. Oval cyan = area glitch teaser.":"Dual-alpha: geser intensitas sampai Feed jelas rusak dan Hold tetap rapi."})]})]})]})}export{De as default};