@pagehub/sdk 0.1.0

package/dist/chunks/Container.presets-cHwcdPTn.js

@@ -0,0 +1,2387 @@
+import { eB as s, bV as z, cA as H, cB as G, eC as D, eD as o, eE as E, eF as R, eG as F, ek as O, eH as q, eI as r, eJ as _, eK as N, eL as W, eM as X, f as U, b9 as $, ba as V, eN as J, eO as y, eP as K, c3 as P, dz as Y, es as L, eQ as Q, bf as Z, cz as x, eR as S, eS as ee, eT as te, eU as ae, eV as se, eW as re, eX as ne, eY as ie, ez as ce } from "./index-lNS44FHV.js";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Element as e } from "@craftjs/core";
+function le() {
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Content" },
+        canDelete: !0,
+        canEditName: !0,
+        className: "gap-space-md max-w-page mx-auto flex w-full flex-col"
+      },
+      "content"
+    )
+  ];
+}
+const oe = [
+  {
+    label: "Section",
+    icon: z,
+    description: "A full-width strip of the page with built-in padding.",
+    props: {
+      type: "section",
+      className: "bg-base-100 text-base-content w-full flex flex-col items-center py-space-lg px-container-x"
+    },
+    children: le
+  },
+  {
+    label: "Row",
+    icon: H,
+    description: "Lay things side-by-side in a row.",
+    props: {
+      className: "flex flex-row flex-wrap gap-space-md items-start min-w-0 w-full"
+    }
+  },
+  {
+    label: "Column",
+    icon: G,
+    description: "Stack things on top of each other in a column.",
+    props: { className: "flex flex-col gap-space-md w-full" }
+  }
+];
+function B() {
+  return ["First point", "Second point", "Third point"].map((i, n) => /* @__PURE__ */ t(
+    e,
+    {
+      canvas: !0,
+      is: s,
+      type: "li",
+      custom: { displayName: `Item ${n + 1}` },
+      canDelete: !0,
+      canEditName: !0,
+      children: /* @__PURE__ */ t(
+        e,
+        {
+          is: o,
+          custom: { displayName: "Text" },
+          text: `<p>${i}</p>`,
+          canDelete: !0,
+          canEditName: !0
+        }
+      )
+    },
+    `item-${n}`
+  ));
+}
+function de() {
+  return B();
+}
+function me() {
+  return ["First item", "Second item", "Third item"].map((i, n) => /* @__PURE__ */ l(
+    e,
+    {
+      canvas: !0,
+      is: s,
+      type: "li",
+      custom: { displayName: `Item ${n + 1}` },
+      className: "flex flex-row items-start gap-space-xs",
+      canDelete: !0,
+      canEditName: !0,
+      children: [
+        /* @__PURE__ */ t(
+          e,
+          {
+            is: E,
+            custom: { displayName: "Marker" },
+            value: "ref-icon:tb/TbCheck",
+            className: "text-primary h-5 w-5 shrink-0",
+            canDelete: !0,
+            canEditName: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          e,
+          {
+            is: o,
+            custom: { displayName: "Text" },
+            text: `<p>${i}</p>`,
+            className: "min-w-0 flex-1",
+            canDelete: !0,
+            canEditName: !0
+          }
+        )
+      ]
+    },
+    `item-${n}`
+  ));
+}
+function m(a, i, n) {
+  return /* @__PURE__ */ t(
+    e,
+    {
+      canvas: !0,
+      is: s,
+      type: n ? "th" : "td",
+      custom: { displayName: a },
+      className: n ? "border-base-300 border-b px-space-sm py-space-xs text-left font-semibold" : "border-base-300 border-b px-space-sm py-space-xs",
+      attrs: n ? { scope: "col" } : void 0,
+      canDelete: !0,
+      canEditName: !0,
+      children: /* @__PURE__ */ t(
+        e,
+        {
+          is: o,
+          custom: { displayName: "Text" },
+          text: `<p>${i}</p>`,
+          canDelete: !0,
+          canEditName: !0
+        }
+      )
+    }
+  );
+}
+function ue() {
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        type: "thead",
+        custom: { displayName: "Head" },
+        canDelete: !0,
+        canEditName: !0,
+        children: /* @__PURE__ */ l(
+          e,
+          {
+            canvas: !0,
+            is: s,
+            type: "tr",
+            custom: { displayName: "Row" },
+            canDelete: !0,
+            canEditName: !0,
+            children: [
+              m("Header", "Column A", !0),
+              m("Header", "Column B", !0),
+              m("Header", "Column C", !0)
+            ]
+          }
+        )
+      },
+      "thead"
+    ),
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        type: "tbody",
+        custom: { displayName: "Body" },
+        canDelete: !0,
+        canEditName: !0,
+        children: [
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              type: "tr",
+              custom: { displayName: "Row 1" },
+              canDelete: !0,
+              canEditName: !0,
+              children: [
+                m("Cell", "Row 1, A", !1),
+                m("Cell", "Row 1, B", !1),
+                m("Cell", "Row 1, C", !1)
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              type: "tr",
+              custom: { displayName: "Row 2" },
+              canDelete: !0,
+              canEditName: !0,
+              children: [
+                m("Cell", "Row 2, A", !1),
+                m("Cell", "Row 2, B", !1),
+                m("Cell", "Row 2, C", !1)
+              ]
+            }
+          )
+        ]
+      },
+      "tbody"
+    )
+  ];
+}
+function pe() {
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: D,
+        custom: { displayName: "Photo" },
+        canDelete: !0,
+        canEditName: !0,
+        className: "h-full w-full object-cover"
+      },
+      "img"
+    )
+  ];
+}
+const be = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>', p = "grid w-full min-w-0 text-base-content";
+function b(a) {
+  return Array.from({ length: a }, (i, n) => /* @__PURE__ */ t(
+    e,
+    {
+      canvas: !0,
+      is: s,
+      custom: { displayName: "Cell" },
+      className: "flex flex-col gap-space-sm p-space-sm min-h-24 w-full bg-base-200 rounded-box",
+      canDelete: !0,
+      canEditName: !0
+    },
+    `cell-${n}`
+  ));
+}
+function he() {
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: o,
+        custom: { displayName: "Icon" },
+        text: `<span class="shrink-0">${be}</span>`,
+        canDelete: !0,
+        canEditName: !0
+      },
+      "icon"
+    ),
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: o,
+        custom: { displayName: "Message" },
+        text: "<span>This is an important message for your visitors.</span>",
+        canDelete: !0,
+        canEditName: !0
+      },
+      "text"
+    )
+  ];
+}
+function ye() {
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: o,
+        custom: { displayName: "Value" },
+        text: "2,400+",
+        className: "font-heading text-primary text-4xl font-bold",
+        canDelete: !0,
+        canEditName: !0
+      },
+      "value"
+    ),
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: o,
+        custom: { displayName: "Label" },
+        text: "Happy Customers",
+        className: "text-base-content/60 text-sm",
+        canDelete: !0,
+        canEditName: !0
+      },
+      "label"
+    )
+  ];
+}
+const ge = [
+  {
+    label: "Badge",
+    description: "A tiny pill for tags, status, or labels.",
+    icon: R,
+    category: "Components",
+    props: { className: "badge badge-primary font-medium self-start" },
+    children: () => [
+      /* @__PURE__ */ t(
+        e,
+        {
+          is: o,
+          custom: { displayName: "Label" },
+          text: "New",
+          canDelete: !0,
+          canEditName: !0
+        },
+        "label"
+      )
+    ]
+  },
+  {
+    label: "Avatar",
+    description: "A round photo for profile or team headshots.",
+    icon: F,
+    category: "Components",
+    props: { className: "w-16 h-16 rounded-full overflow-hidden shrink-0" },
+    children: pe
+  },
+  {
+    label: "Alert",
+    description: "A coloured banner that says 'heads up'.",
+    icon: O,
+    category: "Components",
+    props: { className: "alert alert-info flex flex-row items-center gap-space-xs w-full" },
+    children: he
+  },
+  {
+    label: "Stat",
+    description: "A big number with a label underneath.",
+    icon: q,
+    category: "Components",
+    props: { className: "flex flex-col items-center gap-space-xs text-center" },
+    children: ye
+  }
+];
+function xe() {
+  const a = `modal-${Math.random().toString(36).slice(2, 8)}`;
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: r,
+        custom: { displayName: "Open Modal" },
+        text: "Open Modal",
+        url: "",
+        action: {
+          type: "show-hide",
+          target: a,
+          direction: "show",
+          trigger: "click",
+          method: "class"
+        },
+        className: "btn btn-primary rounded-box px-space-md py-space-xs min-h-12 font-semibold"
+      },
+      "trigger"
+    ),
+    /* @__PURE__ */ t(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Modal Backdrop" },
+        canDelete: !0,
+        canEditName: !0,
+        anchor: a,
+        className: "fixed top-0 left-0 z-[1200] hidden h-screen w-screen flex-col items-center justify-center bg-black/50 px-4 py-4",
+        action: {
+          type: "show-hide",
+          target: a,
+          direction: "hide",
+          trigger: "click",
+          method: "class"
+        },
+        children: /* @__PURE__ */ l(
+          e,
+          {
+            canvas: !0,
+            is: s,
+            custom: { displayName: "Modal Content" },
+            canDelete: !0,
+            canEditName: !0,
+            className: "gap-container px-container-x py-container-y bg-base-100 rounded-box relative flex w-full max-w-lg flex-col shadow-xl",
+            handlers: { onClick: "event.stopPropagation()" },
+            children: [
+              /* @__PURE__ */ t(
+                e,
+                {
+                  is: o,
+                  custom: { displayName: "Title" },
+                  tagName: "h3",
+                  text: '<h3 class="text-xl font-bold font-heading">Modal Title</h3>',
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              ),
+              /* @__PURE__ */ t(
+                e,
+                {
+                  is: o,
+                  custom: { displayName: "Body" },
+                  text: '<p class="text-base-content/80">Your modal content goes here.</p>',
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              ),
+              /* @__PURE__ */ t(
+                e,
+                {
+                  is: r,
+                  custom: { displayName: "Close" },
+                  text: "Got it",
+                  url: "",
+                  action: {
+                    type: "show-hide",
+                    target: a,
+                    direction: "hide",
+                    trigger: "click",
+                    method: "class"
+                  },
+                  className: "btn btn-primary rounded-box px-space-md py-space-xs min-h-12 self-end font-semibold"
+                }
+              )
+            ]
+          }
+        )
+      },
+      "overlay"
+    )
+  ];
+}
+function Ne() {
+  const a = Math.random().toString(36).slice(2, 8), i = `tabs-${a}`, n = (c) => `tab-${a}-${c}`, d = (c, g) => /* @__PURE__ */ t(
+    e,
+    {
+      is: r,
+      custom: { displayName: `Tab ${c + 1}` },
+      text: g,
+      url: "",
+      action: [
+        {
+          type: "show-hide",
+          target: n(c),
+          direction: "tab",
+          trigger: "click",
+          method: "class",
+          group: i
+        },
+        {
+          type: "set-state",
+          key: i,
+          kind: "selection",
+          value: n(c),
+          trigger: "click"
+        }
+      ],
+      stateModifiers: [
+        {
+          conditions: [
+            {
+              logic: "all",
+              conditions: [{ type: "state", key: i, operator: "equals", value: n(c) }]
+            }
+          ],
+          modifiers: ["tab-active"]
+        }
+      ],
+      className: "text-base-content rounded-none border-b-2 border-transparent px-4 py-2 text-sm font-medium"
+    },
+    `tab-${c}`
+  ), u = (c, g, f) => {
+    const C = !f, w = {
+      canvas: !0,
+      is: s,
+      custom: { displayName: `Tab Panel ${c + 1}` },
+      canDelete: !0,
+      canEditName: !0,
+      id: n(c),
+      tabGroup: i,
+      className: `gap-container px-container-x py-container-y flex flex-col${f ? " hidden" : ""}`
+    };
+    return C && (w.action = [
+      {
+        type: "set-state",
+        key: i,
+        kind: "selection",
+        value: n(c),
+        trigger: "load"
+      }
+    ]), /* @__PURE__ */ t(e, { ...w, children: /* @__PURE__ */ t(
+      e,
+      {
+        is: o,
+        custom: { displayName: "Content" },
+        text: g,
+        canDelete: !0,
+        canEditName: !0
+      }
+    ) }, `panel-${c}`);
+  };
+  return [
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Tab Bar" },
+        canDelete: !0,
+        canEditName: !0,
+        className: "border-base-300 flex flex-row gap-0 border-b",
+        children: [
+          d(0, "Overview"),
+          d(1, "Features"),
+          d(2, "Pricing")
+        ]
+      },
+      "bar"
+    ),
+    u(
+      0,
+      "<p>Overview content goes here. This is the first tab panel, visible by default.</p>",
+      !1
+    ),
+    u(
+      1,
+      "<p>Features content goes here. This panel is hidden until Tab 2 is clicked.</p>",
+      !0
+    ),
+    u(
+      2,
+      "<p>Pricing content goes here. This panel is hidden until Tab 3 is clicked.</p>",
+      !0
+    )
+  ];
+}
+function k(a) {
+  const { index: i, groupName: n, question: d, answer: u, open: c } = a;
+  return /* @__PURE__ */ l(
+    e,
+    {
+      canvas: !0,
+      is: s,
+      custom: { displayName: `Accordion Item ${i + 1}` },
+      canDelete: !0,
+      canEditName: !0,
+      type: "details",
+      open: c || void 0,
+      attrs: { name: n },
+      className: "border-base-300 group border-b",
+      children: [
+        /* @__PURE__ */ l(
+          e,
+          {
+            canvas: !0,
+            is: s,
+            custom: { displayName: "Header" },
+            canDelete: !0,
+            canEditName: !0,
+            type: "summary",
+            className: "flex cursor-pointer list-none flex-row items-center justify-between px-4 py-3 select-none",
+            children: [
+              /* @__PURE__ */ t(
+                e,
+                {
+                  is: o,
+                  custom: { displayName: "Title" },
+                  text: `<p class="font-medium">${d}</p>`,
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              ),
+              /* @__PURE__ */ t(
+                e,
+                {
+                  is: E,
+                  custom: { displayName: "Chevron" },
+                  value: "ref-icon:tb/TbChevronDown",
+                  className: "h-5 w-5 transition-transform duration-200 group-open:rotate-180",
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          e,
+          {
+            canvas: !0,
+            is: s,
+            custom: { displayName: "Body" },
+            canDelete: !0,
+            canEditName: !0,
+            className: "text-base-content/80 px-4 pb-4",
+            children: /* @__PURE__ */ t(
+              e,
+              {
+                is: o,
+                custom: { displayName: "Answer" },
+                text: `<p>${u}</p>`,
+                canDelete: !0,
+                canEditName: !0
+              }
+            )
+          }
+        )
+      ]
+    },
+    `item-${i}`
+  );
+}
+function fe() {
+  const a = `accordion-${Math.random().toString(36).slice(2, 8)}`;
+  return k({
+    index: 0,
+    groupName: a,
+    question: "New question",
+    answer: "Replace this with your answer."
+  });
+}
+function we() {
+  const a = `accordion-${Math.random().toString(36).slice(2, 8)}`;
+  return [
+    k({
+      index: 0,
+      groupName: a,
+      question: "How does the accordion work?",
+      answer: "Native <details> elements share a name attribute, giving single-open exclusive toggle with zero JavaScript.",
+      open: !0
+    }),
+    k({
+      index: 1,
+      groupName: a,
+      question: "Can I have multiple panels open?",
+      answer: "Remove the name attr from each item to allow multiple panels open at once."
+    }),
+    k({
+      index: 2,
+      groupName: a,
+      question: "How do I customize the chevron?",
+      answer: "Use the Modifiers Modal to author your own animation classes — or swap the Chevron icon to any other ref-icon ref."
+    })
+  ];
+}
+function ve() {
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: r,
+        custom: { displayName: "Dropdown Trigger" },
+        text: "Menu",
+        url: "",
+        icon: { value: "ref-icon:tb/TbChevronDown", position: "right", only: !1, size: "w-5 h-5" },
+        canDelete: !0,
+        canEditName: !0,
+        className: "btn btn-primary rounded-box px-space-md py-space-xs min-h-12 font-semibold"
+      },
+      "trigger"
+    ),
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Dropdown Panel" },
+        canDelete: !0,
+        canEditName: !0,
+        handlers: {
+          onClick: "if (event.currentTarget.closest('[tabindex]')) event.currentTarget.closest('[tabindex]').blur()"
+        },
+        className: "bg-base-200 text-base-content rounded-box border-base-300 py-space-xs absolute top-full left-0 z-50 mt-1 hidden min-w-48 flex-col overflow-hidden border shadow-lg group-focus-within:flex",
+        children: [
+          /* @__PURE__ */ t(
+            e,
+            {
+              is: r,
+              custom: { displayName: "Option 1" },
+              text: "Option 1",
+              url: "#",
+              canDelete: !0,
+              canEditName: !0,
+              className: "hover:bg-neutral px-space-sm py-space-xs w-full rounded-none border-0 text-left text-sm"
+            }
+          ),
+          /* @__PURE__ */ t(
+            e,
+            {
+              is: r,
+              custom: { displayName: "Option 2" },
+              text: "Option 2",
+              url: "#",
+              canDelete: !0,
+              canEditName: !0,
+              className: "hover:bg-neutral px-space-sm py-space-xs w-full rounded-none border-0 text-left text-sm"
+            }
+          ),
+          /* @__PURE__ */ t(
+            e,
+            {
+              is: r,
+              custom: { displayName: "Option 3" },
+              text: "Option 3",
+              url: "#",
+              canDelete: !0,
+              canEditName: !0,
+              className: "hover:bg-neutral px-space-sm py-space-xs w-full rounded-none border-0 text-left text-sm"
+            }
+          )
+        ]
+      },
+      "panel"
+    )
+  ];
+}
+function ke() {
+  const a = `cookie-consent-${Math.random().toString(36).slice(2, 8)}`, i = `ph-${a}`;
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Cookie Banner" },
+        canDelete: !0,
+        canEditName: !0,
+        anchor: a,
+        action: {
+          type: "show-hide",
+          target: a,
+          direction: "show",
+          trigger: "load",
+          method: "class",
+          conditions: [
+            {
+              logic: "all",
+              conditions: [
+                {
+                  type: "localStorage",
+                  key: i,
+                  operator: "not-exists",
+                  value: ""
+                }
+              ]
+            }
+          ]
+        },
+        className: "bg-base-200 text-base-content fixed right-0 bottom-0 left-0 z-[1100] hidden shadow-[0_-2px_10px_rgba(0,0,0,0.1)]",
+        children: /* @__PURE__ */ l(
+          e,
+          {
+            canvas: !0,
+            is: s,
+            custom: { displayName: "Banner Content" },
+            canDelete: !0,
+            canEditName: !0,
+            className: "gap-space-sm px-space-md py-space-sm max-w-page mx-auto flex flex-col items-center justify-between sm:flex-row",
+            children: [
+              /* @__PURE__ */ t(
+                e,
+                {
+                  is: o,
+                  custom: { displayName: "Consent Text" },
+                  tagName: "p",
+                  richText: { mode: "inline" },
+                  text: "We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.",
+                  className: "text-base-content/80 text-sm",
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              ),
+              /* @__PURE__ */ l(
+                e,
+                {
+                  canvas: !0,
+                  is: s,
+                  custom: { displayName: "Button Group" },
+                  canDelete: !0,
+                  canEditName: !0,
+                  className: "gap-space-xs flex shrink-0 flex-row items-center",
+                  children: [
+                    /* @__PURE__ */ t(
+                      e,
+                      {
+                        is: r,
+                        custom: { displayName: "Reject" },
+                        text: "Reject",
+                        url: "",
+                        action: [
+                          {
+                            type: "show-hide",
+                            target: a,
+                            direction: "hide",
+                            trigger: "click",
+                            method: "class"
+                          },
+                          { type: "set-local-storage", key: i, value: "rejected" }
+                        ],
+                        className: "btn btn-ghost btn-sm rounded-box font-medium"
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      e,
+                      {
+                        is: r,
+                        custom: { displayName: "Accept" },
+                        text: "Accept",
+                        url: "",
+                        action: [
+                          {
+                            type: "show-hide",
+                            target: a,
+                            direction: "hide",
+                            trigger: "click",
+                            method: "class"
+                          },
+                          { type: "set-local-storage", key: i, value: "accepted" }
+                        ],
+                        className: "btn btn-primary btn-sm rounded-box font-medium"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      },
+      "banner"
+    )
+  ];
+}
+const De = [
+  {
+    label: "Modal",
+    description: "A pop-up window that opens when something is clicked.",
+    icon: _,
+    category: "Interactive",
+    props: { className: "contents" },
+    children: xe
+  },
+  {
+    label: "Tabs",
+    description: "Tabs you click to switch between sections.",
+    icon: N,
+    category: "Interactive",
+    props: { className: "flex flex-col w-full" },
+    children: Ne
+  },
+  {
+    label: "Accordion",
+    description: "Click a row to reveal what's hidden inside.",
+    icon: W,
+    category: "Interactive",
+    props: { className: "flex flex-col w-full accordion-slide-fade" },
+    children: we,
+    addChild: {
+      label: "Add Item",
+      template: fe,
+      childLabel: (a, i) => {
+        var n, d, u, c;
+        try {
+          return ((d = (n = a == null ? void 0 : a.data) == null ? void 0 : n.nodes) == null ? void 0 : d[0]) ? ((c = (u = a == null ? void 0 : a.data) == null ? void 0 : u.custom) == null ? void 0 : c.displayName) || `Item ${i + 1}` : `Item ${i + 1}`;
+        } catch {
+          return `Item ${i + 1}`;
+        }
+      }
+    }
+  },
+  {
+    label: "Cookie Consent",
+    description: "The 'accept cookies' bar at the bottom of the page.",
+    icon: X,
+    category: "Interactive",
+    props: { className: "contents" },
+    children: ke
+  },
+  {
+    label: "Dropdown",
+    description: "A menu that drops down when you click the trigger.",
+    icon: U,
+    category: "Interactive",
+    props: {
+      className: "group relative inline-flex flex-col self-start",
+      attrs: { tabindex: 0 }
+    },
+    children: ve
+  }
+], Ee = [
+  {
+    label: "Bulleted List",
+    description: "A simple bulleted list of points.",
+    icon: $,
+    category: "Lists",
+    props: {
+      type: "ul",
+      className: "list-disc pl-space-md space-y-space-xs"
+    },
+    children: B
+  },
+  {
+    label: "Numbered List",
+    description: "An ordered list with numbers down the left.",
+    icon: V,
+    category: "Lists",
+    props: {
+      type: "ol",
+      className: "list-decimal pl-space-md space-y-space-xs"
+    },
+    children: de
+  },
+  {
+    label: "Checklist",
+    description: "A list of rows each with a leading check icon.",
+    icon: J,
+    category: "Lists",
+    props: {
+      type: "ul",
+      className: "list-none flex flex-col gap-space-sm"
+    },
+    children: me
+  },
+  {
+    label: "List Item",
+    description: "A single <li> row inside a list.",
+    icon: $,
+    category: "Lists",
+    props: { type: "li" },
+    children: () => [
+      /* @__PURE__ */ t(
+        e,
+        {
+          is: o,
+          custom: { displayName: "Text" },
+          text: "<p>List item</p>",
+          canDelete: !0,
+          canEditName: !0
+        },
+        "text"
+      )
+    ]
+  }
+], Ce = [
+  {
+    label: "Table",
+    description: "A data table with header row and body rows.",
+    icon: y,
+    category: "Tables",
+    props: {
+      type: "table",
+      className: "table w-full border-collapse text-sm"
+    },
+    children: ue
+  },
+  {
+    label: "Table Head",
+    description: "A <thead> section — header rows for a table.",
+    icon: y,
+    category: "Tables",
+    props: { type: "thead" },
+    children: () => [
+      /* @__PURE__ */ t(
+        e,
+        {
+          canvas: !0,
+          is: s,
+          type: "tr",
+          custom: { displayName: "Row" },
+          canDelete: !0,
+          canEditName: !0,
+          children: m("Header", "Column", !0)
+        },
+        "row"
+      )
+    ]
+  },
+  {
+    label: "Table Body",
+    description: "A <tbody> section — data rows for a table.",
+    icon: y,
+    category: "Tables",
+    props: { type: "tbody" },
+    children: () => [
+      /* @__PURE__ */ t(
+        e,
+        {
+          canvas: !0,
+          is: s,
+          type: "tr",
+          custom: { displayName: "Row" },
+          canDelete: !0,
+          canEditName: !0,
+          children: m("Cell", "Cell", !1)
+        },
+        "row"
+      )
+    ]
+  },
+  {
+    label: "Table Foot",
+    description: "A <tfoot> section — footer rows for a table.",
+    icon: y,
+    category: "Tables",
+    props: { type: "tfoot" },
+    children: () => [
+      /* @__PURE__ */ t(
+        e,
+        {
+          canvas: !0,
+          is: s,
+          type: "tr",
+          custom: { displayName: "Row" },
+          canDelete: !0,
+          canEditName: !0,
+          children: m("Cell", "Total", !1)
+        },
+        "row"
+      )
+    ]
+  },
+  {
+    label: "Table Row",
+    description: "A single <tr> with one cell.",
+    icon: y,
+    category: "Tables",
+    props: { type: "tr" },
+    children: () => [m("Cell", "Cell", !1)]
+  },
+  {
+    label: "Table Cell",
+    description: "A single <td> data cell.",
+    icon: y,
+    category: "Tables",
+    props: {
+      type: "td",
+      className: "border-base-300 border-b px-space-sm py-space-xs"
+    },
+    children: () => [
+      /* @__PURE__ */ t(
+        e,
+        {
+          is: o,
+          custom: { displayName: "Text" },
+          text: "<p>Cell</p>",
+          canDelete: !0,
+          canEditName: !0
+        },
+        "text"
+      )
+    ]
+  },
+  {
+    label: "Table Header Cell",
+    description: "A single <th> header cell with scope=col.",
+    icon: y,
+    category: "Tables",
+    props: {
+      type: "th",
+      className: "border-base-300 border-b px-space-sm py-space-xs text-left font-semibold",
+      attrs: { scope: "col" }
+    },
+    children: () => [
+      /* @__PURE__ */ t(
+        e,
+        {
+          is: o,
+          custom: { displayName: "Text" },
+          text: "<p>Header</p>",
+          canDelete: !0,
+          canEditName: !0
+        },
+        "text"
+      )
+    ]
+  }
+], Te = [
+  {
+    label: "Spacer",
+    description: "An empty gap that pushes things apart.",
+    icon: K,
+    category: "Dividers",
+    props: {
+      className: "h-16 w-full bg-transparent",
+      attrs: { "aria-hidden": "true" }
+    }
+  },
+  {
+    label: "Divider",
+    description: "A thin line between sections.",
+    icon: P,
+    category: "Dividers",
+    props: {
+      className: "border-t w-full",
+      attrs: { role: "separator" }
+    }
+  }
+];
+function Ae() {
+  const a = `mnav-${Math.random().toString(36).slice(2, 8)}`;
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: r,
+        custom: { displayName: "Hamburger" },
+        text: "Open menu",
+        url: "",
+        icon: { value: "ref-icon:tb/TbMenu2", only: !0, size: "w-7 h-7" },
+        action: [
+          {
+            type: "show-hide",
+            target: a,
+            direction: "show",
+            trigger: "click",
+            method: "class"
+          }
+        ],
+        className: "text-base-content px-space-xs py-space-xs flex items-center justify-center bg-transparent lg:hidden",
+        canDelete: !0,
+        canEditName: !0
+      },
+      "hamburger"
+    ),
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Mobile Drawer" },
+        canDelete: !0,
+        canEditName: !0,
+        attrs: { id: a },
+        className: "bg-base-100 p-space-lg fixed inset-0 z-[1200] hidden h-full flex-col lg:hidden",
+        handlers: {
+          onClick: "var a = event.target.closest('a, button[data-action]'); if (a) event.currentTarget.classList.add('hidden');"
+        },
+        children: [
+          /* @__PURE__ */ t(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Drawer Header" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "pb-space-md flex items-center justify-end",
+              children: /* @__PURE__ */ t(
+                e,
+                {
+                  is: r,
+                  custom: { displayName: "Close" },
+                  text: "Close",
+                  url: "",
+                  icon: { value: "ref-icon:tb/TbX", only: !0, size: "w-6 h-6" },
+                  action: [
+                    {
+                      type: "show-hide",
+                      target: a,
+                      direction: "hide",
+                      trigger: "click",
+                      method: "class"
+                    }
+                  ],
+                  className: "text-base-content px-space-xs py-space-xs flex items-center justify-center bg-transparent",
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Drawer Links" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "gap-space-sm flex flex-col",
+              children: [
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 1" },
+                    text: "Home",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 2" },
+                    text: "About",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 3" },
+                    text: "Contact",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      "drawer"
+    )
+  ];
+}
+function $e() {
+  const a = `nav-${Math.random().toString(36).slice(2, 8)}`;
+  return [
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Navbar" },
+        type: "nav",
+        canDelete: !0,
+        canEditName: !0,
+        className: "px-container-x py-space-sm bg-base-100 flex w-full items-center justify-between",
+        children: [
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Logo" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "gap-space-sm flex flex-row items-center",
+              children: [
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    canvas: !0,
+                    is: s,
+                    custom: { displayName: "Logo Mark" },
+                    canDelete: !0,
+                    canEditName: !0,
+                    className: "bg-primary flex h-10 w-10 items-center justify-center rounded-md",
+                    children: /* @__PURE__ */ t(
+                      e,
+                      {
+                        is: E,
+                        custom: { displayName: "Mark Icon" },
+                        value: "ref-icon:tb/TbBolt",
+                        className: "text-primary-content h-6 w-6",
+                        canDelete: !0,
+                        canEditName: !0
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: o,
+                    custom: { displayName: "Wordmark" },
+                    tagName: "span",
+                    text: '<span class="text-lg font-bold font-heading">Brand</span>',
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Desktop Links" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "gap-space-md hidden items-center lg:flex",
+              children: [
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 1" },
+                    text: "Home",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "text-base-content hover:text-primary",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 2" },
+                    text: "Features",
+                    url: "",
+                    action: [{ type: "link", href: "#features" }],
+                    className: "text-base-content hover:text-primary",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 3" },
+                    text: "Pricing",
+                    url: "",
+                    action: [{ type: "link", href: "#pricing" }],
+                    className: "text-base-content hover:text-primary",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "CTA" },
+                    text: "Get started",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "btn btn-primary rounded-box px-space-md py-space-xs min-h-12 font-semibold",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            e,
+            {
+              is: r,
+              custom: { displayName: "Hamburger" },
+              text: "Open menu",
+              url: "",
+              icon: { value: "ref-icon:tb/TbMenu2", only: !0, size: "w-7 h-7" },
+              action: [
+                {
+                  type: "show-hide",
+                  target: a,
+                  direction: "show",
+                  trigger: "click",
+                  method: "class"
+                }
+              ],
+              className: "text-base-content px-space-xs py-space-xs flex items-center justify-center bg-transparent lg:hidden",
+              canDelete: !0,
+              canEditName: !0
+            }
+          )
+        ]
+      },
+      "nav"
+    ),
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Mobile Drawer" },
+        canDelete: !0,
+        canEditName: !0,
+        attrs: { id: a },
+        className: "bg-base-100 p-space-lg fixed inset-0 z-[1200] hidden h-full flex-col lg:hidden",
+        handlers: {
+          onClick: "var a = event.target.closest('a, button[data-action]'); if (a) event.currentTarget.classList.add('hidden');"
+        },
+        children: [
+          /* @__PURE__ */ t(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Drawer Header" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "pb-space-md flex items-center justify-end",
+              children: /* @__PURE__ */ t(
+                e,
+                {
+                  is: r,
+                  custom: { displayName: "Close" },
+                  text: "Close",
+                  url: "",
+                  icon: { value: "ref-icon:tb/TbX", only: !0, size: "w-6 h-6" },
+                  action: [
+                    {
+                      type: "show-hide",
+                      target: a,
+                      direction: "hide",
+                      trigger: "click",
+                      method: "class"
+                    }
+                  ],
+                  className: "text-base-content px-space-xs py-space-xs flex items-center justify-center bg-transparent",
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Drawer Links" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "gap-space-sm flex flex-col",
+              children: [
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 1" },
+                    text: "Home",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 2" },
+                    text: "Features",
+                    url: "",
+                    action: [{ type: "link", href: "#features" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Link 3" },
+                    text: "Pricing",
+                    url: "",
+                    action: [{ type: "link", href: "#pricing" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "CTA" },
+                    text: "Get started",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "btn btn-primary rounded-box px-space-md py-space-xs mt-space-md min-h-12 font-semibold",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      "drawer"
+    )
+  ];
+}
+function Le() {
+  const a = `nav-${Math.random().toString(36).slice(2, 8)}`, i = `mega-${Math.random().toString(36).slice(2, 8)}`;
+  return [
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Navbar (mega)" },
+        type: "nav",
+        canDelete: !0,
+        canEditName: !0,
+        className: "px-container-x py-space-sm bg-base-100 relative flex w-full items-center justify-between",
+        children: [
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Logo" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "gap-space-sm flex flex-row items-center",
+              children: [
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    canvas: !0,
+                    is: s,
+                    custom: { displayName: "Logo Mark" },
+                    canDelete: !0,
+                    canEditName: !0,
+                    className: "bg-primary flex h-10 w-10 items-center justify-center rounded-md",
+                    children: /* @__PURE__ */ t(
+                      e,
+                      {
+                        is: E,
+                        custom: { displayName: "Mark Icon" },
+                        value: "ref-icon:tb/TbBolt",
+                        className: "text-primary-content h-6 w-6",
+                        canDelete: !0,
+                        canEditName: !0
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: o,
+                    custom: { displayName: "Wordmark" },
+                    tagName: "span",
+                    text: '<span class="text-lg font-bold font-heading">Brand</span>',
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Desktop Links" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "gap-space-md hidden items-center lg:flex",
+              children: [
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Products" },
+                    text: "Products",
+                    url: "",
+                    icon: { value: "ref-icon:tb/TbChevronDown", position: "right", size: "w-4 h-4" },
+                    action: [
+                      {
+                        type: "show-hide",
+                        target: i,
+                        direction: "toggle",
+                        trigger: "click",
+                        method: "class"
+                      }
+                    ],
+                    className: "text-base-content hover:text-primary",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Pricing" },
+                    text: "Pricing",
+                    url: "",
+                    action: [{ type: "link", href: "#pricing" }],
+                    className: "text-base-content hover:text-primary",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "CTA" },
+                    text: "Get started",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "btn btn-primary rounded-box px-space-md py-space-xs min-h-12 font-semibold",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            e,
+            {
+              is: r,
+              custom: { displayName: "Hamburger" },
+              text: "Open menu",
+              url: "",
+              icon: { value: "ref-icon:tb/TbMenu2", only: !0, size: "w-7 h-7" },
+              action: [
+                {
+                  type: "show-hide",
+                  target: a,
+                  direction: "show",
+                  trigger: "click",
+                  method: "class"
+                }
+              ],
+              className: "text-base-content px-space-xs py-space-xs flex items-center justify-center bg-transparent lg:hidden",
+              canDelete: !0,
+              canEditName: !0
+            }
+          ),
+          /* @__PURE__ */ t(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Mega Panel" },
+              canDelete: !0,
+              canEditName: !0,
+              attrs: { id: i },
+              className: "bg-base-100 border-base-200 px-container-x py-space-lg absolute top-full right-0 left-0 z-[1100] hidden border-t shadow-xl",
+              children: /* @__PURE__ */ l(
+                e,
+                {
+                  canvas: !0,
+                  is: s,
+                  custom: { displayName: "Mega Grid" },
+                  canDelete: !0,
+                  canEditName: !0,
+                  className: "gap-space-lg max-w-page mx-auto grid w-full grid-cols-3",
+                  children: [
+                    /* @__PURE__ */ l(
+                      e,
+                      {
+                        canvas: !0,
+                        is: s,
+                        custom: { displayName: "Column 1" },
+                        canDelete: !0,
+                        canEditName: !0,
+                        className: "gap-space-xs flex flex-col",
+                        children: [
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: o,
+                              custom: { displayName: "Heading" },
+                              tagName: "h4",
+                              text: '<h4 class="text-sm font-semibold uppercase tracking-wide text-base-content/60">Platform</h4>',
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: r,
+                              custom: { displayName: "Link" },
+                              text: "Editor",
+                              url: "",
+                              action: [{ type: "link", href: "#" }],
+                              className: "text-base-content hover:text-primary justify-start",
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: r,
+                              custom: { displayName: "Link" },
+                              text: "Templates",
+                              url: "",
+                              action: [{ type: "link", href: "#" }],
+                              className: "text-base-content hover:text-primary justify-start",
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ l(
+                      e,
+                      {
+                        canvas: !0,
+                        is: s,
+                        custom: { displayName: "Column 2" },
+                        canDelete: !0,
+                        canEditName: !0,
+                        className: "gap-space-xs flex flex-col",
+                        children: [
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: o,
+                              custom: { displayName: "Heading" },
+                              tagName: "h4",
+                              text: '<h4 class="text-sm font-semibold uppercase tracking-wide text-base-content/60">Solutions</h4>',
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: r,
+                              custom: { displayName: "Link" },
+                              text: "Marketing",
+                              url: "",
+                              action: [{ type: "link", href: "#" }],
+                              className: "text-base-content hover:text-primary justify-start",
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: r,
+                              custom: { displayName: "Link" },
+                              text: "Storefront",
+                              url: "",
+                              action: [{ type: "link", href: "#" }],
+                              className: "text-base-content hover:text-primary justify-start",
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ l(
+                      e,
+                      {
+                        canvas: !0,
+                        is: s,
+                        custom: { displayName: "Column 3" },
+                        canDelete: !0,
+                        canEditName: !0,
+                        className: "gap-space-xs flex flex-col",
+                        children: [
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: o,
+                              custom: { displayName: "Heading" },
+                              tagName: "h4",
+                              text: '<h4 class="text-sm font-semibold uppercase tracking-wide text-base-content/60">Resources</h4>',
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: r,
+                              custom: { displayName: "Link" },
+                              text: "Docs",
+                              url: "",
+                              action: [{ type: "link", href: "#" }],
+                              className: "text-base-content hover:text-primary justify-start",
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            e,
+                            {
+                              is: r,
+                              custom: { displayName: "Link" },
+                              text: "Blog",
+                              url: "",
+                              action: [{ type: "link", href: "#" }],
+                              className: "text-base-content hover:text-primary justify-start",
+                              canDelete: !0,
+                              canEditName: !0
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            "mega"
+          )
+        ]
+      },
+      "nav"
+    ),
+    /* @__PURE__ */ l(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Mobile Drawer" },
+        canDelete: !0,
+        canEditName: !0,
+        attrs: { id: a },
+        className: "bg-base-100 p-space-lg fixed inset-0 z-[1200] hidden h-full flex-col lg:hidden",
+        handlers: {
+          onClick: "var a = event.target.closest('a, button[data-action]'); if (a) event.currentTarget.classList.add('hidden');"
+        },
+        children: [
+          /* @__PURE__ */ t(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Drawer Header" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "pb-space-md flex items-center justify-end",
+              children: /* @__PURE__ */ t(
+                e,
+                {
+                  is: r,
+                  custom: { displayName: "Close" },
+                  text: "Close",
+                  url: "",
+                  icon: { value: "ref-icon:tb/TbX", only: !0, size: "w-6 h-6" },
+                  action: [
+                    {
+                      type: "show-hide",
+                      target: a,
+                      direction: "hide",
+                      trigger: "click",
+                      method: "class"
+                    }
+                  ],
+                  className: "text-base-content px-space-xs py-space-xs flex items-center justify-center bg-transparent",
+                  canDelete: !0,
+                  canEditName: !0
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ l(
+            e,
+            {
+              canvas: !0,
+              is: s,
+              custom: { displayName: "Drawer Links" },
+              canDelete: !0,
+              canEditName: !0,
+              className: "gap-space-sm flex flex-col",
+              children: [
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Products" },
+                    text: "Products",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "Pricing" },
+                    text: "Pricing",
+                    url: "",
+                    action: [{ type: "link", href: "#pricing" }],
+                    className: "text-base-content py-space-sm w-full justify-start text-lg",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  e,
+                  {
+                    is: r,
+                    custom: { displayName: "CTA" },
+                    text: "Get started",
+                    url: "",
+                    action: [{ type: "link", href: "#" }],
+                    className: "btn btn-primary rounded-box px-space-md py-space-xs mt-space-md min-h-12 font-semibold",
+                    canDelete: !0,
+                    canEditName: !0
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      "drawer"
+    )
+  ];
+}
+const Me = [
+  {
+    label: "Navbar",
+    description: "A site header with logo, links, and a mobile menu.",
+    icon: N,
+    category: "Navigation",
+    props: { className: "contents" },
+    children: $e
+  },
+  {
+    label: "Navbar (mega)",
+    description: "A header with a big drop-down panel of grouped links.",
+    icon: N,
+    category: "Navigation",
+    props: { className: "contents" },
+    children: Le
+  },
+  {
+    label: "Mobile Menu",
+    description: "Just the hamburger button and slide-in drawer.",
+    icon: N,
+    category: "Navigation",
+    props: { className: "contents" },
+    children: Ae
+  }
+], A = "px-(--button-padding-x) py-(--button-padding-y) flex-col gap-1.5 items-center justify-center", v = "flex flex-row items-center gap-container md:flex md:flex-row md:items-center md:gap-container", Ie = {
+  twitter: "ref-icon:fa6/FaXTwitter",
+  facebook: "ref-icon:fa6/FaFacebook",
+  instagram: "ref-icon:fa6/FaInstagram",
+  linkedin: "ref-icon:fa6/FaLinkedin",
+  youtube: "ref-icon:fa6/FaYoutube"
+};
+function M(a) {
+  const i = a ? "px-(--button-padding-x) py-(--button-padding-y) bg-primary text-primary-content rounded-box" : "btn btn-ghost", n = a ? {} : {
+    twitter: "text-[#1DA1F2]",
+    facebook: "text-[#1877F2]",
+    instagram: "text-[#E4405F]",
+    linkedin: "text-[#0A66C2]",
+    youtube: "text-[#FF0000]"
+  }, d = ["twitter", "facebook", "instagram", "linkedin"];
+  return (a ? d : [...d, "youtube"]).map((c) => /* @__PURE__ */ t(
+    e,
+    {
+      is: r,
+      custom: { displayName: c.charAt(0).toUpperCase() + c.slice(1) },
+      text: c.charAt(0).toUpperCase() + c.slice(1),
+      icon: { value: Ie[c], only: !0 },
+      url: "#",
+      className: `${i}${n[c] ? ` ${n[c]}` : ""}`,
+      canDelete: !0,
+      canEditName: !0
+    },
+    c
+  ));
+}
+function I(a) {
+  return ["Home", "About", "Services", "Contact"].map((n) => /* @__PURE__ */ t(
+    e,
+    {
+      is: r,
+      custom: { displayName: n },
+      text: n,
+      url: "#",
+      className: a ? `${A} bg-primary text-primary-content rounded-box` : A,
+      canDelete: !0,
+      canEditName: !0
+    },
+    n
+  ));
+}
+function je() {
+  return ["Home", "About", "Contact"].map((a) => /* @__PURE__ */ t(
+    e,
+    {
+      is: r,
+      custom: { displayName: a },
+      text: a,
+      url: "#",
+      className: `${A} text-primary-content border-0 bg-transparent`,
+      canDelete: !0,
+      canEditName: !0
+    },
+    a
+  ));
+}
+function Pe() {
+  return ["Button 1", "Button 2", "Button 3"].map((a, i) => /* @__PURE__ */ t(
+    e,
+    {
+      is: r,
+      custom: { displayName: a },
+      text: a,
+      url: "#",
+      className: "btn btn-primary rounded-box px-space-md py-space-xs min-h-12 font-semibold",
+      canDelete: !0,
+      canEditName: !0
+    },
+    i
+  ));
+}
+const Se = [
+  {
+    label: "Button Group",
+    description: "A row of buttons sitting next to each other.",
+    icon: Y,
+    category: "Buttons",
+    props: {
+      className: "flex flex-col items-center justify-start gap-space-xs md:flex-row md:items-center md:justify-start w-auto"
+    },
+    children: Pe
+  },
+  {
+    label: "Social Nav",
+    description: "A row of social icons with brand-colour fills.",
+    icon: L,
+    category: "Navigation",
+    props: { className: v },
+    children: () => M(!0)
+  },
+  {
+    label: "Social Icons",
+    description: "A row of social icons coloured by brand.",
+    icon: L,
+    category: "Navigation",
+    props: { className: v },
+    children: () => M(!1)
+  },
+  {
+    label: "Plain Nav",
+    description: "A simple row of text links.",
+    icon: P,
+    category: "Navigation",
+    props: { className: v },
+    children: () => I(!1)
+  },
+  {
+    label: "Minimal Nav",
+    description: "Nav links with a coloured pill behind each.",
+    icon: N,
+    category: "Navigation",
+    props: { className: v },
+    children: () => I(!0)
+  },
+  {
+    label: "Pill Nav",
+    description: "A compact pill-shaped row of nav links.",
+    icon: Q,
+    category: "Navigation",
+    props: {
+      className: "flex flex-row items-center gap-space-xs md:flex md:flex-row md:items-center md:gap-space-xs bg-primary rounded-full px-space-xs py-space-xs"
+    },
+    children: je
+  }
+];
+function T() {
+  return [0, 1, 2].map((a) => /* @__PURE__ */ t(
+    e,
+    {
+      is: D,
+      custom: { displayName: `Image ${a + 1}` },
+      alt: `Image ${a + 1}`,
+      className: "rounded-box h-auto w-full object-cover",
+      canDelete: !0,
+      canEditName: !0
+    },
+    a
+  ));
+}
+function Be() {
+  return [0, 1, 2, 3, 4, 5].map((a) => /* @__PURE__ */ t(
+    e,
+    {
+      is: D,
+      custom: { displayName: `Image ${a + 1}` },
+      alt: `Image ${a + 1}`,
+      className: "mr-space-md rounded-box h-24 w-40 shrink-0 object-cover",
+      canDelete: !0,
+      canEditName: !0
+    },
+    a
+  ));
+}
+function j(a) {
+  const i = `carousel-${Math.random().toString(36).slice(2, 8)}`, n = i, d = 3, u = a.hero ? 1 : 3, c = a.hero ? "w-full h-80 shrink-0 object-cover" : "h-56 shrink-0 object-cover px-space-xs", g = a.hero ? "flex-basis: 100%" : "flex-basis: calc(100% / var(--carousel-items))", f = Array.from({ length: d }).map((w, h) => /* @__PURE__ */ t(
+    e,
+    {
+      is: D,
+      custom: { displayName: `Slide ${h + 1}` },
+      alt: `Slide ${h + 1}`,
+      className: c,
+      root: { style: g },
+      canDelete: !0,
+      canEditName: !0
+    },
+    `slide-${h}`
+  )), C = Array.from({ length: d }).map((w, h) => /* @__PURE__ */ t(
+    e,
+    {
+      is: r,
+      custom: { displayName: `Dot ${h + 1}` },
+      text: "",
+      className: "bg-base-content/30 hover:bg-base-content/60 size-2.5 rounded-full transition-all",
+      action: [
+        { type: "set-state", key: n, kind: "value", value: String(h), trigger: "click" }
+      ],
+      stateModifiers: [
+        {
+          conditions: [
+            {
+              logic: "all",
+              conditions: [{ type: "state", key: n, operator: "equals", value: String(h) }]
+            }
+          ],
+          modifiers: ["dot-active"]
+        }
+      ],
+      canDelete: !0,
+      canEditName: !0
+    },
+    `dot-${h}`
+  ));
+  return [
+    /* @__PURE__ */ t(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Carousel Track" },
+        attrs: { "data-carousel-track": i },
+        className: "flex transition-transform duration-500 ease-in-out",
+        root: {
+          style: `--carousel-items: ${u}; transform: translateX(calc(var(--carousel-index, 0) * -100% / var(--carousel-items, 1)))`
+        },
+        stateStyleBindings: [{ key: n, styleProp: "--carousel-index", defaultValue: "0" }],
+        canDelete: !0,
+        canEditName: !0,
+        children: f
+      },
+      "track"
+    ),
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: r,
+        custom: { displayName: "Previous" },
+        text: "",
+        icon: { value: "ref-icon:tb/TbChevronLeft", only: !0, size: "w-6 h-6" },
+        className: "bg-base-100/80 text-base-content hover:bg-base-100 absolute top-1/2 left-2 z-10 -translate-y-1/2 rounded-full p-2 shadow-md transition-colors",
+        action: [
+          {
+            type: "decrement-state",
+            key: n,
+            step: 1,
+            min: 0,
+            max: d - 1,
+            wrap: !0,
+            trigger: "click"
+          }
+        ],
+        canDelete: !0,
+        canEditName: !0
+      },
+      "prev"
+    ),
+    /* @__PURE__ */ t(
+      e,
+      {
+        is: r,
+        custom: { displayName: "Next" },
+        text: "",
+        icon: { value: "ref-icon:tb/TbChevronRight", only: !0, size: "w-6 h-6" },
+        className: "bg-base-100/80 text-base-content hover:bg-base-100 absolute top-1/2 right-2 z-10 -translate-y-1/2 rounded-full p-2 shadow-md transition-colors",
+        action: [
+          {
+            type: "increment-state",
+            key: n,
+            step: 1,
+            min: 0,
+            max: d - 1,
+            wrap: !0,
+            trigger: "click"
+          }
+        ],
+        canDelete: !0,
+        canEditName: !0
+      },
+      "next"
+    ),
+    /* @__PURE__ */ t(
+      e,
+      {
+        canvas: !0,
+        is: s,
+        custom: { displayName: "Dots" },
+        className: "absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 gap-2",
+        canDelete: !0,
+        canEditName: !0,
+        children: C
+      },
+      "dots"
+    )
+  ];
+}
+const ze = [
+  {
+    label: "Image Group",
+    description: "A row of pictures sitting next to each other.",
+    icon: Z,
+    category: "Images",
+    props: {
+      className: "flex flex-row items-center gap-space-sm w-full"
+    },
+    children: T
+  },
+  {
+    label: "Image Grid",
+    description: "A grid of pictures with equal-width columns.",
+    icon: x,
+    category: "Images",
+    props: {
+      className: "grid grid-cols-3 gap-space-sm w-full"
+    },
+    children: T
+  },
+  {
+    label: "Image Masonry",
+    description: "A staggered Pinterest-style column layout.",
+    icon: S,
+    category: "Images",
+    props: {
+      className: "columns-3 gap-space-sm w-full [&>*]:mb-space-sm [&>*]:break-inside-avoid"
+    },
+    children: T
+  },
+  {
+    label: "Image Marquee",
+    description: "Pictures scrolling sideways in an endless loop.",
+    icon: ee,
+    category: "Images",
+    props: {
+      className: "flex w-full overflow-hidden hover:[animation-play-state:paused]",
+      root: { animation: "cssMarquee" }
+    },
+    children: Be
+  },
+  {
+    label: "Image Carousel",
+    description: "A slideshow with prev/next arrows and dots.",
+    icon: te,
+    category: "Images",
+    props: {
+      className: "relative overflow-hidden w-full rounded-box"
+    },
+    children: () => j({ hero: !1 })
+  },
+  {
+    label: "Image Hero",
+    description: "A full-width slideshow showing one big image at a time.",
+    icon: ae,
+    category: "Images",
+    props: {
+      className: "relative overflow-hidden w-full rounded-box"
+    },
+    children: () => j({ hero: !0 })
+  }
+], He = [
+  {
+    label: "Single column",
+    icon: se,
+    category: "Grid",
+    description: "Just one column — everything stacks.",
+    props: { className: `${p} grid-cols-1 gap-space-md` },
+    children: () => b(1)
+  },
+  {
+    label: "Two columns",
+    icon: S,
+    category: "Grid",
+    description: "Two equal columns on desktop.",
+    props: { className: `${p} grid-cols-1 gap-space-md md:grid-cols-2` },
+    children: () => b(2)
+  },
+  {
+    label: "Three columns",
+    icon: re,
+    category: "Grid",
+    description: "Three columns on bigger screens.",
+    props: { className: `${p} grid-cols-1 gap-space-md sm:grid-cols-2 lg:grid-cols-3` },
+    children: () => b(3)
+  },
+  {
+    label: "Four columns",
+    icon: x,
+    category: "Grid",
+    description: "Four columns — good for cards or icons.",
+    props: { className: `${p} grid-cols-2 gap-space-md md:grid-cols-4` },
+    children: () => b(4)
+  },
+  {
+    label: "2x2 grid",
+    icon: x,
+    category: "Grid",
+    description: "Two columns by two rows.",
+    props: { className: `${p} grid-cols-2 grid-rows-2 gap-space-md` },
+    children: () => b(4)
+  },
+  {
+    label: "3x2 grid",
+    icon: x,
+    category: "Grid",
+    description: "Three columns by two rows.",
+    props: { className: `${p} grid-cols-3 grid-rows-2 gap-space-md` },
+    children: () => b(6)
+  },
+  {
+    label: "Wide left",
+    icon: ne,
+    category: "Grid",
+    description: "Big main column on the left, sidebar on the right.",
+    props: { className: `${p} grid-cols-1 gap-space-md md:grid-cols-[2fr_1fr]` },
+    children: () => b(2)
+  },
+  {
+    label: "Wide right",
+    icon: ie,
+    category: "Grid",
+    description: "Sidebar on the left, big main column on the right.",
+    props: { className: `${p} grid-cols-1 gap-space-md md:grid-cols-[1fr_2fr]` },
+    children: () => b(2)
+  },
+  {
+    label: "Wide middle",
+    icon: x,
+    category: "Grid",
+    description: "Three columns with the middle one bigger.",
+    props: { className: `${p} grid-cols-1 gap-space-md lg:grid-cols-[1fr_2fr_1fr]` },
+    children: () => b(3)
+  }
+], Ge = [
+  ...oe,
+  ...ge,
+  ...De,
+  ...Ee,
+  ...Ce,
+  ...Te,
+  ...Me,
+  ...Se,
+  ...ze,
+  ...He
+];
+ce("Container", Ge);
+export {
+  Ge as containerPresets
+};