@ekrist1/vulse 0.1.6-alpha.3

package/src/client/components/ForgotPasswordForm.astro

@@ -0,0 +1,71 @@
+---
+interface Props { redirectTo?: string; class?: string }
+const { redirectTo = '/reset-password', class: cls } = Astro.props
+---
+<form data-vulse-forgot-password data-redirect={redirectTo} class={cls} novalidate>
+  <p data-vulse-auth-error class="vulse-auth-error" hidden role="alert"></p>
+  <p data-vulse-auth-success class="vulse-auth-success" hidden role="status"></p>
+  <slot />
+</form>
+<script>
+  document.querySelectorAll('form[data-vulse-forgot-password]').forEach((form) => {
+    const errorEl = form.querySelector('[data-vulse-auth-error]') as HTMLElement | null
+    const successEl = form.querySelector('[data-vulse-auth-success]') as HTMLElement | null
+    const showError = (message: string) => {
+      if (errorEl) {
+        errorEl.textContent = message
+        errorEl.hidden = false
+      }
+      if (successEl) successEl.hidden = true
+    }
+    const showSuccess = (message: string) => {
+      if (successEl) {
+        successEl.textContent = message
+        successEl.hidden = false
+      }
+      if (errorEl) errorEl.hidden = true
+    }
+    const clearMessages = () => {
+      if (errorEl) {
+        errorEl.textContent = ''
+        errorEl.hidden = true
+      }
+      if (successEl) {
+        successEl.textContent = ''
+        successEl.hidden = true
+      }
+    }
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault()
+      clearMessages()
+      const f = new FormData(form as HTMLFormElement)
+      const email = f.get('email')
+      if (typeof email !== 'string' || !email) {
+        showError('Enter your email address.')
+        return
+      }
+      const redirectTo = (form as HTMLFormElement).dataset.redirect || '/reset-password'
+      const res = await fetch('/api/auth/request-password-reset', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, redirectTo }),
+        credentials: 'same-origin',
+      })
+      const body = await res.json().catch(() => null)
+      const event = new CustomEvent(res.ok ? 'vulse:forgot-password:success' : 'vulse:forgot-password:error', {
+        detail: { status: res.status, body },
+      })
+      form.dispatchEvent(event)
+      if (res.ok) {
+        showSuccess('If an account exists for that email, a reset link has been sent.')
+        return
+      }
+      const msg =
+        body && typeof body === 'object' && 'message' in body && typeof (body as { message: unknown }).message === 'string'
+          ? (body as { message: string }).message
+          : 'Could not send reset email. Try again later.'
+      showError(msg)
+    })
+  })
+</script>

package/src/client/components/FormRenderer.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+  form: string
+  class?: string
+  action?: string
+}
+const { form, class: cls, action = `/api/vulse/forms/${form}/submit` } = Astro.props
+---
+<form data-vulse-form={form} data-action={action} class={cls} novalidate>
+  <slot />
+</form>
+<script>
+  document.querySelectorAll('form[data-vulse-form]').forEach((formEl) => {
+    formEl.addEventListener('submit', async (e) => {
+      e.preventDefault()
+      const form = formEl as HTMLFormElement
+      const fd = new FormData(form)
+      const payload: Record<string, unknown> = {}
+      for (const [k, v] of fd.entries()) {
+        if (payload[k] !== undefined) continue
+        payload[k] = v instanceof File ? v.name : v
+      }
+      for (const el of form.querySelectorAll<HTMLInputElement>('input[type=checkbox]')) {
+        payload[el.name] = el.checked
+      }
+      const action = form.dataset.action ?? form.action
+      const res = await fetch(action, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(payload),
+        credentials: 'same-origin',
+      })
+      const body = await res.json().catch(() => ({})) as { ok?: boolean; data?: { ok?: boolean; redirect?: string; message?: string } }
+      const data = body.data ?? body
+      const eventName = res.ok && data.ok !== false ? 'vulse:form:success' : 'vulse:form:error'
+      form.dispatchEvent(new CustomEvent(eventName, { detail: { status: res.status, data } }))
+      if (res.ok && data.redirect) window.location.href = data.redirect
+    })
+  })
+</script>

