_ds_bundle.js

/* @ds-bundle: {"format":3,"namespace":"ThinLyDesignSystem_0b5fb4","components":[{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"Input","sourcePath":"components/core/Input.jsx"},{"name":"Switch","sourcePath":"components/core/Switch.jsx"},{"name":"Tabs","sourcePath":"components/core/Tabs.jsx"},{"name":"Badge","sourcePath":"components/data/Badge.jsx"},{"name":"Card","sourcePath":"components/data/Card.jsx"},{"name":"StatTile","sourcePath":"components/data/StatTile.jsx"},{"name":"StatusPill","sourcePath":"components/data/StatusPill.jsx"}],"sourceHashes":{"components/core/Button.jsx":"07930bf7026a","components/core/Input.jsx":"94a2066530a1","components/core/Switch.jsx":"05e739e84351","components/core/Tabs.jsx":"543a24487e9c","components/data/Badge.jsx":"7d536f22028d","components/data/Card.jsx":"817c73b423fd","components/data/StatTile.jsx":"05b962b68770","components/data/StatusPill.jsx":"5e8f75e9cd52","design_handoff_user_profile/profile-kit.jsx":"749002d8da39","ui_kits/thinly-app/AppShell.jsx":"81c10c811c8c","ui_kits/thinly-app/Dashboard.jsx":"ecc33040601b","ui_kits/thinly-app/GovernancePage.jsx":"a57cacba5fef","ui_kits/thinly-app/LinkInBio.jsx":"fbabd3e6ecc9","ui_kits/thinly-app/icons.jsx":"67d6a8449ca3","ui_kits/thinly-app/kit-ui.jsx":"cbb9e7d824c8","ui_kits/thinly-app/profile-kit.jsx":"749002d8da39"},"inlinedExternals":[],"unexposedExports":[]} */

(() => {

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

const __ds_scope = {};

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

// components/core/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); }
/**
 * thin.ly Button — pill-shaped, governed-feeling action.
 * Variants: primary (ink), accent (violet CTA gradient), soft (highlighter tint),
 * outline, ghost. Sizes: sm | md | lg. Optional leading/trailing icon nodes.
 */
function Button({
  children,
  variant = 'primary',
  size = 'md',
  tone = 'mint',
  icon = null,
  trailingIcon = null,
  disabled = false,
  full = false,
  type = 'button',
  onClick,
  style,
  ...rest
}) {
  const sizes = {
    sm: {
      padding: '7px 14px',
      font: 13,
      gap: 6,
      icon: 14
    },
    md: {
      padding: '9px 18px',
      font: 14,
      gap: 7,
      icon: 16
    },
    lg: {
      padding: '12px 24px',
      font: 15,
      gap: 8,
      icon: 18
    }
  };
  const s = sizes[size] || sizes.md;
  const tints = {
    mint: ['var(--mint)', 'var(--mint-d)'],
    coral: ['var(--coral-2)', 'var(--coral-d)'],
    peach: ['var(--peach)', 'var(--peach-d)'],
    lilac: ['var(--lilac-2)', 'var(--lilac-d)'],
    sun: ['var(--sun)', 'var(--sun-d)'],
    sky: ['var(--sky-2)', 'var(--sky-d)']
  };
  const [tintBg, tintFg] = tints[tone] || tints.mint;
  const base = {
    display: full ? 'flex' : 'inline-flex',
    width: full ? '100%' : 'auto',
    alignItems: 'center',
    justifyContent: 'center',
    gap: s.gap,
    padding: s.padding,
    fontFamily: 'var(--font-sans)',
    fontSize: s.font,
    fontWeight: 600,
    lineHeight: 1,
    whiteSpace: 'nowrap',
    borderRadius: 'var(--radius-pill)',
    border: '1px solid transparent',
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.5 : 1,
    transition: 'transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)'
  };
  const variants = {
    primary: {
      background: 'var(--ink-1)',
      color: 'var(--canvas-2)'
    },
    accent: {
      background: 'linear-gradient(135deg, var(--violet-500), var(--violet-400))',
      color: '#fff',
      boxShadow: 'var(--shadow-glow-violet)'
    },
    soft: {
      background: tintBg,
      color: tintFg
    },
    outline: {
      background: 'transparent',
      color: 'var(--ink-1)',
      border: '1px solid var(--line-1)'
    },
    ghost: {
      background: 'transparent',
      color: 'var(--ink-2)'
    }
  };
  const [hover, setHover] = React.useState(false);
  const hoverStyle = !disabled && hover ? {
    transform: 'translateY(-1px)',
    boxShadow: variant === 'accent' ? '0 8px 24px rgba(124,58,237,0.35)' : 'var(--shadow-bento-sm)',
    background: variant === 'primary' ? 'var(--ink-2)' : variant === 'outline' || variant === 'ghost' ? 'rgba(0,0,0,0.03)' : variants[variant].background
  } : {};
  return /*#__PURE__*/React.createElement("button", _extends({
    type: type,
    disabled: disabled,
    onClick: onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      ...base,
      ...variants[variant],
      ...hoverStyle,
      ...style
    }
  }, rest), icon ? /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      width: s.icon,
      height: s.icon
    }
  }, icon) : null, children, trailingIcon ? /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      width: s.icon,
      height: s.icon
    }
  }, trailingIcon) : null);
}
Object.assign(__ds_scope, { Button });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Button.jsx", error: String((e && e.message) || e) }); }

// components/core/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); }
/**
 * thin.ly Input — pill or rounded field with optional leading icon, mono option
 * (for URLs/slugs), and error state. Focus draws a soft ink ring.
 */
function Input({
  value,
  onChange,
  placeholder = '',
  type = 'text',
  icon = null,
  trailing = null,
  mono = false,
  shape = 'pill',
  error = false,
  disabled = false,
  full = true,
  style,
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  const radius = shape === 'pill' ? 'var(--radius-pill)' : 'var(--radius-md)';
  const borderColor = error ? 'var(--status-expired)' : focus ? 'var(--ink-1)' : 'var(--line-1)';
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'inline-flex',
      width: full ? '100%' : 'auto',
      alignItems: 'center',
      gap: 9,
      padding: '10px 16px',
      background: 'var(--canvas-2)',
      border: `1px solid ${borderColor}`,
      borderRadius: radius,
      boxShadow: focus ? '0 0 0 3px rgba(0,0,0,0.04)' : 'none',
      transition: 'border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
      opacity: disabled ? 0.55 : 1,
      ...style
    }
  }, icon ? /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      width: 15,
      height: 15,
      color: 'var(--ink-3)',
      flex: 'none'
    }
  }, icon) : null, /*#__PURE__*/React.createElement("input", _extends({
    value: value,
    onChange: onChange,
    placeholder: placeholder,
    type: type,
    disabled: disabled,
    onFocus: () => setFocus(true),
    onBlur: () => setFocus(false),
    style: {
      flex: 1,
      minWidth: 0,
      border: 'none',
      outline: 'none',
      background: 'transparent',
      fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
      fontSize: mono ? 13 : 14.5,
      color: 'var(--ink-1)'
    }
  }, rest)), trailing ? /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      flex: 'none',
      color: 'var(--ink-4)'
    }
  }, trailing) : null);
}
Object.assign(__ds_scope, { Input });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Input.jsx", error: String((e && e.message) || e) }); }

// components/core/Switch.jsx
try { (() => {
/**
 * thin.ly Switch — pill toggle. On state fills with the accent (violet) or a
 * highlighter tone. Used for governance rules, page visibility, settings.
 */
function Switch({
  checked = false,
  onChange,
  tone = 'accent',
  disabled = false,
  label = null,
  id
}) {
  const onColors = {
    accent: 'var(--violet-500)',
    active: 'var(--status-active)',
    mint: 'var(--mint-d)',
    sky: 'var(--sky-d)'
  };
  const onBg = onColors[tone] || onColors.accent;
  const toggle = /*#__PURE__*/React.createElement("button", {
    type: "button",
    role: "switch",
    "aria-checked": checked,
    id: id,
    disabled: disabled,
    onClick: () => onChange && onChange(!checked),
    style: {
      position: 'relative',
      width: 42,
      height: 24,
      flex: 'none',
      borderRadius: 'var(--radius-pill)',
      border: 'none',
      cursor: disabled ? 'not-allowed' : 'pointer',
      background: checked ? onBg : 'var(--ink-4)',
      opacity: disabled ? 0.5 : 1,
      transition: 'background var(--dur-base) var(--ease-out)',
      padding: 0
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      position: 'absolute',
      top: 3,
      left: checked ? 21 : 3,
      width: 18,
      height: 18,
      borderRadius: '50%',
      background: '#fff',
      boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
      transition: 'left var(--dur-base) var(--ease-out)'
    }
  }));
  if (!label) return toggle;
  return /*#__PURE__*/React.createElement("label", {
    htmlFor: id,
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 10,
      cursor: disabled ? 'not-allowed' : 'pointer',
      fontFamily: 'var(--font-sans)',
      fontSize: 14,
      color: 'var(--ink-1)'
    }
  }, toggle, label);
}
Object.assign(__ds_scope, { Switch });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Switch.jsx", error: String((e && e.message) || e) }); }

// components/core/Tabs.jsx
try { (() => {
/**
 * thin.ly Tabs — pill segmented control / filter chips. Each tab may carry a
 * count (governance filter style). Active tab fills with violet tint or ink.
 */
function Tabs({
  tabs = [],
  value,
  onChange,
  variant = 'chips'
}) {
  return /*#__PURE__*/React.createElement("div", {
    role: "tablist",
    style: {
      display: 'inline-flex',
      gap: variant === 'segment' ? 0 : 8,
      flexWrap: 'wrap',
      padding: variant === 'segment' ? 4 : 0,
      background: variant === 'segment' ? 'var(--canvas-1)' : 'transparent',
      borderRadius: 'var(--radius-pill)',
      border: variant === 'segment' ? '1px solid var(--line-1)' : 'none'
    }
  }, tabs.map(t => {
    const key = typeof t === 'string' ? t : t.key;
    const label = typeof t === 'string' ? t : t.label;
    const count = typeof t === 'string' ? undefined : t.count;
    const active = key === value;
    return /*#__PURE__*/React.createElement("button", {
      key: key,
      role: "tab",
      "aria-selected": active,
      onClick: () => onChange && onChange(key),
      style: {
        display: 'inline-flex',
        alignItems: 'center',
        gap: 7,
        padding: '7px 14px',
        borderRadius: 'var(--radius-pill)',
        border: variant === 'chips' ? `1px solid ${active ? 'rgba(124,58,237,0.30)' : 'var(--line-1)'}` : 'none',
        background: active ? variant === 'segment' ? 'var(--canvas-2)' : 'rgba(124,58,237,0.12)' : 'transparent',
        boxShadow: variant === 'segment' && active ? 'var(--shadow-bento-sm)' : 'none',
        color: active ? variant === 'segment' ? 'var(--ink-1)' : 'var(--violet-500)' : 'var(--ink-3)',
        fontFamily: 'var(--font-sans)',
        fontSize: 13.5,
        fontWeight: active ? 600 : 500,
        cursor: 'pointer',
        transition: 'color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)'
      }
    }, label, count !== undefined ? /*#__PURE__*/React.createElement("span", {
      style: {
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        padding: '1px 6px',
        borderRadius: 'var(--radius-pill)',
        background: active ? 'rgba(124,58,237,0.16)' : 'var(--canvas-1)',
        color: active ? 'var(--violet-500)' : 'var(--ink-4)'
      }
    }, count) : null);
  }));
}
Object.assign(__ds_scope, { Tabs });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Tabs.jsx", error: String((e && e.message) || e) }); }

// components/data/Badge.jsx
try { (() => {
/**
 * thin.ly Badge — small highlighter chip for tags, categories, counts and
 * meta (e.g. "3 rules", "launch", "Featured"). Soft tint by default; solid for
 * emphasis. For governance link states use StatusPill instead.
 */
function Badge({
  children,
  tone = 'lilac',
  variant = 'soft',
  icon = null,
  mono = false
}) {
  const tints = {
    mint: ['var(--mint-3)', 'var(--mint-d)', 'var(--mint)'],
    coral: ['var(--coral-3)', 'var(--coral-d)', 'var(--coral)'],
    peach: ['var(--peach-3)', 'var(--peach-d)', 'var(--peach)'],
    lilac: ['var(--lilac-3)', 'var(--lilac-d)', 'var(--lilac)'],
    sun: ['var(--sun-3)', 'var(--sun-d)', 'var(--sun)'],
    sky: ['var(--sky-3)', 'var(--sky-d)', 'var(--sky)'],
    violet: ['rgba(124,58,237,0.10)', 'var(--violet-500)', 'var(--violet-500)'],
    neutral: ['var(--canvas-1)', 'var(--ink-3)', 'var(--line-1)']
  };
  const [soft, deep, solid] = tints[tone] || tints.lilac;
  const styles = variant === 'solid' ? {
    background: solid,
    color: tone === 'violet' ? '#fff' : 'var(--ink-1)',
    border: '1px solid transparent'
  } : variant === 'outline' ? {
    background: 'transparent',
    color: deep,
    border: `1px solid ${soft}`
  } : {
    background: soft,
    color: deep,
    border: '1px solid transparent'
  };
  return /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5,
      padding: '3px 9px',
      borderRadius: 'var(--radius-pill)',
      fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
      fontSize: mono ? 10.5 : 11.5,
      fontWeight: 600,
      lineHeight: 1.3,
      ...styles
    }
  }, icon ? /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      width: 12,
      height: 12
    }
  }, icon) : null, children);
}
Object.assign(__ds_scope, { Badge });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data/Badge.jsx", error: String((e && e.message) || e) }); }

// components/data/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); }
/**
 * thin.ly Card — the signature bento tile. 18px radius, soft layered shadow,
 * optional highlighter fill, and a 2px hover lift. Use `tone` for pastel tiles,
 * `dark` for the ink/forest panels, or leave plain white.
 */
function Card({
  children,
  tone = 'plain',
  dark = false,
  interactive = false,
  padding = 20,
  className = '',
  style,
  ...rest
}) {
  const [hover, setHover] = React.useState(false);
  const fills = {
    plain: 'var(--canvas-2)',
    mint: 'var(--mint)',
    coral: 'var(--coral-2)',
    peach: 'var(--peach-2)',
    lilac: 'var(--lilac-2)',
    sun: 'var(--sun-2)',
    sky: 'var(--sky-2)'
  };
  const bg = dark ? 'var(--ink-1)' : fills[tone] || fills.plain;
  return /*#__PURE__*/React.createElement("div", _extends({
    className: className,
    onMouseEnter: () => interactive && setHover(true),
    onMouseLeave: () => interactive && setHover(false),
    style: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      background: bg,
      color: dark ? 'var(--canvas-2)' : 'var(--ink-1)',
      borderRadius: 'var(--radius-bento)',
      padding,
      boxShadow: hover ? 'var(--shadow-bento)' : 'var(--shadow-bento-sm)',
      transform: hover ? 'translateY(-2px)' : 'none',
      transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
      cursor: interactive ? 'pointer' : 'default',
      ...style
    }
  }, rest), children);
}
Object.assign(__ds_scope, { Card });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data/Card.jsx", error: String((e && e.message) || e) }); }

// components/data/StatTile.jsx
try { (() => {
/**
 * thin.ly StatTile — white metric tile with a 3px top accent stripe, a tinted
 * icon tile top-right, a mono uppercase label, a big extrabold value, and a
 * delta line with direction. Mirrors the governance stats grid.
 */
function StatTile({
  label,
  value,
  delta,
  dir = 'neutral',
  accent = 'var(--violet-500)',
  accentBg = 'rgba(124,58,237,0.10)',
  icon = null
}) {
  const [hover, setHover] = React.useState(false);
  const deltaColor = dir === 'up' ? 'var(--data-up)' : dir === 'down' ? 'var(--data-down)' : 'var(--ink-3)';
  const arrow = dir === 'up' ? '↑' : dir === 'down' ? '↓' : '·';
  return /*#__PURE__*/React.createElement("div", {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      position: 'relative',
      overflow: 'hidden',
      background: 'var(--canvas-2)',
      border: '1px solid var(--line-1)',
      borderRadius: 'var(--radius-lg)',
      padding: '16px 18px',
      boxShadow: 'var(--shadow-stat)',
      transform: hover ? 'translateY(-2px)' : 'none',
      transition: 'transform var(--dur-base) var(--ease-out)',
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      insetInline: 0,
      top: 0,
      height: 3,
      background: accent
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      right: 14,
      top: 14,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 34,
      height: 34,
      borderRadius: 10,
      background: accentBg,
      color: accent
    }
  }, icon), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      fontWeight: 600,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)',
      paddingRight: 40
    }
  }, label), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 8,
      fontFamily: 'var(--font-display)',
      fontSize: 32,
      fontWeight: 800,
      lineHeight: 1,
      letterSpacing: '-0.02em',
      color: 'var(--ink-1)'
    }
  }, value), delta != null && /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 8,
      display: 'flex',
      alignItems: 'center',
      gap: 4,
      fontSize: 12.5,
      color: deltaColor
    }
  }, /*#__PURE__*/React.createElement("span", {
    "aria-hidden": true
  }, arrow), /*#__PURE__*/React.createElement("span", {
    style: {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    }
  }, delta)));
}
Object.assign(__ds_scope, { StatTile });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data/StatTile.jsx", error: String((e && e.message) || e) }); }

