@ekrist1/vulse 0.1.6-alpha.3

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@ekrist1/vulse",
+  "version": "0.1.6-alpha.3",
+  "description": "Astro-native headless CMS for Cloudflare (D1, R2, Workers)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ekrist1/vulseastro.git",
+    "directory": "packages/vulse"
+  },
+  "bugs": "https://github.com/ekrist1/vulseastro/issues",
+  "homepage": "https://github.com/ekrist1/vulseastro#readme",
+  "keywords": [
+    "astro",
+    "astro-integration",
+    "withastro",
+    "astro-loader",
+    "cms",
+    "cloudflare",
+    "headless-cms",
+    "d1",
+    "workers"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "bin": {
+    "vulse": "./dist/cli/index.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./loader": {
+      "types": "./dist/loader.d.ts",
+      "import": "./dist/loader.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./integration": {
+      "types": "./dist/integration.d.ts",
+      "import": "./dist/integration.js"
+    },
+    "./integration/cron": {
+      "types": "./dist/integration/cron.d.ts",
+      "import": "./dist/integration/cron.js"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "import": "./dist/client/index.js"
+    },
+    "./client/auth": {
+      "import": "./src/client/auth.ts"
+    },
+    "./client/components/SignInForm.astro": "./src/client/components/SignInForm.astro",
+    "./client/components/SignUpForm.astro": "./src/client/components/SignUpForm.astro",
+    "./client/components/ForgotPasswordForm.astro": "./src/client/components/ForgotPasswordForm.astro",
+    "./client/components/ResetPasswordForm.astro": "./src/client/components/ResetPasswordForm.astro",
+    "./client/components/SignOutButton.astro": "./src/client/components/SignOutButton.astro",
+    "./client/components/SessionGuard.astro": "./src/client/components/SessionGuard.astro",
+    "./client/BlockRenderer.vue": "./src/client/BlockRenderer.vue",
+    "./client/BlockRenderer.astro": "./src/client/BlockRenderer.astro",
+    "./client/components/FormRenderer.astro": "./src/client/components/FormRenderer.astro"
+  },
+  "files": [
+    "dist",
+    "migrations",
+    "src/client",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "prepublishOnly": "pnpm run build",
+    "build": "pnpm run build:bridge && node scripts/sync-version.mjs && tsc -p tsconfig.json",
+    "build:bridge": "esbuild src/client/live-preview-bridge.ts --bundle --format=esm --outfile=src/server/assets/live-preview-bridge.js --platform=browser && node scripts/embed-bridge.mjs",
+    "pretest": "node scripts/sync-version.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "pretest:integration": "node scripts/sync-version.mjs",
+    "test:integration": "vitest run -c vitest.integration.config.ts",
+    "typecheck": "tsc --noEmit",
+    "drizzle:generate": "drizzle-kit generate"
+  },
+  "dependencies": {
+    "@astrojs/vue": "^6.0.1",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
+    "@tiptap/vue-3": "^2.8.0",
+    "better-auth": "^1.0.0",
+    "commander": "^12.0.0",
+    "diff": "^9.0.0",
+    "drizzle-orm": "^0.45.2",
+    "jose": "^6.2.3",
+    "morphdom": "^2.7.8",
+    "nanoid": "^5.0.0",
+    "vue": "^3.5.34"
+  },
+  "devDependencies": {
+    "@cloudflare/vitest-pool-workers": "^0.6.0",
+    "@cloudflare/workers-types": "^4.20240320.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/diff": "^8.0.0",
+    "@types/node": "^22.0.0",
+    "astro": "^6.3.7",
+    "drizzle-kit": "^0.31.10",
+    "esbuild": "^0.25.12",
+    "tailwindcss": "^4",
+    "typescript": "^5.6.0",
+    "vite": "^7.3.0",
+    "vitest": "^2.1.0",
+    "wrangler": "^4.94.0"
+  },
+  "peerDependencies": {
+    "astro": "^6.3.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": false
+    }
+  }
+}

package/src/client/BlockRenderer.astro