package/src/client/components/ResetPasswordForm.astro

@@ -0,0 +1,72 @@
+---
+interface Props { redirectTo?: string; class?: string }
+const { redirectTo = '/sign-in', class: cls } = Astro.props
+---
+<form data-vulse-reset-password data-redirect={redirectTo} class={cls} novalidate>
+  <p data-vulse-auth-error class="vulse-auth-error" hidden role="alert"></p>
+  <slot />
+</form>
+<script>
+  function tokenFromUrl(): string | null {
+    const params = new URLSearchParams(window.location.search)
+    return params.get('token') || params.get('error')
+  }
+
+  document.querySelectorAll('form[data-vulse-reset-password]').forEach((form) => {
+    const errorEl = form.querySelector('[data-vulse-auth-error]') as HTMLElement | null
+    const tokenInput = form.querySelector('[data-vulse-reset-token]') as HTMLInputElement | null
+    const showError = (message: string) => {
+      if (!errorEl) return
+      errorEl.textContent = message
+      errorEl.hidden = false
+    }
+    const clearError = () => {
+      if (!errorEl) return
+      errorEl.textContent = ''
+      errorEl.hidden = true
+    }
+
+    const urlToken = tokenFromUrl()
+    if (urlToken === 'INVALID_TOKEN') {
+      showError('This reset link is invalid or has expired. Request a new one.')
+    } else if (urlToken && tokenInput) {
+      tokenInput.value = urlToken
+    }
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault()
+      clearError()
+      const f = new FormData(form as HTMLFormElement)
+      const token = (f.get('token') as string | null) ?? urlToken
+      const password = f.get('password')
+      if (!token || typeof token !== 'string') {
+        showError('Missing reset token. Use the link from your email.')
+        return
+      }
+      if (typeof password !== 'string' || password.length < 8) {
+        showError('Password must be at least 8 characters.')
+        return
+      }
+      const res = await fetch('/api/auth/reset-password', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ token, newPassword: password }),
+        credentials: 'same-origin',
+      })
+      const body = await res.json().catch(() => null)
+      const event = new CustomEvent(res.ok ? 'vulse:reset-password:success' : 'vulse:reset-password:error', {
+        detail: { status: res.status, body },
+      })
+      form.dispatchEvent(event)
+      if (res.ok) {
+        window.location.href = (form as HTMLFormElement).dataset.redirect || '/sign-in'
+        return
+      }
+      const msg =
+        body && typeof body === 'object' && 'message' in body && typeof (body as { message: unknown }).message === 'string'
+          ? (body as { message: string }).message
+          : 'Could not reset password. The link may have expired.'
+      showError(msg)
+    })
+  })
+</script>

package/src/client/components/SessionGuard.astro

@@ -0,0 +1,27 @@
+---
+import { getRuntimeEnv } from '../../server/env.js'
+import { createDb } from '../../core/db.js'
+import { registryForRequest } from '../../core/blueprints/load.js'
+import { getRuntime } from '../../server/runtime.js'
+
+interface Props { requireRole?: 'member' | 'editor' | 'admin'; redirectTo?: string }
+const { requireRole = 'member', redirectTo = '/sign-in' } = Astro.props
+
+const ROLE_RANK = { member: 1, editor: 2, admin: 3 } as const
+
+try {
+  const env = getRuntimeEnv()
+  const db = createDb(env.DB)
+  const rt = await getRuntime(env, await registryForRequest(db), new URL(Astro.request.url).origin)
+  const session = await rt.auth.api.getSession({ headers: Astro.request.headers })
+  if (!session) return Astro.redirect(redirectTo)
+  const role = (session.user as { role?: keyof typeof ROLE_RANK }).role ?? 'member'
+  if (ROLE_RANK[role] < ROLE_RANK[requireRole]) {
+    return new Response('Forbidden', { status: 403 })
+  }
+  ;(Astro.locals as { vulseSession?: typeof session }).vulseSession = session
+} catch {
+  return Astro.redirect(redirectTo)
+}
+---
+<slot />

