dekit-cli 0.1.0

package/editor/src/devices.test.ts

@@ -0,0 +1,50 @@
+import { describe, test, expect } from "vitest";
+import { DEVICE_PRESETS, calcScale } from "./devices.js";
+
+describe("DEVICE_PRESETS", () => {
+  test("has at least 10 presets", () => {
+    expect(DEVICE_PRESETS.length).toBeGreaterThanOrEqual(10);
+  });
+
+  test("every preset has valid dimensions", () => {
+    for (const d of DEVICE_PRESETS) {
+      expect(d.name).toBeTruthy();
+      expect(d.width).toBeGreaterThan(0);
+      expect(d.height).toBeGreaterThan(0);
+      expect(d.dpr).toBeGreaterThan(0);
+    }
+  });
+
+  test("first preset is a phone", () => {
+    expect(DEVICE_PRESETS[0].width).toBeLessThan(500);
+  });
+});
+
+describe("calcScale", () => {
+  test("fits a phone into a large canvas", () => {
+    const scale = calcScale(393, 852, 800, 600);
+    // 800/393 = 2.03, 600/852 = 0.70 → min is 0.70, clamped to ≤1
+    expect(scale).toBeCloseTo(0.704, 2);
+  });
+
+  test("never scales above 1", () => {
+    const scale = calcScale(200, 200, 800, 600);
+    expect(scale).toBe(1);
+  });
+
+  test("handles equal dimensions", () => {
+    const scale = calcScale(800, 600, 800, 600);
+    expect(scale).toBe(1);
+  });
+
+  test("handles device wider than canvas", () => {
+    const scale = calcScale(1920, 1080, 800, 600);
+    // 800/1920 = 0.417, 600/1080 = 0.556 → min is 0.417
+    expect(scale).toBeCloseTo(0.417, 2);
+  });
+
+  test("clamps to minimum 0.1", () => {
+    const scale = calcScale(10000, 10000, 100, 100);
+    expect(scale).toBe(0.1);
+  });
+});

package/editor/src/devices.ts

@@ -0,0 +1,33 @@
+import type { DevicePreset } from "./types.js";
+
+export const DEVICE_PRESETS: DevicePreset[] = [
+  { name: "iPhone SE", width: 375, height: 667, dpr: 2 },
+  { name: "iPhone 14", width: 390, height: 844, dpr: 3 },
+  { name: "iPhone 14 Pro", width: 393, height: 852, dpr: 3 },
+  { name: "iPhone 14 Pro Max", width: 430, height: 932, dpr: 3 },
+  { name: "iPhone 16", width: 393, height: 852, dpr: 3 },
+  { name: "iPhone 16 Pro Max", width: 440, height: 956, dpr: 3 },
+  { name: "iPad Mini", width: 744, height: 1133, dpr: 2 },
+  { name: "iPad Air", width: 820, height: 1180, dpr: 2 },
+  { name: 'iPad Pro 12.9"', width: 1024, height: 1366, dpr: 2 },
+  { name: "Samsung Galaxy S24", width: 360, height: 780, dpr: 3 },
+  { name: "Pixel 8", width: 412, height: 915, dpr: 2.625 },
+  { name: "Desktop 1280", width: 1280, height: 800, dpr: 1 },
+  { name: "Desktop 1440", width: 1440, height: 900, dpr: 1 },
+  { name: "Desktop 1920", width: 1920, height: 1080, dpr: 1 },
+];
+
+/**
+ * Calculate the scale factor to fit device dimensions into available space.
+ * Returns a value between 0.1 and 1.
+ */
+export function calcScale(
+  deviceWidth: number,
+  deviceHeight: number,
+  availableWidth: number,
+  availableHeight: number
+): number {
+  const scaleX = availableWidth / deviceWidth;
+  const scaleY = availableHeight / deviceHeight;
+  return Math.max(0.1, Math.min(scaleX, scaleY, 1));
+}

package/editor/src/main.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { OverlayScrollbars } from "overlayscrollbars";
+import "overlayscrollbars/overlayscrollbars.css";
+import { App } from "./App.js";
+import "./styles/editor.css";
+
+OverlayScrollbars.env().setDefaultOptions({
+  scrollbars: { theme: "os-theme-dark", autoHide: "move", autoHideDelay: 500 },
+});
+
+const root = createRoot(document.getElementById("root")!);
+root.render(<App />);

package/editor/src/styles/editor.css

