managarten/packages/shared-branding
Till JS 7df515434e fix: revert tier test patch, widen toggleField, add spiral-db prepare
Three independent fixes grouped because they're each one-line changes:

1. Revert MANA_APPS requiredTier test patch
   Commit e52b6e29f flipped all 36+ apps to requiredTier='guest' for
   local testing. Restored original tiers from before the flip:
   guest-accessible (contacts, calendar, todo), public (who),
   beta (zitare, calc, guides, arcade), alpha (most modules),
   founder (memoro, nutriphi, mail, habits, notes, dreams, cycles,
   events, finance, places, news). Body stays at 'guest' (new module,
   intentional). The memory note "REVERT BEFORE RELEASE" is now done.

2. Widen toggleField to accept IndexableType keys
   `toggleField<T>(table: Table<T, string>, ...)` rejected Dexie
   tables keyed by IndexableType (the default). Changed the second
   generic to IndexableType so callers like images.svelte.ts don't
   need the `as unknown as Parameters<...>[0]` double-cast.

3. Add prepare script to spiral-db
   `"prepare": "pnpm build"` ensures `dist/` is rebuilt after
   `pnpm install` on a fresh clone. Without this, the 209 cascading
   type errors from stale/missing dist files return on every new
   checkout. Also added `prepublishOnly` as a safety net.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 18:35:20 +02:00
..
src fix: revert tier test patch, widen toggleField, add spiral-db prepare 2026-04-10 18:35:20 +02:00
package.json feat: rename ManaCore to Mana across entire codebase 2026-04-05 20:00:13 +02:00
README.md chore: complete ManaCore → Mana rename (docs, go modules, plists, images) 2026-04-07 12:26:10 +02:00
tsconfig.json style: auto-format codebase with Prettier 2025-11-27 18:33:16 +01:00

@mana/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 @mana/shared-branding

Usage

Display an app's logo:

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

<AppLogo app="memoro" size={32} />
<AppLogo app="mana" size={32} />
<AppLogo app="cards" size={32} />
<AppLogo app="maerchenzauber" size={32} />

AppLogoWithName

Display logo with app name (perfect for headers):

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

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

ManaIcon

Universal Mana drop icon:

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

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

Branding Configuration

Access branding config programmatically:

import { getAppBranding, APP_BRANDING } from '@mana/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
mana Mana #6366f1 (Indigo) Central Hub
cards Cards #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' | 'mana' | 'cards' | 'maerchenzauber';

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