@slidev-polls/shared 0.0.1

package/src/ui/Chip.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  invalid?: boolean;
+  mono?: boolean;
+}>();
+defineEmits<{ remove: [] }>();
+</script>
+
+<template>
+  <span class="sp-chip" :data-invalid="invalid || undefined" :data-mono="mono || undefined">
+    <slot name="leading" />
+    <span class="sp-chip__label">{{ label }}</span>
+    <button class="sp-chip__remove" :aria-label="`Remove ${label}`" @click="$emit('remove')">
+      ×
+    </button>
+  </span>
+</template>
+
+<style scoped>
+.sp-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 4px 4px 10px;
+  background: var(--sp-bg-muted);
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius-sm);
+  font-size: 12px;
+  font-family: var(--sp-font-sans);
+  color: var(--sp-fg);
+}
+.sp-chip[data-mono] {
+  font-family: var(--sp-font-mono);
+}
+.sp-chip[data-invalid] {
+  background: var(--sp-danger-bg);
+  border-color: var(--sp-danger);
+  color: var(--sp-danger-fg);
+}
+.sp-chip__remove {
+  border: 0;
+  background: transparent;
+  color: var(--sp-fg-faint);
+  font-size: 14px;
+  line-height: 1;
+  padding: 2px 6px;
+  cursor: pointer;
+}
+.sp-chip[data-invalid] .sp-chip__remove {
+  color: var(--sp-danger-fg);
+}
+.sp-chip__remove:focus-visible {
+  outline: 2px solid var(--sp-accent-ring);
+  border-radius: 4px;
+}
+</style>

package/src/ui/IconAlert.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+    <line x1="12" y1="16" x2="12.01" y2="16" />
+  </svg>
+</template>

package/src/ui/IconCheck.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M20 6L9 17l-5-5" />
+  </svg>
+</template>

package/src/ui/IconChevronDown.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+</template>

package/src/ui/IconClose.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+</template>

package/src/ui/IconMoon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+</template>

package/src/ui/IconSun.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="4" />
+    <path
+      d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+    />
+  </svg>
+</template>

package/src/ui/Input.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue?: string;
+  placeholder?: string;
+  type?: string;
+  invalid?: boolean;
+}>();
+defineEmits<{ "update:modelValue": [v: string] }>();
+</script>
+
+<template>
+  <input
+    class="sp-input"
+    :data-invalid="invalid || undefined"
+    :type="type ?? 'text'"
+    :value="modelValue"
+    :placeholder="placeholder"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  />
+</template>
+
+<style scoped>
+.sp-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  font-family: var(--sp-font-sans);
+  font-size: 13px;
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  background: var(--sp-bg);
+  color: var(--sp-fg);
+}
+.sp-input::placeholder {
+  color: var(--sp-fg-faint);
+}
+.sp-input:focus {
+  outline: 2px solid var(--sp-accent-ring);
+  outline-offset: 0;
+  border-color: var(--sp-accent);
+}
+.sp-input[data-invalid] {
+  border-color: var(--sp-danger);
+}
+</style>

package/src/ui/LiveDot.vue

@@ -0,0 +1,31 @@
+<template>
+  <span class="sp-livedot" aria-hidden="true" />
+</template>
+
+<style scoped>
+.sp-livedot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sp-success);
+  box-shadow: 0 0 0 0 var(--sp-success);
+  animation: sp-pulse 2s var(--sp-ease) infinite;
+}
+@keyframes sp-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-success) 60%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sp-livedot {
+    animation: none;
+  }
+}
+</style>

package/src/ui/Pill.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+  tone?: "neutral" | "success" | "danger";
+  withDot?: boolean;
+}>();
+</script>
+
+<template>
+  <span class="sp-pill" :data-tone="tone ?? 'neutral'">
+    <span v-if="withDot" class="sp-pill__dot" />
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.sp-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--sp-font-sans);
+}
+.sp-pill[data-tone="neutral"] {
+  background: var(--sp-bg-subtle);
+  color: var(--sp-fg-muted);
+}
+.sp-pill[data-tone="success"] {
+  background: var(--sp-success-bg);
+  color: var(--sp-success-fg);
+}
+.sp-pill[data-tone="danger"] {
+  background: var(--sp-danger-bg);
+  color: var(--sp-danger-fg);
+}
+.sp-pill__dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.sp-pill[data-tone="success"] .sp-pill__dot {
+  background: var(--sp-success);
+}
+</style>

