@promakeai/inspector 0.2.1 → 1.0.0

package/src/hooks/useStylePreview.ts

@@ -0,0 +1,332 @@
+/**
+ * Hook for real-time style preview on elements
+ * Simple approach: track changed properties, add incrementally, remove on reset
+ */
+
+import { useCallback, useRef, useEffect } from "react";
+import type { StyleChanges } from "@promakeai/inspector-types";
+
+export function useStylePreview(element: HTMLElement | null) {
+  // Track which style properties have been changed
+  const changedPropertiesRef = useRef<Set<keyof StyleChanges>>(new Set());
+
+  // Clear tracking when element changes
+  useEffect(() => {
+    if (element) {
+      changedPropertiesRef.current.clear();
+    }
+  }, [element]);
+
+  const previewStyle = useCallback(
+    (property: keyof StyleChanges, value: string) => {
+      if (!element) return;
+
+      // Add the property to changed set
+      changedPropertiesRef.current.add(property);
+
+      // Apply the single property directly to element.style with !important
+      switch (property) {
+        case "backgroundColor":
+          element.style.setProperty("background-color", value, "important");
+          break;
+        case "height":
+          element.style.setProperty("height", value, "important");
+          break;
+        case "width":
+          element.style.setProperty("width", value, "important");
+          break;
+        case "color":
+          element.style.setProperty("color", value, "important");
+          break;
+        case "fontSize":
+          element.style.setProperty("font-size", value, "important");
+          break;
+        case "fontWeight":
+          element.style.setProperty("font-weight", value, "important");
+          break;
+        case "fontFamily":
+          element.style.setProperty("font-family", value, "important");
+          break;
+        case "textAlign":
+          element.style.setProperty("text-align", value, "important");
+          break;
+        case "borderRadius":
+          element.style.setProperty("border-radius", value, "important");
+          break;
+        case "borderWidth":
+          element.style.setProperty("border-width", value, "important");
+          // Border needs style to be visible - set default if not present
+          if (!element.style.borderStyle) {
+            element.style.setProperty("border-style", "solid", "important");
+            changedPropertiesRef.current.add("borderStyle");
+          }
+          break;
+        case "borderColor":
+          element.style.setProperty("border-color", value, "important");
+          // Border needs style and width to be visible
+          if (!element.style.borderStyle) {
+            element.style.setProperty("border-style", "solid", "important");
+            changedPropertiesRef.current.add("borderStyle");
+          }
+          if (!element.style.borderWidth) {
+            element.style.setProperty("border-width", "1px", "important");
+            changedPropertiesRef.current.add("borderWidth");
+          }
+          break;
+        case "borderStyle":
+          element.style.setProperty("border-style", value, "important");
+          break;
+        case "display":
+          element.style.setProperty("display", value, "important");
+          break;
+        case "opacity":
+          element.style.setProperty("opacity", value, "important");
+          break;
+        case "flex":
+          element.style.setProperty("flex", value, "important");
+          break;
+        case "flexDirection":
+          element.style.setProperty("flex-direction", value, "important");
+          break;
+        case "justifyContent":
+          element.style.setProperty("justify-content", value, "important");
+          break;
+        case "alignItems":
+          element.style.setProperty("align-items", value, "important");
+          break;
+        case "objectFit":
+          element.style.setProperty("object-fit", value, "important");
+          break;
+        case "textDecoration":
+          element.style.setProperty("text-decoration", value, "important");
+          break;
+        case "paddingVertical":
+          element.style.setProperty("padding-top", value, "important");
+          element.style.setProperty("padding-bottom", value, "important");
+          break;
+        case "paddingHorizontal":
+          element.style.setProperty("padding-left", value, "important");
+          element.style.setProperty("padding-right", value, "important");
+          break;
+        case "paddingTop":
+          element.style.setProperty("padding-top", value, "important");
+          break;
+        case "paddingRight":
+          element.style.setProperty("padding-right", value, "important");
+          break;
+        case "paddingBottom":
+          element.style.setProperty("padding-bottom", value, "important");
+          break;
+        case "paddingLeft":
+          element.style.setProperty("padding-left", value, "important");
+          break;
+        case "marginVertical":
+          element.style.setProperty("margin-top", value, "important");
+          element.style.setProperty("margin-bottom", value, "important");
+          break;
+        case "marginHorizontal":
+          element.style.setProperty("margin-left", value, "important");
+          element.style.setProperty("margin-right", value, "important");
+          break;
+        case "marginTop":
+          element.style.setProperty("margin-top", value, "important");
+          break;
+        case "marginRight":
+          element.style.setProperty("margin-right", value, "important");
+          break;
+        case "marginBottom":
+          element.style.setProperty("margin-bottom", value, "important");
+          break;
+        case "marginLeft":
+          element.style.setProperty("margin-left", value, "important");
+          break;
+      }
+    },
+    [element]
+  );
+
+  const resetStyles = useCallback(() => {
+    if (!element) return;
+
+    // Remove each changed property from element.style
+    changedPropertiesRef.current.forEach((property) => {
+      switch (property) {
+        case "backgroundColor":
+          element.style.removeProperty("background-color");
+          break;
+        case "height":
+          element.style.removeProperty("height");
+          break;
+        case "width":
+          element.style.removeProperty("width");
+          break;
+        case "color":
+          element.style.removeProperty("color");
+          break;
+        case "fontSize":
+          element.style.removeProperty("font-size");
+          break;
+        case "fontWeight":
+          element.style.removeProperty("font-weight");
+          break;
+        case "fontFamily":
+          element.style.removeProperty("font-family");
+          break;
+        case "textAlign":
+          element.style.removeProperty("text-align");
+          break;
+        case "borderRadius":
+          element.style.removeProperty("border-radius");
+          break;
+        case "borderWidth":
+          element.style.removeProperty("border-width");
+          break;
+        case "borderColor":
+          element.style.removeProperty("border-color");
+          break;
+        case "borderStyle":
+          element.style.removeProperty("border-style");
+          break;
+        case "paddingVertical":
+          element.style.removeProperty("padding-top");
+          element.style.removeProperty("padding-bottom");
+          break;
+        case "paddingHorizontal":
+          element.style.removeProperty("padding-left");
+          element.style.removeProperty("padding-right");
+          break;
+        case "marginVertical":
+          element.style.removeProperty("margin-top");
+          element.style.removeProperty("margin-bottom");
+          break;
+        case "marginHorizontal":
+          element.style.removeProperty("margin-left");
+          element.style.removeProperty("margin-right");
+          break;
+      }
+    });
+
+    // Clear the tracking set
+    changedPropertiesRef.current.clear();
+  }, [element]);
+
+  const resetSingleProperty = useCallback(
+    (property: keyof StyleChanges) => {
+      if (!element) return;
+
+      // Remove the specific property from element.style
+      switch (property) {
+        case "backgroundColor":
+          element.style.removeProperty("background-color");
+          break;
+        case "height":
+          element.style.removeProperty("height");
+          break;
+        case "width":
+          element.style.removeProperty("width");
+          break;
+        case "color":
+          element.style.removeProperty("color");
+          break;
+        case "fontSize":
+          element.style.removeProperty("font-size");
+          break;
+        case "fontWeight":
+          element.style.removeProperty("font-weight");
+          break;
+        case "fontFamily":
+          element.style.removeProperty("font-family");
+          break;
+        case "textAlign":
+          element.style.removeProperty("text-align");
+          break;
+        case "borderRadius":
+          element.style.removeProperty("border-radius");
+          break;
+        case "borderWidth":
+          element.style.removeProperty("border-width");
+          break;
+        case "borderColor":
+          element.style.removeProperty("border-color");
+          break;
+        case "borderStyle":
+          element.style.removeProperty("border-style");
+          break;
+        case "display":
+          element.style.removeProperty("display");
+          break;
+        case "opacity":
+          element.style.removeProperty("opacity");
+          break;
+        case "flex":
+          element.style.removeProperty("flex");
+          break;
+        case "flexDirection":
+          element.style.removeProperty("flex-direction");
+          break;
+        case "justifyContent":
+          element.style.removeProperty("justify-content");
+          break;
+        case "alignItems":
+          element.style.removeProperty("align-items");
+          break;
+        case "objectFit":
+          element.style.removeProperty("object-fit");
+          break;
+        case "textDecoration":
+          element.style.removeProperty("text-decoration");
+          break;
+        case "paddingVertical":
+          element.style.removeProperty("padding-top");
+          element.style.removeProperty("padding-bottom");
+          break;
+        case "paddingHorizontal":
+          element.style.removeProperty("padding-left");
+          element.style.removeProperty("padding-right");
+          break;
+        case "paddingTop":
+          element.style.removeProperty("padding-top");
+          break;
+        case "paddingRight":
+          element.style.removeProperty("padding-right");
+          break;
+        case "paddingBottom":
+          element.style.removeProperty("padding-bottom");
+          break;
+        case "paddingLeft":
+          element.style.removeProperty("padding-left");
+          break;
+        case "marginVertical":
+          element.style.removeProperty("margin-top");
+          element.style.removeProperty("margin-bottom");
+          break;
+        case "marginHorizontal":
+          element.style.removeProperty("margin-left");
+          element.style.removeProperty("margin-right");
+          break;
+        case "marginTop":
+          element.style.removeProperty("margin-top");
+          break;
+        case "marginRight":
+          element.style.removeProperty("margin-right");
+          break;
+        case "marginBottom":
+          element.style.removeProperty("margin-bottom");
+          break;
+        case "marginLeft":
+          element.style.removeProperty("margin-left");
+          break;
+      }
+
+      // Remove from tracking set
+      changedPropertiesRef.current.delete(property);
+    },
+    [element]
+  );
+
+  return {
+    previewStyle,
+    resetStyles,
+    resetSingleProperty,
+  };
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @promakeai/inspector - React Component Package
+ *
+ * Visual element inspector component for React apps with AI prompt support.
+ * This is now a React component (not a Vite plugin).
+ *
+ * IMPORTANT: Import the CSS file separately:
+ * ```tsx
+ * import { Inspector } from "@promakeai/inspector";
+ * import "@promakeai/inspector/style.css"; // Required!
+ * ```
+ */
+
+// Import CSS to be bundled
+import "./styles/global.css";
+
+export { App as Inspector, App } from "./App";
+
+// Re-export all types from types package
+export type * from "@promakeai/inspector-types";

package/src/lib/utils.ts

@@ -0,0 +1,5 @@
+import clsx, { ClassValue } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}

