@promakeai/inspector 1.0.0 → 1.0.3

package/src/components/StyleEditor/shared.module.css

@@ -1,193 +0,0 @@
-/* Shared styles for all style editor sections */
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  margin-bottom: var(--spacing-1);
-}
-
-.sectionTitle {
-  font-family: "Satoshi", var(--font-family-sans);
-  font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
-  margin-bottom: var(--spacing-2);
-}
-
-.grid2 {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--spacing-2);
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.grid4 {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--spacing-1);
-  width: 100%;
-}
-
-.flexRow {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-.flexRowGap2 {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.inputField {
-  margin-bottom: var(--spacing-2);
-}
-
-.labelContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  margin-bottom: var(--spacing-1);
-}
-
-.label {
-  display: block;
-  font-family: "Satoshi", var(--font-family-sans);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  letter-spacing: -0.01em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.resetIcon {
-  background: none;
-  border: none;
-  padding: 2px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  opacity: 0.7;
-  transition: opacity var(--transition-fast);
-}
-
-.resetIcon:hover {
-  opacity: 1;
-}
-
-.inputContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  border-radius: var(--radius-md);
-  padding: 4px;
-  box-shadow: none;
-  border: 1px solid;
-  box-sizing: border-box;
-  overflow: hidden;
-  height: var(--spacing-9);
-  transition: box-shadow var(--transition-fast);
-}
-
-.inputContainer:hover {
-  box-shadow: none;
-}
-
-.buttonGroupContainer {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.input {
-  font-family: "Satoshi", var(--font-family-sans);
-  font-size: var(--text-xs);
-  border: none;
-  box-shadow: none;
-  height: var(--spacing-8);
-  padding: var(--spacing-1-5) var(--spacing-1-5);
-  flex: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.input:focus {
-  outline: none;
-  box-shadow: none;
-  border-radius: var(--radius-sm);
-}
-
-.dragHandle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ew-resize;
-  user-select: none;
-  padding: var(--spacing-1);
-  transition: var(--transition-fast);
-  border-radius: var(--radius-sm);
-}
-
-.dragHandle:hover {
-  opacity: 0.7;
-}
-
-.dragHandleIcon {
-  width: var(--spacing-4);
-  height: var(--spacing-4);
-}
-
-.colorPreview {
-  width: var(--spacing-6);
-  height: var(--spacing-6);
-  border-radius: var(--radius-md);
-  border: 2px solid;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  flex-shrink: 0;
-  box-shadow: none;
-}
-
-.colorPreview:hover {
-  opacity: 0.95;
-  box-shadow: none;
-}
-
-.fontButton {
-  flex: 1;
-  background-color: red;
-  font-family: "Satoshi", var(--font-family-sans);
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  height: var(--spacing-9);
-  border-radius: var(--radius-md);
-  border: 1px solid transparent;
-  transition: var(--transition-fast);
-}
-
-.fontButton:hover {
-  opacity: 0.8;
-}
-
-.alignButton {
-  height: var(--spacing-9);
-  padding: var(--spacing-1-5) var(--spacing-2);
-  border-radius: var(--radius-md);
-  border: 1px solid transparent;
-  transition: var(--transition-fast);
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.alignButton:hover {
-  opacity: 0.8;
-}
-
-.tabButtons {
-  flex: 1;
-  display: flex;
-  width: 100%;
-}

package/src/components/TextEditor/index.module.css

@@ -1,31 +0,0 @@
-.container {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  box-sizing: border-box;
-  max-height: 40vh !important;
-  padding: 0 var(--spacing-1);
-}
-
-.textarea {
-  display: flex;
-  flex-direction: column;
-  font-family: "Satoshi", var(--font-family-sans);
-  overflow-y: auto;
-  resize: vertical;
-  box-sizing: border-box;
-}
-
-.button {
-  width: 100%;
-}
-
-.input {
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
-}
-
-.inputContainer {
-  margin-top: var(--spacing-1);
-}

package/src/components/TextEditor/index.tsx

@@ -1,166 +0,0 @@
-/**
- * TextEditor component - Edit text content of elements
- */
-
-import { useState, useRef, useEffect } from "react";
-import { useMessageBridge } from "../../hooks/useMessageBridge";
-import { Textarea } from "../ui/textarea";
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import { isAnchor } from "../../utils/elementUtils";
-import type { SelectedElementData } from "@promakeai/inspector-types";
-import styles from "./index.module.css";
-
-interface TextEditorProps {
-  element: HTMLElement;
-  elementData: SelectedElementData;
-}
-
-export function TextEditor({ element, elementData }: TextEditorProps) {
-  const { theme, labels } = useInspectorStore();
-  const [text, setText] = useState("");
-  const [href, setHref] = useState("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const { sendToParent } = useMessageBridge();
-  const isAnchorElement = isAnchor(element);
-
-  useEffect(() => {
-    // Initialize with current text content
-    if (elementData.isTextNode && elementData.textContent) {
-      setText(elementData.textContent);
-    }
-
-    // Initialize href for anchor tags
-    if (isAnchorElement) {
-      const anchorElement = element as HTMLAnchorElement;
-      setHref(anchorElement.href || "");
-    }
-
-    // Focus textarea
-    if (textareaRef.current) {
-      textareaRef.current.focus();
-      textareaRef.current.select();
-    }
-  }, [elementData, element, isAnchorElement]);
-
-  const handleUpdate = () => {
-    // Update DOM immediately - only update direct text nodes, not nested ones
-    const updateTextNodes = (el: HTMLElement) => {
-      for (let i = 0; i < el.childNodes.length; i++) {
-        const node = el.childNodes[i];
-        if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
-          node.textContent = text;
-          break; // Only update the first text node, don't recurse
-        }
-      }
-    };
-
-    if (element) {
-      updateTextNodes(element);
-    }
-
-    // Update href for anchor tags
-    if (isAnchorElement && href) {
-      const anchorElement = element as HTMLAnchorElement;
-      anchorElement.href = href;
-
-      // Send attribute update to parent
-      sendToParent("INSPECTOR_ATTRIBUTE_UPDATED", {
-        element: elementData,
-        attribute: "href",
-        value: href,
-        originalValue: anchorElement.getAttribute("href") || "",
-      });
-    }
-
-    // Send text update to parent
-    sendToParent("INSPECTOR_TEXT_UPDATED", {
-      text,
-      originalText: elementData.textContent,
-      element: elementData,
-    });
-  };
-
-  const handleKeyPress = (e: KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleUpdate();
-    }
-  };
-
-  return (
-    <div className={styles.container}>
-      {/* Text Content Label */}
-      <div className={styles.inputContainer}>
-        <label
-          style={{
-            display: "block",
-            fontFamily: "Satoshi, sans-serif",
-            fontSize: "var(--text-xs)",
-            fontWeight: 500,
-            marginBottom: "var(--spacing-1)",
-            color: theme.textColor,
-          }}
-        >
-          {labels.textContentLabel || "Text Content"}
-        </label>
-        <Textarea
-          ref={textareaRef}
-          value={text}
-          onInput={(e) => setText((e.target as HTMLTextAreaElement).value)}
-          onKeyDown={(e) => handleKeyPress(e as unknown as KeyboardEvent)}
-          placeholder={labels.textPlaceholder}
-          className={styles.textarea}
-          style={{
-            borderColor: theme.inputBorderColor,
-            color: theme.inputTextColor,
-            backgroundColor: theme.inputBackgroundColor,
-          }}
-        />
-      </div>
-      {/* Href input for anchor tags */}
-      {isAnchorElement && (
-        <div className={styles.inputContainer}>
-          <label
-            style={{
-              display: "block",
-              fontFamily: "Satoshi, sans-serif",
-              fontSize: "var(--text-xs)",
-              fontWeight: 500,
-              marginBottom: "var(--spacing-1)",
-              color: theme.textColor,
-            }}
-          >
-            {labels.linkUrlLabel || "Link URL (href)"}
-          </label>
-          <Input
-            type="url"
-            value={href}
-            onChange={(e) => setHref(e.target.value)}
-            placeholder="https://example.com"
-            className={styles.input}
-            style={{
-              borderColor: theme.inputBorderColor,
-              color: theme.inputTextColor,
-              backgroundColor: theme.inputBackgroundColor,
-            }}
-          />
-        </div>
-      )}
-
-      <div>
-        <Button
-          onClick={handleUpdate}
-          className={styles.button}
-          style={{
-            backgroundColor: theme.buttonColor,
-            color: theme.buttonTextColor,
-          }}
-        >
-          {labels.updateText}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/ui/CustomCollapsible.tsx

@@ -1,159 +0,0 @@
-/**
- * Custom Collapsible Component
- * Simple accordion without external dependencies
- */
-
-import React, { useState, useRef, useEffect } from "react";
-
-interface CollapsibleProps {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  children: React.ReactNode;
-}
-
-export function Collapsible({
-  open = false,
-  onOpenChange,
-  children,
-}: CollapsibleProps) {
-  const [isOpen, setIsOpen] = useState(open);
-
-  useEffect(() => {
-    setIsOpen(open);
-  }, [open]);
-
-  const handleToggle = () => {
-    const newState = !isOpen;
-    setIsOpen(newState);
-    onOpenChange?.(newState);
-  };
-
-  return (
-    <div data-collapsible data-state={isOpen ? "open" : "closed"}>
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          if (child.type === CollapsibleTrigger) {
-            return React.cloneElement(child as React.ReactElement<any>, {
-              onClick: handleToggle,
-              "data-state": isOpen ? "open" : "closed",
-            });
-          }
-          if (child.type === CollapsibleContent) {
-            return React.cloneElement(child as React.ReactElement<any>, {
-              isOpen,
-            });
-          }
-        }
-        return child;
-      })}
-    </div>
-  );
-}
-
-interface CollapsibleTriggerProps {
-  asChild?: boolean;
-  children: React.ReactNode;
-  onClick?: () => void;
-  "data-state"?: "open" | "closed";
-}
-
-export const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
-  ({ asChild, children, onClick, ...props }, ref) => {
-    if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children as React.ReactElement<any>, {
-        onClick: (e: React.MouseEvent) => {
-          onClick?.();
-          (children as React.ReactElement<any>).props.onClick?.(e);
-        },
-        ...props,
-      });
-    }
-
-    return (
-      <button ref={ref} onClick={onClick} {...props}>
-        {children}
-      </button>
-    );
-  }
-);
-
-CollapsibleTrigger.displayName = "CollapsibleTrigger";
-
-interface CollapsibleContentProps {
-  children: React.ReactNode;
-  className?: string;
-  isOpen?: boolean;
-}
-
-export function CollapsibleContent({
-  children,
-  className,
-  isOpen,
-}: CollapsibleContentProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const innerRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState<string | number>(isOpen ? "auto" : 0);
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  useEffect(() => {
-    if (!contentRef.current || !innerRef.current) return;
-
-    if (isOpen) {
-      setIsAnimating(true);
-      const contentHeight = innerRef.current.scrollHeight;
-
-      // Start from 0
-      setHeight(0);
-
-      // Trigger reflow
-      contentRef.current.offsetHeight;
-
-      // Expand to full height
-      setHeight(contentHeight);
-
-      // After animation, set to auto for dynamic content
-      const timer = setTimeout(() => {
-        setHeight("auto");
-        setIsAnimating(false);
-      }, 200);
-
-      return () => clearTimeout(timer);
-    } else {
-      setIsAnimating(true);
-      // Get current height first for smooth collapse
-      const contentHeight = innerRef.current.scrollHeight;
-      setHeight(contentHeight);
-
-      // Trigger reflow
-      contentRef.current.offsetHeight;
-
-      // Collapse to 0
-      requestAnimationFrame(() => {
-        setHeight(0);
-      });
-
-      // Clear animating flag
-      const timer = setTimeout(() => {
-        setIsAnimating(false);
-      }, 200);
-
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen]);
-
-  return (
-    <div
-      ref={contentRef}
-      className={className}
-      data-state={isOpen ? "open" : "closed"}
-      style={{
-        height: height,
-        overflow: isOpen || isAnimating ? "hidden" : "hidden",
-        transition: "height 200ms cubic-bezier(0.4, 0, 0.2, 1)",
-        visibility: !isOpen && !isAnimating ? "hidden" : "visible",
-      }}
-    >
-      <div ref={innerRef}>{children}</div>
-    </div>
-  );
-}

package/src/components/ui/button.module.css

@@ -1,141 +0,0 @@
-/* Base button styles */
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-2);
-  white-space: nowrap;
-  border-radius: var(--radius-md);
-  font-family: 'Satoshi', var(--font-family-sans);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  transition: all var(--transition-fast);
-  cursor: pointer;
-  outline: none;
-  border: none;
-  flex-shrink: 0;
-  box-shadow: none;
-}
-
-.button:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.button svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-
-/* Variant styles using composition */
-.default {
-  composes: button;
-  box-shadow: none;
-}
-
-.default:hover:not(:disabled) {
-  opacity: 0.95;
-  box-shadow: none;
-}
-
-.destructive {
-  composes: button;
-  box-shadow: none;
-}
-
-.destructive:hover:not(:disabled) {
-  opacity: 0.95;
-  box-shadow: none;
-}
-
-.outline {
-  composes: button;
-  border: 1px solid;
-  box-shadow: none;
-}
-
-.outline:hover:not(:disabled) {
-  opacity: 0.9;
-  box-shadow: none;
-}
-
-.secondary {
-  composes: button;
-}
-
-.secondary:hover:not(:disabled) {
-  opacity: 0.9;
-}
-
-.ghost {
-  composes: button;
-  background: transparent;
-}
-
-.ghost:hover:not(:disabled) {
-  opacity: 0.7;
-}
-
-.link {
-  composes: button;
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-
-.link:hover:not(:disabled) {
-  text-decoration: underline;
-  opacity: 0.8;
-}
-
-/* Size variants */
-.sizeDefault {
-  height: var(--spacing-9);
-  padding: var(--spacing-2) var(--spacing-4);
-}
-
-.sizeDefault:has(> svg) {
-  padding-left: var(--spacing-3);
-  padding-right: var(--spacing-3);
-}
-
-.sizeSm {
-  height: var(--spacing-8);
-  padding: 0 var(--spacing-3);
-  gap: var(--spacing-1-5);
-}
-
-.sizeSm:has(> svg) {
-  padding-left: var(--spacing-2-5);
-  padding-right: var(--spacing-2-5);
-}
-
-.sizeLg {
-  height: var(--spacing-10);
-  padding: 0 var(--spacing-6);
-}
-
-.sizeLg:has(> svg) {
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
-}
-
-.sizeIcon {
-  width: var(--spacing-9);
-  height: var(--spacing-9);
-  padding: 0;
-}
-
-.sizeIconSm {
-  width: var(--spacing-8);
-  height: var(--spacing-8);
-  padding: 0;
-}
-
-.sizeIconLg {
-  width: var(--spacing-10);
-  height: var(--spacing-10);
-  padding: 0;
-}
-