package/src/ui/ResultsPanel.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import LiveDot from "./LiveDot.vue";
+
+interface OptionLite {
+  id: string;
+  label: string;
+}
+interface TallyLite {
+  optionId: string;
+  count: number;
+}
+interface QuestionLite {
+  prompt: string;
+  options: OptionLite[];
+  tally: TallyLite[];
+}
+
+const props = withDefaults(
+  defineProps<{
+    question: QuestionLite;
+    mode?: "flat" | "scrim-dark" | "scrim-light";
+    showLive?: boolean;
+  }>(),
+  { mode: "flat", showLive: true }
+);
+
+const total = computed(() => props.question.tally.reduce((s, t) => s + t.count, 0));
+
+const leaderId = computed(() => {
+  if (total.value === 0) return null;
+  let best: { id: string; count: number } | null = null;
+  let tied = false;
+  for (const o of props.question.options) {
+    const c = props.question.tally.find((t) => t.optionId === o.id)?.count ?? 0;
+    if (!best || c > best.count) {
+      best = { id: o.id, count: c };
+      tied = false;
+    } else if (c === best.count) {
+      tied = true;
+    }
+  }
+  // No leader on a tie — the bright accent on a single bar would imply that
+  // option is winning when it actually isn't.
+  if (tied) return null;
+  return best?.id ?? null;
+});
+
+function countOf(id: string): number {
+  return props.question.tally.find((t) => t.optionId === id)?.count ?? 0;
+}
+
+function pctOf(id: string): number {
+  if (total.value === 0) return 0;
+  return Math.round((countOf(id) / total.value) * 100);
+}
+</script>
+
+<template>
+  <section class="sp-rp" :data-mode="mode" data-testid="results-panel">
+    <header class="sp-rp__head">
+      <h3 class="sp-rp__prompt">{{ question.prompt }}</h3>
+      <div class="sp-rp__meta">
+        <LiveDot v-if="showLive" />
+        <span>{{ total }} {{ total === 1 ? "vote" : "votes" }}</span>
+      </div>
+    </header>
+    <ol class="sp-rp__rows" :aria-live="showLive ? 'polite' : 'off'">
+      <li
+        v-for="opt in question.options"
+        :key="opt.id"
+        class="sp-rp__row"
+        :data-leader="leaderId === opt.id ? '' : undefined"
+        :data-empty="total === 0 ? '' : undefined"
+        data-testid="rp-row"
+        :data-option-id="opt.id"
+      >
+        <span class="sp-rp__fill" :style="{ width: pctOf(opt.id) + '%' }" />
+        <span class="sp-rp__label">{{ opt.label }}</span>
+        <span class="sp-rp__count" aria-hidden="true">{{ countOf(opt.id) }}</span>
+        <span class="sp-rp__pct">{{ total === 0 ? "—" : pctOf(opt.id) + "%" }}</span>
+      </li>
+    </ol>
+  </section>
+</template>
+
+<style scoped>
+.sp-rp {
+  font-family: var(--sp-font-sans);
+  background: var(--sp-bg);
+  color: var(--sp-fg);
+  border-radius: var(--sp-radius-xl);
+  padding: 24px 28px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.sp-rp[data-mode="scrim-dark"] {
+  background: rgba(10, 10, 10, 0.55);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  color: #fafafa;
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .sp-rp[data-mode="scrim-dark"] {
+    background: rgba(10, 10, 10, 0.78);
+    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
+  }
+}
+.sp-rp[data-mode="scrim-light"] {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  color: #0a0a0a;
+}
+
+.sp-rp__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 14px;
+}
+.sp-rp__prompt {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.sp-rp__meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: inherit;
+  opacity: 0.75;
+}
+
+.sp-rp__rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sp-rp__row {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--sp-radius-lg);
+  background: var(--sp-bg-subtle);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  padding: 12px 16px;
+  font-size: 14px;
+}
+.sp-rp[data-mode="scrim-dark"] .sp-rp__row {
+  background: rgba(255, 255, 255, 0.08);
+}
+.sp-rp[data-mode="scrim-light"] .sp-rp__row {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.sp-rp__row[data-empty] {
+  background: transparent;
+  border: 1px solid var(--sp-border);
+}
+.sp-rp[data-mode="scrim-dark"] .sp-rp__row[data-empty] {
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.sp-rp__fill {
+  position: absolute;
+  inset: 0;
+  width: 0;
+  background: var(--sp-accent-soft);
+  transition: width var(--sp-dur) var(--sp-ease);
+}
+.sp-rp[data-mode="scrim-dark"] .sp-rp__fill {
+  background: rgba(255, 255, 255, 0.18);
+}
+.sp-rp[data-mode="scrim-light"] .sp-rp__fill {
+  background: rgba(0, 0, 0, 0.12);
+}
+
+.sp-rp__row[data-leader] .sp-rp__fill {
+  background: var(--sp-accent);
+}
+.sp-rp__row[data-leader] {
+  color: var(--sp-accent-fg);
+}
+.sp-rp[data-mode="scrim-dark"] .sp-rp__row[data-leader] {
+  color: #fff;
+}
+.sp-rp[data-mode="scrim-light"] .sp-rp__row[data-leader] {
+  color: #fff;
+}
+.sp-rp__row[data-leader] .sp-rp__label,
+.sp-rp__row[data-leader] .sp-rp__pct {
+  font-weight: 600;
+}
+
+.sp-rp__label,
+.sp-rp__pct,
+.sp-rp__count {
+  position: relative;
+}
+.sp-rp__pct {
+  font-variant-numeric: tabular-nums;
+}
+.sp-rp__count {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>

package/src/ui/Textarea.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue?: string;
+  placeholder?: string;
+  maxlength?: number;
+}>();
+defineEmits<{ "update:modelValue": [v: string] }>();
+</script>
+
+<template>
+  <div class="sp-textarea-wrap">
+    <textarea
+      class="sp-textarea"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    />
+    <div v-if="maxlength" class="sp-textarea-count">
+      {{ (modelValue ?? "").length }} / {{ maxlength }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sp-textarea-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sp-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--sp-font-sans);
+  font-size: 14px;
+  padding: 12px 14px;
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  background: var(--sp-bg);
+  color: var(--sp-fg);
+  line-height: 1.5;
+  resize: none;
+  min-height: 120px;
+}
+.sp-textarea:focus {
+  outline: 2px solid var(--sp-accent-ring);
+  border-color: var(--sp-accent);
+}
+.sp-textarea-count {
+  font-size: 11px;
+  color: var(--sp-fg-faint);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+</style>

package/src/ui/ThemeToggle.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useTheme } from "./useTheme";
+import IconSun from "./IconSun.vue";
+import IconMoon from "./IconMoon.vue";
+
+const t = useTheme();
+const ariaLabel = computed(() =>
+  t.mode.value === "dark" ? "Switch to light mode" : "Switch to dark mode"
+);
+</script>
+
+<template>
+  <button class="sp-themetoggle" :aria-label="ariaLabel" @click="t.toggle">
+    <IconMoon v-if="t.mode.value === 'light'" />
+    <IconSun v-else />
+  </button>
+</template>
+
+<style scoped>
+.sp-themetoggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  cursor: pointer;
+  color: var(--sp-fg-muted);
+}
+.sp-themetoggle:hover {
+  background: var(--sp-bg-muted);
+  color: var(--sp-fg);
+}
+.sp-themetoggle:focus-visible {
+  outline: 2px solid var(--sp-accent-ring);
+  outline-offset: 2px;
+}
+</style>