@@ -0,0 +1,451 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  overflow: hidden;
+  height: 100vh;
+  background: #1e1e1e;
+  color: #cccccc;
+}
+
+#root {
+  height: 100vh;
+}
+
+.editor-layout {
+  display: flex;
+  height: 100vh;
+}
+
+.left-panel {
+  width: 240px;
+  background: #252526;
+  border-right: 1px solid #4a4a4a;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.center-panel {
+  flex: 1;
+  background: #1e1e1e;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0;
+  min-width: 0;
+}
+
+.right-panel {
+  width: 280px;
+  background: #252526;
+  border-left: 1px solid #4a4a4a;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.right-panel-top {
+  flex: 0 0 35%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-bottom: 1px solid #4a4a4a;
+}
+
+.right-panel-top .layer-tree-scroll {
+  flex: 1;
+}
+
+.right-panel-bottom {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.right-panel-bottom .properties-scroll {
+  flex: 1;
+}
+
+.page-list-scroll {
+  flex: 1;
+}
+
+.panel-header {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #969696;
+  background: #3c3c3c;
+  border-bottom: 1px solid #4a4a4a;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.page-list {
+  list-style: none;
+}
+
+.page-item {
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #cccccc;
+  user-select: none;
+}
+
+.page-item:hover {
+  background: #2a2d2e;
+}
+
+.page-item.active {
+  background: #2a2d2e;
+}
+
+.page-list.focused .page-item.active {
+  background: #37373d;
+  color: #ffffff;
+}
+
+.page-list:focus {
+  outline: none;
+}
+
+.canvas-iframe {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #3c3c3c;
+  border-radius: 4px;
+  background: #ffffff;
+}
+
+
+.layer-tree {
+  padding: 4px 0;
+  font-size: 13px;
+}
+
+.layer-node {
+  padding: 3px 0;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  color: #cccccc;
+}
+
+.layer-node:hover {
+  background: #2a2d2e;
+}
+
+.layer-node.selected {
+  background: #2a2d2e;
+}
+
+.layer-tree.focused .layer-node.selected {
+  background: #37373d;
+  color: #ffffff;
+}
+
+.layer-tree:focus {
+  outline: none;
+}
+
+.layer-tag {
+  color: #569cd6;
+}
+
+.layer-class {
+  color: #9cdcfe;
+  margin-left: 4px;
+  font-size: 11px;
+}
+
+.property-section {
+  padding: 8px 12px;
+  border-bottom: 1px solid #3c3c3c;
+}
+
+.node-ref {
+  cursor: pointer;
+  color: #e2c08d;
+  white-space: nowrap;
+}
+
+.node-ref:hover {
+  color: #f5d9a0;
+}
+
+.property-value.copyable {
+  cursor: pointer;
+}
+
+.property-value.copyable:hover {
+  color: #e0a56a;
+}
+
+.property-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #969696;
+  margin-bottom: 6px;
+}
+
+.property-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 0;
+  font-size: 12px;
+}
+
+.property-key {
+  color: #9cdcfe;
+}
+
+.property-value {
+  color: #ce9178;
+  text-align: right;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.empty-state {
+  padding: 24px;
+  text-align: center;
+  color: #969696;
+  font-size: 13px;
+}
+
+/* Device Toolbar — matches panel headers */
+.device-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 16px;
+  height: 28px;
+  background: #3c3c3c;
+  border-bottom: 1px solid #4a4a4a;
+  font-size: 12px;
+  line-height: 1;
+  color: #cccccc;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.device-toolbar > * {
+  flex-shrink: 0;
+}
+
+.device-toolbar select {
+  background: transparent;
+  border: none;
+  color: #cccccc;
+  padding: 0 4px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 20px;
+  outline: none;
+  cursor: pointer;
+}
+
+.device-toolbar select:hover {
+  color: #ffffff;
+}
+
+.device-toolbar select:focus {
+  color: #ffffff;
+}
+
+.device-toolbar .dim-input {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid transparent;
+  color: #cccccc;
+  padding: 0 2px;
+  height: 20px;
+  text-align: center;
+  font-size: 12px;
+  line-height: 20px;
+  outline: none;
+  min-width: 3ch;
+}
+
+.device-toolbar .dim-input:hover:not(:disabled) {
+  border-bottom-color: #666;
+}
+
+.device-toolbar .dim-input:focus:not(:disabled) {
+  color: #ffffff;
+  border-bottom-color: #2563eb;
+}
+
+.device-toolbar .dim-input:disabled {
+  color: #999;
+  cursor: default;
+  -moz-appearance: textfield;
+}
+
+.device-toolbar .dim-input::-webkit-inner-spin-button,
+.device-toolbar .dim-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.device-toolbar .dim-separator {
+  color: #999;
+  margin: 0 -4px;
+  flex-shrink: 0;
+}
+
+.device-toolbar .toolbar-btn {
+  background: transparent;
+  border: none;
+  color: #999;
+  padding: 0 4px;
+  height: 20px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.device-toolbar .toolbar-btn:hover {
+  color: #ffffff;
+}
+
+.device-toolbar .toolbar-btn.active {
+  color: #2563eb;
+}
+
+.device-toolbar .dpr-badge {
+  font-size: 11px;
+  color: #999;
+  height: 20px;
+  line-height: 20px;
+}
+
+.device-toolbar .toolbar-divider {
+  width: 1px;
+  height: 14px;
+  background: #555;
+  flex-shrink: 0;
+}
+
+.canvas-area {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  position: relative;
+  padding: 24px;
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+
+.canvas-area::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.canvas-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.canvas-area::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.canvas-area::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.canvas-area::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.canvas-area.with-grid {
+  background: repeating-conic-gradient(#1a1a1a 0% 25%, #1e1e1e 0% 50%) 0 0 / 16px 16px;
+}
+
+/* Iframe wrapper for transform scaling */
+.iframe-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.iframe-wrapper .canvas-iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* OverlayScrollbars dark theme */
+.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
+  background: rgba(255, 255, 255, 0.45);
+}
+
+.os-theme-dark > .os-scrollbar {
+  --os-size: 6px;
+  --os-padding-perpendicular: 1px;
+  --os-padding-axis: 1px;
+}
+
+.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Context menu */
+.context-menu {
+  position: fixed;
+  z-index: 10000;
+  background: #2d2d2d;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  padding: 4px 0;
+  min-width: 120px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.context-menu-item {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #cccccc;
+  cursor: pointer;
+  user-select: none;
+}
+
+.context-menu-item:hover {
+  background: #094771;
+  color: #ffffff;
+}

package/editor/src/types.ts

@@ -0,0 +1,43 @@
+export interface NodeInfo {
+  tagName: string;
+  path: string;
+  attributes: Record<string, string>;
+  computedStyles: Record<string, string>;
+  boundingRect: { x: number; y: number; width: number; height: number };
+}
+
+export interface DOMTreeNode {
+  tagName: string;
+  path: string;
+  className: string;
+  children: DOMTreeNode[];
+}
+
+export interface EditorConfig {
+  pages: string[];
+  pagePaths: Record<string, string>;
+  components: string[];
+  designServerUrl: string;
+}
+
+// Messages from iframe → editor
+export type IframeMessage =
+  | { type: "NODE_SELECTED"; node: NodeInfo }
+  | { type: "NODE_HOVERED"; node: NodeInfo }
+  | { type: "DOM_TREE"; tree: DOMTreeNode[] };
+
+// Messages from editor → iframe
+export type EditorMessage =
+  | { type: "GET_DOM_TREE" }
+  | { type: "HIGHLIGHT_NODE"; path: string }
+  | { type: "HOVER_NODE"; path: string }
+  | { type: "CLEAR_HIGHLIGHT" }
+  | { type: "SET_TOUCH_CURSOR"; enabled: boolean }
+  | { type: "SET_INSPECT_MODE"; enabled: boolean };
+
+export interface DevicePreset {
+  name: string;
+  width: number;
+  height: number;
+  dpr: number;
+}

package/editor/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  root: __dirname,
+  build: {
+    outDir: "../dist/editor",
+    emptyOutDir: true,
+  },
+});

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "dekit-cli",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "A code-first design toolkit — preview, inspect, and debug your HTML/CSS designs in the browser",
+  "keywords": ["design", "devtools", "inspector", "preview", "css", "html", "cli"],
+  "license": "Apache-2.0",
+  "repository": { "type": "git", "url": "https://github.com/myWsq/dekit" },
+  "homepage": "https://github.com/myWsq/dekit",
+  "bugs": { "url": "https://github.com/myWsq/dekit/issues" },
+  "files": ["bin/", "src/", "editor/", "dist/"],
+  "engines": { "node": ">=18" },
+  "bin": {
+    "dekit": "./bin/dekit.ts"
+  },
+  "scripts": {
+    "dev": "tsx bin/dekit.ts",
+    "build:editor": "vite build --config editor/vite.config.ts",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build:editor"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.0",
+    "open": "^10.1.0",
+    "overlayscrollbars": "^2.14.0",
+    "overlayscrollbars-react": "^0.5.6",
+    "react-icons": "^5.6.0",
+    "sirv": "^3.0.0",
+    "vite": "^6.2.0"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0",
+    "@vitejs/plugin-react": "^4.3.0"
+  }
+}

package/src/design-server.ts

@@ -0,0 +1,24 @@
+import { createServer, type ViteDevServer } from "vite";
+import type { DesignConfig } from "./types.js";
+import { dekitPlugin } from "./vite-plugin-dekit.js";
+
+export async function startDesignServer(
+  configRef: { current: DesignConfig },
+  port: number
+): Promise<ViteDevServer> {
+  const server = await createServer({
+    configFile: false,
+    root: configRef.current.baseDir,
+    server: {
+      port,
+      strictPort: true,
+      cors: true,
+    },
+    plugins: [dekitPlugin(configRef)],
+    logLevel: "silent",
+  });
+
+  await server.listen();
+  console.log(`  Design server running at http://localhost:${port}`);
+  return server;
+}