dekit-cli 0.4.3 → 0.5.0

package/dist/editor/index.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dekit Editor</title>
-  <script type="module" crossorigin src="/assets/index-hySfUCIY.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-HLKs1tz-.css">
+  <script type="module" crossorigin src="/assets/index-E_PyZ4Xf.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-DKRQEtBb.css">
 </head>
 <body>
   <div id="root"></div>

package/editor/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import type { EditorConfig, NodeInfo, DOMTreeNode, IframeMessage } from "./types.js";
+import type { EditorConfig, NodeInfo, DOMTreeNode, IframeMessage, PropertyDef } from "./types.js";
 import { DEVICE_PRESETS, calcScale } from "./devices.js";
 import type { DevicePreset } from "./types.js";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
@@ -26,8 +26,8 @@ export function App() {
   const [deviceWidth, setDeviceWidth] = useState(0);
   const [deviceHeight, setDeviceHeight] = useState(0);
   const [zoomMode, setZoomMode] = useState<"fit" | number>("fit");
-  const [inspectMode, setInspectMode] = useState(false);
-  const [inspectLocked, setInspectLocked] = useState(false);
+  const [inspectMode, setInspectMode] = useState(true);
+  const [inspectLocked, setInspectLocked] = useState(true);
   const inspectModeRef = useRef(false);
   const altPressedRef = useRef(false);
   const currentPageRef = useRef("");
@@ -35,6 +35,7 @@ export function App() {
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; cssSelector?: string; page: string } | null>(null);
   const [focusedPanel, setFocusedPanel] = useState<"pages" | "layers" | null>(null);
+  const [propsOverrides, setPropsOverrides] = useState<Record<string, Record<string, string>>>({});
 
   const configRef = useRef<EditorConfig | null>(null);
   configRef.current = config;
@@ -236,9 +237,19 @@ export function App() {
     return <div className="empty-state">Loading...</div>;
   }
 
-  const iframeSrc = currentPage
-    ? `${config.designServerUrl}/page/${currentPage}`
-    : "";
+  const currentOverrides = currentPage ? propsOverrides[currentPage] : undefined;
+  let iframeSrc = "";
+  if (currentPage) {
+    const base = `${config.designServerUrl}/page/${currentPage}`;
+    const params = new URLSearchParams();
+    if (currentOverrides) {
+      for (const [key, value] of Object.entries(currentOverrides)) {
+        params.set(`props.${key}`, value);
+      }
+    }
+    const qs = params.toString();
+    iframeSrc = qs ? `${base}?${qs}` : base;
+  }
 
   return (
     <div className="editor-layout">
@@ -357,6 +368,30 @@ export function App() {
 
       {/* Right Panel */}
       <div className="right-panel">
+        {currentPage && config.pageProperties[currentPage] && Object.keys(config.pageProperties[currentPage]).length > 0 && (
+          <div className="right-panel-props">
+            <div className="panel-header">Page Props</div>
+            <OverlayScrollbarsComponent className="props-panel-scroll" defer>
+              <PagePropsPanel
+                properties={config.pageProperties[currentPage]}
+                overrides={propsOverrides[currentPage] ?? {}}
+                onChange={(key, value) => {
+                  setPropsOverrides((prev) => ({
+                    ...prev,
+                    [currentPage]: { ...prev[currentPage], [key]: value },
+                  }));
+                }}
+                onReset={() => {
+                  setPropsOverrides((prev) => {
+                    const next = { ...prev };
+                    delete next[currentPage];
+                    return next;
+                  });
+                }}
+              />
+            </OverlayScrollbarsComponent>
+          </div>
+        )}
         <div className="right-panel-top">
           <div className="panel-header">Layers</div>
           <OverlayScrollbarsComponent className="layer-tree-scroll" defer>
@@ -743,3 +778,84 @@ function PropertyPanel({ node, nodeRef }: { node: NodeInfo; nodeRef: string }) {
     </>
   );
 }
+
+function PagePropsPanel({
+  properties,
+  overrides,
+  onChange,
+  onReset,
+}: {
+  properties: Record<string, PropertyDef>;
+  overrides: Record<string, string>;
+  onChange: (key: string, value: string) => void;
+  onReset: () => void;
+}) {
+  const hasOverrides = Object.keys(overrides).length > 0;
+
+  return (
+    <div className="page-props-panel">
+      {Object.entries(properties).map(([key, def]) => {
+        const overridden = key in overrides;
+        const currentValue = overridden ? overrides[key] : String(def.default);
+
+        return (
+          <div key={key} className="property-row">
+            <span className="property-key">{key}</span>
+            {def.type === "boolean" ? (
+              <input
+                type="checkbox"
+                className="props-checkbox"
+                checked={currentValue === "true"}
+                onChange={(e) => onChange(key, String(e.target.checked))}
+              />
+            ) : (
+              <PropInput
+                type={def.type}
+                value={currentValue}
+                onChange={(v) => onChange(key, v)}
+              />
+            )}
+          </div>
+        );
+      })}
+      {hasOverrides && (
+        <button className="props-reset-btn" onClick={onReset}>
+          Reset
+        </button>
+      )}
+    </div>
+  );
+}
+
+function PropInput({
+  type,
+  value,
+  onChange,
+}: {
+  type: "number" | "string";
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [draft, setDraft] = useState(value);
+
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+
+  const commit = () => {
+    if (draft !== value) onChange(draft);
+  };
+
+  return (
+    <input
+      className="props-input"
+      type={type === "number" ? "number" : "text"}
+      value={draft}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={commit}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+      }}
+    />
+  );
+}

package/editor/src/styles/editor.css

@@ -451,3 +451,70 @@ body {
   background: #094771;
   color: #ffffff;
 }
+
+/* Page Props Panel */
+.right-panel-props {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-bottom: 1px solid #4a4a4a;
+  max-height: 30%;
+}
+
+.right-panel-props .props-panel-scroll {
+  flex: 1;
+}
+
+.page-props-panel {
+  padding: 8px 12px;
+}
+
+.page-props-panel .property-row {
+  align-items: center;
+}
+
+.props-checkbox {
+  accent-color: #2563eb;
+  cursor: pointer;
+}
+
+.props-input {
+  background: transparent;
+  border: 1px solid #4a4a4a;
+  border-radius: 3px;
+  color: #ce9178;
+  padding: 2px 6px;
+  font-size: 12px;
+  width: 100px;
+  text-align: right;
+  outline: none;
+}
+
+.props-input:focus {
+  border-color: #2563eb;
+  color: #ffffff;
+}
+
+.props-input::-webkit-inner-spin-button,
+.props-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.props-reset-btn {
+  margin-top: 8px;
+  width: 100%;
+  padding: 4px 0;
+  background: transparent;
+  border: 1px solid #4a4a4a;
+  border-radius: 3px;
+  color: #969696;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.props-reset-btn:hover {
+  border-color: #666;
+  color: #cccccc;
+}

package/editor/src/types.ts

@@ -21,9 +21,15 @@ export interface DeviceConfig {
   name?: string;
 }
 
+export interface PropertyDef {
+  type: "boolean" | "number" | "string";
+  default: unknown;
+}
+
 export interface EditorConfig {
   pages: string[];
   pagePaths: Record<string, string>;
+  pageProperties: Record<string, Record<string, PropertyDef>>;
   components: string[];
   device: DeviceConfig | null;
   designServerUrl: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dekit-cli",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "type": "module",
   "description": "A code-first design toolkit for agents and humans — create, preview, and screenshot HTML/CSS designs",
   "keywords": [
@@ -32,7 +32,7 @@
     "docs/usage.md"
   ],
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "bin": {
     "dekit": "./bin/dekit.js"