package/src/client/components/SignInForm.astro

@@ -0,0 +1,57 @@
+---
+interface Props { redirectTo?: string; class?: string }
+const { redirectTo = '/', class: cls } = Astro.props
+---
+<form data-vulse-sign-in data-redirect={redirectTo} class={cls} novalidate>
+  <p data-vulse-auth-error class="vulse-auth-error" hidden role="alert"></p>
+  <slot />
+</form>
+<script>
+  function authErrorMessage(status: number, body: unknown, kind: 'sign-in' | 'sign-up'): string {
+    const msg =
+      body && typeof body === 'object' && 'message' in body && typeof (body as { message: unknown }).message === 'string'
+        ? (body as { message: string }).message
+        : null
+    if (msg) return msg
+    if (status === 403 || status === 400) {
+      if (kind === 'sign-up') return 'Sign-up is not enabled. Ask an administrator to allow member registration.'
+    }
+    return kind === 'sign-in' ? 'Sign in failed. Check your email and password.' : 'Could not create your account. Please try again.'
+  }
+
+  document.querySelectorAll('form[data-vulse-sign-in]').forEach((form) => {
+    const errorEl = form.querySelector('[data-vulse-auth-error]') as HTMLElement | null
+    const showError = (message: string) => {
+      if (!errorEl) return
+      errorEl.textContent = message
+      errorEl.hidden = false
+    }
+    const clearError = () => {
+      if (!errorEl) return
+      errorEl.textContent = ''
+      errorEl.hidden = true
+    }
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault()
+      clearError()
+      const f = new FormData(form as HTMLFormElement)
+      const res = await fetch('/api/auth/sign-in/email', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email: f.get('email'), password: f.get('password') }),
+        credentials: 'same-origin',
+      })
+      const body = await res.json().catch(() => null)
+      const event = new CustomEvent(res.ok ? 'vulse:sign-in:success' : 'vulse:sign-in:error', {
+        detail: { status: res.status, body },
+      })
+      form.dispatchEvent(event)
+      if (res.ok) {
+        window.location.href = (form as HTMLFormElement).dataset.redirect || '/'
+        return
+      }
+      showError(authErrorMessage(res.status, body, 'sign-in'))
+    })
+  })
+</script>

package/src/client/components/SignOutButton.astro

@@ -0,0 +1,22 @@
+---
+interface Props { redirectTo?: string; class?: string }
+const { redirectTo = '/', class: cls } = Astro.props
+---
+<button type="button" data-vulse-sign-out data-redirect={redirectTo} class={cls}>
+  <slot />
+</button>
+<script>
+  document.querySelectorAll('[data-vulse-sign-out]').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const res = await fetch('/api/auth/sign-out', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: { 'content-type': 'application/json' },
+        body: '{}',
+      })
+      const event = new CustomEvent(res.ok ? 'vulse:sign-out:success' : 'vulse:sign-out:error', { detail: { status: res.status } })
+      btn.dispatchEvent(event)
+      if (res.ok) window.location.href = (btn as HTMLButtonElement).dataset.redirect || '/'
+    })
+  })
+</script>

package/src/client/components/SignUpForm.astro

