@walkeros/explorer 1.0.1 → 2.0.1

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   loadPackageTypes,
   loadTypeLibraryFromURL,
   registerWalkerOSTypes
-} from "./chunk-VWWAIDNX.mjs";
+} from "./chunk-YKT4D7MG.mjs";
 
 // src/components/demos/MappingDemo.tsx
 import { useState as useState6, useCallback as useCallback5, useEffect as useEffect4 } from "react";
@@ -851,6 +851,7 @@ function Code({
   sticky = true,
   ide = false
 }) {
+  const [isMounted, setIsMounted] = useState3(false);
   const [monacoTheme, setMonacoTheme] = useState3("vs-light");
   const decorationsCleanupRef = useRef3(null);
   const monacoRef = useRef3(null);
@@ -888,6 +889,7 @@ function Code({
     registerDataElbStyles();
   }, []);
   const getDataTheme = useCallback2(() => {
+    if (typeof document === "undefined") return null;
     if (containerRef.current) {
       const closest = containerRef.current.closest("[data-theme]");
       if (closest) {
@@ -897,6 +899,10 @@ function Code({
     return document.documentElement.getAttribute("data-theme");
   }, []);
   useEffect2(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect2(() => {
+    if (!isMounted) return;
     const checkTheme = () => {
       const dataTheme = getDataTheme();
       const isDark = dataTheme === "dark" || dataTheme === null && window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -920,7 +926,7 @@ function Code({
       observer.disconnect();
       mediaQuery.removeEventListener("change", handleChange2);
     };
-  }, [getDataTheme]);
+  }, [isMounted, getDataTheme]);
   useEffect2(() => {
     const editor = editorRef.current;
     const container = containerRef.current;
@@ -950,7 +956,7 @@ function Code({
     registerFormatters(monaco);
     if (packages && packages.length > 0) {
       registerWalkerOSTypes(monaco);
-      const { loadPackageTypes: loadPackageTypes2 } = await import("./monaco-types-4FIH5OVX.mjs");
+      const { loadPackageTypes: loadPackageTypes2 } = await import("./monaco-types-OLSF6MIE.mjs");
       for (const pkg of packages) {
         if (pkg !== "@walkeros/core") {
           await loadPackageTypes2(monaco, { package: pkg }).catch(() => {
@@ -1936,7 +1942,6 @@ function Preview({
               config: {
                 settings: {
                   pageview: false,
-                  session: false,
                   prefix: "data-elb",
                   elb: "elb",
                   elbLayer: "elbLayer",
@@ -12547,6 +12552,8 @@ var isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever
 var isArbitraryValue = (value) => arbitraryValueRegex.test(value);
 var isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
 var isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
+var isArbitraryWeight = (value) => getIsArbitraryValue(value, isLabelWeight, isAny);
+var isArbitraryFamilyName = (value) => getIsArbitraryValue(value, isLabelFamilyName, isNever);
 var isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
 var isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
 var isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
@@ -12557,6 +12564,7 @@ var isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLab
 var isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
 var isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
 var isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
+var isArbitraryVariableWeight = (value) => getIsArbitraryVariable(value, isLabelWeight, true);
 var getIsArbitraryValue = (value, testLabel, testValue) => {
   const result = arbitraryValueRegex.exec(value);
   if (result) {
@@ -12583,6 +12591,7 @@ var isLabelSize = (label) => label === "length" || label === "size" || label ===
 var isLabelLength = (label) => label === "length";
 var isLabelNumber = (label) => label === "number";
 var isLabelFamilyName = (label) => label === "family-name";
+var isLabelWeight = (label) => label === "number" || label === "weight";
 var isLabelShadow = (label) => label === "shadow";
 var getDefaultConfig = () => {
   const themeColor = fromTheme("color");
@@ -13384,7 +13393,7 @@ var getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/font-weight
        */
       "font-weight": [{
-        font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
+        font: [themeFontWeight, isArbitraryVariableWeight, isArbitraryWeight]
       }],
       /**
        * Font Stretch
@@ -13398,7 +13407,7 @@ var getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
+        font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
       }],
       /**
        * Font Variant Numeric
@@ -16601,6 +16610,525 @@ function PropertyTable({ schema, className }) {
   ] });
 }
 
+// src/components/molecules/form-card.tsx
+import { jsx as jsx92, jsxs as jsxs69 } from "react/jsx-runtime";
+function FormCard({
+  children,
+  title,
+  subtitle,
+  footer,
+  maxWidth = "md",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs69(
+    "div",
+    {
+      className: `elb-form-card elb-form-card--${maxWidth} ${className}`.trim(),
+      children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs69("div", { className: "elb-form-card__header", children: [
+          title && /* @__PURE__ */ jsx92("h1", { className: "elb-form-card__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx92("p", { className: "elb-form-card__subtitle", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx92("div", { className: "elb-form-card__content", children }),
+        footer && /* @__PURE__ */ jsx92("div", { className: "elb-form-card__footer", children: footer })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/dropdown.tsx
+import { jsx as jsx93, jsxs as jsxs70 } from "react/jsx-runtime";
+function Dropdown({
+  trigger,
+  isOpen,
+  onToggle,
+  children,
+  align = "left",
+  ariaLabel,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs70("div", { className: `elb-dropdown ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx93(
+      "div",
+      {
+        className: "elb-dropdown__trigger",
+        onClick: onToggle,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-label": ariaLabel,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggle();
+          }
+        },
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx93(
+      "div",
+      {
+        className: `elb-dropdown__panel elb-dropdown__panel--${align}`,
+        role: "menu",
+        children
+      }
+    )
+  ] });
+}
+function DropdownItem({
+  children,
+  onClick,
+  disabled = false,
+  variant = "default",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx93(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: `elb-dropdown__item elb-dropdown__item--${variant} ${disabled ? "elb-dropdown__item--disabled" : ""} ${className}`.trim(),
+      onClick,
+      disabled,
+      children
+    }
+  );
+}
+function DropdownDivider({ className = "" }) {
+  return /* @__PURE__ */ jsx93(
+    "div",
+    {
+      className: `elb-dropdown__divider ${className}`.trim(),
+      role: "separator"
+    }
+  );
+}
+
+// src/components/atoms/form-textarea.tsx
+import { useId } from "react";
+
+// src/components/atoms/form-field.tsx
+import { jsx as jsx94, jsxs as jsxs71 } from "react/jsx-runtime";
+function FormField({
+  children,
+  label,
+  htmlFor,
+  error,
+  required,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs71(
+    "div",
+    {
+      className: `elb-form-field ${error ? "elb-form-field--error" : ""} ${className}`.trim(),
+      children: [
+        label && /* @__PURE__ */ jsxs71("label", { htmlFor, className: "elb-form-field__label", children: [
+          label,
+          required && /* @__PURE__ */ jsx94("span", { className: "elb-form-field__required", "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx94("div", { className: "elb-form-field__input", children }),
+        error && /* @__PURE__ */ jsx94("div", { className: "elb-form-field__error", role: "alert", children: error })
+      ]
+    }
+  );
+}
+
+// src/components/atoms/form-textarea.tsx
+import { jsx as jsx95 } from "react/jsx-runtime";
+function FormTextarea({
+  value,
+  onChange,
+  label,
+  rows = 5,
+  placeholder,
+  disabled = false,
+  spellCheck = true,
+  required = false,
+  error,
+  id,
+  className = ""
+}) {
+  const generatedId = useId();
+  const textareaId = id ?? generatedId;
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ jsx95(
+    FormField,
+    {
+      label,
+      htmlFor: textareaId,
+      error: errorMessage,
+      required,
+      className,
+      children: /* @__PURE__ */ jsx95(
+        "textarea",
+        {
+          id: textareaId,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          rows,
+          placeholder,
+          disabled,
+          spellCheck,
+          required,
+          className: `elb-form-textarea ${hasError ? "elb-form-textarea--error" : ""}`,
+          "aria-invalid": hasError
+        }
+      )
+    }
+  );
+}
+
+// src/components/atoms/spinner.tsx
+import { jsx as jsx96 } from "react/jsx-runtime";
+function Spinner({ size = "md", className = "" }) {
+  return /* @__PURE__ */ jsx96(
+    "span",
+    {
+      className: `elb-spinner elb-spinner--${size} ${className}`.trim(),
+      role: "status",
+      "aria-label": "Loading"
+    }
+  );
+}
+
+// src/components/atoms/submit-button.tsx
+import { Fragment as Fragment12, jsx as jsx97, jsxs as jsxs72 } from "react/jsx-runtime";
+function SubmitButton({
+  children,
+  loadingText,
+  loading = false,
+  disabled = false,
+  variant = "primary",
+  fullWidth = false,
+  type = "submit",
+  onClick,
+  className = ""
+}) {
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ jsx97(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      onClick,
+      className: `elb-submit-button elb-submit-button--${variant} ${fullWidth ? "elb-submit-button--full-width" : ""} ${loading ? "elb-submit-button--loading" : ""} ${className}`.trim(),
+      children: loading ? /* @__PURE__ */ jsxs72(Fragment12, { children: [
+        /* @__PURE__ */ jsx97(Spinner, { size: "sm", className: "elb-submit-button__spinner" }),
+        /* @__PURE__ */ jsx97("span", { children: loadingText ?? children })
+      ] }) : children
+    }
+  );
+}
+
+// src/components/atoms/alert.tsx
+import { jsx as jsx98, jsxs as jsxs73 } from "react/jsx-runtime";
+function Alert({
+  children,
+  title,
+  variant,
+  role = variant === "error" ? "alert" : "status",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs73(
+    "div",
+    {
+      className: `elb-alert elb-alert--${variant} ${className}`.trim(),
+      role,
+      children: [
+        title && /* @__PURE__ */ jsx98("div", { className: "elb-alert__title", children: title }),
+        /* @__PURE__ */ jsx98("div", { className: "elb-alert__content", children })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/config-form-card.tsx
+import { jsx as jsx99, jsxs as jsxs74 } from "react/jsx-runtime";
+function ConfigFormCard({
+  config,
+  onConfigChange,
+  onSubmit,
+  loading = false,
+  error = null,
+  title = "Configuration",
+  label = "Configuration (JSON)",
+  submitText = "Submit",
+  loadingText = "Processing...",
+  rows = 20,
+  maxWidth = "lg",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx99(FormCard, { title, maxWidth, className, children: /* @__PURE__ */ jsxs74("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx99(
+      FormTextarea,
+      {
+        label,
+        value: config,
+        onChange: onConfigChange,
+        rows,
+        disabled: loading,
+        spellCheck: false,
+        error: !!error
+      }
+    ),
+    error && /* @__PURE__ */ jsx99(Alert, { variant: "error", children: error }),
+    /* @__PURE__ */ jsx99(SubmitButton, { loading, loadingText, fullWidth: true, children: submitText })
+  ] }) });
+}
+
+// src/components/molecules/split-button.tsx
+import { useState as useState40, useRef as useRef17, useEffect as useEffect28, useCallback as useCallback19 } from "react";
+import { Fragment as Fragment13, jsx as jsx100, jsxs as jsxs75 } from "react/jsx-runtime";
+function SplitButton({
+  children,
+  onClick,
+  actions = [],
+  variant = "primary",
+  loading = false,
+  loadingText,
+  disabled = false,
+  className = ""
+}) {
+  const [open, setOpen] = useState40(false);
+  const ref = useRef17(null);
+  const isDisabled = disabled || loading;
+  const handleClickOutside = useCallback19((e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      setOpen(false);
+    }
+  }, []);
+  const handleKeyDown = useCallback19((e) => {
+    if (e.key === "Escape") setOpen(false);
+  }, []);
+  useEffect28(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [open, handleClickOutside, handleKeyDown]);
+  return /* @__PURE__ */ jsxs75(
+    "div",
+    {
+      ref,
+      className: `elb-split-button elb-split-button--${variant} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx100(
+          "button",
+          {
+            type: "button",
+            className: "elb-split-button__primary",
+            onClick,
+            disabled: isDisabled,
+            children: loading ? loadingText ?? children : children
+          }
+        ),
+        actions.length > 0 && /* @__PURE__ */ jsxs75(Fragment13, { children: [
+          /* @__PURE__ */ jsx100(
+            "button",
+            {
+              type: "button",
+              className: "elb-split-button__toggle",
+              onClick: () => setOpen(!open),
+              disabled: isDisabled,
+              "aria-label": "More actions",
+              "aria-expanded": open,
+              children: /* @__PURE__ */ jsx100(
+                "svg",
+                {
+                  className: "elb-split-button__arrow",
+                  width: "10",
+                  height: "6",
+                  viewBox: "0 0 10 6",
+                  fill: "currentColor",
+                  children: /* @__PURE__ */ jsx100(
+                    "path",
+                    {
+                      d: "M1 1l4 4 4-4",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      fill: "none"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          open && /* @__PURE__ */ jsx100("div", { className: "elb-split-button__dropdown", children: actions.map((action) => /* @__PURE__ */ jsx100(
+            "button",
+            {
+              type: "button",
+              className: "elb-split-button__action",
+              disabled: action.disabled,
+              onClick: () => {
+                setOpen(false);
+                action.onClick();
+              },
+              children: action.label
+            },
+            action.key
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/flow-selector.tsx
+import { jsx as jsx101, jsxs as jsxs76 } from "react/jsx-runtime";
+var STATUS_DOT = {
+  active: "elb-flow-selector__dot--active",
+  published: "elb-flow-selector__dot--active",
+  bundling: "elb-flow-selector__dot--deploying",
+  deploying: "elb-flow-selector__dot--deploying",
+  failed: "elb-flow-selector__dot--failed"
+};
+function FlowSelector({
+  flows,
+  selectedFlow,
+  onSelectFlow,
+  className = ""
+}) {
+  if (flows.length <= 1) return null;
+  return /* @__PURE__ */ jsx101("div", { className: `elb-flow-selector ${className}`, role: "tablist", children: flows.map((flow) => {
+    const isSelected = flow.name === selectedFlow;
+    const dotClass = flow.deploymentStatus ? STATUS_DOT[flow.deploymentStatus] ?? "" : "";
+    return /* @__PURE__ */ jsxs76(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": isSelected,
+        className: `elb-flow-selector__tab ${isSelected ? "elb-flow-selector__tab--selected" : ""}`,
+        onClick: () => onSelectFlow(flow.name),
+        children: [
+          /* @__PURE__ */ jsx101("span", { className: `elb-flow-selector__dot ${dotClass}` }),
+          /* @__PURE__ */ jsx101("span", { className: "elb-flow-selector__name", children: flow.name }),
+          flow.platform && /* @__PURE__ */ jsx101("span", { className: "elb-flow-selector__platform", children: flow.platform })
+        ]
+      },
+      flow.name
+    );
+  }) });
+}
+
+// src/components/molecules/flow-deploy-panel.tsx
+import { Fragment as Fragment14, jsx as jsx102, jsxs as jsxs77 } from "react/jsx-runtime";
+function statusLabel(status) {
+  switch (status) {
+    case "active":
+      return "Active";
+    case "published":
+      return "Published";
+    case "bundling":
+    case "deploying":
+      return "Deploying...";
+    case "failed":
+      return "Failed";
+    default:
+      return status;
+  }
+}
+function statusDotClass(status) {
+  switch (status) {
+    case "active":
+    case "published":
+      return "elb-flow-deploy-panel__dot--active";
+    case "bundling":
+    case "deploying":
+      return "elb-flow-deploy-panel__dot--deploying";
+    case "failed":
+      return "elb-flow-deploy-panel__dot--failed";
+    default:
+      return "";
+  }
+}
+function primaryLabel(deployment, flowName, multipleFlows) {
+  const name = multipleFlows ? ` "${flowName}"` : "";
+  if (!deployment) return `Deploy${name}`;
+  switch (deployment.status) {
+    case "failed":
+      return `Retry${name}`;
+    case "active":
+    case "published":
+      return `Redeploy${name}`;
+    default:
+      return `Deploy${name}`;
+  }
+}
+function FlowDeployPanel({
+  flowName,
+  platform,
+  deployment,
+  deploying = false,
+  error,
+  hasUnsavedChanges = false,
+  multipleFlows = false,
+  onDeploy,
+  onDeleteDeployment,
+  onDownloadFlow,
+  onBundle,
+  className = ""
+}) {
+  const isDeploying = deploying || deployment?.status === "bundling" || deployment?.status === "deploying";
+  const bundleExt = platform === "server" ? ".mjs" : ".js";
+  const actions = [
+    {
+      key: "download",
+      label: "Download Flow (.json)",
+      onClick: onDownloadFlow
+    },
+    { key: "bundle", label: `Bundle (${bundleExt})`, onClick: onBundle }
+  ];
+  return /* @__PURE__ */ jsxs77("div", { className: `elb-flow-deploy-panel ${className}`, children: [
+    /* @__PURE__ */ jsx102("div", { className: "elb-flow-deploy-panel__status", children: deployment ? /* @__PURE__ */ jsxs77(Fragment14, { children: [
+      /* @__PURE__ */ jsx102(
+        "span",
+        {
+          className: `elb-flow-deploy-panel__dot ${statusDotClass(deployment.status)}`
+        }
+      ),
+      /* @__PURE__ */ jsx102("span", { className: "elb-flow-deploy-panel__status-text", children: statusLabel(deployment.status) }),
+      deployment.createdAt && /* @__PURE__ */ jsx102("span", { className: "elb-flow-deploy-panel__time", children: new Date(deployment.createdAt).toLocaleString() })
+    ] }) : /* @__PURE__ */ jsxs77(Fragment14, { children: [
+      /* @__PURE__ */ jsx102("span", { className: "elb-flow-deploy-panel__dot" }),
+      /* @__PURE__ */ jsx102("span", { className: "elb-flow-deploy-panel__status-text", children: "Not deployed" })
+    ] }) }),
+    hasUnsavedChanges && deployment && (deployment.status === "active" || deployment.status === "published") && /* @__PURE__ */ jsx102("div", { className: "elb-flow-deploy-panel__warning", children: "Config changed since last deploy" }),
+    deployment?.publicUrl && /* @__PURE__ */ jsx102("div", { className: "elb-flow-deploy-panel__endpoint", children: /* @__PURE__ */ jsx102("code", { className: "elb-flow-deploy-panel__url", children: deployment.publicUrl }) }),
+    deployment?.containerUrl && /* @__PURE__ */ jsx102("div", { className: "elb-flow-deploy-panel__endpoint", children: /* @__PURE__ */ jsx102("code", { className: "elb-flow-deploy-panel__url", children: deployment.containerUrl }) }),
+    (error || deployment?.errorMessage) && /* @__PURE__ */ jsx102("div", { className: "elb-flow-deploy-panel__error", children: error || deployment?.errorMessage }),
+    /* @__PURE__ */ jsxs77("div", { className: "elb-flow-deploy-panel__actions", children: [
+      /* @__PURE__ */ jsx102(
+        SplitButton,
+        {
+          onClick: onDeploy,
+          actions,
+          loading: isDeploying,
+          loadingText: "Deploying...",
+          disabled: isDeploying,
+          children: primaryLabel(deployment, flowName, multipleFlows)
+        }
+      ),
+      deployment && deployment.status !== "bundling" && deployment.status !== "deploying" && /* @__PURE__ */ jsx102(
+        "button",
+        {
+          type: "button",
+          className: "elb-flow-deploy-panel__delete",
+          onClick: onDeleteDeployment,
+          children: "Delete deployment"
+        }
+      )
+    ] })
+  ] });
+}
+
 // src/schemas/config-structures/destination-config.ts
 var DESTINATION_CONFIG_STRUCTURE = {
   type: "object",
@@ -16687,13 +17215,13 @@ var DESTINATION_CONFIG_STRUCTURE = {
 };
 
 // src/components/atoms/footer.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 function Footer({ children, className = "" }) {
-  return /* @__PURE__ */ jsx92("div", { className: `elb-explorer-footer ${className}`, children });
+  return /* @__PURE__ */ jsx103("div", { className: `elb-explorer-footer ${className}`, children });
 }
 
 // src/components/atoms/button-link.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 function ButtonLink({
   variant = "default",
   size = "md",
@@ -16706,9 +17234,9 @@ function ButtonLink({
   const baseClass = "elb-button-link";
   const classes = `${baseClass} ${baseClass}-${variant} ${baseClass}-${size} ${className}`.trim();
   if (href && !disabled) {
-    return /* @__PURE__ */ jsx93("a", { href, className: classes, children });
+    return /* @__PURE__ */ jsx104("a", { href, className: classes, children });
   }
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx104(
     "button",
     {
       type: "button",
@@ -16721,21 +17249,70 @@ function ButtonLink({
 }
 
 // src/components/atoms/panel-hints.tsx
-import { jsx as jsx94, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs78 } from "react/jsx-runtime";
 function PanelHints({
   title = "Common patterns",
   hints,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs69("div", { className: `elb-panel-hints ${className}`, children: [
-    title && /* @__PURE__ */ jsx94("div", { className: "elb-panel-hints-title", children: title }),
-    /* @__PURE__ */ jsx94("ul", { className: "elb-panel-hints-list", children: hints.map((hint, index) => /* @__PURE__ */ jsxs69("li", { className: "elb-panel-hints-item", children: [
-      /* @__PURE__ */ jsx94("code", { className: "elb-panel-hints-code", children: hint.code }),
-      /* @__PURE__ */ jsx94("span", { className: "elb-panel-hints-desc", children: hint.description })
+  return /* @__PURE__ */ jsxs78("div", { className: `elb-panel-hints ${className}`, children: [
+    title && /* @__PURE__ */ jsx105("div", { className: "elb-panel-hints-title", children: title }),
+    /* @__PURE__ */ jsx105("ul", { className: "elb-panel-hints-list", children: hints.map((hint, index) => /* @__PURE__ */ jsxs78("li", { className: "elb-panel-hints-item", children: [
+      /* @__PURE__ */ jsx105("code", { className: "elb-panel-hints-code", children: hint.code }),
+      /* @__PURE__ */ jsx105("span", { className: "elb-panel-hints-desc", children: hint.description })
     ] }, index)) })
   ] });
 }
 
+// src/components/atoms/form-input.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx106 } from "react/jsx-runtime";
+function FormInput({
+  value,
+  onChange,
+  label,
+  type = "text",
+  placeholder,
+  disabled = false,
+  autoFocus = false,
+  autoComplete,
+  required = false,
+  error,
+  id,
+  className = ""
+}) {
+  const generatedId = useId2();
+  const inputId = id ?? generatedId;
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ jsx106(
+    FormField,
+    {
+      label,
+      htmlFor: inputId,
+      error: errorMessage,
+      required,
+      className,
+      children: /* @__PURE__ */ jsx106(
+        "input",
+        {
+          id: inputId,
+          type,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          placeholder,
+          disabled,
+          autoFocus,
+          autoComplete,
+          required,
+          className: `elb-form-input ${hasError ? "elb-form-input--error" : ""}`,
+          "aria-invalid": hasError
+        }
+      )
+    }
+  );
+}
+
 // src/components/atoms/icons/icons.tsx
 addIcon("walkeros:piwik-pro", {
   body: '<g fill="none" fill-rule="evenodd"><path fill="#231F20" d="M0 0h90v90H0z"/><path d="M50.792 57.21v.044H37.99v8.675c0 3.38-2.652 6.07-6.006 6.07a5.917 5.917 0 0 1-4.243-1.77 6.073 6.073 0 0 1-1.74-4.3v-38.88C26 23.67 28.65 21 31.983 21H50.79v.022c9.58.4 17.209 8.341 17.209 18.104 0 9.764-7.628 17.704-17.209 18.083h.001Zm-2.148-25.29H37.99v14.57h10.872c3.88-.112 6.993-3.337 6.993-7.274a7.347 7.347 0 0 0-2.114-5.16 7.16 7.16 0 0 0-5.098-2.134Z" fill="#FFF" fill-rule="nonzero"/></g>',
@@ -16744,12 +17321,12 @@ addIcon("walkeros:piwik-pro", {
 });
 
 // node_modules/@mdx-js/react/lib/index.js
-import React25 from "react";
+import React28 from "react";
 var emptyComponents = {};
-var MDXContext = React25.createContext(emptyComponents);
+var MDXContext = React28.createContext(emptyComponents);
 function useMDXComponents(components) {
-  const contextComponents = React25.useContext(MDXContext);
-  return React25.useMemo(
+  const contextComponents = React28.useContext(MDXContext);
+  return React28.useMemo(
     function() {
       if (typeof components === "function") {
         return components(contextComponents);
@@ -16766,7 +17343,7 @@ function MDXProvider(properties) {
   } else {
     allComponents = useMDXComponents(properties.components);
   }
-  return React25.createElement(
+  return React28.createElement(
     MDXContext.Provider,
     { value: allComponents },
     properties.children
@@ -16775,7 +17352,7 @@ function MDXProvider(properties) {
 
 // src/components/atoms/mdx-code.tsx
 import { Children } from "react";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var MDXCode = ({
   className,
   children
@@ -16789,7 +17366,7 @@ var MDXCode = ({
     return false;
   });
   if (!hasClassName || !hasNewlines) {
-    return /* @__PURE__ */ jsx95("code", { className: "elb-code-inline", children });
+    return /* @__PURE__ */ jsx107("code", { className: "elb-code-inline", children });
   }
   const mdxLanguage = className.replace(/^language-/, "");
   const languageMap = {
@@ -16804,7 +17381,7 @@ var MDXCode = ({
   };
   const monacoLanguage = languageMap[mdxLanguage] || mdxLanguage;
   const code = childrenArray.map((child) => typeof child === "string" ? child : "").join("").trim();
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx107(
     CodeBox,
     {
       code,
@@ -16818,7 +17395,7 @@ var MDXCode = ({
 };
 
 // src/providers/MDXProvider.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var MDXProvider2 = ({ children }) => {
   const components = {
     // Markdown element mappings
@@ -16830,9 +17407,53 @@ var MDXProvider2 = ({ children }) => {
     DestinationInitDemo,
     DestinationDemo
   };
-  return /* @__PURE__ */ jsx96(MDXProvider, { components, children });
+  return /* @__PURE__ */ jsx108(MDXProvider, { components, children });
 };
+
+// src/hooks/useDropdown.ts
+import { useState as useState41, useRef as useRef18, useEffect as useEffect29, useCallback as useCallback20 } from "react";
+function useDropdown() {
+  const [isOpen, setIsOpen] = useState41(false);
+  const containerRef = useRef18(null);
+  const toggle = useCallback20(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const open = useCallback20(() => {
+    setIsOpen(true);
+  }, []);
+  const close = useCallback20(() => {
+    setIsOpen(false);
+  }, []);
+  useEffect29(() => {
+    if (!isOpen) return;
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  useEffect29(() => {
+    if (!isOpen) return;
+    function handleEscape(event) {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  return {
+    isOpen,
+    toggle,
+    open,
+    close,
+    containerRef
+  };
+}
 export {
+  Alert,
   ArchitectureFlow,
   Box,
   BrowserBox,
@@ -16844,13 +17465,23 @@ export {
   CodeSnippet,
   CollectorBox,
   ConfigEditor,
+  ConfigFormCard,
   DESTINATION_CONFIG_STRUCTURE,
   DestinationDemo,
   DestinationInitDemo as DestinationInit,
   DestinationInitDemo,
   DestinationDemo as DestinationPush,
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
+  FlowDeployPanel,
   FlowMap,
+  FlowSelector,
   Footer,
+  FormCard,
+  FormField,
+  FormInput,
+  FormTextarea,
   Grid,
   Header,
   Icon,
@@ -16866,6 +17497,9 @@ export {
   Preview,
   PromotionPlayground,
   PropertyTable,
+  Spinner,
+  SplitButton,
+  SubmitButton,
   captureDestinationPush,
   cn,
   createCaptureFn,
@@ -16882,6 +17516,7 @@ export {
   registerAllThemes,
   registerLighthouseTheme,
   registerPalenightTheme,
-  registerWalkerOSTypes
+  registerWalkerOSTypes,
+  useDropdown
 };
 //# sourceMappingURL=index.mjs.map