@tightknitai/block-kitchen 0.8.9 → 0.8.10

package/dist/index.cjs

@@ -3425,12 +3425,16 @@ function AlertEditor({ block, onChange }) {
     ) })
   ] });
 }
-function CardEditor({ block, onChange }) {
+function CardEditor({
+  block,
+  onChange,
+  idPrefix = "card"
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Up to 150 characters. Supports mrkdwn formatting.", htmlFor: "card-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Up to 150 characters. Supports mrkdwn formatting.", htmlFor: `${idPrefix}-title`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
-        id: "card-title",
+        id: `${idPrefix}-title`,
         value: block.title?.text ?? "",
         maxLength: 150,
         placeholder: "e.g. New launch update",
@@ -3440,10 +3444,10 @@ function CardEditor({ block, onChange }) {
         })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Subtitle", help: "Up to 150 characters.", htmlFor: "card-subtitle", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Subtitle", help: "Up to 150 characters.", htmlFor: `${idPrefix}-subtitle`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
-        id: "card-subtitle",
+        id: `${idPrefix}-subtitle`,
         value: block.subtitle?.text ?? "",
         maxLength: 150,
         placeholder: "e.g. Released April 28",
@@ -3453,10 +3457,10 @@ function CardEditor({ block, onChange }) {
         })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Body", help: "Up to 200 characters. Supports mrkdwn formatting.", htmlFor: "card-body", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Body", help: "Up to 200 characters. Supports mrkdwn formatting.", htmlFor: `${idPrefix}-body`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Textarea,
       {
-        id: "card-body",
+        id: `${idPrefix}-body`,
         value: block.body?.text ?? "",
         maxLength: 200,
         rows: 3,
@@ -3472,7 +3476,7 @@ function CardEditor({ block, onChange }) {
       {
         label: "Hero image",
         help: "Wide image displayed at the top of the card.",
-        idPrefix: "card-hero",
+        idPrefix: `${idPrefix}-hero`,
         image: block.hero_image,
         onChange: (next) => onChange({ ...block, hero_image: next })
       }
@@ -3482,7 +3486,7 @@ function CardEditor({ block, onChange }) {
       {
         label: "Icon",
         help: "Small image shown next to the title.",
-        idPrefix: "card-icon",
+        idPrefix: `${idPrefix}-icon`,
         image: block.icon,
         onChange: (next) => onChange({ ...block, icon: next })
       }
@@ -3490,6 +3494,7 @@ function CardEditor({ block, onChange }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       ButtonsField,
       {
+        idPrefix,
         buttons: block.actions ?? [],
         onChange: (next) => onChange({ ...block, actions: next.length > 0 ? next : void 0 })
       }
@@ -3546,7 +3551,11 @@ function ImageFields({
     ) })
   ] });
 }
-function ButtonsField({ buttons, onChange }) {
+function ButtonsField({
+  buttons,
+  onChange,
+  idPrefix = "card"
+}) {
   const update = (idx, change) => {
     onChange(buttons.map((b, i) => i === idx ? { ...b, ...change } : b));
   };
@@ -3589,10 +3598,10 @@ function ButtonsField({ buttons, onChange }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: `card-btn-label-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: `${idPrefix}-btn-label-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
-            id: `card-btn-label-${idx}`,
+            id: `${idPrefix}-btn-label-${idx}`,
             value: label,
             placeholder: "e.g. Open",
             onChange: (e) => update(idx, {
@@ -3609,11 +3618,11 @@ function ButtonsField({ buttons, onChange }) {
           {
             label: "Link URL",
             help: "Optional. If set, the button opens this link.",
-            htmlFor: `card-btn-url-${idx}`,
+            htmlFor: `${idPrefix}-btn-url-${idx}`,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
-                id: `card-btn-url-${idx}`,
+                id: `${idPrefix}-btn-url-${idx}`,
                 type: "url",
                 value: url,
                 placeholder: "e.g. https://example.com",
@@ -3632,8 +3641,8 @@ function ButtonsField({ buttons, onChange }) {
             },
             className: "flex flex-row gap-3",
             children: ["default", "primary", "danger"].map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: s, id: `card-btn-style-${idx}-${s}` }),
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `card-btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: s, id: `${idPrefix}-btn-style-${idx}-${s}` }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `${idPrefix}-btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
             ] }, s))
           }
         ) })
@@ -3682,8 +3691,8 @@ function CarouselEditor({ block, onChange }) {
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Carousels hold 1-10 cards. For icon, hero image, or action edits, use the View JSON drawer." }),
-    elements.map((card, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Carousels hold 1-10 cards." }),
+    elements.map((card, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-md border bg-muted/20 p-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
           "Card ",
@@ -3701,33 +3710,7 @@ function CarouselEditor({ block, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", htmlFor: `carousel-card-title-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          id: `carousel-card-title-${idx}`,
-          value: card.title?.text ?? "",
-          maxLength: 150,
-          placeholder: "e.g. Card title",
-          onChange: (e) => updateCard(idx, {
-            ...card,
-            title: e.target.value ? { type: "mrkdwn", text: e.target.value } : void 0
-          })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Body", htmlFor: `carousel-card-body-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Textarea,
-        {
-          id: `carousel-card-body-${idx}`,
-          value: card.body?.text ?? "",
-          maxLength: 200,
-          rows: 2,
-          placeholder: "e.g. Short card description.",
-          onChange: (e) => updateCard(idx, {
-            ...card,
-            body: e.target.value ? { type: "mrkdwn", text: e.target.value } : void 0
-          })
-        }
-      ) })
+      /* @__PURE__ */ jsxRuntime.jsx(CardEditor, { block: card, idPrefix: `carousel-card-${idx}`, onChange: (next) => updateCard(idx, next) })
     ] }, idx)),
     /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addCard, disabled: elements.length >= MAX_CARDS, className: "self-start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),