mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 11:19:39 +02:00
M1 of docs/plans/wardrobe-module.md — pure data layer + backend plumbing, zero UI (that's M2). A user can now hold a digital wardrobe per space: brand merch, club Trikots, family Kleiderschrank, team Kostüme, practice Dresscode, and personal closet all live as separate pools under the same Dexie tables, space-scoped like tags/scenes/agents after Phase 2c. Data model — two tables, no join: - wardrobeGarments (Dexie v41): single clothing items / accessories. Indexed on `category` + `createdAt` + `isArchived`. Encrypted: name/brand/color/size/material/tags/notes. Plaintext: category, mediaIds, counters, timestamps — all indexed or structural. `mediaIds[0]` is the primary photo used for try-on; additional ids are alternate views (back, detail) for M7. - wardrobeOutfits (Dexie v41): named compositions referencing garment ids. Encrypted: name/description/tags. Plaintext: garmentIds (FK array), occasion (closed enum — useful for undecrypted filtering), season, booleans, lastTryOn snapshot. - picture.images gains `wardrobeOutfitId?: string | null` as a plaintext back-reference. Try-on results land in the Picture gallery like any other generation; the outfit detail view queries them via this id rather than maintaining a third table. Space scope: - `wardrobe` added to all five explicit allowlists in shared-types/ spaces.ts (personal is wildcard, no edit needed). Each space type gets a one-line comment explaining the real-world use case. - App registry: `wardrobe` entry in shared-branding/mana-apps.ts with a rose→fuchsia gradient icon (T-shirt on hanger silhouette), color #e11d48, tier 'beta', status 'beta'. - Module registry: wardrobeModuleConfig imported + appended to MODULE_CONFIGS so SYNC_APP_MAP picks it up automatically. Backend: - MAX_REFERENCE_IMAGES bumped 4 → 8 in picture/generate-with- reference (plus the client-side default in ReferenceImagePicker). Justified with a comment: face + body + top + bottom + shoes + outerwear + 2 accessories = 8. Cost doesn't scale with ref count (OpenAI bills per output), so the bump is a pure capability expansion with no credit-side risk. - New POST /api/v1/wardrobe/garments/upload wraps uploadImageToMedia with app='wardrobe'. Registered under /api/v1/wardrobe in index.ts. Pattern 1:1 with the profile/me-images/upload endpoint; tier-gating falls out of wardrobe NOT being in RESOURCE_MODULES (tier='guest' works — consistent with picture's plain CRUD). Stores emit domain events (WardrobeGarmentAdded, WardrobeOutfitCreated, WardrobeOutfitTryOn, etc.) so later mana-ai missions can observe activity without polling. No UI in this commit. M2 (Garments-Grundlayer) wires the route + grid + upload-zone; M3 the Outfit composer; M4 the Try-On integration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| src | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
@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
AppLogo
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;
}