managarten/packages/shared-branding
Till JS b737240ec1 feat(auth): add access tier system for phased app releases
Introduces a tiered access control system so apps can be released
gradually (founder → alpha → beta → public) without extra infrastructure.
Users are gated at the AuthGate level based on their tier vs the app's
requiredTier. All apps remain deployed and reachable, but only users
with sufficient tier can enter.

- Add accessTier enum + column to users schema (default: 'public')
- Add tier claim to JWT payload in better-auth config
- Add requiredTier field to ManaApp interface + all 25 apps
- Add hasAppAccess(), getAccessibleManaApps(), ACCESS_TIER_LABELS
- Update AuthGate with tier check + access denied screen
- Update getPillAppItems + Home page to filter by user tier
- Update all 22 app layouts to pass user tier to PillNav
- Add admin API: GET/PUT /api/v1/admin/users/:id/tier
- Document access tier system in CLAUDE.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 21:50:06 +02:00
..
src feat(auth): add access tier system for phased app releases 2026-03-30 21:50:06 +02:00
package.json improve code quality 2025-12-03 23:42:37 +01:00
README.md style: auto-format codebase with Prettier 2025-11-27 18:33:16 +01:00
tsconfig.json style: auto-format codebase with Prettier 2025-11-27 18:33:16 +01:00

@manacore/shared-branding

Shared branding components and configuration for the Mana ecosystem.

Features

  • AppLogo: SVG logo component for any Mana app
  • AppLogoWithName: Logo with app name combination
  • ManaIcon: Universal Mana drop icon for credits display
  • Branding Config: Centralized colors, names, and taglines

Installation

pnpm add @manacore/shared-branding

Usage

Display an app's logo:

<script lang="ts">
	import { AppLogo } from '@manacore/shared-branding';
</script>

<AppLogo app="memoro" size={32} />
<AppLogo app="manacore" size={32} />
<AppLogo app="manadeck" size={32} />
<AppLogo app="maerchenzauber" size={32} />

AppLogoWithName

Display logo with app name (perfect for headers):

<script lang="ts">
	import { AppLogoWithName } from '@manacore/shared-branding';
</script>

<AppLogoWithName app="memoro" size={28} />
<AppLogoWithName app="manacore" showName={false} />

ManaIcon

Universal Mana drop icon:

<script lang="ts">
	import { ManaIcon } from '@manacore/shared-branding';
</script>

<ManaIcon size={24} color="#4287f5" />

Branding Configuration

Access branding config programmatically:

import { getAppBranding, APP_BRANDING } from '@manacore/shared-branding';

const memoro = getAppBranding('memoro');
console.log(memoro.name); // "Memoro"
console.log(memoro.tagline); // "AI Voice Memos"
console.log(memoro.primaryColor); // "#f8d62b"

App Branding

App Name Primary Color Tagline
memoro Memoro #f8d62b (Gold) AI Voice Memos
manacore ManaCore #6366f1 (Indigo) Central Hub
manadeck ManaDeck #8b5cf6 (Purple) AI Flashcards
maerchenzauber Märchenzauber #ec4899 (Pink) AI Story Creator

Props

AppLogo

Prop Type Default Description
app AppId required App identifier
size number 32 Size in pixels
color string App primary color Override color
class string '' Additional CSS classes

AppLogoWithName

Prop Type Default Description
app AppId required App identifier
size number 28 Logo size in pixels
color string App primary color Override color
showName boolean true Show app name
nameFontSize string '1.25rem' Name font size
gap string '0.5rem' Gap between logo and name
class string '' Additional CSS classes

ManaIcon

Prop Type Default Description
size number 24 Size in pixels
color string '#4287f5' Icon color
class string '' Additional CSS classes

Types

type AppId = 'memoro' | 'manacore' | 'manadeck' | 'maerchenzauber';

interface AppBranding {
	id: AppId;
	name: string;
	tagline: string;
	primaryColor: string;
	secondaryColor?: string;
	logoPath: string;
	logoViewBox?: string;
	logoStroke?: boolean;
	logoStrokeWidth?: number;
}