// components/data/StatusPill.jsx
try { (() => {
/**
 * thin.ly StatusPill — the trust-layer badge. One pill per governance state,
 * always color + dot/icon + label (never color alone). Optional pulsing "live" dot.
 */
function StatusPill({
  state = 'active',
  label,
  live = false,
  size = 'md',
  icon = null
}) {
  const map = {
    active: {
      fg: 'var(--status-active)',
      bg: 'var(--status-active-bg)',
      text: 'Active'
    },
    paused: {
      fg: 'var(--status-paused)',
      bg: 'var(--status-paused-bg)',
      text: 'Paused'
    },
    expired: {
      fg: 'var(--status-expired)',
      bg: 'var(--status-expired-bg)',
      text: 'Expired'
    },
    draft: {
      fg: 'var(--status-draft)',
      bg: 'var(--status-draft-bg)',
      text: 'Draft'
    },
    safe: {
      fg: 'var(--status-safe)',
      bg: 'var(--status-safe-bg)',
      text: 'Safe URL'
    },
    flagged: {
      fg: 'var(--status-flagged)',
      bg: 'var(--status-flagged-bg)',
      text: 'Flagged'
    }
  };
  const c = map[state] || map.active;
  const sm = size === 'sm';
  return /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: sm ? 5 : 7,
      padding: sm ? '3px 9px 3px 8px' : '5px 12px 5px 10px',
      borderRadius: 'var(--radius-pill)',
      background: c.bg,
      color: c.fg,
      fontFamily: 'var(--font-sans)',
      fontSize: sm ? 11.5 : 13,
      fontWeight: 600,
      lineHeight: 1
    }
  }, icon ? /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      width: sm ? 12 : 14,
      height: sm ? 12 : 14
    }
  }, icon) : /*#__PURE__*/React.createElement("span", {
    style: {
      position: 'relative',
      width: sm ? 6 : 8,
      height: sm ? 6 : 8,
      borderRadius: '50%',
      background: c.fg,
      animation: live ? 'thinly-pulse-live 1.8s infinite' : 'none'
    }
  }), label || c.text);
}
Object.assign(__ds_scope, { StatusPill });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data/StatusPill.jsx", error: String((e && e.message) || e) }); }

// design_handoff_user_profile/profile-kit.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); }
/* ============================================================
   thin.ly — Profile Kit (shared)
   Icons, avatar, sparkline, default profile data, and the single
   <PublicProfile> renderer used by BOTH the public page and the
   owner editor's live preview. Exposes window.PK.
   Load AFTER _ds_bundle.js, as <script type="text/babel">.
   ============================================================ */
const {
  useState
} = React;
const DS = window.ThinLyDesignSystem_0b5fb4;

/* ── Icons (Lucide-style, 2px) ───────────────────────────────── */
const S = ({
  children,
  size = 18,
  sw = 2,
  fill = 'none',
  style
}) => /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 24 24",
  width: size,
  height: size,
  fill: fill,
  stroke: "currentColor",
  strokeWidth: sw,
  strokeLinecap: "round",
  strokeLinejoin: "round",
  style: {
    flex: 'none',
    ...style
  }
}, children);
const I = {
  link: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
  })),
  shield: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M9.5 12l1.8 1.8 3.2-3.6"
  })),
  bookmark: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
  })),
  bookmarkFill: p => /*#__PURE__*/React.createElement(S, _extends({}, p, {
    fill: "currentColor"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
  })),
  users: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M16 19v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "7",
    r: "4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M22 19v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11"
  })),
  share: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "18",
    cy: "5",
    r: "3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "6",
    cy: "12",
    r: "3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "18",
    cy: "19",
    r: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"
  })),
  plus: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 5v14M5 12h14"
  })),
  arrow: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M5 12h14M12 5l7 7-7 7"
  })),
  external: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"
  })),
  dots: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "5",
    cy: "12",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "19",
    cy: "12",
    r: "1.4"
  })),
  pin: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "10",
    r: "2.5"
  })),
  globe: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"
  })),
  click: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M9 9l5 12 1.8-5.2L21 14 9 9z"
  })),
  bolt: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M13 2L4 14h7l-1 8 9-12h-7l1-8z"
  })),
  settings: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M19 12a7 7 0 0 0-.1-1.3l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2.3-1.3L13.8 2h-3.6l-.4 2.4a7 7 0 0 0-2.3 1.3l-2.3-1-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.3l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2.3 1.3l.4 2.4h3.6l.4-2.4a7 7 0 0 0 2.3-1.3l2.3 1 2-3.4-2-1.5A7 7 0 0 0 19 12z"
  })),
  message: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M21 11.5a8.4 8.4 0 0 1-9 8 9 9 0 0 1-4-1L3 20l1.5-4.5a8.4 8.4 0 0 1-1-4A8.4 8.4 0 0 1 12 3.5a8.4 8.4 0 0 1 9 8z"
  })),
  pen: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 20h9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"
  })),
  bell: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10.3 21a1.9 1.9 0 0 0 3.4 0"
  })),
  eye: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "3"
  })),
  eyeOff: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M9.9 5.2A9.6 9.6 0 0 1 12 5c6.5 0 10 7 10 7a13.2 13.2 0 0 1-2.2 2.9M6.1 6.1A13.2 13.2 0 0 0 2 12s3.5 7 10 7a9.4 9.4 0 0 0 4-0.9M3 3l18 18M9.9 9.9a3 3 0 0 0 4.2 4.2"
  })),
  lock: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("rect", {
    x: "4",
    y: "11",
    width: "16",
    height: "9",
    rx: "2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8 11V8a4 4 0 0 1 8 0v3"
  })),
  grip: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "6",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "15",
    cy: "6",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "12",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "15",
    cy: "12",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "18",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "15",
    cy: "18",
    r: "1.3"
  })),
  trash: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"
  })),
  check: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M4 12.5l5 5L20 6"
  })),
  up: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 19V5M5 12l7-7 7 7"
  })),
  down: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 5v14M5 12l7 7 7-7"
  })),
  heart: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 21C5 16 3 12 3 8.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 9 2.5C21 12 19 16 12 21z"
  })),
  palette: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.5 0-1 .8-1.5 1.7-1.5H17a4 4 0 0 0 4-4 9 9 0 0 0-9-9z"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "7.5",
    cy: "10.5",
    r: "1"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "7.5",
    r: "1"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "16.5",
    cy: "10.5",
    r: "1"
  })),
  instagram: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "3",
    width: "18",
    height: "18",
    rx: "5"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "17.5",
    cy: "6.5",
    r: "0.7",
    fill: "currentColor",
    stroke: "none"
  })),
  youtube: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "6",
    width: "18",
    height: "12",
    rx: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10 9.5l5 2.5-5 2.5v-5z",
    fill: "currentColor",
    stroke: "none"
  })),
  spotify: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M7.5 10c3-1 6-.5 8.5 1M8 13c2.3-.7 4.7-.3 6.5 1M8.5 16c1.7-.5 3.4-.2 4.7.7"
  }))
};
const TONES = ['lilac', 'mint', 'coral', 'peach', 'sun', 'sky'];
const eyebrow = {
  fontFamily: 'var(--font-mono)',
  fontSize: 10.5,
  textTransform: 'uppercase',
  letterSpacing: '0.08em',
  color: 'var(--ink-3)'
};
const mono = {
  fontFamily: 'var(--font-mono)'
};
const fmt = n => n >= 1000 ? (n / 1000).toFixed(1).replace('.0', '') + 'k' : '' + n;
function Mono({
  label,
  size = 40,
  tone,
  style
}) {
  const t = tone || TONES[(label.charCodeAt(0) + label.length) % TONES.length];
  return /*#__PURE__*/React.createElement("span", {
    style: {
      width: size,
      height: size,
      flex: 'none',
      borderRadius: '50%',
      background: `var(--${t}-3)`,
      color: `var(--${t}-d)`,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: 'var(--font-display)',
      fontWeight: 700,
      fontSize: size * 0.36,
      letterSpacing: '-0.02em',
      ...style
    }
  }, label.slice(0, 2).toUpperCase());
}
function Spark({
  data,
  color
}) {
  const peak = data.indexOf(Math.max(...data));
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-end',
      gap: 2,
      height: 24,
      width: 70
    }
  }, data.map((h, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      flex: 1,
      height: `${h}%`,
      borderRadius: '2px 2px 0 0',
      background: color,
      opacity: i === peak ? 0.95 : 0.4
    }
  })));
}

/* ── Default profile (single source of truth) ────────────────── */
const DEFAULT = {
  name: 'Alex Rivera',
  handle: 'alexrivera',
  avatar: 'AR',
  accent: 'lilac',
  verified: true,
  bio: "Product designer & creator. I collect good links so you don't have to — every one here is governed, checked and safe to click.",
  location: 'Brooklyn, NY',
  website: 'alexrivera.design',
  joined: '2021',
  socials: {
    instagram: 'alexrivera',
    youtube: 'alexrivera',
    spotify: 'alexrivera',
    website: 'alexrivera.design'
  },
  privacy: {
    isPublic: true,
    showFollowers: true,
    allowFollow: true,
    allowMessages: true
  },
  stats: {
    followers: 12400,
    following: 348
  },
  links: [{
    id: 'folio',
    tone: 'lilac',
    mono: 'AR',
    title: 'Portfolio — 2026 case studies',
    slug: 'alex-folio',
    host: 'alexrivera.design',
    clicks: '48.2k',
    state: 'active',
    tag: 'Design',
    spark: [40, 55, 48, 62, 70, 66, 84],
    pinned: true,
    visible: true
  }, {
    id: 'drop',
    tone: 'coral',
    mono: 'SP',
    title: 'Spring drop — limited prints',
    slug: 'spring-drop',
    host: 'shop.alexrivera.design',
    clicks: '12.8k',
    state: 'active',
    tag: 'Shop',
    spark: [30, 42, 38, 55, 60, 72, 68],
    pinned: false,
    visible: true
  }, {
    id: 'news',
    tone: 'mint',
    mono: 'TL',
    title: 'The Thin Line — weekly newsletter',
    slug: 'thin-line',
    host: 'thinline.substack.com',
    clicks: '9.4k',
    state: 'active',
    tag: 'Writing',
    spark: [22, 30, 40, 38, 52, 60, 58],
    pinned: false,
    visible: true
  }, {
    id: 'talk',
    tone: 'sky',
    mono: 'YT',
    title: 'Talk: Designing for trust',
    slug: 'trust-talk',
    host: 'youtube.com',
    clicks: '21.7k',
    state: 'active',
    tag: 'Video',
    spark: [18, 26, 34, 48, 55, 70, 64],
    pinned: false,
    visible: true
  }, {
    id: 'promo',
    tone: 'peach',
    mono: 'PR',
    title: 'Holiday promo (ended)',
    slug: 'promo-25',
    host: 'shop.alexrivera.design',
    clicks: '6.1k',
    state: 'expired',
    tag: 'Shop',
    spark: [60, 50, 40, 30, 20, 14, 10],
    pinned: false,
    visible: false
  }],
  collections: [{
    tone: 'lilac',
    icon: 'bolt',
    title: 'Design tools',
    count: 18
  }, {
    tone: 'mint',
    icon: 'globe',
    title: 'Reading list',
    count: 24
  }, {
    tone: 'coral',
    icon: 'bookmark',
    title: 'Inspiration',
    count: 31
  }]
};
const FOLLOWERS = ['JM', 'KW', 'TS', 'RP', 'MN', 'LC', 'DV', 'AH', 'SB', 'EO', 'GR', 'PT'];

