/* @ds-bundle: {"format":3,"namespace":"GenesisDesignSystem_5b00ad","components":[{"name":"Button","sourcePath":"components/buttons/Button.jsx"},{"name":"IconButton","sourcePath":"components/buttons/IconButton.jsx"},{"name":"Avatar","sourcePath":"components/data-display/Avatar.jsx"},{"name":"Badge","sourcePath":"components/data-display/Badge.jsx"},{"name":"Card","sourcePath":"components/data-display/Card.jsx"},{"name":"KitCard","sourcePath":"components/data-display/KitCard.jsx"},{"name":"Tag","sourcePath":"components/data-display/Tag.jsx"},{"name":"Dialog","sourcePath":"components/feedback/Dialog.jsx"},{"name":"Toast","sourcePath":"components/feedback/Toast.jsx"},{"name":"Checkbox","sourcePath":"components/forms/Checkbox.jsx"},{"name":"Input","sourcePath":"components/forms/Input.jsx"},{"name":"SearchBar","sourcePath":"components/forms/SearchBar.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"Tabs","sourcePath":"components/navigation/Tabs.jsx"}],"sourceHashes":{"components/buttons/Button.jsx":"73f17c6a28e3","components/buttons/IconButton.jsx":"ccdc939e720c","components/data-display/Avatar.jsx":"81dd1b37002a","components/data-display/Badge.jsx":"4597befe03cc","components/data-display/Card.jsx":"de8cca144eab","components/data-display/KitCard.jsx":"1061003e8510","components/data-display/Tag.jsx":"f48d333bb5c1","components/feedback/Dialog.jsx":"bb90e41551bd","components/feedback/Toast.jsx":"4f9cb3135b44","components/forms/Checkbox.jsx":"6d5a679421fd","components/forms/Input.jsx":"03b1536bba7a","components/forms/SearchBar.jsx":"cddfcef8b0aa","components/forms/Select.jsx":"f5ca595ca182","components/forms/Switch.jsx":"5812d00d2537","components/navigation/Tabs.jsx":"607cfdacc34e","ui_kits/genesis/app.jsx":"42d10cf4d69c","ui_kits/genesis/data.js":"e50688c0fe84","ui_kits/genesis/primitives.jsx":"1d10146763cb","ui_kits/genesis/screens.jsx":"fbd4d0679c1d","ui_kits/genesis/upload.jsx":"d7041f85c7b4"},"inlinedExternals":[],"unexposedExports":[]} */

(() => {

const __ds_ns = (window.GenesisDesignSystem_5b00ad = window.GenesisDesignSystem_5b00ad || {});

const __ds_scope = {};

(__ds_ns.__errors = __ds_ns.__errors || []);

// components/buttons/Button.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Button — editorial, restrained. One primary per section.
 * Variants: primary | secondary | ghost | destructive
 * Sizes:    sm (32) | md (38) | lg (44)
 */
function Button({
  variant = "primary",
  size = "md",
  disabled = false,
  leadingIcon = null,
  trailingIcon = null,
  fullWidth = false,
  type = "button",
  href,
  onClick,
  children,
  style,
  ...rest
}) {
  const sizes = {
    sm: {
      height: 32,
      padding: "0 12px",
      font: "13px"
    },
    md: {
      height: 38,
      padding: "0 16px",
      font: "14px"
    },
    lg: {
      height: 44,
      padding: "0 24px",
      font: "15px"
    }
  };
  const s = sizes[size] || sizes.md;
  const base = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "8px",
    height: s.height,
    padding: s.padding,
    width: fullWidth ? "100%" : "auto",
    fontFamily: "var(--font-body)",
    fontSize: s.font,
    fontWeight: 500,
    lineHeight: 1,
    borderRadius: "var(--radius-sm)",
    border: "1px solid transparent",
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.5 : 1,
    transition: "transform var(--duration-fast) var(--ease-standard), background var(--duration-base), box-shadow var(--duration-base), border-color var(--duration-base)",
    whiteSpace: "nowrap",
    userSelect: "none",
    ...style
  };
  const variants = {
    primary: {
      background: "var(--primary)",
      color: "var(--text-on-primary)",
      borderColor: "var(--primary)"
    },
    secondary: {
      background: "var(--surface)",
      color: "var(--text-primary)",
      borderColor: "var(--border-strong)"
    },
    ghost: {
      background: "transparent",
      color: "var(--text-secondary)",
      borderColor: "transparent"
    },
    destructive: {
      background: "transparent",
      color: "var(--color-error)",
      borderColor: "var(--color-error)"
    }
  };
  const [hover, setHover] = React.useState(false);
  const [active, setActive] = React.useState(false);
  const hoverStyle = !disabled && hover ? {
    primary: {
      background: "var(--primary-hover)",
      borderColor: "var(--primary-hover)",
      boxShadow: "var(--shadow-primary-hover)"
    },
    secondary: {
      background: "var(--surface-alt)"
    },
    ghost: {
      background: "var(--surface-alt)",
      color: "var(--text-primary)"
    },
    destructive: {
      background: "var(--color-error-50)"
    }
  }[variant] : {};
  const lift = !disabled && hover && !active ? {
    transform: "translateY(-1px)"
  } : {};
  const props = {
    style: {
      ...base,
      ...variants[variant],
      ...hoverStyle,
      ...lift
    },
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => {
      setHover(false);
      setActive(false);
    },
    onMouseDown: () => setActive(true),
    onMouseUp: () => setActive(false),
    onClick: disabled ? undefined : onClick,
    "aria-disabled": disabled,
    ...rest
  };
  const content = /*#__PURE__*/React.createElement(React.Fragment, null, leadingIcon, children, trailingIcon);
  if (href && !disabled) {
    return /*#__PURE__*/React.createElement("a", _extends({
      href: href
    }, props), content);
  }
  return /*#__PURE__*/React.createElement("button", _extends({
    type: type,
    disabled: disabled
  }, props), content);
}
Object.assign(__ds_scope, { Button });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/buttons/Button.jsx", error: String((e && e.message) || e) }); }

// components/buttons/IconButton.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis IconButton — square button for a single icon (toolbars, nav).
 * Variants: ghost | secondary | primary.  Sizes: sm (32) | md (38) | lg (44).
 */
function IconButton({
  variant = "ghost",
  size = "md",
  disabled = false,
  label,
  onClick,
  children,
  style,
  ...rest
}) {
  const dim = {
    sm: 32,
    md: 38,
    lg: 44
  }[size] || 38;
  const [hover, setHover] = React.useState(false);
  const variants = {
    ghost: {
      background: "transparent",
      color: "var(--text-secondary)",
      border: "1px solid transparent"
    },
    secondary: {
      background: "var(--surface)",
      color: "var(--text-primary)",
      border: "1px solid var(--border-strong)"
    },
    primary: {
      background: "var(--primary)",
      color: "var(--text-on-primary)",
      border: "1px solid var(--primary)"
    }
  };
  const hoverStyle = !disabled && hover ? {
    ghost: {
      background: "var(--surface-alt)",
      color: "var(--text-primary)"
    },
    secondary: {
      background: "var(--surface-alt)"
    },
    primary: {
      background: "var(--primary-hover)",
      borderColor: "var(--primary-hover)"
    }
  }[variant] : {};
  return /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    "aria-label": label,
    title: label,
    disabled: disabled,
    onClick: disabled ? undefined : onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: dim,
      height: dim,
      borderRadius: "var(--radius-sm)",
      cursor: disabled ? "not-allowed" : "pointer",
      opacity: disabled ? 0.5 : 1,
      transition: "background var(--duration-base), border-color var(--duration-base), color var(--duration-base)",
      ...variants[variant],
      ...hoverStyle,
      ...style
    }
  }, rest), children);
}
Object.assign(__ds_scope, { IconButton });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/buttons/IconButton.jsx", error: String((e && e.message) || e) }); }

// components/data-display/Avatar.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Avatar — rounded-full image or initials. Sizes sm/md/lg.
 */
function Avatar({
  src,
  name = "",
  size = "md",
  style,
  ...rest
}) {
  const dim = {
    xs: 20,
    sm: 24,
    md: 32,
    lg: 44
  }[size] || 32;
  const initials = name.split(" ").map(n => n[0]).slice(0, 2).join("").toUpperCase();
  return /*#__PURE__*/React.createElement("span", _extends({
    title: name,
    style: {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: dim,
      height: dim,
      flex: "none",
      borderRadius: "var(--radius-full)",
      overflow: "hidden",
      background: src ? "transparent" : "var(--primary-tint)",
      color: "var(--primary-hover)",
      fontFamily: "var(--font-body)",
      fontSize: dim * 0.4,
      fontWeight: 600,
      border: "1px solid var(--border)",
      ...style
    }
  }, rest), src ? /*#__PURE__*/React.createElement("img", {
    src: src,
    alt: name,
    style: {
      width: "100%",
      height: "100%",
      objectFit: "cover"
    }
  }) : initials);
}
Object.assign(__ds_scope, { Avatar });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Avatar.jsx", error: String((e && e.message) || e) }); }

// components/data-display/Badge.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Badge — semantic status pill with a leading dot.
 * status: published (green) | pending (yellow) | rejected (red) | neutral | info
 */
