@vezham/devtools 26.0.0-alpha.5 → 26.0.0-alpha.7

package/README.md

@@ -1 +1,3 @@
 # @vezham/devtools
+
+Optional development panels for the app runtime.

package/dist/index.css

@@ -0,0 +1 @@
+@source './**/*.js';

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export {};
+export * from './lib';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+import { Devtools } from "./lib/index.js";
+export { Devtools };

package/dist/lib/devtools-panel.d.ts

@@ -0,0 +1,8 @@
+import type { DevtoolsApp } from './types';
+interface Props {
+    app: DevtoolsApp;
+    theme: 'dark' | 'light';
+}
+export declare const DevtoolsPanel: ({ app, theme }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=devtools-panel.d.ts.map

package/dist/lib/devtools-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-panel.d.ts","sourceRoot":"","sources":["../../src/lib/devtools-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,UAAU,KAAK;IACb,GAAG,EAAE,WAAW,CAAA;IAChB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAA;CACxB;AAED,eAAO,MAAM,aAAa,GAAI,gBAAgB,KAAK,gCA6BlD,CAAA"}

package/dist/lib/devtools-panel.js

@@ -0,0 +1,27 @@
+import { Fragment } from "react";
+import { Card, Typography } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/devtools-panel.tsx
+var DevtoolsPanel = ({ app, theme }) => /* @__PURE__ */ jsxs(Card, {
+	className: "m-4",
+	"data-theme": theme,
+	children: [/* @__PURE__ */ jsxs(Card.Header, { children: [/* @__PURE__ */ jsx(Card.Title, { children: "Application" }), /* @__PURE__ */ jsx(Card.Description, { children: "Runtime metadata" })] }), /* @__PURE__ */ jsx(Card.Content, { children: /* @__PURE__ */ jsx("dl", {
+		className: "grid grid-cols-[7rem_1fr] gap-x-3 gap-y-3",
+		children: [
+			["🆔 Identity", app.id],
+			["🏷️ Name", app.name],
+			["🔖 Version", app.version],
+			["🌍 Environment", app.environment],
+			["⚙️ Runtime", app.runtime]
+		].map(([label, value]) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Typography, {
+			color: "muted",
+			type: "body-sm",
+			children: label
+		}) }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Typography, {
+			type: "code",
+			children: value
+		}) })] }, label))
+	}) })]
+});
+//#endregion
+export { DevtoolsPanel };

package/dist/lib/index.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './types';
+export type { AppRuntime, DevtoolsApp, Props } from './types';
+export declare const Devtools: ({ app, env, router, query }: Props) => import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE7D,eAAO,MAAM,QAAQ,GAAI,6BAKtB,KAAK,uCA+BP,CAAA"}

package/dist/lib/index.js

@@ -0,0 +1,28 @@
+import { DevtoolsPanel } from "./devtools-panel.js";
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { hotkeysDevtoolsPlugin } from "@tanstack/react-hotkeys-devtools";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/index.tsx
+var Devtools = ({ app, env = true, router = true, query = true }) => {
+	if (!env) return null;
+	const plugins = [{
+		name: "Vezham Devtools",
+		render: (_element, { theme }) => /* @__PURE__ */ jsx(DevtoolsPanel, {
+			app,
+			theme
+		})
+	}, hotkeysDevtoolsPlugin()];
+	if (query) plugins.push({
+		name: "TanStack Query",
+		render: /* @__PURE__ */ jsx(ReactQueryDevtoolsPanel, {})
+	});
+	if (router) plugins.push({
+		name: "TanStack Router",
+		render: /* @__PURE__ */ jsx(TanStackRouterDevtoolsPanel, {})
+	});
+	return /* @__PURE__ */ jsx(TanStackDevtools, { plugins });
+};
+//#endregion
+export { Devtools };

package/dist/lib/types.d.ts

@@ -0,0 +1,16 @@
+type AppRuntime = 'next' | 'tanstack' | 'tanstack-docs' | 'vite';
+type DevtoolsApp = {
+    id: string;
+    name: string;
+    version: string;
+    environment: string;
+    runtime: AppRuntime;
+};
+interface Props {
+    app: DevtoolsApp;
+    env: boolean;
+    router?: boolean;
+    query?: boolean;
+}
+export type { AppRuntime, DevtoolsApp, Props };
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,MAAM,CAAA;AAEhE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,UAAU,CAAA;CACpB,CAAA;AAED,UAAU,KAAK;IACb,GAAG,EAAE,WAAW,CAAA;IAChB,GAAG,EAAE,OAAO,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,CAAA"}

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@vezham/devtools",
-  "version": "26.0.0-alpha.5",
+  "version": "26.0.0-alpha.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vezham/vx-fe-pkgs.git",
     "directory": "packages/devtools"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "type": "module",
   "exports": {
     ".": {
+      "style": "./dist/index.css",
       "@vx/fe-kit": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
@@ -19,9 +23,13 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
   "files": [
     "!**/*.tsbuildinfo",
     "dist",
     "LICENSE"
-  ]
+  ],
+  "dependencies": {
+    "@tanstack/react-hotkeys-devtools": "^0.7.0"
+  }
 }