@@ -0,0 +1,61 @@
+---
+interface Props { redirectTo?: string; class?: string }
+const { redirectTo = '/', class: cls } = Astro.props
+---
+<form data-vulse-sign-up data-redirect={redirectTo} class={cls} novalidate>
+  <p data-vulse-auth-error class="vulse-auth-error" hidden role="alert"></p>
+  <slot />
+</form>
+<script>
+  function authErrorMessage(status: number, body: unknown, kind: 'sign-in' | 'sign-up'): string {
+    const msg =
+      body && typeof body === 'object' && 'message' in body && typeof (body as { message: unknown }).message === 'string'
+        ? (body as { message: string }).message
+        : null
+    if (msg) return msg
+    if (status === 403 || status === 400) {
+      if (kind === 'sign-up') return 'Sign-up is not enabled. Ask an administrator to allow member registration.'
+    }
+    return kind === 'sign-in' ? 'Sign in failed. Check your email and password.' : 'Could not create your account. Please try again.'
+  }
+
+  document.querySelectorAll('form[data-vulse-sign-up]').forEach((form) => {
+    const errorEl = form.querySelector('[data-vulse-auth-error]') as HTMLElement | null
+    const showError = (message: string) => {
+      if (!errorEl) return
+      errorEl.textContent = message
+      errorEl.hidden = false
+    }
+    const clearError = () => {
+      if (!errorEl) return
+      errorEl.textContent = ''
+      errorEl.hidden = true
+    }
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault()
+      clearError()
+      const f = new FormData(form as HTMLFormElement)
+      const res = await fetch('/api/auth/sign-up/email', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          email: f.get('email'),
+          password: f.get('password'),
+          name: f.get('name') ?? f.get('email'),
+        }),
+        credentials: 'same-origin',
+      })
+      const body = await res.json().catch(() => null)
+      const event = new CustomEvent(res.ok ? 'vulse:sign-up:success' : 'vulse:sign-up:error', {
+        detail: { status: res.status, body },
+      })
+      form.dispatchEvent(event)
+      if (res.ok) {
+        window.location.href = (form as HTMLFormElement).dataset.redirect || '/'
+        return
+      }
+      showError(authErrorMessage(res.status, body, 'sign-up'))
+    })
+  })
+</script>

package/src/client/components/VulseImage.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    asset: { id: string }
+    alt?: string
+    sizes?: string
+    loading?: 'lazy' | 'eager'
+  }>(),
+  { alt: '', loading: 'lazy' },
+)
+
+const src = computed(() => `/api/vulse/media/${props.asset.id}/file`)
+</script>
+
+<template>
+  <img
+    :src="src"
+    :sizes="sizes"
+    :loading="loading"
+    decoding="async"
+    :alt="alt"
+  />
+</template>

package/src/client/embed.ts

@@ -0,0 +1,52 @@
+import { sanitizeMediaSrc } from './url.js';
+
+export interface ParsedIframeAttrs {
+  src: string;
+  title: string;
+  width?: string;
+  height?: string;
+  allow?: string;
+  loading?: string;
+  referrerpolicy?: string;
+  frameborder?: string;
+  allowfullscreen?: boolean;
+}
+
+function parseAttributes(source: string): Record<string, string> {
+  const attrs: Record<string, string> = {};
+  const pattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+
+  for (const match of source.matchAll(pattern)) {
+    const name = match[1]?.toLowerCase();
+    if (!name) continue;
+    const value = match[2] ?? match[3] ?? match[4] ?? '';
+    attrs[name] = value;
+  }
+
+  return attrs;
+}
+
+export function parseIframeCode(raw: unknown): ParsedIframeAttrs | null {
+  if (typeof raw !== 'string') return null;
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  const match = trimmed.match(/<iframe\b([^>]*)>(?:\s*<\/iframe>)?/i);
+  if (!match) return null;
+
+  const attrs = parseAttributes(match[1] ?? '');
+  const src = sanitizeMediaSrc(attrs.src ?? '');
+  if (!src) return null;
+
+  return {
+    src,
+    title: attrs.title?.trim() || 'Embedded content',
+    ...(attrs.width ? { width: attrs.width } : {}),
+    ...(attrs.height ? { height: attrs.height } : {}),
+    ...(attrs.allow ? { allow: attrs.allow } : {}),
+    ...(attrs.loading ? { loading: attrs.loading } : {}),
+    ...(attrs.referrerpolicy ? { referrerpolicy: attrs.referrerpolicy } : {}),
+    ...(attrs.frameborder ? { frameborder: attrs.frameborder } : {}),
+    ...(Object.hasOwn(attrs, 'allowfullscreen') ? { allowfullscreen: true } : {}),
+  };
+}