/* ── Public profile renderer (used by page + editor preview) ──── */
function PublicProfile({
  profile,
  narrow = false
}) {
  const {
    Button,
    StatusPill,
    Badge,
    Card
  } = DS;
  const [following, setFollowing] = useState(false);
  const [followers, setFollowers] = useState(profile.stats.followers);
  const [notify, setNotify] = useState(true);
  const [saved, setSaved] = useState(() => new Set());
  const accent = profile.accent || 'lilac';
  const toggleFollow = () => {
    setFollowing(f => !f);
    setFollowers(n => n + (following ? -1 : 1));
  };
  const toggleSave = id => setSaved(s => {
    const n = new Set(s);
    n.has(id) ? n.delete(id) : n.add(id);
    return n;
  });
  const fLabel = fmt(following ? followers : profile.stats.followers);
  const live = profile.links.filter(l => l.visible !== false && l.state === 'active');
  const pinned = live.find(l => l.pinned) || null;
  const rows = live.filter(l => l !== pinned);
  const activeSocials = Object.entries(profile.socials).filter(([k, v]) => v && I[k]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: narrow ? '1fr' : 'minmax(0,1fr) 320px',
      gap: 14,
      alignItems: 'start'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 14,
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      overflow: 'hidden',
      borderRadius: 'var(--radius-bento)',
      background: 'var(--ink-1)',
      color: 'var(--canvas-2)',
      padding: narrow ? '26px 22px' : '32px 32px 28px'
    }
  }, /*#__PURE__*/React.createElement(Glow, {
    style: {
      top: '-45%',
      right: '-8%',
      width: 380,
      height: 380,
      color: 'rgba(124,58,237,0.26)'
    }
  }), /*#__PURE__*/React.createElement(Glow, {
    style: {
      bottom: '-55%',
      left: '6%',
      width: 320,
      height: 320,
      color: `var(--${accent}-d)`,
      opacity: 0.16
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      alignItems: narrow ? 'center' : 'flex-start',
      textAlign: narrow ? 'center' : 'left'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: narrow ? 88 : 100,
      height: narrow ? 88 : 100,
      borderRadius: '50%',
      padding: 3,
      background: `linear-gradient(135deg, var(--violet-500), var(--${accent}))`
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      background: 'var(--ink-1)',
      padding: 3
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: profile.avatar,
    tone: accent,
    size: narrow ? 76 : 88,
    style: {
      background: `var(--${accent}-3)`
    }
  }))), profile.verified && /*#__PURE__*/React.createElement("span", {
    title: "Verified safe",
    style: {
      position: 'absolute',
      right: 0,
      bottom: 2,
      width: 28,
      height: 28,
      borderRadius: '50%',
      background: 'var(--mint-d)',
      color: '#fff',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      border: '3px solid var(--ink-1)'
    }
  }, /*#__PURE__*/React.createElement(I.check, {
    size: 13,
    sw: 2.6
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 9,
      flexWrap: 'wrap',
      justifyContent: narrow ? 'center' : 'flex-start',
      marginTop: 16
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      margin: 0,
      fontFamily: 'var(--font-display)',
      fontSize: narrow ? 26 : 32,
      fontWeight: 800,
      letterSpacing: '-0.03em',
      lineHeight: 1
    }
  }, profile.name), profile.verified && /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5,
      padding: '4px 10px',
      borderRadius: 'var(--radius-pill)',
      background: 'rgba(183,230,208,0.16)',
      color: 'var(--mint)',
      fontSize: 11.5,
      fontWeight: 600
    }
  }, /*#__PURE__*/React.createElement(I.shield, {
    size: 12
  }), " Verified safe")), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 13,
      color: 'var(--violet-400)',
      marginTop: 7
    }
  }, "thin.ly/@", profile.handle), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: '12px 0 0',
      maxWidth: 460,
      fontSize: 14,
      lineHeight: 1.6,
      color: 'rgba(255,255,255,0.72)'
    }
  }, profile.bio), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 14,
      marginTop: 12,
      flexWrap: 'wrap',
      justifyContent: narrow ? 'center' : 'flex-start',
      fontSize: 12.5,
      color: 'rgba(255,255,255,0.55)'
    }
  }, profile.location && /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5
    }
  }, /*#__PURE__*/React.createElement(I.pin, {
    size: 13
  }), " ", profile.location), profile.website && /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5
    }
  }, /*#__PURE__*/React.createElement(I.globe, {
    size: 13
  }), " ", profile.website), /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5
    }
  }, /*#__PURE__*/React.createElement(I.bolt, {
    size: 13
  }), " Joined ", profile.joined)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 10,
      marginTop: 18,
      flexWrap: 'wrap',
      justifyContent: narrow ? 'center' : 'flex-start'
    }
  }, profile.privacy.allowFollow && (following ? /*#__PURE__*/React.createElement(Button, {
    variant: "soft",
    tone: "mint",
    icon: /*#__PURE__*/React.createElement(I.check, {
      size: 15
    }),
    onClick: toggleFollow
  }, "Following") : /*#__PURE__*/React.createElement(Button, {
    variant: "accent",
    icon: /*#__PURE__*/React.createElement(I.plus, {
      size: 15
    }),
    onClick: toggleFollow
  }, "Follow")), profile.privacy.allowMessages && /*#__PURE__*/React.createElement("button", {
    style: ghostOnDark,
    onClick: () => {}
  }, /*#__PURE__*/React.createElement(I.message, {
    size: 15
  }), " Message"), /*#__PURE__*/React.createElement("button", {
    style: {
      ...ghostOnDark,
      padding: '9px 12px'
    }
  }, /*#__PURE__*/React.createElement(I.share, {
    size: 15
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 22,
      marginTop: 18
    }
  }, [['Followers', fLabel, profile.privacy.showFollowers], ['Following', '' + profile.stats.following, true], ['Links', '' + live.length, true]].filter(s => s[2]).map(([k, v]) => /*#__PURE__*/React.createElement("div", {
    key: k
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 22,
      fontWeight: 800,
      letterSpacing: '-0.02em'
    }
  }, v), /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      color: 'rgba(255,255,255,0.5)',
      marginTop: 2
    }
  }, k)))), profile.privacy.showFollowers && /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 10,
      marginTop: 16,
      justifyContent: narrow ? 'center' : 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex'
    }
  }, FOLLOWERS.slice(0, 5).map((f, i) => /*#__PURE__*/React.createElement("span", {
    key: f,
    style: {
      marginLeft: i ? -10 : 0,
      border: '2px solid var(--ink-1)',
      borderRadius: '50%'
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: f,
    size: 28
  })))), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 12,
      color: 'rgba(255,255,255,0.6)'
    }
  }, "Followed by ", /*#__PURE__*/React.createElement("b", {
    style: {
      color: '#fff'
    }
  }, "maya"), " & ", fLabel, " more")))), /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      marginTop: 2
    }
  }, "Links \xB7 all verified safe"), pinned && /*#__PURE__*/React.createElement(Card, {
    tone: "coral",
    interactive: true,
    padding: 20
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      padding: '4px 10px',
      borderRadius: 'var(--radius-pill)',
      background: 'var(--sun)',
      color: 'var(--ink-1)',
      fontSize: 11,
      fontWeight: 700
    }
  }, /*#__PURE__*/React.createElement(I.pin, {
    size: 12
  }), " Pinned"), /*#__PURE__*/React.createElement(SaveBtn, {
    on: saved.has(pinned.id),
    onClick: () => toggleSave(pinned.id)
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 14,
      alignItems: 'center',
      marginTop: 14
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: pinned.mono,
    tone: pinned.tone,
    size: 48,
    style: {
      background: 'var(--canvas-2)'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 19,
      fontWeight: 800,
      letterSpacing: '-0.02em',
      lineHeight: 1.15
    }
  }, pinned.title), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 12,
      marginTop: 5
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, "thin.ly/"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--violet-500)',
      fontWeight: 600
    }
  }, pinned.slug))), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'right',
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 22,
      fontWeight: 800
    }
  }, pinned.clicks), /*#__PURE__*/React.createElement("div", {
    style: eyebrow
  }, "clicks"))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginTop: 14
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 8
    }
  }, /*#__PURE__*/React.createElement(StatusPill, {
    state: "safe"
  }), /*#__PURE__*/React.createElement(Badge, {
    tone: "lilac"
  }, pinned.tag)), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    size: "sm",
    trailingIcon: /*#__PURE__*/React.createElement(I.external, {
      size: 14
    })
  }, "Visit"))), rows.map(l => /*#__PURE__*/React.createElement(LinkRow, {
    key: l.id,
    l: l,
    on: saved.has(l.id),
    onSave: () => toggleSave(l.id),
    narrow: narrow
  }))), !narrow && /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 14
    }
  }, /*#__PURE__*/React.createElement(SubscribeCard, {
    accent: accent,
    following: following,
    onFollow: toggleFollow,
    notify: notify,
    setNotify: setNotify,
    allow: profile.privacy.allowFollow
  }), profile.privacy.showFollowers && /*#__PURE__*/React.createElement(FollowersCard, {
    label: fLabel
  }), activeSocials.length > 0 && /*#__PURE__*/React.createElement(SocialsCard, {
    socials: activeSocials
  }), /*#__PURE__*/React.createElement(TrustCard, null)), narrow && profile.privacy.allowFollow && /*#__PURE__*/React.createElement(SubscribeCard, {
    accent: accent,
    following: following,
    onFollow: toggleFollow,
    notify: notify,
    setNotify: setNotify,
    allow: true
  }));
}
function LinkRow({
  l,
  on,
  onSave,
  narrow
}) {
  const {
    StatusPill,
    Badge
  } = DS;
  const [hover, setHover] = useState(false);
  return /*#__PURE__*/React.createElement("div", {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 14,
      background: 'var(--canvas-2)',
      border: '1px solid var(--line-1)',
      borderRadius: 'var(--radius-bento)',
      padding: '13px 16px',
      boxShadow: hover ? 'var(--shadow-bento)' : 'var(--shadow-bento-sm)',
      transform: hover ? 'translateY(-2px)' : 'none',
      transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)'
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: l.mono,
    tone: l.tone,
    size: 42,
    style: {
      borderRadius: 13
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      flex: '0 1 auto',
      minWidth: 0,
      fontSize: 14.5,
      fontWeight: 600,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    }
  }, l.title), /*#__PURE__*/React.createElement("span", {
    style: {
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement(Badge, {
    tone: "neutral",
    variant: "outline",
    mono: true
  }, l.tag))), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 12,
      marginTop: 4
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, "thin.ly/"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--violet-500)',
      fontWeight: 600
    }
  }, l.slug))), !narrow && /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement(Spark, {
    data: l.spark,
    color: `var(--${l.tone}-d)`
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'right',
      flex: 'none',
      width: 58
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 17,
      fontWeight: 800
    }
  }, l.clicks), /*#__PURE__*/React.createElement("div", {
    style: eyebrow
  }, "clicks")), !narrow && /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement(StatusPill, {
    state: "safe"
  })), /*#__PURE__*/React.createElement(SaveBtn, {
    on: on,
    onClick: onSave
  }));
}
function SubscribeCard({
  accent,
  following,
  onFollow,
  notify,
  setNotify,
  allow
}) {
  const {
    Button,
    Switch
  } = DS;
  if (!allow) return null;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      overflow: 'hidden',
      borderRadius: 'var(--radius-bento)',
      background: 'var(--ink-1)',
      color: 'var(--canvas-2)',
      padding: 20
    }
  }, /*#__PURE__*/React.createElement(Glow, {
    style: {
      top: '-40%',
      right: '-15%',
      width: 200,
      height: 200,
      color: 'rgba(124,58,237,0.3)'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      color: 'rgba(255,255,255,0.5)'
    }
  }, "Stay in the loop"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 18,
      fontWeight: 800,
      letterSpacing: '-0.01em',
      marginTop: 4,
      lineHeight: 1.2
    }
  }, "Follow for new links first"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: '8px 0 14px',
      fontSize: 13,
      color: 'rgba(255,255,255,0.62)'
    }
  }, "Get notified when ", following ? 'Alex' : 'this creator', " publishes a new governed link."), following ? /*#__PURE__*/React.createElement(Button, {
    variant: "soft",
    tone: "mint",
    full: true,
    icon: /*#__PURE__*/React.createElement(I.check, {
      size: 15
    }),
    onClick: onFollow
  }, "Following") : /*#__PURE__*/React.createElement(Button, {
    variant: "accent",
    full: true,
    icon: /*#__PURE__*/React.createElement(I.plus, {
      size: 15
    }),
    onClick: onFollow
  }, "Follow"), /*#__PURE__*/React.createElement("label", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginTop: 14,
      fontSize: 13,
      color: 'rgba(255,255,255,0.8)'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8
    }
  }, /*#__PURE__*/React.createElement(I.bell, {
    size: 14
  }), " Notify on new link"), /*#__PURE__*/React.createElement(Switch, {
    checked: notify,
    onChange: setNotify,
    tone: "mint"
  }))));
}
function FollowersCard({
  label
}) {
  const {
    Card
  } = DS;
  return /*#__PURE__*/React.createElement(Card, {
    padding: 20
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: eyebrow
  }, "Followers"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, /*#__PURE__*/React.createElement(I.users, {
    size: 16
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 28,
      fontWeight: 800,
      letterSpacing: '-0.02em',
      marginTop: 6
    }
  }, label), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(6, 1fr)',
      gap: 8,
      marginTop: 14
    }
  }, FOLLOWERS.slice(0, 11).map(f => /*#__PURE__*/React.createElement(Mono, {
    key: f,
    label: f,
    size: 36
  })), /*#__PURE__*/React.createElement("span", {
    style: {
      width: 36,
      height: 36,
      borderRadius: '50%',
      background: 'var(--ink-1)',
      color: 'var(--canvas-2)',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      ...mono,
      fontSize: 10,
      fontWeight: 600
    }
  }, "+12k")));
}
function SocialsCard({
  socials
}) {
  const {
    Card
  } = DS;
  return /*#__PURE__*/React.createElement(Card, {
    padding: 18
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      marginBottom: 12
    }
  }, "Find me elsewhere"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 8
    }
  }, socials.map(([k, v]) => {
    const Ico = I[k] || I.globe;
    return /*#__PURE__*/React.createElement("a", {
      key: k,
      href: "#",
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 11,
        padding: '9px 12px',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--line-1)',
        color: 'var(--ink-1)'
      }
    }, /*#__PURE__*/React.createElement(Ico, {
      size: 17
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: 13.5,
        fontWeight: 500,
        textTransform: 'capitalize'
      }
    }, k === 'website' ? v : '@' + v), /*#__PURE__*/React.createElement("span", {
      style: {
        marginLeft: 'auto',
        color: 'var(--ink-4)'
      }
    }, /*#__PURE__*/React.createElement(I.external, {
      size: 14
    })));
  })));
}
function TrustCard() {
  const {
    Card
  } = DS;
  return /*#__PURE__*/React.createElement(Card, {
    tone: "mint",
    padding: 18
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 13,
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 42,
      height: 42,
      flex: 'none',
      borderRadius: 13,
      background: 'var(--canvas-2)',
      color: 'var(--mint-d)',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/React.createElement(I.shield, {
    size: 21
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 700
    }
  }, "All links verified safe"), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 11.5,
      color: 'var(--mint-d)',
      marginTop: 3
    }
  }, "// governed \xB7 checked \xB7 safe to click"))));
}
function SaveBtn({
  on,
  onClick
}) {
  return /*#__PURE__*/React.createElement("button", {
    onClick: onClick,
    "aria-label": "Save link",
    style: {
      width: 36,
      height: 36,
      flex: 'none',
      borderRadius: 11,
      border: '1px solid var(--line-1)',
      background: on ? 'var(--lilac-3)' : 'var(--canvas-2)',
      color: on ? 'var(--violet-500)' : 'var(--ink-3)',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
      transition: 'all var(--dur-base) var(--ease-out)'
    }
  }, on ? /*#__PURE__*/React.createElement(I.bookmarkFill, {
    size: 16
  }) : /*#__PURE__*/React.createElement(I.bookmark, {
    size: 16
  }));
}
function Glow({
  style
}) {
  const {
    color,
    opacity,
    ...rest
  } = style;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      borderRadius: '50%',
      pointerEvents: 'none',
      opacity: opacity != null ? opacity : 1,
      background: `radial-gradient(circle, ${color}, transparent 70%)`,
      ...rest
    }
  });
}
const ghostOnDark = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: 7,
  padding: '9px 16px',
  borderRadius: 'var(--radius-pill)',
  border: '1px solid rgba(255,255,255,0.16)',
  background: 'rgba(255,255,255,0.06)',
  color: 'var(--canvas-2)',
  fontSize: 14,
  fontWeight: 600,
  cursor: 'pointer'
};
window.PK = {
  I,
  Mono,
  Spark,
  eyebrow,
  mono,
  fmt,
  DEFAULT,
  FOLLOWERS,
  TONES,
  PublicProfile,
  Glow,
  ghostOnDark,
  SaveBtn
};
})(); } catch (e) { __ds_ns.__errors.push({ path: "design_handoff_user_profile/profile-kit.jsx", error: String((e && e.message) || e) }); }

// ui_kits/thinly-app/AppShell.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); }
/* thin.ly UI kit — App shell (sidebar + top bar). Exports window.AppShell. */
const {
  Button: ShellButton,
  Badge: ShellBadge
} = window.KitUI;
function NavItem({
  icon,
  label,
  active,
  badge,
  onClick
}) {
  const [hover, setHover] = React.useState(false);
  const Icon = window.Icons[icon];
  return /*#__PURE__*/React.createElement("button", {
    onClick: onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 11,
      width: '100%',
      padding: '9px 12px',
      borderRadius: 'var(--radius-md)',
      border: 'none',
      background: active ? 'rgba(124,58,237,0.10)' : hover ? 'rgba(0,0,0,0.03)' : 'transparent',
      color: active ? 'var(--violet-500)' : 'var(--ink-2)',
      fontFamily: 'var(--font-sans)',
      fontSize: 14,
      fontWeight: active ? 600 : 500,
      cursor: 'pointer',
      transition: 'background var(--dur-fast) var(--ease-out)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    size: 18,
    style: {
      color: active ? 'var(--violet-500)' : 'var(--ink-3)'
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      flex: 1,
      textAlign: 'left'
    }
  }, label), badge != null && /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      fontWeight: 600,
      padding: '1px 7px',
      borderRadius: 'var(--radius-pill)',
      background: active ? 'rgba(124,58,237,0.16)' : 'var(--canvas-1)',
      color: active ? 'var(--violet-500)' : 'var(--ink-4)'
    }
  }, badge));
}
function AppShell({
  active,
  onNav,
  children
}) {
  const nav = [{
    key: 'dashboard',
    icon: 'grid',
    label: 'Dashboard'
  }, {
    key: 'governance',
    icon: 'shield',
    label: 'Governance',
    badge: '128'
  }, {
    key: 'campaigns',
    icon: 'megaphone',
    label: 'Campaigns',
    badge: '6'
  }, {
    key: 'qr',
    icon: 'qr',
    label: 'QR Codes'
  }, {
    key: 'pages',
    icon: 'page',
    label: 'Pages'
  }, {
    key: 'analytics',
    icon: 'chart',
    label: 'Analytics'
  }];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      minHeight: '100%',
      background: 'var(--canvas-1)',
      fontFamily: 'var(--font-sans)'
    }
  }, /*#__PURE__*/React.createElement("aside", {
    style: {
      width: 232,
      flex: 'none',
      background: 'var(--canvas-2)',
      borderRight: '1px solid var(--line-1)',
      padding: '18px 16px',
      display: 'flex',
      flexDirection: 'column',
      position: 'sticky',
      top: 0,
      alignSelf: 'flex-start',
      height: '100vh'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      padding: '4px 8px 18px'
    }
  }, /*#__PURE__*/React.createElement("img", {
    src: "../../assets/logo-wordmark.svg",
    alt: "thin.ly",
    style: {
      height: 26
    }
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-4)',
      padding: '0 12px 8px'
    }
  }, "Workspace"), /*#__PURE__*/React.createElement("nav", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 3
    }
  }, nav.map(n => /*#__PURE__*/React.createElement(NavItem, _extends({
    key: n.key
  }, n, {
    active: active === n.key,
    onClick: () => onNav(n.key)
  })))), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 'auto'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      overflow: 'hidden',
      background: 'var(--forest)',
      color: 'var(--canvas-2)',
      borderRadius: 'var(--radius-bento)',
      padding: 16
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      bottom: -30,
      right: -30,
      width: 120,
      height: 120,
      borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(183,230,208,0.18), transparent 70%)'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 13,
      fontWeight: 800,
      textTransform: 'uppercase',
      letterSpacing: '0.04em'
    }
  }, "Pro"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: 'rgba(255,255,255,0.7)',
      marginTop: 4,
      marginBottom: 12
    }
  }, "2,140 / 5,000 links used"), /*#__PURE__*/React.createElement("div", {
    style: {
      height: 5,
      borderRadius: 4,
      background: 'rgba(255,255,255,0.15)',
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: '43%',
      height: '100%',
      background: 'var(--mint)'
    }
  })), /*#__PURE__*/React.createElement("button", {
    style: {
      marginTop: 12,
      width: '100%',
      padding: '7px',
      borderRadius: 'var(--radius-pill)',
      border: 'none',
      background: 'var(--sun)',
      color: 'var(--ink-1)',
      fontFamily: 'var(--font-sans)',
      fontSize: 12.5,
      fontWeight: 600,
      cursor: 'pointer'
    }
  }, "Upgrade plan")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 9,
      marginTop: 14,
      padding: '0 6px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 30,
      height: 30,
      borderRadius: '50%',
      background: 'linear-gradient(135deg, var(--lilac), var(--sky))',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: 13,
      fontWeight: 700,
      color: 'var(--ink-1)'
    }
  }, "A"), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      fontWeight: 600,
      color: 'var(--ink-1)'
    }
  }, "alex rivera"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      color: 'var(--ink-4)',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  }, "alex@studio.co"))))), /*#__PURE__*/React.createElement("main", {
    style: {
      flex: 1,
      minWidth: 0,
      padding: '22px 28px 60px'
    }
  }, children));
}
window.AppShell = AppShell;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/thinly-app/AppShell.jsx", error: String((e && e.message) || e) }); }