package/src/plugin.ts

@@ -0,0 +1,11 @@
+import componentDebugger, { TagOptions } from "vite-plugin-component-debugger";
+import type { Plugin } from "vite";
+
+export const inspectorDebugger = (options: TagOptions = {}): Plugin<any> => {
+  return componentDebugger({
+    enabled: true,
+    attributePrefix: "data-dev",
+    extensions: [".jsx", ".tsx"],
+    ...options,
+  }) as Plugin<any>;
+};

package/src/store/useInspectorStore.ts

@@ -0,0 +1,235 @@
+/**
+ * Zustand store for Inspector global state
+ */
+
+import { create } from "zustand";
+import type {
+  InspectorTheme,
+  InspectorLabels,
+} from "@promakeai/inspector-types";
+
+interface InspectorStore {
+  theme: Required<InspectorTheme>;
+  labels: Required<InspectorLabels>;
+  setTheme: (theme: Partial<InspectorTheme>) => void;
+  setLabels: (labels: Partial<InspectorLabels>) => void;
+}
+
+const defaultTheme: Required<InspectorTheme> = {
+  backgroundColor: "#ffffff",
+  textColor: "#0f172a",
+  secondaryTextColor: "#64748b",
+  buttonColor: "rgb(58, 18, 189)", // Darker purple
+  buttonTextColor: "#ffffff",
+  buttonHoverColor: "rgb(78, 38, 209)", // Slightly lighter for hover
+  secondaryButtonColor: "#f1f5f9",
+  secondaryButtonTextColor: "#475569",
+  secondaryButtonHoverColor: "#e2e8f0",
+  dangerButtonColor: "#ef4444",
+  dangerButtonTextColor: "#ffffff",
+  inputBackgroundColor: "#ffffff",
+  inputTextColor: "#0f172a",
+  inputBorderColor: "#e2e8f0",
+  inputFocusBorderColor: "rgb(58, 18, 189)", // Darker purple
+  inputPlaceholderColor: "#94a3b8",
+  borderColor: "#e2e8f0",
+  warningColor: "#f59e0b",
+  successColor: "#10b981",
+  errorColor: "#ef4444",
+  tabContainerBg: "#f8fafc",
+  tabActiveBg: "rgb(58, 18, 189)", // Darker purple
+  tabInactiveBg: "transparent",
+  tabActiveColor: "#ffffff",
+  tabInactiveColor: "#64748b",
+  badgeGradientStart: "rgb(58, 18, 189)", // Darker purple
+  badgeGradientEnd: "#ec4899",
+  badgeTextColor: "#ffffff",
+  overlayColor: "rgb(58, 18, 189)", // Darker purple
+  overlayOpacity: 0.15,
+  dialogBackdropColor: "rgba(15, 23, 42, 0.4)",
+  dialogBackgroundColor: "#ffffff",
+  dialogTextColor: "#0f172a",
+  dialogSecondaryTextColor: "#64748b",
+};
+
+const defaultLabels: Required<InspectorLabels> = {
+  // Text Editor
+  editText: "Edit Content",
+  textContentLabel: "Text Content",
+  textPlaceholder: "Enter content...",
+  linkUrlLabel: "Link URL (href)",
+  updateText: "Update",
+
+  // Image Editor
+  editImage: "Change Image",
+  imageUploadTitle: "Select Image",
+  imageUploadHint: "Click or drag",
+  updateImage: "Update",
+
+  // Prompt Input
+  promptPlaceholder: "Ask AI...",
+
+  // Style Editor
+  styleEditorTitle: "Style Editor",
+  layoutSectionTitle: "Layout",
+  displaySectionTitle: "Display",
+  imageSectionTitle: "Image",
+  textSectionTitle: "Text",
+  borderSectionTitle: "Border",
+  spacingSectionTitle: "Spacing",
+
+  // Style Properties
+  backgroundColorLabel: "Background Color",
+  heightLabel: "Height",
+  widthLabel: "Width",
+  displayLabel: "Display",
+  opacityLabel: "Opacity",
+  flexLabel: "Flex",
+  flexDirectionLabel: "Flex Direction",
+  justifyContentLabel: "Justify Content",
+  alignItemsLabel: "Align Items",
+  objectFitLabel: "Object Fit",
+  colorLabel: "Color",
+  fontSizeLabel: "Font Size",
+  fontWeightLabel: "Font Weight",
+  fontFamilyLabel: "Font Family",
+  textAlignLabel: "Text Align",
+  textDecorationLabel: "Text Decoration",
+  borderRadiusLabel: "Border Radius",
+  borderWidthLabel: "Border Width",
+  borderColorLabel: "Border Color",
+  borderStyleLabel: "Border Style",
+  paddingLabel: "Padding",
+  paddingVerticalLabel: "Vertical",
+  paddingHorizontalLabel: "Horizontal",
+  marginLabel: "Margin",
+  marginVerticalLabel: "Vertical",
+  marginHorizontalLabel: "Horizontal",
+
+  // Element name labels
+  elementContainer: "Container",
+  elementText: "Text",
+  elementImage: "Image",
+  elementButton: "Button",
+  elementLink: "Link",
+  elementInput: "Input",
+  elementTextArea: "TextArea",
+  elementHeading: "Heading",
+  elementParagraph: "Paragraph",
+  elementSection: "Section",
+  elementDefault: "Element",
+
+  // Display Dropdown Options
+  displayBlock: "Block",
+  displayInline: "Inline",
+  displayInlineBlock: "Inline Block",
+  displayFlex: "Flex",
+  displayGrid: "Grid",
+  displayNone: "None",
+
+  // Flex Direction Dropdown Options
+  flexDirectionRow: "Row",
+  flexDirectionRowReverse: "Row Reverse",
+  flexDirectionColumn: "Column",
+  flexDirectionColumnReverse: "Column Reverse",
+
+  // Justify Content Dropdown Options
+  justifyContentFlexStart: "Flex Start",
+  justifyContentCenter: "Center",
+  justifyContentFlexEnd: "Flex End",
+  justifyContentSpaceBetween: "Space Between",
+  justifyContentSpaceAround: "Space Around",
+  justifyContentSpaceEvenly: "Space Evenly",
+
+  // Align Items Dropdown Options
+  alignItemsFlexStart: "Flex Start",
+  alignItemsCenter: "Center",
+  alignItemsFlexEnd: "Flex End",
+  alignItemsStretch: "Stretch",
+  alignItemsBaseline: "Baseline",
+
+  // Font Size Dropdown Options
+  fontSizeXS: "XS",
+  fontSizeSM: "SM",
+  fontSizeBase: "Base",
+  fontSizeLG: "LG",
+  fontSizeXL: "XL",
+  fontSize2XL: "2XL",
+  fontSize3XL: "3XL",
+  fontSize4XL: "4XL",
+  fontSize5XL: "5XL",
+
+  // Font Weight Dropdown Options
+  fontWeightThin: "Thin",
+  fontWeightExtralight: "Extralight",
+  fontWeightNormal: "Normal",
+  fontWeightMedium: "Medium",
+  fontWeightSemibold: "Semibold",
+  fontWeightBold: "Bold",
+  fontWeightExtrabold: "Extrabold",
+  fontWeightBlack: "Black",
+
+  // Text Decoration Dropdown Options
+  textDecorationNone: "None",
+  textDecorationUnderline: "Underline",
+  textDecorationLineThrough: "Line Through",
+  textDecorationOverline: "Overline",
+
+  // Border Style Dropdown Options
+  borderStyleSolid: "Solid",
+  borderStyleDashed: "Dashed",
+  borderStyleDotted: "Dotted",
+  borderStyleDouble: "Double",
+  borderStyleGroove: "Groove",
+  borderStyleRidge: "Ridge",
+  borderStyleInset: "Inset",
+  borderStyleOutset: "Outset",
+  borderStyleNone: "None",
+
+  // Object Fit Dropdown Options
+  objectFitContain: "Contain",
+  objectFitCover: "Cover",
+  objectFitFill: "Fill",
+  objectFitNone: "None",
+  objectFitScaleDown: "Scale Down",
+
+  // Action Buttons
+  saveButton: "Save",
+  resetButton: "Reset",
+  cancelButton: "Cancel",
+
+  // Status Messages
+  unsavedChangesText: "Unsaved Changes",
+  savingText: "Saving...",
+  hintText: "Changes preview in real-time",
+
+  // Unsaved Changes Dialog
+  unsavedDialogTitle: "Unsaved Changes",
+  unsavedDialogMessage:
+    "You have unsaved style changes. What would you like to do?",
+  saveChangesButton: "Save",
+  discardChangesButton: "Discard",
+  continueEditingButton: "Continue",
+
+  // Tab Names
+  textTabLabel: "Content",
+  imageTabLabel: "Image",
+  styleTabLabel: "Design",
+
+  // Badge
+  badgeText: "Built by Promake",
+  badgeUrl: "https://promake.ai",
+};
+
+export const useInspectorStore = create<InspectorStore>((set) => ({
+  theme: defaultTheme,
+  labels: defaultLabels,
+  setTheme: (theme) =>
+    set((state) => ({
+      theme: { ...state.theme, ...theme },
+    })),
+  setLabels: (labels) =>
+    set((state) => ({
+      labels: { ...state.labels, ...labels },
+    })),
+}));

package/src/styles/fonts.css

@@ -0,0 +1,15 @@
+/**
+ * Satoshi Font Family
+ * Only essential weights for Inspector
+ */
+
+/* Variable font - supports all weights (400-700) */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../assets/fonts/Satoshi-Variable.woff2') format('woff2'),
+       url('../assets/fonts/Satoshi-Variable.woff') format('woff');
+  font-weight: 400 700;
+  font-display: swap;
+  font-style: normal;
+}
+