function Badge({
  status = "neutral",
  dot = true,
  children,
  style,
  ...rest
}) {
  const map = {
    published: {
      bg: "var(--color-success-50)",
      fg: "#0a7a55",
      dot: "var(--color-success)"
    },
    pending: {
      bg: "var(--color-warning-50)",
      fg: "#a86a06",
      dot: "var(--color-warning)"
    },
    rejected: {
      bg: "var(--color-error-50)",
      fg: "#c2342f",
      dot: "var(--color-error)"
    },
    info: {
      bg: "var(--primary-tint)",
      fg: "var(--primary-hover)",
      dot: "var(--primary)"
    },
    neutral: {
      bg: "var(--color-gray-100)",
      fg: "var(--color-gray-600)",
      dot: "var(--text-muted)"
    }
  };
  const c = map[status] || map.neutral;
  return /*#__PURE__*/React.createElement("span", _extends({
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      padding: "4px 10px",
      fontFamily: "var(--font-body)",
      fontSize: 12,
      fontWeight: 500,
      lineHeight: 1.4,
      borderRadius: "var(--radius-full)",
      background: c.bg,
      color: c.fg,
      ...style
    }
  }, rest), dot && /*#__PURE__*/React.createElement("span", {
    style: {
      width: 7,
      height: 7,
      borderRadius: "50%",
      background: c.dot,
      flex: "none"
    }
  }), children);
}
Object.assign(__ds_scope, { Badge });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Badge.jsx", error: String((e && e.message) || e) }); }

// components/data-display/Card.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Card — white surface, 1px border, 12px radius. Flat at rest,
 * lifts 2px with a soft shadow on hover when `interactive`.
 */
function Card({
  interactive = false,
  padding = 20,
  onClick,
  children,
  style,
  ...rest
}) {
  const [hover, setHover] = React.useState(false);
  return /*#__PURE__*/React.createElement("div", _extends({
    onClick: onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)",
      overflow: "hidden",
      padding,
      cursor: interactive ? "pointer" : "default",
      transform: interactive && hover ? "translateY(-2px)" : "none",
      boxShadow: interactive && hover ? "var(--shadow-card-hover)" : "none",
      transition: "transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base)",
      ...style
    }
  }, rest), children);
}
Object.assign(__ds_scope, { Card });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Card.jsx", error: String((e && e.message) || e) }); }

// components/data-display/Tag.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Tag — pill filter chip. gray by default, indigo when active.
 */
function Tag({
  active = false,
  onClick,
  children,
  style,
  ...rest
}) {
  const clickable = !!onClick;
  return /*#__PURE__*/React.createElement("span", _extends({
    onClick: onClick,
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      padding: "4px 12px",
      fontFamily: "var(--font-body)",
      fontSize: 12,
      fontWeight: 500,
      lineHeight: 1.5,
      borderRadius: "var(--radius-full)",
      background: active ? "var(--primary)" : "var(--color-gray-100)",
      color: active ? "var(--text-on-primary)" : "var(--color-gray-600)",
      cursor: clickable ? "pointer" : "default",
      userSelect: "none",
      transition: "background var(--duration-base), color var(--duration-base)",
      ...style
    }
  }, rest), children);
}
Object.assign(__ds_scope, { Tag });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Tag.jsx", error: String((e && e.message) || e) }); }

// components/data-display/KitCard.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis KitCard — the signature gallery card. 200px preview area on top,
 * content below: name, author avatar, tags, and download/like stats.
 * Lifts 2px with soft shadow on hover.
 */
function KitCard({
  name,
  description,
  author = {},
  cover,
  accent = "var(--surface-alt)",
  tags = [],
  downloads,
  likes,
  onClick,
  style,
  ...rest
}) {
  const [hover, setHover] = React.useState(false);
  const fmt = n => n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, "") + "k" : String(n);
  return /*#__PURE__*/React.createElement("div", _extends({
    onClick: onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)",
      overflow: "hidden",
      cursor: "pointer",
      transform: hover ? "translateY(-2px)" : "none",
      boxShadow: hover ? "var(--shadow-card-hover)" : "none",
      transition: "transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base)",
      display: "flex",
      flexDirection: "column",
      ...style
    }
  }, rest), /*#__PURE__*/React.createElement("div", {
    style: {
      height: 200,
      background: cover ? "var(--surface-alt)" : accent,
      backgroundImage: cover ? `url(${cover})` : "radial-gradient(var(--border-strong) 1px, transparent 1px)",
      backgroundSize: cover ? "cover" : "16px 16px",
      backgroundPosition: "center",
      borderBottom: "1px solid var(--border)",
      position: "relative"
    }
  }, !cover && /*#__PURE__*/React.createElement("span", {
    style: {
      position: "absolute",
      inset: 0,
      display: "grid",
      placeItems: "center",
      fontFamily: "var(--font-display)",
      fontSize: 40,
      fontWeight: 700,
      letterSpacing: "-0.04em",
      color: "var(--text-muted)"
    }
  }, name ? name[0] : "·")), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 16,
      display: "flex",
      flexDirection: "column",
      gap: 12,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 17,
      fontWeight: 600,
      letterSpacing: "-0.02em",
      color: "var(--text-primary)"
    }
  }, name), description && /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      color: "var(--text-secondary)",
      lineHeight: 1.45,
      marginTop: 4
    }
  }, description)), tags.length > 0 && /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 6,
      flexWrap: "wrap"
    }
  }, tags.map(t => /*#__PURE__*/React.createElement(__ds_scope.Tag, {
    key: t
  }, t))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      marginTop: "auto",
      paddingTop: 4
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 8
    }
  }, /*#__PURE__*/React.createElement(__ds_scope.Avatar, {
    src: author.avatar,
    name: author.name,
    size: "sm"
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 13,
      color: "var(--text-secondary)",
      fontWeight: 500
    }
  }, author.name)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 12,
      color: "var(--text-muted)",
      fontSize: 12
    }
  }, downloads != null && /*#__PURE__*/React.createElement("span", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 4
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "13",
    height: "13",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M12 3v12m0 0 4-4m-4 4-4-4M5 21h14"
  })), fmt(downloads)), likes != null && /*#__PURE__*/React.createElement("span", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 4
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "13",
    height: "13",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 21l8.8-8.3a5 5 0 0 0 0-7.1Z"
  })), fmt(likes))))));
}
Object.assign(__ds_scope, { KitCard });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/KitCard.jsx", error: String((e && e.message) || e) }); }

// components/feedback/Dialog.jsx
try { (() => {
/**
 * Genesis Dialog — centered modal with backdrop + shadow-lg. Controlled via `open`.
 */
function Dialog({
  open = false,
  title,
  description,
  onClose,
  footer,
  width = 440,
  children
}) {
  if (!open) return null;
  return /*#__PURE__*/React.createElement("div", {
    onClick: onClose,
    style: {
      position: "fixed",
      inset: 0,
      background: "rgba(10,10,10,0.32)",
      backdropFilter: "blur(2px)",
      display: "grid",
      placeItems: "center",
      padding: 24,
      zIndex: 1000
    }
  }, /*#__PURE__*/React.createElement("div", {
    role: "dialog",
    "aria-modal": "true",
    onClick: e => e.stopPropagation(),
    style: {
      width,
      maxWidth: "100%",
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)",
      boxShadow: "var(--shadow-dialog)",
      overflow: "hidden"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "20px 24px 0"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "flex-start",
      justifyContent: "space-between",
      gap: 12
    }
  }, /*#__PURE__*/React.createElement("h3", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 19,
      fontWeight: 600,
      letterSpacing: "-0.02em",
      color: "var(--text-primary)"
    }
  }, title), /*#__PURE__*/React.createElement("button", {
    onClick: onClose,
    "aria-label": "Close",
    style: {
      border: "none",
      background: "transparent",
      cursor: "pointer",
      color: "var(--text-muted)",
      padding: 4,
      marginTop: -2,
      lineHeight: 0
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "18",
    height: "18",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2",
    strokeLinecap: "round"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M18 6 6 18M6 6l12 12"
  })))), description && /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 14,
      color: "var(--text-secondary)",
      lineHeight: 1.5,
      margin: "8px 0 0"
    }
  }, description)), children && /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "16px 24px 0"
    }
  }, children), footer && /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      justifyContent: "flex-end",
      gap: 10,
      padding: "20px 24px 24px",
      marginTop: 8
    }
  }, footer)));
}
Object.assign(__ds_scope, { Dialog });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/feedback/Dialog.jsx", error: String((e && e.message) || e) }); }

// components/feedback/Toast.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Toast — compact notification with semantic accent + icon.
 * variant: success | error | info | neutral
 */
