@kinetis/vector-ui 0.0.0-stage → 0.9.0

package/app/utils/richtext.ts

@@ -0,0 +1,305 @@
+import type { AnyExtension, Extensions, JSONContent } from '@tiptap/core'
+import { generateHTML, generateJSON, generateText } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { TableKit } from '@tiptap/extension-table'
+import Image from '@tiptap/extension-image'
+import Placeholder from '@tiptap/extension-placeholder'
+import Mention, { type MentionOptions } from '@tiptap/extension-mention'
+import DOMPurify from 'dompurify'
+import MarkdownIt from 'markdown-it'
+
+/**
+ * The rich-text schema on the client: the Tiptap extensions a field's
+ * `features` allow — the same node and mark types, with the same
+ * attributes, the server's Document validates — and the sanitizer every
+ * generated HTML string passes before the one `v-html` that shows it.
+ */
+
+/** Every feature a field may allow, as the server names them. */
+export const RICH_TEXT_FEATURES = ['bold', 'italic', 'underline', 'strike', 'code', 'heading', 'list', 'blockquote', 'codeBlock', 'horizontalRule', 'link', 'table', 'image', 'mention'] as const
+
+/** Links go to http(s), mailto or a relative place — the server's rule. */
+export function allowedHref(href: string): boolean {
+    // Control characters and spaces are what hide a scheme, so they are stripped on purpose.
+    // eslint-disable-next-line no-control-regex
+    const compact = href.replace(/[\u0000- \u007F]+/g, '')
+    const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(compact)
+    return scheme === null || ['http', 'https', 'mailto'].includes(scheme[1]!.toLowerCase())
+}
+
+export interface RichTextOptions {
+    features: readonly string[]
+    placeholder?: string
+    /** Resolves an image's storage key to a URL it can show (a blob URL); editing only. */
+    imageSource?: (key: string) => Promise<string | null>
+    /** The `@` menu: records of the mentioned relation matching a query. */
+    mentionItems?: (query: string) => Promise<{ id: string | number, label: string }[]>
+    /** Node and mark types runtime extensions added, by name. */
+    custom?: ReadonlyMap<string, AnyExtension>
+}
+
+/** The Tiptap extensions for a field: exactly its features, nothing else. */
+export function richTextExtensions(options: RichTextOptions): Extensions {
+    const on = (feature: string) => options.features.includes(feature)
+    const extensions: Extensions = [
+        StarterKit.configure({
+            bold: on('bold') ? {} : false,
+            italic: on('italic') ? {} : false,
+            underline: on('underline') ? {} : false,
+            strike: on('strike') ? {} : false,
+            code: on('code') ? {} : false,
+            heading: on('heading') ? { levels: [1, 2, 3, 4] } : false,
+            bulletList: on('list') ? {} : false,
+            orderedList: on('list') ? {} : false,
+            listItem: on('list') ? {} : false,
+            listKeymap: on('list') ? {} : false,
+            blockquote: on('blockquote') ? {} : false,
+            codeBlock: on('codeBlock') ? {} : false,
+            horizontalRule: on('horizontalRule') ? {} : false,
+            link: on('link')
+                ? {
+                        openOnClick: false,
+                        autolink: true,
+                        protocols: [],
+                        HTMLAttributes: { target: '_blank', rel: 'noopener noreferrer nofollow' },
+                        isAllowedUri: (url: string) => allowedHref(url),
+                    }
+                : false,
+        }),
+    ]
+
+    if (on('table')) {
+        // not resizable: resizing writes style attributes a strict CSP refuses
+        extensions.push(TableKit.configure({ table: { resizable: false } }))
+    }
+
+    if (on('image')) {
+        extensions.push(vectorImage(options.imageSource))
+    }
+
+    if (on('mention')) {
+        extensions.push(Mention.configure({
+            HTMLAttributes: { class: 'vx-mention' },
+            suggestion: options.mentionItems ? mentionSuggestion(options.mentionItems) : undefined,
+        }))
+    }
+
+    if (options.placeholder) {
+        extensions.push(Placeholder.configure({ placeholder: options.placeholder }))
+    }
+
+    for (const [name, extension] of options.custom ?? []) {
+        if (on(name)) extensions.push(extension)
+    }
+
+    return extensions
+}
+
+/**
+ * An image stores a storage key in `src`, never a URL. Rendered, it
+ * carries the key as `data-vector-key` and no `src`: whoever shows it
+ * fetches the file with the API's credentials. Editing, a node view does
+ * that through `imageSource`.
+ */
+function vectorImage(imageSource?: (key: string) => Promise<string | null>): AnyExtension {
+    return Image.extend({
+        renderHTML({ HTMLAttributes }) {
+            const { src, ...rest } = HTMLAttributes as Record<string, unknown>
+            return ['img', { ...rest, 'data-vector-key': src }]
+        },
+        parseHTML() {
+            return [{ tag: 'img[src]' }, { tag: 'img[data-vector-key]', getAttrs: element => ({ src: (element as HTMLElement).getAttribute('data-vector-key') }) }]
+        },
+        addNodeView() {
+            return ({ node }) => {
+                const img = document.createElement('img')
+                img.alt = String(node.attrs.alt ?? '')
+                img.className = 'vx-richtext-image'
+                const key = String(node.attrs.src ?? '')
+                img.setAttribute('data-vector-key', key)
+                imageSource?.(key).then((url) => {
+                    if (url) img.src = url
+                }).catch(() => undefined)
+                return { dom: img }
+            }
+        },
+    }).configure({ allowBase64: false })
+}
+
+/** A minimal `@` menu: a list under the caret, arrow keys and Enter to pick. */
+function mentionSuggestion(items: (query: string) => Promise<{ id: string | number, label: string }[]>): NonNullable<MentionOptions['suggestion']> {
+    return {
+        items: ({ query }) => items(query),
+        render: () => {
+            let menu: HTMLDivElement | null = null
+            let choices: { id: string | number, label: string }[] = []
+            let active = 0
+            let pick: ((item: { id: string | number, label: string }) => void) | null = null
+
+            const draw = () => {
+                if (!menu) return
+                menu.replaceChildren(...choices.map((choice, index) => {
+                    const button = document.createElement('button')
+                    button.type = 'button'
+                    button.className = `vx-mention-choice${index === active ? ' vx-mention-choice--active' : ''}`
+                    button.textContent = choice.label
+                    button.addEventListener('mousedown', (event) => {
+                        event.preventDefault()
+                        pick?.(choice)
+                    })
+                    return button
+                }))
+            }
+            const place = (rect: DOMRect | null) => {
+                if (!menu || !rect) return
+                menu.style.left = `${rect.left + window.scrollX}px`
+                menu.style.top = `${rect.bottom + window.scrollY + 4}px`
+            }
+
+            return {
+                onStart: (props) => {
+                    menu = document.createElement('div')
+                    menu.className = 'vx-mention-menu'
+                    menu.setAttribute('role', 'listbox')
+                    document.body.appendChild(menu)
+                    choices = props.items as typeof choices
+                    pick = item => props.command({ id: String(item.id), label: item.label })
+                    active = 0
+                    draw()
+                    place(props.clientRect?.() ?? null)
+                },
+                onUpdate: (props) => {
+                    choices = props.items as typeof choices
+                    pick = item => props.command({ id: String(item.id), label: item.label })
+                    active = Math.min(active, Math.max(0, choices.length - 1))
+                    draw()
+                    place(props.clientRect?.() ?? null)
+                },
+                onKeyDown: ({ event }) => {
+                    if (!choices.length) return false
+                    if (event.key === 'ArrowDown') active = (active + 1) % choices.length
+                    else if (event.key === 'ArrowUp') active = (active - 1 + choices.length) % choices.length
+                    else if (event.key === 'Enter') {
+                        pick?.(choices[active]!)
+                        return true
+                    } else return false
+                    draw()
+                    return true
+                },
+                onExit: () => {
+                    menu?.remove()
+                    menu = null
+                },
+            }
+        },
+    }
+}
+
+/** A stored value as a document: JSON, or HTML (a field that stores HTML) read through the schema. */
+export function toDocument(value: string, extensions: Extensions): JSONContent | null {
+    if (value.trim() === '') return null
+    try {
+        const parsed = JSON.parse(value) as unknown
+        if (parsed && typeof parsed === 'object' && (parsed as JSONContent).type === 'doc') return parsed as JSONContent
+    } catch {
+        // not JSON: HTML
+    }
+    return generateJSON(value, extensions) as JSONContent
+}
+
+/** Whether a document holds no text, image, table or other content. */
+export function isEmptyDocument(doc: JSONContent | null): boolean {
+    const empty = (node: JSONContent): boolean => {
+        if (node.type === 'text') return (node.text ?? '').trim() === ''
+        if (!['doc', 'paragraph', 'hardBreak'].includes(node.type ?? '')) return false
+        return (node.content ?? []).every(empty)
+    }
+    return doc === null || empty(doc)
+}
+
+let purifier: ReturnType<typeof DOMPurify> | null = null
+let purifierWorks: boolean | null = null
+
+const SANITIZE_CONFIG = {
+    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 's', 'code', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'hr', 'a', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'colgroup', 'col', 'img', 'span'],
+    ALLOWED_ATTR: ['href', 'target', 'rel', 'colspan', 'rowspan', 'alt', 'title', 'width', 'height', 'start', 'data-vector-key', 'data-type', 'data-id', 'data-label'],
+    ALLOW_DATA_ATTR: false,
+    ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
+}
+
+/** Text shown as text: what a sanitizer that cannot be trusted leaves. */
+function escapeHtml(html: string): string {
+    return html.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', '\'': '&#39;' })[c]!)
+}
+
+/**
+ * The allow-list the generated HTML passes before `v-html`: the schema's
+ * elements and attributes only. No `style`, no event handler, no
+ * `class`, no `src` (images carry their key), links only to http(s),
+ * mailto or a relative place, and always opening apart.
+ */
+export function sanitizeHtml(html: string): string {
+    if (!purifier) {
+        purifier = DOMPurify(window)
+        purifier.addHook('afterSanitizeAttributes', (node) => {
+            if (node.tagName === 'A') {
+                if (!allowedHref(node.getAttribute('href') ?? '')) node.removeAttribute('href')
+                node.setAttribute('target', '_blank')
+                node.setAttribute('rel', 'noopener noreferrer nofollow')
+            }
+        })
+    }
+
+    // Fail closed: a sanitizer that does not clean a known-bad canary exactly
+    // (a DOM that iterates wrongly, a patched library) is not trusted, and
+    // everything is shown as text instead.
+    purifierWorks ??= purifier.sanitize('<p onclick="x">a<script>b</script><img src="x" onerror="y"><a href="javascript:z">c</a></p>', SANITIZE_CONFIG)
+        === '<p>a<img><a target="_blank" rel="noopener noreferrer nofollow">c</a></p>'
+
+    return purifierWorks ? purifier.sanitize(html, SANITIZE_CONFIG) : escapeHtml(html)
+}
+
+/** Whether this DOM's sanitizer passed its canary: false means every rich value is shown as text. */
+export function sanitizerWorks(): boolean {
+    sanitizeHtml('')
+    return purifierWorks === true
+}
+
+/** A stored value as sanitized HTML, generated through the schema. */
+export function richTextHtml(value: string, extensions: Extensions): string {
+    try {
+        const doc = toDocument(value, extensions)
+        return doc ? sanitizeHtml(generateHTML(doc, extensions)) : ''
+    } catch {
+        return '' // a node the schema does not know: the server refuses such a document, so it is not shown either
+    }
+}
+
+/** A stored value's plain text, for a list cell. */
+export function richTextPlain(value: string, extensions: Extensions): string {
+    try {
+        const doc = toDocument(value, extensions)
+        return doc ? generateText(doc, extensions, { blockSeparator: ' ' }).trim() : ''
+    } catch {
+        return ''
+    }
+}
+
+let markdown: ReturnType<typeof MarkdownIt> | null = null
+
+/**
+ * Markdown source as sanitized HTML: markdown-it with HTML in the source
+ * disabled (it shows as text) and bare URLs linked, then the same
+ * allow-list as rich text.
+ */
+export function markdownHtml(source: string): string {
+    markdown ??= new MarkdownIt({ html: false, linkify: true, breaks: false })
+    return sanitizeHtml(markdown.render(source))
+}
+
+/** Markdown source as its plain text, for a list cell. */
+export function markdownPlain(source: string): string {
+    const holder = document.createElement('div')
+    holder.innerHTML = markdownHtml(source)
+    return (holder.textContent ?? '').replace(/\s+/g, ' ').trim()
+}

