1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[33295],{5196:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("check",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]])},11500:(e,t,l)=>{function n(){return"undefined"!=typeof window}l.d(t,{u4:()=>i});function a(){return(n()?window.vam:function(){return"production"}())||"production"}function r(){return"production"===a()}function i(e,t,l){var i,s;if(!n()){let e="[Vercel Web Analytics] Please import `track` from `@vercel/analytics/server` when using this function in a server environment";if(r())console.warn(e);else throw Error(e);return}if(!t){null==(i=window.va)||i.call(window,"event",{name:e,options:l});return}try{let n=function(e,t){if(!e)return;let l=e,n=[];for(let[a,r]of Object.entries(e))"object"==typeof r&&null!==r&&(t.strip?l=function(e,{[e]:t,...l}){return l}(a,l):n.push(a));if(n.length>0&&!t.strip)throw Error(`The following properties are not valid: ${n.join(", ")}. Only strings, numbers, booleans, and null are allowed.`);return l}(t,{strip:r()});null==(s=window.va)||s.call(window,"event",{name:e,data:n,options:l})}catch(e){e instanceof Error&&"development"===a()&&console.error(e)}}},13052:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("chevron-right",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]])},15743:(e,t,l)=>{l.d(t,{Q:()=>i});var n=l(12115),a=l(61787),r=l(84899);function i(e,t){let l=(0,n.useRef)(t);l.current=t;let i=(0,n.useRef)(null);null===i.current&&(i.current=Object.fromEntries(Object.entries(t).map(e=>{let[t,[l]]=e;return[t,l]})));let s=(0,n.useRef)(!1);(0,n.useEffect)(()=>{var e;for(let[t,n]of Object.entries((0,r.e)(window.location.search,null!=(e=i.current)?e:{}))){let e=l.current[t];if(!e)continue;let[a,r]=e;a!==n&&r(n)}s.current=!0},[]),(0,n.useEffect)(()=>((0,a.$o)({buildUrl:()=>{var e;let t=(0,r.CW)(Object.fromEntries(Object.entries(l.current).map(e=>{let[t,[l]]=e;return[t,l]})),null!=(e=i.current)?e:{}),{origin:n,pathname:a}=window.location;return t?"".concat(n).concat(a,"?").concat(t):"".concat(n).concat(a)}}),()=>(0,a.$o)(null)),[e]);let c=Object.entries(t).map(e=>{let[t,[l]]=e;return t+"="+String(l)}).join("&");(0,n.useEffect)(()=>{if(!s.current)return;let e=window.setTimeout(()=>{var e;let t=(0,r.CW)(Object.fromEntries(Object.entries(l.current).map(e=>{let[t,[l]]=e;return[t,l]})),null!=(e=i.current)?e:{}),n=window.location.pathname+(t?"?"+t:"");n!==window.location.pathname+window.location.search&&window.history.replaceState(window.history.state,"",n)},400);return()=>window.clearTimeout(e)},[c])}},24357:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("copy",[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]])},25260:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("wrap-text",[["path",{d:"m16 16-2 2 2 2",key:"kkc6pm"}],["path",{d:"M3 12h15a3 3 0 1 1 0 6h-4",key:"1cl7v7"}],["path",{d:"M3 18h7",key:"sq21v6"}],["path",{d:"M3 6h18",key:"d0wm0j"}]])},28114:(e,t,l)=>{l.d(t,{A:()=>x});var n=l(95155),a=l(12115),r=l(25260),i=l(91981),s=l(54416),c=l(77813),o=l(37848);let d={css:"CSS",typescript:"TypeScript",javascript:"JavaScript",html:"HTML",json:"JSON",jsx:"JSX",tsx:"TSX",xml:"XML",sql:"SQL",text:"Output"},u="inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm text-text-secondary hover:text-accent bg-card/60 hover:bg-accent/15 border border-border/60 hover:border-accent/50 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background cursor-pointer";function x(e){let{code:t,language:l,title:s,showLineNumbers:x=!1,showCopyButton:f=!0,showWrapTextToggle:m=!1,showFullScreenPopup:h=!0,editable:w=!1,onChange:b,headerExtraLeft:y,headerExtraRight:g,textareaClassName:v="min-h-[320px] lg:min-h-[400px]",placeholder:j,renderCustomContent:k}=e,[N,T]=(0,a.useState)(!0),[A,C]=(0,a.useState)(!1),S=s||d[l]||l.toUpperCase(),O=t.split("\n"),W=N?"".concat(o.T.pre," !whitespace-pre-wrap"):o.T.pre,E="w-full p-4 bg-transparent text-text-secondary font-mono text-sm leading-relaxed border-0 focus:outline-none focus:ring-0 resize-none block ".concat(o.T.code," ").concat(v).trim(),M=(0,a.useCallback)(e=>k?(0,n.jsx)("div",{className:o.T.contentWrapper,children:e?(0,n.jsx)("div",{className:"max-h-[calc(100vh-8rem)] overflow-auto",children:k()}):k()}):w&&b?(0,n.jsx)("div",{className:e?"".concat(o.T.contentWrapper," flex-1 flex flex-col h-full"):"".concat(o.T.contentWrapper," max-h-[min(70vh,500px)] overflow-y-auto"),children:(0,n.jsx)("textarea",{value:t,onChange:e=>b(e.target.value),placeholder:j,className:e?"".concat(E," flex-1 h-full max-h-[calc(100vh-8rem)] overflow-auto"):E,spellCheck:!1,"aria-label":S,style:{minHeight:e?"200px":void 0}})}):(0,n.jsx)(n.Fragment,{children:(0,n.jsx)("div",{className:e?"".concat(o.T.contentWrapper," flex-1 flex flex-col h-full"):"".concat(o.T.contentWrapper," max-h-[min(70vh,500px)] overflow-y-auto"),children:(0,n.jsx)("pre",{className:e?"".concat(W," flex-1 h-full max-h-[calc(100vh-8rem)] overflow-auto"):W,children:(0,n.jsx)("code",{className:o.T.code,children:x?O.map((e,t)=>(0,n.jsxs)("div",{className:"flex items-start gap-3",children:[(0,n.jsx)("span",{className:"select-none text-text-muted shrink-0 w-6 tabular-nums text-right","aria-hidden":!0,
1children:t+1}),(0,n.jsx)("span",{className:N?"break-words":"break-all",children:e||" "})]},t)):t})})})}),[k,w,b,t,S,E,W,x,O,N,j]);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("div",{className:o.T.container,children:[(0,n.jsxs)("div",{className:"".concat(o.T.header," flex-col gap-y-3 lg:flex-row lg:items-center lg:justify-between lg:gap-y-0"),children:[(0,n.jsxs)("div",{className:"flex flex-wrap items-center gap-2 min-w-0 shrink-0",children:[(0,n.jsx)("span",{className:"text-sm text-text-secondary truncate",title:S,children:S}),y]}),(0,n.jsxs)("div",{className:"flex flex-wrap items-center gap-2 min-w-0 flex-1 lg:flex-initial lg:justify-end",children:[m&&(0,n.jsxs)("button",{type:"button",onClick:()=>T(e=>!e),className:"".concat(u," ").concat(N?"text-accent border-accent/60 bg-accent/20 ring-2 ring-accent/40 ring-offset-2 ring-offset-background":""),title:N?"Disable wrap text":"Wrap text","aria-label":N?"Disable wrap text":"Wrap text","aria-pressed":N,children:[(0,n.jsx)(r.A,{className:"w-4 h-4"}),(0,n.jsx)("span",{className:"hidden sm:inline",children:"Wrap"})]}),h&&(0,n.jsxs)("button",{type:"button",onClick:()=>C(!0),className:u,title:"Open in full screen","aria-label":"Open in full screen",children:[(0,n.jsx)(i.A,{className:"w-4 h-4 shrink-0"}),(0,n.jsx)("span",{className:"hidden sm:inline",children:"Full screen"})]}),f&&(0,n.jsx)(c.A,{text:t}),g]})]}),M(!1)]}),h&&A&&(0,n.jsx)(p,{displayTitle:S,onClose:()=>C(!1),wrapLines:N,setWrapLines:T,showWrapTextToggle:m,showCopyButton:f,code:t,headerButtonClass:u,renderContent:M,editable:w,onChange:b})]})}function p(e){let{displayTitle:t,onClose:l,wrapLines:i,setWrapLines:d,showWrapTextToggle:u,showCopyButton:x,code:p,headerButtonClass:f,renderContent:m}=e;return(0,a.useEffect)(()=>{let e=e=>{"Escape"===e.key&&l()},t=window.scrollY,n=document.documentElement.style.overflow,a=document.body.style.overflow,r=document.body.style.position,i=document.body.style.width,s=document.body.style.top;return document.documentElement.style.overflow="hidden",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.top="-".concat(t,"px"),window.addEventListener("keydown",e),()=>{document.documentElement.style.overflow=n,document.body.style.overflow=a,document.body.style.position=r,document.body.style.width=i,document.body.style.top=s,window.removeEventListener("keydown",e),window.scrollTo(0,t)}},[l]),(0,n.jsx)("div",{className:"fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-sm w-full",role:"dialog","aria-modal":"true","aria-label":"".concat(t," (full screen)"),children:(0,n.jsx)("div",{className:"flex-1 flex flex-col min-h-0 p-4 sm:p-6 w-full",children:(0,n.jsxs)("div",{className:"".concat(o.T.container," flex-1 flex flex-col min-h-0"),children:[(0,n.jsxs)("div",{className:"".concat(o.T.header," flex-wrap gap-x-3 gap-y-2"),children:[(0,n.jsx)("div",{className:"flex items-center gap-2 min-w-0 shrink-0",children:(0,n.jsx)("span",{className:"text-sm text-text-secondary truncate",title:t,children:t})}),(0,n.jsxs)("div",{className:"flex flex-wrap items-center gap-2 shrink-0 mr-1",children:[u&&(0,n.jsxs)("button",{type:"button",onClick:()=>d(e=>!e),className:"".concat(f," ").concat(i?"text-accent border-accent/60 bg-accent/20 ring-2 ring-accent/40 ring-offset-2 ring-offset-background":""),title:i?"Disable wrap text":"Wrap text","aria-label":i?"Disable wrap text":"Wrap text","aria-pressed":i,children:[(0,n.jsx)(r.A,{className:"w-4 h-4"}),(0,n.jsx)("span",{className:"hidden sm:inline",children:"Wrap"})]}),x&&(0,n.jsx)(c.A,{text:p}),(0,n.jsxs)("button",{type:"button",onClick:l,className:f,title:"Close full screen","aria-label":"Close full screen",children:[(0,n.jsx)(s.A,{className:"w-4 h-4"}),(0,n.jsx)("span",{className:"hidden sm:inline",children:"Close"})]})]})]}),m(!0)]})})})}},29676:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("history",[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}],["path",{d:"M12 7v5l4 2",key:"1fdv2h"}]])},35169:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("arrow-left",[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]])},37848:(e,t,l)=>{l.d(t,{T:()=>n,p:()=>a});let n={container:"bg-background/80 rounded-xl border border-border/60 overflow-hidden min-w-0",header:"flex items-center justify-between pl-4 pr-6 py-3 border-b border-border/60 bg-card/40",contentWrapper:"overflow-x-auto",pre:"p-4 text-sm font-mono text-text-secondary whitespace-pre",code:"text-text-secondary block"},a="file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-accent/20 file:text-accent file:transition-colors file:duration-200 hover:file:bg-accent/35 hover:file:text-accent/80 file:focus-visible:outline-none file:focus-visible:ring-2 file:focus-visible:ring-accent file:focus-visible:ring-offset-2 file:focus-visible:ring-offset-background"},47924:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("search",[["path",{d:"m21 21-4.34-4.34",key:"14j7rj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}]])},54416:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}
1],["path",{d:"m6 6 12 12",key:"d8bk6v"}]])},57340:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("house",[["path",{d:"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8",key:"5wwlr5"}],["path",{d:"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",key:"1d0kgt"}]])},65131:(e,t,l)=>{l.r(t),l.d(t,{default:()=>w});var n=l(95155),a=l(12115),r=l(12316),i=l(85250),s=l(28114),c=l(15743),o=l(55763);let d=[{value:"row",label:"Row",css:"row",tailwind:"flex-row"},{value:"row-reverse",label:"Row Reverse",css:"row-reverse",tailwind:"flex-row-reverse"},{value:"column",label:"Column",css:"column",tailwind:"flex-col"},{value:"column-reverse",label:"Column Reverse",css:"column-reverse",tailwind:"flex-col-reverse"}],u=[{value:"flex-start",label:"Start",tailwind:"justify-start"},{value:"center",label:"Center",tailwind:"justify-center"},{value:"flex-end",label:"End",tailwind:"justify-end"},{value:"space-between",label:"Between",tailwind:"justify-between"},{value:"space-around",label:"Around",tailwind:"justify-around"},{value:"space-evenly",label:"Evenly",tailwind:"justify-evenly"}],x=[{value:"flex-start",label:"Start",tailwind:"items-start"},{value:"center",label:"Center",tailwind:"items-center"},{value:"flex-end",label:"End",tailwind:"items-end"},{value:"stretch",label:"Stretch",tailwind:"items-stretch"},{value:"baseline",label:"Baseline",tailwind:"items-baseline"}],p=[{value:"nowrap",label:"No Wrap",tailwind:"flex-nowrap"},{value:"wrap",label:"Wrap",tailwind:"flex-wrap"},{value:"wrap-reverse",label:"Wrap Reverse",tailwind:"flex-wrap-reverse"}],f=[0,2,4,6,8,10,12,16,20,24],m=[1,2,3,4,5,6,8,10,12],h=[1,2,3,4,5,6];function w(e){let{slug:t}=e,l=(0,o.Tp)(t),w=o.Jf[l.category],[b,y]=(0,a.useState)("flex"),[g,v]=(0,a.useState)("css"),[j,k]=(0,a.useState)(0),[N,T]=(0,a.useState)(0),[A,C]=(0,a.useState)(1),[S,O]=(0,a.useState)(1),[W,E]=(0,a.useState)(4),[M,F]=(0,a.useState)(3),[L,R]=(0,a.useState)(2);(0,c.Q)(t,{layoutType:[b,y],outputTab:[g,v],flexDirection:[j,k],justify:[N,T],align:[A,C],wrap:[S,O],gap:[W,E],gridCols:[M,F],gridRows:[L,R]});let q=(0,a.useMemo)(()=>{var e,t,l,n,a,r,i,s,c,o;if("flex"===b){let o=d[j],m=u[N],h=x[A],w=p[S];return{display:"flex",flexDirection:(c={direction:null!=(e=null==o?void 0:o.css)?e:"row",directionTailwind:null!=(t=null==o?void 0:o.tailwind)?t:"flex-row",justify:null!=(l=null==m?void 0:m.value)?l:"flex-start",justifyTailwind:null!=(n=null==m?void 0:m.tailwind)?n:"justify-start",align:null!=(a=null==h?void 0:h.value)?a:"stretch",alignTailwind:null!=(r=null==h?void 0:h.tailwind)?r:"items-stretch",wrap:null!=(i=null==w?void 0:w.value)?i:"wrap",wrapTailwind:null!=(s=null==w?void 0:w.tailwind)?s:"flex-wrap",gap:f[W]}).direction,justifyContent:c.justify,alignItems:c.align,flexWrap:c.wrap,gap:c.gap?"".concat(4*c.gap,"px"):"0"}}return o={cols:M,rows:L,justify:u[N].value,justifyTailwind:u[N].tailwind,align:x[A].value,alignTailwind:x[A].tailwind,gap:f[W]},{display:"grid",gridTemplateColumns:"repeat(".concat(o.cols,", minmax(0, 1fr))"),gridTemplateRows:"repeat(".concat(o.rows,", minmax(0, 1fr))"),gap:o.gap?"".concat(4*o.gap,"px"):"0",justifyContent:o.justify,alignItems:o.align}},[b,j,N,A,S,W,M,L]),z=(0,a.useMemo)(()=>{if("flex"===b){let o=d[j],m=u[N],h=x[A],w=p[S];var e,t,l,n,a,r,i,s,c={direction:null!=(e=null==o?void 0:o.css)?e:"row",directionTailwind:null!=(t=null==o?void 0:o.tailwind)?t:"flex-row",justify:null!=(l=null==m?void 0:m.value)?l:"flex-start",justifyTailwind:null!=(n=null==m?void 0:m.tailwind)?n:"justify-start",align:null!=(a=null==h?void 0:h.value)?a:"stretch",alignTailwind:null!=(r=null==h?void 0:h.tailwind)?r:"items-stretch",wrap:null!=(i=null==w?void 0:w.value)?i:"wrap",wrapTailwind:null!=(s=null==w?void 0:w.tailwind)?s:"flex-wrap",gap:f[W]};let b=["display: flex;","flex-direction: ".concat(c.direction,";"),"justify-content: ".concat(c.justify,";"),"align-items: ".concat(c.align,";"),"flex-wrap: ".concat(c.wrap,";")];return c.gap>0&&b.push("gap: ".concat(4*c.gap,"px;")),".container {\n ".concat(b.join("\n "),"\n}")}var o={cols:M,rows:L,justify:u[N].value,justifyTailwind:u[N].tailwind,align:x[A].value,alignTailwind:x[A].tailwind,gap:f[W]};let m=["display: grid;","grid-template-columns: repeat(".concat(o.cols,", minmax(0, 1fr));"),"grid-template-rows: repeat(".concat(o.rows,", minmax(0, 1fr));")];return o.gap>0&&m.push("gap: ".concat(4*o.gap,"px;")),m.push("justify-content: ".concat(o.justify,";
1")),m.push("align-items: ".concat(o.align,";")),".container {\n ".concat(m.join("\n "),"\n}")},[b,j,N,A,S,W,M,L]),D=(0,a.useMemo)(()=>{if("flex"===b){let o=d[j],m=u[N],h=x[A],w=p[S];var e,t,l,n,a,r,i,s,c={direction:null!=(e=null==o?void 0:o.css)?e:"row",directionTailwind:null!=(t=null==o?void 0:o.tailwind)?t:"flex-row",justify:null!=(l=null==m?void 0:m.value)?l:"flex-start",justifyTailwind:null!=(n=null==m?void 0:m.tailwind)?n:"justify-start",align:null!=(a=null==h?void 0:h.value)?a:"stretch",alignTailwind:null!=(r=null==h?void 0:h.tailwind)?r:"items-stretch",wrap:null!=(i=null==w?void 0:w.value)?i:"wrap",wrapTailwind:null!=(s=null==w?void 0:w.tailwind)?s:"flex-wrap",gap:f[W]};let b=["flex",c.directionTailwind,c.justifyTailwind,c.alignTailwind,c.wrapTailwind];return c.gap>0&&b.push("gap-".concat(c.gap)),b.join(" ")}var o={cols:M,rows:L,justify:u[N].value,justifyTailwind:u[N].tailwind,align:x[A].value,alignTailwind:x[A].tailwind,gap:f[W]};let m=["grid","grid-cols-".concat(o.cols),"grid-rows-".concat(o.rows),o.justifyTailwind,o.alignTailwind];return o.gap>0&&m.push("gap-".concat(o.gap)),m.join(" ")},[b,j,N,A,S,W,M,L]),J="grid"===b?M*L:6;return(0,n.jsxs)(r.A,{title:"Flexbox & Grid Generator",description:"Visual layout builder for Flexbox and CSS Grid. Export CSS or Tailwind.",tool:l,category:w,children:[(0,n.jsxs)("div",{className:"grid lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8",children:[(0,n.jsxs)("div",{className:"space-y-3 sm:space-y-4 min-w-0",children:[(0,n.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,n.jsx)("button",{type:"button",onClick:()=>y("flex"),className:"px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-sm font-medium transition-all ".concat("flex"===b?"bg-accent/20 text-accent border border-accent/50":"bg-card/60 text-text-secondary border border-border/60 hover:text-text-secondary"),children:"Flexbox"}),(0,n.jsx)("button",{type:"button",onClick:()=>y("grid"),className:"px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-sm font-medium transition-all ".concat("grid"===b?"bg-accent/20 text-accent border border-accent/50":"bg-card/60 text-text-secondary border border-border/60 hover:text-text-secondary"),children:"Grid"})]}),(0,n.jsx)("div",{className:"aspect-video bg-card/40 rounded-xl border border-border/60 p-3 sm:p-6 min-h-[200px] sm:min-h-[220px] overflow-auto min-w-0",children:(0,n.jsx)("div",{className:"w-full h-full min-h-[160px] rounded-lg min-w-0",style:q,children:Array.from({length:J}).map((e,t)=>(0,n.jsx)("div",{className:"bg-accent/25 border-2 border-accent/60 rounded-lg flex items-center justify-center text-white font-semibold text-sm sm:text-base font-mono shrink-0 min-w-[44px] min-h-[44px] sm:min-w-[52px] sm:min-h-[52px] shadow-sm",children:t+1},t))})})]}),(0,n.jsxs)("div",{className:"space-y-3 sm:space-y-4 min-w-0",children:[(0,n.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,n.jsx)("label",{className:"text-sm text-text-secondary w-full",children:"Justify"}),u.map((e,t)=>(0,n.jsx)("button",{type:"button",onClick:()=>T(t),className:"px-2 py-1 rounded text-xs font-medium ".concat(N===t?"bg-accent/20 text-accent":"bg-card/60 text-text-secondary hover:text-text-secondary"),children:e.label},e.value))]}),(0,n.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,n.jsx)("label",{className:"text-sm text-text-secondary w-full",children:"Align"}),x.map((e,t)=>(0,n.jsx)("button",{type:"button",onClick:()=>C(t),className:"px-2 py-1 rounded text-xs font-medium ".concat(A===t?"bg-accent/20 text-accent":"bg-card/60 text-text-secondary hover:text-text-secondary"),children:e.label},e.value))]}),(0,n.jsxs)("div",{className:"flex flex-wrap gap-2 items-center",children:[(0,n.jsx)("label",{className:"text-sm text-text-secondary",children:"Gap"}),(0,n.jsx)("select",{value:f[W],onChange:e=>E(f.indexOf(Number(e.target.value))),className:"px-3 py-1.5 bg-card/60 border border-border/60 rounded-lg text-foreground text-sm",children:f.map(e=>(0,n.jsx)("option",{value:e,children:0===e?"0":"".concat(4*e,"px")},e))})]}),"flex"===b&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,n.jsx)("label",{className:"text-sm text-text-secondary w-full",children:"Direction"}),d.map((e,t)=>(0,n.jsx)("button",{type:"button",onClick:()=>k(t),className:"px-2 py-1 rounded text-xs font-medium ".concat(j===t?"bg-accent/20 text-accent":"bg-card/60 text-text-secondary hover:text-text-secondary"),children:e.label},e.value))]}),(0,n.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,n.jsx)("label",{className:"text-sm text-text-secondary w-full",children:"Wrap"}),p.map((e,t)=>(0,n.jsx)("button",{type:"button",onClick:()=>O(t),className:"px-2 py-1 rounded text-xs font-medium ".concat(S===t?"bg-accent/20 text-accent":"bg-card/60 text-text-secondary hover:text-text-secondary"),children:e.label},e.value))]})]}),"grid"===b&&(0,n.jsxs)("div",{className:"flex gap-4 flex-wrap",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{className:"text-sm text-text-secondary block mb-1",children:"Columns"}),(0,n.jsx)("select",{value:M,onChange:e=>F(Number(e.target.value)),className:"px-3 py-1.5 bg-card/60 border border-border/60 rounded-lg text-foreground text-sm",children:m.map(e=>(0,n.jsx)("option",{value:e,children:e},e))})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{className:"text-sm text-text-secondary block mb-1",children:"Rows"}),(0,n.jsx)("select",{value:L,onChange:e=>R(Number(e.target.value)),className:"px-3 py-1.5 bg-card/60 border border-border/60 rounded-lg text-foreground text-sm",children:h.map(e=>(0,n.jsx)("option",{value:e,children:e},e))})]})]})]})]}),(0,n.jsxs)("div",{className:"mt-8 space-y-4",children:[(0,n.jsxs)("div",{className:"flex items-center justify-between",children:[(0,n.jsx)("h3",{className:"text-lg font-medium text-white",children:"Output"}),(0,n.jsx)(i.A,{options:[{id:"css",label:"CSS"},{id:"tailwind",label:"Tailwind"}],activeTab:g,onChange:e=>v(e)})]}),(0,n.jsx)(s.A,{code:"css"===g?z:'<div className="'.concat(D,'">\n {/* items */}\n</div>'),language:"css"===g?"css":"html",showFullScreenPopup:!1})]})]})}},66474:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("chevron-down",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]])},66516:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("share-2",[["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}],["circle",{cx:"6",cy:"12",r:"3",key:"w7nqdw"}],["circle",{cx:"18",cy:"19",r:"3",key:"1xt0gg"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49",key:"47mynk"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49",key:"1n3mei"}]])},74575:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("link-2",[["path",{d:"M9 17H7A5 5 0 0 1 7 7h2",ke
1y:"8i5ue5"}],["path",{d:"M15 7h2a5 5 0 1 1 0 10h-2",key:"1b9ql8"}],["line",{x1:"8",x2:"16",y1:"12",y2:"12",key:"1jonct"}]])},77813:(e,t,l)=>{l.d(t,{A:()=>o});var n=l(95155),a=l(12115),r=l(5196),i=l(85339),s=l(24357),c=l(16399);function o(e){let{text:t,className:l="",onCopy:o}=e,[d,u]=(0,a.useState)("idle"),x=async()=>{try{await navigator.clipboard.writeText(t),u("copied"),null==o||o();let e=(0,c.Zs)(window.location.pathname);e&&(0,c.lf)("copy",e),setTimeout(()=>u("idle"),2e3)}catch(e){u("error"),setTimeout(()=>u("idle"),3e3)}};return(0,n.jsx)("button",{onClick:x,className:"\n inline-flex items-center gap-2 px-3 py-1.5 cursor-pointer\n bg-card/60 hover:bg-accent/15\n border border-border/60 hover:border-accent/50\n rounded-lg text-sm text-text-secondary hover:text-accent\n transition-all duration-300\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent\n focus-visible:ring-offset-2 focus-visible:ring-offset-background\n ".concat(l,"\n "),"aria-label":"copied"===d?"Copied!":"error"===d?"Copy failed":"Copy to clipboard",children:"copied"===d?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.A,{className:"w-4 h-4 text-emerald-400"}),(0,n.jsx)("span",{className:"text-emerald-400",children:"Copied!"})]}):"error"===d?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.A,{className:"w-4 h-4 text-red-400"}),(0,n.jsx)("span",{className:"text-red-400",children:"Failed to copy"})]}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.A,{className:"w-4 h-4"}),(0,n.jsx)("span",{children:"Copy"})]})})}},84899:(e,t,l)=>{function n(e){return"".concat("gj-tool-draft",":").concat(e)}function a(e,t){let l=new URLSearchParams;for(let[n,a]of Object.entries(e))a!==t[n]&&null!=a&&("boolean"==typeof a?l.set(n,a?"1":"0"):l.set(n,String(a)));return l.toString()}function r(e,t){let l=new URLSearchParams(e.startsWith("?")?e.slice(1):e),n={};for(let[e,a]of Object.entries(t)){if(!l.has(e))continue;let t=l.get(e);if(null!==t)if("number"==typeof a){let l=Number(t);Number.isFinite(l)&&(n[e]=l)}else"boolean"==typeof a?"1"===t||"true"===t?n[e]=!0:("0"===t||"false"===t)&&(n[e]=!1):n[e]=t}return n}function i(e){return null!=e&&("string"==typeof e?e.trim().length>0:Array.isArray(e)?e.length>0:"object"==typeof e?Object.keys(e).length>0:"number"!=typeof e||Number.isFinite(e))}function s(e,t){return Object.entries(e).some(e=>{let[l,n]=e;return l in t&&!function(e,t){if(e===t)return!0;try{return JSON.stringify(e)===JSON.stringify(t)}catch(e){return!1}}(n,t[l])&&i(n)})}function c(e){return Object.values(e).some(i)}l.d(t,{CW:()=>a,bO:()=>n,e:()=>r,kQ:()=>c,xp:()=>s})},85250:(e,t,l)=>{l.d(t,{A:()=>a});var n=l(95155);function a(e){let{options:t,activeTab:l,onChange:a}=e;return(0,n.jsx)("div",{className:"flex flex-wrap bg-background/60 rounded-lg p-1 border border-border/60 w-fit",children:t.map(e=>(0,n.jsx)("button",{onClick:()=>a(e.id),className:"\n px-4 py-2 rounded-md text-sm font-medium transition-all duration-300 cursor-pointer\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent\n focus-visible:ring-offset-2 focus-visible:ring-offset-background\n ".concat(l===e.id?"bg-accent/20 text-accent border border-accent/50":"text-text-secondary hover:text-foreground border border-transparent","\n "),children:e.label},e.id))})}},85339:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("circle-alert",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"12",x2:"12",y1:"8",y2:"12",key:"1pkeuh"}],["line",{x1:"12",x2:"12.01",y1:"16",y2:"16",key:"4dfq90"}]])},91981:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("maximize-2",[["path",{d:"M15 3h6v6",key:"1q9fwt"}],["path",{d:"m21 3-7 7",key:"1l2asr"}],["path",{d:"m3 21 7-7",key:"tjx5ai"}],["path",{d:"M9 21H3v-6",key:"wtvkvv"}]])},97520:(e,t,l)=>{l.d(t,{A:()=>n});let n=(0,l(19946).A)("puzzle",[["path",{d:"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z",key:"w46dr5"}]])}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.