@savvycal/mjml-editor 0.3.0 → 0.5.0

package/README.md

@@ -89,9 +89,11 @@ function App() {
 |------|------|-------------|
 | `value` | `string` | MJML markup string (required) |
 | `onChange` | `(mjml: string) => void` | Called when the document changes (required) |
+| `onSourceApply` | `(mjml: string) => void` | Called when Source tab **Apply** succeeds with valid MJML (optional) |
 | `className` | `string` | Optional CSS class for the container |
 | `defaultTheme` | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`) |
 | `liquidSchema` | `LiquidSchema` | Optional schema for Liquid template autocomplete |
+| `extensions` | `EditorExtensions` | Optional extensions for custom features beyond standard MJML |
 | `applyThemeToDocument` | `boolean` | Whether to apply theme class to `document.documentElement`. Needed for dropdown/popover theming. Set to `false` if your app manages document-level theme classes. (default: `true`) |
 
 ## Liquid Template Support
@@ -129,6 +131,65 @@ function App() {
 
 When editing text content, typing `{{` will trigger variable autocomplete and `{%` will trigger tag autocomplete.
 
+## Extensions
+
+Extensions provide opt-in features beyond standard MJML. All extensions are disabled by default to maintain compatibility with stock MJML.
+
+```tsx
+import { MjmlEditor, type EditorExtensions } from '@savvycal/mjml-editor';
+
+function App() {
+  const [mjml, setMjml] = useState(initialMjml);
+
+  return (
+    <MjmlEditor
+      value={mjml}
+      onChange={setMjml}
+      extensions={{
+        conditionalBlocks: true,
+      }}
+    />
+  );
+}
+```
+
+### Available Extensions
+
+#### `conditionalBlocks`
+
+Enables the `sc-if` attribute for server-side conditional rendering using Liquid expressions.
+
+When enabled:
+- A "Condition (Liquid)" field appears in the Advanced section of the inspector for all block types
+- Blocks with conditions display an "if" badge indicator in both the canvas and outline tree
+- The Advanced section auto-expands when a block has a condition
+
+**How it works:**
+- The `sc-if` attribute is preserved in the MJML output for server-side processing
+- The attribute is stripped from preview rendering to avoid MJML validation warnings
+- Your server processes the Liquid condition and conditionally renders the block
+
+**Example MJML output:**
+
+```xml
+<mj-section sc-if="event.is_recurring">
+  <mj-column>
+    <mj-text>This section only appears for recurring events.</mj-text>
+  </mj-column>
+</mj-section>
+```
+
+**Server-side processing example (Ruby/Liquid):**
+
+```ruby
+# Before sending, wrap sc-if blocks with Liquid conditionals
+mjml = mjml.gsub(/<(mj-\w+)([^>]*)\ssc-if="([^"]+)"([^>]*)>/) do
+  tag, before, condition, after = $1, $2, $3, $4
+  "{% if #{condition} %}<#{tag}#{before}#{after}>"
+end
+# Don't forget to add closing {% endif %} tags as well
+```
+
 ## Exported Types
 
 The library exports TypeScript types for integration:
@@ -138,11 +199,20 @@ import type {
   MjmlNode,          // MJML document node structure
   MjmlTagName,       // Union of supported MJML tag names
   ContentBlockType,  // Union of content block types
+  EditorExtensions,  // Extensions configuration
   LiquidSchema,      // Schema for Liquid autocomplete
   LiquidSchemaItem,  // Individual variable/tag definition
 } from '@savvycal/mjml-editor';
 ```
 
+### EditorExtensions
+
+```typescript
+interface EditorExtensions {
+  conditionalBlocks?: boolean; // Enable sc-if attribute for conditional rendering
+}
+```
+
 ### LiquidSchema
 
 ```typescript

package/dist/components/editor/BlockInspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockInspector.d.ts","sourceRoot":"","sources":["../../../src/components/editor/BlockInspector.tsx"],"names":[],"mappings":"AA8HA,UAAU,mBAAmB;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CAuHpE"}
+{"version":3,"file":"BlockInspector.d.ts","sourceRoot":"","sources":["../../../src/components/editor/BlockInspector.tsx"],"names":[],"mappings":"AA+HA,UAAU,mBAAmB;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CAiIpE"}

package/dist/components/editor/BlockInspector.js

@@ -1,18 +1,19 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as F } from "react";
-import { PanelRightClose as v, X as O, ChevronRight as _ } from "lucide-react";
-import { useEditor as N } from "../../context/EditorContext.js";
-import { ScrollArea as G } from "../ui/scroll-area.js";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as O, useEffect as _ } from "react";
+import { PanelRightClose as y, X as E, ChevronRight as G } from "lucide-react";
+import { useEditor as v } from "../../context/EditorContext.js";
+import { useExtensions as I } from "../../context/ExtensionsContext.js";
+import { ScrollArea as R } from "../ui/scroll-area.js";
 import { Button as C } from "../ui/button.js";
 import { Label as x } from "../ui/label.js";
-import { Input as b } from "../ui/input.js";
-import { Badge as I } from "../ui/badge.js";
-import { Collapsible as R, CollapsibleTrigger as L, CollapsibleContent as V } from "../ui/collapsible.js";
-import { Select as y, SelectTrigger as j, SelectValue as w, SelectContent as S, SelectItem as A } from "../ui/select.js";
-import { getSchemaForTag as z } from "../../lib/mjml/schema.js";
-import { parseClassNames as E, removeClassFromNode as B, addClassToNode as K } from "../../lib/mjml/attributes.js";
-import { cn as U } from "../../lib/utils.js";
-const P = {
+import { Input as f } from "../ui/input.js";
+import { Badge as L } from "../ui/badge.js";
+import { Collapsible as V, CollapsibleTrigger as z, CollapsibleContent as B } from "../ui/collapsible.js";
+import { Select as j, SelectTrigger as S, SelectValue as w, SelectContent as A, SelectItem as F } from "../ui/select.js";
+import { filterSchemaByExtensions as K, getSchemaForTag as U } from "../../lib/mjml/schema.js";
+import { parseClassNames as P, removeClassFromNode as T, addClassToNode as $ } from "../../lib/mjml/attributes.js";
+import { cn as D } from "../../lib/utils.js";
+const X = {
   primary: "Primary",
   background: "Background",
   typography: "Typography",
@@ -22,7 +23,7 @@ const P = {
   spacing: "Spacing",
   link: "Link",
   advanced: "Advanced"
-}, T = [
+}, k = [
   "primary",
   "background",
   "typography",
@@ -33,342 +34,351 @@ const P = {
   "link",
   "advanced"
 ];
-function $({ node: n }) {
-  const { definedClasses: r, updateAttributes: i } = N(), d = E(n.attributes["mj-class"]);
-  if (r.length === 0)
+function q({ node: i }) {
+  const { definedClasses: t, updateAttributes: c } = v(), d = P(i.attributes["mj-class"]);
+  if (t.length === 0)
     return null;
-  const u = r.filter(
-    (t) => !d.includes(t)
-  ), l = (t) => {
-    if (!n._id || !t) return;
-    const o = K(n, t);
-    i(n._id, { "mj-class": o["mj-class"] || "" });
-  }, c = (t) => {
-    if (!n._id) return;
-    const o = B(n, t);
-    i(n._id, {
-      "mj-class": o["mj-class"] || ""
+  const u = t.filter(
+    (r) => !d.includes(r)
+  ), a = (r) => {
+    if (!i._id || !r) return;
+    const l = $(i, r);
+    c(i._id, { "mj-class": l["mj-class"] || "" });
+  }, m = (r) => {
+    if (!i._id) return;
+    const l = T(i, r);
+    c(i._id, {
+      "mj-class": l["mj-class"] || ""
     });
   };
-  return /* @__PURE__ */ a("div", { className: "space-y-2 pb-4 mb-4 border-b border-border", children: [
+  return /* @__PURE__ */ n("div", { className: "space-y-2 pb-4 mb-4 border-b border-border", children: [
     /* @__PURE__ */ e(x, { className: "text-xs font-medium text-foreground-muted", children: "Classes" }),
-    d.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: d.map((t) => /* @__PURE__ */ a(
-      I,
+    d.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: d.map((r) => /* @__PURE__ */ n(
+      L,
       {
         variant: "secondary",
         className: "text-xs gap-1 pr-1",
         children: [
-          t,
+          r,
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: () => c(t),
+              onClick: () => m(r),
               className: "ml-1 hover:text-destructive transition-colors",
-              children: /* @__PURE__ */ e(O, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ e(E, { className: "h-3 w-3" })
             }
           )
         ]
       },
-      t
+      r
     )) }),
-    u.length > 0 && /* @__PURE__ */ a(y, { onValueChange: l, value: "", children: [
-      /* @__PURE__ */ e(j, { className: "h-8 text-xs border-border-subtle", children: /* @__PURE__ */ e(w, { placeholder: "Add class..." }) }),
-      /* @__PURE__ */ e(S, { children: u.map((t) => /* @__PURE__ */ e(A, { value: t, className: "text-xs", children: t }, t)) })
+    u.length > 0 && /* @__PURE__ */ n(j, { onValueChange: a, value: "", children: [
+      /* @__PURE__ */ e(S, { className: "h-8 text-xs border-border-subtle", children: /* @__PURE__ */ e(w, { placeholder: "Add class..." }) }),
+      /* @__PURE__ */ e(A, { children: u.map((r) => /* @__PURE__ */ e(F, { value: r, className: "text-xs", children: r }, r)) })
     ] })
   ] });
 }
-function le({ onTogglePanel: n }) {
-  const { selectedBlock: r, updateAttributes: i, getInheritedValue: d, definedClasses: u } = N();
-  if (!r)
-    return /* @__PURE__ */ a("div", { className: "flex flex-col h-full", children: [
-      /* @__PURE__ */ e("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-inspector-header", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-        n && /* @__PURE__ */ e(
+function de({ onTogglePanel: i }) {
+  const { selectedBlock: t, updateAttributes: c, getInheritedValue: d, definedClasses: u } = v(), a = I();
+  if (!t)
+    return /* @__PURE__ */ n("div", { className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ e("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-inspector-header", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+        i && /* @__PURE__ */ e(
           C,
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: n,
+            onClick: i,
             className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent",
             title: "Collapse panel",
-            children: /* @__PURE__ */ e(v, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(y, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-foreground", children: "Inspector" })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ a("p", { className: "text-sm text-foreground-muted text-center leading-relaxed", children: [
+      /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ n("p", { className: "text-sm text-foreground-muted text-center leading-relaxed", children: [
         "Select a block to",
         /* @__PURE__ */ e("br", {}),
         "edit its properties"
       ] }) })
     ] });
-  const l = z(r.tagName), c = r.tagName.replace("mj-", "").charAt(0).toUpperCase() + r.tagName.replace("mj-", "").slice(1), t = (s, p) => {
-    r._id && i(r._id, { [s]: p });
-  }, o = l ? Object.entries(l).reduce(
+  const m = K(
+    U(t.tagName),
+    a
+  ), r = t.tagName.replace("mj-", "").charAt(0).toUpperCase() + t.tagName.replace("mj-", "").slice(1), l = (s, p) => {
+    t._id && c(t._id, { [s]: p });
+  }, o = m ? Object.entries(m).reduce(
     (s, [p, h]) => {
-      const f = h.group || "primary";
-      return s[f] || (s[f] = []), s[f].push({ key: p, schema: h }), s;
+      const g = h.group || "primary";
+      return s[g] || (s[g] = []), s[g].push({ key: p, schema: h }), s;
     },
     {}
-  ) : {}, m = Object.keys(o).some(
+  ) : {}, b = Object.keys(o).some(
     (s) => s !== "primary"
   );
-  return /* @__PURE__ */ a("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ e("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-inspector-header", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-      n && /* @__PURE__ */ e(
+  return /* @__PURE__ */ n("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ e("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-inspector-header", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      i && /* @__PURE__ */ e(
         C,
         {
           variant: "ghost",
           size: "icon-sm",
-          onClick: n,
+          onClick: i,
           className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent",
           title: "Collapse panel",
-          children: /* @__PURE__ */ e(v, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ e(y, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-foreground", children: c })
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-foreground", children: r })
     ] }) }),
-    /* @__PURE__ */ e(G, { className: "flex-1 min-h-0", children: /* @__PURE__ */ a("div", { className: "p-4", children: [
-      u.length > 0 && /* @__PURE__ */ e($, { node: r }),
-      l ? m ? /* @__PURE__ */ e(
-        D,
+    /* @__PURE__ */ e(R, { className: "flex-1 min-h-0", children: /* @__PURE__ */ n("div", { className: "p-4", children: [
+      u.length > 0 && /* @__PURE__ */ e(q, { node: t }),
+      m ? b ? /* @__PURE__ */ e(
+        H,
         {
           groupedAttributes: o,
-          selectedBlock: r,
-          handleAttributeChange: t
+          selectedBlock: t,
+          handleAttributeChange: l,
+          defaultOpenGroups: a.conditionalBlocks && t.attributes["sc-if"] ? { advanced: !0 } : {}
         }
-      ) : /* @__PURE__ */ e("div", { className: "space-y-5", children: Object.entries(l).map(([s, p]) => /* @__PURE__ */ e(
-        g,
+      ) : /* @__PURE__ */ e("div", { className: "space-y-5", children: Object.entries(m).map(([s, p]) => /* @__PURE__ */ e(
+        N,
         {
           attributeKey: s,
           schema: p,
-          value: r.attributes[s] || "",
-          onChange: (h) => t(s, h),
-          inheritedValue: d(r, s)
+          value: t.attributes[s] || "",
+          onChange: (h) => l(s, h),
+          inheritedValue: d(t, s)
         },
         s
       )) }) : /* @__PURE__ */ e("p", { className: "text-sm text-foreground-muted py-4 text-center", children: "No editable properties for this block type." })
     ] }) })
   ] });
 }
-function D({
-  groupedAttributes: n,
-  selectedBlock: r,
-  handleAttributeChange: i
+function H({
+  groupedAttributes: i,
+  selectedBlock: t,
+  handleAttributeChange: c,
+  defaultOpenGroups: d = {}
 }) {
-  const [d, u] = F({}), { getInheritedValue: l } = N(), c = (t) => {
-    u((o) => ({ ...o, [t]: !o[t] }));
+  const [u, a] = O(d), { getInheritedValue: m } = v();
+  _(() => {
+    a(d);
+  }, [t._id]);
+  const r = (l) => {
+    a((o) => ({ ...o, [l]: !o[l] }));
   };
-  return /* @__PURE__ */ e("div", { className: "space-y-4", children: T.map((t) => {
-    const o = n[t];
+  return /* @__PURE__ */ e("div", { className: "space-y-4", children: k.map((l) => {
+    const o = i[l];
     if (!o || o.length === 0) return null;
-    if (t === "primary")
+    if (l === "primary")
       return /* @__PURE__ */ e("div", { className: "space-y-5", children: o.map(({ key: s, schema: p }) => /* @__PURE__ */ e(
-        g,
+        N,
         {
           attributeKey: s,
           schema: p,
-          value: r.attributes[s] || "",
-          onChange: (h) => i(s, h),
-          inheritedValue: l(r, s)
+          value: t.attributes[s] || "",
+          onChange: (h) => c(s, h),
+          inheritedValue: m(t, s)
         },
         s
-      )) }, t);
-    const m = d[t] || !1;
-    return /* @__PURE__ */ a(
-      R,
+      )) }, l);
+    const b = u[l] || !1;
+    return /* @__PURE__ */ n(
+      V,
       {
-        open: m,
-        onOpenChange: () => c(t),
+        open: b,
+        onOpenChange: () => r(l),
         children: [
-          /* @__PURE__ */ a(L, { className: "flex items-center gap-1 w-full py-2 text-xs font-medium text-foreground-muted hover:text-foreground transition-colors", children: [
+          /* @__PURE__ */ n(z, { className: "flex items-center gap-1 w-full py-2 text-xs font-medium text-foreground-muted hover:text-foreground transition-colors", children: [
             /* @__PURE__ */ e(
-              _,
+              G,
               {
-                className: U(
+                className: D(
                   "h-3.5 w-3.5 transition-transform",
-                  m && "rotate-90"
+                  b && "rotate-90"
                 )
               }
             ),
-            P[t]
+            X[l]
           ] }),
-          /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e("div", { className: "space-y-5 pt-2 pb-1", children: o.map(({ key: s, schema: p }) => /* @__PURE__ */ e(
-            g,
+          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e("div", { className: "space-y-5 pt-2 pb-1", children: o.map(({ key: s, schema: p }) => /* @__PURE__ */ e(
+            N,
             {
               attributeKey: s,
               schema: p,
-              value: r.attributes[s] || "",
-              onChange: (h) => i(s, h),
-              inheritedValue: l(r, s)
+              value: t.attributes[s] || "",
+              onChange: (h) => c(s, h),
+              inheritedValue: m(t, s)
             },
             s
           )) }) })
         ]
       },
-      t
+      l
     );
   }) });
 }
-function g({
-  attributeKey: n,
-  schema: r,
-  value: i,
+function N({
+  attributeKey: i,
+  schema: t,
+  value: c,
   onChange: d,
   inheritedValue: u
 }) {
-  const l = `attr-${n}`, c = u || r.placeholder || r.default || "";
-  switch (r.type) {
+  const a = `attr-${i}`, m = u || t.placeholder || t.default || "";
+  switch (t.type) {
     case "select": {
-      const t = i || u || r.default || r.options?.[0]?.value || "default", o = (m) => {
-        d(m === "false" ? "" : m);
+      const r = c || u || t.default || t.options?.[0]?.value || "default", l = (o) => {
+        d(o === "false" ? "" : o);
       };
-      return /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ n("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e(
           x,
           {
-            htmlFor: l,
+            htmlFor: a,
             className: "text-xs font-medium text-foreground-muted",
-            children: r.label
+            children: t.label
           }
         ),
-        /* @__PURE__ */ a(y, { value: t, onValueChange: o, children: [
-          /* @__PURE__ */ e(j, { id: l, className: "h-8 text-xs border-border-subtle", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ n(j, { value: r, onValueChange: l, children: [
+          /* @__PURE__ */ e(S, { id: a, className: "h-8 text-xs border-border-subtle", children: /* @__PURE__ */ e(
             w,
             {
-              placeholder: `Select ${r.label.toLowerCase()}`
+              placeholder: `Select ${t.label.toLowerCase()}`
             }
           ) }),
-          /* @__PURE__ */ e(S, { children: r.options?.map((m) => /* @__PURE__ */ e(
-            A,
+          /* @__PURE__ */ e(A, { children: t.options?.map((o) => /* @__PURE__ */ e(
+            F,
             {
-              value: m.value,
+              value: o.value,
               className: "text-xs",
-              children: m.label
+              children: o.label
             },
-            m.value
+            o.value
           )) })
         ] })
       ] });
     }
     case "color":
-      return /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ n("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e(
           x,
           {
-            htmlFor: l,
+            htmlFor: a,
             className: "text-xs font-medium text-foreground-muted",
-            children: r.label
+            children: t.label
           }
         ),
-        /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ n("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ e(
-            b,
+            f,
             {
-              id: l,
+              id: a,
               type: "color",
-              value: i || u || r.default || "#000000",
-              onChange: (t) => d(t.target.value),
+              value: c || u || t.default || "#000000",
+              onChange: (r) => d(r.target.value),
               className: "h-8 w-10 p-0.5 cursor-pointer rounded-md border-border-subtle"
             }
           ),
           /* @__PURE__ */ e(
-            b,
+            f,
             {
               type: "text",
-              value: i || "",
-              onChange: (t) => d(t.target.value),
-              placeholder: c || "#000000",
+              value: c || "",
+              onChange: (r) => d(r.target.value),
+              placeholder: m || "#000000",
               className: "h-8 text-xs flex-1 font-mono border-border-subtle"
             }
           )
         ] })
       ] });
     case "padding":
-      return /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ n("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e(
           x,
           {
-            htmlFor: l,
+            htmlFor: a,
             className: "text-xs font-medium text-foreground-muted",
-            children: r.label
+            children: t.label
           }
         ),
         /* @__PURE__ */ e(
-          b,
+          f,
           {
-            id: l,
+            id: a,
             type: "text",
-            value: i || "",
-            onChange: (t) => d(t.target.value),
-            placeholder: c || "10px 25px",
+            value: c || "",
+            onChange: (r) => d(r.target.value),
+            placeholder: m || "10px 25px",
             className: "h-8 text-xs border-border-subtle"
           }
         ),
         /* @__PURE__ */ e("p", { className: "text-[10px] text-foreground-subtle", children: "Format: top right bottom left (e.g., 10px 20px)" })
       ] });
     case "dimension":
-      return /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ n("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e(
           x,
           {
-            htmlFor: l,
+            htmlFor: a,
             className: "text-xs font-medium text-foreground-muted",
-            children: r.label
+            children: t.label
           }
         ),
         /* @__PURE__ */ e(
-          b,
+          f,
           {
-            id: l,
+            id: a,
             type: "text",
-            value: i || "",
-            onChange: (t) => d(t.target.value),
-            placeholder: c,
+            value: c || "",
+            onChange: (r) => d(r.target.value),
+            placeholder: m,
             className: "h-8 text-xs border-border-subtle"
           }
         )
       ] });
     case "url":
-      return /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ n("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e(
           x,
           {
-            htmlFor: l,
+            htmlFor: a,
             className: "text-xs font-medium text-foreground-muted",
-            children: r.label
+            children: t.label
           }
         ),
         /* @__PURE__ */ e(
-          b,
+          f,
           {
-            id: l,
+            id: a,
             type: "url",
-            value: i || "",
-            onChange: (t) => d(t.target.value),
-            placeholder: c || "https://...",
+            value: c || "",
+            onChange: (r) => d(r.target.value),
+            placeholder: m || "https://...",
             className: "h-8 text-xs border-border-subtle"
           }
         )
       ] });
     default:
-      return /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ n("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e(
           x,
           {
-            htmlFor: l,
+            htmlFor: a,
             className: "text-xs font-medium text-foreground-muted",
-            children: r.label
+            children: t.label
           }
         ),
         /* @__PURE__ */ e(
-          b,
+          f,
           {
-            id: l,
+            id: a,
             type: "text",
-            value: i || "",
-            onChange: (t) => d(t.target.value),
-            placeholder: c,
+            value: c || "",
+            onChange: (r) => d(r.target.value),
+            placeholder: m,
             className: "h-8 text-xs border-border-subtle"
           }
         )
@@ -376,5 +386,5 @@ function g({
   }
 }
 export {
-  le as BlockInspector
+  de as BlockInspector
 };