function Toast({
  variant = "neutral",
  title,
  message,
  onClose,
  style,
  ...rest
}) {
  const map = {
    success: {
      accent: "var(--color-success)",
      icon: /*#__PURE__*/React.createElement("path", {
        d: "M20 6 9 17l-5-5"
      })
    },
    error: {
      accent: "var(--color-error)",
      icon: /*#__PURE__*/React.createElement("path", {
        d: "M18 6 6 18M6 6l12 12"
      })
    },
    info: {
      accent: "var(--primary)",
      icon: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
        d: "M12 16v-5"
      }), /*#__PURE__*/React.createElement("path", {
        d: "M12 8h.01"
      }))
    },
    neutral: {
      accent: "var(--text-secondary)",
      icon: /*#__PURE__*/React.createElement("path", {
        d: "M12 16v-5M12 8h.01"
      })
    }
  };
  const c = map[variant] || map.neutral;
  return /*#__PURE__*/React.createElement("div", _extends({
    role: "status",
    style: {
      display: "flex",
      alignItems: "flex-start",
      gap: 12,
      width: 360,
      maxWidth: "100%",
      padding: "12px 14px",
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-md)",
      boxShadow: "var(--shadow-lg)",
      ...style
    }
  }, rest), /*#__PURE__*/React.createElement("span", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: 22,
      height: 22,
      borderRadius: "50%",
      flex: "none",
      background: c.accent,
      color: "#fff",
      marginTop: 1
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "13",
    height: "13",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2.4",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, c.icon)), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      minWidth: 0
    }
  }, title && /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: "var(--font-body)",
      fontSize: 14,
      fontWeight: 600,
      color: "var(--text-primary)"
    }
  }, title), message && /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      color: "var(--text-secondary)",
      lineHeight: 1.45,
      marginTop: title ? 2 : 0
    }
  }, message)), onClose && /*#__PURE__*/React.createElement("button", {
    onClick: onClose,
    "aria-label": "Dismiss",
    style: {
      border: "none",
      background: "transparent",
      cursor: "pointer",
      color: "var(--text-muted)",
      padding: 2,
      lineHeight: 0
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "15",
    height: "15",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2",
    strokeLinecap: "round"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M18 6 6 18M6 6l12 12"
  }))));
}
Object.assign(__ds_scope, { Toast });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/feedback/Toast.jsx", error: String((e && e.message) || e) }); }

// components/forms/Checkbox.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Checkbox — 20px rounded, indigo when checked with white check.
 */
function Checkbox({
  checked,
  defaultChecked = false,
  disabled = false,
  onChange,
  label,
  ...rest
}) {
  const isControlled = checked !== undefined;
  const [internal, setInternal] = React.useState(defaultChecked);
  const on = isControlled ? checked : internal;
  const toggle = () => {
    if (disabled) return;
    if (!isControlled) setInternal(!on);
    onChange && onChange(!on);
  };
  const box = /*#__PURE__*/React.createElement("span", _extends({
    onClick: toggle,
    role: "checkbox",
    "aria-checked": on,
    style: {
      width: 20,
      height: 20,
      flex: "none",
      borderRadius: 6,
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      background: on ? "var(--primary)" : "var(--surface)",
      border: on ? "1px solid var(--primary)" : "1px solid var(--border-strong)",
      cursor: disabled ? "not-allowed" : "pointer",
      opacity: disabled ? 0.5 : 1,
      transition: "background var(--duration-base), border-color var(--duration-base)"
    }
  }, rest), on && /*#__PURE__*/React.createElement("svg", {
    width: "12",
    height: "12",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "#fff",
    strokeWidth: "3.2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M20 6 9 17l-5-5"
  })));
  if (!label) return box;
  return /*#__PURE__*/React.createElement("label", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      cursor: disabled ? "not-allowed" : "pointer"
    }
  }, box, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-body)",
      fontSize: 14,
      color: "var(--text-primary)"
    }
  }, label));
}
Object.assign(__ds_scope, { Checkbox });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Checkbox.jsx", error: String((e && e.message) || e) }); }

// components/forms/Input.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Input — 1px border, indigo focus ring, optional error / icon.
 */
function Input({
  type = "text",
  size = "md",
  value,
  defaultValue,
  placeholder,
  disabled = false,
  invalid = false,
  leadingIcon = null,
  onChange,
  style,
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  const pad = size === "sm" ? "8px 12px" : "10px 14px";
  const borderColor = invalid ? "var(--color-error)" : focus ? "var(--primary)" : "var(--border-strong)";
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      alignItems: "center",
      width: "100%",
      ...style
    }
  }, leadingIcon && /*#__PURE__*/React.createElement("span", {
    style: {
      position: "absolute",
      left: 12,
      display: "inline-flex",
      color: "var(--text-muted)",
      pointerEvents: "none"
    }
  }, leadingIcon), /*#__PURE__*/React.createElement("input", _extends({
    type: type,
    value: value,
    defaultValue: defaultValue,
    placeholder: placeholder,
    disabled: disabled,
    onChange: onChange,
    onFocus: () => setFocus(true),
    onBlur: () => setFocus(false),
    style: {
      width: "100%",
      fontFamily: "var(--font-body)",
      fontSize: "14px",
      color: "var(--text-primary)",
      background: disabled ? "var(--surface-alt)" : "var(--surface)",
      border: `1px solid ${borderColor}`,
      borderRadius: "var(--radius-sm)",
      padding: leadingIcon ? "10px 14px 10px 36px" : pad,
      outline: "none",
      boxShadow: focus && !invalid ? "var(--ring-focus)" : invalid && focus ? "0 0 0 3px var(--color-error-50)" : "none",
      transition: "border-color var(--duration-base), box-shadow var(--duration-base)",
      opacity: disabled ? 0.6 : 1
    }
  }, rest)));
}
Object.assign(__ds_scope, { Input });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Input.jsx", error: String((e && e.message) || e) }); }

// components/forms/SearchBar.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis SearchBar — global ⌘K search affordance. 12px radius, mono shortcut badge.
 */
function SearchBar({
  placeholder = "Search kits, authors, tags…",
  shortcut = "⌘K",
  onChange,
  value,
  fullWidth = true,
  style,
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 10,
      width: fullWidth ? "100%" : 360,
      height: 42,
      padding: "0 12px 0 14px",
      background: "var(--surface)",
      border: `1px solid ${focus ? "var(--primary)" : "var(--border)"}`,
      borderRadius: "var(--radius-lg)",
      boxShadow: focus ? "var(--ring-focus)" : "none",
      transition: "border-color var(--duration-base), box-shadow var(--duration-base)",
      ...style
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "16",
    height: "16",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "var(--text-muted)",
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "11",
    cy: "11",
    r: "7"
  }), /*#__PURE__*/React.createElement("path", {
    d: "m21 21-4.3-4.3"
  })), /*#__PURE__*/React.createElement("input", _extends({
    value: value,
    placeholder: placeholder,
    onChange: onChange,
    onFocus: () => setFocus(true),
    onBlur: () => setFocus(false),
    style: {
      flex: 1,
      border: "none",
      outline: "none",
      background: "transparent",
      fontFamily: "var(--font-body)",
      fontSize: 14,
      color: "var(--text-primary)"
    }
  }, rest)), shortcut && /*#__PURE__*/React.createElement("kbd", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      color: "var(--text-muted)",
      background: "var(--surface-alt)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-xs)",
      padding: "2px 6px"
    }
  }, shortcut));
}
Object.assign(__ds_scope, { SearchBar });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/SearchBar.jsx", error: String((e && e.message) || e) }); }

// components/forms/Select.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Select — native select styled to match Input (6px radius, focus ring).
 */
function Select({
  value,
  defaultValue,
  disabled = false,
  onChange,
  children,
  style,
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "inline-flex",
      width: "100%",
      ...style
    }
  }, /*#__PURE__*/React.createElement("select", _extends({
    value: value,
    defaultValue: defaultValue,
    disabled: disabled,
    onChange: onChange,
    onFocus: () => setFocus(true),
    onBlur: () => setFocus(false),
    style: {
      width: "100%",
      appearance: "none",
      WebkitAppearance: "none",
      fontFamily: "var(--font-body)",
      fontSize: 14,
      color: "var(--text-primary)",
      background: disabled ? "var(--surface-alt)" : "var(--surface)",
      border: `1px solid ${focus ? "var(--primary)" : "var(--border-strong)"}`,
      borderRadius: "var(--radius-sm)",
      padding: "10px 36px 10px 14px",
      outline: "none",
      boxShadow: focus ? "var(--ring-focus)" : "none",
      transition: "border-color var(--duration-base), box-shadow var(--duration-base)",
      cursor: disabled ? "not-allowed" : "pointer",
      opacity: disabled ? 0.6 : 1
    }
  }, rest), children), /*#__PURE__*/React.createElement("span", {
    style: {
      position: "absolute",
      right: 12,
      top: "50%",
      transform: "translateY(-50%)",
      pointerEvents: "none",
      color: "var(--text-muted)"
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "14",
    height: "14",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2.2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, /*#__PURE__*/React.createElement("path", {
    d: "m6 9 6 6 6-6"
  }))));
}
Object.assign(__ds_scope, { Select });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Select.jsx", error: String((e && e.message) || e) }); }