// ui_kits/thinly-app/Dashboard.jsx
try { (() => {
/* thin.ly UI kit — Dashboard (bento grid). Exports window.DashboardScreen. */
const DS_dash = window.KitUI;
function TopBar({
  title,
  sub
}) {
  const I = window.Icons;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-start',
      justifyContent: 'space-between',
      gap: 16,
      flexWrap: 'wrap',
      marginBottom: 18
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      margin: 0,
      fontFamily: 'var(--font-display)',
      fontSize: 30,
      fontWeight: 800,
      letterSpacing: '-0.025em',
      lineHeight: 1.05,
      color: 'var(--ink-1)'
    }
  }, title, " ", /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--violet-500)'
    }
  }, "alex"), " ", /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-block',
      transformOrigin: '70% 70%',
      animation: 'thinly-wave 2.5s ease-in-out infinite'
    }
  }, "\uD83D\uDC4B")), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 4,
      fontFamily: 'var(--font-mono)',
      fontSize: 12,
      color: 'var(--ink-3)'
    }
  }, sub, " ", /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--mint-d)'
    }
  }, "\xB7"), " 12 links live")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 10
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      padding: '8px 14px',
      borderRadius: 'var(--radius-pill)',
      border: '1px solid var(--line-1)',
      background: 'var(--canvas-2)',
      width: 240
    }
  }, /*#__PURE__*/React.createElement(I.search, {
    size: 15,
    style: {
      color: 'var(--ink-3)'
    }
  }), /*#__PURE__*/React.createElement("input", {
    placeholder: "Search links, campaigns\u2026",
    style: {
      flex: 1,
      minWidth: 0,
      border: 'none',
      outline: 'none',
      background: 'transparent',
      fontFamily: 'var(--font-sans)',
      fontSize: 13.5,
      color: 'var(--ink-1)'
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      padding: '2px 6px',
      borderRadius: 6,
      background: 'var(--canvas-1)',
      color: 'var(--ink-4)'
    }
  }, "\u2318K")), /*#__PURE__*/React.createElement(DS_dash.Button, {
    variant: "primary",
    icon: /*#__PURE__*/React.createElement(I.plus, {
      size: 15
    })
  }, "New Link")));
}
function QuickShortener() {
  const I = window.Icons;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      overflow: 'hidden',
      borderRadius: 'var(--radius-bento)',
      background: 'linear-gradient(135deg, var(--ink-1), #1f1f28)',
      color: 'var(--canvas-2)',
      padding: '18px 22px',
      marginBottom: 14
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      right: '-8%',
      top: '-50%',
      width: 340,
      height: 340,
      borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(124,58,237,0.20), transparent 70%)',
      pointerEvents: 'none'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      gap: 16,
      flexWrap: 'wrap'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 13
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 42,
      height: 42,
      flex: 'none',
      borderRadius: 12,
      background: 'linear-gradient(135deg, var(--violet-500), var(--violet-400))',
      boxShadow: '0 0 24px rgba(124,58,237,0.4)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement(I.link, {
    size: 20
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 17,
      fontWeight: 800,
      letterSpacing: '-0.015em'
    }
  }, "Shorten on the fly"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 11.5,
      color: 'rgba(255,255,255,0.5)'
    }
  }, "// instant \xB7 governed \xB7 safe"))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 10,
      flex: 1,
      minWidth: 280
    }
  }, /*#__PURE__*/React.createElement("input", {
    placeholder: "paste your long URL here\u2026",
    style: {
      flex: 1,
      minWidth: 0,
      borderRadius: 'var(--radius-pill)',
      border: '1px solid rgba(255,255,255,0.1)',
      background: 'rgba(255,255,255,0.06)',
      padding: '11px 18px',
      fontFamily: 'var(--font-mono)',
      fontSize: 13,
      color: '#fff',
      outline: 'none'
    }
  }), /*#__PURE__*/React.createElement("button", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 7,
      flex: 'none',
      borderRadius: 'var(--radius-pill)',
      border: 'none',
      background: 'linear-gradient(135deg, var(--violet-500), var(--violet-400))',
      color: '#fff',
      padding: '11px 22px',
      fontFamily: 'var(--font-sans)',
      fontSize: 14,
      fontWeight: 600,
      cursor: 'pointer',
      boxShadow: '0 4px 16px rgba(124,58,237,0.25)'
    }
  }, "Shorten ", /*#__PURE__*/React.createElement(I.arrow, {
    size: 15
  })))));
}
function Spark({
  data,
  peak,
  color
}) {
  const max = Math.max(...data);
  const w = 120,
    h = 34,
    step = w / (data.length - 1);
  const pts = data.map((v, i) => `${i * step},${h - v / max * h}`).join(' ');
  return /*#__PURE__*/React.createElement("svg", {
    viewBox: `0 0 ${w} ${h}`,
    width: "100%",
    height: "34",
    preserveAspectRatio: "none",
    style: {
      display: 'block'
    }
  }, /*#__PURE__*/React.createElement("polyline", {
    points: pts,
    fill: "none",
    stroke: color,
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: peak * step,
    cy: h - data[peak] / max * h,
    r: "2.6",
    fill: color
  }));
}
function MiniStat({
  tone,
  icon,
  label,
  value,
  sub,
  data,
  peak
}) {
  const I = window.Icons;
  const Icon = I[icon];
  const tints = {
    mint: ['var(--mint)', 'var(--mint-d)'],
    peach: ['var(--peach-2)', 'var(--peach-d)'],
    lilac: ['var(--lilac-2)', 'var(--lilac-d)'],
    sun: ['var(--sun-2)', 'var(--sun-d)']
  };
  const [bg, fg] = tints[tone];
  return /*#__PURE__*/React.createElement(DS_dash.Card, {
    tone: "plain",
    interactive: true,
    padding: 16,
    style: {
      background: bg
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 30,
      height: 30,
      borderRadius: 9,
      background: 'rgba(255,255,255,0.55)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: fg
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    size: 16
  })), /*#__PURE__*/React.createElement(I.arrow, {
    size: 14,
    style: {
      color: fg,
      transform: 'rotate(-45deg)'
    }
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 12,
      fontFamily: 'var(--font-display)',
      fontSize: 28,
      fontWeight: 800,
      lineHeight: 1,
      color: 'var(--ink-1)'
    }
  }, value), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 3,
      fontSize: 12.5,
      color: 'var(--ink-2)'
    }
  }, label, " ", /*#__PURE__*/React.createElement("span", {
    style: {
      color: fg
    }
  }, "\xB7 ", sub)), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 10
    }
  }, /*#__PURE__*/React.createElement(Spark, {
    data: data,
    peak: peak,
    color: fg
  })));
}
function DashboardScreen() {
  const I = window.Icons;
  const activity = [{
    name: 'Spring launch hub',
    short: 'thin.ly/launch-q3',
    clicks: '1,284',
    fav: 'var(--coral)'
  }, {
    name: 'Pricing — annual',
    short: 'thin.ly/pricing-yr',
    clicks: '842',
    fav: 'var(--sky)'
  }, {
    name: 'Newsletter signup',
    short: 'thin.ly/join',
    clicks: '517',
    fav: 'var(--lilac)'
  }];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 1180
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TopBar, {
    title: "Good morning,",
    sub: "Thursday, June 19"
  })), /*#__PURE__*/React.createElement(QuickShortener, null), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(12, 1fr)',
      gap: 14
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      gridColumn: 'span 5'
    }
  }, /*#__PURE__*/React.createElement(DS_dash.Card, {
    tone: "coral",
    interactive: true,
    padding: 24,
    style: {
      minHeight: 232,
      overflow: 'hidden',
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(DS_dash.Badge, {
    tone: "sun",
    variant: "solid",
    icon: /*#__PURE__*/React.createElement(I.bolt, {
      size: 12
    })
  }, "Featured"), /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: '14px 0 8px',
      maxWidth: '62%',
      fontFamily: 'var(--font-display)',
      fontSize: 30,
      fontWeight: 800,
      textTransform: 'uppercase',
      letterSpacing: '-0.02em',
      lineHeight: 1.05,
      color: 'var(--ink-1)'
    }
  }, "Link", /*#__PURE__*/React.createElement("br", null), "Governance"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: '0 0 16px',
      maxWidth: '58%',
      fontSize: 13.5,
      color: 'var(--ink-2)'
    }
  }, "Lifecycle control, routing rules & deep analytics \u2014 all in real time."), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 8
    }
  }, /*#__PURE__*/React.createElement(DS_dash.Button, {
    variant: "primary",
    size: "sm",
    trailingIcon: /*#__PURE__*/React.createElement(I.arrow, {
      size: 14
    })
  }, "Check it out"), /*#__PURE__*/React.createElement(DS_dash.Button, {
    variant: "ghost",
    size: "sm"
  }, "See all")), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      right: 18,
      top: 38,
      animation: 'thinly-float 5s ease-in-out infinite'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 120,
      height: 88,
      borderRadius: 10,
      background: '#fff',
      border: '1.5px solid var(--ink-1)',
      padding: 10,
      boxShadow: 'var(--shadow-bento-sm)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 4,
      marginBottom: 8
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 6,
      height: 6,
      borderRadius: 3,
      background: 'var(--coral)'
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      width: 6,
      height: 6,
      borderRadius: 3,
      background: 'var(--sun)'
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      width: 6,
      height: 6,
      borderRadius: 3,
      background: 'var(--mint)'
    }
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      height: 4,
      width: '60%',
      borderRadius: 2,
      background: 'var(--sky)',
      marginBottom: 6
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      height: 4,
      width: '90%',
      borderRadius: 2,
      background: 'var(--ink-1)',
      marginBottom: 6
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      height: 4,
      width: '75%',
      borderRadius: 2,
      background: 'var(--ink-1)'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 8,
      height: 14,
      width: 32,
      borderRadius: 7,
      background: 'var(--coral)'
    }
  }))))), /*#__PURE__*/React.createElement("div", {
    style: {
      gridColumn: 'span 4'
    }
  }, /*#__PURE__*/React.createElement(DS_dash.Card, {
    tone: "mint",
    padding: 18,
    style: {
      minHeight: 232
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginBottom: 12
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)'
    }
  }, "Live activity"), /*#__PURE__*/React.createElement(DS_dash.StatusPill, {
    state: "active",
    label: "live",
    live: true,
    size: "sm"
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 8
    }
  }, activity.map(a => /*#__PURE__*/React.createElement("div", {
    key: a.short,
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 11,
      borderRadius: 'var(--radius-sm)',
      background: 'var(--mint-3)',
      padding: '9px 12px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 30,
      height: 30,
      flex: 'none',
      borderRadius: 8,
      background: a.fav,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'var(--ink-1)'
    }
  }, /*#__PURE__*/React.createElement(I.link, {
    size: 15
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      fontWeight: 600,
      color: 'var(--ink-1)',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  }, a.name), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      color: 'var(--ink-3)',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  }, a.short)), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'right',
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 17,
      fontWeight: 800,
      lineHeight: 1,
      color: 'var(--ink-1)'
    }
  }, a.clicks), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 9,
      textTransform: 'uppercase',
      letterSpacing: '0.06em',
      color: 'var(--ink-3)'
    }
  }, "clicks"))))))), /*#__PURE__*/React.createElement("div", {
    style: {
      gridColumn: 'span 3'
    }
  }, /*#__PURE__*/React.createElement(DS_dash.Card, {
    dark: true,
    padding: 18,
    style: {
      minHeight: 232,
      position: 'relative',
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      bottom: -30,
      right: -30,
      width: 140,
      height: 140,
      borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(124,58,237,0.18), transparent 70%)'
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'rgba(255,255,255,0.5)'
    }
  }, "Portfolio health"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 18,
      display: 'flex',
      alignItems: 'baseline',
      gap: 6
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 46,
      fontWeight: 800,
      lineHeight: 1,
      color: 'var(--mint)'
    }
  }, "73", /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 22
    }
  }, "%"))), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12.5,
      color: 'rgba(255,255,255,0.6)',
      marginTop: 4
    }
  }, "of links live & safe"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 16,
      display: 'flex',
      flexDirection: 'column',
      gap: 8
    }
  }, [['Active', 94, 'var(--status-active)'], ['Paused', 21, 'var(--status-paused)'], ['Expired', 13, 'var(--status-expired)']].map(([l, n, c]) => /*#__PURE__*/React.createElement("div", {
    key: l,
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 8
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 7,
      height: 7,
      borderRadius: '50%',
      background: c
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      flex: 1,
      fontSize: 12.5,
      color: 'rgba(255,255,255,0.75)'
    }
  }, l), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 12.5,
      color: '#fff'
    }
  }, n)))))), /*#__PURE__*/React.createElement("div", {
    style: {
      gridColumn: 'span 3'
    }
  }, /*#__PURE__*/React.createElement(MiniStat, {
    tone: "mint",
    icon: "link",
    label: "Short Links",
    value: "128",
    sub: "94 active",
    data: [30, 45, 55, 50, 65, 72, 80],
    peak: 6
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      gridColumn: 'span 3'
    }
  }, /*#__PURE__*/React.createElement(MiniStat, {
    tone: "peach",
    icon: "megaphone",
    label: "Campaigns",
    value: "6",
    sub: "4 active",
    data: [40, 50, 60, 55, 75, 68, 72],
    peak: 4
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      gridColumn: 'span 3'
    }
  }, /*#__PURE__*/React.createElement(MiniStat, {
    tone: "lilac",
    icon: "qr",
    label: "QR Codes",
    value: "18",
    sub: "generated",
    data: [25, 38, 45, 55, 60, 78, 70],
    peak: 5
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      gridColumn: 'span 3'
    }
  }, /*#__PURE__*/React.createElement(MiniStat, {
    tone: "sun",
    icon: "page",
    label: "Pages",
    value: "4",
    sub: "published",
    data: [15, 20, 25, 35, 45, 55, 50],
    peak: 5
  }))));
}
window.DashboardScreen = DashboardScreen;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/thinly-app/Dashboard.jsx", error: String((e && e.message) || e) }); }

