🚨 Active Supply Chain Attack:node-ipc Package Compromised.Learn More →
@tanstack/router-devtools-core
Advanced tools
@tanstack/router-devtools-core - npm Package Compare versions
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
| import { D as untrack, E as onCleanup, O as useContext, S as createSignal, T as mergeProps, _ as Switch, a as addEventListener, b as createMemo, c as insert, d as setAttribute, f as spread, g as Show, h as Match, l as memo, m as For, n as ShadowDomTargetContext, o as className, p as template, r as useDevtoolsOnClose, s as delegateEvents, v as createComponent, x as createRenderEffect, y as createEffect } from "./context-D56_tqst.js"; | ||
| import { clsx } from "clsx"; | ||
| import invariant from "tiny-invariant"; | ||
| import { interpolatePath, rootRouteId, trimPath } from "@tanstack/router-core"; | ||
| import * as goober from "goober"; | ||
| //#region src/tokens.ts | ||
| var tokens = { | ||
| colors: { | ||
| inherit: "inherit", | ||
| current: "currentColor", | ||
| transparent: "transparent", | ||
| black: "#000000", | ||
| white: "#ffffff", | ||
| neutral: { | ||
| 50: "#f9fafb", | ||
| 100: "#f2f4f7", | ||
| 200: "#eaecf0", | ||
| 300: "#d0d5dd", | ||
| 400: "#98a2b3", | ||
| 500: "#667085", | ||
| 600: "#475467", | ||
| 700: "#344054", | ||
| 800: "#1d2939", | ||
| 900: "#101828" | ||
| }, | ||
| darkGray: { | ||
| 50: "#525c7a", | ||
| 100: "#49536e", | ||
| 200: "#414962", | ||
| 300: "#394056", | ||
| 400: "#313749", | ||
| 500: "#292e3d", | ||
| 600: "#212530", | ||
| 700: "#191c24", | ||
| 800: "#111318", | ||
| 900: "#0b0d10" | ||
| }, | ||
| gray: { | ||
| 50: "#f9fafb", | ||
| 100: "#f2f4f7", | ||
| 200: "#eaecf0", | ||
| 300: "#d0d5dd", | ||
| 400: "#98a2b3", | ||
| 500: "#667085", | ||
| 600: "#475467", | ||
| 700: "#344054", | ||
| 800: "#1d2939", | ||
| 900: "#101828" | ||
| }, | ||
| blue: { | ||
| 25: "#F5FAFF", | ||
| 50: "#EFF8FF", | ||
| 100: "#D1E9FF", | ||
| 200: "#B2DDFF", | ||
| 300: "#84CAFF", | ||
| 400: "#53B1FD", | ||
| 500: "#2E90FA", | ||
| 600: "#1570EF", | ||
| 700: "#175CD3", | ||
| 800: "#1849A9", | ||
| 900: "#194185" | ||
| }, | ||
| green: { | ||
| 25: "#F6FEF9", | ||
| 50: "#ECFDF3", | ||
| 100: "#D1FADF", | ||
| 200: "#A6F4C5", | ||
| 300: "#6CE9A6", | ||
| 400: "#32D583", | ||
| 500: "#12B76A", | ||
| 600: "#039855", | ||
| 700: "#027A48", | ||
| 800: "#05603A", | ||
| 900: "#054F31" | ||
| }, | ||
| red: { | ||
| 50: "#fef2f2", | ||
| 100: "#fee2e2", | ||
| 200: "#fecaca", | ||
| 300: "#fca5a5", | ||
| 400: "#f87171", | ||
| 500: "#ef4444", | ||
| 600: "#dc2626", | ||
| 700: "#b91c1c", | ||
| 800: "#991b1b", | ||
| 900: "#7f1d1d", | ||
| 950: "#450a0a" | ||
| }, | ||
| yellow: { | ||
| 25: "#FFFCF5", | ||
| 50: "#FFFAEB", | ||
| 100: "#FEF0C7", | ||
| 200: "#FEDF89", | ||
| 300: "#FEC84B", | ||
| 400: "#FDB022", | ||
| 500: "#F79009", | ||
| 600: "#DC6803", | ||
| 700: "#B54708", | ||
| 800: "#93370D", | ||
| 900: "#7A2E0E" | ||
| }, | ||
| purple: { | ||
| 25: "#FAFAFF", | ||
| 50: "#F4F3FF", | ||
| 100: "#EBE9FE", | ||
| 200: "#D9D6FE", | ||
| 300: "#BDB4FE", | ||
| 400: "#9B8AFB", | ||
| 500: "#7A5AF8", | ||
| 600: "#6938EF", | ||
| 700: "#5925DC", | ||
| 800: "#4A1FB8", | ||
| 900: "#3E1C96" | ||
| }, | ||
| teal: { | ||
| 25: "#F6FEFC", | ||
| 50: "#F0FDF9", | ||
| 100: "#CCFBEF", | ||
| 200: "#99F6E0", | ||
| 300: "#5FE9D0", | ||
| 400: "#2ED3B7", | ||
| 500: "#15B79E", | ||
| 600: "#0E9384", | ||
| 700: "#107569", | ||
| 800: "#125D56", | ||
| 900: "#134E48" | ||
| }, | ||
| pink: { | ||
| 25: "#fdf2f8", | ||
| 50: "#fce7f3", | ||
| 100: "#fbcfe8", | ||
| 200: "#f9a8d4", | ||
| 300: "#f472b6", | ||
| 400: "#ec4899", | ||
| 500: "#db2777", | ||
| 600: "#be185d", | ||
| 700: "#9d174d", | ||
| 800: "#831843", | ||
| 900: "#500724" | ||
| }, | ||
| cyan: { | ||
| 25: "#ecfeff", | ||
| 50: "#cffafe", | ||
| 100: "#a5f3fc", | ||
| 200: "#67e8f9", | ||
| 300: "#22d3ee", | ||
| 400: "#06b6d4", | ||
| 500: "#0891b2", | ||
| 600: "#0e7490", | ||
| 700: "#155e75", | ||
| 800: "#164e63", | ||
| 900: "#083344" | ||
| } | ||
| }, | ||
| alpha: { | ||
| 100: "ff", | ||
| 90: "e5", | ||
| 80: "cc", | ||
| 70: "b3", | ||
| 60: "99", | ||
| 50: "80", | ||
| 40: "66", | ||
| 30: "4d", | ||
| 20: "33", | ||
| 10: "1a", | ||
| 0: "00" | ||
| }, | ||
| font: { | ||
| size: { | ||
| "2xs": "calc(var(--tsrd-font-size) * 0.625)", | ||
| xs: "calc(var(--tsrd-font-size) * 0.75)", | ||
| sm: "calc(var(--tsrd-font-size) * 0.875)", | ||
| md: "var(--tsrd-font-size)", | ||
| lg: "calc(var(--tsrd-font-size) * 1.125)", | ||
| xl: "calc(var(--tsrd-font-size) * 1.25)", | ||
| "2xl": "calc(var(--tsrd-font-size) * 1.5)", | ||
| "3xl": "calc(var(--tsrd-font-size) * 1.875)", | ||
| "4xl": "calc(var(--tsrd-font-size) * 2.25)", | ||
| "5xl": "calc(var(--tsrd-font-size) * 3)", | ||
| "6xl": "calc(var(--tsrd-font-size) * 3.75)", | ||
| "7xl": "calc(var(--tsrd-font-size) * 4.5)", | ||
| "8xl": "calc(var(--tsrd-font-size) * 6)", | ||
| "9xl": "calc(var(--tsrd-font-size) * 8)" | ||
| }, | ||
| lineHeight: { | ||
| "3xs": "calc(var(--tsrd-font-size) * 0.75)", | ||
| "2xs": "calc(var(--tsrd-font-size) * 0.875)", | ||
| xs: "calc(var(--tsrd-font-size) * 1)", | ||
| sm: "calc(var(--tsrd-font-size) * 1.25)", | ||
| md: "calc(var(--tsrd-font-size) * 1.5)", | ||
| lg: "calc(var(--tsrd-font-size) * 1.75)", | ||
| xl: "calc(var(--tsrd-font-size) * 2)", | ||
| "2xl": "calc(var(--tsrd-font-size) * 2.25)", | ||
| "3xl": "calc(var(--tsrd-font-size) * 2.5)", | ||
| "4xl": "calc(var(--tsrd-font-size) * 2.75)", | ||
| "5xl": "calc(var(--tsrd-font-size) * 3)", | ||
| "6xl": "calc(var(--tsrd-font-size) * 3.25)", | ||
| "7xl": "calc(var(--tsrd-font-size) * 3.5)", | ||
| "8xl": "calc(var(--tsrd-font-size) * 3.75)", | ||
| "9xl": "calc(var(--tsrd-font-size) * 4)" | ||
| }, | ||
| weight: { | ||
| thin: "100", | ||
| extralight: "200", | ||
| light: "300", | ||
| normal: "400", | ||
| medium: "500", | ||
| semibold: "600", | ||
| bold: "700", | ||
| extrabold: "800", | ||
| black: "900" | ||
| }, | ||
| fontFamily: { | ||
| sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif", | ||
| mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | ||
| } | ||
| }, | ||
| breakpoints: { | ||
| xs: "320px", | ||
| sm: "640px", | ||
| md: "768px", | ||
| lg: "1024px", | ||
| xl: "1280px", | ||
| "2xl": "1536px" | ||
| }, | ||
| border: { radius: { | ||
| none: "0px", | ||
| xs: "calc(var(--tsrd-font-size) * 0.125)", | ||
| sm: "calc(var(--tsrd-font-size) * 0.25)", | ||
| md: "calc(var(--tsrd-font-size) * 0.375)", | ||
| lg: "calc(var(--tsrd-font-size) * 0.5)", | ||
| xl: "calc(var(--tsrd-font-size) * 0.75)", | ||
| "2xl": "calc(var(--tsrd-font-size) * 1)", | ||
| "3xl": "calc(var(--tsrd-font-size) * 1.5)", | ||
| full: "9999px" | ||
| } }, | ||
| size: { | ||
| 0: "0px", | ||
| .25: "calc(var(--tsrd-font-size) * 0.0625)", | ||
| .5: "calc(var(--tsrd-font-size) * 0.125)", | ||
| 1: "calc(var(--tsrd-font-size) * 0.25)", | ||
| 1.5: "calc(var(--tsrd-font-size) * 0.375)", | ||
| 2: "calc(var(--tsrd-font-size) * 0.5)", | ||
| 2.5: "calc(var(--tsrd-font-size) * 0.625)", | ||
| 3: "calc(var(--tsrd-font-size) * 0.75)", | ||
| 3.5: "calc(var(--tsrd-font-size) * 0.875)", | ||
| 4: "calc(var(--tsrd-font-size) * 1)", | ||
| 4.5: "calc(var(--tsrd-font-size) * 1.125)", | ||
| 5: "calc(var(--tsrd-font-size) * 1.25)", | ||
| 5.5: "calc(var(--tsrd-font-size) * 1.375)", | ||
| 6: "calc(var(--tsrd-font-size) * 1.5)", | ||
| 6.5: "calc(var(--tsrd-font-size) * 1.625)", | ||
| 7: "calc(var(--tsrd-font-size) * 1.75)", | ||
| 8: "calc(var(--tsrd-font-size) * 2)", | ||
| 9: "calc(var(--tsrd-font-size) * 2.25)", | ||
| 10: "calc(var(--tsrd-font-size) * 2.5)", | ||
| 11: "calc(var(--tsrd-font-size) * 2.75)", | ||
| 12: "calc(var(--tsrd-font-size) * 3)", | ||
| 14: "calc(var(--tsrd-font-size) * 3.5)", | ||
| 16: "calc(var(--tsrd-font-size) * 4)", | ||
| 20: "calc(var(--tsrd-font-size) * 5)", | ||
| 24: "calc(var(--tsrd-font-size) * 6)", | ||
| 28: "calc(var(--tsrd-font-size) * 7)", | ||
| 32: "calc(var(--tsrd-font-size) * 8)", | ||
| 36: "calc(var(--tsrd-font-size) * 9)", | ||
| 40: "calc(var(--tsrd-font-size) * 10)", | ||
| 44: "calc(var(--tsrd-font-size) * 11)", | ||
| 48: "calc(var(--tsrd-font-size) * 12)", | ||
| 52: "calc(var(--tsrd-font-size) * 13)", | ||
| 56: "calc(var(--tsrd-font-size) * 14)", | ||
| 60: "calc(var(--tsrd-font-size) * 15)", | ||
| 64: "calc(var(--tsrd-font-size) * 16)", | ||
| 72: "calc(var(--tsrd-font-size) * 18)", | ||
| 80: "calc(var(--tsrd-font-size) * 20)", | ||
| 96: "calc(var(--tsrd-font-size) * 24)" | ||
| }, | ||
| shadow: { | ||
| xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`, | ||
| sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`, | ||
| md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`, | ||
| lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`, | ||
| xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`, | ||
| "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`, | ||
| inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`, | ||
| none: () => `none` | ||
| }, | ||
| zIndices: { | ||
| hide: -1, | ||
| auto: "auto", | ||
| base: 0, | ||
| docked: 10, | ||
| dropdown: 1e3, | ||
| sticky: 1100, | ||
| banner: 1200, | ||
| overlay: 1300, | ||
| modal: 1400, | ||
| popover: 1500, | ||
| skipLink: 1600, | ||
| toast: 1700, | ||
| tooltip: 1800 | ||
| } | ||
| }; | ||
| //#endregion | ||
| //#region src/useStyles.tsx | ||
| var stylesFactory$1 = (shadowDOMTarget) => { | ||
| const { colors, font, size, alpha, shadow, border } = tokens; | ||
| const { fontFamily, lineHeight, size: fontSize } = font; | ||
| const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css; | ||
| return { | ||
| devtoolsPanelContainer: css` | ||
| direction: ltr; | ||
| position: fixed; | ||
| bottom: 0; | ||
| right: 0; | ||
| z-index: 99999; | ||
| width: 100%; | ||
| max-height: 90%; | ||
| border-top: 1px solid ${colors.gray[700]}; | ||
| transform-origin: top; | ||
| `, | ||
| devtoolsPanelContainerVisibility: (isOpen) => { | ||
| return css` | ||
| visibility: ${isOpen ? "visible" : "hidden"}; | ||
| `; | ||
| }, | ||
| devtoolsPanelContainerResizing: (isResizing) => { | ||
| if (isResizing()) return css` | ||
| transition: none; | ||
| `; | ||
| return css` | ||
| transition: all 0.4s ease; | ||
| `; | ||
| }, | ||
| devtoolsPanelContainerAnimation: (isOpen, height) => { | ||
| if (isOpen) return css` | ||
| pointer-events: auto; | ||
| transform: translateY(0); | ||
| `; | ||
| return css` | ||
| pointer-events: none; | ||
| transform: translateY(${height}px); | ||
| `; | ||
| }, | ||
| logo: css` | ||
| cursor: pointer; | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: transparent; | ||
| border: none; | ||
| font-family: ${fontFamily.sans}; | ||
| gap: ${tokens.size[.5]}; | ||
| padding: 0px; | ||
| &:hover { | ||
| opacity: 0.7; | ||
| } | ||
| &:focus-visible { | ||
| outline-offset: 4px; | ||
| border-radius: ${border.radius.xs}; | ||
| outline: 2px solid ${colors.blue[800]}; | ||
| } | ||
| `, | ||
| tanstackLogo: css` | ||
| font-size: ${font.size.md}; | ||
| font-weight: ${font.weight.bold}; | ||
| line-height: ${font.lineHeight.xs}; | ||
| white-space: nowrap; | ||
| color: ${colors.gray[300]}; | ||
| `, | ||
| routerLogo: css` | ||
| font-weight: ${font.weight.semibold}; | ||
| font-size: ${font.size.xs}; | ||
| background: linear-gradient(to right, #84cc16, #10b981); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| line-height: 1; | ||
| -webkit-text-fill-color: transparent; | ||
| white-space: nowrap; | ||
| `, | ||
| devtoolsPanel: css` | ||
| display: flex; | ||
| font-size: ${fontSize.sm}; | ||
| font-family: ${fontFamily.sans}; | ||
| background-color: ${colors.darkGray[700]}; | ||
| color: ${colors.gray[300]}; | ||
| @media (max-width: 700px) { | ||
| flex-direction: column; | ||
| } | ||
| @media (max-width: 600px) { | ||
| font-size: ${fontSize.xs}; | ||
| } | ||
| `, | ||
| dragHandle: css` | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 4px; | ||
| cursor: row-resize; | ||
| z-index: 100000; | ||
| &:hover { | ||
| background-color: ${colors.purple[400]}${alpha[90]}; | ||
| } | ||
| `, | ||
| firstContainer: css` | ||
| flex: 1 1 500px; | ||
| min-height: 40%; | ||
| max-height: 100%; | ||
| overflow: auto; | ||
| border-right: 1px solid ${colors.gray[700]}; | ||
| display: flex; | ||
| flex-direction: column; | ||
| `, | ||
| routerExplorerContainer: css` | ||
| overflow-y: auto; | ||
| flex: 1; | ||
| `, | ||
| routerExplorer: css` | ||
| padding: ${tokens.size[2]}; | ||
| `, | ||
| row: css` | ||
| display: flex; | ||
| align-items: center; | ||
| padding: ${tokens.size[2]} ${tokens.size[2.5]}; | ||
| gap: ${tokens.size[2.5]}; | ||
| border-bottom: ${colors.darkGray[500]} 1px solid; | ||
| align-items: center; | ||
| `, | ||
| detailsHeader: css` | ||
| font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif; | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 2; | ||
| background-color: ${colors.darkGray[600]}; | ||
| padding: 0px ${tokens.size[2]}; | ||
| font-weight: ${font.weight.medium}; | ||
| font-size: ${font.size.xs}; | ||
| min-height: ${tokens.size[8]}; | ||
| line-height: ${font.lineHeight.xs}; | ||
| text-align: left; | ||
| display: flex; | ||
| align-items: center; | ||
| `, | ||
| maskedBadge: css` | ||
| background: ${colors.yellow[900]}${alpha[70]}; | ||
| color: ${colors.yellow[300]}; | ||
| display: inline-block; | ||
| padding: ${tokens.size[0]} ${tokens.size[2.5]}; | ||
| border-radius: ${border.radius.full}; | ||
| font-size: ${font.size.xs}; | ||
| font-weight: ${font.weight.normal}; | ||
| border: 1px solid ${colors.yellow[300]}; | ||
| `, | ||
| maskedLocation: css` | ||
| color: ${colors.yellow[300]}; | ||
| `, | ||
| detailsContent: css` | ||
| padding: ${tokens.size[1.5]} ${tokens.size[2]}; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| font-size: ${font.size.xs}; | ||
| `, | ||
| routeMatchesToggle: css` | ||
| display: flex; | ||
| align-items: center; | ||
| border: 1px solid ${colors.gray[500]}; | ||
| border-radius: ${border.radius.sm}; | ||
| overflow: hidden; | ||
| `, | ||
| routeMatchesToggleBtn: (active, showBorder) => { | ||
| const classes = [css` | ||
| appearance: none; | ||
| border: none; | ||
| font-size: 12px; | ||
| padding: 4px 8px; | ||
| background: transparent; | ||
| cursor: pointer; | ||
| font-family: ${fontFamily.sans}; | ||
| font-weight: ${font.weight.medium}; | ||
| `]; | ||
| if (active) { | ||
| const activeStyles = css` | ||
| background: ${colors.darkGray[400]}; | ||
| color: ${colors.gray[300]}; | ||
| `; | ||
| classes.push(activeStyles); | ||
| } else { | ||
| const inactiveStyles = css` | ||
| color: ${colors.gray[500]}; | ||
| background: ${colors.darkGray[800]}${alpha[20]}; | ||
| `; | ||
| classes.push(inactiveStyles); | ||
| } | ||
| if (showBorder) classes.push(css` | ||
| border-right: 1px solid ${tokens.colors.gray[500]}; | ||
| `); | ||
| return classes; | ||
| }, | ||
| detailsHeaderInfo: css` | ||
| flex: 1; | ||
| justify-content: flex-end; | ||
| display: flex; | ||
| align-items: center; | ||
| font-weight: ${font.weight.normal}; | ||
| color: ${colors.gray[400]}; | ||
| `, | ||
| matchRow: (active) => { | ||
| const classes = [css` | ||
| display: flex; | ||
| border-bottom: 1px solid ${colors.darkGray[400]}; | ||
| cursor: pointer; | ||
| align-items: center; | ||
| padding: ${size[1]} ${size[2]}; | ||
| gap: ${size[2]}; | ||
| font-size: ${fontSize.xs}; | ||
| color: ${colors.gray[300]}; | ||
| `]; | ||
| if (active) { | ||
| const activeStyles = css` | ||
| background: ${colors.darkGray[500]}; | ||
| `; | ||
| classes.push(activeStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| matchIndicator: (color) => { | ||
| const classes = [css` | ||
| flex: 0 0 auto; | ||
| width: ${size[3]}; | ||
| height: ${size[3]}; | ||
| background: ${colors[color][900]}; | ||
| border: 1px solid ${colors[color][500]}; | ||
| border-radius: ${border.radius.full}; | ||
| transition: all 0.25s ease-out; | ||
| box-sizing: border-box; | ||
| `]; | ||
| if (color === "gray") { | ||
| const grayStyles = css` | ||
| background: ${colors.gray[700]}; | ||
| border-color: ${colors.gray[400]}; | ||
| `; | ||
| classes.push(grayStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| matchID: css` | ||
| flex: 1; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `, | ||
| ageTicker: (showWarning) => { | ||
| const classes = [css` | ||
| display: flex; | ||
| gap: ${size[1]}; | ||
| font-size: ${fontSize.xs}; | ||
| color: ${colors.gray[400]}; | ||
| font-variant-numeric: tabular-nums; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `]; | ||
| if (showWarning) { | ||
| const warningStyles = css` | ||
| color: ${colors.yellow[400]}; | ||
| `; | ||
| classes.push(warningStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| secondContainer: css` | ||
| flex: 1 1 500px; | ||
| min-height: 40%; | ||
| max-height: 100%; | ||
| overflow: auto; | ||
| border-right: 1px solid ${colors.gray[700]}; | ||
| display: flex; | ||
| flex-direction: column; | ||
| `, | ||
| thirdContainer: css` | ||
| flex: 1 1 500px; | ||
| overflow: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| border-right: 1px solid ${colors.gray[700]}; | ||
| @media (max-width: 700px) { | ||
| border-top: 2px solid ${colors.gray[700]}; | ||
| } | ||
| `, | ||
| fourthContainer: css` | ||
| flex: 1 1 500px; | ||
| min-height: 40%; | ||
| max-height: 100%; | ||
| overflow: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| `, | ||
| routesContainer: css` | ||
| overflow-x: auto; | ||
| overflow-y: visible; | ||
| `, | ||
| routesRowContainer: (active, isMatch) => { | ||
| const classes = [css` | ||
| display: flex; | ||
| border-bottom: 1px solid ${colors.darkGray[400]}; | ||
| align-items: center; | ||
| padding: ${size[1]} ${size[2]}; | ||
| gap: ${size[2]}; | ||
| font-size: ${fontSize.xs}; | ||
| color: ${colors.gray[300]}; | ||
| cursor: ${isMatch ? "pointer" : "default"}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `]; | ||
| if (active) { | ||
| const activeStyles = css` | ||
| background: ${colors.darkGray[500]}; | ||
| `; | ||
| classes.push(activeStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| routesRow: (isMatch) => { | ||
| const classes = [css` | ||
| flex: 1 0 auto; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `]; | ||
| if (!isMatch) { | ||
| const matchStyles = css` | ||
| color: ${colors.gray[400]}; | ||
| `; | ||
| classes.push(matchStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| routesRowInner: css` | ||
| display: 'flex'; | ||
| align-items: 'center'; | ||
| flex-grow: 1; | ||
| min-width: 0; | ||
| `, | ||
| routeParamInfo: css` | ||
| color: ${colors.gray[400]}; | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `, | ||
| nestedRouteRow: (isRoot) => { | ||
| return css` | ||
| margin-left: ${isRoot ? 0 : size[3.5]}; | ||
| border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`}; | ||
| `; | ||
| }, | ||
| code: css` | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| `, | ||
| matchesContainer: css` | ||
| flex: 1 1 auto; | ||
| overflow-y: auto; | ||
| `, | ||
| cachedMatchesContainer: css` | ||
| flex: 1 1 auto; | ||
| overflow-y: auto; | ||
| max-height: 50%; | ||
| `, | ||
| historyContainer: css` | ||
| display: flex; | ||
| flex: 1 1 auto; | ||
| overflow-y: auto; | ||
| max-height: 50%; | ||
| `, | ||
| historyOverflowContainer: css` | ||
| padding: ${size[1]} ${size[2]}; | ||
| font-size: ${tokens.font.size.xs}; | ||
| `, | ||
| maskedBadgeContainer: css` | ||
| flex: 1; | ||
| justify-content: flex-end; | ||
| display: flex; | ||
| `, | ||
| matchDetails: css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: ${tokens.size[2]}; | ||
| font-size: ${tokens.font.size.xs}; | ||
| color: ${tokens.colors.gray[300]}; | ||
| line-height: ${tokens.font.lineHeight.sm}; | ||
| `, | ||
| matchStatus: (status, isFetching) => { | ||
| const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : { | ||
| pending: "yellow", | ||
| success: "green", | ||
| error: "red", | ||
| notFound: "purple", | ||
| redirected: "gray" | ||
| }[status]; | ||
| return css` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 40px; | ||
| border-radius: ${tokens.border.radius.sm}; | ||
| font-weight: ${tokens.font.weight.normal}; | ||
| background-color: ${tokens.colors[color][900]}${tokens.alpha[90]}; | ||
| color: ${tokens.colors[color][300]}; | ||
| border: 1px solid ${tokens.colors[color][600]}; | ||
| margin-bottom: ${tokens.size[2]}; | ||
| transition: all 0.25s ease-out; | ||
| `; | ||
| }, | ||
| matchDetailsInfo: css` | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| flex: 1; | ||
| `, | ||
| matchDetailsInfoLabel: css` | ||
| display: flex; | ||
| `, | ||
| mainCloseBtn: css` | ||
| background: ${colors.darkGray[700]}; | ||
| padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]}; | ||
| border-radius: ${border.radius.md}; | ||
| position: fixed; | ||
| z-index: 99999; | ||
| display: inline-flex; | ||
| width: fit-content; | ||
| cursor: pointer; | ||
| appearance: none; | ||
| border: 0; | ||
| gap: 8px; | ||
| align-items: center; | ||
| border: 1px solid ${colors.gray[500]}; | ||
| font-size: ${font.size.xs}; | ||
| cursor: pointer; | ||
| transition: all 0.25s ease-out; | ||
| &:hover { | ||
| background: ${colors.darkGray[500]}; | ||
| } | ||
| `, | ||
| mainCloseBtnPosition: (position) => { | ||
| return css` | ||
| ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""} | ||
| ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""} | ||
| ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""} | ||
| ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""} | ||
| `; | ||
| }, | ||
| mainCloseBtnAnimation: (isOpen) => { | ||
| if (!isOpen) return css` | ||
| opacity: 1; | ||
| pointer-events: auto; | ||
| visibility: visible; | ||
| `; | ||
| return css` | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| visibility: hidden; | ||
| `; | ||
| }, | ||
| routerLogoCloseButton: css` | ||
| font-weight: ${font.weight.semibold}; | ||
| font-size: ${font.size.xs}; | ||
| background: linear-gradient(to right, #98f30c, #00f4a3); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| line-height: 1; | ||
| -webkit-text-fill-color: transparent; | ||
| white-space: nowrap; | ||
| `, | ||
| mainCloseBtnDivider: css` | ||
| width: 1px; | ||
| background: ${tokens.colors.gray[600]}; | ||
| height: 100%; | ||
| border-radius: 999999px; | ||
| color: transparent; | ||
| `, | ||
| mainCloseBtnIconContainer: css` | ||
| position: relative; | ||
| width: ${size[5]}; | ||
| height: ${size[5]}; | ||
| background: pink; | ||
| border-radius: 999999px; | ||
| overflow: hidden; | ||
| `, | ||
| mainCloseBtnIconOuter: css` | ||
| width: ${size[5]}; | ||
| height: ${size[5]}; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| filter: blur(3px) saturate(1.8) contrast(2); | ||
| `, | ||
| mainCloseBtnIconInner: css` | ||
| width: ${size[4]}; | ||
| height: ${size[4]}; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| `, | ||
| panelCloseBtn: css` | ||
| position: absolute; | ||
| cursor: pointer; | ||
| z-index: 100001; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| outline: none; | ||
| background-color: ${colors.darkGray[700]}; | ||
| &:hover { | ||
| background-color: ${colors.darkGray[500]}; | ||
| } | ||
| top: 0; | ||
| right: ${size[2]}; | ||
| transform: translate(0, -100%); | ||
| border-right: ${colors.darkGray[300]} 1px solid; | ||
| border-left: ${colors.darkGray[300]} 1px solid; | ||
| border-top: ${colors.darkGray[300]} 1px solid; | ||
| border-bottom: none; | ||
| border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px; | ||
| padding: ${size[1]} ${size[1.5]} ${size[.5]} ${size[1.5]}; | ||
| &::after { | ||
| content: ' '; | ||
| position: absolute; | ||
| top: 100%; | ||
| left: -${size[2.5]}; | ||
| height: ${size[1.5]}; | ||
| width: calc(100% + ${size[5]}); | ||
| } | ||
| `, | ||
| panelCloseBtnIcon: css` | ||
| color: ${colors.gray[400]}; | ||
| width: ${size[2]}; | ||
| height: ${size[2]}; | ||
| `, | ||
| navigateButton: css` | ||
| background: none; | ||
| border: none; | ||
| padding: 0 0 0 4px; | ||
| margin: 0; | ||
| color: ${colors.gray[400]}; | ||
| font-size: ${fontSize.md}; | ||
| cursor: pointer; | ||
| line-height: 1; | ||
| vertical-align: middle; | ||
| margin-right: 0.5ch; | ||
| flex-shrink: 0; | ||
| &:hover { | ||
| color: ${colors.blue[300]}; | ||
| } | ||
| ` | ||
| }; | ||
| }; | ||
| function useStyles$1() { | ||
| const [_styles] = createSignal(stylesFactory$1(useContext(ShadowDomTargetContext))); | ||
| return _styles; | ||
| } | ||
| //#endregion | ||
| //#region src/useLocalStorage.ts | ||
| var getItem = (key) => { | ||
| try { | ||
| const itemValue = localStorage.getItem(key); | ||
| if (typeof itemValue === "string") return JSON.parse(itemValue); | ||
| return; | ||
| } catch { | ||
| return; | ||
| } | ||
| }; | ||
| function useLocalStorage(key, defaultValue) { | ||
| const [value, setValue] = createSignal(); | ||
| createEffect(() => { | ||
| const initialValue = getItem(key); | ||
| if (typeof initialValue === "undefined" || initialValue === null) setValue(typeof defaultValue === "function" ? defaultValue() : defaultValue); | ||
| else setValue(initialValue); | ||
| }); | ||
| const setter = (updater) => { | ||
| setValue((old) => { | ||
| let newVal = updater; | ||
| if (typeof updater == "function") newVal = updater(old); | ||
| try { | ||
| localStorage.setItem(key, JSON.stringify(newVal)); | ||
| } catch {} | ||
| return newVal; | ||
| }); | ||
| }; | ||
| return [value, setter]; | ||
| } | ||
| //#endregion | ||
| //#region src/utils.tsx | ||
| var isServer = typeof window === "undefined"; | ||
| function getStatusColor(match) { | ||
| return match.isFetching && match.status === "success" ? match.isFetching === "beforeLoad" ? "purple" : "blue" : { | ||
| pending: "yellow", | ||
| success: "green", | ||
| error: "red", | ||
| notFound: "purple", | ||
| redirected: "gray" | ||
| }[match.status]; | ||
| } | ||
| function getRouteStatusColor(matches, route) { | ||
| const found = matches.find((d) => d.routeId === route.id); | ||
| if (!found) return "gray"; | ||
| return getStatusColor(found); | ||
| } | ||
| function useIsMounted() { | ||
| const [isMounted, setIsMounted] = createSignal(false); | ||
| (isServer ? createEffect : createRenderEffect)(() => { | ||
| setIsMounted(true); | ||
| }); | ||
| return isMounted; | ||
| } | ||
| /** | ||
| * Displays a string regardless the type of the data | ||
| * @param {unknown} value Value to be stringified | ||
| */ | ||
| var displayValue = (value) => { | ||
| const name = Object.getOwnPropertyNames(Object(value)); | ||
| const newValue = typeof value === "bigint" ? `${value.toString()}n` : value; | ||
| try { | ||
| return JSON.stringify(newValue, name); | ||
| } catch (e) { | ||
| return `unable to stringify`; | ||
| } | ||
| }; | ||
| function multiSortBy(arr, accessors = [(d) => d]) { | ||
| return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => { | ||
| for (const accessor of accessors) { | ||
| const ao = accessor(a); | ||
| const bo = accessor(b); | ||
| if (typeof ao === "undefined") { | ||
| if (typeof bo === "undefined") continue; | ||
| return 1; | ||
| } | ||
| if (ao === bo) continue; | ||
| return ao > bo ? 1 : -1; | ||
| } | ||
| return ai - bi; | ||
| }).map(([d]) => d); | ||
| } | ||
| //#endregion | ||
| //#region src/Explorer.tsx | ||
| var _tmpl$$3 = /* @__PURE__ */ template(`<span><svg xmlns=http://www.w3.org/2000/svg width=12 height=12 fill=none viewBox="0 0 24 24"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 18l6-6-6-6">`), _tmpl$2$1 = /* @__PURE__ */ template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ template(`<button><span> `), _tmpl$4$1 = /* @__PURE__ */ template(`<div><div><button> [<!> ... <!>]`), _tmpl$5$1 = /* @__PURE__ */ template(`<button><span></span> 🔄 `), _tmpl$6$1 = /* @__PURE__ */ template(`<span>:`), _tmpl$7$1 = /* @__PURE__ */ template(`<span>`); | ||
| var Expander = ({ expanded, style = {} }) => { | ||
| const styles = useStyles(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild; | ||
| createRenderEffect((_p$) => { | ||
| var _v$ = styles().expander, _v$2 = clsx(styles().expanderIcon(expanded)); | ||
| _v$ !== _p$.e && className(_el$, _p$.e = _v$); | ||
| _v$2 !== _p$.t && setAttribute(_el$2, "class", _p$.t = _v$2); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| /** | ||
| * Chunk elements in the array by size | ||
| * | ||
| * when the array cannot be chunked evenly by size, the last chunk will be | ||
| * filled with the remaining elements | ||
| * | ||
| * @example | ||
| * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']] | ||
| */ | ||
| function chunkArray(array, size) { | ||
| if (size < 1) return []; | ||
| let i = 0; | ||
| const result = []; | ||
| while (i < array.length) { | ||
| result.push(array.slice(i, i + size)); | ||
| i = i + size; | ||
| } | ||
| return result; | ||
| } | ||
| function isIterable(x) { | ||
| return Symbol.iterator in x; | ||
| } | ||
| function Explorer({ value, defaultExpanded, pageSize = 100, filterSubEntries, ...rest }) { | ||
| const [expanded, setExpanded] = createSignal(Boolean(defaultExpanded)); | ||
| const toggleExpanded = () => setExpanded((old) => !old); | ||
| const type = createMemo(() => typeof value()); | ||
| const subEntries = createMemo(() => { | ||
| let entries = []; | ||
| const makeProperty = (sub) => { | ||
| const subDefaultExpanded = defaultExpanded === true ? { [sub.label]: true } : defaultExpanded?.[sub.label]; | ||
| return { | ||
| ...sub, | ||
| value: () => sub.value, | ||
| defaultExpanded: subDefaultExpanded | ||
| }; | ||
| }; | ||
| if (Array.isArray(value())) entries = value().map((d, i) => makeProperty({ | ||
| label: i.toString(), | ||
| value: d | ||
| })); | ||
| else if (value() !== null && typeof value() === "object" && isIterable(value()) && typeof value()[Symbol.iterator] === "function") entries = Array.from(value(), (val, i) => makeProperty({ | ||
| label: i.toString(), | ||
| value: val | ||
| })); | ||
| else if (typeof value() === "object" && value() !== null) entries = Object.entries(value()).map(([key, val]) => makeProperty({ | ||
| label: key, | ||
| value: val | ||
| })); | ||
| return filterSubEntries ? filterSubEntries(entries) : entries; | ||
| }); | ||
| const subEntryPages = createMemo(() => chunkArray(subEntries(), pageSize)); | ||
| const [expandedPages, setExpandedPages] = createSignal([]); | ||
| const [valueSnapshot, setValueSnapshot] = createSignal(void 0); | ||
| const styles = useStyles(); | ||
| const refreshValueSnapshot = () => { | ||
| setValueSnapshot(value()()); | ||
| }; | ||
| const handleEntry = (entry) => createComponent(Explorer, mergeProps({ | ||
| value, | ||
| filterSubEntries | ||
| }, rest, entry)); | ||
| return (() => { | ||
| var _el$3 = _tmpl$2$1(); | ||
| insert(_el$3, (() => { | ||
| var _c$ = memo(() => !!subEntryPages().length); | ||
| return () => _c$() ? [(() => { | ||
| var _el$4 = _tmpl$3$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild; | ||
| _el$4.$$click = () => toggleExpanded(); | ||
| insert(_el$4, createComponent(Expander, { get expanded() { | ||
| return expanded() ?? false; | ||
| } }), _el$5); | ||
| insert(_el$4, () => rest.label, _el$5); | ||
| insert(_el$5, () => String(type).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$6); | ||
| insert(_el$5, () => subEntries().length, _el$6); | ||
| insert(_el$5, () => subEntries().length > 1 ? `items` : `item`, null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$3 = styles().expandButton, _v$4 = styles().info; | ||
| _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3); | ||
| _v$4 !== _p$.t && className(_el$5, _p$.t = _v$4); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$4; | ||
| })(), memo(() => memo(() => !!(expanded() ?? false))() ? memo(() => subEntryPages().length === 1)() ? (() => { | ||
| var _el$7 = _tmpl$2$1(); | ||
| insert(_el$7, () => subEntries().map((entry, index) => handleEntry(entry))); | ||
| createRenderEffect(() => className(_el$7, styles().subEntries)); | ||
| return _el$7; | ||
| })() : (() => { | ||
| var _el$8 = _tmpl$2$1(); | ||
| insert(_el$8, () => subEntryPages().map((entries, index) => { | ||
| return (() => { | ||
| var _el$9 = _tmpl$4$1(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$15 = _el$10.nextSibling, _el$16 = _el$15.nextSibling.nextSibling; | ||
| _el$16.nextSibling; | ||
| _el$1.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]); | ||
| insert(_el$1, createComponent(Expander, { get expanded() { | ||
| return expandedPages().includes(index); | ||
| } }), _el$10); | ||
| insert(_el$1, index * pageSize, _el$15); | ||
| insert(_el$1, index * pageSize + pageSize - 1, _el$16); | ||
| insert(_el$0, (() => { | ||
| var _c$2 = memo(() => !!expandedPages().includes(index)); | ||
| return () => _c$2() ? (() => { | ||
| var _el$17 = _tmpl$2$1(); | ||
| insert(_el$17, () => entries.map((entry) => handleEntry(entry))); | ||
| createRenderEffect(() => className(_el$17, styles().subEntries)); | ||
| return _el$17; | ||
| })() : null; | ||
| })(), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$5 = styles().entry, _v$6 = clsx(styles().labelButton, "labelButton"); | ||
| _v$5 !== _p$.e && className(_el$0, _p$.e = _v$5); | ||
| _v$6 !== _p$.t && className(_el$1, _p$.t = _v$6); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$9; | ||
| })(); | ||
| })); | ||
| createRenderEffect(() => className(_el$8, styles().subEntries)); | ||
| return _el$8; | ||
| })() : null)] : memo(() => type() === "function")() ? createComponent(Explorer, { | ||
| get label() { | ||
| return (() => { | ||
| var _el$18 = _tmpl$5$1(), _el$19 = _el$18.firstChild; | ||
| _el$18.$$click = refreshValueSnapshot; | ||
| insert(_el$19, () => rest.label); | ||
| createRenderEffect(() => className(_el$18, styles().refreshValueBtn)); | ||
| return _el$18; | ||
| })(); | ||
| }, | ||
| value: valueSnapshot, | ||
| defaultExpanded: {} | ||
| }) : [ | ||
| (() => { | ||
| var _el$20 = _tmpl$6$1(), _el$21 = _el$20.firstChild; | ||
| insert(_el$20, () => rest.label, _el$21); | ||
| return _el$20; | ||
| })(), | ||
| " ", | ||
| (() => { | ||
| var _el$22 = _tmpl$7$1(); | ||
| insert(_el$22, () => displayValue(value())); | ||
| createRenderEffect(() => className(_el$22, styles().value)); | ||
| return _el$22; | ||
| })() | ||
| ]; | ||
| })()); | ||
| createRenderEffect(() => className(_el$3, styles().entry)); | ||
| return _el$3; | ||
| })(); | ||
| } | ||
| var stylesFactory = (shadowDOMTarget) => { | ||
| const { colors, font, size, alpha, shadow, border } = tokens; | ||
| const { fontFamily, lineHeight, size: fontSize } = font; | ||
| const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css; | ||
| return { | ||
| entry: css` | ||
| font-family: ${fontFamily.mono}; | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight.sm}; | ||
| outline: none; | ||
| word-break: break-word; | ||
| `, | ||
| labelButton: css` | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| outline: inherit; | ||
| background: transparent; | ||
| border: none; | ||
| padding: 0; | ||
| `, | ||
| expander: css` | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: ${size[3]}; | ||
| height: ${size[3]}; | ||
| padding-left: 3px; | ||
| box-sizing: content-box; | ||
| `, | ||
| expanderIcon: (expanded) => { | ||
| if (expanded) return css` | ||
| transform: rotate(90deg); | ||
| transition: transform 0.1s ease; | ||
| `; | ||
| return css` | ||
| transform: rotate(0deg); | ||
| transition: transform 0.1s ease; | ||
| `; | ||
| }, | ||
| expandButton: css` | ||
| display: flex; | ||
| gap: ${size[1]}; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| outline: inherit; | ||
| background: transparent; | ||
| border: none; | ||
| padding: 0; | ||
| `, | ||
| value: css` | ||
| color: ${colors.purple[400]}; | ||
| `, | ||
| subEntries: css` | ||
| margin-left: ${size[2]}; | ||
| padding-left: ${size[2]}; | ||
| border-left: 2px solid ${colors.darkGray[400]}; | ||
| `, | ||
| info: css` | ||
| color: ${colors.gray[500]}; | ||
| font-size: ${fontSize["2xs"]}; | ||
| padding-left: ${size[1]}; | ||
| `, | ||
| refreshValueBtn: css` | ||
| appearance: none; | ||
| border: 0; | ||
| cursor: pointer; | ||
| background: transparent; | ||
| color: inherit; | ||
| padding: 0; | ||
| font-family: ${fontFamily.mono}; | ||
| font-size: ${fontSize.xs}; | ||
| ` | ||
| }; | ||
| }; | ||
| function useStyles() { | ||
| const [_styles] = createSignal(stylesFactory(useContext(ShadowDomTargetContext))); | ||
| return _styles; | ||
| } | ||
| delegateEvents(["click"]); | ||
| //#endregion | ||
| //#region src/AgeTicker.tsx | ||
| var _tmpl$$2 = /* @__PURE__ */ template(`<div><div></div><div>/</div><div></div><div>/</div><div>`); | ||
| function formatTime(ms) { | ||
| const units = [ | ||
| "s", | ||
| "min", | ||
| "h", | ||
| "d" | ||
| ]; | ||
| const values = [ | ||
| ms / 1e3, | ||
| ms / 6e4, | ||
| ms / 36e5, | ||
| ms / 864e5 | ||
| ]; | ||
| let chosenUnitIndex = 0; | ||
| for (let i = 1; i < values.length; i++) { | ||
| if (values[i] < 1) break; | ||
| chosenUnitIndex = i; | ||
| } | ||
| return new Intl.NumberFormat(navigator.language, { | ||
| compactDisplay: "short", | ||
| notation: "compact", | ||
| maximumFractionDigits: 0 | ||
| }).format(values[chosenUnitIndex]) + units[chosenUnitIndex]; | ||
| } | ||
| function AgeTicker({ match, router }) { | ||
| const styles = useStyles$1(); | ||
| if (!match) return null; | ||
| const route = router().looseRoutesById[match.routeId]; | ||
| if (!route.options.loader) return null; | ||
| const age = Date.now() - match.updatedAt; | ||
| const staleTime = route.options.staleTime ?? router().options.defaultStaleTime ?? 0; | ||
| const gcTime = route.options.gcTime ?? router().options.defaultGcTime ?? 1800 * 1e3; | ||
| return (() => { | ||
| var _el$ = _tmpl$$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling.nextSibling, _el$6 = _el$4.nextSibling.nextSibling; | ||
| insert(_el$2, () => formatTime(age)); | ||
| insert(_el$4, () => formatTime(staleTime)); | ||
| insert(_el$6, () => formatTime(gcTime)); | ||
| createRenderEffect(() => className(_el$, clsx(styles().ageTicker(age > staleTime)))); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| //#endregion | ||
| //#region src/NavigateButton.tsx | ||
| var _tmpl$$1 = /* @__PURE__ */ template(`<button type=button>➔`); | ||
| function NavigateButton({ to, params, search, router }) { | ||
| const styles = useStyles$1(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$1(); | ||
| _el$.$$click = (e) => { | ||
| e.stopPropagation(); | ||
| router().navigate({ | ||
| to, | ||
| params, | ||
| search | ||
| }); | ||
| }; | ||
| setAttribute(_el$, "title", `Navigate to ${to}`); | ||
| createRenderEffect(() => className(_el$, styles().navigateButton)); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| delegateEvents(["click"]); | ||
| //#endregion | ||
| //#region src/BaseTanStackRouterDevtoolsPanel.tsx | ||
| var _tmpl$ = /* @__PURE__ */ template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ template(`<div style=display:flex;align-items:center;width:100%><div style=flex-grow:1;min-width:0>`), _tmpl$3 = /* @__PURE__ */ template(`<code> `), _tmpl$4 = /* @__PURE__ */ template(`<code>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ template(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<div><ul>`), _tmpl$8 = /* @__PURE__ */ template(`<div><button><svg xmlns=http://www.w3.org/2000/svg width=10 height=6 fill=none viewBox="0 0 10 6"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.667 d="M1 1l4 4 4-4"></path></svg></button><div><div></div><div><div></div></div></div><div><div><div><span>Pathname</span></div><div><code></code></div><div><div><button type=button>Routes</button><button type=button>Matches</button><button type=button>History</button></div><div><div>age / staleTime / gcTime</div></div></div><div>`), _tmpl$9 = /* @__PURE__ */ template(`<div><span>masked`), _tmpl$0 = /* @__PURE__ */ template(`<div role=button><div>`), _tmpl$1 = /* @__PURE__ */ template(`<li><div>`), _tmpl$10 = /* @__PURE__ */ template(`<li>This panel displays the most recent 15 navigations.`), _tmpl$11 = /* @__PURE__ */ template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$12 = /* @__PURE__ */ template(`<div><div>Match Details</div><div><div><div><div></div></div><div><div>ID:</div><div><code></code></div></div><div><div>State:</div><div></div></div><div><div>Last Updated:</div><div></div></div></div></div><div>Explorer</div><div>`), _tmpl$13 = /* @__PURE__ */ template(`<div>Loader Data`), _tmpl$14 = /* @__PURE__ */ template(`<div><div><span>Search Params</span></div><div>`), _tmpl$15 = /* @__PURE__ */ template(`<span style=margin-left:0.5rem>`), _tmpl$16 = /* @__PURE__ */ template(`<button type=button aria-label="Copy value to clipboard"style=cursor:pointer>`); | ||
| var HISTORY_LIMIT = 15; | ||
| function Logo(props) { | ||
| const { className: className$1, ...rest } = props; | ||
| const styles = useStyles$1(); | ||
| return (() => { | ||
| var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling; | ||
| spread(_el$, mergeProps(rest, { get ["class"]() { | ||
| return clsx(styles().logo, className$1 ? className$1() : ""); | ||
| } }), false, true); | ||
| createRenderEffect((_p$) => { | ||
| var _v$ = styles().tanstackLogo, _v$2 = styles().routerLogo; | ||
| _v$ !== _p$.e && className(_el$2, _p$.e = _v$); | ||
| _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| function NavigateLink(props) { | ||
| return (() => { | ||
| var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild; | ||
| insert(_el$4, () => props.left, _el$5); | ||
| insert(_el$5, () => props.children); | ||
| insert(_el$4, () => props.right, null); | ||
| createRenderEffect(() => className(_el$4, props.class)); | ||
| return _el$4; | ||
| })(); | ||
| } | ||
| function RouteComp({ routerState, pendingMatches, router, route, isRoot, activeId, setActiveId }) { | ||
| const styles = useStyles$1(); | ||
| const matches = createMemo(() => pendingMatches().length ? pendingMatches() : routerState().matches); | ||
| const match = createMemo(() => routerState().matches.find((d) => d.routeId === route.id)); | ||
| const param = createMemo(() => { | ||
| try { | ||
| if (match()?.params) { | ||
| const p = match()?.params; | ||
| const r = route.path || trimPath(route.id); | ||
| if (r.startsWith("$")) { | ||
| const trimmed = r.slice(1); | ||
| if (p[trimmed]) return `(${p[trimmed]})`; | ||
| } | ||
| } | ||
| return ""; | ||
| } catch (error) { | ||
| return ""; | ||
| } | ||
| }); | ||
| const navigationTarget = createMemo(() => { | ||
| if (isRoot) return void 0; | ||
| if (!route.path) return void 0; | ||
| const allParams = Object.assign({}, ...matches().map((m) => m.params)); | ||
| const interpolated = interpolatePath({ | ||
| path: route.fullPath, | ||
| params: allParams, | ||
| decoder: router().pathParamsDecoder | ||
| }); | ||
| return !interpolated.isMissingParams ? interpolated.interpolatedPath : void 0; | ||
| }); | ||
| return (() => { | ||
| var _el$6 = _tmpl$5(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild; | ||
| _el$7.$$click = () => { | ||
| if (match()) setActiveId(activeId() === route.id ? "" : route.id); | ||
| }; | ||
| insert(_el$7, createComponent(NavigateLink, { | ||
| get ["class"]() { | ||
| return clsx(styles().routesRow(!!match())); | ||
| }, | ||
| get left() { | ||
| return createComponent(Show, { | ||
| get when() { | ||
| return navigationTarget(); | ||
| }, | ||
| children: (navigate) => createComponent(NavigateButton, { | ||
| get to() { | ||
| return navigate(); | ||
| }, | ||
| router | ||
| }) | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| get match() { | ||
| return match(); | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| return [(() => { | ||
| var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild; | ||
| insert(_el$9, () => isRoot ? rootRouteId : route.path || trimPath(route.id), _el$0); | ||
| createRenderEffect(() => className(_el$9, styles().code)); | ||
| return _el$9; | ||
| })(), (() => { | ||
| var _el$1 = _tmpl$4(); | ||
| insert(_el$1, param); | ||
| createRenderEffect(() => className(_el$1, styles().routeParamInfo)); | ||
| return _el$1; | ||
| })()]; | ||
| } | ||
| }), null); | ||
| insert(_el$6, (() => { | ||
| var _c$ = memo(() => !!route.children?.length); | ||
| return () => _c$() ? (() => { | ||
| var _el$10 = _tmpl$6(); | ||
| insert(_el$10, () => [...route.children].sort((a, b) => { | ||
| return a.rank - b.rank; | ||
| }).map((r) => createComponent(RouteComp, { | ||
| routerState, | ||
| pendingMatches, | ||
| router, | ||
| route: r, | ||
| activeId, | ||
| setActiveId | ||
| }))); | ||
| createRenderEffect(() => className(_el$10, styles().nestedRouteRow(!!isRoot))); | ||
| return _el$10; | ||
| })() : null; | ||
| })(), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$3 = `Open match details for ${route.id}`, _v$4 = clsx(styles().routesRowContainer(route.id === activeId(), !!match())), _v$5 = clsx(styles().matchIndicator(getRouteStatusColor(matches(), route))); | ||
| _v$3 !== _p$.e && setAttribute(_el$7, "aria-label", _p$.e = _v$3); | ||
| _v$4 !== _p$.t && className(_el$7, _p$.t = _v$4); | ||
| _v$5 !== _p$.a && className(_el$8, _p$.a = _v$5); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$6; | ||
| })(); | ||
| } | ||
| var BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel({ ...props }) { | ||
| const { isOpen = true, setIsOpen, handleDragStart, router, routerState, shadowDOMTarget, ...panelProps } = props; | ||
| const { onCloseClick } = useDevtoolsOnClose(); | ||
| const styles = useStyles$1(); | ||
| const { className: className$2, style, ...otherPanelProps } = panelProps; | ||
| invariant(router, "No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually."); | ||
| const [currentTab, setCurrentTab] = useLocalStorage("tanstackRouterDevtoolsActiveTab", "routes"); | ||
| const [activeId, setActiveId] = useLocalStorage("tanstackRouterDevtoolsActiveRouteId", ""); | ||
| const [history, setHistory] = createSignal([]); | ||
| const [hasHistoryOverflowed, setHasHistoryOverflowed] = createSignal(false); | ||
| let pendingMatches; | ||
| let cachedMatches; | ||
| if ("subscribe" in router().stores.pendingMatchesSnapshot) { | ||
| const [_pendingMatches, setPendingMatches] = createSignal([]); | ||
| pendingMatches = _pendingMatches; | ||
| const [_cachedMatches, setCachedMatches] = createSignal([]); | ||
| cachedMatches = _cachedMatches; | ||
| createEffect(() => { | ||
| const pendingMatchesStore = router().stores.pendingMatchesSnapshot; | ||
| setPendingMatches(pendingMatchesStore.state); | ||
| const subscription = pendingMatchesStore.subscribe(() => { | ||
| setPendingMatches(pendingMatchesStore.state); | ||
| }); | ||
| onCleanup(() => subscription.unsubscribe()); | ||
| }); | ||
| createEffect(() => { | ||
| const cachedMatchesStore = router().stores.cachedMatchesSnapshot; | ||
| setCachedMatches(cachedMatchesStore.state); | ||
| const subscription = cachedMatchesStore.subscribe(() => { | ||
| setCachedMatches(cachedMatchesStore.state); | ||
| }); | ||
| onCleanup(() => subscription.unsubscribe()); | ||
| }); | ||
| } else { | ||
| pendingMatches = () => router().stores.pendingMatchesSnapshot.state; | ||
| cachedMatches = () => router().stores.cachedMatchesSnapshot.state; | ||
| } | ||
| createEffect(() => { | ||
| const matches = routerState().matches; | ||
| const currentMatch = matches[matches.length - 1]; | ||
| if (!currentMatch) return; | ||
| const historyUntracked = untrack(() => history()); | ||
| const lastMatch = historyUntracked[0]; | ||
| const sameLocation = lastMatch && lastMatch.pathname === currentMatch.pathname && JSON.stringify(lastMatch.search ?? {}) === JSON.stringify(currentMatch.search ?? {}); | ||
| if (!lastMatch || !sameLocation) { | ||
| if (historyUntracked.length >= HISTORY_LIMIT) setHasHistoryOverflowed(true); | ||
| setHistory((prev) => { | ||
| const newHistory = [currentMatch, ...prev]; | ||
| newHistory.splice(HISTORY_LIMIT); | ||
| return newHistory; | ||
| }); | ||
| } | ||
| }); | ||
| const activeMatch = createMemo(() => { | ||
| return [ | ||
| ...pendingMatches(), | ||
| ...routerState().matches, | ||
| ...cachedMatches() | ||
| ].find((d) => d.routeId === activeId() || d.id === activeId()); | ||
| }); | ||
| const hasSearch = createMemo(() => Object.keys(routerState().location.search).length); | ||
| const explorerState = createMemo(() => { | ||
| return { | ||
| ...router(), | ||
| state: routerState() | ||
| }; | ||
| }); | ||
| const routerExplorerValue = createMemo(() => Object.fromEntries(multiSortBy(Object.keys(explorerState()), [ | ||
| "state", | ||
| "routesById", | ||
| "routesByPath", | ||
| "options", | ||
| "manifest" | ||
| ].map((d) => (dd) => dd !== d)).map((key) => [key, explorerState()[key]]).filter((d) => typeof d[1] !== "function" && ![ | ||
| "stores", | ||
| "basepath", | ||
| "injectedHtml", | ||
| "subscribers", | ||
| "latestLoadPromise", | ||
| "navigateTimeout", | ||
| "resetNextScroll", | ||
| "tempLocationKey", | ||
| "latestLocation", | ||
| "routeTree", | ||
| "history" | ||
| ].includes(d[0])))); | ||
| const activeMatchLoaderData = createMemo(() => activeMatch()?.loaderData); | ||
| const activeMatchValue = createMemo(() => activeMatch()); | ||
| const locationSearchValue = createMemo(() => routerState().location.search); | ||
| return (() => { | ||
| var _el$11 = _tmpl$8(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$14.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild; | ||
| _el$20.firstChild; | ||
| var _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$25.nextSibling, _el$30 = _el$24.nextSibling; | ||
| spread(_el$11, mergeProps({ | ||
| get ["class"]() { | ||
| return clsx(styles().devtoolsPanel, "TanStackRouterDevtoolsPanel", className$2 ? className$2() : ""); | ||
| }, | ||
| get style() { | ||
| return style ? style() : ""; | ||
| } | ||
| }, otherPanelProps), false, true); | ||
| insert(_el$11, handleDragStart ? (() => { | ||
| var _el$34 = _tmpl$6(); | ||
| addEventListener(_el$34, "mousedown", handleDragStart, true); | ||
| createRenderEffect(() => className(_el$34, styles().dragHandle)); | ||
| return _el$34; | ||
| })() : null, _el$12); | ||
| _el$12.$$click = (e) => { | ||
| if (setIsOpen) setIsOpen(false); | ||
| onCloseClick(e); | ||
| }; | ||
| insert(_el$15, createComponent(Logo, { | ||
| "aria-hidden": true, | ||
| onClick: (e) => { | ||
| if (setIsOpen) setIsOpen(false); | ||
| onCloseClick(e); | ||
| } | ||
| })); | ||
| insert(_el$17, createComponent(Explorer, { | ||
| label: "Router", | ||
| value: routerExplorerValue, | ||
| defaultExpanded: { | ||
| state: {}, | ||
| context: {}, | ||
| options: {} | ||
| }, | ||
| filterSubEntries: (subEntries) => { | ||
| return subEntries.filter((d) => typeof d.value() !== "function"); | ||
| } | ||
| })); | ||
| insert(_el$20, (() => { | ||
| var _c$2 = memo(() => !!routerState().location.maskedLocation); | ||
| return () => _c$2() ? (() => { | ||
| var _el$35 = _tmpl$9(), _el$36 = _el$35.firstChild; | ||
| createRenderEffect((_p$) => { | ||
| var _v$24 = styles().maskedBadgeContainer, _v$25 = styles().maskedBadge; | ||
| _v$24 !== _p$.e && className(_el$35, _p$.e = _v$24); | ||
| _v$25 !== _p$.t && className(_el$36, _p$.t = _v$25); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$35; | ||
| })() : null; | ||
| })(), null); | ||
| insert(_el$23, () => routerState().location.pathname); | ||
| insert(_el$22, (() => { | ||
| var _c$3 = memo(() => !!routerState().location.maskedLocation); | ||
| return () => _c$3() ? (() => { | ||
| var _el$37 = _tmpl$4(); | ||
| insert(_el$37, () => routerState().location.maskedLocation?.pathname); | ||
| createRenderEffect(() => className(_el$37, styles().maskedLocation)); | ||
| return _el$37; | ||
| })() : null; | ||
| })(), null); | ||
| _el$26.$$click = () => { | ||
| setCurrentTab("routes"); | ||
| }; | ||
| _el$27.$$click = () => { | ||
| setCurrentTab("matches"); | ||
| }; | ||
| _el$28.$$click = () => { | ||
| setCurrentTab("history"); | ||
| }; | ||
| insert(_el$30, createComponent(Switch, { get children() { | ||
| return [ | ||
| createComponent(Match, { | ||
| get when() { | ||
| return currentTab() === "routes"; | ||
| }, | ||
| get children() { | ||
| return createComponent(RouteComp, { | ||
| routerState, | ||
| pendingMatches, | ||
| router, | ||
| get route() { | ||
| return router().routeTree; | ||
| }, | ||
| isRoot: true, | ||
| activeId, | ||
| setActiveId | ||
| }); | ||
| } | ||
| }), | ||
| createComponent(Match, { | ||
| get when() { | ||
| return currentTab() === "matches"; | ||
| }, | ||
| get children() { | ||
| var _el$31 = _tmpl$6(); | ||
| insert(_el$31, () => (pendingMatches().length ? pendingMatches() : routerState().matches).map((match, _i) => { | ||
| return (() => { | ||
| var _el$38 = _tmpl$0(), _el$39 = _el$38.firstChild; | ||
| _el$38.$$click = () => setActiveId(activeId() === match.id ? "" : match.id); | ||
| insert(_el$38, createComponent(NavigateLink, { | ||
| get left() { | ||
| return createComponent(NavigateButton, { | ||
| get to() { | ||
| return match.pathname; | ||
| }, | ||
| get params() { | ||
| return match.params; | ||
| }, | ||
| get search() { | ||
| return match.search; | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| match, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| var _el$40 = _tmpl$4(); | ||
| insert(_el$40, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`); | ||
| createRenderEffect(() => className(_el$40, styles().matchID)); | ||
| return _el$40; | ||
| } | ||
| }), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$26 = `Open match details for ${match.id}`, _v$27 = clsx(styles().matchRow(match === activeMatch())), _v$28 = clsx(styles().matchIndicator(getStatusColor(match))); | ||
| _v$26 !== _p$.e && setAttribute(_el$38, "aria-label", _p$.e = _v$26); | ||
| _v$27 !== _p$.t && className(_el$38, _p$.t = _v$27); | ||
| _v$28 !== _p$.a && className(_el$39, _p$.a = _v$28); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$38; | ||
| })(); | ||
| })); | ||
| return _el$31; | ||
| } | ||
| }), | ||
| createComponent(Match, { | ||
| get when() { | ||
| return currentTab() === "history"; | ||
| }, | ||
| get children() { | ||
| var _el$32 = _tmpl$7(), _el$33 = _el$32.firstChild; | ||
| insert(_el$33, createComponent(For, { | ||
| get each() { | ||
| return history(); | ||
| }, | ||
| children: (match, index) => (() => { | ||
| var _el$41 = _tmpl$1(), _el$42 = _el$41.firstChild; | ||
| insert(_el$41, createComponent(NavigateLink, { | ||
| get left() { | ||
| return createComponent(NavigateButton, { | ||
| get to() { | ||
| return match.pathname; | ||
| }, | ||
| get params() { | ||
| return match.params; | ||
| }, | ||
| get search() { | ||
| return match.search; | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| match, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| var _el$43 = _tmpl$4(); | ||
| insert(_el$43, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`); | ||
| createRenderEffect(() => className(_el$43, styles().matchID)); | ||
| return _el$43; | ||
| } | ||
| }), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$29 = clsx(styles().matchRow(match === activeMatch())), _v$30 = clsx(styles().matchIndicator(index() === 0 ? "green" : "gray")); | ||
| _v$29 !== _p$.e && className(_el$41, _p$.e = _v$29); | ||
| _v$30 !== _p$.t && className(_el$42, _p$.t = _v$30); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$41; | ||
| })() | ||
| }), null); | ||
| insert(_el$33, (() => { | ||
| var _c$4 = memo(() => !!hasHistoryOverflowed()); | ||
| return () => _c$4() ? (() => { | ||
| var _el$44 = _tmpl$10(); | ||
| createRenderEffect(() => className(_el$44, styles().historyOverflowContainer)); | ||
| return _el$44; | ||
| })() : null; | ||
| })(), null); | ||
| return _el$32; | ||
| } | ||
| }) | ||
| ]; | ||
| } })); | ||
| insert(_el$18, (() => { | ||
| var _c$5 = memo(() => !!cachedMatches().length); | ||
| return () => _c$5() ? (() => { | ||
| var _el$45 = _tmpl$11(), _el$46 = _el$45.firstChild, _el$48 = _el$46.firstChild.nextSibling, _el$49 = _el$46.nextSibling; | ||
| insert(_el$49, () => cachedMatches().map((match) => { | ||
| return (() => { | ||
| var _el$50 = _tmpl$0(), _el$51 = _el$50.firstChild; | ||
| _el$50.$$click = () => setActiveId(activeId() === match.id ? "" : match.id); | ||
| insert(_el$50, createComponent(NavigateLink, { | ||
| get left() { | ||
| return createComponent(NavigateButton, { | ||
| get to() { | ||
| return match.pathname; | ||
| }, | ||
| get params() { | ||
| return match.params; | ||
| }, | ||
| get search() { | ||
| return match.search; | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| match, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| var _el$52 = _tmpl$4(); | ||
| insert(_el$52, () => `${match.id}`); | ||
| createRenderEffect(() => className(_el$52, styles().matchID)); | ||
| return _el$52; | ||
| } | ||
| }), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$34 = `Open match details for ${match.id}`, _v$35 = clsx(styles().matchRow(match === activeMatch())), _v$36 = clsx(styles().matchIndicator(getStatusColor(match))); | ||
| _v$34 !== _p$.e && setAttribute(_el$50, "aria-label", _p$.e = _v$34); | ||
| _v$35 !== _p$.t && className(_el$50, _p$.t = _v$35); | ||
| _v$36 !== _p$.a && className(_el$51, _p$.a = _v$36); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$50; | ||
| })(); | ||
| })); | ||
| createRenderEffect((_p$) => { | ||
| var _v$31 = styles().cachedMatchesContainer, _v$32 = styles().detailsHeader, _v$33 = styles().detailsHeaderInfo; | ||
| _v$31 !== _p$.e && className(_el$45, _p$.e = _v$31); | ||
| _v$32 !== _p$.t && className(_el$46, _p$.t = _v$32); | ||
| _v$33 !== _p$.a && className(_el$48, _p$.a = _v$33); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$45; | ||
| })() : null; | ||
| })(), null); | ||
| insert(_el$11, (() => { | ||
| var _c$6 = memo(() => !!(activeMatch() && activeMatch()?.status)); | ||
| return () => _c$6() ? (() => { | ||
| var _el$53 = _tmpl$12(), _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$55.firstChild, _el$57 = _el$56.firstChild, _el$58 = _el$57.firstChild, _el$59 = _el$57.nextSibling, _el$61 = _el$59.firstChild.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$59.nextSibling, _el$65 = _el$63.firstChild.nextSibling, _el$66 = _el$63.nextSibling, _el$68 = _el$66.firstChild.nextSibling, _el$69 = _el$55.nextSibling, _el$70 = _el$69.nextSibling; | ||
| insert(_el$58, (() => { | ||
| var _c$8 = memo(() => !!(activeMatch()?.status === "success" && activeMatch()?.isFetching)); | ||
| return () => _c$8() ? "fetching" : activeMatch()?.status; | ||
| })()); | ||
| insert(_el$62, () => activeMatch()?.id); | ||
| insert(_el$65, (() => { | ||
| var _c$9 = memo(() => !!pendingMatches().find((d) => d.id === activeMatch()?.id)); | ||
| return () => _c$9() ? "Pending" : routerState().matches.find((d) => d.id === activeMatch()?.id) ? "Active" : "Cached"; | ||
| })()); | ||
| insert(_el$68, (() => { | ||
| var _c$0 = memo(() => !!activeMatch()?.updatedAt); | ||
| return () => _c$0() ? new Date(activeMatch()?.updatedAt).toLocaleTimeString() : "N/A"; | ||
| })()); | ||
| insert(_el$53, (() => { | ||
| var _c$1 = memo(() => !!activeMatchLoaderData()); | ||
| return () => _c$1() ? [(() => { | ||
| var _el$71 = _tmpl$13(); | ||
| createRenderEffect(() => className(_el$71, styles().detailsHeader)); | ||
| return _el$71; | ||
| })(), (() => { | ||
| var _el$72 = _tmpl$6(); | ||
| insert(_el$72, createComponent(Explorer, { | ||
| label: "loaderData", | ||
| value: activeMatchLoaderData, | ||
| defaultExpanded: {} | ||
| })); | ||
| createRenderEffect(() => className(_el$72, styles().detailsContent)); | ||
| return _el$72; | ||
| })()] : null; | ||
| })(), _el$69); | ||
| insert(_el$70, createComponent(Explorer, { | ||
| label: "Match", | ||
| value: activeMatchValue, | ||
| defaultExpanded: {} | ||
| })); | ||
| createRenderEffect((_p$) => { | ||
| var _v$37 = styles().thirdContainer, _v$38 = styles().detailsHeader, _v$39 = styles().matchDetails, _v$40 = styles().matchStatus(activeMatch()?.status, activeMatch()?.isFetching), _v$41 = styles().matchDetailsInfoLabel, _v$42 = styles().matchDetailsInfo, _v$43 = styles().matchDetailsInfoLabel, _v$44 = styles().matchDetailsInfo, _v$45 = styles().matchDetailsInfoLabel, _v$46 = styles().matchDetailsInfo, _v$47 = styles().detailsHeader, _v$48 = styles().detailsContent; | ||
| _v$37 !== _p$.e && className(_el$53, _p$.e = _v$37); | ||
| _v$38 !== _p$.t && className(_el$54, _p$.t = _v$38); | ||
| _v$39 !== _p$.a && className(_el$56, _p$.a = _v$39); | ||
| _v$40 !== _p$.o && className(_el$57, _p$.o = _v$40); | ||
| _v$41 !== _p$.i && className(_el$59, _p$.i = _v$41); | ||
| _v$42 !== _p$.n && className(_el$61, _p$.n = _v$42); | ||
| _v$43 !== _p$.s && className(_el$63, _p$.s = _v$43); | ||
| _v$44 !== _p$.h && className(_el$65, _p$.h = _v$44); | ||
| _v$45 !== _p$.r && className(_el$66, _p$.r = _v$45); | ||
| _v$46 !== _p$.d && className(_el$68, _p$.d = _v$46); | ||
| _v$47 !== _p$.l && className(_el$69, _p$.l = _v$47); | ||
| _v$48 !== _p$.u && className(_el$70, _p$.u = _v$48); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0, | ||
| n: void 0, | ||
| s: void 0, | ||
| h: void 0, | ||
| r: void 0, | ||
| d: void 0, | ||
| l: void 0, | ||
| u: void 0 | ||
| }); | ||
| return _el$53; | ||
| })() : null; | ||
| })(), null); | ||
| insert(_el$11, (() => { | ||
| var _c$7 = memo(() => !!hasSearch()); | ||
| return () => _c$7() ? (() => { | ||
| var _el$73 = _tmpl$14(), _el$74 = _el$73.firstChild; | ||
| _el$74.firstChild; | ||
| var _el$76 = _el$74.nextSibling; | ||
| insert(_el$74, typeof navigator !== "undefined" ? (() => { | ||
| var _el$77 = _tmpl$15(); | ||
| insert(_el$77, createComponent(CopyButton, { getValue: () => { | ||
| const search = routerState().location.search; | ||
| return JSON.stringify(search); | ||
| } })); | ||
| return _el$77; | ||
| })() : null, null); | ||
| insert(_el$76, createComponent(Explorer, { | ||
| value: locationSearchValue, | ||
| get defaultExpanded() { | ||
| return Object.keys(routerState().location.search).reduce((obj, next) => { | ||
| obj[next] = {}; | ||
| return obj; | ||
| }, {}); | ||
| } | ||
| })); | ||
| createRenderEffect((_p$) => { | ||
| var _v$49 = styles().fourthContainer, _v$50 = styles().detailsHeader, _v$51 = styles().detailsContent; | ||
| _v$49 !== _p$.e && className(_el$73, _p$.e = _v$49); | ||
| _v$50 !== _p$.t && className(_el$74, _p$.t = _v$50); | ||
| _v$51 !== _p$.a && className(_el$76, _p$.a = _v$51); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$73; | ||
| })() : null; | ||
| })(), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$6 = styles().panelCloseBtn, _v$7 = styles().panelCloseBtnIcon, _v$8 = styles().firstContainer, _v$9 = styles().row, _v$0 = styles().routerExplorerContainer, _v$1 = styles().routerExplorer, _v$10 = styles().secondContainer, _v$11 = styles().matchesContainer, _v$12 = styles().detailsHeader, _v$13 = styles().detailsContent, _v$14 = styles().detailsHeader, _v$15 = styles().routeMatchesToggle, _v$16 = currentTab() === "routes", _v$17 = clsx(styles().routeMatchesToggleBtn(currentTab() === "routes", true)), _v$18 = currentTab() === "matches", _v$19 = clsx(styles().routeMatchesToggleBtn(currentTab() === "matches", true)), _v$20 = currentTab() === "history", _v$21 = clsx(styles().routeMatchesToggleBtn(currentTab() === "history", false)), _v$22 = styles().detailsHeaderInfo, _v$23 = clsx(styles().routesContainer); | ||
| _v$6 !== _p$.e && className(_el$12, _p$.e = _v$6); | ||
| _v$7 !== _p$.t && setAttribute(_el$13, "class", _p$.t = _v$7); | ||
| _v$8 !== _p$.a && className(_el$14, _p$.a = _v$8); | ||
| _v$9 !== _p$.o && className(_el$15, _p$.o = _v$9); | ||
| _v$0 !== _p$.i && className(_el$16, _p$.i = _v$0); | ||
| _v$1 !== _p$.n && className(_el$17, _p$.n = _v$1); | ||
| _v$10 !== _p$.s && className(_el$18, _p$.s = _v$10); | ||
| _v$11 !== _p$.h && className(_el$19, _p$.h = _v$11); | ||
| _v$12 !== _p$.r && className(_el$20, _p$.r = _v$12); | ||
| _v$13 !== _p$.d && className(_el$22, _p$.d = _v$13); | ||
| _v$14 !== _p$.l && className(_el$24, _p$.l = _v$14); | ||
| _v$15 !== _p$.u && className(_el$25, _p$.u = _v$15); | ||
| _v$16 !== _p$.c && (_el$26.disabled = _p$.c = _v$16); | ||
| _v$17 !== _p$.w && className(_el$26, _p$.w = _v$17); | ||
| _v$18 !== _p$.m && (_el$27.disabled = _p$.m = _v$18); | ||
| _v$19 !== _p$.f && className(_el$27, _p$.f = _v$19); | ||
| _v$20 !== _p$.y && (_el$28.disabled = _p$.y = _v$20); | ||
| _v$21 !== _p$.g && className(_el$28, _p$.g = _v$21); | ||
| _v$22 !== _p$.p && className(_el$29, _p$.p = _v$22); | ||
| _v$23 !== _p$.b && className(_el$30, _p$.b = _v$23); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0, | ||
| n: void 0, | ||
| s: void 0, | ||
| h: void 0, | ||
| r: void 0, | ||
| d: void 0, | ||
| l: void 0, | ||
| u: void 0, | ||
| c: void 0, | ||
| w: void 0, | ||
| m: void 0, | ||
| f: void 0, | ||
| y: void 0, | ||
| g: void 0, | ||
| p: void 0, | ||
| b: void 0 | ||
| }); | ||
| return _el$11; | ||
| })(); | ||
| }; | ||
| function CopyButton({ getValue }) { | ||
| const [copied, setCopied] = createSignal(false); | ||
| let timeoutId = null; | ||
| const handleCopy = async () => { | ||
| if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) { | ||
| console.warn("TanStack Router Devtools: Clipboard API unavailable"); | ||
| return; | ||
| } | ||
| try { | ||
| const value = getValue(); | ||
| await navigator.clipboard.writeText(value); | ||
| setCopied(true); | ||
| if (timeoutId) clearTimeout(timeoutId); | ||
| timeoutId = setTimeout(() => setCopied(false), 2500); | ||
| } catch (e) { | ||
| console.error("TanStack Router Devtools: Failed to copy", e); | ||
| } | ||
| }; | ||
| onCleanup(() => { | ||
| if (timeoutId) clearTimeout(timeoutId); | ||
| }); | ||
| return (() => { | ||
| var _el$78 = _tmpl$16(); | ||
| _el$78.$$click = handleCopy; | ||
| insert(_el$78, () => copied() ? "✅" : "📋"); | ||
| createRenderEffect(() => setAttribute(_el$78, "title", copied() ? "Copied!" : "Copy")); | ||
| return _el$78; | ||
| })(); | ||
| } | ||
| delegateEvents(["click", "mousedown"]); | ||
| //#endregion | ||
| export { BaseTanStackRouterDevtoolsPanel, BaseTanStackRouterDevtoolsPanel as default, useLocalStorage as n, useStyles$1 as r, useIsMounted as t }; | ||
| //# sourceMappingURL=BaseTanStackRouterDevtoolsPanel-DwUaC87U.js.map |
Sorry, the diff of this file is too big to display
| const require_context = require("./context-DZa5WwQ_.cjs"); | ||
| const require_BaseTanStackRouterDevtoolsPanel = require("./BaseTanStackRouterDevtoolsPanel-BlI6Kawa.cjs"); | ||
| let clsx = require("clsx"); | ||
| //#region src/logo.tsx | ||
| var _tmpl$$1 = /* @__PURE__ */ require_context.template(`<svg xmlns=http://www.w3.org/2000/svg enable-background="new 0 0 634 633"viewBox="0 0 634 633"><g transform=translate(1)><linearGradient x1=-641.486 x2=-641.486 y1=856.648 y2=855.931 gradientTransform="matrix(633 0 0 -633 406377 542258)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#6bdaff></stop><stop offset=0.319 stop-color=#f9ffb5></stop><stop offset=0.706 stop-color=#ffa770></stop><stop offset=1 stop-color=#ff7373></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5 fill-rule=evenodd clip-rule=evenodd></circle><defs><filter width=454 height=396.9 x=-137.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=176.9 height=129.3 x=272.2 y=308 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=176.9 height=129.3 x=272.2 y=308 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><path fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11 d="M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1"></path><linearGradient x1=-645.656 x2=-646.499 y1=854.878 y2=854.788 gradientTransform="matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ee2700></stop><stop offset=1 stop-color=#ff008e></stop></linearGradient><path fill-rule=evenodd d="M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd></path><path fill=#D8D8D8 fill-rule=evenodd stroke=#FFF stroke-linecap=round stroke-linejoin=bevel stroke-width=7 d="M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9"clip-rule=evenodd></path></g><defs><filter width=280.6 height=317.4 x=73.2 y=113.9 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=280.6 height=317.4 x=73.2 y=113.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><linearGradient x1=-646.8 x2=-646.8 y1=854.844 y2=853.844 gradientTransform="matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#a17500></stop><stop offset=1 stop-color=#5d2100></stop></linearGradient><path fill-rule=evenodd d="M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6"clip-rule=evenodd></path><linearGradient x1=-635.467 x2=-635.467 y1=852.115 y2=851.115 gradientTransform="matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd></path><linearGradient x1=-636.573 x2=-636.573 y1=855.444 y2=854.444 gradientTransform="matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z"clip-rule=evenodd></path><linearGradient x1=-632.145 x2=-632.145 y1=854.174 y2=853.174 gradientTransform="matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z"clip-rule=evenodd></path><linearGradient x1=-638.224 x2=-638.224 y1=853.801 y2=852.801 gradientTransform="matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd></path><linearGradient x1=-637.723 x2=-637.723 y1=855.103 y2=854.103 gradientTransform="matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z"clip-rule=evenodd></path><linearGradient x1=-631.79 x2=-631.79 y1=855.872 y2=854.872 gradientTransform="matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z"clip-rule=evenodd></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1"></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32"></path></g><defs><filter width=532 height=633 x=50.5 y=399 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=532 height=633 x=50.5 y=399 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><linearGradient x1=-641.104 x2=-641.278 y1=856.577 y2=856.183 gradientTransform="matrix(532 0 0 -633 341484.5 542657)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#fff400></stop><stop offset=1 stop-color=#3c8700></stop></linearGradient><ellipse cx=316.5 cy=715.5 fill-rule=evenodd clip-rule=evenodd rx=266 ry=316.5></ellipse><defs><filter width=288 height=283 x=391 y=-24 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=288 height=283 x=391 y=-24 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><g transform="translate(397 -24)"><linearGradient x1=-1036.672 x2=-1036.672 y1=880.018 y2=879.018 gradientTransform="matrix(227 0 0 -227 235493 199764)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffdf00></stop><stop offset=1 stop-color=#ff9d00></stop></linearGradient><circle cx=168.5 cy=113.5 r=113.5 fill-rule=evenodd clip-rule=evenodd></circle><linearGradient x1=-1017.329 x2=-1018.602 y1=658.003 y2=657.998 gradientTransform="matrix(30 0 0 -1 30558 771)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M30 113H0"></path><linearGradient x1=-1014.501 x2=-1015.774 y1=839.985 y2=839.935 gradientTransform="matrix(26.5 0 0 -5.5 26925 4696.5)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M33.5 79.5L7 74"></path><linearGradient x1=-1016.59 x2=-1017.862 y1=852.671 y2=852.595 gradientTransform="matrix(29 0 0 -8 29523 6971)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M34 146l-29 8"></path><linearGradient x1=-1011.984 x2=-1013.257 y1=863.523 y2=863.229 gradientTransform="matrix(24 0 0 -13 24339 11407)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M45 177l-24 13"></path><linearGradient x1=-1006.673 x2=-1007.946 y1=869.279 y2=868.376 gradientTransform="matrix(20 0 0 -19 20205 16720)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M67 204l-20 19"></path><linearGradient x1=-992.85 x2=-993.317 y1=871.258 y2=870.258 gradientTransform="matrix(13.8339 0 0 -22.8467 13825.796 20131.938)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M94.4 227l-13.8 22.8"></path><linearGradient x1=-953.835 x2=-953.965 y1=871.9 y2=870.9 gradientTransform="matrix(7.5 0 0 -24.5 7278 21605)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M127.5 243.5L120 268"></path><linearGradient x1=244.504 x2=244.496 y1=871.898 y2=870.898 gradientTransform="matrix(.5 0 0 -24.5 45.5 21614)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M167.5 252.5l.5 24.5">`); | ||
| function TanStackLogo() { | ||
| const id = require_context.createUniqueId(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$1(), _el$3 = _el$.firstChild.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$13.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$39 = _el$37.firstChild.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$37.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$47.nextSibling, _el$49 = _el$48.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling, _el$60 = _el$45.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$60.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$65.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$72 = _el$70.firstChild.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling; | ||
| require_context.setAttribute(_el$3, "id", `a-${id}`); | ||
| require_context.setAttribute(_el$4, "fill", `url(#a-${id})`); | ||
| require_context.setAttribute(_el$6, "id", `b-${id}`); | ||
| require_context.setAttribute(_el$7, "id", `c-${id}`); | ||
| require_context.setAttribute(_el$8, "filter", `url(#b-${id})`); | ||
| require_context.setAttribute(_el$9, "mask", `url(#c-${id})`); | ||
| require_context.setAttribute(_el$1, "id", `d-${id}`); | ||
| require_context.setAttribute(_el$10, "id", `e-${id}`); | ||
| require_context.setAttribute(_el$11, "filter", `url(#d-${id})`); | ||
| require_context.setAttribute(_el$12, "mask", `url(#e-${id})`); | ||
| require_context.setAttribute(_el$14, "id", `f-${id}`); | ||
| require_context.setAttribute(_el$15, "id", `g-${id}`); | ||
| require_context.setAttribute(_el$16, "filter", `url(#f-${id})`); | ||
| require_context.setAttribute(_el$17, "mask", `url(#g-${id})`); | ||
| require_context.setAttribute(_el$19, "id", `h-${id}`); | ||
| require_context.setAttribute(_el$20, "id", `i-${id}`); | ||
| require_context.setAttribute(_el$21, "filter", `url(#h-${id})`); | ||
| require_context.setAttribute(_el$22, "mask", `url(#i-${id})`); | ||
| require_context.setAttribute(_el$24, "id", `j-${id}`); | ||
| require_context.setAttribute(_el$25, "id", `k-${id}`); | ||
| require_context.setAttribute(_el$26, "filter", `url(#j-${id})`); | ||
| require_context.setAttribute(_el$27, "mask", `url(#k-${id})`); | ||
| require_context.setAttribute(_el$29, "id", `l-${id}`); | ||
| require_context.setAttribute(_el$30, "id", `m-${id}`); | ||
| require_context.setAttribute(_el$31, "filter", `url(#l-${id})`); | ||
| require_context.setAttribute(_el$32, "mask", `url(#m-${id})`); | ||
| require_context.setAttribute(_el$34, "id", `n-${id}`); | ||
| require_context.setAttribute(_el$35, "id", `o-${id}`); | ||
| require_context.setAttribute(_el$36, "filter", `url(#n-${id})`); | ||
| require_context.setAttribute(_el$37, "mask", `url(#o-${id})`); | ||
| require_context.setAttribute(_el$39, "id", `p-${id}`); | ||
| require_context.setAttribute(_el$40, "fill", `url(#p-${id})`); | ||
| require_context.setAttribute(_el$42, "id", `q-${id}`); | ||
| require_context.setAttribute(_el$43, "id", `r-${id}`); | ||
| require_context.setAttribute(_el$44, "filter", `url(#q-${id})`); | ||
| require_context.setAttribute(_el$45, "mask", `url(#r-${id})`); | ||
| require_context.setAttribute(_el$46, "id", `s-${id}`); | ||
| require_context.setAttribute(_el$47, "fill", `url(#s-${id})`); | ||
| require_context.setAttribute(_el$48, "id", `t-${id}`); | ||
| require_context.setAttribute(_el$49, "fill", `url(#t-${id})`); | ||
| require_context.setAttribute(_el$50, "id", `u-${id}`); | ||
| require_context.setAttribute(_el$51, "fill", `url(#u-${id})`); | ||
| require_context.setAttribute(_el$52, "id", `v-${id}`); | ||
| require_context.setAttribute(_el$53, "fill", `url(#v-${id})`); | ||
| require_context.setAttribute(_el$54, "id", `w-${id}`); | ||
| require_context.setAttribute(_el$55, "fill", `url(#w-${id})`); | ||
| require_context.setAttribute(_el$56, "id", `x-${id}`); | ||
| require_context.setAttribute(_el$57, "fill", `url(#x-${id})`); | ||
| require_context.setAttribute(_el$58, "id", `y-${id}`); | ||
| require_context.setAttribute(_el$59, "fill", `url(#y-${id})`); | ||
| require_context.setAttribute(_el$61, "id", `z-${id}`); | ||
| require_context.setAttribute(_el$62, "id", `A-${id}`); | ||
| require_context.setAttribute(_el$63, "filter", `url(#z-${id})`); | ||
| require_context.setAttribute(_el$64, "id", `B-${id}`); | ||
| require_context.setAttribute(_el$65, "fill", `url(#B-${id})`); | ||
| require_context.setAttribute(_el$65, "mask", `url(#A-${id})`); | ||
| require_context.setAttribute(_el$67, "id", `C-${id}`); | ||
| require_context.setAttribute(_el$68, "id", `D-${id}`); | ||
| require_context.setAttribute(_el$69, "filter", `url(#C-${id})`); | ||
| require_context.setAttribute(_el$70, "mask", `url(#D-${id})`); | ||
| require_context.setAttribute(_el$72, "id", `E-${id}`); | ||
| require_context.setAttribute(_el$73, "fill", `url(#E-${id})`); | ||
| require_context.setAttribute(_el$74, "id", `F-${id}`); | ||
| require_context.setAttribute(_el$75, "stroke", `url(#F-${id})`); | ||
| require_context.setAttribute(_el$76, "id", `G-${id}`); | ||
| require_context.setAttribute(_el$77, "stroke", `url(#G-${id})`); | ||
| require_context.setAttribute(_el$78, "id", `H-${id}`); | ||
| require_context.setAttribute(_el$79, "stroke", `url(#H-${id})`); | ||
| require_context.setAttribute(_el$80, "id", `I-${id}`); | ||
| require_context.setAttribute(_el$81, "stroke", `url(#I-${id})`); | ||
| require_context.setAttribute(_el$82, "id", `J-${id}`); | ||
| require_context.setAttribute(_el$83, "stroke", `url(#J-${id})`); | ||
| require_context.setAttribute(_el$84, "id", `K-${id}`); | ||
| require_context.setAttribute(_el$85, "stroke", `url(#K-${id})`); | ||
| require_context.setAttribute(_el$86, "id", `L-${id}`); | ||
| require_context.setAttribute(_el$87, "stroke", `url(#L-${id})`); | ||
| require_context.setAttribute(_el$88, "id", `M-${id}`); | ||
| require_context.setAttribute(_el$89, "stroke", `url(#M-${id})`); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| //#endregion | ||
| //#region src/FloatingTanStackRouterDevtools.tsx | ||
| var _tmpl$ = /* @__PURE__ */ require_context.template(`<button type=button><div><div></div><div></div></div><div>-</div><div>TanStack Router`); | ||
| function FloatingTanStackRouterDevtools({ initialIsOpen, panelProps = {}, closeButtonProps = {}, toggleButtonProps = {}, position = "bottom-left", containerElement: Container = "footer", router, routerState, shadowDOMTarget }) { | ||
| const [rootEl, setRootEl] = require_context.createSignal(); | ||
| let panelRef = void 0; | ||
| const [isOpen, setIsOpen] = require_BaseTanStackRouterDevtoolsPanel.useLocalStorage("tanstackRouterDevtoolsOpen", initialIsOpen); | ||
| const [devtoolsHeight, setDevtoolsHeight] = require_BaseTanStackRouterDevtoolsPanel.useLocalStorage("tanstackRouterDevtoolsHeight", null); | ||
| const [isResolvedOpen, setIsResolvedOpen] = require_context.createSignal(false); | ||
| const [isResizing, setIsResizing] = require_context.createSignal(false); | ||
| const isMounted = require_BaseTanStackRouterDevtoolsPanel.useIsMounted(); | ||
| const styles = require_BaseTanStackRouterDevtoolsPanel.useStyles(); | ||
| const handleDragStart = (panelElement, startEvent) => { | ||
| if (startEvent.button !== 0) return; | ||
| setIsResizing(true); | ||
| const dragInfo = { | ||
| originalHeight: panelElement?.getBoundingClientRect().height ?? 0, | ||
| pageY: startEvent.pageY | ||
| }; | ||
| const run = (moveEvent) => { | ||
| const delta = dragInfo.pageY - moveEvent.pageY; | ||
| const newHeight = dragInfo.originalHeight + delta; | ||
| setDevtoolsHeight(newHeight); | ||
| if (newHeight < 70) setIsOpen(false); | ||
| else setIsOpen(true); | ||
| }; | ||
| const unsub = () => { | ||
| setIsResizing(false); | ||
| document.removeEventListener("mousemove", run); | ||
| document.removeEventListener("mouseUp", unsub); | ||
| }; | ||
| document.addEventListener("mousemove", run); | ||
| document.addEventListener("mouseup", unsub); | ||
| }; | ||
| isOpen(); | ||
| require_context.createEffect(() => { | ||
| setIsResolvedOpen(isOpen() ?? false); | ||
| }); | ||
| require_context.createEffect(() => { | ||
| if (isResolvedOpen()) { | ||
| const previousValue = rootEl()?.parentElement?.style.paddingBottom; | ||
| const run = () => { | ||
| const containerHeight = panelRef.getBoundingClientRect().height; | ||
| if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.style.paddingBottom = `${containerHeight}px`; | ||
| return prev; | ||
| }); | ||
| }; | ||
| run(); | ||
| if (typeof window !== "undefined") { | ||
| window.addEventListener("resize", run); | ||
| return () => { | ||
| window.removeEventListener("resize", run); | ||
| if (rootEl()?.parentElement && typeof previousValue === "string") setRootEl((prev) => { | ||
| prev.parentElement.style.paddingBottom = previousValue; | ||
| return prev; | ||
| }); | ||
| }; | ||
| } | ||
| } else if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.removeAttribute("style"); | ||
| return prev; | ||
| }); | ||
| }); | ||
| require_context.createEffect(() => { | ||
| if (rootEl()) { | ||
| const el = rootEl(); | ||
| const fontSize = getComputedStyle(el).fontSize; | ||
| el?.style.setProperty("--tsrd-font-size", fontSize); | ||
| } | ||
| }); | ||
| const { style: panelStyle = {}, ...otherPanelProps } = panelProps; | ||
| const { style: closeButtonStyle = {}, onClick: onCloseClick, ...otherCloseButtonProps } = closeButtonProps; | ||
| const { onClick: onToggleClick, class: toggleButtonClassName, ...otherToggleButtonProps } = toggleButtonProps; | ||
| if (!isMounted()) return null; | ||
| const resolvedHeight = require_context.createMemo(() => devtoolsHeight() ?? 500); | ||
| const basePanelClass = require_context.createMemo(() => { | ||
| return (0, clsx.clsx)(styles().devtoolsPanelContainer, styles().devtoolsPanelContainerVisibility(!!isOpen()), styles().devtoolsPanelContainerResizing(isResizing), styles().devtoolsPanelContainerAnimation(isResolvedOpen(), resolvedHeight() + 16)); | ||
| }); | ||
| const basePanelStyle = require_context.createMemo(() => { | ||
| return { | ||
| height: `${resolvedHeight()}px`, | ||
| ...panelStyle || {} | ||
| }; | ||
| }); | ||
| const buttonStyle = require_context.createMemo(() => { | ||
| return (0, clsx.clsx)(styles().mainCloseBtn, styles().mainCloseBtnPosition(position), styles().mainCloseBtnAnimation(!!isOpen()), toggleButtonClassName); | ||
| }); | ||
| return require_context.createComponent(require_context.Dynamic, { | ||
| component: Container, | ||
| ref: setRootEl, | ||
| "class": "TanStackRouterDevtools", | ||
| get children() { | ||
| return [require_context.createComponent(require_context.DevtoolsOnCloseContext.Provider, { | ||
| value: { onCloseClick: onCloseClick ?? (() => {}) }, | ||
| get children() { | ||
| return require_context.createComponent(require_BaseTanStackRouterDevtoolsPanel.BaseTanStackRouterDevtoolsPanel, require_context.mergeProps({ ref(r$) { | ||
| var _ref$ = panelRef; | ||
| typeof _ref$ === "function" ? _ref$(r$) : panelRef = r$; | ||
| } }, otherPanelProps, { | ||
| router, | ||
| routerState, | ||
| className: basePanelClass, | ||
| style: basePanelStyle, | ||
| get isOpen() { | ||
| return isResolvedOpen(); | ||
| }, | ||
| setIsOpen, | ||
| handleDragStart: (e) => handleDragStart(panelRef, e), | ||
| shadowDOMTarget | ||
| })); | ||
| } | ||
| }), (() => { | ||
| var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.nextSibling; | ||
| require_context.spread(_el$, require_context.mergeProps(otherToggleButtonProps, { | ||
| "aria-label": "Open TanStack Router Devtools", | ||
| "onClick": (e) => { | ||
| setIsOpen(true); | ||
| onToggleClick && onToggleClick(e); | ||
| }, | ||
| get ["class"]() { | ||
| return buttonStyle(); | ||
| } | ||
| }), false, true); | ||
| require_context.insert(_el$3, require_context.createComponent(TanStackLogo, {})); | ||
| require_context.insert(_el$4, require_context.createComponent(TanStackLogo, {})); | ||
| require_context.createRenderEffect((_p$) => { | ||
| var _v$ = styles().mainCloseBtnIconContainer, _v$2 = styles().mainCloseBtnIconOuter, _v$3 = styles().mainCloseBtnIconInner, _v$4 = styles().mainCloseBtnDivider, _v$5 = styles().routerLogoCloseButton; | ||
| _v$ !== _p$.e && require_context.className(_el$2, _p$.e = _v$); | ||
| _v$2 !== _p$.t && require_context.className(_el$3, _p$.t = _v$2); | ||
| _v$3 !== _p$.a && require_context.className(_el$4, _p$.a = _v$3); | ||
| _v$4 !== _p$.o && require_context.className(_el$5, _p$.o = _v$4); | ||
| _v$5 !== _p$.i && require_context.className(_el$6, _p$.i = _v$5); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0 | ||
| }); | ||
| return _el$; | ||
| })()]; | ||
| } | ||
| }); | ||
| } | ||
| //#endregion | ||
| exports.FloatingTanStackRouterDevtools = FloatingTanStackRouterDevtools; | ||
| exports.default = FloatingTanStackRouterDevtools; | ||
| //# sourceMappingURL=FloatingTanStackRouterDevtools-M-UhaKLc.cjs.map |
| {"version":3,"file":"FloatingTanStackRouterDevtools-M-UhaKLc.cjs","names":["createUniqueId","TanStackLogo","id","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_el$24","_el$25","_el$26","_el$27","_el$28","_el$29","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$41","_el$42","_el$43","_el$44","_el$45","_el$46","_el$47","_el$48","_el$49","_el$50","_el$51","_el$52","_el$53","_el$54","_el$55","_el$56","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$67","_el$68","_el$69","_el$70","_el$71","_el$72","_el$73","_el$74","_el$75","_el$76","_el$77","_el$78","_el$79","_el$80","_el$81","_el$82","_el$83","_el$84","_el$85","_el$86","_el$87","_el$88","_el$89","_$setAttribute","clsx","cx","createEffect","createMemo","createSignal","Dynamic","DevtoolsOnCloseContext","useIsMounted","BaseTanStackRouterDevtoolsPanel","useLocalStorage","TanStackLogo","useStyles","Accessor","JSX","AnyRouter","FloatingDevtoolsOptions","initialIsOpen","panelProps","ref","closeButtonProps","toggleButtonProps","position","containerElement","router","routerState","shadowDOMTarget","ShadowRoot","FloatingTanStackRouterDevtools","Container","Element","rootEl","setRootEl","HTMLDivElement","panelRef","undefined","isOpen","setIsOpen","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","styles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","MouseEvent","delta","newHeight","unsub","document","removeEventListener","addEventListener","isButtonClosed","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","Record","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","basePanelClass","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","component","children","Provider","value","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$spread","_$insert","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"sources":["../src/logo.tsx","../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { createUniqueId } from 'solid-js'\n\nexport function TanStackLogo() {\n const id = createUniqueId()\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enable-background=\"new 0 0 634 633\"\n viewBox=\"0 0 634 633\"\n >\n <g transform=\"translate(1)\">\n <linearGradient\n id={`a-${id}`}\n x1=\"-641.486\"\n x2=\"-641.486\"\n y1=\"856.648\"\n y2=\"855.931\"\n gradientTransform=\"matrix(633 0 0 -633 406377 542258)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#6bdaff\"></stop>\n <stop offset=\"0.319\" stop-color=\"#f9ffb5\"></stop>\n <stop offset=\"0.706\" stop-color=\"#ffa770\"></stop>\n <stop offset=\"1\" stop-color=\"#ff7373\"></stop>\n </linearGradient>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill={`url(#a-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <defs>\n <filter\n id={`b-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`c-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#b-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#c-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`d-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`e-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#d-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#e-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`f-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`g-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#f-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#g-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`h-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`i-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#h-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#i-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`j-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`k-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#j-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#k-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`l-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`m-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#l-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#m-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`n-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`o-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#n-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#o-${id})`}>\n <path\n fill=\"none\"\n stroke=\"#000\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"11\"\n d=\"M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1\"\n ></path>\n <linearGradient\n id={`p-${id}`}\n x1=\"-645.656\"\n x2=\"-646.499\"\n y1=\"854.878\"\n y2=\"854.788\"\n gradientTransform=\"matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ee2700\"></stop>\n <stop offset=\"1\" stop-color=\"#ff008e\"></stop>\n </linearGradient>\n <path\n fill={`url(#p-${id})`}\n fill-rule=\"evenodd\"\n d=\"M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"#D8D8D8\"\n fill-rule=\"evenodd\"\n stroke=\"#FFF\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"7\"\n d=\"M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9\"\n clip-rule=\"evenodd\"\n ></path>\n </g>\n <defs>\n <filter\n id={`q-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`r-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#q-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#r-${id})`}>\n <linearGradient\n id={`s-${id}`}\n x1=\"-646.8\"\n x2=\"-646.8\"\n y1=\"854.844\"\n y2=\"853.844\"\n gradientTransform=\"matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#a17500\"></stop>\n <stop offset=\"1\" stop-color=\"#5d2100\"></stop>\n </linearGradient>\n <path\n fill={`url(#s-${id})`}\n fill-rule=\"evenodd\"\n d=\"M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`t-${id}`}\n x1=\"-635.467\"\n x2=\"-635.467\"\n y1=\"852.115\"\n y2=\"851.115\"\n gradientTransform=\"matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#t-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`u-${id}`}\n x1=\"-636.573\"\n x2=\"-636.573\"\n y1=\"855.444\"\n y2=\"854.444\"\n gradientTransform=\"matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#u-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`v-${id}`}\n x1=\"-632.145\"\n x2=\"-632.145\"\n y1=\"854.174\"\n y2=\"853.174\"\n gradientTransform=\"matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#v-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`w-${id}`}\n x1=\"-638.224\"\n x2=\"-638.224\"\n y1=\"853.801\"\n y2=\"852.801\"\n gradientTransform=\"matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#w-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`x-${id}`}\n x1=\"-637.723\"\n x2=\"-637.723\"\n y1=\"855.103\"\n y2=\"854.103\"\n gradientTransform=\"matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#x-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`y-${id}`}\n x1=\"-631.79\"\n x2=\"-631.79\"\n y1=\"855.872\"\n y2=\"854.872\"\n gradientTransform=\"matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#y-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32\"\n ></path>\n </g>\n <defs>\n <filter\n id={`z-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`A-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#z-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <linearGradient\n id={`B-${id}`}\n x1=\"-641.104\"\n x2=\"-641.278\"\n y1=\"856.577\"\n y2=\"856.183\"\n gradientTransform=\"matrix(532 0 0 -633 341484.5 542657)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#fff400\"></stop>\n <stop offset=\"1\" stop-color=\"#3c8700\"></stop>\n </linearGradient>\n <ellipse\n cx=\"316.5\"\n cy=\"715.5\"\n fill={`url(#B-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n mask={`url(#A-${id})`}\n rx=\"266\"\n ry=\"316.5\"\n ></ellipse>\n <defs>\n <filter\n id={`C-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`D-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#C-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#D-${id})`}>\n <g transform=\"translate(397 -24)\">\n <linearGradient\n id={`E-${id}`}\n x1=\"-1036.672\"\n x2=\"-1036.672\"\n y1=\"880.018\"\n y2=\"879.018\"\n gradientTransform=\"matrix(227 0 0 -227 235493 199764)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffdf00\"></stop>\n <stop offset=\"1\" stop-color=\"#ff9d00\"></stop>\n </linearGradient>\n <circle\n cx=\"168.5\"\n cy=\"113.5\"\n r=\"113.5\"\n fill={`url(#E-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <linearGradient\n id={`F-${id}`}\n x1=\"-1017.329\"\n x2=\"-1018.602\"\n y1=\"658.003\"\n y2=\"657.998\"\n gradientTransform=\"matrix(30 0 0 -1 30558 771)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#F-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M30 113H0\"\n ></path>\n <linearGradient\n id={`G-${id}`}\n x1=\"-1014.501\"\n x2=\"-1015.774\"\n y1=\"839.985\"\n y2=\"839.935\"\n gradientTransform=\"matrix(26.5 0 0 -5.5 26925 4696.5)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#G-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M33.5 79.5L7 74\"\n ></path>\n <linearGradient\n id={`H-${id}`}\n x1=\"-1016.59\"\n x2=\"-1017.862\"\n y1=\"852.671\"\n y2=\"852.595\"\n gradientTransform=\"matrix(29 0 0 -8 29523 6971)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#H-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M34 146l-29 8\"\n ></path>\n <linearGradient\n id={`I-${id}`}\n x1=\"-1011.984\"\n x2=\"-1013.257\"\n y1=\"863.523\"\n y2=\"863.229\"\n gradientTransform=\"matrix(24 0 0 -13 24339 11407)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#I-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M45 177l-24 13\"\n ></path>\n <linearGradient\n id={`J-${id}`}\n x1=\"-1006.673\"\n x2=\"-1007.946\"\n y1=\"869.279\"\n y2=\"868.376\"\n gradientTransform=\"matrix(20 0 0 -19 20205 16720)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#J-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M67 204l-20 19\"\n ></path>\n <linearGradient\n id={`K-${id}`}\n x1=\"-992.85\"\n x2=\"-993.317\"\n y1=\"871.258\"\n y2=\"870.258\"\n gradientTransform=\"matrix(13.8339 0 0 -22.8467 13825.796 20131.938)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#K-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M94.4 227l-13.8 22.8\"\n ></path>\n <linearGradient\n id={`L-${id}`}\n x1=\"-953.835\"\n x2=\"-953.965\"\n y1=\"871.9\"\n y2=\"870.9\"\n gradientTransform=\"matrix(7.5 0 0 -24.5 7278 21605)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#L-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M127.5 243.5L120 268\"\n ></path>\n <linearGradient\n id={`M-${id}`}\n x1=\"244.504\"\n x2=\"244.496\"\n y1=\"871.898\"\n y2=\"870.898\"\n gradientTransform=\"matrix(.5 0 0 -24.5 45.5 21614)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#M-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M167.5 252.5l.5 24.5\"\n ></path>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n","import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n */\n panelProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: any & {\n ref?: any\n }\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router: Accessor<AnyRouter>\n routerState: Accessor<any>\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n initialIsOpen,\n panelProps = {},\n closeButtonProps = {},\n toggleButtonProps = {},\n position = 'bottom-left',\n containerElement: Container = 'footer',\n router,\n routerState,\n shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n // eslint-disable-next-line prefer-const\n let panelRef: HTMLDivElement | undefined = undefined\n\n const [isOpen, setIsOpen] = useLocalStorage(\n 'tanstackRouterDevtoolsOpen',\n initialIsOpen,\n )\n\n const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n 'tanstackRouterDevtoolsHeight',\n null,\n )\n\n const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n const [isResizing, setIsResizing] = createSignal(false)\n const isMounted = useIsMounted()\n const styles = useStyles()\n\n const handleDragStart = (\n panelElement: HTMLDivElement | undefined,\n startEvent: any,\n ) => {\n if (startEvent.button !== 0) return // Only allow left click for drag\n\n setIsResizing(true)\n\n const dragInfo = {\n originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n pageY: startEvent.pageY,\n }\n\n const run = (moveEvent: MouseEvent) => {\n const delta = dragInfo.pageY - moveEvent.pageY\n const newHeight = dragInfo.originalHeight + delta\n\n setDevtoolsHeight(newHeight)\n\n if (newHeight < 70) {\n setIsOpen(false)\n } else {\n setIsOpen(true)\n }\n }\n\n const unsub = () => {\n setIsResizing(false)\n document.removeEventListener('mousemove', run)\n document.removeEventListener('mouseUp', unsub)\n }\n\n document.addEventListener('mousemove', run)\n document.addEventListener('mouseup', unsub)\n }\n\n const isButtonClosed = isOpen() ?? false\n\n createEffect(() => {\n setIsResolvedOpen(isOpen() ?? false)\n })\n\n createEffect(() => {\n if (isResolvedOpen()) {\n const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n const run = () => {\n const containerHeight = panelRef!.getBoundingClientRect().height\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.style.paddingBottom = `${containerHeight}px`\n }\n return prev\n })\n }\n }\n\n run()\n\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', run)\n\n return () => {\n window.removeEventListener('resize', run)\n if (rootEl()?.parentElement && typeof previousValue === 'string') {\n setRootEl((prev) => {\n prev!.parentElement!.style.paddingBottom = previousValue\n return prev\n })\n }\n }\n }\n } else {\n // Reset padding when devtools are closed\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.removeAttribute('style')\n }\n return prev\n })\n }\n }\n return\n })\n\n createEffect(() => {\n if (rootEl()) {\n const el = rootEl()\n const fontSize = getComputedStyle(el!).fontSize\n el?.style.setProperty('--tsrd-font-size', fontSize)\n }\n })\n\n const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n style?: Record<string, any>\n }\n\n const {\n style: closeButtonStyle = {},\n onClick: onCloseClick,\n ...otherCloseButtonProps\n } = closeButtonProps\n\n const {\n onClick: onToggleClick,\n class: toggleButtonClassName,\n ...otherToggleButtonProps\n } = toggleButtonProps\n\n // Do not render on the server\n if (!isMounted()) return null\n\n const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n const basePanelClass = createMemo(() => {\n return cx(\n styles().devtoolsPanelContainer,\n styles().devtoolsPanelContainerVisibility(!!isOpen()),\n styles().devtoolsPanelContainerResizing(isResizing),\n styles().devtoolsPanelContainerAnimation(\n isResolvedOpen(),\n resolvedHeight() + 16,\n ),\n )\n })\n\n const basePanelStyle = createMemo(() => {\n return {\n height: `${resolvedHeight()}px`,\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n ...(panelStyle || {}),\n }\n })\n\n const buttonStyle = createMemo(() => {\n return cx(\n styles().mainCloseBtn,\n styles().mainCloseBtnPosition(position),\n styles().mainCloseBtnAnimation(!!isOpen()),\n toggleButtonClassName,\n )\n })\n\n return (\n <Dynamic\n component={Container}\n ref={setRootEl}\n class=\"TanStackRouterDevtools\"\n >\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: onCloseClick ?? (() => {}),\n }}\n >\n {/* {router() ? ( */}\n <BaseTanStackRouterDevtoolsPanel\n ref={panelRef}\n {...otherPanelProps}\n router={router}\n routerState={routerState}\n className={basePanelClass}\n style={basePanelStyle}\n isOpen={isResolvedOpen()}\n setIsOpen={setIsOpen}\n handleDragStart={(e) => handleDragStart(panelRef, e)}\n shadowDOMTarget={shadowDOMTarget}\n />\n {/* ) : (\n <p>No router</p>\n )} */}\n </DevtoolsOnCloseContext.Provider>\n\n <button\n type=\"button\"\n {...otherToggleButtonProps}\n aria-label=\"Open TanStack Router Devtools\"\n onClick={(e) => {\n setIsOpen(true)\n onToggleClick && onToggleClick(e)\n }}\n class={buttonStyle()}\n >\n <div class={styles().mainCloseBtnIconContainer}>\n <div class={styles().mainCloseBtnIconOuter}>\n <TanStackLogo />\n </div>\n <div class={styles().mainCloseBtnIconInner}>\n <TanStackLogo />\n </div>\n </div>\n <div class={styles().mainCloseBtnDivider}>-</div>\n <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n </button>\n </Dynamic>\n )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"mappings":"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"} |
| import { C as createUniqueId, S as createSignal, T as mergeProps, b as createMemo, c as insert, d as setAttribute, f as spread, i as Dynamic, o as className, p as template, t as DevtoolsOnCloseContext, v as createComponent, x as createRenderEffect, y as createEffect } from "./context-D56_tqst.js"; | ||
| import { BaseTanStackRouterDevtoolsPanel, n as useLocalStorage, r as useStyles, t as useIsMounted } from "./BaseTanStackRouterDevtoolsPanel-DwUaC87U.js"; | ||
| import { clsx } from "clsx"; | ||
| //#region src/logo.tsx | ||
| var _tmpl$$1 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg enable-background="new 0 0 634 633"viewBox="0 0 634 633"><g transform=translate(1)><linearGradient x1=-641.486 x2=-641.486 y1=856.648 y2=855.931 gradientTransform="matrix(633 0 0 -633 406377 542258)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#6bdaff></stop><stop offset=0.319 stop-color=#f9ffb5></stop><stop offset=0.706 stop-color=#ffa770></stop><stop offset=1 stop-color=#ff7373></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5 fill-rule=evenodd clip-rule=evenodd></circle><defs><filter width=454 height=396.9 x=-137.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=176.9 height=129.3 x=272.2 y=308 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=176.9 height=129.3 x=272.2 y=308 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><path fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11 d="M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1"></path><linearGradient x1=-645.656 x2=-646.499 y1=854.878 y2=854.788 gradientTransform="matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ee2700></stop><stop offset=1 stop-color=#ff008e></stop></linearGradient><path fill-rule=evenodd d="M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd></path><path fill=#D8D8D8 fill-rule=evenodd stroke=#FFF stroke-linecap=round stroke-linejoin=bevel stroke-width=7 d="M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9"clip-rule=evenodd></path></g><defs><filter width=280.6 height=317.4 x=73.2 y=113.9 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=280.6 height=317.4 x=73.2 y=113.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><linearGradient x1=-646.8 x2=-646.8 y1=854.844 y2=853.844 gradientTransform="matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#a17500></stop><stop offset=1 stop-color=#5d2100></stop></linearGradient><path fill-rule=evenodd d="M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6"clip-rule=evenodd></path><linearGradient x1=-635.467 x2=-635.467 y1=852.115 y2=851.115 gradientTransform="matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd></path><linearGradient x1=-636.573 x2=-636.573 y1=855.444 y2=854.444 gradientTransform="matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z"clip-rule=evenodd></path><linearGradient x1=-632.145 x2=-632.145 y1=854.174 y2=853.174 gradientTransform="matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z"clip-rule=evenodd></path><linearGradient x1=-638.224 x2=-638.224 y1=853.801 y2=852.801 gradientTransform="matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd></path><linearGradient x1=-637.723 x2=-637.723 y1=855.103 y2=854.103 gradientTransform="matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z"clip-rule=evenodd></path><linearGradient x1=-631.79 x2=-631.79 y1=855.872 y2=854.872 gradientTransform="matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z"clip-rule=evenodd></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1"></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32"></path></g><defs><filter width=532 height=633 x=50.5 y=399 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=532 height=633 x=50.5 y=399 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><linearGradient x1=-641.104 x2=-641.278 y1=856.577 y2=856.183 gradientTransform="matrix(532 0 0 -633 341484.5 542657)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#fff400></stop><stop offset=1 stop-color=#3c8700></stop></linearGradient><ellipse cx=316.5 cy=715.5 fill-rule=evenodd clip-rule=evenodd rx=266 ry=316.5></ellipse><defs><filter width=288 height=283 x=391 y=-24 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=288 height=283 x=391 y=-24 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><g transform="translate(397 -24)"><linearGradient x1=-1036.672 x2=-1036.672 y1=880.018 y2=879.018 gradientTransform="matrix(227 0 0 -227 235493 199764)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffdf00></stop><stop offset=1 stop-color=#ff9d00></stop></linearGradient><circle cx=168.5 cy=113.5 r=113.5 fill-rule=evenodd clip-rule=evenodd></circle><linearGradient x1=-1017.329 x2=-1018.602 y1=658.003 y2=657.998 gradientTransform="matrix(30 0 0 -1 30558 771)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M30 113H0"></path><linearGradient x1=-1014.501 x2=-1015.774 y1=839.985 y2=839.935 gradientTransform="matrix(26.5 0 0 -5.5 26925 4696.5)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M33.5 79.5L7 74"></path><linearGradient x1=-1016.59 x2=-1017.862 y1=852.671 y2=852.595 gradientTransform="matrix(29 0 0 -8 29523 6971)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M34 146l-29 8"></path><linearGradient x1=-1011.984 x2=-1013.257 y1=863.523 y2=863.229 gradientTransform="matrix(24 0 0 -13 24339 11407)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M45 177l-24 13"></path><linearGradient x1=-1006.673 x2=-1007.946 y1=869.279 y2=868.376 gradientTransform="matrix(20 0 0 -19 20205 16720)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M67 204l-20 19"></path><linearGradient x1=-992.85 x2=-993.317 y1=871.258 y2=870.258 gradientTransform="matrix(13.8339 0 0 -22.8467 13825.796 20131.938)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M94.4 227l-13.8 22.8"></path><linearGradient x1=-953.835 x2=-953.965 y1=871.9 y2=870.9 gradientTransform="matrix(7.5 0 0 -24.5 7278 21605)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M127.5 243.5L120 268"></path><linearGradient x1=244.504 x2=244.496 y1=871.898 y2=870.898 gradientTransform="matrix(.5 0 0 -24.5 45.5 21614)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M167.5 252.5l.5 24.5">`); | ||
| function TanStackLogo() { | ||
| const id = createUniqueId(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$1(), _el$3 = _el$.firstChild.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$13.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$39 = _el$37.firstChild.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$37.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$47.nextSibling, _el$49 = _el$48.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling, _el$60 = _el$45.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$60.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$65.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$72 = _el$70.firstChild.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling; | ||
| setAttribute(_el$3, "id", `a-${id}`); | ||
| setAttribute(_el$4, "fill", `url(#a-${id})`); | ||
| setAttribute(_el$6, "id", `b-${id}`); | ||
| setAttribute(_el$7, "id", `c-${id}`); | ||
| setAttribute(_el$8, "filter", `url(#b-${id})`); | ||
| setAttribute(_el$9, "mask", `url(#c-${id})`); | ||
| setAttribute(_el$1, "id", `d-${id}`); | ||
| setAttribute(_el$10, "id", `e-${id}`); | ||
| setAttribute(_el$11, "filter", `url(#d-${id})`); | ||
| setAttribute(_el$12, "mask", `url(#e-${id})`); | ||
| setAttribute(_el$14, "id", `f-${id}`); | ||
| setAttribute(_el$15, "id", `g-${id}`); | ||
| setAttribute(_el$16, "filter", `url(#f-${id})`); | ||
| setAttribute(_el$17, "mask", `url(#g-${id})`); | ||
| setAttribute(_el$19, "id", `h-${id}`); | ||
| setAttribute(_el$20, "id", `i-${id}`); | ||
| setAttribute(_el$21, "filter", `url(#h-${id})`); | ||
| setAttribute(_el$22, "mask", `url(#i-${id})`); | ||
| setAttribute(_el$24, "id", `j-${id}`); | ||
| setAttribute(_el$25, "id", `k-${id}`); | ||
| setAttribute(_el$26, "filter", `url(#j-${id})`); | ||
| setAttribute(_el$27, "mask", `url(#k-${id})`); | ||
| setAttribute(_el$29, "id", `l-${id}`); | ||
| setAttribute(_el$30, "id", `m-${id}`); | ||
| setAttribute(_el$31, "filter", `url(#l-${id})`); | ||
| setAttribute(_el$32, "mask", `url(#m-${id})`); | ||
| setAttribute(_el$34, "id", `n-${id}`); | ||
| setAttribute(_el$35, "id", `o-${id}`); | ||
| setAttribute(_el$36, "filter", `url(#n-${id})`); | ||
| setAttribute(_el$37, "mask", `url(#o-${id})`); | ||
| setAttribute(_el$39, "id", `p-${id}`); | ||
| setAttribute(_el$40, "fill", `url(#p-${id})`); | ||
| setAttribute(_el$42, "id", `q-${id}`); | ||
| setAttribute(_el$43, "id", `r-${id}`); | ||
| setAttribute(_el$44, "filter", `url(#q-${id})`); | ||
| setAttribute(_el$45, "mask", `url(#r-${id})`); | ||
| setAttribute(_el$46, "id", `s-${id}`); | ||
| setAttribute(_el$47, "fill", `url(#s-${id})`); | ||
| setAttribute(_el$48, "id", `t-${id}`); | ||
| setAttribute(_el$49, "fill", `url(#t-${id})`); | ||
| setAttribute(_el$50, "id", `u-${id}`); | ||
| setAttribute(_el$51, "fill", `url(#u-${id})`); | ||
| setAttribute(_el$52, "id", `v-${id}`); | ||
| setAttribute(_el$53, "fill", `url(#v-${id})`); | ||
| setAttribute(_el$54, "id", `w-${id}`); | ||
| setAttribute(_el$55, "fill", `url(#w-${id})`); | ||
| setAttribute(_el$56, "id", `x-${id}`); | ||
| setAttribute(_el$57, "fill", `url(#x-${id})`); | ||
| setAttribute(_el$58, "id", `y-${id}`); | ||
| setAttribute(_el$59, "fill", `url(#y-${id})`); | ||
| setAttribute(_el$61, "id", `z-${id}`); | ||
| setAttribute(_el$62, "id", `A-${id}`); | ||
| setAttribute(_el$63, "filter", `url(#z-${id})`); | ||
| setAttribute(_el$64, "id", `B-${id}`); | ||
| setAttribute(_el$65, "fill", `url(#B-${id})`); | ||
| setAttribute(_el$65, "mask", `url(#A-${id})`); | ||
| setAttribute(_el$67, "id", `C-${id}`); | ||
| setAttribute(_el$68, "id", `D-${id}`); | ||
| setAttribute(_el$69, "filter", `url(#C-${id})`); | ||
| setAttribute(_el$70, "mask", `url(#D-${id})`); | ||
| setAttribute(_el$72, "id", `E-${id}`); | ||
| setAttribute(_el$73, "fill", `url(#E-${id})`); | ||
| setAttribute(_el$74, "id", `F-${id}`); | ||
| setAttribute(_el$75, "stroke", `url(#F-${id})`); | ||
| setAttribute(_el$76, "id", `G-${id}`); | ||
| setAttribute(_el$77, "stroke", `url(#G-${id})`); | ||
| setAttribute(_el$78, "id", `H-${id}`); | ||
| setAttribute(_el$79, "stroke", `url(#H-${id})`); | ||
| setAttribute(_el$80, "id", `I-${id}`); | ||
| setAttribute(_el$81, "stroke", `url(#I-${id})`); | ||
| setAttribute(_el$82, "id", `J-${id}`); | ||
| setAttribute(_el$83, "stroke", `url(#J-${id})`); | ||
| setAttribute(_el$84, "id", `K-${id}`); | ||
| setAttribute(_el$85, "stroke", `url(#K-${id})`); | ||
| setAttribute(_el$86, "id", `L-${id}`); | ||
| setAttribute(_el$87, "stroke", `url(#L-${id})`); | ||
| setAttribute(_el$88, "id", `M-${id}`); | ||
| setAttribute(_el$89, "stroke", `url(#M-${id})`); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| //#endregion | ||
| //#region src/FloatingTanStackRouterDevtools.tsx | ||
| var _tmpl$ = /* @__PURE__ */ template(`<button type=button><div><div></div><div></div></div><div>-</div><div>TanStack Router`); | ||
| function FloatingTanStackRouterDevtools({ initialIsOpen, panelProps = {}, closeButtonProps = {}, toggleButtonProps = {}, position = "bottom-left", containerElement: Container = "footer", router, routerState, shadowDOMTarget }) { | ||
| const [rootEl, setRootEl] = createSignal(); | ||
| let panelRef = void 0; | ||
| const [isOpen, setIsOpen] = useLocalStorage("tanstackRouterDevtoolsOpen", initialIsOpen); | ||
| const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage("tanstackRouterDevtoolsHeight", null); | ||
| const [isResolvedOpen, setIsResolvedOpen] = createSignal(false); | ||
| const [isResizing, setIsResizing] = createSignal(false); | ||
| const isMounted = useIsMounted(); | ||
| const styles = useStyles(); | ||
| const handleDragStart = (panelElement, startEvent) => { | ||
| if (startEvent.button !== 0) return; | ||
| setIsResizing(true); | ||
| const dragInfo = { | ||
| originalHeight: panelElement?.getBoundingClientRect().height ?? 0, | ||
| pageY: startEvent.pageY | ||
| }; | ||
| const run = (moveEvent) => { | ||
| const delta = dragInfo.pageY - moveEvent.pageY; | ||
| const newHeight = dragInfo.originalHeight + delta; | ||
| setDevtoolsHeight(newHeight); | ||
| if (newHeight < 70) setIsOpen(false); | ||
| else setIsOpen(true); | ||
| }; | ||
| const unsub = () => { | ||
| setIsResizing(false); | ||
| document.removeEventListener("mousemove", run); | ||
| document.removeEventListener("mouseUp", unsub); | ||
| }; | ||
| document.addEventListener("mousemove", run); | ||
| document.addEventListener("mouseup", unsub); | ||
| }; | ||
| isOpen(); | ||
| createEffect(() => { | ||
| setIsResolvedOpen(isOpen() ?? false); | ||
| }); | ||
| createEffect(() => { | ||
| if (isResolvedOpen()) { | ||
| const previousValue = rootEl()?.parentElement?.style.paddingBottom; | ||
| const run = () => { | ||
| const containerHeight = panelRef.getBoundingClientRect().height; | ||
| if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.style.paddingBottom = `${containerHeight}px`; | ||
| return prev; | ||
| }); | ||
| }; | ||
| run(); | ||
| if (typeof window !== "undefined") { | ||
| window.addEventListener("resize", run); | ||
| return () => { | ||
| window.removeEventListener("resize", run); | ||
| if (rootEl()?.parentElement && typeof previousValue === "string") setRootEl((prev) => { | ||
| prev.parentElement.style.paddingBottom = previousValue; | ||
| return prev; | ||
| }); | ||
| }; | ||
| } | ||
| } else if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.removeAttribute("style"); | ||
| return prev; | ||
| }); | ||
| }); | ||
| createEffect(() => { | ||
| if (rootEl()) { | ||
| const el = rootEl(); | ||
| const fontSize = getComputedStyle(el).fontSize; | ||
| el?.style.setProperty("--tsrd-font-size", fontSize); | ||
| } | ||
| }); | ||
| const { style: panelStyle = {}, ...otherPanelProps } = panelProps; | ||
| const { style: closeButtonStyle = {}, onClick: onCloseClick, ...otherCloseButtonProps } = closeButtonProps; | ||
| const { onClick: onToggleClick, class: toggleButtonClassName, ...otherToggleButtonProps } = toggleButtonProps; | ||
| if (!isMounted()) return null; | ||
| const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500); | ||
| const basePanelClass = createMemo(() => { | ||
| return clsx(styles().devtoolsPanelContainer, styles().devtoolsPanelContainerVisibility(!!isOpen()), styles().devtoolsPanelContainerResizing(isResizing), styles().devtoolsPanelContainerAnimation(isResolvedOpen(), resolvedHeight() + 16)); | ||
| }); | ||
| const basePanelStyle = createMemo(() => { | ||
| return { | ||
| height: `${resolvedHeight()}px`, | ||
| ...panelStyle || {} | ||
| }; | ||
| }); | ||
| const buttonStyle = createMemo(() => { | ||
| return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(position), styles().mainCloseBtnAnimation(!!isOpen()), toggleButtonClassName); | ||
| }); | ||
| return createComponent(Dynamic, { | ||
| component: Container, | ||
| ref: setRootEl, | ||
| "class": "TanStackRouterDevtools", | ||
| get children() { | ||
| return [createComponent(DevtoolsOnCloseContext.Provider, { | ||
| value: { onCloseClick: onCloseClick ?? (() => {}) }, | ||
| get children() { | ||
| return createComponent(BaseTanStackRouterDevtoolsPanel, mergeProps({ ref(r$) { | ||
| var _ref$ = panelRef; | ||
| typeof _ref$ === "function" ? _ref$(r$) : panelRef = r$; | ||
| } }, otherPanelProps, { | ||
| router, | ||
| routerState, | ||
| className: basePanelClass, | ||
| style: basePanelStyle, | ||
| get isOpen() { | ||
| return isResolvedOpen(); | ||
| }, | ||
| setIsOpen, | ||
| handleDragStart: (e) => handleDragStart(panelRef, e), | ||
| shadowDOMTarget | ||
| })); | ||
| } | ||
| }), (() => { | ||
| var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.nextSibling; | ||
| spread(_el$, mergeProps(otherToggleButtonProps, { | ||
| "aria-label": "Open TanStack Router Devtools", | ||
| "onClick": (e) => { | ||
| setIsOpen(true); | ||
| onToggleClick && onToggleClick(e); | ||
| }, | ||
| get ["class"]() { | ||
| return buttonStyle(); | ||
| } | ||
| }), false, true); | ||
| insert(_el$3, createComponent(TanStackLogo, {})); | ||
| insert(_el$4, createComponent(TanStackLogo, {})); | ||
| createRenderEffect((_p$) => { | ||
| var _v$ = styles().mainCloseBtnIconContainer, _v$2 = styles().mainCloseBtnIconOuter, _v$3 = styles().mainCloseBtnIconInner, _v$4 = styles().mainCloseBtnDivider, _v$5 = styles().routerLogoCloseButton; | ||
| _v$ !== _p$.e && className(_el$2, _p$.e = _v$); | ||
| _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2); | ||
| _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3); | ||
| _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4); | ||
| _v$5 !== _p$.i && className(_el$6, _p$.i = _v$5); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0 | ||
| }); | ||
| return _el$; | ||
| })()]; | ||
| } | ||
| }); | ||
| } | ||
| //#endregion | ||
| export { FloatingTanStackRouterDevtools, FloatingTanStackRouterDevtools as default }; | ||
| //# sourceMappingURL=FloatingTanStackRouterDevtools-U4pxMObm.js.map |
| {"version":3,"file":"FloatingTanStackRouterDevtools-U4pxMObm.js","names":["createUniqueId","TanStackLogo","id","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_el$24","_el$25","_el$26","_el$27","_el$28","_el$29","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$41","_el$42","_el$43","_el$44","_el$45","_el$46","_el$47","_el$48","_el$49","_el$50","_el$51","_el$52","_el$53","_el$54","_el$55","_el$56","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$67","_el$68","_el$69","_el$70","_el$71","_el$72","_el$73","_el$74","_el$75","_el$76","_el$77","_el$78","_el$79","_el$80","_el$81","_el$82","_el$83","_el$84","_el$85","_el$86","_el$87","_el$88","_el$89","_$setAttribute","clsx","cx","createEffect","createMemo","createSignal","Dynamic","DevtoolsOnCloseContext","useIsMounted","BaseTanStackRouterDevtoolsPanel","useLocalStorage","TanStackLogo","useStyles","Accessor","JSX","AnyRouter","FloatingDevtoolsOptions","initialIsOpen","panelProps","ref","closeButtonProps","toggleButtonProps","position","containerElement","router","routerState","shadowDOMTarget","ShadowRoot","FloatingTanStackRouterDevtools","Container","Element","rootEl","setRootEl","HTMLDivElement","panelRef","undefined","isOpen","setIsOpen","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","styles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","MouseEvent","delta","newHeight","unsub","document","removeEventListener","addEventListener","isButtonClosed","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","Record","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","basePanelClass","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","component","children","Provider","value","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$spread","_$insert","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"sources":["../src/logo.tsx","../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { createUniqueId } from 'solid-js'\n\nexport function TanStackLogo() {\n const id = createUniqueId()\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enable-background=\"new 0 0 634 633\"\n viewBox=\"0 0 634 633\"\n >\n <g transform=\"translate(1)\">\n <linearGradient\n id={`a-${id}`}\n x1=\"-641.486\"\n x2=\"-641.486\"\n y1=\"856.648\"\n y2=\"855.931\"\n gradientTransform=\"matrix(633 0 0 -633 406377 542258)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#6bdaff\"></stop>\n <stop offset=\"0.319\" stop-color=\"#f9ffb5\"></stop>\n <stop offset=\"0.706\" stop-color=\"#ffa770\"></stop>\n <stop offset=\"1\" stop-color=\"#ff7373\"></stop>\n </linearGradient>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill={`url(#a-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <defs>\n <filter\n id={`b-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`c-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#b-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#c-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`d-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`e-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#d-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#e-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`f-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`g-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#f-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#g-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`h-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`i-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#h-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#i-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`j-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`k-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#j-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#k-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`l-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`m-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#l-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#m-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`n-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`o-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#n-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#o-${id})`}>\n <path\n fill=\"none\"\n stroke=\"#000\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"11\"\n d=\"M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1\"\n ></path>\n <linearGradient\n id={`p-${id}`}\n x1=\"-645.656\"\n x2=\"-646.499\"\n y1=\"854.878\"\n y2=\"854.788\"\n gradientTransform=\"matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ee2700\"></stop>\n <stop offset=\"1\" stop-color=\"#ff008e\"></stop>\n </linearGradient>\n <path\n fill={`url(#p-${id})`}\n fill-rule=\"evenodd\"\n d=\"M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"#D8D8D8\"\n fill-rule=\"evenodd\"\n stroke=\"#FFF\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"7\"\n d=\"M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9\"\n clip-rule=\"evenodd\"\n ></path>\n </g>\n <defs>\n <filter\n id={`q-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`r-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#q-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#r-${id})`}>\n <linearGradient\n id={`s-${id}`}\n x1=\"-646.8\"\n x2=\"-646.8\"\n y1=\"854.844\"\n y2=\"853.844\"\n gradientTransform=\"matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#a17500\"></stop>\n <stop offset=\"1\" stop-color=\"#5d2100\"></stop>\n </linearGradient>\n <path\n fill={`url(#s-${id})`}\n fill-rule=\"evenodd\"\n d=\"M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`t-${id}`}\n x1=\"-635.467\"\n x2=\"-635.467\"\n y1=\"852.115\"\n y2=\"851.115\"\n gradientTransform=\"matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#t-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`u-${id}`}\n x1=\"-636.573\"\n x2=\"-636.573\"\n y1=\"855.444\"\n y2=\"854.444\"\n gradientTransform=\"matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#u-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`v-${id}`}\n x1=\"-632.145\"\n x2=\"-632.145\"\n y1=\"854.174\"\n y2=\"853.174\"\n gradientTransform=\"matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#v-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`w-${id}`}\n x1=\"-638.224\"\n x2=\"-638.224\"\n y1=\"853.801\"\n y2=\"852.801\"\n gradientTransform=\"matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#w-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`x-${id}`}\n x1=\"-637.723\"\n x2=\"-637.723\"\n y1=\"855.103\"\n y2=\"854.103\"\n gradientTransform=\"matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#x-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`y-${id}`}\n x1=\"-631.79\"\n x2=\"-631.79\"\n y1=\"855.872\"\n y2=\"854.872\"\n gradientTransform=\"matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#y-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32\"\n ></path>\n </g>\n <defs>\n <filter\n id={`z-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`A-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#z-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <linearGradient\n id={`B-${id}`}\n x1=\"-641.104\"\n x2=\"-641.278\"\n y1=\"856.577\"\n y2=\"856.183\"\n gradientTransform=\"matrix(532 0 0 -633 341484.5 542657)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#fff400\"></stop>\n <stop offset=\"1\" stop-color=\"#3c8700\"></stop>\n </linearGradient>\n <ellipse\n cx=\"316.5\"\n cy=\"715.5\"\n fill={`url(#B-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n mask={`url(#A-${id})`}\n rx=\"266\"\n ry=\"316.5\"\n ></ellipse>\n <defs>\n <filter\n id={`C-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`D-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#C-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#D-${id})`}>\n <g transform=\"translate(397 -24)\">\n <linearGradient\n id={`E-${id}`}\n x1=\"-1036.672\"\n x2=\"-1036.672\"\n y1=\"880.018\"\n y2=\"879.018\"\n gradientTransform=\"matrix(227 0 0 -227 235493 199764)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffdf00\"></stop>\n <stop offset=\"1\" stop-color=\"#ff9d00\"></stop>\n </linearGradient>\n <circle\n cx=\"168.5\"\n cy=\"113.5\"\n r=\"113.5\"\n fill={`url(#E-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <linearGradient\n id={`F-${id}`}\n x1=\"-1017.329\"\n x2=\"-1018.602\"\n y1=\"658.003\"\n y2=\"657.998\"\n gradientTransform=\"matrix(30 0 0 -1 30558 771)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#F-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M30 113H0\"\n ></path>\n <linearGradient\n id={`G-${id}`}\n x1=\"-1014.501\"\n x2=\"-1015.774\"\n y1=\"839.985\"\n y2=\"839.935\"\n gradientTransform=\"matrix(26.5 0 0 -5.5 26925 4696.5)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#G-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M33.5 79.5L7 74\"\n ></path>\n <linearGradient\n id={`H-${id}`}\n x1=\"-1016.59\"\n x2=\"-1017.862\"\n y1=\"852.671\"\n y2=\"852.595\"\n gradientTransform=\"matrix(29 0 0 -8 29523 6971)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#H-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M34 146l-29 8\"\n ></path>\n <linearGradient\n id={`I-${id}`}\n x1=\"-1011.984\"\n x2=\"-1013.257\"\n y1=\"863.523\"\n y2=\"863.229\"\n gradientTransform=\"matrix(24 0 0 -13 24339 11407)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#I-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M45 177l-24 13\"\n ></path>\n <linearGradient\n id={`J-${id}`}\n x1=\"-1006.673\"\n x2=\"-1007.946\"\n y1=\"869.279\"\n y2=\"868.376\"\n gradientTransform=\"matrix(20 0 0 -19 20205 16720)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#J-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M67 204l-20 19\"\n ></path>\n <linearGradient\n id={`K-${id}`}\n x1=\"-992.85\"\n x2=\"-993.317\"\n y1=\"871.258\"\n y2=\"870.258\"\n gradientTransform=\"matrix(13.8339 0 0 -22.8467 13825.796 20131.938)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#K-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M94.4 227l-13.8 22.8\"\n ></path>\n <linearGradient\n id={`L-${id}`}\n x1=\"-953.835\"\n x2=\"-953.965\"\n y1=\"871.9\"\n y2=\"870.9\"\n gradientTransform=\"matrix(7.5 0 0 -24.5 7278 21605)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#L-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M127.5 243.5L120 268\"\n ></path>\n <linearGradient\n id={`M-${id}`}\n x1=\"244.504\"\n x2=\"244.496\"\n y1=\"871.898\"\n y2=\"870.898\"\n gradientTransform=\"matrix(.5 0 0 -24.5 45.5 21614)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#M-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M167.5 252.5l.5 24.5\"\n ></path>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n","import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n */\n panelProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: any & {\n ref?: any\n }\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router: Accessor<AnyRouter>\n routerState: Accessor<any>\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n initialIsOpen,\n panelProps = {},\n closeButtonProps = {},\n toggleButtonProps = {},\n position = 'bottom-left',\n containerElement: Container = 'footer',\n router,\n routerState,\n shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n // eslint-disable-next-line prefer-const\n let panelRef: HTMLDivElement | undefined = undefined\n\n const [isOpen, setIsOpen] = useLocalStorage(\n 'tanstackRouterDevtoolsOpen',\n initialIsOpen,\n )\n\n const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n 'tanstackRouterDevtoolsHeight',\n null,\n )\n\n const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n const [isResizing, setIsResizing] = createSignal(false)\n const isMounted = useIsMounted()\n const styles = useStyles()\n\n const handleDragStart = (\n panelElement: HTMLDivElement | undefined,\n startEvent: any,\n ) => {\n if (startEvent.button !== 0) return // Only allow left click for drag\n\n setIsResizing(true)\n\n const dragInfo = {\n originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n pageY: startEvent.pageY,\n }\n\n const run = (moveEvent: MouseEvent) => {\n const delta = dragInfo.pageY - moveEvent.pageY\n const newHeight = dragInfo.originalHeight + delta\n\n setDevtoolsHeight(newHeight)\n\n if (newHeight < 70) {\n setIsOpen(false)\n } else {\n setIsOpen(true)\n }\n }\n\n const unsub = () => {\n setIsResizing(false)\n document.removeEventListener('mousemove', run)\n document.removeEventListener('mouseUp', unsub)\n }\n\n document.addEventListener('mousemove', run)\n document.addEventListener('mouseup', unsub)\n }\n\n const isButtonClosed = isOpen() ?? false\n\n createEffect(() => {\n setIsResolvedOpen(isOpen() ?? false)\n })\n\n createEffect(() => {\n if (isResolvedOpen()) {\n const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n const run = () => {\n const containerHeight = panelRef!.getBoundingClientRect().height\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.style.paddingBottom = `${containerHeight}px`\n }\n return prev\n })\n }\n }\n\n run()\n\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', run)\n\n return () => {\n window.removeEventListener('resize', run)\n if (rootEl()?.parentElement && typeof previousValue === 'string') {\n setRootEl((prev) => {\n prev!.parentElement!.style.paddingBottom = previousValue\n return prev\n })\n }\n }\n }\n } else {\n // Reset padding when devtools are closed\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.removeAttribute('style')\n }\n return prev\n })\n }\n }\n return\n })\n\n createEffect(() => {\n if (rootEl()) {\n const el = rootEl()\n const fontSize = getComputedStyle(el!).fontSize\n el?.style.setProperty('--tsrd-font-size', fontSize)\n }\n })\n\n const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n style?: Record<string, any>\n }\n\n const {\n style: closeButtonStyle = {},\n onClick: onCloseClick,\n ...otherCloseButtonProps\n } = closeButtonProps\n\n const {\n onClick: onToggleClick,\n class: toggleButtonClassName,\n ...otherToggleButtonProps\n } = toggleButtonProps\n\n // Do not render on the server\n if (!isMounted()) return null\n\n const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n const basePanelClass = createMemo(() => {\n return cx(\n styles().devtoolsPanelContainer,\n styles().devtoolsPanelContainerVisibility(!!isOpen()),\n styles().devtoolsPanelContainerResizing(isResizing),\n styles().devtoolsPanelContainerAnimation(\n isResolvedOpen(),\n resolvedHeight() + 16,\n ),\n )\n })\n\n const basePanelStyle = createMemo(() => {\n return {\n height: `${resolvedHeight()}px`,\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n ...(panelStyle || {}),\n }\n })\n\n const buttonStyle = createMemo(() => {\n return cx(\n styles().mainCloseBtn,\n styles().mainCloseBtnPosition(position),\n styles().mainCloseBtnAnimation(!!isOpen()),\n toggleButtonClassName,\n )\n })\n\n return (\n <Dynamic\n component={Container}\n ref={setRootEl}\n class=\"TanStackRouterDevtools\"\n >\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: onCloseClick ?? (() => {}),\n }}\n >\n {/* {router() ? ( */}\n <BaseTanStackRouterDevtoolsPanel\n ref={panelRef}\n {...otherPanelProps}\n router={router}\n routerState={routerState}\n className={basePanelClass}\n style={basePanelStyle}\n isOpen={isResolvedOpen()}\n setIsOpen={setIsOpen}\n handleDragStart={(e) => handleDragStart(panelRef, e)}\n shadowDOMTarget={shadowDOMTarget}\n />\n {/* ) : (\n <p>No router</p>\n )} */}\n </DevtoolsOnCloseContext.Provider>\n\n <button\n type=\"button\"\n {...otherToggleButtonProps}\n aria-label=\"Open TanStack Router Devtools\"\n onClick={(e) => {\n setIsOpen(true)\n onToggleClick && onToggleClick(e)\n }}\n class={buttonStyle()}\n >\n <div class={styles().mainCloseBtnIconContainer}>\n <div class={styles().mainCloseBtnIconOuter}>\n <TanStackLogo />\n </div>\n <div class={styles().mainCloseBtnIconInner}>\n <TanStackLogo />\n </div>\n </div>\n <div class={styles().mainCloseBtnDivider}>-</div>\n <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n </button>\n </Dynamic>\n )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"mappings":"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"} |
@@ -43,3 +43,3 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); | ||
| else { | ||
| Devtools = require_context.lazy(() => Promise.resolve().then(() => require("../FloatingTanStackRouterDevtools-TVrd9NKL.cjs"))); | ||
| Devtools = require_context.lazy(() => Promise.resolve().then(() => require("../FloatingTanStackRouterDevtools-M-UhaKLc.cjs"))); | ||
| this.#Component = Devtools; | ||
@@ -118,3 +118,3 @@ } | ||
| else { | ||
| BaseTanStackRouterDevtoolsPanel = require_context.lazy(() => Promise.resolve().then(() => require("../BaseTanStackRouterDevtoolsPanel-DdB0IT5G.cjs"))); | ||
| BaseTanStackRouterDevtoolsPanel = require_context.lazy(() => Promise.resolve().then(() => require("../BaseTanStackRouterDevtoolsPanel-BlI6Kawa.cjs"))); | ||
| this.#Component = BaseTanStackRouterDevtoolsPanel; | ||
@@ -121,0 +121,0 @@ } |
@@ -42,3 +42,3 @@ import { S as createSignal, n as ShadowDomTargetContext, t as DevtoolsOnCloseContext, u as render, v as createComponent, w as lazy } from "../context-D56_tqst.js"; | ||
| else { | ||
| Devtools = lazy(() => import("../FloatingTanStackRouterDevtools-B12ktJLj.js")); | ||
| Devtools = lazy(() => import("../FloatingTanStackRouterDevtools-U4pxMObm.js")); | ||
| this.#Component = Devtools; | ||
@@ -117,3 +117,3 @@ } | ||
| else { | ||
| BaseTanStackRouterDevtoolsPanel = lazy(() => import("../BaseTanStackRouterDevtoolsPanel-B43j38ty.js")); | ||
| BaseTanStackRouterDevtoolsPanel = lazy(() => import("../BaseTanStackRouterDevtoolsPanel-DwUaC87U.js")); | ||
| this.#Component = BaseTanStackRouterDevtoolsPanel; | ||
@@ -120,0 +120,0 @@ } |
+2
-2
| { | ||
| "name": "@tanstack/router-devtools-core", | ||
| "version": "1.166.9", | ||
| "version": "1.167.0", | ||
| "description": "Modern and scalable routing for Web applications", | ||
@@ -63,3 +63,3 @@ "author": "Tanner Linsley", | ||
| "csstype": "^3.0.10", | ||
| "@tanstack/router-core": "^1.167.2" | ||
| "@tanstack/router-core": "^1.168.0" | ||
| }, | ||
@@ -66,0 +66,0 @@ "peerDependenciesMeta": { |
@@ -105,2 +105,3 @@ import { clsx as cx } from 'clsx' | ||
| routerState, | ||
| pendingMatches, | ||
| router, | ||
@@ -137,2 +138,3 @@ route, | ||
| > | ||
| pendingMatches: Accessor<Array<AnyRouteMatch>> | ||
| router: Accessor<AnyRouter> | ||
@@ -145,4 +147,4 @@ route: AnyRoute | ||
| const styles = useStyles() | ||
| const matches = createMemo( | ||
| () => routerState().pendingMatches || routerState().matches, | ||
| const matches = createMemo(() => | ||
| pendingMatches().length ? pendingMatches() : routerState().matches, | ||
| ) | ||
@@ -237,2 +239,3 @@ const match = createMemo(() => | ||
| routerState={routerState} | ||
| pendingMatches={pendingMatches} | ||
| router={router} | ||
@@ -273,3 +276,3 @@ route={r} | ||
| // useStore(router.__store) | ||
| // useStore(router.stores.__store) | ||
@@ -288,2 +291,45 @@ const [currentTab, setCurrentTab] = useLocalStorage< | ||
| let pendingMatches: Accessor<Array<AnyRouteMatch>> | ||
| let cachedMatches: Accessor<Array<AnyRouteMatch>> | ||
| // subscribable implementation | ||
| if ('subscribe' in router().stores.pendingMatchesSnapshot) { | ||
| const [_pendingMatches, setPendingMatches] = createSignal< | ||
| Array<AnyRouteMatch> | ||
| >([]) | ||
| pendingMatches = _pendingMatches | ||
| const [_cachedMatches, setCachedMatches] = createSignal< | ||
| Array<AnyRouteMatch> | ||
| >([]) | ||
| cachedMatches = _cachedMatches | ||
| type Subscribe = (fn: () => void) => { unsubscribe: () => void } | ||
| createEffect(() => { | ||
| const pendingMatchesStore = router().stores.pendingMatchesSnapshot | ||
| setPendingMatches(pendingMatchesStore.state) | ||
| const subscription = ( | ||
| (pendingMatchesStore as any).subscribe as Subscribe | ||
| )(() => { | ||
| setPendingMatches(pendingMatchesStore.state) | ||
| }) | ||
| onCleanup(() => subscription.unsubscribe()) | ||
| }) | ||
| createEffect(() => { | ||
| const cachedMatchesStore = router().stores.cachedMatchesSnapshot | ||
| setCachedMatches(cachedMatchesStore.state) | ||
| const subscription = ( | ||
| (cachedMatchesStore as any).subscribe as Subscribe | ||
| )(() => { | ||
| setCachedMatches(cachedMatchesStore.state) | ||
| }) | ||
| onCleanup(() => subscription.unsubscribe()) | ||
| }) | ||
| } | ||
| // signal implementation | ||
| else { | ||
| pendingMatches = () => router().stores.pendingMatchesSnapshot.state | ||
| cachedMatches = () => router().stores.cachedMatchesSnapshot.state | ||
| } | ||
| createEffect(() => { | ||
@@ -318,5 +364,5 @@ const matches = routerState().matches | ||
| const matches = [ | ||
| ...(routerState().pendingMatches ?? []), | ||
| ...pendingMatches(), | ||
| ...routerState().matches, | ||
| ...routerState().cachedMatches, | ||
| ...cachedMatches(), | ||
| ] | ||
@@ -358,3 +404,3 @@ return matches.find( | ||
| ![ | ||
| '__store', | ||
| 'stores', | ||
| 'basepath', | ||
@@ -523,2 +569,3 @@ 'injectedHtml', | ||
| routerState={routerState} | ||
| pendingMatches={pendingMatches} | ||
| router={router} | ||
@@ -533,6 +580,6 @@ route={router().routeTree} | ||
| <div> | ||
| {(routerState().pendingMatches?.length | ||
| ? routerState().pendingMatches | ||
| {(pendingMatches().length | ||
| ? pendingMatches() | ||
| : routerState().matches | ||
| )?.map((match: any, _i: any) => { | ||
| ).map((match: any, _i: any) => { | ||
| return ( | ||
@@ -621,3 +668,3 @@ <div | ||
| </div> | ||
| {routerState().cachedMatches.length ? ( | ||
| {cachedMatches().length ? ( | ||
| <div class={styles().cachedMatchesContainer}> | ||
@@ -631,3 +678,3 @@ <div class={styles().detailsHeader}> | ||
| <div> | ||
| {routerState().cachedMatches.map((match: any) => { | ||
| {cachedMatches().map((match: any) => { | ||
| return ( | ||
@@ -694,5 +741,3 @@ <div | ||
| <div class={styles().matchDetailsInfo}> | ||
| {routerState().pendingMatches?.find( | ||
| (d: any) => d.id === activeMatch()?.id, | ||
| ) | ||
| {pendingMatches().find((d) => d.id === activeMatch()?.id) | ||
| ? 'Pending' | ||
@@ -699,0 +744,0 @@ : routerState().matches.find( |
| import { D as untrack, E as onCleanup, O as useContext, S as createSignal, T as mergeProps, _ as Switch, a as addEventListener, b as createMemo, c as insert, d as setAttribute, f as spread, g as Show, h as Match, l as memo, m as For, n as ShadowDomTargetContext, o as className, p as template, r as useDevtoolsOnClose, s as delegateEvents, v as createComponent, x as createRenderEffect, y as createEffect } from "./context-D56_tqst.js"; | ||
| import { clsx } from "clsx"; | ||
| import invariant from "tiny-invariant"; | ||
| import { interpolatePath, rootRouteId, trimPath } from "@tanstack/router-core"; | ||
| import * as goober from "goober"; | ||
| //#region src/tokens.ts | ||
| var tokens = { | ||
| colors: { | ||
| inherit: "inherit", | ||
| current: "currentColor", | ||
| transparent: "transparent", | ||
| black: "#000000", | ||
| white: "#ffffff", | ||
| neutral: { | ||
| 50: "#f9fafb", | ||
| 100: "#f2f4f7", | ||
| 200: "#eaecf0", | ||
| 300: "#d0d5dd", | ||
| 400: "#98a2b3", | ||
| 500: "#667085", | ||
| 600: "#475467", | ||
| 700: "#344054", | ||
| 800: "#1d2939", | ||
| 900: "#101828" | ||
| }, | ||
| darkGray: { | ||
| 50: "#525c7a", | ||
| 100: "#49536e", | ||
| 200: "#414962", | ||
| 300: "#394056", | ||
| 400: "#313749", | ||
| 500: "#292e3d", | ||
| 600: "#212530", | ||
| 700: "#191c24", | ||
| 800: "#111318", | ||
| 900: "#0b0d10" | ||
| }, | ||
| gray: { | ||
| 50: "#f9fafb", | ||
| 100: "#f2f4f7", | ||
| 200: "#eaecf0", | ||
| 300: "#d0d5dd", | ||
| 400: "#98a2b3", | ||
| 500: "#667085", | ||
| 600: "#475467", | ||
| 700: "#344054", | ||
| 800: "#1d2939", | ||
| 900: "#101828" | ||
| }, | ||
| blue: { | ||
| 25: "#F5FAFF", | ||
| 50: "#EFF8FF", | ||
| 100: "#D1E9FF", | ||
| 200: "#B2DDFF", | ||
| 300: "#84CAFF", | ||
| 400: "#53B1FD", | ||
| 500: "#2E90FA", | ||
| 600: "#1570EF", | ||
| 700: "#175CD3", | ||
| 800: "#1849A9", | ||
| 900: "#194185" | ||
| }, | ||
| green: { | ||
| 25: "#F6FEF9", | ||
| 50: "#ECFDF3", | ||
| 100: "#D1FADF", | ||
| 200: "#A6F4C5", | ||
| 300: "#6CE9A6", | ||
| 400: "#32D583", | ||
| 500: "#12B76A", | ||
| 600: "#039855", | ||
| 700: "#027A48", | ||
| 800: "#05603A", | ||
| 900: "#054F31" | ||
| }, | ||
| red: { | ||
| 50: "#fef2f2", | ||
| 100: "#fee2e2", | ||
| 200: "#fecaca", | ||
| 300: "#fca5a5", | ||
| 400: "#f87171", | ||
| 500: "#ef4444", | ||
| 600: "#dc2626", | ||
| 700: "#b91c1c", | ||
| 800: "#991b1b", | ||
| 900: "#7f1d1d", | ||
| 950: "#450a0a" | ||
| }, | ||
| yellow: { | ||
| 25: "#FFFCF5", | ||
| 50: "#FFFAEB", | ||
| 100: "#FEF0C7", | ||
| 200: "#FEDF89", | ||
| 300: "#FEC84B", | ||
| 400: "#FDB022", | ||
| 500: "#F79009", | ||
| 600: "#DC6803", | ||
| 700: "#B54708", | ||
| 800: "#93370D", | ||
| 900: "#7A2E0E" | ||
| }, | ||
| purple: { | ||
| 25: "#FAFAFF", | ||
| 50: "#F4F3FF", | ||
| 100: "#EBE9FE", | ||
| 200: "#D9D6FE", | ||
| 300: "#BDB4FE", | ||
| 400: "#9B8AFB", | ||
| 500: "#7A5AF8", | ||
| 600: "#6938EF", | ||
| 700: "#5925DC", | ||
| 800: "#4A1FB8", | ||
| 900: "#3E1C96" | ||
| }, | ||
| teal: { | ||
| 25: "#F6FEFC", | ||
| 50: "#F0FDF9", | ||
| 100: "#CCFBEF", | ||
| 200: "#99F6E0", | ||
| 300: "#5FE9D0", | ||
| 400: "#2ED3B7", | ||
| 500: "#15B79E", | ||
| 600: "#0E9384", | ||
| 700: "#107569", | ||
| 800: "#125D56", | ||
| 900: "#134E48" | ||
| }, | ||
| pink: { | ||
| 25: "#fdf2f8", | ||
| 50: "#fce7f3", | ||
| 100: "#fbcfe8", | ||
| 200: "#f9a8d4", | ||
| 300: "#f472b6", | ||
| 400: "#ec4899", | ||
| 500: "#db2777", | ||
| 600: "#be185d", | ||
| 700: "#9d174d", | ||
| 800: "#831843", | ||
| 900: "#500724" | ||
| }, | ||
| cyan: { | ||
| 25: "#ecfeff", | ||
| 50: "#cffafe", | ||
| 100: "#a5f3fc", | ||
| 200: "#67e8f9", | ||
| 300: "#22d3ee", | ||
| 400: "#06b6d4", | ||
| 500: "#0891b2", | ||
| 600: "#0e7490", | ||
| 700: "#155e75", | ||
| 800: "#164e63", | ||
| 900: "#083344" | ||
| } | ||
| }, | ||
| alpha: { | ||
| 100: "ff", | ||
| 90: "e5", | ||
| 80: "cc", | ||
| 70: "b3", | ||
| 60: "99", | ||
| 50: "80", | ||
| 40: "66", | ||
| 30: "4d", | ||
| 20: "33", | ||
| 10: "1a", | ||
| 0: "00" | ||
| }, | ||
| font: { | ||
| size: { | ||
| "2xs": "calc(var(--tsrd-font-size) * 0.625)", | ||
| xs: "calc(var(--tsrd-font-size) * 0.75)", | ||
| sm: "calc(var(--tsrd-font-size) * 0.875)", | ||
| md: "var(--tsrd-font-size)", | ||
| lg: "calc(var(--tsrd-font-size) * 1.125)", | ||
| xl: "calc(var(--tsrd-font-size) * 1.25)", | ||
| "2xl": "calc(var(--tsrd-font-size) * 1.5)", | ||
| "3xl": "calc(var(--tsrd-font-size) * 1.875)", | ||
| "4xl": "calc(var(--tsrd-font-size) * 2.25)", | ||
| "5xl": "calc(var(--tsrd-font-size) * 3)", | ||
| "6xl": "calc(var(--tsrd-font-size) * 3.75)", | ||
| "7xl": "calc(var(--tsrd-font-size) * 4.5)", | ||
| "8xl": "calc(var(--tsrd-font-size) * 6)", | ||
| "9xl": "calc(var(--tsrd-font-size) * 8)" | ||
| }, | ||
| lineHeight: { | ||
| "3xs": "calc(var(--tsrd-font-size) * 0.75)", | ||
| "2xs": "calc(var(--tsrd-font-size) * 0.875)", | ||
| xs: "calc(var(--tsrd-font-size) * 1)", | ||
| sm: "calc(var(--tsrd-font-size) * 1.25)", | ||
| md: "calc(var(--tsrd-font-size) * 1.5)", | ||
| lg: "calc(var(--tsrd-font-size) * 1.75)", | ||
| xl: "calc(var(--tsrd-font-size) * 2)", | ||
| "2xl": "calc(var(--tsrd-font-size) * 2.25)", | ||
| "3xl": "calc(var(--tsrd-font-size) * 2.5)", | ||
| "4xl": "calc(var(--tsrd-font-size) * 2.75)", | ||
| "5xl": "calc(var(--tsrd-font-size) * 3)", | ||
| "6xl": "calc(var(--tsrd-font-size) * 3.25)", | ||
| "7xl": "calc(var(--tsrd-font-size) * 3.5)", | ||
| "8xl": "calc(var(--tsrd-font-size) * 3.75)", | ||
| "9xl": "calc(var(--tsrd-font-size) * 4)" | ||
| }, | ||
| weight: { | ||
| thin: "100", | ||
| extralight: "200", | ||
| light: "300", | ||
| normal: "400", | ||
| medium: "500", | ||
| semibold: "600", | ||
| bold: "700", | ||
| extrabold: "800", | ||
| black: "900" | ||
| }, | ||
| fontFamily: { | ||
| sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif", | ||
| mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | ||
| } | ||
| }, | ||
| breakpoints: { | ||
| xs: "320px", | ||
| sm: "640px", | ||
| md: "768px", | ||
| lg: "1024px", | ||
| xl: "1280px", | ||
| "2xl": "1536px" | ||
| }, | ||
| border: { radius: { | ||
| none: "0px", | ||
| xs: "calc(var(--tsrd-font-size) * 0.125)", | ||
| sm: "calc(var(--tsrd-font-size) * 0.25)", | ||
| md: "calc(var(--tsrd-font-size) * 0.375)", | ||
| lg: "calc(var(--tsrd-font-size) * 0.5)", | ||
| xl: "calc(var(--tsrd-font-size) * 0.75)", | ||
| "2xl": "calc(var(--tsrd-font-size) * 1)", | ||
| "3xl": "calc(var(--tsrd-font-size) * 1.5)", | ||
| full: "9999px" | ||
| } }, | ||
| size: { | ||
| 0: "0px", | ||
| .25: "calc(var(--tsrd-font-size) * 0.0625)", | ||
| .5: "calc(var(--tsrd-font-size) * 0.125)", | ||
| 1: "calc(var(--tsrd-font-size) * 0.25)", | ||
| 1.5: "calc(var(--tsrd-font-size) * 0.375)", | ||
| 2: "calc(var(--tsrd-font-size) * 0.5)", | ||
| 2.5: "calc(var(--tsrd-font-size) * 0.625)", | ||
| 3: "calc(var(--tsrd-font-size) * 0.75)", | ||
| 3.5: "calc(var(--tsrd-font-size) * 0.875)", | ||
| 4: "calc(var(--tsrd-font-size) * 1)", | ||
| 4.5: "calc(var(--tsrd-font-size) * 1.125)", | ||
| 5: "calc(var(--tsrd-font-size) * 1.25)", | ||
| 5.5: "calc(var(--tsrd-font-size) * 1.375)", | ||
| 6: "calc(var(--tsrd-font-size) * 1.5)", | ||
| 6.5: "calc(var(--tsrd-font-size) * 1.625)", | ||
| 7: "calc(var(--tsrd-font-size) * 1.75)", | ||
| 8: "calc(var(--tsrd-font-size) * 2)", | ||
| 9: "calc(var(--tsrd-font-size) * 2.25)", | ||
| 10: "calc(var(--tsrd-font-size) * 2.5)", | ||
| 11: "calc(var(--tsrd-font-size) * 2.75)", | ||
| 12: "calc(var(--tsrd-font-size) * 3)", | ||
| 14: "calc(var(--tsrd-font-size) * 3.5)", | ||
| 16: "calc(var(--tsrd-font-size) * 4)", | ||
| 20: "calc(var(--tsrd-font-size) * 5)", | ||
| 24: "calc(var(--tsrd-font-size) * 6)", | ||
| 28: "calc(var(--tsrd-font-size) * 7)", | ||
| 32: "calc(var(--tsrd-font-size) * 8)", | ||
| 36: "calc(var(--tsrd-font-size) * 9)", | ||
| 40: "calc(var(--tsrd-font-size) * 10)", | ||
| 44: "calc(var(--tsrd-font-size) * 11)", | ||
| 48: "calc(var(--tsrd-font-size) * 12)", | ||
| 52: "calc(var(--tsrd-font-size) * 13)", | ||
| 56: "calc(var(--tsrd-font-size) * 14)", | ||
| 60: "calc(var(--tsrd-font-size) * 15)", | ||
| 64: "calc(var(--tsrd-font-size) * 16)", | ||
| 72: "calc(var(--tsrd-font-size) * 18)", | ||
| 80: "calc(var(--tsrd-font-size) * 20)", | ||
| 96: "calc(var(--tsrd-font-size) * 24)" | ||
| }, | ||
| shadow: { | ||
| xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`, | ||
| sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`, | ||
| md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`, | ||
| lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`, | ||
| xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`, | ||
| "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`, | ||
| inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`, | ||
| none: () => `none` | ||
| }, | ||
| zIndices: { | ||
| hide: -1, | ||
| auto: "auto", | ||
| base: 0, | ||
| docked: 10, | ||
| dropdown: 1e3, | ||
| sticky: 1100, | ||
| banner: 1200, | ||
| overlay: 1300, | ||
| modal: 1400, | ||
| popover: 1500, | ||
| skipLink: 1600, | ||
| toast: 1700, | ||
| tooltip: 1800 | ||
| } | ||
| }; | ||
| //#endregion | ||
| //#region src/useStyles.tsx | ||
| var stylesFactory$1 = (shadowDOMTarget) => { | ||
| const { colors, font, size, alpha, shadow, border } = tokens; | ||
| const { fontFamily, lineHeight, size: fontSize } = font; | ||
| const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css; | ||
| return { | ||
| devtoolsPanelContainer: css` | ||
| direction: ltr; | ||
| position: fixed; | ||
| bottom: 0; | ||
| right: 0; | ||
| z-index: 99999; | ||
| width: 100%; | ||
| max-height: 90%; | ||
| border-top: 1px solid ${colors.gray[700]}; | ||
| transform-origin: top; | ||
| `, | ||
| devtoolsPanelContainerVisibility: (isOpen) => { | ||
| return css` | ||
| visibility: ${isOpen ? "visible" : "hidden"}; | ||
| `; | ||
| }, | ||
| devtoolsPanelContainerResizing: (isResizing) => { | ||
| if (isResizing()) return css` | ||
| transition: none; | ||
| `; | ||
| return css` | ||
| transition: all 0.4s ease; | ||
| `; | ||
| }, | ||
| devtoolsPanelContainerAnimation: (isOpen, height) => { | ||
| if (isOpen) return css` | ||
| pointer-events: auto; | ||
| transform: translateY(0); | ||
| `; | ||
| return css` | ||
| pointer-events: none; | ||
| transform: translateY(${height}px); | ||
| `; | ||
| }, | ||
| logo: css` | ||
| cursor: pointer; | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: transparent; | ||
| border: none; | ||
| font-family: ${fontFamily.sans}; | ||
| gap: ${tokens.size[.5]}; | ||
| padding: 0px; | ||
| &:hover { | ||
| opacity: 0.7; | ||
| } | ||
| &:focus-visible { | ||
| outline-offset: 4px; | ||
| border-radius: ${border.radius.xs}; | ||
| outline: 2px solid ${colors.blue[800]}; | ||
| } | ||
| `, | ||
| tanstackLogo: css` | ||
| font-size: ${font.size.md}; | ||
| font-weight: ${font.weight.bold}; | ||
| line-height: ${font.lineHeight.xs}; | ||
| white-space: nowrap; | ||
| color: ${colors.gray[300]}; | ||
| `, | ||
| routerLogo: css` | ||
| font-weight: ${font.weight.semibold}; | ||
| font-size: ${font.size.xs}; | ||
| background: linear-gradient(to right, #84cc16, #10b981); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| line-height: 1; | ||
| -webkit-text-fill-color: transparent; | ||
| white-space: nowrap; | ||
| `, | ||
| devtoolsPanel: css` | ||
| display: flex; | ||
| font-size: ${fontSize.sm}; | ||
| font-family: ${fontFamily.sans}; | ||
| background-color: ${colors.darkGray[700]}; | ||
| color: ${colors.gray[300]}; | ||
| @media (max-width: 700px) { | ||
| flex-direction: column; | ||
| } | ||
| @media (max-width: 600px) { | ||
| font-size: ${fontSize.xs}; | ||
| } | ||
| `, | ||
| dragHandle: css` | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 4px; | ||
| cursor: row-resize; | ||
| z-index: 100000; | ||
| &:hover { | ||
| background-color: ${colors.purple[400]}${alpha[90]}; | ||
| } | ||
| `, | ||
| firstContainer: css` | ||
| flex: 1 1 500px; | ||
| min-height: 40%; | ||
| max-height: 100%; | ||
| overflow: auto; | ||
| border-right: 1px solid ${colors.gray[700]}; | ||
| display: flex; | ||
| flex-direction: column; | ||
| `, | ||
| routerExplorerContainer: css` | ||
| overflow-y: auto; | ||
| flex: 1; | ||
| `, | ||
| routerExplorer: css` | ||
| padding: ${tokens.size[2]}; | ||
| `, | ||
| row: css` | ||
| display: flex; | ||
| align-items: center; | ||
| padding: ${tokens.size[2]} ${tokens.size[2.5]}; | ||
| gap: ${tokens.size[2.5]}; | ||
| border-bottom: ${colors.darkGray[500]} 1px solid; | ||
| align-items: center; | ||
| `, | ||
| detailsHeader: css` | ||
| font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif; | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 2; | ||
| background-color: ${colors.darkGray[600]}; | ||
| padding: 0px ${tokens.size[2]}; | ||
| font-weight: ${font.weight.medium}; | ||
| font-size: ${font.size.xs}; | ||
| min-height: ${tokens.size[8]}; | ||
| line-height: ${font.lineHeight.xs}; | ||
| text-align: left; | ||
| display: flex; | ||
| align-items: center; | ||
| `, | ||
| maskedBadge: css` | ||
| background: ${colors.yellow[900]}${alpha[70]}; | ||
| color: ${colors.yellow[300]}; | ||
| display: inline-block; | ||
| padding: ${tokens.size[0]} ${tokens.size[2.5]}; | ||
| border-radius: ${border.radius.full}; | ||
| font-size: ${font.size.xs}; | ||
| font-weight: ${font.weight.normal}; | ||
| border: 1px solid ${colors.yellow[300]}; | ||
| `, | ||
| maskedLocation: css` | ||
| color: ${colors.yellow[300]}; | ||
| `, | ||
| detailsContent: css` | ||
| padding: ${tokens.size[1.5]} ${tokens.size[2]}; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| font-size: ${font.size.xs}; | ||
| `, | ||
| routeMatchesToggle: css` | ||
| display: flex; | ||
| align-items: center; | ||
| border: 1px solid ${colors.gray[500]}; | ||
| border-radius: ${border.radius.sm}; | ||
| overflow: hidden; | ||
| `, | ||
| routeMatchesToggleBtn: (active, showBorder) => { | ||
| const classes = [css` | ||
| appearance: none; | ||
| border: none; | ||
| font-size: 12px; | ||
| padding: 4px 8px; | ||
| background: transparent; | ||
| cursor: pointer; | ||
| font-family: ${fontFamily.sans}; | ||
| font-weight: ${font.weight.medium}; | ||
| `]; | ||
| if (active) { | ||
| const activeStyles = css` | ||
| background: ${colors.darkGray[400]}; | ||
| color: ${colors.gray[300]}; | ||
| `; | ||
| classes.push(activeStyles); | ||
| } else { | ||
| const inactiveStyles = css` | ||
| color: ${colors.gray[500]}; | ||
| background: ${colors.darkGray[800]}${alpha[20]}; | ||
| `; | ||
| classes.push(inactiveStyles); | ||
| } | ||
| if (showBorder) classes.push(css` | ||
| border-right: 1px solid ${tokens.colors.gray[500]}; | ||
| `); | ||
| return classes; | ||
| }, | ||
| detailsHeaderInfo: css` | ||
| flex: 1; | ||
| justify-content: flex-end; | ||
| display: flex; | ||
| align-items: center; | ||
| font-weight: ${font.weight.normal}; | ||
| color: ${colors.gray[400]}; | ||
| `, | ||
| matchRow: (active) => { | ||
| const classes = [css` | ||
| display: flex; | ||
| border-bottom: 1px solid ${colors.darkGray[400]}; | ||
| cursor: pointer; | ||
| align-items: center; | ||
| padding: ${size[1]} ${size[2]}; | ||
| gap: ${size[2]}; | ||
| font-size: ${fontSize.xs}; | ||
| color: ${colors.gray[300]}; | ||
| `]; | ||
| if (active) { | ||
| const activeStyles = css` | ||
| background: ${colors.darkGray[500]}; | ||
| `; | ||
| classes.push(activeStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| matchIndicator: (color) => { | ||
| const classes = [css` | ||
| flex: 0 0 auto; | ||
| width: ${size[3]}; | ||
| height: ${size[3]}; | ||
| background: ${colors[color][900]}; | ||
| border: 1px solid ${colors[color][500]}; | ||
| border-radius: ${border.radius.full}; | ||
| transition: all 0.25s ease-out; | ||
| box-sizing: border-box; | ||
| `]; | ||
| if (color === "gray") { | ||
| const grayStyles = css` | ||
| background: ${colors.gray[700]}; | ||
| border-color: ${colors.gray[400]}; | ||
| `; | ||
| classes.push(grayStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| matchID: css` | ||
| flex: 1; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `, | ||
| ageTicker: (showWarning) => { | ||
| const classes = [css` | ||
| display: flex; | ||
| gap: ${size[1]}; | ||
| font-size: ${fontSize.xs}; | ||
| color: ${colors.gray[400]}; | ||
| font-variant-numeric: tabular-nums; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `]; | ||
| if (showWarning) { | ||
| const warningStyles = css` | ||
| color: ${colors.yellow[400]}; | ||
| `; | ||
| classes.push(warningStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| secondContainer: css` | ||
| flex: 1 1 500px; | ||
| min-height: 40%; | ||
| max-height: 100%; | ||
| overflow: auto; | ||
| border-right: 1px solid ${colors.gray[700]}; | ||
| display: flex; | ||
| flex-direction: column; | ||
| `, | ||
| thirdContainer: css` | ||
| flex: 1 1 500px; | ||
| overflow: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| border-right: 1px solid ${colors.gray[700]}; | ||
| @media (max-width: 700px) { | ||
| border-top: 2px solid ${colors.gray[700]}; | ||
| } | ||
| `, | ||
| fourthContainer: css` | ||
| flex: 1 1 500px; | ||
| min-height: 40%; | ||
| max-height: 100%; | ||
| overflow: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| `, | ||
| routesContainer: css` | ||
| overflow-x: auto; | ||
| overflow-y: visible; | ||
| `, | ||
| routesRowContainer: (active, isMatch) => { | ||
| const classes = [css` | ||
| display: flex; | ||
| border-bottom: 1px solid ${colors.darkGray[400]}; | ||
| align-items: center; | ||
| padding: ${size[1]} ${size[2]}; | ||
| gap: ${size[2]}; | ||
| font-size: ${fontSize.xs}; | ||
| color: ${colors.gray[300]}; | ||
| cursor: ${isMatch ? "pointer" : "default"}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `]; | ||
| if (active) { | ||
| const activeStyles = css` | ||
| background: ${colors.darkGray[500]}; | ||
| `; | ||
| classes.push(activeStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| routesRow: (isMatch) => { | ||
| const classes = [css` | ||
| flex: 1 0 auto; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `]; | ||
| if (!isMatch) { | ||
| const matchStyles = css` | ||
| color: ${colors.gray[400]}; | ||
| `; | ||
| classes.push(matchStyles); | ||
| } | ||
| return classes; | ||
| }, | ||
| routesRowInner: css` | ||
| display: 'flex'; | ||
| align-items: 'center'; | ||
| flex-grow: 1; | ||
| min-width: 0; | ||
| `, | ||
| routeParamInfo: css` | ||
| color: ${colors.gray[400]}; | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| `, | ||
| nestedRouteRow: (isRoot) => { | ||
| return css` | ||
| margin-left: ${isRoot ? 0 : size[3.5]}; | ||
| border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`}; | ||
| `; | ||
| }, | ||
| code: css` | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight["xs"]}; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| `, | ||
| matchesContainer: css` | ||
| flex: 1 1 auto; | ||
| overflow-y: auto; | ||
| `, | ||
| cachedMatchesContainer: css` | ||
| flex: 1 1 auto; | ||
| overflow-y: auto; | ||
| max-height: 50%; | ||
| `, | ||
| historyContainer: css` | ||
| display: flex; | ||
| flex: 1 1 auto; | ||
| overflow-y: auto; | ||
| max-height: 50%; | ||
| `, | ||
| historyOverflowContainer: css` | ||
| padding: ${size[1]} ${size[2]}; | ||
| font-size: ${tokens.font.size.xs}; | ||
| `, | ||
| maskedBadgeContainer: css` | ||
| flex: 1; | ||
| justify-content: flex-end; | ||
| display: flex; | ||
| `, | ||
| matchDetails: css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: ${tokens.size[2]}; | ||
| font-size: ${tokens.font.size.xs}; | ||
| color: ${tokens.colors.gray[300]}; | ||
| line-height: ${tokens.font.lineHeight.sm}; | ||
| `, | ||
| matchStatus: (status, isFetching) => { | ||
| const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : { | ||
| pending: "yellow", | ||
| success: "green", | ||
| error: "red", | ||
| notFound: "purple", | ||
| redirected: "gray" | ||
| }[status]; | ||
| return css` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 40px; | ||
| border-radius: ${tokens.border.radius.sm}; | ||
| font-weight: ${tokens.font.weight.normal}; | ||
| background-color: ${tokens.colors[color][900]}${tokens.alpha[90]}; | ||
| color: ${tokens.colors[color][300]}; | ||
| border: 1px solid ${tokens.colors[color][600]}; | ||
| margin-bottom: ${tokens.size[2]}; | ||
| transition: all 0.25s ease-out; | ||
| `; | ||
| }, | ||
| matchDetailsInfo: css` | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| flex: 1; | ||
| `, | ||
| matchDetailsInfoLabel: css` | ||
| display: flex; | ||
| `, | ||
| mainCloseBtn: css` | ||
| background: ${colors.darkGray[700]}; | ||
| padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]}; | ||
| border-radius: ${border.radius.md}; | ||
| position: fixed; | ||
| z-index: 99999; | ||
| display: inline-flex; | ||
| width: fit-content; | ||
| cursor: pointer; | ||
| appearance: none; | ||
| border: 0; | ||
| gap: 8px; | ||
| align-items: center; | ||
| border: 1px solid ${colors.gray[500]}; | ||
| font-size: ${font.size.xs}; | ||
| cursor: pointer; | ||
| transition: all 0.25s ease-out; | ||
| &:hover { | ||
| background: ${colors.darkGray[500]}; | ||
| } | ||
| `, | ||
| mainCloseBtnPosition: (position) => { | ||
| return css` | ||
| ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""} | ||
| ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""} | ||
| ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""} | ||
| ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""} | ||
| `; | ||
| }, | ||
| mainCloseBtnAnimation: (isOpen) => { | ||
| if (!isOpen) return css` | ||
| opacity: 1; | ||
| pointer-events: auto; | ||
| visibility: visible; | ||
| `; | ||
| return css` | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| visibility: hidden; | ||
| `; | ||
| }, | ||
| routerLogoCloseButton: css` | ||
| font-weight: ${font.weight.semibold}; | ||
| font-size: ${font.size.xs}; | ||
| background: linear-gradient(to right, #98f30c, #00f4a3); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| line-height: 1; | ||
| -webkit-text-fill-color: transparent; | ||
| white-space: nowrap; | ||
| `, | ||
| mainCloseBtnDivider: css` | ||
| width: 1px; | ||
| background: ${tokens.colors.gray[600]}; | ||
| height: 100%; | ||
| border-radius: 999999px; | ||
| color: transparent; | ||
| `, | ||
| mainCloseBtnIconContainer: css` | ||
| position: relative; | ||
| width: ${size[5]}; | ||
| height: ${size[5]}; | ||
| background: pink; | ||
| border-radius: 999999px; | ||
| overflow: hidden; | ||
| `, | ||
| mainCloseBtnIconOuter: css` | ||
| width: ${size[5]}; | ||
| height: ${size[5]}; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| filter: blur(3px) saturate(1.8) contrast(2); | ||
| `, | ||
| mainCloseBtnIconInner: css` | ||
| width: ${size[4]}; | ||
| height: ${size[4]}; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| `, | ||
| panelCloseBtn: css` | ||
| position: absolute; | ||
| cursor: pointer; | ||
| z-index: 100001; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| outline: none; | ||
| background-color: ${colors.darkGray[700]}; | ||
| &:hover { | ||
| background-color: ${colors.darkGray[500]}; | ||
| } | ||
| top: 0; | ||
| right: ${size[2]}; | ||
| transform: translate(0, -100%); | ||
| border-right: ${colors.darkGray[300]} 1px solid; | ||
| border-left: ${colors.darkGray[300]} 1px solid; | ||
| border-top: ${colors.darkGray[300]} 1px solid; | ||
| border-bottom: none; | ||
| border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px; | ||
| padding: ${size[1]} ${size[1.5]} ${size[.5]} ${size[1.5]}; | ||
| &::after { | ||
| content: ' '; | ||
| position: absolute; | ||
| top: 100%; | ||
| left: -${size[2.5]}; | ||
| height: ${size[1.5]}; | ||
| width: calc(100% + ${size[5]}); | ||
| } | ||
| `, | ||
| panelCloseBtnIcon: css` | ||
| color: ${colors.gray[400]}; | ||
| width: ${size[2]}; | ||
| height: ${size[2]}; | ||
| `, | ||
| navigateButton: css` | ||
| background: none; | ||
| border: none; | ||
| padding: 0 0 0 4px; | ||
| margin: 0; | ||
| color: ${colors.gray[400]}; | ||
| font-size: ${fontSize.md}; | ||
| cursor: pointer; | ||
| line-height: 1; | ||
| vertical-align: middle; | ||
| margin-right: 0.5ch; | ||
| flex-shrink: 0; | ||
| &:hover { | ||
| color: ${colors.blue[300]}; | ||
| } | ||
| ` | ||
| }; | ||
| }; | ||
| function useStyles$1() { | ||
| const [_styles] = createSignal(stylesFactory$1(useContext(ShadowDomTargetContext))); | ||
| return _styles; | ||
| } | ||
| //#endregion | ||
| //#region src/useLocalStorage.ts | ||
| var getItem = (key) => { | ||
| try { | ||
| const itemValue = localStorage.getItem(key); | ||
| if (typeof itemValue === "string") return JSON.parse(itemValue); | ||
| return; | ||
| } catch { | ||
| return; | ||
| } | ||
| }; | ||
| function useLocalStorage(key, defaultValue) { | ||
| const [value, setValue] = createSignal(); | ||
| createEffect(() => { | ||
| const initialValue = getItem(key); | ||
| if (typeof initialValue === "undefined" || initialValue === null) setValue(typeof defaultValue === "function" ? defaultValue() : defaultValue); | ||
| else setValue(initialValue); | ||
| }); | ||
| const setter = (updater) => { | ||
| setValue((old) => { | ||
| let newVal = updater; | ||
| if (typeof updater == "function") newVal = updater(old); | ||
| try { | ||
| localStorage.setItem(key, JSON.stringify(newVal)); | ||
| } catch {} | ||
| return newVal; | ||
| }); | ||
| }; | ||
| return [value, setter]; | ||
| } | ||
| //#endregion | ||
| //#region src/utils.tsx | ||
| var isServer = typeof window === "undefined"; | ||
| function getStatusColor(match) { | ||
| return match.isFetching && match.status === "success" ? match.isFetching === "beforeLoad" ? "purple" : "blue" : { | ||
| pending: "yellow", | ||
| success: "green", | ||
| error: "red", | ||
| notFound: "purple", | ||
| redirected: "gray" | ||
| }[match.status]; | ||
| } | ||
| function getRouteStatusColor(matches, route) { | ||
| const found = matches.find((d) => d.routeId === route.id); | ||
| if (!found) return "gray"; | ||
| return getStatusColor(found); | ||
| } | ||
| function useIsMounted() { | ||
| const [isMounted, setIsMounted] = createSignal(false); | ||
| (isServer ? createEffect : createRenderEffect)(() => { | ||
| setIsMounted(true); | ||
| }); | ||
| return isMounted; | ||
| } | ||
| /** | ||
| * Displays a string regardless the type of the data | ||
| * @param {unknown} value Value to be stringified | ||
| */ | ||
| var displayValue = (value) => { | ||
| const name = Object.getOwnPropertyNames(Object(value)); | ||
| const newValue = typeof value === "bigint" ? `${value.toString()}n` : value; | ||
| try { | ||
| return JSON.stringify(newValue, name); | ||
| } catch (e) { | ||
| return `unable to stringify`; | ||
| } | ||
| }; | ||
| function multiSortBy(arr, accessors = [(d) => d]) { | ||
| return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => { | ||
| for (const accessor of accessors) { | ||
| const ao = accessor(a); | ||
| const bo = accessor(b); | ||
| if (typeof ao === "undefined") { | ||
| if (typeof bo === "undefined") continue; | ||
| return 1; | ||
| } | ||
| if (ao === bo) continue; | ||
| return ao > bo ? 1 : -1; | ||
| } | ||
| return ai - bi; | ||
| }).map(([d]) => d); | ||
| } | ||
| //#endregion | ||
| //#region src/Explorer.tsx | ||
| var _tmpl$$3 = /* @__PURE__ */ template(`<span><svg xmlns=http://www.w3.org/2000/svg width=12 height=12 fill=none viewBox="0 0 24 24"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 18l6-6-6-6">`), _tmpl$2$1 = /* @__PURE__ */ template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ template(`<button><span> `), _tmpl$4$1 = /* @__PURE__ */ template(`<div><div><button> [<!> ... <!>]`), _tmpl$5$1 = /* @__PURE__ */ template(`<button><span></span> 🔄 `), _tmpl$6$1 = /* @__PURE__ */ template(`<span>:`), _tmpl$7$1 = /* @__PURE__ */ template(`<span>`); | ||
| var Expander = ({ expanded, style = {} }) => { | ||
| const styles = useStyles(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild; | ||
| createRenderEffect((_p$) => { | ||
| var _v$ = styles().expander, _v$2 = clsx(styles().expanderIcon(expanded)); | ||
| _v$ !== _p$.e && className(_el$, _p$.e = _v$); | ||
| _v$2 !== _p$.t && setAttribute(_el$2, "class", _p$.t = _v$2); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| /** | ||
| * Chunk elements in the array by size | ||
| * | ||
| * when the array cannot be chunked evenly by size, the last chunk will be | ||
| * filled with the remaining elements | ||
| * | ||
| * @example | ||
| * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']] | ||
| */ | ||
| function chunkArray(array, size) { | ||
| if (size < 1) return []; | ||
| let i = 0; | ||
| const result = []; | ||
| while (i < array.length) { | ||
| result.push(array.slice(i, i + size)); | ||
| i = i + size; | ||
| } | ||
| return result; | ||
| } | ||
| function isIterable(x) { | ||
| return Symbol.iterator in x; | ||
| } | ||
| function Explorer({ value, defaultExpanded, pageSize = 100, filterSubEntries, ...rest }) { | ||
| const [expanded, setExpanded] = createSignal(Boolean(defaultExpanded)); | ||
| const toggleExpanded = () => setExpanded((old) => !old); | ||
| const type = createMemo(() => typeof value()); | ||
| const subEntries = createMemo(() => { | ||
| let entries = []; | ||
| const makeProperty = (sub) => { | ||
| const subDefaultExpanded = defaultExpanded === true ? { [sub.label]: true } : defaultExpanded?.[sub.label]; | ||
| return { | ||
| ...sub, | ||
| value: () => sub.value, | ||
| defaultExpanded: subDefaultExpanded | ||
| }; | ||
| }; | ||
| if (Array.isArray(value())) entries = value().map((d, i) => makeProperty({ | ||
| label: i.toString(), | ||
| value: d | ||
| })); | ||
| else if (value() !== null && typeof value() === "object" && isIterable(value()) && typeof value()[Symbol.iterator] === "function") entries = Array.from(value(), (val, i) => makeProperty({ | ||
| label: i.toString(), | ||
| value: val | ||
| })); | ||
| else if (typeof value() === "object" && value() !== null) entries = Object.entries(value()).map(([key, val]) => makeProperty({ | ||
| label: key, | ||
| value: val | ||
| })); | ||
| return filterSubEntries ? filterSubEntries(entries) : entries; | ||
| }); | ||
| const subEntryPages = createMemo(() => chunkArray(subEntries(), pageSize)); | ||
| const [expandedPages, setExpandedPages] = createSignal([]); | ||
| const [valueSnapshot, setValueSnapshot] = createSignal(void 0); | ||
| const styles = useStyles(); | ||
| const refreshValueSnapshot = () => { | ||
| setValueSnapshot(value()()); | ||
| }; | ||
| const handleEntry = (entry) => createComponent(Explorer, mergeProps({ | ||
| value, | ||
| filterSubEntries | ||
| }, rest, entry)); | ||
| return (() => { | ||
| var _el$3 = _tmpl$2$1(); | ||
| insert(_el$3, (() => { | ||
| var _c$ = memo(() => !!subEntryPages().length); | ||
| return () => _c$() ? [(() => { | ||
| var _el$4 = _tmpl$3$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild; | ||
| _el$4.$$click = () => toggleExpanded(); | ||
| insert(_el$4, createComponent(Expander, { get expanded() { | ||
| return expanded() ?? false; | ||
| } }), _el$5); | ||
| insert(_el$4, () => rest.label, _el$5); | ||
| insert(_el$5, () => String(type).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$6); | ||
| insert(_el$5, () => subEntries().length, _el$6); | ||
| insert(_el$5, () => subEntries().length > 1 ? `items` : `item`, null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$3 = styles().expandButton, _v$4 = styles().info; | ||
| _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3); | ||
| _v$4 !== _p$.t && className(_el$5, _p$.t = _v$4); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$4; | ||
| })(), memo(() => memo(() => !!(expanded() ?? false))() ? memo(() => subEntryPages().length === 1)() ? (() => { | ||
| var _el$7 = _tmpl$2$1(); | ||
| insert(_el$7, () => subEntries().map((entry, index) => handleEntry(entry))); | ||
| createRenderEffect(() => className(_el$7, styles().subEntries)); | ||
| return _el$7; | ||
| })() : (() => { | ||
| var _el$8 = _tmpl$2$1(); | ||
| insert(_el$8, () => subEntryPages().map((entries, index) => { | ||
| return (() => { | ||
| var _el$9 = _tmpl$4$1(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$15 = _el$10.nextSibling, _el$16 = _el$15.nextSibling.nextSibling; | ||
| _el$16.nextSibling; | ||
| _el$1.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]); | ||
| insert(_el$1, createComponent(Expander, { get expanded() { | ||
| return expandedPages().includes(index); | ||
| } }), _el$10); | ||
| insert(_el$1, index * pageSize, _el$15); | ||
| insert(_el$1, index * pageSize + pageSize - 1, _el$16); | ||
| insert(_el$0, (() => { | ||
| var _c$2 = memo(() => !!expandedPages().includes(index)); | ||
| return () => _c$2() ? (() => { | ||
| var _el$17 = _tmpl$2$1(); | ||
| insert(_el$17, () => entries.map((entry) => handleEntry(entry))); | ||
| createRenderEffect(() => className(_el$17, styles().subEntries)); | ||
| return _el$17; | ||
| })() : null; | ||
| })(), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$5 = styles().entry, _v$6 = clsx(styles().labelButton, "labelButton"); | ||
| _v$5 !== _p$.e && className(_el$0, _p$.e = _v$5); | ||
| _v$6 !== _p$.t && className(_el$1, _p$.t = _v$6); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$9; | ||
| })(); | ||
| })); | ||
| createRenderEffect(() => className(_el$8, styles().subEntries)); | ||
| return _el$8; | ||
| })() : null)] : memo(() => type() === "function")() ? createComponent(Explorer, { | ||
| get label() { | ||
| return (() => { | ||
| var _el$18 = _tmpl$5$1(), _el$19 = _el$18.firstChild; | ||
| _el$18.$$click = refreshValueSnapshot; | ||
| insert(_el$19, () => rest.label); | ||
| createRenderEffect(() => className(_el$18, styles().refreshValueBtn)); | ||
| return _el$18; | ||
| })(); | ||
| }, | ||
| value: valueSnapshot, | ||
| defaultExpanded: {} | ||
| }) : [ | ||
| (() => { | ||
| var _el$20 = _tmpl$6$1(), _el$21 = _el$20.firstChild; | ||
| insert(_el$20, () => rest.label, _el$21); | ||
| return _el$20; | ||
| })(), | ||
| " ", | ||
| (() => { | ||
| var _el$22 = _tmpl$7$1(); | ||
| insert(_el$22, () => displayValue(value())); | ||
| createRenderEffect(() => className(_el$22, styles().value)); | ||
| return _el$22; | ||
| })() | ||
| ]; | ||
| })()); | ||
| createRenderEffect(() => className(_el$3, styles().entry)); | ||
| return _el$3; | ||
| })(); | ||
| } | ||
| var stylesFactory = (shadowDOMTarget) => { | ||
| const { colors, font, size, alpha, shadow, border } = tokens; | ||
| const { fontFamily, lineHeight, size: fontSize } = font; | ||
| const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css; | ||
| return { | ||
| entry: css` | ||
| font-family: ${fontFamily.mono}; | ||
| font-size: ${fontSize.xs}; | ||
| line-height: ${lineHeight.sm}; | ||
| outline: none; | ||
| word-break: break-word; | ||
| `, | ||
| labelButton: css` | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| outline: inherit; | ||
| background: transparent; | ||
| border: none; | ||
| padding: 0; | ||
| `, | ||
| expander: css` | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: ${size[3]}; | ||
| height: ${size[3]}; | ||
| padding-left: 3px; | ||
| box-sizing: content-box; | ||
| `, | ||
| expanderIcon: (expanded) => { | ||
| if (expanded) return css` | ||
| transform: rotate(90deg); | ||
| transition: transform 0.1s ease; | ||
| `; | ||
| return css` | ||
| transform: rotate(0deg); | ||
| transition: transform 0.1s ease; | ||
| `; | ||
| }, | ||
| expandButton: css` | ||
| display: flex; | ||
| gap: ${size[1]}; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| outline: inherit; | ||
| background: transparent; | ||
| border: none; | ||
| padding: 0; | ||
| `, | ||
| value: css` | ||
| color: ${colors.purple[400]}; | ||
| `, | ||
| subEntries: css` | ||
| margin-left: ${size[2]}; | ||
| padding-left: ${size[2]}; | ||
| border-left: 2px solid ${colors.darkGray[400]}; | ||
| `, | ||
| info: css` | ||
| color: ${colors.gray[500]}; | ||
| font-size: ${fontSize["2xs"]}; | ||
| padding-left: ${size[1]}; | ||
| `, | ||
| refreshValueBtn: css` | ||
| appearance: none; | ||
| border: 0; | ||
| cursor: pointer; | ||
| background: transparent; | ||
| color: inherit; | ||
| padding: 0; | ||
| font-family: ${fontFamily.mono}; | ||
| font-size: ${fontSize.xs}; | ||
| ` | ||
| }; | ||
| }; | ||
| function useStyles() { | ||
| const [_styles] = createSignal(stylesFactory(useContext(ShadowDomTargetContext))); | ||
| return _styles; | ||
| } | ||
| delegateEvents(["click"]); | ||
| //#endregion | ||
| //#region src/AgeTicker.tsx | ||
| var _tmpl$$2 = /* @__PURE__ */ template(`<div><div></div><div>/</div><div></div><div>/</div><div>`); | ||
| function formatTime(ms) { | ||
| const units = [ | ||
| "s", | ||
| "min", | ||
| "h", | ||
| "d" | ||
| ]; | ||
| const values = [ | ||
| ms / 1e3, | ||
| ms / 6e4, | ||
| ms / 36e5, | ||
| ms / 864e5 | ||
| ]; | ||
| let chosenUnitIndex = 0; | ||
| for (let i = 1; i < values.length; i++) { | ||
| if (values[i] < 1) break; | ||
| chosenUnitIndex = i; | ||
| } | ||
| return new Intl.NumberFormat(navigator.language, { | ||
| compactDisplay: "short", | ||
| notation: "compact", | ||
| maximumFractionDigits: 0 | ||
| }).format(values[chosenUnitIndex]) + units[chosenUnitIndex]; | ||
| } | ||
| function AgeTicker({ match, router }) { | ||
| const styles = useStyles$1(); | ||
| if (!match) return null; | ||
| const route = router().looseRoutesById[match.routeId]; | ||
| if (!route.options.loader) return null; | ||
| const age = Date.now() - match.updatedAt; | ||
| const staleTime = route.options.staleTime ?? router().options.defaultStaleTime ?? 0; | ||
| const gcTime = route.options.gcTime ?? router().options.defaultGcTime ?? 1800 * 1e3; | ||
| return (() => { | ||
| var _el$ = _tmpl$$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling.nextSibling, _el$6 = _el$4.nextSibling.nextSibling; | ||
| insert(_el$2, () => formatTime(age)); | ||
| insert(_el$4, () => formatTime(staleTime)); | ||
| insert(_el$6, () => formatTime(gcTime)); | ||
| createRenderEffect(() => className(_el$, clsx(styles().ageTicker(age > staleTime)))); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| //#endregion | ||
| //#region src/NavigateButton.tsx | ||
| var _tmpl$$1 = /* @__PURE__ */ template(`<button type=button>➔`); | ||
| function NavigateButton({ to, params, search, router }) { | ||
| const styles = useStyles$1(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$1(); | ||
| _el$.$$click = (e) => { | ||
| e.stopPropagation(); | ||
| router().navigate({ | ||
| to, | ||
| params, | ||
| search | ||
| }); | ||
| }; | ||
| setAttribute(_el$, "title", `Navigate to ${to}`); | ||
| createRenderEffect(() => className(_el$, styles().navigateButton)); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| delegateEvents(["click"]); | ||
| //#endregion | ||
| //#region src/BaseTanStackRouterDevtoolsPanel.tsx | ||
| var _tmpl$ = /* @__PURE__ */ template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ template(`<div style=display:flex;align-items:center;width:100%><div style=flex-grow:1;min-width:0>`), _tmpl$3 = /* @__PURE__ */ template(`<code> `), _tmpl$4 = /* @__PURE__ */ template(`<code>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ template(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<div><ul>`), _tmpl$8 = /* @__PURE__ */ template(`<div><button><svg xmlns=http://www.w3.org/2000/svg width=10 height=6 fill=none viewBox="0 0 10 6"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.667 d="M1 1l4 4 4-4"></path></svg></button><div><div></div><div><div></div></div></div><div><div><div><span>Pathname</span></div><div><code></code></div><div><div><button type=button>Routes</button><button type=button>Matches</button><button type=button>History</button></div><div><div>age / staleTime / gcTime</div></div></div><div>`), _tmpl$9 = /* @__PURE__ */ template(`<div><span>masked`), _tmpl$0 = /* @__PURE__ */ template(`<div role=button><div>`), _tmpl$1 = /* @__PURE__ */ template(`<li><div>`), _tmpl$10 = /* @__PURE__ */ template(`<li>This panel displays the most recent 15 navigations.`), _tmpl$11 = /* @__PURE__ */ template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$12 = /* @__PURE__ */ template(`<div><div>Match Details</div><div><div><div><div></div></div><div><div>ID:</div><div><code></code></div></div><div><div>State:</div><div></div></div><div><div>Last Updated:</div><div></div></div></div></div><div>Explorer</div><div>`), _tmpl$13 = /* @__PURE__ */ template(`<div>Loader Data`), _tmpl$14 = /* @__PURE__ */ template(`<div><div><span>Search Params</span></div><div>`), _tmpl$15 = /* @__PURE__ */ template(`<span style=margin-left:0.5rem>`), _tmpl$16 = /* @__PURE__ */ template(`<button type=button aria-label="Copy value to clipboard"style=cursor:pointer>`); | ||
| var HISTORY_LIMIT = 15; | ||
| function Logo(props) { | ||
| const { className: className$1, ...rest } = props; | ||
| const styles = useStyles$1(); | ||
| return (() => { | ||
| var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling; | ||
| spread(_el$, mergeProps(rest, { get ["class"]() { | ||
| return clsx(styles().logo, className$1 ? className$1() : ""); | ||
| } }), false, true); | ||
| createRenderEffect((_p$) => { | ||
| var _v$ = styles().tanstackLogo, _v$2 = styles().routerLogo; | ||
| _v$ !== _p$.e && className(_el$2, _p$.e = _v$); | ||
| _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| function NavigateLink(props) { | ||
| return (() => { | ||
| var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild; | ||
| insert(_el$4, () => props.left, _el$5); | ||
| insert(_el$5, () => props.children); | ||
| insert(_el$4, () => props.right, null); | ||
| createRenderEffect(() => className(_el$4, props.class)); | ||
| return _el$4; | ||
| })(); | ||
| } | ||
| function RouteComp({ routerState, router, route, isRoot, activeId, setActiveId }) { | ||
| const styles = useStyles$1(); | ||
| const matches = createMemo(() => routerState().pendingMatches || routerState().matches); | ||
| const match = createMemo(() => routerState().matches.find((d) => d.routeId === route.id)); | ||
| const param = createMemo(() => { | ||
| try { | ||
| if (match()?.params) { | ||
| const p = match()?.params; | ||
| const r = route.path || trimPath(route.id); | ||
| if (r.startsWith("$")) { | ||
| const trimmed = r.slice(1); | ||
| if (p[trimmed]) return `(${p[trimmed]})`; | ||
| } | ||
| } | ||
| return ""; | ||
| } catch (error) { | ||
| return ""; | ||
| } | ||
| }); | ||
| const navigationTarget = createMemo(() => { | ||
| if (isRoot) return void 0; | ||
| if (!route.path) return void 0; | ||
| const allParams = Object.assign({}, ...matches().map((m) => m.params)); | ||
| const interpolated = interpolatePath({ | ||
| path: route.fullPath, | ||
| params: allParams, | ||
| decoder: router().pathParamsDecoder | ||
| }); | ||
| return !interpolated.isMissingParams ? interpolated.interpolatedPath : void 0; | ||
| }); | ||
| return (() => { | ||
| var _el$6 = _tmpl$5(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild; | ||
| _el$7.$$click = () => { | ||
| if (match()) setActiveId(activeId() === route.id ? "" : route.id); | ||
| }; | ||
| insert(_el$7, createComponent(NavigateLink, { | ||
| get ["class"]() { | ||
| return clsx(styles().routesRow(!!match())); | ||
| }, | ||
| get left() { | ||
| return createComponent(Show, { | ||
| get when() { | ||
| return navigationTarget(); | ||
| }, | ||
| children: (navigate) => createComponent(NavigateButton, { | ||
| get to() { | ||
| return navigate(); | ||
| }, | ||
| router | ||
| }) | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| get match() { | ||
| return match(); | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| return [(() => { | ||
| var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild; | ||
| insert(_el$9, () => isRoot ? rootRouteId : route.path || trimPath(route.id), _el$0); | ||
| createRenderEffect(() => className(_el$9, styles().code)); | ||
| return _el$9; | ||
| })(), (() => { | ||
| var _el$1 = _tmpl$4(); | ||
| insert(_el$1, param); | ||
| createRenderEffect(() => className(_el$1, styles().routeParamInfo)); | ||
| return _el$1; | ||
| })()]; | ||
| } | ||
| }), null); | ||
| insert(_el$6, (() => { | ||
| var _c$ = memo(() => !!route.children?.length); | ||
| return () => _c$() ? (() => { | ||
| var _el$10 = _tmpl$6(); | ||
| insert(_el$10, () => [...route.children].sort((a, b) => { | ||
| return a.rank - b.rank; | ||
| }).map((r) => createComponent(RouteComp, { | ||
| routerState, | ||
| router, | ||
| route: r, | ||
| activeId, | ||
| setActiveId | ||
| }))); | ||
| createRenderEffect(() => className(_el$10, styles().nestedRouteRow(!!isRoot))); | ||
| return _el$10; | ||
| })() : null; | ||
| })(), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$3 = `Open match details for ${route.id}`, _v$4 = clsx(styles().routesRowContainer(route.id === activeId(), !!match())), _v$5 = clsx(styles().matchIndicator(getRouteStatusColor(matches(), route))); | ||
| _v$3 !== _p$.e && setAttribute(_el$7, "aria-label", _p$.e = _v$3); | ||
| _v$4 !== _p$.t && className(_el$7, _p$.t = _v$4); | ||
| _v$5 !== _p$.a && className(_el$8, _p$.a = _v$5); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$6; | ||
| })(); | ||
| } | ||
| var BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel({ ...props }) { | ||
| const { isOpen = true, setIsOpen, handleDragStart, router, routerState, shadowDOMTarget, ...panelProps } = props; | ||
| const { onCloseClick } = useDevtoolsOnClose(); | ||
| const styles = useStyles$1(); | ||
| const { className: className$2, style, ...otherPanelProps } = panelProps; | ||
| invariant(router, "No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually."); | ||
| const [currentTab, setCurrentTab] = useLocalStorage("tanstackRouterDevtoolsActiveTab", "routes"); | ||
| const [activeId, setActiveId] = useLocalStorage("tanstackRouterDevtoolsActiveRouteId", ""); | ||
| const [history, setHistory] = createSignal([]); | ||
| const [hasHistoryOverflowed, setHasHistoryOverflowed] = createSignal(false); | ||
| createEffect(() => { | ||
| const matches = routerState().matches; | ||
| const currentMatch = matches[matches.length - 1]; | ||
| if (!currentMatch) return; | ||
| const historyUntracked = untrack(() => history()); | ||
| const lastMatch = historyUntracked[0]; | ||
| const sameLocation = lastMatch && lastMatch.pathname === currentMatch.pathname && JSON.stringify(lastMatch.search ?? {}) === JSON.stringify(currentMatch.search ?? {}); | ||
| if (!lastMatch || !sameLocation) { | ||
| if (historyUntracked.length >= HISTORY_LIMIT) setHasHistoryOverflowed(true); | ||
| setHistory((prev) => { | ||
| const newHistory = [currentMatch, ...prev]; | ||
| newHistory.splice(HISTORY_LIMIT); | ||
| return newHistory; | ||
| }); | ||
| } | ||
| }); | ||
| const activeMatch = createMemo(() => { | ||
| return [ | ||
| ...routerState().pendingMatches ?? [], | ||
| ...routerState().matches, | ||
| ...routerState().cachedMatches | ||
| ].find((d) => d.routeId === activeId() || d.id === activeId()); | ||
| }); | ||
| const hasSearch = createMemo(() => Object.keys(routerState().location.search).length); | ||
| const explorerState = createMemo(() => { | ||
| return { | ||
| ...router(), | ||
| state: routerState() | ||
| }; | ||
| }); | ||
| const routerExplorerValue = createMemo(() => Object.fromEntries(multiSortBy(Object.keys(explorerState()), [ | ||
| "state", | ||
| "routesById", | ||
| "routesByPath", | ||
| "options", | ||
| "manifest" | ||
| ].map((d) => (dd) => dd !== d)).map((key) => [key, explorerState()[key]]).filter((d) => typeof d[1] !== "function" && ![ | ||
| "__store", | ||
| "basepath", | ||
| "injectedHtml", | ||
| "subscribers", | ||
| "latestLoadPromise", | ||
| "navigateTimeout", | ||
| "resetNextScroll", | ||
| "tempLocationKey", | ||
| "latestLocation", | ||
| "routeTree", | ||
| "history" | ||
| ].includes(d[0])))); | ||
| const activeMatchLoaderData = createMemo(() => activeMatch()?.loaderData); | ||
| const activeMatchValue = createMemo(() => activeMatch()); | ||
| const locationSearchValue = createMemo(() => routerState().location.search); | ||
| return (() => { | ||
| var _el$11 = _tmpl$8(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$14.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild; | ||
| _el$20.firstChild; | ||
| var _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$25.nextSibling, _el$30 = _el$24.nextSibling; | ||
| spread(_el$11, mergeProps({ | ||
| get ["class"]() { | ||
| return clsx(styles().devtoolsPanel, "TanStackRouterDevtoolsPanel", className$2 ? className$2() : ""); | ||
| }, | ||
| get style() { | ||
| return style ? style() : ""; | ||
| } | ||
| }, otherPanelProps), false, true); | ||
| insert(_el$11, handleDragStart ? (() => { | ||
| var _el$34 = _tmpl$6(); | ||
| addEventListener(_el$34, "mousedown", handleDragStart, true); | ||
| createRenderEffect(() => className(_el$34, styles().dragHandle)); | ||
| return _el$34; | ||
| })() : null, _el$12); | ||
| _el$12.$$click = (e) => { | ||
| if (setIsOpen) setIsOpen(false); | ||
| onCloseClick(e); | ||
| }; | ||
| insert(_el$15, createComponent(Logo, { | ||
| "aria-hidden": true, | ||
| onClick: (e) => { | ||
| if (setIsOpen) setIsOpen(false); | ||
| onCloseClick(e); | ||
| } | ||
| })); | ||
| insert(_el$17, createComponent(Explorer, { | ||
| label: "Router", | ||
| value: routerExplorerValue, | ||
| defaultExpanded: { | ||
| state: {}, | ||
| context: {}, | ||
| options: {} | ||
| }, | ||
| filterSubEntries: (subEntries) => { | ||
| return subEntries.filter((d) => typeof d.value() !== "function"); | ||
| } | ||
| })); | ||
| insert(_el$20, (() => { | ||
| var _c$2 = memo(() => !!routerState().location.maskedLocation); | ||
| return () => _c$2() ? (() => { | ||
| var _el$35 = _tmpl$9(), _el$36 = _el$35.firstChild; | ||
| createRenderEffect((_p$) => { | ||
| var _v$24 = styles().maskedBadgeContainer, _v$25 = styles().maskedBadge; | ||
| _v$24 !== _p$.e && className(_el$35, _p$.e = _v$24); | ||
| _v$25 !== _p$.t && className(_el$36, _p$.t = _v$25); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$35; | ||
| })() : null; | ||
| })(), null); | ||
| insert(_el$23, () => routerState().location.pathname); | ||
| insert(_el$22, (() => { | ||
| var _c$3 = memo(() => !!routerState().location.maskedLocation); | ||
| return () => _c$3() ? (() => { | ||
| var _el$37 = _tmpl$4(); | ||
| insert(_el$37, () => routerState().location.maskedLocation?.pathname); | ||
| createRenderEffect(() => className(_el$37, styles().maskedLocation)); | ||
| return _el$37; | ||
| })() : null; | ||
| })(), null); | ||
| _el$26.$$click = () => { | ||
| setCurrentTab("routes"); | ||
| }; | ||
| _el$27.$$click = () => { | ||
| setCurrentTab("matches"); | ||
| }; | ||
| _el$28.$$click = () => { | ||
| setCurrentTab("history"); | ||
| }; | ||
| insert(_el$30, createComponent(Switch, { get children() { | ||
| return [ | ||
| createComponent(Match, { | ||
| get when() { | ||
| return currentTab() === "routes"; | ||
| }, | ||
| get children() { | ||
| return createComponent(RouteComp, { | ||
| routerState, | ||
| router, | ||
| get route() { | ||
| return router().routeTree; | ||
| }, | ||
| isRoot: true, | ||
| activeId, | ||
| setActiveId | ||
| }); | ||
| } | ||
| }), | ||
| createComponent(Match, { | ||
| get when() { | ||
| return currentTab() === "matches"; | ||
| }, | ||
| get children() { | ||
| var _el$31 = _tmpl$6(); | ||
| insert(_el$31, () => (routerState().pendingMatches?.length ? routerState().pendingMatches : routerState().matches)?.map((match, _i) => { | ||
| return (() => { | ||
| var _el$38 = _tmpl$0(), _el$39 = _el$38.firstChild; | ||
| _el$38.$$click = () => setActiveId(activeId() === match.id ? "" : match.id); | ||
| insert(_el$38, createComponent(NavigateLink, { | ||
| get left() { | ||
| return createComponent(NavigateButton, { | ||
| get to() { | ||
| return match.pathname; | ||
| }, | ||
| get params() { | ||
| return match.params; | ||
| }, | ||
| get search() { | ||
| return match.search; | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| match, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| var _el$40 = _tmpl$4(); | ||
| insert(_el$40, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`); | ||
| createRenderEffect(() => className(_el$40, styles().matchID)); | ||
| return _el$40; | ||
| } | ||
| }), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$26 = `Open match details for ${match.id}`, _v$27 = clsx(styles().matchRow(match === activeMatch())), _v$28 = clsx(styles().matchIndicator(getStatusColor(match))); | ||
| _v$26 !== _p$.e && setAttribute(_el$38, "aria-label", _p$.e = _v$26); | ||
| _v$27 !== _p$.t && className(_el$38, _p$.t = _v$27); | ||
| _v$28 !== _p$.a && className(_el$39, _p$.a = _v$28); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$38; | ||
| })(); | ||
| })); | ||
| return _el$31; | ||
| } | ||
| }), | ||
| createComponent(Match, { | ||
| get when() { | ||
| return currentTab() === "history"; | ||
| }, | ||
| get children() { | ||
| var _el$32 = _tmpl$7(), _el$33 = _el$32.firstChild; | ||
| insert(_el$33, createComponent(For, { | ||
| get each() { | ||
| return history(); | ||
| }, | ||
| children: (match, index) => (() => { | ||
| var _el$41 = _tmpl$1(), _el$42 = _el$41.firstChild; | ||
| insert(_el$41, createComponent(NavigateLink, { | ||
| get left() { | ||
| return createComponent(NavigateButton, { | ||
| get to() { | ||
| return match.pathname; | ||
| }, | ||
| get params() { | ||
| return match.params; | ||
| }, | ||
| get search() { | ||
| return match.search; | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| match, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| var _el$43 = _tmpl$4(); | ||
| insert(_el$43, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`); | ||
| createRenderEffect(() => className(_el$43, styles().matchID)); | ||
| return _el$43; | ||
| } | ||
| }), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$29 = clsx(styles().matchRow(match === activeMatch())), _v$30 = clsx(styles().matchIndicator(index() === 0 ? "green" : "gray")); | ||
| _v$29 !== _p$.e && className(_el$41, _p$.e = _v$29); | ||
| _v$30 !== _p$.t && className(_el$42, _p$.t = _v$30); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0 | ||
| }); | ||
| return _el$41; | ||
| })() | ||
| }), null); | ||
| insert(_el$33, (() => { | ||
| var _c$4 = memo(() => !!hasHistoryOverflowed()); | ||
| return () => _c$4() ? (() => { | ||
| var _el$44 = _tmpl$10(); | ||
| createRenderEffect(() => className(_el$44, styles().historyOverflowContainer)); | ||
| return _el$44; | ||
| })() : null; | ||
| })(), null); | ||
| return _el$32; | ||
| } | ||
| }) | ||
| ]; | ||
| } })); | ||
| insert(_el$18, (() => { | ||
| var _c$5 = memo(() => !!routerState().cachedMatches.length); | ||
| return () => _c$5() ? (() => { | ||
| var _el$45 = _tmpl$11(), _el$46 = _el$45.firstChild, _el$48 = _el$46.firstChild.nextSibling, _el$49 = _el$46.nextSibling; | ||
| insert(_el$49, () => routerState().cachedMatches.map((match) => { | ||
| return (() => { | ||
| var _el$50 = _tmpl$0(), _el$51 = _el$50.firstChild; | ||
| _el$50.$$click = () => setActiveId(activeId() === match.id ? "" : match.id); | ||
| insert(_el$50, createComponent(NavigateLink, { | ||
| get left() { | ||
| return createComponent(NavigateButton, { | ||
| get to() { | ||
| return match.pathname; | ||
| }, | ||
| get params() { | ||
| return match.params; | ||
| }, | ||
| get search() { | ||
| return match.search; | ||
| }, | ||
| router | ||
| }); | ||
| }, | ||
| get right() { | ||
| return createComponent(AgeTicker, { | ||
| match, | ||
| router | ||
| }); | ||
| }, | ||
| get children() { | ||
| var _el$52 = _tmpl$4(); | ||
| insert(_el$52, () => `${match.id}`); | ||
| createRenderEffect(() => className(_el$52, styles().matchID)); | ||
| return _el$52; | ||
| } | ||
| }), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$34 = `Open match details for ${match.id}`, _v$35 = clsx(styles().matchRow(match === activeMatch())), _v$36 = clsx(styles().matchIndicator(getStatusColor(match))); | ||
| _v$34 !== _p$.e && setAttribute(_el$50, "aria-label", _p$.e = _v$34); | ||
| _v$35 !== _p$.t && className(_el$50, _p$.t = _v$35); | ||
| _v$36 !== _p$.a && className(_el$51, _p$.a = _v$36); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$50; | ||
| })(); | ||
| })); | ||
| createRenderEffect((_p$) => { | ||
| var _v$31 = styles().cachedMatchesContainer, _v$32 = styles().detailsHeader, _v$33 = styles().detailsHeaderInfo; | ||
| _v$31 !== _p$.e && className(_el$45, _p$.e = _v$31); | ||
| _v$32 !== _p$.t && className(_el$46, _p$.t = _v$32); | ||
| _v$33 !== _p$.a && className(_el$48, _p$.a = _v$33); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$45; | ||
| })() : null; | ||
| })(), null); | ||
| insert(_el$11, (() => { | ||
| var _c$6 = memo(() => !!(activeMatch() && activeMatch()?.status)); | ||
| return () => _c$6() ? (() => { | ||
| var _el$53 = _tmpl$12(), _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$55.firstChild, _el$57 = _el$56.firstChild, _el$58 = _el$57.firstChild, _el$59 = _el$57.nextSibling, _el$61 = _el$59.firstChild.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$59.nextSibling, _el$65 = _el$63.firstChild.nextSibling, _el$66 = _el$63.nextSibling, _el$68 = _el$66.firstChild.nextSibling, _el$69 = _el$55.nextSibling, _el$70 = _el$69.nextSibling; | ||
| insert(_el$58, (() => { | ||
| var _c$8 = memo(() => !!(activeMatch()?.status === "success" && activeMatch()?.isFetching)); | ||
| return () => _c$8() ? "fetching" : activeMatch()?.status; | ||
| })()); | ||
| insert(_el$62, () => activeMatch()?.id); | ||
| insert(_el$65, (() => { | ||
| var _c$9 = memo(() => !!routerState().pendingMatches?.find((d) => d.id === activeMatch()?.id)); | ||
| return () => _c$9() ? "Pending" : routerState().matches.find((d) => d.id === activeMatch()?.id) ? "Active" : "Cached"; | ||
| })()); | ||
| insert(_el$68, (() => { | ||
| var _c$0 = memo(() => !!activeMatch()?.updatedAt); | ||
| return () => _c$0() ? new Date(activeMatch()?.updatedAt).toLocaleTimeString() : "N/A"; | ||
| })()); | ||
| insert(_el$53, (() => { | ||
| var _c$1 = memo(() => !!activeMatchLoaderData()); | ||
| return () => _c$1() ? [(() => { | ||
| var _el$71 = _tmpl$13(); | ||
| createRenderEffect(() => className(_el$71, styles().detailsHeader)); | ||
| return _el$71; | ||
| })(), (() => { | ||
| var _el$72 = _tmpl$6(); | ||
| insert(_el$72, createComponent(Explorer, { | ||
| label: "loaderData", | ||
| value: activeMatchLoaderData, | ||
| defaultExpanded: {} | ||
| })); | ||
| createRenderEffect(() => className(_el$72, styles().detailsContent)); | ||
| return _el$72; | ||
| })()] : null; | ||
| })(), _el$69); | ||
| insert(_el$70, createComponent(Explorer, { | ||
| label: "Match", | ||
| value: activeMatchValue, | ||
| defaultExpanded: {} | ||
| })); | ||
| createRenderEffect((_p$) => { | ||
| var _v$37 = styles().thirdContainer, _v$38 = styles().detailsHeader, _v$39 = styles().matchDetails, _v$40 = styles().matchStatus(activeMatch()?.status, activeMatch()?.isFetching), _v$41 = styles().matchDetailsInfoLabel, _v$42 = styles().matchDetailsInfo, _v$43 = styles().matchDetailsInfoLabel, _v$44 = styles().matchDetailsInfo, _v$45 = styles().matchDetailsInfoLabel, _v$46 = styles().matchDetailsInfo, _v$47 = styles().detailsHeader, _v$48 = styles().detailsContent; | ||
| _v$37 !== _p$.e && className(_el$53, _p$.e = _v$37); | ||
| _v$38 !== _p$.t && className(_el$54, _p$.t = _v$38); | ||
| _v$39 !== _p$.a && className(_el$56, _p$.a = _v$39); | ||
| _v$40 !== _p$.o && className(_el$57, _p$.o = _v$40); | ||
| _v$41 !== _p$.i && className(_el$59, _p$.i = _v$41); | ||
| _v$42 !== _p$.n && className(_el$61, _p$.n = _v$42); | ||
| _v$43 !== _p$.s && className(_el$63, _p$.s = _v$43); | ||
| _v$44 !== _p$.h && className(_el$65, _p$.h = _v$44); | ||
| _v$45 !== _p$.r && className(_el$66, _p$.r = _v$45); | ||
| _v$46 !== _p$.d && className(_el$68, _p$.d = _v$46); | ||
| _v$47 !== _p$.l && className(_el$69, _p$.l = _v$47); | ||
| _v$48 !== _p$.u && className(_el$70, _p$.u = _v$48); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0, | ||
| n: void 0, | ||
| s: void 0, | ||
| h: void 0, | ||
| r: void 0, | ||
| d: void 0, | ||
| l: void 0, | ||
| u: void 0 | ||
| }); | ||
| return _el$53; | ||
| })() : null; | ||
| })(), null); | ||
| insert(_el$11, (() => { | ||
| var _c$7 = memo(() => !!hasSearch()); | ||
| return () => _c$7() ? (() => { | ||
| var _el$73 = _tmpl$14(), _el$74 = _el$73.firstChild; | ||
| _el$74.firstChild; | ||
| var _el$76 = _el$74.nextSibling; | ||
| insert(_el$74, typeof navigator !== "undefined" ? (() => { | ||
| var _el$77 = _tmpl$15(); | ||
| insert(_el$77, createComponent(CopyButton, { getValue: () => { | ||
| const search = routerState().location.search; | ||
| return JSON.stringify(search); | ||
| } })); | ||
| return _el$77; | ||
| })() : null, null); | ||
| insert(_el$76, createComponent(Explorer, { | ||
| value: locationSearchValue, | ||
| get defaultExpanded() { | ||
| return Object.keys(routerState().location.search).reduce((obj, next) => { | ||
| obj[next] = {}; | ||
| return obj; | ||
| }, {}); | ||
| } | ||
| })); | ||
| createRenderEffect((_p$) => { | ||
| var _v$49 = styles().fourthContainer, _v$50 = styles().detailsHeader, _v$51 = styles().detailsContent; | ||
| _v$49 !== _p$.e && className(_el$73, _p$.e = _v$49); | ||
| _v$50 !== _p$.t && className(_el$74, _p$.t = _v$50); | ||
| _v$51 !== _p$.a && className(_el$76, _p$.a = _v$51); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0 | ||
| }); | ||
| return _el$73; | ||
| })() : null; | ||
| })(), null); | ||
| createRenderEffect((_p$) => { | ||
| var _v$6 = styles().panelCloseBtn, _v$7 = styles().panelCloseBtnIcon, _v$8 = styles().firstContainer, _v$9 = styles().row, _v$0 = styles().routerExplorerContainer, _v$1 = styles().routerExplorer, _v$10 = styles().secondContainer, _v$11 = styles().matchesContainer, _v$12 = styles().detailsHeader, _v$13 = styles().detailsContent, _v$14 = styles().detailsHeader, _v$15 = styles().routeMatchesToggle, _v$16 = currentTab() === "routes", _v$17 = clsx(styles().routeMatchesToggleBtn(currentTab() === "routes", true)), _v$18 = currentTab() === "matches", _v$19 = clsx(styles().routeMatchesToggleBtn(currentTab() === "matches", true)), _v$20 = currentTab() === "history", _v$21 = clsx(styles().routeMatchesToggleBtn(currentTab() === "history", false)), _v$22 = styles().detailsHeaderInfo, _v$23 = clsx(styles().routesContainer); | ||
| _v$6 !== _p$.e && className(_el$12, _p$.e = _v$6); | ||
| _v$7 !== _p$.t && setAttribute(_el$13, "class", _p$.t = _v$7); | ||
| _v$8 !== _p$.a && className(_el$14, _p$.a = _v$8); | ||
| _v$9 !== _p$.o && className(_el$15, _p$.o = _v$9); | ||
| _v$0 !== _p$.i && className(_el$16, _p$.i = _v$0); | ||
| _v$1 !== _p$.n && className(_el$17, _p$.n = _v$1); | ||
| _v$10 !== _p$.s && className(_el$18, _p$.s = _v$10); | ||
| _v$11 !== _p$.h && className(_el$19, _p$.h = _v$11); | ||
| _v$12 !== _p$.r && className(_el$20, _p$.r = _v$12); | ||
| _v$13 !== _p$.d && className(_el$22, _p$.d = _v$13); | ||
| _v$14 !== _p$.l && className(_el$24, _p$.l = _v$14); | ||
| _v$15 !== _p$.u && className(_el$25, _p$.u = _v$15); | ||
| _v$16 !== _p$.c && (_el$26.disabled = _p$.c = _v$16); | ||
| _v$17 !== _p$.w && className(_el$26, _p$.w = _v$17); | ||
| _v$18 !== _p$.m && (_el$27.disabled = _p$.m = _v$18); | ||
| _v$19 !== _p$.f && className(_el$27, _p$.f = _v$19); | ||
| _v$20 !== _p$.y && (_el$28.disabled = _p$.y = _v$20); | ||
| _v$21 !== _p$.g && className(_el$28, _p$.g = _v$21); | ||
| _v$22 !== _p$.p && className(_el$29, _p$.p = _v$22); | ||
| _v$23 !== _p$.b && className(_el$30, _p$.b = _v$23); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0, | ||
| n: void 0, | ||
| s: void 0, | ||
| h: void 0, | ||
| r: void 0, | ||
| d: void 0, | ||
| l: void 0, | ||
| u: void 0, | ||
| c: void 0, | ||
| w: void 0, | ||
| m: void 0, | ||
| f: void 0, | ||
| y: void 0, | ||
| g: void 0, | ||
| p: void 0, | ||
| b: void 0 | ||
| }); | ||
| return _el$11; | ||
| })(); | ||
| }; | ||
| function CopyButton({ getValue }) { | ||
| const [copied, setCopied] = createSignal(false); | ||
| let timeoutId = null; | ||
| const handleCopy = async () => { | ||
| if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) { | ||
| console.warn("TanStack Router Devtools: Clipboard API unavailable"); | ||
| return; | ||
| } | ||
| try { | ||
| const value = getValue(); | ||
| await navigator.clipboard.writeText(value); | ||
| setCopied(true); | ||
| if (timeoutId) clearTimeout(timeoutId); | ||
| timeoutId = setTimeout(() => setCopied(false), 2500); | ||
| } catch (e) { | ||
| console.error("TanStack Router Devtools: Failed to copy", e); | ||
| } | ||
| }; | ||
| onCleanup(() => { | ||
| if (timeoutId) clearTimeout(timeoutId); | ||
| }); | ||
| return (() => { | ||
| var _el$78 = _tmpl$16(); | ||
| _el$78.$$click = handleCopy; | ||
| insert(_el$78, () => copied() ? "✅" : "📋"); | ||
| createRenderEffect(() => setAttribute(_el$78, "title", copied() ? "Copied!" : "Copy")); | ||
| return _el$78; | ||
| })(); | ||
| } | ||
| delegateEvents(["click", "mousedown"]); | ||
| //#endregion | ||
| export { BaseTanStackRouterDevtoolsPanel, BaseTanStackRouterDevtoolsPanel as default, useLocalStorage as n, useStyles$1 as r, useIsMounted as t }; | ||
| //# sourceMappingURL=BaseTanStackRouterDevtoolsPanel-B43j38ty.js.map |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
| import { C as createUniqueId, S as createSignal, T as mergeProps, b as createMemo, c as insert, d as setAttribute, f as spread, i as Dynamic, o as className, p as template, t as DevtoolsOnCloseContext, v as createComponent, x as createRenderEffect, y as createEffect } from "./context-D56_tqst.js"; | ||
| import { BaseTanStackRouterDevtoolsPanel, n as useLocalStorage, r as useStyles, t as useIsMounted } from "./BaseTanStackRouterDevtoolsPanel-B43j38ty.js"; | ||
| import { clsx } from "clsx"; | ||
| //#region src/logo.tsx | ||
| var _tmpl$$1 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg enable-background="new 0 0 634 633"viewBox="0 0 634 633"><g transform=translate(1)><linearGradient x1=-641.486 x2=-641.486 y1=856.648 y2=855.931 gradientTransform="matrix(633 0 0 -633 406377 542258)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#6bdaff></stop><stop offset=0.319 stop-color=#f9ffb5></stop><stop offset=0.706 stop-color=#ffa770></stop><stop offset=1 stop-color=#ff7373></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5 fill-rule=evenodd clip-rule=evenodd></circle><defs><filter width=454 height=396.9 x=-137.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=176.9 height=129.3 x=272.2 y=308 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=176.9 height=129.3 x=272.2 y=308 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><path fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11 d="M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1"></path><linearGradient x1=-645.656 x2=-646.499 y1=854.878 y2=854.788 gradientTransform="matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ee2700></stop><stop offset=1 stop-color=#ff008e></stop></linearGradient><path fill-rule=evenodd d="M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd></path><path fill=#D8D8D8 fill-rule=evenodd stroke=#FFF stroke-linecap=round stroke-linejoin=bevel stroke-width=7 d="M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9"clip-rule=evenodd></path></g><defs><filter width=280.6 height=317.4 x=73.2 y=113.9 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=280.6 height=317.4 x=73.2 y=113.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><linearGradient x1=-646.8 x2=-646.8 y1=854.844 y2=853.844 gradientTransform="matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#a17500></stop><stop offset=1 stop-color=#5d2100></stop></linearGradient><path fill-rule=evenodd d="M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6"clip-rule=evenodd></path><linearGradient x1=-635.467 x2=-635.467 y1=852.115 y2=851.115 gradientTransform="matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd></path><linearGradient x1=-636.573 x2=-636.573 y1=855.444 y2=854.444 gradientTransform="matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z"clip-rule=evenodd></path><linearGradient x1=-632.145 x2=-632.145 y1=854.174 y2=853.174 gradientTransform="matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z"clip-rule=evenodd></path><linearGradient x1=-638.224 x2=-638.224 y1=853.801 y2=852.801 gradientTransform="matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd></path><linearGradient x1=-637.723 x2=-637.723 y1=855.103 y2=854.103 gradientTransform="matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z"clip-rule=evenodd></path><linearGradient x1=-631.79 x2=-631.79 y1=855.872 y2=854.872 gradientTransform="matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z"clip-rule=evenodd></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1"></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32"></path></g><defs><filter width=532 height=633 x=50.5 y=399 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=532 height=633 x=50.5 y=399 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><linearGradient x1=-641.104 x2=-641.278 y1=856.577 y2=856.183 gradientTransform="matrix(532 0 0 -633 341484.5 542657)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#fff400></stop><stop offset=1 stop-color=#3c8700></stop></linearGradient><ellipse cx=316.5 cy=715.5 fill-rule=evenodd clip-rule=evenodd rx=266 ry=316.5></ellipse><defs><filter width=288 height=283 x=391 y=-24 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=288 height=283 x=391 y=-24 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><g transform="translate(397 -24)"><linearGradient x1=-1036.672 x2=-1036.672 y1=880.018 y2=879.018 gradientTransform="matrix(227 0 0 -227 235493 199764)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffdf00></stop><stop offset=1 stop-color=#ff9d00></stop></linearGradient><circle cx=168.5 cy=113.5 r=113.5 fill-rule=evenodd clip-rule=evenodd></circle><linearGradient x1=-1017.329 x2=-1018.602 y1=658.003 y2=657.998 gradientTransform="matrix(30 0 0 -1 30558 771)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M30 113H0"></path><linearGradient x1=-1014.501 x2=-1015.774 y1=839.985 y2=839.935 gradientTransform="matrix(26.5 0 0 -5.5 26925 4696.5)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M33.5 79.5L7 74"></path><linearGradient x1=-1016.59 x2=-1017.862 y1=852.671 y2=852.595 gradientTransform="matrix(29 0 0 -8 29523 6971)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M34 146l-29 8"></path><linearGradient x1=-1011.984 x2=-1013.257 y1=863.523 y2=863.229 gradientTransform="matrix(24 0 0 -13 24339 11407)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M45 177l-24 13"></path><linearGradient x1=-1006.673 x2=-1007.946 y1=869.279 y2=868.376 gradientTransform="matrix(20 0 0 -19 20205 16720)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M67 204l-20 19"></path><linearGradient x1=-992.85 x2=-993.317 y1=871.258 y2=870.258 gradientTransform="matrix(13.8339 0 0 -22.8467 13825.796 20131.938)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M94.4 227l-13.8 22.8"></path><linearGradient x1=-953.835 x2=-953.965 y1=871.9 y2=870.9 gradientTransform="matrix(7.5 0 0 -24.5 7278 21605)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M127.5 243.5L120 268"></path><linearGradient x1=244.504 x2=244.496 y1=871.898 y2=870.898 gradientTransform="matrix(.5 0 0 -24.5 45.5 21614)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M167.5 252.5l.5 24.5">`); | ||
| function TanStackLogo() { | ||
| const id = createUniqueId(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$1(), _el$3 = _el$.firstChild.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$13.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$39 = _el$37.firstChild.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$37.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$47.nextSibling, _el$49 = _el$48.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling, _el$60 = _el$45.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$60.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$65.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$72 = _el$70.firstChild.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling; | ||
| setAttribute(_el$3, "id", `a-${id}`); | ||
| setAttribute(_el$4, "fill", `url(#a-${id})`); | ||
| setAttribute(_el$6, "id", `b-${id}`); | ||
| setAttribute(_el$7, "id", `c-${id}`); | ||
| setAttribute(_el$8, "filter", `url(#b-${id})`); | ||
| setAttribute(_el$9, "mask", `url(#c-${id})`); | ||
| setAttribute(_el$1, "id", `d-${id}`); | ||
| setAttribute(_el$10, "id", `e-${id}`); | ||
| setAttribute(_el$11, "filter", `url(#d-${id})`); | ||
| setAttribute(_el$12, "mask", `url(#e-${id})`); | ||
| setAttribute(_el$14, "id", `f-${id}`); | ||
| setAttribute(_el$15, "id", `g-${id}`); | ||
| setAttribute(_el$16, "filter", `url(#f-${id})`); | ||
| setAttribute(_el$17, "mask", `url(#g-${id})`); | ||
| setAttribute(_el$19, "id", `h-${id}`); | ||
| setAttribute(_el$20, "id", `i-${id}`); | ||
| setAttribute(_el$21, "filter", `url(#h-${id})`); | ||
| setAttribute(_el$22, "mask", `url(#i-${id})`); | ||
| setAttribute(_el$24, "id", `j-${id}`); | ||
| setAttribute(_el$25, "id", `k-${id}`); | ||
| setAttribute(_el$26, "filter", `url(#j-${id})`); | ||
| setAttribute(_el$27, "mask", `url(#k-${id})`); | ||
| setAttribute(_el$29, "id", `l-${id}`); | ||
| setAttribute(_el$30, "id", `m-${id}`); | ||
| setAttribute(_el$31, "filter", `url(#l-${id})`); | ||
| setAttribute(_el$32, "mask", `url(#m-${id})`); | ||
| setAttribute(_el$34, "id", `n-${id}`); | ||
| setAttribute(_el$35, "id", `o-${id}`); | ||
| setAttribute(_el$36, "filter", `url(#n-${id})`); | ||
| setAttribute(_el$37, "mask", `url(#o-${id})`); | ||
| setAttribute(_el$39, "id", `p-${id}`); | ||
| setAttribute(_el$40, "fill", `url(#p-${id})`); | ||
| setAttribute(_el$42, "id", `q-${id}`); | ||
| setAttribute(_el$43, "id", `r-${id}`); | ||
| setAttribute(_el$44, "filter", `url(#q-${id})`); | ||
| setAttribute(_el$45, "mask", `url(#r-${id})`); | ||
| setAttribute(_el$46, "id", `s-${id}`); | ||
| setAttribute(_el$47, "fill", `url(#s-${id})`); | ||
| setAttribute(_el$48, "id", `t-${id}`); | ||
| setAttribute(_el$49, "fill", `url(#t-${id})`); | ||
| setAttribute(_el$50, "id", `u-${id}`); | ||
| setAttribute(_el$51, "fill", `url(#u-${id})`); | ||
| setAttribute(_el$52, "id", `v-${id}`); | ||
| setAttribute(_el$53, "fill", `url(#v-${id})`); | ||
| setAttribute(_el$54, "id", `w-${id}`); | ||
| setAttribute(_el$55, "fill", `url(#w-${id})`); | ||
| setAttribute(_el$56, "id", `x-${id}`); | ||
| setAttribute(_el$57, "fill", `url(#x-${id})`); | ||
| setAttribute(_el$58, "id", `y-${id}`); | ||
| setAttribute(_el$59, "fill", `url(#y-${id})`); | ||
| setAttribute(_el$61, "id", `z-${id}`); | ||
| setAttribute(_el$62, "id", `A-${id}`); | ||
| setAttribute(_el$63, "filter", `url(#z-${id})`); | ||
| setAttribute(_el$64, "id", `B-${id}`); | ||
| setAttribute(_el$65, "fill", `url(#B-${id})`); | ||
| setAttribute(_el$65, "mask", `url(#A-${id})`); | ||
| setAttribute(_el$67, "id", `C-${id}`); | ||
| setAttribute(_el$68, "id", `D-${id}`); | ||
| setAttribute(_el$69, "filter", `url(#C-${id})`); | ||
| setAttribute(_el$70, "mask", `url(#D-${id})`); | ||
| setAttribute(_el$72, "id", `E-${id}`); | ||
| setAttribute(_el$73, "fill", `url(#E-${id})`); | ||
| setAttribute(_el$74, "id", `F-${id}`); | ||
| setAttribute(_el$75, "stroke", `url(#F-${id})`); | ||
| setAttribute(_el$76, "id", `G-${id}`); | ||
| setAttribute(_el$77, "stroke", `url(#G-${id})`); | ||
| setAttribute(_el$78, "id", `H-${id}`); | ||
| setAttribute(_el$79, "stroke", `url(#H-${id})`); | ||
| setAttribute(_el$80, "id", `I-${id}`); | ||
| setAttribute(_el$81, "stroke", `url(#I-${id})`); | ||
| setAttribute(_el$82, "id", `J-${id}`); | ||
| setAttribute(_el$83, "stroke", `url(#J-${id})`); | ||
| setAttribute(_el$84, "id", `K-${id}`); | ||
| setAttribute(_el$85, "stroke", `url(#K-${id})`); | ||
| setAttribute(_el$86, "id", `L-${id}`); | ||
| setAttribute(_el$87, "stroke", `url(#L-${id})`); | ||
| setAttribute(_el$88, "id", `M-${id}`); | ||
| setAttribute(_el$89, "stroke", `url(#M-${id})`); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| //#endregion | ||
| //#region src/FloatingTanStackRouterDevtools.tsx | ||
| var _tmpl$ = /* @__PURE__ */ template(`<button type=button><div><div></div><div></div></div><div>-</div><div>TanStack Router`); | ||
| function FloatingTanStackRouterDevtools({ initialIsOpen, panelProps = {}, closeButtonProps = {}, toggleButtonProps = {}, position = "bottom-left", containerElement: Container = "footer", router, routerState, shadowDOMTarget }) { | ||
| const [rootEl, setRootEl] = createSignal(); | ||
| let panelRef = void 0; | ||
| const [isOpen, setIsOpen] = useLocalStorage("tanstackRouterDevtoolsOpen", initialIsOpen); | ||
| const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage("tanstackRouterDevtoolsHeight", null); | ||
| const [isResolvedOpen, setIsResolvedOpen] = createSignal(false); | ||
| const [isResizing, setIsResizing] = createSignal(false); | ||
| const isMounted = useIsMounted(); | ||
| const styles = useStyles(); | ||
| const handleDragStart = (panelElement, startEvent) => { | ||
| if (startEvent.button !== 0) return; | ||
| setIsResizing(true); | ||
| const dragInfo = { | ||
| originalHeight: panelElement?.getBoundingClientRect().height ?? 0, | ||
| pageY: startEvent.pageY | ||
| }; | ||
| const run = (moveEvent) => { | ||
| const delta = dragInfo.pageY - moveEvent.pageY; | ||
| const newHeight = dragInfo.originalHeight + delta; | ||
| setDevtoolsHeight(newHeight); | ||
| if (newHeight < 70) setIsOpen(false); | ||
| else setIsOpen(true); | ||
| }; | ||
| const unsub = () => { | ||
| setIsResizing(false); | ||
| document.removeEventListener("mousemove", run); | ||
| document.removeEventListener("mouseUp", unsub); | ||
| }; | ||
| document.addEventListener("mousemove", run); | ||
| document.addEventListener("mouseup", unsub); | ||
| }; | ||
| isOpen(); | ||
| createEffect(() => { | ||
| setIsResolvedOpen(isOpen() ?? false); | ||
| }); | ||
| createEffect(() => { | ||
| if (isResolvedOpen()) { | ||
| const previousValue = rootEl()?.parentElement?.style.paddingBottom; | ||
| const run = () => { | ||
| const containerHeight = panelRef.getBoundingClientRect().height; | ||
| if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.style.paddingBottom = `${containerHeight}px`; | ||
| return prev; | ||
| }); | ||
| }; | ||
| run(); | ||
| if (typeof window !== "undefined") { | ||
| window.addEventListener("resize", run); | ||
| return () => { | ||
| window.removeEventListener("resize", run); | ||
| if (rootEl()?.parentElement && typeof previousValue === "string") setRootEl((prev) => { | ||
| prev.parentElement.style.paddingBottom = previousValue; | ||
| return prev; | ||
| }); | ||
| }; | ||
| } | ||
| } else if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.removeAttribute("style"); | ||
| return prev; | ||
| }); | ||
| }); | ||
| createEffect(() => { | ||
| if (rootEl()) { | ||
| const el = rootEl(); | ||
| const fontSize = getComputedStyle(el).fontSize; | ||
| el?.style.setProperty("--tsrd-font-size", fontSize); | ||
| } | ||
| }); | ||
| const { style: panelStyle = {}, ...otherPanelProps } = panelProps; | ||
| const { style: closeButtonStyle = {}, onClick: onCloseClick, ...otherCloseButtonProps } = closeButtonProps; | ||
| const { onClick: onToggleClick, class: toggleButtonClassName, ...otherToggleButtonProps } = toggleButtonProps; | ||
| if (!isMounted()) return null; | ||
| const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500); | ||
| const basePanelClass = createMemo(() => { | ||
| return clsx(styles().devtoolsPanelContainer, styles().devtoolsPanelContainerVisibility(!!isOpen()), styles().devtoolsPanelContainerResizing(isResizing), styles().devtoolsPanelContainerAnimation(isResolvedOpen(), resolvedHeight() + 16)); | ||
| }); | ||
| const basePanelStyle = createMemo(() => { | ||
| return { | ||
| height: `${resolvedHeight()}px`, | ||
| ...panelStyle || {} | ||
| }; | ||
| }); | ||
| const buttonStyle = createMemo(() => { | ||
| return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(position), styles().mainCloseBtnAnimation(!!isOpen()), toggleButtonClassName); | ||
| }); | ||
| return createComponent(Dynamic, { | ||
| component: Container, | ||
| ref: setRootEl, | ||
| "class": "TanStackRouterDevtools", | ||
| get children() { | ||
| return [createComponent(DevtoolsOnCloseContext.Provider, { | ||
| value: { onCloseClick: onCloseClick ?? (() => {}) }, | ||
| get children() { | ||
| return createComponent(BaseTanStackRouterDevtoolsPanel, mergeProps({ ref(r$) { | ||
| var _ref$ = panelRef; | ||
| typeof _ref$ === "function" ? _ref$(r$) : panelRef = r$; | ||
| } }, otherPanelProps, { | ||
| router, | ||
| routerState, | ||
| className: basePanelClass, | ||
| style: basePanelStyle, | ||
| get isOpen() { | ||
| return isResolvedOpen(); | ||
| }, | ||
| setIsOpen, | ||
| handleDragStart: (e) => handleDragStart(panelRef, e), | ||
| shadowDOMTarget | ||
| })); | ||
| } | ||
| }), (() => { | ||
| var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.nextSibling; | ||
| spread(_el$, mergeProps(otherToggleButtonProps, { | ||
| "aria-label": "Open TanStack Router Devtools", | ||
| "onClick": (e) => { | ||
| setIsOpen(true); | ||
| onToggleClick && onToggleClick(e); | ||
| }, | ||
| get ["class"]() { | ||
| return buttonStyle(); | ||
| } | ||
| }), false, true); | ||
| insert(_el$3, createComponent(TanStackLogo, {})); | ||
| insert(_el$4, createComponent(TanStackLogo, {})); | ||
| createRenderEffect((_p$) => { | ||
| var _v$ = styles().mainCloseBtnIconContainer, _v$2 = styles().mainCloseBtnIconOuter, _v$3 = styles().mainCloseBtnIconInner, _v$4 = styles().mainCloseBtnDivider, _v$5 = styles().routerLogoCloseButton; | ||
| _v$ !== _p$.e && className(_el$2, _p$.e = _v$); | ||
| _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2); | ||
| _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3); | ||
| _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4); | ||
| _v$5 !== _p$.i && className(_el$6, _p$.i = _v$5); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0 | ||
| }); | ||
| return _el$; | ||
| })()]; | ||
| } | ||
| }); | ||
| } | ||
| //#endregion | ||
| export { FloatingTanStackRouterDevtools, FloatingTanStackRouterDevtools as default }; | ||
| //# sourceMappingURL=FloatingTanStackRouterDevtools-B12ktJLj.js.map |
| {"version":3,"file":"FloatingTanStackRouterDevtools-B12ktJLj.js","names":["createUniqueId","TanStackLogo","id","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_el$24","_el$25","_el$26","_el$27","_el$28","_el$29","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$41","_el$42","_el$43","_el$44","_el$45","_el$46","_el$47","_el$48","_el$49","_el$50","_el$51","_el$52","_el$53","_el$54","_el$55","_el$56","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$67","_el$68","_el$69","_el$70","_el$71","_el$72","_el$73","_el$74","_el$75","_el$76","_el$77","_el$78","_el$79","_el$80","_el$81","_el$82","_el$83","_el$84","_el$85","_el$86","_el$87","_el$88","_el$89","_$setAttribute","clsx","cx","createEffect","createMemo","createSignal","Dynamic","DevtoolsOnCloseContext","useIsMounted","BaseTanStackRouterDevtoolsPanel","useLocalStorage","TanStackLogo","useStyles","Accessor","JSX","AnyRouter","FloatingDevtoolsOptions","initialIsOpen","panelProps","ref","closeButtonProps","toggleButtonProps","position","containerElement","router","routerState","shadowDOMTarget","ShadowRoot","FloatingTanStackRouterDevtools","Container","Element","rootEl","setRootEl","HTMLDivElement","panelRef","undefined","isOpen","setIsOpen","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","styles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","MouseEvent","delta","newHeight","unsub","document","removeEventListener","addEventListener","isButtonClosed","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","Record","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","basePanelClass","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","component","children","Provider","value","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$spread","_$insert","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"sources":["../src/logo.tsx","../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { createUniqueId } from 'solid-js'\n\nexport function TanStackLogo() {\n const id = createUniqueId()\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enable-background=\"new 0 0 634 633\"\n viewBox=\"0 0 634 633\"\n >\n <g transform=\"translate(1)\">\n <linearGradient\n id={`a-${id}`}\n x1=\"-641.486\"\n x2=\"-641.486\"\n y1=\"856.648\"\n y2=\"855.931\"\n gradientTransform=\"matrix(633 0 0 -633 406377 542258)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#6bdaff\"></stop>\n <stop offset=\"0.319\" stop-color=\"#f9ffb5\"></stop>\n <stop offset=\"0.706\" stop-color=\"#ffa770\"></stop>\n <stop offset=\"1\" stop-color=\"#ff7373\"></stop>\n </linearGradient>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill={`url(#a-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <defs>\n <filter\n id={`b-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`c-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#b-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#c-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`d-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`e-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#d-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#e-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`f-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`g-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#f-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#g-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`h-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`i-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#h-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#i-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`j-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`k-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#j-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#k-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`l-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`m-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#l-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#m-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`n-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`o-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#n-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#o-${id})`}>\n <path\n fill=\"none\"\n stroke=\"#000\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"11\"\n d=\"M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1\"\n ></path>\n <linearGradient\n id={`p-${id}`}\n x1=\"-645.656\"\n x2=\"-646.499\"\n y1=\"854.878\"\n y2=\"854.788\"\n gradientTransform=\"matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ee2700\"></stop>\n <stop offset=\"1\" stop-color=\"#ff008e\"></stop>\n </linearGradient>\n <path\n fill={`url(#p-${id})`}\n fill-rule=\"evenodd\"\n d=\"M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"#D8D8D8\"\n fill-rule=\"evenodd\"\n stroke=\"#FFF\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"7\"\n d=\"M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9\"\n clip-rule=\"evenodd\"\n ></path>\n </g>\n <defs>\n <filter\n id={`q-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`r-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#q-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#r-${id})`}>\n <linearGradient\n id={`s-${id}`}\n x1=\"-646.8\"\n x2=\"-646.8\"\n y1=\"854.844\"\n y2=\"853.844\"\n gradientTransform=\"matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#a17500\"></stop>\n <stop offset=\"1\" stop-color=\"#5d2100\"></stop>\n </linearGradient>\n <path\n fill={`url(#s-${id})`}\n fill-rule=\"evenodd\"\n d=\"M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`t-${id}`}\n x1=\"-635.467\"\n x2=\"-635.467\"\n y1=\"852.115\"\n y2=\"851.115\"\n gradientTransform=\"matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#t-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`u-${id}`}\n x1=\"-636.573\"\n x2=\"-636.573\"\n y1=\"855.444\"\n y2=\"854.444\"\n gradientTransform=\"matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#u-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`v-${id}`}\n x1=\"-632.145\"\n x2=\"-632.145\"\n y1=\"854.174\"\n y2=\"853.174\"\n gradientTransform=\"matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#v-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`w-${id}`}\n x1=\"-638.224\"\n x2=\"-638.224\"\n y1=\"853.801\"\n y2=\"852.801\"\n gradientTransform=\"matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#w-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`x-${id}`}\n x1=\"-637.723\"\n x2=\"-637.723\"\n y1=\"855.103\"\n y2=\"854.103\"\n gradientTransform=\"matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#x-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`y-${id}`}\n x1=\"-631.79\"\n x2=\"-631.79\"\n y1=\"855.872\"\n y2=\"854.872\"\n gradientTransform=\"matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#y-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32\"\n ></path>\n </g>\n <defs>\n <filter\n id={`z-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`A-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#z-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <linearGradient\n id={`B-${id}`}\n x1=\"-641.104\"\n x2=\"-641.278\"\n y1=\"856.577\"\n y2=\"856.183\"\n gradientTransform=\"matrix(532 0 0 -633 341484.5 542657)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#fff400\"></stop>\n <stop offset=\"1\" stop-color=\"#3c8700\"></stop>\n </linearGradient>\n <ellipse\n cx=\"316.5\"\n cy=\"715.5\"\n fill={`url(#B-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n mask={`url(#A-${id})`}\n rx=\"266\"\n ry=\"316.5\"\n ></ellipse>\n <defs>\n <filter\n id={`C-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`D-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#C-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#D-${id})`}>\n <g transform=\"translate(397 -24)\">\n <linearGradient\n id={`E-${id}`}\n x1=\"-1036.672\"\n x2=\"-1036.672\"\n y1=\"880.018\"\n y2=\"879.018\"\n gradientTransform=\"matrix(227 0 0 -227 235493 199764)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffdf00\"></stop>\n <stop offset=\"1\" stop-color=\"#ff9d00\"></stop>\n </linearGradient>\n <circle\n cx=\"168.5\"\n cy=\"113.5\"\n r=\"113.5\"\n fill={`url(#E-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <linearGradient\n id={`F-${id}`}\n x1=\"-1017.329\"\n x2=\"-1018.602\"\n y1=\"658.003\"\n y2=\"657.998\"\n gradientTransform=\"matrix(30 0 0 -1 30558 771)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#F-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M30 113H0\"\n ></path>\n <linearGradient\n id={`G-${id}`}\n x1=\"-1014.501\"\n x2=\"-1015.774\"\n y1=\"839.985\"\n y2=\"839.935\"\n gradientTransform=\"matrix(26.5 0 0 -5.5 26925 4696.5)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#G-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M33.5 79.5L7 74\"\n ></path>\n <linearGradient\n id={`H-${id}`}\n x1=\"-1016.59\"\n x2=\"-1017.862\"\n y1=\"852.671\"\n y2=\"852.595\"\n gradientTransform=\"matrix(29 0 0 -8 29523 6971)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#H-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M34 146l-29 8\"\n ></path>\n <linearGradient\n id={`I-${id}`}\n x1=\"-1011.984\"\n x2=\"-1013.257\"\n y1=\"863.523\"\n y2=\"863.229\"\n gradientTransform=\"matrix(24 0 0 -13 24339 11407)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#I-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M45 177l-24 13\"\n ></path>\n <linearGradient\n id={`J-${id}`}\n x1=\"-1006.673\"\n x2=\"-1007.946\"\n y1=\"869.279\"\n y2=\"868.376\"\n gradientTransform=\"matrix(20 0 0 -19 20205 16720)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#J-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M67 204l-20 19\"\n ></path>\n <linearGradient\n id={`K-${id}`}\n x1=\"-992.85\"\n x2=\"-993.317\"\n y1=\"871.258\"\n y2=\"870.258\"\n gradientTransform=\"matrix(13.8339 0 0 -22.8467 13825.796 20131.938)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#K-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M94.4 227l-13.8 22.8\"\n ></path>\n <linearGradient\n id={`L-${id}`}\n x1=\"-953.835\"\n x2=\"-953.965\"\n y1=\"871.9\"\n y2=\"870.9\"\n gradientTransform=\"matrix(7.5 0 0 -24.5 7278 21605)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#L-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M127.5 243.5L120 268\"\n ></path>\n <linearGradient\n id={`M-${id}`}\n x1=\"244.504\"\n x2=\"244.496\"\n y1=\"871.898\"\n y2=\"870.898\"\n gradientTransform=\"matrix(.5 0 0 -24.5 45.5 21614)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#M-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M167.5 252.5l.5 24.5\"\n ></path>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n","import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n */\n panelProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: any & {\n ref?: any\n }\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router: Accessor<AnyRouter>\n routerState: Accessor<any>\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n initialIsOpen,\n panelProps = {},\n closeButtonProps = {},\n toggleButtonProps = {},\n position = 'bottom-left',\n containerElement: Container = 'footer',\n router,\n routerState,\n shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n // eslint-disable-next-line prefer-const\n let panelRef: HTMLDivElement | undefined = undefined\n\n const [isOpen, setIsOpen] = useLocalStorage(\n 'tanstackRouterDevtoolsOpen',\n initialIsOpen,\n )\n\n const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n 'tanstackRouterDevtoolsHeight',\n null,\n )\n\n const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n const [isResizing, setIsResizing] = createSignal(false)\n const isMounted = useIsMounted()\n const styles = useStyles()\n\n const handleDragStart = (\n panelElement: HTMLDivElement | undefined,\n startEvent: any,\n ) => {\n if (startEvent.button !== 0) return // Only allow left click for drag\n\n setIsResizing(true)\n\n const dragInfo = {\n originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n pageY: startEvent.pageY,\n }\n\n const run = (moveEvent: MouseEvent) => {\n const delta = dragInfo.pageY - moveEvent.pageY\n const newHeight = dragInfo.originalHeight + delta\n\n setDevtoolsHeight(newHeight)\n\n if (newHeight < 70) {\n setIsOpen(false)\n } else {\n setIsOpen(true)\n }\n }\n\n const unsub = () => {\n setIsResizing(false)\n document.removeEventListener('mousemove', run)\n document.removeEventListener('mouseUp', unsub)\n }\n\n document.addEventListener('mousemove', run)\n document.addEventListener('mouseup', unsub)\n }\n\n const isButtonClosed = isOpen() ?? false\n\n createEffect(() => {\n setIsResolvedOpen(isOpen() ?? false)\n })\n\n createEffect(() => {\n if (isResolvedOpen()) {\n const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n const run = () => {\n const containerHeight = panelRef!.getBoundingClientRect().height\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.style.paddingBottom = `${containerHeight}px`\n }\n return prev\n })\n }\n }\n\n run()\n\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', run)\n\n return () => {\n window.removeEventListener('resize', run)\n if (rootEl()?.parentElement && typeof previousValue === 'string') {\n setRootEl((prev) => {\n prev!.parentElement!.style.paddingBottom = previousValue\n return prev\n })\n }\n }\n }\n } else {\n // Reset padding when devtools are closed\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.removeAttribute('style')\n }\n return prev\n })\n }\n }\n return\n })\n\n createEffect(() => {\n if (rootEl()) {\n const el = rootEl()\n const fontSize = getComputedStyle(el!).fontSize\n el?.style.setProperty('--tsrd-font-size', fontSize)\n }\n })\n\n const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n style?: Record<string, any>\n }\n\n const {\n style: closeButtonStyle = {},\n onClick: onCloseClick,\n ...otherCloseButtonProps\n } = closeButtonProps\n\n const {\n onClick: onToggleClick,\n class: toggleButtonClassName,\n ...otherToggleButtonProps\n } = toggleButtonProps\n\n // Do not render on the server\n if (!isMounted()) return null\n\n const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n const basePanelClass = createMemo(() => {\n return cx(\n styles().devtoolsPanelContainer,\n styles().devtoolsPanelContainerVisibility(!!isOpen()),\n styles().devtoolsPanelContainerResizing(isResizing),\n styles().devtoolsPanelContainerAnimation(\n isResolvedOpen(),\n resolvedHeight() + 16,\n ),\n )\n })\n\n const basePanelStyle = createMemo(() => {\n return {\n height: `${resolvedHeight()}px`,\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n ...(panelStyle || {}),\n }\n })\n\n const buttonStyle = createMemo(() => {\n return cx(\n styles().mainCloseBtn,\n styles().mainCloseBtnPosition(position),\n styles().mainCloseBtnAnimation(!!isOpen()),\n toggleButtonClassName,\n )\n })\n\n return (\n <Dynamic\n component={Container}\n ref={setRootEl}\n class=\"TanStackRouterDevtools\"\n >\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: onCloseClick ?? (() => {}),\n }}\n >\n {/* {router() ? ( */}\n <BaseTanStackRouterDevtoolsPanel\n ref={panelRef}\n {...otherPanelProps}\n router={router}\n routerState={routerState}\n className={basePanelClass}\n style={basePanelStyle}\n isOpen={isResolvedOpen()}\n setIsOpen={setIsOpen}\n handleDragStart={(e) => handleDragStart(panelRef, e)}\n shadowDOMTarget={shadowDOMTarget}\n />\n {/* ) : (\n <p>No router</p>\n )} */}\n </DevtoolsOnCloseContext.Provider>\n\n <button\n type=\"button\"\n {...otherToggleButtonProps}\n aria-label=\"Open TanStack Router Devtools\"\n onClick={(e) => {\n setIsOpen(true)\n onToggleClick && onToggleClick(e)\n }}\n class={buttonStyle()}\n >\n <div class={styles().mainCloseBtnIconContainer}>\n <div class={styles().mainCloseBtnIconOuter}>\n <TanStackLogo />\n </div>\n <div class={styles().mainCloseBtnIconInner}>\n <TanStackLogo />\n </div>\n </div>\n <div class={styles().mainCloseBtnDivider}>-</div>\n <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n </button>\n </Dynamic>\n )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"mappings":"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"} |
| const require_context = require("./context-DZa5WwQ_.cjs"); | ||
| const require_BaseTanStackRouterDevtoolsPanel = require("./BaseTanStackRouterDevtoolsPanel-DdB0IT5G.cjs"); | ||
| let clsx = require("clsx"); | ||
| //#region src/logo.tsx | ||
| var _tmpl$$1 = /* @__PURE__ */ require_context.template(`<svg xmlns=http://www.w3.org/2000/svg enable-background="new 0 0 634 633"viewBox="0 0 634 633"><g transform=translate(1)><linearGradient x1=-641.486 x2=-641.486 y1=856.648 y2=855.931 gradientTransform="matrix(633 0 0 -633 406377 542258)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#6bdaff></stop><stop offset=0.319 stop-color=#f9ffb5></stop><stop offset=0.706 stop-color=#ffa770></stop><stop offset=1 stop-color=#ff7373></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5 fill-rule=evenodd clip-rule=evenodd></circle><defs><filter width=454 height=396.9 x=-137.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=176.9 height=129.3 x=272.2 y=308 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=176.9 height=129.3 x=272.2 y=308 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><path fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11 d="M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1"></path><linearGradient x1=-645.656 x2=-646.499 y1=854.878 y2=854.788 gradientTransform="matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ee2700></stop><stop offset=1 stop-color=#ff008e></stop></linearGradient><path fill-rule=evenodd d="M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd></path><path fill=#D8D8D8 fill-rule=evenodd stroke=#FFF stroke-linecap=round stroke-linejoin=bevel stroke-width=7 d="M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9"clip-rule=evenodd></path></g><defs><filter width=280.6 height=317.4 x=73.2 y=113.9 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=280.6 height=317.4 x=73.2 y=113.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><linearGradient x1=-646.8 x2=-646.8 y1=854.844 y2=853.844 gradientTransform="matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#a17500></stop><stop offset=1 stop-color=#5d2100></stop></linearGradient><path fill-rule=evenodd d="M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6"clip-rule=evenodd></path><linearGradient x1=-635.467 x2=-635.467 y1=852.115 y2=851.115 gradientTransform="matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd></path><linearGradient x1=-636.573 x2=-636.573 y1=855.444 y2=854.444 gradientTransform="matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z"clip-rule=evenodd></path><linearGradient x1=-632.145 x2=-632.145 y1=854.174 y2=853.174 gradientTransform="matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z"clip-rule=evenodd></path><linearGradient x1=-638.224 x2=-638.224 y1=853.801 y2=852.801 gradientTransform="matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd></path><linearGradient x1=-637.723 x2=-637.723 y1=855.103 y2=854.103 gradientTransform="matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z"clip-rule=evenodd></path><linearGradient x1=-631.79 x2=-631.79 y1=855.872 y2=854.872 gradientTransform="matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z"clip-rule=evenodd></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1"></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32"></path></g><defs><filter width=532 height=633 x=50.5 y=399 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=532 height=633 x=50.5 y=399 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><linearGradient x1=-641.104 x2=-641.278 y1=856.577 y2=856.183 gradientTransform="matrix(532 0 0 -633 341484.5 542657)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#fff400></stop><stop offset=1 stop-color=#3c8700></stop></linearGradient><ellipse cx=316.5 cy=715.5 fill-rule=evenodd clip-rule=evenodd rx=266 ry=316.5></ellipse><defs><filter width=288 height=283 x=391 y=-24 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=288 height=283 x=391 y=-24 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><g transform="translate(397 -24)"><linearGradient x1=-1036.672 x2=-1036.672 y1=880.018 y2=879.018 gradientTransform="matrix(227 0 0 -227 235493 199764)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffdf00></stop><stop offset=1 stop-color=#ff9d00></stop></linearGradient><circle cx=168.5 cy=113.5 r=113.5 fill-rule=evenodd clip-rule=evenodd></circle><linearGradient x1=-1017.329 x2=-1018.602 y1=658.003 y2=657.998 gradientTransform="matrix(30 0 0 -1 30558 771)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M30 113H0"></path><linearGradient x1=-1014.501 x2=-1015.774 y1=839.985 y2=839.935 gradientTransform="matrix(26.5 0 0 -5.5 26925 4696.5)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M33.5 79.5L7 74"></path><linearGradient x1=-1016.59 x2=-1017.862 y1=852.671 y2=852.595 gradientTransform="matrix(29 0 0 -8 29523 6971)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M34 146l-29 8"></path><linearGradient x1=-1011.984 x2=-1013.257 y1=863.523 y2=863.229 gradientTransform="matrix(24 0 0 -13 24339 11407)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M45 177l-24 13"></path><linearGradient x1=-1006.673 x2=-1007.946 y1=869.279 y2=868.376 gradientTransform="matrix(20 0 0 -19 20205 16720)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M67 204l-20 19"></path><linearGradient x1=-992.85 x2=-993.317 y1=871.258 y2=870.258 gradientTransform="matrix(13.8339 0 0 -22.8467 13825.796 20131.938)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M94.4 227l-13.8 22.8"></path><linearGradient x1=-953.835 x2=-953.965 y1=871.9 y2=870.9 gradientTransform="matrix(7.5 0 0 -24.5 7278 21605)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M127.5 243.5L120 268"></path><linearGradient x1=244.504 x2=244.496 y1=871.898 y2=870.898 gradientTransform="matrix(.5 0 0 -24.5 45.5 21614)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M167.5 252.5l.5 24.5">`); | ||
| function TanStackLogo() { | ||
| const id = require_context.createUniqueId(); | ||
| return (() => { | ||
| var _el$ = _tmpl$$1(), _el$3 = _el$.firstChild.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$13.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$39 = _el$37.firstChild.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$37.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$47.nextSibling, _el$49 = _el$48.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling, _el$60 = _el$45.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$60.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$65.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$72 = _el$70.firstChild.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling; | ||
| require_context.setAttribute(_el$3, "id", `a-${id}`); | ||
| require_context.setAttribute(_el$4, "fill", `url(#a-${id})`); | ||
| require_context.setAttribute(_el$6, "id", `b-${id}`); | ||
| require_context.setAttribute(_el$7, "id", `c-${id}`); | ||
| require_context.setAttribute(_el$8, "filter", `url(#b-${id})`); | ||
| require_context.setAttribute(_el$9, "mask", `url(#c-${id})`); | ||
| require_context.setAttribute(_el$1, "id", `d-${id}`); | ||
| require_context.setAttribute(_el$10, "id", `e-${id}`); | ||
| require_context.setAttribute(_el$11, "filter", `url(#d-${id})`); | ||
| require_context.setAttribute(_el$12, "mask", `url(#e-${id})`); | ||
| require_context.setAttribute(_el$14, "id", `f-${id}`); | ||
| require_context.setAttribute(_el$15, "id", `g-${id}`); | ||
| require_context.setAttribute(_el$16, "filter", `url(#f-${id})`); | ||
| require_context.setAttribute(_el$17, "mask", `url(#g-${id})`); | ||
| require_context.setAttribute(_el$19, "id", `h-${id}`); | ||
| require_context.setAttribute(_el$20, "id", `i-${id}`); | ||
| require_context.setAttribute(_el$21, "filter", `url(#h-${id})`); | ||
| require_context.setAttribute(_el$22, "mask", `url(#i-${id})`); | ||
| require_context.setAttribute(_el$24, "id", `j-${id}`); | ||
| require_context.setAttribute(_el$25, "id", `k-${id}`); | ||
| require_context.setAttribute(_el$26, "filter", `url(#j-${id})`); | ||
| require_context.setAttribute(_el$27, "mask", `url(#k-${id})`); | ||
| require_context.setAttribute(_el$29, "id", `l-${id}`); | ||
| require_context.setAttribute(_el$30, "id", `m-${id}`); | ||
| require_context.setAttribute(_el$31, "filter", `url(#l-${id})`); | ||
| require_context.setAttribute(_el$32, "mask", `url(#m-${id})`); | ||
| require_context.setAttribute(_el$34, "id", `n-${id}`); | ||
| require_context.setAttribute(_el$35, "id", `o-${id}`); | ||
| require_context.setAttribute(_el$36, "filter", `url(#n-${id})`); | ||
| require_context.setAttribute(_el$37, "mask", `url(#o-${id})`); | ||
| require_context.setAttribute(_el$39, "id", `p-${id}`); | ||
| require_context.setAttribute(_el$40, "fill", `url(#p-${id})`); | ||
| require_context.setAttribute(_el$42, "id", `q-${id}`); | ||
| require_context.setAttribute(_el$43, "id", `r-${id}`); | ||
| require_context.setAttribute(_el$44, "filter", `url(#q-${id})`); | ||
| require_context.setAttribute(_el$45, "mask", `url(#r-${id})`); | ||
| require_context.setAttribute(_el$46, "id", `s-${id}`); | ||
| require_context.setAttribute(_el$47, "fill", `url(#s-${id})`); | ||
| require_context.setAttribute(_el$48, "id", `t-${id}`); | ||
| require_context.setAttribute(_el$49, "fill", `url(#t-${id})`); | ||
| require_context.setAttribute(_el$50, "id", `u-${id}`); | ||
| require_context.setAttribute(_el$51, "fill", `url(#u-${id})`); | ||
| require_context.setAttribute(_el$52, "id", `v-${id}`); | ||
| require_context.setAttribute(_el$53, "fill", `url(#v-${id})`); | ||
| require_context.setAttribute(_el$54, "id", `w-${id}`); | ||
| require_context.setAttribute(_el$55, "fill", `url(#w-${id})`); | ||
| require_context.setAttribute(_el$56, "id", `x-${id}`); | ||
| require_context.setAttribute(_el$57, "fill", `url(#x-${id})`); | ||
| require_context.setAttribute(_el$58, "id", `y-${id}`); | ||
| require_context.setAttribute(_el$59, "fill", `url(#y-${id})`); | ||
| require_context.setAttribute(_el$61, "id", `z-${id}`); | ||
| require_context.setAttribute(_el$62, "id", `A-${id}`); | ||
| require_context.setAttribute(_el$63, "filter", `url(#z-${id})`); | ||
| require_context.setAttribute(_el$64, "id", `B-${id}`); | ||
| require_context.setAttribute(_el$65, "fill", `url(#B-${id})`); | ||
| require_context.setAttribute(_el$65, "mask", `url(#A-${id})`); | ||
| require_context.setAttribute(_el$67, "id", `C-${id}`); | ||
| require_context.setAttribute(_el$68, "id", `D-${id}`); | ||
| require_context.setAttribute(_el$69, "filter", `url(#C-${id})`); | ||
| require_context.setAttribute(_el$70, "mask", `url(#D-${id})`); | ||
| require_context.setAttribute(_el$72, "id", `E-${id}`); | ||
| require_context.setAttribute(_el$73, "fill", `url(#E-${id})`); | ||
| require_context.setAttribute(_el$74, "id", `F-${id}`); | ||
| require_context.setAttribute(_el$75, "stroke", `url(#F-${id})`); | ||
| require_context.setAttribute(_el$76, "id", `G-${id}`); | ||
| require_context.setAttribute(_el$77, "stroke", `url(#G-${id})`); | ||
| require_context.setAttribute(_el$78, "id", `H-${id}`); | ||
| require_context.setAttribute(_el$79, "stroke", `url(#H-${id})`); | ||
| require_context.setAttribute(_el$80, "id", `I-${id}`); | ||
| require_context.setAttribute(_el$81, "stroke", `url(#I-${id})`); | ||
| require_context.setAttribute(_el$82, "id", `J-${id}`); | ||
| require_context.setAttribute(_el$83, "stroke", `url(#J-${id})`); | ||
| require_context.setAttribute(_el$84, "id", `K-${id}`); | ||
| require_context.setAttribute(_el$85, "stroke", `url(#K-${id})`); | ||
| require_context.setAttribute(_el$86, "id", `L-${id}`); | ||
| require_context.setAttribute(_el$87, "stroke", `url(#L-${id})`); | ||
| require_context.setAttribute(_el$88, "id", `M-${id}`); | ||
| require_context.setAttribute(_el$89, "stroke", `url(#M-${id})`); | ||
| return _el$; | ||
| })(); | ||
| } | ||
| //#endregion | ||
| //#region src/FloatingTanStackRouterDevtools.tsx | ||
| var _tmpl$ = /* @__PURE__ */ require_context.template(`<button type=button><div><div></div><div></div></div><div>-</div><div>TanStack Router`); | ||
| function FloatingTanStackRouterDevtools({ initialIsOpen, panelProps = {}, closeButtonProps = {}, toggleButtonProps = {}, position = "bottom-left", containerElement: Container = "footer", router, routerState, shadowDOMTarget }) { | ||
| const [rootEl, setRootEl] = require_context.createSignal(); | ||
| let panelRef = void 0; | ||
| const [isOpen, setIsOpen] = require_BaseTanStackRouterDevtoolsPanel.useLocalStorage("tanstackRouterDevtoolsOpen", initialIsOpen); | ||
| const [devtoolsHeight, setDevtoolsHeight] = require_BaseTanStackRouterDevtoolsPanel.useLocalStorage("tanstackRouterDevtoolsHeight", null); | ||
| const [isResolvedOpen, setIsResolvedOpen] = require_context.createSignal(false); | ||
| const [isResizing, setIsResizing] = require_context.createSignal(false); | ||
| const isMounted = require_BaseTanStackRouterDevtoolsPanel.useIsMounted(); | ||
| const styles = require_BaseTanStackRouterDevtoolsPanel.useStyles(); | ||
| const handleDragStart = (panelElement, startEvent) => { | ||
| if (startEvent.button !== 0) return; | ||
| setIsResizing(true); | ||
| const dragInfo = { | ||
| originalHeight: panelElement?.getBoundingClientRect().height ?? 0, | ||
| pageY: startEvent.pageY | ||
| }; | ||
| const run = (moveEvent) => { | ||
| const delta = dragInfo.pageY - moveEvent.pageY; | ||
| const newHeight = dragInfo.originalHeight + delta; | ||
| setDevtoolsHeight(newHeight); | ||
| if (newHeight < 70) setIsOpen(false); | ||
| else setIsOpen(true); | ||
| }; | ||
| const unsub = () => { | ||
| setIsResizing(false); | ||
| document.removeEventListener("mousemove", run); | ||
| document.removeEventListener("mouseUp", unsub); | ||
| }; | ||
| document.addEventListener("mousemove", run); | ||
| document.addEventListener("mouseup", unsub); | ||
| }; | ||
| isOpen(); | ||
| require_context.createEffect(() => { | ||
| setIsResolvedOpen(isOpen() ?? false); | ||
| }); | ||
| require_context.createEffect(() => { | ||
| if (isResolvedOpen()) { | ||
| const previousValue = rootEl()?.parentElement?.style.paddingBottom; | ||
| const run = () => { | ||
| const containerHeight = panelRef.getBoundingClientRect().height; | ||
| if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.style.paddingBottom = `${containerHeight}px`; | ||
| return prev; | ||
| }); | ||
| }; | ||
| run(); | ||
| if (typeof window !== "undefined") { | ||
| window.addEventListener("resize", run); | ||
| return () => { | ||
| window.removeEventListener("resize", run); | ||
| if (rootEl()?.parentElement && typeof previousValue === "string") setRootEl((prev) => { | ||
| prev.parentElement.style.paddingBottom = previousValue; | ||
| return prev; | ||
| }); | ||
| }; | ||
| } | ||
| } else if (rootEl()?.parentElement) setRootEl((prev) => { | ||
| if (prev?.parentElement) prev.parentElement.removeAttribute("style"); | ||
| return prev; | ||
| }); | ||
| }); | ||
| require_context.createEffect(() => { | ||
| if (rootEl()) { | ||
| const el = rootEl(); | ||
| const fontSize = getComputedStyle(el).fontSize; | ||
| el?.style.setProperty("--tsrd-font-size", fontSize); | ||
| } | ||
| }); | ||
| const { style: panelStyle = {}, ...otherPanelProps } = panelProps; | ||
| const { style: closeButtonStyle = {}, onClick: onCloseClick, ...otherCloseButtonProps } = closeButtonProps; | ||
| const { onClick: onToggleClick, class: toggleButtonClassName, ...otherToggleButtonProps } = toggleButtonProps; | ||
| if (!isMounted()) return null; | ||
| const resolvedHeight = require_context.createMemo(() => devtoolsHeight() ?? 500); | ||
| const basePanelClass = require_context.createMemo(() => { | ||
| return (0, clsx.clsx)(styles().devtoolsPanelContainer, styles().devtoolsPanelContainerVisibility(!!isOpen()), styles().devtoolsPanelContainerResizing(isResizing), styles().devtoolsPanelContainerAnimation(isResolvedOpen(), resolvedHeight() + 16)); | ||
| }); | ||
| const basePanelStyle = require_context.createMemo(() => { | ||
| return { | ||
| height: `${resolvedHeight()}px`, | ||
| ...panelStyle || {} | ||
| }; | ||
| }); | ||
| const buttonStyle = require_context.createMemo(() => { | ||
| return (0, clsx.clsx)(styles().mainCloseBtn, styles().mainCloseBtnPosition(position), styles().mainCloseBtnAnimation(!!isOpen()), toggleButtonClassName); | ||
| }); | ||
| return require_context.createComponent(require_context.Dynamic, { | ||
| component: Container, | ||
| ref: setRootEl, | ||
| "class": "TanStackRouterDevtools", | ||
| get children() { | ||
| return [require_context.createComponent(require_context.DevtoolsOnCloseContext.Provider, { | ||
| value: { onCloseClick: onCloseClick ?? (() => {}) }, | ||
| get children() { | ||
| return require_context.createComponent(require_BaseTanStackRouterDevtoolsPanel.BaseTanStackRouterDevtoolsPanel, require_context.mergeProps({ ref(r$) { | ||
| var _ref$ = panelRef; | ||
| typeof _ref$ === "function" ? _ref$(r$) : panelRef = r$; | ||
| } }, otherPanelProps, { | ||
| router, | ||
| routerState, | ||
| className: basePanelClass, | ||
| style: basePanelStyle, | ||
| get isOpen() { | ||
| return isResolvedOpen(); | ||
| }, | ||
| setIsOpen, | ||
| handleDragStart: (e) => handleDragStart(panelRef, e), | ||
| shadowDOMTarget | ||
| })); | ||
| } | ||
| }), (() => { | ||
| var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.nextSibling; | ||
| require_context.spread(_el$, require_context.mergeProps(otherToggleButtonProps, { | ||
| "aria-label": "Open TanStack Router Devtools", | ||
| "onClick": (e) => { | ||
| setIsOpen(true); | ||
| onToggleClick && onToggleClick(e); | ||
| }, | ||
| get ["class"]() { | ||
| return buttonStyle(); | ||
| } | ||
| }), false, true); | ||
| require_context.insert(_el$3, require_context.createComponent(TanStackLogo, {})); | ||
| require_context.insert(_el$4, require_context.createComponent(TanStackLogo, {})); | ||
| require_context.createRenderEffect((_p$) => { | ||
| var _v$ = styles().mainCloseBtnIconContainer, _v$2 = styles().mainCloseBtnIconOuter, _v$3 = styles().mainCloseBtnIconInner, _v$4 = styles().mainCloseBtnDivider, _v$5 = styles().routerLogoCloseButton; | ||
| _v$ !== _p$.e && require_context.className(_el$2, _p$.e = _v$); | ||
| _v$2 !== _p$.t && require_context.className(_el$3, _p$.t = _v$2); | ||
| _v$3 !== _p$.a && require_context.className(_el$4, _p$.a = _v$3); | ||
| _v$4 !== _p$.o && require_context.className(_el$5, _p$.o = _v$4); | ||
| _v$5 !== _p$.i && require_context.className(_el$6, _p$.i = _v$5); | ||
| return _p$; | ||
| }, { | ||
| e: void 0, | ||
| t: void 0, | ||
| a: void 0, | ||
| o: void 0, | ||
| i: void 0 | ||
| }); | ||
| return _el$; | ||
| })()]; | ||
| } | ||
| }); | ||
| } | ||
| //#endregion | ||
| exports.FloatingTanStackRouterDevtools = FloatingTanStackRouterDevtools; | ||
| exports.default = FloatingTanStackRouterDevtools; | ||
| //# sourceMappingURL=FloatingTanStackRouterDevtools-TVrd9NKL.cjs.map |
| {"version":3,"file":"FloatingTanStackRouterDevtools-TVrd9NKL.cjs","names":["createUniqueId","TanStackLogo","id","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_el$24","_el$25","_el$26","_el$27","_el$28","_el$29","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$41","_el$42","_el$43","_el$44","_el$45","_el$46","_el$47","_el$48","_el$49","_el$50","_el$51","_el$52","_el$53","_el$54","_el$55","_el$56","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$67","_el$68","_el$69","_el$70","_el$71","_el$72","_el$73","_el$74","_el$75","_el$76","_el$77","_el$78","_el$79","_el$80","_el$81","_el$82","_el$83","_el$84","_el$85","_el$86","_el$87","_el$88","_el$89","_$setAttribute","clsx","cx","createEffect","createMemo","createSignal","Dynamic","DevtoolsOnCloseContext","useIsMounted","BaseTanStackRouterDevtoolsPanel","useLocalStorage","TanStackLogo","useStyles","Accessor","JSX","AnyRouter","FloatingDevtoolsOptions","initialIsOpen","panelProps","ref","closeButtonProps","toggleButtonProps","position","containerElement","router","routerState","shadowDOMTarget","ShadowRoot","FloatingTanStackRouterDevtools","Container","Element","rootEl","setRootEl","HTMLDivElement","panelRef","undefined","isOpen","setIsOpen","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","styles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","MouseEvent","delta","newHeight","unsub","document","removeEventListener","addEventListener","isButtonClosed","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","Record","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","basePanelClass","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","component","children","Provider","value","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$spread","_$insert","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"sources":["../src/logo.tsx","../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { createUniqueId } from 'solid-js'\n\nexport function TanStackLogo() {\n const id = createUniqueId()\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enable-background=\"new 0 0 634 633\"\n viewBox=\"0 0 634 633\"\n >\n <g transform=\"translate(1)\">\n <linearGradient\n id={`a-${id}`}\n x1=\"-641.486\"\n x2=\"-641.486\"\n y1=\"856.648\"\n y2=\"855.931\"\n gradientTransform=\"matrix(633 0 0 -633 406377 542258)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#6bdaff\"></stop>\n <stop offset=\"0.319\" stop-color=\"#f9ffb5\"></stop>\n <stop offset=\"0.706\" stop-color=\"#ffa770\"></stop>\n <stop offset=\"1\" stop-color=\"#ff7373\"></stop>\n </linearGradient>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill={`url(#a-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <defs>\n <filter\n id={`b-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`c-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#b-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#c-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`d-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`e-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"412\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#d-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"610.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00CFE2\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#e-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`f-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`g-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#f-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#g-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`h-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`i-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"450\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#h-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"648.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#00A8B8\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#i-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`j-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`k-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"-137.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#j-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"89.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#k-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`l-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`m-${id}`}\n width=\"454\"\n height=\"396.9\"\n x=\"316.5\"\n y=\"486\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#l-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <ellipse\n cx=\"543.5\"\n cy=\"684.5\"\n fill=\"#015064\"\n fill-rule=\"evenodd\"\n stroke=\"#007782\"\n stroke-width=\"25\"\n clip-rule=\"evenodd\"\n mask={`url(#m-${id})`}\n rx=\"214.5\"\n ry=\"186\"\n ></ellipse>\n <defs>\n <filter\n id={`n-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`o-${id}`}\n width=\"176.9\"\n height=\"129.3\"\n x=\"272.2\"\n y=\"308\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#n-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#o-${id})`}>\n <path\n fill=\"none\"\n stroke=\"#000\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"11\"\n d=\"M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1\"\n ></path>\n <linearGradient\n id={`p-${id}`}\n x1=\"-645.656\"\n x2=\"-646.499\"\n y1=\"854.878\"\n y2=\"854.788\"\n gradientTransform=\"matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ee2700\"></stop>\n <stop offset=\"1\" stop-color=\"#ff008e\"></stop>\n </linearGradient>\n <path\n fill={`url(#p-${id})`}\n fill-rule=\"evenodd\"\n d=\"M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"#D8D8D8\"\n fill-rule=\"evenodd\"\n stroke=\"#FFF\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"7\"\n d=\"M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9\"\n clip-rule=\"evenodd\"\n ></path>\n </g>\n <defs>\n <filter\n id={`q-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`r-${id}`}\n width=\"280.6\"\n height=\"317.4\"\n x=\"73.2\"\n y=\"113.9\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#q-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#r-${id})`}>\n <linearGradient\n id={`s-${id}`}\n x1=\"-646.8\"\n x2=\"-646.8\"\n y1=\"854.844\"\n y2=\"853.844\"\n gradientTransform=\"matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#a17500\"></stop>\n <stop offset=\"1\" stop-color=\"#5d2100\"></stop>\n </linearGradient>\n <path\n fill={`url(#s-${id})`}\n fill-rule=\"evenodd\"\n d=\"M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`t-${id}`}\n x1=\"-635.467\"\n x2=\"-635.467\"\n y1=\"852.115\"\n y2=\"851.115\"\n gradientTransform=\"matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#t-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`u-${id}`}\n x1=\"-636.573\"\n x2=\"-636.573\"\n y1=\"855.444\"\n y2=\"854.444\"\n gradientTransform=\"matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#u-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`v-${id}`}\n x1=\"-632.145\"\n x2=\"-632.145\"\n y1=\"854.174\"\n y2=\"853.174\"\n gradientTransform=\"matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#v-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`w-${id}`}\n x1=\"-638.224\"\n x2=\"-638.224\"\n y1=\"853.801\"\n y2=\"852.801\"\n gradientTransform=\"matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#w-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`x-${id}`}\n x1=\"-637.723\"\n x2=\"-637.723\"\n y1=\"855.103\"\n y2=\"854.103\"\n gradientTransform=\"matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#x-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z\"\n clip-rule=\"evenodd\"\n ></path>\n <linearGradient\n id={`y-${id}`}\n x1=\"-631.79\"\n x2=\"-631.79\"\n y1=\"855.872\"\n y2=\"854.872\"\n gradientTransform=\"matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n </linearGradient>\n <path\n fill={`url(#y-${id})`}\n fill-rule=\"evenodd\"\n stroke=\"#2F8A00\"\n stroke-width=\"13\"\n d=\"M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z\"\n clip-rule=\"evenodd\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1\"\n ></path>\n <path\n fill=\"none\"\n stroke=\"#2F8A00\"\n stroke-linecap=\"round\"\n stroke-width=\"8\"\n d=\"M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32\"\n ></path>\n </g>\n <defs>\n <filter\n id={`z-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`A-${id}`}\n width=\"532\"\n height=\"633\"\n x=\"50.5\"\n y=\"399\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#z-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <linearGradient\n id={`B-${id}`}\n x1=\"-641.104\"\n x2=\"-641.278\"\n y1=\"856.577\"\n y2=\"856.183\"\n gradientTransform=\"matrix(532 0 0 -633 341484.5 542657)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#fff400\"></stop>\n <stop offset=\"1\" stop-color=\"#3c8700\"></stop>\n </linearGradient>\n <ellipse\n cx=\"316.5\"\n cy=\"715.5\"\n fill={`url(#B-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n mask={`url(#A-${id})`}\n rx=\"266\"\n ry=\"316.5\"\n ></ellipse>\n <defs>\n <filter\n id={`C-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n filterUnits=\"userSpaceOnUse\"\n >\n <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n </filter>\n </defs>\n <mask\n id={`D-${id}`}\n width=\"288\"\n height=\"283\"\n x=\"391\"\n y=\"-24\"\n maskUnits=\"userSpaceOnUse\"\n >\n <g filter={`url(#C-${id})`}>\n <circle\n cx=\"316.5\"\n cy=\"316.5\"\n r=\"316.5\"\n fill=\"#FFF\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n </g>\n </mask>\n <g mask={`url(#D-${id})`}>\n <g transform=\"translate(397 -24)\">\n <linearGradient\n id={`E-${id}`}\n x1=\"-1036.672\"\n x2=\"-1036.672\"\n y1=\"880.018\"\n y2=\"879.018\"\n gradientTransform=\"matrix(227 0 0 -227 235493 199764)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffdf00\"></stop>\n <stop offset=\"1\" stop-color=\"#ff9d00\"></stop>\n </linearGradient>\n <circle\n cx=\"168.5\"\n cy=\"113.5\"\n r=\"113.5\"\n fill={`url(#E-${id})`}\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n ></circle>\n <linearGradient\n id={`F-${id}`}\n x1=\"-1017.329\"\n x2=\"-1018.602\"\n y1=\"658.003\"\n y2=\"657.998\"\n gradientTransform=\"matrix(30 0 0 -1 30558 771)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#F-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M30 113H0\"\n ></path>\n <linearGradient\n id={`G-${id}`}\n x1=\"-1014.501\"\n x2=\"-1015.774\"\n y1=\"839.985\"\n y2=\"839.935\"\n gradientTransform=\"matrix(26.5 0 0 -5.5 26925 4696.5)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#G-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M33.5 79.5L7 74\"\n ></path>\n <linearGradient\n id={`H-${id}`}\n x1=\"-1016.59\"\n x2=\"-1017.862\"\n y1=\"852.671\"\n y2=\"852.595\"\n gradientTransform=\"matrix(29 0 0 -8 29523 6971)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#H-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M34 146l-29 8\"\n ></path>\n <linearGradient\n id={`I-${id}`}\n x1=\"-1011.984\"\n x2=\"-1013.257\"\n y1=\"863.523\"\n y2=\"863.229\"\n gradientTransform=\"matrix(24 0 0 -13 24339 11407)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#I-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M45 177l-24 13\"\n ></path>\n <linearGradient\n id={`J-${id}`}\n x1=\"-1006.673\"\n x2=\"-1007.946\"\n y1=\"869.279\"\n y2=\"868.376\"\n gradientTransform=\"matrix(20 0 0 -19 20205 16720)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#J-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M67 204l-20 19\"\n ></path>\n <linearGradient\n id={`K-${id}`}\n x1=\"-992.85\"\n x2=\"-993.317\"\n y1=\"871.258\"\n y2=\"870.258\"\n gradientTransform=\"matrix(13.8339 0 0 -22.8467 13825.796 20131.938)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#K-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M94.4 227l-13.8 22.8\"\n ></path>\n <linearGradient\n id={`L-${id}`}\n x1=\"-953.835\"\n x2=\"-953.965\"\n y1=\"871.9\"\n y2=\"870.9\"\n gradientTransform=\"matrix(7.5 0 0 -24.5 7278 21605)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#L-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M127.5 243.5L120 268\"\n ></path>\n <linearGradient\n id={`M-${id}`}\n x1=\"244.504\"\n x2=\"244.496\"\n y1=\"871.898\"\n y2=\"870.898\"\n gradientTransform=\"matrix(.5 0 0 -24.5 45.5 21614)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n </linearGradient>\n <path\n fill=\"none\"\n stroke={`url(#M-${id})`}\n stroke-linecap=\"round\"\n stroke-linejoin=\"bevel\"\n stroke-width=\"12\"\n d=\"M167.5 252.5l.5 24.5\"\n ></path>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n","import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n */\n panelProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: any & {\n ref?: any\n }\n /**\n * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: any & {\n ref?: any\n }\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router: Accessor<AnyRouter>\n routerState: Accessor<any>\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n initialIsOpen,\n panelProps = {},\n closeButtonProps = {},\n toggleButtonProps = {},\n position = 'bottom-left',\n containerElement: Container = 'footer',\n router,\n routerState,\n shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n // eslint-disable-next-line prefer-const\n let panelRef: HTMLDivElement | undefined = undefined\n\n const [isOpen, setIsOpen] = useLocalStorage(\n 'tanstackRouterDevtoolsOpen',\n initialIsOpen,\n )\n\n const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n 'tanstackRouterDevtoolsHeight',\n null,\n )\n\n const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n const [isResizing, setIsResizing] = createSignal(false)\n const isMounted = useIsMounted()\n const styles = useStyles()\n\n const handleDragStart = (\n panelElement: HTMLDivElement | undefined,\n startEvent: any,\n ) => {\n if (startEvent.button !== 0) return // Only allow left click for drag\n\n setIsResizing(true)\n\n const dragInfo = {\n originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n pageY: startEvent.pageY,\n }\n\n const run = (moveEvent: MouseEvent) => {\n const delta = dragInfo.pageY - moveEvent.pageY\n const newHeight = dragInfo.originalHeight + delta\n\n setDevtoolsHeight(newHeight)\n\n if (newHeight < 70) {\n setIsOpen(false)\n } else {\n setIsOpen(true)\n }\n }\n\n const unsub = () => {\n setIsResizing(false)\n document.removeEventListener('mousemove', run)\n document.removeEventListener('mouseUp', unsub)\n }\n\n document.addEventListener('mousemove', run)\n document.addEventListener('mouseup', unsub)\n }\n\n const isButtonClosed = isOpen() ?? false\n\n createEffect(() => {\n setIsResolvedOpen(isOpen() ?? false)\n })\n\n createEffect(() => {\n if (isResolvedOpen()) {\n const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n const run = () => {\n const containerHeight = panelRef!.getBoundingClientRect().height\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.style.paddingBottom = `${containerHeight}px`\n }\n return prev\n })\n }\n }\n\n run()\n\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', run)\n\n return () => {\n window.removeEventListener('resize', run)\n if (rootEl()?.parentElement && typeof previousValue === 'string') {\n setRootEl((prev) => {\n prev!.parentElement!.style.paddingBottom = previousValue\n return prev\n })\n }\n }\n }\n } else {\n // Reset padding when devtools are closed\n if (rootEl()?.parentElement) {\n setRootEl((prev) => {\n if (prev?.parentElement) {\n prev.parentElement.removeAttribute('style')\n }\n return prev\n })\n }\n }\n return\n })\n\n createEffect(() => {\n if (rootEl()) {\n const el = rootEl()\n const fontSize = getComputedStyle(el!).fontSize\n el?.style.setProperty('--tsrd-font-size', fontSize)\n }\n })\n\n const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n style?: Record<string, any>\n }\n\n const {\n style: closeButtonStyle = {},\n onClick: onCloseClick,\n ...otherCloseButtonProps\n } = closeButtonProps\n\n const {\n onClick: onToggleClick,\n class: toggleButtonClassName,\n ...otherToggleButtonProps\n } = toggleButtonProps\n\n // Do not render on the server\n if (!isMounted()) return null\n\n const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n const basePanelClass = createMemo(() => {\n return cx(\n styles().devtoolsPanelContainer,\n styles().devtoolsPanelContainerVisibility(!!isOpen()),\n styles().devtoolsPanelContainerResizing(isResizing),\n styles().devtoolsPanelContainerAnimation(\n isResolvedOpen(),\n resolvedHeight() + 16,\n ),\n )\n })\n\n const basePanelStyle = createMemo(() => {\n return {\n height: `${resolvedHeight()}px`,\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n ...(panelStyle || {}),\n }\n })\n\n const buttonStyle = createMemo(() => {\n return cx(\n styles().mainCloseBtn,\n styles().mainCloseBtnPosition(position),\n styles().mainCloseBtnAnimation(!!isOpen()),\n toggleButtonClassName,\n )\n })\n\n return (\n <Dynamic\n component={Container}\n ref={setRootEl}\n class=\"TanStackRouterDevtools\"\n >\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: onCloseClick ?? (() => {}),\n }}\n >\n {/* {router() ? ( */}\n <BaseTanStackRouterDevtoolsPanel\n ref={panelRef}\n {...otherPanelProps}\n router={router}\n routerState={routerState}\n className={basePanelClass}\n style={basePanelStyle}\n isOpen={isResolvedOpen()}\n setIsOpen={setIsOpen}\n handleDragStart={(e) => handleDragStart(panelRef, e)}\n shadowDOMTarget={shadowDOMTarget}\n />\n {/* ) : (\n <p>No router</p>\n )} */}\n </DevtoolsOnCloseContext.Provider>\n\n <button\n type=\"button\"\n {...otherToggleButtonProps}\n aria-label=\"Open TanStack Router Devtools\"\n onClick={(e) => {\n setIsOpen(true)\n onToggleClick && onToggleClick(e)\n }}\n class={buttonStyle()}\n >\n <div class={styles().mainCloseBtnIconContainer}>\n <div class={styles().mainCloseBtnIconOuter}>\n <TanStackLogo />\n </div>\n <div class={styles().mainCloseBtnIconInner}>\n <TanStackLogo />\n </div>\n </div>\n <div class={styles().mainCloseBtnDivider}>-</div>\n <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n </button>\n </Dynamic>\n )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"mappings":"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"} |
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
1086951
0.82%- Lines of code
12979
0.77%- Number of medium supply chain risk alerts
0
-100%Worsened metrics
- Number of low supply chain risk alerts
6
20%No dependency changes