// components/forms/Switch.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Switch — 20px rounded-full toggle. Indigo when on.
 * Used for preferences (per the spec's "checkbox as toggle" pattern).
 */
function Switch({
  checked,
  defaultChecked = false,
  disabled = false,
  onChange,
  label,
  ...rest
}) {
  const isControlled = checked !== undefined;
  const [internal, setInternal] = React.useState(defaultChecked);
  const on = isControlled ? checked : internal;
  const toggle = () => {
    if (disabled) return;
    if (!isControlled) setInternal(!on);
    onChange && onChange(!on);
  };
  const control = /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    role: "switch",
    "aria-checked": on,
    disabled: disabled,
    onClick: toggle,
    style: {
      position: "relative",
      width: 38,
      height: 22,
      flex: "none",
      borderRadius: "var(--radius-full)",
      border: "none",
      cursor: disabled ? "not-allowed" : "pointer",
      background: on ? "var(--primary)" : "var(--color-gray-100)",
      boxShadow: on ? "none" : "inset 0 0 0 1px var(--border-strong)",
      transition: "background var(--duration-base)",
      opacity: disabled ? 0.5 : 1,
      padding: 0
    }
  }, rest), /*#__PURE__*/React.createElement("span", {
    style: {
      position: "absolute",
      top: 3,
      left: on ? 19 : 3,
      width: 16,
      height: 16,
      borderRadius: "50%",
      background: "#fff",
      boxShadow: "0 1px 2px rgba(0,0,0,0.2)",
      transition: "left var(--duration-base) var(--ease-standard)"
    }
  }));
  if (!label) return control;
  return /*#__PURE__*/React.createElement("label", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      cursor: disabled ? "not-allowed" : "pointer"
    }
  }, control, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-body)",
      fontSize: 14,
      color: "var(--text-primary)"
    }
  }, label));
}
Object.assign(__ds_scope, { Switch });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Switch.jsx", error: String((e && e.message) || e) }); }

// components/navigation/Tabs.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Genesis Tabs — underline tabs. Active tab uses indigo text + 2px indigo rule.
 * Controlled via `value`+`onChange`, or uncontrolled via `defaultValue`.
 */
function Tabs({
  items = [],
  value,
  defaultValue,
  onChange,
  style,
  ...rest
}) {
  const isControlled = value !== undefined;
  const [internal, setInternal] = React.useState(defaultValue ?? (items[0] && items[0].id));
  const active = isControlled ? value : internal;
  const select = id => {
    if (!isControlled) setInternal(id);
    onChange && onChange(id);
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    role: "tablist",
    style: {
      display: "flex",
      gap: 4,
      borderBottom: "1px solid var(--border)",
      ...style
    }
  }, rest), items.map(it => {
    const on = it.id === active;
    return /*#__PURE__*/React.createElement("button", {
      key: it.id,
      role: "tab",
      "aria-selected": on,
      onClick: () => select(it.id),
      style: {
        position: "relative",
        padding: "10px 14px",
        background: "transparent",
        border: "none",
        cursor: "pointer",
        fontFamily: "var(--font-body)",
        fontSize: 14,
        fontWeight: 500,
        color: on ? "var(--primary)" : "var(--text-secondary)",
        transition: "color var(--duration-base)"
      }
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        display: "inline-flex",
        alignItems: "center",
        gap: 7
      }
    }, it.label, it.count != null && /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: 11,
        fontWeight: 600,
        color: on ? "var(--primary)" : "var(--text-muted)",
        background: on ? "var(--primary-tint)" : "var(--surface-alt)",
        borderRadius: "var(--radius-full)",
        padding: "1px 7px"
      }
    }, it.count)), /*#__PURE__*/React.createElement("span", {
      style: {
        position: "absolute",
        left: 0,
        right: 0,
        bottom: -1,
        height: 2,
        background: on ? "var(--primary)" : "transparent",
        borderRadius: 2
      }
    }));
  }));
}
Object.assign(__ds_scope, { Tabs });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/navigation/Tabs.jsx", error: String((e && e.message) || e) }); }

// ui_kits/genesis/app.jsx
try { (() => {
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* Genesis UI Kit — app shell + routing */
const {
  useState: useA,
  useEffect: useAE
} = React;
function Toast({
  title,
  message,
  onClose
}) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: "fixed",
      bottom: 24,
      right: 24,
      zIndex: 1100,
      display: "flex",
      alignItems: "flex-start",
      gap: 12,
      width: 340,
      padding: "12px 14px",
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-md)",
      boxShadow: "var(--shadow-lg)"
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: 22,
      height: 22,
      borderRadius: "50%",
      flex: "none",
      background: "var(--color-success)",
      color: "#fff",
      marginTop: 1
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "check",
    size: 13,
    stroke: 2.6
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 600,
      color: "var(--text-primary)"
    }
  }, title), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      color: "var(--text-secondary)",
      marginTop: 2
    }
  }, message)), /*#__PURE__*/React.createElement("button", {
    onClick: onClose,
    "aria-label": "Dismiss",
    style: {
      border: "none",
      background: "transparent",
      cursor: "pointer",
      color: "var(--text-muted)",
      padding: 2,
      lineHeight: 0
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "15",
    height: "15",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2",
    strokeLinecap: "round"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M18 6 6 18M6 6l12 12"
  }))));
}
function App() {
  const [route, setRoute] = useA({
    name: "explore",
    kit: null
  });
  const [paletteOpen, setPaletteOpen] = useA(false);
  const [toast, setToast] = useA(null);
  useAE(() => {
    const onKey = e => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setPaletteOpen(o => !o);
      }
      if (e.key === "Escape") setPaletteOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  const openKit = kit => {
    setRoute({
      name: "detail",
      kit
    });
    window.scrollTo(0, 0);
  };
  const nav = name => {
    setRoute({
      name,
      kit: null
    });
    window.scrollTo(0, 0);
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minHeight: "100vh",
      background: "var(--bg)"
    }
  }, /*#__PURE__*/React.createElement(Navbar, {
    onNav: nav,
    active: route.name === "detail" ? "explore" : route.name,
    onSearch: () => setPaletteOpen(true)
  }), route.name === "explore" && /*#__PURE__*/React.createElement(ExploreScreen, {
    onOpenKit: openKit,
    onSearch: () => setPaletteOpen(true)
  }), route.name === "detail" && /*#__PURE__*/React.createElement(KitDetailScreen, {
    kit: route.kit,
    onBack: () => nav("explore")
  }), route.name === "upload" && /*#__PURE__*/React.createElement(UploadScreen, {
    onBack: () => nav("explore"),
    onPublish: () => {
      nav("explore");
      setToast({
        title: "Submitted for review",
        message: "We'll email you within 48 hours."
      });
    }
  }), (route.name === "collections" || route.name === "docs") && /*#__PURE__*/React.createElement("main", {
    style: {
      maxWidth: "var(--container-max)",
      margin: "0 auto",
      padding: "80px 24px",
      textAlign: "center"
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 32,
      fontWeight: 700,
      letterSpacing: "-0.03em"
    }
  }, route.name === "collections" ? "Collections" : "Docs"), /*#__PURE__*/React.createElement("p", {
    style: {
      color: "var(--text-secondary)",
      marginTop: 8
    }
  }, "This surface is part of the kit but left intentionally blank.")), /*#__PURE__*/React.createElement(CommandPalette, {
    open: paletteOpen,
    onClose: () => setPaletteOpen(false),
    onOpenKit: openKit
  }), toast && /*#__PURE__*/React.createElement(Toast, _extends({}, toast, {
    onClose: () => setToast(null)
  })));
}
ReactDOM.createRoot(document.getElementById("root")).render(/*#__PURE__*/React.createElement(App, null));
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/genesis/app.jsx", error: String((e && e.message) || e) }); }