@@ -0,0 +1,40 @@
+---
+import type { Block } from '../core/blocks/schema.js'
+import { isProseMirrorDoc, renderProseMirrorHtml } from './render-pm-html.js'
+
+interface Props {
+  blocks: Block[] | Record<string, unknown> | null | undefined
+  mediaUrl?: (id: string, variant?: string) => string
+}
+
+const { blocks, mediaUrl } = Astro.props
+const pmHtml = isProseMirrorDoc(blocks) ? renderProseMirrorHtml(blocks, { mediaUrl }) : null
+const legacyBlocks = Array.isArray(blocks) ? (blocks as Block[]) : []
+---
+{pmHtml ? (
+  <Fragment set:html={pmHtml} />
+) : (
+  <div class="vulse-blocks">
+    {legacyBlocks.map((b) => {
+      if (b.type === 'heading') {
+        const Tag = `h${b.level}` as 'h1' | 'h2' | 'h3' | 'h4'
+        return <Tag>{b.text}</Tag>
+      }
+      if (b.type === 'paragraph') return <p>{b.text}</p>
+      if (b.type === 'image') return (
+        <figure>
+          {mediaUrl ? <img src={mediaUrl(b.mediaId, 'hero')} alt={b.alt} /> : <span class="text-zinc-400">[image: {b.mediaId}]</span>}
+          {b.caption && <figcaption>{b.caption}</figcaption>}
+        </figure>
+      )
+      if (b.type === 'code') return <pre><code class={`language-${b.language}`}>{b.code}</code></pre>
+      if (b.type === 'embed') return <iframe src={b.url} class="w-full aspect-video" />
+      if (b.type === 'quote') return <blockquote>{b.text}{b.cite && <cite>{b.cite}</cite>}</blockquote>
+      if (b.type === 'list') {
+        const Tag = b.ordered ? 'ol' : 'ul'
+        return <Tag>{b.items.map((it) => <li>{it}</li>)}</Tag>
+      }
+      return null
+    })}
+  </div>
+)}

package/src/client/BlockRenderer.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Block } from '../core/blocks/schema'
+import type { BlockComponentMap } from './pm-types.js'
+import ProseMirrorRenderer from './ProseMirrorRenderer.vue'
+
+const props = defineProps<{
+  blocks: Block[] | Record<string, unknown> | null | undefined
+  mediaUrl?: (id: string, variant?: string) => string
+  components?: BlockComponentMap
+}>()
+
+function isProseMirrorDoc(v: unknown): v is Record<string, unknown> {
+  return typeof v === 'object' && v !== null && 'type' in v && (v as { type: string }).type === 'doc'
+}
+
+const doc = computed(() => (isProseMirrorDoc(props.blocks) ? props.blocks : null))
+const legacyBlocks = computed(() => (Array.isArray(props.blocks) ? props.blocks : []))
+</script>
+
+<template>
+  <ProseMirrorRenderer v-if="doc" :doc="doc" :components="components" />
+  <div v-else class="vulse-blocks">
+    <template v-for="(b, i) in legacyBlocks" :key="(b as Block).id ?? i">
+      <h1 v-if="b.type === 'heading' && b.level === 1">{{ b.text }}</h1>
+      <h2 v-else-if="b.type === 'heading' && b.level === 2">{{ b.text }}</h2>
+      <h3 v-else-if="b.type === 'heading' && b.level === 3">{{ b.text }}</h3>
+      <h4 v-else-if="b.type === 'heading' && b.level === 4">{{ b.text }}</h4>
+      <p v-else-if="b.type === 'paragraph'">{{ b.text }}</p>
+      <figure v-else-if="b.type === 'image'">
+        <img v-if="mediaUrl" :src="mediaUrl(b.mediaId, 'hero')" :alt="b.alt" />
+        <span v-else class="text-zinc-400">[image: {{ b.mediaId }}]</span>
+        <figcaption v-if="b.caption">{{ b.caption }}</figcaption>
+      </figure>
+      <pre v-else-if="b.type === 'code'"><code :class="`language-${b.language}`">{{ b.code }}</code></pre>
+      <iframe v-else-if="b.type === 'embed'" :src="b.url" class="w-full aspect-video" />
+      <blockquote v-else-if="b.type === 'quote'">{{ b.text }}<cite v-if="b.cite">{{ b.cite }}</cite></blockquote>
+      <ol v-else-if="b.type === 'list' && b.ordered"><li v-for="(it, j) in b.items" :key="j">{{ it }}</li></ol>
+      <ul v-else-if="b.type === 'list' && !b.ordered"><li v-for="(it, j) in b.items" :key="j">{{ it }}</li></ul>
+    </template>
+  </div>
+</template>

