@praxisjs/devtools 0.1.0

package/src/plugins/types.ts

@@ -0,0 +1,10 @@
+import type { FunctionComponent } from "@praxisjs/shared";
+
+import type { Registry } from "@core/registry";
+
+export interface DevtoolsPlugin {
+  id: string;
+  label: string;
+  setup?: (registry: Registry) => void;
+  component: FunctionComponent<{ registry: Registry }>;
+}

package/src/ui/dev-tools.tsx

@@ -0,0 +1,121 @@
+import logo from "@assets/logo.svg";
+import unoStyles from "@assets/uno.generated.css?inline";
+import { Registry } from "@core/registry";
+import { ComponentsPlugin } from "@plugins/components";
+import { SignalsPlugin } from "@plugins/signals";
+import { TimelinePlugin } from "@plugins/timeline";
+import unoReset from "@unocss/reset/tailwind-v4.css?inline";
+
+import { signal } from "@praxisjs/core";
+import { render } from "@praxisjs/runtime";
+
+import { Panel } from "./panel";
+
+import type { DevtoolsPlugin } from "@plugins/types";
+
+const DEFAULT_PLUGINS: DevtoolsPlugin[] = [
+  SignalsPlugin,
+  ComponentsPlugin,
+  TimelinePlugin,
+];
+
+export interface DevToolsOptions {
+  plugins?: DevtoolsPlugin[];
+}
+
+function DevToolsApp({
+  plugins,
+  registry,
+}: {
+  plugins: DevtoolsPlugin[];
+  registry: Registry;
+}) {
+  const open = signal(false);
+
+  return (
+    <div>
+      {() =>
+        open() ? (
+          <Panel
+            plugins={plugins}
+            registry={registry}
+            onClose={() => {
+              open.set(false);
+            }}
+          />
+        ) : (
+          <button
+            onClick={() => {
+              open.set(true);
+            }}
+            class="fixed bottom-5 right-5 z-[2147483647] flex items-center gap-1 pl-[10px] pr-[14px] h-[32px] rounded-xl font-sans font-semibold text-[12px] text-accent bg-header border border-border cursor-pointer select-none shadow-[0_8px_32px_rgba(0,0,0,0.7)] transition-all duration-200 hover:border-accent hover:bg-soft hover:shadow-[0_8px_32px_rgba(56,189,248,0.1)]"
+          >
+            <img class="h-[13px] w-[13px]" src={logo} />
+            <span class="text-[10px] font-bold text-accent tracking-widest uppercase">
+              devtools
+            </span>
+          </button>
+        )
+      }
+    </div>
+  );
+}
+
+export const DevTools = {
+  plugins: [...DEFAULT_PLUGINS] as DevtoolsPlugin[],
+  host: null as HTMLElement | null,
+  cleanup: null as (() => void) | null,
+
+  init(options: DevToolsOptions = {}) {
+    if (this.host) return;
+
+    if (options.plugins) {
+      this.plugins = options.plugins;
+    }
+
+    this.plugins.forEach((p) => p.setup?.(Registry.instance));
+
+    const host = document.createElement("div");
+    host.id = "praxisjs-devtools";
+    document.body.appendChild(host);
+    this.host = host;
+
+    const shadow = host.attachShadow({ mode: "open" });
+
+    const styleEl = document.createElement("style");
+    styleEl.textContent = unoReset + unoStyles;
+    shadow.appendChild(styleEl);
+
+    const container = document.createElement("div");
+    shadow.appendChild(container);
+
+    this.cleanup = render(
+      <DevToolsApp plugins={this.plugins} registry={Registry.instance} />,
+      container,
+    );
+  },
+
+  registerPlugin(plugin: DevtoolsPlugin) {
+    if (this.plugins.find((p) => p.id === plugin.id)) return;
+    plugin.setup?.(Registry.instance);
+    this.plugins.push(plugin);
+    this.remount();
+  },
+
+  get registry() {
+    return Registry.instance;
+  },
+
+  remount() {
+    if (!this.host) return;
+
+    const shadow = this.host.shadowRoot as ShadowRoot;
+    const container = shadow.querySelector("div:last-child") as HTMLElement;
+
+    this.cleanup?.();
+    this.cleanup = render(
+      <DevToolsApp plugins={this.plugins} registry={Registry.instance} />,
+      container,
+    );
+  },
+};

