magic-editor-x 1.3.7 → 1.4.0

package/dist/_chunks/CustomBlocksPage-BkmF2iOQ.js

@@ -0,0 +1,1518 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const admin = require("@strapi/strapi/admin");
+const styled = require("styled-components");
+const outline = require("@heroicons/react/24/outline");
+const solid = require("@heroicons/react/24/solid");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const PLUGIN_ID = "magic-editor-x";
+const fadeIn = styled.keyframes`
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const slideIn = styled.keyframes`
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+`;
+styled.keyframes`
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+`;
+styled.keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+const PageWrapper = styled__default.default.div`
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
+  padding: 32px;
+`;
+const Container = styled__default.default.div`
+  max-width: 1400px;
+  margin: 0 auto;
+  animation: ${fadeIn} 0.4s ease-out;
+`;
+const Header = styled__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 32px;
+  gap: 24px;
+  flex-wrap: wrap;
+`;
+const HeaderLeft = styled__default.default.div`
+  flex: 1;
+  min-width: 300px;
+`;
+const HeaderRight = styled__default.default.div`
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+`;
+const PageTitle = styled__default.default.h1`
+  font-size: 2rem;
+  font-weight: 800;
+  color: #0f172a;
+  margin: 0 0 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  
+  svg {
+    width: 32px;
+    height: 32px;
+    color: #7c3aed;
+  }
+`;
+const PageSubtitle = styled__default.default.p`
+  font-size: 1rem;
+  color: #64748b;
+  margin: 0;
+  line-height: 1.5;
+`;
+const Button = styled__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: ${(props) => props.$size === "small" ? "8px 14px" : "12px 20px"};
+  font-size: ${(props) => props.$size === "small" ? "13px" : "14px"};
+  font-weight: 600;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  svg {
+    width: ${(props) => props.$size === "small" ? "16px" : "18px"};
+    height: ${(props) => props.$size === "small" ? "16px" : "18px"};
+  }
+  
+  ${(props) => props.$variant === "primary" && `
+    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+    color: white;
+    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
+    }
+    
+    &:active {
+      transform: translateY(0);
+    }
+  `}
+  
+  ${(props) => props.$variant === "secondary" && `
+    background: white;
+    color: #475569;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    
+    &:hover {
+      background: #f8fafc;
+      border-color: #cbd5e1;
+      color: #1e293b;
+    }
+  `}
+  
+  ${(props) => props.$variant === "ghost" && `
+    background: transparent;
+    color: #64748b;
+    
+    &:hover {
+      background: rgba(124, 58, 237, 0.08);
+      color: #7c3aed;
+    }
+  `}
+  
+  ${(props) => props.$variant === "danger" && `
+    background: transparent;
+    color: #ef4444;
+    
+    &:hover {
+      background: rgba(239, 68, 68, 0.08);
+    }
+  `}
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+`;
+const IconButton = styled__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: transparent;
+  color: #64748b;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+  
+  &:hover {
+    background: ${(props) => props.$danger ? "rgba(239, 68, 68, 0.1)" : "rgba(124, 58, 237, 0.1)"};
+    color: ${(props) => props.$danger ? "#ef4444" : "#7c3aed"};
+    transform: scale(1.05);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const BlocksGrid = styled__default.default.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 20px;
+`;
+const BlockCard = styled__default.default.div`
+  background: white;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+  transition: all 0.25s ease;
+  animation: ${slideIn} 0.3s ease-out;
+  animation-delay: ${(props) => props.$index * 0.05}s;
+  animation-fill-mode: both;
+  
+  &:hover {
+    border-color: #c4b5fd;
+    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.12);
+    transform: translateY(-4px);
+  }
+  
+  ${(props) => !props.$enabled && `
+    opacity: 0.6;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  `}
+`;
+const CardHeader = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  border-bottom: 1px solid #f1f5f9;
+`;
+const BlockIconWrapper = styled__default.default.div`
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(props) => props.$type === "embedded-entry" ? "linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)" : "linear-gradient(135deg, #10b981 0%, #059669 100%)"};
+  color: white;
+  box-shadow: ${(props) => props.$type === "embedded-entry" ? "0 4px 14px rgba(124, 58, 237, 0.35)" : "0 4px 14px rgba(16, 185, 129, 0.35)"};
+  flex-shrink: 0;
+  
+  svg {
+    width: 26px;
+    height: 26px;
+  }
+`;
+const BlockInfo = styled__default.default.div`
+  flex: 1;
+  min-width: 0;
+`;
+const BlockName = styled__default.default.h3`
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 4px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const BlockSlug = styled__default.default.span`
+  font-size: 0.8rem;
+  color: #94a3b8;
+  font-family: 'SF Mono', Monaco, monospace;
+  background: #f8fafc;
+  padding: 2px 8px;
+  border-radius: 6px;
+`;
+const CardBody = styled__default.default.div`
+  padding: 20px;
+`;
+const BlockDescription = styled__default.default.p`
+  font-size: 0.9rem;
+  color: #64748b;
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+const MetaRow = styled__default.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 16px;
+`;
+const MetaTag = styled__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-radius: 8px;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+  
+  ${(props) => props.$type === "type" && `
+    background: ${props.$value === "embedded-entry" ? "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)" : "linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)"};
+    color: ${props.$value === "embedded-entry" ? "#6d28d9" : "#047857"};
+  `}
+  
+  ${(props) => props.$type === "status" && `
+    background: ${props.$enabled ? "#dcfce7" : "#fee2e2"};
+    color: ${props.$enabled ? "#166534" : "#991b1b"};
+  `}
+  
+  ${(props) => props.$type === "shortcut" && `
+    background: #f1f5f9;
+    color: #475569;
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.75rem;
+  `}
+  
+  ${(props) => props.$type === "content-type" && `
+    background: #fef3c7;
+    color: #92400e;
+  `}
+`;
+const CardFooter = styled__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: #fafbfc;
+  border-top: 1px solid #f1f5f9;
+`;
+const ActionGroup = styled__default.default.div`
+  display: flex;
+  gap: 4px;
+`;
+const ToggleSwitch = styled__default.default.button`
+  position: relative;
+  width: 48px;
+  height: 26px;
+  border-radius: 13px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  background: ${(props) => props.$enabled ? "#10b981" : "#cbd5e1"};
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: ${(props) => props.$enabled ? "25px" : "3px"};
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    transition: all 0.25s ease;
+  }
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+`;
+const EmptyState = styled__default.default.div`
+  text-align: center;
+  padding: 80px 40px;
+  background: white;
+  border-radius: 20px;
+  border: 2px dashed #e2e8f0;
+`;
+const EmptyIcon = styled__default.default.div`
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 24px;
+  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  svg {
+    width: 40px;
+    height: 40px;
+    color: #7c3aed;
+  }
+`;
+const EmptyTitle = styled__default.default.h2`
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 12px 0;
+`;
+const EmptyText = styled__default.default.p`
+  font-size: 1rem;
+  color: #64748b;
+  margin: 0 0 32px 0;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.6;
+`;
+const ModalOverlay = styled__default.default.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  padding: 20px;
+  animation: ${fadeIn} 0.2s ease-out;
+`;
+const ModalContent = styled__default.default.div`
+  background: white;
+  border-radius: 20px;
+  width: 100%;
+  max-width: 640px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+  animation: ${fadeIn} 0.3s ease-out;
+`;
+const ModalHeader = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px;
+  border-bottom: 1px solid #f1f5f9;
+`;
+const ModalTitle = styled__default.default.h2`
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  
+  svg {
+    width: 24px;
+    height: 24px;
+    color: #7c3aed;
+  }
+`;
+const ModalBody = styled__default.default.div`
+  padding: 24px;
+  overflow-y: auto;
+  flex: 1;
+`;
+const ModalFooter = styled__default.default.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 24px;
+  background: #fafbfc;
+  border-top: 1px solid #f1f5f9;
+`;
+const FormSection = styled__default.default.div`
+  margin-bottom: 28px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const SectionTitle = styled__default.default.h3`
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #7c3aed;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 16px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const FormGrid = styled__default.default.div`
+  display: grid;
+  grid-template-columns: ${(props) => props.$columns || "1fr"};
+  gap: 16px;
+`;
+const FormGroup = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+const Label = styled__default.default.label`
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  
+  span {
+    color: #ef4444;
+  }
+`;
+const Input = styled__default.default.input`
+  padding: 12px 16px;
+  font-size: 0.95rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fafbfc;
+  color: #1e293b;
+  transition: all 0.2s ease;
+  
+  &:focus {
+    outline: none;
+    border-color: #7c3aed;
+    background: white;
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+  }
+  
+  &::placeholder {
+    color: #94a3b8;
+  }
+  
+  &:disabled {
+    background: #f1f5f9;
+    color: #94a3b8;
+    cursor: not-allowed;
+  }
+`;
+const TextArea = styled__default.default.textarea`
+  padding: 12px 16px;
+  font-size: 0.95rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fafbfc;
+  color: #1e293b;
+  resize: vertical;
+  min-height: ${(props) => props.$rows ? `${props.$rows * 24 + 24}px` : "100px"};
+  font-family: ${(props) => props.$mono ? "'SF Mono', Monaco, monospace" : "inherit"};
+  transition: all 0.2s ease;
+  
+  &:focus {
+    outline: none;
+    border-color: #7c3aed;
+    background: white;
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+  }
+  
+  &::placeholder {
+    color: #94a3b8;
+  }
+`;
+const Select = styled__default.default.select`
+  padding: 12px 16px;
+  font-size: 0.95rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fafbfc;
+  color: #1e293b;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 18px;
+  padding-right: 40px;
+  
+  &:focus {
+    outline: none;
+    border-color: #7c3aed;
+    background-color: white;
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+  }
+`;
+const Hint = styled__default.default.span`
+  font-size: 0.8rem;
+  color: #94a3b8;
+`;
+const CheckboxRow = styled__default.default.label`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: #fafbfc;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+  }
+`;
+const Checkbox = styled__default.default.input.attrs({ type: "checkbox" })`
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  accent-color: #7c3aed;
+  cursor: pointer;
+`;
+const CheckboxLabel = styled__default.default.span`
+  font-size: 0.95rem;
+  color: #374151;
+  font-weight: 500;
+`;
+const FieldsContainer = styled__default.default.div`
+  background: #f8fafc;
+  border-radius: 12px;
+  padding: 16px;
+  margin-top: 8px;
+`;
+const FieldRow = styled__default.default.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 120px 40px;
+  gap: 12px;
+  padding: 12px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const FieldInput = styled__default.default(Input)`
+  padding: 10px 12px;
+  font-size: 0.875rem;
+`;
+const FieldSelect = styled__default.default(Select)`
+  padding: 10px 12px;
+  font-size: 0.875rem;
+`;
+const AddFieldButton = styled__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  background: transparent;
+  border: 2px dashed #cbd5e1;
+  border-radius: 10px;
+  color: #64748b;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-top: 12px;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+  
+  &:hover {
+    border-color: #7c3aed;
+    color: #7c3aed;
+    background: rgba(124, 58, 237, 0.04);
+  }
+`;
+const LoadingWrapper = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 40px;
+`;
+const LoadingSpinner = styled__default.default.div`
+  width: 48px;
+  height: 48px;
+  border: 4px solid #e2e8f0;
+  border-top-color: #7c3aed;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 16px;
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`;
+const LoadingText = styled__default.default.p`
+  font-size: 1rem;
+  color: #64748b;
+`;
+const LimitsBanner = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
+  border: 1px solid #c4b5fd;
+  border-radius: 14px;
+  margin-bottom: 24px;
+`;
+const LimitsInfo = styled__default.default.div`
+  flex: 1;
+`;
+const LimitsText = styled__default.default.div`
+  font-size: 0.9rem;
+  color: #5b21b6;
+  font-weight: 500;
+  
+  strong {
+    font-weight: 700;
+  }
+`;
+const LimitsProgress = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+`;
+const ProgressBar = styled__default.default.div`
+  flex: 1;
+  max-width: 200px;
+  height: 8px;
+  background: #ddd6fe;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const ProgressFill = styled__default.default.div`
+  height: 100%;
+  background: ${(props) => props.$percentage >= 100 ? "#ef4444" : props.$percentage >= 80 ? "#f59e0b" : "#7c3aed"};
+  border-radius: 4px;
+  width: ${(props) => Math.min(props.$percentage, 100)}%;
+  transition: width 0.3s ease;
+`;
+const ProgressLabel = styled__default.default.span`
+  font-size: 0.8rem;
+  color: #6d28d9;
+  font-weight: 600;
+`;
+const TierBadge = styled__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 20px;
+  background: ${(props) => {
+  switch (props.$tier) {
+    case "enterprise":
+      return "linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%)";
+    case "advanced":
+      return "linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%)";
+    case "premium":
+      return "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)";
+    default:
+      return "linear-gradient(135deg, #6b7280 0%, #4b5563 100%)";
+  }
+}};
+  color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+`;
+const UpgradeButton = styled__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 8px;
+  border: none;
+  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  border-radius: 10px;
+  margin-top: 16px;
+  font-size: 0.85rem;
+  color: #92400e;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+`;
+const FeatureLockedBadge = styled__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-radius: 4px;
+  background: #fee2e2;
+  color: #991b1b;
+  margin-left: 8px;
+  
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+const CustomBlocksPage = () => {
+  const { toggleNotification } = admin.useNotification();
+  const { get, post, put, del } = admin.useFetchClient();
+  const [blocks, setBlocks] = React.useState([]);
+  const [contentTypes, setContentTypes] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [editingBlock, setEditingBlock] = React.useState(null);
+  const [formData, setFormData] = React.useState(getEmptyFormData());
+  const [limits, setLimits] = React.useState(null);
+  function getEmptyFormData() {
+    return {
+      name: "",
+      label: "",
+      blockType: "simple",
+      description: "",
+      icon: "",
+      contentType: "",
+      displayFields: ["title", "name"],
+      titleField: "title",
+      previewFields: [],
+      fields: [],
+      template: "",
+      placeholder: "Enter content...",
+      styles: {},
+      inlineToolbar: true,
+      tunes: [],
+      shortcut: "",
+      sortOrder: 0,
+      enabled: true
+    };
+  }
+  const fetchBlocks = React.useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const response = await get(`/${PLUGIN_ID}/custom-blocks?enabledOnly=false`);
+      setBlocks(response.data?.data || []);
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error fetching blocks:", error);
+      toggleNotification({
+        type: "danger",
+        message: "Failed to load custom blocks"
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [get, toggleNotification]);
+  const fetchContentTypes = React.useCallback(async () => {
+    try {
+      const response = await get(`/${PLUGIN_ID}/content-types`);
+      setContentTypes(response.data?.contentTypes || []);
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error fetching content types:", error);
+    }
+  }, [get]);
+  const fetchLimits = React.useCallback(async () => {
+    try {
+      const response = await get(`/${PLUGIN_ID}/custom-blocks/limits`);
+      setLimits(response.data?.data || null);
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error fetching limits:", error);
+    }
+  }, [get]);
+  React.useEffect(() => {
+    fetchBlocks();
+    fetchContentTypes();
+    fetchLimits();
+  }, [fetchBlocks, fetchContentTypes, fetchLimits]);
+  const getUsagePercentage = () => {
+    if (!limits || limits.limits.maxTotal === -1) return 0;
+    return Math.round(limits.usage.total / limits.limits.maxTotal * 100);
+  };
+  const canCreateMoreBlocks = () => {
+    if (!limits) return true;
+    return limits.canCreateSimple || limits.canCreateEmbedded;
+  };
+  const canCreateEmbeddedEntry = () => {
+    if (!limits) return true;
+    return limits.canCreateEmbedded;
+  };
+  const canExportImport = () => {
+    if (!limits) return true;
+    return limits.limits.exportImport === true;
+  };
+  const handleCreate = () => {
+    if (!canCreateMoreBlocks()) {
+      toggleNotification({
+        type: "warning",
+        message: `Block limit reached (${limits?.usage?.total}/${limits?.limits?.maxTotal}). Upgrade to create more.`
+      });
+      return;
+    }
+    setEditingBlock(null);
+    setFormData(getEmptyFormData());
+    setIsModalOpen(true);
+  };
+  const handleEdit = (block) => {
+    setEditingBlock(block);
+    setFormData({
+      name: block.name || "",
+      label: block.label || "",
+      blockType: block.blockType || "simple",
+      description: block.description || "",
+      icon: block.icon || "",
+      contentType: block.contentType || "",
+      displayFields: block.displayFields || ["title", "name"],
+      titleField: block.titleField || "title",
+      previewFields: block.previewFields || [],
+      fields: block.fields || [],
+      template: block.template || "",
+      placeholder: block.placeholder || "Enter content...",
+      styles: block.styles || {},
+      inlineToolbar: block.inlineToolbar !== false,
+      tunes: block.tunes || [],
+      shortcut: block.shortcut || "",
+      sortOrder: block.sortOrder || 0,
+      enabled: block.enabled !== false
+    });
+    setIsModalOpen(true);
+  };
+  const handleSave = async () => {
+    try {
+      if (!formData.name) {
+        toggleNotification({ type: "warning", message: "Block name is required" });
+        return;
+      }
+      if (!formData.label) {
+        toggleNotification({ type: "warning", message: "Display label is required" });
+        return;
+      }
+      if (editingBlock) {
+        await put(`/${PLUGIN_ID}/custom-blocks/${editingBlock.documentId}`, formData);
+        toggleNotification({ type: "success", message: "Block updated successfully" });
+      } else {
+        await post(`/${PLUGIN_ID}/custom-blocks`, formData);
+        toggleNotification({ type: "success", message: "Block created successfully" });
+      }
+      setIsModalOpen(false);
+      fetchBlocks();
+      fetchLimits();
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error saving block:", error);
+      const errorDetails = error.response?.data?.error?.details;
+      if (errorDetails?.code === "LIMIT_EXCEEDED") {
+        toggleNotification({
+          type: "warning",
+          message: error.response?.data?.error?.message || "Block limit reached. Upgrade to create more."
+        });
+        return;
+      }
+      toggleNotification({
+        type: "danger",
+        message: error.response?.data?.error?.message || "Failed to save block"
+      });
+    }
+  };
+  const handleDelete = async (block) => {
+    if (!window.confirm(`Delete block "${block.label || block.name}"? This cannot be undone.`)) {
+      return;
+    }
+    try {
+      await del(`/${PLUGIN_ID}/custom-blocks/${block.documentId}`);
+      toggleNotification({ type: "success", message: "Block deleted successfully" });
+      fetchBlocks();
+      fetchLimits();
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error deleting block:", error);
+      toggleNotification({ type: "danger", message: "Failed to delete block" });
+    }
+  };
+  const handleToggle = async (block) => {
+    try {
+      await post(`/${PLUGIN_ID}/custom-blocks/${block.documentId}/toggle`);
+      fetchBlocks();
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error toggling block:", error);
+      toggleNotification({ type: "danger", message: "Failed to toggle block" });
+    }
+  };
+  const handleDuplicate = async (block) => {
+    if (!canCreateMoreBlocks()) {
+      toggleNotification({
+        type: "warning",
+        message: `Block limit reached (${limits?.usage?.total}/${limits?.limits?.maxTotal}). Upgrade to duplicate.`
+      });
+      return;
+    }
+    const newName = prompt("Enter name for duplicated block:", `${block.name}_copy`);
+    if (!newName) return;
+    try {
+      await post(`/${PLUGIN_ID}/custom-blocks/${block.documentId}/duplicate`, { newName });
+      toggleNotification({ type: "success", message: "Block duplicated successfully" });
+      fetchBlocks();
+      fetchLimits();
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error duplicating block:", error);
+      const errorDetails = error.response?.data?.error?.details;
+      if (errorDetails?.code === "LIMIT_EXCEEDED") {
+        toggleNotification({
+          type: "warning",
+          message: error.response?.data?.error?.message || "Block limit reached. Upgrade to duplicate."
+        });
+        return;
+      }
+      toggleNotification({
+        type: "danger",
+        message: error.response?.data?.error?.message || "Failed to duplicate block"
+      });
+    }
+  };
+  const handleExport = async () => {
+    if (!canExportImport()) {
+      toggleNotification({
+        type: "warning",
+        message: "Export requires Advanced or Enterprise tier."
+      });
+      return;
+    }
+    try {
+      const response = await get(`/${PLUGIN_ID}/custom-blocks/export`);
+      const blob = new Blob([JSON.stringify(response.data, null, 2)], {
+        type: "application/json"
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "custom-blocks.json";
+      a.click();
+      URL.revokeObjectURL(url);
+      toggleNotification({ type: "success", message: "Blocks exported successfully" });
+    } catch (error) {
+      console.error("[CustomBlocksPage] Error exporting blocks:", error);
+      if (error.response?.data?.error?.details?.code === "FEATURE_NOT_AVAILABLE") {
+        toggleNotification({
+          type: "warning",
+          message: "Export requires Advanced or Enterprise tier."
+        });
+        return;
+      }
+      toggleNotification({ type: "danger", message: "Failed to export blocks" });
+    }
+  };
+  const handleImport = () => {
+    if (!canExportImport()) {
+      toggleNotification({
+        type: "warning",
+        message: "Import requires Advanced or Enterprise tier."
+      });
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      try {
+        const text = await file.text();
+        const data = JSON.parse(text);
+        const overwrite = window.confirm("Overwrite existing blocks with same name?");
+        await post(`/${PLUGIN_ID}/custom-blocks/import?overwrite=${overwrite}`, data);
+        toggleNotification({ type: "success", message: "Blocks imported successfully" });
+        fetchBlocks();
+        fetchLimits();
+      } catch (error) {
+        console.error("[CustomBlocksPage] Error importing blocks:", error);
+        if (error.response?.data?.error?.details?.code === "FEATURE_NOT_AVAILABLE") {
+          toggleNotification({
+            type: "warning",
+            message: "Import requires Advanced or Enterprise tier."
+          });
+          return;
+        }
+        toggleNotification({ type: "danger", message: "Failed to import blocks" });
+      }
+    };
+    input.click();
+  };
+  const updateFormField = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+  const addField = () => {
+    const newField = {
+      name: `field_${formData.fields.length + 1}`,
+      label: `Field ${formData.fields.length + 1}`,
+      type: "text",
+      default: "",
+      required: false
+    };
+    updateFormField("fields", [...formData.fields, newField]);
+  };
+  const updateField = (index, key, value) => {
+    const newFields = [...formData.fields];
+    newFields[index] = { ...newFields[index], [key]: value };
+    updateFormField("fields", newFields);
+  };
+  const removeField = (index) => {
+    updateFormField(
+      "fields",
+      formData.fields.filter((_, i) => i !== index)
+    );
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(LoadingWrapper, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(LoadingText, { children: "Loading custom blocks..." })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HeaderLeft, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(PageTitle, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.Squares2X2Icon, {}),
+          "Custom Blocks"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PageSubtitle, { children: "Create and manage custom editor blocks to extend Magic Editor X with your own content types." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(HeaderRight, { children: [
+        canExportImport() && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { $variant: "secondary", onClick: handleExport, disabled: blocks.length === 0, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowDownTrayIcon, {}),
+            "Export"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { $variant: "secondary", onClick: handleImport, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, {}),
+            "Import"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            $variant: "primary",
+            onClick: handleCreate,
+            disabled: !canCreateMoreBlocks(),
+            title: !canCreateMoreBlocks() ? "Block limit reached. Upgrade to create more." : "",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, {}),
+              "Create Block"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    limits && limits.limits.maxTotal !== -1 && /* @__PURE__ */ jsxRuntime.jsxs(LimitsBanner, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(LimitsInfo, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LimitsText, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Custom Blocks Usage" }),
+          " - ",
+          limits.usage.total,
+          " of ",
+          limits.limits.maxTotal,
+          " blocks used",
+          limits.tier === "free" && limits.limits.maxEmbedded === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 8, opacity: 0.8 }, children: "(Simple blocks only)" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(LimitsProgress, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressFill, { $percentage: getUsagePercentage() }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ProgressLabel, { children: [
+            getUsagePercentage(),
+            "%"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TierBadge, { $tier: limits.tier, children: limits.tier }),
+      getUsagePercentage() >= 80 && /* @__PURE__ */ jsxRuntime.jsxs(UpgradeButton, { onClick: () => window.location.href = "/admin/settings/magic-editor-x/license", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}),
+        "Upgrade"
+      ] })
+    ] }),
+    blocks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(EmptyState, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EmptyIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(outline.CubeIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EmptyTitle, { children: "No Custom Blocks Yet" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(EmptyText, { children: [
+        "Custom blocks allow you to extend the editor with your own content types, templates",
+        limits?.tier !== "free" && ", and embedded Strapi entries",
+        "."
+      ] }),
+      limits && limits.tier === "free" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 16, padding: "12px 16px", background: "#fef3c7", borderRadius: 8, fontSize: "0.85rem", color: "#92400e" }, children: [
+        "Free tier: Up to ",
+        limits.limits.maxTotal,
+        " simple blocks. Upgrade for embedded entries."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { $variant: "primary", onClick: handleCreate, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, {}),
+        "Create Your First Block"
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(BlocksGrid, { children: blocks.map((block, index) => /* @__PURE__ */ jsxRuntime.jsxs(BlockCard, { $index: index, $enabled: block.enabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(BlockIconWrapper, { $type: block.blockType, children: block.blockType === "embedded-entry" ? /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(solid.CubeIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(BlockInfo, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BlockName, { children: block.label || block.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(BlockSlug, { children: block.name })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CardBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(BlockDescription, { children: block.description || "No description provided." }),
+        /* @__PURE__ */ jsxRuntime.jsxs(MetaRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MetaTag, { $type: "type", $value: block.blockType, children: block.blockType === "embedded-entry" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, {}),
+            "Embedded Entry"
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, {}),
+            "Simple Block"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(MetaTag, { $type: "status", $enabled: block.enabled, children: block.enabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, {}),
+            "Enabled"
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, {}),
+            "Disabled"
+          ] }) }),
+          block.shortcut && /* @__PURE__ */ jsxRuntime.jsxs(MetaTag, { $type: "shortcut", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.CommandLineIcon, {}),
+            block.shortcut
+          ] }),
+          block.contentType && /* @__PURE__ */ jsxRuntime.jsx(MetaTag, { $type: "content-type", children: block.contentType.split("::")[1]?.split(".")[0] || block.contentType })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CardFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToggleSwitch,
+          {
+            $enabled: block.enabled,
+            onClick: () => handleToggle(block),
+            title: block.enabled ? "Disable block" : "Enable block"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ActionGroup, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: () => handleEdit(block), title: "Edit block", children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilSquareIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: () => handleDuplicate(block), title: "Duplicate block", children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentDuplicateIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton, { $danger: true, onClick: () => handleDelete(block), title: "Delete block", children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {}) })
+        ] })
+      ] })
+    ] }, block.documentId)) }),
+    isModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { onClick: () => setIsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalTitle, { children: [
+          editingBlock ? /* @__PURE__ */ jsxRuntime.jsx(outline.PencilSquareIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(solid.SparklesIcon, {}),
+          editingBlock ? "Edit Block" : "Create Custom Block"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: () => setIsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ModalBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.CubeIcon, {}),
+            "Basic Information"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGrid, { $columns: "1fr 1fr", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+                "Block Name ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  value: formData.name,
+                  onChange: (e) => updateFormField("name", e.target.value),
+                  placeholder: "myCustomBlock",
+                  disabled: !!editingBlock
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Hint, { children: "Unique identifier (letters, numbers, underscores)" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+                "Display Label ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  value: formData.label,
+                  onChange: (e) => updateFormField("label", e.target.value),
+                  placeholder: "My Custom Block"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Hint, { children: "Shown in the editor toolbox" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+              "Block Type ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "*" }),
+              !canCreateEmbeddedEntry() && formData.blockType !== "embedded-entry" && /* @__PURE__ */ jsxRuntime.jsxs(FeatureLockedBadge, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, {}),
+                "Premium+"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Select,
+              {
+                value: formData.blockType,
+                onChange: (e) => {
+                  if (e.target.value === "embedded-entry" && !canCreateEmbeddedEntry()) {
+                    toggleNotification({
+                      type: "warning",
+                      message: "Embedded Entry blocks require Premium or higher tier."
+                    });
+                    return;
+                  }
+                  updateFormField("blockType", e.target.value);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "simple", children: "Simple Block (Text/HTML)" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("option", { value: "embedded-entry", disabled: !canCreateEmbeddedEntry() && !editingBlock, children: [
+                    "Embedded Entry (Strapi Content) ",
+                    !canCreateEmbeddedEntry() ? "(Premium+)" : ""
+                  ] })
+                ]
+              }
+            ),
+            !canCreateEmbeddedEntry() && /* @__PURE__ */ jsxRuntime.jsx(Hint, { style: { color: "#f59e0b" }, children: "Embedded Entry blocks require Premium or higher tier." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Description" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TextArea,
+              {
+                value: formData.description,
+                onChange: (e) => updateFormField("description", e.target.value),
+                placeholder: "Describe what this block does...",
+                $rows: 2
+              }
+            )
+          ] })
+        ] }),
+        formData.blockType === "embedded-entry" && /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, {}),
+            "Embedded Entry Settings"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Content Type" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Select,
+              {
+                value: formData.contentType,
+                onChange: (e) => updateFormField("contentType", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Any Content Type" }),
+                  contentTypes.map((ct) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: ct.uid, children: [
+                    ct.displayName,
+                    " (",
+                    ct.uid,
+                    ")"
+                  ] }, ct.uid))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Hint, { children: "Leave empty to allow any content type" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGrid, { $columns: "1fr 1fr", style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Title Field" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  value: formData.titleField,
+                  onChange: (e) => updateFormField("titleField", e.target.value),
+                  placeholder: "title"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Display Fields" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  value: formData.displayFields.join(", "),
+                  onChange: (e) => updateFormField(
+                    "displayFields",
+                    e.target.value.split(",").map((s) => s.trim())
+                  ),
+                  placeholder: "title, name, id"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        formData.blockType === "simple" && /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, {}),
+            "Simple Block Settings"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Placeholder Text" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                value: formData.placeholder,
+                onChange: (e) => updateFormField("placeholder", e.target.value),
+                placeholder: "Enter content..."
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "HTML Template (Optional)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TextArea,
+              {
+                value: formData.template,
+                onChange: (e) => updateFormField("template", e.target.value),
+                placeholder: '<div class="my-block">{{content}}</div>',
+                $rows: 4,
+                $mono: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Hint, { children: [
+              "Use ",
+              "{{fieldName}}",
+              " for placeholders"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Custom Fields" }),
+            formData.fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FieldsContainer, { children: formData.fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsxs(FieldRow, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FieldInput,
+                {
+                  value: field.name,
+                  onChange: (e) => updateField(index, "name", e.target.value),
+                  placeholder: "Field name"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FieldInput,
+                {
+                  value: field.label,
+                  onChange: (e) => updateField(index, "label", e.target.value),
+                  placeholder: "Label"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                FieldSelect,
+                {
+                  value: field.type,
+                  onChange: (e) => updateField(index, "type", e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "text", children: "Text" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "textarea", children: "Textarea" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "select", children: "Select" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "color", children: "Color" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "checkbox", children: "Checkbox" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(IconButton, { $danger: true, onClick: () => removeField(index), children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {}) })
+            ] }, index)) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(AddFieldButton, { onClick: addField, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, {}),
+              "Add Field"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}),
+            "Advanced Options"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Icon (SVG)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TextArea,
+              {
+                value: formData.icon,
+                onChange: (e) => updateFormField("icon", e.target.value),
+                placeholder: '<svg viewBox="0 0 24 24">...</svg>',
+                $rows: 2,
+                $mono: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Hint, { children: "Custom SVG icon for the toolbox" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Keyboard Shortcut" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                value: formData.shortcut,
+                onChange: (e) => updateFormField("shortcut", e.target.value),
+                placeholder: "CMD+SHIFT+X"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormGrid, { $columns: "1fr 1fr", style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CheckboxRow, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  checked: formData.inlineToolbar,
+                  onChange: (e) => updateFormField("inlineToolbar", e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(CheckboxLabel, { children: "Enable Inline Toolbar" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CheckboxRow, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  checked: formData.enabled,
+                  onChange: (e) => updateFormField("enabled", e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(CheckboxLabel, { children: "Block Enabled" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { $variant: "secondary", onClick: () => setIsModalOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { $variant: "primary", onClick: handleSave, children: editingBlock ? "Save Changes" : "Create Block" })
+      ] })
+    ] }) })
+  ] }) });
+};
+exports.default = CustomBlocksPage;