// ui_kits/thinly-app/GovernancePage.jsx
try { (() => {
/* thin.ly UI kit — Governance (stats + table + drawer). Exports window.GovernanceScreen. */
const DS_gov = window.KitUI;
const GOV_LINKS = [{
  id: 'l1',
  name: 'Spring launch hub',
  domain: 'thin.ly',
  slug: 'launch-q3',
  dest: 'studio.co/campaigns/spring-launch-2026',
  state: 'active',
  clicks: 12840,
  campaign: 'launch',
  rules: 3,
  cap: 72
}, {
  id: 'l2',
  name: 'Pricing — annual',
  domain: 'thin.ly',
  slug: 'pricing-yr',
  dest: 'studio.co/pricing?plan=annual',
  state: 'active',
  clicks: 8420,
  campaign: 'sale',
  rules: 1,
  cap: 54
}, {
  id: 'l3',
  name: 'Webinar replay',
  domain: 'thin.ly',
  slug: 'replay-may',
  dest: 'youtube.com/watch?v=8sfa2',
  state: 'paused',
  clicks: 3110,
  campaign: 'content',
  rules: 0,
  cap: 33
}, {
  id: 'l4',
  name: 'Early-bird tickets',
  domain: 'thin.ly',
  slug: 'tix-early',
  dest: 'events.studio.co/2025/early',
  state: 'expired',
  clicks: 5980,
  campaign: 'event',
  rules: 2,
  cap: 88
}, {
  id: 'l5',
  name: 'Press kit',
  domain: 'thin.ly',
  slug: 'press',
  dest: 'studio.co/press-kit.zip',
  state: 'active',
  clicks: 642,
  campaign: null,
  rules: 0,
  cap: 12
}, {
  id: 'l6',
  name: 'Affiliate — Q3',
  domain: 'thin.ly',
  slug: 'aff-q3',
  dest: 'partners.studio.co/r/q3',
  state: 'draft',
  clicks: 0,
  campaign: 'affiliate',
  rules: 1,
  cap: 0
}];
const STATE_META = {
  active: ['var(--status-active)', 'var(--status-active-bg)', 'check'],
  paused: ['var(--status-paused)', 'var(--status-paused-bg)', 'pause'],
  expired: ['var(--status-expired)', 'var(--status-expired-bg)', 'hourglass'],
  draft: ['var(--status-draft)', 'var(--status-draft-bg)', 'pen']
};
function GovStats() {
  const I = window.Icons;
  const items = [{
    label: 'Total Links',
    value: '128',
    delta: '73% active',
    dir: 'neutral',
    accent: 'var(--violet-500)',
    bg: 'rgba(124,58,237,0.10)',
    icon: 'link'
  }, {
    label: 'Active',
    value: '94',
    delta: '73% of portfolio live',
    dir: 'up',
    accent: 'var(--status-active)',
    bg: 'var(--status-active-bg)',
    icon: 'check'
  }, {
    label: 'Paused',
    value: '21',
    delta: 'traffic suspended',
    dir: 'down',
    accent: 'var(--status-paused)',
    bg: 'var(--status-paused-bg)',
    icon: 'pause'
  }, {
    label: 'Expired',
    value: '13',
    delta: 'past expiry date',
    dir: 'down',
    accent: 'var(--status-expired)',
    bg: 'var(--status-expired-bg)',
    icon: 'hourglass'
  }, {
    label: 'Draft',
    value: '4',
    delta: 'not yet active',
    dir: 'neutral',
    accent: 'var(--status-draft)',
    bg: 'var(--status-draft-bg)',
    icon: 'pen'
  }, {
    label: 'Total Clicks',
    value: '48.2k',
    delta: 'all-time traffic',
    dir: 'up',
    accent: 'var(--data-clicks)',
    bg: 'rgba(44,93,143,0.10)',
    icon: 'click'
  }];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(6, 1fr)',
      gap: 12,
      marginBottom: 18
    }
  }, items.map(s => {
    const Ic = I[s.icon];
    return /*#__PURE__*/React.createElement(DS_gov.StatTile, {
      key: s.label,
      label: s.label,
      value: s.value,
      delta: s.delta,
      dir: s.dir,
      accent: s.accent,
      accentBg: s.bg,
      icon: /*#__PURE__*/React.createElement(Ic, {
        size: 17
      })
    });
  }));
}
function LinkRow({
  link,
  onSelect,
  selected
}) {
  const I = window.Icons;
  const [c, bg, ic] = STATE_META[link.state];
  const Ic = I[ic];
  const [hover, setHover] = React.useState(false);
  return /*#__PURE__*/React.createElement("div", {
    onClick: () => onSelect(link),
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      display: 'grid',
      gridTemplateColumns: '2.2fr 1.4fr 1fr 0.8fr 40px',
      alignItems: 'center',
      gap: 12,
      padding: '13px 16px',
      cursor: 'pointer',
      borderBottom: '1px solid var(--line-1)',
      background: selected ? 'rgba(124,58,237,0.05)' : hover ? 'var(--canvas-1)' : 'transparent',
      transition: 'background var(--dur-fast) var(--ease-out)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 11,
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 34,
      height: 34,
      flex: 'none',
      borderRadius: '50%',
      border: '1px solid var(--line-1)',
      background: 'var(--canvas-1)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'var(--ink-3)'
    }
  }, /*#__PURE__*/React.createElement(I.globe, {
    size: 16
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 600,
      color: 'var(--ink-1)',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  }, link.name), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 11.5,
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, link.domain, "/"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--violet-500)',
      fontWeight: 600
    }
  }, link.slug)))), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 12,
      color: 'var(--ink-3)',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      display: 'flex',
      alignItems: 'center',
      gap: 6
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-4)'
    }
  }, "\u21B3"), link.dest), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      padding: '4px 10px 4px 8px',
      borderRadius: 'var(--radius-pill)',
      background: bg,
      color: c,
      fontSize: 12,
      fontWeight: 600,
      textTransform: 'capitalize'
    }
  }, /*#__PURE__*/React.createElement(Ic, {
    size: 13
  }), link.state)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 5,
      justifyContent: 'flex-end'
    }
  }, /*#__PURE__*/React.createElement(I.click, {
    size: 12,
    style: {
      color: 'var(--data-clicks)'
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 13,
      fontWeight: 700,
      color: 'var(--ink-1)'
    }
  }, link.clicks.toLocaleString())), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'flex-end',
      color: 'var(--ink-4)'
    }
  }, /*#__PURE__*/React.createElement(I.dots, {
    size: 16
  })));
}
function Drawer({
  link,
  onClose
}) {
  const I = window.Icons;
  if (!link) return null;
  const [c, bg, ic] = STATE_META[link.state];
  const Ic = I[ic];
  return /*#__PURE__*/React.createElement("div", {
    onClick: onClose,
    style: {
      position: 'absolute',
      inset: 0,
      zIndex: 40,
      background: 'rgba(20,20,30,0.28)',
      backdropFilter: 'blur(2px)',
      display: 'flex',
      justifyContent: 'flex-end'
    }
  }, /*#__PURE__*/React.createElement("div", {
    onClick: e => e.stopPropagation(),
    style: {
      width: 400,
      maxWidth: '90%',
      height: '100%',
      background: 'var(--canvas-2)',
      boxShadow: 'var(--shadow-bento-lift)',
      padding: 24,
      overflowY: 'auto',
      animation: 'thinly-fadeIn 0.25s var(--ease-out)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-start',
      justifyContent: 'space-between',
      gap: 12
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      padding: '4px 10px 4px 8px',
      borderRadius: 'var(--radius-pill)',
      background: bg,
      color: c,
      fontSize: 12,
      fontWeight: 600,
      textTransform: 'capitalize'
    }
  }, /*#__PURE__*/React.createElement(Ic, {
    size: 13
  }), link.state), /*#__PURE__*/React.createElement("h3", {
    style: {
      margin: '12px 0 4px',
      fontFamily: 'var(--font-display)',
      fontSize: 22,
      fontWeight: 800,
      letterSpacing: '-0.02em',
      color: 'var(--ink-1)'
    }
  }, link.name)), /*#__PURE__*/React.createElement("button", {
    onClick: onClose,
    style: {
      border: 'none',
      background: 'var(--canvas-1)',
      width: 30,
      height: 30,
      borderRadius: '50%',
      cursor: 'pointer',
      color: 'var(--ink-3)',
      fontSize: 16
    }
  }, "\u2715")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      marginTop: 8,
      padding: '10px 14px',
      borderRadius: 'var(--radius-md)',
      background: 'var(--canvas-1)',
      border: '1px solid var(--line-1)'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      flex: 1,
      fontFamily: 'var(--font-mono)',
      fontSize: 13
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, link.domain, "/"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--violet-500)',
      fontWeight: 600
    }
  }, link.slug)), /*#__PURE__*/React.createElement("button", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5,
      border: 'none',
      background: 'var(--ink-1)',
      color: '#fff',
      padding: '6px 12px',
      borderRadius: 'var(--radius-pill)',
      fontSize: 12,
      fontWeight: 600,
      cursor: 'pointer',
      fontFamily: 'var(--font-sans)'
    }
  }, /*#__PURE__*/React.createElement(I.copy, {
    size: 13
  }), "Copy")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 10,
      marginTop: 16
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 14,
      borderRadius: 'var(--radius-md)',
      background: 'var(--mint-3)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)'
    }
  }, "Clicks"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 26,
      fontWeight: 800,
      color: 'var(--ink-1)',
      marginTop: 4
    }
  }, link.clicks.toLocaleString())), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 14,
      borderRadius: 'var(--radius-md)',
      background: 'var(--sky-3)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)'
    }
  }, "Cap used"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 26,
      fontWeight: 800,
      color: 'var(--ink-1)',
      marginTop: 4
    }
  }, link.cap, "%"))), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 18
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)',
      marginBottom: 10
    }
  }, "Routing rules"), [['Geo routing', 'EU → /eu landing', true], ['Device split', 'iOS → App Store', link.rules > 1], ['Expiry', 'Sept 30, 2026', link.state === 'expired']].map(([t, d, on]) => /*#__PURE__*/React.createElement("div", {
    key: t,
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 11,
      padding: '10px 0',
      borderBottom: '1px solid var(--line-1)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 30,
      height: 30,
      flex: 'none',
      borderRadius: 8,
      background: on ? 'rgba(124,58,237,0.10)' : 'var(--canvas-1)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: on ? 'var(--violet-500)' : 'var(--ink-4)'
    }
  }, /*#__PURE__*/React.createElement(I.route, {
    size: 15
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13.5,
      fontWeight: 600,
      color: 'var(--ink-1)'
    }
  }, t), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      color: 'var(--ink-3)'
    }
  }, d)), /*#__PURE__*/React.createElement(DS_gov.Switch, {
    checked: !!on,
    onChange: () => {}
  })))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 10,
      marginTop: 20
    }
  }, link.state === 'paused' ? /*#__PURE__*/React.createElement(DS_gov.Button, {
    variant: "soft",
    tone: "mint",
    full: true,
    icon: /*#__PURE__*/React.createElement(I.play, {
      size: 15
    })
  }, "Resume traffic") : /*#__PURE__*/React.createElement(DS_gov.Button, {
    variant: "soft",
    tone: "peach",
    full: true,
    icon: /*#__PURE__*/React.createElement(I.pause, {
      size: 15
    })
  }, "Pause traffic"), /*#__PURE__*/React.createElement(DS_gov.Button, {
    variant: "primary",
    full: true
  }, "Edit link"))));
}
function GovernanceScreen() {
  const I = window.Icons;
  const [filter, setFilter] = React.useState('all');
  const [selected, setSelected] = React.useState(null);
  const shown = filter === 'all' ? GOV_LINKS : GOV_LINKS.filter(l => l.state === filter);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      maxWidth: 1180,
      minHeight: 600
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-end',
      justifyContent: 'space-between',
      gap: 16,
      flexWrap: 'wrap',
      marginBottom: 18
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      margin: 0,
      fontFamily: 'var(--font-display)',
      fontSize: 28,
      fontWeight: 800,
      letterSpacing: '-0.025em',
      color: 'var(--ink-1)'
    }
  }, "Link Governance"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 3,
      fontFamily: 'var(--font-mono)',
      fontSize: 12,
      color: 'var(--ink-3)'
    }
  }, "// lifecycle \xB7 routing \xB7 threat detection")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 10
    }
  }, /*#__PURE__*/React.createElement(DS_gov.Button, {
    variant: "outline",
    icon: /*#__PURE__*/React.createElement(I.pause, {
      size: 15
    })
  }, "Pause all"), /*#__PURE__*/React.createElement(DS_gov.Button, {
    variant: "accent",
    icon: /*#__PURE__*/React.createElement(I.plus, {
      size: 15
    })
  }, "New governed link"))), /*#__PURE__*/React.createElement(GovStats, null), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 14
    }
  }, /*#__PURE__*/React.createElement(DS_gov.Tabs, {
    value: filter,
    onChange: setFilter,
    tabs: [{
      key: 'all',
      label: 'All',
      count: 128
    }, {
      key: 'active',
      label: 'Active',
      count: 94
    }, {
      key: 'paused',
      label: 'Paused',
      count: 21
    }, {
      key: 'expired',
      label: 'Expired',
      count: 13
    }, {
      key: 'draft',
      label: 'Draft',
      count: 4
    }]
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      background: 'var(--canvas-2)',
      borderRadius: 'var(--radius-bento)',
      border: '1px solid var(--line-1)',
      overflow: 'hidden',
      boxShadow: 'var(--shadow-bento-sm)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '2.2fr 1.4fr 1fr 0.8fr 40px',
      gap: 12,
      padding: '11px 16px',
      borderBottom: '1px solid var(--line-1)',
      background: 'var(--canvas-1)'
    }
  }, ['Link', 'Destination', 'Status', 'Clicks', ''].map((h, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      textTransform: 'uppercase',
      letterSpacing: '0.06em',
      color: 'var(--ink-4)',
      textAlign: i === 3 ? 'right' : 'left'
    }
  }, h))), shown.map(l => /*#__PURE__*/React.createElement(LinkRow, {
    key: l.id,
    link: l,
    onSelect: setSelected,
    selected: selected && selected.id === l.id
  })), shown.length === 0 && /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '40px',
      textAlign: 'center',
      color: 'var(--ink-4)',
      fontSize: 14
    }
  }, "No links match this filter.")), /*#__PURE__*/React.createElement(Drawer, {
    link: selected,
    onClose: () => setSelected(null)
  }));
}
window.GovernanceScreen = GovernanceScreen;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/thinly-app/GovernancePage.jsx", error: String((e && e.message) || e) }); }

