@tecof/theme-editor 0.0.19 → 0.0.21

package/dist/styles.css

@@ -1536,4 +1536,89 @@
 .tecof-lang-loading-dot:nth-child(3) { animation: tecof-pulse 1.2s ease-in-out 0.4s infinite; }
 .filepond--root {
   margin-bottom: 0 !important;
+}
+
+/* ─── Puck Drawer (Sidebar Component Preview) Settings ─── */
+.tecof-drawer-item-group {
+  position: relative;
+  width: 100%;
+}
+
+.tecof-drawer-popover {
+  display: none;
+  position: absolute;
+  left: 105%;
+  top: 0;
+  z-index: 1000;
+  width: 320px;
+  flex-direction: column;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e4e4e7;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none; /* Prevent flickering and accidental interactions */
+}
+
+/* Show the popover when hovering over its parent .group */
+.group:hover .tecof-drawer-popover {
+  display: flex;
+}
+
+.tecof-drawer-popover-header {
+  background-color: #f4f4f5;
+  border-bottom: 1px solid #e4e4e7;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-family: 'Inter', system-ui, sans-serif;
+  font-weight: 600;
+  color: #3f3f46;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.tecof-drawer-popover-body {
+  position: relative;
+  width: 100%;
+  min-height: 120px;
+  background-color: #fafafa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.tecof-drawer-skeleton {
+  position: absolute;
+  inset: 8px;
+  background-color: #e4e4e7;
+  border-radius: 6px;
+  animation: tecof-pulse-loader 1.5s infinite ease-in-out;
+}
+
+.tecof-drawer-img {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  border: 1px solid #f4f4f5;
+  background: white;
+}
+
+@keyframes tecof-pulse-loader {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.tecof-picture-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tecof/theme-editor",
-    "version": "0.0.19",
+    "version": "0.0.21",
     "description": "React theme editor library for Tecof projects",
     "keywords": [
         "react",
@@ -57,7 +57,7 @@
     },
     "devDependencies": {
         "@monaco-editor/react": "^4.7.0",
-        "@puckeditor/core": "^0.21.1",
+        "@puckeditor/core": "^0.21.2",
         "@storybook/react-vite": "^8.0.0",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
@@ -80,5 +80,9 @@
         "typescript": "^5.0.0",
         "vaul": "^1.1.2",
         "vitest": "^3.0.0"
+    },
+    "dependencies": {
+        "i": "^0.3.7",
+        "npm": "^11.12.1"
     }
 }