package/src/client/Node.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type Component, computed, inject } from 'vue';
+import { COMPONENTS_KEY } from './inject.js';
+import type { BlockComponentMap, BlockNode } from './pm-types.js';
+
+const props = defineProps<{
+  node: BlockNode;
+}>();
+
+const components = inject<BlockComponentMap>(COMPONENTS_KEY, {});
+
+const resolved = computed<Component | null>(() => components[props.node.type] ?? null);
+</script>
+
+<template>
+  <component
+    v-if="resolved"
+    :is="resolved"
+    :node="node"
+  />
+</template>

package/src/client/ProseMirrorRenderer.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue';
+import Node from './Node.vue';
+import { defaultComponents } from './pm-defaults.js';
+import { COMPONENTS_KEY } from './inject.js';
+import type { BlockComponentMap, BlockNode } from './pm-types.js';
+
+const props = defineProps<{
+  doc: BlockNode | BlockNode[];
+  components?: BlockComponentMap;
+}>();
+
+const merged = computed<BlockComponentMap>(() => ({
+  ...defaultComponents,
+  ...(props.components ?? {}),
+}));
+
+provide(COMPONENTS_KEY, merged.value);
+
+const nodes = computed<BlockNode[]>(() => {
+  if (Array.isArray(props.doc)) return props.doc;
+  if (props.doc.type === 'doc' && props.doc.content) return props.doc.content;
+  return [props.doc];
+});
+</script>
+
+<template>
+  <div class="vulse-doc">
+    <Node v-for="(n, i) in nodes" :key="i" :node="n" />
+  </div>
+</template>

package/src/client/auth.ts

@@ -0,0 +1,28 @@
+export interface SignInInput { email: string; password: string }
+export interface SignUpInput { email: string; password: string; name: string }
+export interface SessionUser { id: string; email: string; name: string; role: 'admin' | 'editor' | 'member' }
+export type Session = { user: SessionUser } | null
+
+async function call<T>(path: string, body?: unknown, method = 'POST'): Promise<T> {
+  const res = await fetch(path, {
+    method,
+    credentials: 'same-origin',
+    ...(body !== undefined ? { headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) } : {}),
+  })
+  if (!res.ok) throw new Error((await res.text().catch(() => '')) || `Request failed (${res.status})`)
+  return res.json() as Promise<T>
+}
+
+export const auth = {
+  signIn: (input: SignInInput) => call<{ data: unknown }>('/api/auth/sign-in/email', input),
+  signUp: (input: SignUpInput) => call<{ data: unknown }>('/api/auth/sign-up/email', input),
+  signOut: () => call<unknown>('/api/auth/sign-out', {}),
+  requestPasswordReset: (email: string, redirectTo = '/reset-password') =>
+    call<unknown>('/api/auth/request-password-reset', { email, redirectTo }),
+  resetPassword: (token: string, password: string) => call<unknown>('/api/auth/reset-password', { token, newPassword: password }),
+  session: async (): Promise<Session> => {
+    const res = await fetch('/api/auth/get-session', { credentials: 'same-origin' })
+    if (!res.ok) return null
+    return res.json() as Promise<Session>
+  },
+}

package/src/client/blocks/Blockquote.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+defineProps<{ node: BlockNode }>();
+</script>
+
+<template>
+  <blockquote class="vulse-blockquote">
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </blockquote>
+</template>

package/src/client/blocks/BulletList.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+defineProps<{ node: BlockNode }>();
+</script>
+
+<template>
+  <ul class="vulse-bullet-list">
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </ul>
+</template>

package/src/client/blocks/CodeBlock.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+const text = computed(() => (props.node.content ?? []).map((c) => c.text ?? '').join(''));
+const language = computed(() => (props.node.attrs?.language as string | undefined) ?? null);
+</script>
+
+<template>
+  <pre class="vulse-code-block"><code :data-language="language">{{ text }}</code></pre>
+</template>

