@typeroute/devtools 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useCallback as e,useContext as t,useEffect as n,useLayoutEffect as r,useMemo as i,useState as a}from"react";import{MatchContext as o,useLocation as s,useRouter as c}from"@typeroute/router";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f={radius:8,font:`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace`,spacing:{xs:2,sm:4,md:8,lg:12,xl:16},fontSize:{xs:10,sm:12},colors:{background:`#1e1e2e`,backgroundLight:`#2a2a3e`,backgroundHover:`#3a3a4e`,border:`#3a3a4e`,text:`#cdd6f4`,textDim:`#9399b2`,textMuted:`#6c7086`,accent:`#89b4fa`,accentHover:`#74c7ec`,success:`#a6e3a1`,warning:`hsl(49, 99%, 63%)`,error:`#f38ba8`,purple:`#cba6f7`}},p={toggleButton:(e,t)=>({position:`fixed`,zIndex:99999,background:f.colors.background,border:`1px solid ${f.colors.border}`,borderRadius:f.radius,padding:`${f.spacing.md}px ${f.spacing.lg}px`,cursor:`pointer`,display:e?`none`:`flex`,alignItems:`center`,gap:f.spacing.md,margin:f.spacing.xl,color:f.colors.text,fontFamily:f.font,fontSize:f.fontSize.sm,fontWeight:500,boxShadow:`0 4px 12px rgba(0, 0, 0, 0.3)`,...{"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0},"top-left":{top:0,left:0},"top-right":{top:0,right:0}}[t]}),floatingWindow:(e,t)=>({position:`fixed`,left:e.x,top:e.y,width:t.width,height:t.height,zIndex:99999,border:`1px solid ${f.colors.border}`,borderRadius:f.radius,boxShadow:`0 8px 32px rgba(0, 0, 0, 0.4)`,boxSizing:`border-box`,display:`flex`,flexDirection:`column`,overflow:`hidden`}),floatingWindowResizeHandle:e=>({position:`absolute`,zIndex:1,...{n:{top:0,left:f.spacing.md,right:f.spacing.md,height:6,cursor:`ns-resize`},s:{bottom:0,left:f.spacing.md,right:f.spacing.md,height:6,cursor:`ns-resize`},e:{right:0,top:f.spacing.md,bottom:f.spacing.md,width:6,cursor:`ew-resize`},w:{left:0,top:f.spacing.md,bottom:f.spacing.md,width:6,cursor:`ew-resize`},ne:{top:0,right:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nesw-resize`},nw:{top:0,left:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nwse-resize`},se:{bottom:0,right:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nwse-resize`},sw:{bottom:0,left:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nesw-resize`}}[e]}),floatingWindowHeader:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,padding:`${f.spacing.md}px ${f.spacing.lg}px`,borderBottom:`1px solid ${f.colors.border}`,backgroundColor:`${f.colors.backgroundLight}cc`,backdropFilter:`blur(12px)`,cursor:`move`,userSelect:`none`,flexShrink:0,boxSizing:`border-box`},floatingWindowTitle:{display:`flex`,alignItems:`center`,gap:f.spacing.md,fontWeight:600,color:f.colors.text,fontFamily:f.font,fontSize:f.fontSize.sm},floatingWindowContent:{flex:1,overflow:`hidden`,display:`flex`,flexDirection:`column`},panel:{display:`grid`,gridTemplateColumns:`repeat(3, 1fr)`,gap:1,height:`100%`,width:`100%`,backgroundColor:f.colors.border,fontFamily:f.font,fontSize:f.fontSize.sm,lineHeight:1.5,color:f.colors.text,boxSizing:`border-box`},section:{backgroundColor:f.colors.background,display:`flex`,flexDirection:`column`,overflow:`hidden`},sectionHeader:{display:`flex`,alignItems:`center`,gap:6,padding:`${f.spacing.md}px ${f.spacing.lg}px`,borderBottom:`1px solid ${f.colors.border}`,backgroundColor:f.colors.backgroundLight,fontWeight:600,fontSize:f.fontSize.sm,textTransform:`uppercase`,letterSpacing:.5,color:f.colors.textDim,flexShrink:0,boxSizing:`border-box`},sectionContent:{padding:`${f.spacing.md}px ${f.spacing.lg}px`,overflow:`auto`,flex:1,scrollbarWidth:`thin`,scrollbarColor:`${f.colors.border} ${f.colors.background}`},infoRow:e=>({display:`flex`,alignItems:`center`,gap:f.spacing.md,width:`100%`,padding:`${f.spacing.sm}px 0`,fontSize:f.fontSize.sm,lineHeight:1.5,color:f.colors.textDim,...e&&{background:`none`,border:`none`,cursor:`pointer`,fontFamily:`inherit`}}),infoLabel:{flexShrink:0},infoValue:(e=`default`)=>({color:e===`success`?f.colors.success:f.colors.text,fontFamily:`inherit`}),infoActionGroup:{display:`flex`,alignItems:`center`,gap:f.spacing.xs,marginLeft:`auto`},emptyState:{color:f.colors.textMuted,fontStyle:`italic`,fontSize:f.fontSize.sm,padding:`${f.spacing.sm}px 0`},routeTreeItem:e=>({display:`flex`,alignItems:`center`,padding:`${f.spacing.sm}px ${f.spacing.lg}px ${f.spacing.sm}px ${f.spacing.lg+e.depth*f.spacing.xl+f.spacing.sm}px`,margin:`0 -${f.spacing.lg}px`,gap:f.spacing.md,cursor:`pointer`,...e.selected&&{backgroundColor:`${f.colors.backgroundHover}50`},...e.active&&{backgroundColor:f.colors.backgroundHover}}),routeIndicator:e=>{let t={active:f.colors.warning,matched:f.colors.warning,inactive:f.colors.textMuted};return{width:f.spacing.md,height:f.spacing.md,borderRadius:`50%`,backgroundColor:t[e],flexShrink:0}},routeTreePattern:e=>({fontFamily:`inherit`,fontSize:f.fontSize.sm,color:e?f.colors.text:f.colors.textMuted}),routeTreeLabel:{marginLeft:6,fontSize:f.fontSize.xs,color:f.colors.textMuted,fontStyle:`italic`},inspector:{fontFamily:`inherit`,background:f.colors.backgroundLight,borderRadius:f.radius,padding:`${f.spacing.sm}px ${f.spacing.md}px`},inspectorRow:{display:`flex`,alignItems:`flex-start`,gap:f.spacing.sm,padding:`${f.spacing.xs}px 0`,fontSize:f.fontSize.sm,lineHeight:`18px`},inspectorKey:{color:f.colors.purple,flexShrink:0},inspectorColon:{color:f.colors.textMuted},inspectorValue:e=>({color:{string:f.colors.success,number:f.colors.warning,bigint:f.colors.warning,boolean:f.colors.accent,null:f.colors.textMuted,undefined:f.colors.textMuted,function:f.colors.textMuted,symbol:f.colors.textMuted,array:f.colors.text,object:f.colors.text}[e],wordBreak:`break-all`}),inspectorPreviewCount:{color:f.colors.textMuted,fontSize:f.fontSize.xs,marginLeft:f.spacing.sm},inspectorNested:{paddingLeft:f.spacing.lg,borderLeft:`1px solid ${f.colors.border}`,marginLeft:f.spacing.md},inspectorBracket:{color:f.colors.textMuted},button:{background:f.colors.background,border:`none`,color:f.colors.textDim,cursor:`pointer`,padding:f.spacing.sm,display:`flex`,alignItems:`center`,justifyContent:`center`,borderRadius:f.radius,flexShrink:0},expandButton:e=>({...p.button,background:`none`,padding:0,width:f.spacing.xl,height:18,visibility:e?`visible`:`hidden`}),badge:e=>{let t={success:f.colors.success,warning:f.colors.warning,error:f.colors.error,info:f.colors.accent};return{display:`inline-flex`,alignItems:`center`,padding:`${f.spacing.xs}px 6px`,borderRadius:f.radius,fontSize:f.fontSize.xs,fontWeight:600,textTransform:`uppercase`,backgroundColor:`${t[e]}22`,color:t[e]}}};function m({size:e}){return u(`img`,{src:`https://raw.githubusercontent.com/strblr/typeroute/master/favicon.svg`,width:e,height:e,alt:`TypeRoute`})}function h({size:e=16,style:t,children:n}){return u(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,style:t,children:n})}function g(e){return u(h,{...e,children:u(`polyline`,{points:`6 9 12 15 18 9`})})}function _(e){return u(h,{...e,children:u(`polyline`,{points:`9 18 15 12 9 6`})})}function v(e){return d(h,{...e,children:[u(`line`,{x1:`18`,y1:`6`,x2:`6`,y2:`18`}),u(`line`,{x1:`6`,y1:`6`,x2:`18`,y2:`18`})]})}function y(e){return d(h,{...e,children:[u(`circle`,{cx:`6`,cy:`19`,r:`3`}),u(`path`,{d:`M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15`}),u(`circle`,{cx:`18`,cy:`5`,r:`3`})]})}function b(e){return d(h,{...e,children:[u(`path`,{d:`M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z`}),u(`circle`,{cx:`12`,cy:`10`,r:`3`})]})}function x(e){return d(h,{...e,children:[u(`path`,{d:`M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z`}),u(`path`,{d:`M7 7h.01`})]})}function S(e){return d(h,{...e,children:[u(`path`,{d:`M19 12H5`}),u(`path`,{d:`m12 19-7-7 7-7`})]})}function C(e){return d(h,{...e,children:[u(`path`,{d:`M5 12h14`}),u(`path`,{d:`m12 5 7 7-7 7`})]})}function w({routes:e,currentMatch:t,selectedRoute:n,onSelectRoute:r}){let a=i(()=>t?new Set(E(t.route)):new Set,[t]);return u(`div`,{children:i(()=>{let t=new Set(e),n=new Map,r=[];for(let i=0;i<e.length;i++){let a=e[i],o=E(a);for(let e=0;e<o.length;e++){let a=o[e],s=n.get(a);if(s||(s={key:`${i}-${e}`,route:a,children:[],navigable:t.has(a)},n.set(a,s)),e===0)r.includes(s)||r.push(s);else{let t=n.get(o[e-1]);t.children.includes(s)||t.children.push(s)}}}let i=e=>{e.sort((e,t)=>e.route._.pattern.localeCompare(t.route._.pattern)),e.forEach(e=>i(e.children))};return i(r),r},[e]).map(e=>u(T,{node:e,depth:0,activeRoute:t?.route,activeSet:a,selectedRoute:n,onSelect:r},e.key))})}function T({node:e,activeRoute:t,activeSet:r,depth:o,selectedRoute:s,onSelect:c}){let[f,m]=a(!0),h=i(()=>D(e.route),[e.route]),v=r.has(e.route),y=e.children.length>0,b=s===e.route,x=t===e.route,S=x?`active`:v?`matched`:`inactive`,C=e.navigable?h===`/`?`index`:h===`*`?`catch-all`:null:`layout`;return n(()=>{v&&y&&m(!0)},[v,y]),d(l,{children:[d(`div`,{role:`button`,tabIndex:0,onClick:()=>c(e.route),style:p.routeTreeItem({selected:b,active:x,depth:o}),children:[u(`button`,{tabIndex:y?0:-1,"aria-label":f?`Collapse`:`Expand`,style:p.expandButton(y),onClick:e=>{e.stopPropagation(),m(!f)},children:u(f?g:_,{size:12})}),u(`span`,{style:p.routeIndicator(S)}),d(`code`,{style:p.routeTreePattern(e.navigable),children:[h,C&&d(`span`,{style:p.routeTreeLabel,children:[`(`,C,`)`]})]})]}),f&&e.children.map(e=>u(T,{node:e,depth:o+1,activeRoute:t,activeSet:r,selectedRoute:s,onSelect:c},e.key))]})}function E(e){let t=e._.p;return t?[...E(t),e]:[e]}function D(e){let t=e._.pattern;if(t===`/`)return`/`;let n=e._.p;if(n){let e=n._.pattern;t=t.substring(e.length)}return t.startsWith(`/`)&&(t=t.substring(1)),t}function O({label:e,value:t,style:n}){return u(`div`,{style:{...p.inspector,...n},children:u(k,{name:e,value:t,defaultExpanded:!0})})}function k({name:e,value:t,defaultExpanded:n}){let[r,i]=a(n),o=A(t),s=o===`object`||o===`array`,c=s?Object.keys(t).length:0,f=s&&!c,m=s&&!f,h=e=>{switch(e){case`string`:return`"${t}"`;case`bigint`:return`${t}n`;case`symbol`:return t.description?`Symbol(${t.description})`:`Symbol()`;case`function`:return`ƒ()`;case`array`:return`[${f?``:`...`}]`;case`object`:return`{${f?``:`...`}}`;default:return String(t)}},v=()=>d(`span`,{style:p.inspectorValue(o),children:[h(o),s&&u(`span`,{style:p.inspectorPreviewCount,children:c})]});return d(l,{children:[d(`div`,{style:p.inspectorRow,children:[u(`button`,{tabIndex:m?0:-1,"aria-label":r?`Collapse`:`Expand`,onClick:()=>i(!r),style:p.expandButton(m),children:u(r?g:_,{size:12})}),e!==void 0&&d(l,{children:[u(`span`,{style:p.inspectorKey,children:e}),u(`span`,{style:p.inspectorColon,children:`:`})]}),!s||f||!r?v():u(l,{children:u(`span`,{style:p.inspectorBracket,children:o===`array`?`[`:`{`})})]}),s&&!f&&r&&d(`div`,{style:p.inspectorNested,children:[o===`array`?t.map((e,t)=>u(k,{name:String(t),value:e},t)):Object.entries(t).map(([e,t])=>u(k,{name:e,value:t},e)),u(`div`,{style:p.inspectorBracket,children:o===`array`?`]`:`}`})]})]})}function A(e){return e===null?`null`:Array.isArray(e)?`array`:typeof e}function j({style:e,className:r}){let i=c(),s=t(o),[l,f]=a(null);return n(()=>f(null),[s]),d(`div`,{className:r,style:{...p.panel,...e},children:[u(M,{router:i,currentMatch:s,selectedRoute:l,onSelectRoute:f}),u(N,{router:i,currentMatch:s}),u(P,{currentMatch:s,selectedRoute:l})]})}function M({router:e,currentMatch:t,selectedRoute:n,onSelectRoute:r}){return d(`div`,{style:p.section,children:[d(`div`,{style:p.sectionHeader,children:[u(y,{size:12}),d(`span`,{children:[`Routes (`,e.routes.length,`)`]})]}),u(`div`,{style:p.sectionContent,children:u(w,{routes:e.routes,currentMatch:t,selectedRoute:n,onSelectRoute:r})})]})}function N({router:e,currentMatch:t}){let n=s(),r=t?Object.keys(t.params).length:0,i=Object.keys(n.search).length,a=t?.route._.validate(n.search),o=a?Object.keys(a).length:0;return d(`div`,{style:p.section,children:[d(`div`,{style:p.sectionHeader,children:[u(b,{size:12}),u(`span`,{children:`Current Location`})]}),d(`div`,{style:p.sectionContent,children:[d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Path:`}),u(`code`,{style:p.infoValue(),children:n.path}),d(`div`,{style:p.infoActionGroup,children:[u(`button`,{title:`Go back`,"aria-label":`Go back`,style:p.button,onClick:()=>e.navigate(-1),children:u(S,{size:12})}),u(`button`,{title:`Go forward`,"aria-label":`Go forward`,style:p.button,onClick:()=>e.navigate(1),children:u(C,{size:12})})]})]}),e.basePath!==`/`&&d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Base:`}),u(`code`,{style:p.infoValue(),children:e.basePath})]}),d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Match:`}),t?u(`code`,{style:p.infoValue(`success`),children:t.route._.pattern}):u(`span`,{style:p.badge(`error`),children:`No Match`})]}),r>0&&u(F,{label:`Params (${r})`,children:u(O,{value:t.params})}),(i>0||o>0)&&u(F,{label:`Search params (${i})`,children:u(O,{value:n.search})}),o>0&&u(F,{label:`Validated search params (${o})`,children:u(O,{value:a})}),n.state!==void 0&&u(F,{label:`History State`,children:u(O,{value:n.state})})]})]})}function P({currentMatch:e,selectedRoute:t}){let n=t??e?.route;return d(`div`,{style:p.section,children:[d(`div`,{style:p.sectionHeader,children:[u(x,{size:12}),u(`span`,{children:n===e?.route?`Matched Route`:`Selected Route`})]}),u(`div`,{style:p.sectionContent,children:n?d(l,{children:[d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Pattern:`}),u(`code`,{style:p.infoValue(),children:n._.pattern})]}),u(F,{label:`Pattern meta`,defaultExpanded:!1,children:u(O,{value:{keys:n._.keys,weights:n._.weights}})}),d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Components:`}),u(`span`,{style:p.infoValue(),children:n._.components.length})]}),d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Preloads:`}),u(`span`,{style:p.infoValue(),children:n._.preloads.length})]}),n._.handles.length>0&&u(F,{label:`Handles (${n._.handles.length})`,children:n._.handles.map((e,t)=>u(O,{value:e,style:t>0?{marginTop:4}:{}},t))})]}):u(`div`,{style:p.emptyState,children:`No route selected`})})]})}function F({label:e,defaultExpanded:t=!0,children:n}){let[r,i]=a(t);return d(l,{children:[d(`button`,{style:p.infoRow(!0),onClick:()=>i(!r),children:[u(`span`,{style:p.infoLabel,children:e}),u(`span`,{style:p.expandButton(!0),"aria-hidden":!0,children:u(r?g:_,{size:12})})]}),r&&n]})}function I(t,n){let r=`typeroute-devtools:${t}`,[i,o]=a(()=>{try{let e=window.localStorage.getItem(r);return e?JSON.parse(e):n}catch{return n}});return[i,e(e=>{o(t=>{e=e instanceof Function?e(t):e;try{window.localStorage.setItem(r,JSON.stringify(e))}catch{}return e})},[r])]}function L({open:e,onClose:t,title:n,defaultPosition:r={x:100,y:100},defaultSize:i={width:900,height:556},minSize:a={width:600,height:300},maxSize:o={width:1600,height:900},children:s}){let[c,l]=I(`position`,r),[f,h]=I(`size`,i),g=[`n`,`s`,`e`,`w`,`ne`,`nw`,`se`,`sw`],_=e=>({x:Math.max(0,Math.min(e.x,window.innerWidth-100)),y:Math.max(0,Math.min(e.y,window.innerHeight-50))}),y=e=>({width:Math.max(a.width,Math.min(e.width,o.width)),height:Math.max(a.height,Math.min(e.height,o.height))}),b=e=>{if(e.button!==0)return;e.preventDefault();let t,{clientX:n,clientY:r}=e,i=e=>{cancelAnimationFrame(t),t=requestAnimationFrame(()=>{l(_({x:c.x+e.clientX-n,y:c.y+e.clientY-r}))})},a=()=>{document.removeEventListener(`mousemove`,i),document.removeEventListener(`mouseup`,a)};document.addEventListener(`mousemove`,i),document.addEventListener(`mouseup`,a)},x=e=>t=>{if(t.button!==0)return;t.preventDefault();let n,{clientX:r,clientY:i}=t,a=t=>{cancelAnimationFrame(n),n=requestAnimationFrame(()=>{let n=t.clientX-r,a=t.clientY-i,o=f.width,s=f.height;e.includes(`e`)?o+=n:e.includes(`w`)&&(o-=n),e.includes(`s`)?s+=a:e.includes(`n`)&&(s-=a);let u=y({width:o,height:s}),d=c.x,p=c.y;e.includes(`w`)&&(d+=f.width-u.width),e.includes(`n`)&&(p+=f.height-u.height),h(u),l(_({x:d,y:p}))})},o=()=>{document.removeEventListener(`mousemove`,a),document.removeEventListener(`mouseup`,o)};document.addEventListener(`mousemove`,a),document.addEventListener(`mouseup`,o)};return e?d(`div`,{style:p.floatingWindow(c,f),children:[g.map(e=>u(`div`,{style:p.floatingWindowResizeHandle(e),onMouseDown:x(e)},e)),d(`div`,{style:p.floatingWindowHeader,onMouseDown:b,children:[d(`div`,{style:p.floatingWindowTitle,children:[u(m,{size:18}),u(`span`,{children:n})]}),u(`button`,{onClick:t,style:p.button,"aria-label":`Close devtools`,children:u(v,{size:16})})]}),u(`div`,{style:p.floatingWindowContent,children:s})]}):null}function R({defaultOpen:e=!1,buttonPosition:t=`bottom-left`,buttonStyle:n,buttonClassName:i,defaultPosition:o,defaultSize:s,minSize:c,maxSize:f}){let[h,g]=I(`open`,e),[_,v]=a(!1);return r(()=>v(!0),[]),_?d(l,{children:[d(`button`,{style:{...p.toggleButton(h,t),...n},className:i,onClick:()=>g(!0),"aria-label":`Open TypeRoute devtools`,children:[u(m,{size:18}),u(`span`,{children:`TypeRoute`})]}),u(L,{open:h,onClose:()=>g(!1),title:`TypeRoute Devtools`,defaultPosition:o,defaultSize:s,minSize:c,maxSize:f,children:u(j,{})})]}):null}export{R as Devtools,j as DevtoolsPanel,L as FloatingWindow};
|
|
1
|
+
import{useCallback as e,useContext as t,useEffect as n,useLayoutEffect as r,useMemo as i,useState as a}from"react";import{MatchContext as o,useLocation as s,useRouter as c}from"@typeroute/router";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f={radius:8,font:`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace`,spacing:{xs:2,sm:4,md:8,lg:12,xl:16},fontSize:{xs:10,sm:12},colors:{background:`#1e1e2e`,backgroundLight:`#2a2a3e`,backgroundHover:`#3a3a4e`,border:`#3a3a4e`,text:`#cdd6f4`,textDim:`#9399b2`,textMuted:`#6c7086`,accent:`#89b4fa`,accentHover:`#74c7ec`,success:`#a6e3a1`,warning:`hsl(49, 99%, 63%)`,error:`#f38ba8`,purple:`#cba6f7`}},p={toggleButton:(e,t)=>({position:`fixed`,zIndex:99999,background:f.colors.background,border:`1px solid ${f.colors.border}`,borderRadius:f.radius,padding:`${f.spacing.md}px ${f.spacing.lg}px`,cursor:`pointer`,display:e?`none`:`flex`,alignItems:`center`,gap:f.spacing.md,margin:f.spacing.xl,color:f.colors.text,fontFamily:f.font,fontSize:f.fontSize.sm,fontWeight:500,boxShadow:`0 4px 12px rgba(0, 0, 0, 0.3)`,...{"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0},"top-left":{top:0,left:0},"top-right":{top:0,right:0}}[t]}),floatingWindow:(e,t)=>({position:`fixed`,left:e.x,top:e.y,width:t.width,height:t.height,zIndex:99999,border:`1px solid ${f.colors.border}`,borderRadius:f.radius,boxShadow:`0 8px 32px rgba(0, 0, 0, 0.4)`,boxSizing:`border-box`,display:`flex`,flexDirection:`column`,overflow:`hidden`}),floatingWindowResizeHandle:e=>({position:`absolute`,zIndex:1,touchAction:`none`,...{n:{top:0,left:f.spacing.md,right:f.spacing.md,height:6,cursor:`ns-resize`},s:{bottom:0,left:f.spacing.md,right:f.spacing.md,height:6,cursor:`ns-resize`},e:{right:0,top:f.spacing.md,bottom:f.spacing.md,width:6,cursor:`ew-resize`},w:{left:0,top:f.spacing.md,bottom:f.spacing.md,width:6,cursor:`ew-resize`},ne:{top:0,right:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nesw-resize`},nw:{top:0,left:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nwse-resize`},se:{bottom:0,right:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nwse-resize`},sw:{bottom:0,left:0,width:f.spacing.lg,height:f.spacing.lg,cursor:`nesw-resize`}}[e]}),floatingWindowHeader:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,padding:`${f.spacing.md}px ${f.spacing.lg}px`,borderBottom:`1px solid ${f.colors.border}`,backgroundColor:`${f.colors.backgroundLight}cc`,backdropFilter:`blur(12px)`,cursor:`move`,userSelect:`none`,touchAction:`none`,flexShrink:0,boxSizing:`border-box`},floatingWindowTitle:{display:`flex`,alignItems:`center`,gap:f.spacing.md,fontWeight:600,color:f.colors.text,fontFamily:f.font,fontSize:f.fontSize.sm},floatingWindowContent:{flex:1,overflow:`hidden`,display:`flex`,flexDirection:`column`},panel:{display:`grid`,gridTemplateColumns:`repeat(3, 1fr)`,gap:1,height:`100%`,width:`100%`,backgroundColor:f.colors.border,fontFamily:f.font,fontSize:f.fontSize.sm,lineHeight:1.5,color:f.colors.text,boxSizing:`border-box`},section:{backgroundColor:f.colors.background,display:`flex`,flexDirection:`column`,overflow:`hidden`},sectionHeader:{display:`flex`,alignItems:`center`,gap:6,padding:`${f.spacing.md}px ${f.spacing.lg}px`,borderBottom:`1px solid ${f.colors.border}`,backgroundColor:f.colors.backgroundLight,fontWeight:600,fontSize:f.fontSize.sm,textTransform:`uppercase`,letterSpacing:.5,color:f.colors.textDim,flexShrink:0,boxSizing:`border-box`},sectionContent:{padding:`${f.spacing.md}px ${f.spacing.lg}px`,overflow:`auto`,flex:1,scrollbarWidth:`thin`,scrollbarColor:`${f.colors.border} ${f.colors.background}`},infoRow:e=>({display:`flex`,alignItems:`center`,gap:f.spacing.md,width:`100%`,padding:`${f.spacing.sm}px 0`,fontSize:f.fontSize.sm,lineHeight:1.5,color:f.colors.textDim,...e&&{background:`none`,border:`none`,cursor:`pointer`,fontFamily:`inherit`}}),infoLabel:{flexShrink:0},infoValue:(e=`default`)=>({color:e===`success`?f.colors.success:f.colors.text,fontFamily:`inherit`}),infoActionGroup:{display:`flex`,alignItems:`center`,gap:f.spacing.xs,marginLeft:`auto`},emptyState:{color:f.colors.textMuted,fontStyle:`italic`,fontSize:f.fontSize.sm,padding:`${f.spacing.sm}px 0`},routeTreeItem:e=>({display:`flex`,alignItems:`center`,padding:`${f.spacing.sm}px ${f.spacing.lg}px ${f.spacing.sm}px ${f.spacing.lg+e.depth*f.spacing.xl+f.spacing.sm}px`,margin:`0 -${f.spacing.lg}px`,gap:f.spacing.md,cursor:`pointer`,...e.selected&&{backgroundColor:`${f.colors.backgroundHover}50`},...e.active&&{backgroundColor:f.colors.backgroundHover}}),routeIndicator:e=>{let t={active:f.colors.warning,matched:f.colors.warning,inactive:f.colors.textMuted};return{width:f.spacing.md,height:f.spacing.md,borderRadius:`50%`,backgroundColor:t[e],flexShrink:0}},routeTreePattern:e=>({fontFamily:`inherit`,fontSize:f.fontSize.sm,color:e?f.colors.text:f.colors.textMuted}),routeTreeLabel:{marginLeft:6,fontSize:f.fontSize.xs,color:f.colors.textMuted,fontStyle:`italic`},inspector:{fontFamily:`inherit`,background:f.colors.backgroundLight,borderRadius:f.radius,padding:`${f.spacing.sm}px ${f.spacing.md}px`},inspectorRow:{display:`flex`,alignItems:`flex-start`,gap:f.spacing.sm,padding:`${f.spacing.xs}px 0`,fontSize:f.fontSize.sm,lineHeight:`18px`},inspectorKey:{color:f.colors.purple,flexShrink:0},inspectorColon:{color:f.colors.textMuted},inspectorValue:e=>({color:{string:f.colors.success,number:f.colors.warning,bigint:f.colors.warning,boolean:f.colors.accent,null:f.colors.textMuted,undefined:f.colors.textMuted,function:f.colors.textMuted,symbol:f.colors.textMuted,array:f.colors.text,object:f.colors.text}[e],wordBreak:`break-all`}),inspectorPreviewCount:{color:f.colors.textMuted,fontSize:f.fontSize.xs,marginLeft:f.spacing.sm},inspectorNested:{paddingLeft:f.spacing.lg,borderLeft:`1px solid ${f.colors.border}`,marginLeft:f.spacing.md},inspectorBracket:{color:f.colors.textMuted},button:{background:f.colors.background,border:`none`,color:f.colors.textDim,cursor:`pointer`,padding:f.spacing.sm,display:`flex`,alignItems:`center`,justifyContent:`center`,borderRadius:f.radius,flexShrink:0},expandButton:e=>({...p.button,background:`none`,padding:0,width:f.spacing.xl,height:18,visibility:e?`visible`:`hidden`}),badge:e=>{let t={success:f.colors.success,warning:f.colors.warning,error:f.colors.error,info:f.colors.accent};return{display:`inline-flex`,alignItems:`center`,padding:`${f.spacing.xs}px 6px`,borderRadius:f.radius,fontSize:f.fontSize.xs,fontWeight:600,textTransform:`uppercase`,backgroundColor:`${t[e]}22`,color:t[e]}}};function m({size:e}){return u(`img`,{src:`https://raw.githubusercontent.com/strblr/typeroute/master/favicon.svg`,width:e,height:e,alt:`TypeRoute`})}function h({size:e=16,style:t,children:n}){return u(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,style:t,children:n})}function g(e){return u(h,{...e,children:u(`polyline`,{points:`6 9 12 15 18 9`})})}function _(e){return u(h,{...e,children:u(`polyline`,{points:`9 18 15 12 9 6`})})}function v(e){return d(h,{...e,children:[u(`line`,{x1:`18`,y1:`6`,x2:`6`,y2:`18`}),u(`line`,{x1:`6`,y1:`6`,x2:`18`,y2:`18`})]})}function y(e){return d(h,{...e,children:[u(`circle`,{cx:`6`,cy:`19`,r:`3`}),u(`path`,{d:`M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15`}),u(`circle`,{cx:`18`,cy:`5`,r:`3`})]})}function b(e){return d(h,{...e,children:[u(`path`,{d:`M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z`}),u(`circle`,{cx:`12`,cy:`10`,r:`3`})]})}function x(e){return d(h,{...e,children:[u(`path`,{d:`M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z`}),u(`path`,{d:`M7 7h.01`})]})}function S(e){return d(h,{...e,children:[u(`path`,{d:`M19 12H5`}),u(`path`,{d:`m12 19-7-7 7-7`})]})}function C(e){return d(h,{...e,children:[u(`path`,{d:`M5 12h14`}),u(`path`,{d:`m12 5 7 7-7 7`})]})}function w({routes:e,currentMatch:t,selectedRoute:n,onSelectRoute:r}){let a=i(()=>t?new Set(E(t.route)):new Set,[t]);return u(`div`,{children:i(()=>{let t=new Set(e),n=new Map,r=[];for(let i=0;i<e.length;i++){let a=e[i],o=E(a);for(let e=0;e<o.length;e++){let a=o[e],s=n.get(a);if(s||(s={key:`${i}-${e}`,route:a,children:[],navigable:t.has(a)},n.set(a,s)),e===0)r.includes(s)||r.push(s);else{let t=n.get(o[e-1]);t.children.includes(s)||t.children.push(s)}}}let i=e=>{e.sort((e,t)=>e.route._.pattern.localeCompare(t.route._.pattern)),e.forEach(e=>i(e.children))};return i(r),r},[e]).map(e=>u(T,{node:e,depth:0,activeRoute:t?.route,activeSet:a,selectedRoute:n,onSelect:r},e.key))})}function T({node:e,activeRoute:t,activeSet:r,depth:o,selectedRoute:s,onSelect:c}){let[f,m]=a(!0),h=i(()=>D(e.route),[e.route]),v=r.has(e.route),y=e.children.length>0,b=s===e.route,x=t===e.route,S=x?`active`:v?`matched`:`inactive`,C=e.navigable?h===`/`?`index`:h===`*`?`catch-all`:null:`layout`;return n(()=>{v&&y&&m(!0)},[v,y]),d(l,{children:[d(`div`,{role:`button`,tabIndex:0,onClick:()=>c(e.route),style:p.routeTreeItem({selected:b,active:x,depth:o}),children:[u(`button`,{tabIndex:y?0:-1,"aria-label":f?`Collapse`:`Expand`,style:p.expandButton(y),onClick:e=>{e.stopPropagation(),m(!f)},children:u(f?g:_,{size:12})}),u(`span`,{style:p.routeIndicator(S)}),d(`code`,{style:p.routeTreePattern(e.navigable),children:[h,C&&d(`span`,{style:p.routeTreeLabel,children:[`(`,C,`)`]})]})]}),f&&e.children.map(e=>u(T,{node:e,depth:o+1,activeRoute:t,activeSet:r,selectedRoute:s,onSelect:c},e.key))]})}function E(e){let t=e._.p;return t?[...E(t),e]:[e]}function D(e){let t=e._.pattern;if(t===`/`)return`/`;let n=e._.p;if(n){let e=n._.pattern;t=t.substring(e.length)}return t.startsWith(`/`)&&(t=t.substring(1)),t}function O({label:e,value:t,style:n}){return u(`div`,{style:{...p.inspector,...n},children:u(k,{name:e,value:t,defaultExpanded:!0})})}function k({name:e,value:t,defaultExpanded:n}){let[r,i]=a(n),o=A(t),s=o===`object`||o===`array`,c=s?Object.keys(t).length:0,f=s&&!c,m=s&&!f,h=e=>{switch(e){case`string`:return`"${t}"`;case`bigint`:return`${t}n`;case`symbol`:return t.description?`Symbol(${t.description})`:`Symbol()`;case`function`:return`ƒ()`;case`array`:return`[${f?``:`...`}]`;case`object`:return`{${f?``:`...`}}`;default:return String(t)}},v=()=>d(`span`,{style:p.inspectorValue(o),children:[h(o),s&&u(`span`,{style:p.inspectorPreviewCount,children:c})]});return d(l,{children:[d(`div`,{style:p.inspectorRow,children:[u(`button`,{tabIndex:m?0:-1,"aria-label":r?`Collapse`:`Expand`,onClick:()=>i(!r),style:p.expandButton(m),children:u(r?g:_,{size:12})}),e!==void 0&&d(l,{children:[u(`span`,{style:p.inspectorKey,children:e}),u(`span`,{style:p.inspectorColon,children:`:`})]}),!s||f||!r?v():u(l,{children:u(`span`,{style:p.inspectorBracket,children:o===`array`?`[`:`{`})})]}),s&&!f&&r&&d(`div`,{style:p.inspectorNested,children:[o===`array`?t.map((e,t)=>u(k,{name:String(t),value:e},t)):Object.entries(t).map(([e,t])=>u(k,{name:e,value:t},e)),u(`div`,{style:p.inspectorBracket,children:o===`array`?`]`:`}`})]})]})}function A(e){return e===null?`null`:Array.isArray(e)?`array`:typeof e}function j({style:e,className:r}){let i=c(),s=t(o),[l,f]=a(null);return n(()=>f(null),[s]),d(`div`,{className:r,style:{...p.panel,...e},children:[u(M,{router:i,currentMatch:s,selectedRoute:l,onSelectRoute:f}),u(N,{router:i,currentMatch:s}),u(P,{currentMatch:s,selectedRoute:l})]})}function M({router:e,currentMatch:t,selectedRoute:n,onSelectRoute:r}){return d(`div`,{style:p.section,children:[d(`div`,{style:p.sectionHeader,children:[u(y,{size:12}),d(`span`,{children:[`Routes (`,e.routes.length,`)`]})]}),u(`div`,{style:p.sectionContent,children:u(w,{routes:e.routes,currentMatch:t,selectedRoute:n,onSelectRoute:r})})]})}function N({router:e,currentMatch:t}){let n=s(),r=t?Object.keys(t.params).length:0,i=Object.keys(n.search).length,a=t?.route._.validate(n.search),o=a?Object.keys(a).length:0;return d(`div`,{style:p.section,children:[d(`div`,{style:p.sectionHeader,children:[u(b,{size:12}),u(`span`,{children:`Current Location`})]}),d(`div`,{style:p.sectionContent,children:[d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Path:`}),u(`code`,{style:p.infoValue(),children:n.path}),d(`div`,{style:p.infoActionGroup,children:[u(`button`,{title:`Go back`,"aria-label":`Go back`,style:p.button,onClick:()=>e.navigate(-1),children:u(S,{size:12})}),u(`button`,{title:`Go forward`,"aria-label":`Go forward`,style:p.button,onClick:()=>e.navigate(1),children:u(C,{size:12})})]})]}),e.basePath!==`/`&&d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Base:`}),u(`code`,{style:p.infoValue(),children:e.basePath})]}),d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Match:`}),t?u(`code`,{style:p.infoValue(`success`),children:t.route._.pattern}):u(`span`,{style:p.badge(`error`),children:`No Match`})]}),r>0&&u(F,{label:`Params (${r})`,children:u(O,{value:t.params})}),(i>0||o>0)&&u(F,{label:`Search params (${i})`,children:u(O,{value:n.search})}),o>0&&u(F,{label:`Validated search params (${o})`,children:u(O,{value:a})}),n.state!==void 0&&u(F,{label:`History State`,children:u(O,{value:n.state})})]})]})}function P({currentMatch:e,selectedRoute:t}){let n=t??e?.route;return d(`div`,{style:p.section,children:[d(`div`,{style:p.sectionHeader,children:[u(x,{size:12}),u(`span`,{children:n===e?.route?`Matched Route`:`Selected Route`})]}),u(`div`,{style:p.sectionContent,children:n?d(l,{children:[d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Pattern:`}),u(`code`,{style:p.infoValue(),children:n._.pattern})]}),u(F,{label:`Pattern meta`,defaultExpanded:!1,children:u(O,{value:{keys:n._.keys,weights:n._.weights}})}),d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Components:`}),u(`span`,{style:p.infoValue(),children:n._.components.length})]}),d(`div`,{style:p.infoRow(),children:[u(`span`,{style:p.infoLabel,children:`Preloads:`}),u(`span`,{style:p.infoValue(),children:n._.preloads.length})]}),n._.handles.length>0&&u(F,{label:`Handles (${n._.handles.length})`,children:n._.handles.map((e,t)=>u(O,{value:e,style:t>0?{marginTop:4}:{}},t))})]}):u(`div`,{style:p.emptyState,children:`No route selected`})})]})}function F({label:e,defaultExpanded:t=!0,children:n}){let[r,i]=a(t);return d(l,{children:[d(`button`,{style:p.infoRow(!0),onClick:()=>i(!r),children:[u(`span`,{style:p.infoLabel,children:e}),u(`span`,{style:p.expandButton(!0),"aria-hidden":!0,children:u(r?g:_,{size:12})})]}),r&&n]})}function I(t,n){let r=`typeroute-devtools:${t}`,[i,o]=a(()=>{try{let e=window.localStorage.getItem(r);return e?JSON.parse(e):n}catch{return n}});return[i,e(e=>{o(t=>{e=e instanceof Function?e(t):e;try{window.localStorage.setItem(r,JSON.stringify(e))}catch{}return e})},[r])]}function L({open:e,onClose:t,title:n,defaultPosition:r={x:100,y:100},defaultSize:i={width:900,height:556},minSize:a={width:600,height:300},maxSize:o={width:1600,height:900},children:s}){let[c,l]=I(`position`,r),[f,h]=I(`size`,i),g=[`n`,`s`,`e`,`w`,`ne`,`nw`,`se`,`sw`],_=e=>({x:Math.max(0,Math.min(e.x,window.innerWidth-100)),y:Math.max(0,Math.min(e.y,window.innerHeight-50))}),y=e=>({width:Math.max(a.width,Math.min(e.width,o.width)),height:Math.max(a.height,Math.min(e.height,o.height))}),b=e=>{if(e.button!==0)return;e.preventDefault();let t,{clientX:n,clientY:r}=e,i=e=>{cancelAnimationFrame(t),t=requestAnimationFrame(()=>{l(_({x:c.x+e.clientX-n,y:c.y+e.clientY-r}))})},a=()=>{document.removeEventListener(`pointermove`,i),document.removeEventListener(`pointerup`,a)};document.addEventListener(`pointermove`,i),document.addEventListener(`pointerup`,a)},x=e=>t=>{if(t.button!==0)return;t.preventDefault();let n,{clientX:r,clientY:i}=t,a=t=>{cancelAnimationFrame(n),n=requestAnimationFrame(()=>{let n=t.clientX-r,a=t.clientY-i,o=f.width,s=f.height;e.includes(`e`)?o+=n:e.includes(`w`)&&(o-=n),e.includes(`s`)?s+=a:e.includes(`n`)&&(s-=a);let u=y({width:o,height:s}),d=c.x,p=c.y;e.includes(`w`)&&(d+=f.width-u.width),e.includes(`n`)&&(p+=f.height-u.height),h(u),l(_({x:d,y:p}))})},o=()=>{document.removeEventListener(`pointermove`,a),document.removeEventListener(`pointerup`,o)};document.addEventListener(`pointermove`,a),document.addEventListener(`pointerup`,o)};return e?d(`div`,{style:p.floatingWindow(c,f),children:[g.map(e=>u(`div`,{style:p.floatingWindowResizeHandle(e),onPointerDown:x(e)},e)),d(`div`,{style:p.floatingWindowHeader,onPointerDown:b,children:[d(`div`,{style:p.floatingWindowTitle,children:[u(m,{size:18}),u(`span`,{children:n})]}),u(`button`,{onClick:t,style:p.button,"aria-label":`Close devtools`,children:u(v,{size:16})})]}),u(`div`,{style:p.floatingWindowContent,children:s})]}):null}function R({defaultOpen:e=!1,buttonPosition:t=`bottom-left`,buttonStyle:n,buttonClassName:i,defaultPosition:o,defaultSize:s,minSize:c,maxSize:f}){let[h,g]=I(`open`,e),[_,v]=a(!1);return r(()=>v(!0),[]),_?d(l,{children:[d(`button`,{style:{...p.toggleButton(h,t),...n},className:i,onClick:()=>g(!0),"aria-label":`Open TypeRoute devtools`,children:[u(m,{size:18}),u(`span`,{children:`TypeRoute`})]}),u(L,{open:h,onClose:()=>g(!1),title:`TypeRoute Devtools`,defaultPosition:o,defaultSize:s,minSize:c,maxSize:f,children:u(j,{})})]}):null}export{R as Devtools,j as DevtoolsPanel,L as FloatingWindow};
|