// ui_kits/thinly-app/LinkInBio.jsx
try { (() => {
/* thin.ly UI kit — Link-in-bio / page builder. Exports window.LinkInBioScreen. */
const DS_bio = window.KitUI;
const BIO_THEMES = {
  mint: {
    bg: 'linear-gradient(160deg, #e8f5ee, #d3efe1)',
    accent: 'var(--mint-d)',
    btn: '#ffffff'
  },
  lilac: {
    bg: 'linear-gradient(160deg, #f3eefb, #e0d3f5)',
    accent: 'var(--lilac-d)',
    btn: '#ffffff'
  },
  ink: {
    bg: 'linear-gradient(160deg, #232330, #15151b)',
    accent: 'var(--mint)',
    btn: 'rgba(255,255,255,0.08)'
  },
  sun: {
    bg: 'linear-gradient(160deg, #fef7d6, #fce58b)',
    accent: 'var(--sun-d)',
    btn: '#ffffff'
  }
};
const BIO_LINKS = [{
  icon: 'bolt',
  label: 'New drop — Spring collection',
  tag: 'launch-q3'
}, {
  icon: 'youtube',
  label: 'Watch the studio tour',
  tag: 'replay-may'
}, {
  icon: 'cart',
  label: 'Shop the catalogue',
  tag: 'shop'
}, {
  icon: 'spotify',
  label: 'Listen to the playlist',
  tag: 'sounds'
}, {
  icon: 'page',
  label: 'Read the newsletter',
  tag: 'journal'
}];
function PhonePreview({
  theme
}) {
  const I = window.Icons;
  const t = BIO_THEMES[theme];
  const dark = theme === 'ink';
  const textColor = dark ? '#fff' : 'var(--ink-1)';
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: 300,
      flex: 'none',
      borderRadius: 38,
      border: '10px solid #15151b',
      background: '#15151b',
      boxShadow: 'var(--shadow-bento-lift)',
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: 580,
      overflowY: 'auto',
      background: t.bg,
      padding: '34px 22px 24px',
      textAlign: 'center'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 84,
      height: 84,
      margin: '0 auto',
      borderRadius: '50%',
      background: 'linear-gradient(135deg, var(--coral), var(--peach))',
      border: '3px solid rgba(255,255,255,0.7)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: 'var(--font-display)',
      fontSize: 30,
      fontWeight: 800,
      color: 'var(--ink-1)'
    }
  }, "A"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 12,
      fontFamily: 'var(--font-display)',
      fontSize: 20,
      fontWeight: 800,
      letterSpacing: '-0.02em',
      color: textColor
    }
  }, "alex rivera"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 2,
      fontFamily: 'var(--font-mono)',
      fontSize: 11.5,
      color: dark ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)'
    }
  }, "@studio.co \xB7 design & sound"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'center',
      gap: 16,
      marginTop: 14,
      color: dark ? 'rgba(255,255,255,0.8)' : 'var(--ink-2)'
    }
  }, /*#__PURE__*/React.createElement(I.instagram, {
    size: 19
  }), /*#__PURE__*/React.createElement(I.youtube, {
    size: 19
  }), /*#__PURE__*/React.createElement(I.spotify, {
    size: 19
  }), /*#__PURE__*/React.createElement(I.globe, {
    size: 19
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 11,
      marginTop: 22
    }
  }, BIO_LINKS.map(l => {
    const Ic = I[l.icon];
    return /*#__PURE__*/React.createElement("div", {
      key: l.tag,
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 11,
        padding: '13px 16px',
        borderRadius: 'var(--radius-pill)',
        background: t.btn,
        border: dark ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(0,0,0,0.04)',
        boxShadow: dark ? 'none' : 'var(--shadow-bento-sm)',
        color: textColor,
        textAlign: 'left'
      }
    }, /*#__PURE__*/React.createElement(Ic, {
      size: 17,
      style: {
        color: t.accent
      }
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        flex: 1,
        fontSize: 13.5,
        fontWeight: 600
      }
    }, l.label), /*#__PURE__*/React.createElement(I.arrow, {
      size: 14,
      style: {
        color: dark ? 'rgba(255,255,255,0.4)' : 'var(--ink-4)'
      }
    }));
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 22,
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      padding: '5px 12px',
      borderRadius: 'var(--radius-pill)',
      background: dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      color: dark ? 'rgba(255,255,255,0.7)' : 'var(--ink-3)'
    }
  }, /*#__PURE__*/React.createElement(I.shield, {
    size: 12,
    style: {
      color: t.accent
    }
  }), " secured by thin.ly")));
}
function LinkInBioScreen() {
  const I = window.Icons;
  const [theme, setTheme] = React.useState('mint');
  const [live, setLive] = React.useState(true);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 1180
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-end',
      justifyContent: 'space-between',
      gap: 16,
      flexWrap: 'wrap',
      marginBottom: 20
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      margin: 0,
      fontFamily: 'var(--font-display)',
      fontSize: 28,
      fontWeight: 800,
      letterSpacing: '-0.025em',
      color: 'var(--ink-1)'
    }
  }, "Link-in-bio"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 3,
      fontFamily: 'var(--font-mono)',
      fontSize: 12,
      color: 'var(--ink-3)'
    }
  }, "thin.ly/alex \xB7 ", /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--mint-d)'
    }
  }, "published"))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 10
    }
  }, /*#__PURE__*/React.createElement(DS_bio.Button, {
    variant: "outline",
    icon: /*#__PURE__*/React.createElement(I.external, {
      size: 15
    })
  }, "Visit page"), /*#__PURE__*/React.createElement(DS_bio.Button, {
    variant: "accent",
    icon: /*#__PURE__*/React.createElement(I.check, {
      size: 15
    })
  }, "Publish changes"))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 28,
      alignItems: 'flex-start',
      flexWrap: 'wrap'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      minWidth: 360,
      display: 'flex',
      flexDirection: 'column',
      gap: 16
    }
  }, /*#__PURE__*/React.createElement(DS_bio.Card, {
    padding: 20
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)',
      marginBottom: 14
    }
  }, "Theme"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12
    }
  }, Object.keys(BIO_THEMES).map(k => /*#__PURE__*/React.createElement("button", {
    key: k,
    onClick: () => setTheme(k),
    style: {
      flex: 1,
      cursor: 'pointer',
      border: theme === k ? '2px solid var(--violet-500)' : '2px solid var(--line-1)',
      borderRadius: 'var(--radius-md)',
      padding: 4,
      background: 'var(--canvas-2)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: 52,
      borderRadius: 9,
      background: BIO_THEMES[k].bg
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 11.5,
      fontWeight: 600,
      color: 'var(--ink-2)',
      marginTop: 6,
      textTransform: 'capitalize'
    }
  }, k)))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 11,
      marginTop: 18,
      paddingTop: 16,
      borderTop: '1px solid var(--line-1)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 600,
      color: 'var(--ink-1)'
    }
  }, "Page is live"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      color: 'var(--ink-3)'
    }
  }, "// publicly reachable & governed")), /*#__PURE__*/React.createElement(DS_bio.Switch, {
    checked: live,
    onChange: setLive,
    tone: "active"
  }))), /*#__PURE__*/React.createElement(DS_bio.Card, {
    padding: 20
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginBottom: 14
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)'
    }
  }, "Links \xB7 5"), /*#__PURE__*/React.createElement(DS_bio.Button, {
    variant: "soft",
    tone: "lilac",
    size: "sm",
    icon: /*#__PURE__*/React.createElement(I.plus, {
      size: 14
    })
  }, "Add link")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 8
    }
  }, BIO_LINKS.map((l, i) => {
    const Ic = I[l.icon];
    return /*#__PURE__*/React.createElement("div", {
      key: l.tag,
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 11,
        padding: '10px 12px',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--line-1)',
        background: 'var(--canvas-1)'
      }
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        color: 'var(--ink-4)',
        cursor: 'grab',
        fontSize: 14
      }
    }, "\u22EE\u22EE"), /*#__PURE__*/React.createElement("div", {
      style: {
        width: 28,
        height: 28,
        flex: 'none',
        borderRadius: 8,
        background: 'var(--canvas-2)',
        border: '1px solid var(--line-1)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'var(--ink-2)'
      }
    }, /*#__PURE__*/React.createElement(Ic, {
      size: 14
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        flex: 1,
        minWidth: 0
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        fontSize: 13.5,
        fontWeight: 600,
        color: 'var(--ink-1)',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
      }
    }, l.label), /*#__PURE__*/React.createElement("div", {
      style: {
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        color: 'var(--ink-3)'
      }
    }, "thin.ly/", l.tag)), /*#__PURE__*/React.createElement(DS_bio.Badge, {
      tone: i === 0 ? 'sun' : 'mint',
      mono: true
    }, i === 0 ? '1.2k' : (5 - i) * 84));
  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      color: 'var(--ink-3)',
      marginBottom: 12,
      textAlign: 'center'
    }
  }, "Live preview"), /*#__PURE__*/React.createElement(PhonePreview, {
    theme: theme
  }))));
}
window.LinkInBioScreen = LinkInBioScreen;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/thinly-app/LinkInBio.jsx", error: String((e && e.message) || e) }); }

// ui_kits/thinly-app/icons.jsx
try { (() => {
/* thin.ly UI kit — Lucide-style line icons (2px stroke). Exported to window.Icons. */
const Svg = ({
  children,
  size = 18,
  sw = 2,
  style
}) => /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 24 24",
  width: size,
  height: size,
  fill: "none",
  stroke: "currentColor",
  strokeWidth: sw,
  strokeLinecap: "round",
  strokeLinejoin: "round",
  style: {
    flex: 'none',
    ...style
  }
}, children);
const Icons = {
  link: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
  })),
  shield: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M9.5 12l1.8 1.8 3.2-3.6"
  })),
  megaphone: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M3 11v2a1 1 0 0 0 1 1h2l4 3V8L6 11H4a1 1 0 0 0-1 0z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10 8l9-4v16l-9-4"
  })),
  qr: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "3",
    width: "7",
    height: "7",
    rx: "1"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "14",
    y: "3",
    width: "7",
    height: "7",
    rx: "1"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "14",
    width: "7",
    height: "7",
    rx: "1"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M14 14h3v3M20 14v.01M14 20h.01M20 20v.01M20 17h.01M17 20h.01"
  })),
  page: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("rect", {
    x: "4",
    y: "3",
    width: "16",
    height: "18",
    rx: "2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8 8h8M8 12h8M8 16h5"
  })),
  click: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M9 9l5 12 1.8-5.2L21 14 9 9z"
  })),
  check: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8.5 12.5l2.5 2.5 4.5-5"
  })),
  pause: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10 9v6M14 9v6"
  })),
  hourglass: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M7 3h10M7 21h10M7 3c0 4 5 5 5 9s-5 5-5 9M17 3c0 4-5 5-5 9s5 5 5 9"
  })),
  pen: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 20h9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"
  })),
  search: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "11",
    cy: "11",
    r: "7"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M21 21l-4.3-4.3"
  })),
  plus: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 5v14M5 12h14"
  })),
  arrow: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M5 12h14M12 5l7 7-7 7"
  })),
  bolt: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M13 2L4 14h7l-1 8 9-12h-7l1-8z"
  })),
  grid: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "3",
    width: "7",
    height: "7",
    rx: "1.5"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "14",
    y: "3",
    width: "7",
    height: "7",
    rx: "1.5"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "14",
    width: "7",
    height: "7",
    rx: "1.5"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "14",
    y: "14",
    width: "7",
    height: "7",
    rx: "1.5"
  })),
  chart: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M4 19V5M4 19h16M8 16v-4M12 16V8M16 16v-6M20 16v-2"
  })),
  settings: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M19 12a7 7 0 0 0-.1-1.3l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2.3-1.3L13.8 2h-3.6l-.4 2.4a7 7 0 0 0-2.3 1.3l-2.3-1-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.3l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2.3 1.3l.4 2.4h3.6l.4-2.4a7 7 0 0 0 2.3-1.3l2.3 1 2-3.4-2-1.5A7 7 0 0 0 19 12z"
  })),
  copy: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("rect", {
    x: "9",
    y: "9",
    width: "12",
    height: "12",
    rx: "2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M5 15V5a2 2 0 0 1 2-2h8"
  })),
  external: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"
  })),
  dots: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "5",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "19",
    r: "1.4"
  })),
  globe: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"
  })),
  play: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M7 5l11 7-11 7V5z"
  })),
  route: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "6",
    cy: "19",
    r: "2.5"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "18",
    cy: "5",
    r: "2.5"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M6 16.5V9a4 4 0 0 1 4-4h5"
  })),
  bell: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("path", {
    d: "M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10.3 21a1.9 1.9 0 0 0 3.4 0"
  })),
  instagram: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "3",
    width: "18",
    height: "18",
    rx: "5"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "17.5",
    cy: "6.5",
    r: "0.6",
    fill: "currentColor"
  })),
  youtube: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "6",
    width: "18",
    height: "12",
    rx: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10 9.5l5 2.5-5 2.5v-5z",
    fill: "currentColor",
    stroke: "none"
  })),
  spotify: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M7.5 10c3-1 6-.5 8.5 1M8 13c2.3-.7 4.7-.3 6.5 1M8.5 16c1.7-.5 3.4-.2 4.7.7"
  })),
  cart: p => /*#__PURE__*/React.createElement(Svg, p, /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "20",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "18",
    cy: "20",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M3 4h2l2.4 12.4a1 1 0 0 0 1 .8h8.6a1 1 0 0 0 1-.8L21 8H6"
  }))
};
window.Icons = Icons;
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/thinly-app/icons.jsx", error: String((e && e.message) || e) }); }

