From 580e798e16346eb894eb899edac82d2efdf40adc Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Sat, 18 Apr 2026 22:32:53 -0500 Subject: initial commit --- src/lib/clipboard.ts | 17 +++ src/lib/export.ts | 326 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/lib/sanitize.ts | 141 ++++++++++++++++++++++ 3 files changed, 484 insertions(+) create mode 100644 src/lib/clipboard.ts create mode 100644 src/lib/export.ts create mode 100644 src/lib/sanitize.ts (limited to 'src/lib') diff --git a/src/lib/clipboard.ts b/src/lib/clipboard.ts new file mode 100644 index 0000000..d735a51 --- /dev/null +++ b/src/lib/clipboard.ts @@ -0,0 +1,17 @@ +export async function copyToClipboard(text: string): Promise { + try { + await navigator.clipboard.writeText(text); + return true; + } catch { + // Fallback for older browsers + const el = document.createElement('textarea'); + el.value = text; + el.style.position = 'fixed'; + el.style.left = '-9999px'; + document.body.appendChild(el); + el.select(); + const ok = document.execCommand('copy'); + document.body.removeChild(el); + return ok; + } +} diff --git a/src/lib/export.ts b/src/lib/export.ts new file mode 100644 index 0000000..9e1a7f1 --- /dev/null +++ b/src/lib/export.ts @@ -0,0 +1,326 @@ +import type { BrandInputs, BrandOutputs } from '../types'; + +export function toMarkdown(inputs: BrandInputs, outputs: BrandOutputs): string { + const lines: string[] = []; + + lines.push(`# Brand Package — ${inputs.name || 'Untitled'}`); + lines.push(''); + lines.push(`*Generated ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}*`); + lines.push(''); + lines.push('---'); + lines.push(''); + + lines.push('## Overview'); + lines.push(''); + lines.push(outputs.overview); + lines.push(''); + + lines.push('## Positioning'); + lines.push(''); + lines.push(outputs.positioning); + lines.push(''); + + lines.push('## Tone & Voice'); + lines.push(''); + lines.push(`**Attributes:** ${outputs.tone.attributes.join(', ')}`); + lines.push(''); + lines.push(`**Voice:** ${outputs.tone.voiceNotes}`); + lines.push(''); + if (outputs.tone.avoidList.length > 0) { + lines.push(`**Avoid:** ${outputs.tone.avoidList.join(', ')}`); + lines.push(''); + } + if (outputs.tone.examplePhrases.length > 0) { + lines.push('**Example phrases:**'); + outputs.tone.examplePhrases.forEach(p => lines.push(`- ${p}`)); + lines.push(''); + } + + lines.push('## Messaging'); + lines.push(''); + lines.push('### Titles'); + outputs.titles.forEach((t, i) => lines.push(`${i + 1}. ${t}`)); + lines.push(''); + lines.push('### Subtitles'); + outputs.subtitles.forEach((s, i) => lines.push(`${i + 1}. ${s}`)); + lines.push(''); + lines.push('### Taglines'); + outputs.taglines.forEach((t, i) => lines.push(`${i + 1}. ${t}`)); + lines.push(''); + + lines.push('## Color Palette'); + lines.push(''); + outputs.palette.swatches.forEach(s => { + lines.push(`- **${s.name}** — \`${s.hex}\` *(${s.role})*`); + }); + lines.push(''); + + lines.push('## Typography'); + lines.push(''); + lines.push(`**Primary:** ${outputs.typography.primary}`); + if (outputs.typography.secondary !== outputs.typography.primary) + lines.push(`**Secondary:** ${outputs.typography.secondary}`); + lines.push(`**Monospace:** ${outputs.typography.mono}`); + lines.push(''); + lines.push(`*${outputs.typography.pairNote}*`); + lines.push(''); + lines.push('| Style | Size | Weight | Usage |'); + lines.push('|-------|------|--------|-------|'); + outputs.typography.scale.forEach(t => { + lines.push(`| ${t.label} | ${t.size} | ${t.weight} | ${t.usage} |`); + }); + lines.push(''); + + lines.push('## Visual Direction'); + lines.push(''); + outputs.visualDirections.forEach(dir => { + lines.push(`### ${dir.name}`); + lines.push(''); + lines.push(dir.description); + lines.push(''); + lines.push(`**Palette:** ${dir.palette}`); + lines.push(''); + lines.push(`**Typography:** ${dir.typography}`); + lines.push(''); + lines.push(`**References:** ${dir.references}`); + lines.push(''); + }); + + lines.push('## Logo Concepts'); + lines.push(''); + outputs.logoConcepts.forEach(lc => { + lines.push(`### ${lc.title}`); + lines.push(''); + lines.push(lc.concept); + lines.push(''); + lines.push(`**Mark:** ${lc.mark}`); + lines.push(''); + lines.push(`**Execution:** ${lc.execution}`); + lines.push(''); + }); + + lines.push('## Usage Examples'); + lines.push(''); + outputs.usageExamples.forEach(ex => { + lines.push(`### ${ex.context}`); + lines.push(''); + lines.push('```'); + lines.push(ex.text); + lines.push('```'); + lines.push(''); + }); + + lines.push('## Constraints'); + lines.push(''); + outputs.constraints.forEach(c => lines.push(`- ${c}`)); + lines.push(''); + + lines.push('---'); + lines.push(''); + lines.push('*Brand Workbench*'); + + return lines.join('\n'); +} + +export function toJSON(inputs: BrandInputs, outputs: BrandOutputs): string { + return JSON.stringify( + { + project: { + name: inputs.name, + category: inputs.category, + purpose: inputs.purpose, + audience: inputs.audience, + }, + brand: outputs, + meta: { + generated: new Date().toISOString(), + version: '1.0', + }, + }, + null, + 2 + ); +} + +export function toHTML(inputs: BrandInputs, outputs: BrandOutputs): string { + const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); + const esc = (s: string) => s.replace(/&/g, '&').replace(//g, '>'); + + const swatchesHtml = outputs.palette.swatches.map(s => ` +

+

+

${esc(s.name)}

+

${esc(s.hex)}

+

`).join(''); + + const scaleRows = outputs.typography.scale.map(t => ` + ${esc(t.label)}${esc(t.size)}${esc(t.weight)}${esc(t.usage)}`).join(''); + + const dirsHtml = outputs.visualDirections.map(d => ` +

+

${esc(d.name)}

+

${esc(d.description)}

+

Palette: ${esc(d.palette)}
Typography: ${esc(d.typography)}
References: ${esc(d.references)}

+

`).join(''); + + const logosHtml = outputs.logoConcepts.map(l => ` +

+

${esc(l.title)}

+

${esc(l.concept)}

+

Mark: ${esc(l.mark)}
Execution: ${esc(l.execution)}

+

`).join(''); + + const usageHtml = outputs.usageExamples.map(ex => ` +

+

${esc(ex.context)}

+

${esc(ex.text)}

+

`).join(''); + + const constraintsHtml = outputs.constraints.map(c => `

${esc(c)}

`).join('\n'); + + const secondaryRow = outputs.typography.secondary !== outputs.typography.primary + ? `Secondary${esc(outputs.typography.secondary)}` : ''; + + return ` + + + + +${esc(inputs.name || 'Brand')} — Brand Guidelines + + + +

+

+

${esc(inputs.name || 'Brand')} Guidelines

+

Generated ${date}${inputs.category ? ` · ${esc(inputs.category)}` : ''}${inputs.audience ? ` · ${esc(inputs.audience)}` : ''}

+

+ +

+

Overview

+

${esc(outputs.overview)}

+

+ +

+

Positioning

+

${esc(outputs.positioning)}

+

+ +

+

Tone & Voice

+

${outputs.tone.attributes.map(a => `${esc(a)}`).join('')}

+

Voice${esc(outputs.tone.voiceNotes)}

+ ${outputs.tone.avoidList.length ? `

Avoid${esc(outputs.tone.avoidList.join(', '))}

` : ''} +

+ +

+

Messaging

+

+

Titles

+

${esc(t)}

+

+
+

+

Taglines

+

${esc(t)}

+

+

+ +

+

Color Palette

+

${swatchesHtml}

+

+ +

+

Typography

+ + + ${secondaryRow} + +

Primary	${esc(outputs.typography.primary)}
Monospace	${esc(outputs.typography.mono)}

+

${esc(outputs.typography.pairNote)}

+
+ + + ${scaleRows} +

Style	Size	Weight	Usage

+

+ +

+

Visual Direction

+ ${dirsHtml} +

+ +

+

Logo Concepts

+ ${logosHtml} +

+ +

+

Usage Examples

+ ${usageHtml} +

+ +

+

Constraints

+

${constraintsHtml} +

+

+ +`; +} + +export function downloadFile(content: string, filename: string, mimeType: string): void { + const blob = new Blob([content], { type: mimeType }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + a.click(); + URL.revokeObjectURL(url); +} diff --git a/src/lib/sanitize.ts b/src/lib/sanitize.ts new file mode 100644 index 0000000..d63eb19 --- /dev/null +++ b/src/lib/sanitize.ts @@ -0,0 +1,141 @@ +/** + * Defensive coercion helpers for AI-generated brand outputs. + * AI models sometimes return structured objects instead of plain strings/arrays; + * these helpers normalise any value to the expected type so React never receives + * an object where it expects a renderable child. + */ +import type { BrandOutputs } from '../types'; +import { TYPE_SCALE } from '../engine/generator'; + +// --------------------------------------------------------------------------- +// Primitive coercions +// --------------------------------------------------------------------------- + +/** Coerce any value to a non-empty string. */ +export function str(v: unknown, fallback = ''): string { + if (typeof v === 'string') return v; + if (typeof v === 'number' || typeof v === 'boolean') return String(v); + if (v && typeof v === 'object') { + const o = v as Record; + for (const k of ['text', 'content', 'value', 'description', 'name', 'label']) { + if (typeof o[k] === 'string' && o[k]) return o[k] as string; + } + const vals = Object.values(o).filter(x => typeof x === 'string') as string[]; + if (vals.length) return vals.join(' — '); + } + return fallback; +} + +/** Coerce any value to an array of non-empty strings. */ +export function strArr(v: unknown, fallback: string[] = []): string[] { + if (Array.isArray(v)) return v.map(x => str(x)).filter(Boolean); + if (typeof v === 'string' && v) return [v]; + if (v && typeof v === 'object') return [str(v)].filter(Boolean); + return fallback; +} + +function normalizeHex(hex: string): string { + const h = hex.trim().toLowerCase(); + const clean = h.startsWith('#') ? h : `#${h}`; + return /^#[0-9a-f]{6}$/.test(clean) ? clean : '#888888'; +} + +// --------------------------------------------------------------------------- +// Full output sanitiser — safe to call on any untrusted value +// --------------------------------------------------------------------------- + +/** + * Recursively coerce every field of a brand output object to its expected type. + * Returns `null` if the input is clearly not a valid brand output at all. + */ +export function sanitizeOutputs(raw: unknown): BrandOutputs | null { + if (!raw || typeof raw !== 'object') return null; + const r = raw as Record; + + // Must have at least the core keys to be worth keeping + if (!r.overview && !r.positioning && !r.tone) return null; + + const tone = (r.tone && typeof r.tone === 'object' ? r.tone : {}) as Record; + const typo = (r.typography && typeof r.typography === 'object' ? r.typography : {}) as Record; + const palette = (r.palette && typeof r.palette === 'object' ? r.palette : {}) as Record; + + const swatches = Array.isArray(palette.swatches) + ? palette.swatches.map((s: unknown, i: number) => { + const sw = (s && typeof s === 'object' ? s : {}) as Record; + return { + id: str(sw.id, `s${i}`), + name: str(sw.name, 'Color'), + hex: normalizeHex(str(sw.hex, '#888888')), + role: str(sw.role, 'accent'), + }; + }) + : []; + + if (!swatches.length) return null; + + const visualDirections = Array.isArray(r.visualDirections) + ? r.visualDirections.map((v: unknown, i: number) => { + const d = (v && typeof v === 'object' ? v : {}) as Record; + return { + id: str(d.id, `v${i + 1}`), + name: str(d.name, `Direction ${i + 1}`), + description: str(d.description, ''), + palette: str(d.palette, ''), + typography: str(d.typography, ''), + references: str(d.references, ''), + }; + }) + : []; + + const logoConcepts = Array.isArray(r.logoConcepts) + ? r.logoConcepts.map((v: unknown, i: number) => { + const c = (v && typeof v === 'object' ? v : {}) as Record; + return { + id: str(c.id, `l${i + 1}`), + title: str(c.title, `Concept ${i + 1}`), + concept: str(c.concept, ''), + mark: str(c.mark, ''), + execution: str(c.execution, ''), + }; + }) + : []; + + const usageExamples = Array.isArray(r.usageExamples) + ? r.usageExamples.map((v: unknown) => { + const e = (v && typeof v === 'object' ? v : {}) as Record; + return { + context: str(e.context, 'Example'), + text: str(e.text, ''), + }; + }) + : []; + + // Preserve an existing valid scale (already-saved data) or fall back to default + const existingScale = Array.isArray(typo.scale) ? typo.scale : TYPE_SCALE; + + return { + overview: str(r.overview, ''), + positioning: str(r.positioning, ''), + tone: { + attributes: strArr(tone.attributes, []), + voiceNotes: str(tone.voiceNotes, ''), + avoidList: strArr(tone.avoidList, []), + examplePhrases: strArr(tone.examplePhrases, []), + }, + titles: strArr(r.titles, []), + subtitles: strArr(r.subtitles, []), + taglines: strArr(r.taglines, []), + palette: { swatches }, + typography: { + primary: str(typo.primary, 'Inter'), + secondary: str(typo.secondary, 'Inter'), + mono: str(typo.mono, 'JetBrains Mono'), + pairNote: str(typo.pairNote, ''), + scale: existingScale, + }, + visualDirections, + logoConcepts, + usageExamples, + constraints: strArr(r.constraints, []), + }; +} -- cgit v1.2.3