package/src/client/blocks/Emoji.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+const value = computed(() => String(props.node.attrs?.value ?? '🙂'));
+const label = computed(() =>
+  typeof props.node.attrs?.label === 'string' ? props.node.attrs.label : null,
+);
+</script>
+
+<template>
+  <span data-vulse-emoji :aria-label="label ?? undefined">{{ value }}</span>
+</template>

package/src/client/blocks/HardBreak.vue

@@ -0,0 +1 @@
+<template><br class="vulse-hard-break" /></template>

package/src/client/blocks/Heading.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+const tag = computed(() => {
+  const level = (props.node.attrs?.level as number | undefined) ?? 1;
+  return `h${Math.min(Math.max(level, 1), 6)}`;
+});
+</script>
+
+<template>
+  <component :is="tag" class="vulse-heading">
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </component>
+</template>

package/src/client/blocks/ListItem.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+defineProps<{ node: BlockNode }>();
+</script>
+
+<template>
+  <li class="vulse-list-item">
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </li>
+</template>

package/src/client/blocks/OrderedList.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+defineProps<{ node: BlockNode }>();
+</script>
+
+<template>
+  <ol class="vulse-ordered-list">
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </ol>
+</template>

package/src/client/blocks/Paragraph.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+defineProps<{ node: BlockNode }>();
+</script>
+
+<template>
+  <p class="vulse-paragraph">
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </p>
+</template>

package/src/client/blocks/Text.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { type PropType, defineComponent, h } from 'vue';
+import type { BlockMark, BlockNode } from '../pm-types.js';
+import { sanitizeLinkHref } from '../url.js';
+
+const markTag: Record<string, string> = {
+  bold: 'strong',
+  italic: 'em',
+  code: 'code',
+  underline: 'u',
+  strike: 's',
+};
+
+export default defineComponent({
+  name: 'VulseText',
+  props: { node: { type: Object as PropType<BlockNode>, required: true } },
+  setup(props) {
+    return () => {
+      const marks = (props.node.marks ?? []) as BlockMark[];
+      let acc: ReturnType<typeof h> | string = props.node.text ?? '';
+      for (const mark of marks) {
+        if (mark.type === 'link') {
+          const href = sanitizeLinkHref(mark.attrs?.href);
+          if (href) acc = h('a', { class: 'vulse-link', href }, acc);
+        } else if (markTag[mark.type]) {
+          acc = h(markTag[mark.type]!, acc);
+        }
+      }
+      return acc;
+    };
+  },
+});
+</script>

package/src/client/blocks/VulseAccordion.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+const summary = computed(() => String(props.node.attrs?.summary ?? 'Accordion'));
+const open = computed(() => Boolean(props.node.attrs?.open));
+</script>
+
+<template>
+  <details data-vulse-accordion :open="open || undefined">
+    <summary>{{ summary }}</summary>
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </details>
+</template>

package/src/client/blocks/VulseAccordionGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+</script>
+
+<template>
+  <div data-vulse-accordion-group>
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </div>
+</template>