// ui_kits/thinly-app/kit-ui.jsx
try { (() => {
/* thin.ly UI kit — self-contained primitives (mirror of components/*, token-styled).
   Kept local so the kit renders standalone when copied out. Exports window.KitUI. */
(function () {
  const e = React.createElement;
  function Button({
    children,
    variant = 'primary',
    size = 'md',
    tone = 'mint',
    icon = null,
    trailingIcon = null,
    disabled = false,
    full = false,
    type = 'button',
    onClick,
    style
  }) {
    const sizes = {
      sm: {
        p: '7px 14px',
        f: 13,
        g: 6,
        i: 14
      },
      md: {
        p: '9px 18px',
        f: 14,
        g: 7,
        i: 16
      },
      lg: {
        p: '12px 24px',
        f: 15,
        g: 8,
        i: 18
      }
    };
    const s = sizes[size] || sizes.md;
    const tints = {
      mint: ['var(--mint)', 'var(--mint-d)'],
      coral: ['var(--coral-2)', 'var(--coral-d)'],
      peach: ['var(--peach)', 'var(--peach-d)'],
      lilac: ['var(--lilac-2)', 'var(--lilac-d)'],
      sun: ['var(--sun)', 'var(--sun-d)'],
      sky: ['var(--sky-2)', 'var(--sky-d)']
    };
    const [tBg, tFg] = tints[tone] || tints.mint;
    const [hover, setHover] = React.useState(false);
    const base = {
      display: full ? 'flex' : 'inline-flex',
      width: full ? '100%' : 'auto',
      alignItems: 'center',
      justifyContent: 'center',
      gap: s.g,
      padding: s.p,
      fontFamily: 'var(--font-sans)',
      fontSize: s.f,
      fontWeight: 600,
      lineHeight: 1,
      whiteSpace: 'nowrap',
      borderRadius: 'var(--radius-pill)',
      border: '1px solid transparent',
      cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.5 : 1,
      transition: 'transform .15s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out)'
    };
    const variants = {
      primary: {
        background: 'var(--ink-1)',
        color: 'var(--canvas-2)'
      },
      accent: {
        background: 'linear-gradient(135deg, var(--violet-500), var(--violet-400))',
        color: '#fff',
        boxShadow: 'var(--shadow-glow-violet)'
      },
      soft: {
        background: tBg,
        color: tFg
      },
      outline: {
        background: 'transparent',
        color: 'var(--ink-1)',
        border: '1px solid var(--line-1)'
      },
      ghost: {
        background: 'transparent',
        color: 'var(--ink-2)'
      }
    };
    const hov = !disabled && hover ? {
      transform: 'translateY(-1px)',
      boxShadow: variant === 'accent' ? '0 8px 24px rgba(124,58,237,0.35)' : 'var(--shadow-bento-sm)',
      background: variant === 'primary' ? 'var(--ink-2)' : variant === 'outline' || variant === 'ghost' ? 'rgba(0,0,0,0.03)' : variants[variant].background
    } : {};
    return e('button', {
      type,
      disabled,
      onClick,
      onMouseEnter: () => setHover(true),
      onMouseLeave: () => setHover(false),
      style: {
        ...base,
        ...variants[variant],
        ...hov,
        ...style
      }
    }, icon ? e('span', {
      style: {
        display: 'inline-flex',
        width: s.i,
        height: s.i
      }
    }, icon) : null, children, trailingIcon ? e('span', {
      style: {
        display: 'inline-flex',
        width: s.i,
        height: s.i
      }
    }, trailingIcon) : null);
  }
  function Card({
    children,
    tone = 'plain',
    dark = false,
    interactive = false,
    padding = 20,
    style
  }) {
    const [hover, setHover] = React.useState(false);
    const fills = {
      plain: 'var(--canvas-2)',
      mint: 'var(--mint)',
      coral: 'var(--coral-2)',
      peach: 'var(--peach-2)',
      lilac: 'var(--lilac-2)',
      sun: 'var(--sun-2)',
      sky: 'var(--sky-2)'
    };
    const bg = dark ? 'var(--ink-1)' : fills[tone] || fills.plain;
    return e('div', {
      onMouseEnter: () => interactive && setHover(true),
      onMouseLeave: () => interactive && setHover(false),
      style: {
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        background: bg,
        color: dark ? 'var(--canvas-2)' : 'var(--ink-1)',
        borderRadius: 'var(--radius-bento)',
        padding,
        boxShadow: hover ? 'var(--shadow-bento)' : 'var(--shadow-bento-sm)',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'transform .2s var(--ease-out), box-shadow .2s var(--ease-out)',
        cursor: interactive ? 'pointer' : 'default',
        ...style
      }
    }, children);
  }
  function Badge({
    children,
    tone = 'lilac',
    variant = 'soft',
    icon = null,
    mono = false
  }) {
    const tints = {
      mint: ['var(--mint-3)', 'var(--mint-d)', 'var(--mint)'],
      coral: ['var(--coral-3)', 'var(--coral-d)', 'var(--coral)'],
      peach: ['var(--peach-3)', 'var(--peach-d)', 'var(--peach)'],
      lilac: ['var(--lilac-3)', 'var(--lilac-d)', 'var(--lilac)'],
      sun: ['var(--sun-3)', 'var(--sun-d)', 'var(--sun)'],
      sky: ['var(--sky-3)', 'var(--sky-d)', 'var(--sky)'],
      violet: ['rgba(124,58,237,0.10)', 'var(--violet-500)', 'var(--violet-500)'],
      neutral: ['var(--canvas-1)', 'var(--ink-3)', 'var(--line-1)']
    };
    const [soft, deep, solid] = tints[tone] || tints.lilac;
    const sx = variant === 'solid' ? {
      background: solid,
      color: tone === 'violet' ? '#fff' : 'var(--ink-1)',
      border: '1px solid transparent'
    } : variant === 'outline' ? {
      background: 'transparent',
      color: deep,
      border: `1px solid ${soft}`
    } : {
      background: soft,
      color: deep,
      border: '1px solid transparent'
    };
    return e('span', {
      style: {
        display: 'inline-flex',
        alignItems: 'center',
        gap: 5,
        padding: '3px 9px',
        borderRadius: 'var(--radius-pill)',
        fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
        fontSize: mono ? 10.5 : 11.5,
        fontWeight: 600,
        lineHeight: 1.3,
        ...sx
      }
    }, icon ? e('span', {
      style: {
        display: 'inline-flex',
        width: 12,
        height: 12
      }
    }, icon) : null, children);
  }
  function StatusPill({
    state = 'active',
    label,
    live = false,
    size = 'md',
    icon = null
  }) {
    const map = {
      active: ['var(--status-active)', 'var(--status-active-bg)', 'Active'],
      paused: ['var(--status-paused)', 'var(--status-paused-bg)', 'Paused'],
      expired: ['var(--status-expired)', 'var(--status-expired-bg)', 'Expired'],
      draft: ['var(--status-draft)', 'var(--status-draft-bg)', 'Draft'],
      safe: ['var(--status-safe)', 'var(--status-safe-bg)', 'Safe URL'],
      flagged: ['var(--status-flagged)', 'var(--status-flagged-bg)', 'Flagged']
    };
    const [fg, bg, text] = map[state] || map.active;
    const sm = size === 'sm';
    return e('span', {
      style: {
        display: 'inline-flex',
        alignItems: 'center',
        gap: sm ? 5 : 7,
        padding: sm ? '3px 9px 3px 8px' : '5px 12px 5px 10px',
        borderRadius: 'var(--radius-pill)',
        background: bg,
        color: fg,
        fontFamily: 'var(--font-sans)',
        fontSize: sm ? 11.5 : 13,
        fontWeight: 600,
        lineHeight: 1
      }
    }, icon ? e('span', {
      style: {
        display: 'inline-flex',
        width: sm ? 12 : 14,
        height: sm ? 12 : 14
      }
    }, icon) : e('span', {
      style: {
        width: sm ? 6 : 8,
        height: sm ? 6 : 8,
        borderRadius: '50%',
        background: fg,
        animation: live ? 'thinly-pulse-live 1.8s infinite' : 'none'
      }
    }), label || text);
  }
  function StatTile({
    label,
    value,
    delta,
    dir = 'neutral',
    accent = 'var(--violet-500)',
    accentBg = 'rgba(124,58,237,0.10)',
    icon = null
  }) {
    const [hover, setHover] = React.useState(false);
    const dc = dir === 'up' ? 'var(--data-up)' : dir === 'down' ? 'var(--data-down)' : 'var(--ink-3)';
    const arrow = dir === 'up' ? '↑' : dir === 'down' ? '↓' : '·';
    return e('div', {
      onMouseEnter: () => setHover(true),
      onMouseLeave: () => setHover(false),
      style: {
        position: 'relative',
        overflow: 'hidden',
        background: 'var(--canvas-2)',
        border: '1px solid var(--line-1)',
        borderRadius: 'var(--radius-lg)',
        padding: '16px 18px',
        boxShadow: 'var(--shadow-stat)',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'transform .2s var(--ease-out)',
        minWidth: 0
      }
    }, e('div', {
      style: {
        position: 'absolute',
        insetInline: 0,
        top: 0,
        height: 3,
        background: accent
      }
    }), e('div', {
      style: {
        position: 'absolute',
        right: 14,
        top: 14,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 34,
        height: 34,
        borderRadius: 10,
        background: accentBg,
        color: accent
      }
    }, icon), e('div', {
      style: {
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        color: 'var(--ink-3)',
        paddingRight: 40
      }
    }, label), e('div', {
      style: {
        marginTop: 8,
        fontFamily: 'var(--font-display)',
        fontSize: 32,
        fontWeight: 800,
        lineHeight: 1,
        letterSpacing: '-0.02em',
        color: 'var(--ink-1)'
      }
    }, value), delta != null ? e('div', {
      style: {
        marginTop: 8,
        display: 'flex',
        alignItems: 'center',
        gap: 4,
        fontSize: 12.5,
        color: dc
      }
    }, e('span', null, arrow), e('span', {
      style: {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
      }
    }, delta)) : null);
  }
  function Tabs({
    tabs = [],
    value,
    onChange
  }) {
    return e('div', {
      style: {
        display: 'inline-flex',
        gap: 8,
        flexWrap: 'wrap'
      }
    }, tabs.map(t => {
      const key = typeof t === 'string' ? t : t.key;
      const lab = typeof t === 'string' ? t : t.label;
      const count = typeof t === 'string' ? undefined : t.count;
      const active = key === value;
      return e('button', {
        key,
        onClick: () => onChange && onChange(key),
        style: {
          display: 'inline-flex',
          alignItems: 'center',
          gap: 7,
          padding: '7px 14px',
          borderRadius: 'var(--radius-pill)',
          border: `1px solid ${active ? 'rgba(124,58,237,0.30)' : 'var(--line-1)'}`,
          background: active ? 'rgba(124,58,237,0.12)' : 'transparent',
          color: active ? 'var(--violet-500)' : 'var(--ink-3)',
          fontFamily: 'var(--font-sans)',
          fontSize: 13.5,
          fontWeight: active ? 600 : 500,
          cursor: 'pointer',
          transition: 'all .2s var(--ease-out)'
        }
      }, lab, count !== undefined ? e('span', {
        style: {
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          padding: '1px 6px',
          borderRadius: 'var(--radius-pill)',
          background: active ? 'rgba(124,58,237,0.16)' : 'var(--canvas-1)',
          color: active ? 'var(--violet-500)' : 'var(--ink-4)'
        }
      }, count) : null);
    }));
  }
  function Switch({
    checked = false,
    onChange,
    tone = 'accent',
    disabled = false
  }) {
    const on = {
      accent: 'var(--violet-500)',
      active: 'var(--status-active)',
      mint: 'var(--mint-d)',
      sky: 'var(--sky-d)'
    }[tone] || 'var(--violet-500)';
    return e('button', {
      type: 'button',
      role: 'switch',
      'aria-checked': checked,
      disabled,
      onClick: () => onChange && onChange(!checked),
      style: {
        position: 'relative',
        width: 42,
        height: 24,
        flex: 'none',
        borderRadius: 'var(--radius-pill)',
        border: 'none',
        cursor: disabled ? 'not-allowed' : 'pointer',
        background: checked ? on : 'var(--ink-4)',
        opacity: disabled ? 0.5 : 1,
        transition: 'background .2s var(--ease-out)',
        padding: 0
      }
    }, e('span', {
      style: {
        position: 'absolute',
        top: 3,
        left: checked ? 21 : 3,
        width: 18,
        height: 18,
        borderRadius: '50%',
        background: '#fff',
        boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
        transition: 'left .2s var(--ease-out)'
      }
    }));
  }
  window.KitUI = {
    Button,
    Card,
    Badge,
    StatusPill,
    StatTile,
    Tabs,
    Switch
  };
})();
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/thinly-app/kit-ui.jsx", error: String((e && e.message) || e) }); }

// ui_kits/thinly-app/profile-kit.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); }
/* ============================================================
   thin.ly — Profile Kit (shared)
   Icons, avatar, sparkline, default profile data, and the single
   <PublicProfile> renderer used by BOTH the public page and the
   owner editor's live preview. Exposes window.PK.
   Load AFTER _ds_bundle.js, as <script type="text/babel">.
   ============================================================ */
const {
  useState
} = React;
const DS = window.ThinLyDesignSystem_0b5fb4;

/* ── Icons (Lucide-style, 2px) ───────────────────────────────── */
const S = ({
  children,
  size = 18,
  sw = 2,
  fill = 'none',
  style
}) => /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 24 24",
  width: size,
  height: size,
  fill: fill,
  stroke: "currentColor",
  strokeWidth: sw,
  strokeLinecap: "round",
  strokeLinejoin: "round",
  style: {
    flex: 'none',
    ...style
  }
}, children);
const I = {
  link: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
  })),
  shield: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M9.5 12l1.8 1.8 3.2-3.6"
  })),
  bookmark: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
  })),
  bookmarkFill: p => /*#__PURE__*/React.createElement(S, _extends({}, p, {
    fill: "currentColor"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
  })),
  users: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M16 19v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "7",
    r: "4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M22 19v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11"
  })),
  share: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "18",
    cy: "5",
    r: "3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "6",
    cy: "12",
    r: "3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "18",
    cy: "19",
    r: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"
  })),
  plus: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 5v14M5 12h14"
  })),
  arrow: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M5 12h14M12 5l7 7-7 7"
  })),
  external: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"
  })),
  dots: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "5",
    cy: "12",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "1.4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "19",
    cy: "12",
    r: "1.4"
  })),
  pin: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "10",
    r: "2.5"
  })),
  globe: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"
  })),
  click: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M9 9l5 12 1.8-5.2L21 14 9 9z"
  })),
  bolt: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M13 2L4 14h7l-1 8 9-12h-7l1-8z"
  })),
  settings: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M19 12a7 7 0 0 0-.1-1.3l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2.3-1.3L13.8 2h-3.6l-.4 2.4a7 7 0 0 0-2.3 1.3l-2.3-1-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.3l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2.3 1.3l.4 2.4h3.6l.4-2.4a7 7 0 0 0 2.3-1.3l2.3 1 2-3.4-2-1.5A7 7 0 0 0 19 12z"
  })),
  message: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M21 11.5a8.4 8.4 0 0 1-9 8 9 9 0 0 1-4-1L3 20l1.5-4.5a8.4 8.4 0 0 1-1-4A8.4 8.4 0 0 1 12 3.5a8.4 8.4 0 0 1 9 8z"
  })),
  pen: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 20h9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"
  })),
  bell: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10.3 21a1.9 1.9 0 0 0 3.4 0"
  })),
  eye: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "3"
  })),
  eyeOff: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M9.9 5.2A9.6 9.6 0 0 1 12 5c6.5 0 10 7 10 7a13.2 13.2 0 0 1-2.2 2.9M6.1 6.1A13.2 13.2 0 0 0 2 12s3.5 7 10 7a9.4 9.4 0 0 0 4-0.9M3 3l18 18M9.9 9.9a3 3 0 0 0 4.2 4.2"
  })),
  lock: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("rect", {
    x: "4",
    y: "11",
    width: "16",
    height: "9",
    rx: "2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8 11V8a4 4 0 0 1 8 0v3"
  })),
  grip: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "6",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "15",
    cy: "6",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "12",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "15",
    cy: "12",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "9",
    cy: "18",
    r: "1.3"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "15",
    cy: "18",
    r: "1.3"
  })),
  trash: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"
  })),
  check: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M4 12.5l5 5L20 6"
  })),
  up: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 19V5M5 12l7-7 7 7"
  })),
  down: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 5v14M5 12l7 7 7-7"
  })),
  heart: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 21C5 16 3 12 3 8.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 9 2.5C21 12 19 16 12 21z"
  })),
  palette: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("path", {
    d: "M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.5 0-1 .8-1.5 1.7-1.5H17a4 4 0 0 0 4-4 9 9 0 0 0-9-9z"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "7.5",
    cy: "10.5",
    r: "1"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "7.5",
    r: "1"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "16.5",
    cy: "10.5",
    r: "1"
  })),
  instagram: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "3",
    width: "18",
    height: "18",
    rx: "5"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "17.5",
    cy: "6.5",
    r: "0.7",
    fill: "currentColor",
    stroke: "none"
  })),
  youtube: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "6",
    width: "18",
    height: "12",
    rx: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10 9.5l5 2.5-5 2.5v-5z",
    fill: "currentColor",
    stroke: "none"
  })),
  spotify: p => /*#__PURE__*/React.createElement(S, p, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "9"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M7.5 10c3-1 6-.5 8.5 1M8 13c2.3-.7 4.7-.3 6.5 1M8.5 16c1.7-.5 3.4-.2 4.7.7"
  }))
};
const TONES = ['lilac', 'mint', 'coral', 'peach', 'sun', 'sky'];
const eyebrow = {
  fontFamily: 'var(--font-mono)',
  fontSize: 10.5,
  textTransform: 'uppercase',
  letterSpacing: '0.08em',
  color: 'var(--ink-3)'
};
const mono = {
  fontFamily: 'var(--font-mono)'
};
const fmt = n => n >= 1000 ? (n / 1000).toFixed(1).replace('.0', '') + 'k' : '' + n;
function Mono({
  label,
  size = 40,
  tone,
  style
}) {
  const t = tone || TONES[(label.charCodeAt(0) + label.length) % TONES.length];
  return /*#__PURE__*/React.createElement("span", {
    style: {
      width: size,
      height: size,
      flex: 'none',
      borderRadius: '50%',
      background: `var(--${t}-3)`,
      color: `var(--${t}-d)`,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: 'var(--font-display)',
      fontWeight: 700,
      fontSize: size * 0.36,
      letterSpacing: '-0.02em',
      ...style
    }
  }, label.slice(0, 2).toUpperCase());
}
function Spark({
  data,
  color
}) {
  const peak = data.indexOf(Math.max(...data));
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-end',
      gap: 2,
      height: 24,
      width: 70
    }
  }, data.map((h, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      flex: 1,
      height: `${h}%`,
      borderRadius: '2px 2px 0 0',
      background: color,
      opacity: i === peak ? 0.95 : 0.4
    }
  })));
}

/* ── Default profile (single source of truth) ────────────────── */
const DEFAULT = {
  name: 'Alex Rivera',
  handle: 'alexrivera',
  avatar: 'AR',
  accent: 'lilac',
  verified: true,
  bio: "Product designer & creator. I collect good links so you don't have to — every one here is governed, checked and safe to click.",
  location: 'Brooklyn, NY',
  website: 'alexrivera.design',
  joined: '2021',
  socials: {
    instagram: 'alexrivera',
    youtube: 'alexrivera',
    spotify: 'alexrivera',
    website: 'alexrivera.design'
  },
  privacy: {
    isPublic: true,
    showFollowers: true,
    allowFollow: true,
    allowMessages: true
  },
  stats: {
    followers: 12400,
    following: 348
  },
  links: [{
    id: 'folio',
    tone: 'lilac',
    mono: 'AR',
    title: 'Portfolio — 2026 case studies',
    slug: 'alex-folio',
    host: 'alexrivera.design',
    clicks: '48.2k',
    state: 'active',
    tag: 'Design',
    spark: [40, 55, 48, 62, 70, 66, 84],
    pinned: true,
    visible: true
  }, {
    id: 'drop',
    tone: 'coral',
    mono: 'SP',
    title: 'Spring drop — limited prints',
    slug: 'spring-drop',
    host: 'shop.alexrivera.design',
    clicks: '12.8k',
    state: 'active',
    tag: 'Shop',
    spark: [30, 42, 38, 55, 60, 72, 68],
    pinned: false,
    visible: true
  }, {
    id: 'news',
    tone: 'mint',
    mono: 'TL',
    title: 'The Thin Line — weekly newsletter',
    slug: 'thin-line',
    host: 'thinline.substack.com',
    clicks: '9.4k',
    state: 'active',
    tag: 'Writing',
    spark: [22, 30, 40, 38, 52, 60, 58],
    pinned: false,
    visible: true
  }, {
    id: 'talk',
    tone: 'sky',
    mono: 'YT',
    title: 'Talk: Designing for trust',
    slug: 'trust-talk',
    host: 'youtube.com',
    clicks: '21.7k',
    state: 'active',
    tag: 'Video',
    spark: [18, 26, 34, 48, 55, 70, 64],
    pinned: false,
    visible: true
  }, {
    id: 'promo',
    tone: 'peach',
    mono: 'PR',
    title: 'Holiday promo (ended)',
    slug: 'promo-25',
    host: 'shop.alexrivera.design',
    clicks: '6.1k',
    state: 'expired',
    tag: 'Shop',
    spark: [60, 50, 40, 30, 20, 14, 10],
    pinned: false,
    visible: false
  }],
  collections: [{
    tone: 'lilac',
    icon: 'bolt',
    title: 'Design tools',
    count: 18
  }, {
    tone: 'mint',
    icon: 'globe',
    title: 'Reading list',
    count: 24
  }, {
    tone: 'coral',
    icon: 'bookmark',
    title: 'Inspiration',
    count: 31
  }]
};
const FOLLOWERS = ['JM', 'KW', 'TS', 'RP', 'MN', 'LC', 'DV', 'AH', 'SB', 'EO', 'GR', 'PT'];

