figma-mcp-cli 1.0.6 → 1.0.7

package/my-new-project/my-app/src/components/LightingPanel.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import "../styles/LightingPanel.css";
+
+interface Light {
+  id: string;
+  name: string;
+  image: string;
+  isSelected?: boolean;
+}
+
+export default function LightingPanel() {
+  const [lights, setLights] = useState<Light[]>([
+    { id: "1", name: "Daytime", image: "☀️", isSelected: true },
+    { id: "2", name: "Day Lights On", image: "💡", isSelected: false },
+  ]);
+
+  const toggleLight = (lightId: string) => {
+    setLights(
+      lights.map((light) =>
+        light.id === lightId
+          ? { ...light, isSelected: !light.isSelected }
+          : light
+      )
+    );
+  };
+
+  const addLight = () => {
+    const newLight: Light = {
+      id: Date.now().toString(),
+      name: `Light ${lights.length + 1}`,
+      image: "✨",
+      isSelected: false,
+    };
+    setLights([...lights, newLight]);
+  };
+
+  return (
+    <div className="lighting-panel">
+      <button className="add-light-btn" onClick={addLight}>
+        <span className="plus-icon">+</span>
+        Add light
+      </button>
+      <div className="lights-grid">
+        {lights.map((light) => (
+          <button
+            key={light.id}
+            className={`light-card ${light.isSelected ? "selected" : ""}`}
+            onClick={() => toggleLight(light.id)}
+          >
+            <div className="light-image">{light.image}</div>
+            <div className="light-name">{light.name}</div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/my-new-project/my-app/src/components/RenderScalePanel.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import "../styles/RenderScalePanel.css";
+
+export default function RenderScalePanel() {
+  const [selectedRatio, setSelectedRatio] = useState<string>("16:9");
+
+  const ratios = [
+    ["16:9", "9:16", "4:3"],
+    ["3:4", "1:1"],
+  ];
+
+  return (
+    <div className="render-scale-panel">
+      <div className="panel-header">Render Scale</div>
+      <div className="render-scale-grid">
+        {ratios.map((row, rowIdx) => (
+          <div key={rowIdx} className="ratio-row">
+            {row.map((ratio) => (
+              <button
+                key={ratio}
+                className={`ratio-pill ${
+                  selectedRatio === ratio ? "active" : ""
+                }`}
+                onClick={() => setSelectedRatio(ratio)}
+              >
+                {ratio}
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/my-new-project/my-app/src/components/ResolutionPanel.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import "../styles/ResolutionPanel.css";
+
+export default function ResolutionPanel() {
+  const [selectedResolution, setSelectedResolution] = useState<string>("1K SD");
+
+  const resolutions = ["1K SD", "2K HD", "3K FHD", "4K UHD"];
+
+  return (
+    <div className="resolution-panel">
+      <div className="panel-header">Resolution</div>
+      <div className="resolution-grid">
+        {resolutions.map((res) => (
+          <button
+            key={res}
+            className={`resolution-pill ${
+              selectedResolution === res ? "active" : ""
+            }`}
+            onClick={() => setSelectedResolution(res)}
+          >
+            {res}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/my-new-project/my-app/src/components/SaturationPanel.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import "../styles/SaturationPanel.css";
+
+export default function SaturationPanel() {
+  const [selectedSaturation, setSelectedSaturation] = useState<string>("Low");
+
+  const saturations = ["Low", "Medium", "High"];
+
+  return (
+    <div className="saturation-panel">
+      <div className="panel-header">Saturation</div>
+      <div className="saturation-grid">
+        {saturations.map((sat) => (
+          <button
+            key={sat}
+            className={`saturation-pill ${
+              selectedSaturation === sat ? "active" : ""
+            }`}
+            onClick={() => setSelectedSaturation(sat)}
+          >
+            {sat}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/my-new-project/my-app/src/components/SidebarButton.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import "../styles/SidebarButton.css";
+
+interface SidebarButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export default function SidebarButton({
+  icon,
+  label,
+  isActive,
+  onClick,
+}: SidebarButtonProps) {
+  return (
+    <button
+      className={`sidebar-button ${isActive ? "active" : ""}`}
+      onClick={onClick}
+      title={label.replace("\n", " ")}
+    >
+      <div className="sidebar-button-icon">{icon}</div>
+      <div className="sidebar-button-label">{label}</div>
+    </button>
+  );
+}

package/my-new-project/my-app/src/components/SidebarPreview.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import "../styles/SidebarPreview.css";
+
+interface SidebarPreviewProps {
+  activeItem: string;
+  previewImage: string;
+}
+
+export default function SidebarPreview({
+  activeItem,
+  previewImage,
+}: SidebarPreviewProps) {
+  const getPreviewContent = () => {
+    switch (activeItem) {
+      case "draw-plan":
+        return {
+          title: "Draw Plan",
+          description:
+            "Create and edit floor plans with precision drawing tools.",
+        };
+      case "furniture-model":
+        return {
+          title: "Furniture Model",
+          description: "Browse and add furniture models to your design.",
+        };
+      case "generic-model":
+        return {
+          title: "Generic Model",
+          description: "Use generic 3D models for quick prototyping.",
+        };
+      case "idea":
+        return {
+          title: "Idea",
+          description: "Save and manage your design ideas and inspiration.",
+        };
+      case "sharing-idea":
+        return {
+          title: "Sharing Idea",
+          description: "Share your ideas and collaborate with team members.",
+        };
+      case "function-bubble":
+        return {
+          title: "Function Bubble",
+          description: "Interactive annotations and function callouts.",
+        };
+      case "upload":
+        return {
+          title: "Upload",
+          description: "Upload custom assets and models to your workspace.",
+        };
+      case "showroom":
+        return {
+          title: "Showroom",
+          description: "View and manage your design showroom.",
+        };
+      default:
+        return {
+          title: "Welcome",
+          description: "Select a tool to get started.",
+        };
+    }
+  };
+
+  const content = getPreviewContent();
+
+  return (
+    <div className="sidebar-preview">
+      <div className="preview-image-container">
+        <img src={previewImage} alt="Preview" className="preview-image" />
+      </div>
+      <div className="preview-content">
+        <h2 className="preview-title">{content.title}</h2>
+        <p className="preview-description">{content.description}</p>
+      </div>
+    </div>
+  );
+}

package/my-new-project/my-app/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/my-new-project/my-app/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/my-new-project/my-app/src/styles/AccordionSection.css

@@ -0,0 +1,70 @@
+.accordion-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 48px;
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  font-family: inherit;
+}
+
+.accordion-header:hover {
+  background-color: #f5f5f5;
+}
+
+.accordion-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #111;
+  text-align: left;
+  flex: 1;
+}
+
+.chevron-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+}
+
+.accordion-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .accordion-header {
+    padding: 8px 12px;
+  }
+
+  .accordion-title {
+    font-size: 13px;
+  }
+}

package/my-new-project/my-app/src/styles/EnvironmentScenePanel.css

@@ -0,0 +1,104 @@
+.environment-scene-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.scenes-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.scene-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: transparent;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex: 0 0 calc(50% - 4px);
+  min-width: 96px;
+  font-family: inherit;
+}
+
+.scene-card:hover {
+  background: #f5f5f5;
+}
+
+.scene-card.selected {
+  border-color: #111;
+  background: #f5f5f5;
+}
+
+.scene-image {
+  width: 96px;
+  height: 78px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  background: #f0f0f0;
+}
+
+.scene-name {
+  font-size: 10px;
+  font-weight: 400;
+  color: #111;
+  text-align: center;
+}
+
+.scene-card.selected .scene-name {
+  font-weight: 700;
+  color: #111;
+}
+
+.upload-scene-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 4px 12px;
+  padding-left: 4px;
+  background: #f5f5f5;
+  border: none;
+  border-radius: 64px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #111;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+  width: 100%;
+  margin-top: 4px;
+}
+
+.upload-scene-btn:hover {
+  background: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+@media (max-width: 768px) {
+  .scene-image {
+    width: 80px;
+    height: 64px;
+    font-size: 24px;
+  }
+
+  .scene-name {
+    font-size: 9px;
+  }
+
+  .scene-card {
+    min-width: 80px;
+  }
+}

package/my-new-project/my-app/src/styles/LightingPanel.css

@@ -0,0 +1,111 @@
+.lighting-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.add-light-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 4px 12px;
+  padding-left: 4px;
+  background: #f5f5f5;
+  border: none;
+  border-radius: 64px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #111;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.add-light-btn:hover {
+  background: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.plus-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.lights-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.light-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: transparent;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex: 0 0 calc(50% - 4px);
+  min-width: 96px;
+  font-family: inherit;
+}
+
+.light-card:hover {
+  background: #f5f5f5;
+}
+
+.light-card.selected {
+  border-color: #111;
+  background: #f5f5f5;
+}
+
+.light-image {
+  width: 96px;
+  height: 78px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  background: #f0f0f0;
+}
+
+.light-name {
+  font-size: 10px;
+  font-weight: 700;
+  color: #111;
+  text-align: center;
+}
+
+.light-card.selected .light-name {
+  font-weight: 700;
+  color: #111;
+}
+
+@media (max-width: 768px) {
+  .light-image {
+    width: 80px;
+    height: 64px;
+    font-size: 24px;
+  }
+
+  .light-name {
+    font-size: 9px;
+  }
+
+  .light-card {
+    min-width: 80px;
+  }
+}

package/my-new-project/my-app/src/styles/RenderScalePanel.css

@@ -0,0 +1,67 @@
+.render-scale-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.render-scale-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.ratio-row {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.ratio-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding: 4px 12px;
+  background: #f5f5f5;
+  border: 2px solid transparent;
+  border-radius: 64px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #111;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex: 0 0 auto;
+  min-width: 62px;
+  font-family: inherit;
+}
+
+.ratio-pill:hover {
+  background: #ffffff;
+  border-color: #ddd;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.ratio-pill.active {
+  background: #f5f5f5;
+  border-color: #111;
+  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);
+}
+
+@media (max-width: 768px) {
+  .ratio-pill {
+    font-size: 11px;
+    padding: 3px 10px;
+    min-width: 56px;
+  }
+
+  .ratio-row {
+    gap: 8px;
+  }
+
+  .render-scale-grid {
+    gap: 8px;
+  }
+}