package/app/utils/rules.ts

@@ -0,0 +1,113 @@
+import type { VectorCondition, VectorField, VectorFieldState, VectorRule } from '#vector/app/types/vector'
+
+type Rule = (value: unknown) => true | string
+
+const empty = (value: unknown) => value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)
+
+/**
+ * The descriptor's rules, compiled to Vuetify rule functions. Each
+ * mirrors the framework constraint the server runs, by its class's
+ * short name; a constraint with no client equivalent is left to the
+ * server, whose 422 lands on the field as `error-messages`.
+ */
+export function rulesFor(field: VectorField, operation: 'create' | 'update', state?: VectorFieldState): Rule[] {
+    const rules: Rule[] = []
+    const requiredHere = (operation === 'create' && field.nullable === false && !['manyToMany', 'hasMany', 'hasOne', 'boolean'].includes(field.type)) || state?.required === true
+
+    if (requiredHere) {
+        rules.push(value => !empty(value) || vt('common.required'))
+    }
+
+    for (const rule of field.rules) {
+        const compiled = compile(rule)
+
+        if (compiled) {
+            rules.push(compiled)
+        }
+    }
+
+    return rules
+}
+
+function compile(rule: VectorRule): Rule | null {
+    const name = rule.constraint.split('\\').pop()
+    const [a, b] = rule.args as [unknown, unknown]
+
+    switch (name) {
+        case 'NotBlank':
+            return value => (typeof value === 'string' ? value.trim() !== '' : !empty(value)) || vt('common.required')
+        case 'MaxLength':
+            return value => empty(value) || typeof value !== 'string' || [...value].length <= Number(a) || vt('fields.rules.maxLength', { max: String(a) })
+        case 'MinLength':
+            return value => empty(value) || typeof value !== 'string' || [...value].length >= Number(a) || vt('fields.rules.minLength', { min: String(a) })
+        case 'Email':
+            return value => empty(value) || (typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) || vt('fields.rules.email')
+        case 'Url':
+        case 'WebUrl':
+            return value => empty(value) || (typeof value === 'string' && /^https?:\/\/\S+$/i.test(value)) || vt('fields.rules.url')
+        case 'GreaterThan':
+            return value => empty(value) || Number(value) > Number(a) || vt('fields.rules.greaterThan', { limit: String(a) })
+        case 'GreaterThanOrEqual':
+            return value => empty(value) || Number(value) >= Number(a) || vt('fields.rules.greaterThanOrEqual', { limit: String(a) })
+        case 'LessThan':
+            return value => empty(value) || Number(value) < Number(a) || vt('fields.rules.lessThan', { limit: String(a) })
+        case 'LessThanOrEqual':
+            return value => empty(value) || Number(value) <= Number(a) || vt('fields.rules.lessThanOrEqual', { limit: String(a) })
+        case 'Regex':
+            return value => empty(value) || typeof value !== 'string' || phpRegex(String(a)).test(value) || (typeof b === 'string' ? b : vt('fields.rules.invalidFormat'))
+        case 'In':
+            return value => empty(value) || (Array.isArray(a) && a.includes(value)) || vt('fields.rules.notAllowed')
+        default:
+            return null
+    }
+}
+
+/** A PCRE pattern with its delimiters and flags, as the framework's Regex constraint takes it, as a JavaScript RegExp. */
+function phpRegex(pattern: string): RegExp {
+    const match = pattern.match(/^(.)([\s\S]*)\1([a-zA-Z]*)$/)
+
+    if (!match) return new RegExp(pattern)
+
+    const flags = [...match[3]!].filter(f => 'gimsuy'.includes(f)).join('')
+
+    return new RegExp(match[2]!, flags)
+}
+
+/**
+ * What a field's conditions decide under the form's current values: the
+ * server evaluates the same conditions the same way, comparing a
+ * relation by its id, a boolean as true/false, anything else as text.
+ */
+export function fieldState(field: VectorField, values: Record<string, unknown>): VectorFieldState {
+    const c = field.conditions
+    if (!c) return { visible: true, required: false, disabled: false }
+    return {
+        visible: holds(c.visible, values),
+        required: c.required.length > 0 && holds(c.required, values),
+        disabled: c.disabled.length > 0 && holds(c.disabled, values),
+    }
+}
+
+function holds(conditions: VectorCondition[], values: Record<string, unknown>): boolean {
+    return conditions.every((condition) => {
+        const actual = normalize(values[condition.field])
+        const list = Array.isArray(condition.value) ? condition.value.map(normalize) : [normalize(condition.value)]
+        switch (condition.op) {
+            case 'eq': return actual === normalize(condition.value)
+            case 'ne': return actual !== normalize(condition.value)
+            case 'in': return list.includes(actual)
+            case 'nin': return !list.includes(actual)
+            case 'null': return actual === null
+            case 'nnull': return actual !== null
+            default: return false
+        }
+    })
+}
+
+function normalize(value: unknown): string | null {
+    if (value && typeof value === 'object' && 'id' in value) value = (value as { id: unknown }).id
+    if (value === null || value === undefined || value === '') return null
+    if (typeof value === 'boolean') return value ? 'true' : 'false'
+    if (typeof value === 'number' || typeof value === 'string') return String(value)
+    return null
+}