package/src/ui/index.ts

@@ -0,0 +1,17 @@
+export { default as Button } from "./Button.vue";
+export { default as Input } from "./Input.vue";
+export { default as Textarea } from "./Textarea.vue";
+export { default as Pill } from "./Pill.vue";
+export { default as Chip } from "./Chip.vue";
+export { default as LiveDot } from "./LiveDot.vue";
+export { default as ThemeToggle } from "./ThemeToggle.vue";
+export { default as ResultsPanel } from "./ResultsPanel.vue";
+export { default as AllowedOriginsField } from "./AllowedOriginsField.vue";
+export { default as IconCheck } from "./IconCheck.vue";
+export { default as IconAlert } from "./IconAlert.vue";
+export { default as IconSun } from "./IconSun.vue";
+export { default as IconMoon } from "./IconMoon.vue";
+export { default as IconChevronDown } from "./IconChevronDown.vue";
+export { default as IconClose } from "./IconClose.vue";
+export { useTheme } from "./useTheme";
+export { validateOrigin, type OriginValidation } from "./origin-validator";

package/src/ui/origin-validator.ts

@@ -0,0 +1,28 @@
+export type OriginValidation = { ok: true; normalized: string } | { ok: false; message: string };
+
+export function validateOrigin(input: string): OriginValidation {
+  const v = input.trim();
+  if (v.length === 0) return { ok: false, message: "Origin is empty" };
+  if (v === "*") return { ok: true, normalized: "*" };
+  let url: URL;
+  try {
+    url = new URL(v);
+  } catch {
+    // If the input already has an http/https scheme but still fails to parse,
+    // it's missing a valid host rather than a scheme.
+    if (/^https?:\/\//i.test(v)) {
+      return { ok: false, message: "Origin needs a host" };
+    }
+    return {
+      ok: false,
+      message: "Origin needs a scheme (e.g. https://example.com)"
+    };
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    return { ok: false, message: "Origin scheme must be http or https" };
+  }
+  if (!url.host) {
+    return { ok: false, message: "Origin needs a host" };
+  }
+  return { ok: true, normalized: `${url.protocol}//${url.host}` };
+}