@tanstack/router-devtools 1.111.11 → 1.112.4

package/dist/esm/useStyles.js

@@ -0,0 +1,553 @@
+import React__default from "react";
+import * as goober from "goober";
+import { tokens } from "./tokens.js";
+import { ShadowDomTargetContext } from "./context.js";
+const stylesFactory = (shadowDOMTarget) => {
+  const { colors, font, size, alpha, 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[0.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 base = css`
+        appearance: none;
+        border: none;
+        font-size: 12px;
+        padding: 4px 8px;
+        background: transparent;
+        cursor: pointer;
+        font-family: ${fontFamily.sans};
+        font-weight: ${font.weight.medium};
+      `;
+      const classes = [base];
+      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 base = 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]};
+      `;
+      const classes = [base];
+      if (active) {
+        const activeStyles = css`
+          background: ${colors.darkGray[500]};
+        `;
+        classes.push(activeStyles);
+      }
+      return classes;
+    },
+    matchIndicator: (color) => {
+      const base = 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;
+      `;
+      const classes = [base];
+      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 base = css`
+        display: flex;
+        gap: ${size[1]};
+        font-size: ${fontSize.xs};
+        color: ${colors.gray[400]};
+        font-variant-numeric: tabular-nums;
+        line-height: ${lineHeight["xs"]};
+      `;
+      const classes = [base];
+      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 base = 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"]};
+      `;
+      const classes = [base];
+      if (active) {
+        const activeStyles = css`
+          background: ${colors.darkGray[500]};
+        `;
+        classes.push(activeStyles);
+      }
+      return classes;
+    },
+    routesRow: (isMatch) => {
+      const base = css`
+        flex: 1 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: ${fontSize.xs};
+        line-height: ${lineHeight["xs"]};
+      `;
+      const classes = [base];
+      if (!isMatch) {
+        const matchStyles = css`
+          color: ${colors.gray[400]};
+        `;
+        classes.push(matchStyles);
+      }
+      return classes;
+    },
+    routeParamInfo: css`
+      color: ${colors.gray[400]};
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight["xs"]};
+    `,
+    nestedRouteRow: (isRoot) => {
+      const base = css`
+        margin-left: ${isRoot ? 0 : size[3.5]};
+        border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`};
+      `;
+      return base;
+    },
+    code: css`
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight["xs"]};
+    `,
+    matchesContainer: css`
+      flex: 1 1 auto;
+      overflow-y: auto;
+    `,
+    cachedMatchesContainer: css`
+      flex: 1 1 auto;
+      overflow-y: auto;
+      max-height: 50%;
+    `,
+    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 colorMap = {
+        pending: "yellow",
+        success: "green",
+        error: "red",
+        notFound: "purple",
+        redirected: "gray"
+      };
+      const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : colorMap[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) => {
+      const base = 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]};` : ""}
+      `;
+      return base;
+    },
+    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[0.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]};
+    `
+  };
+};
+function useStyles() {
+  const shadowDomTarget = React__default.useContext(ShadowDomTargetContext);
+  const [_styles] = React__default.useState(() => stylesFactory(shadowDomTarget));
+  return _styles;
+}
+export {
+  useStyles
+};
+//# sourceMappingURL=useStyles.js.map

package/dist/esm/useStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyles.js","sources":["../../src/useStyles.tsx"],"sourcesContent":["import React from 'react'\n\nimport * as goober from 'goober'\nimport { tokens } from './tokens'\nimport { ShadowDomTargetContext } from './context'\n\nconst stylesFactory = (shadowDOMTarget?: ShadowRoot) => {\n  const { colors, font, size, alpha, shadow, border } = tokens\n  const { fontFamily, lineHeight, size: fontSize } = font\n  const css = shadowDOMTarget\n    ? goober.css.bind({ target: shadowDOMTarget })\n    : goober.css\n\n  return {\n    devtoolsPanelContainer: css`\n      direction: ltr;\n      position: fixed;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n      width: 100%;\n      max-height: 90%;\n      border-top: 1px solid ${colors.gray[700]};\n      transform-origin: top;\n    `,\n    devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n      return css`\n        visibility: ${isOpen ? 'visible' : 'hidden'};\n      `\n    },\n    devtoolsPanelContainerResizing: (isResizing: boolean) => {\n      if (isResizing) {\n        return css`\n          transition: none;\n        `\n      }\n\n      return css`\n        transition: all 0.4s ease;\n      `\n    },\n    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n      if (isOpen) {\n        return css`\n          pointer-events: auto;\n          transform: translateY(0);\n        `\n      }\n      return css`\n        pointer-events: none;\n        transform: translateY(${height}px);\n      `\n    },\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n      &:focus-visible {\n        outline-offset: 4px;\n        border-radius: ${border.radius.xs};\n        outline: 2px solid ${colors.blue[800]};\n      }\n    `,\n    tanstackLogo: css`\n      font-size: ${font.size.md};\n      font-weight: ${font.weight.bold};\n      line-height: ${font.lineHeight.xs};\n      white-space: nowrap;\n      color: ${colors.gray[300]};\n    `,\n    routerLogo: css`\n      font-weight: ${font.weight.semibold};\n      font-size: ${font.size.xs};\n      background: linear-gradient(to right, #84cc16, #10b981);\n      background-clip: text;\n      -webkit-background-clip: text;\n      line-height: 1;\n      -webkit-text-fill-color: transparent;\n      white-space: nowrap;\n    `,\n    devtoolsPanel: css`\n      display: flex;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      background-color: ${colors.darkGray[700]};\n      color: ${colors.gray[300]};\n\n      @media (max-width: 700px) {\n        flex-direction: column;\n      }\n      @media (max-width: 600px) {\n        font-size: ${fontSize.xs};\n      }\n    `,\n    dragHandle: css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 4px;\n      cursor: row-resize;\n      z-index: 100000;\n      &:hover {\n        background-color: ${colors.purple[400]}${alpha[90]};\n      }\n    `,\n    firstContainer: css`\n      flex: 1 1 500px;\n      min-height: 40%;\n      max-height: 100%;\n      overflow: auto;\n      border-right: 1px solid ${colors.gray[700]};\n      display: flex;\n      flex-direction: column;\n    `,\n    routerExplorerContainer: css`\n      overflow-y: auto;\n      flex: 1;\n    `,\n    routerExplorer: css`\n      padding: ${tokens.size[2]};\n    `,\n    row: css`\n      display: flex;\n      align-items: center;\n      padding: ${tokens.size[2]} ${tokens.size[2.5]};\n      gap: ${tokens.size[2.5]};\n      border-bottom: ${colors.darkGray[500]} 1px solid;\n      align-items: center;\n    `,\n    detailsHeader: css`\n      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      background-color: ${colors.darkGray[600]};\n      padding: 0px ${tokens.size[2]};\n      font-weight: ${font.weight.medium};\n      font-size: ${font.size.xs};\n      min-height: ${tokens.size[8]};\n      line-height: ${font.lineHeight.xs};\n      text-align: left;\n      display: flex;\n      align-items: center;\n    `,\n    maskedBadge: css`\n      background: ${colors.yellow[900]}${alpha[70]};\n      color: ${colors.yellow[300]};\n      display: inline-block;\n      padding: ${tokens.size[0]} ${tokens.size[2.5]};\n      border-radius: ${border.radius.full};\n      font-size: ${font.size.xs};\n      font-weight: ${font.weight.normal};\n      border: 1px solid ${colors.yellow[300]};\n    `,\n    maskedLocation: css`\n      color: ${colors.yellow[300]};\n    `,\n    detailsContent: css`\n      padding: ${tokens.size[1.5]} ${tokens.size[2]};\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      font-size: ${font.size.xs};\n    `,\n    routeMatchesToggle: css`\n      display: flex;\n      align-items: center;\n      border: 1px solid ${colors.gray[500]};\n      border-radius: ${border.radius.sm};\n      overflow: hidden;\n    `,\n    routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => {\n      const base = css`\n        appearance: none;\n        border: none;\n        font-size: 12px;\n        padding: 4px 8px;\n        background: transparent;\n        cursor: pointer;\n        font-family: ${fontFamily.sans};\n        font-weight: ${font.weight.medium};\n      `\n      const classes = [base]\n\n      if (active) {\n        const activeStyles = css`\n          background: ${colors.darkGray[400]};\n          color: ${colors.gray[300]};\n        `\n        classes.push(activeStyles)\n      } else {\n        const inactiveStyles = css`\n          color: ${colors.gray[500]};\n          background: ${colors.darkGray[800]}${alpha[20]};\n        `\n        classes.push(inactiveStyles)\n      }\n\n      if (showBorder) {\n        classes.push(css`\n          border-right: 1px solid ${tokens.colors.gray[500]};\n        `)\n      }\n\n      return classes\n    },\n    detailsHeaderInfo: css`\n      flex: 1;\n      justify-content: flex-end;\n      display: flex;\n      align-items: center;\n      font-weight: ${font.weight.normal};\n      color: ${colors.gray[400]};\n    `,\n    matchRow: (active: boolean) => {\n      const base = css`\n        display: flex;\n        border-bottom: 1px solid ${colors.darkGray[400]};\n        cursor: pointer;\n        align-items: center;\n        padding: ${size[1]} ${size[2]};\n        gap: ${size[2]};\n        font-size: ${fontSize.xs};\n        color: ${colors.gray[300]};\n      `\n      const classes = [base]\n\n      if (active) {\n        const activeStyles = css`\n          background: ${colors.darkGray[500]};\n        `\n        classes.push(activeStyles)\n      }\n\n      return classes\n    },\n    matchIndicator: (\n      color: 'green' | 'red' | 'yellow' | 'gray' | 'blue' | 'purple',\n    ) => {\n      const base = css`\n        flex: 0 0 auto;\n        width: ${size[3]};\n        height: ${size[3]};\n        background: ${colors[color][900]};\n        border: 1px solid ${colors[color][500]};\n        border-radius: ${border.radius.full};\n        transition: all 0.25s ease-out;\n        box-sizing: border-box;\n      `\n      const classes = [base]\n\n      if (color === 'gray') {\n        const grayStyles = css`\n          background: ${colors.gray[700]};\n          border-color: ${colors.gray[400]};\n        `\n        classes.push(grayStyles)\n      }\n\n      return classes\n    },\n    matchID: css`\n      flex: 1;\n      line-height: ${lineHeight['xs']};\n    `,\n    ageTicker: (showWarning: boolean) => {\n      const base = css`\n        display: flex;\n        gap: ${size[1]};\n        font-size: ${fontSize.xs};\n        color: ${colors.gray[400]};\n        font-variant-numeric: tabular-nums;\n        line-height: ${lineHeight['xs']};\n      `\n\n      const classes = [base]\n\n      if (showWarning) {\n        const warningStyles = css`\n          color: ${colors.yellow[400]};\n        `\n        classes.push(warningStyles)\n      }\n\n      return classes\n    },\n    secondContainer: css`\n      flex: 1 1 500px;\n      min-height: 40%;\n      max-height: 100%;\n      overflow: auto;\n      border-right: 1px solid ${colors.gray[700]};\n      display: flex;\n      flex-direction: column;\n    `,\n    thirdContainer: css`\n      flex: 1 1 500px;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      border-right: 1px solid ${colors.gray[700]};\n\n      @media (max-width: 700px) {\n        border-top: 2px solid ${colors.gray[700]};\n      }\n    `,\n    fourthContainer: css`\n      flex: 1 1 500px;\n      min-height: 40%;\n      max-height: 100%;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    `,\n    routesContainer: css`\n      overflow-x: auto;\n      overflow-y: visible;\n    `,\n    routesRowContainer: (active: boolean, isMatch: boolean) => {\n      const base = css`\n        display: flex;\n        border-bottom: 1px solid ${colors.darkGray[400]};\n        align-items: center;\n        padding: ${size[1]} ${size[2]};\n        gap: ${size[2]};\n        font-size: ${fontSize.xs};\n        color: ${colors.gray[300]};\n        cursor: ${isMatch ? 'pointer' : 'default'};\n        line-height: ${lineHeight['xs']};\n      `\n      const classes = [base]\n\n      if (active) {\n        const activeStyles = css`\n          background: ${colors.darkGray[500]};\n        `\n        classes.push(activeStyles)\n      }\n\n      return classes\n    },\n    routesRow: (isMatch: boolean) => {\n      const base = css`\n        flex: 1 0 auto;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        font-size: ${fontSize.xs};\n        line-height: ${lineHeight['xs']};\n      `\n\n      const classes = [base]\n\n      if (!isMatch) {\n        const matchStyles = css`\n          color: ${colors.gray[400]};\n        `\n        classes.push(matchStyles)\n      }\n\n      return classes\n    },\n    routeParamInfo: css`\n      color: ${colors.gray[400]};\n      font-size: ${fontSize.xs};\n      line-height: ${lineHeight['xs']};\n    `,\n    nestedRouteRow: (isRoot: boolean) => {\n      const base = css`\n        margin-left: ${isRoot ? 0 : size[3.5]};\n        border-left: ${isRoot ? '' : `solid 1px ${colors.gray[700]}`};\n      `\n      return base\n    },\n    code: css`\n      font-size: ${fontSize.xs};\n      line-height: ${lineHeight['xs']};\n    `,\n    matchesContainer: css`\n      flex: 1 1 auto;\n      overflow-y: auto;\n    `,\n    cachedMatchesContainer: css`\n      flex: 1 1 auto;\n      overflow-y: auto;\n      max-height: 50%;\n    `,\n    maskedBadgeContainer: css`\n      flex: 1;\n      justify-content: flex-end;\n      display: flex;\n    `,\n    matchDetails: css`\n      display: flex;\n      flex-direction: column;\n      padding: ${tokens.size[2]};\n      font-size: ${tokens.font.size.xs};\n      color: ${tokens.colors.gray[300]};\n      line-height: ${tokens.font.lineHeight.sm};\n    `,\n    matchStatus: (\n      status: 'pending' | 'success' | 'error' | 'notFound' | 'redirected',\n      isFetching: false | 'beforeLoad' | 'loader',\n    ) => {\n      const colorMap = {\n        pending: 'yellow',\n        success: 'green',\n        error: 'red',\n        notFound: 'purple',\n        redirected: 'gray',\n      } as const\n\n      const color =\n        isFetching && status === 'success'\n          ? isFetching === 'beforeLoad'\n            ? 'purple'\n            : 'blue'\n          : colorMap[status]\n\n      return css`\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 40px;\n        border-radius: ${tokens.border.radius.sm};\n        font-weight: ${tokens.font.weight.normal};\n        background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};\n        color: ${tokens.colors[color][300]};\n        border: 1px solid ${tokens.colors[color][600]};\n        margin-bottom: ${tokens.size[2]};\n        transition: all 0.25s ease-out;\n      `\n    },\n    matchDetailsInfo: css`\n      display: flex;\n      justify-content: flex-end;\n      flex: 1;\n    `,\n    matchDetailsInfoLabel: css`\n      display: flex;\n    `,\n    mainCloseBtn: css`\n      background: ${colors.darkGray[700]};\n      padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};\n      border-radius: ${border.radius.md};\n      position: fixed;\n      z-index: 99999;\n      display: inline-flex;\n      width: fit-content;\n      cursor: pointer;\n      appearance: none;\n      border: 0;\n      gap: 8px;\n      align-items: center;\n      border: 1px solid ${colors.gray[500]};\n      font-size: ${font.size.xs};\n      cursor: pointer;\n      transition: all 0.25s ease-out;\n\n      &:hover {\n        background: ${colors.darkGray[500]};\n      }\n    `,\n    mainCloseBtnPosition: (\n      position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',\n    ) => {\n      const base = css`\n        ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n        ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n        ${position === 'bottom-left'\n          ? `bottom: ${size[2]}; left: ${size[2]};`\n          : ''}\n        ${position === 'bottom-right'\n          ? `bottom: ${size[2]}; right: ${size[2]};`\n          : ''}\n      `\n      return base\n    },\n    mainCloseBtnAnimation: (isOpen: boolean) => {\n      if (isOpen) {\n        return css`\n          opacity: 1;\n          pointer-events: auto;\n          visibility: visible;\n        `\n      }\n      return css`\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      `\n    },\n    routerLogoCloseButton: css`\n      font-weight: ${font.weight.semibold};\n      font-size: ${font.size.xs};\n      background: linear-gradient(to right, #98f30c, #00f4a3);\n      background-clip: text;\n      -webkit-background-clip: text;\n      line-height: 1;\n      -webkit-text-fill-color: transparent;\n      white-space: nowrap;\n    `,\n    mainCloseBtnDivider: css`\n      width: 1px;\n      background: ${tokens.colors.gray[600]};\n      height: 100%;\n      border-radius: 999999px;\n      color: transparent;\n    `,\n    mainCloseBtnIconContainer: css`\n      position: relative;\n      width: ${size[5]};\n      height: ${size[5]};\n      background: pink;\n      border-radius: 999999px;\n      overflow: hidden;\n    `,\n    mainCloseBtnIconOuter: css`\n      width: ${size[5]};\n      height: ${size[5]};\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      filter: blur(3px) saturate(1.8) contrast(2);\n    `,\n    mainCloseBtnIconInner: css`\n      width: ${size[4]};\n      height: ${size[4]};\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    `,\n    panelCloseBtn: css`\n      position: absolute;\n      cursor: pointer;\n      z-index: 100001;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      outline: none;\n      background-color: ${colors.darkGray[700]};\n      &:hover {\n        background-color: ${colors.darkGray[500]};\n      }\n\n      top: 0;\n      right: ${size[2]};\n      transform: translate(0, -100%);\n      border-right: ${colors.darkGray[300]} 1px solid;\n      border-left: ${colors.darkGray[300]} 1px solid;\n      border-top: ${colors.darkGray[300]} 1px solid;\n      border-bottom: none;\n      border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;\n      padding: ${size[1]} ${size[1.5]} ${size[0.5]} ${size[1.5]};\n\n      &::after {\n        content: ' ';\n        position: absolute;\n        top: 100%;\n        left: -${size[2.5]};\n        height: ${size[1.5]};\n        width: calc(100% + ${size[5]});\n      }\n    `,\n    panelCloseBtnIcon: css`\n      color: ${colors.gray[400]};\n      width: ${size[2]};\n      height: ${size[2]};\n    `,\n  }\n}\n\nexport function useStyles() {\n  const shadowDomTarget = React.useContext(ShadowDomTargetContext)\n  const [_styles] = React.useState(() => stylesFactory(shadowDomTarget))\n  return _styles\n}\n"],"names":["React"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-devtools",
-  "version": "1.111.11",
+  "version": "1.112.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "csstype": "^3.0.10",
     "react": ">=18.0.0 || >=19.0.0",
     "react-dom": ">=18.0.0 || >=19.0.0",
-    "@tanstack/react-router": "^1.111.11"
+    "@tanstack/react-router": "^1.112.0"
   },
   "peerDependenciesMeta": {
     "csstype": {

package/src/AgeTicker.tsx

@@ -0,0 +1,73 @@
+import { clsx as cx } from 'clsx'
+import React from 'react'
+import { useStyles } from './useStyles'
+import type { AnyRouteMatch, AnyRouter } from '@tanstack/react-router'
+
+function formatTime(ms: number) {
+  const units = ['s', 'min', 'h', 'd']
+  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]
+
+  let chosenUnitIndex = 0
+  for (let i = 1; i < values.length; i++) {
+    if (values[i]! < 1) break
+    chosenUnitIndex = i
+  }
+
+  const formatter = new Intl.NumberFormat(navigator.language, {
+    compactDisplay: 'short',
+    notation: 'compact',
+    maximumFractionDigits: 0,
+  })
+
+  return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]
+}
+
+export function AgeTicker({
+  match,
+  router,
+}: {
+  match?: AnyRouteMatch
+  router: AnyRouter
+}) {
+  const styles = useStyles()
+  const rerender = React.useReducer(
+    () => ({}),
+    () => ({}),
+  )[1]
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      rerender()
+    }, 1000)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [rerender])
+
+  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 ?? 30 * 60 * 1000
+
+  return (
+    <div className={cx(styles.ageTicker(age > staleTime))}>
+      <div>{formatTime(age)}</div>
+      <div>/</div>
+      <div>{formatTime(staleTime)}</div>
+      <div>/</div>
+      <div>{formatTime(gcTime)}</div>
+    </div>
+  )
+}