@orvui/vue 0.0.0-stage → 0.1.0

package/dist/prediction-market-C9jhwhq3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prediction-market-C9jhwhq3.js","names":["_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_normalizeClass","_unref","_createCommentVNode","_createElementVNode","_normalizeStyle","_createVNode","_withCtx","_Fragment","_renderList","_createBlock","_createTextVNode","_toDisplayString","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","Tabs","_withCtx","TabsList","_Fragment","_renderList","TabsTrigger","_createTextVNode","_toDisplayString","_createBlock","AnimatedAmountInput","NumberTicker","StatefulButton","_sfc_main","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createVNode","ActionSwapText","_createTextVNode","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_unref","_createElementVNode","_createVNode","_createCommentVNode","_toDisplayString","_normalizeClass","_createTextVNode","_Fragment","_renderList","Tooltip","_withCtx","MarketOddsButton","_normalizeStyle","_sfc_main","useMediaQuery","useReducedMotion","SPRING_PRESS","cn","StatefulButton_default","Tabs_default","TabsTrigger_default","TabsList_default","Tooltip_default","ActionSwapText_default","NumberTicker_default","useControllable","RenderNode","sanitizeAmount","whole","fraction","decimal","char","value","parseAmount","formatCurrency","formatCompactCurrency","formatCents","cents","buildQuote","amount","order","price","outcome","shares","payout","error","minTrade","balance","position","keyedAmountChars","occurrences","occurrence","amountInputSize","count","payoutTickerSize","probability","historyPoints","samples","values","low","high","sample","index","useMarketOrder","props","events","selected","computed","quote","status","ref","reduce","id","useId","actionState","inputSize","payoutSize","timer","shake","patch","max","submit","animate","EASE_OUT","payload","valuation","onBeforeUnmount","_hoisted_1$2","_hoisted_2$2","_hoisted_3$2","AnimatedAmountInput_default","defineComponent","__emit","__props","emit","chars","openBlock","createElementBlock","normalizeClass","unref","createCommentVNode","createElementVNode","normalizeStyle","_cache","$event","createVNode","AnimatePresence","withCtx","Fragment","renderList","createBlock","motion","character","createTextVNode","toDisplayString","_hoisted_1$1","_hoisted_2$1","_hoisted_3$1","_hoisted_4$1","_hoisted_5$1","_hoisted_6$1","_hoisted_7$1","_hoisted_8$1","_hoisted_9$1","_hoisted_10$1","_hoisted_11$1","_hoisted_12$1","_hoisted_13$1","PredictionMarket_default","isNo","mode","ChevronDown","increment","args","Banknote","MarketOddsButton_default","hover","hovered","focused","show","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","PredictionMarketCard_default","saved","titleId","chartId","points","Bookmark"],"sources":["../src/blocks/prediction-market/src/utils.ts","../src/blocks/prediction-market/src/use-market-order.ts","../src/blocks/prediction-market/src/AnimatedAmountInput.vue","../src/blocks/prediction-market/src/AnimatedAmountInput.vue","../src/blocks/prediction-market/src/PredictionMarket.vue","../src/blocks/prediction-market/src/PredictionMarket.vue","../src/blocks/prediction-market/src/MarketOddsButton.vue","../src/blocks/prediction-market/src/MarketOddsButton.vue","../src/blocks/prediction-market/src/PredictionMarketCard.vue","../src/blocks/prediction-market/src/PredictionMarketCard.vue"],"sourcesContent":["import type {\n  PredictionMarketOrderValue,\n  PredictionMarketOutcome,\n  PredictionMarketQuote,\n} from \"./types\";\nexport function sanitizeAmount(value: string) {\n  let whole = \"\",\n    fraction = \"\",\n    decimal = false;\n  for (const char of value) {\n    if (char === \".\" && !decimal) {\n      decimal = true;\n      continue;\n    }\n    if (char < \"0\" || char > \"9\") continue;\n    if (!decimal) whole += char;\n    else if (fraction.length < 2) fraction += char;\n  }\n  return whole + (decimal ? \".\" + fraction : \"\");\n}\nexport const parseAmount = (value: string) => Number(value) || 0;\nexport const formatCurrency = (value: number, maximumFractionDigits = 2) =>\n  new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency: \"USD\",\n    maximumFractionDigits,\n  }).format(value);\nexport const formatCompactCurrency = (value: number) =>\n  formatCurrency(value, value >= 100 || value % 1 === 0 ? 0 : 2);\nexport function formatCents(value: number) {\n  const cents = value * 100;\n  return cents.toFixed(Number.isInteger(cents) ? 0 : 1) + \"¢\";\n}\nexport function buildQuote({\n  order,\n  outcome,\n  balance,\n  position,\n  minTrade,\n}: {\n  order: PredictionMarketOrderValue;\n  outcome: PredictionMarketOutcome;\n  balance: number;\n  position: number;\n  minTrade: number;\n}): PredictionMarketQuote {\n  const amount = parseAmount(order.amount),\n    price = Math.min(0.99, Math.max(0.01, outcome.price));\n  const shares = order.mode === \"buy\" ? amount / price : amount,\n    payout = order.mode === \"buy\" ? shares : amount * price;\n  if (amount <= 0)\n    return {\n      valid: false,\n      amount,\n      price,\n      shares: 0,\n      payout: 0,\n      error: \"Enter an amount\",\n    };\n  const error =\n    order.mode === \"buy\"\n      ? amount < minTrade\n        ? `Minimum ${formatCompactCurrency(minTrade)}`\n        : amount > balance\n          ? \"Insufficient balance\"\n          : undefined\n      : amount > position\n        ? \"Not enough shares\"\n        : undefined;\n  return {\n    valid: error === undefined,\n    amount,\n    price,\n    shares,\n    payout,\n    ...(error ? { error } : {}),\n  };\n}\nexport function keyedAmountChars(value: string) {\n  const occurrences: Record<string, number> = Object.create(null);\n  return Array.from(value, (char) => {\n    const occurrence = occurrences[char] ?? 0;\n    occurrences[char] = occurrence + 1;\n    return { id: `${char}-${occurrence}`, char };\n  });\n}\nexport function amountInputSize(value: string) {\n  const count = Array.from(value).filter(\n    (char) => char >= \"0\" && char <= \"9\",\n  ).length;\n  return count >= 10\n    ? \"text-3xl sm:text-4xl\"\n    : count >= 8\n      ? \"text-4xl sm:text-5xl\"\n      : count >= 6\n        ? \"text-[44px] sm:text-[56px]\"\n        : \"text-5xl sm:text-6xl\";\n}\nexport function payoutTickerSize(value: number) {\n  const count = formatCurrency(value).length;\n  return count >= 16\n    ? \"text-xl sm:text-2xl\"\n    : count >= 13\n      ? \"text-2xl\"\n      : count >= 10\n        ? \"text-3xl\"\n        : \"text-4xl\";\n}\nexport const probability = (value: number) =>\n  Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;\nexport function historyPoints(values: number[]) {\n  const samples = values.filter(Number.isFinite);\n  if (samples.length < 2) return null;\n  let low = Infinity,\n    high = -Infinity;\n  for (const sample of samples) {\n    low = Math.min(low, sample);\n    high = Math.max(high, sample);\n  }\n  return samples\n    .map(\n      (value, index) =>\n        `${2 + (44 * index) / (samples.length - 1)},${18 - 14 * (high === low ? 0.5 : (value - low) / (high - low))}`,\n    )\n    .join(\" \");\n}\n","import { computed, onBeforeUnmount, ref, useId } from \"vue\";\nimport { animate } from \"motion-v\";\nimport { useControllable } from \"../../shared\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { amountInputSize, buildQuote, payoutTickerSize } from \"./utils\";\nimport type {\n  PredictionMarketOrderValue as Order,\n  PredictionMarketOutcome as Outcome,\n  PredictionMarketQuote as Quote,\n} from \"./types\";\nexport function useMarketOrder(\n  props: {\n    modelValue?: Order;\n    defaultValue?: Partial<Order>;\n    outcomes: Outcome[];\n    positions: Record<string, number>;\n    balance: number;\n    minTrade: number;\n    authenticated: boolean;\n  },\n  events: {\n    change: (value: Order) => void;\n    trade: (order: Order, quote: Quote) => void;\n    signIn: () => void;\n  },\n) {\n  const order = useControllable(\n    () => props.modelValue,\n    {\n      mode: \"buy\" as const,\n      outcomeId: props.outcomes[0]?.id ?? \"\",\n      amount: \"\",\n      ...props.defaultValue,\n    },\n    events.change,\n  );\n  const selected = computed(\n    () =>\n      props.outcomes.find((outcome) => outcome.id === order.value.outcomeId) ??\n      props.outcomes[0],\n  );\n  const position = computed(\n    () => props.positions[selected.value?.id ?? \"\"] ?? 0,\n  );\n  const quote = computed(() =>\n    buildQuote({\n      order: order.value,\n      outcome: selected.value ?? { id: \"\", label: \"\", price: 0 },\n      balance: props.balance,\n      position: position.value,\n      minTrade: props.minTrade,\n    }),\n  );\n  const status = ref<\"idle\" | \"placing\" | \"filled\">(\"idle\"),\n    reduce = useReducedMotion(),\n    id = useId(),\n    amount = ref<HTMLElement>();\n  const actionState = computed(() =>\n    status.value === \"placing\"\n      ? \"loading\"\n      : status.value === \"filled\"\n        ? \"success\"\n        : quote.value.valid\n          ? \"idle\"\n          : \"error\",\n  );\n  const inputSize = computed(() => amountInputSize(order.value.amount)),\n    payoutSize = computed(() => payoutTickerSize(quote.value.payout));\n  let timer: ReturnType<typeof setTimeout> | undefined,\n    shake: ReturnType<typeof animate> | undefined;\n  function patch(value: Partial<Order>) {\n    clearTimeout(timer);\n    status.value = \"idle\";\n    order.value = { ...order.value, ...value };\n  }\n  function max() {\n    patch({\n      amount:\n        order.value.mode === \"buy\"\n          ? String(Math.floor(props.balance))\n          : position.value.toFixed(position.value % 1 === 0 ? 0 : 2),\n    });\n  }\n  function submit() {\n    if (!props.authenticated) {\n      events.signIn();\n      return;\n    }\n    if (!quote.value.valid) {\n      if (amount.value && !reduce.value) {\n        shake?.stop();\n        shake = animate(\n          amount.value,\n          { x: [0, -5, 5, -3, 3, -1, 0] },\n          { duration: 0.38, ease: EASE_OUT },\n        );\n      }\n      return;\n    }\n    if (status.value === \"placing\") return;\n    status.value = \"placing\";\n    const payload = { ...order.value },\n      valuation = { ...quote.value };\n    timer = setTimeout(() => {\n      status.value = \"filled\";\n      events.trade(payload, valuation);\n    }, 650);\n  }\n  onBeforeUnmount(() => {\n    clearTimeout(timer);\n    shake?.stop();\n  });\n  return {\n    order,\n    selected,\n    quote,\n    reduce,\n    id,\n    amount,\n    status,\n    actionState,\n    inputSize,\n    payoutSize,\n    patch,\n    max,\n    submit,\n  };\n}\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { keyedAmountChars, sanitizeAmount } from \"./utils\";\nconst props = defineProps<{\n    id: string;\n    value: string;\n    mode: \"buy\" | \"sell\";\n    inputSize: string;\n    disabled: boolean;\n    reduce: boolean;\n  }>(),\n  emit = defineEmits<{ change: [value: string] }>();\nconst chars = computed(() => keyedAmountChars(props.value || \"0\"));\n</script>\n<template>\n  <div class=\"flex min-w-0 items-center justify-center overflow-hidden\">\n    <span\n      v-if=\"mode === 'buy'\"\n      aria-hidden=\"true\"\n      :class=\"\n        cn(\n          'shrink-0 font-semibold leading-none tracking-normal text-muted-foreground/65 tabular-nums transition-[font-size] duration-200',\n          inputSize,\n        )\n      \"\n      >$</span\n    >\n    <div class=\"relative min-w-0 shrink\">\n      <input\n        :id=\"id\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        placeholder=\"0\"\n        inputmode=\"decimal\"\n        :aria-label=\"mode === 'buy' ? 'Amount' : 'Shares'\"\n        autocomplete=\"off\"\n        :class=\"\n          cn(\n            'w-[calc((var(--amount-chars)+1)*0.62em)] min-w-[0.8em] max-w-[260px] bg-transparent text-left font-semibold leading-none tracking-normal text-transparent outline-none tabular-nums caret-foreground transition-[font-size] duration-200 placeholder:text-transparent selection:bg-foreground/10 disabled:cursor-not-allowed',\n            inputSize,\n          )\n        \"\n        :style=\"{ '--amount-chars': String(chars.length) }\"\n        @input=\"\n          emit(\n            'change',\n            sanitizeAmount(($event.target as HTMLInputElement).value),\n          )\n        \"\n      />\n      <div\n        aria-hidden=\"true\"\n        :class=\"\n          cn(\n            'pointer-events-none absolute inset-0 flex min-w-0 items-center justify-start overflow-hidden font-semibold leading-none tracking-normal text-foreground tabular-nums transition-[font-size] duration-200',\n            !value && 'text-muted-foreground/55',\n            inputSize,\n          )\n        \"\n        :style=\"{ '--amount-chars': String(chars.length) }\"\n      >\n        <AnimatePresence :initial=\"false\" mode=\"popLayout\"\n          ><motion.span\n            v-for=\"character in chars\"\n            :key=\"character.id\"\n            :layout=\"reduce ? false : 'position'\"\n            :initial=\"\n              reduce\n                ? { opacity: 0 }\n                : { opacity: 0, y: 18, filter: 'blur(10px)' }\n            \"\n            :animate=\"\n              reduce\n                ? { opacity: 1 }\n                : { opacity: 1, y: 0, filter: 'blur(0px)' }\n            \"\n            :exit=\"\n              reduce\n                ? { opacity: 0 }\n                : { opacity: 0, y: -14, filter: 'blur(10px)' }\n            \"\n            :transition=\"{ duration: 0.18, ease: EASE_OUT }\"\n            class=\"inline-block min-w-[0.55em] text-center will-change-[transform,opacity,filter]\"\n            >{{ character.char }}</motion.span\n          ></AnimatePresence\n        >\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { keyedAmountChars, sanitizeAmount } from \"./utils\";\nconst props = defineProps<{\n    id: string;\n    value: string;\n    mode: \"buy\" | \"sell\";\n    inputSize: string;\n    disabled: boolean;\n    reduce: boolean;\n  }>(),\n  emit = defineEmits<{ change: [value: string] }>();\nconst chars = computed(() => keyedAmountChars(props.value || \"0\"));\n</script>\n<template>\n  <div class=\"flex min-w-0 items-center justify-center overflow-hidden\">\n    <span\n      v-if=\"mode === 'buy'\"\n      aria-hidden=\"true\"\n      :class=\"\n        cn(\n          'shrink-0 font-semibold leading-none tracking-normal text-muted-foreground/65 tabular-nums transition-[font-size] duration-200',\n          inputSize,\n        )\n      \"\n      >$</span\n    >\n    <div class=\"relative min-w-0 shrink\">\n      <input\n        :id=\"id\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        placeholder=\"0\"\n        inputmode=\"decimal\"\n        :aria-label=\"mode === 'buy' ? 'Amount' : 'Shares'\"\n        autocomplete=\"off\"\n        :class=\"\n          cn(\n            'w-[calc((var(--amount-chars)+1)*0.62em)] min-w-[0.8em] max-w-[260px] bg-transparent text-left font-semibold leading-none tracking-normal text-transparent outline-none tabular-nums caret-foreground transition-[font-size] duration-200 placeholder:text-transparent selection:bg-foreground/10 disabled:cursor-not-allowed',\n            inputSize,\n          )\n        \"\n        :style=\"{ '--amount-chars': String(chars.length) }\"\n        @input=\"\n          emit(\n            'change',\n            sanitizeAmount(($event.target as HTMLInputElement).value),\n          )\n        \"\n      />\n      <div\n        aria-hidden=\"true\"\n        :class=\"\n          cn(\n            'pointer-events-none absolute inset-0 flex min-w-0 items-center justify-start overflow-hidden font-semibold leading-none tracking-normal text-foreground tabular-nums transition-[font-size] duration-200',\n            !value && 'text-muted-foreground/55',\n            inputSize,\n          )\n        \"\n        :style=\"{ '--amount-chars': String(chars.length) }\"\n      >\n        <AnimatePresence :initial=\"false\" mode=\"popLayout\"\n          ><motion.span\n            v-for=\"character in chars\"\n            :key=\"character.id\"\n            :layout=\"reduce ? false : 'position'\"\n            :initial=\"\n              reduce\n                ? { opacity: 0 }\n                : { opacity: 0, y: 18, filter: 'blur(10px)' }\n            \"\n            :animate=\"\n              reduce\n                ? { opacity: 1 }\n                : { opacity: 1, y: 0, filter: 'blur(0px)' }\n            \"\n            :exit=\"\n              reduce\n                ? { opacity: 0 }\n                : { opacity: 0, y: -14, filter: 'blur(10px)' }\n            \"\n            :transition=\"{ duration: 0.18, ease: EASE_OUT }\"\n            class=\"inline-block min-w-[0.55em] text-center will-change-[transform,opacity,filter]\"\n            >{{ character.char }}</motion.span\n          ></AnimatePresence\n        >\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Banknote, ChevronDown } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { StatefulButton } from \"../../../motion/button\";\nimport { NumberTicker } from \"../../../motion/number\";\nimport { Tabs, TabsList, TabsTrigger } from \"../../../motion/tabs\";\nimport {\n  formatCents,\n  formatCompactCurrency,\n  formatCurrency,\n  parseAmount,\n} from \"./utils\";\nimport { useMarketOrder } from \"./use-market-order\";\nimport type { PredictionMarketClassNames } from \"./source-types\";\nimport type {\n  PredictionMarketMode,\n  PredictionMarketOrderValue,\n  PredictionMarketOutcome,\n  PredictionMarketQuote,\n} from \"./types\";\nimport AnimatedAmountInput from \"./AnimatedAmountInput.vue\";\nexport type {\n  PredictionMarketMode,\n  PredictionMarketOrderValue,\n  PredictionMarketOutcome,\n  PredictionMarketQuote,\n} from \"./types\";\nconst props = withDefaults(\n  defineProps<{\n    outcomes?: PredictionMarketOutcome[];\n    modelValue?: PredictionMarketOrderValue;\n    defaultValue?: Partial<PredictionMarketOrderValue>;\n    authenticated?: boolean;\n    orderTypeLabel?: string;\n    balance?: number;\n    positions?: Record<string, number>;\n    quickAmounts?: number[];\n    minTrade?: number;\n    classNames?: PredictionMarketClassNames;\n  }>(),\n  {\n    outcomes: () => [\n      { id: \"up\", label: \"Up\", price: 0.09 },\n      { id: \"down\", label: \"Down\", price: 0.91 },\n    ],\n    authenticated: true,\n    orderTypeLabel: \"Market\",\n    balance: 500,\n    positions: () => ({ up: 24, down: 16 }),\n    quickAmounts: () => [10, 50, 100, 500],\n    minTrade: 1,\n  },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: PredictionMarketOrderValue];\n  valueChange: [value: PredictionMarketOrderValue];\n  trade: [order: PredictionMarketOrderValue, quote: PredictionMarketQuote];\n  signIn: [];\n}>();\nconst {\n  order,\n  selected,\n  quote,\n  reduce,\n  id,\n  amount,\n  status,\n  actionState,\n  inputSize,\n  payoutSize,\n  patch,\n  max,\n  submit,\n} = useMarketOrder(props, {\n  change(value) {\n    emit(\"update:modelValue\", value);\n    emit(\"valueChange\", value);\n  },\n  trade(order, quote) {\n    emit(\"trade\", order, quote);\n  },\n  signIn() {\n    emit(\"signIn\");\n  },\n});\nconst isNo = (outcome: PredictionMarketOutcome) =>\n  [\"no\", \"down\"].includes(outcome.label.toLowerCase());\n</script>\n<template>\n  <div\n    :class=\"\n      cn(\n        'w-full max-w-[400px] overflow-hidden rounded-3xl border border-border bg-background',\n        classNames?.root,\n      )\n    \"\n  >\n    <div :class=\"cn('border-b border-border/80 px-4 pt-4', classNames?.header)\">\n      <div class=\"flex items-end justify-between gap-4\">\n        <Tabs\n          :model-value=\"order.mode\"\n          variant=\"underline\"\n          :class=\"cn('shrink-0', classNames?.tabs)\"\n          @update:model-value=\"\n            patch({ mode: $event as PredictionMarketMode, amount: '' })\n          \"\n          ><TabsList class=\"gap-5 border-b-0 bg-transparent p-0\"\n            ><TabsTrigger\n              v-for=\"mode in ['buy', 'sell'] as const\"\n              :key=\"mode\"\n              :value=\"mode\"\n              class=\"px-0 pb-3 pt-0 text-2xl font-semibold\"\n              indicator-class-name=\"h-0.5 bg-foreground\"\n              >{{ mode === \"buy\" ? \"Buy\" : \"Sell\" }}</TabsTrigger\n            ></TabsList\n          ></Tabs\n        ><button\n          type=\"button\"\n          :disabled=\"status === 'placing'\"\n          class=\"mb-3 inline-flex items-center gap-2 text-xl font-semibold text-foreground transition-opacity disabled:opacity-50\"\n        >\n          {{ orderTypeLabel }}<ChevronDown class=\"h-5 w-5\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"space-y-4 p-3\">\n      <Tabs\n        :model-value=\"selected?.id\"\n        variant=\"pill\"\n        :class=\"classNames?.outcomes\"\n        @update:model-value=\"patch({ outcomeId: $event })\"\n        ><TabsList class=\"grid w-full grid-cols-2 gap-2 p-1.5\"\n          ><TabsTrigger\n            v-for=\"outcome in outcomes\"\n            :key=\"outcome.id\"\n            :value=\"outcome.id\"\n            :indicator-class-name=\"\n              isNo(outcome)\n                ? 'bg-red-500/10 dark:bg-red-500/15'\n                : 'bg-emerald-500/20'\n            \"\n            :class=\"\n              cn(\n                'h-14 w-full rounded-[1.35rem] px-0 py-0 text-base font-semibold active:scale-[0.99]',\n                isNo(outcome)\n                  ? outcome.id === selected?.id\n                    ? 'text-red-300 dark:text-red-300'\n                    : 'text-red-300/55 dark:text-red-300/50'\n                  : outcome.id === selected?.id\n                    ? 'text-emerald-400 dark:text-emerald-300'\n                    : 'text-muted-foreground',\n              )\n            \"\n            >{{ outcome.label }} {{ formatCents(outcome.price) }}</TabsTrigger\n          ></TabsList\n        ></Tabs\n      >\n      <div\n        ref=\"amount\"\n        :class=\"cn('rounded-3xl bg-card p-4', classNames?.amount)\"\n      >\n        <div\n          class=\"flex min-h-24 flex-col items-center justify-center gap-5 text-center\"\n        >\n          <label :for=\"id\" class=\"text-xl font-medium text-foreground mr-6\">{{\n            order.mode === \"buy\" ? \"Amount\" : \"Shares\"\n          }}</label>\n          <div class=\"w-full min-w-0\">\n            <AnimatedAmountInput\n              :id=\"id\"\n              :mode=\"order.mode\"\n              :value=\"order.amount\"\n              :disabled=\"status === 'placing'\"\n              :input-size=\"inputSize\"\n              :reduce=\"reduce\"\n              @change=\"patch({ amount: $event })\"\n            />\n          </div>\n        </div>\n        <div\n          :class=\"\n            cn('mt-8 flex flex-wrap justify-center gap-2', classNames?.chips)\n          \"\n        >\n          <button\n            v-for=\"increment in quickAmounts\"\n            :key=\"increment\"\n            type=\"button\"\n            :disabled=\"status === 'placing'\"\n            class=\"h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n            @click=\"\n              patch({ amount: String(parseAmount(order.amount) + increment) })\n            \"\n          >\n            +{{\n              order.mode === \"buy\"\n                ? formatCompactCurrency(increment)\n                : increment\n            }}</button\n          ><button\n            type=\"button\"\n            :disabled=\"status === 'placing'\"\n            class=\"h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n            @click=\"max\"\n          >\n            Max\n          </button>\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"authenticated\"\n      :class=\"cn('border-t border-border/80 px-4 py-4', classNames?.footer)\"\n    >\n      <div class=\"mb-4 flex items-end justify-between gap-3\">\n        <div class=\"min-w-0 shrink\">\n          <div\n            class=\"flex items-center gap-2 text-xl font-semibold text-foreground\"\n          >\n            {{ order.mode === \"buy\" ? \"To win\" : \"To receive\"\n            }}<Banknote class=\"h-5 w-5 text-emerald-500\" />\n          </div>\n          <p class=\"text-sm font-medium text-muted-foreground\">\n            Avg. Price {{ formatCents(quote.price) }}\n          </p>\n        </div>\n        <NumberTicker\n          :value=\"quote.payout * 100\"\n          :start-on-view=\"false\"\n          :duration=\"0.45\"\n          :stagger=\"0\"\n          blur\n          :class=\"\n            cn(\n              'ml-auto min-w-0 shrink-0 justify-end whitespace-nowrap text-right font-semibold leading-none tracking-tight text-emerald-500 tabular-nums transition-[font-size] duration-200',\n              payoutSize,\n            )\n          \"\n          :format=\"(cents) => formatCurrency(cents / 100)\"\n        />\n      </div>\n      <StatefulButton\n        :state=\"actionState\"\n        variant=\"primary\"\n        size=\"lg\"\n        :press-scale=\"0.98\"\n        loading-text=\"Trading\"\n        success-text=\"Trade filled\"\n        :error-text=\"quote.error ?? 'Enter an amount'\"\n        :class=\"\n          cn(\n            'h-12 w-full rounded-2xl text-base font-semibold',\n            classNames?.action,\n          )\n        \"\n        @click=\"submit\"\n        >Trade</StatefulButton\n      >\n    </div>\n    <div v-else class=\"px-4 pb-5\">\n      <StatefulButton\n        state=\"idle\"\n        variant=\"primary\"\n        size=\"lg\"\n        :press-scale=\"0.98\"\n        :class=\"\n          cn(\n            'h-14 w-full rounded-2xl text-base font-semibold',\n            classNames?.action,\n          )\n        \"\n        @click=\"submit\"\n        >Connect</StatefulButton\n      >\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Banknote, ChevronDown } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { StatefulButton } from \"../../../motion/button\";\nimport { NumberTicker } from \"../../../motion/number\";\nimport { Tabs, TabsList, TabsTrigger } from \"../../../motion/tabs\";\nimport {\n  formatCents,\n  formatCompactCurrency,\n  formatCurrency,\n  parseAmount,\n} from \"./utils\";\nimport { useMarketOrder } from \"./use-market-order\";\nimport type { PredictionMarketClassNames } from \"./source-types\";\nimport type {\n  PredictionMarketMode,\n  PredictionMarketOrderValue,\n  PredictionMarketOutcome,\n  PredictionMarketQuote,\n} from \"./types\";\nimport AnimatedAmountInput from \"./AnimatedAmountInput.vue\";\nexport type {\n  PredictionMarketMode,\n  PredictionMarketOrderValue,\n  PredictionMarketOutcome,\n  PredictionMarketQuote,\n} from \"./types\";\nconst props = withDefaults(\n  defineProps<{\n    outcomes?: PredictionMarketOutcome[];\n    modelValue?: PredictionMarketOrderValue;\n    defaultValue?: Partial<PredictionMarketOrderValue>;\n    authenticated?: boolean;\n    orderTypeLabel?: string;\n    balance?: number;\n    positions?: Record<string, number>;\n    quickAmounts?: number[];\n    minTrade?: number;\n    classNames?: PredictionMarketClassNames;\n  }>(),\n  {\n    outcomes: () => [\n      { id: \"up\", label: \"Up\", price: 0.09 },\n      { id: \"down\", label: \"Down\", price: 0.91 },\n    ],\n    authenticated: true,\n    orderTypeLabel: \"Market\",\n    balance: 500,\n    positions: () => ({ up: 24, down: 16 }),\n    quickAmounts: () => [10, 50, 100, 500],\n    minTrade: 1,\n  },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: PredictionMarketOrderValue];\n  valueChange: [value: PredictionMarketOrderValue];\n  trade: [order: PredictionMarketOrderValue, quote: PredictionMarketQuote];\n  signIn: [];\n}>();\nconst {\n  order,\n  selected,\n  quote,\n  reduce,\n  id,\n  amount,\n  status,\n  actionState,\n  inputSize,\n  payoutSize,\n  patch,\n  max,\n  submit,\n} = useMarketOrder(props, {\n  change(value) {\n    emit(\"update:modelValue\", value);\n    emit(\"valueChange\", value);\n  },\n  trade(order, quote) {\n    emit(\"trade\", order, quote);\n  },\n  signIn() {\n    emit(\"signIn\");\n  },\n});\nconst isNo = (outcome: PredictionMarketOutcome) =>\n  [\"no\", \"down\"].includes(outcome.label.toLowerCase());\n</script>\n<template>\n  <div\n    :class=\"\n      cn(\n        'w-full max-w-[400px] overflow-hidden rounded-3xl border border-border bg-background',\n        classNames?.root,\n      )\n    \"\n  >\n    <div :class=\"cn('border-b border-border/80 px-4 pt-4', classNames?.header)\">\n      <div class=\"flex items-end justify-between gap-4\">\n        <Tabs\n          :model-value=\"order.mode\"\n          variant=\"underline\"\n          :class=\"cn('shrink-0', classNames?.tabs)\"\n          @update:model-value=\"\n            patch({ mode: $event as PredictionMarketMode, amount: '' })\n          \"\n          ><TabsList class=\"gap-5 border-b-0 bg-transparent p-0\"\n            ><TabsTrigger\n              v-for=\"mode in ['buy', 'sell'] as const\"\n              :key=\"mode\"\n              :value=\"mode\"\n              class=\"px-0 pb-3 pt-0 text-2xl font-semibold\"\n              indicator-class-name=\"h-0.5 bg-foreground\"\n              >{{ mode === \"buy\" ? \"Buy\" : \"Sell\" }}</TabsTrigger\n            ></TabsList\n          ></Tabs\n        ><button\n          type=\"button\"\n          :disabled=\"status === 'placing'\"\n          class=\"mb-3 inline-flex items-center gap-2 text-xl font-semibold text-foreground transition-opacity disabled:opacity-50\"\n        >\n          {{ orderTypeLabel }}<ChevronDown class=\"h-5 w-5\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"space-y-4 p-3\">\n      <Tabs\n        :model-value=\"selected?.id\"\n        variant=\"pill\"\n        :class=\"classNames?.outcomes\"\n        @update:model-value=\"patch({ outcomeId: $event })\"\n        ><TabsList class=\"grid w-full grid-cols-2 gap-2 p-1.5\"\n          ><TabsTrigger\n            v-for=\"outcome in outcomes\"\n            :key=\"outcome.id\"\n            :value=\"outcome.id\"\n            :indicator-class-name=\"\n              isNo(outcome)\n                ? 'bg-red-500/10 dark:bg-red-500/15'\n                : 'bg-emerald-500/20'\n            \"\n            :class=\"\n              cn(\n                'h-14 w-full rounded-[1.35rem] px-0 py-0 text-base font-semibold active:scale-[0.99]',\n                isNo(outcome)\n                  ? outcome.id === selected?.id\n                    ? 'text-red-300 dark:text-red-300'\n                    : 'text-red-300/55 dark:text-red-300/50'\n                  : outcome.id === selected?.id\n                    ? 'text-emerald-400 dark:text-emerald-300'\n                    : 'text-muted-foreground',\n              )\n            \"\n            >{{ outcome.label }} {{ formatCents(outcome.price) }}</TabsTrigger\n          ></TabsList\n        ></Tabs\n      >\n      <div\n        ref=\"amount\"\n        :class=\"cn('rounded-3xl bg-card p-4', classNames?.amount)\"\n      >\n        <div\n          class=\"flex min-h-24 flex-col items-center justify-center gap-5 text-center\"\n        >\n          <label :for=\"id\" class=\"text-xl font-medium text-foreground mr-6\">{{\n            order.mode === \"buy\" ? \"Amount\" : \"Shares\"\n          }}</label>\n          <div class=\"w-full min-w-0\">\n            <AnimatedAmountInput\n              :id=\"id\"\n              :mode=\"order.mode\"\n              :value=\"order.amount\"\n              :disabled=\"status === 'placing'\"\n              :input-size=\"inputSize\"\n              :reduce=\"reduce\"\n              @change=\"patch({ amount: $event })\"\n            />\n          </div>\n        </div>\n        <div\n          :class=\"\n            cn('mt-8 flex flex-wrap justify-center gap-2', classNames?.chips)\n          \"\n        >\n          <button\n            v-for=\"increment in quickAmounts\"\n            :key=\"increment\"\n            type=\"button\"\n            :disabled=\"status === 'placing'\"\n            class=\"h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n            @click=\"\n              patch({ amount: String(parseAmount(order.amount) + increment) })\n            \"\n          >\n            +{{\n              order.mode === \"buy\"\n                ? formatCompactCurrency(increment)\n                : increment\n            }}</button\n          ><button\n            type=\"button\"\n            :disabled=\"status === 'placing'\"\n            class=\"h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n            @click=\"max\"\n          >\n            Max\n          </button>\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"authenticated\"\n      :class=\"cn('border-t border-border/80 px-4 py-4', classNames?.footer)\"\n    >\n      <div class=\"mb-4 flex items-end justify-between gap-3\">\n        <div class=\"min-w-0 shrink\">\n          <div\n            class=\"flex items-center gap-2 text-xl font-semibold text-foreground\"\n          >\n            {{ order.mode === \"buy\" ? \"To win\" : \"To receive\"\n            }}<Banknote class=\"h-5 w-5 text-emerald-500\" />\n          </div>\n          <p class=\"text-sm font-medium text-muted-foreground\">\n            Avg. Price {{ formatCents(quote.price) }}\n          </p>\n        </div>\n        <NumberTicker\n          :value=\"quote.payout * 100\"\n          :start-on-view=\"false\"\n          :duration=\"0.45\"\n          :stagger=\"0\"\n          blur\n          :class=\"\n            cn(\n              'ml-auto min-w-0 shrink-0 justify-end whitespace-nowrap text-right font-semibold leading-none tracking-tight text-emerald-500 tabular-nums transition-[font-size] duration-200',\n              payoutSize,\n            )\n          \"\n          :format=\"(cents) => formatCurrency(cents / 100)\"\n        />\n      </div>\n      <StatefulButton\n        :state=\"actionState\"\n        variant=\"primary\"\n        size=\"lg\"\n        :press-scale=\"0.98\"\n        loading-text=\"Trading\"\n        success-text=\"Trade filled\"\n        :error-text=\"quote.error ?? 'Enter an amount'\"\n        :class=\"\n          cn(\n            'h-12 w-full rounded-2xl text-base font-semibold',\n            classNames?.action,\n          )\n        \"\n        @click=\"submit\"\n        >Trade</StatefulButton\n      >\n    </div>\n    <div v-else class=\"px-4 pb-5\">\n      <StatefulButton\n        state=\"idle\"\n        variant=\"primary\"\n        size=\"lg\"\n        :press-scale=\"0.98\"\n        :class=\"\n          cn(\n            'h-14 w-full rounded-2xl text-base font-semibold',\n            classNames?.action,\n          )\n        \"\n        @click=\"submit\"\n        >Connect</StatefulButton\n      >\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { ActionSwapText } from \"../../../motion/action-swap\";\nimport { useMediaQuery, useReducedMotion } from \"../../../lib/composables\";\nimport { SPRING_PRESS } from \"../../../lib/ease\";\nimport { probability } from \"./utils\";\nimport type { PredictionMarketCardOutcome } from \"./PredictionMarketCard.vue\";\nconst props = defineProps<{\n    positive: boolean;\n    outcome: PredictionMarketCardOutcome;\n  }>(),\n  reduce = useReducedMotion(),\n  hover = useMediaQuery(\"(hover:hover) and (pointer:fine)\"),\n  hovered = ref(false),\n  focused = ref(false);\nconst show = computed(() => (hover.value && hovered.value) || focused.value),\n  cents = computed(() =>\n    Math.round(probability(props.outcome.probability) * 100),\n  );\n</script>\n<template>\n  <motion.button\n    type=\"button\"\n    :aria-label=\"`Trade ${outcome.label} at ${cents}%`\"\n    :while-press=\"reduce ? undefined : { scale: 0.96 }\"\n    :transition=\"SPRING_PRESS\"\n    :class=\"\n      cn(\n        'relative flex min-h-10 min-w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-background px-3 text-sm font-semibold text-foreground shadow-[0_3px_0] transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n        positive\n          ? 'shadow-emerald-500/20 border-emerald-500/25 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-400'\n          : 'shadow-rose-500/20 border-rose-500/25 bg-rose-500/10 text-rose-700 hover:bg-rose-500/15 dark:text-rose-400',\n      )\n    \"\n    @pointerenter=\"$event.pointerType !== 'touch' && (hovered = true)\"\n    @pointerleave=\"hovered = false\"\n    @focus=\"\n      focused = ($event.currentTarget as HTMLElement).matches(':focus-visible')\n    \"\n    @blur=\"focused = false\"\n    ><ActionSwapText\n      :value=\"show ? 'action' : String(cents)\"\n      animation=\"roll\"\n      >{{ show ? (positive ? \"Yes\" : \"No\") : `${cents}%` }}</ActionSwapText\n    ></motion.button\n  >\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { ActionSwapText } from \"../../../motion/action-swap\";\nimport { useMediaQuery, useReducedMotion } from \"../../../lib/composables\";\nimport { SPRING_PRESS } from \"../../../lib/ease\";\nimport { probability } from \"./utils\";\nimport type { PredictionMarketCardOutcome } from \"./PredictionMarketCard.vue\";\nconst props = defineProps<{\n    positive: boolean;\n    outcome: PredictionMarketCardOutcome;\n  }>(),\n  reduce = useReducedMotion(),\n  hover = useMediaQuery(\"(hover:hover) and (pointer:fine)\"),\n  hovered = ref(false),\n  focused = ref(false);\nconst show = computed(() => (hover.value && hovered.value) || focused.value),\n  cents = computed(() =>\n    Math.round(probability(props.outcome.probability) * 100),\n  );\n</script>\n<template>\n  <motion.button\n    type=\"button\"\n    :aria-label=\"`Trade ${outcome.label} at ${cents}%`\"\n    :while-press=\"reduce ? undefined : { scale: 0.96 }\"\n    :transition=\"SPRING_PRESS\"\n    :class=\"\n      cn(\n        'relative flex min-h-10 min-w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-background px-3 text-sm font-semibold text-foreground shadow-[0_3px_0] transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n        positive\n          ? 'shadow-emerald-500/20 border-emerald-500/25 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-400'\n          : 'shadow-rose-500/20 border-rose-500/25 bg-rose-500/10 text-rose-700 hover:bg-rose-500/15 dark:text-rose-400',\n      )\n    \"\n    @pointerenter=\"$event.pointerType !== 'touch' && (hovered = true)\"\n    @pointerleave=\"hovered = false\"\n    @focus=\"\n      focused = ($event.currentTarget as HTMLElement).matches(':focus-visible')\n    \"\n    @blur=\"focused = false\"\n    ><ActionSwapText\n      :value=\"show ? 'action' : String(cents)\"\n      animation=\"roll\"\n      >{{ show ? (positive ? \"Yes\" : \"No\") : `${cents}%` }}</ActionSwapText\n    ></motion.button\n  >\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { Bookmark } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { Tooltip } from \"../../../motion/tooltip\";\nimport { RenderNode, useControllable, type Content } from \"../../shared\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { historyPoints, probability } from \"./utils\";\nimport MarketOddsButton from \"./MarketOddsButton.vue\";\nexport interface PredictionMarketCardOutcome {\n  id: string;\n  label: string;\n  probability: number;\n  icon?: Content;\n  color?: string;\n}\nexport interface PredictionMarketCardSelection {\n  outcomeId: string;\n  side: \"yes\" | \"no\";\n}\nconst props = withDefaults(\n  defineProps<{\n    title: string;\n    icon?: Content;\n    category?: string;\n    volume: string;\n    volumeHistory?: number[];\n    status?: string;\n    live?: boolean;\n    outcomes: PredictionMarketCardOutcome[];\n    bookmarked?: boolean;\n    defaultBookmarked?: boolean;\n  }>(),\n  {\n    bookmarked: undefined,\n    volumeHistory: () => [],\n    defaultBookmarked: false,\n    live: false,\n  },\n);\nconst emit = defineEmits<{\n  outcomeClick: [selection: PredictionMarketCardSelection];\n  \"update:bookmarked\": [bookmarked: boolean];\n  bookmarkChange: [bookmarked: boolean];\n}>();\nconst saved = useControllable(\n    () => props.bookmarked,\n    props.defaultBookmarked,\n    (value) => {\n      emit(\"update:bookmarked\", value);\n      emit(\"bookmarkChange\", value);\n    },\n  ),\n  reduce = useReducedMotion(),\n  titleId = useId(),\n  chartId = useId(),\n  points = computed(() => historyPoints(props.volumeHistory));\n</script>\n<template>\n  <article\n    :aria-labelledby=\"titleId\"\n    class=\"flex h-full w-full min-w-0 flex-col overflow-hidden rounded-3xl bg-card text-foreground\"\n  >\n    <header class=\"flex shrink-0 items-center gap-3 px-4 py-3\">\n      <div\n        v-if=\"icon\"\n        aria-hidden=\"true\"\n        class=\"flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-background text-foreground\"\n      >\n        <RenderNode :node=\"icon\" />\n      </div>\n      <div class=\"min-w-0 flex-1\">\n        <h3\n          :id=\"titleId\"\n          class=\"break-words font-display text-base font-medium leading-snug tracking-tight\"\n        >\n          {{ title }}\n        </h3>\n        <p\n          class=\"mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground\"\n        >\n          <span\n            v-if=\"status\"\n            :class=\"\n              cn('inline-flex items-center gap-1.5', live && 'text-rose-500')\n            \"\n            ><span\n              v-if=\"live\"\n              aria-hidden=\"true\"\n              class=\"size-1.5 rounded-full bg-current\"\n            />{{ status }}</span\n          ><span v-if=\"status && category\" aria-hidden=\"true\">·</span\n          ><span v-if=\"category\">{{ category }}</span>\n        </p>\n      </div>\n    </header>\n    <div\n      class=\"mx-2 mb-2 flex flex-1 flex-col rounded-3xl bg-background px-4 py-3\"\n    >\n      <div class=\"flex flex-1 flex-col justify-center gap-3\">\n        <div\n          v-for=\"(outcome, index) in outcomes\"\n          :key=\"outcome.id\"\n          class=\"space-y-1\"\n        >\n          <div class=\"flex min-h-10 items-center gap-2\">\n            <span\n              v-if=\"outcome.icon\"\n              aria-hidden=\"true\"\n              class=\"flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted\"\n              ><RenderNode :node=\"outcome.icon\" /></span\n            ><span class=\"min-w-0 flex-1 break-words text-sm font-medium\">{{\n              outcome.label\n            }}</span\n            ><Tooltip\n              content=\"Potential payout per $1 if this outcome wins, including your stake. Before fees; based on the displayed price.\"\n              class=\"w-44 whitespace-normal text-center leading-relaxed\"\n              ><button\n                type=\"button\"\n                :aria-label=\"`Potential payout for ${outcome.label}`\"\n                class=\"shrink-0 rounded-md py-2 text-sm tabular-nums text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring\"\n              >\n                {{\n                  probability(outcome.probability) > 0\n                    ? `${(1 / probability(outcome.probability)).toFixed(1)}×`\n                    : \"—\"\n                }}\n              </button></Tooltip\n            ><MarketOddsButton\n              :positive=\"index % 2 === 0\"\n              :outcome=\"outcome\"\n              @click=\"\n                emit('outcomeClick', { outcomeId: outcome.id, side: 'yes' })\n              \"\n            />\n          </div>\n          <div\n            aria-hidden=\"true\"\n            class=\"h-0.5 w-24 overflow-hidden rounded-full\"\n          >\n            <motion.div\n              :initial=\"false\"\n              :animate=\"{ scaleX: probability(outcome.probability) }\"\n              :transition=\"\n                reduce ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT }\n              \"\n              class=\"h-full origin-left rounded-full bg-emerald-300/70 dark:bg-emerald-400/40\"\n              :style=\"\n                outcome.color ? { backgroundColor: outcome.color } : undefined\n              \"\n            />\n          </div>\n        </div>\n      </div>\n      <footer\n        class=\"mt-2 flex shrink-0 items-center gap-2 text-xs text-muted-foreground\"\n      >\n        <svg\n          v-if=\"points\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 48 22\"\n          class=\"h-5 w-12 shrink-0 text-emerald-500 dark:text-emerald-400\"\n          fill=\"none\"\n        >\n          <defs>\n            <linearGradient :id=\"chartId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop\n                offset=\"0%\"\n                stop-color=\"currentColor\"\n                :stop-opacity=\"0.22\"\n              />\n              <stop offset=\"100%\" stop-color=\"currentColor\" :stop-opacity=\"0\" />\n            </linearGradient>\n          </defs>\n          <polygon\n            :points=\"`2,22 ${points} 46,22`\"\n            :fill=\"`url(#${chartId})`\"\n          />\n          <polyline\n            :points=\"points\"\n            stroke=\"currentColor\"\n            :stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          /></svg\n        ><span class=\"shrink-0\">{{ volume }} vol.</span\n        ><motion.button\n          type=\"button\"\n          :aria-label=\"`Bookmark ${title}`\"\n          :aria-pressed=\"saved\"\n          :while-press=\"reduce ? undefined : { scale: 0.85 }\"\n          :transition=\"SPRING_PRESS\"\n          :class=\"\n            cn(\n              'ml-auto flex size-9 shrink-0 items-center justify-center rounded-xl transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring',\n              saved && 'text-foreground',\n            )\n          \"\n          @click=\"saved = !saved\"\n          ><motion.span\n            :animate=\"{ scale: saved && !reduce ? [1, 1.2, 1] : 1 }\"\n            :transition=\"{ duration: 0.22, ease: EASE_OUT }\"\n            ><Bookmark\n              aria-hidden=\"true\"\n              :class=\"cn('size-4', saved && 'fill-current')\" /></motion.span\n        ></motion.button>\n      </footer>\n    </div>\n  </article>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { Bookmark } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { Tooltip } from \"../../../motion/tooltip\";\nimport { RenderNode, useControllable, type Content } from \"../../shared\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { historyPoints, probability } from \"./utils\";\nimport MarketOddsButton from \"./MarketOddsButton.vue\";\nexport interface PredictionMarketCardOutcome {\n  id: string;\n  label: string;\n  probability: number;\n  icon?: Content;\n  color?: string;\n}\nexport interface PredictionMarketCardSelection {\n  outcomeId: string;\n  side: \"yes\" | \"no\";\n}\nconst props = withDefaults(\n  defineProps<{\n    title: string;\n    icon?: Content;\n    category?: string;\n    volume: string;\n    volumeHistory?: number[];\n    status?: string;\n    live?: boolean;\n    outcomes: PredictionMarketCardOutcome[];\n    bookmarked?: boolean;\n    defaultBookmarked?: boolean;\n  }>(),\n  {\n    bookmarked: undefined,\n    volumeHistory: () => [],\n    defaultBookmarked: false,\n    live: false,\n  },\n);\nconst emit = defineEmits<{\n  outcomeClick: [selection: PredictionMarketCardSelection];\n  \"update:bookmarked\": [bookmarked: boolean];\n  bookmarkChange: [bookmarked: boolean];\n}>();\nconst saved = useControllable(\n    () => props.bookmarked,\n    props.defaultBookmarked,\n    (value) => {\n      emit(\"update:bookmarked\", value);\n      emit(\"bookmarkChange\", value);\n    },\n  ),\n  reduce = useReducedMotion(),\n  titleId = useId(),\n  chartId = useId(),\n  points = computed(() => historyPoints(props.volumeHistory));\n</script>\n<template>\n  <article\n    :aria-labelledby=\"titleId\"\n    class=\"flex h-full w-full min-w-0 flex-col overflow-hidden rounded-3xl bg-card text-foreground\"\n  >\n    <header class=\"flex shrink-0 items-center gap-3 px-4 py-3\">\n      <div\n        v-if=\"icon\"\n        aria-hidden=\"true\"\n        class=\"flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-background text-foreground\"\n      >\n        <RenderNode :node=\"icon\" />\n      </div>\n      <div class=\"min-w-0 flex-1\">\n        <h3\n          :id=\"titleId\"\n          class=\"break-words font-display text-base font-medium leading-snug tracking-tight\"\n        >\n          {{ title }}\n        </h3>\n        <p\n          class=\"mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground\"\n        >\n          <span\n            v-if=\"status\"\n            :class=\"\n              cn('inline-flex items-center gap-1.5', live && 'text-rose-500')\n            \"\n            ><span\n              v-if=\"live\"\n              aria-hidden=\"true\"\n              class=\"size-1.5 rounded-full bg-current\"\n            />{{ status }}</span\n          ><span v-if=\"status && category\" aria-hidden=\"true\">·</span\n          ><span v-if=\"category\">{{ category }}</span>\n        </p>\n      </div>\n    </header>\n    <div\n      class=\"mx-2 mb-2 flex flex-1 flex-col rounded-3xl bg-background px-4 py-3\"\n    >\n      <div class=\"flex flex-1 flex-col justify-center gap-3\">\n        <div\n          v-for=\"(outcome, index) in outcomes\"\n          :key=\"outcome.id\"\n          class=\"space-y-1\"\n        >\n          <div class=\"flex min-h-10 items-center gap-2\">\n            <span\n              v-if=\"outcome.icon\"\n              aria-hidden=\"true\"\n              class=\"flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted\"\n              ><RenderNode :node=\"outcome.icon\" /></span\n            ><span class=\"min-w-0 flex-1 break-words text-sm font-medium\">{{\n              outcome.label\n            }}</span\n            ><Tooltip\n              content=\"Potential payout per $1 if this outcome wins, including your stake. Before fees; based on the displayed price.\"\n              class=\"w-44 whitespace-normal text-center leading-relaxed\"\n              ><button\n                type=\"button\"\n                :aria-label=\"`Potential payout for ${outcome.label}`\"\n                class=\"shrink-0 rounded-md py-2 text-sm tabular-nums text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring\"\n              >\n                {{\n                  probability(outcome.probability) > 0\n                    ? `${(1 / probability(outcome.probability)).toFixed(1)}×`\n                    : \"—\"\n                }}\n              </button></Tooltip\n            ><MarketOddsButton\n              :positive=\"index % 2 === 0\"\n              :outcome=\"outcome\"\n              @click=\"\n                emit('outcomeClick', { outcomeId: outcome.id, side: 'yes' })\n              \"\n            />\n          </div>\n          <div\n            aria-hidden=\"true\"\n            class=\"h-0.5 w-24 overflow-hidden rounded-full\"\n          >\n            <motion.div\n              :initial=\"false\"\n              :animate=\"{ scaleX: probability(outcome.probability) }\"\n              :transition=\"\n                reduce ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT }\n              \"\n              class=\"h-full origin-left rounded-full bg-emerald-300/70 dark:bg-emerald-400/40\"\n              :style=\"\n                outcome.color ? { backgroundColor: outcome.color } : undefined\n              \"\n            />\n          </div>\n        </div>\n      </div>\n      <footer\n        class=\"mt-2 flex shrink-0 items-center gap-2 text-xs text-muted-foreground\"\n      >\n        <svg\n          v-if=\"points\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 48 22\"\n          class=\"h-5 w-12 shrink-0 text-emerald-500 dark:text-emerald-400\"\n          fill=\"none\"\n        >\n          <defs>\n            <linearGradient :id=\"chartId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop\n                offset=\"0%\"\n                stop-color=\"currentColor\"\n                :stop-opacity=\"0.22\"\n              />\n              <stop offset=\"100%\" stop-color=\"currentColor\" :stop-opacity=\"0\" />\n            </linearGradient>\n          </defs>\n          <polygon\n            :points=\"`2,22 ${points} 46,22`\"\n            :fill=\"`url(#${chartId})`\"\n          />\n          <polyline\n            :points=\"points\"\n            stroke=\"currentColor\"\n            :stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          /></svg\n        ><span class=\"shrink-0\">{{ volume }} vol.</span\n        ><motion.button\n          type=\"button\"\n          :aria-label=\"`Bookmark ${title}`\"\n          :aria-pressed=\"saved\"\n          :while-press=\"reduce ? undefined : { scale: 0.85 }\"\n          :transition=\"SPRING_PRESS\"\n          :class=\"\n            cn(\n              'ml-auto flex size-9 shrink-0 items-center justify-center rounded-xl transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring',\n              saved && 'text-foreground',\n            )\n          \"\n          @click=\"saved = !saved\"\n          ><motion.span\n            :animate=\"{ scale: saved && !reduce ? [1, 1.2, 1] : 1 }\"\n            :transition=\"{ duration: 0.22, ease: EASE_OUT }\"\n            ><Bookmark\n              aria-hidden=\"true\"\n              :class=\"cn('size-4', saved && 'fill-current')\" /></motion.span\n        ></motion.button>\n      </footer>\n    </div>\n  </article>\n</template>\n"],"mappings":"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"}