package/app/utils/translate.ts

@@ -0,0 +1,45 @@
+import type { I18n } from 'vue-i18n'
+
+// The admin's translator, set once by the vector-i18n plugin. The UI runs in
+// the browser only (ssr: false), one app per page, so a module-level instance
+// is safe and lets utilities, stores and async handlers translate outside a
+// component's setup.
+let instance: VectorI18n | null = null
+
+/** The admin's vue-i18n instance, in composition mode: what the plugin provides as `$vectorI18n`. */
+export type VectorI18n = I18n<Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, string, false>
+
+export function setVectorI18n(i18n: VectorI18n): void {
+    instance = i18n
+}
+
+/**
+ * Translates one of the admin's own strings: `vt('list.selected', { count }, count)`.
+ * `{name}` interpolates; `a | b | c` pluralizes on the count passed last.
+ * Before the plugin runs (never in practice) the key itself comes back.
+ */
+export function vt(key: string, params: Record<string, unknown> = {}, plural?: number): string {
+    if (!instance) return key
+    return plural === undefined ? instance.global.t(key, params) : instance.global.t(key, params, plural)
+}
+
+/**
+ * A resource label as it reads inside a sentence (`Create product`,
+ * `Delete 3 products?`): lower-cased in the current language, except
+ * where nouns keep their capital — German writes every noun with one.
+ */
+export function vnoun(label: string): string {
+    const locale = instance ? String(instance.global.locale.value) : 'en'
+    return locale === 'de' || locale.startsWith('de-') ? label : label.toLocaleLowerCase(locale)
+}
+
+// `$vectorI18n` is declared here rather than left to Nuxt's generated plugin
+// types: NuxtApp inherits those from the type of every plugin module, a layer's
+// own plugins among them, and resolving that is circular — it leaves
+// `useNuxtApp().$vectorI18n` unknown. Kept out of the plugin module, which is one
+// of those bases itself.
+declare module '#app' {
+    interface NuxtApp {
+        $vectorI18n: VectorI18n
+    }
+}