/* ── Public profile renderer (used by page + editor preview) ──── */
function PublicProfile({
  profile,
  narrow = false
}) {
  const {
    Button,
    StatusPill,
    Badge,
    Card
  } = DS;
  const [following, setFollowing] = useState(false);
  const [followers, setFollowers] = useState(profile.stats.followers);
  const [notify, setNotify] = useState(true);
  const [saved, setSaved] = useState(() => new Set());
  const accent = profile.accent || 'lilac';
  const toggleFollow = () => {
    setFollowing(f => !f);
    setFollowers(n => n + (following ? -1 : 1));
  };
  const toggleSave = id => setSaved(s => {
    const n = new Set(s);
    n.has(id) ? n.delete(id) : n.add(id);
    return n;
  });
  const fLabel = fmt(following ? followers : profile.stats.followers);
  const live = profile.links.filter(l => l.visible !== false && l.state === 'active');
  const pinned = live.find(l => l.pinned) || null;
  const rows = live.filter(l => l !== pinned);
  const activeSocials = Object.entries(profile.socials).filter(([k, v]) => v && I[k]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: narrow ? '1fr' : 'minmax(0,1fr) 320px',
      gap: 14,
      alignItems: 'start'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 14,
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      overflow: 'hidden',
      borderRadius: 'var(--radius-bento)',
      background: 'var(--ink-1)',
      color: 'var(--canvas-2)',
      padding: narrow ? '26px 22px' : '32px 32px 28px'
    }
  }, /*#__PURE__*/React.createElement(Glow, {
    style: {
      top: '-45%',
      right: '-8%',
      width: 380,
      height: 380,
      color: 'rgba(124,58,237,0.26)'
    }
  }), /*#__PURE__*/React.createElement(Glow, {
    style: {
      bottom: '-55%',
      left: '6%',
      width: 320,
      height: 320,
      color: `var(--${accent}-d)`,
      opacity: 0.16
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      alignItems: narrow ? 'center' : 'flex-start',
      textAlign: narrow ? 'center' : 'left'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: narrow ? 88 : 100,
      height: narrow ? 88 : 100,
      borderRadius: '50%',
      padding: 3,
      background: `linear-gradient(135deg, var(--violet-500), var(--${accent}))`
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      background: 'var(--ink-1)',
      padding: 3
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: profile.avatar,
    tone: accent,
    size: narrow ? 76 : 88,
    style: {
      background: `var(--${accent}-3)`
    }
  }))), profile.verified && /*#__PURE__*/React.createElement("span", {
    title: "Verified safe",
    style: {
      position: 'absolute',
      right: 0,
      bottom: 2,
      width: 28,
      height: 28,
      borderRadius: '50%',
      background: 'var(--mint-d)',
      color: '#fff',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      border: '3px solid var(--ink-1)'
    }
  }, /*#__PURE__*/React.createElement(I.check, {
    size: 13,
    sw: 2.6
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 9,
      flexWrap: 'wrap',
      justifyContent: narrow ? 'center' : 'flex-start',
      marginTop: 16
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      margin: 0,
      fontFamily: 'var(--font-display)',
      fontSize: narrow ? 26 : 32,
      fontWeight: 800,
      letterSpacing: '-0.03em',
      lineHeight: 1
    }
  }, profile.name), profile.verified && /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5,
      padding: '4px 10px',
      borderRadius: 'var(--radius-pill)',
      background: 'rgba(183,230,208,0.16)',
      color: 'var(--mint)',
      fontSize: 11.5,
      fontWeight: 600
    }
  }, /*#__PURE__*/React.createElement(I.shield, {
    size: 12
  }), " Verified safe")), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 13,
      color: 'var(--violet-400)',
      marginTop: 7
    }
  }, "thin.ly/@", profile.handle), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: '12px 0 0',
      maxWidth: 460,
      fontSize: 14,
      lineHeight: 1.6,
      color: 'rgba(255,255,255,0.72)'
    }
  }, profile.bio), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 14,
      marginTop: 12,
      flexWrap: 'wrap',
      justifyContent: narrow ? 'center' : 'flex-start',
      fontSize: 12.5,
      color: 'rgba(255,255,255,0.55)'
    }
  }, profile.location && /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5
    }
  }, /*#__PURE__*/React.createElement(I.pin, {
    size: 13
  }), " ", profile.location), profile.website && /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5
    }
  }, /*#__PURE__*/React.createElement(I.globe, {
    size: 13
  }), " ", profile.website), /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5
    }
  }, /*#__PURE__*/React.createElement(I.bolt, {
    size: 13
  }), " Joined ", profile.joined)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 10,
      marginTop: 18,
      flexWrap: 'wrap',
      justifyContent: narrow ? 'center' : 'flex-start'
    }
  }, profile.privacy.allowFollow && (following ? /*#__PURE__*/React.createElement(Button, {
    variant: "soft",
    tone: "mint",
    icon: /*#__PURE__*/React.createElement(I.check, {
      size: 15
    }),
    onClick: toggleFollow
  }, "Following") : /*#__PURE__*/React.createElement(Button, {
    variant: "accent",
    icon: /*#__PURE__*/React.createElement(I.plus, {
      size: 15
    }),
    onClick: toggleFollow
  }, "Follow")), profile.privacy.allowMessages && /*#__PURE__*/React.createElement("button", {
    style: ghostOnDark,
    onClick: () => {}
  }, /*#__PURE__*/React.createElement(I.message, {
    size: 15
  }), " Message"), /*#__PURE__*/React.createElement("button", {
    style: {
      ...ghostOnDark,
      padding: '9px 12px'
    }
  }, /*#__PURE__*/React.createElement(I.share, {
    size: 15
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 22,
      marginTop: 18
    }
  }, [['Followers', fLabel, profile.privacy.showFollowers], ['Following', '' + profile.stats.following, true], ['Links', '' + live.length, true]].filter(s => s[2]).map(([k, v]) => /*#__PURE__*/React.createElement("div", {
    key: k
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 22,
      fontWeight: 800,
      letterSpacing: '-0.02em'
    }
  }, v), /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      color: 'rgba(255,255,255,0.5)',
      marginTop: 2
    }
  }, k)))), profile.privacy.showFollowers && /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 10,
      marginTop: 16,
      justifyContent: narrow ? 'center' : 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex'
    }
  }, FOLLOWERS.slice(0, 5).map((f, i) => /*#__PURE__*/React.createElement("span", {
    key: f,
    style: {
      marginLeft: i ? -10 : 0,
      border: '2px solid var(--ink-1)',
      borderRadius: '50%'
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: f,
    size: 28
  })))), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 12,
      color: 'rgba(255,255,255,0.6)'
    }
  }, "Followed by ", /*#__PURE__*/React.createElement("b", {
    style: {
      color: '#fff'
    }
  }, "maya"), " & ", fLabel, " more")))), /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      marginTop: 2
    }
  }, "Links \xB7 all verified safe"), pinned && /*#__PURE__*/React.createElement(Card, {
    tone: "coral",
    interactive: true,
    padding: 20
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      padding: '4px 10px',
      borderRadius: 'var(--radius-pill)',
      background: 'var(--sun)',
      color: 'var(--ink-1)',
      fontSize: 11,
      fontWeight: 700
    }
  }, /*#__PURE__*/React.createElement(I.pin, {
    size: 12
  }), " Pinned"), /*#__PURE__*/React.createElement(SaveBtn, {
    on: saved.has(pinned.id),
    onClick: () => toggleSave(pinned.id)
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 14,
      alignItems: 'center',
      marginTop: 14
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: pinned.mono,
    tone: pinned.tone,
    size: 48,
    style: {
      background: 'var(--canvas-2)'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 19,
      fontWeight: 800,
      letterSpacing: '-0.02em',
      lineHeight: 1.15
    }
  }, pinned.title), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 12,
      marginTop: 5
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, "thin.ly/"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--violet-500)',
      fontWeight: 600
    }
  }, pinned.slug))), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'right',
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 22,
      fontWeight: 800
    }
  }, pinned.clicks), /*#__PURE__*/React.createElement("div", {
    style: eyebrow
  }, "clicks"))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginTop: 14
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 8
    }
  }, /*#__PURE__*/React.createElement(StatusPill, {
    state: "safe"
  }), /*#__PURE__*/React.createElement(Badge, {
    tone: "lilac"
  }, pinned.tag)), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    size: "sm",
    trailingIcon: /*#__PURE__*/React.createElement(I.external, {
      size: 14
    })
  }, "Visit"))), rows.map(l => /*#__PURE__*/React.createElement(LinkRow, {
    key: l.id,
    l: l,
    on: saved.has(l.id),
    onSave: () => toggleSave(l.id),
    narrow: narrow
  }))), !narrow && /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 14
    }
  }, /*#__PURE__*/React.createElement(SubscribeCard, {
    accent: accent,
    following: following,
    onFollow: toggleFollow,
    notify: notify,
    setNotify: setNotify,
    allow: profile.privacy.allowFollow
  }), profile.privacy.showFollowers && /*#__PURE__*/React.createElement(FollowersCard, {
    label: fLabel
  }), activeSocials.length > 0 && /*#__PURE__*/React.createElement(SocialsCard, {
    socials: activeSocials
  }), /*#__PURE__*/React.createElement(TrustCard, null)), narrow && profile.privacy.allowFollow && /*#__PURE__*/React.createElement(SubscribeCard, {
    accent: accent,
    following: following,
    onFollow: toggleFollow,
    notify: notify,
    setNotify: setNotify,
    allow: true
  }));
}
function LinkRow({
  l,
  on,
  onSave,
  narrow
}) {
  const {
    StatusPill,
    Badge
  } = DS;
  const [hover, setHover] = useState(false);
  return /*#__PURE__*/React.createElement("div", {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 14,
      background: 'var(--canvas-2)',
      border: '1px solid var(--line-1)',
      borderRadius: 'var(--radius-bento)',
      padding: '13px 16px',
      boxShadow: hover ? 'var(--shadow-bento)' : 'var(--shadow-bento-sm)',
      transform: hover ? 'translateY(-2px)' : 'none',
      transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)'
    }
  }, /*#__PURE__*/React.createElement(Mono, {
    label: l.mono,
    tone: l.tone,
    size: 42,
    style: {
      borderRadius: 13
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      flex: '0 1 auto',
      minWidth: 0,
      fontSize: 14.5,
      fontWeight: 600,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    }
  }, l.title), /*#__PURE__*/React.createElement("span", {
    style: {
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement(Badge, {
    tone: "neutral",
    variant: "outline",
    mono: true
  }, l.tag))), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 12,
      marginTop: 4
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, "thin.ly/"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--violet-500)',
      fontWeight: 600
    }
  }, l.slug))), !narrow && /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement(Spark, {
    data: l.spark,
    color: `var(--${l.tone}-d)`
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'right',
      flex: 'none',
      width: 58
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 17,
      fontWeight: 800
    }
  }, l.clicks), /*#__PURE__*/React.createElement("div", {
    style: eyebrow
  }, "clicks")), !narrow && /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 'none'
    }
  }, /*#__PURE__*/React.createElement(StatusPill, {
    state: "safe"
  })), /*#__PURE__*/React.createElement(SaveBtn, {
    on: on,
    onClick: onSave
  }));
}
function SubscribeCard({
  accent,
  following,
  onFollow,
  notify,
  setNotify,
  allow
}) {
  const {
    Button,
    Switch
  } = DS;
  if (!allow) return null;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      overflow: 'hidden',
      borderRadius: 'var(--radius-bento)',
      background: 'var(--ink-1)',
      color: 'var(--canvas-2)',
      padding: 20
    }
  }, /*#__PURE__*/React.createElement(Glow, {
    style: {
      top: '-40%',
      right: '-15%',
      width: 200,
      height: 200,
      color: 'rgba(124,58,237,0.3)'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      color: 'rgba(255,255,255,0.5)'
    }
  }, "Stay in the loop"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 18,
      fontWeight: 800,
      letterSpacing: '-0.01em',
      marginTop: 4,
      lineHeight: 1.2
    }
  }, "Follow for new links first"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: '8px 0 14px',
      fontSize: 13,
      color: 'rgba(255,255,255,0.62)'
    }
  }, "Get notified when ", following ? 'Alex' : 'this creator', " publishes a new governed link."), following ? /*#__PURE__*/React.createElement(Button, {
    variant: "soft",
    tone: "mint",
    full: true,
    icon: /*#__PURE__*/React.createElement(I.check, {
      size: 15
    }),
    onClick: onFollow
  }, "Following") : /*#__PURE__*/React.createElement(Button, {
    variant: "accent",
    full: true,
    icon: /*#__PURE__*/React.createElement(I.plus, {
      size: 15
    }),
    onClick: onFollow
  }, "Follow"), /*#__PURE__*/React.createElement("label", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginTop: 14,
      fontSize: 13,
      color: 'rgba(255,255,255,0.8)'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8
    }
  }, /*#__PURE__*/React.createElement(I.bell, {
    size: 14
  }), " Notify on new link"), /*#__PURE__*/React.createElement(Switch, {
    checked: notify,
    onChange: setNotify,
    tone: "mint"
  }))));
}
function FollowersCard({
  label
}) {
  const {
    Card
  } = DS;
  return /*#__PURE__*/React.createElement(Card, {
    padding: 20
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: eyebrow
  }, "Followers"), /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'var(--ink-3)'
    }
  }, /*#__PURE__*/React.createElement(I.users, {
    size: 16
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: 'var(--font-display)',
      fontSize: 28,
      fontWeight: 800,
      letterSpacing: '-0.02em',
      marginTop: 6
    }
  }, label), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(6, 1fr)',
      gap: 8,
      marginTop: 14
    }
  }, FOLLOWERS.slice(0, 11).map(f => /*#__PURE__*/React.createElement(Mono, {
    key: f,
    label: f,
    size: 36
  })), /*#__PURE__*/React.createElement("span", {
    style: {
      width: 36,
      height: 36,
      borderRadius: '50%',
      background: 'var(--ink-1)',
      color: 'var(--canvas-2)',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      ...mono,
      fontSize: 10,
      fontWeight: 600
    }
  }, "+12k")));
}
function SocialsCard({
  socials
}) {
  const {
    Card
  } = DS;
  return /*#__PURE__*/React.createElement(Card, {
    padding: 18
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      ...eyebrow,
      marginBottom: 12
    }
  }, "Find me elsewhere"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 8
    }
  }, socials.map(([k, v]) => {
    const Ico = I[k] || I.globe;
    return /*#__PURE__*/React.createElement("a", {
      key: k,
      href: "#",
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 11,
        padding: '9px 12px',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--line-1)',
        color: 'var(--ink-1)'
      }
    }, /*#__PURE__*/React.createElement(Ico, {
      size: 17
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: 13.5,
        fontWeight: 500,
        textTransform: 'capitalize'
      }
    }, k === 'website' ? v : '@' + v), /*#__PURE__*/React.createElement("span", {
      style: {
        marginLeft: 'auto',
        color: 'var(--ink-4)'
      }
    }, /*#__PURE__*/React.createElement(I.external, {
      size: 14
    })));
  })));
}
function TrustCard() {
  const {
    Card
  } = DS;
  return /*#__PURE__*/React.createElement(Card, {
    tone: "mint",
    padding: 18
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 13,
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 42,
      height: 42,
      flex: 'none',
      borderRadius: 13,
      background: 'var(--canvas-2)',
      color: 'var(--mint-d)',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/React.createElement(I.shield, {
    size: 21
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      fontWeight: 700
    }
  }, "All links verified safe"), /*#__PURE__*/React.createElement("div", {
    style: {
      ...mono,
      fontSize: 11.5,
      color: 'var(--mint-d)',
      marginTop: 3
    }
  }, "// governed \xB7 checked \xB7 safe to click"))));
}
function SaveBtn({
  on,
  onClick
}) {
  return /*#__PURE__*/React.createElement("button", {
    onClick: onClick,
    "aria-label": "Save link",
    style: {
      width: 36,
      height: 36,
      flex: 'none',
      borderRadius: 11,
      border: '1px solid var(--line-1)',
      background: on ? 'var(--lilac-3)' : 'var(--canvas-2)',
      color: on ? 'var(--violet-500)' : 'var(--ink-3)',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
      transition: 'all var(--dur-base) var(--ease-out)'
    }
  }, on ? /*#__PURE__*/React.createElement(I.bookmarkFill, {
    size: 16
  }) : /*#__PURE__*/React.createElement(I.bookmark, {
    size: 16
  }));
}
function Glow({
  style
}) {
  const {
    color,
    opacity,
    ...rest
  } = style;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      borderRadius: '50%',
      pointerEvents: 'none',
      opacity: opacity != null ? opacity : 1,
      background: `radial-gradient(circle, ${color}, transparent 70%)`,
      ...rest
    }
  });
}
const ghostOnDark = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: 7,
  padding: '9px 16px',
  borderRadius: 'var(--radius-pill)',
  border: '1px solid rgba(255,255,255,0.16)',
  background: 'rgba(255,255,255,0.06)',
  color: 'var(--canvas-2)',
  fontSize: 14,
  fontWeight: 600,
  cursor: 'pointer'
};
window.PK = {
  I,
  Mono,
  Spark,
  eyebrow,
  mono,
  fmt,
  DEFAULT,
  FOLLOWERS,
  TONES,
  PublicProfile,
  Glow,
  ghostOnDark,
  SaveBtn
};
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/thinly-app/profile-kit.jsx", error: String((e && e.message) || e) }); }

__ds_ns.Button = __ds_scope.Button;

__ds_ns.Input = __ds_scope.Input;

__ds_ns.Switch = __ds_scope.Switch;

__ds_ns.Tabs = __ds_scope.Tabs;

__ds_ns.Badge = __ds_scope.Badge;

__ds_ns.Card = __ds_scope.Card;

__ds_ns.StatTile = __ds_scope.StatTile;

__ds_ns.StatusPill = __ds_scope.StatusPill;

})();