// ui_kits/genesis/data.js
try { (() => {
/* Genesis UI Kit — sample data */
const KITS = [{
  id: "editorial-ui",
  name: "Editorial UI",
  version: "1.4.0",
  author: "Mara Ito",
  description: "Refined gallery components for content-heavy products.",
  tags: ["Figma", "React", "MIT"],
  downloads: 12400,
  likes: 980,
  preview: 0,
  status: "published"
}, {
  id: "tokens-studio",
  name: "Tokens Studio",
  version: "2.0.1",
  author: "Devon Cole",
  description: "A complete primitive + semantic token set with theming.",
  tags: ["Tokens", "CSS"],
  downloads: 8700,
  likes: 642,
  preview: 3,
  status: "published"
}, {
  id: "halo-icons",
  name: "Halo Icons",
  version: "0.9.2",
  author: "Lee Park",
  description: "480 consistent 2px stroke icons. SVG + React.",
  tags: ["Icons", "SVG"],
  downloads: 21300,
  likes: 1740,
  preview: 1,
  status: "published"
}, {
  id: "ledger-charts",
  name: "Ledger Charts",
  version: "1.1.0",
  author: "Ana Roy",
  description: "Composable chart primitives for finance dashboards.",
  tags: ["React", "Data viz"],
  downloads: 5400,
  likes: 410,
  preview: 2,
  status: "published"
}, {
  id: "prose-blocks",
  name: "Prose Blocks",
  version: "3.2.0",
  author: "Sam Okafor",
  description: "Long-form reading layouts with refined typography.",
  tags: ["Figma", "Tailwind"],
  downloads: 9100,
  likes: 720,
  preview: 1,
  status: "published"
}, {
  id: "commerce-kit",
  name: "Commerce Kit",
  version: "1.0.0",
  author: "Yuki Tan",
  description: "Cart, checkout, and product surfaces for storefronts.",
  tags: ["React", "MIT"],
  downloads: 6800,
  likes: 530,
  preview: 3,
  status: "published"
}, {
  id: "motion-recipes",
  name: "Motion Recipes",
  version: "0.6.0",
  author: "Devon Cole",
  description: "Spring + easing presets with copy-paste snippets.",
  tags: ["Motion", "CSS"],
  downloads: 4200,
  likes: 360,
  preview: 0,
  status: "published"
}, {
  id: "grid-foundations",
  name: "Grid Foundations",
  version: "2.3.1",
  author: "Mara Ito",
  description: "Responsive grid + spacing scale primitives.",
  tags: ["Tokens", "Figma"],
  downloads: 7600,
  likes: 588,
  preview: 2,
  status: "published"
}];
const FILTERS = ["All", "Figma", "React", "Tokens", "Icons", "Tailwind", "Motion", "Data viz"];
window.KITS = KITS;
window.FILTERS = FILTERS;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/genesis/data.js", error: String((e && e.message) || e) }); }

// ui_kits/genesis/primitives.jsx
try { (() => {
/* Genesis UI Kit — self-contained primitives (mirror of the DS component library).
   Loaded via <script type="text/babel">; uses React from the UMD global and the
   design-system CSS tokens. Assigned to window for cross-file use. */

const {
  useState
} = React;
const ICONS = {
  search: /*#__PURE__*/React.createElement("path", {
    d: "M11 4a7 7 0 1 0 4.9 12l4.3 4.3 1.4-1.4-4.3-4.3A7 7 0 0 0 11 4Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z"
  }),
  download: /*#__PURE__*/React.createElement("path", {
    d: "M12 3v12m0 0 4-4m-4 4-4-4M5 21h14"
  }),
  heart: /*#__PURE__*/React.createElement("path", {
    d: "M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 21l8.8-8.3a5 5 0 0 0 0-7.1Z"
  }),
  plus: /*#__PURE__*/React.createElement("path", {
    d: "M12 5v14M5 12h14"
  }),
  check: /*#__PURE__*/React.createElement("path", {
    d: "M20 6 9 17l-5-5"
  }),
  copy: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
    x: "9",
    y: "9",
    width: "11",
    height: "11",
    rx: "2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M5 15V5a2 2 0 0 1 2-2h10"
  })),
  chevron: /*#__PURE__*/React.createElement("path", {
    d: "m6 9 6 6 6-6"
  }),
  star: /*#__PURE__*/React.createElement("path", {
    d: "m12 2 2.9 6.3 6.8.8-5 4.7 1.3 6.8L12 17.8 5.7 21l1.3-6.8-5-4.7 6.8-.8L12 2Z"
  }),
  layers: /*#__PURE__*/React.createElement("path", {
    d: "m12 2 9 5-9 5-9-5 9-5Zm9 11-9 5-9-5m18 5-9 5-9-5"
  }),
  arrowRight: /*#__PURE__*/React.createElement("path", {
    d: "M5 12h14m-6-6 6 6-6 6"
  }),
  bell: /*#__PURE__*/React.createElement("path", {
    d: "M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"
  }),
  upload: /*#__PURE__*/React.createElement("path", {
    d: "M12 16V4m0 0L8 8m4-4 4 4M5 20h14"
  })
};
function Icon({
  name,
  size = 18,
  stroke = 2,
  color = "currentColor",
  style
}) {
  const fillIcons = [];
  return /*#__PURE__*/React.createElement("svg", {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: color,
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    style: style
  }, ICONS[name]);
}
function Button({
  variant = "primary",
  size = "md",
  leadingIcon,
  trailingIcon,
  fullWidth,
  href,
  onClick,
  disabled,
  children,
  style
}) {
  const [hover, setHover] = useState(false);
  const sizes = {
    sm: {
      h: 32,
      p: "0 12px",
      f: 13
    },
    md: {
      h: 38,
      p: "0 16px",
      f: 14
    },
    lg: {
      h: 44,
      p: "0 24px",
      f: 15
    }
  }[size];
  const variants = {
    primary: {
      background: "var(--primary)",
      color: "#fff",
      borderColor: "var(--primary)"
    },
    secondary: {
      background: "var(--surface)",
      color: "var(--text-primary)",
      borderColor: "var(--border-strong)"
    },
    ghost: {
      background: "transparent",
      color: "var(--text-secondary)",
      borderColor: "transparent"
    },
    destructive: {
      background: "transparent",
      color: "var(--color-error)",
      borderColor: "var(--color-error)"
    }
  };
  const hov = !disabled && hover ? {
    primary: {
      background: "var(--primary-hover)",
      borderColor: "var(--primary-hover)",
      boxShadow: "var(--shadow-primary-hover)",
      transform: "translateY(-1px)"
    },
    secondary: {
      background: "var(--surface-alt)",
      transform: "translateY(-1px)"
    },
    ghost: {
      background: "var(--surface-alt)",
      color: "var(--text-primary)"
    },
    destructive: {
      background: "var(--color-error-50)"
    }
  }[variant] : {};
  const Tag = href ? "a" : "button";
  return /*#__PURE__*/React.createElement(Tag, {
    href: href,
    onClick: disabled ? undefined : onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      gap: 8,
      height: sizes.h,
      padding: sizes.p,
      width: fullWidth ? "100%" : "auto",
      fontFamily: "var(--font-body)",
      fontSize: sizes.f,
      fontWeight: 500,
      borderRadius: "var(--radius-sm)",
      border: "1px solid transparent",
      cursor: disabled ? "not-allowed" : "pointer",
      opacity: disabled ? 0.5 : 1,
      whiteSpace: "nowrap",
      textDecoration: "none",
      userSelect: "none",
      transition: "transform .12s var(--ease-standard), background .2s, box-shadow .2s, border-color .2s",
      ...variants[variant],
      ...hov,
      ...style
    }
  }, leadingIcon, children, trailingIcon);
}
function IconButton({
  label,
  onClick,
  size = 38,
  children,
  badge
}) {
  const [hover, setHover] = useState(false);
  return /*#__PURE__*/React.createElement("button", {
    "aria-label": label,
    title: label,
    onClick: onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      position: "relative",
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: size,
      height: size,
      borderRadius: "var(--radius-sm)",
      border: "1px solid transparent",
      background: hover ? "var(--surface-alt)" : "transparent",
      color: hover ? "var(--text-primary)" : "var(--text-secondary)",
      cursor: "pointer",
      transition: "background .2s, color .2s"
    }
  }, children, badge && /*#__PURE__*/React.createElement("span", {
    style: {
      position: "absolute",
      top: 7,
      right: 8,
      width: 7,
      height: 7,
      borderRadius: "50%",
      background: "var(--primary)",
      border: "2px solid var(--surface)"
    }
  }));
}
function Avatar({
  name = "",
  src,
  size = 32
}) {
  const initials = name.split(" ").map(n => n[0]).slice(0, 2).join("").toUpperCase();
  return /*#__PURE__*/React.createElement("span", {
    title: name,
    style: {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: size,
      height: size,
      flex: "none",
      borderRadius: "var(--radius-full)",
      overflow: "hidden",
      background: "var(--primary-tint)",
      color: "var(--primary-hover)",
      fontFamily: "var(--font-body)",
      fontSize: size * 0.4,
      fontWeight: 600,
      border: "1px solid var(--border)"
    }
  }, src ? /*#__PURE__*/React.createElement("img", {
    src: src,
    alt: name,
    style: {
      width: "100%",
      height: "100%",
      objectFit: "cover"
    }
  }) : initials);
}
function Tag({
  active,
  onClick,
  children
}) {
  return /*#__PURE__*/React.createElement("span", {
    onClick: onClick,
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      padding: "5px 13px",
      fontFamily: "var(--font-body)",
      fontSize: 12,
      fontWeight: 500,
      borderRadius: "var(--radius-full)",
      background: active ? "var(--primary)" : "var(--color-gray-100)",
      color: active ? "#fff" : "var(--color-gray-600)",
      cursor: onClick ? "pointer" : "default",
      userSelect: "none",
      transition: "background .2s, color .2s"
    }
  }, children);
}
function Badge({
  status = "neutral",
  children
}) {
  const map = {
    published: {
      bg: "var(--color-success-50)",
      fg: "#0a7a55",
      dot: "var(--color-success)"
    },
    pending: {
      bg: "var(--color-warning-50)",
      fg: "#a86a06",
      dot: "var(--color-warning)"
    },
    info: {
      bg: "var(--primary-tint)",
      fg: "var(--primary-hover)",
      dot: "var(--primary)"
    },
    neutral: {
      bg: "var(--color-gray-100)",
      fg: "var(--color-gray-600)",
      dot: "var(--text-muted)"
    }
  }[status];
  return /*#__PURE__*/React.createElement("span", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      padding: "4px 10px",
      fontFamily: "var(--font-body)",
      fontSize: 12,
      fontWeight: 500,
      borderRadius: "var(--radius-full)",
      background: map.bg,
      color: map.fg
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 7,
      height: 7,
      borderRadius: "50%",
      background: map.dot
    }
  }), children);
}
function fmt(n) {
  return n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, "") + "k" : String(n);
}