package/src/ui/panel.tsx

@@ -0,0 +1,225 @@
+import logo from "@assets/logo.svg";
+import {
+  EllipsisVerticalIcon,
+  PanelBottomIcon,
+  PanelLeftIcon,
+  PanelRightIcon,
+  PanelTopIcon,
+  XIcon,
+} from "@icons";
+import { IconButton } from "@shared/icon-button";
+
+import { signal } from "@praxisjs/core";
+import type { Component } from "@praxisjs/shared";
+
+import type { Registry } from "@core/registry";
+import type { DevtoolsPlugin } from "@plugins/types";
+
+interface PanelProps {
+  plugins: DevtoolsPlugin[];
+  registry: Registry;
+  onClose: () => void;
+}
+
+type Dock = "bottom" | "top" | "left" | "right";
+
+const MIN_HEIGHT = 180;
+const DEFAULT_HEIGHT = 300;
+const MIN_WIDTH = 240;
+const DEFAULT_WIDTH = 380;
+
+const DOCK_ICONS: Record<Dock, Component> = {
+  bottom: PanelBottomIcon,
+  top: PanelTopIcon,
+  left: PanelLeftIcon,
+  right: PanelRightIcon,
+};
+
+export function Panel({ plugins, registry, onClose }: PanelProps) {
+  const activeTab = signal(plugins[0]?.id ?? "");
+  const dock = signal<Dock>("bottom");
+  const dockMenuOpen = signal(false);
+  const bottomSize = signal(DEFAULT_HEIGHT);
+  const vertSize = signal(DEFAULT_WIDTH);
+
+  const handleMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const d = dock();
+    const startSize = d === "bottom" || d === "top" ? bottomSize() : vertSize();
+
+    const onMove = (ev: MouseEvent) => {
+      const d = dock();
+      if (d === "bottom") {
+        bottomSize.set(
+          Math.max(
+            MIN_HEIGHT,
+            Math.min(
+              window.innerHeight * 0.85,
+              startSize + (startY - ev.clientY),
+            ),
+          ),
+        );
+      } else if (d === "top") {
+        bottomSize.set(
+          Math.max(
+            MIN_HEIGHT,
+            Math.min(
+              window.innerHeight * 0.85,
+              startSize + (ev.clientY - startY),
+            ),
+          ),
+        );
+      } else if (d === "left") {
+        vertSize.set(
+          Math.max(
+            MIN_WIDTH,
+            Math.min(
+              window.innerWidth * 0.6,
+              startSize + (ev.clientX - startX),
+            ),
+          ),
+        );
+      } else {
+        vertSize.set(
+          Math.max(
+            MIN_WIDTH,
+            Math.min(
+              window.innerWidth * 0.6,
+              startSize + (startX - ev.clientX),
+            ),
+          ),
+        );
+      }
+    };
+
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+
+  return (
+    <div
+      class={() => {
+        const d = dock();
+        if (d === "top")
+          return "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]";
+        if (d === "left")
+          return "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]";
+        if (d === "right")
+          return "flex fixed right-0 top-0 h-screen z-[2147483647]";
+        return "flex flex-col fixed bottom-0 left-0 w-full z-[2147483647]";
+      }}
+    >
+      <div
+        class={() => {
+          const d = dock();
+          if (d === "bottom" || d === "top")
+            return "h-1 cursor-[ns-resize] bg-transparent hover:bg-accent transition-colors duration-200";
+          return "w-1 cursor-[ew-resize] bg-transparent hover:bg-accent transition-colors duration-200";
+        }}
+        onMouseDown={handleMouseDown}
+      />
+      <div
+        class={() => {
+          const d = dock();
+          if (d === "top") return "w-full h-full bg-bg border-b border-border";
+          if (d === "left") return "w-full h-full bg-bg border-r border-border";
+          if (d === "right")
+            return "w-full h-full bg-bg border-l border-border";
+          return "w-full h-full bg-bg border-t border-border";
+        }}
+        style={() => {
+          const d = dock();
+          return d === "bottom" || d === "top"
+            ? { height: `${bottomSize().toString()}px` }
+            : { width: `${vertSize().toString()}px` };
+        }}
+      >
+        <div class="flex flex-col flex-1 w-full h-full overflow-hidden">
+          <div class="flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]">
+            <div class="flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0">
+              <img class="h-[13px] w-[13px]" src={logo} />
+              <span class="text-[10px] font-bold text-accent tracking-widest uppercase">
+                praxisjs
+              </span>
+            </div>
+
+            <div class="flex items-stretch flex-1">
+              {plugins.map((p) => (
+                <button
+                  key={p.id}
+                  class={() =>
+                    activeTab() === p.id
+                      ? "relative flex items-center px-3 text-[11px] font-semibold text-accent cursor-pointer"
+                      : "flex items-center px-3 text-[11px] text-muted cursor-pointer hover:text-text transition-colors duration-150"
+                  }
+                  onClick={() => {
+                    activeTab.set(p.id);
+                  }}
+                >
+                  {p.label}
+                  {() =>
+                    activeTab() === p.id ? (
+                      <span class="absolute bottom-0 left-0 right-0 h-[2px] bg-accent" />
+                    ) : null
+                  }
+                </button>
+              ))}
+            </div>
+
+            <div class="flex items-center gap-[2px] shrink-0">
+              <div class="relative">
+                <IconButton
+                  title="Dock position"
+                  icon={EllipsisVerticalIcon}
+                  active={() => dockMenuOpen()}
+                  onClick={() => {
+                    dockMenuOpen.set(!dockMenuOpen());
+                  }}
+                />
+                {() =>
+                  dockMenuOpen() ? (
+                    <div class="absolute right-0 top-full mt-1 flex gap-[2px] bg-bg border border-border rounded-md shadow-lg p-1 z-10">
+                      {(["bottom", "top", "left", "right"] as Dock[]).map(
+                        (v) => (
+                          <IconButton
+                            key={v}
+                            title={`Dock ${v}`}
+                            active={() => dock() === v}
+                            icon={DOCK_ICONS[v]}
+                            onClick={() => {
+                              dock.set(v);
+                              dockMenuOpen.set(false);
+                            }}
+                          />
+                        ),
+                      )}
+                    </div>
+                  ) : null
+                }
+              </div>
+
+              <div class="w-px h-3 bg-border mx-1" />
+
+              <IconButton title="Close" icon={XIcon} onClick={onClose} />
+            </div>
+          </div>
+
+          <div class="flex-1 overflow-hidden flex flex-col">
+            {() => {
+              const plugin = plugins.find((p) => p.id === activeTab());
+              const Active = plugin?.component;
+              return Active ? <Active registry={registry} /> : null;
+            }}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/shared/empty-state.tsx

@@ -0,0 +1,12 @@
+export function EmptyState({ message }: { message: string }) {
+  return (
+    <div class="flex flex-col items-center justify-center gap-2 py-12">
+      <span class="text-subtle text-[20px] leading-none select-none font-mono">
+        —
+      </span>
+      <p class="text-subtle text-[11px] text-center leading-relaxed max-w-[200px]">
+        {message}
+      </p>
+    </div>
+  );
+}

package/src/ui/shared/icon-button.tsx

@@ -0,0 +1,30 @@
+import type { Component } from "@praxisjs/shared";
+
+export function IconButton({
+  title,
+  active,
+  icon: Icon,
+  onClick,
+}: {
+  title?: string;
+  active?: boolean | (() => boolean);
+  icon: Component;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      title={title}
+      onClick={onClick}
+      class={() => {
+        const isActive = typeof active === "function" ? active() : active;
+        return `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${
+          isActive
+            ? "text-accent bg-soft color-white"
+            : "text-subtle hover:color-muted hover:bg-section"
+        }`;
+      }}
+    >
+      <Icon />
+    </button>
+  );
+}

package/src/ui/shared/panel-section.tsx

@@ -0,0 +1,18 @@
+import type { Children } from "@praxisjs/shared";
+
+export function PanelSection({
+  label,
+  children,
+}: {
+  label: string;
+  children?: Children;
+}) {
+  return (
+    <div class="border-b border-border">
+      <div class="px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border">
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/ui/shared/search-input.tsx

@@ -0,0 +1,18 @@
+export function SearchInput({
+  placeholder,
+  onInput,
+}: {
+  placeholder: string;
+  onInput: (value: string) => void;
+}) {
+  return (
+    <input
+      type="text"
+      placeholder={placeholder}
+      class="w-full bg-input border border-border rounded-lg text-text text-[11px] px-3 py-[5px] outline-none box-border transition-shadow duration-150"
+      onInput={(e: InputEvent) => {
+        onInput((e.target as HTMLInputElement).value);
+      }}
+    />
+  );
+}

package/src/ui/shared/side-panel.tsx

@@ -0,0 +1,18 @@
+import type { Children } from "@praxisjs/shared";
+
+export function SidePanel({
+  children,
+  width = "280px",
+}: {
+  children?: Children;
+  width?: string;
+}) {
+  return (
+    <div
+      class="shrink-0 border-l border-border flex flex-col overflow-hidden"
+      style={{ width }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/utils/format-time.ts

@@ -0,0 +1,7 @@
+export function time(ts: number, prefix?: string): string {
+  const localPrefix = prefix ? ` ${prefix}` : "";
+  const diff = Date.now() - ts;
+  if (diff < 1000) return `${diff.toString()}ms${localPrefix}`;
+  if (diff < 60_000) return `${(diff / 1000).toFixed(1)}s${localPrefix}`;
+  return `${Math.floor(diff / 60_000).toString()}m${localPrefix}`;
+}

package/src/utils/format-value.ts

@@ -0,0 +1,13 @@
+export function formatValue(value: unknown): string {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "[object]";
+    }
+  }
+  return String(value as unknown);
+}

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.css?inline" {
+  const content: string;
+  export default content;
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./",
+    "jsxImportSource": "@praxisjs/jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./src/ui/shared/*"],
+      "@assets/*": ["./assets/*"],
+      "@core/*": ["./src/core/*"],
+      "@plugins/*": ["./src/plugins/*"],
+      "@decorators/*": ["./src/decorators/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@icons": ["./src/icons/index.ts"]
+    }
+  },
+  "include": ["src", "uno.config.ts", "vite.config.ts"]
+}

package/uno.config.ts

@@ -0,0 +1,57 @@
+import presetWind3 from "@unocss/preset-wind3";
+import { defineConfig } from "unocss";
+
+export default defineConfig({
+  presets: [presetWind3()],
+
+  theme: {
+    colors: {
+      bg: "#0f0d17",
+      header: "#161326",
+      section: "#1b1830",
+      border: "rgba(155,144,230,0.25)",
+
+      text: "#f4f2ff",
+      muted: "#c7c3e6",
+      subtle: "#6f6a8f",
+
+      selected: "#221e3d",
+      input: "#1b1830",
+
+      accent: "#9b90e6",
+      accent2: "#7c6dd6",
+      accent3: "#6d5bbd",
+      soft: "rgba(155,144,230,0.18)",
+
+      success: "#0ea57a",
+      warn: "#d97706",
+      error: "#dc2626",
+      important: "#9b90e6",
+    },
+  },
+
+  preflights: [
+    {
+      getCSS: () => `
+        :host { all: initial; display: block; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
+        * { box-sizing: border-box; }
+
+        input::placeholder { color: #6f6a8f; }
+        input:focus {
+          outline: none;
+          box-shadow: 0 0 0 2px rgba(155,144,230,0.3);
+        }
+
+        ::-webkit-scrollbar { width: 4px; height: 4px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb {
+          background: rgba(155,144,230,0.2);
+          border-radius: 2px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background: rgba(155,144,230,0.4);
+        }
+      `,
+    },
+  ],
+});

package/vite.config.ts

@@ -0,0 +1,42 @@
+import path from "path";
+
+import UnoCSS from "unocss/vite";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [UnoCSS(), dts({ rollupTypes: true })],
+  esbuild: {
+    jsxImportSource: "@praxisjs/jsx",
+    jsx: "automatic",
+  },
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      formats: ["es"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: [
+        "@praxisjs/core",
+        "@praxisjs/jsx",
+        "@praxisjs/jsx/jsx-runtime",
+        "@praxisjs/runtime",
+        "@praxisjs/shared",
+      ],
+    },
+    cssCodeSplit: false,
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+      "@shared": path.resolve(__dirname, "src/ui/shared"),
+      "@assets": path.resolve(__dirname, "assets"),
+      "@core": path.resolve(__dirname, "src/core"),
+      "@plugins": path.resolve(__dirname, "src/plugins"),
+      "@decorators": path.resolve(__dirname, "src/decorators"),
+      "@utils": path.resolve(__dirname, "src/utils"),
+      "@icons": path.resolve(__dirname, "src/icons"),
+    },
+  },
+});