@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/fields/vulse-set-extension.ts

@@ -0,0 +1,66 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
+import VulseSetNodeView from './VulseSetNodeView.vue';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    vulseSet: {
+      insertVulseSet: (setHandle: string) => ReturnType;
+    };
+  }
+}
+
+export const VulseSetExtension = Node.create({
+  name: 'vulseSet',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      set: {
+        default: null,
+        parseHTML: (el: HTMLElement) => el.getAttribute('data-vulse-set'),
+        renderHTML: (attrs: { set: string | null }) => ({ 'data-vulse-set': attrs.set ?? '' }),
+      },
+      data: {
+        default: {} as Record<string, unknown>,
+        parseHTML: (el: HTMLElement) => {
+          const raw = el.getAttribute('data-vulse-data');
+          try {
+            return raw ? JSON.parse(raw) : {};
+          } catch {
+            return {};
+          }
+        },
+        renderHTML: (attrs: { data: Record<string, unknown> }) => ({
+          'data-vulse-data': JSON.stringify(attrs.data ?? {}),
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-vulse-set]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-vulse-set': '' })];
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(VulseSetNodeView);
+  },
+
+  addCommands() {
+    return {
+      insertVulseSet:
+        (setHandle: string) =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: { set: setHandle, data: {} },
+          }),
+    };
+  },
+});

package/src/admin/components/fields/vulse-video-extension.ts

@@ -0,0 +1,65 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
+import { sanitizeMediaSrc } from './url-utils.js';
+import VulseVideoNodeView from './VulseVideoNodeView.vue';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    vulseVideo: {
+      insertVulseVideo: (src?: string) => ReturnType;
+    };
+  }
+}
+
+export const VulseVideoExtension = Node.create({
+  name: 'vulseVideo',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: (element: HTMLElement) =>
+          sanitizeMediaSrc(element.getAttribute('src') ?? '') ?? null,
+        renderHTML: (attrs: { src?: string | null }) => (attrs.src ? { src: attrs.src } : {}),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'video[data-vulse-embed="video"]' }, { tag: 'video[src]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'video',
+      mergeAttributes(
+        {
+          'data-vulse-embed': 'video',
+          controls: 'true',
+          preload: 'metadata',
+        },
+        HTMLAttributes,
+      ),
+    ];
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(VulseVideoNodeView);
+  },
+
+  addCommands() {
+    return {
+      insertVulseVideo:
+        (src = '') =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: { src: sanitizeMediaSrc(src) },
+          }),
+    };
+  },
+});

package/src/admin/composables/toast.ts

@@ -0,0 +1,35 @@
+import { ref } from 'vue'
+
+export type ToastKind = 'success' | 'error'
+
+export interface ToastMessage {
+  id: number
+  message: string
+  kind: ToastKind
+}
+
+const toasts = ref<ToastMessage[]>([])
+let nextId = 1
+
+function push(message: string, kind: ToastKind, durationMs: number) {
+  const id = nextId++
+  toasts.value = [...toasts.value, { id, message, kind }]
+  window.setTimeout(() => {
+    toasts.value = toasts.value.filter((t) => t.id !== id)
+  }, durationMs)
+}
+
+export function useToast() {
+  return {
+    toasts,
+    success(message: string, durationMs = 2800) {
+      push(message, 'success', durationMs)
+    },
+    error(message: string, durationMs = 4000) {
+      push(message, 'error', durationMs)
+    },
+    dismiss(id: number) {
+      toasts.value = toasts.value.filter((t) => t.id !== id)
+    },
+  }
+}

package/src/admin/composables/useEntrySearch.ts