/* Mini wireframe preview — neutral blocks reading as a design screenshot. */
function KitPreview({
  variant = 0
}) {
  const layouts = [/*#__PURE__*/React.createElement("g", {
    key: "a"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "16",
    width: "120",
    height: "14",
    rx: "3",
    fill: "#dcdce2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "40",
    width: "200",
    height: "8",
    rx: "2",
    fill: "#e8e8ec"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "56",
    width: "160",
    height: "8",
    rx: "2",
    fill: "#e8e8ec"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "84",
    width: "84",
    height: "56",
    rx: "6",
    fill: "#e3e3ea"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "112",
    y: "84",
    width: "84",
    height: "56",
    rx: "6",
    fill: "#e3e3ea"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "208",
    y: "84",
    width: "84",
    height: "56",
    rx: "6",
    fill: "#e3e3ea"
  })), /*#__PURE__*/React.createElement("g", {
    key: "b"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "16",
    width: "60",
    height: "108",
    rx: "6",
    fill: "#e3e3ea"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "92",
    y: "20",
    width: "140",
    height: "12",
    rx: "3",
    fill: "#dcdce2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "92",
    y: "44",
    width: "200",
    height: "7",
    rx: "2",
    fill: "#e8e8ec"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "92",
    y: "58",
    width: "180",
    height: "7",
    rx: "2",
    fill: "#e8e8ec"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "92",
    y: "84",
    width: "80",
    height: "24",
    rx: "6",
    fill: "#cfd0f5"
  })), /*#__PURE__*/React.createElement("g", {
    key: "c"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "40",
    cy: "44",
    r: "22",
    fill: "#e3e3ea"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "76",
    y: "32",
    width: "120",
    height: "11",
    rx: "3",
    fill: "#dcdce2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "76",
    y: "50",
    width: "90",
    height: "7",
    rx: "2",
    fill: "#e8e8ec"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "84",
    width: "276",
    height: "9",
    rx: "2",
    fill: "#e8e8ec"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "102",
    width: "220",
    height: "9",
    rx: "2",
    fill: "#e8e8ec"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "120",
    width: "240",
    height: "9",
    rx: "2",
    fill: "#e8e8ec"
  })), /*#__PURE__*/React.createElement("g", {
    key: "d"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "16",
    width: "276",
    height: "40",
    rx: "6",
    fill: "#e3e3ea"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "16",
    y: "68",
    width: "130",
    height: "56",
    rx: "6",
    fill: "#cfd0f5"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "162",
    y: "68",
    width: "130",
    height: "56",
    rx: "6",
    fill: "#e3e3ea"
  }))];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      height: 200,
      background: "var(--surface-alt)",
      borderBottom: "1px solid var(--border)",
      backgroundImage: "radial-gradient(var(--border-strong) 1px, transparent 1px)",
      backgroundSize: "16px 16px"
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "100%",
    height: "100%",
    viewBox: "0 0 308 156",
    preserveAspectRatio: "xMidYMid meet",
    style: {
      display: "block"
    }
  }, layouts[variant % layouts.length]));
}
function KitCard({
  kit,
  onClick
}) {
  const [hover, setHover] = useState(false);
  return /*#__PURE__*/React.createElement("div", {
    onClick: onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)",
      overflow: "hidden",
      cursor: "pointer",
      display: "flex",
      flexDirection: "column",
      transform: hover ? "translateY(-2px)" : "none",
      boxShadow: hover ? "var(--shadow-card-hover)" : "none",
      transition: "transform .2s var(--ease-standard), box-shadow .2s"
    }
  }, /*#__PURE__*/React.createElement(KitPreview, {
    variant: kit.preview
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 16,
      display: "flex",
      flexDirection: "column",
      gap: 12,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 8
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 17,
      fontWeight: 600,
      letterSpacing: "-0.02em"
    }
  }, kit.name), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      color: "var(--text-muted)"
    }
  }, kit.version)), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      color: "var(--text-secondary)",
      lineHeight: 1.45,
      marginTop: 4
    }
  }, kit.description)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 6,
      flexWrap: "wrap"
    }
  }, kit.tags.map(t => /*#__PURE__*/React.createElement(Tag, {
    key: t
  }, t))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      marginTop: "auto",
      paddingTop: 4
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 8
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    name: kit.author,
    size: 24
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 13,
      color: "var(--text-secondary)",
      fontWeight: 500
    }
  }, kit.author)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 12,
      color: "var(--text-muted)",
      fontSize: 12
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 4
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "download",
    size: 13
  }), fmt(kit.downloads)), /*#__PURE__*/React.createElement("span", {
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 4
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "heart",
    size: 13
  }), fmt(kit.likes))))));
}
Object.assign(window, {
  Icon,
  Button,
  IconButton,
  Avatar,
  Tag,
  Badge,
  KitCard,
  KitPreview,
  fmt
});
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/genesis/primitives.jsx", error: String((e && e.message) || e) }); }