package/app/utils/widgets.ts

@@ -0,0 +1,11 @@
+/** Formats a widget value by its declared format: number, money:CUR, percent, duration. */
+export function formatWidgetValue(value: number | null | undefined, format: string | undefined): string {
+    if (value === null || value === undefined) return vt('common.none')
+    if (format?.startsWith('money:')) return formatMoney(Math.round(value), format.slice(6))
+    if (format === 'percent') return vt('dashboard.percent', { value: formatNumber(value, 1) })
+    if (format === 'duration') {
+        const minutes = Math.round(value / 60)
+        return minutes < 60 ? vt('dashboard.duration.minutes', { value: minutes }) : vt('dashboard.duration.hours', { value: formatNumber(minutes / 60, 1) })
+    }
+    return formatNumber(value, Number.isInteger(value) ? undefined : 2)
+}

package/nuxt.config.ts

@@ -0,0 +1,83 @@
+import { fileURLToPath } from 'node:url'
+
+// Paths inside a layer's config resolve against the consuming app, so
+// anything that names a file in this package goes through this alias.
+const layerDir = fileURLToPath(new URL('./', import.meta.url))
+
+export default defineNuxtConfig({
+    $meta: {
+        name: 'vector',
+    },
+
+    modules: ['vuetify-nuxt-module', '@pinia/nuxt', '@vueuse/nuxt'],
+
+    // A back-office application: rendered in the browser only, hostable
+    // as static files (standalone) or from the PHP application (hosted).
+    ssr: false,
+
+    runtimeConfig: {
+        public: {
+            vector: {
+                // Overridden by NUXT_PUBLIC_VECTOR_API_BASE.
+                apiBase: 'http://localhost:8080',
+                // Runtime UI extensions (ES-module URLs) in standalone mode; hosted mode reads VECTOR_UI_EXTENSIONS.
+                extensions: [] as string[],
+            },
+        },
+    },
+
+    vuetify: {
+        moduleOptions: {
+            prefixComposables: true,
+        },
+        vuetifyOptions: {
+            theme: {
+                defaultTheme: 'system',
+                themes: {
+                    // medium-emphasis text at 0.74 (Vuetify's 0.6 default) keeps subtitles and hints above WCAG AA contrast
+                    light: {
+                        dark: false,
+                        colors: {
+                            primary: '#1F5F8B',
+                            secondary: '#546E7A',
+                            // Status colours dark enough for white text at WCAG AA (4.5:1): Vuetify's
+                            // defaults (#4CAF50, #FB8C00, #2196F3) fall below it on toasts and chips.
+                            success: '#2E7D32',
+                            warning: '#B45309',
+                            info: '#1565C0',
+                            error: '#C62828',
+                        },
+                        variables: { 'medium-emphasis-opacity': 0.74 },
+                    },
+                    dark: {
+                        dark: true,
+                        colors: {
+                            primary: '#5AA9E6',
+                            secondary: '#90A4AE',
+                        },
+                        variables: { 'medium-emphasis-opacity': 0.8 },
+                    },
+                },
+            },
+            // The house style every generated view shares; a consuming app
+            // overrides any entry in its own nuxt.config.
+            defaults: {
+                VTextField: { variant: 'outlined', density: 'comfortable' },
+                VTextarea: { variant: 'outlined', density: 'comfortable' },
+                VSelect: { variant: 'outlined', density: 'comfortable' },
+                VAutocomplete: { variant: 'outlined', density: 'comfortable' },
+                VNumberInput: { variant: 'outlined', density: 'comfortable' },
+                VBtn: { variant: 'flat' },
+                VCard: { variant: 'flat', border: true },
+            },
+        },
+    },
+
+    typescript: {
+        strict: true,
+    },
+
+    alias: {
+        '#vector': layerDir,
+    },
+})