package/src/client/index.ts

@@ -0,0 +1,2 @@
+export type { Block, BlockType } from '../core/blocks/schema.js'
+export { blockSchema, BUILT_IN_BLOCK_TYPES } from '../core/blocks/schema.js'

package/src/client/inject.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue';
+import type { BlockComponentMap } from './pm-types.js';
+
+export const COMPONENTS_KEY: InjectionKey<BlockComponentMap> = Symbol('vulse:components');

package/src/client/live-preview-bridge.ts

@@ -0,0 +1,20 @@
+import morphdom from 'morphdom'
+
+const ROOT = document.documentElement.dataset.vulsePreviewRoot ?? 'main'
+
+window.addEventListener('message', async (event) => {
+  if (event.origin !== window.location.origin) return
+  if (event.data?.name !== 'vulse.preview.updated') return
+
+  const res = await fetch(window.location.href, {
+    cache: 'no-store',
+    credentials: 'include',
+    headers: { Accept: 'text/html' },
+  })
+  if (!res.ok) return
+  const html = await res.text()
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+  const from = doc.querySelector(ROOT)
+  const to = document.querySelector(ROOT)
+  if (from && to) morphdom(to, from, { childrenOnly: true })
+})

package/src/client/pm-defaults.ts

@@ -0,0 +1,38 @@
+import Blockquote from './blocks/Blockquote.vue';
+import BulletList from './blocks/BulletList.vue';
+import CodeBlock from './blocks/CodeBlock.vue';
+import Emoji from './blocks/Emoji.vue';
+import HardBreak from './blocks/HardBreak.vue';
+import Heading from './blocks/Heading.vue';
+import ListItem from './blocks/ListItem.vue';
+import OrderedList from './blocks/OrderedList.vue';
+import Paragraph from './blocks/Paragraph.vue';
+import Text from './blocks/Text.vue';
+import VulseAccordion from './blocks/VulseAccordion.vue';
+import VulseAccordionGroup from './blocks/VulseAccordionGroup.vue';
+import VulseCallout from './blocks/VulseCallout.vue';
+import VulseIframe from './blocks/VulseIframe.vue';
+import VulseImage from './blocks/VulseImage.vue';
+import VulseSet from './blocks/VulseSet.vue';
+import VulseVideo from './blocks/VulseVideo.vue';
+import type { BlockComponentMap } from './pm-types.js';
+
+export const defaultComponents: BlockComponentMap = {
+  paragraph: Paragraph,
+  heading: Heading,
+  bulletList: BulletList,
+  orderedList: OrderedList,
+  listItem: ListItem,
+  blockquote: Blockquote,
+  codeBlock: CodeBlock,
+  hardBreak: HardBreak,
+  text: Text,
+  emoji: Emoji,
+  vulseAccordionGroup: VulseAccordionGroup,
+  vulseCallout: VulseCallout,
+  vulseAccordion: VulseAccordion,
+  vulseIframe: VulseIframe,
+  vulseImage: VulseImage,
+  vulseVideo: VulseVideo,
+  vulseSet: VulseSet,
+};

package/src/client/pm-types.ts

@@ -0,0 +1,21 @@
+import type { Component } from 'vue';
+
+export interface BlockMark {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+export interface BlockNode {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: BlockNode[];
+  text?: string;
+  marks?: BlockMark[];
+}
+
+export type BlockComponentMap = Record<string, Component>;
+
+export interface BlockRendererProps {
+  doc: BlockNode | BlockNode[];
+  components?: BlockComponentMap;
+}