// ui_kits/genesis/screens.jsx
try { (() => {
/* Genesis UI Kit — screen surfaces */
const {
  useState: useS
} = React;
function Navbar({
  onNav,
  active,
  onSearch
}) {
  const links = [{
    id: "explore",
    label: "Explore"
  }, {
    id: "collections",
    label: "Collections"
  }, {
    id: "docs",
    label: "Docs"
  }];
  const [hover, setHover] = useS(null);
  return /*#__PURE__*/React.createElement("header", {
    style: {
      position: "sticky",
      top: 0,
      zIndex: 50,
      height: "var(--nav-height)",
      borderBottom: "1px solid var(--border)",
      background: "var(--nav-bg)",
      backdropFilter: "var(--nav-blur)",
      WebkitBackdropFilter: "var(--nav-blur)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: "var(--container-max)",
      margin: "0 auto",
      height: "100%",
      padding: "0 24px",
      display: "flex",
      alignItems: "center",
      gap: 20
    }
  }, /*#__PURE__*/React.createElement("a", {
    onClick: () => onNav("explore"),
    style: {
      display: "flex",
      alignItems: "center",
      gap: 9,
      cursor: "pointer",
      flex: "none"
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 28,
      height: 28,
      borderRadius: 8,
      background: "var(--primary)",
      display: "grid",
      placeItems: "center",
      color: "#fff",
      fontFamily: "var(--font-display)",
      fontWeight: 700,
      fontSize: 16,
      letterSpacing: "-0.04em"
    }
  }, "G"), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-display)",
      fontWeight: 700,
      fontSize: 18,
      letterSpacing: "-0.04em",
      color: "var(--text-primary)"
    }
  }, "Genesis")), /*#__PURE__*/React.createElement("nav", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 2,
      marginLeft: 8
    }
  }, links.map(l => /*#__PURE__*/React.createElement("a", {
    key: l.id,
    onClick: () => onNav(l.id),
    onMouseEnter: () => setHover(l.id),
    onMouseLeave: () => setHover(null),
    style: {
      padding: "7px 12px",
      borderRadius: "var(--radius-sm)",
      fontSize: 14,
      fontWeight: 500,
      cursor: "pointer",
      color: active === l.id ? "var(--text-primary)" : "var(--text-secondary)",
      background: hover === l.id ? "var(--surface-alt)" : "transparent",
      transition: "background .2s, color .2s"
    }
  }, l.label))), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }), /*#__PURE__*/React.createElement("button", {
    onClick: onSearch,
    style: {
      display: "flex",
      alignItems: "center",
      gap: 10,
      height: 38,
      padding: "0 10px 0 12px",
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)",
      cursor: "pointer",
      color: "var(--text-muted)",
      minWidth: 220
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "search",
    size: 16,
    color: "var(--text-muted)"
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 13,
      fontFamily: "var(--font-body)",
      flex: 1,
      textAlign: "left"
    }
  }, "Search kits\u2026"), /*#__PURE__*/React.createElement("kbd", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      color: "var(--text-muted)",
      background: "var(--surface-alt)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-xs)",
      padding: "2px 6px"
    }
  }, "\u2318K")), /*#__PURE__*/React.createElement(IconButton, {
    label: "Notifications",
    badge: true
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "bell",
    size: 18
  })), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    size: "sm",
    leadingIcon: /*#__PURE__*/React.createElement(Icon, {
      name: "upload",
      size: 15
    }),
    onClick: () => onNav("upload")
  }, "Publish"), /*#__PURE__*/React.createElement(Avatar, {
    name: "You Designer",
    size: 32
  })));
}
function Hero() {
  return /*#__PURE__*/React.createElement("section", {
    style: {
      paddingTop: 64,
      paddingBottom: 12
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 760
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "gx-overline",
    style: {
      marginBottom: 16
    }
  }, "The design system registry"), /*#__PURE__*/React.createElement("h1", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 64,
      fontWeight: 700,
      letterSpacing: "-0.04em",
      lineHeight: 1.0,
      color: "var(--text-primary)"
    }
  }, "Design in the open with ", /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-mono)",
      letterSpacing: "-0.02em"
    }
  }, "DESIGN", /*#__PURE__*/React.createElement("span", {
    style: {
      color: "var(--brand-green)"
    }
  }, ".md"))), /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 18,
      color: "var(--text-secondary)",
      lineHeight: 1.5,
      marginTop: 20,
      maxWidth: 560
    }
  }, "Discover, share, and download production-ready design system files. Reviewed, versioned, and ready to drop into your stack.")));
}
function FilterRow({
  filters,
  active,
  onPick
}) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 8,
      flexWrap: "wrap",
      alignItems: "center"
    }
  }, filters.map(f => /*#__PURE__*/React.createElement(Tag, {
    key: f,
    active: active === f,
    onClick: () => onPick(f)
  }, f)));
}
function ExploreScreen({
  onOpenKit,
  onSearch
}) {
  const [filter, setFilter] = useS("All");
  const [sort, setSort] = useS("Popular");
  const kits = filter === "All" ? KITS : KITS.filter(k => k.tags.includes(filter));
  return /*#__PURE__*/React.createElement("main", {
    style: {
      maxWidth: "var(--container-max)",
      margin: "0 auto",
      padding: "0 24px 96px"
    }
  }, /*#__PURE__*/React.createElement(Hero, null), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 16,
      margin: "36px 0 24px",
      flexWrap: "wrap"
    }
  }, /*#__PURE__*/React.createElement(FilterRow, {
    filters: FILTERS,
    active: filter,
    onPick: setFilter
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 8
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 13,
      color: "var(--text-muted)"
    }
  }, "Sort"), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative"
    }
  }, /*#__PURE__*/React.createElement("select", {
    value: sort,
    onChange: e => setSort(e.target.value),
    style: {
      appearance: "none",
      WebkitAppearance: "none",
      fontFamily: "var(--font-body)",
      fontSize: 13,
      fontWeight: 500,
      color: "var(--text-primary)",
      background: "var(--surface)",
      border: "1px solid var(--border-strong)",
      borderRadius: "var(--radius-sm)",
      padding: "8px 30px 8px 12px",
      cursor: "pointer"
    }
  }, /*#__PURE__*/React.createElement("option", null, "Popular"), /*#__PURE__*/React.createElement("option", null, "Newest"), /*#__PURE__*/React.createElement("option", null, "Most downloaded")), /*#__PURE__*/React.createElement("span", {
    style: {
      position: "absolute",
      right: 10,
      top: "50%",
      transform: "translateY(-50%)",
      pointerEvents: "none"
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevron",
    size: 14,
    color: "var(--text-muted)"
  }))))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
      gap: 24
    }
  }, kits.map(k => /*#__PURE__*/React.createElement(KitCard, {
    key: k.id,
    kit: k,
    onClick: () => onOpenKit(k)
  }))));
}
function CodeBlock({
  children
}) {
  const [copied, setCopied] = useS(false);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 12,
      background: "var(--text-primary)",
      borderRadius: "var(--radius-md)",
      padding: "12px 12px 12px 16px"
    }
  }, /*#__PURE__*/React.createElement("code", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 13,
      color: "#e6e6ea"
    }
  }, children), /*#__PURE__*/React.createElement("button", {
    onClick: () => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    },
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      height: 30,
      padding: "0 10px",
      borderRadius: "var(--radius-sm)",
      border: "1px solid rgba(255,255,255,0.16)",
      background: "transparent",
      color: "#cfcfd6",
      fontSize: 12,
      fontFamily: "var(--font-body)",
      cursor: "pointer"
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: copied ? "check" : "copy",
    size: 13,
    color: copied ? "var(--color-success)" : "#cfcfd6"
  }), copied ? "Copied" : "Copy"));
}
function KitDetailScreen({
  kit,
  onBack
}) {
  const versions = [{
    v: kit.version,
    date: "2 days ago",
    note: "Add dark theme tokens + 12 new components"
  }, {
    v: "1.3.0",
    date: "3 weeks ago",
    note: "Refine focus rings; fix Select chevron"
  }, {
    v: "1.2.1",
    date: "Jun 2025",
    note: "Patch: badge contrast in light mode"
  }];
  return /*#__PURE__*/React.createElement("main", {
    style: {
      maxWidth: "var(--container-max)",
      margin: "0 auto",
      padding: "32px 24px 96px"
    }
  }, /*#__PURE__*/React.createElement("button", {
    onClick: onBack,
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      border: "none",
      background: "transparent",
      color: "var(--text-secondary)",
      fontSize: 13,
      cursor: "pointer",
      padding: 0,
      marginBottom: 24,
      fontFamily: "var(--font-body)"
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "arrowRight",
    size: 14,
    style: {
      transform: "rotate(180deg)"
    }
  }), " Back to explore"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "grid",
      gridTemplateColumns: "1fr 340px",
      gap: 40,
      alignItems: "start"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      borderRadius: "var(--radius-lg)",
      border: "1px solid var(--border)",
      overflow: "hidden"
    }
  }, /*#__PURE__*/React.createElement(KitPreview, {
    variant: kit.preview
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 8,
      marginTop: 16
    }
  }, [0, 1, 2].map(i => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      flex: 1,
      height: 72,
      borderRadius: "var(--radius-md)",
      border: "1px solid var(--border)",
      background: "var(--surface-alt)",
      backgroundImage: "radial-gradient(var(--border-strong) 1px, transparent 1px)",
      backgroundSize: "12px 12px"
    }
  }))), /*#__PURE__*/React.createElement("h2", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 22,
      fontWeight: 600,
      letterSpacing: "-0.02em",
      margin: "36px 0 14px"
    }
  }, "Versions"), /*#__PURE__*/React.createElement("div", {
    style: {
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-md)",
      overflow: "hidden",
      background: "var(--surface)"
    }
  }, versions.map((r, i) => /*#__PURE__*/React.createElement("div", {
    key: r.v,
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 16,
      padding: "14px 16px",
      borderTop: i ? "1px solid var(--border)" : "none"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 12
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 13,
      color: "var(--text-primary)"
    }
  }, r.v), i === 0 && /*#__PURE__*/React.createElement(Badge, {
    status: "info"
  }, "Latest")), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 13,
      color: "var(--text-secondary)",
      flex: 1
    }
  }, r.note), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 12,
      color: "var(--text-muted)",
      flex: "none"
    }
  }, r.date))))), /*#__PURE__*/React.createElement("aside", {
    style: {
      position: "sticky",
      top: 80,
      display: "flex",
      flexDirection: "column",
      gap: 20
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 10,
      marginBottom: 8
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 28,
      fontWeight: 700,
      letterSpacing: "-0.03em"
    }
  }, kit.name)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 10
    }
  }, /*#__PURE__*/React.createElement(Badge, {
    status: "published"
  }, "Published"), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 12,
      color: "var(--text-muted)"
    }
  }, kit.version)), /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 15,
      color: "var(--text-secondary)",
      lineHeight: 1.5,
      marginTop: 14
    }
  }, kit.description, " Built on a 4px grid with full light + dark token coverage.")), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    size: "lg",
    fullWidth: true,
    leadingIcon: /*#__PURE__*/React.createElement(Icon, {
      name: "download",
      size: 16
    })
  }, "Download \xB7 ", fmt(kit.downloads)), /*#__PURE__*/React.createElement(CodeBlock, null, "npx genesis add ", kit.id), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 8,
      flexWrap: "wrap"
    }
  }, kit.tags.map(t => /*#__PURE__*/React.createElement(Tag, {
    key: t
  }, t))), /*#__PURE__*/React.createElement("div", {
    style: {
      height: 1,
      background: "var(--border)"
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 10
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    name: kit.author,
    size: 36
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 600,
      color: "var(--text-primary)"
    }
  }, kit.author), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: "var(--text-muted)"
    }
  }, "14 kits \xB7 38k downloads"))), /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    size: "sm"
  }, "Follow")))));
}
window.Navbar = Navbar;
window.ExploreScreen = ExploreScreen;
window.KitDetailScreen = KitDetailScreen;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/genesis/screens.jsx", error: String((e && e.message) || e) }); }