package/package.json

@@ -1,6 +1,83 @@
 {
-  "name": "@kinetis/vector-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@kinetis/vector-ui",
+    "version": "0.9.0",
+    "description": "The Kinetis Vector admin UI, as a Nuxt layer on Vuetify.",
+    "keywords": [
+        "kinetis",
+        "vector",
+        "admin",
+        "nuxt",
+        "nuxt-layer",
+        "vuetify"
+    ],
+    "homepage": "https://kinetis.dev/vector/docs/",
+    "bugs": {
+        "url": "https://github.com/kinetis-dev/vector-dev/issues"
+    },
+    "license": "MIT",
+    "author": "Alon Noy",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/kinetis-dev/vector-dev.git",
+        "directory": "packages/vector-ui"
+    },
+    "type": "module",
+    "main": "./nuxt.config.ts",
+    "files": [
+        "nuxt.config.ts",
+        "app",
+        "README.md",
+        "LICENSE",
+        "CHANGELOG.md"
+    ],
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
+    "scripts": {
+        "prepare": "nuxt prepare",
+        "typecheck": "nuxt prepare && vue-tsc --noEmit",
+        "lint": "eslint .",
+        "test": "vitest run --passWithNoTests"
+    },
+    "dependencies": {
+        "@mdi/font": "^7.4.47",
+        "@pinia/nuxt": "^1.0.2",
+        "@tiptap/core": "^3.31.3",
+        "@tiptap/extension-image": "^3.31.3",
+        "@tiptap/extension-link": "^3.31.3",
+        "@tiptap/extension-mention": "^3.31.3",
+        "@tiptap/extension-placeholder": "^3.31.3",
+        "@tiptap/extension-table": "^3.31.3",
+        "@tiptap/markdown": "^3.31.3",
+        "@tiptap/pm": "^3.31.3",
+        "@tiptap/starter-kit": "^3.31.3",
+        "@tiptap/vue-3": "^3.31.3",
+        "@vueuse/core": "^15.0.0",
+        "@vueuse/nuxt": "^15.0.0",
+        "dompurify": "^3.4.16",
+        "markdown-it": "^15.0.2",
+        "pinia": "^4.0.3",
+        "vue-i18n": "^11.4.12"
+    },
+    "peerDependencies": {
+        "nuxt": "^4.5.0",
+        "vue": "^3.5.0",
+        "vuetify": "^4.2.0",
+        "vuetify-nuxt-module": "^1.0.0-rc.6"
+    },
+    "devDependencies": {
+        "@nuxt/test-utils": "^4.3.0",
+        "@types/node": "^22.0.0",
+        "@vue/test-utils": "^2.5.1",
+        "happy-dom": "^20.14.5",
+        "nuxt": "^4.5.2",
+        "sass-embedded": "^1.90.0",
+        "typescript": "~6.0.3",
+        "vitest": "^4.0.2",
+        "vue": "^3.5.0",
+        "vue-tsc": "^3.0.0",
+        "vuetify": "^4.2.2",
+        "vuetify-nuxt-module": "^1.0.0-rc.6"
+    }
+}