package/src/client/blocks/VulseCallout.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Node from '../Node.vue';
+import type { BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+const tone = computed(() => (props.node.attrs?.tone as string | undefined) ?? 'info');
+</script>
+
+<template>
+  <aside data-vulse-callout :data-tone="tone">
+    <Node v-for="(child, i) in node.content ?? []" :key="i" :node="child" />
+  </aside>
+</template>

package/src/client/blocks/VulseIframe.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { BlockNode } from '../pm-types.js';
+import { parseIframeCode } from '../embed.js';
+import { sanitizeMediaSrc } from '../url.js';
+
+const props = defineProps<{ node: BlockNode }>();
+const parsed = computed(() => parseIframeCode(props.node.attrs?.code));
+const src = computed(() => parsed.value?.src ?? sanitizeMediaSrc(props.node.attrs?.src));
+const title = computed(
+  () =>
+    parsed.value?.title ??
+    (typeof props.node.attrs?.title === 'string' ? props.node.attrs.title : 'Embedded content'),
+);
+const width = computed(() => parsed.value?.width);
+const height = computed(() => parsed.value?.height);
+const allow = computed(() => parsed.value?.allow);
+const loading = computed<'lazy' | 'eager'>(() =>
+  parsed.value?.loading === 'eager' ? 'eager' : 'lazy',
+);
+const referrerpolicy = computed<
+  | 'no-referrer'
+  | 'no-referrer-when-downgrade'
+  | 'origin'
+  | 'origin-when-cross-origin'
+  | 'same-origin'
+  | 'strict-origin'
+  | 'strict-origin-when-cross-origin'
+  | 'unsafe-url'
+  | undefined
+>(() => {
+  const value = parsed.value?.referrerpolicy;
+  if (
+    value === 'no-referrer' ||
+    value === 'no-referrer-when-downgrade' ||
+    value === 'origin' ||
+    value === 'origin-when-cross-origin' ||
+    value === 'same-origin' ||
+    value === 'strict-origin' ||
+    value === 'strict-origin-when-cross-origin' ||
+    value === 'unsafe-url'
+  ) {
+    return value;
+  }
+  return undefined;
+});
+const frameborder = computed(() => parsed.value?.frameborder ?? '0');
+const allowfullscreen = computed(() => parsed.value?.allowfullscreen ?? true);
+</script>
+
+<template>
+  <iframe
+    v-if="src"
+    data-vulse-embed="iframe"
+    :src="src"
+    :title="title"
+    :width="width"
+    :height="height"
+    :allow="allow"
+    :loading="loading"
+    :referrerpolicy="referrerpolicy"
+    :allowfullscreen="allowfullscreen"
+    :frameborder="frameborder"
+  />
+</template>

package/src/client/blocks/VulseImage.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import VulseImage from '../components/VulseImage.vue';
+import type { BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+
+const asset = computed(() => {
+  const a = props.node.attrs?.asset;
+  if (a && typeof a === 'object' && 'id' in a) return a as { id: string };
+  const id = props.node.attrs?.assetId;
+  return typeof id === 'string' ? { id } : null;
+});
+
+const alt = computed(() => (typeof props.node.attrs?.alt === 'string' ? props.node.attrs.alt : ''));
+const caption = computed(() =>
+  typeof props.node.attrs?.caption === 'string' ? props.node.attrs.caption : '',
+);
+const sizes = computed(() =>
+  typeof props.node.attrs?.sizes === 'string' ? props.node.attrs.sizes : undefined,
+);
+</script>
+
+<template>
+  <figure v-if="asset" data-vulse-block="image">
+    <VulseImage v-if="sizes" :asset="asset" :alt="alt" :sizes="sizes" />
+    <VulseImage v-else :asset="asset" :alt="alt" />
+    <figcaption v-if="caption">{{ caption }}</figcaption>
+  </figure>
+</template>

package/src/client/blocks/VulseSet.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { COMPONENTS_KEY } from '../inject.js';
+import type { BlockComponentMap, BlockNode } from '../pm-types.js';
+
+const props = defineProps<{ node: BlockNode }>();
+
+const components = inject<BlockComponentMap>(COMPONENTS_KEY, {});
+
+const setName = computed<string | null>(() => {
+  const s = (props.node.attrs as { set?: unknown } | undefined)?.set;
+  return typeof s === 'string' ? s : null;
+});
+
+const data = computed<Record<string, unknown>>(() => {
+  const d = (props.node.attrs as { data?: unknown } | undefined)?.data;
+  return (d as Record<string, unknown> | undefined) ?? {};
+});
+
+const consumer = computed(() => (setName.value ? components[`set:${setName.value}`] : undefined));
+</script>
+
+<template>
+  <component v-if="consumer" :is="consumer" :data="data" />
+  <div v-else :data-vulse-missing-set="setName ?? ''" />
+</template>

package/src/client/blocks/VulseVideo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { BlockNode } from '../pm-types.js';
+import { sanitizeMediaSrc } from '../url.js';
+
+const props = defineProps<{ node: BlockNode }>();
+const src = computed(() => sanitizeMediaSrc(props.node.attrs?.src));
+</script>
+
+<template>
+  <video
+    v-if="src"
+    data-vulse-embed="video"
+    :src="src"
+    controls
+    preload="metadata"
+  />
+</template>