🚨 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 { 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; | ||
| 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-qCkSGZav.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-DSj2U3K0.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-BGIBDKFY.cjs.map |
| {"version":3,"file":"FloatingTanStackRouterDevtools-BGIBDKFY.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-qCkSGZav.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-Dz-7tBRe.js.map |
| {"version":3,"file":"FloatingTanStackRouterDevtools-Dz-7tBRe.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-M-UhaKLc.cjs"))); | ||
| Devtools = require_context.lazy(() => Promise.resolve().then(() => require("../FloatingTanStackRouterDevtools-BGIBDKFY.cjs"))); | ||
| this.#Component = Devtools; | ||
@@ -118,3 +118,3 @@ } | ||
| else { | ||
| BaseTanStackRouterDevtoolsPanel = require_context.lazy(() => Promise.resolve().then(() => require("../BaseTanStackRouterDevtoolsPanel-BlI6Kawa.cjs"))); | ||
| BaseTanStackRouterDevtoolsPanel = require_context.lazy(() => Promise.resolve().then(() => require("../BaseTanStackRouterDevtoolsPanel-DSj2U3K0.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-U4pxMObm.js")); | ||
| Devtools = lazy(() => import("../FloatingTanStackRouterDevtools-Dz-7tBRe.js")); | ||
| this.#Component = Devtools; | ||
@@ -117,3 +117,3 @@ } | ||
| else { | ||
| BaseTanStackRouterDevtoolsPanel = lazy(() => import("../BaseTanStackRouterDevtoolsPanel-DwUaC87U.js")); | ||
| BaseTanStackRouterDevtoolsPanel = lazy(() => import("../BaseTanStackRouterDevtoolsPanel-qCkSGZav.js")); | ||
| this.#Component = BaseTanStackRouterDevtoolsPanel; | ||
@@ -120,0 +120,0 @@ } |
+3
-4
| { | ||
| "name": "@tanstack/router-devtools-core", | ||
| "version": "1.167.0", | ||
| "version": "1.167.1", | ||
| "description": "Modern and scalable routing for Web applications", | ||
@@ -53,4 +53,3 @@ "author": "Tanner Linsley", | ||
| "clsx": "^2.1.1", | ||
| "goober": "^2.1.16", | ||
| "tiny-invariant": "^1.3.3" | ||
| "goober": "^2.1.16" | ||
| }, | ||
@@ -64,3 +63,3 @@ "devDependencies": { | ||
| "csstype": "^3.0.10", | ||
| "@tanstack/router-core": "^1.168.0" | ||
| "@tanstack/router-core": "^1.168.2" | ||
| }, | ||
@@ -67,0 +66,0 @@ "peerDependenciesMeta": { |
| import { clsx as cx } from 'clsx' | ||
| import { default as invariant } from 'tiny-invariant' | ||
| import { interpolatePath, rootRouteId, trimPath } from '@tanstack/router-core' | ||
@@ -267,7 +266,2 @@ import { | ||
| 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.', | ||
| ) | ||
| // useStore(router.stores.__store) | ||
@@ -274,0 +268,0 @@ |
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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"} |
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
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Fixed 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
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Improved metrics
- Dependency count
4
-20%Worsened metrics
- Total package byte prevSize
1085434
-0.14%- Lines of code
12969
-0.08%Dependency changes
- Removed
tiny-invariant@^1.3.3- Removed
tiny-invariant@1.3.3(transitive)