@@ -0,0 +1,112 @@
+import { ref, watch } from 'vue'
+import { adminApi } from '../client/api.js'
+
+export interface EntryOption {
+  id: string
+  collection: string
+  title?: string
+  email?: string
+}
+
+export function entryOptionLabel(option: EntryOption): string {
+  return option.title ?? option.email ?? option.id
+}
+
+export function useEntrySearch(collections: () => string[]) {
+  const open = ref(false)
+  const query = ref('')
+  const options = ref<EntryOption[]>([])
+  const loading = ref(false)
+
+  async function loadOptions(search = '') {
+    const cols = collections().filter(Boolean)
+    if (cols.length === 0) {
+      options.value = []
+      return
+    }
+
+    loading.value = true
+    try {
+      const needle = search.trim().toLowerCase()
+      const merged: EntryOption[] = []
+
+      for (const collection of cols) {
+        if (collection === 'user') {
+          const users = await adminApi.get<{ id: string; email?: string }[]>(
+            `/api/vulse/users?q=${encodeURIComponent(search)}`,
+          )
+          for (const user of users) {
+            merged.push({ id: user.id, collection: 'user', email: user.email })
+          }
+          continue
+        }
+
+        const rows = await adminApi.get<
+          { id: string; content?: { title?: string }; slug?: string }[]
+        >(`/api/vulse/entries/${collection}`)
+        for (const row of rows) {
+          merged.push({
+            id: row.id,
+            collection,
+            title: row.content?.title ?? row.slug ?? row.id,
+          })
+        }
+      }
+
+      options.value = merged.filter((row) => {
+        if (!needle) return true
+        return entryOptionLabel(row).toLowerCase().includes(needle)
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function resolveLabel(entryId: string, collection: string): Promise<string> {
+    if (!entryId) return ''
+    if (collection === 'user') {
+      const users = await adminApi.get<{ id: string; email?: string }[]>(
+        `/api/vulse/users?q=${encodeURIComponent(entryId)}`,
+      )
+      const match = users.find((user) => user.id === entryId)
+      return match ? entryOptionLabel({ id: match.id, collection: 'user', email: match.email }) : entryId
+    }
+
+    const row = await adminApi.get<{ id: string; content?: { title?: string }; slug?: string }>(
+      `/api/vulse/entries/${collection}/${entryId}`,
+    )
+    return row.content?.title ?? row.slug ?? row.id
+  }
+
+  function openDropdown() {
+    open.value = true
+    void loadOptions(query.value)
+  }
+
+  function closeDropdown() {
+    open.value = false
+  }
+
+  function onBlur(event: FocusEvent) {
+    const next = event.relatedTarget as Node | null
+    if (next && (event.currentTarget as HTMLElement).contains(next)) return
+    closeDropdown()
+  }
+
+  watch(query, (value) => {
+    if (!open.value) return
+    void loadOptions(value)
+  })
+
+  return {
+    open,
+    query,
+    options,
+    loading,
+    loadOptions,
+    resolveLabel,
+    openDropdown,
+    closeDropdown,
+    onBlur,
+  }
+}

package/src/admin/composables/useSets.ts

@@ -0,0 +1,31 @@
+import { onMounted, ref } from 'vue'
+import { adminApi } from '../client/api.js'
+import type { SetDefinition } from '../../core/sets/definition.js'
+
+let cache: Map<string, SetDefinition> | null = null
+let loading: Promise<Map<string, SetDefinition>> | null = null
+
+export async function hydrateSets(): Promise<Map<string, SetDefinition>> {
+  if (cache) return cache
+  if (!loading) {
+    loading = adminApi.get<SetDefinition[]>('/api/vulse/sets').then((list) => {
+      cache = new Map(list.map((s) => [s.handle, s]))
+      return cache
+    })
+  }
+  return loading
+}
+
+export function useSets() {
+  const sets = ref<Map<string, SetDefinition>>(cache ?? new Map())
+
+  onMounted(async () => {
+    sets.value = await hydrateSets()
+  })
+
+  function get(handle: string): SetDefinition | undefined {
+    return sets.value.get(handle)
+  }
+
+  return { sets, get, hydrate: hydrateSets }
+}

package/src/admin/pages/collections/[name]/[id]/revisions.astro

@@ -0,0 +1,27 @@
+---
+import AdminShell from '../../../../components/AdminShell.astro'
+import RevisionList from '../../../../components/RevisionList.vue'
+import { createDb } from '../../../../../core/db.js'
+import { getRuntimeEnv } from '../../../../../server/env.js'
+import { readLocalesConfig } from '../../../../../core/locales.js'
+
+const name = Astro.params.name!
+const id = Astro.params.id!
+
+const env = getRuntimeEnv()
+const db = createDb(env.DB)
+const localesCfg = await readLocalesConfig(db)
+const requested = Astro.url.searchParams.get('locale')
+const activeLocale = requested && localesCfg.locales.includes(requested) ? requested : localesCfg.defaultLocale
+---
+<AdminShell title="Revisions" activePath={`/admin/collections/${name}`}>
+  <h1 class="text-2xl font-semibold mb-4">Revisions</h1>
+  <RevisionList
+    client:load
+    collection={name}
+    entryId={id}
+    entryLocale={activeLocale}
+    supportedLocales={localesCfg.locales}
+    defaultLocale={localesCfg.defaultLocale}
+  />
+</AdminShell>

package/src/admin/pages/collections/[name]/[id].astro

@@ -0,0 +1,90 @@
+---
+import AdminShell from '../../../components/AdminShell.astro'
+import EntryEditorWithPreview from '../../../components/EntryEditorWithPreview.vue'
+import { createDb } from '../../../../core/db.js'
+import { registryForRequest } from '../../../../core/blueprints/load.js'
+import { fieldDescriptorsFromBlueprint } from '../../../client/form-from-zod.js'
+import { getRuntime } from '../../../../server/runtime.js'
+import { getRuntimeEnv } from '../../../../server/env.js'
+import { readLocalesConfig } from '../../../../core/locales.js'
+import { resolvePreviewConfig } from '../../../../core/blueprints/preview-path.js'
+import { EntriesRepo } from '../../../../core/repos/entries.js'
+
+const env = getRuntimeEnv()
+const db = createDb(env.DB)
+const reg = await registryForRequest(db)
+const bp = reg.get(Astro.params.name!)
+if (!bp) return Astro.redirect('/admin')
+const fields = fieldDescriptorsFromBlueprint(bp)
+
+const localesCfg = await readLocalesConfig(db)
+const requested = Astro.url.searchParams.get('locale')
+const activeLocale = requested && localesCfg.locales.includes(requested) ? requested : localesCfg.defaultLocale
+
+const entryId = Astro.params.id!
+const entriesRepo = new EntriesRepo(db)
+const existingLocales = (await entriesRepo.listLocales(entryId)).map((l) => l.locale)
+
+const rt = await getRuntime(env, reg, new URL(Astro.request.url).origin)
+const findUrl = `${Astro.request.url.split('?')[0]}?locale=${encodeURIComponent(activeLocale)}`
+const res = await rt.routes.entries.findById(new Request(findUrl, { headers: Astro.request.headers }), { collection: bp.name, id: entryId })
+const body = await res.json() as {
+  ok: true
+  data: {
+    content: Record<string, unknown>
+    draftContent: Record<string, unknown> | null
+    slug: string
+    status: 'draft' | 'published'
+    hasUnpublishedChanges: boolean
+  }
+} | { ok: false }
+
+// If the entry has no rows at all (none of its locales exist), 404. Otherwise,
+// the requested locale just doesn't have a translation yet — show an empty form
+// so the editor can author one.
+if (!body.ok && existingLocales.length === 0) return new Response('Not found', { status: 404 })
+
+const hasTranslation = body.ok
+const row = hasTranslation ? body.data : null
+const editContent = bp.drafts && row?.draftContent ? row.draftContent : (row?.content ?? {})
+const initial = hasTranslation
+  ? {
+      ...(editContent as Record<string, unknown>),
+      slug: row!.slug,
+      status: row!.status,
+      hasUnpublishedChanges: row!.hasUnpublishedChanges,
+    }
+  : { status: 'draft' }
+
+const previewConfig = resolvePreviewConfig(bp)
+const previewTemplate = previewConfig.path
+const livePreviewEnabled = previewConfig.live !== false
+const previewPath = previewTemplate.replace('{slug}', encodeURIComponent(row?.slug ?? ''))
+---
+<AdminShell title={`Edit ${bp.label}`} activePath={`/admin/collections/${bp.name}`}>
+  <div class="mb-4 flex items-center gap-4">
+    <a href={`/admin/collections/${bp.name}/${entryId}/revisions?locale=${encodeURIComponent(activeLocale)}`} class="text-sm text-zinc-600 underline">View history</a>
+    {hasTranslation && (
+      <a href={`/api/vulse/preview/start?to=${encodeURIComponent(previewPath)}`} class="rounded border border-zinc-300 px-3 py-1 text-sm hover:bg-zinc-50">Preview</a>
+    )}
+  </div>
+  <EntryEditorWithPreview
+    client:load
+    collection={bp.name}
+    entryId={entryId}
+    fields={fields}
+    initial={initial}
+    draftsEnabled={bp.drafts === true}
+    seoEnabled={bp.seo === true}
+    seoMapping={bp.admin.seoMapping}
+    tree={bp.tree === true}
+    hasUnpublishedChanges={row?.hasUnpublishedChanges ?? false}
+    titleField={bp.admin.titleField}
+    previewPath={previewTemplate}
+    livePreviewAllowed={livePreviewEnabled}
+    entryLocale={activeLocale}
+    defaultLocale={localesCfg.defaultLocale}
+    supportedLocales={localesCfg.locales}
+    existingLocales={existingLocales}
+  />
+</AdminShell>

package/src/admin/pages/collections/[name]/index.astro

@@ -0,0 +1,31 @@
+---
+import AdminShell from '../../../components/AdminShell.astro'
+import EntryList from '../../../components/EntryList.vue'
+import { createDb } from '../../../../core/db.js'
+import { getRuntimeEnv } from '../../../../server/env.js'
+import { registryForRequest } from '../../../../core/blueprints/load.js'
+import { readLocalesConfig } from '../../../../core/locales.js'
+
+const env = getRuntimeEnv()
+const db = createDb(env.DB)
+const reg = await registryForRequest(db)
+const bp = reg.get(Astro.params.name!)
+if (!bp) return Astro.redirect('/admin')
+const columns = bp.admin.listColumns ?? [bp.admin.titleField]
+
+const localesCfg = await readLocalesConfig(db)
+const requested = Astro.url.searchParams.get('locale')
+const activeLocale = requested && localesCfg.locales.includes(requested) ? requested : localesCfg.defaultLocale
+---
+<AdminShell title={bp.label} activePath={`/admin/collections/${bp.name}`}>
+  <EntryList
+    client:load
+    collection={bp.name}
+    label={bp.label}
+    columns={columns}
+    tree={bp.tree === true}
+    entryLocale={activeLocale}
+    supportedLocales={localesCfg.locales}
+    defaultLocale={localesCfg.defaultLocale}
+  />
+</AdminShell>

package/src/admin/pages/collections/[name]/new.astro

@@ -0,0 +1,38 @@
+---
+import AdminShell from '../../../components/AdminShell.astro'
+import EntryForm from '../../../components/EntryForm.vue'
+import { createDb } from '../../../../core/db.js'
+import { getRuntimeEnv } from '../../../../server/env.js'
+import { registryForRequest } from '../../../../core/blueprints/load.js'
+import { fieldDescriptorsFromBlueprint } from '../../../client/form-from-zod.js'
+import { readLocalesConfig } from '../../../../core/locales.js'
+
+const env = getRuntimeEnv()
+const db = createDb(env.DB)
+const reg = await registryForRequest(db)
+const bp = reg.get(Astro.params.name!)
+if (!bp) return Astro.redirect('/admin')
+const fields = fieldDescriptorsFromBlueprint(bp)
+const parentId = Astro.url.searchParams.get('parent_id')
+
+const localesCfg = await readLocalesConfig(db)
+const requested = Astro.url.searchParams.get('locale')
+const activeLocale = requested && localesCfg.locales.includes(requested) ? requested : localesCfg.defaultLocale
+---
+<AdminShell title={`New ${bp.label}`} activePath={`/admin/collections/${bp.name}`}>
+  <EntryForm
+    client:load
+    collection={bp.name}
+    fields={fields}
+    initial={{}}
+    draftsEnabled={bp.drafts === true}
+    seoEnabled={bp.seo === true}
+    seoMapping={bp.admin.seoMapping}
+    tree={bp.tree === true}
+    parentId={parentId}
+    titleField={bp.admin.titleField}
+    entryLocale={activeLocale}
+    defaultLocale={localesCfg.defaultLocale}
+    supportedLocales={localesCfg.locales}
+  />
+</AdminShell>

package/src/admin/pages/forms/[handle]/submissions/[id].astro

@@ -0,0 +1,9 @@
+---
+import AdminShell from '../../../../components/AdminShell.astro'
+import SubmissionDetail from '../../../../components/SubmissionDetail.vue'
+
+const { handle, id } = Astro.params
+---
+<AdminShell title="Submission" activePath="/admin/forms">
+  <SubmissionDetail client:load formHandle={handle!} submissionId={id!} />
+</AdminShell>

package/src/admin/pages/forms/[handle]/submissions/index.astro

@@ -0,0 +1,9 @@
+---
+import AdminShell from '../../../../components/AdminShell.astro'
+import SubmissionList from '../../../../components/SubmissionList.vue'
+
+const { handle } = Astro.params
+---
+<AdminShell title="Submissions" activePath="/admin/forms">
+  <SubmissionList client:load formHandle={handle!} />
+</AdminShell>

package/src/admin/pages/forms/[handle].astro

@@ -0,0 +1,9 @@
+---
+import AdminShell from '../../components/AdminShell.astro'
+import FormEditor from '../../components/FormEditor.vue'
+
+const { handle } = Astro.params
+---
+<AdminShell title={handle ? `Form: ${handle}` : 'Form'} activePath="/admin/forms">
+  <FormEditor client:load handle={handle ?? null} />
+</AdminShell>

package/src/admin/pages/forms/index.astro

@@ -0,0 +1,7 @@
+---
+import AdminShell from '../../components/AdminShell.astro'
+import FormList from '../../components/FormList.vue'
+---
+<AdminShell title="Forms" activePath="/admin/forms">
+  <FormList client:load />
+</AdminShell>

package/src/admin/pages/forms/new.astro

@@ -0,0 +1,7 @@
+---
+import AdminShell from '../../components/AdminShell.astro'
+import FormEditor from '../../components/FormEditor.vue'
+---
+<AdminShell title="New form" activePath="/admin/forms">
+  <FormEditor client:load handle={null} />
+</AdminShell>

package/src/admin/pages/index.astro

@@ -0,0 +1,36 @@
+---
+import AdminShell from '../components/AdminShell.astro'
+import { getRuntime } from '../../server/runtime.js'
+import { getRuntimeEnv } from '../../server/env.js'
+import { createDb } from '../../core/db.js'
+import { registryForRequest } from '../../core/blueprints/load.js'
+
+const env = getRuntimeEnv()
+const db = createDb(env.DB)
+const rt = await getRuntime(env, await registryForRequest(db), new URL(Astro.request.url).origin)
+const reg = rt.registry
+
+const counts: { name: string; label: string; total: number; published: number }[] = []
+for (const bp of reg.list()) {
+  const all = await rt.routes.entries.list(new Request(Astro.request.url, { headers: Astro.request.headers }), { collection: bp.name })
+  const body = await all.json() as { ok: true; data: { status: string }[] } | { ok: false }
+  const list = body.ok ? body.data : []
+  counts.push({
+    name: bp.name, label: bp.label,
+    total: list.length,
+    published: list.filter((e) => e.status === 'published').length,
+  })
+}
+---
+<AdminShell title="Dashboard" activePath="/admin">
+  <h1 class="text-2xl font-semibold mb-6">Dashboard</h1>
+  <div class="grid grid-cols-3 gap-4">
+    {counts.map((c) => (
+      <a href={`/admin/collections/${c.name}`} class="block p-4 rounded-xl border bg-white hover:shadow-sm">
+        <div class="text-sm text-zinc-500">{c.label}</div>
+        <div class="text-3xl font-semibold mt-1">{c.total}</div>
+        <div class="text-xs text-zinc-400 mt-1">{c.published} published</div>
+      </a>
+    ))}
+  </div>
+</AdminShell>

package/src/admin/pages/login.astro

@@ -0,0 +1,14 @@
+---
+import '../styles/admin.css'
+import LoginForm from '../components/LoginForm.vue'
+const next = new URL(Astro.request.url).searchParams.get('next') ?? '/admin'
+---
+<!doctype html>
+<html lang="en" class="vulse-admin">
+  <head>
+    <meta charset="utf-8" /><title>Sign in — Vulse</title>
+  </head>
+  <body class="min-h-screen grid place-items-center bg-zinc-50 vulse-admin">
+    <LoginForm client:load next={next} />
+  </body>
+</html>

package/src/admin/pages/media.astro

@@ -0,0 +1,8 @@
+---
+import AdminShell from '../components/AdminShell.astro'
+import MediaLibrary from '../components/MediaLibrary.vue'
+---
+<AdminShell title="Media" activePath="/admin/media">
+  <h1 class="mb-4 text-2xl font-semibold text-zinc-900">Assets</h1>
+  <MediaLibrary client:load />
+</AdminShell>

package/src/admin/pages/schema/[handle].astro

@@ -0,0 +1,10 @@
+---
+import AdminShell from '../../components/AdminShell.astro'
+import BlueprintEditor from '../../components/BlueprintEditor.vue'
+
+const { handle } = Astro.params
+const isAdmin = (Astro.locals as { vulseUser?: { role?: string } }).vulseUser?.role === 'admin'
+---
+<AdminShell title={handle ? `Schema: ${handle}` : 'New collection'} activePath={handle ? `/admin/schema/${handle}` : '/admin/schema/new'}>
+  <BlueprintEditor client:only="vue" handle={handle ?? null} is-admin={isAdmin} />
+</AdminShell>

package/src/admin/pages/schema/new.astro

@@ -0,0 +1,9 @@
+---
+import AdminShell from '../../components/AdminShell.astro'
+import BlueprintEditor from '../../components/BlueprintEditor.vue'
+
+const isAdmin = (Astro.locals as { vulseUser?: { role?: string } }).vulseUser?.role === 'admin'
+---
+<AdminShell title="New collection" activePath="/admin/schema/new">
+  <BlueprintEditor client:only="vue" handle={null} is-admin={isAdmin} />
+</AdminShell>

package/src/admin/pages/settings/auth.astro

@@ -0,0 +1,9 @@
+---
+import AdminShell from '../../components/AdminShell.astro'
+import AuthSettings from '../../components/AuthSettings.vue'
+---
+<AdminShell title="Auth settings" activePath="/admin/settings/auth">
+  <h1 class="mb-4 text-2xl font-semibold text-zinc-900">Authentication</h1>
+  <p class="mb-4 text-sm text-zinc-600">Control public member sign-up on your site. End-user sign-in forms are headless — you style them in your Astro pages.</p>
+  <AuthSettings client:load />
+</AdminShell>

package/src/admin/pages/settings/globals/[handle].astro

@@ -0,0 +1,9 @@
+---
+import AdminShell from '../../../components/AdminShell.astro'
+import GlobalSetEditor from '../../../components/GlobalSetEditor.vue'
+
+const { handle } = Astro.params
+---
+<AdminShell title={handle ? `Global: ${handle}` : 'Global set'} activePath="/admin/settings/globals">
+  <GlobalSetEditor client:load handle={handle ?? null} />
+</AdminShell>

package/src/admin/pages/settings/globals/index.astro

@@ -0,0 +1,7 @@
+---
+import AdminShell from '../../../components/AdminShell.astro'
+import GlobalSetList from '../../../components/GlobalSetList.vue'
+---
+<AdminShell title="Globals" activePath="/admin/settings/globals">
+  <GlobalSetList client:load />
+</AdminShell>