// ui_kits/genesis/upload.jsx
try { (() => {
/* Genesis UI Kit — upload flow + command palette */
const {
  useState: useS2,
  useEffect: useE2
} = React;
function Field({
  label,
  hint,
  children
}) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 7
    }
  }, /*#__PURE__*/React.createElement("label", {
    style: {
      fontSize: 13,
      fontWeight: 600,
      color: "var(--text-primary)"
    }
  }, label), children, hint && /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 12,
      color: "var(--text-muted)"
    }
  }, hint));
}
function TextInput({
  value,
  onChange,
  placeholder,
  mono
}) {
  const [focus, setFocus] = useS2(false);
  return /*#__PURE__*/React.createElement("input", {
    value: value,
    onChange: onChange,
    placeholder: placeholder,
    onFocus: () => setFocus(true),
    onBlur: () => setFocus(false),
    style: {
      width: "100%",
      fontFamily: mono ? "var(--font-mono)" : "var(--font-body)",
      fontSize: 14,
      color: "var(--text-primary)",
      background: "var(--surface)",
      border: `1px solid ${focus ? "var(--primary)" : "var(--border-strong)"}`,
      borderRadius: "var(--radius-sm)",
      padding: "10px 14px",
      outline: "none",
      boxShadow: focus ? "var(--ring-focus)" : "none",
      transition: "border-color .2s, box-shadow .2s"
    }
  });
}
function UploadScreen({
  onBack,
  onPublish
}) {
  const [name, setName] = useS2("");
  const [slug, setSlug] = useS2("");
  const [desc, setDesc] = useS2("");
  const [picked, setPicked] = useS2([]);
  const [license, setLicense] = useS2("MIT");
  const [dragOver, setDragOver] = useS2(false);
  const allTags = ["Figma", "React", "Tokens", "Icons", "Tailwind", "Motion", "Data viz", "CSS"];
  const toggle = t => setPicked(p => p.includes(t) ? p.filter(x => x !== t) : [...p, t]);
  return /*#__PURE__*/React.createElement("main", {
    style: {
      maxWidth: 720,
      margin: "0 auto",
      padding: "40px 24px 96px"
    }
  }, /*#__PURE__*/React.createElement("button", {
    onClick: onBack,
    style: {
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      border: "none",
      background: "transparent",
      color: "var(--text-secondary)",
      fontSize: 13,
      cursor: "pointer",
      padding: 0,
      marginBottom: 20,
      fontFamily: "var(--font-body)"
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "arrowRight",
    size: 14,
    style: {
      transform: "rotate(180deg)"
    }
  }), " Cancel"), /*#__PURE__*/React.createElement("h1", {
    style: {
      fontFamily: "var(--font-display)",
      fontSize: 32,
      fontWeight: 700,
      letterSpacing: "-0.03em"
    }
  }, "Publish a kit"), /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 15,
      color: "var(--text-secondary)",
      marginTop: 8,
      marginBottom: 32
    }
  }, "Share your design system files with the Genesis community. Every kit is reviewed before going live."), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 24
    }
  }, /*#__PURE__*/React.createElement("div", {
    onDragOver: e => {
      e.preventDefault();
      setDragOver(true);
    },
    onDragLeave: () => setDragOver(false),
    onDrop: e => {
      e.preventDefault();
      setDragOver(false);
      setPicked2();
    },
    style: {
      border: `1.5px dashed ${dragOver ? "var(--primary)" : "var(--border-strong)"}`,
      background: dragOver ? "var(--primary-tint)" : "var(--surface)",
      borderRadius: "var(--radius-lg)",
      padding: "36px 24px",
      textAlign: "center",
      transition: "border-color .2s, background .2s"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 44,
      height: 44,
      borderRadius: "var(--radius-md)",
      background: "var(--surface-alt)",
      display: "grid",
      placeItems: "center",
      margin: "0 auto 12px"
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "upload",
    size: 20,
    color: "var(--text-secondary)"
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 600,
      color: "var(--text-primary)"
    }
  }, "Drop your files here, or browse"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: "var(--text-muted)",
      marginTop: 4
    }
  }, "Figma file, tokens.json, or a .zip \xB7 up to 50MB")), /*#__PURE__*/React.createElement(Field, {
    label: "Kit name"
  }, /*#__PURE__*/React.createElement(TextInput, {
    value: name,
    onChange: e => {
      setName(e.target.value);
      setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""));
    },
    placeholder: "Editorial UI"
  })), /*#__PURE__*/React.createElement(Field, {
    label: "Registry slug",
    hint: "Used in the install command \u2014 must be unique."
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 0
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 13,
      color: "var(--text-muted)",
      padding: "10px 4px 10px 14px",
      background: "var(--surface-alt)",
      border: "1px solid var(--border-strong)",
      borderRight: "none",
      borderRadius: "var(--radius-sm) 0 0 var(--radius-sm)"
    }
  }, "genesis add"), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(TextInput, {
    value: slug,
    onChange: e => setSlug(e.target.value),
    placeholder: "editorial-ui",
    mono: true
  })))), /*#__PURE__*/React.createElement(Field, {
    label: "Description"
  }, /*#__PURE__*/React.createElement("textarea", {
    value: desc,
    onChange: e => setDesc(e.target.value),
    placeholder: "A short, plain description of what's inside and who it's for.",
    rows: 3,
    style: {
      width: "100%",
      fontFamily: "var(--font-body)",
      fontSize: 14,
      color: "var(--text-primary)",
      background: "var(--surface)",
      border: "1px solid var(--border-strong)",
      borderRadius: "var(--radius-sm)",
      padding: "10px 14px",
      outline: "none",
      resize: "vertical"
    }
  })), /*#__PURE__*/React.createElement(Field, {
    label: "Tags",
    hint: "Pick up to 4 that describe the kit."
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 8,
      flexWrap: "wrap"
    }
  }, allTags.map(t => /*#__PURE__*/React.createElement(Tag, {
    key: t,
    active: picked.includes(t),
    onClick: () => toggle(t)
  }, t)))), /*#__PURE__*/React.createElement(Field, {
    label: "License"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative"
    }
  }, /*#__PURE__*/React.createElement("select", {
    value: license,
    onChange: e => setLicense(e.target.value),
    style: {
      width: "100%",
      appearance: "none",
      WebkitAppearance: "none",
      fontFamily: "var(--font-body)",
      fontSize: 14,
      color: "var(--text-primary)",
      background: "var(--surface)",
      border: "1px solid var(--border-strong)",
      borderRadius: "var(--radius-sm)",
      padding: "10px 36px 10px 14px",
      cursor: "pointer"
    }
  }, /*#__PURE__*/React.createElement("option", null, "MIT"), /*#__PURE__*/React.createElement("option", null, "Apache 2.0"), /*#__PURE__*/React.createElement("option", null, "CC BY 4.0"), /*#__PURE__*/React.createElement("option", null, "Proprietary")), /*#__PURE__*/React.createElement("span", {
    style: {
      position: "absolute",
      right: 12,
      top: "50%",
      transform: "translateY(-50%)",
      pointerEvents: "none"
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevron",
    size: 14,
    color: "var(--text-muted)"
  })))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      paddingTop: 8,
      borderTop: "1px solid var(--border)",
      marginTop: 4
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 13,
      color: "var(--text-muted)"
    }
  }, "Your kit will be reviewed within 48 hours."), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 10
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    onClick: onBack
  }, "Save draft"), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    onClick: onPublish,
    disabled: !name
  }, "Submit for review")))));
  function setPicked2() {/* no-op drop handler for demo */}
}
function CommandPalette({
  open,
  onClose,
  onOpenKit
}) {
  const [q, setQ] = useS2("");
  useE2(() => {
    if (open) setQ("");
  }, [open]);
  if (!open) return null;
  const results = KITS.filter(k => k.name.toLowerCase().includes(q.toLowerCase()) || k.author.toLowerCase().includes(q.toLowerCase())).slice(0, 6);
  return /*#__PURE__*/React.createElement("div", {
    onClick: onClose,
    style: {
      position: "fixed",
      inset: 0,
      background: "rgba(10,10,10,0.32)",
      backdropFilter: "blur(2px)",
      display: "flex",
      justifyContent: "center",
      paddingTop: 120,
      zIndex: 1000
    }
  }, /*#__PURE__*/React.createElement("div", {
    onClick: e => e.stopPropagation(),
    style: {
      width: 560,
      maxWidth: "calc(100% - 48px)",
      height: "fit-content",
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)",
      boxShadow: "var(--shadow-dialog)",
      overflow: "hidden"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      gap: 10,
      padding: "0 16px",
      height: 52,
      borderBottom: "1px solid var(--border)"
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "search",
    size: 18,
    color: "var(--text-muted)"
  }), /*#__PURE__*/React.createElement("input", {
    autoFocus: true,
    value: q,
    onChange: e => setQ(e.target.value),
    placeholder: "Search kits, authors, tags\u2026",
    style: {
      flex: 1,
      border: "none",
      outline: "none",
      background: "transparent",
      fontFamily: "var(--font-body)",
      fontSize: 15,
      color: "var(--text-primary)"
    }
  }), /*#__PURE__*/React.createElement("kbd", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      color: "var(--text-muted)",
      background: "var(--surface-alt)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-xs)",
      padding: "2px 6px"
    }
  }, "ESC")), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 8,
      maxHeight: 340,
      overflowY: "auto"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "gx-overline",
    style: {
      padding: "8px 10px 4px"
    }
  }, "Kits"), results.map(k => /*#__PURE__*/React.createElement("div", {
    key: k.id,
    onClick: () => {
      onOpenKit(k);
      onClose();
    },
    className: "gx-cmd-row",
    style: {
      display: "flex",
      alignItems: "center",
      gap: 12,
      padding: "9px 10px",
      borderRadius: "var(--radius-sm)",
      cursor: "pointer"
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 30,
      height: 30,
      borderRadius: "var(--radius-sm)",
      background: "var(--surface-alt)",
      display: "grid",
      placeItems: "center",
      fontFamily: "var(--font-display)",
      fontWeight: 700,
      color: "var(--text-secondary)",
      fontSize: 14
    }
  }, k.name[0]), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 500,
      color: "var(--text-primary)"
    }
  }, k.name), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: "var(--text-muted)"
    }
  }, k.author, " \xB7 ", fmt(k.downloads), " downloads")), /*#__PURE__*/React.createElement(Icon, {
    name: "arrowRight",
    size: 15,
    color: "var(--text-muted)"
  }))), results.length === 0 && /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "20px 10px",
      fontSize: 14,
      color: "var(--text-muted)"
    }
  }, "No kits match \u201C", q, "\u201D."))));
}
window.UploadScreen = UploadScreen;
window.CommandPalette = CommandPalette;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/genesis/upload.jsx", error: String((e && e.message) || e) }); }

__ds_ns.Button = __ds_scope.Button;

__ds_ns.IconButton = __ds_scope.IconButton;

__ds_ns.Avatar = __ds_scope.Avatar;

__ds_ns.Badge = __ds_scope.Badge;

__ds_ns.Card = __ds_scope.Card;

__ds_ns.KitCard = __ds_scope.KitCard;

__ds_ns.Tag = __ds_scope.Tag;

__ds_ns.Dialog = __ds_scope.Dialog;

__ds_ns.Toast = __ds_scope.Toast;

__ds_ns.Checkbox = __ds_scope.Checkbox;

__ds_ns.Input = __ds_scope.Input;

__ds_ns.SearchBar = __ds_scope.SearchBar;

__ds_ns.Select = __ds_scope.Select;

__ds_ns.Switch = __ds_scope.Switch;

__ds_ns.Tabs = __ds_scope.Tabs;

})();
