Docs/@katforge/spark

@katforge/spark

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

shell
npm install @katforge/spark

Components

KATforgeLogin

Drop-in login/register/guest modal. Wired to the SDK's auth module. Handles email/password, OAuth buttons, guest sessions, and guest-to-registered upgrade. Emits @authenticated when the user is signed in.

Vue
<template>
   <KATforgeLogin
      :katforge="katforge"
      :providers="[ 'discord', 'google', 'steam' ]"
      @authenticated="onLogin"
   />
</template>

<script setup>
import { KATforgeLogin } from '@katforge/spark';
</script>

SparkFlash / SparkFlashContainer

Toast notification system. SparkFlashContainer renders at the app root; useFlash () fires messages from anywhere.

Vue
<template>
   <SparkFlashContainer />
</template>

<script setup>
import { SparkFlashContainer, useFlash } from '@katforge/spark';

const flash = useFlash ();
flash.success ('Saved');
flash.error ('Something went wrong');
flash.info ('Tip: try keyboard shortcuts');
</script>

Composables

useFlash ()

TypeScript
const flash = useFlash ();
flash.success (message, options?)
flash.error   (message, options?)
flash.info    (message, options?)
flash.warn    (message, options?)
flash.dismiss (id)
flash.clear   ()

Options: { duration?: number, dismissible?: boolean }.

Theme CSS

Import the theme stylesheet to get the KATforge dark palette, orange accent, and base utility classes:

TypeScript
import '@katforge/spark/styles/theme.css';

This is automatically included by Katalyst-scaffolded projects.