hazo_ui 4.9.0 → 4.10.0

package/dist/index.cjs

@@ -208,6 +208,18 @@ var require_objectWithoutPropertiesLoose = __commonJS({
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function safeHref(url) {
+  if (!url) return void 0;
+  const trimmed = url.trim();
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("http://") || lower.startsWith("https://") || lower.startsWith("mailto:")) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+    return trimmed;
+  }
+  return void 0;
+}
 function HazoContextProvider({
   correlationId,
   userId,
@@ -6767,39 +6779,47 @@ function resolve_animation_classes(open_anim = "zoom", close_anim = "zoom") {
 }
 var VARIANT_PRESETS = {
   info: {
-    header_background_color: "rgb(191, 219, 254)",
-    description_background_color: "rgb(219, 234, 254)",
-    header_text_color: "rgb(30, 58, 138)",
-    border_color: "rgb(59, 130, 246)",
-    accent_color: "rgb(59, 130, 246)",
+    header_background_color: "var(--dialog-info-bg)",
+    description_background_color: "var(--dialog-info-bg)",
+    header_text_color: "var(--dialog-info-fg)",
+    border_color: "var(--dialog-info-fg)",
+    accent_color: "var(--dialog-info-fg)",
     overlay_class_name: "bg-blue-950/50"
   },
   success: {
-    header_background_color: "rgb(187, 247, 208)",
-    description_background_color: "rgb(220, 252, 231)",
-    header_text_color: "rgb(22, 101, 52)",
-    border_color: "rgb(34, 197, 94)",
-    accent_color: "rgb(34, 197, 94)",
+    header_background_color: "var(--dialog-success-bg)",
+    description_background_color: "var(--dialog-success-bg)",
+    header_text_color: "var(--dialog-success-fg)",
+    border_color: "var(--dialog-success-fg)",
+    accent_color: "var(--dialog-success-fg)",
     overlay_class_name: "bg-green-950/50"
   },
   warning: {
-    header_background_color: "rgb(253, 230, 138)",
-    description_background_color: "rgb(254, 249, 195)",
-    header_text_color: "rgb(113, 63, 18)",
-    border_color: "rgb(234, 179, 8)",
-    accent_color: "rgb(234, 179, 8)",
+    header_background_color: "var(--dialog-warning-bg)",
+    description_background_color: "var(--dialog-warning-bg)",
+    header_text_color: "var(--dialog-warning-fg)",
+    border_color: "var(--dialog-warning-fg)",
+    accent_color: "var(--dialog-warning-fg)",
     overlay_class_name: "bg-yellow-950/50"
   },
   destructive: {
-    header_background_color: "rgb(254, 202, 202)",
-    description_background_color: "rgb(254, 226, 226)",
-    header_text_color: "rgb(127, 29, 29)",
-    border_color: "rgb(239, 68, 68)",
-    accent_color: "rgb(239, 68, 68)",
+    header_background_color: "var(--dialog-destructive-bg)",
+    description_background_color: "var(--dialog-destructive-bg)",
+    header_text_color: "var(--dialog-destructive-fg)",
+    border_color: "var(--dialog-destructive-fg)",
+    accent_color: "var(--dialog-destructive-fg)",
     overlay_class_name: "bg-red-950/50",
     action_button_variant: "destructive"
   }
 };
+var NEUTRAL_VARIANT_PRESET = {
+  header_background_color: "hsl(var(--dialog-border) / 0.12)",
+  description_background_color: "hsl(var(--dialog-border) / 0.12)",
+  header_text_color: "hsl(var(--dialog-fg))",
+  border_color: "hsl(var(--dialog-border))",
+  accent_color: "hsl(var(--dialog-border))",
+  overlay_class_name: "bg-black/50"
+};
 function HazoUiDialog({
   open,
   onOpenChange,
@@ -6808,13 +6828,13 @@ function HazoUiDialog({
   onCancel,
   title = "Action required",
   description,
-  actionButtonText = "Confirm",
+  actionButtonText: actionButtonTextProp,
   actionButtonVariant,
   cancelButtonText = "Cancel",
-  showCancelButton = true,
+  showCancelButton: showCancelButtonProp,
   showActionButton = true,
-  closeOnConfirm = false,
-  actionButtonLoading = false,
+  closeOnConfirm: closeOnConfirmProp,
+  actionButtonLoading: actionButtonLoadingProp,
   actionButtonDisabled = false,
   actionButtonIcon,
   footerContent,
@@ -6834,18 +6854,46 @@ function HazoUiDialog({
   borderColor,
   accentColor,
   headerBar = false,
-  headerBarColor = "#1e293b",
+  headerBarColor,
   className,
   contentClassName,
   overlayClassName,
   headerClassName,
   footerClassName,
-  showCloseButton = true
+  showCloseButton = true,
+  kind
 }) {
   const config = get_hazo_ui_config();
-  const variant_preset = variant !== "default" ? VARIANT_PRESETS[variant] : void 0;
+  const is_confirm_kind = kind === "confirm";
+  const is_status_kind = kind === "status";
+  const [internal_confirm_loading, set_internal_confirm_loading] = React26__namespace.useState(false);
+  const cancel_ref = React26__namespace.useRef(null);
+  const variant_preset = variant !== "default" ? VARIANT_PRESETS[variant] : is_status_kind || is_confirm_kind ? NEUTRAL_VARIANT_PRESET : void 0;
   const resolved_action_button_variant = actionButtonVariant ?? variant_preset?.action_button_variant ?? "default";
+  const showCancelButton = showCancelButtonProp ?? (is_status_kind ? false : true);
+  const closeOnConfirm = closeOnConfirmProp ?? (is_status_kind || is_confirm_kind ? true : false);
+  const actionButtonText = actionButtonTextProp ?? (is_status_kind ? "OK" : is_confirm_kind ? showCancelButton ? "Confirm" : "OK" : "Confirm");
+  const actionButtonLoading = actionButtonLoadingProp ?? (is_confirm_kind ? internal_confirm_loading : false);
   const handleConfirm = () => {
+    if (is_confirm_kind) {
+      try {
+        const result = onConfirm?.();
+        if (result instanceof Promise) {
+          if (actionButtonLoadingProp === void 0) set_internal_confirm_loading(true);
+          result.then(() => {
+            if (closeOnConfirm) onOpenChange?.(false);
+          }).catch(() => {
+          }).finally(() => {
+            if (actionButtonLoadingProp === void 0) set_internal_confirm_loading(false);
+          });
+          return;
+        }
+      } catch {
+        return;
+      }
+      if (closeOnConfirm) onOpenChange?.(false);
+      return;
+    }
     onConfirm?.();
     if (closeOnConfirm) {
       onOpenChange?.(false);
@@ -6865,12 +6913,14 @@ function HazoUiDialog({
   const finalHeaderBackgroundColor = headerBackgroundColor ?? variant_preset?.header_background_color ?? config.header_background_color;
   const finalDescriptionBgColor = descriptionBackgroundColor ?? variant_preset?.description_background_color;
   const finalHeaderTextColor = headerTextColor ?? variant_preset?.header_text_color ?? config.header_text_color;
-  const is_variant_active = variant !== "default";
+  const is_variant_active = variant !== "default" || is_status_kind;
   const has_split_header = splitHeader && !headerBar && !!finalDescriptionBgColor && !!description;
   const has_merged_variant_header = !splitHeader && is_variant_active && !headerBar && !!description;
+  const resolvedHeaderBarColor = headerBarColor ?? (variant !== "default" && variant_preset ? variant_preset.header_text_color : "var(--dialog-header-bar-bg)");
   const headerStyles = {
     ...headerBar && {
-      backgroundColor: headerBarColor,
+      backgroundColor: resolvedHeaderBarColor,
+      color: "var(--dialog-header-bar-fg)",
       paddingTop: compact ? "0.625rem" : "1.5rem",
       paddingBottom: compact ? "0.625rem" : "1.5rem",
       paddingLeft: "1.5rem",
@@ -6880,15 +6930,19 @@ function HazoUiDialog({
     ...!has_split_header && finalHeaderTextColor && { color: finalHeaderTextColor }
   };
   const titleClassName = cn(
-    "cls_dialog_title",
-    headerBar && "!text-white"
+    "cls_dialog_title"
   );
   const descriptionClassName = cn(
-    "cls_dialog_description",
-    headerBar && "!text-white/80"
+    "cls_dialog_description"
   );
   const bodyStyles = {
-    ...bodyBackgroundColor && { backgroundColor: bodyBackgroundColor }
+    ...bodyBackgroundColor && { backgroundColor: bodyBackgroundColor },
+    // kind="form" gets a comfortable body/label typography scale via the
+    // hazo_theme --dialog-body-size token. --dialog-label-size is intentionally
+    // not re-applied here: CSS custom properties inherit, so a consumer's own
+    // <label> elements inside `children` can reference var(--dialog-label-size)
+    // directly without any extra plumbing from this component.
+    ...kind === "form" && { fontSize: "var(--dialog-body-size)" }
   };
   const footerStyles = {
     ...footerBackgroundColor && { backgroundColor: footerBackgroundColor }
@@ -6912,6 +6966,86 @@ function HazoUiDialog({
     ...finalCancelTextColor && { color: finalCancelTextColor },
     ...finalCancelBorderColor && { borderColor: finalCancelBorderColor }
   };
+  if (is_confirm_kind) {
+    const top_border_color = resolved_border_color ?? "hsl(var(--dialog-border))";
+    return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DialogOverlay,
+        {
+          className: cn(
+            "cls_confirm_dialog_overlay",
+            overlayClassName ?? variant_preset?.overlay_class_name
+          ),
+          style: { backdropFilter: "blur(4px)" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        DialogPrimitive__namespace.Content,
+        {
+          className: cn(
+            "cls_confirm_dialog_content",
+            "fixed left-[50%] top-[50%] z-50",
+            "translate-x-[-50%] translate-y-[-50%]",
+            "bg-background shadow-lg",
+            "duration-200",
+            animationClasses,
+            "overflow-hidden",
+            className
+          ),
+          style: {
+            width: "min(90vw, 420px)",
+            borderRadius: "12px",
+            borderTop: `4px solid ${top_border_color}`,
+            boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
+            outline: "none"
+          },
+          onOpenAutoFocus: (e) => {
+            if ((variant === "destructive" || variant === "warning") && showCancelButton && cancel_ref.current) {
+              e.preventDefault();
+              cancel_ref.current.focus();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_confirm_dialog_body px-6 pt-7 pb-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "cls_confirm_dialog_title text-[17px] font-semibold text-foreground mb-2.5", children: title }),
+              children ? /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_confirm_dialog_children text-sm text-muted-foreground leading-relaxed", children }) }) : description ? /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { className: "cls_confirm_dialog_description text-sm text-muted-foreground leading-relaxed", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_confirm_dialog_separator border-t border-border" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_confirm_dialog_actions px-6 py-4 flex justify-end gap-3", children: [
+              showCancelButton && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  ref: cancel_ref,
+                  type: "button",
+                  className: "cls_confirm_cancel_button focus-visible:ring-0 focus-visible:ring-offset-0",
+                  variant: "outline",
+                  onClick: handleCancel,
+                  disabled: actionButtonLoading,
+                  style: cancelButtonStyles,
+                  children: cancelButtonText
+                }
+              ),
+              showActionButton && /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  type: "button",
+                  className: "cls_confirm_action_button",
+                  variant: resolved_action_button_variant,
+                  onClick: handleConfirm,
+                  disabled: actionButtonLoading || actionButtonDisabled,
+                  style: actionButtonStyles,
+                  children: [
+                    actionButtonLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                    actionButtonText
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DialogOverlay,
@@ -6986,10 +7120,17 @@ function HazoUiDialog({
                 style: headerStyles,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: titleClassName, children: title }),
-                  description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: cn(
-                    descriptionClassName,
-                    has_merged_variant_header && "italic text-xs mt-1"
-                  ), children: description })
+                  description && /* @__PURE__ */ jsxRuntime.jsx(
+                    DialogDescription,
+                    {
+                      className: cn(
+                        descriptionClassName,
+                        has_merged_variant_header && "italic text-xs mt-1"
+                      ),
+                      style: headerBar ? { opacity: 0.8 } : void 0,
+                      children: description
+                    }
+                  )
                 ]
               }
             )
@@ -7055,7 +7196,7 @@ function HazoUiDialog({
             DialogPrimitive__namespace.Close,
             {
               className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-              style: headerBar ? { color: "white" } : finalHeaderTextColor ? { color: finalHeaderTextColor } : void 0,
+              style: headerBar ? { color: "var(--dialog-header-bar-fg)" } : finalHeaderTextColor ? { color: finalHeaderTextColor } : void 0,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
@@ -7067,28 +7208,6 @@ function HazoUiDialog({
     )
   ] }) });
 }
-var CONFIRM_VARIANT_PRESETS = {
-  destructive: {
-    accent_color: "rgb(220, 38, 38)",
-    confirm_button_color: "rgb(220, 38, 38)",
-    overlay_class_name: "bg-red-950/50"
-  },
-  warning: {
-    accent_color: "rgb(245, 158, 11)",
-    confirm_button_color: "rgb(245, 158, 11)",
-    overlay_class_name: "bg-yellow-950/50"
-  },
-  info: {
-    accent_color: "rgb(37, 99, 235)",
-    confirm_button_color: "rgb(37, 99, 235)",
-    overlay_class_name: "bg-blue-950/50"
-  },
-  success: {
-    accent_color: "rgb(22, 163, 74)",
-    confirm_button_color: "rgb(22, 163, 74)",
-    overlay_class_name: "bg-green-950/50"
-  }
-};
 function HazoUiConfirmDialog({
   open,
   onOpenChange,
@@ -7101,126 +7220,37 @@ function HazoUiConfirmDialog({
   showCancelButton = true,
   onConfirm,
   onCancel,
-  loading: external_loading,
+  loading,
   disabled = false,
   accentColor,
   confirmButtonColor,
   openAnimation = "zoom",
   closeAnimation = "zoom"
 }) {
-  const [internal_loading, set_internal_loading] = React26__namespace.useState(false);
-  const config = get_hazo_ui_config();
-  const variant_preset = variant !== "default" ? CONFIRM_VARIANT_PRESETS[variant] : void 0;
-  const is_loading = external_loading ?? internal_loading;
-  const resolved_confirm_label = confirmLabel ?? (showCancelButton ? "Confirm" : "OK");
-  const resolved_accent_color = accentColor ?? variant_preset?.accent_color ?? "rgb(148, 163, 184)";
-  const resolved_confirm_button_color = confirmButtonColor ?? variant_preset?.confirm_button_color ?? config.submit_button_background_color;
-  const cancel_button_styles = {
-    ...config.cancel_button_background_color && { backgroundColor: config.cancel_button_background_color },
-    ...config.cancel_button_text_color && { color: config.cancel_button_text_color },
-    ...config.cancel_button_border_color && { borderColor: config.cancel_button_border_color }
-  };
-  const confirm_button_styles = {
-    ...resolved_confirm_button_color && {
-      backgroundColor: resolved_confirm_button_color,
-      borderColor: resolved_confirm_button_color,
-      color: "white"
-    }
-  };
-  const animation_classes = resolve_animation_classes(openAnimation, closeAnimation);
-  const handle_confirm = async () => {
-    try {
-      const result = onConfirm();
-      if (result instanceof Promise) {
-        set_internal_loading(true);
-        await result;
-      }
-      onOpenChange(false);
-    } catch {
-    } finally {
-      set_internal_loading(false);
+  const resolved_accent_color = confirmButtonColor ?? accentColor;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HazoUiDialog,
+    {
+      kind: "confirm",
+      open,
+      onOpenChange,
+      title,
+      description,
+      variant,
+      actionButtonText: confirmLabel,
+      cancelButtonText: cancelLabel,
+      showCancelButton,
+      onConfirm,
+      onCancel,
+      actionButtonLoading: loading,
+      actionButtonDisabled: disabled,
+      accentColor: resolved_accent_color,
+      openAnimation,
+      closeAnimation,
+      closeOnConfirm: true,
+      children
     }
-  };
-  const handle_cancel = () => {
-    onCancel?.();
-    onOpenChange(false);
-  };
-  const cancel_ref = React26__namespace.useRef(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DialogOverlay,
-      {
-        className: cn(
-          "cls_confirm_dialog_overlay",
-          variant_preset?.overlay_class_name
-        ),
-        style: { backdropFilter: "blur(4px)" }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
-      {
-        className: cn(
-          "cls_confirm_dialog_content",
-          "fixed left-[50%] top-[50%] z-50",
-          "translate-x-[-50%] translate-y-[-50%]",
-          "bg-background shadow-lg",
-          "duration-200",
-          animation_classes,
-          "overflow-hidden"
-        ),
-        style: {
-          width: "min(90vw, 420px)",
-          borderRadius: "12px",
-          borderTop: `4px solid ${resolved_accent_color}`,
-          boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
-          outline: "none"
-        },
-        onOpenAutoFocus: (e) => {
-          if ((variant === "destructive" || variant === "warning") && showCancelButton && cancel_ref.current) {
-            e.preventDefault();
-            cancel_ref.current.focus();
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_confirm_dialog_body px-6 pt-7 pb-5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "cls_confirm_dialog_title text-[17px] font-semibold text-foreground mb-2.5", children: title }),
-            children ? /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_confirm_dialog_children text-sm text-muted-foreground leading-relaxed", children }) }) : description ? /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { className: "cls_confirm_dialog_description text-sm text-muted-foreground leading-relaxed", children: description }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_confirm_dialog_separator border-t border-border" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_confirm_dialog_actions px-6 py-4 flex justify-end gap-3", children: [
-            showCancelButton && /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                ref: cancel_ref,
-                type: "button",
-                className: "cls_confirm_cancel_button focus-visible:ring-0 focus-visible:ring-offset-0",
-                variant: "outline",
-                onClick: handle_cancel,
-                disabled: is_loading,
-                style: cancel_button_styles,
-                children: cancelLabel
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Button,
-              {
-                type: "button",
-                className: "cls_confirm_action_button",
-                onClick: handle_confirm,
-                disabled: is_loading || disabled,
-                style: confirm_button_styles,
-                children: [
-                  is_loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-                  resolved_confirm_label
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] }) });
+  );
 }
 var Slider = React26__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SliderPrimitive__namespace.Root,
@@ -11452,6 +11482,173 @@ var ThemeToggle = React26__namespace.forwardRef(
   }
 );
 ThemeToggle.displayName = "ThemeToggle";
+function Logo({
+  logoUrl,
+  logoUrlDark,
+  appTitle,
+  href,
+  height = 28,
+  className,
+  imgClassName
+}) {
+  const alt = appTitle ?? "Logo";
+  let content = null;
+  if (logoUrl) {
+    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: logoUrl,
+          alt,
+          height,
+          style: { height },
+          className: cn("object-contain", logoUrlDark && "dark:hidden", imgClassName)
+        }
+      ),
+      logoUrlDark ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: logoUrlDark,
+          alt,
+          height,
+          style: { height },
+          className: cn("hidden object-contain dark:block", imgClassName)
+        }
+      ) : null
+    ] });
+  } else if (appTitle) {
+    content = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-navbar-fg", children: appTitle });
+  }
+  if (content === null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  const resolvedHref = safeHref(href);
+  if (resolvedHref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: resolvedHref, className: cn("inline-flex items-center gap-2", className), children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center gap-2", className), children: content });
+}
+function AppHeader({ identity, homeHref, navItems, actions, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      "aria-label": "Application header",
+      className: cn(
+        "flex w-full items-center justify-between gap-4 border-b bg-navbar text-navbar-fg border-navbar-border px-4 py-2.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Logo,
+            {
+              logoUrl: identity?.logoUrl,
+              logoUrlDark: identity?.logoUrlDark,
+              appTitle: identity?.appTitle,
+              href: homeHref
+            }
+          ),
+          navItems
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: actions })
+      ]
+    }
+  );
+}
+function AppFooter({ variant, footer, identity, className }) {
+  const cfg = footer ?? identity?.footer?.[variant];
+  if (variant === "app") {
+    const links = cfg?.columns?.[0]?.links;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "footer",
+      {
+        className: cn(
+          "flex w-full items-center justify-between gap-4 border-t bg-footer-app text-footer-app-fg border-footer-app-border px-4 py-2 text-sm",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-footer-app-fg-muted", children: cfg?.copyright }),
+          links && links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: links.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: safeHref(link.href),
+              className: "text-footer-app-fg-muted hover:text-footer-app-fg",
+              children: link.label
+            },
+            `${link.href}-${i}`
+          )) }) : null
+        ]
+      }
+    );
+  }
+  const showBrandRow = Boolean(identity?.logoUrl || identity?.appTitle);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "footer",
+    {
+      className: cn(
+        "w-full border-t bg-footer-public text-footer-public-fg border-footer-public-border px-6 py-10",
+        className
+      ),
+      children: [
+        showBrandRow ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Logo,
+          {
+            logoUrl: identity?.logoUrl,
+            logoUrlDark: identity?.logoUrlDark,
+            appTitle: identity?.appTitle
+          }
+        ) }) : null,
+        cfg?.columns && cfg.columns.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: cfg.columns.map((column, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          column.heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-footer-public-fg", children: column.heading }) : null,
+          column.links.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: safeHref(link.href),
+              className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+              children: link.label
+            },
+            `${link.href}-${i}`
+          ))
+        ] }, column.heading ?? idx)) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-footer-public-fg-muted", children: cfg?.copyright }),
+          cfg?.social ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            cfg.social.github ? /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.github),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "GitHub"
+              }
+            ) : null,
+            cfg.social.twitter ? /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.twitter),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "Twitter"
+              }
+            ) : null,
+            cfg.social.linkedin ? /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.linkedin),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "LinkedIn"
+              }
+            ) : null,
+            cfg.social.website ? /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.website),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "Website"
+              }
+            ) : null
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -11473,6 +11670,8 @@ exports.AlertDialogOverlay = AlertDialogOverlay;
 exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
+exports.AppFooter = AppFooter;
+exports.AppHeader = AppHeader;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupSeparator = ButtonGroupSeparator;
@@ -11563,6 +11762,7 @@ exports.InputAffix = InputAffix;
 exports.InverseSparkline = InverseSparkline;
 exports.Label = Label3;
 exports.LoadingTimeout = LoadingTimeout;
+exports.Logo = Logo;
 exports.MarkdownEditor = MarkdownEditor;
 exports.NotificationCountBadge = NotificationCountBadge;
 exports.NotificationItem = NotificationItem;
@@ -11641,6 +11841,7 @@ exports.parse_commands_from_text = parse_commands_from_text;
 exports.pick_x_label_indices = pick_x_label_indices;
 exports.reset_hazo_ui_config = reset_hazo_ui_config;
 exports.resolve_animation_classes = resolve_animation_classes;
+exports.safeHref = safeHref;
 exports.set_hazo_ui_config = set_hazo_ui_config;
 exports.set_logger = set_logger;
 exports.successToast = successToast;