next-cache-toolbar 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Paco Coursey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/cache-entry-client-BvxljHoj.js

@@ -0,0 +1,145 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+const Table = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("table", {
+        ref: ref,
+        className: cn("nct-w-full nct-caption-bottom nct-text-sm", className),
+        ...props
+    }));
+Table.displayName = "Table";
+const TableHeader = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("thead", {
+        ref: ref,
+        className: cn("[&_tr]:nct-border-b", className),
+        ...props
+    }));
+TableHeader.displayName = "TableHeader";
+const TableBody = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("tbody", {
+        ref: ref,
+        className: cn("[&_tr:last-child]:nct-border-0", className),
+        ...props
+    }));
+TableBody.displayName = "TableBody";
+const TableFooter = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("tfoot", {
+        ref: ref,
+        className: cn("nct-border-t nct-bg-muted/50 nct-font-medium [&>tr]:last:nct-border-b-0", className),
+        ...props
+    }));
+TableFooter.displayName = "TableFooter";
+const TableRow = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("tr", {
+        ref: ref,
+        className: cn("nct-border-b nct-transition-colors hover:nct-bg-muted/50 data-[state=selected]:nct-bg-muted", className),
+        ...props
+    }));
+TableRow.displayName = "TableRow";
+const TableHead = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("th", {
+        ref: ref,
+        className: cn("nct-h-12 nct-px-4 nct-text-left nct-align-middle nct-font-medium nct-text-muted-foreground [&:has([role=checkbox])]:nct-pr-0", className),
+        ...props
+    }));
+TableHead.displayName = "TableHead";
+const TableCell = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("td", {
+        ref: ref,
+        className: cn("nct-p-4 nct-align-middle [&:has([role=checkbox])]:nct-pr-0", className),
+        ...props
+    }));
+TableCell.displayName = "TableCell";
+const TableCaption = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx("caption", {
+        ref: ref,
+        className: cn("nct-mt-4 nct-text-sm nct-text-muted-foreground", className),
+        ...props
+    }));
+TableCaption.displayName = "TableCaption";
+
+const badgeVariants = classVarianceAuthority.cva("nct-inline-flex nct-items-center nct-rounded-full nct-border nct-px-2.5 nct-py-0.5 nct-text-xs nct-font-semibold nct-transition-colors focus:nct-outline-none focus:nct-ring-2 focus:nct-ring-ring focus:nct-ring-offset-2", {
+    variants: {
+        variant: {
+            default: "nct-border-transparent nct-bg-primary nct-text-primary-foreground hover:nct-bg-primary/80",
+            secondary: "nct-border-transparent nct-bg-secondary nct-text-secondary-foreground hover:nct-bg-secondary/80",
+            destructive: "nct-border-transparent nct-bg-destructive nct-text-destructive-foreground hover:nct-bg-destructive/80",
+            outline: "nct-text-foreground"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+function Badge({ className, variant, ...props }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: cn(badgeVariants({
+            variant
+        }), className),
+        ...props
+    });
+}
+
+const CacheEntry = (props)=>{
+    const cacheEntryRevalidateLeft = React.useMemo(()=>{
+        if (!props.cacheEntry.data?.headers.date || !props.cacheEntry.revalidate) {
+            return;
+        }
+        const cacheEntryDate = new Date(props.cacheEntry.data?.headers.date);
+        const msDiff = new Date().getTime() - cacheEntryDate.getTime();
+        return Math.floor(props.cacheEntry.revalidate - msDiff / 1000);
+    }, [
+        props.cacheEntry.data?.headers.date,
+        props.cacheEntry.revalidate
+    ]);
+    const isStale = cacheEntryRevalidateLeft ? cacheEntryRevalidateLeft < 0 : false;
+    return /*#__PURE__*/ jsxRuntime.jsxs(TableRow, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(TableCell, {
+                className: "nct-truncate nct-max-w-[25vw]",
+                children: props.cacheEntry.data?.url
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TableCell, {
+                title: cacheEntryRevalidateLeft?.toString() ?? "-",
+                children: isStale ? /*#__PURE__*/ jsxRuntime.jsx(Badge, {
+                    children: "STALE"
+                }) : props.cacheEntry.revalidate ?? "-"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TableCell, {
+                className: "nct-break-before-all",
+                children: props.cacheEntry.tags.join("\n")
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TableCell, {
+                children: props.cacheEntry.data?.headers.date
+            })
+        ]
+    });
+};
+
+exports.CacheEntry = CacheEntry;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.cn = cn;

package/dist/cjs/cache-panel-context-client-B1EgwMzI.js

@@ -0,0 +1,33 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const CachePanelContext = /*#__PURE__*/ React.createContext({
+    isOpen: false,
+    toggleOpen: ()=>{},
+    setSorting: ()=>{}
+});
+const useCachePanelContext = ()=>React__default.default.useContext(CachePanelContext);
+const CachePanelContextProvider = ({ children })=>{
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [sorting, setSorting] = React.useState(undefined);
+    const toggleOpen = ()=>{
+        setIsOpen(!isOpen);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(CachePanelContext.Provider, {
+        value: {
+            isOpen,
+            toggleOpen,
+            setSorting,
+            sorting
+        },
+        children: children
+    });
+};
+
+exports.CachePanelContextProvider = CachePanelContextProvider;
+exports.useCachePanelContext = useCachePanelContext;

package/dist/cjs/cache-panel-head-client-DU8vr6PU.js

@@ -0,0 +1,46 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-BvxljHoj.js');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+
+const CachePanelHead = ({ sortingProperty, children, ...props })=>{
+    const { setSorting, sorting } = cachePanelContextClient.useCachePanelContext();
+    const sortingDirection = React.useMemo(()=>{
+        if (!sorting || sorting.key !== sortingProperty) {
+            return;
+        }
+        return sorting.direction;
+    }, [
+        sorting,
+        sortingProperty
+    ]);
+    const onHeadClick = ()=>{
+        if (sorting && sorting.key === sortingProperty) {
+            setSorting({
+                key: sortingProperty,
+                direction: sorting.direction === "asc" ? "desc" : "asc"
+            });
+        } else {
+            setSorting({
+                key: sortingProperty,
+                direction: "asc"
+            });
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableHead, {
+        onClick: onHeadClick,
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: cacheEntryClient.cn("nct-flex nct-items-center nct-gap-2", sorting?.key === sortingProperty && "nct-underline"),
+            children: [
+                children,
+                sortingDirection === "asc" && /*#__PURE__*/ jsxRuntime.jsx(lucideReact.ArrowDownAZIcon, {}),
+                sortingDirection === "desc" && /*#__PURE__*/ jsxRuntime.jsx(lucideReact.ArrowUpAZIcon, {})
+            ]
+        })
+    });
+};
+
+exports.CachePanelHead = CachePanelHead;

package/dist/cjs/cache-panel-table-client-DTc9oH8H.js

@@ -0,0 +1,56 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-BvxljHoj.js');
+var React = require('react');
+var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+
+const sortCacheEntryByKey = (key, a, b)=>{
+    switch(key){
+        case "url":
+            if (!a.data || !b.data) {
+                return 0;
+            }
+            return a.data.url.localeCompare(b.data.url);
+        case "revalidate":
+            return (a.revalidate ?? 0) - (b.revalidate ?? 0);
+        case "tags":
+            if (a.tags.length === 0 || b.tags.length === 0) {
+                return 0;
+            }
+            return a.tags[0]?.localeCompare(b.tags[0] ?? "") ?? 0;
+        case "timestamp":
+            {
+                if (!a.data?.headers.date || !b.data?.headers.date) {
+                    return 0;
+                }
+                return new Date(b.data.headers.date).getTime() - new Date(a.data.headers.date).getTime();
+            }
+    }
+};
+const CachePanelTable = ({ entries })=>{
+    const { sorting } = cachePanelContextClient.useCachePanelContext();
+    const sortedEntries = React.useMemo(()=>{
+        if (!sorting) {
+            return entries;
+        }
+        const { key, direction } = sorting;
+        return entries.toSorted((a, b)=>{
+            return sortCacheEntryByKey(key, a[1], b[1]) * (direction === "asc" ? 1 : -1);
+        });
+    }, [
+        entries,
+        sorting
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(cacheEntryClient.TableBody, {
+        children: [
+            sortedEntries.length === 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: "No cache entries"
+            }),
+            sortedEntries.map(([file, cacheEntry])=>/*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.CacheEntry, {
+                    cacheEntry: cacheEntry
+                }, file))
+        ]
+    });
+};
+
+exports.CachePanelTable = CachePanelTable;

package/dist/cjs/cache-panel-trigger-client-I91XFsXW.js

@@ -0,0 +1,76 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var cacheEntryClient = require('./cache-entry-client-BvxljHoj.js');
+var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const buttonVariants = classVarianceAuthority.cva("nct-inline-flex nct-items-center nct-justify-center nct-whitespace-nowrap nct-rounded-md nct-text-sm nct-font-medium nct-ring-offset-background nct-transition-colors focus-visible:nct-outline-none focus-visible:nct-ring-2 focus-visible:nct-ring-ring focus-visible:nct-ring-offset-2 disabled:nct-pointer-events-none disabled:nct-opacity-50", {
+    variants: {
+        variant: {
+            default: "nct-bg-primary nct-text-primary-foreground hover:nct-bg-primary/90",
+            destructive: "nct-bg-destructive nct-text-destructive-foreground hover:nct-bg-destructive/90",
+            outline: "nct-border nct-border-input nct-bg-background hover:nct-bg-accent hover:nct-text-accent-foreground",
+            secondary: "nct-bg-secondary nct-text-secondary-foreground hover:nct-bg-secondary/80",
+            ghost: "hover:nct-bg-accent hover:nct-text-accent-foreground",
+            link: "nct-text-primary nct-underline-offset-4 hover:nct-underline"
+        },
+        size: {
+            default: "nct-h-10 nct-px-4 nct-py-2",
+            sm: "nct-h-9 nct-rounded-md nct-px-3",
+            lg: "nct-h-11 nct-rounded-md nct-px-8",
+            icon: "nct-h-10 nct-w-10"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+const Button = /*#__PURE__*/ React__namespace.forwardRef(({ className, variant, size, asChild = false, ...props }, ref)=>{
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
+        className: cacheEntryClient.cn(buttonVariants({
+            variant,
+            size,
+            className
+        })),
+        ref: ref,
+        ...props
+    });
+});
+Button.displayName = "Button";
+
+function CachePanelTrigger(props) {
+    const { toggleOpen } = cachePanelContextClient.useCachePanelContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(Button, {
+        variant: "ghost",
+        size: "icon",
+        onClick: toggleOpen,
+        ...props
+    });
+}
+
+exports.Button = Button;
+exports.CachePanelTrigger = CachePanelTrigger;

package/dist/cjs/cache-panel-wrapper-client-CN5_PBpp.js

@@ -0,0 +1,20 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-BvxljHoj.js');
+require('react');
+var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+
+const CacheTable = (props)=>{
+    const { isOpen } = cachePanelContextClient.useCachePanelContext();
+    if (!isOpen) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "nct-fixed nct-bottom-0 nct-inset-x-0 nct-z-50 nct-bg-background nct-overflow-x-auto nct-max-h-[35vh]",
+        children: /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.Table, {
+            children: props.children
+        })
+    });
+};
+
+exports.CacheTable = CacheTable;

package/dist/cjs/index.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function NextCacheToolbar(): Promise<react_jsx_runtime.JSX.Element>;
+
+export { NextCacheToolbar };

package/dist/cjs/index.js

@@ -0,0 +1,115 @@
+'use server';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-BvxljHoj.js');
+var lucideReact = require('lucide-react');
+var fs = require('fs');
+var promises = require('node:fs/promises');
+var zod = require('zod');
+var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+var cachePanelHeadClient = require('./cache-panel-head-client-DU8vr6PU.js');
+var cachePanelTableClient = require('./cache-panel-table-client-DTc9oH8H.js');
+var cachePanelTriggerClient = require('./cache-panel-trigger-client-I91XFsXW.js');
+var cachePanelWrapperClient = require('./cache-panel-wrapper-client-CN5_PBpp.js');
+var refreshDataButtonClient = require('./refresh-data-button-client-B9jg9KlD.js');
+
+const nextCacheFileSchema = zod.z.object({
+    data: zod.z.object({
+        body: zod.z.string(),
+        headers: zod.z.record(zod.z.string(), zod.z.string()),
+        status: zod.z.number(),
+        url: zod.z.string()
+    }).optional(),
+    kind: zod.z.union([
+        zod.z.literal("FETCH"),
+        zod.z.unknown()
+    ]),
+    revalidate: zod.z.number().optional(),
+    tags: zod.z.array(zod.z.string()).optional().default([])
+});
+
+const cachePath = ".next/cache/fetch-cache";
+const getCacheFiles = async ()=>{
+    if (!fs.existsSync(cachePath)) {
+        return;
+    }
+    try {
+        const files = await promises.readdir(cachePath);
+        const cacheFiles = new Map();
+        for (const file of files){
+            const fileContent = await promises.readFile(`${cachePath}/${file}`);
+            const body = JSON.parse(fileContent.toString());
+            const cacheEntry = nextCacheFileSchema.parse(body);
+            if (!cacheEntry.data) {
+                continue;
+            }
+            cacheFiles.set(file, cacheEntry);
+        }
+        return cacheFiles;
+    } catch (error) {
+        console.error(error);
+        throw Error("Error reading cache files");
+    }
+};
+
+async function NextCacheToolbar() {
+    const files = await getCacheFiles();
+    const cacheEntries = Array.from(files?.entries() ?? []);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "dark",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(cachePanelContextClient.CachePanelContextProvider, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(cachePanelTriggerClient.CachePanelTrigger, {
+                    className: "nct-fixed nct-rounded-full nct-bottom-4 nct-right-4 nct-bg-gradient-to-r nct-from-fuchsia-500 nct-to-cyan-500",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.Braces, {})
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(cachePanelWrapperClient.CacheTable, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableHeader, {
+                            className: "nct-sticky nct-top-0 nct-bg-background",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(cacheEntryClient.TableRow, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
+                                        sortingProperty: "url",
+                                        className: "nct-w-[300px]",
+                                        children: "URL"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
+                                        sortingProperty: "revalidate",
+                                        children: "Revalidate"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
+                                        sortingProperty: "tags",
+                                        children: "Tags"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
+                                        sortingProperty: "timestamp",
+                                        className: "nct-w-[300px]",
+                                        children: "Timestamp"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableHead, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            className: "nct-flex nct-items-center nct-justify-end nct-gap-2",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(refreshDataButtonClient.RefreshDataButton, {}),
+                                                /*#__PURE__*/ jsxRuntime.jsx(cachePanelTriggerClient.CachePanelTrigger, {
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.PanelBottomCloseIcon, {})
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(cachePanelTableClient.CachePanelTable, {
+                            entries: cacheEntries
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+exports.NextCacheToolbar = NextCacheToolbar;

package/dist/cjs/refresh-data-button-client-B9jg9KlD.js

@@ -0,0 +1,29 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cachePanelTriggerClient = require('./cache-panel-trigger-client-I91XFsXW.js');
+var cacheEntryClient = require('./cache-entry-client-BvxljHoj.js');
+var lucideReact = require('lucide-react');
+var navigation = require('next/navigation');
+var React = require('react');
+
+function RefreshDataButton() {
+    const [isPending, startTransition] = React.useTransition();
+    const router = navigation.useRouter();
+    const refresh = ()=>{
+        startTransition(()=>{
+            router.refresh();
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(cachePanelTriggerClient.Button, {
+        variant: "outline",
+        size: "icon",
+        onClick: refresh,
+        children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.Loader2, {
+            className: cacheEntryClient.cn("nct-h-4 nct-w-4", {
+                "nct-animate-spin": isPending
+            })
+        })
+    });
+}
+
+exports.RefreshDataButton = RefreshDataButton;

package/dist/es/cache-entry-client-UcY_Onfg.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+const Table = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("table", {
+        ref: ref,
+        className: cn("nct-w-full nct-caption-bottom nct-text-sm", className),
+        ...props
+    }));
+Table.displayName = "Table";
+const TableHeader = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("thead", {
+        ref: ref,
+        className: cn("[&_tr]:nct-border-b", className),
+        ...props
+    }));
+TableHeader.displayName = "TableHeader";
+const TableBody = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("tbody", {
+        ref: ref,
+        className: cn("[&_tr:last-child]:nct-border-0", className),
+        ...props
+    }));
+TableBody.displayName = "TableBody";
+const TableFooter = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("tfoot", {
+        ref: ref,
+        className: cn("nct-border-t nct-bg-muted/50 nct-font-medium [&>tr]:last:nct-border-b-0", className),
+        ...props
+    }));
+TableFooter.displayName = "TableFooter";
+const TableRow = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("tr", {
+        ref: ref,
+        className: cn("nct-border-b nct-transition-colors hover:nct-bg-muted/50 data-[state=selected]:nct-bg-muted", className),
+        ...props
+    }));
+TableRow.displayName = "TableRow";
+const TableHead = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("th", {
+        ref: ref,
+        className: cn("nct-h-12 nct-px-4 nct-text-left nct-align-middle nct-font-medium nct-text-muted-foreground [&:has([role=checkbox])]:nct-pr-0", className),
+        ...props
+    }));
+TableHead.displayName = "TableHead";
+const TableCell = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("td", {
+        ref: ref,
+        className: cn("nct-p-4 nct-align-middle [&:has([role=checkbox])]:nct-pr-0", className),
+        ...props
+    }));
+TableCell.displayName = "TableCell";
+const TableCaption = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("caption", {
+        ref: ref,
+        className: cn("nct-mt-4 nct-text-sm nct-text-muted-foreground", className),
+        ...props
+    }));
+TableCaption.displayName = "TableCaption";
+
+const badgeVariants = cva("nct-inline-flex nct-items-center nct-rounded-full nct-border nct-px-2.5 nct-py-0.5 nct-text-xs nct-font-semibold nct-transition-colors focus:nct-outline-none focus:nct-ring-2 focus:nct-ring-ring focus:nct-ring-offset-2", {
+    variants: {
+        variant: {
+            default: "nct-border-transparent nct-bg-primary nct-text-primary-foreground hover:nct-bg-primary/80",
+            secondary: "nct-border-transparent nct-bg-secondary nct-text-secondary-foreground hover:nct-bg-secondary/80",
+            destructive: "nct-border-transparent nct-bg-destructive nct-text-destructive-foreground hover:nct-bg-destructive/80",
+            outline: "nct-text-foreground"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+function Badge({ className, variant, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(badgeVariants({
+            variant
+        }), className),
+        ...props
+    });
+}
+
+const CacheEntry = (props)=>{
+    const cacheEntryRevalidateLeft = useMemo(()=>{
+        if (!props.cacheEntry.data?.headers.date || !props.cacheEntry.revalidate) {
+            return;
+        }
+        const cacheEntryDate = new Date(props.cacheEntry.data?.headers.date);
+        const msDiff = new Date().getTime() - cacheEntryDate.getTime();
+        return Math.floor(props.cacheEntry.revalidate - msDiff / 1000);
+    }, [
+        props.cacheEntry.data?.headers.date,
+        props.cacheEntry.revalidate
+    ]);
+    const isStale = cacheEntryRevalidateLeft ? cacheEntryRevalidateLeft < 0 : false;
+    return /*#__PURE__*/ jsxs(TableRow, {
+        children: [
+            /*#__PURE__*/ jsx(TableCell, {
+                className: "nct-truncate nct-max-w-[25vw]",
+                children: props.cacheEntry.data?.url
+            }),
+            /*#__PURE__*/ jsx(TableCell, {
+                title: cacheEntryRevalidateLeft?.toString() ?? "-",
+                children: isStale ? /*#__PURE__*/ jsx(Badge, {
+                    children: "STALE"
+                }) : props.cacheEntry.revalidate ?? "-"
+            }),
+            /*#__PURE__*/ jsx(TableCell, {
+                className: "nct-break-before-all",
+                children: props.cacheEntry.tags.join("\n")
+            }),
+            /*#__PURE__*/ jsx(TableCell, {
+                children: props.cacheEntry.data?.headers.date
+            })
+        ]
+    });
+};
+
+export { CacheEntry as C, TableHead as T, TableBody as a, Table as b, cn as c, TableHeader as d, TableRow as e };

package/dist/es/cache-panel-context-client-D5NKXXpF.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useState, createContext } from 'react';
+
+const CachePanelContext = /*#__PURE__*/ createContext({
+    isOpen: false,
+    toggleOpen: ()=>{},
+    setSorting: ()=>{}
+});
+const useCachePanelContext = ()=>React__default.useContext(CachePanelContext);
+const CachePanelContextProvider = ({ children })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [sorting, setSorting] = useState(undefined);
+    const toggleOpen = ()=>{
+        setIsOpen(!isOpen);
+    };
+    return /*#__PURE__*/ jsx(CachePanelContext.Provider, {
+        value: {
+            isOpen,
+            toggleOpen,
+            setSorting,
+            sorting
+        },
+        children: children
+    });
+};
+
+export { CachePanelContextProvider as C, useCachePanelContext as u };

package/dist/es/cache-panel-head-client-DCJPailN.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { T as TableHead, c as cn } from './cache-entry-client-UcY_Onfg.js';
+import { ArrowDownAZIcon, ArrowUpAZIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { u as useCachePanelContext } from './cache-panel-context-client-D5NKXXpF.js';
+
+const CachePanelHead = ({ sortingProperty, children, ...props })=>{
+    const { setSorting, sorting } = useCachePanelContext();
+    const sortingDirection = useMemo(()=>{
+        if (!sorting || sorting.key !== sortingProperty) {
+            return;
+        }
+        return sorting.direction;
+    }, [
+        sorting,
+        sortingProperty
+    ]);
+    const onHeadClick = ()=>{
+        if (sorting && sorting.key === sortingProperty) {
+            setSorting({
+                key: sortingProperty,
+                direction: sorting.direction === "asc" ? "desc" : "asc"
+            });
+        } else {
+            setSorting({
+                key: sortingProperty,
+                direction: "asc"
+            });
+        }
+    };
+    return /*#__PURE__*/ jsx(TableHead, {
+        onClick: onHeadClick,
+        ...props,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cn("nct-flex nct-items-center nct-gap-2", sorting?.key === sortingProperty && "nct-underline"),
+            children: [
+                children,
+                sortingDirection === "asc" && /*#__PURE__*/ jsx(ArrowDownAZIcon, {}),
+                sortingDirection === "desc" && /*#__PURE__*/ jsx(ArrowUpAZIcon, {})
+            ]
+        })
+    });
+};
+
+export { CachePanelHead as C };

package/dist/es/cache-panel-table-client-DUbKWZdy.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { a as TableBody, C as CacheEntry } from './cache-entry-client-UcY_Onfg.js';
+import { useMemo } from 'react';
+import { u as useCachePanelContext } from './cache-panel-context-client-D5NKXXpF.js';
+
+const sortCacheEntryByKey = (key, a, b)=>{
+    switch(key){
+        case "url":
+            if (!a.data || !b.data) {
+                return 0;
+            }
+            return a.data.url.localeCompare(b.data.url);
+        case "revalidate":
+            return (a.revalidate ?? 0) - (b.revalidate ?? 0);
+        case "tags":
+            if (a.tags.length === 0 || b.tags.length === 0) {
+                return 0;
+            }
+            return a.tags[0]?.localeCompare(b.tags[0] ?? "") ?? 0;
+        case "timestamp":
+            {
+                if (!a.data?.headers.date || !b.data?.headers.date) {
+                    return 0;
+                }
+                return new Date(b.data.headers.date).getTime() - new Date(a.data.headers.date).getTime();
+            }
+    }
+};
+const CachePanelTable = ({ entries })=>{
+    const { sorting } = useCachePanelContext();
+    const sortedEntries = useMemo(()=>{
+        if (!sorting) {
+            return entries;
+        }
+        const { key, direction } = sorting;
+        return entries.toSorted((a, b)=>{
+            return sortCacheEntryByKey(key, a[1], b[1]) * (direction === "asc" ? 1 : -1);
+        });
+    }, [
+        entries,
+        sorting
+    ]);
+    return /*#__PURE__*/ jsxs(TableBody, {
+        children: [
+            sortedEntries.length === 0 && /*#__PURE__*/ jsx("div", {
+                children: "No cache entries"
+            }),
+            sortedEntries.map(([file, cacheEntry])=>/*#__PURE__*/ jsx(CacheEntry, {
+                    cacheEntry: cacheEntry
+                }, file))
+        ]
+    });
+};
+
+export { CachePanelTable as C };

package/dist/es/cache-panel-trigger-client-D3ag_ezj.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { c as cn } from './cache-entry-client-UcY_Onfg.js';
+import { u as useCachePanelContext } from './cache-panel-context-client-D5NKXXpF.js';
+
+const buttonVariants = cva("nct-inline-flex nct-items-center nct-justify-center nct-whitespace-nowrap nct-rounded-md nct-text-sm nct-font-medium nct-ring-offset-background nct-transition-colors focus-visible:nct-outline-none focus-visible:nct-ring-2 focus-visible:nct-ring-ring focus-visible:nct-ring-offset-2 disabled:nct-pointer-events-none disabled:nct-opacity-50", {
+    variants: {
+        variant: {
+            default: "nct-bg-primary nct-text-primary-foreground hover:nct-bg-primary/90",
+            destructive: "nct-bg-destructive nct-text-destructive-foreground hover:nct-bg-destructive/90",
+            outline: "nct-border nct-border-input nct-bg-background hover:nct-bg-accent hover:nct-text-accent-foreground",
+            secondary: "nct-bg-secondary nct-text-secondary-foreground hover:nct-bg-secondary/80",
+            ghost: "hover:nct-bg-accent hover:nct-text-accent-foreground",
+            link: "nct-text-primary nct-underline-offset-4 hover:nct-underline"
+        },
+        size: {
+            default: "nct-h-10 nct-px-4 nct-py-2",
+            sm: "nct-h-9 nct-rounded-md nct-px-3",
+            lg: "nct-h-11 nct-rounded-md nct-px-8",
+            icon: "nct-h-10 nct-w-10"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+const Button = /*#__PURE__*/ React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref)=>{
+    const Comp = asChild ? Slot : "button";
+    return /*#__PURE__*/ jsx(Comp, {
+        className: cn(buttonVariants({
+            variant,
+            size,
+            className
+        })),
+        ref: ref,
+        ...props
+    });
+});
+Button.displayName = "Button";
+
+function CachePanelTrigger(props) {
+    const { toggleOpen } = useCachePanelContext();
+    return /*#__PURE__*/ jsx(Button, {
+        variant: "ghost",
+        size: "icon",
+        onClick: toggleOpen,
+        ...props
+    });
+}
+
+export { Button as B, CachePanelTrigger as C };

package/dist/es/cache-panel-wrapper-client-BFFOMRXO.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { b as Table } from './cache-entry-client-UcY_Onfg.js';
+import 'react';
+import { u as useCachePanelContext } from './cache-panel-context-client-D5NKXXpF.js';
+
+const CacheTable = (props)=>{
+    const { isOpen } = useCachePanelContext();
+    if (!isOpen) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx("div", {
+        className: "nct-fixed nct-bottom-0 nct-inset-x-0 nct-z-50 nct-bg-background nct-overflow-x-auto nct-max-h-[35vh]",
+        children: /*#__PURE__*/ jsx(Table, {
+            children: props.children
+        })
+    });
+};
+
+export { CacheTable as C };

package/dist/es/index.d.mts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function NextCacheToolbar(): Promise<react_jsx_runtime.JSX.Element>;
+
+export { NextCacheToolbar };

package/dist/es/index.mjs

@@ -0,0 +1,113 @@
+'use server';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { d as TableHeader, e as TableRow, T as TableHead } from './cache-entry-client-UcY_Onfg.js';
+import { Braces, PanelBottomCloseIcon } from 'lucide-react';
+import { existsSync } from 'fs';
+import { readdir, readFile } from 'node:fs/promises';
+import { z } from 'zod';
+import { C as CachePanelContextProvider } from './cache-panel-context-client-D5NKXXpF.js';
+import { C as CachePanelHead } from './cache-panel-head-client-DCJPailN.js';
+import { C as CachePanelTable } from './cache-panel-table-client-DUbKWZdy.js';
+import { C as CachePanelTrigger } from './cache-panel-trigger-client-D3ag_ezj.js';
+import { C as CacheTable } from './cache-panel-wrapper-client-BFFOMRXO.js';
+import { R as RefreshDataButton } from './refresh-data-button-client-Bh7PpxMP.js';
+
+const nextCacheFileSchema = z.object({
+    data: z.object({
+        body: z.string(),
+        headers: z.record(z.string(), z.string()),
+        status: z.number(),
+        url: z.string()
+    }).optional(),
+    kind: z.union([
+        z.literal("FETCH"),
+        z.unknown()
+    ]),
+    revalidate: z.number().optional(),
+    tags: z.array(z.string()).optional().default([])
+});
+
+const cachePath = ".next/cache/fetch-cache";
+const getCacheFiles = async ()=>{
+    if (!existsSync(cachePath)) {
+        return;
+    }
+    try {
+        const files = await readdir(cachePath);
+        const cacheFiles = new Map();
+        for (const file of files){
+            const fileContent = await readFile(`${cachePath}/${file}`);
+            const body = JSON.parse(fileContent.toString());
+            const cacheEntry = nextCacheFileSchema.parse(body);
+            if (!cacheEntry.data) {
+                continue;
+            }
+            cacheFiles.set(file, cacheEntry);
+        }
+        return cacheFiles;
+    } catch (error) {
+        console.error(error);
+        throw Error("Error reading cache files");
+    }
+};
+
+async function NextCacheToolbar() {
+    const files = await getCacheFiles();
+    const cacheEntries = Array.from(files?.entries() ?? []);
+    return /*#__PURE__*/ jsx("div", {
+        className: "dark",
+        children: /*#__PURE__*/ jsxs(CachePanelContextProvider, {
+            children: [
+                /*#__PURE__*/ jsx(CachePanelTrigger, {
+                    className: "nct-fixed nct-rounded-full nct-bottom-4 nct-right-4 nct-bg-gradient-to-r nct-from-fuchsia-500 nct-to-cyan-500",
+                    children: /*#__PURE__*/ jsx(Braces, {})
+                }),
+                /*#__PURE__*/ jsxs(CacheTable, {
+                    children: [
+                        /*#__PURE__*/ jsx(TableHeader, {
+                            className: "nct-sticky nct-top-0 nct-bg-background",
+                            children: /*#__PURE__*/ jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ jsx(CachePanelHead, {
+                                        sortingProperty: "url",
+                                        className: "nct-w-[300px]",
+                                        children: "URL"
+                                    }),
+                                    /*#__PURE__*/ jsx(CachePanelHead, {
+                                        sortingProperty: "revalidate",
+                                        children: "Revalidate"
+                                    }),
+                                    /*#__PURE__*/ jsx(CachePanelHead, {
+                                        sortingProperty: "tags",
+                                        children: "Tags"
+                                    }),
+                                    /*#__PURE__*/ jsx(CachePanelHead, {
+                                        sortingProperty: "timestamp",
+                                        className: "nct-w-[300px]",
+                                        children: "Timestamp"
+                                    }),
+                                    /*#__PURE__*/ jsx(TableHead, {
+                                        children: /*#__PURE__*/ jsxs("div", {
+                                            className: "nct-flex nct-items-center nct-justify-end nct-gap-2",
+                                            children: [
+                                                /*#__PURE__*/ jsx(RefreshDataButton, {}),
+                                                /*#__PURE__*/ jsx(CachePanelTrigger, {
+                                                    children: /*#__PURE__*/ jsx(PanelBottomCloseIcon, {})
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(CachePanelTable, {
+                            entries: cacheEntries
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+export { NextCacheToolbar };

package/dist/es/refresh-data-button-client-Bh7PpxMP.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { B as Button } from './cache-panel-trigger-client-D3ag_ezj.js';
+import { c as cn } from './cache-entry-client-UcY_Onfg.js';
+import { Loader2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
+
+function RefreshDataButton() {
+    const [isPending, startTransition] = useTransition();
+    const router = useRouter();
+    const refresh = ()=>{
+        startTransition(()=>{
+            router.refresh();
+        });
+    };
+    return /*#__PURE__*/ jsx(Button, {
+        variant: "outline",
+        size: "icon",
+        onClick: refresh,
+        children: /*#__PURE__*/ jsx(Loader2, {
+            className: cn("nct-h-4 nct-w-4", {
+                "nct-animate-spin": isPending
+            })
+        })
+    });
+}
+
+export { RefreshDataButton as R };

package/dist/style.css

@@ -0,0 +1 @@
+/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-sans),ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--background:0 0% 100%;--foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--popover:0 0% 100%;--popover-foreground:222.2 47.4% 11.2%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--card:0 0% 100%;--card-foreground:222.2 47.4% 11.2%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 100% 50%;--destructive-foreground:210 40% 98%;--ring:215 20.2% 65.1%;--radius:0.5rem}.dark{--background:224 71% 4%;--foreground:213 31% 91%;--muted:223 47% 11%;--muted-foreground:215.4 16.3% 56.9%;--accent:216 34% 17%;--accent-foreground:210 40% 98%;--popover:224 71% 4%;--popover-foreground:215 20.2% 65.1%;--border:216 34% 17%;--input:216 34% 17%;--card:224 71% 4%;--card-foreground:213 31% 91%;--primary:210 40% 98%;--primary-foreground:222.2 47.4% 1.2%;--secondary:222.2 47.4% 11.2%;--secondary-foreground:210 40% 98%;--destructive:0 63% 31%;--destructive-foreground:210 40% 98%;--ring:216 34% 17%;--radius:0.5rem}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.nct-fixed{position:fixed}.nct-sticky{position:sticky}.nct-inset-x-0{left:0;right:0}.nct-bottom-0{bottom:0}.nct-bottom-4{bottom:1rem}.nct-right-4{right:1rem}.nct-top-0{top:0}.nct-z-50{z-index:50}.nct-mt-4{margin-top:1rem}.nct-flex{display:flex}.nct-inline-flex{display:inline-flex}.nct-h-10{height:2.5rem}.nct-h-11{height:2.75rem}.nct-h-12{height:3rem}.nct-h-4{height:1rem}.nct-h-9{height:2.25rem}.nct-max-h-\[35vh\]{max-height:35vh}.nct-w-10{width:2.5rem}.nct-w-4{width:1rem}.nct-w-\[300px\]{width:300px}.nct-w-full{width:100%}.nct-max-w-\[25vw\]{max-width:25vw}.nct-caption-bottom{caption-side:bottom}@keyframes nct-spin{to{transform:rotate(1turn)}}.nct-animate-spin{animation:nct-spin 1s linear infinite}.nct-break-before-all{-moz-column-break-before:all;break-before:all}.nct-items-center{align-items:center}.nct-justify-end{justify-content:flex-end}.nct-justify-center{justify-content:center}.nct-gap-2{gap:.5rem}.nct-overflow-hidden{overflow:hidden}.nct-overflow-x-auto{overflow-x:auto}.nct-truncate{overflow:hidden;text-overflow:ellipsis}.nct-truncate,.nct-whitespace-nowrap{white-space:nowrap}.nct-rounded-full{border-radius:9999px}.nct-rounded-md{border-radius:calc(var(--radius) - 2px)}.nct-border{border-width:1px}.nct-border-b{border-bottom-width:1px}.nct-border-t{border-top-width:1px}.nct-border-input{border-color:hsl(var(--input))}.nct-border-transparent{border-color:#0000}.nct-bg-background{background-color:hsl(var(--background))}.nct-bg-destructive{background-color:hsl(var(--destructive))}.nct-bg-muted\/50{background-color:hsl(var(--muted)/.5)}.nct-bg-popover{background-color:hsl(var(--popover))}.nct-bg-primary{background-color:hsl(var(--primary))}.nct-bg-secondary{background-color:hsl(var(--secondary))}.nct-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nct-from-fuchsia-500{--tw-gradient-from:#d946ef var(--tw-gradient-from-position);--tw-gradient-to:#d946ef00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nct-to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.nct-p-4{padding:1rem}.nct-px-2{padding-left:.5rem;padding-right:.5rem}.nct-px-2\.5{padding-left:.625rem;padding-right:.625rem}.nct-px-3{padding-left:.75rem;padding-right:.75rem}.nct-px-4{padding-left:1rem;padding-right:1rem}.nct-px-8{padding-left:2rem;padding-right:2rem}.nct-py-0{padding-top:0;padding-bottom:0}.nct-py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.nct-py-1{padding-top:.25rem;padding-bottom:.25rem}.nct-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.nct-py-2{padding-top:.5rem;padding-bottom:.5rem}.nct-text-left{text-align:left}.nct-align-middle{vertical-align:middle}.nct-text-sm{font-size:.875rem;line-height:1.25rem}.nct-text-xs{font-size:.75rem;line-height:1rem}.nct-font-medium{font-weight:500}.nct-font-semibold{font-weight:600}.nct-text-destructive-foreground{color:hsl(var(--destructive-foreground))}.nct-text-foreground{color:hsl(var(--foreground))}.nct-text-muted-foreground{color:hsl(var(--muted-foreground))}.nct-text-popover-foreground{color:hsl(var(--popover-foreground))}.nct-text-primary{color:hsl(var(--primary))}.nct-text-primary-foreground{color:hsl(var(--primary-foreground))}.nct-text-secondary-foreground{color:hsl(var(--secondary-foreground))}.nct-underline{text-decoration-line:underline}.nct-underline-offset-4{text-underline-offset:4px}.nct-shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nct-ring-offset-background{--tw-ring-offset-color:hsl(var(--background))}.nct-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nct-animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nct-fade-in-0{--tw-enter-opacity:0}.nct-zoom-in-95{--tw-enter-scale:.95}.hover\:nct-bg-accent:hover{background-color:hsl(var(--accent))}.hover\:nct-bg-destructive\/80:hover{background-color:hsl(var(--destructive)/.8)}.hover\:nct-bg-destructive\/90:hover{background-color:hsl(var(--destructive)/.9)}.hover\:nct-bg-muted\/50:hover{background-color:hsl(var(--muted)/.5)}.hover\:nct-bg-primary\/80:hover{background-color:hsl(var(--primary)/.8)}.hover\:nct-bg-primary\/90:hover{background-color:hsl(var(--primary)/.9)}.hover\:nct-bg-secondary\/80:hover{background-color:hsl(var(--secondary)/.8)}.hover\:nct-text-accent-foreground:hover{color:hsl(var(--accent-foreground))}.hover\:nct-underline:hover{text-decoration-line:underline}.focus\:nct-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:nct-ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:nct-ring-ring:focus{--tw-ring-color:hsl(var(--ring))}.focus\:nct-ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:nct-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\:nct-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:nct-ring-ring:focus-visible{--tw-ring-color:hsl(var(--ring))}.focus-visible\:nct-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\:nct-pointer-events-none:disabled{pointer-events:none}.disabled\:nct-opacity-50:disabled{opacity:.5}.data-\[state\=selected\]\:nct-bg-muted[data-state=selected]{background-color:hsl(var(--muted))}.data-\[state\=closed\]\:nct-animate-out[data-state=closed]{animation-name:exit;animation-duration:.15s;--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial}.data-\[state\=closed\]\:nct-fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:nct-zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[side\=bottom\]\:nct-slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:-0.5rem}.data-\[side\=left\]\:nct-slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:0.5rem}.data-\[side\=right\]\:nct-slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:-0.5rem}.data-\[side\=top\]\:nct-slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:0.5rem}.\[\&\:has\(\[role\=checkbox\]\)\]\:nct-pr-0:has([role=checkbox]){padding-right:0}.\[\&\>tr\]\:last\:nct-border-b-0:last-child>tr{border-bottom-width:0}.\[\&_tr\:last-child\]\:nct-border-0 tr:last-child{border-width:0}.\[\&_tr\]\:nct-border-b tr{border-bottom-width:1px}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "next-cache-toolbar",
+  "version": "0.1.0",
+  "description": "Toolbar with all cached data in Next.js app router",
+  "scripts": {
+    "prepublish": "npm run build",
+    "build": "rimraf dist && bunchee && tailwindcss -i src/style.css -o dist/style.css --minify",
+    "dev": "concurrently --names 'compile,tailwind,type-check' --prefix-colors 'green,white,white' --kill-others 'npm run dev:compile' 'npm run dev:tailwind' 'npm run dev:type-check'",
+    "dev:type-check": "tsc --watch --preserveWatchOutput --noEmit",
+    "dev:compile": "bunchee --watch",
+    "dev:tailwind": "tailwindcss -i src/style.css -o dist/style.css --watch"
+  },
+  "author": "Kajetan Szymczak <kajtszymczak@gmail.com>",
+  "engines": {
+    "node": ">=18",
+    "pnpm": ">=8"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.344.0",
+    "next": "^14",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.5.3",
+    "@types/node": "^18.19.21",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.18",
+    "bunchee": "^4.4.8",
+    "concurrently": "^8.2.2",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.35",
+    "rimraf": "^5.0.5",
+    "tailwindcss": "^3.4.1",
+    "turbo": "^1.12.4",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "next": "^14",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.mjs",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/es/index.d.mts",
+        "default": "./dist/es/index.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./style.css": {
+      "import": {
+        "default": "./dist/style.css"
+      },
+      "require": {
+        "default": "./dist/style.css"
+      }
+    }
+  }
+}

package/readme.md

@@ -0,0 +1,28 @@
+# next-cache-toolbar ![next-cache-toolbar minzip package size](https://img.shields.io/bundlephobia/minzip/next-cache-toolbar) [![Version](https://img.shields.io/npm/v/next-cache-toolbar.svg?colorB=green)](https://www.npmjs.com/package/next-cache-toolbar)
+
+A toolbar that helps to identify [data cache](https://nextjs.org/docs/app/building-your-application/caching#data-cache) entries
+
+![Example](./assets/example_image.png)
+
+## Use 
+
+`next-cache-toolbar` requires to use [app router](https://nextjs.org/docs/app/building-your-application/caching#data-cache) and [next-themes](
+You'll need to update your `app/layout.jsx` to use next-themes. The simplest `layout` looks like this:
+
+```js
+// app/layout.jsx
+import "next-cache-toolbar/style.css";
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head />
+      <body>
+        {children}
+        {process.env.NODE_ENV === "development" && <NextCacheToolbar />}
+      </body>
+    </html>
+  )
+}
+```
+