managarten/packages/shared-branding
Till JS 9e0ade4c0a fix(mana/web): sprint 3 — type-safe sync protocol + tests
- New SyncChange / FieldChange / SyncOp types replace `any[]` in
  applyServerChanges. The wire format is now self-documenting and
  TypeScript catches malformed callsites at compile time.
- isValidSyncChange() validates incoming server payloads at the boundary:
  malformed entries are dropped with a single warn log, valid ones are
  applied. A bad row from the server can no longer corrupt IndexedDB.
  Hand-rolled type guards keep us free of a runtime-validation dep.
- applyServerChanges() and readFieldTimestamps() are now top-level
  exports (extracted out of createUnifiedSync's closure) so they can be
  imported directly by tests. Behaviour is unchanged — the closure
  variant inside the sync manager just resolves the module-level
  symbol now.
- New sync.test.ts covers:
  * pure isValidSyncChange and readFieldTimestamps cases
  * field-level LWW: server-newer wins, split outcome when local-newer
    on one field and server-newer on another
  * insert with __fieldTimestamps stamping
  * soft-delete LWW guard
  * malformed-entry drop with valid entries surviving
  * sync-loop guard: server-applied writes don't generate _pendingChanges
- fake-indexeddb added as devDependency for the integration tests.

Note: the monorepo's vitest install is currently tangled across mixed
@vitest/* package versions in the lockfile, so `pnpm test` fails before
reaching this file. The tests are written to pass on any vitest 4.x once
that's untangled — needs its own dedicated cleanup pass.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 13:38:23 +02:00
..
src fix(mana/web): sprint 3 — type-safe sync protocol + tests 2026-04-07 13:38:23 +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;
}