package/dist/preview-rail-C7Rbzlxy.js

@@ -0,0 +1,240 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { n as t } from "./state-DWNDjqAL.js";
+import { o as n, r } from "./ease-rIvCM4O3.js";
+import { t as i } from "./utils-DIrLOK2M.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as w, withCtx as T } from "vue";
+import { AnimatePresence as E, motion as D } from "motion-v";
+// src/motion/preview-rail/src/rail-state.ts
+function O(e, t, n, r) {
+	let i = v(null), a = v(null), s = v(null), c = o(() => t.items.some((e) => e.id === n.value) ? n.value : t.items[0]?.id ?? ""), l = o(() => i.value ?? a.value ?? s.value ?? ""), u = o(() => l.value || (t.highlightActive ? c.value : "")), d = o(() => t.items.findIndex((e) => e.id === u.value)), f;
+	function p(e, t) {
+		f = {
+			id: e.pointerId,
+			kind: e.pointerType,
+			x: e.clientX,
+			y: e.clientY,
+			pinned: a.value === t.id
+		}, s.value = null;
+	}
+	function m(e) {
+		f && Math.hypot(e.clientX - f.x, e.clientY - f.y) > 10 && (f = void 0);
+	}
+	function _() {
+		f = void 0;
+	}
+	function y(e, t) {
+		e.currentTarget.matches(":focus-visible") && (s.value = t.id);
+	}
+	function b(e, t) {
+		let i = f;
+		_(), i && i.kind !== "mouse" && (a.value = t.id, t.href && !i.pinned) ? e.preventDefault() : (n.value = t.id, r("activeChange", t.id), r("itemSelect", t));
+	}
+	function x(e, t) {
+		e.pointerType !== "touch" && (i.value = t.id);
+	}
+	function S(e) {
+		e.pointerType !== "touch" && (i.value = null);
+	}
+	function C(t) {
+		e.value?.contains(t.target) || (a.value = null);
+	}
+	function w(t) {
+		e.value?.contains(t.relatedTarget) || (s.value = null, a.value = null);
+	}
+	function T(e) {
+		return [
+			1,
+			.68,
+			.44
+		][d.value < 0 ? Infinity : Math.abs(e - d.value)] ?? .25;
+	}
+	let E;
+	return g(() => {
+		E = e.value?.ownerDocument ?? document, E.addEventListener("pointerdown", C);
+	}), h(() => {
+		E?.removeEventListener("pointerdown", C), _();
+	}), {
+		selected: c,
+		preview: l,
+		highlighted: u,
+		down: p,
+		move: m,
+		cancel: _,
+		focus: y,
+		select: b,
+		enter: x,
+		leave: S,
+		blur: w,
+		scale: T
+	};
+}
+// src/motion/preview-rail/src/PreviewRail.vue?vue&type=script&setup=true&lang.ts
+var k = ["aria-label"], A = {
+	"data-slot": "preview-rail-card",
+	class: "rounded-2xl border border-border bg-card p-4 shadow-sm"
+}, j = {
+	"data-slot": "preview-rail-title",
+	class: "font-medium text-card-foreground"
+}, M = {
+	key: 0,
+	"data-slot": "preview-rail-description",
+	class: "mt-1 text-sm leading-6 text-muted-foreground"
+}, N = {
+	key: 1,
+	class: "min-h-0 min-w-0 flex-1"
+}, P = /* @__PURE__ */ f({
+	__name: "PreviewRail",
+	props: {
+		items: {},
+		label: { default: "Section navigation" },
+		orientation: { default: "vertical" },
+		activeId: {},
+		defaultActiveId: {},
+		showPreview: {
+			type: Boolean,
+			default: !0
+		},
+		previewSide: { default: "after" },
+		highlightActive: {
+			type: Boolean,
+			default: !1
+		},
+		itemSize: { default: 24 },
+		railClassName: {},
+		previewContainerClassName: {},
+		previewClassName: {}
+	},
+	emits: [
+		"update:activeId",
+		"activeChange",
+		"itemSelect"
+	],
+	setup(f, { emit: h }) {
+		let g = f, P = h, F = v(null), I = O(F, g, t(g, P, "activeId", g.defaultActiveId ?? g.items[0]?.id ?? ""), P), L = e(), R = w(), z = o(() => g.orientation === "horizontal"), B = o(() => {
+			let e = g.items.length ? `repeat(${g.items.length}, ${g.itemSize}px)` : void 0;
+			return z.value ? { gridTemplateColumns: e } : { gridTemplateRows: e };
+		}), V = o(() => z.value ? { width: `${g.itemSize}px` } : { height: `${g.itemSize}px` });
+		return (e, t) => (_(), l("div", {
+			ref_key: "root",
+			ref: F,
+			onFocusout: t[1] ||= (...e) => C(I).blur && C(I).blur(...e),
+			class: p(C(i)("isolate relative flex w-full overflow-visible", z.value ? "min-h-64 flex-col items-center justify-center" : "min-h-80"))
+		}, [
+			u("nav", {
+				"aria-label": f.label,
+				onPointerleave: t[0] ||= (...e) => C(I).leave && C(I).leave(...e),
+				style: m(B.value),
+				class: p(C(i)("relative z-10 grid shrink-0", z.value ? "h-12 w-fit max-w-full self-center justify-center" : "w-12 content-center", f.railClassName))
+			}, [(_(!0), l(a, null, y(f.items, (e, t) => (_(), s(x(e.href ? "a" : "button"), {
+				key: e.id,
+				"data-slot": "preview-rail-item",
+				type: e.href ? void 0 : "button",
+				href: e.href,
+				target: e.target,
+				rel: e.rel ?? (e.target === "_blank" ? "noreferrer noopener" : void 0),
+				"aria-label": e.ariaLabel ?? e.label,
+				"aria-current": C(I).selected.value === e.id ? e.href ? "page" : "location" : void 0,
+				onPointerenter: (t) => C(I).enter(t, e),
+				onPointerdown: (t) => C(I).down(t, e),
+				onPointermove: C(I).move,
+				onPointercancel: C(I).cancel,
+				onKeydown: C(I).cancel,
+				onFocus: (t) => C(I).focus(t, e),
+				onClick: (t) => C(I).select(t, e),
+				style: m(V.value),
+				class: p(C(i)("relative flex text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", z.value ? "h-12 w-6 items-end justify-center" : "h-6 w-12 items-center"))
+			}, {
+				default: T(() => [d(C(D).span, {
+					"data-slot": "preview-rail-tick",
+					"aria-hidden": "true",
+					animate: z.value ? { scaleY: C(I).scale(t) } : { scaleX: C(I).scale(t) },
+					transition: C(L) ? { duration: 0 } : C(n),
+					class: p(C(i)("block bg-current", z.value ? "h-12 w-0.5 origin-bottom" : "h-0.5 w-12 origin-left", C(I).highlighted.value === e.id && "text-foreground"))
+				}, null, 8, [
+					"animate",
+					"transition",
+					"class"
+				])]),
+				_: 2
+			}, 1064, [
+				"type",
+				"href",
+				"target",
+				"rel",
+				"aria-label",
+				"aria-current",
+				"onPointerenter",
+				"onPointerdown",
+				"onPointermove",
+				"onPointercancel",
+				"onKeydown",
+				"onFocus",
+				"onClick",
+				"style",
+				"class"
+			]))), 128))], 46, k),
+			f.showPreview ? (_(), l("div", {
+				key: 0,
+				"aria-hidden": "true",
+				style: m(B.value),
+				class: p(C(i)("pointer-events-none absolute z-50 grid", z.value ? "top-1/2 left-1/2 h-5 w-fit max-w-full -translate-x-1/2 -translate-y-1/2 justify-center" : f.previewSide === "before" ? "inset-y-0 right-16 left-4 content-center" : "inset-y-0 right-4 left-16 content-center", f.previewContainerClassName))
+			}, [(_(!0), l(a, null, y(f.items, (t) => (_(), l("div", {
+				key: t.id,
+				style: m(V.value),
+				class: p(C(i)("relative flex items-center", z.value && "justify-center"))
+			}, [t.id === C(I).preview.value ? (_(), l("div", {
+				key: 0,
+				class: p(C(i)(z.value ? "absolute bottom-12 left-1/2 w-72 -translate-x-1/2" : C(i)("w-full max-w-sm", f.previewSide === "before" && "ml-auto"), f.previewClassName))
+			}, [d(C(D).div, {
+				"layout-id": `preview-rail-card-${C(R)}`,
+				transition: C(L) ? { duration: 0 } : C(n)
+			}, {
+				default: T(() => [d(C(E), {
+					mode: "wait",
+					initial: !1
+				}, {
+					default: T(() => [(_(), s(C(D).div, {
+						key: t.id,
+						initial: C(L) ? { opacity: 0 } : {
+							opacity: 0,
+							y: 4,
+							filter: "blur(6px)"
+						},
+						animate: C(L) ? { opacity: 1 } : {
+							opacity: 1,
+							y: 0,
+							filter: "blur(0px)"
+						},
+						exit: C(L) ? { opacity: 0 } : {
+							opacity: 0,
+							y: -2,
+							filter: "blur(4px)",
+							transition: {
+								duration: .12,
+								ease: C(r)
+							}
+						},
+						transition: {
+							duration: C(L) ? 0 : .18,
+							ease: C(r)
+						}
+					}, {
+						default: T(() => [b(e.$slots, "preview", { item: t }, () => [u("div", A, [u("p", j, S(t.label), 1), t.description ? (_(), l("div", M, S(t.description), 1)) : c("", !0)])])]),
+						_: 2
+					}, 1032, [
+						"initial",
+						"animate",
+						"exit",
+						"transition"
+					]))]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1032, ["layout-id", "transition"])], 2)) : c("", !0)], 6))), 128))], 6)) : c("", !0),
+			e.$slots.default ? (_(), l("div", N, [b(e.$slots, "default")])) : c("", !0)
+		], 34));
+	}
+});
+export { P as t };
+
+//# sourceMappingURL=preview-rail-C7Rbzlxy.js.map

package/dist/preview-rail-C7Rbzlxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-rail-C7Rbzlxy.js","names":["$slots","_openBlock","_createElementBlock","_unref","_normalizeClass","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_withCtx","_createVNode","_renderSlot","_toDisplayString","_createCommentVNode","_sfc_main","useReducedMotion","useMotionState","SPRING_LAYOUT","cn","useRailState","hovered","ref","pinned","focused","selected","computed","props","item","active","preview","highlighted","index","pointer","down","event","move","cancel","focus","select","gesture","emit","enter","leave","outside","root","blur","scale","at","owner","onMounted","onBeforeUnmount","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","PreviewRail_default","defineComponent","__emit","__props","state","reduced","id","useId","horizontal","grid","tracks","dimension","openBlock","createElementBlock","_cache","args","unref","normalizeClass","createElementVNode","normalizeStyle","Fragment","renderList","createBlock","resolveDynamicComponent","$event","withCtx","createVNode","motion","AnimatePresence","EASE_OUT","renderSlot","_ctx","toDisplayString","createCommentVNode"],"sources":["../src/motion/preview-rail/src/rail-state.ts","../src/motion/preview-rail/src/PreviewRail.vue","../src/motion/preview-rail/src/PreviewRail.vue"],"sourcesContent":["import { computed, onBeforeUnmount, onMounted, ref, type Ref } from \"vue\";\nexport interface RailEntry { id: string; label: string; description?: string; href?: string; ariaLabel?: string; target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\"; rel?: string }\nexport function useRailState(root: Ref<HTMLElement | null>, props: { items: RailEntry[]; highlightActive: boolean }, active: Ref<string>, emit: { (event: \"activeChange\", value: string): void; (event: \"itemSelect\", value: RailEntry): void }) {\n  const hovered = ref<string | null>(null);\n  const pinned = ref<string | null>(null);\n  const focused = ref<string | null>(null);\n  const selected = computed(() => props.items.some(item => item.id === active.value) ? active.value : props.items[0]?.id ?? \"\");\n  const preview = computed(() => hovered.value ?? pinned.value ?? focused.value ?? \"\");\n  const highlighted = computed(() => preview.value || (props.highlightActive ? selected.value : \"\"));\n  const index = computed(() => props.items.findIndex(item => item.id === highlighted.value));\n  let pointer: { id: number; kind: string; x: number; y: number; pinned: boolean } | undefined;\n  function down(event: PointerEvent, item: RailEntry) { pointer = { id: event.pointerId, kind: event.pointerType, x: event.clientX, y: event.clientY, pinned: pinned.value === item.id }; focused.value = null; }\n  function move(event: PointerEvent) { if (pointer && Math.hypot(event.clientX - pointer.x, event.clientY - pointer.y) > 10) pointer = undefined; }\n  function cancel() { pointer = undefined; }\n  function focus(event: FocusEvent, item: RailEntry) { if ((event.currentTarget as HTMLElement).matches(\":focus-visible\")) focused.value = item.id; }\n  function select(event: MouseEvent, item: RailEntry) { const gesture = pointer; cancel(); if (gesture && gesture.kind !== \"mouse\") { pinned.value = item.id; if (item.href && !gesture.pinned) { event.preventDefault(); return; } } active.value = item.id; emit(\"activeChange\", item.id); emit(\"itemSelect\", item); }\n  function enter(event: PointerEvent, item: RailEntry) { if (event.pointerType !== \"touch\") hovered.value = item.id; }\n  function leave(event: PointerEvent) { if (event.pointerType !== \"touch\") hovered.value = null; }\n  function outside(event: PointerEvent) { if (!root.value?.contains(event.target as Node)) pinned.value = null; }\n  function blur(event: FocusEvent) { if (!root.value?.contains(event.relatedTarget as Node)) { focused.value = null; pinned.value = null; } }\n  function scale(at: number) { const distance = index.value < 0 ? Infinity : Math.abs(at - index.value); return [1, .68, .44][distance] ?? .25; }\n  let owner: Document | undefined;\n  onMounted(() => { owner = root.value?.ownerDocument ?? document; owner.addEventListener(\"pointerdown\", outside); });\n  onBeforeUnmount(() => { owner?.removeEventListener(\"pointerdown\", outside); cancel(); });\n  return { selected, preview, highlighted, down, move, cancel, focus, select, enter, leave, blur, scale };\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useMotionState } from \"../../state\";\nimport { useRailState, type RailEntry } from \"./rail-state\";\ninterface RailItem extends RailEntry {}\nconst props = withDefaults(defineProps<{ items: RailItem[]; label?: string; orientation?: \"vertical\" | \"horizontal\"; activeId?: string; defaultActiveId?: string; showPreview?: boolean; previewSide?: \"before\" | \"after\"; highlightActive?: boolean; itemSize?: number; railClassName?: string; previewContainerClassName?: string; previewClassName?: string }>(), { label: \"Section navigation\", orientation: \"vertical\", showPreview: true, previewSide: \"after\", highlightActive: false, itemSize: 24 });\nconst emit = defineEmits<{ \"update:activeId\": [id: string]; activeChange: [id: string]; itemSelect: [item: RailItem] }>();\nconst root = ref<HTMLElement | null>(null);\nconst active = useMotionState(props, emit, \"activeId\", props.defaultActiveId ?? props.items[0]?.id ?? \"\");\nconst state = useRailState(root, props, active, emit);\nconst reduced = useReducedMotion();\nconst id = useId();\nconst horizontal = computed(() => props.orientation === \"horizontal\");\nconst grid = computed(() => { const tracks = props.items.length ? `repeat(${props.items.length}, ${props.itemSize}px)` : undefined; return horizontal.value ? { gridTemplateColumns: tracks } : { gridTemplateRows: tracks }; });\nconst dimension = computed(() => horizontal.value ? { width: `${props.itemSize}px` } : { height: `${props.itemSize}px` });\n</script>\n<template>\n  <div ref=\"root\" @focusout=\"state.blur\" :class=\"cn('isolate relative flex w-full overflow-visible', horizontal ? 'min-h-64 flex-col items-center justify-center' : 'min-h-80')\">\n    <nav :aria-label=\"label\" @pointerleave=\"state.leave\" :style=\"grid\" :class=\"cn('relative z-10 grid shrink-0', horizontal ? 'h-12 w-fit max-w-full self-center justify-center' : 'w-12 content-center', railClassName)\">\n      <component :is=\"item.href ? 'a' : 'button'\" v-for=\"(item, index) in items\" :key=\"item.id\" data-slot=\"preview-rail-item\" :type=\"item.href ? undefined : 'button'\" :href=\"item.href\" :target=\"item.target\" :rel=\"item.rel ?? (item.target === '_blank' ? 'noreferrer noopener' : undefined)\" :aria-label=\"item.ariaLabel ?? item.label\" :aria-current=\"state.selected.value === item.id ? item.href ? 'page' : 'location' : undefined\" @pointerenter=\"state.enter($event, item)\" @pointerdown=\"state.down($event, item)\" @pointermove=\"state.move\" @pointercancel=\"state.cancel\" @keydown=\"state.cancel\" @focus=\"state.focus($event, item)\" @click=\"state.select($event, item)\" :style=\"dimension\" :class=\"cn('relative flex text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', horizontal ? 'h-12 w-6 items-end justify-center' : 'h-6 w-12 items-center')\">\n        <motion.span data-slot=\"preview-rail-tick\" aria-hidden=\"true\" :animate=\"horizontal ? { scaleY: state.scale(index) } : { scaleX: state.scale(index) }\" :transition=\"reduced ? { duration: 0 } : SPRING_LAYOUT\" :class=\"cn('block bg-current', horizontal ? 'h-12 w-0.5 origin-bottom' : 'h-0.5 w-12 origin-left', state.highlighted.value === item.id && 'text-foreground')\" />\n      </component>\n    </nav>\n    <div v-if=\"showPreview\" aria-hidden=\"true\" :style=\"grid\" :class=\"cn('pointer-events-none absolute z-50 grid', horizontal ? 'top-1/2 left-1/2 h-5 w-fit max-w-full -translate-x-1/2 -translate-y-1/2 justify-center' : previewSide === 'before' ? 'inset-y-0 right-16 left-4 content-center' : 'inset-y-0 right-4 left-16 content-center', previewContainerClassName)\">\n      <div v-for=\"item in items\" :key=\"item.id\" :style=\"dimension\" :class=\"cn('relative flex items-center', horizontal && 'justify-center')\"><div v-if=\"item.id === state.preview.value\" :class=\"cn(horizontal ? 'absolute bottom-12 left-1/2 w-72 -translate-x-1/2' : cn('w-full max-w-sm', previewSide === 'before' && 'ml-auto'), previewClassName)\">\n        <motion.div :layout-id=\"`preview-rail-card-${id}`\" :transition=\"reduced ? { duration: 0 } : SPRING_LAYOUT\"><AnimatePresence mode=\"wait\" :initial=\"false\"><motion.div :key=\"item.id\" :initial=\"reduced ? { opacity: 0 } : { opacity: 0, y: 4, filter: 'blur(6px)' }\" :animate=\"reduced ? { opacity: 1 } : { opacity: 1, y: 0, filter: 'blur(0px)' }\" :exit=\"reduced ? { opacity: 0 } : { opacity: 0, y: -2, filter: 'blur(4px)', transition: { duration: .12, ease: EASE_OUT } }\" :transition=\"{ duration: reduced ? 0 : .18, ease: EASE_OUT }\"><slot name=\"preview\" :item=\"item\"><div data-slot=\"preview-rail-card\" class=\"rounded-2xl border border-border bg-card p-4 shadow-sm\"><p data-slot=\"preview-rail-title\" class=\"font-medium text-card-foreground\">{{ item.label }}</p><div v-if=\"item.description\" data-slot=\"preview-rail-description\" class=\"mt-1 text-sm leading-6 text-muted-foreground\">{{ item.description }}</div></div></slot></motion.div></AnimatePresence></motion.div>\n      </div></div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"min-h-0 min-w-0 flex-1\"><slot /></div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useMotionState } from \"../../state\";\nimport { useRailState, type RailEntry } from \"./rail-state\";\ninterface RailItem extends RailEntry {}\nconst props = withDefaults(defineProps<{ items: RailItem[]; label?: string; orientation?: \"vertical\" | \"horizontal\"; activeId?: string; defaultActiveId?: string; showPreview?: boolean; previewSide?: \"before\" | \"after\"; highlightActive?: boolean; itemSize?: number; railClassName?: string; previewContainerClassName?: string; previewClassName?: string }>(), { label: \"Section navigation\", orientation: \"vertical\", showPreview: true, previewSide: \"after\", highlightActive: false, itemSize: 24 });\nconst emit = defineEmits<{ \"update:activeId\": [id: string]; activeChange: [id: string]; itemSelect: [item: RailItem] }>();\nconst root = ref<HTMLElement | null>(null);\nconst active = useMotionState(props, emit, \"activeId\", props.defaultActiveId ?? props.items[0]?.id ?? \"\");\nconst state = useRailState(root, props, active, emit);\nconst reduced = useReducedMotion();\nconst id = useId();\nconst horizontal = computed(() => props.orientation === \"horizontal\");\nconst grid = computed(() => { const tracks = props.items.length ? `repeat(${props.items.length}, ${props.itemSize}px)` : undefined; return horizontal.value ? { gridTemplateColumns: tracks } : { gridTemplateRows: tracks }; });\nconst dimension = computed(() => horizontal.value ? { width: `${props.itemSize}px` } : { height: `${props.itemSize}px` });\n</script>\n<template>\n  <div ref=\"root\" @focusout=\"state.blur\" :class=\"cn('isolate relative flex w-full overflow-visible', horizontal ? 'min-h-64 flex-col items-center justify-center' : 'min-h-80')\">\n    <nav :aria-label=\"label\" @pointerleave=\"state.leave\" :style=\"grid\" :class=\"cn('relative z-10 grid shrink-0', horizontal ? 'h-12 w-fit max-w-full self-center justify-center' : 'w-12 content-center', railClassName)\">\n      <component :is=\"item.href ? 'a' : 'button'\" v-for=\"(item, index) in items\" :key=\"item.id\" data-slot=\"preview-rail-item\" :type=\"item.href ? undefined : 'button'\" :href=\"item.href\" :target=\"item.target\" :rel=\"item.rel ?? (item.target === '_blank' ? 'noreferrer noopener' : undefined)\" :aria-label=\"item.ariaLabel ?? item.label\" :aria-current=\"state.selected.value === item.id ? item.href ? 'page' : 'location' : undefined\" @pointerenter=\"state.enter($event, item)\" @pointerdown=\"state.down($event, item)\" @pointermove=\"state.move\" @pointercancel=\"state.cancel\" @keydown=\"state.cancel\" @focus=\"state.focus($event, item)\" @click=\"state.select($event, item)\" :style=\"dimension\" :class=\"cn('relative flex text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', horizontal ? 'h-12 w-6 items-end justify-center' : 'h-6 w-12 items-center')\">\n        <motion.span data-slot=\"preview-rail-tick\" aria-hidden=\"true\" :animate=\"horizontal ? { scaleY: state.scale(index) } : { scaleX: state.scale(index) }\" :transition=\"reduced ? { duration: 0 } : SPRING_LAYOUT\" :class=\"cn('block bg-current', horizontal ? 'h-12 w-0.5 origin-bottom' : 'h-0.5 w-12 origin-left', state.highlighted.value === item.id && 'text-foreground')\" />\n      </component>\n    </nav>\n    <div v-if=\"showPreview\" aria-hidden=\"true\" :style=\"grid\" :class=\"cn('pointer-events-none absolute z-50 grid', horizontal ? 'top-1/2 left-1/2 h-5 w-fit max-w-full -translate-x-1/2 -translate-y-1/2 justify-center' : previewSide === 'before' ? 'inset-y-0 right-16 left-4 content-center' : 'inset-y-0 right-4 left-16 content-center', previewContainerClassName)\">\n      <div v-for=\"item in items\" :key=\"item.id\" :style=\"dimension\" :class=\"cn('relative flex items-center', horizontal && 'justify-center')\"><div v-if=\"item.id === state.preview.value\" :class=\"cn(horizontal ? 'absolute bottom-12 left-1/2 w-72 -translate-x-1/2' : cn('w-full max-w-sm', previewSide === 'before' && 'ml-auto'), previewClassName)\">\n        <motion.div :layout-id=\"`preview-rail-card-${id}`\" :transition=\"reduced ? { duration: 0 } : SPRING_LAYOUT\"><AnimatePresence mode=\"wait\" :initial=\"false\"><motion.div :key=\"item.id\" :initial=\"reduced ? { opacity: 0 } : { opacity: 0, y: 4, filter: 'blur(6px)' }\" :animate=\"reduced ? { opacity: 1 } : { opacity: 1, y: 0, filter: 'blur(0px)' }\" :exit=\"reduced ? { opacity: 0 } : { opacity: 0, y: -2, filter: 'blur(4px)', transition: { duration: .12, ease: EASE_OUT } }\" :transition=\"{ duration: reduced ? 0 : .18, ease: EASE_OUT }\"><slot name=\"preview\" :item=\"item\"><div data-slot=\"preview-rail-card\" class=\"rounded-2xl border border-border bg-card p-4 shadow-sm\"><p data-slot=\"preview-rail-title\" class=\"font-medium text-card-foreground\">{{ item.label }}</p><div v-if=\"item.description\" data-slot=\"preview-rail-description\" class=\"mt-1 text-sm leading-6 text-muted-foreground\">{{ item.description }}</div></div></slot></motion.div></AnimatePresence></motion.div>\n      </div></div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"min-h-0 min-w-0 flex-1\"><slot /></div>\n  </div>\n</template>\n"],"mappings":";;;;;;;AAEA,SAAgBqB,EAAa,GAA+B,GAAyD,GAAqB,GAAuG;CAC/O,IAAMC,IAAUC,EAAmB,IAAI,GACjCC,IAASD,EAAmB,IAAI,GAChCE,IAAUF,EAAmB,IAAI,GACjCG,IAAWC,QAAeC,EAAM,MAAM,MAAK,MAAQC,EAAK,OAAOC,EAAO,KAAK,IAAIA,EAAO,QAAQF,EAAM,MAAM,EAAE,EAAE,MAAM,EAAE,GACtHG,IAAUJ,QAAeL,EAAQ,SAASE,EAAO,SAASC,EAAQ,SAAS,EAAE,GAC7EO,IAAcL,QAAeI,EAAQ,UAAUH,EAAM,kBAAkBF,EAAS,QAAQ,GAAG,GAC3FO,IAAQN,QAAeC,EAAM,MAAM,WAAU,MAAQC,EAAK,OAAOG,EAAY,KAAK,CAAC,GACrFE;CACJ,SAASC,EAAK,GAAqB,GAAiB;EAAoI,AAAlI,IAAU;GAAE,IAAIC,EAAM;GAAW,MAAMA,EAAM;GAAa,GAAGA,EAAM;GAAS,GAAGA,EAAM;GAAS,QAAQZ,EAAO,UAAUK,EAAK;EAAG,GAAG,EAAQ,QAAQ;CAAM;CAC9M,SAASQ,EAAK,GAAqB;EAAE,AAAIH,KAAW,KAAK,MAAME,EAAM,UAAUF,EAAQ,GAAGE,EAAM,UAAUF,EAAQ,CAAC,IAAI,OAAI,IAAU,KAAA;CAAW;CAChJ,SAASI,IAAS;EAAE,IAAU,KAAA;CAAW;CACzC,SAASC,EAAM,GAAmB,GAAiB;EAAE,AAAKH,EAAM,cAA8B,QAAQ,gBAAgB,MAAG,EAAQ,QAAQP,EAAK;CAAI;CAClJ,SAASW,EAAO,GAAmB,GAAiB;EAAE,IAAMC,IAAUP;EAAmB,AAAVI,EAAO,GAAOG,KAAWA,EAAQ,SAAS,YAAW,EAAO,QAAQZ,EAAK,IAAQA,EAAK,QAAQ,CAACY,EAAQ,UAAUL,EAAM,eAAe,KAAe,EAAO,QAAQP,EAAK,IAAIa,EAAK,gBAAgBb,EAAK,EAAE,GAAGa,EAAK,cAAcb,CAAI;CAAG;CACrT,SAASc,EAAM,GAAqB,GAAiB;EAAE,AAAIP,EAAM,gBAAgB,YAAS,EAAQ,QAAQP,EAAK;CAAI;CACnH,SAASe,EAAM,GAAqB;EAAE,AAAIR,EAAM,gBAAgB,YAAS,EAAQ,QAAQ;CAAM;CAC/F,SAASS,EAAQ,GAAqB;EAAE,AAAKC,EAAK,OAAO,SAASV,EAAM,MAAc,MAAG,EAAO,QAAQ;CAAM;CAC9G,SAASW,EAAK,GAAmB;EAAE,AAAKD,EAAK,OAAO,SAASV,EAAM,aAAqB,MAAK,EAAQ,QAAQ,MAAM,EAAO,QAAQ;CAAQ;CAC1I,SAASY,EAAM,GAAY;EAA4E,OAAO;GAAC;GAAG;GAAK;EAAG,CAAC,CAA7Ef,EAAM,QAAQ,IAAI,WAAW,KAAK,IAAIgB,IAAKhB,EAAM,KAAK,MAAqC;CAAK;CAC9I,IAAIiB;CAGJ,OAFAC,QAAgB;EAAiD,AAA/C,IAAQL,EAAK,OAAO,iBAAiB,UAAUI,EAAM,iBAAiB,eAAeL,CAAO;CAAG,CAAC,GAClHO,QAAsB;EAAsD,AAApDF,GAAO,oBAAoB,eAAeL,CAAO,GAAGP,EAAO;CAAG,CAAC,GAChF;EAAE;EAAU;EAAS;EAAa;EAAM;EAAM;EAAQ;EAAO;EAAQ;EAAO;EAAO;EAAM;CAAM;AACxG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EChBA,IAAMV,IAAQiC,GACRnB,IAAOkB,GACPd,IAAOvB,EAAwB,IAAI,GAEnCuC,IAAQzC,EAAayB,GAAMlB,GADlBV,EAAeU,GAAOc,GAAM,YAAYd,EAAM,mBAAmBA,EAAM,MAAM,EAAE,EAAE,MAAM,EAC9D,GAAQc,CAAI,GAC9CqB,IAAU9C,EAAiB,GAC3B+C,IAAKC,EAAM,GACXC,IAAavC,QAAeC,EAAM,gBAAgB,YAAY,GAC9DuC,IAAOxC,QAAe;GAAE,IAAMyC,IAASxC,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,OAAO,IAAIA,EAAM,SAAS,OAAO,KAAA;GAAW,OAAOsC,EAAW,QAAQ,EAAE,qBAAqBE,EAAO,IAAI,EAAE,kBAAkBA,EAAO;EAAG,CAAC,GACzNC,IAAY1C,QAAeuC,EAAW,QAAQ,EAAE,OAAO,GAAGtC,EAAM,SAAS,IAAI,IAAI,EAAE,QAAQ,GAAGA,EAAM,SAAS,IAAI,CAAC;E,kBAGtH3B,EAAA,GAAAC,EAYM,OAAA;GAZG,SAAA;GAAJ,KAAI4C;GAAQ,YAAQ,AAAA0B,EAAA,QAAE,GAAAC,MAAAtE,EAAA2D,CAAA,CAAK,CAAC,QAAN3D,EAAA2D,CAAA,CAAK,CAAC,KAAI,GAAAW,CAAA;GAAG,OAAKrE,EAAED,EAAAiB,CAAA,CAAE,CAAA,iDAAkD8C,EAAA,QAAU,kDAAA,UAAA,CAAA;;GAC3G7D,EAIM,OAAA;IAJA,cAAYwD,EAAA;IAAQ,gBAAY,AAAAW,EAAA,QAAE,GAAAC,MAAAtE,EAAA2D,CAAA,CAAK,CAAC,SAAN3D,EAAA2D,CAAA,CAAK,CAAC,MAAK,GAAAW,CAAA;IAAG,OAAKnE,EAAE6D,EAAA,KAAI;IAAG,OAAK/D,EAAED,EAAAiB,CAAA,CAAE,CAAA,+BAAgC8C,EAAA,QAAU,qDAAA,uBAA+EL,EAAA,aAAa,CAAA;G,KACjN5D,EAAA,EAAA,GAAAC,EAEYK,GAAA,MAAAC,EAFwDqD,EAAA,QAAhB,GAAM,OAA1D5D,EAAA,GAAAQ,EAEYC,EAFImB,EAAK,OAAI,MAAA,QAAA,GAAA;IAAmD,KAAKA,EAAK;IAAI,aAAU;IAAqB,MAAMA,EAAK,OAAO,KAAA,IAAS;IAAc,MAAMA,EAAK;IAAO,QAAQA,EAAK;IAAS,KAAKA,EAAK,QAAQA,EAAK,WAAM,WAAA,wBAAwC,KAAA;IAAa,cAAYA,EAAK,aAAaA,EAAK;IAAQ,gBAAc1B,EAAA2D,CAAA,CAAK,CAAC,SAAS,UAAUjC,EAAK,KAAKA,EAAK,OAAI,SAAA,aAAyB,KAAA;IAAY,iBAAY,MAAE1B,EAAA2D,CAAA,CAAK,CAAC,MAAMoB,GAAQrD,CAAI;IAAI,gBAAW,MAAE1B,EAAA2D,CAAA,CAAK,CAAC,KAAKoB,GAAQrD,CAAI;IAAI,eAAa1B,EAAA2D,CAAA,CAAK,CAAC;IAAO,iBAAe3D,EAAA2D,CAAA,CAAK,CAAC;IAAS,WAAS3D,EAAA2D,CAAA,CAAK,CAAC;IAAS,UAAK,MAAE3D,EAAA2D,CAAA,CAAK,CAAC,MAAMoB,GAAQrD,CAAI;IAAI,UAAK,MAAE1B,EAAA2D,CAAA,CAAK,CAAC,OAAOoB,GAAQrD,CAAI;IAAI,OAAKvB,EAAE+D,EAAA,KAAS;IAAG,OAAKjE,EAAED,EAAAiB,CAAA,CAAE,CAAA,gLAAiL8C,EAAA,QAAU,sCAAA,uBAAA,CAAA;;IACp2B,SAAAvD,QAA8W,CAA9WC,EAA8WT,EAAAkF,CAAA,CAAA,CAAA,MAAA;KAAjW,aAAU;KAAoB,eAAY;KAAQ,SAASnB,EAAA,QAAU,EAAA,QAAa/D,EAAA2D,CAAA,CAAK,CAAC,MAAM7B,CAAK,EAAA,IAAA,EAAA,QAAgB9B,EAAA2D,CAAA,CAAK,CAAC,MAAM7B,CAAK,EAAA;KAAM,YAAY9B,EAAA4D,CAAA,IAAO,EAAA,UAAA,EAAA,IAAqB5D,EAAAgB,CAAA;KAAgB,OAAKf,EAAED,EAAAiB,CAAA,CAAE,CAAA,oBAAqB8C,EAAA,QAAU,6BAAA,0BAA0D/D,EAAA2D,CAAA,CAAK,CAAC,YAAY,UAAUjC,EAAK,MAAE,iBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAG7UgC,EAAA,eAAX5D,EAAA,GAAAC,EAIM,OAAA;;IAJkB,eAAY;IAAQ,OAAKI,EAAE6D,EAAA,KAAI;IAAG,OAAK/D,EAAED,EAAAiB,CAAA,CAAE,CAAA,0CAA2C8C,EAAA,QAAU,2FAA8FL,EAAA,gBAAW,WAAA,6CAAA,4CAAyGA,EAAA,yBAAyB,CAAA;G,KACjW5D,EAAA,EAAA,GAAAC,EAEYK,GAAA,MAAAC,EAFQqD,EAAA,QAAR,OAAZ5D,EAAA,GAAAC,EAEY,OAAA;IAFgB,KAAK2B,EAAK;IAAK,OAAKvB,EAAE+D,EAAA,KAAS;IAAG,OAAKjE,EAAED,EAAAiB,CAAA,CAAE,CAAA,8BAA+B8C,EAAA,SAAU,gBAAA,CAAA;G,IAAkCrC,EAAK,OAAO1B,EAAA2D,CAAA,CAAK,CAAC,QAAQ,SAArC7D,EAAA,GAAAC,EAEjI,OAAA;;IAF8K,OAAKE,EAAED,EAAAiB,CAAA,CAAE,CAAC8C,EAAA,QAAU,sDAAyD/D,EAAAiB,CAAA,CAAE,CAAA,mBAAoByC,EAAA,gBAAW,YAAA,SAAA,GAA6BA,EAAA,gBAAgB,CAAA;G,IAC7UjD,EAA87BT,EAAAkF,CAAA,CAAA,CAAA,KAAA;IAAj7B,aAAS,qBAAuBlF,EAAA6D,CAAA;IAAO,YAAY7D,EAAA4D,CAAA,IAAO,EAAA,UAAA,EAAA,IAAqB5D,EAAAgB,CAAA;;IAAe,SAAAR,QAAs0B,CAAt0BC,EAAs0BT,EAAAmF,CAAA,GAAA;KAArzB,MAAK;KAAQ,SAAS;;KAAO,SAAA3E,QAAswB,EAAtwBV,EAAA,GAAAQ,EAAswBN,EAAAkF,CAAA,CAAA,CAAA,KAAA;MAAzvB,KAAKxD,EAAK;MAAK,SAAS1B,EAAA4D,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA;OAAA,SAAA;OAAA,GAAA;OAAA,QAAA;MAAA;MAAgE,SAAS5D,EAAA4D,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA;OAAA,SAAA;OAAA,GAAA;OAAA,QAAA;MAAA;MAAgE,MAAM5D,EAAA4D,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA;OAAA,SAAA;OAAA,GAAA;OAAA,QAAA;OAAA,YAAA;QAAA,UAAA;QAAA,MAAiG5D,EAAAoF,CAAA;OAAQ;MAAA;MAAO,YAAU;OAAA,UAAcpF,EAAA4D,CAAA,IAAO,IAAA;OAAA,MAAkB5D,EAAAoF,CAAA;MAAQ;;MAAI,SAAA5E,QAAmY,CAAnYE,EAAmY4E,EAAA,QAAA,WAAA,EAAvW,QAAI,SAAmW,CAAjWpF,EAA0V,OAA1ViD,GAA0V,CAAxPjD,EAA+F,KAA/FkD,GAA+FzC,EAAjBe,EAAK,KAAK,GAAA,CAAA,GAAkBA,EAAK,eAAhB5B,EAAA,GAAAC,EAAmJ,OAAnJsD,GAAmJ1C,EAAzBe,EAAK,WAAW,GAAA,CAAA,K;;;;;;;;;;;;GAGr3B7B,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAAwE,OAAxEuD,GAAwE,CAAd5C,EAAQ4E,EAAA,QAAA,SAAA,C"}