@katforge/spark

The UI layer shared by every KATFORGE realm. Provides the login modal, flash messages, modal dialogs, and theme CSS so the user experience is consistent across the ecosystem.

npm install @katforge/spark

Plugin Setup

Register once in your app entry. All @katforge/spark components and composables access the @katforge/api instance and flash store through Vue's provide/inject.

import { createApp } from 'vue';
import { createSpark } from '@katforge/spark';
import { katforge } from './lib/katforge';

const app = createApp (App);
app.use (createSpark ({ katforge }));
app.mount ('#app');

For Nuxt, create a client plugin:

import { createSpark } from '@katforge/spark';

export default defineNuxtPlugin ((nuxtApp) => {
   nuxtApp.vueApp.use (createSpark ({ katforge: nuxtApp.$katforge }));
});

On this page set

• Palette & theming — start here when picking colors. Defines the semantic tokens (bg-primary, text-muted, etc.), the brand palettes that override them per realm, and the inheritance rules.
• Form components — SparkForm and its inputs, plus the validation pipeline. Use this for any signup / settings / contact surface.
• Components — everything that isn't a form input. Login modal, avatar, wallet display, async wrappers, flash messages, icons, and the realm marks.
• Authoring with markdown — how to call Spark components from inside .md files via MDC. Setup recipes for Nuxt and Vite.
• Composables — Vue hooks: useFlash, usePlayer, useWallet, useAsync/usePagedAsync, plus the realm data API.