hanki-lanyard 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1912 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var qrcode_react = require('qrcode.react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/LanyardCard.tsx
+
+// src/defaults.ts
+var DEFAULT_LANYARD_TEXT = "hanki.fun";
+var DEFAULT_HANKI_BADGE = {
+  name: "Hanki",
+  role: "Platform",
+  roleType: "You're Invited",
+  eventCode: "HNKI",
+  date: "Join the waitlist",
+  location: "Online",
+  venue: "hanki.fun",
+  address: "Your link-in-bio badge studio",
+  website: "hanki.fun",
+  email: "hello@hanki.fun",
+  phone: "",
+  company: "Hanki",
+  tagline: "Create your badge. Share your links.",
+  logoUrl: "/hanki-logo.png",
+  lanyardText: DEFAULT_LANYARD_TEXT,
+  badgeLabel: "INVITE",
+  scanLabel: "VISIT",
+  emailLabel: "EMAIL",
+  phoneLabel: "PHONE",
+  addressLabel: "ADDRESS",
+  authHeaderEvent: "YOU'RE INVITED",
+  authHeaderVenue: "hanki.fun",
+  authHeaderDate: "Create your free account",
+  signInTitle: "SIGN IN",
+  signUpTitle: "SIGN UP",
+  signInSideLabel: "FRONT SIDE",
+  signUpSideLabel: "BACK SIDE",
+  signUpSubmitLabel: "JOIN HANKI \u2192",
+  signUpNameHint: "Shown on your Hanki badge.",
+  colors: {
+    cardBg: "#0a0a0a",
+    accentColor: "#ff2d85",
+    nameColor: "#ffffff",
+    roleColor: "#b8b8b8",
+    metaColor: "#888888",
+    footerBg: "#111111",
+    footerText: "#ffffff",
+    ringColor: "#666666"
+  }
+};
+function resolveLanyardText(data) {
+  const custom = data.lanyardText?.trim();
+  if (custom) return custom;
+  const site = data.website?.trim();
+  if (site) return site;
+  return DEFAULT_LANYARD_TEXT;
+}
+
+// src/auth.ts
+var SIGNIN_STEPS_DEFAULT = [
+  {
+    id: "email",
+    question: "Welcome back \u2014 what email did you use?",
+    hint: "Sign in to your hanki.fun account.",
+    label: "EMAIL",
+    type: "email",
+    placeholder: "you@example.com",
+    autoComplete: "email"
+  },
+  {
+    id: "password",
+    question: "Enter your password",
+    label: "PASSWORD",
+    type: "password",
+    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    autoComplete: "current-password"
+  }
+];
+var REGISTER_STEPS_DEFAULT = [
+  {
+    id: "name",
+    question: "What should we call you on Hanki?",
+    hint: "Shown on your Hanki badge.",
+    label: "FULL NAME",
+    type: "text",
+    placeholder: "Your name",
+    autoComplete: "name"
+  },
+  {
+    id: "email",
+    question: "What's your email?",
+    label: "EMAIL",
+    type: "email",
+    placeholder: "you@example.com",
+    autoComplete: "email"
+  },
+  {
+    id: "password",
+    question: "Choose a password",
+    hint: "At least 8 characters.",
+    label: "PASSWORD",
+    type: "password",
+    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    autoComplete: "new-password"
+  },
+  {
+    id: "confirm",
+    question: "Confirm your password",
+    label: "CONFIRM",
+    type: "password",
+    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    autoComplete: "new-password"
+  }
+];
+function isValidEmail(value) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
+function mergeBadgeStepCopy(base, data, overrides) {
+  const patch = overrides[base.id];
+  if (!patch) return base;
+  return {
+    ...base,
+    question: patch.question ?? base.question,
+    hint: patch.hint ?? base.hint
+  };
+}
+function getSignInSteps(data) {
+  return [
+    mergeBadgeStepCopy(SIGNIN_STEPS_DEFAULT[0], data, {
+      email: {
+        question: data.signInEmailQuestion,
+        hint: data.signInEmailHint
+      }
+    }),
+    mergeBadgeStepCopy(SIGNIN_STEPS_DEFAULT[1], data, {
+      password: { question: data.signInPasswordQuestion }
+    })
+  ];
+}
+function getRegisterSteps(data) {
+  return [
+    mergeBadgeStepCopy(REGISTER_STEPS_DEFAULT[0], data, {
+      name: {
+        question: data.signUpNameQuestion,
+        hint: data.signUpNameHint
+      }
+    }),
+    mergeBadgeStepCopy(REGISTER_STEPS_DEFAULT[1], data, {
+      email: { question: data.signUpEmailQuestion }
+    }),
+    mergeBadgeStepCopy(REGISTER_STEPS_DEFAULT[2], data, {
+      password: {
+        question: data.signUpPasswordQuestion,
+        hint: data.signUpPasswordHint
+      }
+    }),
+    mergeBadgeStepCopy(REGISTER_STEPS_DEFAULT[3], data, {
+      confirm: { question: data.signUpConfirmQuestion }
+    })
+  ];
+}
+function resolveAuthSteps(mode, data, auth) {
+  const flow = auth?.flows?.[mode];
+  if (flow?.steps?.length) return flow.steps;
+  if (mode === "signin" && auth?.signInSteps?.length) return auth.signInSteps;
+  if (mode === "signup" && auth?.signUpSteps?.length) return auth.signUpSteps;
+  return mode === "signin" ? getSignInSteps(data) : getRegisterSteps(data);
+}
+function defaultStepValidator(step, values, mode) {
+  const value = (values[step.id] ?? "").trim();
+  switch (step.id) {
+    case "name":
+      return value.length >= 2;
+    case "email":
+      return isValidEmail(value);
+    case "password":
+      return mode === "signin" ? value.length > 0 : value.length >= 8;
+    case "confirm":
+      return value.length >= 8 && value === (values.password ?? "");
+    default:
+      return value.length > 0;
+  }
+}
+function stepCanContinue(step, values, mode) {
+  if (step.validate) {
+    const result = step.validate(values[step.id] ?? "", values);
+    return result === true;
+  }
+  return defaultStepValidator(step, values, mode);
+}
+function emptyValuesForSteps(steps) {
+  return Object.fromEntries(steps.map((step) => [step.id, ""]));
+}
+function flowMeta(mode, data, auth) {
+  const flow = auth?.flows?.[mode];
+  const modeTitle = flow?.title ?? (mode === "signin" ? data.signInTitle ?? "SIGN IN" : data.signUpTitle ?? "SIGN UP");
+  const sideLabel = mode === "signin" ? flow?.sideLabel ?? data.signInSideLabel ?? "FRONT SIDE" : flow?.sideLabel ?? data.signUpSideLabel ?? "BACK SIDE";
+  const continueLabel = flow?.continueLabel ?? data.continueLabel ?? "CONTINUE \u2192";
+  const submitLabel = mode === "signin" ? flow?.submitLabel ?? data.signInSubmitLabel ?? "SIGN IN \u2192" : flow?.submitLabel ?? data.signUpSubmitLabel ?? "JOIN HANKI \u2192";
+  return { modeTitle, sideLabel, continueLabel, submitLabel };
+}
+
+// src/geometry.ts
+var CARD_W = 260;
+var CARD_H = 380;
+var ANCHOR_Y = 40;
+var STRAP_LENGTH = 280;
+var ZOOM_AUTH_FOCUS_SCALE = 1.35;
+var ZOOM_PERSPECTIVE = 900;
+var ZOOM_MAX_Z = 700;
+var MAX_ZOOM_SCALE = (ZOOM_PERSPECTIVE + ZOOM_MAX_Z) / ZOOM_PERSPECTIVE;
+var COIL_STRENGTH = 0.72;
+function coilFactorFromScale(scale) {
+  if (scale <= 1) return 0;
+  return Math.min(1, (scale - 1) / (MAX_ZOOM_SCALE - 1));
+}
+function effectiveStrapDrop(coil) {
+  return STRAP_LENGTH * (1 - coil * COIL_STRENGTH);
+}
+function effectiveCardBottomY(coil) {
+  return ANCHOR_Y + effectiveStrapDrop(coil) + CARD_H;
+}
+function effectiveCardCenterY(coil) {
+  return ANCHOR_Y + effectiveStrapDrop(coil) + CARD_H / 2;
+}
+var SPRING_STIFFNESS = 0.07;
+var SPRING_DAMPING = 0.75;
+var LABEL_START_OFFSET = 60;
+var LABEL_SPACING = 130;
+var LABEL_END_MARGIN = 20;
+function cubicPoint(c, t) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * mt * c.p0.x + 3 * mt * mt * t * c.p1.x + 3 * mt * t * t * c.p2.x + t * t * t * c.p3.x,
+    y: mt * mt * mt * c.p0.y + 3 * mt * mt * t * c.p1.y + 3 * mt * t * t * c.p2.y + t * t * t * c.p3.y
+  };
+}
+function flattenCubics(cubics, stepsEach) {
+  const raw = [];
+  cubics.forEach((c, idx) => {
+    const start = idx === 0 ? 0 : 1;
+    for (let i = start; i <= stepsEach; i++) {
+      raw.push(cubicPoint(c, i / stepsEach));
+    }
+  });
+  return raw;
+}
+function addTangents(raw) {
+  return raw.map((p, i) => {
+    const prev = raw[Math.max(0, i - 1)];
+    const next = raw[Math.min(raw.length - 1, i + 1)];
+    const dx = next.x - prev.x;
+    const dy = next.y - prev.y;
+    const len = Math.hypot(dx, dy) || 1;
+    return { x: p.x, y: p.y, tx: dx / len, ty: dy / len };
+  });
+}
+function buildTenseStrapPoints(anchor, cardTopX, cardTopY, steps) {
+  const drop = Math.max(20, cardTopY - anchor.y);
+  const midY = anchor.y + drop * 0.5;
+  const raw = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const mt = 1 - t;
+    raw.push({
+      x: mt * mt * mt * anchor.x + 3 * mt * mt * t * anchor.x + 3 * mt * t * t * cardTopX + t * t * t * cardTopX,
+      y: mt * mt * mt * anchor.y + 3 * mt * mt * t * midY + 3 * mt * t * t * midY + t * t * t * cardTopY
+    });
+  }
+  return addTangents(raw);
+}
+function buildShoelaceLayers(anchor, cardTopX, cardTopY, coil, stepsEach) {
+  const ax = anchor.x;
+  const ay = anchor.y;
+  const spread = 16 + coil * 34;
+  const stackBase = ay + 8 + coil * 10;
+  const stackMid = stackBase + 20 + coil * 36;
+  const stackExit = stackMid + 14 + coil * 22;
+  const under = [
+    {
+      p0: { x: ax, y: ay },
+      p1: { x: ax - spread * 0.55, y: ay + 5 },
+      p2: { x: ax - spread * 0.92, y: stackBase + 6 },
+      p3: { x: ax - spread * 0.28, y: stackMid - 2 }
+    },
+    {
+      p0: { x: ax - spread * 0.28, y: stackMid - 2 },
+      p1: { x: ax - spread * 0.05, y: stackMid + 10 },
+      p2: { x: ax + spread * 0.42, y: stackExit - 6 },
+      p3: { x: ax + spread * 0.18, y: stackExit }
+    }
+  ];
+  const over = [
+    {
+      p0: { x: ax, y: ay },
+      p1: { x: ax + spread * 0.42, y: ay + 3 },
+      p2: { x: ax + spread * 1.02, y: stackBase + 8 },
+      p3: { x: ax + spread * 0.22, y: stackMid - 6 }
+    },
+    {
+      p0: { x: ax + spread * 0.22, y: stackMid - 6 },
+      p1: { x: ax - spread * 0.18, y: stackMid + 4 },
+      p2: { x: ax - spread * 0.42, y: stackMid + 16 },
+      p3: { x: ax - spread * 0.08, y: stackExit - 3 }
+    },
+    {
+      p0: { x: ax - spread * 0.08, y: stackExit - 3 },
+      p1: { x: ax + spread * 0.28, y: stackExit + 2 },
+      p2: { x: ax + spread * 0.12, y: stackExit + 8 },
+      p3: { x: ax + spread * 0.06, y: stackExit + 5 }
+    }
+  ];
+  const tail = [
+    {
+      p0: { x: ax + spread * 0.06, y: stackExit + 5 },
+      p1: { x: ax + spread * 0.08, y: stackExit + 28 },
+      p2: { x: cardTopX, y: cardTopY - 36 },
+      p3: { x: cardTopX, y: cardTopY }
+    }
+  ];
+  return [
+    { pts: addTangents(flattenCubics(under, stepsEach)), depth: "under" },
+    { pts: addTangents(flattenCubics(over, stepsEach)), depth: "over" },
+    { pts: addTangents(flattenCubics(tail, stepsEach)), depth: "over" }
+  ];
+}
+function concatStrapPaths(segments) {
+  const raw = [];
+  for (const seg of segments) {
+    for (const p of seg) {
+      if (raw.length > 0) {
+        const last = raw[raw.length - 1];
+        if (Math.hypot(p.x - last.x, p.y - last.y) < 0.5) continue;
+      }
+      raw.push({ x: p.x, y: p.y });
+    }
+  }
+  return addTangents(raw);
+}
+function buildStrapPoints(anchor, cardTopX, cardTopY, coil, steps) {
+  return buildTenseStrapPoints(anchor, cardTopX, cardTopY, steps);
+}
+var CRISP_TEXT = {
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+  textRendering: "optimizeLegibility"
+};
+function withAlpha(hex, alpha) {
+  const h = hex.replace("#", "");
+  if (h.length !== 6) return hex;
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function contrastText(bg) {
+  const h = bg.replace("#", "");
+  if (h.length !== 6) return "#000";
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.55 ? "#000" : "#fff";
+}
+function Barcode({ color }) {
+  const bars = [3, 1, 2, 1, 3, 2, 1, 2, 1, 3, 1, 2, 2, 1, 1, 3, 2, 1, 2, 1, 3, 1, 2, 1, 3, 2, 1, 1, 2, 3, 1, 2, 1, 2, 3];
+  let x = 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "200", height: "36", viewBox: "0 0 200 36", style: { display: "block" }, children: bars.map((w, i) => {
+    const rect = i % 2 === 0 ? /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: 0, width: w * 3.5, height: 36, fill: color, rx: 0.3 }, i) : null;
+    x += w * 3.5;
+    return rect;
+  }) });
+}
+function AuthModeToggleBar({
+  authMode,
+  signInTitle,
+  signUpTitle,
+  colors,
+  onChange
+}) {
+  const c = colors;
+  const selectMode = (option, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onChange(option);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-auth-mode-toggle": true,
+      "data-no-drag": true,
+      "data-auth-interactive": true,
+      onPointerDown: (e) => e.stopPropagation(),
+      onPointerUp: (e) => e.stopPropagation(),
+      style: {
+        position: "absolute",
+        top: 22,
+        left: 8,
+        right: 8,
+        zIndex: 1,
+        display: "flex",
+        gap: 6,
+        padding: 5,
+        borderRadius: 10,
+        background: c.cardBg,
+        border: `1.5px solid ${withAlpha(c.accentColor, 0.32)}`,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.42)",
+        pointerEvents: "auto",
+        touchAction: "manipulation",
+        cursor: "default",
+        isolation: "isolate"
+      },
+      children: ["signin", "signup"].map((option) => {
+        const active = authMode === option;
+        const label = option === "signin" ? signInTitle : signUpTitle;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-auth-mode-toggle": true,
+            "data-no-drag": true,
+            onPointerDown: (e) => e.stopPropagation(),
+            onClick: (e) => selectMode(option, e),
+            style: {
+              flex: 1,
+              minHeight: 38,
+              cursor: "pointer",
+              border: active ? "none" : `1px solid ${withAlpha(c.accentColor, 0.22)}`,
+              borderRadius: 8,
+              padding: "10px 8px",
+              fontFamily: "var(--font-mono)",
+              fontSize: 9,
+              letterSpacing: "0.14em",
+              fontWeight: active ? 700 : 500,
+              lineHeight: 1,
+              background: active ? c.accentColor : withAlpha(c.accentColor, 0.07),
+              color: active ? contrastText(c.accentColor) : c.roleColor,
+              WebkitTapHighlightColor: "transparent"
+            },
+            children: label
+          },
+          option
+        );
+      })
+    }
+  );
+}
+function AuthFace({
+  mode,
+  data,
+  auth,
+  isFaceActive,
+  reserveToggleSpace
+}) {
+  const customFace = auth?.renderAuthFace?.({
+    flowId: mode,
+    data,
+    isFaceActive,
+    reserveToggleSpace: !!reserveToggleSpace,
+    onComplete: (values2) => {
+      void auth?.onSubmit?.({
+        flowId: mode,
+        mode,
+        values: values2,
+        stepIndex: 0,
+        isComplete: true
+      });
+    }
+  });
+  if (customFace) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: customFace });
+  }
+  const c = data.colors;
+  const steps = resolveAuthSteps(mode, data, auth);
+  const { modeTitle, sideLabel, continueLabel, submitLabel } = flowMeta(mode, data, auth);
+  const headerEvent = data.authHeaderEvent ?? data.eventCode;
+  const headerVenue = data.authHeaderVenue ?? data.venue;
+  const headerDate = data.authHeaderDate ?? data.date;
+  const headerLogo = data.logoUrl ?? "/hanki-logo.png";
+  const [stepIndex, setStepIndex] = react.useState(0);
+  const [values, setValues] = react.useState(() => emptyValuesForSteps(steps));
+  const inputRef = react.useRef(null);
+  const currentStep = steps[stepIndex];
+  const isLastStep = stepIndex === steps.length - 1;
+  const canContinue = stepCanContinue(currentStep, values, mode);
+  const progress = (stepIndex + 1) / steps.length;
+  react.useEffect(() => {
+    setStepIndex(0);
+    setValues(emptyValuesForSteps(steps));
+  }, [mode, auth, data]);
+  react.useEffect(() => {
+    if (!isFaceActive) {
+      inputRef.current?.blur();
+      return;
+    }
+    const timer = window.setTimeout(() => inputRef.current?.focus({ preventScroll: true }), 120);
+    return () => window.clearTimeout(timer);
+  }, [stepIndex, mode, isFaceActive]);
+  const emitSubmit = (complete) => {
+    void auth?.onSubmit?.({
+      flowId: mode,
+      mode,
+      values,
+      stepIndex,
+      isComplete: complete
+    });
+  };
+  const handleContinue = () => {
+    if (!canContinue) return;
+    emitSubmit(isLastStep);
+    if (isLastStep) return;
+    setStepIndex((i) => i + 1);
+  };
+  const handleBack = () => {
+    if (stepIndex > 0) setStepIndex((i) => i - 1);
+  };
+  const handleFieldChange = (field, value) => {
+    setValues((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    handleContinue();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-no-drag": true,
+      "data-auth-interactive": isFaceActive ? true : void 0,
+      "aria-hidden": !isFaceActive,
+      style: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: 16,
+        overflow: "hidden",
+        pointerEvents: isFaceActive ? "auto" : "none",
+        visibility: isFaceActive ? "visible" : "hidden",
+        zIndex: 50,
+        background: c.cardBg,
+        touchAction: isFaceActive ? "auto" : "none",
+        userSelect: isFaceActive ? "auto" : "none",
+        cursor: isFaceActive ? "default" : "default",
+        ...CRISP_TEXT
+      },
+      onPointerEnter: () => {
+        if (isFaceActive) document.body.style.cursor = "default";
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 1, background: withAlpha(c.accentColor, 0.22), zIndex: 2 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "absolute",
+          top: 14,
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: 14,
+          height: 14,
+          borderRadius: "50%",
+          background: c.cardBg,
+          border: `1.5px solid ${c.ringColor}`,
+          zIndex: 11,
+          pointerEvents: "none"
+        } }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          paddingTop: reserveToggleSpace ? 68 : 30,
+          zIndex: 5
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+            margin: "0 14px 6px",
+            padding: "6px 9px",
+            borderRadius: 8,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+            background: mode === "signin" ? withAlpha(c.accentColor, 0.16) : withAlpha(c.accentColor, 0.08),
+            border: `1.5px solid ${mode === "signin" ? c.accentColor : withAlpha(c.accentColor, 0.28)}`
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              fontFamily: "var(--font-mono)",
+              fontSize: 10,
+              letterSpacing: "0.2em",
+              fontWeight: 700,
+              color: mode === "signin" ? c.accentColor : c.nameColor
+            }, children: modeTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              fontFamily: "var(--font-mono)",
+              fontSize: 7,
+              letterSpacing: "0.16em",
+              color: c.roleColor,
+              whiteSpace: "nowrap"
+            }, children: sideLabel })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 4,
+            padding: "0 14px 8px"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: headerLogo,
+                alt: "Hanki",
+                draggable: false,
+                style: { height: 22, width: "auto", maxWidth: 120, objectFit: "contain" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontSize: 7, letterSpacing: "0.24em", color: c.metaColor }, children: headerEvent }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              fontFamily: "var(--font-sans)",
+              fontWeight: 700,
+              fontSize: 16,
+              color: c.accentColor,
+              letterSpacing: "-0.02em",
+              lineHeight: 1.1
+            }, children: headerVenue }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontSize: 7, color: c.roleColor, letterSpacing: "0.08em", textAlign: "center" }, children: headerDate })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: withAlpha(c.accentColor, 0.12), margin: "0 14px 6px" } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "form",
+            {
+              "data-no-drag": true,
+              onSubmit: handleSubmit,
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                padding: "0 14px",
+                touchAction: "auto"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 3, borderRadius: 999, background: withAlpha(c.accentColor, 0.12), overflow: "hidden", marginBottom: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      height: "100%",
+                      width: `${progress * 100}%`,
+                      borderRadius: 999,
+                      background: c.accentColor,
+                      transition: "width 0.35s ease"
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontFamily: "var(--font-mono)", fontSize: 7, letterSpacing: "0.2em", color: c.roleColor, marginBottom: 6 }, children: [
+                  modeTitle,
+                  " \xB7 STEP ",
+                  stepIndex + 1,
+                  " OF ",
+                  steps.length
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 6,
+                      animation: "authStepIn 0.32s ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                        fontFamily: "var(--font-sans)",
+                        fontWeight: 700,
+                        fontSize: 13,
+                        lineHeight: 1.25,
+                        color: c.nameColor,
+                        letterSpacing: "-0.02em",
+                        margin: 0
+                      }, children: currentStep.question }),
+                      currentStep.hint ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 7, color: c.roleColor, letterSpacing: "0.06em", margin: 0 }, children: currentStep.hint }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        AuthField,
+                        {
+                          ref: inputRef,
+                          label: currentStep.label,
+                          type: currentStep.type ?? "text",
+                          placeholder: currentStep.placeholder ?? "",
+                          autoComplete: currentStep.autoComplete,
+                          colors: c,
+                          value: values[currentStep.id] ?? "",
+                          onChange: (value) => handleFieldChange(currentStep.id, value)
+                        }
+                      )
+                    ]
+                  },
+                  `${mode}-${currentStep.id}`
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 10, paddingBottom: 6 }, children: [
+                  stepIndex > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-no-drag": true,
+                      onClick: handleBack,
+                      "aria-label": "Go back",
+                      style: {
+                        width: 32,
+                        height: 32,
+                        flexShrink: 0,
+                        borderRadius: 999,
+                        border: `1px solid ${withAlpha(c.accentColor, 0.25)}`,
+                        background: "transparent",
+                        color: c.metaColor,
+                        cursor: "pointer",
+                        fontFamily: "var(--font-mono)",
+                        fontSize: 14,
+                        lineHeight: 1
+                      },
+                      children: "\u2190"
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "submit",
+                      "data-no-drag": true,
+                      disabled: !canContinue,
+                      style: {
+                        flex: 1,
+                        height: 34,
+                        borderRadius: 8,
+                        background: canContinue ? c.accentColor : withAlpha(c.accentColor, 0.35),
+                        color: contrastText(c.accentColor),
+                        border: "none",
+                        cursor: canContinue ? "pointer" : "not-allowed",
+                        fontFamily: "var(--font-mono)",
+                        fontSize: 10,
+                        letterSpacing: "0.18em",
+                        fontWeight: 600,
+                        transition: "opacity 0.2s, background 0.2s",
+                        opacity: canContinue ? 1 : 0.7
+                      },
+                      onMouseEnter: (e) => {
+                        if (canContinue) e.currentTarget.style.opacity = "0.85";
+                      },
+                      onMouseLeave: (e) => {
+                        if (canContinue) e.currentTarget.style.opacity = "1";
+                      },
+                      children: isLastStep ? submitLabel : continueLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            height: 34,
+            flexShrink: 0,
+            marginTop: "auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: c.footerBg,
+            borderTop: `1px solid ${withAlpha(c.accentColor, 0.12)}`
+          }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.16em", color: c.footerText }, children: data.website }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, borderRadius: 16, pointerEvents: "none", zIndex: 15, boxShadow: `inset 0 1px 0 ${withAlpha(c.accentColor, 0.12)}, inset 0 -1px 0 rgba(0,0,0,0.4)` } })
+      ]
+    }
+  );
+}
+var AuthField = function AuthField2({
+  label,
+  type,
+  placeholder,
+  autoComplete,
+  colors,
+  value,
+  onChange,
+  ref
+}) {
+  const inputId = react.useId();
+  const borderDefault = withAlpha(colors.accentColor, 0.14);
+  const borderFocus = withAlpha(colors.accentColor, 0.45);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-no-drag": true,
+      style: { display: "flex", flexDirection: "column", gap: 6, position: "relative", zIndex: 20 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            style: {
+              fontFamily: "var(--font-mono)",
+              fontSize: 8,
+              letterSpacing: "0.24em",
+              color: colors.metaColor,
+              cursor: "text",
+              paddingBottom: 2
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: inputId,
+            ref,
+            type,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder,
+            autoComplete,
+            "data-no-drag": true,
+            onPointerDown: (e) => e.stopPropagation(),
+            style: {
+              height: 42,
+              minHeight: 42,
+              padding: "0 12px",
+              borderRadius: 8,
+              background: withAlpha(colors.accentColor, 0.06),
+              border: `1px solid ${borderDefault}`,
+              color: colors.nameColor,
+              fontSize: 13,
+              fontFamily: "var(--font-mono)",
+              letterSpacing: "0.04em",
+              outline: "none",
+              transition: "border-color 0.2s",
+              cursor: "text",
+              touchAction: "manipulation",
+              userSelect: "text",
+              WebkitUserSelect: "text",
+              ...CRISP_TEXT
+            },
+            onFocus: (e) => e.target.style.borderColor = borderFocus,
+            onBlur: (e) => e.target.style.borderColor = borderDefault
+          }
+        )
+      ]
+    }
+  );
+};
+function CardFront({
+  data,
+  auth,
+  shinePct,
+  isFaceActive,
+  reserveToggleSpace
+}) {
+  const c = data.colors;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 rounded-2xl overflow-hidden",
+      style: {
+        backfaceVisibility: "hidden",
+        WebkitBackfaceVisibility: "hidden",
+        pointerEvents: isFaceActive ? "auto" : "none"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", style: { background: c.cardBg }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              opacity: 0,
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none rounded-2xl",
+                  style: {
+                    background: `radial-gradient(ellipse at ${shinePct.x}% ${shinePct.y}%, rgba(255,255,255,0.07) 0%, transparent 60%)`,
+                    zIndex: 10
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute", style: { top: 14, left: "50%", transform: "translateX(-50%)", width: 14, height: 14, borderRadius: "50%", background: "#000", border: "1.5px solid #333", zIndex: 11 } }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 right-0 flex items-start justify-between px-4", style: { zIndex: 12, paddingTop: 34 }, children: [
+                data.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: data.logoUrl,
+                    alt: "Logo",
+                    style: { height: 13, maxWidth: 80, objectFit: "contain" },
+                    draggable: false
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: "/hanki-logo.png",
+                    alt: "Hanki",
+                    style: { height: 13, maxWidth: 80, objectFit: "contain" },
+                    draggable: false
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", style: { gap: 2 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.06em", color: c.metaColor, whiteSpace: "nowrap" }, children: data.date }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.06em", color: c.metaColor, whiteSpace: "nowrap" }, children: data.location })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute pointer-events-none flex items-center justify-center",
+                  style: {
+                    top: 48,
+                    left: 0,
+                    right: 0,
+                    zIndex: 3,
+                    userSelect: "none"
+                  },
+                  children: data.shipImageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: data.shipImageUrl,
+                      alt: "Ship Image",
+                      style: {
+                        width: "68%",
+                        height: "auto"
+                      },
+                      draggable: false
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: data.logoUrl ?? "/hanki-logo.png",
+                      alt: "Hanki",
+                      style: {
+                        width: "68%",
+                        height: "auto",
+                        objectFit: "contain"
+                      },
+                      draggable: false
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute pointer-events-none", style: { top: 150, left: 24, zIndex: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "22", viewBox: "0 0 22 26", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 1L1 20.5L6 15.5L9.5 23L12 22L8.5 14.5L15.5 14.5L1 1Z", fill: c.metaColor, stroke: c.cardBg, strokeWidth: "1.5" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute pointer-events-none", style: { top: 82, right: 18, width: 0, height: 0, borderLeft: "7px solid transparent", borderRight: "7px solid transparent", borderBottom: `12px solid ${c.metaColor}`, opacity: 0.4, zIndex: 6 } }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 flex flex-col justify-end", style: { zIndex: 7 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 pb-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 32, lineHeight: 1.05, color: c.nameColor, letterSpacing: "-0.02em" }, children: data.name }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.15em", color: c.roleColor, marginTop: 6 }, children: data.roleType.toUpperCase() })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: "rgba(255,255,255,0.07)", margin: "10px 0" } }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 pb-3 flex items-end justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", color: c.metaColor, lineHeight: 1.7 }, children: data.venue.toUpperCase() }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", color: c.metaColor, opacity: 0.6 }, children: data.address.toUpperCase() })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "19", viewBox: "0 0 1155 1000", fill: c.accentColor, style: { opacity: 0.9 }, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m577.3 0 577.4 1000H0z" }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", style: { background: c.footerBg, height: 36 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: c.footerText }, children: data.website }) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none rounded-2xl", style: { zIndex: 49, boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.4)" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AuthFace,
+          {
+            mode: "signin",
+            data,
+            auth,
+            isFaceActive,
+            reserveToggleSpace
+          }
+        )
+      ] })
+    }
+  );
+}
+function CardBack({
+  data,
+  auth,
+  shinePct,
+  isFaceActive,
+  reserveToggleSpace
+}) {
+  const c = data.colors;
+  const qrValue = data.website ? data.website.startsWith("http") ? data.website : `https://${data.website}` : "https://example.com";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 rounded-2xl overflow-hidden",
+      style: {
+        backfaceVisibility: "hidden",
+        WebkitBackfaceVisibility: "hidden",
+        transform: "rotateY(180deg)",
+        pointerEvents: isFaceActive ? "auto" : "none"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full flex flex-col", style: { background: c.cardBg }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "absolute", inset: 0, opacity: 0, pointerEvents: "none" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none rounded-2xl",
+              style: {
+                background: `radial-gradient(ellipse at ${100 - shinePct.x}% ${shinePct.y}%, rgba(255,255,255,0.07) 0%, transparent 60%)`,
+                zIndex: 10
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute", style: { top: 14, left: "50%", transform: "translateX(-50%)", width: 14, height: 14, borderRadius: "50%", background: "#000", border: "1.5px solid #333", zIndex: 11 } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 4, background: c.accentColor, flexShrink: 0 } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute pointer-events-none select-none",
+              style: { top: -20, right: -30, fontFamily: "var(--font-sans)", fontWeight: 900, fontSize: 200, lineHeight: 1, color: c.accentColor, opacity: 0.04, letterSpacing: "-0.05em", zIndex: 1 },
+              children: data.eventCode
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-5", style: { zIndex: 5, gap: 7, flex: 1, paddingTop: 28 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              data.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: data.logoUrl,
+                  alt: "Logo",
+                  style: { height: 14, maxWidth: 80, objectFit: "contain" },
+                  draggable: false
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: "/hanki-logo.png",
+                  alt: "Hanki",
+                  style: { height: 14, maxWidth: 80, objectFit: "contain" },
+                  draggable: false
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.2em", color: c.roleColor }, children: [
+                data.eventCode,
+                " / ",
+                data.badgeLabel || "BADGE"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontFamily: "var(--font-sans)", fontWeight: 800, fontSize: 17, color: c.nameColor, letterSpacing: "-0.02em", lineHeight: 1.1 }, children: data.company || "Company Name" }),
+              data.tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.04em", color: c.metaColor, lineHeight: 1.4, opacity: 0.7, marginTop: 3 }, children: data.tagline })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: `${c.accentColor}30` } }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", style: { gap: 10 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md overflow-hidden flex-shrink-0", style: { padding: 5, background: "#ffffff" }, children: /* @__PURE__ */ jsxRuntime.jsx(qrcode_react.QRCodeSVG, { value: qrValue, size: 78, bgColor: "#ffffff", fgColor: "#000000", level: "M" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", style: { gap: 5, paddingTop: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 8, letterSpacing: "0.18em", color: c.metaColor, marginBottom: 2 }, children: data.scanLabel || "SCAN TO VISIT" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.03em", color: c.accentColor, fontWeight: 600, lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: data.website })
+                ] }),
+                data.email && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 8, letterSpacing: "0.15em", color: c.metaColor, marginBottom: 2 }, children: data.emailLabel || "EMAIL" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 8.5, color: c.roleColor, lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: data.email })
+                ] }),
+                data.phone && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 8, letterSpacing: "0.15em", color: c.metaColor, marginBottom: 2 }, children: data.phoneLabel || "PHONE" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 8.5, color: c.roleColor, lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: data.phone })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: `${c.accentColor}30` } }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 8, letterSpacing: "0.18em", color: c.metaColor, marginBottom: 4 }, children: data.addressLabel ?? "ADDRESS" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", style: { gap: 8 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 9.5, color: c.roleColor, lineHeight: 1.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: data.venue }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 9.5, color: c.roleColor, opacity: 0.7, lineHeight: 1.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: data.address })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 9.5, color: c.roleColor, opacity: 0.6, textAlign: "right", flexShrink: 0, whiteSpace: "nowrap" }, children: data.location })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: `${c.accentColor}30` } }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Barcode, { color: c.accentColor + "aa" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-mono)", fontSize: 7, letterSpacing: "0.22em", color: c.metaColor, opacity: 0.4, marginTop: 3 }, children: "*" + data.name.replace(/\s/g, "").toUpperCase().slice(0, 12).padEnd(12, "0") + "*" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 mt-auto", style: { background: c.footerBg, height: 36, flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: c.footerText }, children: data.website }),
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "14", viewBox: "0 0 1155 1000", fill: c.accentColor, style: { opacity: 0.8 }, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m577.3 0 577.4 1000H0z" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none rounded-2xl", style: { zIndex: 49, boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.4)" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AuthFace,
+          {
+            mode: "signup",
+            data,
+            auth,
+            isFaceActive,
+            reserveToggleSpace
+          }
+        )
+      ] })
+    }
+  );
+}
+function LanyardCard({
+  data,
+  zoomScale = 1,
+  authMode = "signin",
+  onAuthModeChange,
+  auth,
+  className,
+  style
+}) {
+  const containerRef = react.useRef(null);
+  const cardRef = react.useRef(null);
+  const canvasRef = react.useRef(null);
+  const coilRef = react.useRef(coilFactorFromScale(zoomScale));
+  const pos = react.useRef({ x: 0, y: 0 });
+  const vel = react.useRef({ x: 0, y: 0 });
+  const tilt = react.useRef({ rx: 0, ry: 0 });
+  const tiltTarget = react.useRef({ rx: 0, ry: 0 });
+  const dragging = react.useRef(false);
+  const dragOffset = react.useRef({ x: 0, y: 0 });
+  const hasMounted = react.useRef(false);
+  const rafId = react.useRef(0);
+  const didDrag = react.useRef(false);
+  const [shinePct, setShinePct] = react.useState({ x: 50, y: 50 });
+  const [flipAngle, setFlipAngle] = react.useState(authMode === "signup" ? 180 : 0);
+  const flipRef = react.useRef(authMode === "signup" ? 180 : 0);
+  const flipTarget = react.useRef(authMode === "signup" ? 180 : 0);
+  const flipRaf = react.useRef(0);
+  const isSignup = authMode === "signup";
+  const allowFlipOnClick = zoomScale < ZOOM_AUTH_FOCUS_SCALE;
+  const lanyardTextRef = react.useRef(resolveLanyardText(data));
+  lanyardTextRef.current = resolveLanyardText(data);
+  const getAnchor = react.useCallback(() => {
+    if (!containerRef.current) return { x: 0, y: ANCHOR_Y };
+    return { x: containerRef.current.offsetWidth * 0.5, y: ANCHOR_Y };
+  }, []);
+  const drawRope = react.useCallback((colors, lanyardText) => {
+    const canvas = canvasRef.current;
+    if (!canvas || !containerRef.current) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const w = containerRef.current.offsetWidth;
+    const h = containerRef.current.offsetHeight;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = w * dpr;
+    canvas.height = h * dpr;
+    canvas.style.width = `${w}px`;
+    canvas.style.height = `${h}px`;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, w, h);
+    const anchor = getAnchor();
+    const cardTopX = pos.current.x + CARD_W / 2;
+    const cardTopY = pos.current.y - 18;
+    const coil = coilRef.current;
+    const steps = 80;
+    const strapHalf = 15;
+    const useShoelace = coil >= 0.04;
+    const layers = useShoelace ? buildShoelaceLayers(anchor, cardTopX, cardTopY, coil, Math.round(steps / 3)) : null;
+    const pts = layers ? layers[layers.length - 1].pts : buildStrapPoints(anchor, cardTopX, cardTopY, coil, steps);
+    const drawStrapBody = (strapPts, depth) => {
+      const fill = depth === "under" ? "#060606" : "#0a0a0a";
+      const hi = depth === "under" ? 0.05 : 0.08;
+      const lo = depth === "under" ? 0.28 : 0.4;
+      ctx.save();
+      ctx.beginPath();
+      for (let i = 0; i < strapPts.length; i++) {
+        const p = strapPts[i];
+        const nx = -p.ty;
+        const ny = p.tx;
+        if (i === 0) ctx.moveTo(p.x + nx * strapHalf, p.y + ny * strapHalf);
+        else ctx.lineTo(p.x + nx * strapHalf, p.y + ny * strapHalf);
+      }
+      for (let i = strapPts.length - 1; i >= 0; i--) {
+        const p = strapPts[i];
+        const nx = -p.ty;
+        const ny = p.tx;
+        ctx.lineTo(p.x - nx * strapHalf, p.y - ny * strapHalf);
+      }
+      ctx.closePath();
+      ctx.fillStyle = "rgba(0,0,0,0.45)";
+      ctx.filter = "blur(4px)";
+      ctx.fill();
+      ctx.filter = "none";
+      ctx.fillStyle = fill;
+      ctx.fill();
+      const midPt = strapPts[Math.floor(strapPts.length / 2)];
+      const grad = ctx.createLinearGradient(
+        midPt.x - strapHalf,
+        midPt.y,
+        midPt.x + strapHalf,
+        midPt.y
+      );
+      grad.addColorStop(0, `rgba(255,255,255,${hi})`);
+      grad.addColorStop(0.4, "rgba(255,255,255,0)");
+      grad.addColorStop(0.6, "rgba(0,0,0,0)");
+      grad.addColorStop(1, `rgba(0,0,0,${lo})`);
+      ctx.fillStyle = grad;
+      ctx.fill();
+      ctx.restore();
+      ctx.save();
+      const strokeEdge = (sign, color) => {
+        ctx.beginPath();
+        for (let i = 0; i < strapPts.length; i++) {
+          const p = strapPts[i];
+          const nx = -p.ty * sign;
+          const ny = p.tx * sign;
+          const x = p.x + nx * strapHalf;
+          const y = p.y + ny * strapHalf;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+      };
+      strokeEdge(1, depth === "under" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.18)");
+      strokeEdge(-1, depth === "under" ? "rgba(0,0,0,0.75)" : "rgba(0,0,0,0.6)");
+      ctx.restore();
+    };
+    const arcMetrics = (strapPts) => {
+      const cumLen = [0];
+      for (let i = 1; i < strapPts.length; i++) {
+        const dx = strapPts[i].x - strapPts[i - 1].x;
+        const dy = strapPts[i].y - strapPts[i - 1].y;
+        cumLen.push(cumLen[i - 1] + Math.hypot(dx, dy));
+      }
+      const totalLen = cumLen[cumLen.length - 1];
+      const sampleAt = (targetLen) => {
+        const clamped = Math.max(0, Math.min(targetLen, totalLen));
+        let i = 1;
+        while (i < cumLen.length && cumLen[i] < clamped) i++;
+        const i0 = Math.max(0, i - 1);
+        const i1 = Math.min(strapPts.length - 1, i);
+        const segLen = cumLen[i1] - cumLen[i0] || 1;
+        const t = (clamped - cumLen[i0]) / segLen;
+        const a = strapPts[i0];
+        const b = strapPts[i1];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const len = Math.hypot(dx, dy) || 1;
+        return {
+          x: a.x + dx * t,
+          y: a.y + dy * t,
+          tx: dx / len,
+          ty: dy / len
+        };
+      };
+      return { totalLen, sampleAt };
+    };
+    const drawStrapLabels = (strapPts) => {
+      const { totalLen, sampleAt } = arcMetrics(strapPts);
+      ctx.save();
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      for (let d = LABEL_START_OFFSET; d < totalLen - LABEL_END_MARGIN; d += LABEL_SPACING) {
+        const p = sampleAt(d);
+        const angle = Math.atan2(p.ty, p.tx);
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(angle);
+        ctx.fillStyle = "rgba(255,255,255,0.92)";
+        ctx.font = '700 12px "Geist", system-ui, sans-serif';
+        ctx.fillText(lanyardText || DEFAULT_LANYARD_TEXT, 0, 0);
+        ctx.restore();
+      }
+      ctx.restore();
+    };
+    const labelPath = layers ? concatStrapPaths(layers.map((layer) => layer.pts)) : buildTenseStrapPoints(anchor, cardTopX, cardTopY, steps);
+    if (layers) {
+      for (const layer of layers) {
+        drawStrapBody(layer.pts, layer.depth);
+      }
+    } else {
+      drawStrapBody(pts, "over");
+    }
+    drawStrapLabels(labelPath);
+    const clipTopY = cardTopY;
+    const cardRingY = pos.current.y + 16;
+    ctx.save();
+    ctx.translate(cardTopX, clipTopY);
+    ctx.save();
+    ctx.fillStyle = "rgba(0,0,0,0.55)";
+    ctx.filter = "blur(4px)";
+    ctx.beginPath();
+    ctx.roundRect(-10, 0, 20, 26, 4);
+    ctx.fill();
+    ctx.restore();
+    const clipGrad = ctx.createLinearGradient(-10, 0, 10, 0);
+    clipGrad.addColorStop(0, "#0d0d0d");
+    clipGrad.addColorStop(0.5, "#2e2e2e");
+    clipGrad.addColorStop(1, "#070707");
+    ctx.fillStyle = clipGrad;
+    ctx.beginPath();
+    ctx.roundRect(-10, 0, 20, 26, 4);
+    ctx.fill();
+    ctx.fillStyle = "rgba(255,255,255,0.14)";
+    ctx.beginPath();
+    ctx.roundRect(-8, 3, 3, 20, 1.5);
+    ctx.fill();
+    ctx.strokeStyle = "rgba(0,0,0,0.7)";
+    ctx.lineWidth = 0.7;
+    ctx.beginPath();
+    ctx.roundRect(-10, 0, 20, 26, 4);
+    ctx.stroke();
+    ctx.restore();
+    ctx.save();
+    ctx.strokeStyle = "#1a1a1a";
+    ctx.lineWidth = 2.2;
+    ctx.lineCap = "round";
+    ctx.beginPath();
+    ctx.moveTo(cardTopX, clipTopY + 26);
+    ctx.lineTo(cardTopX, cardRingY + 2);
+    ctx.stroke();
+    ctx.strokeStyle = "rgba(255,255,255,0.18)";
+    ctx.lineWidth = 0.8;
+    ctx.beginPath();
+    ctx.moveTo(cardTopX - 0.6, clipTopY + 26);
+    ctx.lineTo(cardTopX - 0.6, cardRingY + 2);
+    ctx.stroke();
+    ctx.restore();
+  }, [getAnchor]);
+  const animate = react.useCallback(() => {
+    if (!hasMounted.current) return;
+    const card = cardRef.current;
+    if (!card) return;
+    if (!dragging.current) {
+      const anchor = getAnchor();
+      const coil = coilRef.current;
+      const drop = effectiveStrapDrop(coil);
+      const restX = anchor.x - CARD_W / 2;
+      const restY = anchor.y + drop;
+      vel.current.x += (restX - pos.current.x) * SPRING_STIFFNESS;
+      vel.current.y += (restY - pos.current.y) * SPRING_STIFFNESS;
+      vel.current.x *= SPRING_DAMPING;
+      vel.current.y *= SPRING_DAMPING;
+      pos.current.x += vel.current.x;
+      pos.current.y += vel.current.y;
+    }
+    tilt.current.rx += (tiltTarget.current.rx - tilt.current.rx) * 0.1;
+    tilt.current.ry += (tiltTarget.current.ry - tilt.current.ry) * 0.1;
+    card.style.transform = `translate(${pos.current.x}px, ${pos.current.y}px) rotateX(${tilt.current.rx}deg) rotateY(${tilt.current.ry}deg)`;
+    drawRope(
+      card.__badgeColors || { accentColor: "#888", ringColor: "#888" },
+      lanyardTextRef.current
+    );
+    rafId.current = requestAnimationFrame(animate);
+  }, [getAnchor, drawRope]);
+  const animateFlip = react.useCallback(() => {
+    const diff = flipTarget.current - flipRef.current;
+    flipRef.current += diff * 0.12;
+    setFlipAngle(flipRef.current);
+    if (Math.abs(diff) > 0.1) {
+      flipRaf.current = requestAnimationFrame(animateFlip);
+    } else {
+      flipRef.current = flipTarget.current;
+      setFlipAngle(flipTarget.current);
+    }
+  }, []);
+  const triggerFlip = react.useCallback(() => {
+    if (!allowFlipOnClick) return;
+    onAuthModeChange?.(isSignup ? "signin" : "signup");
+  }, [allowFlipOnClick, isSignup, onAuthModeChange]);
+  react.useEffect(() => {
+    const target = isSignup ? 180 : 0;
+    if (Math.abs(flipTarget.current - target) < 0.1 && Math.abs(flipRef.current - target) < 0.1) return;
+    flipTarget.current = target;
+    cancelAnimationFrame(flipRaf.current);
+    flipRaf.current = requestAnimationFrame(animateFlip);
+  }, [isSignup, animateFlip]);
+  react.useEffect(() => {
+    coilRef.current = coilFactorFromScale(zoomScale);
+    if (!containerRef.current) return;
+    const drop = effectiveStrapDrop(coilRef.current);
+    pos.current.y = ANCHOR_Y + drop;
+    vel.current = { x: 0, y: 0 };
+  }, [zoomScale]);
+  react.useEffect(() => {
+    if (!containerRef.current) return;
+    const drop = effectiveStrapDrop(coilRef.current);
+    pos.current = { x: containerRef.current.offsetWidth / 2 - CARD_W / 2, y: ANCHOR_Y + drop };
+    hasMounted.current = true;
+    rafId.current = requestAnimationFrame(animate);
+    return () => {
+      cancelAnimationFrame(rafId.current);
+      cancelAnimationFrame(flipRaf.current);
+    };
+  }, [animate]);
+  react.useEffect(() => {
+    if (cardRef.current) {
+      cardRef.current.__badgeColors = data.colors;
+    }
+  }, [data.colors]);
+  const onPointerDown = react.useCallback((e) => {
+    const target = e.target;
+    if (target?.closest("[data-no-drag], [data-auth-interactive], [data-auth-mode-toggle]")) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragging.current = true;
+    didDrag.current = false;
+    if (!containerRef.current) return;
+    const visualScale = containerRef.current.getBoundingClientRect().width / containerRef.current.offsetWidth;
+    const containerScreenLeft = containerRef.current.getBoundingClientRect().left;
+    const containerScreenTop = containerRef.current.getBoundingClientRect().top;
+    const lx = (e.clientX - containerScreenLeft) / visualScale;
+    const ly = (e.clientY - containerScreenTop) / visualScale;
+    dragOffset.current = {
+      x: lx - pos.current.x,
+      y: ly - pos.current.y
+    };
+    document.body.style.cursor = "grabbing";
+  }, []);
+  const onPointerMove = react.useCallback((e) => {
+    if (!containerRef.current) return;
+    const hitTarget = document.elementFromPoint(e.clientX, e.clientY);
+    const overAuth = !!hitTarget?.closest("[data-auth-interactive], [data-auth-mode-toggle]");
+    const bcrect = containerRef.current.getBoundingClientRect();
+    const visualScale = bcrect.width / containerRef.current.offsetWidth;
+    const lx = (e.clientX - bcrect.left) / visualScale;
+    const ly = (e.clientY - bcrect.top) / visualScale;
+    if (dragging.current) {
+      const nx = lx - dragOffset.current.x;
+      const ny = ly - dragOffset.current.y;
+      const dx2 = nx - pos.current.x;
+      const dy2 = ny - pos.current.y;
+      if (Math.abs(dx2) + Math.abs(dy2) > 4) didDrag.current = true;
+      pos.current.x = nx;
+      pos.current.y = ny;
+      vel.current = { x: 0, y: 0 };
+    }
+    if (overAuth) {
+      tiltTarget.current = { rx: 0, ry: 0 };
+      if (!dragging.current) {
+        document.body.style.cursor = hitTarget?.closest("[data-auth-mode-toggle]") ? "pointer" : "default";
+      }
+      return;
+    }
+    if (!dragging.current) document.body.style.cursor = allowFlipOnClick ? "grab" : "default";
+    const cx = pos.current.x + CARD_W / 2;
+    const cy = pos.current.y + CARD_H / 2;
+    const dx = (lx - cx) / (CARD_W / 2);
+    const dy = (ly - cy) / (CARD_H / 2);
+    if (dx * dx + dy * dy < 4) {
+      tiltTarget.current.rx = -dy * 12;
+      tiltTarget.current.ry = dx * 12;
+      setShinePct({
+        x: (lx - pos.current.x) / CARD_W * 100,
+        y: (ly - pos.current.y) / CARD_H * 100
+      });
+    }
+  }, [allowFlipOnClick]);
+  const onPointerCancel = react.useCallback((e) => {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    dragging.current = false;
+    didDrag.current = false;
+    tiltTarget.current = { rx: 0, ry: 0 };
+    document.body.style.cursor = "auto";
+  }, []);
+  const onPointerUp = react.useCallback((e) => {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    const wasDragging = didDrag.current;
+    dragging.current = false;
+    didDrag.current = false;
+    tiltTarget.current = { rx: 0, ry: 0 };
+    document.body.style.cursor = "auto";
+    vel.current = { x: vel.current.x * 1.5, y: vel.current.y * 1.5 };
+    if (!wasDragging && !e.target?.closest("[data-no-drag], [data-auth-interactive], [data-auth-mode-toggle]")) {
+      triggerFlip();
+    }
+  }, [triggerFlip]);
+  const showBackFace = flipAngle >= 90;
+  const frontFaceActive = authMode === "signin" && !showBackFace;
+  const backFaceActive = authMode === "signup" && showBackFace;
+  const showModeToggle = !allowFlipOnClick && (frontFaceActive || backFaceActive);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: ["relative w-full h-full", className].filter(Boolean).join(" "),
+      style: { perspective: "1200px", overflow: "visible", ...style },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "absolute inset-0 pointer-events-none",
+            style: { zIndex: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute pointer-events-none",
+            style: { left: "calc(50% - 2px)", top: ANCHOR_Y - 4, width: 4, height: 8, background: "#555", borderRadius: 2, zIndex: 2 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: cardRef,
+            className: "absolute select-none",
+            style: {
+              width: CARD_W,
+              height: CARD_H,
+              willChange: "transform",
+              transformOrigin: "top center",
+              transformStyle: "preserve-3d",
+              zIndex: 3,
+              cursor: allowFlipOnClick ? "grab" : "default",
+              touchAction: "none"
+            },
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel,
+            onPointerLeave: () => {
+              if (!dragging.current) {
+                tiltTarget.current = { rx: 0, ry: 0 };
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    width: "100%",
+                    height: "100%",
+                    transformStyle: "preserve-3d",
+                    transform: `rotateY(${flipAngle}deg) translateZ(0.01px)`,
+                    boxShadow: "0 40px 100px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.06)",
+                    borderRadius: 16,
+                    transition: "none",
+                    ...CRISP_TEXT
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CardFront,
+                      {
+                        data,
+                        auth,
+                        shinePct,
+                        isFaceActive: frontFaceActive,
+                        reserveToggleSpace: showModeToggle
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CardBack,
+                      {
+                        data,
+                        auth,
+                        shinePct,
+                        isFaceActive: backFaceActive,
+                        reserveToggleSpace: showModeToggle
+                      }
+                    )
+                  ]
+                }
+              ),
+              showModeToggle && onAuthModeChange ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-auth-mode-toggle": true,
+                  "data-no-drag": true,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    zIndex: 200,
+                    pointerEvents: "none",
+                    transform: "translateZ(48px)",
+                    transformStyle: "preserve-3d",
+                    borderRadius: 16
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    AuthModeToggleBar,
+                    {
+                      authMode,
+                      signInTitle: data.signInTitle ?? "SIGN IN",
+                      signUpTitle: data.signUpTitle ?? "SIGN UP",
+                      colors: data.colors,
+                      onChange: onAuthModeChange
+                    }
+                  )
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var LanyardCard_default = LanyardCard;
+var BadgeCard = LanyardCard;
+var labelStyle = {
+  fontFamily: "ui-monospace, monospace",
+  fontSize: 11,
+  letterSpacing: "0.18em",
+  color: "rgba(255,255,255,0.45)",
+  textTransform: "uppercase"
+};
+var inputStyle = {
+  height: 32,
+  fontSize: 12,
+  background: "rgba(255,255,255,0.06)",
+  border: "1px solid rgba(255,255,255,0.1)",
+  color: "#fff",
+  borderRadius: 8,
+  padding: "0 10px",
+  width: "100%"
+};
+function TextField({
+  label,
+  value,
+  onChange,
+  maxLength = 48
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        value,
+        maxLength,
+        onChange: (e) => onChange(e.target.value),
+        style: inputStyle
+      }
+    )
+  ] });
+}
+function ColorField({
+  label,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: { ...labelStyle, minWidth: 96 }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", value, onChange: (e) => onChange(e.target.value), style: { width: 28, height: 28, padding: 2, border: "none", background: "transparent" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { value, maxLength: 7, onChange: (e) => onChange(e.target.value), style: { ...inputStyle, flex: 1 } })
+    ] })
+  ] });
+}
+function LanyardConfigPanel({ data, onChange }) {
+  const set = (key, value) => onChange({ ...data, [key]: value });
+  const setColor = (key, value) => onChange({ ...data, colors: { ...data.colors, [key]: value } });
+  const section = (title, children) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: labelStyle, children: title }),
+    children
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: [
+    section("BADGE MEDIA", /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Logo URL", value: data.logoUrl ?? "", onChange: (v) => set("logoUrl", v), maxLength: 200 }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Hero Image URL", value: data.shipImageUrl ?? "", onChange: (v) => set("shipImageUrl", v), maxLength: 200 }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Lanyard Text", value: data.lanyardText ?? "", onChange: (v) => set("lanyardText", v), maxLength: 20 })
+    ] })),
+    section("TEXT \u2014 FRONT BADGE", /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Name", value: data.name, onChange: (v) => set("name", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Venue", value: data.venue, onChange: (v) => set("venue", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Website", value: data.website, onChange: (v) => set("website", v) })
+    ] })),
+    section("AUTH \u2014 HEADER", /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Event Label", value: data.authHeaderEvent ?? data.eventCode, onChange: (v) => set("authHeaderEvent", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Venue Label", value: data.authHeaderVenue ?? data.venue, onChange: (v) => set("authHeaderVenue", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Sign In Title", value: data.signInTitle ?? "SIGN IN", onChange: (v) => set("signInTitle", v), maxLength: 20 }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Sign Up Title", value: data.signUpTitle ?? "SIGN UP", onChange: (v) => set("signUpTitle", v), maxLength: 20 })
+    ] })),
+    section("AUTH \u2014 SIGN IN STEPS", /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Email Question", value: data.signInEmailQuestion ?? "", onChange: (v) => set("signInEmailQuestion", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Password Question", value: data.signInPasswordQuestion ?? "", onChange: (v) => set("signInPasswordQuestion", v) })
+    ] })),
+    section("AUTH \u2014 SIGN UP STEPS", /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Name Question", value: data.signUpNameQuestion ?? "", onChange: (v) => set("signUpNameQuestion", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Email Question", value: data.signUpEmailQuestion ?? "", onChange: (v) => set("signUpEmailQuestion", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Password Question", value: data.signUpPasswordQuestion ?? "", onChange: (v) => set("signUpPasswordQuestion", v) })
+    ] })),
+    section("COLORS", /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ColorField, { label: "Card BG", value: data.colors.cardBg, onChange: (v) => setColor("cardBg", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorField, { label: "Accent", value: data.colors.accentColor, onChange: (v) => setColor("accentColor", v) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorField, { label: "Name", value: data.colors.nameColor, onChange: (v) => setColor("nameColor", v) })
+    ] }))
+  ] });
+}
+var CAM_Z_DEFAULT = 0;
+var CAM_Z_MIN = -400;
+var VIEWPORT_PAD_TOP = 52;
+var VIEWPORT_PAD_BOTTOM = 88;
+var camZToScale = (z) => (ZOOM_PERSPECTIVE + z) / ZOOM_PERSPECTIVE;
+var camZToPercent = (z) => Math.round(camZToScale(z) * 100);
+var snapCamZ = (z) => {
+  const scale = Math.round(camZToScale(z) * 20) / 20;
+  return scale * ZOOM_PERSPECTIVE - ZOOM_PERSPECTIVE;
+};
+function sceneTranslateForZoom(viewportH, scale) {
+  const coil = coilFactorFromScale(scale);
+  let ty = viewportH / 2 - effectiveCardCenterY(coil) * scale;
+  const cardBottom = ty + effectiveCardBottomY(coil) * scale;
+  if (cardBottom > viewportH - VIEWPORT_PAD_BOTTOM) {
+    ty -= cardBottom - (viewportH - VIEWPORT_PAD_BOTTOM);
+  }
+  const anchorTop = ty + ANCHOR_Y * scale;
+  if (anchorTop < VIEWPORT_PAD_TOP) {
+    ty += VIEWPORT_PAD_TOP - anchorTop;
+  }
+  return ty;
+}
+var panelButtonStyle = {
+  background: "rgba(255,255,255,0.06)",
+  border: "1px solid rgba(255,255,255,0.1)",
+  color: "rgba(255,255,255,0.7)",
+  borderRadius: 8,
+  padding: 8,
+  cursor: "pointer"
+};
+function LanyardScene({
+  data: controlledData,
+  defaultData = DEFAULT_HANKI_BADGE,
+  onDataChange,
+  authMode: controlledAuthMode,
+  onAuthModeChange,
+  auth,
+  showConfigPanel,
+  features,
+  headerLabel = "HANKI",
+  background = "#070707",
+  className,
+  style,
+  children
+}) {
+  const [internalData, setInternalData] = react.useState(() => ({ ...defaultData }));
+  const [internalAuthMode, setInternalAuthMode] = react.useState("signin");
+  const [panelOpen, setPanelOpen] = react.useState(false);
+  const [camZ, setCamZ] = react.useState(CAM_Z_DEFAULT);
+  const [viewportH, setViewportH] = react.useState(900);
+  const data = controlledData ?? internalData;
+  const authMode = controlledAuthMode ?? internalAuthMode;
+  const customizationEnabled = showConfigPanel ?? features?.customization ?? false;
+  const zoomEnabled = features?.zoom !== false;
+  const setData = react.useCallback((next) => {
+    if (controlledData === void 0) setInternalData(next);
+    onDataChange?.(next);
+  }, [controlledData, onDataChange]);
+  const setAuthMode = react.useCallback((mode) => {
+    if (controlledAuthMode === void 0) setInternalAuthMode(mode);
+    onAuthModeChange?.(mode);
+  }, [controlledAuthMode, onAuthModeChange]);
+  const camZRef = react.useRef(CAM_Z_DEFAULT);
+  const sceneRef = react.useRef(null);
+  const rafRef = react.useRef(0);
+  const targetZRef = react.useRef(CAM_Z_DEFAULT);
+  const displayZRef = react.useRef(CAM_Z_DEFAULT);
+  react.useEffect(() => {
+    const sync = () => setViewportH(window.innerHeight);
+    sync();
+    window.addEventListener("resize", sync);
+    return () => window.removeEventListener("resize", sync);
+  }, []);
+  const applyCamera = react.useCallback((next) => {
+    if (!zoomEnabled) return;
+    const clamped = snapCamZ(Math.max(CAM_Z_MIN, Math.min(ZOOM_MAX_Z, next)));
+    cancelAnimationFrame(rafRef.current);
+    camZRef.current = clamped;
+    displayZRef.current = clamped;
+    targetZRef.current = clamped;
+    setCamZ(clamped);
+  }, [zoomEnabled]);
+  const resetCamera = react.useCallback(() => {
+    applyCamera(CAM_Z_DEFAULT);
+  }, [applyCamera]);
+  react.useEffect(() => {
+    if (!zoomEnabled) return;
+    const el = sceneRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      if (e.target?.closest("[data-no-drag]")) return;
+      e.preventDefault();
+      applyCamera(camZRef.current + -e.deltaY * 1.1);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [applyCamera, zoomEnabled]);
+  const sceneScale = zoomEnabled ? camZToScale(camZ) : 1;
+  const isAuthFocused = sceneScale >= ZOOM_AUTH_FOCUS_SCALE;
+  const sceneTranslateY = react.useMemo(
+    () => sceneTranslateForZoom(viewportH, sceneScale),
+    [viewportH, sceneScale]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      ref: sceneRef,
+      className,
+      style: { width: "100%", height: "100vh", overflow: "hidden", position: "relative", background, ...style },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none",
+            style: {
+              backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px)",
+              backgroundSize: "28px 28px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none",
+            style: {
+              background: "radial-gradient(ellipse 70% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.55) 100%)",
+              zIndex: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              transform: `translateY(${sceneTranslateY}px)`,
+              zoom: sceneScale,
+              WebkitFontSmoothing: "antialiased"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              LanyardCard,
+              {
+                data,
+                zoomScale: sceneScale,
+                authMode,
+                onAuthModeChange: setAuthMode,
+                auth
+              }
+            )
+          }
+        ) }),
+        headerLabel ? /* @__PURE__ */ jsxRuntime.jsx("header", { className: "absolute top-0 left-0 right-0 flex items-center justify-between px-4 sm:px-6 z-30 pointer-events-none pt-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "ui-monospace, monospace", fontSize: 12, letterSpacing: "0.2em", color: "rgba(255,255,255,0.25)" }, children: headerLabel }) }) : null,
+        zoomEnabled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-1", "data-no-drag": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => applyCamera(camZRef.current - 90), style: panelButtonStyle, "aria-label": "Zoom out", children: "\u2212" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontFamily: "ui-monospace, monospace", fontSize: 12, color: "rgba(255,255,255,0.45)", minWidth: 36, textAlign: "center" }, children: [
+            camZToPercent(camZ),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => applyCamera(camZRef.current + 90), style: panelButtonStyle, "aria-label": "Zoom in", children: "+" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: resetCamera, style: panelButtonStyle, "aria-label": "Reset camera", children: "\u21BA" })
+        ] }) : null,
+        customizationEnabled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 right-4 sm:bottom-6 sm:right-6 z-50 flex flex-col items-end gap-3", "data-no-drag": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPanelOpen((v) => !v),
+              style: {
+                ...panelButtonStyle,
+                background: panelOpen ? "rgba(255,255,255,0.12)" : panelButtonStyle.background,
+                padding: "8px 16px",
+                fontFamily: "ui-monospace, monospace",
+                fontSize: 12,
+                letterSpacing: "0.18em"
+              },
+              children: panelOpen ? "CLOSE" : "CUSTOMIZE"
+            }
+          ),
+          panelOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                background: "rgba(14,14,14,0.97)",
+                border: "1px solid rgba(255,255,255,0.08)",
+                backdropFilter: "blur(20px)",
+                borderRadius: 16,
+                maxHeight: "calc(100dvh - 120px)",
+                width: "min(320px, calc(100vw - 32px))",
+                overflowY: "auto",
+                padding: 16
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(LanyardConfigPanel, { data, onChange: setData })
+            }
+          ) : null
+        ] }) : null,
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "absolute left-0 right-0 bottom-6 z-20 pointer-events-none flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "ui-monospace, monospace", fontSize: 12, letterSpacing: "0.22em", color: "rgba(255,255,255,0.15)" }, children: isAuthFocused ? "USE CARD TOGGLE TO SWITCH SIGN IN / SIGN UP  \xB7  SCROLL TO ZOOM" : "DRAG  \xB7  CLICK TO FLIP  \xB7  SCROLL TO ZOOM" }) })
+      ]
+    }
+  );
+}
+
+exports.ANCHOR_Y = ANCHOR_Y;
+exports.BadgeCard = BadgeCard;
+exports.CARD_H = CARD_H;
+exports.CARD_W = CARD_W;
+exports.DEFAULT_HANKI_BADGE = DEFAULT_HANKI_BADGE;
+exports.DEFAULT_LANYARD_TEXT = DEFAULT_LANYARD_TEXT;
+exports.LanyardCard = LanyardCard;
+exports.LanyardConfigPanel = LanyardConfigPanel;
+exports.LanyardScene = LanyardScene;
+exports.MAX_ZOOM_SCALE = MAX_ZOOM_SCALE;
+exports.REGISTER_STEPS_DEFAULT = REGISTER_STEPS_DEFAULT;
+exports.SIGNIN_STEPS_DEFAULT = SIGNIN_STEPS_DEFAULT;
+exports.STRAP_LENGTH = STRAP_LENGTH;
+exports.ZOOM_AUTH_FOCUS_SCALE = ZOOM_AUTH_FOCUS_SCALE;
+exports.ZOOM_MAX_Z = ZOOM_MAX_Z;
+exports.ZOOM_PERSPECTIVE = ZOOM_PERSPECTIVE;
+exports.coilFactorFromScale = coilFactorFromScale;
+exports.default = LanyardCard_default;
+exports.effectiveCardBottomY = effectiveCardBottomY;
+exports.effectiveCardCenterY = effectiveCardCenterY;
+exports.effectiveStrapDrop = effectiveStrapDrop;
+exports.emptyValuesForSteps = emptyValuesForSteps;
+exports.flowMeta = flowMeta;
+exports.getRegisterSteps = getRegisterSteps;
+exports.getSignInSteps = getSignInSteps;
+exports.resolveAuthSteps = resolveAuthSteps;
+exports.resolveLanyardText = resolveLanyardText;
+exports.stepCanContinue = stepCanContinue;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map