1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[314],{800:(n,s,e)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/rebuilding-playground-with-cladd",function(){return e(2033)}])},2033:(n,s,e)=>{"use strict";e.r(s),e.d(s,{default:()=>r,meta:()=>l});var a=e(4848),t=e(8453),c=e(3390);let l={title:"Rebuilding the Swiper Playground with cladd",date:"2026-05-26T10:00:00.000Z",image:"/images/blog/rebuilding-playground-with-cladd/cover.jpg",published:!0},i=n=>{let{children:s}=n;return(0,a.jsx)(c.n,{meta:l,children:s})};function o(n){let s={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,t.R)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["A few weeks back we shipped the ",(0,a.jsx)(s.a,{href:"/playground",children:"Swiper Playground"}),' - an interactive parameter explorer that lets you preview any combination of Swiper settings live in the browser. The first version did the job, but the UI was every kind of "good enough" - hand-rolled toggles, hand-rolled steppers, hand-rolled selects, each tuned once and never quite consistent with the next.']}),"\n",(0,a.jsx)(s.p,{children:"This week we rebuilt the whole thing. Same features, denser layout, drag-to-scrub numeric inputs, segmented controls for binary options, real tooltips on icon-only segments. The rewrite took an afternoon."}),"\n",(0,a.jsxs)(s.p,{children:["The reason it was fast: we built it on ",(0,a.jsx)(s.a,{href:"https://cladd.io",children:"cladd"}),", our new React UI kit."]}),"\n",(0,a.jsx)(s.h2,{id:"what-the-old-playground-looked-like",children:"What the old playground looked like"}),"\n",(0,a.jsx)(s.p,{children:"The sidebar has roughly 80 parameters. Every row in v1 used one of three hand-rolled controls:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:["A ",(0,a.jsx)(s.strong,{children:"boolean toggle"})," - a styled button with an absolutely-positioned animated thumb. ~25 lines."]}),"\n",(0,a.jsxs)(s.li,{children:["A ",(0,a.jsx)(s.strong,{children:"number stepper"})," - ",(0,a.jsx)(s.code,{children:"-"})," button, editable inline value with clamp / snap math, ",(0,a.jsx)(s.code,{children:"+"})," button. ~80 lines."]}),"\n",(0,a.jsxs)(s.li,{children:["A ",(0,a.jsx)(s.strong,{children:"select"})," - native ",(0,a.jsx)(s.code,{children:"<select>"})," plus a custom popover variant for the effects picker (with PRO upsell rows). ~120 lines."]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["The shell pieces were the same story. The top action bar was three custom pill rails. The sidebar wrapper was a ",(0,a.jsx)(s.code,{children:"<div>"})," stack of cladd-tokens-in-disguise - ",(0,a.jsx)(s.code,{children:"bg-pg-surface-1"}),", ",(0,a.jsx)(s.code,{children:"border-outline/50"}),", ",(0,a.jsx)(s.code,{children:"rounded-3xl"}),". The export menu was a bespoke dropdown. Every section header had its own collapse logic."]}),"\n",(0,a.jsx)(s.p,{children:"That's roughly 300 lines of UI plumbing that wasn't really about Swiper."}),"\n",(0,a.jsx)(s.h2,{id:"the-swap",children:"The swap"}),"\n",(0,a.jsx)(s.h3,{id:"toggle-25-lines--1",children:"Toggle: 25 lines â 1"}),"\n",(0,a.jsx)(s.p,{children:"Before:"}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{className:"language-jsx",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),"button"]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"button",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token function",children:"onChange"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token operator",children:"!"}),"value",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token function",children:"clsx"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"\n ",(0,a.jsx)(s.span,{className:"token string",children:"'relative h-[22px] w-[40px] rounded-full transition-colors'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n value ",(0,a.jsx)(s.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(s.span,{className:"token string",children:"'bg-primary'"})," ",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:"'bg-white/15'"}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),"span"]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token function",children:"clsx"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"\n ",(0,a.jsx)(s.span,{className:"token string",children:"'absolute top-[3px] h-4 w-4 roun
1ded-full bg-white shadow transition-all'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n value ",(0,a.jsx)(s.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(s.span,{className:"token string",children:"'left-[20px]'"})," ",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:"'left-[3px]'"}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n"}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),"button"]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(s.p,{children:"After:"}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{className:"language-jsx",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Switch"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"sm",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"checked"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"value",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"onChange"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"onChange",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),"\n"]})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.img,{src:"/images/blog/rebuilding-playground-with-cladd/switch.jpg",alt:"Switch"})}),"\n",(0,a.jsx)(s.h3,{id:"number-stepper-drag-to-scrub",children:"Number stepper: drag to scrub"}),"\n",(0,a.jsxs)(s.p,{children:["The bigger upgrade here isn't lines saved - it's the gesture. ",(0,a.jsx)(s.code,{children:"NumberScrubber"})," is cladd's design-tool numeric input. Click the value to type, drag horizontally to scrub it. Hold ",(0,a.jsx)(s.code,{children:"Shift"})," for finer precision."]}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{className:"language-jsx",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"NumberScrubber"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"md",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"rounded"}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"value"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"value",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"onChange"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"onChange",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"min"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"min",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"max"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"max",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"step"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"step",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"displayValue"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token parameter",children:"v"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsxs)(s.span,{className:"token template-string",children:[(0,a.jsx)(s.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsxs)(s.span,{className:"token interpolation",children:[(0,a.jsx)(s.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"v",(0,a.jsx)(s.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsxs)(s.span,{className:"token interpolation",children:[(0,a.jsx)(s.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"unit",(0,a.jsx)(s.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),"\n"]})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.img,{src:"/images/blog/rebuilding-playground-with-cladd/number-scrubber.jpg",alt:"NumberScrubber"})}),"\n",(0,a.jsxs)(s.p,{children:["The ",(0,a.jsx)(s.code,{children:"displayValue"})," slot is what makes units land cleanly - ",(0,a.jsx)(s.code,{children:"300ms"}),", ",(0,a.jsx)(s.code,{children:"0px"}),", ",(0,a.jsx)(s.code,{children:"45\xb0"})," show in the field while the underlying value stays numeric. The 80-line ",(0,a.jsx)(s.code,{children:"-/+"})," stepper is gone."]}),"\n",(0,a.jsx)(s.h3,{id:"select-pick-the-right-shape-per-param",children:"Select: pick the right shape per param"}),"\n",(0,a.jsx)(s.p,{children:"For most enum params, the swap is mechanical:"}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{className:"language-jsx",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Select"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"rounded"}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"keyboardHints"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token boolean",children:"false"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"options"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"options",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"value"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"value",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"onChange"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"onChange",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),"\n"]})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.img,{src:"/images/blog/rebuilding-playground-with-cladd/select.jpg",alt:"Select"})}),"\n",(0,a.jsxs)(s.p,{children:["But for binary and ternary params (Direction, Loop, Grid Fill, Slide Content), a dropdown is the wrong shape. Two clicks to choose between ",(0,a.jsx)(s.code,{children:"off"})," and ",(0,a.jsx)(s.code,{children:"loop"})," is one click too many. We swapped those to ",(0,a.jsx)(s.code,{children:"Segmented"}),":"]}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{className:"language-jsx",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Toolbar"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"sm",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Segmented"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"options",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token parameter",children:"o"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"\n ",(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"SegmentedButton"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"o",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"value"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"active"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"o",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"==="})," value",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token function",children:"onChange"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"o",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"value"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"o",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"label"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"SegmentedButton"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Segmented"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n"}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Toolbar"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.img,{src:"/images/blog/rebuilding-playground-with-cladd/segmented.jpg",alt:"Segmented"})}),"\n",(0,a.jsxs)(s.p,{children:["For Slide Content (Text / Images / Text + Images) we went a step further - icon segments with ",(0,a.jsx)(s.code,{children:"Tooltip"})," for the label:"]}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{cla
1ssName:"language-jsx",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Tooltip"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"tooltip"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"option",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"label"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"SegmentedButton"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"active"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"option",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"==="})," value",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token spread operator",children:"..."}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token function",children:"renderIcon"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"option",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"iconKey"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"SegmentedButton"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"\n"}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Tooltip"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.img,{src:"/images/blog/rebuilding-playground-with-cladd/tooltip.jpg",alt:"Tooltip"})}),"\n",(0,a.jsx)(s.p,{children:"Three icons, three tooltips, six lines including the wrappers."}),"\n",(0,a.jsx)(s.h3,{id:"shell",children:"Shell"}),"\n",(0,a.jsx)(s.p,{children:"The frame got the same treatment:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:["Sidebar ",(0,a.jsx)(s.code,{children:'<div className="bg-pg-surface-1 rounded-3xl border ...">'})," â ",(0,a.jsx)(s.code,{children:'<Surface outline className="rounded-3xl">'})]}),"\n",(0,a.jsxs)(s.li,{children:["Top action rails â three ",(0,a.jsx)(s.code,{children:'<Toolbar size="md">'})," blocks with ",(0,a.jsx)(s.code,{children:"<ToolbarButton>"})," children"]}),"\n",(0,a.jsxs)(s.li,{children:["Export dropdown â ",(0,a.jsx)(s.code,{children:"<PopoverRoot><Popover>"})," with ",(0,a.jsx)(s.code,{children:"SectionTitle"}),", ",(0,a.jsx)(s.code,{children:"Chip"}),", and ",(0,a.jsx)(s.code,{children:"Button"})," inside"]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["The effects picker - with its PRO upsell rows linking out to ",(0,a.jsx)(s.a,{href:"https://studio.swiperjs.com",children:"Swiper Studio"})," - stayed as a custom ",(0,a.jsx)(s.code,{children:'PopoverRoot + List + ListButton as="a"'})," combo. cladd's ",(0,a.jsx)(s.code,{children:"Select"})," doesn't render anchor options natively, but the pieces compose cleanly enough that ~30 lines covered it."]}),"\n",(0,a.jsx)(s.h2,{id:"the-wins-that-arent-in-the-diff",children:"The wins that aren't in the diff"}),"\n",(0,a.jsx)(s.p,{children:"A few things that mattered more than the line count."}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.strong,{children:"Sizing is a contract."})," Every cladd primitive understands the same ",(0,a.jsx)(s.code,{children:"2xs â 2xl"})," scale. We pick ",(0,a.jsx)(s.code,{children:"md"})," once for the row and the Switch, NumberScrubber, Select, and Segmented all land at compatible heights. No more eyeballing 22 px vs 24 px vs 28 px."]}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.strong,{children:"Surface depth nests for free."})," The sidebar is a level-1 ",(0,a.jsx)(s.code,{children:"Surface"}),". Popovers above it auto-bump to level 2. Chips inside the popover go to level 3. We never set a ",(0,a.jsx)(s.code,{children:"surfaceLevel"})," prop by hand."]}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsxs)(s.strong,{children:[(0,a.jsx)(s.code,{children:"Tooltip"})," is just ",(0,a.jsx)(s.code,{children:'tooltip="..."'}),"."]})," Wrap any element, pass a string, done. No portal wiring, no positioning, no setup."]}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.strong,{children:"NumberScrubber is the unlock for inspector UIs."}),' Once you have a real drag-to-scrub input, the question stops being "what should the step be" and becomes "do I even need the +/- buttons" - you don\'t.']}),"\n",(0,a.jsx)(s.h2,{id:"one-snag-worth-mentioning",children:"One snag worth mentioning"}),"\n",(0,a.jsxs)(s.p,{children:["Dragging a ",(0,a.jsx)(s.code,{children:"NumberScrubber"})," while the pointer crossed the iframe preview broke the gesture - the iframe is a separate document and ate the pointer events."]}),"\n",(0,a.jsxs)(s.p,{children:["Fix: dispatch a window event from ",(0,a.jsx)(s.code,{children:"onPointerDown"}),", listen on the page, flip the iframe to ",(0,a.jsx)(s.code,{children:"pointer-events: none"})," until the next ",(0,a.jsx)(s.code,{children:"pointerup"}),":"]}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{className:"language-jsx",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"NumberScrubber"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"..."}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"onPointerDown"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"}),"\n ",(0,a.jsx)(s.span,{className:"token dom variable",children:"window"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"dispatchEvent"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token keyword",children:"new"})," ",(0,a.jsx)(s.span,{className:"token class-name",children:"Event"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:"'playground:scrub-start'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),"\n"]})}),"\n",(0,a.jsx)(s.pre,{className:"language-jsx",children:(0,a.jsxs)(s.code,{className:"language-jsx",children:[(0,a.jsx)(s.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(s.span,{className:"token function-variable function",children:"onScrubStart"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n iframeRef",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"current"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"style"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"pointerEvents"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token string",children:"'none'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(s.span,{className:"token function-variable function",children:"onEnd"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n iframeRef",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"current"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"style"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token property-access",children:"pointerEvents"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token string",children:"''"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token dom variable",children:"window"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"removeEventListener"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:"'pointerup'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," onEnd",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token dom variable",children:"window"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"removeEventListener"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:"'pointercancel'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," onEnd",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token dom variable",children:"window"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"addEventListener"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:"'pointerup'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," onEnd",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token dom variable",children:"window"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"addEventListener"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:"'pointercancel'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," onEnd",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token dom variable",children:"window"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"addEventListener"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:"'playground:scrub-start'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," onScrubStart",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(s.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"}),"\n ",(0,a.jsx)(s.span,{className:"token dom variable",children:"window"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method function property-access",children:"removeEventListener"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:"'playground:scrub-start'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," onScrubStart",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"["}),(0,a.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,a.jsx)(s.p,{children:"Fifteen lines, no library needed."}),"\n",(0,a.jsx)(s.h2,{id:"what-is-cladd",children:"What is cladd?"}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.a,{href:"https://cladd.io",children:"cladd"})," is an opinionated React UI kit (",(0,a.jsx)(s.code,{children:"@cladd-ui/react"}),") built for real apps, editors, and dashboards - not landing pages, not headless primitives. Dark-first by default, surface-based depth model, eleven accent to
1kens, a unified ",(0,a.jsx)(s.code,{children:"2xs â 2xl"})," size scale that everything obeys."]}),"\n",(0,a.jsxs)(s.p,{children:["It ships the primitives that actually appear in product UIs - ",(0,a.jsx)(s.code,{children:"Surface"}),", ",(0,a.jsx)(s.code,{children:"Toolbar"}),", ",(0,a.jsx)(s.code,{children:"List"}),", ",(0,a.jsx)(s.code,{children:"Select"}),", ",(0,a.jsx)(s.code,{children:"NumberScrubber"}),", ",(0,a.jsx)(s.code,{children:"Segmented"}),", ",(0,a.jsx)(s.code,{children:"Popover"}),", ",(0,a.jsx)(s.code,{children:"Tooltip"}),", ",(0,a.jsx)(s.code,{children:"Switch"}),", ",(0,a.jsx)(s.code,{children:"Chip"}),', and more. The kit is what you reach for when "I\'ll just style a div" is the wrong instinct.']}),"\n",(0,a.jsx)(s.p,{children:"It's new (v0.8.1 as of this post) and still moving fast. If you build dense React UIs - playgrounds, design tools, dashboards, inspectors - it's worth a look."}),"\n",(0,a.jsx)(s.h2,{id:"try-it",children:"Try it"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"The rebuilt playground:"})," ",(0,a.jsx)(s.a,{href:"/playground",children:"swiperjs.com/playground"})]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"cladd:"})," ",(0,a.jsx)(s.code,{children:"npm install @cladd-ui/react"})," - docs at ",(0,a.jsx)(s.a,{href:"https://cladd.io",children:"cladd.io"})]}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"And as always, if you love Swiper, please support the project:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://sponsors.nolimits4web.com",children:"Sponsor Swiper"})," - get your logo and link featured on the website"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/sponsors/nolimits4web",children:"GitHub Sponsors"})," - support the developer directly"]}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"And check out our other premium projects:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"https://startpagehq.com",children:"Start Page HQ"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"https://uiinitiative.com",children:"UI Initiative"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"https://studio.swiperjs.com",children:"Swiper Studio"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"https://paneflow.com",children:"PaneFlow"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"https://t0ggles.com",children:"t0ggles"})}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"Your support means a lot for us!"})]})}function r(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(i,{...n,children:(0,a.jsx)(o,{...n})})}}},n=>{var s=s=>n(n.s=s);n.O(0,[950,390,636,593,792],()=>s(800)),_N_E=n.O()}]);
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.